/* Clear Signal — crisp hierarchy, with quiet, accessible account controls.
   Shared brand tokens and self-hosted fonts are defined in brand.css. */
.commerce-page{font-family:var(--font-body,Manrope,Arial,sans-serif);color:var(--brand-ink,#17243b);background:var(--brand-paper,#f3f5fa);font-synthesis:none;margin:0}
.commerce-page *{box-sizing:border-box}
.commerce-page a{color:var(--brand-accent,#3153d9);text-underline-offset:4px}
.commerce-page>header,.commerce-page>footer{width:min(100% - clamp(2rem,6vw,6rem),72rem);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.5rem}
.commerce-page>header{border-bottom:1px solid var(--brand-line,#d6dde9)}
.commerce-page>header .brand-lockup{color:var(--brand-ink,#17243b)}
.commerce-page>header nav{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;font-size:.875rem}
.commerce-page>header nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:700;color:var(--brand-ink,#17243b)}
.commerce-page>header nav a:hover{color:var(--brand-accent,#3153d9);text-decoration:underline}
.commerce-page>main:not(.auth-shell){width:min(100% - clamp(2rem,6vw,6rem),62.5rem);margin:clamp(2.5rem,1rem + 4vw,5rem) auto clamp(4rem,2rem + 4vw,7rem);min-height:55svh}
.commerce-page .eyebrow{font-size:.6875rem;font-weight:800;letter-spacing:.14em;line-height:1.65;color:var(--brand-accent,#3153d9);margin-bottom:1.125rem}
.commerce-page>main:not(.auth-shell)>h1{font-family:var(--font-heading,Manrope,Arial,sans-serif);font-size:clamp(2.5rem,1.75rem + 3vw,4.25rem);font-weight:800;line-height:1.07;letter-spacing:-.035em;max-width:22ch;margin:1rem 0 1.5rem;text-wrap:balance}
.commerce-page>main:not(.auth-shell) h2{font-family:var(--font-heading,Manrope,Arial,sans-serif);font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);font-weight:700;letter-spacing:-.03em;line-height:1.25;margin:.75rem 0}
.commerce-page>main:not(.auth-shell) p,.commerce-page>main:not(.auth-shell) li{line-height:1.7;font-size:1rem;max-width:65ch}
.commerce-page .intro{font-size:1.125rem!important;max-width:54ch!important;color:var(--brand-muted,#52627a);margin-bottom:2rem}
.commerce-page .purchase-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:1.5rem;margin-top:2rem}
.commerce-page .card{padding:clamp(1.5rem,1rem + 2vw,2.5rem);background:var(--brand-surface,#fff);border:1px solid var(--brand-line,#d6dde9);border-radius:4px;margin-top:1.5rem;min-width:0}
.commerce-page .purchase-grid .card{margin:0}
.commerce-page .checkout,.commerce-page .featured{border-top:4px solid var(--brand-accent,#3153d9)}
.commerce-page .checkout form{margin-top:1.5rem}
.commerce-page .price{font-family:var(--font-heading,Manrope,Arial,sans-serif);font-size:3.5rem;line-height:1.1;letter-spacing:-.04em;font-weight:800;margin-top:.75rem}
.commerce-page .button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--brand-accent,#3153d9);border:1px solid var(--brand-accent,#3153d9);color:var(--brand-surface,#fff);border-radius:4px;font-family:inherit;font-size:.9375rem;font-weight:700;padding:.9375rem 1.25rem;text-decoration:none;cursor:pointer;min-height:49px;line-height:1.3;transition:background .16s ease,border-color .16s ease}
.commerce-page .button:hover{background:var(--brand-accent-hover,#243faf);border-color:var(--brand-accent-hover,#243faf)}
.commerce-page .button:active{background:#1d338e}
.commerce-page .button:disabled{cursor:wait;opacity:.65}
.commerce-page .button.secondary{background:transparent;color:var(--brand-accent,#3153d9);border-color:var(--brand-line,#d6dde9)}
.commerce-page .button.secondary:hover{background:var(--brand-tint,#e9eefa);border-color:var(--brand-accent,#3153d9)}
.commerce-page .actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.375rem 0}
.commerce-page .notice{background:var(--brand-tint,#e9eefa);border-left:3px solid var(--brand-accent,#3153d9);padding:1rem 1.125rem;border-radius:0 3px 3px 0;margin:1.25rem 0;line-height:1.65}
.commerce-page .notice p{font-size:.875rem!important;margin:.5rem 0 0}
.commerce-page .fine{font-size:.8125rem!important;color:var(--brand-muted,#52627a);overflow-wrap:anywhere}
.commerce-page .file{display:block;text-decoration:none;color:var(--brand-ink,#17243b);transition:border-color .16s ease,background .16s ease}
.commerce-page .file:hover{border-color:var(--brand-accent,#3153d9);background:var(--brand-tint,#e9eefa)}
.commerce-page .file>span:last-child{font-size:.875rem;font-weight:700;color:var(--brand-accent,#3153d9)}
.commerce-page .prose{max-width:46.25rem}
.commerce-page .prose h2{margin-top:2rem!important}
.commerce-page .prose h2:first-child{margin-top:0!important}
.commerce-page>main:not(.auth-shell) li{padding:.25rem 0}
.commerce-page>main:not(.auth-shell) ul{padding-left:1.25rem}
.commerce-page>footer{border-top:1px solid var(--brand-line,#d6dde9);color:var(--brand-muted,#52627a);font-size:.75rem;line-height:1.8;flex-wrap:wrap}
.commerce-page>footer strong{color:var(--brand-ink,#17243b);font-size:.875rem}
.commerce-page>footer a{overflow-wrap:anywhere}
.commerce-page a:focus-visible,.commerce-page button:focus-visible{outline:3px solid var(--brand-accent,#3153d9);outline-offset:4px}
/* Keep our conditional controls hidden without affecting Clerk's own UI. */
#auth-continue[hidden],#auth-sign-out[hidden],#retry-purchase[hidden]{display:none!important}

/* Center only our account shell. Never restyle Clerk's headings globally. */
main.auth-shell{width:min(100%,34rem);max-width:34rem;margin:clamp(1.5rem,3vw,2.5rem) auto 3rem;padding-inline:clamp(1rem,4vw,2rem);min-height:0}
.auth-introduction{text-align:center}
.auth-shell .eyebrow{font-size:.6875rem;letter-spacing:.12em;margin-bottom:1rem;line-height:1.6}
.auth-introduction h1{font-family:var(--font-heading,Manrope,Arial,sans-serif);font-size:clamp(2rem,1.6rem + 1.3vw,2.75rem);font-weight:800;letter-spacing:-.035em;line-height:1.1;margin:0 auto 1rem;text-wrap:balance}
.auth-shell .intro{font-size:1rem!important;line-height:1.65;margin:0 auto 1.25rem;max-width:43ch!important;text-wrap:pretty}
.auth-shell #auth-status{text-align:center;font-size:.875rem;color:var(--brand-muted,#52627a);margin:1rem 0;line-height:1.6}
#clerk-auth{display:flex;justify-content:center;width:100%;min-width:0}
#clerk-auth .first-ae-auth-widget,#clerk-auth .first-ae-auth-card{width:100%;max-width:100%;min-width:0}
#clerk-auth .first-ae-auth-card{border-radius:.5rem;box-shadow:0 10px 32px #17243b0a;border:1px solid var(--brand-line,#d6dde9)}
#clerk-auth .first-ae-auth-content{padding:clamp(1.25rem,3vw,2rem);width:100%}
#clerk-auth .first-ae-auth-input{min-height:48px;font-size:1rem;border:1px solid #78879e}
#clerk-auth .first-ae-auth-input:focus-visible{outline:2px solid var(--brand-accent);outline-offset:2px}
#clerk-auth .first-ae-auth-submit,#clerk-auth .first-ae-auth-social{min-height:48px}
#clerk-auth .first-ae-auth-social{border:1px solid #78879e}
#clerk-auth .first-ae-auth-submit{background:var(--brand-accent,#3153d9);box-shadow:none}
#clerk-auth .first-ae-auth-submit:hover{background:var(--brand-accent-hover,#243faf)}
.commerce-page .auth-actions{justify-content:center;margin:1.25rem 0 0}
.auth-actions:has(>button[hidden]+button[hidden]){display:none}
.auth-footnote{text-align:center;font-size:.8125rem;line-height:1.6;margin:1.5rem 0 0;color:var(--brand-muted,#52627a)}
.auth-footnote a{display:inline-flex;align-items:center;min-height:44px}
.auth-shell noscript{display:block;border-left:3px solid var(--brand-accent,#3153d9);padding-left:1rem;line-height:1.7}
@media(max-width:650px){
  .commerce-page>header{gap:1rem;align-items:flex-start;padding-block:1.25rem}
  .commerce-page>header nav{gap:.75rem;font-size:.8125rem}
  .commerce-page>header nav a{min-height:44px}
  .commerce-page .purchase-grid{grid-template-columns:1fr}
  .commerce-page .button{width:100%}
  .commerce-page .actions{display:grid}
  .commerce-page .intro{font-size:1rem!important}
  .commerce-page>footer{align-items:flex-start;flex-direction:column;gap:.75rem}
  .auth-shell .auth-actions{display:flex}
  .auth-shell .auth-actions .button{width:auto;flex:1}
}
@media(max-width:420px){.commerce-page>header{flex-wrap:wrap}.commerce-page>header nav{width:100%;justify-content:flex-end;gap:1.25rem}}
@media(max-width:420px){.auth-page>header{flex-wrap:nowrap;align-items:center}.auth-page>header nav{width:auto}}
@media(prefers-reduced-motion:reduce){.commerce-page .button,.commerce-page .file{transition:none}}