/* AZ Collision - estimate wizard prototype (estimate-preview.html only).
   Loaded last, after custom.css. Everything here is scoped to .ew-scope or an
   .ew- prefixed class so nothing can leak into the live page if these rules are
   ever folded into the main build.

   Note on borders: custom.css:45-50 sets border-color with !important on
   .input/.text-area/.select-field, which kills any later border-color rule
   (including :focus and error states). Rather than escalate that !important
   war, invalid fields here are drawn with an inset box-shadow ring, which the
   !important border rule cannot reach. */

/* --- Item 1: page scaffolding (static header, section rhythm) --------------- */
.ew-header {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* .ew-header-row is deliberately left as a plain block here and only becomes a
   flex row at mobile widths. Making it flex on desktop too would drop the header
   from 78px to 71px, because the inline-block logo currently sits on a text
   baseline and carries the descender leading with it -- a real (if invisible)
   desktop change this task is not meant to make. */
.ew-logo {
  display: inline-block;
}
.ew-logo img {
  display: block;
  height: 34px;
  width: auto;
}
/* Mobile-only page chrome; the desktop header stays a bare logo row. */
.ew-header-call {
  display: none;
}

/* The template's .section.hero.pd-top-64px---bottom-0px zeroes padding-top
   because on the home page this section follows other content. Here it is the
   only section, so it needs its own top rhythm -- matched to that selector's
   specificity (0,4,0) so it actually wins. */
.section.hero.form.ew-section {
  padding-top: 48px;
  padding-bottom: 0;
  margin-bottom: 72px;
  overflow: visible; /* .section.hero clips; focus rings here must not be cut */
}

.ew-lede {
  margin: 14px auto 0;
  max-width: 34em;
  color: rgba(255, 255, 255, 0.72);
  font-size: 17px;
  line-height: 1.5;
}

/* Mobile chrome is deliberately compact: on a phone every row above the first
   service card is vertical travel between the user and the thing they came to
   do. Desktop keeps the roomier hero. */
@media (max-width: 767px) {
  .ew-header {
    padding: 10px 0;
  }
  .ew-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .ew-logo img {
    height: 26px;
  }
  .ew-header-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-height: 36px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
  }

  .section.hero.form.ew-section {
    padding-top: 12px;
    margin-bottom: 32px;
  }
  /* Still the page heading -- same element, same outline position, it just stops
     spending two display-scale lines before the form begins. The clamp keeps it
     on one line down to 360px. */
  .ew-scope .display-10 {
    font-size: clamp(26px, 7.7vw, 34px);
    line-height: 1.12;
  }
  .ew-lede {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.4;
  }
  /* The template's 48px gap between the hero copy and the card. */
  .ew-scope .mg-top-48px {
    margin-top: 18px;
  }
  /* 61px of card padding is a lot of dead space on a phone when the form is the
     whole page. */
  .ew-scope .card.form-wrapper {
    padding: 16px 16px;
  }
}

/* --- Item 2: stepper (all three labels always readable) -------------------- */
.ew-stepper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: 100%;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.ew-stepper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  min-width: 0;
}
/* Connector between the marks. One grid column separates two mark centres, so
   the line runs from the previous mark's right edge to this mark's left edge. */
.ew-stepper-item + .ew-stepper-item::before {
  content: "";
  position: absolute;
  top: 15px;
  left: calc(-50% + 20px);
  width: calc(100% - 40px);
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
}
.ew-stepper-item.is-done::before,
.ew-stepper-item.is-current::before {
  background: rgba(255, 255, 255, 0.55);
}

.ew-stepper-mark {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: #090a0c;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.ew-stepper-item.is-current .ew-stepper-mark {
  border-color: #fff;
  background: #fff;
  color: #050607;
}
.ew-stepper-item.is-done .ew-stepper-mark {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.ew-stepper-text {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
}
.ew-stepper-item.is-current .ew-stepper-text {
  color: #fff;
}
.ew-stepper-item.is-done .ew-stepper-text {
  color: rgba(255, 255, 255, 0.8);
}
/* Tighter band on mobile. All three labels stay readable -- that is a locked
   requirement, so only the circle, the connector geometry and the surrounding
   margins give ground. */
@media (max-width: 767px) {
  .ew-stepper {
    margin-bottom: 18px;
  }
  .ew-stepper-item {
    gap: 6px;
  }
  .ew-stepper-mark {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
  /* Connector re-centred on the smaller circle: 30/2 = 15, plus a 4px breath. */
  .ew-stepper-item + .ew-stepper-item::before {
    top: 14px;
    left: calc(-50% + 19px);
    width: calc(100% - 38px);
  }
}
@media (max-width: 479px) {
  .ew-stepper-text {
    font-size: 12px;
  }
}

/* --- Item 3: steps, headings, field chrome -------------------------------- */
.ew-step {
  display: block;
}
/* No-JS: the three steps stack as one page, so they need separators. JS mode
   only ever shows one at a time, and .is-wizard drops the rule. */
.ew-step + .ew-step {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ew-form.is-wizard .ew-step + .ew-step {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Heading + reassuring subcopy travel as one block, so the gap between them is
   set here rather than fought out between two collapsing margins. */
.ew-step-head {
  margin-bottom: 24px;
}
.ew-step-head .ew-step-title {
  margin-bottom: 6px;
}
.ew-step-sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 15px;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .ew-step-head {
    margin-bottom: 16px;
  }
  .ew-step-sub {
    font-size: 14px;
    line-height: 1.42;
  }
  .ew-hint {
    margin-bottom: 10px;
  }
}

/* Step 1 now opens straight onto the service cards. The question that used to
   sit between the subcopy and them was the heading's sentence a second time, so
   it went, and the shared gap was tuned for a step that starts with a field
   label. A bordered card grid is a heavier thing to butt up against a
   paragraph, so step 1 buys back a little of the air the removed rows held. */
[data-ew-step="1"] .ew-step-head {
  margin-bottom: 28px;
}
@media (max-width: 767px) {
  [data-ew-step="1"] .ew-step-head {
    margin-bottom: 20px;
  }
}

.ew-step-title {
  margin: 0 0 20px;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ew-step-title:focus {
  outline: none;
}
.ew-step-title:focus-visible {
  /* This heading receives programmatic focus after Next/Back so assistive
     technology announces the new step. It is not a keyboard-operable control;
     a short left marker preserves visible focus without making the full-width
     heading look like another text field. */
  outline: none;
  box-shadow: -4px 0 0 #fff;
}

/* .grid-form inherits Webflow's two-column .w-layout-grid default; a wizard
   step reads better as a single column. */
.ew-grid {
  grid-template-columns: 1fr;
}

/* Year / Make / Model: one line on a wide card, stacked on a phone. Equal thirds
   because Year is a select whose longest option is "Older than 1990" -- the old
   0.7fr was sized for a four-character text input and clipped that option behind
   the arrow between 768px and 991px, where the font bumps to 20px. */
.ew-row-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 768px) {
  .ew-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
  }
}

.ew-field {
  position: relative; /* anchor for the suggestion panel */
  display: block;
  min-width: 0;
}

/* --- Suggestion panel (Make / Model) --------------------------------------
   Replaces the native datalist in wizard mode. On iOS the native popover only
   does substring matching, so "Me" offered Alfa Romeo via "Ro-ME-o", and it
   never reopens when you return to a part-filled field. This is ours, so it can
   do neither. */
/* The open field outranks its later siblings. Two positioned .ew-field wrappers
   are in the same stacking context, so without this the NEXT field's label and
   input can paint through the panel hanging over them. */
.ew-field.is-suggesting {
  z-index: 40;
}
.ew-suggest {
  position: absolute;
  z-index: 41;
  /* First-paint default only: place() overwrites `top` with the input's own
     bottom edge on every open. 100% here measures from the bottom of .ew-field,
     which includes the inline error paragraph, so a field showing an error
     would hang its list a paragraph's height too low. */
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 5px;
  max-height: 376px; /* 8 rows before it scrolls */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* The panel is a scroller a finger is allowed to pull, which is the whole
     point of pan-y: the browser owns vertical drags here and hands us a
     pointercancel when it takes one, and that is what tells the tap detection
     the gesture was a scroll. Horizontal drags stay ours. contain keeps a flick
     that reaches the end of the list from carrying on into the page behind. */
  touch-action: pan-y;
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: var(--components--input-text--paddings--pd-small);
  /* Opaque was never the problem -- #16181d simply sat too close to the card's
     #090a0c to read as a layer, so it looked translucent and merged with the
     field underneath. This is deliberately several steps lighter than anything
     else on the page, with a hard shadow under it. */
  background: #262a33;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.78), 0 2px 6px rgba(0, 0, 0, 0.6);
}
.ew-suggest-row {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 12px 16px;
  color: #fff;
  /* Matched to .input, including its mobile bump below, so a row reads as the
     same kind of text as the field it is filling. */
  font-size: var(--globals--paddings--pd-default);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  /* Intersects with the panel's pan-y to leave vertical panning alone, while
     still ruling out double-tap zoom on a row. */
  touch-action: manipulation;
  /* Nothing calls preventDefault on pointerdown any more, so a finger resting
     on a row before a scroll is a plain long-press on text: without these it
     raises the selection magnifier and the copy callout over the list. */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
@media (max-width: 991px) {
  .ew-suggest-row {
    font-size: var(--core--font-size--displays--display-2);
  }
}
.ew-suggest-row + .ew-suggest-row {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.ew-suggest-row:hover {
  background: rgba(255, 255, 255, 0.12);
}
/* Last, so the active row wins over hover -- same treatment as a checked pill. */
.ew-suggest-row.is-active {
  background: #fff;
  color: #050607;
}
.ew-field label,
.ew-legend {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}
.ew-req,
.ew-opt {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}
.ew-hint {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.45;
}
.ew-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0; /* fieldsets refuse to shrink below their content otherwise */
}

/* Second beat inside a step: "Show us the damage." over the evidence block. */
.ew-subhead {
  margin: 0 0 8px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

/* A hint whose text is swapped at runtime. The slot reserves the taller of the
   two strings measured at 320px, so the swap is text-only and the buttons below
   never move -- picking an answer must not resize the form. */
.ew-swap-slot {
  /* Two lines of the 14px hint at 320px, where the towing wording is longest:
     14 * 1.45 * 2 = 40.6, so 40 was a pixel short. */
  min-height: 42px;
}
.ew-hint a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
/* The towing wording is a warning, not a hint. */
.ew-swap-slot.is-warning {
  color: rgba(255, 255, 255, 0.86);
}

/* Small print at the point of commitment. Quieter than .ew-reassure above it,
   but still comfortably above the 4.5:1 floor. */
.ew-fineprint {
  margin: -8px 0 16px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  line-height: 1.45;
}
.ew-fineprint a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ew-legend {
  padding: 0;
}

/* Placeholder option: greyed until a real service is picked. */
.ew-scope select.select-field:required:invalid {
  color: rgba(255, 255, 255, 0.55);
}

/* Selects that do not look imported.
   iOS paints its own chrome on a <select> unless appearance is cleared, and even
   with custom.css clearing it the theme leaves the corners square (0px against
   .input's 6px), the padding short and the background a different colour -- so
   Year and Best-Time read as foreign sitting next to Make and Model. Match the
   .input family through the same custom properties rather than magic numbers, so
   the two stay locked together if the theme retunes them, and supply our own
   chevron with room reserved for it.
   Declared BEFORE the mobile bump below on purpose: same specificity, so a later
   font-size here would beat the media query and undo it. */
.ew-scope .select-field {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 55px;
  padding: var(--components--input-text--paddings--pd-regular)
    calc(var(--components--input-text--paddings--pd-medium) + 24px)
    var(--components--input-text--paddings--pd-regular)
    var(--components--input-text--paddings--pd-medium);
  border-radius: var(--components--input-text--paddings--pd-small);
  background-color: var(--core--colors--neutral--200);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-opacity='.65' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--components--input-text--paddings--pd-medium) center;
  background-size: 12px 8px;
  color: var(--components--input-text--text-color--text-tertiary);
  font-size: var(--globals--paddings--pd-default);
  line-height: var(--core--line-height--regular);
  text-overflow: ellipsis;
}

/* az-collision.css:10368 bumps .input, .text-area and .select to 20px below
   991px -- partly so iOS stops zooming the page on focus -- but the selector
   says `.select`, not `.select-field`, so the theme's own selects never get it.
   The Year select needs the bump: it has to match the text inputs beside it and
   stay clear of the 16px threshold that triggers the zoom. */
@media (max-width: 991px) {
  .ew-scope .select-field {
    font-size: var(--core--font-size--displays--display-2);
  }
}

/* The template's placeholder colour is bright enough to be misread as a filled
   value, which matters here: the vehicle fields ship deliberately empty. The
   "e.g." prefix carries that on its own, so this only needs to be dimmer than
   real input text -- 0.5 over #090a0c is ~5.3:1, clear of WCAG 1.4.3, where the
   0.38 it replaces sat at ~3.5:1. */
.ew-scope .input::placeholder,
.ew-scope .text-area::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* --- Item 4: inline errors ------------------------------------------------- */
.ew-error {
  margin: 8px 0 0;
  color: var(--core--colors--system--red-400);
  font-size: 14px;
  line-height: 1.4;
}
/* Inset ring instead of border-color: see the note at the top of this file. */
.ew-scope [aria-invalid="true"] {
  box-shadow: inset 0 0 0 2px var(--core--colors--system--red-400);
}
.ew-pills[aria-invalid="true"] {
  box-shadow: none;
}

/* --- Item 5a: service cards (same mechanics as the pills, more room) ------- */
.ew-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 600px) {
  .ew-cards {
    grid-template-columns: 1fr 1fr;
  }
}
.ew-card {
  position: relative;
  display: flex;
  min-width: 0;
}
/* Same trick as the pills: a real radio at opacity 0 covering the whole card, so
   the entire card is the tap target and arrow keys still walk the group. */
.ew-card input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.ew-card label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-height: 78px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  transition: background-color .2s, border-color .2s, color .2s;
}
.ew-card-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}
.ew-card-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.6);
}
.ew-card:hover label {
  border-color: rgba(255, 255, 255, 0.6);
}
.ew-card input[type="radio"]:checked + label {
  border-color: #fff;
  background: #fff;
  color: #050607;
}
.ew-card input[type="radio"]:checked + label .ew-card-desc {
  color: rgba(5, 6, 7, 0.66);
}
/* Two blocks, never comma-grouped -- see the pills below for why. */
.ew-card input[type="radio"]:focus + label {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.ew-card input[type="radio"]:focus:not(:focus-visible) + label {
  outline: none;
}

/* Group-level invalid state. The fieldset has no box of its own, so the generic
   inset ring would draw around the legend and everything else; tint the card
   borders instead. */
.ew-fieldset[aria-invalid="true"] {
  box-shadow: none;
}
.ew-fieldset[aria-invalid="true"] .ew-card label {
  border-color: var(--core--colors--system--red-400);
}

/* --- Item 5: radio pills (real radios, styled labels) ---------------------- */
.ew-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ew-pill {
  position: relative;
  display: flex;
  min-width: 0;
}
/* The radio covers the whole pill at opacity 0: still focusable, still keyboard
   operable (arrow keys walk the group), and the entire chip is the tap target.
   opacity:0 also hides the global input:focus-visible outline from custom.css,
   which would otherwise paint a ring on an invisible box. */
.ew-pill input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.ew-pill label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  transition: background-color .2s, border-color .2s, color .2s;
}
.ew-pill:hover label {
  border-color: rgba(255, 255, 255, 0.6);
}
.ew-pill input[type="radio"]:checked + label {
  border-color: #fff;
  background: #fff;
  color: #050607;
}
/* Focus ring in two blocks, never comma-grouped: a selector list containing a
   pseudo-class the engine does not know is dropped whole, so pairing these would
   leave older engines with no indicator at all on a control that is invisible by
   design. Plain :focus is the floor; the :not() block trims it back to
   keyboard-only wherever :focus-visible is understood. */
.ew-pill input[type="radio"]:focus + label {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.ew-pill input[type="radio"]:focus:not(:focus-visible) + label {
  outline: none;
}

/* --- Item 5b: "text photos later" pledge ---------------------------------- */
/* Same hidden-control + styled-label mechanics as the pills, but a checkbox, so
   it carries a box glyph rather than reading as another radio. */
.ew-pledge {
  position: relative;
  display: flex;
  margin: 0 0 22px;
}
.ew-pledge input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.ew-pledge label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 0;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  transition: background-color .2s, border-color .2s, color .2s;
}
.ew-pledge label::before {
  content: "";
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.ew-pledge:hover label {
  border-color: rgba(255, 255, 255, 0.6);
}
.ew-pledge input[type="checkbox"]:checked + label {
  border-color: #fff;
  background: #fff;
  color: #050607;
}
.ew-pledge input[type="checkbox"]:checked + label::before {
  content: "\2713";
  border-color: #050607;
  background: #050607;
  color: #fff;
}
/* Two blocks, never comma-grouped -- see the pills for why. */
.ew-pledge input[type="checkbox"]:focus + label {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.ew-pledge input[type="checkbox"]:focus:not(:focus-visible) + label {
  outline: none;
}

/* --- Item 6: photo attachments -------------------------------------------- */
.ew-file {
  margin-bottom: 22px;
}
.ew-file-inputs {
  display: grid;
  gap: 10px;
}
.ew-file-input {
  display: block;
  width: 100%;
  min-height: 44px;
  color: #fff;
  font: inherit;
}
/* The six native controls are the no-JS and safe-bail baseline. Only after the
   form has fully initialized does the wizard collapse them behind one assisted
   Add photos control. */
.is-wizard .ew-file-inputs {
  position: absolute;
  display: block;
  width: 1px;
  height: 1px;
}
.is-wizard .ew-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
}
/* Tag-qualified: the file button lives inside .ew-field, whose `label` rule is
   (0,1,1) and would otherwise flatten this to a full-width block. */
label.ew-file-button {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 180px;
  margin: 0;
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.is-wizard label.ew-file-button {
  display: inline-flex;
}
label.ew-file-button:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
label.ew-file-button[aria-disabled="true"] {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.58);
  cursor: default;
}
@media (max-width: 600px) {
  label.ew-file-button {
    width: 100%; /* a phone-width tap target beats a shrink-wrapped one */
  }
}
/* Same two-block treatment as the pills: the file input is opacity:0, so the
   label is the only thing that can carry a ring. */
.ew-file-inputs:focus-within + .ew-file-button {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.ew-file-inputs:focus-within:has(.ew-file-input:focus:not(:focus-visible)) + .ew-file-button {
  outline: none;
}
.ew-file-inputs:has(.ew-file-input[aria-invalid="true"]) + .ew-file-button {
  box-shadow: inset 0 0 0 2px var(--core--colors--system--red-400);
}
/* Sits between the Add photos control and the attachment list. */
.ew-photo-tip {
  margin: 10px 0 0;
}
.ew-file-empty {
  display: none;
  margin: 10px 0 0;
  /* 0.45 at 13px was ~4.4:1, just under WCAG 1.4.3 for non-large text. */
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}
.is-wizard .ew-file-empty {
  display: block;
}
/* Bounded on purpose: six attachments would otherwise push the buttons a long
   way down. Past three preview rows the list scrolls inside itself, so the most the
   actions row can ever move is this height. */
.ew-file-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  max-height: 238px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ew-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 74px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.ew-file-preview {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.58);
}
.ew-file-preview::before {
  content: "Photo";
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}
.ew-file-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
}
.ew-file-preview.is-ready::before {
  display: none;
}
.ew-file-preview.is-ready img {
  opacity: 1;
}
.ew-file-meta {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}
.ew-file-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: 14px;
}
.ew-file-size {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}
.ew-file-remove {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.ew-file-remove:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* --- Item 7: actions row (Back / Next / Send) ------------------------------ */
.ew-reassure {
  margin: 28px 0 16px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  line-height: 1.45;
}
.ew-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  /* Collapses against .ew-reassure's 16px bottom margin on step 3, and stands on
     its own on steps 1-2 where the reassurance line is hidden. */
  margin-top: 28px;
}
.ew-actions .ew-next,
.ew-actions .ew-submit {
  order: 1;
  font-family: inherit;
  cursor: pointer;
}
.ew-actions .ew-back {
  order: 2;
  min-height: 48px;
  padding: 12px 26px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.ew-actions .ew-back:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.ew-submit[disabled],
.ew-next[disabled] {
  opacity: 0.55;
  cursor: default;
}

@media (max-width: 600px) {
  /* Primary action full width and on top; Back sits under it, out of the way of
     an accidental thumb. */
  .ew-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .ew-actions .ew-next,
  .ew-actions .ew-submit,
  .ew-actions .ew-back {
    width: 100%;
  }
  /* Below 479px az-collision.css:11843 gives .primary-button
     justify-content: space-between, which shoves this button's lone text node
     against the left edge while the submit <input> next to it stays centred.
     (Harmless to restate above that breakpoint -- .primary-button centres there
     anyway.) */
  .ew-actions .ew-next {
    justify-content: center;
  }
  /* "Continue to vehicle & damage" is the longest label this button ever
     carries, and at the design's 20px it clears a 360px screen by 0.6px --
     which is not clearance, it is luck, and the first device whose font
     rasterises a shade wider wraps the primary CTA onto two lines. 18px buys
     27px of real margin there.

     Scoped to .ew-next alone. The submit button's "Send my request" fits at
     20px with room to spare, and shrinking the one control the whole form is
     aiming at, to fix a label on a different step, would be the wrong trade.
     The two never share a screen -- Next is hidden on step 3 and Submit on
     steps 1-2 -- so the difference is not something anyone can see at once. */
  .ew-actions .ew-next {
    font-size: 18px;
    /* The button's height comes from its padding and line box, so shaving the
       type shrinks the tap target with it -- 16px took it to 46px, under the
       48px floor the Back button next to it already respects. Type size is a
       legibility decision; the thing you have to hit with a thumb is not. */
    min-height: 48px;
  }
}

/* A 320px screen is narrower than the label at any size the CTA can afford:
   the text needs 261px at 20px inside a button only 256px wide, so no amount of
   padding trimming reaches it. 16px is the first size that fits, with 13px to
   spare.

   The cutover is measured, not guessed. Usable width inside this button runs
   about (viewport - 98px), and the 18px label needs 235px, so 18px stops fitting
   at roughly 334px. 345px puts the switch a comfortable step below the common
   360px width and above the 320px class that actually needs the smaller type. */
@media (max-width: 345px) {
  .ew-actions .ew-next {
    font-size: 16px;
  }
}

/* The fixed Call/Text/Directions bar (custom.css:212-245, z-index 995) already
   gets 52px of body padding-bottom under 767px. The last control in the form is
   a button the user is aiming at, so give it a bit more room than the page
   default. */
@media (max-width: 767px) {
  .ew-actions {
    margin-bottom: 24px;
  }
}

/* --- Pledge follow-through CTA (thanks-preview.html) ----------------------- */
.ew-pledge-cta {
  margin: 28px auto 0;
  max-width: 420px;
}
.ew-pledge-cta-button {
  width: 100%;
}
.ew-pledge-cta-hint {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.4;
}

/* --- Item 9: what-happens-next timeline (thanks-preview.html) -------------- */
/* Bottom margin is not decoration: on the live thanks page the card is followed
   by the "Back to the site" button, whose .mg-top-default wrapper resolves to
   margin-top 0 here, so a 0 bottom left the button's pill flush against the
   card's rounded bottom edge -- measured gap exactly 0px at 1440. */
.ew-timeline {
  margin: 36px auto 32px;
  max-width: 420px;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
}
.ew-timeline-title {
  margin: 0 0 16px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* One gap, owned by the list, and nothing else allowed to contribute vertical
   space between rows. Everything inside a row is zeroed so the only number that
   can change the rhythm is this one. */
.ew-timeline-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
/* A row is exactly as tall as its own text.

   The mark is out of flow on purpose. At 26px it is taller than a single 21.75px
   line, so as a flex item it stretched every one-line row by four pixels -- and
   those four pixels sat under the text, which read as a wider gap after the
   short items than after a wrapped one. Absolute takes it out of the height
   calculation entirely, so a one-line row and a three-line row are separated by
   the same 14px. padding-left reserves the 26px mark plus its 12px gutter. */
.ew-timeline-step {
  position: relative;
  margin: 0;
  padding-left: 38px;
}
.ew-timeline-mark {
  position: absolute;
  top: 0; /* the row's first line box starts here, so this is top-aligned */
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.ew-timeline-text {
  display: block;
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  line-height: 1.45;
}
/* Step 1 carries .ew-swap-slot, which reserves two lines further up this sheet
   so the drivable hint can swap at runtime without moving the buttons under it.
   The timeline needs the opposite: its swap is decided before first paint, from
   the query string, so there is never a second state to reserve for -- and the
   reserve was showing as 26px of empty space under a one-line step 1, which is
   the uneven gap. Zeroed here rather than by deleting the generic rule, which
   the drivable hint still depends on. */
.ew-timeline-text.ew-swap-slot {
  min-height: 0;
}
@media (max-width: 767px) {
  .ew-timeline {
    margin-top: 28px;
    padding: 18px 18px;
  }
}

/* --- Item 8: [hidden] must beat the display rules above -------------------- */
/* Every element the wizard toggles carries a class with its own `display`, and
   the UA's [hidden]{display:none} loses to a class. Scoped to .ew-scope so this
   stays a page-local fix rather than a global one. */
.ew-scope [hidden] {
  display: none;
}