/* Keep the ZIP content behind the rising water until the calculator has passed it. */
.zip-calculator-transition { position: relative; z-index: 1; background: #f9fafc; }
.zip-calculator-transition .zip-section { position: sticky; top: 0; }
.calculator-water { position: relative; z-index: 2; }
.calculator-panel { position: relative; margin-top: -1px; padding: 128px 24px 88px; background: var(--blue); }
.calculator-inner { width: min(100%, 960px); margin: 0 auto; }
.calculator-inner h2 { margin: 0; color: white; text-align: center; font-size: 48px; line-height: 56px; font-weight: 300; }
.calculator-description { margin: 22px auto 0; color: white; text-align: center; font-size: 20px; line-height: 28px; }
.calculator-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 74px; }
.household-card, .calculation-card { min-width: 0; min-height: 384px; border-radius: 24px; }
.household-card { padding: 31px 40px 32px; background: white; }
.household-card h3 { margin: 0 0 33px; font-size: 16px; line-height: 28px; color: var(--gray); font-weight: 500; }
.calculator-control + .calculator-control { margin-top: 23px; }
.calculator-label { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; height: 34px; }
.calculator-label label { font-size: 20px; line-height: 28px; font-weight: 600; }
.calculator-label output { font-size: 40px; line-height: 34px; font-weight: 600; }
.calculator-control input { display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 44px; margin: 13px 0 0; background: transparent; cursor: pointer; --range-fill: 33.333%; }
.calculator-control input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--black) var(--range-fill), #e8e8ef var(--range-fill)); }
.calculator-control input::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--black) var(--range-fill), #e8e8ef var(--range-fill)); }
.calculator-control input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 44px; height: 44px; margin-top: -19px; border: 0; background: url('../assets/images/calculator-thumb.svg') center / 44px 44px no-repeat; overflow: visible; }
.calculator-control input::-moz-range-thumb { width: 44px; height: 44px; border: 0; border-radius: 50%; background: url('../assets/images/calculator-thumb.svg') center / 44px 44px no-repeat; }
.household-note { margin: 27px 0 0; font-size: 16px; line-height: 28px; letter-spacing: -.16px; color: var(--gray); }
.calculation-card { padding: 89px 39px 32px; background: var(--black); color: white; }
.calculation-total { display: flex; gap: 6px; align-items: baseline; font-size: 120px; line-height: 144px; font-variant-numeric: tabular-nums; }
.calculation-unit { color: var(--gray); font-size: 16px; line-height: 28px; font-weight: 500; }
.calculation-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 20px; line-height: 28px; }
.calculation-summary img { flex: none; }
@media (max-width: 767px) {
  /* ZIP's 153px line sits below 74px of padding. Pin its center at quarter-screen
     while the following water layer continues scrolling over the section. */
  .zip-calculator-transition .zip-section { top: calc(25svh - 150.5px); }
  .calculator-water > .water-wave { height: 13.8889vw; }
  .calculator-panel { padding: 93px 24px 64px; }
  .calculator-inner { max-width: 354px; }
  .calculator-inner h2 { max-width: 100%; margin: 0 auto; font-size: clamp(32px, 9.45vw, 38px); line-height: 44px; }
  .calculator-inner h2 span { display: block; white-space: nowrap; }
  .calculator-description { max-width: 295px; margin-top: 15px; }
  .calculator-cards { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 58px; }
  .household-card { padding-inline: 32px; }
  .household-note { text-align: center; margin-inline: -8px; }
  .calculation-total { font-size: clamp(80px, 29.85vw, 120px); }
  .calculation-summary { font-size: 20px; gap: 6px; }
}