/* Shared layout for every page, on top of theme.css (HB's ALGO black and gold).
   Dark only. Readable text sits on opaque panels; only large headings sit on the dust. */
body{font-size:16px;line-height:1.65}
.stack{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
header.app .stack{flex:1 1 auto}
.amb{margin-left:auto}
a.wordmark{color:var(--fg)}
/* Links in running text are underlined, so they never rely on colour alone. */
main a:not([class]){text-decoration:underline}
.mini{min-height:32px}

main{max-width:820px;margin:0 auto;padding-block:28px 40px}
.block{margin-top:22px}
.panel.block>.body{padding:16px 18px 18px}
.panel-head{font-size:26px;line-height:1.2}
.body p{margin:0 0 .7em}
.body p:last-child{margin-bottom:0}

/* theme's faint label/hint grey is under 4.5:1, so use the dim grey for anything a visitor reads */
.lbl,.metric-lbl,.risk-hint{color:var(--fg-dim)}
.muted{color:var(--fg-dim)}
.small{font-size:14px}

.hero{padding:30px 24px 28px;margin-top:0}
.hero h1{font-family:var(--display);font-size:clamp(34px,7vw,56px);line-height:1.05;margin:0 0 .4em}
.lead{font-size:18px;color:var(--fg);margin-bottom:1.2em}
.cta{display:inline-block;padding:13px 22px;font-size:12px;text-decoration:none}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}

.steps{padding-left:1.3em}
.steps li{margin:.5em 0;padding-left:.2em}
.steps li::marker{color:var(--gold);font-family:var(--mono)}

.sec-title{font-family:var(--display);font-size:clamp(30px,5vw,40px);line-height:1.1;margin:0 0 14px;color:var(--fg)}
.levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.lv{padding:15px 16px}
.lv h3{font-family:var(--display);font-size:22px;line-height:1.15;margin:.25em 0 .35em}
.lv p{margin:0;color:var(--fg-dim);font-size:15px}
.lvn{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}

.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;margin-bottom:16px}
.tier{background:var(--surface-2);padding:14px 16px}
.tier h3{font-family:var(--display);font-size:22px;line-height:1.15;margin:0 0 .35em}
.tier-price{font-family:var(--mono);color:var(--gold-bright);font-size:15px;margin:0 0 .5em}
.tier ul{padding-left:1.1em}
.tier li{margin:.3em 0}

label{display:block;font-weight:600;margin:.4em 0 .4em}
.bt-input{font-size:16px;padding:11px 12px;border-color:var(--fg-dim)}
.bt-input:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-color:var(--gold)}
.ts{margin:14px 0;min-height:65px}
form .btn-green{padding:13px 22px;font-size:12px}
.msg{font-size:15px;min-height:1.5em;margin:.7em 0}
.msg.ok{color:var(--up);background:var(--surface-2);border:1px solid var(--up);padding:9px 12px;border-radius:2px}
.msg.err{color:var(--down);background:var(--surface-2);border:1px solid var(--down);padding:9px 12px;border-radius:2px}

footer{max-width:780px;width:calc(100% - 40px);margin:0 auto 32px;padding:16px 20px;background:var(--surface);border:1px solid var(--line);border-radius:2px;color:var(--fg-dim);font-size:14px}
footer p{margin:0 0 .5em}
footer p:last-child{margin-bottom:0}
footer b{color:var(--fg)}
footer a{color:var(--gold);text-decoration:underline}
.footer-links{display:flex;flex-wrap:wrap;gap:2px 18px;margin:0 0 .5em}
.footer-links a{display:inline-block;padding:8px 0}

.legal h2{font-family:var(--display);font-size:20px;line-height:1.2;margin:1.4em 0 .4em}
.legal ul{padding-left:1.2em;margin:0 0 .7em}
.legal li{margin:.4em 0}
.legal .updated{color:var(--fg-dim);font-size:14px}

@media (max-width:640px){
  header.app .site-nav{order:3;flex-basis:100%;gap:2px}
  header.app .site-nav .nav-chip{padding:6px 8px}
  .hero{padding:22px 16px}
  .lead{font-size:16px}
}
@media (max-width:420px){
  header.app{gap:10px}
  .wordmark{font-size:20px}
}
/* At 360px the 300px Turnstile widget must fit inside the form panel. */
@media (max-width:420px){
  .gutter{padding-left:12px;padding-right:12px}
  .panel.block>.body{padding:14px 12px}
  footer{width:calc(100% - 24px)}
  .tier{padding:12px}
  .ts{overflow-x:auto}
}
#how,#levels,#free{scroll-margin-top:64px}