/* ═══════════════════════════════════════════════════════
   First Half Financial — design tokens & base styles
   v1.0.0 — Sprint 1 (2026-09-26)

   Ported from the Halftime brand system
   (PWA_Portal_international/css/halftime.css) with a lighter,
   more approachable First Half sub-brand treatment: light
   background instead of Halftime's dark editorial theme, more
   whitespace, friendlier tone. Same core palette (navy/teal/gold).

   NOTE: the blueprint (§2, design principle 6) describes the
   brand as "navy/teal/gold/coral/sand" but the current halftime.css
   snapshot only defines navy/teal/gold/cream tokens — no coral.
   --fh-coral and --fh-sand below are introduced here as First
   Half's own accent/neutral, chosen to sit naturally alongside
   the existing palette. Flagged for Eugene to confirm or replace.
   ═══════════════════════════════════════════════════════ */

:root {
  /* Core brand palette (from halftime.css) */
  --fh-navy:       #1a3a5c;
  --fh-navy-deep:  #122a44;
  --fh-teal:       #2a9d8f;
  --fh-teal-dark:  #1f7a6f;
  --fh-gold:       #f5a623;
  --fh-gold-dark:  #d88a0e;

  /* First Half additions — see note above */
  --fh-coral:      #e8836a;
  --fh-coral-dark: #d1684f;
  --fh-sand:       #ede5d6;

  /* Light theme surfaces */
  --fh-bg:         #fbf9f5;
  --fh-panel:      #ffffff;
  --fh-panel-soft: #f5f0e8;

  --fh-text:       #1a3a5c;
  --fh-text-muted: #5a6e85;
  --fh-white:      #ffffff;

  --fh-line:       rgba(26,58,92,.12);
  --fh-line-soft:  rgba(26,58,92,.07);

  --fh-shadow-card:       0 2px 16px rgba(26,58,92,.08);
  --fh-shadow-card-hover: 0 10px 32px rgba(26,58,92,.14);
  --fh-radius:     14px;
  --fh-radius-lg:  20px;
  --fh-max:        1080px;

  /* Typography — same family as Halftime */
  --fh-font:         'Inter', system-ui, -apple-system, sans-serif;
  --fh-font-serif:   'Cormorant Garamond', Georgia, serif;
}

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fh-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fh-text);
  background: var(--fh-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--fh-teal); text-decoration: none; }
a:hover { color: var(--fh-teal-dark); }
button { font-family: inherit; cursor: pointer; }

/* ── Layout helpers ────────────────────────────────── */
.fh-wrap { width: 100%; max-width: var(--fh-max); margin: 0 auto; padding: 0 28px; }
.fh-section { padding: 88px 0; }
.fh-section-tight { padding: 48px 0; }
@media (max-width: 720px) {
  .fh-section { padding: 56px 0; }
  .fh-wrap { padding: 0 20px; }
}

/* ── Header ─────────────────────────────────────────── */
.fh-header {
  background: var(--fh-panel);
  border-bottom: 1px solid var(--fh-line);
  padding: 20px 0;
}
.fh-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fh-brand { display: flex; align-items: center; gap: 10px; color: var(--fh-navy); }
.fh-brand:hover { color: var(--fh-navy); opacity: .85; }
.fh-brand-name { font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.fh-brand-tag {
  font-size: 11px; color: var(--fh-text-muted);
  letter-spacing: .1em; text-transform: uppercase;
}

/* ── Buttons ────────────────────────────────────────── */
.fh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px;
  font-family: var(--fh-font);
  font-weight: 600; font-size: 15px;
  padding: 13px 24px;
  border: 1px solid transparent;
  transition: transform 80ms ease, background-color 120ms ease, opacity 120ms ease;
  white-space: nowrap;
  cursor: pointer;
}
.fh-btn:hover { transform: translateY(-1px); }
.fh-btn:active { transform: translateY(0); }

.fh-btn-primary { background: var(--fh-teal); color: #fff; }
.fh-btn-primary:hover { background: var(--fh-teal-dark); color: #fff; }

.fh-btn-coral { background: var(--fh-coral); color: #fff; }
.fh-btn-coral:hover { background: var(--fh-coral-dark); color: #fff; }

.fh-btn-ghost { background: transparent; color: var(--fh-navy); border-color: var(--fh-line); }
.fh-btn-ghost:hover { background: var(--fh-panel-soft); }

.fh-btn-block { width: 100%; }
.fh-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ── Hero / section heading ──────────────────────────── */
.fh-hero { text-align: center; max-width: 620px; margin: 0 auto; }
.fh-hero h1 {
  font-family: var(--fh-font-serif);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 48px);
  color: var(--fh-navy);
  margin: 0 0 18px;
  letter-spacing: -.01em;
}
.fh-hero p {
  font-size: 18px; color: var(--fh-text-muted); margin: 0 0 36px;
}

/* ── Auth panel ─────────────────────────────────────── */
.fh-auth-panel {
  max-width: 420px;
  margin: 56px auto 0;
  padding: 40px 36px 44px;
  background: var(--fh-panel);
  border: 1px solid var(--fh-line);
  border-radius: var(--fh-radius-lg);
  box-shadow: var(--fh-shadow-card);
}
.fh-auth-panel h1 {
  font-family: var(--fh-font-serif);
  font-weight: 500;
  font-size: 1.9rem;
  color: var(--fh-navy);
  margin: 0 0 6px;
}
.fh-auth-sub { color: var(--fh-text-muted); font-size: 15px; margin: 0 0 28px; }

/* ── Forms ──────────────────────────────────────────── */
.fh-form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.fh-form-row label {
  font-size: 13px; font-weight: 600; color: var(--fh-text-muted);
  letter-spacing: .02em;
}
.fh-form-row input {
  width: 100%;
  padding: 13px 14px;
  font-size: 15px;
  font-family: var(--fh-font);
  background: var(--fh-bg);
  border: 1px solid var(--fh-line);
  border-radius: 10px;
  color: var(--fh-text);
  outline: none;
  transition: border-color 120ms ease, background 120ms ease;
  -webkit-appearance: none;
}
.fh-form-row input:focus { border-color: var(--fh-teal); background: #fff; }
.fh-form-row.fh-checkbox-row { flex-direction: row; align-items: flex-start; gap: 10px; }
.fh-form-row.fh-checkbox-row label { font-size: 13.5px; font-weight: 400; text-transform: none; color: var(--fh-text); }
.fh-form-row.fh-checkbox-row input[type="checkbox"] {
  width: 18px; height: 18px; padding: 0; margin-top: 3px; flex: 0 0 auto;
  -webkit-appearance: checkbox; appearance: auto; accent-color: var(--fh-teal);
}

.fh-auth-toggle { margin-top: 22px; text-align: center; font-size: 14px; color: var(--fh-text-muted); }
.fh-auth-toggle button {
  background: none; border: none; padding: 0;
  color: var(--fh-teal); font-weight: 600; font-size: 14px;
  cursor: pointer; text-decoration: underline;
}
.fh-auth-toggle button:hover { color: var(--fh-teal-dark); }

.fh-error { color: #c0392b; font-size: 14px; margin-top: 10px; min-height: 1.2em; }

/* A neutral message above a form (e.g. after declining the privacy consent); takes no room when empty. */
.fh-notice { font-size: 14px; line-height: 1.55; color: var(--fh-text); background: var(--fh-panel-soft); border-left: 3px solid var(--fh-teal); border-radius: 8px; padding: 12px 14px; margin: -8px 0 22px; }
.fh-notice:empty { display: none; }

/* One-time privacy consent screen */
.fh-consent-points { margin: 0 0 20px; }
.fh-consent-points li { margin-bottom: 8px; }
.fh-consent-decline { margin-top: 10px; }
.fh-privacy { margin-top: 24px; }
.fh-privacy .fh-wizard-actions { flex-wrap: wrap; }
.fh-privacy .fh-btn { white-space: normal; text-align: center; }
@media (max-width: 560px) { .fh-privacy .fh-wizard-actions .fh-btn { flex: 1 1 100%; } }

/* ── Dashboard shell ────────────────────────────────── */
.fh-dashboard-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 16px;
  padding: 48px 0 32px;
  border-bottom: 1px solid var(--fh-line);
  margin-bottom: 32px;
}
.fh-dashboard-head h1 {
  margin: 0;
  font-family: var(--fh-font-serif);
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 500;
  color: var(--fh-navy);
}
.fh-card {
  background: var(--fh-panel);
  border: 1px solid var(--fh-line);
  border-radius: var(--fh-radius);
  box-shadow: var(--fh-shadow-card);
  padding: 28px;
}
.fh-empty-state { text-align: center; padding: 64px 24px; color: var(--fh-text-muted); }

/* ── Stage 1 wizard ─────────────────────────────────── */
.fh-wizard { max-width: 560px; }
.fh-wizard-step {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fh-teal); margin: 0 0 10px;
}
.fh-wizard h2 {
  font-family: var(--fh-font-serif); font-weight: 500; font-size: 1.7rem;
  color: var(--fh-navy); margin: 0 0 8px;
}
.fh-wizard-sub { color: var(--fh-text-muted); font-size: 14.5px; margin: 0 0 24px; }
.fh-wizard-actions { display: flex; gap: 12px; margin-top: 28px; }
.fh-wizard-actions .fh-btn-primary { flex: 1; }

.fh-goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 4px; }
@media (max-width: 560px) { .fh-goal-grid { grid-template-columns: 1fr; } }
.fh-goal-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 16px 18px; border-radius: 12px; border: 1.5px solid var(--fh-line);
  background: var(--fh-bg); transition: border-color 120ms ease, background 120ms ease;
}
.fh-goal-card:hover { border-color: var(--fh-teal); }
.fh-goal-card-selected { border-color: var(--fh-teal); background: var(--fh-panel-soft); }
.fh-goal-card-label { font-weight: 600; font-size: 14.5px; color: var(--fh-navy); }
.fh-goal-card-hint { font-size: 12.5px; color: var(--fh-text-muted); }

.fh-slider-value {
  font-family: var(--fh-font-serif); font-size: 2.4rem; font-weight: 500;
  color: var(--fh-navy); margin-bottom: 18px;
}
.fh-slider {
  width: 100%; -webkit-appearance: none; appearance: none; height: 6px;
  border-radius: 999px; background: var(--fh-line); outline: none;
}
.fh-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px;
  border-radius: 50%; background: var(--fh-teal); border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(26,58,92,.3); cursor: pointer;
}
.fh-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--fh-teal);
  border: 3px solid #fff; box-shadow: 0 1px 4px rgba(26,58,92,.3); cursor: pointer;
}

.fh-select {
  width: 100%; padding: 13px 14px; font-size: 15px; font-family: var(--fh-font);
  background: var(--fh-bg); border: 1px solid var(--fh-line); border-radius: 10px;
  color: var(--fh-text); outline: none;
}
.fh-select:focus { border-color: var(--fh-teal); background: #fff; }

/* ── Habit card + check-in ─────────────────────────── */
.fh-habit-card { margin-bottom: 20px; }
.fh-habit-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.fh-habit-label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fh-teal); margin: 0 0 6px;
}
.fh-habit-goal { font-family: var(--fh-font-serif); font-weight: 500; font-size: 1.7rem; color: var(--fh-navy); margin: 0 0 6px; }
.fh-habit-meta { color: var(--fh-text-muted); font-size: 14px; margin: 0; }
.fh-habit-ring { text-align: center; flex: 0 0 auto; }
.fh-ring-track { fill: none; stroke: var(--fh-line); stroke-width: 8; }
.fh-ring-fill {
  fill: none; stroke: var(--fh-teal); stroke-width: 8; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 300ms ease;
}
.fh-ring-text { font-family: var(--fh-font); font-size: 20px; font-weight: 700; fill: var(--fh-navy); }
.fh-habit-ring-caption { font-size: 12.5px; color: var(--fh-text-muted); margin: 6px 0 0; }

.fh-checkin-card h3 { font-size: 1.05rem; color: var(--fh-navy); margin: 0 0 16px; }
.fh-checkin-toggle { display: flex; gap: 12px; }
.fh-checkin-toggle .fh-btn { flex: 1; }
.fh-checkin-done { color: var(--fh-text); font-size: 14.5px; margin: 0; }
.fh-link-btn {
  background: none; border: none; padding: 0; color: var(--fh-teal);
  font-weight: 600; font-size: 14.5px; text-decoration: underline; cursor: pointer;
}
.fh-link-btn:hover { color: var(--fh-teal-dark); }

/* ── Sprint 5b: goals, emergency fund, edit my goals ── */
.fh-goal-badge {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; vertical-align: 1px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; background: rgba(42,157,143,.15); color: var(--fh-teal-dark);
}
.fh-goal-badge-add { background: var(--fh-panel-soft); color: var(--fh-text-muted); }
.fh-goals-edit { margin-top: 10px; font-size: 14px; }

.fh-target-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 560px) { .fh-target-boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fh-target-own { margin: 16px 0 18px; }

.fh-ef-card { margin-top: 20px; }
.fh-ef-title { font-family: var(--fh-font-serif); font-weight: 500; font-size: 1.5rem; color: var(--fh-navy); margin: 0 0 10px; }
.fh-ef-amounts { font-size: 14.5px; color: var(--fh-text-muted); margin: 0 0 10px; }
.fh-ef-amounts strong { font-size: 1.15rem; color: var(--fh-navy); }
.fh-ef-note { font-size: 14px; color: var(--fh-text); margin: 10px 0 14px; }
.fh-ef-card .fh-form-row { margin: 8px 0 0; }

.fh-edit-section {
  font-size: 1.05rem; color: var(--fh-navy); margin: 28px 0 6px; padding-top: 20px; border-top: 1px solid var(--fh-line-soft);
}
.fh-edit-goals h2 + .fh-edit-section { border-top: 0; padding-top: 0; margin-top: 18px; }
.fh-edit-reminder { margin-top: 22px; }

/* ── 5b review: interest boxes, retirement income field, limits ── */
.fh-rate-boxes { margin-bottom: 14px; }
.fh-rate-help { margin-top: 0; }
.fh-ret-income { margin-bottom: 16px; }
.fh-ret-net { font-size: 13.5px; color: var(--fh-navy); margin: 2px 0 0; }
.fh-split-other {
  font-size: 13.5px; color: var(--fh-text); background: var(--fh-panel-soft);
  border-radius: 10px; padding: 10px 12px; margin: 0 0 12px;
}
.fh-account-note { margin: -6px 0 16px; }

/* ── 5b review round 2: want vs projected, TFSA used, stage nav ── */
.fh-gap-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 0; }
.fh-gap-compare > div { background: var(--fh-panel-soft); border-radius: 12px; padding: 12px 14px; }
.fh-gap-compare span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fh-teal); }
.fh-gap-compare strong { display: block; font-family: var(--fh-font-serif); font-weight: 500; font-size: 1.6rem; color: var(--fh-navy); margin: 2px 0; }
.fh-gap-compare em { display: block; font-style: normal; font-size: 12.5px; color: var(--fh-text-muted); line-height: 1.4; }
.fh-tfsa-used { margin: 4px 0 14px; }
.fh-tfsa-used .fh-form-row { margin: 10px 0 0; }
.fh-tfsa-used-row { display: flex; gap: 10px; align-items: flex-end; }
.fh-tfsa-used-row .fh-form-row { flex: 1; margin: 0; }
/* ── Stage bar + stage bands (Sprint 7 follow-up: clearer stages down the page) ───────────
   The bar sticks to the top while scrolling and lights the stage you are in. Each stage is a section;
   once two or more show (.fh-staged), each opens with a navy band: number, title, one-line status. */
.fh-stage-nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; gap: 6px; margin: -16px 0 8px; padding: 10px 0 8px;
  background: var(--fh-bg); border-bottom: 1px solid var(--fh-line);
}
.fh-stage-nav a {
  flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--fh-navy); background: var(--fh-panel);
  border: 1px solid var(--fh-line); border-radius: 999px; padding: 7px 4px;
}
.fh-stage-nav a b { font-weight: 700; color: var(--fh-teal-dark); margin-right: 2px; }
.fh-stage-nav a:hover { border-color: var(--fh-teal); color: var(--fh-teal-dark); }
.fh-stage-nav a.fh-stage-active { background: var(--fh-navy); border-color: var(--fh-navy); color: #fff; }
.fh-stage-nav a.fh-stage-active b { color: #8fe0d4; }
@media (max-width: 400px) { .fh-stage-nav { gap: 3px; } .fh-stage-nav a { flex: 1 1 auto; font-size: 11.5px; padding: 7px 4px; } .fh-stage-nav a b { margin-right: 1px; } }
@media (max-width: 340px) { .fh-stage-nav a b { display: none; } }

/* a stage's top sits below the sticky bar when jumped to */
.fh-stage, .fh-invest { scroll-margin-top: 64px; }
.fh-stage-band { display: none; }
.fh-staged .fh-stage + .fh-stage { margin-top: 56px; }
.fh-staged .fh-stage-band {
  display: flex; align-items: center; gap: 14px;
  background: var(--fh-navy); color: #fff; border-radius: var(--fh-radius);
  padding: 16px 20px; margin-bottom: 18px;
}
.fh-stage-num {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fh-teal); color: #fff; font-family: var(--fh-font); font-size: 1.1rem; font-weight: 700;
}
.fh-stage-band-text { min-width: 0; }
.fh-stage-band h2 { margin: 0; font-family: var(--fh-font-serif); font-weight: 500; font-size: 1.35rem; color: #fff; line-height: 1.2; }
.fh-stage-status { margin: 3px 0 0; font-size: 13.5px; color: rgba(255,255,255,.82); overflow-wrap: anywhere; }
.fh-stage-status:empty { display: none; }
.fh-stage[data-state="done"] .fh-stage-status::before { content: "\2713  "; color: #8fe0d4; font-weight: 700; }
.fh-stage[data-state="todo"] .fh-stage-status::before { content: "\2022  "; color: #f5c451; font-weight: 700; }
.fh-staged .fh-privacy { margin-top: 56px; }

/* Open / Close, and a folded stage: just its band, as a light summary row. */
.fh-staged .fh-stage-band { cursor: pointer; }
.fh-stage-toggle {
  flex: 0 0 auto; margin-left: auto; cursor: pointer;
  font-family: var(--fh-font); font-size: 13px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 6px 14px;
}
.fh-stage-toggle::after { content: " \25B4"; }
.fh-stage-toggle:hover { background: rgba(255,255,255,.24); }
.fh-stage-toggle:focus-visible { outline: 2px solid #8fe0d4; outline-offset: 2px; }
.fh-stage-collapsed > [id$="-root"] { display: none; }
.fh-staged .fh-stage-collapsed .fh-stage-band {
  background: var(--fh-panel); color: var(--fh-navy); border: 1px solid var(--fh-line);
  box-shadow: var(--fh-shadow-card); margin-bottom: 0;
}
.fh-staged .fh-stage-collapsed .fh-stage-band:hover { border-color: var(--fh-teal); }
.fh-staged .fh-stage-collapsed .fh-stage-band h2 { color: var(--fh-navy); font-size: 1.15rem; }
.fh-staged .fh-stage-collapsed .fh-stage-status { color: var(--fh-text-muted); }
.fh-staged .fh-stage-collapsed .fh-stage-toggle { color: var(--fh-navy); background: var(--fh-panel-soft); border-color: var(--fh-line); }
.fh-staged .fh-stage-collapsed .fh-stage-toggle::after { content: " \25BE"; }
.fh-staged .fh-stage-collapsed[data-state="done"] .fh-stage-status::before { color: var(--fh-teal-dark); }
/* folded rows sit close together; a folded row next to an open stage keeps a smaller gap too */
.fh-staged .fh-stage-collapsed + .fh-stage,
.fh-staged .fh-stage + .fh-stage-collapsed { margin-top: 20px; }
.fh-staged .fh-stage-collapsed + .fh-stage-collapsed { margin-top: 10px; }
.fh-staged .fh-stage-collapsed + .fh-privacy { margin-top: 32px; }
@media (max-width: 400px) { .fh-stage-toggle { padding: 6px 10px; font-size: 12px; } }
@media (max-width: 400px) { .fh-staged .fh-stage-band { padding: 14px 14px; gap: 12px; } }

/* ── Stage 2: your number / gap ────────────────────── */
.fh-stage2 { margin-bottom: 20px; }
.fh-gap-headline {
  font-family: var(--fh-font-serif); font-weight: 500; font-size: clamp(2.2rem, 6vw, 3rem);
  color: var(--fh-navy); margin: 0; line-height: 1.1;
}
.fh-gap-sub { color: var(--fh-text-muted); font-size: 14px; margin: 6px 0 22px; }
.fh-gap-explain { font-size: 14.5px; color: var(--fh-text); margin: 18px 0 0; }

.fh-bars { display: flex; flex-direction: column; gap: 14px; }
.fh-bar-label { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--fh-text-muted); margin-bottom: 6px; }
.fh-bar-label span:last-child { font-weight: 600; color: var(--fh-navy); }
.fh-bar-track { height: 14px; background: var(--fh-panel-soft); border-radius: 999px; overflow: hidden; }
.fh-bar { height: 100%; border-radius: 999px; transition: width 200ms ease; }
.fh-bar-projected { background: var(--fh-teal); }
.fh-bar-number { background: var(--fh-gold); }

.fh-lever-title { font-size: 1.05rem; color: var(--fh-navy); margin: 32px 0 14px; padding-top: 24px; border-top: 1px solid var(--fh-line-soft); }
.fh-lever { margin-bottom: 20px; }
.fh-lever-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 14px; }
.fh-lever-head label { color: var(--fh-text-muted); font-weight: 600; }
.fh-lever-head span { color: var(--fh-navy); font-weight: 700; }
.fh-assumptions { font-size: 12.5px; color: var(--fh-text-muted); line-height: 1.5; margin: 8px 0 14px; }

.fh-tax { margin: -4px 0 18px; }
.fh-tax-title { font-size: 13px; font-weight: 600; color: var(--fh-text-muted); letter-spacing: .02em; margin: 0 0 8px; }
.fh-tax-boxes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.fh-tax-box {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px; border-radius: 10px; border: 1.5px solid var(--fh-line); background: var(--fh-bg);
}
.fh-tax-box:hover { border-color: var(--fh-teal); }
.fh-tax-box-selected { border-color: var(--fh-teal); background: var(--fh-panel-soft); }
.fh-tax-rate { font-weight: 700; font-size: 15px; color: var(--fh-navy); }
.fh-tax-hint { font-size: 11px; color: var(--fh-text-muted); text-align: center; line-height: 1.3; }
.fh-tax-note { font-size: 12.5px; color: var(--fh-text-muted); line-height: 1.5; margin: 8px 0 0; }

.fh-help { margin: -8px 0 20px; font-size: 13.5px; color: var(--fh-text); }
.fh-help summary { cursor: pointer; color: var(--fh-teal); font-weight: 600; }
.fh-help p { margin: 8px 0 0; color: var(--fh-text-muted); line-height: 1.55; }

/* ── Stage 3: TFSA/RA split, accounts, net worth ───── */
.fh-stage3 { margin-bottom: 20px; }
.fh-split-control { margin: 22px 0 6px; }
.fh-split-head {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 12px; margin-bottom: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fh-teal);
}
.fh-split-head span:first-child { text-align: left; }
.fh-split-head span:last-child { text-align: right; }
.fh-split-head span:nth-child(2) { font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--fh-navy); }
.fh-save-row { display: flex; align-items: center; gap: 14px; margin: 6px 0 4px; }
.fh-save-status { font-size: 13.5px; color: var(--fh-teal-dark); font-weight: 600; }
.fh-split-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 22px 0 16px; }
@media (max-width: 560px) { .fh-split-figures { grid-template-columns: 1fr; gap: 18px; } }
.fh-split-headline { font-family: var(--fh-font-serif); font-weight: 500; font-size: 1.7rem; color: var(--fh-navy); margin: 4px 0 4px; }
.fh-split-sub { font-size: 12.5px; color: var(--fh-text-muted); line-height: 1.45; margin: 0; }

.fh-account-card { margin-bottom: 20px; }
.fh-account-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.fh-account-head h3 { font-size: 1.15rem; color: var(--fh-navy); margin: 0; }
.fh-status-pill {
  font-size: 12px; font-weight: 700; letter-spacing: .02em; padding: 4px 12px;
  border-radius: 999px; white-space: nowrap;
}
.fh-status-not_started { background: var(--fh-panel-soft); color: var(--fh-text-muted); }
.fh-status-opened { background: rgba(245,166,35,.15); color: var(--fh-gold-dark); }
.fh-status-funded { background: rgba(42,157,143,.15); color: var(--fh-teal-dark); }
.fh-account-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.fh-account-actions .fh-btn { flex: 1; min-width: 160px; }
.fh-account-continue[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.fh-networth-card .fh-form-row:first-of-type { margin-top: 20px; }

/* ── FAIS disclaimer footer ─────────────────────────── */
.fh-disclaimer {
  font-size: 12.5px;
  color: var(--fh-text-muted);
  line-height: 1.5;
  padding: 18px 0;
  border-top: 1px solid var(--fh-line-soft);
  margin-top: 40px;
}

/* ── Hidden utility ───────────────────────────────── */
.fh-hidden { display: none !important; }
.fh-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Footer ─────────────────────────────────────────── */
.fh-footer {
  background: var(--fh-panel-soft);
  border-top: 1px solid var(--fh-line);
  padding: 32px 0;
  margin-top: 80px;
}
.fh-footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  font-size: 13px; color: var(--fh-text-muted);
}
.fh-footer-inner a { color: var(--fh-text-muted); }
.fh-footer-inner a:hover { color: var(--fh-navy); }

/* ── 5b review 4: home growth boxes (7) ── */
.fh-home-boxes { grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 14px; }
@media (max-width: 560px) { .fh-home-boxes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fh-home-release { margin-top: 14px; }

/* ── Stage 4: readiness and graduation (Sprint 6) ──── */
.fh-stage4 { margin-bottom: 20px; }
.fh-ready-title { font-family: var(--fh-font-serif); font-weight: 500; font-size: 1.5rem; color: var(--fh-navy); margin: 0 0 10px; }
.fh-ready-score span { font-size: 1.2rem; color: var(--fh-text-muted); }
.fh-stage4 .fh-bar-track { margin: 12px 0 6px; }
.fh-ready-list { list-style: none; margin: 18px 0 8px; padding: 0; }
.fh-ready-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--fh-line-soft); }
.fh-ready-tick {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--fh-line);
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff;
}
.fh-ready-met .fh-ready-tick { background: var(--fh-teal); border-color: var(--fh-teal); }
.fh-ready-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fh-ready-label { font-size: 14.5px; font-weight: 600; color: var(--fh-navy); }
.fh-ready-detail { font-size: 12.5px; color: var(--fh-text-muted); }
.fh-ready-points { font-size: 13px; font-weight: 700; color: var(--fh-text-muted); white-space: nowrap; }
.fh-ready-met .fh-ready-points { color: var(--fh-teal-dark); }

.fh-grad { margin-bottom: 20px; }
.fh-grad-last { font-size: 13.5px; color: var(--fh-teal-dark); font-weight: 600; margin: 0 0 14px; }
.fh-grad-option { border: 1.5px solid var(--fh-line); border-radius: var(--fh-radius); padding: 16px; margin-bottom: 12px; }
.fh-grad-option-default { border-color: var(--fh-teal); background: var(--fh-panel-soft); }
.fh-grad-option-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.fh-grad-option h3 { font-size: 1.05rem; color: var(--fh-navy); margin: 0; }
.fh-grad-option p { font-size: 14px; color: var(--fh-text-muted); margin: 0 0 12px; line-height: 1.5; }
.fh-grad-option .fh-btn { width: 100%; }
.fh-grad-notes { margin: 0 0 8px; padding-left: 20px; font-size: 14px; color: var(--fh-text); line-height: 1.6; }
.fh-partner { border-top: 1px solid var(--fh-line-soft); padding-top: 18px; margin-top: 12px; }
.fh-partner:first-of-type { border-top: 0; padding-top: 0; }
.fh-partner-name { font-size: 1.15rem; color: var(--fh-navy); margin: 0 0 4px; }
.fh-partner-meta { font-size: 13.5px; color: var(--fh-text-muted); margin: 0 0 4px; }
.fh-consent-text {
  margin: 4px 0 14px; padding: 12px 14px; border-left: 3px solid var(--fh-teal); background: var(--fh-panel-soft);
  font-size: 13.5px; line-height: 1.6; color: var(--fh-text); border-radius: 0 10px 10px 0;
}
.fh-partner .fh-btn { width: 100%; }
.fh-email-preview {
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; font-family: var(--fh-font);
  font-size: 12.5px; line-height: 1.5; background: var(--fh-panel-soft); border-radius: 10px; padding: 14px; margin: 8px 0 0;
  max-height: 420px; overflow: auto;
}
.fh-grad-back-top { display: block; margin: 0 0 12px; font-size: 14px; }

/* ── Where to invest (js/invest.js) ── */
.fh-invest { margin-top: 24px; }
.fh-invest-list { list-style: none; margin: 0 0 8px; padding: 0; }
.fh-invest-row { border-top: 1px solid var(--fh-line-soft); padding: 14px 0; }
.fh-invest-row:first-child { border-top: 0; padding-top: 4px; }
.fh-invest-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fh-invest-name { font-size: 1.05rem; color: var(--fh-navy); margin: 0; }
.fh-invest-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fh-invest-actions .fh-btn { white-space: normal; text-align: center; }
.fh-invest-about { margin: 10px 0 0; padding: 12px 14px; border-left: 3px solid var(--fh-teal); background: var(--fh-panel-soft); border-radius: 0 10px 10px 0; }
.fh-invest-about p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--fh-text); }
.fh-invest-code { margin: 8px 0 0; font-size: 14px; color: var(--fh-text); }
.fh-invest-code strong { user-select: all; }
.fh-invest-disclosure { margin: 6px 0 0; }
@media (max-width: 560px) { .fh-invest-actions { width: 100%; } .fh-invest-actions .fh-btn { flex: 1 1 100%; } }

/* ── Subscription card and soft paywall (js/billing.js; only when billing exists for the person) ── */
.fh-billing { margin: 0 0 20px; }
.fh-billing-terms { display: block; margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--fh-text); }
.fh-billing-terms input { margin-right: 8px; }
.fh-billing-actions { flex-wrap: wrap; }
.fh-billing-actions .fh-btn { white-space: normal; text-align: center; }
.fh-billing-notice { margin-bottom: 12px; }
.fh-billing .fh-btn-primary { width: 100%; }
.fh-billing-actions .fh-btn-primary { width: auto; }
@media (max-width: 560px) { .fh-billing-actions .fh-btn { flex: 1 1 100%; } }
/* No access yet: only the subscription card shows. Read-only: the numbers stay visible but nothing can be changed. */
.fh-gate-none .fh-stage, .fh-gate-none .fh-stage-nav, .fh-gate-none .fh-invest { display: none !important; }
.fh-gate-readonly [id^="stage"][id$="-root"] { opacity: .72; }