/* ============================================================
THEME TOKENS — the four cockpit palettes from the app.
Switching data-theme on re-skins the whole page.
============================================================ */
:root{
--bg:#F2EDE1; --panel:#FFFFFF; --border:#DED4BC; --text:#1C1B19;
--muted:#6B6459; --accent:#B8862E; --green:#3F7D4E; --red:#B3261E;
--amber:#C77B12; --grid:rgba(28,27,25,.055);
--shadow:0 1px 2px rgba(28,27,25,.05),0 8px 24px -12px rgba(28,27,25,.14);
--bw:1px;
}
[data-theme="night"]{--bg:#07090A;--panel:#120404;--border:#3A1010;--text:#FF4433;--muted:#9E3A30;--accent:#FF5A46;--green:#E2452F;--red:#FF2A1A;--amber:#FF6A2A;--grid:rgba(255,68,51,.06);--shadow:none}
[data-theme="sunlight"]{--bg:#000;--panel:#111;--border:#4A4A4A;--text:#FFF;--muted:#D8D8D8;--accent:#FFD400;--green:#38E24A;--red:#FF3B30;--amber:#FFD400;--grid:rgba(255,255,255,.07);--shadow:none}
[data-theme="glare"]{--bg:#FFF;--panel:#FFF;--border:#000;--text:#000;--muted:#1A1A1A;--accent:#0033CC;--green:#006622;--red:#C00;--amber:#B35A00;--grid:rgba(0,0,0,.07);--shadow:none;--bw:2px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;
font-size:17px;line-height:1.6;overflow-x:hidden;
transition:background-color .45s ease,color .45s ease}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
background-size:64px 64px}
h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif;font-weight:700;line-height:1.06;letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:inherit}
.wrap{width:min(1180px,92vw);margin-inline:auto;position:relative;z-index:1}
.eyebrow{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px}
/* ---------------- HEADER ---------------- */
header{position:sticky;top:0;z-index:50;border-bottom:var(--bw) solid var(--border);
background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px)}
.nav{display:flex;align-items:center;gap:16px;padding:14px 0}
.brand{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:21px;
letter-spacing:.16em;text-decoration:none;display:flex;align-items:center;gap:9px}
/* App icon at the wordmark's own size — 1.15em tracks the font, so it
scales with .brand wherever it's used (header, doc pages). */
.brand-logo{width:1.15em;height:1.15em;border-radius:24%;flex-shrink:0;display:block}
/* Theme key (phones only — see the 560px block). On desktop
.theme-control is just a plain wrapper around the real themebar. */
.theme-control{display:flex;align-items:center;margin-left:auto}
.theme-toggle{display:none}
.themebar{display:flex;gap:2px;padding:3px;
border:var(--bw) solid var(--border);border-radius:999px;background:var(--panel)}
.themebar button{display:flex;align-items:center;gap:6px;font-family:"JetBrains Mono",monospace;
font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
padding:7px 12px 7px 10px;border:0;border-radius:999px;white-space:nowrap;
background:transparent;color:var(--muted);cursor:pointer;transition:background .25s,color .25s}
.themebar button:hover{color:var(--text)}
.themebar button[aria-pressed="true"]{background:var(--accent);color:var(--bg)}
[data-theme="night"] .themebar button[aria-pressed="true"],
[data-theme="sunlight"] .themebar button[aria-pressed="true"]{color:#000}
/* Icons are injected by JS (one map, shared by every button and the
mobile toggle) so the glyph and the label can never drift apart. */
.themebar button .t-icon{display:flex;flex-shrink:0}
.themebar button .t-icon svg{width:12px;height:12px}
/* ---------------- BUTTONS ---------------- */
.btn{font-size:15px;font-weight:600;padding:14px 24px;border-radius:10px;cursor:pointer;
text-decoration:none;display:inline-flex;align-items:center;gap:9px;font-family:Inter,sans-serif;
border:var(--bw) solid transparent;transition:transform .15s,opacity .2s,border-color .2s,color .2s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--bg)}
[data-theme="night"] .btn-primary,[data-theme="sunlight"] .btn-primary{color:#000}
.btn-primary:hover{opacity:.88}
.btn-ghost{border-color:var(--border);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
/* Pricing */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:820px}
.plan{background:var(--panel);border:var(--bw) solid var(--border);border-radius:16px;padding:26px}
.plan.pro{border-color:var(--accent);border-width:1.5px}
.plan h3{margin:0 0 4px;font-family:"Space Grotesk",sans-serif;font-size:18px}
.plan .price{font-family:"Space Grotesk",sans-serif;font-size:40px;font-weight:700;margin:8px 0 2px}
.plan.pro .price{color:var(--accent)}
.plan .per{color:var(--muted);font-size:14px}
.plan ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.plan li{display:flex;gap:10px;font-size:15px;align-items:flex-start}
.plan li svg{width:16px;height:16px;flex-shrink:0;color:var(--green);margin-top:3px}
.plan-note{margin-top:24px;color:var(--muted);font-size:15px;max-width:70ch}
/* Waitlist legal line + footer links */
.wl-legal{margin:8px 0 0;font-size:11.5px;color:var(--muted);text-align:center}
.wl-legal-left{text-align:left;margin-top:6px}
.wl-legal a,.foot-links a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.foot-links{display:flex;gap:16px;margin-top:10px;font-size:13px;color:var(--muted)}
.foot-links a:hover{color:var(--accent)}
/* Document pages (privacy, support) */
.doc{max-width:720px;margin:0 auto;padding:40px 20px 72px}
.doc h1{font-family:"Space Grotesk",sans-serif;font-size:clamp(30px,5vw,42px);margin:10px 0 6px}
.doc .updated{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted)}
.doc h2{font-family:"Space Grotesk",sans-serif;font-size:21px;margin:36px 0 8px}
.doc p,.doc li{font-size:16px;line-height:1.65;color:var(--text)}
.doc ul{padding-left:20px}
.doc a{color:var(--accent)}
.doc .lead{font-size:18px;color:var(--muted)}
.doc .callout{border:var(--bw) solid var(--border);background:var(--panel);border-radius:12px;padding:16px 18px;margin:22px 0}
.doc-top{display:flex;justify-content:space-between;align-items:center;padding:20px}
/* Waitlist form */
.waitlist{max-width:480px;margin:28px auto 0}
/* Hero variant — left-aligned to match the hero's own text block,
not centered like the #get section's copy of this same form.
flex-basis so it fills the hero's .cta-row instead of shrinking to
its content width (which squeezed the input down to a sliver). */
.waitlist-inline{flex:1 1 440px;max-width:460px;margin:0}
.wl-success-inline{flex:1 1 440px;max-width:460px;margin:0}
/* Input and button are ONE control: same height, same radius, the
button tucked inside the field's frame. A single fixed height on
both (instead of padding + line-height maths that differ between
an and a