/* ============================================================================
   Datapinot — FerriteMem

   THE COLOUR SYSTEM, which is the whole of it:
     teal    a measured strength
     ochre   something incomplete, or a curve giving ground
     brick   a floor, or what a failure costs
   Tags, figures and each section's accent all draw from those three, so the
   page's structure says the same thing its numbers do.

   No band is ever bare. Every section sits on a surface — deep, tint, wash or
   textured paper — and the rotation never repeats twice running.
   ========================================================================= */

:root{
  --paper:#FAFAF8;
  --paper-2:#F7F7F4;
  --tint:#F1F4F3;
  --surface:#E8ECEB;
  --panel:#FFFFFF;

  --ink:#141920;
  --ink-soft:#2B3A4A;
  --ink-faint:#5C6772;

  --signal:#0F7A6B;
  --signal-lift:#12A08B;
  --signal-deep:#0A574C;
  --signal-soft:#E0F0EC;
  --signal-wash:#F0F8F6;

  --designed:#9A6A12;
  --designed-soft:#F7EFDD;
  --designed-wash:#FBF6EC;
  --edge:#8A3A3A;
  --edge-soft:#F6E9E9;
  --edge-wash:#FBF3F3;

  --rule:#DCE1E4;
  --rule-firm:#BCC4CA;

  --deep:#0E1A20;
  --deep-2:#132630;
  --deep-tint:#19303B;
  --deep-ink:#EEF3F4;
  --deep-soft:#A9BCC3;
  --deep-faint:#77909A;
  --deep-rule:#23404C;
  --deep-signal:#54C8B2;
  --deep-glow:rgba(84,200,178,.14);

  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 18px 38px -30px rgba(14,26,32,.55);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#10161A; --paper-2:#131A1F; --tint:#151F25; --surface:#1B262C; --panel:#141D23;
    --ink:#EDF2F3; --ink-soft:#B6C4CB; --ink-faint:#83949C;
    --signal:#54C8B2; --signal-lift:#6ADBC5; --signal-deep:#2E9A86;
    --signal-soft:#14332E; --signal-wash:#102623;
    --designed:#D2A959; --designed-soft:#2C2517; --designed-wash:#221D13;
    --edge:#CE7676; --edge-soft:#2E1C1C; --edge-wash:#241717;
    --rule:#24313A; --rule-firm:#394A54;
    --deep:#0A1216; --deep-2:#0E1B22; --deep-tint:#12242C; --deep-ink:#EDF2F3;
    --deep-soft:#A2B5BC; --deep-faint:#728A93; --deep-rule:#1D343E; --deep-signal:#54C8B2;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:18.5px;line-height:1.64;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.wrap{max-width:72rem;margin:0 auto;padding:0 clamp(1.25rem,4.5vw,3.25rem)}
a{color:inherit}
a:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:1px}
h1,h2,h3,h4{font-family:var(--sans);letter-spacing:-.02em}

/* ============================================================
   MASTHEAD — dark, so the page opens on colour rather than paper
   ============================================================ */
.masthead{
  position:sticky;top:0;z-index:30;
  background:var(--deep);
  border-bottom:1px solid var(--deep-rule);
  transition:box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.masthead.lifted{box-shadow:0 14px 34px -26px rgba(0,0,0,.9)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:4.6rem}

/* the mark: four cells — solid, hollow, solid, hollow. The FerriteMem row of
   the pipeline shrunk to a glyph, so the hollows are the two absent models. */
.mark{
  display:inline-flex;align-items:center;gap:.8rem;text-decoration:none;
  font-family:var(--sans);color:var(--deep-ink);
}
.glyph{display:inline-flex;align-items:center;gap:3px;flex:none}
.glyph i{
  width:7px;height:20px;background:var(--deep-signal);display:block;
  transition:transform .34s var(--ease), box-shadow .34s var(--ease);
}
.glyph i.hollow{background:transparent;box-shadow:inset 0 0 0 2px var(--deep-signal)}
.mark:hover .glyph i{transform:scaleY(.68)}
.mark:hover .glyph i.hollow{transform:scaleY(1.22);box-shadow:inset 0 0 0 2px var(--deep-signal), 0 0 14px var(--deep-glow)}
.wordmark{display:inline-flex;align-items:baseline;font-size:1.28rem;font-weight:600;letter-spacing:-.028em}
.wordmark .slash{color:var(--deep-signal);margin:0 .22em;font-weight:300}
.wordmark .product{font-weight:400;color:var(--deep-soft);letter-spacing:-.015em}

.topnav{font-family:var(--sans);font-size:.95rem;display:flex;gap:1.65rem;flex-wrap:wrap;justify-content:flex-end}
.topnav a{
  text-decoration:none;color:var(--deep-soft);padding:.35rem 0;
  box-shadow:inset 0 -2px 0 transparent;
  transition:color .18s var(--ease), box-shadow .18s var(--ease);
}
.topnav a:hover{color:var(--deep-ink);box-shadow:inset 0 -2px 0 var(--deep-signal)}
.topnav a[aria-current],.topnav a.here{color:var(--deep-ink);box-shadow:inset 0 -2px 0 var(--deep-signal)}
@media (max-width:52rem){ .topnav a:not(.keep){display:none} }

/* ============================================================
   NOTICE STRIP
   ============================================================ */
.strip{
  background:var(--deep-2);border-bottom:1px solid var(--deep-rule);
  font-family:var(--sans);font-size:.88rem;color:var(--deep-soft);
}
.strip .wrap{padding-top:.8rem;padding-bottom:.8rem}
.strip b{color:var(--deep-signal);font-weight:600}

/* ============================================================
   HERO — dark, textured, lit. Every page opens here.
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 95% at 12% -10%, var(--deep-glow) 0%, transparent 62%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 72px),
    linear-gradient(176deg, var(--deep-2) 0%, var(--deep) 68%);
  color:var(--deep-ink);
  padding:clamp(3.25rem,8vw,6rem) 0 clamp(3rem,6vw,4.5rem);
  --accent:var(--deep-signal);
  --ink:var(--deep-ink); --ink-soft:var(--deep-soft); --ink-faint:var(--deep-faint);
  --rule:var(--deep-rule); --rule-firm:#3A5765; --panel:var(--deep-tint);
  --signal:var(--deep-signal); --signal-soft:rgba(84,200,178,.1);
  --tint:var(--deep-tint); --surface:var(--deep-tint);
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg, var(--deep-signal) 0%, var(--designed) 46%, var(--edge) 100%);
  opacity:.85;
}

/* the big lockup */
.lockup{
  display:flex;align-items:center;gap:clamp(.9rem,2vw,1.4rem);
  margin:0 0 clamp(1.5rem,3.5vw,2.25rem);
}
.lockup .glyph i{width:clamp(9px,1.5vw,13px);height:clamp(30px,5vw,46px)}
.lockup .glyph{gap:clamp(4px,.7vw,6px)}
.lockup .wm{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(1.9rem,5.4vw,3.6rem);line-height:1;letter-spacing:-.038em;
  display:inline-flex;align-items:baseline;flex-wrap:wrap;
}
.lockup .wm .slash{color:var(--deep-signal);font-weight:200;margin:0 .16em}
.lockup .wm .pr{font-weight:300;color:var(--deep-soft);letter-spacing:-.03em}
@media (prefers-reduced-motion: no-preference){
  .lockup .glyph i{animation:rise .7s var(--ease) both}
  .lockup .glyph i:nth-child(1){animation-delay:.05s}
  .lockup .glyph i:nth-child(2){animation-delay:.14s}
  .lockup .glyph i:nth-child(3){animation-delay:.23s}
  .lockup .glyph i:nth-child(4){animation-delay:.32s}
  @keyframes rise{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:scaleY(1)}}
}

.hero h1{
  margin:0;font-weight:600;
  font-size:clamp(2.15rem,5.2vw,3.7rem);line-height:1.06;
  max-width:19ch;text-wrap:balance;letter-spacing:-.032em;
}
.hero.narrow h1{max-width:23ch}
.lede{
  margin:1.9rem 0 0;max-width:60ch;
  font-size:clamp(1.14rem,1.85vw,1.4rem);font-weight:300;line-height:1.58;
  color:var(--deep-soft);letter-spacing:-.008em;
}
.lede b{font-weight:600;color:var(--deep-ink)}
.lede a{color:var(--deep-signal);text-decoration:none;box-shadow:inset 0 -1px 0 var(--deep-signal)}

/* ============================================================
   BANDS — a rotation, never two the same in a row
   ============================================================ */
.band{padding:clamp(3.25rem,6.5vw,5.25rem) 0;--accent:var(--signal);position:relative}
.band--paper{
  background:
    repeating-linear-gradient(90deg, rgba(20,25,32,.016) 0 1px, transparent 1px 80px),
    var(--paper-2);
}
.band--tint{background:var(--tint);box-shadow:inset 0 1px 0 var(--rule), inset 0 -1px 0 var(--rule)}
.band--wash{background:var(--signal-wash);box-shadow:inset 0 1px 0 var(--rule), inset 0 -1px 0 var(--rule)}
.band--warn.band--wash{background:var(--designed-wash)}
.band--cost.band--wash{background:var(--edge-wash)}
.band--deep{
  background:
    radial-gradient(100% 80% at 85% 0%, var(--deep-glow) 0%, transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 72px),
    var(--deep);
  color:var(--deep-ink);
  --panel:var(--deep-tint);
  --paper:var(--deep); --tint:var(--deep-tint); --surface:var(--deep-tint);
  --ink:var(--deep-ink); --ink-soft:var(--deep-soft); --ink-faint:var(--deep-faint);
  --rule:var(--deep-rule); --rule-firm:#3A5765;
  --signal:var(--deep-signal); --signal-soft:rgba(84,200,178,.12);
  --accent:var(--deep-signal);
}
.band--warn{--accent:var(--designed)}
.band--cost{--accent:var(--edge)}
.band--deep.band--warn{--accent:#D2A959}
.band--deep.band--cost{--accent:#DE8F8F}
.band--ruled{border-top:3px solid var(--accent)}

/* ============================================================
   SECTION HEADS
   ============================================================ */
main{counter-reset:sec}
.sechead{
  display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;position:relative;
  border-bottom:1px solid var(--rule-firm);padding-bottom:.8rem;margin-bottom:2.4rem;
}
.sechead::after{content:"";position:absolute;left:0;bottom:-1px;width:5.5rem;height:3px;background:var(--accent)}
.sechead h2{
  margin:0;font-size:clamp(1.24rem,2.2vw,1.55rem);font-weight:600;color:var(--ink);
  display:inline-flex;align-items:baseline;gap:.75rem;letter-spacing:-.024em;
}
.sechead h2::before{
  content:"";width:.6rem;height:.6rem;background:var(--accent);flex:none;transform:translateY(-.12em);
}
.sechead h2::after{
  counter-increment:sec;content:counter(sec,decimal-leading-zero);
  font-family:var(--sans);font-size:.76rem;font-weight:600;color:var(--accent);
  opacity:.8;letter-spacing:.05em;align-self:flex-start;
}
.sechead .hint{font-family:var(--sans);font-size:.92rem;color:var(--ink-faint);margin-left:auto;text-align:right}

.claim{
  font-family:var(--sans);font-weight:600;letter-spacing:-.026em;
  font-size:clamp(1.5rem,3.2vw,2.15rem);line-height:1.18;
  margin:0 0 1.35rem;max-width:25ch;text-wrap:balance;
  padding-left:1.25rem;border-left:4px solid var(--accent);
}
.body{margin:0 0 1.1rem;color:var(--ink-soft);max-width:60ch;font-size:1.04rem}
.body:last-child{margin-bottom:0}
.onward{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.75rem;
  font-family:var(--sans);font-size:.98rem;font-weight:500;color:var(--accent);
  text-decoration:none;padding:.55rem 1.1rem;
  border:1px solid var(--accent);
  transition:background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.onward::after{content:"\2192";transition:transform .2s var(--ease)}
.onward:hover{background:var(--accent);color:var(--panel)}
.onward:hover::after{transform:translateX(3px)}
.band--deep .onward:hover{color:var(--deep)}

/* ============================================================
   STAT STRIP
   ============================================================ */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
  margin-top:clamp(2.75rem,5vw,3.75rem);
}
.stat{padding:1.55rem 1.4rem;background:var(--panel)}
.stat .n{
  font-family:var(--sans);font-weight:600;font-size:clamp(1.9rem,3vw,2.4rem);
  letter-spacing:-.035em;color:var(--signal);display:block;line-height:1;
}
.stat .n.soft{color:var(--designed)}
.stat .n.edge{color:var(--edge)}
.stat .n.plain{color:var(--ink)}
.stat .l{font-family:var(--sans);font-size:.86rem;color:var(--ink-faint);display:block;margin-top:.65rem;line-height:1.45}
.stat.byd .l::after{content:" \00b7 by design"}

/* ============================================================
   TAGS
   ============================================================ */
.tag{
  font-family:var(--sans);font-size:.74rem;font-weight:600;padding:.22rem .6rem;
  white-space:nowrap;vertical-align:.1em;border:1px solid var(--rule-firm);color:var(--ink-faint);
}
.tag.measured{color:var(--signal);border-color:var(--signal);background:var(--signal-soft)}
.tag.planned{color:var(--designed);border-color:var(--designed);background:var(--designed-soft)}
.tag.design{color:var(--ink-faint);background:var(--surface)}

/* ============================================================
   CAPABILITY PANELS — four of the site's biggest sections
   ============================================================ */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(18.5rem,1fr));gap:1.35rem}
.cap{
  position:relative;background:var(--panel);
  border:1px solid var(--rule);border-left:4px solid var(--rule-firm);
  padding:1.6rem 1.7rem;
  transition:border-left-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.cap:hover{border-left-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)}
.cap h3{
  margin:0 0 .85rem;padding-bottom:.8rem;border-bottom:1px solid var(--rule);
  font-size:1.14rem;font-weight:600;letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:.65rem;flex-wrap:wrap;
}
.cap p{margin:0;font-size:1.02rem;line-height:1.56;color:var(--ink-soft);max-width:46ch}
@media (prefers-reduced-motion:reduce){ .cap:hover{transform:none} }

/* ============================================================
   THE PIPELINE — the site's central diagram
   ============================================================ */
.diagram{
  margin:clamp(2.75rem,5vw,3.75rem) 0 0;
  background:var(--panel);
  border:1px solid var(--rule);border-top:3px solid var(--accent);
  padding:clamp(1.75rem,3.2vw,2.5rem);
  box-shadow:var(--shadow);
}
.diagram-scroll{overflow-x:auto;padding-bottom:.35rem}
.paths{
  display:grid;grid-template-columns:auto repeat(5,minmax(5.75rem,1fr));
  align-items:center;gap:1rem 0;min-width:37rem;font-family:var(--sans);
}
.rowlab{
  font-size:.82rem;padding-right:1.35rem;white-space:nowrap;text-align:right;
  color:var(--ink-faint);
}
.rowlab.ours{color:var(--accent);font-weight:600}
.node{position:relative;text-align:center;font-size:.9rem;padding:.85rem .4rem}
.node.box{
  border:1px solid var(--rule-firm);background:var(--surface);
  color:var(--ink-soft);margin:0 .35rem;
}
.node.model{
  background:
    repeating-linear-gradient(45deg, transparent 0 5px, rgba(92,103,114,.12) 5px 10px),
    var(--surface);
  color:var(--ink-faint);font-weight:500;
}
.node.mine{
  border-color:var(--accent);color:var(--ink);background:var(--panel);
  box-shadow:inset 0 -2px 0 var(--accent);
}
.node.gap{
  border:2px dashed var(--accent);background:var(--signal-soft);
  margin:0 .35rem;color:transparent;
}
.node:not(.rowlab)::after{
  content:"";position:absolute;top:50%;right:-.38rem;width:.76rem;height:1px;
  background:var(--rule-firm);
}
.node:last-child::after{display:none}
/* an arrowhead on the FerriteMem row, so the direct path reads as a flow */
.paths > .node.mine::before{
  content:"";position:absolute;top:50%;right:-.42rem;
  border:3px solid transparent;border-left-color:var(--accent);
  transform:translateY(-50%);
}
.paths > *:nth-child(12)::before{display:none}

@media (prefers-reduced-motion: no-preference){
  .node.gap{animation:slot .8s var(--ease) .45s both}
  @keyframes slot{from{opacity:0;transform:scaleX(.4)}to{opacity:1;transform:scaleX(1)}}
}
.dgm-note{
  font-family:var(--sans);font-size:.92rem;color:var(--ink-soft);
  margin:1.6rem 0 0;max-width:62ch;line-height:1.56;
  padding-top:1.2rem;border-top:1px solid var(--rule);
}
.dgm-note b{font-weight:600;color:var(--ink)}

/* ============================================================
   TWO COLUMNS
   ============================================================ */
.twocol{display:grid;grid-template-columns:repeat(auto-fit,minmax(21rem,1fr));gap:clamp(2rem,4vw,3.5rem)}
.twocol p{margin:0 0 1.1rem;color:var(--ink-soft);max-width:58ch;font-size:1.04rem}
.twocol p:last-child{margin-bottom:0}
.twocol h3{
  margin:0 0 .9rem;font-size:1.14rem;font-weight:600;color:var(--ink);
  padding-left:1rem;border-left:3px solid var(--accent);letter-spacing:-.02em;
}

/* ============================================================
   TABLES
   ============================================================ */
.tablewrap{overflow-x:auto;background:var(--panel);border:1px solid var(--rule);padding:.5rem 1.35rem}
table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.95rem;min-width:34rem}
caption{caption-side:bottom;text-align:left;font-size:.88rem;color:var(--ink-faint);padding:1.25rem 0 .75rem;line-height:1.56;max-width:66ch}
th,td{text-align:left;vertical-align:top;padding:.9rem 1.1rem;border-bottom:1px solid var(--rule)}
th:first-child,td:first-child{padding-left:0}
thead th{font-weight:600;font-size:.82rem;color:var(--ink-faint);border-bottom:2px solid var(--accent);padding-bottom:.7rem;letter-spacing:.01em}
tbody th{font-weight:500;color:var(--ink);width:15rem}
tbody td{color:var(--ink-soft)}
tbody td.figure{color:var(--signal);font-weight:600;white-space:nowrap;font-size:1rem}
tbody td.figure.soft{color:var(--designed)}
tbody td.figure.edge{color:var(--edge)}
tbody td.figure.plain{color:var(--ink-soft);font-weight:400}
tbody tr{transition:background-color .16s var(--ease)}
tbody tr:hover{background:var(--tint)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none}

.figkey{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;margin-top:1.35rem;font-family:var(--sans);font-size:.85rem;color:var(--ink-faint)}
.figkey span{display:inline-flex;align-items:center;gap:.5rem}
.figkey i{width:.7rem;height:.7rem;flex:none;font-style:normal}
.figkey .k1 i{background:var(--signal)}
.figkey .k2 i{background:var(--designed)}
.figkey .k3 i{background:var(--edge)}

/* ============================================================
   NUMBERED STEPS
   ============================================================ */
.deploy{counter-reset:step;display:grid;gap:1.1rem}
.step{
  display:grid;grid-template-columns:3rem 1fr;gap:1.35rem;align-items:start;
  background:var(--panel);border:1px solid var(--rule);padding:1.35rem 1.5rem;
  transition:box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.step:hover{box-shadow:var(--shadow);border-color:var(--rule-firm)}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--sans);font-size:.92rem;font-weight:600;
  color:var(--panel);background:var(--accent);
  width:3rem;height:3rem;display:grid;place-items:center;
  transition:transform .22s var(--ease);
}
.step:hover::before{transform:scale(1.07)}
.step h3{margin:.35rem 0 .5rem;font-size:1.1rem;font-weight:600;letter-spacing:-.018em}
.step p{margin:0;color:var(--ink-soft);font-size:1.02rem;max-width:58ch}

/* ============================================================
   SECTOR CARDS
   ============================================================ */
.cards{display:grid;gap:1.35rem}
.card{
  border:1px solid var(--rule);border-top:3px solid var(--rule-firm);
  background:var(--panel);padding:1.6rem 1.7rem;
  transition:box-shadow .22s var(--ease), transform .22s var(--ease);
}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card.lvl-absolute{border-top-color:var(--edge)}
.card.lvl-high{border-top-color:var(--designed)}
.card.lvl-low{border-top-color:var(--signal)}
.card.lvl-none{border-top-color:var(--rule-firm)}
.card[hidden]{display:none}
.card-head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.15rem;padding-bottom:.85rem;border-bottom:1px solid var(--rule)}
.card-head h3{margin:0;font-size:1.22rem;font-weight:600;letter-spacing:-.022em}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:1.5rem 2.75rem}
.card-grid h4{font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--ink-faint);margin:0 0 .6rem;letter-spacing:.02em}
.card-grid p{margin:0;font-size:1.01rem;color:var(--ink-soft);max-width:48ch;line-height:1.56}
.card-grid .delivers h4{color:var(--signal)}
@media (prefers-reduced-motion:reduce){ .card:hover{transform:none} }

/* ============================================================
   SPECTRUM
   ============================================================ */
.spectrum{display:grid;gap:.55rem;font-family:var(--sans);background:var(--panel);border:1px solid var(--rule);padding:1.4rem 1.5rem}
.srow{display:flex;align-items:center;gap:1.1rem}
.srow .name{width:12rem;flex:none;text-align:right;font-size:.92rem;font-weight:600;color:var(--ink-soft);transition:color .18s var(--ease)}
.srow .track{flex:1;height:2rem;min-width:8rem;position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--rule)}
.srow .fill{height:100%;display:flex;align-items:center;padding-left:.9rem;font-family:var(--serif);font-style:italic;font-size:.88rem;color:#fff;white-space:nowrap;width:var(--w);transition:width .95s var(--ease)}
.srow .need{width:6rem;flex:none;font-size:.74rem;font-weight:600;letter-spacing:.03em;color:var(--ink-faint)}
.n-none{color:var(--ink-faint)}
.n-low{color:var(--signal)}
.n-high{color:var(--designed)}
.n-abs{color:var(--edge)}
.srow.link{cursor:pointer}
.srow.link:hover .name{color:var(--ink)}
.srow.link:hover .track{border-color:var(--ink-faint)}
.srow.link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:42rem){
  .srow{flex-wrap:wrap;gap:.4rem .9rem}
  .srow .name{width:auto;text-align:left;order:1}
  .srow .need{order:2;width:auto;margin-left:auto}
  .srow .track{order:3;flex-basis:100%}
}

/* ============================================================
   COMPARISON PANELS
   ============================================================ */
.versus{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:1.35rem}
.panel{
  border:1px solid var(--rule-firm);background:var(--panel);padding:1.7rem;
  transition:box-shadow .22s var(--ease);
}
.panel:hover{box-shadow:var(--shadow)}
.panel.good{border-left:4px solid var(--accent)}
.panel h3{margin:0 0 .35rem;font-size:1.14rem;font-weight:600;letter-spacing:-.02em}
.panel .sub{font-family:var(--sans);font-size:.86rem;color:var(--ink-faint);margin:0 0 1.15rem}
.panel p{margin:0 0 1.15rem;font-size:1.01rem;color:var(--ink-soft)}
.panel ul{margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:.94rem}
.panel li{padding:.45rem 0 .45rem 1.7rem;position:relative;color:var(--ink-soft)}
.panel li::before{position:absolute;left:0;font-weight:700}
.panel li.no::before{content:"\00d7";color:var(--edge)}
.panel li.yes::before{content:"\2713";color:var(--signal)}
.verdict{font-family:var(--sans);font-size:.9rem;font-weight:600;margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--rule)}
.verdict.fail{color:var(--edge)}
.verdict.pass{color:var(--signal)}

/* ============================================================
   TIER STACK
   ============================================================ */
.tiers{display:grid;gap:.9rem}
.tier{
  border:1px solid var(--rule);border-left:4px solid var(--rule-firm);
  background:var(--panel);padding:1.35rem 1.55rem;
  display:grid;grid-template-columns:1fr auto;gap:.85rem 1.75rem;align-items:baseline;
  transition:border-left-color .22s var(--ease), box-shadow .22s var(--ease);
}
.tier:hover{border-left-color:var(--accent);box-shadow:var(--shadow)}
.tier h3{margin:0;font-size:1.1rem;font-weight:600;letter-spacing:-.018em}
.tier p{margin:.45rem 0 0;font-size:1rem;color:var(--ink-soft);max-width:56ch}
.tier .life{font-family:var(--sans);font-size:.84rem;color:var(--ink-faint);white-space:nowrap}
.tier.protected{border-left-color:var(--accent)}
.tier.protected .life{color:var(--accent);font-weight:500}

/* ============================================================
   STATUS BOX
   ============================================================ */
.statusbox{
  border:1px solid var(--rule-firm);border-left:4px solid var(--accent);
  background:var(--panel);padding:clamp(1.75rem,3vw,2.25rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:1.75rem 2.75rem;
}
.statusbox h3{margin:0 0 .7rem;font-size:1.12rem;font-weight:600;letter-spacing:-.018em}
.statusbox p{margin:0;color:var(--ink-soft);font-size:1.02rem;max-width:52ch}

/* ============================================================
   FILTER
   ============================================================ */
.filter{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.25rem;font-family:var(--sans)}
.filter button{
  font:inherit;font-size:.92rem;font-weight:500;cursor:pointer;
  padding:.5rem 1.1rem;border:1px solid var(--rule-firm);
  background:var(--panel);color:var(--ink-soft);
  transition:border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease);
}
.filter button:hover{border-color:var(--ink-faint);color:var(--ink)}
.filter button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--edge-soft)}
.filter .count{color:var(--ink-faint);font-weight:400;margin-left:.45rem}

/* ============================================================
   REVEAL AND BARS — script-scoped, so nothing hides without it
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(12px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .55s var(--ease), transform .55s var(--ease)}
.js .reveal.d1.in{transition-delay:.06s}
.js .reveal.d2.in{transition-delay:.12s}
.js .reveal.d3.in{transition-delay:.18s}
.js .reveal.d4.in{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1;transform:none} }

td.figure.bar{position:relative}
td.figure.bar span{position:relative;z-index:1}
td.figure.bar::before{
  content:"";position:absolute;left:0;bottom:.5rem;height:4px;
  width:var(--w,0);background:currentColor;opacity:.3;transition:width .85s var(--ease);
}
.js td.figure.bar::before{width:0}
.js tr.in td.figure.bar::before{width:var(--w,0)}
.js .srow .fill{width:0}
.js .spectrum.in .srow .fill{width:var(--w)}
.js .spectrum.in .srow:nth-child(1) .fill{transition-delay:0s}
.js .spectrum.in .srow:nth-child(2) .fill{transition-delay:.06s}
.js .spectrum.in .srow:nth-child(3) .fill{transition-delay:.12s}
.js .spectrum.in .srow:nth-child(4) .fill{transition-delay:.18s}
.js .spectrum.in .srow:nth-child(5) .fill{transition-delay:.24s}
.js .spectrum.in .srow:nth-child(6) .fill{transition-delay:.30s}
.js .spectrum.in .srow:nth-child(7) .fill{transition-delay:.36s}
.js .spectrum.in .srow:nth-child(8) .fill{transition-delay:.42s}
.js .spectrum.in .srow:nth-child(9) .fill{transition-delay:.48s}

.js .diagram.in .node.box{animation:lit .5s var(--ease) both}
.js .diagram.in .paths > *:nth-child(2){animation-delay:.05s}
.js .diagram.in .paths > *:nth-child(3){animation-delay:.15s}
.js .diagram.in .paths > *:nth-child(4){animation-delay:.25s}
.js .diagram.in .paths > *:nth-child(5){animation-delay:.35s}
.js .diagram.in .paths > *:nth-child(6){animation-delay:.45s}
.js .diagram.in .paths > *:nth-child(8){animation-delay:.66s}
.js .diagram.in .paths > *:nth-child(10){animation-delay:.82s}
.js .diagram.in .paths > *:nth-child(12){animation-delay:.98s}
.js .diagram.in .node.gap{animation:slot .65s var(--ease) both}
.js .diagram.in .paths > *:nth-child(9){animation-delay:.74s}
.js .diagram.in .paths > *:nth-child(11){animation-delay:.90s}
@keyframes lit{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:
    radial-gradient(90% 100% at 10% 0%, var(--deep-glow) 0%, transparent 55%),
    var(--deep);
  color:var(--deep-ink);padding:clamp(3rem,5.5vw,4rem) 0;
  border-top:3px solid var(--deep-signal);
}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1.5rem 3rem;font-family:var(--sans)}
.addresses{display:grid;grid-template-columns:auto;gap:.35rem 1.1rem;align-items:baseline}
@media (min-width:30rem){ .addresses{grid-template-columns:auto auto;gap:.5rem 1.1rem} }
.addr-note{font-size:.82rem;color:var(--deep-faint)}
.mailto{
  font-size:1.14rem;font-weight:500;text-decoration:none;color:var(--deep-ink);
  box-shadow:inset 0 -2px 0 var(--deep-signal);padding:.2rem .15rem;
  transition:background-color .2s var(--ease);
}
.mailto:hover{background:var(--deep-tint)}
.mailto:focus-visible{outline-color:var(--deep-signal)}
.mailto.second{font-size:1rem;font-weight:400;color:var(--deep-soft)}
.mailto.second:hover{color:var(--deep-ink)}
.footnav{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.92rem}
.footnav a{color:var(--deep-soft);text-decoration:none;transition:color .18s var(--ease)}
.footnav a:hover{color:var(--deep-ink)}
.colophon{font-size:.86rem;color:var(--deep-faint);line-height:1.6;max-width:46ch}