:root{
  --bone:#F7F1E4;
  --bone-2:#EFE6D3;
  --ink:#141024;
  --ink-2:#4A4362;
  --cobalt:#2B2BFF;
  --tang:#FF5C1A;
  --lime:#C2FF33;
  --mag:#FF2D9B;
  --violet:#7B2BFF;
  --teal:#00D6C2;
  --fs-d:"Anybody",-apple-system,BlinkMacSystemFont,sans-serif;
  --fs-b:"Work Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --fs-m:"DM Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--fs-b);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.wrap{max-width:1120px;margin:0 auto;padding-left:20px;padding-right:20px;}
h1,h2,h3{margin:0;text-wrap:balance;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
.mono{font-family:var(--fs-m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* fallback weight while the variable font loads — font-variation-settings alone leaves fallbacks at 400 */
h1,h2,h3,.logo,.tile .tn,.chip,.go,.out,.bname,.led b,.band .bp,.kn,.step .num,.qq span,.tickrow span,.stepper button{font-weight:800;}
/* the pop highlight is used in the hero, the handoff h2, and the footer */
.pop{display:inline-block;padding:0 .1em;border-radius:12px;transform:rotate(-2.5deg);}

/* ---------- custom cursor ---------- */
.cursor{
  position:fixed;top:0;left:0;width:14px;height:14px;border-radius:4px;
  border:2.5px solid var(--ink);background:var(--lime);
  pointer-events:none;z-index:999;opacity:0;
  transform:translate(-50%,-50%);
  transition:width .18s,height .18s,border-radius .18s,background .18s,opacity .25s;
}
.cursor.on{opacity:1;}
.cursor.hot{width:34px;height:34px;border-radius:10px;background:var(--mag);}
.cursor.grab{width:26px;height:26px;border-radius:50%;background:var(--tang);}
@media(pointer:coarse){.cursor{display:none;}}
/* when the custom cursor is live, it IS the cursor — .has-cursor is set by JS only */
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor .out{cursor:none;}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:120;pointer-events:none;}
.progress i{display:block;height:100%;background:var(--cobalt);transform-origin:0 50%;transform:scaleX(0);}

/* ---------- nav ---------- */
nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 20px;margin:0 auto;
  background:rgba(247,241,228,.86);
  background:color-mix(in srgb,var(--bone) 84%,transparent);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border-bottom:3px solid transparent;
  transition:border-color .25s;
}
nav.scrolled{border-bottom-color:var(--ink);}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--fs-d);font-variation-settings:"wdth" 108,"wght" 800;font-size:15px;letter-spacing:-.01em;}
.studs{display:grid;grid-template-columns:repeat(2,7px);gap:3px;cursor:pointer;}
.studs i{width:7px;height:7px;border-radius:2px;display:block;transition:background .25s,transform .25s;}
.logo:hover .studs i{transform:rotate(90deg);}
.navlinks{display:flex;gap:22px;font-family:var(--fs-m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;}
.navlinks a{position:relative;padding:4px 0;}
.navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;background:var(--cobalt);transition:right .2s cubic-bezier(.2,.8,.3,1);}
.navlinks a:hover::after{right:0;}
@media(max-width:720px){.navlinks{display:none;}}
.pill{
  font-family:var(--fs-m);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  border:2px solid var(--ink);border-radius:100px;padding:6px 13px;background:var(--lime);
  transition:transform .15s cubic-bezier(.3,1.7,.5,1),box-shadow .15s;box-shadow:0 0 0 var(--ink);
}
.pill:hover{transform:translateY(-2px);box-shadow:0 3px 0 var(--ink);}
@media(max-width:520px){.pill{display:none;}}

/* ---------- sidenav ---------- */
.sidenav{
  position:fixed;right:16px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:11px;z-index:90;
}
.sidenav a{display:flex;align-items:center;gap:8px;justify-content:flex-end;}
.sidenav .lab{
  font-family:var(--fs-m);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);opacity:0;transform:translateX(6px);transition:opacity .18s,transform .18s;
}
.sidenav a:hover .lab,.sidenav a:focus-visible .lab,.sidenav a.act .lab{opacity:1;transform:none;}
.sidenav a:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:4px;}
.sidenav .dot{
  width:9px;height:9px;border-radius:3px;border:2.5px solid var(--ink);
  background:transparent;transition:background .2s,transform .2s;flex:0 0 auto;
}
.sidenav a.act .dot{background:var(--lime);transform:rotate(45deg) scale(1.15);}
@media(max-width:1240px){.sidenav{display:none;}}

/* ---------- hero ---------- */
header{padding-top:56px;padding-bottom:8px;text-align:center;}
.kicker{margin-bottom:18px;display:block;min-height:1.4em;}
h1{
  font-family:var(--fs-d);
  font-variation-settings:"wdth" 128,"wght" 850;
  font-size:clamp(42px,9.6vw,96px);
  line-height:.86;letter-spacing:-.03em;
}
.hline{display:inline-block;}
h1 .pop{color:var(--bone);background:var(--cobalt);transition:background .4s,color .4s;}
/* no overflow clipping — the swap is opacity-led, so glyphs never get cut */
.roller{display:inline-block;position:relative;white-space:nowrap;transition:width .24s cubic-bezier(.3,1.2,.4,1);}
.roller b{display:inline-block;font-weight:inherit;will-change:transform,opacity;}
.scrib{position:relative;display:inline-block;}
.scrib svg{
  position:absolute;left:-4%;right:-4%;bottom:-.14em;width:108%;height:.3em;
  overflow:visible;pointer-events:none;
}
.scrib path{stroke:var(--mag);stroke-width:5;stroke-linecap:round;}
.lede{max-width:52ch;margin:24px auto 0;font-size:clamp(16px,2vw,19.5px);color:var(--ink-2);}

/* hero entrance */
@keyframes rise{from{opacity:0;transform:translateY(30px) rotate(.5deg);}to{opacity:1;transform:none;}}
h1 span.hline{animation:rise .65s cubic-bezier(.2,.9,.3,1) backwards;}
h1 span.hline:nth-of-type(1){animation-delay:.05s;}
h1 span.hline:nth-of-type(2){animation-delay:.17s;}
h1 span.hline:nth-of-type(3){animation-delay:.29s;}
.lede{animation:rise .6s cubic-bezier(.2,.9,.3,1) .46s backwards;}

/* ---------- ticker ---------- */
.ticker{
  margin-top:44px;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  overflow:hidden;background:var(--bone-2);padding:10px 0;
  display:flex;flex-direction:column;gap:8px;
}
.tickrow{display:flex;align-items:center;width:max-content;animation:tick 36s linear infinite;}
.tickrow.rev{animation:tick2 30s linear infinite;}
/* each copy is an exact half of the row, so the -50% loop wraps seamlessly */
.tickgroup{display:flex;align-items:center;gap:26px;padding-right:26px;}
@keyframes tick2{from{transform:translateX(-50%);}to{transform:translateX(0);}}
.ticker:hover .tickrow{animation-play-state:paused;}
.tickrow span{
  font-family:var(--fs-d);font-variation-settings:"wdth" 112,"wght" 780;
  font-size:15px;letter-spacing:.01em;white-space:nowrap;
}
.tickrow i{width:8px;height:8px;border-radius:2px;background:var(--cobalt);flex:0 0 auto;transform:rotate(45deg);}
.tickrow i:nth-of-type(3n+2){background:var(--tang);}
.tickrow i:nth-of-type(3n){background:var(--mag);}
@keyframes tick{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- builder board ---------- */
#build{margin-top:40px;}
.board{
  border:3px solid var(--ink);border-radius:22px;
  background:var(--bone-2);overflow:hidden;
  box-shadow:0 10px 0 var(--ink);
}
.boardbar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;background:var(--ink);color:var(--bone);
}
.boardbar .mono{color:#A79FC4;}
.counters{display:flex;gap:18px;flex-wrap:wrap;}
.counters div{display:flex;align-items:baseline;gap:5px;}
.counters b{font-family:var(--fs-m);font-size:15px;color:var(--lime);font-variant-numeric:tabular-nums;}
.counters span{font-family:var(--fs-m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#A79FC4;}
.barbtns{display:flex;gap:8px;}
.share{
  font-family:var(--fs-m);cursor:pointer;background:transparent;color:#A79FC4;
  border:2px solid #3A3355;border-radius:100px;padding:5px 12px;
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  transition:color .15s,border-color .15s;
}
.share:hover{color:var(--lime);border-color:var(--lime);}

.grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:8px;
  grid-auto-flow:row dense;padding:16px;min-height:190px;align-content:start;
  background-image:radial-gradient(circle at 6px 6px,rgba(20,16,36,.13) 1.6px,transparent 1.7px);
  background-size:26px 26px;
}
@media(max-width:760px){.grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:460px){.grid{grid-template-columns:repeat(2,1fr);gap:7px;padding:12px;}}

.tile{
  grid-column:span 2;font:inherit;text-align:left;cursor:pointer;
  border:3px solid var(--ink);border-radius:12px;
  padding:11px 12px;color:var(--ink);
  min-height:86px;display:flex;flex-direction:column;justify-content:space-between;
  animation:snap .3s cubic-bezier(.2,1.5,.4,1);position:relative;
  transition:transform .15s cubic-bezier(.3,1.7,.5,1);
}
.tile:hover{transform:rotate(-1.4deg) scale(1.02);}
.tile:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;}
.tile::after{
  content:"×";position:absolute;top:4px;right:8px;
  font-family:var(--fs-d);font-variation-settings:"wght" 800;font-size:15px;
  opacity:.45;transition:opacity .15s;
}
.tile:hover::after{opacity:1;}
.tile.bye{animation:unsnap .22s cubic-bezier(.5,0,.8,.4) forwards;}
@keyframes snap{
  0%{transform:scale(.62) rotate(-8deg);opacity:0;}
  70%{transform:scale(1.05) rotate(1deg);opacity:1;}
  100%{transform:scale(1) rotate(0);}
}
@keyframes unsnap{
  to{transform:scale(.5) rotate(9deg);opacity:0;}
}
.tile .tn{font-family:var(--fs-d);font-variation-settings:"wdth" 112,"wght" 800;font-size:16px;letter-spacing:-.01em;line-height:1;padding-right:18px;}
.tile .td{font-family:var(--fs-m);font-size:10px;letter-spacing:.04em;text-transform:uppercase;opacity:.75;margin-top:7px;line-height:1.4;}

.hollow{
  border:3px dashed rgba(20,16,36,.28);border-radius:12px;min-height:86px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fs-m);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(20,16,36,.42);grid-column:1/-1;padding:24px;text-align:center;
  background:transparent;cursor:pointer;transition:color .15s,border-color .15s;
}
.hollow:hover{color:var(--ink-2);border-color:rgba(20,16,36,.5);}
.hollow:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;}

/* ---------- ledger ---------- */
.ledger{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:3px solid var(--ink);background:var(--bone);
}
@media(max-width:620px){.ledger{grid-template-columns:1fr;}}
.led{padding:15px 16px 17px;border-right:3px solid var(--ink);}
.led:last-child{border-right:0;}
@media(max-width:620px){.led{border-right:0;border-bottom:3px solid var(--ink);}.led:last-child{border-bottom:0;}}
.led .ll{display:block;font-family:var(--fs-m);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);}
.led b{
  display:block;margin:6px 0 4px;
  font-family:var(--fs-d);font-variation-settings:"wdth" 112,"wght" 850;
  font-size:clamp(22px,3.4vw,30px);line-height:1;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}
.led b.tick{animation:ledpop .3s cubic-bezier(.2,1.6,.4,1);}
@keyframes ledpop{0%{transform:scale(.9);}60%{transform:scale(1.06);}100%{transform:scale(1);}}
.led .ls{display:block;font-family:var(--fs-m);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);}
.led.hero{background:var(--lime);}
.led.hero .ll,.led.hero .ls{color:rgba(20,16,36,.72);}

.tray{padding:16px;border-top:3px solid var(--ink);background:var(--bone);}
.traygrp{margin-bottom:13px;}
.traygrp:last-of-type{margin-bottom:0;}
.grphead{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.grphead i{width:10px;height:10px;border-radius:3px;border:2px solid var(--ink);display:block;}
.grphead b{font-family:var(--fs-m);font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;}
.grphead em{font-style:normal;font-family:var(--fs-m);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);}
@media(max-width:560px){.grphead em{display:none;}}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  font:inherit;cursor:pointer;
  font-family:var(--fs-d);font-variation-settings:"wdth" 105,"wght" 750;
  font-size:13px;letter-spacing:.01em;
  border:3px solid var(--ink);border-radius:100px;
  padding:7px 15px;background:var(--bone);color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .13s cubic-bezier(.3,1.7,.5,1),box-shadow .13s;
  box-shadow:0 3px 0 var(--ink);
}
.chip:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink);}
.chip:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink);}
.chip:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;}
.chip i{width:11px;height:11px;border-radius:3px;border:2px solid var(--ink);display:block;}
.chip[data-on="1"] i{background:var(--bone)!important;}
.go{
  display:block;width:100%;margin-top:16px;cursor:pointer;text-align:center;
  font-family:var(--fs-d);font-variation-settings:"wdth" 118,"wght" 850;
  font-size:17px;text-transform:uppercase;letter-spacing:.01em;
  background:var(--cobalt);color:var(--bone);border:3px solid var(--ink);
  border-radius:100px;padding:15px;box-shadow:0 5px 0 var(--ink);
  transition:transform .13s,box-shadow .13s;
}
.go:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--ink);}
.go:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink);}
.disclaim{font-family:var(--fs-m);font-size:10px;line-height:1.6;letter-spacing:.03em;color:var(--ink-2);text-align:center;margin:12px auto 0;max-width:56ch;}

/* ---------- sections ---------- */
section{padding-top:96px;padding-bottom:0;}
#top,#build,section,footer{scroll-margin-top:86px;}
h2{font-family:var(--fs-d);font-variation-settings:"wdth" 122,"wght" 830;font-size:clamp(30px,5.6vw,52px);line-height:.9;letter-spacing:-.025em;}
.sh{margin-bottom:28px;}
.sh .mono{margin-bottom:11px;display:block;min-height:1.3em;}
.sh p{max-width:56ch;margin-top:14px;color:var(--ink-2);}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px) rotate(.4deg);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.9,.3,1);}
.rv.in{opacity:1;transform:none;}
.stagger>*{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.9,.3,1);}
.stagger.in>*{opacity:1;transform:none;}
.stagger.in>*:nth-child(1){transition-delay:.05s;}
.stagger.in>*:nth-child(2){transition-delay:.16s;}
.stagger.in>*:nth-child(3){transition-delay:.27s;}
.stagger.in>*:nth-child(4){transition-delay:.38s;}

/* ---------- comparison ---------- */
.compare{border:3px solid var(--ink);border-radius:20px;background:var(--bone-2);overflow:hidden;}
.stepper{display:inline-flex;align-items:center;gap:0;border:2.5px solid var(--ink);border-radius:100px;overflow:hidden;background:var(--bone-2);}
.stepper button{
  font:inherit;cursor:pointer;border:0;background:transparent;color:var(--ink);
  font-family:var(--fs-d);font-variation-settings:"wght" 800;font-size:16px;
  width:30px;height:28px;line-height:1;transition:background .12s;
}
.stepper button:hover{background:var(--lime);}
.stepper button:focus-visible{outline:2px solid var(--cobalt);outline-offset:-2px;}
.stepper b{
  font-family:var(--fs-m);font-size:13px;font-variant-numeric:tabular-nums;
  padding:0 4px;min-width:44px;text-align:center;
  border-left:2.5px solid var(--ink);border-right:2.5px solid var(--ink);height:28px;
  display:flex;align-items:center;justify-content:center;
}
/* compact stepper that lives in the lime "pays for itself" cell */
.rateline{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:6px;}
.stepper.mini{background:rgba(247,241,228,.6);border-width:2px;}
.stepper.mini button{width:24px;height:21px;font-size:13px;}
.stepper.mini button:hover{background:var(--ink);color:var(--lime);}
.stepper.mini b{min-width:36px;height:21px;font-size:11px;border-left-width:2px;border-right-width:2px;}
.bars{padding:20px 18px 6px;display:flex;flex-direction:column;gap:18px;}
.barrow .bl{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:7px;}
.barrow .bname{font-family:var(--fs-d);font-variation-settings:"wdth" 108,"wght" 780;font-size:clamp(14px,2.2vw,17px);line-height:1.15;}
.barrow .bval{font-family:var(--fs-m);font-size:clamp(13px,2.2vw,16px);font-variant-numeric:tabular-nums;white-space:nowrap;}
.track{height:26px;background:rgba(20,16,36,.07);border-radius:4px;overflow:hidden;}
.track i{
  display:block;height:100%;border-radius:0 4px 4px 0;min-width:3px;width:0;
  transition:width .6s cubic-bezier(.2,.8,.3,1);
}
.barrow .sub{font-family:var(--fs-m);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin-top:6px;display:block;}
.capt{padding:4px 18px 20px;font-family:var(--fs-m);font-size:10px;line-height:1.7;letter-spacing:.03em;color:var(--ink-2);}

/* ---------- cost bands ---------- */
.bands{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:860px){.bands{grid-template-columns:1fr;}}
.band{border:3px solid var(--ink);border-radius:18px;padding:22px;background:var(--bone-2);display:flex;flex-direction:column;transition:transform .2s cubic-bezier(.3,1.5,.5,1),box-shadow .2s;}
.band:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 6px 0 var(--ink);}
.band .bt{font-family:var(--fs-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);}
.band .bp{font-family:var(--fs-d);font-variation-settings:"wdth" 114,"wght" 850;font-size:clamp(26px,4vw,34px);line-height:1;letter-spacing:-.03em;margin:10px 0 12px;}
.band p{font-size:15px;color:var(--ink-2);}
.aside{
  margin-top:16px;border:3px solid var(--ink);border-radius:18px;
  background:var(--bone);padding:20px 22px;
}
.aside p{font-size:15.5px;max-width:70ch;}
.aside .mono{display:block;margin-bottom:9px;}

/* ---------- three ways ---------- */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:860px){.ways{grid-template-columns:1fr;}}
.way{border:3px solid var(--ink);border-radius:18px;overflow:hidden;background:var(--bone-2);display:flex;flex-direction:column;transition:transform .2s cubic-bezier(.3,1.5,.5,1),box-shadow .2s;}
.way:hover{transform:translateY(-4px);box-shadow:0 6px 0 var(--ink);}
.way .wh{padding:20px;color:var(--bone);}
.way .wh .mono{color:rgba(247,241,228,.75);display:block;margin-bottom:9px;}
.way .wh h3{font-family:var(--fs-d);font-variation-settings:"wdth" 116,"wght" 830;font-size:clamp(24px,3.6vw,32px);line-height:.92;letter-spacing:-.025em;}
.way .wb{padding:18px 20px 22px;flex:1;}
.way .wb p{font-size:15px;color:var(--ink-2);}
.way ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;}
.way li{font-family:var(--fs-m);font-size:11px;letter-spacing:.04em;text-transform:uppercase;display:flex;gap:8px;align-items:flex-start;}
.way li::before{content:"";width:9px;height:9px;border-radius:2px;border:2px solid var(--ink);flex:0 0 auto;margin-top:3px;}

/* ---------- playground (drag & throw) ---------- */
.pg{
  position:relative;border:3px solid var(--ink);border-radius:20px;background:var(--bone-2);
  background-image:radial-gradient(circle at 6px 6px,rgba(20,16,36,.13) 1.6px,transparent 1.7px);
  background-size:26px 26px;
  padding:18px;overflow:hidden;
}
.pg.live{height:430px;padding:0;touch-action:pan-y;}
.pgnote{position:absolute;top:12px;left:16px;z-index:1;pointer-events:none;color:var(--ink-2);}
.pg:not(.live) .pgnote{position:static;display:block;margin-bottom:12px;}
.outs{display:flex;flex-wrap:wrap;gap:9px;}
.out{
  font-family:var(--fs-d);font-variation-settings:"wdth" 108,"wght" 780;font-size:clamp(15px,2.4vw,21px);
  border:3px solid var(--ink);border-radius:100px;padding:8px 18px;background:var(--bone);
  white-space:nowrap;
}
.pg.live .outs{display:contents;}
.pg.live .out{
  position:absolute;top:0;left:0;margin:0;cursor:grab;user-select:none;-webkit-user-select:none;
  will-change:transform;box-shadow:0 3px 0 var(--ink);
}
.pg.live .out.held{cursor:grabbing;box-shadow:0 8px 0 rgba(20,16,36,.35);}
.pgtools{position:absolute;top:10px;right:12px;z-index:3;display:flex;gap:7px;}
.pg:not(.live) .pgtools{display:none;}
.pgbtn{
  font-family:var(--fs-m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;border:2px solid var(--ink);border-radius:100px;background:var(--bone);
  color:var(--ink);padding:5px 11px;box-shadow:0 2px 0 var(--ink);
  transition:transform .12s,box-shadow .12s;
}
.pgbtn:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--ink);}
.pgbtn:active{transform:translateY(1px);box-shadow:0 0 0 var(--ink);}
.pgbtn:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px;}

/* spark particles for the builder */
.spark{
  position:fixed;width:11px;height:11px;border-radius:3px;border:2px solid var(--ink);
  pointer-events:none;z-index:998;margin:-6px 0 0 -6px;
}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:860px){.steps{grid-template-columns:1fr;}}
.step{border:3px solid var(--ink);border-radius:18px;padding:22px;background:var(--bone-2);}
.step .num{
  width:38px;height:38px;border-radius:10px;border:3px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fs-d);font-variation-settings:"wdth" 100,"wght" 850;font-size:18px;
  margin-bottom:14px;color:var(--bone);
  transition:transform .25s cubic-bezier(.3,1.7,.5,1);
}
.step:hover .num{transform:rotate(-8deg) scale(1.12);}
.step h3{font-family:var(--fs-d);font-variation-settings:"wdth" 110,"wght" 800;font-size:21px;line-height:1;margin-bottom:9px;}
.step p{font-size:15px;color:var(--ink-2);}

/* ---------- handoff ---------- */
.handoff{
  border:3px solid var(--ink);border-radius:24px;background:var(--ink);color:var(--bone);
  overflow:hidden;
}
.hh{padding:32px 28px 26px;border-bottom:3px solid var(--bone);}
.hh h2{color:var(--bone);}
.hh p{margin-top:16px;max-width:56ch;color:#BDB6D6;font-size:16px;}
.keys{display:grid;grid-template-columns:repeat(4,1fr);}
@media(max-width:820px){.keys{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.keys{grid-template-columns:1fr;}}
.key{padding:22px 20px 26px;border-right:2px solid #2E2846;}
.key:last-child{border-right:0;}
.key .kn{font-family:var(--fs-d);font-variation-settings:"wdth" 108,"wght" 800;font-size:17px;line-height:1;margin-bottom:8px;}
.key p{font-size:14px;color:#A79FC4;line-height:1.5;}
.key .kd{width:22px;height:22px;border-radius:6px;margin-bottom:13px;border:2px solid var(--bone);transition:transform .25s cubic-bezier(.3,1.7,.5,1);}
.key:hover .kd{transform:rotate(45deg);}

/* ---------- faq ---------- */
.qa{border-top:3px solid var(--ink);}
.qi{border-bottom:3px solid var(--ink);}
.qh{margin:0;font:inherit;font-weight:inherit;}
.qq{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;
  font:inherit;text-align:left;background:transparent;border:0;cursor:pointer;
  padding:20px 4px;color:var(--ink);
}
.qq span{font-family:var(--fs-d);font-variation-settings:"wdth" 108,"wght" 780;font-size:clamp(16px,2.6vw,20px);line-height:1.12;}
.qq b{
  font-family:var(--fs-d);font-variation-settings:"wght" 800;font-size:22px;line-height:1;
  width:34px;height:34px;flex:0 0 auto;border:3px solid var(--ink);border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s cubic-bezier(.3,1.5,.5,1),background .2s;
}
.qq[aria-expanded="true"] b{transform:rotate(135deg);background:var(--lime);}
.qq:focus-visible{outline:3px solid var(--cobalt);outline-offset:-3px;}
.qb{overflow:hidden;height:0;transition:height .35s cubic-bezier(.3,.9,.3,1);}
.qb p{font-size:15px;color:var(--ink-2);padding:0 4px 20px;max-width:78ch;}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--bone);border-radius:34px 34px 0 0;margin-top:110px;}
.fin{max-width:1120px;margin:0 auto;padding:66px 20px 46px;text-align:center;}
footer h2{color:var(--bone);}
footer h2 .pop{color:var(--ink);}
footer .go{max-width:420px;margin:28px auto 0;background:var(--lime);color:var(--ink);border-color:var(--bone);box-shadow:0 5px 0 var(--bone);}
footer .go:hover{box-shadow:0 7px 0 var(--bone);}
.fine{font-family:var(--fs-m);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#8C84AC;margin-top:28px;line-height:1.8;}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none!important;transition:none!important;}
  .rv,.stagger>*{opacity:1!important;transform:none!important;}
  .cursor{display:none;}
  .tickrow{animation:none!important;}
}