/* Self-hosted Geist. NOT Google Fonts, and not only for speed: the site
   ships Content-Security-Policy font-src 'self' and style-src 'self', so
   a fonts.googleapis.com stylesheet is refused outright and every weight
   silently falls back to system-ui. The design was never going to render
   as drawn from a CDN.

   One variable file per family covers 400/500/600, subset to Latin plus
   the arrows, dashes and quotes this site actually sets: 25 kB and 20 kB
   against 141 kB unsubset. font-display:swap so text paints in system-ui
   immediately and reflows once, rather than holding the first paint.

   Geist is SIL OFL 1.1 with no Reserved Font Name, so subsetting is
   permitted. The licence ships alongside at /fonts/GEIST-LICENSE.txt. */
@font-face{font-family:"Geist";src:url("/fonts/geist-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/fonts/geist-mono-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{--bg:#050807;--bg2:#0a0f0d;--ink:#f2f5f3;--ink2:rgba(242,245,243,.68);--ink3:rgba(242,245,243,.5);--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);--glass:rgba(255,255,255,.04);--g:#2fd39a;--g2:#10b981;--g-deep:#0da372;--amber:#f5b544;--pad:20px;--wrap:1200px;--ease:cubic-bezier(.16,1,.3,1);--mono:"Geist Mono",ui-monospace,monospace}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{background:var(--bg);color:var(--ink);font:400 16px/1.6 "Geist",system-ui,sans-serif;-webkit-font-smoothing:antialiased;padding-bottom:calc(84px + env(safe-area-inset-bottom));overflow-x:hidden}
body.locked{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:var(--g);text-decoration:none}a:hover{color:#8cf0c8}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
h1,h2,h3{font-weight:600;letter-spacing:-.045em;line-height:1;text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--g);outline-offset:3px;border-radius:8px}
::selection{background:var(--g);color:#04120c}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.tag{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--g);display:inline-flex;align-items:center;gap:10px}
.tag::before{content:"";width:18px;height:1px;background:currentColor}
.mono{font-family:var(--mono)}
.noise{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,footer,header{position:relative;z-index:2}
.skip{position:absolute;left:8px;top:-100px;z-index:99;background:var(--g);color:#04120c;padding:10px 14px;border-radius:10px;font-weight:600}
.skip:focus{top:8px}

/* header */
header{position:fixed;left:0;right:0;top:0;z-index:50;padding:10px 12px 0;transition:transform .5s var(--ease)}
header.away{transform:translateY(-110%)}
.bar{max-width:var(--wrap);margin:0 auto;height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 8px 0 14px;border-radius:18px;background:rgba(8,12,10,.62);border:1px solid var(--line);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:600;font-size:17px;letter-spacing:-.02em}
.brand:hover{color:var(--ink)}
.brand img{width:28px;height:28px;border-radius:7px;box-shadow:0 0 0 1px var(--line2)}
.nav-links{display:none}.btn.nav-cta{display:none}
.nav-r{display:flex;align-items:center;gap:8px}
.burger{width:44px;height:44px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.burger i{display:block;width:20px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease)}
.menu-open .burger i:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-open .burger i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.overlay{position:fixed;inset:0;z-index:45;background:rgba(5,8,7,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:96px var(--pad) 40px;display:flex;flex-direction:column;gap:4px;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.menu-open .overlay{opacity:1;visibility:visible;transition:opacity .35s}
.overlay a{color:var(--ink);font-size:40px;font-weight:600;letter-spacing:-.04em;padding:8px 0;opacity:0;transform:translateY(20px);transition:opacity .5s,transform .6s var(--ease)}
.menu-open .overlay a{opacity:1;transform:none}
.overlay a:nth-child(2){transition-delay:.04s}.overlay a:nth-child(3){transition-delay:.08s}.overlay a:nth-child(4){transition-delay:.12s}.overlay a:nth-child(5){transition-delay:.16s}
.overlay a span{font:500 13px var(--mono);color:var(--ink3);margin-right:14px;vertical-align:middle}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:14px;font-weight:600;font-size:15.5px;letter-spacing:-.01em;transition:transform .35s var(--ease),background .2s,box-shadow .3s;will-change:transform}
.btn-g{background:linear-gradient(160deg,#3ee0a6,var(--g-deep));color:#04120c;box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 10px 40px -8px rgba(47,211,154,.55)}
.btn-g:hover{color:#04120c;box-shadow:0 0 0 1px rgba(255,255,255,.3) inset,0 14px 50px -6px rgba(47,211,154,.75)}
.btn-ghost{background:var(--glass);border:1px solid var(--line2);color:var(--ink)}
.btn-ghost:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.btn small{font:500 10.5px/1 var(--mono);letter-spacing:.06em;opacity:.7;display:block;text-transform:uppercase}
.btn b{display:block;font-size:17px;line-height:1.1;font-weight:600}
.btn:active{transform:scale(.97)}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:96px;padding-bottom:48px;overflow:hidden}
#field{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(transparent,var(--bg));z-index:0;pointer-events:none}
.hero-in{position:relative;z-index:1;display:grid;gap:44px;width:100%}
.status{display:inline-flex;align-items:center;gap:10px;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);padding:8px 14px;border-radius:99px;border:1px solid var(--line2);background:rgba(5,8,7,.6);backdrop-filter:blur(8px);margin-bottom:26px}
.status i{width:7px;height:7px;border-radius:50%;background:var(--g);box-shadow:0 0 12px var(--g);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.hero h1{font-size:clamp(52px,14.5vw,128px);letter-spacing:-.06em;line-height:.92;margin-bottom:22px}
.hero h1 .g{background:linear-gradient(100deg,#8cf0c8,var(--g) 40%,var(--g-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-size:19px;color:var(--ink2);max-width:28rem;margin-bottom:30px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.specs{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 28px;margin-top:34px;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.specs b{display:block;font:600 15px "Geist";letter-spacing:-.01em;text-transform:none;color:var(--ink);margin-top:4px}

/* word reveal */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .w>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.split.in .w>span{transform:none}
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* FAILSAFE, and not a decorative one. Everything above starts at
   opacity:0 and is revealed by site.js adding .in. If site.js never
   runs (blocked, 404, threw on an old engine), the homepage is a blank
   dark rectangle with a working header and nothing else. That exact
   failure shipped here once, which is why this exists.

   So: a pure-CSS animation that reveals the same elements after 2.5s
   with no JavaScript involved. fill-mode is forwards, not backwards,
   so during the 2.5s delay the animation applies nothing at all and
   the JS-driven transition behaves exactly as designed. When JS works,
   .in lands in well under 2.5s and nobody ever sees this fire.

   prefers-reduced-motion kills all animation, but that block sets
   opacity:1 on these elements outright, so it needs no failsafe. */
@keyframes failsafe-reveal{to{opacity:1;transform:none}}
[data-reveal],.split .w>span{animation:failsafe-reveal .01s linear 2.5s forwards}

/* demo */
.poster{position:relative;display:block;width:100%;max-width:440px;border-radius:28px;overflow:hidden;border:1px solid var(--line2);background:radial-gradient(120% 70% at 50% 0%,#12382a,#0a1812 55%,#070d0a);text-align:left}
.poster img{width:100%;aspect-ratio:786/1100;object-fit:cover;object-position:50% 12%}
.poster::after{content:"";position:absolute;inset:auto 0 0;height:60%;background:linear-gradient(transparent,rgba(5,8,7,.95));pointer-events:none}
.poster .play{position:absolute;left:14px;right:14px;bottom:14px;z-index:1;display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid var(--line2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.poster .play i{width:46px;height:46px;border-radius:50%;background:var(--g);color:#04120c;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 24px rgba(47,211,154,.6)}
.poster .play strong{display:block;font:600 17px "Geist",system-ui,sans-serif;text-transform:none;letter-spacing:-.01em}
.poster .play span span{display:block;font:500 11.5px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);margin-top:2px}
.inline-demo{display:none}
.stage{position:relative;border-radius:40px;padding:26px 0 6px;border:1px solid var(--line);background:radial-gradient(90% 60% at 50% 0%,rgba(47,211,154,.16),transparent 70%),rgba(255,255,255,.02);transform-style:preserve-3d;transition:transform .8s var(--ease)}
.stage::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--a,0deg),transparent 0 70%,rgba(47,211,154,.9) 80%,transparent 90%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite;pointer-events:none}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
.stage iframe{display:block;width:100%;height:clamp(520px,calc(100svh - 200px),880px);border:0;background:transparent;color-scheme:dark}
.demo-hint{display:flex;justify-content:space-between;margin-bottom:14px;font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.demo-hint b{color:var(--g);font-weight:500;display:flex;align-items:center;gap:8px}
.demo-hint b i{width:6px;height:6px;border-radius:50%;background:var(--g);animation:pulse 2.4s infinite}

.sheet{position:fixed;inset:0;z-index:100;background:#060807;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(30px) scale(.98);transition:opacity .3s,transform .5s var(--ease),visibility 0s .5s}
.sheet.open{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .5s var(--ease)}
.sheet-bar{display:flex;align-items:center;justify-content:space-between;padding:calc(8px + env(safe-area-inset-top)) 12px 8px 18px;flex-shrink:0}
.sheet-bar b{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.sheet-bar b i{width:7px;height:7px;border-radius:50%;background:var(--g)}
.x{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center}
.sheet iframe{flex:1;width:100%;border:0;background:#0a0b0d;color-scheme:dark}
.sheet .foot{flex-shrink:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--ink3)}
.sheet .foot a{background:var(--g);color:#04120c;border-radius:99px;padding:10px 16px;font-weight:600;font-size:14px;white-space:nowrap}

/* sections */
section{position:relative;padding:96px 0}
.head{max-width:44rem;margin-bottom:40px}
.head h2{font-size:clamp(40px,10.5vw,84px);margin-top:18px;letter-spacing:-.055em}
.head p{color:var(--ink2);font-size:18px;margin-top:20px;max-width:34rem}
.dim{color:var(--ink3)}

/* guess game */
.game{position:relative;border-radius:28px;border:1px solid var(--line2);background:radial-gradient(80% 60% at 50% 0%,rgba(47,211,154,.12),transparent 70%),var(--bg2);overflow:hidden}
.game-top{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.game-top .dots{display:flex;gap:6px}.game-top .dots i{width:22px;height:3px;border-radius:2px;background:var(--line2);transition:background .4s}.game-top .dots i.on{background:var(--g)}
.game-body{padding:28px 20px 24px;display:grid;gap:24px}
.meal-name{font-size:clamp(26px,6vw,40px);font-weight:600;letter-spacing:-.035em;line-height:1.1}
.meal-desc{color:var(--ink2);margin-top:10px;font-size:15.5px}
.readout{display:flex;align-items:baseline;justify-content:center;gap:10px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.readout b{font-size:clamp(72px,20vw,120px);font-weight:500;letter-spacing:-.06em;line-height:1}
.readout span{font-size:15px;color:var(--ink3);text-transform:uppercase;letter-spacing:.08em}
.ruler-row{display:flex;align-items:center;gap:10px}
.pm{width:48px;height:48px;border-radius:14px;border:1px solid var(--line2);background:var(--glass);font-size:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background .2s}
.pm:hover{background:rgba(255,255,255,.08)}
.ruler{position:relative;flex:1;height:64px;overflow:hidden;touch-action:none;cursor:ew-resize;user-select:none;-webkit-user-select:none;border-radius:12px;-webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.ticks{position:absolute;left:50%;top:0;bottom:0;display:flex;align-items:flex-end;padding-bottom:10px;will-change:transform}
.ticks i{width:12px;flex-shrink:0;display:flex;justify-content:center}
.ticks i::before{content:"";width:1.5px;height:12px;background:var(--ink3);opacity:.45;border-radius:1px}
.ticks i.major::before{height:26px;opacity:.9}
.needle{position:absolute;left:50%;top:6px;bottom:6px;width:2px;margin-left:-1px;background:var(--g);box-shadow:0 0 14px var(--g);border-radius:2px}
.ruler:focus-visible{outline-offset:-2px}
.game .btn{width:100%}
.game .btn[hidden]{display:none}
.hint-line{text-align:center;font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.play-ui{display:grid;gap:20px}
.result{display:none}
.game.revealed .result{display:grid;gap:18px}
.game.revealed .play-ui{display:none}
.verdict{font:500 13px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.delta{font-family:var(--mono);font-size:clamp(64px,18vw,112px);font-weight:500;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vs div{border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:var(--glass)}
.vs small{display:block;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.vs b{display:block;font:500 28px var(--mono);letter-spacing:-.04em;margin-top:6px;font-variant-numeric:tabular-nums}
.hid{border-top:1px solid var(--line);padding-top:14px}
.hid h4{font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px}
.hid div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink2)}
.hid div:last-child{border-bottom:0}
.hid div.dense{color:var(--ink);font-weight:600}.hid div.dense span:last-child{color:var(--amber)}
.hid span:last-child{font-family:var(--mono)}
.bars{display:flex;align-items:flex-end;gap:6px;height:44px}
.bars i{flex:1;border-radius:4px;background:var(--g);transform-origin:bottom;transform:scaleY(0);transition:transform .9s var(--ease)}
.game.revealed .bars i{transform:scaleY(1)}

/* story (pinned) */
.story-steps{display:grid;gap:64px}
.sstep h3{font-size:clamp(32px,8vw,56px);letter-spacing:-.05em;margin:16px 0 16px}
.sstep p{color:var(--ink2);font-size:17px;max-width:28rem}
.sstep .shot{margin-top:28px;max-width:300px}
.shot{border-radius:44px;overflow:hidden;border:1px solid var(--line);background:#0a0d0c;max-width:420px}
.shot img{width:100%;aspect-ratio:786/1704;object-fit:cover}
.pin{display:none}

/* quote */
.quote-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--bg),var(--bg2))}
.qgrid{display:grid;gap:36px}
.qphoto{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/4.2;border:1px solid var(--line)}
.qphoto img{width:100%;height:100%;object-fit:cover;object-position:30% 40%;filter:saturate(.85) contrast(1.05)}
.qphoto figcaption{position:absolute;left:12px;bottom:12px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:8px;background:rgba(5,8,7,.7);backdrop-filter:blur(8px);color:var(--ink2)}
.scrub{font-size:clamp(24px,5.6vw,40px);line-height:1.3;letter-spacing:-.03em;font-weight:500;margin-top:20px}
.scrub p+p{margin-top:.8em}
.scrub .sw{color:var(--ink);opacity:.18;transition:opacity .25s}
.scrub .sw.lit{opacity:1}
.scrub .sw.hl.lit{color:var(--g)}
.who{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:36px;padding-top:22px;border-top:1px solid var(--line)}
.who strong{display:block;font-size:17px;font-weight:600}.who span{font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.arrowlink{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;min-height:44px}
.arrowlink svg{transition:transform .3s var(--ease)}.arrowlink:hover{color:var(--g)}.arrowlink:hover svg{transform:translateX(4px)}

/* final */
.final{text-align:center;padding:120px 0 96px;overflow:hidden}
.final::before{content:"";position:absolute;left:50%;top:40%;width:900px;height:900px;margin:-450px 0 0 -450px;background:radial-gradient(closest-side,rgba(47,211,154,.18),transparent);pointer-events:none}
.ico{position:relative;width:112px;height:112px;margin:0 auto 40px;border-radius:26px;overflow:hidden;box-shadow:0 0 0 1px var(--line2),0 30px 80px -10px rgba(0,0,0,.8),0 0 90px -10px rgba(47,211,154,.5)}
.ico img{position:absolute;inset:0;width:100%;height:100%}
.ico .base{opacity:.22}
.ico .fill{clip-path:inset(100% 0 0 0);mix-blend-mode:screen;transition:clip-path 1.6s cubic-bezier(.5,0,.2,1) .2s}
.ico .edge{position:absolute;inset:0;background:linear-gradient(to top,transparent 46%,rgba(47,211,154,.9) 50%,transparent 54%);opacity:0;transform:translateY(50%)}
.ico.in .fill{clip-path:inset(0)}
.ico.in .edge{animation:edge 1.6s cubic-bezier(.5,0,.2,1) .2s both}
@keyframes edge{0%{opacity:0;transform:translateY(50%)}12%,88%{opacity:1}100%{opacity:0;transform:translateY(-50%)}}
.final h2{font-size:clamp(40px,10.5vw,96px);letter-spacing:-.06em;max-width:13ch;margin:0 auto 24px}
.final p{color:var(--ink2);max-width:34rem;margin:0 auto 36px}
.final .actions{justify-content:center}

footer{border-top:1px solid var(--line);padding:48px 0 32px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:32px 24px}
.fgrid>div:first-child{grid-column:1/-1}
.fgrid p{color:var(--ink3);font-size:15px;margin-top:12px}
.fgrid h4{font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.fgrid ul{list-style:none}
.fgrid ul a{display:block;padding:6px 0;color:var(--ink2);font-size:15px}.fgrid ul a:hover{color:var(--ink)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.legal a{color:var(--ink3)}
.bigword{font-size:clamp(80px,26vw,340px);font-weight:600;letter-spacing:-.07em;line-height:.8;margin-top:48px;background:linear-gradient(180deg,rgba(242,245,243,.14),rgba(242,245,243,0) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;text-align:center}

.dock{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;display:flex;gap:8px;padding:8px;border-radius:20px;background:rgba(8,12,10,.8);border:1px solid var(--line2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:transform .5s var(--ease),opacity .3s}
.dock.hide{transform:translateY(140%);opacity:0}
.dock .btn{flex:1;min-height:50px;padding:0 16px}
.dock .btn-ghost{flex:0 0 auto}

/* spotlight cards */
.spot{--mx:50%;--my:50%}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(400px circle at var(--mx) var(--my),rgba(47,211,154,.1),transparent 45%);opacity:0;transition:opacity .3s}
.spot:hover::after{opacity:1}

@media (min-width:640px){
:root{--pad:32px}
.fgrid{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}
.fgrid>div:first-child{grid-column:auto}
.game-body{padding:36px 36px 32px}
.qphoto{max-width:460px}
}
@media (min-width:980px){
body{font-size:17px;padding-bottom:0}
header{padding-top:14px}
.burger,.overlay{display:none}
.nav-links{display:flex;gap:4px}
.nav-links a{color:var(--ink2);font-size:14.5px;font-weight:500;padding:8px 14px;border-radius:10px;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.btn.nav-cta{display:inline-flex;min-height:40px;padding:0 16px;border-radius:11px;font-size:14.5px}
.nav-r{display:flex;align-items:center;gap:12px}
.hero-in{grid-template-columns:minmax(0,1fr) 470px;gap:64px;align-items:center}
.sub{font-size:21px}
.poster{display:none}
.inline-demo{display:block}
.dock{display:none}
section{padding:150px 0}
.head{margin-bottom:64px}
.game{display:grid;grid-template-columns:1fr 1fr}
.game-top{grid-column:1/-1}
.game-body{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;padding:48px}
.game-body .meal{align-self:start}
.story{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:96px}
.story-steps{gap:0}
.sstep{min-height:90vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .6s}
.sstep.on{opacity:1}
.sstep .shot{display:none}
.pin{display:block;position:sticky;top:max(90px,calc(50vh - 380px));align-self:start}
.pin .shot{position:relative;max-width:none;width:min(100%,calc(80vh * .461));aspect-ratio:786/1704;margin:0 auto}
.pin .shot img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;opacity:0;transform:scale(1.04);transition:opacity .8s var(--ease),transform 1.2s var(--ease)}
.pin .shot img.on{opacity:1;transform:none}
.pin .prog{position:absolute;right:-28px;top:0;bottom:0;width:2px;background:var(--line)}
.pin .prog i{position:absolute;left:0;top:0;width:100%;height:0;background:var(--g);box-shadow:0 0 10px var(--g)}
.pin .count{position:absolute;left:18px;top:18px;z-index:2;font:500 12px var(--mono);letter-spacing:.08em;color:var(--ink2);padding:7px 10px;border-radius:8px;background:rgba(5,8,7,.6);backdrop-filter:blur(8px)}
.qgrid{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:80px;align-items:center}
.qphoto{aspect-ratio:4/5}
.final{padding:180px 0 140px}
footer{padding:72px 0 40px}
}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
.split .w>span,[data-reveal]{transform:none;opacity:1}
.scrub .sw{opacity:1}
.ico .fill{clip-path:none}
}

/* 980 to 1199: the two-column hero fits, but only just. At 1024 the
   left column is 426px and the headline is still at its 128px cap, so
   "Just say what you ate." breaks one word per line and runs five deep.
   Narrow the demo column and scale the headline to the viewport instead
   of letting it sit at the cap. */
@media (min-width:980px) and (max-width:1199px){
.hero-in{grid-template-columns:minmax(0,1fr) 380px;gap:40px}
.hero h1{font-size:clamp(52px,8.6vw,104px)}
.sub{font-size:19px}
}

/* Short viewports. 1366x768 and 1024x768 are still everywhere, and the
   hero is laid out for 900. Trim the vertical padding so the CTA and the
   spec row stay above the fold rather than being the first thing the
   visitor has to scroll for. */
@media (min-width:980px) and (max-height:820px){
.hero{padding-top:84px;padding-bottom:32px}
.hero h1{margin-bottom:16px}
.status{margin-bottom:18px}
.sub{margin-bottom:22px}
.specs{margin-top:22px}
}