/* The client portal, in the shop's own clothes (f-23.1, 2026-09-17 — the portal polish round; f-22 built
   the sheet). ONE stylesheet for everything a client of the shop sees: the booking sheet the site
   opens (#bk, an overlay), the manage page /m?t= and the review page /review/<key> (the same
   classes in `page` mode — the Worker links this file). The look is the site's real CSS, not the
   design kit's mockup: ground #0a0a0a / #0f0f0f, cards #141414, text #e5e5e5, muted #a1a1aa, ONE
   gold #d4af37 (hover #e0c04e) for the action and the progress line only, hairlines #27272a,
   Playfair Display for the shop's name / prices / headings, Inter for everything else, uppercase
   .12em-tracked buttons, SQUARE corners (the site has no border-radius anywhere). The tokens are
   custom properties on .bk so a second install restyles by overriding one block, never by editing
   a rule.
   RULES KEPT HERE: every tap target at the 56 px floor (.svc .slot .day .gold .ghost .line .chk
   .tog .x input .passActs a); a closed day and a taken time are ABSENT, never disabled (LAW 1 —
   nothing in this file styles [disabled]); the bar is the ONE sticky surface (summary rows + the
   gold primary + Back as a text link) and it collapses to the primary while a keyboard is up
   (.bar.kb) so the 375×407 fold keeps the primary AND Back in view (LAW 19); safe-area insets on
   the bar and the sheet; motion is 180 ms ease-out, one easing, and prefers-reduced-motion turns
   ALL of it off; every text colour clears 4.5:1 on the ground it sits on (asserted from computed
   styles by test/booking-ui.cjs). No gradients, no glass, no icon font — the seven glyphs are inline
   1.5-px SVG paths drawn by booking.js.
   f-25 (2026-09-19, the design pass — the design kit's client-pass.css / TOKENS.md): --pad 24 (the site's own
   gutter), --sunk below the card, --line-soft on the hairline's hue, the three gold tints NAMED (--gold-20/35/55)
   instead of written by hand; h1/h2 31 Playfair, .lede 15/1.55, .lab 10.5 at .22em; .svc 18/20 with a 23px price;
   .day 64x74 with a 22px Playfair number; .rule and .err share one shape (a 3px left rule — gold to read, red when it
   failed); the bar 12/14 with a 26px total and the gold hairline that ties it to the header; the pass with a 3px top
   rule, a 52px time and 72px action cells (.passHold .amt in Playfair gold); .thanks / .stars on the review page (five
   gold stars above the headline — decoration, never a rating control); and the 768px block at the foot: on a laptop
   the bar is STATIC and the sheet a centred 520px panel on the site's ground. */
.bk {
  --ground: #0a0a0a; --sheet: #0f0f0f; --card: #141414; --card-on: #171512; --sunk: #111111;
  --ink: #e5e5e5; --white: #ffffff; --muted: #a1a1aa; --faint: #8b8b94;
  --gold: #d4af37; --gold-hover: #e0c04e; --on-gold: #0a0a0a;
  --gold-20: rgba(212, 175, 55, .2); --gold-35: rgba(212, 175, 55, .35); --gold-55: rgba(212, 175, 55, .55);
  --line: #27272a; --line-soft: #1c1c1f; --bad: #f1c9bd; --bad-line: #b3462b;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --t: 180ms; --ease: cubic-bezier(.2, .7, .2, 1);
  --pad: 24px;
}
/* The snapshot's page is a few px wider than a phone (an element overflows), which made the
   layout viewport 399px on a 375px phone and clipped the sheet's right edge. Clamp it. */
html { overflow-x: hidden !important; max-width: 100% !important; }
/* clip, not hidden: hidden would make body a scroll container and un-stick the page top */
body { overflow-x: clip !important; max-width: 100% !important; }
#bk { position: fixed; inset: 0; width: 100%; z-index: 9999; display: none; background: rgba(10, 10, 10, .92); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
#bk.on { display: block; }
.bk .sheet { max-width: 520px; margin: 0 auto; min-height: 100%; background: var(--sheet); border-left: 1px solid var(--gold-20); border-right: 1px solid var(--gold-20); padding: 0 0 24px; box-sizing: border-box; }
/* Page mode: /m and /review are the same sheet, laid on the page instead of over it. */
.bk.page { display: block; background: var(--ground); min-height: 100vh; min-height: 100dvh; font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
.bk.page .sheet { min-height: 100vh; min-height: 100dvh; }

/* ---- the top: the shop's name, one line under it, the close ------------------------------------ */
.bk .top { position: sticky; top: 0; background: var(--sheet); border-bottom: 1px solid var(--gold-20); padding: calc(16px + env(safe-area-inset-top, 0px)) var(--pad) 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 2; }
.bk .brand { font-family: var(--serif); font-weight: 700; color: var(--gold); font-size: 21px; letter-spacing: .01em; line-height: 1.1; }
.bk .brand small { display: block; font-family: var(--sans); font-weight: 500; color: var(--muted); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; margin-top: 5px; }
.bk .x { flex: none; background: none; border: 1px solid var(--gold-35); color: var(--gold); width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin: -6px 0; }
@media (hover: hover) { .bk .x:hover { border-color: var(--gold); } }
.bk .x svg, .bk .glyph { width: 20px; height: 20px; display: block; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bk .steps { display: flex; gap: 6px; padding: 14px var(--pad) 0; }
.bk .steps i { flex: 1; height: 2px; background: var(--line); display: block; position: relative; overflow: hidden; }
.bk .steps i::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left center; transition: transform var(--t) var(--ease); }
.bk .steps i.on::after { transform: scaleX(1); }

/* ---- the body: eyebrow · heading · one-line helper, then the step ------------------------------- */
.bk .body { padding: 26px var(--pad) 8px; animation: bkIn var(--t) var(--ease); }
.bk .body.back { animation-name: bkInBack; }
@keyframes bkIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes bkInBack { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes bkRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.bk .eyebrow { color: var(--gold); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; margin: 0 0 10px; }
.bk h1, .bk h2 { font-family: var(--serif); font-weight: 700; font-size: 31px; color: var(--white); margin: 0 0 8px; line-height: 1.1; letter-spacing: -.005em; }
.bk .lede { color: var(--muted); font-size: 15px; margin: 0 0 22px; line-height: 1.55; }
.bk .lede b { color: var(--ink); font-weight: 500; }
.bk .lab { display: block; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; font-weight: 500; }
.bk .note { font-size: 12.5px; color: var(--faint); margin: 14px 0 0; line-height: 1.5; }
.bk .note.why { color: var(--gold); margin: 0; }
.bk a { color: var(--gold); }

/* ---- cards: a service, a choice ---------------------------------------------------------------- */
.bk .svc { display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); color: var(--ink); padding: 18px 20px; margin: 0 0 10px; cursor: pointer; min-height: 64px; font-family: var(--sans); box-sizing: border-box; transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease); }
@media (hover: hover) { .bk .svc:hover { border-color: var(--gold-55); } }
.bk .svc.on { border-color: var(--gold); background: var(--card-on); }
.bk .svc > span:first-child { min-width: 0; }
.bk .svc b { display: block; font-size: 16px; font-weight: 600; color: var(--white); line-height: 1.3; }
.bk .svc small { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; line-height: 1.45; }
.bk .svc .pr { font-family: var(--serif); color: var(--gold); font-size: 23px; font-weight: 700; white-space: nowrap; display: flex; align-items: center; gap: 12px; }
.bk .svc .pr .glyph { width: 18px; height: 18px; color: var(--muted); }
.bk .svc.on .pr .glyph { color: var(--gold); }
.bk .tag { display: inline-block; vertical-align: 2px; background: var(--gold); color: var(--on-gold); font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: 3px 6px; margin-left: 8px; }
.bk .svc.who { padding: 20px; }
.bk .svc.who .pr .glyph { width: 22px; height: 22px; }
/* an add-on: a toggle UNDER the cut it belongs to, not a card beside it */
.bk .tog { display: flex; align-items: center; gap: 14px; min-height: 56px; margin: -11px 0 10px; padding: 12px 20px; background: var(--card-on); border: 1px solid var(--gold); border-top: 1px solid var(--gold-35); cursor: pointer; box-sizing: border-box; animation: bkRise var(--t) var(--ease); }
.bk .tog > span:not(.pr) { flex: 1; min-width: 0; }
.bk .tog b { display: block; font-size: 15px; font-weight: 600; color: var(--white); }
.bk .tog small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.bk .tog .pr { font-family: var(--serif); color: var(--gold); font-size: 20px; font-weight: 700; white-space: nowrap; }

/* ---- the week strip and the slot grid ---------------------------------------------------------- */
.bk .days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--pad)) 18px; padding: 2px var(--pad) 6px; scroll-padding-left: var(--pad); scroll-snap-type: x proximity; }
.bk .days::-webkit-scrollbar { display: none; }
.bk .day { flex: none; width: 64px; min-height: 74px; background: var(--card); border: 1px solid var(--line); color: var(--ink); cursor: pointer; text-align: center; padding: 10px 0 9px; font-family: var(--sans); scroll-snap-align: start; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 2px; transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease); }
.bk .day b { display: block; font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--white); line-height: 1.1; margin: 1px 0; }
.bk .day small { display: block; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.bk .day.on { border-color: var(--gold); background: var(--card-on); }
.bk .day.on b { color: var(--gold); }
.bk .day.today small:first-child { color: var(--gold); font-weight: 600; }
.bk .slotsWrap { min-height: 184px; }
.bk .slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bk .slot { min-height: 56px; background: var(--card); border: 1px solid var(--line); color: var(--ink); font-size: 15px; font-family: var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; box-sizing: border-box; transition: border-color var(--t) var(--ease), color var(--t) var(--ease), background-color var(--t) var(--ease); }
@media (hover: hover) { .bk .slot:hover { border-color: var(--gold-55); } }
.bk .slot.on { border-color: var(--gold); color: var(--gold); background: var(--card-on); font-weight: 600; }
.bk .slot.sk { border-color: var(--line-soft); background: var(--sunk); cursor: default; }
.bk .tz { font-size: 12.5px; color: var(--faint); margin: 14px 0 0; }
.bk .empty { background: var(--card); border: 1px solid var(--line); padding: 20px; }
.bk .empty p { margin: 0 0 12px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.bk .empty p b { color: var(--white); font-weight: 600; }
.bk .flash { border: 1px solid var(--gold); color: var(--gold); padding: 15px 18px; margin: 0 0 14px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; display: flex; align-items: center; gap: 10px; animation: bkRise var(--t) var(--ease); }
.bk .flash .glyph { width: 16px; height: 16px; }

/* ---- fields ------------------------------------------------------------------------------------- */
.bk input:not([type=checkbox]) { box-sizing: border-box; width: 100%; background: var(--card); border: 1px solid var(--line); color: var(--white); font-size: 16px; padding: 0 16px; font-family: var(--sans); min-height: 56px; margin: 0; -webkit-appearance: none; appearance: none; border-radius: 0; }
.bk input::placeholder { color: var(--faint); opacity: 1; }
.bk input:focus { outline: none; border-color: var(--gold); }
.bk button:focus-visible, .bk a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bk input:not([type=checkbox]):focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.bk input.code { font-size: 32px; font-weight: 600; letter-spacing: .42em; text-align: center; padding-left: .42em; min-height: 72px; font-variant-numeric: tabular-nums; }
.bk .chk { display: flex; align-items: flex-start; gap: 14px; min-height: 56px; padding: 16px 0; font-size: 14px; line-height: 1.5; color: var(--ink); cursor: pointer; box-sizing: border-box; }
/* the one checkbox shape: a 24 px square, gold when ticked, the check a 1.5 px line */
.bk .chk input, .bk .tog input { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; min-height: 0; flex: none; margin: 1px 0 0; padding: 0; cursor: pointer; background: var(--card); border: 1px solid var(--muted); border-radius: 0; display: inline-block; vertical-align: middle; transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease); }
.bk .chk input:checked, .bk .tog input:checked { background-color: var(--gold); border-color: var(--gold); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background-size: 16px 16px; background-position: center; background-repeat: no-repeat; }
.bk .chk input:focus-visible, .bk .tog input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bk .chk a { color: var(--gold); }
.bk .sum { background: var(--card); border: 1px solid var(--line); padding: 4px 20px; margin: 6px 0 18px; }
.bk .sum div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; color: var(--muted); }
.bk .sum div:last-child { border: 0; }
.bk .sum span:last-child { color: var(--white); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- the hold step: the policy is the hero; the wallet first; the card under an "or" ---------- */
/* the policy and the failure share one shape: a box with a 3px left rule — gold for "read this", red for "this did not go through" */
.bk .rule { border: 1px solid var(--gold); border-left-width: 3px; padding: 18px 20px; margin: 4px 0 20px; font-size: 16px; line-height: 1.55; color: var(--ink); }
.bk .rule b { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.bk .payBlock { margin: 6px 0 0; }
.bk #bkWallet { min-height: 56px; margin: 0 0 4px; }
/* the wallet row: Apple Pay and Google Pay side by side (Stripe's Express Checkout Element draws the
   buttons themselves — booking.js asks it for two columns; these rules shape the row it sits in) */
.bk .wallet { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk .wallet button { min-height: 56px; background: var(--white); color: #0a0a0a; border: 0; font-family: var(--sans); font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.bk .wallet button.gpay { background: var(--card); color: var(--white); border: 1px solid var(--line); }
.bk .wallet .glyph { width: 20px; height: 20px; }
.bk .or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; margin: 16px 0; }
.bk .or::before, .bk .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.bk #bkPay { margin: 6px 0 4px; min-height: 56px; }

/* ---- buttons: ONE gold primary; Back is a text link; .line is the outlined secondary ---------- */
.bk .gold, .bk .ghost, .bk .line { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; box-sizing: border-box; font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; padding: 16px 20px; margin: 0; border: 0; transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease); }
.bk .gold { background: var(--gold); color: var(--on-gold); }
.bk .gold:hover { background: var(--gold-hover); }
.bk .ghost { background: none; color: var(--muted); font-size: 12px; letter-spacing: .15em; }
.bk .ghost:hover { color: var(--ink); }
.bk .line { background: none; border: 1px solid var(--gold); color: var(--gold); }
.bk .line:hover { background: rgba(212, 175, 55, .08); }
.bk .gold .glyph, .bk .line .glyph, .bk .ghost .glyph { width: 18px; height: 18px; }
.bk .acts { margin: 16px 0 0; }
.bk .acts > * + * { margin-top: 8px; }
.bk .tel { color: var(--gold); text-decoration: none; white-space: nowrap; }

/* ---- the bar: sticky summary + the primary + Back ---------------------------------------------- */
.bk .bar { position: fixed; left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto; box-sizing: border-box; background: var(--sheet); border-top: 1px solid var(--gold-20); padding: 12px var(--pad) calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 3; transition: transform var(--t) var(--ease); }
.bk.page .bar { position: sticky; }
.bk .bar .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; font-size: 14px; color: var(--muted); }
.bk .bar .row b { color: var(--ink); font-weight: 500; }
.bk .bar .row .tot { font-family: var(--serif); color: var(--gold); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.bk .bar .row.sub { font-size: 12.5px; padding: 0 0 4px; }
.bk .bar .row.sub span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }
.bk .bar .rows { margin-bottom: 10px; }
.bk .bar .rows:empty { display: none; }
.bk .bar .gold { margin-top: 2px; }
.bk .bar .ghost { min-height: 56px; padding: 10px 20px; }
.bk .bar .note.why { padding: 18px 0 0; min-height: 56px; box-sizing: border-box; font-size: 13px; text-align: center; }
.bk .bar.kb .rows { display: none; }
.bk .bar.kb .ghost { min-height: 56px; }

/* ---- the done screen: the Wallet-style pass ---------------------------------------------------- */
.bk .pass { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--gold); padding: 20px var(--pad) 0; margin: 4px 0 16px; animation: bkRise var(--t) var(--ease); }
.bk .pass.pending { border-top-color: var(--line); }
.bk .passTop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bk .passTop .brand { font-size: 17px; }
.bk .passTop .state { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; font-weight: 600; color: var(--gold); white-space: nowrap; }
.bk .pass.pending .passTop .state { color: var(--muted); }
.bk .passTime { font-family: var(--serif); font-weight: 700; font-size: 52px; color: var(--white); line-height: 1; margin: 26px 0 8px; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.bk .passDay { color: var(--ink); font-size: 16px; margin: 0 0 22px; }
.bk .passRows { border-top: 1px solid var(--line-soft); }
.bk .passRows div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; color: var(--muted); }
.bk .passRows span:last-child { color: var(--white); font-weight: 500; text-align: right; }
.bk .passActs { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 calc(-1 * var(--pad)); border-top: 1px solid var(--line); }
.bk .passActs.two { grid-template-columns: repeat(2, 1fr); }
.bk .passActs a, .bk .passActs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 72px; padding: 10px 6px; background: none; border: 0; border-right: 1px solid var(--line); color: var(--gold); font-family: var(--sans); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.bk .passActs a:last-child, .bk .passActs button:last-child { border-right: 0; }
.bk .passActs .glyph { width: 20px; height: 20px; }
.bk .ring { width: 14px; height: 14px; border: 1.5px solid var(--muted); border-top-color: transparent; display: inline-block; vertical-align: -2px; margin-right: 8px; animation: bkSpin 900ms linear infinite; }
@keyframes bkSpin { to { transform: rotate(360deg); } }
.bk .passHold { background: var(--card); border: 1px solid var(--line); padding: 16px 20px; margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.bk .passHold b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.bk .passHold .amt { color: var(--gold); font-family: var(--serif); font-size: 18px; font-weight: 700; }
.bk .check { display: none; }

/* ---- the designed failure: one sentence, one way forward ---------------------------------------- */
.bk .err { border: 1px solid var(--bad-line); border-left-width: 3px; padding: 16px 18px; margin: 16px 0 0; animation: bkRise var(--t) var(--ease); }
.bk .err b { display: block; color: var(--bad); font-size: 15px; margin: 0 0 6px; }
.bk .err p { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.5; }
.bk .err .acts { margin-top: 14px; }
.bk .err:empty { display: none; }
.bk .foot { text-align: center; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 22px var(--pad) calc(8px + env(safe-area-inset-bottom, 0px)); }
.bk .foot a { color: var(--muted); text-decoration: none; margin: 0 8px; }
.bk .foot a:hover { color: var(--ink); }

/* ---- the review page: five gold stars above the headline — decoration, not a control (no pre-screen) ---- */
.bk .thanks { padding-top: 30px; }
.bk .thanks h1 { font-size: 34px; }
.bk .stars { display: flex; gap: 6px; color: var(--gold); margin: 0 0 22px; }
.bk .stars .glyph { width: 18px; height: 18px; fill: var(--gold); stroke: none; }

/* ---- motion off ----------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bk *, .bk *::before, .bk *::after { animation: none !important; transition: none !important; }
}

/* ---- laptops and desktops: no fixed bar. The sheet is a centred panel on the site's ground and the
   summary + primary sit inline at the end of the step, in the site's own clothes (booking.js fitPad
   leaves the sheet's bottom padding alone while the bar is static). Nothing else changes. ---- */
@media (min-width: 768px) {
  #bk, .bk.page { padding: 48px 24px; background: var(--ground); box-sizing: border-box; }
  #bk { background: rgba(10, 10, 10, .92); }
  .bk .sheet { min-height: 0; border: 1px solid var(--gold-20); padding-bottom: 8px; }
  .bk .top { position: static; }
  .bk .bar { position: static; max-width: none; margin: 8px 0 0; border-top: 1px solid var(--line); padding: 16px var(--pad) 18px; transform: none !important; }
  .bk .bar.kb .rows { display: block; }
  .bk .body { padding-bottom: 4px; }
}

/* Phones: the site's header Book button was desktop-only and the hamburger's menu is not in
   this snapshot — show the button, hide the dead control. */
@media (max-width: 639px) { header a[data-book].hidden, nav a[data-book].hidden { display: inline-flex !important; } header button[aria-label="Open menu"], nav button[aria-label="Open menu"] { display: none !important; } }
@media (max-width: 639px) {
  header a[data-book], nav a[data-book] { white-space: nowrap !important; padding: 10px 14px !important; font-size: 11px !important; }
  /* the hero's "Scroll" cue lands on top of the second button on a short phone */
  .absolute.bottom-10.left-1\/2 { display: none !important; }
}