.loan-fit { --lf-navy: #172d78; --lf-teal: #0f766e; --lf-muted: #4b5e7e; margin: 28px 0 40px; padding: clamp(18px, 3vw, 32px); border: 1px solid #cee5e3; border-radius: 22px; background: #f1f8f8; color: var(--lf-navy); scroll-margin-top: 100px; }
.loan-fit [hidden] { display: none !important; }
.loan-fit *, .loan-fit *::before, .loan-fit *::after { box-sizing: border-box; }
.loan-fit h2 { margin: 0 0 12px; font-size: clamp(24px, 3vw, 32px); line-height: 1.25; }
.loan-fit h3 { margin: 0 0 14px; font-size: 23px; line-height: 1.35; }
.loan-fit p { line-height: 1.6; }
.loan-fit .lf-eyebrow { margin: 0 0 10px; color: var(--lf-teal); font-size: 12px; font-weight: 800; letter-spacing: .07em; }
.loan-fit .lf-intro { max-width: 820px; color: var(--lf-muted); }
.loan-fit :is(button, input, select, a, h3):focus-visible { outline: 3px solid var(--lf-navy); outline-offset: 4px; }
.loan-fit :is(button, select) { cursor: pointer; }
.loan-fit :is(button, input, select) { font: inherit; }
.loan-fit button, .loan-fit .lf-action, .loan-fit .lf-text-link { min-height: 44px; }
.loan-fit .lf-presets { margin: 22px 0; }
.loan-fit .lf-presets > p { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.loan-fit .lf-presets > div { display: flex; flex-wrap: wrap; gap: 10px; }
.loan-fit .lf-preset { padding: 10px 13px; border: 1px solid #beced7; border-radius: 10px; background: #fff; color: var(--lf-navy); text-align: left; font-size: 14px; line-height: 1.45; }
.loan-fit .lf-fields { display: grid; grid-template-columns: .85fr 1.15fr 1fr; gap: 16px; }
.loan-fit .lf-field { min-width: 0; }
.loan-fit .lf-field label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 700; }
.loan-fit .lf-field :is(input, select) { display: block; width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid #9db5c4; border-radius: 9px; background: #fff; color: var(--lf-navy); font-size: 16px; }
.loan-fit .lf-field small { display: block; margin-top: 7px; font-size: 12px; line-height: 1.5; color: var(--lf-muted); }
.loan-fit .lf-field [aria-invalid="true"] { border-color: #a04127; }
.loan-fit .lf-error { margin: 8px 0 0; color: #8a311b; font-size: 14px; }
.loan-fit .lf-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.loan-fit .lf-submit, .loan-fit .lf-reset { padding: 11px 16px; border: 1px solid var(--lf-teal); border-radius: 10px; background: var(--lf-teal); color: #fff; font-weight: 700; line-height: 1.4; }
.loan-fit .lf-reset { border-color: #bdcdd5; background: #fff; color: var(--lf-navy); }
.loan-fit .lf-local, .loan-fit .lf-form-status { color: var(--lf-muted); font-size: 13px; }
.loan-fit .lf-form-status:empty { display: none; }
.loan-fit .lf-results { margin-top: 25px; padding-top: 23px; border-top: 1px solid #c8dbdf; }
.loan-fit .lf-results h3 { scroll-margin-top: 100px; }
.loan-fit .lf-results > p { color: var(--lf-muted); font-size: 14px; }
.loan-fit .lf-provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.loan-fit .lf-provider { min-width: 0; padding: 20px; border: 1px solid #ccdae2; border-radius: 14px; background: #fff; }
.loan-fit .lf-provider.lf-matches { border: 2px solid var(--lf-teal); padding: 19px; }
.loan-fit .lf-provider h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; font-size: 21px; line-height: 1.4; }
.loan-fit .lf-fit-state { font-size: 15px; font-weight: 700; }
.loan-fit .lf-matches .lf-fit-state { color: var(--lf-teal); }
.loan-fit .lf-reasons { margin: 10px 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.loan-fit .lf-range { font-size: 14px; }
.loan-fit .lf-note { color: var(--lf-muted); font-size: 13px; }
.loan-fit .lf-action { display: flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; gap: 6px; margin-top: 14px; padding: 10px 13px; border: 1px solid var(--lf-teal); border-radius: 9px; color: var(--lf-teal); background: #fff; text-decoration: none; font-size: 14px; line-height: 1.5; font-weight: 700; overflow-wrap: anywhere; }
.loan-fit .lf-primary { background: var(--lf-teal); color: #fff; }
.loan-fit .lf-text-link { display: inline-flex; align-items: center; margin-top: 6px; color: var(--lf-navy); font-size: 13px; line-height: 1.5; }
.loan-fit .lf-cost-note { margin: 23px 0 12px; padding-top: 18px; border-top: 1px solid #c8dbdf; color: var(--lf-muted); font-size: 13px; }
.loan-fit .lf-cost-note strong { color: var(--lf-navy); }
.loan-fit .lf-disclosure, .loan-fit .lf-source-date { color: var(--lf-muted); font-size: 12px; }
.loan-fit .lf-source-date a, .loan-fit .lf-disclosure a { color: var(--lf-navy); text-underline-offset: 3px; }
.loan-fit .lf-fallback { margin-top: 24px; }
.loan-fit .lf-fallback > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.loan-fit .lf-fallback li { min-width: 0; padding: 16px; border: 1px solid #ccdae2; border-radius: 12px; background: #fff; }
.loan-fit .lf-fallback h4 { margin: 0 0 10px; font-size: 17px; line-height: 1.4; }
.loan-fit .lf-fallback p { font-size: 14px; }
@media (max-width: 700px) {
  .loan-fit .lf-fields, .loan-fit .lf-provider-grid, .loan-fit .lf-fallback > ul { grid-template-columns: 1fr; }
  .loan-fit .lf-form-actions { align-items: stretch; }
  .loan-fit .lf-submit { flex: 1 1 100%; }
  .loan-fit .lf-action { width: 100%; }
  .loan-fit .lf-preset { flex: 1 1 100%; }
}