Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,600&display=swap" rel="stylesheet">
<style>*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Plus Jakarta Sans',sans-serif;background:linear-gradient(180deg,#f0f4ff 0%,#dbe4ff 100%);color:#0f1845;line-height:1.5;min-height:100vh}
.s{padding:36px;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.in{background:#fff;border-radius:18px;padding:32px;display:flex;flex-direction:column;gap:18px;box-shadow:0 16px 48px -24px rgba(15,24,69,.18)}
.in h2{font-family:'Fraunces',serif;font-weight:600;font-size:24px;letter-spacing:-.015em}
.in h2 em{font-style:italic;color:#3d4ad9}
.in p{font-size:13px;color:#3a4670;margin-bottom:6px}
.fld{display:flex;flex-direction:column;gap:8px}
.fld label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:600;color:#0f1845}
.fld label b{font-weight:600;color:#3d4ad9;font-family:'Plus Jakarta Sans',sans-serif;font-variant-numeric:tabular-nums}
.fld input[type=range]{-webkit-appearance:none;width:100%;height:6px;background:linear-gradient(90deg,#3d4ad9 0%,#3d4ad9 60%,#e0e7ff 60%);border-radius:3px;outline:none;cursor:pointer}
.fld input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px rgba(15,24,69,.2),0 0 0 2px #3d4ad9}
.fld .marks{display:flex;justify-content:space-between;font-size:11px;color:#7a8aa8;margin-top:2px}
.fld input[type=text],.fld select{padding:11px 14px;border:1.5px solid #e0e7ff;border-radius:10px;font-family:inherit;font-size:14px;background:#fafbff;color:#0f1845;width:100%}
.fld input[type=text]:focus,.fld select:focus{outline:none;border-color:#3d4ad9;background:#fff}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.tile{padding:10px 8px;border:1.5px solid #e0e7ff;border-radius:8px;font-family:inherit;background:#fafbff;cursor:pointer;font-size:12px;font-weight:500;color:#0f1845;text-align:center}
.tile:hover{border-color:#3d4ad9}
.tile.sel{background:#3d4ad9;color:#fff;border-color:#3d4ad9}
.out{background:linear-gradient(135deg,#0f1845,#1a2670);color:#fff;border-radius:18px;padding:32px;display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
.out::before{content:"";position:absolute;top:-100px;right:-100px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(125,148,255,.4),transparent 70%);pointer-events:none}
.out h2{font-family:'Fraunces',serif;font-weight:600;font-size:18px;color:rgba(255,255,255,.7);letter-spacing:.04em;text-transform:uppercase;font-style:italic;font-size:14px}
.big{font-family:'Fraunces',serif;font-size:64px;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;position:relative;z-index:2}
.big small{display:inline;font-size:21px;color:rgba(255,255,255,.7);font-weight:400;letter-spacing:0;font-family:'Plus Jakarta Sans',sans-serif;margin-left:4px}
.big em{font-style:italic;color:#7d94ff}
.subline{font-size:14px;color:rgba(255,255,255,.7);line-height:1.5}
.subline b{color:#fff;font-weight:600}
.brk{display:flex;flex-direction:column;gap:8px;padding:18px 0;border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15)}
.brk-row{display:flex;justify-content:space-between;font-size:13px}
.brk-row span{color:rgba(255,255,255,.7)}
.brk-row b{font-weight:600;font-variant-numeric:tabular-nums}
.cta{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.btn{padding:14px;background:#fff;color:#0f1845;border:none;font-family:inherit;font-weight:600;font-size:15px;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{background:#7d94ff;color:#0f1845}
.note{font-size:12px;color:rgba(255,255,255,.5);text-align:center;font-style:italic;font-family:'Fraunces',serif}
@media(max-width:880px){.s{grid-template-columns:1fr;padding:18px;gap:14px}.big{font-size:48px}.row{grid-template-columns:1fr}}</style></head><body><section class="s">
<div class="in"><h2>What's your <em>monthly</em> going to be?</h2><p>Estimate in 4 quick fields. No contact info required, no soft credit pull.</p>
<div class="fld"><label>Loan amount<b>$420,000</b></label><input type="range" min="50000" max="800000" value="420000"><div class="marks"><span>$50k</span><span>$400k</span><span>$800k</span></div></div>
<div class="row"><div class="fld"><label>Loan type</label><div class="tile-grid"><button class="tile">15-yr fixed</button><button class="tile sel">30-yr fixed</button><button class="tile">5/1 ARM</button></div></div>
<div class="fld"><label>Down %</label><div class="tile-grid"><button class="tile">5%</button><button class="tile sel">20%</button><button class="tile">30%</button></div></div></div>
<div class="row"><div class="fld"><label>Property tax / yr</label><input type="text" value="$5,200"></div><div class="fld"><label>HOA / mo</label><input type="text" value="$0"></div></div>
<div class="fld"><label>ZIP code</label><input type="text" value="33701" placeholder="for accurate insurance"></div></div>
<div class="out"><h2>Estimated monthly payment</h2><div class="big">$<em>2,684</em><small>/ mo</small></div>
<p class="subline">Includes principal, interest, taxes, insurance & HOA. <b>Locked rate of 6.45%</b> based on 740+ FICO.</p>
<div class="brk">
<div class="brk-row"><span>Principal & interest</span><b>$2,118</b></div>
<div class="brk-row"><span>Property tax</span><b>$433</b></div>
<div class="brk-row"><span>Homeowners insurance</span><b>$133</b></div>
<div class="brk-row"><span>HOA / Other</span><b>—</b></div>
</div>
<div class="cta"><button class="btn">Get the locked rate quote →</button><div class="note">"Numbers locked for 90 days · No credit pull"</div></div>
</div>
</section></body></html>