/* DESIGN PLAN
   Subject: evolve, scoped AI agents that stop for approval. Audience: a technical founder with a small team.
   Job of the page: let the visitor operate the product for ninety seconds, then ask for access.
   Ground: ink #0B0B0C. Type: Source Code Pro (display, labels, anything the system says) + Inter (anything a person says).
   Colour carries state and nothing else: amber = waiting for you, indigo = an agent, green = approved, red = refused.
   One orchestrated motion (the hero trace). Everything else moves only when the visitor touches it.
   Bands, in page order: amber, indigo, green. Text on a band is ink. */
:root{color-scheme:dark;--bg:#0B0B0C;--surf:#141417;--card:#1E1E22;--sheet:#26262B;--line:#2A2A30;--line2:#3A3A42;--rule:#6E6E78;
--tx:#EDEDED;--body:#D2D2D8;--soft:#B4B4BB;--muted:#8A8A92;
--green:#2FD08A;--amber:#F5B544;--indigo:#7C8CFF;--indigo-t:#98A5FF;--red:#F2585B;--on-g:#052417;
--paper:#F4F4F5;--pink:#0B0B0C;--pmut:#55555E;--pline:#C9C9D0;
--mono:"Source Code Pro",ui-monospace,Menlo,monospace;--sans:Inter,system-ui,sans-serif;--e:cubic-bezier(.3,.9,.3,1)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--tx);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}ul,ol{padding:0;list-style:none}
a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
.wrap{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.in{max-width:1180px;margin:0 auto}
.mark{height:1em;width:auto;fill:currentColor;flex:none}

/* top */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(11,11,12,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:30}
.top .in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px}
.brand{display:inline-flex;align-items:center;gap:10px;font:600 20px var(--mono);letter-spacing:-.03em;text-decoration:none}
.top nav{display:flex;gap:26px;font:500 13.5px var(--mono);color:var(--soft)}
.top nav a{text-decoration:none}.top nav a:hover{color:var(--tx)}
.cta{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border-radius:8px;border:0;background:var(--green);color:var(--on-g);font:600 15px var(--mono);text-decoration:none;transition:transform .15s var(--e),filter .15s}
.cta:hover{filter:brightness(1.08)}.cta:active{transform:translateY(1px)}
.top .cta{min-height:36px;padding:0 14px;font-size:13px;background:none;border:1px solid var(--line2);color:var(--tx)}
@media (max-width:760px){.top nav{display:none}}

/* hero */
.hero{padding-block:clamp(36px,7vh,84px) clamp(40px,7vh,80px)}
.hero h1{font:600 clamp(44px,8.6vw,118px)/.94 var(--mono);letter-spacing:-.065em;text-wrap:balance}
.hero h1 i{font-style:normal;display:inline-block;height:.14em;width:.62em;margin-left:.08em;background:var(--amber);clip-path:polygon(0 55%,100% 0,100% 45%,0 100%);animation:blink 2.4s steps(1) infinite}
@keyframes blink{0%,60%{background:var(--amber)}61%,100%{background:var(--green)}}
.hero .lede{max-width:54ch;margin-top:clamp(18px,3vh,30px);font-size:clamp(17px,1.5vw,21px);color:var(--body)}
.hero .row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:26px}
.hero .for{font:500 13.5px/1.5 var(--mono);color:var(--muted);max-width:44ch}

/* the trace: one job, five stations */
.trace{margin-top:clamp(34px,6vh,64px);border:1px solid var(--line2);border-radius:14px;background:linear-gradient(180deg,var(--surf),#101012)}
.tr-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:12px 16px;border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0;margin:-4px;padding:4px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;padding:7px 11px;border:1px solid transparent;border-radius:7px;background:none;font:500 13px var(--mono);color:var(--muted);white-space:nowrap}
.tabs button:hover{color:var(--tx)}
.tabs button[aria-pressed="true"]{color:var(--tx);background:var(--card);border-color:var(--line2)}
.tally{display:flex;align-items:center;gap:14px;font:500 13px var(--mono);color:var(--muted);white-space:nowrap}
.tally button{min-height:32px;padding:0 10px;border:1px solid var(--line2);border-radius:7px;background:none;font:500 12.5px var(--mono);color:var(--soft)}
.rc{display:none}
.tally b{color:var(--green);font-weight:600}
.rail{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));--i:0}
.rail::before{content:"";position:absolute;left:10%;right:10%;top:27px;height:1px;background:var(--line2)}
.bead{position:absolute;top:22px;left:calc((var(--i) + .5) * 20%);width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--c,var(--indigo));box-shadow:0 0 0 5px color-mix(in srgb,var(--c,var(--indigo)) 22%,transparent);transition:left .7s var(--e),background .3s,box-shadow .3s;z-index:2}
.st{min-width:0;padding:44px 16px 18px;border-left:1px solid var(--line)}
.st:first-child{border-left:0}
.st:not(.on):not(.was) .bd{visibility:hidden}
.st h3{font:600 12.5px var(--mono);color:var(--muted);text-align:center;margin-bottom:16px;transition:color .3s}
.st.on h3{color:var(--tx)}
.bd{min-height:214px;display:flex;flex-direction:column;gap:9px;font-size:14.5px;line-height:1.45}
.bd>*{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--e)}
.st.on .bd>*,.st.was .bd>*{opacity:1;transform:none}
.st.on .bd>:nth-child(2){transition-delay:.12s}.st.on .bd>:nth-child(3){transition-delay:.24s}.st.on .bd>:nth-child(4){transition-delay:.36s}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{font:500 12px var(--mono);padding:3px 7px;border:1px solid var(--line2);border-radius:5px;color:var(--soft)}
.chip.src{border-color:var(--amber);color:var(--amber)}
.ev{color:var(--tx)}.when{font:500 12px var(--mono);color:var(--muted)}
.ag{font:600 14px var(--mono);color:var(--indigo-t)}
.lane li{position:relative;padding-left:18px;color:var(--soft);font-size:13.5px}
.lane li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--green)}
.lane li.no::before{background:none;border:1.5px solid var(--red);border-radius:2px}
.refuse{font:500 12.5px/1.4 var(--mono);color:var(--red);border:1px solid var(--red);border-radius:6px;padding:6px 8px;opacity:0!important;transform:scale(.96)!important;transition:opacity .3s,transform .4s var(--e)!important}
.refuse.show{opacity:1!important;transform:none!important}
.slip{background:var(--card);border:1px solid var(--line2);border-left:3px solid var(--c,var(--indigo));border-radius:4px 8px 8px 4px;padding:10px 11px;transition:border-color .3s}
.slip .to{font:500 12px var(--mono);color:var(--muted);overflow-wrap:anywhere}
.slip .tx{margin-top:5px;min-height:7.2em;color:var(--body);font-size:13.5px;line-height:1.45}
.slip .tx::after{content:"";display:inline-block;width:.5em;height:1em;margin-left:1px;vertical-align:-.15em;background:var(--indigo);animation:cur .8s steps(1) infinite}
.slip.done .tx::after{display:none}
@keyframes cur{50%{opacity:0}}
.by{font:500 12px var(--mono);color:var(--muted)}
.wait{display:flex;align-items:center;gap:8px;font:600 13px var(--mono);color:var(--amber)}
.wait i{width:9px;height:9px;border-radius:50%;background:var(--amber);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(245,181,68,.18)}}
.btns{display:flex;flex-wrap:wrap;gap:6px}
.b{min-height:38px;padding:0 12px;border-radius:7px;border:1px solid var(--line2);background:var(--card);font:600 13px var(--mono);transition:transform .15s var(--e),background .15s,border-color .15s}
.b:hover{border-color:var(--rule)}.b:active{transform:translateY(1px)}
.b.go{background:var(--green);border-color:var(--green);color:var(--on-g)}
.st .btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.st .btns .go{grid-column:1/-1}
.st.on .b.go{animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{box-shadow:0 0 0 7px rgba(47,208,138,.16)}}
.tiny{font:500 12px/1.4 var(--mono);color:var(--muted)}
.okline{font:600 13.5px/1.4 var(--mono);color:var(--green)}
.log li{display:grid;grid-template-columns:3.4em minmax(0,1fr);gap:6px;font:500 12.5px/1.5 var(--mono);color:var(--soft)}
.log time{color:var(--muted)}
@media (max-width:900px){
 .rail{grid-template-columns:1fr}.rail::before,.bead{display:none}
 .st{padding:0;border-left:0;border-top:1px solid var(--line);opacity:1}
 .st:first-child{border-top:0}
 .st h3{position:relative;text-align:left;margin:0;padding:12px 16px 12px 36px}
 .st h3::before{content:"";position:absolute;left:16px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;border:1.5px solid var(--line2)}
 .st.was h3::before{background:var(--green);border-color:var(--green)}
 .st.on h3::before{background:var(--c,var(--indigo));border-color:var(--c,var(--indigo));box-shadow:0 0 0 5px color-mix(in srgb,var(--c,var(--indigo)) 22%,transparent)}
 .bd{display:none;min-height:0;height:232px;padding:0 16px 16px 36px}
 .st:not(.on):not(.was) .bd{visibility:visible}
 .rc{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;padding:8px 10px;border-left:3px solid var(--amber);background:var(--card);border-radius:3px 7px 7px 3px;font-size:13.5px;line-height:1.4;color:var(--body)}
 #s3 .tiny{display:none}
 .tabs button,.kinds button,.skins button,.tally button{min-height:40px}.b{min-height:42px}.top .cta{min-height:40px}.uc button{padding-block:12px}[data-skin="term"] .b{min-height:40px}
 .st.on .bd{display:flex}
}

/* sections */
.sec{padding-block:clamp(64px,11vh,128px);border-top:1px solid var(--line)}
.sec h2{font:600 clamp(28px,4vw,52px)/1.04 var(--mono);letter-spacing:-.045em;text-wrap:balance;max-width:20ch}
.sec .sub{margin-top:16px;max-width:60ch;color:var(--soft)}
.note{margin-top:14px;font:500 12.5px/1.5 var(--mono);color:var(--muted)}

/* instruments: text left, a working machine right */
.ins{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
.ins .q{font:500 13.5px var(--mono);color:var(--c);margin-bottom:14px}
.ins h2{max-width:14ch}
.ins .pts{margin-top:22px;display:grid;gap:10px;max-width:46ch}
.ins .pts li{position:relative;padding-left:20px;color:var(--soft);font-size:16px}
.ins .pts li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:3px;background:var(--c);transform:skewY(-9deg)}
.mach{min-width:0;border:1px solid var(--line2);border-radius:14px;background:var(--surf);padding:clamp(14px,2vw,22px)}
.mach .hd{font:500 12.5px var(--mono);color:var(--muted);margin-bottom:12px}
@media (max-width:900px){.ins{grid-template-columns:1fr;gap:0}.ins>div:first-child{display:contents}.ins .mach{order:2;margin-top:26px}.ins .pts{order:3;margin-top:26px}}

/* machine A: scope */
.lanes{display:grid;gap:8px}
.ln{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:rgba(124,140,255,.05)}
.ln b{font:600 14px var(--mono);color:var(--indigo-t)}
.ln span{grid-column:1;font-size:13.5px;color:var(--muted);line-height:1.35}
.ln .btns{grid-column:2;grid-row:1/3;justify-content:flex-end}
.track{position:relative;height:96px;margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.track .tk{position:absolute;left:0;right:0;top:56px;height:1px;background:var(--line2)}
.lanes.busy .b{opacity:.5;pointer-events:none}
.track .post.first{transform:none;left:0!important;text-align:left}.track .post.first::after{margin-left:10px}
.track .post.last{transform:none;left:auto!important;right:0;text-align:right}.track .post.last::after{margin:4px 10px 0 auto}
.track .post{position:absolute;top:30px;font:500 11.5px var(--mono);color:var(--muted);transform:translateX(-50%);white-space:nowrap;text-align:center}
.track .post::after{content:"";display:block;width:1px;height:26px;margin:4px auto 0;background:var(--line2)}
.track .post.gate{color:var(--soft)}.track .post.gate::after{width:3px;background:var(--rule);border-radius:2px;transition:background .2s}
.track .post.gate.hit::after{background:var(--red)}
.pk{position:absolute;top:50px;left:0;width:13px;height:13px;margin-left:-6px;border-radius:50%;background:var(--indigo);opacity:0}
.res{min-height:4.6em;margin-top:6px;font:500 13.5px/1.5 var(--mono)}
.res b{font-weight:600}.res .c{color:var(--muted)}
.t-run{color:var(--green)}.t-ask{color:var(--amber)}.t-no{color:var(--red)}
@media (max-width:520px){.ln{grid-template-columns:1fr}.ln .btns{grid-column:1;grid-row:auto;justify-content:flex-start}}

/* machine B: the decision, in four skins */
.skins{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line2);border-radius:9px;margin-bottom:12px}
.skins button{padding:6px 12px;border:0;border-radius:6px;background:none;font:500 13px var(--mono);color:var(--muted)}
.skins button[aria-pressed="true"]{background:var(--card);color:var(--tx)}
.win{border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:var(--bg)}
.chrome{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);font:500 12.5px var(--mono);color:var(--muted)}
.chrome i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.chrome span{margin-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pane{padding:14px;border-left:3px solid var(--c,var(--amber));transition:border-color .3s}
.dh{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:600 13px var(--mono)}
.dh .state{color:var(--c,var(--amber))}
.tag{font:500 12px var(--mono);padding:2px 7px;border:1px solid var(--line2);border-radius:5px;color:var(--soft)}
.tag.l{border-color:var(--amber);color:var(--amber)}
.mail{margin-top:12px;padding:12px;background:var(--card);border-radius:8px}
.mail .m{font:500 12.5px var(--mono);color:var(--muted);overflow-wrap:anywhere}
.mail .body{margin-top:10px;white-space:pre-line;color:var(--body);font-size:15px;line-height:1.5}
.mail textarea{display:block;width:100%;margin-top:10px;min-height:9.5em;padding:9px;border:1px solid var(--indigo);border-radius:6px;background:var(--bg);color:var(--tx);font:400 15px/1.5 var(--sans);resize:vertical}
.why{margin-top:12px;display:grid;gap:3px;font:500 12.5px/1.5 var(--mono);color:var(--indigo-t)}
.why li::before{content:"· ";color:var(--muted)}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.acts .b{min-height:42px;padding:0 15px;font-size:13.5px}
.audit{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;display:grid;gap:2px}
.audit li{display:grid;grid-template-columns:3.4em 8.2em minmax(0,1fr);gap:8px;font:500 12.5px/1.6 var(--mono);color:var(--soft)}
.audit li.new{animation:in .5s var(--e)}
@keyframes in{from{opacity:0;transform:translateY(-4px)}}
.audit time{color:var(--muted)}.audit .w{color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audit .w.a{color:var(--indigo-t)}.audit .w.y{color:var(--green)}
/* slack skin */
[data-skin="slack"] .win{background:#1A1D21;border-color:#35373B}
[data-skin="slack"] .chrome{border-color:#35373B}
[data-skin="slack"] .pane{border-left-width:0;padding-left:56px;position:relative}
[data-skin="slack"] .pane::before{content:"";position:absolute;left:14px;top:14px;width:32px;height:32px;border-radius:7px;background:var(--bg) linear-gradient(170deg,transparent 22%,var(--tx) 23% 36%,transparent 37% 44%,var(--tx) 45% 58%,transparent 59% 66%,var(--tx) 67% 80%,transparent 81%) center/50% 100% no-repeat}
[data-skin="slack"] .mail{background:none;border-left:3px solid var(--c,var(--amber));border-radius:0;padding:2px 0 2px 12px}
[data-skin="slack"] .b{background:none;border-color:#565856;font-family:var(--sans);font-weight:600}
[data-skin="slack"] .b.go{background:#007A5A;border-color:#007A5A;color:#fff}
/* terminal skin */
[data-skin="term"] .win{background:#060607}
[data-skin="term"] .pane{border-left-width:0;font-family:var(--mono)}
[data-skin="term"] .mail{background:none;border:1px solid var(--line2);border-radius:4px}
[data-skin="term"] .mail .body{font:400 13.5px/1.5 var(--mono)}
[data-skin="term"] .acts{flex-direction:column;align-items:flex-start;gap:4px}
[data-skin="term"] .b{min-height:34px;padding:0 4px;border:0;background:none;font-weight:500;color:var(--soft);text-align:left}
[data-skin="term"] .b::before{content:"$ ";color:var(--green)}
[data-skin="term"] .b.go{color:var(--tx);animation:none}
[data-skin="term"] .b:hover{color:var(--green)}
/* chat client skin (planned) */
.chatonly{display:none}
[data-skin="chat"] .chatonly{display:revert}
[data-skin="chat"] .cq{display:grid;gap:10px;margin-bottom:14px}
.cq .you{justify-self:end;max-width:85%;padding:8px 13px;border-radius:14px 14px 4px 14px;background:var(--card);color:var(--tx);font-size:15px}
.cq .bot{color:var(--body);font-size:15px;line-height:1.5}
.tag.pl{border-style:dashed;color:var(--muted)}
.plan{margin-top:10px;font:500 12.5px/1.5 var(--mono);color:var(--muted)}
[data-skin="chat"] .pane{border-left-width:0}
[data-skin="chat"] .mail{background:none;border:1px solid var(--c,var(--amber));border-radius:12px;transition:border-color .3s}
[data-skin="chat"] .b{border-radius:999px;font-family:var(--sans)}
@media (max-width:520px){.audit li{grid-template-columns:3.2em minmax(0,1fr)}.audit .w{grid-column:2}.audit .x{grid-column:2}}

/* machine C: the ladder */
#sim{display:block;width:100%;height:210px;border-radius:9px;background:var(--bg);border:1px solid var(--line)}
.kinds{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.kinds button{padding:7px 10px;border:1px solid var(--line2);border-radius:7px;background:none;font:500 13px var(--mono);color:var(--muted)}
.kinds button[aria-pressed="true"]{color:var(--tx);background:var(--card);border-color:var(--rule)}
.ladder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:14px}
.ladder button{min-width:0;padding:10px 8px 11px;border:1px solid var(--line2);border-radius:9px;background:none;text-align:left;transition:background .2s,border-color .2s}
.ladder button b{display:block;font:700 17px var(--mono);color:var(--k)}
.ladder button span{display:block;margin-top:3px;font-size:12.5px;line-height:1.3;color:var(--muted)}
.ladder button[aria-pressed="true"]{background:var(--card);border-color:var(--k)}
.ladder button[aria-pressed="true"] span{color:var(--tx)}
.ladder button:disabled{opacity:.35;cursor:not-allowed}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.stats div{min-width:0;border-top:1px solid var(--line2);padding-top:9px}
.stats b{display:block;font:600 clamp(22px,3vw,30px)/1 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:5px;font-size:12.5px;line-height:1.3;color:var(--muted)}
.lvl-say{margin-top:14px;min-height:3em;font-size:15px;color:var(--body)}
@media (max-width:520px){.ladder{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* machine D: models */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mod{min-width:0;padding:12px;border:1px solid var(--line2);border-radius:10px;transition:border-color .3s,background .3s}
.mod.champ{border-color:var(--green);background:rgba(47,208,138,.06)}
.mod h4{font:600 14px var(--mono)}
.mod .role{display:block;margin-top:2px;font:500 12px var(--mono);color:var(--muted)}
.mod.champ .role{color:var(--green)}
.mod p{margin-top:8px;font-size:13.5px;line-height:1.4;color:var(--soft)}
.mod .cost{margin-top:10px;font:600 22px/1 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mod .cost small{font:500 12px var(--mono);color:var(--muted);letter-spacing:0}
.cells{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:3px;margin-top:16px}
.cells i{aspect-ratio:1;border-radius:2px;background:var(--line);transition:background .25s}
.cells i.m{background:var(--green)}.cells i.d{background:var(--amber)}
.verdict{min-height:3em;margin-top:12px;font:500 13.5px/1.5 var(--mono);color:var(--soft)}
.verdict b{color:var(--tx);font-weight:600}
@media (max-width:520px){.cells{grid-template-columns:repeat(10,minmax(0,1fr))}}

/* what you get: stays dark so the marks carry the colour */
.g4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 64px;margin-top:44px;max-width:1040px}
.g4 li{min-width:0}
.g4 li::before{content:"";display:block;width:58px;height:14px;margin-bottom:18px;background:var(--c);clip-path:polygon(0 40%,100% 0,100% 60%,0 100%)}
.g4 h3{font:500 clamp(19px,1.8vw,24px)/1.3 var(--sans);letter-spacing:-.015em}
.g4 p{margin-top:10px;color:var(--soft);font-size:15.5px;max-width:52ch}
@media (max-width:760px){.g4{grid-template-columns:1fr;gap:30px}}

/* use cases */
.ucs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:38px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.uc{min-width:0;display:flex;flex-direction:column;gap:9px;padding:22px 22px 20px;background:var(--bg);transition:background .2s}
.uc:hover{background:var(--surf)}
.uc .a{font:500 12.5px var(--mono);color:var(--indigo-t)}
.uc h3{font:600 18px/1.25 var(--mono);letter-spacing:-.03em}
.uc p{font-size:14.5px;line-height:1.5;color:var(--soft)}
.uc .ch{color:var(--tx);padding-left:12px;border-left:3px solid var(--green)}
.uc button{align-self:flex-start;margin-top:auto;padding:0;border:0;background:none;font:600 13px var(--mono);color:var(--muted);text-decoration:underline;text-underline-offset:4px}
.uc button:hover{color:var(--green)}
@media (max-width:1000px){.ucs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ucs{grid-template-columns:1fr}}

/* colour bands: ink text on brand grounds */
.tone{--tx:#0B0B0C;--body:#141417;--soft:rgba(11,11,12,.84);--muted:rgba(11,11,12,.8);--line:rgba(11,11,12,.22);--line2:rgba(11,11,12,.32);--rule:#0B0B0C;color:var(--tx);border-top:0}
.tone :focus-visible{outline-color:#0B0B0C}
.t-a{background:var(--amber)}.t-i{background:var(--indigo)}.t-g{background:var(--green)}
.jobs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 34px;margin-top:34px}
.jobs>div{min-width:0}
.jobs h3{font:600 13px var(--mono);padding-bottom:9px;border-bottom:2px solid var(--rule)}
.jobs li{padding:9px 0;border-bottom:1px solid var(--line2);font-size:15.5px;line-height:1.35}
.grow{max-width:40ch;margin-top:40px;font:500 clamp(19px,2vw,26px)/1.32 var(--sans);letter-spacing:-.015em}
@media (max-width:1000px){.jobs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.jobs{grid-template-columns:1fr}}
.sf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin-top:34px}
.sf li{min-width:0;padding:18px 0 22px;border-top:1px solid var(--line2)}
.sf h3{font:600 15px/1.35 var(--mono)}
.sf p{margin-top:8px;font-size:15px;color:var(--soft)}
@media (max-width:900px){.sf{grid-template-columns:1fr}}
.df{margin:34px 0 0;max-width:900px;border-top:2px solid var(--rule)}
.df div{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:4px 28px;padding:14px 0;border-bottom:1px solid var(--line)}
.df dt{font:500 14px/1.6 var(--mono);color:var(--muted)}.df dd{font-size:16px}
@media (max-width:640px){.df div{grid-template-columns:1fr}}
.sig{padding-block:clamp(80px,15vh,170px)}
.sig p{font:600 clamp(30px,5.8vw,80px)/1.04 var(--mono);letter-spacing:-.05em;max-width:18ch;text-wrap:balance}
.sig p span{color:var(--muted)}
.live{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 48px;margin-top:30px}
.live>div{min-width:0}
.live h3{font:600 14px var(--mono);padding-bottom:10px;border-bottom:2px solid var(--rule)}
.live li{position:relative;padding:9px 0 9px 22px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.4}
.live li::before{content:"";position:absolute;left:2px;top:15px;width:9px;height:9px;border-radius:50%;background:var(--green)}
.live .wip li::before{background:none;border:1.5px solid var(--amber)}
@media (max-width:760px){.live{grid-template-columns:1fr}}

/* access: dark, so the green band above it is the last bright one */
.band{background:var(--surf);padding-block:clamp(64px,11vh,124px)}
.band .in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.band .mark{height:clamp(64px,10vw,140px)}
.band h2{font:600 clamp(30px,4.4vw,58px)/1.02 var(--mono);letter-spacing:-.05em}
.band p{color:var(--soft);max-width:52ch;margin-top:14px}
.band form{display:grid;gap:10px;max-width:560px;margin-top:26px}
.band label{font:500 13.5px var(--mono);color:var(--soft);margin-top:6px}
.band input,.band textarea{width:100%;padding:13px 14px;border:1px solid var(--line2);border-radius:8px;background:var(--bg);color:var(--tx);font:400 16px var(--sans)}
.band input::placeholder{color:var(--muted)}
.band textarea{resize:vertical;min-height:5.2em}
.band button{justify-self:start;min-height:50px;padding:0 24px;border:0;border-radius:8px;background:var(--green);color:var(--on-g);font:600 15px var(--mono)}
.band .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.band #note{min-height:1.6em;font:500 14px var(--mono);color:var(--green)}
.band .priv{font-size:13.5px;margin-top:2px;color:var(--muted)}
@media (max-width:640px){.band .in{grid-template-columns:1fr}.band .mark{height:54px}}
.who{padding-block:34px 6px;font-size:14.5px;color:var(--soft)}.who p{max-width:70ch}
footer{padding-block:26px;font-size:13.5px;color:var(--muted)}
footer .in{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between}
footer .brand{font-size:16px;color:var(--tx)}
footer a,.band .priv a{color:inherit;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}