/* Gridbuild landing. The film shows how it works; everything below says only what the film doesn't.
   Off-white ground, ink type, and colour only for status: amber is work in progress,
   green is passed, purple is the AI engineer, its proof and the pull request.
   One idea per screen; huge statements against small labels. */
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-latin.woff2") format("woff2");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
}
:root{
  --ground:#F7F7F5;
  --raise:#FFFFFF;
  --raise2:#F1F1EE;
  --line:#E6E6E1;
  --line2:#D3D3CC;
  --dash:#B4B4AC;
  --text:#0E1116;
  --quiet:#4E5561;
  --dim:#656B78;
  --run:#F5A524;
  --run-text:#8F5300;
  --pass:#2DA44E;
  --pass-text:#17723A;
  --merged:#8250DF;
  --merged-text:#6639BA;
  --merged-tint:#F3EEFC;
  --merged-edge:#D9C9F7;
  --danger:#CF222E;
  --lit:#F5A524;
  --lit-text:#8F5300;
  --lit-tint:#FFF4DC;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --code:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1240px;
  --gut:clamp(20px,4vw,48px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--sans);font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;caret-color:var(--merged)}
::selection{background:var(--merged-tint);color:var(--merged-text)}
h1,h2,h3,p,ol,ul,figure,dl,dd,pre{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--merged);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;top:12px;z-index:20;background:var(--text);color:#fff;padding:8px 14px;border-radius:8px}
.skip:focus{left:16px}
.mono{font-family:var(--code);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[data-todo]{outline:2px dashed var(--danger);outline-offset:3px;border-radius:4px}

/* type */
.stmt,.h2{text-wrap:balance;font-weight:760;font-stretch:110%;font-size:clamp(36px,4.9vw,72px);line-height:1.02;letter-spacing:-.03em;max-width:15ch}
.h2{font-size:clamp(32px,3.8vw,52px)}
.sub{text-wrap:pretty;font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--quiet);max-width:40ch;margin-top:24px}
.aside{font-size:15px;line-height:1.55;color:var(--dim);max-width:52ch;margin-top:20px}
.cap{font-size:14px;line-height:1.5;color:var(--dim);margin-top:18px;max-width:52ch}
.label{display:inline-block;font-family:var(--code);font-size:.82em;font-weight:600;line-height:1;padding:.28em .55em;border-radius:999px;vertical-align:.08em}
.label.bot{background:var(--merged-tint);color:var(--merged-text);box-shadow:inset 0 0 0 1px var(--merged-edge)}
.ad{color:var(--pass-text);font-style:normal}
.rm{color:var(--danger);font-style:normal}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--text);color:#fff;text-decoration:none;font:inherit;font-weight:650;font-size:17px;line-height:1;padding:17px 24px;border:0;border-radius:10px;white-space:nowrap;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.btn:hover{background:#2A2F38;transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.6;cursor:progress;transform:none}
.btn-sm{font-size:15px;padding:11px 16px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:760;font-stretch:112%;font-size:20px;letter-spacing:-.02em;text-decoration:none}
.mark{width:20px;height:20px;flex:none}
.mark rect{fill:var(--line2)}
.mark rect.on{fill:var(--merged)}
.nav{display:flex;align-items:center;gap:28px;font-size:15px}
.nav .link{text-decoration:none;color:var(--quiet);transition:color .2s}
.nav .link:hover{color:var(--text)}
@media (max-width:860px){.nav .link{display:none}}

/* hero */
.hero{padding-block:44px 0}
.hero h1{text-wrap:balance;font-weight:780;font-stretch:112%;font-size:clamp(42px,5.3vw,78px);line-height:.99;letter-spacing:-.033em;max-width:24ch}
.hero-act{display:grid;gap:24px;margin-top:28px}
.lede{text-wrap:pretty;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--quiet);max-width:40ch}
.after{margin-top:4px;font-size:15px;color:var(--dim)}
@media (min-width:1040px){
  .hero{padding-top:52px}
  .hero-act{grid-template-columns:1fr 1fr;gap:72px;align-items:end;margin-top:32px}
}
.signup{display:flex;flex-wrap:wrap;gap:10px;max-width:540px}
.signup input{flex:1 1 230px;min-width:0;font:inherit;font-size:17px;color:var(--text);background:var(--raise);border:1px solid var(--line2);border-radius:10px;padding:15px 16px;transition:border-color .2s,box-shadow .2s}
.signup input::placeholder{color:var(--dim)}
.signup input:focus{outline:none;border-color:var(--merged);box-shadow:0 0 0 3px var(--merged-tint)}
.signup input[aria-invalid="true"]{border-color:var(--danger)}
.signup .btn{flex:0 0 auto}
.signup .trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.signup-stack{flex-direction:column;max-width:460px}
.signup-stack input{flex:none;width:100%}
.signup-stack .btn{align-self:flex-start}
.status{min-height:1.5em;margin-top:8px;font-size:15px;color:var(--quiet);max-width:52ch}
.status.ok{color:var(--merged-text);font-weight:600}
.status.err{color:var(--danger)}

.film{margin-top:48px}
.frame{position:relative;border-radius:18px;overflow:hidden;background:var(--raise2);box-shadow:0 0 0 1px rgba(14,17,22,.1)}
.frame video{display:block;width:100%;height:auto;aspect-ratio:16/9}
.film-play{position:absolute;left:50%;bottom:4.5%;translate:-50% 0;display:inline-flex;align-items:center;gap:14px;padding:12px 22px 12px 12px;border:0;border-radius:999px;background:var(--text);color:#fff;font:inherit;font-size:17px;font-weight:650;cursor:pointer;box-shadow:0 18px 40px -16px rgba(14,17,22,.6);transition:background .2s var(--ease),scale .25s var(--ease)}
.film-play svg{width:22px;height:22px;padding:13px;box-sizing:content-box;border-radius:50%;background:var(--merged)}
.film-play time{font-size:14px;color:#B9BCC4;font-weight:500}
.film-play:hover{background:#2A2F38;scale:1.03}
.film-play:active{scale:.98}
.film-play[hidden]{display:none}
@media (max-width:640px){
  .film-play{padding:8px;left:auto;right:10px;bottom:10px;translate:none}
  .film-play span,.film-play time{display:none}
  .film-play svg{width:18px;height:18px;padding:12px}
}
.film-cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 32px;margin-top:16px;font-size:14px;line-height:1.5;color:var(--dim)}
.film-cap>span{max-width:80ch}
.film-cap a{color:var(--text);white-space:nowrap}
.traction{margin-top:72px;font-size:clamp(20px,2vw,26px);line-height:1.4;letter-spacing:-.01em;color:var(--quiet);max-width:40ch;text-wrap:pretty}
.traction b{color:var(--text);font-weight:680;font-variant-numeric:tabular-nums}

/* sections below the film: only what the film doesn't show */
.block{padding-block:120px}
.block .stmt{max-width:18ch}
.aside{font-size:15px;line-height:1.55;color:var(--dim);max-width:60ch;margin-top:32px}

.numbers{padding-block:88px 0}
.numbers dl{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.numbers dl>div{padding:28px 24px 0 0}
.numbers dl>div+div{padding-left:24px;border-left:1px solid var(--line)}
.numbers dt{font-size:clamp(40px,5.4vw,76px);font-weight:760;font-stretch:108%;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.numbers dd{margin-top:10px;font-size:17px;color:var(--quiet)}
.numbers .cap{margin-top:20px}
@media (max-width:640px){.numbers dl{grid-template-columns:1fr}.numbers dl>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:24px}}

.faq{display:grid;gap:48px;align-items:start}
@media (min-width:960px){.faq{grid-template-columns:4fr 7fr;gap:88px}}

/* the pre-revamp content sections (system, proof, backlog, lessons, grid, roadmap) */
/* the grid console, in the machines section: the one drawn motion moment. The HTML holds
   the final state; main.js rewinds it and plays the steps once when it scrolls into view,
   unless reduced motion is on. */
.console{position:relative;background:var(--raise);border:1px solid var(--line2);border-radius:16px;overflow:hidden;font-size:14px;line-height:1.4;box-shadow:0 30px 70px -36px rgba(14,17,22,.35),0 2px 6px rgba(14,17,22,.04)}
.c-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--raise2)}
.c-head b{font-size:14px;font-weight:650;font-stretch:108%}
.clocks{display:flex;gap:16px;font-size:12.5px;color:var(--quiet);white-space:nowrap}
.clocks time{color:var(--text);margin-left:4px}
.c-in{padding:14px 18px 12px}
.c-in h3,.c-disp .who{font-size:12px;font-weight:600;color:var(--dim)}
.c-in h3{margin-bottom:4px}
.task{display:grid;grid-template-columns:100px 1fr auto;gap:12px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line)}
.task:first-child{border-top:none}
.task .src{font-size:11.5px;color:var(--quiet);white-space:nowrap}
.task .t{font-size:13.5px}
.task .n{font-size:11.5px;color:var(--lit-text);white-space:nowrap}
.task.dup .t{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--dash)}
.task.dup .n{color:var(--quiet);font-family:var(--sans)}
.c-disp{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin:2px 18px 0;padding:10px 12px;border:1px solid var(--merged-edge);border-radius:10px;background:var(--merged-tint)}
.c-disp .who{color:var(--merged-text)}
.msg,.ts{display:grid}
.msg>.st,.ts>.st{grid-area:1/1;display:flex;align-items:center;gap:8px;visibility:hidden}
.msg>.st:last-child,.ts>.st:last-child{visibility:visible}
.msg{font-size:13.5px}
.c-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;padding:14px 18px}
.tile{--tc:var(--line2);display:grid;gap:8px;align-content:start;padding:12px 12px 13px;border-radius:12px;background:var(--raise);border:1px solid color-mix(in srgb,var(--tc) 50%,var(--line));box-shadow:inset 0 2px 0 color-mix(in srgb,var(--tc) 80%,transparent);transition:border-color .5s var(--ease),box-shadow .5s var(--ease)}
.tile .m b{display:block;font-size:13.5px;font-weight:620}
.tile .m span{display:block;font-size:12px;color:var(--quiet)}
.tile .dv{justify-self:start;font-size:11px;color:var(--quiet);background:var(--raise2);border:1px solid var(--line);border-radius:6px;padding:2px 6px}
.ts{font-size:13px}
.ts .st::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:currentColor}
.ts .st i{font-style:normal;font-family:var(--code);font-size:11.5px;color:var(--quiet);margin-right:2px}
.st.idle,.st.owner{color:var(--quiet)}
.st.idle::before,.st.owner::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--dash)}
.st.work{color:var(--lit-text)}
.st.work::before{background:var(--lit)}
.st.join{color:var(--text)}
.st.join::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--lit)}
.st.pr{color:var(--merged-text)}
.st.pr::before{background:var(--merged)}
.st.pass{color:var(--pass-text)}
.st.pass::before{background:var(--pass)}
.console:not(.playing) .tile:has(.st.work:last-child),.console.playing .tile:has(.st.work.on){--tc:var(--lit)}
.console:not(.playing) .tile:has(.st.pr:last-child),.console.playing .tile:has(.st.pr.on){--tc:var(--merged)}
.console:not(.playing) .tile:has(.st.pass:last-child),.console.playing .tile:has(.st.pass.on){--tc:var(--pass)}
.c-log{padding:11px 18px 14px;border-top:1px solid var(--line);background:var(--raise2);font-size:11.5px;color:var(--quiet)}
.c-log li{display:flex;gap:12px;padding-block:2px}
.c-log time{color:var(--dim)}
/* playing */
.ev{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.console.playing .ev:not(.on){opacity:0;transform:translateY(6px)}
.console.playing .st:not(.on){visibility:hidden}
.console.playing .st.on{visibility:visible;animation:swap .45s var(--ease)}
@keyframes swap{from{opacity:0;transform:translateY(5px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@media (max-width:420px){.task{grid-template-columns:88px 1fr}.task .n{grid-column:2}.clocks span+span{display:none}}

/* the system: watchers, dispatcher, grid, proof, lessons */
.system{margin-top:56px}
.flow{display:grid;grid-template-columns:1fr;gap:10px}
.col h3{font-size:15px;font-weight:680;font-stretch:106%;margin-bottom:10px}
.col h3 span{font-weight:400;font-stretch:100%;color:var(--quiet)}
.node{background:var(--raise);border:1px solid var(--line2);border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.4}
.node + .node{margin-top:8px}
.node b{display:block;font-size:15px;font-weight:620}
.node .d{display:block;color:var(--quiet);margin-top:2px}
.node.next{border:1.5px dashed var(--dash);background:transparent}
.node.disp{padding:16px 18px}
.node.disp ul{margin-top:8px}
.node.disp li{position:relative;padding-left:16px;margin-top:6px;color:#3A404B}
.node.disp li::before{content:"";position:absolute;left:1px;top:.5em;width:6px;height:6px;border-radius:1.5px;background:var(--merged)}
.node .devs{margin-top:8px;gap:6px}
.node .dev{font-size:12px}
.arrow{display:grid;place-items:center;color:var(--dash);height:30px}
.arrow svg{width:22px;height:22px;transform:rotate(90deg)}
.loop{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px 18px;border-radius:12px;background:var(--merged-tint);border:1px solid var(--merged-edge);color:var(--merged-text);font-size:15px;font-weight:600;line-height:1.4}
.loop svg{flex:none;width:22px;height:22px}
.engine{display:grid;grid-template-columns:1fr;gap:16px;align-items:center;margin-top:14px;padding:18px 20px;border-radius:12px;background:var(--raise);border:1px solid var(--line2)}
.engine h3{font-size:16px;font-weight:680;font-stretch:106%}
.engine p{font-size:15px;line-height:1.5;color:var(--quiet);margin-top:6px;max-width:62ch}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:13px;font-weight:600;line-height:1;padding:8px 12px;border-radius:999px;background:var(--raise);border:1px solid var(--line2);white-space:nowrap}
.chip.next{background:transparent;border:1.5px dashed var(--dash);color:var(--quiet)}
.chip.next::after{content:"next";margin-left:6px;font-size:11px;font-weight:600;color:var(--dim)}
@media (min-width:1000px){.engine{grid-template-columns:1.15fr 1fr;gap:32px}}
.legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;font-size:13px;color:var(--quiet)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:26px;height:14px;border-radius:4px;border:1px solid var(--line2);background:var(--raise)}
.legend i.next{border:1.5px dashed var(--dash);background:transparent}
@media (min-width:1000px){
  .flow{grid-template-columns:1fr 30px 1.2fr 30px 1fr 30px 1fr;gap:0;align-items:start}
  .arrow{height:auto;align-self:center}
  .arrow svg{transform:none}
}

/* shared artifact parts */
.art{--a:12px}
@media (max-width:640px){.art{--a:10.4px}}
.panel{background:var(--raise);border:1px solid var(--line2);border-radius:14px;overflow:hidden;box-shadow:0 24px 56px -34px rgba(14,17,22,.28)}
.panel .head{display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding:calc(var(--a)*1.1) calc(var(--a)*1.6) calc(var(--a)*.95);background:var(--raise2);border-bottom:1px solid var(--line);font-size:max(12px,calc(var(--a)*1))}
.panel .head b{font-size:max(14px,calc(var(--a)*1.15));font-weight:650}
.panel .head span{color:var(--quiet)}
.avatar{width:calc(var(--a)*2.1);height:calc(var(--a)*2.1);border-radius:50%;background:#E3E4E8;display:grid;place-items:center;color:var(--text);font-weight:650;font-size:calc(var(--a)*.85);flex:none;letter-spacing:.02em}
.avatar.g{background:var(--text)}
.avatar.g svg{width:52%;height:52%}
.avatar.g rect{fill:#C9B4F5}
.label{display:inline-block;font-family:var(--code);font-size:.86em;font-weight:600;line-height:1;padding:.28em .55em;border-radius:999px;background:var(--raise2);color:var(--quiet);border:1px solid var(--line2);vertical-align:.08em}
.label.bot{background:var(--merged-tint);color:var(--merged-text);border-color:var(--merged-edge)}
.art .label{font-size:calc(var(--a)*.95)}
.proofpill{display:inline-flex;align-items:center;gap:calc(var(--a)*.45);font-size:calc(var(--a)*1.05);font-weight:650;color:#fff;background:var(--merged);border-radius:999px;padding:calc(var(--a)*.4) calc(var(--a)*.85) calc(var(--a)*.4) calc(var(--a)*.6)}
.proofpill svg{width:calc(var(--a)*1.05);height:calc(var(--a)*1.05)}

/* phone frame */
.phone{position:relative;width:100%;aspect-ratio:9/19.3;border-radius:17%/8%;background:#15171C;padding:3.4%}
.phone .screen{position:relative;height:100%;border-radius:14%/6.6%;background:#fff;overflow:hidden;color:#1F232B}

/* the pull request comment and the review reply, in a code host's light theme */
.thread{display:flex;flex-direction:column;gap:calc(var(--a)*1)}
.comment{background:#fff;color:#1F2328;border:1px solid #D0D7DE;border-radius:calc(var(--a)*1);overflow:hidden;box-shadow:0 30px 60px -34px rgba(14,17,22,.35)}
.comment .bar{display:flex;align-items:center;gap:calc(var(--a)*.8);padding:calc(var(--a)*.9) calc(var(--a)*1.5);background:#F6F8FA;border-bottom:1px solid #D0D7DE;font-size:calc(var(--a)*1.05)}
.comment .bar b{font-weight:650}
.comment .bar .when{color:#59636E}
.comment .bar .right{margin-left:auto;display:flex;align-items:center;gap:calc(var(--a)*.6);color:#59636E;white-space:nowrap}
.comment .bar .right .mono{color:#1F2328;font-size:.92em;background:#EFF2F5;padding:.1em .45em;border-radius:5px}
.comment .content{display:grid;grid-template-columns:1fr;gap:calc(var(--a)*2);padding:calc(var(--a)*1.5)}
@media (min-width:640px){.comment .content{grid-template-columns:auto 1fr;align-items:start}}
@media (max-width:639px){.comment .bar .when{display:none}}
.pair{display:flex;gap:calc(var(--a)*1.4)}
.pair figure{width:calc(var(--a)*11.5)}
.pair figcaption{font-size:calc(var(--a)*.98);color:#59636E;margin-top:calc(var(--a)*.55);text-align:center}
.pair figcaption b{color:#1F2328;font-weight:650}
.phone .screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.checks .nc{font-size:max(12px,calc(var(--a)*1));color:#59636E;border:1.5px dashed #D0D7DE;border-radius:calc(var(--a)*.6);padding:calc(var(--a)*.5) calc(var(--a)*.75);line-height:1.35}
.checks .nc b{color:#1F2328;font-weight:650;margin-right:.3em}
.caption{margin-top:14px;font-size:13px;color:var(--dim)}
.caption a{color:inherit;text-underline-offset:3px}
.play{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:3;display:flex;align-items:center;gap:.4em;font-size:calc(var(--a)*.74);font-weight:650;color:#fff;background:rgba(21,23,28,.78);border-radius:999px;padding:.35em .7em .35em .55em}
.play svg{width:.9em;height:.9em}
.checks{display:flex;flex-direction:column;gap:calc(var(--a)*.9);font-size:max(13px,calc(var(--a)*1.08));min-width:0}
.checks .src{color:#59636E;font-size:max(12px,calc(var(--a)*1))}
.checks .ok{display:grid;grid-template-columns:calc(var(--a)*1.5) 1fr;gap:calc(var(--a)*.6);align-items:start;line-height:1.3}
.tick{width:calc(var(--a)*1.4);height:calc(var(--a)*1.4);border-radius:50%;background:var(--merged);display:grid;place-items:center;margin-top:calc(var(--a)*.03)}
.tick svg{width:62%;height:62%}
.checks hr{border:none;border-top:1px solid #D8DEE4;margin:calc(var(--a)*.25) 0;width:100%}
.checks .meta{display:flex;justify-content:space-between;gap:1em;color:#59636E}
.checks .meta b{color:#1F2328;font-weight:650}
.checks .proofpill{align-self:flex-start;margin-top:calc(var(--a)*.3)}
.reply{background:#fff;color:#1F2328;border:1px solid #D0D7DE;border-radius:calc(var(--a)*1);padding:calc(var(--a)*1.1) calc(var(--a)*1.5);display:grid;grid-template-columns:auto 1fr;gap:calc(var(--a)*.9);box-shadow:0 18px 40px -26px rgba(14,17,22,.3)}
.reply .who{font-size:max(12px,calc(var(--a)*1));color:#59636E;margin-bottom:calc(var(--a)*.2)}
.reply .who b{color:#1F2328;font-weight:650}
.reply p{font-size:max(13px,calc(var(--a)*1.12));line-height:1.3}
.vid{display:inline-flex;align-items:center;gap:.45em;margin-left:.5em;font-size:.88em;font-weight:650;color:var(--merged-text);background:var(--merged-tint);border-radius:999px;padding:.15em .6em;vertical-align:.1em}
.vid svg{width:.8em;height:.8em}
.reply .sep{grid-column:1/-1;border-top:1px solid #D8DEE4}

/* sections */
.section{padding-block:120px}
.section + .section{padding-top:0}
.split{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media (min-width:960px){
  .split{grid-template-columns:1fr 1fr;gap:72px}
}
.fits{margin-top:30px}
.fits h3{font-size:17px;font-weight:680;font-stretch:104%}
.fits li{position:relative;padding-left:22px;margin-top:10px;font-size:17px;color:var(--quiet)}
.fits li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--merged)}
.fits.not li::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--dash)}

/* what it takes off your backlog */
.item{display:grid;grid-template-columns:1fr auto;gap:calc(var(--a)*1.2);align-items:center;padding:calc(var(--a)*1.05) calc(var(--a)*1.6);border-top:1px solid var(--line)}
.panel .head + .item{border-top:none}
.item b{display:block;font-size:max(14px,calc(var(--a)*1.2));font-weight:600;line-height:1.3}
.item .meta{display:block;font-size:max(12px,calc(var(--a)*.98));color:var(--quiet);margin-top:calc(var(--a)*.25)}
.item .meta .mono{font-size:.95em}
.state{display:inline-flex;align-items:center;gap:.4em;font-size:max(12px,calc(var(--a)*.98));font-weight:650;white-space:nowrap;border-radius:999px;padding:.32em .75em;border:1px solid transparent}
.state.pr{background:var(--merged-tint);color:var(--merged-text);border-color:var(--merged-edge)}
.state.merged{background:var(--merged);color:#fff}
.state.work{background:var(--lit-tint);color:var(--lit-text);border-color:#F3D9A4}

/* lessons file */
.lesson{display:grid;grid-template-columns:calc(var(--a)*5.2) 1fr;gap:calc(var(--a)*1.2);padding:calc(var(--a)*1.3) calc(var(--a)*1.6);border-top:1px solid var(--line)}
.panel .head + .lesson{border-top:none}
.lesson time{font-size:max(12px,calc(var(--a)*1));color:var(--quiet);padding-top:calc(var(--a)*.15)}
.lesson b{display:block;font-size:max(15px,calc(var(--a)*1.3));font-weight:600;line-height:1.3}
.lesson .from{display:block;font-size:max(12px,calc(var(--a)*.98));color:var(--quiet);margin-top:calc(var(--a)*.35)}
.lesson .applied{display:inline-flex;align-items:center;gap:.5em;margin-top:calc(var(--a)*.65);font-size:max(12px,calc(var(--a)*.98));font-weight:650;color:var(--merged-text)}
.lesson .applied::before{content:"";width:.55em;height:.55em;border-radius:2px;background:var(--merged)}

/* the grid: spare machines become more engineers */
.machine{display:grid;grid-template-columns:calc(var(--a)*2.6) 1fr;gap:calc(var(--a)*1);align-items:start;padding:calc(var(--a)*1.1) calc(var(--a)*1.6);border-top:1px solid var(--line)}
.panel .head + .machine{border-top:none}
.machine .ic{width:calc(var(--a)*2.6);height:calc(var(--a)*2.6);border-radius:calc(var(--a)*.6);background:var(--raise2);border:1px solid var(--line);color:var(--quiet);display:grid;place-items:center}
.machine .ic svg{width:62%;height:62%}
.machine b{display:block;font-size:max(14px,calc(var(--a)*1.15));font-weight:600;line-height:1.3}
.machine .d{display:block;font-size:max(12px,calc(var(--a)*.98));color:var(--quiet);margin-top:calc(var(--a)*.15)}
.devs{display:flex;flex-wrap:wrap;gap:calc(var(--a)*.5);margin-top:calc(var(--a)*.7)}
.dev{display:inline-flex;align-items:center;gap:.45em;font-size:max(12px,calc(var(--a)*.98));font-weight:600;color:var(--merged-text);background:var(--merged-tint);border:1px solid var(--merged-edge);border-radius:999px;padding:.22em .75em .22em .25em}
.dev i{font-style:normal;width:1.7em;height:1.7em;border-radius:50%;background:var(--merged);color:#fff;display:grid;place-items:center;font-size:.78em;font-weight:800}
.dev.free{color:var(--quiet);background:transparent;border:1px dashed var(--dash);padding-left:.75em}
.stacks{margin-top:28px;font-size:16px;color:var(--quiet);max-width:44ch}
.stacks b{color:var(--text);font-weight:650}

/* facts beside the grid */
.facts{display:grid;grid-template-columns:1fr;gap:26px;margin-top:44px}
.facts div{border-top:1px solid var(--line2);padding-top:16px}
.facts div.key{border-top-color:var(--merged)}
.facts h3{font-size:19px;font-weight:680;font-stretch:104%;letter-spacing:-.01em;line-height:1.25}
.facts p{font-size:16px;line-height:1.5;color:var(--quiet);margin-top:6px;max-width:44ch}

/* where this goes: now, next, later */
.ahead{position:relative;display:grid;grid-template-columns:1fr;gap:30px;margin-top:52px}
.ahead::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:1px;background:var(--line2)}
.ahead li{position:relative;padding-left:40px}
.ahead li::before{content:"";position:absolute;left:0;top:3px;width:15px;height:15px;border-radius:4px;background:var(--ground);border:1.5px dashed var(--dash)}
.ahead li.now::before{background:var(--merged);border:0}
.ahead .when{display:block;font-size:14px;color:var(--quiet)}
.ahead li.now .when{color:var(--merged-text);font-weight:650}
.ahead h3{font-size:22px;font-weight:720;font-stretch:106%;letter-spacing:-.015em;line-height:1.2;margin-top:4px}
.ahead p{font-size:16px;line-height:1.5;color:var(--quiet);margin-top:8px;max-width:36ch}
@media (min-width:900px){
  .ahead{grid-template-columns:repeat(3,1fr);gap:40px}
  .ahead::before{left:7px;right:0;top:8px;bottom:auto;width:auto;height:1px}
  .ahead li{padding-left:0;padding-top:40px}
  .ahead li::before{top:0}
}


/* pricing */
.prices{margin-top:56px;border-top:1px solid var(--line)}
.prices>div{display:grid;gap:8px 48px;padding-block:28px;border-bottom:1px solid var(--line)}
@media (min-width:860px){.prices>div{grid-template-columns:14rem 1fr;align-items:baseline}}
.prices dt{font-size:clamp(30px,3.2vw,44px);font-weight:760;font-stretch:108%;letter-spacing:-.025em;line-height:1}
.prices dd{font-size:18px;line-height:1.55;color:var(--quiet);max-width:52ch}
.prices dd a{color:var(--text)}
.adds{margin-top:48px;padding:28px 32px;border:1.5px dashed var(--dash);border-radius:16px}
.adds h3{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;font-size:18px;font-weight:680}
.adds h3 span{font-family:var(--code);font-size:12px;font-weight:400;color:var(--dim)}
.adds ul{display:grid;gap:14px 48px;margin-top:20px}
@media (min-width:860px){.adds ul{grid-template-columns:1fr 1fr}}
.adds li{font-size:15px;line-height:1.5;color:var(--quiet)}
.adds b{display:block;color:var(--text);font-weight:650;margin-bottom:2px}

/* questions */
.qs{border-top:1px solid var(--line)}
.qs details{border-bottom:1px solid var(--line)}
.qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding-block:22px;font-size:18px;font-weight:620}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"";flex:none;width:12px;height:12px;margin-top:.4em;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);rotate:45deg;transition:rotate .25s var(--ease)}
.qs details[open] summary::after{rotate:225deg}
.qs summary:hover{color:var(--merged-text)}
.qs details p{padding-bottom:24px;font-size:17px;line-height:1.6;color:var(--quiet);max-width:62ch}

/* pilot: the one full field of brand colour, at the end of the run */
.pilot{background:var(--merged);color:#fff;margin-top:64px}
.pilot-in{display:grid;gap:48px;padding-block:120px}
@media (min-width:960px){.pilot-in{grid-template-columns:1.1fr .9fr;gap:88px;align-items:end}}
.pilot .stmt{max-width:12ch}
.pilot .sub{color:#FDFBFF}
.pilot .fits{margin-top:32px}
.pilot .fits li{position:relative;padding-left:22px;margin-top:10px;font-size:17px;color:#FDFBFF}
.pilot .fits li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:2px;background:#fff}
.pilot .signup input{border-color:transparent}
.pilot .signup input:focus{box-shadow:0 0 0 3px rgba(255,255,255,.45)}
.pilot .status{color:#FDFBFF}
.pilot .status.ok{color:#fff}
.pilot .status.err{color:#fff;font-weight:600}
.pilot :focus-visible{outline-color:#fff}

/* footer, 404 and thanks */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-block:32px;font-size:14px;color:var(--dim)}
.foot-links{display:flex;gap:20px}
.foot a{color:var(--quiet)}
.lost{padding-block:120px 160px}
.lost .btn{margin-top:32px}