/* ═══════════════════════════════════════════════════════════════════════
   Quote-Quick Modal styles — loaded sitewide via layouts/app.blade.php

   Single-column scrollable layout (2026-05-24 rewrite).
   Previous 2-column "intro + stage" layout clipped the Continue button
   on any viewport shorter than ~880px (.qqm-card had max-height:92vh
   with overflow:hidden and no scrollable child).

   New structure:
     .qqm-card                 — flex column, overflow:hidden, capped height
       .qqm-head (sticky)      — title + close
       .qqm-body (scrolls)     — sections; flex:1 + overflow-y:auto + min-height:0
       .qqm-foot (sticky)      — Continue + phone fallback
   ═══════════════════════════════════════════════════════════════════════ */

.qqm {
  padding: 0;
  border: 0;
  background: transparent;
  /* 880px is enough for a 2-col body (map left / headcount right) so
     content fits at 13" laptop heights (1366×768, 1280×800) without
     forcing a scrollbar inside the modal. */
  width: min(600px, 94vw);
  max-width: 600px;
  max-height: 92vh;
  overflow: visible;
  color: var(--text, #0D1829);
}
/* iOS Chrome / WebKit fallback: when modal.showModal() throws (rare on
   iOS 15.4+ but possible inside certain stacking contexts), JS falls
   back to setAttribute('open',''). UA-default <dialog> positioning is
   absolute, so force explicit fixed centering for both code paths. */
.qqm[open] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 9999;
}
@media (max-width: 640px) {
  .qqm { width: 100vw; max-width: 100vw; max-height: 100vh; }
  .qqm[open] {
    top: 0;
    left: 0;
    transform: none;
  }
}
.qqm::backdrop {
  background: rgba(7, 25, 46, .68);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body.qqm-open { overflow: hidden; }

/* ── Card: flex column with sticky head + scrollable body + sticky foot ─ */
.qqm-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 0 0 1px rgba(13,24,41,.08),
    0 20px 50px -18px rgba(7,25,46,.20),
    0 40px 120px -20px rgba(7,25,46,.38);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

/* ── Header (sticky) ──────────────────────────────────────────────────── */
.qqm-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(13,24,41,.06);
  background: #fff;
}
.qqm-head-text { min-width: 0; }
.qqm-title {
  font: 700 18px/1.3 'Poppins', system-ui, sans-serif;
  color: var(--navy, #07192E);
  letter-spacing: -.018em;
  margin: 0;
}
.qqm-sub {
  font: 500 12.5px/1.4 'Inter', system-ui, sans-serif;
  color: var(--muted, #5B6B7E);
  margin: 3px 0 0;
}
.qqm-sub[hidden] { display: none; }
.qqm-close {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  /* Defeat sitewide button{min-width/height:var(--touch-min)} accessibility
     rule — close X doesn't need a 48px target. */
  min-width: 0; min-height: 0;
  padding: 0;
  background: #fff;
  border: 1px solid rgba(13,24,41,.12);
  border-radius: 50%;
  /* Flex centering (not grid): a single-item grid with place-items:center
     sizes its auto track to the icon's content, which the responsive
     `svg{max-width:100%}` reset collapses to ~6px. Flex centers a definite-
     size child reliably in the full 40/44px box. */
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--navy, #07192E);
  box-shadow: 0 1px 2px rgba(7,25,46,.06), 0 4px 12px -6px rgba(7,25,46,.16);
  /* Twist-on-hover: spring easing overshoots 90° so the X visibly spins
     (passing through a +) before settling, then fills navy + flips white.
     Two distinct signals — motion AND color — so it never reads as "standard". */
  transition:
    background .25s cubic-bezier(.34,1.56,.64,1),
    border-color .2s ease,
    color .2s ease,
    box-shadow .25s ease,
    transform .4s cubic-bezier(.34,1.56,.64,1);
}
.qqm-close:hover {
  background: var(--navy, #07192E);
  border-color: var(--navy, #07192E);
  color: #fff;
  transform: rotate(90deg) scale(1.07);
  box-shadow: 0 2px 6px rgba(7,25,46,.18), 0 12px 28px -8px rgba(7,25,46,.42);
}
.qqm-close:active { transform: rotate(90deg) scale(.97); }
.qqm-close:focus-visible { outline: 2px solid var(--orange, #F97316); outline-offset: 2px; }
/* !important is required: the sitewide responsive-media reset forces
   `svg { max-width: 100% !important }`, which (combined with the centering
   parent) collapsed this icon to ~6px on mobile. Scoped tightly to the
   close glyph only. */
.qqm-close svg { width: 17px !important; height: 17px !important; max-width: none !important; flex: 0 0 auto; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ── Body — 2-col grid on desktop, single-col stack on mobile ─────────
   Left col: states (search + map + select-all/clear).
   Right col: headcount (input + slider + ticks).
   This shape keeps the modal short enough to fit a 13" laptop (768/800
   viewport) without a scrollbar. overflow-y:auto remains as a safety
   net for ultra-short viewports; min-height:0 is what makes overflow-y
   actually engage on a flex child. */
.qqm-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 18px 10px;
  display: grid;
  grid-template-columns: 1fr;   /* single column — step 1 is a quick 2-field form, no longer sized to match the HubSpot calendar (separate modal) */
  gap: 18px;
  align-items: start;
}

/* ── Section (state-picker + headcount blocks) ──────────────────────── */
.qqm-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0; /* required inside a grid track to allow shrinking */
}
.qqm-section-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.qqm-section-h {
  font: 600 14.5px/1.3 'Poppins', system-ui, sans-serif;
  color: var(--navy, #07192E);
  letter-spacing: -.012em;
  margin: 0;
}
.qqm-section-meta {
  font: 500 12.5px/1.3 'Inter', system-ui, sans-serif;
  color: var(--muted, #5B6B7E);
  font-variant-numeric: tabular-nums;
}
.qqm-section-meta strong {
  font: 700 14px/1 'Poppins', system-ui, sans-serif;
  color: var(--navy, #07192E);
  margin-right: 1px;
}

/* ── Geographic US map (real state shapes via SVG paths) ──────────── */
.qqm-map {
  position: relative;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid rgba(13,24,41,.10);
  border-radius: 13px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(13,24,41,.05);
}
.qqm-map-frame {
  position: relative;
  touch-action: none; /* pinch-zoom handled in JS */
}
.qqm-map-frame.is-zoomed { cursor: grab; }
.qqm-map-frame.is-panning { cursor: grabbing; }
.qqm-map-svg {
  display: block;
  width: 100%;
  height: auto;
  /* Bigger map so states (incl. small NE ones) are easy to click. */
  max-height: 280px;
}
.qqm-map-svg, .qqm-map-svg * { user-select: none; }

/* Visible filled states with white separators — a clean, premium choropleth
   that's obvious to read and easy to click (was near-invisible white-on-white
   2026-06-02). */
.qqm-st {
  fill: #DDE6F0;
  stroke: #FFFFFF;
  stroke-width: 1.4;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill .14s ease, stroke .14s ease, filter .14s ease;
  outline: none;
}
.qqm-map-frame.is-panning .qqm-st { cursor: grabbing; }
.qqm-st:hover {
  fill: #8FBCDD;
  stroke: #FFFFFF;
  stroke-width: 1.4;
  filter: drop-shadow(0 1px 3px rgba(13,24,41,.22));
}
.qqm-st:focus-visible {
  stroke: var(--orange, #F97316);
  stroke-width: 2;
  filter: drop-shadow(0 0 4px rgba(249,115,22,.5));
}
/* Selected = VSHR canonical 5-stop brand gradient (defined in SVG <defs>) */
.qqm-st.is-selected {
  fill: url(#qqmGrad);
  stroke: #FFFFFF;
  stroke-width: 1.4;
  filter: drop-shadow(0 1px 3px rgba(7,25,46,.24));
}
.qqm-st.is-selected:hover {
  filter: drop-shadow(0 2px 7px rgba(232,18,92,.34));
  stroke-width: 1.6;
}

/* ── Zoom controls — hidden by default (2026-05-24 simplification).
   The map is small enough at the new modal width (640px max) that zoom
   isn't useful; wheel/pinch still work for power users via JS. Bringing
   the buttons back is a single-line `display: flex` swap. ─────────── */
.qqm-map-zoom {
  display: none;
  position: absolute;
  bottom: 8px; right: 8px;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}
.qqm-zoom-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(13,24,41,.10);
  border-radius: 6px;
  color: var(--navy, #07192E);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(7,25,46,.08);
  transition: background .14s, transform .14s, box-shadow .14s;
}
.qqm-zoom-btn:hover {
  background: #fff;
  transform: scale(1.06);
  box-shadow: 0 2px 8px rgba(7,25,46,.16);
}
.qqm-zoom-btn:active { transform: scale(.96); }
.qqm-zoom-btn:focus-visible {
  outline: 2px solid var(--orange, #F97316);
  outline-offset: 2px;
}
.qqm-zoom-btn svg {
  width: 14px; height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.qqm-map-fallback {
  padding: 24px 16px;
  text-align: center;
  font: 500 13px/1.5 'Inter', system-ui, sans-serif;
  color: var(--muted, #5B6B7E);
}
.qqm-map-foot {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 6px;
}
.qqm-map-action {
  background: transparent;
  border: 1px solid rgba(13,24,41,.10);
  border-radius: 6px;
  padding: 5px 10px;
  font: 600 11px/1 'Inter', system-ui, sans-serif;
  color: var(--muted, #5B6B7E);
  cursor: pointer;
  transition: color .14s, border-color .14s, background .14s;
}
.qqm-map-action:hover {
  color: var(--navy, #07192E);
  border-color: var(--blue-deep, #0D5B7F);
  background: rgba(20,121,163,.06);
}
.qqm-map-action:focus-visible {
  outline: 2px solid var(--orange, #F97316);
  outline-offset: 2px;
}

/* ── Headcount slider ───────────────────────────────────────────────── */
.qqm-count { padding-top: 4px; }
.qqm-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--blue-deep, #0D5B7F) 0%, var(--orange, #F97316) 100%);
  border-radius: 999px;
  outline: 0;
  margin: 6px 0 4px;
}
/* VSHR icon as slider thumb. Fixed 2026-05-14 — earlier 28x36 thumb with
   24x24 background-size mangled the V because the source PNG is 167x268
   (aspect ratio 0.623, taller than wide). Forcing it into a square cropped
   most of the V away. Now: 26x36 thumb (aspect 0.722, close to V's natural
   shape) with `background: center / contain` so the V renders at its true
   proportions, filling the full thumb height. The V's tip sits naturally
   at the bottom of the thumb (it's already at the bottom of the V shape). */
.qqm-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 36px;
  border: 0;
  /* v2 (2026-05-20): swapped img-vshr-icon.png → logos/vshr-icon.svg.
     SVG is universally supported (every browser since IE9), crisper at all
     sizes, smaller payload, and doesn't 404 on certain CDN/proxy setups
     where the PNG was reported missing. Same 82.89×133.53 viewBox = same
     0.621 aspect ratio so `background-size: contain` renders identically. */
  background: transparent url('logos/vshr-icon.svg') center / contain no-repeat;
  -webkit-filter: drop-shadow(0 2px 4px rgba(13,24,41,.32));
  filter: drop-shadow(0 2px 4px rgba(13,24,41,.32));
  cursor: pointer;
  animation: qqm-v-glow 3.2s cubic-bezier(.4,0,.6,1) infinite;
  transition: -webkit-filter .15s cubic-bezier(.22,1,.36,1),
              filter .15s cubic-bezier(.22,1,.36,1),
              transform .15s cubic-bezier(.22,1,.36,1);
}
.qqm-slider::-moz-range-thumb {
  width: 26px; height: 36px;
  border: 0;
  background: transparent url('logos/vshr-icon.svg') center / contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(13,24,41,.32));
  cursor: pointer;
  animation: qqm-v-glow 3.2s cubic-bezier(.4,0,.6,1) infinite;
}

/* Brand-gold glow pulse on the drop-shadow chain — VSHR canonical gold
   (#F7D44C). Slow, subtle, breath-paced. No moving background, no swept
   highlight — the V's own colors do the visual work. */
@keyframes qqm-v-glow {
  0%, 100% {
    -webkit-filter: drop-shadow(0 2px 6px rgba(13,24,41,.28));
    filter: drop-shadow(0 2px 6px rgba(13,24,41,.28));
  }
  50% {
    -webkit-filter: drop-shadow(0 2px 6px rgba(13,24,41,.28))
                    drop-shadow(0 0 6px rgba(247,212,76,.55));
    filter: drop-shadow(0 2px 6px rgba(13,24,41,.28))
            drop-shadow(0 0 6px rgba(247,212,76,.55));
  }
}

.qqm-slider:hover::-webkit-slider-thumb {
  -webkit-filter: drop-shadow(0 4px 10px rgba(232,93,4,.40));
  filter: drop-shadow(0 4px 10px rgba(232,93,4,.40));
  transform: scale(1.10);
  animation-play-state: paused;
}
.qqm-slider:active::-webkit-slider-thumb {
  transform: scale(1.06);
  animation-play-state: paused;
}
.qqm-slider:focus-visible::-webkit-slider-thumb {
  -webkit-filter: drop-shadow(0 0 0 4px rgba(249,115,22,.35)) drop-shadow(0 2px 6px rgba(13,24,41,.28));
  filter: drop-shadow(0 0 0 4px rgba(249,115,22,.35)) drop-shadow(0 2px 6px rgba(13,24,41,.28));
}
.qqm-slider:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .qqm-slider::-webkit-slider-thumb,
  .qqm-slider::-moz-range-thumb {
    animation: none !important;
  }
}
/* Tick labels positioned via calc() to match the thumb's actual center.
   Thumb is 26px wide. Native range slider centers the thumb on the track
   value, with `thumb_center_x = thumb_w/2 + (V/100) * (track_w - thumb_w)`.
   Without compensation, flex space-between puts labels at 0%/25%/50%/75%/
   100% of the OUTER track width, which is ~16px off at the endpoints. */
.qqm-slider-ticks {
  position: relative;
  height: 14px;
  margin-top: 6px;
  font: 500 10.5px/1 'Inter', system-ui, sans-serif;
  color: var(--muted, #5B6B7E);
  letter-spacing: -.005em;
}
.qqm-slider-ticks > span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  /* --pct (0..100) set inline on each span. Match the thumb-center formula:
     center_x = thumb_w/2 + (pct/100) * (track_w - thumb_w)
              = 13px + (pct/100) * (100% - 26px)                          */
  left: calc(13px + (var(--pct) / 100) * (100% - 26px));
}

/* ── Footer (sticky, sits at the bottom of .qqm-card) ──────────────── */
.qqm-foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid rgba(13,24,41,.06);
  background: #fff;
}
.qqm-continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 22px;
  background: linear-gradient(135deg, var(--orange, #F97316) 0%, #EA580C 100%);
  color: #fff;
  font: 700 15px/1 'Inter', system-ui, sans-serif;
  letter-spacing: -.005em;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 4px 14px rgba(249,115,22,.30),
    0 10px 28px -8px rgba(249,115,22,.36);
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s;
  position: relative;
  overflow: hidden;
}
.qqm-continue::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.30) 50%, transparent 100%);
  transform: translateX(-120%);
  transition: transform .9s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.qqm-continue:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 8px 22px rgba(249,115,22,.38),
    0 16px 40px -10px rgba(249,115,22,.42);
}
.qqm-continue:hover::before { transform: translateX(120%); }
.qqm-continue:focus-visible { outline: 2px solid var(--navy, #07192E); outline-offset: 3px; }
.qqm-continue svg {
  width: 17px; height: 17px;
  stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.qqm-foot-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: 600 12.5px/1 'Inter', system-ui, sans-serif;
  color: var(--muted, #5B6B7E);
  text-decoration: none;
  transition: color .15s;
}
.qqm-foot-phone:hover { color: var(--orange, #F97316); }
.qqm-foot-phone svg {
  width: 12px; height: 12px;
  stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Tablet / narrow desktop (<860px): stack to single column ─────────
   Below this width, 2-col would crush the map into ~340px wide which
   makes small states (RI, DE, MD) hard to click. Stacking lets each
   section take the full width. The internal scrollbar takes over for
   any overflow on shorter viewports — better than cramped clicking. */
@media (max-width: 860px) {
  .qqm-body {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .qqm-map-svg { max-height: 300px; }
}

/* ── Mobile (≤640px): full-screen sheet ───────────────────────────── */
@media (max-width: 640px) {
  .qqm-card {
    border-radius: 0;
    max-height: 100vh;
    height: 100vh;
  }
  .qqm-head { padding: 14px 16px 12px; }
  .qqm-title { font-size: 16px; }
  /* The X read "microscopic" on the full-screen mobile sheet at 40/17.
     Bump to a comfortable thumb-friendly target with a larger glyph —
     matches the demo modal's mobile close sizing so the funnel feels
     consistent step-to-step. */
  .qqm-close { width: 44px; height: 44px; }
  .qqm-close svg { width: 20px !important; height: 20px !important; stroke-width: 2.3; }
  .qqm-body { padding: 14px 16px 6px; gap: 18px; }
  .qqm-section-h { font-size: 14px; }
  .qqm-map { padding: 10px 10px; border-radius: 12px; }
  .qqm-map-svg { max-height: 260px; }
  .qqm-foot { padding: 10px 16px 14px; }
  .qqm-continue { padding: 13px 18px; font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .qqm-st,
  .qqm-continue,
  .qqm-continue::before,
  .qqm-close { transition: none !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   State lookup (search autocomplete) — sits above the map for users who'd
   rather type a state name than hunt for it on the map.

   IMPORTANT: z-index: 30 lifts the entire lookup ABOVE the map's own
   stacking context (`.qqm-map` is position:relative, paints later in
   DOM order). Without this, the dropdown rendered "behind" the map even
   though the dropdown itself had z-index: 4 — z-index on a positioned
   child only sorts within its parent's stacking context.
   ═══════════════════════════════════════════════════════════════════════ */
.qqm-lookup {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.82) 100%);
  border: 1.5px solid rgba(13,24,41,.10);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  backdrop-filter: blur(28px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(13,24,41,.06),
    0 2px 6px rgba(7,25,46,.06);
  transition: border-color .15s, box-shadow .15s;
}
.qqm-lookup:focus-within {
  border-color: var(--orange, #F97316);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(13,24,41,.06),
    0 0 0 4px rgba(249,115,22,.18);
}
.qqm-lookup-ico {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--blue-deep, #0D5B7F);
  stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.qqm-lookup-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font: 500 15px/1.4 'Inter', system-ui, sans-serif;
  color: var(--navy, #07192E);
  letter-spacing: -.005em;
  padding: 4px 0;
  min-width: 0;
}
.qqm-lookup-input::placeholder {
  color: rgba(91,107,126,.75);
  font-weight: 500;
}
.qqm-lookup-clear {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: rgba(13,24,41,.06);
  border: 0;
  border-radius: 50%;
  color: var(--muted, #5B6B7E);
  cursor: pointer;
  transition: background .14s, color .14s;
}
.qqm-lookup-clear:hover { background: rgba(13,24,41,.12); color: var(--navy, #07192E); }
.qqm-lookup-clear:focus-visible { outline: 2px solid var(--orange, #F97316); outline-offset: 2px; }
.qqm-lookup-clear svg {
  width: 11px; height: 11px;
  stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}

.qqm-lookup-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  /* z-index here is relative to .qqm-lookup which is z-index: 30 — together
     they put the dropdown well above the map's stacking context. */
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 8px;
  background: #fff;
  border: 1.5px solid rgba(13,24,41,.10);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(13,24,41,.04),
    0 24px 60px -10px rgba(7,25,46,.30),
    0 8px 20px -4px rgba(7,25,46,.14);
  max-height: 320px;
  overflow-y: auto;
  /* Slide-in animation so it's obvious the dropdown opened */
  animation: qqm-lookup-in 180ms cubic-bezier(.22,1,.36,1);
  transform-origin: top center;
}
@keyframes qqm-lookup-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.qqm-lookup-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  cursor: pointer;
  font: 500 14px/1.3 'Inter', system-ui, sans-serif;
  color: var(--navy, #07192E);
  transition: background .12s;
}
.qqm-lookup-item:hover,
.qqm-lookup-item:focus {
  background: rgba(20,121,163,.08);
  outline: none;
}
.qqm-lookup-item.is-selected {
  background: linear-gradient(135deg, rgba(247,212,76,.12) 0%, rgba(240,113,40,.10) 50%, rgba(123,33,162,.08) 100%);
}
.qqm-lookup-item.is-selected:hover {
  background: linear-gradient(135deg, rgba(247,212,76,.20) 0%, rgba(240,113,40,.16) 50%, rgba(123,33,162,.14) 100%);
}
.qqm-lookup-flag {
  width: 28px; height: 22px;
  display: grid; place-items: center;
  border-radius: 5px;
  background: rgba(20,121,163,.10);
  color: var(--blue-deep, #0D5B7F);
  font: 700 10.5px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.qqm-lookup-item.is-selected .qqm-lookup-flag {
  background: linear-gradient(135deg, #F7D44C 0%, #F07128 50%, #7B21A2 100%);
  color: #fff;
}
.qqm-lookup-flag svg { width: 11px; height: 11px; }
.qqm-lookup-code { display: block; }
.qqm-lookup-name { flex: 1; }
.qqm-lookup-empty {
  padding: 12px 10px;
  font: 500 13px/1.4 'Inter', system-ui, sans-serif;
  color: var(--muted, #5B6B7E);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════
   Type-able headcount input — full-width row above the slider
   (2026-05-24: simplified — icon + "Type:" prefix removed; the section
   header makes the purpose obvious and the visible border + cursor are
   enough to signal it's an input.)
   ═══════════════════════════════════════════════════════════════════════ */
.qqm-headcount-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid rgba(13,24,41,.14);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  transition: border-color .15s, box-shadow .15s;
  cursor: text;
}
.qqm-headcount-input-wrap:hover {
  border-color: var(--blue-deep, #0D5B7F);
}
.qqm-headcount-input-wrap:focus-within {
  border-color: var(--orange, #F97316);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 0 0 3px rgba(249,115,22,.18);
}
.qqm-headcount-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  font: 700 20px/1 'Poppins', system-ui, sans-serif;
  color: var(--navy, #07192E);
  text-align: left;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  cursor: text;
  /* Hide native spinner (Chrome/Edge/Firefox) — slider IS the spinner */
  -moz-appearance: textfield;
  appearance: textfield;
}
.qqm-headcount-input::-webkit-outer-spin-button,
.qqm-headcount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.qqm-headcount-input::placeholder {
  color: rgba(13,24,41,.25);
  font-weight: 600;
}
.qqm-headcount-input-unit {
  font: 500 13px/1 'Inter', system-ui, sans-serif;
  color: var(--muted, #5B6B7E);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Cross-browser slider track styling — fixes Firefox/legacy thumb rendering
   ═══════════════════════════════════════════════════════════════════════ */
/* Firefox track (without this, Firefox can render its native gray track
   on top of our gradient on some versions) */
.qqm-slider::-moz-range-track {
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--blue-deep, #0D5B7F) 0%, var(--orange, #F97316) 100%);
  border-radius: 999px;
  border: 0;
}
.qqm-slider::-ms-track {
  width: 100%;
  height: 6px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.qqm-slider::-ms-fill-lower,
.qqm-slider::-ms-fill-upper {
  background: linear-gradient(90deg, var(--blue-deep, #0D5B7F) 0%, var(--orange, #F97316) 100%);
  border-radius: 999px;
}
/* Firefox fallback: -moz-appearance for older versions that don't honor
   the unprefixed `appearance: none` on input[type=range]. */
@-moz-document url-prefix() {
  .qqm-slider {
    -moz-appearance: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Demo-modal intro panel polish (2026-05-14)

   This modal is STEP 02 in the funnel — fires after the quote-quick
   qualifier (step 01) hands off identity + states + headcount. The intro
   panel needed three fixes:
     1. "01" -> "02" (handled in demo-modal.js content)
     2. Humanized copy (handled in demo-modal.js content)
     3. Better design language to match the qqm modal — same eyebrow pill,
        brand-gold step numeral, brand-green checkmarks, tighter spacing
   ═══════════════════════════════════════════════════════════════════════════ */

/* Brand-gold step numeral with subtle gradient — replaces the flat
   light-gray "01" watermark for a more polished feel. */
.demo-modal-num {
  background: linear-gradient(135deg, #F7D44C 0%, #F07128 35%, #E8125C 70%, #7B21A2 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  opacity: .14 !important;
  font-weight: 800 !important;
  letter-spacing: -.06em !important;
}

/* Eyebrow pill — matches the qqm modal eyebrow exactly so the two modals
   read as a paired system. */
.demo-modal-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  background: transparent !important;
  color: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: inherit !important;
  font-weight: normal !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
}
.demo-modal-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(20,121,163,.10);
  color: var(--blue-deep, #0D5B7F);
  font: 700 10.5px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 999px;
}
.demo-modal-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange-bright, #F97316);
  box-shadow: 0 0 0 3px rgba(249,115,22,.18);
}

/* Brand-green checkmarks instead of the default dark. Reads as "verified"
   instead of "checkbox". */
.demo-modal-trust-item svg {
  stroke: var(--green-bright, #22C55E) !important;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
/* Small ring around each check for a polished "stamp" feel */
.demo-modal-trust-item {
  align-items: center !important;
  gap: 12px !important;
  padding: 6px 0 !important;
}
.demo-modal-trust-item svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
  padding: 3px;
  background: rgba(34,197,94,.10);
  border-radius: 50%;
  box-sizing: border-box;
}
.demo-modal-trust-item span {
  font: 500 13.5px/1.4 'Inter', system-ui, sans-serif !important;
  color: var(--text, #0D1829) !important;
  letter-spacing: -.002em !important;
}

/* Tighten title + lede typography to feel more conversational */
.demo-modal-title {
  font: 800 26px/1.18 'Poppins', system-ui, sans-serif !important;
  letter-spacing: -.022em !important;
  margin-bottom: 14px !important;
}
.demo-modal-lede {
  font: 400 14.5px/1.55 'Inter', system-ui, sans-serif !important;
  color: var(--muted, #5B6B7E) !important;
  letter-spacing: -.002em !important;
  margin-bottom: 22px !important;
}

@media (max-width: 760px) {
  .demo-modal-title { font-size: 22px !important; }
  .demo-modal-lede { font-size: 13.5px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Workflow hardening (2026-06-02) — defeat the sitewide
   button{min-width/height:var(--touch-min)} inflation for ALL modal
   controls. The state-search clear button was ballooning to a ~44px gray
   circle; map "Select all / Clear" and zoom buttons risked the same. Each
   control is sized intentionally below, so the global floor must be reset.
   ═══════════════════════════════════════════════════════════════════════ */
.qqm button { min-width: 0; min-height: 0; }
/* Reliable centering + icon size for the search clear (same WebKit/responsive
   svg-collapse fix the close-X uses). */
.qqm-lookup-clear {
  display: flex;
  align-items: center;
  justify-content: center;
}
.qqm-lookup-clear svg {
  width: 11px !important;
  height: 11px !important;
  max-width: none !important;
  flex: 0 0 auto;
}