/* ============================================================
   HR + AI Impact Dashboard
   Design system: Future Fluent HR (see Future-Fluent-HR-Design-Tokens.md)
   Palette: Deep Indigo ink, Off-white paper, Slate→Violet signature gradient
   ============================================================ */

:root {
  /* ============ FFHR BRAND PALETTE (source of truth) ============ */
  --ffhr-deep-indigo:      #250c33;
  --ffhr-off-white:        #fffeff;
  --ffhr-slate-blue:       #4493cb;
  --ffhr-violet:           #a03198;
  --ffhr-cool-gray:        #928699;
  --ffhr-deep-gray-purple: #5f4e6a;
  --ffhr-indigo-deep:      #1a0824;
  --ffhr-violet-tint:      #f7f3fb;

  --ffhr-gradient:   linear-gradient(135deg, #4493cb 0%, #a03198 100%);
  --ffhr-gradient-h: linear-gradient(90deg,  #4493cb 0%, #a03198 100%);

  /* ============ LEGACY TOKEN MAP (remapped, not renamed, to keep the ~1700 references stable) ============ */
  --ink:         #250c33;   /* deep indigo, headings on light */
  --ink-soft:    #3d1a52;   /* slightly lighter indigo for secondary headings */
  --ink-mute:    #5f4e6a;   /* deep gray-purple, AA-safe body/caption on off-white (7.5:1) */
  --ink-faint:   #928699;   /* cool gray, large-text only on light (3.4:1). AA-safe on deep indigo (5.2:1). */
  --paper:       #fffeff;   /* off-white canvas, never pure white */
  --paper-2:     #f7f3fb;   /* faint violet-tint wash */
  --paper-3:     #eee6f2;   /* deeper violet-tint for hover/subtle surfaces */
  --rule:        rgba(95, 78, 106, 0.16);
  --rule-strong: rgba(95, 78, 106, 0.35);

  --accent:         #a03198;   /* violet, primary editorial accent for text on light (6.16:1) */
  --accent-strong:  #7a2473;   /* deeper violet, kickers on light backgrounds (9.6:1) */
  --accent-on-dark: #4493cb;   /* slate blue for links/eyebrows on deep indigo (5.3:1) */
  --accent-soft:    rgba(160, 49, 152, 0.10);

  /* Credibility semantic colors, tuned to work against off-white + AA-safe */
  /* Legacy tokens repurposed to FFHR-native palette (kept for credibility + pivot pills) */
  --green:      #250c33;         /* was verify-green, now deep indigo (Verified) */
  --green-soft: rgba(37, 12, 51, 0.10);
  --amber:      #a36a0c;
  --amber-soft: rgba(68, 147, 203, 0.14);   /* Reported: slate-blue tint */
  --red:        #8a2c1d;
  --red-soft:   #f5dcd8;
  --grey-soft:  rgba(146, 134, 153, 0.18);  /* Inferred: cool-gray tint */

  /* Scope palette, chart categories, harmonized with brand */
  --plum:            #7a2473;   /* deeper violet variant */
  --plum-soft:       rgba(160, 49, 152, 0.12);
  --terracotta:      #2b6ea3;   /* slate blue variant (categorical distinctness) */
  --terracotta-soft: rgba(68, 147, 203, 0.13);
  --slate:           #3d1a52;   /* deep indigo variant */
  --slate-soft:      rgba(37, 12, 51, 0.10);

  /* ============ TINTED ACCENT FILLS (for chips on dark) ============ */
  --tint-slate-08:  rgba(68, 147, 203, 0.08);
  --tint-slate-13:  rgba(68, 147, 203, 0.13);
  --tint-violet-08: rgba(160, 49, 152, 0.08);
  --tint-violet-13: rgba(160, 49, 152, 0.13);

  /* ============ TYPOGRAPHY ============ */
  /* Inter is the entire system. Legacy serif/mono aliases point at Inter to catch stray refs. */
  --serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-eyebrow: 0.72rem;
  --fs-caption: 0.73rem;
  --fs-xs:      0.8rem;
  --fs-sm:      0.875rem;
  --fs-base:    1rem;
  --fs-md:      1.1rem;
  --fs-lg:      1.25rem;
  --fs-xl:      1.6rem;
  --fs-2xl:     2.1rem;
  --fs-3xl:     2.8rem;
  --fs-display: clamp(2.1rem, 4.2vw, 3.4rem);

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.65;
  --lh-loose: 1.8;

  --track-tight:   -0.01em;
  --track-normal:  0;
  --track-wide:    0.08em;
  --track-eyebrow: 0.22em;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* ============ ELEVATION ============ */
  --shadow-sm:        0 1px 2px rgba(37, 12, 51, 0.04);
  --shadow-md:        0 4px 12px rgba(37, 12, 51, 0.05);
  --shadow-lg:        0 16px 48px rgba(37, 12, 51, 0.09);
  --shadow-cta:       0 4px 20px rgba(160, 49, 152, 0.2);
  --shadow-cta-hv:    0 6px 28px rgba(160, 49, 152, 0.35);
  --shadow-logo-glow: 0 0 40px rgba(68, 147, 203, 0.2);

  /* ============ RADII ============ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* ============ MOTION ============ */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-pop:    cubic-bezier(0.34, 1.2, 0.64, 1);
  --dur-fast:    160ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Header ---------- */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: rgba(255, 254, 255, 0.92);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(8px);
}
.header-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
  min-height: 96px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  color: var(--ink); text-decoration: none;
}
.brand-logo-only { gap: 0; }
.logo-mark {
  width: 44px;
  height: 44px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(68, 147, 203, 0.15));
}
/* Full FFHR logo lockup used in the header. The SVG bakes in the mark, the */
/* "Future Fluent HR" wordmark, and the "Human-Led. AI-Enhanced." tagline, */
/* so we size it large enough for the small text to be legible. Two variants: */
/* the light-theme version has an indigo wordmark; the dark-theme version */
/* keeps the wordmark white. Theme swaps them by toggling display. */
.logo-lockup {
  height: 96px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(68, 147, 203, 0.18));
}
/* Force theme swap with !important so cached base rule can't override */
img.logo-lockup-dark { display: none !important; }
[data-theme="dark"] img.logo-lockup-light { display: none !important; }
[data-theme="dark"] img.logo-lockup-dark { display: block !important; }
@media (max-width: 900px) {
  .logo-lockup { height: 80px; }
}
/* Long/short labels for the freshness and PDF pills so mobile can swap in */
/* compact copy without changing the DOM. Default: long visible, short hidden. */
.freshness-short, .pdf-short { display: none !important; }
.freshness-long, .pdf-long { display: inline !important; }
@media (max-width: 640px) {
  /* Tighten header so the logo and meta pills share one row on mobile. Logo */
  /* shrinks, the freshness pill uses the short "JUL 2026" label, and the */
  /* Executive PDF button collapses to a compact "PDF" tap-target. */
  .logo-lockup { height: 52px; }
  .header-grid { padding-top: 10px; padding-bottom: 10px; min-height: 56px; gap: 6px; }
  .brand { flex-shrink: 0; }
  .meta { gap: 6px; flex-wrap: nowrap; justify-content: flex-end; align-items: center; }
  .meta-pill { padding: 4px 8px; font-size: 9.5px; letter-spacing: 0.05em; }
  .theme-toggle { width: 30px; height: 30px; padding: 4px; }
  .theme-toggle svg { width: 14px; height: 14px; }
  .freshness-long, .pdf-long { display: none !important; }
  .freshness-short, .pdf-short { display: inline !important; }
}
.brand-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.brand-sub {
  font-size: 11px; color: var(--ink-mute);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
}
.meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.meta-pill {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 7px 12px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-soft);
}
.meta-pill.action {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  cursor: pointer;
  transition: background .15s;
}
.meta-pill.action:hover { background: var(--accent); border-color: var(--accent); }

/* ---------- Reading progress bar ---------- */
.reading-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: transparent;
  z-index: 100;
  pointer-events: none;
}
.reading-progress-bar {
  height: 100%;
  width: 0;
  background: var(--ffhr-gradient-h);
  transform-origin: left;
  will-change: width;
  transition: width 40ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress-bar { transition: none; }
}

/* ---------- Hero ---------- */
.hero {
  padding: 80px 0 64px;
  border-bottom: 1px solid var(--rule);
}

/* Hero two-column split: headline + lede on left, macro run-rate on right */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
  margin-bottom: 56px;
}
.hero-left { min-width: 0; }
.hero-right { min-width: 0; position: relative; }

/* Editorial macro-context card, sits opposite the headline */
.hero-runrate-card {
  position: relative;
  padding: 32px 32px 28px;
  border-radius: 14px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(160, 49, 152, 0.10), transparent 60%),
    radial-gradient(120% 100% at 0% 100%, rgba(68, 147, 203, 0.10), transparent 55%),
    var(--paper-2);
  border: 1px solid rgba(160, 49, 152, 0.18);
  overflow: hidden;
}
.hero-runrate-card::before {
  content: "";
  position: absolute;
  top: 0; left: 32px;
  width: 44px; height: 3px;
  background: var(--ffhr-gradient-h);
  border-radius: 0 0 2px 2px;
}
.hero-runrate-eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent-strong);
  margin-bottom: 8px;
}
.hero-runrate-title {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 20px;
  letter-spacing: -0.005em;
}
.hero-runrate-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.hero-runrate-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(255, 254, 255, 0.6);
  border: 1px solid rgba(37, 12, 51, 0.08);
}
.hero-runrate-cell-hot {
  background: linear-gradient(135deg, rgba(68, 147, 203, 0.10), rgba(160, 49, 152, 0.10));
  border: 1px solid rgba(160, 49, 152, 0.30);
}
.hero-runrate-year {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.hero-runrate-num {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hero-runrate-cell-hot .hero-runrate-num {
  background: var(--ffhr-gradient-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-runrate-foot {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.hero-runrate-source {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  text-transform: none;
}
.kicker {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent-strong);
  margin-bottom: 24px;
  display: block;
  position: relative;
}
/* Signature gradient bar. Hero: matches eyebrow text width. CTA: 32px centered signature. */
.hero .kicker,
.cta-card .kicker {
  display: inline-block; /* shrink-to-fit so ::after can match text width */
}
.hero .kicker { display: inline-block; }
.hero .kicker::after {
  content: "";
  display: block;
  width: 100%;
  height: 2.5px;
  border-radius: 2px;
  background: var(--ffhr-gradient-h);
  margin-top: 12px;
}
.cta-card { text-align: center; }
.cta-card .kicker::after {
  content: "";
  display: block;
  width: 32px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--ffhr-gradient-h);
  margin: 12px auto 0;
}
/* Kickers on dark backgrounds use slate blue (AA-safe on deep indigo) */
.cta-card .kicker,
.site-footer .kicker { color: var(--accent-on-dark); }
.hero h1 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  max-width: 18ch;
  color: var(--ink);
}
.hero-em {
  background: var(--ffhr-gradient-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0;
}

.kpi-grid {
  display: grid;
  grid-template-columns: 0.9fr 0.9fr 0.9fr 1.3fr 1.9fr;
  gap: 24px;
  border-top: 1px solid var(--rule-strong);
  padding-top: 32px;
  align-items: start;
}
/* Legacy runrate rule kept for tablet fallback, no longer used in hero */
.kpi-runrate { grid-column: span 2; }
.runrate-heading {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin-bottom: 12px;
  max-width: none;
}
.runrate-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.runrate-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(107, 42, 91, 0.06);
  border: 1px solid rgba(107, 42, 91, 0.15);
}
.runrate-cell-hot {
  background: rgba(162, 74, 43, 0.10);
  border-color: rgba(162, 74, 43, 0.35);
}
.runrate-year {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin-bottom: 4px;
  font-weight: 500;
}
.runrate-num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.runrate-foot { max-width: none; }
.kpi-num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 12px;
}
.kpi-label {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.4;
  max-width: 30ch;
}
.kpi-source { display: block; color: #5f6470; font-size: 11px; margin-top: 4px; }

/* Scope split KPI card */
.kpi-scope-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.scope-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  min-width: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.scope-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.scope-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.scope-tile.is-active {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(37, 12, 51, 0.14), 0 0 0 2px var(--ffhr-violet);
  position: relative;
}
.scope-tile.is-active::after {
  content: "✓ Filtered";
  position: absolute;
  top: -8px; right: -8px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--ffhr-gradient-h);
  color: #fffeff;
  line-height: 1;
}
.scope-tile-num {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
}
.scope-tile-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
  font-weight: 500;
}

/* ---------- Section heads (reusable) ---------- */
.section-head { max-width: 70ch; margin-bottom: 28px; }

/* Chapter markers: numbered tick above the kicker, positions the site as a
   sequenced report instead of a continuous scroll. */
.chapter-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
  /* Prevent the sticky header from clipping section numbers when scrolled to */
  scroll-margin-top: 88px;
  margin-bottom: 20px;
}
.chapter-mark-num {
  display: inline-block;
  min-width: 28px;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--ffhr-gradient-h);
  color: #fffeff;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1;
}
.chapter-mark-title { color: var(--accent-strong); font-weight: 700; }
.chapter-mark-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(160, 49, 152, 0.20), transparent 80%);
  max-width: 240px;
}
.section-head h2 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 38px);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.section-head .section-sub.section-sub {
  color: var(--ink-mute);
  font-size: 15px;
  margin: 0;
  line-height: 1.55;
}

/* ---------- Persona selector ---------- */
.persona-section {
  padding: 56px 0 40px;
  background: var(--paper);
}
.persona-head .persona-h {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(26px, 2.8vw, 34px);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.persona-sub {
  color: var(--ink-mute);
  font-size: 15px;
  max-width: 66ch;
  margin: 0 0 28px;
}
.persona-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 20px;
}
.persona-tab {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 16px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s;
}
.persona-tab:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.persona-tab.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.persona-summary {
  margin-top: 14px;
  background: var(--accent-soft);
  border: 1px solid var(--rule-strong);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 18px 22px;
}
.persona-summary-inner {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.55;
}
.persona-summary-inner strong {
  font-weight: 700;
  color: var(--ink);
}

/* ---------- Charts ---------- */
.charts {
  padding: 56px 0;
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.charts-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
}
.chart-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 28px 28px 22px;
  box-shadow: var(--shadow-sm);
}
.chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
}
.chart-scope-badge {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: help;
  align-self: center;
}
[data-theme="dark"] .chart-scope-badge {
  color: var(--ink-mute);
  background: rgba(160, 49, 152, 0.08);
  border-color: var(--rule-strong);
}
.chart-title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.chart-sub {
  font-size: 13px;
  color: var(--ink-mute);
  margin: 0 0 20px;
  max-width: 60ch;
}
.chart-canvas-wrap {
  position: relative;
  height: 320px;
  width: 100%;
}
.pivot-wrap { height: 280px; }
.chart-card-wide { margin-top: 20px; }
.timeline-wrap { height: 360px; }
.chart-caption {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 14px 0 0;
  padding: 12px 14px;
  background: rgba(201, 192, 173, 0.10);
  border-left: 3px solid rgba(160, 49, 152, 0.35);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 100%;
}
.chart-caption .cap-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex: 1 1 320px;
}
.chart-caption .cap-dash {
  display: inline-block;
  width: 18px;
  height: 0;
  border-top-width: 1.25px;
  border-top-style: dashed;
  flex-shrink: 0;
  transform: translateY(-3px);
}
.chart-caption .cap-dash-mute { border-top-color: var(--ink-mute); opacity: 0.7; }
.chart-caption .cap-dash-accent { border-top-color: var(--accent); opacity: 0.85; }

/* Chart controls: chip toolbar above the timeline */
.chart-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin: 4px 0 14px;
  padding: 10px 12px;
  background: rgba(201, 192, 173, 0.08);
  border: 1px solid rgba(201, 192, 173, 0.35);
  border-radius: 6px;
}
.chart-control-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.chart-control-label {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.chip-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(201, 192, 173, 0.55);
  color: var(--ink);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.chip.is-active:hover { background: var(--accent); color: var(--paper); }
.chip-projected { cursor: help; }
.chip-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-family: var(--serif);
  font-style: italic;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  margin-left: 3px;
  opacity: 0.8;
}
.chip.chip-projected:hover .chip-info { opacity: 1; }

.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;
}
.chip-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.chip.is-active .chip-dot { box-shadow: 0 0 0 1px var(--paper); }
.chip-tri {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--accent);
}
.chip.is-active .chip-tri { border-top-color: var(--paper); }

/* Cite this chart footer */
.chart-cite {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  padding: 8px 12px;
  background: rgba(201, 192, 173, 0.10);
  border-radius: 4px;
  font-size: 11.5px;
  color: var(--ink-mute);
  flex-wrap: wrap;
}
.chart-cite-label {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chart-cite code {
  flex: 1 1 auto;
  min-width: 200px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px;
  color: var(--ink);
  background: transparent;
}
.chart-cite-copy {
  background: transparent;
  border: 1px solid rgba(160, 49, 152, 0.4);
  color: var(--accent);
  padding: 3px 10px;
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.chart-cite-copy:hover { background: var(--accent); color: var(--paper); }
.chart-cite-copy.is-copied { background: var(--accent); color: var(--paper); }

/* Reversal glyph in tooltip */
.tt-reversal {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--accent);
  margin-right: 4px;
  transform: translateY(-1px);
}

/* Tooltip company logo */
.tt-logo {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  vertical-align: -3px;
  margin-right: 4px;
  object-fit: contain;
  background: rgba(255,255,255,0.06);
}
/* Fallback: colored initial glyph when a favicon is unavailable or fails to load */
.tt-logo-fallback {
  background: rgba(160, 49, 152, 0.28);
  color: rgba(255, 240, 220, 0.92);
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  font-family: var(--font-body, inherit);
  letter-spacing: 0;
}

/* Sector heatmap */
.sector-heatmap {
  margin: 18px 0 0;
  padding: 14px 14px 12px;
  background: rgba(201, 192, 173, 0.06);
  border: 1px solid rgba(201, 192, 173, 0.35);
  border-radius: 6px;
}
.sector-heatmap-title {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 8px;
}
.sector-heatmap-grid {
  display: grid;
  gap: 2px;
  font-size: 10.5px;
  overflow-x: auto;
}
.sector-heatmap-cell {
  padding: 5px 4px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--ink-mute);
  background: rgba(201, 192, 173, 0.05);
  border-radius: 2px;
  min-height: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sector-heatmap-cell.is-row-label {
  justify-content: flex-start;
  padding-left: 8px;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--ink);
  background: transparent;
  text-align: left;
}
.sector-heatmap-cell.is-col-label {
  color: var(--ink);
  background: transparent;
  font-size: 10px;
}
.sector-heatmap-cell.is-empty { color: rgba(138, 132, 122, 0.4); }
.sector-heatmap-cell[data-count] { color: var(--paper); }

/* Scroll shadow on the right edge of a horizontally scrollable heatmap.
   Turns off when the user has scrolled to the end via a CSS-only trick. */
.sector-heatmap {
  position: relative;
}
.sector-heatmap::after {
  content: '';
  position: absolute;
  top: 40px; right: 14px; bottom: 12px;
  width: 28px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255, 254, 255, 0) 0%, rgba(255, 254, 255, 0.85) 100%);
  border-radius: 0 4px 4px 0;
  opacity: 0;
  transition: opacity .2s;
}
.sector-heatmap.is-scrollable::after { opacity: 1; }
.sector-heatmap.is-at-end::after { opacity: 0; }

.sector-heatmap-hint {
  display: none;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 8px;
  text-align: right;
}

@media (max-width: 820px) {
  .timeline-wrap { height: 300px; }
  .sector-heatmap { padding: 12px 10px 10px; }
  .sector-heatmap-grid { gap: 1px; font-size: 9.5px; }
  .sector-heatmap-cell { padding: 4px 2px; min-height: 20px; }
  .sector-heatmap-cell.is-row-label { font-size: 10.5px; padding-left: 6px; padding-right: 6px; }
  .sector-heatmap-cell.is-col-label { font-size: 9px; }
  .sector-heatmap-hint { display: block; }
  /* Row-label column narrower on mobile to save space */
  .sector-heatmap-grid { grid-template-columns: 96px repeat(var(--heatmap-cols, 22), minmax(18px, 1fr)) !important; }
}

/* ---------- Quote cards (LinkedIn-ready) ---------- */
.quote-cards-section {
  padding: 72px 0 56px;
}
.quote-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1200px) {
  .quote-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .quote-cards { grid-template-columns: 1fr; }
}
.quote-card {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  position: relative;
  transition: transform .2s, box-shadow .2s;
  display: flex; flex-direction: column;
  min-height: 280px;
}
/* Card 2, the standout: full slate→violet gradient */
.quote-card.amber { background: var(--ffhr-gradient); }
/* Card 3: deeper indigo variant for tonal shift */
.quote-card.deep { background: var(--ffhr-indigo-deep); }
/* Card 4: light-inverted for rhythm dark, gradient, dark, light */
.quote-card.plum {
  background: var(--paper-2);
  border: 1px solid rgba(160, 49, 152, 0.18);
  color: var(--ink);
}
.quote-card.plum .quote-card-label { color: var(--accent-strong); }
.quote-card.plum .quote-card-stat { color: var(--ink); }
.quote-card.plum .quote-card-body { color: var(--ink-mute); }
.quote-card.plum .quote-card-foot { color: var(--accent-strong); }
.quote-card-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d8d0e0;
  margin-bottom: 18px;
}
/* Gradient card needs full paper for AA contrast on the violet end */
.quote-card.amber .quote-card-label,
.quote-card.amber .quote-card-foot { color: var(--paper); }
.quote-card-stat {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.quote-card-body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--paper);
  margin: 0 0 22px;
}
.quote-card-foot {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #d8d0e0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.quote-card-foot-source {
  display: block;
  opacity: 0.85;
}
.quote-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
}
.quote-copy-btn {
  appearance: none;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 254, 255, 0.28);
  background: rgba(255, 254, 255, 0.10);
  color: var(--paper);
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.quote-copy-btn:hover {
  background: rgba(255, 254, 255, 0.18);
  border-color: rgba(255, 254, 255, 0.5);
  transform: translateY(-1px);
}
.quote-copy-btn:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}
.quote-copy-label {
  font-size: 11px;
  line-height: 1;
}
.quote-copy-meta {
  font-size: 9px;
  letter-spacing: 0.08em;
  opacity: 0.75;
  text-transform: uppercase;
  font-weight: 600;
}
.quote-copy-full {
  background: rgba(255, 254, 255, 0.04);
}
.quote-copy-btn.is-copied {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.quote-copy-btn.is-copied .quote-copy-meta { color: var(--accent-strong); opacity: 1; }

/* Plum card has a light background, so buttons need dark ink borders */
.quote-card.plum .quote-copy-btn {
  color: var(--ink);
  border-color: rgba(37, 12, 51, 0.16);
  background: rgba(37, 12, 51, 0.04);
}
.quote-card.plum .quote-copy-btn:hover {
  background: rgba(37, 12, 51, 0.09);
  border-color: rgba(37, 12, 51, 0.28);
}
.quote-card.plum .quote-copy-full {
  background: rgba(37, 12, 51, 0.02);
}
.quote-card.plum .quote-copy-btn.is-copied {
  background: var(--accent-strong);
  color: var(--paper);
  border-color: var(--accent-strong);
}
.quote-card.plum .quote-copy-btn.is-copied .quote-copy-meta { color: var(--paper); opacity: 0.9; }

.quote-card.is-copied {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(160, 49, 152, 0.35);
}
.quote-card.plum.is-copied .copy-hint {
  color: var(--accent-strong);
}

/* ---------- Editorial pull-quote section ---------- */
.quotes-section {
  padding: 72px 0 88px;
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.quotes-section::before,
.quotes-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.quotes-section::before {
  top: -120px; right: -120px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(160, 49, 152, 0.08), transparent 70%);
}
.quotes-section::after {
  bottom: -120px; left: -120px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(68, 147, 203, 0.08), transparent 70%);
}
.quotes-section > .container { position: relative; z-index: 1; }

.ceo-quotes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Editorial pull-quote card. Alternates light + dark for tonal rhythm. */
.ceo-quote {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 48px 40px 32px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ceo-quote:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(37, 12, 51, 0.08);
}

/* Alternating pattern via nth-child. Light-then-dark. */
.ceo-quote:nth-child(4n+2),
.ceo-quote:nth-child(4n+3) {
  background: var(--ffhr-indigo-deep);
  border-color: rgba(160, 49, 152, 0.25);
  color: #fffeff;
}

/* Gradient quotation mark, positioned top-left inside the card */
.ceo-quote::before {
  content: "“";
  font-family: var(--sans);
  font-weight: 800;
  font-size: 88px;
  position: absolute;
  top: 12px; left: 32px;
  line-height: 1;
  background: var(--ffhr-gradient-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.35;
  z-index: 0;
}
.ceo-quote:nth-child(4n+2)::before,
.ceo-quote:nth-child(4n+3)::before {
  opacity: 0.55;
}

/* The quote itself. Lighter weight, larger, longer line-height. */
.ceo-quote-body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.42;
  color: var(--ink);
  margin: 20px 0 28px;
  letter-spacing: -0.005em;
  position: relative;
  z-index: 1;
}
.ceo-quote:nth-child(4n+2) .ceo-quote-body,
.ceo-quote:nth-child(4n+3) .ceo-quote-body {
  color: #fffeff;
}

/* Attribution: mono, uppercase, small, gradient-highlighted speaker name. */
.ceo-quote-attribution {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  line-height: 1.6;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  position: relative;
  z-index: 1;
}
.ceo-quote:nth-child(4n+2) .ceo-quote-attribution,
.ceo-quote:nth-child(4n+3) .ceo-quote-attribution {
  color: #c9c0d3;
  border-top-color: rgba(255, 254, 255, 0.14);
}
.ceo-quote-attribution strong {
  color: var(--accent-strong);
  font-weight: 700;
  letter-spacing: 0.14em;
}
.ceo-quote:nth-child(4n+2) .ceo-quote-attribution strong,
.ceo-quote:nth-child(4n+3) .ceo-quote-attribution strong {
  color: #fffeff;
}
.ceo-quote-source {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--accent-strong);
  text-decoration: none;
  border-bottom: 1px solid rgba(160, 49, 152, 0.35);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ceo-quote-source::before { content: "Source → "; opacity: 0.6; }
.ceo-quote-source:hover { color: var(--ink); border-color: var(--ink); }
.ceo-quote:nth-child(4n+2) .ceo-quote-source,
.ceo-quote:nth-child(4n+3) .ceo-quote-source {
  color: #a03198;
  border-bottom-color: rgba(160, 49, 152, 0.55);
}
.ceo-quote:nth-child(4n+2) .ceo-quote-source:hover,
.ceo-quote:nth-child(4n+3) .ceo-quote-source:hover {
  color: #fffeff;
  border-bottom-color: #fffeff;
}

/* ---------- Table section ---------- */
.table-section { padding: 72px 0 40px; }

.controls {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 24px;
  padding: 18px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
}
.control { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 140px; }
.control label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}
.control input,
.control select {
  font-family: var(--sans);
  font-size: 14px;
  padding: 9px 12px;
  background-color: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.control input:focus,
.control select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(160, 49, 152, 0.25);
  outline: 2px solid transparent; /* preserve outline for forced-colors mode */
}

/* Skip-to-main-content link for keyboard users, WCAG 2.4.1 */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: top 0.15s;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: 2px solid var(--accent-on-dark);
  outline-offset: 2px;
}

/* Global :focus-visible ring for keyboard users, WCAG 2.4.7 */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* On dark backgrounds, invert the ring so it's actually visible */
.site-footer a:focus-visible,
.cta-card a:focus-visible,
.quote-card:focus-visible {
  outline-color: var(--paper);
}
.btn-primary.btn-ghost {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .15s;
  white-space: nowrap;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--accent); }
.btn-ghost { background: transparent; border-color: var(--rule-strong); color: var(--ink); }
.btn-ghost:hover { background: var(--paper); border-color: var(--ink); }

/* Elevated CSV download: gradient, icon, row-count meta */
.btn-download {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 11px 18px 11px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--ffhr-gradient);
  color: #fffeff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 16px rgba(160, 49, 152, 0.28);
  transition: transform .15s, box-shadow .15s, filter .15s;
  white-space: nowrap;
  margin-left: auto;
}
.btn-download:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(160, 49, 152, 0.42);
  filter: brightness(1.06);
}
.btn-download:active { transform: translateY(0); }
.btn-download:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.btn-download-icon {
  flex-shrink: 0;
  color: #fffeff;
}
.btn-download-label {
  font-weight: 700;
}
.btn-download-meta {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 254, 255, 0.22);
  color: #fffeff;
  line-height: 1;
}

.table-wrap {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper);
  overflow: auto;
  max-height: 720px;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
/* Column widths tuned so all 9 fit at 1200px+ without horizontal scroll.
   Company narrow-fixed, Announced/% narrow-fixed, badges narrow-fixed.
   Industry / HR function / AI tool flex to fill. */
/* Column min-widths: sum to ~1120px so on smaller laptops the table
   overflows horizontally and the frozen Company column earns its keep. */
#datatable col.col-company { width: 11%; min-width: 120px; }
#datatable col.col-size { width: 8%; min-width: 88px; }
#datatable col.col-industry { width: 10%; min-width: 110px; }
#datatable col.col-announced { width: 7%; min-width: 88px; }
#datatable col.col-reduction { width: 7%; min-width: 92px; }
#datatable col.col-function { width: 16%; min-width: 170px; }
#datatable col.col-aitool { width: 15%; min-width: 150px; }
#datatable col.col-credibility { width: 9%; min-width: 100px; }
#datatable col.col-hrscope { width: 8%; min-width: 96px; }
#datatable col.col-pivot { width: 9%; min-width: 96px; }

/* Company size cell: compact numeric on top, bucket tag beneath */
.size-cell { text-align: right; padding-right: 12px; white-space: nowrap; }
.size-num {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.size-bucket {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.size-bucket.bucket-smb { color: #4493cb; }
.size-bucket.bucket-mid { color: #7a41b5; }
.size-bucket.bucket-ent { color: var(--ink-mute); }
thead {
  position: sticky; top: 0; z-index: 2;
  background: var(--paper-2);
}
th {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 500;
  padding: 0;
  border-bottom: 1px solid var(--rule-strong);
  vertical-align: bottom;
  height: 48px;
  box-sizing: border-box;
}
/* Bottom-align the label inside each th by wrapping content in a flex column
   set to fill the th's height. The wrapper span is added by markup. */
thead th .th-label {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: 100%;
  padding: 10px 8px;
  line-height: 1.3;
  gap: 0;
  white-space: normal;
}
thead th.num .th-label {
  align-items: flex-end;
}
th.sortable { cursor: pointer; user-select: none; position: relative; }
th.sortable:hover { color: var(--accent-strong); }
/* Default state: show a faint up/down indicator so the affordance is visible */
.arrow {
  display: inline-block;
  width: 10px;
  margin-left: 4px;
  font-size: 9px;
  line-height: 1;
  color: var(--ink-faint);
  opacity: 0.55;
  transition: opacity .15s, color .15s;
}
.arrow::after { content: "↕"; }
th.sortable:hover .arrow { opacity: 0.85; color: var(--accent); }
/* Active sort: solid arrow + accent chip under the label */
th.sort-asc .arrow, th.sort-desc .arrow {
  opacity: 1;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 700;
}
th.sort-asc .arrow::after { content: "▲"; }
th.sort-desc .arrow::after { content: "▼"; }
th.sort-asc .th-label, th.sort-desc .th-label {
  color: var(--accent-strong);
  font-weight: 800;
}
th.sort-asc::after, th.sort-desc::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 6px;
  height: 2px;
  background: var(--ffhr-gradient);
  border-radius: 2px;
}

tbody tr {
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background .12s;
}
/* Subtle zebra striping to guide the eye across wide rows. Very light violet tint
   on odd data rows only. Case-row (expansion) rows never get striped so the
   detail card stays visually distinct from the record. */
tbody tr.data-row.row-odd {
  background: rgba(160, 49, 152, 0.045);
}
tbody tr:hover { background: var(--accent-soft); }
tbody tr.data-row.is-expanded { background: var(--accent-soft); }
tbody tr:last-child { border-bottom: none; }

/* ============================================================
   Freeze Company column on horizontal scroll.
   The first column stays anchored while every other column scrolls under it.
   Sticky cells need an opaque background so scrolling content doesn't bleed through.
   Row parity is preserved by matching backgrounds on the sticky td.
============================================================ */
#datatable thead th:first-child,
#datatable tbody td.company {
  position: sticky;
  left: 0;
  /* A soft right shadow becomes visible only when horizontal scroll is engaged.
     We use a box-shadow on a pseudo-element so the base background stays clean. */
}
/* Header intersection cell: must sit above sticky thead + sticky column */
#datatable thead th:first-child {
  z-index: 3;
  background: var(--paper-2);
}
/* Body sticky cell background matches the row parity + hover + expanded states */
#datatable tbody td.company {
  z-index: 1;
  background: var(--paper);
}
#datatable tbody tr.data-row.row-odd td.company {
  /* Solid equivalent of #fffeff paper + rgba(160,49,152,0.045). */
  background: #f8ecf6;
}
#datatable tbody tr.data-row:hover td.company,
#datatable tbody tr.data-row.is-expanded td.company {
  /* Solid equivalent of --accent-soft (rgba 160,49,152,0.10) over paper */
  background: #f2e4f1;
}
/* Faint right edge on the frozen column when horizontal scroll is active.
   The .is-hscrolled class is added by JS below when scrollLeft > 0. */
.table-wrap.is-hscrolled #datatable thead th:first-child,
.table-wrap.is-hscrolled #datatable tbody td.company {
  box-shadow: 8px 0 12px -8px rgba(37, 12, 51, 0.18);
}

/* ============================================================
   Active filter chips: chip row above the table showing every active
   filter as a removable chip. Hidden entirely when no filters are set.
============================================================ */
.active-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 12px 14px;
  margin: 0 0 12px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.active-chips[hidden] { display: none; }
.active-chips-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-weight: 500;
  margin-right: 2px;
}
.active-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 10px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink);
  line-height: 1;
  cursor: default;
  transition: border-color .15s, background .15s;
}
.active-chip:hover { border-color: var(--accent); }
.active-chip-key {
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 500;
}
.active-chip-value {
  font-weight: 500;
  color: var(--ink);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.active-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: 2px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.active-chip-x:hover {
  background: var(--accent);
  color: var(--paper);
}
.active-chips-clear {
  margin-left: auto;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.active-chips-clear:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--paper);
}
@media (max-width: 600px) {
  .active-chips { padding: 10px 12px; }
  .active-chip-value { max-width: 140px; }
  .active-chips-clear { margin-left: 0; }
}
td {
  padding: 12px 8px;
  vertical-align: top;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.45;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
td.company {
  font-weight: 700;
  color: var(--ink);
  font-size: 13.5px;
  letter-spacing: -0.01em;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
td.num { text-align: right; font-family: var(--mono); font-size: 12px; white-space: nowrap; }

.industry-cell.function-cell { font-size: 12px; color: var(--ink-mute); }
.industry-cell { display: flex; flex-direction: column; gap: 2px; }
.industry-parent { font-size: 12.5px; color: var(--ink); font-weight: 500; }
.industry-sub { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); }

/* Table badges get a compact variant when inside table cells */
#datatable td .badge {
  font-size: 10.5px;
  padding: 3px 8px;
  letter-spacing: 0.04em;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
#datatable td.num .muted-dash {
  color: var(--ink-mute);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.tool-cell { font-family: var(--mono); font-size: 12px; max-width: 220px; }

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
/* Credibility badges: larger, brand-native. Verified = deep indigo (headline weight),
   Reported = slate blue (mid), Inferred = cool gray (soft). */
td .badge.cred-Verified,
td .badge.cred-Reported,
td .badge.cred-Inferred {
  font-size: 12px;
  padding: 6px 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.cred-Verified { background: rgba(37, 12, 51, 0.10); color: var(--ffhr-indigo-deep, #250c33); border: 1px solid rgba(37, 12, 51, 0.18); }
.cred-Reported { background: rgba(68, 147, 203, 0.14); color: #2b6ea3; border: 1px solid rgba(68, 147, 203, 0.35); }
.cred-Inferred { background: rgba(146, 134, 153, 0.14); color: var(--ink-mute); border: 1px solid rgba(146, 134, 153, 0.28); }
.pivot-Yes { background: var(--green-soft); color: var(--ink); }
.pivot-Partial { background: var(--amber-soft); color: #2b6ea3; }
.pivot-No { background: var(--red-soft); color: var(--red); }
.pivot-NotDisclosed { background: var(--grey-soft); color: var(--ink-mute); }

.scope-HRfunction { background: var(--plum-soft); color: var(--plum); }
.scope-HRadjacent { background: var(--terracotta-soft); color: #8e3f24; }
.scope-Enterprise { background: var(--slate-soft); color: var(--slate); }
.scope-unknown { background: var(--grey-soft); color: var(--ink-mute); }

.result-count {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- Watch list ---------- */
.watch-section {
  padding: 72px 0;
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
}
.watch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.watch-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 22px 24px;
}
.watch-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px;
}
.watch-first-seen {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  padding: 5px 10px 6px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  cursor: help;
  margin-top: 2px;
}
.watch-first-seen-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1;
}
.watch-first-seen-value {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-strong);
  letter-spacing: 0.02em;
  line-height: 1.15;
}
[data-theme="dark"] .watch-first-seen {
  background: rgba(160, 49, 152, 0.10);
  border-color: var(--rule-strong);
}
.watch-company {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
  flex: 1 1 auto;
  min-width: 0;
}
.watch-company-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.watch-company-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.watch-company-link:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 2px;
}
.watch-company-icon {
  opacity: 0.55;
  transform: translateY(-1px);
  transition: opacity .18s ease;
  flex-shrink: 0;
}
.watch-company-link:hover .watch-company-icon { opacity: 1; }
.watch-industry {
  font-size: 12px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  margin-bottom: 16px;
}
.watch-block { margin-bottom: 12px; }
.watch-block-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.watch-block-value {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.watch-signal {
  background: var(--paper-2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink);
  border-left: 3px solid var(--accent);
}
.watch-source {
  display: inline-block;
  margin-top: 10px;
  font-size: 11.5px;
  font-family: var(--mono);
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  word-break: break-all;
}
.watch-source:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- Timeline tooltip (external, HTML) ---------- */
.timeline-chart-tooltip {
  position: absolute;
  z-index: 40;
  min-width: 260px;
  max-width: 460px;
  background: #171c24;
  color: #fffeff;
  border: 1px solid rgba(160, 49, 152, 0.45);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: 0 12px 34px rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
[data-theme="dark"] .timeline-chart-tooltip {
  background: #1c1130;
  border-color: rgba(160, 49, 152, 0.65);
  box-shadow: 0 14px 38px rgba(0,0,0,0.7);
}
.timeline-chart-tooltip .tt-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c8b6d4;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(245, 239, 225, 0.12);
}
.timeline-chart-tooltip .tt-title-qk { color: #fffeff; }
.timeline-chart-tooltip .tt-title-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.timeline-chart-tooltip .tt-title-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 2px;
}
.timeline-chart-tooltip .tt-row {
  display: grid;
  grid-template-columns: 12px auto auto 1fr;
  gap: 6px;
  align-items: baseline;
  margin: 6px 0;
}
.timeline-chart-tooltip .tt-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  align-self: center;
}
.timeline-chart-tooltip .tt-label {
  font-weight: 500;
  color: #fffeff;
  white-space: nowrap;
}
.timeline-chart-tooltip .tt-label strong { color: #fffeff; }
.timeline-chart-tooltip .tt-sep { color: rgba(245, 239, 225, 0.35); }
.timeline-chart-tooltip .tt-companies { color: #e6dfcd; }
.timeline-chart-tooltip a.tt-company {
  color: #f0b681;
  text-decoration: none;
  border-bottom: 1px dotted rgba(240, 182, 129, 0.5);
  cursor: pointer;
  padding: 0 1px;
}
.timeline-chart-tooltip a.tt-company:hover {
  color: #ffd7a7;
  border-bottom-color: #ffd7a7;
  background: rgba(240, 182, 129, 0.08);
}
.timeline-chart-tooltip .tt-footer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(245, 239, 225, 0.12);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

/* Row flash when jumped-to from tooltip */
@keyframes rowFlash {
  0%   { background-color: rgba(160, 49, 152, 0.28); }
  100% { background-color: transparent; }
}
#tbody tr.row-flash { animation: rowFlash 1.6s ease-out; }

/* ---------- Quiet reversals ---------- */
.reversals-section {
  padding: 72px 0;
  border-top: 1px solid var(--rule);
}
.reversals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 4px;
}
.reversal-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 26px 28px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.reversal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.reversal-company {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--ink);
}
.reversal-meta {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.reversal-type-badge {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-weight: 600;
  flex-shrink: 0;
}
.reversal-type-badge.reversal-full { background: rgba(37, 12, 51, 0.10); color: var(--ink); }
.reversal-type-badge.reversal-partial { background: rgba(160, 49, 152, 0.13); color: var(--accent); }
.reversal-type-badge.reversal-redeploy { background: rgba(63, 76, 92, 0.10); color: var(--slate); }
.reversal-card:has(.reversal-partial) { border-left-color: var(--accent); }
.reversal-card:has(.reversal-redeploy) { border-left-color: var(--slate); }
.reversal-timeline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--paper-2);
  border-radius: var(--radius-sm);
}
.reversal-timeline-cell { flex: 1; }
.reversal-timeline-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin-bottom: 2px;
}
.reversal-timeline-value {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.reversal-arrow {
  color: var(--ink-mute);
  font-size: 16px;
  flex-shrink: 0;
}
.reversal-block {}
.reversal-block-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.reversal-block-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.reversal-quote {
  margin: 0;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  background: rgba(160, 49, 152, 0.05);
  border-radius: 0 4px 4px 0;
}
.reversal-quote p {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 8px;
  font-style: normal;
}
.reversal-quote cite {
  font-style: normal;
  font-size: 11.5px;
  font-family: var(--mono);
  color: var(--ink-mute);
}
.reversal-lesson {
  background: var(--paper-2);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.reversal-lesson-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 6px;
}
.reversal-lesson p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.reversal-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.reversal-sources {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.reversal-source-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.reversal-source-link:hover { border-bottom-color: var(--accent); }

.reversal-share {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
}
.reversal-share-btn {
  appearance: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(160, 49, 152, 0.28);
  background: rgba(160, 49, 152, 0.06);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.reversal-share-btn > svg { display: none; } /* hide legacy inline icons */
.reversal-share-label {
  font-size: 11px;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}
.reversal-share-label svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.85;
}
.reversal-share-meta {
  font-size: 9px;
  letter-spacing: 0.08em;
  opacity: 0.7;
  text-transform: uppercase;
  font-weight: 600;
}
.reversal-share-btn:hover {
  background: rgba(160, 49, 152, 0.14);
  border-color: var(--accent);
  color: var(--accent-strong);
  transform: translateY(-1px);
}
.reversal-share-btn:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}
.reversal-share-btn.is-copied {
  background: var(--accent-strong);
  color: var(--paper);
  border-color: var(--accent-strong);
}
.reversal-share-btn.is-copied .reversal-share-meta { opacity: 1; color: var(--paper); }
[data-theme="dark"] .reversal-share-btn {
  background: rgba(160, 49, 152, 0.14);
  color: var(--paper);
  border-color: rgba(160, 49, 152, 0.42);
}
[data-theme="dark"] .reversal-share-btn:hover {
  background: rgba(160, 49, 152, 0.26);
  border-color: var(--accent);
  color: var(--paper);
}
@media (max-width: 640px) {
  .reversal-share { grid-template-columns: 1fr; }
}

/* When a reversal card is targeted via #anchor, briefly highlight it */
.reversal-card:target {
  border-left-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(160, 49, 152, 0.15);
  animation: reversal-target-pulse 1.6s ease 1;
}
@keyframes reversal-target-pulse {
  0%   { box-shadow: 0 0 0 6px rgba(160, 49, 152, 0.3); }
  100% { box-shadow: 0 0 0 3px rgba(160, 49, 152, 0.15); }
}

@media (max-width: 1080px) {
  .reversals-grid { grid-template-columns: 1fr; }
}

/* ---------- Vendor frequency (Chapter 09 lead-in) ---------- */
.vendor-frequency {
  margin: 0 0 44px;
}
.vendor-frequency-inner {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 32px 32px 28px;
  box-shadow: 0 1px 2px rgba(37, 12, 51, 0.03);
}
.vendor-frequency-head {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.vendor-frequency-head .kicker { margin-bottom: 6px; }
.vendor-frequency-head h3 {
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  font-size: 26px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 10px;
  font-weight: 600;
}
.vendor-frequency-sub {
  color: var(--body);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  max-width: 720px;
}
.vendor-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.vendor-row {
  display: grid;
  grid-template-columns: minmax(220px, 260px) 1fr;
  gap: 20px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(146, 134, 153, 0.05);
  align-items: start;
}
.vendor-row:hover {
  background: rgba(160, 49, 152, 0.06);
}
.vendor-row-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.vendor-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4493cb, #a03198);
  color: #fffeff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.vendor-name {
  color: var(--ink);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.3;
}
.vendor-row-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.vendor-companies {
  color: var(--body);
  font-size: 13.5px;
  line-height: 1.5;
}
.vendor-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.vendor-bucket {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  color: var(--body);
  background: var(--paper);
}
.vendor-bucket-hrfunction {
  border-color: rgba(160, 49, 152, 0.35);
  color: #a03198;
  background: rgba(160, 49, 152, 0.06);
}
.vendor-bucket-hradjacent {
  border-color: rgba(68, 147, 203, 0.4);
  color: #2f6f9c;
  background: rgba(68, 147, 203, 0.06);
}
.vendor-bucket-enterpriseworkforce {
  border-color: rgba(37, 12, 51, 0.25);
  color: var(--ink);
  background: rgba(37, 12, 51, 0.04);
}
.vendor-reversal-flag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #b45309;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.vendor-undisclosed {
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px dashed var(--rule);
  border-radius: var(--radius-md);
  background: rgba(146, 134, 153, 0.04);
}
.vendor-undisclosed-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}
.vendor-undisclosed-list {
  color: var(--body);
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 8px;
}
.vendor-undisclosed-note {
  color: var(--body);
  font-size: 13px;
  line-height: 1.55;
  font-style: normal;
  opacity: 0.85;
}
@media (max-width: 720px) {
  .vendor-frequency-inner { padding: 22px 18px 20px; }
  .vendor-frequency-head h3 { font-size: 22px; }
  .vendor-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 14px;
  }
  .vendor-row-head { gap: 10px; }
  .vendor-rank { min-width: 30px; height: 26px; font-size: 13px; }
  .vendor-name { font-size: 15px; }
}

/* Board / Investor lens chip */
.persona-tab-board {
  border-color: rgba(160, 49, 152, 0.4);
}
.persona-tab-board.active {
  background: linear-gradient(135deg, #4493cb, #a03198);
  color: #fffeff;
  border-color: transparent;
}

/* ---------- Glossary ---------- */
.glossary-section { padding: 72px 0; }
.glossary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.glossary-item {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 22px 24px;
}
.glossary-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 4px;
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
}
.glossary-vendor {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  font-weight: 400;
}
.glossary-desc {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 8px 0 0;
}
.glossary-companies {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.glossary-companies strong { color: var(--accent); font-weight: 500; }

/* ---------- Insights ---------- */
.insights {
  padding: 72px 0;
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.insight {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.insight-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}
.insight h3 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  line-height: 1.2;
}
.insight p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ---------- CTA / Subscribe ---------- */
.cta-section { padding: 72px 0; }
.cta-card {
  background: var(--ffhr-deep-indigo);
  color: var(--ffhr-off-white);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-card::before,
.cta-card::after {
  content: "";
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.cta-card::before {
  top: -180px; right: -140px;
  background: rgba(68, 147, 203, 0.14);
}
.cta-card::after {
  bottom: -200px; left: -160px;
  background: rgba(160, 49, 152, 0.14);
}
.cta-card .kicker {
  color: transparent;
  background: var(--ffhr-gradient-h);
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: 16px;
}
.cta-card h2 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 36px);
  margin: 0 auto 16px;
  letter-spacing: -0.01em;
  max-width: 28ch;
  line-height: 1.2;
  position: relative;
}
.cta-card p {
  font-size: 16px;
  color: #d6d2ca;
  max-width: 50ch;
  margin: 0 auto 28px;
  line-height: 1.55;
  position: relative;
}
.cta-btn {
  display: inline-block;
  background: var(--ffhr-gradient);
  color: var(--ffhr-off-white);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  position: relative;
  box-shadow: var(--shadow-cta);
}
.cta-btn:hover { opacity: 0.88; transform: translateY(-2px); box-shadow: var(--shadow-cta-hv); }
.cta-note {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #9aa0a8 !important;
  margin-top: 18px !important;
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 48px 0;
  background: var(--ffhr-indigo-deep);
  color: var(--ffhr-off-white);
  position: relative;
  overflow: hidden;
}
.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.site-footer::before {
  top: -220px; right: -180px;
  background: rgba(68, 147, 203, 0.13);
}
.site-footer::after {
  bottom: -220px; left: -180px;
  background: rgba(160, 49, 152, 0.11);
}
.site-footer .container { position: relative; z-index: 1; }
.site-footer .brand-name { color: var(--ffhr-off-white); margin-bottom: 8px; font-size: 16px; }
.footer-note { font-size: 13px; color: #d8d0e0; max-width: 65ch; margin: 0; line-height: 1.55; }
.footer-note.editorial-standards {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 254, 255, 0.12);
  font-size: 12.5px;
  color: #c9c0d3;
}
.footer-note.editorial-standards strong { color: var(--paper); font-weight: 500; }
.footer-note.editorial-standards a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-note.editorial-standards a:hover,
.footer-note.editorial-standards a:focus-visible { color: #ffd4a8; }
.footer-grid {
  display: flex; justify-content: space-between; gap: 32px; align-items: flex-start;
}
.footer-meta {
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: #9aa0a8; text-align: right;
}
.footer-meta div + div { margin-top: 6px; }
.footer-meta div:last-child { color: var(--accent-on-dark); }

/* ---------- Detail dialog ---------- */
dialog {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  max-width: 760px;
  width: 92%;
  color: var(--ink);
}
dialog::backdrop { background: rgba(20, 23, 26, 0.5); }
.detail-inner { padding: 36px 40px 40px; position: relative; }
.detail-close {
  position: absolute; top: 14px; right: 16px;
  background: transparent; border: none; font-size: 28px;
  cursor: pointer; color: var(--ink-mute); width: 36px; height: 36px;
  border-radius: 50%; line-height: 1;
}
.detail-close:hover { background: var(--paper-2); color: var(--ink); }
.detail-company {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.detail-industry { color: var(--ink-mute); font-size: 14px; margin-bottom: 8px; }
.detail-badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 32px; margin-bottom: 22px; }
.detail-field-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.detail-field-value { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.detail-block { margin-bottom: 20px; }
.detail-block h4 {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  margin: 0 0 8px;
  font-weight: 500;
}
.detail-block p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.detail-role-insight {
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.55;
}
.detail-credibility {
  background: var(--paper-2);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  border-left: 3px solid var(--rule-strong);
}
.detail-source {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  word-break: break-all;
}
.detail-source:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  background: var(--ffhr-gradient);
  color: #fffeff;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  z-index: 1000;
  box-shadow: 0 12px 32px rgba(37, 12, 51, 0.35);
  animation: toastIn .22s ease-out;
  display: inline-flex; align-items: center; gap: 10px;
}
.toast[hidden] { display: none !important; }
.toast-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(255, 254, 255, 0.22);
  font-size: 13px;
  font-weight: 800;
}
.toast-msg { letter-spacing: 0.01em; }
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .kpi-runrate { grid-column: span 3; }
  .runrate-grid { grid-template-columns: repeat(4, 1fr); }
  .hero-split { gap: 48px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .hero-runrate-card { padding: 28px 24px 24px; }
  .hero-runrate-num { font-size: 22px; }
}
@media (max-width: 960px) {
  .hero-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media (max-width: 1080px) {
  .quote-cards { grid-template-columns: 1fr 1fr; }
  .watch-grid { grid-template-columns: 1fr 1fr; }
  .ceo-quotes { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .container { padding: 0 20px; }
  .hero { padding: 56px 0 40px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .kpi-runrate { grid-column: span 2; }
  .kpi-num { font-size: 42px; }
  .hero-runrate-card { padding: 24px 20px 20px; }
  .hero-runrate-num { font-size: 20px; }
  .hero-runrate-title { font-size: 14px; margin-bottom: 16px; }
  .hero-runrate-foot { font-size: 13px; }
  .charts-grid { grid-template-columns: 1fr; }
  .quote-cards { grid-template-columns: 1fr; }
  .watch-grid { grid-template-columns: 1fr; }
  .glossary-grid { grid-template-columns: 1fr; }
  .insight-grid { grid-template-columns: 1fr; }
  /* Keep header horizontal on tablet/mobile so the meta pills stay to the right */
  /* of the logo. Pill sizing is compacted further inside the 640px breakpoint. */
  .header-grid { flex-direction: row; align-items: center; gap: 12px; flex-wrap: nowrap; }
  .footer-grid { flex-direction: column; }
  .footer-meta { text-align: left; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-inner { padding: 28px 24px; }
  .cta-card { padding: 40px 28px; }

  /* Table becomes a card list on small screens. Row = card, cell = label/value pair.
     Preserves the underlying <table> markup so sort, filter, and row-click all still work. */
  .table-wrap {
    max-height: none;
    overflow: visible;
    border: none;
    background: transparent;
  }
  #datatable { min-width: 0; width: 100%; display: block; font-size: 14px; }
  #datatable thead { display: none; }
  #datatable tbody { display: block; }
  #datatable tbody tr {
    display: block;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    padding: 14px 16px 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  }
  #datatable tbody tr:last-child { margin-bottom: 0; border-bottom: 1px solid var(--rule); }
  #datatable tbody tr:hover { background: var(--paper); }
  #datatable tbody tr:active { background: var(--accent-soft); }
  #datatable td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border: none;
    color: var(--ink-soft);
    max-width: none;
  }
  #datatable td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-family: var(--mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-mute);
    padding-top: 2px;
  }
  /* Company cell becomes card header. Hide its label and show a bigger, bolder value. */
  #datatable td.company {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--rule);
    white-space: normal;
  }
  #datatable td.company::before { display: none; }
  /* Industry: label on left, parent + sub stacked on right */
  #datatable td.industry-cell {
    display: grid !important;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 4px 12px;
    max-width: none;
    flex-direction: initial;
  }
  #datatable td.industry-cell::before {
    grid-column: 1; grid-row: 1 / span 2;
    align-self: start;
  }
  #datatable td.industry-cell .industry-parent {
    grid-column: 2; grid-row: 1;
    text-align: right;
    color: var(--ink);
    font-weight: 500;
  }
  #datatable td.industry-cell .industry-sub {
    grid-column: 2; grid-row: 2;
    text-align: right;
    font-family: var(--mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-mute);
  }
  /* Right-align numeric */
  #datatable td.num { justify-content: space-between; }
  /* Function and AI tool can wrap freely */
  #datatable td.function-cell,
  #datatable td.tool-cell {
    align-items: flex-start;
    text-align: right;
  }
  #datatable td.function-cell::before,
  #datatable td.tool-cell::before { padding-top: 3px; }
  /* Badges align right in their row */
  #datatable td .badge { margin-left: auto; }

  /* Tiny scroll hint above the (now vertical) list */
  #result-count { font-size: 12px; }
}
@media (max-width: 520px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .kpi-runrate { grid-column: span 2; }
  .runrate-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .runrate-num { font-size: 18px; }
  .controls { padding: 14px; }
  .persona-tabs { gap: 6px; }
  .persona-tab { font-size: 12px; padding: 8px 12px; }
}

/* ---------- Floating "you're filtered" pill ---------- */
.filter-status-pill {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 18px;
  background: var(--ffhr-indigo-deep);
  color: #fffeff;
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(37, 12, 51, 0.28), 0 0 0 1px rgba(160, 49, 152, 0.35);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  max-width: min(88vw, 480px);
  animation: filter-pill-in 0.28s ease;
}
.filter-status-pill.is-visible { display: inline-flex; }
.filter-status-pill-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #c9c0d3;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(160, 49, 152, 0.22);
}
.filter-status-pill-tags {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.filter-status-pill-tag {
  color: #fffeff;
  font-weight: 600;
}
.filter-status-pill-tag + .filter-status-pill-tag::before {
  content: "\00b7";
  margin: 0 6px 0 -2px;
  color: #928699;
}
.filter-status-pill-clear {
  border: 1px solid rgba(255, 254, 255, 0.28);
  background: transparent;
  color: #fffeff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.filter-status-pill-clear:hover {
  background: #fffeff;
  color: var(--ffhr-indigo-deep);
  border-color: #fffeff;
}
@keyframes filter-pill-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
  .filter-status-pill {
    bottom: 12px; right: 12px; left: 12px;
    justify-content: center;
    max-width: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .filter-status-pill { animation: none; }
}

/* ---------- Inline case-study row expansion ---------- */
/* Data row: gets a small chevron in the company column that rotates on expand */
tbody tr.data-row td.company { position: relative; padding-left: 40px; }
.company-chev {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--accent-strong);
  border-bottom: 2px solid var(--accent-strong);
  transform-origin: 60% 60%;
  transition: transform 0.18s ease;
  opacity: 0.55;
}
.company-chev {
  /* Chevron pointing right by default */
  transform: translateY(-50%) rotate(-45deg);
}
tbody tr.data-row.is-expanded .company-chev {
  transform: translateY(-50%) rotate(45deg);
  opacity: 1;
}
tbody tr.data-row.is-expanded {
  background: var(--paper-2);
}
tbody tr.data-row.is-expanded td.company {
  color: var(--ffhr-indigo-deep);
}

/* Case row: the injected sibling <tr> that spans all columns */
tr.case-row { background: var(--paper-2); }
tr.case-row td.case-cell {
  padding: 0;
  border-bottom: 1px solid var(--rule);
}
.case-card {
  padding: 32px 28px 28px 40px;
  border-left: 3px solid transparent;
  border-image: var(--ffhr-gradient-h) 1;
  animation: case-in 0.24s ease;
}
@keyframes case-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .case-card { animation: none; }
}

.case-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.case-header-left { min-width: 0; }
.case-title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 24px;
  color: var(--ffhr-indigo-deep);
  margin: 0 0 6px;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.case-meta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-mute);
}
.case-header-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.case-collapse {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: var(--ink-mute);
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.case-collapse:hover { background: var(--ffhr-indigo-deep); color: #fffeff; border-color: var(--ffhr-indigo-deep); }

.case-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 32px;
  margin-bottom: 24px;
}
.case-main { min-width: 0; }
.case-side { min-width: 0; }

.case-block { margin-bottom: 20px; }
.case-block-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-strong);
  margin-bottom: 8px;
}
.case-block-body {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.case-block-body-mono { color: var(--ink-mute); font-size: 13px; }

/* Case timeline: horizontal step strip */
.case-timeline {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  margin-top: 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.case-timeline-single { grid-template-columns: 1fr; }
.case-timeline-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.case-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ffhr-slate);
  margin-bottom: 6px;
  box-shadow: 0 0 0 3px rgba(68, 147, 203, 0.14);
}
.case-timeline-step-reversal .case-timeline-dot {
  background: var(--ffhr-violet);
  box-shadow: 0 0 0 3px rgba(160, 49, 152, 0.16);
}
.case-timeline-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-mute);
}
.case-timeline-value {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.case-timeline-connector {
  height: 2px;
  background: linear-gradient(90deg, var(--ffhr-slate), var(--ffhr-violet));
  border-radius: 2px;
  opacity: 0.55;
  position: relative;
}
.case-timeline-connector::after {
  content: "→";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: var(--ffhr-violet);
  font-weight: 700;
  background: var(--paper);
  padding: 0 4px;
  line-height: 1;
}

/* Case side: role-insight callout tinted by credibility */
.case-insight {
  padding: 18px 20px;
  border-radius: 10px;
  border-left: 3px solid;
  margin-bottom: 16px;
}
.case-insight-Verified {
  background: rgba(37, 12, 51, 0.05);
  border-left-color: var(--ffhr-indigo-deep);
}
.case-insight-Reported {
  background: rgba(68, 147, 203, 0.08);
  border-left-color: var(--ffhr-slate);
}
.case-insight-Inferred {
  background: rgba(146, 134, 153, 0.10);
  border-left-color: var(--ffhr-gray);
}
.case-insight-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-strong);
  margin-bottom: 8px;
}
.case-insight-body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

/* Case stats: mini stat grid on the side */
.case-stats {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.case-stat { display: flex; flex-direction: column; gap: 2px; }
.case-stat-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-mute);
}
.case-stat-value {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.case-stat-value-mono { font-family: var(--mono); font-size: 12.5px; font-weight: 500; }

/* Case quote: inline pull-quote inside the card */
.case-quote {
  position: relative;
  padding: 20px 24px 20px 60px;
  margin: 8px 0 20px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.case-quote-mark {
  position: absolute;
  top: 4px; left: 20px;
  font-family: var(--sans);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  background: var(--ffhr-gradient-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.5;
}
.case-quote-body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 12px;
}
.case-quote-attribution {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
}
.case-quote-attribution strong {
  color: var(--accent-strong);
  font-weight: 700;
}

/* Case footer: sources + actions */
.case-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
}
.case-sources {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.case-sources-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
.case-source-pill {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent-strong);
  padding: 5px 10px;
  border: 1px solid rgba(160, 49, 152, 0.30);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.case-source-pill:hover {
  background: var(--ffhr-indigo-deep);
  color: #fffeff;
  border-color: var(--ffhr-indigo-deep);
}
.case-source-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
}
.case-footer-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.case-reversal-link {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ffhr-violet);
  text-decoration: none;
  border-bottom: 1px solid rgba(160, 49, 152, 0.35);
  padding-bottom: 1px;
}
.case-reversal-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.case-cite-btn {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.case-cite-btn:hover { background: var(--ffhr-indigo-deep); color: #fffeff; border-color: var(--ffhr-indigo-deep); }
.case-cite-btn.is-copied { background: var(--ffhr-violet); color: #fffeff; border-color: var(--ffhr-violet); }

@media (max-width: 900px) {
  .case-card { padding: 24px 20px 20px 24px; }
  .case-grid { grid-template-columns: 1fr; gap: 24px; }
  .case-header { flex-direction: column; align-items: stretch; }
  .case-header-right { align-self: flex-start; }
  .case-footer { flex-direction: column; align-items: stretch; }
  .case-footer-actions { justify-content: flex-end; }
}
@media (max-width: 820px) {
  /* On the mobile card layout, the row itself is a card. Hide the chev, expand becomes a bottom-appended card. */
  tbody tr.data-row td.company { padding-left: 22px; }
  .company-chev { display: none; }
  tr.case-row td.case-cell { padding: 0; }
  .case-card { padding: 20px 16px 16px; border-left-width: 3px; }
  .case-timeline { grid-template-columns: 1fr; gap: 8px; }
  .case-timeline-connector { display: none; }
}
/* Ensure case-row doesn't inherit hover tint from tbody rules */
tr.case-row:hover { background: var(--paper-2); cursor: default; }
tr.case-row { cursor: default; }

/* ---------- Reading meter chip (top-right, blurred, state-driven) ---------- */
.reading-meter {
  position: fixed;
  top: 88px;   /* below sticky header */
  right: 20px;
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  background: rgba(37, 12, 51, 0.86);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  color: #fffeff;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(37, 12, 51, 0.22), 0 0 0 1px rgba(160, 49, 152, 0.30);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  /* Tighter max width so the pill never drifts across right-side card content. */
  max-width: min(60vw, 300px);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
/* On wide viewports, pin the pill to the outer margin (right of the 1240px */
/* container) so it never overlaps card content. */
@media (min-width: 1440px) {
  .reading-meter {
    right: max(20px, calc((100vw - 1240px) / 2 - 12px));
    max-width: 260px;
  }
}
.reading-meter.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.reading-meter-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ffhr-gradient-h);
  flex-shrink: 0;
  position: relative;
}
.reading-meter-icon::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: rgba(37, 12, 51, 0.86);
}
.reading-meter-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(#a03198 var(--meter-pct, 0%), transparent 0);
}
.reading-meter-body {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.reading-meter-chapter {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #c9a5d6;
}
.reading-meter-title {
  color: #fffeff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.reading-meter-pct {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: #c9a5d6;
  margin-left: 4px;
}
.reading-meter-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ffhr-gradient-h);
  color: #fffeff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  text-decoration: none;
}
@media (max-width: 640px) {
  /* Mobile: hide the floating pill entirely. The 2px .reading-progress bar */
  /* at the top of the viewport already communicates scroll progress without */
  /* blocking content. The pill's information density is a desktop luxury. */
  .reading-meter { display: none !important; }
}

/* ---------- Chart-controls collapsible (mobile only) ---------- */
/* Desktop: details acts as a transparent wrapper. Summary is hidden, controls */
/* always visible via the ::details-content override. Mobile: summary becomes */
/* a tap-to-expand button; controls stay hidden until the reader opens them. */
.chart-controls-collapse { display: block; margin: 0 0 12px; }
/* Desktop: force controls visible even when <details> is closed */
.chart-controls-collapse .chart-controls { display: flex; }
.chart-controls-summary {
  display: none;
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--accent);
  padding: 10px 14px;
  border: 1px dashed var(--rule-strong);
  border-radius: 10px;
  background: rgba(160, 49, 152, 0.04);
  margin-bottom: 10px;
  position: relative;
}
.chart-controls-summary::-webkit-details-marker { display: none; }
.chart-controls-summary::after {
  content: "+";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 400;
  transition: transform 0.2s ease;
}
.chart-controls-collapse[open] .chart-controls-summary::after {
  content: "\00D7";
  font-size: 18px;
}
@media (max-width: 640px) {
  .chart-controls-summary { display: block; }
  .chart-controls-collapse:not([open]) .chart-controls { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reading-meter { transition: none; }
}

/* ---------- Projection caption (only visible when Projected view active) ---------- */
.projection-caption {
  display: none;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin: 16px 0 4px;
  background: rgba(160, 49, 152, 0.06);
  border-left: 3px solid var(--ffhr-violet);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}
.projection-caption.is-visible { display: flex; }
.projection-caption-label {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ffhr-violet);
  padding: 3px 8px;
  border: 1px solid rgba(160, 49, 152, 0.35);
  border-radius: 999px;
}
.projection-caption-body { color: var(--ink-soft); }

/* =========================================================
   V7 · Persona lens: eyebrow swap animation + lens indicator
   ========================================================= */
.kicker[data-kicker] {
  display: inline-block;
  transition: color 220ms ease;
}
.kicker.is-lens-swap {
  animation: lens-swap 340ms ease-out;
}
@keyframes lens-swap {
  0%   { opacity: 0; transform: translateY(-3px); letter-spacing: 0.16em; }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); letter-spacing: 0.14em; }
}
@media (prefers-reduced-motion: reduce) {
  .kicker.is-lens-swap { animation: none; }
}

/* When a non-'all' lens is active, tint the kickers to hint that this is
   personalized content. Uses the signature gradient at low intensity. */
html[data-lens]:not([data-lens="all"]):not([data-lens=""]) .kicker[data-kicker] {
  background: linear-gradient(135deg, #4493cb 0%, #a03198 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* A small "Now viewing" chip stitched to the persona-summary card */
.persona-summary-inner::before {
  content: attr(data-lens-label);
  display: inline-block;
  margin-right: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #4493cb 0%, #a03198 100%);
  color: #fffeff;
  vertical-align: 2px;
}
.persona-summary[hidden] { display: none; }

/* =========================================================
   V7 · Mobile sort chips (hidden above 720px)
   ========================================================= */
.mobile-sort { display: none; }
@media (max-width: 720px) {
  .mobile-sort {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0 12px;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(68, 147, 203, 0.06) 0%, rgba(160, 49, 152, 0.06) 100%);
    border: 1px solid var(--rule);
    border-radius: 12px;
  }
  .mobile-sort-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
  .mobile-sort-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .mobile-sort-chip {
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    background: var(--card-bg);
    border: 1px solid var(--rule);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .mobile-sort-chip:hover { border-color: #a03198; }
  .mobile-sort-chip.is-active {
    color: #fffeff;
    background: linear-gradient(135deg, #4493cb 0%, #a03198 100%);
    border-color: transparent;
  }
  .mobile-sort-chip:focus-visible {
    outline: 2px solid #a03198;
    outline-offset: 2px;
  }
}
[data-theme="dark"] .mobile-sort {
  background: linear-gradient(180deg, rgba(68, 147, 203, 0.10) 0%, rgba(160, 49, 152, 0.10) 100%);
  border-color: var(--rule);
}

/* =========================================================
   V7 · Credibility legend + popover
   ========================================================= */
.cred-legend {
  position: relative;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 18px 0 20px;
  padding: 12px 14px;
  border: 1px solid rgba(37, 12, 51, 0.10);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
}
.cred-legend-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #250c33;
}
.cred-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(37, 12, 51, 0.12);
  background: #fffeff;
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 12.5px;
  font-weight: 500;
  color: #250c33;
  cursor: pointer;
  transition: border-color 180ms ease, transform 140ms ease, box-shadow 180ms ease;
}
.cred-legend-chip:hover,
.cred-legend-chip[aria-expanded="true"] {
  border-color: rgba(160, 49, 152, 0.45);
  box-shadow: 0 4px 14px -8px rgba(160, 49, 152, 0.5);
  transform: translateY(-1px);
}
.cred-legend-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
}
.cred-dot-verified { background: #4493cb; }
.cred-dot-reported { background: #a03198; }
.cred-dot-inferred { background: #928699; }
.cred-legend-count {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(37, 12, 51, 0.08);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  color: #250c33;
}
.cred-legend-hint {
  margin-left: auto;
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 11.5px;
  font-style: normal;
  color: #928699;
}

/* Inline methodology (persistent, collapsed by default) */
.methodology-inline {
  margin: 10px 0 18px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: rgba(160, 49, 152, 0.02);
  transition: background .2s ease, border-color .2s ease;
}
.methodology-inline[open] {
  background: var(--paper);
  border-color: rgba(160, 49, 152, 0.24);
}
.methodology-inline-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.methodology-inline-summary::-webkit-details-marker { display: none; }
.methodology-inline-summary:hover { color: var(--accent); }
.methodology-inline-summary:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  border-radius: 8px;
}
.methodology-inline-caret {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--accent);
  transition: transform .2s ease;
  line-height: 1;
}
.methodology-inline[open] .methodology-inline-caret {
  transform: rotate(45deg);
}
.methodology-inline-body {
  padding: 4px 18px 16px;
  border-top: 1px solid var(--rule);
  margin-top: 2px;
}
.methodology-inline-body p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 10px 0 0;
}
.methodology-inline-body p strong {
  color: var(--ink);
  font-weight: 700;
}
.methodology-inline-note {
  font-size: 12.5px !important;
  color: var(--ink-mute) !important;
  padding-top: 8px;
  margin-top: 12px !important;
  border-top: 1px dashed var(--rule);
}
.methodology-inline-note a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.methodology-inline-note a:hover { border-bottom-color: var(--accent); }
[data-theme="dark"] .methodology-inline {
  background: rgba(255, 254, 255, 0.02);
}
[data-theme="dark"] .methodology-inline[open] {
  background: rgba(255, 254, 255, 0.04);
}

/* Popover panel */
.cred-pop {
  position: absolute;
  z-index: 60;
  max-width: 380px;
  min-width: 260px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(37, 12, 51, 0.12);
  background: #fffeff;
  box-shadow: 0 18px 38px -14px rgba(37, 12, 51, 0.35);
  animation: cred-pop-in 180ms ease-out;
}
.cred-pop[hidden] { display: none; }
@keyframes cred-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cred-pop-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.cred-pop-count {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #928699;
}
.cred-pop-body {
  margin: 0;
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 13px;
  line-height: 1.55;
  color: #4a3f52;
}

/* Make credibility badges look clickable */
.badge.cred-Verified,
.badge.cred-Reported,
.badge.cred-Inferred {
  cursor: help;
  transition: box-shadow 160ms ease, transform 140ms ease;
}
.badge.cred-Verified:hover,
.badge.cred-Reported:hover,
.badge.cred-Inferred:hover {
  box-shadow: 0 3px 10px -6px rgba(37, 12, 51, 0.55);
  transform: translateY(-1px);
}
@media (max-width: 640px) {
  .cred-legend-hint { display: none; }
  .cred-legend { padding: 10px 12px; }
  /* On mobile: pin the popover to the legend's full width so it never overflows */
  .cred-pop {
    left: 0 !important;
    right: 0;
    max-width: none;
    min-width: 0;
    width: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cred-legend-chip, .badge.cred-Verified, .badge.cred-Reported, .badge.cred-Inferred {
    transition: none;
  }
  .cred-pop { animation: none; }
}

/* =========================================================
   V7 · Chapter navigator rail
   ========================================================= */
.chapter-rail {
  position: fixed;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 8px;
  border-radius: 999px;
  background: rgba(37, 12, 51, 0.04);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(37, 12, 51, 0.06);
  transition: opacity 240ms ease;
}
.chapter-rail[hidden] { display: none; }
.chapter-rail-dot {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.chapter-rail-mark {
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  transition: width 200ms ease, height 200ms ease, background 220ms ease, border-color 220ms ease, transform 200ms ease;
  border: 1.5px solid rgba(37, 12, 51, 0.28);
  background: transparent;
}
.chapter-rail-dot.is-past .chapter-rail-mark {
  background: rgba(37, 12, 51, 0.42);
  border-color: transparent;
}
.chapter-rail-dot.is-active .chapter-rail-mark {
  background: linear-gradient(135deg, #4493cb 0%, #a03198 100%);
  border-color: transparent;
  width: 12px; height: 12px;
  box-shadow: 0 0 0 3px rgba(160, 49, 152, 0.12);
}
.chapter-rail-dot.is-future .chapter-rail-mark {
  background: transparent;
  border-color: rgba(37, 12, 51, 0.22);
}
.chapter-rail-dot:hover .chapter-rail-mark {
  transform: scale(1.15);
  border-color: rgba(160, 49, 152, 0.5);
}

/* Tooltip: appears on hover to the left of the dot */
.chapter-rail-tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  padding: 5px 10px;
  border-radius: 6px;
  background: #250c33;
  color: #fffeff;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
}
.chapter-rail-dot:hover .chapter-rail-tip,
.chapter-rail-dot:focus-visible .chapter-rail-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Show only when the viewport is wide enough for the rail to sit clearly
   outside the 1240px container margin. Below 1400 the rail can crash into
   the credibility doughnut legend on the right side. */
@media (max-width: 1399px) {
  .chapter-rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-rail-mark, .chapter-rail-tip { transition: none; }
}

/* ============================================================
   V8 FEATURE UPGRADES
   Reversal Watch, Week Signal, Compare, Timeline view,
   Density + View toggles, Dark mode, Theme toggle, Highlight pulse
   ============================================================ */

/* ---------- Dark theme variable overrides ---------- */
:root {
  --page-bg: var(--paper);
  --card-bg: var(--paper);
  --card-bg-2: var(--paper-2);
  --stripe: #fbf8fd;
}
[data-theme="dark"] {
  --ink:         #f5eef5;
  --ink-soft:    #e7dcec;
  --ink-mute:    #c9becf;
  --ink-faint:   #a596ad;
  --paper:       #1a0a24;
  --paper-2:     #26102f;
  --paper-3:     #331643;
  --rule:        #3d2447;
  --rule-strong: #4d2f57;

  --accent:         #c76ac0;
  --accent-strong:  #d488cd;
  --accent-on-dark: #6fb2e0;
  --accent-soft:    rgba(199, 106, 192, 0.16);

  --green:      #f5eef5;
  --green-soft: rgba(245, 238, 245, 0.12);
  --amber:      #e0a44a;
  --amber-soft: rgba(111, 178, 224, 0.18);
  --grey-soft:  rgba(165, 150, 173, 0.20);

  --slate:      #b79ec7;
  --slate-soft: rgba(183, 158, 199, 0.16);
  --plum:       #d488cd;
  --plum-soft:  rgba(212, 136, 205, 0.16);
  --terracotta: #6fb2e0;
  --terracotta-soft: rgba(111, 178, 224, 0.16);

  --page-bg: #140719;
  --card-bg: #1f0d2a;
  --card-bg-2: #26102f;
  --stripe: #23102e;
}
[data-theme="dark"] body { background: var(--page-bg); }
[data-theme="dark"] .site-header { background: rgba(20, 7, 25, 0.86); }
[data-theme="dark"] img.logo-mark { filter: brightness(1.4) saturate(1.05); }
[data-theme="dark"] img.logo-lockup { filter: drop-shadow(0 0 14px rgba(160, 49, 152, 0.25)); }
html { transition: background-color .3s ease; }
body { transition: background-color .3s ease, color .3s ease; }

/* ---------- Theme toggle button ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 34px;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-moon { display: inline; }

/* ---------- Reversal Watch mini-strip ---------- */
/* ===== Methodology primer ("How to read this briefing") ===== */
.primer-section { padding: 34px 0 6px; }
.primer {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
  overflow: hidden;
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.primer[open] {
  border-color: var(--ink-mute);
  box-shadow: 0 8px 24px -18px rgba(37, 12, 51, 0.35);
}
.primer-summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 16px;
  user-select: none;
}
.primer-summary::-webkit-details-marker { display: none; }
.primer-summary::marker { display: none; }
.primer-kicker {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent, #7a41b5);
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
}
.primer-title {
  font-family: var(--serif, var(--display));
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.primer-chev {
  width: 12px; height: 12px;
  border-right: 2px solid var(--ink-mute);
  border-bottom: 2px solid var(--ink-mute);
  transform: rotate(45deg);
  transition: transform 220ms ease;
  margin-top: -4px;
}
.primer[open] .primer-chev { transform: rotate(-135deg); margin-top: 3px; }
.primer-body {
  padding: 4px 22px 22px;
  border-top: 1px solid var(--line);
}
.primer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 28px;
  margin-top: 18px;
}
.primer-card { }
.primer-card-h {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin-bottom: 8px;
}
.primer-card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0;
}
.primer-card strong { color: var(--ink); font-weight: 600; }
.primer-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #7a41b5;
  background: rgba(160, 49, 152, 0.08);
  border: 1px solid rgba(160, 49, 152, 0.25);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.primer-card-cta:hover {
  background: rgba(160, 49, 152, 0.14);
  border-color: rgba(160, 49, 152, 0.45);
}
.primer-card-cta:focus-visible {
  outline: 2px solid #a03198;
  outline-offset: 2px;
}
.primer-card-cta-arrow { transition: transform 0.15s ease; }
.primer-card-cta:hover .primer-card-cta-arrow { transform: translateX(2px); }
[data-theme="dark"] .primer-card-cta {
  color: #d4a4e6;
  background: rgba(212, 164, 230, 0.10);
  border-color: rgba(212, 164, 230, 0.30);
}
[data-theme="dark"] .primer-card-cta:hover {
  background: rgba(212, 164, 230, 0.18);
  border-color: rgba(212, 164, 230, 0.55);
}
.cred-Verified-text { color: #1f7a4d; }
.cred-Reported-text { color: #7a41b5; }
.cred-Inferred-text { color: #b56a1f; }
@media (max-width: 720px) {
  .primer-section { padding: 24px 0 4px; }
  .primer-summary { padding: 14px 16px; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 6px; }
  .primer-kicker { grid-column: 1 / -1; justify-self: start; }
  .primer-title { font-size: 17px; }
  .primer-body { padding: 4px 16px 18px; }
  .primer-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 14px; }
  .primer-card p { font-size: 14px; }
}
[data-theme="dark"] .primer {
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
}
[data-theme="dark"] .cred-Verified-text { color: #6bd39b; }
[data-theme="dark"] .cred-Reported-text { color: #c48be0; }
[data-theme="dark"] .cred-Inferred-text { color: #e0b878; }

.reversal-watch { padding: 46px 0 6px; }
.reversal-watch-head { margin-bottom: 20px; }
.reversal-watch-kicker {
  font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--accent-strong); margin-bottom: 8px;
}
.reversal-watch-h {
  font-family: var(--serif); font-size: 1.55rem; font-weight: 800;
  color: var(--ink); margin: 0 0 6px; letter-spacing: -0.01em;
}
.reversal-watch-sub { color: var(--ink-mute); font-size: var(--fs-sm); margin: 0; max-width: 60ch; }
.reversal-watch-strip {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.rw-card {
  position: relative; background: var(--card-bg);
  border: 1px solid var(--rule); border-radius: 12px;
  padding: 18px 16px 16px; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex; flex-direction: column;
}
.rw-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--ffhr-gradient-h);
}
.rw-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(37,12,51,0.12); border-color: var(--rule-strong); }
.rw-badge {
  align-self: flex-start; font-size: 0.66rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-bottom: 10px;
}
.rw-badge.rw-full { background: var(--red-soft); color: var(--red); }
[data-theme="dark"] .rw-badge.rw-full { background: rgba(224,120,90,0.18); color: #e8967d; }
.rw-badge.rw-partial { background: var(--amber-soft); color: var(--slate); }
.rw-badge.rw-rebalance { background: rgba(68, 147, 203, 0.14); color: var(--slate); border: 1px dashed rgba(68, 147, 203, 0.4); }
.rw-company { font-family: var(--serif); font-size: 1.08rem; font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.rw-lesson { color: var(--ink-mute); font-size: 0.86rem; line-height: 1.5; margin: 0 0 14px; flex: 1; }
.rw-link {
  align-self: flex-start; font-size: var(--fs-xs); font-weight: 700; color: var(--accent);
  text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .16s ease;
}
.rw-link:hover { border-bottom-color: var(--accent); }

/* ---------- This Week's Signal ---------- */
.week-signal { padding: 26px 0 10px; }
.week-signal-card {
  position: relative; display: grid; grid-template-columns: 0.9fr 1.4fr; gap: 32px;
  background: var(--card-bg); border: 1px solid var(--rule); border-radius: 16px;
  padding: 30px 32px; overflow: hidden;
}
.week-signal-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--ffhr-gradient);
}
.ws-pill {
  position: absolute; top: 18px; right: 20px; font-size: 0.66rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--accent);
  background: var(--accent-soft); padding: 5px 11px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
}
.ws-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ws-kicker { font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--accent-strong); margin-bottom: 10px; }
.ws-company { font-family: var(--serif); font-size: 2rem; font-weight: 800; color: var(--ink); margin: 0 0 8px; letter-spacing: -0.02em; }
.ws-meta { color: var(--ink-mute); font-size: var(--fs-sm); }
.ws-frame { color: var(--ink); font-size: 1rem; line-height: 1.6; margin: 0 0 18px; align-self: center; }
.ws-right { display: flex; flex-direction: column; justify-content: center; padding-top: 32px; }
.ws-read-btn {
  align-self: flex-start; font-family: var(--serif); font-weight: 700; font-size: var(--fs-sm);
  color: var(--paper); background: var(--ink); border: none; border-radius: 9px;
  padding: 11px 20px; cursor: pointer; transition: transform .16s ease, background .16s ease;
}
.ws-read-btn:hover { transform: translateY(-1px); background: var(--accent-strong); }
[data-theme="dark"] .ws-read-btn { background: var(--accent); color: #140719; }
[data-theme="dark"] .ws-read-btn:hover { background: var(--accent-strong); }

/* ---------- Table view + density toggles ---------- */
.table-toggles { display: flex; gap: 26px; flex-wrap: wrap; margin: 4px 0 18px; align-items: center; }
.table-toggle-group { display: flex; align-items: center; gap: 10px; }
.table-toggle-label { font-size: var(--fs-eyebrow); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--ink-faint); }
.pill-group { display: inline-flex; background: var(--card-bg-2); border: 1px solid var(--rule); border-radius: 999px; padding: 3px; }
.pill-btn {
  font-family: var(--serif); font-size: 0.82rem; font-weight: 600; color: var(--ink-mute);
  background: transparent; border: none; padding: 6px 16px; border-radius: 999px; cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.pill-btn:hover { color: var(--ink); }
.pill-btn.is-active { background: var(--ink); color: var(--paper); }
[data-theme="dark"] .pill-btn.is-active { background: var(--accent); color: #140719; }

/* Density: expanded row scope note */
.row-scope-note {
  display: none; color: var(--ink-faint); font-size: 0.76rem; line-height: 1.4;
  margin-top: 3px; max-width: 46ch;
}
[data-density="expanded"] .data-row .row-scope-note { display: block; }

/* ---------- Timeline view ---------- */
.timeline-view { margin-top: 8px; }
.timeline-view-legend { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 14px; }
.tv-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--ink-mute); }
.tv-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.timeline-canvas-wrap { position: relative; width: 100%; }
#timelineViewCanvas { width: 100%; display: block; cursor: default; }
.timeline-tooltip {
  position: absolute; pointer-events: none; z-index: 20;
  background: var(--ink); color: var(--paper); font-size: 0.76rem; line-height: 1.4;
  padding: 8px 11px; border-radius: 8px; max-width: 220px;
  box-shadow: 0 8px 24px rgba(37,12,51,0.28); transform: translate(-50%, -112%);
}
[data-theme="dark"] .timeline-tooltip { background: #2c1338; border: 1px solid var(--rule-strong); }
.timeline-tooltip strong { color: var(--paper); }
.timeline-view-hint { color: var(--ink-faint); font-size: var(--fs-xs); margin-top: 12px; }

/* ---------- Compare button in row footer ---------- */
.case-compare-btn, .case-copylink-btn {
  font-family: var(--serif); font-size: var(--fs-xs); font-weight: 700;
  color: var(--ink); background: var(--card-bg); border: 1px solid var(--rule-strong);
  border-radius: 8px; padding: 8px 14px; cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.case-compare-btn:hover, .case-copylink-btn:hover { border-color: var(--accent); color: var(--accent); }
.case-compare-btn.is-pinned { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* ---------- Compare tray ---------- */
.compare-tray {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 60; width: min(760px, calc(100vw - 32px));
  background: var(--card-bg); border: 1px solid var(--rule-strong);
  border-radius: 14px; box-shadow: 0 16px 44px rgba(37,12,51,0.24);
  animation: tray-in .24s cubic-bezier(0.16,1,0.3,1);
}
@keyframes tray-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.compare-tray-inner { display: flex; align-items: center; gap: 16px; padding: 12px 16px; flex-wrap: wrap; }
.compare-tray-label { font-family: var(--serif); font-weight: 800; color: var(--ink); font-size: 0.92rem; display: flex; align-items: center; gap: 8px; }
.compare-tray-count { font-size: 0.72rem; font-weight: 700; color: var(--ink-faint); background: var(--card-bg-2); padding: 2px 8px; border-radius: 999px; }
.compare-tray-chips { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.compare-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--card-bg-2); border: 1px solid var(--rule); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 0.8rem; font-weight: 600; color: var(--ink); }
.compare-chip-x { border: none; background: var(--rule); color: var(--ink); width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 0.9rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.compare-chip-x:hover { background: var(--accent); color: var(--paper); }
.compare-tray-actions { display: flex; gap: 10px; align-items: center; }
.compare-tray-clear { border: none; background: none; color: var(--ink-mute); font-size: var(--fs-xs); font-weight: 700; cursor: pointer; }
.compare-tray-clear:hover { color: var(--accent); }
.compare-tray-open { font-family: var(--serif); font-weight: 700; font-size: var(--fs-sm); color: var(--paper); background: var(--ink); border: none; border-radius: 9px; padding: 9px 18px; cursor: pointer; transition: background .16s ease; }
.compare-tray-open:hover { background: var(--accent-strong); }
[data-theme="dark"] .compare-tray-open { background: var(--accent); color: #140719; }

/* ---------- Compare modal ---------- */
#compare-modal { border: none; border-radius: 16px; padding: 0; max-width: min(1080px, 96vw); width: 96vw; background: var(--card-bg); color: var(--ink); box-shadow: 0 30px 80px rgba(37,12,51,0.4); }
#compare-modal::backdrop { background: rgba(26, 10, 36, 0.55); backdrop-filter: blur(2px); }
.compare-modal-inner { display: flex; flex-direction: column; max-height: 92vh; }
.compare-modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 26px 16px; border-bottom: 1px solid var(--rule); gap: 16px; }
.compare-modal-kicker { font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--accent-strong); margin-bottom: 4px; }
.compare-modal-h { font-family: var(--serif); font-size: 1.4rem; font-weight: 800; color: var(--ink); margin: 0; }
.compare-modal-head-actions { display: flex; align-items: center; gap: 12px; }
.compare-export-btn { font-family: var(--serif); font-weight: 700; font-size: var(--fs-sm); color: var(--paper); background: var(--ink); border: none; border-radius: 9px; padding: 9px 16px; cursor: pointer; transition: background .16s ease; }
.compare-export-btn:hover { background: var(--accent-strong); }
[data-theme="dark"] .compare-export-btn { background: var(--accent); color: #140719; }
.compare-modal-close { border: none; background: none; font-size: 1.7rem; line-height: 1; color: var(--ink-mute); cursor: pointer; padding: 0 4px; }
.compare-modal-close:hover { color: var(--accent); }
.compare-modal-body { overflow: auto; padding: 8px 26px 26px; }
.compare-grid { display: grid; gap: 0; }
.compare-grid-row { display: grid; border-bottom: 1px solid var(--rule); }
.compare-grid-row:last-child { border-bottom: none; }
.compare-row-label { font-size: 0.68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); padding: 14px 14px 4px; grid-column: 1 / -1; }
.compare-cells { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
.compare-cell { padding: 4px 14px 16px; font-size: 0.86rem; color: var(--ink); line-height: 1.5; border-left: 1px solid var(--rule); vertical-align: top; }
.compare-cell:first-child { border-left: none; }
.compare-cell-header { padding: 8px 14px 14px; }
.compare-cell-company { font-family: var(--serif); font-size: 1.15rem; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.compare-cell-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.compare-cell a { color: var(--accent); word-break: break-word; }
.compare-header-row .compare-cells { border-bottom: 2px solid var(--rule-strong); }

/* ---------- Row highlight pulse ---------- */
@keyframes rowPulse {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(160,49,152,0); background: transparent; }
  20% { box-shadow: inset 0 0 0 3px rgba(160,49,152,0.85); background: var(--accent-soft); }
  60% { box-shadow: inset 0 0 0 3px rgba(160,49,152,0.5); background: var(--accent-soft); }
}
#tbody tr.row-highlighted > td { animation: rowPulse 3s ease-out; }

/* ---------- Case quote strengthening ---------- */
.case-quote {
  position: relative; margin: 18px 0 4px; padding: 14px 18px 14px 22px;
  background: var(--card-bg-2); border-radius: 10px;
}
.case-quote::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px;
  border-radius: 4px; background: var(--ffhr-gradient);
}
.case-quote .case-quote-body { font-style: italic; color: var(--ink); font-size: 1rem; line-height: 1.55; margin: 0 0 8px; }
.case-quote .case-quote-attribution { font-size: var(--fs-xs); color: var(--ink-mute); }
.case-quote .case-quote-attribution strong { color: var(--ink); }
.case-quote .case-quote-mark { position: absolute; top: 4px; right: 14px; font-family: var(--serif); font-size: 2.4rem; color: var(--accent-soft); line-height: 1; }
.case-quote-source { display: inline-block; margin-top: 6px; font-size: var(--fs-xs); color: var(--accent); text-decoration: none; }
.case-quote-source:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .reversal-watch-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .reversal-watch-strip { grid-template-columns: repeat(2, 1fr); }
  .week-signal-card { grid-template-columns: 1fr; gap: 20px; }
  .ws-pill { position: static; align-self: flex-start; margin-bottom: 12px; }
  .ws-right { padding-top: 0; }
}
@media (max-width: 560px) {
  .reversal-watch-strip { grid-template-columns: 1fr; }
  .compare-tray-inner { justify-content: space-between; }
  .compare-cell, .compare-row-label { padding-left: 10px; padding-right: 10px; }
  /* HR scope tiles: stack vertically to prevent label collisions */
  .kpi-scope-row { grid-template-columns: 1fr; gap: 8px; }
  .scope-tile { padding: 12px 14px; flex-direction: row; align-items: baseline; gap: 12px; }
  .scope-tile-num { font-size: 26px; min-width: 40px; }
  .scope-tile-label { font-size: 11px; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .compare-tray { animation: none; }
  #tbody tr.row-highlighted > td { animation: none; box-shadow: inset 0 0 0 3px rgba(160,49,152,0.6); }
}

/* Persona lens editorial intro */
.persona-lens-intro { font-size: 1rem; line-height: 1.6; color: var(--ink); margin: 0 0 12px; font-weight: 500; }
.persona-summary-standing { margin: 0; }

/* Persona lens: four-section structured intro (Board lens) */
.persona-lens-sections-heading {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 8px;
  font-weight: 600;
}
.persona-lens-sections {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.persona-lens-sections li {
  position: relative;
  padding: 6px 0 6px 18px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
}
.persona-lens-sections li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 8px;
  height: 2px;
  background: linear-gradient(90deg, #4493cb, #a03198);
  border-radius: 2px;
}
.persona-lens-sections li strong {
  color: var(--indigo-deep, #250c33);
  font-weight: 600;
}
.persona-lens-tail {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 12px;
  font-weight: 500;
  font-style: normal;
}
[data-theme="dark"] .persona-lens-sections li strong { color: #f2ecff; }
[data-theme="dark"] .persona-lens-sections li,
[data-theme="dark"] .persona-lens-sections-heading,
[data-theme="dark"] .persona-lens-tail { color: #d9cfe0; }

/* Vendor block: long-tail collapsible */
.vendor-tail {
  margin-top: 14px;
  border-top: 1px dashed rgba(146, 134, 153, 0.35);
  padding-top: 14px;
}
.vendor-tail-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(68, 147, 203, 0.06);
  transition: background 160ms ease;
}
.vendor-tail-summary::-webkit-details-marker { display: none; }
.vendor-tail-summary::marker { display: none; content: ""; }
.vendor-tail-summary:hover { background: rgba(160, 49, 152, 0.08); }
.vendor-tail-summary-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--indigo-deep, #250c33);
  letter-spacing: 0.02em;
}
.vendor-tail-summary-hint {
  font-size: 0.78rem;
  color: var(--cool-gray, #928699);
  font-style: normal;
}
.vendor-tail[open] .vendor-tail-summary-hint::after {
  content: " (expanded)";
}
.vendor-tail-grid {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.vendor-tail-card {
  padding: 12px 14px;
  border: 1px solid rgba(146, 134, 153, 0.25);
  border-radius: 10px;
  background: rgba(255, 254, 255, 0.6);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vendor-tail-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--indigo-deep, #250c33);
  line-height: 1.3;
}
.vendor-tail-company {
  font-size: 0.85rem;
  color: var(--cool-gray, #928699);
  line-height: 1.35;
}
.vendor-tail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.vendor-tail-tags .vendor-bucket {
  font-size: 0.68rem;
  padding: 3px 8px;
}
.vendor-tail-tags .vendor-reversal-flag {
  font-size: 0.68rem;
  padding: 3px 8px;
}
[data-theme="dark"] .vendor-tail { border-top-color: rgba(217, 207, 224, 0.2); }
[data-theme="dark"] .vendor-tail-summary { background: rgba(68, 147, 203, 0.12); }
[data-theme="dark"] .vendor-tail-summary:hover { background: rgba(160, 49, 152, 0.16); }
[data-theme="dark"] .vendor-tail-summary-label { color: #f2ecff; }
[data-theme="dark"] .vendor-tail-summary-hint { color: #b0a4b8; }
[data-theme="dark"] .vendor-tail-card {
  background: rgba(37, 12, 51, 0.4);
  border-color: rgba(217, 207, 224, 0.18);
}
[data-theme="dark"] .vendor-tail-name { color: #f2ecff; }
[data-theme="dark"] .vendor-tail-company { color: #b0a4b8; }
@media (max-width: 720px) {
  .vendor-tail-grid { grid-template-columns: 1fr; }
  .vendor-tail-summary { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---------- V8 dark mode: form controls, buttons, hints ---------- */
[data-theme="dark"] .control input,
[data-theme="dark"] .control select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] select {
  background-color: var(--card-bg);
  color: var(--ink);
  border-color: var(--rule-strong);
}
[data-theme="dark"] .control input::placeholder { color: var(--ink-faint); }
[data-theme="dark"] select option { background: var(--paper-2); color: var(--ink); }
[data-theme="dark"] .btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
[data-theme="dark"] .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .btn-primary { background: var(--accent); color: #140719; border-color: var(--accent); }
[data-theme="dark"] .btn-primary:hover { background: var(--accent-strong); }
[data-theme="dark"] .cred-legend-hint,
[data-theme="dark"] .sector-heatmap-hint,
[data-theme="dark"] .timeline-view-hint { color: var(--ink-faint); }
[data-theme="dark"] .controls { background: var(--card-bg); border-color: var(--rule); }
[data-theme="dark"] .cred-legend { background: var(--card-bg); border-color: var(--rule); }

/* V8: normalize native select chrome so dark backgrounds are authoritative */
.control select,
.controls select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23928699' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
[data-theme="dark"] .control select,
[data-theme="dark"] .controls select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9becf' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* V8 dark mode: sticky company column parity (light hexes above are light-only) */
[data-theme="dark"] #datatable thead th:first-child { background: var(--paper-2); }
[data-theme="dark"] #datatable tbody td.company { background: var(--paper); }
[data-theme="dark"] #datatable tbody tr.data-row.row-odd td.company { background: var(--stripe); }
[data-theme="dark"] #datatable tbody tr.data-row:hover td.company,
[data-theme="dark"] #datatable tbody tr.data-row.is-expanded td.company { background: var(--card-bg-2); }
[data-theme="dark"] .table-wrap.is-hscrolled #datatable thead th:first-child,
[data-theme="dark"] .table-wrap.is-hscrolled #datatable tbody td.company {
  box-shadow: 8px 0 12px -8px rgba(0, 0, 0, 0.5);
}


/* =========================================================================
   Dark mode contrast fixes: pass 2
   Addresses invisible-text issues found in Playwright audit.
   ========================================================================= */

/* --- Table credibility badges: light-on-light in dark mode --- */
[data-theme="dark"] .cred-Verified,
[data-theme="dark"] .badge.cred-Verified,
[data-theme="dark"] td .badge.cred-Verified {
  background: rgba(199, 106, 192, 0.18);
  color: #f5eef5;
  border-color: rgba(199, 106, 192, 0.32);
}
[data-theme="dark"] .cred-Reported,
[data-theme="dark"] .badge.cred-Reported,
[data-theme="dark"] td .badge.cred-Reported {
  background: rgba(224, 164, 74, 0.20);
  color: #f0d9a8;
  border-color: rgba(224, 164, 74, 0.34);
}
[data-theme="dark"] .cred-Inferred,
[data-theme="dark"] .badge.cred-Inferred,
[data-theme="dark"] td .badge.cred-Inferred {
  background: rgba(165, 150, 173, 0.18);
  color: #c9becf;
  border-color: rgba(165, 150, 173, 0.30);
}

/* --- Table scope badges: HR FN / HR-ADJ / ENTERPRISE --- */
[data-theme="dark"] .scope-HRfunction,
[data-theme="dark"] .badge.scope-HRfunction {
  background: rgba(212, 136, 205, 0.18);
  color: #ecb9e6;
}
[data-theme="dark"] .scope-HRadjacent,
[data-theme="dark"] .badge.scope-HRadjacent {
  background: rgba(111, 178, 224, 0.16);
  color: #a5cfe8;
}
[data-theme="dark"] .scope-Enterprise,
[data-theme="dark"] .badge.scope-Enterprise {
  background: rgba(183, 158, 199, 0.16);
  color: #d4c6de;
}

/* --- Case card header: hardcoded ffhr-indigo-deep title --- */
[data-theme="dark"] .case-title { color: var(--ink); }
[data-theme="dark"] .case-block-body { color: var(--ink); }
[data-theme="dark"] .case-timeline { background: var(--card-bg-2); border-color: var(--rule); }
[data-theme="dark"] .case-timeline-value { color: var(--ink); }
[data-theme="dark"] .case-timeline-step-reversal .case-timeline-value { color: #ecb9e6; }
[data-theme="dark"] .case-timeline-step-cut .case-timeline-value { color: #a5cfe8; }
[data-theme="dark"] .case-collapse:hover { background: var(--accent); color: #140719; border-color: var(--accent); }

/* --- Case pull-quote block --- */
[data-theme="dark"] .case-quote { background: var(--card-bg-2); border-color: var(--rule); }
[data-theme="dark"] .case-quote-body { color: var(--ink); }
[data-theme="dark"] .case-quote-attribution { color: var(--ink-mute); }

/* --- LinkedIn quote cards: 4 variants, 4 fixes --- */

/* Card 1 (default, no style class): was dark-ink bg in light mode.
   In dark mode, --ink flips light so bg goes light, but child text was
   still set to --paper (dark). Force it back to a proper dark card. */
[data-theme="dark"] .quote-card {
  background: var(--card-bg-2);
  color: var(--ink);
  border: 1px solid var(--rule);
}
[data-theme="dark"] .quote-card-label { color: var(--accent-strong); }
[data-theme="dark"] .quote-card-stat { color: var(--ink); }
[data-theme="dark"] .quote-card-body { color: var(--ink-soft); }
[data-theme="dark"] .quote-card-foot { color: var(--ink-mute); }

/* Card 2 (amber / gradient): stays gradient. Force high-contrast white text. */
[data-theme="dark"] .quote-card.amber {
  background: var(--ffhr-gradient);
  border-color: transparent;
}
[data-theme="dark"] .quote-card.amber .quote-card-label,
[data-theme="dark"] .quote-card.amber .quote-card-stat,
[data-theme="dark"] .quote-card.amber .quote-card-body,
[data-theme="dark"] .quote-card.amber .quote-card-foot { color: #fffeff; }

/* Card 3 (deep indigo): hardcoded #1a0824 bg in both modes.
   Text needs to stay LIGHT (it was designed as a dark card). */
[data-theme="dark"] .quote-card.deep {
  background: #150720;
  border-color: rgba(160, 49, 152, 0.24);
}
[data-theme="dark"] .quote-card.deep .quote-card-label { color: #d488cd; }
[data-theme="dark"] .quote-card.deep .quote-card-stat { color: #f5eef5; }
[data-theme="dark"] .quote-card.deep .quote-card-body { color: #e7dcec; }
[data-theme="dark"] .quote-card.deep .quote-card-foot { color: #b79ec7; }

/* Card 4 (plum): was a light card for rhythm. In dark mode, restyle as
   a mid-tone accent card with clear text. */
[data-theme="dark"] .quote-card.plum {
  background: linear-gradient(135deg, rgba(160,49,152,0.18) 0%, rgba(68,147,203,0.14) 100%);
  border-color: rgba(199, 106, 192, 0.28);
  color: var(--ink);
}
[data-theme="dark"] .quote-card.plum .quote-card-label { color: #ecb9e6; }
[data-theme="dark"] .quote-card.plum .quote-card-stat { color: var(--ink); }
[data-theme="dark"] .quote-card.plum .quote-card-body { color: var(--ink-soft); }
[data-theme="dark"] .quote-card.plum .quote-card-foot { color: #ecb9e6; }

/* --- Watchlist "Watch:" callout boxes --- */
[data-theme="dark"] .watch-item-callout,
[data-theme="dark"] .watch-card .watch-callout {
  background: var(--card-bg-2);
  border-color: var(--rule-strong);
  color: var(--ink);
}
[data-theme="dark"] .watch-card { background: var(--card-bg); border-color: var(--rule); }

/* --- Reversal watch card partial badge tweak --- */
[data-theme="dark"] .rw-badge.rw-partial { background: rgba(224,164,74,0.18); color: #f0d9a8; }
[data-theme="dark"] .rw-badge.rw-rebalance { background: rgba(68, 147, 203, 0.24); color: #a0c9e8; border-color: rgba(68, 147, 203, 0.5); }

/* --- Editorial standards footer note --- */
[data-theme="dark"] .footer-note.editorial-standards strong { color: #f5eef5; }

/* --- Persona summary panel --- */
[data-theme="dark"] .persona-summary { background: var(--card-bg-2); border-color: var(--rule); color: var(--ink); }
[data-theme="dark"] .persona-summary-inner p { color: var(--ink-soft); }

/* --- Insights / theme cards (safety) --- */
[data-theme="dark"] .insights-card { background: var(--card-bg); border-color: var(--rule); }
[data-theme="dark"] .insights-card h3 { color: var(--ink); }
[data-theme="dark"] .insights-card p { color: var(--ink-soft); }

/* --- Glossary cards --- */
[data-theme="dark"] .glossary-card { background: var(--card-bg); border-color: var(--rule); }
[data-theme="dark"] .glossary-card h4 { color: var(--ink); }
[data-theme="dark"] .glossary-card p { color: var(--ink-soft); }
[data-theme="dark"] .glossary-vendor { color: var(--ink-mute); }
[data-theme="dark"] .glossary-dataset-link { color: var(--accent-strong); }

/* --- KPI scope tiles: keep filter-tile buttons readable --- */
[data-theme="dark"] .scope-tile { background: var(--card-bg-2); border-color: var(--rule); }
[data-theme="dark"] .scope-tile-num { color: var(--ink); }
[data-theme="dark"] .scope-tile-label { color: var(--ink-mute); }

/* --- Row expansion aside (What this means for your role) --- */
[data-theme="dark"] .case-insight { background: var(--card-bg-2); border-color: var(--rule); }
[data-theme="dark"] .case-insight-body { color: var(--ink); }
[data-theme="dark"] .case-insight-label { color: var(--accent-strong); }
[data-theme="dark"] .case-stats .case-stat-value { color: var(--ink); }
[data-theme="dark"] .case-stats .case-stat-label { color: var(--ink-mute); }
[data-theme="dark"] .case-sources-label { color: var(--ink-mute); }
[data-theme="dark"] .case-source-pill { background: var(--card-bg-2); border-color: var(--rule); color: var(--ink); }
[data-theme="dark"] .case-source-pill:hover { border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .case-cite-btn,
[data-theme="dark"] .case-copylink-btn,
[data-theme="dark"] .case-compare-btn {
  background: var(--card-bg-2); border-color: var(--rule); color: var(--ink);
}
[data-theme="dark"] .case-cite-btn:hover,
[data-theme="dark"] .case-copylink-btn:hover,
[data-theme="dark"] .case-compare-btn:hover { border-color: var(--accent); color: var(--accent); }

/* --- Dark mode: subtle border-glow on LinkedIn quote card hover --- */
[data-theme="dark"] .quote-card {
  transition: transform .22s ease, box-shadow .32s ease, border-color .32s ease;
}
[data-theme="dark"] .quote-card:hover {
  border-color: rgba(199, 106, 192, 0.55);
  box-shadow:
    0 0 0 1px rgba(199, 106, 192, 0.35),
    0 0 22px 2px rgba(160, 49, 152, 0.32),
    0 0 44px 6px rgba(68, 147, 203, 0.18);
}
[data-theme="dark"] .quote-card.amber:hover {
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(255, 254, 255, 0.22),
    0 0 24px 3px rgba(199, 106, 192, 0.38),
    0 0 48px 8px rgba(68, 147, 203, 0.24);
}
[data-theme="dark"] .quote-card.deep:hover {
  border-color: rgba(212, 136, 205, 0.55);
  box-shadow:
    0 0 0 1px rgba(212, 136, 205, 0.38),
    0 0 24px 3px rgba(160, 49, 152, 0.40),
    0 0 48px 8px rgba(68, 147, 203, 0.20);
}
[data-theme="dark"] .quote-card.plum:hover {
  border-color: rgba(199, 106, 192, 0.60);
  box-shadow:
    0 0 0 1px rgba(199, 106, 192, 0.36),
    0 0 22px 2px rgba(160, 49, 152, 0.36),
    0 0 46px 6px rgba(68, 147, 203, 0.22);
}

/* =========================================================================
   Weekly changelog card, "What changed this week"
   ========================================================================= */
.changelog-section { padding: 28px 0 10px; }
.changelog-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 24px 28px 22px;
  overflow: hidden;
}
.changelog-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ffhr-gradient);
}
.changelog-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 14px; flex-wrap: wrap;
}
.changelog-head-left { min-width: 0; }
.changelog-kicker {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-strong); margin: 0 0 6px;
}
.changelog-title {
  font-family: var(--serif); font-weight: 800;
  font-size: 1.35rem; letter-spacing: -0.01em;
  color: var(--ink); margin: 0;
}
.changelog-meta {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--ink-mute); white-space: nowrap;
}
.changelog-summary {
  font-family: var(--sans); font-size: 14.5px; line-height: 1.55;
  color: var(--ink-soft); margin: 0 0 16px; max-width: 72ch;
}
.changelog-rows {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 22px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.changelog-row {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.changelog-row-label {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-mute);
}
.changelog-row-value {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--ink); line-height: 1.4;
}
.changelog-row-value strong { font-weight: 700; color: var(--accent-strong); }
.changelog-row-value em { font-style: normal; color: var(--ink-mute); font-size: 13px; }
.changelog-empty {
  font-family: var(--sans); font-size: 13.5px; color: var(--ink-mute);
  font-style: normal; padding: 4px 0 2px;
}
.changelog-history {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--rule);
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-mute); letter-spacing: 0.02em;
}
.changelog-history-toggle {
  background: transparent; border: 0; padding: 0;
  color: var(--accent-strong); font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(160,49,152,0.35);
}
.changelog-history-toggle:hover { color: var(--accent); text-decoration-color: var(--accent); }
.changelog-history-list {
  display: none; margin-top: 10px;
  padding: 0; list-style: none;
  font-family: var(--sans); font-size: 13px; color: var(--ink-soft);
  line-height: 1.6;
}
.changelog-history-list.is-open { display: block; }
.changelog-history-item {
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
}
.changelog-history-item:last-child { border-bottom: 0; }
.changelog-history-item time {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--ink-mute); margin-right: 10px;
}

/* Dark mode */
[data-theme="dark"] .changelog-card { background: var(--card-bg); border-color: var(--rule); }
[data-theme="dark"] .changelog-summary { color: var(--ink-soft); }
[data-theme="dark"] .changelog-row-value { color: var(--ink); }

/* =========================================================================
   NEW / UPDATED pills on table rows (7-day lookback)
   ========================================================================= */
.freshness-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: 999px;
  margin-left: 8px; vertical-align: middle;
  line-height: 1.5;
}
.freshness-pill.is-new {
  background: rgba(160, 49, 152, 0.14);
  color: var(--ffhr-violet);
  border: 1px solid rgba(160, 49, 152, 0.30);
}
.freshness-pill.is-updated {
  background: rgba(68, 147, 203, 0.14);
  color: var(--ffhr-slate);
  border: 1px solid rgba(68, 147, 203, 0.30);
}
[data-theme="dark"] .freshness-pill.is-new {
  background: rgba(212, 136, 205, 0.18);
  color: #ecb9e6;
  border-color: rgba(212, 136, 205, 0.36);
}
[data-theme="dark"] .freshness-pill.is-updated {
  background: rgba(111, 178, 224, 0.16);
  color: #a5cfe8;
  border-color: rgba(111, 178, 224, 0.34);
}

/* ============================================================
   Methodology section (Chapter 10)
   ============================================================ */
.methodology-section {
  padding: 72px 0 88px;
  background: linear-gradient(180deg, rgba(255, 254, 255, 0) 0%, rgba(68, 147, 203, 0.03) 60%, rgba(160, 49, 152, 0.04) 100%);
  border-top: 1px solid rgba(37, 12, 51, 0.06);
}
.method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.method-card {
  position: relative;
  padding: 24px 24px 22px;
  background: #fffeff;
  border: 1px solid rgba(37, 12, 51, 0.08);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(37, 12, 51, 0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.method-card:hover {
  border-color: rgba(160, 49, 152, 0.22);
  box-shadow: 0 4px 14px rgba(37, 12, 51, 0.06);
}
.method-card-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #a03198;
  margin-bottom: 6px;
}
.method-card-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: #250c33;
  margin-bottom: 10px;
  line-height: 1.25;
}
.method-card p {
  font-size: 15px;
  line-height: 1.6;
  color: #928699;
  margin: 0;
}
.method-card strong { color: #250c33; font-weight: 600; }
.method-card a {
  color: #a03198;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.method-card a:hover { color: #4493cb; }
.method-footer {
  margin-top: 28px;
  padding: 24px 28px;
  background: rgba(37, 12, 51, 0.03);
  border-left: 3px solid;
  border-image: linear-gradient(180deg, #4493cb, #a03198) 1;
  border-radius: 0 8px 8px 0;
}
.method-footer p {
  font-size: 14px;
  line-height: 1.65;
  color: #928699;
  margin: 0 0 10px;
}
.method-footer p:last-child { margin-bottom: 0; }
.method-footer strong { color: #250c33; font-weight: 600; }
.method-footer a {
  color: #a03198;
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-theme="dark"] .methodology-section {
  background: linear-gradient(180deg, rgba(19, 8, 29, 0) 0%, rgba(68, 147, 203, 0.05) 60%, rgba(160, 49, 152, 0.07) 100%);
  border-top-color: rgba(255, 254, 255, 0.06);
}
[data-theme="dark"] .method-card {
  background: rgba(37, 12, 51, 0.4);
  border-color: rgba(255, 254, 255, 0.08);
}
[data-theme="dark"] .method-card:hover { border-color: rgba(160, 49, 152, 0.4); }
[data-theme="dark"] .method-card-title { color: #fffeff; }
[data-theme="dark"] .method-card p { color: rgba(255, 254, 255, 0.7); }
[data-theme="dark"] .method-card strong { color: #fffeff; }
[data-theme="dark"] .method-footer { background: rgba(255, 254, 255, 0.04); }
[data-theme="dark"] .method-footer p { color: rgba(255, 254, 255, 0.7); }
[data-theme="dark"] .method-footer strong { color: #fffeff; }
@media (max-width: 780px) {
  .methodology-section { padding: 48px 0 60px; }
  .method-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
  .method-card { padding: 20px 20px 18px; }
  .method-card-title { font-size: 18px; }
  .method-card p { font-size: 14.5px; }
  .method-footer { padding: 20px 22px; margin-top: 22px; }
  .method-footer p { font-size: 13.5px; }
}

/* ============================================================
   PRINT STYLESHEET
   Keep: header/logo, hero, KPI strip, insights, table, reversal-watch
         mini-strip, methodology, footer credit.
   Kill: scroll rail, reading pill, toast, persona picker, filters,
         download CSV button, quote cards, ceo quotes, watch list,
         glossary, CTA, chart canvases (Chart.js renders to raster;
         not print-friendly), theme toggle, PDF export button, and
         the long-form reversals-section (the Executive PDF button
         owns that narrative).
   Grayscale-friendly: strip gradients and dark backgrounds.
   ============================================================ */
@media print {
  /* Global paper reset */
  html, body {
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 10.5pt !important;
    line-height: 1.4 !important;
  }
  * {
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Kill floating and interactive chrome */
  .chapter-rail,
  .reading-progress,
  .reading-meter,
  .toast,
  #toast,
  .site-header .theme-toggle,
  .site-header .header-cta,
  .site-header .cta-primary,
  .site-header .cta,
  .site-header a[href*="pdf"],
  .header-actions,
  .persona-section,
  .charts,
  .quote-cards-section,
  .quotes-section,
  .watch-section,
  .glossary-section,
  .cta-section,
  .reversals-section,
  .methodology-inline,
  .table-controls,
  .filters,
  .density-toggle,
  .view-toggle,
  .table-toolbar-actions,
  .csv-download,
  #csv-download,
  .download-csv,
  .compare-modal,
  .compare-modal-backdrop,
  .credibility-scale-strip,
  .table-search,
  .reset-filters,
  .table-legend,
  .quote-card-actions,
  .reversal-share,
  .rw-link,
  .case-reversal-link,
  .week-signal,
  .changelog-section,
  .freshness-pill,
  .updated-pill,
  .kicker,
  .chapter-mark,
  .section-sub {
    display: none !important;
  }

  /* Header simplified for print */
  .site-header {
    position: static !important;
    background: transparent !important;
    border-bottom: 1px solid #ccc !important;
    padding: 0 0 6pt !important;
  }
  .site-header .container { padding: 0 !important; max-width: none !important; }
  .header-grid { display: flex !important; justify-content: space-between !important; align-items: baseline !important; }
  .site-header .brand-name { font-size: 12pt !important; color: #111 !important; }
  .site-header .brand-tag { color: #444 !important; }

  /* Container widens to full page */
  .container { max-width: none !important; padding: 0 24pt !important; }

  /* Hero: strip gradient background, keep the run-rate table */
  .hero {
    background: transparent !important;
    padding: 12pt 0 8pt !important;
  }
  .hero::before, .hero::after { display: none !important; }
  .hero-split { display: block !important; }
  .hero h1 {
    color: #111 !important;
    font-size: 20pt !important;
    line-height: 1.15 !important;
    margin: 0 0 6pt !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
  }
  .hero-em, .hero h1 span {
    color: #444 !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
  }
  .hero-lede, .hero-lede p { color: #333 !important; font-size: 10.5pt !important; }
  .hero-runrate-card {
    background: transparent !important;
    border: 1px solid #ccc !important;
    padding: 8pt !important;
    margin: 8pt 0 0 !important;
  }
  .hero-runrate-num { color: #111 !important; }
  .hero-runrate-cell-hot { background: transparent !important; border: 1px solid #444 !important; }

  /* KPI strip: horizontal, no color fills */
  .kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8pt !important;
    margin: 10pt 0 !important;
    break-inside: avoid;
  }
  .kpi {
    background: transparent !important;
    border: 1px solid #ccc !important;
    padding: 6pt 8pt !important;
  }
  .kpi-num { color: #111 !important; font-size: 18pt !important; }
  .kpi-label { color: #444 !important; font-size: 8.5pt !important; }

  /* HR scope filter tiles: full-width row, uniform sizing in print */
  .scope-tiles, .kpi-scope, .kpi-scope-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6pt !important;
    margin: 6pt 0 !important;
  }
  .scope-tile {
    background: transparent !important;
    border: 1px solid #ccc !important;
    padding: 6pt 8pt !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3pt !important;
  }
  .scope-tile-num { color: #111 !important; font-size: 18pt !important; font-weight: 800 !important; }
  .scope-tile-label { color: #444 !important; font-size: 8.5pt !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; }
  .kpi-caption, .scope-caption { color: #444 !important; font-size: 8.5pt !important; margin: 4pt 0 8pt !important; }

  /* Insights section: keep, simple typography */
  .insights { padding: 8pt 0 !important; background: transparent !important; }
  .insights h2 { color: #111 !important; font-size: 15pt !important; }
  .insights p, .insight-body, .insight-card p { color: #222 !important; font-size: 10.5pt !important; }
  .insights-grid, .insight-list, .themes-list {
    display: block !important;
  }
  .insight-card, .insights-grid > *, .theme-card, .theme {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    background: transparent !important;
    border: 1px solid #ddd !important;
    padding: 8pt 10pt !important;
    margin: 0 0 8pt !important;
  }
  .insight-card h3, .theme-card h3, .theme h3 {
    color: #111 !important;
    font-size: 12pt !important;
    margin: 0 0 4pt !important;
  }

  /* Table section: keep, simplify */
  .table-section {
    background: transparent !important;
    padding: 8pt 0 !important;
    break-inside: auto;
  }
  .table-section h2 { color: #111 !important; font-size: 15pt !important; }
  .data-table {
    font-size: 8.5pt !important;
    border-collapse: collapse !important;
    width: 100% !important;
  }
  .data-table th, .data-table td {
    border: 1px solid #ccc !important;
    padding: 4pt 6pt !important;
    color: #111 !important;
    background: transparent !important;
    text-align: left !important;
  }
  .data-table thead th {
    background: #f2f2f2 !important;
    font-weight: 700 !important;
    color: #111 !important;
  }
  .data-table tr { break-inside: avoid; }
  /* Row expand chevrons and interactive controls not useful in print */
  .row-expand-btn, .sort-chevron, .table-caret { display: none !important; }
  /* Hide table detail expansions in print (they add noise) */
  .case-detail-row, .table-detail-row { display: none !important; }

  /* Reversal watch strip up top: keep as compact print block */
  .reversal-watch { background: transparent !important; padding: 8pt 0 !important; }
  .reversal-watch h2 { color: #111 !important; font-size: 15pt !important; }
  .reversal-watch-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6pt !important;
  }
  .rw-card {
    background: transparent !important;
    border: 1px solid #ccc !important;
    padding: 6pt 8pt !important;
    break-inside: avoid;
  }
  .rw-badge { border: 1px solid #444 !important; background: transparent !important; color: #111 !important; }

  /* Quiet reversals section: the piece Dana wants in print */
  .reversals-section { background: transparent !important; padding: 8pt 0 !important; }
  .reversals-section h2 { color: #111 !important; font-size: 15pt !important; }
  .reversals-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8pt !important;
  }
  .reversal-card {
    background: transparent !important;
    border: 1px solid #ccc !important;
    border-left: 3px solid #111 !important;
    padding: 8pt 10pt !important;
    break-inside: avoid;
  }
  .reversal-company { color: #111 !important; font-size: 12pt !important; }
  .reversal-meta, .reversal-block-label { color: #444 !important; }
  .reversal-block-body, .reversal-quote p { color: #222 !important; font-size: 10pt !important; }
  .reversal-quote { border-left: 2px solid #ccc !important; padding-left: 8pt !important; }
  .reversal-lesson {
    background: transparent !important;
    border: 1px solid #ccc !important;
    padding: 6pt 8pt !important;
  }
  .reversal-sources { color: #444 !important; }
  .reversal-source-link { color: #111 !important; text-decoration: underline !important; }
  .reversal-source-link::after { content: " (" attr(href) ")"; font-size: 7.5pt; color: #666; }

  /* Footer: keep credit line, drop nav */
  .site-footer { background: transparent !important; padding: 8pt 0 !important; border-top: 1px solid #ccc !important; }
  .footer-note { color: #444 !important; font-size: 9pt !important; }

  /* Page breaks */
  section, .kpi-grid, .reversal-card, .rw-card {
    page-break-inside: avoid;
  }
  h1, h2, h3 { page-break-after: avoid; }
  a[href]::after { content: ""; }
  .reversal-source-link::after { content: " (" attr(href) ")"; }

  /* Page margins */
  @page { margin: 0.6in; size: letter; }
}