/* =====================================================================================================================
   /book/ · the booking flow (owned by the book page)
   Four short sections on the left; on the right your ticket fills in as you pick, then Confirm. Booked: the ceiling
   lights switch on over "You're in", and the text arrives on a phone (it wakes, typing dots, then the message).
   Looks-only: nothing is sent. The booking is saved in this browser so the owner view can show it.
   ===================================================================================================================== */

.car-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
@keyframes bk-on { 0% { opacity: 0; } 18% { opacity: 1; } 32% { opacity: 0.2; } 48% { opacity: 1; } 64% { opacity: 0.6; } 100% { opacity: 1; } }

/* ---------- hero: a short band; the lights flicker on over the dirty car ---------- */
/* Not a second "build" hero: a band about 45% of the screen, so the form starts on the first screen. */
.bk-hero.phero.short { min-height: max(380px, 46svh); padding-bottom: clamp(36px, 3.6vw, 56px); }
.bk-hero .phero-media img { object-position: 50% 58%; }
.bk-hero .wrap { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 72px); row-gap: 22px; align-items: end; }
.bk-hero .crumbs { grid-column: 1 / -1; }
.bk-hero .mega { font-size: clamp(38px, 5vw, 72px); max-width: none; } /* each beat stays on one line beside the lead */
.bk-hero .lead { grid-column: 2; grid-row: 2; align-self: end; margin-bottom: 0.3em; }
.bk-hero .bk-pills { grid-column: 2; grid-row: 3; margin-top: -4px; }
.bk-hero .mega { grid-column: 1; grid-row: 2 / span 2; }
.bk-power { position: absolute; inset: 0; z-index: 1; background: #020304; opacity: 0; pointer-events: none; }
html.js:not(.no-motion) .bk-power { opacity: 0.88; animation: bk-power-auto 0.6s linear 3.2s forwards; } /* failsafe: on by itself if the script never runs */
html.js .bk-hero.is-on .bk-power { animation: bk-power 1.15s linear forwards; }
@keyframes bk-power { 0% { opacity: 0.88; } 14% { opacity: 0.15; } 22% { opacity: 0.8; } 36% { opacity: 0.05; } 46% { opacity: 0.6; } 62% { opacity: 0; } 100% { opacity: 0; } }
@keyframes bk-power-auto { to { opacity: 0; } }
.bk-pills { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- layout ---------- */
.bk { padding-top: clamp(44px, 5.5vw, 84px); background: radial-gradient(60% 30% at 50% 0%, rgba(206, 236, 255, 0.05), transparent 70%), var(--bg); }
.bk-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 410px); gap: clamp(28px, 3.6vw, 60px); align-items: start; }
.bk-grid[hidden] { display: none; }
.bk-form { display: grid; gap: clamp(14px, 1.6vw, 22px); min-width: 0; }

/* from /packages/: the plan you built */
.bk-plan { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 18px 22px; border-radius: 20px;
  background: radial-gradient(80% 140% at 0% 0%, rgba(255, 181, 90, 0.1), transparent 60%), rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 181, 90, 0.28); }
.bk-plan[hidden] { display: none; }
.bk-plan-k { font: 500 12.5px/1.3 var(--mono); letter-spacing: 0.04em; color: var(--gold); }
.bk-plan-name { font: 900 20px/1.1 var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.005em; }
.bk-plan-what { flex: 1 1 18em; color: var(--dim); font-size: 15.5px; }
.bk-plan-edit[hidden] { display: none; }
.bk-plan-edit { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; font: 600 14.5px var(--sans); color: var(--ice); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- a section ---------- */
.bk-sec { min-width: 0; border: 0; padding: clamp(20px, 2.4vw, 32px); border-radius: clamp(20px, 2vw, 26px); scroll-margin-top: calc(var(--hdr-h) + 20px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.06); transition: box-shadow 0.5s; }
.bk-sec > legend { float: left; width: 100%; display: flex; align-items: center; gap: 14px; padding: 0; margin-bottom: 20px; }
.bk-sec > :not(legend) { clear: both; }
.bk-n { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--faint); transition: background 0.4s, box-shadow 0.4s; }
.bk-n b { font: 500 14px/1 var(--mono); color: var(--dim); transition: opacity 0.25s; }
.bk-n::after { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0; transform: scale(0.6); transition: opacity 0.3s, transform 0.5s var(--spring);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 38'%3E%3Cpath d='M12.5 19.5l4.5 4.5 9-10' fill='none' stroke='%2303161b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.bk-sec.is-done .bk-n { background: var(--ice); box-shadow: 0 0 0 4px rgba(139, 233, 255, 0.12), 0 0 22px rgba(139, 233, 255, 0.45); }
.bk-sec.is-done > legend .bk-n b { opacity: 0; }
.bk-sec.is-done > legend .bk-n::after { opacity: 1; transform: none; }
.bk-h { font: 900 clamp(22px, 2vw, 30px)/1 var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.01em; }
.bk-hint { margin-bottom: 18px; color: var(--dim); font-size: 16px; }
.bk-err, .tk-err { margin-bottom: 14px; font: 500 14px/1.4 var(--mono); color: #ffb3a3; }
.bk-err:empty, .tk-err:empty { display: none; }
.bk-err::before, .tk-err::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: #ff8f7a; box-shadow: 0 0 10px #ff8f7a; vertical-align: 1px; }
.bk-sec.is-bad { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1.5px rgba(255, 143, 122, 0.55); }

/* ---------- 1. cars ---------- */
.bk-cars { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bk-car { align-content: start; gap: 0; min-height: 0; padding: 12px 14px 16px; border-radius: 18px;
  background: radial-gradient(80% 46% at 50% 60%, rgba(170, 225, 245, 0.045), transparent 72%), linear-gradient(180deg, #0f1215, #08090b); }
.bk-car::after { top: 12px; right: 12px; width: 18px; height: 18px; }
.carline { position: relative; display: block; aspect-ratio: 260 / 100; margin: 24px -2px 20px; pointer-events: none; -webkit-box-reflect: below 3px linear-gradient(transparent 50%, rgba(255, 255, 255, 0.24)); }
.carline svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.carline .off { stroke: rgba(243, 245, 247, 0.32); stroke-width: 1.6; }
.carline .lit { stroke: #fff; stroke-width: 1.7; opacity: 0; transition: opacity 0.3s; filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 6px rgba(139, 233, 255, 0.8)); }
.carline::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: 7%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent); }
.bk-car b { font: 900 17px/1 var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: 0; }
@media (hover: hover) { .bk-cars label:hover .carline .lit { opacity: 0.38; } }
.bk-cars input:checked + .bk-car { background: radial-gradient(80% 50% at 50% 60%, rgba(139, 233, 255, 0.13), transparent 72%), linear-gradient(180deg, #0f1418, #08090b); }
.bk-cars input:checked + .bk-car .carline .lit { opacity: 1; animation: bk-on 0.5s linear both; }
.bk-cars input:checked + .bk-car .carline::after { background: linear-gradient(90deg, transparent, rgba(139, 233, 255, 0.6), transparent); box-shadow: 0 0 12px rgba(139, 233, 255, 0.5); }

/* ---------- 2. the work ---------- */
.bk-work { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bk-svc { align-content: start; gap: 3px; min-height: 0; padding: 7px 7px 16px; border-radius: 18px; }
.choice .bk-svc img { aspect-ratio: 4 / 3; margin-bottom: 10px; border-radius: 12px; filter: brightness(0.8) saturate(0.92); transition: filter 0.4s; }
.bk-svc b, .bk-svc small { padding: 0 9px; }
.bk-svc b { font-size: 15.5px; }
.bk-svc small { font-size: 13.5px; }
.bk-svc::after { top: 15px; right: 15px; background-color: rgba(4, 5, 6, 0.5); }
.bk-work input:checked + .bk-svc img { filter: none; }
/* protection film (only when they came to ask about it): a wide card on top of the four */
.bk-work label[hidden] { display: none; }
.bk-work .bk-film-opt { grid-column: 1 / -1; }
.bk-work .opt.bk-film { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto auto; gap: 4px 18px; align-content: center; padding: 7px 48px 7px 7px; }
.choice .bk-svc.bk-film img { grid-row: 1 / span 2; aspect-ratio: 16 / 7; margin: 0; object-position: 50% 42%; }
.bk-work .bk-film b { align-self: end; padding: 0; font-size: 17px; }
.bk-work .bk-film small { align-self: start; padding: 0; }
@media (max-width: 560px) {
  .bk-work .opt.bk-film { grid-template-columns: minmax(0, 1fr); padding: 6px 6px 13px; }
  .choice .bk-svc.bk-film img { grid-row: auto; aspect-ratio: 16 / 6.5; margin-bottom: 7px; }
  .bk-work .bk-film b, .bk-work .bk-film small { padding: 0 6px; }
}

/* ---------- 3. day and time ---------- */
.bk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.bk-days label, .bk-times label { position: relative; display: grid; cursor: pointer; }
.bk-days input, .bk-times input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bk-day { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 86px; padding: 10px 4px; border-radius: 16px; text-align: center;
  background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--faint); transition: background 0.25s, box-shadow 0.25s, color 0.25s, transform 0.2s; }
.bk-day small { font: 500 11.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.bk-day b { font: 900 26px/1 var(--display); font-stretch: 112%; }
.bk-day em { font: 500 10.5px/1 var(--mono); font-style: normal; letter-spacing: 0.03em; color: var(--mute); white-space: nowrap; }
.bk-day em.soon { color: var(--ice); }
.bk-days label:hover .bk-day, .bk-times label:hover .bk-time { box-shadow: inset 0 0 0 1px rgba(243, 245, 247, 0.34); background: rgba(255, 255, 255, 0.055); }
.bk-days input:checked + .bk-day, .bk-times input:checked + .bk-time { background: linear-gradient(180deg, #c8f6ff, var(--ice) 55%, #6ad8f2); color: var(--ice-ink);
  box-shadow: 0 0 0 1px var(--ice), 0 10px 30px rgba(139, 233, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.bk-days input:checked + .bk-day small, .bk-days input:checked + .bk-day em { color: rgba(3, 22, 27, 0.72); }
.bk-days input:focus-visible + .bk-day, .bk-times input:focus-visible + .bk-time { outline: 2px solid var(--ice); outline-offset: 3px; }
.bk-days input:disabled + .bk-day, .bk-times input:disabled + .bk-time { cursor: not-allowed; opacity: 0.4; box-shadow: inset 0 0 0 1px var(--line);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 8px); }
.bk-days label:has(input:disabled), .bk-times label:has(input:disabled) { cursor: not-allowed; }
.bk-times-box { min-width: 0; margin-top: 24px; border: 0; }
.bk-sub { margin-bottom: 12px; padding: 0; font: 500 12.5px/1.3 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim); }
.bk-times { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.bk-time { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 58px; padding: 8px 4px; border-radius: 14px; text-align: center;
  background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--faint); transition: background 0.25s, box-shadow 0.25s, color 0.25s; }
.bk-time b { font: 650 16px/1 var(--sans); white-space: nowrap; }
.bk-time small { font: 500 10.5px/1 var(--mono); letter-spacing: 0.04em; color: var(--mute); text-transform: uppercase; }
.bk-times input:disabled + .bk-time b { text-decoration: line-through; text-decoration-color: rgba(243, 245, 247, 0.5); }

/* ---------- 4. you ---------- */
.bk-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bk-ferr { margin-top: 8px; font-size: 14.5px; line-height: 1.4; color: #ffb3a3; }
.bk-ferr:empty { display: none; }

/* ---------- the ticket ---------- */
.bk-ticket { position: sticky; top: calc(var(--hdr-h) + 20px); scroll-margin-top: calc(var(--hdr-h) + 16px); }
.tk { position: relative; overflow: hidden; border-radius: 28px; background: linear-gradient(180deg, #11151a, #0a0c0f 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 100px rgba(0, 0, 0, 0.55), 0 0 90px rgba(139, 233, 255, 0.05); }
.tk-media { position: relative; overflow: hidden; aspect-ratio: 16 / 8.6; background: var(--char); }
.tk-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 0.6s, transform 1.4s var(--ease); }
.tk-media img[data-for=""] { object-position: 50% 62%; }
.tk-media img.is-on { opacity: 1; transform: none; }
.tk-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, #11151a 0%, rgba(17, 21, 26, 0.2) 40%, transparent 70%), linear-gradient(165deg, rgba(255, 255, 255, 0.08), transparent 26%); }
.tk-media .caption { z-index: 2; left: 18px; bottom: 12px; }
.tk-media .caption i { width: 7px; height: 7px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 10px var(--ice); }
.tk-body { display: grid; gap: 14px; padding: 20px clamp(20px, 2vw, 28px) 26px; }
.tk-title { font: 900 clamp(26px, 2.2vw, 32px)/0.95 var(--display); font-stretch: 125%; letter-spacing: -0.01em; }
.tk-rows { display: grid; margin: 4px 0 2px; }
.tk-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.tk-rows > div[hidden] { display: none; }
.tk-rows dt { position: relative; flex: none; font: 500 12px/1.5 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--mute); transition: color 0.3s; }
.tk-rows dd { min-width: 0; font-size: 15.5px; font-weight: 600; text-align: right; color: var(--mute); overflow-wrap: anywhere; transition: color 0.3s; }
.tk-rows .set dt { color: var(--dim); }
.tk-rows .set dd { color: var(--ink); }
.tk-rows .set dt::before { content: ""; position: absolute; left: -12px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 8px var(--ice); }
.tk-rows .flash dd { animation: tk-flash 0.9s var(--ease); }
@keyframes tk-flash { 0% { color: var(--ice-hi); text-shadow: 0 0 14px rgba(139, 233, 255, 0.8); } 100% { color: var(--ink); text-shadow: none; } }
.tk-rows [data-k="plan"] dd { color: var(--gold); }
.tk-meter { position: relative; height: 3px; border-radius: 3px; background: rgba(243, 245, 247, 0.1); }
.tk-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, #fff, var(--ice)); box-shadow: 0 0 10px rgba(139, 233, 255, 0.7); transition: width 0.6s var(--ease); }
.tk-count { margin-top: -4px; font: 500 12.5px/1.3 var(--mono); color: var(--dim); }
.tk-err { margin: 0; }
.tk-go { margin-top: 4px; }
.tk-go.is-busy { pointer-events: none; }
.tk-go.is-busy::after { opacity: 1; animation: tk-sweep 0.9s var(--ease-io) infinite; }
@keyframes tk-sweep { from { transform: translateX(0) skewX(-20deg); } to { transform: translateX(560%) skewX(-20deg); } }
.tk-concept, .dn-concept { display: flex; align-items: center; gap: 9px; font: 500 12px/1.4 var(--mono); color: var(--mute); }
.tk-concept { justify-content: center; }
.tk-concept i, .dn-concept i { flex: none; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--mute); }
.tk-call { margin-top: 16px; text-align: center; font-size: 15px; color: var(--dim); }

/* ---------- phones: progress and a way to Confirm ---------- */
.bk-bar { display: none; }

/* ---------- booked ---------- */
.bk-done { position: relative; padding-top: clamp(64px, 6vw, 96px); scroll-margin-top: calc(var(--hdr-h) + 8px); outline: none; }
.bk-done[hidden] { display: none; }
.dn-ceiling { position: absolute; top: 0; left: 50%; width: min(1100px, 96%); height: 44px; transform: translateX(-50%); pointer-events: none; }
.dn-ceiling i { position: absolute; left: 50%; height: 2px; border-radius: 2px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, #fff 12%, #fff 88%, transparent); box-shadow: var(--led); }
.dn-ceiling i:nth-child(1) { top: 0; width: 100%; }
.dn-ceiling i:nth-child(2) { top: 17px; width: 76%; height: 1.5px; opacity: 0.8; }
.dn-ceiling i:nth-child(3) { top: 31px; width: 54%; height: 1px; opacity: 0.6; }
.bk-done.is-in .dn-ceiling i { animation: bk-on 0.45s linear both; }
.bk-done.is-in .dn-ceiling i:nth-child(2) { animation-delay: 0.1s; }
.bk-done.is-in .dn-ceiling i:nth-child(3) { animation-delay: 0.2s; }
/* the light the strips throw down */
.bk-done::before { content: ""; position: absolute; z-index: -1; top: 0; left: 50%; width: min(1300px, 100%); height: 520px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(60% 70% at 50% 0%, rgba(206, 236, 255, 0.09), transparent 72%); }
.dn-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(36px, 5vw, 96px); align-items: center; }
.dn-text { display: grid; gap: 22px; justify-items: start; min-width: 0; }
.dn-tick { width: 76px; height: 76px; fill: none; stroke: var(--ice); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 14px rgba(139, 233, 255, 0.55)); }
.dn-tick circle { stroke-dasharray: 183; stroke-dashoffset: 0; }
.dn-tick path { stroke-dasharray: 40; stroke-dashoffset: 0; }
html.motion .bk-done:not(.is-in) .dn-tick circle { stroke-dashoffset: 183; }
html.motion .bk-done:not(.is-in) .dn-tick path { stroke-dashoffset: 40; }
html.motion .bk-done.is-in .dn-tick circle { transition: stroke-dashoffset 0.8s var(--ease) 0.25s; }
html.motion .bk-done.is-in .dn-tick path { transition: stroke-dashoffset 0.45s var(--ease) 0.85s; }
.dn-title { font-size: clamp(44px, 6.4vw, 108px); outline: none; }
.dn-title:focus-visible { outline: 2px solid var(--ice); outline-offset: 10px; }
.dn-kv { width: 100%; max-width: 560px; }
.dn-kv > div { padding: 12px 0; }
.dn-kv dd { font-size: 16.5px; }
.dn-kv [data-k="plan"] dd { color: var(--gold); }
.dn-cta { margin-top: 6px; }
.dn-owner { max-width: 34em; font-size: 15.5px; color: var(--dim); }

/* the phone: it wakes, the typing dots, then the message */
.dn-phone-wrap { display: grid; justify-items: center; gap: 22px; }
.phone { position: relative; width: min(310px, 76vw); aspect-ratio: 9 / 18.6; padding: 11px; border-radius: 50px;
  background: linear-gradient(150deg, #353b42 0%, #0e1013 32%, #0b0c0f 70%, #262b31 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), inset 0 0 0 4px #050607, 0 60px 120px rgba(0, 0, 0, 0.75), 0 0 110px rgba(139, 233, 255, 0.07);
  -webkit-box-reflect: below 14px linear-gradient(transparent 76%, rgba(255, 255, 255, 0.1)); }
.ph-screen { position: relative; isolation: isolate; height: 100%; overflow: hidden; border-radius: 40px; background: #000; }
.ph-wall { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; filter: brightness(0.5) saturate(0.9); opacity: 0; transform: scale(1.08); transition: opacity 0.9s, transform 1.6s var(--ease); }
.ph-island { position: absolute; top: 11px; left: 50%; width: 92px; height: 27px; margin-left: -46px; border-radius: 20px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); }
.ph-bar { position: absolute; top: 15px; left: 28px; right: 24px; display: flex; justify-content: space-between; align-items: center; font: 650 13.5px/1 var(--sans); opacity: 0; transition: opacity 0.6s; }
.ph-sig { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.ph-sig i { width: 3px; border-radius: 1px; background: var(--ink); }
.ph-sig i:nth-child(1) { height: 4px; } .ph-sig i:nth-child(2) { height: 6px; } .ph-sig i:nth-child(3) { height: 8.5px; } .ph-sig i:nth-child(4) { height: 11px; }
.ph-lock { position: absolute; top: 13%; left: 0; right: 0; display: grid; justify-items: center; gap: 2px; opacity: 0; transform: translateY(8px); transition: opacity 0.8s, transform 1s var(--ease); }
.ph-date { font: 550 15px/1.2 var(--sans); color: rgba(243, 245, 247, 0.86); }
.ph-time { font: 300 clamp(60px, 22vw, 78px)/1 var(--sans); letter-spacing: -0.03em; color: rgba(243, 245, 247, 0.94); }
.ph-notif.notif { position: absolute; left: 9px; right: 9px; top: 39%; width: auto; padding: 12px 13px; gap: 11px; border-radius: 22px; background: rgba(36, 40, 45, 0.72);
  opacity: 0; transform: translateY(-14px) scale(0.94); transition: opacity 0.4s, transform 0.7s var(--spring); }
.ph-notif .notif-app { width: 36px; height: 36px; border-radius: 10px; font-size: 17px; }
.ph-notif .notif-top { font-size: 13px; }
.ph-notif .notif-top span { font-size: 12px; }
.ph-typing { display: flex; gap: 5px; margin-top: 8px; padding-bottom: 4px; }
.ph-typing i { width: 7px; height: 7px; border-radius: 50%; background: rgba(243, 245, 247, 0.65); }
html.motion .ph-typing i { animation: ph-dot 1s ease-in-out infinite; }
html.motion .ph-typing i:nth-child(2) { animation-delay: 0.15s; }
html.motion .ph-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ph-dot { 0%, 60%, 100% { transform: none; opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
.ph-notif p.ph-msg { display: none; margin-top: 3px; font-size: 13.5px; line-height: 1.42; }
.ph-home { position: absolute; bottom: 9px; left: 50%; width: 112px; height: 4px; margin-left: -56px; border-radius: 4px; background: rgba(243, 245, 247, 0.7); opacity: 0; transition: opacity 0.6s; }
.phone.is-awake .ph-wall { opacity: 1; transform: none; }
.phone.is-awake .ph-bar, .phone.is-awake .ph-home { opacity: 1; }
.phone.is-awake .ph-lock { opacity: 1; transform: none; }
.phone.has-note .ph-notif { opacity: 1; transform: none; }
.phone.is-sent .ph-typing { display: none; }
.phone.is-sent .ph-notif p.ph-msg { display: block; }
.phone.is-sent .ph-notif { box-shadow: inset 0 0 0 1px rgba(139, 233, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(139, 233, 255, 0.18); }
.dn-cap { font: 500 12.5px/1.3 var(--mono); letter-spacing: 0.04em; color: var(--dim); margin-top: 60px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .bk-times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-cars, .bk-work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice .bk-svc img { aspect-ratio: 16 / 9; }
}
@media (max-width: 900px) and (min-width: 561px) {
  .bk-cars, .bk-work { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bk-svc small { font-size: 12.5px; }
}
@media (max-width: 900px) {
  .bk-grid { grid-template-columns: 1fr; }
  .bk-ticket { position: static; }
  .tk-media { aspect-ratio: 16 / 7; }
  /* phones: the tick sits beside "Booked", and the phone comes straight after the headline, so "You're booked" and the
     arriving text share one screen (book.js glides there) */
  .dn-grid { grid-template-columns: auto minmax(0, 1fr); gap: 14px 12px; align-items: center; }
  .dn-text { display: contents; }
  .dn-text > *, .dn-phone-wrap { grid-column: 1 / -1; }
  .dn-tick { order: 1; grid-column: 1; width: 42px; height: 42px; }
  .dn-text > .eyebrow { order: 2; grid-column: 2; }
  .dn-title { order: 3; } .dn-lead { order: 4; } .dn-phone-wrap { order: 5; }
  .dn-kv { order: 6; } .dn-cta { order: 7; } .dn-owner { order: 8; } .dn-concept { order: 9; }
  .dn-lead { margin-top: -2px; }
  .dn-phone-wrap { margin: 2px 0 8px; gap: 12px; }
  .ph-crop { height: min(clamp(380px, 112vw, 470px), 56svh); overflow: hidden; padding-top: 4px; -webkit-mask: linear-gradient(#000 84%, transparent); mask: linear-gradient(#000 84%, transparent); }
  .ph-crop .phone { -webkit-box-reflect: unset; }
  .ph-crop .ph-lock { top: 9%; }
  .ph-crop .ph-time { font-size: clamp(56px, 19vw, 72px); }
  .ph-crop .ph-notif.notif { top: 29%; }
  .dn-cap { margin-top: 0; }
  .bk-bar { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; padding: 7px 7px 7px 18px; border-radius: 999px;
    background: rgba(12, 14, 17, 0.84); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 44px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); transform: translateY(170%); transition: transform 0.55s var(--ease); }
  .bk-bar[hidden] { display: none; }
  .bk-bar.show { transform: none; }
  .menu-open .bk-bar { transform: translateY(170%); }
  .bk-bar-meter { position: relative; flex: none; width: 46px; height: 3px; border-radius: 3px; background: rgba(243, 245, 247, 0.14); }
  .bk-bar-meter i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, #fff, var(--ice)); box-shadow: 0 0 8px rgba(139, 233, 255, 0.7); transition: width 0.5s var(--ease); }
  .bk-bar-t { flex: 1; min-width: 0; font: 500 12.5px/1.2 var(--mono); color: var(--dim); white-space: nowrap; }
  .bk-bar .btn { min-height: 46px; padding: 0 16px; }
  .bk { padding-bottom: 130px; }
}
@media (max-width: 900px) {
  /* the band stacks: the headline, then the lead */
  .bk-hero .wrap { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .bk-hero .mega, .bk-hero .lead, .bk-hero .bk-pills { grid-column: 1; grid-row: auto; }
  .bk-hero .mega { font-size: var(--fs-mega); }
}
@media (max-width: 720px) {
  .bk-hero.phero.short { min-height: 0; padding-top: calc(var(--hdr-h) + 40px); padding-bottom: 30px; }
  .bk-hero .bk-pills { display: none; } /* the hours and "text back" are on the ticket and in step 4 */
  .bk-sec { padding: 20px 16px 20px; border-radius: 22px; }
  .bk-sec > legend { margin-bottom: 16px; gap: 12px; }
  .bk-n { width: 34px; height: 34px; }
  .bk-h { font-size: 22px; }
  .bk-hint { font-size: 15.5px; margin-bottom: 16px; }
  .bk-cars, .bk-work { gap: 8px; }
  .bk-car { padding: 10px 12px 14px; }
  .carline { margin: 22px 0 16px; }
  .bk-svc { padding: 6px 6px 13px; }
  .choice .bk-svc img { aspect-ratio: 4 / 3; margin-bottom: 9px; }
  .bk-svc b, .bk-svc small { padding: 0 6px; }
  .bk-svc b { font-size: 14.5px; }
  .bk-svc small { font-size: 12.5px; line-height: 1.35; }
  /* the days run in a strip you swipe, like a booking app */
  .bk-days { display: flex; gap: 8px; margin: 0 -16px; padding: 4px 16px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none;
    -webkit-mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 26px), transparent); mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 26px), transparent); }
  .bk-days::-webkit-scrollbar { display: none; }
  .bk-days label { flex: none; width: 68px; scroll-snap-align: start; }
  .bk-day { min-height: 88px; }
  .bk-times { gap: 7px; }
  .bk-time { min-height: 54px; }
  .bk-time b { font-size: 15px; }
  .bk-fields { grid-template-columns: 1fr; gap: 14px; }
  .tk { border-radius: 24px; }
  .tk-media { aspect-ratio: 16 / 8; }
  .bk-done { padding-top: 44px; }
  .dn-title { font-size: 13vw; }
  .dn-cta { width: 100%; display: grid; grid-template-columns: 1fr; }
  .dn-cta .btn { width: 100%; }
  .phone { width: min(290px, 78vw); }
}
@media (prefers-reduced-motion: reduce) {
  .bk-power { display: none; }
}
/* laptops with short screens: the sticky ticket stays whole on screen */
@media (min-width: 901px) and (max-height: 860px) {
  .bk-ticket { top: calc(var(--hdr-h) + 12px); }
  .tk-media { aspect-ratio: 16 / 5; }
  .tk-body { gap: 10px; padding-top: 16px; padding-bottom: 20px; }
  .tk-rows > div { padding: 8px 0; }
  .tk-title { font-size: 24px; }
  .tk-call { display: none; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .tk-media { display: none; }
  .tk-body { padding-top: 22px; }
}