/* Shared chrome for the inner pages (pricing, about): tokens, header with the
   site nav, buttons, footer. The home page carries its own copy of these rules
   inline so the first paint needs no second request. Keep the two in step. */
:root {
  --bg:#181C22; --surf:#232A33; --line:#313A45;
  --tx:#F2F5F7; --tx2:#9AA6B2; --tx3:#76828E;
  --volt:#B8FF3C; --volt-press:#9FE01F; --onv:#0A0C0F; --ink:#0A0C0F;
  --bar:'Barlow Semi Condensed', system-ui, sans-serif;
  --ui:'Inter', system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body { background:var(--bg); color:var(--tx); font-family:var(--ui); line-height:1.6; -webkit-font-smoothing:antialiased; }
.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
.narrow { max-width:720px; margin:0 auto; padding:0 24px; }
a { color:inherit; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

header { border-bottom:1px solid var(--surf); }
header .wrap { display:flex; justify-content:space-between; align-items:center; gap:16px; height:64px; }
.wordmark { font-family:var(--bar); font-weight:700; font-size:17px; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; white-space:nowrap; }
.nav { display:flex; align-items:center; gap:22px; }
.nav a { color:var(--tx2); font-size:14px; font-weight:500; text-decoration:none; white-space:nowrap; }
.nav a:hover, .nav a[aria-current] { color:var(--tx); }
.nav .legal { color:var(--tx3); }
.hdr-cta { display:inline-flex; align-items:center; height:38px; padding:0 16px; margin-left:8px; background:var(--volt); color:var(--onv); border-radius:999px; font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; }
.hdr-cta:hover { background:var(--volt-press); }
@media (max-width:820px){ .nav .legal, .hdr-cta { display:none; } .nav { gap:16px; } }
@media (max-width:400px){ .wordmark { font-size:15px; } .nav { gap:12px; } .nav a { font-size:13px; } }

.eyebrow { font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--tx3); font-weight:600; }
h1 { font-family:var(--bar); font-weight:800; text-transform:uppercase; letter-spacing:-0.01em; line-height:0.98; font-size:clamp(40px,6vw,68px); margin-top:14px; }
h2 { font-family:var(--bar); font-weight:700; text-transform:uppercase; letter-spacing:0.02em; font-size:24px; }
.lede { color:var(--tx2); font-size:clamp(16px,2vw,19px); margin-top:18px; max-width:52ch; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; padding:0 22px; border-radius:11px; font-size:16px; font-weight:600; text-decoration:none; cursor:pointer; font-family:var(--ui); white-space:nowrap; transition:background .15s,border-color .15s,transform .05s; }
.btn:active { transform:scale(0.985); }
.btn-volt { background:var(--volt); color:var(--onv); border:none; }
.btn-volt:hover { background:var(--volt-press); }
.btn-ghost { background:transparent; color:var(--tx); border:1px solid var(--line); }
.btn-ghost:hover { border-color:var(--tx3); }
.fine { color:var(--tx3); font-size:13px; line-height:1.5; }
.fine a { color:var(--tx3); }

footer { margin-top:64px; border-top:1px solid var(--surf); }
footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; padding:22px 24px; }
footer span, footer a { color:var(--tx3); font-size:13px; }