/* ==========================================================================
   BOOK — the funnel. Everything else on the site exists to deliver traffic
   here, so this page gets the tightest layout and the loudest hierarchy.
   ========================================================================== */

[hidden] { display: none !important; }

/* Text-weight versions of the state colours. The tokens are tuned for fills and
   dots; at micro-label sizes on paper they need darkening to clear 4.5:1. */
.book-main, .book-faq {
  --go-text: color-mix(in srgb, var(--go) 66%, var(--ink-900));
  --warn-text: color-mix(in srgb, var(--warn) 72%, var(--ink-900));
  /* LOCAL FIX — --fg-muted (--steel-500, #6B767E) measures 4.16:1 on paper and
     3.77:1 on sunk paper, under the 4.5:1 floor, and it carries every hint,
     lead, meta and fine line in the funnel. tokens.css belongs to another
     agent, so the funnel darkens it here: ≈5.7:1 on paper, ≈5.2:1 on sunk,
     same cool grey. Remove this block once --steel-500 itself is fixed. */
  --fg-muted: color-mix(in srgb, var(--steel-500) 55%, var(--steel-700));
}
/* --------------------------------------------------------------------------
   HERO — compact dark band. The page is a tool, not a billboard.
   -------------------------------------------------------------------------- */
.book-hero {
  padding-block: clamp(1.5rem, 0.9rem + 2.6vw, 3.5rem);
  background:
    radial-gradient(120% 140% at 8% 0%, color-mix(in srgb, var(--ink-700) 92%, var(--signal)) 0%, transparent 62%),
    var(--ink-900);
}
.book-hero__inner { display: grid; gap: var(--s-5); }
@media (min-width: 62em) {
  .book-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: var(--s-9); align-items: center; }
}
.book-hero h1 { font-size: var(--t-d1); line-height: 0.96; margin-top: var(--s-2); }
.book-hero .lead { margin-top: var(--s-3); max-width: 42ch; font-size: var(--t-body); line-height: 1.5; }
@media (min-width: 62em) { .book-hero .lead { font-size: var(--t-lead); } }

.book-hero__facts { display: grid; gap: var(--s-3); }
@media (min-width: 62em) { .book-hero__facts { gap: var(--s-4); } }
.book-hero__facts .trust__item { gap: var(--s-3); align-items: flex-start; }
.book-hero__facts [data-icon] { flex: none; display: block; }
.book-hero__facts .trust__item svg { color: var(--signal); width: 18px; height: 18px; margin-top: 1px; }
.book-hero__facts strong { font-size: var(--t-sm); letter-spacing: 0.005em; line-height: 1.35; }
.book-hero__facts .fact__d { display: block; font-size: var(--t-xs); line-height: 1.4; }
/* On a phone the headline facts carry it; the detail lines are repeated in the
   summary and the FAQ, so they give their pixels back to the calendar. */
@media (max-width: 45.99em) {
  .book-hero__facts .fact__d { display: none; }
  .book-hero__facts { gap: var(--s-2); }
}

.book-nojs-phone { font-family: var(--font-mono); font-weight: 600; text-decoration: underline; }

/* Once they are inside the funnel the marketing header stands down: the pitch
   has done its job and every pixel belongs to the decision in front of them. */
body.in-flow .book-hero { padding-block: var(--s-4); }
body.in-flow .book-hero .lead,
body.in-flow .book-hero__facts,
body.in-flow .book-hero .eyebrow { display: none; }
body.in-flow .book-hero h1 { font-size: var(--t-d3); margin-top: 0; }
body.in-flow .book-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
.book-main { padding-top: clamp(1.75rem, 1rem + 3vw, 3rem); padding-bottom: clamp(2rem, 1rem + 4vw, 4rem); }

.book-layout { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 62em) {
  .book-layout { grid-template-columns: minmax(0, 1fr) 21.5rem; gap: var(--s-8); }
}
.book-flow { min-width: 0; }

.book-aside { display: none; }
@media (min-width: 62em) {
  .book-aside { display: block; position: sticky; top: calc(var(--header-h) + var(--s-5)); min-width: 0; }
}

/* --------------------------------------------------------------------------
   RESTORE-A-DRAFT BANNER
   -------------------------------------------------------------------------- */
.restore {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  border: 1.5px solid var(--rule-strong); border-left: 4px solid var(--signal);
  background: var(--bg-raised); border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5);
}
.restore__txt { font-size: var(--t-sm); }
.restore__txt strong { display: block; font-weight: 650; }
.restore__btns { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   STEPPER — honest about how many steps are left.
   -------------------------------------------------------------------------- */
.stepper { margin-bottom: var(--s-5); }
.stepper__list {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2); align-items: stretch;
}
.stepper__item { min-width: 0; }
.stepper__btn {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem;
  width: 100%; min-height: 44px; padding: 0.375rem 0 0; text-align: left;
  color: var(--fg-muted); border-radius: var(--r-xs);
}
.stepper__bar { display: block; height: 4px; border-radius: 2px; background: var(--rule); }
.stepper__num {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase;
}
.stepper__label {
  display: none; font-size: var(--t-xs); font-weight: 600; color: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 34em) { .stepper__label { display: block; } }
/* On a phone five unlabelled numerals said nothing the line underneath did not
   already say in words. Below 34em the current step names itself under its own
   bar, the numerals stand down, and the meta line drops the duplicate. */
@media (max-width: 33.99em) {
  .stepper { margin-bottom: var(--s-4); }
  .stepper__num { display: none; }
  .stepper__item.is-current .stepper__label { display: block; font-weight: 700; }
  .stepper__meta-lab { display: none; }
}
.stepper__item.is-done .stepper__btn { color: var(--fg-muted); }
.stepper__item.is-done .stepper__bar { background: var(--ink-800); }
.stepper__item.is-done .stepper__btn:hover { color: var(--fg); }
.stepper__item.is-current .stepper__btn { color: var(--fg); }
.stepper__item.is-current .stepper__bar { background: var(--signal); }
.stepper__item.is-current .stepper__label { font-weight: 700; }
.stepper__btn[disabled] { cursor: default; }

.stepper__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-3); font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   STEP PANEL
   -------------------------------------------------------------------------- */
.step { animation: step-in var(--base) var(--ease-out); }
@keyframes step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .step { animation: none; } }

.step__head { margin-bottom: var(--s-5); }
.step__head h2 { font-size: var(--t-d2); line-height: 1.02; }
.step__head h2:focus-visible { outline-offset: 4px; }
.step__hint { margin-top: var(--s-3); color: var(--fg-muted); font-size: var(--t-sm); max-width: 56ch; }
.step__block + .step__block { margin-top: var(--s-7); }
.step__legend {
  display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4);
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted);
}
.step__legend::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

/* --------------------------------------------------------------------------
   STEP 1 — the picker: day → length → start time, one part under the next
   -------------------------------------------------------------------------- */
.pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.pick__part { min-width: 0; scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.pick__part:empty { display: none; }

/* A numbered label, not a heading — three of them stacked as <h3>s made the
   step read like three separate pages. */
.pick__k {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted);
  margin-bottom: var(--s-3);
}
.pick__n {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; background: var(--ink-900); color: var(--paper);
  font-size: 0.75rem; line-height: 1;
}
.pick__meta { margin-left: auto; color: var(--fg); text-transform: none; letter-spacing: 0; }
.pick__help { font-size: var(--t-sm); color: var(--fg-muted); margin-top: var(--s-3); }

/* Length chips. One line each: the number and what it costs. */
.tchips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tchip {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 1px; min-height: 58px; min-width: 4.75rem; padding: 0.5rem 0.875rem;
  background: var(--bg-raised); border: 1.5px solid var(--rule-strong); border-radius: var(--r-md);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.tchip:hover { border-color: var(--steel-500); }
/* One selected state everywhere in the funnel: the tile inverts. A wash and a
   coloured border read as "highlighted" rather than "chosen", and telling the
   two apart is exactly the thing that gets harder with age. */
.tchip.is-on {
  background: var(--ink-900); border-color: var(--ink-900); color: var(--paper);
  box-shadow: var(--e-2);
}
.tchip__t { font-weight: 700; font-size: 1.1875rem; line-height: 1.1; color: var(--fg); }
.tchip__p { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); }
.tchip.is-on .tchip__t { color: var(--paper); }
.tchip.is-on .tchip__p { color: var(--steel-300); }

/* Long-stay rentals sit on their own row so nobody reads "$700" as an hourly
   price, but they do not need a heading and three sentences to say so. */
.tchips--plan {
  align-items: center; margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px dashed var(--rule-strong);
}
.tchips__k {
  flex: 1 0 100%; font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted);
}
.tchip--plan { min-width: 8rem; }
.tchip--plan .tchip__t { font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   THE MONTH GRID — a wall calendar, which is the layout everybody already
   knows how to read. Cells are 56px so they clear the 44px floor with room to
   spare: this shop's customers are mostly not twenty-five.
   -------------------------------------------------------------------------- */
.cal {
  border: 1.5px solid var(--rule-strong); border-radius: var(--r-md);
  background: var(--bg-raised); padding: var(--s-3);
}
.cal__head {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center; margin-bottom: var(--s-3);
}
.cal__title {
  text-align: center; font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: var(--tr-display);
  font-size: 1.375rem; color: var(--fg);
}
.cal__nav {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: var(--r-sm); border: 1.5px solid var(--rule-strong);
  background: var(--bg); color: var(--fg);
}
.cal__nav:hover:not([disabled]) { border-color: var(--ink-900); }
.cal__nav[disabled] { opacity: .3; pointer-events: none; }

.cal__dows, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal__dows {
  margin-bottom: 3px;
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); text-align: center;
}

.cal__day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; padding: 0.25rem;
  border: 1.5px solid transparent; border-radius: var(--r-sm);
  background: var(--bg); color: var(--fg);
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}
.cal__n { font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; line-height: 1; }
.cal__mark { display: flex; align-items: center; justify-content: center; min-height: 10px; }
.cal__x { font-size: 0.8125rem; font-weight: 700; line-height: 1; color: var(--stop); }
.cal__pad { min-height: 56px; }

button.cal__day { border-color: var(--rule-strong); }
button.cal__day:hover:not([disabled]) { border-color: var(--ink-900); }
/* A sold-out day stays legible and stays put — it is information, not a gap.
   Dashed and struck through, so it does not rest on colour alone. */
.cal__day.is-full {
  background: var(--bg-sunk); color: var(--fg-muted); border-style: dashed;
}
.cal__day.is-full .cal__n { text-decoration: line-through; text-decoration-thickness: 1.5px; }
/* Days outside the window we sell are not a choice at all, so they carry no
   tile — just the numeral, holding the shape of the month. */
.cal__day--off {
  background: transparent; border-color: transparent; color: var(--fg-muted);
}
.cal__day--off .cal__n { font-weight: 500; opacity: .75; }
.cal__day.is-on {
  background: var(--ink-900); border-color: var(--ink-900); color: var(--paper);
  box-shadow: var(--e-2);
}
.cal__day.is-on .dot--go, .cal__day.is-on .dot--warn { background: var(--signal-lit); }

.cal__legend {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  margin-top: var(--s-3); font-size: var(--t-xs); color: var(--fg-muted);
}
.cal__legend span { display: inline-flex; align-items: center; gap: 0.375rem; }

/* The switch between the two calendars. Full-width and named in plain words —
   an icon-only control here would be a guess. */
.cal__switch {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 48px; margin-top: var(--s-3); padding: 0.625rem 1rem;
  border: 1.5px solid var(--rule-strong); border-radius: var(--r-sm);
  background: var(--bg-raised); color: var(--fg);
  font-size: var(--t-sm); font-weight: 600;
}
.cal__switch:hover { border-color: var(--ink-900); }

/* --------------------------------------------------------------------------
   The day strip and the start-time chips
   -------------------------------------------------------------------------- */
.next-open {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  width: 100%; text-align: left; margin-bottom: var(--s-5);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  border: 1.5px solid var(--rule-strong); background: var(--bg-raised);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.next-open:hover { border-color: var(--ink-900); box-shadow: var(--e-2); }
.next-open__k {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted);
}
.next-open__v { font-weight: 650; font-size: var(--t-sm); }
.next-open__go { margin-left: auto; font-size: var(--t-xs); font-weight: 650; color: var(--fg-muted); text-decoration: underline; }

.daystrip-wrap { position: relative; }
/* Desktop gets a real gutter for the arrows. They used to sit on top of the
   first and last day chip, clipping the border and half the label. */
@media (min-width: 62em) { .daystrip-wrap { padding-inline: 2.75rem; } }
/* Right-edge fade: the only honest way to say "this scrolls" on a phone. */
.daystrip-wrap::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: var(--s-4); width: 2.5rem;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--bg) 88%);
}
@media (min-width: 62em) { .daystrip-wrap::after { display: none; } }
.daystrip {
  display: flex; gap: var(--s-2); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  padding: 0.375rem 0 var(--s-4); margin-inline: calc(var(--s-1) * -1); padding-inline: var(--s-1);
  scrollbar-width: thin;
}
.daystrip::-webkit-scrollbar { height: 6px; }
.daystrip::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 3px; }
.daystrip::-webkit-scrollbar-track { background: transparent; }

.day {
  flex: none; width: 4.75rem; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 0.125rem;
  padding: 0.625rem 0.25rem 0.5rem;
  border: 1.5px solid var(--rule-strong); border-radius: var(--r-md);
  background: var(--bg-raised); color: var(--fg);
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease),
              color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.day:hover:not([disabled]) { border-color: var(--ink-900); transform: translateY(-1px); }
.day__dow {
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted);
}
.day__num { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.05; }
.day__mon { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }
.day__state {
  display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.1875rem;
  font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-muted);
}
.day__state .dot { width: 6px; height: 6px; }
.day--open .day__state { color: var(--go-text); }
.day--limited .day__state { color: var(--warn-text); }
.day--full { background: var(--bg-sunk); border-style: dashed; color: var(--fg-muted); }
.day--full .day__num, .day--full .day__dow { color: var(--fg-muted); }
.day--full .day__state { color: var(--stop); }
.day.is-on {
  background: var(--ink-900); border-color: var(--ink-900); color: var(--paper);
  box-shadow: var(--e-2);
}
.day.is-on .day__dow, .day.is-on .day__mon { color: var(--signal-lit); }
.day.is-on .day__state { color: var(--steel-300); }
.day.is-on .day__state .dot--go { background: var(--signal-lit); }

.daystrip-arrow {
  display: none; position: absolute; top: 1.25rem; z-index: 2;
  width: 44px; height: 44px; place-items: center; border-radius: 50%;
  background: var(--bg-raised); border: 1.5px solid var(--rule-strong); color: var(--fg);
  box-shadow: var(--e-2);
}
@media (min-width: 62em) { .daystrip-arrow { display: grid; } }
.daystrip-arrow:hover { border-color: var(--ink-900); }
.daystrip-arrow--prev { left: 0; }
.daystrip-arrow--next { right: 0; }
.daystrip-arrow[disabled] { opacity: .28; pointer-events: none; cursor: default; box-shadow: none; }

/* Long-stay rentals have no start times to show, so the third part shows the handover
   instead: what you drop off, when you collect, and what the bay is doing in
   between. */
.plan-window {
  border: 1.5px solid var(--rule-strong); border-radius: var(--r-md);
  background: var(--bg-raised); overflow: hidden;
}
.plan-window__row {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--s-3);
  padding: var(--s-4);
}
.plan-window__row + .plan-window__row { border-top: 1px solid var(--rule); }
@media (max-width: 30em) {
  .plan-window__row { grid-template-columns: 1fr; gap: 0.25rem; }
}
.plan-window__k {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted);
  padding-top: 0.15rem;
}
.plan-window__v { font-weight: 600; color: var(--fg); }
.plan-window__v em { display: block; font-style: normal; font-weight: 400; font-size: var(--t-xs); color: var(--fg-muted); margin-top: 0.2rem; }

.slot-group + .slot-group { margin-top: var(--s-5); }
.slot-group__t {
  display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted);
}
.slot-group__t::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

/* Only bookable times are rendered, and with one flat rate the price is the
   same on every chip — so the chip carries the time and nothing else, except
   the scarcity mark when a slot is down to the last bay. */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr)); gap: var(--s-2); }
.slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 54px; padding: 0.5rem;
  border: 1.5px solid var(--rule-strong); border-radius: var(--r-sm);
  background: var(--bg-raised); color: var(--fg);
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease),
              color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.slot:hover { border-color: var(--ink-900); box-shadow: var(--e-1); }
.slot__t { font-family: var(--font-mono); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.slot__bays {
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--warn-text);
}
.slot.is-on {
  background: var(--ink-900); border-color: var(--ink-900); color: var(--paper);
  box-shadow: var(--e-2);
}
.slot.is-on .slot__bays { color: var(--signal); }

.slot-empty {
  display: grid; gap: var(--s-3); justify-items: start;
  padding: var(--s-5); border: 1.5px dashed var(--rule-strong); border-radius: var(--r-md);
  background: var(--bg-sunk);
}
.slot-empty p { font-size: var(--t-sm); color: var(--fg-muted); max-width: 46ch; }
.slot-empty strong { color: var(--fg); }

/* --------------------------------------------------------------------------
   STEP 2 — VEHICLE
   -------------------------------------------------------------------------- */
/* THE RULE THAT LOSES BOOKINGS IF IT IS BROKEN.
   components.css hides an empty .field__error, so clearing three of them on
   focusout collapsed ~130px out from under a thumb that was already travelling
   towards a radio button: the tap landed on nothing and the answer was lost.
   In the funnel the error row is always reserved — it fills and empties, it
   never appears and disappears. Scoped here because components.css is shared. */
.book-flow .field__error {
  display: block; min-height: 1.15rem; line-height: 1.15rem; margin-top: 0.375rem;
}

.vgrid { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vgrid .field--model { grid-column: span 2; }
@media (min-width: 40em) {
  .vgrid { grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 1fr); }
  .vgrid .field--model { grid-column: auto; }
}
.vgrid .field + .field, .field-row .field + .field { margin-top: 0; }
.choice.is-invalid { border-color: var(--stop); background: color-mix(in srgb, var(--stop-wash) 55%, var(--bg-raised)); }

.qlist { border-top: 1px solid var(--rule); }
/* The left rule is always there, transparent until the question is the one
   holding the customer up. Costs no layout, so nothing moves when it lights. */
.q {
  padding-block: var(--s-5) var(--s-3); padding-left: var(--s-3);
  border-left: 2px solid transparent; border-bottom: 1px solid var(--rule);
}
.q--error { border-left-color: var(--stop); }
.q--error .q__label { color: var(--stop); }
.q__row { display: grid; gap: var(--s-4); align-items: start; }
@media (min-width: 46em) { .q__row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); } }
.q__label { font-weight: 650; font-size: 1.0625rem; line-height: 1.35; }
.q__help { margin-top: 0.4375rem; font-size: var(--t-xs); line-height: 1.55; color: var(--fg-muted); max-width: 58ch; }

/* Yes / No / Not sure. The help text promises a third answer, so the control
   has to offer it — and "not sure" is the answer that gets the car looked at. */
.q .segmented { align-self: start; }
.q .segmented--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.q .segmented label { min-width: 0; padding-inline: var(--s-2); padding-block: 0.8125rem; white-space: nowrap; }
@media (min-width: 46em) {
  .q .segmented--3 { width: auto; grid-template-columns: repeat(3, minmax(5rem, auto)); }
}

/* The error row under each question is permanently reserved: an answer must
   never be destroyed by a message collapsing out from under the thumb. */
.q__err, #err-brief {
  display: block; min-height: 1.05rem; margin-top: 0.375rem;
  font-size: var(--t-xs); font-weight: 600; line-height: 1.05rem; color: var(--stop);
}

/* Flagged answer → a calm, non-blocking heads-up built on .callout--info. */
.q__note { margin-top: var(--s-4); font-size: var(--t-xs); line-height: 1.55; align-items: start; }
.q__note svg { width: 18px; height: 18px; margin-top: 1px; color: var(--info); }
.q__note code {
  display: inline-block; margin-top: 0.375rem; font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.02em; color: inherit;
  background: color-mix(in srgb, var(--info) 14%, transparent);
  padding: 0.1875rem 0.4375rem; border-radius: var(--r-xs);
}

.flag-tally { margin-top: var(--s-5); }

/* --------------------------------------------------------------------------
   STEP 4 — ADD-ONS
   -------------------------------------------------------------------------- */
.addon-grid { display: grid; gap: var(--s-3); }
@media (min-width: 46em) { .addon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.addon { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4); }
.addon__body { min-width: 0; flex: 1; display: block; }
.addon__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.addon__name { font-weight: 650; font-size: var(--t-sm); }
.addon__price { font-family: var(--font-mono); font-weight: 600; font-size: var(--t-sm); white-space: nowrap; }
.addon__desc { display: block; margin-top: 0.3125rem; font-size: var(--t-xs); line-height: 1.5; color: var(--fg-muted); }
.addon__unit {
  display: inline-block; margin-top: 0.5rem;
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-muted);
}
/* Multi-select must not be drawn as radio circles. A circle says "pick one",
   and this is the step where a second pick is the margin. Scoped here because
   the round mark is right for the screening radios and the agree box. */
.addon .choice__check { border-radius: var(--r-xs); }

.addon__rec {
  display: inline-block; margin-left: 0.5rem;
  padding: 0.125rem 0.375rem; border-radius: var(--r-xs);
  background: var(--ink-800); color: var(--paper);
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.07em;
  text-transform: uppercase; font-weight: 600; vertical-align: 2px;
}
.addon-total {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1.5px solid var(--rule-strong);
  font-family: var(--font-mono); font-size: var(--t-sm);
}
.addon-total b { font-size: 1.125rem; }

/* --------------------------------------------------------------------------
   STEP 5 — CHECKOUT
   -------------------------------------------------------------------------- */
.co-block {
  border: 1.5px solid var(--rule); border-radius: var(--r-md);
  background: var(--bg-raised); padding: var(--s-5);
}
.co-block + .co-block { margin-top: var(--s-4); }
.co-block__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-4); }
.co-block__head svg { width: 20px; height: 20px; flex: none; color: var(--fg-muted); }
.co-block__head h3 { font-size: 1.1875rem; }
.co-block__head .badge { margin-left: auto; }

/* --------------------------------------------------------------------------
   SAFETY BRIEFING — doctrine 6 is "safety video + e-signature", and the
   signature was being collected without the briefing ever being shown. The
   film is not shot yet, so this is the honest stand-in: the same slot, the
   same path, and the written briefing gated behind one deliberate tap.
   -------------------------------------------------------------------------- */
.brief {
  margin-top: var(--s-4); padding: var(--s-4);
  border: 1.5px solid var(--rule-strong); border-left: 4px solid var(--signal);
  border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--bg-sunk);
}
.brief.q--error { border-color: var(--stop); border-left-color: var(--stop); }
.brief__plate { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.brief__frame {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: var(--r-sm);
  background: var(--ink-900); color: var(--signal); border: 1.5px solid var(--ink-900);
}
.brief__frame svg { width: 24px; height: 24px; }
.brief__t { font-weight: 700; font-size: var(--t-sm); line-height: 1.35; }
.brief__note { margin-top: 0.375rem; font-size: var(--t-xs); line-height: 1.55; color: var(--fg-muted); max-width: 56ch; }
.brief__note b { color: var(--fg); }
.brief__note code { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg); }
.brief__lede .btn { margin-top: var(--s-3); }
.brief__body { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.brief__body .safety-list { margin-bottom: 0; }

.safety-list { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.safety-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); font-size: var(--t-sm); line-height: 1.5; }
.safety-list svg { width: 17px; height: 17px; margin-top: 4px; color: var(--signal-deep); }

.tick-list { display: grid; gap: var(--s-2); }
.tick-list li { position: relative; padding-left: 1.375rem; font-size: var(--t-sm); line-height: 1.5; }
.tick-list li::before {
  content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px;
  background: var(--signal); border-radius: 1px;
}

.waiver-fine {
  margin-top: var(--s-3); padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--rule-strong); border-radius: var(--r-sm);
  background: var(--bg-sunk); font-size: var(--t-xs); line-height: 1.55; color: var(--fg-muted);
}
.waiver-fine b { color: var(--fg); }

.agree { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4); margin-top: var(--s-4); }
.agree__txt { font-size: var(--t-sm); line-height: 1.5; }
.helper-row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; margin-top: var(--s-4); }
.helper-row .fine { max-width: 40ch; }

/* "We won't charge this card now" is the sentence that decides whether a
   stranger hands over a $30k car. It was the lowest-contrast element on the
   checkout screen — grey on grey at 3.77:1 — while the yellow went to a
   button. It now carries full-strength text and the signal rule. */
.card-note {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3);
  margin-top: var(--s-4); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-4);
  border: 1px solid var(--rule); border-left: 4px solid var(--signal);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--bg-sunk);
  font-size: var(--t-sm); line-height: 1.55; color: var(--fg);
}
.card-note svg { width: 18px; height: 18px; color: var(--signal-deep); margin-top: 2px; }
.card-note strong { display: block; color: var(--fg); font-size: var(--t-body); font-weight: 700; margin-bottom: 3px; }

/* Same job, same weight: the vault badge beside the card fields. */
.badge--vault { background: var(--signal-wash); color: var(--ink-900); border-color: var(--signal-deep); }
.badge--vault svg { color: var(--ink-900); }

.cancelbox {
  margin-top: var(--s-5);
  border: 1.5px solid var(--ink-900); border-radius: var(--r-md);
  background: var(--bg-raised); overflow: hidden;
}
.cancelbox__t {
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--ink-900); color: var(--paper);
  padding: 0.5625rem var(--s-5);
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase;
}
.cancelbox__t svg { width: 15px; height: 15px; color: var(--signal); }
.cancelbox__body { padding: var(--s-4) var(--s-5); }
.cancelbox ul { display: grid; gap: var(--s-2); }
.cancelbox li { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s-3); font-size: var(--t-sm); line-height: 1.45; }
.cancelbox li b {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--fg-muted); padding-top: 2px;
}
.cancelbox__sum { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--rule); }

/* --------------------------------------------------------------------------
   ACTION BAR — one primary action, always in reach on a phone.
   -------------------------------------------------------------------------- */
.book-actions {
  display: flex; gap: var(--s-3); margin-top: var(--s-6);
  padding-top: var(--s-5); border-top: 1.5px solid var(--rule-strong);
}
.book-actions .book-next { flex: 1; }
.book-actions .book-back { flex: none; padding-inline: var(--s-5); }
@media (min-width: 62em) {
  .book-actions { margin-top: var(--s-7); justify-content: flex-end; }
  .book-actions .book-next { flex: none; }
}

/* --------------------------------------------------------------------------
   MOBILE BOOKING BAR — sticks under the site header: progress, running total,
   and the whole summary one tap away. Desktop uses the sidebar instead.
   -------------------------------------------------------------------------- */
.bookbar {
  position: sticky; top: var(--header-h); z-index: var(--z-sticky);
  margin: 0 calc(var(--gutter) * -1) var(--s-5);
  padding: 0 var(--gutter) var(--s-3);
  background: var(--bg); border-bottom: 1px solid var(--rule);
}
@media (min-width: 62em) { .bookbar { display: none; } }

.minisum {
  margin-top: var(--s-3); padding: var(--s-4);
  border: 1.5px solid var(--rule-strong); border-radius: var(--r-md);
  background: var(--bg-raised); box-shadow: var(--e-3);
  max-height: 58vh; overflow-y: auto;
}
.minisum__toggle {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; min-height: 48px; padding: 0.375rem 0.75rem; text-align: left;
  border: 1.5px solid var(--rule-strong); border-radius: var(--r-sm);
  background: var(--bg-raised);
}
.minisum__meta { min-width: 0; flex: 1; }
.minisum__label {
  display: block; font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted);
}
.minisum__line {
  display: block; font-size: var(--t-xs); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.minisum__total { font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; line-height: 1; }
.minisum__chev { display: block; flex: none; color: var(--fg-muted); transition: transform var(--base) var(--ease); }
.minisum__toggle[aria-expanded='true'] .minisum__chev { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   SUMMARY (shared markup — desktop aside + mobile sheet)
   -------------------------------------------------------------------------- */
.summary {
  border: 1.5px solid var(--rule-strong); border-radius: var(--r-md);
  background: var(--bg-raised); overflow: hidden;
}
.minisum .summary { border: 0; border-radius: 0; background: transparent; }
.summary__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 0.625rem var(--s-4); background: var(--ink-900); color: var(--paper);
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase;
}
/* The toggle above it already says "Your booking" — no need to say it twice. */
.minisum .summary__head { display: none; }
.minisum .summary__body { padding: 0; }
.summary__body { padding: var(--s-4); }
.summary__row {
  display: grid; grid-template-columns: 4.75rem 1fr; gap: var(--s-3);
  padding-block: 0.5rem; font-size: var(--t-sm); line-height: 1.4;
}
.summary__row + .summary__row { border-top: 1px solid var(--rule); }
.summary__k {
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted); padding-top: 3px;
}
.summary__v { font-weight: 600; min-width: 0; }
.summary__v em { display: block; font-style: normal; font-weight: 400; font-size: var(--t-xs); color: var(--fg-muted); margin-top: 2px; }
.summary__v.is-empty { font-weight: 400; color: var(--fg-muted); }

.summary__lines { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1.5px solid var(--rule-strong); }
.summary__line {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  font-size: var(--t-xs); padding-block: 0.25rem; color: var(--fg-muted);
}
.summary__line b { font-family: var(--font-mono); font-weight: 600; color: var(--fg); white-space: nowrap; }
.summary__line--save { color: var(--go); }
.summary__line--save b { color: var(--go); }

.summary__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1.5px solid var(--rule-strong);
}
.summary__total span {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted);
}
.summary__total b { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: var(--tr-display); }
.summary__foot {
  margin-top: var(--s-4); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  border-left: 4px solid var(--signal); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--bg-sunk); font-size: var(--t-xs); line-height: 1.5; color: var(--fg);
}
.summary__foot strong { color: var(--fg); font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.book-faq { background: var(--bg-sunk); border-top: 1px solid var(--rule); }
.book-faq__grid { display: grid; gap: var(--s-5); }
@media (min-width: 62em) {
  .book-faq__grid { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--s-9); align-items: start; }
  .book-faq .section-head { margin-bottom: 0; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
.book-faq .accordion { border-top-color: var(--rule-strong); }
.book-faq .accordion__a a { text-decoration: underline; }

/* --------------------------------------------------------------------------
   SLOT OVERFLOW
   A busy Saturday generates ~19 start times. All of them at once reads as a
   wall on a phone, so each part of the day shows six and reveals the rest.
   Desktop has the width, so it shows everything and hides the control.
   -------------------------------------------------------------------------- */
.slot--extra { display: none; }
.slot-group.is-expanded .slot--extra { display: flex; }

.slot-more {
  display: block; width: 100%; margin-top: var(--s-3);
  padding: 0.6875rem 1rem; min-height: 44px;
  background: var(--bg-raised); color: var(--fg);
  border: 1.5px dashed var(--rule-strong); border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 650;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.slot-more:hover { border-color: var(--fg); background: var(--bg-sunk); }

@media (min-width: 62em) {
  .slot--extra { display: flex; }
  .slot-more { display: none; }
}

/* --------------------------------------------------------------------------
   HOSTED BOOKING EMBED
   Used only when BOOKING.acuity.embedUrl is filled in. The frame is someone
   else's page: we own the width, the surround and the fallback, and nothing
   inside it.
   -------------------------------------------------------------------------- */
.book-embed { display: grid; gap: var(--s-4); }
.book-embed__frame {
  width: 100%;
  border: 0;
  display: block;
  background: var(--bg-raised);
  border-radius: var(--r-md);
}
/* Their resize script did not load. The frame keeps its own scrollbar, which is
   worse than a full-height form but is never a blank box. */
.book-embed__frame.is-unresized { height: 80vh; }
.book-embed__fine {
  font-size: var(--t-xs); line-height: 1.55; color: var(--fg-muted); max-width: 60ch;
}
.book-embed__fine a { color: var(--fg); text-decoration: underline; }
.book-embed__fallback { font-size: var(--t-body); font-weight: 650; }