/* Self-hosted variable fonts (D-028: no CDN) */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* .container utility and .skip-link have moved to layout.css (global)
   and base.css respectively — they are needed on every page, not just
   the calculator. */

/* --sp-7 utility (used in callout padding) */
:root { --sp-7: 28px; }

/* Website UI kit overrides — calc page chrome that isn't in components.css yet.
   These match the layout patterns documented in finsiderai/docs/design/readme.md. */

/* Native range input thumb styling — needs vendor prefixes */
.sik-range {
  -webkit-appearance: none; appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  outline: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  touch-action: pan-x;              /* allow horizontal drag; prevent accidental page scroll */
}

/* Slider container — relative anchor for absolutely-positioned track + input.
   Height grows on touch devices so the hit area is comfortable to drag. */
.slider-row__track {
  position: relative;
  height: 22px;
}
.slider-row__track-bg,
.slider-row__track-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  border-radius: 999px;
  pointer-events: none;
}
.slider-row__track-bg {
  right: 0;
  background: var(--c-surface-3);
}
.slider-row__track-fill {
  background: var(--c-indigo-500);
}
.sik-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px;
  background: var(--c-indigo-500);
  border: 3px solid var(--c-surface);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(10, 18, 48, 0.18);
  cursor: grab; margin-top: -8px;
}
.sik-range--gain::-webkit-slider-thumb { background: var(--c-gain); }
.sik-range::-webkit-slider-runnable-track { background: transparent; height: 6px; }
.sik-range::-moz-range-thumb {
  width: 22px; height: 22px;
  background: var(--c-indigo-500);
  border: 3px solid var(--c-surface);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(10, 18, 48, 0.18);
  cursor: grab;
}
.sik-range--gain::-moz-range-thumb { background: var(--c-gain); }
.sik-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(61, 90, 254, 0.25); }
.sik-range--gain:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25); }

/* ============================================================
   SITE HEADER + MEGA MENU + MOBILE DRAWER
   Moved to layout.css (loaded globally so every page gets the
   header/footer chrome, not just the calculator).
   ============================================================ */
/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  text-align: center;
  padding: 80px 0 96px;
  overflow: hidden;
}
.hero__glow {
  position: absolute;
  top: -240px;
  left: 50%;
  width: 1100px;
  height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(94, 118, 255, 0.18), rgba(94, 118, 255, 0.05) 45%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  display: none;
}
.hero__inner { position: relative; z-index: 1; }
.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 14px;
  background: var(--c-indigo-100);
  color: var(--c-indigo-500);
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.hero__pill-dot {
  width: 6px; height: 6px;
  background: var(--c-indigo-500);
  border-radius: var(--r-full);
}
.hero__h1 {
  margin-top: var(--sp-5);
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--c-navy-900);
}
.hero__h1-accent {
  color: var(--c-indigo-500);
  font-style: italic;
}
.hero__subtitle {
  margin: var(--sp-6) auto 0;
  max-width: 760px;
  font-size: 1.25rem;
  color: var(--c-text-sub);
  line-height: 1.55;
}
.hero__claims {
  display: inline-flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
  margin-top: var(--sp-8);
  font-size: var(--fs-body-sm);
  color: var(--c-text-sub);
}
.hero__claim {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
/* PROBABLE-DEAD: retained pending ad activation / feature review */
.hero__claim--muted {
  color: var(--c-text-muted);
}
.hero__claim--muted::before {
  content: "\00b7";
  color: var(--c-border-strong);
  margin-right: 14px;
  font-size: 14px;
}
.hero__claim-dot {
  width: 7px; height: 7px;
  background: var(--c-gain);
  border-radius: var(--r-full);
}
@media (max-width: 760px) {
  .hero { padding: 64px 0 64px; }
  .hero__h1 { font-size: 2.5rem; }
  .hero__subtitle { font-size: 1rem; }
  .hero__subtitle br { display: none; }
}

/* ============================================================
   MODE SELECTOR
   ============================================================ */
.mode-section {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}
.mode-section__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
  letter-spacing: var(--ls-tight);
}
.mode-section__subtitle {
  margin-top: 8px;
  font-size: 1.0625rem;
  color: var(--c-text-sub);
}
.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
@media (max-width: 760px) { .mode-grid { grid-template-columns: 1fr; } }

.mode-card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  cursor: pointer;
  transition: background-color var(--t-base), border-color var(--t-fast), box-shadow var(--t-base), transform var(--t-base);
  overflow: hidden;
}
/* Button-specific resets — replaces the inline style="" removed from the three
   mode-card <button>s (missed in the Round 8 inline-style audit). The base
   .mode-card already supplies background:var(--c-surface) (#FFFFFF), border,
   padding and cursor; a <button> still needs width/text-align/font normalised.
   NOTE: no `border:none` — the .mode-card 1px border (and its .is-active accent)
   is intentional, and button.mode-card would out-specify and erase it. */
button.mode-card {
  width: 100%;
  text-align: left;
  background: var(--c-surface);
  cursor: pointer;
  font: inherit;
}
.mode-card:hover {
  border-color: var(--c-indigo-200);
  box-shadow: var(--sh-card);
}
.mode-card__rail {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  transition: background var(--t-fast);
}
.mode-card.is-active { border-color: var(--c-indigo-500); border-width: 1.5px; box-shadow: 0 12px 32px rgba(61, 90, 254, 0.14), 0 0 0 4px rgba(61, 90, 254, 0.08); transform: scale(1.02); }
@media (hover: hover) {
  .mode-card:not(.is-active):hover { transform: translateY(-2px); box-shadow: var(--sh-elevated); }
}
.mode-card.is-active .mode-card__rail { background: var(--grad-brand); }
.mode-card.is-active.is-violet { border-color: var(--c-violet-500); box-shadow: 0 12px 32px rgba(110, 91, 232, 0.14), 0 0 0 4px rgba(110, 91, 232, 0.08); }
.mode-card.is-active.is-violet .mode-card__rail { background: linear-gradient(135deg, #6E5BE8, #94A6FF); }
.mode-card.is-active.is-gain { border-color: var(--c-gain); box-shadow: 0 12px 32px rgba(16, 185, 129, 0.14), 0 0 0 4px rgba(16, 185, 129, 0.08); }
.mode-card.is-active.is-gain .mode-card__rail { background: linear-gradient(135deg, #10B981, #34D399); }

.mode-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.mode-card__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 3px 9px 3px 7px;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
}
.mode-card.is-active .mode-card__tag {
  background: rgba(61, 90, 254, 0.08);
  border-color: rgba(61, 90, 254, 0.4);
  color: var(--c-indigo-500);
}
.mode-card.is-active.is-violet .mode-card__tag { background: rgba(110, 91, 232, 0.08); border-color: rgba(110, 91, 232, 0.4); color: var(--c-violet-500); }
.mode-card.is-active.is-gain .mode-card__tag { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.4); color: var(--c-gain); }
.mode-card__dot {
  width: 8px; height: 8px;
  background: var(--c-border-strong);
  border-radius: var(--r-full);
  transition: background var(--t-fast);
}
.mode-card.is-active .mode-card__dot { background: var(--c-indigo-500); box-shadow: 0 0 0 4px rgba(61, 90, 254, 0.18); }
.mode-card.is-active.is-violet .mode-card__dot { background: var(--c-violet-500); box-shadow: 0 0 0 4px rgba(110, 91, 232, 0.18); }
.mode-card.is-active.is-gain .mode-card__dot { background: var(--c-gain); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18); }
.mode-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
  letter-spacing: var(--ls-tight);
}
.mode-card__subtitle {
  margin-top: var(--sp-1);
  font-size: var(--fs-body-sm);
  color: var(--c-text-sub);
  line-height: 1.5;
}
.mode-card__meta {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.mode-card__arrow {
  flex-shrink: 0;
  color: var(--c-text-muted);
  transition: color var(--t-fast), transform var(--t-fast);
}
.mode-card.is-active .mode-card__meta { color: var(--c-indigo-500); }
.mode-card.is-active.is-violet .mode-card__meta { color: var(--c-violet-500); }
.mode-card.is-active.is-gain .mode-card__meta { color: var(--c-gain); }
.mode-card.is-active .mode-card__arrow { color: var(--c-indigo-500); transform: translateX(2px); }
.mode-card.is-active.is-violet .mode-card__arrow { color: var(--c-violet-500); }
.mode-card.is-active.is-gain .mode-card__arrow { color: var(--c-gain); }

.mode-card__tag-sep {
  opacity: 0.55;
  margin: 0 1px;
}

.mode-card__chart-wrap {
  margin-top: var(--sp-5);
  height: 80px;
  display: flex;
  align-items: stretch;
  padding: var(--sp-3) 0;
}
.mode-card__chart {
  width: 100%;
  height: 100%;
  display: block;
}

/* ============================================================
   CALCULATOR PANEL
   ============================================================ */
.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--sp-5);
}
@media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; } }

.calc-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
}
.calc-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--c-border);
}
.calc-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tighter);
  color: var(--c-navy-900);
  line-height: 1.1;
}
.calc-card__sub {
  margin-top: 6px;
  font-size: var(--fs-body-sm);
  color: var(--c-text-sub);
  line-height: 1.4;
}

/* Slider row */
.slider-row { margin-bottom: var(--sp-6); }
.slider-row:last-child { margin-bottom: 0; }
.slider-row__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.slider-row__label {
  font-size: 0.90rem;
  font-weight: var(--fw-semibold);
  color: var(--c-text-sub);
}
.slider-row__hint {
  display: block;
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  font-weight: var(--fw-regular);
  margin-top: 2px;
}
.slider-row__chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
}

/* Stepper controls: [-] editable value [+] — replaces the read-only chip.
   One implementation drives all slider rows on all 3 calculator pages. */
.slider-row__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.slider-row__chip-input {
  width: 11ch;
  text-align: center;
  padding: 5px 8px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
}
.slider-row__chip-input:focus {
  outline: none;
  border-color: var(--c-indigo-500);
  box-shadow: 0 0 0 3px var(--c-indigo-100);
}
.slider-row__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-text-sub);
  cursor: pointer;
  transition: background 120ms ease, transform 80ms ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;               /* we handle all touch via touchstart/touchend */
}
.slider-row__btn:hover { background: var(--c-surface-3); }
.slider-row__btn:active { transform: scale(0.95); }
.slider-row__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
@media (max-width: 600px) {
  /* Touch targets on phones: 44×44 stepper buttons; a chip-input wide enough
     for the longest value (₹1,00,00,000 = 12 chars) so it never truncates, a
     44px min-height to match the buttons, 16px font to block iOS focus-zoom,
     and a roomier gap so adjacent button/input taps don't collide. */
  .slider-row__btn { width: 44px; height: 44px; }
  .slider-row__chip-input {
    font-size: 1rem;
    width: 14ch;
    min-height: 44px;
    padding: 6px 6px;
  }
  .slider-row__controls { gap: var(--sp-2); }
}
.slider-row__range {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Advanced toggle row */
.adv-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid #f0f3fa;
  border-radius: var(--r-md);
  margin-bottom: var(--sp-5);
  margin-top: 40px;
}
.adv-toggle__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #f0f3fa;
  border-radius: var(--r-md);
  color: var(--c-indigo-500);
}
.adv-toggle__icon svg { width: 20px; height: 20px; }
.adv-toggle__text  { display: flex; flex-direction: column; min-width: 0; }
.adv-toggle__label { font-size: 0.90rem; font-weight: var(--fw-bold); color: var(--c-navy-900); line-height: 1.2; }
.adv-toggle__sub   { margin-top: 2px; font-size: 0.75rem; color: var(--c-text-sub); }
.adv-toggle__switch { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; }

/* Investment-details CTA — sized to match the results-actions row exactly
   (same height, padding, font-size, radius, uniform width). Container mirrors
   .results-actions: flex, sp-2 gap, wrap, sp-5 top margin, no divider.
   Colour meaning kept: Calculate = indigo fill, Reset = quiet outline. */
.btn-row {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}
.btn-row > .btn {
  flex: 1;
  height: auto;
  min-height: 36px;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  border-width: 1px;
  border-radius: var(--r-full);
}

/* Calculate — indigo fill (primary colour) */
.calc-card .btn-row .btn--primary {
  background: var(--c-indigo-500);
  color: var(--c-surface);
  border-color: var(--c-indigo-500);
}
.calc-card .btn-row .btn--primary:hover {
  background: var(--c-indigo-400);
  box-shadow: var(--sh-glow);
}
.calc-card .btn-row .btn--primary:active { transform: translateY(1px); }

/* Reset — quiet outline (secondary colour, matches the results buttons) */
.calc-card .btn-row .btn--secondary {
  background: var(--c-bg);
  color: var(--c-text-sub);
  border-color: var(--c-border);
}
.calc-card .btn-row .btn--secondary:hover {
  background: var(--c-surface-2);
  border-color: var(--c-border-strong);
  color: var(--c-text);
}

/* ============================================================
   RESULTS PANEL
   ============================================================ */
.results-card {
  padding: var(--sp-6) var(--sp-6) var(--sp-6);
}

.results-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-border);
}
.results-head__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tighter);
  color: var(--c-navy-900);
  line-height: 1.1;
}
.results-head__sub {
  margin-top: 6px;
  font-size: var(--fs-body-sm);
  color: var(--c-text-sub);
  line-height: 1.4;
}
.results-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: var(--r-full);
  background: var(--c-gain-tint);
  color: #07895E;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Hero block */
.results-hero {
  padding-top: var(--sp-6);
}
.results-hero__caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.results-hero__value {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  color: var(--c-navy-900);
  letter-spacing: -0.035em;
  line-height: 1.0;
}
.results-hero__num {
  font-size: 3rem;
  font-weight: var(--fw-extrabold);
}
.results-hero__unit {
  font-size: 3rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
}
.results-growth {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-4);
  padding: 6px 14px;
  border-radius: var(--r-full);
  background: var(--c-gain-tint);
  color: #07895E;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
}
.results-real {
  display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--sp-4);
    padding: 6px 14px;
    border-radius: var(--r-full);
    background: #fef3c7;
    color: #07895E;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
}
.results-real__value {
  display: inline;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: #de861c;
}
.results-bar {
  display: flex;
  height: 10px;
  margin-top: var(--sp-5);
  border-radius: var(--r-full);
  overflow: hidden;
  background: var(--c-surface-3);
}
.results-bar__inv { background: var(--c-indigo-500); }
.results-bar__ret { background: linear-gradient(90deg, #10B981 0%, #34D399 100%); }

/* Stat tiles */
.results-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.results-stat {
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.results-stat__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.results-stat__dot { width: 8px; height: 8px; border-radius: 50%; }
.results-stat__dot--inv  { background: var(--c-indigo-500); }
.results-stat__dot--gain { background: var(--c-gain); }
.results-stat__label {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  white-space: nowrap;
}
.results-stat__val {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 1.625rem;
  font-weight: var(--fw-extrabold);
  color: var(--c-navy-900);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.results-stat__val--gain { color: var(--c-gain); }
.results-stat__sub {
  margin-top: 6px;
  font-size: var(--fs-body-sm);
  color: var(--c-text-sub);
}

/* Chart card */
.results-chart-card {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.results-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.results-legend {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-5);
}
.results-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
}
.results-legend__dot { width: 10px; height: 10px; border-radius: 50%; }
.results-legend__dot--inv  { background: var(--c-indigo-500); }
.results-legend__dot--gain { background: var(--c-gain); }

.results-ranges {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--c-surface-3);
  border-radius: var(--r-full);
}
.results-range {
  appearance: none;
  border: none;
  background: transparent;
  padding: 6px 12px;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-text-sub);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
  min-width: 36px;
}
.results-range:hover:not(:disabled) { color: var(--c-navy-900); }
.results-range.is-active {
  background: var(--c-surface);
  color: var(--c-navy-900);
  box-shadow: 0 1px 2px rgba(8, 18, 58, 0.10);
}
.results-range.is-disabled,
.results-range:disabled {
  color: var(--c-border-strong);
  cursor: not-allowed;
}

.results-chart {
  margin-top: var(--sp-4);
}
.portfolio-chart { width: 100%; height: 320px; display: block; }

/* Actions */
.results-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}
.results-actions__btn {
  flex: 1;
  height: auto;
  min-height: 36px;
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-bg);
  color: var(--c-text-sub);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}
.results-actions__btn:hover {
  background: var(--c-indigo-100);
  color: var(--c-indigo-500);
  border-color: var(--c-indigo-200);
}

@media (max-width: 760px) {
  .results-card { padding: var(--sp-5); }
  .results-hero__num { font-size: 3rem; }
  .results-hero__unit { font-size: 2.25rem; }
  .results-stats { grid-template-columns: 1fr; }
  .results-chart-head { flex-direction: column; align-items: stretch; }
  .results-ranges { align-self: stretch; justify-content: space-between; }
}

/* ============================================================
   TABLE WRAP
   ============================================================ */
.section-block { margin-top: var(--sp-16); }
.section-block__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}
.section-block__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
  letter-spacing: var(--ls-tight);
}
.section-block__sub {
  margin-top: var(--sp-1);
  font-size: var(--fs-body-sm);
  color: var(--c-text-sub);
}

/* ============================================================
   YEAR-BY-YEAR GROWTH (.ybg)
   Full-period table with a horizontal stacked growth bar per row.
   Bar width scales to the final-year balance; segments split
   invested (indigo) vs returns (green→cyan gradient).
   ============================================================ */

.ybg-card {
  padding: 0;
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: none;
}

.ybg-table {
  width: 100%;
  border-collapse: collapse;
}

.ybg-row {
  border-bottom: 1px solid var(--c-border);
  transition: background var(--t-fast);
}
.ybg-row:last-child { border-bottom: none; }

/* Even rows: alternate tint on td so it layers under cell borders */
.ybg-table tbody .ybg-row:nth-child(even) td {
  background: var(--c-surface-2);
}
/* Hover: indigo surface tint */
.ybg-table tbody .ybg-row:hover td {
  background: var(--c-surface-3);
}

/* Full-grid borders on all data cells */
.ybg-table td {
  border: 1px solid var(--c-border);
  transition: background var(--t-fast);
}

/* ─── Two-row grouped thead: brand-colored ──────────────────────────────
   Group row:  deep navy  (#0F1B4C) ← site primary brand
   Rowspan:    darkest navy (#08123A) ← visual anchor for Year + WM
   Column row: lightest indigo tint (#ECEFFF) ← connects to body
   ─────────────────────────────────────────────────────────────────────── */

/* Group header row: deep navy, white text */
.ybg-thead-groups th {
  background: #fafbfe;
  color: var(--c-navy-900);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--sp-2) var(--sp-3);
  text-align: center;
  border: 1px solid var(--c-border);
}

/* Year + Wealth Mult. span both header rows — darkest navy as visual anchor */
.ybg-thead-groups th[rowspan="2"] {
  background: #fafbfe;
  vertical-align: middle;
}

/* Year column: left-aligned */
.ybg-th--year {
  text-align: left;
  padding-left: var(--sp-6);
}

/* Wealth multiplier: center */
.ybg-th--wealth {
  text-align: center;
}

/* Column header row: light indigo tint, deep navy text */
.ybg-thead-cols th {
  background: #fafbfe;
  color: var(--c-navy-900);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--sp-2) var(--sp-3);
  text-align: center;
  border: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

/* Sub-label: LTCG X% · STCG Y% beneath Est. Tax */
.ybg-th-rates {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: #3d5afe;
  letter-spacing: 0.03em;
  margin-top: 2px;
  text-transform: none;
}

/* Year data cell */
.ybg-cell--year {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  color: var(--c-navy-900);
  padding: 16px;
  text-align:center;
  white-space: nowrap;
}
.ybg-year-label { display: none; }

/* Numeric data cells */
.ybg-cell--num {
  text-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
  font-size: var(--fs-body-sm);
  padding: var(--sp-4) var(--sp-3);
  white-space: nowrap;
}
.ybg-cell--gains .num { color: var(--c-gain); }
.ybg-cell--balance .num {
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
}

/* Tax column — amber for positive amounts */
.ybg-cell--tax .num { color: var(--c-warn); font-weight: var(--fw-medium); }
.ybg-num--nil { color: var(--c-text-muted); }

/* New column type styles */
.ybg-cell--mult .num {
  font-weight: var(--fw-bold);
  color: var(--c-text-sub);
}
.ybg-cell--mult-high .num { color: var(--c-gain); }

.ybg-cell--posttax .num { color: var(--c-text-sub); }


/* Scroll wrapper — enables horizontal scroll on tablet/desktop */
.ybg-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Tablet: horizontal scroll + sticky Year column */
@media (min-width: 768px) and (max-width: 1023px) {
  .ybg-cell--year {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--c-surface);
  }
  /* Year header cell: keep its dark navy background when sticky */
  .ybg-thead-groups th.ybg-th--year {
    background: #fafbfe;
    z-index: 2;
  }
  .ybg-table tbody .ybg-row:nth-child(even) .ybg-cell--year {
    background: var(--c-surface-2);
  }
  .ybg-table tbody .ybg-row:hover .ybg-cell--year {
    background: var(--c-surface-3);
  }
}


/* Format toggle — full INR on desktop, compact K/L/Cr on mobile (below). */
.num--full { display: inline; }
.num--compact { display: none; }

/* Mobile: each row becomes a stacked card with a surface-2 title bar
   ┌─────────────────────────────────────┐
   │  YEAR  Y10                          │   ← surface-2 title bar
   ├─────────────────────────────────────┤
   │  MONTHLY SIP         ₹31,214        │
   │  INVESTED            ₹45,00,000     │
   │  GAINS THIS YEAR     +₹8,22,146     │
   │  TOTAL VALUE         ₹1,26,14,400   │
   │  WEALTH MULT.        2.8x           │
   │  EST. TAX            ₹2,45,000      │
   │  POST-TAX VALUE      ₹1,16,15,725   │
   └─────────────────────────────────────┘
   Visual treatment mirrors .goal-table on the same breakpoint:
   white card, surface-2 heading bar, grid label/value rows with
   uppercase 10px bold labels and right-aligned tabular values.
*/
@media (max-width: 767px) {
  .ybg-table thead { display: none; }
  .ybg-card { background: transparent; border: none; padding: 0; }
  .ybg-scroll-wrap { overflow: visible; }
  .ybg-table {
    display: block;
    width: 100%;
  }
  .ybg-table tbody {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: 0;
  }

  /* Card container — matches .goal-table__row mobile */
  .ybg-row {
    display: block;
    padding: 0;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .ybg-table tbody .ybg-row:nth-child(even),
  .ybg-table tbody .ybg-row:hover { background: var(--c-surface); }

  /* Reset full-grid td borders — card layout uses its own cell borders */
  .ybg-table td { border: none; }

  /* Card title bar — matches .goal-table__goal mobile */
  .ybg-cell--year {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-border);
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: var(--fw-bold);
    color: var(--c-navy-900);
    letter-spacing: var(--ls-tight);
  }
  .ybg-year-label {
    display: inline;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text-muted);
  }
  .ybg-year-val {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    color: var(--c-navy-900);
    line-height: 1;
  }

  /* Stat rows — matches .goal-table__row > .num mobile */
  .ybg-cell--num {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-3);
    align-items: baseline;
    padding: 10px var(--sp-4);
    border-bottom: 1px solid var(--c-border);
    font-size: 0.95rem;
    font-weight: var(--fw-semibold);
  }
  .ybg-cell--num:last-child { border-bottom: none; }
  .ybg-cell--num::before {
    content: attr(data-label);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    font-variant-numeric: normal;
    text-align: left;
  }
  .ybg-cell--num .num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    color: var(--c-navy-900);
    text-align: right;
  }
  .ybg-cell--gains .num    { color: var(--c-gain); }
  .ybg-cell--balance .num  { font-weight: var(--fw-bold); color: var(--c-navy-900); }
  .ybg-cell--posttax .num  { color: var(--c-text-sub); }
  .ybg-cell--mult .num     { font-weight: var(--fw-bold); color: var(--c-text-sub); }
  .ybg-cell--mult-high .num{ color: var(--c-gain); }
  .ybg-cell--tax .num      { color: var(--c-warn); font-weight: var(--fw-medium); }

}

/* ============================================================
   SITE FOOTER + DISCLAIMER BAND
   Moved to layout.css (loaded globally so every page gets the
   footer chrome, not just the calculator).
   ============================================================ */

/* ============================================================
   QUICK LINKS BAR
   ============================================================ */
.quick-links {
  display: grid;
  grid-template-columns: 160px repeat(4, 1fr);
  gap: 0;
  margin-top: var(--sp-8);
  padding: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(8, 18, 58, 0.03);
  overflow: hidden;
}
@media (max-width: 960px) {
  .quick-links { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .quick-links { grid-template-columns: 1fr; }
}

.quick-links__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: transparent;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-sub);
  white-space: nowrap;
  border-right: 1px solid var(--c-border);
}
.quick-links__badge-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(61, 90, 254, 0.10);
  color: var(--c-indigo-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.quick-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px;
  border-radius: 0;
  background: transparent;
  color: var(--c-navy-900);
  text-decoration: none;
  transition: background var(--t-fast);
  cursor: pointer;
  border-right: 1px solid var(--c-border);
}
.quick-link:last-child { border-right: none; }
.quick-link:hover { background: var(--c-surface-2); }

.quick-link__icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.quick-link__icon--indigo { background: var(--c-indigo-100); color: var(--c-indigo-500); }
.quick-link__icon--gain   { background: var(--c-gain-tint); color: var(--c-gain); }
.quick-link__icon--warn   { background: var(--c-warn-tint); color: var(--c-warn); }
/* PROBABLE-DEAD: retained pending ad activation / feature review */
.quick-link__icon--violet { background: var(--c-violet-100); color: var(--c-violet-500); }
.quick-link__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.quick-link__title { font-size: 0.75rem; font-weight: var(--fw-bold); color: var(--c-navy-900); letter-spacing: var(--ls-tight); line-height: 1.2; }
.quick-link__sub   { font-size: 0.75rem; color: var(--c-text-sub); margin-top: 2px; line-height: 1.3; }
.quick-link__chev  { color: var(--c-text-muted); flex-shrink: 0; transition: transform var(--t-fast), color var(--t-fast); }
.quick-link:hover .quick-link__chev { color: var(--c-indigo-500); transform: translateX(2px); }

/* Tablet — drop the popular badge to a header row, links in a 2-col grid */
@media (max-width: 960px) {
  .quick-links__badge {
    grid-column: 1 / -1;
    border-right: none;
    border-bottom: 1px solid var(--c-border);
    justify-content: flex-start;
  }
  .quick-link {
    border-right: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
  }
  .quick-link:nth-child(2n+1) { border-right: 1px solid var(--c-border); }
  .quick-link:nth-child(2n)   { border-right: none; }
  .quick-link:nth-last-child(-n+2) { border-bottom: none; }
}

/* Mobile — stack vertically with horizontal dividers */
@media (max-width: 560px) {
  .quick-links__badge {
    border-bottom: 1px solid var(--c-border);
  }
  .quick-link,
  .quick-link:nth-child(2n+1),
  .quick-link:nth-child(2n) {
    border-right: none;
    border-bottom: 1px solid var(--c-border);
  }
  .quick-link:last-child { border-bottom: none; }
}

/* ============================================================
   AD SLOT
   ============================================================ */
/* ============================================================
   AD SLOT — responsive placeholder for AdSense
   Reserves height to avoid layout shift. Mobile collapses
   to a 320×100 box automatically.
   ============================================================ */
.ad-slot {
  --ad-min-h: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: var(--sp-12) auto;
  padding: 0;
  max-width: 100%;
  background: transparent;
  text-align: center;
}

/* Hero — slim leaderboard directly under the hero copy */
/* PROBABLE-DEAD: retained pending ad activation / feature review.
   These .ad-slot--* placement modifiers (and their compound .ad-slot__card
   rules) style the AdSense placeholder; .ad-slot__card base was removed as
   CERTAIN-dead, so these activate only if the placeholder design returns. */
.ad-slot--hero { margin-top: var(--sp-5); margin-bottom: var(--sp-12); }
.ad-slot--hero .ad-slot__card { --ad-min-h: 100px; max-width: 728px; }

/* Inline — between major sections, full-width leaderboard */
.ad-slot--inline { margin-top: var(--sp-12); margin-bottom: var(--sp-12); }
.ad-slot--inline .ad-slot__card { --ad-min-h: 110px; max-width: 970px; }

/* Centered — medium rectangle, sits in the reading column */
.ad-slot--centered .ad-slot__card { --ad-min-h: 280px; max-width: 336px; }

/* Billboard — before footer, big closing ad */
.ad-slot--billboard { margin-top: var(--sp-16); margin-bottom: var(--sp-12); }
.ad-slot--billboard .ad-slot__card { --ad-min-h: 250px; max-width: 970px; }

/* Mobile — every ad collapses to a 320×100 box, no overflow */
@media (max-width: 760px) {
  .ad-slot { margin: var(--sp-8) auto; }
  .ad-slot--centered .ad-slot__card,
  .ad-slot--billboard .ad-slot__card { --ad-min-h: 250px !important; max-width: 300px !important; }
}

/* ============================================================
   EXPLORE CALCULATORS GRID
   ============================================================ */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
@media (max-width: 960px) { .explore-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .explore-grid { grid-template-columns: 1fr; } }

.explore-card {
  display: block;
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.explore-card:hover {
  border-color: var(--c-indigo-300);
  box-shadow: var(--sh-card);
  transform: translateY(-1px);
}
.explore-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
  min-height: 32px;
}
.explore-card__icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.explore-card__icon--indigo { background: var(--c-indigo-100); color: var(--c-indigo-500); }
.explore-card__icon--violet { background: var(--c-violet-100); color: var(--c-violet-500); }
.explore-card__icon--gain   { background: var(--c-gain-tint); color: var(--c-gain); }
.explore-card__icon--warn   { background: var(--c-warn-tint); color: var(--c-warn); }
.explore-card__soon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: var(--c-warn-tint);
  color: var(--c-warn);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
}
.explore-card__soon-dot {
  width: 5px; height: 5px;
  background: var(--c-warn);
  border-radius: 50%;
}
.explore-card__title { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: var(--fw-bold); color: var(--c-navy-900); letter-spacing: var(--ls-tight); }
.explore-card__sub   { margin-top: 4px; font-size: var(--fs-body-sm); color: var(--c-text-sub); }

/* ============================================================
   LEARN GUIDE (Everything you'll learn)
   ============================================================ */
.learn-guide {
  margin-top: var(--sp-16);
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--sp-12) var(--sp-10);
  background: linear-gradient(160deg, #E8E5FE 0%, #DEDCFE 60%, #E4DCFC 100%);
  border-radius: var(--r-2xl);
  box-shadow: 0 2px 24px rgba(110, 91, 232, 0.10);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.learn-guide::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(110, 91, 232, 0.18) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: center;
  opacity: 0.5;
  pointer-events: none;
}
.learn-guide > * { position: relative; }

.learn-guide__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(217, 119, 6, 0.16);
  color: var(--c-warn);
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-4);
}
.learn-guide__title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tighter);
  color: var(--c-navy-900);
  margin-bottom: var(--sp-3);
}
.learn-guide__sub {
  font-size: var(--fs-body);
  color: var(--c-text-sub);
  max-width: 540px;
  margin: 0 auto var(--sp-6);
  text-align: center;
}
.learn-guide__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.learn-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-surface);
  border-radius: var(--r-full);
  color: var(--c-navy-900);
  text-decoration: none;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  box-shadow: 0 1px 2px rgba(8, 18, 58, 0.04);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.learn-pill:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 10px rgba(61, 90, 254, 0.10);
}
.learn-pill__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 6px;
  background: rgba(61, 90, 254, 0.10);
  color: var(--c-indigo-500);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}
.learn-pill__title { color: var(--c-navy-900); }

@media (max-width: 768px) {
  .learn-guide { padding: 48px 20px; }
}

/* ============================================================
   GENERIC CALLOUTS (At a glance + info-callouts)
   ============================================================ */
.callout {
  display: block;
  margin-top: var(--sp-12);
  padding: var(--sp-7, 28px) var(--sp-8);
  border-radius: var(--r-lg);
}
.callout--gain {
  background: linear-gradient(160deg, #DCFCE7 0%, #D1FAE5 60%, #C8F5DE 100%);
  border: 1px solid rgba(16, 185, 129, 0.20);
  box-shadow: 0 1px 0 rgba(16, 185, 129, 0.05);
}


/* ============================================================
   ARTICLE CONTENT BLOCKS
   ============================================================ */
.article-stack {
  max-width: 760px;
  margin: var(--sp-16) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.article-block { display: flex; flex-direction: column; gap: var(--sp-4); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-indigo-500);
}
.article-h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tighter);
  color: var(--c-navy-900);
  line-height: 1.2;
  margin-top: 2px;
  margin-bottom: 4px;
}
.article-h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--c-navy-900);
  line-height: 1.3;
  margin-top: 4px;
  margin-bottom: 4px;
}
.article-p {
  font-size: 1.0625rem;
  color: var(--c-text-sub);
  line-height: 1.65;
  text-align: justify;
}
.article-p strong { color: var(--c-navy-900); font-weight: var(--fw-semibold); }
.article-p em { font-style: italic; }

/* Mobile: left-align body copy — justify leaves uneven word gaps on narrow
   columns. Class-scoped to win over the base `p` mobile rule (base.css,
   max-width: 768px) without !important. */
@media (max-width: 768px) {
  .article-p,
  .info-callout__body {
    text-align: left;
  }
}

/* Ordered lists inside article-stack only — FAQ, calculator, table areas unaffected */
.article-stack ol {
  counter-reset: article-counter;
  list-style: none;
  padding-left: 0;
  margin: var(--sp-4) 0;
}
.article-stack ol > li {
  counter-increment: article-counter;
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: var(--sp-5);
  line-height: var(--lh-relaxed);
}
.article-stack ol > li::before {
  content: counter(article-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-indigo-100);
  color: var(--c-indigo-500);
  border-radius: var(--r-full);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.article-stack ol > li:last-child { margin-bottom: 0; }
.article-stack ol > li > strong:first-child { display: inline; }

/* Unordered list styling — matches the ol design language */
.article-stack ul {
  list-style: none;
  padding-left: 0;
  margin: var(--sp-4) 0;
}
.article-stack ul > li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: var(--sp-3);
  line-height: var(--lh-relaxed);
  color: var(--c-text-sub);
}
.article-stack ul > li::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0.6rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--c-indigo-500);
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.article-stack ul > li:last-child { margin-bottom: 0; }

/* Nested ul inside ol — smaller indent, lighter bullet */
.article-stack ol ul {
  margin: var(--sp-2) 0 var(--sp-2) 0;
}
.article-stack ol ul > li {
  padding-left: 1.25rem;
  margin-bottom: var(--sp-2);
}
.article-stack ol ul > li::before {
  left: 0.25rem;
  top: 0.65rem;
  width: 0.375rem;
  height: 0.375rem;
  background: var(--c-indigo-400);
}

/* Explicit ::marker suppression — browser defaults can sneak through list-style: none */
.article-stack ul,
.article-stack ol {
  list-style-type: none;
  list-style-image: none;
}
.article-stack ul > li::marker,
.article-stack ol > li::marker {
  content: '';
  display: none;
}
.article-stack ul > li,
.article-stack ol > li {
  list-style: none;
}


/* Equation blocks — code-window aesthetic */
.equation {
  margin: var(--sp-4) 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  box-shadow: 0 1px 2px rgba(8, 18, 58, 0.04), 0 8px 24px rgba(8, 18, 58, 0.05);
}
.equation__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 18px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.equation__dots { display: inline-flex; gap: 7px; }
.equation__dot  { width: 12px; height: 12px; border-radius: 50%; }
.equation__file {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--c-text-sub);
  padding-left: 14px;
  margin-left: 4px;
  border-left: 1px solid var(--c-border);
}
.equation__chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  background: var(--c-indigo-100);
  border-radius: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  color: var(--c-indigo-500);
  text-transform: uppercase;
}
.equation__chip svg { color: var(--c-indigo-500); }

.equation__body {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: 26px 26px;
  background: linear-gradient(180deg, #0A1230 0%, #081027 100%);
  color: var(--c-surface);
  font-family: var(--font-mono);
  font-size: 1.15rem;
  line-height: 1.4;
  position: relative;
}
.equation__body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(61, 90, 254, 0.18), transparent 50%);
  pointer-events: none;
}
.equation__lineno {
  color: rgba(255, 255, 255, 0.32);
  font-family: var(--font-mono);
  font-size: 13px;
  min-width: 20px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.equation__code {
  color: var(--c-indigo-500);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  position: relative;
  z-index: 1;
}
.equation__code .eq-fn  { color: var(--c-violet-500); font-weight: var(--fw-semibold); }
.equation__code .eq-var { color: var(--c-indigo-400); font-style: italic; }
.equation__code sup { font-size: 0.75em; vertical-align: super; color: var(--c-violet-500); font-style: italic; }

.equation__where {
  background: var(--c-surface);
  padding: 18px 22px 22px;
}
.equation__where-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 8px;
}
.equation__where-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-border);
}
.equation__where-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  padding: 8px 0;
  gap: 14px;
}
.equation__where-key {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--c-indigo-500);
  background: var(--c-indigo-100);
  border: 1px solid rgba(61, 90, 254, 0.12);
  padding: 4px 0;
  border-radius: 8px;
  text-align: center;
  width: 32px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.equation__where-val {
  font-size: var(--fs-body);
  color: var(--c-text);
}

/* Comparison table — uses fin-table component (components.css).
   Context overrides: vertical spacing + prose font-size + left-align for text content. */
.article-stack .fin-table-wrap { margin: var(--sp-5) 0; }
.article-stack .fin-table { font-size: var(--fs-body-sm); }
.article-stack .fin-table .fin-row td {
  text-align: left;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-text-sub);
}
.article-stack .fin-table .fin-cell--left { color: var(--c-navy-900); font-weight: var(--fw-semibold); }

/* Info callout (indigo & warn) */
.info-callout {
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-3);
}
.info-callout--indigo {
  background: rgba(61, 90, 254, 0.06);
  border: 1px solid rgba(61, 90, 254, 0.15);
}
/* PROBABLE-DEAD: retained pending ad activation / feature review */
.info-callout--warn {
  background: var(--c-warn-tint);
  border: 1px solid rgba(217, 119, 6, 0.22);
}
.info-callout__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 4px; }
.info-callout__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-indigo-500);
}
.info-callout__dot--warn { background: var(--c-warn); }
.info-callout__title {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--c-navy-900);
}
.info-callout--warn .info-callout__title { color: #7C3A04; }
.info-callout__body {
  font-size: var(--fs-body-sm);
  color: var(--c-text-sub);
  line-height: 1.6;
  margin-top: 4px;
  text-align: justify;
}
.info-callout--warn .info-callout__body { color: #7C3A04; }

/* ============================================================
   FAQ OVERVIEW + CATEGORY GROUPS
   ============================================================ */
.faq-overview {
  margin-top: var(--sp-16);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--sp-12) var(--sp-10);
  background: linear-gradient(160deg, #FEE3D5 0%, #FCD2C4 55%, #FBC8C0 100%);
  border-radius: var(--r-2xl);
  box-shadow: 0 2px 24px rgba(220, 100, 80, 0.10);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.faq-overview::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(220, 100, 80, 0.16) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: center;
  opacity: 0.45;
  pointer-events: none;
}
.faq-overview > * { position: relative; }
.faq-overview__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: #FEF3C7;
  color: #B45309;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-4);
}
.faq-overview__title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tighter);
  color: var(--c-navy-900);
  margin-bottom: var(--sp-3);
  line-height: 1.1;
}
.faq-overview__sub {
  font-size: var(--fs-body);
  color: var(--c-text-sub);
  max-width: 560px;
  margin: 0 auto var(--sp-8);
}
.faq-overview__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.faq-overview__row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 12px var(--sp-5);
  background: var(--c-surface);
  border-radius: var(--r-full);
  color: var(--c-navy-900);
  text-decoration: none;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  box-shadow: 0 1px 3px rgba(8, 18, 58, 0.05);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.faq-overview__row:hover {
  transform: translateX(4px);
  box-shadow: 0 6px 16px rgba(220, 100, 80, 0.12);
}
.faq-overview__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #FDF1ED;
  color: #D14A4A;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.faq-overview__row-title { color: var(--c-navy-900); }

.faq-stack {
  margin-top: var(--sp-16);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
}

.faq-group__banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px var(--sp-5);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-left: 4px solid;
  margin-bottom: var(--sp-6);
}
.faq-group__banner--indigo { background: #ECEFFF; color: var(--c-indigo-500); border-left-color: var(--c-indigo-500); }
.faq-group__banner--gain   { background: #DCFCE7; color: #06895E;             border-left-color: var(--c-gain); }
.faq-group__banner--violet { background: #ECE8FB; color: var(--c-violet-500); border-left-color: var(--c-violet-500); }
.faq-group__banner--warn   { background: #FEF3C7; color: #B45309;             border-left-color: #D97706; }
.faq-group__banner--danger { background: #FEE2E2; color: var(--c-danger);     border-left-color: var(--c-danger); }
.faq-group__banner--cyan   { background: #D1F5F1; color: #0F807A;             border-left-color: #14B8A6; }
.faq-group__banner--navy   { background: #E4E8F2; color: var(--c-navy-800);   border-left-color: var(--c-navy-800); }

.faq-group__num {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: none;
  color: inherit;
  opacity: 0.85;
}
.faq-group__pipe { opacity: 0.35; margin: 0 4px; }
.faq-group__short { letter-spacing: 0.16em; }
.faq-group__count {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.14em;
}
.faq-group__count-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.faq-group__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tighter);
  color: var(--c-navy-900);
  margin-top: 0;
  margin-bottom: var(--sp-5);
  line-height: 1.2;
}

.faq-group__items {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Per-group accordion — modern tech card design */
.faq-group .faq-item {
  position: relative;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 0;
  background: var(--c-surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  overflow: hidden;
}
.faq-group .faq-item:first-child { border-top: 1px solid var(--c-border); }
.faq-group .faq-item:hover {
  border-color: var(--c-indigo-300);
  box-shadow: 0 1px 2px rgba(8, 18, 58, 0.04);
}
.faq-group .faq-item[open] {
  border-color: var(--c-indigo-300);
  background: var(--c-surface);
  box-shadow: 0 4px 16px rgba(61, 90, 254, 0.06);
}
.faq-group .faq-item__question {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}
.faq-group .faq-item__question::-webkit-details-marker,
.faq-group .faq-item__question::marker { display: none; content: ""; }
.faq-group .faq-item__answer {
  margin-top: 0;
  padding: 18px 18px 18px;
  color: var(--c-text-sub);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.faq-group .faq-item:hover .faq-item__question { color: var(--c-indigo-500); }

.faq-item__chev {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--c-surface-3);
  color: var(--c-text-sub);
  transition: background var(--t-fast), color var(--t-fast), transform 0.2s ease;
  pointer-events: none;
}
.faq-group .faq-item:hover .faq-item__chev {
  background: var(--c-indigo-100);
  color: var(--c-indigo-500);
}
.faq-group .faq-item[open] .faq-item__chev {
  background: var(--c-indigo-500);
  color: var(--c-surface);
  transform: rotate(180deg);
}

/* ============================================================
   MOBILE OPTIMIZATION PASS
   Targeted fixes for phones — touch targets, type scale,
   spacing, stacking, and overflow guards.
   Layered as the last rules so they win the cascade.
   ============================================================ */

/* Universal: no horizontal scroll on small screens
   (overflow-x: clip preserves sticky positioning; the older
   overflow-x: hidden trick would break the sticky header) */
html, body { overflow-x: clip; }
img, svg, video { max-width: 100%; }

/* ---- Phones (≤ 600px) ---- */
@media (max-width: 600px) {
  /* Header + mobile-drawer mobile rules moved to layout.css */

  /* Hero — tighter rhythm, smaller display type */
  .hero { padding: 48px 0 48px; }
  .hero__h1 { font-size: 2.1rem; letter-spacing: -0.02em; }
  .hero__pill { font-size: 12px; padding: 5px 12px; }
  .hero__subtitle { font-size: 0.95rem; margin-top: var(--sp-4); }

  /* Section heads — stack title block above the "View all" pill */
  .section-block__head,
  .mode-section,
  .calc-card__head,
  .results-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
  .section-block { margin-top: var(--sp-12); }
  .section-block__title,
  .mode-section__title { font-size: 1.35rem; }

  /* Cards — give back horizontal room */
  .calc-card { padding: var(--sp-5); }
  .results-card { padding: var(--sp-5); }
  .ybg-row { padding: var(--sp-4); }

  /* Slider head — explicit stack on phones: the label takes the full first
     line, the [-] value [+] controls sit on the line below, right-aligned.
     Label flex-basis 100% forces the stack at every width (320–414px);
     margin-left:auto hugs the controls group to the right edge. */
  .slider-row__head {
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
  }
  .slider-row__label { font-size: 0.90rem; flex: 1 1 100%; }
  .slider-row__controls { margin-left: auto; }

  /* Slider — comfortable touch hit area on mobile.
     The visual track stays 6px (centered) but the input grows to 44px so
     the thumb is easy to grab anywhere along the bar. */
  .slider-row__track { height: 44px; }
  .sik-range::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -10px; }
  .sik-range::-moz-range-thumb     { width: 26px; height: 26px; }
  .slider-row__chip {
    font-size: 1rem;
    padding: 6px 12px;
  }
  .slider-row { margin-bottom: var(--sp-5); }

  /* Currency toggle — full width below the calc card title */
  .calc-card__head .currency-toggle { align-self: stretch; }
  .currency-toggle { width: 100%; }
  .currency-toggle__btn { flex: 1 1 0; min-height: 36px; justify-content: center; }

  /* Advanced toggle — slightly tighter padding, full-width label area */
  .adv-toggle { padding: var(--sp-3) var(--sp-4); }

  /* CTA rows — both sections stack to full-width with a comfortable tap
     height on mobile. Specificity (0,2,0) so this wins over the generic
     .btn--primary/.btn--secondary mobile polish below (which would otherwise
     size the two rows differently). Colours come from the desktop rules. */
  .btn-row > .btn,
  .results-actions > .results-actions__btn {
    flex: 1 1 100%;
    min-height: 48px;
    padding: var(--sp-2) var(--sp-4);
  }

  /* ----------------------------------------------------------------
     General mobile polish for .btn--primary and .btn--secondary.
     Anywhere these buttons appear standalone (header drawer CTA,
     inline links, etc.), they get:
       - 48px height (comfortable tap target)
       - allow text wrap on tiny screens so long labels never overflow
       - subtle elevation on primary so it reads as the strong action
       - secondary stays bordered + quiet so the hierarchy survives
     ---------------------------------------------------------------- */
  .btn--primary, .btn--secondary {
    min-height: 48px;
    padding-inline: var(--sp-5);
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
  .btn--primary {
    box-shadow: 0 6px 16px -8px rgba(8, 18, 58, 0.30),
                0 1px 2px rgba(8, 18, 58, 0.08);
  }
  .btn--secondary {
    border-width: 1.5px;
  }
  /* Sticky-feeling tap state — no surprise jumps */
  .btn--primary:active, .btn--secondary:active { transform: translateY(0); }

  /* Results — vertical big-number (button stacking handled by the unified
     CTA rule above; .results-actions already wraps + sp-2 gap from its base). */
  .results-hero__num { font-size: 2.5rem; }
  .results-hero__unit { font-size: 1.75rem; }
  .results-stats { grid-template-columns: 1fr; }

  /* Mode card — slightly tighter */
  .mode-card { padding: var(--sp-4); }

  /* Footer / newsletter / drawer / disclaimer-band mobile rules moved to layout.css */

  /* FAQ overview — breathing room on small screens */
  .faq-overview { padding: 48px 20px; }
  /* FAQ rows — pill radius wraps oddly with long text */
  .faq-overview__row { border-radius: var(--r-md); }

  /* ----------------------------------------------------------------
     Portfolio chart — preserve readability by keeping the SVG at a
     comfortable min-width and letting the chart container scroll
     horizontally on its own. The page never overflows; only the chart
     itself can be swiped to see the full timeline.
     ---------------------------------------------------------------- */
  .results-chart-card {
    padding: var(--sp-4);
    overflow: hidden;
  }
  .results-chart {
    margin-top: var(--sp-3);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* Pull the scroll surface to the card edge so swiping feels natural,
       then put the padding back inside so the SVG isn't kissing the border. */
    margin-inline: calc(var(--sp-4) * -1);
    padding-inline: var(--sp-4);
  }
  .results-chart::-webkit-scrollbar { height: 6px; }
  .results-chart::-webkit-scrollbar-thumb {
    background: var(--c-border-strong);
    border-radius: 999px;
  }
  .portfolio-chart {
    min-width: 520px;     /* keeps axis labels + end pills legible */
    height: 260px;
    display: block;
  }

}

/* ---- Very small phones (≤ 380px) ---- */
@media (max-width: 380px) {
  /* .site-header__wordmark and .container 380px rules moved to layout.css */
  .hero__h1 { font-size: 1.85rem; }
  .hero__subtitle { font-size: 0.9rem; }
  .calc-card,
  .results-card { padding: var(--sp-4); }
  .results-hero__num { font-size: 2.15rem; }
}

/* ── AJAX result update animation ──────────────────────────────── */
@keyframes fi-result-update {
  from { opacity: 0.6; transform: translateY(4px); }
  to   { opacity: 1;   transform: translateY(0);   }
}
.results-card.is-updating {
  animation: fi-result-update 280ms ease forwards;
}

/* ============================================================
   EXTRACTED FROM INLINE <style> — 2026-05-25 audit Round 3
   These rules previously lived in a <style> block at the end of
   templates/calculators/sip-lumpsum-calculator.php. Because that
   block sat in <body>, it cascaded AFTER every linked stylesheet
   (incl. the mobile pass above), so it won ties by source order.
   They are kept here at the END of calculator.css to preserve that
   exact cascade position — page-scoped to the calculator and
   pixel-identical to the prior inline rendering.

   Cleanup applied: the provably-dead lower-specificity .faq-item /
   .faq-item__question / .faq-item__answer / .faq-item[open]
   .faq-item__chev duplicates (always overridden by .faq-group
   .faq-item*) and the byte-identical .faq-group__count-dot were
   dropped; the redundant .btn--sm duplicate (identical to
   components.css) was dropped; hardcoded #07895E is now
   var(--c-gain-dark).
   ============================================================ */

/* --- Currency toggle (page-scoped override of components.css) --- */
.currency-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--c-surface-3);
  border-radius: var(--r-md);
}
.currency-toggle__btn {
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  background: transparent;
  color: var(--c-text-muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.currency-toggle__btn[aria-pressed="true"] {
  background: var(--c-surface);
  color: var(--c-navy-900);
  box-shadow: 0 1px 2px rgba(8, 18, 58, 0.06);
}
.currency-toggle__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- Form validation primitive --- */
.form-error {
  font-size: var(--fs-caption);
  color: var(--c-danger);
  margin-top: 4px;
}

/* --- Button variants (page-scoped overrides of components.css) --- */
.btn--ghost {
  background: transparent;
  color: var(--c-indigo-500);
  border-color: transparent;
}
.btn--ghost:hover {
  background: var(--c-indigo-100);
  color: var(--c-navy-900);
}
.btn--accent {
  background: var(--c-indigo-500);
  color: var(--c-surface);
  border-color: transparent;
}
.btn--accent:hover {
  background: var(--c-indigo-400);
}
.btn--accent:disabled,
.btn--accent[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- FAQ group banner + meta row --- */
.faq-group__banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
}
.faq-group__banner--indigo {
  background: var(--c-indigo-100);
  color: var(--c-indigo-500);
}
.faq-group__banner--gain {
  background: var(--c-gain-tint);
  color: var(--c-gain-dark);
}
.faq-group__banner--violet {
  background: var(--c-violet-100);
  color: var(--c-violet-500);
}
.faq-group__banner--warn {
  background: var(--c-warn-tint);
  color: var(--c-warn);
}
.faq-group__banner--danger {
  background: var(--c-danger-tint);
  color: var(--c-danger);
}
.faq-group__banner--cyan {
  background: var(--c-cyan-100);
  color: var(--c-cyan-500);
}
.faq-group__banner--navy {
  background: var(--c-surface-3);
  color: var(--c-navy-800);
}
.faq-group__num {
  font-family: var(--font-mono);
  font-size: 11px;
}
.faq-group__pipe {
  opacity: 0.4;
}
.faq-group__short {
  flex: 1;
}
.faq-group__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  opacity: 0.8;
}
.faq-group__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
  letter-spacing: var(--ls-tight);
  padding: var(--sp-5) 0 var(--sp-4);
  display: none;
}
.faq-group__items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.faq-group {
  margin-top: var(--sp-10);
}
.faq-stack {
  margin-top: 0;
}

/* --- FAQ accordion item: hover/open background + chevron base --- */
.faq-item__chev {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
  color: var(--c-text-muted);
  transition: transform var(--t-fast), color var(--t-fast);
}
.faq-item__question:hover {
  background: var(--c-surface-2);
}
.faq-item[open] .faq-item__question {
  background: var(--c-indigo-100);
}

/* --- FAQ overview link rows --- */
.faq-overview__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.faq-overview__row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-surface);
  border-radius: var(--r-full);
  text-decoration: none;
  color: var(--c-navy-900);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  box-shadow: 0 1px 2px rgba(8, 18, 58, 0.04);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.faq-overview__row:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 10px rgba(61, 90, 254, 0.10);
}
.faq-overview__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 6px;
  background: rgba(61, 90, 254, 0.10);
  color: var(--c-indigo-500);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}