/* ==========================================================================
   Nyquist — shared design system
   Locked palette · Inter Tight + JetBrains Mono · hairline editorial grid
   Used by: index.html, Platform.html, Operators.html, Research.html, Why Nyquist.html
   ========================================================================== */

:root{
  --d:1;
  --rule: calc(150px * var(--d));
  --rule-half: calc(88px * var(--d));
  --pad-x: 56px;
  --max-w: 1480px;

  --font-sans: "Inter Tight", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --bg:        #F6F6F4;
  --bg-2:      #ECECE7;
  --panel:     #FFFFFF;
  --ink:       #0B0E14;
  --ink-2:     #353842;
  --ink-3:     #696C75;
  --ink-4:     #9A9C9F;
  --line:      #E2E2DB;
  --line-2:    #D0D0C7;
  --hair:      rgba(11,14,20,.10);
  --accent:    #2D6BFF;
  --accent-ink:#FFFFFF;
  --accent-tint:#EEF2FF;
  --pos: #1F6B3E;
  --neg: #8A2B1E;
  --warn:#8A6A1E;
}
html[data-theme="dark"]{
  --bg:        #0C0D10;
  --bg-2:      #15171B;
  --panel:     #14161A;
  --ink:       #F2F0EA;
  --ink-2:     #C8C7C1;
  --ink-3:     #8A8B8E;
  --ink-4:     #555659;
  --line:      #23252A;
  --line-2:    #2E3036;
  --hair:      rgba(242,240,234,.14);
  --accent-tint:#10183A;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv11";
}
.mono{
  font-family:var(--font-mono);
  font-feature-settings:"zero","ss01";
  letter-spacing:0;
  text-transform:uppercase;
}
a{color:inherit; text-decoration:none}
::selection{ background:var(--accent); color:var(--accent-ink)}

.wrap{ max-width:var(--max-w); margin:0 auto; padding:0 var(--pad-x) }
.rule{ height:1px; background:var(--hair); border:0; margin:0 }

/* ============ TYPE ============ */
h1,h2,h3,h4{margin:0; font-weight:500; letter-spacing:-0.035em; line-height:1.0}
h1{ font-size: clamp(42px, 6.4vw, 84px); font-weight:400; letter-spacing:-0.045em; line-height:.96 }
h2{ font-size: clamp(30px, 4.2vw, 54px); font-weight:400; letter-spacing:-0.035em; line-height:1.0 }
h3{ font-size: clamp(22px, 2.4vw, 32px); font-weight:500; letter-spacing:-0.02em; line-height:1.08 }
h4{ font-size: 18px; letter-spacing:-0.01em; font-weight:500 }
p{ margin:0; color:var(--ink-2)}
em.serif{ font-style:italic; color:var(--ink); font-weight:400; font-feature-settings:"ss01"}
.ink-3{ color:var(--ink-3)}
.ink-2{ color:var(--ink-2)}

.lede{ font-size:18.5px; line-height:1.45; color:var(--ink-2); max-width:34ch; font-weight:400 }
.body-l{ font-size:16.5px; line-height:1.6; color:var(--ink-2); max-width:64ch }
.body{ font-size:16px; line-height:1.55; color:var(--ink-2); max-width:64ch }

.mark{
  font-family:var(--font-mono); font-size:11.5px;
  color:var(--ink-3); letter-spacing:.16em; text-transform:uppercase;
}
.mark b{ color:var(--ink); font-weight:500 }
.mark .ast{ color:var(--accent); margin-right:6px }

.ix{
  font-family:var(--font-mono); font-size:12.5px;
  color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase;
  display:inline-flex; align-items:baseline; gap:10px;
}
.ix .ast{ color:var(--accent) }
.ix b{ color:var(--ink); font-weight:500 }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  height:46px; padding:0 22px;
  font-family:var(--font-sans);
  font-size:15px; font-weight:500;
  border:1px solid transparent; border-radius:999px;
  cursor:pointer; white-space:nowrap; letter-spacing:-0.005em;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn .arrow{ font-family:var(--font-mono); font-size:13px; transform:translateY(-1px)}
.btn-primary{ background:var(--ink); color:var(--bg); border-color:var(--ink)}
.btn-primary:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{ border-color:var(--ink) }
.btn-link{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--ink); font-weight:500; font-size:15px;
  border-bottom:1px solid var(--ink); padding-bottom:2px;
  white-space:nowrap;
}
.btn-link:hover{ color:var(--accent); border-bottom-color:var(--accent) }
.btn-sm{ height:36px; padding:0 16px; font-size:13.5px }

/* ============ HEADER ============ */
header.site{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.2) blur(10px);
}
.hd{
  display:grid; grid-template-columns: 1fr auto 1fr;
  align-items:center; height:72px;
  border-bottom:1px solid var(--hair);
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:500; letter-spacing:-0.02em }
.brand img{ width:22px; height:22px; display:block; border-radius:3px }
.brand .name{ font-size:17px; letter-spacing:-0.025em }
nav.top{ display:flex; gap:32px; justify-content:center }
nav.top a{ color:var(--ink-2); font-size:14px }
nav.top a:hover{ color:var(--ink) }
nav.top a.active{ color:var(--ink) }
nav.top a.active::after{
  content:"★"; color:var(--accent); font-size:8px;
  vertical-align:super; margin-left:4px;
}
.hd-right{ display:flex; gap:8px; justify-content:flex-end; align-items:center}
.hd-right .mono{ font-size:11.5px; color:var(--ink-3); letter-spacing:.14em; margin-right:10px; white-space:nowrap}
.hd-right .pulse{
  width:7px; height:7px; border-radius:50%; background:var(--pos);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pos) 18%, transparent);
  display:inline-block; transform:translateY(-1px); margin-right:8px;
}

/* ============ SECTIONS ============ */
section{ padding: var(--rule) 0; position:relative }
section + section{ border-top:1px solid var(--hair) }
.section-head{
  display:grid; grid-template-columns: 240px 1fr; gap:64px;
  align-items:start; margin-bottom: var(--rule-half);
}
.section-head .ix{ position:sticky; top:96px; }

/* ============ PAGE HERO (interior pages) ============ */
.page-hero{ padding-top: 88px; padding-bottom: var(--rule-half) }
.page-hero .ix{ margin-bottom:40px }
.page-hero h1{
  font-size: clamp(36px, 5vw, 62px); line-height:1.0; max-width:18ch;
}
.page-hero h1 em{ font-style:italic; color:var(--ink-3); font-weight:400 }
.page-hero h1 .ac{ color:var(--accent) }
.page-hero .lede{
  margin-top:36px; max-width:62ch; font-size:18.5px;
}
.page-hero .hero-foot{
  display:flex; gap:40px; flex-wrap:wrap;
  margin-top:56px; padding-top:28px; border-top:1px solid var(--hair);
}
.page-hero .hero-foot .row{
  font-family:var(--font-mono); font-size:11.5px;
  color:var(--ink-3); letter-spacing:.12em; text-transform:uppercase; line-height:1.5;
}
.page-hero .hero-foot .row b{ display:block; color:var(--ink); font-weight:500; margin-top:6px }

/* ============ HERO (home) ============ */
.hero{ padding-top: 96px; padding-bottom: var(--rule) }
.hero-meta-top{
  display:grid; grid-template-columns: 1fr 1fr 1fr;
  gap:48px; padding-bottom:24px;
  border-bottom:1px solid var(--hair);
  margin-bottom: 80px;
}
.hero-meta-top .item{
  font-family:var(--font-mono); font-size:11.5px;
  color:var(--ink-3); letter-spacing:.14em; text-transform:uppercase; line-height:1.5;
}
.hero-meta-top .item b{ display:block; color:var(--ink); font-weight:500; margin-top:6px}
.hero h1{ max-width: 18ch }
.hero h1 em{ font-style:italic; color:var(--ink-3); font-weight:400; letter-spacing:-0.04em }
.hero h1 .ac{ color:var(--accent); font-weight:400 }
.hero-foot{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto;
  gap:64px; align-items:end; margin-top: 96px;
  padding-top:32px; border-top:1px solid var(--hair);
}
.hero-foot .lede{ max-width:36ch }
.hero-foot .mono-list{ display:grid; gap:10px}
.hero-foot .mono-list .row{
  font-family:var(--font-mono); font-size:11.5px;
  color:var(--ink-3); letter-spacing:.12em; text-transform:uppercase; line-height:1.5;
}
.hero-foot .mono-list .row b{ color:var(--ink); font-weight:500 }
.hero-foot .ctas{ display:flex; gap:10px; align-items:center}

/* product placeholder */
.shot{
  position:relative; background:var(--panel);
  border:1px solid var(--line); border-radius:6px; overflow:hidden;
  box-shadow: 0 1px 0 rgba(11,14,20,.02), 0 30px 80px -40px rgba(11,14,20,.18);
}
.shot-head{
  height:36px; padding:0 14px;
  display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 50%, var(--panel));
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3); letter-spacing:.04em;
}
.shot-head .dots{ display:flex; gap:6px}
.shot-head .dots i{ display:block; width:8px; height:8px; border-radius:50%; background:var(--line-2)}
.shot-head .dots i.r{ background:#E16A5A } .shot-head .dots i.y{ background:#E2C04A } .shot-head .dots i.g{ background:#62B47A }
.shot-body{
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient( 135deg,
      color-mix(in oklab, var(--bg) 56%, transparent) 0 16px, transparent 16px 32px),
    var(--panel);
  display:flex; align-items:center; justify-content:center;
}
.shot-label{
  font-family:var(--font-mono); font-size:12px;
  color:var(--ink-3); text-transform:uppercase; letter-spacing:.16em;
  background:var(--panel); padding:8px 14px; border:1px solid var(--line); border-radius:999px;
}

/* ============ MANIFESTO ============ */
.manifesto{ padding: var(--rule-half) 0 }
.manifesto-grid{ display:grid; grid-template-columns: 240px 1fr; gap:64px; align-items:start }
.manifesto h2{
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight:400; letter-spacing:-0.03em; line-height:1.12; max-width: 26ch;
}
.manifesto h2 em{ font-style:italic; color:var(--accent); font-weight:400 }
.manifesto h2 i{ font-style:italic; color:var(--ink-3); font-weight:400 }

/* ============ STATS ROW ============ */
.stats{ padding: var(--rule-half) 0 }
.stats-row{ display:grid; grid-template-columns: repeat(6, 1fr); gap:0 }
.stats-row.cols-4{ grid-template-columns: repeat(4,1fr) }
.stats-row.cols-3{ grid-template-columns: repeat(3,1fr) }
.stats-row > div{ padding: 0 24px; border-left:1px solid var(--hair) }
.stats-row > div:first-child{ border-left:none; padding-left:0 }
.stats-row .n{
  font-size: clamp(32px, 3.2vw, 46px);
  font-weight:400; letter-spacing:-0.03em; line-height:1; font-variant-numeric:tabular-nums;
}
.stats-row .l{
  margin-top:18px; font-family:var(--font-mono); font-size:11px;
  color:var(--ink-3); text-transform:uppercase; letter-spacing:.14em;
}
.stats-row .d{ margin-top:10px; font-size:13.5px; color:var(--ink-2); line-height:1.5 }

/* ============ PROBLEM ============ */
.prob{ display:grid; grid-template-columns: 240px 1fr; gap:64px; align-items:start }
.prob h2{ max-width:18ch; margin-bottom:48px }
.prob-list{ display:grid; gap:0; padding:0; margin:0; list-style:none}
.prob-list li{
  display:grid; grid-template-columns: 56px 1fr 220px; gap:48px; align-items:start;
  padding:32px 0; border-top:1px solid var(--hair);
}
.prob-list li:last-child{ border-bottom:1px solid var(--hair)}
.prob-list .n{ font-family:var(--font-mono); font-size:12px; color:var(--ink-3); letter-spacing:.16em; text-transform:uppercase }
.prob-list .t{
  font-size: clamp(19px, 1.5vw, 23px); font-weight:500; letter-spacing:-0.015em; line-height:1.2;
  color:var(--ink); max-width:32ch;
}
.prob-list .t em{ font-style:italic; color:var(--ink-3); font-weight:400; letter-spacing:-0.02em }
.prob-list .p{ font-size:14.5px; color:var(--ink-2); line-height:1.55 }

/* glue diagram */
.glue{ margin-top: var(--rule-half); display:grid; grid-template-columns: 1fr 1fr; gap:96px; align-items:start }
.glue h3{ font-size: clamp(22px, 2vw, 28px); margin-bottom:18px}
.glue-list{ font-family:var(--font-mono); font-size:13px; color:var(--ink-2)}
.glue-list .row{
  display:grid; grid-template-columns: 1fr auto;
  padding:12px 0; border-top:1px dashed var(--line-2); letter-spacing:.04em;
}
.glue-list .row:last-child{ border-bottom:1px dashed var(--line-2)}
.glue-list .row b{ color:var(--ink); font-weight:500 }
.glue-list .row .x{ color:var(--neg); letter-spacing:.12em; text-transform:uppercase; font-size:11px }
.glue-list .row .x.warn{ color:var(--warn)}
.glue-list .row .x.ok{ color:var(--accent)}

/* ============ OPERATORS ============ */
.ops > article{
  display:grid; grid-template-columns: 240px 1fr; gap:64px; align-items:start;
  padding: var(--rule-half) 0; border-top:1px solid var(--hair);
}
.ops > article:first-of-type{ border-top:none; padding-top:0}
.ops .op-body{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap:64px; align-items:start }
.ops h3{
  font-size: clamp(26px, 3vw, 40px); font-weight:400; letter-spacing:-0.025em; line-height:1.06;
  max-width: 16ch; color:var(--ink);
}
.ops h3 em{ font-style:italic; color:var(--ink-3); font-weight:400}
.ops h3 .ac{ color:var(--accent) }
.ops .op-body p{ font-size:16px; line-height:1.6; color:var(--ink-2); max-width:42ch}
.ops .ftag{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.14em;
  padding-top:16px; margin-top:28px; border-top:1px solid var(--hair);
}
.ops .ftag b{ color:var(--ink); font-weight:500 }

/* workspace mocks */
.ws{
  border:1px solid var(--line); background:var(--panel); border-radius:6px; overflow:hidden;
  box-shadow: 0 1px 0 rgba(11,14,20,.02), 0 30px 80px -50px rgba(11,14,20,.16);
}
.ws-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 50%, var(--panel));
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3); letter-spacing:.04em;
}
.ws-head .live{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-2)}
.ws-head .pulse{
  width:7px; height:7px; border-radius:50%; background:var(--pos);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pos) 18%, transparent);
}
.ws-row{
  display:grid; grid-template-columns: 180px 1fr 72px; gap:18px; align-items:start;
  padding:18px 16px; border-bottom:1px solid var(--line);
}
.ws-row:last-child{ border-bottom:none }
.ws-row .name{
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink);
  font-weight:500; letter-spacing:.06em; text-transform:uppercase;
}
.ws-row .name .role{
  display:block; font-size:10.5px; color:var(--ink-3);
  font-weight:400; text-transform:uppercase; letter-spacing:.12em; margin-top:4px;
}
.ws-row .arg{ font-size:14px; color:var(--ink-2); line-height:1.5}
.ws-row .arg em{ font-style:italic; color:var(--ink); font-weight:500 }
.ws-row .score{
  text-align:right; font-family:var(--font-mono); font-size:13px; font-weight:500;
  color:var(--pos); font-variant-numeric:tabular-nums;
}
.ws-row .score.warn{ color:var(--warn)}
.ws-row .score.neg{ color:var(--neg)}
.ws-synth{
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:24px;
  padding:22px 16px; background:var(--bg-2);
}
.ws-synth .syn-title{
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.14em;
}
.ws-synth .call{ font-size:22px; font-weight:500; letter-spacing:-0.02em }
.ws-synth .call .dir{ color:var(--accent) }
.ws-synth .conf{
  text-align:right; font-family:var(--font-mono); font-size:28px; font-weight:500;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.ws-synth .conf small{
  display:block; font-size:10.5px; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.14em; margin-top:4px;
}
.ws-inval{
  padding:14px 16px; font-family:var(--font-mono); font-size:12px; color:var(--ink-2);
  border-top:1px solid var(--line); line-height:1.5;
}
.ws-inval b{
  color:var(--neg); font-weight:500; text-transform:uppercase; letter-spacing:.12em;
  font-size:10.5px; display:block; margin-bottom:4px;
}

/* scenario table */
.scen{ width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:12.5px }
.scen th, .scen td{
  padding:14px 16px; text-align:right; font-variant-numeric:tabular-nums;
  border-bottom:1px solid var(--line);
}
.scen th{ color:var(--ink-3); font-weight:500; letter-spacing:.06em; text-transform:uppercase; font-size:10.5px }
.scen th:first-child, .scen td:first-child{ text-align:left }
.scen td:first-child{ color:var(--ink); font-size:12px}
.scen td.tot{ color:var(--ink); font-weight:500 }
.scen td.neg{ color:var(--neg) }

/* ============ VS TABLE ============ */
.vs-table{ width:100%; border-collapse:collapse; font-size:14px; margin-top: var(--rule-half)}
.vs-table th, .vs-table td{
  padding:18px 16px; border-bottom:1px solid var(--hair); text-align:center; color:var(--ink-2);
}
.vs-table th{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--ink-3); font-weight:500; border-bottom:1px solid var(--ink-3);
}
.vs-table th.cap, .vs-table td.cap{ text-align:left; color:var(--ink); padding-left:0 }
.vs-table td.cap{ font-family:var(--font-sans); font-size:14.5px; font-weight:500; text-transform:none; letter-spacing:-0.005em}
.vs-table th.us{ color:var(--accent) }
.vs-table td.us{ background: color-mix(in oklab, var(--accent) 5%, transparent); color:var(--ink); font-weight:500 }
.vs-table .yes{ color:var(--pos); font-family:var(--font-mono); font-size:14px}
.vs-table .no{ color:var(--ink-4); font-family:var(--font-mono); font-size:14px}
.vs-table .partial{ color:var(--warn); font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em}
.vs-foot{ margin-top:48px; display:grid; grid-template-columns: 1fr 1fr; gap:64px; padding-top:32px; border-top:1px solid var(--hair) }
.vs-foot p{ font-size:15.5px; color:var(--ink-2); line-height:1.6}
.vs-foot b{ color:var(--ink); font-weight:500}

/* ============ PULL QUOTE ============ */
.pull{ padding: var(--rule) 0; text-align:center }
.pull blockquote{
  margin:0 auto; max-width: 24ch;
  font-size: clamp(34px, 4.4vw, 60px); font-weight:400; letter-spacing:-0.035em; line-height:1.04; color:var(--ink);
}
.pull blockquote em{ font-style:italic; color:var(--accent); font-weight:400}
.pull blockquote i{ font-style:italic; color:var(--ink-3); font-weight:400}
.pull .by{
  margin-top:48px; font-family:var(--font-mono); font-size:11.5px;
  color:var(--ink-3); text-transform:uppercase; letter-spacing:.14em;
}
.pull .by b{ color:var(--ink); font-weight:500 }

/* ============ CTA ============ */
.cta{ padding: var(--rule) 0 }
.cta-grid{ display:grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr); gap:96px; align-items:end }
.cta h2{ max-width: 14ch }
.cta h2 em{ font-style:italic; color:var(--accent); font-weight:400}
.cta .lede{ margin-top:28px; font-size:17.5px; max-width:46ch}
.cta-actions{ display:flex; gap:18px; margin-top:36px; align-items:center; flex-wrap:wrap}
.cta-side{ display:grid; gap:32px }
.cta-side .blk h4{
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.14em; margin-bottom:10px; font-weight:500;
}
.cta-side .blk p{ font-size:14.5px; color:var(--ink-2); line-height:1.55 }

/* ============ NEW: PRINCIPLE / FEATURE CARDS ============ */
.cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair) }
.cards.two{ grid-template-columns: repeat(2,1fr) }
.card{ background:var(--bg); padding:40px 36px 44px; display:flex; flex-direction:column; min-height:300px }
.card .ci{ font-family:var(--font-mono); font-size:11px; color:var(--ink-3); letter-spacing:.14em; text-transform:uppercase }
.card .ci .ast{ color:var(--accent) }
.card h3{ margin-top:26px; font-size:21px; letter-spacing:-0.02em; max-width:18ch; line-height:1.1 }
.card h3 em{ font-style:italic; color:var(--ink-3); font-weight:400 }
.card p{ margin-top:16px; font-size:14.5px; line-height:1.55; color:var(--ink-2); max-width:36ch }
.card .meta{
  margin-top:auto; padding-top:24px; border-top:1px solid var(--hair);
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase;
}
.card .meta b{ color:var(--ink); font-weight:500 }

/* ============ NEW: VERTICAL-INTEGRATION LAYER STACK ============ */
.stack{ display:grid; gap:1px; background:var(--hair); border:1px solid var(--line); border-radius:6px; overflow:hidden }
.stack .layer{
  background:var(--panel); padding:22px 28px;
  display:grid; grid-template-columns: 200px 1fr auto; gap:32px; align-items:center;
}
.stack .layer .lk{ font-family:var(--font-mono); font-size:11px; color:var(--ink-3); letter-spacing:.12em; text-transform:uppercase }
.stack .layer .lk b{ display:block; color:var(--ink); font-weight:500; font-size:15px; letter-spacing:-0.01em; text-transform:none; margin-top:4px; font-family:var(--font-sans) }
.stack .layer .ld{ font-size:14px; color:var(--ink-2); line-height:1.5; max-width:52ch }
.stack .layer .lt{ font-family:var(--font-mono); font-size:10.5px; color:var(--accent); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap }
.stack .layer.accent{ background:color-mix(in oklab, var(--accent) 6%, var(--panel)) }

/* ============ NEW: STEP / TIMELINE ============ */
.steps{ display:grid; gap:0 }
.steps .step{
  display:grid; grid-template-columns: 80px 1fr; gap:48px; align-items:start;
  padding:36px 0; border-top:1px solid var(--hair);
}
.steps .step:last-child{ border-bottom:1px solid var(--hair) }
.steps .step .sn{ font-family:var(--font-mono); font-size:13px; color:var(--accent); letter-spacing:.12em }
.steps .step h4{ font-size:20px; letter-spacing:-0.015em; font-weight:500; line-height:1.12 }
.steps .step h4 em{ font-style:italic; color:var(--ink-3); font-weight:400 }
.steps .step p{ margin-top:14px; font-size:15.5px; color:var(--ink-2); line-height:1.6; max-width:60ch }

/* ============ NEW: PROSE COLUMN ============ */
.prose{ max-width:64ch }
.prose p{ font-size:17px; line-height:1.65; color:var(--ink-2); margin-bottom:24px }
.prose p em{ font-style:italic; color:var(--ink) }
.prose h3{ font-size:24px; margin:44px 0 18px; letter-spacing:-0.02em }

/* ============ NEW: ROSTER (named agents) ============ */
.roster{ display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair) }
.roster .r{ background:var(--bg); padding:24px 22px 26px }
.roster .r .nm{ font-family:var(--font-mono); font-size:13px; color:var(--ink); font-weight:500; letter-spacing:.04em; text-transform:uppercase }
.roster .r .rl{ margin-top:8px; font-size:13px; color:var(--ink-3); line-height:1.45 }
.roster .r .tag{ margin-top:14px; font-family:var(--font-mono); font-size:10px; color:var(--accent); letter-spacing:.12em; text-transform:uppercase }

/* ============ NEW: SPEC LIST (key/value) ============ */
.spec{ display:grid; gap:0; font-family:var(--font-mono); font-size:13.5px }
.spec .row{
  display:grid; grid-template-columns: 240px 1fr; gap:32px;
  padding:18px 0; border-top:1px solid var(--hair); align-items:baseline;
}
.spec .row:last-child{ border-bottom:1px solid var(--hair) }
.spec .row .k{ color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase; font-size:11.5px }
.spec .row .v{ color:var(--ink); line-height:1.5 }
.spec .row .v b{ color:var(--accent); font-weight:500 }

/* ============ NEW: COMPACT OPERATOR TEASER (home) ============ */
.op-teaser{ display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair) }
.op-teaser a{ background:var(--bg); padding:36px 32px 40px; display:flex; flex-direction:column; min-height:260px; transition:background .15s ease }
.op-teaser a:hover{ background:var(--panel) }
.op-teaser .ci{ font-family:var(--font-mono); font-size:11px; color:var(--ink-3); letter-spacing:.14em; text-transform:uppercase }
.op-teaser .ci .ast{ color:var(--accent) }
.op-teaser h3{ margin-top:24px; font-size:24px; letter-spacing:-0.025em; font-weight:400; line-height:1.08; max-width:14ch }
.op-teaser h3 em{ font-style:italic; color:var(--ink-3); font-weight:400 }
.op-teaser p{ margin-top:14px; font-size:14px; color:var(--ink-2); line-height:1.55; max-width:34ch }
.op-teaser .go{ margin-top:auto; padding-top:24px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink); letter-spacing:.1em; text-transform:uppercase; display:inline-flex; gap:8px; align-items:center }
.op-teaser a:hover .go{ color:var(--accent) }

/* ============ NEW: ONTOLOGY GRID ============ */
.ont{ display:grid; grid-template-columns: repeat(5,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair) }
.ont .dom{ background:var(--bg); padding:22px 20px 24px; display:flex; flex-direction:column }
.ont .dom .dh{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.14em; text-transform:uppercase; padding-bottom:14px; border-bottom:1px solid var(--hair); margin-bottom:6px }
.ont .dom .dh .ast{ color:var(--accent) }
.ont .ent{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:11px 0; border-top:1px solid var(--hair) }
.ont .ent:first-of-type{ border-top:none }
.ont .ent .en{ font-size:13.5px; color:var(--ink); font-weight:500; letter-spacing:-0.01em }
.ont .ent .ec{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap }
.ont .ent .ec b{ color:var(--accent); font-weight:500 }

/* ============ NEW: AUDIT-REPLAY LINEAGE ============ */
.lineage{ border:1px solid var(--line); background:var(--panel); border-radius:6px; overflow:hidden;
  box-shadow: 0 1px 0 rgba(11,14,20,.02), 0 30px 80px -50px rgba(11,14,20,.16) }
.lineage .lh{
  display:flex; align-items:center; justify-content:space-between; padding:12px 16px;
  border-bottom:1px solid var(--line); background: color-mix(in oklab, var(--bg) 50%, var(--panel));
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3); letter-spacing:.04em;
}
.lineage .lh .live{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-2) }
.lineage .lh .pulse{ width:7px; height:7px; border-radius:50%; background:var(--pos); box-shadow:0 0 0 3px color-mix(in oklab, var(--pos) 18%, transparent) }
.lin-node{
  display:grid; grid-template-columns: 30px 150px 1fr auto; gap:18px; align-items:center;
  padding:13px 16px; border-bottom:1px solid var(--line); position:relative;
}
.lin-node:last-child{ border-bottom:none }
.lin-node .step{ font-family:var(--font-mono); font-size:11px; color:var(--ink-4); font-variant-numeric:tabular-nums }
.lin-node .ty{
  font-family:var(--font-mono); font-size:10px; color:var(--accent); letter-spacing:.12em; text-transform:uppercase;
  border:1px solid color-mix(in oklab, var(--accent) 40%, transparent); border-radius:3px; padding:3px 7px; justify-self:start;
  background:color-mix(in oklab, var(--accent) 7%, transparent);
}
.lin-node .lab{ font-size:13.5px; color:var(--ink); font-weight:500; letter-spacing:-0.01em }
.lin-node .lab small{ display:block; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); font-weight:400; letter-spacing:.02em; margin-top:3px; text-transform:none }
.lin-node .meta{ text-align:right; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-2); font-variant-numeric:tabular-nums }
.lin-node .meta .hash{ display:block; color:var(--ink-4); font-size:10px; margin-top:3px }
.lin-node.out{ background: color-mix(in oklab, var(--accent) 5%, var(--panel)) }
.lin-node.out .lab{ font-size:14.5px }
.lin-node.out .meta{ color:var(--neg); font-weight:500; font-size:14px }
.lineage .lf{
  padding:13px 16px; font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
  letter-spacing:.04em; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background: color-mix(in oklab, var(--bg) 40%, var(--panel)); border-top:1px solid var(--line);
}
.lineage .lf b{ color:var(--ink); font-weight:500 }

@media (max-width: 1100px){
  .ont{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 640px){
  .ont{ grid-template-columns: 1fr }
  .lin-node{ grid-template-columns: 24px 1fr; gap:10px }
  .lin-node .ty{ grid-column:2 }
  .lin-node .meta{ grid-column:2; text-align:left }
}

/* ============ FOOTER ============ */
footer.site{ padding: 80px 0 56px; background:var(--bg)}
.ft-top{
  padding: 0 0 var(--rule-half);
  font-size: clamp(40px, 6vw, 84px); font-weight:400; letter-spacing:-0.04em; line-height:.98; color:var(--ink);
}
.ft-top em{ font-style:italic; color:var(--ink-3); font-weight:400 }
.ft-grid{ display:grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, 1fr); gap:48px; align-items:start; padding-top:32px; border-top:1px solid var(--hair) }
.ft-grid h5{ margin:0 0 16px 0; font-size:11.5px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.16em; color:var(--ink-3); font-weight:500 }
.ft-grid a{ display:block; color:var(--ink-2); font-size:14px; padding:4px 0}
.ft-grid a:hover{ color:var(--ink)}
.ft-grid p{ font-size:14px; color:var(--ink-2); margin-top:8px; max-width:42ch}
.ft-bottom{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:64px; padding-top:24px; border-top:1px solid var(--hair);
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); letter-spacing:.06em;
}

/* ============ RESPONSIVE ============ */
/* Header collapses BEFORE it can overflow a narrow viewport: first tighten the
   nav gap + drop the CLOSED BETA chip (~1180px), then hide the inline nav links
   entirely (~940px). Logo + theme toggle + Request demo CTA always remain, so
   the bar never spills past the right edge on tablet / mobile. */
@media (max-width: 1180px){
  nav.top{ gap: 22px }
  .hd-right .mono{ display:none }
}
@media (max-width: 940px){
  nav.top{ display:none }
}
@media (max-width: 1100px){
  .hero-meta-top, .stats-row{ grid-template-columns: 1fr 1fr 1fr }
  .stats-row.cols-4{ grid-template-columns: 1fr 1fr }
  .stats-row > div:nth-child(4){ border-left:none; padding-left:0; padding-top:24px; border-top:1px solid var(--hair); margin-top:24px}
  .stats-row > div:nth-child(5), .stats-row > div:nth-child(6){ padding-top:24px; border-top:1px solid var(--hair); margin-top:24px}
  .section-head, .prob, .manifesto-grid, .ops > article{ grid-template-columns: 1fr; gap:32px}
  .section-head .ix{ position:static }
  .hero-foot{ grid-template-columns: 1fr; gap:32px}
  .vs-foot, .cta-grid, .ops .op-body{ grid-template-columns: 1fr; gap:48px}
  .prob-list li{ grid-template-columns: 56px 1fr; }
  .prob-list li .p{ grid-column: 2/3 }
  .glue{ grid-template-columns: 1fr; gap:48px }
  .cards, .op-teaser{ grid-template-columns: 1fr }
  .roster{ grid-template-columns: 1fr 1fr }
  .stack .layer{ grid-template-columns: 1fr; gap:10px }
  .steps .step{ grid-template-columns: 1fr; gap:12px }
  .spec .row{ grid-template-columns: 1fr; gap:6px }
}
@media (max-width: 640px){
  :root{ --pad-x: 24px; --rule: 120px; --rule-half: 72px }
  .stats-row{ grid-template-columns: 1fr 1fr; }
  .stats-row > div{ border-left:none; padding:24px 0; border-top:1px solid var(--hair)}
  .stats-row > div:first-child, .stats-row > div:nth-child(2){ border-top:none}
  .ft-grid{ grid-template-columns: 1fr 1fr }
  .roster{ grid-template-columns: 1fr 1fr }
  nav.top{ display:none }
  .hd-right .mono{ display:none }
}