@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{--bg:#f9faf6;--green:#234c3b;--text:#27372d;--muted:#7a8178;--border:#e3e7dc;--lime:#e9efdf}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,summary,input,select{touch-action:manipulation}button{cursor:pointer}a:hover{color:#598149}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #85a369;outline-offset:4px}header{height:88px;max-width:1240px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 42px;border-bottom:1px solid var(--border)}.brand{font-family:'Manrope',sans-serif;font-size:23px;font-weight:800;letter-spacing:-1px;display:flex;align-items:center;gap:7px}.brand-icon{font-size:38px;color:var(--green);line-height:1}.brand-tools{font:500 10px 'DM Sans',sans-serif;letter-spacing:1.5px;text-transform:uppercase;border-left:1px solid #bbc5b7;padding-left:9px;margin-left:3px}.canadian{font-size:12px;color:#606c5b;display:flex;gap:8px;align-items:center}nav{display:flex;gap:31px;font-size:13px;color:#737c70}nav .active{color:var(--green);font-weight:700}main{max-width:1120px;padding:0 30px;margin:auto}.breadcrumb{margin-top:27px;font-size:11px;color:#92988c;display:flex;gap:13px}.breadcrumb strong{font-weight:400;color:#606f60}.intro{position:relative;padding:42px 0 35px}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:700;color:#6f8461;display:flex;align-items:center;gap:8px}.eyebrow span{width:6px;height:6px;background:#8aa278;border-radius:50%}h1{font:650 49px/1.13 'Manrope',sans-serif;letter-spacing:-2.5px;margin:18px 0 17px}h1>span{color:#8a9d6f}.intro p{font-size:14px;line-height:1.8;color:#778071;margin:0}.trust{display:flex;gap:23px;font-size:10px;color:#738069;margin-top:21px}.intro-art{position:absolute;right:54px;top:42px;width:225px;transform:rotate(-3deg)}.calculator{display:grid;grid-template-columns:365px minmax(0,1fr);gap:24px;align-items:start}.card{border:1px solid var(--border);border-radius:13px;background:#fff}.inputs{padding:25px 25px 20px}.section-heading{display:flex;align-items:center;gap:10px}.tiny-icon{font-size:22px;color:#6d875e}h2,h3,p{margin-top:0}h2{font:700 16px 'Manrope',sans-serif;letter-spacing:-.35px;margin-bottom:0}.muted{color:var(--muted)}.small{font-size:11px;line-height:1.6;margin:8px 0 24px}label{font-size:11px;font-weight:600;display:flex;justify-content:space-between;margin-bottom:9px}label span{font-weight:400;color:#8c9486;font-size:10px}.input-wrap{display:flex;align-items:center;border:1px solid #dfe4d9;border-radius:6px;background:#fff;overflow:hidden;height:44px;gap:9px;padding:0 13px;color:#92998b}.input-wrap:focus-within{outline:2px solid #88a575;outline-offset:1px}.input-wrap input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#34412e;font-size:14px;font-weight:500;height:100%;appearance:textfield}input::-webkit-inner-spin-button{appearance:none}.input-wrap>span{font-size:13px}select,.plain-input{width:100%;height:44px;border:1px solid #dfe4d9;border-radius:6px;color:#34412e;background:#fff;padding:0 12px;font-size:12px;outline-color:#88a575}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:21px 0}.prepay-heading{border-top:1px solid var(--border);padding-top:22px;margin-top:26px;display:flex;align-items:center;gap:8px}.prepay-heading h3{font-size:13px;margin:0;font-weight:600}.optional{font-size:8px;letter-spacing:.8px;color:#8a9580;background:#f1f4eb;border-radius:3px;padding:4px 6px;margin-left:auto}.prepay-heading+.small{font-size:10px;margin-bottom:19px}input[type=range]{width:100%;accent-color:#496e42;height:5px;margin:22px 0 8px;cursor:pointer}.range-labels{display:flex;justify-content:space-between;color:#959c8c;font-size:9px}.lump{border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:23px;padding:17px 0}.lump summary{font-size:11px;color:#697c5f;cursor:pointer;list-style:none;display:flex;justify-content:space-between}.lump[open] summary{margin-bottom:20px}.lump label:not(:first-child){margin-top:13px}.reset{display:block;margin:19px auto 0;border:0;background:none;color:#8a9381;font-size:10px}.error{font-size:11px;color:#a74232;margin:10px 0 0}.error:empty{display:none}.results{display:flex;flex-direction:column;gap:16px}.result-top{display:flex;align-items:center;justify-content:space-between;padding:3px 0 1px}.result-top h2{font-size:15px}.live{display:flex;align-items:center;gap:5px;font-size:9px;color:#8a9680}.live i{width:5px;height:5px;background:#86a66f;border-radius:50%}.payment-card{padding:24px 27px 0;background:var(--green);border-radius:12px;color:#fff;position:relative;overflow:hidden}.payment-card p{font-size:12px;color:#d8e2d6;margin-bottom:6px}.payment{font:650 43px 'Manrope',sans-serif;letter-spacing:-1.5px;font-variant-numeric:tabular-nums}.payment-card span{font-size:9px;color:#b1c6b4}.payment-symbol{position:absolute;right:30px;top:11px;font-size:88px;color:#6f9479;opacity:.35;transform:rotate(-8deg)}.payment-bottom{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #43624e;padding:17px 0;margin-top:22px}.payment-bottom span{display:flex;gap:10px;align-items:center}.payment-bottom strong{font-size:11px;color:#f1f5eb;font-weight:500}.savings-card{border:1px solid #dde5ce;background:#f0f4e7;border-radius:11px;padding:20px 23px 0}.savings-title{display:flex;gap:9px;align-items:center}.savings-title>span{font-size:21px;color:#65844f}.savings-title h3{font:700 13px 'Manrope',sans-serif;margin:0}.savings-card p{font-size:10px;color:#7a866e;margin:7px 0 18px}.savings-card p strong{font-weight:500;color:#637a52}.saving-metrics{display:grid;grid-template-columns:1fr 1fr;margin-bottom:18px}.saving-metrics>div{display:flex;flex-direction:column;gap:5px}.saving-metrics>div+div{border-left:1px solid #dce5cd;padding-left:29px}.saving-metrics span{font-size:10px;color:#738267}.saving-metrics strong{font:700 25px 'Manrope',sans-serif;color:#456d37;letter-spacing:-.7px}.payoff{display:flex;align-items:center;gap:9px;border-top:1px solid #dce5cd;padding:13px 0;font-size:9px;color:#7f8a73}.payoff strong{color:#587646;font-weight:600;font-size:10px}.payoff>span{margin-left:auto;font-size:9px;color:#9aa18c}.chart-card{padding:21px 22px 0}.chart-header{display:flex;justify-content:space-between;align-items:center}.chart-header h3{font:700 12px 'Manrope',sans-serif;margin:0}.chart-header>span{font-size:9px;color:#8f9788}.legend{display:flex;gap:19px;font-size:9px;color:#838d7b;margin:14px 0 10px}.legend>span{display:flex;gap:6px;align-items:center}.legend i{width:13px;height:2px;display:block}.original-dot{background:repeating-linear-gradient(90deg,#acb4a5 0 4px,transparent 4px 6px)}.extra-dot{background:#4e7447}#chart{width:100%;height:auto;display:block;overflow:visible}.chart-foot{text-align:center;font-size:9px;color:#939b88;margin:0;padding:12px 0 14px;border-top:1px solid #f0f1eb}.under-calculator{display:flex;justify-content:space-between;margin-top:18px;align-items:center;color:#8a9380;font-size:10px}.under-calculator button{border:0;background:none;color:#6a7e5d;font-size:10px}.under-calculator button span{margin-left:7px}.learn{border-top:1px solid var(--border);margin-top:48px;padding:38px 0}.learn .eyebrow{font-size:9px;letter-spacing:1.3px}.learn>h2{font-size:25px;margin:12px 0 27px;letter-spacing:-.9px}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.guide-icon{color:#71865f;background:#eaf0e1;border-radius:8px;display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;font-size:21px;margin-bottom:13px}.guide-grid h3{font-size:12px;margin-bottom:9px}.guide-grid p{font-size:11px;color:#7d8774;line-height:1.9;margin:0}.methodology{padding:25px 0 35px;border-top:1px solid var(--border)}.methodology h2{margin-bottom:16px}.methodology details{border-bottom:1px solid var(--border);padding:16px 0}.methodology summary{cursor:pointer;font-size:12px;color:#5b7050}.methodology p{font-size:12px;line-height:1.8;color:#77816e;margin:14px 0 0;max-width:850px}.methodology a{text-decoration:underline}.about{padding:26px 27px;background:#edf1e5;border-radius:10px;display:flex;align-items:center;gap:20px;margin-bottom:40px}.about h2{font-size:15px}.about p{font-size:11px;color:#7e8872;max-width:550px;line-height:1.8;margin:7px 0 0}.about>a{margin-left:auto;white-space:nowrap;font-size:11px;color:#57734b}footer{border-top:1px solid var(--border);max-width:1180px;margin:auto;padding:28px 30px;display:flex;gap:26px;align-items:center;flex-wrap:wrap;color:#8a927f;font-size:10px}footer .brand{font-size:17px;color:#566b49}footer>p{margin:0}footer>button{margin-left:auto;border:0;background:transparent;color:#7d8972;font-size:10px}.disclaimer{flex-basis:100%;font-size:9px;line-height:1.7;color:#9aa18e}dialog{border:1px solid var(--border);border-radius:14px;padding:30px;max-width:480px;color:var(--text);box-shadow:0 15px 100px #173c3430}dialog::backdrop{background:#19342666}dialog p{font-size:14px;line-height:1.8;margin-top:15px}dialog button{background:var(--green);color:#fff;border:0;padding:10px 24px;border-radius:6px}@media(min-width:1400px){header{max-width:1320px}main{max-width:1160px}.calculator{grid-template-columns:380px minmax(0,1fr)}}@media(max-width:800px){header{padding:0 22px;height:74px}nav{gap:18px}.canadian{display:none}main{padding:0 22px}.intro-art{right:0;width:170px;top:60px}h1{font-size:40px}.intro p{max-width:460px;font-size:12px}.calculator{grid-template-columns:310px minmax(0,1fr);gap:16px}.inputs{padding:20px}.saving-metrics strong{font-size:20px}.saving-metrics>div+div{padding-left:16px}.result-top{flex-wrap:wrap;gap:8px}.payment-bottom{flex-direction:column;gap:7px}.payoff{flex-wrap:wrap}.payoff>span{margin-left:0}.chart-header>span{display:none}.about>a{display:none}.payment{font-size:36px}.trust{gap:14px;font-size:9px}}@media(max-width:640px){header{height:72px}.brand{font-size:20px}.brand-icon{font-size:30px}nav{font-size:12px}.brand-tools{font-size:8px}.breadcrumb{font-size:9px;gap:9px;margin-top:21px}.intro{padding-top:33px;padding-bottom:29px}.eyebrow{font-size:8px;letter-spacing:1.2px}h1{font-size:38px;letter-spacing:-1.8px;margin-top:15px}.intro-art{display:none}.intro p{font-size:12px}.desktop{display:none}.trust{flex-wrap:wrap;gap:13px;font-size:8px;margin-top:18px}.calculator{grid-template-columns:1fr;gap:26px}.inputs{padding:23px}.results{gap:15px}.payment-bottom{flex-direction:row}.payment{font-size:43px}.saving-metrics strong{font-size:27px}.result-top{padding:0}.result-top h2{font-size:15px}.live{font-size:9px}.payoff>span{margin-left:auto}.under-calculator{flex-direction:column;gap:14px;margin-top:22px}.learn{margin-top:32px;padding-top:29px}.learn>h2{font-size:23px}.guide-grid{grid-template-columns:1fr;gap:25px}.guide-grid article{position:relative;padding-left:47px}.guide-icon{position:absolute;left:0;top:0}.guide-grid p{font-size:12px}.guide-grid h3{font-size:13px}.about{padding:22px 18px;align-items:flex-start;gap:13px}.about h2{line-height:1.6}footer{padding:24px 22px;gap:16px}footer>p:not(.disclaimer){display:none}footer>span{font-size:9px}.chart-card{padding:20px 15px 0}.legend{gap:14px}.payment-bottom strong{font-size:10px}.payment-bottom span{font-size:8px;gap:6px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* A brighter, more welcoming Personal Finance Toolkit. */
:root {
  --bg: #f8fcfb;
  --green: #146e62;
  --text: #183d37;
  --muted: #617c75;
  --border: #dfede7;
  --lime: #e4f8ef;
}
body {
  background: radial-gradient(ellipse at 90% 9%, #e3faf0 0, transparent 30%),
    radial-gradient(ellipse at 2% 18%, #fff8e5 0, transparent 24%), var(--bg);
}
header { border-color: #dcece5; }
.brand { gap: 11px; letter-spacing: -.7px; }
.brand-mark {
  width: 39px; height: 39px; display: inline-flex; align-items: center;
  justify-content: center; flex-shrink: 0; background: #167b6b;
  color: #dcffe9; border-radius: 12px; font-size: 28px; font-weight: 500;
  box-shadow: 4px 4px 0 #ffdf88;
}
.brand-name { display: flex; flex-direction: column; font-size: 19px; line-height: 1.3; }
.brand-name > span { font: 700 9px 'DM Sans', sans-serif; letter-spacing: 3.6px; color: #4a8578; }
nav { color: #58716a; }
nav a { align-self: center; }
.canadian { color: #4d7064; }
.breadcrumb { color: #6f867e; }
.intro { padding-top: 43px; padding-bottom: 34px; }
.eyebrow { color: #16836b; }
.eyebrow span { background: #16a17c; }
h1 { font-size: 51px; letter-spacing: -2.5px; color: #194e43; }
h1 > span { color: #efa935; }
.intro p { color: #5d7c71; font-size: 15px; }
.trust { color: #496e60; font-size: 11px; }
.trust > span { background: #ffffffa6; padding: 5px 9px; border-radius: 6px; }
.intro-art { width: 235px; right: 45px; top: 38px; transform: rotate(-3deg); }
.art-caption {
  display: block; font-size: 11px; text-align: center; color: #31776a;
  background: #fff; border: 1px solid #d5eee2; width: fit-content;
  padding: 8px 13px; border-radius: 20px; margin: -2px auto 0;
  transform: rotate(3deg); box-shadow: 0 5px 15px #167b6b09;
}
.art-spark { position: absolute; color: #eab740; }
.spark-one { font-size: 36px; right: 2px; top: 10px; }
.spark-two { font-size: 26px; left: 1px; top: 56px; color: #8c80ce; }
.tool-heading { display: flex; align-items: end; justify-content: space-between; margin: 4px 0 21px; gap: 20px; }
.tool-tag { font-size: 9px; color: #4f8978; letter-spacing: 1.4px; font-weight: 700; }
.tool-heading h2 { font-size: 21px; margin-top: 7px; letter-spacing: -.7px; }
.tool-note { color: #8a76b4; font-size: 11px; white-space: nowrap; padding-bottom: 3px; }
.tool-note span { display: inline-block; margin-left: 5px; font-size: 20px; }
.card { border-radius: 16px; box-shadow: 0 5px 20px #215a4604; }
.inputs { border-top: 4px solid #80d9ba; padding-top: 22px; }
.section-heading h2 { font-size: 17px; }
.tiny-icon { color: #218d73; }
.small { font-size: 12px; }
label { font-size: 12px; }
label span { color: #688579; font-size: 11px; }
.input-wrap, select, .plain-input { border-color: #cfe2d9; border-radius: 8px; }
.input-wrap input, select, .plain-input { color: #234d40; }
.input-wrap:focus-within { outline-color: #5fc7a5; }
select { font-size: 13px; }
.prepay-heading h3 { font-size: 14px; }
.optional { color: #6d5895; background: #f1ecfa; }
.prepay-heading + .small { font-size: 11px; }
input[type=range] { accent-color: #14876f; }
.range-labels { color: #6a8578; font-size: 10px; }
.lump summary { color: #267d66; font-size: 12px; }
.reset { color: #587e6c; font-size: 11px; }
.result-top h2 { color: #215b49; }
.live { color: #4b7d68; font-size: 10px; }
.live i { background: #30b585; box-shadow: 0 0 0 3px #e2f8ed; }
.payment-card {
  background: linear-gradient(115deg, #116c61, #16866e);
  border-radius: 16px; box-shadow: 0 9px 24px #197d6b13;
}
.payment-card p { color: #e1fff2; font-size: 13px; }
.payment { font-size: 46px; }
.payment-card span { color: #cff0e3; font-size: 10px; }
.payment-symbol { color: #91e7bd; }
.payment-bottom { border-color: #ffffff35; }
.payment-bottom strong { font-size: 12px; }
.savings-card {
  background: linear-gradient(125deg, #e1f8ea, #f1fbed 65%, #fff7db);
  border-color: #caebd8; border-radius: 16px; position: relative;
}
.savings-title > span { color: #12815d; background: #ffffffaa; width: 29px; height: 29px; border-radius: 9px; text-align: center; }
.savings-title h3 { font-size: 15px; color: #246448; }
.savings-card p { font-size: 12px; color: #577361; line-height: 1.6; }
.saving-metrics span { font-size: 11px; color: #4d735b; }
.saving-metrics strong { font-size: 29px; color: #137a55; font-variant-numeric: tabular-nums; }
.saving-metrics > div + div { border-color: #cbe7d1; }
.savings-card .savings-insight {
  padding: 10px 13px; background: #ffffffa6; border-radius: 8px;
  color: #3c7054; margin: 0 0 14px; font-size: 11px;
}
.payoff { border-color: #cbe7d1; color: #527c5e; flex-wrap: wrap; }
.payoff strong { color: #1c7251; font-size: 12px; }
.payoff > span { color: #6d8672; }
.chart-header h3 { font-size: 13px; }
.chart-header > span, .legend { color: #607d70; font-size: 10px; }
.extra-dot { background: #128570; }
.original-dot { background: repeating-linear-gradient(90deg,#a3b2c8 0 4px,transparent 4px 6px); }
.chart-foot { font-size: 10px; color: #638575; }
.under-calculator { font-size: 11px; color: #5a7b6b; }
.under-calculator button { font-size: 11px; color: #247b62; }
.guide-grid article { background: #fff; border: 1px solid #e4eee8; padding: 22px; border-radius: 15px; }
.guide-grid { gap: 18px; }
.guide-icon { background: #ddf7ea; color: #218465; border-radius: 10px; }
.guide-grid article:nth-child(2) .guide-icon { background: #fff0c5; color: #99711d; }
.guide-grid article:nth-child(3) .guide-icon { background: #eee8fc; color: #8065af; }
.guide-grid h3 { font-size: 13px; }
.guide-grid p { color: #607d6d; font-size: 12px; }
.methodology summary { color: #3b7961; }
.methodology p { color: #60796b; }
.about { background: linear-gradient(105deg, #e0f6e9, #eef8e8 70%, #fff4d4); border: 1px solid #daeddc; border-radius: 16px; }
.about .brand-icon { color: #e7ac32; }
.about p { color: #577a62; font-size: 12px; }
.about > a { background: #fff; border-radius: 8px; padding: 11px 14px; color: #216d53; }
footer { color: #68806f; }
footer .brand-name { font-size: 15px; }
footer .brand-mark { width: 31px; height: 31px; font-size: 23px; border-radius: 9px; }
footer .brand-name > span { font-size: 8px; }
footer .disclaimer { color: #738876; font-size: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .payment-card, .savings-card { animation: welcome-in .55s ease-out both; }
  .savings-card { animation-delay: .08s; }
  .guide-grid article { transition: transform .2s, box-shadow .2s; }
  .guide-grid article:hover { transform: translateY(-3px); box-shadow: 0 8px 20px #235f4910; }
  @keyframes welcome-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 900px) {
  header { padding-inline: 22px; }
  nav { gap: 18px; }
  .canadian { display: none; }
  .intro-art { right: 0; width: 180px; top: 60px; }
  h1 { font-size: 43px; }
  .intro p { max-width: 490px; font-size: 13px; }
  .saving-metrics strong { font-size: 24px; }
  .tool-heading h2 { font-size: 19px; }
  .tool-note { display: none; }
  .guide-grid article { padding: 18px; }
}
@media (max-width: 640px) {
  header { height: 78px; }
  .brand-name { font-size: 16px; }
  .brand-name > span { font-size: 8px; letter-spacing: 3px; }
  .brand-mark { width: 33px; height: 33px; font-size: 25px; border-radius: 10px; }
  h1 { font-size: 39px; letter-spacing: -1.9px; }
  .intro { padding-top: 31px; }
  .intro p { font-size: 14px; line-height: 1.8; }
  .trust { gap: 7px; font-size: 9px; }
  .trust > span { padding: 4px 5px; }
  .tool-heading { margin: 2px 0 18px; }
  .tool-heading h2 { font-size: 20px; line-height: 1.4; max-width: 310px; }
  .tool-tag { font-size: 9px; }
  .result-top h2 { font-size: 14px; }
  .live { font-size: 9px; }
  .saving-metrics strong { font-size: 26px; }
  .savings-title h3 { font-size: 14px; }
  .payment { font-size: 42px; }
  .payment-bottom strong { font-size: 10px; }
  .payment-bottom span { font-size: 9px; }
  .payoff > span { margin-left: 0; }
  .guide-grid article { padding: 22px 20px 22px 66px; }
  .guide-icon { left: 20px; top: 22px; }
  footer > span { max-width: 160px; line-height: 1.5; }
}
@media (max-width: 370px) {
  header { padding-inline: 15px; }
  main { padding-inline: 17px; }
  .brand-name { font-size: 14px; }
  .brand { gap: 8px; }
  h1 { font-size: 34px; }
  .saving-metrics strong { font-size: 22px; }
  .payment-bottom { flex-wrap: wrap; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .intro p { max-width: calc(100% - 210px); }
  .intro p .desktop { display: none; }
}

/* Home-buying comparisons with the same calm, bright visual language. */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mode-switch { display: flex; padding: 4px; background: #eff6f2; border-radius: 10px; margin: 0 0 22px; gap: 3px; }
.mode-switch button { flex: 1; border: 0; border-radius: 7px; padding: 10px 5px; color: #647f73; background: transparent; font-size: 11px; }
.mode-switch button[aria-pressed=true] { background: white; color: #156a54; font-weight: 700; box-shadow: 0 2px 6px #1c6f4510; }
.mode-fields { border: 0; margin: 0; padding: 0; min-width: 0; }
.down-label { display: flex; justify-content: space-between; align-items: baseline; margin-top: 19px; gap: 8px; }
.down-label > span { color: #617f6f; font-size: 9px; }
.down-inputs { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 10px; }
.down-presets { display: flex; gap: 7px; margin-top: 11px; }
.down-presets button { flex: 1; padding: 7px 4px; border: 1px solid #dcebe2; border-radius: 6px; background: #fff; color: #508168; font-size: 10px; }
.down-presets button[aria-pressed=true] { color: #17654b; background: #e2f5e8; border-color: #92cfac; font-weight: 700; }
button:disabled { opacity: .45; cursor: not-allowed; }
.loan-breakdown { padding: 14px; margin-top: 17px; border-radius: 9px; background: #f3f8f4; }
.loan-breakdown > div { display: flex; justify-content: space-between; gap: 10px; color: #627f6e; font-size: 10px; margin-bottom: 8px; }
.loan-breakdown strong { font-weight: 500; font-variant-numeric: tabular-nums; color: #345c46; }
.loan-breakdown .loan-total { border-top: 1px solid #daeade; padding-top: 10px; margin: 10px 0 0; font-size: 12px; font-weight: 700; color: #246b4d; }
.loan-total strong { color: #246b4d; font-weight: 700; }
.field-help { font-size: 10px; line-height: 1.75; color: #6e8276; margin: 10px 0 0; }
.term-field { margin-top: 19px; }
.check-label { display: flex; gap: 9px; align-items: flex-start; justify-content: flex-start; font-size: 11px; line-height: 1.6; }
.check-label input { accent-color: #167b60; margin: 3px 0 0; flex-shrink: 0; }
#eligibility-row { padding: 12px; background: #f7f2ff; border: 1px solid #e7ddf5; border-radius: 8px; margin: 0 0 19px; }
#eligibility-row .field-help { color: #786492; }
.budget-inputs { border-bottom: 1px solid var(--border); padding: 17px 0; }
.budget-inputs summary { font-size: 11px; color: #277b64; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.budget-inputs label { margin-top: 17px; }
.term-card, .budget-card { padding: 20px 23px; }
.term-metrics { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 12px; margin-top: 20px; }
.term-metrics > div { display: flex; flex-direction: column; gap: 6px; }
.term-metrics span { font-size: 10px; color: #6a8175; }
.term-metrics strong { font-size: 15px; font-weight: 600; color: #315f49; }
.term-metrics > div:last-child strong { color: #7d67a4; }
.budget-total { font: 700 30px 'Manrope', sans-serif; color: #216d55; letter-spacing: -.8px; margin: 13px 0; }
.budget-lines > div { display: flex; justify-content: space-between; gap: 15px; font-size: 11px; color: #66816f; padding: 6px 0; }
.budget-lines strong { color: #3a644c; font-weight: 500; font-variant-numeric: tabular-nums; }
.is-stale .payment-card, .is-stale .savings-card, .is-stale .card, .schedule-details.is-stale table { opacity: .45; }
.result-status { padding: 12px 15px; border: 1px solid #e7bf7a; border-radius: 8px; color: #85591f; font-size: 12px; line-height: 1.6; background: #fff8e8; margin: 0; }
.comparison-section { margin-top: 32px; padding: 29px 0 23px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.comparison-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.comparison-heading h2 { font-size: 23px; margin-top: 7px; letter-spacing: -.8px; }
.comparison-badge { background: #f1eafa; color: #80639d; font-size: 10px; padding: 9px 12px; border-radius: 20px; white-space: nowrap; }
.section-description { font-size: 12px; color: #65816f; margin: 12px 0 20px; line-height: 1.8; }
.comparison-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 13px; }
.comparison-card { background: #fff; border: 1px solid #dceade; padding: 19px 17px 16px; border-radius: 13px; }
.comparison-card-heading { display: flex; flex-direction: column; gap: 5px; min-height: 38px; }
.comparison-card h3 { font-size: 13px; margin: 0; color: #285e46; }
.comparison-card-heading > span { font-size: 9px; color: #668e6f; }
.comparison-payment { font: 700 25px 'Manrope',sans-serif; color: #1d7454; letter-spacing: -.8px; margin-top: 17px; }
.comparison-card > p { font-size: 10px; color: #7b8a7d; margin: 4px 0 20px; line-height: 1.8; }
.comparison-card dl { margin: 0; }
.comparison-card dl > div { display: flex; justify-content: space-between; gap: 5px; padding: 7px 0; font-size: 10px; color: #6c8170; }
.comparison-card dd { margin: 0; color: #416549; font-variant-numeric: tabular-nums; }
.comparison-card > button { width: 100%; background: #eef7ee; color: #287247; border: 1px solid #d6e9d7; border-radius: 7px; margin-top: 17px; padding: 10px 6px; font-size: 11px; }
.comparison-card.unavailable { background: #f1f5f2; border-style: dashed; }
.comparison-card.unavailable p { margin-top: 18px; font-size: 12px; }
.schedule-details { margin: 22px 0; border: 1px solid #dfebe1; background: #fff; border-radius: 12px; padding: 20px 23px; }
.schedule-details > summary { display: flex; justify-content: space-between; gap: 15px; list-style: none; color: #397552; font-size: 13px; font-weight: 600; cursor: pointer; }
.table-scroll { overflow-x: auto; max-height: 400px; margin-top: 16px; }
.table-scroll table { width: 100%; border-collapse: collapse; font-size: 11px; white-space: nowrap; }
.table-scroll th { text-align: left; font-weight: 600; }
.table-scroll td, .table-scroll th { padding: 13px; border-bottom: 1px solid #eaf0e8; font-variant-numeric: tabular-nums; }
.table-scroll thead { background: #f2f8f1; color: #5d7f62; }
.table-scroll td { color: #50755a; text-align: right; }
.table-scroll th:not(:first-child) { text-align: right; }
@media(min-width: 1000px) { .calculator { grid-template-columns: 380px minmax(0,1fr); } }
@media(max-width: 950px) { .comparison-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .term-metrics { grid-template-columns: 1fr 1fr; } .term-metrics > div:last-child { grid-column: 1/-1; } .comparison-heading h2 { font-size: 21px; } }
@media(max-width: 640px) { .comparison-heading { align-items: flex-start; } .comparison-badge { display: none; } .comparison-grid { gap: 10px; } .comparison-card { padding: 15px 12px; } .comparison-payment { font-size: 22px; } .comparison-card dl > div { flex-direction: column; gap: 5px; } .comparison-heading h2 { line-height: 1.4; } .term-metrics { grid-template-columns: 1fr 1fr; } .term-metrics strong { font-size: 15px; } .term-card .chart-header > span { display: none; } .schedule-details { padding: 19px 15px; } .loan-breakdown > div { font-size: 11px; } }
@media(max-width: 370px) { .comparison-grid { grid-template-columns: 1fr; } .comparison-card dl > div { flex-direction: row; } }
.comparison-section.is-stale .comparison-card, .loan-breakdown.is-stale { opacity: .45; }