  
    
<head>
<meta charset=&quot;UTF-8&quot;>
<meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>
<title>Mortgage Calculator</title>
<style>
:root {
  --bg:      #eef2ff;
  --surface: #ffffff;
  --s2:      #f8fafc;
  --s3:      #f1f5f9;
  --border:  #e2e8f0;
  --text:    #0f172a;
  --t2:      #475569;
  --t3:      #94a3b8;
  --indigo:  #6366f1;
  --indigo-d:#4f46e5;
  --indigo-l:#eef2ff;
  --blue:    #3b82f6;
  --amber:   #f59e0b;
  --green:   #10b981;
  --rose:    #f43f5e;
  --violet:  #8b5cf6;
  --vl:      #f5f3ff;
  --r:       18px;
  --rs:      10px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px 72px;
  color: var(--text);
}

.calc {
  width: 100%;
  max-width: 980px;
  background: var(--surface);
  border-radius: 28px;
  box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 24px 72px rgba(0,0,0,.11);
  overflow: hidden;
}

/* ── HEADER ── */
.head {
  background: linear-gradient(140deg, #080d1f 0%, #10192e 55%, #172238 100%);
  padding: 28px 40px 24px;
  position: relative;
  overflow: hidden;
}
.head::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 90% at 85% -10%, rgba(99,102,241,.30) 0%, transparent 65%),
    radial-gradient(ellipse 35% 55% at -5%  110%, rgba(139,92,246,.18) 0%, transparent 65%);
  pointer-events: none;
}
.head::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
}
.head-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.head-text h1 { font-size: 1.35rem; font-weight: 800; color: #fff; letter-spacing: -.025em; }
.head-text p  { font-size: .8rem; color: rgba(255,255,255,.4); margin-top: 3px; }

.mode-toggle {
  display: flex;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50px;
  padding: 4px;
  gap: 2px;
}
.mode-btn {
  padding: 8px 18px; border: none; background: none; cursor: pointer;
  color: rgba(255,255,255,.45); font-size: .8rem; font-weight: 700;
  border-radius: 50px; transition: background .2s, color .2s; white-space: nowrap;
}
.mode-btn.active {
  background: var(--indigo); color: #fff;
  box-shadow: 0 2px 10px rgba(99,102,241,.45);
}

/* ── BODY ── */
.body { display: grid; grid-template-columns: 1fr 1fr; }
.col-in  { padding: 32px 38px; border-right: 1px solid var(--border); }
.col-out { padding: 32px 38px; }

/* ── FIELDS ── */
.fg { margin-bottom: 20px; }
.fg:last-child { margin-bottom: 0; }

.fl {
  display: block;
  font-size: .7rem; font-weight: 800; color: var(--t3);
  text-transform: uppercase; letter-spacing: .075em;
  margin-bottom: 7px;
}

.iw { position: relative; display: flex; align-items: center; }
.sym { position: absolute; font-size: .87rem; font-weight: 600; color: var(--t3); pointer-events: none; z-index: 1; }
.sl { left: 13px; } .sr { right: 13px; }

input[type=number] {
  width: 100%; height: 44px; padding: 0 13px;
  border: 1.5px solid var(--border); border-radius: var(--rs);
  font-size: .96rem; font-weight: 500; color: var(--text);
  background: var(--surface); outline: none;
  -moz-appearance: textfield;
  transition: border-color .18s, box-shadow .18s;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }
input[type=number]:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
input[readonly] { background: var(--s2); color: var(--t2); cursor: default; }
input[readonly]:focus { border-color: var(--border); box-shadow: none; }
.iw.has-sl input { padding-left: 28px; }
.iw.has-sr input { padding-right: 28px; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

/* ── TERM PILLS ── */
.terms { display: flex; gap: 8px; }
.term-btn {
  flex: 1; height: 44px;
  border: 1.5px solid var(--border); border-radius: var(--rs);
  background: var(--surface); font-size: .84rem; font-weight: 700;
  color: var(--t2); cursor: pointer; transition: all .18s;
}
.term-btn:hover { border-color: var(--indigo); color: var(--indigo); }
.term-btn.active { background: var(--indigo); border-color: var(--indigo); color: #fff; box-shadow: 0 2px 8px rgba(99,102,241,.3); }

/* ── SECTION DIVIDER ── */
.sec { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 6px; }
.sec-lbl {
  font-size: .69rem; font-weight: 800; color: var(--t3);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px;
}

/* ── PMI CALLOUT ── */
.pmi-callout {
  display: none;
  align-items: flex-start; gap: 10px;
  background: #fff7ed; border: 1.5px solid #fed7aa;
  border-radius: var(--rs); padding: 11px 14px; margin-bottom: 14px;
  animation: fadeIn .22s ease;
}
.pmi-callout.show { display: flex; }
.pmi-ico { font-size: .95rem; flex-shrink: 0; margin-top: 1px; }
.pmi-text { font-size: .79rem; color: #9a3412; font-weight: 500; line-height: 1.5; }
.pmi-text strong { font-weight: 800; display: block; margin-bottom: 1px; font-size: .8rem; }
.pmi-fields { display: none; }
.pmi-fields.show { display: block; }

/* ── VA BADGE ── */
.va-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--vl); color: var(--violet);
  border: 1px solid #ddd6fe; border-radius: 20px;
  padding: 4px 12px 4px 9px;
  font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 18px;
}

/* ── GAP DISPLAY ── */
.gap-card {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, var(--vl), #ede9fe);
  border: 1.5px solid #c4b5fd; border-radius: var(--rs);
  padding: 14px 18px; margin-bottom: 18px;
}
.gap-lbl { font-size: .7rem; font-weight: 800; color: var(--violet); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 3px; }
.gap-val { font-size: 1.5rem; font-weight: 900; color: #5b21b6; letter-spacing: -.02em; }
.gap-icon { opacity: .5; }

.gap-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
.gap-btn {
  flex: 1; height: 40px;
  border: 1.5px solid var(--border); border-radius: var(--rs);
  background: var(--surface); font-size: .83rem; font-weight: 700;
  color: var(--t2); cursor: pointer; transition: all .18s;
}
.gap-btn:hover { border-color: var(--violet); color: var(--violet); }
.gap-btn.active { background: var(--violet); border-color: var(--violet); color: #fff; }
.gap-loan-fields { display: none; }
.gap-loan-fields.show { display: block; }

/* ── HERO ── */
.hero {
  background: linear-gradient(145deg, #080d1f 0%, #10192e 60%, #1a273d 100%);
  border-radius: 20px; padding: 22px 20px 18px;
  text-align: center; margin-bottom: 20px;
  position: relative; overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 100% at 50% 120%, rgba(99,102,241,.28) 0%, transparent 70%);
}
.hero > * { position: relative; }
.hero-lbl { font-size: .68rem; font-weight: 800; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 7px; }
.hero-amt { font-size: 3.1rem; font-weight: 900; color: #fff; letter-spacing: -.035em; line-height: 1; margin-bottom: 10px; }
.hero-bd {
  display: flex; justify-content: center; gap: 0;
  border-top: 1px solid rgba(255,255,255,.08); padding-top: 12px;
}
.hb {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 13px; border-right: 1px solid rgba(255,255,255,.08);
}
.hb:last-child { border-right: none; }
.hb-v { font-size: .88rem; font-weight: 700; color: rgba(255,255,255,.88); }
.hb-n { font-size: .65rem; color: rgba(255,255,255,.3); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-top: 1px; }

/* ── CHART ROW ── */
.chart-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
#donut { flex-shrink: 0; }
.legend { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.lg-item { display: flex; align-items: flex-start; gap: 9px; }
.lg-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.lg-nm { font-size: .69rem; font-weight: 800; color: var(--t3); text-transform: uppercase; letter-spacing: .05em; }
.lg-vl { font-size: .93rem; font-weight: 700; color: var(--text); margin-top: 1px; }

/* ── STATS ── */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 16px; }
.stat { background: var(--s2); border: 1px solid var(--s3); border-radius: 12px; padding: 13px 14px; }
.stat-nm { font-size: .68rem; font-weight: 800; color: var(--t3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.stat-vl { font-size: .96rem; font-weight: 700; color: var(--text); }

/* ── AMORT BTN ── */
.amort-btn {
  width: 100%; height: 40px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--rs);
  font-size: .82rem; font-weight: 700; color: var(--t2); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: all .18s;
}
.amort-btn:hover { border-color: var(--indigo); color: var(--indigo); }

/* ── AMORT TABLE ── */
.amort-wrap { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.amort-wrap.open { max-height: 440px; border-top: 1px solid var(--border); }
.amort-inner { padding: 24px 40px 32px; overflow-y: auto; max-height: 440px; }
table { width: 100%; border-collapse: collapse; font-size: .83rem; }
thead th {
  background: var(--s2); padding: 10px 14px; text-align: right;
  font-size: .69rem; font-weight: 800; color: var(--t3);
  text-transform: uppercase; letter-spacing: .05em;
  position: sticky; top: 0; border-bottom: 1px solid var(--border);
}
thead th:first-child { text-align: left; }
tbody td { padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--s3); color: var(--t2); font-weight: 500; }
tbody td:first-child { text-align: left; font-weight: 700; color: var(--text); }
tbody tr:hover td { background: var(--s2); }
tbody tr:last-child td { border-bottom: none; }

/* ── UTILS ── */
.hidden { display: none !important; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }

/* ── RESPONSIVE ── */
@media (max-width: 700px) {
  body { padding: 0 0 56px; }
  .calc { border-radius: 0; box-shadow: none; }
  .head { padding: 22px 20px 20px; }
  .head-inner { flex-direction: column; align-items: flex-start; }
  .body { grid-template-columns: 1fr; }
  .col-in  { border-right: none; border-bottom: 1px solid var(--border); padding: 24px 20px; }
  .col-out { padding: 24px 20px; }
  .amort-inner { padding: 18px 20px 28px; }
  .hero-amt { font-size: 2.5rem; }
  .row3 { grid-template-columns: 1fr 1fr; }
}
</style>
</head>
<body>
<div class=&quot;calc&quot;>

<!-- HEADER -->
<div class=&quot;head&quot;>
  <div class=&quot;head-inner&quot;>
    <div class=&quot;head-text&quot;>
      <h1>Mortgage Calculator</h1>
      <p>Monthly payments, PMI, and VA assumable loans</p>
    </div>
    <div class=&quot;mode-toggle&quot;>
      <button class=&quot;mode-btn active&quot; onclick=&quot;setMode('standard',this)&quot;>Standard</button>
      <button class=&quot;mode-btn&quot;        onclick=&quot;setMode('va',this)&quot;>VA Assumable</button>
    </div>
  </div>
</div>

<!-- BODY -->
<div class=&quot;body&quot;>

  <!-- ═══ INPUTS ═══ -->
  <div class=&quot;col-in&quot;>

    <!-- ── STANDARD ── -->
    <div id=&quot;std-in&quot;>

      <div class=&quot;fg&quot;>
        <label class=&quot;fl&quot;>Home Price</label>
        <div class=&quot;iw has-sl&quot;><span class=&quot;sym sl&quot;>$</span>
          <input type=&quot;number&quot; id=&quot;s-price&quot; value=&quot;400000&quot; min=&quot;0&quot; step=&quot;1000&quot; oninput=&quot;onPriceChange()&quot;>
        </div>
      </div>

      <div class=&quot;fg&quot;>
        <label class=&quot;fl&quot;>Down Payment</label>
        <div class=&quot;row2&quot;>
          <div class=&quot;iw has-sl&quot;><span class=&quot;sym sl&quot;>$</span>
            <input type=&quot;number&quot; id=&quot;s-down-amt&quot; value=&quot;80000&quot; min=&quot;0&quot; oninput=&quot;syncDown('amt')&quot;>
          </div>
          <div class=&quot;iw has-sr&quot;><span class=&quot;sym sr&quot;>%</span>
            <input type=&quot;number&quot; id=&quot;s-down-pct&quot; value=&quot;20&quot; min=&quot;0&quot; max=&quot;100&quot; step=&quot;.5&quot; oninput=&quot;syncDown('pct')&quot;>
          </div>
        </div>
      </div>

      <div class=&quot;fg&quot;>
        <label class=&quot;fl&quot;>Interest Rate (Annual)</label>
        <div class=&quot;iw has-sr&quot;><span class=&quot;sym sr&quot;>%</span>
          <input type=&quot;number&quot; id=&quot;s-rate&quot; value=&quot;6.5&quot; min=&quot;0&quot; max=&quot;30&quot; step=&quot;.05&quot; oninput=&quot;calcStd()&quot;>
        </div>
      </div>

      <div class=&quot;fg&quot;>
        <label class=&quot;fl&quot;>Loan Term</label>
        <div class=&quot;terms&quot;>
          <button class=&quot;term-btn&quot;        onclick=&quot;setTerm(10,this)&quot;>10 yr</button>
          <button class=&quot;term-btn&quot;        onclick=&quot;setTerm(15,this)&quot;>15 yr</button>
          <button class=&quot;term-btn&quot;        onclick=&quot;setTerm(20,this)&quot;>20 yr</button>
          <button class=&quot;term-btn active&quot; onclick=&quot;setTerm(30,this)&quot;>30 yr</button>
        </div>
      </div>

      <!-- PMI -->
      <div class=&quot;sec&quot;>
        <div class=&quot;sec-lbl&quot;>Private Mortgage Insurance (PMI)</div>
        <div class=&quot;pmi-callout&quot; id=&quot;pmi-callout&quot;>
          <span class=&quot;pmi-ico&quot;>⚠️</span>
          <div class=&quot;pmi-text&quot;>
            <strong>PMI likely required</strong>
            Down payments under 20% usually require PMI. PMI is removed once you reach 20% equity.
          </div>
        </div>
        <div class=&quot;pmi-fields&quot; id=&quot;pmi-fields&quot;>
          <div class=&quot;row2&quot;>
            <div class=&quot;fg&quot;>
              <label class=&quot;fl&quot;>Annual PMI Rate</label>
              <div class=&quot;iw has-sr&quot;><span class=&quot;sym sr&quot;>%</span>
                <input type=&quot;number&quot; id=&quot;pmi-rate&quot; value=&quot;0.85&quot; min=&quot;0&quot; max=&quot;5&quot; step=&quot;.05&quot; oninput=&quot;calcStd()&quot;>
              </div>
            </div>
            <div class=&quot;fg&quot;>
              <label class=&quot;fl&quot;>Monthly PMI</label>
              <div class=&quot;iw has-sl&quot;><span class=&quot;sym sl&quot;>$</span>
                <input type=&quot;number&quot; id=&quot;pmi-mo&quot; value=&quot;0&quot; min=&quot;0&quot; readonly>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Extras -->
      <div class=&quot;sec&quot;>
        <div class=&quot;sec-lbl&quot;>Monthly Costs (Optional)</div>
        <div class=&quot;row3&quot;>
          <div class=&quot;fg&quot;>
            <label class=&quot;fl&quot;>Prop. Tax</label>
            <div class=&quot;iw has-sl&quot;><span class=&quot;sym sl&quot;>$</span>
              <input type=&quot;number&quot; id=&quot;s-tax&quot; value=&quot;333&quot; min=&quot;0&quot; oninput=&quot;calcStd()&quot;>
            </div>
          </div>
          <div class=&quot;fg&quot;>
            <label class=&quot;fl&quot;>Insurance</label>
            <div class=&quot;iw has-sl&quot;><span class=&quot;sym sl&quot;>$</span>
              <input type=&quot;number&quot; id=&quot;s-ins&quot; value=&quot;120&quot; min=&quot;0&quot; oninput=&quot;calcStd()&quot;>
            </div>
          </div>
          <div class=&quot;fg&quot;>
            <label class=&quot;fl&quot;>HOA</label>
            <div class=&quot;iw has-sl&quot;><span class=&quot;sym sl&quot;>$</span>
              <input type=&quot;number&quot; id=&quot;s-hoa&quot; value=&quot;0&quot; min=&quot;0&quot; oninput=&quot;calcStd()&quot;>
            </div>
          </div>
        </div>
      </div>

    </div><!-- /std-in -->

    <!-- ── VA ASSUMABLE ── -->
    <div id=&quot;va-in&quot; class=&quot;hidden&quot;>

      <div class=&quot;va-badge&quot;>
        <svg width=&quot;12&quot; height=&quot;12&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; color=&quot;#8b5cf6&quot;><path d=&quot;M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z&quot;/></svg>
        VA Assumable Loan
      </div>

      <div class=&quot;fg&quot;>
        <label class=&quot;fl&quot;>Home Sale Price</label>
        <div class=&quot;iw has-sl&quot;><span class=&quot;sym sl&quot;>$</span>
          <input type=&quot;number&quot; id=&quot;va-price&quot; value=&quot;500000&quot; min=&quot;0&quot; step=&quot;1000&quot; oninput=&quot;calcVA()&quot;>
        </div>
      </div>

      <div class=&quot;fg&quot;>
        <label class=&quot;fl&quot;>Existing VA Loan Balance (to assume)</label>
        <div class=&quot;iw has-sl&quot;><span class=&quot;sym sl&quot;>$</span>
          <input type=&quot;number&quot; id=&quot;va-bal&quot; value=&quot;320000&quot; min=&quot;0&quot; step=&quot;1000&quot; oninput=&quot;calcVA()&quot;>
        </div>
      </div>

      <div class=&quot;row2&quot;>
        <div class=&quot;fg&quot;>
          <label class=&quot;fl&quot;>VA Loan Rate</label>
          <div class=&quot;iw has-sr&quot;><span class=&quot;sym sr&quot;>%</span>
            <input type=&quot;number&quot; id=&quot;va-rate&quot; value=&quot;2.75&quot; min=&quot;0&quot; max=&quot;20&quot; step=&quot;.05&quot; oninput=&quot;calcVA()&quot;>
          </div>
        </div>
        <div class=&quot;fg&quot;>
          <label class=&quot;fl&quot;>Remaining Term</label>
          <div class=&quot;iw has-sr&quot;><span class=&quot;sym sr&quot;>yr</span>
            <input type=&quot;number&quot; id=&quot;va-term&quot; value=&quot;28&quot; min=&quot;1&quot; max=&quot;30&quot; oninput=&quot;calcVA()&quot;>
          </div>
        </div>
      </div>

      <!-- Gap display -->
      <div class=&quot;gap-card&quot;>
        <div>
          <div class=&quot;gap-lbl&quot;>Gap &amp;nbsp;(Sale Price − VA Balance)</div>
          <div class=&quot;gap-val&quot; id=&quot;gap-amt&quot;>$180,000</div>
        </div>
        <svg class=&quot;gap-icon&quot; width=&quot;30&quot; height=&quot;30&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;#8b5cf6&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot;><path d=&quot;M8 7h13M8 12h13M8 17h13M3 7h.01M3 12h.01M3 17h.01&quot;/></svg>
      </div>

      <div class=&quot;sec-lbl&quot;>Cover the Gap With</div>
      <div class=&quot;gap-toggle&quot;>
        <button class=&quot;gap-btn&quot;        onclick=&quot;setGap('cash',this)&quot;>Cash / Equity</button>
        <button class=&quot;gap-btn active&quot; onclick=&quot;setGap('loan',this)&quot;>Second Loan</button>
      </div>

      <div class=&quot;gap-loan-fields show&quot; id=&quot;gap-loan-fields&quot;>
        <div class=&quot;row2&quot;>
          <div class=&quot;fg&quot;>
            <label class=&quot;fl&quot;>2nd Loan Rate</label>
            <div class=&quot;iw has-sr&quot;><span class=&quot;sym sr&quot;>%</span>
              <input type=&quot;number&quot; id=&quot;gap-rate&quot; value=&quot;7.0&quot; min=&quot;0&quot; max=&quot;30&quot; step=&quot;.05&quot; oninput=&quot;calcVA()&quot;>
            </div>
          </div>
          <div class=&quot;fg&quot;>
            <label class=&quot;fl&quot;>2nd Loan Term</label>
            <div class=&quot;iw has-sr&quot;><span class=&quot;sym sr&quot;>yr</span>
              <input type=&quot;number&quot; id=&quot;gap-term&quot; value=&quot;30&quot; min=&quot;1&quot; max=&quot;30&quot; oninput=&quot;calcVA()&quot;>
            </div>
          </div>
        </div>
      </div>

      <div class=&quot;sec&quot;>
        <div class=&quot;sec-lbl&quot;>Monthly Costs (Optional)</div>
        <div class=&quot;row3&quot;>
          <div class=&quot;fg&quot;>
            <label class=&quot;fl&quot;>Prop. Tax</label>
            <div class=&quot;iw has-sl&quot;><span class=&quot;sym sl&quot;>$</span>
              <input type=&quot;number&quot; id=&quot;va-tax&quot; value=&quot;333&quot; min=&quot;0&quot; oninput=&quot;calcVA()&quot;>
            </div>
          </div>
          <div class=&quot;fg&quot;>
            <label class=&quot;fl&quot;>Insurance</label>
            <div class=&quot;iw has-sl&quot;><span class=&quot;sym sl&quot;>$</span>
              <input type=&quot;number&quot; id=&quot;va-ins&quot; value=&quot;120&quot; min=&quot;0&quot; oninput=&quot;calcVA()&quot;>
            </div>
          </div>
          <div class=&quot;fg&quot;>
            <label class=&quot;fl&quot;>HOA</label>
            <div class=&quot;iw has-sl&quot;><span class=&quot;sym sl&quot;>$</span>
              <input type=&quot;number&quot; id=&quot;va-hoa&quot; value=&quot;0&quot; min=&quot;0&quot; oninput=&quot;calcVA()&quot;>
            </div>
          </div>
        </div>
      </div>

    </div><!-- /va-in -->

  </div><!-- /col-in -->

  <!-- ═══ RESULTS ═══ -->
  <div class=&quot;col-out&quot;>

    <div class=&quot;hero&quot;>
      <div class=&quot;hero-lbl&quot;>Total Monthly Payment</div>
      <div class=&quot;hero-amt&quot; id=&quot;hero-amt&quot;>—</div>
      <div class=&quot;hero-bd&quot; id=&quot;hero-bd&quot;></div>
    </div>

    <div class=&quot;chart-row&quot;>
      <canvas id=&quot;donut&quot; width=&quot;118&quot; height=&quot;118&quot;></canvas>
      <div class=&quot;legend&quot; id=&quot;legend&quot;></div>
    </div>

    <div class=&quot;stats&quot; id=&quot;stats&quot;></div>

    <button class=&quot;amort-btn&quot; id=&quot;amort-btn&quot; onclick=&quot;toggleAmort()&quot;>
      <svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot; stroke-linecap=&quot;round&quot;><line x1=&quot;3&quot; y1=&quot;6&quot; x2=&quot;21&quot; y2=&quot;6&quot;/><line x1=&quot;3&quot; y1=&quot;12&quot; x2=&quot;21&quot; y2=&quot;12&quot;/><line x1=&quot;3&quot; y1=&quot;18&quot; x2=&quot;21&quot; y2=&quot;18&quot;/></svg>
      View Amortization Schedule
    </button>

  </div><!-- /col-out -->
</div><!-- /body -->

<!-- AMORT TABLE -->
<div class=&quot;amort-wrap&quot; id=&quot;amort-wrap&quot;>
  <div class=&quot;amort-inner&quot;>
    <table>
      <thead>
        <tr>
          <th>Year</th><th>Principal Paid</th><th>Interest Paid</th><th>Remaining Balance</th>
        </tr>
      </thead>
      <tbody id=&quot;amort-body&quot;></tbody>
    </table>
  </div>
</div>

</div><!-- /calc -->
<script>
// ── state ──
let mode    = 'standard';
let term    = 30;
let gapMode = 'loan';

const $   = id => document.getElementById(id);
const num = id => Math.max(parseFloat($(id).value) || 0, 0);
const fmt = n  => '$' + Math.round(Math.max(n, 0)).toLocaleString('en-US');

// ── mode switch ──
function setMode(m, btn) {
  mode = m;
  document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  $('std-in').classList.toggle('hidden', m !== 'standard');
  $('va-in').classList.toggle('hidden', m !== 'va');
  m === 'va' ? calcVA() : calcStd();
}

// ── term ──
function setTerm(yr, btn) {
  term = yr;
  document.querySelectorAll('.term-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  calcStd();
}

// ── down payment sync ──
function onPriceChange() {
  const price = num('s-price');
  const pct   = num('s-down-pct');
  $('s-down-amt').value = Math.round(price * pct / 100);
  calcStd();
}
function syncDown(src) {
  const price = num('s-price');
  if (src === 'amt') {
    $('s-down-pct').value = price > 0 ? parseFloat((num('s-down-amt') / price * 100).toFixed(1)) : 0;
  } else {
    $('s-down-amt').value = Math.round(price * num('s-down-pct') / 100);
  }
  calcStd();
}

// ── gap toggle ──
function setGap(g, btn) {
  gapMode = g;
  document.querySelectorAll('.gap-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  $('gap-loan-fields').classList.toggle('show', g === 'loan');
  calcVA();
}

// ── payment formula ──
function pmt(principal, annRate, years) {
  if (principal <= 0) return 0;
  const n = years * 12;
  const r = annRate / 100 / 12;
  if (r === 0) return principal / n;
  return principal * r * Math.pow(1 + r, n) / (Math.pow(1 + r, n) - 1);
}

// ─────────────────────────────────────────
// STANDARD CALCULATOR
// ─────────────────────────────────────────
function calcStd() {
  const price   = num('s-price');
  const down    = num('s-down-amt');
  const rate    = num('s-rate');
  const tax     = num('s-tax');
  const ins     = num('s-ins');
  const hoa     = num('s-hoa');
  const pmiRate = num('pmi-rate');

  const loan = Math.max(price - down, 0);
  const ltv  = price > 0 ? loan / price * 100 : 0;

  // PMI
  const needsPMI  = ltv > 80;
  $('pmi-callout').classList.toggle('show', needsPMI);
  $('pmi-fields').classList.toggle('show', needsPMI);
  const pmiMo = needsPMI ? loan * (pmiRate / 100) / 12 : 0;
  $('pmi-mo').value = Math.round(pmiMo);

  const pi       = pmt(loan, rate, term);
  const extras   = tax + ins + hoa + pmiMo;
  const total    = pi + extras;
  const n        = term * 12;
  const totalInt = Math.max(pi * n - loan, 0);
  const totalPMI = pmiMo * n;

  // Hero
  const bd = [
    { v: fmt(pi), n: 'P&amp;I' },
    ...(pmiMo > 0 ? [{ v: fmt(pmiMo), n: 'PMI' }] : []),
    ...(tax + ins + hoa > 0 ? [{ v: fmt(tax + ins + hoa), n: 'Tax/Ins/HOA' }] : []),
  ];
  renderHero(total, bd);

  // Chart
  const segs = [
    { v: loan,     color: '#6366f1', label: 'Principal',     val: loan },
    { v: totalInt, color: '#f59e0b', label: 'Total Interest', val: totalInt },
    { v: down,     color: '#10b981', label: 'Down Payment',  val: down },
    ...(pmiMo > 0 ? [{ v: totalPMI, color: '#f43f5e', label: 'Total PMI', val: totalPMI }] : []),
  ].filter(s => s.v > 0);
  renderLegend(segs);
  drawDonut(segs);

  // Stats
  const stats = [
    { n: 'P&amp;I Monthly',    v: fmt(pi) },
    { n: 'Loan Amount',    v: fmt(loan) },
    { n: 'Total Interest', v: fmt(totalInt) },
    { n: 'Total Cost',     v: fmt(pi * n + down + totalPMI) },
    ...(pmiMo > 0 ? [
      { n: 'Monthly PMI', v: fmt(pmiMo) },
      { n: 'LTV Ratio',   v: ltv.toFixed(1) + '%' },
    ] : []),
  ];
  renderStats(stats);

  buildTable([{ loan, rate, years: term, pi }]);
}

// ─────────────────────────────────────────
// VA ASSUMABLE CALCULATOR
// ─────────────────────────────────────────
function calcVA() {
  const salePrice = num('va-price');
  const vaBal     = num('va-bal');
  const vaRate    = num('va-rate');
  const vaTerm    = Math.max(num('va-term'), 1);
  const gapRate   = num('gap-rate');
  const gapTerm   = Math.max(num('gap-term'), 1);
  const tax       = num('va-tax');
  const ins       = num('va-ins');
  const hoa       = num('va-hoa');

  const gap = Math.max(salePrice - vaBal, 0);
  $('gap-amt').textContent = fmt(gap);

  const vaPI    = pmt(vaBal, vaRate, vaTerm);
  const vaTotI  = Math.max(vaPI * vaTerm * 12 - vaBal, 0);

  let gapPI = 0, gapTotI = 0;
  if (gapMode === 'loan' &amp;&amp; gap > 0) {
    gapPI    = pmt(gap, gapRate, gapTerm);
    gapTotI  = Math.max(gapPI * gapTerm * 12 - gap, 0);
  }

  const extras = tax + ins + hoa;
  const total  = vaPI + gapPI + extras;

  // Hero
  const bd = [
    { v: fmt(vaPI), n: 'VA P&amp;I' },
    ...(gapPI > 0 ? [{ v: fmt(gapPI), n: '2nd Loan P&amp;I' }] : []),
    ...(extras > 0 ? [{ v: fmt(extras), n: 'Tax/Ins/HOA' }] : []),
  ];
  renderHero(total, bd);

  // Chart
  const segs = [
    { v: vaBal,   color: '#8b5cf6', label: 'VA Principal',  val: vaBal  },
    { v: vaTotI,  color: '#a78bfa', label: 'VA Interest',   val: vaTotI },
    ...(gapMode === 'loan' &amp;&amp; gap > 0 ? [
      { v: gap,     color: '#3b82f6', label: 'Gap Principal', val: gap     },
      { v: gapTotI, color: '#93c5fd', label: 'Gap Interest',  val: gapTotI },
    ] : gap > 0 ? [
      { v: gap,     color: '#10b981', label: 'Gap (Cash)',    val: gap     },
    ] : []),
  ].filter(s => s.v > 0);
  renderLegend(segs);
  drawDonut(segs);

  // Stats
  const stats = [
    { n: 'VA Loan P&amp;I',   v: fmt(vaPI) },
    { n: 'VA Loan Rate',  v: vaRate.toFixed(2) + '%' },
    { n: 'VA Total Int.', v: fmt(vaTotI) },
    ...(gapMode === 'loan' &amp;&amp; gap > 0 ? [
      { n: '2nd Loan P&amp;I',  v: fmt(gapPI) },
      { n: '2nd Loan Rate', v: gapRate.toFixed(2) + '%' },
      { n: '2nd Total Int.', v: fmt(gapTotI) },
    ] : [
      { n: 'Gap (Cash)',  v: fmt(gap) },
      { n: 'Total P&amp;I',  v: fmt(vaPI) },
    ]),
  ];
  renderStats(stats);

  const loans = [{ loan: vaBal, rate: vaRate, years: vaTerm, pi: vaPI }];
  if (gapMode === 'loan' &amp;&amp; gap > 0)
    loans.push({ loan: gap, rate: gapRate, years: gapTerm, pi: gapPI });
  buildTable(loans);
}

// ─────────────────────────────────────────
// RENDER HELPERS
// ─────────────────────────────────────────
function renderHero(total, items) {
  $('hero-amt').textContent = fmt(total);
  $('hero-bd').innerHTML = items.map(i =>
    `<div class=&quot;hb&quot;><div class=&quot;hb-v&quot;>${i.v}</div><div class=&quot;hb-n&quot;>${i.n}</div></div>`
  ).join('');
}

function renderLegend(segs) {
  $('legend').innerHTML = segs.map(s =>
    `<div class=&quot;lg-item&quot;>
      <div class=&quot;lg-dot&quot; style=&quot;background:${s.color}&quot;></div>
      <div><div class=&quot;lg-nm&quot;>${s.label}</div><div class=&quot;lg-vl&quot;>${fmt(s.val)}</div></div>
    </div>`
  ).join('');
}

function renderStats(items) {
  $('stats').innerHTML = items.map(s =>
    `<div class=&quot;stat&quot;><div class=&quot;stat-nm&quot;>${s.n}</div><div class=&quot;stat-vl&quot;>${s.v}</div></div>`
  ).join('');
}

// ─────────────────────────────────────────
// DONUT CHART
// ─────────────────────────────────────────
function drawDonut(segs) {
  const canvas = $('donut');
  const ctx = canvas.getContext('2d');
  const W = canvas.width, H = canvas.height;
  ctx.clearRect(0, 0, W, H);

  const total = segs.reduce((s, x) => s + x.v, 0);
  if (total <= 0) return;

  const cx = W / 2, cy = H / 2, outer = 54, inner = 34;
  let angle = -Math.PI / 2;

  segs.forEach(seg => {
    if (seg.v <= 0) return;
    const sweep = seg.v / total * Math.PI * 2;
    // segment
    ctx.beginPath();
    ctx.arc(cx, cy, outer, angle, angle + sweep);
    ctx.arc(cx, cy, inner, angle + sweep, angle, true);
    ctx.closePath();
    ctx.fillStyle = seg.color;
    ctx.fill();
    // gap between segments (white line)
    ctx.beginPath();
    ctx.moveTo(cx + Math.cos(angle + sweep) * inner, cy + Math.sin(angle + sweep) * inner);
    ctx.lineTo(cx + Math.cos(angle + sweep) * outer, cy + Math.sin(angle + sweep) * outer);
    ctx.strokeStyle = '#fff';
    ctx.lineWidth = 2;
    ctx.stroke();
    angle += sweep;
  });

  // center white disc
  ctx.beginPath();
  ctx.arc(cx, cy, inner - 1, 0, Math.PI * 2);
  ctx.fillStyle = '#fff';
  ctx.fill();
}

// ─────────────────────────────────────────
// AMORTIZATION TABLE
// ─────────────────────────────────────────
function buildTable(loans) {
  const tbody = $('amort-body');
  tbody.innerHTML = '';

  const maxYrs = Math.max(...loans.map(l => l.years));
  const state  = loans.map(l => ({
    balance:   l.loan,
    mRate:     l.rate / 100 / 12,
    pi:        l.pi,
    remaining: l.years * 12,
  }));

  for (let yr = 1; yr <= maxYrs; yr++) {
    let totP = 0, totI = 0, totB = 0;
    state.forEach(s => {
      for (let m = 0; m < 12 &amp;&amp; s.remaining > 0; m++, s.remaining--) {
        const ip = s.balance * s.mRate;
        const pp = Math.min(s.pi - ip, s.balance);
        totI += ip; totP += pp;
        s.balance = Math.max(s.balance - pp, 0);
      }
      totB += s.balance;
    });
    const tr = document.createElement('tr');
    tr.innerHTML = `<td>Year ${yr}</td><td>${fmt(totP)}</td><td>${fmt(totI)}</td><td>${fmt(totB)}</td>`;
    tbody.appendChild(tr);
    if (totB <= 0.5) break;
  }
}

// ─────────────────────────────────────────
// AMORT TOGGLE
// ─────────────────────────────────────────
function toggleAmort() {
  const wrap = $('amort-wrap');
  const btn  = $('amort-btn');
  const open = wrap.classList.toggle('open');
  const ic1 = `<svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot; stroke-linecap=&quot;round&quot;><polyline points=&quot;18 15 12 9 6 15&quot;/></svg>`;
  const ic2 = `<svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot; stroke-linecap=&quot;round&quot;><line x1=&quot;3&quot; y1=&quot;6&quot; x2=&quot;21&quot; y2=&quot;6&quot;/><line x1=&quot;3&quot; y1=&quot;12&quot; x2=&quot;21&quot; y2=&quot;12&quot;/><line x1=&quot;3&quot; y1=&quot;18&quot; x2=&quot;21&quot; y2=&quot;18&quot;/></svg>`;
  btn.innerHTML = (open ? ic1 + ' Hide' : ic2 + ' View') + ' Amortization Schedule';
}

// init
calcStd();
</script>
</body>
</html>
" width="100%" height="920" style="border:none; display:block; border-radius:28px;" title="Mortgage Calculator" frameborder="0" scrolling="no">
  