/* Financial typography.
   The result card asks for Inter, which this site never loads (only Manrope
   and Source Sans 3 are fetched), so every figure was silently falling back
   to Arial / Microsoft YaHei. Route figures to Manrope, which is already
   downloaded, and give them tabular lining numerals so money columns align. */
#calculator .comparison,
#calculator .compare-pill,
#calculator .result-brand,
#calculator .summary-grid b,
#calculator .output b,
#calculator .abacus-schedule td,
#calculator .abacus-schedule th,
#calculator .abacus-forms input,
#calculator .abacus-forms select {
  font-family: "Manrope", "Aptos Display", "Segoe UI", "Microsoft YaHei", sans-serif;
}

#calculator .summary-grid b,
#calculator .compare-pill,
#calculator .compare-pill strong,
#calculator .output b,
#calculator .contact-mini-copy a,
#calculator .abacus-forms input,
#calculator .abacus-schedule th,
#calculator .abacus-schedule td {
  font-variant-numeric: tabular-nums lining-nums;
}

#calculator .summary-grid b {
  letter-spacing: -.025em;
}

/* Amortization schedule: zebra rows so a 360-row money table stays scannable. */
#calculator .abacus-schedule tbody tr:nth-child(even) {
  background: #fafcf5;
}

#calculator .abacus-schedule tbody tr:hover {
  background: #f2f8e2;
}

#calculator .abacus-schedule td {
  font-size: 15px;
}

/* Derived fields are results, not inputs: tint them and mark them with a
   lime edge so the eye stops trying to type into them. */
#calculator .abacus-forms input[readonly] {
  background: #f4f7ef;
  border-color: #dde5d5;
  border-left: 3px solid #bfe25a;
}

/* Currency / percent adornments. A uniform field height gives the ::after
   marker something to anchor to, since the input is the label's last child. */
#calculator .abacus-forms input,
#calculator .abacus-forms select {
  height: 48px;
}

#calculator .abacus-grid label {
  position: relative;
  display: block;
}

#calculator .abacus-grid label[data-unit]::after {
  position: absolute;
  bottom: 0;
  height: 48px;
  display: flex;
  align-items: center;
  color: #8b98a7;
  font-weight: 700;
  pointer-events: none;
}

#calculator .abacus-grid label[data-unit="$"]::after { content: "$"; left: 14px; }
#calculator .abacus-grid label[data-unit="$"] input { padding-left: 30px; }
#calculator .abacus-grid label[data-unit="%"]::after { content: "%"; right: 15px; }
#calculator .abacus-grid label[data-unit="%"] input { padding-right: 34px; }

/* The steppers would sit on top of the % marker, and 0.001 increments are of
   no use on a rate field anyway. */
#calculator .abacus-grid label[data-unit="%"] input { -moz-appearance: textfield; }
#calculator .abacus-grid label[data-unit="%"] input::-webkit-outer-spin-button,
#calculator .abacus-grid label[data-unit="%"] input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Result card hierarchy: the monthly payment is the headline, the other three
   are supporting figures. English and Spanish only — the Chinese homepage
   already ships its own tuned version of this (50px hero + lime rule + 17-20px
   figures). Those figures are white-space:nowrap, so enlarging them there
   widens the grid's min-content past the viewport and the page scrolls
   sideways on a phone. */
html[lang="en"] #calculator .summary-grid > div:first-child b,
html[lang="es"] #calculator .summary-grid > div:first-child b { font-size: 44px; }

html[lang="en"] #calculator .summary-grid > div:not(:first-child) b,
html[lang="es"] #calculator .summary-grid > div:not(:first-child) b { font-size: 25px; color: #2c4058; }

@media (max-width: 850px) {
  html[lang="en"] #calculator .summary-grid > div:first-child b,
  html[lang="es"] #calculator .summary-grid > div:first-child b { font-size: 36px; }

  html[lang="en"] #calculator .summary-grid > div:not(:first-child) b,
  html[lang="es"] #calculator .summary-grid > div:not(:first-child) b { font-size: 22px; }
}

@media (max-width: 560px) {
  #calculator .compare-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 20px 16px;
  }

  #calculator .compare-pill {
    display: flex !important;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.35;
  }

  #calculator .compare-pill + .compare-pill::before {
    content: none !important;
    display: none !important;
  }

  #calculator .compare-pill > span {
    order: 1;
  }

  #calculator .compare-pill > strong {
    order: 2;
    max-width: 100%;
    margin-left: 7px;
    padding-inline: 5px;
    white-space: nowrap;
    font-size: 18px;
  }

  #calculator .circled::before {
    inset: -6px -8px;
  }

  #calculator .circled::after {
    inset: -4px -10px;
  }
}