.mobile-breadcrumbs,
.mobile-hero-summary {
  display: none;
}

:root {
  --bg: #06111f;
  --bg-soft: #0a192a;
  --panel: #0d1d30;
  --panel-2: #11243a;
  --line: rgba(255,255,255,.11);
  --text: #f3f7fb;
  --muted: #9fb0c3;
  --accent: #7ee7b7;
  --accent-2: #72b8ff;
  --warning: #ffd280;
  --danger: #ff9f9f;
  --shadow: 0 24px 70px rgba(0,0,0,.28);
  --radius: 20px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 82% 4%, rgba(71,132,196,.14), transparent 27rem),
    radial-gradient(circle at 12% 18%, rgba(71,196,147,.08), transparent 25rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.site-header {
  width: min(1440px, calc(100% - 40px));
  margin: 0 auto;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand-logo {
  display: block;
  width: 228px;
  height: auto;
  max-width: 228px;
  object-fit: contain;
}
.site-header nav { display: flex; gap: 28px; }
.site-header nav a { text-decoration: none; color: var(--muted); font-size: .92rem; }
.site-header nav a:hover { color: var(--text); }
main { width: min(1440px, calc(100% - 40px)); margin: 0 auto; }

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 20px;
  color: #7f92a7;
  font-size: .72rem;
}
.breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
}
.breadcrumbs a:hover { color: var(--text); }

.usage-proof strong { color: var(--text); }
.usage-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(126,231,183,.08);
}

.seo-guide {
  padding: 100px 0 42px;
}
.seo-intro {
  max-width: 880px;
  margin-bottom: 34px;
}
.seo-intro h2,
.search-questions > h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.045em;
}
.seo-intro > p:last-child {
  color: var(--muted);
  font-size: 1rem;
}
.answer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.answer-grid article {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.02);
}
.answer-grid h3 {
  font-size: 1.08rem;
  margin-bottom: 9px;
}
.answer-grid p {
  color: var(--muted);
  font-size: .82rem;
}
.answer-grid a {
  margin-top: auto;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 750;
  text-decoration: none;
}
.answer-grid a:hover { text-decoration: underline; }

.search-questions {
  max-width: 1000px;
  padding: 58px 0 70px;
}
.search-questions > h2 { margin-bottom: 24px; }
.search-questions details {
  border-top: 1px solid var(--line);
}
.search-questions details:last-child {
  border-bottom: 1px solid var(--line);
}
.search-questions summary {
  font-size: 1rem;
  padding: 20px 34px 20px 0;
}
.search-questions details p {
  max-width: 850px;
  color: var(--muted);
  font-size: .88rem;
  padding-bottom: 18px;
  margin-bottom: 0;
}

.hero {
  padding: 76px 0 54px;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(500px, 1fr);
  gap: 50px;
  align-items: center;
}
.hero-copy {
  position: relative;
  z-index: 2;
}
.hero-visual {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 30px 80px rgba(0,0,0,.38);
  background: var(--panel);
}
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,17,31,.42), transparent 28%),
    linear-gradient(0deg, rgba(6,17,31,.30), transparent 42%);
}
.hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 810 / 390;
  object-fit: cover;
}
.eyebrow, .step {
  color: var(--accent);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  letter-spacing: -.055em;
  line-height: .96;
  margin-bottom: 25px;
  max-width: 760px;
}
.lede { color: #c4d1de; font-size: clamp(1.05rem, 2vw, 1.35rem); max-width: 800px; }
.hero-notice {
  margin-top: 30px;
  padding: 16px 18px;
  border: 1px solid rgba(126,231,183,.26);
  background: rgba(126,231,183,.06);
  border-radius: 12px;
  color: var(--muted);
  font-size: .9rem;
}
.hero-notice strong { color: var(--text); }

.input-guide {
  display: grid;
  grid-template-columns: .6fr 1.4fr;
  gap: 40px;
  padding: 28px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(10,25,42,.68);
}
.input-guide h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.04em; }
.input-guide > div:first-child > p:last-child { color: var(--muted); }
.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.guide-grid article { padding: 14px 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.02); }
.guide-grid strong { font-size: .82rem; }
.guide-grid p { color: var(--muted); font-size: .72rem; line-height: 1.45; margin: 5px 0 0; }

.route-comparison {
  padding: 22px;
  margin-bottom: 16px;
  border: 1px solid rgba(126,231,183,.25);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(126,231,183,.08), rgba(114,184,255,.04));
}
.route-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.route-heading h3 { margin-bottom: 14px; }
.comparison-badge { color: var(--accent); border: 1px solid rgba(126,231,183,.3); border-radius: 999px; padding: 6px 10px; font-size: .68rem; white-space: nowrap; }
.route-columns { display: grid; grid-template-columns: 1fr 52px 1fr; gap: 14px; align-items: stretch; }
.route-option { padding: 17px; border-radius: 12px; background: rgba(0,0,0,.14); border: 1px solid rgba(255,255,255,.07); }
.route-option strong { display: block; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.05em; margin: 7px 0; }
.route-option p { color: var(--muted); font-size: .76rem; margin: 0; }
.route-kicker { color: var(--muted); font-size: .65rem; letter-spacing: .12em; font-weight: 800; }
.route-versus { display: grid; place-items: center; color: var(--muted); font-size: .72rem; font-weight: 800; }
.route-difference { color: var(--text); font-weight: 700; margin: 16px 0 0; text-align: center; }

.calculator-shell {
  display: grid;
  grid-template-columns: minmax(360px, .8fr) minmax(0, 1.4fr);
  gap: 22px;
  align-items: start;
}
.inputs-panel, .results-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(10,25,42,.84);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.inputs-panel { padding: 24px; position: static; }
.results-panel { padding: 28px; }
.panel-heading, .results-heading, .chart-title {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
}
.panel-heading h2, .results-heading h2 { margin: 0; letter-spacing: -.03em; line-height: 1.1; }
.results-heading h2 { max-width: 680px; font-size: clamp(1.55rem, 3vw, 2.3rem); }
.text-button {
  border: 0; background: transparent; color: var(--muted); padding: 4px; white-space: nowrap;
}
.text-button:hover { color: var(--text); }
.preset-row { display: flex; gap: 7px; margin: 24px 0 12px; }
.preset {
  flex: 1; border: 1px solid var(--line); color: var(--muted); background: transparent;
  border-radius: 999px; padding: 9px 10px; font-size: .78rem;
}
.preset.active, .preset:hover { color: var(--bg); border-color: var(--accent); background: var(--accent); }
details { border-top: 1px solid var(--line); }
details summary {
  list-style: none; padding: 19px 0; font-weight: 750; cursor: pointer; position: relative;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; position: absolute; right: 2px; color: var(--muted); font-size: 1.2rem; }
details[open] summary::after { content: "–"; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; padding-bottom: 22px; }
.field { display: block; min-width: 0; }
.field > span:first-child { display: block; color: var(--muted); font-size: .78rem; margin: 0 0 6px 2px; }
.field > span:first-child small {
  display: block;
  color: #71859a;
  font-size: .67rem;
  line-height: 1.35;
  margin-top: 2px;
  font-weight: 400;
}
.span-2 { grid-column: 1 / -1; }
.input-wrap {
  display: flex; align-items: center; border: 1px solid var(--line); background: rgba(255,255,255,.025);
  border-radius: 10px; overflow: hidden;
}
.input-wrap:focus-within { border-color: rgba(126,231,183,.65); box-shadow: 0 0 0 3px rgba(126,231,183,.08); }
.input-wrap input {
  width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent;
  padding: 11px 10px;
}
.input-wrap i { color: #8194a9; font-style: normal; font-size: .7rem; white-space: nowrap; padding-right: 10px; }
.switch-field {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px;
}
.switch-field span { display: flex; flex-direction: column; }
.switch-field small { color: var(--muted); font-size: .72rem; }
.switch {
  appearance: none; width: 44px; height: 24px; border-radius: 99px; background: #3d4b5b; position: relative; flex: 0 0 auto;
}
.switch::after {
  content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  background: white; border-radius: 50%; transition: transform .2s ease;
}
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(20px); }
.outline-button {
  color: var(--text); border: 1px solid var(--line); background: transparent; border-radius: 999px;
  padding: 9px 15px; white-space: nowrap;
}
.outline-button:hover { border-color: var(--accent); color: var(--accent); }

.result-actions {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
}
.primary-button {
  color: var(--bg);
  border: 1px solid var(--accent);
  background: var(--accent);
  border-radius: 999px;
  padding: 9px 15px;
  white-space: nowrap;
  font-weight: 750;
}
.primary-button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.octopus-referral {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 24px;
  align-items: center;
  margin-bottom: 16px;
  padding: 24px;
  border: 1px solid rgba(216, 77, 255, .32);
  border-radius: 15px;
  background:
    radial-gradient(circle at 92% 12%, rgba(216,77,255,.14), transparent 18rem),
    linear-gradient(145deg, rgba(45,11,84,.42), rgba(17,36,58,.76));
}
.octopus-copy h3 {
  margin-bottom: 8px;
}
.octopus-copy > p:not(.step) {
  color: var(--muted);
  margin-bottom: 10px;
}
.referral-disclosure {
  font-size: .73rem;
  line-height: 1.45;
  color: #8597aa !important;
  margin-bottom: 0 !important;
}
.octopus-action {
  padding: 16px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(0,0,0,.16);
}
.octopus-label {
  display: block;
  margin-bottom: 10px;
  color: #d9c8ec;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .12em;
}
.octopus-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  background: linear-gradient(90deg, #e447f2, #bc4dff);
  color: #120321;
  text-decoration: none;
  font-weight: 850;
}
.octopus-button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.recommended-next-steps {
  margin-top: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.02);
}
.next-steps-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.next-steps-heading h3 {
  margin-bottom: 0;
}
.next-steps-heading > p {
  max-width: 360px;
  color: var(--muted);
  font-size: .76rem;
  text-align: right;
  margin-bottom: 0;
}
.next-step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.next-step-grid article {
  padding: 15px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  background: rgba(0,0,0,.12);
}
.next-step-grid article > span {
  color: var(--accent);
  font-size: .68rem;
  font-weight: 850;
}
.next-step-grid h4 {
  margin: 9px 0 6px;
}
.next-step-grid p {
  color: var(--muted);
  font-size: .74rem;
  margin-bottom: 0;
}


.hero-trust {
  display: grid;
  gap: 7px;
  margin: 22px 0 0;
  color: #c8d5e2;
  font-size: .82rem;
}
.hero-trust span::first-letter { color: var(--accent); }
.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: 230px;
  margin-top: 20px;
  padding: 13px 17px;
  border-radius: 11px;
  background: var(--accent);
  color: var(--bg);
  text-decoration: none;
  font-weight: 850;
}
.hero-cta:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.hero-visual img {
  object-position: center center;
}

.support-considered {
  margin-bottom: 16px;
  padding: 24px;
  border: 1px solid rgba(126,231,183,.22);
  border-radius: 15px;
  background:
    radial-gradient(circle at 85% 0%, rgba(126,231,183,.09), transparent 22rem),
    rgba(255,255,255,.02);
}
.support-intro {
  max-width: 820px;
  margin-bottom: 18px;
}
.support-intro h3 {
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  margin-bottom: 8px;
}
.support-intro > p:last-child {
  color: var(--muted);
  margin-bottom: 0;
}
.support-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 11px;
}
.support-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, filter .18s ease;
}
.support-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.24);
  filter: brightness(1.04);
}
.support-card > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.support-card strong { font-size: .88rem; }
.support-card small {
  color: rgba(255,255,255,.72);
  font-size: .69rem;
  margin-top: 3px;
}
.support-card i {
  color: rgba(255,255,255,.75);
  font-style: normal;
}
.support-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(0,0,0,.16);
  font-size: 1.2rem;
}
.support-kofi { background: linear-gradient(135deg, rgba(231,65,87,.85), rgba(190,42,75,.82)); }
.support-octopus { background: linear-gradient(135deg, rgba(143,56,216,.80), rgba(89,46,170,.80)); }
.support-youtube { background: linear-gradient(135deg, rgba(211,31,31,.82), rgba(128,15,15,.82)); }
.support-member { background: linear-gradient(135deg, rgba(28,105,177,.82), rgba(18,61,118,.82)); }
.support-disclosure {
  color: #8194a9;
  font-size: .69rem;
  margin: 14px 0 0;
}
.support-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  margin: 70px 0 0;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(126,231,183,.07), rgba(114,184,255,.04));
}
.support-strip h2 {
  margin-bottom: 0;
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  letter-spacing: -.04em;
}
.support-strip-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.link-button {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.support-card.is-unconfigured,
.link-button.is-unconfigured {
  opacity: .48;
  cursor: not-allowed;
}


.tool-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  color: #8093a8;
  font-size: .7rem;
}
.tool-meta span,
.tool-meta a {
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
}
.tool-meta a {
  color: var(--accent);
  text-decoration: none;
}
.input-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.saved-scenarios {
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px solid rgba(114,184,255,.2);
  border-radius: var(--radius);
  background: rgba(10,25,42,.76);
  box-shadow: var(--shadow);
}
.saved-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}
.saved-heading h2 { margin-bottom: 0; }
.saved-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.saved-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
}
.saved-card-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.saved-card h3 {
  font-size: .92rem;
  margin-bottom: 3px;
}
.saved-card small { color: var(--muted); }
.saved-card dl { margin: 14px 0; }
.saved-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.saved-card dt { color: var(--muted); font-size: .68rem; }
.saved-card dd { margin: 0; font-size: .72rem; font-weight: 750; }
.saved-card-actions {
  display: flex;
  gap: 8px;
}
.saved-card-actions button {
  flex: 1;
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--text);
  background: transparent;
  font-size: .68rem;
}
.saved-card-actions button:hover { border-color: var(--accent); color: var(--accent); }
.saved-note {
  color: #71859a;
  font-size: .68rem;
  margin: 13px 0 0;
}
.influence-card {
  margin-top: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.02);
}
.influence-heading {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: flex-end;
}
.influence-heading h3 { margin-bottom: 0; }
.influence-heading > p {
  max-width: 390px;
  color: var(--muted);
  font-size: .75rem;
  text-align: right;
  margin-bottom: 0;
}
.influence-list {
  display: grid;
  gap: 11px;
  margin-top: 19px;
}
.influence-row {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) 1.3fr 90px;
  gap: 12px;
  align-items: center;
}
.influence-label { font-size: .77rem; }
.influence-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
}
.influence-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
.influence-impact {
  text-align: right;
  color: var(--muted);
  font-size: .7rem;
}
.version-history {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: 40px;
  padding: 88px 0 28px;
}
.version-history h2 {
  font-size: clamp(2rem,4vw,3.2rem);
  letter-spacing: -.045em;
}
.version-history > div:first-child > p:last-child { color: var(--muted); }
.version-list { border-top: 1px solid var(--line); }
.version-list article {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 18px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.version-list article > span {
  color: var(--accent);
  font-weight: 850;
}
.version-list strong { font-size: .9rem; }
.version-list p {
  color: var(--muted);
  font-size: .76rem;
  margin: 4px 0 0;
}


.preset-section {
  margin: 22px 0 12px;
}
.preset-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 13px;
}
.preset-heading h3 { margin-bottom: 0; font-size: 1rem; }
.preset-heading > p {
  max-width: 330px;
  color: var(--muted);
  font-size: .68rem;
  text-align: right;
  margin-bottom: 0;
}
.preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.preset-card {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,.02);
  color: var(--text);
  padding: 11px;
}
.preset-card:hover,
.preset-card.active {
  border-color: rgba(126,231,183,.45);
  background: rgba(126,231,183,.055);
}
.preset-card > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.preset-card strong { font-size: .75rem; }
.preset-card small {
  color: var(--muted);
  font-size: .62rem;
  line-height: 1.35;
  margin-top: 2px;
}
.preset-card i {
  grid-column: 2;
  color: var(--accent);
  font-size: .6rem;
  font-style: normal;
}
.preset-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px;
  color: var(--accent);
  background: rgba(0,0,0,.13);
  font-size: .68rem;
  font-weight: 850;
}
.preset-source-note {
  color: #788ca1;
  font-size: .65rem;
  line-height: 1.45;
  margin: 11px 2px 0;
}
.preset-source-note strong { color: #a8b7c6; }

.preset-dialog {
  width: min(720px, calc(100% - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  border: 1px solid rgba(126,231,183,.25);
  border-radius: 18px;
  background: #0a192a;
  color: var(--text);
  padding: 0;
  box-shadow: 0 35px 100px rgba(0,0,0,.58);
}
.preset-dialog::backdrop {
  background: rgba(2,8,15,.76);
  backdrop-filter: blur(5px);
}
.preset-dialog form { padding: 24px; }
.dialog-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}
.dialog-heading h2 { margin-bottom: 0; }
.dialog-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 1.2rem;
}
.dialog-intro {
  color: var(--muted);
  margin: 18px 0;
}
.preset-change-list {
  display: grid;
  gap: 9px;
}
.preset-change {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,.02);
}
.preset-change strong {
  display: block;
  font-size: .78rem;
}
.preset-change p {
  color: var(--muted);
  font-size: .68rem;
  margin: 4px 0 0;
}
.change-values {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-size: .72rem;
}
.change-values del { color: #8194a9; }
.change-values ins {
  color: var(--accent);
  text-decoration: none;
  font-weight: 800;
}
.preset-evidence {
  margin-top: 14px;
  padding: 14px;
  border-radius: 11px;
  background: rgba(114,184,255,.06);
  border: 1px solid rgba(114,184,255,.17);
  color: var(--muted);
  font-size: .7rem;
}
.preset-evidence strong { color: var(--text); }
.preset-evidence a { color: var(--accent); }
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 18px;
}
.official-sources {
  margin-bottom: 26px;
  padding: 22px;
  border: 1px solid rgba(114,184,255,.20);
  border-radius: 15px;
  background: rgba(114,184,255,.045);
}
.official-sources h3 { margin-bottom: 9px; }
.official-sources > p:not(.step) {
  color: var(--muted);
  font-size: .82rem;
}
.source-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.source-links a {
  color: var(--accent);
  font-size: .72rem;
  text-decoration: none;
}
.source-links a:hover { text-decoration: underline; }


.route-assumption {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #8295a9;
  font-size: .7rem;
  text-align: center;
}
.assumption-clarifier {
  margin-bottom: 16px;
  padding: 21px;
  border: 1px solid rgba(255,210,128,.22);
  border-radius: 15px;
  background: rgba(255,210,128,.045);
}
.assumption-clarifier h3 { margin-bottom: 8px; }
.assumption-clarifier p:last-child {
  color: var(--muted);
  font-size: .86rem;
  margin-bottom: 0;
}
.value-source-card {
  margin-top: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.02);
}
.value-source-heading {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: flex-end;
}
.value-source-heading h3 { margin-bottom: 0; }
.value-source-heading > p {
  max-width: 420px;
  color: var(--muted);
  font-size: .75rem;
  text-align: right;
  margin-bottom: 0;
}
.value-bars {
  display: grid;
  gap: 11px;
  margin-top: 20px;
}
.value-bar-row {
  display: grid;
  grid-template-columns: minmax(180px,.8fr) 1.2fr 90px;
  gap: 12px;
  align-items: center;
}
.value-bar-label { color: var(--muted); font-size: .75rem; }
.value-bar-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
}
.value-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,var(--accent-2),var(--accent));
}
.value-bar-amount {
  text-align: right;
  font-size: .74rem;
  font-weight: 750;
}
.component-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}
.component-summary article {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(0,0,0,.12);
}
.component-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(126,231,183,.08);
  color: var(--accent);
}
.component-summary small {
  display: block;
  color: var(--muted);
  font-size: .67rem;
}
.component-summary strong {
  display: block;
  margin-top: 3px;
  font-size: 1.45rem;
}
.component-summary p {
  color: var(--muted);
  font-size: .69rem;
  margin: 5px 0 0;
}
.component-note {
  margin: 14px 0 0;
  color: #9fb0c3;
  font-size: .74rem;
  font-weight: 650;
  text-align: center;
}

.scorecards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 28px 0 16px;
}
.scorecard {
  min-height: 138px; padding: 17px; border: 1px solid var(--line); border-radius: 15px;
  background: rgba(255,255,255,.025); display: flex; flex-direction: column;
}
.scorecard.primary { background: linear-gradient(145deg, rgba(126,231,183,.15), rgba(114,184,255,.07)); border-color: rgba(126,231,183,.28); }
.scorecard span { color: var(--muted); font-size: .75rem; }
.scorecard strong { font-size: clamp(1.45rem, 3vw, 2.25rem); letter-spacing: -.05em; margin: auto 0 0; }
.scorecard small { color: #7f92a7; font-size: .68rem; line-height: 1.35; margin-top: 8px; }
.verdict {
  display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; padding: 21px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 15px; margin-bottom: 16px;
}
.verdict-icon {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: var(--bg); font-weight: 900; font-size: 1.4rem;
}
.verdict h3 { margin-bottom: 5px; }
.verdict p:last-child { color: var(--muted); margin-bottom: 0; }
.broader-value-card {
  margin-bottom: 16px;
  padding: 22px;
  border: 1px solid rgba(114,184,255,.24);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(114,184,255,.09), rgba(126,231,183,.035));
}
.broader-value-card h3 {
  max-width: 760px;
  margin-bottom: 12px;
}
.broader-value-card p {
  max-width: 900px;
  color: var(--muted);
  font-size: .9rem;
}
.broader-value-card p:last-child {
  margin-bottom: 0;
}
.broader-value-summary {
  color: var(--text) !important;
  font-weight: 750;
}

.chart-card, .data-card, .sensitivity-card {
  border: 1px solid var(--line); background: rgba(255,255,255,.02); border-radius: 15px;
}
.chart-card { padding: 22px; }
.chart-title p { color: var(--muted); font-size: .82rem; margin: 0; }
.legend { display: flex; gap: 14px; color: var(--muted); font-size: .72rem; }
.legend span { display: flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.renewables { background: var(--accent); }
.dot.investment { background: var(--accent-2); }
.chart-wrap { width: 100%; overflow: hidden; margin-top: 12px; }
.chart-wrap svg { width: 100%; height: auto; min-height: 260px; display: block; }
.breakdown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.data-card { padding: 20px; }
.data-card h3 { font-size: 1rem; }
.data-card dl { margin: 0; }
.data-card dl div { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.data-card dl div:last-child { border-bottom: 0; }
.data-card dt { color: var(--muted); font-size: .78rem; }
.data-card dd { margin: 0; font-weight: 700; text-align: right; }
.sensitivity-card {
  margin-top: 16px; padding: 21px; display: grid; grid-template-columns: .75fr 1.25fr; gap: 26px;
}
.sensitivity-card p:last-child { color: var(--muted); font-size: .85rem; }
.sensitivity-bars { display: grid; gap: 10px; align-content: center; }
.sens-row { display: grid; grid-template-columns: 92px 1fr 72px; gap: 10px; align-items: center; font-size: .72rem; color: var(--muted); }
.sens-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.sens-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.sens-row strong { color: var(--text); text-align: right; }
.methodology { margin-top: 20px; }
.methodology summary { color: var(--muted); }
.method-copy { color: var(--muted); font-size: .86rem; max-width: 900px; }
.content-section { padding: 100px 0; }
.content-section > h2 { font-size: clamp(2rem, 4vw, 3.4rem); max-width: 720px; letter-spacing: -.045em; }
.content-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.content-grid article { border-top: 1px solid var(--line); padding-top: 18px; }
.content-grid article span { color: var(--accent); font-size: .72rem; font-weight: 800; }
.content-grid article h3 { margin: 14px 0 7px; }
.content-grid article p { color: var(--muted); }
footer {
  width: min(1440px, calc(100% - 40px)); margin: 0 auto; padding: 40px 0 60px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; color: var(--muted);
}
footer strong { color: var(--text); letter-spacing: .16em; }
footer p { font-size: .82rem; margin-top: 8px; }
footer > div:last-child { display: flex; gap: 22px; align-items: flex-start; }
footer a { text-decoration: none; font-size: .82rem; }
footer a:hover { color: var(--text); }
.disabled-section { opacity: .45; pointer-events: none; }
@media (max-width: 1100px) {
  
.input-guide {
  display: grid;
  grid-template-columns: .6fr 1.4fr;
  gap: 40px;
  padding: 28px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(10,25,42,.68);
}
.input-guide h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.04em; }
.input-guide > div:first-child > p:last-child { color: var(--muted); }
.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.guide-grid article { padding: 14px 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.02); }
.guide-grid strong { font-size: .82rem; }
.guide-grid p { color: var(--muted); font-size: .72rem; line-height: 1.45; margin: 5px 0 0; }

.route-comparison {
  padding: 22px;
  margin-bottom: 16px;
  border: 1px solid rgba(126,231,183,.25);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(126,231,183,.08), rgba(114,184,255,.04));
}
.route-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.route-heading h3 { margin-bottom: 14px; }
.comparison-badge { color: var(--accent); border: 1px solid rgba(126,231,183,.3); border-radius: 999px; padding: 6px 10px; font-size: .68rem; white-space: nowrap; }
.route-columns { display: grid; grid-template-columns: 1fr 52px 1fr; gap: 14px; align-items: stretch; }
.route-option { padding: 17px; border-radius: 12px; background: rgba(0,0,0,.14); border: 1px solid rgba(255,255,255,.07); }
.route-option strong { display: block; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.05em; margin: 7px 0; }
.route-option p { color: var(--muted); font-size: .76rem; margin: 0; }
.route-kicker { color: var(--muted); font-size: .65rem; letter-spacing: .12em; font-weight: 800; }
.route-versus { display: grid; place-items: center; color: var(--muted); font-size: .72rem; font-weight: 800; }
.route-difference { color: var(--text); font-weight: 700; margin: 16px 0 0; text-align: center; }

.calculator-shell { grid-template-columns: 1fr; }
  .inputs-panel { position: static; }
  .scorecards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .brand-logo {
    width: 205px;
    height: auto;
    max-width: 205px;
  }
  .site-header nav { display: none; }
  main, .site-header, footer { width: min(100% - 24px, 1440px); }
  .hero {
    padding-top: 48px;
    padding-bottom: 38px;
  }
  .hero-grid { gap: 24px; }
  .hero-visual { border-radius: 15px; }
  .inputs-panel, .results-panel { padding: 18px; border-radius: 15px; }
  .field-grid, .breakdown-grid, .sensitivity-card, .content-grid, .guide-grid, .next-step-grid, .answer-grid { grid-template-columns: 1fr; }
  .preset-grid { grid-template-columns: 1fr; }
  .preset-heading { flex-direction: column; align-items: flex-start; }
  .preset-heading > p { text-align: left; }
  .preset-change { grid-template-columns: 1fr; }
  .change-values { white-space: normal; }
  .saved-grid { grid-template-columns: 1fr; }
  .value-source-heading { flex-direction: column; align-items: flex-start; }
  .value-source-heading > p { text-align: left; }
  .value-bar-row { grid-template-columns: 1fr; gap: 6px; }
  .value-bar-amount { text-align: left; }
  .component-summary { grid-template-columns: 1fr; }
  .influence-heading { flex-direction: column; align-items: flex-start; }
  .influence-heading > p { text-align: left; }
  .influence-row { grid-template-columns: 1fr; gap: 6px; }
  .influence-impact { text-align: left; }
  .support-strip { flex-direction: column; align-items: flex-start; }
  .next-steps-heading { flex-direction: column; align-items: flex-start; }
  .next-steps-heading > p { text-align: left; }
  .result-actions { width: 100%; }
  .result-actions button { flex: 1; }
  .route-columns { grid-template-columns: 1fr; }
  .route-versus { min-height: 24px; }
  .route-heading { flex-direction: column; }
  .span-2 { grid-column: auto; }
  .scorecards { grid-template-columns: 1fr 1fr; }
  .scorecard { min-height: 128px; }
  .results-heading { flex-direction: column; }
  .chart-title { flex-direction: column; }
  footer { flex-direction: column; gap: 24px; }
  footer > div:last-child { flex-wrap: wrap; }
}
@media (max-width: 430px) {
  .scorecards { grid-template-columns: 1fr; }
  .preset-row { flex-wrap: wrap; }
  .preset { min-width: 45%; }
}


@media (max-width: 720px) {
  html {
    overflow-x: hidden;
  }

  body {
    overflow-x: hidden;
  }

  .site-header {
    height: 98px;
    padding: 0;
  }

  .brand-logo {
    width: 210px;
    max-width: 210px;
    height: auto;
  }

  .desktop-breadcrumbs {
    display: none;
  }

  .mobile-breadcrumbs {
    display: block;
    padding-top: 18px;
    font-size: .8rem;
  }

  .mobile-breadcrumbs a {
    color: var(--muted);
    text-decoration: none;
  }

  .hero {
    padding-top: 42px;
    padding-bottom: 32px;
  }

  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .hero-copy {
    width: 100%;
    min-width: 0;
  }

  .hero .eyebrow {
    max-width: 100%;
    font-size: .68rem;
    line-height: 1.45;
    letter-spacing: .13em;
  }

  .hero h1 {
    max-width: none;
    width: 100%;
    font-size: clamp(2.55rem, 13vw, 4rem);
    line-height: .95;
    letter-spacing: -.055em;
    margin-bottom: 22px;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .desktop-lede {
    display: none;
  }

  .mobile-hero-summary {
    display: block;
    margin: 0 0 20px;
  }

  .mobile-hero-summary > p {
    color: #c4d1de;
    font-size: 1rem;
    margin-bottom: 11px;
  }

  .mobile-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }

  .mobile-summary-grid span {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    color: #d7e1eb;
    font-size: .78rem;
  }

  .hero-trust {
    gap: 8px;
    margin-top: 16px;
    font-size: .78rem;
  }

  .tool-meta {
    gap: 7px;
    margin-top: 14px;
  }

  .tool-meta span,
  .tool-meta a {
    font-size: .64rem;
  }

  .hero-notice {
    margin-top: 18px;
    padding: 14px;
    font-size: .8rem;
  }

  .hero-cta {
    width: 100%;
    min-width: 0;
    margin-top: 16px;
  }

  .hero-visual {
    order: 2;
    width: 100%;
    max-width: 100%;
    border-radius: 14px;
  }

  .hero-visual::before {
    background:
      linear-gradient(90deg, rgba(6,17,31,.12), transparent 28%),
      linear-gradient(0deg, rgba(6,17,31,.18), transparent 42%);
  }

  .hero-visual img {
    width: 100%;
    aspect-ratio: 1536 / 744;
    object-fit: cover;
    object-position: center center;
  }

  
.input-guide {
    padding: 18px;
  }

  .input-guide h2 {
    font-size: 1.8rem;
  }

  .calculator-shell {
    gap: 16px;
  }

  .inputs-panel,
  .results-panel,
  .saved-scenarios {
    padding: 16px;
  }

  .panel-heading,
  .results-heading {
    gap: 14px;
  }

  .panel-heading {
    flex-direction: column;
  }

  .input-actions {
    width: 100%;
    justify-content: space-between;
  }

  .scorecards {
    grid-template-columns: 1fr;
  }

  .scorecard {
    min-height: 118px;
  }

  .result-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .route-comparison {
    padding: 17px;
  }

  .route-columns {
    grid-template-columns: 1fr;
  }

  .route-versus {
    min-height: 26px;
  }

  .chart-card {
    padding: 16px;
  }

  .chart-wrap svg {
    min-height: 230px;
  }

  .support-grid,
  .answer-grid,
  .guide-grid,
  .next-step-grid,
  .content-grid {
    grid-template-columns: 1fr;
  }

  .support-strip-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .support-strip-actions > * {
    justify-content: center;
    width: 100%;
  }

  .version-history {
    padding-top: 62px;
  }

  .version-list article {
    grid-template-columns: 58px 1fr;
  }

  footer > div:last-child {
    display: grid;
    gap: 12px;
  }
}



.future-assumptions {
  margin-top: 8px;
  border-top: 1px solid var(--line);
}
.future-assumptions summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.future-summary-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.future-summary-copy small {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 400;
}
.alpha-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid rgba(126,231,183,.28);
  border-radius: 999px;
  background: rgba(126,231,183,.07);
  color: var(--accent);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .06em;
}
.future-intro {
  margin: 0 0 15px;
  padding: 13px 14px;
  border: 1px solid rgba(114,184,255,.14);
  border-radius: 11px;
  background: rgba(114,184,255,.045);
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.5;
}
.future-field-grid {
  padding-bottom: 12px;
}
.select-wrap {
  display: block;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  overflow: hidden;
}
.select-wrap::after {
  content: "⌄";
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-54%);
  color: #8194a9;
  font-size: .8rem;
  pointer-events: none;
}
.select-wrap:focus-within {
  border-color: rgba(126,231,183,.65);
  box-shadow: 0 0 0 3px rgba(126,231,183,.08);
}
.select-wrap select {
  width: 100%;
  min-width: 0;
  appearance: none;
  border: 0;
  outline: 0;
  padding: 11px 34px 11px 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .76rem;
}
.select-wrap select option {
  background: #102238;
  color: var(--text);
}
.future-disclaimer {
  margin: 0 0 18px;
  color: #71859a;
  font-size: .66rem;
  line-height: 1.45;
}
@media (max-width: 720px) {
  .future-assumptions summary {
    align-items: flex-start;
  }
  .alpha-badge {
    margin-top: 1px;
  }
}


/* v3.0 Alpha 1.2 */
.future-assumptions summary {
  padding-right: 38px;
}
.future-assumptions summary::after {
  right: 2px;
}
.alpha-badge {
  margin-left: auto;
  margin-right: 18px;
  white-space: nowrap;
}
.active-scenario-summary {
  margin: 0 0 12px;
  padding: 11px 13px;
  border-left: 3px solid var(--accent);
  border-radius: 0 9px 9px 0;
  background: rgba(126,231,183,.045);
  color: #aebdcb;
  font-size: .69rem;
  line-height: 1.5;
}
@media (max-width: 520px) {
  .future-assumptions summary {
    display: grid;
    grid-template-columns: 1fr;
    padding-right: 34px;
  }
  .alpha-badge {
    justify-self: start;
    margin: 7px 0 0;
  }
}


/* v3.0 Alpha 1.3 */
.current-scenario-banner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 16px 0;
  padding: 18px 20px;
  border: 1px solid rgba(126,231,183,.20);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(126,231,183,.07), transparent 18rem),
    rgba(255,255,255,.02);
}
.current-scenario-banner h3 {
  margin-bottom: 0;
}
.scenario-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 650px;
}
.scenario-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  background: rgba(0,0,0,.12);
  color: #b9c7d5;
  font-size: .68rem;
}
.scenario-tag i {
  color: var(--accent);
  font-style: normal;
}
@media (max-width: 900px) {
  .current-scenario-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .scenario-tags {
    justify-content: flex-start;
  }
}

.desktop-note{max-width:1200px;margin:18px auto;padding:0 20px}
.desktop-note-inner{background:rgba(126,231,183,.08);border:1px solid rgba(126,231,183,.2);border-radius:12px;padding:14px 16px;color:#c9d6e3;font-size:.9rem}


/* v3.2 */
.desktop-recommendation strong {
  display: block;
  margin-bottom: 3px;
}
.desktop-recommendation p {
  color: var(--muted);
  font-size: .75rem;
  margin: 0;
}

.quick-scenarios {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.018);
}
.quick-scenarios-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 14px;
}
.quick-scenarios-heading h3 { margin-bottom: 0; }
.quick-scenarios-heading > p {
  max-width: 340px;
  color: var(--muted);
  font-size: .68rem;
  text-align: right;
  margin: 0;
}
.quick-scenario-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 9px;
}
.quick-scenario {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 13px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(0,0,0,.10);
  color: var(--text);
}
.quick-scenario:hover,
.quick-scenario.active {
  border-color: rgba(126,231,183,.5);
  background: rgba(126,231,183,.055);
}
.quick-scenario > span {
  color: var(--accent);
  font-size: 1rem;
}
.quick-scenario strong { font-size: .76rem; }
.quick-scenario small {
  color: var(--muted);
  font-size: .62rem;
  line-height: 1.35;
}

.info-button {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  margin-left: 5px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  font-size: .67rem;
  vertical-align: middle;
}
.info-button:hover {
  border-color: var(--accent);
}

.scenario-help-dialog {
  width: min(560px, calc(100% - 28px));
  border: 1px solid rgba(126,231,183,.25);
  border-radius: 17px;
  background: #0a192a;
  color: var(--text);
  padding: 0;
  box-shadow: 0 35px 100px rgba(0,0,0,.58);
}
.scenario-help-dialog::backdrop {
  background: rgba(2,8,15,.76);
  backdrop-filter: blur(5px);
}
.scenario-help-dialog form { padding: 24px; }

.current-scenario-dashboard {
  margin: 16px 0;
  padding: 20px;
  border: 1px solid rgba(126,231,183,.2);
  border-radius: 15px;
  background:
    radial-gradient(circle at 100% 0%,rgba(126,231,183,.08),transparent 20rem),
    rgba(255,255,255,.02);
}
.scenario-dashboard-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 15px;
}
.scenario-dashboard-heading h3 { margin-bottom: 0; }
.scenario-status {
  padding: 6px 10px;
  border: 1px solid rgba(126,231,183,.22);
  border-radius: 999px;
  background: rgba(126,231,183,.06);
  color: var(--accent);
  font-size: .65rem;
  font-weight: 800;
}
.scenario-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 9px;
}
.scenario-dashboard-grid article {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 10px;
  background: rgba(0,0,0,.11);
}
.scenario-dashboard-grid small {
  display: block;
  color: var(--muted);
  font-size: .62rem;
  margin-bottom: 5px;
}
.scenario-dashboard-grid strong {
  display: block;
  font-size: .73rem;
  line-height: 1.35;
}

.why-result-card {
  margin-top: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.02);
}
.why-result-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
}
.why-result-heading h3 { margin-bottom: 0; }
.why-result-heading > p {
  max-width: 390px;
  color: var(--muted);
  font-size: .72rem;
  text-align: right;
  margin: 0;
}
.why-result-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin-top: 16px;
}
.why-point {
  padding: 15px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 11px;
  background: rgba(0,0,0,.10);
}
.why-point > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 10px;
  border-radius: 9px;
  background: rgba(126,231,183,.07);
  color: var(--accent);
}
.why-point strong {
  display: block;
  font-size: .78rem;
  margin-bottom: 5px;
}
.why-point p {
  color: var(--muted);
  font-size: .69rem;
  margin: 0;
}


/* v3.2.4 responsive and hero layout repair */
.hero-grid {
  grid-template-columns: minmax(0, .96fr) minmax(520px, 1.04fr);
  grid-template-areas:
    "copy visual"
    "bottom bottom";
  gap: 34px 48px;
  align-items: start;
}
.hero-copy { grid-area: copy; }
.hero-visual {
  grid-area: visual;
  margin-top: -24px;
}
.hero-bottom-row {
  grid-area: bottom;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-top: -8px;
}
.hero-bottom-row .hero-cta {
  width: 100%;
  min-width: 0;
  margin: 0;
  align-self: stretch;
}
.hero-info-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, .8fr);
  gap: 18px;
  align-items: center;
  min-width: 0;
  padding: 13px 16px;
  border: 1px solid rgba(114,184,255,.18);
  border-radius: 13px;
  background: linear-gradient(135deg,rgba(114,184,255,.05),rgba(126,231,183,.025)),rgba(255,255,255,.015);
}
.hero-info-item {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 11px;
  align-items: center;
  min-width: 0;
}
.hero-info-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(114,184,255,.08);
  color: var(--accent-2);
  font-size: .85rem;
}
.hero-info-counter .hero-info-icon {
  background: rgba(126,231,183,.08);
  color: var(--accent);
}
.hero-info-item strong {
  display: block;
  margin-bottom: 2px;
  font-size: .72rem;
  line-height: 1.3;
}
.hero-info-item p {
  margin: 0;
  color: var(--muted);
  font-size: .62rem;
  line-height: 1.4;
}
.hero-info-divider {
  width: 1px;
  height: 38px;
  background: rgba(255,255,255,.09);
}

@media (max-width: 1100px) {
  .quick-scenario-grid,
  .scenario-dashboard-grid { grid-template-columns: repeat(2,1fr); }
  .why-result-grid { grid-template-columns: 1fr; }
  .hero-grid {
    grid-template-columns: minmax(0,1fr) minmax(430px,.95fr);
    gap: 28px;
  }
  .hero-bottom-row { grid-template-columns: 190px minmax(0,1fr); }
}

@media (max-width: 900px) {
  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .hero-copy, .hero-visual, .hero-bottom-row { width: 100%; }
  .hero-visual { order: 2; margin-top: 0; }
  .hero-bottom-row {
    order: 3;
    grid-template-columns: 1fr;
    margin-top: 0;
  }
  .hero-bottom-row .hero-cta { min-height: 52px; }
  .hero-info-panel { grid-template-columns: 1fr; gap: 11px; }
  .hero-info-divider { width: 100%; height: 1px; }
  .current-scenario-dashboard,
  .quick-scenarios-heading,
  .why-result-heading,
  .scenario-dashboard-heading { align-items: flex-start; }
}

@media (max-width: 720px) {
  .quick-scenarios-heading,
  .why-result-heading,
  .scenario-dashboard-heading { flex-direction: column; align-items: flex-start; }
  .quick-scenarios-heading > p,
  .why-result-heading > p { text-align: left; }
  .quick-scenario-grid,
  .scenario-dashboard-grid { grid-template-columns: 1fr; }
  .hero-info-panel { padding: 14px; }
}


/* v3.2.6 — explicit hero grid; calculator styling unchanged */
.hero-grid-v326 {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(520px, 1.04fr);
  grid-template-areas:
    "copy visual"
    "primary secondary"
    "meta secondary"
    "cta secondary";
  gap: 14px 48px;
  align-items: start;
}
.hero-copy-v326 { grid-area: copy; }
.hero-visual-v326 {
  grid-area: visual;
  margin-top: -24px;
}
.hero-primary-card-v326 {
  grid-area: primary;
  margin-top: 0;
  min-height: 112px;
}
.hero-secondary-card-v326 {
  grid-area: secondary;
  align-self: start;
  min-height: 112px;
}
.hero-meta-v326 {
  grid-area: meta;
  margin-top: 2px;
}
.hero-cta-v326 {
  grid-area: cta;
  width: 230px;
  min-width: 0;
  margin-top: 4px;
}

@media (max-width: 1120px) and (min-width: 901px) {
  .hero-grid-v326 {
    grid-template-columns: minmax(0, 1fr) minmax(430px, .95fr);
    gap: 14px 28px;
  }
}

@media (max-width: 900px) {
  .hero-grid-v326 {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .hero-copy-v326 { order: 1; }
  .hero-visual-v326 {
    order: 2;
    margin-top: 0;
    width: 100%;
  }
  .hero-primary-card-v326 { order: 3; width: 100%; }
  .hero-secondary-card-v326 { order: 4; width: 100%; }
  .hero-meta-v326 { order: 5; width: 100%; }
  .hero-cta-v326 {
    order: 6;
    width: 100%;
  }
}


/* v3.2.7 — neutral first-load state */
.hero-cta-v326,
.hero-cta {
  white-space: nowrap;
}
.hero-cta-v326 {
  width: 260px;
}

.results-panel {
  position: relative;
}
.results-panel.is-onboarding > *:not(.results-onboarding) {
  visibility: hidden;
}
.results-onboarding {
  display: none;
}
.results-panel.is-onboarding .results-onboarding {
  display: grid;
  place-items: center;
  min-height: 640px;
  visibility: visible;
}
.results-onboarding-card {
  width: min(560px, 100%);
  padding: 30px;
  border: 1px solid rgba(126,231,183,.18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%,rgba(126,231,183,.08),transparent 18rem),
    rgba(255,255,255,.02);
  text-align: center;
}
.results-onboarding-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 14px;
  background: rgba(126,231,183,.08);
  color: var(--accent);
  font-size: 1.35rem;
}
.results-onboarding-card h2 {
  margin-bottom: 10px;
}
.results-onboarding-card > p:not(.step) {
  max-width: 480px;
  margin: 0 auto;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.6;
}
.results-onboarding-prompts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.results-onboarding-prompts span {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(0,0,0,.12);
  color: #aebdcb;
  font-size: .68rem;
}

@media (max-width: 900px) {
  .hero-cta-v326 {
    width: 100%;
  }
  .results-panel.is-onboarding .results-onboarding {
    min-height: 460px;
  }
}


/* v3.2.8 — alternative uses and collapsed release history */
.alternative-uses-card {
  margin: 16px 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.02);
}
.alternative-uses-heading {
  display: flex;
  justify-content: space-between;
  gap: 26px;
  align-items: flex-end;
}
.alternative-uses-heading h3 {
  margin-bottom: 0;
}
.alternative-uses-heading > p {
  max-width: 440px;
  margin: 0;
  color: var(--muted);
  font-size: .72rem;
  text-align: right;
}
.alternative-uses-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 11px;
  margin-top: 18px;
}
.alternative-use-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 190px;
  padding: 17px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(0,0,0,.11);
}
.alternative-use-card.is-best {
  border-color: rgba(126,231,183,.55);
  background:
    radial-gradient(circle at 100% 0%,rgba(126,231,183,.10),transparent 12rem),
    rgba(126,231,183,.035);
}
.alternative-use-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: rgba(126,231,183,.08);
  color: var(--accent);
  font-size: 1rem;
}
.alternative-use-card small {
  color: var(--muted);
  font-size: .68rem;
}
.alternative-use-card strong {
  display: block;
  margin: 5px 0 9px;
  font-size: 1.65rem;
}
.alternative-use-card p {
  margin: auto 0 0;
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.5;
}
.financial-advice-warning {
  margin: 15px 0 0;
  padding: 13px 15px;
  border: 1px solid rgba(255,210,128,.22);
  border-radius: 11px;
  background: rgba(255,210,128,.045);
  color: #aebdcb;
  font-size: .72rem;
  line-height: 1.55;
}
.financial-advice-warning strong {
  color: var(--text);
}
.version-history-collapsed {
  width: min(1180px, calc(100% - 36px));
  margin: 30px auto 0;
}
.version-history-collapsed details {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.015);
}
.version-history-collapsed summary {
  cursor: pointer;
  padding: 15px 17px;
  color: var(--text);
  font-size: .78rem;
  font-weight: 800;
}
.version-history-inner {
  padding: 0 17px 17px;
}

@media (max-width: 900px) {
  .alternative-uses-heading {
    flex-direction: column;
    align-items: flex-start;
  }
  .alternative-uses-heading > p {
    text-align: left;
  }
  .alternative-uses-grid {
    grid-template-columns: 1fr;
  }
  .alternative-use-card {
    min-height: 0;
  }
}


/* v3.2.10 — lighter information hierarchy */
.compact-help {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto 28px;
}
.compact-help details {
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.compact-help summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 2px;
  list-style: none;
}
.compact-help summary::-webkit-details-marker {
  display: none;
}
.compact-help summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 1.05rem;
  font-weight: 850;
}
.compact-help details[open] summary::after {
  content: "−";
}
.compact-help summary span {
  display: grid;
  gap: 3px;
}
.compact-help summary strong {
  font-size: .84rem;
}
.compact-help summary small {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 400;
}
.compact-help-content {
  padding: 3px 0 20px;
}
.compact-help-content > p {
  max-width: 760px;
  margin: 0 0 15px;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.55;
}
.compact-help .guide-grid {
  gap: 9px;
}
.compact-help .guide-grid article {
  padding: 13px;
  border-color: rgba(255,255,255,.06);
  background: rgba(255,255,255,.012);
}

.result-detail-disclosure {
  margin-top: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.result-detail-disclosure > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 2px;
  list-style: none;
}
.result-detail-disclosure > summary::-webkit-details-marker {
  display: none;
}
.result-detail-disclosure > summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 1.05rem;
  font-weight: 850;
}
.result-detail-disclosure[open] > summary::after {
  content: "−";
}
.result-detail-disclosure > summary span {
  display: grid;
  gap: 3px;
}
.result-detail-disclosure > summary strong {
  font-size: .82rem;
}
.result-detail-disclosure > summary small {
  color: var(--muted);
  font-size: .66rem;
  font-weight: 400;
}
.result-detail-content {
  padding: 0 0 18px;
}
.result-detail-content > section,
.result-detail-content > article {
  margin-top: 12px;
}

/* Reduce competing visual weight without removing information */
.preset-section,
.quick-scenarios {
  background: rgba(255,255,255,.012);
}
.results-panel .scorecard,
.alternative-use-card {
  box-shadow: none;
}
.version-history-collapsed {
  opacity: .86;
}

@media (max-width: 720px) {
  .compact-help {
    width: min(100% - 24px, 1180px);
  }
  .compact-help summary,
  .result-detail-disclosure > summary {
    align-items: flex-start;
  }
}


/* v4.0.1 — stacked scenario/results layout with all controls preserved */
.calculator-shell-stacked {
  display: block;
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
}

.calculator-zone-heading {
  margin: 34px 0 16px;
  padding-top: 8px;
}

.calculator-zone-heading h2 {
  margin: 0 0 6px;
}

.calculator-zone-heading > p:last-child {
  max-width: 780px;
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.55;
}

.results-zone-heading {
  margin-top: 42px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.09);
}

.scenario-panel-stacked,
.results-panel-stacked {
  width: 100%;
  position: static;
}

.scenario-panel-stacked {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.018);
}

.scenario-panel-stacked > * {
  min-width: 0;
}

.scenario-panel-stacked > .panel-heading,
.scenario-panel-stacked > .preset-section,
.scenario-panel-stacked > .quick-scenarios,
.scenario-panel-stacked > .scenario-actions,
.scenario-panel-stacked > .saved-scenarios {
  grid-column: 1 / -1;
}

.scenario-panel-stacked details {
  margin: 0;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 12px;
  background: rgba(0,0,0,.10);
  overflow: hidden;
}

.scenario-panel-stacked details + details {
  border-top: 1px solid rgba(255,255,255,.075);
}

.scenario-panel-stacked details summary {
  padding-left: 14px;
  padding-right: 36px;
}

.scenario-panel-stacked .field-grid {
  grid-template-columns: 1fr;
}

.results-panel-stacked {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.018);
}

.results-panel-stacked .summary-grid,
.results-panel-stacked .alternative-uses-grid,
.results-panel-stacked .scenario-dashboard-grid,
.results-panel-stacked .chart-card {
  width: 100%;
}

.results-panel-stacked canvas {
  max-width: 100%;
}

/* Dialogs remain functional and should not participate in the scenario grid. */
.calculator-shell-stacked > dialog,
.scenario-panel-stacked dialog {
  display: none;
}

.calculator-shell-stacked > dialog[open],
.scenario-panel-stacked dialog[open] {
  display: block;
}

@media (max-width: 1050px) {
  .scenario-panel-stacked {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 720px) {
  .calculator-shell-stacked {
    width: min(100% - 24px, 1180px);
  }

  .scenario-panel-stacked {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .results-panel-stacked {
    padding: 14px;
  }

  .calculator-zone-heading {
    margin-top: 26px;
  }
}


/* v4.0.2 — horizontal future scenario selector */
.future-scenario-section {
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px solid rgba(126,231,183,.16);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(126,231,183,.06), transparent 20rem),
    rgba(255,255,255,.015);
}

.future-scenario-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
  margin-bottom: 14px;
}

.future-scenario-heading h3 {
  margin-bottom: 0;
}

.future-scenario-heading > p {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  font-size: .7rem;
  text-align: right;
}

.future-scenario-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}

.future-scenario-option {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px;
  text-align: left;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  background: rgba(0,0,0,.10);
  color: var(--text);
}

.future-scenario-option:hover,
.future-scenario-option.active {
  border-color: rgba(126,231,183,.5);
  background: rgba(126,231,183,.055);
}

.future-scenario-option > span {
  color: var(--accent);
  font-size: 1rem;
}

.future-scenario-option strong {
  font-size: .76rem;
}

.future-scenario-option small {
  color: var(--muted);
  font-size: .62rem;
  line-height: 1.35;
}

.advanced-future-assumptions {
  margin-top: 14px !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.advanced-future-assumptions > summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0 0 !important;
  list-style: none;
}

.advanced-future-assumptions > summary::-webkit-details-marker {
  display: none;
}

.advanced-future-assumptions > summary::after {
  content: "+";
  color: var(--accent);
  font-size: 1rem;
  font-weight: 850;
}

.advanced-future-assumptions[open] > summary::after {
  content: "−";
}

.advanced-future-assumptions > summary span {
  display: grid;
  gap: 3px;
}

.advanced-future-assumptions > summary strong {
  font-size: .78rem;
}

.advanced-future-assumptions > summary small {
  color: var(--muted);
  font-size: .64rem;
  font-weight: 400;
}

.advanced-future-inner {
  padding-top: 14px;
}

.advanced-future-inner .future-control-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}

.advanced-future-inner .active-scenario-summary,
.advanced-future-inner .future-disclaimer {
  grid-column: 1 / -1;
}

@media (max-width: 1050px) {
  .future-scenario-options,
  .advanced-future-inner .future-control-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 720px) {
  .future-scenario-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .future-scenario-heading > p {
    text-align: left;
  }

  .future-scenario-options,
  .advanced-future-inner .future-control-grid {
    grid-template-columns: 1fr;
  }
}


/* v4.0.3 — horizontal long term assumptions */
.long-term-assumptions-horizontal {
  grid-column: 1 / -1;
}

.long-term-assumptions-note {
  margin: 0;
  padding: 0 16px 14px;
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.5;
}

.long-term-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  padding: 0 14px 14px;
}

.long-term-group {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 11px;
  background: rgba(255,255,255,.012);
}

.long-term-group-heading {
  display: grid;
  gap: 3px;
  margin-bottom: 12px;
}

.long-term-group-heading strong {
  font-size: .75rem;
}

.long-term-group-heading small {
  color: var(--muted);
  font-size: .61rem;
  line-height: 1.35;
}

.long-term-group-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
}

.long-term-group-grid .field {
  margin: 0;
}

.long-term-group-grid .field > span:first-child {
  font-size: .68rem;
}

.long-term-group-grid .field small {
  font-size: .58rem;
  line-height: 1.35;
}

.long-term-group-grid .unit-input input {
  min-height: 48px;
}

@media (max-width: 1050px) {
  .long-term-groups {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .long-term-group:last-child {
    grid-column: 1 / -1;
  }

  .long-term-group:last-child .long-term-group-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

@media (max-width: 720px) {
  .long-term-groups,
  .long-term-group:last-child .long-term-group-grid {
    grid-template-columns: 1fr;
  }

  .long-term-group:last-child {
    grid-column: auto;
  }
}


/* v4.0.5 — stronger disclaimer and live Bank Rate source */
.financial-advice-warning .financial-advice-emphasis {
  display: inline;
  color: #fff;
  font-weight: 900;
}

.financial-advice-warning {
  border-color: rgba(255,210,128,.38);
  background: rgba(255,210,128,.075);
}

.cash-rate-source {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: .58rem;
  line-height: 1.4;
}

.cash-rate-source.is-live {
  color: var(--accent);
}

.cash-rate-source.is-custom {
  color: #aebdcb;
}

.exec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}
.exec-card{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.02)}
.exec-card strong{display:block;font-size:1.2rem;margin-top:6px}
.exec-why,.exec-confidence{margin-top:14px;padding:14px;border-left:3px solid var(--accent);background:rgba(255,255,255,.02)}
@media(max-width:900px){.exec-grid{grid-template-columns:1fr 1fr}}


/* v4.1.1 executive summary confidence states */
#summaryConfidence[data-confidence="high"] {
  color: var(--accent);
}
#summaryConfidence[data-confidence="medium"] {
  color: #ffd280;
}
#summaryConfidence[data-confidence="low"] {
  color: #ff9e9e;
}


/* v4.2 — Decision Summary */
.decision-summary{margin:0 0 18px;padding:22px;border:1px solid var(--line);border-radius:16px;background:radial-gradient(circle at 100% 0%,rgba(126,231,183,.055),transparent 22rem),rgba(255,255,255,.018)}
.decision-summary-heading{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:16px}
.decision-summary-heading h2{margin:0}
.decision-summary-scenario{padding:7px 10px;border:1px solid rgba(126,231,183,.25);border-radius:999px;color:var(--accent);font-size:.66rem;font-weight:800}
.decision-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.decision-summary-card{min-width:0;min-height:170px;padding:15px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(0,0,0,.10)}
.decision-summary-card small{display:block;color:var(--muted);font-size:.64rem}
.decision-summary-card strong{display:block;margin:7px 0 9px;font-size:1.25rem;line-height:1.15}
.decision-summary-card p{margin:0;color:var(--muted);font-size:.65rem;line-height:1.5}
.decision-summary-card.outcome-renewables{border-color:rgba(126,231,183,.48);background:rgba(126,231,183,.055)}
.decision-summary-card.outcome-renewables strong{color:var(--accent)}
.decision-summary-card.outcome-alternative{border-color:rgba(255,158,158,.46);background:rgba(255,158,158,.05)}
.decision-summary-card.outcome-alternative strong{color:#ffb2b2}
.decision-summary-card.outcome-even{border-color:rgba(255,210,128,.4);background:rgba(255,210,128,.045)}
.decision-summary-card.outcome-even strong{color:#ffd280}
.decision-summary-explanation{display:grid;grid-template-columns:1.3fr .7fr;gap:12px;margin-top:12px}
.decision-summary-explanation>div{padding:15px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.012)}
.decision-summary-explanation p:not(.step){margin:0;color:var(--muted);font-size:.72rem;line-height:1.6}
#summarySensitivity{display:block;margin:5px 0 8px;font-size:.95rem}
#summarySensitivity[data-sensitivity="relatively-stable"]{color:var(--accent)}
#summarySensitivity[data-sensitivity="moderately-sensitive"]{color:#ffd280}
#summarySensitivity[data-sensitivity="highly-sensitive"]{color:#ffb2b2}
.non-financial-value{margin-top:12px;padding:16px;border:1px solid rgba(114,184,255,.18);border-radius:12px;background:rgba(114,184,255,.035)}
.non-financial-value h3{margin:4px 0 12px}
.non-financial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.non-financial-grid span{padding:9px 10px;border-radius:9px;background:rgba(255,255,255,.025);color:#bfd0df;font-size:.66rem}
.non-financial-value>p:last-child{margin:12px 0 0;color:var(--muted);font-size:.69rem;line-height:1.55}
.decision-summary-warning{margin-top:12px;padding:15px 16px;border:1px solid rgba(255,210,128,.48);border-radius:12px;background:rgba(255,210,128,.085)}
.decision-summary-warning>strong{display:block;margin-bottom:5px;color:#fff;font-size:.76rem}
.decision-summary-warning p{margin:0;color:#d6dde5;font-size:.69rem;line-height:1.55}
.decision-summary-warning p strong{color:#fff;font-weight:900}
@media(max-width:1050px){.decision-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.non-financial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.decision-summary-heading{flex-direction:column;align-items:flex-start}.decision-summary-explanation,.decision-summary-grid,.non-financial-grid{grid-template-columns:1fr}}

/* v4.3 battery presets */
.battery-preset-section{margin:0 0 14px;padding:15px;border:1px solid rgba(126,231,183,.15);border-radius:12px;background:rgba(126,231,183,.025)}
.battery-preset-heading{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:12px}.battery-preset-heading h3{margin:0}.battery-preset-heading>p{max-width:380px;margin:0;color:var(--muted);font-size:.66rem;text-align:right}
.battery-preset-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.battery-preset-option{min-width:0;padding:11px;text-align:left;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(0,0,0,.10);color:var(--text)}
.battery-preset-option:hover,.battery-preset-option.active{border-color:rgba(126,231,183,.48);background:rgba(126,231,183,.055)}.battery-preset-option strong{display:block;margin-bottom:4px;font-size:.7rem}.battery-preset-option small{display:block;color:var(--muted);font-size:.56rem;line-height:1.35}.battery-preset-note{margin:10px 0 0;color:var(--muted);font-size:.63rem;line-height:1.45}
.advanced-battery-assumptions{margin-top:14px!important;border-top:1px solid rgba(255,255,255,.08)!important;border-left:0!important;border-right:0!important;border-bottom:0!important;border-radius:0!important;background:transparent!important}
.advanced-battery-assumptions>summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:14px 0 0!important;list-style:none}.advanced-battery-assumptions>summary::-webkit-details-marker{display:none}.advanced-battery-assumptions>summary::after{content:"+";color:var(--accent);font-weight:850}.advanced-battery-assumptions[open]>summary::after{content:"−"}
.advanced-battery-assumptions>summary span{display:grid;gap:3px}.advanced-battery-assumptions>summary strong{font-size:.74rem}.advanced-battery-assumptions>summary small{color:var(--muted);font-size:.61rem;font-weight:400}.advanced-battery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:12px}
@media(max-width:1100px){.battery-preset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:720px){.battery-preset-heading{flex-direction:column;align-items:flex-start}.battery-preset-heading>p{text-align:left}.battery-preset-grid,.advanced-battery-grid{grid-template-columns:1fr}}


/* v4.3.1 — simplified battery selector */
.battery-preset-simple {
  padding: 14px;
}

.battery-preset-simple-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-end;
  margin-bottom: 12px;
}

.battery-preset-simple-heading h3 {
  margin: 0;
}

.battery-preset-simple-heading > p {
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  font-size: .66rem;
  text-align: right;
}

.battery-preset-select-label {
  display: grid;
  gap: 7px;
}

.battery-preset-select-label > span {
  color: var(--muted);
  font-size: .68rem;
}

.battery-preset-select-label select {
  width: 100%;
  min-height: 52px;
  padding: 0 42px 0 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: rgba(0,0,0,.14);
  color: var(--text);
  font: inherit;
  font-size: .78rem;
}

.battery-include-hidden {
  display: none !important;
}

@media (max-width: 720px) {
  .battery-preset-simple-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .battery-preset-simple-heading > p {
    text-align: left;
  }
}

/* v4.3.2 battery charging strategy */
.battery-strategy-section{margin:14px 0;padding:14px;border:1px solid rgba(114,184,255,.16);border-radius:12px;background:rgba(114,184,255,.025)}
.battery-strategy-heading{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:12px}.battery-strategy-heading h3{margin:0}.battery-strategy-heading>p{max-width:370px;margin:0;color:var(--muted);font-size:.66rem;text-align:right}
.battery-strategy-label{display:grid;gap:7px}.battery-strategy-label>span{color:var(--muted);font-size:.68rem}.battery-strategy-label select{width:100%;min-height:52px;padding:0 42px 0 14px;border:1px solid rgba(255,255,255,.10);border-radius:10px;background:rgba(0,0,0,.14);color:var(--text);font:inherit;font-size:.78rem}
.battery-strategy-note{margin:9px 0 0;color:var(--muted);font-size:.64rem;line-height:1.5}.custom-grid-share-field[hidden]{display:none!important}
@media(max-width:720px){.battery-strategy-heading{flex-direction:column;align-items:flex-start}.battery-strategy-heading>p{text-align:left}}


/* v4.3.3 — cleaner battery setup */
.battery-setup-card {
  margin: 0 0 14px;
  padding: 15px;
  border: 1px solid rgba(126,231,183,.16);
  border-radius: 12px;
  background: rgba(126,231,183,.025);
}

.battery-setup-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-end;
  margin-bottom: 13px;
}

.battery-setup-heading h3 {
  margin: 0;
}

.battery-setup-heading > p {
  max-width: 390px;
  margin: 0;
  color: var(--muted);
  font-size: .66rem;
  text-align: right;
}

.battery-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.battery-setup-field {
  display: grid;
  gap: 7px;
}

.battery-setup-field > span {
  color: var(--muted);
  font-size: .68rem;
}

.battery-setup-field select {
  width: 100%;
  min-height: 52px;
  padding: 0 42px 0 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: rgba(0,0,0,.14);
  color: var(--text);
  font: inherit;
  font-size: .76rem;
}

.battery-setup-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .64rem;
  line-height: 1.5;
}

.battery-core-grid {
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 10px;
}

.battery-core-grid .field,
.battery-core-grid .span-2 {
  grid-column: auto !important;
}

.advanced-battery-assumptions {
  margin-top: 14px !important;
  padding-top: 0 !important;
}

.advanced-battery-assumptions > summary {
  min-height: 50px;
  padding: 14px 0 !important;
}

@media (max-width: 720px) {
  .battery-setup-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .battery-setup-heading > p {
    text-align: left;
  }

  .battery-setup-grid,
  .battery-core-grid {
    grid-template-columns: 1fr !important;
  }
}


/* v4.3.4 — battery heading alignment */
.battery-setup-heading {
  display: block;
}

.battery-setup-heading > div {
  width: 100%;
}

.battery-setup-heading h3 {
  max-width: none;
  white-space: normal;
}

.battery-setup-heading > p {
  max-width: none;
  margin-top: 7px;
  text-align: left;
}