/* PrimaLabs landing — page styles (desktop, 1440 / 1920 frames; css/mobile.css is the phone / tablet layer) */
/* the hero canvas fades in on load (.pl-shown, set by the boot script); shared hover */
/* grayscale antialiasing, like Figma renders — subpixel AA makes light-on-dark text look bold on macOS */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* generic hover for links and buttons (overlay, so it never waits for the reveal delays) */
.ui a{cursor:pointer;transition:opacity .25s}
.hov{position:relative}
.hov::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .25s}
.hov:hover::after{opacity:.14}

/* the hero canvas fades in out of a blur on load */
.vis{opacity:0}
.pl-shown .vis{animation:plVis 2.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes plVis{from{opacity:0;filter:blur(18px);scale:1.05}to{opacity:1;filter:none;scale:none}}

/* Layout: Figma 97:551 (hero), 99:666 (header on scroll), 96:284 (sections). PP Writer → Newsreader.
   Sections are laid out in the 1440 frame (1160 column) and scaled with the stage (--s, from bridge.js fit()). */
:root{--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;--serif:Newsreader,"Times New Roman",serif;--sans:Inter,Helvetica,Arial,sans-serif;--s:1;--bg:#151515}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#000;color:#fff}
body{font:400 12px/1 var(--mono)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
[data-go]{cursor:pointer}
#c{position:fixed;inset:0;width:100vw;height:100vh;display:block}
#fly{height:160vh}   /* the hero's scroll range: the city is time-driven, the scroll only hands over (60vh of range) */

/* type */
.h2{font:400 44px/48px var(--serif);letter-spacing:-.44px}
.sub{font:400 15px/24px var(--sans);letter-spacing:-.6px;opacity:.7}
.h3{font:400 24px/24px var(--serif);letter-spacing:-.24px}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 12px;border:1px solid rgba(255,255,255,.05);
  font:500 15px/22px var(--sans);letter-spacing:-.75px;white-space:nowrap;box-shadow:inset 0 0 8px rgba(255,255,255,.1)}
.btn.w{background:#fff;color:#000;border-color:rgba(0,0,0,.09)}
.btn.g{background:rgba(255,255,255,.1)}
.btn.w.hov::after{background:#000}

/* ---------- header: hero row (97:551) → floating bar on scroll (99:666) ---------- */
.hdr{position:fixed;left:0;top:0;width:1440px;height:80px;z-index:20;pointer-events:none}
.hdi{position:absolute;inset:0}
.hd{position:absolute;left:calc(50% - 580px);top:12px;width:1160px;height:24px;pointer-events:auto;border:1px solid transparent;
  transition:left .6s var(--e),top .6s var(--e),width .6s var(--e),height .6s var(--e),background-color .6s,border-color .6s,box-shadow .6s,backdrop-filter .6s;
  --e:cubic-bezier(.65,0,.25,1)}
.hd .lg{position:absolute;left:-1px;top:-1px;display:flex;align-items:center;gap:8px;font:400 14px/1 var(--mono);text-transform:uppercase;transition:left .6s var(--e),top .6s var(--e)}
.hd nav{position:absolute;left:579px;top:3.5px;display:flex;gap:24px;font:400 15px/15px var(--sans);letter-spacing:-.3px;white-space:nowrap;transition:left .6s var(--e),top .6s var(--e)}
.hd nav a{transition:opacity .25s}.hd nav a:hover{opacity:.6}
.hd .act{position:absolute;right:-1px;top:-1px;display:flex;gap:24px;transition:right .6s var(--e),top .6s var(--e),gap .6s var(--e)}
.hd .act a{display:flex;align-items:center;gap:6px;font:500 15px/15px var(--sans);letter-spacing:-.3px;white-space:nowrap;transition:gap .6s var(--e)}
.hd .act span{display:block;max-width:120px;overflow-x:clip;overflow-y:visible;padding-bottom:3px;margin-bottom:-3px;transition:max-width .6s var(--e),opacity .35s}
.hd .act b{position:relative;width:24px;height:24px;flex:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.05);box-shadow:inset 0 0 6px rgba(255,255,255,.1);transition:width .6s var(--e),height .6s var(--e)}
.hd .act b svg{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);display:block}
.hd .act a:hover span{opacity:.6}
.hd .act b::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .25s}
.hd .act a:hover b::after{opacity:.12}
.hd.cmp{left:calc(50% - 350px);top:16px;width:699px;height:44px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.05);
  box-shadow:inset 0 0 8px rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hd.cmp .lg{left:11px;top:9px}
.hd.cmp nav{left:260px;top:13.5px}
.hd.cmp .act{right:5px;top:5px;gap:8px}
.hd.cmp .act a{gap:0}
.hd.cmp .act span{max-width:0;opacity:0}
.hd.cmp .act b{width:32px;height:32px}

/* ---------- hero (stage, 1440 frame) ---------- */
.stage{position:fixed;left:0;top:0;width:1440px;height:800px;transform-origin:0 0;z-index:3;pointer-events:none;transition:opacity .2s}
.stage .a{position:absolute;pointer-events:auto}
.h1{left:calc(50% - 580px);top:84px;font:400 44px/48px var(--serif);letter-spacing:-.44px;white-space:nowrap}
.lead{left:50%;top:84px;width:521px;font:400 17px/26px var(--sans);letter-spacing:-.68px;white-space:nowrap}
.hbtn{left:50%;top:190px;display:flex;gap:8px}


/* ---------- page sections ---------- */
.sec{position:relative;zoom:var(--s)}
#rest{position:relative;z-index:5;background:var(--bg);overflow-x:clip}
#dots{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:0}
.sec .wrap,#measure .msticky{z-index:1}
.wrap{width:1160px;margin:0 auto;position:relative;z-index:1}

/* measured before it ships — one screen, left steps + right frame (the steps advance on a timer, not with scroll) */
#measure{height:calc(100vh / var(--s))}
#measure .msticky{position:relative;height:calc(100vh / var(--s));display:flex;align-items:center;padding:64px 0}   /* the same room above and below (the floating header sits in the top 56px) */
#measure .mw{display:grid;grid-template-columns:512px 574px;justify-content:space-between;height:min(740px,calc(100vh / var(--s) - 128px))}
#measure .ml{display:flex;flex-direction:column;justify-content:space-between}
#measure .ml>div>.sub{margin-top:24px;width:472px}
#measure .msteps{width:475px}
#measure .ms{position:relative;padding-bottom:21px;cursor:pointer}
#measure .ms+.ms{margin-top:20px}
#measure .ms p{width:435px;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s cubic-bezier(.65,0,.25,1),opacity .35s,margin .5s cubic-bezier(.65,0,.25,1)}
#measure .ms.on p{max-height:72px;opacity:.7;margin-top:12px}
#measure .ms:not(.on):hover .h3{opacity:.7}
#measure .ms .h3{transition:opacity .25s}
#measure .mb{position:absolute;left:0;bottom:0;width:475px;height:1px;background:rgba(217,217,217,.2);display:block}
#measure .ms:last-child .mb{background:transparent}
#measure .mb b{position:absolute;left:0;top:0;height:1px;width:0;background:#fff}
#measure .mr{position:relative;background:#0d0d0d;border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 0 10px rgba(255,255,255,.1)}
#mcv{position:absolute;inset:0;width:100%;height:100%;display:block}

/* traffic patterns — three cards sharing one track */
#traffic{padding:200px 0 173px}
#traffic .thd{display:flex;justify-content:space-between;align-items:flex-end}
#traffic .thd .sub{margin-top:24px;width:512px}
.card{position:relative;height:377px;background:#1c1c1c;border:1px solid rgba(255,255,255,.05);box-shadow:inset 0 0 8px rgba(255,255,255,.1);overflow:hidden}
.card::before{content:"";position:absolute;inset:-1px;z-index:3;pointer-events:none;border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 0 34px rgba(255,255,255,.28),inset 0 0 6px rgba(255,255,255,.35);
  -webkit-mask-image:radial-gradient(230px circle at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);mask-image:radial-gradient(230px circle at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);
  opacity:0;transition:opacity .35s}
.card:hover::before{opacity:1}

/* team */
#team{padding-bottom:174px;text-align:center}
#team .hd2{width:614px;margin:0 auto}
#team .h2{width:570px;margin:0 auto}
#team .hd2 .sub{margin-top:24px}
#team .row{margin-top:72px;display:flex;align-items:center;gap:147px;width:1163px}
#team .vl{width:1px;height:348px;background:rgba(217,217,217,.1);flex:none}
#team .fd{display:flex;flex-direction:column;align-items:center;gap:36px;flex:none}
#team .ph{position:relative;width:196px;height:196px;background:#141414;border:1px solid rgba(217,217,217,.1);box-shadow:inset 0 0 8px rgba(255,255,255,.05)}
#team .ph img{position:absolute;left:5px;top:5px;width:184px;height:184px;object-fit:cover;border:1px solid rgba(255,255,255,.05)}
#team .role{font:400 13px/22px var(--sans);letter-spacing:-.52px}
#team .nm{margin-top:10px}
#team .fd .sub{margin-top:12px}
#team .from{margin:72px auto 0;width:883px}
#team .from>p{font:400 15px/24px var(--sans);letter-spacing:-.6px}
#team .logos{margin-top:36px;display:flex;align-items:center;gap:51.174px;opacity:.32}
#team .logos img{display:block;flex:none}

/* blog */
#blog{padding-bottom:256px}
#blog .top{display:flex;justify-content:space-between;align-items:flex-end}
#blog .top .sub{margin-top:24px;width:440px}
#blog .posts{margin-top:56px;display:grid;grid-template-columns:575px 575px;gap:12px}
.post{height:auto;display:flex;flex-direction:column;align-items:center;gap:20px;padding:4px 4px 20px;cursor:pointer}
.post .pi{display:block;width:100%;aspect-ratio:3200/1400;object-fit:cover}
.post .pb{width:535px;display:flex;flex-direction:column;gap:20px}
.post .pt .sub{margin-top:12px;width:516px}
.post .meta{display:flex;justify-content:space-between;font:400 15px/24px var(--sans);letter-spacing:-.6px}
.post .meta .by{display:flex;align-items:center;gap:6px;opacity:.7}
.post .meta .by i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.3)}
.post .meta .rd{display:flex;align-items:center;gap:8px}
.post .meta .rd img{transition:translate .3s cubic-bezier(.2,.7,.2,1)}
.post:hover .meta .rd img{translate:3px 0}
.btn img{display:block}

/* CTA — perspective grid from the Figma frame (the CTA board animation is parked for now) */
#ctasec{height:647px;text-align:center}
#ctasec .h2b{width:604px;margin:0 auto;font:400 65px/62px var(--serif);letter-spacing:-.65px}
#ctasec .sub{width:614px;margin:24px auto 0}
#ctasec .ctab{display:inline-block;margin-top:32px;padding:2px;border:1px solid rgba(217,217,217,.1);background:#141414;box-shadow:inset 0 0 8px rgba(255,255,255,.05)}
#ctasec .btn{display:flex;height:36px;padding:7px 12px;letter-spacing:-.9px;border:0;box-shadow:none}
#ctasec .ctabg{position:absolute;left:50%;top:-575px;width:4320px;height:1336px;margin-left:-2160px;max-width:none;pointer-events:none;z-index:0}

/* block reveal: fade up once when the block enters the screen (--d = stagger step) */
[data-rv]{opacity:0;translate:0 28px;transition:opacity .9s cubic-bezier(.2,.7,.2,1),translate .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0) * 110ms)}
[data-rv].in{opacity:1;translate:0 0}
.sub[data-rv].in{opacity:.7}
#ctasec .ctabg[data-rv]{translate:0 0}

/* 2D chart after the dive (Figma 111:737) — background drifts from black into the page colour on scroll */
 /* the section starts one screen early (over the end of the dive) and pins: the chart appears on the finished tunnel */
#chart2d{position:relative;z-index:5;height:calc(230vh / var(--s));margin-top:calc(-100vh / var(--s))}
#chart2d .c2s{position:sticky;top:0;height:calc(100vh / var(--s));display:flex;align-items:center;overflow:hidden}
#chart2d .c2v{position:absolute;inset:0;background:#010101;opacity:0}
#chart2d .c2{opacity:0;transition:opacity .8s}
#chart2d.in .c2{opacity:1}
#chart2d .c2{position:relative;width:1440px;height:765px;margin:0 auto;flex:none}
#chart2d .c2h{position:absolute;left:0;right:0;top:85px;text-align:center}
#chart2d .c2h[data-rv],#chart2d .c2f[data-rv]{opacity:1;translate:none}
#chart2d .c2h .h2{width:570px;margin:0 auto}
#chart2d .c2h .sub{width:614px;margin:24px auto 0}
#chart2d .gl{position:absolute;left:139px;width:1162px;height:1px;background:rgba(226,226,226,.1)}
#chart2d .bar{position:absolute;bottom:217px;display:flex;align-items:center;justify-content:center;background:#1c1c1c;border:1px solid #2a2a2a;box-shadow:inset 0 0 8px rgba(255,255,255,.1);
  font:400 15px/1 var(--sans);letter-spacing:-.15px;transform-origin:50% 100%;scale:1 0;transition:scale 1s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 55ms + 150ms)}
#chart2d .bar span{opacity:0;transition:opacity .5s calc(var(--i) * 55ms + 650ms)}
#chart2d .bar.b0{background:var(--acc)}
#chart2d .pv{position:absolute;top:557px;width:22px;height:22px;opacity:0;transition:opacity .6s calc(var(--i) * 55ms + 500ms)}
#chart2d.in .bar{scale:1 1}#chart2d.in .bar span,#chart2d.in .pv{opacity:1}
#chart2d .c2f{position:absolute;left:163px;top:624px;width:1138px;display:flex;justify-content:space-between;align-items:center}
#chart2d .c2t{font:400 20px/20px var(--serif);letter-spacing:-.2px}
#chart2d .c2f .sub{margin-top:12px}

/* footer */
/* footer (Figma 117:83): links, the big wordmark, receding lines that throw accent rays on hover */
#foot{position:relative;z-index:6;height:833px;background:#0d0d0d;zoom:var(--s);overflow:hidden}
#foot .fw{position:absolute;left:50%;top:72px;width:1183px;height:640px;margin-left:-592px}
#foot .ftag{position:absolute;left:11px;top:0;width:335px}
#foot .ftag p{font:400 15px/22px var(--sans)}
#foot .ftag .btn{margin-top:24px}
#foot .fcol{position:absolute;top:0;display:flex;flex-direction:column;gap:18px;font:400 15px/18px var(--sans);white-space:nowrap}
#foot a{cursor:pointer;transition:opacity .25s}#foot nav a:hover,#foot .fl a:hover{opacity:.6}
#foot .fbot{position:absolute;left:11px;top:568.6px;width:1162px;display:flex;justify-content:space-between;align-items:center;font:400 13px/18px var(--sans)}
#foot .fbot>span:first-child{color:#8a8a8a}
#foot .fl{display:flex;gap:24px}
#flines{position:absolute;left:0;top:660px;width:100%;height:173px;display:block}

/* ======== sections ======== */
/* header (Figma 158:1464 hero row, 155:971 floating bar) */
.hd .lg .lgw{position:relative;display:block;width:109.43px;height:17px}
.hd .lg .lgw img{position:absolute;left:0;top:0;width:109.43px;height:17px;display:block}
.hd .lg{height:24px}
.hd nav{left:580px}
.hd.cmp{left:calc(50% - 435.5px);width:871px}
.hd.cmp .lg{left:14px;top:9px}
.hd.cmp nav{left:316px;top:13.5px}
.hd .act a.mid{max-width:40px;transition:max-width .6s var(--e),opacity .35s,margin .6s var(--e)}
.hd .act a.mid span{display:none}
.hd:not(.cmp) .act a.mid{max-width:0;opacity:0;margin-left:-24px;overflow:hidden;pointer-events:none}
.hbtn .btn.term{height:36px;padding:6px 10px 6px 12px;gap:8px}
.hbtn .btn.term img{display:block;width:24px;height:24px}
.btn.g{background:#2c2c2c}   /* solid grey buttons: the colour rgba(255,255,255,.1) gives on the page (#151515) */
#foot .btn.g{background:#252525}   /* … on the footer (#0d0d0d) */
.card .btn.g{background:#333}      /* … on the cards (#1c1c1c) */
#stage::before{content:"";position:absolute;left:0;top:0;width:100%;height:430px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,20,20,.92) 0,rgba(20,20,20,.82) 150px,rgba(20,20,20,.55) 250px,rgba(20,20,20,0) 430px)}   /* keeps "your workload" off the circuit lines */   /* solid, not see-through over the hero */
#ctasec .ctab .btn.term{gap:8px;padding:6px 10px 6px 12px}
#ctasec .ctab .btn.term img{display:block;width:24px;height:24px}
/* button hover, like the cards: white → a soft white glow on the cursor's side; grey → light where the cursor is and along that edge */
.btn.hov::before{content:"";position:absolute;inset:-1px;z-index:2;pointer-events:none;border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 0 14px rgba(255,255,255,.22),inset 0 0 4px rgba(255,255,255,.3);
  -webkit-mask-image:radial-gradient(70px circle at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);mask-image:radial-gradient(70px circle at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);
  opacity:0;transition:opacity .3s}
.btn.g.hov:hover::before{opacity:1}
.btn.g.hov::after{background:radial-gradient(80px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.9),transparent 70%)}
.btn.g.hov:hover::after{opacity:.14}
.btn.w.hov::before{inset:-8px;padding:8px;border:0;box-shadow:none;background:radial-gradient(24px circle at calc(var(--mx,50%) + 8px) calc(var(--my,50%) + 8px),rgba(255,255,255,.5),rgba(255,255,255,.12) 45%,transparent 75%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}   /* a ring outside the button, lit only around the cursor */
.btn.w.hov:hover::before{opacity:1}
.btn.w.hov:hover::after{opacity:.05}
/* header: text links light up a little; the icon squares light like the grey buttons and say what they are */
.hd nav a{color:rgba(255,255,255,.86);transition:color .25s,text-shadow .25s,opacity .25s}
.hd nav a:hover{opacity:1;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.55),0 0 2px rgba(255,255,255,.6)}
.hd .act b::after{background:radial-gradient(30px circle at var(--mx,50%) var(--my,50%),#fff,transparent 70%)}
.hd .act a:hover b::after{opacity:.16}
.hd .act b::before{content:"";position:absolute;inset:-1px;z-index:2;pointer-events:none;border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 0 10px rgba(255,255,255,.22);
  -webkit-mask-image:radial-gradient(34px circle at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.5) 45%,transparent 100%);mask-image:radial-gradient(34px circle at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.5) 45%,transparent 100%);opacity:0;transition:opacity .3s}
.hd .act a:hover b::before{opacity:1}
.hd .act a{position:relative}
.hd.cmp .act a::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 10px);translate:-50% -3px;padding:5px 8px;white-space:nowrap;pointer-events:none;
  font:500 12px/14px var(--sans);letter-spacing:-.2px;color:#fff;background:rgba(28,28,28,.92);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 8px rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .2s,translate .2s}
.hd.cmp .act a:hover::after{opacity:1;translate:-50% 0}
/* hero intro, one element at a time (replaces the block-wise data-i reveal for the header and the hero) */
@keyframes plIn{from{opacity:0;translate:0 14px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:none}}
html:not(.pl-live) [data-j]{opacity:0}
html.pl-live [data-j]{animation:plIn .9s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--j) * 90ms + 60ms)}
/* blog cards: "Read 7 min" lights up a little, like the header links */
.post .meta .rd{transition:color .25s,text-shadow .25s,filter .25s;color:rgba(255,255,255,.86)}
.post:hover .meta .rd{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.55),0 0 2px rgba(255,255,255,.6)}
.post .meta .rd img{transition:filter .25s}
.post:hover .meta .rd img{filter:drop-shadow(0 0 4px rgba(255,255,255,.7))}
/* how it adapts (Figma 189:1015): cards 379 / 380 / 379 × 404, title + number + divider, plates, triangle, outcome panel */
/* section gaps grow up to 30% from the 1440 to the 1920 frame (--t from the stage fit), so big screens get more air */
:root{--sp:calc(1 + .3 * var(--t, 0))}
#adapt{padding-top:calc(200px * var(--sp));padding-bottom:calc(clamp(24px, 538px - 50vh / var(--s, 1), 112px) * var(--sp))}   /* the next block's title sits ~200px below the cards (Measure centres its content in the viewport) */
#traffic{padding:calc(200px * var(--sp)) 0 calc(173px * var(--sp))}
#team{padding-bottom:calc(174px * var(--sp))}
#blog{padding-bottom:calc(256px * var(--sp))}
#adapt .ahd{display:flex;justify-content:space-between;align-items:flex-end}
#adapt .agrid{position:relative;margin-top:56px;display:grid;grid-template-columns:379px 380px 379px;gap:12px}
#adapt .acard{height:404px}
#adapt .aht{position:absolute;left:19px;top:19px;white-space:nowrap}
#adapt .anum{position:absolute;left:330px;top:17px;width:28px;height:28px;background:#1c1c1c;box-shadow:inset 0 0 2px rgba(255,255,255,.1),inset 0 0 8px rgba(255,255,255,.07);
  font:400 15px/28px var(--sans);letter-spacing:-.6px;text-align:center}
#adapt .adiv{position:absolute;left:0;top:61px;width:100%;height:1px;background:rgba(255,255,255,.05)}
#adapt .aopts{position:absolute;left:19px;top:82px;width:339px;display:flex;flex-direction:column;gap:8px}
#adapt .aopt.btn{height:72px;padding:5px 12px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;white-space:nowrap}
#adapt .aopt.btn.g{background:#242424}   /* rgba(255,255,255,.04) on the card, solid */
/* picking a plate: the white fill fades in (and out on the old plate); icon and label turn dark with it */
#adapt .aopt .afill{position:absolute;inset:-1px;background:#fff;opacity:0;transition:opacity .45s cubic-bezier(.4,0,.2,1)}
#adapt .aopt.on .afill{opacity:1}
#adapt .aopt .aic,#adapt .aopt span{position:relative;z-index:1}
#adapt .aopt span{transition:color .37s .08s}
#adapt .aopt.on span{color:#000}
#adapt .aopt .aic img{transition:filter .37s .08s}
#adapt .aopt.on .aic img{filter:invert(1)}
#adapt .ad{transition:opacity .2s,translate .2s cubic-bezier(.2,.7,.2,1)}
#adapt .ad.out{opacity:0;translate:0 -6px}
#adapt .ad.in0{opacity:0;translate:0 6px;transition:none}
#adapt .aic{position:relative;display:block;width:24px;height:24px}
#adapt .aic img{position:absolute;display:block}
#adapt .ad{position:absolute;left:19px;bottom:21px;width:339px}   /* room for two lines; the last line sits where Figma's single line does */
#adapt .alab{position:absolute;display:flex;flex-direction:column;font:500 15px/22px var(--sans);letter-spacing:-.75px}
#adapt .alab i{font-style:normal;font-weight:400;opacity:.5}
#adapt .atri{position:absolute;left:0;top:0;pointer-events:none}
#adapt .atri .grd{fill:none;stroke:rgba(217,217,217,.14);stroke-width:1}
/* the accent comes in and fades back as a mix amount (--hk, registered so it transitions), not as the colour itself: in Prism --acc drifts
   every 80 ms, and a colour transition retargeted that often never lands — the mix amount has a fixed target, the hue follows live */
@property --hk{syntax:'<number>';inherits:false;initial-value:0}
#adapt .atri .shp{--hk:0;fill:color-mix(in srgb,color-mix(in srgb,var(--acc,#E4601F) 20%,transparent) calc(var(--hk)*100%),rgba(255,255,255,.08));stroke:color-mix(in srgb,var(--acc,#E4601F) calc(var(--hk)*100%),#fff);stroke-width:1.4;stroke-linejoin:round;transition:--hk 1.7s ease}
#adapt .atri.hot .shp{--hk:1;transition:--hk .55s ease}   /* accent while it re-shapes (in over .55 s), then fades back over 1.7 s */
#adapt .apan{position:absolute;left:19px;top:82px;width:339px;height:257px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05);box-shadow:inset 0 0 8px rgba(255,255,255,.1);overflow:hidden}
#adapt .aill{position:absolute;left:-1px;top:-1px;width:339px;height:257px;opacity:0;transition:opacity .35s}
#adapt .aill.on{opacity:1}
/* the illustration pieces are their SVGs used as masks (the lines' own opacities kept), filled white — or the accent while they change */
#adapt .aill .ip{position:absolute;display:block;--hk:0;background:color-mix(in srgb,var(--acc,#E4601F) calc(var(--hk)*100%),#fff);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:--hk 1.7s ease}
#adapt .apan.hot .aill .ip{--hk:1;transition:--hk .55s ease}   /* same mix-amount pattern as the triangle: in over .55 s, back over 1.7 s */
#adapt .aot{position:absolute;left:50%;top:187px;width:235px;margin-left:-117.5px;text-align:center;font:500 15px/22px var(--sans);letter-spacing:-.75px;transition:opacity .2s}
#adapt .apan.swap .aot{opacity:0}
#adapt .alnk{position:absolute;left:19px;top:359px;display:inline-flex;align-items:center;gap:8px;font:400 15px/24px var(--sans);letter-spacing:-.6px;color:rgba(255,255,255,.86);cursor:pointer;transition:color .25s,text-shadow .25s}
#adapt .alnk:hover{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.55),0 0 2px rgba(255,255,255,.6)}
#adapt .alnk img{display:block;transition:filter .25s}#adapt .alnk:hover img{filter:drop-shadow(0 0 4px rgba(255,255,255,.7))}
#adapt .afx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:3}
#ctasec .ctafx{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;pointer-events:none}

/* proof: model + metric toggles over the 2D chart */
#chart2d .c2h{top:61px}
#chart2d .c2tabs{position:absolute;left:139px;right:139px;top:232px;display:flex;justify-content:space-between;align-items:center}   /* chart edges; 34px above the first grid line */
.tg{display:inline-flex;padding:2px;gap:2px;border:1px solid rgba(217,217,217,.1);background:#141414}
.tg button{padding:5px 10px;font:500 13px/18px var(--sans);letter-spacing:-.4px;color:rgba(255,255,255,.6)}
.tg button.on{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 8px rgba(255,255,255,.1)}
.tg button:hover{color:#fff}
#chart2d .c2h .h2{width:auto;white-space:nowrap}
#chart2d .c2{translate:0 36px}   /* centre the chart in the part of the viewport below the floating header (60px) */
/* charge: energy rising through every bar (staggered), brighter in the PrimaLabs bars */
@keyframes plCharge{0%{transform:translateY(0)}72%,100%{transform:translateY(-270%)}}
#chart2d .bar .en{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#chart2d .bar .en::before{content:"";position:absolute;left:0;right:0;height:60%;bottom:-60%;
  background:linear-gradient(0deg,transparent,rgba(255,255,255,.06) 30%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.06) 70%,transparent);
  animation:plCharge 1.7s cubic-bezier(.45,0,.3,1) 1 both;animation-delay:calc(var(--i) * 55ms + 900ms)}   /* once, as the bars finish rising */
#chart2d .bar.b0 .en::before{background:linear-gradient(0deg,transparent,rgba(255,255,255,.18) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.18) 70%,transparent)}
/* the PrimaLabs bar: its colour drifts (Prism) and a soft energy of the neighbouring hue flows up inside it */
@keyframes plFlow{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(-240%);opacity:0}}
#chart2d .bar.b0 .en::after{content:"";position:absolute;left:0;right:0;height:70%;bottom:-70%;
  background:linear-gradient(0deg,transparent,color-mix(in srgb,var(--acc2,#ffb36b) 70%,transparent) 45%,color-mix(in srgb,var(--acc2,#ffb36b) 55%,#fff) 52%,color-mix(in srgb,var(--acc2,#ffb36b) 70%,transparent) 60%,transparent);
  mix-blend-mode:screen;opacity:0;animation:plFlow90 3.8s ease-in-out 2.4s infinite}   /* after the glint on appearance, the inner flow is barely there (10%) */
@keyframes plFlow90{0%{transform:translateY(0);opacity:0}15%{opacity:.1}85%{opacity:.1}100%{transform:translateY(-240%);opacity:0}}
#chart2d .bar span{position:relative;z-index:1}
#chart2d:not(.in) .bar .en{display:none}
#chart2d .c2v{transition:opacity .6s}
#chart2d.in .c2v{opacity:1!important}   /* once the chart is up, nothing of the hero shows through behind it */
#chart2d .c2p{position:absolute;inset:0;transform-origin:50% 72%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
#chart2d .c2:not(.s-nm) .nm,#chart2d .c2:not(.s-mm) .mm,#chart2d .c2:not(.s-ds) .ds{display:none!important}
#chart2d .c2.s-mm .c2lg:not(.mm){display:none!important}
#chart2d .mv{position:absolute;width:58px;text-align:center;font:400 15px/1 var(--sans);font-style:normal;letter-spacing:-.15px;opacity:0;transition:opacity .5s calc(var(--i) * 55ms + 650ms)}
#chart2d .pv{top:561px}
#chart2d .pv[alt="Makora"],#chart2d .pv[alt="DigitalOcean"]{scale:.95}   /* 4px more room between the bars and the icons */
#chart2d .pl{position:absolute;top:561px;width:200px;height:22px;display:flex;align-items:center;justify-content:center;gap:2px;opacity:0;transition:opacity .6s calc(var(--i) * 55ms + 500ms)}
#chart2d .pl img{display:block}
#chart2d .pl b{font:400 13px/22px var(--sans);letter-spacing:-.3px;opacity:.6}
#chart2d .pl.us b{opacity:1}   /* PrimaLabs in white */
#chart2d.in .mv,#chart2d.in .pl{opacity:1}
#chart2d .c2lg{display:flex;align-items:center;gap:18px;font:400 13px/18px var(--sans);letter-spacing:-.3px;color:rgba(255,255,255,.65)}
#chart2d .c2lg span{display:flex;align-items:center;gap:7px}
#chart2d .c2lg i{display:block;width:9px;height:9px;background:var(--acc)}
/* series shades (MiMo): lighter → darker, like the Artificial Analysis chart */
#chart2d .bar.mm{--sh:1}
#chart2d .bar.mm.s0:not(.b0){--sh:2.1}#chart2d .bar.mm.s1:not(.b0){--sh:1.6}#chart2d .bar.mm.s2:not(.b0){--sh:1.25}
#chart2d .bar.mm.b0.s1,#chart2d .c2lg i.s1{--sh:.8}#chart2d .bar.mm.b0.s2,#chart2d .c2lg i.s2{--sh:.62}#chart2d .bar.mm.b0.s3,#chart2d .c2lg i.s3{--sh:.46}
#chart2d .bar.mm,#chart2d .c2lg i{filter:brightness(var(--sh,1))}

/* ---- the bars: FROST — frosted, opaque, faint cube faces ---- */
#chart2d .bar{--bc:#1c1c1c}
#chart2d .bar.b0{--bc:var(--acc)}
/* Prism on the PrimaLabs bar: one colour, drifting with --acc (the energy inside runs in --acc2) */
/* side + top faces: an oblique view, depth 8px right and 5.6px up */
#chart2d .bar::before{
  content:"";position:absolute;left:calc(100% + 1px);top:-1px;height:calc(100% + 2px);width:8px;transform-origin:0 0;transform:skewY(-35deg);box-sizing:border-box}
#chart2d .bar::after{
  content:"";position:absolute;left:-1px;bottom:calc(100% + 1px);width:calc(100% + 2px);height:5.6px;transform-origin:0 100%;transform:skewX(-55deg);box-sizing:border-box}
#chart2d .bar{background:linear-gradient(180deg,#262626,#202020);border:1px solid rgba(255,255,255,.07);box-shadow:inset 0 0 8px rgba(255,255,255,.1)}   /* frosted, opaque: no backdrop-filter (it flickered) */
#chart2d .bar::before{background:#171717;border:1px solid rgba(255,255,255,.045);border-left:0}   /* faces can't blur the page (the bar is their backdrop root): solid, in the frosted tones */
#chart2d .bar::after{background:#2a2a2a;border:1px solid rgba(255,255,255,.07)}
#chart2d .bar.b0{background:color-mix(in srgb,var(--bc) 82%,#151515);border-color:color-mix(in srgb,var(--bc) 60%,transparent)}
#chart2d .bar.b0::before{background:color-mix(in srgb,var(--bc) 55%,#0d0d0d);border-color:color-mix(in srgb,var(--bc) 30%,transparent)}
#chart2d .bar.b0::after{background:color-mix(in srgb,var(--bc) 80%,#fff 15%);border-color:color-mix(in srgb,var(--bc) 40%,transparent)}

/* why it's fast = the Measure block (3D right, steps on a 7 s timer or a click), the three points as its steps */
#measure .ms.on p{max-height:150px}
#measure .ms:last-child .mb{background:rgba(217,217,217,.2)}   /* the last step's progress bar needs its grey track too */

#measure .lnk{display:inline-flex;gap:6px;align-items:center;margin-left:6px;opacity:1}

/* two ways to run (Figma 153:559): Serverless API / Dedicated cards with canvas illustrations (Serverless first) */
#traffic .thd h2{width:612px}
#traffic .dgrid{margin-top:56px;display:grid;grid-template-columns:576px 574px;gap:12px}
#traffic .dcard{height:473px}
#traffic .dcard canvas{position:absolute;left:0;top:0;width:100%;height:284px;display:block;z-index:1}
#traffic .dcard .dt{position:absolute;left:19px;top:284px;z-index:2;display:flex;flex-direction:column;align-items:flex-start}
#traffic .dcard .dt p{margin-top:12px}
#traffic .dcard .btn{gap:5px;width:230px;min-width:230px;justify-content:center}

/* team (Figma 153:701) */
#team .gmb{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px;font:500 15px/24px var(--sans);letter-spacing:-.6px}
#team .gmb img{display:block;width:20px;height:20px}
#team .h2{width:519px}
#team .row{align-items:flex-start}
#team .vl{height:396px}
#team .logos.tlg{display:block;position:relative;width:883px;height:52.091px}
#team .logos.tlg{opacity:1}
#team .logos.tlg a{position:absolute;display:block;opacity:.32;transition:opacity .3s,filter .3s}
#team .logos.tlg a img{display:block;width:100%;height:100%}
#team .logos.tlg a:hover{opacity:1;filter:brightness(0) invert(1) drop-shadow(0 0 6px rgba(255,255,255,.55)) drop-shadow(0 0 16px rgba(255,255,255,.25))}

/* final CTA (Figma 153:832) */
#ctasec .sub{width:391px}
#ctasec .ctab{display:inline-flex;gap:8px;padding:5px}   /* 6px all round with the border */
#ctasec .ctab .btn.w{padding:7px 12px}
#ctasec .ctab .btn.g{border:1px solid rgba(255,255,255,.05);box-shadow:inset 0 0 8px rgba(255,255,255,.1);padding:6px 12px;letter-spacing:-.75px}

/* footer: our columns, the full-width logo (Figma 155:877) instead of the text wordmark */
#foot{box-shadow:inset 0 0 8px rgba(255,255,255,.1)}   /* micro glow along the edges (Figma 112:22602) */
#foot .flogo{position:absolute;left:11px;top:0;width:1162px;height:531px;pointer-events:none}
#foot .flogo img{position:absolute;left:0;top:350.48px;width:1162px;height:180.52px;display:block}   /* 663 × 103 logo across the column, on the frame's bottom */
#foot .flogo>img{opacity:1}   /* white; the hover glow copy adds the halo around the cursor */
/* footer logo hover: the letters around the cursor light up — a white glow layer masked to a soft circle at the cursor */
#foot .flogo .fglow{position:absolute;inset:-120px;opacity:0;transition:opacity .4s;filter:drop-shadow(0 0 6px rgba(255,255,255,.9)) drop-shadow(0 0 22px rgba(255,255,255,.55));
  -webkit-mask:radial-gradient(220px circle at var(--mx,-999px) var(--my,-999px),#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);mask:radial-gradient(220px circle at var(--mx,-999px) var(--my,-999px),#000 0%,rgba(0,0,0,.55) 45%,transparent 100%)}
#foot .flogo.on .fglow{opacity:1}
#foot .flogo .fgin{position:absolute;left:120px;top:120px;width:1162px;height:531px}

/* ---------- hero copy, logo size, block spacing, founders ---------- */
html:not(.mob) #chart2d .c2f{left:139px;width:1162px}   /* the caption on the chart's left edge, with the toggles and the grid lines */
/* white buttons: a wider ring that fades out before its own edge (the 8 px ring cut the glow off), and dimmer */
.btn.w.hov::before{inset:-24px;padding:24px;
  background:radial-gradient(26px circle at calc(var(--mx,50%) + 24px) calc(var(--my,50%) + 24px),rgba(255,255,255,.2),rgba(255,255,255,.08) 35%,rgba(255,255,255,.02) 70%,transparent 100%)}
.hd .lg .lgw,.hd .lg .lgw img{width:120.37px;height:18.7px}   /* +10 % */
/* the hero copy layer (#stage: heading, lead, buttons) sits 30 % of its ~84 px offset lower, all at once, so the buttons'
   baseline alignment holds; the dark wash reaches back up over the header band so the moved layer leaves no step */
html:not(.mob) #stage{top:calc(25.2px * var(--s, 1))}   /* 30 % of the copy's ~84 px offset */
html:not(.mob) #stage::before{top:-600px;height:1030px;
  background:linear-gradient(180deg,rgba(20,20,20,.92) 0,rgba(20,20,20,.92) 600px,rgba(20,20,20,.82) 750px,rgba(20,20,20,.55) 850px,rgba(20,20,20,0) 1030px)}
/* the same gap (200 px × --sp) from block to block: Self-driving is one screen tall and centres its content, so the blocks
   on either side take the room it leaves above and below its content (--mroom) off their own padding (it was 168 above,
   252 below at 1440 × 900); the team block's 174 goes to 200 too */
html:not(.mob){--mroom:calc((100vh / var(--s, 1) - min(740px, 100vh / var(--s, 1) - 128px)) / 2)}
html:not(.mob) #adapt{padding-bottom:max(0px, calc(200px * var(--sp) - var(--mroom)))}
html:not(.mob) #traffic{padding-top:max(0px, calc(200px * var(--sp) - var(--mroom)));padding-bottom:calc(200px * var(--sp))}
html:not(.mob) #team{padding-bottom:calc(200px * var(--sp))}
/* founders: "Learn more" in the bio opens the details under both */
#team .row{align-items:stretch}
#team .vl{height:auto;min-height:396px}
#team .fd .sub{opacity:1;color:rgba(255,255,255,.7)}
#team .lm{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
#team .lm{transition:text-shadow .25s}
#team .lm:hover{text-shadow:0 0 10px rgba(255,255,255,.55),0 0 2px rgba(255,255,255,.6)}   /* lights up like the header links */
#team .fdx{width:360px;margin-left:calc(50% - 180px);display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1),opacity .35s}
#team.lmo .fdx{grid-template-rows:1fr;opacity:1;transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1),opacity .5s .1s}
#team .fdx>div{overflow:hidden;min-height:0}
#team .fdx ul{margin:24px 0 0;padding:0;list-style:none;text-align:left}   /* the box is the list's own width, centred on the column, so the reveal clips nothing sideways */
#team .fdx li{position:relative;padding:12px 0 12px 20px;border-top:1px solid rgba(217,217,217,.1);font:400 15px/24px var(--sans);letter-spacing:-.6px;color:rgba(255,255,255,.7)}
#team .fdx li::before{content:"–";position:absolute;left:0;top:12px;color:rgba(255,255,255,.35)}
html.mob #team .fdx{width:auto;max-width:360px;margin-left:auto;margin-right:auto}

/* PrimaLabs landing — the phone / tablet layer (under 1024 px; html.mob is set by js/mobile.js) */
@media (min-width:1024px){.c2m,.hd .act .mbtn{display:none}}
#adapt .adrw{position:absolute;inset:0}   /* card 2's drawing box = the card's padding box, so the labels and the triangle keep their card coordinates */
@media (max-width:1023px){
:root{--gut:20px}
@media (min-width:768px){:root{--gut:32px}}
html,body{overflow-x:clip}
.wrap{width:min(calc(100% - 2 * var(--gut)),680px);margin:0 auto}

/* type scale: phone / tablet */
.h2{font-size:32px;line-height:36px;letter-spacing:-.32px}
.h3{font-size:22px;line-height:26px;letter-spacing:-.22px}
.sub{font-size:16px;line-height:24px;letter-spacing:-.3px}
.btn{min-height:44px;padding:10px 16px;font-size:15px;line-height:22px;letter-spacing:-.45px}
.btn.term{height:auto}
.btn img{flex:none}
@media (min-width:768px){.h2{font-size:40px;line-height:44px;letter-spacing:-.4px}.h3{font-size:24px;line-height:28px}}
.h2 br{display:none}
@media (min-width:768px){.h2 br{display:inline}}
#chart2d .c2h .h2 br{display:none}   /* '… for DeepSeek V4 Flash.' no longer fits a line at 40 px: let it wrap */
#chart2d .c2h .h2 #c2model{white-space:nowrap}   /* never 'MiMo-' / 'V2.6-Pro.' across two lines */
.h1,.h2,.h2b{text-wrap:balance}

/* ---------- header: logo left, the three icon actions + Menu right; the floating bar is a full-width top bar ---------- */
.hdr{width:100%!important;height:56px}
.hd{left:var(--gut)!important;top:12px!important;width:calc(100% - 2 * var(--gut))!important;height:44px!important}
.hd.cmp{left:0!important;top:0!important;width:100%!important;height:56px!important;border-width:0 0 1px}
.hd .lg{left:0!important;top:calc(50% - 22px)!important;height:44px!important}
.hd.cmp .lg{left:var(--gut)!important}
.hd .act{right:-6px!important;top:calc(50% - 22px)!important;gap:4px!important}
@media (max-width:374px){.hd .act{gap:0!important}}
.hd.cmp .act{right:calc(var(--gut) - 6px)!important}
.hd .act a{gap:0!important;padding:6px;max-width:none!important;opacity:1!important;margin:0!important;overflow:visible!important;pointer-events:auto!important;transition:none}
.hd .act span{display:none}
.hd .act b{width:32px!important;height:32px!important}
.hd.cmp .act a::after{display:none}
.hd .act .mbtn b{width:auto!important;padding:0 10px;font:500 14px/30px var(--sans);letter-spacing:-.2px;color:#fff;text-transform:none}
.hd .act .mbtn b::before,.hd .act .mbtn b::after{display:none}
@media (max-width:374px){.hd .act .mbtn b{padding:0 8px}}   /* 360: a little more air between the wordmark and the first icon */
.hd .act .mbtn.open b{background:#fff;color:#000}
/* the menu: a panel under the header with Product · Team · Blogs · Docs */
.hd nav{display:none;position:absolute;left:-1px!important;right:-1px;top:calc(100% + 8px)!important;flex-direction:column;gap:0;padding:4px var(--gut) 8px;
  background:#161616;border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 0 8px rgba(255,255,255,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font:400 17px/48px var(--sans);letter-spacing:-.3px;white-space:normal;transition:none}
.hd.cmp nav{left:0!important;right:0;top:100%!important;border-width:0 0 1px;margin-top:-1px}
.hd nav.open{display:flex}
.hd nav a{display:block;line-height:48px;border-top:1px solid rgba(255,255,255,.06);animation:none!important}
.mscrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);pointer-events:auto}
.mscrim.open{display:block}
html.menu-open #stage .hbtn{visibility:hidden}   /* the white hero button would show as a bright sliver under the panel in landscape */
.hd nav a:first-child{border-top:0}

/* ---------- hero: the copy in normal flow over the city, under a taller dark gradient ---------- */
#stage{width:100%!important;height:auto!important;transform:none!important;padding:88px var(--gut) 0;display:block}
#stage .a{position:static!important;left:auto!important;top:auto!important;width:auto!important;max-width:680px;margin-left:auto;margin-right:auto}
.h1{font-size:clamp(36px,10.4vw,44px)!important;line-height:1.05;letter-spacing:-.4px;white-space:normal}
.h1 br{display:none}
.lead{white-space:normal;font-size:16px;line-height:24px;letter-spacing:-.3px;margin-top:20px}
.lead br{display:none}
.hbtn{display:flex;gap:8px;margin-top:28px}
.hbtn .btn{flex:1 1 0;min-height:44px}
.hbtn .btn.term{height:auto;padding:10px 12px 10px 14px}
#stage::before{height:min(74vh,640px);height:min(74svh,640px);
  background:linear-gradient(180deg,rgba(20,20,20,.94) 0,rgba(20,20,20,.9) 42%,rgba(20,20,20,.55) 72%,rgba(20,20,20,0) 100%)}
@media (min-width:768px){
  #stage{padding-top:104px}
  .h1{font-size:52px!important;letter-spacing:-.52px}
  .h1 br{display:inline}
  .lead{font-size:17px;line-height:26px;letter-spacing:-.5px;max-width:521px;margin-top:24px}
  .lead br{display:inline}
  .hbtn .btn{flex:0 0 auto;min-width:168px}}
@media (max-height:520px){
  #stage{padding-top:64px}
  .h1{font-size:32px!important}
  .lead{font-size:14px;line-height:20px;margin-top:12px;max-width:520px}
  .lead br{display:none}
  .hbtn{margin-top:16px}
  #stage::before{height:100%}}
#fly{height:160vh;height:160svh}

/* ---------- charts: a normal block; the bars become rows (icon · name · bar · value) built from the same data ---------- */
#chart2d{height:auto;margin-top:-100vh;margin-top:-100svh}
#chart2d .c2s{position:relative;height:auto;min-height:100vh;min-height:100svh;display:block;padding:104px 0 72px}
#chart2d .c2v{background:var(--bg,#151515)}   /* same colour as the sections that follow: no black band and no step after the chart */
#chart2d .c2{width:min(calc(100% - 2 * var(--gut)),680px);height:auto;margin:0 auto;translate:none;display:flex;flex-direction:column}
#chart2d .c2p{display:none}
#chart2d .c2h{position:static;text-align:left;order:1}
#chart2d .c2h .h2{width:auto;white-space:normal}
#chart2d .c2h .sub{width:auto;margin:16px 0 0}
#chart2d .c2tabs{position:static;order:2;flex-direction:column;align-items:stretch;gap:14px;margin-top:28px}
.tg{display:flex;width:100%}
.tg button{flex:1;padding:11px 8px;min-height:44px;font-size:14px;line-height:20px}
#chart2d .c2lg{flex-wrap:wrap;gap:8px 16px;font-size:14px;line-height:20px}
#chart2d .c2m{order:3;margin-top:24px}
#chart2d .c2f{position:static;width:auto;order:4;flex-direction:column;align-items:flex-start;gap:20px;margin-top:36px}
#chart2d .c2t{font-size:18px;line-height:24px}
#chart2d .c2f .sub{margin-top:8px}
#chart2d .c2f>img{width:180px;height:auto}
.c2m .mrow{display:grid;grid-template-columns:18px 92px minmax(0,1fr) 40px;align-items:center;gap:10px;height:26px;margin-top:6px;font:400 14px/1 var(--sans);letter-spacing:-.2px}
.c2m.nm .mrow,.c2m.mm .mrow,.c2m.ds .mrow{grid-template-columns:18px minmax(148px,46%) minmax(0,1fr) 42px}
.c2m .mrow img{width:18px;height:18px;object-fit:contain;display:block}
.c2m .mrow .mn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.65}
.c2m .mrow.us .mn{opacity:1}
.c2m .mbar{--bc:#1c1c1c;position:relative;display:block;height:18px;width:var(--w);background:linear-gradient(180deg,#262626,#202020);border:1px solid rgba(255,255,255,.07);box-shadow:inset 0 0 8px rgba(255,255,255,.1);
  transform-origin:0 50%;scale:0 1;transition:scale .9s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 45ms + 150ms);filter:brightness(var(--sh,1))}
.c2m .mrow.us .mbar{--bc:var(--acc);background:var(--bc);border-color:var(--bc);background:color-mix(in srgb,var(--bc) 82%,#151515);border-color:color-mix(in srgb,var(--bc) 60%,transparent);box-shadow:inset 0 0 8px rgba(255,255,255,.35)}
#chart2d.in .c2m .mbar{scale:1 1}
.c2m .mval{text-align:right;opacity:0;transition:opacity .5s calc(var(--i) * 45ms + 600ms);font-variant-numeric:tabular-nums}
#chart2d.in .c2m .mval{opacity:1}
.c2m .mg{display:flex;align-items:center;gap:8px;margin-top:22px;font:400 14px/20px var(--sans);letter-spacing:-.2px;opacity:.65}
.c2m .mg:first-child{margin-top:0}
.c2m .mg.us{opacity:1}
.c2m .mg img{display:block;width:18px;height:18px;object-fit:contain}
.c2m.mm .mrow.s0:not(.us) .mbar{--sh:2.1}.c2m.mm .mrow.s1:not(.us) .mbar{--sh:1.6}.c2m.mm .mrow.s2:not(.us) .mbar{--sh:1.25}
.c2m.mm .mrow.us.s1 .mbar{--sh:.8}.c2m.mm .mrow.us.s2 .mbar{--sh:.62}.c2m.mm .mrow.us.s3 .mbar{--sh:.46}

/* ---------- how it adapts: the three cards stacked; card 2 keeps its 380 × 404 drawing, zoomed to the column ---------- */
#adapt{padding-top:88px;padding-bottom:88px}
#adapt .ahd{flex-direction:column;align-items:flex-start;gap:24px}
#adapt .agrid{margin-top:32px;display:flex;flex-direction:column;gap:12px}
#adapt .acard{height:auto;padding:19px}
#adapt .aht{position:static;white-space:normal;padding-right:44px}
#adapt .anum{left:auto;right:17px;top:17px}
#adapt .adiv{position:static;display:block;margin:15px -19px 0;width:auto}
#adapt .aopts{position:static;width:auto;margin-top:19px}
#adapt .aopt.btn{min-height:72px}
#adapt .ad{position:static;width:auto;margin-top:16px}
@media (max-width:767px){#adapt .ad{min-height:48px}}   /* phones: two lines reserved (16/24 px) so card 1 keeps one height across the picks and cards 2/3 don't hop; the 680 px tablet column never wraps */
#adapt .acard.az{height:calc(404px * var(--cz,1))}
#adapt .adrw{left:50%;right:auto;top:0;bottom:auto;width:380px;height:404px;margin-left:-190px;zoom:var(--cz,1);pointer-events:none}
#adapt .adrw .alab{font-size:calc(15px / var(--cz,1));line-height:calc(22px / var(--cz,1));width:auto!important;margin-left:0!important;white-space:nowrap}
#adapt .adrw .alab:first-child{translate:-50% 0}
#adapt .apan{position:relative;left:auto;top:auto;margin:19px auto 0;zoom:var(--pz,1)}
#adapt .aot{width:300px;margin-left:-150px;font-size:calc(15px / var(--pz,1));line-height:calc(22px / var(--pz,1))}
#adapt .alnk{position:static;margin-top:16px;min-height:44px}
/* the spark canvas .afx stays (absolute over the whole stacked grid): v2's route() turns the run 90° when the cards are stacked; it
   overhangs the grid by the 20 px gutter a side, room for the 17 px halo where the route runs on the grid's outer outlines (v2 shifts its drawing by the overhang) */
#adapt .afx{left:-20px;width:calc(100% + 40px)}

/* ---------- measured before it ships: heading, steps, then the 3D frame ---------- */
#measure{height:auto;padding:88px 0}
#measure .msticky{position:static;height:auto;display:block;padding:0}
#measure .mw{display:flex;flex-direction:column;height:auto;gap:40px}
#measure .ml{display:block}
#measure .ml>div>.sub{width:auto;margin-top:16px}
#measure .msteps{width:auto;margin-top:36px}
#measure .ms p{width:auto}
#measure .ms.on p{max-height:140px}
#measure .mb{width:100%}
#measure .lnk{padding:10px 0;margin:-10px 0 -10px 6px}
#measure .mr{width:min(100%,calc(60vh * 574 / 740));width:min(100%,calc(60svh * 574 / 740));aspect-ratio:574/740;margin:0 auto}
@media (max-height:520px){   /* landscape phones: the steps and the frame side by side (a 60svh frame would be a 180 px stamp) */
  #measure .mw{flex-direction:row;align-items:flex-start;gap:32px}
  #measure .ml{flex:1 1 0;min-width:0}
  #measure .msteps{margin-top:28px}
  #measure .mr{flex:0 0 46%;width:auto;margin:0;position:sticky;top:72px;align-self:flex-start}}   /* the frame stays in view while the steps scroll */

/* ---------- two ways to run: the deploy cards stacked, their canvases 220 px tall ---------- */
#traffic{padding:88px 0}
#traffic .thd{flex-direction:column;align-items:flex-start;gap:24px}
#traffic .thd h2{width:auto}
#traffic .thd .sub{width:auto;margin-top:16px}
#traffic .dgrid{margin-top:32px;display:flex;flex-direction:column;gap:12px}
#traffic .dcard{height:auto}
#traffic .dcard canvas{position:relative;height:220px}
#traffic .dcard .dt{position:static;padding:4px 19px 24px}
#traffic .dcard .dt p{width:auto!important}
#traffic .dcard .dt .btn{margin-top:24px!important;width:240px;min-width:240px}

/* ---------- team: founders stacked, the "built at" logos as a 3 × 2 grid ---------- */
#team{padding-bottom:88px}
#team .hd2,#team .h2{width:auto}
#team .row{margin-top:48px;flex-direction:column;gap:40px;width:auto;align-items:stretch}
#team .vl{display:none}
#team .fd{width:100%!important;gap:20px}
#team .ph{width:120px;height:120px}
#team .ph img{width:108px;height:108px}
#team .role{font-size:14px}
#team .fd .sub{width:auto!important;max-width:380px;margin:12px auto 0!important}
#team .from{margin:56px auto 0;width:auto}
#team .logos.tlg{width:100%;height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px 20px;align-items:center;margin-top:24px}
#team .logos.tlg a{position:static!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;min-height:52px;display:flex;align-items:center;justify-content:center}
#team .logos.tlg a img{width:auto;height:calc(var(--lh,30px) * .82);max-width:100%;object-fit:contain}
@media (min-width:768px){#team .logos.tlg{grid-template-columns:repeat(6,1fr);gap:16px}#team .logos.tlg a img{height:calc(var(--lh,30px) * .9)}}

/* ---------- blog: one column ---------- */
#blog{padding-bottom:88px}
#blog .top{flex-direction:column;align-items:flex-start;gap:24px}
#blog .top .sub{width:auto;margin-top:16px}
#blog .posts{margin-top:32px;grid-template-columns:1fr;gap:16px}
.post .pb{width:auto;align-self:stretch;padding:0 12px}
.post .pt .sub{width:auto}
.post .meta{flex-wrap:wrap;gap:8px 16px;font-size:14px}

/* ---------- final CTA: heading 36, the buttons stacked, the background strings centred under them ---------- */
#ctasec{height:auto;padding:88px 0 80px;overflow:hidden}
#ctasec .h2b{width:auto;font-size:36px;line-height:40px;letter-spacing:-.36px}
#ctasec .sub{width:auto;max-width:460px;margin:16px auto 0}
#ctasec .ctab{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:28px;padding:6px}
#ctasec .btn{height:auto;min-height:44px;width:100%}
#ctasec .ctabg{width:3456px;height:1069px;margin-left:-1728px;top:-430px}   /* 80% of the desktop artwork: the receding lines keep their desktop scale on a phone */
@media (min-width:768px){#ctasec .h2b{font-size:48px;line-height:52px}#ctasec .ctab{flex-direction:row;width:auto;display:inline-flex}#ctasec .btn{width:auto;min-width:200px}#ctasec .ctabg{top:-380px}}
@media (hover:none){#ctasec .ctafx{display:none}}

/* ---------- footer: in normal flow — tagline + View Docs, three link columns, the logo across, legal ---------- */
#foot{height:auto;padding:56px 0 0}
#foot .fw{position:relative;left:auto;top:auto;width:min(calc(100% - 2 * var(--gut)),680px);height:auto;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:40px 16px}
#foot .ftag{position:static;width:auto;grid-column:1 / -1}
#foot .ftag p{font-size:16px;line-height:24px}
#foot .ftag .btn{margin-top:20px}
#foot .fcol{position:static!important;left:auto!important;gap:0}
#foot .fcol a{line-height:44px}
#foot .flogo{position:relative;left:auto;top:auto;width:100%;height:auto;grid-column:1 / -1;order:2;margin-top:8px}
#foot .flogo>img{position:static;width:100%;height:auto}
#foot .flogo .fglow{display:none}
#foot .fbot{position:static;width:auto;grid-column:1 / -1;order:3;flex-direction:column;align-items:flex-start;gap:8px;font-size:13px}
#foot .fl{flex-wrap:wrap;gap:0 20px}
#foot .fl a{line-height:26px}   /* the two legal rows pressed together */
#foot .fbot{margin-top:-24px}   /* the address right under the logo (16 px, not the grid's 40) */
#flines{position:relative;top:auto;height:120px;margin-top:8px}   /* the lines start just under the last legal row */
}

/* ---------- touch: no hover-only effect may stick after a tap ---------- */
@media (hover:none){
.hov:hover::after{opacity:0}
.btn.g.hov:hover::before,.btn.w.hov:hover::before,.btn.g.hov:hover::after,.btn.w.hov:hover::after{opacity:0}
.card:hover::before{opacity:0}
.hd nav a:hover{opacity:1;color:rgba(255,255,255,.86);text-shadow:none}
.hd .act a:hover b::after,.hd .act a:hover b::before{opacity:0}
.hd .act a:hover span{opacity:1}
.hd.cmp .act a:hover::after{opacity:0;translate:-50% -3px}
.post:hover .meta .rd{color:rgba(255,255,255,.86);text-shadow:none}
.post:hover .meta .rd img{filter:none;translate:0 0}
#team .logos.tlg a:hover{opacity:.32;filter:none}
#adapt .alnk:hover{color:rgba(255,255,255,.86);text-shadow:none}
#adapt .alnk:hover img{filter:none}
#measure .ms:not(.on):hover .h3{opacity:1}
#foot nav a:hover,#foot .fl a:hover{opacity:1}
#foot .flogo.on .fglow{opacity:0}
.tg button:hover{color:rgba(255,255,255,.6)}
.tg button.on:hover{color:#fff}
}


/* homepage overrides. The header stays on the design's nav line; these rules only
   give the longer label room and pin the traffic-card buttons to one line. */
/* keep the app's global section / .wrap rules off the landing */
html.pl-design section{padding:0}
html.pl-design .sec .wrap{max-width:none;padding-left:0;padding-right:0}
html.pl-design,html.pl-design body{text-rendering:auto}
/* <b> labels render at 600, as in the design */
html.pl-design #adapt .alab b,html.pl-design #chart2d .mg b,html.pl-design .hd .mbtn b{font-weight:600}
/* chart description stays two lines without closing the gap to the model tabs */
#chart2d .c2h{top:37px}
#chart2d .c2h .sub{text-wrap:balance}
@media (min-width:1024px){
  .hd .act span{max-width:200px}
  #traffic .dcard .dt{bottom:20px}
  #traffic .dcard .dt .btn{margin-top:auto!important}
}
#chart2d .prec{position:absolute;top:588px;width:72px;text-align:center;font:400 11px/14px var(--sans);letter-spacing:0;color:rgba(255,255,255,.55);opacity:0;transition:opacity .6s calc(var(--i) * 55ms + 500ms);pointer-events:none}
#chart2d.in .prec{opacity:1}
#chart2d .c2f a.sub{display:inline-block;text-decoration:underline;text-underline-offset:3px}
#chart2d .c2h a{color:inherit}
html.pl-design,html.pl-design body{background:#000!important;background-image:none!important;color:#fff}
html.pl-design img,html.pl-design svg{max-width:none}