/* Keep each prompt attached to its control, regardless of the result's height. */
.calculator-panel,
.calculator-layout > *,
.calculator-form,
.calculator-form .form-row,
.lead-form .form-row{min-width:0}
.calculator-layout{align-items:start}
.calculator-form{align-self:start;align-content:start;grid-auto-rows:max-content;gap:17px}
.calculator-form .form-row,
.lead-form .form-row{align-items:start;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
.calculator-form:is([data-calculator=payment],[data-calculator=closing])>.form-row:has(.input-with-mode),
.calculator-form[data-calculator=heloc]>.form-row{grid-template-columns:minmax(0,1fr);row-gap:17px}
.calculator-form label:not(.calculator-check),
.lead-form label:not(.consent-check),
.studio-input-grid label,
.wizard-label{display:block;align-self:start;min-width:0;font-size:13px;font-weight:700;line-height:1.45;color:#244364}
.calculator-form label:not(.calculator-check){margin:0}
.lead-form label:not(.consent-check){margin-bottom:17px}
.calculator-form label:not(.calculator-check)>input,
.calculator-form label:not(.calculator-check)>select,
.calculator-form label:not(.calculator-check)>.field-input-shell,
.calculator-form label:not(.calculator-check)>.input-with-mode,
.lead-form label:not(.consent-check)>input,
.lead-form label:not(.consent-check)>select,
.lead-form label:not(.consent-check)>textarea,
.studio-input-grid label>input,
.studio-input-grid label>select,
.studio-input-grid label>.field-input-shell,
.wizard-label>select{margin-top:6px}
.calculator-form input:not([type=checkbox]):not([type=hidden]),
.calculator-form select,
.lead-form input:not([type=checkbox]):not([type=hidden]),
.lead-form select,
.studio-input-grid input,
.studio-input-grid select,
.wizard-label select{display:block;width:100%;min-width:0;height:48px;min-height:48px;max-height:48px;padding:11px 13px;font-size:16px;font-weight:500;line-height:1.4;border-radius:10px}
.lead-form textarea{display:block;min-height:108px;font-size:16px;font-weight:400;line-height:1.5;resize:vertical}
.calculator-form label>small,
.lead-form label>small{font-size:12px;font-weight:500;line-height:1.5;color:#5f728a}
.calculator-form label>small:not(:first-child),
.lead-form label>small:not(:first-child){display:block;margin-top:6px}
.calculator-form label>small:first-child,
.lead-form label>small:first-child{display:inline;margin:0;font-weight:500}
.calculator-helper,
.calculator-form-note span,
.calculator-caution{font-size:12px;line-height:1.55}
.calculator-form-note,
.calculator-credit-box{align-self:start;align-content:start}
.calculator-form-note strong,
.calculator-credit-box>strong{font-size:13px;line-height:1.45}
.calculator-section-label{font-size:11px;padding-top:11px;margin-top:2px}
.calculator-form .calculator-check{align-self:start;align-content:start;min-width:0}
.calculator-check span strong{font-size:13px;line-height:1.45}
.calculator-check span small{font-size:12px;line-height:1.5}
.calculator-form .calculator-check input{height:18px;min-height:18px;max-height:18px}
.input-with-mode{align-items:start;grid-template-columns:minmax(0,1fr) 70px;gap:8px}
.input-with-mode select{padding-inline:9px}
.calculator-form .btn-full{min-height:48px;align-self:start;font-size:14px;line-height:1.4}
.calculator-result{align-self:start;min-width:0}
.studio-input-grid{align-items:start}
.studio-input-grid label{font-size:13px}
.studio-details summary,
.wizard-label{font-size:13px}
.homebuyer-page .homebuyer-form label:not(.consent-check){font-size:13px;line-height:1.45}
.homebuyer-page .homebuyer-form label small{font-size:12px}
.homebuyer-page .homebuyer-form input:not([type=checkbox]):not([type=hidden]),
.homebuyer-page .homebuyer-form select{height:48px;min-height:48px;max-height:48px}

/* Units live inside the field without becoming part of its numeric value. */
.field-input-shell{position:relative;display:block;width:100%;min-width:0}
.field-input-shell input{margin:0!important;font-variant-numeric:tabular-nums}
.calculator-form .field-input-shell.has-prefix input,
.studio-input-grid .field-input-shell.has-prefix input{padding-left:32px}
.calculator-form .field-input-shell.has-suffix input,
.studio-input-grid .field-input-shell.has-suffix input{padding-right:34px}
.calculator-form .field-input-shell[data-unit=years] input,
.calculator-form .field-input-shell[data-unit=months] input{padding-right:65px}
.field-input-affix{position:absolute;top:50%;transform:translateY(-50%);z-index:1;pointer-events:none;color:#4b6480;font-size:15px;font-weight:650;line-height:1}
.field-input-affix.prefix{left:13px}
.field-input-affix.suffix{right:13px}
.field-input-affix[hidden]{display:none!important}
.calculator-form .field-input-shell.has-prefix.unit-in-value input,
.studio-input-grid .field-input-shell.has-prefix.unit-in-value input{padding-left:13px}
.calculator-form .field-input-shell.has-suffix.unit-in-value input,
.studio-input-grid .field-input-shell.has-suffix.unit-in-value input{padding-right:13px}
.field-input-shell[data-unit=years] .field-input-affix,
.field-input-shell[data-unit=months] .field-input-affix{font-size:12px;font-weight:500}
.field-input-shell:focus-within .field-input-affix{color:#1c69bd}
.field-input-shell:has(input:disabled) .field-input-affix{color:#8c9bac}
.field-input-shell input:disabled{background:#f1f4f8;color:#7a8da3;cursor:not-allowed}
.field-input-shell input[readonly]{background:#f6f9fc}
.field-input-shell input[type=number]{appearance:textfield;-moz-appearance:textfield}
.field-input-shell input[type=number]::-webkit-inner-spin-button,
.field-input-shell input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.field-unit-description{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.studio-number-wrap.field-input-shell{display:flex;align-items:center;gap:5px}
.studio-number-wrap .field-input-affix{position:static;transform:none;font:inherit;color:inherit}
.studio-number-wrap.field-input-shell input{padding:0;font:inherit;font-weight:800;letter-spacing:-.05em}

@media(max-width:1100px){
  .calculator-layout{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:820px){
  .calculator-form .form-row,
  .lead-form .form-row{grid-template-columns:minmax(0,1fr);row-gap:17px}
  .lead-form .form-row{row-gap:0}
}
@media(max-width:620px){
  .calculator-form{gap:18px}
  .calculator-panel{padding:22px 17px}
  .calculator-panel>.body-lg{font-size:14px;line-height:1.65}
  .studio-input-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 12px}
  .studio-input-grid:not(.studio-extra)>label:last-child{grid-column:1/-1}
  .studio-extra{grid-template-columns:repeat(2,minmax(0,1fr))}
  .live-payment-summary span{font-size:12px;line-height:1.45}
}
@media(max-width:360px){
  .studio-extra{grid-template-columns:minmax(0,1fr)}
}

/* Keep a field that needs correction easy to spot after focus moves to it. */
.lead-form input[aria-invalid="true"],.lead-form select[aria-invalid="true"],.lead-form textarea[aria-invalid="true"]{border-color:#ad4545;background-color:#fffafa}
.lead-form input[type="checkbox"][aria-invalid="true"]{outline:2px solid #ad4545;outline-offset:2px}