/* V12: scoped two-column form; retain V11 identity and all result content. */
#loanForm{gap:10px}
#loanForm .v12-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 10px}
#loanForm .field{position:relative;min-width:0;display:flex;flex-direction:column;min-height:80px;padding:11px 12px 10px;border:1px solid #e3e7f0;border-radius:13px;background:#f5f7fb}
#loanForm .field:focus-within{border-color:#9baae8;box-shadow:0 0 0 3px rgba(95,104,217,.09);background:#fafbff}
#loanForm .field label,#loanForm .field .field-label{display:block;min-height:20px;max-width:100%;margin:0 0 5px;color:#627089;font-size:11px;font-weight:750;line-height:1.2;letter-spacing:-.015em;text-transform:none;overflow-wrap:anywhere}
#loanForm .input-line{display:flex;align-items:center;gap:5px;flex:1;min-width:0}
#loanForm .field input,#loanForm .field select{width:100%;min-width:0;max-width:100%;height:auto;min-height:26px;margin:0;padding:0;border:0;border-radius:0;outline:0;box-shadow:none;background:transparent;color:var(--ink);font:750 19px/1.25 'DM Sans',Arial,sans-serif;letter-spacing:-.045em;appearance:none;-webkit-appearance:none}
#loanForm .field input::placeholder{color:#8b95aa;font-size:16px;font-weight:500;letter-spacing:normal}
#loanForm .field input[type=number]{appearance:textfield;-moz-appearance:textfield;font-variant-numeric:tabular-nums}
#loanForm .field input[type=number]::-webkit-inner-spin-button,#loanForm .field input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#loanForm .prefix{flex-shrink:0;font-size:19px;font-weight:800;line-height:1.2;color:var(--ink)}
#loanForm .rate-suffix{display:flex;align-items:center;align-self:stretch;margin-left:auto;padding-left:11px;border-left:1px solid #d7deeb;color:#71809a;font-size:17px;font-weight:800}
#loanForm .select-field select{padding-right:20px;background-image:none;cursor:pointer}
#loanForm .chevron{position:absolute;right:12px;bottom:21px;width:15px;height:15px;pointer-events:none;color:#6e7b90}
#loanForm .unit-text{display:block;color:var(--ink);font-size:19px;font-weight:750;line-height:1.25;letter-spacing:-.045em}
#loanForm .unit-mark{position:absolute;right:12px;top:11px;padding:4px 6px;border-radius:10px;background:#ebedf7;color:#7b85a1;font-size:9px;line-height:1}
#loanForm .date-holder{position:relative;display:flex;align-items:center;flex:1;min-width:0;min-height:26px}
#loanForm .date-display{display:block;min-width:0;max-width:100%;color:var(--ink);font-size:clamp(14px,3.8vw,19px);font-weight:750;line-height:1.35;letter-spacing:-.045em;white-space:nowrap}
#loanForm .date-holder input[type=date]{position:absolute;inset:0;z-index:2;width:100%;min-width:0;min-inline-size:0;max-width:100%;height:100%;opacity:0;font-size:16px;cursor:pointer;box-sizing:border-box}
#loanForm .date-holder:focus-within{outline:2px solid #9baae8;outline-offset:3px;border-radius:3px}
#loanForm .helper{margin:0;color:#7a8599;font-size:11px;line-height:1.45}
#loanForm .form-submit{width:100%;margin-top:6px;min-height:52px;border-radius:12px;background:var(--navy);box-shadow:0 8px 20px rgba(12,38,91,.12);font-size:14px}
#loanForm .form-submit span{color:#ffae70}
#loanForm .micro{margin:0 5px;font-size:10px;line-height:1.6;text-align:center}
#loanForm [hidden]{display:none!important}
#loanForm .field:has([aria-invalid=true]){border-color:#d8513e}
#loanForm .field [aria-invalid=true]{outline:2px solid #d8513e;outline-offset:2px}
/* Containment, readable wrapping and safe areas, without hiding CSS overflow. */
body{overflow-x:visible}
.shell{padding-left:max(48px,env(safe-area-inset-left));padding-right:max(48px,env(safe-area-inset-right))}
header.shell{padding-top:env(safe-area-inset-top)}
.footer{padding-bottom:calc(37px + env(safe-area-inset-bottom))}
.orbit{max-width:100%;right:0}
.metric,.result-head>*,.schedule-head>*,.footer-inner>*,.top>*{min-width:0}
.metric span,.result-actions>*{overflow-wrap:anywhere}
.result-actions>*{max-width:100%;white-space:normal;text-align:center}
.results td,.results th{overflow-wrap:anywhere}
dialog{max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));scroll-padding:20px}
@media(min-width:781px){#loanForm .field{padding:14px;min-height:90px}#loanForm .field input,#loanForm .field select,#loanForm .prefix,#loanForm .unit-text{font-size:22px}#loanForm .date-display{font-size:19px}.sim-card{padding:27px 30px}}
@media(max-width:1100px){.shell{padding-left:max(32px,env(safe-area-inset-left));padding-right:max(32px,env(safe-area-inset-right))}}
@media(max-width:780px){.shell{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}.top{gap:10px;height:auto;min-height:70px}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.metric{padding:3px 8px}.metric strong{overflow-wrap:anywhere}.schedule-head{flex-wrap:wrap}.tag{white-space:normal}.footer-links{column-gap:18px}dialog{padding:26px 20px}}
@media(max-width:360px){#loanForm .v12-grid{gap:8px}#loanForm .field{padding:10px 9px;min-height:78px}#loanForm .field label{font-size:10px}#loanForm .field input,#loanForm .field select,#loanForm .prefix,#loanForm .unit-text{font-size:17px}#loanForm .rate-suffix{padding-left:8px;font-size:15px}#loanForm .date-display{font-size:14px}#loanForm .chevron{right:8px;bottom:20px}#loanForm .unit-mark{right:8px;top:10px}.metric strong{font-size:17px}}
@media print{.shell{padding:0}dialog{display:none!important}}