/* =============================================================================
   WIZARD V4 — Stitch Design System
   Brand colour controlled entirely by --uw-primary below.
   Each garage overrides this one variable in their Webflow embed.
   ============================================================================= */

/* === ROOT: TENANT COLOUR + STITCH SURFACE TOKENS === */
:root {
  /* ── TENANT BRAND — Stellix Demo (Northgate Motors) ── */
  /* Blue takes every TEXT + BORDER role. Lime is unreadable on white
     (~1.3:1) and is confined to fills only — see --uw-cta below. */
  --uw-primary:             #4396d4;   /* chrome, progress, sidebar, tabs, step labels */
  --uw-primary-dark:        #2e7bb5;   /* darker blue — gradient end */

  /* ── CTA ROLE — lime (fills only, black text on top) ── */
  --uw-cta:                 #d6fd70;
  --uw-cta-dark:            #c5f050;
  --uw-cta-text:            #000000;   /* black text on lime CTAs */

  /* ── LINK ROLE — blue. Lime cannot carry text on white. ── */
  --uw-link:                #4396d4;

  /* ── SURFACE SCALE — light, white-dominant, lavender-tinted greys ── */
  --uw-surface:             #f7f7f7;
  --uw-surface-low:         #f4f4f8;
  --uw-surface-lowest:      #f0f1fa;   /* panel tint behind card groups */
  --uw-surface-mid:         #ebecf3;
  --uw-surface-high:        #e4e4e8;
  --uw-surface-top:         #dcdce2;
  --uw-white:               #ffffff;

  /* ── SELECTED STATE ── */
  --uw-selected-bg:         rgba(67,150,212,0.07);

  /* ── TEXT SCALE ── */
  --uw-on-surface:          #131313;
  --uw-on-variant:          #4a4a4a;
  --uw-on-surface-variant:  #4a4a4a;
  --uw-secondary:           #6b6b6b;
  --uw-outline:             #8a8a90;
  --uw-outline-var:         #d8d9e2;

  /* Border role for resting control edges (add-on cards, tyre cards, table
     rules). Was referenced in 9 places but never defined, which made every
     one of those `border` shorthands invalid at computed-value time — the
     border-style fell back to `none`, so the borders never drew and the
     :hover / .selected rules that only set border-color could never show. */
  --uw-border:              var(--uw-outline-var);

  /* ── SUCCESS / SVG ICONS — blue (ticks read on white) ── */
  --uw-success:             #4396d4;
  --uw-success-bg:          rgba(67,150,212,0.10);

  /* ── ERROR ── */
  --uw-error:               #e53935;
  --uw-error-bg:            #fff8f8;
  --uw-error-bg-alt:        #fff5f5;

  /* ── UK REGISTRATION PLATE — do not override ── */
  --uw-reg-yellow:          #FFD300;
  --uw-reg-blue:            #003399;
  --uw-plate-border:        #1a1a1a;
  --uw-plate-inner:         #000000;
  --uw-flag-bg:             #012169;

  /* ── TYPOGRAPHY — inherits Typekit faces from the host Webflow page ── */
  --uw-font-heading: 'azo-sans-web', 'Poppins', system-ui, sans-serif;
  --uw-font-body:    'neue-haas-grotesk-text', 'Inter', system-ui, sans-serif;

  /* ── LAYOUT ── */
  --uw-sidebar-w:           256px;

  /* ── RGB CHANNELS ── */
  --uw-primary-rgb:         67, 150, 212;
  --uw-cta-rgb:             214, 253, 112;
  --uw-primary-bg:          rgba(67,150,212,0.10);
  --uw-on-surface-rgb:      19, 19, 19;
  --uw-error-rgb:           229, 57, 53;
  --uw-outline-var-rgb:     216, 217, 226;
  --uw-success-rgb:         67, 150, 212;
  --uw-white-rgb:           255, 255, 255;
  --uw-black-rgb:           0, 0, 0;
}


/* === RESET === */
.v4-wrapper *,
.v4-wrapper *::before,
.v4-wrapper *::after { box-sizing: border-box; }
.v4-wrapper h1, .v4-wrapper h2, .v4-wrapper h3, .v4-wrapper h4 { margin: 0; padding: 0; }
.v4-wrapper p { margin: 0; padding: 0; }
.v4-wrapper button { cursor: pointer; font-family: var(--uw-font-body); }
.v4-wrapper a { color: var(--uw-link); text-decoration: none; }
.v4-wrapper a:hover { text-decoration: underline; }

/* === WRAPPER LAYOUT === */
.v4-wrapper {
  display: flex;
  min-height: 600px;
  font-family: var(--uw-font-body);
  color: var(--uw-on-surface);
  background: transparent;
  width: 100%;
}

/* === SIDEBAR === */
.v4-sidebar {
  width: var(--uw-sidebar-w);
  flex-shrink: 0;
  background: var(--uw-surface-low);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  padding-top: 32px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  min-height: 560px;
}

.v4-sidebar-header {
  padding: 0 24px 32px 24px;
}

.v4-sidebar-title {
  font-family: var(--uw-font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--uw-primary);
}

.v4-sidebar-sub {
  font-size: 10px;
  color: var(--uw-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

.v4-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 16px;
}

.v4-sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  color: var(--uw-secondary);
  opacity: 0.5;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: default;
}

.v4-sidebar-item .material-symbols-outlined {
  font-size: 20px;
}

.v4-sidebar-item.active {
  background: var(--uw-white);
  color: var(--uw-primary);
  opacity: 1;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(var(--uw-black-rgb),0.07);
  font-weight: 600;
  border-left: 3px solid var(--uw-primary);
  cursor: default;
}

.v4-sidebar-item.reachable {
  opacity: 1;
  cursor: pointer;
}

.v4-sidebar-item.reachable:hover {
  background: var(--uw-white);
  color: var(--uw-on-surface);
  opacity: 1;
}

.v4-sidebar-item.active.reachable {
  cursor: pointer;
}

.v4-sidebar-item.active.reachable:hover {
  opacity: 0.8;
}

/* === MAIN CONTENT === */
.v4-main {
  flex: 1;
  padding: 48px 52px;
  min-width: 0;
}

/* === STEPS (show/hide) === */
.v4-step { display: none; }
.v4-step.active { display: block; }

/* === PROGRESS BAR === */
.v4-progress { margin-bottom: 40px; }

.v4-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 10px;
}

.v4-progress-phase {
  font-size: 13px;
  font-weight: 700;
  color: var(--uw-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--uw-font-heading);
}

.v4-progress-step {
  font-size: 11px;
  font-weight: 700;
  color: var(--uw-outline);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.v4-progress-track {
  height: 6px;
  background: var(--uw-surface-top);
  border-radius: 999px;
  overflow: hidden;
}

.v4-progress-fill {
  height: 100%;
  background: var(--uw-primary);
  border-radius: 999px;
  transition: width 0.6s ease;
}

/* === STEP HEADER === */
.v4-step-heading {
  font-family: var(--uw-font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--uw-on-surface);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.v4-step-sub {
  font-size: 15px;
  color: var(--uw-secondary);
  margin-bottom: 32px;
  line-height: 1.5;
}

.v4-vehicle-banner {
  font-family: var(--uw-font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--uw-on-surface);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

/* === SERVICE TYPE GRID (Step 1) === */
.v4-type-grid {
  display: grid;
  gap: 20px;
  margin-bottom: 32px;
}
.v4-type-grid-1 { grid-template-columns: 1fr; max-width: 440px; }
.v4-type-grid-2 { grid-template-columns: repeat(2, 1fr); }
.v4-type-grid-3 { grid-template-columns: repeat(3, 1fr); }
.v4-type-grid-4 { grid-template-columns: repeat(2, 1fr); }

.v4-type-card {
  background: var(--uw-white);
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 28px 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(var(--uw-on-surface-rgb),0.04);
}

/* Card with top image — overrides padding so image goes edge-to-edge */
.v4-type-card.v4-type-card-img-top {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.v4-type-card-photo {
  width: 100%;
  height: 190px;
  overflow: hidden;
  flex-shrink: 0;
}

.v4-type-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.v4-type-card-img-top:hover .v4-type-card-photo img {
  transform: scale(1.07);
}

.v4-type-card-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.v4-type-card:hover {
  border-color: var(--uw-outline-var);
  box-shadow: 0 8px 24px rgba(var(--uw-on-surface-rgb),0.08);
  transform: translateY(-2px);
}

.v4-type-card.selected {
  border-color: var(--uw-primary);
  background: var(--uw-selected-bg);
  box-shadow: 0 0 0 4px rgba(var(--uw-primary-rgb),0.08), 0 8px 24px rgba(var(--uw-on-surface-rgb),0.08);
}

.v4-type-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--uw-surface-low);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.v4-type-icon-wrap .material-symbols-outlined {
  font-size: 22px;
  color: var(--uw-primary);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.v4-type-card.selected .v4-type-icon-wrap {
  background: var(--uw-primary);
}

.v4-type-card.selected .v4-type-icon-wrap .material-symbols-outlined {
  color: var(--uw-white);
}

.v4-type-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--uw-outline);
}

.v4-type-title {
  font-family: var(--uw-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--uw-on-surface);
  line-height: 1.2;
}

.v4-type-desc {
  font-size: 13px;
  color: var(--uw-secondary);
  line-height: 1.55;
  flex: 1;
}

.v4-type-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--uw-primary);
  margin-top: 8px;
  cursor: pointer;
  width: fit-content;
}

.v4-type-cta:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.v4-type-cta .material-symbols-outlined {
  font-size: 16px;
  transition: transform 0.15s ease;
}

.v4-type-cta:hover .material-symbols-outlined {
  transform: translateX(3px);
}

/* === REG PLATE (Step 2) === */
.v4-reg-section {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.v4-reg-plate-wrap {
  margin: 32px auto;
  max-width: 400px;
}

.v4-reg-plate {
  background: var(--uw-reg-yellow);
  border: 6px solid var(--uw-plate-border);
  border-radius: 12px;
  display: flex;
  align-items: stretch;
  height: 96px;
  overflow: hidden;
  box-shadow:
    0 2px 0 var(--uw-plate-inner) inset,
    0 -1px 0 rgba(var(--uw-white-rgb),0.15) inset,
    0 6px 18px rgba(var(--uw-on-surface-rgb),0.18),
    0 2px 6px rgba(var(--uw-on-surface-rgb),0.10);
}

.v4-reg-flag {
  background: var(--uw-flag-bg);
  width: 52px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 7px;
  flex-shrink: 0;
}

.v4-reg-flag-union-jack {
  width: 34px;
  height: 22px;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

.v4-reg-flag-union-jack svg {
  width: 100%;
  height: 100%;
  display: block;
}

.v4-reg-flag-gb {
  font-size: 10px;
  font-weight: 900;
  color: var(--uw-white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--uw-font-body);
}

.v4-reg-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Oswald', sans-serif;
  font-size: 52px;
  font-weight: 600;
  letter-spacing: 6px;
  text-align: center;
  color: var(--uw-on-surface);
  text-transform: uppercase;
  padding: 0 12px;
  width: 100%;
}

.v4-reg-input::placeholder {
  color: rgba(var(--uw-on-surface-rgb),0.25);
}

.v4-reg-tagline {
  font-size: 12px;
  color: var(--uw-secondary);
  margin-top: 32px;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

/* Trust badge GRID (3 cards — matches Stitch 2._registration_lookup) */
.v4-reg-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 36px;
  margin-bottom: 12px;
}

.v4-reg-trust-card {
  background: var(--uw-surface-low);
  border-radius: 16px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.v4-reg-trust-icon {
  width: 44px;
  height: 44px;
  background: var(--uw-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(var(--uw-on-surface-rgb),0.06);
  flex-shrink: 0;
}

.v4-reg-trust-icon .material-symbols-outlined {
  font-size: 20px;
  color: var(--uw-success);       /* green = verified data source (trust signal) */
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.v4-reg-trust-title {
  font-family: var(--uw-font-heading);
  font-weight: 700;
  font-size: 13px;
  color: var(--uw-on-surface);
}

.v4-reg-trust-desc {
  font-size: 11px;
  color: var(--uw-secondary);
  line-height: 1.5;
}

/* === VEHICLE CONFIRMATION (Step 3) — 12-col bento layout === */
.v4-vehicle-bento {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 24px;
  margin-bottom: 32px;
  align-items: start;
}

.v4-vehicle-plate-panel {
  background: var(--uw-surface-low);
  border-radius: 16px;
  padding: 40px;
}

.v4-vehicle-plate-big {
  display: flex;
  align-items: stretch;
  background: var(--uw-reg-yellow);
  border: 3px solid var(--uw-on-surface);
  border-radius: 8px;
  height: 88px;
  overflow: hidden;
  margin-bottom: 28px;
  box-shadow: 0 4px 16px rgba(var(--uw-on-surface-rgb),0.12);
}

.v4-vehicle-plate-big .v4-reg-flag {
  width: 44px;
  padding: 10px 0;
}

.v4-vehicle-plate-text {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-size: 52px;
  font-weight: 600;
  letter-spacing: 5px;
  color: var(--uw-on-surface);
  text-transform: uppercase;
}

.v4-vehicle-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.v4-vehicle-stat-card {
  background: var(--uw-white);
  border-radius: 12px;
  padding: 18px 14px;
  border: 1px solid rgba(var(--uw-outline-var-rgb),0.2);
}

.v4-vehicle-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--uw-outline);
  margin-bottom: 6px;
}

.v4-vehicle-stat-value {
  font-family: var(--uw-font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--uw-on-surface);
}

/* Right specs panel */
.v4-vehicle-specs-panel {
  background: var(--uw-surface-low);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 16px;
}

.v4-vehicle-specs-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--uw-outline);
  margin-bottom: 16px;
}

.v4-vehicle-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--uw-outline-var-rgb),0.2);
}

.v4-vehicle-spec-row:last-child { border-bottom: none; }

.v4-vehicle-spec-key {
  font-size: 12px;
  color: var(--uw-secondary);
  font-weight: 500;
}

.v4-vehicle-spec-val {
  font-family: var(--uw-font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--uw-on-surface);
}

.v4-mot-expired {
  color: var(--uw-error) !important;
}

/* === IMAGE PLACEHOLDERS === */
.v4-sidebar-img-wrap {
  width: 100%;
  height: 180px;
  border-radius: 12px;
  margin-top: 16px;
  overflow: hidden;
  flex-shrink: 0;
}

.v4-sidebar-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Keep placeholder style for any remaining dev slots */
.v4-image-placeholder {
  width: 100%;
  height: 160px;
  background: var(--uw-on-surface);
  border-radius: 12px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.v4-image-placeholder span {
  color: rgba(var(--uw-white-rgb),0.4);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0 20px;
  line-height: 1.6;
}

/* === SERVICE TABS (pill strip — matches Stitch) === */
.v4-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--uw-surface-low);
  border-radius: 999px;
  width: fit-content;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.v4-tab {
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--uw-on-variant);
  transition: all 0.2s;
  cursor: pointer;
}

.v4-tab:hover {
  color: var(--uw-on-surface);
}

.v4-tab.active {
  background: var(--uw-white);
  color: var(--uw-primary);
  font-weight: 700;
  box-shadow: 0 1px 6px rgba(var(--uw-on-surface-rgb),0.1);
}

/* === STEP 4: 12-COL GRID === */
.v4-12grid {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 48px;
  align-items: start;
}

.v4-col-main { min-width: 0; }

/* === SERVICING CARDS === */
.v4-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.v4-service-card {
  background: var(--uw-surface-low);
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.v4-service-card:hover {
  background: var(--uw-white);
  border-color: var(--uw-outline-var);
}

.v4-card-photo {
  margin: -24px -24px 16px;
  height: 160px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 12px 12px 0 0;
}
.v4-card-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.v4-service-card:hover .v4-card-photo img { transform: scale(1.04); }

.v4-service-card.selected {
  background: var(--uw-selected-bg);
  border-color: var(--uw-primary);   /* solid primary — removes ambiguity of semi-transparent border */
  box-shadow: 0 4px 20px rgba(var(--uw-on-surface-rgb),0.08);
}

.v4-card-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--uw-primary);
  color: var(--uw-white);
  font-size: 9px;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: none;
  white-space: nowrap;
}

.v4-service-card.selected .v4-card-badge { display: block; }

.v4-card-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--uw-secondary);
  margin-bottom: 4px;
}

.v4-card-point-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--uw-secondary);
  margin-bottom: 8px;
}

.v4-service-card.selected .v4-card-eyebrow {
  color: var(--uw-primary);
}

.v4-card-name {
  font-family: var(--uw-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--uw-on-surface);
  margin-bottom: 8px;
}

.v4-card-desc {
  font-size: 13px;
  color: var(--uw-secondary);
  line-height: 1.55;
  margin-bottom: 16px;
  flex: 1;
}

.v4-svc-subtitle {
  font-size: 11px;
  font-weight: 600;
  color: var(--uw-secondary);
  margin: 2px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.v4-svc-features {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 16px;
  flex: 1;
}
.v4-svc-feature {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--uw-secondary);
}
.v4-svc-feature .material-symbols-outlined {
  font-size: 14px;
  color: var(--uw-success);
  flex-shrink: 0;
}

.v4-card-price {
  font-family: var(--uw-font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--uw-primary);
  line-height: 1;
}

.v4-card-vat {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--uw-secondary);
  margin-top: 4px;
  margin-bottom: 16px;
}

/* Servicing: radio circle selection indicator */
.v4-service-card-radio {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--uw-outline-var);
  transition: all 0.15s;
  flex-shrink: 0;
}

.v4-service-card.selected .v4-service-card-radio {
  border-color: var(--uw-primary);
  background: var(--uw-primary);
  box-shadow: inset 0 0 0 3px var(--uw-white);
}

/* === WHAT'S INCLUDED SECTION === */
.v4-includes {
  background: var(--uw-surface-low);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 32px;
}

.v4-includes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin-bottom: 0;
}

.v4-includes-title {
  font-family: var(--uw-font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--uw-on-surface);
}

.v4-includes-toggle-icon {
  font-size: 24px;
  color: var(--uw-primary);
  transition: transform 0.2s;
}

.v4-includes-toggle-icon.open {
  transform: rotate(180deg);
}

.v4-includes-body {
  display: none;
  margin-top: 24px;
}

.v4-includes-body.open {
  display: block;
}

.v4-includes-level {
  margin-bottom: 24px;
}

.v4-includes-level:last-of-type {
  margin-bottom: 0;
}

.v4-includes-level-header {
  font-family: var(--uw-font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--uw-primary);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--uw-surface-mid);
}

/* Description paragraph inside diagnostics includes sections */
.v4-diag-includes-desc {
  font-size: 13px;
  color: var(--uw-secondary);
  line-height: 1.6;
  margin: 10px 0 0;
}

.v4-includes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 40px;
  margin-top: 16px;
}

.v4-include-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.v4-include-item .material-symbols-outlined {
  font-size: 16px;
  color: var(--uw-success);       /* green = "this is included" — universal feature-tick signal */
  flex-shrink: 0;
  margin-top: 1px;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.v4-include-text { font-size: 13px; font-weight: 500; color: var(--uw-on-variant); }
.v4-include-text-bold { color: var(--uw-primary); }
.v4-include-sub { font-size: 12px; color: var(--uw-secondary); margin-top: 2px; line-height: 1.4; }

.v4-guarantee-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--uw-surface-top);
  font-size: 13px;
  font-weight: 600;
  color: var(--uw-on-surface);
}

.v4-guarantee-row .material-symbols-outlined {
  font-size: 18px;
  color: var(--uw-success);       /* green = guarantee/verified — distinct from brand orange */
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* === SERVICING COMPARISON TABLE (inside "What's included?" accordion) === */
.v4-comp-header-row {
  display: grid; grid-template-columns: 1fr 68px 68px 68px;
  padding-bottom: 10px; border-bottom: 2px solid var(--uw-border);
}
.v4-comp-tier-label {
  text-align: center; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--uw-secondary);
}
.v4-comp-row {
  display: grid; grid-template-columns: 1fr 68px 68px 68px;
  align-items: center; padding: 8px 0;
  border-bottom: 1px solid var(--uw-surface-mid);
  font-size: 13px; font-weight: 500; color: var(--uw-on-variant);
}
.v4-comp-row:last-child { border-bottom: none; }
.v4-comp-cell {
  display: flex; justify-content: center; align-items: center;
}
.v4-comp-cell .material-symbols-outlined {
  font-size: 18px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.v4-comp-yes .material-symbols-outlined { color: var(--uw-success); }
.v4-comp-no .material-symbols-outlined { color: #d0d3da; }

/* === SERVICING CARD PREVIEW (6 bullet points shown on the card face) === */
.v4-card-preview { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.v4-card-preview-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--uw-on-variant); line-height: 1.3;
}
.v4-card-preview-item .material-symbols-outlined {
  font-size: 14px; color: var(--uw-success); flex-shrink: 0;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* === SERVICING CHECKLIST EXPAND BUTTON === */
.v4-checklist-btn {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; margin-top: 12px; padding: 9px 0;
  background: none; border: 1.5px solid var(--uw-outline-var);
  border-radius: 8px; font-size: 12px; font-weight: 700;
  color: var(--uw-secondary); cursor: pointer; transition: all 0.15s;
  font-family: var(--uw-font-body);
}
.v4-checklist-btn .material-symbols-outlined { font-size: 15px; transition: transform 0.2s; }
.v4-checklist-btn:hover { border-color: var(--uw-primary); color: var(--uw-primary); }
.v4-service-card.active .v4-checklist-btn {
  background: rgba(var(--uw-primary-rgb), 0.06);
  border-color: var(--uw-primary); color: var(--uw-primary);
}
.v4-service-card.active .v4-checklist-btn .material-symbols-outlined { transform: rotate(180deg); }

/* === FULL-WIDTH SERVICING CHECKLIST PANEL (v4-cl-*) === */
/* Used by section-servicing.html embeds and any future widget servicing panels.
   Pattern: one open panel at a time, toggled by ssToggle(). */
.v4-cl-panel {
  display: none; background: var(--uw-surface-low);
  border-radius: 16px; margin-bottom: 32px; overflow: hidden;
}
.v4-cl-panel.open { display: block; }

.v4-cl-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 28px; background: var(--uw-white);
  border-bottom: 2px solid var(--uw-primary);
}
.v4-cl-panel-title {
  font-family: var(--uw-font-heading); font-size: 16px;
  font-weight: 700; color: var(--uw-on-surface);
}
.v4-cl-panel-title span { color: var(--uw-primary); }

.v4-cl-close {
  display: flex; align-items: center; gap: 4px; padding: 7px 14px;
  background: var(--uw-surface-low); border: 1.5px solid var(--uw-outline-var);
  border-radius: 999px; font-size: 12px; font-weight: 700;
  color: var(--uw-secondary); cursor: pointer; font-family: var(--uw-font-body);
  transition: all 0.15s;
}
.v4-cl-close:hover { border-color: var(--uw-on-surface); color: var(--uw-on-surface); }
.v4-cl-close .material-symbols-outlined { font-size: 14px; }

.v4-cl-body { padding: 24px 28px 28px; }

.v4-cl-section { margin-bottom: 20px; }
.v4-cl-section:last-of-type { margin-bottom: 0; }
.v4-cl-section-header {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--uw-primary);
  padding-bottom: 8px; border-bottom: 1px solid var(--uw-surface-mid);
  margin-bottom: 8px;
}

.v4-cl-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px 16px;
}
@media (max-width: 900px) { .v4-cl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .v4-cl-grid { grid-template-columns: 1fr; } }

.v4-cl-item {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12px; line-height: 1.35; padding: 3px 0;
}
.v4-cl-item .material-symbols-outlined {
  font-size: 14px; flex-shrink: 0; margin-top: 1px;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.v4-cl-yes { color: var(--uw-on-variant); }
.v4-cl-yes .material-symbols-outlined { color: var(--uw-success); }
.v4-cl-no { color: #b0b5bf; }
.v4-cl-no .material-symbols-outlined { color: #d0d3da; }

.v4-cl-guarantee {
  display: flex; align-items: center; gap: 8px; margin-top: 20px;
  padding-top: 16px; border-top: 1px solid var(--uw-surface-top);
  font-size: 13px; font-weight: 600; color: var(--uw-on-surface);
}
.v4-cl-guarantee .material-symbols-outlined {
  font-size: 18px; color: var(--uw-success);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.v4-cl-footer { display: flex; justify-content: center; padding: 16px 28px 24px; }
.v4-cl-footer-close {
  display: flex; align-items: center; gap: 5px; padding: 10px 24px;
  background: var(--uw-surface-mid); border: none; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--uw-secondary);
  cursor: pointer; font-family: var(--uw-font-body); transition: all 0.15s;
}
.v4-cl-footer-close:hover { background: var(--uw-surface-top); color: var(--uw-on-surface); }
.v4-cl-footer-close .material-symbols-outlined { font-size: 16px; }

/* === REPAIR CATEGORY CARDS === */
.v4-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.v4-cat-card {
  background: var(--uw-surface-low);
  border-radius: 12px;
  padding: 18px 16px 16px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.v4-cat-card:hover {
  background: var(--uw-white);
  box-shadow: 0 4px 16px rgba(var(--uw-on-surface-rgb),0.07);
}

.v4-cat-card.selected {
  background: var(--uw-selected-bg);
  outline: 2px solid var(--uw-primary);
  box-shadow: 0 4px 20px rgba(var(--uw-on-surface-rgb),0.09);
}

.v4-cat-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 22px;
  height: 22px;
  background: var(--uw-primary);
  border-radius: 11px;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--uw-font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--uw-white);
  padding: 0 5px;
  line-height: 1;
}

.v4-cat-badge.has-count { display: flex; }

.v4-cat-icon {
  margin-bottom: 10px;
}

.v4-cat-icon .material-symbols-outlined {
  font-size: 28px;
  color: var(--uw-secondary);
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.v4-cat-card.selected .v4-cat-icon .material-symbols-outlined {
  color: var(--uw-primary);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.v4-cat-name {
  font-family: var(--uw-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--uw-on-surface);
  margin-bottom: 5px;
}

.v4-cat-best-for {
  font-family: var(--uw-font-body);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--uw-secondary);
  line-height: 1.4;
  margin-bottom: 8px;
}

.v4-cat-hints {
  font-family: var(--uw-font-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--uw-secondary);
  opacity: 0.75;
  line-height: 1.4;
  margin-top: auto;
}

.v4-cat-card.selected .v4-cat-best-for,
.v4-cat-card.selected .v4-cat-hints {
  color: var(--uw-on-surface);
}

.v4-cat-chevron {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 18px;
  color: var(--uw-secondary);
  opacity: 0.45;
  transition: transform 0.2s, opacity 0.2s, color 0.2s;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
  pointer-events: none;
}
.v4-cat-card.selected .v4-cat-chevron {
  transform: rotate(180deg);
  color: var(--uw-primary);
  opacity: 1;
}

/* === REPAIR SUB-SERVICES SECTION (combined on same page) === */
/* === REPAIRS SIDEBAR CHIPS === */
.v4-repair-chips {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v4-repair-chips.v4-repair-chips-empty {
  display: none;
}

.v4-repair-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--uw-surface-lowest);
  border: 1px solid rgba(var(--uw-primary-rgb),0.15);
  border-radius: 8px;
  padding: 6px 8px 6px 10px;
  gap: 8px;
}

.v4-repair-chip-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.v4-repair-chip-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--uw-on-surface);
  line-height: 1.3;
}

.v4-repair-chip-positions {
  font-size: 11px;
  font-weight: 400;
  color: var(--uw-primary);
  line-height: 1.2;
}

.v4-repair-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  color: var(--uw-secondary);
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}

.v4-repair-chip-remove:hover {
  color: var(--uw-error);
  background: rgba(var(--uw-error-rgb),0.08);
}

.v4-repair-chip-remove .material-symbols-outlined {
  font-size: 14px;
}

.v4-repair-quote-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  font-weight: 400;
  color: var(--uw-secondary);
  line-height: 1.5;
  background: var(--uw-surface-low);
  border-radius: 10px;
  padding: 12px;
  margin-top: 14px;
}

.v4-repair-quote-note .material-symbols-outlined {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--uw-primary);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* === REPAIR SUB-SECTION === */
.v4-repair-sub-section {
  background: var(--uw-surface-low);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 28px;
}

.v4-repair-row-panel {
  grid-column: 1 / -1;
  background: var(--uw-surface-low);
  border-radius: 16px;
  padding: 28px;
  animation: uwPanelIn 0.2s ease;
}

@keyframes uwPanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.v4-repair-sub-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.v4-repair-sub-title {
  font-family: var(--uw-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--uw-on-surface);
  margin-bottom: 4px;
}

.v4-repair-sub-sub {
  font-size: 13px;
  color: var(--uw-secondary);
}

.v4-repair-active-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--uw-primary);
  background: rgba(var(--uw-primary-rgb),0.08);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.v4-svc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.v4-svc-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--uw-white);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
}

.v4-svc-item:hover {
  box-shadow: 0 2px 12px rgba(var(--uw-on-surface-rgb),0.07);
  transform: translateX(2px);
}

.v4-svc-item.selected {
  border-color: var(--uw-primary);
  background: var(--uw-selected-bg);
  box-shadow: 0 2px 12px rgba(var(--uw-on-surface-rgb),0.07);
}

.v4-svc-checkbox {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 2px solid var(--uw-outline-var);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.v4-svc-item.selected .v4-svc-checkbox {
  background: var(--uw-primary);
  border-color: var(--uw-primary);
}

.v4-svc-checkbox .material-symbols-outlined {
  font-size: 14px;
  color: var(--uw-white);
  display: none;
  font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20;
}

.v4-svc-item.selected .v4-svc-checkbox .material-symbols-outlined { display: block; }

.v4-svc-item-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.v4-svc-item-icon .material-symbols-outlined {
  font-size: 22px;
  color: var(--uw-secondary);
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.v4-svc-item.selected .v4-svc-item-icon .material-symbols-outlined {
  color: var(--uw-primary);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.v4-svc-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--uw-on-surface);
}

.v4-svc-poa {
  font-family: var(--uw-font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--uw-secondary);
  flex-shrink: 0;
}

/* === BRAKE POSITION SELECTOR === */
.v4-brake-positions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 12px 18px 14px 72px;
  background: var(--uw-surface-low);
  margin: -10px 0 10px;
  border-radius: 0 0 12px 12px;
}

.v4-brake-pos-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--uw-white);
  border-radius: 8px;
  border: 1.5px solid var(--uw-outline-var);
  font-size: 12px;
  font-weight: 600;
  color: var(--uw-secondary);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--uw-font-body);
}

.v4-brake-pos-btn.active {
  border-color: var(--uw-primary);
  color: var(--uw-primary);
  background: rgba(var(--uw-primary-rgb),0.05);
}

.v4-brake-pos-check {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1.5px solid currentColor;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
}

/* === DIAGNOSTICS HORIZONTAL CARDS (matches Stitch 4._diagnostics_selection) === */
.v4-diag-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.v4-diag-card {
  background: var(--uw-surface-low);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.v4-diag-card:hover {
  background: var(--uw-white);
  border-color: var(--uw-outline-var);
}

.v4-diag-card-photo {
  margin: -28px -28px 0;
  height: 160px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 14px 14px 0 0;
}
.v4-diag-card-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.v4-diag-card:hover .v4-diag-card-photo img { transform: scale(1.04); }

.v4-diag-card-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 20px;
}

.v4-diag-card.selected {
  background: var(--uw-selected-bg);
  border-color: var(--uw-primary);   /* solid border — unambiguous selection */
  box-shadow: 0 4px 20px rgba(var(--uw-on-surface-rgb),0.08);
}

.v4-diag-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--uw-surface-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.v4-diag-card-icon .material-symbols-outlined {
  font-size: 28px;
  color: var(--uw-secondary);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.v4-diag-card.selected .v4-diag-card-icon {
  background: rgba(var(--uw-primary-rgb),0.08);
}

.v4-diag-card.selected .v4-diag-card-icon .material-symbols-outlined {
  color: var(--uw-primary);
}

.v4-diag-card-content { flex: 1; }

.v4-diag-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 16px;
}

.v4-diag-card-name {
  font-family: var(--uw-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--uw-on-surface);
}

.v4-diag-card-price {
  font-family: var(--uw-font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--uw-primary);
  flex-shrink: 0;
}

.v4-diag-card-desc {
  font-size: 13px;
  color: var(--uw-secondary);
  line-height: 1.5;
  margin-bottom: 14px;
}

.v4-diag-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.v4-diag-feature-chip {
  background: var(--uw-surface-mid);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--uw-secondary);
}

.v4-diag-card-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--uw-outline-var);
  flex-shrink: 0;
  transition: all 0.15s;
  align-self: center;
}

.v4-diag-card.selected .v4-diag-card-radio {
  border-color: var(--uw-primary);
  background: var(--uw-primary);
  box-shadow: inset 0 0 0 3px var(--uw-white);
}

.v4-diag-recommended-badge {
  position: absolute;
  top: -11px;
  right: 24px;
  background: var(--uw-primary);
  color: var(--uw-white);
  font-size: 9px;
  font-weight: 800;
  padding: 3px 14px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: none;
}

.v4-diag-card.selected .v4-diag-recommended-badge { display: block; }

/* === INSPECTION TIER CARDS (stacked — matches Stitch 4._inspection_tiers) === */
.v4-insp-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 28px;
}

.v4-insp-card {
  background: var(--uw-white);
  border-radius: 16px;
  padding: 28px 32px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.v4-insp-card:hover {
  border-color: var(--uw-outline-var);  /* neutral hover — primary reserved for confirmed selection */
}

.v4-insp-card-photo {
  margin: -28px -32px 20px;
  height: 160px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 14px 14px 0 0;
}
.v4-insp-card-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.v4-insp-card:hover .v4-insp-card-photo img { transform: scale(1.04); }

.v4-insp-card.selected {
  background: var(--uw-selected-bg);
  border-color: var(--uw-primary);      /* solid — no opacity ambiguity */
  box-shadow: 0 8px 28px rgba(var(--uw-on-surface-rgb),0.09);
}

.v4-insp-best-value-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--uw-primary);
  color: var(--uw-white);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 32px;
  transform: rotate(45deg) translate(28%, -4px);
  transform-origin: top right;
}

.v4-insp-card-inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.v4-insp-card-left { flex: 1; }

.v4-insp-card-icon-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.v4-insp-card-icon .material-symbols-outlined {
  font-size: 24px;
  color: var(--uw-primary);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.v4-insp-card-name {
  font-family: var(--uw-font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--uw-on-surface);
}

.v4-insp-card-desc {
  font-size: 13px;
  color: var(--uw-secondary);
  margin-bottom: 20px;
  line-height: 1.5;
}

.v4-insp-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.v4-insp-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--uw-on-surface);
}

.v4-insp-feature .material-symbols-outlined {
  font-size: 18px;
  color: var(--uw-success);       /* green = feature included in this inspection tier */
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  flex-shrink: 0;
}

.v4-insp-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  min-width: 140px;
}

.v4-insp-price-label {
  font-size: 11px;
  color: var(--uw-secondary);
  text-align: right;
}

.v4-insp-price {
  font-family: var(--uw-font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--uw-primary);
  text-align: right;
  line-height: 1;
}

/* Inspection: radio circle selection indicator */
.v4-insp-card-radio {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--uw-outline-var);
  flex-shrink: 0;
  transition: all 0.15s;
}

.v4-insp-card.selected .v4-insp-card-radio {
  border-color: var(--uw-primary);
  background: var(--uw-primary);
  box-shadow: inset 0 0 0 3px var(--uw-white);
}

/* Tier card subtitle (Essential vehicle check / Everything in Basic, plus: etc.) */
.v4-insp-card-subtitle {
  font-size: 12px;
  color: var(--uw-secondary);
  font-weight: 500;
  margin-top: 2px;
}

/* === INSPECTION EXPANDABLE CHECKLIST === */
.v4-insp-checklist-section {
  margin-top: 28px;
}

.v4-insp-checklist-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1.5px solid var(--uw-outline-var);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--uw-primary);
  cursor: pointer;
  font-family: var(--uw-font-body);
  transition: background 0.2s, border-color 0.2s;
}

.v4-insp-checklist-toggle:hover {
  background: var(--uw-surface-low);
  border-color: var(--uw-primary);
}

.v4-insp-checklist-toggle .material-symbols-outlined {
  font-size: 18px;
  transition: transform 0.2s;
}

.v4-insp-checklist-wrap {
  display: none;
  margin-top: 16px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--uw-surface-mid);
}

.v4-insp-checklist-wrap.open {
  display: block;
}

.v4-insp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.v4-insp-th {
  background: var(--uw-surface-low);
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  color: var(--uw-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--uw-surface-mid);
  position: sticky;
  top: 0;
}

.v4-insp-th-tier {
  text-align: center;
  width: 80px;
}

.v4-insp-section-row td {
  background: var(--uw-surface-low);
  padding: 8px 14px;
  font-weight: 700;
  font-size: 12px;
  color: var(--uw-on-surface);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--uw-surface-mid);
}

.v4-insp-row:hover td {
  background: var(--uw-surface);
}

.v4-insp-td {
  padding: 9px 14px;
  color: var(--uw-on-surface);
  border-bottom: 1px solid var(--uw-surface-low);
  vertical-align: middle;
}

.v4-insp-td-c {
  text-align: center;
  width: 80px;
}

.v4-insp-tick {
  font-size: 16px;
  color: var(--uw-success);       /* green = "included in this tier" — scannable at a glance */
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  vertical-align: middle;
}

.v4-insp-dash {
  color: var(--uw-secondary);
  opacity: 0.4;
  font-size: 14px;
}

/* === STEP 4 SUMMARY SIDEBAR === */
.v4-step4-sidebar {
  position: sticky;
  top: 32px;
}

.v4-summary-card {
  background: var(--uw-white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(var(--uw-on-surface-rgb),0.06);
  border: 1px solid rgba(var(--uw-outline-var-rgb),0.15);
}

.v4-summary-stripe {
  height: 4px;
  background: linear-gradient(135deg, var(--uw-primary) 0%, var(--uw-primary-dark) 100%);
}

.v4-summary-inner { padding: 24px 28px; }

.v4-summary-heading {
  font-family: var(--uw-font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--uw-on-surface);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--uw-surface-mid);
}

.v4-summary-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.v4-summary-icon-chip {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--uw-surface-high);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.v4-summary-icon-chip .material-symbols-outlined {
  font-size: 20px;
  color: var(--uw-primary);
}

.v4-summary-row-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--uw-outline);
  margin-bottom: 3px;
}

.v4-summary-row-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--uw-on-surface);
}

.v4-change-reg-link {
  background: none;
  border: none;
  padding: 0;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--uw-secondary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  display: block;
  text-align: left;
  transition: color 0.15s;
}

.v4-change-reg-link:hover {
  color: var(--uw-primary);
}

.v4-summary-price-block {
  background: var(--uw-surface-low);
  border-radius: 12px;
  padding: 20px;
  margin-top: 8px;
}

.v4-summary-price-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--uw-secondary);
  margin-bottom: 4px;
}

.v4-summary-price-value {
  font-family: var(--uw-font-heading);
  font-size: 26px;
  font-weight: 600;
  color: var(--uw-primary);
  line-height: 1;
}

.v4-summary-price-vat {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--uw-secondary);
  margin-top: 4px;
}

.v4-price-lock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--uw-success);          /* green = "price is guaranteed/locked" */
  background: var(--uw-success-bg);  /* mint bg — success semantic */
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 12px;
}

.v4-price-lock .material-symbols-outlined {
  font-size: 16px;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* === NAVIGATION BUTTONS === */
.v4-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
  padding-top: 16px;
}

.v4-nav-right { justify-content: flex-end; }

.v4-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  font-family: var(--uw-font-body);
  transition: all 0.2s;
  text-decoration: none;
}

.v4-btn .material-symbols-outlined { font-size: 18px; }

.v4-btn-primary {
  background: linear-gradient(135deg, var(--uw-cta) 0%, var(--uw-cta-dark) 100%);
  color: var(--uw-cta-text);
  box-shadow: 0 4px 16px rgba(var(--uw-cta-rgb),0.3);
}

.v4-btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(var(--uw-cta-rgb),0.4);
}

.v4-btn-ghost {
  background: none;
  color: var(--uw-secondary);
  border: none;
}

.v4-btn-ghost:hover {
  background: var(--uw-surface-low);
  color: var(--uw-on-surface);
}

.v4-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* === SPINNER === */
.v4-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  /* Ink, not white. This spinner renders in two places — inside a lime CTA
     and inside .v4-loading-wrap on the #f7f7f7 ground — and a white ring is
     invisible on both, so every loading state was a spinning nothing with
     only its label doing the work. currentColor inherits the ink of whatever
     it sits in, so it stays visible on lime and on the page ground alike. */
  border: 3px solid rgba(var(--uw-on-surface-rgb),0.22);
  border-radius: 50%;
  border-top-color: currentColor;
  animation: v4spin 0.75s linear infinite;
  vertical-align: middle;
}

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

/* === SKELETON LOADING === */
.v4-skeleton {
  background: var(--uw-surface-high);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.v4-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--uw-white-rgb),0.6) 50%, transparent 100%);
  animation: v4shimmer 1.4s infinite;
}

@keyframes v4shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.v4-loading-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 32px 0 24px; font-size: 14px; color: var(--uw-secondary); }
.v4-skeleton-reg { height: 72px; width: 240px; margin: 40px auto 24px; border-radius: 6px; }
.v4-skeleton-row { height: 16px; margin-bottom: 12px; border-radius: 6px; }
.v4-skeleton-row.w-short { width: 55%; }
.v4-skeleton-row.w-med { width: 75%; }
.v4-skeleton-row.w-full { width: 100%; }
.v4-skeleton-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 420px; margin: 0 auto; }

/* === ERRORS === */
.v4-error {
  color: var(--uw-error);
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
  display: none;
}

/* === CONTACT STEP: ASYMMETRIC GRID === */
.v4-asym-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 3.5rem;
  align-items: start;
}

/* === FORM SECTIONS === */
.v4-form-section {
  background: var(--uw-surface-low);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 20px;
}

.v4-form-section-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
}

.v4-form-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--uw-primary);
  color: var(--uw-white);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--uw-font-heading);
}

.v4-form-section-title {
  font-family: var(--uw-font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--uw-on-surface);
}

.v4-form-section-sub {
  font-size: 13px;
  color: var(--uw-secondary);
  margin-top: 2px;
}

.v4-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.v4-field-full { margin-bottom: 18px; }

.v4-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--uw-on-variant);
  margin-bottom: 8px;
}

.v4-input {
  width: 100%;
  height: 52px;
  background: var(--uw-white);
  border: 0;
  border-radius: 10px;
  padding: 0 16px;
  font-size: 15px;
  font-family: var(--uw-font-body);
  color: var(--uw-on-surface);
  transition: box-shadow 0.2s;
  outline: none;
}

.v4-input::placeholder { color: var(--uw-outline-var); }
.v4-input:focus { box-shadow: 0 0 0 3px rgba(var(--uw-primary-rgb),0.14); }
.v4-input.invalid { box-shadow: 0 0 0 3px rgba(var(--uw-error-rgb),0.18) !important; background: var(--uw-error-bg); }

textarea.v4-input {
  height: auto;
  padding-top: 14px;
  padding-bottom: 14px;
  resize: vertical;
  min-height: 100px;
}

.v4-input[type="date"] { cursor: pointer; }

/* === TIME TOGGLE === */
.v4-time-toggle {
  display: flex;
  gap: 8px;
}

.v4-time-btn {
  flex: 1;
  height: 52px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--uw-white);
  color: var(--uw-secondary);
  font-family: var(--uw-font-body);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
}

.v4-time-btn:hover { border-color: var(--uw-outline-var); color: var(--uw-on-surface); }

.v4-time-btn.active {
  background: var(--uw-primary);
  border-color: var(--uw-primary);
  color: var(--uw-white);
  font-weight: 600;
}

.v4-time-toggle.v4-time-toggle-invalid .v4-time-btn:not(.active) {
  border-color: var(--uw-error);
  background: var(--uw-error-bg-alt);
}

.v4-mechanic-note {
  font-size: 12px;
  color: var(--uw-secondary);
  font-style: italic;
  margin-top: 14px;
  line-height: 1.5;
}

/* === CONTACT SUMMARY SIDEBAR === */
.v4-contact-summary-col {
  position: relative;
}

.v4-contact-summary {
  position: sticky;
  top: 32px;
  background: var(--uw-white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(var(--uw-on-surface-rgb),0.07);
  border: 1px solid rgba(var(--uw-outline-var-rgb),0.12);
}

.v4-contact-summary-inner { padding: 32px; }

.v4-contact-summary-title {
  font-family: var(--uw-font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--uw-on-surface);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.v4-guarantee-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: var(--uw-success-bg);  /* mint green bg — "verified" semantic */
  color: var(--uw-success);           /* forest green — 5.36:1 on success-bg */
  border-radius: 999px;
  padding: 5px 10px;
}

.v4-guarantee-badge .material-symbols-outlined {
  font-size: 14px;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.v4-contact-summary-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--uw-surface-mid);
}

.v4-contact-summary-row:last-of-type { border-bottom: none; }

.v4-contact-row-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--uw-outline);
  margin-bottom: 3px;
}

.v4-contact-row-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--uw-on-surface);
}

.v4-contact-price-block {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--uw-surface-top);
}

.v4-contact-price-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--uw-secondary);
  margin-bottom: 6px;
}

.v4-contact-price-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 20px;
}

.v4-contact-price-value {
  font-family: var(--uw-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--uw-primary);
  line-height: 1;
}

.v4-contact-price-value.v4-price-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--uw-on-surface-variant);
}

.v4-contact-price-vat {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--uw-secondary);
}

.v4-submit-btn {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, var(--uw-cta) 0%, var(--uw-cta-dark) 100%);
  color: var(--uw-cta-text);   /* dark text — WCAG AAA on orange */
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--uw-font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(var(--uw-cta-rgb),0.28);
  transition: all 0.2s;
}

.v4-submit-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(var(--uw-cta-rgb),0.38);
}

.v4-submit-btn .material-symbols-outlined { font-size: 18px; }

/* Step 4 sidebar Continue button */
.v4-sidebar-next-btn {
  width: 100%;
  height: 44px;
  margin-top: 16px;
  background: linear-gradient(135deg, var(--uw-cta) 0%, var(--uw-cta-dark) 100%);
  color: var(--uw-cta-text);
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--uw-font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(var(--uw-cta-rgb),0.25);
  transition: all 0.2s;
}

.v4-sidebar-next-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--uw-cta-rgb),0.35);
}

.v4-sidebar-next-btn .material-symbols-outlined { font-size: 16px; }

.v4-sidebar-next-btn:focus-visible {
  outline: 3px solid var(--uw-primary);
  outline-offset: 3px;
}

.v4-submit-footnote {
  font-size: 11px;
  color: var(--uw-outline);
  text-align: center;
  margin-top: 12px;
  line-height: 1.5;
  padding: 0 8px;
}

.v4-repair-quote-note-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(var(--uw-primary-rgb),0.05);
  border-left: 3px solid var(--uw-primary);
  border-radius: 0 10px 10px 0;
  padding: 16px;
  margin-top: 24px;
}

.v4-repair-quote-note-block .material-symbols-outlined {
  font-size: 20px;
  color: var(--uw-primary);
  flex-shrink: 0;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  margin-top: 1px;
}

.v4-repair-quote-note-block p {
  font-size: 13px;
  font-weight: 500;
  color: var(--uw-on-variant);
  line-height: 1.5;
}

/* === MATERIAL SYMBOLS === */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
  .v4-main { padding: 40px 36px; }
  .v4-12grid { grid-template-columns: 7fr 4fr; gap: 32px; }
  .v4-asym-grid { grid-template-columns: 1fr 340px; }
}

@media (max-width: 1023px) {
  .v4-sidebar { display: none; }
  .v4-wrapper { background: transparent; }
  .v4-main { padding: 32px 28px; }
  .v4-12grid { grid-template-columns: 1fr; }
  .v4-asym-grid { grid-template-columns: 1fr; }
  .v4-vehicle-bento { grid-template-columns: 1fr; }
  /* Sidebar CTA hidden — nav CTA is the only button on mobile/tablet */
  .v4-sidebar-next-btn { display: none; }
}

@media (max-width: 767px) {
  .v4-main { padding: 24px 18px; }
  .v4-type-grid-3,
  .v4-type-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .v4-service-grid { grid-template-columns: 1fr; max-width: 100%; }
  .v4-cat-grid { grid-template-columns: repeat(2, 1fr); }
  /* Trust cards hidden on mobile — they push the lookup button below the fold */
  .v4-reg-trust-grid { display: none; }
  /* Vehicle confirm plate — reduce panel padding + shrink text so reg fits on one line */
  .v4-vehicle-plate-panel { padding: 24px 20px; }
  .v4-vehicle-plate-text { font-size: 34px; letter-spacing: 3px; white-space: nowrap; }
  .v4-vehicle-plate-big { height: 72px; }
  .v4-insp-card-inner { flex-direction: column; }
  .v4-insp-card-right { align-items: flex-start; min-width: 0; }
  /* Step heading: scale down on mobile to prevent 2-line wrap */
  .v4-step-heading { font-size: 22px; }
  /* Tabs: horizontally scrollable on mobile — prevents 2-row wrap */
  .v4-tabs { overflow-x: auto; flex-wrap: nowrap; width: 100%; border-radius: 16px; -webkit-overflow-scrolling: touch; }
  .v4-tab { white-space: nowrap; flex-shrink: 0; }
  /* Vehicle banner: scale down for long model names */
  .v4-vehicle-banner { font-size: 17px; }
  /* Service cards: allow shrinking on narrow viewports */
  .v4-service-card { min-width: 0; }
  /* Diag cards: keep radio pinned top-right, don't let it wrap to new row */
  .v4-diag-card { flex-wrap: nowrap; padding-right: 48px; }
  .v4-diag-card-radio { position: absolute; top: 20px; right: 16px; align-self: auto; }
  .v4-includes-grid { grid-template-columns: 1fr; }
  .v4-field-row { grid-template-columns: 1fr; }
  .v4-vehicle-stats-row { grid-template-columns: repeat(2, 1fr); }
  .v4-nav { gap: 10px; margin-top: 24px; }
  .v4-btn { padding: 12px 20px; font-size: 14px; }
  .v4-brake-positions { padding-left: 18px; }
  .v4-tabs { width: 100%; }
}

@media (max-width: 479px) {
  .v4-main { padding: 18px 14px; }
  .v4-type-grid-2,
  .v4-type-grid-3,
  .v4-type-grid-4 { grid-template-columns: 1fr; }
  .v4-progress-step { display: none; }
  .v4-reg-plate { height: 72px; }
  .v4-reg-input { font-size: 36px; letter-spacing: 3px; }
}

/* ============================================================
   FOCUS VISIBLE — keyboard accessibility
   ============================================================ */

/* Reset browser default outlines — we supply our own */
*:focus { outline: none; }

/* Keyboard-only focus rings */
.v4-btn:focus-visible,
.v4-submit-btn:focus-visible,
.v4-time-btn:focus-visible,
.v4-tab:focus-visible {
  outline: 3px solid var(--uw-primary);
  outline-offset: 3px;
}

.v4-type-card:focus-visible,
.v4-service-card:focus-visible,
.v4-cat-card:focus-visible,
.v4-diag-card:focus-visible,
.v4-insp-card:focus-visible,
.v4-svc-item:focus-visible {
  outline: 3px solid var(--uw-primary);
  outline-offset: 2px;
}

.v4-input:focus-visible {
  outline: none;
  border-color: var(--uw-primary);
  box-shadow: 0 0 0 3px rgba(var(--uw-primary-rgb), 0.2);
}

.v4-reg-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(var(--uw-primary-rgb), 0.3) inset;
}

/* Inline links */
a:focus-visible {
  outline: 2px solid var(--uw-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   PREFERS REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* Remove all transitions and animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Stop shimmer / spinner */
  .v4-skeleton::after,
  .v4-spinner {
    animation: none !important;
  }

  /* Remove transform hovers */
  .v4-type-card:hover,
  .v4-service-card:hover,
  .v4-cat-card:hover,
  .v4-diag-card:hover,
  .v4-insp-card:hover,
  .v4-svc-item:hover {
    transform: none !important;
  }

  /* Progress bar — instant fill */
  .v4-progress-fill {
    transition: none !important;
  }

}

/* =============================================================================
   MOCKUP-1.0 — Step 1 6-card 3×2 grid
   ============================================================================= */

/* Step 1 — 6-card 3×2 grid */
.v4-type-grid-6 { grid-template-columns: repeat(3, 1fr); }

/* 7 services — 3 + 3 + 1, final card centred */
.v4-type-grid-7 { grid-template-columns: repeat(12, 1fr); }
.v4-type-grid-7 > * { grid-column: span 4; }
.v4-type-grid-7 > *:nth-child(7) { grid-column: 5 / span 4; }
@media (max-width: 1024px) {
  .v4-type-grid-7 { grid-template-columns: repeat(2, 1fr); }
  .v4-type-grid-7 > *,
  .v4-type-grid-7 > *:nth-child(7) { grid-column: auto; }
}
@media (max-width: 640px) {
  .v4-type-grid-7 { grid-template-columns: 1fr; }
  .v4-type-grid-7 > *,
  .v4-type-grid-7 > *:nth-child(7) { grid-column: auto; }
}
@media (max-width: 900px) {
  .v4-type-grid-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .v4-type-grid-6 { grid-template-columns: 1fr; }
}

/* Step 1 — 5-card balanced grid: 3 on top, 2 centred below — Grays Tyres */
.v4-type-grid-5 { grid-template-columns: repeat(6, 1fr); }
.v4-type-grid-5 > * { grid-column: span 2; }
.v4-type-grid-5 > *:nth-child(4) { grid-column: 2 / span 2; }  /* bottom-left card, shifted in to centre the row */
.v4-type-grid-5 > *:nth-child(5) { grid-column: 4 / span 2; }  /* bottom-right card */
@media (max-width: 900px) {
  .v4-type-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .v4-type-grid-5 > *,
  .v4-type-grid-5 > *:nth-child(4),
  .v4-type-grid-5 > *:nth-child(5) { grid-column: auto; }
}
@media (max-width: 540px) {
  .v4-type-grid-5 { grid-template-columns: 1fr; }
}

/* =============================================================================
   MOCKUP-1.0 ADDITIONS — MOT + Tyre Fitting flows
   ============================================================================= */

/* --- Shared: Add-on section wrapper --- */
.v4-addon-section {
  margin: 20px 0 0;
  padding: 20px;
  background: var(--uw-surface-low);
  border-radius: 12px;
  border: 1px solid var(--uw-border);
}
.v4-addon-header {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--uw-secondary);
  margin-bottom: 12px;
}
.v4-addon-intro {
  font-size: 14px;
  color: var(--uw-secondary);
  margin-bottom: 16px;
}

/* --- Servicing → MOT add-on toggle card --- */
.v4-addon-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--uw-white);
  border: 2px solid var(--uw-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.v4-addon-card:hover { border-color: var(--uw-primary); }
.v4-addon-card.selected { border-color: var(--uw-primary); background: var(--uw-selected-bg); }
.v4-addon-card-radio {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--uw-border);
  flex-shrink: 0;
  transition: border-color 0.18s, background 0.18s;
}
.v4-addon-card-radio.checked {
  border-color: var(--uw-primary);
  background: var(--uw-primary);
  box-shadow: inset 0 0 0 3px #fff;
}
.v4-addon-card-body { flex: 1; }
.v4-addon-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--uw-on-surface);
}
.v4-addon-card-title .material-symbols-outlined { font-size: 18px; color: var(--uw-primary); }
.v4-addon-card-desc { font-size: 13px; color: var(--uw-secondary); margin-top: 2px; }
.v4-addon-card-price {
  font-size: 18px;
  font-weight: 600;
  color: var(--uw-on-surface);
  white-space: nowrap;
  text-align: right;
}
.v4-addon-card-price-wrap {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap;
}
.v4-addon-card-price-orig {
  font-size: 12px; font-weight: 500; color: var(--uw-secondary);
  text-decoration: line-through;
}
.v4-addon-save-badge {
  font-size: 11px; font-weight: 700; color: var(--uw-success);
  background: rgba(26,135,84,0.10); border-radius: 4px; padding: 2px 6px;
}

/* --- MOT Step 4 main card --- */
.v4-mot-main-card {
  background: var(--uw-white);
  border: 2px solid var(--uw-primary);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.v4-mot-card-photo {
  margin: -24px -24px 16px;
  height: 160px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 12px 12px 0 0;
}
.v4-mot-card-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* .v4-mot-main-card-inner removed — the MOT card now uses the shared
   media/body/foot anatomy, and this element no longer exists in the markup.
   Verified unused across StellixDemoV2.js, index.html and alt-design-v1. */
.v4-mot-includes {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.v4-mot-includes li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--uw-on-surface);
}
.v4-mot-includes .material-symbols-outlined {
  font-size: 16px;
  color: var(--uw-success);
  flex-shrink: 0;
}
.v4-mot-expiry-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--uw-primary-bg);
  font-size: 13px;
  font-weight: 600;
  color: var(--uw-on-surface);
}
.v4-mot-expiry-pill .material-symbols-outlined {
  font-size: 16px;
  color: var(--uw-primary);
  flex-shrink: 0;
}
.v4-mot-expiry-pill.expired {
  background: rgba(229,57,53,0.10);
  color: var(--uw-error);
}
.v4-mot-expiry-pill.expired .material-symbols-outlined {
  color: var(--uw-error);
}

/* .v4-mot-price-wrap removed — replaced by .uw-card-price-wrap inside the
   shared card foot. Verified unused across JS, HTML and alt-design-v1. */
.v4-price-lock-small {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--uw-secondary);
  margin-top: 6px;
  justify-content: flex-end;
}
.v4-price-lock-small .material-symbols-outlined { font-size: 14px; }

/* MOT add-on service cards grid (reuses .v4-service-card) — 1-column stacked */
.v4-service-grid-addon {
  margin-top: 0;
  grid-template-columns: repeat(3, 1fr);
}
.v4-addon-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding: 5px 12px;
  font-size: 13px;
  color: var(--uw-secondary);
  background: none;
  border: 1px solid var(--uw-border);
  border-radius: 20px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.v4-addon-clear-btn:hover { color: var(--uw-error); border-color: var(--uw-error); }
.v4-addon-clear-btn .material-symbols-outlined { font-size: 15px; }

/* --- Tyre Fitting Step 4 grid --- */
.v4-tyre-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 20px;
}
@media (max-width: 600px) {
  .v4-tyre-grid { grid-template-columns: 1fr; }
}
.v4-tyre-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--uw-white);
  border: 2px solid var(--uw-border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  position: relative;
  overflow: hidden;
}
.v4-tyre-card:hover { border-color: var(--uw-primary); }

.v4-tyre-card-photo {
  margin: -16px -16px 0;
  height: 160px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 10px 10px 0 0;
}
.v4-tyre-card-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.v4-tyre-card:hover .v4-tyre-card-photo img { transform: scale(1.04); }

.v4-tyre-card-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 14px;
}
.v4-tyre-card.selected {
  border-color: var(--uw-primary);
  background: var(--uw-selected-bg);
}
.v4-tyre-card-radio {
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 2px solid var(--uw-border);
  flex-shrink: 0;
  margin-top: 2px;
  transition: border-color 0.18s, background 0.18s;
}
.v4-tyre-card.selected .v4-tyre-card-radio {
  border-color: var(--uw-primary);
  background: var(--uw-primary);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}
.v4-tyre-card-icon .material-symbols-outlined {
  font-size: 22px;
  color: var(--uw-primary);
}
.v4-tyre-card-body { flex: 1; }
.v4-tyre-card-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--uw-on-surface);
}
.v4-tyre-card-desc {
  font-size: 13px;
  color: var(--uw-secondary);
  margin-top: 4px;
  line-height: 1.4;
}
.v4-tyre-card-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--uw-primary);
  margin-top: 8px;
}

/* === DETAILING — additional options strip === */
.v4-detailing-addons {
  margin-top: 24px;
  padding: 20px;
  background: var(--uw-surface);
  border: 1px solid var(--uw-border);
  border-radius: 12px;
}
.v4-detailing-addons-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--uw-secondary);
  margin-bottom: 14px;
}
.v4-detailing-addon-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--uw-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.v4-detailing-addon-chip:last-child { border-bottom: none; }
.v4-detailing-addon-chip:hover { background: var(--uw-surface-low); }
.v4-detailing-addon-chip.selected { background: var(--uw-selected-bg); }
.v4-addon-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--uw-outline-var);
  flex-shrink: 0;
  transition: all 0.15s;
}
.v4-detailing-addon-chip.selected .v4-addon-check {
  border-color: var(--uw-primary);
  background: var(--uw-primary);
  box-shadow: inset 0 0 0 3px var(--uw-white);
}
.v4-detailing-addon-chip img {
  width: 52px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.v4-detailing-addon-chip .material-symbols-outlined {
  font-size: 24px;
  color: var(--uw-primary);
  flex-shrink: 0;
}
.v4-detailing-addon-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--uw-on-surface);
}
.v4-detailing-addon-price {
  font-size: 13px;
  font-weight: 600;
  color: var(--uw-primary);
  margin-top: 2px;
}

/* =============================================================================
   MOCKUP-1.1 — DISPLAY MODE (service strip / landing page informational view)
   Applied when data-service is set. Cards shown full-width, no wizard chrome.
   ============================================================================= */

/* Hide sidebar in display mode */
.v4-display-mode .v4-sidebar { display: none !important; }

/* Step 4 grid: collapse to single column so cards fill full width */
.v4-display-mode .v4-12grid {
  display: block;
}

/* Remove bottom margin from the nav row — no wizard chrome below it */
.v4-display-mode .v4-nav {
  margin-top: 32px;
}

/* Grays Tyres — prices and action links use CTA navy */
.v4-card-price,
.v4-diag-card-price,
.v4-insp-price,
.v4-summary-price-value,
.v4-contact-price-value,
.v4-tyre-card-price,
.v4-detailing-addon-price { color: var(--uw-link); }

.v4-type-cta { color: var(--uw-link); }

/* MOT add-on cards — stack to 1 column on mobile */
@media (max-width: 767px) {
  .v4-service-grid-addon {
    grid-template-columns: 1fr !important;
  }
}

/* ===========================================================================
   DEMO MODE — mock confirmation panel (stellixdemo tenant only)
   Lime is a FILL here (badge, primary button) with black text on top.
   =========================================================================== */

.v4-demo-confirm {
  max-width: 620px;
  margin: 0 auto;
  padding: 56px 32px 72px;
  text-align: center;
  font-family: var(--uw-font-body);
}

.v4-demo-badge {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--uw-cta);
  display: flex;
  align-items: center;
  justify-content: center;
}

.v4-demo-badge .material-symbols-outlined {
  font-size: 40px;
  color: var(--uw-cta-text);
  font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 40;
}

.v4-demo-title {
  font-family: var(--uw-font-heading);
  font-size: 32px;
  font-weight: 600;
  color: var(--uw-on-surface);
  margin: 0 0 12px;
  letter-spacing: -0.5px;
}

.v4-demo-lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--uw-secondary);
  margin: 0 auto 32px;
  max-width: 460px;
}

.v4-demo-card {
  background: var(--uw-white);
  border: 1px solid var(--uw-outline-var);
  border-radius: 24px;
  padding: 8px 24px;
  text-align: left;
  margin-bottom: 20px;
}

.v4-demo-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--uw-surface-mid);
}

.v4-demo-row:last-child { border-bottom: none; }

.v4-demo-row-key {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--uw-secondary);
  white-space: nowrap;
}

.v4-demo-row-val {
  font-size: 15px;
  font-weight: 600;
  color: var(--uw-on-surface);
  text-align: right;
}

.v4-demo-note {
  font-size: 13px;
  color: var(--uw-secondary);
  margin: 0 0 28px;
}

.v4-demo-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.v4-demo-btn-primary,
.v4-demo-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 32px;
  border-radius: 999px;
  font-family: var(--uw-font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.v4-demo-btn-primary {
  background: var(--uw-cta);
  color: var(--uw-cta-text);
  border: none;
}

.v4-demo-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(var(--uw-cta-rgb), 0.55);
}

/* .v4-wrapper a sets link colour, so match its specificity to win here */
.v4-wrapper a.v4-demo-btn-secondary {
  background: var(--uw-white);
  color: var(--uw-on-surface);
  border: 1.5px solid var(--uw-on-surface);
}

.v4-wrapper a.v4-demo-btn-secondary:hover {
  background: var(--uw-on-surface);
  color: var(--uw-white);
}

@media (max-width: 640px) {
  .v4-demo-confirm { padding: 40px 20px 56px; }
  .v4-demo-title   { font-size: 26px; }
  .v4-demo-row     { flex-direction: column; gap: 4px; }
  .v4-demo-row-val { text-align: left; }
  .v4-demo-actions > * { width: 100%; }
}

/* Reg-first entry step has no Back button — keep the CTA on the right.
   Scoped to the primary: as `:only-child` this also caught the contact
   step, whose nav holds only a Back button, and shoved Back 511px to the
   right — into the position the primary occupies on every other screen.
   A lone primary still goes right; a lone Back now stays left. */
.v4-nav > .v4-btn-primary:only-child,
.v4-nav > .v4-submit-btn:only-child { margin-left: auto; }

/* Contact summary total — keep label above the figure, never run together */
.v4-contact-price-label { display: block; }
.v4-contact-price-block { display: block; }

/* ===========================================================================
   V2 SITE-MATCH LAYER — stellixdemo-v2 only
   ---------------------------------------------------------------------------
   Everything below is additive and appended last, so it overrides the base
   without editing it. Removing this block returns the widget to v1 exactly.

   Vocabulary lifted from /google-ads and /booking-system:
     - nested card: #F0F1FA panel (r24, 16px pad) wrapping a white card (r20)
     - lime pill CTA: 48px tall, r160, uppercase, 12px/1.44px tracking,
       black circular arrow badge inset on the right
     - lime step badge: small pill, uppercase, letterspaced
     - lime icon tile: 48x48, r12, black glyph
     - caps display headings in azo-sans-web
     - blue+lime radial gradient as the media/accent fill
   =========================================================================== */

:root {
  --uw-font-display: 'azo-sans-web', 'Poppins', system-ui, sans-serif;
  --uw-panel:        #f0f1fa;
  --uw-ink:          #131313;
  --uw-blue-accent:  #47a0ff;
  --uw-card-shadow:  0 1px 2px rgba(13,19,34,0.10), 0 4px 12px rgba(13,19,34,0.10);
  --uw-media-grad:   radial-gradient(58% 76% at 88% 52%, rgba(71,160,255,0.85) 0%, rgba(71,160,255,0) 62%),
                     radial-gradient(46% 64% at 64% 24%, rgba(214,253,112,0.55) 0%, rgba(214,253,112,0) 60%),
                     linear-gradient(160deg, #cfe2f7 0%, #a9c9ec 100%);
}

/* ── Ground ───────────────────────────────────────────────────────────── */

.v4-wrapper { background: var(--uw-surface); }

/* ── Step label as a lime badge (matches "STEP 1" on /booking-system) ──── */

.v4-progress-header { margin-bottom: 14px; }

.v4-progress-phase {
  display: inline-block;
  background: var(--uw-cta);
  color: var(--uw-ink);
  padding: 7px 16px;
  border-radius: 999px;
  font-family: var(--uw-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.32px;
  text-transform: uppercase;
}

.v4-progress-track {
  height: 4px;
  background: var(--uw-panel);
  border-radius: 999px;
  overflow: hidden;
}

.v4-progress-fill {
  background: var(--uw-ink);
  border-radius: 999px;
}

/* ── Display headings ─────────────────────────────────────────────────── */

.v4-step-heading {
  font-family: var(--uw-font-display);
  font-weight: 500;
  letter-spacing: -0.8px;
  color: var(--uw-ink);
}

/* Card titles. The first pass named these .v4-type-card-title and
   .v4-service-card-title; neither exists in the DOM, so the display face
   never reached any card title. Real names below, plus the diag and tyre
   titles that were missing from the group entirely. */
.v4-summary-heading,
.v4-insp-card-name,
.v4-type-title,
.v4-card-name,
.v4-diag-card-name,
.v4-tyre-card-label {
  font-family: var(--uw-font-display);
  font-weight: 500;
  letter-spacing: -0.5px;
  color: var(--uw-ink);
}

/* ── Eyebrow labels above card titles ─────────────────────────────────── */

/* Eyebrows. Named .v4-type-card-eyebrow / .v4-service-card-eyebrow on the
   first pass — neither exists — so three different eyebrow treatments were
   running at once: the base .v4-type-eyebrow, the base .v4-card-eyebrow, and
   this rule reaching nothing. Real names below.
   NOTE: a fourth eyebrow is written as an inline style in the JS (detailing
   packages, StellixDemoV2.js:2547 — 11px/0.08em). Inline styles beat every
   selector, so that one cannot be brought into line from CSS. Flagged, not
   fixed, because the JS is out of scope. */
.v4-type-eyebrow,
.v4-card-eyebrow {
  font-family: var(--uw-font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--uw-secondary);
}

/* ── Nested card: lavender panel wrapping a white card ────────────────── */

/* Nested-card frame via a thick border rather than padding + child fills.
   The border approach makes no assumption about how many children a card has:
   .v4-type-card is photo+body, but .v4-service-card is a dozen text divs, and
   painting each child white banded them into stripes. */
.v4-wrapper .v4-type-card,
.v4-wrapper .v4-service-card,
.v4-wrapper .v4-diag-card,
.v4-wrapper .v4-insp-card,
.v4-wrapper .v4-tyre-card {
  background: var(--uw-white);
  border: none;
  border-radius: 20px;
  /* Lavender frame drawn as a box-shadow ring, not a border: a border is inside
     the box-sizing box and was stealing 16px of content width per card, which
     wrapped the copy. A ring costs no layout width. */
  box-shadow: 0 0 0 7px var(--uw-panel), var(--uw-card-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.v4-wrapper .v4-type-card.v4-type-card-img-top {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.v4-wrapper .v4-type-card:hover,
.v4-wrapper .v4-service-card:hover,
.v4-wrapper .v4-diag-card:hover,
.v4-wrapper .v4-insp-card:hover,
.v4-wrapper .v4-tyre-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 7px var(--uw-panel), 0 2px 4px rgba(13,19,34,0.10), 0 10px 24px rgba(13,19,34,0.13);
}

/* Card photography carries NO corner radius of its own. The card clips it.

   It used to be `18px 18px 0 0`, which is correct only while the photo sits
   across the top of a stacked card. In the horizontal layout the photo is a
   full-height panel on the left, and that value rounded the corner facing
   *into* the card while the card's own overflow clipped the outer bottom-left
   — giving three rounded corners and one square one.

   Writing a second radius for the horizontal case would just be a new special
   case waiting to drift. Instead the media has radius 0 and the card's
   overflow:hidden supplies the only curve there is, so the photo follows the
   card's outer corners on whichever sides it touches, in any layout. */
.v4-wrapper .v4-type-card-photo,
.v4-wrapper .v4-card-photo,
.v4-wrapper .v4-diag-card-photo,
.v4-wrapper .v4-tyre-card-photo,
.v4-wrapper .v4-mot-card-photo,
.v4-wrapper .uw-card-media,
.v4-wrapper .v4-insp-card-photo { border-radius: 0; overflow: hidden; }

.v4-wrapper .v4-type-card-photo img,
.v4-wrapper .v4-card-photo img,
.v4-wrapper .v4-diag-card-photo img,
.v4-wrapper .v4-tyre-card-photo img,
.v4-wrapper .v4-mot-card-photo img,
.v4-wrapper .uw-card-media img,
.v4-wrapper .v4-insp-card-photo img { border-radius: 0; }

/* selected state — black outline, the site's action colour */
.v4-wrapper .v4-type-card.selected,
.v4-wrapper .v4-service-card.selected,
.v4-wrapper .v4-diag-card.selected,
.v4-wrapper .v4-insp-card.selected,
.v4-wrapper .v4-tyre-card.selected {
  background: var(--uw-white);
  box-shadow: 0 0 0 7px var(--uw-cta), 0 2px 4px rgba(13,19,34,0.10), 0 10px 24px rgba(214,253,112,0.50);
}

/* ── CTA pills — uppercase, tracked, black arrow badge inset right ────── */

.v4-btn-primary,
.v4-sidebar-next-btn,
.v4-submit-btn,
.v4-demo-btn-primary {
  height: 48px;
  padding: 8px 8px 8px 24px;
  border-radius: 160px;
  background: var(--uw-cta);
  color: var(--uw-ink);
  font-family: var(--uw-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: none;
  box-shadow: none;
}

.v4-btn-primary:hover,
.v4-sidebar-next-btn:hover,
.v4-submit-btn:hover,
.v4-demo-btn-primary:hover {
  background: var(--uw-cta-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(214,253,112,0.55);
}

/* the trailing arrow becomes a black circular badge */
.v4-btn-primary .material-symbols-outlined,
.v4-sidebar-next-btn .material-symbols-outlined,
.v4-submit-btn .material-symbols-outlined {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  background: var(--uw-ink);
  color: var(--uw-cta);
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

/* ghost / secondary buttons */
.v4-btn-ghost {
  height: 48px;
  padding: 0 24px;
  border-radius: 160px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: var(--uw-ink);
  background: transparent;
}

.v4-btn-ghost:hover { background: var(--uw-panel); }

/* ── Icon tiles — lime square, black glyph ────────────────────────────── */

/* Icon tiles. The registration step's icons are .v4-reg-trust-icon, not
   .v4-trust-card-icon — so they kept the base treatment (44px white circle,
   blue glyph, drop shadow) while every other icon in the widget was a 48px
   lime square. Two icon systems on adjacent screens. Real name below;
   box-shadow reset because the base rule sets one and this group has none. */
.v4-summary-icon-chip,
.v4-insp-card-icon,
.v4-reg-trust-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--uw-cta);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.v4-summary-icon-chip .material-symbols-outlined,
.v4-insp-card-icon .material-symbols-outlined,
.v4-reg-trust-icon .material-symbols-outlined {
  color: var(--uw-ink);
  font-size: 22px;
}

/* ── Sidebar — white card on the page ground ──────────────────────────── */

.v4-sidebar {
  background: var(--uw-white);
  border-radius: 24px;
  box-shadow: var(--uw-card-shadow);
  border: none;
}

.v4-sidebar-item {
  border-radius: 999px;
  font-family: var(--uw-font-body);
  color: var(--uw-secondary);
}

.v4-sidebar-item.active {
  background: var(--uw-cta);
  color: var(--uw-ink);
  font-weight: 600;
  box-shadow: none;
  border: none;
}

.v4-sidebar-item.active .material-symbols-outlined { color: var(--uw-ink); }

/* ── Booking summary panel ────────────────────────────────────────────── */

.v4-summary-card {
  background: var(--uw-panel);
  border-radius: 24px;
  padding: 8px;
  border: none;
  box-shadow: var(--uw-card-shadow);
}

.v4-summary-stripe { display: none; }

.v4-summary-inner {
  background: var(--uw-white);
  border-radius: 18px;
  padding: 24px;
}

/* ── Service tabs ─────────────────────────────────────────────────────── */

.v4-tabs {
  background: var(--uw-panel);
  border-radius: 999px;
  padding: 6px;
  gap: 4px;
}

.v4-tab {
  border-radius: 999px;
  font-family: var(--uw-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--uw-secondary);
  border: none;
  background: transparent;
}

.v4-tab.active {
  background: var(--uw-ink);
  color: var(--uw-white);
  box-shadow: none;
}

/* ── Media panels — blue + lime radial, as on /google-ads ─────────────── */

.v4-reg-plate-wrap::before { content: none; }

.v4-vehicle-photo,
.v4-step4-media,
.v4-sidebar-photo {
  border-radius: 20px;
  background: var(--uw-media-grad);
  overflow: hidden;
}

/* ── Inputs ───────────────────────────────────────────────────────────── */

.v4-input,
.v4-textarea {
  background: var(--uw-white);
  border: 1.5px solid var(--uw-panel);
  border-radius: 14px;
  font-family: var(--uw-font-body);
  color: var(--uw-ink);
}

.v4-input:focus,
.v4-textarea:focus {
  border-color: var(--uw-ink);
  box-shadow: 0 0 0 3px rgba(214,253,112,0.45);
  outline: none;
}

/* Field labels — .v4-field-label does not exist; the DOM emits .v4-label.
   The base gives them 11px/700/0.09em, which is a different small-caps spec
   from the eyebrows' 10px/500/1.2px. One spec for both now. */
.v4-label {
  font-family: var(--uw-font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--uw-secondary);
}

/* time toggle */
.v4-wrapper .v4-time-btn { border-radius: 999px; border: 1.5px solid var(--uw-panel); }
.v4-wrapper .v4-time-btn.active {
  background: var(--uw-cta);
  color: var(--uw-ink);
  border-color: var(--uw-cta);
}

/* ── Contact step section cards ───────────────────────────────────────── */

/* Contact-step sections. Named .v4-contact-section on the first pass; the
   DOM emits .v4-form-section, so all three numbered sections stayed flat
   lavender panels while the summary beside them was a white card. Making
   them white also fixes a second-order problem: .v4-input has a #f0f1fa
   border, which was invisible against a #f4f4f8 panel and only reads once
   the field sits on white. */
.v4-form-section {
  background: var(--uw-white);
  border-radius: 24px;
  border: none;
  box-shadow: var(--uw-card-shadow);
}

/* The step badge is .v4-form-num and the time toggle is .v4-time-btn —
   not the names guessed on the first pass. */
.v4-wrapper .v4-form-num {
  background: var(--uw-cta);
  color: var(--uw-ink);
  border-radius: 12px;
  font-weight: 600;
}

/* ── Accordions ───────────────────────────────────────────────────────── */

.v4-accordion,
.v4-insp-checklist-toggle {
  background: var(--uw-white);
  border: 1.5px solid var(--uw-panel);
  border-radius: 20px;
}

.v4-insp-checklist-toggle {
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--uw-ink);
}

/* ── Demo confirmation, restyled to the same vocabulary ───────────────── */

.v4-demo-title {
  font-family: var(--uw-font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.8px;
}

.v4-demo-badge { border-radius: 16px; }

.v4-demo-card {
  background: var(--uw-panel);
  border: none;
  border-radius: 24px;
  padding: 8px 8px;
  box-shadow: var(--uw-card-shadow);
}

.v4-demo-row {
  background: var(--uw-white);
  padding: 14px 20px;
  border-bottom: 1px solid var(--uw-panel);
}

.v4-demo-row:first-child { border-radius: 18px 18px 0 0; }
.v4-demo-row:last-child  { border-radius: 0 0 18px 18px; border-bottom: none; }

.v4-demo-btn-primary { justify-content: center; }

.v4-wrapper a.v4-demo-btn-secondary {
  height: 48px;
  border-radius: 160px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  border: 1.5px solid var(--uw-ink);
}


/* Card grids need to clear the 7px ring on each neighbour */
.v4-wrapper .v4-type-grid,
.v4-wrapper .v4-service-grid,
.v4-wrapper .v4-diag-grid,
.v4-wrapper .v4-insp-grid { gap: 28px; }


/* uwSummaryPriceRow is shown by JS with an inline `display:flex`, used purely as a
   show/hide toggle rather than a layout choice — which laid the label beside the
   figure as "Fixed Price£84.99". Inline styles beat any selector, so rather than
   fight it with !important, make the flex container stack. */
.v4-wrapper .v4-contact-price-block { flex-direction: column; gap: 4px; }
.v4-wrapper .v4-contact-price-label { display: block; margin-bottom: 2px; }


/* ===========================================================================
   V3 — CONSISTENCY PASS
   ---------------------------------------------------------------------------
   Appended last, on the same principle as the site-match layer above it:
   additive, overriding without editing what came before. Deleting this block
   returns the widget to the state it was handed over in.

   Visual only. No wording, no flow, no logic — StellixDemoV2.js is untouched.
   Everything here is scoped under .v4-wrapper so it outranks the base file's
   compound selectors (0,2,0) without reaching for !important.
   =========================================================================== */

/* ── Repair cards: reserve a gutter for the chevron ─────────────────────── */

/* .v4-cat-chevron is absolutely positioned at right:10px while .v4-cat-hints
   ran the full content width, so any hint line that filled the row ran under
   it. Measured at 1440px: PRE-MOT overlapped by 17.7px, ELECTRICAL cleared by
   0.1px, three more sat within 16px. Which cards collide changes with the
   viewport, so this is a reserved gutter rather than a per-card fix. */
.v4-wrapper .v4-cat-hints { padding-right: 26px; }


/* ── The MOT card joins the card system ─────────────────────────────────── */

/* .v4-mot-main-card was the only card left outside the site-match card group,
   so it kept a 2px blue border and a 14px radius while every other card had a
   20px radius and a lavender ring. It was the single blue-bordered card in
   the widget, reading as selected or errored when it is neither. */
/* MOT joins the hairline card system. This rule used to give it a 7px
   lavender ring and a 20px radius, from when every card had a ring. When the
   cards moved to hairlines MOT was being styled in this separate block and
   was missed — so it kept the ring, and was the only card at 20px while the
   rest were 18px. Same border, same radius, same shadow as every other card
   now, taken from the shared values rather than restated here. */
.v4-wrapper .v4-mot-main-card {
  background: var(--uw-white);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: none;
}


/* ── Secondary controls onto one spec ───────────────────────────────────── */

/* Every uppercase pill control uses 12px/500/1.44px. The inspection checklist
   toggle was on 1.2px — close enough to look like a mistake rather than a
   distinction, which is exactly how a near-miss reads. */
.v4-wrapper .v4-insp-checklist-toggle { letter-spacing: 1.44px; }

/* Card CTAs were 13px/700 — heavier than any other text in the widget,
   including the headings. 600 puts them in the same family as the rest. */
.v4-wrapper .v4-type-cta { font-weight: 600; }


/* ── Prices read as fact, not as links ──────────────────────────────────── */

/* Prices inherited --uw-link, which tracks the per-garage brand colour: a
   garage with an orange accent got orange prices, which reads as a warning,
   and blue prices read as clickable. Ink is correct under every brand.
   Blue keeps the jobs it actually does — links and tick marks. */
.v4-wrapper .v4-card-price,
.v4-wrapper .v4-diag-card-price,
.v4-wrapper .v4-insp-price,
.v4-wrapper .v4-summary-price-value,
.v4-wrapper .v4-contact-price-value,
.v4-wrapper .v4-tyre-card-price,
.v4-wrapper .v4-detailing-addon-price { color: var(--uw-ink); }


/* ── One primary action per screen ──────────────────────────────────────── */

/* Every step-4 screen carried the same primary twice — once in the booking
   summary, once in the bottom nav, identically styled. On mobile the two sat
   324px apart with the summary between them, so the panel that exists to show
   people what they are agreeing to appeared *after* the first commit button.
   :has() means this only applies where a summary CTA actually exists, so a
   screen without one keeps its nav button and nobody is stranded. */
.v4-wrapper .v4-step:has(.v4-sidebar-next-btn) .v4-nav .v4-btn-primary {
  display: none;
}


/* ── Selection has to be visible before it is made ──────────────────────── */

/* The step-1 service cards carry no selection indicator at all — they read as
   content cards with links, so nothing signals that Continue needs a choice
   first. A radio drawn as a pseudo-element, matching the 20px radios the
   other card types already use. */
.v4-wrapper .v4-type-card { position: relative; }

.v4-wrapper .v4-type-card::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--uw-white);
  box-shadow: 0 0 0 2px rgba(var(--uw-on-surface-rgb), 0.22),
              0 1px 3px rgba(var(--uw-on-surface-rgb), 0.18);
  transition: background 0.18s ease, box-shadow 0.18s ease;
  pointer-events: none;
}

.v4-wrapper .v4-type-card.selected::after {
  background: var(--uw-ink);
  box-shadow: 0 0 0 2px var(--uw-ink),
              inset 0 0 0 4px var(--uw-white);
}

/* The radios that do exist sit on top of photography, where a #d8d9e2 ring is
   invisible. A white disc behind them makes them read on any image. */
.v4-wrapper .v4-service-card-radio,
.v4-wrapper .v4-insp-card-radio {
  background: var(--uw-white);
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(var(--uw-on-surface-rgb), 0.22),
              0 1px 3px rgba(var(--uw-on-surface-rgb), 0.18);
}

.v4-wrapper .v4-service-card.selected .v4-service-card-radio,
.v4-wrapper .v4-insp-card.selected .v4-insp-card-radio {
  background: var(--uw-ink);
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--uw-ink),
              inset 0 0 0 4px var(--uw-white);
}


/* ── Selected states agree with each other ──────────────────────────────── */

/* The add-on card and its radio marked selection in blue while every card in
   the system marks it with ink or lime. Now that --uw-border resolves, these
   rules can actually draw for the first time. */
.v4-wrapper .v4-addon-card.selected {
  border-color: var(--uw-ink);
  background: rgba(var(--uw-cta-rgb), 0.18);
}

.v4-wrapper .v4-addon-card-radio.checked {
  border-color: var(--uw-ink);
  background: var(--uw-ink);
  box-shadow: inset 0 0 0 3px var(--uw-white);
}


/* ── Inline field validation, without touching the JS ───────────────────── */

/* The README asks for inline errors on blur. The JS only ever sets one global
   message, so individual empty required fields were never flagged.
   :user-invalid is the CSS-native equivalent: it styles a field only after the
   user has actually left it wrong, never on first paint, and needs no script. */
.v4-wrapper .v4-input:user-invalid {
  border-color: var(--uw-error);
  box-shadow: 0 0 0 3px rgba(var(--uw-error-rgb), 0.15);
}

.v4-wrapper .v4-input:user-invalid:focus {
  border-color: var(--uw-error);
  box-shadow: 0 0 0 3px rgba(var(--uw-error-rgb), 0.25);
}


/* ── Remaining unstyled native control ─────────────────────────────────── */

/* The MOT add-on marker was an 18px circle. A circle reads as "one of
   several"; this is an independent on/off, the same as the tyre categories,
   which already use a 4px-radius square. Same meaning, same shape. */
.v4-wrapper .v4-addon-card-radio { border-radius: 4px; }


/* ===========================================================================
   V4 — VISUAL REDESIGN
   ---------------------------------------------------------------------------
   The layers above this one make the existing design work as intended. This
   layer changes what it looks like.

   The problem being solved: everything carried the same visual weight. Every
   card was a white box with an identical 7px lavender ring, every heading sat
   within 6px of every other heading, and a 190px photograph led every card —
   so the page had no focal point and the price, which is the entire decision,
   was the smallest confident thing on screen.

   Four moves:
     1. A type scale with real jumps, so hierarchy is legible at a glance.
     2. The nested-card frame reserved for hero panels. Repeated grid cards
        get a quiet hairline instead — framed now means "important" rather
        than "is a card".
     3. Photography demoted from lead to support, so the name and the price
        come first.
     4. Lime as an accent with intrinsic width, not a slab.

   Still visual only: no wording, no flow, no logic.
   =========================================================================== */

.v4-wrapper {
  --sp-1: 6px;
  --sp-2: 12px;
  --sp-3: 20px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 72px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.22s;

  --hairline: rgba(var(--uw-on-surface-rgb), 0.10);
  --hairline-strong: rgba(var(--uw-on-surface-rgb), 0.20);
}


/* ── 1. Type: make the jumps big enough to read as hierarchy ────────────── */

/* .v4-vehicle-banner is the step-4 heading — a different class from
   .v4-step-heading, which is used on steps 2, 3 and contact. Both are the
   top-level heading of their screen, so both take the display size. */
.v4-wrapper .v4-step-heading,
.v4-wrapper .v4-vehicle-banner {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-2);
  font-family: var(--uw-font-display);
  font-weight: 500;
  color: var(--uw-ink);
}

.v4-wrapper .v4-vehicle-banner { margin-bottom: var(--sp-4); }

.v4-wrapper .v4-step-sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--uw-secondary);
  max-width: 54ch;
  margin-bottom: var(--sp-5);
}

/* Card titles step up so the name leads the card, not the photograph. */
.v4-wrapper .v4-type-title,
.v4-wrapper .v4-card-name,
.v4-wrapper .v4-diag-card-name,
.v4-wrapper .v4-insp-card-name,
.v4-wrapper .v4-tyre-card-label {
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* The price is the decision. It should be the loudest thing on the card. */
.v4-wrapper .v4-card-price,
.v4-wrapper .v4-diag-card-price,
.v4-wrapper .v4-insp-price,
.v4-wrapper .v4-mot-price {
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.v4-wrapper .v4-contact-price-value,
.v4-wrapper .v4-summary-price-value {
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* "INC. VAT" is a legal footnote, not a design element — let it recede. */
.v4-wrapper .v4-card-price-vat,
.v4-wrapper .v4-insp-price-vat,
.v4-wrapper .v4-contact-price-vat {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--uw-secondary);
  margin-top: var(--sp-1);
}


/* ── 2. Framed = important. Everything else gets a hairline. ────────────── */

/* The repeated grid cards lose the ring. Twelve identically framed boxes read
   as texture, not as twelve choices. */
.v4-wrapper .v4-type-card,
.v4-wrapper .v4-service-card,
.v4-wrapper .v4-diag-card,
.v4-wrapper .v4-insp-card,
.v4-wrapper .v4-tyre-card {
  background: var(--uw-white);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: none;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.v4-wrapper .v4-type-card:hover,
.v4-wrapper .v4-service-card:hover,
.v4-wrapper .v4-diag-card:hover,
.v4-wrapper .v4-insp-card:hover,
.v4-wrapper .v4-tyre-card:hover {
  transform: none;
  border-color: var(--hairline-strong);
  box-shadow: 0 6px 20px rgba(var(--uw-on-surface-rgb), 0.07);
}

/* Selection is now the loudest state on the card rather than one lavender
   ring among many — an ink edge, which is the site's action colour. */
.v4-wrapper .v4-type-card.selected,
.v4-wrapper .v4-service-card.selected,
.v4-wrapper .v4-diag-card.selected,
.v4-wrapper .v4-insp-card.selected,
.v4-wrapper .v4-tyre-card.selected {
  background: var(--uw-white);
  border-color: var(--uw-ink);
  box-shadow: 0 0 0 1px var(--uw-ink),
              0 10px 28px rgba(var(--uw-on-surface-rgb), 0.10);
}

/* The frame survives where it earns its keep: the booking summary and the
   contact sections, which are genuinely a level above the grid. */
.v4-wrapper .v4-summary-card,
.v4-wrapper .v4-contact-summary {
  background: var(--uw-panel);
  border: none;
  border-radius: 26px;
  padding: 7px;
  box-shadow: 0 1px 2px rgba(13,19,34,.06), 0 12px 32px rgba(13,19,34,.08);
}

.v4-wrapper .v4-summary-inner,
.v4-wrapper .v4-contact-summary-inner {
  background: var(--uw-white);
  border-radius: 20px;
  padding: var(--sp-4);
}

.v4-wrapper .v4-form-section {
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: none;
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}


/* ── 3. Photography supports, it does not lead ──────────────────────────── */

.v4-wrapper .v4-type-card-photo { height: 150px; }

.v4-wrapper .v4-card-photo,
.v4-wrapper .v4-diag-card-photo,
.v4-wrapper .v4-insp-card-photo,
.v4-wrapper .v4-tyre-card-photo,
.v4-wrapper .v4-mot-card-photo { height: 124px; }

/* A flat wash over the image bottom so white radios and any overlaid text
   hold their contrast whatever the photograph happens to be. */
.v4-wrapper .v4-type-card-photo,
.v4-wrapper .v4-card-photo,
.v4-wrapper .v4-diag-card-photo,
.v4-wrapper .v4-insp-card-photo,
.v4-wrapper .v4-tyre-card-photo { position: relative; }

.v4-wrapper .v4-type-card-photo::after,
.v4-wrapper .v4-card-photo::after,
.v4-wrapper .v4-diag-card-photo::after,
.v4-wrapper .v4-insp-card-photo::after,
.v4-wrapper .v4-tyre-card-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(var(--uw-on-surface-rgb), 0.18) 0%,
              rgba(var(--uw-on-surface-rgb), 0) 46%);
  pointer-events: none;
}


/* ── 4. Lime is an accent, not a field ──────────────────────────────────── */

/* Buttons sized to their content. A primary stretched to 440px with its label
   centred in the middle of the slab was the most visible symptom of this. */
.v4-wrapper .v4-btn-primary,
.v4-wrapper .v4-sidebar-next-btn,
.v4-wrapper .v4-submit-btn {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  align-self: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  box-shadow: none;
}

/* The summary and contact CTAs are deliberately full-bleed in their panel —
   but then the label sits left and the badge pins right, which reads as
   intentional rather than as a centred label adrift in lime. */
.v4-wrapper .v4-summary-inner .v4-sidebar-next-btn,
.v4-wrapper .v4-contact-summary-inner .v4-submit-btn,
.v4-wrapper .v4-contact-summary-inner .v4-sidebar-next-btn {
  display: flex;
  width: 100%;
  align-self: stretch;
}

.v4-wrapper .v4-btn-primary:hover,
.v4-wrapper .v4-sidebar-next-btn:hover,
.v4-wrapper .v4-submit-btn:hover {
  background: var(--uw-cta-dark);
  transform: none;
  box-shadow: 0 4px 14px rgba(var(--uw-on-surface-rgb), 0.14);
}

/* Ghost buttons read as the quieter option they are. */
.v4-wrapper .v4-btn-ghost {
  color: var(--uw-secondary);
  align-self: flex-start;
}
.v4-wrapper .v4-btn-ghost:hover {
  background: transparent;
  color: var(--uw-ink);
}


/* ── Spacing rhythm ─────────────────────────────────────────────────────── */

.v4-wrapper .v4-type-grid,
.v4-wrapper .v4-service-grid,
.v4-wrapper .v4-diag-grid,
.v4-wrapper .v4-insp-grid { gap: var(--sp-3); }

.v4-wrapper .v4-nav {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--hairline);
}

/* The trust line was overlapping the plate's bottom edge by 15px, because the
   plate's border and shadow extend past its box while the tagline's margin
   was measured from the box. */
.v4-wrapper .v4-reg-tagline {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.v4-wrapper .v4-reg-trust-grid { margin-top: var(--sp-5); }


/* ── Quieter chrome ─────────────────────────────────────────────────────── */

/* The tab strip and the sidebar were competing with the content for weight.
   Both are navigation; neither is the point of the screen. */
.v4-wrapper .v4-tabs {
  background: transparent;
  padding: 0;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  margin-bottom: var(--sp-5);
}

.v4-wrapper .v4-tab {
  border-radius: 0;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
}

.v4-wrapper .v4-tab.active {
  background: transparent;
  color: var(--uw-ink);
  font-weight: 600;
  border-bottom-color: var(--uw-ink);
}

/* No border-right: the sidebar is only as tall as its own content, so a rule
   on its edge stopped halfway down the page and read as a broken line. The
   gap does the separating. */
.v4-wrapper .v4-sidebar {
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
}

.v4-wrapper .v4-sidebar-item { font-size: 14px; }

.v4-wrapper .v4-sidebar-item.active {
  background: transparent;
  color: var(--uw-ink);
  font-weight: 600;
}

/* The accordion and add-on panels were flat lavender slabs sitting next to
   white cards; a hairline puts them in the same system. */
.v4-wrapper .v4-addon-section,
.v4-wrapper .v4-includes,
.v4-wrapper .v4-mot-includes {
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: var(--sp-3);
  margin-top: var(--sp-4);
}

.v4-wrapper .v4-includes-header,
.v4-wrapper .v4-accordion-header {
  background: transparent;
  padding: 0;
}


/* ===========================================================================
   V5 — SIMPLIFICATION
   =========================================================================== */

/* ── No progress bar ────────────────────────────────────────────────────── */

/* The track and fill go; the lime phase badge stays, since that pill is
   vocabulary lifted from /booking-system and still tells you where you are. */
.v4-wrapper .v4-progress-track { display: none; }
.v4-wrapper .v4-progress-header { margin-bottom: var(--sp-4); }


/* ── No arrow badges in buttons ─────────────────────────────────────────── */

/* The black disc forced every primary into a two-object layout — label plus
   badge — which fell apart the moment a button was wider than its content:
   the pair floated in the middle of a lime slab with nothing anchoring it.
   Removing it makes the label the whole button, so width stops mattering. */
.v4-wrapper .v4-btn-primary .material-symbols-outlined,
.v4-wrapper .v4-sidebar-next-btn .material-symbols-outlined,
.v4-wrapper .v4-submit-btn .material-symbols-outlined,
.v4-wrapper .v4-demo-btn-primary .material-symbols-outlined {
  display: none;
}

/* Symmetric padding now there is nothing inset on the right. */
.v4-wrapper .v4-btn-primary,
.v4-wrapper .v4-sidebar-next-btn,
.v4-wrapper .v4-submit-btn,
.v4-wrapper .v4-demo-btn-primary {
  padding: 0 30px;
  gap: 0;
  justify-content: center;
  text-align: center;
}

/* The back arrow stays — it points the way it sends you, which is the one
   place an arrow is doing work rather than decorating. */
.v4-wrapper .v4-btn-ghost .material-symbols-outlined {
  font-size: 17px;
  margin-right: 2px;
}


/* ===========================================================================
   V6 — FURTHER REFINEMENT
   =========================================================================== */

/* ── Trust cards join the card system ───────────────────────────────────── */

/* They were the last flat lavender panels sitting beside hairline cards. */
.v4-wrapper .v4-reg-trust-card {
  background: var(--uw-white);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: var(--sp-4) var(--sp-3);
  gap: var(--sp-2);
}

.v4-wrapper .v4-reg-trust-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.v4-wrapper .v4-reg-trust-icon .material-symbols-outlined { font-size: 20px; }

.v4-wrapper .v4-reg-trust-title {
  font-family: var(--uw-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.v4-wrapper .v4-reg-trust-desc { font-size: 12px; line-height: 1.5; }


/* ── Vehicle confirmation: one panel treatment, not two ─────────────────── */

/* The plate sat in a lavender panel with white chips inside it while the
   technical details sat in a flat lavender panel with plain rows — two
   treatments for two halves of the same evidence, side by side. */
.v4-wrapper .v4-vehicle-plate-panel,
.v4-wrapper .v4-vehicle-specs-panel {
  background: var(--uw-white);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: var(--sp-4);
}

.v4-wrapper .v4-vehicle-stat {
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

.v4-wrapper .v4-vehicle-spec-row {
  border-bottom: 1px solid var(--hairline);
  padding: var(--sp-2) 0;
}
.v4-wrapper .v4-vehicle-spec-row:last-child { border-bottom: none; }


/* ── Summary panel: lighter chrome, denser list ─────────────────────────── */

/* 48px lime tiles were sized for a hero, not for a three-row list — they were
   out-weighing the values beside them. */
.v4-wrapper .v4-summary-icon-chip {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}
.v4-wrapper .v4-summary-icon-chip .material-symbols-outlined { font-size: 17px; }

.v4-wrapper .v4-contact-summary-row,
.v4-wrapper .v4-summary-row { gap: var(--sp-2); }

.v4-wrapper .v4-contact-row-label,
.v4-wrapper .v4-summary-row-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--uw-secondary);
}

.v4-wrapper .v4-contact-row-value,
.v4-wrapper .v4-summary-row-value { font-size: 15px; font-weight: 600; }


/* ── Sidebar: an active state you can actually see ──────────────────────── */

/* Bold ink alone was too quiet once the lime pill came off. */
.v4-wrapper .v4-sidebar-item {
  border-radius: 10px;
  padding: 10px 12px;
}
.v4-wrapper .v4-sidebar-item.active {
  background: rgba(var(--uw-on-surface-rgb), 0.06);
  color: var(--uw-ink);
  font-weight: 600;
}
.v4-wrapper .v4-sidebar-item:not(.active):hover {
  background: rgba(var(--uw-on-surface-rgb), 0.035);
}


/* ── Focus rings follow the palette ─────────────────────────────────────── */

/* They were blue, which is now only links and ticks — and blue tracks the
   per-garage brand colour, so on some sites the focus ring would land on
   whatever accent that garage picked. Ink is stable and always passes. */
.v4-wrapper .v4-btn:focus-visible,
.v4-wrapper .v4-submit-btn:focus-visible,
.v4-wrapper .v4-sidebar-next-btn:focus-visible,
.v4-wrapper .v4-time-btn:focus-visible,
.v4-wrapper .v4-tab:focus-visible,
.v4-wrapper .v4-type-card:focus-visible,
.v4-wrapper .v4-service-card:focus-visible,
.v4-wrapper .v4-cat-card:focus-visible,
.v4-wrapper .v4-diag-card:focus-visible,
.v4-wrapper .v4-insp-card:focus-visible,
.v4-wrapper .v4-tyre-card:focus-visible {
  outline: 2px solid var(--uw-ink);
  outline-offset: 3px;
}

.v4-wrapper .v4-input:focus,
.v4-wrapper .v4-input:focus-visible {
  border-color: var(--uw-ink);
  box-shadow: 0 0 0 3px rgba(var(--uw-on-surface-rgb), 0.10);
}


/* ── Time toggle matches the card system ────────────────────────────────── */

.v4-wrapper .v4-time-btn {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  height: 52px;
  font-size: 14px;
  font-weight: 500;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.v4-wrapper .v4-time-btn:hover { border-color: var(--hairline-strong); }
.v4-wrapper .v4-time-btn.active {
  background: var(--uw-ink);
  border-color: var(--uw-ink);
  color: var(--uw-white);
}


/* ── Repair category cards, brought into the same system ────────────────── */

.v4-wrapper .v4-cat-card {
  background: var(--uw-white);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.v4-wrapper .v4-cat-card:hover {
  transform: none;
  border-color: var(--hairline-strong);
  box-shadow: 0 4px 14px rgba(var(--uw-on-surface-rgb), 0.06);
}
.v4-wrapper .v4-cat-card.selected {
  border-color: var(--uw-ink);
  box-shadow: 0 0 0 1px var(--uw-ink);
}
.v4-wrapper .v4-cat-name { font-size: 13px; letter-spacing: 0.04em; }


/* ===========================================================================
   V7 — SECOND REFINEMENT PASS
   Found by walking every service screen and both breakpoints again.
   =========================================================================== */

/* ── One heading per screen, not two ────────────────────────────────────── */

/* Tyres, repairs and diagnostics render the vehicle banner AND a step heading.
   Giving both the display size stacked two 46px headings on top of each other,
   which reads as a mistake. Where a step heading follows, the banner drops to
   a context line and the step heading leads; where it is alone (servicing,
   MOT) it stays the display heading. */
.v4-wrapper .v4-vehicle-banner:has(~ .v4-step-heading),
.v4-wrapper .v4-vehicle-banner:has(~ * .v4-step-heading) {
  font-family: var(--uw-font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--uw-secondary);
  margin-bottom: var(--sp-2);
}


/* ── One price scale across every service ───────────────────────────────── */

/* £151 was 38px on servicing while £25 was 14px on tyres — same role, same
   flow, four times the size. Tyres and add-ons carry mixed content ("Quote
   Required", "from £15/wheel"), so they take a middle step rather than the
   full display size, which would break on the longer strings. */
.v4-wrapper .v4-tyre-card-price,
.v4-wrapper .v4-addon-card-price,
.v4-wrapper .v4-detailing-addon-price {
  font-size: 22px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}


/* ── Booking Summary header stops wrapping ──────────────────────────────── */

/* The guarantee badge was crowding the title into two lines and wrapping onto
   two itself. It is a footnote, not a peer of the heading — it goes below. */
.v4-wrapper .v4-contact-summary-title {
  display: block;
  margin-bottom: var(--sp-3);
}

.v4-wrapper .v4-guarantee-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  background: rgba(var(--uw-on-surface-rgb), 0.05);
  color: var(--uw-secondary);
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.v4-wrapper .v4-guarantee-badge .material-symbols-outlined {
  font-size: 14px;
  color: var(--uw-secondary);
}


/* ── The total stacks instead of running inline ─────────────────────────── */

/* "£209 INC. 20% VAT" sat on one baseline because .v4-contact-price-amount is
   a flex row. The figure is the number; the VAT note belongs under it. */
.v4-wrapper .v4-contact-price-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}


/* ── Pre-purchase becomes comparable ────────────────────────────────────── */

/* Three tiers stacked full-width put ~800px between Basic and Premium, so the
   one thing the screen exists for — comparing them — required scrolling and
   memory. Side by side above 1200px, with the card's internal row becoming a
   column so the price sits under the features rather than beside them. */
.v4-wrapper .v4-insp-card {
  display: flex;
  flex-direction: column;
}

/* Column at every width, not just narrow ones: with the grid now reflowing on
   its own container width, a card can be narrow at any viewport size. */
.v4-wrapper .v4-insp-card-inner {
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}

.v4-wrapper .v4-insp-card-right {
  align-items: flex-end;
  margin-top: auto;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

/* The blank price label reserved a line that is not needed in a column. */
.v4-wrapper .v4-insp-price-label { display: none; }


/* ── Calm the tick marks ────────────────────────────────────────────────── */

/* Sixteen blue filled circles per screen were reading as decoration. Ink at a
   smaller size lets the feature text lead and keeps blue for links only.
   Overriding the token rather than each rule catches every tick at once. */
.v4-wrapper { --uw-success: var(--uw-ink); }

.v4-wrapper .v4-insp-features .material-symbols-outlined,
.v4-wrapper .v4-include-item .material-symbols-outlined,
.v4-wrapper .v4-mot-feature .material-symbols-outlined {
  font-size: 16px;
  opacity: 0.55;
}


/* ── Card icons agree ───────────────────────────────────────────────────── */

/* Tyre-card icons were the last blue glyphs; repair-card icons were already
   ink. Same role, same colour. */
.v4-wrapper .v4-tyre-card-icon .material-symbols-outlined,
.v4-wrapper .v4-diag-card-icon .material-symbols-outlined {
  color: var(--uw-ink);
}


/* ── Section numbers on the contact step ────────────────────────────────── */

/* Lime discs numbered 1-2-3 competed with the lime CTA for attention while
   only labelling sections. Quiet ink is enough. */
.v4-wrapper .v4-form-num {
  background: rgba(var(--uw-on-surface-rgb), 0.06);
  color: var(--uw-ink);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}


/* ===========================================================================
   V8 — ONE RESPONSIVE GRID SYSTEM
   ---------------------------------------------------------------------------
   Every card grid was on a fixed column count driven by VIEWPORT media
   queries — repeat(3, 1fr) above 767px, and so on. But the space a card
   actually gets is not the viewport: the 256px sidebar and the summary rail
   take roughly half of it. At a 1300px window the content column is ~700px,
   so "three columns" meant three 215px cards, and at that width the feature
   text stopped wrapping and started overflowing the card edge.

   auto-fit + minmax reflows on the container's real width instead, so cards
   stack when there is no room for them rather than being crushed — and it
   behaves the same way on every service and at every size, which is the
   point. Repairs keeps a smaller minimum because it is a dense list of
   seventeen categories rather than a set of choices to compare.
   =========================================================================== */

/* auto-fit was the wrong tool and produced exactly the layouts it should
   never produce: three tiers as 2+1, six services as 4+2. It optimises for
   filling the row, which is the opposite of what a fixed set of choices
   needs. A set of options is either shown as a complete row or stacked one
   per row — never broken across unequal rows.

   The measurement has to come from the container, not the window: the card's
   real width is the viewport minus the 256px sidebar minus the summary rail,
   so a viewport media query is measuring something else entirely. Container
   queries measure the space the cards actually have. */

.v4-wrapper .v4-main,
.v4-wrapper .v4-12grid > * { container-type: inline-size; }

/* Default everywhere: one per row. A full row is opted into, only when the
   container can genuinely hold one. */
.v4-wrapper .v4-type-grid,
.v4-wrapper .v4-service-grid,
.v4-wrapper .v4-diag-grid,
.v4-wrapper .v4-insp-grid,
.v4-wrapper .v4-tyre-grid,
.v4-wrapper .v4-service-grid-addon {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  align-items: stretch;
}

.v4-wrapper .v4-cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  align-items: stretch;
}

/* Three-across needs 3 × 250px plus two 20px gaps. Below that the row cannot
   be complete, so it stacks rather than degrading to 2+1. */
@container (min-width: 790px) {
  .v4-wrapper .v4-type-grid,
  .v4-wrapper .v4-service-grid,
  .v4-wrapper .v4-insp-grid,
  .v4-wrapper .v4-tyre-grid,
  .v4-wrapper .v4-service-grid-addon {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Diagnostics is a pair — two across or stacked, never anything else. */
@container (min-width: 540px) {
  .v4-wrapper .v4-diag-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Repairs is the stated exception: seventeen categories are a list to scan,
   not a set to compare, so an incomplete last row is fine here. */
@container (min-width: 480px) {
  .v4-wrapper .v4-cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 720px) {
  .v4-wrapper .v4-cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@container (min-width: 1000px) {
  .v4-wrapper .v4-cat-grid { grid-template-columns: repeat(4, 1fr); }
}

/* The 5- and 7-service layouts positioned cards by explicit grid-column spans,
   which cannot survive auto-fit. Released back to auto so they flow with
   everything else. */
.v4-wrapper .v4-type-grid-5 > *,
.v4-wrapper .v4-type-grid-5 > *:nth-child(4),
.v4-wrapper .v4-type-grid-5 > *:nth-child(5),
.v4-wrapper .v4-type-grid-7 > *,
.v4-wrapper .v4-type-grid-7 > *:nth-child(7) { grid-column: auto; }


/* ── Text wraps instead of overflowing ──────────────────────────────────── */

/* A grid or flex item defaults to min-width:auto, which means it refuses to
   shrink below its content and spills instead. This is what clipped "Full
   suspension arm…" and "Alloy wheel conditio…" at the card edge. */
.v4-wrapper .v4-type-grid > *,
.v4-wrapper .v4-service-grid > *,
.v4-wrapper .v4-diag-grid > *,
.v4-wrapper .v4-insp-grid > *,
.v4-wrapper .v4-tyre-grid > *,
.v4-wrapper .v4-cat-grid > *,
.v4-wrapper .v4-insp-card-inner,
.v4-wrapper .v4-insp-card-left,
.v4-wrapper .v4-insp-card-right,
.v4-wrapper .v4-card-body,
.v4-wrapper .v4-tyre-card-body,
.v4-wrapper .v4-tyre-card-inner,
.v4-wrapper .v4-diag-card-body,
.v4-wrapper .v4-addon-card-body { min-width: 0; }

.v4-wrapper .v4-insp-features,
.v4-wrapper .v4-insp-feature,
.v4-wrapper .v4-include-item,
.v4-wrapper .v4-card-preview-item,
.v4-wrapper .v4-cat-hints,
.v4-wrapper .v4-tyre-card-desc,
.v4-wrapper .v4-card-desc { overflow-wrap: break-word; }


/* ── The summary rail stops squeezing the content ───────────────────────── */

/* It collapsed at 1023px, which left a 1024-1300px band where the rail was
   still taking 4fr from a column that had no room to give. It now drops below
   the content while there is still space to lay the cards out properly. */
/* The summary stays visible. Retiring it to the bottom of the page was my
   call and it was the wrong one: it is the panel that shows people what they
   have chosen and what it costs, so it has to be on screen while they choose.

   The width problem it caused is solved by the measure instead of by moving
   the panel — a 300px rail inside a 1400px frame leaves ~990px of content,
   which clears the 790px three cards need with room to spare. Below 1280px
   there is not enough for both, so the rail steps under the content rather
   than squeezing the cards. */
@media (min-width: 1280px) {
  .v4-wrapper .v4-12grid { grid-template-columns: minmax(0, 1fr) 300px; }
  .v4-wrapper .v4-asym-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .v4-wrapper .v4-step4-sidebar,
  .v4-wrapper .v4-contact-summary { position: sticky; top: 76px; }
}

@media (max-width: 1279px) {
  .v4-wrapper .v4-12grid,
  .v4-wrapper .v4-asym-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .v4-wrapper .v4-step4-sidebar,
  .v4-wrapper .v4-contact-summary { position: static; }

  /* Full column width, same as every card beside it. It was capped at 460px
     to stop it stretching into a letterbox when stacked — which made it
     visibly smaller than the cards above it on tablet and landscape phone.
     Same principle as the card cap: keep the column's width, change what
     happens inside. */
  .v4-wrapper .v4-summary-card,
  .v4-wrapper .v4-contact-summary { max-width: none; width: 100%; }
}

/* Below the sidebar breakpoint the main column gets its padding back. */
@media (max-width: 1023px) {
  .v4-wrapper .v4-main { padding: var(--sp-4) var(--sp-3); }
}

@media (max-width: 640px) {
  .v4-wrapper .v4-main { padding: var(--sp-3) var(--sp-2); }
  .v4-wrapper .v4-step-heading,
  .v4-wrapper .v4-vehicle-banner { font-size: clamp(26px, 7vw, 34px); }
  .v4-wrapper .v4-card-price,
  .v4-wrapper .v4-diag-card-price,
  .v4-wrapper .v4-insp-price,
  .v4-wrapper .v4-mot-price { font-size: 32px; }
}


/* ===========================================================================
   V9 — PHASE 1: THE FRAME
   ---------------------------------------------------------------------------
   Three problems this solves, all of them structural rather than cosmetic:

   1. Nothing shared a measure. At 1700px the registration screen had its badge
      hard left, its plate centred and its button hard right — three alignments
      on one screen, which is what "random padding" actually was.
   2. Three columns never fit. Sidebar (256) + content + summary rail (320).
      Embedded on a real garage site the container is 1100-1300px, not 1700,
      which left roughly 550px of content. The sidebar had to go somewhere.
   3. The rail and the nav were fighting for the same space, so cards were
      being crushed rather than laid out.

   The nav moves to a horizontal bar. Every item and its existing click
   behaviour is untouched — this is a layout change only, nothing is removed.
   =========================================================================== */

/* ── Wrapper becomes a column: bar on top, content beneath ──────────────── */

.v4-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.v4-wrapper .v4-sidebar {
  width: 100%;
  min-height: 0;
  flex-shrink: 0;
  align-self: stretch;
  position: sticky;
  top: 0;
  z-index: 20;
  display: block;
  padding: 0;
  background: var(--uw-surface);
  border-radius: 0;
  border-bottom: 1px solid var(--hairline);
  box-shadow: none;
}

.v4-wrapper .v4-sidebar-nav {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) 0;
  overflow-x: auto;
  scrollbar-width: none;
  /* One measure — the bar's items line up with the content below it. */
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}
.v4-wrapper .v4-sidebar-nav::-webkit-scrollbar { display: none; }

.v4-wrapper .v4-sidebar-item {
  flex-shrink: 0;
  gap: var(--sp-1);
  padding: 8px 14px;
  font-size: 13px;
  white-space: nowrap;
}
.v4-wrapper .v4-sidebar-item .material-symbols-outlined { font-size: 18px; }


/* ── One measure for every screen ───────────────────────────────────────── */

/* This is the fix for the alignment scatter. The step badge, the heading, the
   cards and the nav row now all resolve to the same left and right edge,
   because they all sit inside one container of one width. */
/* ONE measure, at every width, for every screen. Not two — a measure that
   changes size is not a measure. 1180px holds the summary rail inside it
   (1180 - 320 rail - 48 gap = 812px of content, which clears the 790px that
   three cards across need) so the rail never pushes the cards out of the
   grid, and never sits outside the alignment either. */
/* One frame width, 1400px. Wide enough to hold the content column and the
   300px summary rail side by side without crushing the cards (1400 - 64
   padding - 300 rail - 48 gap = 988px of content, against the 790px three
   cards need). Individual blocks cap themselves inside it where a narrower
   measure reads better. */
/* No width cap. This is an embed — the garage's own page container decides
   how wide the widget gets, so capping it again inside only added margins on
   top of theirs. Side padding is just enough to keep content off the edge. */
.v4-wrapper .v4-main {
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--sp-4) 44px;
  min-width: 0;
}

.v4-wrapper .v4-sidebar-nav {
  max-width: none;
  margin: 0;
  padding-left: 44px;
  padding-right: 44px;
}

@media (max-width: 900px) {
  .v4-wrapper .v4-main { padding: var(--sp-4) var(--sp-3); }
  .v4-wrapper .v4-sidebar-nav { padding-left: var(--sp-3); padding-right: var(--sp-3); }
}

/* A grid holding one card gives it one track — which is why the single
   diagnostics card sat at half width while the single MOT card filled its
   column. A lone card spans the full row, on every grid. */
/* A lone card spans the row.

   It used to be capped at 820px, to stop a single card stretching to 1270px
   and turning its photograph into a letterbox. That cap was the wrong answer:
   it left the card 500px short of "What's included?" and the add-on panel
   directly beneath it, which all span the column. An element that looks wrong
   at full width does not need to be narrower — it needs a different internal
   arrangement at that width. See the horizontal variant in V11 below. */
.v4-wrapper .v4-type-grid > *:only-child,
.v4-wrapper .v4-service-grid > *:only-child,
.v4-wrapper .v4-diag-grid > *:only-child,
.v4-wrapper .v4-insp-grid > *:only-child,
.v4-wrapper .v4-tyre-grid > *:only-child,
.v4-wrapper .v4-cat-grid > *:only-child { grid-column: 1 / -1; }


/* ── One navigation, not two ────────────────────────────────────────────── */

/* The tab strip listed the same six services as the top bar, directly beneath
   it. That duplication was tolerable when the nav was a left rail — two
   different axes — but with the nav across the top they are the same control
   stacked twice. The top bar wins because it also carries the steps, and its
   items already switch service: uwUpdateSidebar() wires each one to
   goToReg(), which jumps straight to step 4 when a vehicle is confirmed. So
   nothing is lost by removing the strip. */
.v4-wrapper .v4-tabs { display: none; }


/* ── One alignment per screen ───────────────────────────────────────────── */

/* The registration step was centred while every other screen was left-aligned,
   so the flow changed axis halfway through. Everything reads left now; only
   the plate itself stays centred in its own block, because a number plate is
   an object rather than a column of text. */
/* .v4-reg-section is a 560px column with `margin: 0 auto`, so even with its
   text left-aligned the whole column floated in the centre of the measure
   while the step badge and the nav row spanned the full width — three
   alignments on one screen. Anchoring it left puts every element on this
   screen on the same axis as every element on every other screen. */
/* The registration screen stays centred. Left-aligning it was my change and
   it was wrong — one field and a number plate is a focal screen, not a column
   of content, and centring is what made it read as the entry point. */
.v4-wrapper .v4-reg-section {
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.v4-wrapper .v4-reg-section .v4-step-heading,
.v4-wrapper .v4-reg-section .v4-step-sub,
.v4-wrapper .v4-reg-tagline { text-align: center; max-width: none; }

.v4-wrapper .v4-reg-plate-wrap {
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--sp-4);
}

/* Three across, always. These are small reassurance notes that sit under the
   input — they are not choices, so they never stack and never grow to card
   size. Fixed at three columns at every width, including mobile. */
.v4-wrapper .v4-reg-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.v4-wrapper .v4-reg-trust-card {
  padding: var(--sp-3) var(--sp-2);
  gap: 6px;
  border-radius: 14px;
}

.v4-wrapper .v4-reg-trust-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
.v4-wrapper .v4-reg-trust-icon .material-symbols-outlined { font-size: 16px; }

.v4-wrapper .v4-reg-trust-title { font-size: 12px; }
.v4-wrapper .v4-reg-trust-desc  { font-size: 11px; line-height: 1.45; }

@media (max-width: 520px) {
  .v4-wrapper .v4-reg-trust-card { padding: var(--sp-2) 8px; }
  .v4-wrapper .v4-reg-trust-desc { display: none; }
}


/* ── The rail sits inside the measure, not outside it ───────────────────── */

@media (max-width: 1600px) {
  .v4-wrapper .v4-12grid,
  .v4-wrapper .v4-asym-grid { gap: var(--sp-5); }
}

@media (max-width: 1023px) {
  .v4-wrapper .v4-sidebar { display: block; }
  .v4-wrapper .v4-main { padding: var(--sp-4) var(--sp-3); }
}

@media (max-width: 640px) {
  .v4-wrapper .v4-main { padding: var(--sp-3) var(--sp-3); }
  .v4-wrapper .v4-sidebar-nav { padding-left: var(--sp-3); padding-right: var(--sp-3); }
}


/* ===========================================================================
   V10 — THE CARD ANATOMY
   ---------------------------------------------------------------------------
   media / body / foot, stacked. Defined once, here, and used by every card.

   This replaces the two-column inner (content beside price) that produced all
   three of the defects measured on the diagnostics and MOT cards:

     · 113px and 225px of void under the price, because flex stretched the row
       to the taller column and the short one had nothing beneath it
     · the price sitting 126px off the padding line, because neither column
       grew so the leftover width piled up after the last one
     · a 0px gap under the diagnostics photo against 16px on MOT, because the
       photo's bleed margin was written per card

   A stacked foot that spans the full width removes the first two by
   construction rather than by tuning. One media margin removes the third.
   =========================================================================== */

.v4-wrapper .uw-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  overflow: hidden;
}

/* Bleed equals the padding, so the photo meets the card edge exactly, and one
   bottom margin gives every card the same gap beneath it. */
.v4-wrapper .uw-card-media {
  margin: -28px -28px 20px;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.v4-wrapper .uw-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.v4-wrapper .uw-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.v4-wrapper .uw-card-features {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.v4-wrapper .uw-card-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--uw-on-variant);
}
.v4-wrapper .uw-card-features .material-symbols-outlined {
  font-size: 16px;
  opacity: 0.55;
  flex-shrink: 0;
  margin-top: 1px;
}

/* The foot spans the card. Price on the padding line at the left, selector or
   note on the padding line at the right — neither can drift. */
.v4-wrapper .uw-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-top: 24px;
}

.v4-wrapper .uw-card-price-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.v4-wrapper .uw-card-price {
  font-size: 38px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--uw-ink);
}

.v4-wrapper .uw-card-vat {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--uw-secondary);
  margin-top: 6px;
}

.v4-wrapper .uw-card-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--uw-secondary);
  white-space: nowrap;
}
.v4-wrapper .uw-card-note .material-symbols-outlined { font-size: 15px; }

.v4-wrapper .uw-card-select {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--uw-white);
  box-shadow: 0 0 0 2px rgba(var(--uw-on-surface-rgb), 0.22);
  flex-shrink: 0;
  align-self: center;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.v4-wrapper .selected .uw-card-select,
.v4-wrapper .uw-card.selected .uw-card-select {
  background: var(--uw-ink);
  box-shadow: 0 0 0 2px var(--uw-ink), inset 0 0 0 4px var(--uw-white);
}


/* ── One padding, one photo, on every card ──────────────────────────────── */

/* Measured across the six card types: padding was 16px, 22px, 24px, 28px and
   "28px 32px" — five different boxes. One value now, so a card's content
   sits on the same line whichever service you are looking at. */
.v4-wrapper .v4-service-card,
.v4-wrapper .v4-insp-card,
.v4-wrapper .v4-tyre-card,
.v4-wrapper .v4-diag-card,
.v4-wrapper .v4-mot-main-card { padding: 28px; }

/* The service-picker card carries its padding on the body instead, because
   its photo is edge-to-edge rather than bleeding out of a padded box. Same
   28px, applied one level in. */
.v4-wrapper .v4-type-card.v4-type-card-img-top { padding: 0; }
.v4-wrapper .v4-type-card-body { padding: 28px; }

/* Every photo: bleed equal to the padding, one gap beneath, one height. The
   bleeds were -16, -24, -28 and -32 to match five different paddings; the
   heights were 124, 150 and 200. */
.v4-wrapper .v4-card-photo,
.v4-wrapper .v4-insp-card-photo,
.v4-wrapper .v4-tyre-card-photo,
.v4-wrapper .v4-diag-card-photo,
.v4-wrapper .v4-mot-card-photo,
.v4-wrapper .uw-card-media {
  margin: -28px -28px 20px;
  height: 180px;
}

.v4-wrapper .v4-type-card-photo { margin: 0; height: 180px; }


/* ===========================================================================
   V11 — WIDE SINGLE CARDS GO HORIZONTAL
   ---------------------------------------------------------------------------
   The principle both caps violated: everything in a column spans that column,
   and a component that looks wrong at full width changes its internal
   arrangement rather than shrinking away from its neighbours.

   A lone card now fills the column like the accordion and add-on panel below
   it. At that width a 180px photograph on top is a letterbox strip, so the
   card lays out on the horizontal axis instead — media as a full-height panel
   on the left, body and foot stacked on the right. Same three parts, same
   order, same padding; only the axis changes.

   Keyed to the container, so it is the space the card actually has that
   decides — not the viewport, which is what got this wrong repeatedly.
   Scoped to lone cards: cards in a three-across grid are narrow even when
   their column is wide, so they stay stacked.
   =========================================================================== */

@container (min-width: 720px) {

  .v4-wrapper .v4-diag-grid > .uw-card:only-child,
  .v4-wrapper .v4-mot-main-card.uw-card {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    grid-template-areas:
      "media body"
      "media foot";
    align-items: stretch;
    padding: 0;
  }

  /* The media becomes a full-height panel, so it crops as a portrait rather
     than a letterbox. No negative margins needed — it is a grid area that
     already meets the card edge. */
  .v4-wrapper .v4-diag-grid > .uw-card:only-child .uw-card-media,
  .v4-wrapper .v4-mot-main-card.uw-card .uw-card-media {
    grid-area: media;
    margin: 0;
    height: 100%;
    min-height: 100%;
  }

  /* Padding moves inward to the body and foot, so the 28px box is preserved
     against the card's own edges on the content side. */
  .v4-wrapper .v4-diag-grid > .uw-card:only-child .uw-card-body,
  .v4-wrapper .v4-mot-main-card.uw-card .uw-card-body {
    grid-area: body;
    padding: 28px 28px 0;
  }

  .v4-wrapper .v4-diag-grid > .uw-card:only-child .uw-card-foot,
  .v4-wrapper .v4-mot-main-card.uw-card .uw-card-foot {
    grid-area: foot;
    padding: 0 28px 28px;
    margin-top: 24px;
  }
}


/* ===========================================================================
   V12 — THE CONFIRMATION SCREEN JOINS THE SYSTEM
   ---------------------------------------------------------------------------
   uwShowDemoConfirmation() replaces .v4-main wholesale, so none of the card,
   grid or nav work above reaches this screen. It was still on the older
   lavender-panel treatment — a #f0f1fa frame holding white rows at a 24px
   radius — while every other card in the widget is a white card with a
   hairline at 18px. It is also the last thing a garage owner sees when they
   try the demo, so it earns the same care as the rest.
   =========================================================================== */

.v4-wrapper .v4-demo-confirm {
  max-width: 620px;
  padding: 72px 24px 88px;
}

/* The same card as everywhere else: white, hairline, 18px. */
.v4-wrapper .v4-demo-card {
  background: var(--uw-white);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: none;
  padding: 4px 24px;
  overflow: hidden;
}

/* Rows are dividers inside one card, not stacked white blocks inside a frame,
   so they take the hairline and drop their own corner radii — the card clips
   them, the same rule the photos now follow. */
.v4-wrapper .v4-demo-row {
  background: transparent;
  padding: 15px 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
}
.v4-wrapper .v4-demo-row:last-child { border-bottom: none; }

/* Key/value on the small-caps + ink pairing the booking summary uses. */
.v4-wrapper .v4-demo-row-key {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--uw-secondary);
}
.v4-wrapper .v4-demo-row-val {
  font-size: 15px;
  font-weight: 600;
  color: var(--uw-ink);
}

/* The success badge becomes an icon tile like every other icon tile, rather
   than its own 72px shape. */
.v4-wrapper .v4-demo-badge {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  margin-bottom: var(--sp-4);
}
.v4-wrapper .v4-demo-badge .material-symbols-outlined { font-size: 30px; }

/* Display heading on the same scale as every other screen's heading. */
.v4-wrapper .v4-demo-title {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-2);
}

/* `.v4-wrapper p { margin: 0 }` outranks the base `.v4-demo-lead` rule, so the
   auto side margins have to be restated here or the 460px measure sits flush
   left while its text stays centred. */
.v4-wrapper .v4-demo-lead {
  font-size: 16px;
  line-height: 1.55;
  color: var(--uw-secondary);
  margin: 0 auto var(--sp-5);
}

.v4-wrapper .v4-demo-note {
  font-size: 12px;
  color: var(--uw-secondary);
  margin: var(--sp-3) 0 var(--sp-4);
}

.v4-wrapper .v4-demo-actions { gap: var(--sp-2); }

/* ── Centred, everywhere ──────────────────────────────────────────────────
   The registration screen is centred (the designer's call — a single field and
   a number plate is a focal screen). The nav is centred on EVERY screen to
   match it, not just this one: a persistent element that changes axis between
   steps reads as a fault, which is exactly what centring it on the reg screen
   alone produced. Centred nav + centred entry screen = nothing moves. */

.v4-wrapper .v4-sidebar-nav {
  justify-content: center;
}

.v4-wrapper .v4-reg-section {
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.v4-wrapper .v4-reg-section .v4-step-heading,
.v4-wrapper .v4-reg-section .v4-step-sub,
.v4-wrapper .v4-reg-tagline {
  text-align: center;
  max-width: none;
}

.v4-wrapper .v4-reg-plate-wrap {
  margin-left: auto;
  margin-right: auto;
}

/* Below 900px the nav row scrolls horizontally; centring it there would start
   the user mid-row instead of at the first item. */
@media (max-width: 900px) {
  .v4-wrapper .v4-sidebar-nav { justify-content: flex-start; }
}


/* ===========================================================================
   VEHICLE CONFIRM — MOT STATUS PILL
   ---------------------------------------------------------------------------
   MOT expiry moved out of the quiet Technical Details list and into a fourth
   stat card beside Make / Model / Year. It is the one fact on this screen with
   a deadline attached, so it gets a filled pill rather than a row of grey text.

   The stats row goes to two columns at every width so four cards square off.
   The 2x2 was already the phone layout; making it universal also closes the
   gap that sat beside Year when there were only three cards.
   =========================================================================== */

:root {
  --uw-warn: #ffc94a;   /* amber fill, ink text — 30 days or less to run */
}

.v4-wrapper .v4-vehicle-stats-row {
  grid-template-columns: repeat(2, 1fr);
}

/* The pill sits where .v4-vehicle-stat-value sits in the other three cards, so
   it carries the same top margin off the label and the same line box height. */
.v4-mot-status-pill {
  display: inline-block;
  max-width: 100%;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--uw-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lime is a fill-only colour at ~1.3:1, so the text on it is always ink. */
.v4-mot-status-pill.valid {
  background: var(--uw-cta);
  color: var(--uw-ink);
}

.v4-mot-status-pill.due {
  background: var(--uw-warn);
  color: var(--uw-ink);
}

/* Expired is the one state that should shout, so it breaks the ink-on-fill
   pattern the other two share. */
.v4-mot-status-pill.expired {
  background: var(--uw-error);
  color: #ffffff;
}

.v4-mot-status-pill.none {
  background: rgba(var(--uw-outline-var-rgb),0.25);
  color: var(--uw-secondary);
}