/* ══════════════════════════════════════════════════════════════════════════
   recodeai — v3 design system  ("Complexity → Clarity")
   Ported from design_handoff_recodeai_site/RecodeAI.dc.html + README.md.

   Drives: / · /intelligence · /readiness · /books (unlinked)

   This REPLACES recode-ds.css on those pages only. The light Modernist system
   (assets/recode-ds.css) still owns /firehouse, /diagnostic, /faq, and the
   warm system (assets/recodeai.css) still owns /explain, /memos and generated
   pages. Three systems coexist on purpose — see PLAN-recodeai-rebuild.md §8.

   Structure:
     PART 1  tokens
     PART 2  base + shell (header, footer, section rhythm)
     PART 3  homepage sections (handoff screens 1)
     PART 4  inner pages (/intelligence, /readiness, /books)
     PART 5  compatibility shim — restyles the classes emitted by
             agents/update_agent.py (#firehose), assets/recode.js (feed, ask)
             and assets/recode-install.css (app previews, install sheet) so
             those live features render in this system with ZERO changes to
             the agent or the runtime. Same trick recode-ds.css PART 2 uses.
     PART 6  responsive + reduced motion
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   PART 1 — TOKENS  (oklch as authored in the handoff; hex in comments)
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* Surfaces — never more than these. Depth is hairlines, not shadow. */
  --v3-base:        oklch(0.145 0.006 255);  /* #0D0F12 page ground        */
  --v3-tint:        oklch(0.165 0.006 255);  /* #121418 alternating band   */
  --v3-panel:       oklch(0.175 0.006 255);  /* #15171B noise panel        */
  --v3-hover:       oklch(0.19 0.006 255);   /* #191B20 card hover         */
  --v3-stripe-a:    oklch(0.22 0.008 255);   /* #1D2025 placeholder stripe */
  --v3-stripe-b:    oklch(0.19 0.006 255);   /* #191B20                    */

  /* Text ramp */
  --v3-text:        oklch(0.96 0.004 255);   /* #F2F3F5 headlines, links   */
  --v3-bright:      oklch(0.92 0.005 255);   /* #E7E8EB executive action   */
  --v3-strong:      oklch(0.90 0.005 255);   /* #E1E2E6 hero sub           */
  --v3-body:        oklch(0.76 0.008 255);   /* #B7B9BF card body, chips   */
  --v3-muted:       oklch(0.70 0.008 255);   /* #A6A8AF section body       */
  --v3-dim:         oklch(0.62 0.01 255);    /* #8F9198 nav, funnel labels */
  --v3-faint:       oklch(0.55 0.01 255);    /* #767880 micro-labels       */
  --v3-fainter:     oklch(0.52 0.01 255);
  --v3-disclaimer:  oklch(0.48 0.01 255);    /* #6A6C74 sample-data notes  */

  /* The ONLY accent. One hue, no gradients beyond the two functional ones. */
  --v3-accent:      oklch(0.80 0.13 86);     /* #D9A13B                    */
  --v3-accent-55:   oklch(0.80 0.13 86 / 0.55);
  --v3-accent-45:   oklch(0.80 0.13 86 / 0.45);
  --v3-accent-40:   oklch(0.80 0.13 86 / 0.40);
  --v3-accent-28:   oklch(0.80 0.13 86 / 0.28);
  --v3-accent-75:   oklch(0.80 0.13 86 / 0.75);

  /* Hairlines — the whole depth model */
  --v3-line:        oklch(1 0 0 / 0.07);
  --v3-line-2:      oklch(1 0 0 / 0.08);
  --v3-line-3:      oklch(1 0 0 / 0.09);
  --v3-line-4:      oklch(1 0 0 / 0.10);
  --v3-border:      oklch(1 0 0 / 0.14);     /* chips                      */
  --v3-border-str:  oklch(1 0 0 / 0.22);     /* outlined buttons           */

  --v3-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --v3-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --v3-serif: Newsreader, Georgia, "Times New Roman", serif;

  --v3-shell: 1500px;
  --v3-gutter: 40px;
  --v3-section: 130px;
  --v3-header: 72px;

  /* ── Legacy token overrides ────────────────────────────────────────────
     recode-install.css (app previews + install sheet) and parts of
     recode.js's markup are authored against these names. Redefining them
     here is what makes those components arrive already dark — rather than
     forking a second copy of that CSS that would drift. Only the six that
     those files actually read are overridden. */
  --color-bg:      var(--v3-base);
  --color-surface: var(--v3-hover);
  --color-text:    var(--v3-text);
  --color-accent:  var(--v3-accent);
  --color-divider: var(--v3-line-4);
  --font-heading:  var(--v3-sans);
  --font-heading-weight: 500;
  --font-body:     var(--v3-sans);
  --mono:          var(--v3-mono);
}

/* ══════════════════════════════════════════════════════════════════════
   PART 2 — BASE + SHELL
   ══════════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }

html { background: var(--v3-base); }

body {
  margin: 0;
  background: var(--v3-base);
  color: var(--v3-text);
  font-family: var(--v3-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--v3-text); text-decoration: none; }
a:hover { color: var(--v3-accent); }
::selection { background: var(--v3-accent); color: var(--v3-base); }

img { max-width: 100%; height: auto; }

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

.v3-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@keyframes v3-drift { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes v3-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* Header, nav and footer now live in assets/recode-v3-shell.css, which the
   legacy pages load too — one header for the whole site. Removed from here so
   there is exactly one copy to maintain. */

/* ── Buttons ─────────────────────────────────────────────────────────── */
.v3-btn {
  display: inline-block;
  font-family: var(--v3-mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 17px 30px; border: 1px solid transparent;
  /* Explicit, not inherited. The outline variants set only a border and a
     colour, so on a <button> — which the install CTA is — the UA's default
     grey ground showed through and rendered near-white text on near-white.
     An <a> with the same classes was fine, which is what hid it. */
  background: transparent;
  cursor: pointer; text-align: center;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.v3-btn--fill   { background: var(--v3-text); color: var(--v3-base); }
.v3-btn--fill:hover { background: var(--v3-accent); color: var(--v3-base); }
.v3-btn--ghost  { border-color: var(--v3-border-str); color: var(--v3-strong); }
.v3-btn--ghost:hover { border-color: var(--v3-text); color: var(--v3-text); }
.v3-btn--accent { border-color: var(--v3-accent-55); color: var(--v3-accent); }
.v3-btn--accent:hover { background: var(--v3-accent); color: var(--v3-base); }
/* Outlined that goes accent on hover (section CTAs). */
.v3-btn--line   { border-color: var(--v3-border-str); color: var(--v3-text); }
.v3-btn--line:hover { border-color: var(--v3-accent); color: var(--v3-accent); }
/* Compact — header, inline section CTAs. */
.v3-btn--sm { font-size: 11px; padding: 11px 18px; }
.v3-btn--md { font-size: 12px; padding: 16px 28px; }

/* ── Section rhythm ──────────────────────────────────────────────────── */
.v3-main { padding-top: var(--v3-header); }

.v3-section {
  border-top: 1px solid var(--v3-line);
  padding: var(--v3-section) var(--v3-gutter);
}
.v3-section--tint { background: var(--v3-tint); }
.v3-shell { max-width: var(--v3-shell); margin: 0 auto; }

.v3-eyebrow {
  font-family: var(--v3-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--v3-faint); margin-bottom: 26px;
}
/* Accent only when the eyebrow names a numbered product stage. */
.v3-eyebrow--stage { color: var(--v3-accent); }

.v3-h2 {
  margin: 0; font-size: clamp(36px, 4.6vw, 72px);
  line-height: 0.98; letter-spacing: -0.04em;
  font-weight: 500; text-transform: uppercase;
}
.v3-h2--sm { font-size: clamp(36px, 4.2vw, 64px); line-height: 1; }
.v3-h2--md { font-size: clamp(36px, 4.4vw, 66px); }
.v3-h2--about { font-size: clamp(32px, 3.8vw, 56px); line-height: 1.02; }

.v3-body {
  margin: 34px 0 0; font-size: 17px; line-height: 1.7;
  color: var(--v3-muted); max-width: 460px;
}

.v3-grid-2   { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 80px; }
.v3-grid-2--start  { align-items: start; }
.v3-grid-2--center { align-items: center; }
.v3-grid-funnel { display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: 80px; align-items: center; }
.v3-grid-about  { display: grid; grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr); gap: 80px; align-items: center; }

/* Header row: headline left, standfirst right, baselines aligned. */
.v3-headrow {
  display: flex; flex-wrap: wrap; gap: 40px;
  justify-content: space-between; align-items: end;
  margin-bottom: 64px;
}
.v3-headrow p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--v3-muted); max-width: 340px; }

/* ── The hairline grid ─────────────────────────────────────────────────
   The obvious way to draw this — give the container the divider colour and
   let a 1px gap show it through — only works while EVERY cell is covered.
   The moment a row is partial (7 cards in a 4-column grid, or a quiet news
   day from the firehose agent) the uncovered cells render as solid slabs the
   size of a card. That exact bug already shipped once here; see the note
   above .firehose-cards in assets/recode-ds.css.

   So: the container paints the PAGE colour, and each cell draws its own
   hairline with a box-shadow spread into the gutter. Adjacent cells paint the
   same 1px, so the line is identical — and an uncovered cell shows the page
   background, i.e. nothing. The tail rules below then widen partial rows so
   there is no ragged edge either; if they ever fail, the worst case is a
   blank gap rather than a grey slab. */
.v3-hairgrid {
  display: grid; gap: 1px;
  background: var(--v3-base);
}
.v3-hairgrid > * {
  background: var(--v3-base);
  box-shadow: 0 0 0 1px var(--v3-line-4);
}

.v3-chip {
  font-family: var(--v3-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 12px; border: 1px solid var(--v3-border);
  color: var(--v3-body);
}
.v3-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.v3-micro {
  font-family: var(--v3-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--v3-fainter); margin-bottom: 10px;
}
.v3-note {
  font-family: var(--v3-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--v3-disclaimer);
}

/* ══════════════════════════════════════════════════════════════════════
   PART 3 — HOMEPAGE SECTIONS
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Hero ─────────────────────────────────────────────────────────── */
.v3-hero {
  position: relative; min-height: calc(100vh - var(--v3-header));
  display: flex; align-items: center; overflow: hidden;
  /* The bottom padding is load-bearing: it keeps the content column off the
     absolutely positioned status row on short viewports. */
  padding: 80px 0 96px;
}
#rc-hero-net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; }
.v3-hero-veil {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 78% 45%,
    transparent 0%,
    oklch(0.145 0.006 255 / 0.55) 55%,
    oklch(0.145 0.006 255 / 0.92) 100%);
}
.v3-hero-in {
  position: relative; max-width: var(--v3-shell);
  margin: 0 auto; padding: 0 var(--v3-gutter); width: 100%;
}
.v3-hero-col { max-width: 840px; }
.v3-hero-eyebrow {
  font-family: var(--v3-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--v3-accent); margin-bottom: 36px;
  display: flex; align-items: center; gap: 12px;
}
.v3-dot {
  width: 6px; height: 6px; flex: none;
  background: var(--v3-accent); border-radius: 50%;
  animation: v3-pulse 2.6s infinite;
}
.v3-hero h1 {
  margin: 0; font-size: clamp(48px, 7.2vw, 116px);
  line-height: 0.93; letter-spacing: -0.045em;
  font-weight: 500; text-transform: uppercase; text-wrap: balance;
}
.v3-hero-sub {
  margin: 40px 0 0; font-size: 22px; line-height: 1.45;
  color: var(--v3-strong); max-width: 520px;
}
.v3-hero-supp {
  margin: 28px 0 0; font-size: 16px; line-height: 1.65;
  color: oklch(0.68 0.008 255); max-width: 560px;
}
.v3-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 48px; }
.v3-hero-status {
  position: absolute; bottom: 28px; left: var(--v3-gutter); right: var(--v3-gutter);
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--v3-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--v3-fainter);
}

/* ── 2. The executive AI problem ─────────────────────────────────────── */
.v3-problem-list {
  margin-top: 44px; display: grid; gap: 0;
  border-top: 1px solid var(--v3-line-3); max-width: 460px;
}
.v3-problem-list div {
  padding: 18px 0; border-bottom: 1px solid var(--v3-line-3);
  font-size: 19px; letter-spacing: -0.01em;
}

/* Information overload resolving to signal. */
.v3-noise {
  position: relative; height: 520px; overflow: hidden;
  border: 1px solid var(--v3-line-3); background: var(--v3-panel);
}
.v3-noise-cols {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  font-family: var(--v3-mono); font-size: 12px;
  letter-spacing: 0.06em; color: oklch(0.60 0.01 255);
}
.v3-noise-cols div { padding: 12px; }
.v3-noise-cols div:nth-child(1) { animation: v3-drift 22s linear infinite; }
.v3-noise-cols div:nth-child(2) {
  animation: v3-drift 17s linear infinite reverse;
  border-left: 1px solid oklch(1 0 0 / 0.06);
  border-right: 1px solid oklch(1 0 0 / 0.06);
}
.v3-noise-cols div:nth-child(3) { animation: v3-drift 27s linear infinite; }
.v3-noise-fade {
  position: absolute; inset: 0;
  background: linear-gradient(var(--v3-panel) 0%, transparent 22%, transparent 78%, var(--v3-panel) 100%);
}
.v3-signal {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); padding: 26px 24px;
  background: var(--v3-base);
  border-top: 1px solid var(--v3-accent-40);
  border-bottom: 1px solid var(--v3-accent-40);
}
.v3-signal-label {
  font-family: var(--v3-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--v3-accent); margin-bottom: 12px;
}
.v3-signal-copy {
  font-size: 26px; line-height: 1.12;
  letter-spacing: -0.03em; text-transform: uppercase;
}

/* ── 3. Daily AI intelligence terminal ───────────────────────────────── */
.v3-terminal { border: 1px solid var(--v3-line-4); background: var(--v3-base); }
.v3-terminal-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 20px;
  padding: 14px 22px; border-bottom: 1px solid var(--v3-line-4);
  font-family: var(--v3-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--v3-faint);
}
.v3-terminal-bar .is-accent { color: var(--v3-accent); }
.v3-terminal-bar .is-right { margin-left: auto; }
.v3-row {
  display: grid;
  grid-template-columns: 110px minmax(0,1.3fr) repeat(3, minmax(0,1fr));
  gap: 28px; padding: 30px 22px;
  border-bottom: 1px solid var(--v3-line);
  transition: background 0.35s ease;
}
.v3-row:last-child { border-bottom: 0; }
.v3-row:hover { background: var(--v3-hover); }
.v3-row-tag {
  font-family: var(--v3-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--v3-accent);
}
.v3-row-what { font-size: 17px; line-height: 1.35; letter-spacing: -0.015em; }
.v3-row-copy { font-size: 14px; line-height: 1.55; color: var(--v3-body); }
.v3-row-copy--action { color: var(--v3-strong); }

/* ── 4. Ecosystem ────────────────────────────────────────────────────── */
.v3-stages { grid-template-columns: repeat(4, minmax(0,1fr)); }
.v3-stage {
  padding: 44px 32px 52px; min-height: 340px;
  display: flex; flex-direction: column;
  transition: background 0.5s ease;
}
.v3-stage:hover,
.v3-stage.is-active { background: var(--v3-hover); }
.v3-stage-num {
  font-family: var(--v3-mono); font-size: 11px;
  letter-spacing: 0.16em; color: var(--v3-accent);
}
.v3-stage-body { margin-top: auto; }
.v3-stage-verb {
  font-family: var(--v3-mono); font-size: 13px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--v3-faint); margin-bottom: 14px;
}
.v3-stage-title {
  font-size: 28px; line-height: 1.08;
  letter-spacing: -0.03em; text-transform: uppercase;
}
.v3-stage p { margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: var(--v3-muted); }

/* ── 5. AI readiness card ────────────────────────────────────────────── */
.v3-card {
  border: 1px solid var(--v3-line-4);
  background: var(--v3-base); padding: 40px;
}
.v3-score { display: flex; align-items: baseline; flex-wrap: wrap; gap: 16px; }
.v3-score b {
  font-size: 96px; line-height: 0.85;
  letter-spacing: -0.05em; font-weight: 500;
}
.v3-score i {
  font-style: normal; font-family: var(--v3-mono);
  font-size: 13px; color: var(--v3-faint);
}
.v3-score em {
  font-style: normal; margin-left: auto;
  font-family: var(--v3-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--v3-accent);
}
.v3-track { height: 2px; background: oklch(1 0 0 / 0.12); margin: 28px 0 36px; }
.v3-track i { display: block; height: 100%; background: var(--v3-accent); }
.v3-blocks { display: grid; gap: 22px; }
.v3-blocks p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--v3-strong); }

/* ── 6. AI adoption gap ──────────────────────────────────────────────── */
.v3-kicker {
  margin-top: 36px; font-size: 26px;
  letter-spacing: -0.03em; text-transform: uppercase; color: var(--v3-accent);
}
.v3-funnel { display: grid; gap: 14px; }
.v3-funnel-row { display: flex; align-items: center; gap: 20px; }
.v3-funnel-row > span {
  font-family: var(--v3-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--v3-dim); width: 190px; flex: none;
}
.v3-funnel-track { flex: 1; height: 46px; background: oklch(1 0 0 / 0.05); position: relative; }
.v3-funnel-bar {
  height: 100%; background: var(--v3-accent-28);
  border-right: 2px solid var(--v3-accent);
}

/* ── 7. AI strategy ──────────────────────────────────────────────────── */
.v3-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 44px; }
.v3-pill {
  font-family: var(--v3-mono); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 14px 22px; border: 1px solid var(--v3-accent-45);
  color: var(--v3-accent);
}
.v3-panel { border: 1px solid var(--v3-line-4); background: var(--v3-base); }
.v3-step {
  display: flex; gap: 24px; align-items: baseline;
  padding: 30px 32px; border-bottom: 1px solid var(--v3-line-2);
}
.v3-step-n {
  font-family: var(--v3-mono); font-size: 11px;
  color: var(--v3-accent); width: 28px; flex: none;
}
.v3-step-name { font-size: 24px; letter-spacing: -0.025em; text-transform: uppercase; }
.v3-step p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--v3-muted); }
.v3-output {
  padding: 30px 32px; display: flex; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
.v3-output span {
  font-family: var(--v3-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--v3-fainter);
}
.v3-output b {
  font-size: 22px; font-weight: 400;
  letter-spacing: -0.025em; text-transform: uppercase; color: var(--v3-accent);
}

/* ── 8. AI advisory ──────────────────────────────────────────────────── */
/* Twelve tracks rather than auto-fit: seven cards over four-per-row leaves a
   tail of three, which widens to span four each and fills the row exactly.
   auto-fit cannot do this — it would leave one cell uncovered. */
.v3-advisory,
.v3-enterprise { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.v3-advisory > div,
.v3-enterprise > div { grid-column: span 3; }
.v3-advisory > div:nth-last-child(-n + 3),
.v3-enterprise > div:nth-last-child(-n + 3) { grid-column: span 4; }
.v3-advisory > div {
  padding: 34px 28px; min-height: 150px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: background 0.5s ease;
}
.v3-advisory > div:hover { background: var(--v3-hover); }
.v3-advisory span { font-family: var(--v3-mono); font-size: 10px; color: var(--v3-fainter); }
.v3-advisory b { font-size: 21px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; }

/* ── 9. Suman Guha ───────────────────────────────────────────────────── */
/* Striped placeholder. Replace with a real photograph — do not generate a
   likeness. Swap the <div> for an <img> at the same aspect ratio. */
.v3-portrait {
  aspect-ratio: 4 / 5;
  background: repeating-linear-gradient(135deg,
    var(--v3-stripe-a) 0 7px, var(--v3-panel) 7px 14px);
  border: 1px solid oklch(1 0 0 / 0.12);
  display: flex; align-items: flex-end; padding: 22px;
}
.v3-portrait span {
  font-family: var(--v3-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--v3-faint);
}

/* With a real photograph in the frame the padding would inset the image, so
   the photo variant drops it and lets the picture fill the 4:5 box. The
   striped ground stays underneath as the broken-image fallback. */
.v3-portrait--photo { padding: 0; display: block; overflow: hidden; }
.v3-portrait--photo img {
  display: block; width: 100%; height: 100%;
  /* The supplied portrait is square and the frame is 4:5, so cover scales to
     the frame's HEIGHT and trims the sides — there is no vertical overflow,
     which makes any vertical object-position value inert. Keep it centred; if
     a taller source is ever supplied, this is the knob to raise the crop. */
  object-fit: cover; object-position: center center;
}
.v3-roles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.v3-roles .v3-chip { letter-spacing: 0.12em; }

/* ── 10. Enterprise ──────────────────────────────────────────────────── */
/* Track/tail rules share the advisory block above — same seven-card shape. */
.v3-enterprise > div {
  padding: 30px 26px; min-height: 130px;
  display: flex; flex-direction: column; gap: 18px;
}
/* FUTURE CAPABILITY is deliberate — these are not shipped features.
   Keep the label until each one exists. */
.v3-enterprise span {
  font-family: var(--v3-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--v3-fainter);
}
.v3-enterprise b {
  font-size: 19px; font-weight: 400;
  letter-spacing: -0.02em; line-height: 1.2; margin-top: auto;
}

/* ── 11. Final CTA ───────────────────────────────────────────────────── */
.v3-final { padding: 160px var(--v3-gutter); text-align: center; }
.v3-final .v3-shell { max-width: 1100px; }
.v3-final-eyebrow {
  font-family: var(--v3-mono); font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--v3-faint); margin-bottom: 40px;
}
.v3-final h2 {
  margin: 0; font-size: clamp(40px, 6.2vw, 104px);
  line-height: 0.95; letter-spacing: -0.045em;
  font-weight: 500; text-transform: uppercase;
}
.v3-final-ctas {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 14px; margin-top: 56px;
}

/* ══════════════════════════════════════════════════════════════════════
   PART 4 — INNER PAGES
   ══════════════════════════════════════════════════════════════════════ */
.v3-masthead {
  padding: 110px var(--v3-gutter) 60px;
  border-bottom: 1px solid var(--v3-line);
}
.v3-masthead--tall { padding-bottom: 70px; border-bottom: 0; }
.v3-masthead h1 {
  margin: 0; font-size: clamp(40px, 5.4vw, 86px);
  line-height: 0.96; letter-spacing: -0.045em;
  font-weight: 500; text-transform: uppercase; max-width: 1000px;
}
.v3-masthead p {
  margin: 32px 0 0; font-size: 19px; line-height: 1.6;
  color: oklch(0.72 0.008 255); max-width: 560px;
}
.v3-page-body { padding: 0 var(--v3-gutter) var(--v3-section); }

/* /intelligence — filter bar */
.v3-filters {
  display: flex; flex-wrap: wrap;
  border-bottom: 1px solid var(--v3-line-4); margin: 0 0 8px;
}
.v3-filter {
  font-family: var(--v3-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 20px 22px; color: var(--v3-dim);
  background: none; border: 0; cursor: pointer;
  transition: color 0.2s ease;
}
.v3-filter:hover { color: var(--v3-text); }
.v3-filter[aria-pressed="true"] { color: var(--v3-accent); }

.v3-feeditem {
  display: grid; grid-template-columns: 150px minmax(0,1fr);
  gap: 40px; padding: 44px 0;
  border-bottom: 1px solid var(--v3-line-2);
}
.v3-feeditem[hidden] { display: none; }
.v3-feeditem-rail div:first-child {
  font-family: var(--v3-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--v3-accent);
}
.v3-feeditem-date {
  font-family: var(--v3-mono); font-size: 10px;
  letter-spacing: 0.14em; color: var(--v3-disclaimer); margin-top: 8px;
}
.v3-feeditem h2 {
  margin: 0; font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.12; letter-spacing: -0.03em; max-width: 900px;
}
.v3-quad {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 32px; margin-top: 30px;
  border-top: 1px solid var(--v3-line-2); padding-top: 24px;
}
.v3-quad p { margin: 0; font-size: 15px; line-height: 1.6; color: oklch(0.78 0.008 255); }
.v3-quad p.is-action { color: var(--v3-bright); }

/* /readiness — two-panel result */
.v3-readgrid { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); }
.v3-readgrid > div { padding: 48px 42px; }
.v3-readgrid > div:first-child { background: var(--v3-tint); }
.v3-read-label {
  font-family: var(--v3-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--v3-accent); margin-bottom: 30px;
}
.v3-read-score { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; }
.v3-read-score b { font-size: 140px; line-height: 0.8; letter-spacing: -0.05em; font-weight: 500; }
.v3-read-score i { font-style: normal; font-family: var(--v3-mono); font-size: 15px; color: var(--v3-faint); }
.v3-read-track { height: 2px; background: oklch(1 0 0 / 0.12); margin: 34px 0 14px; }
.v3-read-track i { display: block; height: 100%; background: var(--v3-accent); }
.v3-read-band {
  font-family: var(--v3-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--v3-faint);
}
.v3-read-blocks { margin-top: 48px; display: grid; gap: 24px; }
.v3-read-blocks p { margin: 0; font-size: 16px; line-height: 1.5; }
.v3-dims-h {
  font-family: var(--v3-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--v3-faint); margin-bottom: 34px;
}
.v3-dims { display: grid; gap: 18px; }
.v3-dim-top {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--v3-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--v3-body); margin-bottom: 8px;
}
.v3-dim-top span:last-child { color: var(--v3-faint); }
.v3-dim-track { height: 6px; background: var(--v3-line); }
.v3-dim-track i { display: block; height: 100%; background: var(--v3-accent-75); }
.v3-readcta {
  margin-top: 60px; display: flex; flex-wrap: wrap;
  gap: 14px; align-items: center;
}

/* ── The record — career and credentials, on /about ───────────────────
   A scannable list, not a CV. The label column is the instrument voice; the
   line itself is prose, so it stays in the sans at reading size. */
.v3-record { border-top: 1px solid var(--v3-line-3); margin-top: 8px; }
.v3-record-row {
  display: grid; grid-template-columns: 96px minmax(0, 1fr);
  gap: 24px; padding: 22px 0;
  border-bottom: 1px solid var(--v3-line-3);
}
.v3-record-row > span {
  font-family: var(--v3-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--v3-accent); padding-top: 4px;
}
.v3-record-row > div {
  font-size: 16px; line-height: 1.6; color: var(--v3-muted);
}
.v3-record-row b { font-weight: 400; color: var(--v3-text); }

@media (max-width: 560px) {
  .v3-record-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* ── The thinking layer — /frameworks, /models, and the homepage band ──
   These are prose pieces, so the card body stays in the sans at reading size;
   only the number, tags and read time take the mono instrument voice. */
.v3-ideas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v3-idea {
  display: flex; flex-direction: column; gap: 20px;
  padding: 38px 32px 34px; min-height: 300px;
  color: inherit; transition: background 0.5s ease;
}
.v3-idea:hover { background: var(--v3-hover); color: inherit; }
.v3-idea-num {
  font-family: var(--v3-mono); font-size: 11px;
  letter-spacing: 0.16em; color: var(--v3-accent);
}
.v3-idea-body { display: flex; flex-direction: column; gap: 16px; }
.v3-idea-title {
  font-size: 26px; line-height: 1.1;
  letter-spacing: -0.03em; text-transform: uppercase;
}
/* The author's own thesis line, set as a quote rather than a summary. */
.v3-idea-quote {
  margin: 0; font-size: 15px; line-height: 1.6;
  color: var(--v3-muted);
  padding-left: 14px; border-left: 1px solid var(--v3-accent-45);
}
.v3-idea-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-family: var(--v3-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--v3-fainter);
}
.v3-idea-meta span { border: 1px solid var(--v3-border); padding: 5px 8px; }
.v3-idea-meta .is-read { border: 0; padding: 5px 0; margin-left: auto; }
.v3-idea-more {
  margin-top: auto; padding-top: 20px;
  font-family: var(--v3-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--v3-accent);
}

/* Homepage band: three routes into the thinking layer. */
.v3-layer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v3-layer > a {
  display: flex; flex-direction: column; gap: 18px;
  padding: 44px 32px 40px; min-height: 260px;
  color: inherit; transition: background 0.5s ease;
}
.v3-layer > a:hover { background: var(--v3-hover); color: inherit; }
.v3-layer-count {
  font-family: var(--v3-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--v3-accent);
}
.v3-layer-title {
  font-size: 30px; line-height: 1.06;
  letter-spacing: -0.03em; text-transform: uppercase;
}
.v3-layer p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--v3-muted); }
.v3-layer-more {
  margin-top: auto; font-family: var(--v3-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--v3-accent);
}

/* /books — the Ideas layer reads as publishing, not product.
   Newsreader rather than Helvetica is the intentional distinction. */
.v3-books-head { grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); align-items: end; }
/* Specificity has to beat `.v3-masthead h1`, which uppercases and tightens
   for the product voice. The Ideas layer is the opposite: sentence case,
   light weight, serif. That contrast is the whole point of the layer. */
.v3-masthead h1.v3-serif-h1,
.v3-serif-h1 {
  margin: 0; font-family: var(--v3-serif);
  font-size: clamp(44px, 6vw, 96px); line-height: 0.94;
  letter-spacing: -0.03em; font-weight: 300;
  text-transform: none;
}
.v3-serif-lede {
  margin: 0; font-family: var(--v3-serif);
  font-size: 21px; line-height: 1.55; color: var(--v3-body);
}
.v3-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 64px; }
.v3-cat {
  font-family: var(--v3-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 11px 18px; border: 1px solid var(--v3-border);
  color: oklch(0.78 0.008 255); cursor: pointer; background: none;
}
.v3-cat:hover { border-color: var(--v3-accent); color: var(--v3-accent); }
.v3-books { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 48px; margin-bottom: 110px; }
.v3-cover {
  aspect-ratio: 2 / 3;
  background: repeating-linear-gradient(135deg,
    var(--v3-stripe-a) 0 6px, var(--v3-stripe-b) 6px 12px);
  border: 1px solid oklch(1 0 0 / 0.12);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--v3-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--v3-faint);
}
.v3-book-num {
  margin-top: 22px; font-family: var(--v3-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--v3-accent);
}
.v3-book-title { margin-top: 12px; font-family: var(--v3-serif); font-size: 28px; line-height: 1.14; letter-spacing: -0.02em; }
.v3-book-sub { margin-top: 10px; font-family: var(--v3-serif); font-style: italic; font-size: 17px; line-height: 1.4; color: var(--v3-muted); }
.v3-book-blurb { margin-top: 16px; font-size: 14px; line-height: 1.6; color: oklch(0.68 0.008 255); }
.v3-book-more { margin-top: 18px; font-family: var(--v3-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v3-accent); }
.v3-research-h { margin: 0 0 40px; font-family: var(--v3-serif); font-size: 38px; font-weight: 300; letter-spacing: -0.02em; }
.v3-research { grid-template-columns: repeat(12, minmax(0, 1fr)); }
/* Five entries: three per row, then a tail of two that widens to half each. */
.v3-research > div { grid-column: span 4; }
.v3-research > div:nth-last-child(-n + 2) { grid-column: span 6; }
.v3-research > div { padding: 34px 30px; display: flex; flex-direction: column; gap: 20px; min-height: 190px; }
.v3-research-kind { font-family: var(--v3-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--v3-fainter); }
.v3-research-name { font-family: var(--v3-serif); font-size: 25px; line-height: 1.2; letter-spacing: -0.02em; }
/* None of these exist yet. The Coming soon state is required. */
.v3-research-status { margin-top: auto; font-family: var(--v3-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--v3-accent); }

/* ══════════════════════════════════════════════════════════════════════
   PART 5 — COMPATIBILITY SHIM
   These class names are produced by code that must not change:
     agents/update_agent.py  →  #firehose, .firehose-*, .ticker-*
     assets/recode.js        →  .feed-*, .ask-*, .tag, .empty-state
     assets/recode-install.css → .phone, .px-*, .appx-*, .inst-*
   Restyle here; never rename there.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Ask recode ──────────────────────────────────────────────────────── */
.v3-ask { max-width: 760px; }
.ask-row {
  display: flex; align-items: center; gap: 14px;
  margin-top: 36px; padding: 0 0 0 18px;
  border: 1px solid var(--v3-border-str); background: var(--v3-base);
}
.ask-row:focus-within { border-color: var(--v3-accent); }
.ask-row svg { flex: none; color: var(--v3-faint); }
.ask-input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  padding: 19px 0; color: var(--v3-text);
  font-family: var(--v3-sans); font-size: 16px; letter-spacing: -0.01em;
}
.ask-input::placeholder { color: var(--v3-fainter); }
.ask-row .btn,
.ask-row button[type="submit"] {
  flex: none; align-self: stretch;
  background: var(--v3-text); color: var(--v3-base);
  border: 0; padding: 0 26px; cursor: pointer;
  font-family: var(--v3-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 0.25s ease;
}
.ask-row button[type="submit"]:hover { background: var(--v3-accent); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* Mono uppercase is this system's instrument voice — labels, CTAs, data.
   The ask chips are whole questions, i.e. prose, so they stay in the sans
   at reading size. Only the hairline border is shared with .tag. */
.chip {
  font-family: var(--v3-sans); font-size: 14px;
  letter-spacing: -0.005em; line-height: 1.3;
  padding: 11px 14px; border: 1px solid var(--v3-border);
  color: var(--v3-body); background: none; cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.chip:hover { border-color: var(--v3-accent); color: var(--v3-accent); }

/* .tag is a category label, so it keeps the instrument voice. */
.tag {
  font-family: var(--v3-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 8px 11px; border: 1px solid var(--v3-border);
  color: var(--v3-body); background: none; cursor: default;
  align-self: start;
}
.tag-neutral { color: var(--v3-accent); border-color: var(--v3-accent-45); }

.ask-answer {
  margin-top: 28px; border: 1px solid var(--v3-line-4);
  background: var(--v3-tint); padding: 30px 32px;
}
.ask-answer[hidden] { display: none; }
.ask-answer-label {
  margin: 0 0 14px; font-family: var(--v3-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--v3-fainter);
}
.ask-answer-body p { margin: 0 0 14px; font-size: 16px; line-height: 1.65; color: var(--v3-strong); }
.ask-answer-body p:last-child { margin-bottom: 0; }
.ask-status,
.ask-notice {
  margin: 14px 0 0; font-family: var(--v3-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--v3-disclaimer);
}
.ask-status { margin: 0; }
.ask-cites { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ask-cite {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--v3-border); padding: 7px 11px;
  font-size: 13px; color: var(--v3-body);
}
.ask-cite-kind {
  font-family: var(--v3-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--v3-accent);
}

/* ── Firehouse feed rows (recode.js) ─────────────────────────────────── */
.feed-row {
  display: grid; grid-template-columns: 130px minmax(0,1fr) 110px;
  gap: 28px; align-items: start;
  padding: 26px 22px; border-bottom: 1px solid var(--v3-line);
  color: inherit; transition: background 0.35s ease;
}
.feed-row:last-child { border-bottom: 0; }
.feed-row:hover { background: var(--v3-hover); color: inherit; }
.feed-title { margin: 0; font-size: 17px; line-height: 1.35; letter-spacing: -0.015em; }
.feed-summary { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--v3-body); }
.feed-time {
  font-family: var(--v3-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--v3-disclaimer); text-align: right;
}
.empty-state {
  margin: 0; padding: 40px 22px;
  font-family: var(--v3-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--v3-disclaimer);
}
.feed-more { margin-top: 40px; }

/* ── #firehose (agents/update_agent.py writes this markup nightly) ───── */
#firehose { border-top: 1px solid var(--v3-line); padding: var(--v3-section) var(--v3-gutter); }
#firehose .container { max-width: var(--v3-shell); margin: 0 auto; }
#firehose .section-label {
  font-family: var(--v3-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--v3-accent); margin-bottom: 26px;
}
#firehose .section-title {
  margin: 0; font-size: clamp(36px, 4.2vw, 64px);
  line-height: 1; letter-spacing: -0.04em;
  font-weight: 500; text-transform: uppercase;
}
#firehose .section-desc {
  margin: 34px 0 0; font-size: 17px; line-height: 1.7;
  color: var(--v3-muted); max-width: 560px;
}
/* The agent hardcodes an inline style on its timestamp span; the mono stack
   there resolves through --mono, which PART 1 already points at Plex Mono. */
#firehose .section-desc span { color: var(--v3-disclaimer) !important; }

.firehose-ticker {
  margin-top: 48px; overflow: hidden;
  border-top: 1px solid var(--v3-line-4);
  border-bottom: 1px solid var(--v3-line-4);
  padding: 0; background: var(--v3-tint);
}
.ticker-inner {
  display: flex; gap: 48px; white-space: nowrap;
  animation: v3-ticker 46s linear infinite;
  padding: 14px 0;
}
@keyframes v3-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-item {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--v3-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--v3-dim);
}
.ticker-hot { color: var(--v3-accent); }
.ticker-dot {
  width: 5px; height: 5px; flex: none; border-radius: 50%;
  background: currentColor;
}
.ticker-hot .ticker-dot { animation: v3-pulse 2.6s infinite; }

/* Six tracks, each card spanning two, exactly as recode-ds.css does — the
   agent emits data-tail as (count % 3) and a tail of one or two widens to
   fill its row. The container paints the page colour, never the divider, so
   an uncovered cell shows nothing rather than a grey slab. Both halves of
   this contract must hold: the count comes from agents/update_agent.py, the
   layout from here. scripts/validate-build.js asserts it. */
.firehose-cards {
  margin-top: 48px; display: grid; gap: 1px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  background: var(--v3-base);
}
.firehose-card { grid-column: span 2; }
.firehose-cards[data-tail="2"] > .firehose-card:nth-last-child(-n + 2) { grid-column: span 3; }
.firehose-cards[data-tail="1"] > .firehose-card:last-child { grid-column: span 6; }

.firehose-card {
  background: var(--v3-base); padding: 34px 30px;
  display: flex; flex-direction: column; gap: 16px;
  min-height: 220px; transition: background 0.5s ease;
  box-shadow: 0 0 0 1px var(--v3-line-4);
}
.firehose-card:hover { background: var(--v3-hover); }
.firehose-priority {
  font-family: var(--v3-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--v3-fainter);
}
/* One accent only — priority is carried by the agent's own emoji, not by a
   second hue. The three classes differ in weight, not colour. */
.firehose-priority.breaking { color: var(--v3-accent); }
.firehose-priority.notable { color: var(--v3-body); }
.firehose-priority.interesting { color: var(--v3-fainter); }
.firehose-card h4 {
  margin: 0; font-size: 21px; font-weight: 400;
  letter-spacing: -0.02em; line-height: 1.15;
}
.firehose-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--v3-muted); }

/* ── App previews + install layer (recode-install.css) ───────────────── */
.appx-cap {
  font-family: var(--v3-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--v3-faint);
}
/* recode-install.css is authored light. Its --color-* reads are already
   redefined in PART 1; these are the declarations that hardcode a value and
   therefore have to be restated. */
/* Radius 0 is the system rule for the site's own components. The phone keeps
   its corner radius — it is a picture of hardware, not a UI surface, and the
   pills inside it depict the real app, which has them. */
.phone { border: 1px solid var(--v3-border); background: var(--v3-tint); }
.phone-in { background: var(--v3-tint); }
.phone-notch { background: var(--v3-panel); }
.px-card { background: var(--v3-panel); }
.px-search { background: var(--v3-panel); }
.px-search b { color: var(--v3-base); }
.px-chk { border: 1px solid var(--v3-border); }
.px-chk.on { background: var(--v3-accent); border-color: var(--v3-accent); }
.px-heat i { background: var(--v3-accent-75); }
.px-heat i.off { background: none; border: 1px solid var(--v3-border); }
.px-badge div { background: var(--v3-panel); border-color: var(--v3-border); }
.px-badge.off { opacity: 0.45; }
.px-btn { background: var(--v3-text); color: var(--v3-base); }
.px-xp, .xp { color: var(--v3-accent); }
.px-tag, .px-lbl, .px-m { color: var(--v3-faint); }
.px-nav { border-top: 1px solid var(--v3-line-4); color: var(--v3-faint); }
.px-nav .on { color: var(--v3-accent); }
.inst-scrim { background: oklch(0.10 0.006 255 / 0.72); }
.inst-panel, .inst-bar { background: var(--v3-tint); border-color: var(--v3-line-4); color: var(--v3-text); }
.inst-note, .inst-kicker { color: var(--v3-faint); }
.inst-bar-txt span { color: var(--v3-muted); }

/* ── Legacy .btn shim — the install layer renders .btn buttons ───────── */
.btn {
  display: inline-block; cursor: pointer;
  font-family: var(--v3-mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 16px 28px; border: 1px solid transparent;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-primary { background: var(--v3-text); color: var(--v3-base); }
.btn-primary:hover { background: var(--v3-accent); color: var(--v3-base); }
.btn-secondary { border-color: var(--v3-border-str); color: var(--v3-text); background: none; }
.btn-secondary:hover { border-color: var(--v3-accent); color: var(--v3-accent); }
/* Radius 0 everywhere. The pill variant is retired in this system. */
.btn-pill { border-radius: 0; }

/* ══════════════════════════════════════════════════════════════════════
   PART 6 — RESPONSIVE + REDUCED MOTION
   The prototype was desktop-first. This is the adaptation the handoff
   specifies under Interactions → Responsive.
   ══════════════════════════════════════════════════════════════════════ */

/* Scroll reveal — applied by recode-v3.js, never CSS-first, so the page
   renders fully visible without JS. */
[data-reveal].is-armed {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1),
              transform 0.9s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (max-width: 1200px) {
  .v3-ideas, .v3-layer { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .v3-row { grid-template-columns: 100px minmax(0,1.2fr) repeat(3, minmax(0,1fr)); gap: 20px; }
  .v3-stages { grid-template-columns: repeat(2, minmax(0,1fr)); }

  /* Three per row → 3 + 3 + 1, so the lone last card takes the whole row. */
  .v3-advisory > div,
  .v3-enterprise > div,
  .v3-advisory > div:nth-last-child(-n + 3),
  .v3-enterprise > div:nth-last-child(-n + 3) { grid-column: span 4; }
  .v3-advisory > div:last-child,
  .v3-enterprise > div:last-child { grid-column: span 12; }
}

@media (max-width: 900px) {
  :root { --v3-gutter: 22px; --v3-section: 88px; }

  /* Condensed nav. The readiness CTA stays visible at all widths. */
  .v3-header-in { gap: 16px; }
  .v3-burger { display: flex; order: 3; }
  .v3-nav {
    order: 4; display: none; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: var(--v3-header); left: 0; right: 0;
    background: var(--v3-tint);
    border-bottom: 1px solid var(--v3-line-4);
    padding: 8px var(--v3-gutter) 20px;
  }
  .v3-header.is-open .v3-nav { display: flex; }
  .v3-nav a {
    padding: 14px 0; font-size: 15px;
    border-bottom: 1px solid var(--v3-line);
    min-height: 44px; display: flex; align-items: center;
  }
  .v3-header-cta { order: 2; margin-left: auto; }
  /* The handoff requires this CTA to stay visible at every width, so it
     shrinks rather than collapsing into the menu. nowrap because two lines
     here push the burger off the row. */
  .v3-btn--sm {
    font-size: 10px; padding: 11px 12px;
    letter-spacing: 0.1em; white-space: nowrap;
  }

  /* Subordinate the motif to the type. The vignette is authored for a wide
     viewport where the network sits beside the copy; at this width it sits
     BEHIND it, so the canvas drops back and the veil becomes a vertical
     wash. The metaphor still reads — it just stops competing. */
  #rc-hero-net { opacity: 0.38; }
  .v3-hero-veil {
    background: linear-gradient(180deg,
      oklch(0.145 0.006 255 / 0.30) 0%,
      oklch(0.145 0.006 255 / 0.80) 50%,
      oklch(0.145 0.006 255 / 0.95) 100%);
  }

  .v3-grid-2, .v3-grid-funnel, .v3-grid-about,
  .v3-books-head, .v3-readgrid {
    grid-template-columns: minmax(0,1fr); gap: 48px;
  }
  .v3-stages { grid-template-columns: minmax(0,1fr); }
  .v3-stage { min-height: 0; padding: 36px 26px 40px; }

  /* Two per row → an odd total leaves the last card alone; let it fill. */
  .v3-advisory > div,
  .v3-enterprise > div,
  .v3-advisory > div:nth-last-child(-n + 3),
  .v3-enterprise > div:nth-last-child(-n + 3) { grid-column: span 6; }
  .v3-advisory > div:last-child:nth-child(odd),
  .v3-enterprise > div:last-child:nth-child(odd) { grid-column: span 12; }
  .v3-research > div,
  .v3-research > div:nth-last-child(-n + 2) { grid-column: span 6; }
  .v3-research > div:last-child:nth-child(odd) { grid-column: span 12; }

  /* Keep the six tracks and span them all, or the span rules above fight the
     template and cards overflow the container. */
  .firehose-card,
  .firehose-cards[data-tail="2"] > .firehose-card:nth-last-child(-n + 2),
  .firehose-cards[data-tail="1"] > .firehose-card:last-child { grid-column: span 3; }
  .v3-books { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px; }
  .v3-ideas, .v3-layer { grid-template-columns: minmax(0,1fr); }
  .v3-idea, .v3-layer > a { min-height: 0; }

  /* The 5-column terminal row becomes a stacked card: headline first,
     then the four labelled fields. */
  .v3-row { grid-template-columns: minmax(0,1fr); gap: 20px; padding: 28px 20px; }
  .v3-row-tag { order: -1; }

  /* One line that scrolls inside itself, rather than wrapping to three tall
     rows. The strip scrolls; the page never does. */
  .v3-filters {
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .v3-filters::-webkit-scrollbar { display: none; }
  .v3-filter { flex: none; padding: 18px 16px; }

  .v3-feeditem { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .v3-quad { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .v3-readgrid > div { padding: 36px 26px; }
  .v3-read-score b { font-size: 96px; }

  .v3-noise { height: 400px; }
  .v3-signal-copy { font-size: 21px; }

  .v3-funnel-row { flex-wrap: wrap; gap: 8px; }
  .v3-funnel-row > span { width: 100%; }
  .v3-funnel-track { height: 34px; width: 100%; }

  .v3-footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px; }
  .v3-final { padding: 96px var(--v3-gutter); }

  .feed-row { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .feed-time { text-align: left; }

  /* 44px minimum hit targets. */
  .v3-btn, .btn, .v3-filter, .v3-cat, .chip { min-height: 44px; }
  .v3-btn, .btn { display: inline-flex; align-items: center; justify-content: center; }
}

@media (max-width: 560px) {
  .v3-header-in { gap: 12px; }
  .v3-btn--sm { font-size: 9px; padding: 10px 9px; letter-spacing: 0.06em; }
  .v3-brand { font-size: 15px; }

  /* One per row everywhere. */
  .v3-advisory > div,
  .v3-enterprise > div,
  .v3-research > div,
  .v3-advisory > div:nth-last-child(-n + 3),
  .v3-enterprise > div:nth-last-child(-n + 3),
  .v3-research > div:nth-last-child(-n + 2) { grid-column: span 12; }
  .firehose-card,
  .firehose-cards[data-tail="2"] > .firehose-card:nth-last-child(-n + 2),
  .firehose-cards[data-tail="1"] > .firehose-card:last-child { grid-column: span 6; }

  .v3-hero { min-height: 0; padding: 64px 0 120px; }
  .v3-hero-status { flex-direction: column; gap: 6px; bottom: 40px; }
  .v3-books { grid-template-columns: minmax(0,1fr); }
  .v3-footer-grid { grid-template-columns: minmax(0,1fr); }
  .v3-score b { font-size: 72px; }
  .v3-card { padding: 28px 24px; }
  .ask-row { flex-wrap: wrap; padding: 0 0 0 14px; }
  .ask-row .btn, .ask-row button[type="submit"] { width: 100%; padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  [data-reveal].is-armed { opacity: 1; transform: none; }
}