/* ============================================================
   LEAD-CAPTURE MODAL — shared sitewide component (2026-09-02)
   Loaded on every page (see tools/inject_lead_modal.py). Uses the
   site's existing :root design tokens (--blue/--green/--ink/etc,
   defined per-page) so it inherits whatever palette the host page
   already set, with hex fallbacks in case a page is missing one.
   Deliberately plain: generous white space, no gradients, no
   hover states, no icons/dividers beyond the one that separates
   the phone-call line from the form. See handoff.md for full docs.

   2026-09-02 visual-polish pass: bigger card with a narrower
   centered text column inside it (.lead-modal-inner), bigger/bolder
   centered headline, larger form controls, an oversized Submit
   button, a required legal-consent checkbox, and a redesigned
   success state with an on-brand checkmark icon.
   ============================================================ */

.lead-modal-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;
  padding:24px;opacity:0;
  transition:opacity .3s var(--ease-out,ease);
}
.lead-modal-overlay.is-open{display:flex;opacity:1;}

.lead-modal{
  position:relative;width:100%;max-width:760px;max-height:90vh;overflow-y:auto;
  background:var(--white,#FFFFFF);color:var(--ink,#0B1B2B);
  border-radius:28px;padding:40px 84px 36px;
  font-family:var(--body,'Public Sans',sans-serif);
  box-shadow:0 30px 80px -20px rgba(0,34,64,.35);
}

/* extra card width becomes side padding/breathing room, NOT wider text --
   headline/sub-header/form/success all live in this narrower column, kept
   well short of the card's own width so fields never go full-bleed. */
.lead-modal-inner{max-width:460px;margin:0 auto;}

.lead-modal-close{
  position:absolute;top:20px;right:20px;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;
  font-family:var(--body,'Public Sans',sans-serif);font-size:22px;line-height:1;
  color:var(--gray,#5E7486);
}

.lead-modal-head{text-align:center;}
.lead-modal-head h2{
  font-family:var(--display,'Inter',sans-serif);font-weight:900;
  font-size:clamp(34px,4.9vw,43px);line-height:1.1;letter-spacing:-0.02em;
  margin-bottom:16px;
}
.lead-modal-head p{
  color:var(--gray,#5E7486);font-size:15.5px;line-height:1.4;margin-bottom:16px;
}

.lead-field{margin-bottom:7px;display:flex;flex-direction:column;gap:2px;}

.lead-required{color:var(--orange,#FF4D00);font-weight:700;}

.lead-field input,
.lead-field select{
  font-family:var(--body,'Public Sans',sans-serif);font-size:16.5px;color:var(--ink,#0B1B2B);
  background:var(--mist,#F5F7F9);border:1.5px solid var(--gray-d,#28455E);
  border-radius:12px;padding:17px 20px;width:100%;
}
.lead-field select{appearance:auto;color:var(--ink,#0B1B2B);}
/* select's first (disabled) option doubles as its placeholder -- no
   ::placeholder pseudo-class exists for <select> across browsers */
.lead-field input::placeholder{color:var(--gray,#5E7486);opacity:1;}
.lead-field input:focus-visible,
.lead-field select:focus-visible{
  outline:2px solid var(--blue,#00A0D4);outline-offset:1px;
}

.lead-error{font-size:12.5px;color:var(--orange,#FF4D00);display:none;}
.lead-field.has-error .lead-error{display:block;}
.lead-field.has-error input,
.lead-field.has-error select{border-color:var(--orange,#FF4D00);}

/* ---- legal consent checkbox: legible but visually secondary to the
   actual form fields (smaller, muted gray, not bold/uppercase). Its
   <label> no longer competes with a generic ".lead-field label" rule
   (the 2026-09-02 label-to-placeholder pass removed the other labels
   entirely), so this can style the label directly with no specificity
   workaround needed. ---- */
.lead-consent{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;text-align:left;
  font-weight:400;color:var(--gray,#5E7486);
}
.lead-consent input[type="checkbox"]{
  margin-top:3px;width:19px;height:19px;flex:none;accent-color:var(--green,#70D44B);
}
.lead-consent span{font-size:13px;line-height:1.55;color:inherit;}
.lead-consent a{color:var(--ink,#0B1B2B);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.lead-field.has-error .lead-consent{color:var(--orange,#FF4D00);}
.lead-field.has-error .lead-consent input{outline:2px solid var(--orange,#FF4D00);outline-offset:2px;}

.lead-submit{
  margin:6px auto 0;display:block;width:80%;text-align:center;border:none;cursor:pointer;
  font-family:var(--display,'Inter',sans-serif);font-weight:800;font-size:18px;
  text-transform:uppercase;letter-spacing:.03em;
  color:var(--ink,#0B1B2B);background:var(--green,#70D44B);
  padding:17px 32px;border-radius:100px;
  box-shadow:0 12px 32px -10px rgba(112,212,75,.75);
}
.lead-submit:disabled{opacity:.55;cursor:default;}
/* no hover state, matches sitewide button rule */

.lead-call-line{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line,rgba(0,34,64,.08));
  text-align:center;font-size:13.5px;color:var(--gray,#5E7486);
}
.lead-call-line a{color:var(--ink,#0B1B2B);font-weight:700;text-decoration:underline;text-underline-offset:2px;}

/* ---- success state: same generous footprint as the form state,
   centered icon + bold headline + one short supporting line ---- */
.lead-success{display:none;text-align:center;padding:40px 0 24px;}
.lead-success.is-active{display:block;}
.lead-success-icon{width:76px;height:76px;margin:0 auto 28px;}
.lead-success-icon-circle{fill:var(--green,#70D44B);}
.lead-success-icon-check{stroke:#fff;}
.lead-success h2{
  font-family:var(--display,'Inter',sans-serif);font-weight:900;
  font-size:clamp(26px,3.6vw,32px);line-height:1.15;letter-spacing:-0.02em;margin-bottom:14px;
}
.lead-success p{color:var(--gray,#5E7486);font-size:16px;line-height:1.6;max-width:320px;margin:0 auto;}

/* ============================================================
   MOBILE (2026-09-05) — the modal had zero responsive handling: its
   fixed 84px left/right padding alone consumed most of a phone's width,
   leaving almost nothing for the fields. Additive only; nothing here
   changes anything above 680px, so desktop is untouched. Breakpoint
   matches the homepage responsive-pass system (980/680/480).
   ============================================================ */
@media (max-width:680px){
  .lead-modal-overlay{padding:16px;}
  .lead-modal{padding:32px 22px 28px;border-radius:20px;max-height:calc(100svh - 32px);}
  .lead-modal-close{top:14px;right:14px;}
}
@media (max-width:480px){
  .lead-modal-head h2{font-size:clamp(26px,7vw,34px);}
}