/* ============================================================
   ESCALATE SHOW CALCULATOR
   Bump ESC_VER in style.css on every change (hCDN cache).

   Built for a phone held at a trade show, so the single-column
   layout is the real one and the two-column desktop view is the
   variation. Every colour comes from tokens.css.
   ============================================================ */

/* No glow on either card. A coloured halo around a white panel reads as
   decoration the brand does not use, and it made the result card look like it
   was floating off the page. The hairline border does the separating. */

.esc-show__grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:start;}

/* ---------- The left column: the question and the two fields ---------- */

/* The eyebrow names the event, which is the first thing a visitor at the booth
   should recognise, so it reads at roughly twice the site's usual size. Scoped
   to this block so no other page moves. */
.esc-show .esc-eyebrow{font-size:1.5rem;letter-spacing:.08em;margin-bottom:1.1rem;}
.esc-show .esc-eyebrow::before{width:44px;height:3px;}

.esc-show__h{font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.15;margin:0 0 .6rem;}
.esc-show__brand{color:var(--blue);}
.esc-show__lede{font-size:1.05rem;color:var(--muted);line-height:1.55;margin:0 0 26px;max-width:46ch;}

.esc-show__inputs{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.esc-show__inputs label{display:block;font-weight:600;font-size:.85rem;color:var(--ink);margin:0 0 7px;}
/* The field and card outlines use the stronger of the theme's two line
   tokens. At --line they read as a suggestion of a box rather than a box. */
.esc-show input{width:100%;font-family:var(--body);font-size:1.4rem;font-weight:700;color:var(--ink);padding:14px 16px;background:#fff;border:2px solid var(--line-strong);border-radius:12px;outline:none;-webkit-appearance:none;appearance:none;}
.esc-show input::placeholder{color:#b7bcca;font-weight:600;}
.esc-show input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(27,60,245,.12);}

.esc-show__go{margin:20px 0 0;}
.esc-show__go .esc-btn{justify-content:center;min-width:180px;font-size:1.05rem;padding:1.05rem 2rem;}

.esc-show__basis{font-size:.88rem;color:var(--muted);margin:16px 0 0;line-height:1.5;}
.esc-show__basis strong{color:var(--ink);}
.esc-show__human{font-size:1rem;color:var(--ink);line-height:1.6;margin:0;max-width:46ch;}

/* ---------- The right column: the answer ---------- */

.esc-show__card{background:#fff;border:2px solid var(--line-strong);border-radius:20px;padding:28px;}

.esc-show__block{padding:0 0 20px;}
.esc-show__block--save{border-top:1px solid var(--line);padding-top:20px;}

.esc-show__rlabel{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px;}
.esc-show__total{font-size:clamp(2.4rem,7vw,3.4rem);font-weight:800;line-height:1.05;color:var(--ink);margin:0;font-variant-numeric:tabular-nums;}
.esc-show__total--save{color:var(--blue);}
.esc-show__rsub{font-size:.95rem;color:var(--muted);margin:6px 0 0;line-height:1.5;}
.esc-show__year{font-size:.95rem;font-weight:600;color:var(--ink);margin:8px 0 0;}
.esc-show__fee{font-size:.9rem;color:var(--muted);margin:0 0 12px;}

.esc-show__note{font-size:.82rem;color:var(--muted);line-height:1.5;margin:0;}

/* The ask is its own panel at the foot of the card, on a different ground and
   running the full width of it, so the card reads as two things: here is your
   money, and here is what to do about it. Extra margin alone was tried first
   and was not enough, because the button still sat on the same white surface
   as the figures and read as one more line of the result. */
.esc-show__foot{margin:34px -28px -28px;padding:28px;background:var(--mist);border-top:1px solid var(--line);border-radius:0 0 20px 20px;}

.esc-show__cta{display:flex;flex-direction:column;gap:10px;margin:0;}
.esc-show__cta .esc-btn{width:100%;justify-content:center;text-align:center;}
.esc-show__cta+.esc-show__note{margin-top:14px;}

/* ---------- The proposal form ---------- */

/* The proposal panel is its own thing, not a continuation of the calculator.
   At 40px on a white page under a white card it had no separation at all and
   read as a cramped afterthought. A rule and real distance above it now say
   where the calculator ends and the ask begins. */
.esc-show__formwrap{margin-top:64px;padding-top:56px;border-top:1px solid var(--line);}
.esc-show__fcard{background:#fff;border:2px solid var(--line-strong);border-radius:20px;padding:28px;max-width:640px;margin:0 auto;}
.esc-show__flogo{display:block;height:34px;width:auto;margin:0 0 20px;}
.esc-show__ftitle{font-size:1.5rem;margin:0 0 .4rem;}
.esc-show__fsub{font-size:1rem;color:var(--muted);line-height:1.55;margin:0 0 22px;}

.esc-show__form label{display:block;font-weight:600;font-size:.85rem;color:var(--ink);margin:0 0 7px;}
.esc-show__form>div{margin:0 0 14px;}
.esc-show__form input{font-size:1.05rem;font-weight:600;border-width:2px;}
.esc-show__frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 14px;}
.esc-show__frow>div{margin:0;}
.esc-show__form .esc-btn{width:100%;margin-top:4px;}

/* The honeypot is off-screen rather than display:none, because some bots skip
   what is hidden and fill what is merely out of the way. */
.esc-show__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.esc-show__err{font-size:.9rem;font-weight:600;color:#B3261E;margin:12px 0 0;}
.esc-show__consent{font-size:.78rem;color:var(--muted);line-height:1.5;margin:14px 0 0;}

.esc-show__done{text-align:center;padding:20px 0;}
.esc-show__check{width:56px;height:56px;line-height:56px;margin:0 auto 16px;border-radius:50%;background:var(--blue);color:#fff;font-size:1.6rem;font-weight:700;}
.esc-show__done h2{font-size:1.4rem;margin:0 0 .4rem;}
.esc-show__done p{color:var(--muted);margin:0;}

/* The straight-to-a-call option, held apart from the confirmation above it so
   it reads as a second offer rather than more of the same message. */
.esc-show__book{margin:30px 0 0;padding:28px;background:var(--cream);border-radius:16px;text-align:center;}
.esc-show__bookh{font-size:1.25rem;line-height:1.3;color:var(--ink);margin:0 0 .5rem;}
.esc-show__bookline{font-size:1rem;color:var(--muted)!important;margin:0 0 20px!important;line-height:1.55;max-width:44ch;margin-inline:auto!important;}
.esc-show__book .esc-btn{width:auto;margin:0;justify-content:center;font-size:1.05rem;padding:1.05rem 2rem;}

/* ---------- Desktop ---------- */

@media (min-width:880px){
  .esc-show__grid{grid-template-columns:1.25fr 1fr;gap:40px 56px;align-items:start;}
  /* The card spans both rows on the right, so the sentence about how a driver
     reaches help sits under the two fields where it was written to sit. */
  .esc-show__intro{grid-column:1;grid-row:1;}
  .esc-show__card{grid-column:2;grid-row:1 / span 2;padding:32px;}
  .esc-show__foot{margin:38px -32px -32px;padding:32px;}
  .esc-show__formwrap{margin-top:88px;padding-top:72px;}
  .esc-show__human{grid-column:1;grid-row:2;}
  .esc-show__cta{flex-direction:row;flex-wrap:wrap;}
  .esc-show__cta .esc-btn{width:auto;flex:1 1 auto;}
}

/* A phone at a booth is the real case, so the fields stay side by side down to
   the narrowest screens and only the form row stacks. */
@media (max-width:420px){
  .esc-show__frow{grid-template-columns:1fr;}
}