/* ============================================================
   REQUEST A WALKTHROUGH — the two-step form behind the CTA button.
   Section-scoped; every selector prefixed .lead-.

   Graphite panel on a Carbon scrim, which is the v3 answer to depth on a
   dark ground: raise the value rather than drop a shadow. Signal is the
   submit fill only — Carbon on Signal is 13.07:1 — and never text.

   Step one exists so the contact detail is banked before anyone is asked
   about their fleet. Someone who fills five fields and then thinks better
   of naming their TMS is still a person we can email, and that is the whole
   reason the flow has two steps rather than one long form.
   ============================================================ */
.lead[hidden]{display:none}
.lead{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;
  justify-content:center;padding:24px 16px;overflow-y:auto;
  -webkit-overflow-scrolling:touch}
.lead *,.lead *::before,.lead *::after{box-sizing:border-box}
/* the steps are <section> elements, and nivio-v3 gives every section 96px of
   vertical padding — inside a dialog that is a hundred and ninety pixels of
   nothing above the headline. Reset it here rather than renaming the tags,
   because the sectioning is what gives each step its own heading scope. */
.lead section{padding:0}

.lead-scrim{position:fixed;inset:0;background:rgba(23,25,24,.78);
  backdrop-filter:blur(2px);animation:lead-in 180ms ease-out both}
.lead-panel{position:relative;width:100%;max-width:640px;margin:auto;
  background:var(--nv-graphite,#222523);color:var(--nv-bone,#F2F0E9);
  border:1px solid rgba(242,240,233,.14);border-radius:var(--nv-radius,4px);
  padding:34px 34px 30px;animation:lead-rise 220ms cubic-bezier(.2,0,0,1) both}
@keyframes lead-in{from{opacity:0}to{opacity:1}}
@keyframes lead-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .lead-scrim,.lead-panel{animation:none}
}

.lead-x{position:absolute;top:14px;right:14px;width:34px;height:34px;
  background:transparent;border:0;color:var(--nv-steel,#9EA29F);cursor:pointer;
  font-size:22px;line-height:1;border-radius:var(--nv-radius-sm,3px)}
.lead-x:hover{color:var(--nv-bone,#F2F0E9);background:rgba(242,240,233,.06)}

.lead-hd{display:flex;align-items:center;gap:14px;margin-bottom:22px;
  padding-right:34px}
.lead-k{font-family:var(--nv-font-mono,"Geist Mono",monospace);font-weight:500;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--nv-signal,#D7E84A)}
.lead-prog{display:flex;gap:4px;flex:1;max-width:120px}
.lead-prog span{flex:1;height:3px;background:rgba(242,240,233,.16);border-radius:1px;
  transition:background 160ms ease-out}
.lead-prog span.on{background:var(--nv-signal,#D7E84A)}
.lead-stepno{font-family:var(--nv-font-mono,"Geist Mono",monospace);font-size:.6875rem;
  letter-spacing:.12em;color:var(--nv-fog,#C8C6BE);margin-left:auto;white-space:nowrap}

.lead-h{margin:0 0 8px;font-size:1.625rem;line-height:1.18;font-weight:600;
  letter-spacing:-.018em;color:var(--nv-bone,#F2F0E9)}
.lead-sub{margin:0 0 22px;font-size:.9375rem;line-height:1.6;
  color:var(--nv-fog,#C8C6BE);max-width:56ch}

.lead-grid{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:560px){ .lead-grid{grid-template-columns:1fr 1fr;column-gap:16px} }

.lead-f{margin-bottom:16px;min-width:0}
/* The choice controls sit inside a .lead-f too, and the three rules below are
   the local version of the mistake just fixed in nivio-v3.css: they style "the
   label" and "the input" of a text field, and a card-with-a-checkbox is neither.
   Excluded by name rather than fought with !important — which is the rule the
   brand spec now records. */
.lead-f label:not(.lead-opt){display:block;margin-bottom:7px;
  font-family:var(--nv-font-mono,"Geist Mono",monospace);font-weight:500;
  font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--nv-fog,#C8C6BE)}
.lead-f label b{color:var(--nv-signal,#D7E84A);font-weight:500}
.lead-f label i{font-style:normal;text-transform:none;letter-spacing:.04em;
  color:var(--nv-steel,#9EA29F)}

.lead-f input:not([type="checkbox"]):not([type="radio"]),.lead-f select,.lead-f textarea{
  width:100%;font-family:var(--nv-font,"Geist",sans-serif);font-size:.9375rem;
  color:var(--nv-bone,#F2F0E9);background:rgba(242,240,233,.045);
  border:1px solid rgba(242,240,233,.18);border-radius:var(--nv-radius-sm,3px);
  padding:0 12px;height:var(--nv-control-h,44px);
  transition:border-color 120ms cubic-bezier(.2,0,0,1),background 120ms cubic-bezier(.2,0,0,1)}
.lead-f textarea{height:auto;padding:11px 12px;line-height:1.55;resize:vertical}
.lead-f input:not([type="checkbox"]):not([type="radio"]):hover,.lead-f select:hover,.lead-f textarea:hover{border-color:rgba(242,240,233,.32)}
.lead-f input:not([type="checkbox"]):not([type="radio"]):focus-visible,.lead-f select:focus-visible,.lead-f textarea:focus-visible{
  outline:2px solid var(--nv-signal,#D7E84A);outline-offset:1px;
  border-color:rgba(242,240,233,.32)}
.lead-f input::placeholder,.lead-f textarea::placeholder{color:var(--nv-steel,#9EA29F)}
/* ---- the phone template ----------------------------------------------
   The field shows (xxx) xxx-xxxx from the first keystroke and the x's are
   consumed as digits arrive, so the shape is never something the typist has
   to infer from a placeholder that vanished. It is a ghost layer behind a
   transparent input rather than characters inside the value, which means
   nothing has to be stripped back out before the number is stored, and
   select-all-copy gives a clean number rather than a template full of x's.

   Both layers are set in the mono face at the same size, weight and
   tracking: that is what makes the two line up. A proportional face would
   drift a pixel per glyph and the ghost would stop meeting the digits. */
.lead-phone{position:relative}
.lead-phone input,.lead-ghost{
  font-family:var(--nv-font-mono,"Geist Mono",ui-monospace,monospace) !important;
  font-size:.9375rem;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.lead-phone input{position:relative;background:transparent;z-index:1}
.lead-ghost{position:absolute;left:0;top:0;height:var(--nv-control-h,44px);
  display:flex;align-items:center;padding:0 12px;
  color:var(--nv-steel,#9EA29F);pointer-events:none;white-space:pre;
  border:1px solid transparent}
/* the typed part is held in the flow so the remaining x's stay in register,
   but it is not painted — the input's own text is what the reader sees */
.lead-ghost i{visibility:hidden;font-style:normal}
/* the ghost sits above the field's own fill, so the fill moves to the wrapper */
.lead-phone::before{content:"";position:absolute;inset:0;border-radius:var(--nv-radius-sm,3px);
  background:rgba(242,240,233,.045)}

/* the native number spinner is a light-mode widget wherever it renders and
   there is nothing to do with it but take it off */
.lead-f input[type="number"]{-moz-appearance:textfield;appearance:textfield}
.lead-f input[type="number"]::-webkit-outer-spin-button,
.lead-f input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* a long question is a question, not a data label: it reads in the body face
   at sentence case rather than as two lines of tracked-out mono caps */
.lead-f.q label{font-family:var(--nv-font,"Geist",sans-serif);text-transform:none;
  font-size:.875rem;letter-spacing:0;font-weight:500;color:var(--nv-bone,#F2F0E9);
  line-height:1.45;max-width:52ch}
.lead-f.q label i{color:var(--nv-steel,#9EA29F);font-size:.8125rem;margin-left:4px}

/* the select keeps its own chevron; the native one is inconsistent across
   platforms and none of them match a Graphite panel */
.lead-sel{position:relative}
.lead-sel::after{content:"";position:absolute;right:15px;top:50%;width:9px;height:9px;
  margin-top:-7px;border-right:1.6px solid var(--nv-fog,#C8C6BE);
  border-bottom:1.6px solid var(--nv-fog,#C8C6BE);transform:rotate(45deg);
  pointer-events:none}
.lead-sel select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer}
.lead-sel select option{background:var(--nv-graphite,#222523);color:var(--nv-bone,#F2F0E9)}

/* invalid state. #FF7A5C is 5.86:1 on Graphite — the error is readable, and
   it is never the only signal: the field keeps aria-invalid and a red rule. */
.lead-f.bad input,.lead-f.bad select,.lead-f.bad textarea{border-color:#FF7A5C}
.lead-e{margin:6px 0 0;font-size:.8125rem;line-height:1.45;color:#FF7A5C}
.lead-e[hidden]{display:none}

.lead-act{display:flex;align-items:center;gap:16px;margin-top:26px;
  padding-top:22px;border-top:1px solid rgba(242,240,233,.10)}
.lead-act2{justify-content:space-between}

.lead-go{appearance:none;cursor:pointer;border:0;border-radius:var(--nv-radius-sm,3px);
  background:var(--nv-signal,#D7E84A);color:var(--nv-carbon,#171918);
  font-family:var(--nv-font-mono,"Geist Mono",monospace);font-weight:500;
  font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;
  height:var(--nv-control-h,44px);padding:0 22px;
  transition:background 120ms cubic-bezier(.2,0,0,1)}
.lead-go:hover{background:var(--nv-signal-hov,#C3D53C)}
.lead-go[disabled]{opacity:.55;cursor:default}
.lead-go .arr{margin-left:8px}
.lead-back{appearance:none;cursor:pointer;background:transparent;
  border:1px solid rgba(242,240,233,.22);border-radius:var(--nv-radius-sm,3px);
  color:var(--nv-fog,#C8C6BE);font-family:var(--nv-font-mono,"Geist Mono",monospace);
  font-weight:500;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;
  height:var(--nv-control-h,44px);padding:0 18px}
.lead-back:hover{border-color:rgba(242,240,233,.4);color:var(--nv-bone,#F2F0E9)}
.lead-back .arr{margin-right:8px}

.lead-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

/* honeypot: off-screen rather than display:none, since some bots skip fields
   a naive check would treat as "not rendered". Never in the tab order, never
   announced. */
.lead-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;
  overflow:hidden;opacity:0;pointer-events:none}

/* the Turnstile widget renders invisibly (size:"invisible"); this just keeps
   its challenge iframe, when Cloudflare shows one, from disturbing layout */
.lead-turnstile{min-height:0}

@media(max-width:560px){
  .lead{padding:12px 10px}
  .lead-panel{padding:26px 20px 22px}
  .lead-h{font-size:1.375rem}
  .lead-act{flex-wrap:wrap}
  .lead-go,.lead-back{flex:1 1 auto}
}

/* ---- what they came for ------------------------------------------------
   Three options, asked on step two. Cards rather than bare radios: the
   choice decides what we send back, so it deserves the room to say what
   each one actually is. Selection reads through border + ground, never
   colour alone.

   THREE ACROSS from 760px. Stacked full-width they cost 443px of a 1129px
   step, which pushed the whole panel past the bottom of a laptop screen and
   made a two-minute form feel like a page. Side by side the same three
   answers cost about a hundred.

   Multi-select since 2026-09-18 — these are checkboxes, not radios. Someone
   who wants a walkthrough AND the trial should not have to choose, and which
   combination they pick is worth knowing.

   These used to carry a stack of !important overrides, because nivio-v3.css
   styled every input as a text field and a checkbox is not one. That was fixed
   in the brand stylesheet instead, so the control is inherited now and this
   file only says where it sits. See the CHANGELOG entry in nivio-brand. */
.lead-opts{display:grid;gap:8px;margin-bottom:4px}
/* Three across ONLY where the panel is wide enough for it (see the width
   bump below). At 640px each column is 185px, the descriptions wrap five
   deep, and stacked is genuinely better — so the grid and the width change
   together or not at all. */
@media(min-width:960px){ .lead-opts{grid-template-columns:repeat(3,1fr)} }
.lead-opt{display:flex;align-items:flex-start;gap:9px;cursor:pointer;
  padding:11px 12px;background:rgba(242,240,233,.045);
  border:1px solid rgba(242,240,233,.18);border-radius:var(--nv-radius-sm,3px)}
.lead-opt:hover{border-color:rgba(242,240,233,.32)}
/* The control itself — size, shape, Signal when checked, focus ring — comes
   from nivio-v3.css, which learned to draw a checkbox on 2026-09-18. All this
   component says is where it sits: optically on the first line of the title. */
.lead-opt input{margin-top:2px}
.lead-opt:has(input:checked){border-color:var(--nv-signal,#D7E84A);
  background:rgba(215,232,74,.07)}
.lead-opt-b{display:block;min-width:0}
.lead-opt-t{display:block;font-size:.875rem;line-height:1.3;font-weight:600;
  color:var(--nv-bone,#F2F0E9)}
.lead-opt-d{display:block;margin-top:3px;font-size:.75rem;line-height:1.45;
  color:var(--nv-fog,#C8C6BE)}
.lead-f.bad .lead-opt{border-color:var(--nv-coral,#FF7A5C)}

/* The second half of step two, once the choice is made. */
.lead-h3{margin:26px 0 8px;font-size:1.125rem;line-height:1.25;font-weight:600;
  letter-spacing:-.012em;color:var(--nv-bone,#F2F0E9)}

@media(max-width:560px){
  .lead-opt{padding:12px}
  .lead-opt-d{font-size:.78125rem}
}


/* ---- step two has to fit on a laptop --------------------------------
   The goal is a form nobody scrolls. Measured at 1280x720 the panel was
   1234px against a 720px viewport, so the page scrolled behind the modal —
   the worst version of this, because the scrollbar belongs to the page and
   the thing you are reading is the overlay.

   The three-across grid above does most of it. These trim the rest, and the
   max-height on the panel is the backstop: on a genuinely short window the
   PANEL scrolls, never the page behind it. */
.lead-panel{max-height:calc(100vh - 28px);overflow-y:auto}
/* The panel is 640px by default, which is right for a one-column form. Step
   two is not one column any more, so it widens where there is room. */
@media(min-width:960px){ .lead-panel{max-width:860px} }

/* TMS and ELD, side by side where the panel is wide. Each cell holds its own
   select AND the "Which one?" field that appears when the answer is Other, so
   the reveal stays under the question it belongs to. */
.lead-stack{display:grid;gap:0}
@media(min-width:760px){ .lead-stack{grid-template-columns:1fr 1fr;gap:0 18px} }

@media(min-width:760px){
  .lead-panel{padding:26px 34px 24px}
  /* 44px is a touch target. A pointer does not need one, and six fields at
     44 are what make the panel tall. */
  .lead-f input:not([type="radio"]):not([type="checkbox"]),.lead-f select{min-height:40px}
  .lead-h3{margin:14px 0 6px}
  .lead-h3 + .lead-sub{margin-bottom:10px}
  /* The textarea is sized by its rows attribute, which min-height does not
     override. Height does, and rows stays for the no-CSS case. */
  #ld-pain{min-height:0;height:58px}
  .lead-h3{margin:12px 0 4px}
  .lead-h3 + .lead-sub{margin-bottom:8px}
  [data-lead="s2"] .lead-sub{margin-bottom:10px}
  .lead-act2{margin-top:14px}
}

/* A 13-inch laptop is 1280x720 of usable height, and step two lands ~40px
   over it. Rather than shrink the form for everyone with a tall screen, the
   last few pixels come off only where the window is actually short. */
@media(min-width:760px) and (max-height:780px){
  /* 14px of breathing room either side rather than 28 — on a short window the
     form fitting matters more than the gap above it. */
  .lead-panel{padding:20px 30px 18px;max-height:calc(100vh - 14px)}
  .lead-hd{margin-bottom:12px}
  [data-lead="s2"] .lead-h{margin-bottom:2px}
  .lead-opts{gap:6px}
  .lead-opt{padding:8px 10px}
  .lead-opt-d{margin-top:2px;line-height:1.4}
  .lead-h3{margin:10px 0 2px}
  #ld-pain{height:50px}
  .lead-act2{margin-top:10px}
}


/* ---- inline mode ------------------------------------------------------
   The /dispatch campaign page puts this form in the page, above the fold,
   rather than behind a button at the bottom (campaign #67 sent 6 of 9
   clickers to the homepage, and none of them found the form). Same panel,
   no dialog: static, no scrim, no close button, and one column throughout
   because it sits in a side column rather than a wide modal. */
.lead.lead-inline{position:static;inset:auto;z-index:auto;display:block;padding:0;overflow:visible}
.lead-inline .lead-scrim,.lead-inline .lead-x{display:none}
.lead-inline .lead-panel{max-width:none;margin:0;max-height:none;overflow:visible;animation:none}
.lead-inline .lead-hd{padding-right:0}
/* Two fields a row wherever the column is wide enough; one where it is not
   (the side column between 961 and 1099px). Option cards always stack. */
.lead-inline .lead-opts{grid-template-columns:1fr}
@media(min-width:961px) and (max-width:1099px){
  .lead-inline .lead-grid,.lead-inline .lead-stack{grid-template-columns:1fr}
}
@media(min-width:760px){ .lead-inline .lead-panel{padding:26px 28px 24px} }