/* ==========================================================
   CALCULATOR — client-side B2B compensation estimate.
   No backend — pure JS math, purely illustrative numbers.
   ========================================================== */
.calc{padding:0 48px 160px;}
.calc-box{
  max-width:900px;margin:0 auto;background:var(--surface-2);
  padding:56px 48px;border-radius:4px;
}
.calc-head{text-align:center;padding-bottom:36px;}
.calc-head h2{font-family:Georgia,"Noto Serif","Times New Roman",serif;font-style:italic;font-weight:500;font-size:clamp(26px,3.6vw,36px);}
.calc-fields{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:36px;}
.calc-field label{display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--taupe);margin-bottom:10px;}
.calc-field input[type="range"]{width:100%;accent-color:var(--accent);}
.calc-field .val{font-family:Georgia,"Noto Serif","Times New Roman",serif;font-style:italic;font-size:22px;margin-top:6px;display:block;}
.calc-result{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  border-top:1px solid var(--line);padding-top:28px;
}
.calc-result div{text-align:center;}
.calc-result .num{font-family:Georgia,"Noto Serif","Times New Roman",serif;font-style:italic;font-size:34px;color:var(--accent);display:block;}
.calc-result .lbl{font-size:12px;color:var(--taupe);text-transform:uppercase;letter-spacing:.05em;}
.calc-note{font-size:11px;color:var(--taupe);text-align:center;margin-top:24px;}
.calc-cta{display:flex;justify-content:center;margin-top:28px;}

@media (max-width:640px){
  .calc{padding:0 20px 100px;}
  .calc-box{padding:36px 22px;}
  .calc-fields{grid-template-columns:1fr;}
  .calc-result{grid-template-columns:1fr 1fr;}
}