/* ==========================================================================
   NetShell — shared design system  ("The Vault", cinematic)
   One source of truth for every page. Dark-first, chrome metal, parallax depth.
   ========================================================================== */

/* ---- Fonts (self-hosted; no CDN, SRI-clean) ---- */
@font-face{font-family:'Geist';src:url('../fonts/geist-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:'Geist Mono';src:url('../fonts/geist-mono-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;font-style:normal}

/* ---- Tokens ---- */
:root{
  --bg:#070809;            /* near-black, faint blue-graphite */
  --bg-2:#0b0d10;
  --surface:#101317;        /* graphite card */
  --surface-2:#161a1f;
  --hairline:rgba(176,196,208,.10);
  --hairline-strong:rgba(176,196,208,.18);
  --ink:#F4F8FA;            /* primary text */
  --ink-2:#AEB9C2;          /* body */
  --ink-3:#7C8893;          /* muted */
  --accent:#00D4FF;         /* single sharp accent (fills, glow) */
  --accent-press:#00acd1;
  --accent-text:#3ddcff;    /* accent used AS text — AA-safe on dark */
  --good:#00E676; --bad:#FF4D4D;
  /* chrome ramp for the metal effect */
  --chrome-1:#ffffff; --chrome-2:#eef4f7; --chrome-3:#cdd9e0; --chrome-4:#ffffff; --chrome-5:#bcc9d1;
  --font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --maxw:1240px;
  --radius:18px; --radius-sm:12px; --radius-pill:999px;
  --nav-h:68px;
  --shadow:0 30px 80px rgba(0,0,0,.6);
  --glow:0 0 60px rgba(0,212,255,.18);
  --ease:cubic-bezier(.22,1,.36,1);
}
:root[data-theme="light"]{
  --bg:#F5F7F9; --bg-2:#eef1f4; --surface:#ffffff; --surface-2:#f1f4f7;
  --hairline:rgba(10,14,20,.10); --hairline-strong:rgba(10,14,20,.18);
  --ink:#0B1115; --ink-2:#3a444d; --ink-3:#5a6571;
  --accent:#0093b8; --accent-press:#007a9b; --accent-text:#00708c;
  --chrome-1:#5a6571; --chrome-2:#2a3138; --chrome-3:#7a8893; --chrome-4:#3a444d; --chrome-5:#1e242a;
  --shadow:0 24px 60px rgba(10,14,20,.12); --glow:0 0 50px rgba(0,147,184,.12);
}

/* ---- Reset / base ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{line-height:1.05;letter-spacing:-.03em;font-weight:800}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.mono{font-family:var(--mono)}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#000;padding:.6rem 1rem;border-radius:0 0 8px 0;z-index:200}
.skip:focus{left:0}
.container{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-text);font-weight:600}
/* Accent text helper — AA-safe in both themes (use instead of color:var(--accent) for small text) */
.accent-text{color:var(--accent-text)}

/* ---- The METAL effect (animated chrome + specular sweep) ---- */
.metal{
  position:relative;display:inline-block;
  background:linear-gradient(176deg,var(--chrome-1) 0%,var(--chrome-2) 16%,var(--chrome-3) 36%,var(--chrome-4) 50%,var(--chrome-5) 64%,var(--chrome-2) 84%,var(--chrome-1) 100%);
  background-size:100% 240%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.3)) drop-shadow(0 2px 4px rgba(0,0,0,.7)) drop-shadow(0 8px 26px rgba(0,0,0,.55));
  animation:metalShift 7s var(--ease) infinite;
}
.metal::after{ /* moving specular streak */
  content:attr(data-text);position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.85) 48%,transparent 58%);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  mix-blend-mode:screen;animation:metalSheen 5.5s var(--ease) infinite;
}
@keyframes metalShift{0%,100%{background-position:0 0}50%{background-position:0 100%}}
@keyframes metalSheen{0%{background-position:160% 0}60%,100%{background-position:-60% 0}}
@media (prefers-reduced-motion:reduce){.metal,.metal::after{animation:none}}

/* ---- Nav (glass) ---- */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:100;display:flex;align-items:center;
  background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.scrolled{border-bottom-color:var(--hairline);background:color-mix(in srgb,var(--bg) 88%,transparent)}
.nav .container{display:flex;align-items:center;gap:1.5rem;width:100%}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800;letter-spacing:-.02em;font-size:1.05rem}
.brand svg{width:24px;height:24px}
.nav-links{display:flex;gap:1.4rem;margin-left:auto;align-items:center}
.nav-links a{font-size:.9rem;color:var(--ink-2);font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:var(--radius-pill);
  background:var(--accent);color:#001318;font-weight:700;font-size:.85rem;transition:transform .2s,box-shadow .2s}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(0,212,255,.35)}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--hairline);
  background:transparent;color:var(--ink-2);cursor:pointer;transition:.2s}
.icon-btn:hover{color:var(--ink);border-color:var(--hairline-strong)}
.hamburger{display:none}
.mobile-menu{position:fixed;inset:var(--nav-h) 0 auto 0;z-index:99;background:color-mix(in srgb,var(--bg) 97%,transparent);
  backdrop-filter:blur(20px);border-bottom:1px solid var(--hairline);transform:translateY(-120%);transition:transform .35s var(--ease);padding:1rem 1.5rem 1.5rem}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{display:block;padding:.85rem 0;border-bottom:1px solid var(--hairline);color:var(--ink-2);font-weight:500}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;font-size:.95rem;
  padding:.85rem 1.6rem;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s,background .2s}
.btn-primary{background:var(--accent);color:#001318}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(0,212,255,.4)}
.btn-ghost{background:transparent;border-color:var(--hairline-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-lg{padding:1rem 2.2rem;font-size:1.02rem}

/* ---- Section scaffold + atmosphere ---- */
.section{position:relative;padding:clamp(4.5rem,10vw,8rem) 0}
.section-head{max-width:720px;margin:0 auto clamp(2.5rem,5vw,4rem);text-align:center}
.section-head h1,.section-head h2{font-size:clamp(2rem,5vw,3.4rem);margin:.6rem 0 1rem}
.section-head p{color:var(--ink-2);font-size:clamp(1rem,2vw,1.15rem)}
.atmo{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none;z-index:0}
.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- Parallax stage (flying screenshots) ---- */
.stage{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.stage-bg{position:absolute;inset:0;z-index:0}
.stage-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;filter:saturate(.7) contrast(1.05)}
.stage-scrim{position:absolute;inset:0;background:
  radial-gradient(54% 46% at 50% 50%,var(--bg) 0%,color-mix(in srgb,var(--bg) 86%,transparent) 38%,transparent 72%),
  linear-gradient(180deg,color-mix(in srgb,var(--bg) 60%,transparent) 0%,var(--bg) 96%)}
.stage h1{text-shadow:0 2px 30px var(--bg)}
.stage > .container > p{text-shadow:0 1px 16px var(--bg)}
.float-layer{position:absolute;inset:0;z-index:1;pointer-events:none}
.float-screen{position:absolute;width:clamp(140px,16vw,260px);aspect-ratio:1320/2868;border-radius:22px;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow),0 0 70px rgba(255,140,40,.22);
  will-change:transform;transition:transform .12s linear;background:#1a0f06}
.float-screen img{width:100%;height:100%;object-fit:cover}
.float-screen::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(150deg,rgba(255,255,255,.14),transparent 45%);pointer-events:none}
/* Motion is GSAP-driven (assemble on load, disperse on scroll, pointer tilt) — no CSS drift loop. */

/* ---- Cards / feature scenes ---- */
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:1.75rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);border-color:var(--hairline-strong);box-shadow:var(--shadow)}
.card .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);margin-bottom:1rem}
.scene{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.scene.flip>.scene-media{order:-1}
.scene-media{position:relative;min-height:420px}
.kpi{font-family:var(--mono);font-weight:800;font-size:clamp(2.4rem,6vw,4rem);letter-spacing:-.04em;color:var(--ink)}

/* ---- Utility classes (replace repeated inline styles) ---- */
.pt0{padding-top:0}
.cta-row{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.card-h{font-size:1.1rem;margin-bottom:.4rem}
.card-d{color:var(--ink-2);font-size:.92rem;line-height:1.6}

/* ---- Feature pages ---- */
.feat-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:880px;margin:0 auto;
  border:1px solid var(--hairline);border-radius:var(--radius);background:var(--surface);padding:1.75rem 1rem}
.feat-stat{text-align:center;padding:.4rem .6rem}
.feat-stat + .feat-stat{border-left:1px solid var(--hairline)}
.feat-stat-n{display:block;font-weight:800;font-size:clamp(1.15rem,2.4vw,1.6rem);letter-spacing:-.02em;line-height:1.15}
.feat-stat-l{display:block;color:var(--ink-3);font-size:.82rem;margin-top:.45rem;line-height:1.35}
.feat-checks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.85rem 1.6rem}
.feat-checks li{display:flex;align-items:flex-start;gap:.6rem;color:var(--ink-2);font-size:.95rem;line-height:1.5}
.feat-checks li svg{flex:none;color:var(--accent);margin-top:.15rem}
/* in-flow portrait phone for showcase rows (NOT the absolute .float-screen) */
.scene-phone{position:relative;width:min(260px,70%);margin:0 auto;aspect-ratio:1000/2173;
  border-radius:30px;overflow:hidden;border:1px solid var(--hairline-strong);box-shadow:var(--shadow),var(--glow)}
.scene-phone picture,.scene-phone img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:720px){
  .feat-stats{grid-template-columns:1fr;gap:0}
  .feat-stat + .feat-stat{border-left:0;border-top:1px solid var(--hairline)}
  .feat-stat{padding:1rem .6rem}
  .feat-checks{grid-template-columns:1fr}
}

/* ---- Reveal ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none}}

/* ---- Footer ---- */
.footer{border-top:1px solid var(--hairline);padding:3.5rem 0 2.5rem;background:var(--bg-2)}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2.5rem}
.footer a:not(.btn){color:var(--ink-3);font-size:.9rem;display:block;padding:.3rem 0;transition:color .2s}
.footer a:not(.btn):hover{color:var(--ink)}
.footer .label{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.6rem}
.footer-bottom{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--hairline);color:var(--ink-3);font-size:.82rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

/* ---- Responsive ---- */
@media (max-width:900px){
  .scene{grid-template-columns:1fr}.scene.flip>.scene-media{order:0}
  .scene-media{min-height:340px}
}
@media (max-width:760px){
  .nav-links{display:none}.hamburger{display:grid}
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.75rem}
  .float-screen{width:clamp(96px,30vw,150px)}
}
@media (max-width:460px){.footer-grid{grid-template-columns:1fr}}

/* ---- Docs layout (sidebar + article) ---- */
.docs{display:grid;grid-template-columns:264px 1fr;gap:3.5rem;max-width:1560px;margin:0 auto;padding:calc(var(--nav-h) + 2.25rem) 2.5rem 5rem}
.docs-side{position:sticky;top:calc(var(--nav-h) + 1rem);align-self:start;max-height:calc(100vh - var(--nav-h) - 2rem);overflow:auto;padding-right:.5rem}
.docs-side .group{margin-bottom:1.3rem}
.docs-side .group > .label{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 .6rem .35rem;display:block}
.docs-side a{display:flex;align-items:center;gap:.6rem;padding:.34rem .6rem;border-radius:8px;color:var(--ink-2);font-size:.9rem;transition:.15s}
.docs-side a:hover{color:var(--ink);background:var(--surface)}
.docs-side a[aria-current="page"]{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);font-weight:600}
.docs-side a svg{flex:none;color:var(--ink-3);transition:color .15s}
.docs-side a:hover svg{color:var(--ink-2)}
.docs-side a[aria-current="page"] svg{color:var(--accent)}
.docs-side a > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* docs search (client-side, honeypot-guarded) */
.docs-search{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;
  padding:.5rem .7rem;border:1px solid var(--hairline);border-radius:10px;background:var(--surface)}
.docs-search:focus-within{border-color:color-mix(in srgb,var(--accent) 50%,var(--hairline))}
.docs-search > svg{color:var(--ink-3);flex:none}
.docs-search-input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:.9rem;outline:none;-webkit-appearance:none;appearance:none;border-radius:0}
.docs-search-input::placeholder{color:var(--ink-3)}
/* kill iOS Safari's native search pill + magnifier/cancel chrome */
.docs-search-input::-webkit-search-decoration,
.docs-search-input::-webkit-search-cancel-button,
.docs-search-input::-webkit-search-results-button,
.docs-search-input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}
.docs-search-kbd{flex:none;font-family:var(--mono);font-size:.7rem;color:var(--ink-3);border:1px solid var(--hairline-strong);border-radius:5px;padding:.02rem .4rem;line-height:1.5}
.docs-search-results{margin:-.5rem 0 1rem;border:1px solid var(--hairline);border-radius:10px;background:var(--bg);overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.28)}
.docs-search-hit{display:flex;flex-direction:column;gap:.12rem;padding:.5rem .75rem;border-bottom:1px solid var(--hairline);transition:.12s}
.docs-search-hit:last-child{border-bottom:0}
.docs-search-hit:hover{background:var(--surface)}
.docs-search-hit .hit-t{color:var(--ink);font-size:.9rem;font-weight:600}
.docs-search-hit .hit-s{color:var(--ink-3);font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase}
.docs-search-none{padding:.7rem .75rem;color:var(--ink-3);font-size:.85rem}
/* sidebar accordion — PURE CSS (checkbox toggle, no JS). Collapsed on mobile,
   always-open on desktop. */
.docs-side-cb{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.docs-side-toggle{display:none;width:100%;cursor:pointer;align-items:center;justify-content:space-between;
  gap:.6rem;font:inherit;font-weight:600;font-size:.95rem;color:var(--ink);
  background:transparent;border:0;padding:.2rem .1rem;text-align:left;-webkit-tap-highlight-color:transparent}
.docs-side-toggle .chev{color:var(--ink-3);transition:transform .2s;flex:none}
.docs-side-cb:checked ~ .docs-side-toggle .chev{transform:rotate(180deg)}
.docs-side-cb:focus-visible ~ .docs-side-toggle{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.docs-main{min-width:0;max-width:880px}
.docs-main .crumb{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--ink-3);margin-bottom:.75rem}
.docs-main h1{font-size:clamp(1.9rem,4vw,2.7rem);margin-bottom:1rem}
.docs-main .lede{font-size:1.12rem;color:var(--ink-2);margin-bottom:2rem}
.docs-main h2{font-size:1.35rem;margin:2.25rem 0 .8rem;letter-spacing:-.02em;scroll-margin-top:calc(var(--nav-h) + 1rem)}
.docs-main h3{font-size:1.08rem;margin:1.5rem 0 .5rem}
.docs-main p,.docs-main li{color:var(--ink-2);margin-bottom:.7rem;line-height:1.7}
.docs-main ol,.docs-main ul{padding-left:1.3rem;margin-bottom:1.1rem}
.docs-main strong{color:var(--ink)}
.docs-main code{font-family:var(--mono);background:var(--surface);padding:.15em .42em;border-radius:6px;font-size:.88em;border:1px solid var(--hairline)}
.docs-main pre{background:var(--surface);border:1px solid var(--hairline);border-radius:12px;padding:1rem 1.15rem;overflow:auto;margin-bottom:1.3rem}
.docs-main pre code{background:none;border:0;padding:0}
.callout{border:1px solid var(--hairline);border-left:3px solid var(--accent);background:var(--surface);border-radius:10px;padding:.9rem 1.2rem;margin:1.3rem 0;font-size:.94rem}
.callout strong{color:var(--accent)}
.docs-next{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--hairline);flex-wrap:wrap}
.docs-next a{display:block;padding:.9rem 1.2rem;border:1px solid var(--hairline);border-radius:12px;flex:1;min-width:200px;transition:.2s}
.docs-next a:hover{border-color:var(--accent)}
.docs-next .label{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.docs-next strong{color:var(--ink);font-size:1rem}

/* ---- "On this page" right rail (Termius-style) ---- */
.docs-toc{display:none}
@media (min-width:1160px){
  .docs.has-toc{grid-template-columns:280px minmax(0,1fr) 244px}
  .docs-toc{display:block;position:sticky;top:calc(var(--nav-h) + 1.6rem);align-self:start;
    max-height:calc(100vh - var(--nav-h) - 3rem);overflow:auto}
}
.docs-toc-head{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .7rem;padding-left:.85rem}
.docs-toc-nav{display:flex;flex-direction:column;gap:.05rem;border-left:1px solid var(--hairline)}
.docs-toc-nav a{display:block;padding:.32rem .85rem;margin-left:-1px;border-left:2px solid transparent;
  color:var(--ink-3);font-size:.84rem;line-height:1.4;transition:color .15s,border-color .15s}
.docs-toc-nav a:hover{color:var(--ink)}
.docs-toc-nav a.is-active{color:var(--accent-text);border-left-color:var(--accent);font-weight:600}
.docs-helpful{margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--hairline)}
.docs-helpful-q{display:block;font-size:.8rem;color:var(--ink-2);margin-bottom:.6rem}
.docs-helpful-btns{display:flex;gap:.5rem}
.docs-helpful-btns button{flex:1;padding:.4rem 0;border:1px solid var(--hairline-strong);border-radius:8px;
  background:transparent;color:var(--ink-2);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:.15s}
.docs-helpful-btns button:hover{border-color:var(--accent);color:var(--accent-text)}
.docs-helpful-thanks{display:block;font-size:.82rem;color:var(--accent-text);margin-top:.2rem}
.docs-helpful-thanks[hidden]{display:none}
/* Below the TOC breakpoint: keep "Was this helpful?" — drop it full-width under the
   article (the On-this-page anchor list stays desktop-only). */
@media (max-width:1159px){
  .docs.has-toc .docs-toc{display:block;grid-column:1 / -1;position:static;max-height:none;overflow:visible}
  .docs-toc-head,.docs-toc-nav{display:none}
  .docs-toc .docs-helpful{max-width:760px;margin-top:2.5rem;padding-top:1.5rem}
  .docs-helpful-btns{max-width:340px}
}

@media (max-width:900px){
  .docs{grid-template-columns:1fr;gap:1.25rem;padding:calc(var(--nav-h) + 1.4rem) 1.1rem 4rem}
  .docs.has-toc{grid-template-columns:1fr}
  .docs-side{position:static;max-height:none;overflow:visible;border:1px solid var(--hairline);border-radius:12px;padding:.9rem 1rem}
  .docs-side>.docs-side-toggle{display:flex}
  .docs-side>.docs-side-body{display:none;margin-top:.9rem}
  .docs-side-cb:checked ~ .docs-side-body{display:block}
  .docs-search{position:static}
  .docs-search-kbd{display:none}
  /* iOS Safari zooms the page when a focused field is < 16px — pin to 16px */
  .docs-search-input{font-size:16px}
  .docs-main{max-width:none}
}


/* ---- Fire footer: oversized logo + wordmark backdrop, glow rising up ---- */
.footer-hero{position:relative;overflow:hidden;padding-top:5.5rem;padding-bottom:0;isolation:isolate}
.footer-hero .footer-glow{position:absolute;left:50%;bottom:-46%;transform:translateX(-50%);
  width:min(1100px,140%);aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 34%,transparent) 0%,color-mix(in srgb,var(--accent) 10%,transparent) 38%,transparent 64%);
  filter:blur(50px);opacity:.55;animation:footerPulse 8s var(--ease) infinite}
@keyframes footerPulse{0%,100%{opacity:.42;transform:translateX(-50%) scale(1)}50%{opacity:.62;transform:translateX(-50%) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.footer-hero .footer-glow{animation:none}}
.footer-mark{position:absolute;right:-3%;top:42%;transform:translateY(-50%) rotate(-8deg);
  width:min(440px,46%);opacity:.06;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle,#000 38%,transparent 72%);mask-image:radial-gradient(circle,#000 38%,transparent 72%)}
.footer-wordmark{position:absolute;left:0;right:0;bottom:-1.5vw;text-align:center;line-height:.74;
  pointer-events:none;z-index:0;opacity:.42;user-select:none}
.footer-wordmark .metal{font-size:clamp(4rem,23vw,20rem);font-weight:800;letter-spacing:-.05em}
.footer-hero .container{padding-bottom:clamp(7rem,16vw,13rem)}  /* clear space above the wordmark */
.footer-hero .footer-bottom{border-top-color:color-mix(in srgb,var(--hairline) 60%,transparent)}
@media (max-width:760px){
  .footer-mark{display:none}
  .footer-wordmark{bottom:-.5vw;opacity:.35}
  .footer-hero .container{padding-bottom:clamp(5rem,22vw,8rem)}
}

/* ---- Fire footer: lead block typography ---- */
.footer-lead{max-width:640px;margin:0 auto clamp(3rem,6vw,4.5rem);text-align:center}
.footer-head{font-size:clamp(2rem,5.5vw,3.6rem);line-height:1.04;letter-spacing:-.03em;margin:.7rem 0 1.1rem}
.footer-sub{color:var(--ink-2);font-size:clamp(1rem,2vw,1.18rem);line-height:1.7;margin:0 auto 1.8rem;max-width:46ch}
.footer-hero .footer a:not(.btn){color:var(--ink-2)}          /* more readable footer links */
.footer-hero .footer a:not(.btn):hover{color:var(--ink)}
.footer-hero .label{color:var(--ink-3)}
.footer-wordmark .metal{opacity:.9}                  /* wordmark already dimmed via .footer-wordmark opacity */

/* Light mode: the white specular streak is for chrome-on-dark; it washes out the
   dark metal text on a light background, so disable it and keep the clean gradient. */
:root[data-theme="light"] .metal::after{display:none}
:root[data-theme="light"] .metal{filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}
:root[data-theme="light"] .stage h1{text-shadow:0 1px 2px rgba(255,255,255,.7)}

/* ---- Email capture form ---- */
.subscribe{max-width:440px;margin:1.75rem auto 0}
.subscribe-row{display:flex;gap:.6rem;flex-wrap:wrap}
.subscribe input[type=email]{flex:1;min-width:200px;padding:.85rem 1.1rem;border-radius:var(--radius-pill);
  border:1px solid var(--hairline-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:.95rem;transition:border-color .2s}
.subscribe input[type=email]::placeholder{color:var(--ink-3)}
.subscribe input[type=email]:focus{outline:none;border-color:var(--accent)}
.subscribe .btn{white-space:nowrap}
.subscribe-msg{margin-top:.6rem;font-size:.85rem}
.subscribe-sub{margin-top:.6rem;font-size:.78rem;color:var(--ink-3)}

/* ============================================================
   MOBILE PASS — hard overflow lockdown + readable hero + calm motion
   (centralized: fixes every page that uses the design system)
   ============================================================ */
html, body { overflow-x: clip; max-width: 100%; }
*, *::before, *::after { min-width: 0; }                 /* stop flex/grid children forcing overflow */
.stage, .float-layer { overflow: clip; max-width: 100vw; }
img, video, table, pre { max-width: 100%; }

@media (max-width: 820px){
  /* HERO: the flying screens cramp + overflow on small screens. Keep the
     cinematic video + scrim, drop the floating phones below tablet so the
     copy is clean and centered. (They shine on desktop; mobile stays sharp.) */
  .float-layer { display: none !important; }

  .stage { min-height: auto; padding: calc(var(--nav-h) + 2.5rem) 0 3.5rem; }
  .stage-scrim { background: linear-gradient(180deg,
      color-mix(in srgb,var(--bg) 55%,transparent) 0%, var(--bg) 80%); }
  /* inline font-size on these elements needs !important to be overridden */
  .stage h1 { font-size: clamp(1.9rem, 8.5vw, 2.7rem) !important; max-width: 100% !important; overflow-wrap: anywhere; }
  .stage .eyebrow { font-size: .62rem !important; letter-spacing: .12em; }
  .stage > .container > p { font-size: 1rem !important; max-width: 100% !important; }
  .stage .mono { font-size: .64rem !important; letter-spacing: .03em; line-height: 1.6; }
  .stage .container > div[style*="flex"] { flex-direction: column; align-items: stretch; }
  .stage .btn, .footer-lead .btn { width: 100% !important; justify-content: center; }
  .stage .btn-lg, .footer-lead .btn-lg { padding: .95rem 1.4rem; }
}

@media (max-width: 600px){
  .section { padding: clamp(3rem,12vw,4.5rem) 0; }
  .section-head h2, .footer-head { font-size: clamp(1.7rem,8vw,2.4rem); }
  /* comparison tables: shrink to fit, never force horizontal page scroll */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { font-size: .78rem; }
  table th, table td { padding: .7rem .6rem !important; }
  /* explore / philosophy / step card grids → single column */
  #explore > .container > div,
  #philosophy .reveal[style*="grid"],
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer-wordmark .metal { font-size: clamp(3rem, 20vw, 6rem); }
  .scene-media .float-screen { width: min(220px, 72%) !important; }
}

/* Hard hero-overflow containment on mobile (the container was rendering wider
   than the viewport; force it + wrap every hero text node). */
@media (max-width:820px){
  .container { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
  .stage .container { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .stage h1, .stage p, .stage .eyebrow, .stage .mono, .stage span {
    white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word; max-width: 100% !important;
  }
  .stage .container > div { max-width: 100% !important; }
  /* size overrides live HERE (trailing block reliably wins over the inline styles) */
  .stage h1 { font-size: clamp(1.85rem, 8vw, 2.6rem) !important; line-height: 1.08 !important; }
  .stage .eyebrow { font-size: .6rem !important; letter-spacing: .1em !important; }
  .stage > .container > p { font-size: 1rem !important; }
  .stage .mono { font-size: .62rem !important; letter-spacing: .02em !important; }
  .stage .container > div[style*="flex"] { flex-direction: column !important; align-items: stretch !important; }
  .stage .btn { width: 100% !important; }
}

/* ---- Consent banner (privacy-first, bottom) ---- */
.consent{position:fixed;left:1rem;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:300;max-width:760px;margin:0 auto;
  background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--hairline-strong);border-radius:var(--radius);box-shadow:var(--shadow),var(--glow);padding:1.05rem 1.2rem;
  animation:consent-in .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes consent-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.consent{animation:none}}
.consent[hidden]{display:none}
.consent-inner{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap}
.consent-copy{flex:1;min-width:240px}
.consent-copy>strong{display:block;margin-bottom:.2rem;color:var(--ink)}
.consent-copy p strong{color:var(--ink)}
.consent-copy p{color:var(--ink-2);font-size:.86rem;line-height:1.55;margin:0}
.consent-copy a{color:var(--accent-text)}
.consent-actions{display:flex;gap:.6rem;flex-shrink:0}
.consent-actions .btn{padding:.6rem 1.25rem;font-size:.9rem}
/* explicit high-contrast consent buttons in BOTH themes */
.consent-actions .btn-ghost{background:color-mix(in srgb,var(--ink) 9%,transparent);
  border-color:var(--ink-2);color:var(--ink);font-weight:700}
.consent-actions .btn-ghost:hover{background:color-mix(in srgb,var(--ink) 16%,transparent);
  border-color:var(--ink);color:var(--ink)}
.consent-actions .btn-primary{color:#001318}
/* Mobile: a proper full-width bottom-sheet popup, clear of the iOS home indicator */
@media (max-width:600px){
  .consent{left:0;right:0;bottom:0;max-width:none;border-radius:20px 20px 0 0;
    border-left:0;border-right:0;border-bottom:0;
    padding:1.1rem 1.15rem calc(1.1rem + env(safe-area-inset-bottom));
    animation:consent-up .4s cubic-bezier(.2,.8,.2,1) both}
  .consent-inner{gap:1rem}
  .consent-actions{width:100%}
  .consent-actions .btn{flex:1;padding:.8rem 1rem;font-size:.95rem}
}
@keyframes consent-up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}

/* ---- Branded illustrations — rendered as a premium dark "app artwork" card in BOTH themes ---- */
.illus{margin:1.9rem 0;
  background:radial-gradient(130% 110% at 50% -10%,#10151c 0,#0a0d12 58%,#06080b 100%);
  border:1px solid rgba(150,170,185,.14);border-radius:18px;padding:1.1rem 1.1rem .95rem;
  box-shadow:0 26px 64px -30px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.05)}
.illus svg{width:100%;height:auto;display:block}
.illus figcaption{margin-top:.85rem;text-align:center;color:#8b97a1;font-size:.82rem;
  font-family:var(--mono);letter-spacing:.02em;line-height:1.45;max-width:54ch;margin-inline:auto}
/* real screenshots, framed */
.shot-frame{position:relative;border-radius:14px;overflow:hidden;background:#05070a;
  border:1px solid rgba(150,170,185,.18);
  box-shadow:0 30px 72px -34px rgba(0,0,0,.82), inset 0 1px 0 rgba(255,255,255,.06)}
.shot-frame img{display:block;width:100%;height:auto}
.shot-glint{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 15%)}