/* Account, legal and 404 content. Fonts, colours, header, footer, buttons and the CRT layer come
   from /theme.css, which every page loads first, so a buyer clicking through from the homepage to
   checkout stays in the same typeface and chrome. */
main{width:min(100% - 2.4rem,780px);margin:0 auto;padding:clamp(4.5rem,10vw,8rem) 0 7rem}
main.account-wide{width:min(100% - 2.4rem,980px)}
.overline{margin:0 0 1rem;font:.75rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
h1{max-width:15ch;margin:0 0 1rem;font-size:clamp(2.7rem,7vw,5rem)}
p.lede{max-width:680px;font-size:clamp(1rem,2vw,1.16rem)}

.panel{position:relative;overflow:hidden;margin-top:2.5rem;padding:clamp(1.4rem,4vw,2.3rem);border:1px solid var(--line-bright);border-radius:5px;background:rgba(16,12,24,.94);box-shadow:0 32px 90px rgba(0,0,0,.36),0 0 60px rgba(146,55,223,.1)}
.panel h2{margin:0 0 1rem;font:.75rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-shadow:var(--glow-soft)}

label{display:block;margin-bottom:.5rem;font:.72rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
input[type="text"]{width:100%;padding:1rem 1.05rem;border:1px solid var(--line-bright);border-radius:3px;background:#0b0910;color:var(--text);font:1rem var(--mono);letter-spacing:.08em;text-shadow:var(--glow-soft)}
input[type="text"]:focus{outline:2px solid #fff;outline-offset:2px}
input::placeholder{color:var(--text);opacity:.6}

/* Visible to assistive technology only — never changes the rendered layout. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:1.1rem}
.turnstile{min-height:65px;margin-top:1rem}
/* Text stays white; the left rule carries the state, and the message itself says what happened. */
.status{margin-top:1rem;padding:.85rem 1rem;border:1px solid var(--line);border-left-width:3px;background:#0b0910;font-size:.88rem}
.status[data-kind="ok"]{border-color:var(--ok)}
.status[data-kind="warn"]{border-color:var(--warn)}
.status[data-kind="bad"]{border-color:var(--bad)}
/* The status boxes are aria-live regions (role="status"). A live region has to already be in
   the accessibility tree when its text arrives, so an empty one collapses to zero height
   instead of being removed with display:none — same rendering, but announcements still fire. */
.status:empty{margin:0;padding:0;border-width:0;background:none}
.code{padding:1.15rem;border:1px solid var(--line-bright);border-radius:3px;background:#0b0910;font:clamp(1rem,3vw,1.45rem) var(--mono);letter-spacing:.1em;word-break:break-all;user-select:all;text-shadow:var(--glow)}

dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:.45rem 1.25rem;margin:1.2rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line)}
dl.facts dt{font:.7rem var(--mono);letter-spacing:.07em;text-transform:uppercase}
dl.facts dd{margin:0;font:.82rem var(--mono);word-break:break-all}
.fineprint{font-size:.8rem}
p.fineprint{margin:1.2rem 0 0}
.steps{margin:0;padding-left:1.25rem}
.steps li{margin:.6rem 0;padding-left:.35rem}
.steps li::marker{font-family:var(--mono);font-weight:600}
.draft-banner{margin:1.5rem 0 0;padding:.9rem 1rem;border:1px solid var(--line);border-left:3px solid var(--warn);background:rgba(243,201,105,.06);font-size:.85rem}
.legal-copy h2{margin-top:2rem;font:1.15rem var(--sans);letter-spacing:-.01em;text-transform:none}
.legal-copy p,.legal-copy li{font-size:.92rem}
main a{text-decoration-color:rgba(255,255,255,.45);text-underline-offset:.22rem}

@media(max-width:680px){
  /* Text links that sit in an action row are real targets; give them a touch-sized box. */
  .row>a:not(.button-link){display:inline-flex;align-items:center;min-height:44px}
  main{padding-top:3.5rem}
  h1{font-size:clamp(2.4rem,12vw,4rem)}
  .row{flex-direction:column;align-items:stretch}
  .row button,.row .button-link{width:100%}
  dl.facts{grid-template-columns:1fr;gap:.15rem}
  dl.facts dd{margin-bottom:.65rem}
}