/* ==========================================================================================================
   /book (booking flow), /booking/:token (status) and /booking/demo-pay (demo checkout).
   Tokens and primitives come from /css/site.css ("The Cyc"); calendar + timeline from pages/availability.css.

   Layout: phones — step chips sticky under the header, steps (1 = the Kit Builder, 2 = hours, 3 = lights with the Stage
                    as the live mirror of the whole kit, 4 = details + discount code), summary, sticky total bar.
           desktop — left column: chips pinned under the header while the steps scroll (the builder's bay stays pinned
                     beside its controls); right column: the summary card, pinned.
   ========================================================================================================== */

:root { --chips-h: 60px; }
/* Keep anything scrolled into view (anchors like #when, keyboard focus) clear of the header and the pinned step chips. */
html:has(.page-book) { scroll-padding-top: calc(var(--header-h) + var(--chips-h) + 12px); }

.book { display: grid; gap: 28px; padding-block: 12px 56px; }
.book__main { min-width: 0; }
.book__head { display: grid; gap: 10px; padding: 8px 0 18px; }
.book__title { font: 760 clamp(2.3rem, 9vw, 3.6rem)/.98 var(--font-display); font-stretch: var(--stretch); letter-spacing: -.025em; }
.book__lede { color: var(--bone-2); max-width: 54ch; text-wrap: pretty; }
.book__noscript { margin: 16px 0; }

/* Progress ---------------------------------------------------------------------------------------------------- */
.book__deck { display: contents; }
/* Softboxes reach into the top of the frame here: keep the HUD to REC + kit name. */
.lights__stage .hud-spec, .bk .hud-spec { display: none !important; }

.book__progress {
  position: sticky; top: var(--header-h); z-index: 30; margin-inline: calc(-1 * var(--gutter)); padding: 8px var(--gutter);
  background: rgba(31, 30, 27, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.book__progress ol { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.book__progress a {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 4px; border-radius: var(--r-1);
  font: 500 .75rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--bone-2); text-decoration: none;
  transition: color .2s, background-color .2s;
}
.book__progress a:hover { color: var(--bone); background: rgba(239, 234, 225, .04); }
.book__progress-n {
  width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2);
  font-size: .6875rem; color: var(--bone-2);
}
.book__progress-done { display: none; width: 20px; height: 20px; flex: none; border-radius: 50%; place-items: center; background: rgba(231, 180, 95, .16); color: var(--amber); }
.book__progress a.is-done .book__progress-n { display: none; }
.book__progress a.is-done .book__progress-done { display: grid; }
.book__progress a[aria-current="step"] { color: var(--bone); }
.book__progress a[aria-current="step"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--amber); }
@media (max-width: 419px) {
  .book__progress a { flex-direction: column; gap: 4px; font-size: .625rem; letter-spacing: .02em; padding-top: 2px; }
  .book__progress a[aria-current="step"]::after { bottom: 1px; }
}

/* Steps ------------------------------------------------------------------------------------------------------ */
.book__form { display: grid; }
.bstep { padding-block: 36px 34px; border-top: 1px solid var(--line); container-type: inline-size; }
.book__form > .bstep:first-child { border-top: 0; padding-top: 28px; }
.bstep__head { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 14px; align-items: start; margin-bottom: 20px; }
.bstep__num {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px;
  border: 1px solid rgba(231, 180, 95, .5); color: var(--amber); font: 500 .75rem/1 var(--font-mono);
}
.bstep__titles { display: grid; gap: 6px; min-width: 0; }
.bstep__title { font: 760 clamp(1.45rem, 3.2vw, 1.95rem)/1.05 var(--font-display); font-stretch: var(--stretch); letter-spacing: -.02em; outline: none; justify-self: start; }
.bstep__sub { color: var(--bone-2); font-size: .9688rem; max-width: 60ch; text-wrap: pretty; }
.bstep__status { grid-column: 2; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--amber); margin-top: 4px; }
@container (min-width: 620px) {
  .bstep__head { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .bstep__status { grid-column: 3; grid-row: 1; margin-top: 10px; text-align: right; max-width: 26ch; }
}
.bstep__label { display: block; font: 500 .75rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--bone-2); margin-bottom: 10px; padding: 0; }
.bstep__note { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: .9375rem; color: var(--bone-2); }
.bstep__note .link, .bstep__note button.link, .when__notes button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--amber); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; min-height: 0; }
.bstep__note--warn { padding: 12px 14px; border-radius: var(--r-1); border: 1px solid rgba(233, 162, 59, .38); background: rgba(233, 162, 59, .07); color: var(--bone); }
.bstep__note--warn .icon { color: var(--low); flex: none; margin-top: 2px; }
.bstep__fine { margin-top: 18px; font-size: .8438rem; color: var(--bone-2); max-width: 72ch; }

.bstep__title:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 4px; }
.bstep__notes { display: grid; gap: 10px; }
/* The "Next" button that ends a step (Hours → Lights → Details): full width on phones, right-aligned when there's room. */
.bstep__next { display: grid; margin-top: 26px; }
@container (min-width: 620px) { .bstep__next { justify-items: end; } .bstep__next .btn { min-width: 280px; } }
.bstep__opt { color: var(--bone); font-weight: 600; }
.bstep__notes .bstep__note { margin-top: 14px; }
.bstep__notes .bstep__note + .bstep__note { margin-top: 0; }
.stepper__value { display: inline-block; }

/* 1 · Build your kit — the Kit Builder (public/css/kit-builder.css), adapted to the booking column ------------------ */
.bstep--kit .bstep__head { margin-bottom: 18px; }
/* One column until the step is wide enough for bay + controls side by side (the summary takes the page's right column). */
.book .kb { grid-template-columns: minmax(0, 1fr); }
.book .kb-main { position: static; }
/* The bay scrolls into view under the header and the pinned step chips. */
.book .kb-bay { scroll-margin-top: calc(var(--header-h) + var(--chips-h) + 10px); }
/* The page's own total bar is the sticky summary here, so the builder's "Next: lights" button shows at every width. */
.book .kb-bar { display: none; }
.book .kb-actions .kb-cta { display: inline-flex; }
.book .kb-actions { justify-items: stretch; }
/* Server render (no stepper without JS) and the live builder take the same height: no shift above #when. */
.book .kb-count__row { min-height: 48px; }
@container (min-width: 740px) {
  .book .kb { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 26px; padding: 12px 22px 12px 12px; align-items: start; }
  .book .kb-main { position: sticky; top: calc(var(--header-h) + var(--chips-h) + 12px); align-self: start; }
}
@media (min-width: 1024px) {
  @container (min-width: 740px) {
    .book .kb-bay { height: clamp(380px, calc(100vh - var(--header-h) - var(--chips-h) - 250px), 620px); }
  }
}

/* 3 · Lights (optional) — the Stage (every rig of the kit + the softboxes) is the live mirror here */
.lights { display: grid; gap: 18px; }
.lights__stage { min-width: 0; }
.lights__stage .stage {
  --stage-ar: 16 / 10; --maxh: .8; --fit: .9; --headroom: .84;
  border-radius: var(--r-2); box-shadow: 0 0 0 1px var(--line);
}
.lights__body { display: grid; gap: 14px; min-width: 0; align-content: start; }
.lights__opts { border: 0; margin: 0; padding: 0; min-width: 0; }
.lights__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.light-opt { position: relative; min-width: 0; }
.light-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.light-opt label {
  display: grid; gap: 4px; justify-items: center; align-content: center; min-height: 64px; padding: 8px 4px; border-radius: var(--r-1);
  border: 1px solid var(--line-2); background: var(--graphite-2); cursor: pointer; transition: border-color .18s, background-color .18s;
}
.light-opt__n { font: 760 1.4rem/1 var(--font-display); font-stretch: var(--stretch); }
.light-opt__price { font-size: .6875rem; color: var(--bone-2); white-space: nowrap; }
.light-opt input:hover + label { border-color: rgba(239, 234, 225, .34); }
.light-opt input:focus-visible + label { outline: 2px solid var(--amber); outline-offset: 2px; }
.light-opt input:checked + label { border-color: var(--amber); background: linear-gradient(180deg, rgba(231, 180, 95, .16), rgba(231, 180, 95, .05)); box-shadow: inset 0 0 0 1px var(--amber); }
.light-opt input:checked + label .light-opt__n { color: var(--amber); }
.light-opt input:disabled + label { opacity: .4; border-style: dashed; cursor: not-allowed; }
.lights__about { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; }
.lights__about > div { display: grid; gap: 6px; min-width: 0; }
.lights__img {
  display: grid; place-items: end center; height: 104px; border-radius: var(--r-1); overflow: hidden; padding-bottom: 6px;
  background: radial-gradient(80% 60% at 50% 25%, rgba(255, 240, 214, .14), transparent 70%), var(--graphite-2);
}
.lights__img img { height: 92px; width: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }
.lights__desc { font-size: .9063rem; color: var(--bone-2); max-width: 60ch; }
.lights__left { font-size: .75rem; color: var(--bone-2); text-transform: uppercase; letter-spacing: .04em; }
@container (min-width: 700px) {
  .lights { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px; align-items: center; }
  .lights__stage .stage { --stage-ar: 4 / 3; }
}

/* 2 · Hours */
.durs { border: 0; margin: 0; padding: 0; min-width: 0; }
.durs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@container (min-width: 620px) { .durs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dur-opt { position: relative; min-width: 0; }
.dur-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dur-opt label {
  display: grid; gap: 3px; min-height: 84px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--graphite-2); cursor: pointer;
  transition: border-color .18s, background-color .18s;
}
.dur-opt__name { font-weight: 600; font-size: .9688rem; }
.dur-opt__len { font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bone-2); }
.dur-opt__price { margin-top: 6px; font: 760 1.25rem/1 var(--font-display); font-stretch: var(--stretch); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.dur-opt input:hover + label { border-color: rgba(239, 234, 225, .34); background: #2e2c27; }
.dur-opt input:focus-visible + label { outline: 2px solid var(--amber); outline-offset: 2px; }
.dur-opt input:checked + label { border-color: var(--amber); background: linear-gradient(180deg, rgba(231, 180, 95, .16), rgba(231, 180, 95, .05)), var(--graphite-2); box-shadow: inset 0 0 0 1px var(--amber); }
.dur-opt input:checked + label .dur-opt__price { color: var(--amber); }

/* Multi-day: how it works (exact pickup + return, billed per started 24 hours) */
.multi { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--graphite-2); border: 1px solid var(--line); font-size: .9063rem; color: var(--bone-2); text-wrap: pretty; }
.multi .icon { color: var(--amber); margin-top: 2px; }
.dur-opt__price { white-space: nowrap; }

.opening { margin-top: 16px; }
.opening__btn {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px;
  border-radius: 12px; border: 1px solid rgba(134, 201, 138, .38); background: rgba(134, 201, 138, .07); color: var(--bone);
  font: 600 .9375rem/1.3 var(--font-body); text-align: left; transition: background-color .18s, border-color .18s;
}
.opening__btn:hover { background: rgba(134, 201, 138, .12); border-color: rgba(134, 201, 138, .6); }
.opening__btn .icon { color: var(--go); transition: transform .2s var(--ease); }
.opening__btn:hover .icon { transform: translateX(3px); }
.opening__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--go); box-shadow: 0 0 0 3px rgba(134, 201, 138, .18), 0 0 10px rgba(134, 201, 138, .6); }

.when { display: grid; gap: 28px; margin-top: 24px; }
@container (min-width: 720px) { .when { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 28px; align-items: start; } }
.when__cal-box { padding: 12px; border-radius: var(--r-2); border: 1px solid var(--line); background: var(--graphite-0); }
.when__day { min-width: 0; }
.when__day-box { min-height: 220px; }
.when__empty { display: grid; place-items: center; min-height: 220px; padding: 24px; border-radius: var(--r-2); border: 1px dashed var(--line-2); color: var(--bone-2); text-align: center; font-size: .9375rem; }
.when__return { display: grid; gap: 12px; margin-top: 16px; padding: 14px; border-radius: var(--r-2); border: 1px solid rgba(231, 180, 95, .32); background: rgba(231, 180, 95, .04); }
.when__ret { display: grid; gap: 6px; min-width: 0; }
.when__ret .field__label { margin: 0; }
.when__ret .select { width: 100%; min-height: 48px; }
.when__ret .select:disabled { opacity: .55; cursor: not-allowed; }
/* Same-Day: one return time, no frame needed. */
.when__return:not(:has([data-ret-date-wrap]:not([hidden]))) { padding: 0; border: 0; background: none; max-width: 320px; }
@container (min-width: 560px) { .when__return:has([data-ret-date-wrap]:not([hidden])) { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.when__result {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; margin-top: 20px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(231, 180, 95, .4); background: linear-gradient(180deg, rgba(231, 180, 95, .08), rgba(231, 180, 95, .02));
}
.when__result-row { display: grid; gap: 4px; min-width: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.when__result-k { font-size: .6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--bone-2); }
/* "Fri, Nov 20 · 10:00 AM": never "10:00 / AM"; the narrow two-column card stacks the date over the time. */
.when__d, .when__t { white-space: nowrap; }
@container (max-width: 619.98px) { .when__dt .when__d, .when__dt .when__t { display: block; } .when__dt .when__sep { display: none; } }
.when__result-tc { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; letter-spacing: .06em; color: var(--bone-2); }
.when__result-tc .hud-rec__dot { width: 7px; height: 7px; }
.when__result-bill { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid rgba(231, 180, 95, .22); font-weight: 600; color: var(--amber); font-variant-numeric: tabular-nums; }
@container (min-width: 620px) { .when__result { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; } .when__result-tc { grid-column: auto; } }
.when__notes { display: grid; gap: 8px; margin-top: 14px; }
/* Calendar: a Multi-day rental's days after the pickup, through the return date */
.cal__day.is-range { background: rgba(231, 180, 95, .14); border-color: rgba(231, 180, 95, .38); }
.cal__day.is-range-end { box-shadow: inset 0 0 0 2px var(--amber); }
.when__notes:empty { display: none; }
.when__checking { display: inline-flex; align-items: center; gap: 10px; font-size: .75rem; color: var(--bone-2); text-transform: uppercase; letter-spacing: .05em; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(239, 234, 225, .18); border-top-color: var(--amber); }
@media (prefers-reduced-motion: no-preference) { .spinner { animation: spin .8s linear infinite; } }
@keyframes spin { to { rotate: 360deg; } }

/* 5 · Details */
.fields { display: grid; gap: 18px; }
@container (min-width: 560px) { .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; } .field--wide { grid-column: 1 / -1; } }
.field__error .icon { flex: none; }
/* Discount code */
.promo { position: relative; display: grid; gap: 8px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); max-width: 520px; }
.promo .field__label { margin: 0; }
.promo__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.promo__input { text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-mono); }
.promo__input::placeholder { text-transform: none; letter-spacing: 0; }
.promo__apply { min-height: 48px; padding-inline: 20px; }
.promo__apply[aria-busy="true"] { opacity: .75; pointer-events: none; }
.promo__applied {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; min-height: 48px; padding: 6px 8px 6px 14px;
  border-radius: var(--r-1); border: 1px solid rgba(134, 201, 138, .45); background: rgba(134, 201, 138, .08);
}
.promo__ok { color: var(--go); }
.promo__what { display: grid; gap: 2px; min-width: 0; }
.promo__code { font: 600 .875rem/1.3 var(--font-mono); letter-spacing: .06em; overflow-wrap: anywhere; }
.promo__benefit { font-size: .875rem; color: var(--bone-2); }
.promo__remove { background: none; border: 0; padding: 0 8px; min-height: 44px; min-width: 44px; font: inherit; font-weight: 500; color: var(--amber); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.promo__msg { font-size: .875rem; color: var(--bone-2); }
/* A success line repeats the applied chip above it: screen readers hear it (live region), eyes see the chip. */
.promo__msg.is-ok { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.promo__msg.is-error { color: var(--error); }
.agree { margin-top: 18px; display: grid; gap: 6px; }
.agree .check { font-size: .9375rem; color: var(--bone-2); }
.agree .check input[aria-invalid="true"] { border-color: var(--error); }

/* Summary ---------------------------------------------------------------------------------------------------- */
.book__aside { min-width: 0; display: grid; gap: 14px; align-content: start; }
.summary {
  position: relative; display: grid; gap: 14px; padding: 20px; border-radius: 20px; background: var(--graphite-2); border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.summary__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.summary__rec { display: inline-flex; align-items: center; gap: .6em; padding: 5px 9px; border-radius: 6px; background: var(--graphite-0); border: 1px solid var(--line); font-size: .6875rem; letter-spacing: .06em; color: var(--bone-2); white-space: nowrap; }
.summary__rec .hud-tc { color: var(--bone); margin: 0; }
.summary__rec .hud-rec__dot { width: 7px; height: 7px; }
.summary__title { font: 760 1.5rem/1.05 var(--font-display); font-stretch: var(--stretch); letter-spacing: -.02em; }
.summary__facts { margin: 0; display: grid; gap: 8px; }
.summary__facts > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.summary__facts dt { font: 500 .6875rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--bone-2); }
.summary__facts dd { margin: 0; font-size: .9375rem; line-height: 1.4; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.summary__lines { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.sline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; font-size: .875rem; color: var(--bone-2); }
.sline__label { display: grid; gap: 4px; }
.sline__amount { color: var(--bone); font-weight: 600; font-variant-numeric: tabular-nums; }
.sline--advance .sline__amount, .sline--promo .sline__amount { color: var(--go); }
.sline__note { font-size: .75rem; color: var(--bone-2); line-height: 1.35; }
.sline__std { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--bone-2); }
.sline__std s { text-decoration-thickness: 1.5px; text-decoration-color: rgba(239, 234, 225, .7); font-variant-numeric: tabular-nums; }
.sline__std .info-link { margin: -14px -12px -14px -8px; }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.summary__total-label { font: 500 .75rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--bone-2); }
.summary__total-amount { font: 760 2.4rem/1 var(--font-display); font-stretch: var(--stretch); letter-spacing: -.03em; color: var(--amber); font-variant-numeric: tabular-nums; }
.summary__tax { font: 500 .875rem/1 var(--font-body); color: var(--bone-2); letter-spacing: 0; }
.summary__hint, .summary__min { font-size: .8438rem; color: var(--bone-2); margin-top: -8px; }
.summary__deposit {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(239, 234, 225, .025); font-size: .8438rem; color: var(--bone-2); line-height: 1.5;
}
.summary__deposit > div { display: grid; gap: 8px; }
.summary__deposit strong { color: var(--bone); font-weight: 600; }
.summary__deposit a, .summary__fine a { color: var(--amber); }
.summary__deposit-icon { color: var(--amber); margin-top: 1px; }
.summary__fine { font-size: .8125rem; color: var(--bone-2); line-height: 1.5; }
.summary__pickup { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; padding-inline: 6px; }
.summary__pickup .icon { color: var(--bone-2); margin-top: 2px; }
.summary__pickup strong { color: var(--bone); font-weight: 600; }
.summary__submit { position: relative; }
.summary__submit.is-busy { pointer-events: none; opacity: .85; }
.summary__submit.is-busy .icon { display: none; }
.summary__demo { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .75rem; color: var(--bone-2); text-align: center; margin-top: -6px; }
.summary__demo-tag { padding: 3px 6px 2px; border-radius: 4px; border: 1px solid rgba(233, 162, 59, .6); color: var(--low); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; }
.summary__error { font-size: .875rem; }
/* Online booking paused (the live site while payments aren't live — server/config.js bookingPaused): the chat takes the
   place of "Continue to payment" in the summary, the phone bar and the last step ("Book with us"). Server-rendered and
   never touched by book.js, so nothing moves once the script runs. */
.summary__paused, .paused {
  display: grid; gap: 12px; padding: 14px; border-radius: 12px; border: 1px solid rgba(231, 180, 95, .38);
  background: linear-gradient(180deg, rgba(231, 180, 95, .10), rgba(231, 180, 95, .04));
}
.summary__paused-text { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: .9375rem; line-height: 1.45; color: var(--bone-2); }
.summary__paused-text .icon, .paused__icon { color: var(--amber); margin-top: 2px; }
.summary__paused-text strong { color: var(--bone); font-weight: 650; }
.summary__paused-action, .paused__action { display: grid; }
.summary__paused-action .chat-cta { display: grid; justify-items: stretch; gap: 8px; }
.summary__paused-action .chat-cta__note { text-align: center; }
.summary__paused-action .btn { width: 100%; }
.summary__paused + .summary__deposit { margin-top: 2px; }
.paused { grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: var(--r-2); max-width: 640px; }
.paused__body { display: grid; gap: 16px; min-width: 0; font-size: .9375rem; color: var(--bone-2); }
.paused__action { justify-items: start; }
@media (max-width: 479px) { .paused__action, .paused__action .chat-cta { justify-items: stretch; } .paused__action .btn { width: 100%; } }
.book-bar--paused { flex-wrap: wrap; row-gap: 8px; }
.book-bar--paused .summary-bar__total { flex: 1 1 0; } /* shrink (the meta line ellipsizes) instead of wrapping the button */
.book-bar__action { flex: none; }
.book-bar__action .chat-cta { display: block; }
.book-bar__action .btn { padding-inline: 18px; }
.book-bar__paused { flex: 1 0 100%; font-size: .75rem; line-height: 1.35; color: var(--bone-2); }
.summary__todo { display: flex; gap: 8px; align-items: flex-start; font-size: .8438rem; color: var(--bone); margin-bottom: -4px; }
.summary__todo .icon { color: var(--low); flex: none; margin-top: 1px; }
.summary__todo button { background: none; border: 0; padding: 0; font: inherit; color: var(--amber); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.tl--pick .tl__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.summary__error .link, .summary__error button.link { background: none; border: 0; padding: 4px 0; font: inherit; font-weight: 600; color: var(--amber); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; text-align: left; }
.summary__help:empty { display: none; }
.summary__help { display: grid; justify-items: center; }
.summary__taxnote { margin-top: -6px; }
/* The deposit note sits under the button (what happens after you pay); keep it visually tied to the card. */
.summary__submit + .summary__demo + .summary__deposit, .summary__submit + .summary__deposit { margin-top: 2px; }
@media (max-width: 1023px) {
  /* The footer right below has the same chat button, and its padding already clears the sticky total bar. */
  .summary__help { display: none; }
  .page-book.has-summary-bar main { padding-bottom: 0; }
}

/* Mobile total bar */
@media (max-width: 1023px) {
  /* The fixed bar covers the bottom of the viewport. Reserve its height (measured into --book-bar-h by book.js) so the
     browser scrolls focused fields, buttons and anchors clear of it, not underneath it (WCAG 2.4.11). */
  :root { --book-bar-h: calc(81px + env(safe-area-inset-bottom, 0px)); }
  html:has(.page-book) { scroll-padding-bottom: calc(var(--book-bar-h) + 16px); }
  /* While typing on a touch screen the bar is no help and only eats the space left by the keyboard: slide it away. */
  @media (pointer: coarse) {
    .page-book:has(#book-form :is(input:not([type="radio"], [type="checkbox"]), textarea):focus) .book-bar {
      transform: translateY(calc(100% + 8px)); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s;
    }
  }
}
.book-bar { gap: 12px; transition: transform .2s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .book-bar { transition: none !important; } }
.book-bar .summary-bar__total { min-width: 0; }
.book-bar__meta { font-size: .6875rem; color: var(--bone-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .04em; }
.book-bar__btn { flex: none; padding-inline: 18px; }
.book-bar__btn[aria-busy="true"] { opacity: .8; pointer-events: none; }
@media (max-width: 359px) { .book-bar__btn .icon { display: none; } .book-bar__btn { padding-inline: 14px; } }

/* Desktop ------------------------------------------------------------------------------------------------------ */
@media (min-width: 1024px) {
  :root { --chips-h: 66px; }
  html:has(.page-book) { scroll-padding-top: calc(var(--header-h) + var(--chips-h) + 16px); }
  .book { grid-template-columns: minmax(0, 1fr) clamp(340px, 29vw, 410px); column-gap: clamp(32px, 3.6vw, 56px); align-items: start; padding-top: 20px; }
  .book__head { padding: 8px 0 22px; grid-template-columns: minmax(0, 1fr); }
  .book__title { font-size: clamp(2.6rem, 3.6vw, 3.6rem); }
  .book__deck {
    display: block; position: sticky; top: var(--header-h); z-index: 20; background: var(--graphite);
    padding-top: 8px; margin-inline: -12px; padding-inline: 12px;
  }
  .book__deck::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none; background: linear-gradient(var(--graphite), rgba(31, 30, 27, 0)); }
  .book__progress {
    position: static; margin: 0; padding: 6px; border-radius: var(--r-2); border: 1px solid var(--line);
    background: var(--graphite-2); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .book__progress a { font-size: .75rem; }
  .book__form > .bstep:first-child { padding-top: 36px; }
  .book__aside { position: sticky; top: calc(var(--header-h) + 20px); max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 4px; }
  .summary { padding: 22px; }
}
/* Short laptop screens: keep "Due today" and Continue to payment inside the pinned card without scrolling it. */
@media (min-width: 1024px) and (max-height: 820px) {
  .summary { gap: 11px; padding: 18px 20px; }
  .summary__facts { gap: 5px; }
  .summary__lines { gap: 6px; padding-top: 11px; }
  .summary__total { padding-top: 11px; }
  .summary__total-amount { font-size: 2.1rem; }
}

/* ===========================================================================================================
   /booking/:token — booking status
   =========================================================================================================== */
.bk { padding-block: clamp(28px, 5vw, 56px) clamp(64px, 9vw, 112px); }
.bk__hero { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 44px); max-width: 820px; }
.bk__status {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 32px; padding: 5px 12px 5px 10px; border-radius: 999px;
  font: 500 .75rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; border: 1px solid var(--line-2); color: var(--bone-2);
}
.bk__status--ok { color: var(--go); border-color: rgba(134, 201, 138, .45); background: rgba(134, 201, 138, .07); }
.bk__status--wait { color: var(--low); border-color: rgba(233, 162, 59, .45); background: rgba(233, 162, 59, .07); }
.bk__status--off { color: var(--bone-2); }
.bk__title { font: 760 clamp(2.4rem, 7vw, 4.6rem)/.98 var(--font-display); font-stretch: var(--stretch); letter-spacing: -.025em; text-wrap: balance; outline: none; }
.bk__lede { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); color: var(--bone-2); max-width: 58ch; }
.bk__lede strong { color: var(--bone); }
.bk__ref { font: 500 .8125rem/1.2 var(--font-mono); letter-spacing: .06em; color: var(--bone-2); }
.bk__ref b { color: var(--bone); font-weight: 600; letter-spacing: .1em; }
.bk__flash { margin-bottom: 20px; max-width: 820px; }
.bk__grid { display: grid; gap: 20px; }
.bk__col { display: grid; gap: 20px; align-content: start; min-width: 0; }
.bk-card { background: var(--graphite-2); border: 1px solid var(--line); border-radius: var(--r-3); padding: clamp(18px, 3vw, 26px); box-shadow: var(--shadow); display: grid; gap: 16px; min-width: 0; }
.bk-card__title { font: 760 clamp(1.3rem, 2.4vw, 1.6rem)/1.1 var(--font-display); font-stretch: var(--stretch); letter-spacing: -.02em; }
.bk-card__eyebrow { font: 500 .6875rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--bone-2); }
.bk-card p { color: var(--bone-2); }
.bk-card p strong { color: var(--bone); }
.bk-card a:not(.btn) { color: var(--amber); }
.bk-times { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; border-radius: 14px; overflow: hidden; background: var(--line); }
.bk-times > div { background: var(--graphite-0); padding: 14px 16px; display: grid; gap: 4px; }
.bk-times dt { font: 500 .6875rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--bone-2); }
.bk-times dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.35; }
.bk-times dd span { display: block; font: 760 clamp(1.15rem, 5.4vw, 1.5rem)/1.1 var(--font-display); font-stretch: var(--stretch); letter-spacing: -.02em; white-space: nowrap; }
.bk-times__tc { grid-column: 1 / -1; font: 500 .75rem/1.4 var(--font-mono); letter-spacing: .06em; color: var(--bone-2); text-transform: uppercase; }
/* the length row is a dt (visually hidden) + dd pair, so the <dl> only holds name/value groups */
.bk-times .bk-times__tc dd { display: flex; align-items: center; gap: 10px; font: inherit; letter-spacing: inherit; }
.bk-times .bk-times__tc dd span { display: inline; font: inherit; letter-spacing: inherit; white-space: normal; }
.bk-times .bk-times__tc .hud-rec__dot { display: block; width: 7px; height: 7px; flex: none; }
.bk-times__tc dd > span:last-child { min-width: 0; }
.bk-next { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: bk; }
.bk-next li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 14px; padding-bottom: 20px; }
.bk-next li::before {
  counter-increment: bk; content: counter(bk); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; grid-row: span 2;
  font: 500 .75rem/1 var(--font-mono); border: 1px solid var(--line-2); background: var(--graphite-2); position: relative; z-index: 1; color: var(--bone);
}
.bk-next li.is-done::before { content: "✓"; background: rgba(134, 201, 138, .14); border-color: rgba(134, 201, 138, .5); color: var(--go); }
.bk-next li::after { content: ""; position: absolute; left: 15.5px; top: 32px; bottom: 0; width: 1px; background: var(--line-2); }
.bk-next li:last-child { padding-bottom: 0; }
.bk-next li:last-child::after { display: none; }
.bk-next__title { font-weight: 600; padding-top: 5px; }
.bk-next__text { font-size: .9375rem; color: var(--bone-2); margin-top: 2px; }
.bk-address { font-size: 1.125rem; font-weight: 600; color: var(--bone) !important; white-space: pre-line; }
.bk-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bk-items li { display: flex; justify-content: space-between; gap: 12px; font-size: .9375rem; }
.bk-items li span:last-child { color: var(--bone-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-money { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.bk-money .sline { font-size: .9063rem; }
.bk-money__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--line-2); font-weight: 600; }
.bk-money__total b { font: 760 1.6rem/1 var(--font-display); font-stretch: var(--stretch); color: var(--amber); font-variant-numeric: tabular-nums; }
.bk .stage { --stage-ar: 16 / 9; --maxh: .76; --headroom: .8; border-radius: var(--r-2); }
.bk__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bk-card a[href^="tel:"] { white-space: nowrap; }
@media (max-width: 479px) { .bk__actions .btn { width: 100%; } }
/* Phones: one column, with "what you booked + what you paid" right after the times (on desktop it is the side card). */
@media (max-width: 1023px) {
  .bk__col { display: contents; }
  .bk__grid > .bk__col > .bk-card { order: 3; }
  .bk__grid > .bk__col > .bk-card--when { order: 1; }
  .bk__grid > .bk__col > .bk-card--kit { order: 2; }
}
@media (min-width: 1024px) {
  .bk__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; }
  .bk__col--side { position: sticky; top: calc(var(--header-h) + 20px); }
}

/* ===========================================================================================================
   /booking/demo-pay — demo checkout (no site header; clearly labelled DEMO)
   =========================================================================================================== */
.page-demo { min-height: 100vh; background: radial-gradient(90% 60% at 50% 0%, rgba(74, 70, 63, .55), transparent 70%), var(--graphite); }
.demo-tape {
  display: flex; justify-content: center; align-items: center; gap: 14px; padding: 10px 16px; text-align: center;
  background: repeating-linear-gradient(135deg, var(--amber) 0 18px, #2a2724 18px 36px);
}
.demo-tape span { padding: 4px 10px; border-radius: 4px; background: var(--amber-ink); color: var(--amber); font: 600 .75rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }
.demo { display: grid; justify-items: center; padding: clamp(24px, 6vw, 64px) var(--gutter) 64px; }
.demo__brand { margin-bottom: 28px; }
.demo__card { width: min(100%, 520px); display: grid; gap: 18px; padding: clamp(20px, 4vw, 30px); border-radius: var(--r-3); background: var(--graphite-2); border: 1px solid var(--line); box-shadow: var(--shadow); }
.demo__eyebrow { font: 500 .6875rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--low); display: inline-flex; gap: 8px; align-items: center; }
.demo__title { font: 760 clamp(1.8rem, 5vw, 2.4rem)/1 var(--font-display); font-stretch: var(--stretch); letter-spacing: -.025em; }
.demo__amount { font: 760 clamp(2.6rem, 9vw, 3.4rem)/1 var(--font-display); font-stretch: var(--stretch); letter-spacing: -.03em; color: var(--amber); font-variant-numeric: tabular-nums; }
.demo__amount small { font: 500 .875rem/1 var(--font-body); color: var(--bone-2); letter-spacing: 0; margin-left: 6px; }
.demo__facts { margin: 0; display: grid; gap: 8px; padding: 14px 0; border-block: 1px solid var(--line); }
.demo__facts > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
.demo__facts dt { font: 500 .6875rem/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--bone-2); }
.demo__facts dd { margin: 0; text-align: right; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.demo__note { font-size: .875rem; color: var(--bone-2); }
.demo__note strong { color: var(--bone); }
.demo__form { display: grid; gap: 10px; }
.demo__cancel { justify-self: center; color: var(--bone-2); font-size: .9375rem; display: inline-block; padding: 12px 8px; }
.demo__cancel:hover { color: var(--bone); }
.demo__foot { margin-top: 18px; font-size: .8125rem; color: var(--bone-2); text-align: center; max-width: 46ch; }