:root {
  --growth-accent: #10B981;
  --accent: #4F46E5;
  --accent-hover: #4338CA;
  --accent-light: #EEF2FF;
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  --surface: #FFFFFF;
  --bg: #FAFAFA;
  --bg-muted: #F3F4F6;
  --success: #059669;
  --danger: #DC2626;
  --code-bg: #111827;
  --code-text: #E5E7EB;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(17,24,39,0.05);
  --shadow-md: 0 6px 16px rgba(17,24,39,0.08);
}

/* Dark palette — same variable names, so every existing rule that
   references them (the entire site, per the audit above) picks up the
   dark values automatically with zero changes elsewhere. --accent uses a
   moderately lighter indigo than the light-mode value specifically so it
   still reads clearly as a link/text color against a dark background,
   while staying dark enough that white button text (used directly, not
   through a variable, since white-on-accent is correct in both themes)
   keeps sufficient contrast against it. */
[data-theme="dark"] {
  --growth-accent: #34D399;
  --accent: #6366F1;
  --accent-hover: #818CF8;
  --accent-light: #312E5C;
  --text-primary: #F3F4F6;
  --text-secondary: #C1C7D0;
  --text-muted: #8B94A3;
  --border: #333A47;
  --border-strong: #454E5E;
  --surface: #1A1F2B;
  --bg: #12151D;
  --bg-muted: #232936;
  --success: #34D399;
  --danger: #F87171;
  --code-bg: #05070B;
  --code-text: #D7DCE3;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.5);
}

* { box-sizing: border-box; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  margin: 0;
  color: var(--text-primary);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
h1 { font-size: 24px; margin: 0 0 6px; }
a { color: var(--accent); }
.container { max-width: 800px; margin: 0 auto; padding: 20px 20px 64px; }

/* Header */
.site-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.site-header a.logo {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700; text-decoration: none; color: var(--text-primary);
  font-size: 16px; display: flex; align-items: center; gap: 2px;
}
.logo-mark { color: var(--accent); }
.site-header nav a {
  text-decoration: none; color: var(--text-secondary); margin-left: 16px;
  font-size: 14px; font-weight: 500; transition: color 0.15s ease;
}
.site-header nav a:hover { color: var(--accent); }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 34px; height: 34px; margin-right: 6px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text-secondary); cursor: pointer; padding: 0;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-light); }
.theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-moon { display: block; }

.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown summary {
  list-style: none; cursor: pointer; text-decoration: none; color: var(--text-secondary);
  font-size: 14px; font-weight: 500; padding: 6px 10px; border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary::after { content: " ▾"; font-size: 11px; }
.nav-dropdown[open] summary, .nav-dropdown summary:hover { color: var(--accent); background: var(--accent-light); }
.nav-dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 6px; display: flex; flex-direction: column; z-index: 20;
}
.nav-dropdown-menu a {
  text-decoration: none; color: var(--text-primary); font-size: 14px; font-weight: 500;
  padding: 8px 10px; border-radius: 8px; margin: 0;
}
.nav-dropdown-menu a:hover { background: var(--accent-light); color: var(--accent); }

/* Breadcrumb, lede */
.breadcrumb { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.lede { color: var(--text-secondary); font-size: 15px; margin-top: 2px; }
.freshness-note { color: var(--text-muted); font-size: 12px; margin-top: 6px; }

/* Category nav + sections */
/* Featured calculators */
.featured-section { margin: 28px 0; }
.featured-section h2 { font-size: 19px; margin-bottom: 4px; }
.featured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 16px; }
.featured-card {
  display: flex; align-items: flex-start; gap: 14px; padding: 18px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.featured-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.featured-card-icon {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
}
.featured-card-body { display: flex; flex-direction: column; gap: 3px; }
.featured-card-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.featured-card-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }

/* Category navigation — visual icon cards, not plain text chips */
.category-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 28px 0; }
.category-nav-card {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; color: var(--text-primary); background: var(--surface);
  font-size: 14px; font-weight: 500; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.category-nav-card svg { flex-shrink: 0; color: var(--accent); }
.category-nav-card:hover { border-color: var(--accent); background: var(--accent-light); transform: translateY(-1px); }
.category-nav-count {
  margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: var(--bg-muted); border-radius: 999px; padding: 2px 8px;
}
.category-section { margin: 44px 0; scroll-margin-top: 80px; }
.category-section h2 { font-size: 19px; border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 4px; }

/* Calculator cards (hub grid) */
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 20px; }
.calc-card.calc-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px; text-decoration: none; color: inherit; display: block;
  background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.calc-card.calc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.calc-card-icon {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 8px; background: var(--accent-light); color: var(--accent); margin-bottom: 10px;
}
.calc-card.calc-card h3 { font-size: 16px; margin: 0 0 6px; color: var(--text-primary); }
.calc-card.calc-card p { color: var(--text-secondary); font-size: 14px; margin: 0; }

/* The interactive calculator widget itself */
.calc-card {
  position: relative;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px; margin: 14px 0; background: var(--surface); box-shadow: var(--shadow-sm);
}
.card-top-actions { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; gap: 6px; }
.card-top-actions + .calc-inputs { padding-top: 36px; }
.icon-action-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  color: var(--text-muted); cursor: pointer; padding: 0; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.icon-action-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-light); }
.copy-link-status {
  position: absolute; top: 100%; right: 0; margin-top: 4px;
  font-size: 12px; font-weight: 600; color: var(--success); background: var(--surface);
  padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  opacity: 0; transition: opacity 0.2s ease; pointer-events: none; white-space: nowrap;
}
.copy-link-status.visible { opacity: 1; }
.swap-fields-btn {
  display: flex; align-items: center; justify-content: center; margin: -4px auto 10px;
  width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--text-muted); cursor: pointer; padding: 0;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.swap-fields-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-light); }
.swap-fields-btn:active { transform: rotate(180deg); }
.field { margin-bottom: 10px; }
.field label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 5px; font-weight: 500; }
.field input, .field select {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 16px; font-family: inherit; color: var(--text-primary); background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:hover, .field select:hover { border-color: var(--border-strong); }
.field input:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light);
}
.range-field { display: flex; align-items: center; gap: 14px; }
.range-field input[type="range"] {
  flex: 1; width: auto; -webkit-appearance: none; appearance: none;
  height: 36px; background: transparent; border: none; padding: 0; margin: 0;
  -webkit-tap-highlight-color: transparent;
}
.range-field input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--border); }
.range-field input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--border); }
.range-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: 3px solid var(--surface); box-shadow: var(--shadow-sm);
  margin-top: -11px;
}
.range-field input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface);
  cursor: pointer; box-shadow: var(--shadow-sm);
}
.range-value { font-weight: 600; min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; color: var(--accent); }
#calc-btn {
  margin-top: 2px; padding: 11px 24px; min-height: 44px; border-radius: var(--radius); border: none;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease; -webkit-tap-highlight-color: transparent;
}
#calc-btn:hover { background: var(--accent-hover); }
#calc-btn:active { transform: scale(0.98); }

/* Results */
.calc-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 10px; margin-top: 14px; }
.calc-results .stat { background: var(--bg-muted); border-radius: var(--radius); padding: 10px; }
.calc-results .stat .label { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.calc-results .stat .value { font-size: 17px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.calc-explanation { margin-top: 12px; padding: 10px 14px; background: var(--accent-light); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; font-size: 14px; color: var(--text-primary); line-height: 1.6; }
.calc-explanation:empty { display: none; padding: 0; border: none; }
.calc-explanation .related-link { display: block; margin-top: 8px; font-weight: 600; color: var(--accent); text-decoration: none; }
.calc-explanation .related-link:hover { color: var(--accent-hover); text-decoration: underline; }
.calc-explanation .related-link::before { content: "→ "; }

.pi-bar { margin-top: 16px; }
.growth-chart { margin-top: 20px; }
.growth-chart:empty { display: none; margin: 0; }
.growth-chart-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0 0 8px; }
.growth-chart svg { display: block; width: 100%; height: auto; }
.pi-bar-track { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--border); }
.pi-bar-segment { height: 100%; transition: width 0.3s ease; }
.pi-bar-segment.principal { background: var(--accent); }
.pi-bar-segment.interest { background: var(--growth-accent); }
.pi-bar-legend { display: flex; gap: 20px; margin-top: 8px; font-size: 13px; flex-wrap: wrap; }
.pi-bar-legend-item { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.pi-bar-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pi-bar-dot.principal { background: var(--accent); }
.pi-bar-dot.interest { background: var(--growth-accent); }
.pi-bar-legend-item strong { color: var(--text-primary); }

.feedback-widget { margin-top: 12px; }
.feedback-toggle { background: none; border: none; padding: 0; font-size: 13px; color: var(--text-muted); text-decoration: underline; cursor: pointer; }
.feedback-toggle:hover { color: var(--text-secondary); }
.feedback-form { margin-top: 10px; padding: 12px; background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--radius); }
.feedback-form textarea { width: 100%; min-height: 70px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; resize: vertical; box-sizing: border-box; }
.feedback-form-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.feedback-submit { padding: 8px 16px; border: none; border-radius: 8px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.feedback-submit:hover { background: var(--accent-hover); }
.feedback-submit:disabled { opacity: 0.6; cursor: default; }
.feedback-status { font-size: 13px; color: var(--text-secondary); }

/* ---- Embed page: fits one screen without scrolling on desktop and mobile
   for the vast majority of calculators (2-4 fields — every Post Office
   calculator, most of the site). A handful of field-heavy calculators (EV
   vs Petrol's 10 fields, Retirement Corpus/Education Loan's 7) may still
   need a small internal scroll on a short phone screen — the back-link
   stays pinned and visible either way, only the calculator's own content
   area scrolls, never the whole page. 100dvh (dynamic viewport height) is
   used over 100vh specifically because mobile browser chrome (address bar)
   makes 100vh unreliable for "fits on screen" — dvh accounts for it;
   100vh is kept as a fallback for browsers that don't support dvh yet. ---- */
body.embed-page { margin: 0; padding: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.embed-container { display: flex; flex-direction: column; height: 100%; padding: 10px 14px; box-sizing: border-box; }
.embed-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.embed-title { font-size: 17px; margin: 0 0 8px; color: var(--text-primary); }
.embed-watermark {
  flex-shrink: 0; text-align: center; font-size: 11px; padding: 4px;
  background: #FEF3C7; color: #92400E; border-radius: 6px; margin-bottom: 6px;
}
.embed-watermark a { color: #92400E; font-weight: 600; text-decoration: underline; }
.embed-back-link {
  flex-shrink: 0; display: block; text-align: center; margin-top: 8px; padding: 8px;
  border: 1px solid var(--border); border-radius: var(--radius); color: var(--accent);
  font-size: 12px; font-weight: 600; text-decoration: none;
}
.embed-back-link:hover { background: var(--accent-light); }

/* Compact spacing throughout the widget, scoped to embed pages only —
   never affects the full site. Input font-size stays at 16px (not reduced)
   since anything smaller triggers iOS Safari's auto-zoom-on-focus, which
   would be a worse problem than a few extra pixels of height. */
.embed-page .calc-card { padding: 12px; margin: 0; box-shadow: none; }
.embed-page .field { margin-bottom: 8px; }
.embed-page .field label { margin-bottom: 3px; font-size: 12px; }
.embed-page .field input, .embed-page .field select { padding: 7px 10px; }
.embed-page #calc-btn { padding: 10px 20px; min-height: 38px; margin-top: 2px; font-size: 14px; }
.embed-page .calc-results { margin-top: 10px; gap: 8px; }
.embed-page .calc-results .stat { padding: 8px 10px; }
.embed-page .calc-results .stat .label { font-size: 11px; margin-bottom: 2px; }
.embed-page .calc-results .stat .value { font-size: 16px; }
.embed-page .pi-bar { margin-top: 8px; }
.embed-page .pi-bar-legend { margin-top: 6px; font-size: 12px; gap: 12px; }
.embed-page .calc-explanation { margin-top: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.4; }

/* Explainer, FAQ */
.explainer { margin: 32px 0; color: var(--text-primary); }
.explainer h2 { font-size: 18px; margin: 24px 0 8px; }
.explainer h3 { font-size: 15px; margin: 16px 0 6px; color: var(--text-primary); }
.explainer p { color: var(--text-secondary); }
.explainer code { background: var(--bg-muted); padding: 2px 6px; border-radius: 4px; font-size: 13px; font-family: 'SFMono-Regular', Consolas, monospace; color: var(--text-primary); }
.explainer pre { background: var(--code-bg); color: var(--code-text); padding: 14px 16px; border-radius: var(--radius); overflow-x: auto; font-size: 13px; line-height: 1.6; }
.explainer pre code { background: none; padding: 0; color: inherit; }
.embed-slug-list { list-style: none; padding: 0; margin: 0 0 8px; columns: 2; column-gap: 24px; }
.embed-slug-list li { color: var(--text-secondary); font-size: 13px; padding: 3px 0; break-inside: avoid; }
.faq { margin: 32px 0; }
.faq h2 { font-size: 18px; margin-bottom: 4px; }
.faq-item { border-top: 1px solid var(--border); padding: 16px 0; }
.faq-q { font-weight: 600; margin: 0 0 6px; font-size: 15px; }
.faq-a { color: var(--text-secondary); margin: 0; font-size: 14px; }

/* Scenarios, related, next-steps, chips */
.scenarios { margin: 28px 0; }
.scenarios h2 { font-size: 18px; }
.scenario-list { padding-left: 0; margin: 12px 0 0; list-style: none; }
.scenario-list li { margin-bottom: 8px; }
.scenario-list a { text-decoration: none; font-size: 14px; }
.scenario-list a:hover { text-decoration: underline; }
.next-steps { margin: 24px 0; padding: 18px; background: var(--accent-light); border-radius: var(--radius-lg); }
.next-steps h2 { font-size: 15px; margin: 0 0 12px; color: var(--text-primary); }
.answer-summary { background: var(--accent-light); border-radius: var(--radius-lg); padding: 16px 18px; font-size: 15px; color: var(--text-primary); }
.related { margin: 32px 0; }
.related h2 { font-size: 16px; margin-bottom: 10px; }
.chip {
  display: inline-block; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 7px 14px; margin: 0 6px 6px 0; text-decoration: none; color: var(--text-primary);
  font-size: 13px; font-weight: 500; background: var(--surface); transition: all 0.15s ease;
}
.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }

/* Activity sections */
.activity-sections { margin: 32px 0 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.activity-block { background: var(--bg-muted); border-radius: var(--radius-lg); padding: 16px 18px; }
.activity-block h2 { font-size: 15px; margin: 0 0 10px; }
.activity-block ul { padding-left: 18px; margin: 0; font-size: 13px; color: var(--text-secondary); }
.activity-block li { margin-bottom: 5px; }
.activity-block a { color: var(--text-primary); text-decoration: none; }
.activity-block a:hover { color: var(--accent); }
.activity-block .empty { font-size: 13px; color: var(--text-muted); }
.activity-note { font-size: 11px; color: var(--text-muted); margin-top: 8px; }
@media (max-width: 600px) { .activity-sections { grid-template-columns: 1fr; } .calc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .calc-grid { grid-template-columns: 1fr; } }

a, button, .chip, .category-nav a, .calc-card.calc-card { -webkit-tap-highlight-color: transparent; }

@media (max-width: 480px) {
  .container { padding: 14px 14px 48px; }
  h1 { font-size: 20px; margin: 0 0 4px; }
  .breadcrumb { margin-bottom: 6px; }
  .lede { font-size: 14px; margin-top: 0; }
  .freshness-note { display: none; }
  .calc-card { padding: 16px; margin: 12px 0; }
  .site-header { padding: 12px 14px; }
  .site-header a.logo { font-size: 15px; }
  .site-header nav a { margin-left: 12px; font-size: 13px; }
  .category-section h2 { font-size: 17px; }
  .calc-results { grid-template-columns: repeat(auto-fit, minmax(110px,1fr)); gap: 8px; }
  .calc-results .stat { padding: 10px; }
  .calc-results .stat .value { font-size: 17px; }
  .next-steps, .answer-summary, .activity-block { padding: 14px; }
  #calc-btn { width: 100%; }
}

/* Footer */
.site-footer { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 13px; border-top: 1px solid var(--border); margin-top: 24px; }
.disclaimer { max-width: 560px; margin: 0 auto 16px; line-height: 1.6; color: var(--text-secondary); }
.footer-links { margin: 12px 0 6px; }
.footer-links a { color: var(--text-secondary); text-decoration: none; }
.footer-links a:hover { color: var(--accent); }
.footer-sep { margin: 0 8px; color: var(--border-strong); }
.footer-contact-note { max-width: 480px; margin: 0 auto; font-size: 12px; color: var(--text-muted); }
.footer-contact-note a { color: var(--text-muted); }