/*@font-face {
    font-family: "Neue Montreal";
    src: url("../../fonts/neue-montreal/NeueMontreal-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}*/

:root{
	/*--bs-body-font-family: "Neue Montreal", Arial, sans-serif;*/
	
	--rfs-82: clamp(2.5rem, 6vw, 82px);
    --rfs-72: clamp(2.25rem, 4vw, 72px);
    --rfs-64: clamp(2rem, 4.5vw, 64px);
    --rfs-54: clamp(1.75rem, 4vw, 54px);
    --rfs-48: clamp(1.5rem, 3.5vw, 48px);
    --rfs-42: clamp(1.35rem, 3vw, 42px);
    --rfs-36: clamp(1.25rem, 3vw, 36px);
    --rfs-30: clamp(1.125rem, 2.5vw, 30px);
    --rfs-24: clamp(1rem, 2vw, 24px);
    --rfs-21: clamp(0.875rem, 1.75vw, 21px);
    --rfs-18: clamp(0.875rem, 1.5vw, 18px);
    --rfs-16: clamp(0.875rem, 1.5vw, 16px);
	
	/*--color-01: #EC1750;*/
	
	
/*	calculators*/
	  /* Brand Primary — exact tokens from DS v1.0 */
  --crimson:#EC1750;
  --sapphire:#085AA9;
  --grad:linear-gradient(135deg,#EC1750 0%,#085AA9 100%);
  --grad-soft:linear-gradient(135deg,rgba(236,23,80,.12) 0%,rgba(8,90,169,.14) 100%);

  /* Legacy aliases — keep for calc files */
  --navy-1:#085AA9;
  --navy-2:#1466b8;
  --magenta-1:#EC1750;
  --magenta-2:#c4103e;
  --accent:#EC1750;

  /* Neutrals */
  --obsidian:#231F20;
  --graphite:#424242;
  --slate:#58595B;
  --muted:#717182;
  --divider:#D3D1D1;
  --slate-blue:#4E659C;

  /* Surfaces */
  --bg:#F6F6F6;
  --card:#FFFFFF;
  --blush:#FDF2F5;
  --slot:#FDF2F5;

  /* Ink */
  --ink:#231F20;
  --ink-2:#58595B;
  --ink-3:#717182;

  /* Rules */
  --rule:rgba(35,31,32,.08);
  --rule-2:rgba(35,31,32,.14);

  /* Type scale */
  --font-display:42px;
  --font-h2:28px;
  --font-h3:20px;
  --font-body:16px;
  --font-caption:12px;
  --font-nav:13px;
}

/* Shared calculator styles */
/*common calculators*/
*{box-sizing:border-box;margin:0;padding:0;}

svg.nw-chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

header nav ul ul li{min-width:200px;}

.stage {
    position: relative;
    z-index: 2;
    padding: 24px 200px 80px;
}

.split{display:grid;grid-template-columns:730px 730px;gap:60px;align-items:start;justify-content:space-between;margin-top: 5rem;}

.split > *{max-width:730px;width:100%}

.sentence {
    display: flex;
    flex-direction: column;
    gap: 36px;
    max-width: 730px;
}
section .eyebrow {
    font-size: 40px;
    letter-spacing: 0.04em;
    color: var(--cc);
    font-family: 'Plus Jakarta Sans', 'Neue Montreal', sans-serif;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
}

.result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
/*    gap: 48px 64px;*/
    gap: 10px 64px;
    align-items: end;
}


 .num { font-size: 34px;}


.num.editable {
    cursor: text; white-space: nowrap;
    border-radius: 10px; padding: 1px 12px 3px;
    margin: 0 -2px; background: rgba(236, 22, 81, .05);
    box-shadow: inset 0 -2px 0 rgba(236, 22, 81, .45), inset 0 0 0 1px rgba(236, 22, 81, .16);
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .18s, box-shadow .18s;
}

.num.editable:hover {
    background: rgba(236, 22, 81, .09);
    box-shadow: inset 0 -2px 0 var(--magenta-1), inset 0 0 0 1px rgba(236, 22, 81, .32);
}
  .num.editable:focus{background:rgba(236,22,81,.12);box-shadow:inset 0 -3px 0 var(--magenta-1),inset 0 0 0 1px rgba(236,22,81,.42)}
  .legend{display:flex;gap:22px;font-size:12px;color:var(--ink-2)}
  .legend span{display:inline-flex;align-items:center;gap:8px; letter-spacing: 0.1em;}


.chart-card .eyebrow, .chart-head .eyebrow, .lifewrap .eyebrow, .arc-wrap .eyebrow, .band .eyebrow, .ret-hero .eyebrow, .hero-cap .eyebrow, .hero-cap .cap.acc, .section-head .eyebrow, .disclaimer .tag, .result-grid .eyebrow, .amort-head .eyebrow ,.vizwrap .eyebrow, .hm-loan .eyebrow{
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
/*    font-family: 'Montserrat', sans-serif;*/
	    /*font-family: 'Plus Jakarta Sans', 'Neue Montreal', sans-serif;*/
    font-weight: 600;
    line-height: 1.4;
	margin-bottom:18px;
}
/*html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Plus Jakarta Sans','Neue Montreal','DM Sans',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","cv11";
  letter-spacing:-0.01em;
  font-size:var(--font-body);
}*/
h1.display {
    /*font-family: 'Plus Jakarta Sans', 'Neue Montreal', sans-serif;*/
    font-weight: 500;
    font-size: clamp(20px, 2.2vw, 24px);
    line-height: 1.3;
    letter-spacing: 0.05em;
    color: var(--ink);
    margin-top: 40px;
}

h1.display .ital {
    font-style: italic;
    color: var(--crimson);
    font-weight: 700;
    letter-spacing: 0.04em;
}


/* ---------- Entry animations ---------- */

.reveal{

    opacity:0;
    transform:translateY(14px);
    animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards;
}

@media (prefers-reduced-motion: reduce){
    .reveal{
        animation:none;
        opacity:1;
        transform:none;
    }
}

@keyframes rise{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

  .chart-card{position:relative;padding-top:6px}
  .chart-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px;flex-wrap:wrap;gap:12px}
  .chart-head .eyebrow{/*margin-bottom:0px;*/}
  .legend{display:flex;gap:22px;font-size:12px;color: var(--ink-2, #58595B);}
  .legend span{display:inline-flex;align-items:center;gap:8px}
  .swatch{width:10px;height:10px;border-radius:2px}
  .swatch.princ{background:var(--navy-1)}
  .swatch.inter{background:linear-gradient(135deg,var(--plum),var(--magenta-1))}
  svg.chart{display:block;width:100%;height:auto;overflow:visible;}
  .axis-line{stroke:var(--rule);stroke-width:1;stroke-dasharray:2 4}
  .axis-label{fill:var(--ink-3);font-size:11px;letter-spacing:.04em;font-family:'Neue Montreal','Plus Jakarta Sans',sans-serif}

  .swatch.curve{background:linear-gradient(135deg,var(--navy-1),var(--magenta-1))}
  .swatch.mkt{width:10px;height:10px;border-radius:50%;background:var(--magenta-1)}
.swatch.lump { background: var(--navy-1, #085AA9);}
.swatch.gain { background: linear-gradient(135deg, var(--crimson, #EC1750), var(--magenta-1, #EC1750));}


body{min-height:100vh;overflow-x:hidden;position:relative}

a{color:inherit;text-decoration:none}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.mesh::before{
  width:55vw;height:55vw;left:-15vw;top:-10vw;
  background:radial-gradient(circle at 50% 50%, rgba(8,91,168,.12), rgba(8,91,168,0) 65%);
  animation:drift1 28s ease-in-out infinite alternate;
}

.mesh::after{
  width:55vw;height:55vw;right:-15vw;bottom:-15vw;
  background:radial-gradient(circle at 50% 50%, rgba(236,22,81,.10), rgba(236,22,81,0) 65%);
  animation:drift2 34s ease-in-out infinite alternate;
}

.halo{
  position:fixed;width:480px;height:480px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle, rgba(236,22,81,.05), rgba(236,22,81,0) 60%);
  transform:translate(-50%,-50%);transition:opacity .4s;mix-blend-mode:multiply;opacity:0;
}

body:hover .halo{opacity:1}

.logo{display:flex;align-items:center;gap:10px;color:var(--ink);letter-spacing:-0.02em;font-weight:500;font-size:15px;font-family:'Plus Jakarta Sans','Neue Montreal',sans-serif;-webkit-font-smoothing:antialiased}

.logo-mark{
  width:22px;height:22px;
  background:var(--grad);
  clip-path:polygon(50% 0%,100% 100%,0% 100%);
}

.topnav{display:flex;gap:32px;align-items:center}

.topnav a{color:var(--ink-2);font-size:var(--font-nav);letter-spacing:.06em;text-transform:uppercase;font-family:'Montserrat',sans-serif;font-weight:600;transition:color .2s}

.topnav a.cta-nav{
  background:var(--crimson);color:#fff;padding:9px 20px;border-radius:999px;
  font-family:'Plus Jakarta Sans','Neue Montreal',sans-serif;
  font-weight:500;letter-spacing:.01em;text-transform:none;transition:background .2s,transform .15s;
}

.pill{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule-2);
  border-radius:999px;padding:6px 12px;font-size:12px;color:var(--ink-2);
  background:var(--card);
}

.pill .dot{width:6px;height:6px;border-radius:50%;background:#3fa86b;box-shadow:0 0 0 4px rgba(63,168,107,.12)}

.backlink{
  position:relative;z-index:5;display:inline-flex;align-items:center;gap:10px;
  margin:14px 200px 0;font-size:13px;color:var(--ink-2);transition:gap .25s,color .25s;
}

.backlink:hover{color:var(--ink);gap:14px}

.backlink .ar{display:inline-block;transition:transform .25s}

.backlink:hover .ar{transform:translateX(-3px)}

.lede{font-size: 18px;line-height: 1.55;color:var(--ink-2);max-width: 50ch; margin-top: 18px; margin-bottom: 48px;}

.cap{font-size: 12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);font-weight:500}

.field-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:18px;margin-bottom: 0.5rem;}

.verb{font-family:'Plus Jakarta Sans','Neue Montreal',sans-serif;font-style:normal;font-weight:600;font-size:var(--font-h3);color:var(--ink);letter-spacing: 0.02em;margin-right: 10px;}

.num{
  font-family:'Plus Jakarta Sans','Neue Montreal',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
  font-weight:300;font-size:44px;line-height:1;letter-spacing:-0.035em;color:var(--ink);
  display:inline-block;transition:transform .25s cubic-bezier(.2,.8,.2,1);
}

.num.pop{transform:scale(1.045)}

.unit{font-size:16px;color:var(--ink-2);font-weight:400;margin-left: 10px;}

.meta{font-size: 13px;color:var(--ink-3);letter-spacing:.02em;text-align:right;white-space:nowrap}

.slider{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;
  outline:none;cursor:pointer;
  background-image:var(--grad);background-repeat:no-repeat;background-size:var(--fill,30%) 100%;
  background-color:rgba(35,31,32,.07);
}

.slider::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:transparent}

.slider::-moz-range-track{height:8px;border-radius:999px;background:transparent}

.slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
  background:#fff;border:1.5px solid rgba(35,31,32,.12);
  box-shadow:0 1px 3px rgba(35,31,32,.10),0 4px 12px rgba(8,91,168,.16);
  cursor:grab;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s;margin-top:-8px;
}

.slider::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:#fff;border:1.5px solid rgba(35,31,32,.12);
  box-shadow:0 1px 3px rgba(35,31,32,.10),0 4px 12px rgba(8,91,168,.16);cursor:grab;
}

.slider:hover::-webkit-slider-thumb{transform:scale(1.12);box-shadow:0 2px 6px rgba(35,31,32,.12),0 8px 20px rgba(236,22,81,.20)}

.slider:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.06)}

.ticks{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);letter-spacing:.02em}

.uline:focus{border-bottom-color:var(--crimson)}

.uline::placeholder{color:var(--ink-3)}

.seg button{
  position:relative;padding:10px 2px 12px;font-size:13px;color:var(--ink-3);letter-spacing:.04em;
  transition:color .2s;
}

.seg button[aria-pressed="true"]{color:var(--ink)}

.seg button[aria-pressed="true"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad);
}

.seg button:hover{color:var(--ink)}

.cell{display:flex;flex-direction:column;gap:8px}

.small-num{
  font-family:'Plus Jakarta Sans','Neue Montreal',sans-serif;font-weight:300;font-size:36px;letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;
}

.small-num.navy{color:var(--sapphire)}

.small-num.mag{color:var(--crimson)}

.abbr{font-size:13px;color:var(--ink-3)}

.hero-block{grid-column:1/-1;margin-top:14px;border-top: 1px solid var(--rule, #e5e5e5);padding-top:34px}

.hero-cap{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}

.hero-cap .cap.acc{color: var(--crimson, #EC1750);}

.hero-num{/* font-family:'Plus Jakarta Sans','Neue Montreal',sans-serif; */font-weight:300;font-size: clamp(80px, 9.5vw, 120px);line-height:.95;letter-spacing: -0.04em;color:var(--ink);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap;}

.hero-row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap}

.hero-abbr{font-family:'Plus Jakarta Sans','Neue Montreal',sans-serif;font-size:22px;color: var(--ink-2, #58595B);white-space:nowrap;}



.tlink {
	margin-top: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    color: var(--crimson);
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-color .25s, gap .25s;
     font-weight: 500;
    letter-spacing: 0.04em;
}
.tlink:hover{border-color:var(--crimson);gap:22px}

.tlink .arr{display:inline-block;transition:transform .25s}

.tlink:hover .arr{transform:translateX(4px)}

.tlink.muted{color:var(--ink-2);font-size:14px;font-weight:400}

.tlink.muted:hover{color:var(--ink)}


.disclaimer {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 24px 200px 40px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: .01em;
}

.disclaimer > .disc-inner{
  display:flex;align-items:flex-start;gap:14px;width:100%;
  border-radius:16px;padding:20px 28px;
  border:1px solid rgba(236,23,80,.18);
  background:linear-gradient(135deg,rgba(8,90,169,.05),rgba(236,23,80,.05));
}

.disclaimer .tag{
  flex:0 0 auto;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--crimson);font-weight:600;padding-top:1px;
}

.disclaimer .rule{flex:0 0 22px;height:1px;background:var(--crimson);opacity:.5;margin:9px 0 0}

.disclaimer p{margin:0;max-width:none;color:var(--ink-2)}

.foot {
    position: relative;
    z-index: 2;
    padding: 0 200px 8rem;
    display: flex;
    justify-content: space-between;
    color: var(--ink-3);
    font-size: 11px;
    letter-spacing: 0.12em;
    gap: 48px;
    flex-wrap: wrap;
}
.foot p {
     max-width: 100%; line-height: 1.6;
}

.reveal.d1{animation-delay:.05s}

.reveal.d2{animation-delay:.18s}

.reveal.d3{animation-delay:.32s}

.reveal.d4{animation-delay:.46s}

.reveal.d5{animation-delay:.6s}

.reveal.d6{animation-delay:.74s}

.reveal.d7{animation-delay:.88s}

.reveal.d8{animation-delay:1.02s}


@media (max-width:1700px){
	.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;}
	.split > *{max-width:100%}
	.lede {max-width:80%;}
}

@media (max-width: 1600px) {
	
	.stage { padding: 24px 120px 80px; }
    .disclaimer {  padding: 24px 120px 40px; }
	.foot {  padding: 0 120px 8rem;}
}

@media (max-width: 1280px) {
	.stage { padding: 24px 64px 80px; }
    .disclaimer { padding: 24px 64px 40px; }
	.foot { padding: 0 64px 6rem; }
}

@media (max-width: 1100px) {
  .disclaimer { padding: 22px 40px 40px;}

  .stage{padding:24px 40px 60px;}
  .split{gap:48px;}
}

@media (max-width: 900px) {
	.hero-num {font-size: clamp(48px, 12vw, 80px);}
	.sentence {max-width:100%;}
	.split{grid-template-columns:1fr;gap:60px;  margin-top: 7rem;}
	.stage {  padding: 14px 22px 60px; }
    .disclaimer { padding: 20px 22px 32px; flex-direction: column; gap: 8px; }
	.foot { padding: 0 22px 6rem; flex-direction: column; gap: 18px; font-size: 0.8rem; }
	.foot p{max-width: 100%;}
	section .eyebrow {font-size: 30px; }
	.lede { max-width: 90%;}
	h1.display { font-size: 40px; margin-block: 2rem; line-height: 1.1; }
	.ticks {margin-top: 0.6rem; font-size: 14px;}
	.field-head {margin-bottom: 0.8rem;}
	.num { font-size: 36px; }
	.small-num{font-size:28px;}
	.verb {margin-right: 1rem;}
	.unit {margin-left: 1rem;}
	.chart-card .eyebrow, .chart-head .eyebrow, .lifewrap .eyebrow, .arc-wrap .eyebrow, .band .eyebrow, .ret-hero .eyebrow, .hero-cap .eyebrow, .hero-cap .cap.acc, .section-head .eyebrow, .disclaimer .tag, .result-grid .eyebrow, .amort-head .eyebrow {font-size: 14px;}
	.legend,.cap{font-size: 14px;}
	.abbr,.meta {font-size: 16px;letter-spacing: 0.04em; }
	.cell {gap:14px;}
	.disclaimer p{letter-spacing: 0.04em;}
	
	
}

@media(max-width:768px){
	    .chart-card .eyebrow, .chart-head .eyebrow, .lifewrap .eyebrow, .arc-wrap .eyebrow, .band .eyebrow, .ret-hero .eyebrow, .hero-cap .eyebrow, .hero-cap .cap.acc, .section-head .eyebrow, .disclaimer .tag, .result-grid .eyebrow, .amort-head .eyebrow {  font-size: 1rem; }
	    .legend, .cap {font-size: 14px;}
}

@media(max-width:480px){
		.axis-label,.tip-label {font-size: 18px; letter-spacing: 0.14em;}
	.hero-num {font-size: 40px;}
	.foot{ padding: 0 22px 13rem;}
	section .eyebrow {font-size: 20px;}
	h1.display {font-size: 24px; margin-block:1rem; max-width: 90%;}
	.split {margin-top: 6rem; gap:28px;}
	.lede {font-size: 1rem;  margin-bottom: 2rem;}
	.verb {font-size: 0.9rem;margin-right: 0.6rem;}
	.unit { margin-left: 0.6rem; }
	.meta {white-space: normal;}
	.num{font-size: 20px;}
	.small-num {font-size: 20px; }
	.num.editable{ margin-top: 0.5rem;  width: fit-content;}	
	.field-head {    grid-template-columns: 1fr;}
	.cell {margin-bottom: 1.3rem;}
	.legend, .cap {  font-size: 12px;  letter-spacing: 0.12em;}
	.cap{/*text-align: right;*/}
	.abbr, .meta {font-size: 14px;}
	.bar-label,.bar-val,.bar-label + text{font-size: 24px;}
	.tlink {font-size: 1rem;}
	.chart-card .eyebrow, .chart-head .eyebrow, .lifewrap .eyebrow, .arc-wrap .eyebrow, .band .eyebrow, .ret-hero .eyebrow, .hero-cap .eyebrow, .hero-cap .cap.acc, .section-head .eyebrow, .disclaimer .tag, .result-grid .eyebrow, .amort-head .eyebrow { font-size: 12px; }
	.sentence {gap:1.5rem;}

	.hero-abbr {font-size: 1rem;}
	.hero-block {padding-top: 1rem;}
	.tlink {font-size: 14px;}
	.hero-row {margin-bottom: 1.5rem;}
	.stage{padding-bottom: 1rem;}
	.disclaimer > .disc-inner {flex-direction: column;}
	.disclaimer .rule {display: none;}
	.tlink {margin-top: 0px;}
	svg.chart { width: 95%; margin-inline: auto; height: 230px;}
	.split > * {  max-width: 100%; margin-inline:auto;}
	.result-grid {    gap: 10px 40px;}

}

@media(max-width:375px){
    .num { font-size: 20px; }
}

@media(max-width:320px){
	.cell {  margin-bottom: 0rem;  }
	.lede {max-width: 100%;}
}