/* Layout: a calm white room. Big Manrope moments, system type for reading, one live product window as the hero, stones photography as quiet bands. */
:root{
  --bg:#FFFFFF; --soft:#F5F6F8; --card:#FFFFFF; --line:#E6E8EB; --line2:#D5D9DE;
  --ink:#141C25; --ink2:#56606C; --ink3:#646D78;
  --acc:#3F6580; --acc2:#335468; --on-acc:#FFFFFF; --acc-soft:#E8F0F5;
  --stone:#89A9BC; --glass:#BFD7D1; --clay:#E0A28C; --lilac:#C9C2DE; --sand:#E6D3A8; --moss:#B9C9A6;
  --ok:#2B7259; --ok-s:#E5F2EC; --wait:#8A5A12; --wait-s:#FBF0DD; --stop:#B3412A;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 10px 30px rgba(16,24,40,.07);
  --lift:0 2px 6px rgba(16,24,40,.06),0 30px 70px rgba(16,24,40,.16);
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --display:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0F1113;--soft:#15181B;--card:#16191C;--line:#262B30;--line2:#353B42;--ink:#EEF1F4;--ink2:#A9B1BA;--ink3:#8E97A1;--acc:#9FC0D6;--acc2:#BFD5E4;--on-acc:#0F1113;--acc-soft:#1A2731;--ok:#7CC7A8;--ok-s:#17291F;--wait:#E5B867;--wait-s:#2C2416;--stop:#F0927C;--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.3);--lift:0 2px 6px rgba(0,0,0,.35),0 30px 70px rgba(0,0,0,.5);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0F1113;--soft:#15181B;--card:#16191C;--line:#262B30;--line2:#353B42;--ink:#EEF1F4;--ink2:#A9B1BA;--ink3:#8E97A1;--acc:#9FC0D6;--acc2:#BFD5E4;--on-acc:#0F1113;--acc-soft:#1A2731;--ok:#7CC7A8;--ok-s:#17291F;--wait:#E5B867;--wait-s:#2C2416;--stop:#F0927C;--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.3);--lift:0 2px 6px rgba(0,0,0,.35),0 30px 70px rgba(0,0,0,.5);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--ui);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--acc)}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.narrow{max-width:760px}
h1,h2,h3{font-family:var(--display);letter-spacing:-.025em;margin:0;text-wrap:balance}
h1{font-size:clamp(50px,9vw,124px);line-height:.98;font-weight:800}
h2{font-size:clamp(32px,4.6vw,54px);line-height:1.05;font-weight:800}
h3{font-size:21px;line-height:1.25;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.lede{font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--ink2);max-width:58ch}
.eyebrow{font:700 12px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.muted{color:var(--ink2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;border:1px solid transparent;font:600 16px var(--ui);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,transform .15s}
.btn.p{background:var(--ink);color:var(--bg)}
.btn.p:hover{transform:translateY(-1px)}
.btn.s{background:var(--card);border-color:var(--line2);color:var(--ink)}
.btn.s:hover{background:var(--soft)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.st{display:inline-grid;place-items:center;flex:none;color:#1F2A36;font:800 12px/1 var(--display);box-shadow:inset 0 -2px 0 rgba(31,42,54,.08),inset 0 2px 3px rgba(255,255,255,.5)}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font:600 12px var(--ui);white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.c-ok{background:var(--ok-s);color:var(--ok)}.c-wait{background:var(--wait-s);color:var(--wait)}.c-info{background:var(--acc-soft);color:var(--acc)}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:66px}
.nav .logo{display:flex;align-items:center}
.nav .logo img{height:26px;width:auto}
.nav .links{display:flex;gap:24px;font-size:15px}
.nav .links a{color:var(--ink2);text-decoration:none}
.nav .links a:hover{color:var(--ink)}
.nav .sp{flex:1}
.nav .btn{height:38px;padding:0 18px;font-size:14.5px}
@media (max-width:860px){.nav .links{display:none}}

/* hero */
.hero{padding-block:72px 0;text-align:center}
.hero .tag{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);font-size:13.5px;color:var(--ink2);margin-bottom:28px}
.hero .tag i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.hero h1 em{font-style:normal;color:var(--acc)}
.hero .lede{margin:24px auto 0}
.hero .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.hero .fine{margin-top:16px;font-size:14px;color:var(--ink3)}
.stage{position:relative;margin-top:64px;padding-bottom:64px}
.stage .band{position:absolute;left:0;right:0;top:120px;bottom:0;overflow:hidden;border-radius:28px}
.stage .band img{width:100%;height:100%;object-fit:cover;object-position:center 60%;opacity:.9}
.stage .band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0%,transparent 30%)}

/* product window */
.win{position:relative;max-width:1040px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--lift);overflow:hidden;text-align:left;font-size:14px;line-height:1.45}
.win .bar{height:38px;display:flex;align-items:center;gap:8px;padding:0 14px;background:var(--soft);border-bottom:1px solid var(--line)}
.win .bar i{width:11px;height:11px;border-radius:50%;background:#EC6A5E}.win .bar i:nth-child(2){background:#F4BF4F}.win .bar i:nth-child(3){background:#61C554}
.win .bar span{margin:0 auto;font-size:12px;color:var(--ink3)}
.win .body{display:grid;grid-template-columns:200px minmax(0,1fr) 250px;min-height:470px}
.win aside.l{background:var(--soft);border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:3px;font-size:13px}
.win aside.l .it{display:flex;align-items:center;gap:9px;height:30px;padding:0 10px;border-radius:8px;color:var(--ink2)}
.win aside.l .it.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.win aside.l .sec{font-size:11px;color:var(--ink3);padding:14px 10px 4px}
.win aside.l .dot{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
.win main{padding:20px 26px;display:flex;flex-direction:column;gap:14px;min-width:0}
.win .top{display:flex;align-items:center;gap:8px}
.win .top b{font-size:14px}
.win .top .sp{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:var(--soft);font-size:12px;color:var(--ink2)}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--acc)}
.stack{display:flex}.stack .st{margin-left:-6px;border:2px solid var(--card)}.stack .st:first-child{margin-left:0}
.msg{display:flex;gap:10px}
.msg .b{min-width:0;flex:1;display:flex;flex-direction:column;gap:6px}
.msg .h{display:flex;gap:8px;align-items:baseline;font-size:13px}
.msg .h small{color:var(--ink3);font-size:11.5px}
.msg .t{font-size:14.5px;line-height:1.55}
.you{align-self:flex-end;max-width:440px;background:var(--soft);border-radius:16px 16px 5px 16px;padding:9px 13px;font-size:14px}
.mini{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;background:var(--card)}
.mini .row{display:flex;align-items:center;gap:8px;font-size:12.5px}
.mini .row>span:not(.st):not(.chip){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar2{height:4px;border-radius:2px;background:var(--line);overflow:hidden}.bar2 i{display:block;height:100%;background:var(--acc);border-radius:2px;transition:width 1.4s ease-out}
.comp{margin-top:auto;border:1px solid var(--line);border-radius:18px;padding:10px 12px;display:flex;align-items:center;gap:8px;color:var(--ink3);font-size:13.5px;box-shadow:var(--shadow)}
.comp .go{margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--ink);display:grid;place-items:center;color:var(--bg);font-size:13px}
.win aside.r{border-left:1px solid var(--line);padding:14px 12px;display:flex;flex-direction:column;gap:8px}
.cc{border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:12.5px;display:flex;flex-direction:column;gap:6px}
.cc b{font-size:13px}
.lane{display:flex;align-items:center;gap:8px}
.lane>span:not(.st):not(.grade):not(.chip){flex:1;min-width:0;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grade{font:600 11px var(--ui);padding:2px 7px;border-radius:999px;background:var(--ok-s);color:var(--ok)}
.caret{display:inline-block;width:2px;height:1em;background:var(--acc);margin-left:1px;vertical-align:-.12em;animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.live{animation:pool 2.4s ease-in-out infinite}
@keyframes pool{0%,100%{box-shadow:inset 0 -2px 0 rgba(31,42,54,.08),0 0 0 0 color-mix(in srgb,var(--acc) 0%,transparent)}50%{box-shadow:inset 0 -2px 0 rgba(31,42,54,.08),0 0 0 5px color-mix(in srgb,var(--acc) 20%,transparent)}}
.pop{transition:opacity .5s ease-out,transform .5s ease-out}
.pop.pre{opacity:0;transform:translateY(8px)}
@media (max-width:980px){.win .body{grid-template-columns:minmax(0,1fr)}.win aside.l,.win aside.r{display:none}}

/* sections */
section.s{padding-block:120px}
section.s.alt{background:var(--soft)}
.shead{display:flex;flex-direction:column;gap:18px;margin-bottom:56px}
.shead.c{align-items:center;text-align:center}
.shead.c .lede{margin:0 auto}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:900px){.grid3,.grid2{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:12px}
.card p{color:var(--ink2);font-size:16px;line-height:1.6}

/* problem */
.glue{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.glue span{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);font-size:15px;background:var(--card)}
.glue b{font-family:var(--mono);font-weight:500;color:var(--ink3);font-size:13px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:s}
.steps .card{padding:22px;gap:10px}
.steps .n{font:800 13px var(--display);color:var(--acc);letter-spacing:.04em}
.steps h3{font-size:18px}
.steps p{font-size:14.5px}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}

/* squad */
.squad{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.seat{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px 14px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.seat b{font:700 16px var(--display)}
.seat small{color:var(--ink3);font-size:13px;line-height:1.35}
@media (max-width:1000px){.squad{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.squad{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* split rows */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.split+.split{margin-top:110px}
.split.rev>:first-child{order:2}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr);gap:32px}.split.rev>:first-child{order:0}}
.split .copy{display:flex;flex-direction:column;gap:18px}
.ticks{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:10px;font-size:16px;color:var(--ink2)}
.ticks li{display:flex;gap:10px}
.ticks li::before{content:"";flex:none;width:18px;height:18px;margin-top:4px;border-radius:50%;background:var(--ok-s);box-shadow:inset 0 0 0 5px var(--ok-s),inset 0 0 0 9px var(--ok)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;gap:12px;font-size:14px}
.row2{display:grid;grid-template-columns:96px minmax(0,1fr);gap:7px 14px;font-size:14px}
.row2 dt{color:var(--ink3)}.row2 dd{margin:0}
.code{font:12.5px/1.7 var(--mono);background:var(--soft);border-radius:12px;padding:12px 14px;color:var(--ink2);white-space:pre;overflow-x:auto}
.photo{border-radius:22px;overflow:hidden;aspect-ratio:4/3;max-width:100%}
.photo img{width:100%;height:100%;object-fit:cover}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.plans{grid-template-columns:minmax(0,1fr)}}
.plan{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:14px}
.plan.hl{border-color:var(--ink);box-shadow:var(--shadow)}
.plan .price{font:800 40px/1 var(--display);letter-spacing:-.03em}
.plan .price small{font:500 15px var(--ui);color:var(--ink3);letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:var(--ink2)}
.plan ul li{display:flex;gap:8px}.plan ul li::before{content:"✓";color:var(--ok);font-weight:700}
.plan .btn{margin-top:auto;height:44px}
.fine{font-size:14px;color:var(--ink3)}

/* faq */
details{border-bottom:1px solid var(--line);padding:20px 0}
summary{cursor:pointer;font:700 18px var(--display);letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:400;color:var(--ink3)}
details[open] summary::after{content:"−"}
details p{margin-top:10px;color:var(--ink2);max-width:68ch}

/* waitlist */
.cta{position:relative;overflow:hidden;border-radius:32px;padding:80px 32px;text-align:center;background:var(--soft)}
.cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.cta>*{position:relative}
.cta h2{max-width:16ch;margin:0 auto}
form.wl{margin:30px auto 0;display:flex;gap:10px;max-width:560px;flex-wrap:wrap;justify-content:center}
form.wl input,form.wl select{height:50px;border-radius:999px;border:1px solid var(--line2);background:var(--card);color:var(--ink);padding:0 20px;font:16px var(--ui);flex:1 1 220px;min-width:0}
form.wl .btn{height:50px}
.thanks{margin-top:18px;font-weight:600;color:var(--ok)}
footer{padding-block:56px 48px;border-top:1px solid var(--line);font-size:14px;color:var(--ink3)}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center}
footer img{height:22px;width:auto}
footer .sp{flex:1}
footer a{color:var(--ink2);text-decoration:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.live,.caret{animation:none}.pop,.bar2 i,.btn{transition:none}}

/* demos: every section shows the feature working, as a 15-second loop built from the prototype's screens */
:root{--unc:#6A5A93;--unc-s:#EFECF6;--stop-s:#FBEAE5}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--unc:#BBAEE6;--unc-s:#241F33;--stop-s:#2E1B16}}
:root[data-theme="dark"]{--unc:#BBAEE6;--unc-s:#241F33;--stop-s:#2E1B16}
.c-plain{background:var(--soft);color:var(--ink2)}.c-unc{background:var(--unc-s);color:var(--unc)}.c-stop{background:var(--stop-s);color:var(--stop)}
.demo{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--lift);overflow:hidden;font-size:13.5px;line-height:1.45;text-align:left}
.wbar{height:36px;display:flex;align-items:center;gap:8px;padding:0 14px;background:var(--soft);border-bottom:1px solid var(--line)}
.wbar i{width:10px;height:10px;border-radius:50%;background:#EC6A5E}.wbar i:nth-child(2){background:#F4BF4F}.wbar i:nth-child(3){background:#61C554}
.wbar span{margin:0 auto;font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dbody{height:430px;display:grid;grid-template-columns:minmax(0,1fr)}
.dbody.two{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
.dbody.two.wide{grid-template-columns:minmax(0,1fr) minmax(0,440px)}
.dcol{padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-width:0;overflow:hidden}
.dfeed{justify-content:flex-end}
.dside{border-left:1px solid var(--line);background:var(--soft)}
.dhead{display:flex;align-items:center;gap:8px;font-size:13px}
.dhead b{font-size:13.5px}.dhead .sp{flex:1}
.dcard{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.dcard.warn{border-color:color-mix(in srgb,var(--wait) 55%,var(--line))}
.dcard.bad{border-color:color-mix(in srgb,var(--stop) 45%,var(--line))}
.dcard.good{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.dcard .row2{font-size:13px;grid-template-columns:72px minmax(0,1fr)}
.sb{height:30px!important;padding:0 12px!important;font-size:13px!important}
.small{font-size:12px;color:var(--ink3)}
.mono{font-family:var(--mono);font-size:12px}
.sys{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink3);padding-left:36px}
.dots{display:inline-flex;gap:4px;padding:10px 12px;border-radius:14px;background:var(--soft)}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--ink3);animation:dot 1.1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-2px)}}
.reply{font-size:12px;color:var(--ink3);border-left:2px solid var(--line2);padding-left:8px}
.cost{font:500 11px var(--mono);color:var(--ink3)}
.room{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--ink2);align-self:flex-start;background:var(--card)}
.trow,.prow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.trow:last-child,.prow:last-child{border-bottom:0}
.tid{font:500 11.5px var(--mono);color:var(--ink3);flex:none;width:36px}
.trow .tt,.prow .tt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .ok{color:var(--ok);font-weight:700;flex:none}
.codebox{font:12.5px/1.8 var(--mono);background:var(--soft);border-radius:12px;padding:10px 0;color:var(--ink2);overflow:hidden}
.ln{display:block;white-space:pre;padding:0 14px;min-height:1.8em}
.ln.del{background:var(--stop-s);color:var(--stop);text-decoration:line-through}
.ln.add{background:var(--ok-s);color:var(--ok)}
.tabs{display:flex;gap:4px}.tabs span{height:26px;padding:0 10px;border-radius:8px;display:inline-flex;align-items:center;font-size:12px;color:var(--ink3)}.tabs span.on{background:var(--soft);color:var(--ink);font-weight:600}
.term{font:12.5px/1.8 var(--mono);background:#11161C;color:#C9D4DE;border-radius:12px;padding:12px 14px;overflow:hidden;flex:1}
.term .ln{padding:0}.term .p{color:#7FB59B}.term .dim{color:#7D8994}
.demo .code{font-size:12.5px}
.bench{display:grid;grid-template-columns:110px minmax(0,1fr) 64px;gap:8px;align-items:center;font-size:12.5px}
.glue span{transition:background .3s,border-color .3s,color .3s}
.glue span.lit{background:var(--wait-s);border-color:color-mix(in srgb,var(--wait) 45%,var(--line2));color:var(--wait)}
.glue span.lit b{color:var(--wait)}
.hide{display:none!important}
.arrive{animation:arrive .42s cubic-bezier(.2,.7,.2,1) both}
@keyframes arrive{from{opacity:0;transform:translateY(8px)}}
.flash{animation:flash .6s ease-out}
@keyframes flash{30%{transform:scale(1.07)}}
.press{animation:press .45s ease-out}
@keyframes press{40%{transform:scale(.93);box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 28%,transparent)}}
.hl{animation:hl 1.6s ease-out}
@keyframes hl{0%{background:var(--acc-soft)}100%{background:transparent}}
.nt,.nt *{transition:none!important}
.caps{display:flex;gap:4px;padding:8px 10px;border-top:1px solid var(--line);background:var(--soft);overflow-x:auto;scrollbar-width:none}
.cap{flex:1 0 76px;min-width:0;display:flex;flex-direction:column;gap:6px;font:600 12px var(--ui);color:var(--ink3);background:none;border:0;padding:5px 6px;text-align:left;cursor:pointer;border-radius:8px;white-space:nowrap}
.cap:hover{color:var(--ink2)}
.cap.on{color:var(--ink)}
.tr{display:block;height:3px;border-radius:2px;background:var(--line);overflow:hidden}.tr i{display:block;height:100%;width:0;background:var(--acc);border-radius:2px}
.steps .card{cursor:pointer;transition:border-color .3s,box-shadow .3s}
.steps .card.on{border-color:var(--ink);box-shadow:var(--shadow)}
.steps .card .tr{margin-top:auto}
.wide-demo{margin-top:40px}
.demo-note{margin-top:14px;text-align:center}
@media (max-width:900px){.dbody.two,.dbody.two.wide{grid-template-columns:minmax(0,1fr)}.m-hide{display:none!important}.dside{border-left:0}.dbody{height:450px}}
@media (prefers-reduced-motion:reduce){.arrive,.flash,.press,.hl,.dots i{animation:none}}

/* scenes: one idea per screen, the product as the hero */
.scene{padding-block:150px 130px;position:relative}
.scene .head{text-align:center;max-width:860px;margin:0 auto 52px;display:flex;flex-direction:column;gap:20px;align-items:center}
.scene h2{font-size:clamp(38px,6vw,76px);line-height:1;letter-spacing:-.035em}
.scene .lede{margin:0 auto;text-align:center;max-width:52ch}
.scene .demo{max-width:1080px;margin:0 auto}
.scene .after{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:28px;font-size:16px}
.more{color:var(--acc);text-decoration:none;font-weight:600}
.more:hover{text-decoration:underline}
.more::after{content:" ›"}
.night{--bg:#0A0C0E;--soft:#14171A;--card:#171A1E;--line:#262B30;--line2:#353B42;--ink:#F1F3F5;--ink2:#A9B1BA;--ink3:#8E97A1;--acc:#9FC0D6;--acc2:#BFD5E4;--on-acc:#0F1113;--acc-soft:#1A2731;--ok:#7CC7A8;--ok-s:#17291F;--wait:#E5B867;--wait-s:#2C2416;--stop:#F0927C;--stop-s:#2E1B16;--unc:#BBAEE6;--unc-s:#241F33;--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.3);--lift:0 0 0 1px rgba(255,255,255,.04),0 40px 120px rgba(0,0,0,.6);background:var(--bg);color:var(--ink);color-scheme:dark}
.night .glow{position:absolute;inset:auto 0 0 0;height:70%;background:radial-gradient(60% 60% at 50% 70%,rgba(137,169,188,.16),transparent 70%);pointer-events:none}
.js .reveal{opacity:0;transform:translateY(28px) scale(.985);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.12s}
.pp{flex:none;width:30px;height:30px;align-self:center;border-radius:50%;border:1px solid var(--line2);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;margin-right:6px}
.roster{display:flex;justify-content:center;gap:clamp(18px,4vw,48px);flex-wrap:wrap}
.roster .seat{background:none;border:0;padding:0;width:112px}
.statement{font:800 clamp(30px,4.4vw,56px)/1.08 var(--display);letter-spacing:-.03em;text-align:center;max-width:18ch;margin:0 auto;text-wrap:balance}
.statement span{color:var(--ink3)}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}
@media (max-width:700px){.scene{padding-block:96px 88px}.scene .head{margin-bottom:36px}}
.strike{text-decoration:line-through;color:var(--ink3)}
.dcard>div{flex-wrap:wrap}
.cap>span:first-child{overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){.cap{flex-basis:96px}.dcol{padding:14px}}

/* engine scene: seats on the left, the engine in the middle, the world on the right; every action is a packet that must pass four gates */
.eng .stage{position:relative;height:500px;transition:filter .6s}
.eng .stage>*{transition:opacity .6s,filter .6s}
.eng .stage.down>*:not(.overlay){opacity:.18;filter:grayscale(1)}
.wires{position:absolute;inset:0;width:100%;height:100%}
.wires path{fill:none;stroke:var(--line2);stroke-width:1.2;stroke-dasharray:3 5;vector-effect:non-scaling-stroke;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-16}}
.node{position:absolute;transform:translateY(-50%);display:flex;align-items:center;gap:10px}
.seat-n{left:3%}
.nl{display:flex;flex-direction:column;line-height:1.25}
.nl b{font-size:13.5px}.nl small{font-size:11.5px;color:var(--ink3)}
.asg{color:var(--acc)!important}
.world{left:88%;font-size:13px;color:var(--ink2)}
.wi{width:30px;height:30px;border-radius:9px;border:1px solid var(--line2);background:var(--card);display:grid;place-items:center;font:700 10px var(--mono);color:var(--ink)}
.core{position:absolute;left:27%;right:27%;top:20px;bottom:20px;border-radius:20px;background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 9%,var(--card)),var(--card));border:1px solid color-mix(in srgb,var(--acc) 35%,var(--line));box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 6%,transparent),0 30px 80px rgba(0,0,0,.35);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.core-h{display:flex;align-items:center;gap:8px;font-size:13px}
.core-h .sp{flex:1}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 var(--acc);animation:beat 2s ease-out infinite;flex:none}
.pulse.big{width:14px;height:14px}
@keyframes beat{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 60%,transparent)}100%{box-shadow:0 0 0 12px transparent}}
.intake{height:54px;border:1px dashed var(--line2);border-radius:12px}
.gates{display:flex;flex-direction:column;gap:6px}
.gate{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--soft) 70%,transparent)}
.gn{width:22px;height:22px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;font:700 11px var(--mono);color:var(--ink2);flex:none}
.gt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.gt b{font-size:13.5px}.gt small{font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.verdict{margin-top:auto;font-size:13.5px;line-height:1.45;color:var(--ink);min-height:40px}
.engcard{position:absolute;left:16px;right:16px;bottom:70px;background:var(--card);border:1px solid color-mix(in srgb,var(--wait) 55%,var(--line));border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 20px 50px rgba(0,0,0,.45);z-index:3}
.pk{position:absolute;z-index:4;left:21%;top:var(--sy);transform:translate(-10%,-50%);display:inline-flex;align-items:center;gap:7px;max-width:240px;padding:7px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line2);font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:left .9s cubic-bezier(.5,0,.2,1),top .9s cubic-bezier(.5,0,.2,1),border-color .3s,background .3s,transform .9s cubic-bezier(.5,0,.2,1)}
.pk.in{left:50%;top:147px;transform:translate(-50%,-50%)}
.pk.out{left:var(--tx);top:var(--ty);transform:translate(-100%,-50%)}
.pk.good{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,var(--card))}
.pk.bad{border-color:var(--stop);background:color-mix(in srgb,var(--stop) 14%,var(--card));animation:shake .45s}
.pk.warn{border-color:var(--wait);background:color-mix(in srgb,var(--wait) 14%,var(--card))}
.pk.unc{border-color:var(--unc);background:color-mix(in srgb,var(--unc) 14%,var(--card))}
@keyframes shake{20%,60%{margin-left:-6px}40%,80%{margin-left:6px}}
.overlay{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;color:var(--ink2);font-size:14px}
.overlay b{font:800 clamp(22px,3vw,32px) var(--display);color:var(--ink);letter-spacing:-.02em}
.strip{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.ledger{display:flex;gap:6px;align-items:center;overflow:hidden;min-width:0}
.ckpt{display:flex;flex-direction:column;gap:6px}
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:64px}
.pillars h3{font-size:19px;margin-bottom:8px}
.pillars p{color:var(--ink2);font-size:15.5px;line-height:1.55}
@media (max-width:900px){
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eng .stage{height:540px}
  .nl,.world>span:last-child,.gt small,.core-h .small{display:none}
  .seat-n{left:2%}.world{left:auto;right:2%}
  .core{left:15%;right:15%;padding:12px}
  .wires{display:none}
  .pk{max-width:200px;font-size:11.5px;white-space:normal;left:2%}
  .pk.out{left:98%}
  .strip{grid-template-columns:minmax(0,1fr)}
  .engcard{bottom:84px}
}
@media (max-width:560px){.pillars{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.wires path,.pulse,.pk.bad{animation:none}.pk{transition:none}}
.sentinel{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;border:1px solid color-mix(in srgb,var(--stop) 30%,var(--line))}

/* home: what it does */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bx{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s}
.bx:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.bx .vis{height:120px;border-radius:14px;background:var(--soft);padding:12px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;margin-bottom:8px;font-size:12.5px}
.bx h3{font-size:18px}.bx p{color:var(--ink2);font-size:14.5px;line-height:1.5;flex:1}.bx .more{font-size:14px}
@media (max-width:1000px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.bento{grid-template-columns:minmax(0,1fr)}}
.urlbar{display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);font:12px var(--mono);color:var(--ink2);white-space:nowrap;overflow:hidden}
.urlbar .lock{color:var(--ok);font-size:9px}
.page-hero{padding-block:110px 20px;text-align:center}
.page-hero h1{font-size:clamp(48px,8vw,104px)}
.page-hero .lede{margin:22px auto 0}
.page-hero .jump{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.page-hero .jump a{height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);display:inline-flex;align-items:center;font-size:14px;color:var(--ink2);text-decoration:none}
.page-hero .jump a:hover{color:var(--ink);border-color:var(--ink3)}

/* squad band over the brand stones */
.squadband{position:relative;padding-block:120px;overflow:hidden}
.squadband .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.squadband .glass{position:relative;max-width:980px;margin:0 auto;padding:48px 32px;border-radius:32px;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);text-align:center;display:flex;flex-direction:column;gap:18px;align-items:center;box-shadow:var(--lift)}
.squadband h2{font-size:clamp(32px,4.6vw,56px)}
.squadband .roster{margin-top:14px;gap:clamp(12px,3vw,32px)}
.squadband .seat{width:96px}
@media (max-width:700px){.squadband{padding-block:72px}.squadband .glass{padding:32px 18px}.squadband .seat{width:84px}
  .stage{padding-bottom:150px}.stage .band{top:220px}}

/* shared page furniture */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav .links a[aria-current="page"]{color:var(--ink);font-weight:600}
.ts{flex-basis:100%;display:flex;justify-content:center}
.ts:empty{display:none}
.spot{margin:26px auto 0;max-width:520px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:10px;align-items:center;box-shadow:var(--shadow)}
.spot .pos{font:800 56px/1 var(--display);letter-spacing:-.03em}
.spot p{color:var(--ink2);font-size:15px}
.share{display:flex;gap:8px;width:100%}
.share input{flex:1;min-width:0;height:44px;border-radius:999px;border:1px solid var(--line2);background:var(--soft);color:var(--ink);padding:0 16px;font:13px var(--mono)}
.share .btn{height:44px}
.page-hero .eyebrow{display:block;margin-bottom:18px}
.sect{padding-block:100px}
.sect.alt{background:var(--soft)}
.sect .head{text-align:left;align-items:flex-start;margin:0 0 40px;max-width:760px;display:flex;flex-direction:column;gap:16px}
.sect h2{font-size:clamp(30px,4.2vw,50px)}
.cols{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:20px}
@media (max-width:900px){.cols{grid-template-columns:minmax(0,1fr)}}
.tile{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:10px}
.tile p{color:var(--ink2);font-size:15.5px;line-height:1.6}
.tile .k{font:500 12px var(--mono);color:var(--acc)}
.tile ul{margin:0;padding-left:18px;color:var(--ink2);font-size:15px;line-height:1.7}
.spec{font:12.5px/1.75 var(--mono);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;color:var(--ink2);white-space:pre;overflow-x:auto}
.spec b{color:var(--ink);font-weight:500}
.compare{width:100%;border-collapse:collapse;font-size:15px}
.compare th,.compare td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.compare th{font:700 15px var(--display)}
.compare td:not(:first-child),.compare th:not(:first-child){text-align:center}
.compare td:first-child{color:var(--ink2)}
.compare .y{color:var(--ok);font-weight:700}.compare .n{color:var(--ink3)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:20px;background:var(--card);padding:6px 12px}
.prose{max-width:720px;margin:0 auto;font-size:18px;line-height:1.7;color:var(--ink2)}
.prose h2{font-size:28px;color:var(--ink);margin:48px 0 14px}
.prose p{margin:0 0 18px}.prose strong{color:var(--ink)}
.prose ul{padding-left:20px;margin:0 0 18px}
.prose .note{font-size:14px;color:var(--ink3);border-left:3px solid var(--line2);padding-left:14px}
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;counter-reset:f}
.flow div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;font-size:14px;color:var(--ink2);position:relative}
.flow b{display:block;font:700 15px var(--display);color:var(--ink);margin-bottom:6px}
.flow div::before{counter-increment:f;content:counter(f,decimal-leading-zero);font:500 11px var(--mono);color:var(--acc);display:block;margin-bottom:8px}
@media (max-width:900px){.flow{grid-template-columns:minmax(0,1fr)}}

/* footer: a dark closing band over the brand stones */
.foot{--bg:#0A0C0E;--card:#16191C;--line:#262B30;--ink:#F1F3F5;--ink2:#A9B1BA;--ink3:#8E97A1;--acc:#9FC0D6;position:relative;overflow:hidden;background:var(--bg);color:var(--ink2);border-top:0;padding-block:96px 36px;font-size:14px}
.foot .fbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.1;filter:grayscale(1) contrast(1.2);pointer-events:none}
.foot .wrap{position:relative;display:block}
.ftop{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding-bottom:64px;border-bottom:1px solid var(--line)}
.fline{margin:0;font:800 clamp(40px,6vw,80px)/1 var(--display);letter-spacing:-.035em;color:var(--ink)}
.fstatus{display:flex;gap:12px;align-items:flex-start;max-width:280px}
.fstatus .pulse{margin-top:5px}
.fstatus div{display:flex;flex-direction:column;gap:4px}
.fstatus b{font:600 12px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(5,minmax(0,1fr));gap:28px;padding-top:48px}
.fgrid>div{display:flex;flex-direction:column;gap:10px}
.fgrid b{color:var(--ink);font-size:14px;margin-bottom:4px}
.fgrid a{color:var(--ink2);text-decoration:none}
.fgrid a:hover{color:var(--ink)}
.fbrand img{height:26px;width:auto;align-self:flex-start}
.fbrand p{margin:6px 0 0;line-height:1.6;max-width:30ch}
.fbase{display:flex;justify-content:space-between;margin-top:56px;padding-top:20px;border-top:1px solid var(--line);color:var(--ink3);font-size:13px}
@media (max-width:1000px){.fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.fbrand{grid-column:1/-1}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr 1fr}}
/* glossary */
.gloss{max-width:900px;margin:0 auto}
.gloss h2{font-size:28px;margin:48px 0 12px}
.gloss dl{display:grid;grid-template-columns:200px minmax(0,1fr);margin:0;border-top:1px solid var(--line)}
.gloss dt,.gloss dd{padding:16px 0;border-bottom:1px solid var(--line);margin:0}
.gloss dt{font:700 17px var(--display);color:var(--ink)}
.gloss dd{color:var(--ink2);font-size:16px;line-height:1.6}
.gloss dd span{display:block;margin-top:4px;font-size:14px;color:var(--ink3)}
@media (max-width:640px){.gloss dl{grid-template-columns:minmax(0,1fr)}.gloss dt{border-bottom:0;padding-bottom:0}}
/* engine on phones: tighter */
@media (max-width:900px){.eng .stage{height:500px}.core{top:12px;bottom:12px}.verdict{min-height:0}}

/* ===== v5 system: one section rhythm, one heading scale, centred heads ===== */
.scene,.sect,section.s{padding-block:clamp(88px,10vw,136px)}
.scene .head,.sect .head,section.s .shead{max-width:820px;margin:0 auto clamp(36px,5vw,56px);text-align:center;align-items:center;display:flex;flex-direction:column;gap:16px}
.scene .head .lede,.sect .head .lede,section.s .shead .lede{margin:0 auto;text-align:center;max-width:56ch}
.scene h2,.sect h2,section.s h2,.squadband h2{font-size:clamp(34px,5vw,60px);line-height:1.03;letter-spacing:-.035em}
.split .copy h2{text-align:left}
.page-hero{padding-block:clamp(96px,12vw,150px) clamp(24px,4vw,48px)}
.page-hero h1{font-size:clamp(48px,8vw,104px);line-height:.98}
.lede{font-size:clamp(17px,1.6vw,20px)}
.after{justify-content:center!important}
/* stones: pebbles, not avatars */
.st{color:rgba(20,28,37,.72);font-weight:700;box-shadow:0 1px 1px rgba(20,28,37,.16),0 6px 14px -6px rgba(20,28,37,.35),inset 0 -2px 3px rgba(20,28,37,.1)}
/* icons on cards */
.ic{width:40px;height:40px;border-radius:12px;background:var(--acc-soft);color:var(--acc);display:grid;place-items:center;margin-bottom:4px}
.ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* lighter demo chrome: a title, not a fake window */
.wbar{height:34px;justify-content:center}
.wbar i{display:none}
.wbar span{margin:0;font-weight:500}
/* phone menu */
.menu-btn{display:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--line2);background:var(--card);color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
.menu-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.sheet{display:none}
@media (max-width:860px){
  .menu-btn{display:inline-flex}
  .nav .btn.p{height:38px;padding:0 14px;font-size:14px}
  .nav.open .sheet{display:flex;position:fixed;left:0;right:0;top:66px;bottom:0;flex-direction:column;gap:2px;padding:16px max(20px,env(safe-area-inset-left)) 32px;background:var(--bg);overflow-y:auto;z-index:30;animation:arrive .25s ease-out}
  .sheet a{padding:14px 4px;border-bottom:1px solid var(--line);font:700 22px var(--display);color:var(--ink);text-decoration:none;letter-spacing:-.01em}
  .sheet small{display:block;margin:18px 4px 4px;font:600 12px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
  .sheet .more2{font:500 16px var(--ui);padding:10px 4px;border:0;color:var(--ink2)}
  body.menu-open{overflow:hidden}
}
/* demos on phones: show the side panel under the main column instead of hiding it */
@media (max-width:900px){
  .dbody,.dbody.two,.dbody.two.wide{height:auto}
  .dbody>.dcol{height:400px}
  .dbody>.dside.m-hide{display:flex!important;height:auto;min-height:0;border-top:1px solid var(--line)}
  .dbody>.dside.m-hide p.small[style*="margin-top:auto"]{margin-top:4px!important}
}

/* inline icons */
svg.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* how it works: one job, eight stages */
.lbody{padding:28px 24px 24px;display:flex;flex-direction:column;gap:26px;min-height:330px}
.track{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.rail{position:absolute;left:6%;right:6%;top:21px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.rail i{display:block;height:100%;background:var(--acc);transition:width 1.2s cubic-bezier(.3,.7,.2,1)}
.stg{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink3);font-size:13px;transition:color .3s}
.stg .dot{width:44px;height:44px;border-radius:50%;background:var(--card);border:1.5px solid var(--line2);display:grid;place-items:center;transition:all .35s}
.stg .dot svg{width:18px;height:18px}
.stg b{font-weight:600}
.stg.on{color:var(--ink2)}.stg.on .dot{border-color:var(--acc);color:var(--acc)}
.stg.now{color:var(--ink)}.stg.now .dot{background:var(--acc);border-color:var(--acc);color:var(--on-acc);box-shadow:0 0 0 7px color-mix(in srgb,var(--acc) 18%,transparent);transform:scale(1.08)}
.lcard{background:var(--soft);border-radius:18px;padding:22px 24px;display:flex;flex-direction:column;gap:10px;min-height:150px}
.who{font:600 12px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.ltext{margin:0;font:700 clamp(17px,2vw,22px)/1.35 var(--display);letter-spacing:-.01em;color:var(--ink);max-width:62ch}
.lchips{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:700px){.track{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:16px}.rail{display:none}.lbody{padding:20px 14px}}

/* security: the vault */
.vault3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:18px;min-height:330px}
.lane3{gap:10px;align-self:stretch}
.enginelane{border-color:color-mix(in srgb,var(--acc) 40%,var(--line));background:color-mix(in srgb,var(--acc) 5%,var(--card))}
.vline{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border-radius:10px;background:var(--soft);font-size:12.5px}
.vline .mono{word-break:break-all}
.field{display:flex;flex-direction:column;gap:4px}
.fv{height:34px;border-radius:10px;border:1px solid var(--line2);background:var(--soft);display:flex;align-items:center;padding:0 12px;font-size:13px;color:var(--ink)}
.vlog{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--line)}
@media (max-width:900px){.vault3{grid-template-columns:minmax(0,1fr)}}

/* glue: signed envelopes between two conductors */
.gstage{position:relative;height:400px}
.gwire{position:absolute;left:14%;right:14%;top:210px;border-top:2px dashed var(--line2);transition:opacity .5s}
.gwire.cut{opacity:.15}
.agree{position:absolute;left:50%;top:22px;transform:translateX(-50%);width:min(440px,84%);gap:6px}
.gnode{position:absolute;top:150px;width:200px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.gnode.l{left:3%}.gnode.r{right:3%}
.gnode b{font:700 16px var(--display)}.gnode small{font-size:11px;color:var(--ink3)}
.env{position:absolute;top:210px;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line2);font-size:12.5px;font-weight:600;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:left 1.6s cubic-bezier(.45,0,.2,1),border-color .3s,background .3s;z-index:2}
.env.lr{left:24%}.env.lr.go{left:76%}
.env.rl{left:76%}.env.rl.go{left:24%}
.env.bad{border-color:var(--stop);background:color-mix(in srgb,var(--stop) 14%,var(--card))}
.gverdict{position:absolute;left:0;right:0;bottom:20px;text-align:center;margin:0 auto;max-width:560px;padding:0 16px;font-size:15px;color:var(--ink)}
@media (max-width:700px){.gstage{height:460px}.gnode{width:120px}.gnode small{display:none}.env{white-space:normal;max-width:160px;font-size:11.5px}.env.lr{left:30%}.env.lr.go{left:70%}.env.rl{left:70%}.env.rl.go{left:30%}.gverdict{bottom:14px;font-size:14px}}

/* pricing: the receipt */
.rrow{display:grid;grid-template-columns:minmax(0,1fr) 80px 80px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.rrow>span:not(.tt){text-align:right}
.rrow .tt small{display:block;font-size:11.5px;color:var(--ink3)}
.rhead{font:600 11px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.rtotal{border-bottom:0;font-weight:600}

#receipt .dbody{height:auto;min-height:430px}
#receipt .rrow{padding:8px 0}
.gwire,.env{top:178px}
.env.lr{left:31%}.env.lr.go{left:69%}
.env.rl{left:69%}.env.rl.go{left:31%}
@media (max-width:700px){.env{top:250px}.gwire{top:178px}.env.lr{left:50%}.env.lr.go{left:50%}.env.rl{left:50%}.env.rl.go{left:50%}}

@media (max-width:860px){.nav.open .sheet{bottom:auto;height:calc(100dvh - 66px)}.nav.open{background:var(--bg)}}

@media (max-width:900px){.dbody>.dside.m-hide{min-height:300px}}

/* ===== v6: big, vivid, super clean ===== */
:root{--acc:#1473E6;--acc2:#0F5EC0;--on-acc:#FFFFFF;--acc-soft:#E8F1FD;--soft:#F4F5F7;--band:#F4F5F7}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--acc:#5EA6F7;--acc2:#8CC0FA;--on-acc:#0A1220;--acc-soft:#14243A;--band:#131619}}
:root[data-theme="dark"]{--acc:#5EA6F7;--acc2:#8CC0FA;--on-acc:#0A1220;--acc-soft:#14243A;--band:#131619}
h1,h2,h3{font-weight:700}
.btn.p{background:var(--acc);color:var(--on-acc)}
.btn.p:hover{background:var(--acc2);transform:none}
.nav .btn.p{background:var(--acc)}
.nav{background:color-mix(in srgb,var(--bg) 88%,transparent)}
.nav .links{gap:22px}
/* bands */
.band{padding-block:clamp(80px,9vw,128px)}
.band.alt{background:var(--band)}
.mhead{max-width:820px;margin:0 auto clamp(36px,5vw,56px);text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}
.mhead h2,.fcopy h2{font-size:clamp(34px,4.6vw,56px);line-height:1.06;letter-spacing:-.03em}
.mhead p,.fcopy p{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--ink2);max-width:60ch;margin:0}
/* hero */
.mhero{padding-block:clamp(64px,9vw,120px) clamp(48px,6vw,80px);text-align:center}
.mhero .mark{width:64px;height:auto;margin:0 auto 28px}
.mhero h1{font-size:clamp(46px,7.6vw,104px);line-height:1.02;letter-spacing:-.04em;max-width:13ch;margin:0 auto}
.pebbles{display:inline-flex;align-items:center;vertical-align:-.06em;margin:0 .18em;gap:0}
.pebbles .st{margin-left:-.14em;box-shadow:0 .05em .12em rgba(20,28,37,.25),inset 0 -.05em .08em rgba(20,28,37,.12)}
.pebbles .st:first-child{margin-left:0}
.pebbles .st{animation:bob 4s ease-in-out infinite}.pebbles .st:nth-child(2){animation-delay:-1.3s}.pebbles .st:nth-child(3){animation-delay:-2.6s}
@keyframes bob{50%{transform:translateY(-.06em) rotate(-4deg)}}
.mlede{margin:22px auto 0;font:600 clamp(19px,2vw,24px)/1.4 var(--display);color:var(--ink2);letter-spacing:-.01em}
.hero-join{max-width:440px;margin:36px auto 0;display:flex;flex-direction:column;gap:10px;align-items:stretch}
.mjoin{display:flex;flex-direction:column;gap:10px}
.mjoin input{height:56px;border-radius:16px;border:0;background:var(--band);color:var(--ink);padding:0 20px;font:17px var(--ui)}
.mjoin input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.mjoin .btn{height:54px;border-radius:999px;font-size:17px;width:100%}
.hero-join .fine{margin:6px 0 0;font-size:13.5px}
.hero-join .spot{margin-top:0}
.learn{display:inline-flex;align-items:center;gap:8px;margin-top:44px;height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;font-size:14.5px;box-shadow:var(--shadow)}
/* floating stones: our version of a life full of tasks */
.floaters{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(18px,3vw,40px) clamp(10px,2vw,28px);max-width:900px;margin:0 auto;justify-items:center;align-items:center}
.fst{display:grid;place-items:center;animation:bob2 6s ease-in-out infinite;animation-delay:calc(var(--d) * -1.2s)}
.fst:nth-child(even){transform:translateY(22px)}
.fst .st{color:rgba(20,28,37,.68)}
.fst .st svg{width:42%;height:42%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@keyframes bob2{50%{translate:0 -8px}}
@media (max-width:700px){.floaters{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* vivid product panel */
.vivid{border-radius:36px;padding:clamp(20px,5vw,64px);background:radial-gradient(80% 90% at 15% 10%,#CFE3FA 0%,transparent 60%),radial-gradient(70% 80% at 90% 20%,#E4DAF7 0%,transparent 60%),radial-gradient(80% 80% at 60% 100%,#F8DDCC 0%,transparent 60%),#EEF3FA}
.vivid .win{box-shadow:0 30px 80px rgba(20,40,80,.18)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .vivid{background:radial-gradient(80% 90% at 15% 10%,#16304F 0%,transparent 60%),radial-gradient(70% 80% at 90% 20%,#2A2244 0%,transparent 60%),radial-gradient(80% 80% at 60% 100%,#3A2620 0%,transparent 60%),#11161D}}
/* feature rows */
.frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,96px);align-items:center;max-width:1040px}
.frow.rev .fvis{order:-1}
.fcopy{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.fvis{display:flex;justify-content:center}
@media (max-width:860px){.frow{grid-template-columns:minmax(0,1fr)}.frow.rev .fvis{order:0}.fcopy{align-items:center;text-align:center}}
/* phone */
.phone{width:300px;height:600px;border-radius:48px;border:9px solid #12151A;background:var(--card);box-shadow:0 30px 70px rgba(20,28,37,.18),0 0 0 1px rgba(0,0,0,.06);overflow:hidden;display:flex;flex-direction:column;text-align:left;font-size:13.5px;line-height:1.4;position:relative}
.phone::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:84px;height:24px;border-radius:14px;background:#12151A;z-index:2}
.ph-top{display:flex;align-items:center;gap:10px;padding:46px 16px 12px;border-bottom:1px solid var(--line)}
.ph-top div{display:flex;flex-direction:column;line-height:1.2}.ph-top b{font-size:14px}.ph-top small{font-size:11.5px;color:var(--ink3)}
.ph-feed{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:9px;padding:12px;overflow:hidden}
.pmsg{display:flex;gap:7px;align-items:flex-end}
.pm{background:var(--band);border-radius:18px 18px 18px 6px;padding:9px 12px;max-width:85%;color:var(--ink)}
.pm b{display:block;font-size:11px;color:var(--ink3);font-weight:600;margin-bottom:2px}
.pm.me{align-self:flex-end;background:var(--acc);color:var(--on-acc);border-radius:18px 18px 6px 18px}
.psys{align-self:center;display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink3);padding:4px 10px;border-radius:999px;background:var(--band)}
.pcard{border:1px solid var(--line);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--card);box-shadow:0 6px 20px rgba(20,28,37,.08)}
.pcard.warn{border-color:color-mix(in srgb,var(--stop) 40%,var(--line))}
.pcard small{font-size:12px;color:var(--ink3)}
.pcard .btn{align-self:stretch;height:38px!important}
.pcard .ctr{text-align:center}
.prow2{display:flex;align-items:center;gap:10px;justify-content:space-between}
.prow2.sm{font-size:12.5px}
.prow2 div{display:flex;flex-direction:column;flex:1}
.pimg{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#BFD7D1,#89A9BC);flex:none}
.pfield{height:36px;border-radius:10px;background:var(--band);display:flex;align-items:center;padding:0 12px;font-size:13px}
.ph-comp{margin:10px 12px 14px;height:40px;border-radius:999px;border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 6px 0 16px;color:var(--ink3);font-size:13px}
.ph-comp span{width:30px;height:30px;border-radius:50%;background:var(--acc);color:var(--on-acc);display:grid;place-items:center}
/* engine as one dark panel inside a light page */
.darkpanel{margin:0 clamp(12px,2vw,24px);border-radius:40px;padding-block:clamp(72px,8vw,112px);position:relative;overflow:hidden}
.band#engine{padding-block:clamp(24px,3vw,40px)}
.darkpanel .head{text-align:center;max-width:820px;margin:0 auto 48px;display:flex;flex-direction:column;gap:16px;align-items:center}
.darkpanel .head .lede{margin:0 auto}
@media (prefers-reduced-motion:reduce){.pebbles .st,.fst{animation:none}}

[hidden]{display:none!important}
.pebbles .st{font-size:inherit;color:transparent}

.heropeb{width:clamp(200px,24vw,290px);height:auto;margin:0 auto 18px;animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}
.mhero h1{max-width:none}
@media (prefers-reduced-motion:reduce){.heropeb{animation:none}}
/* shared join band, same as the hero */
.mjoinwrap{max-width:520px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:stretch}
.mjoinwrap h2{font-size:clamp(38px,5.4vw,64px);line-height:1.02;letter-spacing:-.035em}
.mjoinwrap .mlede{margin:0 0 10px}
.heropeb.sm{width:200px}
.band.alt .mjoin input,.band.alt .mselect{background:var(--card)}
.mselect{height:56px;border-radius:16px;border:0;background:var(--band);color:var(--ink);padding:0 18px;font:17px var(--ui);appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),linear-gradient(135deg,var(--ink3) 50%,transparent 50%);background-position:calc(100% - 22px) 25px,calc(100% - 16px) 25px;background-size:6px 6px;background-repeat:no-repeat}
/* inner pages: calmer cards, more air, bands not boxes */
.sect.alt{background:var(--band)}
.tile{border-radius:24px;padding:26px;border-color:transparent;background:var(--band)}
.sect.alt .tile{background:var(--card)}
.tile h3{font-size:20px}
.page-hero h1{font-weight:700;letter-spacing:-.04em}
.page-hero .eyebrow{color:var(--acc)}
.flow div{border-color:transparent;background:var(--band)}
.sect.alt .flow div{background:var(--card)}

/* signature: the stone ring. rest = breathing, load = light travels stone to stone */
.ring svg{width:100%;height:auto;display:block;overflow:visible}
.ring .rs{transform-box:fill-box;transform-origin:center}
.ring.rest .rs{animation:rbreathe 7s ease-in-out infinite;animation-delay:calc(var(--i) * -1.15s)}
@keyframes rbreathe{50%{transform:translateY(-4px) scale(1.04)}}
.ring.load svg{animation:rspin 10s linear infinite}
.ring.load .rs{animation:rpulse 1.8s ease-in-out infinite;animation-delay:calc(var(--i) * .3s)}
@keyframes rspin{to{transform:rotate(360deg)}}
@keyframes rpulse{0%,60%,100%{transform:scale(1);filter:none}25%{transform:scale(1.09);filter:brightness(1.1) saturate(1.2)}}
.heroring{width:clamp(150px,15vw,200px);margin:0 auto 22px}
.joinring{width:clamp(240px,30vw,320px);margin:0 auto 8px}
.ringmini{display:inline-block;width:26px;vertical-align:middle}
@media (prefers-reduced-motion:reduce){.ring .rs,.ring.load svg{animation:none}}
.ph-top .ringmini{margin-left:auto;width:38px}

/* ===== v7: desktop windows for every example ===== */
.frow.wide{grid-template-columns:minmax(0,5fr) minmax(0,7fr);max-width:1180px;gap:clamp(32px,5vw,72px)}
.dwin{width:100%;max-width:700px;height:460px;border-radius:14px;border:1px solid var(--line);background:var(--card);box-shadow:0 30px 70px rgba(20,28,37,.14),0 0 0 1px rgba(0,0,0,.03);overflow:hidden;display:flex;flex-direction:column;text-align:left;font-size:13.5px;line-height:1.45}
.dw-bar{height:34px;flex:none;display:flex;align-items:center;gap:7px;padding:0 12px;background:var(--band);border-bottom:1px solid var(--line)}
.dw-bar i{width:10px;height:10px;border-radius:50%;background:#EC6A5E}.dw-bar i:nth-child(2){background:#F4BF4F}.dw-bar i:nth-child(3){background:#61C554}
.dw-bar span{margin-left:auto;margin-right:auto;font-size:12px;color:var(--ink3);transform:translateX(-24px)}
.dw-body{flex:1;min-height:0;display:grid;grid-template-columns:150px minmax(0,1fr)}
.dw-body.noside{grid-template-columns:minmax(0,1fr)}
.dw-side{background:var(--band);border-right:1px solid var(--line);padding:12px 8px;display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.dw-side .it{padding:6px 10px;border-radius:8px;color:var(--ink2)}.dw-side .it.on{background:var(--card);color:var(--ink);font-weight:600}
.dw-side .sec{font-size:11px;color:var(--ink3);padding:12px 10px 4px}
.dw-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.dw-head{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);flex:none}
.dw-head div{display:flex;flex-direction:column;line-height:1.2}.dw-head b{font-size:14px}.dw-head small{font-size:11.5px;color:var(--ink3)}
.dw-head .ringmini{margin-left:auto;width:34px}
.dw-feed{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:9px;padding:12px 16px;overflow:hidden}
.dw-feed.tight{padding:12px}
.dw-comp{margin:8px 14px 12px;height:38px;flex:none;border-radius:999px;border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5px 0 16px;color:var(--ink3);font-size:13px}
.dw-comp span{width:28px;height:28px;border-radius:50%;background:var(--acc);color:var(--on-acc);display:grid;place-items:center}
.dw-split{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.dw-split .codebox{margin:12px;border-radius:12px;align-self:start}
.dw-split .dw-feed{border-left:1px solid var(--line)}
.dwin .pm{max-width:88%}
/* creative tiles */
.ctiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ctile{border:1px solid var(--line);border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:3px;background:var(--card);transition:opacity .4s,border-color .4s,transform .4s}
.ctile .cimg{height:76px;border-radius:9px}
.ctile b{font-size:12.5px}.ctile small{font-size:11px;color:var(--ink3)}
.ctile.dim{opacity:.45}.ctile.pick{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft);transform:translateY(-2px)}
/* dispatch board */
.dispatch .dbody2{display:grid;grid-template-columns:minmax(0,1fr) 260px;min-height:460px}
.dmain{padding:18px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.dhead2{display:flex;align-items:center;gap:10px}.dhead2 div{display:flex;flex-direction:column;line-height:1.25}.dhead2 b{font-size:15px}.dhead2 small{font-size:12px;color:var(--ink3)}.dhead2 .sp{flex:1}
.dtable{display:flex;flex-direction:column}
.drow{display:grid;grid-template-columns:34px minmax(0,1fr) 190px 120px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.drow .tt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drow .chip{justify-self:start}
.dth{font:600 11px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);padding-top:0}
.dseat{display:flex;align-items:center;gap:7px;min-width:0}.dseat b{font-size:13px}.dseat small{font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dside2{border-left:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--band)}
.dside2 .cc{background:var(--card)}
@media (max-width:1000px){.dispatch .dbody2{grid-template-columns:minmax(0,1fr)}.dside2{display:none}.drow{grid-template-columns:30px minmax(0,1fr) 150px 100px}}
@media (max-width:860px){.frow.wide{grid-template-columns:minmax(0,1fr)}.dw-side{display:none}.dw-body{grid-template-columns:minmax(0,1fr)}.dwin{height:440px}}
@media (max-width:640px){.drow{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}.drow .tid,.dth{display:none}.drow .dseat{grid-column:1}.drow .chip{grid-row:1/3;grid-column:2;align-self:center}.dw-split{grid-template-columns:minmax(0,1fr)}.dw-split .codebox{display:none}.dw-split .dw-feed{border-left:0}.ctile .cimg{height:54px}.ctile small{display:none}}

.frow.wide.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media (max-width:1100px){.dw-side{display:none}.dw-body{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){.frow.wide.rev{grid-template-columns:minmax(0,1fr)}}

/* ===== v8: product windows are real app screens (prototype rendered in a frame) ===== */
.appwin{width:100%;max-width:1120px;margin:0 auto;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 40px 90px rgba(20,28,37,.16),0 0 0 1px rgba(0,0,0,.03)}
.appwin .dw-bar span{transform:none}
.appframe{position:relative;width:100%;aspect-ratio:1280/780;overflow:hidden;background:#fff}
.appframe iframe{position:absolute;left:0;top:0;width:1280px;height:780px;border:0;transform-origin:0 0;transform:scale(var(--s,.8));pointer-events:none}
.vivid .appwin{box-shadow:0 30px 80px rgba(20,40,80,.18)}
.showrow .mhead{margin-bottom:clamp(28px,4vw,44px)}
.showrow .mhead .more{margin-top:4px}

/* ===== v9: Apple-style sliders of real screens ===== */
.slider{position:relative;margin-top:8px}
.strack{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:6px max(20px,calc((100vw - 1080px) / 2)) 28px}
.strack::-webkit-scrollbar{display:none}
.slide{flex:none;width:min(1080px,88vw);scroll-snap-align:center;margin:0;background:var(--card);border-radius:30px;padding:clamp(22px,3vw,36px) clamp(18px,3vw,40px) 0;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px);overflow:hidden;box-shadow:0 1px 2px rgba(20,28,37,.04)}
.band.alt .slide{background:var(--card)}
.band:not(.alt) .slide{background:var(--band)}
.slide figcaption{font:600 clamp(17px,1.7vw,21px)/1.4 var(--ui);color:var(--ink2);text-align:center;max-width:46ch;margin:0 auto;letter-spacing:-.01em}
.slide figcaption b{color:var(--ink);font-weight:700}
.slide .appwin{border-radius:14px 14px 0 0;border-bottom:0;box-shadow:0 -1px 0 var(--line),0 20px 60px rgba(20,28,37,.12);max-width:none}
.sctl{display:flex;justify-content:center;align-items:center;gap:14px}
.sdots{display:flex;align-items:center;gap:12px;height:56px;padding:0 24px;border-radius:999px;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.sdots button{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:color-mix(in srgb,var(--ink) 35%,transparent);cursor:pointer;transition:width .35s,background .35s}
.sdots button[aria-current="true"]{width:40px;background:var(--ink2)}
.splay{width:56px;height:56px;border-radius:50%;border:0;background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.splay svg{width:20px;height:20px;fill:currentColor}
.sliderhead{margin-bottom:clamp(20px,3vw,32px)}
/* quote band */
.quote{max-width:980px;margin:0 auto;text-align:center}
.quote blockquote{margin:0;font:700 clamp(34px,5vw,64px)/1.08 var(--display);letter-spacing:-.035em;color:var(--ink)}
.quote blockquote span{color:var(--acc)}
.quote p{margin:24px 0 0;color:var(--ink3);font-size:15px}
/* works-with strip */
.works{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.wtrack{display:flex;gap:14px;width:max-content;animation:marquee 40s linear infinite}
.works:hover .wtrack{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.wlogo{display:inline-flex;align-items:center;gap:10px;height:64px;padding:0 26px;border-radius:18px;background:var(--card);border:1px solid var(--line);font:700 19px var(--display);letter-spacing:-.01em;color:var(--ink2);white-space:nowrap}
.wlogo i{width:10px;height:10px;border-radius:50%;display:inline-block}
.wlogo small{font:500 12px var(--ui);color:var(--ink3);letter-spacing:0}
/* newsletter */
.news{max-width:1080px;margin:0 auto;border-radius:32px;padding:clamp(32px,5vw,56px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:center;background:radial-gradient(70% 90% at 0% 0%,#CFE3FA 0%,transparent 60%),radial-gradient(70% 90% at 100% 100%,#E4DAF7 0%,transparent 60%),#EEF3FA}
.news h2{font-size:clamp(30px,3.8vw,46px);line-height:1.05;letter-spacing:-.03em}
.news p{margin:12px 0 0;color:var(--ink2);font-size:17px}
.newsform{display:flex;gap:10px;flex-wrap:wrap}
.newsform input{flex:1 1 220px;height:54px;border-radius:999px;border:0;background:#fff;color:#141C25;padding:0 22px;font:16px var(--ui)}
.newsform .btn{height:54px}
.news .thanks{grid-column:2;margin:0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .news{background:radial-gradient(70% 90% at 0% 0%,#16304F 0%,transparent 60%),radial-gradient(70% 90% at 100% 100%,#2A2244 0%,transparent 60%),#11161D}}
@media (max-width:760px){.news{grid-template-columns:minmax(0,1fr)}.news .thanks{grid-column:1}}
@media (prefers-reduced-motion:reduce){.wtrack{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.strack{scroll-behavior:auto}}

html,body{overflow-x:clip}

.heroshot{padding-top:0}
.page-hero+.band.heroshot,.page-hero+\n.band.heroshot{padding-top:0}

/* phone menu: its own full-screen sheet, outside the blurred header (Safari won't paint a fixed child of a backdrop-filter element over the page) */
.sheet{display:none}
@media (max-width:860px){
  .nav.open .sheet{display:none}
  body.menu-open .sheet{display:flex;flex-direction:column;gap:2px;position:fixed;inset:0;z-index:19;background:var(--bg);padding:calc(78px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-left,0px)) 32px;overflow-y:auto;overscroll-behavior:contain;animation:sheetin .22s ease-out}
  body.menu-open .nav{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:var(--line)}
}
@keyframes sheetin{from{transform:translateY(-8px)}}

@media (max-width:860px){body.menu-open .nav{position:fixed;top:0;left:0;right:0;z-index:20}}

/* contact form */
.cform{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:16px;background:var(--band);border-radius:28px;padding:clamp(22px,4vw,40px)}
.crow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cform label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
.cform input,.cform select,.cform textarea{border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);padding:14px 16px;font:16px var(--ui);font-weight:400}
.cform textarea{resize:vertical;min-height:140px}
.cform input:focus-visible,.cform select:focus-visible,.cform textarea:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.cfoot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
@media (max-width:600px){.crow{grid-template-columns:1fr}}

/* long-form pages: keep text off the screen edges on phones */
.prose{padding-inline:max(20px,env(safe-area-inset-left,0px)) max(20px,env(safe-area-inset-right,0px));box-sizing:content-box}
@media (max-width:760px){.prose{font-size:17px;max-width:none;box-sizing:border-box}.prose h2{font-size:24px}}

/* dictionary entry: how to say Ghloo */
.dict{max-width:760px;margin:0 auto;padding:clamp(28px,5vw,52px);border-radius:28px;background:var(--band);font-family:Georgia,"Iowan Old Style","Times New Roman",serif}
.dword{display:flex;align-items:center;gap:16px}
.dword h2{font:700 clamp(48px,8vw,84px)/1 var(--display);letter-spacing:-.04em;margin:0}
.say{width:48px;height:48px;border-radius:50%;border:1px solid var(--line2);background:var(--card);color:var(--acc);display:grid;place-items:center;cursor:pointer;flex:none}
.say svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.say.on{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.dpron{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;margin:16px 0 22px;font-size:20px;color:var(--ink2)}
.dpron .ipa{font-family:"Charis SIL","Doulos SIL","Lucida Sans Unicode",Georgia,serif;color:var(--ink)}
.dpron .pos{font-style:italic;color:var(--acc)}
.dsenses{margin:0;padding-left:26px;display:flex;flex-direction:column;gap:14px;font-size:19px;line-height:1.55;color:var(--ink)}
.dsenses li::marker{font-weight:700;color:var(--ink3)}
.dsenses .lab{font-style:italic;color:var(--ink3);margin-right:6px}
.dsenses .ex{display:block;margin-top:4px;font-style:italic;color:var(--ink2)}
.dnote{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line);font:15px/1.6 var(--ui);color:var(--ink3)}
.fsay{font-size:13px;color:var(--ink3);margin-top:10px!important}
.fsay b{color:var(--ink);font-family:var(--display)}
.fsay a{color:var(--ink2);text-decoration:underline;text-underline-offset:3px;margin-left:4px}

/* analytics consent */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:40;max-width:520px;margin-left:auto;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--lift);padding:16px 18px;display:flex;flex-direction:column;gap:12px;font-size:14.5px;color:var(--ink2)}
.consent p{margin:0}.consent a{color:var(--acc)}
.consent div{display:flex;gap:8px;justify-content:flex-end}
/* nav: bigger logo, menu centred on the page on larger screens */
.nav .logo img{height:32px}
@media (min-width:861px){
  .nav .wrap{position:relative;height:76px}
  .nav .links{position:absolute;left:50%;transform:translateX(-50%);gap:30px;font-size:16px}
}
@media (min-width:1600px){.nav .logo img{height:38px}.nav .links{font-size:17px;gap:34px}.nav .btn.p{height:44px;padding:0 22px;font-size:16px}}
.nav .links a{white-space:nowrap}
@media (min-width:861px) and (max-width:1099px){.nav .links{position:static;transform:none;gap:20px;font-size:15px}}

.plans.three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:980px;margin:0 auto}
@media (max-width:900px){.plans.three{grid-template-columns:minmax(0,1fr);max-width:480px}}