/* =============================================================================
   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 — Maxamy ── the ONLY place the brand hex appears ── */
  --uw-primary:             #FF6400;
  --uw-primary-dark:        var(--uw-primary);   /* flat colour, no gradient */

  /* ── CTA ROLE — brand fill, white text ── */
  --uw-cta:                 var(--uw-primary);
  --uw-cta-dark:            var(--uw-primary-dark);
  --uw-cta-text:            #ffffff;

  /* ── LINK ROLE ── */
  --uw-link:                var(--uw-primary);

  /* ── SURFACE SCALE — Maxamy ── */
  --uw-surface:             #f7f9fb;
  --uw-surface-low:         #f2f4f6;
  --uw-surface-lowest:      #eff1f3;
  --uw-surface-mid:         #eceef0;
  --uw-surface-high:        #e6e8ea;
  --uw-surface-top:         #e0e3e5;
  --uw-white:               #ffffff;

  /* ── SELECTED STATE ── */
  --uw-selected-bg:         rgba(var(--uw-primary-rgb), 0.08);

  /* ── TEXT SCALE — Maxamy ── */
  --uw-on-surface:          #191c1e;
  --uw-on-variant:          #444653;
  --uw-on-surface-variant:  #444653;
  --uw-secondary:           #515f74;
  --uw-outline:             #6a6b7a;
  --uw-outline-var:         #c4c5d5;

  /* Border role for resting control edges (add-on cards, tyre cards, table
     rules). Must stay defined: several border shorthands reference it. */
  --uw-border:              var(--uw-outline-var);

  /* ── SUCCESS / TRUST — fixed semantic green ── */
  --uw-success:             #1a7a49;
  --uw-success-bg:          #f0faf5;

  /* ── ERROR ── */
  --uw-error:               #ba1a1a;
  --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;

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

  /* ── RGB CHANNELS ── */
  --uw-primary-rgb:         255, 100, 0;
  --uw-cta-rgb:             var(--uw-primary-rgb);
  --uw-primary-bg:          rgba(var(--uw-primary-rgb), 0.10);
  --uw-on-surface-rgb:      25, 28, 30;
  --uw-error-rgb:           186, 26, 26;
  --uw-outline-var-rgb:     196, 197, 213;
  --uw-success-rgb:         26, 122, 73;
  --uw-white-rgb:           255, 255, 255;
  --uw-black-rgb:           0, 0, 0;

  /* ── TYPOGRAPHY ── */
  --uw-font-heading: 'Onest', system-ui, sans-serif;
  --uw-font-body:    'Inter', system-ui, sans-serif;
}


/* === 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;
}

/* === REPAIRS SEARCH === */
.v4-repair-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.v4-repair-search-icon {
  position: absolute;
  left: 16px;
  width: 22px;
  height: 22px;
  fill: var(--uw-secondary);
  pointer-events: none;
}

/* 16px text stops iOS zooming the page when the field is focused */
.v4-wrapper .v4-repair-search-input {
  width: 100%;
  height: 52px;
  padding: 0 52px;
  background: var(--uw-surface-low);
  border: 2px solid transparent;
  border-radius: 12px;
  font-family: var(--uw-font-body);
  font-size: 16px;
  color: var(--uw-on-surface);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.2s, border-color 0.2s;
}

.v4-wrapper .v4-repair-search-input::placeholder { color: var(--uw-outline); }

.v4-wrapper .v4-repair-search-input:focus {
  background: var(--uw-white);
  border-color: var(--uw-primary);
}

.v4-repair-search-clear {
  position: absolute;
  right: 4px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--uw-secondary);
  cursor: pointer;
  transition: background 0.15s;
}

.v4-repair-search-clear:hover { background: var(--uw-surface-mid); }
.v4-repair-search-clear .material-symbols-outlined { font-size: 20px; }

/* Jobs ticked so far, under the search box. The summary panel only sits beside
   the content from 1280px; below that it is under the page, so this keeps a
   pick in view on phones and tablets. */
.v4-repair-picked {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--uw-selected-bg);
  border: 1px solid rgba(var(--uw-primary-rgb),0.25);
  border-radius: 12px;
}

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

@media (min-width: 1280px) {
  .v4-repair-picked { display: none; }
}

.v4-repair-picked-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--uw-on-surface);
}

.v4-repair-picked-head .material-symbols-outlined {
  font-size: 18px;
  color: var(--uw-primary);
}

.v4-repair-picked-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.v4-repair-picked-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  max-width: 100%;
  padding: 4px 4px 4px 14px;
  background: var(--uw-white);
  border: 1px solid var(--uw-outline-var);
  border-radius: 999px;
}

.v4-repair-picked-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--uw-on-surface);
  overflow-wrap: anywhere;
}

.v4-repair-picked-pos {
  font-size: 11px;
  font-weight: 500;
  color: var(--uw-secondary);
}

.v4-repair-picked-remove {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--uw-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

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

.v4-repair-picked-remove .material-symbols-outlined { font-size: 18px; }

/* A ticked search result says so in words, not only in colour */
.v4-svc-poa-picked { display: none; }
.v4-svc-item.selected .v4-svc-poa-tbc { display: none; }
.v4-svc-item.selected .v4-svc-poa-picked { display: inline; color: var(--uw-on-surface); }

.v4-repair-search-results { margin-bottom: 24px; }

.v4-repair-search-count {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--uw-secondary);
}

.v4-repair-search-empty {
  padding: 20px;
  background: var(--uw-surface-low);
  border-radius: 12px;
  font-size: 14px;
  color: var(--uw-on-variant);
}

.v4-svc-cat {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--uw-secondary);
}

/* === 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); }

/* Sorry message for a postcode outside the service area, under the postcode row */
.v4-area-msg {
  display: none;
  margin: -6px 0 18px;
  padding: 12px 14px;
  background: var(--uw-error-bg);
  border-left: 3px solid var(--uw-error);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--uw-on-surface);
}

.v4-area-msg a {
  font-weight: 600;
  color: var(--uw-on-surface);
  text-decoration: underline;
}

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 */


/* 7 services — 3 + 3 + 1, final card centred */


/* Step 1 — 5-card balanced grid: 3 on top, 2 centred below — Grays Tyres */


  /* bottom-left card, shifted in to centre the row */
  /* bottom-right card */


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

/* --- Shared: Add-on section wrapper --- */


/* --- Servicing → MOT add-on toggle card --- */


/* --- 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);
}


/* --- 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: --uw-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 Onest
     - blue+lime radial gradient as the media/accent fill
   =========================================================================== */

:root {
  --uw-font-display: 'Onest', system-ui, sans-serif;
  --uw-panel:        var(--uw-surface-low);
  --uw-ink:          var(--uw-on-surface);
  --uw-blue-accent:  var(--uw-primary);   /* legacy name kept so existing rules resolve */
  --uw-card-shadow:  0 1px 2px rgba(13,19,34,0.10), 0 4px 12px rgba(13,19,34,0.10);
  /* Slight orange glow over light grey. */
  --uw-media-grad:   radial-gradient(58% 76% at 88% 52%, rgba(var(--uw-primary-rgb),0.28) 0%, rgba(var(--uw-primary-rgb),0) 62%),
                     linear-gradient(160deg, var(--uw-surface-low) 0%, var(--uw-surface-top) 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-cta-text);
  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(var(--uw-primary-rgb),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-cta-text);
  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(var(--uw-primary-rgb),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-cta-text);
  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-cta-text);
  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(var(--uw-primary-rgb),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-cta-text);
  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 --uw-panel
   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-cta-text);
  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: proportional-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: proportional-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: proportional-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 --uw-panel 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;
}

/* Small text on the brand fill is ink: white on the brand orange is only ~2.9:1. */
.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);
}

/* ===========================================================================
   GDPR CONSENT ROW — restored for live bookings (removed in the demo)
   =========================================================================== */
.v4-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--uw-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--uw-secondary);
  margin: 4px 0 8px;
}
.v4-consent-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--uw-primary);
  flex-shrink: 0;
  cursor: pointer;
}
/* Webflow's base CSS sets label { display:block; font-weight:bold; margin-bottom:5px }. */
.v4-consent-row label { cursor: pointer; display: block; font-weight: 400; margin: 0; }
.v4-consent-row a { color: var(--uw-primary); text-decoration: underline; }

/* ===========================================================================
   FOUR SERVICES — a complete 2×2, never 3+1. Same rule the designer gave the
   diagnostics pair: two across when the container can hold them, else stacked.
   =========================================================================== */
@container (min-width: 540px) {
  .v4-wrapper .v4-type-grid.v4-type-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ===========================================================================
   DATE INPUT ON iOS — Safari gives native date inputs an intrinsic min-width
   that ignores width:100%, so the field ran past the card's right edge on
   iPhone. Drop the native appearance, let it shrink, and left-align the value
   like every other field.
   =========================================================================== */
.v4-wrapper input.v4-input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  line-height: 52px;
  text-align: left;
}
.v4-wrapper input.v4-input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}

/* ===========================================================================
   GUARANTEE LINE UNDER THE CTA — .v4-wrapper p { margin:0 } outranks the base
   .v4-submit-footnote margin, so the line sat flush against the button at
   every breakpoint. Restated at wrapper specificity.
   =========================================================================== */
.v4-wrapper .v4-submit-footnote {
  margin-top: 16px;
  padding: 0 8px;
}

/* ===========================================================================
   GROUND — white, to match the Maxamy page body (was --uw-surface grey).
   Kept last so it wins over the base and site-match ground rules.
   =========================================================================== */
.v4-wrapper,
.v4-wrapper .v4-sidebar {
  background: var(--uw-white);
}


/* ==== REVIEW (basket review step and basket notice) ==== */
.v4-review-lines { display: flex; flex-direction: column; gap: 8px; margin: 20px 0 12px; }
.v4-review-line { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--uw-white); border: 1px solid var(--uw-border); border-radius: 12px; }
.v4-review-main { flex: 1; min-width: 0; }
.v4-review-name { font-weight: 600; color: var(--uw-on-surface); overflow-wrap: anywhere; }
.v4-review-sub { margin-top: 2px; font-size: 13px; color: var(--uw-secondary); }
.v4-review-price { font-weight: 700; white-space: nowrap; }
.v4-review-price.fixed { color: var(--uw-on-surface); }
.v4-review-price.quote { color: var(--uw-secondary); font-weight: 600; font-size: 13px; }
.v4-review-remove { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -6px -8px -6px 0; border: 0; border-radius: 50%; background: transparent; color: var(--uw-secondary); cursor: pointer; }
.v4-review-remove:hover { background: var(--uw-surface-low); color: var(--uw-on-surface); }
.v4-review-totals { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; padding: 0 4px; }
.v4-review-total { display: flex; justify-content: space-between; font-size: 18px; color: var(--uw-on-surface); }
.v4-review-quote-note { font-size: 14px; color: var(--uw-secondary); }
.v4-review-empty { margin: 20px 0; padding: 24px; text-align: center; color: var(--uw-secondary); background: var(--uw-surface-low); border-radius: 12px; }
.v4-review-add { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 20px; padding: 10px 14px; border: 1px dashed var(--uw-border); border-radius: 10px; background: transparent; color: var(--uw-link); font: inherit; font-weight: 600; cursor: pointer; }
.v4-basket-notice { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--uw-border); border-radius: 12px; background: var(--uw-surface-low); }
.v4-basket-notice-text { margin-bottom: 10px; color: var(--uw-on-surface); }
.v4-basket-notice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* ==== END REVIEW ==== */


/* ==== TRAY ==== */
.v4-tray { margin: 16px 0 0; }
.v4-tray-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--uw-white); border: 1px solid var(--uw-border); border-radius: 14px; }
.v4-tray-info { display: flex; flex-direction: column; min-width: 0; }
.v4-tray-count { font-size: 13px; color: var(--uw-secondary); }
.v4-tray-total { font-weight: 700; color: var(--uw-on-surface); overflow-wrap: anywhere; }
.v4-tray-btn { flex: none; }
/* ==== END TRAY ==== */


/* ==== REG AND CONFIRM ==== */
.v4-reg-section .v4-reg-plate-wrap { margin: 24px auto 0; }
.v4-wrapper .v4-reg-cta { width: 100%; align-self: stretch; justify-content: center; margin-top: 12px; }
.v4-reg-reassure { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 0; font-size: 13px; color: var(--uw-secondary); text-align: left; }
.v4-reg-reassure .material-symbols-outlined { font-size: 18px; color: var(--uw-success); flex: none; }
.v4-reg-input-static { display: flex; align-items: center; justify-content: center; }
.v4-lookup-status { max-width: 400px; margin: 20px auto 0; text-align: center; }
.v4-lookup-line { height: 4px; background: var(--uw-surface-mid); border-radius: 2px; overflow: hidden; }
.v4-lookup-line-fill { display: block; height: 100%; width: 40%; background: var(--uw-cta); border-radius: 2px; animation: uwLookupSlide 1.2s ease-in-out infinite; }
@keyframes uwLookupSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.v4-lookup-text { margin: 14px 0 2px; font-weight: 600; color: var(--uw-on-surface); }
.v4-lookup-sub { margin: 0; font-size: 13px; color: var(--uw-secondary); }
@media (prefers-reduced-motion: reduce) { .v4-lookup-line-fill { animation: none; width: 100%; opacity: 0.5; } }
.v4-confirm-card { max-width: 480px; margin: 20px auto 0; padding: 20px; background: var(--uw-white); border: 1px solid var(--uw-border); border-radius: 16px; display: flex; flex-direction: column; gap: 8px; }
.v4-confirm-card .v4-vehicle-plate-big { height: 64px; margin-bottom: 8px; }
.v4-confirm-card .v4-vehicle-plate-text { font-size: 38px; letter-spacing: 4px; }
.v4-confirm-main { font-size: 20px; font-weight: 700; color: var(--uw-on-surface); }
.v4-confirm-meta { font-size: 14px; color: var(--uw-secondary); }
.v4-confirm-mot { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--uw-secondary); }
.v4-confirm-specs { margin-top: 8px; border-top: 1px solid var(--uw-border); }
.v4-confirm-specs .v4-vehicle-spec-row { padding: 8px 0; }
.v4-confirm-edit { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; border: 0; background: transparent; color: var(--uw-link); font: inherit; font-weight: 600; cursor: pointer; }
.v4-wrapper .v4-confirm-cta { display: flex; width: 100%; max-width: 480px; align-self: stretch; margin: 16px auto 0; justify-content: center; }
/* Short screens (phone landscape): tighten the confirm card so the button stays within reach */
@media (max-height: 500px) {
  .v4-confirm-card { padding: 12px 16px; gap: 4px; }
  .v4-confirm-card .v4-vehicle-plate-big { height: 48px; margin-bottom: 4px; }
  .v4-confirm-card .v4-vehicle-plate-text { font-size: 30px; letter-spacing: 3px; }
  .v4-confirm-main { font-size: 17px; }
}
/* ==== END REG AND CONFIRM ==== */


/* ==== NAV ==== */
/* The seven-item strip mixed steps and services. Progress is now the indicator above the content,
   and services are switched with the badge tabs inside the service screens. */
.v4-wrapper .v4-sidebar { display: none; }
.v4-wrapper .v4-progress { margin-bottom: 20px; }
.v4-wrapper .v4-progress-header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.v4-wrapper .v4-progress-step { display: inline; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--uw-secondary); text-transform: none; }
.v4-wrapper .v4-progress-phase { display: inline; background: none; color: var(--uw-on-surface); padding: 0; border-radius: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.v4-progress-segs { display: flex; gap: 4px; }
.v4-progress-seg { flex: 1; height: 4px; border-radius: 2px; background: var(--uw-surface-top); }
.v4-progress-seg.is-done { background: var(--uw-primary); opacity: 0.45; }
.v4-progress-seg.is-active { background: var(--uw-primary); }

.v4-tile-grid { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 560px; margin: 8px auto 0; }
@media (min-width: 640px) { .v4-tile-grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; } }
.v4-wrapper .v4-tile { display: flex; flex-direction: row; align-items: center; gap: 14px; width: 100%; padding: 16px; text-align: left; background: var(--uw-white); border: 1px solid var(--uw-border); border-radius: 14px; box-shadow: none; cursor: pointer; font: inherit; color: var(--uw-on-surface); }
.v4-wrapper .v4-tile::after { display: none; }
.v4-wrapper .v4-tile:hover { border-color: var(--uw-primary); }
.v4-tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--uw-primary-bg); color: var(--uw-primary); }
.v4-tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.v4-tile .v4-type-title { font-size: 17px; font-weight: 700; }
.v4-tile-line { font-size: 14px; color: var(--uw-secondary); }
.v4-tile-tag { font-size: 12px; font-weight: 600; color: var(--uw-success); }
.v4-tile-go { color: var(--uw-secondary); flex: none; }
.v4-wrapper .v4-tabs { display: flex; flex-wrap: nowrap; gap: 2px; max-width: 100%; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.v4-wrapper .v4-tabs::-webkit-scrollbar { display: none; }
.v4-wrapper .v4-tab { flex: 1 0 auto; padding: 8px 5px; font-size: 12px; white-space: nowrap; text-align: center; }
.v4-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: var(--uw-primary); color: var(--uw-cta-text); font-size: 11px; font-weight: 700; }
/* ==== END NAV ==== */


/* ==== COMPACT ==== */
/* Phones and tablets: no photos, rows instead of cards, the basket tray is the main button.
   Wording and the dropdowns are untouched; only layout and size change. */
@media (max-width: 1279px) {
  .v4-wrapper .v4-card-photo,
  .v4-wrapper .v4-diag-card-photo,
  .v4-wrapper .v4-insp-card-photo,
  .v4-wrapper .v4-sidebar-img-wrap { display: none; }
  .v4-wrapper .v4-step4-sidebar { display: none; }
  .v4-wrapper .v4-vehicle-banner { margin-bottom: 12px; font-size: 20px; line-height: 1.25; }
  .v4-wrapper .v4-tabs { margin-bottom: 14px; }

  /* Servicing: three rows */
  .v4-wrapper .v4-service-grid { display: flex; flex-direction: column; gap: 8px; }
  .v4-wrapper .v4-service-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: start; padding: 14px 44px 14px 16px; text-align: left; }
  .v4-wrapper .v4-service-card > * { grid-column: 1; }
  .v4-wrapper .v4-service-card .v4-card-price { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-size: 22px; }
  .v4-wrapper .v4-service-card .v4-card-vat { grid-column: 2; grid-row: 3; text-align: right; }
  .v4-wrapper .v4-service-card .v4-card-desc { grid-column: 1 / -1; grid-row: 4; font-size: 13px; margin: 4px 0 0; }

  /* Diagnostics and inspection: one tight card each */
  .v4-wrapper .v4-diag-card,
  .v4-wrapper .v4-insp-card { padding: 14px 16px; }
  .v4-wrapper .v4-insp-grid { display: flex; flex-direction: column; gap: 8px; }
  .v4-wrapper .v4-insp-features { display: none; }

  /* Repairs: two-column category tiles, no marketing lines */
  .v4-wrapper .v4-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .v4-wrapper .v4-cat-card { padding: 10px 12px; gap: 6px; }
  .v4-wrapper .v4-cat-hints,
  .v4-wrapper .v4-cat-chevron { display: none; }
  /* the overview line from the Maxamy /repairs page stays, set smaller */
  .v4-wrapper .v4-cat-best-for { font-size: 12px; line-height: 1.3; }

  /* Repair rows: drop the per-row icon so the name gets the width, and tighten the padding */
  .v4-wrapper .v4-svc-item { padding: 9px 12px; gap: 10px; }
  .v4-wrapper .v4-svc-item-icon { display: none; }
  .v4-wrapper .v4-svc-name { font-size: 14px; line-height: 1.25; }
}
@media (min-width: 1280px) { .v4-tray { display: none; } }
/* ==== END COMPACT ==== */


/* ==== CONTACT ==== */
.v4-contact-change { margin-left: 8px; padding: 0; border: 0; background: transparent; color: var(--uw-link); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
@media (max-width: 1279px) {
  .v4-wrapper .v4-form-section { padding: 14px 16px; margin-bottom: 10px; }
  .v4-wrapper .v4-form-section-sub { display: none; }
  .v4-wrapper .v4-form-section-header { margin-bottom: 8px; }
  .v4-wrapper #uwInputNotes { min-height: 72px; height: 72px; }
  .v4-wrapper .v4-contact-summary-inner { padding: 16px; }
  .v4-wrapper .v4-contact-summary .v4-summary-stripe { display: none; }
  .v4-wrapper #uwSummaryMotRow { display: none !important; }
}
/* ==== END CONTACT ==== */

/* ==== LOOK ==== */
/* The look the owner picked from Mobbin (2026-11-06): Careem photo cards for the service
   screen, Tesla hero + sideways photo cards for the option screens. Light only.
   Everything here is scoped to #unifiedWizard so it wins over the older rules above.
   Colours are tokens. The brand hex stays in :root. */

#unifiedWizard {
  --lk-fg: #171a20;
  --lk-mut: #5c5e62;
  --lk-line: #e4e5e8;
  --lk-btn: #eef0f2;
  --lk-btn-fg: #171a20;
  --lk-glass: rgba(70, 70, 72, 0.78);
  --lk-on-photo: #ffffff;
  --lk-accent: var(--uw-primary);        /* the orange: buttons only */
  --lk-accent-ink: #ffffff;
  --lk-select: var(--lk-ink);            /* selected, active and focus: the dark ink ring */
  --lk-select-ink: #ffffff;
  --lk-field: #f4f4f4;
  --lk-check: #b4b8c0;
  /* One spacing scale and one type scale for everything in the look (Tesla): nothing between the steps. */
  --lk-s1: 8px;
  --lk-s2: 12px;
  --lk-s3: 16px;
  --lk-s4: 24px;
  --lk-s5: 32px;
  --lk-t-small: 13px;
  --lk-t-label: 15px;
  --lk-t-body: 17px;
  --lk-t-title: 22px;
  --lk-t-hero: 30px;
  --lk-t-display: 44px;   /* the registration title on wide screens: the same role as hero, scaled up */
  --lk-on-photo-shadow: 0 0 8px rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.45);   /* the one soft back-shadow for all text on a photo */
}

/* The hero below says what the screen is, so the older banner line is not needed. */
#unifiedWizard .v4-vehicle-banner { display: none; }
/* No Step X of 5 bar: the owner's call, and Tesla does not use one. */
#unifiedWizard #uwProgress { display: none; }

/* Arrows for the category strip (shown from 600px, where there is no touch swipe cue). */
#unifiedWizard .v4-strip-nav { display: none; }
#unifiedWizard .v4-strip-btn { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 6px; background: var(--lk-btn); color: var(--lk-btn-fg); font: 500 var(--lk-t-title)/1 var(--uw-font-display); cursor: pointer; }
#unifiedWizard .v4-strip-btn:hover { filter: brightness(0.94); }
#unifiedWizard .v4-strip-btn:focus-visible { outline: 2px solid var(--lk-select); outline-offset: 2px; }

/* ---- Service select: full-width photo cards (Careem) ---- */
#unifiedWizard .v4-pc-head { margin: 0 0 var(--lk-s4); }
#unifiedWizard .v4-pc-headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--lk-s2); }
#unifiedWizard .v4-pc-headrow .v4-strip-nav { margin: 0; }
#unifiedWizard .v4-pc-heading { margin: 0; font: 500 var(--lk-t-title)/1.25 var(--uw-font-display); color: var(--lk-fg); }
#unifiedWizard .v4-pc-sub { margin: 2px 0 0; font: 400 var(--lk-t-label)/1.4 var(--uw-font-body); color: var(--lk-mut); }
#unifiedWizard .v4-pc-grid {
  display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--lk-s3); width: 100%; max-width: none; margin: 0; padding: 0 0 var(--lk-s1);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
#unifiedWizard .v4-pc-grid::-webkit-scrollbar { display: none; }
#unifiedWizard .v4-pc-grid .uw-pc {
  position: relative; display: block; flex: 0 0 min(298px, 80%); width: auto; min-width: 0; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 12px; overflow: hidden; background: var(--uw-surface-mid); scroll-snap-align: start;
  box-shadow: none; text-align: left; cursor: pointer; aspect-ratio: 9 / 10; transform: none; container-type: inline-size;
}
#unifiedWizard .v4-pc-grid .uw-pc:hover { transform: none; box-shadow: none; }
#unifiedWizard .uw-pc .v4-pc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
#unifiedWizard .uw-pc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0) 52%); pointer-events: none; }
#unifiedWizard .uw-pc .v4-pc-tag {
  position: absolute; left: 16px; top: 14px; z-index: 1; padding: 4px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.5); color: var(--lk-on-photo); font: 500 var(--lk-t-small)/1.3 var(--uw-font-body);
}
#unifiedWizard .uw-pc .v4-pc-text { position: absolute; left: 24px; right: 20px; bottom: 20px; z-index: 1; display: flex; flex-direction: column; gap: 2px; color: var(--lk-on-photo); }
#unifiedWizard .uw-pc .v4-pc-title { font: 500 var(--lk-t-title)/1.2 var(--uw-font-display); color: var(--lk-on-photo); text-transform: none; letter-spacing: 0; }
#unifiedWizard .uw-pc .v4-pc-line { font: 400 var(--lk-t-label)/1.4 var(--uw-font-body); color: var(--lk-on-photo); opacity: 0.95; }
/* (no ring on the service-choice cards: see NO CARD RING at the end of this file) */

/* Hover panel (desktop and any screen with a real mouse). The photo zooms, the card darkens a little, the one-line
   description folds away and that service's own text slides up in its place, as plain text on the darker photo. Touch screens
   never see it: the panel is display:none there, so a phone tap behaves exactly as before. */
#unifiedWizard .uw-pc::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
#unifiedWizard .uw-pc .v4-pc-lead { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; }
#unifiedWizard .uw-pc .v4-pc-lead > .v4-pc-line { min-height: 0; overflow: hidden; }
#unifiedWizard .uw-pc .v4-pc-more { display: none; }
@media (hover: hover) and (pointer: fine) {
  #unifiedWizard .uw-pc:hover .v4-pc-photo { transform: scale(1.06); }
  #unifiedWizard .uw-pc .v4-pc-desc { font-size: var(--lk-t-label); }
  #unifiedWizard .uw-pc:hover::before, #unifiedWizard .uw-pc:focus-visible::before { opacity: 1; }
  #unifiedWizard .uw-pc:hover .v4-pc-lead, #unifiedWizard .uw-pc:focus-visible .v4-pc-lead { grid-template-rows: 0fr; opacity: 0; }
  #unifiedWizard .uw-pc .v4-pc-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease 0.05s; }
  #unifiedWizard .uw-pc:hover .v4-pc-more, #unifiedWizard .uw-pc:focus-visible .v4-pc-more { grid-template-rows: 1fr; opacity: 1; }
  #unifiedWizard .uw-pc .v4-pc-more-in { min-height: 0; overflow: hidden; }
  #unifiedWizard .uw-pc .v4-pc-panel { display: block; margin-top: var(--lk-s1); padding: 0; }
  #unifiedWizard .uw-pc .v4-pc-desc { font: 400 var(--lk-t-small)/1.5 var(--uw-font-body); color: var(--lk-on-photo); }
} /* end card hover */
/* Four across on a small laptop: the longest panel needs the room the tag uses, so the tag steps aside while the panel is open. */
#unifiedWizard .uw-pc .v4-pc-tag { transition: opacity 0.3s ease; }
@media (hover: hover) and (pointer: fine) {
  @container (max-width: 260px) {
    #unifiedWizard .uw-pc:hover .v4-pc-tag, #unifiedWizard .uw-pc:focus-visible .v4-pc-tag { opacity: 0; }
  }
}

/* ---- Hero at the top of each service screen (Tesla) ---- */
#unifiedWizard .v4-hero { position: relative; margin: 0 0 var(--lk-s4); border-radius: 12px; overflow: hidden; background: var(--uw-surface); }
#unifiedWizard .v4-hero-photo { position: absolute; left: 0; right: 0; top: 0; height: 190px; }
#unifiedWizard .v4-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#unifiedWizard .v4-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 32%, var(--uw-surface) 100%); }
#unifiedWizard .v4-hero-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 132px var(--lk-s3) var(--lk-s4); gap: var(--lk-s1); }
#unifiedWizard .v4-hero-title { margin: 0; font: 500 30px/1.2 var(--uw-font-display); color: var(--lk-fg); }
#unifiedWizard .v4-hero-line { margin: 0; font: 400 17px/1.4 var(--uw-font-body); color: var(--lk-mut); }
#unifiedWizard .v4-hero-btn {
  margin-top: var(--lk-s3); width: 100%; height: 50px; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--lk-btn); color: var(--lk-btn-fg); font: 500 17px/1 var(--uw-font-body);
}
#unifiedWizard .v4-hero-btn:hover { filter: brightness(0.97); }
#unifiedWizard .v4-hero-btn:focus-visible { outline: 3px solid var(--lk-select); outline-offset: 2px; }

/* ---- Option cards: a sideways strip on phones (Tesla), same-size photo cards ---- */
#unifiedWizard .v4-service-grid,
#unifiedWizard .v4-diag-grid,
#unifiedWizard .v4-insp-grid,
#unifiedWizard .v4-cat-strip {
  display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--lk-s3); margin: -6px -6px var(--lk-s4); padding: 6px 6px var(--lk-s1);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 6px; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#unifiedWizard .v4-service-grid::-webkit-scrollbar,
#unifiedWizard .v4-diag-grid::-webkit-scrollbar,
#unifiedWizard .v4-insp-grid::-webkit-scrollbar,
#unifiedWizard .v4-cat-strip::-webkit-scrollbar { display: none; }
#unifiedWizard .v4-cat-grid { display: block; }

#unifiedWizard .v4-service-card,
#unifiedWizard .v4-diag-card,
#unifiedWizard .v4-insp-card,
#unifiedWizard .v4-cat-card {
  position: relative; flex: 0 0 min(298px, 80%); width: auto; min-width: 0; height: 330px; margin: 0; padding: 0;
  display: block; border: 0; border-radius: 12px; overflow: hidden; scroll-snap-align: start; cursor: pointer;
  background: var(--uw-surface-mid); box-shadow: none; transform: none; color: var(--lk-on-photo);
}
#unifiedWizard .v4-diag-card { flex-basis: 100%; }
#unifiedWizard .v4-service-card:hover,
#unifiedWizard .v4-diag-card:hover,
#unifiedWizard .v4-insp-card:hover,
#unifiedWizard .v4-cat-card:hover { transform: none; box-shadow: none; }
#unifiedWizard .v4-service-card::after,
#unifiedWizard .v4-diag-card::after,
#unifiedWizard .v4-insp-card::after,
#unifiedWizard .v4-cat-card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 56%, rgba(0, 0, 0, 0.32)); }

/* the photo fills the card */
#unifiedWizard .v4-card-photo,
#unifiedWizard .v4-diag-card-photo,
#unifiedWizard .v4-insp-card-photo,
#unifiedWizard .v4-cat-photo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border-radius: 0; background: none; }
#unifiedWizard .v4-card-photo img,
#unifiedWizard .v4-diag-card-photo img,
#unifiedWizard .v4-insp-card-photo img,
#unifiedWizard .v4-cat-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Text stacks top left over the photo in a flex column, so a long title pushes the lines below it down
   instead of colliding with them. The photo and the Select pill are the only absolutely placed parts. */
#unifiedWizard .v4-service-card,
#unifiedWizard .v4-diag-card,
#unifiedWizard .v4-insp-card,
#unifiedWizard .v4-cat-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: var(--lk-s4); gap: 0; text-align: left; }
#unifiedWizard .v4-service-card > *:not(.v4-card-photo):not(.v4-service-card-radio),
#unifiedWizard .v4-diag-card .uw-card-body,
#unifiedWizard .v4-cat-card > *:not(.v4-cat-photo):not(.v4-cat-badge):not(.v4-tyre-pill) { position: relative; z-index: 2; max-width: 100%; margin: 0; padding: 0; background: none; border: 0; color: var(--lk-on-photo); text-align: left; }
#unifiedWizard .v4-service-card > .v4-card-name { order: 1; margin-bottom: var(--lk-s1); font: 500 var(--lk-t-title)/1.2 var(--uw-font-display); text-transform: none; letter-spacing: 0; }
#unifiedWizard .v4-service-card > .v4-card-eyebrow { order: 2; font: 400 var(--lk-t-label)/1.4 var(--uw-font-body); text-transform: none; letter-spacing: 0; }
#unifiedWizard .v4-service-card > .v4-card-point-badge { order: 3; font: 400 var(--lk-t-label)/1.4 var(--uw-font-body); text-transform: none; letter-spacing: 0; border-radius: 0; }
#unifiedWizard .v4-service-card > .v4-card-price { order: 4; margin-top: var(--lk-s2); font: 500 var(--lk-t-title)/1.2 var(--uw-font-display); }
#unifiedWizard .v4-service-card > .v4-card-vat { order: 5; margin-top: 2px; font: 400 var(--lk-t-small)/1.3 var(--uw-font-body); text-transform: none; letter-spacing: 0; opacity: 0.9; }
#unifiedWizard .v4-service-card > .v4-card-desc { display: none; }

#unifiedWizard .v4-diag-card .uw-card-title { font: 500 var(--lk-t-title)/1.2 var(--uw-font-display); color: var(--lk-on-photo); }
#unifiedWizard .v4-diag-card .uw-card-desc { display: none; }
#unifiedWizard .v4-diag-card .uw-card-foot { margin-top: var(--lk-s2); display: block; }
#unifiedWizard .v4-diag-card .uw-card-price-wrap { display: block; margin: 0; padding: 0; }
#unifiedWizard .v4-diag-card .uw-card-price { font: 500 var(--lk-t-title)/1.2 var(--uw-font-display); color: var(--lk-on-photo); }
#unifiedWizard .v4-diag-card .uw-card-vat { font: 400 var(--lk-t-small)/1.3 var(--uw-font-body); text-transform: none; letter-spacing: 0; color: var(--lk-on-photo); opacity: 0.9; }

/* The wrappers around the price and the Select pill stay unpositioned, so the pill measures from the card itself. */
#unifiedWizard .v4-diag-card .uw-card-foot,
#unifiedWizard .v4-insp-card .v4-insp-card-inner { position: static; display: block; flex: none; gap: 0; margin: 0; padding: 0; background: none; border: 0; }
#unifiedWizard .v4-insp-card .v4-insp-card-icon-row,
#unifiedWizard .v4-insp-card .v4-insp-card-right > div:first-child,
#unifiedWizard .v4-diag-card .uw-card-price-wrap { position: relative; z-index: 2; }
#unifiedWizard .v4-insp-card .v4-insp-card-left,
#unifiedWizard .v4-insp-card .v4-insp-card-right { position: static; display: block; margin: 0; padding: 0; background: none; border: 0; width: auto; }
#unifiedWizard .v4-insp-card .v4-insp-card-icon-row { display: block; margin: 0; padding: 0; }
#unifiedWizard .v4-insp-card .v4-insp-card-icon { display: none; }
#unifiedWizard .v4-insp-card .v4-insp-card-name { font: 500 var(--lk-t-title)/1.2 var(--uw-font-display); color: var(--lk-on-photo); text-transform: none; letter-spacing: 0; }
#unifiedWizard .v4-insp-card .v4-insp-card-subtitle { margin-top: var(--lk-s1); font: 400 var(--lk-t-label)/1.4 var(--uw-font-body); color: var(--lk-on-photo); }
#unifiedWizard .v4-insp-card .v4-insp-card-right > div:first-child { margin-top: var(--lk-s2); text-align: left; }
#unifiedWizard .v4-insp-card .v4-insp-price-label { display: none; }
#unifiedWizard .v4-insp-card .v4-insp-price { font: 500 var(--lk-t-title)/1.2 var(--uw-font-display); color: var(--lk-on-photo); text-align: left; }
#unifiedWizard .v4-insp-card .v4-insp-features { display: none; }

#unifiedWizard .v4-cat-card > .v4-cat-name { padding-right: 32px; font: 500 var(--lk-t-title)/1.2 var(--uw-font-display); text-transform: none; letter-spacing: 0; }
#unifiedWizard .v4-cat-card > .v4-cat-best-for { margin-top: var(--lk-s1); font: 400 var(--lk-t-label)/1.4 var(--uw-font-body); opacity: 0.95; }
#unifiedWizard .v4-cat-card > .v4-cat-icon,
#unifiedWizard .v4-cat-card > .v4-cat-hints,
#unifiedWizard .v4-cat-card > .v4-cat-chevron { display: none; }
/* One circle in the corner, not two: the count of repairs picked in this category sits exactly on top of the ring / tick circle (same
   16px corner, same 24px, white with a dark number), so the corner shows an empty ring (nothing picked), a tick (category open) or the number. */
#unifiedWizard .v4-cat-card > .v4-cat-badge { position: absolute; right: 16px; top: 16px; z-index: 4; box-sizing: border-box; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--uw-white); color: var(--lk-fg); }

/* Select pill, bottom right (Tesla's glass button) */
#unifiedWizard .v4-service-card-radio,
#unifiedWizard .v4-diag-card-radio,
#unifiedWizard .v4-insp-card-radio {
  position: absolute; right: 20px; bottom: 20px; left: auto; top: auto; z-index: 3; width: auto; height: 30px; min-width: 0;
  margin: 0; padding: 0 var(--lk-s3); border: 0; border-radius: 6px; box-shadow: none; background: var(--lk-glass);
  color: var(--lk-on-photo); display: grid; place-items: center; font: 500 15px/1 var(--uw-font-body);
}
#unifiedWizard .v4-service-card-radio::after,
#unifiedWizard .v4-diag-card-radio::after,
#unifiedWizard .v4-insp-card-radio::after { content: none; }
#unifiedWizard .v4-service-card-radio::before,
#unifiedWizard .v4-diag-card-radio::before,
#unifiedWizard .v4-insp-card-radio::before { content: "Select"; position: static; width: auto; height: auto; background: none; border: 0; transform: none; }
#unifiedWizard .v4-service-card.selected .v4-service-card-radio,
#unifiedWizard .v4-diag-card.selected .v4-diag-card-radio,
#unifiedWizard .v4-insp-card.selected .v4-insp-card-radio { background: var(--lk-accent); color: var(--lk-accent-ink); border: 0; }
#unifiedWizard .v4-service-card.selected .v4-service-card-radio::before,
#unifiedWizard .v4-diag-card.selected .v4-diag-card-radio::before,
#unifiedWizard .v4-insp-card.selected .v4-insp-card-radio::before { content: "Selected"; }
/* A chosen photo card shows a ticked circle top-right (an empty ring while it is not chosen) and nothing around the card: no border
   and no gap, like the check badge on Apple and Duolingo. The repair LIST rows keep their ring; these photo cards do not. */
#unifiedWizard .v4-service-card.selected,
#unifiedWizard .v4-diag-card.selected,
#unifiedWizard .v4-insp-card.selected,
#unifiedWizard .v4-cat-card.selected { outline: none; box-shadow: none; border-color: transparent; }   /* switch off every older selected ring, border and shadow */
#unifiedWizard .v4-service-card::before,
#unifiedWizard .v4-diag-card::before,
#unifiedWizard .v4-insp-card::before,
#unifiedWizard .v4-cat-card::before { content: ""; position: absolute; top: 16px; right: 16px; z-index: 3; width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, 0.9); background: rgba(0, 0, 0, 0.18) center / 14px 14px no-repeat; pointer-events: none; transition: background-color 0.2s ease, border-color 0.2s ease; }
#unifiedWizard .v4-service-card.selected::before,
#unifiedWizard .v4-diag-card.selected::before,
#unifiedWizard .v4-insp-card.selected::before,
#unifiedWizard .v4-cat-card.selected::before { border-color: var(--uw-white); background-color: var(--uw-white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l3 3 6-6.4' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* (no focus ring on the option cards: see NO CARD RING at the end of this file) */

/* ---- Tablet and up: no sideways scroll, cards sit in a grid ---- */
@media (min-width: 600px) {
  #unifiedWizard .v4-pc-grid .uw-pc { flex: 0 0 calc((100% - 32px) / 2.3); aspect-ratio: 1 / 1; }
  #unifiedWizard .v4-hero-photo { height: 200px; }
  #unifiedWizard .v4-hero-text { padding-top: 140px; }
  #unifiedWizard .v4-hero-btn { width: auto; min-width: 280px; padding: 0 28px; }
  #unifiedWizard .v4-service-grid,
  #unifiedWizard .v4-insp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; }
  #unifiedWizard .v4-diag-grid { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; padding-bottom: 0; }
  #unifiedWizard .v4-strip-nav { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 10px; }
  #unifiedWizard .v4-service-card,
  #unifiedWizard .v4-insp-card { flex: none; height: 360px; }
  #unifiedWizard .v4-diag-card { flex: none; height: 280px; }
  #unifiedWizard .v4-cat-card { flex: 0 0 240px; height: 280px; }
  /* The one diagnostics card is a wide banner card, so it shows its description too. */
  #unifiedWizard .v4-diag-card .uw-card-desc { display: block; max-width: 560px; margin-top: 8px; font: 400 15px/1.5 var(--uw-font-body); color: var(--lk-on-photo); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  #unifiedWizard .v4-diag-card .uw-card-foot { margin-top: auto; }
}
@media (min-width: 900px) {
  #unifiedWizard .v4-hero-reg { min-height: 330px; }
  #unifiedWizard .v4-hero-reg .v4-hero-photo { height: 100%; }
  #unifiedWizard .v4-hero-reg .v4-hero-photo::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) 35%, var(--uw-surface) 96%); }
  #unifiedWizard .v4-hero-reg .v4-hero-text { align-items: center; text-align: center; max-width: none; padding: 196px var(--lk-s3) var(--lk-s4); }
  #unifiedWizard .v4-hero-reg .v4-hero-title { font-size: var(--lk-t-display); }
  #unifiedWizard .v4-pc-grid .uw-pc { flex: 0 0 calc((100% - 32px) / 2.6); aspect-ratio: 1 / 1; }
  #unifiedWizard .v4-hero-photo { height: 100%; }
  #unifiedWizard .v4-hero-photo::after { background: linear-gradient(to right, var(--uw-surface) 0%, rgba(0, 0, 0, 0) 70%), linear-gradient(to top, var(--uw-surface), rgba(0, 0, 0, 0) 30%); }
  #unifiedWizard .v4-hero { min-height: 240px; }
  #unifiedWizard .v4-hero-text { align-items: flex-start; text-align: left; padding: var(--lk-s5) var(--lk-s5) var(--lk-s5); max-width: 520px; }
  #unifiedWizard .v4-service-card,
  #unifiedWizard .v4-insp-card { height: 420px; }
  #unifiedWizard .v4-diag-card { height: 300px; }
  #unifiedWizard .v4-cat-card { flex-basis: 260px; height: 300px; }
}
@media (min-width: 1280px) {
  #unifiedWizard .v4-pc-grid .uw-pc { flex-basis: calc((100% - 32px) / 2.4); aspect-ratio: 4 / 3; }
  #unifiedWizard .v4-service-card,
  #unifiedWizard .v4-insp-card { height: 400px; }
}
/* A phone on its side is wide but only about 390px tall: keep everything short. */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) {
  #unifiedWizard .v4-reg-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--lk-s4); align-items: center; max-width: none; }
  #unifiedWizard .v4-reg-section > .v4-hero { grid-column: 1; grid-row: 1 / span 6; align-self: stretch; min-height: 240px; }
  #unifiedWizard .v4-reg-section > :not(.v4-hero) { grid-column: 2; width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
  #unifiedWizard .v4-reg-section > .v4-reg-plate-wrap { margin-top: 0; }
  #unifiedWizard .v4-hero-reg { min-height: 240px; }
  #unifiedWizard .v4-hero-reg .v4-hero-photo { height: 100%; }
  #unifiedWizard .v4-hero-reg .v4-hero-photo::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) 35%, var(--uw-surface) 100%); }
  #unifiedWizard .v4-hero-reg .v4-hero-text { position: absolute; left: 0; right: 0; bottom: 0; align-items: center; text-align: center; max-width: none; padding: 0 var(--lk-s3) var(--lk-s4); }
  #unifiedWizard .v4-hero-reg .v4-hero-title { font-size: var(--lk-t-hero); }
  #unifiedWizard .v4-pc-grid { gap: var(--lk-s2); }
  #unifiedWizard .v4-pc-grid .uw-pc { flex: 0 0 calc((100% - 24px) / 3.3); aspect-ratio: 4 / 3; }
  #unifiedWizard .v4-hero { min-height: 0; }
  #unifiedWizard .v4-hero-photo { height: 100%; }
  #unifiedWizard .v4-hero-photo::after { background: linear-gradient(to right, var(--uw-surface) 0%, rgba(0, 0, 0, 0) 70%); }
  #unifiedWizard .v4-hero-text { align-items: flex-start; text-align: left; padding: var(--lk-s4) var(--lk-s5); max-width: 460px; }
  #unifiedWizard .v4-hero-title { font-size: var(--lk-t-title); }
  #unifiedWizard .v4-hero-btn { margin-top: 8px; height: 40px; }
  #unifiedWizard .v4-service-card,
  #unifiedWizard .v4-insp-card { height: 250px; }
  #unifiedWizard .v4-diag-card { height: 230px; }
  #unifiedWizard .v4-diag-card .uw-card-desc { display: none; }
  #unifiedWizard .v4-cat-card { height: 170px; }
}
/* ---- Booking Summary rail: the whole basket (visible from 1280px) ---- */
#unifiedWizard .v4-rail-basket { margin: 0 0 14px; }
#unifiedWizard .v4-rail-basket:empty { display: none; }
#unifiedWizard .v4-summary-inner.has-basket > #v4RailBasket + .v4-summary-row { display: none; }
#unifiedWizard .v4-rail-title { font: 500 var(--lk-t-small)/1.2 var(--uw-font-body); letter-spacing: 0; text-transform: none; color: var(--lk-mut); margin: 0 0 8px; }
#unifiedWizard .v4-rail-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--lk-line); font: 400 var(--lk-t-label)/1.35 var(--uw-font-body); color: var(--lk-fg); }
#unifiedWizard .v4-rail-name { min-width: 0; overflow-wrap: anywhere; }
#unifiedWizard .v4-rail-amt { flex: none; font-variant-numeric: tabular-nums; font-weight: 500; }
#unifiedWizard .v4-rail-total { display: flex; justify-content: space-between; gap: var(--lk-s2); padding: var(--lk-s2) 0 0; font: 500 var(--lk-t-label)/1.35 var(--uw-font-body); color: var(--lk-fg); }
#unifiedWizard .v4-basket-notice-inline { margin: var(--lk-s1) 0 var(--lk-s3); }

/* ---- One button style everywhere (Tesla): flat, 50px, 6px corners, sentence case ---- */
#unifiedWizard .v4-btn-primary,
#unifiedWizard .v4-sidebar-next-btn {
  min-height: 50px; padding: 0 24px; border: 0; border-radius: 6px; box-shadow: none; text-transform: none;
  letter-spacing: 0; font: 500 17px/1.2 var(--uw-font-body); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--lk-accent); color: var(--lk-accent-ink);
}
#unifiedWizard .v4-btn-primary:hover,
#unifiedWizard .v4-sidebar-next-btn:hover { filter: brightness(0.96); transform: none; box-shadow: none; }
#unifiedWizard .v4-btn-ghost { text-transform: none; letter-spacing: 0; font: 500 var(--lk-t-body)/1.2 var(--uw-font-body); }

/* ---- Registration (Tesla): hero, flat grey plate field, flat button, one note ---- */
#unifiedWizard .v4-reg-section { max-width: none; width: 100%; margin: 0; text-align: left; }
#unifiedWizard .v4-reg-section > :not(.v4-hero) { max-width: 560px; margin-left: auto; margin-right: auto; }
#unifiedWizard .v4-reg-plate-wrap { max-width: 560px; }
#unifiedWizard .v4-reg-section > .v4-reg-plate-wrap { margin-top: var(--lk-s4); }
#unifiedWizard .v4-reg-cta { display: flex; width: 100%; margin-top: var(--lk-s2); }
#unifiedWizard .v4-reg-reassure { margin-top: var(--lk-s3); }
#unifiedWizard .v4-hero-reg { margin: 0; min-height: 0; }
#unifiedWizard .v4-hero-reg .v4-hero-photo { height: 250px; }
#unifiedWizard .v4-hero-reg .v4-hero-text { padding: 196px var(--lk-s3) var(--lk-s4); }
#unifiedWizard .v4-reg-plate {
  display: flex; align-items: stretch; height: 56px; padding: 0; border: 0; border-radius: 6px; overflow: hidden;
  background: var(--lk-field); box-shadow: none;
}
#unifiedWizard .v4-reg-flag { width: 46px; height: auto; padding: 0; justify-content: center; gap: 3px; flex: none; }
#unifiedWizard .v4-reg-flag-union-jack { width: 24px; height: 16px; }
#unifiedWizard .v4-reg-flag-gb { font-size: 10px; font-weight: 600; }
#unifiedWizard .v4-reg-input {
  flex: 1; min-width: 0; padding: 0 var(--lk-s3); border: 0; background: transparent; box-shadow: none;
  font: 500 22px/1 Oswald, var(--uw-font-body); letter-spacing: 4px; text-align: left; color: var(--lk-fg); text-transform: uppercase;
}
#unifiedWizard .v4-reg-input::placeholder { color: var(--lk-mut); opacity: 0.6; }
#unifiedWizard .v4-reg-input:focus { outline: none; }
#unifiedWizard .v4-reg-plate:focus-within { box-shadow: 0 0 0 2px var(--lk-select) inset; }

/* ---- Vehicle confirm pop-up: bottom sheet on a phone, centred dialog from 600px. Slides up slowly. ---- */
#unifiedWizard .v4-modal[hidden] { display: none; }
#unifiedWizard .v4-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: flex-end; justify-content: center; }
#unifiedWizard .v4-modal-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.3s ease; }
#unifiedWizard .v4-modal.is-open .v4-modal-dim { opacity: 1; transition: opacity 0.9s ease; }
#unifiedWizard .v4-modal-card {
  position: relative; width: 100%; max-height: 92vh; overflow-y: auto; display: flex; flex-direction: column; padding: 0;
  border-radius: 12px 12px 0 0; background: var(--uw-white); color: var(--lk-fg);
  transform: translateY(100%); transition: transform 0.3s ease-in;
}
/* Opening is slow and even (1.2s, ease-in-out: a steady glide, not a fast start that then crawls); closing is quick (0.3s) so dismissing never feels sluggish. */
#unifiedWizard .v4-modal.is-open .v4-modal-card { transform: none; transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1); }
#unifiedWizard .v4-modal-card:focus { outline: none; }
#unifiedWizard .v4-modal-media { position: relative; flex: none; height: 120px; overflow: hidden; border-radius: 12px 12px 0 0; }
#unifiedWizard .v4-modal-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
#unifiedWizard .v4-modal-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 38%, var(--uw-white) 100%); }
#unifiedWizard .v4-modal-body { display: flex; flex-direction: column; gap: var(--lk-s3); margin-top: calc(var(--lk-s4) * -1); padding: 0 var(--lk-s3) calc(var(--lk-s4) + env(safe-area-inset-bottom, 0px)); position: relative; z-index: 1; }
#unifiedWizard .v4-modal-x { position: absolute; top: var(--lk-s2); right: var(--lk-s2); z-index: 3; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: var(--lk-on-photo); cursor: pointer; display: grid; place-items: center; }
#unifiedWizard .v4-modal-x:hover { background: rgba(0, 0, 0, 0.5); }
#unifiedWizard .v4-modal-title { margin: 0; text-align: center; font: 500 var(--lk-t-title)/1.25 var(--uw-font-display); color: var(--lk-fg); }
#unifiedWizard .v4-cf-plate { margin: 0; flex: none; }
#unifiedWizard .v4-cf-rows { display: flex; flex-direction: column; gap: var(--lk-s1); }
#unifiedWizard .v4-cf-row { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 56px; padding: var(--lk-s2) var(--lk-s3); background: var(--lk-field); border-radius: 6px; }
#unifiedWizard .v4-cf-key { font: 400 var(--lk-t-small)/1.3 var(--uw-font-body); color: var(--lk-mut); }
#unifiedWizard .v4-cf-val { min-width: 0; text-align: left; font: 500 var(--lk-t-body)/1.35 var(--uw-font-body); color: var(--lk-fg); }
#unifiedWizard .v4-cf-val .v4-mot-status-pill { display: inline; padding: 0; background: none; border: 0; border-radius: 0; font: inherit; }
#unifiedWizard .v4-cf-val .v4-mot-status-pill.expired { color: var(--uw-error); }
#unifiedWizard .v4-cf-trim { display: block; margin-top: 2px; font: 400 var(--lk-t-label)/1.35 var(--uw-font-body); color: var(--lk-mut); }
#unifiedWizard .v4-modal-actions { display: flex; flex-direction: column; gap: var(--lk-s2); margin-top: var(--lk-s1); }
#unifiedWizard .v4-cf-primary { width: 100%; }
#unifiedWizard .v4-cf-secondary { min-height: 50px; padding: 0 var(--lk-s4); border: 0; border-radius: 6px; background: var(--lk-btn); color: var(--lk-btn-fg); font: 500 var(--lk-t-body)/1.2 var(--uw-font-body); cursor: pointer; transition: filter 0.2s ease, transform 0.15s ease; }
#unifiedWizard .v4-cf-secondary:hover { filter: brightness(0.96); }
#unifiedWizard .v4-cf-secondary:focus-visible { outline: 2px solid var(--lk-select); outline-offset: 2px; }

/* Pop-up variations. These sit AFTER the base rules above on purpose: same specificity, so order decides. */
@media (min-width: 600px) {
  #unifiedWizard .v4-modal { align-items: center; }
  #unifiedWizard .v4-modal-card { max-width: 520px; margin: var(--lk-s4); border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(32px) scale(0.98); transition: transform 0.3s ease-in, opacity 0.3s ease; }
  #unifiedWizard .v4-modal.is-open .v4-modal-card { opacity: 1; transform: none; transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s ease; }
  #unifiedWizard .v4-modal-media { border-radius: 12px 12px 0 0; }
  #unifiedWizard .v4-modal-body { padding: 0 var(--lk-s5) var(--lk-s5); }
}
@media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) {
  #unifiedWizard .v4-modal-media { display: none; }
  #unifiedWizard .v4-modal-body { margin-top: 0; padding: var(--lk-s3); gap: var(--lk-s1); }
  #unifiedWizard .v4-modal-x { background: transparent; color: var(--lk-fg); }
  #unifiedWizard .v4-cf-plate { height: 44px; }
  #unifiedWizard .v4-cf-row { flex-direction: row; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 var(--lk-s3); }
  #unifiedWizard .v4-cf-trim { display: inline; margin: 0 0 0 var(--lk-s1); }
  #unifiedWizard .v4-modal-actions { flex-direction: row; margin-top: 0; }
  #unifiedWizard .v4-cf-primary,
  #unifiedWizard .v4-cf-secondary { flex: 1; min-height: 44px; }
}

/* ---- Remove button on each Booking Summary line ---- */
#unifiedWizard .v4-rail-remove { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: var(--lk-btn); color: var(--lk-fg); font: 500 var(--lk-t-body)/1 var(--uw-font-body); cursor: pointer; }
#unifiedWizard .v4-rail-remove:hover { filter: brightness(0.94); }
#unifiedWizard .v4-rail-remove:focus-visible { outline: 2px solid var(--lk-select); outline-offset: 2px; }

/* ---- Loading screen: same hero and field, then a progress line with room around it ---- */
#unifiedWizard .v4-lookup-status { max-width: 560px; margin: var(--lk-s4) auto 0; text-align: center; }
#unifiedWizard .v4-lookup-line { height: 4px; margin-bottom: var(--lk-s4); background: var(--lk-line); border-radius: 2px; overflow: hidden; }
#unifiedWizard .v4-lookup-text { margin: 0; font: 500 var(--lk-t-body)/1.4 var(--uw-font-body); color: var(--lk-fg); }
#unifiedWizard .v4-lookup-sub { margin: var(--lk-s1) 0 0; font: 400 var(--lk-t-label)/1.4 var(--uw-font-body); color: var(--lk-mut); }
#unifiedWizard .v4-reg-input-static { display: flex; align-items: center; }

/* ---- Booking Summary: flat (Tesla and the order summaries Mobbin has: label and value, hairlines, one button) ---- */
#unifiedWizard .v4-summary-card { background: var(--lk-field); border: 0; border-radius: 12px; box-shadow: none; overflow: visible; }
#unifiedWizard .v4-summary-stripe { display: none; }
#unifiedWizard .v4-summary-inner { display: flex; flex-direction: column; gap: var(--lk-s3); padding: var(--lk-s4); }
#unifiedWizard .v4-summary-heading { margin: 0; padding: 0; border: 0; font: 500 var(--lk-t-title)/1.25 var(--uw-font-display); color: var(--lk-fg); }
#unifiedWizard .v4-summary-row { display: block; margin: 0; padding: var(--lk-s3) 0 0; border-top: 1px solid var(--lk-line); }
#unifiedWizard .v4-summary-icon-chip { display: none; }
#unifiedWizard .v4-summary-row-label { font: 400 var(--lk-t-small)/1.3 var(--uw-font-body); text-transform: none; letter-spacing: 0; color: var(--lk-mut); }
#unifiedWizard .v4-summary-row-value { margin-top: 2px; font: 500 var(--lk-t-body)/1.35 var(--uw-font-body); color: var(--lk-fg); }
#unifiedWizard .v4-summary-price-block { margin: 0; padding: var(--lk-s3) 0 0; background: none; border: 0; border-top: 1px solid var(--lk-line); border-radius: 0; }
#unifiedWizard .v4-summary-price-label { font: 400 var(--lk-t-small)/1.3 var(--uw-font-body); text-transform: none; letter-spacing: 0; color: var(--lk-mut); }
#unifiedWizard .v4-summary-price-value { font: 600 var(--lk-t-hero)/1.15 var(--uw-font-display); color: var(--lk-fg); }
#unifiedWizard .v4-summary-price-vat { font: 400 var(--lk-t-small)/1.3 var(--uw-font-body); text-transform: none; letter-spacing: 0; color: var(--lk-mut); }
#unifiedWizard .v4-price-lock { font: 400 var(--lk-t-small)/1.4 var(--uw-font-body); color: var(--lk-mut); }
#unifiedWizard .v4-change-reg-link { margin-top: 2px; font: 500 var(--lk-t-label)/1.3 var(--uw-font-body); color: var(--lk-fg); text-decoration: underline; }
#unifiedWizard .v4-sidebar-next-btn { width: 100%; }
#unifiedWizard .v4-sidebar-img-wrap { display: none; }

/* ---- Step headings and the Review step share the Tesla type scale ---- */
#unifiedWizard .v4-step-heading { margin: 0 0 var(--lk-s1); font: 500 var(--lk-t-hero)/1.2 var(--uw-font-display); letter-spacing: 0; text-transform: none; color: var(--lk-fg); }
#unifiedWizard .v4-step-sub { margin: 0 0 var(--lk-s4); font: 400 var(--lk-t-label)/1.45 var(--uw-font-body); color: var(--lk-mut); }
#unifiedWizard .v4-review-lines { display: flex; flex-direction: column; gap: var(--lk-s1); }
#unifiedWizard .v4-review-line { display: flex; align-items: center; gap: var(--lk-s3); min-height: 72px; padding: var(--lk-s2) var(--lk-s3); background: var(--lk-field); border: 0; border-radius: 6px; box-shadow: none; }
#unifiedWizard .v4-review-main { flex: 1; min-width: 0; }
#unifiedWizard .v4-review-name { font: 500 var(--lk-t-body)/1.35 var(--uw-font-body); color: var(--lk-fg); }
#unifiedWizard .v4-review-sub { margin-top: 2px; font: 400 var(--lk-t-small)/1.4 var(--uw-font-body); color: var(--lk-mut); }
#unifiedWizard .v4-review-price { flex: none; font: 500 var(--lk-t-body)/1.3 var(--uw-font-body); color: var(--lk-fg); }
#unifiedWizard .v4-review-remove { flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: var(--uw-white); color: var(--lk-fg); cursor: pointer; display: grid; place-items: center; }
#unifiedWizard .v4-review-totals { margin: var(--lk-s3) 0 0; padding: var(--lk-s3) 0 0; border-top: 1px solid var(--lk-line); }
#unifiedWizard .v4-review-total { display: flex; justify-content: space-between; font: 500 var(--lk-t-body)/1.35 var(--uw-font-body); color: var(--lk-fg); }
#unifiedWizard .v4-review-quote-note { margin-top: var(--lk-s1); font: 400 var(--lk-t-label)/1.4 var(--uw-font-body); color: var(--lk-mut); }
#unifiedWizard .v4-review-add { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin: var(--lk-s4) 0 0; padding: 0 var(--lk-s4); border: 0; border-radius: 6px; background: var(--lk-btn); color: var(--lk-btn-fg); font: 500 var(--lk-t-body)/1.2 var(--uw-font-body); cursor: pointer; }
#unifiedWizard .v4-review-add .material-symbols-outlined { display: none; }

/* ---- Say each thing once (Tesla): no second price block, no repeated chips, no second includes button ---- */
#unifiedWizard .v4-summary-inner { background: none; }
#unifiedWizard .v4-step4-sidebar { background: none; padding: 0; }
#unifiedWizard .v4-summary-inner.has-basket > .v4-summary-price-block { display: none !important; }
#unifiedWizard .v4-repair-chips { display: none !important; }
#unifiedWizard .v4-includes { margin: 0 0 var(--lk-s4); padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
#unifiedWizard .v4-includes-header { display: none; }
#unifiedWizard .v4-insp-checklist-toggle { display: none; }

/* ---- Back and next: one flat row, text only ---- */
#unifiedWizard .v4-btn .material-symbols-outlined { display: none; }
#unifiedWizard .v4-nav { display: flex; align-items: center; justify-content: flex-start; gap: var(--lk-s2); margin-top: var(--lk-s3); padding-top: 0; border-top: 0; }
#unifiedWizard .v4-btn-ghost { min-height: 50px; padding: 0 var(--lk-s4); border: 0; border-radius: 6px; background: var(--lk-btn); color: var(--lk-btn-fg); box-shadow: none; }
/* Review and the other steps keep their Continue button. */
#unifiedWizard .v4-nav .v4-btn-primary { flex: 1; max-width: 360px; margin-left: auto; }
/* On the options screen the one next button lives in the tray (below 1280px) or the summary (from 1280px), so its Back row has none. */
#unifiedWizard #uwStep4 .v4-nav .v4-btn-primary { display: none; }

/* ---- Tray: one flat bar with the count, the total and the next button ---- */
#unifiedWizard .v4-tray { margin: var(--lk-s3) 0 0; }
#unifiedWizard .v4-tray-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--lk-s3); padding: var(--lk-s3); background: var(--lk-field); border: 0; border-radius: 12px; box-shadow: none; }
#unifiedWizard .v4-tray-count { font: 400 var(--lk-t-small)/1.3 var(--uw-font-body); color: var(--lk-mut); }
#unifiedWizard .v4-tray-total { font: 500 var(--lk-t-label)/1.3 var(--uw-font-body); color: var(--lk-fg); }
#unifiedWizard .v4-tray-btn { flex: none; min-width: 160px; }

/* ---- Repairs: the picked category's repairs are flat grey rows, all one size (Tesla) ---- */
#unifiedWizard .v4-repair-row-panel { margin: var(--lk-s4) 0 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
#unifiedWizard .v4-repair-sub-header { display: block; margin: 0 0 var(--lk-s3); padding: 0; }
#unifiedWizard .v4-repair-sub-title { font: 500 var(--lk-t-title)/1.25 var(--uw-font-display); color: var(--lk-fg); }
#unifiedWizard .v4-repair-sub-sub { margin-top: 4px; font: 400 var(--lk-t-label)/1.4 var(--uw-font-body); color: var(--lk-mut); }
#unifiedWizard .v4-repair-active-badge { display: none; }
#unifiedWizard .v4-svc-list { display: flex; flex-direction: column; gap: var(--lk-s1); }
#unifiedWizard .v4-svc-item { display: flex; align-items: center; gap: var(--lk-s3); min-height: 72px; padding: var(--lk-s2) var(--lk-s3); background: var(--lk-field); border: 0; border-radius: 6px; box-shadow: none; transform: none; cursor: pointer; transition: filter 0.2s ease; }
#unifiedWizard .v4-svc-item:hover { transform: none; box-shadow: none; filter: brightness(0.97); }
#unifiedWizard .v4-svc-item.selected { background: var(--lk-field); border: 0; box-shadow: none; }
#unifiedWizard .v4-svc-item-icon { display: none; }
#unifiedWizard .v4-svc-checkbox { order: 0; flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid var(--lk-check); border-radius: 6px; background: var(--uw-white); color: transparent; transition: background-color 0.2s ease, border-color 0.2s ease; }
#unifiedWizard .v4-svc-checkbox .material-symbols-outlined { font-size: 18px; }
#unifiedWizard .v4-svc-item.selected .v4-svc-checkbox { background: var(--lk-select); border-color: var(--lk-select); color: var(--lk-select-ink); }
#unifiedWizard .v4-svc-name { flex: 1; min-width: 0; font: 500 var(--lk-t-body)/1.35 var(--uw-font-body); color: var(--lk-fg); }
#unifiedWizard .v4-svc-poa { flex: none; font: 400 var(--lk-t-label)/1.3 var(--uw-font-body); color: var(--lk-mut); text-transform: none; letter-spacing: 0; }

/* ---- Motion: steps ease in, cards and buttons answer a press. Off for reduced motion. ---- */
@keyframes uwStepIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
#unifiedWizard .v4-step.active { animation: uwStepIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
#unifiedWizard .uw-pc,
#unifiedWizard .v4-service-card,
#unifiedWizard .v4-diag-card,
#unifiedWizard .v4-insp-card,
#unifiedWizard .v4-cat-card { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), outline-color 0.2s ease; }
/* The four service cards rise in one after another when the step appears (after the vehicle is confirmed).
   backwards, not both: once it has played the card is back under normal styles, so a press still shrinks it. */
/* rise and fade only: a scale here shifts the card's snap point and nudges the strip sideways while it plays */
@keyframes uwCardIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
#unifiedWizard .v4-step.active .uw-pc { animation: uwCardIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
#unifiedWizard .v4-step.active .uw-pc:nth-child(1) { animation-delay: 0.15s; }
#unifiedWizard .v4-step.active .uw-pc:nth-child(2) { animation-delay: 0.27s; }
#unifiedWizard .v4-step.active .uw-pc:nth-child(3) { animation-delay: 0.39s; }
#unifiedWizard .v4-step.active .uw-pc:nth-child(4) { animation-delay: 0.51s; }
#unifiedWizard .uw-pc:active,
#unifiedWizard .v4-service-card:active,
#unifiedWizard .v4-diag-card:active,
#unifiedWizard .v4-insp-card:active,
#unifiedWizard .v4-cat-card:active { transform: scale(0.985); }
#unifiedWizard .v4-btn-primary,
#unifiedWizard .v4-btn-ghost,
#unifiedWizard .v4-hero-btn,
#unifiedWizard .v4-sidebar-next-btn { transition: filter 0.2s ease, transform 0.15s ease, background-color 0.2s ease; }
#unifiedWizard .v4-btn-primary:active,
#unifiedWizard .v4-btn-ghost:active,
#unifiedWizard .v4-hero-btn:active,
#unifiedWizard .v4-cf-secondary:active,
#unifiedWizard .v4-sidebar-next-btn:active { transform: scale(0.99); }
#unifiedWizard .v4-service-card-radio,
#unifiedWizard .v4-diag-card-radio,
#unifiedWizard .v4-insp-card-radio { transition: background-color 0.25s ease; }
@media (prefers-reduced-motion: reduce) {
  #unifiedWizard *, #unifiedWizard *::before, #unifiedWizard *::after { animation: none !important; transition: none !important; }
}

/* Narrow cards (four across on a small laptop or a phone on its side) get smaller type. */
@container (max-width: 240px) {
  #unifiedWizard .uw-pc .v4-pc-text { left: 14px; right: 10px; bottom: 14px; }
  #unifiedWizard .uw-pc .v4-pc-tag { left: 10px; top: 10px; }
}
/* ---- MOT Test and Tyres: the same pieces as the other screens ---- */
#unifiedWizard .v4-cat-card > .v4-cat-price { margin-top: var(--lk-s2); font: 500 var(--lk-t-title)/1.2 var(--uw-font-display); }
#unifiedWizard .v4-cat-card > .v4-tyre-pill {
  position: absolute; right: 20px; bottom: 20px; z-index: 3; height: 30px; margin: 0; padding: 0 var(--lk-s3); border: 0; border-radius: 6px;
  background: var(--lk-glass); color: var(--lk-on-photo); display: grid; place-items: center; font: 500 var(--lk-t-label)/1 var(--uw-font-body);
}
#unifiedWizard .v4-cat-card > .v4-tyre-pill::before { content: "Select"; }
#unifiedWizard .v4-cat-card.selected > .v4-tyre-pill { background: var(--lk-accent); color: var(--lk-accent-ink); }
#unifiedWizard .v4-cat-card.selected > .v4-tyre-pill::before { content: "Selected"; }
#unifiedWizard .v4-diag-card .v4-mot-expiry-pill { display: block; margin: var(--lk-s1) 0 0; padding: 0; border: 0; border-radius: 0; background: none; font: 400 var(--lk-t-label)/1.4 var(--uw-font-body); color: var(--lk-on-photo); }
#unifiedWizard .v4-addon-section { margin: var(--lk-s4) 0 0; padding: 0; background: none; border: 0; }
#unifiedWizard .v4-addon-header { margin: 0; font: 500 var(--lk-t-title)/1.2 var(--uw-font-display); color: var(--lk-fg); text-transform: none; letter-spacing: 0; }
#unifiedWizard .v4-addon-intro { margin: var(--lk-s1) 0 var(--lk-s2); font: 400 var(--lk-t-label)/1.5 var(--uw-font-body); color: var(--lk-mut); }
#unifiedWizard .v4-service-card-addon > .v4-svc-features,
#unifiedWizard .v4-service-card-addon > .v4-svc-subtitle { display: none; }
#unifiedWizard .v4-addon-clear-btn { height: 40px; margin: 0 0 var(--lk-s2); padding: 0 var(--lk-s3); border: 0; border-radius: 6px; background: var(--lk-btn); color: var(--lk-btn-fg); font: 500 var(--lk-t-label)/1 var(--uw-font-body); cursor: pointer; }

/* ==== SCROLL SAFETY ==== */
/* Swiping a sideways strip past its end must not pass the swipe on to the browser, which would go back a page
   (to the registration screen). contain keeps the swipe inside the strip. snap-stop makes a hard flick land on
   the next card instead of skipping across the whole strip, which is the slowing-down at the edges. */
#unifiedWizard .v4-pc-grid,
#unifiedWizard .v4-service-grid,
#unifiedWizard .v4-diag-grid,
#unifiedWizard .v4-insp-grid,
#unifiedWizard .v4-cat-strip,
#unifiedWizard .v4-tabs { overscroll-behavior-x: contain; }
#unifiedWizard .uw-pc,
#unifiedWizard .v4-service-card,
#unifiedWizard .v4-insp-card,
#unifiedWizard .v4-cat-card { scroll-snap-stop: always; }
/* ==== END SCROLL SAFETY ==== */

/* ==== STRIP EDGES ==== */
/* First and last cues on every sideways strip. The arrow that cannot go further greys out, and pushing against an
   end gives a small elastic nudge (the swipe itself is kept inside the strip, see SCROLL SAFETY). There is no fade
   or mask over the photos: it read as a white wash on every size. */
#unifiedWizard .v4-strip-btn:disabled { opacity: 0.35; cursor: default; filter: none; }
@keyframes uwBump { 0%, 100% { translate: 0 0; } 35% { translate: var(--bump, 16px) 0; } }
#unifiedWizard .bump-start { --bump: 16px; animation: uwBump 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
#unifiedWizard .bump-end { --bump: -16px; animation: uwBump 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { #unifiedWizard .bump-start, #unifiedWizard .bump-end { animation: none; } }
/* ==== END STRIP EDGES ==== */

/* ==== INCLUDES ==== */
/* What's included (servicing table, MOT and diagnostics lists, the guarantee line): one rhythm from the spacing
   tokens. 24 above every section, 8 under its title, 12 above and below every row. Titles are 17px sentence
   case in the normal text colour, column labels 13px, rows 15px regular. */
#unifiedWizard .v4-includes-body { margin-top: var(--lk-s4); }
#unifiedWizard .v4-comp-header-row { grid-template-columns: minmax(0, 1fr) 68px 68px 68px; padding: 0 0 var(--lk-s2); border-bottom: 1px solid var(--lk-line); }
#unifiedWizard .v4-comp-tier-label { font: 500 var(--lk-t-small)/1.3 var(--uw-font-body); text-transform: none; letter-spacing: 0; color: var(--lk-mut); }
#unifiedWizard .v4-includes-level { margin: var(--lk-s4) 0 0; }
#unifiedWizard .v4-includes-level:first-child { margin-top: 0; }
#unifiedWizard .v4-includes-level-header { margin: 0; padding: 0 0 var(--lk-s1); border-bottom: 1px solid var(--lk-line); font: 500 var(--lk-t-body)/1.3 var(--uw-font-body); text-transform: none; letter-spacing: 0; color: var(--lk-fg); }
#unifiedWizard .v4-comp-row { grid-template-columns: minmax(0, 1fr) 68px 68px 68px; padding: var(--lk-s2) 0; min-height: 48px; border-bottom: 1px solid var(--lk-line); font: 400 var(--lk-t-label)/1.4 var(--uw-font-body); color: var(--lk-fg); }
#unifiedWizard .v4-comp-row:last-child { border-bottom: 0; }
#unifiedWizard .v4-diag-includes-desc { margin: var(--lk-s2) 0 0; font: 400 var(--lk-t-label)/1.5 var(--uw-font-body); color: var(--lk-mut); }
#unifiedWizard .v4-includes-grid { gap: var(--lk-s2) var(--lk-s5); margin-top: var(--lk-s3); }
#unifiedWizard .v4-include-item { gap: var(--lk-s2); }
#unifiedWizard .v4-include-text { font: 400 var(--lk-t-label)/1.4 var(--uw-font-body); color: var(--lk-fg); }
#unifiedWizard .v4-guarantee-row { margin-top: var(--lk-s4); padding-top: var(--lk-s3); border-top: 1px solid var(--lk-line); font: 500 var(--lk-t-label)/1.4 var(--uw-font-body); color: var(--lk-fg); }
/* ==== END INCLUDES ==== */

/* ==== AUDIT FIXES ==== */
/* Found by walking every screen at phone and desktop size: the contact step still had the old look (bordered
   cards, 14px inputs, uppercase tracked labels, a round uppercase button), the inspection table was a different
   design from the servicing table, and a handful of spacing, radius and colour leftovers. One rule set below. */

/* page gutter from the tokens */
#unifiedWizard .v4-main { padding: var(--lk-s3); }
@media (min-width: 600px) { #unifiedWizard .v4-main { padding: var(--lk-s4); } }
@media (min-width: 1024px) { #unifiedWizard .v4-main { padding: var(--lk-s5); } }

/* tabs: neutral grey (no blue tint), 44px tall to tap */
#unifiedWizard .v4-tabs { gap: var(--lk-s1); margin-bottom: var(--lk-s3); }
#unifiedWizard .v4-tab { min-height: 44px; padding: 0 var(--lk-s2); color: var(--lk-mut); }
#unifiedWizard .v4-tab.active { color: var(--lk-fg); }
#unifiedWizard .v4-tab-badge { min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px; }
#unifiedWizard .v4-modal-x { width: 44px; height: 44px; }

/* the hero photo ends under its fade: no hairline where the photo stops */
#unifiedWizard .v4-hero-photo::after { bottom: -1px; }

/* search, picked repairs, wheel positions, errors: flat grey, no peach, no orange outline, no blue-grey chips */
#unifiedWizard .v4-repair-search-input { text-overflow: ellipsis; }
#unifiedWizard .v4-repair-picked { margin: 0 0 var(--lk-s4); padding: var(--lk-s3); border: 0; border-radius: 6px; background: var(--lk-field); box-shadow: none; }
#unifiedWizard .v4-repair-picked-head { margin: 0 0 var(--lk-s2); color: var(--lk-fg); }
#unifiedWizard .v4-repair-picked-head .material-symbols-outlined { display: none; }
#unifiedWizard .v4-repair-picked-list { display: flex; flex-wrap: wrap; gap: var(--lk-s1); }
#unifiedWizard .v4-repair-picked-pill { display: flex; align-items: center; gap: var(--lk-s1); min-height: 44px; padding: 0 0 0 var(--lk-s3); border: 0; border-radius: 6px; background: var(--uw-white); box-shadow: none; }
#unifiedWizard .v4-repair-picked-name { color: var(--lk-fg); }
#unifiedWizard .v4-repair-picked-pos { display: block; font: 400 var(--lk-t-small)/1.3 var(--uw-font-body); color: var(--lk-mut); }
#unifiedWizard .v4-repair-picked-remove { width: 44px; height: 44px; border: 0; background: none; color: var(--lk-fg); }
#unifiedWizard .v4-brake-positions { display: flex; flex-wrap: wrap; margin: var(--lk-s1) 0 0; padding: 0; background: none; border: 0; border-radius: 0; gap: var(--lk-s1); }
#unifiedWizard .v4-brake-pos-btn { flex: 0 0 calc(50% - 4px); min-height: 44px; justify-content: flex-start; padding: 0 var(--lk-s3); border: 0; border-radius: 6px; background: var(--uw-white); color: var(--lk-fg); box-shadow: 0 0 0 1px var(--lk-edge); gap: var(--lk-s1); font-family: var(--uw-font-body); font-size: var(--lk-t-label); font-weight: 500; }   /* a white tile with the hairline, like the repair rows above it (it was the panel's grey, so it looked like bare text) */
#unifiedWizard .v4-brake-pos-btn.active { background: var(--lk-accent); color: var(--lk-accent-ink); box-shadow: none; }
#unifiedWizard .v4-brake-pos-check { width: auto; height: auto; border: 0; background: none; color: inherit; font: inherit; }
#unifiedWizard .v4-brake-pos-check:empty { display: none; }
#unifiedWizard .v4-error { margin: var(--lk-s2) 0 0; font-family: var(--uw-font-body); font-size: var(--lk-t-label); font-weight: 500; line-height: 1.4; color: var(--uw-error); }
#unifiedWizard #v4SumPriceLock { padding: 0; background: none; border: 0; border-radius: 0; color: var(--lk-mut); }
#unifiedWizard #v4SumPriceLock .material-symbols-outlined { font-size: 16px; color: var(--lk-mut); }

/* What's included, servicing table: readable label column on a phone, section titles in sentence case */
#unifiedWizard .v4-includes-level:has(.v4-comp-row) .v4-includes-level-header { text-transform: lowercase; }
#unifiedWizard .v4-includes-level:has(.v4-comp-row) .v4-includes-level-header::first-letter { text-transform: uppercase; }
#unifiedWizard .v4-guarantee-row { margin-top: var(--lk-s3); }
@media (max-width: 480px) {
  #unifiedWizard .v4-comp-header-row,
  #unifiedWizard .v4-comp-row { grid-template-columns: minmax(0, 1fr) 52px 52px 52px; }
}

/* the inspection checklist is the same design as the servicing table: flat, hairlines, 24 / 8 / 12 rhythm */
#unifiedWizard .v4-insp-checklist-wrap { margin-top: var(--lk-s4); border: 0; border-radius: 0; }
#unifiedWizard .v4-insp-table { table-layout: fixed; width: 100%; border-collapse: collapse; }
#unifiedWizard .v4-insp-th { position: static; padding: 0 0 var(--lk-s2); background: none; border-bottom: 1px solid var(--lk-line); text-transform: none; letter-spacing: 0; color: var(--lk-mut); }
#unifiedWizard .v4-insp-th-tier, #unifiedWizard .v4-insp-td-c { width: 68px; padding-left: 0; padding-right: 0; text-align: center; }
#unifiedWizard .v4-insp-section-row td { padding: var(--lk-s4) 0 var(--lk-s1); background: none; border: 0; border-bottom: 1px solid var(--lk-line); font: 500 var(--lk-t-body)/1.3 var(--uw-font-body); text-transform: lowercase; letter-spacing: 0; color: var(--lk-fg); }
#unifiedWizard .v4-insp-section-row td::first-letter { text-transform: uppercase; }
#unifiedWizard .v4-insp-td { padding: var(--lk-s2) 0; border-bottom: 1px solid var(--lk-line); font: 400 var(--lk-t-label)/1.4 var(--uw-font-body); color: var(--lk-fg); overflow-wrap: anywhere; }
#unifiedWizard .v4-insp-td-c { padding-top: var(--lk-s2); padding-bottom: var(--lk-s2); }
#unifiedWizard .v4-insp-row:hover td { background: none; }
#unifiedWizard .v4-insp-tick { font-size: 18px; color: var(--lk-fg); font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
#unifiedWizard .v4-insp-dash { font: 400 var(--lk-t-label)/1 var(--uw-font-body); color: var(--lk-mut); opacity: 0.5; }
@media (max-width: 480px) { #unifiedWizard .v4-insp-th-tier, #unifiedWizard .v4-insp-td-c { width: 60px; } }

/* contact step: the same flat language as the rest (grey 56px fields, 6px corners, sentence case, one button) */
#unifiedWizard .v4-asym-grid { gap: var(--lk-s5); }
#unifiedWizard .v4-form-section { margin: 0 0 var(--lk-s5); padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
#unifiedWizard .v4-form-section-header { display: block; margin: 0 0 var(--lk-s3); }
#unifiedWizard .v4-form-num { display: none; }
#unifiedWizard .v4-form-section-title { margin: 0; color: var(--lk-fg); }
#unifiedWizard .v4-form-section-sub { margin: 4px 0 0; font: 400 var(--lk-t-small)/1.4 var(--uw-font-body); color: var(--lk-mut); }
#unifiedWizard .v4-field-row { gap: var(--lk-s3); margin: 0 0 var(--lk-s3); }
#unifiedWizard .v4-label { display: block; margin: 0 0 var(--lk-s1); text-transform: none; letter-spacing: 0; color: var(--lk-mut); }
#unifiedWizard .v4-input { box-sizing: border-box; width: 100%; height: 56px; padding: 0 var(--lk-s3); border: 0; border-radius: 6px; background: var(--lk-field); box-shadow: none; font: 400 var(--lk-t-body)/1.3 var(--uw-font-body); color: var(--lk-fg); }
#unifiedWizard textarea.v4-input { height: auto; min-height: 120px; padding: var(--lk-s2) var(--lk-s3); resize: vertical; }
#unifiedWizard .v4-input::placeholder { color: var(--lk-mut); opacity: 0.7; }
#unifiedWizard .v4-input:focus { outline: 2px solid var(--lk-select); outline-offset: 0; box-shadow: none; }
#unifiedWizard .v4-time-toggle { display: flex; gap: var(--lk-s1); }
#unifiedWizard .v4-time-btn { flex: 1; height: 56px; padding: 0 var(--lk-s1); border: 0; border-radius: 6px; background: var(--lk-field); color: var(--lk-fg); box-shadow: none; }
#unifiedWizard .v4-time-btn.active { background: var(--lk-accent); color: var(--lk-accent-ink); }
#unifiedWizard .v4-mechanic-note { margin: var(--lk-s2) 0 0; font-style: normal; color: var(--lk-mut); }
#unifiedWizard .v4-consent-row { display: flex; align-items: flex-start; gap: var(--lk-s2); margin: 0 0 var(--lk-s3); }
#unifiedWizard .v4-consent-row input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border: 2px solid var(--lk-check); border-radius: 6px; background: transparent; cursor: pointer; }
#unifiedWizard .v4-consent-row input[type="checkbox"]:checked { border-color: var(--lk-select); background: var(--lk-select) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
#unifiedWizard .v4-consent-row label { font: 400 var(--lk-t-label)/1.5 var(--uw-font-body); color: var(--lk-mut); }
#unifiedWizard .v4-consent-row a { color: var(--lk-fg); text-decoration: underline; }
#unifiedWizard .v4-contact-summary { background: var(--lk-field); border: 0; border-radius: 12px; box-shadow: none; }
#unifiedWizard .v4-contact-summary-inner { display: flex; flex-direction: column; gap: var(--lk-s3); padding: var(--lk-s4); background: none; border: 0; border-radius: 0; box-shadow: none; }
#unifiedWizard .v4-contact-summary-title { display: flex; flex-direction: column; align-items: flex-start; gap: var(--lk-s1); margin: 0; padding: 0; border: 0; line-height: 1.25; color: var(--lk-fg); }
#unifiedWizard .v4-guarantee-badge { display: inline-flex; align-items: center; gap: var(--lk-s1); padding: 0; background: none; border: 0; border-radius: 0; text-transform: none; letter-spacing: 0; color: var(--lk-mut); }
#unifiedWizard .v4-guarantee-badge .material-symbols-outlined { font-size: 18px; color: var(--lk-mut); }
#unifiedWizard .v4-contact-summary-row { display: block; margin: 0; padding: var(--lk-s3) 0 0; border-top: 1px solid var(--lk-line); }
#unifiedWizard .v4-contact-summary-row .v4-summary-icon-chip { display: none; }
#unifiedWizard .v4-contact-row-label { text-transform: none; letter-spacing: 0; color: var(--lk-mut); }
#unifiedWizard .v4-contact-row-value { margin-top: 4px; line-height: 1.35; color: var(--lk-fg); }
#unifiedWizard .v4-contact-change { margin-top: var(--lk-s1); padding: 0; background: none; border: 0; color: var(--lk-fg); text-decoration: underline; }
#unifiedWizard .v4-contact-price-block { margin: 0; padding: var(--lk-s3) 0 0; background: none; border: 0; border-top: 1px solid var(--lk-line); border-radius: 0; }
#unifiedWizard .v4-contact-price-label { font: 400 var(--lk-t-small)/1.3 var(--uw-font-body); text-transform: none; letter-spacing: 0; color: var(--lk-mut); }
#unifiedWizard .v4-contact-price-vat { text-transform: none; letter-spacing: 0; color: var(--lk-mut); }
#unifiedWizard .v4-repair-quote-note-block { display: flex; align-items: flex-start; gap: var(--lk-s2); margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
#unifiedWizard .v4-repair-quote-note-block p { margin: 0; font: 400 var(--lk-t-small)/1.45 var(--uw-font-body); color: var(--lk-mut); }
#unifiedWizard .v4-repair-quote-note-block .material-symbols-outlined { font-size: 18px; color: var(--lk-mut); }
#unifiedWizard .v4-submit-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; padding: 0 var(--lk-s3); border: 0; border-radius: 6px; background: var(--lk-accent); color: var(--lk-accent-ink); box-shadow: none; text-transform: none; letter-spacing: 0; line-height: 1.2; }
#unifiedWizard .v4-submit-btn .material-symbols-outlined { display: none; }
#unifiedWizard .v4-submit-footnote { margin: 0; text-align: left; color: var(--lk-mut); }
/* spacing leftovers from the audit */
#unifiedWizard .v4-hero-btn { padding-left: var(--lk-s2); padding-right: var(--lk-s2); }
#unifiedWizard .uw-card-vat, #unifiedWizard .v4-contact-price-vat { margin-top: 4px; }
#unifiedWizard .uw-card-body { gap: var(--lk-s2); }
#unifiedWizard .v4-insp-checklist-section { margin-top: var(--lk-s4); }
#unifiedWizard .v4-review-lines { margin-top: var(--lk-s4); }
#unifiedWizard .v4-contact-summary { padding: 0; }
#unifiedWizard .v4-contact-price-amount { margin-bottom: 0; }
#unifiedWizard .v4-contact-row-label, #unifiedWizard .v4-contact-price-label { margin-bottom: 0; }
#unifiedWizard .v4-addon-section { border-radius: 0; }
#unifiedWizard .v4-cat-badge { border-radius: 999px; padding: 0 4px; }
#unifiedWizard .v4-review-remove { width: 44px; height: 44px; }
#unifiedWizard .v4-contact-change { display: inline-flex; align-items: center; min-height: 44px; }
#unifiedWizard .v4-form-section-title span { color: var(--lk-mut); }
#unifiedWizard .v4-contact-summary-row { border-bottom: 0; }
#unifiedWizard .v4-contact-row-value { padding: 0; border: 0; }
#unifiedWizard .v4-contact-change { margin: var(--lk-s1) 0 0; padding: 0; }
#unifiedWizard .v4-submit-footnote { padding: 0; }
#unifiedWizard .v4-repair-search-input::placeholder { color: var(--lk-mut); opacity: 0.8; }
#unifiedWizard .v4-repair-search .material-symbols-outlined, #unifiedWizard .v4-repair-search-icon { color: var(--lk-mut); }
#unifiedWizard .v4-summary-inner { border-radius: 0; }
#unifiedWizard .v4-repair-quote-note { padding: 0; background: none; border: 0; border-radius: 0; color: var(--lk-mut); }
#unifiedWizard .v4-cat-card > .v4-cat-price:not(.v4-cat-photo):not(.v4-cat-badge):not(.v4-tyre-pill) { margin-top: var(--lk-s2); font: 500 var(--lk-t-title)/1.2 var(--uw-font-display); }
#unifiedWizard .v4-cat-card > .v4-cat-best-for:not(.v4-cat-photo):not(.v4-cat-badge):not(.v4-tyre-pill) { margin-top: var(--lk-s1); }
/* Descriptions on cards that carry a price keep room for four lines, so the prices line up across a strip whatever the wording. */
#unifiedWizard .v4-cat-card:has(> .v4-cat-price) > .v4-cat-best-for { min-height: calc(4 * 1.4 * var(--lk-t-label)); }
/* Tyres/Fit Only.jpg has a flat grey strip (about 7%) baked into the bottom of the file: crop it out here so no upload is needed. */
#unifiedWizard .v4-cat-photo img[src*="Fit%20Only"] { height: 108%; }
/* text on a bright photo: a soft shadow keeps the title and line readable */
#unifiedWizard .uw-pc .v4-pc-title, #unifiedWizard .uw-pc .v4-pc-line { text-shadow: var(--lk-on-photo-shadow); }
/* Remove add-on: a plain centred button, no stray icon */
#unifiedWizard .v4-addon-clear-btn { align-items: center; justify-content: center; gap: var(--lk-s1); height: 44px; margin: var(--lk-s2) 0 0; padding: 0 var(--lk-s3); line-height: 1; }
#unifiedWizard .v4-addon-clear-btn .material-symbols-outlined { display: none; }
/* Pre-Purchase tiers: the same price block as every other option card (price, then inc. VAT) */
#unifiedWizard .v4-insp-vat { margin-top: 4px; font: 400 var(--lk-t-small)/1.3 var(--uw-font-body); text-align: left; color: var(--lk-on-photo); opacity: 0.9; }
@media (min-width: 600px) { #unifiedWizard .v4-brake-pos-btn { flex: 0 0 auto; min-width: 140px; } }
/* the Getting prices placeholder is about as tall as the screen it is replaced by, so the page does not dip and then grow */
#unifiedWizard .v4-loading-wrap { display: flex; align-items: center; justify-content: center; gap: var(--lk-s2); }
/* ==== END AUDIT FIXES ==== */

/* ==== TYPE SCALE ==== */
/* One scale for every screen, the way Tesla keeps theirs: 13 small, 15 label, 17 body, 22 title, 30 hero
   (44 for the registration title on wide screens). Weights 400 and 500 only. Onest from 22 up, Inter below.
   Every text style that used another size or weight is set here, by class. */
#unifiedWizard .v4-pc-tag,
#unifiedWizard .v4-tab,
#unifiedWizard .v4-rail-title,
#unifiedWizard .v4-label,
#unifiedWizard .v4-tab-badge,
#unifiedWizard .v4-cat-badge,
#unifiedWizard .v4-insp-th,
#unifiedWizard .v4-insp-th.v4-insp-th-tier,
#unifiedWizard .v4-contact-change,
#unifiedWizard .v4-guarantee-badge,
#unifiedWizard .v4-form-num { font-family: var(--uw-font-body); font-size: var(--lk-t-small); font-weight: 500; }
#unifiedWizard .v4-repair-quote-note,
#unifiedWizard .v4-mechanic-note,
#unifiedWizard .v4-contact-row-label,
#unifiedWizard .v4-contact-price-vat,
#unifiedWizard .v4-submit-footnote,
#unifiedWizard .v4-form-section-title span { font-family: var(--uw-font-body); font-size: var(--lk-t-small); font-weight: 400; }
#unifiedWizard .v4-pc-line,
#unifiedWizard .v4-pc-sub,
#unifiedWizard .v4-rail-name { font-family: var(--uw-font-body); font-size: var(--lk-t-label); font-weight: 400; }
#unifiedWizard .v4-time-btn,
#unifiedWizard .v4-rail-amt,
#unifiedWizard .v4-rail-total span,
#unifiedWizard .v4-repair-picked-head,
#unifiedWizard .v4-repair-picked-name { font-family: var(--uw-font-body); font-size: var(--lk-t-label); font-weight: 500; }
#unifiedWizard .v4-btn,
#unifiedWizard .v4-rail-remove,
#unifiedWizard .v4-review-total strong,
#unifiedWizard .v4-form-section-title,
#unifiedWizard .v4-contact-row-value,
#unifiedWizard .v4-submit-btn { font-family: var(--uw-font-body); font-size: var(--lk-t-body); font-weight: 500; }
#unifiedWizard .v4-contact-summary-title { font-family: var(--uw-font-display); font-size: var(--lk-t-title); font-weight: 500; }
#unifiedWizard .v4-cat-name,
#unifiedWizard .v4-type-title,
#unifiedWizard .v4-card-price,
#unifiedWizard .v4-diag-card-price,
#unifiedWizard .v4-insp-price,
#unifiedWizard .v4-pc-heading,
#unifiedWizard .v4-strip-btn { font-family: var(--uw-font-display); font-size: var(--lk-t-title); font-weight: 500; }
#unifiedWizard .v4-contact-price-value { font-family: var(--uw-font-display); font-size: var(--lk-t-hero); font-weight: 500; }
#unifiedWizard strong, #unifiedWizard b { font-weight: 500; }
/* ==== END TYPE SCALE ==== */

/* ==== END LOOK ==== */

/* ==== CHECKLIST ==== */
/* The inspection checklist is a four column table (item, Basic, Standard, Premium). On a phone the
   old fixed 80px tier columns plus padding pushed Premium outside the box, and the box clipped it.
   Now the table is fixed-layout with narrow tier columns, and the box scrolls sideways if it must. */
.v4-wrapper .v4-insp-checklist-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.v4-wrapper .v4-insp-table { table-layout: fixed; width: 100%; }
@media (max-width: 480px) {
  .v4-wrapper .v4-insp-th-tier,
  .v4-wrapper .v4-insp-td-c { width: 62px; padding-left: 2px; padding-right: 2px; }
  .v4-wrapper .v4-insp-th { padding: 10px 8px; font-size: 11px; letter-spacing: 0.02em; }
  .v4-wrapper .v4-insp-th.v4-insp-th-tier { font-size: 9.5px; letter-spacing: 0; padding-left: 0; padding-right: 0; }
  .v4-wrapper .v4-insp-td { padding: 9px 8px; overflow-wrap: anywhere; }
  .v4-wrapper .v4-insp-section-row td { padding: 8px; }
}
/* ==== END CHECKLIST ==== */

/* ==== REGISTRATION SIZE ====
   The first screen, sized like the Tesla sign-in and add-product screens: a tall photo (not a thin banner), a big flat
   field and button, and room to breathe. The photo melts into the page with an eased fade (many soft steps, so there
   is no band where the white starts). A phone on its side (very short) keeps its own side by side layout above. */
@media not all and (orientation: landscape) and (max-height: 520px) and (min-width: 560px) {
  #unifiedWizard #uwStep2 .v4-reg-section { display: flex; flex-direction: column; max-width: none; width: 100%; margin: 0; padding-bottom: var(--lk-s5); }
  #unifiedWizard #uwStep2 .v4-reg-section > :not(.v4-hero) { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; }
  #unifiedWizard #uwStep2 .v4-reg-section > .v4-reg-plate-wrap { margin-top: var(--lk-s5); }
  #unifiedWizard #uwStep2 .v4-hero-reg { min-height: clamp(340px, 46vh, 460px); display: flex; align-items: flex-end; }
  #unifiedWizard #uwStep2 .v4-hero-reg .v4-hero-photo { height: 100%; }
  #unifiedWizard #uwStep2 .v4-hero-reg .v4-hero-photo::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) 22%, color-mix(in srgb, var(--uw-white) 0%, transparent) 25%, color-mix(in srgb, var(--uw-white) 0%, transparent) 28.4%, color-mix(in srgb, var(--uw-white) 3%, transparent) 33.9%, color-mix(in srgb, var(--uw-white) 10%, transparent) 42.9%, color-mix(in srgb, var(--uw-white) 24%, transparent) 51.8%, color-mix(in srgb, var(--uw-white) 45%, transparent) 60.7%, color-mix(in srgb, var(--uw-white) 70%, transparent) 69.7%, color-mix(in srgb, var(--uw-white) 90%, transparent) 78.6%, color-mix(in srgb, var(--uw-white) 98%, transparent) 85.3%, color-mix(in srgb, var(--uw-white) 100%, transparent) 88.7%, color-mix(in srgb, var(--uw-white) 100%, transparent) 92%); }
  #unifiedWizard #uwStep2 .v4-hero-reg .v4-hero-text { position: relative; width: 100%; padding: var(--lk-s5) var(--lk-s3) var(--lk-s4); }
  #unifiedWizard #uwStep2 .v4-hero-reg .v4-hero-title { font-size: var(--lk-t-display); }
  #unifiedWizard #uwStep2 .v4-reg-plate { height: 64px; }
  #unifiedWizard #uwStep2 .v4-reg-flag { width: 56px; }
  #unifiedWizard #uwStep2 .v4-reg-flag-union-jack { width: 28px; height: 18px; }
  #unifiedWizard #uwStep2 .v4-reg-input { font-size: var(--lk-t-hero); letter-spacing: 5px; padding: 0 var(--lk-s3); }
  #unifiedWizard #uwStep2 .v4-reg-cta { height: 56px; margin-top: var(--lk-s3); }
  #unifiedWizard #uwStep2 .v4-reg-reassure { justify-content: center; margin-top: var(--lk-s3); }
  #unifiedWizard #uwStep2 .v4-error { text-align: center; }   /* aligned like the rest of this screen, wherever the reassurance line is centred */
}
/* On a phone the big title climbs into the bright part of the photo: the hero size sits lower, in the fade. */
@media (max-width: 559px) {
  #unifiedWizard #uwStep2 .v4-hero-reg .v4-hero-title { font-size: var(--lk-t-hero); }
}
/* ==== END REGISTRATION SIZE ==== */

/* ==== EASED FADES ====
   Every hero photo melts into the page with the same eased fade as the registration screen: many soft steps instead of a
   straight two-colour ramp, so there is no band where the white starts. The fade ends in solid white (the real page
   colour) before the photo ends, the hero has no background of its own and its bottom edge is square, so no outline or
   tinted box is left behind. Same breakpoints as the rules they replace. */
#unifiedWizard .v4-hero { background: transparent; }
#unifiedWizard .v4-hero { border-radius: 12px 12px 0 0; }
#unifiedWizard .v4-hero-photo img { height: calc(100% - 2px); }
#unifiedWizard .v4-hero-photo::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 32%, color-mix(in srgb, var(--uw-white) 0%, transparent) 32%, color-mix(in srgb, var(--uw-white) 0%, transparent) 35.0%, color-mix(in srgb, var(--uw-white) 3%, transparent) 40.0%, color-mix(in srgb, var(--uw-white) 10%, transparent) 48.0%, color-mix(in srgb, var(--uw-white) 24%, transparent) 56.0%, color-mix(in srgb, var(--uw-white) 45%, transparent) 64.0%, color-mix(in srgb, var(--uw-white) 70%, transparent) 72.0%, color-mix(in srgb, var(--uw-white) 90%, transparent) 80.0%, color-mix(in srgb, var(--uw-white) 98%, transparent) 86.0%, color-mix(in srgb, var(--uw-white) 100%, transparent) 89.0%, color-mix(in srgb, var(--uw-white) 100%, transparent) 92%); }
@media (min-width: 900px) {
  #unifiedWizard .v4-hero { border-radius: 0 12px 0 0; }
  #unifiedWizard .v4-hero-photo::after { background: linear-gradient(to right, color-mix(in srgb, var(--uw-white) 100%, transparent) 0%, color-mix(in srgb, var(--uw-white) 100%, transparent) 3.5%, color-mix(in srgb, var(--uw-white) 97%, transparent) 9.3%, color-mix(in srgb, var(--uw-white) 90%, transparent) 18.7%, color-mix(in srgb, var(--uw-white) 76%, transparent) 28.0%, color-mix(in srgb, var(--uw-white) 55%, transparent) 37.3%, color-mix(in srgb, var(--uw-white) 30%, transparent) 46.7%, color-mix(in srgb, var(--uw-white) 10%, transparent) 56.0%, color-mix(in srgb, var(--uw-white) 2%, transparent) 63.0%, color-mix(in srgb, var(--uw-white) 0%, transparent) 66.5%, color-mix(in srgb, var(--uw-white) 0%, transparent) 70%), linear-gradient(to top, color-mix(in srgb, var(--uw-white) 100%, transparent) 0%, color-mix(in srgb, var(--uw-white) 100%, transparent) 1.5%, color-mix(in srgb, var(--uw-white) 97%, transparent) 4.0%, color-mix(in srgb, var(--uw-white) 90%, transparent) 8.0%, color-mix(in srgb, var(--uw-white) 76%, transparent) 12.0%, color-mix(in srgb, var(--uw-white) 55%, transparent) 16.0%, color-mix(in srgb, var(--uw-white) 30%, transparent) 20.0%, color-mix(in srgb, var(--uw-white) 10%, transparent) 24.0%, color-mix(in srgb, var(--uw-white) 2%, transparent) 27.0%, color-mix(in srgb, var(--uw-white) 0%, transparent) 28.5%, color-mix(in srgb, var(--uw-white) 0%, transparent) 30%); }
}
@media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) {
  #unifiedWizard .v4-hero { border-radius: 0 12px 0 0; }
  #unifiedWizard .v4-hero-photo::after { background: linear-gradient(to right, color-mix(in srgb, var(--uw-white) 100%, transparent) 0%, color-mix(in srgb, var(--uw-white) 100%, transparent) 3.5%, color-mix(in srgb, var(--uw-white) 97%, transparent) 9.3%, color-mix(in srgb, var(--uw-white) 90%, transparent) 18.7%, color-mix(in srgb, var(--uw-white) 76%, transparent) 28.0%, color-mix(in srgb, var(--uw-white) 55%, transparent) 37.3%, color-mix(in srgb, var(--uw-white) 30%, transparent) 46.7%, color-mix(in srgb, var(--uw-white) 10%, transparent) 56.0%, color-mix(in srgb, var(--uw-white) 2%, transparent) 63.0%, color-mix(in srgb, var(--uw-white) 0%, transparent) 66.5%, color-mix(in srgb, var(--uw-white) 0%, transparent) 70%); }
  #unifiedWizard .v4-hero-reg .v4-hero-photo::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) 35%, color-mix(in srgb, var(--uw-white) 0%, transparent) 35%, color-mix(in srgb, var(--uw-white) 0%, transparent) 37.9%, color-mix(in srgb, var(--uw-white) 3%, transparent) 42.6%, color-mix(in srgb, var(--uw-white) 10%, transparent) 50.2%, color-mix(in srgb, var(--uw-white) 24%, transparent) 57.8%, color-mix(in srgb, var(--uw-white) 45%, transparent) 65.4%, color-mix(in srgb, var(--uw-white) 70%, transparent) 73.0%, color-mix(in srgb, var(--uw-white) 90%, transparent) 80.6%, color-mix(in srgb, var(--uw-white) 98%, transparent) 86.3%, color-mix(in srgb, var(--uw-white) 100%, transparent) 89.2%, color-mix(in srgb, var(--uw-white) 100%, transparent) 92%); }
}
/* ==== END EASED FADES ==== */

/* ==== CONTACT ORDER ====
   The last page on phones and tablets, in the order the Mobbin refs agree on (Tripadvisor "Contact details", Tesla
   "Confirm Appointment Request"): a small Back arrow, the heading, three labelled rows (what, which car, how much), then
   the form, then the consent right next to the one button, then the guarantee once. Everything is flattened into one
   column so the pieces can be put in this order; nothing is removed from the page. Desktop keeps its side summary. */
@media (max-width: 1023px) {
  #unifiedWizard #uwStepContact.active { display: flex; flex-direction: column; }
  #unifiedWizard #uwStepContact .v4-asym-grid, #unifiedWizard #uwStepContact #uwContactCol, #unifiedWizard #uwStepContact .v4-contact-summary-col, #unifiedWizard #uwStepContact .v4-contact-summary, #unifiedWizard #uwStepContact .v4-contact-summary-inner { display: contents; }
  #unifiedWizard #uwStepContact .v4-summary-stripe, #unifiedWizard #uwStepContact .v4-contact-summary-title { display: none; }
  #unifiedWizard #uwStepContact .v4-nav { order: 0; margin: 0 0 var(--lk-s3); }
  #unifiedWizard #uwStepContact .v4-nav .v4-btn-ghost { height: 44px; padding: 0 var(--lk-s2) 0 0; background: none; color: var(--lk-fg); }
  #unifiedWizard #uwStepContact .v4-nav .v4-btn-ghost .material-symbols-outlined { display: inline-block; font-size: 24px; }
  #unifiedWizard #uwStepContact .v4-step-heading { order: 1; }
  #unifiedWizard #uwStepContact .v4-step-sub { order: 2; margin-bottom: var(--lk-s4); }
  #unifiedWizard #uwStepContact .v4-contact-summary-row, #unifiedWizard #uwStepContact .v4-contact-price-block { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--lk-s3); margin: 0; padding: var(--lk-s3) 0; border: 0; border-top: 1px solid var(--lk-line); background: none; text-align: left; }
  #unifiedWizard #uwStepContact .v4-contact-summary-row { order: 3; }
  #unifiedWizard #uwStepContact .v4-contact-summary-row > div:not(.v4-summary-icon-chip) { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--lk-s3); align-items: baseline; }
  #unifiedWizard #uwStepContact .v4-contact-row-label { grid-column: 1; grid-row: 1; }
  #unifiedWizard #uwStepContact .v4-contact-row-value { grid-column: 1; grid-row: 2; }
  #unifiedWizard #uwStepContact .v4-contact-change { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; min-height: 44px; }
  #unifiedWizard #uwStepContact #uwSummaryVehicleRow { order: 4; }
  #unifiedWizard #uwStepContact #uwSummaryMotRow, #unifiedWizard #uwStepContact #uwSummaryDateRow, #unifiedWizard #uwStepContact #uwSummaryTimeRow { display: none !important; }
  #unifiedWizard #uwStepContact #uwSummaryPriceRow { order: 5; align-items: center; margin-bottom: var(--lk-s5); border-bottom: 1px solid var(--lk-line); }
  #unifiedWizard #uwStepContact .v4-contact-price-label { margin: 0; }
  #unifiedWizard #uwStepContact .v4-contact-price-amount { display: flex; flex-direction: row; align-items: baseline; gap: var(--lk-s2); margin: 0; text-align: right; }
  #unifiedWizard #uwStepContact .v4-repair-quote-note-block { order: 5; margin-bottom: var(--lk-s5); }
  #unifiedWizard #uwStepContact .v4-form-section { order: 10; margin: 0 0 var(--lk-s5); }
  #unifiedWizard #uwStepContact #uwSecSchedule { order: 11; }
  #unifiedWizard #uwStepContact #uwSecNotes { order: 12; }
  #unifiedWizard #uwStepContact .v4-consent-row { order: 20; margin: 0 0 var(--lk-s3); }
  #unifiedWizard #uwStepContact .v4-error { order: 21; }
  #unifiedWizard #uwStepContact .v4-submit-btn { order: 22; }
  #unifiedWizard #uwStepContact .v4-submit-footnote { order: 23; margin-top: var(--lk-s3); }
}
/* ==== END CONTACT ORDER ====

/* ==== WRAPPER HEIGHT ====
   The old sidebar layout gave the widget a 600px minimum height. With no sidebar it only props short screens open
   (the service choice is about 370px of content), leaving a blank band above the page footer. Content decides the height. */
#unifiedWizard.v4-wrapper { min-height: 0; }
/* ==== END WRAPPER HEIGHT ==== */

/* ==== STRIP SHAPE ====
   The service choice cards are Tesla-style portrait tiles (owner's pick, 2026-11-07): a big title top-left, one line under it and a
   white Select button bottom-left, on a photo with a dark fade from the top. They are 4:5 and a fixed 320px wide on every screen, copied from Apple (measured on apple.com/mac
   and /iphone: card width 372px at both 1707 and 2560 wide, never grown to fill the row; few cards or a huge screen just means the row
   sits centred in the space, and a long row scrolls from the left edge to edge). Never wider than 80% of the strip so the next card
   always peeks in. The width is deliberately not vw or a screen-size step: this is an embed, so the window says nothing about the column the
   widget was given. safe center centres the row only when it all fits, so when it scrolls the first card is still reachable. With nothing
   to scroll the arrows and dots are hidden (.v4-no-scroll). Under the strip, one dot per
   service: the long dark dot is the card at the front. */
#unifiedWizard #uwStep1 .v4-pc-grid .uw-pc { aspect-ratio: 4 / 5; flex: 0 0 min(80%, 320px); }
#unifiedWizard #uwStep1 .v4-pc-grid { justify-content: safe center; }
#unifiedWizard .v4-no-scroll, #unifiedWizard .v4-pc-dots.v4-no-scroll { display: none; }
#unifiedWizard #uwStep1 .uw-pc .v4-pc-text { top: 24px; bottom: 24px; left: 24px; right: 24px; display: flex; flex-direction: column; gap: 4px; }
#unifiedWizard #uwStep1 .uw-pc .v4-pc-title { font: 500 var(--lk-t-title)/1.2 var(--uw-font-display); white-space: normal; overflow: visible; text-overflow: clip; }
#unifiedWizard #uwStep1 .uw-pc .v4-pc-line { font: 400 15px/1.4 var(--uw-font-body); white-space: normal; overflow: visible; text-overflow: clip; }
#unifiedWizard #uwStep1 .uw-pc .v4-pc-more { display: none; }
#unifiedWizard #uwStep1 .uw-pc .v4-pc-lead, #unifiedWizard #uwStep1 .uw-pc:hover .v4-pc-lead, #unifiedWizard #uwStep1 .uw-pc:focus-visible .v4-pc-lead { grid-template-rows: 1fr; opacity: 1; }
#unifiedWizard #uwStep1 .uw-pc:hover::before, #unifiedWizard #uwStep1 .uw-pc:focus-visible::before { opacity: 0; }
#unifiedWizard #uwStep1 .uw-pc .v4-pc-cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; height: 40px; padding: 0 24px; border-radius: 6px; background: rgba(255, 255, 255, 0.94); color: var(--lk-fg); font: 500 15px/1 var(--uw-font-body); text-shadow: none; }
#unifiedWizard #uwStep1 .uw-pc:hover .v4-pc-cta { background: var(--uw-white); }
#unifiedWizard #uwStep1 .uw-pc::after { display: block; inset: 0; width: auto; height: auto; border-radius: 0; box-shadow: none; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.45)); }
#unifiedWizard .v4-pc-dots { display: flex; justify-content: center; align-items: center; margin: var(--lk-s2) 0 0; }
#unifiedWizard .v4-pc-dot { position: relative; box-sizing: content-box; width: 8px; height: 8px; padding: var(--lk-s1) 4px; border: 0; background: none; cursor: pointer; transition: width 0.25s ease; -webkit-appearance: none; appearance: none; }
#unifiedWizard .v4-pc-dot::before { content: ""; position: absolute; left: 4px; right: 4px; top: var(--lk-s1); bottom: var(--lk-s1); border-radius: 4px; background: var(--lk-line); transition: background 0.25s ease; }
#unifiedWizard .v4-pc-dot.on { width: 28px; }
#unifiedWizard .v4-pc-dot.on::before { background: var(--lk-fg); }
#unifiedWizard .v4-pc-dot:focus-visible { outline: 2px solid var(--lk-select); outline-offset: -2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { #unifiedWizard .v4-pc-dot, #unifiedWizard .v4-pc-dot::before { transition: none; } }
/* ==== END STRIP SHAPE ====

/* ==== LOOK READABILITY ====
   Text on a bright photo (yellow oil, red paint) was hard to read. The dark fade behind the top-left text is now stronger and
   reaches further down, and the text has a soft shadow. Applies to the option cards and the repair category cards. */
#unifiedWizard .v4-service-card::after,
#unifiedWizard .v4-diag-card::after,
#unifiedWizard .v4-insp-card::after,
#unifiedWizard .v4-cat-card::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.58) 40%, rgba(0, 0, 0, 0.52) 62%, rgba(0, 0, 0, 0.12) 82%, rgba(0, 0, 0, 0.18)); }
/* The wide banner cards (Diagnostics, MOT) keep their text on the left over a long photo: they add a light side fade from the left. */
@media (min-width: 600px) {
  #unifiedWizard .v4-diag-card:only-child::after { background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0) 75%), linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.58) 40%, rgba(0, 0, 0, 0.52) 62%, rgba(0, 0, 0, 0.12) 82%, rgba(0, 0, 0, 0.18)); }
}
#unifiedWizard .v4-service-card > *:not(.v4-card-photo):not(.v4-service-card-radio),
#unifiedWizard .v4-diag-card > *:not(.v4-card-photo):not(.v4-diag-card-radio),
#unifiedWizard .v4-insp-card > *:not(.v4-card-photo):not(.v4-insp-card-radio),
#unifiedWizard .v4-cat-card > *:not(.v4-cat-photo):not(.v4-cat-badge):not(.v4-tyre-pill) { text-shadow: var(--lk-on-photo-shadow); }
#unifiedWizard .v4-basket-notice-text { font: 400 var(--lk-t-label)/1.4 var(--uw-font-body); }   /* it inherited 16px, which is not on the type scale */
/* ==== END LOOK READABILITY ==== */

/* ==== PICKED BOX ====
   The "1 selected" box repeated what the ticked row, the number on the category card and the bottom tray already say. */
#unifiedWizard .v4-repair-picked { display: none; }
/* ==== END PICKED BOX ==== */

/* ==== TAP AREAS ====
   Small links and dots keep their look but get a 44px tap area from an invisible layer around them. */
#unifiedWizard .v4-pc-dot,
#unifiedWizard .v4-change-reg-link,
#unifiedWizard #uwPrivacyLink,
#unifiedWizard .v4-rail-remove { position: relative; }
#unifiedWizard .v4-pc-dot::after { content: ""; position: absolute; inset: -10px -4px; }
#unifiedWizard .v4-change-reg-link::after { content: ""; position: absolute; inset: -12px -6px; }
#unifiedWizard #uwPrivacyLink::after { content: ""; position: absolute; inset: -14px -6px; }
#unifiedWizard .v4-rail-remove::after { content: ""; position: absolute; inset: -8px; }
/* ==== END TAP AREAS ==== */

/* ==== FORM ERRORS ====
   Wrong fields get a clear red outline (the old pale pink glow was easy to miss), and the message has room above the button. */
#unifiedWizard .v4-input.invalid { outline: 2px solid var(--uw-error); outline-offset: 0; box-shadow: none !important; }
#unifiedWizard .v4-input.invalid:focus { outline-color: var(--uw-error); }
#unifiedWizard #uwStepContact .v4-error { margin-bottom: var(--lk-s2); }
/* ==== END FORM ERRORS ==== */

/* ==== HERO LINE ====
   No single word left alone on the last line of the hero text on narrow phones. */
#unifiedWizard .v4-hero-line { text-wrap: balance; }
/* The registration heading and its line are fitted to one line each (uwFitHeroText); below their size floor they wrap instead. */
#unifiedWizard .v4-fit { white-space: nowrap; }
/* ==== END HERO LINE ==== */

/* ==== APPLE PANEL ====
   The owner's pick (2026-11-07): rows and the Booking Summary sit as white tiles on one pale grey panel (the Apple Store look).
   The chosen row is told apart by weight, a dark ring and a dark round tick, not by orange. Only the repair rows use it: the owner
   chose to keep the original flat Tesla-style Booking Summary (grey card, label over value, hairlines). */
#unifiedWizard {
  --lk-panel: #f5f5f7;
  --lk-ink: #1d1d1f;
  --lk-edge: #d2d2d7;
  --lk-tickline: #a1a1a6;
}

/* repair rows */
#unifiedWizard .v4-svc-list { gap: 10px; padding: 16px; background: var(--lk-panel); border-radius: 12px; }
#unifiedWizard .v4-svc-item { min-height: 68px; padding: 12px 18px; background: var(--uw-white); border: 0; border-radius: 12px; box-shadow: 0 0 0 1px var(--lk-edge); filter: none; }
#unifiedWizard .v4-svc-item:hover { filter: none; box-shadow: 0 0 0 1px var(--lk-tickline); }
#unifiedWizard .v4-svc-item.selected { background: var(--uw-white); box-shadow: 0 0 0 2px var(--lk-ink); }
#unifiedWizard .v4-svc-checkbox { width: 22px; height: 22px; border: 1px solid var(--lk-tickline); border-radius: 50%; background: transparent; color: transparent; }
#unifiedWizard .v4-svc-checkbox .material-symbols-outlined { font-size: 15px; }
#unifiedWizard .v4-svc-item.selected .v4-svc-checkbox { background: var(--lk-ink); border-color: var(--lk-ink); color: var(--uw-white); }

@media (max-width: 480px) {
  #unifiedWizard .v4-svc-list { padding: 12px; }
  #unifiedWizard .v4-svc-item { padding: 12px 14px; gap: 12px; }
}
/* ==== END APPLE PANEL ==== */

/* ==== SERVICE CHOICE HERO ====
   The service choice screen opens with a hero photo like every other step. The arrows sit on the right above the cards. */
#unifiedWizard .v4-pc-headrow { justify-content: flex-end; }
#unifiedWizard #uwStep1Head .v4-hero { margin-bottom: var(--lk-s2); }
@media (max-width: 599px) {
  #unifiedWizard .v4-pc-headrow { display: none; }
  #unifiedWizard #uwStep1Head { margin-bottom: 0; }
  #unifiedWizard #uwStep1Head .v4-hero { margin-bottom: var(--lk-s3); }
}
/* ==== END SERVICE CHOICE HERO ==== */

/* ==== SELECTION RING ====
   One selection and focus language everywhere: a dark ink ring. Orange is only for the buttons and the small count badges.
   On photo cards the ring sits outside the photo so it cannot vanish into a dark picture. */
#unifiedWizard .v4-repair-search-input:focus { border-color: var(--lk-select); box-shadow: 0 0 0 1px var(--lk-select); outline: none; }
/* ==== END SELECTION RING ==== */

/* ==== CONTACT SUMMARY MATCH ====
   On desktop the Booking Summary on the final details step looks the same as the one beside the options: the same column width,
   card padding, value spacing and link. (Phones keep their own compact layout.) */
@media (min-width: 900px) {
  #unifiedWizard #uwStepContact .v4-asym-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  #unifiedWizard .v4-contact-summary { padding: 7px; }
  #unifiedWizard .v4-contact-row-label { line-height: 1.3; }
  #unifiedWizard .v4-contact-row-value { margin-top: 2px; }
  #unifiedWizard .v4-contact-change { font: 500 var(--lk-t-label)/1.3 var(--uw-font-body); min-height: 0; margin-top: 2px; }
  #unifiedWizard .v4-contact-change { position: relative; }
  #unifiedWizard .v4-contact-change::after { content: ""; position: absolute; inset: -12px -6px; }
  #unifiedWizard .v4-repair-quote-note-block p { line-height: 1.5; }
}
/* ==== END CONTACT SUMMARY MATCH ==== */

/* ==== ONE HEIGHT ====
   The booking system keeps about the same height from step to step (the owner's aim): enter registration, select a service,
   diagnostics and review match. Every photo card (servicing, diagnostics, inspection, repair category) uses one height per
   screen size, and the heroes on enter registration, select a service and review take up the difference. Repairs and the
   details form are naturally longer, which is fine. */
#unifiedWizard { --lk-card-h: clamp(200px, calc(138px + 15.8vw), 300px); --lk-hero-reg: 400px; --lk-hero-select: 190px; --lk-hero-review: 302px; }
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 521px) { #unifiedWizard { --lk-hero-reg: 490px; --lk-hero-select: 240px; --lk-hero-review: 432px; } }
@media (min-width: 1024px) and (min-height: 521px) { #unifiedWizard { --lk-hero-reg: 460px; --lk-hero-select: 240px; --lk-hero-review: 404px; } }
/* A phone held sideways is wide but only about 390px tall: it must not get the tablet heroes (490px would be taller than the screen). */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) { #unifiedWizard { --lk-hero-reg: 240px; --lk-hero-select: 150px; --lk-hero-review: 170px; } }
#unifiedWizard .v4-service-card,
#unifiedWizard .v4-diag-card,
#unifiedWizard .v4-insp-card,
#unifiedWizard .v4-cat-card { height: var(--lk-card-h); }
/* Option cards carry a title, a description, a price and a button, so they never go below 280px (the token is 200px on a phone). */
#unifiedWizard .v4-cat-card { min-height: 280px; }
#unifiedWizard #uwStep2 .v4-hero-reg { min-height: var(--lk-hero-reg); }
@media (min-width: 768px) {
  #unifiedWizard #uwStep1Head .v4-hero, #unifiedWizard #uwStepReview .v4-hero { min-height: var(--lk-hero-select); }
  #unifiedWizard #uwStepReview .v4-hero { min-height: var(--lk-hero-review); }
}
@media (max-width: 767px) {
  #unifiedWizard #uwStep1Head .v4-hero-photo { height: var(--lk-hero-select); }
  #unifiedWizard #uwStep1Head .v4-hero-text { padding-top: calc(var(--lk-hero-select) - 58px); }
  #unifiedWizard #uwStepReview .v4-hero-photo { height: var(--lk-hero-review); }
  #unifiedWizard #uwStepReview .v4-hero-text { padding-top: calc(var(--lk-hero-review) - 58px); }
}
/* ==== END ONE HEIGHT ==== */


/* ==== OPTION CARD HOVER ====
   The option cards (tyres, repair categories) keep the photo clean: the long description appears when the card is hovered or has keyboard focus,
   rising into place above the Select pill while the photo darkens a little so it reads; nothing else moves, because the description is
   anchored to the bottom and the price sits directly under the title. A touch screen cannot hover, so there (hover: none) the description is
   shown all the time, in the card flow, as before. */
#unifiedWizard .v4-cat-card > .v4-cat-photo img { transition: filter 0.3s ease; }
@media (hover: hover) and (pointer: fine) {
  #unifiedWizard .v4-cat-card > .v4-cat-best-for:not(.v4-cat-photo):not(.v4-cat-badge):not(.v4-tyre-pill) { position: absolute; left: 24px; right: 24px; bottom: 62px; margin: 0; min-height: 0; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
  #unifiedWizard .v4-cat-card:hover > .v4-cat-best-for:not(.v4-cat-photo):not(.v4-cat-badge):not(.v4-tyre-pill),
  #unifiedWizard .v4-cat-card:focus-visible > .v4-cat-best-for:not(.v4-cat-photo):not(.v4-cat-badge):not(.v4-tyre-pill),
  #unifiedWizard .v4-cat-card:focus-within > .v4-cat-best-for:not(.v4-cat-photo):not(.v4-cat-badge):not(.v4-tyre-pill) { opacity: 1; }
  #unifiedWizard .v4-cat-card:hover .v4-cat-photo img,
  #unifiedWizard .v4-cat-card:focus-visible .v4-cat-photo img { filter: brightness(0.6); }
}
/* ==== END OPTION CARD HOVER ====

/* ==== BUTTON SYSTEM ====
   One height for every call-to-action, secondary, hero and review button: 50px, and 44px on a landscape phone (short screens), the same
   on every screen. It was 40, 44, 48, 50 and 56 depending on the button and the device, set in nine different rules; it is set once here
   and this block is last, so nothing earlier can drift. Other roles keep their own height on purpose: tabs (navigation, 44px) and the
   time pills (they are as tall as the input fields they sit with, 56px). A text-only Back link on the contact screen is a link, not a button. */
#unifiedWizard { --lk-btn-h: 50px; }
@media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) { #unifiedWizard { --lk-btn-h: 44px; } }
#unifiedWizard .v4-btn,
#unifiedWizard .v4-cf-secondary,
#unifiedWizard .v4-hero-btn,
#unifiedWizard .v4-sidebar-next-btn,
#unifiedWizard .v4-submit-btn,
#unifiedWizard .v4-review-add,
#unifiedWizard #uwStep2 .v4-reg-cta { height: var(--lk-btn-h); min-height: var(--lk-btn-h); }
/* ==== END BUTTON SYSTEM ==== */


/* ==== PHOTO BALANCE ====
   Added 2026-11-08 after the owner saw the new pictures: the white fade on the heroes hid too much of the picture, and the dark
   pictures were made nearly black by a fade tuned for bright ones (while the bright MOT picture still failed the price contrast, 2.2:1).
   The owner compared three mocks (A, AB, B) and chose A (direction AB was built and then reverted at their request).
   1. Heroes: on wide screens the white from the left is gone by 56% (it ran to 66%) but is still 64% white under the title line, and the
      melt into the page at the bottom is 22% of the hero tall instead of about 30%. The crop and mirroring of each hero picture are
      in UW_CONFIG.photos.focus.
   2. Cards: the normal fade stays for any picture that is not listed. UW_CONFIG.photos.tone marks a picture dark or bright where the
      price sits (scripts/measure-photo-tone.py), and uwApplyPhotoTones puts data-tone on the card: dark gets a light fade, bright a
      strong one. Price contrast is measured by scripts/check-card-consistency.py. */
@media (min-width: 900px) {
  #unifiedWizard .v4-hero-photo::after { background: linear-gradient(to right, color-mix(in srgb, var(--uw-white) 100%, transparent) 0%, color-mix(in srgb, var(--uw-white) 100%, transparent) 5%, color-mix(in srgb, var(--uw-white) 94%, transparent) 12%, color-mix(in srgb, var(--uw-white) 84%, transparent) 20%, color-mix(in srgb, var(--uw-white) 72%, transparent) 27%, color-mix(in srgb, var(--uw-white) 64%, transparent) 32%, color-mix(in srgb, var(--uw-white) 48%, transparent) 38%, color-mix(in srgb, var(--uw-white) 28%, transparent) 44%, color-mix(in srgb, var(--uw-white) 12%, transparent) 50%, color-mix(in srgb, var(--uw-white) 3%, transparent) 54%, color-mix(in srgb, var(--uw-white) 0%, transparent) 56%, color-mix(in srgb, var(--uw-white) 0%, transparent) 60%), linear-gradient(to top, color-mix(in srgb, var(--uw-white) 100%, transparent) 0%, color-mix(in srgb, var(--uw-white) 100%, transparent) 1.5%, color-mix(in srgb, var(--uw-white) 85%, transparent) 5%, color-mix(in srgb, var(--uw-white) 60%, transparent) 9%, color-mix(in srgb, var(--uw-white) 32%, transparent) 13%, color-mix(in srgb, var(--uw-white) 12%, transparent) 17%, color-mix(in srgb, var(--uw-white) 0%, transparent) 22%, color-mix(in srgb, var(--uw-white) 0%, transparent) 30%); }
}
@media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) {
  #unifiedWizard .v4-hero-photo::after { background: linear-gradient(to right, color-mix(in srgb, var(--uw-white) 100%, transparent) 0%, color-mix(in srgb, var(--uw-white) 100%, transparent) 5%, color-mix(in srgb, var(--uw-white) 94%, transparent) 12%, color-mix(in srgb, var(--uw-white) 84%, transparent) 20%, color-mix(in srgb, var(--uw-white) 72%, transparent) 27%, color-mix(in srgb, var(--uw-white) 64%, transparent) 32%, color-mix(in srgb, var(--uw-white) 48%, transparent) 38%, color-mix(in srgb, var(--uw-white) 28%, transparent) 44%, color-mix(in srgb, var(--uw-white) 12%, transparent) 50%, color-mix(in srgb, var(--uw-white) 3%, transparent) 54%, color-mix(in srgb, var(--uw-white) 0%, transparent) 56%, color-mix(in srgb, var(--uw-white) 0%, transparent) 60%); }
}
#unifiedWizard .v4-service-card[data-tone="dark"]::after,
#unifiedWizard .v4-diag-card[data-tone="dark"]::after,
#unifiedWizard .v4-insp-card[data-tone="dark"]::after,
#unifiedWizard .v4-cat-card[data-tone="dark"]::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.34) 40%, rgba(0, 0, 0, 0.34) 62%, rgba(0, 0, 0, 0.28) 82%, rgba(0, 0, 0, 0.3)); }
/* A near-black picture (an engine bay) stays black under any fade, so a dark picture is also lifted a little. */
#unifiedWizard [data-tone="dark"] [class*="photo"] img { filter: brightness(1.3); }
#unifiedWizard .v4-service-card[data-tone="bright"]::after,
#unifiedWizard .v4-diag-card[data-tone="bright"]::after,
#unifiedWizard .v4-insp-card[data-tone="bright"]::after,
#unifiedWizard .v4-cat-card[data-tone="bright"]::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.64) 40%, rgba(0, 0, 0, 0.6) 62%, rgba(0, 0, 0, 0.5) 82%, rgba(0, 0, 0, 0.52)); }
@media (min-width: 600px) {
  #unifiedWizard .v4-diag-card:only-child[data-tone="bright"]::after { background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0) 75%), linear-gradient(to bottom, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.64) 40%, rgba(0, 0, 0, 0.6) 62%, rgba(0, 0, 0, 0.5) 82%, rgba(0, 0, 0, 0.52)); }
}
/* ==== END PHOTO BALANCE ====

/* ==== CLOSE CHECKLIST ====
   A Close checklist button sits right under the servicing "What's included?" list and the pre-purchase inspection checklist (added by
   uwEnhanceChecklists), between the last row and Back, because Back leaves the page and the hero button that opened the list is far
   out of sight on a long list. It is shown only while its list is open. */
#unifiedWizard .v4-checklist-close { margin-top: var(--lk-s3); }
#unifiedWizard .v4-includes-body:not(.open) + .v4-checklist-close,
#unifiedWizard .v4-insp-checklist-wrap:not(.open) + .v4-checklist-close { display: none; }
/* ==== END CLOSE CHECKLIST ==== */

/* ==== AREA MESSAGE ====
   The "outside our service area" message was a pink box with a red bar down its left edge and 14px text, which nothing else in the
   flow looks like. The other form errors on that screen are plain error-coloured text in the 15px label size, so this is too. Its
   link keeps the text's size and colour and is only underlined. */
#unifiedWizard .v4-area-msg { margin: var(--lk-s2) 0 var(--lk-s3); padding: 0; background: none; border: 0; border-radius: 0; font: 500 var(--lk-t-label)/1.4 var(--uw-font-body); color: var(--uw-error); }
#unifiedWizard .v4-area-msg a { color: inherit; font-weight: inherit; text-decoration: underline; }
/* ==== END AREA MESSAGE ==== */

/* ==== STEP SLIDE ====
   The screen being left stays on show as the real screen (uwSlideSteps adds .uw-leaving) while it slides away; it is no longer .active, so
   its cards do not replay their entrance, and it cannot be clicked. It must be the real one: its styles are keyed to its ids. The host
   clips sideways while anything slides. */
#unifiedWizard .v4-step.uw-leaving { display: block; position: absolute; left: 0; right: 0; top: 0; pointer-events: none; animation: none; }
#unifiedWizard [data-sliding] { position: relative; overflow-x: clip; }
/* ==== END STEP SLIDE ==== */

/* ==== CARD INFO ====
   The servicing cards (Interim, Full, Major) have a small (i), bottom left, opposite Select (owner chose option B from a mock, 2026-11-08;
   real cases on Mobbin: Apple Invites, where the details replace the title over the same calmed photo, and Neo, the same frame with new
   content). Press it and the front text is replaced by "Interim service" and the description, over the dimmed, softened photo. It is
   separate from choosing: the card's click still selects, and the (i) works the same whether or not the card is selected. The motion is
   the one we already have, the card rise-in (28px, 0.7 s, the same curve, 0.12 s apart) and the photo dim, so it matches the rest of the
   widget. Where the old hover and always-visible rules were, there is now only this. */
#unifiedWizard .v4-service-card .v4-card-photo img { transition: filter 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
#unifiedWizard .v4-service-card.v4-info-open .v4-card-photo img { filter: brightness(0.62) blur(8px); transform: scale(1.06); }
#unifiedWizard .v4-service-card > :is(.v4-card-name, .v4-card-eyebrow, .v4-card-point-badge, .v4-card-price, .v4-card-vat) { transition: opacity 0.25s ease, transform 0.25s ease; }
#unifiedWizard .v4-service-card.v4-info-open > :is(.v4-card-name, .v4-card-eyebrow, .v4-card-point-badge, .v4-card-price, .v4-card-vat) { opacity: 0; transform: translateY(-10px); pointer-events: none; }
#unifiedWizard .v4-service-card > .v4-card-back-title:not(.v4-card-photo):not(.v4-service-card-radio),
#unifiedWizard .v4-service-card > .v4-card-desc:not(.v4-card-photo):not(.v4-service-card-radio) { display: block; position: absolute; left: 24px; right: 24px; z-index: 2; margin: 0; padding: 0; color: var(--lk-on-photo); text-shadow: var(--lk-on-photo-shadow); opacity: 0; transform: translateY(28px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
#unifiedWizard .v4-service-card > .v4-card-back-title:not(.v4-card-photo):not(.v4-service-card-radio) { top: 24px; font: 500 var(--lk-t-title)/1.2 var(--uw-font-display); }
#unifiedWizard .v4-service-card > .v4-card-desc:not(.v4-card-photo):not(.v4-service-card-radio) { top: 62px; font: 400 var(--lk-t-body)/1.45 var(--uw-font-body); }
#unifiedWizard .v4-service-card.v4-info-open > .v4-card-back-title:not(.v4-card-photo):not(.v4-service-card-radio),
#unifiedWizard .v4-service-card.v4-info-open > .v4-card-desc:not(.v4-card-photo):not(.v4-service-card-radio) { opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
#unifiedWizard .v4-service-card.v4-info-open > .v4-card-back-title:not(.v4-card-photo):not(.v4-service-card-radio) { transition-delay: 0.15s; }
#unifiedWizard .v4-service-card.v4-info-open > .v4-card-desc:not(.v4-card-photo):not(.v4-service-card-radio) { transition-delay: 0.27s; }
#unifiedWizard .v4-service-card > button.v4-card-info-btn.v4-card-info-btn { position: absolute; left: 20px; bottom: 16px; z-index: 4; width: 38px; height: 38px; margin: 0; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; -webkit-appearance: none; appearance: none; }
#unifiedWizard .v4-card-info-btn .v4-info-i,
#unifiedWizard .v4-card-info-btn .v4-info-x { position: absolute; left: 3px; top: 3px; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.9); background: rgba(0, 0, 0, 0.22); display: grid; place-items: center; font: 500 var(--lk-t-body)/1 var(--uw-font-display); text-shadow: none; transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
#unifiedWizard .v4-card-info-btn .v4-info-x { opacity: 0; transform: rotate(-90deg); }
#unifiedWizard .v4-service-card.v4-info-open .v4-card-info-btn .v4-info-i { opacity: 0; transform: rotate(90deg); }
#unifiedWizard .v4-service-card.v4-info-open .v4-card-info-btn .v4-info-x { opacity: 1; transform: none; }
#unifiedWizard .v4-card-info-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
  #unifiedWizard .v4-service-card .v4-card-photo img,
  #unifiedWizard .v4-service-card > *,
  #unifiedWizard .v4-card-info-btn span { transition: none !important; }
}
/* ==== END CARD INFO ==== */

/* ==== NO CARD RING ====
   No dark ring or border around any card, in any state (owner, asked repeatedly from 2026-11-07 to 2026-11-10: "that black border line").
   It covers the first-step service-choice cards (chosen, or keyboard focus) and every option card kind (keyboard focus, chosen). A chosen
   card already shows its tick circle and its Selected button. Keyboard users still get a cue that is not a border: the photo zooms a
   little, exactly as it does for a mouse. scripts/check-card-ring.py proves it for every card kind. */
#unifiedWizard :is(.uw-pc, .v4-type-card, .v4-service-card, .v4-diag-card, .v4-insp-card, .v4-cat-card, .v4-tyre-card):is(:focus, :focus-visible, .selected) { outline: none; }
#unifiedWizard .uw-pc:focus-visible .v4-pc-photo { transform: scale(1.06); }
#unifiedWizard :is(.v4-diag-card, .v4-insp-card, .v4-cat-card) img { transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
#unifiedWizard :is(.v4-service-card, .v4-diag-card, .v4-insp-card, .v4-cat-card):focus-visible img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  #unifiedWizard :is(.v4-diag-card, .v4-insp-card, .v4-cat-card) img { transition: none; }
}
/* ==== END NO CARD RING ==== */

/* ==== DIAGNOSTICS COPY ====
   The Diagnostic Inspection description was limited to 3 lines on a box that did not clip, so it read "...the issue alongsi..." with a
   fourth line still showing (owner, 2026-11-10). From 820px up there is room for all of it (it ends 16px above the price), so the limit
   goes. Between 600 and 819px there is not, and the card size is fixed, so it is hidden as it already is on a phone (the What's
   included? button above has the detail) instead of being cut mid-word. The MOT card shares this card, so it gets the same. */
@media (min-width: 820px) { #unifiedWizard .v4-diag-card .uw-card-desc { -webkit-line-clamp: unset; line-clamp: none; } }
@media (min-width: 600px) and (max-width: 819px) { #unifiedWizard .v4-diag-card .uw-card-desc { display: none; } }
/* ==== END DIAGNOSTICS COPY ==== */

/* ==== THREE-CARD SCREENS ====
   Servicing (Interim, Full, Major), Pre-Purchase (Basic, Standard, Premium) and the MOT add-on services are ONE system (owner, 2026-11-10: the
   three-card screens must be identical on every device; Servicing and the MOT add-ons were fixed 320x400 cards, Pre-Purchase a fitted grid of
   300px cards that was squeezed to 236px on a tablet). The rule is the one the first-step service cards use (Apple, 2026-11-08):
     * below 1024px wide: a sideways strip of fixed-size cards that never shrink (80% of the strip, never wider than 320px, shaped 4:5). Cards
       that do not fit scroll in with the arrows; when all three fit they sit at the start of the row,
     * from 1024px wide: the three cards share the column equally, edge to edge, and are exactly 400px tall (the height the owner chose).
   The max-width keeps the strip's negative margins from making it 12px wider than the column, which is what made Pre-Purchase differ.
   scripts/check-service-card-size.py proves the three screens match at 390, 600, 820, 1023, 1024, 1280 and 1707px. */
#unifiedWizard :is(.v4-service-grid, .v4-insp-grid, .v4-service-grid-addon) { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: visible; grid-template-columns: none; gap: var(--lk-s3); margin: -6px -6px var(--lk-s4); padding: 6px 6px var(--lk-s1); max-width: 100%; }
#unifiedWizard :is(.v4-service-grid, .v4-insp-grid, .v4-service-grid-addon) > :is(.v4-service-card, .v4-insp-card) { flex: 0 0 min(80%, 320px); width: auto; height: auto; min-height: 0; aspect-ratio: 4 / 5; }
@media (min-width: 1024px) {
  #unifiedWizard :is(.v4-service-grid, .v4-insp-grid, .v4-service-grid-addon) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; overflow: visible; margin: 0 0 var(--lk-s4); padding: 0; }
  #unifiedWizard :is(.v4-service-grid, .v4-insp-grid, .v4-service-grid-addon) > :is(.v4-service-card, .v4-insp-card) { flex: none; width: auto; height: 400px; min-height: 0; aspect-ratio: auto; }
}
/* ==== END THREE-CARD SCREENS ==== */

/* ==== DEMO ENDING ====
   The screen a demo ends on (UW_CONFIG.demoMode). The words are the live Stellix demo's (owner, 2026-11-10); the style is V3's, the same as the
   confirmation pages: a green tick circle, a 30px title in normal case, a muted 17px line, the booking as plain rows divided by hairlines
   (no box), a muted 15px note, and flat 6px buttons 50px tall (the accent for the main one, the grey field for the other). Nothing here
   is capitals, nothing is a pill. It only ever shows when demoMode is on, so the Maxamy build never sees it. */
#unifiedWizard .v4-demo-confirm { display: flex; flex-direction: column; align-items: center; max-width: 560px; margin: 0 auto; padding: var(--lk-s5) var(--lk-s3) 64px; text-align: center; background: none; border: 0; box-shadow: none; }
#unifiedWizard .v4-demo-badge { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 0 var(--lk-s4); border-radius: 50%; background: #1a8754; color: #ffffff; box-shadow: none; }
#unifiedWizard .v4-demo-badge .material-symbols-outlined { font-size: 28px; color: #ffffff; }
#unifiedWizard .v4-demo-title { margin: 0 0 var(--lk-s1); font: 500 var(--lk-t-hero)/1.2 var(--uw-font-display); text-transform: none; letter-spacing: 0; color: var(--lk-fg); }
#unifiedWizard .v4-demo-lead { max-width: 440px; margin: 0 0 var(--lk-s5); font: 400 var(--lk-t-body)/1.4 var(--uw-font-body); color: #5c5e62; }
#unifiedWizard .v4-demo-card { width: 100%; margin: 0 0 var(--lk-s4); padding: 0; text-align: left; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
#unifiedWizard .v4-demo-row { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--lk-s3); padding: var(--lk-s3) 0; border: 0; border-top: 1px solid var(--lk-line); border-radius: 0; background: none; }
#unifiedWizard .v4-demo-row:first-child { border-top: 0; border-radius: 0; }
#unifiedWizard .v4-demo-row-key { flex: 1 1 auto; font: 400 var(--lk-t-body)/1.35 var(--uw-font-body); text-transform: none; letter-spacing: 0; color: #5c5e62; }
#unifiedWizard .v4-demo-row-val { flex: none; max-width: 62%; font: 500 var(--lk-t-body)/1.35 var(--uw-font-body); text-align: right; color: var(--lk-fg); }
#unifiedWizard .v4-demo-note { margin: 0 0 var(--lk-s5); font: 400 var(--lk-t-label)/1.5 var(--uw-font-body); text-transform: none; color: #5c5e62; }
#unifiedWizard .v4-demo-actions { display: flex; flex-direction: column; align-items: center; gap: var(--lk-s2); width: 100%; }
#unifiedWizard .v4-demo-btn-primary,
#unifiedWizard a.v4-demo-btn-secondary { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 360px; height: 50px; margin: 0; padding: 0 var(--lk-s4); border: 0; border-radius: 6px; font: 500 var(--lk-t-body)/1 var(--uw-font-body); text-transform: none; letter-spacing: 0; text-decoration: none; cursor: pointer; box-shadow: none; }
#unifiedWizard .v4-demo-btn-primary { background: var(--lk-accent); color: var(--lk-accent-ink); }
#unifiedWizard a.v4-demo-btn-secondary { background: var(--lk-field); color: var(--lk-fg); }
#unifiedWizard .v4-demo-btn-primary:hover,
#unifiedWizard a.v4-demo-btn-secondary:hover { filter: brightness(0.96); transform: none; box-shadow: none; }
#unifiedWizard .v4-demo-btn-primary:focus-visible,
#unifiedWizard a.v4-demo-btn-secondary:focus-visible { outline: 2px solid var(--lk-select); outline-offset: 2px; }
@media (max-width: 600px) { #unifiedWizard .v4-demo-title { font-size: var(--lk-t-hero); } #unifiedWizard .v4-demo-row-val { max-width: 58%; } }
/* ==== END DEMO ENDING ==== */

/* ==== KEYBOARD SAFE LAYOUT ====
   Opening the phone keyboard must never change the layout (owner, 2026-11-10: a colleague's iPhone Pro Max, live). The keyboard makes the
   visible screen shorter than it is wide, and the old landscape tests (orientation: landscape plus a height under 520px) only look at that
   shape, so a portrait phone flipped into the compact landscape layout the moment the registration field was tapped (the page rearranged
   and the browser ended up at the footer). Now:
     * the compact landscape layout needs the screen to be wide enough to be a phone on its side, at least 560px (a portrait phone, even
       the widest, is under 480px), so every rule above that said (orientation: landscape) and (max-height: 520px) also says (min-width: 560px),
     * the small-phone title size, which was switched off below 521px of height, no longer depends on height, so it stays with the keyboard
       open. (The tablet and desktop hero sizes keep their 521px rule: it is what stops a landscape phone getting tablet sizes.)
   scripts/check-keyboard-layout.py proves it: a keyboard-height screen never changes a portrait phone, real landscape phones keep theirs. */
/* ==== END KEYBOARD SAFE LAYOUT ==== */

/* ==== HERO CORNERS ====
   A hero picture is rounded 12px on BOTH top corners wherever its top-left corner can be seen (owner, 2026-11-10, four live screenshots: the
   registration picture was square top-left and rounded top-right on desktop). From 900px wide, and on a phone on its side, the generic hero rule
   squares the top-left corner because the service-screen heroes fade into white from the LEFT edge, where that corner is invisible. The
   registration hero fades from the bottom, so its left corner is a hard photo edge and must be rounded like the right one. This rule comes last,
   so it wins over both of those; scripts/check-corners.py proves it for every hero at every size. */
#unifiedWizard .v4-hero-reg { border-radius: 12px 12px 0 0; }
/* ==== END HERO CORNERS ==== */