/* ==========================================================================
   Stream Universe landing page
   Tokens are lifted verbatim from the Figma file (7S8h8M89WGmqIMTUBisWBM,
   page "Design System"). House rule from the design system: FLAT, ALWAYS.
   No gradient fills anywhere. Depth comes from the documented Elevation/*
   and Glow/* shadow styles and from blurred flat blobs, never from ramps.
   ========================================================================== */

:root{
  /* space */
  --space:#080B14;          /* app background */
  --void:#05070E;           /* page ground, behind everything */
  --purple-900:#1D0E35;
  --purple-800:#2E1653;
  --purple-600:#4C1D95;
  --purple-500:#6D28D9;     /* primary, UI only */
  --purple-400:#8B5CF6;     /* the "Universe" violet */
  --purple-300:#C4B5FD;

  /* status (app semantics) */
  --green:#4ADE8C;          /* included in something you pay for */
  --amber:#FFC247;          /* costs extra */
  --grey:#8F87AD;           /* not streaming here */
  --red:#FF6B6B;

  /* ink */
  --ink:#FFFFFF;
  --ink-2:#B7B1CC;
  --ink-3:#6E668C;

  /* surfaces: white alpha over Space */
  --surf:rgba(255,255,255,.04);
  --surf-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.07);

  /* poster palette (from the Poster/* components) */
  --crimson:#5C1620; --teal:#123B45; --sand:#8A5A2B; --bitumen:#1A1208;
  --amethyst:#3A1E52; --lagoon:#1E4A52; --slate:#23262F; --indigo:#1B1B3A;
  --moss:#31431F; --steel:#0E2A3A;

  /* elevation + glow, exactly as documented */
  --e1:0 2px 8px rgba(0,0,0,.20);
  --e2:0 8px 24px rgba(0,0,0,.28);
  --e3:0 16px 48px rgba(0,0,0,.35);
  --glow-v:0 0 32px rgba(124,77,255,.45);
  --glow-c:0 0 28px rgba(77,223,247,.40);

  --r-card:14px;
  --r-full:9999px;
  --gut:clamp(20px,5vw,64px);
  --sec-y:clamp(88px,13vh,160px);

  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter",system-ui,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--ink);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
summary::-webkit-details-marker{display:none}
:focus-visible{outline:2px solid var(--purple-400);outline-offset:3px;border-radius:4px}

.wrap{width:min(1180px,100% - var(--gut)*2);margin-inline:auto}
.wrap--narrow{width:min(760px,100% - var(--gut)*2)}
.sec{padding-block:var(--sec-y);position:relative}
.skip{position:absolute;left:-9999px;top:0;padding:12px 18px;background:var(--purple-500);z-index:120;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ── shared type ─────────────────────────────────────────────── */
.eyebrow{
  display:flex;align-items:center;gap:10px;margin:0 0 22px;
  font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--purple-400);
}
.eyebrow .idx{
  display:inline-grid;place-items:center;min-width:26px;height:22px;padding-inline:6px;
  border:1px solid var(--purple-800);border-radius:var(--r-full);color:var(--purple-300);
  background:var(--purple-900);letter-spacing:.06em;
}
.h2{
  margin:0 0 26px;font-weight:800;letter-spacing:-.035em;line-height:.98;
  font-size:clamp(34px,6.4vw,72px);
}
.h2--c{text-align:center}
.v{color:var(--purple-400)}
.lede{max-width:56ch;margin:0 0 46px;font-size:clamp(16px,1.9vw,19px);color:var(--ink-2);line-height:1.62}
.lede--c{margin-inline:auto;text-align:center}
.fine{margin:26px 0 0;font:400 12.5px/1.6 var(--mono);color:var(--ink-3);max-width:60ch}

.dot{width:8px;height:8px;border-radius:var(--r-full);flex:0 0 auto;display:inline-block}
.dot--green{background:var(--green)}
.dot--amber{background:var(--amber)}
.dot--grey{background:var(--grey)}
.dot--violet{background:var(--purple-400)}

/* ── flags ───────────────────────────────────────────────────── */
/* Drawn as SVG symbols (#f-* in the markup) so the stripes and discs stay
   correct at every size. The previous version positioned them with fixed
   pixel offsets tuned for 22x16, so every other size came out misaligned. */
.flag{width:21px;height:14px;border-radius:3px;display:block;flex:0 0 auto;overflow:hidden}

/* ── starfield + chrome ──────────────────────────────────────── */
.starfield{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main,.nav,.foot,.marquee{position:relative;z-index:2}

.scroll-progress{
  position:fixed;left:0;top:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--purple-500);z-index:100;pointer-events:none;box-shadow:var(--glow-v);
}
.cursor{
  position:fixed;top:0;left:0;width:26px;height:26px;border-radius:var(--r-full);z-index:99;
  border:1px solid rgba(139,92,246,.55);pointer-events:none;opacity:0;
  transition:opacity .3s,width .25s var(--ease),height .25s var(--ease),background .25s;
  transform:translate(-50%,-50%);will-change:transform;
}
.cursor.is-on{opacity:1}
.cursor.is-hot{width:52px;height:52px;background:rgba(139,92,246,.13);border-color:rgba(139,92,246,.8)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ── intro ───────────────────────────────────────────────────── */
.intro{position:fixed;inset:0;z-index:200;background:var(--space);display:grid;place-items:center;animation:introFailsafe .4s linear 4.5s forwards}
@keyframes introFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
.intro.is-gone{pointer-events:none}
.intro__inner{text-align:center;transition:opacity .5s,transform .7s var(--ease)}
.intro__mark{width:64px;height:64px;color:var(--purple-400);margin:0 auto 22px;filter:drop-shadow(0 0 26px rgba(124,77,255,.5));
  animation:spinUp 1.5s var(--ease) forwards}
.intro__word{font-size:38px;font-weight:800;letter-spacing:-.035em;display:flex;gap:.28em;justify-content:center}
.intro__word span{opacity:0;transform:translateY(14px);animation:up .6s var(--ease) forwards}
.intro__word span:nth-child(1){animation-delay:.28s}
.intro__word span:nth-child(2){animation-delay:.4s;color:var(--purple-400)}
.intro__tag{margin-top:12px;font:500 11px/1 var(--mono);letter-spacing:.22em;color:var(--ink-3);
  opacity:0;animation:up .6s var(--ease) .6s forwards}
.intro__curtain{position:absolute;inset:0;background:var(--void);transform:translateY(100%)}
.intro.is-out .intro__inner{opacity:0;transform:translateY(-18px) scale(.97)}
.intro.is-out .intro__curtain{transform:translateY(0);transition:transform .8s var(--ease) .18s}
@keyframes spinUp{from{transform:rotate(-190deg) scale(.5);opacity:0}to{transform:rotate(0) scale(1);opacity:1}}
@keyframes up{to{opacity:1;transform:none}}

/* ── nav ─────────────────────────────────────────────────────── */
/* the transform transition belongs on the base rule: when it lived only on
   .is-hidden, removing the class removed the transition with it and the bar
   snapped back instead of sliding */
.nav{position:fixed;inset:0 0 auto;z-index:90;will-change:transform;
  transition:background .35s,border-color .35s,backdrop-filter .35s,transform .4s var(--ease)}
.nav.is-stuck{background:rgba(8,11,20,.72);backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--line)}
.nav.is-hidden{transform:translateY(-105%)}
.nav__in{width:min(1180px,100% - var(--gut)*2);margin-inline:auto;height:70px;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand__mark{width:24px;height:24px;color:var(--purple-400);transition:transform .8s var(--ease)}
.brand:hover .brand__mark{transform:rotate(140deg)}
.brand__word{font-size:19px;font-weight:800;letter-spacing:-.03em;margin:0}
.nav__links{display:flex;gap:26px;margin-left:auto;font-size:14.5px;color:var(--ink-2)}
.nav__links a{position:relative;padding-block:4px;transition:color .2s}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--purple-400);transition:right .35s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after,.nav__links a.is-on::after{right:0}
.nav__right{display:flex;align-items:center;gap:14px;margin-left:auto}
.nav__links+.nav__right{margin-left:0}
.lang{display:flex;align-items:center;gap:5px;font:500 12px/1 var(--mono);color:var(--ink-3)}
.lang button{background:none;border:0;padding:4px 2px;cursor:pointer;color:inherit;transition:color .2s}
.lang button.is-on{color:var(--purple-400)}
.lang button:hover{color:var(--ink)}
.lang__sep{opacity:.4}

.burger{display:none;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--surf);cursor:pointer;padding:0;place-items:center}
.burger i{display:block;width:15px;height:1.5px;background:var(--ink);transition:transform .35s var(--ease),opacity .2s}
.burger i+i{margin-top:4px}
.burger[aria-expanded="true"] i:first-child{transform:translateY(2.75px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-2.75px) rotate(-45deg)}

.menu{position:fixed;inset:70px 0 auto;z-index:89;background:rgba(8,11,20,.97);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);padding:20px var(--gut) 34px;display:none;flex-direction:column;gap:4px}
.menu.is-open{display:flex}
.menu a{padding:13px 0;font-size:20px;font-weight:600;letter-spacing:-.02em;border-bottom:1px solid var(--line-2);
  opacity:0;transform:translateY(10px);animation:up .45s var(--ease) forwards}
.menu a:nth-child(1){animation-delay:.04s}.menu a:nth-child(2){animation-delay:.08s}
.menu a:nth-child(3){animation-delay:.12s}.menu a:nth-child(4){animation-delay:.16s}
.menu a:nth-child(5){animation-delay:.2s}.menu a:nth-child(6){animation-delay:.24s}
.menu__cta{color:var(--purple-400);border-bottom:0!important;animation-delay:.28s!important}

/* ── buttons ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:9px 17px;border-radius:var(--r-full);
  background:var(--purple-500);color:#fff;font-size:14px;font-weight:600;white-space:nowrap;
  transition:background .2s,box-shadow .3s;
}
.btn:hover{background:var(--purple-600);box-shadow:var(--glow-v)}

/* the app's 3D push button: raised Face over a solid Purple/800 Base,
   the face drops 6px onto the base on press. */
.push{background:none;border:0;padding:0 0 6px;cursor:pointer;position:relative;border-radius:var(--r-full);
  background-color:var(--purple-800);flex:0 0 auto;-webkit-tap-highlight-color:transparent}
.push__face{
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:var(--purple-500);border-radius:var(--r-full);color:#fff;font-weight:600;
  transform:translateY(0);transition:transform .12s var(--ease-io),background .18s;
}
.push:hover .push__face{background:#7A34E8}
.push:active .push__face{transform:translateY(6px);background:var(--purple-600)}
.push svg{width:17px;height:17px;transition:transform .3s var(--ease)}
.push:hover svg{transform:translateX(3px)}
.push--sm .push__face{height:46px;padding-inline:20px;font-size:14.5px}
.push--lg{width:100%;max-width:342px;margin-inline:auto;display:block}
.push--lg .push__face{height:52px;font-size:16px}
.push[disabled]{opacity:.55;cursor:progress}

/* ── hero ────────────────────────────────────────────────────── */
.hero{min-height:100svh;display:grid;align-items:center;padding-block:120px 90px;position:relative;overflow:hidden}
.hero__in{position:relative;z-index:3;max-width:900px}
.hero__h1{
  margin:0 0 28px;font-weight:800;letter-spacing:-.045em;line-height:.94;
  font-size:clamp(46px,10.5vw,124px);
}
.hero__sub{max-width:53ch;margin:0 0 40px;font-size:clamp(16px,2vw,19.5px);color:var(--ink-2);line-height:1.6}
.hero__proof{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:14px;color:var(--ink-3)}
.hero__proof[hidden]{display:none}
.hero__proof b{color:var(--ink);font-variant-numeric:tabular-nums}
.hero__cue{position:absolute;left:50%;bottom:30px;translate:-50% 0;width:20px;height:32px;border:1.5px solid var(--line);border-radius:var(--r-full);display:grid;justify-items:center;padding-top:6px}
.hero__cue span{width:3px;height:6px;border-radius:2px;background:var(--purple-400);animation:cue 1.9s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}30%{opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}

/* floating flat posters */
.hero__posters{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero__posters img{
  position:absolute;display:block;border-radius:9px;object-fit:cover;
  box-shadow:var(--e3);opacity:0;translate:0 26px;scale:.9;
  animation:posterIn .9s var(--ease) var(--pd) forwards,
            float var(--ft,9s) ease-in-out var(--pd) infinite;
}
@keyframes posterIn{to{opacity:var(--po,.72);translate:0 0;scale:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--fy,-14px))}}

/* ── email capture ───────────────────────────────────────────── */
.capture{max-width:560px}
.capture__field{
  display:flex;align-items:center;gap:8px;padding:6px;border-radius:var(--r-full);
  background:var(--purple-900);border:1px solid var(--purple-800);
  transition:border-color .25s,box-shadow .35s;
}
.capture__field:focus-within{border-color:var(--purple-500);box-shadow:var(--glow-v)}
.capture__field input{
  flex:1 1 auto;min-width:0;background:none;border:0;outline:none;padding:0 8px 0 18px;height:46px;font-size:15.5px;
}
.capture__field input::placeholder{color:var(--ink-3)}
.capture__note{margin:14px 0 0;font-size:13px;color:var(--ink-3)}
.capture__note--c{text-align:center}
.capture__msg{margin:12px 0 0;font-size:13.5px;min-height:1.2em;color:var(--amber)}
.capture__msg.is-ok{color:var(--green)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── marquee ─────────────────────────────────────────────────── */
.marquee{border-block:1px solid var(--line-2);padding-block:20px;overflow:hidden;background:rgba(8,11,20,.5)}
.marquee__track{display:flex;gap:52px;width:max-content;animation:slide 42s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:600;color:var(--ink-2);letter-spacing:-.01em;white-space:nowrap}
.marquee__track img{width:28px;height:28px;border-radius:7px;object-fit:cover;flex:0 0 auto}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── the hunt ────────────────────────────────────────────────── */
.hunt{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,3vw,34px);align-items:stretch;margin-top:8px}
.hunt__col{background:var(--surf);border:1px solid var(--line);border-radius:var(--r-card);padding:20px}
.hunt__col--new{border-color:var(--purple-800);background:rgba(29,14,53,.5);display:flex;flex-direction:column}
.hunt__col--new .hunt__answer{margin:auto 0}
.hunt__head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;
  font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.hunt__timer{color:var(--red);font-variant-numeric:tabular-nums}
.hunt__timer--fast{color:var(--green)}
.hunt__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hunt__list li{
  display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid transparent;font-size:14.5px;
  opacity:.32;transition:opacity .3s,border-color .3s,background .3s;
}
.hunt__list li.is-active{opacity:1;border-color:var(--line);background:var(--surf-2)}
.hunt__list li.is-done{opacity:.6}
.hunt__list li.is-hit{opacity:1;border-color:rgba(74,222,140,.35);background:rgba(74,222,140,.07)}
.hunt__list .svc{width:26px;height:26px;border-radius:7px}
.hunt__name{font-weight:500}
.hunt__list .verdict{margin-left:auto;font:500 11.5px/1 var(--mono);letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
.hunt__list li.is-hit .verdict{color:var(--green)}
.hunt__list .spin{width:13px;height:13px;border:1.5px solid var(--line);border-top-color:var(--purple-400);border-radius:50%;margin-left:auto;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.hunt__vs{align-self:center;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-full);background:var(--space)}
.hunt__answer{display:grid;gap:10px}
.hunt__query{display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:var(--r-full);
  background:var(--purple-900);border:1px solid var(--purple-800);font-size:14.5px;min-height:48px}
.hunt__query svg{width:17px;height:17px;color:var(--purple-300);flex:0 0 auto}
.caret{width:1.5px;height:16px;background:var(--purple-400);display:inline-block;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hunt__result{display:flex;align-items:center;gap:11px;padding:14px 16px;border-radius:10px;
  background:rgba(74,222,140,.07);border:1px solid rgba(74,222,140,.3);font-size:14.5px;
  opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.hunt.is-solved .hunt__result{opacity:1;transform:none}
.hunt__result-txt span{color:var(--ink-2)}
.hunt__result .svc{width:26px;height:26px}
.hunt__result .dot{margin-left:auto}

/* ── how it works · sticky phone ─────────────────────────────── */
.how__stage{margin-top:40px}
.how__grid{display:grid;grid-template-columns:1fr minmax(300px,340px);gap:clamp(30px,6vw,90px);align-items:start}
.how__steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(140px,26vh,260px);padding-block:14vh 34vh}
.how__step{opacity:.28;transition:opacity .5s var(--ease),transform .5s var(--ease);transform:translateY(6px)}
.how__step.is-on{opacity:1;transform:none}
.how__num{font:500 11.5px/1 var(--mono);letter-spacing:.14em;color:var(--purple-400);display:block;margin-bottom:14px}
.how__step h3{margin:0 0 12px;font-size:clamp(23px,3.2vw,33px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.how__step p{margin:0;color:var(--ink-2);max-width:44ch;font-size:16px}
.how .phone{position:sticky;top:calc(50svh - 320px)}

/* ── phone shell ─────────────────────────────────────────────── */
/* The mock is authored at the app's real 390x844 and scaled down to fit, so
   its proportions are identical at every size instead of reflowing and
   breaking. --ps is (--pw - 22px) / 390, the 22px being the frame's padding
   and border; change the two together. */
.phone{--pw:340px;--ps:.8154;width:100%;max-width:var(--pw);margin-inline:auto}
.phone__frame{
  position:relative;border-radius:44px;padding:10px;background:#15121F;
  border:1px solid rgba(255,255,255,.12);box-shadow:var(--e3),0 0 60px rgba(124,77,255,.18);
}
.phone__frame::after{content:"";position:absolute;left:50%;top:10px;translate:-50% 0;width:96px;height:24px;background:#15121F;border-radius:0 0 14px 14px;z-index:4}
.phone__viewport{position:relative;aspect-ratio:390/844;border-radius:34px;
  overflow:hidden;background:var(--space)}
.phone__screen{
  position:absolute;top:0;left:0;width:390px;height:844px;font-size:13px;
  transform:scale(var(--ps));transform-origin:top left;
}

/* live app UI (a faithful rebuild of the real screens, so it can animate) */
.ui-status{display:flex;justify-content:space-between;align-items:center;padding:13px 22px 4px;font-size:12.5px;font-weight:600}
.ui-status__r{display:flex;gap:3px;align-items:flex-end}
.ui-status__r i{width:3px;background:var(--ink);border-radius:1px}
.ui-status__r i:nth-child(1){height:6px}.ui-status__r i:nth-child(2){height:9px}.ui-status__r i:nth-child(3){height:12px}
.ui{position:absolute;inset:34px 0 66px;padding:8px 18px 0;opacity:0;transform:translateY(12px) scale(.99);
  transition:opacity .45s var(--ease),transform .55s var(--ease);pointer-events:none;overflow:hidden}
.ui.is-on{opacity:1;transform:none}
.ui-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.ui-head h4{margin:0;font-size:23px;font-weight:800;letter-spacing:-.03em}
.ui-head--back h4{font-size:15.5px;font-weight:600}
.ui-head .back{color:var(--ink);font-size:22px;line-height:1;margin-right:2px}
.ui-head--back{justify-content:flex-start}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 9px 5px 8px;border-radius:var(--r-full);
  background:var(--purple-900);border:1px solid var(--purple-800);font-size:11.5px;font-weight:500}
.chip::after{content:"⌄";font-size:11px;opacity:.7;margin-top:-4px}
.ui-field{display:flex;align-items:center;gap:9px;height:42px;padding:0 14px;border-radius:var(--r-full);
  background:var(--purple-900);border:1px solid var(--purple-800);color:var(--ink);font-size:13.5px;margin-bottom:14px}
.ui-field svg{width:15px;height:15px;color:var(--purple-300);flex:0 0 auto}
.ui-field .caret{height:14px}
.ui-label{margin:0 0 8px;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.ui-label--green{color:var(--green);display:flex;align-items:center;gap:6px;margin-top:14px}
.ui-label--amber{color:var(--amber);margin-top:14px}
.ui-label--violet{color:var(--purple-400);margin-top:14px}
.ui-label--green::before,.ui-label--amber::before,.ui-label--violet::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.ui-label--amber,.ui-label--violet{display:flex;align-items:center;gap:6px}
.ui-row{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:13.5px;color:var(--ink-2)}
.ui-row__i{width:15px;height:15px;color:var(--ink-3);flex:0 0 auto}
.ui-title{margin:2px 0 14px;font-size:21px;font-weight:800;letter-spacing:-.03em}
.ui-hit{display:flex;align-items:center;gap:11px;padding:8px 0}
.ui-hit img{width:34px;height:51px;border-radius:5px;object-fit:cover;flex:0 0 auto}
.ui-hit div{display:grid;line-height:1.3;min-width:0}
.ui-hit b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-hit span{font-size:11.5px;color:var(--ink-3)}
.ui-hit .dot{margin-left:auto}
.ui-av{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;
  background:var(--surf);border:1px solid var(--line);margin-bottom:7px}
.ui-av--on{border-color:rgba(74,222,140,.3);background:rgba(74,222,140,.06)}
.ui-av b{font-size:13.5px;font-weight:600}
.ui-av .flag{width:27px;height:18px}
.svc{width:28px;height:28px;border-radius:7px;flex:0 0 auto;object-fit:cover;display:block}
.pill{margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--r-full);
  font-size:11.5px;font-weight:600;background:var(--purple-900);border:1px solid var(--purple-800);color:var(--ink-2)}
.pill img{width:16px;height:16px;border-radius:4px;object-fit:cover;flex:0 0 auto}
.pill--go{background:var(--purple-500);border-color:var(--purple-500);color:#fff}
.pill--ok{background:rgba(74,222,140,.1);border-color:rgba(74,222,140,.35);color:var(--green)}
.ui-fine{margin:14px 0 0;font:400 10px/1.5 var(--mono);color:var(--ink-3)}
.ui-tabs{position:absolute;left:0;right:0;bottom:16px;height:50px;display:grid;grid-template-columns:repeat(4,1fr);
  align-items:center;border-top:1px solid var(--line-2);padding-top:8px;background:var(--space)}
.ui-tabs span{display:grid;justify-items:center;gap:3px;font-size:9.5px;color:var(--ink-3)}
.ui-tabs span.is-on{color:var(--purple-400)}
.ui-tabs svg{width:19px;height:19px}
.ui-hi{position:absolute;left:50%;bottom:7px;translate:-50% 0;width:110px;height:4px;border-radius:2px;background:rgba(255,255,255,.3)}

/* ── regions ─────────────────────────────────────────────────── */
.regions{display:grid;gap:9px;max-width:560px}
.regions__row{
  display:flex;align-items:center;gap:13px;padding:15px 17px;border-radius:var(--r-card);
  background:var(--surf);border:1px solid var(--line);font-size:15.5px;
  opacity:0;transform:translateX(-16px);
}
.regions.is-in .regions__row{animation:slideIn .6s var(--ease) forwards;animation-delay:calc(var(--d) * .11s)}
@keyframes slideIn{to{opacity:1;transform:none}}
.regions__row .flag{width:27px;height:18px}
.regions__row b{font-weight:600}
.regions__row .pill{font-size:13px;padding:7px 14px 7px 8px}
.regions__row .pill img{width:20px;height:20px;border-radius:5px}

/* ── waitlist form ───────────────────────────────────────────── */
.sec--wait{position:relative}
.sec--wait::before{content:"";position:absolute;left:50%;top:22%;translate:-50% 0;width:min(620px,88vw);aspect-ratio:1;
  border-radius:50%;background:var(--purple-600);opacity:.12;filter:blur(120px);pointer-events:none}
.wait{display:grid;gap:26px;margin-top:44px;position:relative}
.fld{display:grid;gap:11px;border:0;padding:0;margin:0;min-width:0}
.fld__lab{font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:0}
.fld__lab em{font-style:normal;opacity:.6;text-transform:none;letter-spacing:.04em}
.wait input[type=email]{
  height:52px;padding:0 18px;border-radius:12px;background:var(--purple-900);border:1px solid var(--purple-800);
  outline:none;font-size:15.5px;transition:border-color .25s,box-shadow .35s;width:100%;
}
.wait input[type=email]:focus{border-color:var(--purple-500);box-shadow:var(--glow-v)}
.wait input::placeholder{color:var(--ink-3)}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.opt span{display:grid;place-items:center;text-align:center;min-height:56px;padding:12px 10px;border-radius:12px;
  background:var(--surf);border:1px solid var(--line);font-size:14px;cursor:pointer;
  transition:border-color .2s,background .2s,color .2s}
.opt input:hover+span{border-color:var(--purple-800)}
.opt input:checked+span{border-color:var(--purple-500);background:rgba(109,40,217,.16);color:var(--ink)}
.opt input:focus-visible+span{outline:2px solid var(--purple-400);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chipbox{position:relative}
.chipbox input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.chipbox span{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:var(--r-full);
  background:var(--surf);border:1px solid var(--line);font-size:13.5px;cursor:pointer;color:var(--ink-2);
  transition:border-color .2s,background .2s,color .2s}
.chipbox input:checked+span{border-color:var(--purple-500);background:rgba(109,40,217,.16);color:var(--ink)}
.chipbox input:focus-visible+span{outline:2px solid var(--purple-400);outline-offset:2px}
.chipbox img{width:19px;height:19px;border-radius:5px;object-fit:cover;flex:0 0 auto}

.done{text-align:center;padding:56px 0;opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.done.is-in{opacity:1;transform:none}
.done__mark{width:56px;height:56px;color:var(--purple-400);margin:0 auto 22px;animation:orbit 14s linear infinite;
  filter:drop-shadow(0 0 26px rgba(124,77,255,.55))}
.done h3{margin:0 0 12px;font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.035em}
.done p{margin:0;color:var(--ink-2)}
.done__pos{margin-top:18px!important;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--purple-400)!important}

.mcta{display:none}

/* ── footer ──────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line-2);padding-block:46px;background:rgba(5,7,14,.7)}
.foot__in{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
.foot__brand{display:flex;align-items:center;gap:13px}
.foot__brand .brand__mark{width:34px;height:34px}
.foot__brand p{margin:0}
.foot__tag{font:500 9.5px/1 var(--mono);letter-spacing:.2em;color:var(--ink-3);margin-top:5px!important}
.foot__meta{max-width:48ch;text-align:right;font-size:12.5px;color:var(--ink-3);line-height:1.6}
.foot__meta p{margin:0}
.foot__made{margin-top:8px!important;opacity:.7}

/* ── reveal ──────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:calc(var(--d,0) * 70ms)}
.reveal.is-in{opacity:1;transform:none}
.word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.word>i{display:inline-block;font-style:normal;transform:translateY(105%);
  transition:transform .85s var(--ease);transition-delay:calc(var(--i) * 42ms)}
[data-split].is-in .word>i{transform:none}

/* ── responsive ──────────────────────────────────────────────── */
/* ═══ TABLET ══════════════════════════════════════════════════════
   The pinned two-column scrub has no room for a second column here, and the
   nav bar runs out of width, so both collapse. Everything else stays at its
   desktop scale: this is not a phone. */
@media (max-width:1000px){
  .nav__links{display:none}
  .nav__right{margin-left:auto}
  .burger{display:grid}
  .nav .btn{display:none}

  /* tablets are touch devices too, so these need thumb-sized hit areas */
  .brand{padding-block:7px}
  .lang{gap:3px}
  .lang button{padding:11px 7px}

  /* the sticky scrub becomes a stepper: one step at a time, indicators under
     the phone, states advancing on their own */
  .how__stage{margin-top:30px}
  .how__grid{display:block}
  .how__steps{display:block;gap:0;padding:0;margin:0 auto 24px;max-width:520px;
    min-height:176px;position:relative}
  .how__step{position:absolute;inset:0;opacity:0;pointer-events:none;transform:translateY(10px);
    transition:opacity .4s var(--ease),transform .4s var(--ease)}
  .how__step.is-on{position:relative;opacity:1;pointer-events:auto;transform:none}
  .how__step p{max-width:none}
  .how .phone{position:static;--pw:300px;--ps:.7128;margin-inline:auto}
  /* the visible indicator is 4px, but the button around it has to be thumb
     sized, so the bar is drawn in a pseudo-element inside a 40px target */
  .how__dots{display:flex;justify-content:center;gap:5px;margin-top:16px}
  .how__dots button{height:40px;padding:0 5px;border:0;background:none;cursor:pointer;
    display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
  .how__dots button::before{content:"";display:block;width:30px;height:4px;border-radius:2px;
    background:var(--line);transition:background .3s,width .3s var(--ease)}
  .how__dots button.is-on::before{background:var(--purple-400);width:48px}
}

/* ═══ PHONE ═══════════════════════════════════════════════════════ */
@media (max-width:700px){
  /* ── nav ── */
  .nav__in{height:62px}
  .brand__word{font-size:17.5px}
  .brand__mark{width:22px;height:22px}
  .menu{inset-block-start:62px}

  /* tighter vertical rhythm: the desktop scale wastes a whole screen here */
  :root{--sec-y:80px}
  .h2{font-size:clamp(32px,8.6vw,44px)}
  .lede{font-size:16.5px;margin-bottom:32px}
  .eyebrow{margin-bottom:18px}

  /* ── hero ── */
  .hero{min-height:0;padding-block:98px 40px}
  .hero__h1{font-size:clamp(42px,12.4vw,58px);margin-bottom:16px}
  .hero__sub{font-size:16.5px;line-height:1.55;margin-bottom:24px;max-width:none}
  .capture__note{margin-top:11px;font-size:12.5px}
  .hero__proof{margin-top:18px}
  .hero__cue{display:none}
  .capture__field{flex-wrap:wrap;border-radius:16px;padding:8px;gap:8px}
  .capture__field input{flex:1 1 100%;padding:0 12px;height:46px}
  .push--sm{width:100%}
  .push--sm .push__face{width:100%;height:48px}

  /* ── marquee ── */
  .marquee{padding-block:14px}
  .marquee__track{gap:26px}
  .marquee__track span{font-size:13px;gap:9px}
  .marquee__track img{width:22px;height:22px;border-radius:6px}

  /* ── the hunt ── */
  .hunt{grid-template-columns:1fr;gap:10px}
  .hunt__col{padding:16px}
  .hunt__head{margin-bottom:13px;font-size:10.5px}
  .hunt__list li{padding:10px 12px;font-size:14px;gap:10px}
  .hunt__list .svc{width:24px;height:24px}
  .hunt__vs{justify-self:center;padding:6px 12px;font-size:10px}
  .hunt__query{font-size:14px;min-height:44px}
  .hunt__result{font-size:14px;padding:12px 14px}

  /* ── how it works ── */
  .how__stage{margin-top:24px}
  .how__steps{margin-bottom:22px;min-height:186px}
  .how__num{margin-bottom:10px}
  .how__step h3{font-size:24px;margin-bottom:10px}
  .how__step p{font-size:15.5px}
  .how .phone{--pw:262px;--ps:.6154}
  .how__dots{margin-top:14px}

  /* ── regions ── */
  .regions__row{padding:13px 14px;font-size:15px;gap:11px}
  .regions__row .pill{font-size:12px;padding:6px 11px 6px 7px}
  .regions__row .pill img{width:18px;height:18px}

  /* ── waitlist ── */
  .wait{gap:22px;margin-top:34px}
  .opts{grid-template-columns:1fr;gap:8px}
  .opt span{min-height:0;padding:14px 12px;font-size:14.5px}
  .chips{gap:6px}
  .chipbox span{padding:7px 11px;font-size:12.5px;gap:6px}
  .chipbox img{width:16px;height:16px}
  .push--lg{max-width:none}
  .push--lg .push__face{height:54px}
  .done{padding:40px 0}

  /* ── footer ── */
  .foot__in{flex-direction:column;gap:22px}
  .foot__meta{text-align:left}
  .foot{padding-block:34px;padding-bottom:calc(34px + 74px)}

  /* ── sticky call to action, phones only ── */
  .mcta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:88;
    padding:11px var(--gut) calc(11px + env(safe-area-inset-bottom));
    background:rgba(8,11,20,.88);backdrop-filter:blur(16px) saturate(1.3);
    border-top:1px solid var(--line);
    transform:translateY(115%);visibility:hidden;
    transition:transform .38s var(--ease),visibility .38s}
  body.mcta-on .mcta{transform:none;visibility:visible}
  .mcta a{display:flex;align-items:center;justify-content:center;height:48px;
    border-radius:var(--r-full);background:var(--purple-500);color:#fff;
    font-weight:600;font-size:15px}
  .mcta a:active{background:var(--purple-600)}
}

@media (max-width:400px){
  :root{--gut:18px}
  .hero{padding-block:88px 34px}
  .hunt__list li{font-size:13.5px}
}

/* Landscape tablets and short laptop windows. The pinned phone is taller than
   the viewport and gets clipped at the bottom, and the poster strip pushes the
   hero well past one screen. Both shrink rather than overflow. Must sit after
   the tablet block to win on equal specificity; `top` is inert while the phone
   is static, so one rule covers both layouts. */
@media (min-width:701px) and (max-height:820px){
  .how .phone{--pw:296px;--ps:.7026;top:60px}
}

/* ── reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.regions__row{opacity:1!important;transform:none!important}
  /* keep each poster's own opacity: forcing them to 1 would bury the copy */
  .hero__posters img{opacity:var(--po,.6)!important;transform:none!important;
    translate:none!important;scale:none!important}
  .mcta{transition:none!important}
  .word>i{transform:none!important}
  .intro{display:none}
  .how__step{opacity:1}
  .cursor{display:none}
}