/* ============================================================
   ESCALATE COST CALCULATOR
   Bump ESC_VER in functions.php on every change (hCDN cache).

   Ported from the standalone Vercel build. Every colour now comes from
   tokens.css, so the tool inherits the site's orange accent instead of the
   old coral it shipped with, and a future brand change reaches it for free.
   Only the three shades the tool needs and the site does not are declared
   here, scoped to the component.
   ============================================================ */

.esc-calc{
  --calc-hire:var(--blue);
  --calc-train:#6E8BFF;
  --calc-prod:#8A94A6;
  --calc-shadow-accent:0 18px 40px rgba(234,140,46,.28);
  --calc-shadow-blue:0 18px 40px rgba(27,60,245,.22);
}

/* The tool sits on mist, as it did standalone, so the white result card and the
   white assessment card read as objects on a surface rather than as the page. */
.esc-section--calc{background:var(--mist);}

/* ---------- Cost view: inputs beside the running total ---------- */
.esc-calc__cost{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:center;}
.esc-calc__h{font-size:clamp(2.1rem,3.6vw,3rem);margin:0 0 .5rem;}
.esc-calc__lede{font-size:1.1rem;color:var(--muted);line-height:1.55;margin:0 0 24px;max-width:44ch;}

.esc-calc__inputs{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.esc-calc__inputs label{display:block;font-weight:600;font-size:.85rem;color:var(--ink);margin:0 0 7px;}
.esc-calc input,
.esc-calc select{width:100%;font-family:var(--body);font-size:1.2rem;font-weight:700;color:var(--ink);padding:13px 15px;background:#fff;border:1.5px solid var(--line);border-radius:12px;outline:none;-webkit-appearance:none;appearance:none;}
.esc-calc input::placeholder{color:#b7bcca;font-weight:600;}
.esc-calc select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B5E6E' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 15px center;}
.esc-calc input:focus,
.esc-calc select:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(27,60,245,.12);}
.esc-calc__hint{font-size:.72rem;color:var(--muted);font-weight:500;margin:5px 0 0;line-height:1.4;}
.esc-calc__period{font-size:.9rem!important;font-weight:600!important;padding:8px 12px!important;margin-top:7px;}

/* The dollar sits inside the field, not on the label. Alexis, 2026-07-21. */
.esc-calc__money{position:relative;}
.esc-calc__money>span{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:1.2rem;font-weight:700;color:var(--ink);pointer-events:none;line-height:1;}
.esc-calc__money>input{padding-left:30px;}

/* ---------- The result card ---------- */
.esc-calc__card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:28px;}
.esc-calc__result{border-radius:var(--r);padding:22px 26px;text-align:center;color:#fff;background:var(--orange);box-shadow:var(--calc-shadow-accent);transition:background .3s ease,box-shadow .3s ease;}
.esc-calc__result.is-savings{background:var(--blue);box-shadow:var(--calc-shadow-blue);}
.esc-calc__result.is-empty{background:var(--mist);color:var(--muted);box-shadow:none;border:1.5px dashed var(--line);}
.esc-calc__rlabel{font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0 0 6px;}
.esc-calc__result.is-empty .esc-calc__rlabel{color:var(--muted);}
.esc-calc__total{font-family:var(--display);font-weight:700;font-size:clamp(2.5rem,6.6vw,3.6rem);line-height:1;margin:0;}
.esc-calc__result.is-empty .esc-calc__total{color:#c4cbdb;}
.esc-calc__rsub{font-size:.95rem;color:rgba(255,255,255,.88);margin:8px 0 0;}
.esc-calc__result.is-empty .esc-calc__rsub{color:var(--muted);}

/* ---------- Where the money goes ---------- */
.esc-calc__bd{margin-top:16px;}
.esc-calc__bar{display:flex;height:14px;border-radius:99px;overflow:hidden;background:var(--line);}
.esc-calc__bar span{width:0;transition:width .3s ease;}
.esc-calc__bar span:nth-child(1){background:var(--orange);}
.esc-calc__bar span:nth-child(2){background:var(--calc-hire);}
.esc-calc__bar span:nth-child(3){background:var(--calc-train);}
.esc-calc__bar span:nth-child(4){background:var(--calc-prod);}
/* One column, not two. The standalone build had a 1320px page and a card wide
   enough for two; this site is 1180px, and at that width "Hiring & recruiting"
   wrapped onto two lines in every second cell. */
.esc-calc__legend{display:grid;grid-template-columns:1fr;gap:9px;margin-top:14px;}
.esc-calc__li{display:flex;align-items:center;justify-content:space-between;font-size:.9rem;}
.esc-calc__nm{display:flex;align-items:center;gap:8px;color:var(--muted);}
.esc-calc__dot{width:10px;height:10px;border-radius:3px;flex:none;}
.esc-calc__dot--miss{background:var(--orange);}
.esc-calc__dot--hire{background:var(--calc-hire);}
.esc-calc__dot--train{background:var(--calc-train);}
.esc-calc__dot--prod{background:var(--calc-prod);}
.esc-calc__amt{font-weight:700;color:var(--ink);}

.esc-calc__note{margin:14px 0 0;font-size:.78rem;color:var(--muted);line-height:1.55;text-align:center;}
.esc-calc__cta{margin-top:18px;text-align:center;min-height:1px;}
.esc-calc__cta .esc-btn{justify-content:center;}

/* ---------- Assessment and read ---------- */
.esc-calc__acard{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:38px 42px;margin:10px auto 0;}
.esc-calc__prog{display:flex;align-items:center;gap:14px;margin-bottom:26px;}
.esc-calc__pbar{flex:1;height:8px;border-radius:99px;background:var(--line);overflow:hidden;}
.esc-calc__pbar span{display:block;height:100%;background:var(--blue);width:10%;transition:width .3s ease;}
.esc-calc__pstep{font-size:.8rem;font-weight:600;color:var(--muted);white-space:nowrap;}
.esc-calc__q{font-size:clamp(1.35rem,2.6vw,1.85rem);line-height:1.16;margin:0 0 22px;}
.esc-calc__qsub{color:var(--muted);font-size:.98rem;line-height:1.5;margin:-14px 0 22px;}
.esc-calc__opts{display:flex;flex-direction:column;gap:12px;}
.esc-calc__opt{text-align:left;width:100%;font-family:var(--body);font-size:1.05rem;font-weight:600;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:16px 18px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;}
.esc-calc__opt:hover{border-color:var(--blue);background:var(--mist);box-shadow:0 0 0 4px rgba(27,60,245,.08);}
.esc-calc__opt.is-selected{border-color:var(--blue);background:var(--mist);}
.esc-calc__back{background:none;border:none;color:var(--muted);font-family:var(--body);font-weight:600;font-size:.9rem;cursor:pointer;text-decoration:underline;margin-top:24px;padding:0;}
.esc-calc__back:hover{color:var(--blue);}

.esc-calc__ftop{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center;margin:0 0 4px;}
.esc-calc__ftitle{font-size:clamp(1.6rem,3vw,2.15rem);line-height:1.12;margin:8px 0 8px;}
.esc-calc__ftitle.is-risk{color:var(--orange);}
.esc-calc__ftitle.is-good{color:var(--blue);}
.esc-calc__fsub{color:var(--muted);font-size:1.05rem;line-height:1.55;margin:0 0 20px;}
.esc-calc__gaps{list-style:none;padding:0;margin:0;}
.esc-calc__gaps li{position:relative;padding:11px 0 11px 30px;border-bottom:1px solid var(--line);font-size:1rem;line-height:1.45;}
.esc-calc__gaps li::before{content:"";position:absolute;left:0;top:16px;width:12px;height:12px;border-radius:3px;background:var(--orange);}
.esc-calc__fright{background:rgba(234,140,46,.08);border:1px solid rgba(234,140,46,.24);border-radius:16px;padding:28px 24px;text-align:center;}
.esc-calc__fcn{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,5.2vw,3.6rem);color:var(--orange-dark);line-height:1;}
.esc-calc__fcl{font-size:.9rem;color:var(--orange-dark);margin-top:8px;line-height:1.4;}

/* ---------- The form ---------- */
.esc-calc__form-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;border-top:1px solid var(--line);margin-top:18px;padding-top:24px;}
.esc-calc__cq{font-size:clamp(2.4rem,5vw,3.6rem);line-height:1.05;color:var(--blue);margin:0 0 16px;}
.esc-calc__csub{color:var(--muted);font-size:1.02rem;line-height:1.55;margin:0;}
.esc-calc__form>div{margin-bottom:12px;}
.esc-calc__frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.esc-calc__frow>div{margin-bottom:0;}
.esc-calc__form label{display:block;font-weight:600;font-size:.8rem;margin:0 0 5px;}
.esc-calc__form input{font-size:1rem;font-weight:500;padding:11px 13px;}
.esc-calc__form .esc-btn{width:100%;justify-content:center;margin-top:4px;}
.esc-calc__consent{font-size:.72rem;color:var(--muted);margin:10px 0 0;line-height:1.5;}
.esc-calc__err{color:var(--orange-dark);font-weight:600;font-size:.85rem;margin:10px 0 0;}
.esc-calc__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.esc-calc__done{text-align:center;padding:16px 0;}
.esc-calc__done h3{font-size:1.4rem;margin:0 0 6px;}
.esc-calc__done p{color:var(--muted);margin:0;}
.esc-calc__check{width:52px;height:52px;border-radius:50%;background:var(--blue);color:#fff;font-size:1.6rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}

.esc-calc [hidden]{display:none!important;}

@media(max-width:880px){
  .esc-calc__cost{grid-template-columns:1fr;gap:28px;}
  .esc-calc__lede{max-width:none;}
  .esc-calc__legend{grid-template-columns:1fr;}
  .esc-calc__acard{padding:26px 24px;}
  .esc-calc__ftop{grid-template-columns:1fr;gap:22px;}
  .esc-calc__form-wrap{grid-template-columns:1fr;gap:24px;}
}
@media(max-width:560px){
  .esc-calc__inputs{grid-template-columns:1fr;}
  .esc-calc__frow{grid-template-columns:1fr;}
  .esc-calc__card{padding:20px;}
}