/* Layout: a measured instrument plate. Full-bleed bands divided by hairlines; each band
   carries a mono index rail on the left and the content column on the right. */
/* Ink ground, bone text, green signal, brass for what the client keeps.
   Single committed palette: this look is the identity, not a theme. */
:root{
  --paper:#0C1310; --plate:#121A16; --sunk:#080D0B; --raise:#18211C;
  --ink:#EBE9E1; --muted:#A7B1A7; --faint:#77827A;
  --rule:#1F2A24; --rule-soft:#161E1A;
  --signal:#7ED957; --fill:#4E9B35; --wash:#101A12;
  --slate:#D9A441; --slate-wash:#1C170D;
  --warn:#D7A64A;
  --display:"Source Serif 4",ui-serif,Georgia,"Times New Roman",serif;
  --sans:Archivo,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --maxw:1180px;
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--fill);color:#07120A}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}

/* ---------- band system ---------- */
.band{border-bottom:1px solid var(--rule)}
.band.sunk{background:var(--sunk)}
.inner{
  max-width:var(--maxw); margin:0 auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px));
  padding-block:72px;
}
.inner.tight{padding-block:46px}
.rail{display:grid;grid-template-columns:150px minmax(0,1fr);gap:42px}
@media(max-width:860px){.rail{grid-template-columns:1fr;gap:18px}}
.idx{
  display:flex;flex-direction:column;gap:10px;align-self:start;
  position:sticky;top:calc(84px + env(safe-area-inset-top,0px));
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);line-height:1.45;padding-top:.3em;
}
/* The rail number is structure, not meaning. Brass is reserved for what we
   bring, so the numbers take the signal green instead. */
.idx b{
  display:block;font-family:var(--display);font-weight:600;font-size:40px;line-height:.86;
  letter-spacing:-.025em;color:var(--signal);font-variant-numeric:tabular-nums;
}
.idx b::after{content:"";display:block;width:24px;height:2px;border-radius:1px;background:var(--signal);opacity:.55;margin-top:13px}
.idx span{display:block}
@media(max-width:860px){
  .idx{position:static;flex-direction:row;align-items:center;gap:12px;padding-top:0;
    border-bottom:1px solid var(--rule-soft);padding-bottom:12px}
  .idx b{font-size:24px;line-height:1}
  .idx b::after{display:none}
  .idx span{max-width:none}
}

/* ---------- type ---------- */
h1,h2,h3{text-wrap:balance;margin:0}
.display{font-family:var(--display);font-weight:400;letter-spacing:-.015em;line-height:1.08}
h1.display{font-size:clamp(34px,5.4vw,60px)}
h2.display{font-size:clamp(26px,3.6vw,40px);line-height:1.12}
h3{font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:-.005em}
.lede{font-size:clamp(16.5px,1.45vw,18.5px);color:var(--muted);max-width:60ch;line-height:1.6}
.lede strong{color:var(--ink);font-weight:600}
p{margin:0}
.stack{display:flex;flex-direction:column;gap:18px;min-width:0}
.rail>*{min-width:0}
.cmp-wrap{max-width:100%}
.stack-sm{display:flex;flex-direction:column;gap:10px;min-width:0}
.em{font-family:var(--display);font-style:italic}
.mono{font-family:var(--mono)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--signal)}
.small{font-size:14px;color:var(--muted);line-height:1.6}
.xsmall{font-size:12.5px;color:var(--faint);line-height:1.55}

/* ---------- header ---------- */
header.site{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--rule);
}
header .in{
  max-width:var(--maxw);margin:0 auto;height:62px;display:flex;align-items:center;gap:22px;
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px));
}
.wordmark{font-family:var(--sans);font-weight:400;font-size:21px;letter-spacing:-.032em;text-decoration:none;flex:none;display:inline-flex;align-items:baseline;white-space:nowrap}
.wordmark .nu{font-weight:700}
.wordmark .dot{color:var(--signal);font-weight:500}
nav.main{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
nav.main a{
  font-size:13.5px;color:var(--muted);text-decoration:none;padding:7px 11px;border-radius:5px;
  white-space:nowrap;transition:color .15s,background .15s;
}
nav.main a:hover{color:var(--ink);background:var(--wash)}
nav.main a.on{color:var(--ink);background:var(--wash);font-weight:500}
@media(max-width:620px){
  header .in{height:auto;flex-direction:column;align-items:flex-start;gap:6px;padding-block:10px}
  nav.main{margin-left:-11px;justify-content:flex-start}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;
  padding:12px 20px;border-radius:6px;text-decoration:none;border:1px solid transparent;cursor:pointer;
  font-family:var(--sans);transition:transform .12s,background .15s,border-color .15s;
}
.btn.primary{background:var(--signal);color:var(--paper);border-color:var(--signal)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{border-color:var(--rule);color:var(--ink);background:transparent}
.btn.ghost:hover{border-color:var(--signal);color:var(--signal)}
.btnrow{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- hero ---------- */
/* every hero carries the lattice, so each needs to be a containing block
   with its content above it */
.band.hero{position:relative;overflow:hidden}
.band.hero .inner{position:relative;z-index:2}
.hero .inner{padding-block:84px 60px}
.hero h1{max-width:17ch}
.heroline{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:26px}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);border-radius:999px;padding:5px 11px}
.tag.live{color:var(--signal);border-color:color-mix(in srgb,var(--signal) 42%,transparent)}
.tag.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--fill);display:inline-block;margin-right:7px;vertical-align:1px}

/* ---------- plate (ontology demo) ---------- */
.plate{background:var(--plate);border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.plate-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--rule-soft)}
.plate-head .t{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.tabs{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.tabs button{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;border:1px solid var(--rule);background:transparent;color:var(--muted);cursor:pointer;
}
.tabs button[aria-selected="true"]{background:var(--signal);border-color:var(--signal);color:var(--paper)}
.plate-body{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
@media(max-width:900px){.plate-body{grid-template-columns:1fr}}
.graph{position:relative;border-right:1px solid var(--rule-soft);min-height:340px;background:
  radial-gradient(circle at 50% 46%, var(--wash) 0%, transparent 62%)}
@media(max-width:900px){.graph{border-right:none;border-bottom:1px solid var(--rule-soft)}}
.graph svg{width:100%;height:auto;display:block}
.resolved{padding:20px 20px 22px}
.resolved h4{margin:0 0 3px;font-size:14px;font-weight:600}
.attr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:9px 0;border-bottom:1px dashed var(--rule-soft)}
.attr:last-of-type{border-bottom:none}
.attr .k{font-size:14px}
.attr .s{font-family:var(--mono);font-size:11px;color:var(--signal);text-align:right;white-space:nowrap}
.builds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.builds li{font-size:13.5px;line-height:1.5;padding-left:17px;position:relative}
.builds li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:2px;background:var(--fill)}
.pillar.keep{border-top-color:var(--slate)}
.pillar.keep .lbl{color:var(--slate)}
.policy{margin-top:14px;padding:12px 13px;border-radius:7px;background:var(--wash);border:1px solid color-mix(in srgb,var(--signal) 22%,transparent)}
.policy .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--signal);display:block;margin-bottom:5px}
.policy p{font-size:13px;color:var(--ink);line-height:1.5}

/* ---------- grids ---------- */
.cols{display:grid;gap:26px}
.cols.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.cols.c3,.cols.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.cols.c2,.cols.c3,.cols.c4{grid-template-columns:1fr}}

.card{border:1px solid var(--rule);border-radius:9px;background:var(--plate);padding:20px;display:flex;flex-direction:column;gap:9px;min-width:0}
.card .hd{display:flex;align-items:baseline;gap:9px}
.card .n{font-family:var(--mono);font-size:11px;color:var(--faint)}
/* the use-case index: a register, not a deck of boxes */
.ledger{margin-top:18px;border-top:1px solid var(--rule)}
.lgrp{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--signal);padding:18px 0 8px}
.lgrp:first-child{padding-top:14px}
.lrow{display:grid;grid-template-columns:230px 1fr;gap:0 28px;padding:11px 0;border-top:1px solid var(--rule-soft);transition:background .18s ease}
.lrow:hover{background:var(--wash)}
.lrow .lk{display:flex;gap:10px;align-items:baseline}
.lrow .lk b{font-family:var(--mono);font-size:10px;font-weight:400;color:var(--faint);letter-spacing:.08em;padding-top:2px}
.lrow .lk span{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.35}
.lrow .lv{font-size:13.5px;line-height:1.6;color:var(--muted)}
.lrow .lv i{font-style:normal}
.lrow .lv i+i::before{content:"\00B7";color:var(--fill);margin:0 10px;font-weight:700}
@media(max-width:860px){.lrow{grid-template-columns:1fr;gap:5px}.lrow .lk span{font-size:14.5px}}

/* column headers with a hairline, used for typologies */
.pillar{border-top:2px solid var(--signal);padding-top:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pillar .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.pillar h3{font-size:19px;font-family:var(--display);font-weight:600;letter-spacing:-.01em}

/* ---------- layer stack ---------- */
.layers{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:9px;overflow:hidden;background:var(--plate)}
.layer{display:grid;grid-template-columns:34px minmax(0,1.15fr) minmax(0,1fr);gap:16px;padding:15px 18px;border-bottom:1px solid var(--rule-soft);align-items:start}
.layer:last-child{border-bottom:none}
.layer .no{font-family:var(--mono);font-size:11.5px;color:var(--faint);padding-top:3px}
.layer .ttl{font-weight:600;font-size:15px}
.layer .ttl span{display:block;font-weight:400;font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.oss{display:flex;flex-wrap:wrap;gap:6px;align-content:start}
.oss span{font-family:var(--mono);font-size:11px;padding:3px 8px;border:1px solid var(--rule);border-radius:4px;color:var(--muted);white-space:nowrap}
@media(max-width:760px){.layer{grid-template-columns:28px minmax(0,1fr)}.layer .oss{grid-column:2}}

/* ---------- comparison ---------- */
.cmp-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:9px;background:var(--plate)}
table.cmp{border-collapse:collapse;width:100%;min-width:820px;font-size:13.5px}
table.cmp th,table.cmp td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
table.cmp thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:400}
table.cmp thead th:last-child{color:var(--signal)}
table.cmp tbody tr:last-child td{border-bottom:none}
table.cmp td:first-child{font-weight:500;width:19%}
table.cmp td:nth-child(2),table.cmp td:nth-child(3){color:var(--muted)}
table.cmp td:last-child{background:var(--wash)}

/* ---------- phases ---------- */
.phases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--rule);border-radius:9px;overflow:hidden;background:var(--plate)}
@media(max-width:860px){.phases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.phases{grid-template-columns:1fr}}
.phase{padding:18px;border-right:1px solid var(--rule-soft);display:flex;flex-direction:column;gap:8px;min-width:0}
.phase:last-child{border-right:none}
@media(max-width:860px){.phase:nth-child(2){border-right:none}.phase:nth-child(-n+2){border-bottom:1px solid var(--rule-soft)}}
@media(max-width:520px){.phase{border-right:none;border-bottom:1px solid var(--rule-soft)}.phase:last-child{border-bottom:none}}
.phase .wk{font-family:var(--mono);font-size:11px;color:var(--signal);letter-spacing:.1em;text-transform:uppercase}

/* ---------- products ---------- */
.prod{border:1px solid var(--rule);border-radius:9px;background:var(--plate);padding:22px;display:flex;flex-direction:column;gap:11px;min-width:0}
.prod .top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.prod .nm{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.01em}
.prod .seg{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);text-align:right}
.prod .sys{font-family:var(--mono);font-size:11.5px;color:var(--muted);line-height:1.7;border-top:1px solid var(--rule-soft);padding-top:11px;margin-top:auto}
.prod a.go{font-size:13.5px;color:var(--signal);text-decoration:none;font-weight:500}
.prod a.go:hover{text-decoration:underline}

/* ---------- proof ---------- */
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rule)}
@media(max-width:800px){.proof{grid-template-columns:1fr}}
.pf{padding:22px 24px;border-right:1px solid var(--rule);min-width:0}
.pf:last-child{border-right:none}
@media(max-width:800px){.pf{border-right:none;border-bottom:1px solid var(--rule)}.pf:last-child{border-bottom:none}}
.pf .big{font-family:var(--display);font-size:38px;line-height:1;letter-spacing:-.01em}

/* ---------- team ---------- */
.people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.people.five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:900px){.people,.people.five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.people,.people.five{grid-template-columns:repeat(2,minmax(0,1fr))}}
.person{display:flex;flex-direction:column;gap:9px;min-width:0}
.person img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px;filter:grayscale(1) contrast(1.03);transition:filter .3s}
.person:hover img{filter:grayscale(0)}
.person .nm{font-size:14.5px;font-weight:600;line-height:1.3}
.person .rl{font-size:12.5px;color:var(--muted);line-height:1.4}
a.person{text-decoration:none;color:inherit}
a.person:focus-visible{outline-offset:5px}
.person .li{width:14px;height:14px;margin-top:-2px;color:var(--faint);transition:color .25s}
.person .li svg{display:block;width:100%;height:100%;fill:currentColor}
a.person:hover .li{color:var(--signal)}

/* ---------- footer ---------- */
footer.site{background:var(--sunk);border-top:1px solid var(--rule)}
footer .in{max-width:var(--maxw);margin:0 auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px));
  padding-block:40px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
@media(max-width:760px){footer .in{grid-template-columns:1fr}}
footer a{color:var(--muted);text-decoration:none;font-size:13.5px}
footer a:hover{color:var(--signal)}
footer a.social{display:inline-flex;align-items:center;gap:7px;align-self:flex-start}
footer a.social svg{width:15px;height:15px;flex:none;fill:currentColor}
.herogrid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);gap:52px;align-items:start}
@media(max-width:940px){.herogrid{grid-template-columns:1fr;gap:34px}}
.register{border-top:2px solid var(--signal);display:flex;flex-direction:column;min-width:0}
.register .row{padding:13px 0;border-bottom:1px solid var(--rule-soft);display:grid;gap:3px}
.register .row:last-child{border-bottom:none}
.register .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.register .v{font-size:14.5px;font-weight:600}
.register .d{font-size:13px;color:var(--muted);line-height:1.5}

/* ---------- mega hero ---------- */
.mega{font-size:clamp(42px,7.6vw,96px);line-height:.98;letter-spacing:-.035em;font-weight:600;max-width:19ch}
.hero.open{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.hero.open .inner{padding-block:96px 76px;position:relative;z-index:2}
/* The home hero plays a twelve second loop behind the text: the same lattice,
   with light crossing it and data running down the columns. The poster covers
   the moment before it loads and stands in for anyone on reduced motion. */
.herovid{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:var(--paper) url("/assets/hero-poster.jpg") center/cover no-repeat}
.herovid video{width:100%;height:100%;object-fit:cover;display:block}
.herovid::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 0%,transparent 72%,var(--paper) 100%)}
/* the type keeps its own pool of dark so it stays readable over the motion */
.hero.open .herotext{position:relative}
.hero.open .herotext::before{content:"";position:absolute;inset:-30px -48px;z-index:-1;
  border-radius:26px;background:radial-gradient(62% 56% at 50% 48%,
    color-mix(in srgb,var(--paper) 88%,transparent) 0%,
    color-mix(in srgb,var(--paper) 58%,transparent) 62%, transparent 100%)}
@media (prefers-reduced-motion: reduce){.herovid video{display:none}}

/* A measured surface rather than wallpaper: the twelve verticals gain the
   horizontal set, and two of the columns carry a slow signal down them. The
   only motion on the page, and it stands down for reduced motion. */
section[data-page="home"] .band.hero .gridlines{display:none}
.gridlines{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;overflow:hidden;
  background-image:
    linear-gradient(to right,var(--rule-soft) 1px,transparent 1px),
    linear-gradient(to bottom,var(--rule-soft) 1px,transparent 1px);
  background-size:calc(100%/12) 100%, 100% 84px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 86%);
  mask-image:linear-gradient(to bottom,#000 0%,transparent 86%)}
.gridlines::before,.gridlines::after{
  content:"";position:absolute;top:-30%;width:1px;height:30%;
  background:linear-gradient(to bottom,transparent,
    color-mix(in srgb,var(--signal) 55%,transparent),transparent);
  animation:drop 9s linear infinite}
.gridlines::before{left:calc(100%/12*3)}
.gridlines::after{left:calc(100%/12*8);animation-delay:4.5s;animation-duration:11s}
@keyframes drop{to{top:110%}}
@media (prefers-reduced-motion: reduce){
  .gridlines::before,.gridlines::after{display:none}
}
.hero.open .brassline{width:64px;height:3px;background:var(--slate);border-radius:2px;margin-bottom:28px}
.lede.big{font-size:clamp(17px,1.7vw,21px);max-width:54ch;color:var(--muted)}
.lede.big b{color:var(--ink);font-weight:600}


/* ---------- unified hero shell ---------- */
.hero .inner{padding-block:78px 68px}
.herobody{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:48px;align-items:start}
/* The home hero carries no figure. The text takes the whole band and centers
   on it, which means lifting the index rail out of the grid so the 150px
   column does not push the center line to the right. */
.rail.solo{grid-template-columns:minmax(0,1fr);gap:0;position:relative}
.rail.solo .idx{position:absolute;left:0;top:.3em;width:150px}
.herobody.solo{grid-template-columns:minmax(0,1fr);max-width:none}
.herobody.solo .herotext{text-align:center;gap:22px}
.herobody.solo h1.display{max-width:18ch;margin-inline:auto}
.herobody.solo .lede{max-width:62ch;margin-inline:auto}
.herobody.solo .btnrow{justify-content:center}
@media(max-width:860px){
  .rail.solo .idx{position:static;width:auto}
  .herobody.solo .herotext{text-align:left}
  .herobody.solo h1.display,.herobody.solo .lede{margin-inline:0}
  .herobody.solo .btnrow{justify-content:flex-start}
}
@media(max-width:1020px){.herobody{grid-template-columns:1fr;gap:38px}}
.herotext{min-width:0;display:flex;flex-direction:column;gap:20px}
.hero h1.display{font-size:clamp(34px,4.4vw,58px);line-height:1.05;letter-spacing:-.03em;max-width:17ch}
.hero.open h1.display{font-size:clamp(40px,5.4vw,74px);line-height:1.0;max-width:15ch}
.factpanel{border:1px solid var(--rule);border-radius:12px;background:var(--plate);overflow:hidden;min-width:0;
  box-shadow:0 22px 56px -32px rgba(0,0,0,.9)}
.factpanel .fp-h{padding:12px 16px;border-bottom:1px solid var(--rule-soft);font-family:var(--mono);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.fp-row{display:grid;gap:4px;padding:13px 16px;border-bottom:1px solid var(--rule-soft)}
.fp-row:last-child{border-bottom:none}
.fp-row .k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate)}
.fp-row .v{font-size:14px;line-height:1.5;color:var(--ink)}




.rmtag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--slate);border:1px solid color-mix(in srgb,var(--slate) 45%,transparent);border-radius:3px;
  padding:2px 6px;margin-left:8px;vertical-align:2px}
/* ---------- legal prose ---------- */
.prose{max-width:72ch;display:flex;flex-direction:column;gap:16px;min-width:0}
.prose h3{font-size:15px;font-weight:600;margin-top:10px}
.prose p{font-size:14.5px;line-height:1.65;color:var(--muted)}
.prose ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.prose li{font-size:14.5px;line-height:1.6;color:var(--muted)}
.prose strong{color:var(--ink);font-weight:600}
.prose .upd{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

/* ---------- brand marks ---------- */
.brands{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:10px;overflow:hidden;margin-top:8px}
.bcell{background:var(--plate);display:flex;align-items:center;justify-content:center;padding:14px 12px;min-height:88px;min-width:0}
.brand{display:block;background:var(--muted);opacity:.8;transition:opacity .2s,background .2s;max-width:100%;
  -webkit-mask-image:var(--m);mask-image:var(--m);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.bcell:hover .brand{opacity:1;background:var(--ink)}
@media(max-width:860px){.bcell{min-height:64px;padding:10px 6px}}
@media(max-width:520px){.bcell{min-height:52px;padding:8px 5px}}
.legalblock{display:block !important;border-top:1px solid var(--rule);padding-block:24px 32px !important}
.legalblock p.xsmall{max-width:92ch;margin:0 0 10px}
.legalblock p.xsmall:last-child{margin-bottom:0}
.legalrow{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin:0 0 16px}
.legalrow a{font-size:12.5px;color:var(--muted);text-decoration:none}
.legalrow a:hover{color:var(--signal)}


.deal{display:flex;flex-direction:column;gap:16px;margin-top:22px;border-top:2px solid var(--signal);padding-top:22px}
.deal strong{color:var(--ink);font-weight:600}
.sovblock{margin-top:26px;border-top:1px solid var(--rule);padding-top:22px}
.sovblock strong{color:var(--slate);font-weight:600}
/* ---------- ownership, deliberately lopsided ---------- */
.owns{display:grid;grid-template-columns:minmax(0,1.95fr) minmax(0,.72fr);gap:0;
  border-top:2px solid var(--signal);margin-top:18px}
.owns-main{padding:22px 40px 10px 0;min-width:0}
.owns-list{font-family:var(--display);font-size:clamp(21px,2.4vw,31px);line-height:1.32;letter-spacing:-.016em;
  color:var(--ink);margin-top:14px;text-wrap:pretty}
.owns-list em{font-style:normal;color:var(--signal)}
.owns-side{padding:22px 0 10px 30px;border-left:1px solid var(--rule);min-width:0}
.owns-side p{font-size:14px;color:var(--muted);line-height:1.5;margin-top:14px}
.owns-side strong{display:block;font-family:var(--display);font-size:19px;font-weight:600;color:var(--slate);
  letter-spacing:-.01em;margin-bottom:6px}
.kicker.brass{color:var(--slate)}
@media(max-width:820px){
  .owns{grid-template-columns:1fr}
  .owns-main{padding:20px 0 4px}
  .owns-side{padding:18px 0 4px;border-left:none;border-top:1px solid var(--rule);margin-top:16px}
}

/* ---------- governed request flow ---------- */
.flowfig{border:1px solid var(--rule);border-radius:12px;background:var(--plate);padding:16px 18px 15px;min-width:0;
  box-shadow:0 22px 56px -32px rgba(0,0,0,.9)}
.flowfig .cap{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.flowfig .cap .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.flowfig .cap .y{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.flow{list-style:none;margin:0;padding:0;position:relative}
.flow::before{content:"";position:absolute;left:12px;top:16px;bottom:20px;width:1px;background:var(--rule)}
.fs{display:grid;grid-template-columns:25px minmax(0,1fr);gap:12px;align-items:start;padding:6px 0;position:relative}
.fs .n{width:25px;height:25px;border-radius:50%;border:1px solid var(--rule);background:var(--plate);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9.5px;color:var(--faint);
  position:relative;z-index:1;flex:none}
.fs b{display:block;font-size:13.5px;font-weight:600;line-height:1.25;letter-spacing:-.005em}
.fs em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:3px;
  font-family:var(--mono);letter-spacing:.005em}
.fs.gate .n{border-color:color-mix(in srgb,var(--signal) 70%,transparent);color:var(--signal);background:var(--wash)}
.fs.gate b{color:var(--signal)}
.fs.llm .n{border-style:dashed;border-color:var(--faint)}
.fs.llm b{color:var(--muted)}
.fs.act .n{border-color:var(--signal);color:#07120A;background:var(--signal);font-weight:500}
.fs.act b{color:var(--ink)}

.fs .comp{display:block;font-size:11px;line-height:1.45;margin-top:4px;font-family:var(--mono);
  letter-spacing:.005em;color:var(--signal)}
.fs .comp::before{content:"\25B8  ";color:var(--signal);opacity:.75}
.fs.llm .comp{color:var(--muted)}
.fs.llm .comp::before{color:var(--muted)}
.apibar{margin-top:13px;border-top:1px solid var(--rule-soft);padding-top:12px}
.abrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.abrow .abt{font-size:13px;font-weight:600}
.abrow .abn{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.abgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(7px,1fr));gap:3px;margin-top:9px}
.abgrid i{aspect-ratio:1;border-radius:1.5px;background:var(--rule);display:block}
.abgrid i.lit{background:color-mix(in srgb,var(--signal) 65%,transparent)}
.flowfig .fnote{font-size:12px;color:var(--muted);line-height:1.45;margin-top:12px;border-top:1px solid var(--rule-soft);padding-top:11px}

/* ---------- harness diagram ---------- */
.harnessfig{border:1px solid var(--rule);border-radius:12px;background:var(--plate);padding:16px 16px 14px;min-width:0;
  box-shadow:0 22px 56px -32px rgba(0,0,0,.9)}
.harnessfig .cap{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.harnessfig .cap .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.harnessfig .cap .y{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.harnessfig svg{width:100%;height:auto;display:block}
.hf-ring{fill:none;stroke:var(--rule)}
.hf-ring.on{stroke:color-mix(in srgb,var(--signal) 48%,transparent)}
.hf-ring.outer{stroke:color-mix(in srgb,var(--slate) 60%,transparent);stroke-dasharray:3 5}
.hf-lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;fill:var(--muted)}
.hf-lab.y{fill:var(--slate)}
.hf-core{fill:var(--sunk);stroke:var(--rule)}
.hf-coretxt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;fill:var(--faint)}
.hf-note{font-size:12px;color:var(--muted);line-height:1.45;margin-top:9px;border-top:1px solid var(--rule-soft);padding-top:10px}

/* ---------- hero core panel ---------- */
.herogrid2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:54px;align-items:center}
@media(max-width:1000px){.herogrid2{grid-template-columns:1fr;gap:44px}}
.hero.open .mega{font-size:clamp(38px,5.2vw,74px);max-width:16ch}
.corepanel{border:1px solid var(--rule);border-radius:12px;background:var(--plate);overflow:hidden;min-width:0;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9)}
.cp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid var(--rule-soft);flex-wrap:wrap}
.cp-head .nm{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.cp-head .tagq{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#07120A;background:var(--signal);padding:3px 9px;border-radius:4px;font-weight:500}
.cp-band{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--rule-soft)}
.cp-band .no{font-family:var(--mono);font-size:10px;color:var(--faint)}
.cp-band .lb{font-size:13.5px;line-height:1.3;min-width:0}
.cp-band .ticks{display:flex;gap:3px;align-items:center}
.cp-band .ticks i{width:3px;height:13px;border-radius:1px;background:var(--rule);display:block}
.cp-band .ticks i.lit{background:var(--signal)}
.cp-base{padding:14px 16px 16px;background:var(--sunk)}
.cp-base .row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cp-base .ttl{font-size:13.5px;font-weight:600}
.cp-base .cnt{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.cp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9px,1fr));gap:3px;margin-top:11px}
.cp-grid i{aspect-ratio:1;border-radius:1.5px;background:var(--rule);display:block}
.cp-grid i.lit{background:color-mix(in srgb,var(--signal) 70%,transparent)}
.cp-base .cap{font-size:12px;color:var(--muted);margin-top:11px;line-height:1.45}
@media (prefers-reduced-motion: no-preference){
  .cp-grid i,.cp-band .ticks i{transition:background .5s ease}
}

/* ---------- full-bleed engine ---------- */
.engine{background:var(--sunk);border-bottom:1px solid var(--rule)}
.engine .inner{padding-block:56px 60px}
.enghead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.railtabs{display:flex;gap:0;border:1px solid var(--rule);border-radius:8px;overflow:hidden;flex-wrap:wrap;background:var(--plate)}
.railtabs button{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:11px 16px;border:0;border-right:1px solid var(--rule);background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap}
.railtabs button:last-child{border-right:0}
.railtabs button:hover{color:var(--ink)}
.railtabs button[aria-selected="true"]{background:var(--signal);color:#07120A;font-weight:500}
@media(max-width:700px){.railtabs{width:100%}.railtabs button{flex:1 1 44%;text-align:center}}
.engbody{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:0;border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--plate)}
@media(max-width:980px){.engbody{grid-template-columns:1fr}}
.engbody .graph{border-right:1px solid var(--rule);min-height:380px;display:flex;align-items:center;
  background:radial-gradient(ellipse 62% 58% at 50% 48%, rgba(126,217,87,.09), transparent 70%)}
@media(max-width:980px){.engbody .graph{border-right:0;border-bottom:1px solid var(--rule)}}
.engbody .resolved{padding:26px 26px 28px}
.resolved h4{font-family:var(--display);font-size:27px;font-weight:600;letter-spacing:-.015em;margin:0 0 2px}

/* ---------- inversion ---------- */
.inv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--rule);border-radius:10px;overflow:hidden}
@media(max-width:760px){.inv{grid-template-columns:1fr}}
.inv > div{padding:24px;min-width:0}
.inv .a{background:var(--sunk);border-right:1px solid var(--rule)}
.inv .b{background:var(--wash)}
@media(max-width:760px){.inv .a{border-right:0;border-bottom:1px solid var(--rule)}}
.inv h3{font-size:15px;margin-bottom:12px}
.inv ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.inv li{font-size:14px;line-height:1.5;padding-left:18px;position:relative;color:var(--muted)}
.inv .b li{color:var(--ink)}
.inv li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:1.5px;background:var(--faint)}
.inv .b li::before{background:var(--signal);height:8px;width:8px;border-radius:2px;top:5px}

/* ---------- fixed section index ---------- */
.secindex{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;display:none;flex-direction:column;gap:11px}
@media(min-width:1340px){.secindex{display:flex}}
.secindex a{display:flex;align-items:center;gap:9px;text-decoration:none;justify-content:flex-end}
.secindex .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);opacity:0;transition:opacity .2s}
.secindex a:hover .lbl{opacity:1;color:var(--signal)}
.secindex .pip{width:16px;height:2px;background:var(--rule);border-radius:1px;transition:background .2s,width .2s;flex:none}
.secindex a.cur .pip{background:var(--signal);width:26px}
.note{border-left:2px solid var(--warn);padding:10px 0 10px 14px;color:var(--muted);font-size:13px;line-height:1.55}
.cnx{margin-top:30px;border-top:1px solid var(--rule)}
.cnxh{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;padding:16px 0 10px}
.cnxh b{font-family:var(--display);font-weight:600;font-size:19px;color:var(--ink)}
.cnxh span{font-size:13.5px;color:var(--faint)}
.cnxrow{display:grid;grid-template-columns:210px minmax(0,1fr);gap:4px 28px;padding:10px 0;border-top:1px solid var(--rule-soft);align-items:baseline}
.cnxrow .ck{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding-top:2px}
.cnxrow .cv{font-size:13.5px;color:var(--muted);line-height:1.62;min-width:0}
.cnxf{padding:16px 0 0;border-top:1px solid var(--rule);font-size:13.5px;color:var(--muted);line-height:1.62;max-width:72ch}
@media(max-width:760px){.cnxrow{grid-template-columns:1fr;gap:4px;padding:11px 0}}

/* ---------- the inversion: two routes, read across ---------- */
.routes{margin-top:6px;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--plate)}
.rtrow{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr);gap:0}
.rtrow>div{padding:13px 18px;border-bottom:1px solid var(--rule-soft);min-width:0}
.rtrow:last-child>div{border-bottom:none}
.rtrow .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);border-right:1px solid var(--rule-soft)}
.rtrow .a{color:var(--faint);font-size:14px;line-height:1.5;border-right:1px solid var(--rule-soft)}
.rtrow .b{color:var(--ink);font-size:14px;line-height:1.5;background:var(--wash)}
.rtrow.hd>div{padding:13px 18px;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase}
.rtrow.hd .a{color:var(--muted)}
.rtrow.hd .b{color:var(--signal)}
.rtrow.end .a,.rtrow.end .b{font-size:14px}
.rtrow.end .b strong{color:var(--signal);font-weight:600}
@media(max-width:860px){
  .rtrow{grid-template-columns:1fr}
  .rtrow .k{border-right:none;border-bottom:1px solid var(--rule-soft);padding-bottom:8px}
  .rtrow .a{border-right:none}
  .rtrow.hd{display:none}
  .rtrow .a::before{content:"Finished product — ";font-family:var(--mono);font-size:10px;
    letter-spacing:.1em;text-transform:uppercase;color:#56635A}
  .rtrow .b::before{content:"Built with us — ";font-family:var(--mono);font-size:10px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
}

/* ---------- home hero: the sovereign stack ---------- */
/* ---------------- three bands, bottom to top ----------------
     Your data and the platform it runs on at the ground, the harness in the
     middle as the only thing we bring, your work and your proof at the top.
     The model hangs outside the boundary: called, and replaceable. */
  .sov{display:flex;flex-direction:column;gap:8px}
  .sov-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
    font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase}
  .sov-h .a{color:var(--faint)}
  .sov-h .b{color:var(--slate)}

  .sov-wrap{position:relative}

  .bound{position:relative;border:1px solid color-mix(in srgb,var(--signal) 30%,transparent);
    border-radius:9px;background:var(--plate);padding:17px 10px 10px;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 11px;align-items:stretch}
  .bd5.full{grid-column:1 / -1}
  .bound::before{content:"YOUR ENVIRONMENT · YOUR CLOUD · YOUR KEYS";
    position:absolute;top:-6px;left:11px;padding:0 6px;background:var(--paper);
    font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;color:var(--signal);white-space:nowrap}

  .bd5{border:1px solid var(--rule);border-radius:7px;background:var(--sunk);padding:8px 10px;
    display:flex;flex-direction:column;min-width:0}
  .bd5 .hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
  .bd5.pair .hd{display:block}
  .bd5.pair .tag{float:none;display:inline-block;margin-bottom:5px}
  .bd5.pair .t{display:block}
  .bd5 .t{font-size:13px;font-weight:600;color:var(--ink);line-height:1.25}
  .bd5 .tag{flex:none;font-family:var(--mono);font-size:8px;letter-spacing:.1em;
    text-transform:uppercase;border-radius:999px;padding:3px 7px;white-space:nowrap}
  .bd5 .s{font-size:10.5px;color:var(--faint);line-height:1.45;margin-top:3px}
  .bd5 .fde{font-size:10.5px;color:var(--slate);line-height:1.4;margin-top:5px;
    padding-top:5px;border-top:1px solid color-mix(in srgb,var(--slate) 20%,transparent)}
  .bd5 .foot{font-size:10px;color:var(--slate);line-height:1.35;margin-top:7px;padding-top:6px;
    border-top:1px solid color-mix(in srgb,var(--slate) 22%,transparent)}
  .bd5 .chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
  .bd5 .chips span{font-family:var(--mono);font-size:9px;color:var(--muted);
    border:1px solid var(--rule);border-radius:4px;padding:2px 6px}

  .bd5.mine{border-color:color-mix(in srgb,var(--signal) 28%,transparent);background:var(--wash)}
  .bd5.mine .tag{color:var(--signal);border:1px solid color-mix(in srgb,var(--signal) 34%,transparent)}
  .bd5.ours{border-color:color-mix(in srgb,var(--slate) 34%,transparent);position:relative}
  .bd5.ours .tag{color:var(--slate);border:1px solid color-mix(in srgb,var(--slate) 38%,transparent)}
  .bd5.base{border-color:#2A3A31;background:#0A120E;border-bottom:2px solid var(--slate)}

  /* what a harness actually is, said as four plain lines rather than four labels */
  .parts{display:flex;flex-direction:column;gap:0;margin-top:7px;flex:1}
  .parts div{padding:3px 0;border-top:1px solid color-mix(in srgb,var(--slate) 18%,transparent)}
  .parts b{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--slate);font-weight:400}
  .parts span{display:block;font-size:9.5px;color:var(--muted);line-height:1.3;margin-top:1px}

  /* the model: called by the harness, drawn outside the boundary */
  .mdl{grid-column:2;align-self:stretch;position:relative;gap:0;
    border:1px dashed #6B7C70;border-radius:6px;background:var(--sunk);
    padding:9px 9px;display:flex;flex-direction:column;gap:5px}
  .mdl .kinds{display:flex;flex-direction:column;gap:0;margin-top:1px;flex:1}
  .mdl .kinds div{padding:3px 0;border-top:1px solid var(--rule)}
  .mdl .kinds span{color:var(--faint)}
  .mdl .kinds b{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink);font-weight:400}
  .mdl .kinds span{display:block;font-size:9.5px;color:var(--faint);line-height:1.3;margin-top:1px}
  .mdl .tag{align-self:flex-start;font-family:var(--mono);font-size:8px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);
    border-radius:999px;padding:3px 7px}
  .mdl .t{font-size:13px;font-weight:600;color:var(--ink);line-height:1.25}
  .mdl .s{font-size:10.5px;color:var(--faint);line-height:1.45;margin-top:3px}
  /* the guardrails do this, so it is brass like the rest of the harness */
  .mdl .chk{font-size:10px;color:var(--slate);line-height:1.35;
    border-top:1px solid color-mix(in srgb,var(--slate) 22%,transparent);padding-top:5px}
  .mdl .out{font-family:var(--mono);font-size:8px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted)}
  /* the call out of the harness and the answer coming back */
  /* the harness calls it and checks what comes back */
  .mdl::before{content:"";position:absolute;left:-11px;top:34px;width:11px;height:1px;background:#6B7C70}
  .mdl::after{content:"";position:absolute;left:-13px;top:34px;width:5px;height:5px;border-radius:50%;
    background:var(--slate);transform:translateY(-2px)}

  .sov-f{font-size:12px;color:var(--muted);line-height:1.5;padding-top:1px}
  .sov-f b{color:var(--ink);font-weight:600}
  .sov-f .k{color:var(--slate)}

  @media(max-width:900px){
    .sov-wrap{padding-right:0}
    .bound{grid-template-columns:minmax(0,1fr)}
    .mdl{grid-column:1}
    .mdl::before,.mdl::after{display:none}
    .parts div{grid-template-columns:minmax(0,1fr);gap:1px}
  }

/* the same figure on the harness page, where it has the whole band */
.sovwide .sov{max-width:980px}
.sovwide .bound{padding:22px 14px 14px;gap:9px 16px}
.sovwide .bd5{padding:13px 15px}
.sovwide .bd5 .t{font-size:15px}
.sovwide .bd5 .s{font-size:12.5px}
.sovwide .bd5 .fde{font-size:12.5px}
.sovwide .bd5 .foot{font-size:11.5px}
.sovwide .bd5 .chips span{font-size:10.5px;padding:3px 8px}
.sovwide .parts div{padding:6px 0}
.sovwide .parts b{font-size:10px}
.sovwide .parts span{font-size:12px}
.sovwide .mdl{padding:13px 14px;gap:7px}
.sovwide .mdl .t{font-size:15px}
.sovwide .mdl .s{font-size:12.5px}
.sovwide .mdl .chk{font-size:12px}
.sovwide .mdl .kinds div{padding:5px 0}
.sovwide .mdl .kinds b{font-size:10px}
.sovwide .mdl .kinds span{font-size:11.5px}
.sovwide .sov-h{font-size:11px}
.sovwide .sov-f{font-size:13.5px}
.sovwide .bound::before{font-size:9.5px}

#graph .edge{stroke:var(--rule);stroke-width:1.25;fill:none}
  #graph .edge.on{stroke:color-mix(in srgb,var(--signal) 45%,transparent)}
  #graph .flow{fill:var(--signal)}
  #graph .srcbox{fill:var(--plate);stroke:var(--rule);stroke-width:1}
  #graph .srctxt{fill:var(--ink);font-family:var(--mono);font-size:12px;letter-spacing:.01em}
  #graph .srcrole{fill:var(--faint);font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase}
  #graph .hubbox{fill:var(--wash);stroke:var(--signal);stroke-width:1.4}
  #graph .hubtxt{fill:var(--ink);font-family:var(--display);font-size:29px;font-weight:600;letter-spacing:-.015em}
  #graph .hubsub{fill:var(--signal);font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
  #graph .pulse{fill:var(--fill)}
  #graph g.node{opacity:0;animation:fadein .42s ease forwards}
  @keyframes fadein{to{opacity:1}}
  #graph .edge{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw .6s ease forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  @media (prefers-reduced-motion: reduce){
    #graph g.node{opacity:1;animation:none}
    #graph .edge{stroke-dashoffset:0;animation:none}
  }