/* Loan calculator only. Public page and the signed-in loan page. */
.loan-public { padding: 36px 0 64px; }
.loan-public h1 { font-size: 36px; margin: 0 0 8px; }
.loan-public h2 { font-size: 22px; margin: 22px 0 8px; }
.loan-public p { margin: 0 0 12px; }
.loan-lead { color: var(--lp-muted, #667085); max-width: 40rem; margin: 0 0 18px; }
.loan-fields { display: grid; gap: 14px; max-width: 36rem; }
.loan-public label,
.loan-app label { display: grid; gap: 6px; font-weight: 650; }
.loan-public input,
.loan-public select {
  width: 100%;
  min-height: 44px;
  font: inherit;
  color: var(--lp-ink, #1d2939);
  background: #fff;
  border: 1px solid var(--lp-line, #e4ebf2);
  border-radius: 10px;
  padding: 10px 12px;
}
.loan-split { display: grid; grid-template-columns: 1fr 160px; gap: 12px; }
.loan-hint, .loan-note { color: #667085; font-size: 14px; }
.loan-public .error, .loan-results .error {
  color: #7a1f1f;
  background: #fff4f4;
  border: 1px solid #f0c8c8;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 650;
}
.loan-app { display: grid; gap: 12px; max-width: 40rem; }
.loan-results { display: grid; gap: 8px; margin-top: 8px; }
.loan-pay { font-size: 28px; font-weight: 750; color: #0b1f3a; margin: 0; }
.loan-save { color: #028a45; font-weight: 650; }
.loan-chart {
  width: 100%;
  max-width: 36rem;
  height: 18px;
  display: block;
  border-radius: 9px;
  background: #e4ebf2;
}
.loan-principal { fill: #02a452; }
.loan-interest { fill: #e39b2b; }
.loan-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; margin: 0; }
.loan-swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 2px;
  margin-right: 0.35rem;
}
.loan-swatch.principal { background: #02a452; }
.loan-swatch.interest { background: #e39b2b; }
.loan-schedule details { border-top: 1px solid #e4ebf2; padding: 8px 0; }
.loan-schedule summary { cursor: pointer; min-height: 44px; }
.loan-table-wrap { overflow-x: auto; }
.loan-schedule table { width: 100%; border-collapse: collapse; font-size: 14px; }
.loan-schedule th, .loan-schedule td { text-align: right; padding: 6px 8px; }
.loan-schedule th:first-child, .loan-schedule td:first-child { text-align: left; }
.loan-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.loan-saved { margin-top: 12px; }
.loan-saved p { margin: 6px 0; }
.loan-cta { margin-top: 28px; }
.loan-public button.lp-btn { font: inherit; font-weight: 750; font-size: 15px; cursor: pointer; }
@media (max-width: 719px) {
  .loan-public h1 { font-size: 30px; }
  .loan-split { grid-template-columns: 1fr; }
}