/* ===== thinkingdbx: lambda branch =====
   A near-black field, cream type, one violet accent, hairline rules and
   square corners. Headlines are set large in IBM Plex Sans; running copy
   and every label is IBM Plex Mono. This file loads after the page-level
   <style> blocks, so a rule here wins a tie with a page rule; the `body`
   prefix is only there to outrank the `body :is(...)` rules in
   light-mode.css. */

/* ---------- tokens ---------- */
:root{
    --bg:#0b0b0b; --bg-2:#0f0f0f; --bg-3:#151515;
    --surface:#0b0b0b; --surface-2:#131313;
    --border:#222220; --border-2:#42413e;
    --text:#e7e6d9; --text-2:#b0afa6; --text-3:#7f7e76;
    --green:#a186f8; --green-2:#815ef8; --green-dim:#6236f4;
    --green-soft:rgba(98,54,244,0.14);
    --accent:#6236f4; --accent-2:#815ef8;
    --cream:#e7e6d9; --ink:#0b0b0b;
    --ca-1:#ff2bd6; --ca-2:#19e3ff; --ca-3:#f5ff3b;
    --maxw:1368px; --gut:36px;
    --r-ctl:0px; --r-card:0px; --r-frame:0px;
}
html[data-theme="light"]{
    --bg:#e7e6d9; --bg-2:#dfdecf; --bg-3:#d6d5c6;
    --surface:#e7e6d9; --surface-2:#dfdecf;
    --border:#cdccbd; --border-2:#8a897f;
    --text:#0b0b0b; --text-2:#3d3c39; --text-3:#66655e;
    --green:#5127e0; --green-2:#5127e0; --green-dim:#6236f4;
    --green-soft:rgba(98,54,244,0.10);
}
@media(max-width:720px){:root{--gut:20px}}

/* ---------- base ---------- */
body{font-family:var(--sans);font-size:15px;line-height:1.6;letter-spacing:normal;background:var(--bg);color:var(--text)}
::selection{background:var(--accent);color:var(--cream)}
body :is(h1,h2,h3,h4,h5,.h2){font-family:var(--sans);font-weight:600;color:var(--text)}
body *{border-radius:0}
body :is(.btn,button,input,textarea,select,.tag,.tag-inline,.pop-tag,.track-tag,.node,.art,.b,.demo-tab,.install,.chip,.cp,.new,.hl,.airgap,.arch-node,.arch-step,.pc-btn,.prod,.door,.layer,.pillar,.feat,.case,.rung,.plan,.p,.secrev,.steps,.cloud-alt,.person,.facts,.hero-stats,.zone,.fq-card,.claims,.honest,.card,.cloud-card,.ask,.dp,.avatar,.proof,.track,.win,.code,.codeblock,.term-win,.demo-video,.yt,.arch,.arch-uml,.cta-box){border-radius:0}
body .win-top .d,body .code .bar .d,body .bar .d{border-radius:0!important;background:var(--border-2)!important;width:8px!important;height:8px!important}
body a{text-underline-offset:4px}
body strong,body b{font-weight:600}

/* a fixed rail down the right edge, the way a terminal leaves a margin */
@media(min-width:1500px){
  body::after{content:"// thinkingdbx  ·  sovereign ai //";position:fixed;top:0;right:0;bottom:0;width:58px;z-index:40;pointer-events:none;
      border-left:1px solid var(--border);writing-mode:vertical-rl;font-family:var(--sans);font-size:11px;letter-spacing:0.08em;color:var(--text-3);padding-top:84px;text-align:left;line-height:58px}
}

/* ---------- labels: mono, upper case ---------- */
body :is(.eyebrow,.kicker,.finding-k,.dp-k,.fh,.door .k,.layer .k,.case .k,.pillar .k,.feat .k,.track-tag,.pop-tag,.tag,.tag-inline,
  .proof .k,.zone .zl,.strip .lbl,.secrev .q,.tl-step .t,.plan .inr,.micro,.layer .meta,.lnk,.door .price,.door .go,.case .rd,.prod .rd,
  .demo-cap,.dp-field label,.track .price .from,.when,.terms .t,.terms .p,.steps .t,.row .k,.p .k,.role,.links a){font-family:var(--sans)}
body :is(.eyebrow,.finding-k,.dp-k,.fh,.door .k,.layer .k,.case .k,.pillar .k,.feat .k,.track-tag,.pop-tag,.tag,.tag-inline,
  .proof .k,.zone .zl,.strip .lbl,.tl-step .t,.steps .t,.row .k,.p .k){font-weight:600;letter-spacing:0.06em;text-transform:uppercase;font-size:12px}
body .eyebrow{color:var(--text-3);margin-bottom:14px}
body .eyebrow::before{content:"// ";color:var(--accent-2)}
body :is(.door .k,.layer .k,.case .k,.pillar .k,.feat .k,.finding-k,.dp-k,.tl-step .t){color:var(--green)}
body :is(.lnk,.door .go,.case .rd,.prod .rd){font-size:13px;font-weight:600;letter-spacing:0.04em;color:var(--text);text-decoration:none}
body :is(.lnk,.door .go,.case .rd,.prod .rd):hover{color:var(--green);text-decoration:none}
body .tag,body .tag-inline,body .pop-tag,body .track-tag{font-size:10.5px;padding:3px 8px}
body .tag-inline,body .pop-tag{background:var(--accent);color:var(--cream);font-weight:500}
body .tag.live{color:var(--green);border-color:var(--green-dim);background:transparent}

/* ---------- buttons ---------- */
body .btn{font-family:var(--sans);font-weight:500;font-size:12.5px;letter-spacing:0.05em;text-transform:uppercase;border-radius:0;padding:10px 18px;border:0;transition:background .15s,color .15s,box-shadow .15s}
body .btn.lg{padding:13px 24px;font-size:13px}
body .btn.sm{padding:9px 16px;font-size:12px}
body .btn.green{background:var(--cream);color:var(--ink);font-weight:600;
    box-shadow:-2px 0 0 var(--ca-1),2px 0 0 var(--ca-2),0 2px 0 var(--ca-3)}
body .btn.green:hover{background:var(--accent);color:var(--cream);box-shadow:-2px 0 0 var(--ca-2),2px 0 0 var(--ca-1),0 2px 0 var(--ca-3)}
body .btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border-2);padding:9px 17px}
body .btn.ghost.lg{background:var(--accent);color:var(--cream);border:0;padding:13px 24px}
body .btn.ghost:hover{background:var(--surface-2);border-color:var(--text-3)}
body .btn.ghost.lg:hover{background:var(--accent-2)}
html[data-theme="light"] body .btn.green{background:var(--ink);color:var(--cream)}
html[data-theme="light"] body .btn.green:hover{background:var(--accent);color:var(--cream)}
body .cta-row{gap:18px}

/* ---------- header ---------- */
body .nav{position:sticky;top:0;z-index:60;background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--border)}
html[data-theme="light"] body .nav{background:var(--bg)}
body .nav-in{max-width:none;margin:0;padding:0;height:60px;display:flex;align-items:stretch;justify-content:flex-start;gap:0}
body .nav .logo{flex:none;padding:0 28px;border-right:1px solid var(--border);font-size:18px;font-weight:500;gap:11px;letter-spacing:-0.02em;color:var(--text)}
body .logo .mk{width:30px;height:30px;border:2px solid var(--text);background:transparent;color:var(--text);font-size:13px;font-weight:600;border-radius:0}
body .nav-links{flex:1;display:flex;align-items:stretch;justify-content:center;gap:0;font-family:var(--sans);font-size:12.5px;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;color:var(--text)}
body .nav-links>a,body .nav-top{display:flex;align-items:center;gap:8px;padding:0 clamp(12px,2.3vw,40px);background:none;border:0;color:var(--text);font:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;white-space:nowrap}
body .nav-links>a:hover,body .nav-grp:hover .nav-top,body .nav-grp:focus-within .nav-top{color:var(--green)}
body .nav-links a.active,body .nav-grp.active .nav-top{box-shadow:inset 0 -2px 0 var(--accent)}
body .nav-top::after{content:"+";color:var(--text-3);font-size:13px}
body .nav-grp:hover .nav-top::after,body .nav-grp:focus-within .nav-top::after{content:"−";color:var(--green)}
body .nav-grp{position:relative;display:flex}
body .nav-menu{position:absolute;top:100%;left:0;min-width:340px;margin-top:1px;background:var(--bg);border:1px solid var(--border-2);border-top:0;display:none;flex-direction:column;z-index:70}
body .nav-grp:hover .nav-menu,body .nav-grp:focus-within .nav-menu{display:flex}
body .nav-menu a{display:block;padding:16px 22px;border-top:1px solid var(--border);text-transform:none;letter-spacing:-0.01em}
body .nav-menu a b{display:block;font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:-0.015em;color:var(--text);margin-bottom:2px}
body .nav-menu a span{display:block;font-size:12px;color:var(--text-2);line-height:1.5}
body .nav-menu a:hover,body .nav-menu a.active{background:var(--accent)}
body .nav-menu a:hover b,body .nav-menu a:hover span,body .nav-menu a.active b,body .nav-menu a.active span{color:var(--cream)}
body .nav-r{flex:none;gap:0;align-items:stretch;border-left:1px solid var(--border)}
body .nav-r>*{height:100%;display:flex;align-items:center;margin:0}
body .nav-r .btn.ghost,body .nav-r #theme-btn{border:0;border-right:1px solid var(--border);padding:0 22px!important;font-size:13px!important;background:transparent;color:var(--text)}
body .nav-r .btn.ghost:hover,body .nav-r #theme-btn:hover{background:var(--surface-2);color:var(--green)}
body .nav-r .btn.green{padding:0 26px;font-size:12.5px;box-shadow:inset 2px 0 0 var(--ca-1),inset -2px 0 0 var(--ca-2),inset 0 -2px 0 var(--ca-3)}
body .nav-r .btn.green:hover{box-shadow:inset 2px 0 0 var(--ca-2),inset -2px 0 0 var(--ca-1),inset 0 -2px 0 var(--ca-3)}
body .nav-burger{display:none;flex:none;margin-left:auto;align-items:center;padding:0 22px;background:none;border:0;border-left:1px solid var(--border);color:var(--text);font-family:var(--sans);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer}
@media(max-width:1180px){
  body .nav-links>a,body .nav-top{padding:0 14px}
  body .nav .logo{padding:0 22px}
}
@media(max-width:980px){
  body .nav-in{height:56px}
  body .nav-burger{display:flex}
  body .nav-r .nav-hosted{display:none}
  body .nav-r .btn.green{padding:0 18px}
  body .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;justify-content:flex-start;background:var(--bg);border-bottom:1px solid var(--border-2);max-height:calc(100vh - 56px);overflow-y:auto}
  body .nav.open .nav-links{display:flex}
  body .nav-links>a,body .nav-top{padding:18px var(--gut);border-top:1px solid var(--border);width:100%;justify-content:space-between;box-shadow:none}
  body .nav-grp{flex-direction:column}
  body .nav-menu{position:static;display:flex;min-width:0;border:0;margin:0}
  body .nav-menu a{padding:14px var(--gut) 14px calc(var(--gut) + 18px)}
  body .nav-top::after{content:""}
}
@media(max-width:520px){
  body .nav .logo{font-size:17px;padding:0 16px;border-right:0}
  body .nav-r .btn.green .lbl-full{display:none}
  body .nav-r .btn.green .lbl-short{display:inline}
  body .nav-r #theme-btn{padding:0 14px!important}
}

/* ---------- hero ---------- */
body .hero{position:relative;background:var(--bg);border-bottom:1px solid var(--border);overflow:hidden}
html[data-theme="light"] body .hero{background:var(--bg)}
body .hero-bg{position:absolute;inset:0;z-index:0;background:none;mask-image:linear-gradient(#000 55%,transparent 96%);-webkit-mask-image:linear-gradient(#000 55%,transparent 96%)}
html[data-theme="light"] body .hero-bg{background:none}
body .hero-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
html[data-theme="light"] body .hero-bg canvas{opacity:1;filter:none}
body .hero-in{position:relative;z-index:1;max-width:var(--maxw);padding:clamp(52px,6vw,80px) var(--gut) clamp(36px,4vw,52px)}
body .kicker{font-family:var(--sans);font-weight:400;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-2);margin-bottom:26px;gap:12px}
body .kicker .live{width:9px;height:9px;border-radius:0;background:var(--accent);box-shadow:none}
html[data-theme="light"] body .kicker .live{background:var(--accent)}
body :is(.hero h1,.hero-in h1,section > .sec-head h1,h1.h1):not(article h1,.post h1,.post-head h1){font-size:clamp(2.3rem,4.4vw,3.5rem);font-weight:600;line-height:1.08;letter-spacing:-0.03em;margin-bottom:22px;color:var(--text);text-wrap:balance}
body h1 .g{color:var(--text)}
body .sub{font-family:var(--sans);font-size:clamp(1.05rem,1.5vw,1.2rem);font-weight:450;line-height:1.6;color:var(--text-2);max-width:640px;margin-bottom:34px}
body .sub b{color:var(--text);font-weight:600}
body .micro{font-size:12px;letter-spacing:0.04em;color:var(--text-3);margin-top:26px}

/* three numbered columns under the hero, made from the old one-line strip */
.hero-pts{position:relative;z-index:1;max-width:960px;margin:clamp(36px,4vw,52px) auto 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;text-align:left}
.hero-pts.n2{grid-template-columns:repeat(2,1fr)}
.hero-pts.n4{grid-template-columns:repeat(4,1fr)}
.hero-pts>div{border-left:1px solid var(--border-2);padding:4px 24px 12px}
.hero-pts .n{display:block;font-family:var(--mono);font-size:14px;color:var(--text-3);margin-bottom:14px;letter-spacing:0.04em}
.hero-pts .n i{font-style:normal;color:var(--accent-2)}
.hero-pts p{font-family:var(--sans);font-weight:600;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.35;letter-spacing:-0.01em;color:var(--text);max-width:20ch}
@media(max-width:760px){.hero-pts,.hero-pts.n2,.hero-pts.n4{grid-template-columns:1fr}.hero-pts>div{padding:6px 20px 26px}.hero-pts .n{margin-bottom:12px}.hero-pts p{max-width:none}}

/* product frames */
body .shot{max-width:1080px;padding:0 var(--gut) clamp(48px,6vw,80px)}
body :is(.win,.code,.codeblock,.term-win){border:1px solid var(--border-2);background:var(--bg);box-shadow:none}
html[data-theme="light"] body :is(.win,.code,.codeblock,.term-win){box-shadow:none}
body :is(.win-top,.win-foot,.code .bar){background:var(--bg);border-color:var(--border)}
body .side{background:var(--bg)}
body .win-top .addr{color:var(--text-2)}
body .win-top .airgap,body .win-foot .art{color:var(--green);border-color:var(--green-dim);background:transparent;text-transform:uppercase;letter-spacing:0.05em;font-size:10.5px}
body .side .item.on{background:var(--accent);color:var(--cream)}
body .side .item.on .ic{color:var(--cream)}
html[data-theme="light"] body .side .item.on{background:var(--accent);color:var(--cream)}
body .code pre,body .codeblock pre{font-size:13px;line-height:1.75}

/* ---------- sections ---------- */
body section{position:relative;max-width:var(--maxw);padding:clamp(48px,5.5vw,76px) var(--gut)!important}
body section::before{content:"";position:absolute;top:0;left:50%;width:100vw;transform:translateX(-50%);border-top:1px solid var(--border);pointer-events:none}
body .hero + section::before,body nav + section::before{display:none}
body .sec-head{max-width:900px;margin-bottom:clamp(22px,3vw,40px)}
body .h2,body section>h2{font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:600;line-height:1.15;letter-spacing:-0.02em;margin-bottom:20px;text-wrap:balance}
body .lead{font-family:var(--sans);font-size:1.1rem;font-weight:450;line-height:1.6;color:var(--text-2);max-width:600px}
/* the bracket that leads the eye from a headline into its paragraph */
body .sec-head>.lead{position:relative;margin-left:100px;max-width:660px;padding-top:6px}
body .sec-head>.lead::before{content:"";position:absolute;left:-98px;top:-16px;width:84px;height:32px;border-left:1px solid var(--text);border-bottom:1px solid var(--text)}
@media(max-width:720px){body .sec-head>.lead{margin-left:44px}body .sec-head>.lead::before{left:-44px;width:32px;top:-18px;height:30px}}
body section h3{letter-spacing:-0.015em}

/* ---------- cards become ruled cells, numbered ---------- */
body :is(.stack,.doors,.pillars,.feat-grid,.cases,.rungs,.pricing,.prods,.people,.cs-list,.reasons,.princ,.topics,.cloud){counter-reset:cell;gap:0}
body :is(.layer,.door,.pillar,.feat,.case,.plan,.prod,.person,.card,.cloud-card,.fq-card){background:transparent;border:1px solid var(--border);margin:0 -1px -1px 0;padding:24px 24px 26px;transition:background .15s,border-color .15s}
body :is(.layer,.door,.pillar,.feat,.case,.plan,.prod,.person,.card,.cloud-card):hover{background:var(--surface-2);border-color:var(--border-2);box-shadow:none}
html[data-theme="light"] body :is(.pillar,.feat,.case,.p,.prod):hover{box-shadow:none}
body :is(.stack>.layer,.doors>.door,.pillars>.pillar,.feat-grid>.feat,.cases>.case)::before{counter-increment:cell;content:counter(cell,decimal-leading-zero) "/";display:block;font-family:var(--mono);font-size:13px;letter-spacing:0.02em;margin-bottom:16px;width:3ch;
    background:linear-gradient(90deg,var(--text-2) 0 66.6%,var(--accent-2) 66.6%);-webkit-background-clip:text;background-clip:text;color:transparent}
body :is(.layer,.door,.pillar,.feat,.case) :is(h3,h4){font-family:var(--sans);font-size:clamp(1.1rem,1.4vw,1.25rem);font-weight:600;letter-spacing:-0.02em;line-height:1.2;margin-bottom:12px}
body :is(.layer,.door,.pillar,.feat,.case,.prod,.sector,.person,.card) p{font-size:14px;line-height:1.7;color:var(--text-2)}
body .door .k{border-bottom:0;padding:0;margin-bottom:12px}
body .door{padding-top:24px}
body .prod h4{font-family:var(--sans);font-size:1.1rem;font-weight:600;letter-spacing:-0.02em;margin-bottom:10px}
body .prod{padding:24px 24px;flex-direction:column-reverse;justify-content:flex-end;gap:22px}
body .prod .tag{align-self:flex-start}

/* the home stack steps down like a staircase on wide screens */
@media(min-width:981px){
  body .stack{align-items:start;padding-bottom:96px}
  body .stack>.layer:nth-child(2){transform:translateY(48px)}
  body .stack>.layer:nth-child(3){transform:translateY(96px)}
}

/* ruled rows */
body .sectors{gap:0;margin-top:32px}
body .sector{border-top:0;border-left:1px solid var(--border-2);padding:4px 24px 14px}
body .sector h4,body .sectors.three .sector h4{font-family:var(--sans);font-size:clamp(1.05rem,1.3vw,1.2rem);font-weight:600;letter-spacing:-0.01em;line-height:1.3;margin-bottom:10px}
body .sectors{counter-reset:cell}
body .sector::before{counter-increment:cell;content:counter(cell,decimal-leading-zero) "/";display:block;font-family:var(--mono);font-size:13px;margin-bottom:14px;width:3ch;
    background:linear-gradient(90deg,var(--text-3) 0 66.6%,var(--accent-2) 66.6%);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:900px){body .sector{margin-bottom:26px}}

body .proof{border:1px solid var(--border);background:transparent}
body .proof .c{background:transparent;padding:24px 24px;border-right:1px solid var(--border)}
body .proof .n{font-family:var(--sans);font-size:clamp(1.4rem,2vw,1.8rem);font-weight:600;letter-spacing:-0.025em;line-height:1.1;margin-bottom:12px}
body .proof .n span{color:var(--green)}
body .proof .k{font-size:11.5px;color:var(--text-3)}

body .oss-list{border-top:1px solid var(--border-2);counter-reset:cell}
body .oss-list a{grid-template-columns:60px 260px 1fr auto;padding:20px 4px;border-bottom:1px solid var(--border);align-items:baseline}
body .oss-list a::before{counter-increment:cell;content:counter(cell,decimal-leading-zero) "/";font-family:var(--mono);font-size:16px;width:3ch;
    background:linear-gradient(90deg,var(--text) 0 66.6%,var(--accent-2) 66.6%);-webkit-background-clip:text;background-clip:text;color:transparent}
body .oss-list a:hover{background:transparent}
body .oss-list a:hover .n{color:var(--green)}
body .oss-list .n{font-family:var(--sans);font-size:clamp(1.2rem,1.9vw,1.6rem);font-weight:600;letter-spacing:-0.02em;line-height:1.15;color:var(--text)}
body .oss-list .d{font-size:14px;color:var(--text-2)}
body .oss-list .t{font-family:var(--sans);font-weight:400;font-size:11.5px;color:var(--text-3)}
@media(max-width:900px){body .oss-list a{grid-template-columns:50px 1fr;gap:6px 12px}body .oss-list .d,body .oss-list .t{grid-column:2}}

body .finding{border-left:1px solid var(--accent-2);padding-left:28px}
body .finding h3{font-size:clamp(1.3rem,2vw,1.75rem);letter-spacing:-0.02em;line-height:1.2}
body .finding p{font-size:14px}

body .zone{border:1px dashed var(--border-2);background:none}
body .zone.own{border-color:var(--accent-2)}
body .stack-map .node{background:transparent;color:var(--text);border-color:var(--border-2);text-transform:uppercase;letter-spacing:0.05em;font-size:11.5px}
body .stack-map .node.on{color:var(--green);border-color:var(--accent-2)}
html[data-theme="light"] body .node,html[data-theme="light"] body .node.on{background:transparent;box-shadow:none}
body .stack-map .wire{background:none;border-top:1px dotted var(--text-3);height:0}

body .dp{border:1px solid var(--border-2);background:transparent;padding:30px 30px;gap:28px}
body .dp h3{font-size:clamp(1.35rem,2.2vw,1.9rem);letter-spacing:-0.025em;line-height:1.12;margin:10px 0 16px}
body .dp p{font-size:14px;max-width:70ch}
body .dp .btn{padding:13px 24px;font-size:13px}

body .split{gap:clamp(32px,5vw,72px)}
body .split .pts .b{background:transparent;border:1px solid var(--accent-2);color:var(--green)}
body .split .pts h4{font-size:1.1rem;letter-spacing:-0.01em}
body .split .pts p{font-size:14px}
body .split .pts p a,body p a:not(.btn):not(.lnk){color:var(--green)}

/* ---------- closing band ---------- */
body .cta-final{position:relative;max-width:none;margin:0;padding:clamp(52px,6vw,84px) var(--gut);background:var(--cream);
    --text:#0b0b0b;--text-2:#3d3c39;--text-3:#66655e;--border:#cdccbd;--border-2:#8a897f;--green:#5127e0;--green-dim:#6236f4;--bg-2:#e7e6d9;color:var(--text)}
body .cta-box{max-width:calc(var(--maxw) - 2 * var(--gut));margin:0 auto;border:0;background:transparent;overflow:visible;grid-template-columns:1.15fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
body .cta-l{padding:0;border:0;background:none}
html[data-theme="light"] body .cta-l{background:none}
body .cta-l .eyebrow{color:var(--text-3)}
body :is(.cta-l h2,.cta-box h2,.cta-final h2){display:inline;font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:600;line-height:1.3;letter-spacing:-0.02em;color:var(--cream);background:var(--ink);padding:0.02em 0.14em;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;box-shadow:-3px 0 0 var(--ca-1),3px 0 0 var(--ca-2)}
body .cta-l h2 + p,body .cta-final h2 + p{margin-top:30px}
body .cta-l p,body .cta-final p{font-size:14.5px;color:var(--text-2);max-width:52ch}
body .cta-final .btn.green{background:var(--accent);color:var(--cream);box-shadow:none}
body .cta-final .btn.green:hover{background:var(--ink)}
body .cta-final .btn.ghost,body .cta-final .btn.ghost.lg{background:var(--ink);color:var(--cream);border:0;box-shadow:-2px 0 0 var(--ca-1),2px 0 0 var(--ca-2),0 2px 0 var(--ca-3)}
body .cta-final .btn.ghost:hover{background:var(--accent)}
body .cta-final .lnk{color:var(--text)}
body .cta-final .lnk:hover{color:var(--green)}
body .cta-r{padding:0;background:none}
html[data-theme="light"] body .cta-r{background:none}
body .tl{padding-left:0;counter-reset:cell}
body .tl::before{display:none}
body .tl-step{padding:16px 0 16px 64px;border-top:1px solid var(--border-2)}
body .tl-step:last-child{border-bottom:1px solid var(--border-2)}
body .tl-step .dot{display:none}
body .tl-step::before{counter-increment:cell;content:counter(cell,decimal-leading-zero) "/";position:absolute;left:0;top:17px;font-family:var(--mono);font-size:16px;color:var(--text)}
body .tl-step .t{display:none}
body .tl-step h4{font-family:var(--sans);font-size:1.1rem;font-weight:600;letter-spacing:-0.02em;margin-bottom:6px;color:var(--text)}
body .tl-step p{font-size:14px;color:var(--text-2)}
@media(max-width:860px){body .cta-box{grid-template-columns:1fr}}
/* in the cream theme the band inverts, so it still closes the page */
html[data-theme="light"] body .cta-final{background:var(--ink);--text:#e7e6d9;--text-2:#b0afa6;--text-3:#7f7e76;--border:#222220;--border-2:#42413e;--green:#a186f8}
html[data-theme="light"] body :is(.cta-l h2,.cta-box h2,.cta-final h2){color:var(--ink);background:var(--cream)}
html[data-theme="light"] body .cta-final .btn.ghost{background:var(--cream);color:var(--ink)}

/* ---------- footer ---------- */
body footer.lf{border-top:1px solid var(--border);padding:0;background:var(--bg)}
html[data-theme="light"] body footer.lf{background:var(--bg)}
.lf-in{max-width:var(--maxw);margin:0 auto;padding:26px var(--gut) 0}
.lf-tag{font-family:var(--sans);font-size:12px;letter-spacing:0.08em;color:var(--text-3)}
.lf-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,5vw,96px);margin-top:clamp(36px,5vw,60px)}
.lf-col .fh{font-family:var(--sans);font-size:12.5px;font-weight:400;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-2);padding-bottom:16px;border-bottom:1px solid var(--border);margin-bottom:18px}
.lf-col a{display:block;font-family:var(--sans);font-size:13px;letter-spacing:0.05em;text-transform:uppercase;color:var(--text);padding:5px 0}
.lf-col a:hover{color:var(--green)}
.lf-brand{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;flex-wrap:wrap;margin-top:clamp(40px,6vw,72px)}
.lf-brand .logo{font-size:clamp(24px,2.6vw,30px);gap:16px;letter-spacing:-0.02em;font-weight:500;color:var(--text);display:inline-flex;align-items:center;font-family:'Space Grotesk',var(--sans)}
.lf-brand .logo .mk{width:1.25em;height:1.25em;font-size:0.5em;border-width:3px}
.lf-brand .logo .mk{font-size:0.48em;width:2.5em;height:2.5em}
.lf-brand .foot-about{font-size:13px;color:var(--text-2);max-width:54ch;margin-top:20px;line-height:1.7}
body footer a.nv-badge{display:inline-block;margin:22px 0 0 -8px;line-height:0}
body footer a.nv-badge img{display:block;width:139px;height:60px}
.lf-social{display:flex;gap:10px}
.lf-social a{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--border-2);font-family:var(--sans);font-size:12px;letter-spacing:0.04em;color:var(--text)}
.lf-social a:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
html[data-theme="light"] .lf-social a:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.lf-legal{font-family:var(--sans);font-size:12.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-3);text-align:center;padding:36px 0 40px}
/* the page runs out in a stack of rules that close up, like a horizon */
.lf-lines{height:120px;margin-top:0;border-top:1px solid var(--border);
    background:linear-gradient(var(--border),var(--border)) 0 42px/100% 1px no-repeat,
               linear-gradient(var(--border),var(--border)) 0 76px/100% 1px no-repeat,
               linear-gradient(var(--border),var(--border)) 0 95px/100% 1px no-repeat,
               linear-gradient(var(--border),var(--border)) 0 106px/100% 1px no-repeat,
               linear-gradient(var(--border),var(--border)) 0 112px/100% 1px no-repeat,
               linear-gradient(var(--border),var(--border)) 0 116px/100% 1px no-repeat}
@media(max-width:860px){.lf-cols{grid-template-columns:1fr 1fr}.lf-brand{align-items:flex-start;flex-direction:column}}
@media(max-width:480px){.lf-cols{grid-template-columns:1fr}}

/* ---------- motion ---------- */
@media(prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .rv.in{opacity:1;transform:none}
}

/* ---------- rungs: numbered rows, the way a spec sheet lists options ---------- */
body .rungs{gap:0;border-bottom:1px solid var(--border-2)}
body .rung{grid-template-columns:84px 1fr 260px;gap:28px;background:transparent;border:0;border-top:1px solid var(--border-2);padding:28px 0}
body .rung:hover{border-color:var(--border-2)}
body .rung .num{font-family:var(--mono);font-size:20px;font-weight:400;color:var(--text);letter-spacing:0}
body .rung .num::after{content:"/";color:var(--accent-2);margin-left:4px}
body .rung h3{font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:600;letter-spacing:-0.02em;line-height:1.15;margin-bottom:12px}
body .rung .when{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--text)}
body .rung p,body .rung ul li{font-size:14px;line-height:1.7}
body .rung ul li::before{background:var(--accent-2);border-radius:0}
body .rung .terms{border-left:1px solid var(--border);padding-left:28px}
body .rung .terms .t{text-transform:uppercase;letter-spacing:0.06em;font-size:11.5px}
body .rung .terms .p{font-family:var(--sans);font-size:1.5rem;font-weight:600;letter-spacing:-0.02em}
@media(max-width:860px){body .rung{grid-template-columns:64px 1fr;gap:16px}body .rung .terms{border-left:0;padding-left:0}}

/* ---------- accordion beside a diagram ---------- */
.acc-wrap{display:grid;grid-template-columns:1.2fr 0.9fr;gap:clamp(32px,5vw,88px);align-items:start;margin-top:clamp(24px,3vw,44px)}
.accs{border-bottom:1px solid var(--border-2)}
.acc{border-top:1px solid var(--border-2)}
.acc summary{list-style:none;display:grid;grid-template-columns:84px 1fr 24px;align-items:baseline;gap:0;padding:22px 0 20px;cursor:pointer}
.acc summary::-webkit-details-marker{display:none}
.acc-n{font-family:var(--mono);font-size:20px;line-height:1;color:var(--text)}
.acc-n i{font-style:normal;color:var(--accent-2);margin-left:4px}
body .acc summary h3{font-family:var(--sans);font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:600;letter-spacing:-0.02em;line-height:1.2;margin:0;max-width:17ch}
.acc-x{position:relative;width:14px;height:14px;align-self:center;justify-self:end}
.acc-x::before,.acc-x::after{content:"";position:absolute;left:0;top:6px;width:14px;height:1.5px;background:var(--text)}
.acc-x::after{transform:rotate(90deg);transition:transform .2s}
.acc[open] .acc-x::after{transform:rotate(0)}
.acc summary:hover h3{color:var(--green)}
.acc-b{padding:0 24px 26px 84px}
.acc-b .k{font-family:var(--sans);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--green);margin-bottom:14px}
.acc-b p{font-size:14.5px;line-height:1.7;color:var(--text-2);max-width:58ch}
.acc-b .meta{font-family:var(--sans);font-size:12px;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-3);margin-top:18px}
.acc-b .acts{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:26px}
.iso-wrap{position:sticky;top:84px;max-width:480px;justify-self:center;width:100%}
@media(max-width:980px){.acc-wrap{grid-template-columns:1fr}.iso-wrap{position:static;max-width:520px}}
@media(max-width:640px){.acc summary{grid-template-columns:64px 1fr 20px}.acc-n{font-size:22px}.acc-b{padding-left:0;padding-right:0}}

/* ---------- line diagrams ---------- */
.iso{display:block;width:100%;height:auto;overflow:visible}
.iso .f{fill:var(--bg);stroke:var(--border-2);stroke-width:1;stroke-linejoin:round}
.iso .ol{fill:none;stroke:var(--border-2);stroke-width:1}
.iso .ca1,.iso .ca2{fill:none;stroke-width:1;opacity:0;transition:opacity .25s}
.iso .ca1{stroke:var(--ca-1)}
.iso .ca2{stroke:var(--ca-2)}
.iso .dot{fill:var(--text-3);opacity:0.55}
.iso .dot.on{fill:var(--text-3);opacity:0.7}
.iso .wall{font-family:var(--mono);font-size:15px;fill:var(--text-3);transition:fill .25s}
.iso .wall .nm{font-weight:600}
.iso .wall .wh{font-size:11.5px;letter-spacing:0.06em;text-transform:uppercase}
.iso .pl{transition:transform .35s ease}
.iso .pl.on .ol{stroke:var(--text)}
.iso .pl.on .f{stroke:var(--text-2)}
.iso .pl.on .ca1,.iso .pl.on .ca2{opacity:0.9}
.iso .pl.on .wall{fill:var(--text)}
.iso .pl.on .dot{fill:var(--text-2);opacity:0.9}
.iso .pl.on .dot.on{fill:var(--cream);opacity:1;filter:drop-shadow(-1.5px 0 0 var(--ca-1)) drop-shadow(1.5px 0 0 var(--ca-2))}
html[data-theme="light"] .iso .pl.on .dot.on{fill:var(--ink)}
.iso .pl.on{transform:translateY(-8px)}
.iso .zone .br{fill:none;stroke:var(--border-2);stroke-width:1}
.iso .zone .lead,.iso .riser{stroke:var(--text-3);stroke-width:1;stroke-dasharray:1 4}
.iso .zl{font-family:var(--mono);font-size:12px;letter-spacing:0.1em;fill:var(--text-2)}
.iso .zl.sm{font-size:10px;fill:var(--text-3)}
.iso .zone.own .br{stroke:var(--accent-2)}

.sec-split{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,5vw,88px);align-items:center}
.sec-split .sec-head{margin-bottom:0}
@media(max-width:980px){.sec-split{grid-template-columns:1fr}.sec-split .orbit{max-width:420px}}
.orbit{display:block;width:100%;height:auto;overflow:visible}
.orbit .ring{fill:none;stroke:var(--border-2);stroke-width:1}
.orbit .ring.in{stroke:var(--text-2)}
.orbit .core{fill:var(--cream);filter:drop-shadow(-2px 0 0 var(--ca-1)) drop-shadow(2px 0 0 var(--ca-2))}
html[data-theme="light"] .orbit .core{fill:var(--ink)}
.orbit .tick{stroke:var(--text-3);stroke-width:1;stroke-dasharray:1 4}
.orbit .x{stroke:var(--text-3);stroke-width:1}
.orbit text{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;fill:var(--text-2)}
.orbit text.c{fill:var(--text);font-size:11.5px}
@media(prefers-reduced-motion:no-preference){
  .orbit .spin{transform-origin:260px 260px;animation:orbit 60s linear infinite}
  .orbit .spin.r{animation-duration:90s;animation-direction:reverse}
  @keyframes orbit{to{transform:rotate(360deg)}}
}

/* pixel dust: a sparse field of small squares behind a block */
.dust{position:relative}
.dust::before{content:"";position:absolute;inset:-70px calc(-1 * var(--gut));pointer-events:none;z-index:0;opacity:0.9;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='320'%3E%3Cg fill='%2342413e'%3E%3Crect x='22' y='40' width='6' height='6'/%3E%3Crect x='28' y='46' width='6' height='6'/%3E%3Crect x='190' y='18' width='5' height='5'/%3E%3Crect x='196' y='24' width='5' height='5'/%3E%3Crect x='184' y='24' width='5' height='5'/%3E%3Crect x='330' y='120' width='6' height='6'/%3E%3Crect x='96' y='210' width='5' height='5'/%3E%3Crect x='102' y='204' width='5' height='5'/%3E%3Crect x='260' y='270' width='6' height='6'/%3E%3Crect x='380' y='236' width='4' height='10'/%3E%3C/g%3E%3Crect x='300' y='62' width='7' height='7' fill='%23e7e6d9'/%3E%3Crect x='298' y='62' width='2' height='7' fill='%23ff2bd6'/%3E%3Crect x='307' y='62' width='2' height='7' fill='%2319e3ff'/%3E%3Crect x='60' y='150' width='6' height='6' fill='%23e7e6d9'/%3E%3Crect x='58' y='150' width='2' height='6' fill='%23ff2bd6'/%3E%3Crect x='66' y='150' width='2' height='6' fill='%2319e3ff'/%3E%3C/svg%3E");
    background-size:420px 320px}
.dust>*{position:relative;z-index:1}
html[data-theme="light"] .dust::before{opacity:0.35;filter:invert(1)}

/* the three open models step down like a staircase on wide screens */
@media(min-width:981px){
  body .prods.stair{align-items:start;padding-bottom:72px}
  body .prods.stair>.prod{background:var(--bg)}
  body .prods.stair>.prod:nth-child(2){transform:translateY(36px)}
  body .prods.stair>.prod:nth-child(3){transform:translateY(72px)}
}

/* ---------- architecture diagrams: line work on the field, no filled boxes ---------- */
body .arch,body .arch-uml{background:transparent;background-image:none;border:1px solid var(--border);padding:26px 24px}
html[data-theme="light"] body .arch,html[data-theme="light"] body .arch-uml{background-image:none}
body .arch-toggle{gap:0}
body .arch-toggle button{background:transparent;border:1px solid var(--border-2);margin-right:-1px;padding:11px 18px;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-2)}
body .arch-toggle button.active{background:var(--cream);color:var(--ink);border-color:var(--cream)}
html[data-theme="light"] body .arch-toggle button.active{background:var(--ink);color:var(--cream);border-color:var(--ink)}
body .uml text{font-family:var(--mono);letter-spacing:0.02em}
body .uml .t{fill:var(--text)}
body .uml .t2{fill:var(--text-2)}
body .uml .st{fill:var(--text-3);letter-spacing:0.06em}
body .uml .gt{fill:var(--green);letter-spacing:0.06em}
body .uml :is(.bx,.ibx,.act){fill:var(--bg);stroke:var(--border-2)}
body .uml .core{fill:var(--bg);stroke:var(--text);filter:drop-shadow(-2px 0 0 var(--ca-1)) drop-shadow(2px 0 0 var(--ca-2))}
body .uml .msg{stroke:var(--text-2)}
body .uml :is(.dep,.ret){stroke:var(--text-3);stroke-dasharray:1 4}
body .uml :is(.thin,.life,.frame){stroke:var(--border-2)}
body .uml .life{stroke-dasharray:1 5}
body .uml .port{fill:var(--bg);stroke:var(--text-2)}
body .uml :is(.actor,.doc){stroke:var(--text-2)}
body .uml rect[fill="#0f0f0f"],body .uml rect[fill="#151515"],body .uml path[fill="#151515"]{fill:var(--bg);stroke:var(--border-2)}
body .uml marker path[fill="none"]{stroke:var(--text-2)}
body .uml marker path[fill="#b0afa6"]{fill:var(--text-2)}
body .arch-node{background:transparent;border-color:var(--border-2);color:var(--text);text-transform:uppercase;letter-spacing:0.05em;font-size:11.5px;padding:11px 12px}
body .arch-node .ic{color:var(--green)}
body .arch-col.in .arch-node::after,body .arch-col.out .arch-node::after{background:none;border-top:1px dotted var(--text-3);height:0}
body .arch-col.in .arch-node::before,body .arch-col.out .arch-node::before{background:var(--cream);box-shadow:-2px 0 0 var(--ca-1),2px 0 0 var(--ca-2);border-radius:0}
html[data-theme="light"] body .arch-col.in .arch-node::before,html[data-theme="light"] body .arch-col.out .arch-node::before{background:var(--ink)}
body .arch-core{background:var(--bg);border:1px solid var(--text);box-shadow:-2px 0 0 var(--ca-1),2px 0 0 var(--ca-2)}
html[data-theme="light"] body .arch-core{border-color:var(--text);box-shadow:-2px 0 0 var(--ca-1),2px 0 0 var(--ca-2)}
body .arch-core .hd,body .arch-base{background:transparent}
body .arch-core .hd .mk2{background:transparent;border:1.5px solid var(--text);color:var(--text)}
body .arch-step{background:transparent;border:0;border-bottom:1px solid var(--border);padding:11px 2px;font-size:12.5px}
body .arch-step:last-child{border-bottom:0}
body .arch-lbl{color:var(--text-3)}

/* ---------- blog index: a ruled, dated list ---------- */
body .wrap{max-width:var(--maxw);padding:clamp(40px,5vw,72px) var(--gut) clamp(72px,9vw,128px)}
body .topics{gap:0;margin-bottom:36px}
body .topics button{font-family:var(--sans);font-size:12px;font-weight:400;letter-spacing:0.06em;text-transform:uppercase;padding:11px 18px;margin:0 -1px -1px 0;border:1px solid var(--border-2);color:var(--text-2)}
body .topics button.on{background:var(--cream);color:var(--ink);border-color:var(--cream)}
html[data-theme="light"] body .topics button.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
body .post{border-top:1px solid var(--border-2)}
body .post:last-child{border-bottom:1px solid var(--border-2)}
body .post a.card{grid-template-columns:200px 1fr;gap:28px;padding:26px 0;border:0;margin:0;background:transparent}
body .post a.card:hover{background:transparent}
body .post .date{color:var(--text-2);font-size:12px}
body .post .new{background:var(--accent);border:0;color:var(--cream);font-size:10px;padding:3px 7px}
body .post .title{font-family:var(--sans);font-size:clamp(1.2rem,1.9vw,1.6rem);font-weight:600;letter-spacing:-0.02em;line-height:1.15;margin-bottom:14px;color:var(--text)}
body .post .ex{font-size:14px;line-height:1.7;max-width:820px}
body .post .meta{text-transform:uppercase;letter-spacing:0.06em;font-size:11.5px}
body .post .meta .dot{border-radius:0}
@media(max-width:760px){body .post a.card{grid-template-columns:1fr;gap:10px}}

/* ---------- articles: the same chrome, a reading face for the text ---------- */
body.post-page{font-family:var(--sans);font-size:16px;letter-spacing:0;color:var(--read,var(--text-2))}
body.post-page :is(h1,.h1){font-family:var(--sans);font-size:clamp(2rem,4vw,3rem);font-weight:600;line-height:1.12;letter-spacing:-0.03em;color:var(--text);text-wrap:balance}
body.post-page .article h2{font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-0.02em;line-height:1.15;margin-top:64px;padding-top:28px;border-top:1px solid var(--border)}
body.post-page .article h3{font-size:1.3rem;letter-spacing:-0.015em}
body.post-page :is(.meta-tag,.article-meta,.stat .lbl,.article th){text-transform:uppercase;letter-spacing:0.06em;font-size:12px}
body.post-page .meta-tag{color:var(--text-3)}
body.post-page .meta-tag::before{content:"// ";color:var(--accent-2)}
body.post-page .article-meta span+span::before{border-radius:0}
body.post-page .byline .avatar{border-radius:0;background:transparent;border:1px solid var(--border-2);color:var(--text)}
body.post-page .article a{color:var(--green)}
body.post-page .article em{color:var(--text)}
body.post-page .article blockquote{border-left:1px solid var(--accent-2);padding-left:24px}
body.post-page :is(.code-block,.article pre){background:var(--bg);border:1px solid var(--border-2);border-left:1px solid var(--border-2)}
body.post-page .article code{background:transparent;border-color:var(--border-2)}
body.post-page .article th{background:transparent;color:var(--text-2);font-weight:400}
body.post-page .article :is(th,td){border-color:var(--border);border-left:0;border-right:0}
body.post-page .stat .val{color:var(--text);font-size:2.2rem;letter-spacing:-0.03em}
body.post-page .cta-block{background:var(--cream);border:0;padding:40px 36px;--text:#0b0b0b;--text-2:#3d3c39;--read:#3d3c39;--green:#5127e0;color:#0b0b0b}
body.post-page .cta-block h3{font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-0.025em;line-height:1.1;color:#0b0b0b}
body.post-page .cta-block p{color:#3d3c39}
body.post-page .btn:not(.sm){background:var(--accent);color:var(--cream);padding:15px 28px;box-shadow:none}
body.post-page .btn:not(.sm):hover{background:var(--ink);color:var(--cream)}
body.post-page main :is(img,video,iframe,.demo-frame,.yt){border-radius:0}

/* ---------- small screens and theme corrections ---------- */
html[data-theme="light"] body .cta-final .btn.green{background:var(--accent);color:var(--cream)}
html[data-theme="light"] body .cta-final .btn.green:hover{background:var(--cream);color:var(--ink)}
body .kicker .live{flex:none}
@media(max-width:720px){
  .dust::before{inset:-40px 0}
  body .hero-in{text-align:left}
  body .hero .cta-row{justify-content:flex-start}
  body .kicker{font-size:11.5px;letter-spacing:0.08em;text-align:left}
  body .btn.lg,body .btn.ghost.lg{padding:15px 22px;font-size:13px}
  body .cta-row{gap:12px}
}
@media(max-width:520px){
  body .nav .logo{font-size:16px;padding:0 14px;gap:8px}
  body .logo .mk{width:26px;height:26px;font-size:11px}
  body .nav-r .btn.green{padding:0 14px;font-size:11.5px;letter-spacing:0.04em}
  body .nav-r #theme-btn{padding:0 12px!important}
  body .nav-burger{padding:0 14px;font-size:11.5px}
}
@media(max-width:360px){
  body .nav .logo{font-size:0;gap:0}
  body .nav .logo .mk{font-size:11px}
}

/* ---------- isometric architecture diagrams ---------- */
.idg{display:block;width:100%;height:auto;min-width:900px;overflow:visible}
.idg .f{fill:var(--bg);stroke:var(--border-2);stroke-width:1;stroke-linejoin:round}
.idg .ol{fill:none;stroke:var(--border-2);stroke-width:1}
.idg .ca1,.idg .ca2{fill:none;stroke-width:1;opacity:0}
.idg .ca1{stroke:var(--ca-1)}
.idg .ca2{stroke:var(--ca-2)}
.idg .dot{fill:var(--text-3);opacity:0.6}
.idg .sl.hot .f{stroke:var(--text-2)}
.idg .sl.hot .ol{stroke:var(--text)}
.idg .sl.hot .ca1,.idg .sl.hot .ca2{opacity:0.9}
.idg .sl.hot .dot.on{fill:var(--cream);opacity:1;filter:drop-shadow(-1.5px 0 0 var(--ca-1)) drop-shadow(1.5px 0 0 var(--ca-2))}
html[data-theme="light"] .idg .sl.hot .dot.on{fill:var(--ink)}
.idg text{font-family:var(--mono);fill:var(--text-2)}
.idg .wall{fill:var(--text-2);letter-spacing:0.08em}
.idg .sl.hot .wall{fill:var(--text)}
.idg .c{text-anchor:middle}
.idg .e{text-anchor:end}
.idg .kd{font-size:10.5px;letter-spacing:0.1em;fill:var(--text-3)}
.idg .nm{font-size:12.5px;fill:var(--text)}
.idg .nt{font-size:11px;fill:var(--text-3);letter-spacing:0.02em}
.idg .ds{font-size:12.5px;fill:var(--text-2)}
.idg .tg{font-size:12px;letter-spacing:0.06em;fill:var(--green)}
.idg .num{fill:var(--text-3)}
.idg .sl-{fill:var(--accent-2)}
.idg .ttl{font-family:var(--sans);font-weight:600;font-size:22px;letter-spacing:-0.02em;fill:var(--text)}
.idg .ttl.s{font-size:15px;letter-spacing:-0.01em}
.idg .flow,.idg .ret,.idg .life{stroke:var(--text-3);stroke-width:1;stroke-dasharray:1 4;fill:none}
.idg .life{stroke:var(--border-2);stroke-dasharray:1 5}
.idg .call{stroke:var(--text-2);stroke-width:1;fill:none}
.idg .hotl{stroke:var(--accent-2)}
.idg .ret.hotl{stroke-dasharray:3 3}
.idg .hd{fill:var(--text-2)}
.idg .hd.hotl{fill:var(--accent-2);stroke:none}
.idg .br,.idg .frame{fill:none;stroke:var(--border-2);stroke-width:1}
.idg .frame{stroke-dasharray:4 4}
.idg .tab{fill:var(--bg);stroke:var(--border-2)}
.idg .port{fill:var(--bg);stroke:var(--text-2)}
.idg .ring{fill:var(--bg);stroke:var(--accent-2);stroke-width:1.5}
body .arch-uml svg.idg{min-width:900px}

/* ---------- the mark: traced from the brand image (logo.png) ----------
   The outline is measured from the image, not typed or stroked: a chevron
   with flat-cut arms, 33 by 34 units, and an underscore 37 by 7 units set
   below and to the right. Its size, its gap to the wordmark and its drop
   below the baseline are the image's too, in ems of the wordmark. */
body .logo,body .nav .logo,.lf-brand .logo{gap:0.40em;align-items:center;letter-spacing:0.054em}
body .logo .mk,body .nav .logo .mk,body .lf-brand .logo .mk{width:1.167em;height:0.764em;font-size:1em;flex:none;border:0;border-radius:0;display:block;color:transparent;overflow:hidden;
    background:#3ecf8e;transform:translateY(0.12em);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 55'%3E%3Cpath d='M0 0 32 12V21.5L0 33.5V26L22 16.75 0 7.5z'/%3E%3Crect x='47' y='48' width='37' height='7'/%3E%3C/svg%3E") center/100% 100% no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 55'%3E%3Cpath d='M0 0 32 12V21.5L0 33.5V26L22 16.75 0 7.5z'/%3E%3Crect x='47' y='48' width='37' height='7'/%3E%3C/svg%3E") center/100% 100% no-repeat}
html[data-theme="light"] body .logo .mk{background:#2f6f5a}

/* the wordmark is set a weight lighter, as in the brand image */
body .logo{font-weight:500}
/* diagrams are drawn for a 1080 canvas; hold them to a comfortable width */
body .arch-uml svg.idg{max-width:1040px;margin:0 auto}
.sec-split .orbit{max-width:400px;justify-self:center}

/* closing bands built on .cta-grid line up with the page column, and a
   highlighted word inside the inverted headline keeps the headline colour */
body .cta-grid{max-width:calc(var(--maxw) - 2 * var(--gut));margin:0 auto}
body .cta-final h2 .g{color:inherit}

/* ---------- cream theme: the hero stays a dark panel ----------
   Streaks of light only read against a dark field, so in the cream theme
   the hero keeps the dark palette, the way the closing band inverts at
   the other end of the page. Everything inside it takes the dark tokens. */
html[data-theme="light"] body .hero{
    --bg:#0b0b0b; --bg-2:#0f0f0f; --bg-3:#151515; --surface:#0b0b0b; --surface-2:#131313;
    --border:#222220; --border-2:#42413e; --text:#e7e6d9; --text-2:#b0afa6; --text-3:#7f7e76;
    --green:#a186f8; --green-2:#815ef8; --green-dim:#6236f4; --green-soft:rgba(98,54,244,0.14);
    background:#0b0b0b;color:var(--text);border-bottom-color:#0b0b0b}
html[data-theme="light"] body .hero .btn.green{background:var(--cream);color:var(--ink)}
html[data-theme="light"] body .hero .btn.green:hover{background:var(--accent);color:var(--cream)}
html[data-theme="light"] body .hero :is(.win,.code,.codeblock,.term-win){background:#0b0b0b;box-shadow:none}
html[data-theme="light"] body .hero .curve{background:radial-gradient(circle at 1px 1px,rgba(255,255,255,0.03) 1px,transparent 0);background-size:20px 20px}
html[data-theme="light"] body .hero :is(.install,.node,.hero-stats,.strip){background:transparent}

/* the site is dark only; a cached copy of the old toggle script must not show its button */
#theme-btn{display:none!important}

/* ---------- finish: small things that make the whole feel considered ---------- */
/* native controls, scrollbars and form fields follow the dark field */
html{color-scheme:dark;scrollbar-color:#42413e #0b0b0b;scroll-padding-top:76px}
/* a visible, on-brand focus ring for keyboard users, and none for the mouse */
body :is(a,button,summary,input,select,textarea):focus{outline:none}
body :is(a,button,summary,input,select,textarea):focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
body .nav-links>a:focus-visible,body .nav-top:focus-visible,body .nav-r>*:focus-visible{outline-offset:-4px}
/* headings and paragraphs break where a person would break them */
body :is(h3,h4,.acc summary h3,.post .title){text-wrap:balance}
body :is(p,li){text-wrap:pretty}
/* a cell answers the pointer with a violet rule along its top edge */
body :is(.layer,.door,.pillar,.feat,.case,.plan,.prod,.person,.cloud-card){position:relative}
body :is(.layer,.door,.pillar,.feat,.case,.plan,.prod,.person,.cloud-card)::after{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;pointer-events:none}
body :is(.layer,.door,.pillar,.feat,.case,.plan,.prod,.person,.cloud-card):hover::after{transform:scaleX(1)}
body .sector{transition:border-color .2s}
body .sector:hover{border-left-color:var(--accent-2)}
/* buttons press, arrows lean */
body .btn{transition:background .15s,color .15s,box-shadow .15s,transform .12s}
body .btn:active{transform:translateY(1px)}
body :is(.lnk,.door .go,.case .rd,.prod .rd){transition:color .15s,letter-spacing .2s}
body :is(.lnk,.door .go,.case .rd,.prod .rd):hover{letter-spacing:0.06em}
/* when two secondary buttons sit together, only the first is filled */
body section .cta-row .btn.ghost.lg ~ .btn.ghost.lg,body section .btn.green.lg ~ .btn.ghost.lg ~ .btn.ghost.lg{background:transparent;color:var(--text);border:1px solid var(--border-2);padding:12px 23px}
body section .cta-row .btn.ghost.lg ~ .btn.ghost.lg:hover{background:var(--surface-2);border-color:var(--text-3)}
/* a card that already carries its own "01 / …" label does not need a second number */
body .pillar:has(> .k)::before{display:none}
/* the header gains a hairline of the accent once the page has moved */
body .nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--ca-1),var(--accent),var(--ca-2));opacity:0;transition:opacity .3s;pointer-events:none}
body .nav.scrolled::after{opacity:0.7}
/* form fields */
body :is(input,select,textarea){background:var(--bg);border-color:var(--border-2);color:var(--text)}
body :is(input,select,textarea):focus{border-color:var(--accent-2)}
body ::placeholder{color:var(--text-3)}

/* a header with no .hero band can still carry the light field: it sits
   behind the heading block and runs the full width of the page column */
body .sec-head.has-field{position:relative;isolation:isolate}
body .sec-head.has-field>.hero-bg{z-index:-1;inset:-56px auto -96px 0;width:calc(min(100vw,var(--maxw)) - 2 * var(--gut));mask-image:none;-webkit-mask-image:none}

/* the stack diagram in motion. Every rule here is conditional on a class
   lambda.js adds, so with scripts off or reduced motion on, the diagram is
   exactly the still drawing. */
body .iso .pulse{fill:var(--cream);opacity:0;filter:drop-shadow(-1.5px 0 0 var(--ca-1)) drop-shadow(1.5px 0 0 var(--ca-2))}
body .iso.live .pulse{animation:iso-rise 3.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes iso-rise{0%{transform:translateY(0);opacity:0}8%{opacity:1}34%{opacity:1}42%,100%{transform:translateY(var(--rise));opacity:0}}
body .iso.live .pl.on .dot{transition:opacity .5s ease,fill .5s ease}
body .iso.asm .pl{transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .45s ease}
body .iso.asm .pl[data-plate="2"]{transition-delay:.28s}
body .iso.asm .pl[data-plate="3"]{transition-delay:.56s}
body .iso.asm:not(.go) .pl{opacity:0;transform:translateY(-64px)}
body .iso.asm :is(.riser,.zl,.zone .lead){transition:opacity .5s ease 1.25s}
body .iso.asm:not(.go) :is(.riser,.zl,.zone .lead){opacity:0}
body .iso.asm .zone .br{stroke-dasharray:330;transition:stroke-dashoffset .9s ease 1.1s}
body .iso.asm:not(.go) .zone .br{stroke-dashoffset:330}

/* the product-page diagrams in motion, on the same terms as the stack: every
   rule waits on a class lambda.js adds */
body .idg .pulse{fill:var(--cream);opacity:0;pointer-events:none;filter:drop-shadow(-1.5px 0 0 var(--ca-1)) drop-shadow(1.5px 0 0 var(--ca-2))}
body .idg .pulse.hot{fill:var(--accent-3,#a186f8);filter:none}
body .idg.asm.go .sl{transition:transform .75s cubic-bezier(.2,.8,.2,1),opacity .4s ease}
body .idg.asm:not(.go) .sl{opacity:0;transform:translateY(-44px)}
body .idg.asm.go>:not(.sl){transition:opacity .5s ease}
body .idg.asm:not(.go)>:not(.sl){opacity:0}
/* each part carries its own delay for the reveal; that delay must not also
   hold up the hiding, or a part stays visible until its turn comes */
body .idg.asm:not(.go)>*{transition-delay:0s!important}