/*!
 * Will My Money Last - India Retirement Drawdown (Decumulation) Calculator
 * Styles (extracted from inline <style> to keep HTML lean and improve caching)
 * No SEO impact - this file is purely presentational.
 */

/* ════════════════════════════════════════════════════════════
   RESET + DESIGN TOKENS
   ════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background-color: var(--bg);
  color-scheme: light dark;
  transition: background-color var(--t-slow);
}
/* Anchored sections account for sticky header offset */
.section[id], main[id="top"] { scroll-margin-top: 70px; }
/* compact single-row header on mobile */
@media (max-width: 640px) { .section[id] { scroll-margin-top: 64px; } }
body { margin: 0; }
button { font: inherit; }
button, input, select { color: inherit; }

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 1000;
  padding: 10px 14px;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-md);
}
.skip-link:focus-visible {
  top: 12px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:root {
  /* light theme — Linear/Stripe-inspired neutral palette */
  --bg: #fafafa;
  --bg-elevated: #ffffff;
  --bg-subtle: #f4f4f5;
  --bg-overlay: rgba(255, 255, 255, 0.85);
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --text: #18181b;
  --text-muted: #52525b;
  --text-quiet: #a1a1aa;
  --accent: #6366f1;
  --accent-strong: #4f46e5;
  --accent-soft: rgba(99, 102, 241, 0.10);
  --success: #059669;
  --success-soft: rgba(5, 150, 105, 0.10);
  --warning: #d97706;
  --warning-soft: rgba(217, 119, 6, 0.10);
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.10);
  --info: #0284c7;
  --info-soft: rgba(2, 132, 199, 0.10);

  --chart-1: #6366f1;
  --chart-2: #059669;
  --chart-3: #d97706;
  --chart-4: #dc2626;
  --chart-5: #0284c7;
  --chart-6: #a855f7;
  --chart-grid: rgba(0, 0, 0, 0.05);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);

  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Menlo", "Cascadia Code", "JetBrains Mono", Consolas, monospace;

  --t-fast: 120ms cubic-bezier(0.2, 0.0, 0.13, 1.5);
  --t-base: 200ms cubic-bezier(0.2, 0.0, 0.13, 1.5);
  --t-slow: 400ms cubic-bezier(0.2, 0.0, 0.13, 1.5);
  --t-slider: 140ms cubic-bezier(0.22, 1, 0.36, 1);

  /* plan split slider — bank (teal) vs stocks (indigo) */
  --plan-fd: #0f766e;
  --plan-fd-soft: #ccfbf1;
  --plan-fd-glow: rgba(15, 118, 110, 0.35);
  --plan-eq: #4f46e5;
  --plan-eq-soft: #e0e7ff;
  --plan-eq-glow: rgba(79, 70, 229, 0.35);

  /* sticky-header height — used to size the full-fold hero (kept slightly under
     the real height so the hero always fills the fold rather than leaving a gap) */
  --header-h: 64px;

  /* decorative page background (PatternCraft-style grid + indigo/violet aurora) */
  --grid-line: rgba(99, 102, 241, 0.05);
  --bg-glow-1: rgba(99, 102, 241, 0.14);
  --bg-glow-2: rgba(168, 85, 247, 0.10);

  /* hero-only background — richer prismatic four-corner aurora + dot matrix */
  --hero-dot: rgba(99, 102, 241, 0.16);
  --hero-c1: rgba(99, 102, 241, 0.22);   /* indigo · top-left      */
  --hero-c2: rgba(168, 85, 247, 0.20);   /* violet · top-right     */
  --hero-c3: rgba(56, 189, 248, 0.16);   /* sky    · bottom-left   */
  --hero-c4: rgba(236, 72, 153, 0.12);   /* pink   · bottom-right  */

  /* TL;DR band — PatternCraft-inspired top-fade grid + soft glow (distinct from .bg-decor) */
  --tldr-grid: rgba(99, 102, 241, 0.09);
  --tldr-glow: rgba(168, 85, 247, 0.14);
  --tldr-glow-2: rgba(56, 189, 248, 0.08);
}

[data-theme="dark"] {
  --bg: #09090b;
  --bg-elevated: #18181b;
  --bg-subtle: #27272a;
  --bg-overlay: rgba(24, 24, 27, 0.85);
  --border: #27272a;
  --border-strong: #3f3f46;
  --text: #fafafa;
  --text-muted: #a1a1aa;
  --text-quiet: #71717a;
  --accent: #818cf8;
  --accent-strong: #6366f1;
  --accent-soft: rgba(129, 140, 248, 0.15);
  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.15);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.15);
  --danger: #fb7185;
  --danger-soft: rgba(251, 113, 133, 0.15);
  --info: #38bdf8;
  --info-soft: rgba(56, 189, 248, 0.15);

  --chart-1: #818cf8;
  --chart-2: #34d399;
  --chart-3: #fbbf24;
  --chart-4: #fb7185;
  --chart-5: #38bdf8;
  --chart-6: #c084fc;
  --chart-grid: rgba(255, 255, 255, 0.06);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);

  --grid-line: rgba(148, 163, 184, 0.07);
  --bg-glow-1: rgba(99, 102, 241, 0.22);
  --bg-glow-2: rgba(168, 85, 247, 0.16);

  --hero-dot: rgba(148, 163, 184, 0.10);
  --hero-c1: rgba(99, 102, 241, 0.34);
  --hero-c2: rgba(168, 85, 247, 0.28);
  --hero-c3: rgba(56, 189, 248, 0.22);
  --hero-c4: rgba(236, 72, 153, 0.18);

  --tldr-grid: rgba(148, 163, 184, 0.12);
  --tldr-glow: rgba(129, 140, 248, 0.20);
  --tldr-glow-2: rgba(56, 189, 248, 0.12);

  --plan-fd: #2dd4bf;
  --plan-fd-soft: rgba(45, 212, 191, 0.14);
  --plan-fd-glow: rgba(45, 212, 191, 0.45);
  --plan-eq: #a5b4fc;
  --plan-eq-soft: rgba(165, 180, 252, 0.14);
  --plan-eq-glow: rgba(165, 180, 252, 0.4);
}

body {
  font-family: var(--font-sans);
  background: transparent;
  color: var(--text);
  line-height: 1.55;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color var(--t-slow);
  font-feature-settings: "cv11", "ss03", "cv01";
}

/* ════════════════════════════════════════════════════════════
   DECORATIVE PAGE BACKGROUND
   A fixed, PatternCraft-style backdrop: a subtle grid overlaid with a
   soft indigo + violet aurora glow at the top, masked so it fades out
   toward the lower viewport. Lives behind all content (z-index:-1),
   inherits the theme base colour, and never intercepts pointer input.
   ════════════════════════════════════════════════════════════ */
.bg-decor {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg);
  background-image:
    radial-gradient(60% 50% at 78% -10%, var(--bg-glow-2) 0%, transparent 62%),
    radial-gradient(65% 52% at 20% -12%, var(--bg-glow-1) 0%, transparent 62%),
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 56px 56px, 56px 56px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  -webkit-mask-image: radial-gradient(135% 85% at 50% 0%, #000 50%, transparent 100%);
          mask-image: radial-gradient(135% 85% at 50% 0%, #000 50%, transparent 100%);
  transition: background-color var(--t-slow);
}
@media (max-width: 640px) {
  .bg-decor { background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px; }
}

/* ════════════════════════════════════════════════════════════
   HERO BACKGROUND
   A distinct, full-bleed backdrop for the above-the-fold hero only:
   a prismatic four-corner aurora, a slow drifting dual-tone glow, and a
   fine dot matrix layered on top for crisp texture. An opaque base hides
   the global grid here, and the bottom edge is masked so the hero melts
   seamlessly into .bg-decor as the page scrolls. Rendered at body level
   with width:100% (= viewport, no scrollbar overflow) and placed after
   .bg-decor in the DOM so it paints above it within the same -1 layer.
   ════════════════════════════════════════════════════════════ */
.bg-hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 600px;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--bg);
  background-image:
    radial-gradient(38% 44% at 8% 4%,   var(--hero-c1) 0%, transparent 60%),
    radial-gradient(42% 46% at 92% 0%,  var(--hero-c2) 0%, transparent 60%),
    radial-gradient(46% 52% at 14% 98%, var(--hero-c3) 0%, transparent 58%),
    radial-gradient(48% 54% at 98% 94%, var(--hero-c4) 0%, transparent 58%);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0.5) 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0.5) 82%, transparent 100%);
  transition: background-color var(--t-slow);
}
/* slow drifting dual-tone glow — the "wow" layer (transform-only, GPU-cheap) */
.bg-hero::before {
  content: "";
  position: absolute;
  top: -28%;
  left: 50%;
  width: min(125vw, 1500px);
  height: min(125vw, 1500px);
  background:
    radial-gradient(circle at 34% 40%, var(--hero-c1) 0%, transparent 55%),
    radial-gradient(circle at 68% 32%, var(--hero-c2) 0%, transparent 55%);
  filter: blur(44px);
  will-change: transform;
  animation: hero-glow-drift 26s ease-in-out infinite alternate;
}
/* fine dot matrix on top of the colour for a crisp, techy texture */
.bg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--hero-dot) 1px, transparent 1.6px);
  background-size: 22px 22px;
}
@keyframes hero-glow-drift {
  0%   { transform: translate(-54%, -2%) scale(1);    }
  50%  { transform: translate(-46%,  4%) scale(1.09); }
  100% { transform: translate(-52%,  1%) scale(1.04); }
}
@media (max-width: 640px) {
  .bg-hero::after { background-size: 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-hero::before { animation: none; }
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
@media (max-width: 640px) {
  .container { padding-left: 16px; padding-right: 16px; }
}

/* ════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════ */
.app-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-overlay);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  transition: background var(--t-base), border-color var(--t-base);
}
.header-content {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; row-gap: 10px;
  padding-top: 14px; padding-bottom: 14px;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* let the title/subtitle wrapper shrink so the ellipsis below actually engages
   (otherwise the nowrap title overflows its flex box and collides with the
   header actions on narrow screens) */
.brand > div:not(.brand-mark) { min-width: 0; overflow: hidden; }
.brand-mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--accent); color: white;
  border-radius: var(--radius);
  font-weight: 700; font-size: 20px;
  flex-shrink: 0;
}
.brand-title {
  display: block;
  margin: 0; font-size: 16px; font-weight: 600; line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-subtitle {
  display: block;
  margin: 2px 0 0; color: var(--text-quiet);
  font-size: 12px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Simple / Advanced toggle — a sliding-thumb "switch" (replaces the old section-nav).
   The highlight is a single thumb that glides on transform (GPU-smooth). */
.mode-toggle {
  position: relative;
  display: inline-grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  padding: 3px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.mode-toggle-thumb {
  position: absolute; top: 3px; left: 3px; bottom: 3px;
  width: calc(50% - 3px);
  /* a vivid indigo pill that clearly reads as "selected" (white label on top) */
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border-radius: var(--radius-full);
  box-shadow:
    0 2px 8px -1px rgba(79, 70, 229, 0.50),
    0 1px 2px rgba(24, 24, 27, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.34s cubic-bezier(0.34, 1.4, 0.5, 1);
  will-change: transform;
}
.mode-toggle[data-active="advanced"] .mode-toggle-thumb { transform: translateX(100%); }
[data-theme="dark"] .mode-toggle-thumb {
  background: linear-gradient(135deg, #6d70f2 0%, #4f46e5 100%);
  box-shadow:
    0 2px 12px -1px rgba(99, 102, 241, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.mode-toggle-btn {
  position: relative; z-index: 1;
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  white-space: nowrap;
  transition: color var(--t-base);
}
.mode-toggle-btn:hover { color: var(--text); }
.mode-toggle-btn.active { color: #fff; }
.mode-toggle-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mode-spark { width: 13px; height: 13px; flex: none; fill: var(--accent); opacity: 0.85; transition: transform var(--t-base), fill var(--t-base), opacity var(--t-base); }
.mode-toggle-btn.active .mode-spark { transform: scale(1.12); fill: #fff; opacity: 1; }

/* Premium nudge — a calm breathing glow until the user tries Advanced once */
.mode-toggle--nudge { animation: modeNudge 2.8s ease-in-out infinite; }
@keyframes modeNudge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.16); }
}
.mode-toggle--nudge .mode-spark { animation: modeSpark 2.8s ease-in-out infinite; }
@keyframes modeSpark {
  0%, 100% { opacity: 0.55; transform: scale(0.9) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.18) rotate(15deg); }
}

@media (max-width: 640px) {
  /* shorter, single-row header → smaller sticky-offset + hero-fold reservation */
  :root { --header-h: 56px; }
  .hide-mobile { display: none; }
  /* Single-row mobile header — about half the old height.
     Layout:  [₹ logo]  [Simple/Advanced]  ······  [action icons]
     The wordmark text is dropped here (the page H1 right below repeats it),
     which frees the room needed to keep the toggle AND all four actions on
     ONE line instead of spilling onto a second, mostly-empty row. It still
     wraps gracefully below ~340px (very old/small phones). */
  .header-content {
    justify-content: flex-start;
    column-gap: 6px; row-gap: 6px;
    padding-top: 9px; padding-bottom: 9px;
  }
  .brand-subtitle,
  .brand > div:not(.brand-mark) { display: none; }
  .brand-mark { width: 32px; height: 32px; font-size: 17px; }
  .mode-toggle-btn { padding: 7px 8px; font-size: 12.5px; }
  /* the decorative spark widens the equal-width columns too much on phones */
  .mode-toggle .mode-spark { display: none; }
  .header-actions { margin-left: auto; gap: 2px; flex-shrink: 0; }
  .header-actions .btn { padding: 7px; }
}

/* ════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════ */
button, a, .tab, .preset-chip, .plan-split-chip, .adv-reveal { touch-action: manipulation; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  border-radius: var(--radius);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast);
  user-select: none;
}
.btn:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn:focus-visible,
.tab:focus-visible,
.preset-chip:focus-visible,
.plan-split-chip:focus-visible,
.adv-reveal:focus-visible,
.event-move:focus-visible,
.event-delete:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--bg-subtle); border-color: var(--border); }
.btn-outline {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.btn-outline:hover {
  background: var(--accent-soft);
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}
.btn-outline-danger {
  background: transparent;
  border-color: color-mix(in srgb, var(--danger) 22%, var(--border));
  color: var(--text-muted);
}
.btn-outline-danger:hover {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  color: color-mix(in srgb, var(--danger) 75%, var(--text-muted));
}
.btn-icon { padding: 7px; }
.btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-strong); }
.btn svg { width: 16px; height: 16px; }

/* ════════════════════════════════════════════════════════════
   SECTIONS / TYPOGRAPHY
   ════════════════════════════════════════════════════════════ */
.section { padding: 64px 0; }
.section + .section { border-top: 1px solid var(--border); }
@media (max-width: 880px) { .section { padding: 52px 0; } }
@media (max-width: 640px) { .section { padding: 40px 0; } }

.section-head { margin-bottom: 40px; }
@media (max-width: 640px) { .section-head { margin-bottom: 28px; } }
.section-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.section-title {
  margin: 0; font-size: 26px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.2;
}
.section-title.section-title--lead {
  font-size: clamp(28px, 4.5vw, 42px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
}
.section-title.section-title--lead .info-btn {
  width: 18px; height: 18px;
  min-width: 18px; min-height: 18px;
  font-size: 17px;
  margin-left: 5px;
  vertical-align: 0.15em;
}
.section-subtitle {
  margin: 8px 0 0; color: var(--text-muted);
  font-size: 15px; max-width: 760px;
}
@media (max-width: 640px) {
  .section-title { font-size: 22px; }
  .section-title.section-title--lead { font-size: clamp(26px, 7.5vw, 34px); }
}

h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 6px; }

/* ════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════ */
.hero { padding-top: 32px; padding-bottom: 8px; }
.hero h2 {
  margin: 0 0 6px;
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.hero-tagline { color: var(--text-muted); font-size: 16px; max-width: 700px; margin: 0 0 24px; }
.hero .section-head .hero-tagline { margin-bottom: 0; }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 880px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } }

.stat-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
  position: relative; overflow: hidden;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.stat-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.stat-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.stat-value {
  display: block;
  font-size: 30px; font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.1;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.stat-value.success { color: var(--success); }
.stat-value.warning { color: var(--warning); }
.stat-value.danger { color: var(--danger); }
.stat-value.info { color: var(--info); }
.stat-sub { font-size: 12px; color: var(--text-quiet); margin-top: 6px; min-height: 1.4em; }

/* ════════════════════════════════════════════════════════════
   CALLOUTS
   ════════════════════════════════════════════════════════════ */
.callout {
  display: flex; gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  align-items: flex-start;
}
.callout-icon {
  flex-shrink: 0; width: 28px; height: 28px;
  border-radius: var(--radius);
  display: grid; place-items: center;
  font-weight: 600; font-size: 13px;
}
.callout-body { flex: 1; min-width: 0; font-size: 14px; line-height: 1.55; }
.callout-title { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.callout-success { background: var(--success-soft); border-color: transparent; }
.callout-success .callout-icon { background: var(--success); color: white; }
.callout-warning { background: var(--warning-soft); border-color: transparent; }
.callout-warning .callout-icon { background: var(--warning); color: white; }
.callout-info { background: var(--info-soft); border-color: transparent; }
.callout-info .callout-icon { background: var(--info); color: white; }
.callout-danger { background: var(--danger-soft); border-color: transparent; }
.callout-danger .callout-icon { background: var(--danger); color: white; }

/* ════════════════════════════════════════════════════════════
   PRESETS BAR
   ════════════════════════════════════════════════════════════ */
.presets {
  display: flex; gap: 10px; overflow-x: auto;
  padding-bottom: 4px; margin-bottom: 24px;
  scrollbar-width: thin;
}
.preset-chip {
  flex-shrink: 0;
  padding: 7px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.preset-chip:hover { border-color: var(--accent); color: var(--accent); }
.preset-chip.active {
  background: var(--accent); color: white; border-color: var(--accent);
}

/* ════════════════════════════════════════════════════════════
   INPUTS PANEL
   ════════════════════════════════════════════════════════════ */
.inputs-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 32px 36px;
}
.input-group-title {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-quiet);
  margin: 0 0 20px;
}
.input-group + .input-group {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}
.input-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 36px;
  column-gap: 56px;
}
@media (max-width: 880px) {
  .input-grid { grid-template-columns: repeat(2, 1fr); column-gap: 40px; row-gap: 32px; }
}
@media (max-width: 540px) {
  .input-grid { grid-template-columns: 1fr; row-gap: 28px; }
  .inputs-card { padding: 22px 20px 28px; }
  .input-group + .input-group { margin-top: 32px; padding-top: 32px; }
}

/* ════════════════════════════════════════════════════════════
   SIMPLE / ADVANCED REVEAL
   Advanced input groups live in a wrapper that collapses in Simple mode.
   The grid-template-rows 0fr→1fr trick animates an unknown height with no JS
   measuring. Default (no html class) = collapsed, so nothing flashes before JS.
   ════════════════════════════════════════════════════════════ */
.adv-collapse {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--t-base), opacity var(--t-base);
}
.adv-collapse-inner { overflow: hidden; min-height: 0; }
/* separator above the first advanced group (mirrors .input-group + .input-group) */
.adv-collapse-inner > .input-group:first-child {
  margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--border);
}
@media (max-width: 540px) {
  .adv-collapse-inner > .input-group:first-child { margin-top: 32px; padding-top: 32px; }
}
html.mode-advanced .adv-collapse { grid-template-rows: 1fr; opacity: 1; }
/* suppress the open/close + thumb-slide animations during the initial page load */
.mode-preload .adv-collapse,
.mode-preload .mode-toggle-thumb { transition: none !important; }

/* In-context CTA card — primary nudge to go Advanced (scaled down, centered) */
.adv-reveal {
  display: flex; align-items: center; gap: 10px;
  width: fit-content;
  max-width: min(100%, 480px);
  margin: 20px auto 0;
  padding: 10px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer; text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.adv-reveal:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.adv-reveal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.adv-reveal-icon {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.adv-reveal-icon svg { width: 15px; height: 15px; fill: currentColor; }
.adv-reveal-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.adv-reveal-title { font-size: 13px; font-weight: 600; color: var(--text); }
.adv-reveal-sub { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; }
.adv-reveal-chevron { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--text-quiet); stroke-width: 2; transition: transform var(--t-fast), stroke var(--t-fast); }
.adv-reveal:hover .adv-reveal-chevron { stroke: var(--accent); transform: translateX(3px); }
html.mode-advanced .adv-reveal { display: none; }
.adv-reveal--nudge { border-color: rgba(99, 102, 241, 0.4); animation: revealNudge 3s ease-in-out infinite; }
@keyframes revealNudge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.10); }
}

/* Output sections curated out of Simple mode — kept in the DOM (display:none)
   so search engines still index them; re-rendered on switch so charts size right. */
html:not(.mode-advanced) [data-adv-section] { display: none; }
/* Drop the "Step N" eyebrows in Simple so the kept sections don't show numbering gaps */
html:not(.mode-advanced) .section-eyebrow[data-step] { display: none; }

/* Confetti burst when unlocking Advanced — full-viewport, never interactive */
.confetti-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9999;
}

@media (prefers-reduced-motion: reduce) {
  .adv-collapse,
  .mode-toggle-thumb,
  .plan-split-details,
  .plan-split-summary,
  .plan-split-summary-chevron,
  .plan-split-details::details-content,
  .plan-split-track-fd,
  .plan-split-range input[type="range"]::-webkit-slider-thumb,
  .plan-split-range input[type="range"]::-moz-range-thumb { transition: none; }
  .mode-toggle--nudge,
  .mode-toggle--nudge .mode-spark,
  .adv-reveal--nudge { animation: none; }
}

.input-field {
  display: flex; flex-direction: column; gap: 10px;
}

/* ── Plan split (Advanced): bank/FD vs stocks ── */
.adv-collapse-inner > .input-group--plan:first-child {
  border-top: none;
}
.input-group--plan + .input-group {
  margin-top: 28px;
  padding-top: 28px;
  border-top: none;
}
.plan-split-panel {
  padding: 14px 16px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
}
.plan-split-eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 12px;
}
.plan-split-eyebrow-tag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--warning);
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent);
  border-radius: var(--radius-full);
}
.plan-split-eyebrow-note {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-muted);
}
.plan-split-field { gap: 10px; max-width: 100%; margin: 0; }
.plan-split-live {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.plan-split-live strong { color: var(--text); font-weight: 600; }
.plan-split-live-part { display: inline-flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.plan-split-live-amt { color: var(--text-quiet); font-size: 12px; }
.plan-split-live-sep { color: var(--text-quiet); user-select: none; }
.plan-split-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.plan-split-slider {
  gap: 10px;
  margin: 0;
}
.plan-split-slider input[type="number"] {
  width: 56px;
  padding: 5px 8px;
  font-size: 13px;
}
.plan-split-range {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  --fd-pct: 50%;
  touch-action: none;
}
.plan-split-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--plan-fd) 18%, var(--border-strong));
  display: flex;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .plan-split-track {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 3px rgba(0, 0, 0, 0.35);
}
.plan-split-track-fd,
.plan-split-track-eq {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  transition: flex-basis var(--t-slider);
}
.plan-split-range.is-dragging .plan-split-track-fd {
  transition: none;
}
.plan-split-track-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 0 10px;
  font-family: var(--font-sans);
  font-feature-settings: "tnum" 1, "ss01" 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-split-track-name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.plan-split-track-pct {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.plan-split-track-fd {
  flex: 0 0 var(--fd-pct);
  justify-content: flex-start;
  color: var(--plan-fd);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--plan-fd-soft) 92%, var(--bg-elevated)) 0%,
    color-mix(in srgb, var(--plan-fd) 14%, var(--bg-elevated)) 100%
  );
  border-right: 2px solid var(--bg-elevated);
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--plan-fd) 22%, transparent);
}
.plan-split-track-eq {
  flex: 1 1 auto;
  justify-content: flex-end;
  color: var(--plan-eq);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--plan-eq-soft) 95%, var(--bg-elevated)) 0%,
    color-mix(in srgb, var(--plan-eq) 12%, var(--bg-elevated)) 100%
  );
}
.plan-split-track-eq .plan-split-track-meta {
  margin-left: auto;
}
.plan-split-range input[type="range"] {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 34px;
  margin: 0;
  background: transparent;
  cursor: grab;
}
.plan-split-range.is-dragging input[type="range"] { cursor: grabbing; }
.plan-split-range input[type="range"]::-webkit-slider-runnable-track {
  height: 34px;
  background: transparent;
  border: none;
}
.plan-split-range input[type="range"]::-moz-range-track {
  height: 34px;
  background: transparent;
  border: none;
}
.plan-split-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 30px;
  margin-top: -15px;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 100%),
    repeating-linear-gradient(
      90deg,
      transparent 0 2px,
      color-mix(in srgb, var(--text) 22%, transparent) 2px 3px,
      transparent 3px 5px
    );
  background-color: var(--bg-elevated);
  border: 2px solid color-mix(in srgb, var(--plan-fd) 35%, var(--border-strong));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    -3px 0 10px var(--plan-fd-glow),
    3px 0 10px var(--plan-eq-glow),
    0 3px 10px rgba(0, 0, 0, 0.18);
  transition: transform 90ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 90ms ease, border-color 90ms ease;
}
.plan-split-range input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 30px;
  border-radius: 7px;
  background-color: var(--bg-elevated);
  border: 2px solid color-mix(in srgb, var(--plan-fd) 35%, var(--border-strong));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    -3px 0 10px var(--plan-fd-glow),
    3px 0 10px var(--plan-eq-glow),
    0 3px 10px rgba(0, 0, 0, 0.18);
  transition: transform 90ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 90ms ease, border-color 90ms ease;
}
.plan-split-range input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.06);
  border-color: color-mix(in srgb, var(--plan-eq) 50%, var(--border-strong));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.6) inset,
    -4px 0 14px var(--plan-fd-glow),
    4px 0 14px var(--plan-eq-glow),
    0 4px 14px rgba(0, 0, 0, 0.22);
}
.plan-split-range input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.06);
  border-color: color-mix(in srgb, var(--plan-eq) 50%, var(--border-strong));
}
.plan-split-range.is-dragging input[type="range"]::-webkit-slider-thumb {
  transform: scale(1.08);
  border-color: var(--plan-eq);
  transition: none;
}
.plan-split-range.is-dragging input[type="range"]::-moz-range-thumb {
  transform: scale(1.08);
  border-color: var(--plan-eq);
  transition: none;
}
.plan-split-range input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.6) inset,
    0 0 0 3px var(--accent-soft),
    -3px 0 10px var(--plan-fd-glow),
    3px 0 10px var(--plan-eq-glow),
    0 3px 10px rgba(0, 0, 0, 0.18);
}
.plan-split-range input[type="range"]:focus-visible::-moz-range-thumb {
  outline: none;
  box-shadow:
    0 0 0 3px var(--accent-soft),
    -3px 0 10px var(--plan-fd-glow),
    3px 0 10px var(--plan-eq-glow),
    0 3px 10px rgba(0, 0, 0, 0.18);
}
@media (max-width: 380px) {
  .plan-split-track-name { display: none; }
  .plan-split-track-meta { padding: 0 6px; }
}
.plan-split-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 0 0 auto;
}
.plan-split-chip {
  flex-shrink: 0;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.plan-split-chip:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.plan-split-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.plan-split-details {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  interpolate-size: allow-keywords;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.plan-split-details:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}
.plan-split-details[open] {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: var(--shadow-md);
}
.plan-split-details::details-content {
  block-size: 0;
  opacity: 0;
  overflow: clip;
  content-visibility: hidden;
  transition:
    block-size 0.35s ease,
    opacity 0.2s ease,
    content-visibility 0.35s ease allow-discrete;
  transition-behavior: allow-discrete;
}
.plan-split-details[open]::details-content {
  block-size: auto;
  opacity: 1;
  content-visibility: visible;
  transition:
    block-size 0.35s ease,
    opacity 0.3s ease 0.05s,
    content-visibility 0.35s ease allow-discrete;
}
@starting-style {
  .plan-split-details[open]::details-content {
    block-size: 0;
    opacity: 0;
  }
}
@supports not (interpolate-size: allow-keywords) {
  .plan-split-details::details-content {
    block-size: unset;
    max-height: 0;
    transition:
      max-height 0.35s ease,
      opacity 0.2s ease,
      content-visibility 0.35s ease allow-discrete;
    transition-behavior: allow-discrete;
  }
  .plan-split-details[open]::details-content {
    max-height: min(80vh, 1200px);
    opacity: 1;
    transition:
      max-height 0.35s ease,
      opacity 0.3s ease 0.05s,
      content-visibility 0.35s ease allow-discrete;
  }
}
.plan-split-summary {
  list-style: none;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
  background: var(--bg-subtle);
  transition:
    background var(--t-fast),
    color var(--t-fast);
}
.plan-split-summary::-webkit-details-marker { display: none; }
.plan-split-summary-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.plan-split-summary-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.plan-split-summary-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.35;
}
.plan-split-summary-chevron {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.35s ease,
    border-color var(--t-fast),
    background var(--t-fast),
    color var(--t-fast);
}
.plan-split-summary-chevron svg {
  width: 16px;
  height: 16px;
  display: block;
}
.plan-split-details[open] .plan-split-summary-chevron {
  transform: rotate(180deg);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: var(--accent-soft);
  color: var(--accent);
}
.plan-split-summary:hover {
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--bg-subtle));
}
.plan-split-summary:hover .plan-split-summary-title { color: var(--accent-strong); }
.plan-split-summary:hover .plan-split-summary-chevron {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  color: var(--accent);
}
.plan-split-summary:active { background: var(--accent-soft); }
.plan-split-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.plan-split-details[open] .plan-split-summary {
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.plan-split-details[open] .plan-split-summary:hover {
  background: var(--bg-subtle);
}
.plan-split-example { padding: 12px 14px 14px; }
.plan-example-setup,
.plan-example-assumptions,
.plan-example-foot {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}
.plan-example-assumptions {
  padding: 10px 12px;
  background: var(--bg-subtle);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.plan-example-foot { margin-top: 20px; margin-bottom: 0; }
.plan-example-setup strong,
.plan-example-assumptions strong,
.plan-example-foot strong { color: var(--text); }
.plan-year-list {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}
.plan-year-list li + li { margin-top: 10px; }
.plan-year-list strong { color: var(--text); font-weight: 600; }

@media (max-width: 540px) {
  .plan-split-panel { padding: 12px 14px 10px; }
  .plan-split-presets { justify-content: flex-start; }
}

.input-grid-divider {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-quiet);
}

.input-label {
  font-size: 13px; font-weight: 500; color: var(--text);
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  /* Plain label area is inert so a stray click never focuses the input;
     only the interactive children below opt back in. */
  pointer-events: none;
}
.input-label .info-btn,
.input-label .toggle { pointer-events: auto; }
.input-label-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
}
.input-hint {
  font-size: 11px; color: var(--text-quiet); font-weight: 400;
}
.input-row { display: flex; align-items: center; gap: 8px; }

/* Number / text inputs */
input[type="number"], input[type="text"], select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: var(--radius);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  appearance: none;
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--accent-soft), 0 1px 3px rgba(0,0,0,0.2);
}
input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px var(--accent-soft), 0 1px 3px rgba(0,0,0,0.2);
}
.toggle input:focus-visible + .toggle-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Range slider — track uses border-strong so it stays visible on bg-subtle panels */
.slider-row { display: flex; align-items: center; gap: 16px; }
.slider-row input[type="number"] { width: 88px; flex-shrink: 0; }
/* Total savings — room for 9-digit crore amounts (e.g. 200000000) */
#totalCorpus {
  width: 12ch;
  min-width: 12ch;
}
input[type="range"] {
  flex: 1;
  -webkit-appearance: none; appearance: none;
  height: 32px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  border: 1px solid color-mix(in srgb, var(--text) 8%, var(--border-strong));
}
input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  border: 1px solid color-mix(in srgb, var(--text) 8%, var(--border-strong));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px;
  margin-top: -10px;
  background: var(--accent);
  border: 2px solid var(--bg-elevated);
  border-radius: 50%;
  cursor: grab;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.06);
  background: var(--accent-strong);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 1px 3px rgba(0, 0, 0, 0.18);
}
input[type="range"]::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.02);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 1px 3px rgba(0, 0, 0, 0.18);
}
input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px;
  background: var(--accent);
  border: 2px solid var(--bg-elevated);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.06);
  background: var(--accent-strong);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 1px 3px rgba(0, 0, 0, 0.18);
}
input[type="range"]::-moz-range-thumb:active {
  cursor: grabbing;
  transform: scale(1.02);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 1px 3px rgba(0, 0, 0, 0.18);
}
@media (max-width: 540px) {
  /* Slightly smaller thumb on phones — still easier to grab than the old 14px */
  input[type="range"] { height: 28px; }
  input[type="range"]::-webkit-slider-thumb {
    width: 20px; height: 20px;
    margin-top: -8px;
  }
  input[type="range"]::-moz-range-thumb {
    width: 20px; height: 20px;
  }
  #totalCorpus { font-size: 15px; }
}

/* Toggle switch */
.toggle {
  position: relative; display: inline-block;
  width: 38px; height: 22px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute; cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--border-strong);
  border-radius: var(--radius-full);
  transition: background var(--t-base);
}
.toggle-track::before {
  content: ""; position: absolute;
  width: 16px; height: 16px;
  left: 3px; top: 3px;
  background: white; border-radius: 50%;
  transition: transform var(--t-base);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle input:checked + .toggle-track { background: var(--accent); }
.toggle input:checked + .toggle-track::before { transform: translateX(16px); }

/* Events list */
.events-list { display: flex; flex-direction: column; gap: 6px; }
#eventsRows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.events-header, .event-row {
  display: grid;
  grid-template-columns: 46px 80px 140px 1fr 36px;
  gap: 8px;
  align-items: center;
}
.events-header {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-quiet);
  padding: 0 4px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.event-row {
  border-radius: var(--radius-md);
}
.event-row.event-row-moved {
  animation: event-row-glow 1.4s ease-out forwards;
}
@keyframes event-row-glow {
  0% {
    box-shadow:
      inset 0 0 0 2px var(--accent),
      0 0 0 1px var(--accent-soft),
      0 0 14px var(--accent-soft);
  }
  55% {
    box-shadow:
      inset 0 0 0 2px var(--accent),
      0 0 0 1px var(--accent-soft),
      0 0 10px var(--accent-soft);
  }
  100% {
    box-shadow: none;
  }
}
.event-row input { padding: 6px 10px; font-size: 13px; }
.event-row input::placeholder { color: var(--text-quiet); opacity: 1; }
.event-row input[type="number"] { font-variant-numeric: tabular-nums; }
.event-row .event-delete {
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-muted);
  display: grid; place-items: center;
  font-size: 16px; line-height: 1;
  transition: all var(--t-fast);
}
.event-row .event-delete:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.event-reorder {
  display: inline-flex;
  flex-direction: row;
  align-self: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}
.event-move {
  width: 22px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.event-move:last-child { border-right: none; }
.event-move:hover:not(:disabled) {
  color: var(--text);
  background: var(--bg-subtle);
}
.event-move:disabled {
  opacity: 0.35;
  cursor: default;
}
.events-actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.events-actions #clearEventsBtn { margin-left: auto; }
.events-actions #eventsTotalHint { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) {
  .events-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 8px;
    flex-wrap: nowrap;
  }
  .events-actions #addEventBtn {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    min-width: 0;
    white-space: nowrap;
  }
  .events-actions #clearEventsBtn {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin-left: 0;
    white-space: nowrap;
  }
  .events-actions #eventsTotalHint {
    grid-column: 1 / -1;
    grid-row: 2;
    flex: none;
  }
  .events-actions .btn {
    padding: 7px 10px;
    font-size: 12px;
  }
}
.events-empty {
  padding: 16px; text-align: center;
  color: var(--text-quiet); font-size: 13px;
  background: var(--bg-subtle); border-radius: var(--radius);
  border: 1px dashed var(--border);
}
@media (max-width: 540px) {
  .events-header, .event-row {
    grid-template-columns: 46px 52px 92px 1fr 28px;
    gap: 6px;
  }
  .events-header { font-size: 10px; }
  .event-row input { padding: 6px 7px; font-size: 12.5px; }
}

/* Segmented control */
.segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--bg-subtle);
  border-radius: var(--radius);
  gap: 2px;
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  padding: 5px 10px;
  font-size: 13px; font-weight: 500;
  border-radius: calc(var(--radius) - 3px);
  cursor: pointer;
  color: var(--text-muted);
  transition: all var(--t-fast);
  user-select: none;
}
.segmented input:checked + label {
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* ── Mode switch — radio cards that visibly swap the options beneath ── */
/* Spans the row (so nothing reflows beside it) but caps its own width so the
   two option cards stay a sensible size instead of stretching edge-to-edge. */
.input-field--full { grid-column: 1 / -1; max-width: 560px; justify-self: start; }

.mode-switch { position: relative; }
/* Real radios drive state but stay visually hidden (still focusable for a11y) */
.mode-switch > input[type="radio"] {
  position: absolute; width: 1px; height: 1px;
  margin: 0; opacity: 0; pointer-events: none;
}

.mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mode-tab {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.mode-tab:hover { border-color: var(--border-strong); background: var(--bg-subtle); }

/* Radio dot (empty) + checkmark (revealed when selected) */
.mode-tab-radio {
  flex: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--bg-elevated);
  position: relative;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.mode-tab-radio::after {
  content: "";
  position: absolute; left: 5px; top: 2px;
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--t-fast);
}
.mode-tab-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mode-tab-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.mode-tab-sub { font-size: 11px; color: var(--text-quiet); }

/* Selected card */
#taxMode-slab:checked ~ .mode-tabs label[for="taxMode-slab"],
#taxMode-flat:checked ~ .mode-tabs label[for="taxMode-flat"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}
#taxMode-slab:checked ~ .mode-tabs label[for="taxMode-slab"] .mode-tab-radio,
#taxMode-flat:checked ~ .mode-tabs label[for="taxMode-flat"] .mode-tab-radio {
  border-color: var(--accent);
  background: var(--accent);
}
#taxMode-slab:checked ~ .mode-tabs label[for="taxMode-slab"] .mode-tab-radio::after,
#taxMode-flat:checked ~ .mode-tabs label[for="taxMode-flat"] .mode-tab-radio::after {
  transform: rotate(45deg) scale(1);
}
#taxMode-slab:checked ~ .mode-tabs label[for="taxMode-slab"] .mode-tab-title,
#taxMode-flat:checked ~ .mode-tabs label[for="taxMode-flat"] .mode-tab-title {
  color: var(--accent-strong);
}
/* Keyboard focus ring follows the focused option */
#taxMode-slab:focus-visible ~ .mode-tabs label[for="taxMode-slab"],
#taxMode-flat:focus-visible ~ .mode-tabs label[for="taxMode-flat"] {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Connected panel holding whatever the selected card controls */
.mode-panel {
  margin-top: 8px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
}
.mode-pane { display: none; }
#taxMode-slab:checked ~ .mode-panel .mode-pane[data-pane="slab"],
#taxMode-flat:checked ~ .mode-panel .mode-pane[data-pane="flat"] {
  display: block;
  animation: modePaneIn var(--t-base);
}
@keyframes modePaneIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mode-note {
  margin: 0;
  font-size: 12.5px; line-height: 1.55;
  color: var(--text-muted);
}

/* Flat-rate control — compact, capped width so it never stretches edge-to-edge */
.flat-rate { display: flex; flex-direction: column; gap: 9px; }
.mode-pane-label {
  font-size: 13px; font-weight: 500; color: var(--text);
  display: inline-flex; align-items: center; gap: 4px;
}
.flat-rate-input {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 320px;
}
/* The panel sits on --bg-subtle, which equals --border in dark mode and would
   make the default track invisible — use the stronger border token instead. */
.flat-rate-input input[type="range"] { flex: 1; }
.flat-rate-value { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.flat-rate-value input[type="number"] { width: 56px; }
.flat-rate-pct { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.flat-rate + .mode-note { margin-top: 11px; }

@media (prefers-reduced-motion: reduce) {
  #taxMode-slab:checked ~ .mode-panel .mode-pane[data-pane="slab"],
  #taxMode-flat:checked ~ .mode-panel .mode-pane[data-pane="flat"] { animation: none; }
  .mode-tab-radio::after { transition: none; }
}

/* ════════════════════════════════════════════════════════════
   CARDS
   ════════════════════════════════════════════════════════════ */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.card:hover { border-color: var(--border-strong); }
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 880px) { .card-grid, .card-grid-3 { grid-template-columns: 1fr; } .card-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .card-grid-4 { grid-template-columns: 1fr; } }

/* Auto-fit grid for variable-count card groups (e.g., strategy comparison) */
.strategy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; gap: 10px;
}
.card-title { font-weight: 600; font-size: 15px; }
.card-body { color: var(--text-muted); font-size: 13.5px; line-height: 1.6; }

/* Pills */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--bg-subtle); color: var(--text-muted);
  flex-shrink: 0;
}
.pill-success { background: var(--success-soft); color: var(--success); }
.pill-warning { background: var(--warning-soft); color: var(--warning); }
.pill-danger { background: var(--danger-soft); color: var(--danger); }
.pill-info { background: var(--info-soft); color: var(--info); }
.pill-accent { background: var(--accent-soft); color: var(--accent); }

/* ════════════════════════════════════════════════════════════
   TABLE
   ════════════════════════════════════════════════════════════ */
.table-wrap {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.table-scroll {
  overflow-x: auto;
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.table-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); }

table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
th, td {
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
th:first-child, td:first-child { text-align: left; }
thead th {
  background: var(--bg-subtle);
  font-weight: 600; color: var(--text-muted);
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  position: sticky; top: 0; z-index: 1;
}
tbody tr:hover td { background: var(--bg-subtle); }
tbody tr:last-child td { border-bottom: 0; }
td.tone-warning { background: var(--warning-soft); }
td.tone-info { background: var(--info-soft); }
td.tone-success { background: var(--success-soft); }
td.tone-danger { background: var(--danger-soft); }
tbody tr.row-rebalance td { background: var(--warning-soft); font-weight: 500; }
tbody tr.row-drawdown td:nth-child(6) { color: var(--warning); font-weight: 500; }
tbody tr.row-depleted td { color: var(--text-quiet); }

/* ════════════════════════════════════════════════════════════
   CHARTS
   ════════════════════════════════════════════════════════════ */
.chart-wrap {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  position: relative;
}
.chart-svg {
  width: 100%;
  display: block;
  overflow: visible;
  user-select: none;
}
.chart-grid-line { stroke: var(--chart-grid); stroke-width: 1; stroke-dasharray: 2 3; }
.chart-axis { stroke: var(--border-strong); stroke-width: 1; }
.chart-axis-label {
  font-size: 11px; fill: var(--text-quiet);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.chart-line {
  fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round;
  transition: stroke-width var(--t-fast), opacity var(--t-fast);
  stroke-dasharray: 5000; stroke-dashoffset: 0;
  animation: drawLine 1100ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes drawLine { from { stroke-dashoffset: 5000; } to { stroke-dashoffset: 0; } }
.chart-area { opacity: 0.10; animation: fadeIn var(--t-slow) ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 0.10; } }
.chart-bar { transition: opacity var(--t-fast); transform-origin: bottom; animation: barRise 700ms cubic-bezier(0.4, 0, 0.2, 1) backwards; }
@keyframes barRise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.chart-dot { fill: var(--bg-elevated); stroke-width: 2; transition: r var(--t-fast); }
.chart-dot.hovered { r: 6; }
.chart-hover-zone { fill: transparent; }
.chart-cursor { stroke: var(--text-quiet); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity var(--t-fast); }
.chart-cursor.show { opacity: 0.5; }

.chart-legend {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.chart-tooltip {
  position: absolute;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 12px;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 12px));
  transition: opacity var(--t-fast);
  white-space: nowrap;
  z-index: 5;
  min-width: 160px;
}
.chart-tooltip.show { opacity: 1; }
.tooltip-title { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.tooltip-row { display: flex; align-items: center; gap: 6px; line-height: 1.7; color: var(--text-muted); }
.tooltip-row .legend-dot { width: 8px; height: 8px; }
.tooltip-value { color: var(--text); font-weight: 600; margin-left: auto; font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════════
   STRATEGY TABS
   ════════════════════════════════════════════════════════════ */
.tabs {
  display: flex; gap: 4px;
  background: var(--bg-subtle);
  padding: 4px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.tab-item .tab-info {
  flex-shrink: 0;
  margin-right: 4px;
}
.tab {
  padding: 7px 12px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 13px; font-weight: 500;
  border-radius: calc(var(--radius) - 4px);
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.active {
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* ════════════════════════════════════════════════════════════
   MISC
   ════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: var(--accent-soft); color: var(--accent);
  border-radius: var(--radius-full);
  font-size: 11px; font-weight: 600;
}
.badge-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.num-anim { font-variant-numeric: tabular-nums; transition: color var(--t-base); }
.pulse { animation: pulse 600ms ease-out; }
@keyframes pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.divider { height: 1px; background: var(--border); margin: 24px 0; }

.grid-2 { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 880px) { .grid-2 { grid-template-columns: 1fr; } }

.text-muted { color: var(--text-muted); }
.text-quiet { color: var(--text-quiet); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.fw-semibold { font-weight: 600; }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-subtle); padding: 1px 5px; border-radius: 4px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
.site-footer {
  margin-top: 72px;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  /* faint tint at the very top lifts the footer off the page background */
  background-image: linear-gradient(180deg, var(--bg-subtle), transparent 160px);
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.6;
}
.site-footer .container { padding-top: 40px; padding-bottom: 36px; }
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--accent); }

/* Masthead — brand lockup + quick nav */
.footer-masthead {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px 32px;
  padding-bottom: 28px;
}
.footer-brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; color: inherit; }
.footer-brand:hover { text-decoration: none; }
.footer-brand-mark {
  width: 42px; height: 42px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  border-radius: var(--radius-md);
  font-weight: 700; font-size: 23px; line-height: 1;
  box-shadow: 0 6px 18px var(--accent-soft);
}
.footer-brand-text { display: flex; flex-direction: column; gap: 2px; }
.footer-brand-title { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.footer-brand-tagline { font-size: 12.5px; font-weight: 500; color: var(--text-quiet); }

.footer-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.footer-nav a {
  color: var(--text-muted); text-decoration: none;
  font-size: 13px; font-weight: 500;
  padding: 7px 13px; border-radius: var(--radius-full);
  transition: background var(--t-fast), color var(--t-fast);
}
.footer-nav a:hover { background: var(--bg-subtle); color: var(--text); text-decoration: none; }

/* Section headings shared by footer columns */
.footer-heading {
  margin: 0 0 12px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text);
}
.footer-heading-note {
  margin-left: 8px;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.01em;
  text-transform: none; color: var(--text-quiet);
}

/* Good to know — compact highlights strip */
.footer-facts {
  margin: 0; padding: 26px 0; list-style: none;
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px 36px;
}
.footer-facts li { position: relative; padding-left: 20px; color: var(--text-muted); line-height: 1.5; }
.footer-facts li::before {
  content: ""; position: absolute; left: 2px; top: 0.5em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); opacity: 0.6;
}
.footer-facts strong { color: var(--text); font-weight: 600; }

/* Bottom bar — freshness, review, disclaimer, back-to-top */
.footer-bottom {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 20px;
  padding-top: 24px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-quiet);
}
.footer-meta { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.footer-meta span { display: inline-flex; align-items: center; gap: 5px; }
.footer-meta strong { color: var(--text-muted); font-weight: 600; }
.footer-meta time { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.footer-dot { color: var(--border-strong); }
.footer-legal { margin: 0; }
.footer-top-link {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-muted); text-decoration: none;
  font-size: 12.5px; font-weight: 600;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.footer-top-link svg { width: 14px; height: 14px; }
.footer-top-link:hover {
  color: var(--accent); border-color: var(--accent);
  background: var(--accent-soft); text-decoration: none;
}

@media (max-width: 640px) {
  .site-footer { margin-top: 48px; }
  .site-footer .container { padding-top: 36px; padding-bottom: 32px; }
  .footer-masthead { padding-bottom: 22px; }
  .footer-facts { grid-template-columns: 1fr; gap: 12px; padding: 22px 0; }
  .footer-bottom { gap: 14px; }
  .footer-top-link { margin-left: 0; }
}

/* Print */
@media print {
  .app-header, .btn, .presets, .bg-decor, .bg-hero, .result-dock,
  .footer-nav, .footer-top-link, .adv-reveal, .confetti-canvas { display: none !important; }
  /* the mode toggle is hidden with the header in print, so expand every input */
  .adv-collapse { grid-template-rows: 1fr !important; opacity: 1 !important; }
  .section { page-break-inside: avoid; padding: 12px 0; }
  .chart-wrap, .table-wrap, .card { break-inside: avoid; }
  .site-footer { background: white; break-inside: avoid; }
  html, body { background: white; }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ════════════════════════════════════════════════════════════
   NEW: LANDING / HERO INTRO / HOW IT WORKS / FAQ / INFO POPOVERS
   ════════════════════════════════════════════════════════════ */

/* Header section-nav links were removed in favour of the Simple/Advanced mode
   toggle (see .mode-toggle above). */

/* Landing intro */
.landing {
  padding: 0;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

/* ═══ Full-fold hero ═══
   First impression fills the viewport (minus the sticky header). Content is
   pushed toward the optical centre with the scroll cue pinned to the bottom via
   auto margins — when content is taller than the fold (small/narrow phones) the
   auto margins collapse to 0 so nothing is clipped or overlapped. */
.hero-fold {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  padding: 32px 0 20px;
}
.hero-fold-inner {
  width: 100%;
  margin-top: auto;
}
.scroll-cue {
  margin-top: auto;
  margin-bottom: 2px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  text-decoration: none;
  color: var(--text-quiet);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--t-base);
}
.scroll-cue:hover { color: var(--accent); }
.scroll-cue svg {
  width: 22px; height: 22px;
  animation: scroll-cue-bounce 1.9s ease-in-out infinite;
}
@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg { animation: none; }
}
/* Short viewports (landscape phones, etc.): drop the forced fold + cue so the
   intro never feels cramped and the next section stays reachable. */
@media (max-height: 640px) {
  .hero-fold { min-height: 0; }
  .scroll-cue { display: none; }
}

.landing-eyebrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 20px; }
.landing-h1 {
  font-size: clamp(34px, 6.2vw, 58px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0 0 20px;
  color: var(--text);
}
.landing-h1 .text-accent {
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent) 0%, #a855f7 55%, var(--accent-strong) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-accent {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.landing-sub {
  font-size: clamp(15px, 1.8vw, 17px);
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 680px;
  margin: 0 auto 28px;
}
.landing-sub strong { color: var(--text); }
.landing-cta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-bottom: 0;
}

/* Purpose clarifier — "what this is / what it isn't" twin cards under the hero sub. */
.purpose-clarify {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 700px;
  margin: 0 auto 28px;
  text-align: left;
}
.purpose-card {
  position: relative;
  overflow: hidden;
  padding: 16px 18px 17px;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-elevated) 68%, transparent);
  box-shadow: var(--shadow-sm);
  transition:
    background var(--t-base),
    border-color var(--t-base),
    box-shadow var(--t-base),
    transform var(--t-base);
}
.purpose-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  opacity: 0.9;
}
.purpose-card::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 55%;
  height: 80%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.55;
}
.purpose-card:hover {
  border-color: color-mix(in srgb, var(--border-strong) 70%, transparent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.purpose-card--yes:hover {
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--success-soft) 62%, transparent) 0%,
    color-mix(in srgb, var(--bg-elevated) 78%, transparent) 52%
  );
}
.purpose-card--no:hover {
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--danger-soft) 62%, transparent) 0%,
    color-mix(in srgb, var(--bg-elevated) 78%, transparent) 52%
  );
}
.purpose-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}
.purpose-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}
.purpose-tag {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.purpose-ic {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  line-height: 0;
}
.purpose-ic svg { display: block; }
.purpose-card--yes {
  border-color: color-mix(in srgb, var(--success) 20%, transparent);
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--success-soft) 55%, transparent) 0%,
    color-mix(in srgb, var(--bg-elevated) 68%, transparent) 52%
  );
}
.purpose-card--yes::before {
  background: linear-gradient(90deg, var(--success) 0%, color-mix(in srgb, var(--success) 55%, var(--accent)) 100%);
}
.purpose-card--yes::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--success) 18%, transparent) 0%, transparent 70%);
}
.purpose-card--yes .purpose-tag { color: var(--success); }
.purpose-card--yes .purpose-ic {
  color: var(--success);
  background: color-mix(in srgb, var(--success-soft) 65%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 24%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--success) 10%, transparent);
}
.purpose-card--no {
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--danger-soft) 55%, transparent) 0%,
    color-mix(in srgb, var(--bg-elevated) 68%, transparent) 52%
  );
}
.purpose-card--no::before {
  background: linear-gradient(90deg, var(--danger) 0%, color-mix(in srgb, var(--danger) 50%, var(--border-strong)) 100%);
}
.purpose-card--no::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--danger) 18%, transparent) 0%, transparent 70%);
}
.purpose-card--no .purpose-tag { color: var(--danger); }
.purpose-card--no .purpose-ic {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger-soft) 65%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--danger) 10%, transparent);
}
@media (max-width: 560px) {
  .purpose-clarify { grid-template-columns: 1fr; gap: 10px; margin-bottom: 22px; }
  .purpose-card { padding: 14px 16px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .purpose-card:hover { transform: none; }
}
.landing-bullets {
  list-style: none;
  padding: 0;
  max-width: 700px;
  margin: 18px auto 0;
  text-align: left;
  font-size: 14px;
  color: var(--text-muted);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
}
.landing-bullets li {
  padding: 8px 12px 8px 28px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  position: relative;
  line-height: 1.5;
}
.landing-bullets li::before {
  content: '✓';
  position: absolute; left: 10px; top: 8px;
  color: var(--success);
  font-weight: 700;
}
.landing-bullets strong { color: var(--text); }
@media (max-width: 640px) {
  .landing-bullets { grid-template-columns: 1fr; }
}

/* "How it works" ribbon */
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}
.how-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  position: relative;
}
.how-card h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text);
}
.how-card p { font-size: 14px; color: var(--text-muted); line-height: 1.65; margin: 0; }
.how-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-md);
}
@media (max-width: 880px) { .how-grid { grid-template-columns: 1fr; } }

/* "Who it's for" group sub-heading — splits the 3-step ribbon from the audience cards */
.how-subhead { margin-top: 40px; margin-bottom: 18px; }
.how-subhead .section-eyebrow { margin-bottom: 4px; }
.how-subhead-title {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
}
.how-subhead + .who-grid { margin-top: 0; }

/* Post-calculator guides — larger headings (how-it-works, problems, glossary, FAQ) */
#how-it-works .section-title,
#problems .section-title,
#glossary .section-title,
#faq .section-title {
  font-size: clamp(28px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
@media (max-width: 640px) {
  #how-it-works .section-title,
  #problems .section-title,
  #glossary .section-title,
  #faq .section-title {
    font-size: clamp(26px, 6vw, 30px);
  }
  .how-subhead-title { font-size: clamp(22px, 5.5vw, 26px); }
}
@media (max-width: 480px) {
  #how-it-works .section-title,
  #problems .section-title,
  #glossary .section-title,
  #faq .section-title {
    font-size: clamp(24px, 6.5vw, 28px);
  }
  .how-subhead-title { font-size: clamp(21px, 6vw, 24px); }
}
@media (max-width: 360px) {
  #how-it-works .section-title,
  #problems .section-title,
  #glossary .section-title,
  #faq .section-title {
    font-size: clamp(22px, 7vw, 26px);
  }
}

/* "Who is this for" grid */
.who-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 36px;
}
.who-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
}
.who-card h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 10px 0 6px;
  color: var(--text);
}
.who-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 1024px) { .who-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .who-grid { grid-template-columns: 1fr; } }

/* Hero h2 (live result section) */
.hero-h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.hero-h2-sub {
  display: inline-block;
  font-size: 16px; font-weight: 400;
  color: var(--text-muted);
}

/* INFO BUTTON / POPOVER */
.info-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 15px; height: 15px;
  min-width: 15px; min-height: 15px;
  margin-left: 3px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  transition: color var(--t-fast);
  box-sizing: border-box;
}
.input-label .info-btn,
.input-group-title .info-btn {
  width: 14px; height: 14px;
  min-width: 14px; min-height: 14px;
  font-size: 14px;
  margin-left: 2px;
}
.info-btn:hover { color: var(--accent); }
.info-btn:focus-visible {
  color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.info-popover-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.info-popover {
  position: fixed;
  z-index: 200;
  max-width: 320px;
  overscroll-behavior: contain;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.info-popover.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.info-popover-title {
  font-weight: 700;
  font-size: 13.5px;
  margin: 0 0 6px;
  color: var(--text);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.info-popover-close {
  background: none; border: none;
  color: var(--text-quiet); cursor: pointer; font-size: 16px;
  width: 22px; height: 22px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.info-popover-close:hover { background: var(--bg-subtle); color: var(--text); }
.info-popover-body { color: var(--text-muted); font-size: 12.5px; line-height: 1.6; }
.info-popover-body strong { color: var(--text); }
.info-popover-body code {
  background: var(--bg-subtle);
  padding: 1px 4px; border-radius: 3px;
  font-size: 11.5px; font-family: 'SF Mono', Menlo, monospace;
}

/* ════════════════════════════════════════════════════════════
   TOAST — transient confirmation (e.g. "Link Copied For Sharing")
   ════════════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 300;
  transform: translateX(-50%) translateY(12px);
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: calc(100vw - 32px);
  padding: 11px 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base);
}
.toast-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--success); }
.toast.toast-show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
@media (max-width: 640px) { .toast { bottom: 18px; font-size: 13px; } }

/* ════════════════════════════════════════════════════════════
   LIVE RESULT DOCK
   A floating pill that keeps the headline answer — how long the
   money lasts and what's left at the end — in view while you edit
   inputs, so you never have to scroll down to check the impact of
   a change. It auto-hides once the full result section scrolls
   into view, and tapping it jumps straight there. On phones it
   docks as a full-width bottom bar (safe-area aware).
   ════════════════════════════════════════════════════════════ */
.result-dock {
  --dock-accent: var(--success);
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  z-index: 90;
  transform: translateX(-50%) translateY(160%);
  width: min(540px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 9px 14px 9px 16px;
  font-family: inherit;
  text-align: left;
  color: var(--text);
  background: var(--bg-overlay);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: transform var(--t-base), opacity var(--t-base), border-color var(--t-base);
}
.result-dock.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.result-dock:hover { border-color: var(--dock-accent); }
.result-dock:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.result-dock[data-tone="success"] { --dock-accent: var(--success); }
.result-dock[data-tone="info"]    { --dock-accent: var(--info); }
.result-dock[data-tone="warning"] { --dock-accent: var(--warning); }
.result-dock[data-tone="danger"]  { --dock-accent: var(--danger); }

/* coverage badge — ✓ when the plan is covered, ! when it falls short.
   A gentle ping radiates from behind it to signal "this updates live". */
.result-dock-icon {
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: var(--radius-full);
  display: grid; place-items: center;
  background: var(--dock-accent);
  color: #fff;
  font-weight: 700; font-size: 15px; line-height: 1;
}
.result-dock-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                 /* behind the badge fill, never over the glyph */
  border-radius: inherit;
  background: var(--dock-accent);
  animation: dockPing 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes dockPing {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%, 100% { transform: scale(2.1); opacity: 0; }
}
.result-dock-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
/* Both lines fit on one row on desktop; on narrow phones they wrap to a second
   line (clamped at 2) rather than truncating, so the years/amounts stay legible. */
.result-dock-headline {
  font-size: 14px; font-weight: 700; line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--dock-accent);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.result-dock-detail {
  font-size: 12px; font-weight: 500; line-height: 1.3;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.result-dock-cta {
  display: inline-flex; align-items: center; gap: 5px;
  flex-shrink: 0; font-size: 12.5px; font-weight: 600;
  color: var(--accent);
}
.result-dock-chevron { width: 16px; height: 16px; }

@media (max-width: 560px) {
  .result-dock {
    left: 12px; right: 12px;
    width: auto;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    transform: translateY(170%);
    border-radius: var(--radius-lg);
    padding: 9px 12px;
    gap: 11px;
  }
  .result-dock.is-visible { transform: translateY(0); }
  .result-dock-cta-text { display: none; }
  .result-dock-headline { font-size: 13.5px; }
  .result-dock-detail { font-size: 11.5px; }
}
@media (max-width: 360px) {
  .result-dock { gap: 9px; padding: 8px 10px; }
  .result-dock-icon { width: 26px; height: 26px; font-size: 13px; }
  .result-dock-headline { font-size: 13px; }
  .result-dock-detail { font-size: 11px; }
}

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0;
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.faq-item[open] { border-color: var(--accent-soft-border); }
.faq-summary {
  list-style: none;
  padding: 16px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  user-select: none;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 300;
  color: var(--text-muted);
  transition: transform var(--t-base);
  flex-shrink: 0;
}
.faq-item[open] .faq-summary::after { content: '−'; }
.faq-item:hover .faq-summary { background: var(--bg-subtle); }
.faq-body {
  padding: 0 18px 18px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.7;
}
.faq-body p { margin: 0 0 10px; }
.faq-body p:last-child { margin-bottom: 0; }
.faq-body strong { color: var(--text); }
.faq-body code {
  background: var(--bg-subtle); padding: 1px 5px; border-radius: 3px;
  font-size: 12.5px; font-family: 'SF Mono', Menlo, monospace;
}

/* Definition blocks (for AEO) */
.definition-block {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.65;
}
.definition-block strong { color: var(--text); }

/* Pill variants */
.pill-accent { background: var(--accent-soft); color: var(--accent); }

/* ═══ Quick summary callout ═══ */
.quick-summary {
  max-width: 720px;
  margin: 28px auto 0;
  padding: 20px 22px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  border-radius: var(--radius-lg);
  display: flex;
  gap: 16px;
  align-items: flex-start;
  text-align: left;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text);
}
.quick-summary strong { color: var(--text); }
.quick-summary-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: var(--shadow-sm);
}

/* ═══ Byline (EEAT signal — visible author + dates) ═══ */
.byline {
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
}
.byline-meta { color: var(--text-quiet); }
.byline time { color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .byline { font-size: 12.5px; }
}

/* ═══ TL;DR band — visual break after calculator analysis (PatternCraft-style) ═══ */
.tldr-band {
  position: relative;
  margin: 32px calc(50% - 50vw) 0;
  width: 100vw;
  max-width: 100vw;
  padding: 88px 24px 72px;
  border-top: 1px solid var(--border);
  scroll-margin-top: 70px;
}
.tldr-band-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--bg-subtle);
  background-image:
    radial-gradient(ellipse 72% 55% at 50% -8%, var(--tldr-glow) 0%, transparent 68%),
    radial-gradient(ellipse 48% 40% at 88% 12%, var(--tldr-glow-2) 0%, transparent 62%),
    radial-gradient(ellipse 40% 36% at 8% 18%, var(--tldr-glow) 0%, transparent 58%),
    linear-gradient(to right, var(--tldr-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--tldr-grid) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 44px 44px, 44px 44px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 88%, transparent 100%);
}
@media (max-width: 640px) {
  .tldr-band {
    padding: 64px 16px 52px;
    scroll-margin-top: 64px;
  }
  .tldr-band-pattern { background-size: 100% 100%, 100% 100%, 100% 100%, 32px 32px, 32px 32px; }
}

/* ═══ TL;DR / Quick-answer block (AEO snippet extraction) ═══ */
#tldr {
  scroll-margin-top: 70px;
}
@media (max-width: 640px) {
  #tldr { scroll-margin-top: 64px; }
}

.tldr {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  padding: 28px 28px 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.tldr-title {
  margin: 0 0 16px;
  font-size: clamp(26px, 3.8vw, 34px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.15;
}
.tldr-lead {
  margin: 0 0 12px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
}
.tldr-note {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-muted);
}
.tldr-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.tldr-stats li {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tldr-stat-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.tldr-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
@media (max-width: 700px) {
  .tldr-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .tldr { padding: 20px 18px 18px; }
  .tldr-title { font-size: clamp(22px, 6.5vw, 26px); }
  .tldr-lead { font-size: 14.5px; }
  .tldr-stats { grid-template-columns: 1fr; }
}

/* ═══ Glossary as semantic <dl> (better AI extraction than divs) ═══ */
.glossary-dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
}
.glossary-item {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.65;
}
.glossary-item dt {
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
  font-size: 14.5px;
}
.glossary-item dd {
  margin: 0;
  color: var(--text-muted);
}
.glossary-item dd strong { color: var(--text); }
.glossary-item dd a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
@media (max-width: 880px) {
  .glossary-dl { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .glossary-dl { grid-template-columns: 1fr; }
}

/* ═══ "Show more" progressive disclosure ═══
   All list items remain in the HTML/DOM for SEO + AI answer engines. The
   collapsing below is applied at runtime by JS only (it adds .show-more-hidden
   and un-hides the button), so crawlers and no-JS visitors get the full list. */
.show-more {
  display: flex;
  justify-content: center;
  margin-top: 28px;
  transition: opacity var(--t-base);
}
.show-more--done { opacity: 0; pointer-events: none; }
.show-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.show-more-btn:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.show-more-btn:active { transform: translateY(0); }
.show-more-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.show-more-icon { width: 16px; height: 16px; transition: transform var(--t-base); }
.show-more-btn:hover .show-more-icon { transform: translateY(2px); }

/* Items kept out of view until "Show more" is pressed (class added by JS). */
.show-more-hidden { display: none !important; }

@keyframes smReveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.show-more-revealing {
  animation: smReveal .5s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: calc(min(var(--sm-i, 0), 8) * 40ms);
  will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
  .show-more, .show-more-btn, .show-more-icon { transition: none; }
  .show-more-revealing { animation: none; }
}

/* ═══ Static FD-vs-SCSS-vs-SWP comparison table (AI extractable) ═══ */
.compare-static {
  margin: 0 0 24px;
}
.compare-static-caption {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}
.compare-static-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 13.5px;
}
.compare-static-table th,
.compare-static-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.5;
}
.compare-static-table thead th {
  background: var(--bg-subtle);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.compare-static-table tbody th {
  font-weight: 500;
  color: var(--text);
  width: 200px;
}
.compare-static-table tbody tr:last-child th,
.compare-static-table tbody tr:last-child td {
  border-bottom: none;
}
.compare-static-table tbody tr:hover td,
.compare-static-table tbody tr:hover th {
  background: var(--bg-subtle);
}
.compare-static-sources {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--text-quiet);
  line-height: 1.6;
}
.compare-static-sources a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
@media (max-width: 700px) {
  .compare-static-table { min-width: 640px; }
}

/* ═══ Problems-this-solves grid ═══ */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.problem-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  position: relative;
  transition: transform var(--t-base), border-color var(--t-base);
}
.problem-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-soft-border);
}
.problem-num {
  position: absolute;
  top: 16px; right: 18px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 8px;
  border-radius: var(--radius-full);
}
.problem-card h3 {
  font-size: 16px; font-weight: 600;
  margin: 0 0 8px;
  padding-right: 40px;
  color: var(--text);
  line-height: 1.35;
}
.problem-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}
.problem-card em { font-style: italic; color: var(--text); }
@media (max-width: 880px) { .problem-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .problem-grid { grid-template-columns: 1fr; } }

/* ═══ Responsive: 320px – 480px – 640px adjustments ═══ */
@media (max-width: 880px) {
  .container { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 540px) {
  .container { padding-left: 14px; padding-right: 14px; }
  .section { padding: 36px 0; }
  /* inputs-card padding set in INPUTS PANEL block above */
  .card { padding: 14px; }
  .stat-card { padding: 14px; }
  .stat-value { font-size: clamp(20px, 6vw, 28px); }
  .landing-bullets li { padding: 8px 12px 8px 26px; font-size: 13px; }
}
@media (max-width: 480px) {
  .hero-stats { grid-template-columns: 1fr; }
  .landing-h1 { font-size: clamp(30px, 8vw, 42px); }
  .landing-sub { font-size: 14.5px; }
  .quick-summary { flex-direction: column; gap: 12px; padding: 16px 18px; font-size: 13.5px; }
  .quick-summary-icon { width: 32px; height: 32px; font-size: 15px; }
  .landing-cta { flex-direction: column; gap: 8px; }
  .landing-cta .btn { width: 100%; justify-content: center; }
  .how-card, .problem-card { padding: 16px; }
  .section-title { font-size: 22px; }
  .section-title.section-title--lead { font-size: clamp(24px, 7vw, 30px); }
  .section-subtitle { font-size: 13.5px; }
}
@media (max-width: 400px) {
  .container { padding-left: 12px; padding-right: 12px; }
  .btn { padding: 7px 12px; font-size: 13px; }
  .tab { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
  .tabs { gap: 2px; }
  .preset-chip { padding: 5px 11px; font-size: 12px; }
  /* Two-row event layout: row 1 = reorder + year + amount + delete; row 2 = description */
  .events-header { display: none; }
  .event-row {
    grid-template-columns: 46px 55px 1fr 28px;
    grid-template-areas: 'reorder year amount delete' 'desc desc desc desc';
    row-gap: 4px;
    padding: 8px 6px;
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
  }
  .event-row .event-reorder { grid-area: reorder; align-self: center; }
  .event-row .event-year { grid-area: year; }
  .event-row .event-amount { grid-area: amount; }
  .event-row .event-delete { grid-area: delete; }
  .event-row .event-label { grid-area: desc; }
  .event-row input { font-size: 12.5px; padding: 6px 8px; }
  .info-btn { width: 15px; height: 15px; font-size: 15px; }
  .info-popover { max-width: calc(100vw - 24px); }
}
@media (max-width: 360px) {
  .container { padding-left: 10px; padding-right: 10px; }
  .hero-fold { padding-top: 24px; }
  .landing-h1 { font-size: clamp(27px, 8.5vw, 34px); line-height: 1.14; }
  .section-title { font-size: 20px; }
  .section-title.section-title--lead { font-size: clamp(22px, 7.5vw, 28px); }
  .hero-tagline { font-size: 14px; }
  .input-label { font-size: 12.5px; }
  .input-hint { font-size: 11px; }
  .stat-label { font-size: 11px; }
  .stat-value { font-size: clamp(18px, 5.5vw, 24px); }
  .stat-sub { font-size: 10.5px; }
  th, td { padding: 6px 8px; font-size: 11.5px; }
}