/* Livery landing v2. Indigo ground, thermal fields, rounded sheets that slide over each other,
   squircle corners wherever the browser has corner-shape, and every demo built into the page itself.
   Sizes inside a demo stage are in em so a stage scales with both viewport width and height. */
:root{
  --ind:#111111; --ind2:#1C1C1C; --night:#0A0A0A; --ult:#2F3BE0; --ult-hi:#7C84FF; --haze:#EDEDED; --paper:#F6F6F6; --white:#fff;
  --coral:#F0605A; --peach:#F6D3A6; --amber:#F28E45; --mint:#7CE0B0; --ink:#111111; --ink2:#555555; --ink3:#7A7A7A;
  --ln-d:rgba(255,255,255,.12); --ln-d2:rgba(255,255,255,.24); --ln-l:rgba(0,0,0,.11); --ln-l2:rgba(0,0,0,.22);
  --display:'Unbounded',system-ui,sans-serif; --ui:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1); --gut:clamp(16px,3.4vw,52px);
  --r1:8px; --r2:12px; --r3:18px; --r4:26px; --r5:36px; --r6:48px;
}
@supports (corner-shape: squircle){
  :root{--r1:12px; --r2:18px; --r3:26px; --r4:38px; --r5:52px; --r6:72px}
  *,*::before,*::after{corner-shape:squircle}
  .round,.round::before,.round::after{corner-shape:round}
}
*{box-sizing:border-box;margin:0}
html{background:var(--night);-webkit-text-size-adjust:100%}
body{font:17px/1.55 var(--ui);color:var(--white);background:var(--night);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
s{text-decoration:none}
:focus-visible{outline:2px solid var(--peach);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono)}
.lab{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.wrap{max-width:1360px;margin:0 auto;padding-inline:var(--gut)}
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ---------- nav ---------- */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:clamp(12px,2.4vw,34px);padding:7px 7px 7px 18px;border-radius:var(--r4);width:max-content;max-width:calc(100vw - 20px);background:rgba(0,0,0,.32);border:1px solid var(--ln-d);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);transition:background .4s var(--ease),box-shadow .4s var(--ease),color .4s}
.nav.solid{background:rgba(12,12,12,.72);box-shadow:0 14px 40px rgba(0,0,0,.28)}
.nav.onlight{background:rgba(255,255,255,.72);color:var(--ink);border-color:var(--ln-l)}
.nav.onlight .btn{background:var(--ink);color:#fff}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{width:32px;height:16px;flex:none}
.brand span{font:500 12.5px/1 var(--display);letter-spacing:.18em}
.nav ul{list-style:none;padding:0;display:flex;gap:4px;font:500 12.5px/1 var(--ui)}
.nav ul a{display:block;padding:9px 12px;border-radius:var(--r2);opacity:.78;transition:opacity .2s,background .2s}
.nav ul a:hover{opacity:1;background:rgba(255,255,255,.1)}
.nav.onlight ul a:hover{background:rgba(0,0,0,.07)}
@media(max-width:900px){.nav ul{display:none}.nav{gap:18px}}

/* ---------- chapter rail ---------- */
.rail{position:fixed;right:clamp(10px,1.6vw,26px);top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:6px;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.rail.show{opacity:1;pointer-events:auto}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:10px;height:22px;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:currentColor}
.rail a span{opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s var(--ease)}
.rail:hover a span,.rail a.on span{opacity:.9;transform:none}
.rail a i{width:8px;height:8px;border-radius:99px;background:currentColor;opacity:.35;transition:height .4s var(--ease),opacity .3s}
.rail a.on i{height:22px;opacity:1}
.rail.onlight{color:var(--ink)}
@media(max-width:1560px){.rail{display:none}}

/* ---------- buttons + form ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 22px;border:0;border-radius:var(--r3);background:var(--white);color:var(--ind);font:600 14.5px/1 var(--ui);cursor:pointer;white-space:nowrap;transition:background .2s,box-shadow .3s var(--ease),color .2s;will-change:transform}
.btn:hover{box-shadow:0 12px 34px rgba(0,0,0,.3),0 0 0 4px rgba(255,255,255,.12)}
.btn.sm{height:38px;padding:0 16px;font-size:13px;border-radius:var(--r2)}
.btn svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.wl{display:flex;flex-wrap:wrap;gap:6px;max-width:540px;position:relative;padding:6px;border-radius:calc(var(--r3) + 6px);background:rgba(255,255,255,.1);border:1px solid var(--ln-d2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.wl input[type=email]{flex:1 1 200px;min-width:0;height:50px;padding:0 16px;border-radius:var(--r3);border:0;background:transparent;color:#fff;font:400 15.5px var(--ui)}
.wl input[type=email]::placeholder{color:rgba(255,255,255,.6)}
.wl input[type=email]:focus{outline:none;background:rgba(255,255,255,.08)}
.wl:focus-within{border-color:var(--peach);box-shadow:0 0 0 4px rgba(246,211,166,.18)}
.wl .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wl-msg{flex-basis:100%;font:400 13px/1.4 var(--mono);color:var(--peach);padding:2px 10px 4px}
.wl-msg:empty{display:none}
.wl-done{display:none;flex-direction:column;gap:6px}
.wl-done b{font:500 clamp(15px,1.5vw,19px)/1.1 var(--display);letter-spacing:.3em;text-transform:uppercase;animation:lvTrack 1.2s cubic-bezier(.16,1,.3,1) both}
.wl-done span{font:400 14px/1.45 var(--ui);opacity:.78;max-width:46ch}
.wl-wrap.done .wl{display:none}.wl-wrap.done .wl-done{display:flex}
@media(max-width:520px){.wl .btn{flex:1 1 100%}}

/* ---------- section scaffolding ---------- */
main>section{position:relative}
main>section+section,main>.marquee+section{margin-top:calc(var(--r6) * -1);border-radius:var(--r6) var(--r6) 0 0}
.kick{font:500 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;opacity:.72;display:flex;gap:10px;align-items:center}
.kick i{display:inline-block;width:22px;height:1px;background:currentColor;opacity:.6}
h2.big{font:600 clamp(34px,5vw,78px)/.96 var(--ui);letter-spacing:-.045em;text-wrap:balance;margin-top:14px}
h2 em{font-style:normal}
.lede{font-size:clamp(16px,1.35vw,20px);line-height:1.5;max-width:52ch;opacity:.82;text-wrap:pretty}
.light{background:var(--paper);color:var(--ink)}
.dark{background:var(--ind)}
.night{background:var(--night)}

/* ---------- hero ---------- */
.hero{padding:10px;background:var(--night)}
.sheet{position:relative;min-height:calc(100svh - 20px);border-radius:var(--r6);overflow:hidden;isolation:isolate;display:grid;grid-template-rows:1fr;transform-origin:50% 0;will-change:transform}
.sheet .fx{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%}
.hero .shade{position:absolute;inset:0;z-index:1;background:radial-gradient(120% 90% at 0% 100%,rgba(0,0,0,.92) 10%,rgba(0,0,0,.4) 55%,rgba(0,0,0,0) 80%),linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0) 30%,rgba(0,0,0,.5))}
.orb{position:absolute;z-index:1;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;mix-blend-mode:screen}
.orb.o1{width:44vw;height:44vw;right:-10vw;top:-12vw;background:radial-gradient(circle,#5B6CFF,transparent 65%);animation:orb 18s ease-in-out infinite alternate}
.orb.o2{width:30vw;height:30vw;left:30vw;bottom:-14vw;background:radial-gradient(circle,#F0605A,transparent 65%);animation:orb 22s ease-in-out -6s infinite alternate-reverse}
@keyframes orb{to{transform:translate(-8vw,6vw) scale(1.15)}}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(20px,3vw,48px);align-items:center;align-self:stretch;padding:clamp(96px,12vh,130px) clamp(20px,4vw,64px) clamp(56px,8vh,90px);max-width:1440px;width:100%;margin:0 auto}
.hero-copy{display:grid;gap:clamp(16px,2.4vh,26px);will-change:transform}
.eyebrow{display:inline-flex;align-items:center;gap:10px;width:max-content;padding:7px 14px 7px 10px;border-radius:var(--r2);background:rgba(255,255,255,.1);border:1px solid var(--ln-d);font:500 12.5px var(--ui);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:wIn 1.1s var(--ease) both}
.live{width:8px;height:8px;border-radius:99px;background:var(--mint);box-shadow:0 0 0 0 rgba(124,224,176,.6);animation:live 2s infinite}
@keyframes live{70%{box-shadow:0 0 0 9px rgba(124,224,176,0)}100%{box-shadow:0 0 0 0 rgba(124,224,176,0)}}
.hero h1{font:600 clamp(34px,4.5vw,70px)/1.02 var(--ui);letter-spacing:-.045em}
.split .ln{display:inline}
.split .w{display:inline-block;animation:wIn 1.25s var(--ease) both;animation-delay:calc(.15s + var(--i,0) * 75ms)}
@keyframes wIn{from{opacity:0;transform:translateY(.55em) rotate(3deg);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
@keyframes sheen{to{background-position:-250% 0}}
.cycler{display:inline-block;height:2.1em;overflow:hidden;border-radius:var(--r2);background:rgba(255,255,255,.12);border:1px solid var(--ln-d);padding:0 14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cy-in{display:flex;flex-direction:column;animation:cyc 11s var(--ease) infinite}
.cy-in span{height:2.1em;line-height:2.05em;font-family:var(--mono);font-size:.92em;color:var(--peach);white-space:nowrap}
@keyframes cyc{0%,16%{transform:translateY(0)}20%,36%{transform:translateY(-2.1em)}40%,56%{transform:translateY(-4.2em)}60%,76%{transform:translateY(-6.3em)}80%,96%{transform:translateY(-8.4em)}100%{transform:translateY(-10.5em)}}
.hero .lede.sub{font:500 clamp(18px,1.7vw,24px)/1.35 var(--ui);letter-spacing:-.01em;max-width:none;margin-top:-4px}
.hero .lede{opacity:.86;animation:wIn 1.2s var(--ease) .85s both;max-width:46ch}
.hero .wl-wrap{animation:wIn 1.2s var(--ease) .95s both}
.hero-art{position:relative;height:min(68vh,640px);perspective:1200px}
.tk{position:absolute;will-change:transform}
.tk-i{transform:translate3d(calc(var(--mx,0) * var(--d,1) * 14px),calc(var(--my,0) * var(--d,1) * 14px),0) rotateY(calc(var(--mx,0) * 8deg)) rotateX(calc(var(--my,0) * -8deg));transition:transform .9s var(--ease);transform-style:preserve-3d}
.tk-c{padding:14px;border-radius:var(--r4);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18);display:grid;gap:10px;animation:float 7s ease-in-out infinite;animation-delay:calc(var(--d,1) * -1.7s)}
@keyframes float{50%{transform:translateY(-12px) rotate(.6deg)}}
.tk-h,.tk-f{display:flex;justify-content:space-between;gap:12px;font:500 11px var(--mono);letter-spacing:.04em;opacity:.9}
.tk-h em{font-style:normal;opacity:.6}
.okp{color:var(--mint)}
.t1{left:-4%;top:-7%;z-index:3;width:min(300px,62%);animation:tkIn 1.4s var(--ease) .5s both}
.t2{right:-4%;top:-11%;z-index:3;width:150px;animation:tkIn 1.4s var(--ease) .65s both}
.t3{left:46%;top:-13%;z-index:3;width:200px;animation:tkIn 1.4s var(--ease) .8s both}
.t4{left:-8%;bottom:-2%;z-index:3;width:min(260px,46%);animation:tkIn 1.4s var(--ease) .95s both}
.t4 .tk-c{background:rgba(255,255,255,.16)}
.t5{right:-2%;bottom:-8%;z-index:3;width:min(320px,56%);animation:tkIn 1.4s var(--ease) 1.1s both}
@keyframes tkIn{from{opacity:0;translate:0 60px;scale:.92}}
.hramp{display:flex;gap:4px}
.hramp i{flex:1;height:38px;border-radius:var(--r1);background:var(--c);transition:transform .4s var(--spring)}
.hramp i.on{outline:2px solid #fff;outline-offset:2px;transform:translateY(-4px)}
.aa{font:600 64px/1 var(--ui);letter-spacing:-.04em;background:linear-gradient(160deg,#fff,var(--peach));-webkit-background-clip:text;background-clip:text;color:transparent}
.radii{display:flex;gap:8px;align-items:end}
.radii i{width:38px;height:38px;border:1.5px solid rgba(255,255,255,.85);border-radius:var(--r) 0 0 0;border-right:0;border-bottom:0}
.term{background:rgba(0,0,0,.62);font:400 12px/1.75 var(--mono);color:#EAEAEA;min-height:150px;align-content:start}
.term .p{color:var(--peach)}.term .d{opacity:.55}.term .ok{color:var(--mint)}
.cur{display:inline-block;width:7px;height:14px;background:#fff;vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{opacity:0}}
@media(max-width:900px){
  .hero-in{grid-template-columns:1fr;padding-top:96px;align-content:center}
  .hero-art{height:250px;order:-1;margin-bottom:4px}
  .t1,.t3,.t4,.t5{display:none}.t2{width:110px;right:-2%;top:-4%}.t2 .aa{font-size:40px}
}

/* ---------- u-card (the user's own product, in its own system) ---------- */
.u-card{width:100%;background:#fff;color:#111311;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 18px rgba(0,0,0,.08);font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
@supports (corner-shape: squircle){.u-card{border-radius:22px}}
.u-row{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:#5F6661}
.u-pill{background:#E6F8EF;color:#0B5E3B;padding:2px 8px;border-radius:999px;font-weight:600;font-size:10.5px}
.u-title{font-size:15px;font-weight:650}
.u-wave{height:24px;display:flex;align-items:center;gap:3px}
.u-wave i{display:block;width:3px;border-radius:2px;background:#00B865;flex:none}
.u-actions{display:flex;gap:8px}
.u-btn{flex:1;text-align:center;border-radius:10px;padding:8px 10px;font-size:12px;font-weight:600}
.u-btn.p{background:#00B865;color:#fff}.u-btn.s{background:#F1F3F1;color:#111311}

/* ---------- marquee ---------- */
.marquee{position:relative;z-index:2;background:var(--night);padding:clamp(28px,4vw,48px) 0 calc(var(--r6) + clamp(28px,4vw,48px));overflow:hidden;display:grid;gap:12px}
.mrow{overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mtrack{display:inline-flex;gap:12px;will-change:transform}
.mchip{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px 0 8px;border-radius:var(--r3);border:1px solid var(--ln-d);background:rgba(255,255,255,.04);font:500 15px var(--ui)}
.mchip i{width:30px;height:30px;border-radius:var(--r2);display:grid;place-items:center;font:500 11px var(--mono);background:var(--c,#2F3BE0);color:#fff}
.mchip em{font:400 12px var(--mono);font-style:normal;opacity:.5}

/* ---------- pinned demos ---------- */
.demo{height:calc(100svh + var(--len,300) * 1vh)}
.pin{position:sticky;top:0;height:100svh;overflow:hidden;border-radius:inherit}
.pin-in{position:absolute;inset:0;isolation:isolate;display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(10px,2.4vh,28px);padding:clamp(78px,11vh,104px) var(--gut) clamp(18px,4vh,44px)}
.dhead{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(16px,3vw,56px);align-items:end;max-width:1360px;width:100%;margin:0 auto}
.dhead h2{font:600 clamp(26px,3.3vw,52px)/1 var(--ui);letter-spacing:-.04em;margin-top:12px;text-wrap:balance}
.dhead p{font-size:clamp(14px,1.08vw,16.5px);line-height:1.5;opacity:.78;max-width:52ch}
.steps{list-style:none;padding:0;display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;counter-reset:st}
.steps li{counter-increment:st;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border-radius:var(--r2);border:1px solid var(--ln-d);opacity:.55;transition:all .4s var(--ease);display:flex;gap:8px;align-items:center}
.steps li::before{content:counter(st);opacity:.6}
.steps li.on{opacity:1;background:#fff;color:var(--ind);border-color:#fff;transform:translateY(-2px)}
.light .steps li{border-color:var(--ln-l2)}
.light .steps li.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.ghost{position:absolute;z-index:0;right:clamp(-20px,-1vw,0px);bottom:-.14em;font:600 clamp(160px,34vw,520px)/.8 var(--ui);letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);pointer-events:none;user-select:none;will-change:transform}
.light .ghost{-webkit-text-stroke-color:rgba(0,0,0,.08)}
.dstage{position:relative;z-index:2;min-height:0;width:100%;max-width:1360px;margin:0 auto;font-size:clamp(9px,min(1.02vw,1.85vh),16px)}
@media(max-width:860px){
  .dhead{grid-template-columns:1fr}.dhead p{display:none}.steps{margin-top:8px}
  .pin-in{padding-top:74px}
  .dstage{font-size:clamp(8px,2.3vw,12px)}
}
@media(max-height:760px) and (min-width:861px){.dhead p{display:none}}
.caret{display:inline-block;width:2px;height:1.1em;background:currentColor;vertical-align:-.15em;margin-left:2px;animation:blink 1s steps(2) infinite}
.tag{display:inline-flex;align-items:center;height:2em;padding:0 .8em;border-radius:var(--r1);font:500 .8em var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}

/* ---------- why (morph) ---------- */
.why{display:grid;grid-template-rows:auto 1fr;gap:2.2em;align-content:center}
.prompt{justify-self:center;display:flex;align-items:center;gap:.8em;width:min(100%,46em);height:4.2em;padding:0 .6em 0 1.4em;border-radius:var(--r4);background:#fff;border:1px solid var(--ln-l);box-shadow:0 1.4em 3.4em rgba(0,0,0,.12);font:400 1.15em var(--ui);color:var(--ink)}
.prompt .pp{font-family:var(--mono);color:var(--ult)}
.prompt .pt{flex:1;white-space:nowrap;overflow:hidden}
.pgo{margin-left:auto;height:2.6em;padding:0 1.2em;border-radius:var(--r3);background:var(--ink);color:#fff;display:grid;place-items:center;font:600 .85em var(--ui)}
.why-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:3em;align-items:center;max-width:76em;width:100%;margin:0 auto}
.why-l{display:grid;gap:1.4em;align-content:center}
.vs-tags{position:relative;height:2.2em}
.vs-tags .tag{position:absolute;left:0;top:0;font-size:.95em}
.tag.bad{color:#B4282D;background:rgba(240,96,90,.12);box-shadow:inset 0 0 0 1px rgba(240,96,90,.4)}
.tag.good{color:#0B5E3B;background:rgba(29,122,85,.1);box-shadow:inset 0 0 0 1px rgba(29,122,85,.4)}
.drift{display:flex;align-items:baseline;gap:.6em}
.drift b{font:600 6em/.9 var(--ui);letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:var(--coral);transition:color .4s}
.drift b.zero{color:#1D7A55}
.drift span{font:500 1em var(--mono);color:var(--ink2);max-width:9em}
.drift-list{list-style:none;padding:0;display:grid;gap:.6em;font:400 1em/1.4 var(--mono);color:var(--ink2)}
.drift-list li{width:fit-content;display:flex;gap:.7em;align-items:baseline;position:relative}
.drift-list li::before{content:"";width:.55em;height:.55em;border-radius:99px;flex:none;background:var(--coral);transform:translateY(-.05em)}
.drift-list li::after{content:"";position:absolute;left:1.3em;right:0;top:55%;height:1.5px;background:#1D7A55;transform-origin:left;transform:scaleX(var(--k,0))}
.why-c{position:relative;display:grid;place-items:center;min-height:24em}
.mcard{position:relative;width:25em;font-size:1.12em;padding:1.4em;border-radius:28px;background:#fff;box-shadow:0 2em 4em rgba(139,92,246,.35);color:#fff;overflow:hidden;isolation:isolate}
.mc-bg{position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,#8B5CF6,#EC4899)}
.mc-in{display:grid;gap:1em}
.mc-row{display:flex;justify-content:space-between;align-items:center;font-size:.85em}
.mc-pill{padding:.2em .7em;border-radius:999px;font-weight:600;font-size:.9em}
.mc-title{font:700 calc(var(--fs,1.5) * 1em)/1.2 Inter,system-ui,sans-serif;letter-spacing:-.01em}
.mc-wave{height:2em;display:flex;align-items:center;gap:.25em}
.mc-wave i{width:.25em;border-radius:2px;background:var(--wc,rgba(255,255,255,.85))}
.mc-acts{display:flex;gap:.6em}
.mc-acts span{flex:1;text-align:center;padding:.75em;font:600 .95em system-ui,sans-serif}
.scanring{position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(47,59,224,.0) 40%,rgba(124,132,255,.55) 50%,transparent 60%);background-size:300% 100%;background-position:calc(var(--sp,0) * -200% + 150%) 0;mix-blend-mode:multiply}
.ann{position:absolute;display:flex;align-items:center;gap:.6em;font:500 .9em var(--mono);color:var(--ink);white-space:nowrap}
.ann span{padding:.45em .8em;border-radius:var(--r2);background:#fff;box-shadow:0 .6em 1.6em rgba(0,0,0,.12),inset 0 0 0 1px var(--ln-l)}
.ann b{font-weight:500;color:var(--ult)}
.ann i{display:block;height:1.5px;width:3.4em;background:var(--ult);position:relative}
.ann i::before{content:"";position:absolute;width:.55em;height:.55em;border-radius:99px;background:var(--ult);top:50%;margin-top:-.275em}
.a1{left:calc(50% + 13em);top:8%}.a1 i::before{left:-.2em}
.a2{right:calc(50% + 13em);top:8%;flex-direction:row-reverse}.a2 i::before{right:-.2em}
.a3{left:calc(50% + 13em);bottom:8%}.a3 i::before{left:-.2em}
.a4{right:calc(50% + 13em);top:44%;flex-direction:row-reverse}.a4 i::before{right:-.2em}
.a5{left:calc(50% + 13em);top:44%}.a5 i::before{left:-.2em}
@media(max-width:860px){
  .why-row{grid-template-columns:1fr;gap:1.6em}
  .why-l{display:flex;align-items:center;gap:1.2em}.vs-tags{flex:none;width:11em}.drift-list{display:none}.drift b{font-size:4em}
  .why-c{min-height:20em}.ann i{display:none}.a1,.a3{left:auto;right:0}.a2,.a4,.a5{right:auto;left:0}
  .a1{top:-4%}.a2{top:-4%}.a3{bottom:-4%}.a4,.a5{display:none}
}

/* ---------- life ---------- */
.life{padding:clamp(80px,11vw,150px) 0 calc(var(--r6) + clamp(60px,8vw,110px));background:var(--haze);color:var(--ink)}
.life .cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(28px,4vw,48px)}
@media(max-width:860px){.life .cols{grid-template-columns:1fr}}
.life .col{padding:clamp(20px,2.6vw,36px);border-radius:var(--r5);background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04),0 24px 60px rgba(0,0,0,.06)}
.life .with{background:var(--ind);color:#fff}
.life .col h3{font:500 clamp(16px,1.6vw,22px)/1.05 var(--display);text-transform:uppercase;margin-bottom:18px;display:flex;gap:12px;align-items:center;letter-spacing:.06em}
.life .col h3 i{width:10px;height:10px;border-radius:99px;flex:none}
.life .without h3 i{background:var(--coral)}.life .with h3 i{background:var(--mint);box-shadow:0 0 12px var(--mint)}
.life ol{list-style:none;padding:0;display:grid}
.life li{display:grid;grid-template-columns:78px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--ln-l);opacity:.2;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.life .with li{border-top-color:var(--ln-d)}
.life li.in{opacity:1;transform:none}
.life li .t{font:500 11.5px/1.7 var(--mono);letter-spacing:.06em;opacity:.6}
.life li b{display:block;font:600 17px/1.3 var(--ui);letter-spacing:-.01em;margin-bottom:2px;position:relative;width:fit-content}
.life li span{font-size:15px;opacity:.72;line-height:1.5}
.life .without li b::after{content:"";position:absolute;left:0;right:0;top:55%;height:1.5px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease) .35s}
.life .without li.in b::after{transform:scaleX(1)}

/* ---------- 01 extract ---------- */
.ex{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:4em;align-items:center;align-content:center}
.ex-l{display:grid;gap:1.2em}
.url{display:flex;align-items:center;gap:.8em;height:3.8em;padding:0 .5em 0 1.2em;border-radius:var(--r3);background:rgba(255,255,255,.08);border:1px solid var(--ln-d2);font:400 1.1em var(--mono)}
.url svg{width:1.1em;height:1.1em;opacity:.7;flex:none}
.url-t{flex:1;white-space:nowrap}.url .mut{opacity:.5}
.url-go{height:2.7em;padding:0 1.2em;border-radius:var(--r2);background:#fff;color:var(--ind);display:grid;place-items:center;font:600 .82em var(--ui)}
.site{position:relative;height:22em;border-radius:var(--r4);overflow:hidden;background:#F7F7F5;box-shadow:0 2.4em 5em rgba(0,0,0,.45);font-family:system-ui,sans-serif}
.s-nav{height:3.2em;background:#111311;display:flex;align-items:center;gap:1.2em;padding:0 1.3em}
.s-logo{width:1.2em;height:1.2em;border-radius:99px;background:#00B865}
.s-nav b{width:3em;height:.45em;border-radius:3px;background:rgba(247,247,245,.6)}
.s-cta{margin-left:auto;width:5.6em;height:1.8em;border-radius:.6em;background:#00B865}
.s-body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1.6em;padding:2.2em 1.8em}
.s-hero{display:flex;flex-direction:column;gap:.75em}
.s-hero b{display:block;border-radius:4px;background:#111311}
.s-hero .l1{height:1.4em;width:92%}.s-hero .l2{height:1.4em;width:68%}
.s-hero .l3{height:.55em;width:80%;background:#5F6661;margin-top:.7em}.s-hero .l4{height:.55em;width:62%;background:#5F6661}
.s-btns{display:flex;gap:.6em;margin-top:.9em}
.s-btn{width:6.6em;height:2.4em;border-radius:.7em;background:#00B865}.s-btn2{width:5.6em;height:2.4em;border-radius:.7em;background:#E6F8EF}
.s-card{background:#fff;border-radius:1em;padding:1em;display:flex;flex-direction:column;gap:.8em;box-shadow:0 1px 2px rgba(0,0,0,.08),0 .5em 1.4em rgba(0,0,0,.08);font-size:.85em;align-self:start}
.s-card .u-btn{flex:none}
.beam{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--coral);box-shadow:0 0 1.2em .3em rgba(240,96,90,.7),0 0 4em 1em rgba(240,96,90,.25);z-index:3}
.scanned{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(47,59,224,.08),rgba(240,96,90,.12));background-size:100% 100%;clip-path:inset(0 calc(100% - var(--sx,0) * 1%) 0 0);pointer-events:none}
.scanned::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(47,59,224,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(47,59,224,.22) 1px,transparent 1px);background-size:1.6em 1.6em;opacity:.5}
.pages{position:absolute;right:1em;bottom:1em;z-index:4;font:500 .85em var(--mono);padding:.5em .8em;border-radius:var(--r2);background:rgba(0,0,0,.85);color:#fff}
.ex-r{position:relative}
.board{padding:1.4em;border-radius:var(--r5);background:rgba(255,255,255,.06);border:1px solid var(--ln-d);display:grid;gap:1.1em}
.b-head{display:flex;align-items:center;gap:.8em;font:600 1.1em var(--ui)}
.b-t{display:flex;align-items:center;gap:.6em}
.b-dot{width:.7em;height:.7em;border-radius:99px;background:#00B865}
.b-head .tag{background:rgba(246,211,166,.16);color:var(--peach);font-size:.7em}
.b-pct{margin-left:auto;font-size:.8em;opacity:.7}
.b-colors{display:grid;gap:.45em}
.slot{display:grid;grid-template-columns:2.4em minmax(0,1fr) auto;gap:.9em;align-items:center;padding:.35em;border-radius:var(--r2);background:rgba(255,255,255,.04)}
.slot .sw{width:2.4em;height:2.4em;border-radius:var(--r2);background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.slot div{display:flex;flex-direction:column;line-height:1.2}
.slot b{font:600 .95em var(--ui)}.slot span{font:400 .8em var(--mono);opacity:.6}
.slot em{font:500 .85em var(--mono);font-style:normal;opacity:.7;padding-right:.5em}
.b-type{display:flex;align-items:baseline;gap:.7em;padding:.4em .2em;border-top:1px solid var(--ln-d);font-weight:600;letter-spacing:-.03em}
.b-type em{margin-left:auto;font:400 .8em var(--mono);font-style:normal;opacity:.6;letter-spacing:0}
.b-rad{display:flex;align-items:center;gap:.7em}
.b-rad>i{width:2.2em;height:2.2em;border:1.5px solid rgba(255,255,255,.75);border-radius:var(--r)}
.b-sp{margin-left:auto;display:flex;align-items:end;gap:.35em;height:2.2em}
.b-sp i{width:var(--w);height:100%;background:var(--peach);border-radius:2px;opacity:.85;transform-origin:bottom}
.b-count{display:grid;grid-template-columns:repeat(4,1fr);gap:.6em;border-top:1px solid var(--ln-d);padding-top:.9em}
.b-count div{display:flex;flex-direction:column}
.b-count b{font:600 2em/1 var(--ui);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.b-count b.ul{color:var(--peach)}
.b-count span{font:400 .78em var(--mono);opacity:.6;margin-top:.3em}
.ready{position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:-1.8em;display:flex;align-items:center;gap:1em;padding:.8em 1.2em;border-radius:var(--r3);background:var(--peach);color:var(--ind);white-space:nowrap;box-shadow:0 1.2em 3em rgba(0,0,0,.35)}
.ready .tr{font:500 .95em var(--display);letter-spacing:calc(var(--ls,.4) * 1em)}
.ready .mono{font-size:.8em;opacity:.7}
.fly{position:absolute;left:0;top:0;width:1.6em;height:1.6em;margin:-.8em 0 0 -.8em;border-radius:99px;background:var(--c);box-shadow:0 0 0 2px #fff,0 .6em 1.4em rgba(0,0,0,.4);z-index:5;pointer-events:none}
@media(max-width:860px){
  .ex{grid-template-columns:1fr;gap:1.6em;align-content:start}
  .site{height:15em}.s-card{display:none}.s-body{grid-template-columns:1fr}
  .b-type,.b-rad{display:none}
  .b-colors{grid-template-columns:repeat(5,1fr)}.slot{grid-template-columns:1fr;justify-items:center;text-align:center}.slot em,.slot span{display:none}.slot .sw{width:100%;height:3em}
  .ready{bottom:-3.4em}
}

/* ---------- 02 review ---------- */
.rv-st{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) minmax(0,.9fr);gap:3em;align-items:center}
.rv-l{display:grid;gap:1.4em}
.bigcount{display:flex;flex-direction:column}
.bigcount b{font:600 8em/.85 var(--ui);letter-spacing:-.07em;font-variant-numeric:tabular-nums}
.bigcount span{font:500 1em var(--mono);opacity:.6;margin-top:.6em}
.rv-meter{height:.5em;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.rv-meter i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--ult),var(--mint))}
.kbdrow{display:flex;align-items:center;gap:.8em;font:400 .95em var(--ui);opacity:.85}
.kbd{display:inline-grid;place-items:center;width:2.6em;height:2.6em;border-radius:var(--r2);background:rgba(255,255,255,.1);border:1px solid var(--ln-d2);border-bottom-width:3px;font:500 1.1em var(--mono)}
.accall{justify-self:start;display:inline-flex;gap:.8em;align-items:center;height:3.2em;padding:0 1.3em;border-radius:var(--r3);background:var(--ult);font:600 .95em var(--ui);box-shadow:0 1em 2.4em rgba(47,59,224,.45)}
.accall em{font:400 .85em var(--mono);font-style:normal;opacity:.7}
.deck{position:relative;height:27em;perspective:1400px}
.rcard{position:absolute;left:50%;top:50%;width:24em;margin-left:-12em;margin-top:-13em;height:26em;padding:1.5em;border-radius:var(--r5);background:#fff;color:var(--ink);box-shadow:0 2em 5em rgba(0,0,0,.45);display:grid;grid-template-rows:auto auto 1fr auto auto;gap:1em;transform-origin:50% 120%}
.rc-top{display:flex;justify-content:space-between;align-items:center;gap:.6em}
.rc-path{font:500 .95em var(--mono)}
.rc-src{font:500 .75em var(--mono);padding:.35em .6em;border-radius:var(--r1);background:var(--haze);color:var(--ink2)}
.rc-src.g{background:rgba(240,96,90,.12);color:#B4282D}
.rc-mid{display:flex;gap:1.2em;align-items:center}
.rc-sw{width:6em;height:6em;border-radius:var(--r4);background:var(--c);box-shadow:inset 0 0 0 1px var(--ln-l)}
.rc-ring{position:relative;width:5em;height:5em}
.rc-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.rc-ring circle{fill:none;stroke-width:4}
.rc-ring .bg{stroke:var(--haze)}
.rc-ring .fg{stroke:var(--rc,var(--coral));stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.rc-ring b{position:absolute;inset:0;display:grid;place-items:center;font:600 1.15em var(--ui);font-variant-numeric:tabular-nums}
.rc-why{font-size:.95em;line-height:1.45;color:var(--ink2)}
.rc-cands{display:flex;gap:.5em}
.rc-cands span{flex:1;display:flex;align-items:center;gap:.5em;padding:.45em;border-radius:var(--r2);background:var(--paper);font:400 .78em var(--mono);color:var(--ink2);transition:box-shadow .3s}
.rc-cands span i{width:1.5em;height:1.5em;border-radius:var(--r1);background:var(--c);flex:none}
.rc-cands span.on{box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink)}
.rc-foot{display:flex;justify-content:space-between;align-items:center;font:500 .85em var(--ui);color:var(--ink2)}
.rc-foot .acc{display:inline-flex;align-items:center;gap:.5em;height:2.6em;padding:0 1em;border-radius:var(--r2);background:var(--ink);color:#fff}
.rcard .stamp{position:absolute;right:1.4em;top:4.2em;font:600 1em var(--display);letter-spacing:.2em;color:#1D7A55;border:2px solid #1D7A55;border-radius:var(--r2);padding:.3em .6em;transform:rotate(-8deg) scale(1.6);opacity:0}
.pile{align-self:center;display:flex;flex-direction:column;gap:.8em;padding:1.2em;border-radius:var(--r5);background:rgba(255,255,255,.04);border:1px solid var(--ln-d);min-height:0;overflow:hidden}
.pile-h{display:flex;justify-content:space-between;font:500 .8em var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.pile-h b{font-variant-numeric:tabular-nums;color:var(--mint)}
.pile-l{display:flex;flex-direction:column;gap:.45em}
.prow{display:flex;align-items:center;gap:.7em;padding:.5em .6em;border-radius:var(--r2);background:rgba(255,255,255,.06);font:400 .85em var(--mono)}
.prow i{width:1.4em;height:1.4em;border-radius:var(--r1);background:var(--c);flex:none}
.prow em{margin-left:auto;font-style:normal;color:var(--mint)}
@media(max-width:860px){.rv-st{grid-template-columns:1fr;gap:1em;align-content:start}.pile{display:none}.rv-l{grid-template-columns:auto 1fr;align-items:end}.bigcount b{font-size:4.6em}.kbdrow,.accall{display:none}.deck{height:28em}}

/* ---------- 03 tune ---------- */
.tune{--b:#00B865}
.tune .steps li.on{background:var(--b);border-color:var(--b);color:var(--bt,#fff)}
.tu{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2fr);gap:3em;align-items:center}
.tu-ctrl{display:grid;gap:1.4em;align-content:center}
.bfield{display:flex;align-items:center;gap:1em;padding:1em;border-radius:var(--r4);background:#fff;box-shadow:0 1.4em 3em rgba(0,0,0,.1),inset 0 0 0 1px var(--ln-l)}
.bfield .sw{width:3.4em;height:3.4em;border-radius:var(--r3);background:var(--b);box-shadow:0 .5em 1.4em color-mix(in srgb,var(--b) 50%,transparent)}
.bfield>div{display:flex;flex-direction:column;gap:.2em}
.bfield .lab{font-size:.75em;opacity:.6}
.bfield b{font-size:1.5em;font-weight:500;letter-spacing:.02em}
.cbadge{margin-left:auto;font:500 .85em var(--mono);padding:.5em .7em;border-radius:var(--r2);background:var(--paper);white-space:nowrap}
.cbadge em{font-style:normal;color:#1D7A55;font-weight:600}
.cbadge em.fail{color:#C2332E}
.tramp{display:flex;gap:.3em}
.tramp i{flex:1;height:3.4em;border-radius:var(--r2);background:#ddd;transition:transform .4s var(--spring)}
.tramp i.on{outline:2px solid var(--ink);outline-offset:2px;transform:translateY(-.4em)}
.tu-hint{font-size:.85em;color:var(--ink2)}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(7.6em,auto);gap:1em}
.c{padding:1.1em;border-radius:var(--r4);background:#fff;box-shadow:0 1em 2.4em rgba(0,0,0,.07),inset 0 0 0 1px var(--ln-l);display:flex;flex-direction:column;gap:.8em;justify-content:space-between;color:#111311;font-family:var(--ui)}
.c .lab{font-size:.72em;color:var(--ink3)}
.c .row{display:flex;gap:.6em;align-items:center;flex-wrap:wrap}
.cb{display:inline-grid;place-items:center;height:2.7em;padding:0 1.1em;border-radius:var(--r2);font:600 .9em var(--ui)}
.cb.p{background:var(--b);color:var(--bt,#fff)}
.cb.s{background:color-mix(in srgb,var(--b) 14%,#fff);color:color-mix(in srgb,var(--b) 60%,#000)}
.cb.g{color:color-mix(in srgb,var(--b) 70%,#000);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b) 35%,transparent)}
.cb.wide{width:100%}
.c-card{grid-row:span 2}
.c-card .u-row .pl{background:color-mix(in srgb,var(--b) 14%,#fff);color:color-mix(in srgb,var(--b) 65%,#000);padding:.2em .7em;border-radius:99px;font-weight:600;font-size:.9em}
.c-card .ct{font:650 1.2em/1.25 var(--ui)}
.cw{display:flex;align-items:center;gap:.3em;height:2.4em}
.cw i{width:.28em;border-radius:2px;background:var(--b)}
.tg{width:3em;height:1.7em;border-radius:99px;background:#E3E6E3;position:relative}
.tg::after{content:"";position:absolute;left:.2em;top:.2em;width:1.3em;height:1.3em;border-radius:99px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tg.on{background:var(--b)}.tg.on::after{left:auto;right:.2em}
.cbx,.rd{width:1.6em;height:1.6em;border-radius:var(--r1);box-shadow:inset 0 0 0 1.5px #C9CDC9}
.cbx.on{background:var(--b) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/70% no-repeat;box-shadow:none}
.rd{border-radius:99px}.rd.on{box-shadow:inset 0 0 0 .45em var(--b)}
.pb{height:.7em;border-radius:99px;background:color-mix(in srgb,var(--b) 14%,#fff);overflow:hidden}
.pb i{display:block;height:100%;width:68%;border-radius:99px;background:var(--b)}
.c-prog .row{justify-content:space-between;font-size:.8em;color:#5F6661}
.fi{display:flex;align-items:center;height:2.9em;padding:0 1em;border-radius:var(--r2);background:#fff;box-shadow:0 0 0 2px var(--b),0 0 0 5px color-mix(in srgb,var(--b) 22%,transparent);font:400 .95em var(--mono);color:#111311}
.c-stat b{font:600 3em/.9 var(--ui);letter-spacing:-.05em;color:var(--b)}
.c-stat .mono{font-size:.8em;color:#5F6661}
.chp{padding:.45em .9em;border-radius:var(--r2);font:500 .85em var(--ui);background:#F1F3F1;color:#111311}
.chp.on{background:var(--b);color:var(--bt,#fff)}
.asst{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:.8em;max-width:26em;padding:.8em 1.2em .8em .8em;border-radius:var(--r4);background:var(--ink);color:#fff;font:400 1em var(--ui);box-shadow:0 1.4em 3em rgba(0,0,0,.35);z-index:4}
.asst .spark{width:2.2em;height:2.2em;border-radius:var(--r2);display:grid;place-items:center;background:var(--peach);color:var(--ind);flex:none}
.asst .spark svg{width:1.1em;height:1.1em}
/* the dark cut: a clone of the whole pin layer, revealed by a growing circle */
.tune .pin-in.dk{background:#0E0E0E;color:#F2F2F2;clip-path:circle(calc(var(--cr,0) * 1%) at var(--cx,12%) var(--cy,88%));pointer-events:none}
.dk .ghost{-webkit-text-stroke-color:rgba(255,255,255,.08)}
.dk .steps li{border-color:rgba(255,255,255,.18)}
.dk .bfield,.dk .c{background:#1A1A1A;box-shadow:0 1em 2.4em rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.1);color:#F2F2F2}
.dk .cbadge{background:#121212}
.dk .tu-hint,.dk .c .lab,.dk .c-prog .row,.dk .c-stat .mono{color:#A8A8A8}
.dk .tramp i.on{outline-color:#fff}
.dk .cb.s{background:color-mix(in srgb,var(--b) 22%,#1A1A1A);color:color-mix(in srgb,var(--b) 60%,#fff)}
.dk .cb.g{color:color-mix(in srgb,var(--b) 60%,#fff)}
.dk .c-card .u-row{color:#A8A8A8}
.dk .c-card .u-row .pl{background:color-mix(in srgb,var(--b) 22%,#1A1A1A);color:color-mix(in srgb,var(--b) 55%,#fff)}
.dk .tg{background:#2C2C2C}.dk .cbx,.dk .rd{box-shadow:inset 0 0 0 1.5px #3D3D3D}.dk .cbx.on{box-shadow:none}.dk .rd.on{box-shadow:inset 0 0 0 .45em var(--b)}
.dk .pb{background:color-mix(in srgb,var(--b) 18%,#1A1A1A)}
.dk .fi{background:#121212;color:#F2F2F2}
.dk .chp{background:#262626;color:#F2F2F2}.dk .chp.on{background:var(--b);color:var(--bt,#fff)}
.dk .asst{background:var(--peach);color:var(--ind)}.dk .asst .spark{background:var(--ind);color:var(--peach)}
@media(max-width:860px){.tu{grid-template-columns:1fr;gap:1.2em;align-content:start}.bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(6em,auto)}.c-stat,.c-chips,.c-in{display:none}.tu-hint{display:none}.asst{bottom:-1em;max-width:none;right:0}}

/* ---------- 04 serve ---------- */
.sv{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:5em;align-items:center}
.agent{border-radius:var(--r5);background:#0E0E0E;border:1px solid var(--ln-d);padding:1em;box-shadow:0 2.4em 6em rgba(0,0,0,.45);display:grid;gap:1em}
.tabs{position:relative;display:flex;gap:.2em;padding:.3em;border-radius:var(--r3);background:rgba(255,255,255,.06);width:max-content}
.tabs span{position:relative;z-index:1;padding:.6em 1em;font:500 .9em var(--ui);opacity:.6;transition:opacity .3s}
.tabs span.on{opacity:1}
.tab-ind{position:absolute;z-index:0;left:.3em;top:.3em;bottom:.3em;width:8.4em;border-radius:var(--r2);background:rgba(255,255,255,.14)}
.lines{display:flex;flex-direction:column;gap:.35em;padding:.4em .6em 1em;font:400 1em/1.6 var(--mono);color:#EAEAEA;min-height:20em}
.ln.u{color:#fff}.ln .pp{color:var(--peach);margin-right:.6em}
.ln.tool{color:#9AA2FF;display:flex;align-items:center;gap:.6em;margin-top:.5em}
.ln.tool i{width:.6em;height:.6em;border-radius:99px;background:var(--mint);box-shadow:0 0 .6em var(--mint)}
.ln .dim,.ln.res{color:#8A8A8A}
.ln.res{padding-left:1.2em}
.ln.wr{color:var(--peach);margin-top:.5em}
.ln.ok{color:var(--mint);padding-left:1.2em}
.sv-build{display:grid;gap:1.6em;justify-items:center}
.pcw{position:relative;width:20em;height:24em}
.pc-wire{position:absolute;inset:0;border-radius:4px;border:1.5px dashed rgba(255,255,255,.35);padding:1.6em;display:flex;flex-direction:column;gap:1em}
.pc-wire i{height:1.2em;border-radius:3px;background:rgba(255,255,255,.12)}
.pc-wire i:nth-child(2){height:3em;width:60%}.pc-wire i:last-child{margin-top:auto;height:3em}
.pc{position:absolute;inset:0;padding:1.6em;background:#fff;color:#111311;display:flex;flex-direction:column;gap:1.2em;box-shadow:0 2em 5em rgba(0,0,0,.4);font-family:system-ui,-apple-system,sans-serif;overflow:hidden}
.pc-top{display:flex;justify-content:space-between;align-items:center}
.pc-plan{font:650 1.3em/1 system-ui,sans-serif}
.pc-tag{background:#E6F8EF;color:#0B5E3B;padding:.3em .8em;border-radius:99px;font-weight:600;font-size:.8em}
.pc-price{display:flex;align-items:baseline;gap:.4em}
.pc-price b{font:700 3.4em/1 system-ui,sans-serif;letter-spacing:-.04em}
.pc-price span{color:#5F6661;font-size:.95em}
.pc-f{list-style:none;padding:0;display:grid;gap:.7em;font-size:.95em}
.pc-f li{display:flex;gap:.6em;align-items:center}
.pc-f li::before{content:"";width:1.2em;height:1.2em;border-radius:99px;flex:none;background:#00B865 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4'%3E%3Cpath d='M4 8.5l2.5 2.5 5.5-6'/%3E%3C/svg%3E") center/70% no-repeat}
.pc-btn{margin-top:auto;display:grid;place-items:center;height:3.2em;border-radius:10px;background:#00B865;color:#fff;font:600 1em system-ui,sans-serif}
.spec{position:absolute;font:500 .78em var(--mono);padding:.4em .7em;border-radius:var(--r1);background:var(--peach);color:var(--ind);white-space:nowrap}
.spec.s1{right:-4em;top:-1em}.spec.s2{left:-6em;top:3em}.spec.s3{right:-5.6em;bottom:3.2em}.spec.s4{left:-4.6em;bottom:6em}
.same{display:flex;align-items:center;gap:.8em;padding:.8em 1.2em;border-radius:var(--r3);background:rgba(124,224,176,.12);border:1px solid rgba(124,224,176,.35);font:500 .95em var(--ui);color:var(--mint)}
.same i{font-style:normal;width:1.6em;height:1.6em;border-radius:99px;display:grid;place-items:center;background:var(--mint);color:var(--ind);font-size:.85em}
.tchip{position:absolute;left:0;top:0;font:500 .82em var(--mono);padding:.45em .8em;border-radius:var(--r2);background:var(--ult);color:#fff;white-space:nowrap;box-shadow:0 .6em 1.6em rgba(47,59,224,.5);z-index:6;pointer-events:none}
@media(max-width:860px){.sv{grid-template-columns:1fr;gap:1.4em;align-content:start}.lines{min-height:0;font-size:.95em}.lines .ln.res{display:none}.pcw{width:17em;height:20em}.spec{display:none}.same{font-size:.85em}}

/* ---------- 05 check ---------- */
.ck{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:3.4em;align-items:center}
.code{border-radius:var(--r5);background:#fff;box-shadow:0 2em 5em rgba(0,0,0,.12),inset 0 0 0 1px var(--ln-l);overflow:hidden}
.code-h{display:flex;justify-content:space-between;align-items:center;padding:1em 1.4em;border-bottom:1px solid var(--ln-l);font:500 .9em var(--mono)}
.cstat{display:flex;align-items:center;gap:.6em;padding:.4em .7em;border-radius:var(--r2);background:var(--paper);color:var(--ink2)}
.cstat i{width:.6em;height:.6em;border-radius:99px;background:var(--ink3)}
.cstat[data-s=run] i{background:var(--amber);animation:blink .6s steps(2) infinite}
.cstat[data-s=bad]{background:rgba(240,96,90,.12);color:#B4282D}.cstat[data-s=bad] i{background:var(--coral)}
.cstat[data-s=ok]{background:rgba(29,122,85,.1);color:#0B5E3B}.cstat[data-s=ok] i{background:#1D7A55}
.code-b{position:relative;padding:1em 0;font:400 1em/1.85 var(--mono);color:var(--ink)}
.cl{position:relative;display:flex;gap:1.4em;padding:0 1.4em;white-space:pre}
.cl em{font-style:normal;color:var(--ink3);width:1.6em;text-align:right;flex:none}
.cl k{color:#7C3AED}.cl f{color:var(--ult)}
.cl s{border-radius:4px;padding:0 .15em;transition:background .3s}
.cl::before{content:"";position:absolute;inset:0;background:var(--hl,transparent);opacity:var(--ho,0);pointer-events:none}
.cl.bad{--hl:rgba(240,96,90,.12)}
.cl.bad[data-s=fixed]{--hl:rgba(29,122,85,.12)}
.cl.bad s{text-decoration:underline wavy rgba(240,96,90,var(--uo,0));text-underline-offset:.3em}
.cl.bad[data-s=fixed] s{text-decoration-color:transparent;color:#0B5E3B;font-weight:500}
.cl .cpin{position:absolute;right:1.2em;top:50%;width:1.7em;height:1.7em;margin-top:-.85em;border-radius:99px;display:grid;place-items:center;background:var(--coral);color:#fff;font:600 .78em var(--mono);font-style:normal;transform:scale(var(--ps,0))}
.cl.bad[data-s=fixed] .cpin{background:#1D7A55}
.scan{position:absolute;left:0;right:0;top:0;height:2.6em;margin-top:-1.3em;background:linear-gradient(180deg,transparent,rgba(47,59,224,.14) 45%,rgba(47,59,224,.6) 50%,rgba(47,59,224,.14) 55%,transparent);pointer-events:none}
.ck-r{display:grid;gap:1.1em;align-content:center}
.ck-count{display:flex;align-items:baseline;gap:.6em}
.ck-count b{font:600 6em/.85 var(--ui);letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:var(--coral)}
.ck-count b.zero{color:#1D7A55}
.ck-count span{font:500 1em var(--mono);color:var(--ink2)}
.finds{display:grid;gap:.5em}
.fd{display:flex;gap:.9em;align-items:center;padding:.75em .9em;border-radius:var(--r3);background:#fff;box-shadow:0 .6em 1.6em rgba(0,0,0,.07),inset 0 0 0 1px var(--ln-l)}
.fd>i{font-style:normal;width:1.8em;height:1.8em;border-radius:99px;display:grid;place-items:center;background:var(--coral);color:#fff;font:600 .8em var(--mono);flex:none;transition:background .3s}
.fd div{display:flex;flex-direction:column;line-height:1.35}
.fd b{font:600 .95em var(--ui)}.fd span{font-size:.78em;color:var(--ink2)}
.fd[data-s=ok]>i{background:#1D7A55}
.fd[data-s=ok] b{text-decoration:line-through;text-decoration-color:rgba(29,122,85,.6)}
.sendfix{justify-self:start;display:inline-flex;align-items:center;gap:.7em;height:3.2em;padding:0 1.3em;border-radius:var(--r3);background:var(--ink);color:#fff;font:600 .95em var(--ui)}
.sendfix svg{width:1em;height:1em}
.ck-prev{display:flex;justify-content:flex-start}
.ckp{position:relative;width:15em;padding:1em;display:flex;flex-direction:column;gap:.7em;background:#fff;color:#111311;font-family:system-ui,sans-serif;font-size:.9em;box-shadow:0 .4em 1.4em rgba(0,0,0,.1),inset 0 0 0 1px var(--ln-l)}
.ckp .u-wave i{background:var(--wc,#00A35A)}
.ckb{display:grid;place-items:center;height:2.6em;color:#fff;font:600 .95em system-ui}
.ckp .ring{position:absolute;inset:-6px;border-radius:inherit;box-shadow:0 0 0 2px #1D7A55;opacity:0}
@media(max-width:860px){.ck{grid-template-columns:1fr;gap:1.2em;align-content:start}.code-b{font-size:.9em}.cl{padding:0 .8em;gap:.8em}.ck-prev,.sendfix{display:none}.finds{grid-template-columns:1fr 1fr}.fd span{display:none}.ck-count b{font-size:4em}}

/* ---------- 06 everywhere ---------- */
.ev{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr);gap:4.4em;align-items:center}
.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.wires path{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1}
.wires path.hot{stroke:var(--b);stroke-width:2;filter:drop-shadow(0 0 6px var(--b))}
.ev-col{position:relative;z-index:1;display:grid;gap:1.1em}
.node{--b:#00B865;display:grid;gap:.6em;padding:1em;border-radius:var(--r4);background:#161616;border:1px solid var(--ln-d);transition:border-color .4s,box-shadow .4s}
.node.lit{border-color:color-mix(in srgb,var(--b) 70%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--b) 20%,transparent),0 1.4em 3em rgba(0,0,0,.4)}
.nh{display:flex;align-items:center;gap:.6em;font:600 1em var(--ui)}
.nh em{margin-left:auto;font:400 .78em var(--mono);font-style:normal;opacity:.55}
.ni{width:.8em;height:.8em;border-radius:99px;background:var(--b);box-shadow:0 0 .8em var(--b)}
.node code{font:400 .82em/1.4 var(--mono);color:#C8C8C8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.node code.dim{opacity:.55}
.node code span{color:#fff;background:color-mix(in srgb,var(--b) 35%,transparent);border-radius:3px;padding:0 .15em}
.dev{background:#fff;overflow:hidden;display:grid;place-items:center;padding:.5em}
.dev.lap{height:4.6em;border-radius:var(--r2)}
.dev.ph{height:4.6em;width:9em;justify-self:start;border-radius:var(--r3);box-shadow:inset 0 0 0 .3em #1A1A1A}
.mini{width:100%;display:flex;align-items:center;gap:.5em}
.mini i{width:1.6em;height:1.6em;border-radius:calc(var(--rr,10) * 1px);background:var(--b);flex:none}
.mini b{flex:1;height:.5em;border-radius:3px;background:#E3E6E3}
.mini span{width:3.4em;height:1.8em;border-radius:calc(var(--rr,10) * 1px);background:var(--b)}
.hub{position:relative;z-index:2;width:22em;padding:1.4em;border-radius:var(--r5);background:#fff;color:var(--ink);box-shadow:0 2.4em 6em rgba(0,0,0,.5),0 0 0 6px rgba(255,255,255,.06);display:grid;gap:1em}
.hub-h{display:flex;align-items:center;gap:.7em;font:600 1.2em var(--ui)}
.hub-h .sw{width:1.6em;height:1.6em;border-radius:var(--r1);background:var(--b)}
.ver{margin-left:auto;font-size:.75em;padding:.35em .6em;border-radius:var(--r2);background:var(--haze);overflow:hidden;display:inline-block}
.diff{list-style:none;padding:0;display:grid;gap:.4em}
.diff li{display:grid;grid-template-columns:1fr auto auto;gap:.6em;align-items:center;padding:.55em .7em;border-radius:var(--r2);background:var(--paper);font-size:.85em}
.diff li .mono{font-size:.95em}
.diff s{font:400 .9em var(--mono);color:var(--ink3);text-decoration:line-through}
.diff b{font:500 .9em var(--mono);color:#0B5E3B}
.kind{display:flex;gap:.2em;padding:.25em;border-radius:var(--r2);background:var(--paper);font:500 .8em var(--ui)}
.kind span{flex:1;text-align:center;padding:.5em;border-radius:var(--r1);color:var(--ink2)}
.kind span.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.pub{display:grid;place-items:center;height:3.2em;border-radius:var(--r3);background:var(--ult);color:#fff;font:600 1em var(--ui)}
.hub-f{font-size:.78em;color:var(--ink2);text-align:center}
.pulse{position:absolute;left:0;top:0;width:.9em;height:.9em;margin:-.45em 0 0 -.45em;border-radius:99px;background:#fff;box-shadow:0 0 0 .3em rgba(124,132,255,.35),0 0 1.4em .4em #7C84FF;z-index:3;pointer-events:none;opacity:0}
@media(max-width:1000px){.ev{gap:2em}.node .dev{display:none}}
@media(max-width:860px){
  .ev{grid-template-columns:1fr 1fr;gap:.8em;align-content:start}
  .hub{grid-column:1/-1;order:-1;width:100%;padding:1em;gap:.6em}.kind,.hub-f{display:none}
  .ev-col{gap:.8em}.node{padding:.7em}.node code+code{display:none}
}

/* ---------- under the hood ---------- */
.hood{padding:clamp(80px,11vw,150px) 0 calc(var(--r6) + clamp(60px,8vw,110px));background:var(--paper);color:var(--ink)}
.hood .head,.gal-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(28px,4vw,56px)}
@media(max-width:860px){.hood .head,.gal-head{grid-template-columns:1fr}}
.bentoh{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:860px){.bentoh{grid-template-columns:1fr}}
.hcell{padding:clamp(20px,2.4vw,34px);display:flex;flex-direction:column;gap:14px;min-height:500px;position:relative;border-radius:var(--r5);background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04),0 24px 60px rgba(0,0,0,.06);overflow:hidden}
.spot::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--px,50%) var(--py,50%),rgba(47,59,224,.09),transparent 60%);opacity:0;transition:opacity .4s}
.spot:hover::before{opacity:1}
.hcell .n{font:500 11px var(--mono);letter-spacing:.14em;color:var(--ink3);display:flex;justify-content:space-between}
.hcell h3{font:600 clamp(22px,2.2vw,30px)/1.05 var(--ui);letter-spacing:-.03em;text-wrap:balance}
.hcell p{font-size:15.5px;color:var(--ink2);max-width:46ch}
.viz{margin-top:auto;border-radius:var(--r4);background:var(--paper);position:relative;overflow:hidden;min-height:220px}
.bars{padding:18px;display:grid;gap:14px}
.bar{display:grid;gap:6px}
.bar .t{display:flex;justify-content:space-between;font:500 11.5px var(--mono);letter-spacing:.04em;color:var(--ink2)}
.bar .t b{color:var(--ink);font-weight:500}
.bar .tr{height:24px;background:var(--haze);position:relative;overflow:hidden;border-radius:var(--r1)}
.bar .tr i{position:absolute;inset:0 auto 0 0;background:var(--ink);width:0;border-radius:var(--r1)}
.bar.us .tr i{background:linear-gradient(90deg,var(--ult),#7C84FF)}
.viz canvas.cl{display:block;width:100%;height:240px}
.runs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:14px}
.runs .tile{aspect-ratio:1.5;background:#fff;border-radius:var(--r2);display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--ln-l)}
.runs .tile span{display:block;padding:5px 9px;font:600 9px system-ui;color:#fff;background:#00B865;border-radius:6px}
.runs .foot{grid-column:1/-1;display:flex;justify-content:space-between;font:500 11.5px var(--mono);color:var(--ink2);padding-top:4px}
.runs .foot b{color:var(--ink);font-weight:500}
.slots{padding:16px;display:grid;gap:8px}
.slots .row{display:grid;grid-template-columns:24px minmax(0,1fr) 110px 40px;gap:10px;align-items:center;font:400 12px var(--mono);color:var(--ink)}
.slots .sw{width:24px;height:24px;border-radius:var(--r1);box-shadow:inset 0 0 0 1px var(--ln-l)}
.slots .m{height:6px;border-radius:99px;background:var(--haze);overflow:hidden;position:relative}.slots .m i{position:absolute;inset:0 auto 0 0;background:var(--ult);border-radius:99px;width:0}
.slots .m.low i{background:var(--coral)}.slots .m.mid i{background:var(--amber)}
.slots .pc{text-align:right;color:var(--ink2);font-variant-numeric:tabular-nums}
.lockrow{display:flex;gap:6px;padding:0 16px 16px;flex-wrap:wrap}
.chip{font:500 11px/1 var(--mono);letter-spacing:.06em;padding:7px 10px;border-radius:var(--r1);color:var(--ink2);background:#fff;box-shadow:inset 0 0 0 1px var(--ln-l2)}

/* ---------- gallery (horizontal) ---------- */
.gal{background:var(--ind);height:calc(100svh + var(--len,220) * 1vh)}
.gal .pin{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-content:center;padding:clamp(80px,11vh,110px) 0 clamp(20px,4vh,44px)}
.gal-head{width:100%;margin-bottom:clamp(18px,3vh,40px)}
.gtrack{justify-self:start;display:flex;gap:18px;padding-left:max(var(--gut),calc((100vw - 1360px) / 2 + var(--gut)));width:max-content;will-change:transform;perspective:1400px;align-items:center}
.gcard{flex:none;width:clamp(240px,24vw,340px);border-radius:var(--r5);overflow:hidden;background:var(--ind2);border:1px solid var(--ln-d);display:grid;transform-style:preserve-3d;will-change:transform}
.gcard .th{position:relative;height:clamp(220px,38vh,380px);overflow:hidden;background:#111111}
.gcard .th canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.gcard .th .sys{position:absolute;left:14px;bottom:14px;right:14px;display:flex;gap:6px}
.gcard .th .sys i{flex:1;height:26px;border-radius:var(--r1);background:var(--c);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.gcard .m{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:16px 18px 4px}
.gcard b{font:600 17px var(--ui)}.gcard .m span{font:400 12px var(--mono);opacity:.65}
.gcard .fk{display:flex;justify-content:space-between;align-items:center;padding:6px 18px 18px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.gcard .fk em{font-style:normal;padding:7px 11px;border-radius:var(--r2);background:#fff;color:var(--ind);letter-spacing:.04em}

/* ---------- built for ---------- */
.for{padding:clamp(80px,11vw,150px) 0 calc(var(--r6) + clamp(60px,8vw,110px));background:var(--paper);color:var(--ink)}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(24px,3vw,40px)}
@media(max-width:860px){.row3{grid-template-columns:1fr}}
.for .p{position:relative;overflow:hidden;padding:clamp(20px,2.2vw,32px);display:grid;gap:12px;align-content:start;border-radius:var(--r5);background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04),0 24px 60px rgba(0,0,0,.06);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.for .p:hover{transform:translateY(-6px);box-shadow:0 34px 70px rgba(0,0,0,.12)}
.for .p .lab{color:var(--ult)}
.for .p h4{font:600 22px/1.12 var(--ui);letter-spacing:-.025em}
.for .p p{font-size:15.5px;color:var(--ink2)}
.for .p .q{font:400 13px/1.5 var(--mono);color:var(--ink);padding:12px 14px;border-radius:var(--r3);background:var(--paper);margin-top:6px}

/* ---------- faq ---------- */
.faq{padding:clamp(80px,11vw,150px) 0 calc(var(--r6) + clamp(60px,8vw,110px));background:var(--haze);color:var(--ink)}
.faq .cols{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,64px)}
@media(max-width:860px){.faq .cols{grid-template-columns:1fr}}
.qs{display:grid;gap:10px}
details{border-radius:var(--r4);background:#fff;padding:0 22px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 12px 30px rgba(0,0,0,.05);transition:box-shadow .4s}
details[open]{box-shadow:0 20px 50px rgba(0,0,0,.1)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font:600 17.5px/1.3 var(--ui);letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:30px;height:30px;border-radius:var(--r2);background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111111' stroke-width='1.6'%3E%3Cpath d='M8 3.5v9M3.5 8h9'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .5s var(--spring),background-color .3s}
details[open] summary::after{transform:rotate(135deg);background-color:var(--peach)}
details .a{overflow:hidden}
details p{padding-bottom:20px;color:var(--ink2);max-width:60ch;font-size:16px}

/* ---------- final ---------- */
.final{padding:10px;background:var(--night)}
.final .sheet{min-height:92svh;display:grid;align-content:center}
.final .shade{position:absolute;inset:0;z-index:1;background:radial-gradient(100% 80% at 20% 60%,rgba(0,0,0,.85),rgba(0,0,0,.3) 60%,rgba(0,0,0,.1))}
.final .in{position:relative;z-index:2;max-width:1360px;width:100%;margin:0 auto;display:grid;gap:26px;padding:clamp(80px,10vw,140px) clamp(20px,4vw,64px)}
.final h2{font:600 clamp(36px,5.4vw,84px)/1.02 var(--ui);letter-spacing:-.045em;max-width:15ch}
.final .split .w{animation:none;opacity:0;transform:translateY(.55em) rotate(3deg);filter:blur(12px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.final.in-view .split .w{opacity:1;transform:none;filter:none}
.final .spaced{font:500 clamp(12px,1.2vw,15px)/1 var(--display)}
.final .lede{max-width:46ch}
.final .wl{max-width:580px}
.lv-trackin{letter-spacing:.5em;margin-right:-.5em;white-space:nowrap;animation:lvTrackLoop 4.2s cubic-bezier(.16,1,.3,1) infinite}
@keyframes lvTrack{from{letter-spacing:1.4em;opacity:.15}to{letter-spacing:.3em;opacity:1}}
@keyframes lvTrackLoop{0%{letter-spacing:1.4em;opacity:.15}28%,100%{letter-spacing:.5em;opacity:1}}
footer{background:var(--night);padding:30px var(--gut) 100px}
footer .in{max-width:1360px;margin:0 auto;display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between;align-items:center;font:400 12.5px var(--mono);opacity:.7}
footer .brand svg{width:28px}

/* ---------- dock ---------- */
.dock{position:fixed;left:50%;bottom:16px;z-index:70;transform:translate(-50%,160%);transition:transform .7s var(--spring);width:min(560px,calc(100vw - 24px));padding:7px;display:flex;gap:6px;align-items:center;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);border:1px solid rgba(0,0,0,.12);box-shadow:0 18px 50px rgba(0,0,0,.3);border-radius:var(--r4);color:var(--ink)}
.dock.show{transform:translate(-50%,0)}
.dock .wl-wrap{flex:1;min-width:0}
.dock .wl{max-width:none;flex-wrap:nowrap;gap:6px;padding:0;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.dock .wl input[type=email]{flex:1 1 auto;min-width:0;height:42px;border-radius:var(--r3);background:rgba(0,0,0,.06);color:var(--ink);padding:0 14px}
.dock .wl input[type=email]::placeholder{color:var(--ink3)}
.dock .btn{height:42px;border-radius:var(--r3);background:var(--ult);color:#fff;padding:0 16px}
.dock .wl-msg{display:none}
.dock .wl-done{color:var(--ink);padding:2px 12px}
.dock .wl-done b{font-size:13px}
.dock .wl-done span{display:none}
.dock .x{width:32px;height:32px;border:0;border-radius:var(--r2);background:transparent;cursor:pointer;color:var(--ink2);flex:none}
.dock .x:hover{background:rgba(0,0,0,.08)}
@media(max-width:520px){.dock .btn{padding:0 12px;font-size:13px}.dock .btn .lg{display:none}}

/* reveal */
.rv{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.rv.in{opacity:1;transform:none;filter:none}
canvas[data-fx]{background:linear-gradient(115deg,#111111 0%,#2B35D6 38%,#E8606A 72%,#F28E45 100%)}

/* reduced motion: every demo in its final state, nothing pinned */
@media(prefers-reduced-motion:reduce){
  .grain,.orb{animation:none}
  .split .w,.hero .lede,.hero .wl-wrap,.tk,.tk-c{animation:none!important}
  .final .split .w{opacity:1;transform:none;filter:none}
  .cy-in{animation:none}
  .rv,.life li{opacity:1!important;transform:none!important;filter:none!important}
  .demo,.gal{height:auto!important}.pin{position:relative;height:auto;min-height:100svh}.pin-in{position:relative}
  .gal .gtrack{flex-wrap:wrap;width:auto;padding-inline:var(--gut)}
}

/* review payoff */
.deck-done{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:.6em;text-align:center;pointer-events:none}
.deck-done i{font-style:normal;width:4.4em;height:4.4em;border-radius:var(--r4);display:grid;place-items:center;font-size:1.4em;background:var(--mint);color:var(--ind);box-shadow:0 0 0 .5em rgba(124,224,176,.15),0 0 4em rgba(124,224,176,.45)}
.deck-done b{font:600 3.2em/1 var(--ui);letter-spacing:-.05em;margin-top:.3em}
.deck-done span{font:500 .95em var(--mono);opacity:.65}

/* ---------- hero: the app itself, light mode, editing the brand live ---------- */
.mockw{position:absolute;z-index:1;will-change:transform}
.mock-i{width:100%;height:100%;transform:perspective(1800px) rotateY(calc(-9deg + var(--mx,0) * 5deg)) rotateX(calc(5deg - var(--my,0) * 4deg));transform-origin:30% 50%;transition:transform 1s var(--ease);animation:tkIn 1.6s var(--ease) .35s both}
.mock{--b:#00B865;--bt:#fff;position:absolute;left:0;top:0;width:1040px;height:660px;transform-origin:0 0;transform:scale(var(--ms,.6));border-radius:34px;background:#F4F4F4;overflow:hidden;color:#111111;font:13px/1.45 var(--ui);box-shadow:0 60px 140px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.35),0 0 0 9px rgba(255,255,255,.08)}
.m-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.17) 1px,transparent 1.3px);background-size:22px 22px}
.m-side{position:absolute;left:12px;top:12px;bottom:12px;width:210px;border-radius:26px;background:rgba(255,255,255,.84);border:1px solid rgba(0,0,0,.1);box-shadow:0 6px 20px rgba(0,0,0,.08);padding:10px;display:flex;flex-direction:column;gap:1px}
.m-brand{display:flex;gap:9px;align-items:center;padding:6px 8px 10px}.m-brand svg{width:28px;height:14px}.m-brand span{font:500 11px var(--display);letter-spacing:.14em}
.m-search{height:30px;border-radius:11px;background:rgba(0,0,0,.06);display:flex;align-items:center;justify-content:space-between;padding:0 9px;color:var(--ink2);margin-bottom:6px}.m-search em{font:400 11px var(--mono);font-style:normal}
.m-row{display:flex;align-items:center;gap:8px;height:28px;padding:0 9px;border-radius:10px;white-space:nowrap}
.m-row em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--ink2)}.m-row em.ok{color:#1D7A55}
.m-row.on{background:rgba(0,0,0,.06);font-weight:600}.m-row.sub{padding-left:28px;color:var(--ink2);font-weight:400}.m-row.sub.on{color:var(--ink);font-weight:600}
.m-sec{padding:12px 9px 4px;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2)}
.mock .sw{width:11px;height:11px;border-radius:4px;flex:none}.mock .sw.b{background:var(--b)}
.m-title{position:absolute;top:12px;left:calc(50% + 105px);transform:translateX(-50%);height:30px;border-radius:15px;padding:0 14px;background:rgba(255,255,255,.88);border:1px solid rgba(0,0,0,.1);display:flex;align-items:center;gap:7px;font-weight:600}.m-title span{color:var(--ink2);font-weight:500}
.m-frame{position:absolute;border-radius:26px;background:rgba(0,0,0,.035);border:1px solid rgba(0,0,0,.1);padding:34px 12px 12px;display:flex;flex-direction:column;gap:10px}
.m-kick{position:absolute;top:11px;left:14px;font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2)}
.f-col{left:240px;top:58px;width:262px}.f-type{left:240px;top:330px;width:262px}.f-comp{left:516px;top:58px;width:250px}
.m-card{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:18px;box-shadow:0 3px 10px rgba(0,0,0,.08);padding:10px;display:flex;flex-direction:column;gap:8px}
.m-card.sel{outline:1.5px solid var(--ink);outline-offset:3px}
.m-lab{font-size:11px;color:var(--ink2);display:flex;justify-content:space-between;gap:8px}.m-lab em{font:400 10px var(--mono);font-style:normal}
.m-ramp{display:flex;gap:3px}.m-ramp i{flex:1;height:30px;border-radius:8px;transition:transform .4s var(--spring)}.m-ramp i.on{outline:2px solid var(--ink);outline-offset:2px;transform:translateY(-2px)}
.m-ramp.sm i{height:24px}
.m-st{display:flex;gap:6px}.m-st i{width:28px;height:28px;border-radius:10px}
.m-aa{font:600 50px/1 var(--ui);letter-spacing:-.045em}
.m-btns{display:flex;gap:6px}.mb{flex:1;text-align:center;padding:7px 8px;border-radius:10px;font-weight:600;font-size:11.5px}
.mb.p{background:var(--b);color:var(--bt)}.mb.s{background:color-mix(in srgb,var(--b) 14%,#fff);color:color-mix(in srgb,var(--b) 62%,#000)}
.m-pill{background:color-mix(in srgb,var(--b) 14%,#fff);color:color-mix(in srgb,var(--b) 62%,#000);padding:1px 7px;border-radius:99px;font-weight:600;font-size:10px}
.mock .u-row{font-size:10.5px}
.m-ct{font-weight:650;font-size:13.5px;font-family:system-ui,-apple-system,sans-serif}
.m-wave{display:flex;gap:3px;align-items:center;height:20px}.m-wave i{width:3px;border-radius:2px;background:var(--b)}
.mock .mb,.mock .m-pill,.mock .m-wave i,.mock .sw,.m-hex{transition:background-color .5s var(--ease),color .5s var(--ease),border-color .5s,box-shadow .5s}
.m-insp{position:absolute;right:12px;top:56px;width:252px;border-radius:26px;background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.1);box-shadow:0 18px 50px rgba(0,0,0,.16);padding:14px;display:flex;flex-direction:column;gap:11px}
.m-ih{display:flex;gap:10px;align-items:center}.m-ih .sw{width:32px;height:32px;border-radius:11px}.m-ih div{display:flex;flex-direction:column;min-width:0}.m-ih b{font:500 12px var(--mono)}.m-ih span{font-size:11px;color:var(--ink2)}
.m-seg{display:flex;padding:3px;border-radius:12px;background:#EBEBEB;gap:2px}.m-seg span{flex:1;text-align:center;padding:5px;border-radius:9px;font-size:11.5px;color:var(--ink2);font-weight:500}.m-seg .on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.m-hex{display:flex;align-items:center;gap:8px;height:36px;border-radius:12px;border:1.5px solid var(--b);padding:0 10px;font:500 13px var(--mono);box-shadow:0 0 0 4px color-mix(in srgb,var(--b) 18%,transparent)}.m-hex .sw{width:16px;height:16px;border-radius:5px}
.m-cr{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:#F4F4F4;font-size:11.5px}.m-cr b{margin-left:auto;font:500 12px var(--mono)}.m-cr em{font-style:normal;font-weight:600;color:#1D7A55;font-size:11px}.m-cr em.lo{color:#C2332E}
.m-note{font-size:11.5px;line-height:1.45;padding:9px 10px;border-radius:12px;background:rgba(246,211,166,.4)}.m-note span{display:block;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-bottom:2px}
.m-tools{position:absolute;bottom:14px;left:calc(50% - 25px);transform:translateX(-50%);display:flex;gap:2px;padding:4px;border-radius:20px;background:rgba(255,255,255,.9);border:1px solid rgba(0,0,0,.1);box-shadow:0 6px 20px rgba(0,0,0,.09)}.m-tools span{padding:7px 11px;border-radius:15px;font-size:11.5px;font-weight:500}.m-tools .on{background:var(--ink);color:#fff}
.m-cur{position:absolute;left:0;top:0;width:22px;height:22px;z-index:9;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));transition:transform .9s cubic-bezier(.65,0,.35,1)}
.m-ping{position:absolute;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:99px;border:2px solid var(--ult);z-index:8;opacity:0;pointer-events:none}
.m-ping.go{animation:ping .7s var(--ease)}
@keyframes ping{from{opacity:.9;scale:.3}to{opacity:0;scale:1.7}}

/* waitlist extras: consent tickboxes (never pre-ticked) and the Turnstile slot */
.topics{display:grid;gap:8px;margin-top:14px;font:400 13.5px/1.4 var(--ui);opacity:.8}
.topics label{display:flex;gap:10px;align-items:center;cursor:pointer}
.topics input{width:17px;height:17px;accent-color:#fff;flex:none}
.wl-wrap.done .topics{display:none}
.wl .ts{flex-basis:100%}.wl .ts:empty{display:none}