/* ========================================================================
   VC Components — Reusable UI components for RetirePlusPlus capital raising
   ======================================================================== */

/* ========================================================================
   LEGACY Series-A component block REMOVED (round-1 fix · E3).
   The ~810-line pre-foundation block (.vc-cover, legacy .metric-card/.value/
   .trend, .highlight-box, .financial-table, legacy .chart-container/
   .diagram-container, legacy .timeline, legacy .doc-card/.doc-icon.pdf chips,
   .competitive-matrix, legacy .vc-nav/.nav-links/.nav-cta, .market-funnel/
   .funnel-level, .funds-breakdown/.fund-item, .section-number, legacy
   .vc-quote, .toc/.toc-list, legacy .pillar-card) was dead code: zero live
   HTML references, and every live component is now served by the token-driven
   definitions further down (§2.x). Deleting it removes the raw hexes that sat
   outside the token system (#1a3580, #EFF6FF/#F0F9FF/#F5F3FF/#EDE9FE/#ECFDF5/
   #D1FAE5, the #FEE2E2/#DC2626/#DBEAFE/#2563EB/#FEF3C7/#D97706/#059669 doc-icon
   chips) and the duplicate .metric-card/.pillar-card/.pillar-icon rule sets, so
   each component now has exactly one definition.

   Three legacy families had live markup but NO new-layer equivalent, so they
   are KEPT below — re-expressed with §1 semantic tokens (no raw hex, no legacy
   palette reliance): .team-grid/.team-card, .form-group/.form-row layout, and
   the .investor-form card shell.
   ======================================================================== */

/* --- Team Cards  (.team-grid / .team-card) — token-driven --------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
  gap: var(--space-6);
  margin: var(--space-8) 0;
}
.team-card {
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.team-card:hover {
  box-shadow: var(--shadow-lg);
  transform: var(--lift);
}
.team-card .avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--grad-brand);
  color: var(--text-on-brand);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
}
.team-card .name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}
.team-card .title {
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  color: var(--accent-secondary);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.team-card .bio {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* --- Form layout  (.form-group / .form-row) — token-driven -------------- */
/* Input/label theming lives in §2.15 (.vc-form …); this is the layout only,
   so non-.vc-form forms keep correct spacing + a sensible field baseline.   */
.form-group { margin-bottom: var(--space-4); }
.form-group label {
  display: block;
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--focus-ring);
}
.form-group textarea {
  min-height: 7.5rem;
  resize: vertical;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 40rem) {
  .form-row { grid-template-columns: 1fr; }
}

/* --- Investor contact form shell  (.investor-form) — token-driven ------- */
.investor-form {
  background: var(--bg-surface-2);
  border: 0.0625rem solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin: var(--space-8) 0;
}

/* ========================================================================
   ========================================================================
   SERIES-B FOUNDATION EXTENSION  (Phase 0 · owner: FOUND-COMPONENTS)
   ------------------------------------------------------------------------
   Everything BELOW this banner is the unified, token-driven component layer
   for the $30M Series B build. It consumes the §1 SEMANTIC tokens authored
   by FOUND-TOKENS in vc-tokens.css (--bg-*, --text-*, --border-*, --accent-*,
   --status-*, --fs-*, --space-*, --radius-*, --shadow-*, --dur-*, --ease-*,
   --grad-*, --font-display/ui/data, layout tokens). NO raw hexes here.

   Components reference SEMANTIC ROLES only, so dark theme "just works"
   ([data-theme="dark"] swaps the role values; no per-component dark blocks).

   The pre-foundation Series-A block that used to sit above has been removed
   (round-1 fix · E3); the only legacy families retained (team/form/investor-
   form) are now token-driven too, so EVERY component in this sheet sources §1
   semantic roles and carries exactly one definition.
   ======================================================================== */

/* ---- shared a11y primitive: visually-hidden (SR-only) text -------------- */
.visually-hidden,
.vc-sr-only {
  position: absolute !important;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  margin: -0.0625rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Re-show when focused (skip-links etc.) */
.vc-sr-only-focusable:focus,
.vc-sr-only-focusable:focus-within {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ---- global focus-visible ring (design §6.2) ---------------------------- */
.vc-scope :focus-visible,
.vc-nav :focus-visible,
.vc-modal :focus-visible,
.vc-cta :focus-visible,
.vc-footer :focus-visible {
  outline: 0.125rem solid transparent;        /* kept for forced-colors */
  outline-offset: 0.125rem;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

/* Hydration skeleton: any element awaiting data shows a dash placeholder.
   invest-data.js sets aria-busy="true" until a value lands.                 */
[data-bind][aria-busy="true"],
[data-bind-list][aria-busy="true"] {
  color: var(--text-muted);
}

/* ========================================================================
   §2.1  Global nav  (.vc-nav) — token rebuild + --ondark + mobile disclosure
   The legacy .vc-nav above is solid-blue; this block restyles the shared
   element to the tokenised, theme-aware spec. Shared sheets load after the
   legacy definition, so this wins for adopting pages.
   ======================================================================== */
.vc-nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--gutter);
  z-index: 300;
  background: color-mix(in srgb, var(--bg-canvas) 88%, transparent);
  backdrop-filter: blur(0.75rem);
  -webkit-backdrop-filter: blur(0.75rem);
  border-bottom: 0.0625rem solid var(--border-subtle);
}
.vc-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--max-width-wide);
  margin: 0 auto;
}
.vc-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
}
.vc-nav__brand:hover { color: var(--text-primary); text-decoration: none; }

/* OTROTL globe launcher + any icon-only nav control */
.vc-nav__globe,
.vc-nav__icon-btn {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 0.0625rem solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--fs-lg);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.vc-nav__globe:hover,
.vc-nav__icon-btn:hover {
  background: var(--bg-surface-2);
  color: var(--text-primary);
}

.vc-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: 0 auto;          /* center cluster */
  padding: 0;
  list-style: none;
}
.vc-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.vc-nav__link:hover { color: var(--text-primary); text-decoration: none; }
.vc-nav__link[aria-current="page"] { color: var(--accent-primary); }
.vc-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  height: 0.125rem;
  border-radius: var(--radius-pill);
  background: var(--accent-primary);
}

.vc-nav__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

/* Mobile disclosure toggle — hidden on desktop */
.vc-nav__toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 0.0625rem solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: var(--fs-xl);
  cursor: pointer;
}

/* On-dark variant: nav sits over a dark hero/cover before scroll
   (landing & pitch cover). Roles are forced to on-brand light values. */
.vc-nav--ondark {
  background: color-mix(in srgb, var(--bg-brand-deep) 30%, transparent);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.vc-nav--ondark .vc-nav__brand,
.vc-nav--ondark .vc-nav__link:hover,
.vc-nav--ondark .vc-nav__link[aria-current="page"] { color: var(--text-on-brand); }
.vc-nav--ondark .vc-nav__link { color: var(--text-on-brand-dim); }
.vc-nav--ondark .vc-nav__globe,
.vc-nav--ondark .vc-nav__icon-btn,
.vc-nav--ondark .vc-nav__toggle {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--text-on-brand);
}
.vc-nav--ondark .vc-nav__link[aria-current="page"]::after { background: var(--text-on-brand); }

@media (max-width: 48rem) {
  .vc-nav__toggle { display: inline-flex; }
  .vc-nav__links {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--space-2) var(--gutter) var(--space-4);
    background: var(--bg-elevated);
    border-bottom: 0.0625rem solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
  }
  /* collapsed unless the disclosure button is expanded */
  .vc-nav__links[hidden] { display: none; }
  .vc-nav__link {
    width: 100%;
    padding: 0 var(--space-2);
    border-bottom: 0.0625rem solid var(--border-subtle);
  }
  .vc-nav__link[aria-current="page"]::after { display: none; }
  .vc-nav__links .vc-nav__link:last-child { border-bottom: none; }
}

/* ========================================================================
   §2.2  Hero  (.vc-hero) + raise stat strip
   ======================================================================== */
.vc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-height) + var(--space-16)) var(--gutter) var(--space-16);
  background: var(--grad-hero);
  color: var(--text-on-brand);
  text-align: center;
}
[data-theme="dark"] .vc-hero { background: var(--grad-hero-dark); }

/* Decorative AI glow + optional chart watermark sit behind content */
.vc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-glow-ai);
  z-index: -1;
  pointer-events: none;
}
.vc-hero__bg {            /* slot for a decorative SVG line-chart watermark */
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.06;
  pointer-events: none;
}
.vc-hero__bg svg { width: 100%; height: 100%; }

.vc-hero__inner {
  position: relative;
  max-width: var(--max-width-prose);
  margin: 0 auto;
}
.vc-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 0.0625rem solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-brand);
}
.vc-hero__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent-secondary);
  animation: vc-blink 2s var(--ease-standard) infinite;
}
@keyframes vc-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.vc-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-on-brand);
  margin: 0 0 var(--space-4);
}
.vc-hero__title .accent { color: var(--accent-tertiary); }
.vc-hero__lead {
  font-family: var(--font-ui);
  font-size: var(--fs-xl);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-on-brand-dim);
  margin: 0 auto var(--space-8);
  max-width: 40rem;
}

/* Raise stat strip — Raising / Pre / Post / TAM */
.vc-hero__raise {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6) var(--space-10);
  padding: var(--space-5) var(--space-8);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.08);
  border: 0.0625rem solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(0.75rem);
  -webkit-backdrop-filter: blur(0.75rem);
}
.vc-hero__raise-item { text-align: center; min-width: 6rem; }
.vc-hero__raise-label {
  display: block;
  font-family: var(--font-data);
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-on-brand-dim);
  margin-bottom: var(--space-1);
}
.vc-hero__raise-value {
  display: block;
  font-family: var(--font-data);
  font-size: var(--fs-2xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-on-brand);
  line-height: 1.1;
}
.vc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

@media (max-width: 40rem) {
  .vc-hero__raise { flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-6); }
}

/* ========================================================================
   §2.3  Metric / stat card  (.metric-card) + .metric-grid (+ sparkline)
   New token-driven definition. The legacy .metric-card above keeps working
   for un-migrated pages (page CSS / load order); adopting pages get this.
   ======================================================================== */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-6);
  margin: var(--space-8) 0;
}

.metric-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.metric-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0.1875rem;
  background: var(--grad-accent-line);
}
.metric-card:hover {
  transform: var(--lift);
  box-shadow: var(--shadow-lg);
}
.metric-card .metric-icon {
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--accent-primary);
  margin-bottom: var(--space-2);
}
.metric-card .metric-value {
  font-family: var(--font-data);
  font-size: var(--fs-4xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  line-height: 1.1;
}
.metric-card .metric-label {
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.metric-card .metric-trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-1);
}
/* status-as-text → AA-contrast text token (falls back to the fill token until
   FOUND-TOKENS defines theme-aware --status-*-text in vc-tokens.css — see FLAG) */
.metric-card .metric-trend--up { color: var(--status-success-text, var(--status-success)); }
.metric-card .metric-trend--down { color: var(--status-error-text, var(--status-error)); }
.metric-card .metric-trend--flat { color: var(--text-muted); }

/* Sparkline: inline SVG inherits theme via currentColor (fixes F10-class
   bug where a fixed #1E40AF stroke went invisible on dark). The SVG
   <path>/<polyline> uses stroke="currentColor".                            */
.metric-card .metric-spark {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2rem;
  opacity: 0.6;
  color: var(--accent-primary);   /* currentColor source for the stroke */
  pointer-events: none;
}
.metric-card .metric-spark svg { width: 100%; height: 100%; display: block; }
.metric-card .metric-spark svg path,
.metric-card .metric-spark svg polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.125rem;
  vector-effect: non-scaling-stroke;
}

/* Large highlight variant for hero/feature rows */
.metric-card--lg { padding: var(--space-8); }
.metric-card--lg .metric-value { font-size: var(--fs-5xl); }

/* ========================================================================
   §2.4  Pillar card  (.pillar-card) — no emoji; FA / inline-SVG icon
   ======================================================================== */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-6);
  margin: var(--space-8) 0;
}
.pillar-card {
  position: relative;
  overflow: hidden;
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.pillar-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0.1875rem;
  /* default accent; per-index accents below via --pillar-accent */
  background: var(--pillar-accent, var(--accent-primary));
}
.pillar-card:hover {
  transform: var(--lift);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}
/* Per-index accent rotation (tokenises pitch-deck.css:204-209) */
.pillar-card:nth-child(6n+1) { --pillar-accent: var(--accent-primary); }
.pillar-card:nth-child(6n+2) { --pillar-accent: var(--accent-secondary); }
.pillar-card:nth-child(6n+3) { --pillar-accent: var(--accent-tertiary); }
.pillar-card:nth-child(6n+4) { --pillar-accent: var(--accent-partner); }
.pillar-card:nth-child(6n+5) { --pillar-accent: var(--status-info); }
.pillar-card:nth-child(6n+6) { --pillar-accent: var(--accent-secondary); }

.pillar-card .pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  font-size: var(--fs-xl);
  color: var(--text-on-brand);
  background: var(--pillar-accent, var(--accent-primary));
}
.pillar-card .pillar-icon svg {
  width: 1.5rem; height: 1.5rem; fill: currentColor;
}
.pillar-card .pillar-title {
  font-family: var(--font-data);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.pillar-card .pillar-desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}
/* "NEXUS-ready" chip for the HealthHaven pillar */
.pillar-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-data);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-tertiary);
  background: color-mix(in srgb, var(--accent-tertiary) 14%, transparent);
}

/* ========================================================================
   §2.5  Partner logo strip  (.partner-strip) — central to B2B2C
   Category placeholders (no fabricated signed partners).
   ======================================================================== */
.partner-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  margin: var(--space-6) 0 var(--space-3);
  padding: 0;
}
.partner-tile {
  flex: 1 1 9rem;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-subtle);
  border-radius: var(--radius-md);
  filter: grayscale(1);
  opacity: 0.85;
  transition: filter var(--dur-base) var(--ease-standard),
              opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.partner-tile:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: var(--lift);
  box-shadow: var(--shadow-md);
}
.partner-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text-on-brand);
  background: var(--grad-brand);
}
.partner-name {
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.3;
}
.partner-strip-caption {
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
}

/* ========================================================================
   §2.6  Data tables  (.vc-table family)  + matrix + sticky + scroll region
   ======================================================================== */
/* Scroll region wrapper — focusable, fade affordance on the right edge */
.table-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
}
.table-scroll:focus-visible {
  outline: 0.125rem solid transparent;
  box-shadow: var(--focus-ring);
}
.table-scroll::after {           /* right-edge fade hints "more →" */
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1.5rem;
  background: linear-gradient(90deg, transparent, var(--bg-canvas));
  pointer-events: none;
}

.vc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  background: var(--bg-surface);
  color: var(--text-secondary);
}
.vc-table caption {
  caption-side: top;
  text-align: left;
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--text-muted);
  padding-bottom: var(--space-2);
}
.vc-table thead th {
  background: var(--bg-surface-2);
  color: var(--text-primary);
  padding: var(--space-3) var(--space-4);
  text-align: right;
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 0.0625rem solid var(--border-subtle);
  white-space: nowrap;
}
.vc-table thead th:first-child { text-align: left; }
.vc-table tbody th[scope="row"],
.vc-table tbody td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
}
.vc-table tbody td {
  padding: var(--space-3) var(--space-4);
  text-align: right;
  border-bottom: 0.0625rem solid var(--border-subtle);
  font-variant-numeric: tabular-nums;
}
.vc-table tbody tr:nth-child(even) { background: var(--bg-surface-2); }
.vc-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-surface));
}
.vc-table .is-total,
.vc-table tbody tr.is-total {
  font-weight: 800;
  border-top: 0.125rem solid var(--border-brand);
  background: var(--bg-surface-2);
}
.vc-table tbody tr.is-total td,
.vc-table tbody tr.is-total th { color: var(--text-primary); }
/* negative numbers (income-statement convention) — AA text token, fill fallback */
.vc-table .is-negative,
.vc-table td.is-negative { color: var(--status-error-text, var(--status-error)); }

/* Brand-header opt-in (kept available, not the default) */
.vc-table--brandhead thead th {
  background: var(--bg-brand);
  color: var(--text-on-brand);
  border-bottom-color: transparent;
}

/* Sticky header + sticky first column for wide models on small screens */
.vc-table--sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
.vc-table--sticky tbody th[scope="row"],
.vc-table--sticky tbody td:first-child,
.vc-table--sticky thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-surface);   /* opaque so scrolled cells don't bleed */
}
.vc-table--sticky thead th:first-child { z-index: 3; background: var(--bg-surface-2); }
.vc-table--sticky tbody tr:nth-child(even) th[scope="row"],
.vc-table--sticky tbody tr:nth-child(even) td:first-child { background: var(--bg-surface-2); }

/* Competitive matrix — Yes / Partial / No with visually-hidden text so
   meaning is never colour/glyph-only (design §6.9). */
.vc-table--matrix td { text-align: center; }
.vc-table--matrix thead th { text-align: center; }
.vc-table--matrix thead th:first-child,
.vc-table--matrix tbody td:first-child { text-align: left; }
.vc-table--matrix tbody tr.is-highlight td {
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-surface));
  font-weight: 700;
}
.vc-table--matrix tbody tr.is-highlight td:first-child { color: var(--accent-primary); }
.cell-yes,
.cell-partial,
.cell-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  line-height: 1;
}
.cell-yes { color: var(--status-success-text, var(--status-success)); }
.cell-yes::before { content: "\2713"; }      /* ✓ */
.cell-partial { color: var(--accent-partner); }
.cell-partial::before { content: "\25CF"; }   /* ● */
.cell-no { color: var(--text-muted); }
.cell-no::before { content: "\2014"; }         /* — */

/* ========================================================================
   §2.7  Chart frame  (.chart-card)  — full spec lives in vc-charts.css.
   (No duplication here; pages load both sheets.)
   ======================================================================== */

/* ========================================================================
   §2.8  Timeline / milestones  (.vc-timeline) + horizontal variant
   ======================================================================== */
.vc-timeline {
  position: relative;
  margin: var(--space-8) 0;
  padding-left: var(--space-8);
  list-style: none;
}
.vc-timeline::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 0;
  bottom: 0;
  width: 0.125rem;
  background: var(--border-strong);
}
.vc-timeline__item {
  position: relative;
  margin-bottom: var(--space-8);
}
.vc-timeline__item:last-child { margin-bottom: 0; }
.vc-timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-8) + 0.375rem);
  top: 0.25rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--bg-canvas);
  border: 0.1875rem solid var(--accent-primary);
}
.vc-timeline__item[aria-current="step"]::before { background: var(--accent-primary); }
.vc-timeline__date {
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-primary);
  margin-bottom: var(--space-1);
}
.vc-timeline__title {
  font-family: var(--font-data);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-1);
}
.vc-timeline__desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* Horizontal roadmap variant (snap-scroll on mobile) */
.vc-timeline--horizontal {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-8) 0 var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.vc-timeline--horizontal::before {
  top: calc(var(--space-8) + 0.4375rem);
  left: 0; right: 0;
  bottom: auto;
  width: auto;
  height: 0.125rem;
}
.vc-timeline--horizontal .vc-timeline__item {
  flex: 0 0 14rem;
  margin: 0;
  padding-top: var(--space-6);
  scroll-snap-align: start;
}
.vc-timeline--horizontal .vc-timeline__item::before {
  left: 0;
  top: 0;
}

/* ========================================================================
   §2.9  Quote / testimonial  (.vc-quote)
   ======================================================================== */
.vc-quote {
  margin: var(--space-6) 0;
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
  border-left: 0.25rem solid var(--accent-tertiary);
  background: var(--bg-surface-2);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.vc-quote blockquote {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-style: italic;
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}
.vc-quote cite {
  display: block;
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  font-style: normal;
  font-weight: 600;
  color: var(--text-muted);
}
/* strategic-rationale variant uses the partner accent */
.vc-quote--strategic { border-left-color: var(--accent-partner); }

/* ========================================================================
   §2.10  Doc card  (.doc-card) + locked state + data-room grid unit
   New token-driven definition (legacy .doc-card above still serves
   un-migrated landing markup).
   ======================================================================== */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
  list-style: none;
  padding: 0;
}
.doc-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.doc-card:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-md);
  transform: var(--lift);
  text-decoration: none;
}
.doc-card .doc-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: var(--fs-lg);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
}
/* type chips — tinted from semantic roles (no raw hex) */
.doc-icon--pdf   { background: color-mix(in srgb, var(--status-error) 16%, transparent);  color: var(--status-error); }
.doc-icon--docx  { background: color-mix(in srgb, var(--accent-primary) 16%, transparent); color: var(--accent-primary); }
.doc-icon--html  { background: color-mix(in srgb, var(--accent-partner) 16%, transparent); color: var(--accent-partner); }
.doc-icon--xlsx  { background: color-mix(in srgb, var(--accent-secondary) 16%, transparent); color: var(--accent-secondary); }
.doc-card .doc-info { min-width: 0; }
.doc-card .doc-title {
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.125rem;
}
.doc-card .doc-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Locked state — lock glyph + tier label, reuses inset surface */
.doc-card--locked {
  position: relative;
  background: var(--bg-inset);
  border-style: dashed;
  cursor: pointer;
}
.doc-card--locked:hover { border-color: var(--border-strong); }
.doc-card--locked .doc-icon {
  background: color-mix(in srgb, var(--text-muted) 16%, transparent);
  color: var(--text-muted);
}
.doc-card__lock {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-data);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.doc-card__lock::before { content: "\1F512"; }   /* 🔒 — paired with text, not alone */

/* ========================================================================
   §2.11  CTA band  (.vc-cta)
   ======================================================================== */
.vc-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: var(--section-y) var(--gutter);
  padding: var(--space-16) var(--gutter);
  border-radius: var(--radius-2xl);
  background: var(--grad-hero);
  color: var(--text-on-brand);
  text-align: center;
}
[data-theme="dark"] .vc-cta { background: var(--grad-hero-dark); }
.vc-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-glow-ai);
  z-index: -1;
  pointer-events: none;
}
.vc-cta__title {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 700;
  color: var(--text-on-brand);
  margin: 0 0 var(--space-3);
}
.vc-cta__lead {
  font-size: var(--fs-lg);
  color: var(--text-on-brand-dim);
  margin: 0 auto var(--space-8);
  max-width: var(--max-width-prose);
}

/* ========================================================================
   §2.12  Modal  (.vc-modal) — focus-trap-ready (backdrop, dialog, scroll-lock)
   JS handles the trap/Esc/return-focus; CSS provides the structure + states.
   ======================================================================== */
.vc-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}
.vc-modal[hidden] { display: none; }
.vc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 13, 26, 0.62);
  backdrop-filter: blur(0.25rem);
  -webkit-backdrop-filter: blur(0.25rem);
}
.vc-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 34rem;
  max-height: calc(100vh - 2 * var(--gutter));
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 0.0625rem solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-8);
  animation: vc-modal-in var(--dur-base) var(--ease-emphasized);
}
@keyframes vc-modal-in {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: translateY(0); }
}
.vc-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.vc-modal__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.vc-modal__close {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-xl);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.vc-modal__close:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.vc-modal__body { color: var(--text-secondary); }
/* status region for async feedback (aria-live="polite") */
.vc-modal__status { margin-top: var(--space-3); font-size: var(--fs-sm); }
.vc-modal__status--error { color: var(--status-error-text, var(--status-error)); }
.vc-modal__status--success { color: var(--status-success-text, var(--status-success)); }

/* Body scroll-lock — JS adds .vc-scroll-locked to <html> while a modal is open */
.vc-scroll-locked { overflow: hidden; }

/* ========================================================================
   §2.13  Footer  (.vc-footer)  +  confidential banner
   ======================================================================== */
.confidential-banner {
  width: 100%;
  padding: var(--space-2) var(--gutter);
  background: var(--bg-inset);
  color: var(--text-muted);
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.06em;
  border-top: 0.0625rem solid var(--border-subtle);
  border-bottom: 0.0625rem solid var(--border-subtle);
}

.vc-footer {
  background: var(--bg-surface-2);
  border-top: 0.0625rem solid var(--border-subtle);
  padding: var(--space-12) var(--gutter) var(--space-8);
  color: var(--text-secondary);
}
.vc-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.vc-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.vc-footer__brand {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
}
.vc-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.vc-footer__links a {
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  text-decoration: none;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}
.vc-footer__links a:hover { color: var(--accent-primary); text-decoration: underline; }
.vc-footer__legal {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: var(--max-width-prose);
}
.vc-footer__copy {
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ========================================================================
   §2.15  Buttons, badges, forms, section eyebrow — token-driven additions
   New namespaced/variant classes; legacy .btn/.badge (vc-base) keep working.
   ======================================================================== */
/* Buttons: token-driven variants layered onto the base .btn (vc-base) ----- */
.btn-primary {
  background: var(--accent-primary);
  color: var(--text-on-brand);
}
.btn-primary:hover {
  background: var(--accent-primary-hover);
  color: var(--text-on-brand);
  text-decoration: none;
}
.btn-secondary {
  background: var(--accent-secondary);
  color: var(--text-on-brand);
}
.btn-secondary:hover { filter: brightness(1.05); color: var(--text-on-brand); text-decoration: none; }
.btn-outline {
  background: transparent;
  color: var(--accent-primary);
  border: 0.125rem solid var(--accent-primary);
}
.btn-outline:hover { background: var(--accent-primary); color: var(--text-on-brand); text-decoration: none; }
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 0.0625rem solid var(--border-subtle);
}
.btn-ghost:hover { background: var(--bg-surface-2); color: var(--text-primary); text-decoration: none; }
/* on a dark gradient (hero / CTA) */
.btn-on-brand {
  background: var(--text-on-brand);
  color: var(--accent-primary);
}
.btn-on-brand:hover { transform: var(--lift); color: var(--accent-primary); text-decoration: none; }

.btn:focus-visible {
  outline: 0.125rem solid transparent;
  box-shadow: var(--focus-ring);
}

/* Badges: token-driven variants ------------------------------------------ */
.badge-primary   { background: var(--accent-primary);   color: var(--text-on-brand); }
.badge-secondary { background: var(--accent-secondary); color: var(--text-on-brand); }
.badge-tertiary  { background: var(--accent-tertiary);  color: var(--text-on-brand); }
.badge-partner   { background: var(--accent-partner);   color: var(--text-on-brand); }
.badge-outline   { background: transparent; border: 0.0625rem solid var(--border-strong); color: var(--text-secondary); }

/* Section eyebrow / label ------------------------------------------------- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

/* Forms: token-driven inputs (layer onto vc-base .form-group) ------------- */
.vc-form .form-group label,
.form-group label {
  color: var(--text-secondary);
}
.vc-form input,
.vc-form textarea,
.vc-form select {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.vc-form input::placeholder,
.vc-form textarea::placeholder { color: var(--text-muted); }
.vc-form input:focus,
.vc-form textarea:focus,
.vc-form select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--focus-ring);
}
.vc-form textarea { min-height: 7.5rem; resize: vertical; }
.vc-form .form-error {
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--status-error-text, var(--status-error));   /* AA text token */
}
/* border uses the saturated fill token (not text contrast-bound) */
.vc-form [aria-invalid="true"] { border-color: var(--status-error); }
.vc-form .req { color: var(--status-error-text, var(--status-error)); }

/* ========================================================================
   Reduced motion — neutralise the additive component animations
   (component-level; the global blanket rule lives in vc-tokens/vc-base).
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  .vc-hero__dot { animation: none; }
  .vc-modal__dialog { animation: none; }
  .metric-card,
  .pillar-card,
  .partner-tile,
  .doc-card,
  .btn-on-brand { transition: none; }
  .metric-card:hover,
  .pillar-card:hover,
  .partner-tile:hover,
  .doc-card:hover,
  .btn-on-brand:hover { transform: none; }
}

/* ========================================================================
   Print — extend vc-print.css for the new shared components.
   ======================================================================== */
@media print {
  .vc-nav,
  .vc-nav__toggle,
  .vc-modal,
  .vc-cta { display: none !important; }
  .confidential-banner {
    background: transparent !important;
    border-color: #ddd !important;
    color: #000 !important;
  }
  .vc-footer { background: transparent; border-top: 0.0625rem solid #ddd; }
  .metric-card,
  .pillar-card,
  .doc-card,
  .vc-quote { box-shadow: none; page-break-inside: avoid; }
  .vc-table { page-break-inside: avoid; font-size: 9pt; }
  .table-scroll { overflow: visible; }
  .table-scroll::after { display: none; }
}