/* ============================================================================
   ROI Calculator styles — inherits the site's existing tokens (css/style.css).
   No new palette, fonts, or radii introduced; everything uses the same vars.
   ============================================================================ */

.calc-hero{position:relative;padding-top:calc(74px + clamp(60px,8vw,100px));padding-bottom:clamp(30px,5vw,50px);overflow:hidden}
.calc-hero .inner{position:relative;z-index:2;max-width:820px}
.calc-hero h1{font-size:clamp(2.3rem,5.5vw,4rem);margin:.4em 0 .35em}

.calc-shell{max-width:840px;margin:0 auto;padding-bottom:clamp(60px,9vw,120px)}
.calc-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.6rem,4vw,3rem);position:relative;overflow:hidden;
}

/* progress */
.calc-progress{height:4px;background:var(--line);border-radius:999px;overflow:hidden;margin-bottom:1.8rem}
.calc-progress-bar{height:100%;background:linear-gradient(90deg,var(--blue),var(--amber));transition:width .4s var(--ease)}
.calc-step-meta{margin-bottom:.5rem}
.calc-q{font-size:clamp(1.5rem,3.2vw,2.2rem);margin-bottom:.4rem}
.calc-help{color:var(--muted);font-size:.98rem;margin-bottom:1.4rem}
.calc-help b{color:var(--text)}

/* option grids */
.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.7rem;margin-bottom:.3rem}
.opt-grid.chips{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.opt{
  font-family:var(--ff-body);font-size:.98rem;color:var(--text);text-align:left;
  background:var(--ink);border:1px solid var(--line-strong);border-radius:12px;
  padding:1rem 1.1rem;cursor:pointer;transition:border-color .2s,background .2s,transform .15s;
}
.opt:hover{border-color:var(--blue-bright);transform:translateY(-2px)}
.opt.sel{border-color:var(--amber);background:linear-gradient(150deg,rgba(255,176,0,.12),rgba(255,176,0,.03));color:#fff}
.opt-grid.chips .opt{text-align:center;font-family:var(--ff-mono)}

/* custom input */
.custom-wrap{margin-top:1rem}
.fld-label{display:block;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.fld{
  width:100%;background:var(--ink);border:1px solid var(--line-strong);border-radius:10px;
  padding:.85rem 1rem;color:#fff;font-family:var(--ff-body);font-size:1rem;transition:border-color .2s,box-shadow .2s;
}
.fld:focus{outline:none;border-color:var(--blue-bright);box-shadow:0 0 0 3px rgba(42,155,236,.18)}

/* split slider */
.split-wrap{margin-top:1.2rem}
.split-wrap b{color:var(--amber)}
input[type=range]{width:100%;accent-color:var(--amber)}

/* nav + validation */
.calc-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:1.8rem}
.calc-invalid,.lead-invalid{color:#ff8f8f;font-size:.9rem;margin-top:1rem;background:rgba(255,80,80,.08);border:1px solid rgba(255,80,80,.25);border-radius:10px;padding:.7rem 1rem}

/* ============================ RESULTS ============================ */
.res-head{text-align:center;max-width:680px;margin:0 auto clamp(28px,4vw,44px)}
.res-head .eyebrow{justify-content:center}
.res-head h2{margin:.4em 0 .5em}

/* 3-scenario compare */
.scn-compare{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem}
.scn{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.2rem;text-align:center}
.scn.feat{border-color:var(--amber);background:linear-gradient(180deg,rgba(255,176,0,.06),var(--surface))}
.scn-name{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.scn-roi{font-family:var(--ff-display);font-size:clamp(1.8rem,4vw,2.6rem);font-weight:600;color:#fff;line-height:1}
.scn-roi span{display:block;font-size:.7rem;font-family:var(--ff-mono);letter-spacing:.1em;color:var(--muted);margin-top:.3rem}
.scn.feat .scn-roi{color:var(--amber)}
.scn-rows{margin-top:1rem;display:grid;gap:.5rem;text-align:left}
.scn-rows>div{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);padding-top:.5rem}
.scn-rows b{color:#fff;font-family:var(--ff-mono);font-weight:500}
.pos{color:#43d17f!important}.neg{color:#ff8f8f!important}

/* scenario tabs */
.scn-tabs{display:flex;gap:.5rem;justify-content:center;margin-bottom:1.5rem;flex-wrap:wrap}
.scn-tab{font-family:var(--ff-display);font-size:.9rem;color:var(--muted);background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:.6rem 1.3rem;cursor:pointer;transition:.2s}
.scn-tab:hover{color:#fff}
.scn-tab.active{background:var(--amber);color:#0a0a0a;border-color:var(--amber);font-weight:600}

/* highlights */
.hl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.6rem}
.hl{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.2rem;text-align:center}
.hl span{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.6rem}
.hl b{font-family:var(--ff-display);font-size:clamp(1.4rem,3vw,2rem);font-weight:600;color:#fff}
.hl.amber{border-color:var(--amber);background:linear-gradient(180deg,rgba(255,176,0,.08),var(--surface))}
.hl.amber b{color:var(--amber)}
.rec-note{background:rgba(0,113,188,.08);border:1px solid rgba(0,113,188,.25);border-radius:10px;padding:.8rem 1rem;margin-bottom:1.4rem}

/* metrics grid */
.mx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-bottom:1.4rem}
.mx-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.4rem}
.mx-card h3{font-size:1.05rem;margin-bottom:1rem;color:#fff}
.mx-rows{display:grid;gap:.6rem}
.mx-rows>div{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem;color:var(--muted);border-top:1px solid var(--line);padding-top:.6rem}
.mx-rows>div:first-child{border-top:0;padding-top:0}
.mx-rows b{color:#fff;font-family:var(--ff-mono);font-weight:500;text-align:right}

.res-two{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.4rem}

/* funnel */
.funnel{display:grid;gap:.55rem}
.fn-row{display:flex}
.fn-bar{background:linear-gradient(90deg,var(--blue),rgba(0,113,188,.35));border:1px solid rgba(42,155,236,.4);border-radius:8px;padding:.6rem .9rem;display:flex;justify-content:space-between;gap:1rem;align-items:center;min-width:42%;transition:width .5s var(--ease)}
.fn-k{font-size:.82rem;color:#dCe7f5}
.fn-v{font-family:var(--ff-mono);font-size:.85rem;color:#fff;font-weight:500;white-space:nowrap}

/* disclaimer */
.res-disclaimer{font-size:.82rem;color:var(--muted-2);line-height:1.6;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.3rem;margin:1.6rem 0}

/* lead capture */
.lead-card{background:var(--surface-2);border:1px solid var(--line-strong);border-radius:20px;padding:clamp(1.6rem,4vw,2.6rem);margin-bottom:1.6rem;position:relative;overflow:hidden}
.lead-head{text-align:center;max-width:520px;margin:0 auto 1.6rem}
.lead-head h3{margin:.4em 0 .4em}
.lead-form{max-width:560px;margin:0 auto}
.lf-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fld-wrap{margin-bottom:1rem}
.lead-ok{margin-top:1rem;text-align:center;color:#43d17f;background:rgba(67,209,127,.08);border:1px solid rgba(67,209,127,.3);border-radius:10px;padding:.9rem}

.res-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.4rem}

/* responsive */
@media(max-width:720px){
  .scn-compare{grid-template-columns:1fr}
  .res-two{grid-template-columns:1fr}
  .lf-row{grid-template-columns:1fr}
}