/* Terns Play Studio - main stylesheet. Colours and fonts are the tokens at the top of :root. */
/* Layout concept: dark stage, the logo assembles itself in the hero, a drifting tile field behind it,
   one hand-built "pop board" toy, then calm editorial sections. Single-view router on #hash. */
:root{
  --ink:#060908;          /* page */
  --ink-2:#0b110f;        /* raised surface */
  --ink-3:#121b17;        /* card */
  --line:rgba(190,255,225,.10);
  --paper:#F2F8F4;        /* text */
  --mute:#8EA399;         /* secondary text */
  --green:#08C86D;        /* brand green, sampled from logo */
  --green-2:#0A9F57;
  --glow:rgba(8,200,109,.28);
  --f-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --gut:max(16px,env(safe-area-inset-left,0px));
  --gutr:max(16px,env(safe-area-inset-right,0px));
  --r:22px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--paper);font-family:var(--f-body);font-size:17px;line-height:1.6;
  margin:0;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
img{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:8px}
::selection{background:var(--green);color:#03150b}
.wrap{max-width:1180px;margin-inline:auto;padding-left:var(--gut);padding-right:var(--gutr)}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--green);border-radius:2px}
.lead{font-size:clamp(18px,1.6vw,21px);color:var(--mute);max-width:56ch}
.ph{background:rgba(8,200,109,.12);color:var(--green);padding:0 .35em;border-radius:6px;font-family:var(--f-mono);font-size:.88em}

/* ---------- logo lockup built from the slices ---------- */
.lk{position:relative;aspect-ratio:1662/1050;width:100%}
.lk .p{position:absolute;transform:translate3d(calc(var(--px,0)*var(--d,0)*1px),calc(var(--py,0)*var(--d,0)*1px),0);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.lk .p img{display:block;width:100%;height:auto}
.lk .sw{left:0;top:0;width:77.74%;--d:-14}
.lk .pl{left:4.45%;top:.29%;width:15.70%;--d:-26}
.lk .tr{left:35.62%;top:24.57%;width:14.86%;--d:10}
.lk .bd{left:23.23%;top:41.52%;width:32.13%;--d:6}
.lk .tn{left:57.40%;top:48%;width:42.48%;--d:16}
.lk .py{left:57.46%;top:65.71%;width:42.60%;--d:20}
.lk .st{left:57.40%;top:87.43%;width:42.54%;--d:12}
.mk{position:relative;aspect-ratio:1292/1107;width:100%}
.mk .p{position:absolute}
.mk .p img{display:block;width:100%;height:auto}
.mk .sw{left:0;top:0;width:100%}
.mk .pl{left:5.73%;top:.27%;width:20.2%}
.mk .tr{left:45.82%;top:23.31%;width:19.12%}
.mk .bd{left:29.88%;top:39.39%;width:41.33%}
.go .sw img{animation:inL .9s cubic-bezier(.2,.8,.2,1) .15s both}
.go .pl img{animation:inL .7s cubic-bezier(.2,.8,.2,1) .55s both}
.go .bd img{animation:inUp .85s cubic-bezier(.2,.9,.25,1) .45s both}
.go .tr img{transform-origin:45% 55%;animation:pop .8s cubic-bezier(.2,1.3,.4,1) 1s both,pulse 4.6s ease-in-out 2.8s infinite}
.go .tn img{animation:wipe .75s cubic-bezier(.2,.8,.2,1) 1.25s both}
.go .py img{animation:wipe .75s cubic-bezier(.2,.8,.2,1) 1.4s both}
.go .st img{animation:wipe .75s cubic-bezier(.2,.8,.2,1) 1.55s both}
.lk.hov:hover .sw img{animation:wig .8s ease-in-out}
@keyframes inL{from{opacity:0;transform:translateX(-16%)}to{opacity:1;transform:none}}
@keyframes inUp{from{opacity:0;transform:translateY(24%) scale(.92)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(0) rotate(-40deg)}60%{opacity:1;transform:scale(1.18) rotate(6deg)}100%{opacity:1;transform:none}}
@keyframes wipe{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-5%)}to{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
@keyframes pulse{0%,88%,100%{transform:scale(1)}94%{transform:scale(1.07)}}
@keyframes wig{0%,100%{transform:none}30%{transform:translateX(-3%)}60%{transform:translateX(1.5%)}}

/* ---------- header ---------- */
.hd{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.hd.sc{background:rgba(6,9,8,.78);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-color:var(--line)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--f-display);font-weight:900;font-size:13px;letter-spacing:.04em;line-height:1.05}
.brand .mk{width:44px;flex:none;transition:transform .4s cubic-bezier(.2,1.4,.4,1)}
.brand:hover .mk{transform:rotate(-6deg) scale(1.08)}
.brand b{color:var(--green);font-weight:900}
.nav{display:flex;align-items:center;gap:6px}
.nav a{font-weight:600;font-size:15px;padding:9px 15px;border-radius:99px;color:var(--mute);position:relative;transition:color .2s,background .2s}
.nav a:hover{color:var(--paper);background:rgba(255,255,255,.06)}
.nav a.on{color:#03150b;background:var(--green)}
.nav a.cta{border:1px solid var(--line);color:var(--paper);margin-left:8px}
.nav a.cta:hover{border-color:var(--green);color:var(--green);background:transparent}
.nav a.cta.on{color:#03150b}
.burger{display:none;width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:var(--ink-2);color:var(--paper);cursor:pointer;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:.25s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}

/* ---------- views ---------- */
.view{animation:vin .6s cubic-bezier(.2,.8,.2,1)}
@keyframes vin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.js .rv{translate:0 26px;transition:translate .8s cubic-bezier(.2,.8,.2,1) var(--dl,0s)}
.js .rv.in{translate:none}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(36px,6vw,84px) clamp(48px,7vw,96px)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero::after{content:"";position:absolute;right:-12%;top:-10%;width:60%;aspect-ratio:1;background:radial-gradient(closest-side,var(--glow),transparent 70%);z-index:0;pointer-events:none}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(38px,5.6vw,74px);font-weight:900;margin-block:20px 22px}
.hero h1 em{font-style:normal;color:var(--green);position:relative;white-space:nowrap}
.hero h1 em svg{position:absolute;left:0;bottom:-.16em;width:100%;height:.22em;overflow:visible}
.hero h1 em path{stroke:var(--green);stroke-width:5;fill:none;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;animation:draw 1.1s ease 1.9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero .lead{margin-bottom:34px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;padding:15px 26px;border-radius:99px;border:1px solid transparent;cursor:pointer;font-family:var(--f-body);transition:transform .25s cubic-bezier(.2,1.4,.4,1),box-shadow .25s,background .25s,color .25s,border-color .25s}
.btn svg{width:18px;height:18px;transition:transform .25s}
.btn.pri{background:var(--green);color:#03150b;box-shadow:0 10px 30px -10px var(--glow)}
.btn.pri:hover{transform:translateY(-3px);box-shadow:0 16px 36px -8px rgba(8,200,109,.55)}
.btn.pri:hover svg{transform:translateX(4px)}
.btn.sec{border-color:var(--line);color:var(--paper);background:rgba(255,255,255,.03)}
.btn.sec:hover{border-color:var(--green);color:var(--green);transform:translateY(-3px)}
.stage{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.stage .hint{position:absolute;right:0;bottom:-30px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.chip{font-size:13px;font-weight:600;padding:7px 14px;border-radius:99px;border:1px solid var(--line);color:var(--mute);background:rgba(255,255,255,.02)}

/* ---------- marquee ---------- */
.mq{border-block:1px solid var(--line);background:var(--ink-2);overflow:hidden;padding-block:20px}
.mq-t{display:flex;width:max-content;animation:mq 34s linear infinite}
.mq:hover .mq-t{animation-play-state:paused}
.mq-t span{font-family:var(--f-display);font-weight:900;font-size:clamp(22px,3vw,34px);text-transform:uppercase;letter-spacing:-.01em;padding-right:28px;display:flex;align-items:center;gap:28px;white-space:nowrap;color:transparent;-webkit-text-stroke:1.2px rgba(242,248,244,.5)}
.mq-t span i{width:16px;height:16px;border-radius:5px;background:var(--green);flex:none;transform:rotate(12deg)}
.mq-t span:nth-child(3n+2){color:var(--paper);-webkit-text-stroke:0}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.blk{padding-block:clamp(64px,9vw,120px)}
.blk h2{font-size:clamp(30px,4.2vw,54px);margin-block:16px 18px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start}
.pillars{display:grid;gap:14px;margin-top:34px}
.pil{display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--ink-2);transition:border-color .3s,transform .3s,background .3s}
.pil:hover{border-color:rgba(8,200,109,.5);transform:translateX(6px);background:var(--ink-3)}
.pil svg{width:64px;height:64px}
.pil h3{font-size:17px;margin-bottom:4px}
.pil p{color:var(--mute);font-size:15px;line-height:1.5}

/* pop board toy */
.toy{position:relative;border:1px solid var(--line);border-radius:30px;padding:clamp(18px,3vw,30px);background:radial-gradient(120% 90% at 80% 0%,rgba(8,200,109,.14),transparent 60%),var(--ink-2)}
.toy-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.toy-h b{font-family:var(--f-display);font-size:15px}
.toy-h small{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.board{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(6px,1.2vw,10px)}
.tile{aspect-ratio:1;border:0;border-radius:clamp(10px,1.6vw,16px);cursor:pointer;background:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line);transition:transform .18s cubic-bezier(.2,1.6,.4,1),background .25s,box-shadow .25s;position:relative;padding:0}
.tile:hover{background:#1a2822;transform:translateY(-3px)}
.tile.g{background:var(--green);box-shadow:0 8px 20px -8px var(--glow)}
.tile.w{background:var(--paper)}
.tile.pop{animation:tp .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes tp{0%{transform:scale(1)}30%{transform:scale(.72)}65%{transform:scale(1.14)}100%{transform:scale(1)}}
.toy-f{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:10px}
.toy-f button{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);background:none;border:1px solid var(--line);border-radius:99px;padding:8px 14px;cursor:pointer;transition:.2s}
.toy-f button:hover{color:var(--green);border-color:var(--green)}
.score{font-family:var(--f-display);font-weight:700;font-size:22px;font-variant-numeric:tabular-nums}
.score span{color:var(--mute);font-size:12px;font-family:var(--f-mono);margin-left:8px;font-weight:500;letter-spacing:.1em}

/* ---------- game cards ---------- */
.shead{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.link{display:inline-flex;gap:8px;align-items:center;font-weight:700;color:var(--green);border-bottom:2px solid transparent;transition:border-color .2s,gap .2s}
.link:hover{border-color:var(--green);gap:12px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.gc{--mx:50%;--my:0%;position:relative;border:1px solid var(--line);border-radius:28px;background:var(--ink-2);padding:20px;display:flex;flex-direction:column;gap:20px;transition:border-color .3s,transform .25s;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));overflow:hidden;min-width:0}
.gc::before{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--mx) var(--my),rgba(8,200,109,.16),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.gc:hover{border-color:rgba(8,200,109,.45)}
.gc:hover::before{opacity:1}
.gc.hide{display:none}
.gc.fin{animation:vin .55s cubic-bezier(.2,.8,.2,1) both}
.shot{position:relative;border-radius:22px;aspect-ratio:1/1;background:linear-gradient(160deg,var(--c1),var(--c2));display:grid;place-items:center;overflow:hidden}
.phone{height:84%;width:auto;aspect-ratio:9/18.5;align-self:center;background:#04100b;border-radius:20px;border:4px solid #0c1a14;box-shadow:0 20px 40px -12px rgba(0,0,0,.6);padding:10px 7px;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:4px;transition:transform .5s cubic-bezier(.2,1.2,.4,1)}
.shot::before{content:"";position:absolute;inset:-20%;background:var(--img) center/cover;filter:blur(26px) saturate(1.2);opacity:.75;transform:scale(1.1)}
.ico{position:relative;width:84%;height:auto;aspect-ratio:1;border-radius:23%;object-fit:cover;box-shadow:0 22px 44px -14px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.22);transition:transform .55s cubic-bezier(.2,1.3,.4,1)}
.gc:hover .ico{transform:translateY(-6px) rotate(-4deg) scale(1.05)}
.gc:hover .phone{transform:translateY(-6px) rotate(-3deg)}
.phone i{border-radius:5px;background:rgba(255,255,255,.12);animation:tg 3.6s ease-in-out infinite;animation-delay:calc(var(--n)*.17s)}
.phone i:nth-child(3n){background:var(--c3)}
.phone i:nth-child(5n+1){background:rgba(255,255,255,.88)}
@keyframes tg{0%,70%,100%{transform:none;opacity:1}82%{transform:scale(.7);opacity:.55}}
.shot .tag{position:absolute;left:12px;bottom:12px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;background:rgba(3,10,7,.72);backdrop-filter:blur(6px);padding:6px 10px;border-radius:99px;color:var(--paper)}
.gc .meta{display:flex;gap:8px;flex-wrap:wrap}
.gc .meta span{font-size:12px;font-weight:700;padding:4px 11px;border-radius:99px;background:rgba(8,200,109,.12);color:var(--green)}
.gc .meta span.o{background:rgba(255,255,255,.06);color:var(--mute)}
.gc h3{font-size:21px}
.gc p{color:var(--mute);font-size:15.5px;line-height:1.55}
.stores{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.store{flex:1 1 150px;display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:10px 16px;background:var(--ink);transition:border-color .2s,transform .2s,background .2s;min-width:0}
.store svg{width:26px;height:26px;flex:none}
.store .stt{display:flex;flex-direction:column;min-width:0}
.store small{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-family:var(--f-mono)}
.store b{font-size:15px}
.store:hover{border-color:var(--green);transform:translateY(-2px);background:var(--ink-3)}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.fl{font-family:var(--f-body);font-weight:700;font-size:14px;padding:10px 18px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--mute);cursor:pointer;transition:.2s}
.fl:hover{color:var(--paper);border-color:rgba(255,255,255,.3)}
.fl[aria-pressed=true]{background:var(--green);color:#03150b;border-color:var(--green)}
.note{display:flex;gap:14px;align-items:flex-start;border:1px dashed rgba(8,200,109,.45);background:rgba(8,200,109,.05);border-radius:18px;padding:16px 18px;color:var(--mute);font-size:15px;margin-top:40px}
.note b{color:var(--green)}

/* ---------- CTA ---------- */
.cta-b{position:relative;overflow:hidden;border-radius:36px;background:var(--green);color:#03150b;padding:clamp(34px,6vw,76px);display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:center}
.cta-b h2{font-size:clamp(28px,4vw,50px);margin:0 0 14px;color:#03150b}
.cta-b p{font-size:18px;max-width:46ch;color:rgba(3,21,11,.75)}
.cta-b .btn{background:#03150b;color:var(--paper);justify-self:start}
.cta-b .btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px -10px rgba(0,0,0,.5)}
.cta-b .deco{position:absolute;right:-40px;top:-50px;width:300px;opacity:.16;pointer-events:none;filter:brightness(0);transform:rotate(8deg)}
.cta-b>div{position:relative}

/* ---------- page heads / about / contact / privacy ---------- */
.ph-head{padding-block:clamp(48px,7vw,96px) 20px;position:relative;overflow:hidden}
.ph-head::after{content:"";position:absolute;right:-8%;top:-40%;width:50%;aspect-ratio:1;background:radial-gradient(closest-side,var(--glow),transparent 70%);pointer-events:none}
.ph-head h1{font-size:clamp(36px,6vw,76px);font-weight:900;margin-block:18px 20px;position:relative}
.ph-head .lead{position:relative}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.val{border:1px solid var(--line);border-radius:var(--r);padding:26px;background:var(--ink-2);transition:border-color .3s,transform .3s}
.val:hover{border-color:rgba(8,200,109,.45);transform:translateY(-5px)}
.val .ic{width:46px;height:46px;border-radius:14px;background:rgba(8,200,109,.14);display:grid;place-items:center;margin-bottom:18px}
.val .ic svg{width:24px;height:24px;stroke:var(--green);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.val h3{font-size:18px;margin-bottom:8px}
.val p{color:var(--mute);font-size:15.5px}
.quote{font-family:var(--f-display);font-weight:700;font-size:clamp(24px,3.4vw,42px);line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.quote em{font-style:normal;color:var(--green)}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.facts div{background:var(--ink-2);padding:20px 22px}
.facts small{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.facts b{font-size:17px}
.member{display:flex;gap:18px;align-items:center;border:1px dashed rgba(8,200,109,.45);border-radius:var(--r);padding:18px;margin-top:18px;background:rgba(8,200,109,.04)}
.member .av{width:68px;height:68px;border-radius:20px;background:var(--ink-3);display:grid;place-items:center;flex:none;color:var(--mute);font-family:var(--f-mono);font-size:10px;text-align:center;line-height:1.2}
.member p{color:var(--mute);font-size:15px}
.member b{display:block;color:var(--paper);font-size:16px}

.mail{display:block;font-family:var(--f-display);font-weight:900;font-size:clamp(22px,4.4vw,52px);letter-spacing:-.03em;word-break:break-word;background:linear-gradient(90deg,var(--paper),var(--green) 60%,var(--paper));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .6s;margin-block:14px 22px}
.mail:hover{background-position:100% 0}
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.cc{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:var(--ink-2);min-width:0}
.cc small{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.cc h3{font-size:17px;margin-block:8px 8px}
.cc p{color:var(--mute);font-size:15px}
.cc ul{margin:10px 0 0;padding-left:18px;color:var(--mute);font-size:15px}
.cc li{margin-bottom:4px}
.cc li::marker{color:var(--green)}

.doc{display:grid;grid-template-columns:240px 1fr;gap:clamp(28px,5vw,72px);align-items:start;padding-block:30px clamp(64px,9vw,120px)}
.toc{position:sticky;top:calc(96px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line);padding-left:6px}
.toc button{text-align:left;background:none;border:0;color:var(--mute);font:600 14px var(--f-body);padding:8px 12px;border-radius:10px;cursor:pointer;transition:.2s}
.toc button:hover{color:var(--paper);background:rgba(255,255,255,.05)}
.prose{min-width:0;max-width:72ch}
.prose h2{font-size:clamp(20px,2.2vw,26px);margin:44px 0 12px;scroll-margin-top:100px}
.prose h2:first-of-type{margin-top:0}
.prose p,.prose li{color:#C3D1CA;font-size:16.5px}
.prose p{margin-bottom:14px}
.prose ul{padding-left:20px;margin:0 0 14px}
.prose li{margin-bottom:6px}
.prose li::marker{color:var(--green)}
.prose a{color:var(--green);border-bottom:1px solid rgba(8,200,109,.4)}
.pol{display:grid;gap:10px;margin:0 0 14px}
.pol div{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:14px 18px;background:var(--ink-2);flex-wrap:wrap}
.pol span{color:var(--mute);font-family:var(--f-mono);font-size:12px}

/* ---------- footer ---------- */
.ft{border-top:1px solid var(--line);background:var(--ink-2);padding-block:56px calc(36px)}
.ft .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.ft .brand{margin-bottom:16px}
.ft p{color:var(--mute);font-size:15px;max-width:34ch}
.ft h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 14px;font-weight:500}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ft li a{color:var(--paper);font-weight:500;transition:color .2s}
.ft li a:hover{color:var(--green)}
.fb{grid-column:1/-1;border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--mute);font-size:13.5px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,30px);background:var(--green);color:#03150b;font-weight:700;padding:12px 20px;border-radius:99px;opacity:0;pointer-events:none;transition:.35s cubic-bezier(.2,1.3,.4,1);z-index:80}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero .wrap,.split,.cta-b,.doc{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .vals,.ccards{grid-template-columns:1fr}
  .stage{max-width:560px}
  .toc{position:static;flex-direction:row;flex-wrap:wrap;border:0;padding:0;gap:6px}
  .toc button{border:1px solid var(--line)}
}
@media(max-width:820px){
  .burger{display:flex}
  .nav{position:absolute;left:var(--gut);right:var(--gutr);top:68px;flex-direction:column;align-items:stretch;background:var(--ink-2);border:1px solid var(--line);border-radius:22px;padding:10px;gap:2px;opacity:0;pointer-events:none;transform:translateY(-8px);transition:.25s}
  .nav.open{opacity:1;pointer-events:auto;transform:none}
  .nav a{padding:14px 16px;font-size:17px}
  .nav a.cta{margin:6px 0 0;text-align:center}
}
@media(max-width:640px){
  body{font-size:16px}
  .grid,.grid.two{grid-template-columns:1fr}
  .ft .wrap{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .stage .hint{display:none}
  .brand span{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .mq-t{animation:none}
  .hero h1 em path{stroke-dashoffset:0}
}

.store b{white-space:nowrap}
@media(max-width:480px){.store{padding:10px 12px;gap:9px}.store svg{width:22px;height:22px}}