@font-face{font-family:Figtree;font-weight:300 900;font-display:swap;src:url(/fonts/figtree.ttf) format("truetype")}
@font-face{font-family:Quicksand;font-weight:300 700;font-display:swap;src:url(/fonts/quicksand.ttf) format("truetype")}

/* tokens = designs/v5/b :root = apps/android/design .../ui/theme/Colors.kt. Dark first. */
:root{
  --f:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;--fm:"Quicksand","Figtree",system-ui,sans-serif;
  --e:cubic-bezier(.2,0,0,1);--e-out:cubic-bezier(.05,.7,.1,1);--e-in:cubic-bezier(.3,0,.8,.15);--spring:cubic-bezier(.34,1.32,.5,1);
  --bg:#121014;--surface:#1C1920;--s1:#211E25;--s2:#2A262F;--s3:#35303A;
  --line:rgba(255,255,255,.08);--outline:#4A4450;--outline2:#5E5765;
  --ink:#F4EFF6;--ink2:#D0C7D4;--ink3:#A79EAC;
  --pri:#8EEBFF;--on-pri:#00303A;--pri-c:#0D4A55;--on-pri-c:#CFF6FF;--pri-ink:#8EEBFF;
  --hdr:#1B181E;--cookie:#103F49;--bub:#26222B;--bub-line:rgba(255,255,255,.06);
  --mint:#74E5B4;--mint-c:rgba(116,229,180,.14);--mint-f:#3DDC97;--mint-f2:#9DF0CB;
  --coral:#FF9C86;--coral-c:rgba(255,124,96,.16);--coral-f:#FF7A5C;
  --amber:#FFCB6B;--amber-c:rgba(255,190,80,.15);--amber-f:#FFB938;
  --shadow:rgba(0,0,0,.6);--ring-track:rgba(255,255,255,.10);--glow-a:.5;--glow-c:#8EEBFF;--cyan:#8EEBFF;
  --moa-eye:#8EEBFF;--moa-blush:#A8456B;--moa-ring:#3DDC97;--moa-ring-track:rgba(142,235,255,.12);
  --moa-fly-bg:#3DDC97;--moa-fly-ink:#04301E;--moa-font:var(--fm);
  --moa-say-bg:#26222B;--moa-say-ink:#F4EFF6;--moa-say-border:rgba(255,255,255,.08);
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#FBF8F4;--surface:#FFFFFF;--s1:#F5F0EA;--s2:#EDE7E0;--s3:#E2DBD3;
  --line:rgba(45,32,25,.10);--outline:#CFC6BE;--outline2:#B9AFA6;
  --ink:#1D1A1F;--ink2:#4A4350;--ink3:#655D6B;
  --pri:#08697A;--on-pri:#FFFFFF;--pri-c:#C9F1F9;--on-pri-c:#003842;--pri-ink:#07606F;
  --hdr:#F1EAE1;--cookie:#B4E8F4;--bub:#FFFFFF;--bub-line:rgba(45,32,25,.09);
  --mint:#0B7148;--mint-c:#D2F3E2;--mint-f:#22C483;--mint-f2:#7BE3B6;
  --coral:#AE3520;--coral-c:#FFE2DA;--coral-f:#FF6F50;
  --amber:#7E5300;--amber-c:#FFEBC1;--amber-f:#F5A623;
  --shadow:rgba(60,40,20,.28);--ring-track:rgba(29,26,31,.10);--glow-a:.4;
  --moa-say-bg:#fff;--moa-say-ink:#1D1A1F;--moa-say-border:rgba(45,32,25,.09);
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:500 17px/1.5 var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .3s}
a{color:inherit}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
p,h1,h2,h3,ol,ul,figure{margin:0}ol,ul{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--pri);outline-offset:3px;border-radius:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:22px;height:22px;flex:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

/* type */
.h1{font:850 clamp(52px,8.2vw,112px)/.96 var(--f);letter-spacing:-.045em;text-wrap:balance}
.h2{font:850 clamp(38px,5.4vw,72px)/1 var(--f);letter-spacing:-.04em;text-wrap:balance}
.h3{font:850 clamp(26px,3vw,36px)/1.08 var(--f);letter-spacing:-.03em}
.em{color:var(--pri-ink);font-style:normal}
.mint-t{color:var(--mint-f);font-style:normal}
.coral-t{color:var(--coral-f);font-style:normal}
.lede{font:500 clamp(18px,2vw,22px)/1.45 var(--f);color:var(--ink2);text-wrap:pretty}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:800 12.5px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--pri-ink)}
.dot{width:8px;height:8px;border-radius:4px;background:var(--mint-f);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--mint-f) 25%,transparent)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;padding:14px 0;transition:background-color .3s,box-shadow .3s}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav.on{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 1px 0 var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;height:44px;text-decoration:none;font:850 19px/1 var(--f);letter-spacing:-.02em}
.brand img{width:32px;height:32px;border-radius:10px;box-shadow:0 0 0 1px var(--line)}
.nav nav{display:flex;align-items:center;gap:4px}
.nav nav a:not(.btn){height:40px;padding:0 14px;border-radius:20px;display:inline-flex;align-items:center;font:750 14.5px/1 var(--f);color:var(--ink2);text-decoration:none;transition:background-color .2s,color .2s}
.nav nav a:not(.btn):hover{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}
.hbtn{width:44px;height:44px;border-radius:22px;display:grid;place-items:center;color:var(--ink2);transition:background-color .15s,transform .12s var(--e)}
.hbtn:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}.hbtn:active{transform:scale(.9)}
.hbtn svg{width:21px;height:21px;grid-area:1/1}
.hbtn .moon{display:none}[data-theme="light"] .hbtn .sun{display:none}[data-theme="light"] .hbtn .moon{display:block}

/* buttons: the app's composer pill */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 8px 0 26px;border-radius:28px;background:var(--pri);color:var(--on-pri);text-decoration:none;font:850 17px/1 var(--f);white-space:nowrap;
  box-shadow:0 14px 34px -14px color-mix(in srgb,var(--pri) 90%,transparent);transition:transform .14s var(--e),box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 20px 40px -14px color-mix(in srgb,var(--pri) 95%,transparent)}.btn:active{transform:scale(.97)}
.btn .go{width:42px;height:42px;border-radius:21px;display:grid;place-items:center;background:color-mix(in srgb,var(--on-pri) 16%,transparent)}
.btn .go svg{width:20px;height:20px}
.btn.mint{background:var(--mint-f);color:#04301E;box-shadow:0 14px 34px -14px var(--mint-f)}.btn.mint .go{background:rgba(4,48,30,.14)}
.btn.sm{height:44px;padding:0 20px;font-size:15px;box-shadow:none}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--outline)}.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--outline2)}
.btn.ghost .go{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.btn.lg{height:64px;padding:0 10px 0 32px;font-size:19px;border-radius:32px}.btn.lg .go{width:48px;height:48px;border-radius:24px}
.chip{height:44px;padding:0 16px;border-radius:22px;border:1.5px solid var(--outline);background:transparent;font:750 15.5px/1 var(--f);color:var(--ink);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;text-decoration:none;transition:transform .1s var(--e),background-color .18s,border-color .18s,color .18s}
.chip:hover{border-color:var(--outline2)}.chip:active{transform:scale(.95)}
.chip[aria-pressed="true"]{background:var(--pri);border-color:var(--pri);color:var(--on-pri)}
.chip .ico{width:19px;height:19px}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:32px;padding:24px}
[data-theme="light"] .card{box-shadow:0 1px 2px rgba(0,0,0,.04),0 24px 48px -32px var(--shadow)}
.lbl{font:850 12px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.msg{display:inline-block;background:var(--bub);color:var(--ink);border:1px solid var(--bub-line);font:700 19px/1.3 var(--fm);padding:11px 17px 12px;border-radius:24px 24px 24px 6px}
.msg b{font-family:var(--f);font-weight:850}

/* sections */
.sec{position:relative;padding:clamp(88px,11vw,150px) 0}
.sec-h{display:grid;gap:18px;max-width:760px;margin-bottom:clamp(36px,5vw,60px)}
.sec-h .lede{max-width:34em}
.glow-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.glow-bg i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}
[data-theme="light"] .glow-bg i{opacity:.35}
.sec > .wrap{position:relative;z-index:1}

/* MOA stage: cookie + glow + face */
.mp{position:relative;width:var(--s,260px);height:var(--s,260px);flex:none}
.mp .glow{position:absolute;inset:-18%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,var(--glow-c) 0%,color-mix(in srgb,var(--glow-c) 35%,transparent) 48%,transparent 100%);opacity:var(--glow-a);filter:blur(16px);transition:background .6s;animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:calc(var(--glow-a)*.7)}50%{opacity:calc(var(--glow-a)*1.15)}}
.mp svg.cr{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cr > use{fill:var(--cookie);transform-origin:0 0;animation:cookie 48s linear infinite}
@keyframes cookie{to{transform:rotate(360deg)}}
.cr .rfg{transition:stroke-dashoffset .9s var(--e),stroke .4s}.cr .rfg.tick{transition:stroke-dashoffset .25s linear,stroke .4s}
.mp .mhost{position:absolute;left:11.5%;top:11.5%;width:77%;height:77%;cursor:pointer}
.mp .mhost .moa{width:100%!important;height:100%!important}
.tbadge{position:absolute;left:60%;top:60%;width:19%;height:19%;border-radius:50%;background:var(--hdr);display:grid;place-items:center;box-shadow:0 0 0 3px var(--hdr);opacity:0;transform:scale(.35)}
.tbadge img{width:92%;height:92%}
.tbadge.on{opacity:1;transform:none}
.tbadge.arrive{animation:arrive .56s var(--e-out) both}
@keyframes arrive{0%{opacity:0;transform:translate(-60px,-90px) scale(.35)}70%{opacity:1;transform:translate(0,0) scale(1.14)}100%{opacity:1;transform:none}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:120px 0 80px;overflow:hidden}
.hero .glow-bg i:nth-child(1){width:720px;height:720px;right:-160px;top:-180px;background:var(--cyan)}
.hero .glow-bg i:nth-child(2){width:520px;height:520px;left:-200px;bottom:-200px;background:var(--mint-f);opacity:.28}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.hero-copy{display:grid;gap:22px;justify-items:start}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:8px}
.hero-note{display:flex;align-items:center;gap:10px;font:700 14.5px/1 var(--f);color:var(--ink3)}
.hero-stage{position:relative;height:clamp(520px,66vh,720px);display:grid;place-items:center}
.hero-stage .mp{--s:clamp(240px,26vw,320px);position:absolute;left:0;top:4%;z-index:3;--glow-a:.6}
.phone{position:relative;width:clamp(250px,25vw,310px);aspect-ratio:390/844;border-radius:46px;padding:9px;background:#0B0A0C;box-shadow:0 0 0 1.5px rgba(255,255,255,.12),0 60px 120px -40px rgba(0,0,0,.8),0 30px 60px -30px var(--glow-c);overflow:hidden}
[data-theme="light"] .phone{box-shadow:0 0 0 1.5px rgba(0,0,0,.18),0 60px 100px -40px rgba(40,25,10,.5)}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:38px;transition:opacity .4s}
.phone::after{content:"";position:absolute;left:50%;top:14px;width:84px;height:5px;margin-left:-42px;border-radius:3px;background:rgba(0,0,0,.6)}
.hero .phone{position:absolute;right:0;bottom:0;z-index:2;width:clamp(270px,27vw,330px);transform:perspective(1400px) rotateY(calc(-12deg + var(--rx,0deg))) rotateX(calc(4deg + var(--ry,0deg))) rotate(3deg);transition:transform .25s var(--e)}
.hero .say{position:absolute;left:0;top:calc(4% + clamp(240px,26vw,320px) + 14px);z-index:4;animation:popIn .5s var(--spring) both;animation-delay:1.4s}
.hero .say .msg{font-size:21px}
.live{position:absolute;left:0;bottom:6%;z-index:4;display:flex;flex-wrap:wrap;gap:8px;max-width:46%}
.pill{height:38px;display:inline-flex;align-items:center;gap:6px;padding:0 14px;border-radius:19px;font:800 15px/1 var(--f);font-variant-numeric:tabular-nums;animation:popIn .5s var(--spring) both}
.pill.g{background:var(--mint-c);color:var(--mint);animation-delay:1.9s}.pill.r{background:var(--coral-c);color:var(--coral);animation-delay:2.2s}
.pill.c{background:var(--pri-c);color:var(--on-pri-c);animation-delay:2.5s}
@keyframes popIn{0%{opacity:0;transform:translateY(10px) scale(.9)}100%{opacity:1;transform:none}}
@keyframes popMe{0%{opacity:0;transform:translateY(14px) scale(.86)}100%{opacity:1;transform:none}}

/* ---------- apps marquee + the year ---------- */
.marq{overflow:hidden;padding:0 0 clamp(40px,6vw,70px);margin-top:10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marq .track{display:flex;gap:14px;width:max-content;animation:marq 38s linear infinite}
.marq:hover .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.ap{display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:22px;background:var(--surface);border:1px solid var(--line);white-space:nowrap}
.ap svg{width:40px;height:40px;border-radius:12px}
.ap b{font:800 15px/1.1 var(--f);display:block}.ap small{font:650 12.5px/1 var(--f);color:var(--ink3)}
.year{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.year .n{font:300 clamp(120px,20vw,260px)/.85 var(--f);letter-spacing:-.06em;color:var(--coral-f);font-variant-numeric:tabular-nums;display:block}
.year .t{display:grid;gap:14px}
.dots{display:grid;grid-template-columns:repeat(30,1fr);gap:5px}
.dots i{aspect-ratio:1;border-radius:50%;background:var(--s3);transition:background-color .3s,transform .3s var(--spring)}
.dots i.on{background:var(--coral-f);box-shadow:0 0 10px color-mix(in srgb,var(--coral-f) 50%,transparent)}
.dlab{display:flex;justify-content:space-between;margin-top:10px;font:650 13px/1 var(--f);color:var(--ink3)}
.rng{margin-top:20px}
.rng input{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;margin:0;cursor:pointer;--v:30%}
.rng input::-webkit-slider-runnable-track{height:14px;border-radius:7px;background:linear-gradient(90deg,var(--coral-f) var(--v),var(--s3) var(--v))}
.rng input::-moz-range-track{height:14px;border-radius:7px;background:linear-gradient(90deg,var(--coral-f) var(--v),var(--s3) var(--v))}
.rng input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:36px;border-radius:7px;background:var(--ink);margin-top:-11px;box-shadow:0 0 0 4px var(--bg)}
.rng input::-moz-range-thumb{width:10px;height:32px;border-radius:7px;background:var(--ink);border:0}
.rng .scale{display:flex;justify-content:space-between;font:650 13px/1 var(--f);color:var(--ink3);margin-top:6px}.rng .scale b{font-weight:800;color:var(--ink)}
.ags{display:flex;flex-wrap:wrap;gap:8px}
.ag{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 6px;border-radius:22px;background:var(--surface);border:1.5px solid var(--line);font:750 14.5px/1 var(--f);transition:border-color .2s,background-color .2s,transform .1s var(--e)}
.ag svg{width:30px;height:30px;border-radius:9px}
.ag[aria-checked="true"]{border-color:var(--pri);background:var(--pri-c);color:var(--on-pri-c)}
.ag:active{transform:scale(.95)}

/* ---------- how it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{position:relative;padding:28px 28px 30px;display:grid;gap:16px;overflow:hidden;min-height:380px;align-content:end}
.step .mp{--s:150px;--glow-a:.5;margin-bottom:auto}
.step .k{font:850 clamp(34px,3.4vw,44px)/1 var(--f);letter-spacing:-.035em}
.step p{color:var(--ink2);font-size:16.5px}
.step .tag{display:inline-flex;align-items:center;gap:8px;font:800 13.5px/1 var(--f);color:var(--pri-ink)}
.try{margin-top:16px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(24px,4vw,44px)}
.try .tl{display:grid;gap:16px;justify-items:start}
.try .mp{--s:180px}
.demo{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center}
.cellw{position:relative;padding-top:12px;justify-self:center}
.cellw::before{content:"";position:absolute;top:0;left:50%;width:40px;height:14px;margin-left:-20px;border-radius:7px 7px 0 0;background:var(--s3)}
.cell{position:relative;width:104px;height:196px;border-radius:32px;border:6px solid var(--outline);background:var(--s1);overflow:hidden;transition:border-color .4s,box-shadow .4s}
.cell .lv{position:absolute;left:0;right:0;bottom:0;height:var(--lv,0%);background:linear-gradient(var(--mint-f2),var(--mint-f));transition:height .9s var(--e),background .4s}
.cell.fast .lv{transition-duration:.5s}.cell.tick .lv{transition:height .22s linear}
.cell .lv::after{content:"";position:absolute;left:-10%;right:-10%;top:-7px;height:14px;border-radius:50%;background:inherit;animation:slosh 3s ease-in-out infinite}
@keyframes slosh{0%,100%{transform:translateX(-4%) scaleY(1)}50%{transform:translateX(4%) scaleY(.6)}}
.cell.zero{border-color:var(--coral-f);box-shadow:0 0 40px -8px var(--coral-f)}.cell.zero .lv{opacity:0}
.cell.low .lv{background:linear-gradient(#FFD27A,var(--amber-f))}
.cell:not(.zero){box-shadow:0 0 40px -10px var(--mint-f)}
.cell .num{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:2px;z-index:1}
.cell .num b{font:300 48px/1 var(--f);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink)}
.cell .num span{font:800 14px/1 var(--f);color:var(--ink2)}
.acts{display:grid;gap:8px}
.act{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:22px;background:var(--s2);text-align:left;width:100%;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s,transform .12s var(--e),opacity .3s;touch-action:manipulation;user-select:none;-webkit-user-select:none}
[data-theme="light"] .act{background:var(--s1)}
.act:active{transform:scale(.98)}
.act .ai{flex:none;width:46px;height:46px;border-radius:15px;background:var(--surface);display:grid;place-items:center;color:var(--ink)}
.act .ai svg{width:32px;height:32px;border-radius:10px}.act .ai .ico{width:22px;height:22px}
.act .tx{flex:1;min-width:0;display:grid;gap:3px}.act .tx b{font:850 16.5px/1.1 var(--f)}.act .tx small{font:600 13px/1.25 var(--f);color:var(--ink3)}
.act .v{font:850 18px/1 var(--f);font-variant-numeric:tabular-nums}.act .v.g{color:var(--mint)}.act .v.r{color:var(--coral)}
.act.nudge{box-shadow:inset 0 0 0 2.5px var(--pri)}
.act.done .ai{background:var(--mint-c);color:var(--mint)}
.act.off{opacity:.55;pointer-events:none}
.prog3{display:flex;align-items:center;gap:10px;font:750 14px/1 var(--f);color:var(--ink2)}
.prog3 i{width:9px;height:9px;border-radius:5px;background:var(--outline);transition:background-color .3s}.prog3 i.on{background:var(--pri)}

/* ---------- leagues ---------- */
.league{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.tstage{position:relative;aspect-ratio:1;max-height:560px;border-radius:40px;background:var(--hdr);display:grid;place-items:center;overflow:hidden;isolation:isolate;border:1px solid var(--line)}
.tstage .glow{position:absolute;width:70%;height:70%;border-radius:50%;background:var(--pri);filter:blur(80px);opacity:.25;z-index:-1}
.tstage svg.ckbg{position:absolute;width:78%;height:78%;fill:var(--cookie);animation:cookie 60s linear infinite;z-index:-1}
.tstage img.spin{width:68%;height:68%;filter:drop-shadow(0 30px 30px rgba(0,0,0,.45))}
.tstage .tl{position:absolute;left:28px;bottom:26px;display:grid;gap:4px}
.tstage .tl b{font:850 clamp(30px,3.6vw,46px)/1 var(--f);letter-spacing:-.035em}
.tstage .tl small{font:700 16px/1 var(--fm);color:var(--ink2)}
.tstage .pips{position:absolute;right:28px;bottom:30px;display:flex;gap:8px}
.pips i{width:10px;height:10px;border-radius:50%;background:var(--outline);transition:background-color .25s,transform .25s var(--spring)}.pips i.on{background:var(--pri);transform:scale(1.25)}
.tts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tt{border-radius:24px;padding:14px 6px 12px;background:var(--surface);border:1.5px solid var(--line);display:grid;justify-items:center;gap:4px;font:800 15px/1.1 var(--f);transition:background-color .2s,border-color .2s,transform .12s var(--e)}
.tt:active{transform:scale(.95)}.tt:hover{border-color:var(--outline2)}
.tt img{width:60px;height:60px}.tt small{font:650 13px/1 var(--f);color:var(--ink3)}
.tt[aria-pressed="true"]{background:var(--pri-c);border-color:var(--pri);color:var(--on-pri-c)}.tt[aria-pressed="true"] small{color:var(--on-pri-c);opacity:.8}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.st{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:18px 18px 16px;display:grid;gap:6px}
.st .ico{width:20px;height:20px;color:var(--ink3)}
.st b{font:300 clamp(34px,3.6vw,46px)/1 var(--f);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.st b small{font:700 14px/1 var(--f);letter-spacing:0;color:var(--ink2);margin-left:4px}
.st span{font:650 13.5px/1.2 var(--f);color:var(--ink3)}
.notes{display:grid;gap:10px;margin-top:20px}
.notes li{display:flex;gap:10px;align-items:center;font:600 15px/1.35 var(--f);color:var(--ink2)}
.notes .ico{width:18px;height:18px;color:var(--ink3)}
.react{min-height:52px;margin-top:16px;display:flex;flex-direction:column;gap:6px}
.react .me{align-self:flex-start;background:var(--pri);color:var(--on-pri);font:750 16.5px/1.25 var(--f);padding:11px 17px 12px;border-radius:24px 24px 24px 6px;display:inline-flex;align-items:center;gap:8px;animation:popMe .42s var(--spring) both}
.react .me img{width:26px;height:26px}
.react .msg{align-self:flex-start;animation:popIn .42s var(--spring) both}

/* ---------- shield: the full-bleed moment ---------- */
.shield{background:#07060A;color:#F4EFF6;overflow:hidden}
[data-theme="light"] .shield{background:#121014}
.shield .glow-bg i:nth-child(1){width:900px;height:900px;left:50%;top:50%;transform:translate(-50%,-50%);background:#FF7A5C;opacity:.16}
.shield .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:center}
.shield .copy{display:grid;gap:22px;justify-items:start}
.shield .copy .lede{color:#D0C7D4}
.shield .h2{font-size:clamp(48px,7vw,96px)}
.shield .phone{margin:0 auto;width:clamp(260px,26vw,320px);box-shadow:0 0 0 1.5px rgba(255,255,255,.12),0 80px 140px -50px rgba(0,0,0,.9),0 0 120px -30px #FF7A5C}
.shield .msg{background:#26222B;color:#F4EFF6;border-color:rgba(255,255,255,.08);font-size:22px}
.shield .rule{display:grid;gap:10px}
.shield .rule li{display:flex;gap:12px;align-items:center;font:650 16.5px/1.35 var(--f);color:#D0C7D4}
.shield .rule .ico{color:#FF7A5C}

/* ---------- crew ---------- */
.crew{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);align-items:center}
.crew .phone{margin:0 auto;width:clamp(250px,25vw,300px)}
.crew .copy{display:grid;gap:22px}
.board{display:grid;gap:6px}
.board li{display:grid;grid-template-columns:22px 40px 1fr auto 16px auto;gap:12px;align-items:center;padding:10px 12px 10px 14px;border-radius:22px;font:800 17px/1.1 var(--f);background:var(--surface);border:1px solid var(--line)}
.board li.me2{background:var(--pri-c);color:var(--on-pri-c);border-color:transparent}
.board .pos{font:750 14px/1 var(--f);color:var(--ink3);text-align:center}.me2 .pos{color:var(--on-pri-c)}
.board .sub{display:block;font:650 13px/1.2 var(--f);color:var(--ink3);margin-top:3px}.me2 .sub{color:var(--on-pri-c);opacity:.85}
.board .pts{font:850 20px/1 var(--f);font-variant-numeric:tabular-nums}
.board .mv{display:flex}.mv.up{color:var(--mint)}.mv.dn{color:var(--coral)}.mv.eq{color:var(--ink3)}
.av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:850 15px/1 var(--f);color:#2A2230;flex:none}
.board .bell{width:38px;height:38px;border-radius:19px;background:var(--s2);display:grid;place-items:center;color:var(--ink2);cursor:pointer;transition:background-color .2s,color .2s}
.board .bell .ico{width:18px;height:18px}.board .bell.sent{background:var(--mint-c);color:var(--mint)}.board .bell.none{visibility:hidden}
.feed{display:grid;gap:8px;margin-top:14px}
.feed .msg{font-size:17px;justify-self:start}.feed .msg.win{background:var(--mint-c);border-color:transparent}
.crew ul.pts{display:grid;gap:12px}
.crew ul.pts li{display:flex;gap:12px;align-items:flex-start;color:var(--ink2);font-weight:600}
.crew ul.pts .dot{margin-top:8px}

/* ---------- every screen ---------- */
.fleet{display:grid;gap:26px;padding:clamp(24px,4vw,44px)}
.dvs{display:flex;align-items:flex-end;justify-content:center;gap:clamp(14px,3vw,40px);flex-wrap:wrap}
.dv{display:grid;justify-items:center;gap:10px;text-align:center;transition:transform .35s var(--spring)}
.dv figcaption{font:750 13px/1 var(--f);color:var(--ink3)}
.dv .scr{position:relative;display:grid;place-items:center;align-content:center;gap:2px;background:var(--hdr);border:3px solid var(--ink);border-radius:16px;transition:background-color .35s,border-color .35s,box-shadow .35s}
.dv.ph .scr{width:70px;height:132px;border-radius:18px}
.dv.laptop .scr{width:150px;height:98px;border-radius:12px 12px 4px 4px}
.dv.monitor .scr{width:162px;height:104px;border-radius:10px}
.dv.browser .scr{width:162px;height:106px;border-radius:14px;align-content:end;padding-bottom:6px}
.dv .face{display:block;height:46px;width:46px;line-height:0}
.dv .n{font:850 16px/1 var(--f);font-variant-numeric:tabular-nums}
.dv .base{display:block;width:184px;height:8px;border-radius:0 0 9px 9px;background:var(--ink);margin-top:-10px}
.dv .stand{display:block;width:48px;height:14px;background:var(--ink);margin-top:-10px;border-radius:0 0 6px 6px}
.dv .bar{position:absolute;left:0;right:0;top:0;height:17px;border-radius:11px 11px 0 0;background:var(--s2);display:flex;align-items:center;gap:4px;padding-left:9px}
.dv .bar i{width:5px;height:5px;border-radius:50%;background:var(--outline2)}
.dv.active{transform:translateY(-8px)}.dv.active .scr{background:var(--coral-c);border-color:var(--coral-f);box-shadow:0 0 30px -6px var(--coral-f)}
.fleet.pulse .dv .scr{background:var(--mint-c);border-color:var(--mint-f);box-shadow:0 0 30px -6px var(--mint-f)}
.dv.locked .scr{background:var(--s3);border-color:var(--outline2)}
.bus{height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--outline) 12%,var(--outline) 88%,transparent)}
.wallet{justify-self:center;display:inline-flex;align-items:center;gap:10px;padding:12px 24px;background:var(--s1);border-radius:30px;font:700 16px/1 var(--fm);color:var(--ink2)}
.wallet b{font:300 38px/1 var(--f);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.fleet.zero .wallet{background:var(--coral-c);color:var(--coral)}
.oss{display:flex;gap:10px;align-items:flex-start;margin-top:20px;font:600 14.5px/1.45 var(--f);color:var(--ink3);max-width:66ch}.oss a{color:var(--pri-ink);font-weight:800}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.pl{position:relative;display:grid;gap:8px;align-content:start;text-align:left;padding:30px 28px 28px;border-radius:32px;background:var(--surface);border:1.5px solid var(--line);transition:border-color .2s,transform .14s var(--e)}
.pl:hover{border-color:var(--outline2)}
.pl.best{background:var(--pri-c);border-color:var(--pri);color:var(--on-pri-c);box-shadow:0 30px 80px -40px var(--pri)}
.pl .pn{font:850 22px/1 var(--f);letter-spacing:-.02em}
.pl .was{font:650 15px/1 var(--f);text-decoration:line-through;opacity:.6;margin-top:14px}
.pl .now{font:850 clamp(44px,4.6vw,58px)/1 var(--f);letter-spacing:-.045em;font-variant-numeric:tabular-nums}.pl .now small{font:750 17px/1 var(--f);letter-spacing:0;margin-left:2px;opacity:.8}
.pl .sub{font:650 15px/1.3 var(--f);opacity:.8}
.pl .flag{position:absolute;top:-13px;left:24px;height:28px;padding:0 13px;border-radius:14px;background:var(--pri);color:var(--on-pri);font:850 12px/28px var(--f);letter-spacing:.06em;text-transform:uppercase}
.pl .pick{margin-top:16px;justify-self:start}
.pl.best .pick{background:var(--on-pri-c);color:var(--pri-c)}
.fine{display:grid;gap:12px;margin-top:30px}
.fine li{display:flex;gap:12px;align-items:flex-start;color:var(--ink2);font-weight:600;font-size:16px}.fine .dot{margin-top:8px}

/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:26px;transition:background-color .2s}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:68px;padding:18px 24px;font:800 17px/1.25 var(--f)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:11px;height:11px;flex:none;border-right:2.5px solid var(--ink3);border-bottom:2.5px solid var(--ink3);transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--e)}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq details[open]{background:var(--s1)}
.faq .msg{margin:0 24px 22px;font-size:17.5px}

/* ---------- final cta ---------- */
.get{position:relative;overflow:hidden;border-radius:44px;background:var(--hdr);border:1px solid var(--line);padding:clamp(36px,6vw,72px);display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.get .glow-bg i:nth-child(1){width:700px;height:700px;left:-200px;top:-250px;background:var(--cyan);opacity:.35}
.get .mp{--s:clamp(200px,22vw,280px);--glow-a:.6;position:relative;z-index:1}
.get .copy{position:relative;z-index:1;display:grid;gap:18px;justify-items:start}
.get .plats{font:750 15px/1.4 var(--f);color:var(--ink3)}

/* footer */
footer{padding:48px 0 60px;margin-top:40px;border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:4px 22px}
footer nav a{font:750 15px/1 var(--f);color:var(--ink2);text-decoration:none;padding:10px 0}footer nav a:hover{color:var(--ink)}
.social{display:flex;gap:2px}.social a{width:44px;height:44px;border-radius:22px;display:grid;place-items:center;color:var(--ink2)}.social a:hover{background:var(--s1);color:var(--ink)}.social svg{width:22px;height:22px}
.copy-r{font:650 13.5px/1 var(--f);color:var(--ink3)}

/* docs */
.dochead{position:relative;padding:150px 0 60px;overflow:hidden;text-align:center}
.dochead .glow-bg i:nth-child(1){width:700px;height:700px;left:50%;top:-350px;transform:translateX(-50%);background:var(--cyan);opacity:.4}
.dochead .wrap{display:grid;justify-items:center;gap:14px}
.dochead .mp{--s:180px}
.dochead .h2{font-size:clamp(38px,5.4vw,64px)}
.dochead .meta{font:650 15px/1.3 var(--f);color:var(--ink3)}
.docwrap{max-width:780px;margin:0 auto;padding:0 20px 80px}
.paper{padding:clamp(24px,4vw,44px)}
.paper h2{font:850 23px/1.2 var(--f);letter-spacing:-.02em;margin:32px 0 10px}.paper h2:first-child{margin-top:0}
.paper p,.paper li{color:var(--ink2);font-size:16.5px}.paper p + p{margin-top:10px}
.paper ul,.paper ol{display:grid;gap:8px;margin:10px 0;padding-left:22px}.paper ul{list-style:disc}.paper ol{list-style:decimal}
.paper a{color:var(--pri-ink);font-weight:750}
.paper code{font:700 14px/1 var(--f);background:var(--s2);padding:3px 8px;border-radius:8px}
.callout{background:var(--pri-c);color:var(--on-pri-c);border-radius:22px;padding:16px 20px;margin-bottom:8px;font-weight:650}.callout b{font-weight:850}
.joincard{display:grid;justify-items:center;gap:14px;text-align:center;padding:32px 24px}
.joincard .code{font:300 64px/1 var(--f);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.joincard .btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}

/* reveal */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--e-out),transform .7s var(--e-out);transition-delay:calc(var(--d,0) * 90ms)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .mp .glow,.cr > use,.tstage svg.ckbg,.cell .lv::after,.marq .track,.hero .say,.pill{animation:none}
  *{transition-duration:.01ms!important}
}

/* responsive */
@media (max-width:1000px){
  .hero .wrap,.year,.league,.shield .wrap,.crew,.try{grid-template-columns:1fr}
  .hero{padding-top:104px;min-height:0}
  .hero-stage{height:auto;min-height:0;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin-top:10px}
  .hero-stage .mp{position:relative;left:auto;top:auto;--s:200px}
  .hero .phone{position:relative;right:auto;bottom:auto;justify-self:end;width:min(240px,46vw);transform:perspective(1200px) rotateY(-10deg) rotate(2deg);margin-top:40px}
  .hero .say{position:relative;top:auto;grid-column:1;margin-top:-10px}
  .live{position:relative;top:auto;right:auto;grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
  .steps{grid-template-columns:1fr}.step{min-height:0}.step .mp{--s:120px}
  .faq{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .get{grid-template-columns:1fr;justify-items:center;text-align:center}.get .copy{justify-items:center}
  .nav nav a:not(.btn):not(.cta-nav){display:none}
  .tstage{max-height:none}
  .year .n{font-size:clamp(96px,26vw,180px)}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  .h1{font-size:clamp(46px,13vw,64px)}
  .tts{gap:6px}.tt{padding:10px 4px 9px;font-size:13.5px}.tt img{width:46px;height:46px}
  .stats{gap:6px}.st{padding:12px 10px}.st b{font-size:28px}
  .demo{grid-template-columns:92px 1fr;gap:12px}.cell{width:84px;height:160px}.cell .num b{font-size:38px}
  .board li{grid-template-columns:18px 34px 1fr auto 14px auto;gap:8px;padding:8px 8px 8px 10px;font-size:15px}.board .av{width:34px;height:34px}
  .dvs{zoom:.66}
  .dots{gap:3px}
  .nav .cta-nav{display:none!important}
  .hero-cta .btn{width:100%}
}