/* hero-quote.css — hero product buttons + the quote-capture modal.
   The hero carousel itself is untouched; this only restyles the CTA row and
   adds the modal. The modal's card is the same white quote form used in the
   inline design — only the scrim and the pop-in are modal chrome.
   Spec: docs/superpowers/specs/2026-08-06-hero-tabbed-quote-form-design.md */

/* ── Product buttons (replacing the two hero CTAs) ────────────────────── */

/* The CTA row used to hold two buttons inside a 900px column; seven pills need
   more room, so the column is widened for this row. */

/* The hero heading has max-width:760px but no auto margins, so it sits flush
   against the inline-start edge — the right, in RTL. That never showed while
   .hero-content shrink-wrapped to the heading itself; the wider button row
   expands the column, so the heading has to centre explicitly.
   (.hero-content p already carries margin:0 auto, which is why only the
   heading drifted.) */

/* One line, always. Seven pills do not fit on a phone and wrapping them into three
   rows pushed the hero artwork off-screen, so the row scrolls sideways instead.
   "safe center" keeps them centred while they fit and falls back to start-alignment
   once they overflow — plain "center" would put the first pill out of reach. */
.hero-buttons--products {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  justify-content: safe center;
  align-items: stretch;
  gap: clamp(6px, .7vw, 10px);
  width: 100%;
  margin-inline: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* No visible scrollbar — the pills themselves are the affordance. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hero-buttons--products::-webkit-scrollbar {
  display: none;
}

.hq-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: clamp(5px, .6vw, 9px);
  height: clamp(38px, 3.1vw, 48px);
  padding-inline: clamp(10px, 1.05vw, 14px);
  border-radius: clamp(9px, 1vw, 13px);
  border: 1px solid color-mix(in srgb, var(--n0) 16%, transparent);
  background: color-mix(in srgb, var(--n0) 8%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: color-mix(in srgb, var(--n0) 92%, transparent);
  font-family: inherit;
  font-size: clamp(11.5px, .95vw, 13.5px);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease,
    box-shadow .25s ease;
}

.hq-pill:hover,
.hq-pill:focus-visible {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: var(--brand-white);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-primary-hover) 40%, transparent);
}

/* A background swap over a photograph is not a focus indicator. The hero is navy in
   both themes, so a white ring reads reliably in either. */
.hq-pill:focus-visible {
  outline: 2px solid var(--brand-white);
  outline-offset: 2px;
}

.hq-pill__icon {
  display: inline-flex;
  flex: 0 0 auto;
}

/* The hero is navy in BOTH themes (landing.css:504 -> --landing-accent-dark ->
   --brand-navy), but --n0 flips to near-black in dark. Painting the pills from --n0
   therefore rendered near-black-on-navy at ~1.17:1 — the entire quote entry point
   became invisible in dark mode. Flip to --n900, which is #f5f7fa in dark (~15:1 on
   navy). Same shape as the fix landing.css already applies to .btn-primary. */
[data-theme="dark"] .hq-pill {
  color: color-mix(in srgb, var(--n900) 92%, transparent);
  background: color-mix(in srgb, var(--n900) 8%, transparent);
  border-color: color-mix(in srgb, var(--n900) 16%, transparent);
}

.hq-pill__icon svg {
  width: clamp(15px, 1.3vw, 19px);
  height: clamp(15px, 1.3vw, 19px);
  display: block;
}

/* ── Modal ────────────────────────────────────────────────────────────── */

/* .hq-capture-page carries the same TOKEN set as the overlay. The inline entry (the wizard's
   own step-1 card) has no .hq-overlay ancestor, so --hq-card-bg / --hq-card-border /
   --hq-card-shadow were invalid at computed-value time there: the card rendered transparent,
   borderless and shadowless — a form on a page rather than the card .hq-modal--inline promises.
   The dialog LAYOUT stays on .hq-overlay alone, in its own rule below: position:fixed and
   inset:0 would turn the page card into a full-viewport overlay. */
.hq-overlay,
.hq-capture-page {
  /* The card keeps its own background whatever the OS prefers, so pin the scheme the UA
     paints native controls for. Without this the terms checkbox is drawn for the OS
     preference, not for the card it sits on — a dark box on the white card, and a glaring
     white one on the dark. accent-color cannot fix that: it only fills the CHECKED state. */
  color-scheme: light;
  --hq-card-bg: #ffffff;
  --hq-card-border: color-mix(in srgb, #ffffff 70%, transparent);
  --hq-card-shadow: 0 30px 80px color-mix(in srgb, #030c22 55%, transparent);
  --hq-title: #101a3d;
  --hq-muted: #6b7691;
  --hq-input-bg: #ffffff;
  --hq-input-border: #e3e6ef;
  --hq-input-text: #1d2745;
  --hq-input-placeholder: #98a1b8;
  --hq-input-icon: #9aa3ba;
  --hq-ghost-text: #0a3a9f;
  --hq-ghost-border: #dfe4f0;
  /* No 12px radius or focus-ring token exists in theme.tokens.css; both were repeated as
     literals across this file. Local to the card, like the rest of the --hq-* set. */
  --hq-radius: 12px;
  /* Height of the pinned action, so the terms row above it can be offset by exactly that
     much. The <=560px block below shrinks the button and re-points this in step. */
  --hq-action-h: 46px;
  --hq-focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}

/* Dialog layout — the OVERLAY only, never the inline page entry. Declarations unchanged; they
   simply sit in their own rule now so .hq-capture-page can share the tokens above without
   becoming a fixed, full-viewport, z-index:9999 layer over the wizard. */
.hq-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  animation: hqFadeIn .3s ease;
}

/* Lifts the popup's loading cover above the popup while the popup is open — during the vehicle
   lookup. Left at its own z-index it painted behind the card, so only the backdrop darkened and
   lightened. Scoped to "popup open" so the navigation cover keeps its usual place below the
   framework's reconnect and error chrome. Relies on HeroQuoteModal rendering the cover BEFORE
   .hq-overlay (~ only matches following siblings). */
.ammn-boot:has(~ .hq-overlay) {
  z-index: 10000;
}

.hq-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #030c22 55%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.hq-modal {
  position: relative;
  width: 520px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 40px);
  border-radius: 8px;
  background: var(--hq-card-bg);
  border: 1px solid var(--hq-card-border);
  box-shadow: var(--hq-card-shadow);
  display: flex;
  flex-direction: column;
  padding: 24px 32px;
  overflow: hidden;
  animation: hqScaleIn .35s cubic-bezier(.16, 1, .3, 1);
}

@keyframes hqFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes hqScaleIn {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Stays in flow and is nudged toward the corner with negative margins that stay
   inside the card's padding — a zero-height header would push the button past
   the card's overflow:hidden edge and clip it. */
/* Close at the start, brand mark at the end — the same header shape as AuthModal, so the
   capture card and the sign-in card that follows it read as one family rather than two
   unrelated dialogs stacked in the same journey. */
.hq-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  margin-top: -8px;
  margin-inline: -12px 0;
  margin-bottom: 2px;
}

.hq-modal__logo {
  display: flex;
  align-items: center;
  pointer-events: none;
}

/* A quiet signature, not a second focal point competing with the title. Height-constrained
   with auto width rather than pinned on both axes as auth.css does: this mark is 74×66, and
   fixing both would squash it. */
.hq-modal__logo img {
  height: 26px;
  width: auto;
  opacity: .85;
  display: block;
}

.hq-modal__close {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 7px;
  /* 44px hit area (WCAG 2.5.5): the glyph stays 17px, the target does not. */
  min-inline-size: 44px;
  min-block-size: 44px;
  color: var(--hq-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  transition: background .2s, color .2s;
}

.hq-modal__close:hover {
  background: #f1f3f9;
  color: var(--hq-title);
}

.hq-modal__close svg {
  width: 17px;
  height: 17px;
  display: block;
}

.hq-modal__title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--hq-title);
  margin: 0 0 6px;
}

.hq-modal__subtitle {
  font-size: 14.5px;
  line-height: 22px;
  text-align: center;
  color: var(--hq-muted);
  margin: 0 0 14px;
}

.hq-modal__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* The form's rows land on fractional heights (Arabic font metrics), leaving ~2px of overflow at
     EVERY window height: the scrollbar was permanent on a form that fits. 4px, because how much
     is left over moves with the font, the zoom and the device pixel ratio; a real overflow here
     is a whole row, 48px and up. */
  padding-block-end: 4px;
}

/* No visible scrollbar on the card or on the pickers that open over it. The form scrolls only
   when the window is too short for it, and Chromium then draws the native Windows bar INSIDE the
   card — a grey track with an arrow button at each end, against a card with rounded corners and
   no other grey — because MudThemeProvider sets `scrollbar-width: thin` on `body *`, and since
   Chromium 121 that makes it ignore every ::-webkit-scrollbar rule (see DECISIONS_LOG). The form
   still scrolls by wheel, trackpad, touch, keyboard and tabbing. */
.hq-modal__body,
.hq-pop__list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hq-modal__body::-webkit-scrollbar,
.hq-pop__list::-webkit-scrollbar {
  display: none;
}

/* ---------------- Scroll arrows ----------------
   The card shows no scrollbar, so these are what says the form continues — one at each end of
   the scroll area, on the side the scrollbar used to be, inside the card's own padding so they
   never sit on a field. ammnScrollBoxWatch (dom-interop.js) writes the three data attributes:
   the pair is absent on a form that fits, and the one pointing at an end it has reached dims.
   tabindex="-1" on purpose — tabbing already scrolls the form to the next field, so these would
   be two stops in the way of filling it in. */
.hq-modal .hq-scroll {
  position: absolute;
  inset-inline-end: 8px;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  /* The circle stays 30px; the tap target is 44px (WCAG 2.5.5), as on the close button. */
  outline-offset: -1px;
  border: 1px solid var(--hq-ghost-border);
  border-radius: 999px;
  /* Reads as a control at a glance — it is the only invitation to scroll the form. */
  background: var(--hq-track-bg, var(--hq-card-bg));
  color: var(--hq-ghost-text);
  box-shadow: 0 2px 6px color-mix(in srgb, #030c22 10%, transparent);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, opacity .18s ease;
}

.hq-modal[data-scrolls="true"] .hq-scroll {
  display: flex;
}

.hq-modal .hq-scroll:hover {
  color: var(--hq-card-bg);
  border-color: var(--hq-ghost-text);
  background-color: var(--hq-ghost-text);
}

.hq-modal .hq-scroll::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: inherit;
}

.hq-modal .hq-scroll svg {
  width: 17px;
  height: 17px;
}

/* Level with the first and last line of the scroll area: the header above it is the card's
   padding plus its own height, and the card's bottom padding is the same. */
.hq-modal .hq-scroll--up { top: 76px; }
.hq-modal .hq-scroll--down { bottom: 20px; }

/* The other five products pin their terms row and action row to the card's bottom (see the sticky
   rows below), and the arrow would have covered the corner of the green action — on exactly the
   tall forms this is for. Above them instead: one action height for the button, one for the terms
   row that sits on top of it, and the gap between them. */
.hq-modal:has(.ibs-btn-row) .hq-scroll--down {
  bottom: calc(2 * var(--hq-action-h) + 28px);
}

.hq-modal[data-at-top="true"] .hq-scroll--up,
.hq-modal[data-at-bottom="true"] .hq-scroll--down {
  opacity: .3;
  pointer-events: none;
}

.hq-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Motor: vehicle-identification mode ───────────────────────────────── */

.hq-modes {
  margin-bottom: 4px;
}

.hq-modes__label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hq-muted);
  text-align: start;
  margin-bottom: 7px;
}

.hq-modes__track {
  display: grid;
  /* Size to however many buttons the row actually has. It was pinned to three, which left
     dead columns once vehicle identification (2 buttons) and transfer of ownership (1) were
     split into separate rows. Identical rendering for a three-button row. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 13px;
  background: #f1f3f9;
  border: 1px solid var(--hq-input-border);
}

.hq-mode {
  height: 38px;
  border: 0;
  background: transparent;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hq-muted);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.hq-mode:hover {
  color: var(--hq-title);
}

.hq-mode.is-active {
  background: var(--hq-card-bg);
  color: var(--hq-title);
  box-shadow: 0 2px 6px color-mix(in srgb, #04102e 12%, transparent);
}

[data-theme="dark"] .hq-modes__track {
  background: color-mix(in srgb, #ffffff 5%, transparent);
}

[data-theme="dark"] .hq-mode.is-active {
  background: color-mix(in srgb, #ffffff 12%, transparent);
}

@media (max-width: 420px) {
  .hq-mode {
    font-size: 12px;
    padding-inline: 2px;
  }
}

/* ── Fields ───────────────────────────────────────────────────────────── */

.hq-field {
  position: relative;
  display: flex;
  align-items: center;
  height: 46px;
  border-radius: var(--hq-radius);
  border: 1px solid var(--hq-input-border);
  background: var(--hq-input-bg);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.hq-field:focus-within {
  border-color: var(--brand-primary);
  box-shadow: var(--hq-focus-ring);
}

.hq-field.is-invalid {
  border-color: #e5484d;
  box-shadow: 0 0 0 3px color-mix(in srgb, #e5484d 16%, transparent);
}

.hq-field__icon,
.hq-field__chevron {
  position: absolute;
  display: inline-flex;
  color: var(--hq-input-icon);
  pointer-events: none;
}

.hq-field__icon { inset-inline-start: 15px; }
.hq-field__chevron { inset-inline-end: 15px; }

.hq-field__icon svg { width: 19px; height: 19px; display: block; }
.hq-field__chevron svg { width: 17px; height: 17px; display: block; }

.hq-field input,
.hq-field .hq-trigger {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15.5px;
  color: var(--hq-input-text);
  padding-inline-start: 45px;
  padding-inline-end: 15px;
  text-align: start;
  appearance: none;
  -webkit-appearance: none;
  border-radius: inherit;
}

.hq-field--select input,
.hq-field--select .hq-trigger { padding-inline-end: 40px; }

.hq-field input::placeholder,
.hq-field .hq-trigger[data-empty="true"] { color: var(--hq-input-placeholder); }

.hq-field .hq-trigger { cursor: pointer; }

/* ── Actions ──────────────────────────────────────────────────────────── */

.hq-submit,
.hq-secondary,
.hq-modal .ibs-btn-row .ibs-btn {
  /* .ibs-btn carries padding:14px 52px and white-space:nowrap from ibs-style; motor's own
     button gets padding:0 from the landing reset. Left alone, 104px of inherited side padding
     leaves ~152px for a label that cannot wrap, and the Urdu CTA does not fit on a 320px
     phone. Stated once here, for all three buttons. */
  padding-inline: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  border-radius: var(--hq-radius);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: filter .2s ease, transform .2s ease, background .2s ease;
}

.hq-submit {
  margin-top: 6px;
  border: 0;
  background: var(--brand-primary);
  color: var(--brand-primary-contrast);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--brand-primary) 32%, transparent);
}

.hq-submit:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.hq-secondary {
  border: 1px solid var(--hq-ghost-border);
  background: #fff;
  color: var(--hq-ghost-text);
}

.hq-secondary:hover { background: #f7f9ff; }

.hq-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--hq-muted);
}

.hq-note svg { width: 16px; height: 16px; display: block; }

/* ── Coming-soon variant ──────────────────────────────────────────────── */

.hq-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 13px;
  padding-block: 6px 2px;
}

.hq-soon__badge {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding-inline: 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 14%, transparent);
  color: color-mix(in srgb, var(--brand-primary) 76%, #06300f);
  font-size: 14px;
  font-weight: 600;
}

/* ── Coming-soon teaser + newsletter ────────────────────────────── */

.hq-soon__msg {
  margin: 2px 0 4px;
  font-size: 15.5px;
  line-height: 26px;
  color: var(--hq-title);
  text-align: center;
  max-width: 400px;
}

/* ── Field popover ────────────────────────────────────────────────────── */

/* ── Dark theme ───────────────────────────────────────────────────────── */

[data-theme="dark"] .hq-overlay,
[data-theme="dark"] .hq-capture-page {
  color-scheme: dark;
  --hq-card-bg: #141d31;
  --hq-card-border: color-mix(in srgb, #ffffff 12%, transparent);
  --hq-title: #eef1f8;
  --hq-muted: #9aa4bd;
  --hq-input-bg: color-mix(in srgb, #ffffff 6%, transparent);
  --hq-input-border: color-mix(in srgb, #ffffff 14%, transparent);
  --hq-input-text: #eef1f8;
  --hq-input-placeholder: #7d879e;
  --hq-input-icon: #7d879e;
  --hq-ghost-text: #9dc0ff;
  --hq-ghost-border: color-mix(in srgb, #ffffff 16%, transparent);
}

[data-theme="dark"] .hq-secondary { background: color-mix(in srgb, #ffffff 5%, transparent); }
[data-theme="dark"] .hq-secondary:hover { background: color-mix(in srgb, #ffffff 10%, transparent); }
[data-theme="dark"] .hq-modal__close:hover { background: color-mix(in srgb, #ffffff 10%, transparent); }

/* ── Small screens ────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .hq-modal {
    padding: 18px 16px 20px;
    border-radius: 20px;
    max-height: calc(100dvh - 24px);
  }

  .hq-modal__title { font-size: 20px; }
  .hq-modal__subtitle { font-size: 13.5px; margin-bottom: 14px; }

  .hq-field { height: 44px; }

  .hq-field input,
  .hq-field .hq-trigger {
    font-size: 14.5px;
    padding-inline-start: 40px;
  }

  /* The five non-motor products' action is the same button; without it here motor shrank to
     44px on a phone and they stayed at 46px. --hq-action-h follows, so the terms row pinned
     above it keeps sitting exactly on top. */
  .hq-overlay,
  .hq-capture-page { --hq-action-h: 44px; }

  .hq-submit,
  .hq-secondary,
  .hq-modal .ibs-btn-row .ibs-btn { height: 44px; font-size: 15px; }

  }

@media (prefers-reduced-motion: reduce) {
  .hq-overlay,
  .hq-modal { animation: none; }

  .hq-pill,
  .hq-submit,
  .hq-secondary,
  .hq-modal .ibs-btn-row .ibs-btn { transition: none; }
}

/* ── Wizard-hosted variant ──────────────────────────────────────────────
   The motor pill opens the REAL wizard step (CarDetailsStep) rather than a
   hand-written form. That component is laid out for a full page, so its step
   banner and field rows are cramped at the dialog's default 520px. Only the
   Blazor landing sets this modifier; the static page never does, so its own
   modal keeps the original width. */
/* Only widen where there is room. This block sits after the max-width:560px rule, so
   an unconditional `padding` here beat the phone padding at every width — the modal
   kept desktop padding on a 320px screen. */
@media (min-width: 561px) {
  .hq-modal--wizard {
    /* 560, not the old 760. Measured at 1366x900: every one of the six capture forms fits
       with ZERO horizontal overflow at 480px, so 760 was ~240px of empty card either side of
       a single column of fields — the card read as a page, not a dialog. 560 leaves the motor
       tab strip and the two-up identification row comfortable without the emptiness.
       The step banner that originally justified the extra width no longer renders here: it is
       gated to Search mode, and the popup is always Collect. */
    width: 560px;
    padding: 20px 24px;
  }
}

/* The wizard step's tab strips are `flex: 1` + `white-space: nowrap` (ibs-style.css),
   so their min-content floor is the full Arabic label and the strip cannot shrink.
   Measured at 320px, "رقم البطاقة الجمركية" sat 48px outside the modal body. Two classes,
   so this beats ibs-style.css without touching the real wizard pages. */
.hq-modal--wizard .ibs-tabs {
  flex-wrap: wrap;
}

.hq-modal--wizard .ibs-tab {
  flex: 1 1 120px;
  min-width: 0;
  white-space: normal;
}

/* ── Wizard chrome that does not belong in a dialog ────────────────────────
   Five of the six products render their REAL wizard step inside this card, and a step is
   dressed for a full page: it arrives as a bordered, shadowed, accent-topped panel with its
   own margin. Nested inside a card that already has a border, a shadow and a radius, that
   reads as a box inside a box. The dialog is the panel; the step is just its contents.
   Scoped under .hq-modal so the wizard pages themselves keep their card exactly as it is. */
.hq-modal .card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-top: 0;
}

.hq-modal .card-body {
  gap: 16px;
}

/* The page/container wrappers the step brings with it. They centre and pad for a full-width
   page; inside a 560px dialog they only add indents the card has already paid for. */
.hq-modal .page,
.hq-modal .container {
  padding: 0;
  margin: 0;
  max-width: none;
  width: 100%;
}

/* Character counters. IbsInputText turns any MaxLength into a MudBlazor counter, so a
   three-field capture rendered "6 / 14", "4 / 4", "6" under its inputs — a length budget is
   feedback for someone filling a long form, not for a doorway asking two questions.
   MudBlazor renders the counter as the `.ms-auto` child of the helper-text row and the
   VALIDATION MESSAGE as a sibling in the same row, so this targets the counter by that child
   relationship: an error still shows, a character budget does not. */
.hq-modal .mud-input-helper-text > .ms-auto {
  display: none;
}

/* ── The five non-motor products: the wizard's controls, in the card's language ──
   Motor's step-1 renders the landing's own hq-* markup. The other five render the shared
   Ibs* controls, which bring the wizard's palette and a full-page rhythm: an 8px radius
   against motor's 12px, a pure-black label that vanishes on the dark card, and a small
   pale "next" pill where motor has one full-width green action.

   Re-pointed here rather than by forking five forms: the validation, InputMode and
   MaxLength plumbing lives in IbsInputText, and five copies of it would drift. This is the
   same move auth.css already makes for the sign-in card's Mud inputs. Scoped under
   .hq-modal, so the wizard's own pages keep the design they were built with.

   ONE set of rules covers both themes -- the --hq-input-* tokens already flip on
   [data-theme="dark"] .hq-overlay, which is why there is no second dark block here.

   Labels stay. Motor can drop them because a serial number is self-evident from its
   placeholder; House opens on three dropdowns -- type / usage / plan -- that are
   unreadable without one. Matching the look is the goal, not deleting the meaning. */

/* IbsInputText is token-driven: ibs-style.css declares a --wf-* set on this exact selector
   and every rule that paints the field reads those tokens -- several with !important, so
   overriding the painted properties directly loses on both specificity and !important.
   Re-point the TOKENS instead, at the same selector with .hq-modal in front, and every rule
   downstream follows: radius, border, hover, focus, text, placeholder and label.

   The background is the one property that is NOT tokenised, so it is set here -- and on the
   WRAPPER, never on .mud-input-outlined-border. That border is a <fieldset> rendered as the
   input's LAST sibling, so an opaque background on it paints over the value: the fields
   rendered convincingly blank while input.value still read "Riyadh". */
/* --wf-label belongs one level UP. MudBlazor renders the <label> as a SIBLING of
   .mud-input-outlined, not a child, so a custom property declared on the wrapper never reaches
   it -- which is why ibs-style's own --wf-label does not resolve there either and the label
   falls back to browser-default black: 21:1 on the white card, and unreadable on the dark one
   before this. Declared on .ibs-input it inherits to the label and the wrapper alike. */
.hq-overlay .hq-modal .ibs-input,
.hq-capture-page .hq-modal .ibs-input {
  --wf-label: var(--hq-muted);
}

.hq-overlay .hq-modal .ibs-input .mud-input.mud-input-outlined,
.hq-capture-page .hq-modal .ibs-input .mud-input.mud-input-outlined {
  --wf-radius: var(--hq-radius);
  --wf-border-default: var(--hq-input-border);
  --wf-border-hover: var(--hq-input-border);
  --wf-border-focus: var(--brand-primary);
  --wf-text: var(--hq-input-text);
  --wf-placeholder: var(--hq-input-placeholder);

  background: var(--hq-input-bg);
  border-radius: var(--hq-radius);
}

/* The focus ring. ibs-style drives the focus COLOUR through --wf-border-focus above but
   keeps --wf-current-shadow at none, so the ring itself is added here. No .mud-focused class
   is put on the wrapper -- verified in the live DOM -- so it hangs off :focus-within,
   matching .hq-field:focus-within value for value. */
.hq-overlay .hq-modal .ibs-input .mud-input.mud-input-outlined:focus-within,
.hq-capture-page .hq-modal .ibs-input .mud-input.mud-input-outlined:focus-within {
  --wf-current-shadow: var(--hq-focus-ring);
}

.hq-modal .ibs-input .mud-input-slot.mud-input-root {
  font-size: 15.5px;
}

/* Dropdowns are IbsDropdownList (.ibs-ddl), NOT MudSelect -- there is no .mud-select in
   this dialog at all -- so they carry their own selectors. Heights are left alone: the Mud
   field notches its label into the border and the ddl stacks its label above, so forcing a
   shared height would clip one of them. The shared language is radius, colour and type. */
.hq-modal .ibs-ddl__trigger {
  border-radius: var(--hq-radius);
  border-color: var(--hq-input-border);
  background: var(--hq-input-bg);
  color: var(--hq-input-text);
}

/* No `outline: none` here. --brand-primary is #18c92f: 2.25:1 against the white card, and the
   18% ring lands near 1.17:1 -- both under WCAG 1.4.11's 3:1, so they cannot BE the focus
   indicator on the default theme. They decorate; the UA's own ring is left to do the work. */
.hq-modal .ibs-ddl__trigger:focus-visible {
  border-color: var(--brand-primary);
  box-shadow: var(--hq-focus-ring);
}

/* This label is absolutely positioned ON the trigger's top border, and masks the line behind
   it with a background of its own (--n0). That token is the wizard's page white, not the
   card's, so on the dark card the mask showed as a pale block behind every dropdown label. */
.hq-modal .ibs-ddl__label {
  color: var(--hq-muted);
  background: var(--hq-card-bg);
}

/* The action row. The wizard right-aligns a small pill because a full page has room to
   spare; in the dialog that action IS the ending, so it takes motor's full-width button. */
.hq-modal .ibs-btn-row {
  display: block;
  margin-top: 6px;
  padding: 0;
}

/* Home and travel are taller than a 768px laptop viewport: measured, their green action sat
   BELOW the fold with the body scrolled to the top, so the one thing the dialog is asking for
   was invisible — and so was the checkbox that enables it, which leaves a disabled button
   with no readable reason. Both rows are pinned, for every product and every viewport, rather
   than trimming two forms until they happen to fit.

   Pinned as two SIBLINGS, not inside one wrapper. A wrapper is the tidier CSS, but these rows
   come from WizardActionBar, which 16 wizard steps also use, and there they are direct
   children of `.container.stagger`: `.ammn-wizard .stagger > *` gives each child a fadeInUp
   with an :nth-child delay. A wrapper — even `display: contents`, which generates no box —
   takes their place in that selector, so the rows lose the animation AND its backwards fill
   and arrive before the card above them. Two stickies leave the shared component's markup
   exactly as the wizard has always rendered it. */
.hq-modal .wizard-terms,
.hq-modal .ibs-btn-row {
  position: sticky;
  z-index: 1;
  background: var(--hq-card-bg);
}

.hq-modal .wizard-terms {
  bottom: var(--hq-action-h);
  padding-top: 8px;
}

.hq-modal .ibs-btn-row {
  bottom: 0;
  padding-bottom: 8px;
}

/* .ibs-chk carries an unscoped margin-top:16px (ibs-style.css). The wizard cancels it with
   `.ammn-wizard .wizard-terms .ibs-chk`, which cannot match here — the dialog has no
   .ammn-wizard ancestor — so the box centred ~8px below the sentence it labels. */
.hq-modal .wizard-terms .ibs-chk {
  margin-top: 0;
}
/* ── Small screens: every product must stay reachable ──────────────────────
   landing.css forces `.hero-buttons { flex-wrap: nowrap !important }` inside its
   768px and 480px breakpoints — written for the hero's ORIGINAL two-button row,
   where forcing one line is correct. This row carries the same class but holds
   SEVEN pills: measured at 320px it became a 526px line inside a 296px column,
   leaving the first pill — motor, the page's primary action — outside the viewport
   with no way to reach it, because the row was not a scroll container.

   One line is kept; the row is made scrollable instead, so all seven stay reachable
   without the artwork being pushed off-screen by extra rows.

   Two classes, so this outranks that override on SPECIFICITY rather than relying
   on stylesheet order (both are !important, and load order here is incidental). */
@media (max-width: 768px) {
  .hero-buttons.hero-buttons--products {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
    overflow-x: auto !important;
  }

  /* The same override stretches each child with flex:1 1 0 for the two-button
     row. Pills size to their label instead and scroll sideways as one line. */
  .hero-buttons.hero-buttons--products > .hq-pill {
    flex: 0 0 auto !important;
    max-width: 100%;
    /* The clamp() height bottoms out at 38px, under the 44px touch minimum, and the
       font clamp bottoms out at 11.5px — the smallest text on the page, on the
       device it is hardest to read. These are the page's primary actions. */
    min-block-size: 44px;
    font-size: 14px;
  }
}

/* ── Landing capture form: the parts the static overlay never needed ───────
   The static form validated in JS and put its message on the field itself.
   The Blazor step carries per-field messages from the shared Validate(), plus
   the saved-vehicle completions and the terms gate the wizard requires, so
   those three get styles here. Everything else reuses the rules above. */

.hq-mode-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hq-error {
  margin: -4px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #d33b3f;
}

.hq-error--page {
  margin-top: 2px;
  padding: 9px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, #e5484d 9%, transparent);
}

/* Completions from the customer's saved vehicles. A row of chips rather than a
   dropdown: there are at most four, and a popover inside a dialog on a phone is
   the thing most likely to end up positioned off-screen. */
.hq-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -2px;
}

.hq-suggest__item {
  padding: 7px 12px;
  min-block-size: 36px;
  border-radius: 999px;
  border: 1px solid var(--hq-ghost-border);
  background: transparent;
  color: var(--hq-ghost-text);
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.hq-suggest__item:hover {
  background: color-mix(in srgb, var(--hq-ghost-text) 7%, transparent);
  border-color: color-mix(in srgb, var(--hq-ghost-text) 30%, transparent);
}

/* The wizard leaves .wizard-terms as a block, so its box sits on its own line ABOVE the
   sentence it belongs to. It is the same row as motor's, so it takes the same rule rather
   than a near-copy that drifts. */
.hq-terms,
.hq-modal .wizard-terms {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 2px 0 2px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--hq-muted);
  cursor: pointer;
}

.hq-terms input {
  /* 18px box on a 44px-tall label keeps the tap target without an oversized tick. */
  inline-size: 18px;
  block-size: 18px;
  margin: 1px 0 0;
  accent-color: var(--hq-ghost-text);
  flex: none;
  cursor: pointer;
}

.hq-modal .wizard-terms__text {
  font-size: inherit;
  color: inherit;
}

.hq-terms a {
  color: var(--hq-ghost-text);
  text-decoration: underline;
}

.hq-submit:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* The brief moment CaptureRedirect is on screen before the landing takes over. The wizard
   already shows a neutral loader while it resolves resume state; this matches it rather than
   introducing a second kind of waiting screen. */
.wizard-redirect-loader {
  display: flex;
  justify-content: center;
  padding: 64px 16px;
}

.wizard-redirect-loader__spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--hq-card-border, rgba(0, 0, 0, .12));
  border-top-color: var(--ammn-green, #22c55e);
  animation: hqRedirectSpin .8s linear infinite;
}

@keyframes hqRedirectSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .wizard-redirect-loader__spinner { animation-duration: 2.4s; }
}

/* ── The capture card on Medical's active-policy step 1 ────────────────────────────────────
   The only place a capture step still renders on a wizard PAGE. Every other no-lead entry
   redirects to the landing popup (CaptureRedirect), but Medical parks an active-policy
   customer on step 1 so CompanyDetailsStep can offer Endorsement vs Renewal — see
   MedicalWizardPage's case 1. Rendering that component bare stretched it the full viewport
   width: tab strip edge to edge, full-width submit, none of the card framing, so the same
   component looked like two different screens. This gives it the popup's card.

   .hq-modal--inline reuses the card WITHOUT its dialog behaviour: a dialog is sized against
   the viewport and animates in, neither of which belongs on an already-scrollable page. */
.hq-capture-page {
  display: flex;
  justify-content: center;
  padding: 24px 16px 48px;
}

.hq-capture-page .hq-modal--inline {
  /* The wizard variant's width lives in a media query; pin it here so this entry matches the
     popup at every width instead of only above that breakpoint. 640px, not 560: the wizard
     pages use the 2026 skin too, and that gives .hq-modal 40px of padding. At 560px the form
     would get 480px of content against the popup's 560 -- below the measured no-overflow floor
     -- and the same component would again be two different sizes. */
  width: 640px;
  max-width: 100%;
  /* A dialog is capped against the viewport and clips; a page card must grow with its content. */
  max-height: none;
  overflow: visible;
  /* No entry animation: nothing opened, the page simply rendered. */
  animation: none;
}

@media (max-width: 600px) {
  .hq-capture-page { padding: 16px 12px 32px; }
}