/* goaus.app/next: draft homepage. Light/dark follows the visitor's system. The phone is always dark, like the app. */
@font-face{font-family:"Jakarta";src:url(/fonts/jakarta.woff2) format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"Bricolage";src:url(/fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{--bg:#f7f3ee;--bg2:#efe8e0;--ink:#1b1614;--mut:#665d57;--card:#ffffff;--line:#1b161420;--acc:#e0502a;--acc2:#ff8a5c;--on-acc:#2b0d05;--glow:#ff8a5c40;--hl:#ffb01c;
  --shadow:0 30px 60px -20px #1b161455;--f:"Jakarta",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--fh:"Bricolage","Jakarta",system-ui,sans-serif;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#0f0d0c;--bg2:#171413;--ink:#f7f4ef;--mut:#aaa19a;--card:#1d1917;--line:#ffffff1f;--acc:#ff8a5c;--acc2:#ff6a3c;--glow:#ff6a3c35;--shadow:0 30px 70px -20px #000}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--f);overflow-x:hidden}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--hl);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:99px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}

/* spinner (same arc as the app and the film loader) */
.spinner{width:34px;height:34px;animation:spin 1.4s linear infinite}
.spinner circle{fill:none;stroke:var(--hl);stroke-width:4;stroke-linecap:round;stroke-dasharray:89,200;stroke-dashoffset:0;animation:dash 1.4s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}100%{stroke-dasharray:89,200;stroke-dashoffset:-124}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:99px;font:650 15px/1 var(--f);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px;background:var(--ink);color:var(--bg)}
.btn-go{background:linear-gradient(135deg,#ff9a6c,#ff6a3c);color:#2b0d05;box-shadow:0 10px 28px -8px #ff6a3caa,inset 0 1px 0 #ffffff66}
.btn-go:hover{transform:translateY(-2px);box-shadow:0 16px 34px -8px #ff6a3ccc,inset 0 1px 0 #ffffff66}
.btn-ghost{box-shadow:inset 0 0 0 1.5px var(--line);background:transparent}
.btn-ghost:hover{transform:translateY(-2px);background:var(--bg2)}
.btn .url{font-weight:500;color:var(--mut);font-size:13px}

/* header */
.top{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:12px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left));background:linear-gradient(var(--bg),transparent)}
@supports (backdrop-filter:blur(1px)){.top{background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 20px/1 var(--fh);letter-spacing:-.03em}
.brand img{border-radius:8px}
.top nav{display:flex;align-items:center;gap:6px}
.nav-l{padding:10px 12px;text-decoration:none;font-weight:600;font-size:14px;color:var(--mut)}
.nav-l:hover{color:var(--ink)}

/* intro */
.intro{position:fixed;inset:0;z-index:300;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#0f0d0c;color:#f7f4ef;transition:opacity .45s ease,visibility .45s}
.has-intro .intro{display:flex}
.intro.out{opacity:0;visibility:hidden}
.intro-mark{position:relative;width:130px;height:130px;display:grid;place-items:center;animation:mark-in .7s cubic-bezier(.2,.9,.25,1.15) both}
.intro-mark img{border-radius:24px;box-shadow:0 0 60px #ff6a3c88}
.intro-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.intro-ring circle{fill:none;stroke:#FFB01C;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:290;stroke-dashoffset:290;animation:ring .9s .15s ease-out forwards}
.intro-word{margin:0;font:700 34px/1 var(--fh);letter-spacing:-.04em;opacity:0;animation:word .5s .5s ease-out forwards}
.intro-skip{position:absolute;right:20px;bottom:max(20px,env(safe-area-inset-bottom));background:none;border:0;color:#ffffffaa;font:600 14px var(--f);padding:12px;cursor:pointer}
.intro-skip:hover{color:#fff}
@keyframes mark-in{from{opacity:0;transform:scale(.55) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes ring{to{stroke-dashoffset:0}}
@keyframes word{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;padding:clamp(76px,11svh,110px) 20px 0;display:flex;flex-direction:column;align-items:center;overflow:hidden;text-align:center}
.hero-glow{position:absolute;left:50%;bottom:-18%;width:min(1100px,150vw);aspect-ratio:1;transform:translateX(-50%);background:radial-gradient(closest-side,var(--glow),transparent 72%);pointer-events:none}
.hero-copy{position:relative;z-index:2;max-width:820px}
.eyebrow{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
h1{margin:0;font:700 clamp(36px,6.2vw,76px)/1 var(--fh);letter-spacing:-.045em;text-wrap:balance}
.sub{margin:16px auto 0;max-width:600px;font-size:clamp(16px,1.6vw,20px);color:var(--mut);text-wrap:balance}
.ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.soon{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;font-size:13.5px;font-weight:600;color:var(--mut)}
.soon svg{width:16px;height:16px;color:var(--acc)}
.hero-phone{position:relative;z-index:1;margin-top:clamp(24px,4svh,44px);--pw:min(310px,44vw,36svh);flex:none}
.hero .phone{margin-bottom:calc(var(--pw)*-.55)}
.scroll-cue{position:absolute;z-index:3;left:50%;bottom:16px;transform:translateX(-50%);display:none;flex-direction:column;align-items:center;gap:8px;font-size:11px;letter-spacing:.18em;font-weight:700;text-transform:uppercase;color:var(--mut);text-decoration:none}

/* phone */
.phone{--pw:inherit;position:relative;width:var(--pw);aspect-ratio:1/2.07;margin:0 auto;border-radius:calc(var(--pw)*.155);background:linear-gradient(145deg,#3a3633,#0c0b0b 40%,#2a2623);padding:calc(var(--pw)*.026);box-shadow:var(--shadow),inset 0 0 0 calc(var(--pw)*.006) #ffffff1f;font-size:calc(var(--pw)/24);color:#f2f2f2;text-align:left}
.glass{position:relative;width:100%;height:100%;border-radius:calc(var(--pw)*.13);overflow:hidden;background:#131110;isolation:isolate}
.island{position:absolute;z-index:6;left:50%;top:2.2%;width:27%;height:3.2%;transform:translateX(-50%);border-radius:99px;background:#000}
.scr{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(1.025);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s .5s;background:#131110}
.scr.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.scr>img{position:absolute;left:0;top:4.6%;width:100%;height:95.4%;object-fit:cover;object-position:top;z-index:2;opacity:0;transition:opacity .4s}
.scr>img.ok{opacity:1}
.scr.has-img .fallback{visibility:hidden}
.ph-load{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:#131110;transition:opacity .3s}
.ph-load.gone{opacity:0;pointer-events:none}
.fallback{position:absolute;inset:0;padding:11% 7% 6%;display:flex;flex-direction:column;gap:2.4%;overflow:hidden}

/* in-phone UI (HTML stand-ins until real captures arrive) */
.ap-head{margin:3% 0 2%}.ap-head small{display:block;font-size:.78em;letter-spacing:.1em;text-transform:uppercase;color:#a8a09a;font-weight:700}
.ap-head b{font:700 1.75em/1.15 var(--fh);letter-spacing:-.03em}
.bus{display:inline-grid;place-items:center;min-width:2.9em;padding:.28em .5em;border-radius:.55em;background:#e8398a;color:#fff;font-weight:800;font-size:.9em;letter-spacing:.01em}
.bus.off{background:#5b5551;text-decoration:line-through}
/* s1 */
.q{padding:.8em 1em;border-radius:1em;background:#201c1a;border:1px solid #ffffff14;opacity:.28;transform:translateY(.8em);transition:all .5s cubic-bezier(.2,.8,.2,1)}
.q small{display:block;font-size:.8em;color:#a8a09a}.q span{font:700 1.3em var(--fh)}
.q.on{opacity:1;transform:none;border-color:#ff8a5c88}
.day{margin-top:auto;padding:1em;border-radius:1.1em;background:linear-gradient(160deg,#2a1f1a,#201a17);border:1px solid #ff8a5c55;opacity:0;transform:translateY(1.6em) scale(.97);transition:all .6s cubic-bezier(.2,.8,.2,1)}
.day.on{opacity:1;transform:none}
.day>small{display:block;font:700 1.25em var(--fh);color:#ffb08c;margin-bottom:.6em}
.row{display:flex;align-items:center;gap:.8em;padding:.5em 0;border-top:1px solid #ffffff12}.row:first-of-type{border:0}
.row>i{width:1.4em;height:1.4em;border-radius:50%;border:2px solid #ffb01c;flex:none}.row>i.ok{background:#6fcf7d;border-color:#6fcf7d}
.row b{display:block;font-size:1.05em}.row span{font-size:.85em;color:#a8a09a}
.row .bus{flex:none}
/* s2 */
.cd-card{padding:1.1em;border-radius:1.2em;background:#1d1917;border:1.5px solid #ff7a59;margin-top:2%}
.cd-card small{color:#c9c1ba;font-size:.95em}
.cd{font:800 5.4em/1 var(--fh);letter-spacing:-.05em;font-variant-numeric:tabular-nums;margin:.1em 0 .15em}
.bar{height:.5em;border-radius:99px;background:#ffffff1c;overflow:hidden}.bar i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(1);border-radius:99px;background:linear-gradient(90deg,#ff6a3c,#ffb01c)}
.cd-meta{display:flex;justify-content:space-between;margin-top:.6em;font-size:.92em;color:#cfc7c0}
.cd-go{display:none;align-items:center;justify-content:center;gap:.5em;margin-top:.9em;padding:.8em;border-radius:99px;background:#6fcf7d;color:#0b2410;font-weight:800;font-size:1.1em}.cd-go svg{width:1.3em;height:1.3em}
.s2.done .cd-go{display:flex;animation:pop .5s cubic-bezier(.2,.9,.25,1.3)}
.s2.done .cd-card{border-color:#6fcf7d}.s2.done .cd{color:#6fcf7d}
.mini{display:flex;align-items:center;gap:.8em;padding:.8em 1em;border-radius:1em;background:#201c1a;font-size:.95em;color:#cfc7c0}.mini b{color:#6fcf7d}
@keyframes pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
/* s3 map */
.s3 .fallback{padding:0}.mapfb{position:absolute;inset:0;background:#1a1d1f repeating-linear-gradient(35deg,#ffffff0a 0 2px,transparent 2px 38px)}
.stoppulse{position:absolute;z-index:3;left:34%;top:31%;width:3.2em;height:3.2em;margin:-1.6em 0 0 -1.6em;border-radius:50%;border:2px solid #ff8a5c;opacity:0}
.s3.on .stoppulse{animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.mbus{position:absolute;z-index:4;left:78%;top:10%;display:flex;align-items:center;gap:.4em;transform:translate(-50%,-50%);padding:.3em .6em .3em .3em;border-radius:99px;background:#1d1917;color:#fff;box-shadow:0 .4em 1.2em #0009,0 0 0 2px #6fcf7d;transition:left 7s linear,top 7s linear;opacity:0}
.mbus b{padding:.2em .5em;border-radius:99px;background:#e8398a;font-size:1em}.mbus i{font-style:normal;font-weight:700;font-size:.95em}
.s3.on .mbus{opacity:1}
.s3.go .mbus{left:35.5%;top:28.5%}
/* s4 lock */
.lock{background:radial-gradient(120% 70% at 50% 0,#3b2230,transparent 60%),linear-gradient(#17121a,#0c0a0d);padding-top:15%;gap:3%}
.lk-time{text-align:center;margin-bottom:12%}.lk-time small{display:block;font-size:1em;font-weight:600;color:#ffffffcc}.lk-time b{font:700 6em/1 var(--fh);letter-spacing:-.04em}
.note{display:flex;align-items:center;gap:.8em;padding:.8em;border-radius:1.2em;background:#3a3438dd;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.note b{display:block;font-size:1.05em}.note i{display:block;font-style:normal;font-size:.92em;color:#ded7d4;line-height:1.3}.note em{margin-left:auto;align-self:flex-start;font-size:.75em;font-style:normal;color:#bfb8b4}
.note.n2{opacity:.55;transform:scale(.94)}
.note.n1{opacity:0;transform:translateY(-6em) scale(.96);transition:all .7s cubic-bezier(.2,.9,.25,1.1)}
.s4.in .note.n1{opacity:1;transform:none;box-shadow:0 0 0 1.5px #ff8a5c99}
.lk-bar{margin:auto auto 0;width:36%;height:.35em;border-radius:99px;background:#ffffffaa}
.fc-ico{flex:none;width:2.1em;height:2.1em;border-radius:.55em;overflow:hidden;display:grid;place-items:center}.fc-ico img{width:100%;height:100%;border-radius:.5em}
/* s5 */
.off-card{margin-top:2%;padding:1.2em;border-radius:1.2em;background:#1d1917;border:1.5px solid #ff7a59;display:flex;flex-direction:column;gap:.2em;text-align:center}
.off-card small{color:#a8a09a;text-transform:uppercase;letter-spacing:.12em;font-size:.78em;font-weight:700}
.off-card .big{font:800 7em/1 var(--fh);color:#ff8a5c}.off-card b{font-size:1.5em;font-family:var(--fh)}.off-card span{color:#cfc7c0}
.rail{display:flex;justify-content:center;gap:1.4em;margin-top:.8em}.rail i{width:1em;height:1em;border-radius:50%;border:2px solid #ffffff55}.rail i.now{background:#ff8a5c;border-color:#ff8a5c;animation:blink 1.1s ease-in-out infinite}
@keyframes blink{50%{box-shadow:0 0 0 .5em #ff8a5c40}}
.buzz-wave{display:flex;justify-content:center;gap:.5em;opacity:0;margin:2% 0}.buzz-wave i{width:.35em;height:1.6em;border-radius:99px;background:#ff8a5c}
.s5.buzzing .buzz-wave{opacity:1}.s5.buzzing .buzz-wave i{animation:wave .3s ease-in-out infinite alternate}.buzz-wave i:nth-child(2){animation-delay:.1s!important}.buzz-wave i:nth-child(3){animation-delay:.2s!important}
@keyframes wave{from{transform:scaleY(.35)}to{transform:scaleY(1.2)}}
.off-btn{margin-top:auto;padding:.9em;border-radius:99px;text-align:center;font-weight:800;background:linear-gradient(135deg,#ff9a6c,#ff6a3c);color:#2b0d05}
.off-btn.sw{margin-top:.8em}
/* s6 */
.dis{padding:1em;border-radius:1.1em;background:#2a1816;border:1.5px solid #ff5d4d}.dis-top{display:flex;gap:.8em;align-items:center}.dis b{display:block;font-size:1.2em;color:#ffb0a8}.dis span:not(.bus){color:#cfc7c0;font-size:.9em}
.alt{margin-top:2%;padding:1em;border-radius:1.1em;background:#1d1917;border:1.5px solid #6fcf7d;opacity:0;transform:translateY(2.4em);transition:all .7s .8s cubic-bezier(.2,.9,.25,1.1)}
.alt>small{display:block;font:700 1.2em var(--fh);color:#9be6a5;margin-bottom:.6em}
.alt-row{display:flex;gap:.8em;align-items:center}.alt-row b{display:block;font-size:1.1em}.alt-row span:not(.bus){font-size:.88em;color:#cfc7c0}
.s6.in .alt{opacity:1;transform:none}.s6.in .dis .bus{animation:shake .5s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* floating cards */
.fl{position:absolute;inset:0;z-index:5;pointer-events:none;--pw:inherit;font-size:max(12px,calc(var(--pw)/19));--ox:.86}
.fc{position:absolute;opacity:0;transform:translateY(14px) scale(.94);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.9,.25,1.1)}
.fc.show{opacity:1;transform:none}
.fc-in{display:flex;align-items:center;gap:.7em;padding:.7em .95em;border-radius:1.1em;background:#1d1917f0;color:#f7f4ef;box-shadow:0 1em 2.4em -.6em #000a,inset 0 0 0 1px #ffffff1c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap;animation:float 5.5s ease-in-out infinite}
.fc.b .fc-in{animation-duration:6.5s;animation-delay:-2s}.fc.c .fc-in{animation-duration:7s;animation-delay:-4s}
@keyframes float{0%,100%{transform:translateY(-.35em) rotate(-.4deg)}50%{transform:translateY(.45em) rotate(.5deg)}}
.fc.a{left:calc(var(--pw)*var(--ox)*-1);top:12%}
.fc.b{right:calc(var(--pw)*var(--ox)*-1);top:30%}
.fc.c{left:calc(var(--pw)*var(--ox)*-1 + var(--pw)*.1);bottom:22%}
.hero .fc.c{bottom:34%}
.fc-tx{display:flex;flex-direction:column;line-height:1.2;min-width:0}.fc-tx b{font-size:1.05em}.fc-tx i{font-style:normal;font-size:.85em;color:#bdb5ae}
.fc-notif .fc-in{background:#3a3438f0}.fc-notif em{font-style:normal;font-size:.75em;color:#bfb8b4;align-self:flex-start;margin-left:.5em}
.fc .bus{background:#e8398a;color:#fff;border-radius:99px;padding:.25em .6em;font-weight:800;min-width:0}
.live{display:inline-flex;align-items:center;gap:.4em;font-size:.82em;font-weight:700;color:#8be09a}.live i{width:.55em;height:.55em;border-radius:50%;background:#6fcf7d;animation:livep 1.4s infinite}
@keyframes livep{50%{box-shadow:0 0 0 .4em #6fcf7d44}}
.fc-off .fc-in{box-shadow:0 1em 2.4em -.6em #000a,inset 0 0 0 1.5px #ff8a5c}.fc-off b{font:700 1.2em var(--fh)}
.fc-alert .fc-in{box-shadow:0 1em 2.4em -.6em #000a,inset 0 0 0 1.5px #ff5d4d;background:#2a1816f0}.fc-alert b{color:#ffb0a8;font-size:1.2em}
.tick{display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:#6fcf7d;color:#0b2410;font-weight:900;font-size:.9em;flex:none}

/* story: sticky phone behind scrolling chapter text */
.story{position:relative;padding-top:2svh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;z-index:1}
.stage-glow{position:absolute;inset:0;background:radial-gradient(40% 50% at 68% 52%,var(--glow),transparent 70%);transition:background .8s}
.stage-phone{position:absolute;left:68%;top:50%;transform:translate(-50%,-50%);--pw:min(320px,38.5svh,30vw);transition:transform .2s}
.counter{position:absolute;left:max(20px,6vw);top:92px;margin:0;font:700 14px var(--fh);letter-spacing:.12em;color:var(--mut)}
.counter b{font-size:15px;color:var(--ink)}
.chaps{position:relative;z-index:2;margin-top:-100vh;margin-top:-100svh;pointer-events:none}
.chap{height:100vh;height:100svh;display:flex;align-items:center;padding:0 max(24px,6vw)}
.chap-card{pointer-events:auto;max-width:460px;opacity:.28;transform:translateX(-14px);transition:all .6s cubic-bezier(.2,.8,.2,1)}
.chap.on .chap-card{opacity:1;transform:none}
.num{margin:0 0 14px;font:700 15px var(--fh);letter-spacing:.1em;color:var(--acc)}.num span{color:var(--mut)}
.chap h2{margin:0 0 14px;font:700 clamp(32px,4.4vw,58px)/1.02 var(--fh);letter-spacing:-.04em;text-wrap:balance}
.chap p:not(.num){margin:0;font-size:clamp(16px,1.35vw,19px);color:var(--mut);max-width:420px}

/* trust */
.trust{padding:clamp(48px,8vw,96px) 20px;border-block:1px solid var(--line);background:var(--bg2)}
.trust ul{list-style:none;margin:0 auto;padding:0;max-width:1120px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.trust b{display:block;font:700 clamp(19px,1.9vw,24px)/1.15 var(--fh);letter-spacing:-.03em;margin-bottom:8px}
.trust b::before{content:"";display:block;width:34px;height:4px;border-radius:99px;background:linear-gradient(90deg,#ff9a6c,#ffb01c);margin-bottom:14px}
.trust span{font-size:14.5px;color:var(--mut)}

/* final */
.final{padding:clamp(72px,12vw,150px) 20px;text-align:center;background:radial-gradient(60% 80% at 50% 100%,var(--glow),transparent 70%)}
.final-in{max-width:760px;margin:0 auto}
.final h2{margin:0;font:700 clamp(36px,6vw,76px)/1 var(--fh);letter-spacing:-.045em;text-wrap:balance}
.final p{color:var(--mut);margin:16px 0 0;font-size:18px}.final .soon{font-size:14px}.final .soon a{color:var(--acc);font-weight:700}

footer{padding:44px 20px calc(44px + env(safe-area-inset-bottom));border-top:1px solid var(--line);font-size:13px;color:var(--mut)}
.foot{max-width:1120px;margin:0 auto}.foot p{margin:0 0 12px;max-width:900px;line-height:1.7}
.foot .made{font-size:14px;color:var(--ink)}
.links{display:flex;flex-wrap:wrap;gap:4px 22px;margin:18px 0}.links a{padding:8px 0;text-decoration:none;font-weight:600;color:var(--ink);font-size:14px}.links a:hover{color:var(--acc)}
.social{display:flex;gap:6px;list-style:none;padding:0;margin:0 0 18px}.social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink)}.social a:hover{background:var(--bg2)}.social svg{width:19px;height:19px}

/* intro reveal of hero copy */
.has-intro .hero-copy>*,.has-intro .hero-phone{opacity:0;transform:translateY(16px)}
.hero-ready .hero-copy>*,.hero-ready .hero-phone{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.hero-ready .hero-copy>:nth-child(2){transition-delay:.08s}.hero-ready .hero-copy>:nth-child(3){transition-delay:.16s}.hero-ready .hero-copy>:nth-child(4){transition-delay:.24s}.hero-ready .hero-copy>:nth-child(5){transition-delay:.3s}.hero-ready .hero-phone{transition-delay:.2s}

/* desktop hero: copy + cue */
@media (min-width:900px) and (min-height:700px){.scroll-cue{display:flex}}

/* phones */
@media (max-width:820px){
  .nav-l{display:none}
  .trust ul{grid-template-columns:1fr 1fr;gap:34px 22px}
  .hero{padding-top:84px}
  .hero-phone{--pw:min(260px,56vw,33svh)}
  .hero .fl,.stage .fl{--ox:.36}
  .btn{min-height:48px;padding:0 20px}
  .btn .url{display:none}
  .ctas{margin-top:20px}
  .stage-phone{left:50%;top:43.5%;--pw:min(250px,60vw,26svh)}
  .stage-glow{background:radial-gradient(60% 40% at 50% 43%,var(--glow),transparent 70%)}
  .counter{top:70px}
  .chap{align-items:flex-end;padding:0 16px 5svh}
  .chap-card{max-width:none;width:100%;padding:18px 20px;border-radius:22px;background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--line),0 -10px 40px -10px #0006;transform:translateY(20px)}
  .chap h2{font-size:clamp(26px,7.4vw,34px);margin-bottom:8px}
  .chap p:not(.num){font-size:15px}
  .num{margin-bottom:8px;font-size:13px}
  .fc-in{padding:.55em .75em}
}
@media (max-width:820px) and (max-height:760px){.chap p:not(.num){display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .fc-in{animation:none!important}
  .has-intro .intro{display:none}
}
.no-intro .intro{display:none}

/* story-style progress + controls */
.prog{position:absolute;z-index:6;left:max(20px,6vw);right:max(20px,6vw);top:68px;display:flex;gap:6px}
.prog button{flex:1;height:22px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center}
.prog i{display:block;width:100%;height:4px;border-radius:99px;background:var(--line);position:relative;overflow:hidden}
.prog i::after{content:"";position:absolute;inset:0;background:var(--acc);transform:scaleX(var(--p,0));transform-origin:left}
.prog button.done i{--p:1}
.ctrl{position:absolute;z-index:6;left:max(20px,6vw);bottom:max(24px,5svh);display:flex;gap:8px}
.ctrl button{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:0;background:var(--card);color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line)}
.ctrl button:hover{background:var(--bg2)}.ctrl svg{width:19px;height:19px}
.ctrl .i-play{display:none}.is-paused .ctrl .i-play{display:block}.is-paused .ctrl .i-pause{display:none}
.no-auto .ctrl #pp{display:none}
@media (max-width:820px){.ctrl{left:auto;right:16px;bottom:auto;top:84px}.ctrl button{width:40px;height:40px}.counter{top:96px}.prog{top:62px}}
@media (prefers-reduced-motion:reduce){.ctrl #pp{display:none}}
.phone.buzz{animation:buzz .09s linear 8}
@keyframes buzz{0%{transform:translateX(-3px)}50%{transform:translateX(3px)}100%{transform:none}}
.mini .bus.alt2{background:#5b5551}.mini .n{color:#fff}.mini.wk i{width:1.2em;height:1.2em;border-radius:50%;border:2px solid #ffb01c;flex:none}

.s3.has-img .mbus,.s3.has-img .stoppulse{display:none}

/* narrow phones (under 480 px): floating cards never sit on the app screen. They go in a row just outside the phone
   (above it in the hero, below it in the story); the third hero card is hidden. */
@media (max-width:480px){
  .fl{font-size:11.5px}
  .fc.a,.fc.c{left:auto;right:calc(50% + 4px)}
  .fc.b{right:auto;left:calc(50% + 4px)}
  .fc.solo{left:calc(50% - 50vw);right:calc(50% - 50vw);margin-inline:auto;width:max-content}
  .fc-in{padding:.5em .7em;gap:.55em}
  .hero-phone{margin-top:60px}
  .hero .fc,.hero .fc.c{top:auto;bottom:calc(100% + 10px)}
  .hero .fc.c{display:none}
  .stage-phone{top:136px;transform:translateX(-50%);--pw:min(240px,56vw,23svh)}
  .stage .fc{top:calc(100% + 10px);bottom:auto}
  .stage-glow{background:radial-gradient(60% 40% at 50% 36%,var(--glow),transparent 70%)}
}

/* 4 Nov: the silent film, back under the hero. 16:9 wide file, 9:16 tall file under 700px. */
.film{position:relative;z-index:2;padding:clamp(56px,9svh,104px) 20px clamp(24px,5svh,56px);background:var(--bg)}
.film-fig{margin:0 auto;max-width:1040px}
.film-frame{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#0f0d0c url(/media/poster-wide.jpg) center/cover no-repeat;box-shadow:var(--shadow);border:1px solid var(--line)}
.film-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:transparent}
.film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border:0;border-radius:99px;background:var(--acc);color:var(--on-acc);display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 34px -8px #0008;transition:transform .25s}
.film-play[hidden]{display:none}
.film-play:hover{transform:translate(-50%,-50%) scale(1.06)}
.film-play svg{width:34px;height:34px;margin-left:4px}
.film-fig figcaption{margin:16px auto 0;text-align:center;color:var(--mut);font:600 15px/1.4 var(--f);letter-spacing:-.01em;text-wrap:balance}
@media (max-width:699px){
  .film{padding-inline:16px}
  .film-frame{aspect-ratio:9/16;max-width:min(100%,420px,calc(78svh*9/16));margin-inline:auto;border-radius:22px;background-image:url(/media/poster-tall.jpg)}
}
/* (5 Nov) feature-request strip under the trust points */
.trust .ask{max-width:1120px;margin:clamp(36px,5vw,56px) auto 0;padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap}
.trust .ask p{margin:0;max-width:640px;min-width:0}
.trust .ask p b{display:inline;font:700 clamp(17px,1.6vw,20px)/1.3 var(--fh);letter-spacing:-.02em;margin:0 6px 0 0}
.trust .ask p b::before{display:none}
.trust .ask .btn{flex:none}
@media(max-width:699px){.trust .ask .btn{width:100%;justify-content:center}}