:root {
  --tool-navy: #0b1727;
  --tool-panel: #111f31;
  --tool-panel-soft: #17263a;
  --tool-teal: #20c7b5;
  --tool-teal-dark: #087f74;
  --tool-gold: #ffb84d;
  --tool-coral: #ff7378;
  --tool-blue: #6ea8ff;
  --tool-grid: rgba(132, 158, 183, 0.24);
}

.calculator-page {
  color: #0b1727;
  background:
    radial-gradient(circle at 6% 20%, rgba(32, 199, 181, 0.11), transparent 25rem),
    linear-gradient(180deg, #edf5f6 0, #f7fafb 45rem, #edf3f6 100%);
}

.calculator-header {
  position: sticky;
  top: 0;
  min-height: 4.75rem;
  padding-top: max(0.55rem, var(--safe-top));
  box-shadow: 0 1rem 3rem rgba(1, 12, 25, 0.12);
}

.calculator-header .public-site-nav a[aria-current="page"] {
  color: #65e7d6;
}

.calculator-main {
  width: min(92rem, 100%);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 4rem) clamp(4rem, 8vw, 7rem);
}

.calculator-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.34fr);
  align-items: center;
  min-height: 29rem;
  margin: clamp(1rem, 2vw, 2rem) 0 1rem;
  padding: clamp(2rem, 6vw, 5.5rem);
  overflow: hidden;
  border: 1px solid rgba(70, 228, 208, 0.16);
  border-radius: clamp(1.5rem, 3vw, 2.5rem);
  color: #f8fbff;
  background:
    radial-gradient(circle at 76% 10%, rgba(98, 119, 255, 0.22), transparent 30%),
    radial-gradient(circle at 10% 105%, rgba(32, 199, 181, 0.32), transparent 38%),
    linear-gradient(135deg, #102b32, #0b1727 60%, #11152a);
  box-shadow: 0 2.2rem 5rem rgba(7, 28, 42, 0.2);
}

.calculator-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(103, 148, 171, 0.17) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 148, 171, 0.17) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  mask-image: linear-gradient(90deg, #000, transparent 88%);
}

.calculator-hero > div:first-child {
  max-width: 57rem;
}

.calculator-hero .public-eyebrow {
  color: #65e7d6;
}

.calculator-hero h1 {
  max-width: 15ch;
  margin: 0.6rem 0 1rem;
  font-size: clamp(2.7rem, 6vw, 6.2rem);
  line-height: 0.92;
  letter-spacing: -0.065em;
}

.calculator-hero p:not(.public-eyebrow) {
  max-width: 50rem;
  margin: 0;
  color: #bfd0db;
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.65;
}

.calculator-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.65rem;
}

.calculator-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(108, 231, 215, 0.22);
  border-radius: 999px;
  color: #d5e6ec;
  background: rgba(10, 29, 42, 0.55);
  font-size: 0.76rem;
  font-weight: 760;
}

.hero-orbit {
  position: relative;
  width: clamp(12rem, 19vw, 19rem);
  aspect-ratio: 1;
  justify-self: end;
  border: 1px solid rgba(102, 231, 215, 0.32);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(32, 199, 181, 0.22), rgba(32, 199, 181, 0.03) 55%, transparent 56%);
  animation: toolFloat 5s ease-in-out infinite;
}

.hero-orbit::before,
.hero-orbit::after {
  content: "";
  position: absolute;
  border: 1px dashed rgba(141, 164, 255, 0.35);
  border-radius: 50%;
}

.hero-orbit::before { inset: 14%; }
.hero-orbit::after { inset: 30%; border-style: solid; }

.orbit-value {
  position: absolute;
  z-index: 2;
  inset: 50% auto auto 50%;
  display: grid;
  width: 4.4rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 1.35rem;
  color: #071a25;
  background: #54e0ce;
  box-shadow: 0 1rem 3rem rgba(32, 199, 181, 0.35);
  transform: translate(-50%, -50%) rotate(-5deg);
  font-size: 1.55rem;
  font-weight: 900;
}

.hero-orbit i {
  position: absolute;
  width: 0.75rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffbc58;
  box-shadow: 0 0 1.5rem rgba(255, 188, 88, 0.8);
}

.hero-orbit i:nth-of-type(1) { top: 8%; left: 49%; }
.hero-orbit i:nth-of-type(2) { right: 12%; bottom: 22%; width: 0.5rem; background: #758dff; }
.hero-orbit i:nth-of-type(3) { left: 8%; bottom: 32%; width: 0.4rem; background: #54e0ce; }

.tool-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  max-width: 48rem;
  margin: 1.15rem auto 2rem;
  padding: 0.4rem;
  border: 1px solid #d3e0e7;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 1rem 2.5rem rgba(32, 54, 70, 0.08);
}

.tool-switcher a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4rem;
  gap: 0.65rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  color: #536478;
  font-size: 0.88rem;
  font-weight: 780;
  text-decoration: none;
}

.tool-switcher a span { color: #8595a5; font-size: 0.7rem; letter-spacing: 0.08em; }
.tool-switcher a.active { color: #062d31; background: #d9faf5; box-shadow: inset 0 0 0 1px #68dccc; }
.tool-switcher a.active span { color: #087f74; }

.calculator-shell {
  display: grid;
  grid-template-columns: minmax(20rem, 0.74fr) minmax(0, 1.26fr);
  align-items: start;
  gap: clamp(1rem, 2vw, 1.6rem);
}

.calculator-form,
.calculator-results {
  min-width: 0;
  border: 1px solid #d5e2e9;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1.5rem 4rem rgba(20, 45, 61, 0.1);
}

.calculator-form {
  position: sticky;
  top: 6rem;
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.calculator-panel-heading { margin-bottom: 1.5rem; }
.calculator-panel-heading h2 { margin: 0.35rem 0 0.5rem; font-size: clamp(1.5rem, 2.5vw, 2.15rem); letter-spacing: -0.035em; }
.calculator-panel-heading p:last-child { margin: 0; color: #657589; line-height: 1.55; }

.calculator-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.calculator-field {
  display: grid;
  min-width: 0;
  gap: 0.48rem;
  color: #233247;
  font-size: 0.84rem;
  font-weight: 780;
}

.calculator-field.full,
.calculator-choice.full { grid-column: 1 / -1; }
.calculator-field > small { color: #758598; font-size: 0.72rem; font-weight: 580; line-height: 1.45; }
.calculator-field > span em { color: #6f8093; font-size: 0.72rem; font-style: normal; font-weight: 650; }
.calculator-field > .calculator-field-error { color: #a72c39; font-weight: 750; }
.calculator-field > .calculator-field-error[hidden] { display: none; }

.calculator-field input,
.calculator-field select,
.money-input,
.suffix-input {
  width: 100%;
  min-width: 0;
  min-height: 3.25rem;
  border: 1px solid #c7d5df;
  border-radius: 0.75rem;
  color: #101c2c;
  background: #fbfdff;
}

.calculator-field > input,
.calculator-field > select { padding: 0.75rem 0.85rem; }

.money-input,
.suffix-input {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.money-input:focus-within,
.suffix-input:focus-within,
.calculator-field > input:focus,
.calculator-field > select:focus {
  border-color: #19aa9a;
  box-shadow: 0 0 0 3px rgba(32, 199, 181, 0.15);
}

.money-input b,
.suffix-input b {
  flex: 0 0 auto;
  padding: 0 0.8rem;
  color: #087f74;
  font-size: 0.82rem;
}

.money-input input,
.suffix-input input {
  min-height: 3.15rem;
  padding: 0.7rem 0.75rem 0.7rem 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 1rem;
  font-weight: 800;
}

.suffix-input input { padding-left: 0.8rem; }

.calculator-choice {
  display: flex;
  align-items: flex-start;
  min-height: 4rem;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid #c8e8e2;
  border-radius: 0.8rem;
  background: #edfbf8;
}

.calculator-choice input { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; margin: 0.12rem 0 0; accent-color: #0b9c8e; }
.calculator-choice span { display: grid; gap: 0.2rem; }
.calculator-choice strong { color: #17313b; font-size: 0.84rem; }
.calculator-choice small { color: #557077; font-size: 0.72rem; line-height: 1.45; }

.tax-compare-toggle { border-style: dashed; background: #f7fbfc; }
.tax-compare-toggle:has(input:checked) { border-style: solid; border-color: #75d9cc; background: #edfbf8; }

.tax-comparison-input-group {
  display: grid;
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 1rem;
  border: 1px solid #a9ddd6;
  border-radius: 0.9rem;
  background: #f5fcfa;
}

.tax-comparison-input-group[hidden] { display: none; }
.tax-comparison-input-group legend { padding: 0 0.4rem; color: #087f74; font-size: 0.78rem; font-weight: 850; }

.strategy-fields {
  min-width: 0;
  margin: 1.25rem 0 0;
  padding: 1rem;
  border: 1px solid #aedfd7;
  border-radius: 1rem;
  background: linear-gradient(135deg, #eafbf7, #f8fcfd);
}

.strategy-fields legend { padding: 0 0.45rem; color: #087f74; font-weight: 850; }
.strategy-fields > p { margin: 0 0 1rem; color: #5a6e76; font-size: 0.76rem; line-height: 1.5; }

.calculator-form-actions { display: flex; gap: 0.75rem; margin-top: 1.35rem; }
.calculator-form-actions .public-button { flex: 1 1 0; min-width: 0; }
.form-privacy-note { display: flex; gap: 0.5rem; margin: 1rem 0 0; color: #718295; font-size: 0.72rem; line-height: 1.5; }
.form-privacy-note span { color: #17aa9a; }

.calculator-results {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.result-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 16rem;
  gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
  border-radius: 1.2rem;
  color: #f7fbff;
  background:
    radial-gradient(circle at 90% 15%, rgba(77, 222, 204, 0.18), transparent 28%),
    linear-gradient(135deg, #0d2630, #0b1727 65%);
}

.result-kicker { margin: 0 0 0.55rem; color: #60dfcf; font-size: 0.76rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.result-hero h2 { display: grid; margin: 0; font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 0.95; letter-spacing: -0.055em; }
.result-hero h2 small { margin-top: 0.5rem; color: #aebfcd; font-size: 0.9rem; font-weight: 680; letter-spacing: 0; }
.result-hero > div:first-child > p:last-child { max-width: 40rem; margin: 1rem 0 0; color: #b9cbd6; line-height: 1.5; }

.tax-donut-wrap { position: relative; width: clamp(8.5rem, 16vw, 11rem); aspect-ratio: 1; }
.tax-donut { display: block; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.tax-donut circle { fill: none; stroke-width: 12; }
.donut-track { stroke: rgba(148, 169, 188, 0.15); }
.donut-segment { stroke-linecap: butt; transition: stroke-dasharray 420ms ease, stroke-dashoffset 420ms ease; }
.donut-segment.take-home { stroke: var(--tool-teal); }
.donut-segment.income-tax { stroke: var(--tool-coral); }
.donut-segment.medicare { stroke: var(--tool-gold); }
.tax-donut-wrap > span,
.payoff-ring > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.tax-donut-wrap strong,
.payoff-ring strong { color: #f8fbff; font-size: 1.35rem; }
.tax-donut-wrap small,
.payoff-ring small { color: #9db0c0; font-size: 0.65rem; }

.result-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.result-metrics article { display: grid; align-content: space-between; min-width: 0; min-height: 6.6rem; gap: 0.7rem; padding: 1rem; border: 1px solid #d4e0e7; border-radius: 1rem; background: #f8fbfd; }
.result-metrics span { color: #718196; font-size: 0.68rem; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; }
.result-metrics strong { overflow-wrap: anywhere; color: #152337; font-size: clamp(1rem, 1.8vw, 1.35rem); letter-spacing: -0.025em; }
.result-metrics article.positive { border-color: #9fe0d6; background: #e8faf6; }
.result-metrics article.positive strong { color: #087f74; }

.tax-income-comparison-card { border-color: #a9d8d2; background: #f6fbfb; }
.tax-income-comparison-card[hidden] { display: none; }
.tax-income-comparison-summary { margin: -0.25rem 0 1rem; color: #3b5062; font-size: 0.82rem; font-weight: 650; line-height: 1.55; }

.tax-income-scenarios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.tax-income-scenario {
  min-width: 0;
  padding: 0.95rem;
  border: 1px solid #b8c7d2;
  border-radius: 0.85rem;
  background: #fff;
}

.tax-income-scenario.baseline { border-style: dashed; }
.tax-income-scenario.comparison { border-color: #47bbae; box-shadow: inset 0.22rem 0 #19aa9a; }
.tax-income-scenario > div:first-child { display: flex; align-items: baseline; justify-content: space-between; min-width: 0; gap: 0.65rem; padding-bottom: 0.75rem; border-bottom: 1px solid #dce5ea; }
.tax-income-scenario > div:first-child span,
.tax-income-scenario dt,
.tax-income-deltas dt { color: #6d7e91; font-size: 0.66rem; font-weight: 850; letter-spacing: 0.055em; text-transform: uppercase; }
.tax-income-scenario > div:first-child strong { overflow-wrap: anywhere; color: #152337; font-size: clamp(1rem, 2vw, 1.35rem); }
.tax-income-scenario dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 0.8rem 0 0; }
.tax-income-scenario dl > div { min-width: 0; }
.tax-income-scenario dd { margin: 0.25rem 0 0; overflow-wrap: anywhere; color: #223449; font-size: 0.82rem; font-weight: 800; }

.tax-take-home-visual {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.9rem;
  padding: 0.9rem;
  border: 1px solid #d1dde4;
  border-radius: 0.85rem;
  background: #fff;
}

.tax-take-home-visual-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.tax-take-home-visual-heading span { color: #26394d; font-size: 0.78rem; font-weight: 850; }
.tax-take-home-visual-heading small { color: #78889a; font-size: 0.66rem; font-weight: 650; }
.tax-take-home-row { display: grid; grid-template-columns: 5.25rem minmax(2rem, 1fr) auto; align-items: center; gap: 0.55rem; }
.tax-take-home-row > span { color: #687a8d; font-size: 0.68rem; font-weight: 800; }
.tax-take-home-row > div { height: 0.75rem; overflow: hidden; border-radius: 0.2rem; background: #e8eef2; }
.tax-take-home-row i { display: block; box-sizing: border-box; height: 100%; transition: width 320ms ease; }
.tax-take-home-row.baseline i { border: 2px dashed #718398; background: transparent; }
.tax-take-home-row.comparison i { background: #19aa9a; }
.tax-take-home-row strong { min-width: 4.8rem; color: #203247; font-size: 0.76rem; text-align: right; }
.tax-take-home-axis { display: flex; justify-content: space-between; margin-left: 5.8rem; color: #8493a3; font-size: 0.62rem; font-weight: 700; }

.tax-income-deltas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0.75rem 0 0;
}

.tax-income-deltas > div { min-width: 0; padding: 0.75rem; border: 1px solid #d5e0e6; border-radius: 0.7rem; background: #fff; }
.tax-income-deltas dd { margin: 0.35rem 0 0; overflow-wrap: anywhere; color: #153548; font-size: clamp(0.9rem, 1.8vw, 1.08rem); font-weight: 850; }

.tax-balance-card { border-color: #b8d7dc; background: linear-gradient(135deg, #f4fbfb, #f7f9ff); }
.tax-balance-card[hidden] { display: none; }
.tax-balance-card[data-outcome="refund"] { border-color: #78d4c7; background: linear-gradient(135deg, #e5faf6, #f5fbff); }
.tax-balance-card[data-outcome="owing"] { border-color: #efadb1; background: linear-gradient(135deg, #fff2f2, #fff9f4); }
.tax-balance-card[data-outcome="even"] { border-color: #aebee8; background: linear-gradient(135deg, #eef3ff, #f5fbff); }
.tax-balance-card[data-outcome="refund"] .visual-card-heading > span { color: #087f74; }
.tax-balance-card[data-outcome="owing"] .visual-card-heading > span { color: #ad3340; }
.tax-balance-card[data-outcome="even"] .visual-card-heading > span { color: #5067a7; }
.tax-balance-layout { display: grid; grid-template-columns: minmax(11rem, 0.85fr) minmax(14rem, 1.15fr); gap: 0.75rem; }
.tax-balance-figure,
.tax-balance-breakdown > div { display: grid; min-width: 0; gap: 0.35rem; padding: 1rem; border: 1px solid rgba(111, 137, 159, 0.24); border-radius: 0.8rem; background: rgba(255, 255, 255, 0.75); }
.tax-balance-figure { align-content: center; }
.tax-balance-figure > span,
.tax-balance-breakdown dt { color: #6b7d91; font-size: 0.69rem; font-weight: 850; letter-spacing: 0.055em; text-transform: uppercase; }
.tax-balance-figure strong { overflow-wrap: anywhere; color: #132339; font-size: clamp(1.8rem, 4vw, 2.8rem); letter-spacing: -0.045em; }
.tax-balance-card[data-outcome="refund"] .tax-balance-figure strong { color: #087f74; }
.tax-balance-card[data-outcome="owing"] .tax-balance-figure strong { color: #ad3340; }
.tax-balance-card[data-outcome="even"] .tax-balance-figure strong { color: #5067a7; }
.tax-balance-breakdown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; margin: 0; }
.tax-balance-breakdown dd { margin: 0; overflow-wrap: anywhere; color: #152337; font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 850; }
.tax-balance-explanation { margin: 1rem 0 0; color: #33475a; font-size: 0.86rem; font-weight: 680; line-height: 1.55; }
.tax-balance-caveat { margin: 0.85rem 0 0; padding-top: 0.85rem; border-top: 1px solid rgba(112, 138, 158, 0.22); color: #6c7d8f; font-size: 0.72rem; line-height: 1.55; }
.tax-balance-caveat strong { color: #42556b; }

.visual-card {
  min-width: 0;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid #d6e1e8;
  border-radius: 1rem;
  background: #f8fbfd;
}

.visual-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.visual-card-heading h3 { margin: 0.25rem 0 0; color: #152337; font-size: 1.15rem; letter-spacing: -0.025em; }
.visual-card-heading > span { flex: 0 0 auto; color: #087f74; font-size: 0.78rem; font-weight: 850; }

.allocation-bar { display: flex; width: 100%; height: 2.1rem; overflow: hidden; border-radius: 0.6rem; background: #e0e8ed; }
.allocation-bar i { min-width: 0; transition: flex-basis 420ms ease; }
.allocation-bar .kept { background: var(--tool-teal); }
.allocation-bar .tax { background: var(--tool-coral); }
.allocation-bar .levy { background: var(--tool-gold); }

.chart-legend { display: flex; flex-wrap: wrap; gap: 0.75rem 1.2rem; margin-top: 0.8rem; color: #627387; font-size: 0.72rem; font-weight: 720; }
.chart-legend span { display: inline-flex; align-items: center; gap: 0.42rem; }
.chart-legend span::before { content: ""; width: 0.75rem; height: 0.22rem; border-radius: 999px; background: currentColor; }
.chart-legend .kept,
.chart-legend .strategy { color: #0d9d8f; }
.chart-legend .tax { color: #d6535a; }
.chart-legend .levy { color: #c67d12; }
.chart-legend .baseline { color: #75869c; }
.chart-legend .baseline::before { height: 0; border-top: 2px dashed currentColor; background: none; }

.period-grid,
.stress-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; }
.period-grid article,
.stress-grid article { display: grid; gap: 0.35rem; min-width: 0; padding: 0.85rem; border: 1px solid #d8e3e9; border-radius: 0.75rem; background: #fff; }
.period-grid span,
.stress-grid span { color: #718196; font-size: 0.69rem; font-weight: 800; }
.period-grid strong,
.stress-grid strong { color: #152337; font-size: clamp(0.95rem, 2vw, 1.2rem); overflow-wrap: anywhere; }
.stress-grid small { color: #bd4e57; font-weight: 750; }

.bracket-chart { display: grid; gap: 0.7rem; }
.bracket-row { display: grid; grid-template-columns: minmax(7rem, 0.6fr) minmax(8rem, 1fr) auto; align-items: center; gap: 0.8rem; }
.bracket-row span { color: #617286; font-size: 0.72rem; font-weight: 700; }
.bracket-row progress { width: 100%; height: 0.75rem; overflow: hidden; border: 0; border-radius: 999px; background: #e3eaf0; }
.bracket-row progress::-webkit-progress-bar { border-radius: 999px; background: #e3eaf0; }
.bracket-row progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #18b5a4, #6d89ff); }
.bracket-row progress::-moz-progress-bar { border-radius: 999px; background: #18b5a4; }
.bracket-row strong { color: #172438; font-size: 0.78rem; }

.analysis-callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; padding: 1.1rem; border: 1px solid #8edbd0; border-radius: 1rem; color: #123b3d; background: linear-gradient(135deg, #dff9f4, #edf8ff); }
.analysis-callout > span { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: 0.75rem; color: #061e28; background: #53ddcb; }
.analysis-callout p { margin: 0; line-height: 1.55; }
.analysis-callout strong { color: #087f74; }

.payoff-ring { position: relative; width: clamp(8rem, 15vw, 10rem); aspect-ratio: 1; border: 0.75rem solid rgba(32, 199, 181, 0.18); border-top-color: var(--tool-teal); border-right-color: #7189ff; border-radius: 50%; transform: rotate(8deg); }
.payoff-ring > span { transform: rotate(-8deg); }
.payoff-ring strong { font-size: 2rem; }

.mortgage-chart { display: block; width: 100%; min-height: 18rem; overflow: visible; }
.chart-grid line { stroke: #d5e0e7; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-labels text { fill: #6c7c8f; font-size: 11px; font-weight: 650; }
.balance-line { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: d 420ms ease; }
.balance-line.baseline { stroke: #78899c; stroke-dasharray: 8 7; }
.balance-line.strategy { stroke: var(--tool-teal); }
.strategy-area { fill: url(#strategyAreaGradient); stroke: none; transition: d 420ms ease; }

.principal-interest-visual { display: grid; gap: 0.8rem; }
.principal-interest-bar { display: flex; width: 100%; height: 1.15rem; overflow: hidden; border-radius: 999px; background: #e1e9ee; }
.principal-interest-bar i { background: var(--tool-teal); }
.principal-interest-bar b { background: var(--tool-gold); }
.principal-interest-visual > div:last-child { display: flex; justify-content: space-between; gap: 1rem; color: #647589; font-size: 0.74rem; }
.principal-interest-visual strong { color: #162438; }

.schedule-details { border: 1px solid #d5e1e8; border-radius: 1rem; background: #f8fbfd; }
.schedule-details summary { min-height: 3.2rem; padding: 1rem; cursor: pointer; color: #173041; font-weight: 820; }
.table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.schedule-details table { width: 100%; min-width: 34rem; border-collapse: collapse; }
.schedule-details caption { padding: 0 1rem 0.7rem; color: #6c7d90; text-align: left; font-size: 0.75rem; }
.schedule-details th,
.schedule-details td { padding: 0.75rem 1rem; border-top: 1px solid #dce5eb; text-align: right; font-size: 0.78rem; }
.schedule-details th:first-child,
.schedule-details td:first-child { text-align: left; }
.schedule-details th { color: #617286; background: #f2f7fa; }

.calculator-content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 5vw, 4.5rem); }
.calculator-content-grid article,
.methodology-card { min-width: 0; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid #d2dfe7; border-radius: 1.4rem; background: rgba(255, 255, 255, 0.78); }
.calculator-content-grid h2,
.methodology-card h2 { margin: 0.4rem 0 0.85rem; font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: -0.045em; }
.calculator-content-grid article > p:last-child,
.methodology-card > p { color: #5e7084; line-height: 1.7; }

.methodology-card { display: grid; grid-template-columns: minmax(14rem, 0.6fr) minmax(18rem, 1fr); gap: 1rem 2rem; margin-top: 1rem; }
.methodology-card > .source-links,
.methodology-card > .calculator-disclaimer { grid-column: 1 / -1; }
.source-links { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.source-links a { display: inline-flex; min-height: 2.65rem; align-items: center; padding: 0.65rem 0.85rem; border: 1px solid #acdcd5; border-radius: 0.7rem; color: #087f74; background: #eafaf7; font-size: 0.78rem; font-weight: 780; text-decoration: none; }
.calculator-disclaimer { margin: 0; padding-top: 1rem; border-top: 1px solid #d9e3e9; font-size: 0.82rem; }

.calculator-footer { flex-wrap: wrap; }

@keyframes toolFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-0.7rem) rotate(3deg); }
}

@media (max-width: 1080px) {
  .calculator-shell { grid-template-columns: 1fr; }
  .calculator-form { position: static; }
  .result-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .calculator-header .public-site-nav a:not(.public-nav-login) { display: none; }
  .calculator-main { padding-inline: max(0.85rem, var(--safe-left)); }
  .calculator-hero { grid-template-columns: 1fr; min-height: 25rem; padding: 2rem 1.25rem; }
  .calculator-hero h1 { font-size: clamp(2.7rem, 13vw, 4.7rem); }
  .hero-orbit { position: absolute; z-index: -1; right: -3rem; bottom: -4rem; width: 14rem; opacity: 0.55; }
  .tool-switcher a { font-size: 0.78rem; }
  .calculator-content-grid,
  .methodology-card { grid-template-columns: 1fr; }
  .tax-income-deltas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .methodology-card > .source-links,
  .methodology-card > .calculator-disclaimer { grid-column: auto; }
}

@media (max-width: 560px) {
  .calculator-main { padding-inline: 0.65rem; }
  .calculator-header { padding-inline: 1rem; }
  .calculator-header .public-brand small { display: none; }
  .calculator-hero { margin-top: 0.65rem; border-radius: 1.2rem; }
  .calculator-badges span:nth-child(3) { display: none; }
  .tool-switcher { margin-bottom: 1rem; }
  .tool-switcher a { flex-direction: column; gap: 0.15rem; text-align: center; }
  .calculator-form,
  .calculator-results { border-radius: 1rem; }
  .calculator-fields { grid-template-columns: 1fr; }
  .calculator-field.full,
  .calculator-choice.full { grid-column: auto; }
  .calculator-form-actions { flex-direction: column; }
  .calculator-form-actions .public-button { width: 100%; }
  .result-hero { grid-template-columns: 1fr; min-height: 0; padding: 1.35rem; }
  .tax-donut-wrap,
  .payoff-ring { width: 8rem; justify-self: start; }
  .result-metrics { gap: 0.55rem; }
  .result-metrics article { min-height: 5.7rem; padding: 0.8rem; }
  .period-grid,
  .stress-grid { grid-template-columns: 1fr; }
  .tax-income-scenarios { grid-template-columns: 1fr; }
  .tax-balance-layout,
  .tax-balance-breakdown { grid-template-columns: 1fr; }
  .bracket-row { grid-template-columns: 1fr auto; gap: 0.35rem 0.75rem; }
  .bracket-row progress { grid-column: 1 / -1; grid-row: 2; }
  .visual-card-heading { flex-direction: column; }
  .tax-take-home-visual-heading { align-items: flex-start; flex-direction: column; gap: 0.2rem; }
  .tax-take-home-row { grid-template-columns: 4.7rem minmax(2rem, 1fr) auto; gap: 0.4rem; }
  .tax-take-home-row strong { min-width: 4.4rem; font-size: 0.7rem; }
  .tax-take-home-axis { margin-left: 5.1rem; }
  .principal-interest-visual > div:last-child { flex-direction: column; gap: 0.35rem; }
  .mortgage-chart { min-height: 14rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-orbit { animation: none; }
  .donut-segment,
  .allocation-bar i,
  .tax-take-home-row i,
  .balance-line,
  .strategy-area { transition: none; }
}