/* Mortgage calculator. Same ASCENT palette as the rest of the site. */
.an-mtg{--navy:#1e3a73;--ink:#0e1b33;--red:#cc2229;--blue:#2e5aa8;--paper:#f6f8fb;--line:#dde3ec;--mut:#5b6b85;--good:#12805c;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);font-size:15px;line-height:1.6}
.an-mtg *{box-sizing:border-box}
/* the picked-listing bar is a flex box, so the hidden attribute needs help */
.an-mtg [hidden]{display:none!important}
.an-mtg-in{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

/* tabs */
.an-mtg-tabs{display:flex;gap:2px;background:var(--paper);border-bottom:1px solid var(--line);padding:6px 6px 0}
.an-mtg-tabs button{flex:1;border:0;background:transparent;padding:13px 10px;cursor:pointer;
  font:600 15px "Inter",sans-serif;color:var(--mut);border-bottom:3px solid transparent;border-radius:8px 8px 0 0}
.an-mtg-tabs button:hover{color:var(--navy)}
.an-mtg-tabs button.on{background:#fff;color:var(--navy);border-bottom-color:var(--red)}

/* start from a listing */
.an-mtg-start{padding:20px 22px 4px}
.an-mtg-start > label{display:block;font-weight:600;margin-bottom:8px}
.an-mtg-start > label span{display:block;font-weight:400;font-size:13px;color:var(--mut);margin-top:1px}
.an-mtg-findwrap{position:relative}
.an-mtg-findwrap input{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;
  font:500 15px "Inter",sans-serif;background:#fff;outline:none}
.an-mtg-findwrap input:focus{border-color:var(--blue)}
.an-mtg-picked{display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px 12px;
  background:#eef3fb;border:1px solid #cfdcf3;border-radius:12px}
.an-mtg-pick-img{width:58px;height:44px;border-radius:8px;background:#dbe3ef center/cover no-repeat;flex:none}
.an-mtg-pick-t{flex:1;min-width:0}
.an-mtg-pick-t b{display:block;font-size:14.5px}
.an-mtg-pick-t small{display:block;color:var(--mut);font-size:12.5px}
.an-mtg-pick-link{font-size:13px;color:var(--blue);text-decoration:none;white-space:nowrap}
.an-mtg-pick-x{border:0;background:transparent;font-size:22px;line-height:1;color:var(--mut);cursor:pointer;padding:0 4px}
.an-mtg-pick-err{color:var(--red);font-size:14px}

/* the two columns.
   The inputs are a fixed-ish column on the left and everything they produce,
   the headline figures and the line-by-line table, stacks on the right. The
   left column is sticky so a visitor can change the price, the rate or the down
   payment and watch the table beside it move, instead of scrolling a screen
   down to find out what happened. */
.an-mtg-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:22px;padding:18px 22px 22px;align-items:start}
.an-mtg-inputs{position:sticky;top:14px;align-self:start;max-height:calc(100vh - 28px);overflow-y:auto;
  overscroll-behavior:contain;padding-right:4px}
.an-mtg-right{display:grid;gap:16px;min-width:0}
/* the scrollbar on the sticky column, only when it actually overflows */
.an-mtg-inputs::-webkit-scrollbar{width:7px}
.an-mtg-inputs::-webkit-scrollbar-thumb{background:#cfd8e6;border-radius:6px}

@media(max-width:1100px){.an-mtg-grid{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:18px}}
@media(max-width:860px){
  .an-mtg-grid{grid-template-columns:1fr;gap:18px}
  /* nothing to sit beside, so release the column and let the page scroll normally */
  .an-mtg-inputs{position:static;max-height:none;overflow:visible;padding-right:0}
}

.an-mtg-f{margin-bottom:14px}
.an-mtg-f label{display:block;font-weight:600;font-size:14px;margin-bottom:5px}
.an-mtg-f input[type=text],.an-mtg-f input[type=number],.an-mtg-f select{width:100%;border:1.5px solid var(--line);
  border-radius:10px;padding:10px 12px;font:500 15px "Inter",sans-serif;background:#fff;outline:none}
.an-mtg-f input:focus,.an-mtg-f select:focus{border-color:var(--blue)}
.an-mtg-f small{display:block;color:var(--mut);font-size:12.5px;margin-top:4px}
.an-mtg-f small.an-mtg-help{font-style:normal}
.an-mtg-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.an-mtg-row{grid-template-columns:1fr}}
.an-mtg-check label{font-weight:500;display:flex;align-items:center;gap:8px;margin-top:26px}
.an-mtg-check input{width:17px;height:17px;flex:none}

.an-mtg-three{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.an-mtg-three > div{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:8px}
.an-mtg-three input{width:100%;border:0;background:transparent;font:700 17px "Inter",sans-serif;
  color:var(--navy);outline:none;padding:0;-moz-appearance:textfield}
.an-mtg-three input::-webkit-outer-spin-button,.an-mtg-three input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.an-mtg-three span{position:absolute;top:8px;right:9px;color:var(--mut);font-weight:700;font-size:14px}
.an-mtg-three b{display:block;font-size:12.5px;color:var(--mut);font-weight:600;margin-top:2px}

.an-mtg-more{margin-top:6px;border-top:1px solid var(--line);padding-top:12px}
.an-mtg-more summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--navy);list-style:none;padding:4px 0}
.an-mtg-more summary::-webkit-details-marker{display:none}
.an-mtg-more summary:before{content:"+";display:inline-block;width:16px;color:var(--red);font-weight:700}
.an-mtg-more[open] summary:before{content:"\2212"}

/* results */
.an-mtg-out{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px;align-self:start}
.an-mtg-load{color:var(--mut);padding:26px 0;text-align:center}
.an-mtg-hero{text-align:center;padding:6px 0 14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.an-mtg-hero span{display:block;font-size:13px;color:var(--mut)}
.an-mtg-hero b{display:block;font:700 40px/1.1 "Poppins","Inter",sans-serif;color:var(--navy);margin:6px 0 5px;
  font-variant-numeric:tabular-nums}
@media(max-width:400px){.an-mtg-hero b{font-size:32px}}

.an-mtg-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.an-mtg-kpis > div{background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 12px}
.an-mtg-kpis span{display:block;font-size:12.5px;color:var(--mut)}
.an-mtg-kpis b{display:block;font:700 19px "Poppins","Inter",sans-serif;color:var(--ink);margin-top:2px;
  font-variant-numeric:tabular-nums}
.an-mtg-kpis small{display:block;font-size:11.5px;color:var(--mut);margin-top:3px;line-height:1.45}

.an-mtg-warn,.an-mtg-ok,.an-mtg-info{margin-top:12px;padding:10px 13px;border-radius:10px;font-size:13.5px;line-height:1.55}
.an-mtg-warn{background:#fdeaea;border:1px solid #f3c6c6;color:#9c1c22}
.an-mtg-ok{background:#e7f6f0;border:1px solid #bfe5d6;color:var(--good)}
.an-mtg-info{background:#eef3fb;border:1px solid #cfdcf3;color:#26406f}

/* the line-by-line table. It now lives inside the right-hand column, so the
   old full-width page padding would double up on the grid gap. */
.an-mtg-detail{padding:0}
@media(max-width:860px){.an-mtg-detail{padding:0}}
.an-mtg-tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:13px}
.an-mtg-tbl{width:100%;border-collapse:collapse;font-size:14px;background:#fff;min-width:460px}
.an-mtg-tbl th,.an-mtg-tbl td{padding:10px 14px;text-align:right;border-bottom:1px solid #eef2f8;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.an-mtg-tbl th:first-child,.an-mtg-tbl td:first-child{text-align:left;white-space:normal;color:var(--mut);font-weight:500}
.an-mtg-tbl thead th{background:#eef3fa;color:var(--navy);font-weight:700;font-family:"Poppins","Inter",sans-serif}
.an-mtg-tbl thead th:first-child{color:var(--navy)}
.an-mtg-tbl tr.hi td{background:#f4f8ff;font-weight:700;color:var(--ink)}
.an-mtg-tbl tr.hi td:first-child{color:var(--navy)}
.an-mtg-tbl tr.sec td{background:var(--navy);color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;text-align:left}
.an-mtg-tbl td small{color:var(--mut);font-weight:500}
.an-mtg-nil{color:#9aa7bd}
.an-mtg-side{font-size:13px;color:var(--mut);margin:10px 2px 0}

/* footer */
.an-mtg-foot{padding:16px 22px 22px;border-top:1px solid var(--line);background:var(--paper);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.an-mtg-print{border:1.5px solid var(--navy);background:#fff;color:var(--navy);border-radius:10px;
  padding:10px 18px;font:600 14px "Inter",sans-serif;cursor:pointer}
.an-mtg-print:hover{background:var(--navy);color:#fff}
.an-mtg-cta{background:var(--red);color:#fff;border-radius:10px;padding:11px 20px;
  font:600 14px "Inter",sans-serif;text-decoration:none}
.an-mtg-cta:hover{background:#a81b21;color:#fff}
.an-mtg-foot p{flex:1 1 100%;margin:4px 0 0;font-size:12px;color:var(--mut);line-height:1.6}

.an-mtg-note{margin-top:14px;background:#eef3fb;border:1px solid #cfdcf3;border-radius:12px;
  padding:13px 16px;font-size:13.5px;line-height:1.65;color:#26406f}
.an-mtg-note b{color:var(--navy)}

/* iOS zooms the page when a focused field is under 16px */
@media(max-width:820px),(pointer:coarse){
  .an-mtg input,.an-mtg select{font-size:16px}
  .an-mtg-three input{font-size:17px}
}

@media print{
  .an-mtg-tabs,.an-mtg-start,.an-mtg-print,.an-mtg-cta{display:none!important}
  .an-mtg-in{border:0}
  .an-mtg-grid{grid-template-columns:1fr 1fr}
  .an-mtg-tblwrap{overflow:visible}
  /* a sticky, scrollable column prints as a clipped box */
  .an-mtg-inputs{position:static!important;max-height:none!important;overflow:visible!important}
}

/* On a phone the picked-listing bar has no room for photo, text, link and the
   close button on one line; the text was squeezed to a few characters wide. */
@media(max-width:560px){
  .an-mtg-picked{flex-wrap:wrap;position:relative;padding:10px 34px 10px 12px;row-gap:8px}
  .an-mtg-pick-img{width:52px;height:40px}
  .an-mtg-pick-t{flex:1 1 0;min-width:0}
  .an-mtg-pick-t b{font-size:14px;line-height:1.35}
  .an-mtg-pick-t small{line-height:1.5}
  .an-mtg-pick-link{flex:1 1 100%;order:3}
  .an-mtg-pick-x{position:absolute;top:4px;right:6px}
}
/* a down payment the law does not allow at this price */
.an-mtg-tbl .an-mtg-bad{display:block;color:var(--red);font-weight:600;font-size:11.5px;white-space:normal;margin-top:2px}


/* The phone summary bar.
   One column means the table sits under the inputs, so while someone edits the
   price the figure they are chasing is off screen. This pins the two numbers
   that matter to the bottom of the viewport for exactly that case. Hidden on
   desktop, where the right-hand column is already beside the inputs, and hidden
   in print. */
.an-mtg-mini{display:none}
@media(max-width:860px){
  .an-mtg-mini{
    display:flex;gap:14px;position:sticky;bottom:0;z-index:5;
    margin:0 -1px;padding:9px 16px calc(9px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
    border-top:1px solid var(--line);box-shadow:0 -6px 18px -12px rgba(14,27,51,.45);
  }
  .an-mtg-mini div{flex:1 1 0;min-width:0}
  .an-mtg-mini span{display:block;font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
  .an-mtg-mini b{display:block;font:700 19px "Poppins","Inter",sans-serif;color:var(--navy);
    font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .an-mtg-mini div:nth-child(2) b{font-size:16px;color:var(--ink)}
}
@media print{.an-mtg-mini{display:none!important}}

/* ------------------------------------------------ in-depth analysis --- */
.an-mtg-deep{border-top:1px solid var(--line);padding:26px 22px 8px;background:#fff}
.an-mtg-deep h2{font:700 24px/1.2 "Poppins","Inter",sans-serif;color:var(--ink);margin:0}
.an-mtg-deep-sub{color:var(--mut);margin:6px 0 16px;font-size:14px}
.an-mtg-dtabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.an-mtg-dtabs button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;cursor:pointer;
  font:600 13.5px "Inter",sans-serif;color:var(--mut)}
.an-mtg-dtabs button:hover{border-color:var(--navy);color:var(--navy)}
.an-mtg-dtabs button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.an-mtg-dctl{display:flex;flex-wrap:wrap;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:16px}
.an-mtg-dfld{display:flex;flex-direction:column;gap:3px;min-width:150px;flex:1 1 150px;max-width:220px}
.an-mtg-dfld span{font-size:12.5px;font-weight:600;color:var(--ink)}
.an-mtg-dfld input{border:1.5px solid var(--line);border-radius:9px;padding:9px 10px;font:500 15px "Inter",sans-serif;width:100%;background:#fff}
.an-mtg-dfld input:focus{outline:none;border-color:var(--blue)}
.an-mtg-dfld small{font-size:11.5px;color:var(--mut)}
.an-mtg-dout .an-mtg-kpis{grid-template-columns:repeat(4,1fr);margin-bottom:6px}
@media(max-width:860px){.an-mtg-dout .an-mtg-kpis{grid-template-columns:1fr 1fr}}
.an-mtg-dout .an-mtg-tblwrap{margin-top:14px;overflow-x:auto}
.an-mtg-dout .an-mtg-tbl td small{display:block;color:var(--mut);font-size:11.5px}
.an-mtg-dout .an-mtg-tbl tr.min td{background:#fff8ea}
.an-mtg-sched tbody{max-height:none}
.an-mtg-chart{margin:16px 0 4px}
.an-mtg-chart svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:12px}
.an-mtg-chart .g{stroke:#e6ebf2;stroke-width:1}
.an-mtg-chart text{font:11px "Inter",sans-serif;fill:var(--mut)}
.an-mtg-chart .l{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.an-mtg-chart .l0{stroke:var(--navy)}
.an-mtg-chart .l1{stroke:var(--red);stroke-dasharray:7 5}
.an-mtg-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:var(--mut)}
.an-mtg-legend span::before{content:"";display:inline-block;width:18px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle;background:var(--navy)}
.an-mtg-legend .k1::before{background:var(--red)}
@media(max-width:600px){.an-mtg-deep{padding:20px 14px 6px}.an-mtg-dfld{max-width:none}}
@media print{.an-mtg-dtabs,.an-mtg-dctl{display:none}}

.an-mtg-share{border:1.5px solid var(--line);background:#fff;color:var(--navy);border-radius:10px;padding:10px 14px;font:600 14px "Inter",sans-serif;cursor:pointer;margin-left:8px}
.an-mtg-share:hover{border-color:var(--navy)}
@media print{.an-mtg-share{display:none}}