/* Guava Study waitlist. Dark theme matched to the original guavastudy.netlify.app look.
   Hand-written CSS, no frameworks. Animations use transform/opacity; all of it switches off
   under prefers-reduced-motion and pauses when offscreen (.is-off) or the tab is hidden. */
@font-face{font-family:"Inter";src:url(/assets/fonts/inter.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url(/assets/fonts/caveat.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --bg:#030712;--bg2:#0b0f19;--panel:rgba(15,23,42,.72);--panel2:rgba(2,6,23,.75);
  --line:rgba(30,41,59,.9);--line2:rgba(51,65,85,.7);
  --text:#f1f5f9;--muted:#94a3b8;--soft:#cbd5e1;
  --rose:#f43f5e;--rose4:#fb7185;--rose6:#e11d48;--rose7:#be123c;
  --mint:#10b981;--mint4:#34d399;--sky4:#38bdf8;--cream:#fdfbf4;
  --r:24px;--ease:cubic-bezier(.16,1,.3,1);
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hand:"Caveat","Segoe Print","Bradley Hand",cursive;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{margin:0;min-height:100vh;font-family:var(--font);font-size:16px;line-height:1.6;color:var(--text);background-color:var(--bg);
  background-image:linear-gradient(to right,rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:32px 32px;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
::selection{background:var(--rose);color:#fff}
img,svg{display:block;max-width:100%}
a{color:var(--rose4);text-underline-offset:3px}
a:hover{color:#fda4af}
:focus-visible{outline:2px solid var(--rose4);outline-offset:3px;border-radius:8px}
h1,h2,h3{margin:0;line-height:1.1;letter-spacing:-.025em;font-weight:800}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;color:#111;padding:10px 16px;border-radius:12px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.i{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px;flex:none}
.i.thick{stroke-width:2.8}
.i-fill{fill:currentColor;width:18px;height:18px;flex:none}

/* ---------- ambient glows (radial gradients, no blur filter = cheap on phones) ---------- */
.glows{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.glow{position:absolute;border-radius:50%}
.g1{width:1100px;height:620px;left:50%;top:-260px;margin-left:-550px;background:radial-gradient(closest-side,rgba(244,63,94,.26),rgba(244,63,94,.06) 55%,transparent);animation:pulse 7s ease-in-out infinite}
.g2{width:700px;height:700px;left:-320px;top:900px;background:radial-gradient(closest-side,rgba(16,185,129,.13),transparent)}
.g3{width:760px;height:760px;right:-340px;top:1500px;background:radial-gradient(closest-side,rgba(244,63,94,.15),transparent);}
@keyframes pulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;transition:background-color .3s,border-color .3s;border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(3,7,18,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:rgba(30,41,59,.6)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.brand:hover{color:#fff}
.brand-tile{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(140deg,#1e293b,#0f172a);border:1px solid rgba(251,113,133,.35);box-shadow:0 8px 24px -8px rgba(244,63,94,.55);transition:transform .5s var(--ease)}
.brand:hover .brand-tile{transform:scale(1.1) rotate(6deg)}
.brand-word{font-size:20px;font-weight:800;letter-spacing:-.03em}
.brand-word span{color:var(--rose4)}
.brand-sm .brand-tile{width:32px;height:32px;border-radius:11px}
.brand-sm .brand-word{font-size:16px}
.header-actions{display:flex;align-items:center;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:rgba(15,23,42,.9);border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--soft);box-shadow:0 10px 30px -12px #000}
.ping{position:relative;width:8px;height:8px;border-radius:50%;background:var(--mint4)}
.ping::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--mint4);animation:ping 1.6s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{75%,100%{transform:scale(2.4);opacity:0}}

/* ---------- buttons ---------- */
.btn{--bh:48px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--bh);padding:0 22px;border-radius:16px;border:1px solid transparent;font:inherit;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .3s,background-color .3s,border-color .3s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn-primary{color:#fff;background:linear-gradient(135deg,var(--rose6),#c81d50);box-shadow:0 14px 30px -10px rgba(244,63,94,.65),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:hover{color:#fff;transform:translateY(-2px) scale(1.02);box-shadow:0 20px 40px -12px rgba(244,63,94,.8),inset 0 1px 0 rgba(255,255,255,.22)}
.btn:active{transform:scale(.97);transition-duration:.08s}
.btn::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:translateX(-120%) skewX(-18deg);pointer-events:none}
.btn-primary:hover::before{animation:shine .9s var(--ease)}
.btn-primary.auto-shine::before{animation:shine 1.1s var(--ease) 2.4s,shine 1.1s var(--ease) 9s}
@keyframes shine{to{transform:translateX(480%) skewX(-18deg)}}
.btn .arrow{width:17px;height:17px;transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-ghost{color:var(--text);background:rgba(15,23,42,.8);border-color:var(--line2)}
.btn-ghost:hover{color:#fff;border-color:rgba(251,113,133,.6);transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(244,63,94,.6)}
.btn-small{--bh:40px;padding:0 16px;font-size:14px;border-radius:13px}
.ripple{position:absolute;z-index:-1;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:rgba(255,255,255,.45);pointer-events:none;transform:scale(0);animation:ripple .65s ease-out forwards}
@keyframes ripple{to{transform:scale(22);opacity:0}}
.spinner{display:none;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
.btn[aria-busy=true] .spinner{display:block}
.btn[aria-busy=true] .arrow{display:none}
.btn[disabled]{cursor:progress}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- hero ---------- */
.hero{position:relative;z-index:1;padding:28px 0 40px}
.hero-grid{display:grid;gap:44px;align-items:center}
.hero-copy{text-align:center;max-width:640px;margin-inline:auto}
.badge{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;background:rgba(15,23,42,.9);border:1px solid var(--line);color:var(--mint4);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 20px 40px -20px #000}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--mint4);animation:blink 2s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
h1{margin:22px 0 18px;font-size:clamp(40px,7.4vw,74px);font-weight:900;line-height:1.04;letter-spacing:-.045em;color:#fff}
h1 .line{display:block}
.shimmer{background:linear-gradient(90deg,var(--rose4) 0%,#ffe4e6 30%,#fff 50%,#a7f3d0 70%,var(--mint4) 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:shimmer 6s linear 4}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.lede{font-size:clamp(16px,1.9vw,19px);color:var(--muted);max-width:600px;margin:0 auto}

/* entrance */
.rise{animation:rise .9s var(--ease) both}
.r2{animation-delay:.08s}.r3{animation-delay:.16s}.r4{animation-delay:.26s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ---------- join card ---------- */
.join{margin:30px auto 0;max-width:600px;text-align:left;outline:none}
.join-card{position:relative;padding:10px;border-radius:26px;background:rgba(15,23,42,.92);border:1px solid var(--line);box-shadow:0 30px 70px -20px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.02) inset}
.join-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(120deg,rgba(251,113,133,.7),transparent 35%,transparent 65%,rgba(52,211,153,.6));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.55;animation:edge 4s ease-in-out infinite}
@keyframes edge{50%{opacity:1}}
.join-form{display:grid;gap:8px;grid-template-columns:1fr}
.field{position:relative}
.field input,.field select{width:100%;height:52px;border-radius:17px;border:1px solid var(--line);background:rgba(2,6,23,.9);color:#fff;font:inherit;font-size:16px;padding:0 16px;transition:border-color .2s,box-shadow .2s;box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.field-email input{padding-left:46px}
.field input::placeholder{color:#8796ab}
.field input:focus,.field select:focus{outline:none;border-color:var(--rose4);box-shadow:0 0 0 3px rgba(244,63,94,.3)}
.field [aria-invalid=true]{border-color:#fb7185;box-shadow:0 0 0 3px rgba(244,63,94,.22)}
.field-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#8796ab;pointer-events:none}
.field-icon .i{width:19px;height:19px}
.field select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
.field select:invalid{color:#8796ab}
.field select option{color:#0f172a;background:#fff}
.chev{position:absolute;right:14px;top:50%;width:18px;height:18px;margin-top:-9px;fill:none;stroke:#8796ab;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.btn-submit{--bh:52px;width:100%;border-radius:17px;font-size:16px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.errors{padding:0 8px}
.field-error,.form-alert{margin:8px 0 2px;font-size:14px;font-weight:600;color:#fda4af}
.form-alert{padding:10px 12px;border-radius:12px;background:rgba(244,63,94,.12);border:1px solid rgba(244,63,94,.35)}
.micro{text-wrap:balance;margin:12px 4px 0;font-size:13.5px;color:var(--muted);text-align:center}
.privacy-note{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border-radius:16px;background:rgba(15,23,42,.55);border:1px solid rgba(30,41,59,.7);font-size:13px;line-height:1.55;color:var(--muted)}
.privacy-note .i{width:18px;height:18px;color:var(--mint4);margin-top:1px}
.result{padding:26px 18px 22px;text-align:center}
.result-icon{width:60px;height:60px;margin:0 auto 14px;border-radius:18px;display:grid;place-items:center;background:rgba(244,63,94,.14);border:1px solid rgba(251,113,133,.35)}
.result-icon.ok{color:var(--mint4);background:rgba(16,185,129,.16);border-color:rgba(52,211,153,.4);box-shadow:0 12px 30px -10px rgba(16,185,129,.5)}
.result-title{font-size:23px;margin-bottom:8px;color:#fff;outline:none}
.result p{color:var(--muted);font-size:15px}
.result.pop .result-icon{animation:pop .7s var(--ease) both}
.result.pop .result-title,.result.pop p{animation:rise .7s var(--ease) both}
.result.pop p{animation-delay:.1s}
@keyframes pop{0%{transform:scale(.3) rotate(-14deg);opacity:0}60%{transform:scale(1.15) rotate(4deg);opacity:1}100%{transform:none}}
.confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:90}

/* ---------- phone concept ---------- */
.concept{margin:0;position:relative;display:flex;flex-direction:column;align-items:center}
.stage{position:relative;padding:44px 0 10px;perspective:1200px}
.tilt{transform-style:preserve-3d}
.float{position:relative;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.phone{position:relative;width:300px;height:610px;border-radius:50px;padding:11px;background:linear-gradient(145deg,#334155,#0f172a 40%,#1e293b);box-shadow:0 50px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.07) inset,0 0 70px -10px rgba(244,63,94,.3)}
.phone::after{content:"";position:absolute;inset:-34px;z-index:-1;border-radius:80px;background:radial-gradient(closest-side,rgba(244,63,94,.32),rgba(16,185,129,.12) 60%,transparent);animation:pulse 6s ease-in-out infinite}
.concept-flag{position:absolute;z-index:5;top:-14px;left:50%;transform:translateX(-50%);padding:4px 12px;border-radius:999px;background:#fde68a;color:#422006;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 8px 20px -8px rgba(0,0,0,.8);white-space:nowrap}
.screen{position:relative;height:100%;border-radius:40px;overflow:hidden;background:linear-gradient(180deg,#0b0f19,#050912);display:flex;flex-direction:column;padding:0 14px 14px;gap:10px}
.statusbar{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 10px;font-size:12px;font-weight:700;color:#e2e8f0}
.island{width:84px;height:24px;border-radius:14px;background:#000}
.sb-icons{display:flex;gap:3px}.sb-icons i{width:5px;height:10px;border-radius:2px;background:#e2e8f0}.sb-icons i:first-child{height:6px;margin-top:4px}.sb-icons i:nth-child(2){height:8px;margin-top:2px}
.app-top{display:flex;flex-direction:column;padding:0 4px}
.app-title{font-size:19px;font-weight:800;color:#fff;letter-spacing:-.02em}
.app-sub{font-size:11.5px;color:var(--muted)}
.photo{position:relative;margin:6px 10px 0;padding:0}
.vf{position:absolute;z-index:2;width:16px;height:16px;border:0 solid var(--mint4)}
.vf.tl{top:-7px;left:-7px;border-top-width:3px;border-left-width:3px;border-top-left-radius:7px}
.vf.tr{top:-7px;right:-7px;border-top-width:3px;border-right-width:3px;border-top-right-radius:7px}
.vf.bl{bottom:-7px;left:-7px;border-bottom-width:3px;border-left-width:3px;border-bottom-left-radius:7px}
.vf.br{bottom:-7px;right:-7px;border-bottom-width:3px;border-right-width:3px;border-bottom-right-radius:7px}
.paper{position:relative;overflow:hidden;transform:rotate(-1.8deg);border-radius:4px;padding:8px 10px 8px 30px;background-color:var(--cream);
  background-image:linear-gradient(90deg,transparent 22px,rgba(244,63,94,.4) 22px,rgba(244,63,94,.4) 23.5px,transparent 23.5px),repeating-linear-gradient(180deg,transparent 0,transparent 25px,rgba(56,189,248,.3) 25px,rgba(56,189,248,.3) 26px);
  background-position:0 0,0 6px;box-shadow:0 18px 36px -14px rgba(0,0,0,.9);font-family:var(--hand);font-size:19px;line-height:26px;color:#1e293b}
.paper p{position:relative;white-space:nowrap;transition:color .3s}
.paper b{position:absolute;left:-22px;width:16px;text-align:center;font-family:var(--font);font-size:10px;font-weight:700;color:#be123c;line-height:26px}
.paper .n-title{font-weight:700;text-decoration:underline;text-decoration-color:rgba(30,41,59,.45);text-underline-offset:3px}
.paper p::before{content:"";position:absolute;left:-4px;right:-6px;top:4px;bottom:3px;border-radius:4px;background:rgba(52,211,153,.45);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:-1}
.paper p.cited::before{transform:scaleX(1)}
.paper p{z-index:0}
.scan{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(180deg,transparent 70%,rgba(52,211,153,.28) 96%,var(--mint4) 98%,transparent);transform:translateY(-100%)}
.screen.scanning .scan{animation:scan 1.6s cubic-bezier(.45,0,.55,1) forwards}
@keyframes scan{0%{transform:translateY(-100%);opacity:0}12%,85%{opacity:1}100%{transform:translateY(0);opacity:0}}
.making{display:flex;flex-direction:column;gap:6px;padding:8px 4px 0}
.mk-text{font-size:11.5px;font-weight:700;color:var(--mint4)}
.mk-bar{height:4px;border-radius:4px;background:rgba(30,41,59,.9);overflow:hidden}
.mk-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--rose),var(--mint4));transform-origin:left;transform:scaleX(1)}
.screen.making-on .mk-bar i{animation:grow 1.3s cubic-bezier(.65,0,.35,1) both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.quiz{flex:1;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:20px;background:rgba(15,23,42,.85);border:1px solid var(--line);transition:opacity .4s}
.q-meta{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);font-weight:600}
.q-tag{padding:1px 7px;border-radius:6px;background:rgba(244,63,94,.15);color:var(--rose4)}
.q-text{font-size:15px;font-weight:800;line-height:1.3;color:#fff;min-height:40px}
.caret{display:inline-block;width:2px;height:15px;margin-left:2px;vertical-align:-2px;background:var(--rose4);opacity:0}
.screen.typing .caret{opacity:1;animation:blink .8s steps(1) infinite}
.opts{display:grid;gap:6px}
.opts li{padding:8px 11px;border-radius:11px;background:rgba(2,6,23,.8);border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--soft);transition:opacity .35s var(--ease),transform .35s var(--ease),background-color .3s,border-color .3s,color .3s}
.opts li.right{background:rgba(16,185,129,.16);border-color:rgba(52,211,153,.6);color:#d1fae5}
.opts li.right::after{content:" ✓";color:var(--mint4)}
.cite{margin-top:auto;padding:9px 11px;border-radius:12px;background:rgba(253,251,244,.06);border:1px dashed rgba(52,211,153,.5);font-size:12px;color:var(--soft);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.cite-label{display:block;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mint4)}
#cite-quote{font-family:var(--hand);font-size:17px;line-height:1.2;color:#fff}
.app-bottom{display:grid;grid-template-columns:1fr 1.3fr;gap:8px}
.app-btn{display:grid;place-items:center;height:38px;border-radius:13px;font-size:12px;font-weight:700;color:#fff;background:var(--rose6)}
.app-btn.alt{background:rgba(30,41,59,.9);color:var(--soft)}
/* timeline states (JS); without JS / reduced motion the finished state above is shown */
.screen.pre .opts li{opacity:0;transform:translateY(8px)}
.screen.pre .opts li.show{opacity:1;transform:none}
.screen.pre .cite{opacity:0;transform:translateY(10px)}
.screen.pre .cite.show{opacity:1;transform:none}
.screen.pre .mk-text{color:var(--muted)}
.screen.dim .quiz{opacity:.35}

.chip{position:absolute;z-index:6;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:14px;background:rgba(15,23,42,.95);border:1px solid var(--line2);font-size:12.5px;font-weight:700;color:#e2e8f0;box-shadow:0 18px 40px -16px #000;white-space:nowrap;transform:translateZ(40px)}
.chip .i{width:15px;height:15px}
.chip-a{left:-66px;top:96px;color:#d1fae5}.chip-a .i{color:var(--mint4)}
.chip-b{right:-78px;top:300px}
.chip-c{left:-50px;bottom:110px}.chip-c .i{color:var(--rose4)}
.chip-dot{width:8px;height:8px;border-radius:50%;background:var(--mint4);box-shadow:0 0 0 4px rgba(52,211,153,.2)}
.chip-a{animation:bob 5s ease-in-out infinite}.chip-b{animation:bob 6s ease-in-out -2s infinite}.chip-c{animation:bob 5.5s ease-in-out -1s infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -9px}}
.hand{font-family:var(--hand);font-size:24px;line-height:1.1;color:var(--rose4);white-space:nowrap}
.hand-top{position:absolute;top:0;left:50%;transform:translateX(-112%) rotate(-5deg)}
.hand-arrow{position:absolute;right:-56px;top:6px;width:56px;height:38px;fill:none;stroke:var(--rose4);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hand-side{display:none;color:var(--mint4);white-space:normal;width:150px;text-align:left}
figcaption{margin-top:22px;max-width:340px;text-align:center;font-size:13px;color:var(--muted)}
.concept-badge{display:inline-block;margin-right:6px;padding:2px 8px;border-radius:7px;background:#fde68a;color:#422006;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}

/* drifting background widgets (desktop only) */
.drift{position:absolute;inset:0;overflow:hidden;pointer-events:none;display:none}
.w{position:absolute;bottom:-60px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:rgba(15,23,42,.55);border:1px solid rgba(30,41,59,.7);font-size:12px;font-weight:600;color:rgba(203,213,225,.55);opacity:0;animation:drift 30s linear infinite}
.wd{width:7px;height:7px;border-radius:50%}.wd.pink{background:var(--rose4)}.wd.mint{background:var(--mint4)}
.w1{left:.6%;animation-delay:0s}.w2{left:1.4%;animation-delay:-15s;animation-duration:34s}.w3{left:61%;animation-delay:-21s;animation-duration:40s}
.w4{right:1%;animation-delay:-6s;animation-duration:36s}.w5{right:.4%;animation-delay:-22s}.w6{left:63.5%;animation-delay:-2s;animation-duration:44s}
@keyframes drift{0%{opacity:0;transform:translateY(0)}8%{opacity:.55}85%{opacity:.55}100%{opacity:0;transform:translateY(-1100px)}}

/* ---------- marquee ---------- */
.marquee{position:relative;z-index:1;display:flex;overflow:hidden;padding:18px 0;border-block:1px solid rgba(30,41,59,.6);background:rgba(11,15,25,.6);-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq-row{display:flex;flex:none;gap:12px;padding-right:12px;animation:marquee 38s linear infinite}
.mq-row li{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(15,23,42,.8);font-size:14px;font-weight:600;color:var(--soft);white-space:nowrap}
.mq-row li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rose4)}
.mq-row li.m::before{background:var(--mint4)}
.marquee:hover .mq-row{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-100%)}}

/* ---------- sections ---------- */
.section{position:relative;z-index:1;padding:88px 0}
.section+.section{border-top:1px solid rgba(15,23,42,.9)}
.kicker{text-align:center;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--rose4);margin-bottom:12px}
.title{text-align:center;font-size:clamp(28px,4.2vw,42px);color:#fff;max-width:720px;margin:0 auto 48px;text-wrap:balance}
.steps{position:relative;display:grid;gap:18px}
.step{position:relative;padding:26px;border-radius:var(--r);background:linear-gradient(180deg,#0f172a,#0a1020);border:1px solid rgba(30,41,59,.7);box-shadow:0 30px 60px -30px #000;transition:transform .5s var(--ease),border-color .4s,box-shadow .4s,opacity .8s var(--ease)}
.step:hover{transform:translateY(-6px);border-color:rgba(244,63,94,.45);box-shadow:0 30px 60px -28px rgba(244,63,94,.45)}
.step-icon,.card-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px;border:1px solid;transition:transform .5s var(--ease),background-color .4s,color .4s}
.step-icon .i,.card-icon .i{width:24px;height:24px}
.pink .step-icon,.step-icon.pink,.card.pink .card-icon{color:var(--rose4);background:rgba(244,63,94,.1);border-color:rgba(244,63,94,.25)}
.step-icon.mint,.card.mint .card-icon{color:var(--mint4);background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.25)}
.step-icon.sky,.card.sky .card-icon{color:var(--sky4);background:rgba(56,189,248,.1);border-color:rgba(56,189,248,.25)}
.step:hover .step-icon,.card:hover .card-icon{transform:scale(1.1) rotate(-6deg)}
.step-n{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.step h3,.card h3{font-size:20px;color:#fff;margin-bottom:8px}
.step p,.card p{color:var(--muted);font-size:15px}
.steps::before{content:"";position:absolute;left:52px;top:52px;bottom:52px;width:2px;background:linear-gradient(var(--rose),var(--mint4));opacity:.35;transform-origin:top;transform:scaleY(0);transition:transform 1.4s var(--ease) .2s}
.steps.in::before{transform:scaleY(1)}
.cards{display:grid;gap:18px}
.card{position:relative;padding:28px;border-radius:var(--r);background:rgba(15,23,42,.45);border:1px solid rgba(30,41,59,.6);box-shadow:0 30px 60px -30px #000;overflow:hidden;transition:transform .5s var(--ease),border-color .4s,opacity .8s var(--ease)}
.card::after{content:"";position:absolute;width:260px;height:260px;right:-120px;top:-120px;border-radius:50%;background:radial-gradient(closest-side,rgba(244,63,94,.22),transparent);opacity:0;transition:opacity .5s,transform .6s var(--ease);transform:scale(.6)}
.card.mint::after{background:radial-gradient(closest-side,rgba(16,185,129,.22),transparent)}
.card.sky::after{background:radial-gradient(closest-side,rgba(56,189,248,.22),transparent)}
.card:hover{transform:translateY(-6px)}
.card:hover::after{opacity:1;transform:scale(1)}
.card.pink:hover{border-color:rgba(244,63,94,.6)}.card.mint:hover{border-color:rgba(16,185,129,.6)}.card.sky:hover{border-color:rgba(56,189,248,.6)}
.card.pink:hover h3{color:var(--rose4)}.card.mint:hover h3{color:var(--mint4)}.card.sky:hover h3{color:var(--sky4)}
.card h3{transition:color .3s}
.stats{display:grid;gap:18px}
.stat{padding:30px 26px;border-radius:var(--r);text-align:center;background:linear-gradient(180deg,rgba(15,23,42,.75),rgba(2,6,23,.6));border:1px solid rgba(30,41,59,.7);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.num{display:block;font-size:clamp(56px,8vw,76px);font-weight:900;line-height:1;letter-spacing:-.05em;color:var(--rose4);font-variant-numeric:tabular-nums}
.num small{font-size:.42em;letter-spacing:-.02em;margin-left:2px}
.num.mint-t{color:var(--mint4)}
.stat-l{display:block;margin-top:10px;font-size:15px;font-weight:600;color:var(--soft)}
.footnote{margin-top:22px;text-align:center;font-size:13.5px;color:var(--muted)}
.cta-sec{padding-bottom:110px}
.cta{position:relative;overflow:hidden;isolation:isolate;max-width:860px;margin:0 auto;padding:56px 26px;border-radius:32px;text-align:center;background:linear-gradient(160deg,rgba(15,23,42,.95),rgba(3,7,18,.95));border:1px solid rgba(51,65,85,.6);box-shadow:0 40px 90px -40px rgba(244,63,94,.45)}
.cta-glow{position:absolute;z-index:-1;inset:-40%;background:conic-gradient(from 0deg,rgba(244,63,94,.0),rgba(244,63,94,.35),rgba(16,185,129,.0),rgba(16,185,129,.3),rgba(244,63,94,0));animation:rot 14s linear infinite;opacity:.6}
.cta::after{content:"";position:absolute;z-index:-1;inset:1px;border-radius:31px;background:linear-gradient(160deg,#0b1120,#050912)}
@keyframes rot{to{transform:rotate(360deg)}}
.cta-wedge{width:88px;height:auto;margin:0 auto 18px;filter:drop-shadow(0 18px 24px rgba(244,63,94,.45));animation:float 5s ease-in-out infinite}
.cta h2{font-size:clamp(34px,5vw,54px);font-weight:900;letter-spacing:-.04em;color:#fff}
.cta p{max-width:520px;margin:14px auto 0;color:var(--muted);font-size:17px}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}

/* scroll reveals */
/* hidden-until-revealed only when JS can run (no html.js class flip = no full-page restyle at startup) */
@media (scripting:enabled){
.reveal{opacity:0;transform:translateY(28px)}
.reveal.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.stagger>.reveal.in:nth-child(2){transition-delay:.1s}
.stagger>.reveal.in:nth-child(3){transition-delay:.2s}
.stagger>.reveal.in:nth-child(4){transition-delay:.3s}
.stagger>.reveal.in:nth-child(5){transition-delay:.4s}
.stagger>.reveal.in:nth-child(6){transition-delay:.5s}
.stagger>.reveal.in:hover{transition-delay:0s}
}

/* ---------- footer ---------- */
.site-footer{position:relative;z-index:1;border-top:1px solid rgba(15,23,42,.95);padding:30px 0 40px}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.footer-meta{font-size:13.5px;color:var(--muted)}
.footer-meta a{color:var(--soft)}

/* ---------- simple pages (privacy, thanks, under-13, 404) ---------- */
.doc{position:relative;z-index:1;padding:40px 0 80px}
.doc-card{max-width:760px;margin:0 auto;padding:40px clamp(22px,5vw,52px);border-radius:28px;background:rgba(15,23,42,.8);border:1px solid var(--line);box-shadow:0 40px 80px -40px #000;animation:rise .8s var(--ease) both}
.doc-card h1{font-size:clamp(32px,5vw,46px);margin:0 0 14px}
.doc-card h2{font-size:21px;margin:34px 0 10px;color:#fff}
.doc-card p,.doc-card li{color:var(--soft);font-size:16px}
.doc-card p+p{margin-top:12px}
.doc-card ul{list-style:disc;padding-left:22px;display:grid;gap:8px}
.doc-card li::marker{color:var(--rose4)}
.doc-card strong{color:#fff}
.doc-card code{font-size:.9em;padding:2px 6px;border-radius:6px;background:rgba(2,6,23,.9);border:1px solid var(--line);color:#fecdd3}
.updated{font-size:14px;color:var(--muted)!important}
.tldr{margin:20px 0 8px;padding:16px 18px;border-radius:18px;background:rgba(16,185,129,.08);border:1px solid rgba(52,211,153,.3)}
.tldr p{color:#d1fae5}
.doc-icon{width:64px;height:64px;margin-bottom:18px;border-radius:20px;display:grid;place-items:center;background:rgba(244,63,94,.12);border:1px solid rgba(251,113,133,.35)}
.doc-icon.ok{color:var(--mint4);background:rgba(16,185,129,.14);border-color:rgba(52,211,153,.4)}
.doc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.big-404{font-size:clamp(90px,18vw,150px);font-weight:900;line-height:1;letter-spacing:-.06em;margin-bottom:6px}
.doc-center{text-align:center}.doc-center .doc-icon{margin-inline:auto}.doc-center .doc-actions{justify-content:center}

/* ---------- responsive ---------- */
@media (max-width:560px){
  .hide-sm{display:none}
  .pill{font-size:12px;padding:6px 11px}
  .brand-word{font-size:18px}
  .brand-tile{width:36px;height:36px;border-radius:12px}
  .hero{padding-top:18px}
  .phone{width:270px;height:556px;border-radius:46px;padding:10px}
  .screen{border-radius:37px;gap:8px;padding:0 12px 12px}
  .paper{font-size:17px;line-height:23px;background-image:linear-gradient(90deg,transparent 22px,rgba(244,63,94,.4) 22px,rgba(244,63,94,.4) 23.5px,transparent 23.5px),repeating-linear-gradient(180deg,transparent 0,transparent 22px,rgba(56,189,248,.3) 22px,rgba(56,189,248,.3) 23px)}
  .paper b{line-height:23px}
  .chip-a{left:-14px;top:70px}.chip-b{right:-14px;top:282px}.chip-c{left:-10px;bottom:92px}
  .chip{font-size:11.5px;padding:7px 11px}
  .hand-top{transform:translateX(-50%) rotate(-4deg);font-size:21px;top:2px}
  .hand-arrow{display:none}
  .stage{padding-top:42px}
  .section{padding:68px 0}
  .title{margin-bottom:34px}
  .steps::before{display:none}
}
@media (min-width:561px){.join-form{grid-template-columns:1fr 170px}.btn-submit{grid-column:1/-1}}
@media (min-width:760px){
  .join-form{grid-template-columns:1fr 196px auto}.btn-submit{grid-column:auto;width:auto;padding:0 24px}
  .steps{grid-template-columns:repeat(3,1fr)}
  .steps::before{left:16%;right:16%;top:51px;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,var(--rose),var(--mint4),var(--sky4));transform-origin:left;transform:scaleX(0)}
  .steps.in::before{transform:scaleX(1)}
  .step{z-index:1}
  .cards{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(3,1fr)}
  .footer-inner{flex-direction:row;justify-content:space-between;text-align:left}
}
@media (min-width:1000px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .hero{padding:44px 0 70px}
  .hero-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:36px}
  .hero-copy{text-align:left;margin:0}
  .lede{margin:0}
  .join{margin-left:0}
  .micro{text-align:left}
  h1{font-size:clamp(48px,4.6vw,64px)}
  .drift{display:block}
}
@media (min-width:1220px){.hand-side{display:block;position:absolute;right:-150px;bottom:130px;transform:rotate(-5deg);font-size:23px}.hand-side::before{content:"\2190  ";}}
@media (min-width:1000px) and (max-width:1180px){.join-form{grid-template-columns:1fr 150px}.btn-submit{grid-column:1/-1;width:100%}}


/* ---------- privacy promise ---------- */
.kicker-mint{color:var(--mint4)}
#privacy-promise .title{margin-bottom:18px}
.promise-body{max-width:640px;margin:0 auto 44px;text-align:center;color:var(--muted);font-size:clamp(16px,1.8vw,18px);line-height:1.65;text-wrap:pretty}
.pillars .card{text-align:left}
@media (min-width:760px){.pillars{grid-template-columns:repeat(3,1fr)}}
.cta-promise{display:inline-flex;align-items:flex-start;gap:8px;max-width:520px;margin:20px auto 0!important;font-size:14px!important;line-height:1.5;color:var(--soft,var(--muted))!important;text-align:left}
.cta-promise .i{width:18px;height:18px;color:var(--mint4);margin-top:1px}
@media (prefers-contrast:more){.promise-body,.pillars .card p,.cta-promise{color:#e2e8f0!important}.pillars .card{border-color:rgba(148,163,184,.7)}}
@media (forced-colors:active){.pillars .card{border:1px solid CanvasText}}


/* ---------- performance (no-lag pass) ---------- */
/* layout from the typing demo stays inside the phone screen */
.screen{contain:layout paint}
/* below-the-fold sections skip rendering until they get close */
/* placeholder sizes = measured real heights (390px / 1440px), so the scrollbar and #anchors don't jump */
#how,#why,#honest,.cta-sec,.site-footer{content-visibility:auto}
#how{contain-intrinsic-size:auto 888px}#why{contain-intrinsic-size:auto 1453px}#honest{contain-intrinsic-size:auto 684px}.cta-sec{contain-intrinsic-size:auto 512px}.site-footer{contain-intrinsic-size:auto 145px}
@media (min-width:700px){#how{contain-intrinsic-size:auto 470px}#why{contain-intrinsic-size:auto 769px}#honest{contain-intrinsic-size:auto 340px}.cta-sec{contain-intrinsic-size:auto 402px}.site-footer{contain-intrinsic-size:auto 42px}}
@media (min-width:1000px){#how{contain-intrinsic-size:auto 400px}#why{contain-intrinsic-size:auto 560px}#honest{contain-intrinsic-size:auto 345px}.cta-sec{contain-intrinsic-size:auto 418px}}
/* phones: the mockup sits below the fold, so skip its (heavy) first layout until it scrolls near */
@media (max-width:999px){.concept{content-visibility:auto;contain-intrinsic-size:auto 673px}}
/* cap always-on animations: 4 drifting widgets (not 6), one chip holds still */
.w5,.w6{display:none}
.chip-c{animation:none}
/* hero glow pauses with the hero */
.hero-off .g1{animation-play-state:paused}
/* will-change only while the pointer is actually tilting the phone */
.tilt.tilting{will-change:transform}
/* phones: no backdrop blur, fewer always-on layers */
@media (max-width:760px),(pointer:coarse){
  .site-header.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(3,7,18,.94)}
  .g1,.phone::after{animation:none}
  .g1{opacity:.85}
  .chip-b,.chip-c,.cta-wedge{animation:none}
  .cta-wedge{filter:none}
}

/* pause animations offscreen / hidden tab (set by app.js) */
.is-off,.is-off *,.is-off *::before,.is-off *::after,.tab-hidden *,.tab-hidden *::before,.tab-hidden *::after{animation-play-state:paused!important}

/* ---------- reduced motion: fully static ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
  .steps::before{transform:none!important}
  .drift{display:none!important}
  .marquee{-webkit-mask:none;mask:none}
  .mq-row{flex-wrap:wrap;justify-content:center;flex:1;padding:0 20px}
  .mq-dup{display:none}
  .tilt{transform:none!important}
  .shimmer{background-position:0 0}
}
/* overflow guards (round 2) */
html{overflow-x:clip}
.hero-copy,.concept,.join,.join-card{min-width:0}
.result .btn{max-width:100%;white-space:normal;text-align:center}
@media (max-width:420px){.result .btn{font-size:14px;padding-inline:16px}}
.nw{white-space:nowrap}
.doc-card code{white-space:nowrap}.doc-card ul+p{margin-top:12px}