[hidden] { display: none !important; }

.calculator-page { padding-bottom: 86px; }
.tool-breadcrumb { display: flex; align-items: center; gap: 13px; padding-top: 27px; color: #829ca4; font-size: 11px; }
.tool-breadcrumb a { color: #c9d6d3; }
.tool-breadcrumb a:hover { color: var(--gold); }
.tool-breadcrumb span:nth-child(2) { color: #54717c; }
.calc-intro { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 48px; align-items: center; padding: 65px 0 66px; }
.calc-intro h1 { max-width: 790px; margin: 16px 0 22px; font-family: var(--font-display); font-size: clamp(49px, 5.3vw, 78px); line-height: 1.04; letter-spacing: -.048em; }
.calc-intro > div:first-child > p:last-child { max-width: 680px; margin-bottom: 0; color: #aec2c4; font-size: 15px; line-height: 1.75; }
.intro-mark { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 205px; padding: 28px; overflow: hidden; border: 1px solid rgba(242,181,68,.29); background: linear-gradient(140deg,#173f47,#0e2937 70%); box-shadow: 14px 18px 0 rgba(242,181,68,.035); }
.intro-mark::after { content: ""; position: absolute; width: 210px; height: 210px; right: -106px; top: -90px; border: 1px solid rgba(242,181,68,.34); border-radius: 50%; box-shadow: 0 0 0 31px rgba(242,181,68,.04), 0 0 0 61px rgba(242,181,68,.025); }
.intro-mark > span { color: var(--teal); font-size: 10px; font-weight: 750; letter-spacing: .18em; }
.intro-mark strong { display: block; margin: 14px 0 5px; color: var(--gold); font-family: var(--font-display); font-size: 63px; font-weight: 400; letter-spacing: -.07em; line-height: 1; }
.intro-mark strong span { font-size: 24px; letter-spacing: -.03em; }
.intro-mark small { color: #99b1b5; font-size: 11px; }
.snowball-mark strong { font-style: italic; }
.tool-switch { display: flex; gap: 0; margin-bottom: 17px; border-bottom: 1px solid rgba(248,244,234,.14); }
.tool-switch a { display: inline-flex; align-items: center; gap: 18px; min-height: 53px; padding: 9px 23px; border-bottom: 2px solid transparent; color: #8ea5aa; font-size: 12px; font-weight: 730; }
.tool-switch a:first-child { padding-left: 0; }
.tool-switch a.is-active { color: var(--paper); border-bottom-color: var(--gold); }
.tool-switch a:hover { color: var(--gold); }
.tool-switch a span { color: var(--gold); }

.calc-layout { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: 17px; align-items: start; }
.calc-panel { min-width: 0; border: 1px solid rgba(248,244,234,.11); background: var(--navy-2); }
.input-panel, .results-panel { min-height: 650px; padding: 32px; }
.calc-panel-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding-bottom: 24px; margin-bottom: 25px; border-bottom: 1px solid rgba(248,244,234,.11); }
.calc-panel-head h2, .chart-header h2 { margin: 8px 0 0; font-family: var(--font-display); font-size: clamp(28px,2.8vw,39px); font-weight: 400; letter-spacing: -.03em; line-height: 1.1; }
.panel-asterisk { color: rgba(242,181,68,.8); font-family: var(--font-display); font-size: 34px; line-height: 1; }
.result-light { width: 17px; height: 17px; margin-top: 12px; border: 1px solid var(--gold); border-radius: 50%; box-shadow: 0 0 0 6px rgba(242,181,68,.055); }
.calc-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px 13px; }
.calc-field { min-width: 0; }
.calc-field.field-featured { grid-column: 1 / -1; }
.calc-field label { display: block; margin-bottom: 8px; color: #c9d5d3; font-size: 11px; font-weight: 680; }
.calc-field input { display: block; width: 100%; height: 43px; padding: 8px 10px; border: 1px solid rgba(248,244,234,.2); border-radius: 2px; outline: none; background: #0b2633; color: var(--paper); font-size: 15px; font-variant-numeric: tabular-nums; }
.calc-field.field-featured input { height: 51px; font-size: 24px; }
.calc-field input:focus { border-color: var(--gold); }
.calc-field input[aria-invalid="true"] { border-color: #e8a297; }
.calc-field small { display: block; margin-top: 5px; color: #849ea6; font-size: 10px; line-height: 1.4; }
.input-prefix, .input-suffix { position: relative; display: block; }
.input-prefix > span, .input-suffix > span { position: absolute; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 14px; font-weight: 700; pointer-events: none; }
.input-prefix > span { left: 12px; }
.input-suffix > span { right: 12px; }
.input-prefix input { padding-left: 27px; }
.input-suffix input { padding-right: 29px; }
.help-mark { color: #789ca2; font-weight: 400; cursor: help; }
.calc-check { display: flex; align-items: flex-start; gap: 11px; margin-top: 26px; padding: 16px; border: 1px solid rgba(106,174,169,.24); background: rgba(106,174,169,.065); cursor: pointer; }
.calc-check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--gold); }
.calc-check strong, .calc-check small { display: block; }
.calc-check strong { font-size: 12px; }
.calc-check small { margin-top: 4px; color: #91a9ad; font-size: 10px; line-height: 1.5; }
.calc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 21px; }
.calc-actions .button { min-height: 39px; padding: 8px 12px; font-size: 11px; cursor: pointer; }
.calc-actions .button-outline { background: transparent; }
.input-footnote, .action-status { color: #8099a1; font-size: 10px; line-height: 1.55; }
.input-footnote { margin: 13px 0 0; }
.action-status { min-height: 17px; margin: 7px 0 0; color: var(--teal); }
.form-error { margin: 18px 0 0; }

.results-panel { background: linear-gradient(155deg,#183b47,#102b3a 45%,#0e2635); }
.hero-result { position: relative; min-height: 245px; padding: 28px; overflow: hidden; border: 1px solid rgba(242,181,68,.24); background: linear-gradient(135deg,rgba(242,181,68,.10),rgba(242,181,68,.025) 55%,transparent); }
.hero-result::after { content: ""; position: absolute; right: -90px; bottom: -148px; width: 285px; height: 285px; border: 1px solid rgba(242,181,68,.19); border-radius: 50%; box-shadow: 0 0 0 35px rgba(242,181,68,.025), 0 0 0 80px rgba(242,181,68,.015); pointer-events: none; }
.hero-result > span, .result-pair span, .result-grid span, .real-value > span { color: #a3bdbe; font-size: 10px; font-weight: 750; letter-spacing: .11em; line-height: 1.4; }
.hero-result strong { display: block; margin: 23px 0 12px; color: var(--gold); font-family: var(--font-display); font-size: clamp(52px,5.4vw,76px); font-weight: 400; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hero-result p { max-width: 440px; margin: 0; color: #b3c5c4; font-size: 11px; line-height: 1.65; }
.result-pair, .result-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin-top: 11px; }
.result-pair > div, .result-grid > div { min-height: 127px; padding: 18px; border: 1px solid rgba(248,244,234,.10); background: rgba(8,26,39,.32); }
.result-pair strong, .result-grid strong { display: block; margin-top: 18px; color: var(--paper); font-family: var(--font-display); font-size: clamp(25px,2.5vw,36px); font-weight: 400; line-height: 1.1; letter-spacing: -.035em; overflow-wrap: anywhere; }
.result-pair small { display: block; margin-top: 7px; color: #809ba2; font-size: 10px; line-height: 1.5; }
.stress-box { margin-top: 12px; padding: 21px; border-left: 2px solid var(--teal); background: rgba(106,174,169,.09); }
.stress-box > div { display: flex; gap: 15px; align-items: start; }
.stress-icon { color: var(--teal); font-size: 24px; line-height: 1; }
.stress-box strong { font-size: 12px; }
.stress-box p { margin: 6px 0 0; color: #b5c6c4; font-size: 11px; line-height: 1.6; }
.stress-box > p { margin: 12px 0 0 36px; color: #9bb7b7; }
.result-note { margin: 19px 0 0; color: #829fa6; font-size: 10px; line-height: 1.65; }
.result-grid > div { min-height: 111px; }
.result-grid strong { margin-top: 14px; font-size: clamp(23px,2.15vw,31px); }
.real-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px 20px; margin-top: 11px; padding: 17px 20px; background: rgba(106,174,169,.085); border: 1px solid rgba(106,174,169,.19); }
.real-value strong { margin-left: auto; color: var(--gold); font-family: var(--font-display); font-size: 28px; font-weight: 400; }
.real-value small { flex-basis: 100%; color: #829fa6; font-size: 10px; }

.chart-panel { margin-top: 17px; padding: 32px; }
.chart-header { display: flex; justify-content: space-between; gap: 24px; }
.chart-header p:not(.eyebrow) { margin: 12px 0 0; color: #9bb2b6; font-size: 12px; }
.chart-legend { display: flex; align-items: end; gap: 20px; color: #b9cdcc; font-size: 11px; white-space: nowrap; }
.chart-legend span { display: flex; align-items: center; gap: 7px; }
.chart-legend i { width: 16px; height: 3px; display: inline-block; }
.legend-drip { background: var(--gold); }
.legend-cash { background: var(--teal); }
.income-chart { margin-top: 32px; min-height: 210px; }
.income-chart svg { display: block; width: 100%; height: auto; min-height: 210px; }
.comparison-callout { display: flex; align-items: baseline; gap: 12px 30px; flex-wrap: wrap; margin-top: 10px; padding: 14px 0 20px; border-bottom: 1px solid rgba(248,244,234,.12); }
.comparison-callout > span { color: var(--paper); font-family: var(--font-display); font-size: 20px; }
.comparison-callout small { color: #91adb1; font-size: 11px; }
.year-details { margin-top: 10px; }
.year-details summary { display: flex; justify-content: space-between; gap: 15px; padding: 14px 0; color: var(--gold); font-size: 12px; font-weight: 700; cursor: pointer; list-style: none; }
.year-details summary::-webkit-details-marker { display: none; }
.year-table-wrap { overflow-x: auto; }
.year-table-wrap table { width: 100%; border-collapse: collapse; }
.year-table-wrap caption { padding: 8px 0; color: #8ea8ad; font-size: 11px; text-align: left; }
.year-table-wrap th, .year-table-wrap td { white-space: nowrap; text-align: right; }
.year-table-wrap th:first-child, .year-table-wrap td:first-child { text-align: left; }

.method-panel { display: grid; grid-template-columns: minmax(220px,.65fr) minmax(0,1.35fr); gap: 45px; padding: 86px 0 73px; }
.method-panel h2 { margin: 12px 0 0; font-family: var(--font-display); font-size: clamp(32px,3.3vw,47px); font-weight: 400; line-height: 1.08; letter-spacing: -.035em; }
.method-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.method-steps article { padding-top: 13px; border-top: 1px solid rgba(242,181,68,.42); }
.method-steps article > span { color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.method-steps h3 { margin: 16px 0 8px; font-family: var(--font-display); font-size: 22px; font-weight: 400; }
.method-steps p { margin: 0; color: #92aab0; font-size: 11px; line-height: 1.7; }
.next-tool { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 28px 32px; border: 1px solid rgba(242,181,68,.22); background: #102d3a; }
.next-tool h2 { margin: 8px 0 7px; font-family: var(--font-display); font-size: 27px; font-weight: 400; }
.next-tool p:last-child { margin-bottom: 0; color: #9fb6b9; font-size: 11px; }
.next-tool .button { white-space: nowrap; }

@media (max-width: 1060px) {
  .calc-intro { grid-template-columns: minmax(0,1fr) 200px; }
  .calc-layout { grid-template-columns: 1fr; }
  .input-panel, .results-panel { min-height: 0; }
  .calc-fields { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .calc-field.field-featured { grid-column: span 2; }
  .method-panel { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 760px) {
  .calculator-page { padding-bottom: 60px; }
  .calc-intro { grid-template-columns: 1fr; gap: 26px; padding: 55px 0 42px; }
  .intro-mark { min-height: 135px; max-width: 360px; }
  .intro-mark strong { font-size: 49px; }
  .calc-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .calc-field.field-featured { grid-column: 1 / -1; }
  .chart-header { display: block; }
  .chart-legend { margin-top: 22px; }
  .method-steps { gap: 15px; }
}
@media (max-width: 560px) {
  .tool-switch a { flex: 1; padding: 10px 8px; font-size: 10px; }
  .tool-switch a:first-child { padding-left: 0; }
  .input-panel, .results-panel, .chart-panel { padding: 21px; }
  .calc-fields { gap: 15px 10px; }
  .calc-field label { font-size: 10px; }
  .calc-intro h1 { font-size: 52px; }
  .hero-result { min-height: 210px; padding: 22px; }
  .hero-result strong { font-size: 55px; }
  .result-pair > div, .result-grid > div { padding: 13px; }
  .result-pair strong, .result-grid strong { font-size: 26px; }
  .real-value strong { margin-left: 0; }
  .method-steps { grid-template-columns: 1fr; gap: 24px; }
  .next-tool { display: block; padding: 25px; }
  .next-tool .button { margin-top: 23px; white-space: normal; }
}
@media (max-width: 420px) {
  .calc-fields { grid-template-columns: 1fr; }
  .calc-field.field-featured { grid-column: auto; }
  .calc-intro h1 { font-size: 46px; }
  .result-pair, .result-grid { grid-template-columns: 1fr 1fr; }
  .hero-result strong { font-size: 46px; }
}