/* ============================================================
   FORMA — Foundations
   Minimal, modern, light dashboard system
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* --- Neutral scale (warm-cool neutral, very low chroma) ----- */
  --neutral-0:   #ffffff;
  --neutral-50:  #fafafa;
  --neutral-100: #f5f5f4;
  --neutral-150: #eeeeec;
  --neutral-200: #e7e5e4;
  --neutral-300: #d6d3d1;
  --neutral-400: #a8a29e;
  --neutral-500: #78716c;
  --neutral-600: #57534e;
  --neutral-700: #44403c;
  --neutral-800: #2a2a28;
  --neutral-900: #1f1f1f;
  --neutral-950: #111110;

  /* --- Semantic surface ------------------------------------- */
  --bg:           var(--neutral-0);
  --surface:      var(--neutral-0);
  --surface-sunk: var(--neutral-50);
  --surface-2:    var(--neutral-100);
  --border:       var(--neutral-200);
  --border-strong:var(--neutral-300);
  --divider:      var(--neutral-150);

  /* --- Text ------------------------------------------------- */
  --fg:           var(--neutral-900);
  --fg-muted:     var(--neutral-600);
  --fg-subtle:    var(--neutral-500);
  --fg-faint:     var(--neutral-400);
  --fg-inverse:   var(--neutral-0);

  /* --- Accent (mono) ---------------------------------------- */
  --accent:       var(--neutral-900);
  --accent-hover: var(--neutral-800);
  --accent-fg:    var(--neutral-0);

  /* Dashboard tools pill — dark indigo default, lighter indigo when active */
  --db-brand:              oklch(0.36 0.11 268);
  --db-brand-hover:        oklch(0.32 0.12 268);
  --db-tools-indigo:       oklch(0.48 0.14 268);
  --db-tools-indigo-hover: oklch(0.44 0.15 268);
  --db-tools-active:       oklch(0.88 0.05 268);
  --db-tools-active-hover: oklch(0.84 0.06 268);
  --db-tools-active-fg:    oklch(0.32 0.11 268);

  /* Page header · example pill (baby blue) */
  --example-pill-bg:   oklch(0.93 0.05 195);
  --example-pill-fg:   oklch(0.42 0.11 195);
  --example-pill-border: oklch(0.84 0.07 195);

  /* --- Chart palette (harmonized with dashboard page gradients) --- */
  --chart-1: oklch(0.46 0.11 268);   /* primary — soft indigo slate */
  --chart-2: oklch(0.58 0.07 268);   /* secondary indigo */
  --chart-3: oklch(0.74 0.04 275);   /* comparison / previous period */
  --chart-4: oklch(0.90 0.025 278);  /* faint series */
  --chart-5: oklch(0.62 0.16 55);    /* bright orange */
  --chart-6: oklch(0.72 0.12 58);    /* light orange */
  --chart-bar:   oklch(0.89 0.03 278); /* inactive bar fill */
  --chart-track: oklch(0.93 0.02 278); /* donut track, chart baseline */

  /* --- Semantic state (used sparingly) ---------------------- */
  --positive: oklch(0.55 0.10 150);
  --negative: oklch(0.55 0.14 25);
  --warning:  oklch(0.65 0.10 80);
  --info:     oklch(0.55 0.08 240);

  /* tinted backgrounds for badges */
  --positive-bg: oklch(0.96 0.02 150);
  --negative-bg: oklch(0.96 0.02 25);
  --warning-bg:  oklch(0.96 0.02 80);
  --info-bg:     oklch(0.96 0.02 240);

  /* --- Pastel category palette ------------------------------
     Soft fills + matched legible foregrounds.
     Use for category coding: chart series, status pills,
     content-type tags. Pair `--cat-X-bg` with `--cat-X-fg`. */
  --cat-blue-bg:   oklch(0.94 0.035 240);
  --cat-blue-fg:   oklch(0.42 0.10 240);
  --cat-pink-bg:   oklch(0.94 0.040 10);
  --cat-pink-fg:   oklch(0.50 0.12 10);
  --cat-yellow-bg: oklch(0.95 0.060 90);
  --cat-yellow-fg: oklch(0.45 0.10 80);
  --cat-green-bg:  oklch(0.94 0.045 150);
  --cat-green-fg:  oklch(0.42 0.10 150);
  --cat-purple-bg: oklch(0.94 0.035 290);
  --cat-purple-fg: oklch(0.45 0.10 290);
  --cat-peach-bg:  oklch(0.94 0.045 50);
  --cat-peach-fg:  oklch(0.50 0.12 40);

  /* --- Type ------------------------------------------------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (compact density) */
  --text-2xs: 10.5px;
  --text-xs:  11.5px;
  --text-sm:  12.5px;
  --text-base:13.5px;
  --text-md:  14.5px;
  --text-lg:  16px;
  --text-xl:  19px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 48px;

  /* Numerals — slightly larger feel for KPIs */
  --text-kpi: 30px;

  /* Line heights */
  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.5;

  /* Letter-spacing (tighter as size grows) */
  --tracking-tight: -0.015em;
  --tracking-tighter: -0.025em;
  --tracking-eyebrow: 0.08em;

  /* --- Radii ------------------------------------------------ */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius:    5px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl:14px;
  --radius-full: 999px;

  /* Card / hero surfaces — slightly warmer corners */
  --radius-card: 10px;
  --radius-hero: 16px;
  --radius-pill: 999px;

  /* --- Border width ----------------------------------------- */
  --border-w: 0.5px;

  /* --- Spacing (4px base, compact) -------------------------- */
  --space-0: 0px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 16px;
  --space-8: 20px;
  --space-9: 24px;
  --space-10: 32px;
  --space-11: 40px;
  --space-12: 48px;
  --space-13: 64px;

  /* --- Elevation (soft, low-contrast) ----------------------- */
  --shadow-xs: 0 1px 0 rgba(15, 15, 15, 0.03);
  --shadow-sm: 0 1px 2px rgba(15, 15, 15, 0.04), 0 0 0 1px rgba(15, 15, 15, 0.04);
  --shadow:    0 2px 4px rgba(15, 15, 15, 0.04), 0 1px 0 rgba(15, 15, 15, 0.02);
  --shadow-md: 0 4px 12px rgba(15, 15, 15, 0.06);
  --shadow-lg: 0 12px 32px rgba(15, 15, 15, 0.08);
  --shadow-pop: 0 16px 40px rgba(15, 15, 15, 0.10), 0 2px 6px rgba(15, 15, 15, 0.05);

  /* Soft card lift — the most common card shadow */
  --shadow-card: 0 1px 2px rgba(15, 15, 15, 0.03), 0 6px 20px rgba(15, 15, 15, 0.035);

  /* --- Motion ----------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur:      180ms;
  --dur-slow: 280ms;
}

/* ============================================================
   Base typography
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  line-height: var(--leading-body);
  color:       var(--fg);
  background:  var(--bg);
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: var(--tracking-tight); color: var(--fg); margin: 0; }
h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); }
h3 { font-size: var(--text-xl); line-height: var(--leading-snug); }
h4 { font-size: var(--text-lg); line-height: var(--leading-snug); }
h5 { font-size: var(--text-md); line-height: var(--leading-snug); }
h6 { font-size: var(--text-sm); line-height: var(--leading-snug); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--fg-subtle); font-weight: 500; }

p { margin: 0; }

code, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; }

/* utility text (aliases — prefer card-* inside surfaces) */
.eyebrow,
.card-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1.3;
}

.kpi,
.card-kpi {
  font-family: var(--font-sans);
  font-size: var(--text-kpi);
  font-weight: 600;
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.tabular { font-variant-numeric: tabular-nums; }

/* ============================================================
   Card content typography — one scale, sans only
   ============================================================ */
.card-surface,
.qa-page,
.qa-accordion,
.qa-answers,
.qa-panel,
.qa-tile,
.qa-buckets,
.qa-ref-card,
.qa-ref-domain {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

.card-title {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--fg);
}

.card-title--sm {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--fg);
}

.card-hero-title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-tight);
  color: var(--fg);
}

.card-subtitle {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-subtle);
}

.card-body {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-muted);
}

.card-body p { margin: 0; }

.card-strong {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.45;
  color: var(--fg);
}

.card-meta {
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.4;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

/* — Page header — */
.page-header__title-row {
  display: inline-block;
  max-width: 100%;
}

.page-header__title-row h1 {
  display: inline;
  line-height: 1.2;
}

.page-header__example-pill {
  display: inline-flex;
  align-items: center;
  vertical-align: 0.35em;
  margin-left: 8px;
  padding: 1px 5px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  background: var(--example-pill-bg);
  color: var(--example-pill-fg);
  border: 0.5px solid var(--example-pill-border);
}

.card-feed-line {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.45;
  color: var(--fg-muted);
}

.card-feed-line .card-strong { font-weight: 600; color: var(--fg); }

.card-inline-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-5);
}

.card-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-list li {
  padding: var(--space-4) 0;
  border-bottom: var(--border-w) solid var(--divider);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-muted);
}

.card-list li:last-child { border-bottom: 0; }

/* ============================================================
   Surfaces — dark indigo atmosphere (very subtle)
   ============================================================ */
.surface-pearl {
  background:
    radial-gradient(110% 70% at 0% 0%,   oklch(0.968 0.026 264) 0%, transparent 55%),
    radial-gradient(100% 70% at 100% 0%, oklch(0.960 0.030 268) 0%, transparent 55%),
    oklch(0.984 0.012 266);
}

/* ============================================================
   Pill-tab strip — used for inline section nav
   Active tab: dark-filled. Inactive: transparent w/ hairline.
   ============================================================ */
.pill-tabs { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.pill-tab {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500;
  letter-spacing: -0.005em;
  background: transparent; color: var(--fg-muted);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-pill);
  transition:
    background var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}
.pill-tab:hover { background: var(--neutral-50); color: var(--fg); }
.pill-tab[aria-selected="true"],
.pill-tab.is-active {
  background: var(--fg);
  color: var(--fg-inverse);
  border-color: var(--fg);
}

/* ============================================================
   Q&A assignment pages (Approach + Systems · Answer)
   ============================================================ */
.qa-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 1080px;
}

.qa-intro {
  margin: 0 2px;
  max-width: 42rem;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--fg-subtle);
}

/* — Section accordion — */
.qa-accordion {
  overflow: hidden;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.qa-accordion__trigger {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-7);
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  transition: background var(--dur) var(--ease-out);
}

.qa-accordion__trigger:hover { background: var(--neutral-50); }
.qa-accordion__trigger[aria-expanded="true"] { background: var(--neutral-50); }

.qa-accordion__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-5);
}

.qa-accordion__num {
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-faint);
}

.qa-accordion__title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg);
}

.qa-accordion__chevron {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--fg-faint);
  transition: transform var(--dur) var(--ease-out);
}

.qa-accordion__trigger[aria-expanded="true"] .qa-accordion__chevron {
  transform: rotate(180deg);
}

.qa-accordion__body {
  padding: 0;
  border-top: var(--border-w) solid var(--divider);
}

/* — Question / answer block (standard order: Q → A → visuals) — */
.qa-answers {
  overflow: hidden;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.qa-answers--flat {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.qa-question-block {
  padding: var(--space-6) var(--space-7);
  border-bottom: var(--border-w) solid var(--divider);
}

.qa-question-block:last-child { border-bottom: 0; }

.qa-question {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.qa-answer {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-muted);
}

.qa-visuals {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.qa-visual--well {
  padding: var(--space-5) var(--space-6);
  background: var(--neutral-50);
  border-radius: var(--radius-md);
}

.qa-visual--well .qa-visual__label {
  margin-top: 0;
}

/* Inside a visual well: no nested card boxes */
.qa-visual--well .qa-panel,
.qa-visual--well .qa-tile,
.qa-visual--well .qa-buckets,
.qa-visual--well .qa-split {
  border-color: var(--divider);
}

.qa-visual--well > .qa-panel,
.qa-visual--well > .qa-grid,
.qa-visual--well > .qa-split,
.qa-visual--well > .qa-buckets,
.qa-visual--well > .qa-panel--stack {
  border: var(--border-w) solid var(--divider);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}

.qa-visual--well .qa-grid .qa-tile {
  border: 0;
  border-radius: 0;
  background: transparent;
  border-right: var(--border-w) solid var(--divider);
}

.qa-visual--well .qa-grid--3 .qa-tile:nth-child(3n) { border-right: 0; }
.qa-visual--well .qa-grid--2 .qa-tile:nth-child(2n) { border-right: 0; }

.qa-visual--well .qa-panel--stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.qa-visual--well .qa-group--stacked + .qa-group--stacked {
  border-top: var(--border-w) solid var(--divider);
}

.qa-visual--well .qa-group--stacked .qa-group__head {
  background: var(--neutral-50);
}

.qa-panel-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Two-column split (rhythm + systems, etc.) */
.qa-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qa-split__col {
  min-width: 0;
}

.qa-split__col + .qa-split__col {
  border-left: var(--border-w) solid var(--divider);
}

.qa-split__title {
  padding: var(--space-4) var(--space-6);
  border-bottom: var(--border-w) solid var(--divider);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
  background: var(--neutral-50);
}

.qa-visual--well > .card-list {
  margin: 0;
  padding: var(--space-4) var(--space-6);
  border: var(--border-w) solid var(--divider);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.qa-visual__label {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.qa-visual__lead {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

.qa-note {
  margin: var(--space-5) 0 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--fg-faint);
}

.qa-ref {
  margin: var(--space-5) 0 0;
  font-size: var(--text-xs);
  font-style: italic;
  line-height: 1.45;
  color: var(--fg-faint);
}

/* — Panel + table (shared data display) — */
.qa-panel {
  overflow: hidden;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.qa-panel__title {
  padding: var(--space-4) var(--space-6);
  border-bottom: var(--border-w) solid var(--border);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
  background: var(--neutral-50);
}

.qa-table__row {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  border-bottom: var(--border-w) solid var(--divider);
}

.qa-table__row:last-child { border-bottom: 0; }

.qa-table__row--alert { background: oklch(0.985 0.015 20 / 0.45); }

.qa-table__label {
  padding: var(--space-4) var(--space-6);
  border-right: var(--border-w) solid var(--border);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.45;
  color: var(--fg);
  background: var(--neutral-50);
}

.qa-table__row--alert .qa-table__label { color: var(--negative); }

.qa-table__value {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

.qa-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-6);
  border-bottom: var(--border-w) solid var(--border);
  background: var(--neutral-100);
}

.qa-group__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg);
}

.qa-group__meta {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--fg-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* — Card grid + tiles — */
.qa-grid {
  display: grid;
  gap: var(--space-5);
}

.qa-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.qa-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.qa-tile--muted { background: var(--neutral-50); }

.qa-tile__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.qa-tile__head .qa-tile__title {
  flex: 1;
  margin: 0;
}

.qa-tile__kicker {
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-faint);
}

.qa-tile__badge {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--fg-muted);
  background: var(--neutral-100);
}

.qa-tile__title,
.card-surface .qa-tile__title {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.qa-tile__body {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

.qa-tile__list {
  margin: 0;
  padding: var(--space-5) 0 0;
  list-style: none;
  border-top: var(--border-w) solid var(--divider);
}

.qa-tile__list li {
  padding: var(--space-4) 0;
  border-bottom: var(--border-w) solid var(--divider);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--fg-muted);
}

.qa-tile__list li:last-child { border-bottom: 0; }

/* — Three-column bucket (leadership model) — */
.qa-buckets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.qa-bucket {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6) var(--space-7);
  border-right: var(--border-w) solid var(--border);
}

.qa-bucket:last-child { border-right: 0; }

.qa-bucket__title {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg);
}

.qa-bucket__dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 2px;
}

.qa-bucket__list {
  margin: 0;
  padding: var(--space-5) 0 0;
  list-style: none;
  border-top: var(--border-w) solid var(--divider);
}

.qa-bucket__list li {
  padding: var(--space-4) 0;
  border-bottom: var(--border-w) solid var(--divider);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--fg-muted);
}

.qa-bucket__list li:last-child { border-bottom: 0; }

/* — Multi-column prose table (personal dev) — */
.qa-matrix__row {
  display: grid;
  grid-template-columns: minmax(148px, 0.85fr) 1fr 1fr;
  border-bottom: var(--border-w) solid var(--divider);
}

.qa-matrix__row:last-child { border-bottom: 0; }

.qa-matrix__cell {
  padding: var(--space-5) var(--space-6);
  border-right: var(--border-w) solid var(--border);
}

.qa-matrix__cell:last-child { border-right: 0; }

.qa-matrix__cell--label {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg);
  background: var(--neutral-50);
}

.qa-matrix__sub {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.qa-matrix__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

/* — Domain / health / stack mini cards — */
.qa-domain__badge {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.qa-tile--phase {
  position: relative;
  padding-top: var(--space-7);
}

.qa-tile__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: var(--radius) var(--radius) 0 0;
}

.qa-tile__phase {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

.qa-tile__timeline {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--fg-faint);
}

.qa-stack-path {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.qa-stack-path__item {
  padding: var(--space-5) var(--space-6);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--neutral-50);
}

.qa-stack-path__label {
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.qa-stack-path__note {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--fg-muted);
}

.qa-alert {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.qa-alert__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--neutral-50);
}

.qa-alert__dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 999px;
}

.qa-alert__rule {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.45;
  color: var(--fg-muted);
}

/* — Stack compact tile (Answer tab · architecture snippets) — */
.qa-tile--stack {
  position: relative;
  padding-top: calc(var(--space-5) + 2px);
}

.qa-tile--stack::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--qa-stack-accent, var(--border));
}

.qa-tile--stack .qa-tile__title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--qa-stack-accent, var(--fg-subtle));
}

/* — Reference tabs (Architecture · Domains) — */
.qa-ref-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 1080px;
}

.qa-ref-card {
  overflow: hidden;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.qa-ref-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-7);
  border-bottom: var(--border-w) solid var(--border);
  background: var(--neutral-50);
}

.qa-ref-card__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.qa-ref-card__meta {
  font-size: var(--text-xs);
  color: var(--fg-subtle);
}

.qa-ref-card__body {
  padding: var(--space-6) var(--space-7);
}

.qa-ref-health {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.qa-ref-health__cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-7);
  border-right: var(--border-w) solid var(--border);
}

.qa-ref-health__cell:last-child { border-right: 0; }

.qa-ref-health__index {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.qa-ref-health__title {
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg);
}

.qa-ref-health__cadence {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  width: fit-content;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  background: var(--neutral-100);
}

.qa-ref-domain-section__label {
  margin: 0 0 var(--space-4);
  padding: 0 2px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.qa-ref-domain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.qa-ref-domain {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 200px;
  padding: var(--space-6) var(--space-7);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.qa-ref-domain__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
}

.qa-ref-domain__index {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.qa-ref-domain__title {
  margin-top: var(--space-2);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg);
}

.qa-ref-domain__summary {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

.qa-ref-domain__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: stretch;
}

.qa-ref-domain__group + .qa-ref-domain__group {
  padding-top: var(--space-4);
  border-top: var(--border-w) solid var(--divider);
}

.qa-ref-domain__group-label {
  margin: 0;
  padding: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
  line-height: 1.3;
}

.qa-ref-domain__group .qa-tile__list {
  margin: 0;
  padding: 0;
  border-top: 0;
}

.qa-ref-stack-layer {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: var(--space-6);
  padding-bottom: var(--space-2);
}

.qa-ref-stack-layer__label {
  padding-top: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.qa-ref-stack-layer__note {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--fg-subtle);
}

.qa-ref-stack-divider {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) 0;
}

.qa-ref-stack-divider__line {
  flex: 1;
  height: 1px;
  background: var(--divider);
}

/* ============================================================
   90 Day Plan — unified timeline + approach + systems
   ============================================================ */
.plan90-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 1400px;
  font-family: var(--font-sans);
}

.plan90-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
  padding-right: var(--space-8);
}

.plan90-main {
  display: flex;
  flex-direction: column;
  padding-bottom: 80px;
  padding-right: var(--space-6);
}

.plan90-layout--overview {
  align-items: stretch;
}

.plan90-layout--overview .plan90-main,
.plan90-layout--overview .plan90-aside,
.plan90-layout--overview .plan90-aside__stack {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.plan90-layout--overview .plan90-main > .plan90-welcome-video,
.plan90-layout--overview .plan90-outline {
  flex: 1;
  min-height: 0;
}

.plan90-layout--overview .plan90-main {
  padding-bottom: 0;
}

.plan90-layout--overview .plan90-welcome-video {
  position: relative;
}

.plan90-layout--overview .plan90-welcome-video .plan90-welcome-video__media {
  position: absolute;
  inset: 0;
  flex: none;
}

.plan90-layout--overview .plan90-welcome-video > .plan90-welcome-video__footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  border-top: 0;
  background: linear-gradient(
    to top,
    var(--surface) 0%,
    color-mix(in oklab, var(--surface) 92%, transparent) 55%,
    transparent 100%
  );
  pointer-events: none;
}

.plan90-layout--overview .plan90-welcome-video > .plan90-welcome-video__footer .card-hero-title {
  pointer-events: auto;
}

.plan90-welcome-video__media {
  flex: 1 1 auto;
  min-height: 0;
}

.plan90-aside {
  position: sticky;
  top: 0;
  padding-right: var(--space-6);
}

.plan90-aside__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* — Timeline rail — */
.plan90-section {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: var(--space-7);
  position: relative;
}

.plan90-section__rail {
  position: relative;
}

.plan90-section__spine {
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 0;
  width: 1px;
  background: var(--divider);
  transform: translateX(-50%);
}

.plan90-section__marker {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  margin: 8px auto 0;
  background: var(--surface);
  border: 1px solid var(--fg);
  border-radius: 2px;
}

.plan90-section:not(:last-child) {
  padding-bottom: var(--space-9);
  margin-bottom: var(--space-9);
  border-bottom: var(--border-w) solid var(--divider);
}

.plan90-section__content {
  padding-bottom: 0;
}

.plan90-section__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-bottom: var(--space-6);
}

.plan90-section__range {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.plan90-section__topics {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.plan90-section__milestones {
  margin-top: 0;
}

/* — Question unit: Q header + answer subheader + support cards — */
.plan90-topic {
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-8);
}

.plan90-topic--last {
  margin-bottom: 0;
  padding-bottom: 0;
}

.plan90-section__milestones + .plan90-topic--last,
.plan90-section__topics .plan90-topic--last:not(:only-child) {
  margin-bottom: 0;
}

.plan90-topic__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.plan90-topic__q {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-snug);
  color: var(--fg);
  max-width: 720px;
}

.plan90-topic__a {
  margin: 0;
  max-width: 720px;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--fg-muted);
}

.plan90-topic__a + .plan90-topic__a {
  margin-top: var(--space-4);
}

.plan90-topic__support {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.plan90-topic__support + .plan90-topic__a {
  margin-top: var(--space-5);
}

/* Subtle inset — bulleted, numbered, and detail lists under Q&A answers */
.plan90-page {
  --plan90-list-indent: var(--space-6);
}

.plan90-support-block > .plan90-bullets,
.plan90-support-block > .plan90-big-list,
.plan90-section__milestones .plan90-task-list {
  margin-left: var(--plan90-list-indent);
}

.plan90-support-block--reference {
  margin-left: 0;
  gap: var(--space-4);
}

/* Flat module tiles — no outer plan90-card wrapper */
.plan90-support-block > .plan90-tiles {
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}

.plan90-support-block > .plan90-split {
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}

.plan90-support-block--reference .plan90-support-block__label {
  margin-bottom: var(--space-3);
}

/* Architecture — flat on Plan 90 (no outer ref card) */
.qa-ref-stack--plan90 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.qa-ref-stack-layer--tight {
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--space-4);
  padding-bottom: 0;
}

.qa-ref-stack-layer--tight .qa-ref-stack-layer__note {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--fg-faint);
}

.qa-ref-stack-divider--tight {
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.qa-ref-domain-grid--tight {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.qa-ref-domain--tight {
  min-height: 0;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}

.qa-ref-domain--tight .qa-ref-domain__head {
  display: block;
}

.qa-ref-domain--tight .qa-ref-domain__title {
  margin-top: 0;
  font-size: var(--text-sm);
  line-height: 1.3;
}

.qa-ref-domain--tight .qa-ref-domain__summary {
  font-size: var(--text-xs);
  line-height: 1.4;
}

.qa-ref-domain--tight .qa-ref-domain__group {
  gap: var(--space-2);
}

.qa-ref-domain--tight .qa-ref-domain__group + .qa-ref-domain__group {
  padding-top: var(--space-3);
}

.qa-ref-domain--tight .qa-ref-domain__group-label {
  font-size: 10px;
}

.qa-ref-domain--tight .qa-tile__list {
  padding-top: 0;
}

.qa-ref-domain--tight .qa-tile__list li {
  padding: var(--space-2) 0;
  font-size: var(--text-xs);
  line-height: 1.4;
}

.qa-ref-domain--tight .qa-domain__badge {
  font-size: 10px;
  padding: 2px 6px;
  letter-spacing: 0.02em;
}

/* Marker lists: spacing only — no row dividers */
.plan90-support-block > .plan90-bullets,
.plan90-support-block > .plan90-big-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.plan90-support-block > .plan90-bullets > li,
.plan90-support-block > .plan90-big-list .plan90-big-list__item {
  border-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* — Unified card blocks — */
.plan90-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.plan90-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.plan90-card__label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.plan90-card__lead,
.plan90-card__note {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

.plan90-card__note {
  font-size: var(--text-xs);
  color: var(--fg-faint);
}

.plan90-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.plan90-qa-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.plan90-qa {
  padding: var(--space-5) 0;
  border-bottom: var(--border-w) solid var(--divider);
}

.plan90-qa:first-child {
  padding-top: 0;
}

.plan90-qa:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.plan90-qa__q {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg);
}

.plan90-qa__a {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--fg-muted);
}

.plan90-bullets {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan90-bullets li {
  position: relative;
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

.plan90-health-cell .plan90-bullets li,
.plan90-card .plan90-bullets li {
  border-bottom: var(--border-w) solid var(--divider);
}

.plan90-health-cell .plan90-bullets li:last-child,
.plan90-card .plan90-bullets li:last-child {
  border-bottom: 0;
}

.plan90-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--fg-faint);
}

/* Timeline-style marker column + content (flat support lists) */
.plan90-support-block > .plan90-bullets > li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: var(--space-5);
  align-items: start;
}

.plan90-support-block > .plan90-bullets > li::before {
  position: relative;
  top: auto;
  left: auto;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
}

.plan90-bullets--outcomes li {
  color: var(--fg);
  font-weight: 400;
}

.plan90-bullets--compact li {
  padding-left: var(--space-5);
}

.plan90-bullets--dash li {
  padding-left: var(--space-7);
}

.plan90-bullets--dash li::before {
  content: "—";
  top: 0.65em;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-faint);
}

.plan90-support-block > .plan90-bullets.plan90-bullets--dash > li {
  grid-template-columns: 20px minmax(0, 1fr);
  padding-left: 0;
}

.plan90-support-block > .plan90-bullets.plan90-bullets--dash > li::before {
  content: "—";
  justify-self: start;
  align-self: start;
  top: auto;
}

/* Hollow circles — matches Timeline milestone markers */
.plan90-bullets--circle li {
  padding-left: 22px;
}

.plan90-bullets--circle li::before {
  content: "";
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--fg);
  box-shadow: 0 0 0 1px var(--surface);
}

.plan90-support-block > .plan90-bullets.plan90-bullets--circle > li {
  padding-left: 0;
}

.plan90-support-block > .plan90-bullets.plan90-bullets--circle > li::before {
  top: auto;
  align-self: center;
  justify-self: center;
}

/* — Tables — */
.plan90-table,
.plan90-groups,
.plan90-split,
.plan90-tiles,
.plan90-buckets,
.plan90-matrix {
  overflow: hidden;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.plan90-table__row,
.plan90-group .plan90-table__row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  border-bottom: var(--border-w) solid var(--divider);
}

.plan90-table__row:last-child {
  border-bottom: 0;
}

.plan90-table__row--alert {
  background: oklch(0.985 0.015 20 / 0.4);
}

.plan90-table__label {
  padding: var(--space-4) var(--space-6);
  border-right: var(--border-w) solid var(--divider);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg);
  background: var(--neutral-50);
}

.plan90-table__row--alert .plan90-table__label {
  color: var(--negative);
}

.plan90-table__value {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

.plan90-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.plan90-split__col + .plan90-split__col {
  border-left: var(--border-w) solid var(--divider);
}

.plan90-split__title {
  padding: var(--space-4) var(--space-6);
  border-bottom: var(--border-w) solid var(--divider);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
  background: var(--neutral-50);
}

.plan90-split__col .plan90-table {
  border: 0;
  border-radius: 0;
}

.plan90-split__items {
  margin: 0;
  padding: var(--space-4) var(--space-6) var(--space-5);
  list-style: none;
}

.plan90-split__items li {
  padding: var(--space-3) 0;
  border-bottom: var(--border-w) solid var(--divider);
}

.plan90-split__items li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.plan90-split__items--simple li {
  border-bottom: 0;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--fg-muted);
}

.plan90-split__items--simple li:first-child {
  padding-top: 0;
}

.plan90-split__col .plan90-split__items--simple > li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: start;
  padding-left: 0;
}

.plan90-split__col .plan90-split__items--simple > li::before {
  position: relative;
  top: auto;
  left: auto;
  align-self: center;
  justify-self: center;
}

.plan90-split__col .plan90-split__items--simple {
  padding-top: var(--space-3);
}

.plan90-split__item-title {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg);
}

.plan90-split__item-detail {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

.plan90-split--tight .plan90-split__items {
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.plan90-split--tight .plan90-split__items li {
  padding: var(--space-2) 0;
}

.plan90-split--tight .plan90-split__item-detail {
  margin-top: var(--space-1);
}

.plan90-split--tight .plan90-split__title {
  padding: var(--space-3) var(--space-4);
}

.plan90-split--tight .plan90-table__row {
  grid-template-columns: 96px minmax(0, 1fr);
}

.plan90-split--tight .plan90-table__label,
.plan90-split--tight .plan90-table__value {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.plan90-table--inline {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.plan90-table--tight .plan90-table__row {
  grid-template-columns: 112px minmax(0, 1fr);
}

.plan90-table--tight .plan90-table__label,
.plan90-table--tight .plan90-table__value {
  padding: var(--space-3) var(--space-4);
  line-height: 1.45;
}

.plan90-groups {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.plan90-group + .plan90-group {
  border-top: var(--border-w) solid var(--divider);
}

.plan90-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-6);
  background: var(--neutral-100);
  border-bottom: var(--border-w) solid var(--divider);
}

.plan90-group__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg);
}

.plan90-group__meta {
  font-size: var(--text-xs);
  color: var(--fg-faint);
}

/* — Tiles — */
.plan90-tiles {
  display: grid;
}

.plan90-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan90-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan90-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 900px) {
  .plan90-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.plan90-tile {
  padding: var(--space-5) var(--space-6);
  border-right: var(--border-w) solid var(--divider);
}

.plan90-tile:last-child {
  border-right: 0;
}

.plan90-tiles--3 .plan90-tile:nth-child(3n) { border-right: 0; }
.plan90-tiles--2 .plan90-tile:nth-child(2n) { border-right: 0; }
.plan90-tiles--4 .plan90-tile:nth-child(2n) { border-right: 0; }

@media (min-width: 900px) {
  .plan90-tiles--4 .plan90-tile { border-right: var(--border-w) solid var(--divider); }
  .plan90-tiles--4 .plan90-tile:nth-child(2n) { border-right: var(--border-w) solid var(--divider); }
  .plan90-tiles--4 .plan90-tile:nth-child(4n) { border-right: 0; }
}

.plan90-tile__title {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg);
}

.plan90-tile__body {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

.plan90-tile--phase {
  position: relative;
  padding-top: var(--space-6);
}

.plan90-tile__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}

.plan90-tile__phase {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

.plan90-tile__meta {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--fg-faint);
}

.plan90-tile--stack {
  position: relative;
  padding-top: var(--space-6);
}

.plan90-tile--stack::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--plan90-stack-accent, var(--fg-muted));
}

/* — Health grid (Systems · AI leverage) — */
.plan90-health-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.plan90-health-cell {
  padding: var(--space-5) var(--space-6);
  border-right: var(--border-w) solid var(--divider);
  border-bottom: var(--border-w) solid var(--divider);
}

.plan90-health-cell:nth-child(2n) {
  border-right: 0;
}

.plan90-health-cell:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.plan90-health-cell__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.plan90-health-cell__index {
  font-size: var(--text-xs);
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.plan90-health-cell__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg);
}

.plan90-health-cell__cadence {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  color: var(--fg-faint);
}

/* — Flat support block (timeline-style, no card chrome) — */
.plan90-support-block {
  padding-top: var(--space-2);
}

.plan90-support-block__label {
  margin-bottom: var(--space-5);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.plan90-support-block__note {
  margin: calc(-1 * var(--space-3)) 0 var(--space-5);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--fg-faint);
}

/* — Big-bullet priority list (flat, no nested cards) — */
.plan90-big-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan90-big-list--numbered {
  counter-reset: plan90-priority;
}

.plan90-big-list--numbered .plan90-big-list__item {
  counter-increment: plan90-priority;
}

.plan90-big-list--numbered .plan90-big-list__item::before {
  content: counter(plan90-priority);
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  top: 0.05em;
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

.plan90-big-list__item {
  position: relative;
  padding: var(--space-5) 0;
}

.plan90-big-list__item:first-child {
  padding-top: 0;
}

.plan90-big-list__item:last-child {
  padding-bottom: 0;
}

.plan90-big-list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--fg);
}

.plan90-big-list__item:first-child::before {
  top: 0.5em;
}

/* Timeline-style: fixed marker column, title + body in content column */
.plan90-support-block > .plan90-big-list .plan90-big-list__item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: var(--space-5);
  align-items: start;
  padding-left: 0;
}

.plan90-support-block > .plan90-big-list--numbered .plan90-big-list__item {
  grid-template-columns: 22px minmax(0, 1fr);
}

.plan90-support-block > .plan90-big-list .plan90-big-list__item::before {
  position: relative;
  top: auto;
  left: auto;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  margin-top: 0.35em;
}

.plan90-support-block > .plan90-big-list--numbered .plan90-big-list__item::before {
  margin-top: 0;
  top: auto;
}

.plan90-support-block > .plan90-big-list .plan90-big-list__title {
  grid-column: 2;
  grid-row: 1;
}

.plan90-support-block > .plan90-big-list .plan90-big-list__body,
.plan90-support-block > .plan90-big-list .plan90-big-list__summary {
  grid-column: 2;
  grid-row: 2;
}

.plan90-support-block > .plan90-big-list .plan90-big-list__subitems {
  grid-column: 2;
  grid-row: 3;
  margin: var(--space-3) 0 0;
  margin-left: 0;
  max-width: 640px;
}

.plan90-support-block > .plan90-big-list .plan90-big-list__details {
  grid-column: 2;
  grid-row: 3;
}

.plan90-support-block > .plan90-big-list .plan90-big-list__body + .plan90-big-list__details,
.plan90-support-block > .plan90-big-list .plan90-big-list__body + .plan90-big-list__subitems {
  grid-row: 3;
}

.plan90-support-block > .plan90-big-list .plan90-big-list__subitems + .plan90-big-list__details {
  grid-row: 4;
}

.plan90-big-list__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.plan90-big-list__body {
  margin: 0;
  max-width: 640px;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--fg-muted);
}

.plan90-big-list__summary {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--fg-muted);
}

.plan90-big-list__details {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.plan90-big-list__details li {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--space-4);
  padding: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.plan90-big-list__detail-label {
  font-weight: 600;
  color: var(--fg);
}

.plan90-big-list__detail-value {
  color: var(--fg-muted);
}

/* — Buckets — */
.plan90-buckets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.plan90-bucket {
  padding: var(--space-5) var(--space-6);
  border-right: var(--border-w) solid var(--divider);
}

.plan90-bucket:last-child {
  border-right: 0;
}

.plan90-bucket__title {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg);
}

.plan90-bucket__dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 2px;
}

/* — Matrix — */
.plan90-matrix__row {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) 1fr 1fr;
  border-bottom: var(--border-w) solid var(--divider);
}

.plan90-matrix__row:last-child {
  border-bottom: 0;
}

.plan90-matrix__area {
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg);
  background: var(--neutral-50);
  border-right: var(--border-w) solid var(--divider);
}

.plan90-matrix__cell {
  padding: var(--space-5) var(--space-6);
  border-right: var(--border-w) solid var(--divider);
}

.plan90-matrix__cell:last-child {
  border-right: 0;
}

.plan90-matrix__cell p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

.plan90-matrix__sub {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

/* — Tasks (flat list, no nested card) — */
.plan90-support-block--tasks {
  padding-top: var(--space-6);
  border-top: var(--border-w) solid var(--divider);
}

.plan90-task-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan90-task {
  padding: var(--space-5) 0;
  border-bottom: var(--border-w) solid var(--divider);
}

.plan90-task:first-child {
  padding-top: 0;
}

.plan90-task:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.plan90-task__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg);
  line-height: 1.4;
}

.plan90-task__desc {
  margin: 0;
  max-width: 640px;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--fg-muted);
}

/* — Outline — */
.plan90-outline__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan90-outline__spine {
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--divider);
}

.plan90-outline__btn {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--space-4);
  align-items: center;
  width: 100%;
  padding: var(--space-4) var(--space-6) var(--space-4) 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  border-radius: var(--radius-sm);
  transition: background var(--dur) var(--ease-out);
}

.plan90-outline__btn:hover {
  background: var(--neutral-50);
}

.plan90-outline__dot {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.plan90-outline__btn--active .plan90-outline__dot {
  background: var(--fg);
  border-color: var(--fg);
}

.plan90-outline__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.plan90-outline__name {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--fg-muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan90-outline__btn--active .plan90-outline__name {
  font-weight: 600;
  color: var(--fg);
}

.plan90-outline__questions {
  margin: 0;
  padding: 2px 0 var(--space-3) 26px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plan90-outline__question-btn {
  display: block;
  width: 100%;
  padding: 6px 8px 6px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.45;
  color: var(--fg-subtle);
  border-radius: var(--radius-sm);
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

.plan90-outline__question-btn:hover {
  color: var(--fg);
  background: var(--neutral-50);
}

.plan90-outline__range {
  font-size: var(--text-xs);
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.plan90-outline__foot {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-w) solid var(--divider);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* — Dashboard · Sales funnel by rep — */
.sales-funnel {
  width: 100%;
  overflow-x: auto;
}

.sales-funnel table {
  width: 100%;
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
}

.sales-funnel th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 10px;
  border-bottom: 0.5px solid var(--border);
  white-space: nowrap;
}

.sales-funnel__stage-head {
  text-align: center;
}

.sales-funnel__num-head {
  text-align: right;
}

.sales-funnel td {
  padding: 10px 10px;
  border-bottom: 0.5px solid var(--divider);
  vertical-align: middle;
}

.sales-funnel tbody tr:hover td {
  background: var(--neutral-50);
}

.sales-funnel__rep {
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
}

.sales-funnel__stage {
  text-align: center;
}

.sales-funnel__stage--hot {
  background: oklch(0.97 0.02 268);
}

.sales-funnel__stage--lost {
  background: var(--negative-bg);
}

.sales-funnel__deals {
  display: block;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  line-height: 1.3;
}

.sales-funnel__value {
  display: block;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--fg-subtle);
  line-height: 1.3;
}

.sales-funnel__total {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  white-space: nowrap;
}

.sales-funnel__activity {
  font-size: var(--text-sm);
  color: var(--fg-subtle);
  line-height: 1.45;
  max-width: 200px;
}

/* — Dashboard · Activity top row (equal-height cards) — */
.activity-cards-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.activity-cards-row__card {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.activity-card-list {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.activity-card-list__row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  padding: 8px 0;
  box-sizing: border-box;
}

.activity-card-list__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.activity-card-list__title {
  line-height: 1.35;
}

.activity-card-list__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.activity-card-list--feed > div > div {
  min-height: 56px;
  padding: 8px 0;
  box-sizing: border-box;
}

/* — Dashboard · Activity shared files — */
.shared-files {
  display: flex;
  flex-direction: column;
}

.shared-files__head,
.shared-files__row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 160px 72px;
  gap: 16px;
  align-items: center;
}

.shared-files__head {
  padding: 0 0 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  border-bottom: 0.5px solid var(--border);
}

.shared-files__row {
  padding: 12px 0;
}

.shared-files__row:hover {
  background: var(--neutral-50);
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: var(--radius-sm);
}

.shared-files__source {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.shared-files__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--neutral-50);
}

.shared-files__favicon {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
}

.shared-files__source-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-muted);
  white-space: nowrap;
}

.shared-files__file {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.shared-files__file-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.shared-files__owner {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
}

.shared-files__time {
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .shared-files__head {
    display: none;
  }

  .shared-files__row {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 8px 12px;
  }

  .shared-files__source-label {
    display: none;
  }

  .shared-files__owner,
  .shared-files__time {
    grid-column: 2;
  }

  .shared-files__time {
    text-align: left;
  }
}