.mortgage{--mortgage-yellow:#ffdf0f;--mortgage-light:#fff2a3}.mortgage>h1{margin-bottom:16px}.mortgage__grid{display:grid;grid-template-columns:1fr 1.12fr;gap:24px;margin-top:24px}.mortgage__panel{padding:26px;background:#fff;border:1px solid #e0e0f0;border-radius:18px;min-width:0}.mortgage__panel label{display:block;font-weight:600;margin:0 0 12px}.mortgage__panel input{box-sizing:border-box;width:100%;height:58px;border:1px solid #d5d5e2;border-radius:12px;padding:12px 16px;font:inherit;font-size:22px;color:#1e2333;background:#fff;margin:0 0 24px}.mortgage__panel input:not([type=range]):focus{outline:2px solid #d9b400;outline-offset:2px}.mortgage__deposit-label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.mortgage__deposit-label label{margin:0}.mortgage__units{display:flex;background:#f6f6fa;border-radius:10px;flex-shrink:0}.mortgage button{cursor:pointer;font:inherit}.mortgage__units button,.mortgage__presets button{border:1px solid #e0e0f0;border-radius:10px;padding:10px 16px;background:#f6f6fa;color:#263347}.mortgage__units button[aria-pressed=true],.mortgage__presets button[aria-pressed=true]{background:var(--mortgage-yellow);border-color:#dcc100}.mortgage__presets{display:flex;gap:8px;margin:0 0 24px}.mortgage__presets button{flex:1;padding:10px 5px;min-width:0}.mortgage__hint{color:#727789;font-size:14px;line-height:1.5;margin:0 0 18px}.mortgage__metrics{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}.mortgage__metrics>div{padding:18px 15px;background:#fafafe;border:1px solid #e9e9f2;border-radius:14px;min-width:0}.mortgage__metrics span{display:block;color:#596176;font-size:14px;margin-bottom:14px}.mortgage__metrics strong{font-size:clamp(18px,2.2vw,29px);line-height:1.3;overflow-wrap:anywhere}.mortgage__structure{display:flex;align-items:center;gap:24px;margin:24px 0}.mortgage__donut{position:relative;flex-shrink:0;width:190px;height:190px;border-radius:50%;background:conic-gradient(var(--mortgage-yellow) var(--debt-share,27%),var(--mortgage-light) 0)}.mortgage__donut>div{position:absolute;inset:27px;background:#fff;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}.mortgage__donut strong{font-size:17px}.mortgage__donut span{font-size:14px;color:#727789}.mortgage__legend p{line-height:1.5;margin:10px 0}.mortgage__legend i{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--mortgage-yellow);margin-right:6px}.mortgage__legend .mortgage__interest-swatch{background:var(--mortgage-light)}.mortgage__legend strong{font-weight:600}.mortgage__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:22px 0 14px}.mortgage__actions .button{padding:14px 20px;box-sizing:border-box;border:0;min-height:48px}.mortgage__disclaimer{border-top:1px solid #e0e0f0;padding-top:18px;margin-bottom:0}.mortgage-copy table,.mortgage__schedule table{width:100%;border-collapse:collapse}.mortgage-copy td,.mortgage__schedule td,.mortgage__schedule th{border:1px solid #e0e0f0;padding:10px;text-align:right}.mortgage__schedule{overflow-x:auto}.mortgage__schedule summary{cursor:pointer;font-weight:600;margin:18px 0}.mortgage__schedule table{min-width:560px}.mortgage__schedule th{background:#fff4ac}.mortgage button:focus-visible,.mortgage a:focus-visible{outline:3px solid #c2a000;outline-offset:3px}@media(max-width:850px){.mortgage__grid{grid-template-columns:1fr}.mortgage__metrics strong{font-size:25px}}@media(max-width:480px){.mortgage__panel{padding:18px}.mortgage__structure{flex-direction:column;align-items:flex-start;gap:12px}.mortgage__metrics>div{padding:12px}.mortgage__metrics strong{font-size:20px}.mortgage__metrics span{font-size:13px}.mortgage__actions .button{width:100%}.mortgage__presets{gap:5px}.mortgage__units button{padding:10px 12px}}

/* Field icons and accessible native range controls. */
.mortgage__field{position:relative}.mortgage__panel .mortgage__field input{padding-right:52px;margin-bottom:0}.mortgage__field-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;color:#969caf;pointer-events:none}.mortgage svg{display:block;width:100%;height:100%}.mortgage__panel .mortgage__range{display:block;width:100%;height:24px;padding:0;margin:-12px 0 24px;border:0;background:transparent;border-radius:0;appearance:none;-webkit-appearance:none;cursor:pointer;position:relative;z-index:1;--range-progress:0%}.mortgage__range::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:linear-gradient(to right,#ffdf0f 0,#ffdf0f var(--range-progress),#e9e9f2 var(--range-progress),#e9e9f2 100%)}.mortgage__range::-moz-range-track{height:5px;border-radius:5px;background:#e9e9f2}.mortgage__range::-moz-range-progress{height:5px;border-radius:5px;background:#ffdf0f}.mortgage__range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:19px;height:19px;margin-top:-7px;border-radius:50%;background:#ffdf0f;border:2px solid #fff;box-shadow:0 1px 5px #0003}.mortgage__range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#ffdf0f;border:2px solid #fff;box-shadow:0 1px 5px #0003}.mortgage__range:disabled{opacity:.45;cursor:default}.mortgage__result-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.mortgage__result-heading h2{margin:0;font-size:26px;line-height:1.3}.mortgage__payment-badge{padding:9px 12px;background:#fff7ca;color:#786300;border-radius:12px;font-size:13px;white-space:nowrap}.mortgage__metric{position:relative;overflow:hidden}.mortgage__metric>span:not(.mortgage__metric-icon){padding-right:40px;min-height:36px}.mortgage__metric-icon{position:absolute;right:13px;top:15px;display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:10px;box-sizing:border-box;border-radius:50%;color:#9e8200;background:#fff3ba}.mortgage__metric--debt .mortgage__metric-icon{background:#e2f7ee;color:#339674}.mortgage__metric--interest .mortgage__metric-icon{background:#fbe6eb;color:#bd5b77}.mortgage__metric--total .mortgage__metric-icon{background:#efe8fc;color:#8760c8}.mortgage__metric--payment strong{color:#8b7100}.mortgage__button-icon{display:inline-block;width:21px;height:21px;margin-left:10px;vertical-align:middle}.mortgage__hint#mortgage-deposit-note{margin-top:-17px;margin-bottom:16px}.mortgage__panel{box-shadow:0 5px 22px #25324b06}@media(max-width:480px){.mortgage__result-heading h2{font-size:22px}.mortgage__metric-icon{right:8px;top:12px;width:32px;height:32px;padding:8px}.mortgage__metric>span:not(.mortgage__metric-icon){padding-right:30px;min-height:42px}.mortgage__payment-badge{font-size:12px}.mortgage__panel .mortgage__range{margin-bottom:20px}}

.mortgage .mortgage__metric-icon{display:flex;margin-bottom:0}.mortgage .mortgage__metric--payment .mortgage__metric-icon{color:#9e8200}

/* Keep selected units consistent with the term presets; focus must not invert them. */
.mortgage .mortgage__units button[aria-pressed="true"],.mortgage .mortgage__units button[aria-pressed="true"]:hover,.mortgage .mortgage__units button[aria-pressed="true"]:focus,.mortgage .mortgage__units button[aria-pressed="true"]:active{background:#ffdf0f;color:#263347;border-color:#dcc100}.mortgage .mortgage__units button[aria-pressed="false"]{background:#f6f6fa;color:#263347;border-color:#e0e0f0}.mortgage__panel .mortgage__range:focus{outline:none;box-shadow:none;border:0}.mortgage__panel .mortgage__range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px #d9b40055}.mortgage__panel .mortgage__range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px #d9b40055}@media(max-width:480px){.mortgage__structure{align-items:center}.mortgage__donut{margin-left:auto;margin-right:auto}.mortgage__legend{width:100%}}
