.sechead{max-width:46rem;margin:0 auto var(--sp-gap);text-align:center}

/* hero */
.hero{min-height:calc(100vh - 32px);min-height:calc(100svh - 32px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,72px);align-items:center;padding-block:128px 56px}
.hero-copy{display:grid;gap:26px;justify-items:start}
.phone-wrap{display:grid;place-items:center;perspective:1300px}
.tapnote{margin:22px 0 0;text-align:center;color:var(--muted);font-size:.9375rem}
.facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.facts li{padding:7px 14px;border-radius:99px;border:1px solid var(--line);font-size:.875rem;font-weight:600;line-height:1.2}
@media (max-width:860px){.facts{justify-content:center}}
.hero h1.plain{font-size:clamp(2.3rem,6.2vw,4.5rem);line-height:1.04;max-width:14em} /* never wider than 14em, so on a tablet it wraps instead of touching the screen edges */
/* the paragraph is exactly as wide as the headline's longest line (hero-align.js sets --hw) and justified, so the two share their left and right edges at every screen size */
.hero .lead{max-width:min(34em,var(--hw,34em));text-align:justify;text-align-last:left;hyphens:auto;-webkit-hyphens:auto}
/* phone and tablet: the whole hero text block is left-aligned on one edge (headline, paragraph, facts, button) with natural line endings. A justified, centred block of four or five lines looked odd on a phone, and W3C's accessibility guidance advises against justified text (uneven gaps) */
@media (max-width:860px){
  .hero .hero-copy{justify-items:start;text-align:left}
  .hero .lead{max-width:34em;text-align:left;text-align-last:auto;hyphens:manual;-webkit-hyphens:manual}
  .facts{justify-content:flex-start}
}
@media (max-width:860px){.hero{grid-template-columns:1fr;padding-top:112px}.hero-copy{justify-items:center;text-align:center}} /* phone and split screen: centre the headline, paragraph, button and small print */

/* phone mock: run <-> walk, drawn from the design */
.phone{position:relative;margin-inline:auto;--pw:min(300px,76vw);width:var(--pw);min-height:calc(var(--pw)*610/300);display:flex;flex-direction:column;border-radius:48px;padding:9px;background:linear-gradient(155deg,rgba(var(--fgr),.34),rgba(var(--fgr),.07));box-shadow:0 50px 90px -24px rgba(0,0,0,.55),inset 0 0 0 1px rgba(var(--fgr),.22);cursor:pointer;transform-style:preserve-3d;will-change:transform;-webkit-tap-highlight-color:transparent}
.screen{--sf:#F4EEFF;--sm:var(--spark);position:relative;flex:1 1 auto;border-radius:40px;overflow:hidden;isolation:isolate;color:var(--sf);display:flex;flex-direction:column;align-items:center;padding:56px 22px 26px}
:root[data-theme=light] .screen{--sf:#0B001F;--sm:#762EFF}
.layer{position:absolute;inset:0;z-index:-1}
.layer.walk{background:radial-gradient(110% 55% at 80% 10%,#2E1070,transparent 62%),radial-gradient(120% 70% at 0% 100%,#1B0A45,transparent 72%),#0B001F}
.layer.run{background:radial-gradient(100% 60% at 100% 45%,#4A1BB0,transparent 68%),radial-gradient(110% 65% at 20% 8%,#762EFF,transparent 62%),radial-gradient(120% 70% at 0% 100%,#2E1070,transparent 72%),#1B0A45}
:root[data-theme=light] .layer.walk{background:radial-gradient(110% 55% at 80% 10%,#D9C8FF,transparent 62%),radial-gradient(120% 70% at 0% 100%,#E8DEFF,transparent 72%),#F4EEFF}
:root[data-theme=light] .layer.run{background:radial-gradient(100% 60% at 100% 45%,#C2A8FF,transparent 68%),radial-gradient(110% 65% at 20% 8%,#A57BFF,transparent 62%),radial-gradient(120% 70% at 0% 100%,#D3BFFF,transparent 72%),#E6DAFF}
.island{position:absolute;top:11px;left:50%;translate:-50% 0;height:32px;padding:0 14px;border-radius:99px;background:#000;color:#fff;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;will-change:transform}
.island .pd{width:9px;height:9px;border-radius:50%;background:var(--spark);transition:background .4s}
.island.walk .pd{background:#cfc4ff}
.sc-top{font-size:14px;opacity:.95;margin-top:2px}
.sc-word{font-size:76px;line-height:1.1;font-weight:700;letter-spacing:-.04em;margin-top:92px}
.sc-time{font-size:34px;font-weight:600;margin-top:2px;opacity:.95}
.sc-sub{font-size:14px;opacity:.95;margin-top:2px}
/* the app's run-screen wave: the line flows, the dot marks where you are now. Class names start with w so they never clash with the mesh blobs' .b */
.wave{margin-top:auto;width:100%;height:64px;display:flex;justify-content:center;align-items:center;--dotbg:#4A1BB0}
.wave.w{--dotbg:#1B0A45}
:root[data-theme=light] .wave{--dotbg:#C9B0FF}
:root[data-theme=light] .wave.w{--dotbg:#E6DBFF}
.wave svg{overflow:visible}
.wave .wl{fill:none;stroke:var(--sf);stroke-opacity:.3;stroke-width:4;stroke-linecap:round}
.wave .wp{fill:none;stroke:var(--sm);stroke-width:4;stroke-linecap:round}
.wave .wo{fill:none;stroke:var(--sm);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.wave .wm{fill:var(--dotbg);stroke:var(--sm);stroke-width:3;transform-box:fill-box;transform-origin:center;transition:fill .9s}
.wave.live .wo{animation:ping 1.6s ease-out 5}
.wave.live .wm{animation:beat 1.6s ease-in-out 5}
@keyframes ping{0%{transform:scale(.6);opacity:.8}100%{transform:scale(2.3);opacity:0}}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.flip{display:block;margin:0;padding:0 .1em;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;border-radius:16px}
.orb{margin-top:18px;width:56px;height:56px;border:0;padding:0;color:inherit;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);transition:scale .4s var(--ease)} /* eases back to its resting size, no wobble */
:root[data-theme=light] .orb{background:rgba(255,255,255,.7)}
.orb svg{width:26px;height:26px;fill:currentColor}
.orb:active{scale:.82;transition-duration:.1s}
@media (prefers-reduced-motion:reduce){.orb{transition:none}}
.orb .pz,.orb .pl{transform-box:fill-box;transform-origin:center;transition:transform .35s var(--ease),opacity .25s}
.orb .pl{opacity:0;transform:scale(.4) rotate(-60deg)}
.orb.paused .pz{opacity:0;transform:scale(.4) rotate(60deg)}
.orb.paused .pl{opacity:1;transform:none}

/* rolling digits (numericText) */
.num{display:inline-flex;font-variant-numeric:tabular-nums;white-space:pre}
.dg{position:relative;display:inline-block;overflow:hidden;height:1.18em;line-height:1.18;vertical-align:top;padding-inline:.1em;margin-inline:-.1em}
.dv{display:block}
.rc{display:block;will-change:transform} /* the column of digits that rollDigits scrolls */
.rc .dv{height:1.18em} /* an exact row height: Safari rounds a 28.32px line to 28px, and the column is scrolled in steps of 1.18em, so by the last rows the digits sat up to 6px high with the next digit showing under them */
.dv.old{position:absolute;left:.1em;top:0}

.card.mint{background:var(--spark);color:var(--ink);border-color:transparent}
.card.mint .muted{color:rgba(11,0,31,.78)}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stepn{font-size:3.25rem;line-height:1;font-weight:700;letter-spacing:-.05em;color:var(--mark)}
.card.mint .stepn{color:var(--ink)}
/* the three steps: number on the left of the words, the cards hug their text, titles on one line across the row */
.reassure{margin:var(--sp-gap) auto 0;max-width:34rem;text-align:center;color:var(--muted);font-size:1.0625rem;line-height:1.5}
.card.step{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:18px;align-content:start;align-items:start;padding:24px 26px;border-radius:26px}
.step .stepn{grid-row:span 2;align-self:center;min-width:.62em}
.step h3{margin:0 0 6px;font-size:1.2rem}
.step p{font-size:1rem;line-height:1.5}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
@media (min-width:861px){.step .stepn{align-self:start}}

/* dots (closing section) */
.dots{display:grid;grid-template-rows:repeat(3,1fr);grid-auto-flow:column;grid-template-columns:repeat(9,1fr);gap:clamp(8px,1.6vw,14px);justify-items:center}
.dots i{width:100%;max-width:26px;aspect-ratio:1;border-radius:50%;background:var(--main)}
.dots i:last-child{background:var(--spark)}

/* feature grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid .card{display:grid;grid-template-rows:auto 1fr;gap:20px;align-content:start}
.vis{height:240px;display:grid;place-items:center;border-radius:20px;background:rgba(var(--fgr),.05);padding:18px;position:relative}
:root[data-theme=light] .vis{background:rgba(118,46,255,.08)}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
.moves{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.moves span{padding:8px 14px;border-radius:99px;border:1px solid var(--line);font-size:0.875rem;font-weight:550;animation:lit 7.5s 2;animation-play-state:paused}
.moves.in span{animation-play-state:running}
.moves span:nth-child(2){animation-delay:1.5s}.moves span:nth-child(3){animation-delay:3s}.moves span:nth-child(4){animation-delay:4.5s}.moves span:nth-child(5){animation-delay:6s}
@keyframes lit{0%,16%{background:var(--main);color:var(--panel);border-color:transparent}20%,100%{background:transparent}}
.bpm{display:grid;gap:8px;width:100%;justify-items:center;align-content:center}
.wv{position:relative;width:100%;max-width:300px;--p:0%;--bh:40px;touch-action:pan-y;cursor:pointer;user-select:none;-webkit-user-select:none} /* pan-y: a sideways drag moves the tempo, an up or down drag still scrolls the page */
.wv .bars{display:flex;align-items:flex-end;justify-content:space-between;height:var(--bh)}
.wv .bars i{width:2.5px;height:calc(var(--h,.2)*100%);border-radius:2px;background:rgba(var(--fgr),.28);transform-origin:bottom;transition:height .18s ease-out,background .2s}
.wv .bars i.on{background:var(--mark);animation:shim 1.3s ease-in-out 3 alternate;animation-delay:calc(var(--i)*40ms)}
@keyframes shim{from{transform:scaleY(.94)}to{transform:scaleY(1.05)}}
.wv .trk{position:relative;height:8px;margin-top:2px;border-radius:99px;background:rgba(var(--fgr),.16)}
.wv .fill{position:absolute;inset:0 auto 0 0;width:var(--p);border-radius:99px;background:var(--mark)}
.wv input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;pointer-events:none}
.wv:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:6px;border-radius:10px} /* keyboard only, never on click */
.bpmv{font-size:1.05rem;font-weight:650;display:flex;gap:6px;align-items:baseline}
.bpmv .big{font-size:2rem;letter-spacing:-.03em}
.fan{position:relative;height:130px;width:150px}
.fan i{position:absolute;left:50%;top:0;width:96px;height:124px;margin-left:-48px;border-radius:14px;transition:transform .6s var(--ease);box-shadow:0 10px 28px -8px rgba(0,0,0,.45);display:grid;place-items:center;font-style:normal;font-size:0.8125rem;font-weight:650}
.fan i:nth-child(1){background:var(--main);color:var(--panel);transform:rotate(-6deg)}
.fan i:nth-child(2){background:#fff;color:var(--ink);transform:rotate(0deg) translateY(-2px);z-index:2}
.fan i:nth-child(3){background:var(--panel);color:var(--ink);transform:rotate(6deg)}
.card:hover .fan i:nth-child(1){transform:translateX(-46px) rotate(-14deg)}
.card:hover .fan i:nth-child(3){transform:translateX(46px) rotate(14deg)}
.fan svg{width:78px;height:92px}
.health{display:grid;gap:10px;width:100%;font-size:0.9375rem}
.health div{display:grid;gap:2px;padding:10px 14px;border-radius:14px;background:rgba(var(--fgr),.06)}
.health b{font-weight:600;font-size:0.875rem;color:var(--muted)}
.health .yes{color:var(--mark);font-weight:700}

/* the run: coverflow of cards (position, rotation, depth and scale follow the distance from the centre card; no autoplay) */
.cf{outline:none}
.cf:focus-visible{outline:3px solid var(--focus);outline-offset:8px;border-radius:30px}
.cf-nav{display:none}
.cf.on{overflow-x:clip;padding-block:10px}
.cf.on .grid{grid-template-columns:1fr;gap:0;perspective:1200px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.cf.on .cf-slide{grid-area:1/1;justify-self:center;width:calc((100% - 24px)/3);background:var(--slide);backdrop-filter:none;-webkit-backdrop-filter:none;will-change:transform,opacity;cursor:pointer}
.cf.on .cf-slide.cur{cursor:auto}
.cf.ready .cf-slide{transition:transform .65s var(--ease),opacity .45s}
.cf.on .cf-nav{display:flex;justify-content:center;margin-top:18px}
.cf-dots{display:flex;gap:4px}
.cf-dots button{width:32px;height:32px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.cf-dots button::after{content:"";width:9px;height:9px;border-radius:5px;background:rgba(var(--fgr),.55);transition:width .45s var(--ease),background .3s}
.cf-dots button[aria-current=true]::after{width:26px;background:var(--mark)}
@media (max-width:860px){.cf.on .cf-slide{width:min(88%,420px)}.cf.on .cf-slide:not(.cur)>*{opacity:0}.cf.ready .cf-slide>*{transition:opacity .45s}}
@media (prefers-reduced-motion:reduce){.cf.ready .cf-slide,.cf.ready .cf-slide>*{transition:none}.cf.on .grid{perspective:none}}
/* a slide is the same box as a step */
.grid .cf-slide{gap:12px;padding:22px 26px;border-radius:26px}
.cf-slide .vis{height:auto;min-height:96px;padding:6px 12px;border-radius:16px}
.cf-slide h3{margin:0 0 6px;font-size:1.2rem}
.cf-slide p{font-size:1rem;line-height:1.5}
.cf-slide .moves{gap:6px}
.cf-slide .moves span{padding:5px 11px;font-size:.8125rem;white-space:nowrap}
.cf-slide .wv{--bh:34px}
.cf-slide .bpmv{line-height:1.2}
.cf-slide .bpmv .big{font-size:1.5rem}
.cf-slide .fan{scale:.62;margin-block:-25px}
.cf-slide .health{grid-template-columns:1fr 1fr;gap:8px;font-size:.8125rem}
.cf-slide .health div{padding:8px 10px}
/* bigger on desktop (after the base slide rules so it wins) */
@media (min-width:861px){
  .cf.on .cf-slide{width:min(520px,48%)}
  .grid .cf-slide{gap:16px;padding:30px 34px;border-radius:32px}
  .cf-slide .vis{min-height:150px;padding:10px 18px;border-radius:22px}
  .cf-slide h3{margin:0 0 8px;font-size:1.55rem}
  .cf-slide p{font-size:1.125rem}
  .cf-slide .moves{gap:8px}
  .cf-slide .moves span{padding:8px 15px;font-size:.9375rem}
  .cf-slide .wv{--bh:56px;max-width:340px}
  .cf-slide .bpmv{font-size:1.15rem}
  .cf-slide .bpmv .big{font-size:2.1rem}
  .cf-slide .fan{scale:.95;margin-block:0}
  .cf-slide .health{gap:10px;font-size:1rem}
  .cf-slide .health div{padding:12px 14px}
}

/* faq */
.faq{display:grid;gap:10px;max-width:50rem;margin-inline:auto}
.faq details{border:1px solid var(--line);border-radius:22px;background:var(--card);box-shadow:var(--lift)}   /* no backdrop blur here: it made Safari stall about 100 ms while a row opens, which showed as a jump */
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 24px;font-size:1.1rem;font-weight:620;letter-spacing:-.01em;border-radius:22px}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{flex:none;width:28px;height:28px;position:relative;border-radius:50%;background:rgba(var(--fgr),.1);transition:rotate .5s cubic-bezier(.25,.8,.25,1),background .5s cubic-bezier(.25,.8,.25,1)}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;margin-top:-1px;background:currentColor;border-radius:2px}
.faq .pm::after{rotate:90deg}
.faq details.is-open .pm{rotate:45deg;background:var(--main);color:var(--panel)}
@media (scripting:none){.faq details[open] .pm{rotate:45deg;background:var(--main);color:var(--panel)}}
.faq .ans{overflow:hidden}
.faq .ans p{padding:0 24px 22px;color:var(--muted);max-width:42em}

.contact,.close{text-align:center;justify-items:center;display:grid;gap:22px}
.mail{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:calc(var(--sp-gap) - 22px)}
.mailalt{font-size:.9375rem;color:var(--muted)}
.mailalt a{color:var(--fg);text-underline-offset:3px;padding:8px 2px}
.mail .btn{font-size:clamp(1rem,3.4vw,1.2rem)}
.copy svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.copy .ic-copy{transform-box:fill-box;transform-origin:center;transition:opacity .2s,scale .35s var(--ease)}
.copy .ic-ok{stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .4s var(--ease) .1s}
.copy.done .ic-copy{opacity:0;scale:.5}
.copy.done .ic-ok{stroke-dashoffset:0}
.close .dots{width:min(300px,80%);margin-bottom:calc(var(--sp-gap) - 22px)}


@media (prefers-reduced-motion:reduce){
  .moves span,.wave .wo,.wave .wm,.wv .bars i.on{animation:none}
}

/* waitlist: the pill, the hidden trap field and the "You're in!" popup (a native dialog). One pill holding the field and the button; left-aligned in the hero on phone and tablet like the rest of that block, centred in the closing section */
.notify-box{display:grid;gap:8px;width:min(100%,460px)} /* the bar, its error line and the helper text share this one width, 8px apart */
.notify{position:relative;display:flex;align-items:center;gap:8px;width:100%;padding:6px;border-radius:99px;background:var(--card);border:1px solid var(--line);box-shadow:var(--lift)}
.notify:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.notify input{flex:1;min-width:0;height:48px;padding:0 6px 0 18px;border:0;border-radius:99px;background:none;color:var(--fg);font:inherit;font-size:1rem;outline:none}
.notify input::placeholder{color:var(--muted)}
.notify .btn{flex:none}
.notify-err{margin:0;font-size:.875rem;font-weight:600;color:#B3261E}
:root[data-theme=dark] .notify-err{color:#FF9A92}
.notify-note{margin:0;font-size:.875rem;line-height:1.45;color:var(--muted)}
.notify-note a{color:inherit;text-underline-offset:3px}
.close .notify-note{text-align:center}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.notify .btn[aria-busy]{opacity:.6;cursor:progress}
.joined{margin:auto;width:min(calc(100% - 32px),380px);padding:32px 28px 28px;border:1px solid var(--line);border-radius:28px;background:var(--menu);color:var(--fg);text-align:center;box-shadow:var(--lift);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5)}
.joined::backdrop{background:rgba(11,0,31,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.joined[open]{animation:joined-in .4s var(--ease)}
.joined .tick{display:block;box-sizing:border-box;width:56px;height:56px;margin:0 auto 16px;padding:14px;border-radius:50%;background:var(--spark);fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.joined.no-tick .tick{display:none} /* no green tick on "We can't add this address" */
.joined h2{margin:0 0 8px;font-size:1.75rem;line-height:1.15}
.joined p{margin:0 0 24px;color:var(--muted)}
@keyframes joined-in{from{opacity:0;transform:translateY(10px) scale(.94)}}
@media (prefers-reduced-motion:reduce){.joined[open]{animation:none}}