/* ═══════════════════════════════════════════════════════════════
   VOWER — launch site
   Design tokens mirror lib/ui/design_system.dart in the Flutter app.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:Poppins;src:url(../fonts/Poppins-Light.ttf) format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/Poppins-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/Poppins-Medium.ttf) format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/Poppins-SemiBold.ttf) format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/Poppins-Bold.ttf) format('truetype');font-weight:700;font-display:swap}

:root{
  --bg:#050505; --surface:#111111; --card:#141414; --line:#242424;
  /* txt3 lifted from #5e5e63 to clear WCAG AA on small text over #050505 */
  --txt:#ffffff; --txt2:#9a9aa0; --txt3:#78787e;
  --accent:#5fe01f; --accent-strong:#4fcb22; --accent-ink:#050505;
  --accent-soft:rgba(95,224,31,.09); --accent-glow:rgba(95,224,31,.34);
  --danger:#ff5a5f; --warn:#ffb020;
  --r-card:20px; --r-btn:18px; --r-chip:12px; --r-sheet:28px;
  --gut:clamp(20px,5vw,80px);
  /* Content stops growing past 1440px. Past that the fixed-width pieces — the
     phone mockups, the capped text columns — can't keep up, and the row fills
     with holes instead of content. No-op at or below a 1440px window. */
  --pad-x:max(var(--gut),(100% - 1440px) / 2);
  --ease:cubic-bezier(.22,1,.36,1);
  --t:.42s var(--ease);
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono","Roboto Mono",Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  /* overflow-x:clip contains decorative bleed without creating a scroll
     container, so nothing can drag the page sideways */
  overflow-x:clip;
  margin:0;background:var(--bg);color:var(--txt);
  font:400 16px/1.6 Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow-x:hidden;letter-spacing:-.01em;
  transition:background .6s var(--ease);
}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.06}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:var(--accent-ink)}

.skip-link{position:fixed;top:-100px;left:16px;z-index:999;background:var(--accent);
  color:var(--accent-ink);padding:10px 16px;border-radius:12px;font-weight:600}
.skip-link:focus{top:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.grad{background:linear-gradient(100deg,var(--accent),#fff 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hl{color:var(--accent)}
/* technical section index — "// 02 ——" auto-numbered, no markup needed */
.section{counter-increment:sec}
.section--unnumbered{counter-increment:none}
.eyebrow{display:flex;align-items:center;gap:8px;
  font:700 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px}
.section--unnumbered .eyebrow::before{display:none}
.section .eyebrow::before{content:counter(sec,decimal-leading-zero);
  padding:4px 7px;border:1px solid var(--accent);border-radius:5px;
  font-size:9.5px;letter-spacing:.1em;opacity:.85}
.section .eyebrow::after{content:"";flex:1;max-width:80px;height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);opacity:.55}
.access .eyebrow,.c-hero .eyebrow{justify-content:center}
.c-hero .eyebrow{justify-content:flex-start}

/* ── ambient ─────────────────────────────────────────────────── */
#grid-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.55;pointer-events:none}
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;filter:blur(90px);opacity:.5}
.aurora i{position:absolute;display:block;border-radius:50%;
  background:radial-gradient(circle,var(--accent-glow),transparent 68%);
  transition:background .6s var(--ease)}
.aurora i:nth-child(1){width:52vw;height:52vw;top:-18vw;left:-12vw;animation:drift 24s var(--ease) infinite alternate}
.aurora i:nth-child(2){width:40vw;height:40vw;top:38vh;right:-14vw;opacity:.6;animation:drift 31s var(--ease) infinite alternate-reverse}
.aurora i:nth-child(3){width:34vw;height:34vw;bottom:-10vw;left:26vw;opacity:.4;animation:drift 27s var(--ease) infinite alternate}
@keyframes drift{to{transform:translate3d(9vw,7vh,0) scale(1.22)}}
.scanlines{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.028) 0 1px,transparent 1px 4px)}

/* Structure for the quiet stretches. Where a section gap left nothing but bare
   aurora glow, two gutter rails and a faint node field give the eye something
   to sit on — the same trick the hero floor uses, at a fraction of the
   contrast, so it never competes with content. */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,transparent,rgba(255,255,255,.055) 14%,rgba(255,255,255,.055) 86%,transparent)
      var(--pad-x) 0/1px 100% no-repeat,
    linear-gradient(180deg,transparent,rgba(255,255,255,.055) 14%,rgba(255,255,255,.055) 86%,transparent)
      calc(100% - var(--pad-x) - 1px) 0/1px 100% no-repeat,
    radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1.4px) 0 0/40px 40px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 50%,#000,transparent 74%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 50%,#000,transparent 74%)}

main,.nav,.foot,.ticker{position:relative;z-index:2}

/* film grain — kills the flat-black look, reads as sensor noise */
/* inset:0 - a negative inset made this 240px wider than the viewport, which is
   a real horizontal-scroll risk. The drift now comes from background-position. */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift .6s steps(1) infinite}
@keyframes grainshift{
  0%{background-position:0 0}20%{background-position:-24px 10px}
  40%{background-position:14px -18px}60%{background-position:-10px 22px}
  80%{background-position:20px 6px}100%{background-position:0 0}}

/* ── HUD ─────────────────────────────────────────────────────── */
.hud{position:fixed;inset:14px;z-index:600;pointer-events:none}
.hud__c{position:absolute;width:22px;height:22px;opacity:.5;
  border-color:var(--accent);border-style:solid;border-width:0;transition:border-color .6s}
.hud__c--tl{top:0;left:0;border-top-width:1px;border-left-width:1px}
.hud__c--tr{top:0;right:0;border-top-width:1px;border-right-width:1px}
.hud__c--bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.hud__c--br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
/* edge tick marks */
.hud::before,.hud::after{content:"";position:absolute;left:50%;width:80px;height:1px;
  margin-left:-40px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.4}
.hud::before{top:0}.hud::after{bottom:0}

.hud-bar{position:fixed;left:0;right:0;bottom:0;z-index:610;pointer-events:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:7px calc(var(--pad-x) + 8px);
  font:500 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--txt3);
  background:linear-gradient(180deg,transparent,rgba(5,5,5,.86));
  border-top:1px solid rgba(255,255,255,.05)}
.hud-bar b{color:var(--accent);font-weight:500}
.hud-bar__l{display:flex;align-items:center;gap:8px}
.hud-bar .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);animation:ping 2.2s ease-out infinite}
.hud-bar__r{font-variant-numeric:tabular-nums}

.scroll-rail{position:fixed;top:0;left:0;right:0;height:2px;z-index:800;background:rgba(255,255,255,.05)}
.scroll-rail i{display:block;height:100%;width:0;background:var(--accent);
  box-shadow:0 0 14px var(--accent-glow)}

/* ── boot ────────────────────────────────────────────────────── */
.boot{position:fixed;inset:0;z-index:1000;background:var(--bg);display:grid;place-items:center;
  transition:opacity .7s var(--ease),visibility .7s}
.boot.is-done{opacity:0;visibility:hidden}
.boot__inner{display:grid;justify-items:center;gap:26px;width:min(280px,70vw)}
/* height:auto is required — the intrinsic height attribute would otherwise
   win and stretch the mark vertically */
.boot__mark{width:min(210px,52vw);height:auto;animation:bootpulse 1.5s var(--ease) infinite}
@keyframes bootpulse{0%,100%{opacity:.35;transform:scale(.94)}50%{opacity:1;transform:scale(1)}}
.boot__bar{width:100%;height:2px;background:rgba(255,255,255,.09);overflow:hidden;border-radius:2px}
.boot__bar i{display:block;height:100%;width:0;background:var(--accent);
  box-shadow:0 0 12px var(--accent-glow);animation:bootbar 1.9s var(--ease) forwards}
@keyframes bootbar{to{width:100%}}
.boot__log{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt3)}

/* ── nav ─────────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:700;display:flex;align-items:center;gap:24px;
  padding:16px var(--pad-x);transition:background .4s,backdrop-filter .4s,border-color .4s,padding .4s;
  border-bottom:1px solid transparent}
.nav.is-stuck{background:rgba(5,5,5,.72);backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);border-bottom-color:var(--line);padding-block:11px}
.nav__brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.nav__wordmark{height:15px;width:auto}
.nav__links{display:flex;gap:28px;font-size:13.5px;color:var(--txt2);font-weight:500}
.nav__links a{position:relative;padding:4px 0;transition:color .25s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--accent);transition:width .3s var(--ease)}
.nav__links a:hover{color:var(--txt)}
.nav__links a:hover::after{width:100%}
.nav__right{display:flex;align-items:center;gap:14px}

/* only navigation on small screens, so it needs to actually read as a button */
.nav__burger{display:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.22);
  border-radius:12px;background:rgba(255,255,255,.09);flex:none;
  flex-direction:column;justify-content:center;align-items:center;gap:5px}
.nav__burger i{width:17px;height:2px;background:var(--txt);border-radius:2px;
  transition:transform .3s var(--ease),opacity .3s}
.nav__burger[aria-expanded=true] i:nth-child(1){transform:translateY(3.2px) rotate(45deg)}
.nav__burger[aria-expanded=true] i:nth-child(2){transform:translateY(-3.2px) rotate(-45deg)}

/* ── buttons ─────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 24px;border-radius:var(--r-btn);background:var(--accent);color:var(--accent-ink);
  font-size:14px;font-weight:600;position:relative;overflow:hidden;
  transition:background .3s,transform .3s var(--ease),box-shadow .3s}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.btn:hover{background:var(--accent-strong);box-shadow:0 12px 36px -10px var(--accent-glow)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:scale(.97)}
.btn--sm{padding:9px 17px;font-size:12.5px;border-radius:13px}
.btn--lg{padding:16px 30px;font-size:15px}
/* secondary CTA sits well below the primary in visual weight */
.btn--quiet{background:transparent;color:var(--txt2);font-weight:500;padding-inline:14px}
.btn--quiet:hover{background:transparent;color:var(--accent);box-shadow:none}
.btn--ghost{background:transparent;color:var(--txt);border:1px solid var(--line)}
.btn--ghost:hover{background:rgba(255,255,255,.05);border-color:var(--accent);color:var(--accent);box-shadow:none}

.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 11px;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);
  font-size:11.5px;font-weight:500;color:var(--txt2);letter-spacing:.02em}
/* launch announcement - the one thing a first-time visitor must not miss */
.launch{display:inline-flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:11px 20px 11px 16px;border-radius:999px;
  border:1px solid var(--accent);background:var(--accent-soft);
  box-shadow:0 0 34px -12px var(--accent-glow);
  font:600 14px/1 Poppins,sans-serif;letter-spacing:-.01em;color:var(--txt)}
.launch b{font-weight:600;color:var(--accent);text-transform:uppercase;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em}
.launch i{width:1px;height:15px;background:rgba(255,255,255,.18)}
.launch>span:last-child{color:var(--txt2);font-size:13px;font-weight:500}
@media (max-width:520px){
  .launch{padding:10px 16px 10px 13px;gap:9px}
  .launch b{font-size:11px}
  .launch>span:last-child{font-size:12px}
}

.pill__dot{width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 var(--accent-glow);animation:ping 2.2s ease-out infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* text mid-scramble: dim + monospaced so the width doesn't jump around */
.scrambling{font-family:var(--mono);letter-spacing:-.06em}
.scrambling .glyph{color:var(--accent);opacity:.55}
/* chromatic settle once a heading resolves */
@keyframes chroma{
  0%{text-shadow:-3px 0 rgba(255,0,90,.55),3px 0 rgba(0,220,255,.55)}
  100%{text-shadow:none}}
.chroma{animation:chroma .55s var(--ease)}

/* ── reveal ──────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}
.reveal[data-delay="4"]{transition-delay:.36s}

/* ── hero ────────────────────────────────────────────────────── */
/* The device column is deliberately narrower than the copy column and the phone
   is anchored to its start: centring a 300px mockup inside a ~590px column left
   ~145px of dead air between the two halves. */
.hero{position:relative;overflow-x:clip;display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr);gap:clamp(24px,2.4vw,34px);
  min-height:min(88svh,860px);
  padding:clamp(96px,12vh,150px) var(--pad-x) clamp(64px,9vh,110px)}

/* ── hero film ───────────────────────────────────────────────────
   Full-bleed behind the hero, under every other hero layer (glow at
   z-1, copy/device at z-2). The scrim is two gradients rather than a
   flat wash: a vertical one so the headline side stays deep, and a
   left-weighted one so text contrast never depends on which frame of
   traffic happens to be on screen. */
.hero__film{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:var(--bg)}
.hero__film video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center center;
  filter:saturate(1.2) contrast(1.05)}
/* The scrim is heavy ONLY over the text column and light everywhere else.
   An even wash reads as "safe" and isn't: at .72 across the frame the footage
   landed 3/255 above the page background — rendering perfectly, invisible.
   The headline sits in the left ~40%, so that's the only band that needs
   darkening, and even there AAA has room to spare. */
.hero__film::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(5,5,5,.97) 0%,rgba(5,5,5,.93) 30%,
      rgba(5,5,5,.62) 52%,rgba(5,5,5,.2) 78%,rgba(5,5,5,.08) 100%),
    linear-gradient(180deg,rgba(5,5,5,.6),transparent 22%,transparent 68%,var(--bg))}
/* the hero's own layers must sit above the film */
.hero__glow{z-index:1}
.floor{z-index:1}
.hero__copy,.hero__device{position:relative;z-index:2}
/* the seam: fade the film out into the ticker instead of cutting it dead */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;
  pointer-events:none;background:linear-gradient(180deg,transparent,var(--bg))}
/* receding grid horizon */
.floor{position:absolute;left:0;right:0;bottom:0;height:42vh;overflow:hidden;pointer-events:none;
  perspective:200px;perspective-origin:50% 0}
.floor i{position:absolute;left:-60%;right:-60%;top:0;bottom:-60%;
  transform:rotateX(76deg);transform-origin:50% 0;
  background-image:
    linear-gradient(90deg,var(--accent) 1px,transparent 1px),
    linear-gradient(0deg,var(--accent) 1px,transparent 1px);
  background-size:74px 74px;
  opacity:.16;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%,transparent 92%);
  mask-image:linear-gradient(180deg,transparent,#000 55%,transparent 92%);
  animation:floorRun 3.4s linear infinite}
@keyframes floorRun{to{background-position:0 74px,0 74px}}
/* horizon glow line */
.floor::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5;
  box-shadow:0 0 22px var(--accent-glow)}

/* A wide ellipse rather than a circle, so one glow spans copy → phone and reads
   as a single lit stage instead of two lit corners with a dark seam. */
.hero__glow{position:absolute;left:calc(var(--pad-x) - 60px);top:42%;width:min(1020px,82vw);height:520px;
  border-radius:50%;background:radial-gradient(ellipse at 34% 50%,var(--accent-glow),transparent 66%);
  filter:blur(80px);opacity:.42;pointer-events:none;transition:background .6s}
.hero__copy{position:relative;max-width:760px}
@media (min-width:769px){.hero__copy{max-width:min(58%,760px)}}
/* text sits over moving footage — a soft shadow guarantees local separation
   on the frame where a headlight crosses the copy column */
.hero__copy .hero__title,.hero__copy .hero__sub{text-shadow:0 2px 22px rgba(0,0,0,.85)}
/* 4.2vw only ever bit on desktop — every phone landed on the 33px floor and left
   ~40% of the line empty. The vw term is steep enough to scale the headline with
   a phone's width while still shrinking safely on a 320px screen; 56px cap keeps
   desktop exactly where it was. */
.hero__title{font-size:clamp(34px,5.2vw,62px);font-weight:600;margin:15px 0 17px;letter-spacing:-.04em;line-height:1.06}
.hero__line{display:block;overflow:hidden}
.hero__line>span{display:block;transform:translateY(105%);
  transition:transform 1s var(--ease)}
.reveal.is-in .hero__line>span,.hero__title.is-in .hero__line>span{transform:none}
.hero__title.is-in .hero__line:nth-child(2)>span{transition-delay:.1s}
.hero__title.is-in .hero__line:nth-child(3)>span{transition-delay:.2s}
.hero__sub{font-size:clamp(13px,.95vw,14.5px);color:var(--txt2);max-width:440px;line-height:1.6}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 24px}

.countdown{border-top:1px solid var(--line);padding-top:22px;max-width:430px}
.countdown__label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt3);margin-bottom:14px}
.countdown__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cd{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;
  padding:12px 6px;text-align:center}
.cd b{display:block;font:600 26px/1 var(--mono);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;text-shadow:0 0 18px var(--accent-glow)}
.cd span{font:500 9px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--txt3)}
.countdown__label{font-family:var(--mono)}

.hero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  width:24px;height:38px;border:1px solid var(--line);border-radius:14px}
.hero__scroll i{position:absolute;left:50%;top:8px;width:2px;height:6px;margin-left:-1px;
  background:var(--accent);border-radius:2px;animation:sdot 1.9s var(--ease) infinite}
@keyframes sdot{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(15px)}}

/* ── device ──────────────────────────────────────────────────── */
.hero__device{display:grid;justify-items:center;gap:14px;perspective:1400px}
@media (min-width:1081px){
  /* left-anchored + slightly larger closes the gap to the copy from both sides */
  .hero__device{justify-items:start}
  .hero .device{--dw:min(324px,38vw,calc(72svh * 9 / 19.3))}
}
/* Width is driven by BOTH the viewport width and height so the mockup never
   overflows a short phone screen — the aspect ratio then sets the height. */
.device{--dw:min(300px,78vw,calc(74svh * 9 / 19.3));
  position:relative;width:var(--dw);aspect-ratio:9/19.3;
  border-radius:calc(var(--dw) * .147);
  background:linear-gradient(160deg,#2a2a2a,#0c0c0c 42%);padding:calc(var(--dw) * .03);
  box-shadow:0 50px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.07),
             0 0 70px -20px var(--accent-glow);
  transform-style:preserve-3d;transition:box-shadow .5s,transform .18s var(--ease)}
.device--sm{--dw:min(258px,78vw,calc(64svh * 9 / 19.3))}
.device__glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
  background:linear-gradient(150deg,rgba(255,255,255,.11),transparent 34%,transparent 68%,rgba(255,255,255,.05))}
.device__screen{position:relative;height:100%;border-radius:calc(var(--dw) * .12);background:var(--bg);
  overflow:hidden;display:flex;flex-direction:column;
  /* everything inside the phone scales from this */
  font-size:calc(var(--dw) * 16 / 300)}
.device__screen::before{content:"";position:absolute;top:.56em;left:50%;transform:translateX(-50%);
  width:5em;height:1.25em;border-radius:.75em;background:#000;z-index:6}
.device__hint{font-size:11px;color:var(--txt3);letter-spacing:.1em;text-transform:uppercase;text-align:center}

.ph-status{display:flex;justify-content:space-between;align-items:center;
  padding:.75em 1.25em .38em;font-size:.66em;font-weight:600;color:var(--txt2)}
.ph-status__r{display:flex;gap:.28em;align-items:flex-end}
.ph-status__r i{width:.28em;background:var(--txt2);border-radius:1px}
.ph-status__r i:nth-child(1){height:.46em}.ph-status__r i:nth-child(2){height:.74em}.ph-status__r i:nth-child(3){height:1em}

.ph-screen{position:absolute;inset:0;top:2em;bottom:3.75em;padding:.63em .88em;
  display:flex;flex-direction:column;gap:.56em;opacity:0;visibility:hidden;
  transform:translateY(14px) scale(.985);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s}
.ph-screen.is-active{opacity:1;visibility:visible;transform:none}
/* these two screens are short — let the hero element absorb the slack so the
   title stays pinned to the top and the rows to the bottom */
.ph-screen[data-screen=wallet] .ph-wallet,
.ph-screen[data-screen=session] .ph-gauge{margin-block:auto}
.ph-map{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.ph-search{position:relative;display:flex;align-items:center;gap:.5em;padding:.63em .81em;
  border-radius:.88em;background:rgba(17,17,17,.86);backdrop-filter:blur(12px);
  border:1px solid var(--line);font-size:.69em;color:var(--txt3)}
.ph-search svg{width:1.2em;height:1.2em;fill:none;stroke:var(--txt2);stroke-width:2;stroke-linecap:round}
.ph-chips{position:relative;display:flex;gap:.38em;overflow:hidden}
.ph-chips span{padding:.31em .63em;border-radius:.56em;background:rgba(17,17,17,.86);
  border:1px solid var(--line);font-size:.59em;color:var(--txt2);white-space:nowrap}
.ph-chips span.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.ph-card{position:relative;margin-top:auto;background:rgba(20,20,20,.94);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:1.13em;padding:.75em}
.ph-card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:.5em;margin-bottom:.63em}
.ph-card__top b{display:block;font-size:.75em;font-weight:600}
.ph-card__top small{font-size:.59em;color:var(--txt3)}
.ph-badge{padding:.19em .5em;border-radius:.44em;background:var(--accent-soft);color:var(--accent);
  font-size:.6em;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.ph-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.38em;text-align:center}
.ph-metrics div{background:rgba(255,255,255,.035);border-radius:.63em;padding:.44em .19em}
.ph-metrics b{display:block;font-size:.6em;font-weight:600;color:var(--accent);letter-spacing:-.02em}
.ph-metrics small{font-size:.58em;color:var(--txt3)}
.ph-metrics--3 b{font-size:.81em}
.ph-rate{display:inline-flex;align-items:center;gap:.15em;justify-content:center}
.ph-rate svg{width:.75em;height:.75em;fill:var(--accent)}

.ph-title{font-size:1em;font-weight:600;letter-spacing:-.04em;margin-bottom:.25em}
.ph-msg{max-width:84%;padding:.56em .75em;border-radius:.88em;font-size:.66em;line-height:1.55;
  background:var(--card);border:1px solid var(--line);color:var(--txt2)}
.ph-msg b{color:var(--accent);font-weight:600}
.ph-msg--me{margin-left:auto;background:var(--accent);color:var(--accent-ink);
  border-color:transparent;font-weight:500}
.ph-prompts{margin-top:auto;display:flex;flex-wrap:wrap;gap:.31em}
.ph-prompts span{padding:.31em .56em;border-radius:.56em;border:1px solid var(--line);
  font-size:.56em;color:var(--txt2)}

/* AI screen: the actual trip, not a chat transcript. Everything is sized in
   em so it scales with --dw like the rest of the phone UI. */
.ph-route{background:var(--card);border:1px solid var(--line);border-radius:.75em;
  padding:.6em .7em;margin-bottom:.44em}
.ph-route__r{display:flex;align-items:center;gap:.5em;padding:.16em 0}
.ph-route__r+.ph-route__r{border-top:1px solid var(--line);margin-top:.16em;padding-top:.34em}
.ph-route__d{flex:none;width:.5em;height:.5em;border-radius:50%;background:var(--txt3)}
.ph-route__d--b{background:var(--accent);box-shadow:0 0 .5em var(--accent-glow)}
.ph-route__r span{display:grid;min-width:0}
.ph-route__r small{font-size:.5em;letter-spacing:.12em;text-transform:uppercase;color:var(--txt3)}
.ph-route__r b{font-size:.62em;font-weight:600;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-route__m{display:flex;gap:.44em;margin-top:.44em;padding-top:.38em;
  border-top:1px solid var(--line)}
.ph-route__m span{font:600 .5em/1 var(--mono);color:var(--accent);letter-spacing:.04em}

.ph-amen__h{margin:.5em 0 .3em;font-size:.5em;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt3)}
.ph-amen{display:grid;grid-template-columns:repeat(4,1fr);gap:.3em}
.ph-amen span{display:grid;justify-items:center;gap:.2em;padding:.4em .16em;
  border-radius:.5em;background:var(--card);border:1px solid var(--line);
  font-size:.46em;color:var(--txt2);text-align:center}
.ph-amen svg{width:1.5em;height:1.5em;fill:none;stroke:var(--accent);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

.ph-gauge{position:relative;display:grid;place-items:center;margin:.38em auto 0;width:8.25em;height:8.25em}
.ph-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.ph-gauge circle{fill:none;stroke-width:7;stroke-linecap:round}
.ph-gauge__t{stroke:rgba(255,255,255,.07)}
.ph-gauge__f{stroke:var(--accent);stroke-dasharray:327;stroke-dashoffset:124;
  filter:drop-shadow(0 0 7px var(--accent-glow));transition:stroke-dashoffset .5s var(--ease)}
.ph-gauge__c{position:absolute;display:flex;align-items:baseline;gap:2px}
.ph-gauge__c b{font-size:2em;font-weight:600;letter-spacing:-.05em}
.ph-gauge__c span{font-size:.81em;color:var(--txt3)}
.ph-flow{display:flex;justify-content:center;gap:.44em;margin:.63em 0}
.ph-flow i{width:1em;height:.19em;border-radius:2px;background:var(--accent);opacity:.2;
  animation:flow 1.5s linear infinite}
.ph-flow i:nth-child(2){animation-delay:.18s}.ph-flow i:nth-child(3){animation-delay:.36s}
.ph-flow i:nth-child(4){animation-delay:.54s}.ph-flow i:nth-child(5){animation-delay:.72s}
@keyframes flow{0%,100%{opacity:.16}45%{opacity:1;box-shadow:0 0 9px var(--accent-glow)}}

/* utilities / more screen */
.ph-group{font-size:.58em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt3);margin-top:.25em}
.ph-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.38em}
.ph-tiles span{display:grid;justify-items:center;gap:.31em;padding:.63em .19em;
  border-radius:.63em;background:rgba(255,255,255,.04);border:1px solid var(--line);
  font-size:.58em;color:var(--txt2);text-align:center}
.ph-tiles svg{width:2.2em;height:2.2em;fill:none;stroke:var(--accent);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ph-screen[data-screen=more] .ph-row{margin-top:auto}
.ph-screen[data-screen=more] .ph-row + .ph-row{margin-top:0}
.ph-screen[data-screen=more] .ph-row b{color:var(--txt3);font-weight:400}

.ph-wallet{display:grid;place-items:center;margin:.5em 0}
.ph-wallet__ring{width:8.75em;height:8.75em;border-radius:50%;display:grid;place-content:center;
  justify-items:center;gap:.19em;border:1px solid var(--line);
  background:radial-gradient(circle at 50% 45%,var(--accent-soft),transparent 66%);
  box-shadow:inset 0 0 30px var(--accent-soft)}
.ph-wallet__ring b{font-size:1.63em;font-weight:600;letter-spacing:-.045em}
.ph-wallet__ring small{font-size:.53em;color:var(--txt3)}
.ph-packs{display:flex;gap:.31em}
.ph-packs span{flex:1;text-align:center;padding:.44em .19em;border-radius:.63em;border:1px solid var(--line);
  font-size:.56em;color:var(--txt2)}
.ph-packs span.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.ph-row{display:flex;justify-content:space-between;align-items:center;padding:.56em .69em;
  border-radius:.69em;background:rgba(255,255,255,.035);font-size:.63em;color:var(--txt2)}
.ph-row b{font-weight:600;color:var(--txt)}
.ph-row b.pos{color:var(--accent)}

.ph-nav{position:absolute;left:0;right:0;bottom:0;height:3.75em;display:flex;align-items:center;
  justify-content:space-around;padding:0 .38em .5em;background:rgba(17,17,17,.94);
  backdrop-filter:blur(16px);border-top:1px solid var(--line);z-index:4}
.ph-nav button{display:grid;justify-items:center;gap:.19em;padding:.44em .63em;border-radius:.69em;
  color:var(--txt3);touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:color .25s,background .25s}
.ph-nav button:active{background:rgba(255,255,255,.07)}
.ph-nav button svg{width:1.06em;height:1.06em;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ph-nav button i{font-size:.58em;font-style:normal;letter-spacing:.02em}
.ph-nav button.on{color:var(--accent)}
.ph-nav__mid{background:var(--accent);color:var(--accent-ink)!important;width:2.38em;height:2.38em;
  border-radius:50%;place-content:center;box-shadow:0 6px 18px -5px var(--accent-glow)}
.ph-nav__mid svg{fill:currentColor;stroke:none;width:1.19em;height:1.19em}

/* ── ticker ──────────────────────────────────────────────────── */
.ticker{overflow:hidden;border-block:1px solid var(--line);padding:11px 0;
  background:rgba(255,255,255,.015);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker__track{display:flex;align-items:center;gap:26px;width:max-content;
  animation:tick 34s linear infinite;white-space:nowrap}
.ticker__track span{font-size:clamp(12px,1.1vw,15px);font-weight:600;letter-spacing:-.01em;color:var(--txt3)}
.ticker__track b{color:var(--accent);font-size:9px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ── charging animation ──────────────────────────────────────── */
.charge-scene{padding:6px var(--pad-x) 18px;display:grid;justify-items:center;gap:10px}
.charge-scene svg{width:100%;max-width:660px;height:auto;overflow:visible}
.charge-scene .cs-line,.charge-scene .cs-car,.charge-scene .cs-glass,
.charge-scene .cs-wheel circle,.charge-scene .cs-cable{
  fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.cs-car{stroke-width:2.4}
.cs-glass{stroke-width:1.6;opacity:.5}
.cs-ground{stroke:var(--line);stroke-width:2}
.cs-shadow{fill:var(--accent);opacity:.07}
.cs-hub{fill:none;stroke:var(--accent);opacity:.45;stroke-width:2}
.cs-screen{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.4}
.cs-bolt{fill:var(--accent)}
.cs-led{fill:var(--accent);animation:csLed 1.6s steps(1) infinite}
.cs-cable{opacity:.22}
.cs-flow{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:2 16;filter:drop-shadow(0 0 5px var(--accent-glow));
  animation:csFlow 1.1s linear infinite}
.cs-port{fill:var(--bg);stroke:var(--accent);stroke-width:2}
.cs-port-glow{fill:none;stroke:var(--accent);stroke-width:2;transform-origin:486px 160px;
  animation:csPing 1.8s var(--ease) infinite}
.cs-batt-fill{fill:var(--accent);transform-box:fill-box;transform-origin:left center;
  animation:csCharge 6s var(--ease) infinite}
.cs-sparks circle{fill:var(--accent);opacity:0;animation:csSpark 2.4s var(--ease) infinite}
.cs-sparks circle:nth-child(2){animation-delay:.5s}
.cs-sparks circle:nth-child(3){animation-delay:1s}

@keyframes csFlow{to{stroke-dashoffset:-18}}
@keyframes csLed{0%,49%{opacity:1}50%,100%{opacity:.15}}
@keyframes csPing{0%{transform:scale(1);opacity:.9}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
@keyframes csCharge{0%{transform:scaleX(.06)}70%,100%{transform:scaleX(1)}}
@keyframes csSpark{0%{opacity:0;transform:translateY(0)}
  25%{opacity:.9}60%{opacity:0;transform:translateY(-22px)}100%{opacity:0}}

.charge-scene__cap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  font:500 11px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--txt3);
  text-align:center}
.charge-scene__cap b{color:var(--accent)}
.charge-scene__cap a{color:var(--txt);border-bottom:1px solid var(--accent);padding-bottom:2px}
.charge-scene__cap a:hover{color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  .cs-flow,.cs-led,.cs-port-glow,.cs-batt-fill,.cs-sparks circle{animation:none}
  .cs-batt-fill{transform:scaleX(.75)}
}

/* ── trust strip ─────────────────────────────────────────────── */
.trust{padding:24px var(--pad-x) 22px;text-align:center;border-bottom:1px solid var(--line)}
.trust__head{font:700 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px}
.trust__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:8px 10px}
.trust__list li{padding:5px 12px;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.02);font-size:11.5px;font-weight:500;color:var(--txt2);
  transition:border-color .3s,color .3s}
.trust__list li:hover{border-color:rgba(255,255,255,.18);color:var(--txt)}
.trust__note{margin:13px auto 0;max-width:560px;font-size:10.5px;line-height:1.55;color:var(--txt3)}

/* ── stats ───────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-bottom:1px solid var(--line)}
.stat{position:relative;background:var(--bg);padding:20px 14px;text-align:center}
.stat b{display:block;font:600 clamp(20px,2vw,28px)/1 var(--mono);letter-spacing:-.02em;
  color:var(--accent);font-variant-numeric:tabular-nums;text-shadow:0 0 20px var(--accent-glow)}
.stat span{display:block;margin-top:9px;font:500 9.5px/1.5 var(--mono);color:var(--txt3);
  letter-spacing:.12em;text-transform:uppercase}
.stat::before{content:"";position:absolute;top:12px;left:50%;width:22px;height:1px;
  margin-left:-11px;background:var(--accent);opacity:.3}

/* ── sections ────────────────────────────────────────────────── */
/* Varied rhythm beats uniform rhythm: identical spacing everywhere reads as
   repetitive and makes the page feel longer than it is. Three tiers. */
/* The spread between tiers matters more than any single value: 24 / 45 / 70 is
   a 1 : 1.9 : 2.9 ratio, so the page reads as compact-medium-large beats rather
   than one repeated gap. Content-heavy tiers took the cut; --large kept its
   height so the hero-adjacent moments still land. */
.section{position:relative;padding:clamp(32px,3.1vw,45px) var(--pad-x)}
.section--compact{padding-block:clamp(20px,2vw,28px)}
.section--large{padding-block:clamp(48px,4.9vw,70px)}
/* ...and one more beat for the closing CTA, which needs the least room of all */
.section--tight{padding-block:clamp(18px,1.7vw,24px)}
/* light beam sweeping the seam between sections */
.section::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--accent) 70%,transparent);
  opacity:.16;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
  animation:beam 7s var(--ease) infinite}
@keyframes beam{0%,100%{opacity:.08;transform:scaleX(.72)}50%{opacity:.28;transform:scaleX(1)}}
.section--alt{background:linear-gradient(180deg,transparent,rgba(255,255,255,.018),transparent)}
/* The headline-to-content gap follows the same tier, so a compact section is
   compact all the way through instead of only at its edges. */
/* Wider measures on desktop: at 620/540 the headings and ledes wrapped to three
   lines and pushed every section taller while two-thirds of the row sat empty.
   Trading vertical for horizontal is the point. */
.section__head{max-width:min(720px,64ch);margin-bottom:22px}
.section--compact .section__head{margin-bottom:14px}
.section--large .section__head{margin-bottom:26px}
.section__head h2{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.028em;line-height:1.15}
.lede{margin-top:11px;font-size:clamp(14.5px,.9vw,14px);color:var(--txt2);line-height:1.62;max-width:min(620px,72ch)}
/* Tried setting the headline and lede side by side to save head height — it read
   as a detached caption floating off to the right, so the head stays stacked and
   the height comes out of the margins instead. */
.lede em{color:var(--txt);font-style:normal}

/* ── cards ───────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}
/* auto-fit gave 4 columns for 6 cards on a wide desktop — a full row plus an
   orphan pair with ~620px of dead space beside it. Pinning 3 columns fills the
   width, balances the block and takes a row's worth of height out of the text. */
@media (min-width:1120px){ .grid{grid-template-columns:repeat(3,1fr);gap:16px} }
.card{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:24px 22px 22px;overflow:hidden;
  transition:border-color .4s,transform .18s var(--ease),background .4s}
.card::before{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--accent-soft),transparent 62%);
  transition:opacity .4s}
.card:hover{border-color:rgba(255,255,255,.16)}
.card:hover::before{opacity:1}
/* HUD corner brackets that light up on hover + a scan sweep */
.card::after{content:"";position:absolute;inset:9px;pointer-events:none;opacity:0;
  transition:opacity .4s var(--ease);
  background:
    linear-gradient(var(--accent),var(--accent)) 0 0/1px 16px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 0 0/16px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 100% 0/1px 16px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 100% 0/16px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 0 100%/1px 16px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 0 100%/16px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 100% 100%/1px 16px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 100% 100%/16px 1px no-repeat}
.card:hover::after{opacity:.65}
.card__scan{position:absolute;left:0;right:0;height:70px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,var(--accent-soft),transparent);
  transition:opacity .3s}
.card:hover .card__scan{opacity:1;animation:scan 1.5s var(--ease)}
@keyframes scan{from{top:-70px}to{top:100%}}
.card__icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:var(--accent-soft);border:1px solid rgba(255,255,255,.06);margin-bottom:12px}
.card__icon svg{width:16px;height:16px;fill:none;stroke:var(--accent);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:15.5px;margin-bottom:9px;letter-spacing:-.02em}
.card p{font-size:12.5px;color:var(--txt2);line-height:1.65}
.card p em{color:var(--txt);font-style:normal}
.card__tag{position:absolute;top:18px;right:18px;padding:3px 8px;border-radius:7px;
  font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--accent-soft);color:var(--accent)}
.card__tag--soon{background:rgba(255,176,32,.1);color:var(--warn)}

/* ── with / without comparison ───────────────────────────────── */
.vs{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch}
.vs__col{background:var(--card);border:1px solid var(--line);padding:24px 22px}
.vs__col--bad{border-radius:var(--r-card) 0 0 var(--r-card);border-right:0}
.vs__col--good{border-radius:0 var(--r-card) var(--r-card) 0;border-left:0;
  background:linear-gradient(180deg,var(--accent-soft),transparent 60%),var(--card);
  border-color:rgba(255,255,255,.14)}
.vs__head{font:700 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt3);margin-bottom:16px}
.vs__col--good .vs__head{color:var(--accent)}
/* app-tile visual: a pile of operator apps vs one Vower app */
.vs__apps{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px;min-height:44px;align-items:center}
.vs__app{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(255,255,255,.045);
  font:600 13px/1 var(--mono);color:var(--txt3);font-style:normal}
/* generic app glyph — no operator is named */
.vs__app::before{content:"";width:15px;height:15px;border-radius:4px;
  border:1.5px solid var(--txt3);opacity:.65}
.vs__app--more::before{display:none}
.vs__app--v{width:46px;height:46px;border-radius:13px;border-color:var(--accent);
  background:var(--accent-soft);box-shadow:0 0 22px -6px var(--accent-glow)}
.vs__app--v::before{display:none}
.vs__app--v img{width:26px;height:auto}
.vs__flow{display:grid;place-items:center;height:26px;margin-bottom:12px}
.vs__flow svg{width:17px;height:17px;fill:none;stroke:var(--txt3);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.vs__flow--on svg{stroke:var(--accent);opacity:1}
/* numbers carry the comparison - nothing to read, just 5+ against 1 */
.vs__stats{display:grid;gap:2px}
.vs__stat{display:flex;align-items:baseline;gap:12px;padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.05)}
.vs__stat:last-child{border-bottom:0}
.vs__stat b{font:600 34px/1 var(--mono);letter-spacing:-.04em;min-width:56px;
  font-variant-numeric:tabular-nums}
.vs__stat span{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.vs__col--bad .vs__stat b{color:var(--txt3)}
.vs__col--bad .vs__stat span{color:var(--txt3)}
.vs__col--good .vs__stat b{color:var(--accent);text-shadow:0 0 22px var(--accent-glow)}
.vs__col--good .vs__stat span{color:var(--txt)}
/* SVG, not a text glyph - font-dependent characters render inconsistently */
.vs__stat--x b,.vs__stat--ok b{display:flex;align-items:center;height:34px}
.vs__stat--x svg,.vs__stat--ok svg{width:26px;height:26px;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.vs__col--bad .vs__stat--x svg{stroke:var(--txt3)}
.vs__col--good .vs__stat--ok svg{stroke:var(--accent)}
.vs__mark{display:grid;place-items:center;padding:0 4px;background:var(--bg)}
.vs__mark span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--line);
  font:700 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--txt3)}
/* The columns are four numeric rows each, so they stay side by side even on a
   phone - stacking them doubled the section height for no clarity gain. */
@media (max-width:760px){
  .vs{grid-template-columns:1fr 1fr;gap:8px}
  .vs__col{border-radius:var(--r-card);padding:14px 12px}
  .vs__col--bad{border-right:1px solid var(--line)}
  .vs__col--good{border-left:1px solid rgba(255,255,255,.14)}
  .vs__mark{display:none}
  .vs__stat{gap:0;flex-direction:column;align-items:flex-start;padding:8px 0}
  .vs__stat b{font-size:26px;min-width:0}
  .vs__stat span{font-size:9.5px;letter-spacing:.09em;margin-top:3px}
  .vs__stat--x b,.vs__stat--ok b{height:26px}
  .vs__stat--x svg,.vs__stat--ok svg{width:22px;height:22px}
}

/* ── compatibility ───────────────────────────────────────────── */
.compat{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:14px;align-items:start}
.compat__picker{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:24px}
.compat__step{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt3);
  margin-bottom:14px;display:flex;align-items:center;gap:9px}
.compat__step:not(:first-child){margin-top:22px}
.compat__step b{color:var(--accent);font-weight:700}
.compat__hint{margin-top:14px;font-size:11.5px;color:var(--txt3);line-height:1.65}
.chipset{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:9px 15px;border-radius:var(--r-chip);border:1px solid var(--line);
  background:rgba(255,255,255,.02);font-size:12.5px;color:var(--txt2);font-weight:500;
  transition:border-color .25s,color .25s,background .25s,transform .2s var(--ease)}
.chip:hover{color:var(--txt);border-color:rgba(255,255,255,.2)}
.chip.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.chip:active{transform:scale(.96)}
.chipset--sm .chip{padding:7px 13px;font-size:11.5px}

.compat__out{position:relative;background:
    radial-gradient(600px circle at 90% -10%,var(--accent-soft),transparent 55%),var(--card);
  border:1px solid var(--line);border-radius:var(--r-card);padding:26px 24px;overflow:hidden}
.compat__out::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--accent-soft));opacity:0;transition:opacity .5s}
.compat__out.is-flash::after{opacity:1;transition:none}
.compat__badge span{display:inline-block;padding:5px 12px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase}
.compat__out h3{font-size:clamp(17px,1.7vw,22px);margin:10px 0 14px;letter-spacing:-.025em}
.compat__rows{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:14px;overflow:hidden}
.compat__rows div{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:15px 17px;background:var(--card)}
.compat__rows small{font-size:12px;color:var(--txt3)}
.compat__rows b{font-size:13.5px;font-weight:600;text-align:right;color:var(--accent)}
.compat__socket{display:flex;gap:11px;align-items:flex-start;margin-top:20px;padding:15px 17px;
  border-radius:14px;background:var(--accent-soft);font-size:12.5px;color:var(--txt2);line-height:1.6}
.compat__socket b{color:var(--txt);font-weight:600}
.compat__socket svg{flex:none;width:16px;height:16px;margin-top:2px;fill:none;stroke:var(--accent);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.compat__socket.is-off{background:rgba(255,255,255,.03)}
.compat__socket.is-off svg{stroke:var(--txt3)}

/* ── planner ─────────────────────────────────────────────────── */
.planner{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:14px;align-items:start}
.planner__controls{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:24px;display:grid;gap:19px}
.slider{display:block}
.slider>span{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:12.5px;color:var(--txt2);margin-bottom:12px}
.slider>span b{font:600 15px/1 var(--mono);color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:0}
/* The visible track stays 3px, but the input itself is 34px tall so there is a
   real hit area to grab on touch. */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:34px;
  background-color:transparent;
  background-image:linear-gradient(90deg,var(--accent) var(--p,50%),rgba(255,255,255,.12) var(--p,50%));
  background-size:100% 3px;background-position:0 center;background-repeat:no-repeat;
  cursor:pointer;touch-action:pan-y}
input[type=range]::-webkit-slider-runnable-track{height:34px;background:transparent;border:0}
input[type=range]::-moz-range-track{height:3px;background:transparent}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;
  margin-top:8.5px;
  background:var(--accent);border:3px solid var(--bg);box-shadow:0 0 0 1px var(--accent),0 0 14px var(--accent-glow);
  transition:transform .2s var(--ease)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--accent);
  border:3px solid var(--bg);box-shadow:0 0 0 1px var(--accent)}
.planner__note{margin-top:2px;font-size:11.5px;color:var(--txt3);line-height:1.6}

.planner__out{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:26px 24px 24px}
.route{position:relative;height:66px;margin:6px 0 30px}
.route__line{position:absolute;left:0;right:0;top:31px;height:2px;background:rgba(255,255,255,.09);border-radius:2px}
.route__fill{position:absolute;left:0;top:31px;height:2px;width:100%;background:var(--accent);
  border-radius:2px;box-shadow:0 0 14px var(--accent-glow);transform-origin:left;
  animation:routedraw 1.4s var(--ease)}
@keyframes routedraw{from{transform:scaleX(0)}}
.route__pin{position:absolute;top:22px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-size:9px;font-weight:700;
  background:var(--accent);color:var(--accent-ink)}
.route__pin--a{left:0}
.route__pin--b{right:0}
.route__stops{position:absolute;inset:0}
.route__stop{position:absolute;top:21px;width:22px;height:22px;margin-left:-11px;border-radius:50%;
  display:grid;place-items:center;background:var(--bg);border:2px solid var(--accent);
  animation:pop .5s var(--ease) backwards}
.route__stop svg{width:11px;height:11px;fill:var(--accent)}
.route__stop::after{content:attr(data-at);position:absolute;top:26px;left:50%;transform:translateX(-50%);
  font-size:9px;color:var(--txt3);white-space:nowrap}
@keyframes pop{from{transform:scale(0);opacity:0}}
.planner__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.planner__stats div{background:var(--card);padding:14px 10px;text-align:center}
.planner__stats b{display:block;font:600 clamp(15px,1.5vw,19px)/1 var(--mono);color:var(--accent);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-shadow:0 0 16px var(--accent-glow)}
.planner__stats span{display:block;margin-top:7px;font:500 9.5px/1.4 var(--mono);color:var(--txt3);
  letter-spacing:.12em;text-transform:uppercase}
.planner__verdict{margin-top:20px;padding:15px 17px;border-radius:14px;background:var(--accent-soft);
  font-size:13px;color:var(--txt2);line-height:1.65}
.planner__verdict b{color:var(--txt);font-weight:600}
.planner__verdict.is-warn{background:rgba(255,90,95,.09)}

/* Lift the phone up alongside the heading. It lives in the right-hand column
   and the head is width-capped on the left, so they sit side by side rather
   than overlapping. The negative margin also shortens the grid row — the
   phone is the tallest item — so the section reclaims the height instead of
   leaving a hole at the bottom. */
@media (min-width:1081px){
}
.stage__phone .device{position:relative;z-index:1;cursor:grab;touch-action:pan-y;
  will-change:transform}
.stage__phone .device.is-dragging{cursor:grabbing;transition:none}
/* the screen contents must not swallow the drag */
.stage__phone .device__screen{pointer-events:auto}
.stage__phone.is-dragging *{user-select:none}

/* ── about / founders ────────────────────────────────────────── */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.founder{display:flex;gap:18px;align-items:stretch;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-card);padding:17px;
  transition:border-color .4s,background .4s}
.founder:hover{border-color:rgba(255,255,255,.16)}
.founder__photo{position:relative;flex:none;width:132px;border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,var(--accent-soft),rgba(255,255,255,.03));
  display:grid;place-items:center;aspect-ratio:3/4}
.founder__mono{font-size:30px;font-weight:600;letter-spacing:-.03em;color:var(--accent);opacity:.6}
.founder__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 18%;
  /* two very different source photos — desaturate so they read as one set,
     then restore full colour on hover */
  filter:grayscale(1) contrast(1.06) brightness(.95);
  transition:filter .5s var(--ease),transform .6s var(--ease)}
.founder:hover .founder__photo img{filter:none;transform:scale(1.04)}
.founder__body{display:flex;flex-direction:column;min-width:0;padding:2px 0}
.founder__body h3{font-size:15.5px;letter-spacing:-.025em}
.founder__role{margin-top:5px;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.founder__tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.founder__tags span{padding:4px 10px;border-radius:8px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);font-size:10.5px;color:var(--txt2);letter-spacing:.02em}
.founder__bio{font-size:12.5px;color:var(--txt2);line-height:1.6}
.founder__link{margin-top:auto;padding-top:14px;font-size:12.5px;color:var(--txt3);
  transition:color .25s;word-break:break-all}
.founder__link:hover{color:var(--accent)}

.social{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px;
  font-size:12.5px;color:var(--txt3)}
.social a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--txt2);font-weight:500;
  transition:border-color .3s,color .3s,background .3s,transform .25s var(--ease)}
.social a svg{width:15px;height:15px;fill:currentColor}
.social a:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);
  transform:translateY(-2px)}

@media (max-width:420px){
  /* keep the photo beside the text - stacking left a dead column of empty
     space to the right of a left-aligned portrait */
  .founder{gap:13px;padding:14px}
  .founder__photo{width:96px;border-radius:13px}
  .founder__photo img{object-position:center 12%}
  .founder__mono{font-size:22px}
  .founder__body h3{font-size:15px}
  .founder__bio{font-size:12px;line-height:1.55}
  .founder__tags{margin:8px 0}
}

/* ── roadmap ─────────────────────────────────────────────────── */
.road{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:6px}
.road::before{content:"";position:absolute;left:9px;top:14px;bottom:14px;width:1px;background:var(--line)}
.road__item{position:relative;padding:12px 0 12px 36px}
.road__dot{position:absolute;left:3px;top:22px;width:13px;height:13px;border-radius:50%;
  background:var(--bg);border:2px solid var(--line)}
/* completed milestones get a tick so progress reads at a glance */
.road__item.is-done .road__dot{border-color:var(--accent);background:var(--accent)}
.road__item.is-done .road__dot::after{content:"";position:absolute;left:3px;top:2.5px;
  width:5px;height:2.5px;border-left:1.5px solid var(--accent-ink);
  border-bottom:1.5px solid var(--accent-ink);transform:rotate(-45deg)}
.road__item.is-now .road__dot{border-color:var(--accent);
  box-shadow:0 0 0 0 var(--accent-glow);animation:ping 2.2s ease-out infinite}
.road__when{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt3);margin-bottom:9px}
/* status chips make progress legible at a glance */
.road__tag{padding:4px 8px;border-radius:6px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);font-size:9px;letter-spacing:.1em;color:var(--txt3)}
.road__tag--done{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.road__tag--now{border-color:var(--warn);background:rgba(255,176,32,.1);color:var(--warn)}
.road__item h3{font-size:16px;margin-bottom:5px;letter-spacing:-.025em}
.road__item>p:last-child{font-size:12.2px;color:var(--txt2);line-height:1.58;max-width:600px}

/* Four milestones stacked in one column spent ~430px of height to say very
   little and left the right two-thirds of the section empty. Laid out as a
   horizontal track the same content reads as a progress bar, fills the width
   and costs about a third of the height. */
@media (min-width:1000px){
  .road{grid-template-columns:repeat(4,1fr);column-gap:22px;row-gap:0;align-items:start}
  .road::before{left:0;right:0;top:6px;bottom:auto;width:auto;height:1px}
  /* the line is only "lit" as far as progress has actually reached */
  .road::after{content:"";position:absolute;left:0;top:6px;width:calc(25% + 24px);height:1px;
    background:linear-gradient(90deg,var(--accent),var(--accent-glow));
    box-shadow:0 0 10px var(--accent-glow)}
  .road__item{padding:26px 0 0}
  .road__dot{left:0;top:0}
  .road__item.is-done .road__dot::after{left:3px;top:2.5px}
  .road__when{margin-bottom:8px}
  .road__item h3{font-size:15px}
  .road__item>p:last-child{font-size:12px}
}

/* ── access ──────────────────────────────────────────────────── */
.access{text-align:center;display:grid;place-items:center}
.access__inner{max-width:660px;width:100%}
.access h2{font-size:clamp(23px,2.6vw,35px)}
.access .lede{margin-inline:auto;text-align:center}
.waitlist{margin-top:20px}
.waitlist__field{display:flex;gap:9px;padding:7px;border:1px solid var(--line);border-radius:22px;
  background:var(--card);transition:border-color .3s,box-shadow .3s}
.waitlist__field:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.waitlist__field input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--txt);
  font:400 15px Poppins,sans-serif;padding:0 18px}
.waitlist__field input::placeholder{color:var(--txt3)}
.waitlist__field.is-bad{border-color:var(--danger)}
.waitlist__row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:16px}
.waitlist__q{font-size:12.5px;color:var(--txt3)}
/* min-height reserves the slot so a submit reply doesn't shift the page, but 22px
   of permanently blank line under the form was part of what made the CTA sag */
.waitlist__msg{min-height:18px;margin-top:12px;font-size:13px;color:var(--accent)}
.waitlist__msg.is-bad{color:var(--danger)}
.waitlist.is-sent .waitlist__field{border-color:var(--accent)}

.stores{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:22px}
/* These stay slightly recessed against the primary CTA — the apps aren't out yet
   — but .55 pushed the 9px "coming soon on" label under the AA contrast floor
   and read as broken rather than deliberate. */
.store{display:flex;align-items:center;gap:10px;padding:10px 18px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:16px;background:rgba(255,255,255,.035);opacity:.86;
  transition:opacity .3s,border-color .3s}
.store:hover{opacity:1;border-color:rgba(255,255,255,.2)}
.store svg{width:21px;height:21px;fill:var(--txt)}
.store span{display:grid;text-align:left}
.store small{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt2)}
.store b{font-size:14px;font-weight:600}

/* ── contact page ────────────────────────────────────────────── */
.contact-main{padding-top:78px}
.c-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:26px;
  align-items:start;padding:clamp(36px,4.6vw,62px) var(--pad-x) clamp(22px,2.6vw,34px)}
.c-hero h1{font-size:clamp(24px,2.8vw,38px);margin:11px 0 12px;letter-spacing:-.035em;line-height:1.15}
.c-hero .lede{margin-top:0}

.aud{display:grid;gap:7px;margin-top:24px;max-width:480px}
.aud__btn{position:relative;text-align:left;padding:13px 17px 13px 21px;border-radius:var(--r-card);
  border:1px solid var(--line);background:rgba(255,255,255,.02);
  transition:border-color .35s,background .35s,transform .25s var(--ease)}
.aud__btn::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:2px;border-radius:2px;
  background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.aud__btn b{display:block;font-size:13.8px;font-weight:600;color:var(--txt2);transition:color .3s}
.aud__btn span{display:block;margin-top:3px;font-size:12px;color:var(--txt3)}
.aud__btn:hover{border-color:rgba(255,255,255,.2);transform:translateX(2px)}
.aud__btn:hover b{color:var(--txt)}
.aud__btn.is-on{background:var(--card);border-color:var(--line)}
.aud__btn.is-on::before{transform:scaleY(1)}
.aud__btn.is-on b{color:var(--txt)}

.c-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:21px;position:sticky;top:88px}
.c-card__title{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--txt3);margin-bottom:18px}
.c-line{display:flex;align-items:center;gap:14px;padding:13px;border-radius:14px;
  transition:background .3s}
.c-line:hover{background:rgba(255,255,255,.04)}
.c-line__ico{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-soft)}
.c-line__ico svg{width:17px;height:17px;fill:none;stroke:var(--accent);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.c-line small{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3)}
.c-line b{display:block;margin-top:2px;font-size:14.5px;font-weight:600;word-break:break-word}

.c-founders{display:grid;gap:8px;margin:18px 0;padding-top:18px;border-top:1px solid var(--line)}
.c-founder{display:flex;align-items:center;gap:12px;padding:9px 13px;border-radius:14px;
  transition:background .3s}
.c-founder:hover{background:rgba(255,255,255,.04)}
.c-founder img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:center 15%;
  filter:grayscale(1);transition:filter .4s}
.c-founder:hover img{filter:none}
.c-founder b{display:block;font-size:13.5px;font-weight:600}
.c-founder small{display:block;font-size:11px;color:var(--txt3);word-break:break-word}
.social--tight{margin-top:0;padding-top:16px;border-top:1px solid var(--line)}
.social--tight a{padding:7px 13px;font-size:12px}

.c-panels{padding-top:clamp(40px,5vw,70px)}
.aud-panel{display:none}
.aud-panel.is-on{display:block;animation:panelIn .5s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(16px)}}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ticks li{position:relative;padding-left:24px;font-size:13px;color:var(--txt2);line-height:1.55}
.ticks li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:5px;
  border-left:1.8px solid var(--accent);border-bottom:1.8px solid var(--accent);
  transform:rotate(-45deg)}
.ticks b{color:var(--txt);font-weight:600}
.card__foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--accent);font-weight:500}
.card__foot a:hover{text-decoration:underline}

.steps{list-style:none;margin:20px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.steps li{background:var(--card);padding:19px 18px}
.steps b{font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--accent);font-family:var(--mono)}
.steps h4{margin:8px 0 6px;font-size:15px;font-weight:600;letter-spacing:-.03em}
.steps p{font-size:12.2px;color:var(--txt2);line-height:1.55}

.launch--form{margin-bottom:16px}
.launch--form b{font-size:13px}
.c-form-wrap{max-width:820px;margin:0 auto}
.c-form{display:grid;grid-template-columns:1fr 1fr;gap:13px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:23px}
.field{display:grid;gap:8px}
.field--wide,.c-form__foot,.c-form__msg{grid-column:1/-1}
.field[hidden]{display:none}
.field label{font-size:12px;color:var(--txt2);letter-spacing:.02em}
.field .opt{color:var(--txt3);font-size:11px}
.field input,.field textarea{width:100%;padding:13px 15px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--txt);
  font:400 14px Poppins,sans-serif;outline:none;resize:vertical;
  transition:border-color .3s,box-shadow .3s,background .3s}
/* Safari zooms the viewport when a focused input is below 16px, which leaves
   the page scrolled sideways with no way back. 16px is the threshold, not a
   preference. */
@media (max-width:820px){
  .field input,.field textarea,.waitlist input,input[type="email"],
  input[type="text"],input[type="tel"],textarea,select{font-size:16px}
}
.field input::placeholder,.field textarea::placeholder{color:var(--txt3)}
.field input:focus,.field textarea:focus{border-color:var(--accent);background:rgba(255,255,255,.05);
  box-shadow:0 0 0 4px var(--accent-soft)}
.field.is-bad input,.field.is-bad textarea{border-color:var(--danger)}
.c-form__foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  margin-top:4px}
.c-form__note{font-size:12.5px;color:var(--txt3)}
.c-form__note b{color:var(--accent);font-weight:600}
.c-form__msg{min-height:20px;font-size:13px;color:var(--accent)}
.c-form__msg.is-bad{color:var(--danger)}

@media (max-width:1080px){
  .c-hero{grid-template-columns:1fr;gap:28px}
  .c-card{position:static}
}
@media (max-width:640px){
  .c-form{grid-template-columns:1fr;padding:22px}
  .c-form__foot{flex-direction:column;align-items:stretch}
  .c-form__foot .btn{width:100%}
}

/* ── footer ──────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding:72px var(--pad-x) 40px;background:rgba(255,255,255,.012)}
.foot__top{display:grid;grid-template-columns:1fr;gap:36px;
  align-items:start;padding-bottom:52px}
@media (min-width:1000px){
  /* brand | links | badges, all on one row */
  .foot__top{grid-template-columns:minmax(160px,1fr) auto auto;
    column-gap:clamp(32px,3vw,64px);row-gap:44px}
}
.foot__brand img{height:21px;width:auto;margin-bottom:18px}
.foot__brand p{font-size:14.5px;color:var(--txt3);max-width:300px;line-height:1.65}
.foot__cols{display:flex;flex-wrap:wrap;gap:clamp(44px,6vw,104px)}
.foot__cols div{display:grid;gap:13px;align-content:start}
.foot__cols b{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--txt3);font-weight:700}
.foot__cols a{font-size:15.5px;color:var(--txt2);transition:color .25s}
.foot__cols a:hover{color:var(--accent)}
.foot__bot{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;
  align-items:center;padding-top:30px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.75;color:var(--txt3);letter-spacing:.005em}
.foot__status{display:flex;align-items:center;gap:8px}
.foot__status i{width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow)}

/* ── responsive ──────────────────────────────────────────────── */
@media (max-width:1080px){
  .hero{grid-template-columns:1fr;gap:56px;padding-top:124px;min-height:min(90svh,900px)}
  .hero__device{order:2}
  .compat,.planner{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .nav__links{position:fixed;inset:64px 0 auto;flex-direction:column;gap:0;padding:10px var(--gut) 26px;
    background:rgba(5,5,5,.96);backdrop-filter:blur(22px);border-bottom:1px solid var(--line);
    transform:translateY(-120%);transition:transform .45s var(--ease);font-size:17px}
  .nav__links.is-open{transform:none}
  .nav__links a{padding:14px 0;border-bottom:1px solid var(--line)}
  .nav__burger{display:flex}
  .nav .btn--sm{display:none}
  #grid-canvas{opacity:.32}
  .planner__stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  /* Portrait needs a different scrim: the copy is full-width here, so a
     left-weighted wash would leave the right half of the text sitting on open
     footage. Darken top-to-bottom instead, weighted where the text sits. */
  .hero__film::after{
    /* Stay heavy through 78% — that's where the title, CTA and countdown sit —
       then open up so the footage runs to the hero's bottom edge. The old ramp
       hit an opaque var(--bg) at 100%, which painted a dead black band between
       the countdown and the ticker on a 100svh hero. */
    /* Weight follows the copy, which is top-aligned now: light above it,
       heavy only across 15-72% where the text actually sits, then opening up
       so the lower half of the frame stays legible footage. */
    background:
      linear-gradient(180deg,rgba(5,5,5,.20) 0%,rgba(5,5,5,.44) 12%,
        rgba(5,5,5,.50) 30%,rgba(5,5,5,.48) 62%,rgba(5,5,5,.28) 76%,
        rgba(5,5,5,.10) 88%,rgba(5,5,5,.06) 100%),
      linear-gradient(90deg,rgba(5,5,5,.10),transparent 50%,rgba(5,5,5,.10))}
  /* 16:9 into a tall hero — bias the crop low so the road, not the sky, fills
     the frame. object-position, never top/transform: the element must stay
     pinned to all four edges or its background shows through. */
  .hero__film video{object-position:center 64%}
}
/* Respect an explicit data-saving preference: still a 2.3MB fetch. */
@media (prefers-reduced-data:reduce){
  .hero__film{display:none}
}
@media (max-width:520px){
  /* ---- mobile-first restructure: one message per screen, less scrolling ---- */
  /* 28px each side reads as a 56px gap between sections - inside the 48-72px
     target, while the density work below is what shortens the page. */
  .section{padding:24px var(--gut)}
  .section--compact{padding-block:16px}
  .section--tight{padding-block:14px}
  .section--large{padding-block:32px}
  /* one head gap on mobile — the desktop tiers only earn their keep when there
     is width to trade against */
  .section__head,.section--compact .section__head,.section--large .section__head{margin-bottom:18px}
  .compat__socket{margin-top:12px}
  .planner__note{margin-top:0;font-size:11px}

  /* ---- content density ---- */
  .countdown{padding-top:16px}
  .countdown__label{margin-bottom:9px}
  .cd{padding:9px 5px}
  .cd b{font-size:22px}
  .compat__rows div{padding:11px 13px}
  .compat__step:not(:first-child){margin-top:16px}
  .planner__controls{gap:12px;padding:16px}
  .planner__out{padding:16px}
  .slider>span{margin-bottom:8px}
  .route{height:52px;margin:2px 0 22px}
  .planner__stats div{padding:11px 8px}
  .planner__verdict{margin-top:14px;padding:12px 14px;font-size:12px}
  /* roadmap: two milestones per row instead of one long column */
  .road{grid-template-columns:1fr 1fr;column-gap:12px}
  .road::before{display:none}
  .road__item{padding:12px 12px 12px 14px;background:var(--card);
    border:1px solid var(--line);border-radius:var(--r-card)}
  .road__dot{left:auto;right:12px;top:14px}
  .road__when{margin-bottom:6px;font-size:9.5px;gap:6px}
  .road__tag{padding:3px 7px;font-size:9px}
  .road__item h3{font-size:14px;margin-bottom:4px}
  .road__item>p:last-child{font-size:11.5px;line-height:1.5}
  .founder{padding:13px;gap:12px}
  .founder__photo{width:88px}
  .stores .store{padding:9px 15px}
  .waitlist__row{margin-top:14px}
  .foot{padding:26px var(--gut) 18px}
  .foot__top{gap:22px;padding-bottom:18px}
  /* The video owns the whole first screen on a phone: 100svh, so the film
     reaches the fold exactly and nothing below it peeks in. svh (not vh)
     because mobile browser chrome shrinks the visible area. */
  /* Content sits just under the nav rather than centred: centring inside a
     100svh box left ~104px of dead space between the wordmark and the pill.
     The hero keeps its full height, so the film still owns the first screen —
     the spare room now falls below the countdown, where the footage shows. */
  /* Copy sits under the nav, countdown is pushed to the foot of the first
     screen: .hero__copy fills the hero and the countdown takes the slack with
     margin-top:auto, so the gap flexes with the device instead of being a
     fixed offset that only lines up on one handset. */
  .hero{padding:94px var(--gut) 34px;gap:14px;
    min-height:100svh;align-content:stretch;align-items:stretch}
  .hero__copy{display:flex;flex-direction:column;min-height:0}
  .hero__copy > .countdown{margin-top:auto}
  .hero__cta{margin:16px 0 18px;gap:9px}
  .hero__title{margin:9px 0 11px;font-size:clamp(38px,11vw,48px);line-height:1.02}
  .hero__device{margin-bottom:0}
  /* a scroll cue is redundant on touch and was holding open ~170px */
  .hero__scroll{display:none}
  .ticker{padding:9px 0}
  .charge-scene{padding:2px var(--gut) 8px;gap:6px}
  /* 2x2 keeps labels at a readable 9.5px; 4-up forced them to 7.5px */
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats .stat{padding:13px 10px}
  .stat b{font-size:22px}
  .stat span{font-size:9.5px;letter-spacing:.08em;margin-top:6px}
  .stat::before{display:none}
  .planner__stats{grid-template-columns:repeat(2,1fr)}
  .planner__stats div{padding:11px 8px}
  .planner__stats span{font-size:9.5px;letter-spacing:.08em}
  .grid,.team{gap:12px}

  /* feature cards become compact rows: icon | title + one clamped line.
     Every child except the icon is pinned to column 2 explicitly. Without
     that, a card with more than icon+h3+p (the contact page's checklists)
     auto-flows its extras back into column 1, which then sizes to the widest
     of them — the icon column ballooned to 190px and left 98px for the text. */
  .card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 13px;
    align-items:start;padding:16px}
  .card>*{grid-column:2;min-width:0}
  .card__icon{grid-column:1;grid-row:1/3;margin-bottom:0;width:34px;height:34px}
  .card h3{align-self:center;margin-bottom:3px;font-size:14.5px}
  /* two lines by default, tap to open - the full text is still there */
  .card p{font-size:12px;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .card.is-open p{-webkit-line-clamp:unset;overflow:visible}
  .card__tag{top:14px;right:14px;font-size:9px;padding:3px 7px}
  .card__scan{display:none}
  /* corner brackets are a hover flourish - pure noise on a touch screen */
  .card::after{display:none}

  /* phone sits on the map backdrop, list underneath */

  /* two thin bands read as one */
  .trust{padding:16px var(--gut) 14px}
  .trust__note{display:none}
  .foot{padding:32px var(--gut) 22px}
  .foot__top{gap:26px;padding-bottom:22px}
  .stats .stat{padding:16px 12px}
  .road__item{padding:10px 0 10px 34px}
  /* Floor of 268px: below that the phone's own UI text drops under 8px and
     becomes unreadable, since everything inside scales from --dw. */
  /* Small enough that the phone and its four cards share one screen — that
     was the whole point of the mockup sitting with the cards. Paired with the
     33% card width: at 375px the phone lands at 143px and each card's inner
     edge crosses only ~15px of it, which is the bezel plus a sliver. */
  .device,.device--sm{--dw:max(132px, min(146px, calc(100vw - 232px)))}
  /* the screen scales from --dw, so the ratio rises as the frame shrinks —
     otherwise the 8px mono labels would land near 5px */
  .device__screen{font-size:calc(var(--dw) * 24 / 300)}
  /* Two rows are laid out horizontally and can't absorb the bigger ratio:
     the filter chips and the bottom nav both overflowed the narrower frame. */
  .ph-chips{gap:.22em}
  .ph-chips span{padding:.24em .42em;font-size:.5em}
  .ph-nav{padding:0 .12em .5em}
  .ph-nav button{padding:.36em .3em;gap:.14em}
  .ph-nav button i{font-size:.46em}
  .ph-nav button svg{width:.94em;height:.94em}
  /* horizontal rows can't absorb the raised ratio — tighten them to fit */
  .ph-card{padding:.5em .55em}
  .ph-card__top b{font-size:.64em}
  .ph-card__top small{font-size:.56em}
  .ph-badge{padding:.16em .34em;font-size:.5em}
  .ph-metrics{gap:.22em}
  .ph-metrics div{padding:.34em .18em}
  .ph-metrics b{font-size:.52em}
  .ph-metrics small{font-size:.54em}
  .device__hint{font-size:10px}
  /* planner + compat: tighter stacked panels */
  .planner__controls{padding:18px;gap:15px}
  .planner__out{padding:20px 18px 18px}
  .compat__picker,.compat__out{padding:18px}
  .compat__hint{font-size:11px;margin-top:11px}
  .vs__col{padding:16px 15px}
  /* the app-tile pile is decorative - the icon rows carry the message */
  .vs__apps,.vs__flow{display:none}
  .vs__head{margin-bottom:12px}
  .vs__stat{padding:7px 0}
  .vs__stat b{font-size:29px;min-width:48px}
  .vs__stat span{font-size:10px;letter-spacing:.12em}
  .vs__mark{padding:2px 0}
  .vs__mark span{width:32px;height:32px;font-size:9px}
  /* about + access: tighten the tail of the page */
  .social{margin-top:18px;gap:9px}
  .founder__link{padding-top:10px}
  .stores{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .stores .store{width:100%;min-width:0;padding:11px 12px;gap:9px}
  .stores .store svg{width:20px;height:20px;flex:none}
  .stores .store small{font-size:8.5px}
  .stores .store b{font-size:13.5px;white-space:nowrap}
  .waitlist{margin-top:20px}
  .road__item>p:last-child{font-size:12px}
  .charge-scene{padding:0 var(--gut) 12px}
  /* keep brand + mode switch + burger on one line on small phones */
  .nav{gap:12px}
  .nav__wordmark{height:12px}
  .nav__burger{width:46px;height:46px}
  .stat{padding:26px 12px}
  .waitlist__field{flex-direction:column;border-radius:20px}
  .waitlist__field input{padding:12px 16px;text-align:center}
  .waitlist__field .btn{width:100%}
  .foot__cols{gap:32px}
}

/* ── touch devices: 44px minimum hit area (WCAG / platform guidance) ──── */
@media (pointer:coarse){
  /* slider hit area to 44px; the visible track stays 3px */
  input[type=range]{height:44px}
  input[type=range]::-webkit-slider-runnable-track{height:44px}
  input[type=range]::-webkit-slider-thumb{margin-top:13.5px}
  .charge-scene__cap a{padding:12px 4px}
  .founder__link{padding-block:13px}
  .nav__brand{padding-block:14px}
  .ph-nav button{min-height:44px}
  .chip{padding:12px 16px}
  .chipset--sm .chip{padding:13px 16px}
  .foot__cols a,.nav__links a{padding-block:12px}
  .foot__cols div{gap:2px}
  .foot__bot a{padding-block:12px}
  .social a{padding-block:13px}
  .aud__btn{padding-block:16px}
  .c-line,.c-founder{padding-block:14px}
  .social a{padding:11px 16px}
  .trust__list li{padding:9px 14px}
  .btn--quiet{padding:13px 16px}
  /* hover-only affordances never fire on touch, so show them by default */
  .founder__photo img{filter:none}
  .c-founder img{filter:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .hero__line>span{transform:none}
  .scrambling{font-family:inherit;letter-spacing:inherit}
}
@media (max-width:820px){
  .hud,.hud-bar{display:none}
  .grain{opacity:.03}
}

/* ── the app stage ───────────────────────────────────────────────
   Cards are absolutely placed against the grid and deliberately run
   UNDER the phone — the mockup carries a higher z-index, so its edges
   cut across them. Left and right are staggered vertically so the
   four never read as a symmetrical table. */
/* Heading on the left, the mockup cluster occupying the right — the layout
   from the sketch. Below 1080px it stacks. */
.app__row{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(24px,3vw,56px);align-items:start}
.app__row .section__head{max-width:none;margin-bottom:0;padding-top:8px}
@media (max-width:1080px){
  .app__row{grid-template-columns:1fr;gap:var(--s-6,28px)}
  .app__row .section__head{margin-bottom:22px}
}

.stage{position:relative}
.stage__pin{display:grid;place-items:center}
.stage__grid{position:relative;width:100%;max-width:1180px;
  min-height:min(660px,78svh);display:grid;place-items:center}
.stage__phone{position:relative;z-index:3;display:grid;justify-items:center;gap:16px}
.stage__phone .device{transform:translateX(var(--drag,0px))}
.stage__col{position:absolute;inset:0;z-index:1;pointer-events:none}

.fcard{position:absolute;padding:15px 18px;border-radius:16px;
  background:rgba(16,16,16,.9);border:1px solid var(--line);
  backdrop-filter:blur(14px);box-shadow:0 18px 50px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;
  transform:translate3d(var(--gx,0px),calc(40px + var(--gy,0px)),0) scale(.96);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
/* A descending ladder: left, right, left, right — each step lower than the
   last. Widths stop well short of the phone so nothing is hidden behind it. */
.fcard[data-i="0"]{left:1%;width:29%;top:5%}    /* rung 1 · left  */
.fcard[data-i="2"]{right:1%;width:29%;top:27%}  /* rung 2 · right */
.fcard[data-i="1"]{left:3%;width:29%;top:49%}   /* rung 3 · left  */
.fcard[data-i="3"]{right:3%;width:29%;top:71%}  /* rung 4 · right */
.fcard b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.02em;
  margin-bottom:4px}
.fcard span{display:block;font-size:11.5px;line-height:1.5;color:var(--txt3)}
.fcard::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;
  border-radius:2px;background:var(--accent);opacity:.7}
.fcard.is-in{opacity:1;pointer-events:auto;
  transform:translate3d(var(--gx,0px),var(--gy,0px),0) scale(1)}
.fcard.is-out{opacity:0;
  transform:translate3d(var(--gx,0px),calc(-46px + var(--gy,0px)),0) scale(.96)}
.fcard[data-i="1"],.fcard[data-i="3"]{transition-delay:.07s}

/* Leader line from each card to the phone. Two background layers on one
   pseudo-element: a 1px rule, plus a dot that lands on the screen edge.
   Sized in px because it has to span a fixed 45px gap, not a share of it. */
.fcard::after{content:"";position:absolute;top:50%;height:8px;margin-top:-4px;
  width:var(--reach,58px);pointer-events:none;
  opacity:0;transition:opacity .45s var(--ease) .12s}
/* rungs 1 and 2 sit 1% from the edge, rungs 3 and 4 sit 3% — so the reach is
   set per card and every tip lands the same few px onto the screen */
.fcard[data-i="0"],.fcard[data-i="2"]{--reach:70px}
.fcard[data-i="1"],.fcard[data-i="3"]{--reach:51px}
.fcard.is-in::after{opacity:.75}
.stage__col--l .fcard::after{left:100%;
  background:
    radial-gradient(circle 3px at calc(100% - 3px) 50%,var(--accent) 98%,transparent) no-repeat,
    linear-gradient(90deg,color-mix(in srgb,var(--accent) 25%,transparent),var(--accent))
      0 50%/100% 1px no-repeat}
.stage__col--r .fcard::after{right:100%;
  background:
    radial-gradient(circle 3px at 3px 50%,var(--accent) 98%,transparent) no-repeat,
    linear-gradient(270deg,color-mix(in srgb,var(--accent) 25%,transparent),var(--accent))
      0 50%/100% 1px no-repeat}

.stage__dots{display:flex;gap:7px}
.stage__dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.18);
  transition:background .35s,width .35s var(--ease)}
.stage__dots i.on{width:20px;border-radius:3px;background:var(--accent)}

@media (max-width:900px){
  /* Keep the ladder on a phone. There is only ~70px clear either side of the
     mockup, so a readable card has to ride over it — the cards sit ABOVE the
     phone here (the reverse of desktop) and carry an opaque background so the
     text stays legible against the screen behind. */
  .stage__grid{min-height:0;display:block;max-width:none;place-items:stretch}
  .stage__phone{position:relative;z-index:1;display:grid;justify-items:center;gap:14px}
  .stage__col{position:absolute;inset:0;z-index:2;display:block;pointer-events:none}
  /* 33% leaves the card's inner edge just past the phone's bezel rather than
     halfway across the screen — see the --dw rule below, the two are tuned
     together. Glass rather than near-opaque now that the overlap is small. */
  .fcard,.fcard[data-i]{position:absolute;width:33%;
    padding:0;height:0;border:0;overflow:hidden;opacity:0;
    background:rgba(20,22,20,.52);backdrop-filter:blur(20px) saturate(1.5);
    -webkit-backdrop-filter:blur(20px) saturate(1.5);
    box-shadow:0 10px 28px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);
    transform:translateY(26px);
    transition:opacity .45s var(--ease),transform .45s var(--ease)}
  .fcard[data-i="0"]{left:0;top:3%}
  .fcard[data-i="2"]{right:0;top:27%}
  .fcard[data-i="1"]{left:0;top:51%}
  .fcard[data-i="3"]{right:0;top:75%}
  .fcard.is-in,.fcard[data-i].is-in{height:auto;padding:9px 10px;
    border:1px solid rgba(255,255,255,.16);
    opacity:1;transform:none;pointer-events:auto}
  .fcard b{font-size:10.5px;margin-bottom:2px}
  .fcard span{font-size:9px;line-height:1.32}
  .fcard.is-out{opacity:0;transform:translateY(-26px);height:0;padding:0;border:0}
  .fcard::before{display:none}
  .fcard::after{display:none}
}
@media (max-width:520px){
  /* Narrower still on the smallest phones — the mockup barely shrinks below
     here (--dw floors at 132px), so the cards have to give up the width. */
  .fcard,.fcard[data-i]{width:31.5%}
  .fcard b{font-size:10px;margin-bottom:2px}
  .fcard span{font-size:8.5px;line-height:1.3}
}
@media (prefers-reduced-motion:reduce){
  .fcard{transition:none;transform:none}
  .fcard.is-in{transform:none}
}

/* ── footer socials + legal line ────────────────────────────────
   Icons under the wordmark rather than text links in the Contact
   column — a logo reads faster than the word and frees a row. */
.foot__social{display:flex;gap:10px;margin-top:16px}
.foot__social a{display:grid;place-items:center;width:40px;height:40px;
  border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.02);
  color:var(--txt2);transition:color .25s,border-color .25s,background .25s,transform .25s var(--ease)}
.foot__social a:hover{color:var(--accent);border-color:var(--accent);
  background:var(--accent-soft);transform:translateY(-2px)}
.foot__social svg{width:17px;height:17px;fill:currentColor}
/* Each clause is its own nowrap span so the company name and the CIN never
   break across lines — a split CIN reads as a typo. */
.foot__legal{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.foot__legal b{color:var(--txt2);font-weight:600;white-space:nowrap}
.foot__legal .sep{opacity:.45}
.foot__legal .cin{white-space:nowrap;font-variant-numeric:tabular-nums}
@media (pointer:coarse){
  /* 40px circles are the visual size; pad the hit area to the 44px minimum */
  .foot__social a{width:44px;height:44px}
}
@media (max-width:520px){
  .foot__legal{gap:2px 8px;line-height:1.8}
  .foot__bot{font-size:12px;padding-top:24px}
}


/* ── store badges in the footer ─────────────────────────────────
   Moved out of the CTA block into the empty right of the footer row.
   margin-left:auto pushes them there without a fixed column. */
.foot__stores{margin-left:0;margin-top:0;align-self:start;
  display:grid;gap:14px;justify-items:stretch;justify-content:stretch;min-width:0}
.foot__stores .store{justify-content:flex-start;padding:16px 22px;border-radius:18px;
  opacity:1;background:rgba(255,255,255,.05)}
.foot__stores .store:hover{background:rgba(255,255,255,.08)}
.foot__stores .store svg{width:26px;height:26px}
.foot__stores .store small{font-size:10px}
.foot__stores .store b{font-size:16.5px}
@media (max-width:900px){
  .foot__stores{margin-left:0;grid-auto-flow:column;justify-items:start}
}
@media (max-width:520px){
  .foot__stores{grid-auto-flow:row}
}


/* ── roadmap in a panel ─────────────────────────────────────────
   The timeline was floating on the page background with nothing to
   hold it; a bordered panel gives it an edge and separates it from
   the founders block underneath. */
.road{padding:clamp(22px,2.4vw,34px) clamp(20px,2.4vw,34px);
  border:1px solid var(--line);border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 60%),var(--card)}
@media (min-width:1000px){
  /* the connector line has to start inside the panel's padding, not at its edge */
  .road::before{left:clamp(20px,2.4vw,34px);right:clamp(20px,2.4vw,34px)}
  .road::after{left:clamp(20px,2.4vw,34px)}
}
@media (max-width:520px){
  .road{padding:18px 16px}
}

/* ── footer on a phone ──────────────────────────────────────────
   Stacked, the desktop rhythm reads as stretched: a 13px row gap on
   top of the 12px touch padding put ~37px between every link. The
   padding alone already guarantees the 44px target, so the extra gap
   goes and the badges take the full width instead of leaving a hole. */
@media (max-width:640px){
  .foot{padding-top:48px}
  .foot__top{gap:30px;padding-bottom:34px}
  .foot__cols{width:100%;gap:24px}
  .foot__cols div{gap:0}
  .foot__cols b{margin-bottom:6px}
  .foot__brand p{max-width:none}
  .foot__social{margin-top:18px}
  .foot__stores{width:100%;min-width:0;gap:10px;
    grid-auto-flow:row;grid-template-columns:1fr 1fr;justify-items:stretch}
  .foot__stores .store{width:100%;min-width:0;padding:11px 12px;gap:9px;border-radius:14px}
  .foot__stores .store svg{width:20px;height:20px;flex:none}
  .foot__stores .store small{font-size:8.5px;letter-spacing:.08em}
  .foot__stores .store b{font-size:13.5px;white-space:nowrap}
  .foot__bot{padding-top:26px;gap:10px}
}
@media (max-width:420px){
  /* three columns of links don't fit — let them wrap to two */
  .foot__cols{gap:20px 28px}
  .foot__cols div{min-width:42%}
}

/* ── store badges: two across on a wide screen ──────────────────
   Stacked, they left a wide hole between the link columns and the
   right edge. Side by side they carry that space themselves. */
@media (min-width:1000px){
  /* one column while space is tight — keeps the row intact */
  .foot__stores{grid-template-columns:1fr;gap:10px;min-width:200px}
  .foot__stores .store{padding:12px 18px;border-radius:16px}
  .foot__stores .store svg{width:26px;height:26px}
  .foot__stores .store b{font-size:16px}
}
@media (min-width:1150px){
  /* two across, and shorter — the badges were taller than they needed to be */
  .foot__stores{grid-template-columns:1fr 1fr;gap:14px;min-width:0}
  .foot__stores .store{padding:13px 18px;border-radius:16px}
  .foot__stores .store svg{width:24px;height:24px}
  .foot__stores .store small{font-size:9.5px}
  .foot__stores .store b{font-size:15.5px}
}

/* ── store badges: footer on desktop, CTA block on a phone ──────
   Two copies in the markup, but only ever one rendered — display:none
   drops the other out of the accessibility tree entirely, so screen
   readers never meet a duplicate pair of links. */
.stores--cta{display:none}
@media (max-width:900px){
  .stores--cta{display:grid;grid-auto-flow:row;gap:10px;
    justify-items:stretch;justify-content:stretch;margin-top:26px}
  .stores--cta .store{width:100%;padding:15px 18px;opacity:1;
    background:rgba(255,255,255,.05)}
  .foot__stores{display:none}
}

/* ── delivery toast ──────────────────────────────────────────────
   Confirmation that a message actually went somewhere. The inline
   form message is easy to miss once the form has scrolled; this sits
   above everything and announces itself to screen readers too. */
.toast-wrap{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);z-index:9999;display:grid;gap:10px;
  width:min(420px,calc(100vw - 32px));pointer-events:none}
.toast{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:16px;
  background:rgba(18,20,18,.82);backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid rgba(163,230,53,.38);
  box-shadow:0 18px 46px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);
  color:var(--txt);pointer-events:auto;
  opacity:0;transform:translateY(14px) scale(.97);
  transition:opacity .38s var(--ease),transform .38s var(--ease)}
.toast.is-on{opacity:1;transform:none}
.toast__tick{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#0a0a0a}
.toast__tick svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.toast b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;margin-bottom:2px}
.toast span{display:block;font-size:12.5px;line-height:1.5;color:var(--txt2)}
@media (max-width:520px){
  .toast b{font-size:13.5px}
  .toast span{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .toast{transition:opacity .001ms;transform:none}
}