/**
 * VestFire — the FIRE number page.
 *
 * One stylesheet, scoped under `.vf-page`, so nothing here can reach the
 * shared primary menu or the site footer: both paint their own surfaces and
 * this page must not restyle them.
 *
 * The palette is the landing page's — VestMind navy over a soft blue sky, with
 * the amber that marks anything the investor can act on. Amber is used for
 * exactly two things: the number itself and the controls that move it. When it
 * starts appearing on decoration, the page has stopped saying which parts are
 * live.
 */

.vf-body { background: #F4F8FC; }

.vf-page {
  --vf-navy: #072A5E;
  --vf-navy-soft: #0B2B63;
  --vf-ink: #1C2C46;
  --vf-muted: #5C6E88;
  --vf-dim: #8494AA;
  --vf-amber: #F5B23E;
  --vf-amber-deep: #D9912A;
  --vf-amber-wash: #FDF1DA;
  --vf-line: #E3EBF5;
  --vf-card: #FFFFFF;
  --vf-radius: 18px;
  --vf-shadow: 0 2px 10px rgba(7, 42, 94, .05);
  --vf-shadow-lift: 0 14px 34px rgba(7, 42, 94, .09);

  background: #F4F8FC;
  color: var(--vf-ink);
  font-family: var(--font-body);
  min-height: 100vh;
}

.vf-page [hidden] { display: none !important; }

.vf-main {
  margin: 0 auto;
  max-width: 1180px;
  padding: 0 24px 96px;
}

/* Keep the aside expressive through style rather than a one-off typeface. All
   VestFire text uses the same self-hosted families as vestmindcore. */
.vf-script {
  color: var(--vf-navy);
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  line-height: 1.35;
  margin: 0;
}

.vf-underline { color: var(--vf-amber); display: block; height: 12px; margin-top: 6px; width: 170px; }
.vf-underline path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 3; }

/* ── Hero ─────────────────────────────────────────────────────────────── */

/* The opening is the shared product banner (styles/product-banner.css), the
   landing page's frame restated for VestFire. What stays here is the trust
   row that follows it. */

.vf-trust {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 36px 0 28px;
  padding: 0;
}

.vf-trust li { align-items: center; display: flex; gap: 12px; }
.vf-trust strong { color: var(--vf-navy); display: block; font-size: 14.5px; font-weight: 700; }
.vf-trust small { color: var(--vf-muted); font-size: 13px; }
.vf-trust a { border-bottom: 1px solid rgba(92, 110, 136, .4); }

.vf-trust-icon, .vf-tile-icon {
  align-items: center; background: var(--vf-amber-wash); border-radius: 50%;
  color: var(--vf-amber-deep); display: flex; flex: none; height: 44px; justify-content: center; width: 44px;
}
.vf-trust-icon svg { fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 20px; }

/* ── The three phases ─────────────────────────────────────────────────── */

.vf-steps {
  align-items: center;
  background: var(--vf-card);
  border: 1px solid var(--vf-line);
  border-radius: var(--vf-radius);
  box-shadow: var(--vf-shadow);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 14px 24px;
}

.vf-steps ol { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.vf-steps li {
  align-items: center; border-bottom: 2px solid transparent; color: var(--vf-dim);
  display: flex; font-size: 14px; font-weight: 600; gap: 10px; padding: 8px 2px;
}
.vf-steps li span {
  align-items: center; background: #EEF3F9; border-radius: 50%; color: var(--vf-dim);
  display: flex; font-size: 12px; font-weight: 700; height: 24px; justify-content: center; width: 24px;
}
.vf-steps li.is-active { border-bottom-color: var(--vf-amber); color: var(--vf-navy); }
.vf-steps li.is-active span { background: var(--vf-navy); color: #fff; }
.vf-steps li.is-done span { background: var(--vf-amber); color: var(--vf-navy); }

.vf-steps-note { align-items: center; color: var(--vf-muted); display: flex; font-size: 13px; gap: 8px; margin: 0; }
.vf-steps-note svg { fill: var(--vf-amber); height: 15px; stroke: none; width: 15px; }

/* ── Cards ────────────────────────────────────────────────────────────── */

.vf-card {
  background: var(--vf-card);
  border: 1px solid var(--vf-line);
  border-radius: var(--vf-radius);
  box-shadow: var(--vf-shadow);
  padding: 26px;
}

.vf-card h2 {
  color: var(--vf-navy); font-family: var(--font-display); font-size: 19px;
  font-weight: 700; letter-spacing: -.01em; margin: 0 0 6px;
}
.vf-card-lede { color: var(--vf-muted); font-size: 13.5px; line-height: 1.5; margin: 0 0 18px; }

.vf-board { align-items: start; display: grid; gap: 20px; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }

/* ── Fields ───────────────────────────────────────────────────────────── */

.vf-field { align-items: center; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) 128px; margin-bottom: 12px; }
.vf-field > span { color: var(--vf-muted); font-size: 13.5px; line-height: 1.35; }
.vf-field input {
  background: #fff; border: 1px solid var(--vf-line); border-radius: 10px; color: var(--vf-navy);
  font-size: 15px; font-weight: 600; height: 44px; padding: 0 12px; text-align: left; width: 100%;
}
.vf-field input:focus-visible { border-color: var(--vf-amber); box-shadow: 0 0 0 3px rgba(245, 178, 62, .22); outline: none; }
.vf-field--rupee input { padding-left: 26px; }
.vf-field--rupee { position: relative; }
.vf-field--rupee::after { color: var(--vf-dim); content: '₹'; font-size: 14px; pointer-events: none; position: absolute; right: 106px; }
.vf-field--percent { position: relative; }
.vf-field--percent::after { color: var(--vf-dim); content: '%'; font-size: 13px; pointer-events: none; position: absolute; right: 14px; }

.vf-check { align-items: start; display: flex; gap: 10px; grid-column: 1 / -1; margin-top: 10px; }
.vf-check input { accent-color: var(--vf-amber-deep); height: 18px; margin-top: 2px; width: 18px; }
.vf-check span { color: var(--vf-ink); font-size: 13.5px; }
.vf-check small { color: var(--vf-muted); display: block; font-size: 12.5px; }

.vf-primary {
  align-items: center; background: var(--vf-amber); border: 0; border-radius: 12px; color: var(--vf-navy);
  cursor: pointer; display: flex; font-size: 15px; font-weight: 700; gap: 8px; height: 50px;
  justify-content: center; margin-top: 8px; transition: transform .15s ease, box-shadow .15s ease; width: 100%;
}
.vf-primary:hover { box-shadow: 0 10px 22px rgba(245, 178, 62, .35); transform: translateY(-1px); }
.vf-primary--dark { background: var(--vf-navy); color: #fff; width: auto; padding: 0 24px; }
.vf-primary--dark:hover { box-shadow: 0 10px 22px rgba(7, 42, 94, .28); }

.vf-secondary {
  background: var(--vf-amber); border: 0; border-radius: 12px; color: var(--vf-navy); cursor: pointer;
  flex: none; font-size: 14px; font-weight: 700; height: 46px; padding: 0 20px;
}
.vf-secondary:hover { box-shadow: 0 10px 22px rgba(245, 178, 62, .32); }

.vf-ghost {
  background: #fff; border: 1px dashed #C9D7E8; border-radius: 10px; color: var(--vf-navy);
  cursor: pointer; font-size: 13.5px; font-weight: 600; height: 42px; padding: 0 16px;
}
.vf-ghost:hover { border-color: var(--vf-amber); color: var(--vf-amber-deep); }

.vf-link { background: none; border: 0; color: #2563EB; cursor: pointer; font-size: 13.5px; font-weight: 600; padding: 0; }
.vf-link:hover { text-decoration: underline; }
.vf-form-error { color: #B42318; font-size: 13px; margin: 10px 0 0; }

/* ── The number ───────────────────────────────────────────────────────── */

.vf-result-head { align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 16px; }
.vf-result-head h2 { margin: 0; }
.vf-updated { color: var(--vf-dim); font-size: 12.5px; }

.vf-result-empty {
  align-items: center; display: flex; flex-direction: column; justify-content: center;
  min-height: 320px; padding: 30px; text-align: center;
}
.vf-result-empty-icon {
  align-items: center; background: var(--vf-amber-wash); border-radius: 50%; color: var(--vf-amber-deep);
  display: flex; font-size: 24px; height: 54px; justify-content: center; margin-bottom: 18px; width: 54px;
}
.vf-result-empty h2 { font-size: 22px; margin-bottom: 8px; }
.vf-result-empty p { color: var(--vf-muted); line-height: 1.55; margin: 0; max-width: 430px; }
.vf-result-empty small { color: var(--vf-dim); font-size: 12.5px; margin-top: 14px; }

.vf-tabs { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 20px; }
.vf-tabs button {
  align-items: center; background: #F7FAFD; border: 1px solid var(--vf-line); border-radius: 12px;
  cursor: pointer; display: flex; gap: 10px; padding: 10px 12px; text-align: left; width: 100%;
}
.vf-tabs button.is-active { background: #FFF8EC; border-color: var(--vf-amber); }
.vf-tabs button[disabled] { cursor: not-allowed; opacity: .55; }
.vf-tabs i { align-items: center; background: #E7EEF7; border-radius: 9px; display: flex; flex: none; height: 32px; justify-content: center; width: 32px; }
.vf-tabs button.is-active i { background: var(--vf-amber); }
.vf-tabs svg { fill: none; height: 16px; stroke: var(--vf-navy); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 16px; }
.vf-tabs strong { color: var(--vf-navy); display: block; font-size: 13px; font-weight: 700; }
.vf-tabs small { color: var(--vf-muted); font-size: 11.5px; }

.vf-hero-number { align-items: stretch; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 210px; }
.vf-hero-label { color: var(--vf-navy); font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.vf-figure { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 8px; }
.vf-figure output {
  color: var(--vf-navy); font-family: var(--font-display); font-size: clamp(38px, 6vw, 54px);
  font-weight: 800; letter-spacing: -.035em; line-height: 1;
}
.vf-chip { background: #EDF3FA; border-radius: 999px; color: var(--vf-navy); font-size: 12px; font-weight: 700; padding: 5px 12px; }
.vf-hero-basis { color: var(--vf-muted); font-size: 13.5px; margin: 0 0 8px; }

.vf-quote {
  align-items: center; background: #FFF8EC; border-radius: 14px; display: flex;
  flex-direction: column; justify-content: center; padding: 18px; text-align: center;
}
.vf-quote .vf-script { font-size: 19px; }
.vf-quote .vf-underline { width: 120px; }

.vf-tiles { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
.vf-tile { background: #F7FAFD; border: 1px solid var(--vf-line); border-radius: 12px; padding: 14px; }
.vf-tile small { color: var(--vf-muted); display: block; font-size: 12.5px; }
.vf-tile strong { color: var(--vf-navy); display: block; font-family: var(--font-display); font-size: 22px; font-weight: 700; margin: 4px 0 2px; }
.vf-tile span { color: var(--vf-dim); font-size: 12px; }

/* ── The projection ───────────────────────────────────────────────────── */

.vf-path { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) 280px; margin-top: 20px; }
.vf-path-head { align-items: start; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 12px; }
.vf-path-head p { color: var(--vf-muted); font-size: 13px; margin: 0; }
.vf-legend { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.vf-legend li { align-items: center; color: var(--vf-muted); display: flex; font-size: 12px; gap: 6px; }
.vf-legend li::before { border-radius: 50%; content: ''; height: 8px; width: 8px; }
.vf-legend .is-portfolio::before { background: #3B9BF0; }
.vf-legend .is-target::before { background: var(--vf-amber); }

.vf-chart-frame { position: relative; }
#vf-chart { display: block; height: 300px; width: 100%; }
.vf-chart-fallback { color: var(--vf-dim); font-size: 13px; left: 0; position: absolute; text-align: center; top: 45%; width: 100%; }

.vf-path-side { display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.vf-path-age { align-items: center; background: #EAF2FC; border-radius: 14px; display: flex; gap: 14px; padding: 18px; }
.vf-path-icon { align-items: center; background: #fff; border-radius: 10px; color: var(--vf-navy); display: flex; flex: none; height: 40px; justify-content: center; width: 40px; }
.vf-path-icon svg { fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-width: 2; width: 20px; }
.vf-path-age small { color: var(--vf-muted); display: block; font-size: 12.5px; }
.vf-path-age strong { color: var(--vf-navy); display: block; font-family: var(--font-display); font-size: 24px; font-weight: 800; line-height: 1.2; margin: 2px 0 6px; }
.vf-range { background: #fff; border-radius: 12px; color: var(--vf-muted); display: inline-block; font-size: 11.5px; line-height: 1.45; padding: 4px 10px; }
.vf-path-quote { text-align: center; }

/* ── The refine banner ────────────────────────────────────────────────── */

.vf-refine {
  align-items: center; background: #FFF4DC; border: 1px solid #F6E3B8; border-radius: var(--vf-radius);
  display: flex; gap: 16px; margin-top: 20px; padding: 18px 22px;
}
.vf-refine-icon { align-items: center; background: #fff; border-radius: 50%; color: var(--vf-amber-deep); display: flex; flex: none; height: 44px; justify-content: center; width: 44px; }
.vf-refine-icon svg { fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 20px; }
.vf-refine div { flex: 1; }
.vf-refine strong { color: var(--vf-navy); display: block; font-size: 15px; }
.vf-refine p { color: var(--vf-muted); font-size: 13.5px; margin: 2px 0 0; }

/* ── Sharpen ──────────────────────────────────────────────────────────── */

.vf-sharpen { margin-top: 20px; scroll-margin-top: 92px; }
.vf-sharpen-head { align-items: start; display: flex; gap: 16px; justify-content: space-between; }
.vf-sharpen-head p { color: var(--vf-muted); font-size: 13.5px; margin: 0; max-width: 620px; }
.vf-sharpen-close { background: none; border: 0; color: var(--vf-dim); cursor: pointer; font-size: 26px; line-height: 1; padding: 0 4px; }

.vf-sharpen-nav { border-bottom: 1px solid var(--vf-line); display: flex; flex-wrap: wrap; gap: 4px; margin: 18px 0 20px; }
.vf-sharpen-nav button {
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--vf-muted);
  cursor: pointer; font-size: 13.5px; font-weight: 600; padding: 10px 14px;
}
.vf-sharpen-nav button.is-active { border-bottom-color: var(--vf-amber); color: var(--vf-navy); }

.vf-sheet { display: none; }
.vf-sheet.is-active { display: block; }
.vf-sheet-lede { color: var(--vf-muted); font-size: 13.5px; line-height: 1.55; margin: 0 0 18px; max-width: 720px; }
.vf-sheet-grid { display: grid; gap: 4px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vf-sheet-foot { color: var(--vf-muted); font-size: 12.5px; margin: 16px 0 0; }
.vf-sheet-foot a { color: #2563EB; }

.vf-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.vf-row { align-items: center; background: #F7FAFD; border: 1px solid var(--vf-line); border-radius: 12px; display: grid; gap: 10px; padding: 12px; }
.vf-row--goal { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 110px 36px; }
.vf-row--income { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 96px 96px auto 36px; }
.vf-row input, .vf-row select {
  background: #fff; border: 1px solid var(--vf-line); border-radius: 9px; color: var(--vf-navy);
  font-size: 13.5px; font-weight: 600; height: 40px; padding: 0 10px; width: 100%;
}
.vf-row label { color: var(--vf-dim); display: block; font-size: 11px; margin-bottom: 4px; }
.vf-row-remove { background: #fff; border: 1px solid var(--vf-line); border-radius: 9px; color: var(--vf-dim); cursor: pointer; height: 40px; width: 36px; }
.vf-row-remove:hover { border-color: #E9B4AD; color: #B42318; }
.vf-row-linked { align-items: center; color: var(--vf-muted); display: flex; font-size: 12px; gap: 6px; white-space: nowrap; }

.vf-stance { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 20px; }
.vf-stance button { background: #F7FAFD; border: 1px solid var(--vf-line); border-radius: 12px; cursor: pointer; padding: 12px; text-align: left; }
.vf-stance button.is-active { background: #FFF8EC; border-color: var(--vf-amber); }
.vf-stance strong { color: var(--vf-navy); display: block; font-size: 14px; }
.vf-stance small { color: var(--vf-muted); font-size: 12px; }

/* ── The full picture ─────────────────────────────────────────────────── */

.vf-picture { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }

.vf-breakdown { list-style: none; margin: 0 0 14px; padding: 0; }
.vf-breakdown li { border-bottom: 1px solid var(--vf-line); display: flex; font-size: 13.5px; gap: 12px; justify-content: space-between; padding: 11px 0; }
.vf-breakdown li span { color: var(--vf-ink); }
.vf-breakdown li b { font-weight: 700; white-space: nowrap; }
.vf-breakdown li.is-add b { color: var(--vf-amber-deep); }
.vf-breakdown li.is-subtract b { color: #12805C; }
.vf-breakdown li.is-base b { color: var(--vf-navy); }
.vf-breakdown-total {
  align-items: center; background: #FFF8EC; border-radius: 12px; color: var(--vf-navy);
  display: flex; font-size: 14px; font-weight: 700; justify-content: space-between; margin: 0; padding: 14px 16px;
}
.vf-breakdown-total b { font-family: var(--font-display); font-size: 19px; }

.vf-stress { list-style: none; margin: 0 0 16px; padding: 0; }
.vf-stress li { align-items: center; border-bottom: 1px solid var(--vf-line); display: flex; gap: 12px; justify-content: space-between; padding: 11px 0; }
.vf-stress span { color: var(--vf-ink); font-size: 13.5px; }
.vf-stress b { align-items: center; display: flex; font-size: 12.5px; font-weight: 600; gap: 6px; white-space: nowrap; }
.vf-stress i { align-items: center; border-radius: 50%; display: flex; flex: none; height: 20px; justify-content: center; width: 20px; }
.vf-stress i svg { fill: none; height: 12px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; width: 12px; }
.vf-stress .is-funded i { background: #DFF3E8; color: #12805C; }
.vf-stress .is-funded b { color: #12805C; }
.vf-stress .is-close i { background: #FDF1DA; color: var(--vf-amber-deep); }
.vf-stress .is-close b { color: var(--vf-amber-deep); }
.vf-stress .is-fails i { background: #FBE6E4; color: #B42318; }
.vf-stress .is-fails b { color: #B42318; }

.vf-risk { align-items: start; background: #FDF1DA; border-radius: 12px; display: flex; gap: 10px; margin: 0; padding: 14px; }
.vf-risk-icon { color: var(--vf-amber-deep); flex: none; }
.vf-risk-icon svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 18px; }
.vf-risk strong { color: var(--vf-amber-deep); font-size: 13px; }
.vf-risk em { color: var(--vf-ink); font-size: 12.5px; font-style: normal; }

.vf-lever-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.vf-lever-tabs button { background: #F2F6FB; border: 0; border-radius: 9px; color: var(--vf-muted); cursor: pointer; font-size: 12.5px; font-weight: 600; padding: 8px 12px; }
.vf-lever-tabs button.is-active { background: var(--vf-amber); color: var(--vf-navy); }
.vf-lever-body { background: #F7FAFD; border: 1px solid var(--vf-line); border-radius: 12px; padding: 16px; }
.vf-lever-label { color: var(--vf-navy); display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 10px; }
.vf-lever-input { display: block; margin-bottom: 14px; }
.vf-lever-input::after { left: 12px; right: auto; }
.vf-slider { accent-color: var(--vf-amber); width: 100%; }
.vf-lever-outcome { align-items: center; background: #FFF4DC; border-radius: 10px; display: flex; gap: 10px; margin: 16px 0 0; padding: 12px; }
.vf-lever-icon { align-items: center; background: var(--vf-amber); border-radius: 50%; display: flex; flex: none; height: 30px; justify-content: center; width: 30px; }
.vf-lever-icon svg { fill: var(--vf-navy); height: 15px; width: 15px; }
.vf-lever-outcome strong { color: var(--vf-navy); display: block; font-size: 13.5px; }
.vf-lever-outcome small { color: var(--vf-muted); font-size: 12.5px; }

/* ── The published methodology ────────────────────────────────────────── */

.vf-prose { margin: 56px auto 0; max-width: 820px; }
.vf-prose h2 { color: var(--vf-navy); font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 44px 0 14px; }
.vf-prose h3 { color: var(--vf-navy); font-size: 17px; font-weight: 700; margin: 30px 0 8px; }
.vf-prose p { color: var(--vf-muted); font-size: 15px; line-height: 1.7; margin: 0 0 14px; }
.vf-prose code { background: #EDF3FA; border-radius: 5px; font-size: 13.5px; padding: 2px 6px; }
.vf-formula { background: #fff; border: 1px solid var(--vf-line); border-left: 4px solid var(--vf-amber); border-radius: 12px; color: var(--vf-ink); font-size: 15px; line-height: 1.65; margin: 0 0 18px; padding: 18px 20px; }
.vf-formula b { color: var(--vf-navy); }

.vf-methodology { margin-bottom: 44px; }
.vf-methodology > summary {
  align-items: center; background: var(--vf-amber); border-radius: 20px; cursor: pointer;
  display: flex; gap: 20px; list-style: none; padding: 26px 30px;
}
.vf-methodology > summary::-webkit-details-marker { display: none; }
.vf-methodology > summary:focus-visible { box-shadow: 0 0 0 3px rgba(7, 42, 94, .24); outline: none; }
.vf-methodology-icon {
  align-items: center; background: rgba(255, 255, 255, .55); border-radius: 50%; color: var(--vf-navy);
  display: flex; flex: none; height: 54px; justify-content: center; width: 54px;
}
.vf-methodology-icon svg, .vf-methodology-toggle svg {
  fill: none; height: 24px; stroke: currentColor; stroke-linecap: round;
  stroke-linejoin: round; stroke-width: 1.8; width: 24px;
}
.vf-methodology-copy { flex: 1; }
.vf-methodology-copy strong { color: var(--vf-navy); display: block; font-family: var(--font-display); font-size: 22px; }
.vf-methodology-copy small { color: #6A4E1C; display: block; font-size: 14px; margin-top: 4px; }
.vf-methodology-toggle {
  align-items: center; color: var(--vf-navy); display: flex; flex: none; justify-content: center;
  transition: transform .2s ease;
}
.vf-methodology[open] .vf-methodology-toggle { transform: rotate(180deg); }
.vf-methodology-content { padding-top: 28px; }
.vf-methodology-content > :first-child { margin-top: 0; }

.vf-table { background: #fff; border: 1px solid var(--vf-line); border-collapse: collapse; border-radius: 12px; font-size: 14px; margin: 0 0 18px; overflow: hidden; width: 100%; }
.vf-table caption { color: var(--vf-dim); font-size: 12.5px; padding-bottom: 8px; text-align: left; }
.vf-table th, .vf-table td { border-bottom: 1px solid var(--vf-line); padding: 11px 14px; text-align: left; }
.vf-table th { background: #F7FAFD; color: var(--vf-navy); font-weight: 700; }
.vf-table td { color: var(--vf-muted); }
.vf-table tr:last-child td { border-bottom: 0; }

.vf-faq details { background: #fff; border: 1px solid var(--vf-line); border-radius: 12px; margin-bottom: 10px; padding: 14px 18px; }
.vf-faq summary { color: var(--vf-navy); cursor: pointer; font-size: 15px; font-weight: 700; }
.vf-faq p { margin: 10px 0 0; }

.vf-next { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0 0 24px; padding: 0; }
.vf-next a { background: #fff; border: 1px solid var(--vf-line); border-radius: 12px; display: block; padding: 16px; }
.vf-next a:hover { border-color: var(--vf-amber); box-shadow: var(--vf-shadow-lift); }
.vf-next strong { color: var(--vf-navy); display: block; font-size: 15px; margin-bottom: 4px; }
.vf-next span { color: var(--vf-muted); font-size: 13px; }
.vf-disclaimer { color: var(--vf-dim); font-size: 12.5px; line-height: 1.65; }

/* ── Narrower screens ─────────────────────────────────────────────────── */

@media (max-width: 1040px) {
  .vf-board, .vf-path { grid-template-columns: minmax(0, 1fr); }
  .vf-picture { grid-template-columns: minmax(0, 1fr); }
  .vf-path-side { flex-direction: row; }
  .vf-path-age { flex: 1; }
}

@media (max-width: 860px) {
  .vf-main { padding: 0 18px 72px; }
  .vf-trust { grid-template-columns: minmax(0, 1fr); }
  .vf-steps { align-items: flex-start; flex-direction: column; gap: 10px; }
  .vf-steps ol { gap: 8px; overflow-x: auto; width: 100%; }
  .vf-steps li { white-space: nowrap; }
  .vf-hero-number { grid-template-columns: minmax(0, 1fr); }
  .vf-tiles, .vf-tabs, .vf-sheet-grid, .vf-stance, .vf-next { grid-template-columns: minmax(0, 1fr); }
  .vf-path-side { flex-direction: column; }
  .vf-refine { align-items: flex-start; flex-direction: column; }
  .vf-methodology > summary { align-items: flex-start; gap: 14px; padding: 22px 20px; }
  .vf-methodology-icon { height: 46px; width: 46px; }
  .vf-row--goal, .vf-row--income { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #vf-chart { height: 240px; }
}

@media (max-width: 520px) {
  .vf-field { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .vf-field--rupee::after { right: auto; left: 12px; top: 34px; }
  .vf-field--percent::after { top: 34px; }
  .vf-figure output { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .vf-primary, .vf-secondary, .vf-next a, .vf-methodology-toggle { transition: none; }
  .vf-primary:hover { transform: none; }
}

/* The same line carries a range ("43 – 48") and, when there is no crossing
   yet, the sentence that says what is missing. A pill around a sentence reads
   as a tooltip, so only the range keeps the pill. */
.vf-range--prompt { background: none; color: var(--vf-muted); padding: 0; }

@media (max-width: 720px) {
  .vf-path-head { flex-direction: column; gap: 10px; }
  .vf-legend { flex-wrap: wrap; }
}

/* Why this number differs from the 25× one. It sits under the tiles rather
   than beside the hero, because it is the reasoning behind the figure and not
   a caption on it. */
.vf-compare { background: #F7FAFD; border: 1px solid var(--vf-line); border-radius: 14px; margin-top: 16px; padding: 16px 18px; }
.vf-compare-head { color: var(--vf-navy); font-size: 14.5px; font-weight: 700; line-height: 1.5; margin: 0; }
.vf-compare-reasons { color: var(--vf-muted); font-size: 13.5px; line-height: 1.6; list-style: none; margin: 8px 0 0; padding: 0; }
.vf-compare-reasons li { padding-left: 18px; position: relative; }
.vf-compare-reasons li::before { color: var(--vf-amber-deep); content: '•'; left: 4px; position: absolute; }

/* Where a lever stops being arithmetic and starts being a suggestion about
   somebody's actual holdings. Stated before the controls, not after them. */
.vf-lever-note { color: var(--vf-dim); font-size: 12px; line-height: 1.5; margin: -6px 0 14px; }