/* ========================================================================
   invest-landing.css — PAGE-UNIQUE layout for the Series B front door.
   RetirePlusPlus Investor Module ($30M Series B)

   Consumes the shared design system (vc-tokens / vc-aliases / vc-base /
   vc-components / vc-utilities / vc-charts / vc-b2b2c). This file holds ONLY
   layout that is specific to the landing page; all colour comes from SEMANTIC
   TOKENS — NO raw hex, NO :root / [data-theme] palette blocks (those live in
   vc-tokens.css), NO bespoke dark-mode overrides (roles handle dark).

   CSP: no inline styles anywhere; classes only.
   ======================================================================== */

/* ---- Display face: .serif -> Playfair Display (DM Serif removed, F5) ----- */
.serif { font-family: var(--font-display); }

/* ---- Skip link (a11y) — visible on focus ------------------------------- */
.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--accent-primary);
  color: var(--text-on-brand);
  font-family: var(--font-data);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
}
.skip-link:focus { outline: 0.125rem solid transparent; box-shadow: var(--focus-ring), var(--shadow-lg); }

/* ---- Nav: keep links visible on desktop (override global [hidden]) ------ */
/* Mobile-first markup ships #nav-links hidden; on >=48rem the menu is always
   shown. ID + [hidden] outspecifies the utilities' [hidden]{display:none}.   */
.il-nav-wrap { display: contents; }
@media (min-width: 48.0625rem) {
  #nav-links[hidden] { display: flex !important; }
}

/* Outline button when it sits on the dark hero gradient (hero secondary CTA) */
.il-btn-outline-onbrand {
  color: var(--text-on-brand);
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
}
.il-btn-outline-onbrand:hover {
  background: var(--text-on-brand);
  color: var(--accent-primary);
  border-color: var(--text-on-brand);
}

/* ---- Section rhythm + alternating surface ------------------------------ */
.il-section { background: var(--bg-canvas); }
.il-section--alt { background: var(--bg-surface-2); }
.il-section .section-label { margin-bottom: var(--space-3); }
.il-section .section-title {
  font-size: clamp(1.75rem, 4vw, var(--fs-4xl));
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
  max-width: 52rem;
}
.il-section .section-subtitle {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: var(--max-width-prose);
  margin: 0;
}

/* List resets for token components rendered as <ul> ---------------------- */
.il-reset-list { list-style: none; margin: 0; padding: 0; }

/* Illustrative caption (traction / model labelling, spec §5) ------------- */
.il-illustrative {
  margin-top: var(--space-5);
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--text-muted);
}

/* ========================================================================
   Thesis 3-up
   ======================================================================== */
.il-thesis-grid { align-items: stretch; }
.il-thesis-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}
.il-thesis-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--text-on-brand);
  font-size: var(--fs-xl);
}
.il-thesis-card__title {
  font-family: var(--font-data);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.il-thesis-card__desc {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}
.il-thesis-card__desc strong { color: var(--text-primary); font-weight: 800; }

/* ========================================================================
   Financial highlight — stat rail + chart, side by side on desktop
   ======================================================================== */
.il-fin-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
.il-fin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-4);
}
.il-fin-stat {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
.il-fin-stat__value {
  display: block;
  font-family: var(--font-data);
  font-size: var(--fs-4xl);
  font-weight: 800;
  line-height: 1.1;
  color: var(--accent-primary);
}
.il-fin-stat__label {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
}
.il-fin-chart { margin: 0; }

@media (min-width: 64rem) {
  .il-fin-layout { grid-template-columns: 20rem 1fr; }
  .il-fin-stats { grid-template-columns: 1fr; }
}

/* ========================================================================
   Team — avatar + centered card (uses legacy .team-card frame from
   vc-components; we only restyle to tokens via page classes so dark works).
   ======================================================================== */
.il-team-grid { gap: var(--space-6); }
.il-team-card {
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  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);
}
.il-team-card:hover {
  transform: var(--lift);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}
.il-team-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  font-family: var(--font-data);
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text-on-brand);
}
.il-team-card .team-name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-1);
}
.il-team-card .team-role {
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-secondary);
  margin: 0 0 var(--space-3);
}
.il-team-card .team-bio {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

/* Footer site link uses the accent role (token-driven, theme-aware) ------ */
.il-footer-site { color: var(--text-muted); text-decoration: none; }
.il-footer-site:hover { color: var(--accent-primary); text-decoration: underline; }

/* ========================================================================
   Reduced motion — neutralise page-level hover transitions
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  .il-team-card { transition: none; }
  .il-team-card:hover { transform: none; }
}