/* FaultLine — Research page.
   Self-contained: brand tokens are DEFINED HERE (no dependency on landing.css) so
   this page matches the reframed landing exactly — 90s-clean monospace, the ⊢
   turnstile mark, ONE brand color (electric green = verified / true / terminal-go).
   Dark-first identity + an airy "Cloud Dancer" light mode, WCAG-AA contrast, a neon
   micro-glow on accents/CTAs. Light/dark toggle only — the brand is LOCKED to green,
   no accent picker on marketing pages. No external fonts/scripts/CDNs. */

/* ── theme variables ─────────────────────────────────────────────────────────── */
:root {
  --bg:      #0C0D0C;
  --bg-soft: #141614;
  --bg-card: #111311;
  --fg:      #EAEDEA;
  --muted:   #6B726B;
  --border:  #2C312C;
  /* electric / neon green — saturated, terminal-go */
  --accent:      #2BE86B;
  --accent-2:    #55FF9A;
  --accent-dim:  #1c7a3e;
  --accent-glow: rgba(43,232,107,0.16);
  --accent-halo: rgba(43,232,107,0.55);
  --on-accent:   #05160B;
  --danger:  #e0655c;
  --warn:    #d9b45a;
  --mono: 'JetBrains Mono','IBM Plex Mono','SF Mono',ui-monospace,Menlo,Consolas,'DejaVu Sans Mono',monospace;
  --maxw: 1120px;
  /* READING MEASURE — the width of the prose column, CENTRED inside --maxw.
     43rem ≈ 688px ≈ 71 monospace characters at the 16px reading base, and ≈ 64
     characters at the 18px lede: both inside the 60–75 char band (Bringhurst,
     The Elements of Typographic Style §2.1.2).
     Deliberately expressed in REM, not CH: `ch` is font-RELATIVE, so a 30px <h2>
     capped at "68ch" is nearly twice as wide as a 16px <p> capped at the same
     token, and the column's right edge goes ragged heading-to-paragraph. rem is
     root-relative, so every element in the article shares ONE pixel column. */
  --measure: 43rem;
  /* the diagram panel is fixed-dark in BOTH themes so the green-on-dark render
     stays legible regardless of page theme */
  --diagram-panel: #0A0B0A;
  --diagram-border: #223026;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:      #F7F7F3;
  --bg-soft: #FFFFFF;
  --bg-card: #FFFFFF;
  --fg:      #16181A;
  --muted:   #5F665F;
  --border:  #D9D9D0;
  --accent:      #0E8F3E;
  --accent-2:    #12A84A;
  --accent-dim:  #7fcf9c;
  --accent-glow: rgba(20,168,74,0.14);
  --accent-halo: rgba(20,168,74,0.42);
  --on-accent:   #FFFFFF;
  --danger:  #c0392b;
  --warn:    #a9781a;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:      #F7F7F3;
    --bg-soft: #FFFFFF;
    --bg-card: #FFFFFF;
    --fg:      #16181A;
    --muted:   #5F665F;
    --border:  #D9D9D0;
    --accent:      #0E8F3E;
    --accent-2:    #12A84A;
    --accent-dim:  #7fcf9c;
    --accent-glow: rgba(20,168,74,0.14);
    --accent-halo: rgba(20,168,74,0.42);
    --on-accent:   #FFFFFF;
    --danger:  #c0392b;
    --warn:    #a9781a;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 78px; transition: background-color .15s ease, color .15s ease; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 1rem;            /* 16px reading base — evidence-based legibility */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  text-transform: uppercase; letter-spacing: 2px; font-size: 11px;
  color: var(--muted); margin: 0 0 14px;
}
.eyebrow::before { content: "▸ "; color: var(--accent); }
.accent { color: var(--accent); }

/* ── sticky top nav ──────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 20px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); }
.brand:hover { text-decoration: none; }
.brand .mark {
  color: var(--accent); font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px; font-weight: 700; line-height: 1; text-shadow: 0 0 12px var(--accent-halo);
}
.brand .word { font-size: 14px; letter-spacing: 3px; text-transform: uppercase; font-weight: 500; }
.nav-links { display: flex; align-items: center; gap: 22px; margin-left: 12px; }
.nav-links a { color: var(--muted); font-size: 13px; letter-spacing: .5px; white-space: nowrap; }
.nav-links a:hover { color: var(--fg); text-decoration: none; }
.nav-links a.here { color: var(--fg); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.theme-toggle {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  padding: 6px 11px; cursor: pointer; white-space: nowrap; border-radius: 2px;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--fg); }
.theme-toggle .ico { color: var(--accent); margin-right: 5px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
  background: transparent; color: var(--fg); border: 1px solid var(--border);
  padding: 10px 18px; cursor: pointer; white-space: nowrap; border-radius: 2px;
  transition: border-color .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
.btn:hover { border-color: var(--fg); text-decoration: none; }
.btn.accent { border-color: var(--accent-dim); color: var(--accent); }
.btn.accent:hover { border-color: var(--accent); background: var(--accent-glow); box-shadow: 0 0 18px -4px var(--accent-halo); }
.btn.solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.solid:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); box-shadow: 0 0 22px -2px var(--accent-halo); }
.btn.sm { padding: 7px 13px; font-size: 12px; }

.nav-toggle {
  display: none; background: transparent; border: 1px solid var(--border); color: var(--fg);
  width: 38px; height: 34px; border-radius: 2px; cursor: pointer; font-size: 16px; line-height: 1;
}

/* ── page header ─────────────────────────────────────────────────────────────── */
.page-head { padding: clamp(34px, 3.6vw, 58px) 0 clamp(24px, 2.6vw, 38px); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.page-head::before {
  content: ""; position: absolute; inset: -40% 0 auto 0; height: 70%;
  background: radial-gradient(60% 100% at 18% 0%, var(--accent-glow), transparent 70%);
  pointer-events: none; z-index: 0;
}
.page-head .wrap { position: relative; z-index: 1; }
.page-head h1 {
  font-size: clamp(30px, 4.6vw, 50px); line-height: 1.05; letter-spacing: -1px;
  margin: 10px 0 16px; font-weight: 700;
}
.page-head h1 .dot { color: var(--accent); text-shadow: 0 0 24px var(--accent-halo); }
.page-head .lede { font-size: clamp(16px, 1.7vw, 18px); color: var(--muted); line-height: 1.6; margin: 0; }
.page-head .lede strong { color: var(--fg); font-weight: 500; }
/* The hero rides the SAME centred measure as the article prose below it, so the
   reading column has one continuous left edge from the eyebrow to the footer.
   These three selectors carry (0,2,1) specificity on purpose — they must beat the
   `margin` shorthands set by `.page-head h1` / `.eyebrow` above. */
.page-head .eyebrow,
.page-head h1,
.page-head .lede { max-width: var(--measure); margin-inline: auto; }

/* ── tabs ────────────────────────────────────────────────────────────────────── */
.tabs {
  position: sticky; top: 59px; z-index: 30;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.tablist {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin;
}
.tab {
  appearance: none; background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font-family: var(--mono); font-size: 13px; letter-spacing: .5px;
  padding: 15px 16px 13px; cursor: pointer; white-space: nowrap;
  transition: color .12s ease, border-color .12s ease;
}
.tab .num { color: var(--accent); opacity: .7; margin-right: 7px; font-size: 12px; }
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.tab[aria-selected="true"] .num { opacity: 1; }

/* ── tab panels ──────────────────────────────────────────────────────────────── */
.panel { display: none; padding: clamp(30px, 3.2vw, 50px) 0 clamp(38px, 4.2vw, 66px); }
.panel.active { display: block; animation: fade .2s ease; }
@media (prefers-reduced-motion: reduce) { .panel.active { animation: none; } }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── article layout: centred measure + breakout structure ────────────────────
   ROOT CAUSE OF THE LEFT-HUG (fixed here): `.wrap` is centred (max-width +
   margin:0 auto), but the block that carried the reading measure — `article`,
   formerly `max-width: 68ch` — was a plain left-aligned block INSIDE that much
   wider wrap, with no inline auto margin. At 1920 that left ~424px of space on
   the left of the text and ~843px on the right: a 1:2 asymmetry that reads as
   broken alignment rather than a deliberate measure. Everything nested in the
   article (card grids, figures, tables) inherited the 653px cap too, which is
   why the two "A MEMORY / THE PLACE" cards were only ~318px each and squishy.

   The article now fills the canvas. Its children default to the CENTRED prose
   measure, and structural blocks opt out and use the whole canvas. */
.panel article { max-width: none; }
.panel article.wide { max-width: none; }

/* default: every direct child of an article is reading matter → centred measure.
   Selector is (0,4,0) to outrank `.panel > .wrap > article > .kicker` below. */
.panel > .wrap > article > * {
  max-width: var(--measure);
  margin-inline: auto;
}
/* structural blocks break out of the measure and use the full canvas — this is
   the space the empty right gutter used to waste */
.panel > .wrap > article > .hardline,
.panel > .wrap > article > .grid2,
.panel > .wrap > article > .grid3,
.panel > .wrap > article > .diff-banner,
.panel > .wrap > article > .hook,
.panel > .wrap > article > .figure,
.panel > .wrap > article > .term,
.panel > .wrap > article > .ladder,
.panel > .wrap > article > .table-scroll {
  max-width: none;
}
.panel h2 {
  font-size: clamp(22px, 3vw, 30px); letter-spacing: -.4px; margin: 0 0 8px; font-weight: 700;
}
.panel h2 .k { color: var(--accent); }
/* `margin-inline: auto` repeated here on purpose: this rule matches the measure
   rule's specificity exactly (0,4,0) and sits later in the file, so its `margin`
   shorthand would otherwise re-zero the auto margins and un-centre the kicker. */
.panel > .wrap > article > .kicker { color: var(--muted); font-size: 13px; margin: 0 auto 18px; }
.panel h3 {
  font-size: 17px; margin: 22px 0 10px; font-weight: 600; letter-spacing: .2px;
}
.panel h3::before { content: "⊢ "; color: var(--accent); font-family: Georgia, serif; }
.panel h4 { font-size: 14px; margin: 22px 0 8px; font-weight: 600; color: var(--fg); }
.panel p { color: var(--fg); margin: 0 0 14px; }
.panel p .soft, .panel .soft { color: var(--muted); }
.panel strong { color: var(--fg); font-weight: 600; }
.panel em { color: var(--accent-2); font-style: normal; }
.panel ul, .panel ol { margin: 0 0 16px; padding-left: 0; list-style: none; }
.panel li { position: relative; padding: 4px 0 4px 22px; color: var(--fg); }
.panel ul li::before { content: "▸"; position: absolute; left: 0; color: var(--accent); }
.panel ol { counter-reset: li; }
.panel ol li { padding-left: 30px; }
.panel ol li::before {
  counter-increment: li; content: counter(li, decimal-leading-zero);
  position: absolute; left: 0; color: var(--accent); font-size: 12px; top: 5px;
}
.panel li b { color: var(--fg); }

/* callout / firewall note */
.callout {
  border-left: 3px solid var(--accent); background: var(--bg-soft);
  padding: 16px 20px; border-radius: 0 8px 8px 0; margin: 22px 0;
}
.callout p { margin: 0; }
.callout p + p { margin-top: 10px; }
.callout b { color: var(--accent); }

/* the hard line: memory vs place, side by side */
/* minmax(0,1fr) rather than 1fr on every breakout grid below: a bare `1fr` track
   has an `auto` minimum, so one long unbreakable token (a code span, a URL) can
   push the track — and the page — wider than the canvas. */
.hardline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.7vw, 24px); margin: clamp(24px, 2.6vw, 36px) 0; }
.hl {
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft); padding: 22px 22px 24px;
}
.hl .tag {
  display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 999px;
  padding: 3px 11px; margin-bottom: 14px;
}
.hl h4 { margin: 0 0 8px; font-size: 16px; }
.hl h4::before { content: none; }
.hl p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.hl p b { color: var(--fg); }
/* labeled facets — same rows in both cards so the eye compares them straight across */
.hl-facets { margin: 14px 0 0; display: grid; gap: 11px; }
/* 78px, not 64px: now the cards are ~525px instead of ~318px there is room for
   the longest label ("it is the") to sit on ONE line instead of wrapping. */
.hl-facets .fl { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.hl-facets dt { margin: 0; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); padding-top: 2px; }
.hl-facets dd { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.hl-facets dd.ex { color: var(--fg); font-weight: 600; }
.hl-facets dd em { color: var(--fg); font-style: normal; font-weight: 600; }
.hl-word {
  display: inline-block; font-weight: 700; font-size: 15px; letter-spacing: .3px;
  color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 999px; padding: 2px 14px;
}

/* generic feature/card grid */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.7vw, 24px); margin: clamp(22px, 2.4vw, 34px) 0; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.7vw, 24px); margin: clamp(22px, 2.4vw, 34px) 0; }
.tile {
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft);
  padding: 20px 20px 22px; transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.tile:hover { border-color: var(--accent-dim); transform: translateY(-2px); box-shadow: 0 18px 40px -30px var(--accent-halo); }
.tile h4 { margin: 0 0 8px; font-size: 15px; }
.tile p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.tile p b { color: var(--fg); font-weight: 500; }
.tile .lead { color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 11px; display: block; margin-bottom: 8px; }

/* terminal-style example block */
.term {
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card);
  box-shadow: 0 18px 50px -30px var(--accent-halo); overflow: hidden;
  font-size: 12.5px; line-height: 1.7; margin: 20px 0;
}
.term-bar {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  border-bottom: 1px solid var(--border); background: var(--bg-soft);
}
.term-bar .dots { display: inline-flex; gap: 6px; }
.term-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); display: block; }
.term-bar .dots i:first-child { background: var(--accent); box-shadow: 0 0 8px -1px var(--accent-halo); }
.term-bar .t-title { font-size: 11px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-left: 6px; }
.term-body { padding: 16px; overflow-x: auto; }
.term-body pre { margin: 0; font-family: var(--mono); white-space: pre; color: var(--fg); }
.term .cmd { color: var(--fg); }
.term .cmd::before { content: "$ "; color: var(--accent); }
.term .ok, .term .val { color: var(--accent); }
.term .mut { color: var(--muted); }
.term .warnc { color: var(--warn); }
.term .rowline { display: block; }

/* ── diagram panel (fixed-dark in both themes) ───────────────────────────────── */
.figure { margin: 26px 0 8px; }
.figure figcaption {
  font-size: 12.5px; color: var(--muted); margin: 0 0 12px; letter-spacing: .3px;
  /* the figure breaks out to the full canvas, but the caption is still prose —
     hold it to the reading measure, aligned to the figure's own left edge */
  max-width: var(--measure);
}
.figure figcaption b { color: var(--fg); }
.diagram {
  border: 1px solid var(--diagram-border); border-radius: 12px; background: var(--diagram-panel);
  padding: 22px; overflow-x: auto;
  box-shadow: 0 20px 60px -34px var(--accent-halo), inset 0 0 0 1px rgba(43,232,107,0.04);
}
.diagram svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.diagram-note {
  margin: 14px 0 0; font-size: 12px; color: var(--muted); text-align: center; letter-spacing: .3px;
}
.diagram-note b { color: var(--accent); }

/* ── hand-authored node diagrams (replace the mermaid SVGs) ────────────────────
   Truth: user memory is PostgreSQL-only (facts A/B + staged_facts Class C);
   Qdrant serves ONLY the agent cortex; the cortex is its own store; many MCP
   clients fan in to one graph. Sits inside the fixed-dark .diagram panel.
   ─────────────────────────────────────────────────────────────────────────── */
.arch { display: flex; flex-direction: column; align-items: center; gap: 0; font-family: var(--mono); }
.arch-clients { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 640px; }
.arch-clients .chip {
  font-size: 12px; color: #EAEDEA; border: 1px solid var(--accent-dim); border-radius: 999px;
  padding: 5px 12px; background: #111311;
}
.arch-fanin { width: 100%; max-width: 560px; height: 34px; margin: 2px 0; }
.arch-fanin svg { width: 100%; height: 100%; display: block; }
.arch-fanin path { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .55; }
.arch-node {
  border: 1px solid var(--accent); background: #111311; color: #EAEDEA;
  border-radius: 10px; padding: 13px 18px; text-align: center; min-width: 200px; max-width: 460px;
  box-shadow: 0 0 24px -10px var(--accent-halo);
}
.arch-node .n-t { font-size: 14px; font-weight: 600; letter-spacing: .2px; }
.arch-node .n-s { font-size: 11.5px; color: #9aa39a; margin-top: 3px; line-height: 1.45; }
.arch-node.gate { border-color: var(--accent-2); }
.arch-node.store { border-style: dashed; border-color: var(--accent-dim); box-shadow: none; }
.arch-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; width: 100%; }
.arch-row .arch-node { flex: 1 1 240px; max-width: 320px; }
.arch-node .pill {
  display: inline-block; margin-top: 8px; font-size: 10px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 999px; padding: 2px 9px;
}
.arch-node .sub-list { margin: 7px 0 0; padding: 0; list-style: none; text-align: left; font-size: 12px; color: #c7ccc7; line-height: 1.7; }
.arch-node .sub-list li::before { content: "› "; color: var(--accent); }
.arch-arrow {
  display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--accent);
  font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; margin: 6px 0; line-height: 1;
}
.arch-arrow .glyph { font-size: 15px; }
.arch-arrow .lbl { color: #9aa39a; }
.arch-callout {
  margin-top: 14px; border: 1px solid var(--diagram-border); border-left: 3px solid var(--accent);
  background: #0C0D0C; border-radius: 0 8px 8px 0; padding: 10px 14px;
  font-size: 12.5px; line-height: 1.6; color: #c7ccc7; max-width: 640px; text-align: left;
}
.arch-callout b { color: var(--accent); }

/* two-lane ingest / query */
.lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; font-family: var(--mono); }
.lane { border: 1px solid var(--diagram-border); border-radius: 12px; background: #0C0D0C; padding: 18px; }
.lane-title { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.lane-step {
  position: relative; border: 1px solid var(--accent-dim); background: #111311; border-radius: 8px;
  padding: 11px 13px 11px 38px; margin-bottom: 9px; color: #EAEDEA; font-size: 12.5px; line-height: 1.5;
}
.lane-step::before {
  content: counter(lane, decimal-leading-zero); counter-increment: lane;
  position: absolute; left: 11px; top: 10px; font-size: 10px; color: var(--accent);
  border: 1px solid var(--accent-dim); border-radius: 50%; width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
}
.lane { counter-reset: lane; }
.lane-step b { color: #fff; }
.lane-step .held { color: var(--warn); }
.lane-store {
  margin-top: 4px; border: 1px dashed var(--accent-dim); border-radius: 8px; background: #0A0B0A;
  padding: 11px 13px; font-size: 12px; color: #c7ccc7; line-height: 1.6;
}
.lane-store b { color: var(--accent); }
.lane-store .tag { display: block; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: #9aa39a; margin-top: 5px; }
@media (max-width: 720px) { .lanes { grid-template-columns: 1fr; } }

/* the differentiation banner under the ingest/query diagram */
.diff-banner {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.7vw, 24px); margin: clamp(22px, 2.4vw, 34px) 0;
}
.diff-banner .db {
  border: 1px solid var(--border); border-radius: 10px; padding: 20px; background: var(--bg-soft);
}
.diff-banner .db.them { border-style: dashed; }
.diff-banner .db.us { border-color: var(--accent-dim); background: var(--bg-card); box-shadow: 0 0 0 1px rgba(43,232,107,0.08); }
.diff-banner .db .h {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 8px; color: var(--muted);
}
.diff-banner .db.us .h { color: var(--accent); }
.diff-banner .db p { margin: 0; color: var(--fg); font-size: 15px; line-height: 1.55; }
.diff-banner .db p .soft { color: var(--muted); }

/* connect / hook-in steps */
.hook { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.7vw, 24px); margin: clamp(22px, 2.4vw, 34px) 0; counter-reset: hk; }
.hookstep {
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft); padding: 20px;
}
.hookstep::before {
  counter-increment: hk; content: counter(hk, decimal-leading-zero);
  font-size: 12px; color: var(--accent); border: 1px solid var(--accent-dim);
  border-radius: 50%; width: 34px; height: 34px; display: inline-flex;
  align-items: center; justify-content: center; margin-bottom: 14px; letter-spacing: 1px;
}
.hookstep h4 { margin: 0 0 6px; font-size: 14px; }
.hookstep h4::before { content: none; }
.hookstep p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.hookstep code { color: var(--accent); background: var(--bg-card); padding: 1px 5px; border-radius: 3px; font-size: 12px; }

/* ladder (foundations) */
.ladder { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 22px 0; }
.rung { display: grid; grid-template-columns: 150px 1fr; gap: 0; border-bottom: 1px solid var(--border); }
.rung:last-child { border-bottom: none; }
.rung .r-k { padding: 14px 18px; background: var(--bg-soft); color: var(--accent); font-size: 12.5px; letter-spacing: .5px; border-right: 1px solid var(--border); }
.rung .r-v { padding: 14px 18px; color: var(--fg); font-size: 15px; line-height: 1.55; }
.rung .r-v .soft { color: var(--muted); }

/* small definition table (ontology) */
.deftable { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 13px; }
.deftable th, .deftable td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
.deftable th { color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 11px; }
.deftable td code { color: var(--accent); font-size: 12.5px; }
.deftable tr:last-child td { border-bottom: none; }
.table-scroll { overflow-x: auto; }

/* 3-second readability pass — ontology reference table */
.deftable { font-size: 13.5px; }
.deftable thead th { color: var(--muted); }
.deftable tbody tr:nth-child(even) td { background: var(--bg-soft); }
.deftable tbody tr:hover td { background: var(--accent-glow); }
.deftable td:first-child { white-space: nowrap; }              /* the rel_type token */
.deftable td:nth-child(2) {                                     /* the PID / standard alignment, as a mono pill */
  font-family: var(--mono); color: var(--accent); font-size: 12px; white-space: nowrap;
}
.deftable .soft { color: var(--muted); font-size: 11px; }

.tag-note { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* ── final CTA ───────────────────────────────────────────────────────────────── */
.final { padding: 40px 0; text-align: center; border-top: 1px solid var(--border); position: relative; overflow: hidden; }
.final::before {
  content: ""; position: absolute; inset: auto 0 -50% 0; height: 90%;
  background: radial-gradient(50% 100% at 50% 100%, var(--accent-glow), transparent 70%);
  pointer-events: none;
}
.final .wrap { position: relative; z-index: 1; }
.final h2 { font-size: clamp(22px, 3.4vw, 32px); margin: 0 0 12px; letter-spacing: -.5px; font-weight: 700; }
.final h2 .dot { color: var(--accent); text-shadow: 0 0 24px var(--accent-halo); }
/* 36rem ≈ 60 characters — a centred blurb wants to be shorter than the running
   measure, but 54ch was breaking three words onto a ragged third line */
.final p { color: var(--muted); max-width: 36rem; margin: 0 auto 24px; }
.final .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── footer ──────────────────────────────────────────────────────────────────── */
footer.site { padding: 26px 0 32px; border-top: 1px solid var(--border); }
.foot-grid { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.foot-brand { max-width: 340px; }
.foot-brand .brand { margin-bottom: 10px; }
.foot-brand p { color: var(--muted); font-size: 12.5px; margin: 0; line-height: 1.6; }
.foot-links { display: flex; gap: 54px; flex-wrap: wrap; }
.foot-col h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin: 0 0 12px; font-weight: 500; }
.foot-col a { display: block; color: var(--fg); font-size: 13px; padding: 4px 0; }
.foot-col a:hover { color: var(--accent); text-decoration: none; }
.foot-bottom {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--muted); font-size: 12px; letter-spacing: .5px;
}
.foot-bottom .mono { font-family: var(--mono); }

/* ── responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hardline, .grid2, .grid3, .hook, .diff-banner { grid-template-columns: 1fr; }
  .rung { grid-template-columns: 120px 1fr; }
}
/* Nav collapses to the ≡ menu at 960px, NOT 760px. Below ~920px the five desktop
   links plus the three right-hand controls no longer fit on one line, so
   "How it works" wrapped onto three lines at 834px and two lines at 901px —
   measured, and present before this layout work. Collapsing earlier is the fix;
   every link is still reachable from the ≡ menu. Verified on one line at 961px. */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav.open .nav-links {
    display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    align-items: flex-start; gap: 4px; margin: 0; padding: 12px 24px 18px;
    background: var(--bg); border-bottom: 1px solid var(--border);
  }
  .nav.open .nav-links a { padding: 8px 0; font-size: 15px; }
  .tabs { top: 57px; }
}
@media (max-width: 520px) {
  .brand .word { display: none; }
  /* phone: give the value column its 14px back — the wider label track above is
     there to serve the roomy two-up cards, which have already collapsed by here */
  .hl-facets .fl { grid-template-columns: 64px minmax(0, 1fr); }
  .rung { grid-template-columns: 1fr; }
  .rung .r-k { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ── flavour-switch bar (mirrored from landing.css so Research is a first-class
   member of the flavour navigation and the "You're reading …" bar persists here) ── */
.flavour-switch {
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  font-size: 12.5px;
}
.flavour-switch-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 8px 24px;
  display: flex; align-items: center; gap: 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.flavour-switch .fs-home {
  flex: 0 0 auto; color: var(--accent);
  font-family: Georgia, 'Times New Roman', serif; font-size: 17px; font-weight: 700; line-height: 1;
  text-shadow: 0 0 12px var(--accent-halo); padding: 2px 6px; border-radius: 2px;
}
.flavour-switch .fs-home:hover { text-decoration: none; background: var(--accent-glow); }
.flavour-switch .fs-lead {
  flex: 0 0 auto; color: var(--muted); white-space: nowrap;
  text-transform: uppercase; letter-spacing: 1px; font-size: 10px;
}
.flavour-switch .fs-tabs {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 4px; flex: 0 0 auto;
}
.flavour-switch .fs-tabs a {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  color: var(--muted); padding: 5px 10px; border-radius: 3px;
  border: 1px solid transparent; letter-spacing: .3px;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.flavour-switch .fs-tabs a:hover {
  color: var(--fg); text-decoration: none; border-color: var(--border);
}
.flavour-switch .fs-tabs .fs-ico { font-size: 13px; line-height: 1; }
.flavour-switch .fs-tabs a.is-active {
  color: var(--accent); border-color: var(--accent-dim);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.flavour-switch .fs-tabs a.is-active:hover { border-color: var(--accent); }
.flavour-switch .fs-switch-hint {
  flex: 0 0 auto; color: var(--muted); white-space: nowrap; font-size: 11px;
}
.flavour-switch .fs-login {
  flex: 0 0 auto; margin-left: auto; white-space: nowrap;
  color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 3px;
  padding: 5px 12px; letter-spacing: .3px; font-weight: 600;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.flavour-switch .fs-login:hover {
  text-decoration: none; border-color: var(--accent);
  background: var(--accent-glow); box-shadow: 0 0 14px -4px var(--accent-halo);
}
@media (max-width: 760px) {
  .flavour-switch .fs-lead, .flavour-switch .fs-switch-hint { display: none; }
  .flavour-switch-inner { gap: 8px; }
  .flavour-switch .fs-login { margin-left: auto; }
}