:root { color-scheme: light; font-family: system-ui, sans-serif; color: #18293c; background: #f0f4f7; }
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
.purchase-shell { max-width: 42rem; margin: 8vh auto; padding: clamp(1.25rem, 5vw, 3rem); background: white; border: 1px solid #d2dce5; border-radius: 1.25rem; }
h1 { font-size: clamp(1.7rem, 5vw, 2.3rem); line-height: 1.2; letter-spacing: -.035em; }
p { line-height: 1.6; overflow-wrap: anywhere; }
.test-banner { color: #704d09; background: #fff4d5; padding: .75rem; font-size: .8rem; font-weight: 700; border-radius: .5rem; }
.purchase-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
button { font: inherit; font-weight: 600; border: 1px solid #b6c9d7; border-radius: .6rem; background: #fff; color: #18293c; min-height: 2.75rem; padding: .6rem 1rem; cursor: pointer; }
#purchase-open { background: #174e6a; color: white; border-color: #174e6a; }
button:disabled { opacity: .55; cursor: wait; }
button:focus-visible, a:focus-visible { outline: 3px solid #b76507; outline-offset: 3px; }
#purchase-status { padding: 1rem; border-left: 3px solid #174e6a; background: #eef5f9; }
#purchase-status[role="alert"] { border-color: #a02c24; background: #fff1ef; }
#purchase-sign-in { min-width: 0; max-width: 100%; overflow-x: auto; }
#purchase-sign-in .cl-cardBox, #purchase-sign-in .cl-card { width: 100%; max-width: 100%; min-width: 0; }
@media (max-width: 600px) { .purchase-shell { margin: 1rem; } .purchase-actions button { width: 100%; } }