/* CAGR-specific styles */

input,select{font:inherit;color:inherit;}

/* ---------- Mesh + halo (decorative) ---------- */
.mesh{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.45;}
.mesh::before,.mesh::after{ content:"";position:absolute;border-radius:50%;filter:blur(140px);will-change:transform;}

@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(8vw,4vw) scale(1.1)}}

@keyframes drift2{from{transform:translate(0,0) scale(1)}to{transform:translate(-6vw,-3vw) scale(1.12)}}

/* ---------- Topbar ---------- */
.topbar{
  position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;
  padding:32px 200px;font-size:13px;color:var(--ink-2); background:rgba(245,245,244,.82);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--rule);
}

.topnav a:hover{color:var(--ink);}
.topnav a.cta-nav:hover{background:var(--magenta-2);transform:translateY(-1px);}

/* ---------- Typography ---------- */

.eyebrow::before{display:none;}

/* ---------- Cards ---------- */
.card{
  background:var(--card);border-radius:16px;
  box-shadow:0 1px 3px rgba(35,31,32,.06),0 4px 16px rgba(35,31,32,.06); padding:28px 32px;
}

/* ---------- Sliders ---------- */
.field{display:flex;flex-direction:column;gap:14px;}

/* Underline-only inputs */
.uline{
  background:transparent;border:0;border-bottom:1px solid var(--rule-2);
  padding:8px 2px;font-size:18px;color:var(--ink);width:100%;outline:none;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";letter-spacing:-0.01em;
  transition:border-color .2s;
}

/* Toggle (segmented underline) */
.seg{display:inline-flex;gap:24px;border-bottom:1px solid var(--rule);}

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


/* Shared disclaimer strip */
.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;
}



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

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

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

/* Calculator page layout */

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

.sentence{display:flex;flex-direction:column;gap:36px;max-width:730px;}

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



.three{display:flex;flex-direction:column;gap:42px;max-width:520px;margin-top:32px;}

.three .row{display:grid;grid-template-columns:120px 1fr;align-items: baseline;gap:24px;border-bottom:1px solid var(--rule);padding-bottom:14px;}
.three .row label{font-family:'Neue Montreal','Plus Jakarta Sans',sans-serif;font-size:22px;color:var(--ink);}
.three .row .val{display:flex;align-items:baseline;justify-content:flex-end;gap:8px;}
.three .row .val .pre{font-size:24px;color:var(--ink-2);font-weight:300;}

.three .row .val input{
    background:transparent;border:0;outline:none;text-align:right;
    font-size:42px;font-weight:300;letter-spacing:-0.03em;color:var(--ink);
    font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
    width:100%;padding:4px 0;
  }

.three .row .val .suf{font-size:18px;color:var(--ink-2);}
.three .row .val input:focus{color:var(--magenta-2);}

.three .hint{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);grid-column:1/-1;margin-top:-6px;}

.arc-wrap{position:relative;padding-top:6px;}

svg.arc{display:block;width:100%;height:auto;overflow:visible;}

.arc-axis{stroke:var(--rule);stroke-width:1;}

.arc-label{fill:var(--ink-3);font-size:11px;letter-spacing:.04em;font-family:'Neue Montreal','Plus Jakarta Sans',sans-serif;}

.arc-dot-start{fill:var(--navy-1);stroke:#fff;stroke-width:3;}
.arc-dot-end{fill:#EC1651;stroke:#fff;stroke-width:3;}

.arc-num{font-family:'Neue Montreal','Plus Jakarta Sans',sans-serif;fill:var(--ink);font-variant-numeric:tabular-nums;}

.cagr-hero{
    margin-top:48px;display:flex;align-items:baseline;justify-content:space-between;
    gap:24px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:34px;
  }

.cagr-num{ 
	font-family: 'Neue Montreal', 'Plus Jakarta Sans', sans-serif; font-weight: 300 !important; font-size: clamp(80px, 9.5vw, 120px);
    line-height:.88;letter-spacing: 0.055em; color:var(--ink);font-variant-numeric:tabular-nums; white-space:nowrap;
}

.cagr-num .pct{font-size:.5em;}
.cagr-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.cagr-meta{font-family:'Neue Montreal','Plus Jakarta Sans',sans-serif;color:var(--ink-2);font-size:22px;}

.grow-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:34px;flex-wrap:wrap;gap:24px;}
.grow-row .cell{display:flex;flex-direction:column;gap:6px;}
.grow-row .v{font-size:26px;font-weight: 400;letter-spacing: 0.04em;font-variant-numeric:tabular-nums;}
.grow-row .v.navy{color:var(--navy-1);}
.grow-row .v.mag{color:var(--magenta-2);}


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

@media (max-width:1600px){
  .topbar{padding:32px 120px;}
  .backlink{margin:14px 120px 0;}
  .disclaimer{padding:24px 120px 40px;}

}

@media (max-width:1280px){
  .topbar{padding:32px 64px;}
  .backlink{margin:14px 64px 0;}
  .disclaimer{padding:24px 64px 40px;}

}

@media (max-width:1100px){
  .topbar{padding:28px 40px;}
  .backlink{margin:14px 40px 0;}
  .disclaimer{padding:22px 40px 40px;}
  .split{gap:48px;}
}

@media (max-width:900px){
  .topbar{padding:22px 22px;}
  .topnav{display:none;}
  .backlink{margin:14px 22px 0;}

  .small-num{font-size:28px;}
  .result-grid{grid-template-columns:1fr 1fr;gap:32px 24px;}
  .num{font-size:36px;}
  .three {max-width:100%;}
  .three .row {grid-template-columns: 150px 1fr; align-items: baseline;}
  .three .row .val input{font-size:30px}
  .cagr-num{font-size:96px;}
	
  .disclaimer{padding:20px 22px 32px;flex-direction:column;gap:8px;}
  .disclaimer .rule{display:none;}
}




@media(max-width:480px){
	.three .row .val input {font-size: 24px;}
	.three .row {grid-template-columns: 116px 1fr;}
	.three {gap:1.5rem;}
	svg.arc {height: 300px;}
	.arc-label {font-size: 16px;  letter-spacing: 0.14em;}
	.arc-num { font-size: 1.5rem;}
    .cagr-num { font-size: 40px; }
	.cagr-meta {font-size: 1rem;}
	.grow-row .v { font-size: 20px;}
	.split {gap:30px;}
}


@media(max-width:375px){

}

@media(max-width:320px){
	.cagr-side {align-items: flex-start;}
}