/* CalcPoint premium calculator design system (shared). Scoped under .mp */
/* ==== Premium mortgage page, scoped to .mp ============================= */
.mp{--ink:#0f172a;--paper:#fff;--page:#EDECEC;--card:#F4F4F5;--hair:#e2e2e5;--soft:#fafafb;
    --accent:#059669;--accent-d:#047857;--accent-l:#34d399;
    /* Luxoret soft-card system (softcard.css): outer glow + bottom inset lip + top white highlight */
    --shadow:0px 7.77px 16px 0px rgba(0,0,0,.06),0px 3px 3px 0px rgba(0,0,0,.10),0px -8px 0px 0px rgba(0,0,0,.05) inset,0px 4px 0px 0px rgba(255,255,255,.6) inset;
    --shadow-sm:0px -3px 0px 0px #E9E9E9 inset,0px 1px 0px 0px rgba(255,255,255,.7) inset,0px 2.77px 2.21px 0px rgba(0,0,0,.12),0px 3px 3px 0px rgba(0,0,0,.14);
    --radius:26px;
    color:var(--ink);background:var(--page);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    -webkit-font-smoothing:antialiased;}
.mp *{box-sizing:border-box;}
.mp h1,.mp h2,.mp h3{margin:0;}

/* ---- hero (full bleed, engineering graph paper) ---- */
.mp-hero{position:relative;overflow:hidden;color:var(--ink);padding:1.8rem 1.5rem 3.4rem;
    background:
      linear-gradient(rgba(15,23,42,.05) 1px,transparent 1px) 0 0/27px 27px,
      linear-gradient(90deg,rgba(15,23,42,.05) 1px,transparent 1px) 0 0/27px 27px,
      linear-gradient(rgba(15,23,42,.085) 1px,transparent 1px) 0 0/135px 135px,
      linear-gradient(90deg,rgba(15,23,42,.085) 1px,transparent 1px) 0 0/135px 135px,
      #f3f3f1;
    border-bottom:1px solid var(--hair);}
.mp-hero__in{position:relative;z-index:1;max-width:1600px;margin:0 auto;}
.mp-crumbs{font-size:.8rem;font-weight:500;color:var(--ink);margin-bottom:2.6rem;}
.mp-crumbs a{color:var(--ink);text-decoration:none;}
.mp-crumbs a:hover{text-decoration:underline;text-underline-offset:3px;}
.mp-crumbs span{margin:0 .5rem;}
.mp-crumbs__here{font-weight:600;}
.mp-hero__lead{max-width:46rem;margin-bottom:2.4rem;}
.mp-kicker{display:inline-block;font-size:.98rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-d);margin-bottom:1.1rem;}
.mp-hero__lead h1{color:var(--ink);font-size:3.05rem;line-height:1.03;font-weight:700;letter-spacing:-.035em;margin-bottom:1rem;}
.mp-hero__lead p{font-size:1.1rem;line-height:1.6;color:var(--ink);font-weight:500;max-width:42rem;}

/* ---- hero variants (dev switcher: ?hero=graph|green|dots|formula|dark) ---- */
.mp-hero__formulas{display:none;}
.mp-hero--green{background:
    linear-gradient(rgba(4,120,87,.10) 1px,transparent 1px) 0 0/27px 27px,
    linear-gradient(90deg,rgba(4,120,87,.10) 1px,transparent 1px) 0 0/27px 27px,
    linear-gradient(rgba(4,120,87,.17) 1px,transparent 1px) 0 0/135px 135px,
    linear-gradient(90deg,rgba(4,120,87,.17) 1px,transparent 1px) 0 0/135px 135px,
    #f1f5f2;}
.mp-hero--dots{background:
    radial-gradient(circle at 1px 1px,rgba(15,23,42,.15) 1.3px,transparent 0) 0 0/24px 24px,
    #f3f3f1;}
.mp-hero--formula{background:#f4f4f2;}
.mp-hero--formula .mp-hero__formulas{display:block;position:absolute;inset:0;z-index:0;overflow:hidden;
    font-family:'Courier New',ui-monospace,monospace;color:var(--ink);opacity:.06;user-select:none;}
.mp-hero--formula .mp-hero__formulas span{position:absolute;white-space:nowrap;font-size:1.6rem;font-weight:600;}
.mp-hero--formula .mp-hero__formulas span:nth-child(1){top:5%;left:53%;font-size:2.3rem;}
.mp-hero--formula .mp-hero__formulas span:nth-child(2){top:19%;left:72%;}
.mp-hero--formula .mp-hero__formulas span:nth-child(3){top:37%;left:60%;font-size:2.7rem;}
.mp-hero--formula .mp-hero__formulas span:nth-child(4){top:54%;left:75%;}
.mp-hero--formula .mp-hero__formulas span:nth-child(5){top:71%;left:57%;font-size:2.1rem;}
.mp-hero--formula .mp-hero__formulas span:nth-child(6){top:11%;left:86%;}
.mp-hero--formula .mp-hero__formulas span:nth-child(7){top:85%;left:80%;}
.mp-hero--formula .mp-hero__formulas span:nth-child(8){top:63%;left:89%;}
.mp-hero--dark{color:#fff;border-bottom:none;background:
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.035) 1px,transparent 0) 0 0/30px 30px,
    radial-gradient(75% 80% at 30% -12%,rgba(255,255,255,.11) 0%,rgba(255,255,255,0) 58%),
    #16171b;}
.mp-hero--dark .mp-crumbs,.mp-hero--dark .mp-crumbs a,.mp-hero--dark .mp-hero__lead h1,.mp-hero--dark .mp-hero__lead p{color:#fff;}
.mp-hero--dark .mp-kicker{color:var(--accent-l);}

/* the app: inputs + result cards floating on the hero */
.mp-app{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:1.4rem;align-items:stretch;}
.mp-result{display:flex;flex-direction:column;}
.mp-result .mp-stats{margin-top:auto;}
.mp-card{background:var(--card);border:none;border-radius:var(--radius);box-shadow:var(--shadow);color:var(--ink);}
/* cards always carry black text, even the ones floating on the dark hero */
.mp-card,.mp-card h2,.mp-card h3,.mp-card label,.mp-card span,.mp-card dt,.mp-card dd,.mp-card div,.mp-card p,.mp-card li{color:var(--ink);}
.mp-card input,.mp-card select{color:var(--ink);}
/* keep the pronounced dark table header white */
.mp-card .mp-table thead th{color:#fff;}
.mp-card--pad{padding:1.8rem 1.9rem;}
.mp-inputs{padding:1.8rem 1.9rem;display:flex;flex-direction:column;gap:1.05rem;}
.mp-card__title{font-size:.9rem;font-weight:700;letter-spacing:-.01em;padding-bottom:.2rem;}

/* fields */
.mp-field{display:flex;flex-direction:column;gap:.4rem;}
.mp-field--split{flex-direction:row;gap:.9rem;}
.mp-field--split>div{flex:1;display:flex;flex-direction:column;gap:.4rem;min-width:0;}
.mp-field label{font-size:.85rem;font-weight:600;letter-spacing:-.006em;}
.mp-field label em{font-style:normal;font-weight:400;font-size:.78rem;}
.mp-dual{display:grid;grid-template-columns:1fr 1.35fr;gap:.55rem;}
.mp-subhead{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    padding:.7rem 0 .1rem;border-top:1px solid var(--hair);margin-top:.3rem;}
.mp-input{display:flex;align-items:center;border:1px solid var(--hair);border-radius:10px;background:var(--paper);
    height:2.9rem;transition:border-color .15s,box-shadow .15s;min-width:0;}
.mp-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(5,150,105,.13);}
.mp-input input,.mp-input select{border:0;outline:0;background:transparent;width:100%;height:100%;min-width:0;
    font:inherit;font-size:1rem;font-weight:600;color:var(--ink);padding:0 .85rem;letter-spacing:-.01em;}
.mp-input select{cursor:pointer;padding-right:2rem;-webkit-appearance:none;appearance:none;}
.mp-input>span{padding:0 .1rem 0 .85rem;font-weight:500;flex:none;}
.mp-input--suffix>span{padding:0 .85rem 0 .1rem;}
.mp-input--select{position:relative;}
.mp-input--select::after{content:"";position:absolute;right:1rem;top:50%;width:.5rem;height:.5rem;
    border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-65%) rotate(45deg);pointer-events:none;}
.mp-input--sm{height:2.7rem;max-width:12rem;}

/* result card */
.mp-result{padding:1.8rem 1.9rem;}
.mp-result__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;}
.mp-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;}
.mp-payment__value{font-size:4rem;line-height:1;font-weight:800;letter-spacing:-.045em;margin:.5rem 0 .35rem;
    font-variant-numeric:tabular-nums;}
.mp-payment__note{font-size:.92rem;font-weight:500;}
.mp-print{border:1px solid var(--hair);background:var(--paper);color:var(--ink);font:inherit;font-size:.76rem;
    font-weight:600;padding:.42rem .78rem;border-radius:99px;cursor:pointer;white-space:nowrap;}
.mp-print:hover{border-color:var(--ink);}

.mp-bar{display:flex;height:.7rem;border-radius:99px;overflow:hidden;margin:1.6rem 0 1.15rem;background:var(--hair);}
.mp-bar__seg{height:100%;}
.mp-legend{margin:0;display:flex;flex-direction:column;}
.mp-legend__row{display:flex;align-items:center;gap:.65rem;padding:.58rem 0;border-top:1px solid var(--hair);}
.mp-legend__row:first-child{border-top:0;}
.mp-legend__sw{width:.72rem;height:.72rem;border-radius:3px;flex:none;}
.mp-legend__label{font-size:.92rem;font-weight:500;}
.mp-legend__val{margin-left:auto;font-size:.98rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}

/* stats strip inside result */
.mp-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);
    border:1px solid var(--hair);border-radius:12px;overflow:hidden;margin-top:1.4rem;}
.mp-stat{background:var(--soft);padding:.8rem .9rem;}
.mp-stat__k{font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.mp-stat__v{font-size:1.16rem;font-weight:700;letter-spacing:-.02em;margin-top:.18rem;font-variant-numeric:tabular-nums;}

/* ---- body ---- */
.mp-body{max-width:1600px;margin:0 auto;padding:0 1.5rem 5rem;}
.mp-section{margin-top:2.8rem;}
.mp-h{font-size:1.5rem;font-weight:700;letter-spacing:-.024em;}
.mp-section>.mp-h{margin-bottom:1.45rem!important;}
.mp-h-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.4rem;}
.mp-h-row .mp-h{margin-bottom:0!important;}
.mp-hint{font-size:.9rem;font-weight:500;margin:0 0 1rem;}
.mp-two{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;}
.mp-card__h{font-size:1rem;font-weight:700;margin-bottom:1.1rem;}

/* insights */
.mp-insights{list-style:none;margin:0;padding:0;}
.mp-insights li{font-size:1.06rem;line-height:1.6;padding:1rem 0;border-top:1px solid var(--hair);}
.mp-insights li:first-child{border-top:0;padding-top:0;}
.mp-insights strong{font-weight:700;}

/* charts */
.mp-chart{width:100%;}
.mp-chart svg{width:100%;height:auto;display:block;overflow:visible;}
.mp-chart__axis{font-size:11px;font-weight:600;fill:var(--ink);font-family:inherit;}
.mp-chart__grid{stroke:var(--hair);stroke-width:1;}
.mp-chart__cap{font-size:.9rem;line-height:1.55;margin:1.1rem 0 0;font-weight:500;}
.mp-chart__key{display:inline-flex;align-items:center;gap:.4rem;margin-right:1.1rem;font-size:.82rem;font-weight:600;}
.mp-chart__key i{width:.7rem;height:.7rem;border-radius:2px;display:inline-block;}

/* milestones segmented panel */
.mp-miles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border-radius:var(--radius);overflow:hidden;}
.mp-mile{background:var(--paper);padding:1.3rem 1.35rem;}
.mp-mile__k{font-size:.8rem;font-weight:600;}
.mp-mile__v{font-size:1.5rem;font-weight:700;letter-spacing:-.025em;margin-top:.35rem;font-variant-numeric:tabular-nums;}
.mp-mile__note{font-size:.82rem;font-weight:500;margin-top:.3rem;line-height:1.45;}

/* scenario */
.mp-scenario__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
    padding-bottom:1.1rem;border-bottom:1px solid var(--hair);}
.mp-scenario__row label{font-size:1.02rem;font-weight:600;}
.mp-scenario__out{font-size:1.06rem;line-height:1.6;margin:1.1rem 0 0;}
.mp-scenario__out strong{font-weight:700;}

/* pronounced tables */
.mp-tablecard{padding:0;overflow:hidden;}
.mp-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;}
.mp-table thead th{background:#0f172a;color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;padding:.85rem 1.1rem;text-align:left;position:sticky;top:0;z-index:1;}
.mp-table th.num,.mp-table td.num{text-align:right;}
.mp-table td{padding:.72rem 1.1rem;font-size:.93rem;border-top:1px solid var(--hair);white-space:nowrap;}
.mp-table td:first-child{font-weight:600;}
.mp-table tbody tr:nth-child(even) td{background:#fff;}
.mp-table tbody tr:hover td{background:#e8eaee;}
.mp-table tr.is-active td{background:#e6e6ea;font-weight:700;}
.mp-table--amort .mp-yr{cursor:pointer;}
.mp-table--amort .mp-yr td:first-child::before{content:"+";display:inline-block;width:1.15em;font-weight:800;color:var(--accent-d);}
.mp-table--amort .mp-yr.is-open td:first-child::before{content:"\2212";}
.mp-table--amort .mp-mo td{font-weight:400;color:var(--ink);}
.mp-table--amort .mp-mo td:first-child{font-weight:500;padding-left:2.2rem;}
.mp-table--amort .mp-mo:nth-child(even) td,.mp-table--amort .mp-mo td{background:#fbfcfd;}
.mp-toggle{border:1px solid var(--hair);background:var(--paper);color:var(--ink);font:inherit;font-size:.8rem;
    font-weight:600;padding:.48rem .9rem;border-radius:99px;cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-sm);}
.mp-toggle:hover{border-color:var(--ink);}
.mp-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .1rem;}
.mp-chip{border:1px solid var(--hair);background:var(--paper);color:var(--ink);font:inherit;font-size:.78rem;
    font-weight:600;padding:.4rem .8rem;border-radius:99px;cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-sm);}
.mp-chip:hover{border-color:var(--ink);}
.mp-chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink);}

/* article + faq */
.mp-article h3{font-size:1.2rem;font-weight:700;letter-spacing:-.015em;margin:1.8rem 0 .6rem;}
.mp-article h3:first-child{margin-top:0;}
.mp-article p{font-size:1.02rem;line-height:1.7;margin:0 0 .5rem;}
.mp-faq__item{padding:1.15rem 0;border-top:1px solid var(--hair);}
.mp-faq__item:first-child{border-top:0;padding-top:0;}
.mp-faq__item h3{font-size:1.08rem;font-weight:700;margin:0 0 .4rem;}
.mp-faq__item p{font-size:1rem;line-height:1.65;margin:0;}
.mp-disclaim{margin:3rem 0 0;font-size:.86rem;line-height:1.6;font-weight:500;}

/* motion */
.mp-app,.mp-hero__lead{animation:mpUp .5s cubic-bezier(.2,.7,.2,1) both;}
.mp-hero__lead{animation-delay:.02s;}
.mp-app{animation-delay:.08s;}
@keyframes mpUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* responsive */
@media (max-width:900px){
  .mp-app{grid-template-columns:1fr;}
  .mp-two{grid-template-columns:1fr;}
  .mp-miles{grid-template-columns:1fr 1fr;}
  .mp-hero__lead h1{font-size:2.3rem;}
  .mp-payment__value{font-size:3.2rem;}
}
@media (max-width:560px){
  .mp-miles{grid-template-columns:1fr;}
  .mp-stats{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){.mp *,.mp-app,.mp-hero__lead{animation:none!important;transition:none!important;}}
@media print{
  .fc-header,.fc-footer,.mp-inputs,.mp-print,.mp-toggle,.mp-hero__lead,.mp-crumbs{display:none!important;}
  .mp-hero{background:#fff;color:#000;padding:0;}
  .mp-app{grid-template-columns:1fr;}
  .mp-card{box-shadow:none;border-color:#ccc;}
}

/* utility classes used by generator-style calculators (random number, etc.) */
.mp-btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;background:#047857;color:#fff;border:none;border-radius:12px;font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;box-shadow:0px -3px 0px 0px rgba(0,0,0,.18) inset,0px 3px 8px -2px rgba(0,0,0,.25);transition:background .15s;}
.mp-btn:hover{background:#065f46;}
.mp-nums{display:flex;flex-wrap:wrap;gap:.55rem;margin:.4rem 0 .2rem;}
.mp-num{display:inline-flex;align-items:center;justify-content:center;min-width:2.7rem;padding:.55rem .75rem;background:#F4F4F5;border-radius:10px;font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums;box-shadow:0px 2px 4px rgba(0,0,0,.08);}
.mp-check{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;cursor:pointer;}
.mp-check input{width:1.05rem;height:1.05rem;accent-color:#047857;}

/* solve-for calculators: dim the auto-computed (read-only) field */
.mp .is-solved,.mp input[readonly],.mp input:read-only{background:#eceef1;color:#0f172a;cursor:not-allowed;}
