:root{
  --ink:#16151a;--paper:#f7f5ff;--muted:#5b5a66;--line:#16151a1f;
  --green:#06b050;--green-2:#22c55e;--pink:#ec4899;--pink-2:#f472b6;--violet:#7c3aed;--teal:#14b8a6;--blue:#3b82f6;
  --display:"Bricolage Grotesque","Plus Jakarta Sans",system-ui,-apple-system,Arial,sans-serif;--sans:"Plus Jakarta Sans",system-ui,-apple-system,Arial,sans-serif;--mono:"DM Mono",ui-monospace,Menlo,monospace;--human:"Kalam","Bricolage Grotesque",cursive;
  --grad:linear-gradient(90deg,#22c55e,#14b8a6 12%,#3b82f6 25%,#8b5cf6 37%,#ec4899 50%,#8b5cf6 63%,#3b82f6 75%,#14b8a6 88%,#22c55e);
  --grad-static:linear-gradient(110deg,#22c55e,#14b8a6 28%,#8b5cf6 64%,#ec4899);
  --ease:cubic-bezier(.22,1,.36,1);
  --cursor-x:50vw;--cursor-y:40vh;--scroll-progress:0%;--parallax-y:0px;
}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1;margin:0;text-wrap:balance}
/* heading accent words: the same bold display font, filled with a slowly shifting colour gradient */
em.fx{font-family:var(--display);font-style:normal;font-weight:800;letter-spacing:-.035em;padding:0 .05em .12em 0;display:inline-block;line-height:1.02;
  color:#0a9a4a;background:linear-gradient(100deg,#06b050,#14b8a6,#3b82f6,#8b5cf6,#ec4899,#06b050) 0 0/200% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradShift 7s linear infinite}
/* on the pastel sections the same gradient uses deeper tones so the words stay easy to read */
.modes em.fx,.progress-section em.fx,.join em.fx{color:#14532d;background-image:linear-gradient(100deg,#047857,#0f766e,#1d4ed8,#6d28d9,#be185d,#047857)}
@keyframes gradShift{to{background-position:200% 0}}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.site-shell{position:relative;overflow:clip}
.site-shell:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(280px circle at var(--cursor-x) var(--cursor-y),#ec48990f,transparent 70%)}
.page-progress{position:fixed;top:0;left:0;height:3px;width:var(--scroll-progress);z-index:50;background:linear-gradient(90deg,#16a34a,#22c55e 55%,#4ade80)}
.grain:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* ---------- nav (bigger) ---------- */
.nav-wrap{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:26px 5vw;transition:padding .4s var(--ease),background .4s,box-shadow .4s,backdrop-filter .4s}
.nav-wrap.scrolled{padding:14px 5vw;background:#f7f5ffcc;-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 var(--line)}
.wordmark{display:inline-flex;align-items:center}
.wordmark img{height:38px;width:auto;display:block;transition:height .4s var(--ease)}
.nav-wrap.scrolled .wordmark img{height:32px}
.nav-links{display:flex;gap:38px;font-size:15.5px;font-weight:500;color:#3f3e48}
.nav-links a{position:relative;padding:4px 0;transition:color .25s}
.nav-links a:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--grad-static);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover:after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:14px}
.menu-button{display:none;width:46px;height:46px;border-radius:50%;align-items:center;justify-content:center;border:1px solid var(--line);background:#ffffffa6}

/* ---------- buttons ---------- */
.pill{display:inline-flex;align-items:center;gap:16px;border-radius:999px;padding:16px 22px 16px 26px;font-size:15px;font-weight:600;color:var(--ink);
  background:var(--grad-static);transition:transform .25s var(--ease),box-shadow .3s,background-position .6s;position:relative;isolation:isolate}
.pill svg{transition:transform .3s var(--ease)}
.pill:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px #ec489980}
.pill:hover svg{transform:translate(3px,-3px)}
.pill:active{transform:scale(.97)}
.pill-dark{background:var(--ink);color:#fff}
.pill-dark:hover{box-shadow:0 14px 34px -12px #16151a99}
/* main call-to-action (waitlist) — lighter */
.pill-light{background:linear-gradient(110deg,#bbf7d0,#fbcfe8 52%,#ddd6fe);color:#14532d;box-shadow:inset 0 0 0 1px #ffffffb3,0 8px 24px -14px #ec489966}
.pill-light:hover{box-shadow:inset 0 0 0 1px #fff,0 16px 34px -14px #ec4899a6}
.nav-cta{padding:7px 8px 7px 20px;font-size:14.5px;gap:12px}
/* waitlist calls-to-action: the nav one is dark, the hero/join ones are the bright gradient */
.pill-light.nav-cta{background:var(--ink);color:#fff;box-shadow:0 10px 24px -14px #16151a99}
.pill-light.nav-cta:hover{box-shadow:0 14px 30px -12px #7c3aedaa}
.nav-cta svg{width:30px;height:30px;padding:7px;border-radius:50%;background:var(--grad-static);color:#fff}
.pill-light.pill-hero{padding:9px 9px 9px 28px;gap:18px;color:#fff;font-size:16px;letter-spacing:.01em;
  background:linear-gradient(110deg,#16a34a,#14b8a6 30%,#7c3aed 68%,#ec4899 100%);background-size:200% 100%;
  box-shadow:0 18px 36px -14px #7c3aedb3,inset 0 1px 0 #ffffff59;animation:ctaFlow 6s ease-in-out infinite alternate}
.pill-light.pill-hero:hover{box-shadow:0 22px 44px -14px #ec4899cc,inset 0 1px 0 #ffffff80}
.pill-hero svg{width:38px;height:38px;padding:11px;border-radius:50%;background:#fff;color:var(--ink)}
@keyframes ctaFlow{to{background-position:100% 0}}
.text-link{display:inline-flex;align-items:center;gap:9px;font-size:15px;color:#4a4954;transition:color .25s}
.text-link:hover{color:var(--ink)}
.text-link svg{transition:transform .3s var(--ease)}
.text-link:hover svg{transform:translateY(3px)}

/* ---------- reveal transitions ---------- */
[data-reveal]{opacity:0;transform:translateY(40px);filter:blur(6px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);transition-delay:var(--d,0s)}
[data-reveal].is-visible{opacity:1;transform:none;filter:none}
[data-reveal="left"]{transform:translateX(-50px)}
[data-reveal="right"]{transform:translateX(50px)}
[data-reveal="zoom"]{transform:scale(.94)}
.fade-edges{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 160px,#000 calc(100% - 160px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 160px,#000 calc(100% - 160px),transparent 100%)}
.fade-bottom{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 180px),transparent 100%);mask-image:linear-gradient(to bottom,#000 calc(100% - 180px),transparent 100%)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:3vw;padding:150px 5vw 120px;
  background:radial-gradient(ellipse 60% 70% at 74% 42%,#f0abfc 0,#c4b5fd 30%,#93c5fd 55%,#f7f5ff 88%)}
.hero-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;opacity:.75}
.orb-a{width:420px;height:420px;background:#f472b6;top:8%;right:8%;animation:orbA 14s ease-in-out infinite alternate}
.orb-b{width:360px;height:360px;background:#4ade80;bottom:4%;left:30%;opacity:.45;animation:orbB 17s ease-in-out infinite alternate}
.orb-c{width:300px;height:300px;background:#818cf8;top:30%;left:-6%;opacity:.4;animation:orbA 19s ease-in-out infinite alternate-reverse}
@keyframes orbA{to{transform:translate(-80px,60px) scale(1.15)}}
@keyframes orbB{to{transform:translate(90px,-50px) scale(.9)}}
.hero-copy{position:relative;z-index:2;padding-left:4vw}
.hero h1{font-size:clamp(76px,10vw,172px);line-height:.95;letter-spacing:-.04em;font-weight:800}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.22em;margin-bottom:-.14em}
.hero h1 .line>span{display:inline-block;transform:translateY(105%);animation:lineUp 1.1s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes lineUp{to{transform:none}}
.hero h1 em.fx{font-size:1em}
.hero-sub{max-width:430px;font-size:19px;line-height:1.55;color:#3f3e48;margin:26px 0 0}
.hero-actions{display:flex;align-items:center;gap:30px;margin-top:38px;flex-wrap:wrap}
.fade-in{opacity:0;transform:translateY(20px);animation:fadeUp 1s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* ---------- phone (app-like, interactive) ---------- */
.hero-product{position:relative;z-index:3;justify-self:center}
.phone-tilt{position:relative;transform:perspective(1400px) rotateY(var(--rx,-8deg)) rotateX(var(--ry,4deg)) rotateZ(2deg);transition:transform .6s var(--ease)}
.phone{position:relative;width:350px;height:720px;border-radius:58px;padding:11px;background:linear-gradient(145deg,#3a3a40,#0c0c0e 40%,#1d1d22);
  box-shadow:0 0 0 2px #55555c,0 50px 90px -30px #3b0a4fcc,0 30px 60px -20px #00000066,inset 0 0 0 3px #000}
.phone:before{content:"";position:absolute;right:-4px;top:170px;width:4px;height:78px;border-radius:0 3px 3px 0;background:#2a2a2f}
.phone:after{content:"";position:absolute;left:-4px;top:140px;width:4px;height:44px;border-radius:3px 0 0 3px;background:#2a2a2f;box-shadow:0 70px 0 #2a2a2f}
.screen{position:relative;width:100%;height:100%;border-radius:48px;overflow:hidden;background:#faf8f2;color:#10241a;font-family:var(--sans);display:flex;flex-direction:column}
.statusbar{height:50px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:6px 26px 0 32px;font-size:14px;font-weight:600;position:relative;z-index:5}
.island{position:absolute;left:50%;top:11px;transform:translateX(-50%);width:104px;height:30px;border-radius:20px;background:#000}
.sb-icons{display:flex;gap:5px;align-items:center}
.views{position:relative;flex:1;min-height:0}
.view{position:absolute;inset:0;display:flex;flex-direction:column;padding:0 16px;opacity:0;transform:translateX(24px);pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.view.is-active{opacity:1;transform:none;pointer-events:auto}
.view.is-left{transform:translateX(-24px)}
.app-head{display:flex;align-items:center;justify-content:space-between;height:40px;flex:none}
.app-head img{height:21px;width:auto;display:block}
.today{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 10px;flex:none}
.today b{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.03em}
/* hearts: 3 slots, one conversation each. Pink = in use, outline = free, grey with hours = resting after a pass */
.slots{display:flex;align-items:center;gap:4px}
.slots .slot{display:inline-flex;align-items:center;gap:2px;font:500 9.5px/1 var(--mono);color:#9a9788}
.slots .slot svg{width:17px;height:17px;fill:none;stroke:#c9c3b4;stroke-width:2;transition:fill .3s,stroke .3s,transform .3s}
.slots .slot.used svg{fill:#ec4899;stroke:#ec4899}
.slots .slot.cool svg{fill:#d9d4c6;stroke:#d9d4c6}
.slots small{margin-left:4px;font:500 10px/1 var(--mono);color:#6b7a72}
@keyframes nowPulse{50%{box-shadow:0 0 0 8px #ec489900}}
.card-stage{position:relative;flex:1;min-height:0}
.pcard{position:absolute;inset:0;border-radius:26px;overflow:hidden;background:#10241a;box-shadow:0 18px 30px -18px #10241a99;transition:transform .55s var(--ease),opacity .45s var(--ease)}
.pcard.enter{animation:cardIn .6s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.95)}}
.pcard.out-left{transform:translateX(-120%) rotate(-12deg);opacity:0}
.pcard.out-up{transform:translateY(-30%) scale(.9);opacity:0}
.pcard-img{position:absolute;inset:-30px;background-size:cover;background-position:center;filter:blur(var(--blur,18px)) saturate(1.2);transition:filter .9s var(--ease)}
.pcard-img.flip{transform:scaleX(-1)}
.pcard-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0000 35%,#0b1a12d9 100%)}
.pcard-top{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center}
.lvl{font-family:var(--mono);font-size:10px;color:#fff;background:#00000040;border:1px solid #ffffff40;border-radius:999px;padding:5px 9px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lvl-dots{display:flex;gap:4px}
.lvl-dots i{width:7px;height:7px;border-radius:50%;background:#ffffff4d;transition:background .4s,transform .4s}
.lvl-dots i.on{background:#fff;transform:scale(1.15)}
.pcard-info{position:absolute;left:16px;right:16px;bottom:14px;color:#fff}
.pcard-info h3{font-family:var(--display);font-size:34px;letter-spacing:-.03em;line-height:1}
.pcard-info p{margin:4px 0 9px;font-size:12px;opacity:.85}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chips span{font-size:10.5px;padding:5px 9px;border-radius:999px;background:#ffffff26;border:1px solid #ffffff4d;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.chips span:before{content:"⚑ ";color:#86efac}
.prompt{flex:none;margin-top:10px;background:#fff;border-radius:18px;padding:11px 12px;box-shadow:0 1px 0 #e7e2d6}
.prompt .q{font-size:12px;color:#6b7a72;margin:0 0 8px;display:flex;justify-content:space-between}
.prompt .q b{color:#10241a;font-weight:600}
.opts{display:flex;gap:6px}
.opts button{flex:1;font-size:11.5px;font-weight:500;padding:9px 6px;border-radius:12px;background:#f2efe6;color:#10241a;transition:background .3s,transform .2s,color .3s}
.opts button:hover{background:#e8f4ec}
.opts button:active{transform:scale(.96)}
.opts button.pick{background:var(--green);color:#fff}
.opts button:disabled{opacity:1;cursor:default}
.opts button{display:flex;align-items:center;gap:6px;text-align:left}
.opts button i{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:700 10px/1 var(--mono);font-style:normal;background:#10241a14;color:#10241a}
.opts button.pick i{background:#ffffff40;color:#fff}
.ptag{display:flex;align-items:center;gap:6px;margin:0 0 7px;font-size:11px;font-weight:700;color:var(--green);letter-spacing:.01em}
.ptag svg{width:14px;height:14px;animation:ptagBob 1.1s ease-in-out infinite}
.psub{margin:7px 0 0;font-size:10px;color:#6b7a72}
.prompt.nudge{box-shadow:0 0 0 2px #06b05066,0 10px 24px -14px #06b050;animation:nudge 1.8s ease-in-out infinite}
.prompt.nudge .opts button{background:#e8f4ec}
@keyframes nudge{50%{box-shadow:0 0 0 5px #06b05022,0 10px 24px -14px #06b050}}
@keyframes ptagBob{50%{transform:translateY(3px)}}
.opts button.miss{opacity:.45}
.actions{flex:none;display:flex;align-items:center;justify-content:center;gap:22px;padding:12px 0 10px}
.act{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#6b7a72;box-shadow:0 6px 16px -8px #10241a59,0 0 0 1px #ece7db;transition:transform .2s var(--ease),box-shadow .3s}
.act:hover{transform:translateY(-2px)}
.act:active{transform:scale(.9)}
.act-heart{width:64px;height:64px;color:#fff;background:linear-gradient(135deg,#ec4899,#f472b6 50%,#a855f7);box-shadow:0 12px 24px -10px #ec4899b3}
.act-heart svg{width:28px;height:28px}
.act-heart:disabled{filter:grayscale(1);opacity:.5;cursor:not-allowed}
.tabbar{flex:none;height:70px;display:flex;justify-content:space-around;align-items:flex-start;padding:9px 10px 0;background:#fffffff2;border-top:1px solid #ece7db;position:relative;z-index:4}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:#93a097;width:62px;transition:color .3s}
.tab svg{width:22px;height:22px;transition:transform .35s var(--ease)}
.tab.is-active{color:var(--green)}
.tab.is-active svg{transform:translateY(-2px)}
.home-ind{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:120px;height:5px;border-radius:3px;background:#10241a;z-index:6}
.toast{pointer-events:none;position:absolute;left:16px;right:16px;top:58px;z-index:8;background:#10241a;color:#fff;font-size:12.5px;border-radius:16px;padding:11px 14px;display:flex;gap:9px;align-items:center;
  transform:translateY(-140%);opacity:0;transition:transform .5s var(--ease),opacity .4s}
.toast.show{transform:none;opacity:1}
.toast svg{color:#f472b6;flex:none}
.burst{position:absolute;pointer-events:none;color:#ec4899;z-index:9;animation:burst 1s var(--ease) forwards}
@keyframes burst{to{transform:translate(var(--bx),var(--by)) scale(.4) rotate(var(--br));opacity:0}}
.plus{position:absolute;z-index:9;pointer-events:none;font-family:var(--mono);font-size:13px;font-weight:500;color:#fff;background:var(--green);border-radius:999px;padding:5px 10px;animation:plusUp 1.2s var(--ease) forwards}
@keyframes plusUp{0%{opacity:0;transform:translateY(10px)}20%{opacity:1}100%{opacity:0;transform:translateY(-46px)}}
.done-card{position:absolute;inset:0;border-radius:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:24px;
  background:linear-gradient(160deg,#e8f4ec,#fce7f3 60%,#ede9fe);animation:cardIn .6s var(--ease) both}
.done-card h3{font-family:var(--display);font-size:26px;letter-spacing:-.03em}
.done-card p{font-size:12.5px;color:#4b5a52;margin:0;line-height:1.45}
.done-card button{margin-top:8px;font-size:12px;font-weight:600;background:#10241a;color:#fff;border-radius:999px;padding:10px 16px}
/* other tabs */
.vh{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.03em;margin:8px 2px 14px}
.chat-row{display:flex;gap:12px;align-items:center;padding:12px;border-radius:18px;background:#fff;margin-bottom:9px;box-shadow:0 1px 0 #e7e2d6;animation:cardIn .5s var(--ease) both}
.av{width:46px;height:46px;border-radius:50%;flex:none;background-size:cover;background-position:50% 12%;filter:blur(3px);position:relative}
.chat-row b{font-size:14px;display:block}
.chat-row small{font-size:11.5px;color:#6b7a72}
.chat-row .tag{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--green);background:#e8f4ec;border-radius:999px;padding:4px 8px;white-space:nowrap}
.chat-row .tag.wait{color:#be185d;background:#fce7f3}
.bubble{max-width:84%;font-size:12.5px;line-height:1.45;padding:10px 13px;border-radius:18px;margin-bottom:8px;animation:cardIn .5s var(--ease) both}
.bubble.ira{background:#fff;border-bottom-left-radius:6px;box-shadow:0 1px 0 #e7e2d6}
.bubble.me{background:var(--green);color:#fff;margin-left:auto;border-bottom-right-radius:6px}
.ira-id{display:flex;align-items:center;gap:8px;font-size:12px;color:#6b7a72;margin-bottom:10px}
.ira-id i{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#ec4899,#8b5cf6);display:block}
.quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-bottom:12px}
.quick button{font-size:11.5px;padding:8px 11px;border-radius:999px;background:#fff;border:1px solid #d9e9de;color:#1e7a4d;transition:background .3s}
.quick button:hover{background:#e8f4ec}
.score{display:grid;place-items:center;margin:4px 0 14px;position:relative}
.score svg{width:150px;height:150px;transform:rotate(-90deg)}
.score circle{fill:none;stroke-width:12}
.score .track{stroke:#ece7db}
.score .meter{stroke:url(#scoreGrad);stroke-linecap:round;stroke-dasharray:377;stroke-dashoffset:377;transition:stroke-dashoffset 1.4s var(--ease)}
.score-num{position:absolute;text-align:center}
.score-num b{font-family:var(--display);font-size:42px;display:block;line-height:1}
.score-num small{font-size:10px;color:#6b7a72;font-family:var(--mono)}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat-grid div{background:#fff;border-radius:16px;padding:12px;box-shadow:0 1px 0 #e7e2d6}
.stat-grid b{font-family:var(--display);font-size:22px;display:block}
.stat-grid small{font-size:10.5px;color:#6b7a72}
@keyframes bob{50%{transform:translateY(-12px)}}
.tap-hint{position:absolute;bottom:-46px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:12px;color:#4a4954;display:flex;align-items:center;gap:8px;white-space:nowrap}
.tap-hint i{width:8px;height:8px;border-radius:50%;background:var(--pink);animation:nowPulse 1.6s infinite;box-shadow:0 0 0 4px #ec489933}

/* ---------- marquee transition strip ---------- */
.marquee{position:relative;z-index:2;overflow:hidden;padding:26px 0;border-block:1px solid var(--line);background:#fff}
.marquee-track{display:flex;width:max-content;gap:0;animation:marquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{display:inline-flex;align-items:center;gap:26px;padding-right:26px;font-family:var(--display);font-weight:600;font-size:clamp(26px,3vw,40px);letter-spacing:-.035em;white-space:nowrap}
.marquee span svg{color:var(--pink);width:22px;height:22px}
.marquee span:nth-child(3n+2) svg{color:var(--green)}
.marquee span:nth-child(3n) svg{color:var(--violet)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{position:relative}
.section-pad{padding:150px 10vw}
h2{font-size:clamp(54px,7vw,108px)}
.lead{font-family:var(--display);font-weight:600;font-size:24px;line-height:1.28;letter-spacing:-.03em}
.body-copy{color:var(--muted);font-size:16px;line-height:1.65}

/* statement: text removed, image up, button under image */
.statement-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:6vw;max-width:1280px;margin:0 auto;align-items:center}
.statement h2{font-size:clamp(44px,4.8vw,80px)}
.rule-line{display:flex;align-items:flex-start;gap:10px;margin:26px 0 0;max-width:30em;font-size:clamp(15px,1.3vw,18px);line-height:1.5;color:var(--muted)}
.rule-line b{color:var(--ink)}
.rule-line svg{flex:none;width:20px;height:20px;margin-top:3px;color:var(--pink);fill:var(--pink)}
.statement-media{display:flex;flex-direction:column;align-items:flex-start;gap:30px}
.editorial-image{position:relative;width:100%;height:560px;margin:0;overflow:hidden;border-radius:28px;background:linear-gradient(135deg,#b9d88a,#d6eab0 60%,#e8f5c8)}
.editorial-image:before{content:"";position:absolute;inset:22px;border:1px solid #ffffff40;border-radius:16px;z-index:2;pointer-events:none}
.solo:before{display:none}
.solo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 88%}
.editorial-image.solo figcaption{color:#fff;text-shadow:0 2px 18px #00000066}
.editorial-image.solo figcaption em{color:#fbcfe8}
.editorial-image figcaption{position:absolute;left:36px;top:34px;z-index:3;color:#173a14;font-family:var(--display);font-weight:800;font-size:42px;line-height:1;letter-spacing:-.03em}
.editorial-image figcaption em{font-style:normal;color:#be185d}
.statement-media{position:relative}

/* modes */
/* The two big gradients below are drawn as SVG in the box's own 0-1 coordinates, so they stretch with the section and look the same on every
   screen. (A CSS angle like 160deg bends differently on a tall phone section than on a wide laptop one.) The direction is the laptop's 160deg.
   Colours: modes #fbcfe8 > #fce7f3 34% > #fdf2f8 68% > #fde4f1.   levels #5eead4 > #7dd3fc 55% > #c4b5fd. */
.modes{background:#fdf2f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3ClinearGradient id='g' x1='.2568' y1='-.1035' x2='.7432' y2='1.1035'%3E%3Cstop offset='0' stop-color='%23fbcfe8'/%3E%3Cstop offset='.34' stop-color='%23fce7f3'/%3E%3Cstop offset='.68' stop-color='%23fdf2f8'/%3E%3Cstop offset='1' stop-color='%23fde4f1'/%3E%3C/linearGradient%3E%3Crect width='1' height='1' fill='url(%23g)'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.modes svg.fx-spark{color:#ec4899}.modes svg.fx-heart{color:#f472b6}.modes svg.fx-heart:nth-child(odd){color:#c084fc}
.modes-intro{max-width:680px;margin-bottom:70px}
.modes-intro p{color:#4a3a45;font-size:18px;line-height:1.6;max-width:430px;margin-top:28px}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.mode-card{position:relative;min-height:480px;padding:30px;border-radius:28px;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s}
.mode-card:hover{transform:translateY(-6px);box-shadow:0 40px 70px -40px #3b0a4fa6}
.card-top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.card-light{background:#ffffffd9}
.card-green{background:linear-gradient(125deg,#d1fae5,#ccfbf1 32%,#e0e7ff 66%,#fce7f3);background-size:200% 200%;color:var(--ink);animation:cardFlow 10s ease-in-out infinite alternate}
@keyframes cardFlow{to{background-position:100% 100%}}
.reveal-profile{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:100px}
.reveal-avatar{position:relative;width:150px;height:150px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 6px #ffffff,0 0 0 7px #c4b5fd}
.reveal-avatar .ra-img{position:absolute;inset:-20px;background-size:cover;background-position:50% 10%;filter:blur(16px);transition:filter 1s var(--ease)}
.revealed .reveal-avatar .ra-img{filter:blur(2px)}
.reveal-lines{display:flex;flex-direction:column;gap:10px}
.reveal-lines span{font-family:var(--mono);font-size:12px;color:#5b5a66}
.reveal-lines span:first-child{font-family:var(--display);font-size:30px;color:var(--ink);letter-spacing:-.03em}
.revealed .reveal-lines span{animation:fadeUp .6s var(--ease) both}
.card-btn{position:absolute;left:30px;bottom:30px;display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;border-bottom:1.5px solid currentColor;padding-bottom:7px;transition:gap .3s var(--ease)}
.card-btn:hover{gap:15px}
.flash-display{display:flex;flex-direction:column;align-items:center;margin-top:84px}
.flash-display strong{font-family:var(--mono);font-size:58px;letter-spacing:.08em;margin-top:14px;color:#14532d}
.flash-display span{font-family:var(--mono);font-size:12px;margin-top:10px}
.is-flashing{animation:flashPulse .7s both}
@keyframes flashPulse{50%{transform:scale(1.08);filter:drop-shadow(0 0 30px #fff)}}
.mode-card .corner-art{position:absolute;right:-50px;bottom:-50px;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0,#fbcfe8 45%,#c7d2fe 100%);opacity:.8}

/* stateside */
.stateside h2{font-size:clamp(44px,4.8vw,80px)}
.stateside-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:8vw;max-width:1280px;margin:0 auto;align-items:center}
.stateside .lead{font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--muted);letter-spacing:0;max-width:420px;margin:30px 0 34px}
.map-card{position:relative;min-height:500px;border-radius:28px;overflow:hidden;background:linear-gradient(140deg,#6ee7b7,#5eead4 50%,#7dd3fc)}
.map-card:before{content:"";position:absolute;inset:22px;border:1px solid #16151a2e;border-radius:16px}
.map-grid-lines{position:absolute;inset:0;background-image:linear-gradient(#16151a1f 1px,#0000 1px),linear-gradient(90deg,#16151a1f 1px,#0000 1px);background-size:46px 46px;transform:rotate(14deg) scale(1.3)}
/* the subcontinent: pins and route sit in .map-geo, which has the same shape as the outline, so they land on the right states at any card size */
.map-geo{position:absolute;left:50%;top:50%;width:min(80%,380px);aspect-ratio:580.5/664.8;transform:translate(-50%,-50%)}
.map-india{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.map-india path{vector-effect:non-scaling-stroke}
.map-india .mi-outline{fill:#fff;stroke:#1a1a1a;stroke-width:1.5px;stroke-linejoin:round}
.map-india .mi-borders{fill:none;stroke:#c4c4c4;stroke-width:.75px;stroke-linejoin:round}
.gf-route{position:absolute;inset:0;width:100%;height:100%}
.gf-route polyline{fill:none;stroke:#16151a;stroke-opacity:.5;stroke-width:1.4;stroke-dasharray:6 7;animation:dash 2.5s linear infinite}
@keyframes dash{to{stroke-dashoffset:-26}}
.map-pin{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#86efac;font-family:var(--mono);font-size:11px;border:6px solid #22c55ecc;z-index:2}
.map-pin:after{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid currentColor;opacity:0;animation:ping 2.6s ease-out infinite;animation-delay:var(--d,0s)}
@keyframes ping{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}
.pin-1{top:23.5%;left:37.2%;color:#5eead4;border-color:#14b8a6cc}
.pin-2{top:47.4%;left:13.3%;color:#f9a8d4;border-color:#ec4899cc;--d:.6s}
.pin-3{top:58.8%;left:25.8%;--d:1.2s}
.pin-4{top:87.0%;left:34.6%;color:#c4b5fd;border-color:#8b5cf6cc;--d:1.8s}
.map-copy{position:absolute;left:42px;bottom:40px;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;z-index:2}

/* progress / story with abstract images */
.progress-section{background:#7dd3fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3ClinearGradient id='g' x1='.2874' y1='-.1016' x2='.7126' y2='1.1016'%3E%3Cstop offset='0' stop-color='%235eead4'/%3E%3Cstop offset='.55' stop-color='%237dd3fc'/%3E%3Cstop offset='1' stop-color='%23c4b5fd'/%3E%3C/linearGradient%3E%3Crect width='1' height='1' fill='url(%23g)'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.progress-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:60px}
.progress-head p{max-width:300px;color:#21303a;font-size:16px;line-height:1.6;margin:0}
.story-visual{position:relative;margin:0 0 56px;aspect-ratio:686/382;max-height:640px;border-radius:28px;overflow:hidden;background:#b9d88a;box-shadow:0 40px 80px -50px #0b1a2bcc}
.story-visual .sv{position:absolute;inset:0;background:linear-gradient(135deg,#b9d88a,#d6eab0 62%,#e8f5c8);opacity:0;transform:scale(1.08);transition:opacity 1.1s var(--ease),transform 6s linear}
.story-visual .sv.on{opacity:1;transform:scale(1)}
/* the photographs get a fine film grain (the level photos have it baked in): it hides pixel edges and looks like photography, unlike a blur */
.trust-art picture:after,.solo picture:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
/* one photo per level, each filling the frame */
.sv picture,.sv img{position:absolute;inset:0;display:block;width:100%;height:100%}
.sv img{object-fit:cover}
.story-visual:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#0000 38%,#0b1a12b3 100%)}
.story-visual figcaption{position:absolute;left:40px;bottom:36px;z-index:2;color:#fff;font-family:var(--display);font-size:clamp(34px,4vw,60px);letter-spacing:-.04em;line-height:1;text-shadow:0 6px 30px #0000004d}
.story-visual figcaption small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;opacity:.85}
.story-visual .cap-swap{display:inline-block;animation:fadeUp .7s var(--ease) both}
.progress-rail{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.progress-rail:before{content:"";position:absolute;top:14px;left:0;right:0;border-top:1px solid #16151a33}
.rail-fill{position:absolute;top:13px;left:0;height:3px;border-radius:3px;background:linear-gradient(90deg,#ec4899,#8b5cf6);width:var(--rail,0%);transition:width .8s var(--ease)}
.progress-step{text-align:left;padding-right:30px;position:relative}
.step-dot{position:relative;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;margin-bottom:24px;background:#fff;border:1px solid #16151a33;font-family:var(--mono);font-size:11px;color:#5b5a66;transition:all .4s var(--ease)}
.progress-step span{font-family:var(--display);font-size:28px;letter-spacing:-.03em;transition:color .3s}
.progress-step p{color:#21303a;font-size:14px;line-height:1.5;max-width:180px;margin:8px 0 0}
.progress-step:hover .step-dot{border-color:var(--violet);color:var(--violet)}
.progress-step.active .step-dot{background:var(--violet);border-color:var(--violet);color:#fff;transform:scale(1.15);box-shadow:0 0 0 6px #7c3aed2e}
.progress-step.active span{color:#5b21b6}

/* trust */
.trust-title{max-width:1280px;margin:0 auto 60px;font-size:clamp(34px,6.2vw,96px)}
@media (min-width:768px){.trust-title{white-space:nowrap}}
@media (max-width:767px){.trust-title{font-size:clamp(40px,12vw,58px)}}
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw;max-width:1280px;margin:0 auto;align-items:stretch}
.trust-grid>div:first-child{display:flex}
.trust-art{position:relative;margin:0;flex:1;min-height:440px;border-radius:28px;overflow:hidden;background:#2b2b2b}
.trust-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 88%}
.trust-art figcaption{position:absolute;left:36px;top:34px;color:#fff;font-family:var(--display);font-weight:800;font-size:42px;letter-spacing:-.03em;line-height:1;text-shadow:0 2px 18px #0000004d}
.trust-art figcaption em{font-style:normal;color:#fbcfe8}
.trust-copy .lead{color:#3f3e48}
.trust-list{border-top:1px solid #16151a26;margin-top:40px}
.trust-list>div{display:flex;gap:18px;align-items:flex-start;padding:24px 0;border-bottom:1px solid #16151a26;transition:padding .35s var(--ease)}
.trust-list>div:hover{padding-left:10px}
.trust-list svg{color:var(--pink);flex:none;margin-top:3px}
.trust-list>div:nth-child(2) svg{color:var(--green)}
.trust-list>div:nth-child(3) svg{color:var(--violet)}
.trust-list b{display:block;font-family:var(--display);font-size:21px;font-weight:500}
.trust-list small{display:block;margin-top:5px;font-size:14px;color:var(--muted)}

/* join */
.join{text-align:center;padding:170px 6vw 150px;background:radial-gradient(ellipse 70% 60% at 50% 30%,#fff1f8 0,#f5e8ff 42%,#e4fbf1 88%),#fdf7ff}
/* variations of the waitlist background: add ?join=b or ?join=c to the address (a is the default) */
html[data-join="b"] .join{background:radial-gradient(ellipse 80% 70% at 30% 20%,#e6fbf3 0,#dff6ff 45%,#fdeefa 90%),#f4fcfa}
html[data-join="c"] .join{background:radial-gradient(ellipse 80% 70% at 70% 25%,#fff3e6 0,#ffe9ef 45%,#f1eaff 90%),#fff8f2}
.join svg.fx-heart{color:#f9a8d4}.join svg.fx-heart:nth-child(even){color:#f472b6}.join svg.fx-spark{color:#c4b5fd}.join svg.fx-spark:nth-child(even){color:#86efac}
.join>*{position:relative;z-index:2}
.waitlist-qr{display:block;width:84px;margin:0 auto 26px;border-radius:14px;transition:transform .2s ease}
.waitlist-qr:hover,.waitlist-qr:focus-visible{transform:scale(1.06)}
.waitlist-logo{width:84px;height:84px;margin:0;display:block;border-radius:14px;background:#fff;padding:8px;box-shadow:0 14px 30px -18px #a78bfa99}
.join h2{max-width:1100px;margin:0 auto;font-size:clamp(46px,6.4vw,104px)}
.join>p{max-width:min(100%,760px);margin:26px auto 0;color:#3a3a46;font-size:18px;line-height:1.55}
@media (min-width:560px){.join>p{white-space:nowrap}}
.gf-waitlist{display:flex;max-width:660px;margin:40px auto 0;background:#fffffff2;border:1px solid #fff;border-radius:999px;padding:6px;box-shadow:0 18px 40px -26px #c084fc99;flex-wrap:wrap}
.join .pill-light.pill-hero{background:linear-gradient(110deg,#bbf7d0,#fbcfe8 55%,#ddd6fe);color:#14532d;animation:none;box-shadow:inset 0 0 0 1px #fff,0 12px 26px -16px #ec489966}
.join .pill-light.pill-hero:hover{box-shadow:inset 0 0 0 1px #fff,0 16px 32px -14px #ec4899a6}
.join .pill-hero svg{background:#fff;color:#14532d}
.gf-waitlist input{flex:1;min-width:0;border:0;background:transparent;padding:14px 18px;font:inherit;font-size:15px;color:var(--ink);outline:0}
.gf-waitlist input+input{border-left:1px solid #16151a1f}
.gf-waitlist button{border-radius:999px;padding:6px 6px 6px 22px;font-size:15px}
.gf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.gf-status{font-size:15px;line-height:1.5;margin:16px auto 0;max-width:440px;flex-basis:100%}
.gf-ok{font-family:var(--display);font-size:24px}
.gf-err{color:#b42318}
button:disabled{opacity:.6;cursor:progress}

/* contact */
.gf-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw;max-width:1280px;margin:0 auto;align-items:start}
.gf-contact .lead{font-family:var(--sans);font-size:17px;line-height:1.6;letter-spacing:0;color:var(--muted);max-width:420px;margin:30px 0 0}
.social-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.social-row a{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:999px;background:#fff;border:1px solid #16151a1a;font-size:14px;font-weight:500;transition:transform .25s var(--ease),border-color .25s,box-shadow .3s}
.social-row a:hover{transform:translateY(-2px);border-color:var(--pink);box-shadow:0 12px 24px -14px #ec489999}
.social-row svg{width:18px;height:18px}
.gf-contact-form{display:flex;flex-direction:column;gap:18px}
.gf-contact-form label{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600}
.gf-contact-form input,.gf-contact-form textarea{font:inherit;font-weight:400;font-size:16px;color:var(--ink);background:#fff;border:1px solid #16151a26;border-radius:16px;padding:15px 17px;outline:0;transition:border-color .25s,box-shadow .25s}
.gf-contact-form input:focus,.gf-contact-form textarea:focus{border-color:var(--violet);box-shadow:0 0 0 4px #7c3aed1f}
.gf-contact-form textarea{resize:vertical;min-height:140px}
.gf-contact-form .pill{align-self:flex-start}
.gf-contact-done{font-family:var(--display);font-size:26px;align-self:center}

/* footer (bigger) */
.gf-footer{position:relative;padding:70px 5vw 44px;background:#16151a;color:#d9d7e3;overflow:hidden}
.gf-footer:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad-static)}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.foot-brand img{height:44px;width:auto;display:block}
.foot-brand p{font-family:var(--display);font-size:24px;letter-spacing:-.02em;color:#fff;margin:18px 0 0;max-width:340px;line-height:1.2}
.foot-brand p em{font-style:normal;color:#f9a8d4}
.foot-cols{display:flex;gap:70px;flex-wrap:wrap}
.foot-cols h4{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#8e8c9a;margin:0 0 16px}
.foot-cols a{display:flex;align-items:center;gap:10px;font-size:16px;padding:6px 0;color:#e8e6f0;transition:color .25s,transform .25s var(--ease)}
.foot-cols a:hover{color:#f9a8d4;transform:translateX(4px)}
.foot-cols svg{width:18px;height:18px}
.foot-big{font-family:var(--display);font-size:clamp(70px,15vw,230px);letter-spacing:-.07em;line-height:.85;margin:70px 0 30px;color:transparent;-webkit-text-stroke:1px #ffffff33;white-space:nowrap;user-select:none}
.foot-legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:13px;color:#8e8c9a;padding-top:26px;border-top:1px solid #ffffff1a}
.foot-legal a:hover{color:#fff}
.foot-credit{margin:14px 0 0;font-family:var(--mono);font-size:11px;color:#8e8c9a}
.foot-credit a{text-decoration:underline;text-underline-offset:2px}
.foot-credit a:hover{color:#fff}

/* ---------- responsive ---------- */
@media (max-width:1100px){
}
@media (max-width:900px){
  .nav-wrap{padding:16px 5vw}
  .wordmark img{height:30px}
  .nav-links{display:none;position:absolute;top:72px;right:5vw;flex-direction:column;gap:18px;padding:22px 26px;background:#fffffff2;border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 40px -20px #16151a40}
  .nav-links.open{display:flex;animation:fadeUp .35s var(--ease)}
  .menu-button{display:flex}
  .nav-cta{display:none}
  .hero{display:flex;flex-direction:column;align-items:stretch;gap:80px;padding:130px 6vw 120px}
  /* Background on stacked layouts (phones, tablets): the same picture as on a laptop (taken at 1440px wide), measured from the centre of the
     phone: --px across (centred) and --py down (468px above the bottom, 420px on small phones). The sizes are the laptop's own px sizes, so the
     colours look the same on every screen instead of stretching with the height of the page. */
  .hero{--px:50%;--py:calc(100% - 468px);
    background:radial-gradient(ellipse 864px 693px at calc(var(--px) - 14px) calc(var(--py) - 106px),#f0abfc 0,#c4b5fd 30%,#93c5fd 55%,#f7f5ff 88%) no-repeat,#f7f5ff}
  .orb-a{right:auto;bottom:auto;left:calc(var(--px) - 175px);top:calc(var(--py) - 443px)}
  .orb-b{bottom:auto;left:calc(var(--px) - 648px);top:calc(var(--py) + 68px)}
  .orb-c{left:calc(var(--px) - 1166px);top:calc(var(--py) - 225px)}
  .hero-copy{padding-left:0}
  .hero h1{font-size:clamp(80px,23vw,150px)}
  .join h2{font-size:clamp(46px,13vw,90px)}
  .hero-sub{font-size:17px}
  .hero-product{align-self:center}
  .section-pad{padding:100px 7vw}
  .statement-grid,.stateside-grid,.trust-grid,.gf-contact-grid{grid-template-columns:1fr;gap:50px}
  .editorial-image{height:420px}
  .trust-art{min-height:380px}
  .editorial-image figcaption{left:26px;top:26px;font-size:34px}
  .trust-art figcaption{left:26px;top:26px;font-size:34px}
  .mode-grid{grid-template-columns:1fr}
  .mode-card{min-height:420px}
  .progress-head{flex-direction:column;align-items:flex-start}
  .story-visual{height:320px;aspect-ratio:auto}
  .progress-rail{grid-template-columns:1fr;gap:28px}
  .progress-rail:before{border-top:0;border-left:1px solid #16151a33;inset:0 auto 0 14px}
  .rail-fill{display:none}
  .progress-step{display:grid;grid-template-columns:30px 1fr;column-gap:18px;padding:0}
  .step-dot{grid-row:span 2;margin:0}
  .progress-step span{font-size:23px}
  .progress-step p{grid-column:2;margin-top:4px}
  .join{padding:120px 7vw 110px}
  .gf-waitlist{flex-direction:column;border-radius:26px;gap:4px}
  .gf-waitlist input+input{border-left:0;border-top:1px solid #16151a1f}
  .gf-waitlist button{justify-content:center}
  .gf-contact-form .pill{align-self:stretch;justify-content:center}
  .foot-cols{gap:44px}
}
@media (max-width:420px){
  .phone{zoom:.86}
  .hero{--py:calc(100% - 420px)}   /* the phone is smaller here, so its centre is closer to the bottom */
    .reveal-profile{flex-direction:column;margin-top:60px;text-align:center}
  .reveal-avatar{width:130px;height:130px}
}
@media (hover:none){.site-shell:before{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none;filter:none}
}

.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}.i.f{fill:currentColor}

/* ---- added: consent line, confirmation banner ---- */
.gf-banner{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:100;display:flex;gap:14px;align-items:center;max-width:min(560px,calc(100vw - 32px));background:#10241a;color:#fff;font-size:14px;line-height:1.45;border-radius:16px;padding:13px 14px 13px 18px;box-shadow:0 18px 40px -18px #0008}
.gf-banner.is-warn{background:#3b1d0a}
.gf-banner button{flex:none;background:#ffffff1f;color:#fff;border:0;border-radius:50%;width:28px;height:28px;font-size:18px;line-height:1;cursor:pointer}

/* ---- added: graphics layer. Decorative SVGs (.fx) sit behind each section's content and only move while on screen ---- */
.fx-host{position:relative;isolation:isolate}
.fx-deco{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fx-deco *{animation-play-state:paused!important}
.fx-deco.is-on *{animation-play-state:running!important}
svg.fx{position:absolute;left:var(--x);top:var(--y);width:var(--s,28px);height:auto;color:var(--c,#16151a);overflow:visible;opacity:.9;animation:fxFloat var(--t,8s) ease-in-out var(--d,0s) infinite alternate}
.fx-heart{fill:currentColor;stroke:none}
.fx-spark{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;animation-name:fxTwinkle;animation-direction:normal}
.fx-heart[style*="--rise"]{animation-name:fxRise;animation-direction:normal;animation-timing-function:ease-out}
.fx-plane{left:-80px;fill:none;color:#16151a;opacity:.55;animation:fxPlane var(--t,18s) linear infinite}
@keyframes fxFloat{0%{transform:translate3d(0,0,0) rotate(-6deg)}100%{transform:translate3d(10px,-26px,0) rotate(8deg)}}
@keyframes fxTwinkle{0%,100%{transform:scale(.45) rotate(0);opacity:.15}50%{transform:scale(1.1) rotate(25deg);opacity:1}}
@keyframes fxRise{0%{transform:translate3d(0,30px,0) scale(.6);opacity:0}15%{opacity:.9}100%{transform:translate3d(18px,-230px,0) scale(1.1) rotate(14deg);opacity:0}}
@keyframes fxDraw{to{stroke-dashoffset:0}}
@keyframes fxPlane{0%{transform:translate3d(0,0,0) rotate(6deg)}50%{transform:translate3d(55vw,-34px,0) rotate(-5deg)}100%{transform:translate3d(115vw,10px,0) rotate(6deg)}}
/* the trust icons draw themselves in */
.trust-list svg{stroke-dasharray:90;stroke-dashoffset:90;transition:stroke-dashoffset 1.4s .3s ease-out}
.trust-copy.is-visible .trust-list svg{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  svg.fx{animation:none!important}
  .fx-spark{opacity:.7}.fx-heart[style*="--rise"]{opacity:.35}.fx-plane{left:14%}
  .trust-list svg{stroke-dashoffset:0}
}

/* ---- added: comic layer. One ink line runs down the edge of every section and meets the next section's line at the boundary
        (js builds the path from each section's size); speech bubbles, bursts and caption boxes sit along it. Only animates on screen. ---- */
/* the one line: an overlay on the whole page, built by app.js from every section's data-xin / data-xout, so the section fades cannot cut it */
.cmx-trail{position:absolute;left:0;top:0;width:100%;overflow:visible;pointer-events:none;z-index:3}
.cmx-trail path{fill:none;stroke-linecap:round;stroke-linejoin:round}
/* ink line variations (?ink=): b = one fine line (default), a = the original thick black line with a pink shadow, c = a green-to-pink line */
.cmx-guide{display:none;stroke:#16151a;stroke-opacity:.2;stroke-width:2;stroke-dasharray:2 9}
.cmx-ink2{display:none;stroke:#f472b6;stroke-width:5;stroke-dasharray:100;stroke-dashoffset:100;transform:translate(3px,2px);transition:stroke-dashoffset .4s linear}
.cmx-ink{stroke:url(#pageInk);stroke-width:1.8;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .4s linear}
html[data-ink="a"] .cmx-guide,html[data-ink="a"] .cmx-ink2{display:inline}
html[data-ink="a"] .cmx-ink{stroke:#16151a;stroke-opacity:1;stroke-width:3}
html[data-ink="c"] .cmx-ink{stroke:url(#inkGrad);stroke-opacity:1;stroke-width:2.4}
.cmx{position:absolute;left:var(--x);top:var(--y);width:var(--w,auto);transform-origin:50% 60%;animation:cmxPop .7s cubic-bezier(.3,1.6,.5,1) var(--d,0s) both}
.cmx>svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(3px 3px 0 #16151a22);animation:cmxWob 5s ease-in-out 1s infinite alternate}
.cmx-dots{position:absolute;width:260px;height:260px;opacity:.22;background:radial-gradient(circle,#16151a 1.7px,transparent 2.3px) 0 0/12px 12px}
.cmx-dots-bl{left:0;bottom:0;-webkit-mask-image:radial-gradient(circle at 0 100%,#000 0,transparent 72%);mask-image:radial-gradient(circle at 0 100%,#000 0,transparent 72%)}
.cmx-dots-br{right:0;bottom:0;-webkit-mask-image:radial-gradient(circle at 100% 100%,#000 0,transparent 72%);mask-image:radial-gradient(circle at 100% 100%,#000 0,transparent 72%)}
.cmx-dots-tl{left:0;top:0;-webkit-mask-image:radial-gradient(circle at 0 0,#000 0,transparent 72%);mask-image:radial-gradient(circle at 0 0,#000 0,transparent 72%)}
@keyframes cmxPop{0%{transform:scale(0) rotate(-18deg);opacity:0}100%{transform:scale(1) rotate(var(--r,-3deg));opacity:1}}
@keyframes cmxWob{0%{transform:rotate(-2deg) translateY(0)}100%{transform:rotate(2.5deg) translateY(-6px)}}
@media (max-width:1100px){.cmx-big,.cmx-dots{display:none}}
@media (max-width:700px){html[data-ink="a"] .cmx-ink2{stroke-width:4}html[data-ink="a"] .cmx-ink{stroke-width:2.5}}
@media (prefers-reduced-motion:reduce){
  .cmx,.cmx>svg,.cmx-ink,.cmx-ink2{animation:none!important}
  .cmx{transform:rotate(var(--r,-3deg))}.cmx-ink,.cmx-ink2{stroke-dashoffset:0}
}

/* ---- added: two stick people on their phones. Every section's bottom band is a tiny comic panel; they start at opposite corners and
        get closer section by section (texting, a buzz, waving, walking, jumping, holding hands, walking off together). ---- */
.sf-scene{position:absolute;left:0;right:0;bottom:6px;height:122px;pointer-events:none}
.sf-pos{position:absolute;bottom:0;width:64px;height:104px;margin-left:-32px}
.sf-pos-a{left:var(--a)}.sf-pos-b{left:var(--b)}
.sf{position:relative;width:64px;height:104px;transform-origin:50% 100%;animation:cmxPop .7s cubic-bezier(.3,1.6,.5,1) .3s both}
.sf-B{animation-delay:.55s}
.sf-in{position:absolute;inset:0}
.sf-B .sf-in svg{transform:scaleX(-1)}
.sf svg{display:block;width:64px;height:104px;overflow:visible;fill:none;stroke:#16151a;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.sf svg *{transform-box:view-box}
.sf-skull{fill:#fff}.sf-eye{fill:#16151a;stroke:none}.sf-smile{stroke-width:1.8}.sf-hair{stroke-width:3}
.sf-phone rect{stroke-width:2}
.sf-head{transform-origin:32px 24px}.sf-armL,.sf-armR{transform-origin:32px 32px}.sf-legL,.sf-legR{transform-origin:32px 62px}.sf-torso{transform-origin:32px 62px}
.sf-link{position:absolute;left:var(--a);right:calc(100% - var(--b));top:44px;border-top:3px dotted #16151a;opacity:.38}
.sf-msg{position:absolute;top:35px;left:var(--a);width:16px;height:16px;margin-left:-8px;background:#ec4899;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.500 2C10.500 3.500 9.300 3 7.500 3A5.500 5.500 0 0 0 2 8.500c0 2.300 1.500 4 3 5.500l7 7Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.500 2C10.500 3.500 9.300 3 7.500 3A5.500 5.500 0 0 0 2 8.500c0 2.300 1.500 4 3 5.500l7 7Z'/%3E%3C/svg%3E") center/contain no-repeat;animation:sfMsg 3.4s ease-in-out infinite}
.sf-msg-r{animation-direction:reverse;animation-delay:1.2s}
.sf-bigheart{position:absolute;left:50%;top:-18px;width:34px;height:34px;margin-left:-17px;fill:#ec4899;stroke:#16151a;stroke-width:1.2;animation:sfBeat 1s ease-in-out infinite}
/* speech: typing dots or a word */
.sf-say{position:absolute;top:-4px;left:46px;min-width:34px;height:22px;padding:0 7px;display:flex;align-items:center;justify-content:center;gap:3px;background:#fff;border:2.5px solid #16151a;border-radius:11px;font:700 12px/1 var(--human);color:#16151a;font-style:normal;white-space:nowrap}
.sf-B .sf-say{left:auto;right:46px}
.sf-say b{width:4px;height:4px;border-radius:50%;background:#16151a;animation:sfDot 1s ease-in-out infinite}
.sf-say b:nth-child(2){animation-delay:.15s}.sf-say b:nth-child(3){animation-delay:.3s}
.sf-late .sf-say b{animation-delay:.5s}
/* poses (static) */
.sf-text .sf-armR{transform:rotate(-30deg)}.sf-text .sf-armL{transform:rotate(-119deg)}.sf-text .sf-head{transform:rotate(9deg)}
.sf-buzz .sf-armR{transform:rotate(-30deg)}.sf-buzz .sf-armL{transform:rotate(-119deg)}
.sf-wave .sf-armL{transform:rotate(140deg)}
.sf-jump .sf-armL{transform:rotate(135deg)}.sf-jump .sf-armR{transform:rotate(-135deg)}
.sf-hold .sf-armR{transform:rotate(-45deg)}.sf-hold .sf-phone{display:none}
/* actions */
.sf-text .sf-armL{animation:sfTap .38s ease-in-out infinite alternate}
.sf-text .sf-phone rect{animation:sfGlow 1.4s ease-in-out infinite alternate}
.sf-buzz .sf-phone{animation:sfShake .14s linear infinite}
.sf-buzz .sf-in{animation:sfStartle 1.6s ease-in-out infinite}
.sf-wave .sf-armL{animation:sfWave .55s ease-in-out infinite alternate}
.sf-jump .sf-in{animation:sfJump .8s cubic-bezier(.3,0,.4,1) infinite}
.sf-late.sf-jump .sf-in{animation-delay:.15s}
.sf-walk .sf-legL{animation:sfLeg .55s ease-in-out infinite alternate}
.sf-walk .sf-legR{animation:sfLeg .55s ease-in-out infinite alternate-reverse}
.sf-walk:not(.sf-hold) .sf-armL{animation:sfLeg .55s ease-in-out infinite alternate-reverse}
.sf-walk .sf-torso{animation:sfBob .275s ease-in-out infinite alternate}
.sf-go-r .sf-in{animation:sfGoR 5s ease-in-out infinite alternate}
.sf-go-l .sf-in{animation:sfGoL 5s ease-in-out infinite alternate}
.sf-sway .sf-in{animation:sfSway 1.1s ease-in-out infinite alternate}
.sf-away .sf-in{animation:sfAway 9s linear infinite}
.sf-away.sf-B .sf-in{animation-name:sfAway}
@keyframes sfTap{from{transform:rotate(-119deg)}to{transform:rotate(-109deg)}}
@keyframes sfGlow{from{fill-opacity:.55}to{fill-opacity:1}}
@keyframes sfShake{0%{transform:translate(0,0)}25%{transform:translate(-1.5px,1px)}50%{transform:translate(1.5px,-1px)}75%{transform:translate(-1px,-1.5px)}100%{transform:translate(0,0)}}
@keyframes sfStartle{0%,70%,100%{transform:translateY(0)}78%{transform:translateY(-8px)}86%{transform:translateY(0)}}
@keyframes sfWave{from{transform:rotate(112deg)}to{transform:rotate(162deg)}}
@keyframes sfJump{0%,100%{transform:translateY(0)}45%{transform:translateY(-22px)}}
@keyframes sfLeg{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}
@keyframes sfBob{from{transform:translateY(0)}to{transform:translateY(-2.5px)}}
@keyframes sfGoR{from{transform:translateX(0)}to{transform:translateX(34px)}}
@keyframes sfGoL{from{transform:translateX(0)}to{transform:translateX(-34px)}}
@keyframes sfSway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes sfAway{0%{transform:translateX(0);opacity:1}82%{transform:translateX(30vw);opacity:1}100%{transform:translateX(34vw);opacity:0}}
@keyframes sfMsg{0%{left:var(--a);opacity:0;transform:translateY(0) scale(.6)}12%{opacity:1}50%{transform:translateY(-14px) scale(1)}88%{opacity:1}100%{left:var(--b);opacity:0;transform:translateY(0) scale(.6)}}
@keyframes sfBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}
@keyframes sfDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-3px);opacity:1}}
@media (max-width:900px){.sf-scene{height:98px;bottom:4px}.sf-pos{transform:scale(.8);transform-origin:50% 100%}.sf-link{top:36px}.sf-msg{top:28px}}
@media (max-width:700px){.sf-say-t{display:none}.sf-scene{height:84px;bottom:6px}.sf-pos{transform:scale(.68)}.sf-link{top:30px}.sf-msg{top:23px}.sf-scene-hero .sf-link,.sf-scene-hero .sf-msg{display:none}.sf-bigheart{top:2px;width:24px;height:24px;margin-left:-12px}}
@media (prefers-reduced-motion:reduce){
  .sf,.sf *,.sf-msg,.sf-bigheart,.sf-say b{animation:none!important}
  .sf-msg{left:50%;opacity:1}
}

/* stick people variations (?sf=): a = original line figures; b = soft flat figures (default); c = none; d = like b, but hidden on phones */
html:is([data-sf="b"],[data-sf="d"]) .sf svg{stroke-width:4.6}
html:is([data-sf="b"],[data-sf="d"]) .sf-A svg{stroke:#f472b6}
html:is([data-sf="b"],[data-sf="d"]) .sf-B svg{stroke:#22c55e}
html:is([data-sf="b"],[data-sf="d"]) .sf-A .sf-skull{fill:#f472b6}
html:is([data-sf="b"],[data-sf="d"]) .sf-B .sf-skull{fill:#22c55e}
html:is([data-sf="b"],[data-sf="d"]) :is(.sf-hair,.sf-eye,.sf-smile){display:none}
html:is([data-sf="b"],[data-sf="d"]) .sf-phone rect{fill:#fff;stroke-width:2.6}
html:is([data-sf="b"],[data-sf="d"]) .sf-phone path{stroke-width:2}
html:is([data-sf="b"],[data-sf="d"]) .sf-link{border-top:2px dotted #a78bfa;opacity:.6}
html:is([data-sf="b"],[data-sf="d"]) .sf-say{border-width:2px;border-color:#a78bfa;color:#6d28d9;font:700 11px/1 var(--sans)}
html:is([data-sf="b"],[data-sf="d"]) .sf-say b{background:#a78bfa}
html:is([data-sf="b"],[data-sf="d"]) .sf-bigheart{stroke:#fff}
html[data-sf="c"] .sf-scene{display:none}
@media (max-width:700px){html[data-sf="d"] .sf-scene{display:none}}