/* ════════════════════════════════════════════════════════════
   Third Rock Wealth · fund-detail-prototype.css · iteration 2
   Density + numbered eyebrows + dark NAV block + period table +
   risk sub-blocks + 5-tab portfolio + fact grid + commentary +
   collapsible backtest + 2-column FAQ card grid.

   Anchored to css/main.css + css/v8-tokens.css tokens. No new
   color, font, or spacing constants introduced.
   ════════════════════════════════════════════════════════════ */

/* ── Page shell + density override ────────────────────── */
body.fdp-page {
  background: var(--paper);
  color: var(--ink);
  /* Density override: tighter section rhythm than the v8 default. */
  --section-y: clamp(18px, 2.4vw, 36px);
}
.fdp-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-5) calc(var(--s-10) * 1.6);
}
body.fdp-page section.fdp-block { padding: 0; }
.fdp-block + .fdp-block { margin-top: var(--section-y); }

/* Shared section header (numbered eyebrow + title) */
.fdp-section-head { margin-bottom: var(--s-3); display: flex; flex-direction: column; gap: 4px; }
.fdp-section-eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--neutral-grey);
  display: inline-flex; align-items: baseline; gap: 8px;
}
.fdp-section-num { color: var(--ink); font-weight: 700; letter-spacing: 0.10em; }
.fdp-section-sep { color: var(--rule-strong); }
.fdp-section-label { color: var(--neutral); }
.fdp-section-title {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 50, "opsz" 80;
  font-size: 22px;
  font-weight: 380;
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--ink);
}

/* Shared card */
.fdp-card {
  background: var(--paper-card);
  border: 1px solid var(--rule-strong);
  padding: var(--s-5);
  position: relative;
}
.fdp-rule { height: 1px; background: var(--rule); margin: var(--s-3) 0; }

/* Card eyebrows + captions */
.fdp-card-eyebrow {
  margin: 0 0 var(--s-3);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--neutral);
}
.fdp-card-caption {
  margin: var(--s-2) 0 0;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.55;
  font-style: italic;
  color: var(--ink-soft, var(--ink));
  max-width: 64ch;
}
.fdp-pending-note {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--neutral);
  line-height: 1.5;
}
.fdp-empty { padding: var(--s-4) 0; display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.fdp-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Tabular numerics for every numeric table column */
.fdp-period-table, .fdp-year-table, .fdp-capture-table,
.fdp-event-table, .fdp-stat-table, .fdp-sector-table,
.fdp-holdings-table { font-variant-numeric: tabular-nums; }

/* Pos / neg tone modifiers (used across many tables) */
.is-pos { color: var(--signal); }
.is-neg { color: var(--warning); }
.is-mid { color: var(--neutral); }

/* ─────────────────────────────────────────────────────
   DEV STRIP (prototype only)
   ───────────────────────────────────────────────────── */
.fdp-dev-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  padding: 8px var(--s-5);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono); font-size: 10.5px;
  border-bottom: 1px solid var(--ink);
}
.fdp-dev-tag {
  padding: 3px 8px;
  font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--warning); color: var(--paper);
}
.fdp-dev-group { display: flex; align-items: center; gap: var(--s-3); }
.fdp-dev-label {
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244, 235, 217, 0.55);
}
.fdp-dev-pills { display: inline-flex; border: 1px solid rgba(244, 235, 217, 0.30); }
.fdp-dev-pill {
  appearance: none; background: transparent; border: 0;
  padding: 5px 10px; cursor: pointer;
  font-family: var(--mono); font-size: 10px;
  font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(244, 235, 217, 0.65); border-right: 1px solid rgba(244, 235, 217, 0.20);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.fdp-dev-pill:last-child { border-right: 0; }
.fdp-dev-pill:hover { color: var(--paper); }
.fdp-dev-pill.is-active { background: var(--paper); color: var(--ink); }
.fdp-dev-select {
  padding: 4px 8px;
  border: 1px solid rgba(244, 235, 217, 0.30);
  background: transparent; color: var(--paper);
  font-family: var(--mono); font-size: 10.5px; max-width: 280px;
}
.fdp-dev-select option { color: var(--ink); }
.fdp-dev-reset {
  margin-left: auto;
  appearance: none; background: transparent; border: 0;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(244, 235, 217, 0.50); cursor: pointer; padding: 4px 6px;
}
.fdp-dev-reset:hover { color: var(--paper); text-decoration: underline; }
@media (max-width: 720px) {
  .fdp-dev-strip { gap: var(--s-3); padding: 6px var(--s-3); }
  .fdp-dev-select { flex: 1 1 100%; max-width: none; }
  .fdp-dev-reset { margin-left: 0; }
}

/* ── Demo banner ─────────────────────────────────────── */
.fdp-demo-banner {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 8px var(--s-5);
  background: var(--paper-card);
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--mono);
}
.fdp-demo-tag {
  padding: 3px 8px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--warning); color: var(--paper);
}
.fdp-demo-text {
  font-size: 11.5px; color: var(--neutral); letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────────────────
   BLOCK 1 · MASTHEAD with dark NAV block
   ───────────────────────────────────────────────────── */
.fdp-masthead {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.fdp-mast-left { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.fdp-breadcrumb {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--neutral-grey); display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.fdp-breadcrumb a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.fdp-breadcrumb a:hover { color: var(--ink); border-color: var(--rule-strong); }
.fdp-breadcrumb .sep { color: var(--rule-strong); }
.fdp-mast-name {
  margin: 2px 0 4px;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 50, "opsz" 96;
  font-size: clamp(28px, 3.6vw, 36px);
  font-weight: 380; line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--ink); max-width: 22ch;
  overflow-wrap: break-word; word-break: break-word; hyphens: auto;
}
.fdp-mast-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.fdp-chip {
  padding: 3px 9px;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--neutral);
  border: 1px solid var(--rule-strong);
}
.fdp-mast-facts {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  margin-top: 6px;
  font-family: var(--mono); font-size: 10px;
  color: var(--neutral);
}
.fdp-mast-fact { display: inline-flex; align-items: baseline; gap: 6px; }
.fdp-mast-fact-lbl {
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--neutral-grey);
}
.fdp-mast-fact-val {
  color: var(--ink); letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* Dark NAV block */
.fdp-mast-right { display: flex; align-items: flex-start; }
.fdp-mast-navblock {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-4) var(--s-5);
  min-width: 200px;
  border: 1px solid var(--ink);
  display: flex; flex-direction: column; gap: 4px;
}
.fdp-mast-nav-eyebrow {
  margin: 0;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(244, 235, 217, 0.55);
}
.fdp-mast-nav-big {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 30, "opsz" 96;
  font-size: 36px; font-weight: 360; letter-spacing: -0.024em;
  color: var(--paper); line-height: 1.0;
  font-variant-numeric: tabular-nums;
}
.fdp-mast-nav-delta {
  margin: 4px 0 0;
  font-family: var(--mono); font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.fdp-mast-navblock .fdp-delta { color: rgba(244, 235, 217, 0.85); }
.fdp-mast-navblock .fdp-delta.pos { color: var(--signal-mid, #C8DBD0); }
.fdp-mast-navblock .fdp-delta.neg { color: #d49f9f; }
.fdp-mast-asof {
  margin: 0;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(244, 235, 217, 0.50);
}
@media (max-width: 720px) {
  .fdp-masthead { grid-template-columns: 1fr; gap: var(--s-3); }
  .fdp-mast-right { justify-content: stretch; }
  .fdp-mast-navblock { width: 100%; }
}

/* ─────────────────────────────────────────────────────
   BLOCK 2 · METRIC STRIP
   ───────────────────────────────────────────────────── */
.fdp-strip-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rule-strong);
  background: var(--paper-card);
}
.fdp-tile {
  padding: var(--s-4);
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.fdp-tile:last-child { border-right: 0; }
.fdp-tile-eyebrow {
  margin: 0;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--neutral-grey);
  display: inline-flex; align-items: baseline; gap: 6px;
}
/* Info icon: a focusable button that reveals a styled .fdp-tip box on
   hover/focus. The visible glyph stays 14px; a transparent padding ring
   extends the pointer/touch hit area without shifting layout. */
.fdp-info {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; flex: none;
  margin: 0 0 0 5px; padding: 0;
  vertical-align: middle;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: transparent;
  font-family: var(--serif); font-style: italic;
  font-size: 9.5px; line-height: 1;
  color: var(--neutral); cursor: help;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
/* Invisible expanded hit target (≈32px) for touch + imprecise pointers. */
.fdp-info::before {
  content: ""; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 32px; height: 32px; min-width: 32px; min-height: 32px;
}
.fdp-info-glyph {
  display: block; line-height: 1;
  /* Optically recentre the italic "i": its slant pushes the ink right of
     the geometric centre, so shift the glyph a fraction left. */
  transform: translateX(-0.6px);
}
.fdp-info:hover, .fdp-info:focus-visible {
  color: var(--ink); border-color: var(--ink); outline: none;
}
.fdp-info:focus-visible { box-shadow: 0 0 0 2px var(--signal-soft, rgba(63,122,78,0.3)); }

/* The shared floating explanation box. */
.fdp-tip {
  position: absolute; z-index: 200;
  max-width: 280px;
  padding: 10px 13px;
  background: var(--paper-card);
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-pop, 0 8px 28px rgba(40,62,45,0.16));
  font-family: var(--sans); font-size: 12.5px; line-height: 1.5;
  color: var(--ink-soft, var(--ink));
  opacity: 0; visibility: hidden;
  transform: translateY(3px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s;
  pointer-events: none;
}
.fdp-tip.is-visible {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s;
}
.fdp-tile-value {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 50, "opsz" 80;
  font-size: 26px; font-weight: 380; line-height: 1.0;
  letter-spacing: -0.018em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fdp-tile.is-headline .fdp-tile-value { font-size: 30px; }
.fdp-tile-context {
  margin: 0;
  font-family: var(--sans); font-size: 11.5px; line-height: 1.4;
  color: var(--neutral);
}
@media (max-width: 720px) {
  .fdp-strip-grid { grid-template-columns: 1fr 1fr; }
  .fdp-tile { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .fdp-tile:nth-child(2n) { border-right: 0; }
  .fdp-tile:nth-last-child(-n+2) { border-bottom: 0; }
}

/* Secondary stat row beneath the main tile grid. Denser, label-value
   rhythm rather than big numbers; carries the MW4M-style "rest of the
   sheet" data that doesn't earn a primary tile. */
.fdp-strip-secondary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  margin-top: var(--s-3);
  background: var(--rule);
  border: 1px solid var(--rule-strong);
}
.fdp-strip-sec-cell {
  background: var(--paper-card);
  padding: var(--s-3) var(--s-4);
  display: flex; flex-direction: column; gap: 4px;
}
.fdp-strip-sec-lbl {
  margin: 0;
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--neutral-grey);
}
.fdp-strip-sec-val {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 50, "opsz" 60;
  font-size: 16px; font-weight: 400; line-height: 1.2;
  letter-spacing: -0.010em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fdp-strip-sec-val.is-pos { color: var(--signal); }
.fdp-strip-sec-val.is-neg { color: var(--warning); }
@media (max-width: 720px) {
  .fdp-strip-secondary { grid-template-columns: 1fr 1fr; }
  .fdp-strip-sec-cell { padding: var(--s-2) var(--s-3); }
  .fdp-strip-sec-val { font-size: 14px; }
  .fdp-strip-sec-lbl { font-size: 9px; letter-spacing: 0.12em; }
}
@media (max-width: 420px) {
  .fdp-strip-secondary { grid-template-columns: 1fr; }
  /* Tighten card padding on narrow screens so wide tables fit. */
  .fdp-main { padding-left: var(--s-3); padding-right: var(--s-3); }
  .fdp-card, .fdp-perf-card, .fdp-risk-card, .fdp-portfolio-card,
  .fdp-fact-card, .fdp-verdict-card { padding-left: var(--s-3); padding-right: var(--s-3); }
  /* Hard-overflow guard: tables scroll horizontally inside their cards
     rather than blowing out the page. */
  .fdp-period-table, .fdp-year-table, .fdp-capture-table,
  .fdp-event-table, .fdp-sector-table, .fdp-holdings-table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}

/* Expense breakdown (SEBI 2026 BER -> TER), Regular plan.
   Full-width container mirroring the tile grid (same border + hairline-
   divided cells) so it blends into the key-metrics rhythm; the header
   strip + tinted total cell keep it a distinct block. */
.fdp-expense-block {
  margin-top: var(--s-3);
  border: 1px solid var(--rule-strong);
  background: var(--paper-card);
}
.fdp-expense-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4) var(--s-2);
  border-bottom: 1px solid var(--rule);
}
.fdp-expense-eyebrow {
  margin: 0; display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--neutral-grey);
}
.fdp-expense-source {
  margin: 0;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em;
  color: var(--neutral-grey); font-style: italic;
}
.fdp-expense-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.fdp-expense-cell {
  padding: var(--s-3) var(--s-4);
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.fdp-expense-cell:last-child { border-right: 0; }
.fdp-expense-clabel {
  margin: 0; display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--neutral);
}
.fdp-expense-cval {
  margin: 0;
  font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.fdp-expense-cell.is-total { background: rgba(40, 62, 45, 0.05); }
.fdp-expense-cell.is-total .fdp-expense-clabel { color: var(--ink); }
.fdp-expense-cell.is-total .fdp-expense-cval {
  font-family: var(--serif); font-size: 19px;
  font-variation-settings: "SOFT" 50, "opsz" 60; letter-spacing: -0.01em;
}
@media (max-width: 720px) {
  .fdp-expense-grid { grid-template-columns: 1fr 1fr; }
  .fdp-expense-cell { border-bottom: 1px solid var(--rule); }
  .fdp-expense-cell:nth-child(2n) { border-right: 0; }
  .fdp-expense-cell:nth-last-child(-n+2) { border-bottom: 0; }
}

/* Compliance captions: score-hero disclaimer + performance disclaimer. */
.fdp-score-disclaimer {
  margin: var(--s-3) 0 0;
  font-family: var(--sans); font-size: 11.5px; font-style: italic; line-height: 1.5;
  color: var(--neutral); max-width: 60ch;
}
.fdp-perf-disclaimer {
  margin: var(--s-2) 0 0;
  font-family: var(--sans); font-size: 11px; font-style: italic; line-height: 1.5;
  color: var(--neutral-grey); max-width: 70ch;
}

/* ─────────────────────────────────────────────────────
   BLOCK 3 · VERDICT
   ───────────────────────────────────────────────────── */
.fdp-verdict-card { padding: var(--s-5); }
.fdp-verdict-top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-3);
  margin-bottom: 6px;
}
.fdp-score-eyebrow {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--neutral-grey);
}
.fdp-verdict-compline { display: inline-flex; align-items: baseline; gap: 6px; }
.fdp-score-big {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 30, "opsz" 144;
  font-size: 42px; font-weight: 350; line-height: 1.0;
  letter-spacing: -0.025em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fdp-score-unit {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--neutral);
}
.fdp-verdict-headline {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 50, "opsz" 60;
  font-size: 18px; font-weight: 380; line-height: 1.35;
  letter-spacing: -0.012em; color: var(--ink); max-width: 60ch;
}
.fdp-verdict-meta {
  margin: 4px 0 0;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--neutral-grey);
}
.fdp-subscores { display: flex; flex-direction: column; gap: var(--s-2); }
.fdp-subrow {
  display: grid; grid-template-columns: 140px 1fr 70px;
  gap: var(--s-3); align-items: center;
}
.fdp-subrow-label {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft, var(--ink));
}
.fdp-subrow-bar {
  position: relative; height: 4px; background: var(--rule); overflow: hidden;
}
.fdp-subrow-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  transition: width var(--t-base) var(--ease-out);
}
.fdp-subrow-fill.is-pos { background: var(--signal); }
.fdp-subrow-fill.is-mid { background: var(--neutral); }
.fdp-subrow-fill.is-neg { background: var(--warning); }
.fdp-subrow-val {
  text-align: right;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.fdp-verdict-foot {
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 6px;
}
.fdp-foot-line {
  margin: 0; font-family: var(--sans); font-size: 12.5px; line-height: 1.5;
  color: var(--ink-soft, var(--ink));
}
.fdp-foot-eyebrow {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--neutral-grey); margin-right: 4px;
}
.fdp-foot-eyebrow.is-pos { color: var(--signal); }
.fdp-foot-eyebrow.is-mid { color: var(--neutral); }
.fdp-foot-eyebrow.is-neg { color: var(--warning); }
@media (max-width: 720px) {
  .fdp-subrow { grid-template-columns: 110px 1fr 60px; gap: var(--s-2); }
}

/* ─────────────────────────────────────────────────────
   GATED CARD PATTERN
   ───────────────────────────────────────────────────── */
.fdp-gate { position: relative; overflow: hidden; }
.fdp-gated-body { pointer-events: none; user-select: none; }
.fdp-gate-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 76% 70% at 50% 50%,
    rgba(250, 243, 226, 0.96) 0%,
    rgba(250, 243, 226, 0.88) 50%,
    rgba(250, 243, 226, 0.68) 100%);
  z-index: 2; padding: var(--s-4);
}
.fdp-gate-card {
  background: var(--paper-card);
  border: 1px solid var(--rule-strong);
  padding: var(--s-4) var(--s-5);
  max-width: 440px; width: calc(100% - 32px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.fdp-gate-eyebrow {
  margin: 0 0 8px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--neutral);
}
.fdp-gate-heading {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 50, "opsz" 60;
  font-size: 18px; font-weight: 400; letter-spacing: -0.012em;
  color: var(--ink); line-height: 1.25;
}
.fdp-gate-desc {
  margin: 0 0 var(--s-3);
  font-family: var(--sans); font-size: 13px; line-height: 1.55;
  color: var(--ink-soft, var(--ink)); max-width: 38ch;
}
.fdp-gate-btn {
  appearance: none; cursor: pointer;
  padding: 10px 22px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--signal); color: var(--paper);
  border: 1px solid var(--signal);
  transition: background var(--t-fast) var(--ease-out);
}
.fdp-gate-btn:hover { background: var(--signal-deep, var(--ink)); border-color: var(--signal-deep, var(--ink)); }
.fdp-gate-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ─────────────────────────────────────────────────────
   BLOCK 4 · PERFORMANCE — split into 4 sub-cards
   Sub-card A · Period summary (tabs + period selector + period table)
   Sub-card B · Hero chart (full-bleed, dark ink strip, brush slider)
   Sub-card C · Window rhythm (rolling stats + win/loss + distribution)
   Sub-card D · Year by year
   ───────────────────────────────────────────────────── */
.fdp-perf-stack {
  display: flex; flex-direction: column; gap: var(--s-3);
}
.fdp-perf-card { padding: var(--s-4) var(--s-5); }
.fdp-perf-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: var(--s-3);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-3);
}
.fdp-tab-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.fdp-tab {
  appearance: none; background: transparent; border: 0;
  padding: 0 0 8px; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--neutral-grey);
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
  margin-bottom: -1px;
}
.fdp-tab:hover { color: var(--ink); }
.fdp-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; color: var(--ink); }
.fdp-tab.is-active { color: var(--ink); border-bottom-color: var(--signal); }
.fdp-tab.is-locked::after {
  content: " 🔒"; font-size: 9px; color: var(--neutral-grey); margin-left: 4px;
}
.fdp-period-row { display: inline-flex; gap: 4px; padding-bottom: 8px; }
.fdp-period-btn {
  appearance: none; background: var(--paper); cursor: pointer;
  padding: 4px 10px;
  border: 1px solid var(--rule-strong);
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--neutral);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.fdp-period-btn:hover { color: var(--ink); }
.fdp-period-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; color: var(--ink); }
.fdp-period-btn.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Period table */
.fdp-period-table { width: 100%; border-collapse: collapse; margin-bottom: var(--s-3); }
.fdp-period-table th {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--neutral-grey);
  padding: 8px 6px; border-bottom: 1px solid var(--rule);
}
.fdp-period-table th.left { text-align: left; }
.fdp-period-table th.num  { text-align: right; }
.fdp-period-table tbody tr {
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.fdp-period-table tbody tr:hover { background: var(--rule-fine, rgba(0,0,0,0.02)); }
.fdp-period-table tbody tr.is-active { background: rgba(40, 62, 45, 0.06); }
.fdp-period-table td {
  padding: 9px 6px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-size: 13px; color: var(--ink);
}
.fdp-period-table td.left {
  font-family: var(--mono); font-weight: 600;
  font-size: 11.5px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--neutral);
}
.fdp-period-table td.num {
  text-align: right;
  font-family: var(--mono); font-weight: 600;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.fdp-period-table td.alpha { font-weight: 700; }
.fdp-period-table tr:last-child td { border-bottom: 0; }

.fdp-perf-chart { min-height: 400px; transition: opacity var(--t-fast) var(--ease-out); margin-top: var(--s-3); }
.fdp-chart-wrap { position: relative; }
.fdp-chart-canvas { min-height: 360px; width: 100%; }
.fdp-pci-badge {
  position: absolute; top: 0; left: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 12px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  /* The badge overlays the chart and stays click-through so it doesn't
     block chart hovers, but its info icon must still be interactive. */
  pointer-events: none;
}
.fdp-pci-badge .fdp-info { pointer-events: auto; }
.fdp-pci-eyebrow {
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--neutral-grey);
}
.fdp-pci-num {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 50, "opsz" 60;
  font-size: 20px; font-weight: 380; letter-spacing: -0.012em;
  color: var(--ink); line-height: 1.0;
  font-variant-numeric: tabular-nums;
}
.fdp-chart-note {
  margin: 8px 0 0;
  font-family: var(--sans); font-size: 12px; line-height: 1.5; font-style: italic;
  color: var(--ink-soft, var(--ink)); max-width: 64ch;
}
.fdp-chart-legend {
  display: flex; gap: var(--s-5); margin-top: 8px;
  font-family: var(--mono); font-size: 10.5px; color: var(--neutral);
}
.fdp-legend-item { display: inline-flex; align-items: center; gap: 7px; }
.fdp-legend-swatch { display: inline-block; width: 14px; height: 2px; }
.fdp-legend-swatch.is-fund  { background: #211d18; height: 3px; }
.fdp-legend-swatch.is-bench {
  background: transparent; border-top: 2px dashed #a89e87; height: 0;
}

/* Rolling stats row */
.fdp-roll-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3);
  margin-top: var(--s-4); padding: var(--s-3);
  border: 1px solid var(--rule);
  background: var(--paper);
}
.fdp-stat-cell { display: flex; flex-direction: column; gap: 2px; }
.fdp-stat-lbl {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--neutral-grey);
}
.fdp-stat-val {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 50, "opsz" 60;
  font-size: 20px; font-weight: 380; line-height: 1.0;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

/* Win/loss strip wrapper */
.fdp-winloss { margin-top: var(--s-4); }
.fdp-winloss-strip { width: 100%; }

/* ── Hero sub-card (Sub-card B) ─────────────────────── */
.fdp-hero-card {
  padding: 0;
  border-color: var(--ink);   /* darker frame so it reads as the centerpiece */
  overflow: hidden;
}
.fdp-hero-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  background: var(--ink);
  color: var(--paper);
}
.fdp-hero-strip-l { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fdp-hero-strip-eye {
  margin: 0;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(244, 235, 217, 0.55);
}
.fdp-hero-strip-ctx {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 50, "opsz" 60;
  font-size: 17px; font-weight: 400; line-height: 1.25;
  color: var(--paper);
  letter-spacing: -0.010em;
  font-variant-numeric: tabular-nums;
}
.fdp-hero-strip-r { flex: none; display: flex; align-items: center; }
.fdp-hero-strip-mode {
  padding: 4px 10px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper);
  border: 1px solid rgba(244, 235, 217, 0.35);
}

/* The chart fills the card edge-to-edge — no horizontal padding. */
.fdp-hero-chart {
  position: relative;
  min-height: 560px;
  padding: 0;
  background: var(--paper-card);
}
.fdp-hero-chart-canvas { width: 100%; min-height: 560px; display: block; }

.fdp-hero-legend {
  display: flex; gap: var(--s-5);
  padding: var(--s-2) var(--s-5);
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px; color: var(--neutral);
}

/* Hero gating preview wrapper */
.fdp-hero-blur-wrap { min-height: 420px; }

/* Percentile chip in Sub-card A's Fund cell */
.fdp-pt-val { display: inline-block; margin-right: 8px; }
.fdp-perc-chip {
  display: inline-flex; align-items: center;
  padding: 2px 7px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid currentColor;
  vertical-align: middle;
}
.fdp-perc-chip.is-top { color: var(--signal); background: rgba(63, 122, 78, 0.10); }
.fdp-perc-chip.is-mid { color: var(--neutral); background: rgba(0, 0, 0, 0.03); }
.fdp-perc-chip.is-bot { color: var(--warning); background: rgba(67, 14, 19, 0.08); }
.fdp-perc-chip-rank { font-weight: 700; }
.fdp-perc-chip-peer { font-weight: 500; opacity: 0.85; }
@media (max-width: 720px) {
  /* Chip wraps to a second line under the value on mobile. */
  .fdp-pt-val { display: block; margin-right: 0; margin-bottom: 4px; }
  .fdp-perc-chip { font-size: 9px; padding: 2px 6px; }
}

/* Distribution histogram in Sub-card C */
.fdp-dist-wrap { margin-top: var(--s-4); }
.fdp-dist { display: flex; flex-direction: column; gap: var(--s-2); }
.fdp-dist-canvas {
  min-height: 120px; width: 100%;
  border: 1px solid var(--rule);
  background: var(--paper);
}
@media (max-width: 720px) {
  .fdp-dist-canvas { min-height: 80px; }
  .fdp-hero-chart, .fdp-hero-chart-canvas { min-height: 360px; }
  .fdp-hero-strip { flex-direction: column; align-items: flex-start; }
  .fdp-hero-strip-r { align-self: flex-end; }
}

/* Year-by-year block (now lives inside its own sub-card; legacy class kept) */
.fdp-year-block { margin-top: var(--s-5); }
.fdp-subblock-head { margin-bottom: var(--s-2); display: flex; flex-direction: column; gap: 2px; }
.fdp-year-table { width: 100%; border-collapse: collapse; }
.fdp-year-table th {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--neutral-grey); padding: 8px 6px;
  border-bottom: 1px solid var(--rule);
}
.fdp-year-table th.left { text-align: left; }
.fdp-year-table th.num  { text-align: right; }
.fdp-year-table td {
  padding: 7px 6px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 12.5px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fdp-year-table td.left { font-weight: 600; color: var(--neutral); }
.fdp-year-table td.num { text-align: right; }
.fdp-year-table td.alpha { font-weight: 700; }
.fdp-year-table tr:last-child td { border-bottom: 0; }

/* ─────────────────────────────────────────────────────
   BLOCK 5 · RISK (split into 4 sub-cards)
   ───────────────────────────────────────────────────── */
.fdp-risk-stack {
  display: flex; flex-direction: column; gap: var(--s-3);
}
.fdp-risk-card { padding: var(--s-5); }
.fdp-risk-panel { display: flex; flex-direction: column; gap: var(--s-2); }
.fdp-capture-table { width: 100%; border-collapse: collapse; }
.fdp-capture-table th {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--neutral-grey); padding: 6px;
  border-bottom: 1px solid var(--rule);
}
.fdp-capture-table th.left { text-align: left; }
.fdp-capture-table th.num  { text-align: right; }
.fdp-capture-table td {
  padding: 9px 6px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.fdp-capture-table td.left {
  font-weight: 600; font-size: 11.5px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--neutral);
}
.fdp-capture-table td.num { text-align: right; font-weight: 600; }
.fdp-capture-table tr:last-child td { border-bottom: 0; }
.fdp-dd-canvas { min-height: 220px; }
.fdp-dd-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3);
  margin-top: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--rule);
}

.fdp-subblock { display: flex; flex-direction: column; gap: var(--s-2); }
.fdp-event-table, .fdp-stat-table { width: 100%; border-collapse: collapse; }
.fdp-event-table th, .fdp-stat-table th {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--neutral-grey); padding: 8px 6px;
  border-bottom: 1px solid var(--rule);
}
.fdp-event-table th.left, .fdp-stat-table th.left { text-align: left; }
.fdp-event-table th.num,  .fdp-stat-table th.num  { text-align: right; }
.fdp-event-table td, .fdp-stat-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.fdp-event-table td.left, .fdp-stat-table td.left { text-align: left; color: var(--ink-soft, var(--ink)); }
.fdp-event-table td.num,  .fdp-stat-table td.num  { text-align: right; font-weight: 600; }
.fdp-event-table tr:last-child td, .fdp-stat-table tr:last-child td { border-bottom: 0; }

@media (max-width: 720px) {
  .fdp-roll-stats { grid-template-columns: 1fr 1fr; }
  .fdp-dd-stats { grid-template-columns: 1fr 1fr; }
}

/* Specs-sheet grid (replaces the 2-column stat table). Each measure is
   its own cell with eyebrow / big value / vs-benchmark note. Matches
   the live fund-detail page's .specs-sheet pattern. */
.fdp-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule-strong);
}
.fdp-spec-cell {
  background: var(--paper-card);
  padding: var(--s-3) var(--s-4);
  display: flex; flex-direction: column; gap: 4px;
}
.fdp-spec-lbl {
  margin: 0;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--neutral-grey);
  display: inline-flex; align-items: center; gap: 6px;
}
.fdp-spec-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
}
.fdp-spec-dot.is-pos { background: var(--signal); }
.fdp-spec-val {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 50, "opsz" 60;
  font-size: 22px; font-weight: 380; line-height: 1.0;
  letter-spacing: -0.018em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fdp-spec-val.is-pos { color: var(--signal); }
.fdp-spec-val.is-neg { color: var(--warning); }
.fdp-spec-note {
  margin: 0;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.06em; color: var(--neutral);
  font-variant-numeric: tabular-nums;
}

/* Year-by-year extra-row hiding + toggle */
.fdp-year-table tr.is-extra { display: none; }
.fdp-year-table.is-expanded tr.is-extra { display: table-row; }
.fdp-year-more {
  margin-top: var(--s-3);
  /* Re-uses .fdp-faq-toggle styling for consistency. */
}

/* ─────────────────────────────────────────────────────
   BLOCK 6 · PORTFOLIO TABS
   ───────────────────────────────────────────────────── */
.fdp-portfolio-card { padding: var(--s-4) var(--s-5); }
.fdp-portfolio-content { min-height: 220px; padding-top: var(--s-3); }
.fdp-portfolio-card .fdp-tab-row {
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-2); padding-bottom: 0;
}
.fdp-holdings-table, .fdp-sector-table { width: 100%; border-collapse: collapse; }
.fdp-holdings-table th, .fdp-sector-table th {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--neutral-grey);
  padding: 9px 6px;
  border-bottom: 1px solid var(--rule);
}
.fdp-holdings-table th.left, .fdp-sector-table th.left { text-align: left; }
.fdp-holdings-table th.num,  .fdp-sector-table th.num  { text-align: right; }
.fdp-holdings-table td, .fdp-sector-table td {
  padding: 9px 6px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-size: 13px; color: var(--ink);
}
.fdp-holdings-table td.left { font-weight: 500; }
.fdp-holdings-table td.sector {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--neutral);
}
.fdp-holdings-table td.num, .fdp-sector-table td.num {
  text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: 13px;
}
.fdp-holdings-table tr.is-top td { color: var(--ink); font-weight: 600; }
.fdp-alloc-canvas { min-height: 120px; padding-top: var(--s-2); }

/* ─────────────────────────────────────────────────────
   BLOCK 7 · FUND FACTS · grouped sub-cards
   Four themed cards in a 2-column grid (Management · Mandate · Costs
   · Investment). Each card holds label-value rows separated by
   hairlines; cleaner than the previous auto-fit grid of single cells.
   ───────────────────────────────────────────────────── */
.fdp-fact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.fdp-fact-card { padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.fdp-fact-rows { display: flex; flex-direction: column; }
.fdp-fact-row {
  display: grid; grid-template-columns: minmax(100px, 0.7fr) 1fr;
  gap: var(--s-3);
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.fdp-fact-row:last-child { border-bottom: 0; }
.fdp-fact-lbl {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--neutral-grey);
}
.fdp-fact-val {
  font-family: var(--sans); font-size: 13.5px; font-weight: 500; line-height: 1.4;
  color: var(--ink); font-variant-numeric: tabular-nums;
  word-break: break-word;
}
@media (max-width: 720px) {
  .fdp-fact-grid { grid-template-columns: 1fr; }
  .fdp-fact-row { grid-template-columns: 1fr; gap: 2px; padding: 6px 0; }
}

/* AI warning chip used on Q1-Q3 AI answer cards */
.fdp-ai-chip {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: 10px 12px;
  margin-bottom: var(--s-3);
  background: rgba(67, 14, 19, 0.06);
  border: 1px solid rgba(67, 14, 19, 0.30);
}
.fdp-ai-chip.is-placeholder { background: rgba(67, 14, 19, 0.08); }
.fdp-ai-chip-tag {
  flex: none;
  padding: 2px 8px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--warning); color: var(--paper);
  align-self: flex-start;
}
.fdp-ai-chip-text {
  font-family: var(--sans); font-size: 11.5px; line-height: 1.45;
  color: var(--ink-soft, var(--ink));
}

/* ─────────────────────────────────────────────────────
   BLOCK 8 · FAQ · 2-column independent cards
   (Block 8 was previously Backtest, which has been removed.)
   ───────────────────────────────────────────────────── */
.fdp-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.fdp-faq-card.is-extra { display: none; }
.fdp-faq-grid.is-expanded .fdp-faq-card.is-extra { display: block; }
.fdp-faq-card {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  padding: var(--s-4) var(--s-5);
  transition: border-color var(--t-fast) var(--ease-out);
}
.fdp-faq-card:hover { border-color: var(--rule-strong); }
.fdp-faq-card[open] { border-color: var(--rule-strong); }
.fdp-faq-summary {
  list-style: none; cursor: pointer;
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: 0;
}
.fdp-faq-summary::-webkit-details-marker { display: none; }
.fdp-faq-summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.fdp-faq-row {
  display: flex; align-items: center; justify-content: space-between;
}
.fdp-faq-num {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 50, "opsz" 60;
  font-size: 22px; font-weight: 400; line-height: 1.0;
  letter-spacing: -0.018em;
  color: var(--neutral-grey);
  font-variant-numeric: tabular-nums;
}
.fdp-faq-card[open] .fdp-faq-num { color: var(--signal); }
.fdp-faq-chev {
  font-family: var(--serif); font-size: 14px;
  color: var(--neutral-grey);
  transition: transform var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.fdp-faq-card[open] .fdp-faq-chev { transform: rotate(180deg); color: var(--ink); }
.fdp-faq-q {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 50, "opsz" 60;
  font-size: 16px; font-weight: 400; line-height: 1.35;
  letter-spacing: -0.010em;
  color: var(--ink); max-width: 30ch;
}
.fdp-faq-body { margin-top: var(--s-3); }
.fdp-faq-rule { height: 1px; background: var(--rule); margin-bottom: var(--s-3); }
.fdp-faq-text {
  margin: 0;
  font-family: var(--sans); font-size: 13.5px; line-height: 1.65;
  color: var(--ink-soft, var(--ink));
  max-width: 60ch;
}
.fdp-faq-meta {
  margin: var(--s-2) 0 0;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--neutral-grey);
}

.fdp-faq-controls {
  display: flex; gap: var(--s-3); justify-content: center;
  margin-top: var(--s-4);
}
.fdp-faq-toggle {
  appearance: none; background: transparent; cursor: pointer;
  padding: 8px 18px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.fdp-faq-toggle:hover { background: var(--ink); color: var(--paper); }
.fdp-faq-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 720px) {
  .fdp-faq-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────
   FLOATING ACTION BAR (unchanged from iter 1)
   ───────────────────────────────────────────────────── */
.fdp-action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--paper-card);
  border-top: 1px solid var(--rule-strong);
  padding: 10px var(--s-5);
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-4);
  align-items: center; min-height: 56px;
  transform: translateY(0);
  transition: transform var(--t-base) var(--ease-out);
}
.fdp-action-bar.is-hidden { transform: translateY(100%); }
.fdp-ab-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fdp-ab-fundname {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fdp-ab-cat {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--neutral-grey);
}
.fdp-ab-mid { display: flex; align-items: baseline; gap: 8px; }
.fdp-ab-navlabel {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--neutral-grey);
}
.fdp-ab-nav {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 50, "opsz" 60;
  font-size: 18px; font-weight: 400; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fdp-ab-delta { font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.fdp-ab-delta.is-pos { color: var(--signal); }
.fdp-ab-delta.is-neg { color: var(--warning); }
.fdp-ab-right { display: flex; align-items: center; gap: var(--s-3); justify-content: flex-end; }
.fdp-ab-score {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em;
  padding: 5px 9px;
  border: 1px solid var(--rule-strong); color: var(--ink);
}
.fdp-ab-score.is-locked { color: var(--neutral); }
.fdp-ab-lock { font-size: 11px; }
.fdp-ab-cta {
  appearance: none; cursor: pointer;
  padding: 8px 18px; height: 36px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--signal); color: var(--paper);
  border: 1px solid var(--signal);
  transition: background var(--t-fast) var(--ease-out);
}
.fdp-ab-cta:hover { background: var(--signal-deep, var(--ink)); border-color: var(--signal-deep, var(--ink)); }
.fdp-ab-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 720px) {
  .fdp-action-bar { grid-template-columns: 1fr auto; min-height: 64px; padding: 8px var(--s-3); }
  .fdp-ab-mid { display: none; }
}

/* ── Touch-friendly hit targets on coarse pointers ──────────────────
   Bump interactive controls toward the ~44px guideline without
   disturbing the dense desktop layout. */
@media (pointer: coarse) {
  .fdp-tab { padding-top: 9px; padding-bottom: 13px; }
  .fdp-period-btn { padding: 10px 14px; }
  .fdp-faq-toggle { padding: 12px 20px; }
  .fdp-faq-summary { padding: 4px 0; }
  .fdp-ab-cta { height: 44px; }
}

/* ── Reduced-motion: honour the OS preference ───────────────────────
   The GSAP entrance is already gated in JS; this neutralises the CSS
   transitions and any incidental animation for users who opt out. */
@media (prefers-reduced-motion: reduce) {
  .fdp-page *,
  .fdp-page *::before,
  .fdp-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}