@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0,0&display=swap');
/* DESIGN B v5 — "A PAGE OF THE WEBSITE" (28 Aug 2026, owner-directed)
   Owner: "the colours need to mirror our website, as it's going to be a page on our
   website… so it all flows and feels consistent" + "the booking button is rounded,
   so all boxes need to be rounded."
   Every value below is MEASURED off the live float-therapy.co.uk/pricing DOM:
   body ground #05102b · section navy #071436 · .ft-card = #071436 + 2px solid #fff
   + 32px radius · .ft-btn--primary = #72694F gold fill, white text, 12px radius,
   48px tall, 16px/500 · headings white, Space Grotesk 500 · body text white 18px.
   The premium layout grammar from the 28-Aug research blueprint is retained
   (photographic hero dissolving into the ground, big display type, tracked-caps
   micro-labels, Morning/Afternoon/Evening ticket groups, concierge block) — dressed
   in the site's own skin. Loads AFTER proto.css and overrides it. */


:root {
  --ground:   #05102b;                       /* site body ground */
  --panel:    #071436;                       /* site section / card navy */
  --panel-hi: #0e2050;                       /* hover lift */
  --white:    #ffffff;
  --text:     #EBE8E1;                       /* site cream — reads white on navy */
  --text-mut: #CFC7B6;                       /* the email/webstore cream-gold */
  --text-dim: rgba(207, 199, 182, .62);
  --gold:     #72694F;                       /* the site's Book Now gold */
  --line:     rgba(255, 255, 255, .45);      /* chip/input borders */
  --line-lo:  rgba(255, 255, 255, .18);
  --r-card:   32px;                          /* the site card radius */
  --r-mid:    16px;
  --r-ui:     12px;                          /* the site button radius */

  /* the SITE'S OWN typography variables, verbatim from its stylesheet */
  --color-white: #ffffff;
  --color-main-dark: #05102b;
  --color-white-15: rgba(255, 255, 255, .15);
  --color-white-20: rgba(255, 255, 255, .2);
  /* ═══ TYPE SCALE (owner, 29 Aug: "we need to make sure the customer facing booking page, it's
     all consistent — there are different font sizes everywhere") ═══
     Measured before writing it: one screen was carrying SEVENTEEN different size/weight pairs,
     with four of them (10.5 / 11 / 11.5 / 12.5) all doing the job of "small uppercase label" and
     four more (12 / 12.5 / 14.5 / 15) all doing the job of "ordinary sentence". The owner's own
     example — "Thursday 3 September is free" at 12.5px sitting beside body copy at 15px — is
     exactly that. Eight steps, and everything maps onto one of them. */
  /* the type scale is declared ONCE, in proto.css, which every page loads — the staff diary
     loads no other stylesheet, so a scale living here could never reach it (owner, 6 Sept).
     Override a token below only where the customer skin deliberately differs. */
  --text-regular: 0.875rem;
  --text-medium: 1rem;
  --text-h1: 2.5rem;
  --text-h2: 2.25rem;
}
@media (min-width: 992px) {
  :root { --text-regular: 1rem; --text-medium: 1.125rem; --text-h1: 3.5rem; --text-h2: 3rem; }
}

body { background: var(--ground); color: var(--text); line-height: 1.5; }
h1, h2, h3, h4 { color: var(--white); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.shell { max-width: 720px; }

.svc, .summary, .usual, .addon, .policy, .btn, .cta, .day, .slot, .chip,
.giftfield, .welcomeback { box-shadow: none !important; }

/* ---------- header: EXACT clone of the site navbar (measured off the live DOM):
   sticky, rgba(5,16,43,.88) + blur(12px), 1px white/15 bottom border, content padded
   1rem 5% to max 90rem, logo 2.25rem, links 14px Archivo/400 at 1.6rem gaps, 38px
   circle social icons (1px white/20), then the 48px gold 12px-radius button
   (Book Now's slot -> My account) ---------- */
.topbar { position: sticky; top: 0; z-index: 40;
  background: rgba(5, 16, 43, .88); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  padding: 1rem 5%; max-width: none; }
@media (min-width: 1440px) { .topbar { padding-left: calc((100% - 90rem) / 2 + 4.5rem); padding-right: calc((100% - 90rem) / 2 + 4.5rem); } }
.brandtext { display: none; }
.brandlogo { display: block; height: 2.25rem; width: auto; }
.sitenav { display: flex; gap: 1.6rem; align-items: center; }
.sitenav a { color: #fff; font-family: var(--font-body); font-size: var(--t-ui); font-weight: 400;
  text-decoration: none; }
.sitenav a:hover { color: var(--text-mut); }
.sitenav .chev { display: inline; font-size: var(--t-nano); opacity: .8; }
.topactions { display: flex; align-items: center; gap: 10px; }
.soc { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; color: #fff; }
.soc:hover { border-color: rgba(255, 255, 255, .5); }
.topbar .acctbtn { background: var(--gold); color: #fff; border-radius: var(--r-ui);
  font-family: var(--font-heading); font-weight: 500; font-size: var(--t-input);
  height: 48px; display: flex; align-items: center; padding: 0 24px;
  margin-left: 10px; text-decoration: none; }
.topbar .acctbtn:hover { filter: brightness(1.1); }
.topbar .stafflink { color: var(--text-dim); font-size: var(--t-small); text-decoration: none; }
.topbar .stafflink:hover { color: #fff; }
@media (max-width: 960px) {
  .sitenav { display: none; }
  .topbar .acctbtn { display: none; }   /* on mobile the button lives on the page itself */
  .soc { display: none; }
}

/* mobile: an actual My account button on the page, straight under the hero */
.mob-account { display: none; }
@media (max-width: 960px) {
  .mob-account { display: block; text-align: center; background: var(--gold); color: #fff;
    font-family: var(--font-heading); font-weight: 500; font-size: var(--t-input); padding: 14px;
    border-radius: var(--r-ui); text-decoration: none; margin: 18px 0 2px; }
}

/* ---------- hero: EXACT copy of the site's page-hero recipe (contact-us, measured):
   section min-height min(60vh, 36rem), flex-centred, absolute cover image, even navy
   scrim 58/66/58, content max-width 90rem padded clamp(4rem,8vw,6rem) 5% ---------- */
.hero-b { margin: 0 calc(50% - 50vw); width: 100vw; min-height: min(60vh, 36rem);
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: #05102b url('img/lounge.jpg') center 50% / cover no-repeat; }
.hero-b::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,16,43,.58) 0%, rgba(5,16,43,.66) 50%, rgba(5,16,43,.58) 100%); }
.hero-inner { position: relative; z-index: 1; width: 100%; max-width: 90rem;
  margin: 0 auto; padding: clamp(4rem, 8vw, 6rem) 5%; }
.hero-eyebrow { display: block; color: var(--text-mut); font-family: var(--font-body);
  font-size: var(--t-label); font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: 14px; }
.hero-b h1 { font-family: var(--font-heading); font-weight: 500; color: var(--white);
  font-size: var(--text-h1); line-height: 1.2; letter-spacing: -0.01em;
  max-width: 44rem; margin: 0 0 1.25rem; }
.hero-b p { color: #fff; font-size: var(--t-lead); opacity: .92; line-height: 1.5; max-width: 44rem; }
.hero-rule { display: none; }
.hero-account { background-image: url('img/journal.jpg'); }

.specstrip { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0 2px; }
.specstrip span { border: 1.5px solid var(--line); border-radius: var(--r-ui);
  color: var(--text-mut); font-size: var(--t-label); font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; padding: 8px 12px; white-space: nowrap; }

/* ---------- progress ---------- */
.steps { margin-top: 36px; gap: 6px; }
.steps span { background: var(--line-lo); height: 2px; border-radius: 2px; }
.steps span.on { background: var(--gold); }

/* ---------- step titles: the site's white Space Grotesk ---------- */
/* ═══ ITEM 209 — the back controls (owner, 29 Aug, raised twice) ═══
   "the back buttons are not prominent enough, they're kind of hidden."
   Measured before changing anything: 13.5px, cream at 62% OPACITY, no border, no background, no
   padding, a 66×16px hit area — the lowest-contrast thing on the screen and well under the 44px
   touch minimum. It was styled as a caption, not as a control, and `margin-left:auto` parked it
   opposite the heading so it read as a label floating on the right.
   Now: a real bordered pill, full-strength cream, 44px tall, and ALWAYS ON THE LEFT above the
   heading — back belongs at the start of the row, and it was left on one screen and right on
   another, which is its own reason nobody found it. */
.stephead { margin: 24px 0 20px; display: flex; flex-direction: column-reverse;
  align-items: flex-start; gap: 12px; }
.stephead h2 { background: none; padding: 0; border-radius: 0; text-align: left;
  text-transform: none; letter-spacing: -.4px; font-size: var(--t-h1); font-weight: 500;
  color: var(--white); line-height: 1.12; }
.stephead .back, .back {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 18px; margin-left: 0;
  border: 1.5px solid rgba(207, 199, 182, .38); border-radius: var(--r-ui);
  background: rgba(255, 255, 255, .04);
  color: var(--text-mut); font-size: var(--t-small); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; }
/* a back control rendered OUTSIDE a .stephead (the gift shop's own sub-page backs) still sits
   above the title, so the affordance is in the same place on every screen (owner, 29 Aug) */
#app > .back { margin: 24px 0 0; }
#app > .back + .stephead { margin-top: 12px; }
.stephead .back:hover, .back:hover { color: var(--white); border-color: var(--white);
  background: rgba(255, 255, 255, .1); }
.eyebrow { color: var(--text-mut); font-weight: 600; letter-spacing: .16em; font-size: var(--t-label); }

/* ---------- the service menu: the site's card, exactly ---------- */
.svc { background: var(--panel); border: 2px solid var(--white); border-radius: var(--r-card);
  padding: 26px 28px; margin-bottom: 16px; transition: background .15s ease, transform .15s ease; }
.svc:hover { background: var(--panel-hi); transform: none; }
.svc:active { transform: none; }
.svc h3 { color: var(--white); font-size: var(--t-h3); font-weight: 500; }
.svc p { color: var(--text); font-size: var(--t-body); margin-top: 7px; line-height: 1.6; }
.svc .price { color: var(--white); font-family: var(--font-heading); font-size: var(--t-price);
  font-weight: 500; }
.svc .price small { color: var(--text-dim); font-weight: 400; font-size: var(--t-small); }
.svc .meta { color: var(--text-mut); font-size: var(--t-label); letter-spacing: .16em; font-weight: 600;
  margin-top: 12px; }

/* ---------- selection: outlined chips; chosen = the site's gold button look ---------- */
.chip { background: transparent; border: 1.5px solid var(--line); border-radius: var(--r-ui);
  color: var(--text); font-size: var(--t-ui); font-weight: 500; padding: 11px 18px;
  transition: all .15s ease; }
.chip:hover:not(.on) { border-color: var(--white); color: var(--white); }
.chip.on { background: var(--gold); border-color: var(--gold); color: #fff; }
.chip .d { color: var(--text-dim); }
.chip.on .d { color: rgba(255, 255, 255, .82); }

.datestrip { gap: 8px; }
.day { background: transparent; border: 1.5px solid var(--line); border-radius: var(--r-ui);
  min-width: 60px; padding: 11px 0 9px; transition: all .15s ease; }
.day small { color: var(--text-mut); font-size: var(--t-label); letter-spacing: .1em;
  text-transform: uppercase; font-weight: 600; }
.day b { color: var(--white); font-weight: 500; font-size: var(--t-h3); }
.day:hover:not(.on) { border-color: var(--white); }
.day.on { background: var(--gold); border-color: var(--gold); }
.day.on small { color: rgba(255, 255, 255, .85); } .day.on b { color: #fff; }

/* time-of-day groups + generous ticket slots */
.tgroup { margin-top: 18px; }
.tglabel { color: var(--text-mut); font-size: var(--t-label); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: 10px; }
.timegrid { gap: 10px; }
.slot { background: transparent; border: 1.5px solid var(--line); border-radius: var(--r-ui);
  color: var(--white); font-family: var(--font-heading); font-size: var(--t-lead); font-weight: 500;
  min-height: 56px; transition: all .15s ease; }
.slot .d { color: var(--text-dim); font-family: var(--font-body); font-size: var(--t-small); font-weight: 400; }
.slot:hover:not(.on) { border-color: var(--white); }
.slot.on { background: var(--gold); border-color: var(--gold); color: #fff; }
.slot.on .d { color: rgba(255, 255, 255, .82); }

.empty { color: var(--text); background: var(--panel); border: 2px solid var(--white);
  border-radius: var(--r-card); }
.wlform input { background: var(--ground); border: 1.5px solid var(--line);
  border-radius: var(--r-ui); color: var(--white); }
.wlform input::placeholder { color: var(--text-dim); }

/* ---------- info moments ---------- */
.addon { background: var(--panel); border: 1.5px solid var(--line);
  border-radius: var(--r-mid); }
.addon b { color: var(--white); } .addon small { color: var(--text-mut); }
/* owner, 29 Aug: "maybe this box should be a different colour, so it differentiates from the
   other boxes to make it more prominent." It was the same navy with the same white border as
   every other card on the page, so the one personal thing on the screen — their usual booking,
   already free, one tap away — read as furniture. It now carries the brand GOLD: a warmer ground,
   a gold edge and a gold eyebrow, so it is unmistakably not another service card. The Book button
   inside it stays white-on-gold, which is the strongest contrast available on this ground. */
.usual { background: linear-gradient(140deg, #2a2718 0%, #1a1a14 55%, var(--panel) 100%);
  border: 2px solid var(--gold); border-radius: var(--r-card); }
/* ⚠️ NO shadow — line 49 flattens every card on purpose, and this skin is the site's own. The box
   is set apart by ground and edge instead, which is what the rest of the design does too. */
.usual .eyebrow { color: var(--white); }   /* owner, 29 Aug: the welcome line reads white */
.usual b { color: var(--white); font-size: var(--t-lead); }
.usual small { color: var(--text-mut); font-size: var(--t-body); }
.usual .chip.on { background: var(--gold); border-color: var(--gold); color: #fff; }
.welcomeback { background: var(--panel); border: 1.5px solid var(--line);
  border-radius: var(--r-mid); padding: 15px 20px; }
.welcomeback b { color: var(--white); } .welcomeback small { color: var(--text); }
.policy { background: var(--panel); border: 1.5px solid var(--line-lo);
  border-radius: var(--r-mid); color: var(--text); }
.policy input { accent-color: var(--gold); }
/* owner, 29 Aug: hints were 12.5px AND 62%-opacity cream — smaller and fainter than body copy
   (.svc p is 15px at full strength). Size is fixed in proto.css; this lifts the contrast, which
   was the other half of why they went unread. Deliberately still below body copy. */
.hint { color: rgba(207, 199, 182, .84); font-size: var(--t-small); }
/* item 210 — a commercial term, not an aside. Bordered so it reads as part of the choice being
   made, at body size, with the date itself carrying the weight. */
/* owner, 29 Aug: "the box itself [needs to match] the other boxes above, and it needs to be
   centered." So it is built from the SAME card language as the delivery cards it sits under —
   navy panel, white border, the card radius — rather than a faint outline of its own, and it is
   centred on the column like they are. It also moved ABOVE the email field: it is the term the
   buyer is agreeing to, not a footnote to the field below it. */
.termnote { margin: 18px auto 0; max-width: 100%; padding: 18px 22px; text-align: center;
  border-radius: var(--r-card); border: 2px solid var(--white); background: var(--panel); }
.termnote b { display: block; color: var(--white); font-family: var(--font-heading);
  font-size: var(--t-lead); font-weight: 500; }
.termnote span { display: block; margin-top: 6px; color: var(--text-mut); font-size: var(--t-body);
  line-height: 1.55; }
.termnote span b { display: inline; color: var(--white); font-family: inherit; font-weight: 700;
  font-size: inherit; }
.hint b { color: var(--white); }
.divider { color: var(--text-dim); letter-spacing: .18em; }

/* item 211 — the Questions card, in the card language of the page above it (built 2 Sept) */
/* owner, 2 Sept: not a card — "it looks like a bookable service". A plain section under the page's
   hairline, which is how it separates things you read from things you book. */
.askcard { border-top: 1px solid var(--line-lo); margin-top: 32px; padding-top: 22px; }
/* owner, 6 Sept: the old .meta kicker was --t-label (11.5px) — identical to the hero eyebrow and
   far too quiet for a section heading. It now matches .stephead h2, so it reads at the same weight
   as "Everything else" immediately above it. */
.askhead { color: var(--white); font-size: var(--t-h1); font-weight: 500; letter-spacing: -.4px;
  line-height: 1.12; margin: 0; }
@media (max-width: 640px) { .askhead { font-size: var(--t-h2); } }
.askcard h3 { color: var(--white); font-size: var(--t-h3); font-weight: 500; margin-top: 8px; }
.askcard p { color: var(--text); font-size: var(--t-body); margin-top: 7px; line-height: 1.6; }
.askcard .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.askcard a.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
.askcard a.chip .material-symbols-rounded { font-size: var(--t-price); line-height: 1; }
.askcard .staff { margin-top: 16px; font-size: var(--t-small); color: var(--text-dim); }
.askcard .staff a { color: inherit; text-decoration: none; }
.askcard .staff a:hover { color: var(--white); }

/* concierge block: the human escape hatch (the pre-211 treatment; kept for any page still using it) */
.concierge { border-top: 1px solid var(--line-lo); margin-top: 32px; padding-top: 22px;
  --color-scheme-text: #fff; --text-regular: 15px; }
.concierge ul a:hover { text-decoration: underline !important; }
.concierge b { display: block; color: var(--white); font-family: var(--font-heading);
  font-weight: 500; font-size: var(--t-h3); margin: 8px 0 6px; }
.concierge p { color: var(--text); font-size: var(--t-body); line-height: 1.8; }

/* ---------- the bill: a site card ---------- */
.summary { background: var(--panel); border: 2px solid var(--white); border-radius: var(--r-card);
  color: var(--text); }
.summary .li { color: var(--text); }
/* owner, 29 Aug: "'Contrast Therapy · Duo' isn't aligned to the left, and the text is small, it's
   not prominent enough" and "'Contrast Duo Gift Card £60' isn't consistent with the other text —
   we need everything to be consistent". The gift flow already showed what you are buying in a
   summary box; the booking flow showed the same information as a dim 14.5px note. Now both use the
   box. `.summary.wide` opts OUT of the 720px centred checkout column.
   ⚠️ 4 Sept 2026 — this comment used to name "the PICKING screens (date strip, sell-up cards)" as
   the ones that run full width. Measured, they do not: the date strip is itself the 720px centred
   column, so the box was already level with it and carrying `wide` there would push it OUT of line.
   The screen that actually needs the opt-out is the gift DELIVERY step, whose .svcgrid runs the
   full 1140px — there the capped box floated 210px in from the cards, which is the misalignment
   the owner reported. See the whatbox rule in the min-width:900px block for why the class had no
   effect until then. */
.summary.wide { max-width: none; margin-left: 0; margin-right: 0; }
.summary .li.what { font-family: var(--font-heading); font-size: var(--t-lead); font-weight: 500;
  color: var(--white); }
.summary .li.total { border-top: 1px solid var(--line-lo); color: var(--white);
  font-family: var(--font-heading); font-size: var(--t-h3); font-weight: 500; }

/* ---------- forms ---------- */
.field label { color: var(--text-mut); font-size: var(--t-label); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; }
.field input, .field select { background: var(--panel); border: 1.5px solid var(--line);
  border-radius: var(--r-ui); color: var(--white); min-height: 50px; }
.field input::placeholder { color: var(--text-dim); }
.field input:focus, .field select:focus { border-color: var(--gold); outline: none; }
.otp input { background: var(--panel); border: 1.5px solid var(--line);
  border-radius: var(--r-ui); color: var(--white); }
.otp input:focus { border-color: var(--gold); outline: none; }

/* the gift-card box (item 64: prominent) */
.giftfield { background: var(--panel); border: 2px solid var(--white);
  border-radius: var(--r-mid); padding: 18px; }
.giftfield::before { color: var(--text-mut); letter-spacing: .16em; font-size: var(--t-label);
  text-transform: uppercase; font-weight: 600; }
.giftfield input { background: var(--ground); border: 1.5px solid var(--line);
  border-radius: var(--r-ui); color: var(--white); }
.giftfield input::placeholder { color: var(--text-dim); }
.giftfield button { background: var(--gold); border: none; border-radius: var(--r-ui);
  color: #fff; font-weight: 500; }
/* The "Gift card / discount code" label is a ::before, and .giftfield is a flex ROW — so
   the label became a flex ITEM sitting BESIDE the input rather than above it. On mobile it
   wrapped onto two lines and stretched the whole row, giving a 74px-tall input and button
   inside a 114px box for an optional code field (owner, 28 Aug: "the gift card box is too
   big"). Giving the label its own full-width line fixes the desktop layout too. */
/* stretch, not center — the button must match the input's height, and both must clear the
   44px touch target */
.giftfield { flex-wrap: wrap; align-items: stretch; }
.giftfield::before { flex: 0 0 100%; margin-bottom: 4px; }
@media (max-width: 640px) {
  .giftfield { padding: 12px; margin-top: 14px; gap: 8px; }
  .giftfield input { padding: 12px; min-height: 44px; }
  .giftfield button { padding: 0 18px; font-size: var(--t-ui); min-height: 44px; }
}

/* ---------- CTA: the site's Book Now button, exactly ---------- */
.btn { background: var(--gold); color: #fff; border-radius: var(--r-ui); font-weight: 500;
  font-size: var(--t-input); letter-spacing: .2px; text-transform: none; min-height: 52px; }
.btn:hover { filter: brightness(1.1); }
.btn.gold { background: var(--gold); color: #fff; }
.applepay { background: var(--gold); border: none; color: #fff;
  border-radius: var(--r-ui); font-weight: 500; font-size: var(--t-input); min-height: 52px; }
.applepay:hover { filter: brightness(1.1); }
/* owner, 29 Aug: "the colours need to be the same as the email it to me box". The base ghost rule
   used --navy, which is invisible on this skin's navy ground. Same tokens as .svc above. */
.applepay.ghost { background: var(--panel); border: 2px solid var(--white); color: var(--white);
  padding: 13px; }
.applepay.ghost:hover { background: var(--panel-hi); filter: none; }

/* group micro-labels */
/* owner, 29 Aug: "'WHEN IT ARRIVES / Send now' is on the left, it needs to be central."
   The delivery cards above it are a centred grid, so a left-aligned label and chip row underneath
   read as a different, unfinished section. Centred to match. */
/* owner, 29 Aug: "'Booking further ahead? Open the calendar' / 'Can't see a time that works? Join
   the waitlist' — these are not prominent enough, I think they need to be a different colour box."
   Both are the WAY OUT when the times on screen do not suit — the two things standing between a
   guest and giving up — and they were plain outline chips indistinguishable from a filter. They
   now carry the brand gold: a gold-tinted ground, a gold edge, gold text, full width so they read
   as an offer rather than a control, and 44px. Deliberately NOT solid gold: that is the Book
   button's job, and these are not the primary action on the page. */
.chip.helpchip { display: block; width: 100%; min-height: 44px; text-align: center;
  border: 2px solid var(--gold); border-radius: var(--r-ui);
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  color: var(--text); font-size: var(--t-body); line-height: 1.35; padding: 11px 16px; }
.chip.helpchip:hover:not(.on) { background: color-mix(in srgb, var(--gold) 26%, transparent);
  border-color: var(--gold); color: var(--white); }
.chip.helpchip.on { background: var(--gold); border-color: var(--gold); color: #fff; }
/* The account page's title row: heading on the left, any live warning taking the space beside it
   (owner, 29 Aug). The warning shrinks before the heading does, and wraps to its own line only
   when there is no room left — which on a 390px phone is most of the time, and correct. */
.acct-head .headrow { display: flex; align-items: baseline; flex-wrap: wrap;
  column-gap: 16px; row-gap: 8px; width: 100%; }
.acct-head .headrow h2 { flex: 0 1 auto; }
.acct-head .headrow .warnstack { flex: 1 1 300px; min-width: 0;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.acct-head .headrow .warnstack .warnline { margin: 0; font-size: var(--t-small);
  padding: 7px 12px; max-width: 100%; }
@media (max-width: 700px) { .acct-head .headrow .warnstack { align-items: stretch; } }

/* THE SPLIT CARD — one shape for every card whose whole content is "what it is, where it stands,
   and the one thing you can do about it": a signed document, a past appointment, a gift card.
   Left column carries the name and the detail line; right column carries the value (a status, a
   time, a balance) with the action directly BENEATH it.
     Owner, 29 Aug, on the document card: "the button sits really off — it needs to be on the
     right-hand side, under 'signed', so it's consistent."
     And on the rest: "the Book this again button needs to sit directly underneath the time, so
     the boxes can be smaller, and not so large… Resend by email needs to be on the right, again,
     like the appointment, directly under the cost, so this box can be smaller."
   It is smaller because it is two rows instead of three — the action stops claiming a row of its
   own with half a card of empty space beside it. */
.svc.splitcard {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 18px; row-gap: 10px; align-items: start; }
/* anything not named below — an expanded usage panel, a trailing hint — spans the whole card, so
   a card can grow a part without it landing half-width in column one */
.svc.splitcard > *      { grid-column: 1 / -1; }
.svc.splitcard > h3     { grid-area: 1 / 1; margin: 0; }
.svc.splitcard > .price { grid-area: 1 / 2; justify-self: end; }
.svc.splitcard > p:first-of-type { grid-area: 2 / 1; margin: 0; }
.svc.splitcard > .splitact { grid-area: 2 / 2; justify-self: end; align-self: start;
  white-space: nowrap; margin: 0; }
/* on a phone there is no room for a second column under the fold — the action takes its own row */
@media (max-width: 560px) {
  .svc.splitcard > p:first-of-type { grid-column: 1 / -1; }
  .svc.splitcard > .splitact { grid-area: 3 / 1 / 4 / -1; justify-self: end; }
}

/* A label INSIDE a card is an eyebrow and should be eyebrow-sized. It wasn't: `.svc p` (0,1,1)
   beat `.eyebrow` (0,1,0), so "Before we moved systems" rendered at 15px while the section
   heading above it rendered at 11.5px — the page's smallest text doing its biggest structural
   job, and the caption two boxes down shouting louder than the section it sits in. */
.svc .eyebrow { font-size: var(--t-label); color: var(--text-mut); }

/* ═══ THE ACCOUNT PAGE'S SECTION HEADINGS ═══
   Owner, 29 Aug: "customer side, account, 'PAYMENT' are way too small, it needs to be obvious
   what the section is."
   MEASURED BEFORE CHANGING ANYTHING (1440px, signed in as 07700 900123). Two faults, and only
   one of them is size:
     (a) the heading was the SMALLEST text on the page (11.5px) while doing its biggest
         structural job — under card titles at 16px and body copy at 15px;
     (b) it sat 210px LEFT of the cards it names — `#app > .svc` is capped at 720px and centred
         above 900px and the eyebrows were never added to that list. At 11.5px dim that read as
         a tick in the margin; at heading size it would read as broken.
   Neither half works without the other.

   IT STAYS UPPERCASE AT 600 — the load-bearing decision, do not "tidy" it. Sentence case at 500
   is the site's own heading recipe, which is exactly the problem: `.svc h3` is ALSO var(--t-h3),
   and the card titles here only render at 16px because each carries an inline font-size. Strip
   those — the obvious next tidy — and a sentence-case heading becomes character-for-character
   identical to the card title beneath it. A heading that matches the thing it labels is a new
   problem, not a fix. Caps + 600 keep two differences no future card size can erase.

   --t-h3 (21px), NOT --t-h2 (26px): below 640px the page title itself drops to --t-h2, so 26px
   headings would tie "Account overview" on every phone — flattening the top of the ladder while
   fixing the bottom. 21px gives a clean run at both widths: 32/21/16/15/11.5 and 26/21/16/15/11.5.

   letter-spacing .16em -> .08em. Not a redesign — .16em is a MULTIPLIER of the size being
   changed, so holding it constant nearly doubles the tracking (1.84px -> 3.36px) and the words
   stop reading as a phrase. .08em lands at 1.68px, nearest today's look, and it is measured: at
   .16em "Gift cards you've sent" renders 321px and wraps inside a 320px column on a 360px phone.

   THE HAIRLINE is this stylesheet's existing section-break idiom (.concierge, .summary .li.total,
   .cta .inner all use 1px var(--line-lo)). Everything else on this page is a rounded box; the
   seam is the only element that is a LINE, which is what gives a scanning eye somewhere to stop
   — and it is the one signal here that does not depend on type at all. 26 above / 10 below on
   purpose: a heading belongs to what follows it, not to what it has left.

   ⚠️ `!important` on the margin is not laziness — every heading carries an inline
   `style="margin:…"` whose shorthand sets margin-left/right to 0, which is exactly what blocks
   the centring. Tested: without it the size lands and the alignment silently does not. The tidy
   follow-up is to delete those inline margins from account.html and drop the !important.

   SCOPE — three independent guards, each verified rather than reasoned:
     .acctpage  written in exactly one place in the codebase (account.html's <body>). Without it,
                ~18 lead lines across the gift shop, packages, memberships and the confirmation
                screen would grow too — they are direct children of #app as well.
     #app       a second, independent exclusion of staff.html, which has no element with that id.
     >          a label INSIDE a card is not a section heading, so "Before we moved systems" stays
                11.5px. Structural, not positional: an eyebrow moved into a card is excluded
                automatically. */
.acctpage #app > .eyebrow {
  font-size: var(--t-h3);
  font-weight: 600;                /* restated: this is what keeps it clear of .svc h3's 500 */
  color: var(--white);
  letter-spacing: .08em;
  line-height: 1.3;
  border-top: 1px solid var(--line-lo);
  padding-top: 16px;
  max-width: 720px;
  margin: 26px auto 10px !important;
}
/* the first heading follows the page title, which is already a break — no seam, less air */
.acctpage #app > .eyebrow:first-of-type {
  border-top: none; padding-top: 0; margin-top: 10px !important;
}
/* and the page title joins the same column, or the heading below it would be the odd one out */
@media (min-width: 900px) { .acctpage .acct-head { max-width: 720px; margin-left: auto; margin-right: auto; } }

/* owner, 29 Aug: "there's a button for 'Book your usual…'. I like this button, the colours, we
   need to use this colour in the account section, for the likes of membership freezes,
   cancellation etc, so it's clear it's a button."
   That chip was `.chip.on` — the gold fill. Everywhere else in the app `.on` means SELECTED, but
   the account page has nothing to select: every chip on it is an action. So on this page alone,
   action chips take the gold fill and read as the buttons they are.
   ⚠️ Two exceptions, both deliberate: the .helpchip keeps its own treatment (it is an offer, not
   an action), and a past appointment's "Book this again" stays outlined — the section is a
   record, and a row of gold buttons down old visits would pull the eye to what has already
   happened rather than to what is next. */
.acctpage .chips .chip:not(.helpchip), .acctpage .splitact {
  background: var(--gold); border-color: var(--gold); color: #fff; min-height: 44px; }
.acctpage .chips .chip:not(.helpchip):hover, .acctpage .splitact:hover {
  background: color-mix(in srgb, var(--gold) 82%, #fff); border-color: var(--gold); color: #fff; }
.acctpage .pastapt .chips .chip, .acctpage .pastapt .splitact {
  background: transparent; border-color: rgba(255, 255, 255, .55); color: var(--text); }
.acctpage .pastapt .chips .chip:hover, .acctpage .pastapt .splitact:hover {
  border-color: var(--gold); color: var(--white); }
/* "Show N older appointments" is a way of looking, not an account action, and it heads a section
   deliberately kept quiet — so it takes the past register rather than the page's gold, and runs
   the full width of the column it sits under. */
/* ⚠️ `.chips.pastmore` and the :not() are both load-bearing: the page's gold rule is
   `.acctpage .chips .chip:not(.helpchip)`, and :not() carries its argument's specificity, so a
   three-class selector loses to it and the button came out gold. */
/* it is a direct child of #app, so without this it runs the full 1140px shell while the cards it
   sits under are capped at 720 and centred — the button was the right WIDTH and the wrong PLACE
   (owner, 30 Aug: "'Show 4 older appointments' is not centred to the page, it's left aligned").
   ⚠️ My own check compared its width to the card and passed; width is not position. */
/* ⚠️ the BOTTOM margin matters as much as the centring. Cards space themselves with their own
   margin-bottom, so a control between two of them has to carry the same 16px or it welds itself to
   whatever follows — measured 0px against the "Before we moved systems" card below it (owner,
   30 Aug: "there's no gap between these boxes, it looks squashed"). */
.acctpage .pastmore { margin: 10px auto 16px; max-width: 720px; }
.acctpage .chips.pastmore .chip:not(.helpchip) { width: 100%; justify-content: center;
  min-height: 44px; background: transparent; border-color: rgba(255, 255, 255, .45);
  color: var(--text); }
.acctpage .chips.pastmore .chip:not(.helpchip):hover { border-color: var(--gold);
  color: var(--white); background: transparent; }

/* "so the boxes can be smaller, and not so large" — with the action beside the detail line rather
   than under it, the generous card padding is doing nothing but adding height. Trimmed on split
   cards only; every other card on the page keeps its breathing room. */
.acctpage .svc.splitcard { padding-top: 18px; padding-bottom: 18px; }

/* a past appointment is a record, not something to act on — quieter than the live ones above it */
.svc.pastapt { border-color: rgba(255, 255, 255, .28); }
.svc.pastapt h3, .svc.pastapt .price { opacity: .82; }
.calbar { display: block; }
.calbar .chip + .chip { margin-top: 8px; }
/* owner, 29 Aug: "'Booking further ahead? Open the calendar' — the button is on the left, it needs
   to be centred to the page. The waitlist button is full page width, again this is wrong… they can
   both be the same size by the looks of it." One was capped at 720 but never centred, the other
   ran the full 1180px shell. Both now sit in the SAME centred column as everything else on the
   page, so the two ways out of a full day read as one pair rather than two strays. */
.calbar, .wloffer { max-width: 720px; margin-left: auto; margin-right: auto; }
.datewrap, .dateunder { max-width: 720px; margin-left: auto; margin-right: auto; }
/* owner, 29 Aug: "on the calendar, of any chosen date, the Morning / Afternoon / Evening and the
   times are left aligned, but I want these centre aligned to the window."
   They were the last thing on this screen still running the full 1140px shell while the strip, the
   summary box and both help chips sat in the 720px column — so the times were both wider than
   everything above them AND hung off the left edge. Measured: three 371px time buttons, which is
   not a time button, it is a banner. In the column they come out at ~233px.
   justify-content on the TRACKS, not the items, so a final row of one or two times centres under
   the full ones rather than hugging the left. */
.tgroup { max-width: 720px; margin-left: auto; margin-right: auto; }
.tglabel { text-align: center; }
/* ⚠️ FLEX, NOT GRID — and this is the second attempt, so the reasoning is worth keeping.
   A grid cannot centre a partial last row: its columns are shared by every row, so a group of
   eleven times fills three tracks and the eleventh sits in track 1, left of centre (measured: 486
   against a window centre of 720). `auto-fit` only collapses a track that is empty in EVERY row,
   which fixes a group of two and does nothing for the last row of a busy one. And auto-fit counts
   its repetitions off the track's MAX when that is definite, so minmax(96px, 130px) gave TWO
   columns on a phone where three had always fitted.
   A flex row with a computed third-of-the-width item does what was actually asked: exactly three
   across at any width, every row centred, full or not. */
/* …and the times pack from the LEFT inside it: "if a slot is not available, eg 5pm, but 7pm is
   available, 7pm needs the box on the left, aligned with the other boxes, not centred" (owner,
   29 Aug). The BLOCK is what he wanted centred — a part-empty row floating its one button to the
   middle breaks the column the eye is reading down.
   ⚠️ The Morning / Afternoon / Evening labels stay CENTRED — he withdrew that half of the change
   in the same breath ("ignore the morning afternoon evening, it can stay how it is now"). Do not
   let `.tglabel` follow `.timegrid` here; they were changed together once and it was wrong. */
.tgroup  { --tg-gap: 10px; --tg-cols: 3;
  /* a button is always a third of the COLUMN, whatever the block turns out to hold, so the
     buttons are the same size on a quiet day as on a busy one */
  --slot-w: calc((100% - var(--tg-gap) * 2) / 3); }
.timegrid { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--tg-gap);
  width: calc(var(--slot-w) * var(--tg-cols) + var(--tg-gap) * (var(--tg-cols) - 1));
  max-width: 100%; margin-left: auto; margin-right: auto; }
/* ⚠️ NOT var(--slot-w) here. A `%` inside a custom property resolves where the property is USED,
   not where it is declared — on the slot that means a percentage of .timegrid, which was itself
   sized from --slot-w, so the buttons came out 149px on a quiet day against 231px on a busy one.
   Dividing the block it actually sits in, by the same column count, is self-consistent. */
.timegrid > * { flex: 0 0 auto;
  width: calc((100% - var(--tg-gap) * (var(--tg-cols) - 1)) / var(--tg-cols)); }

/* "When it arrives" and its two chips read as one centred group, like everything above them */
.grouplabel + .chips { justify-content: center; }
.grouplabel { text-align: center; margin-top: 22px; font-size: var(--t-label); font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-mut); margin: 22px 0 9px; }
.grouplabel:first-of-type { margin-top: 14px; }
.cta { background: linear-gradient(transparent, var(--ground) 34%); }
.cta .inner { border-top: 1px solid var(--line-lo); padding-top: 14px; }
.runtotal { color: var(--text-dim); } .runtotal b { color: var(--white); font-weight: 500; }

/* ---------- confirmation ---------- */
.confirm h2 { color: var(--white); font-weight: 500; font-size: var(--t-hero); letter-spacing: -.4px; }
.confirm .tick { background: var(--gold); border: none; color: #fff; }
.confirm .ref { color: var(--text-dim); letter-spacing: .18em; }

.burnbar { background: var(--panel-hi); } .burnbar i { background: var(--gold); }

.toast { background: var(--panel); color: var(--white); border: 1.5px solid var(--line); }

/* inline navy text set in markup would vanish on the navy ground — lift it */
#app [style*="color:var(--navy)"], #app [style*="color: var(--navy)"] { color: var(--white) !important; }

@media (min-width: 900px) and (max-width: 1050px) {
  .specstrip { grid-template-columns: repeat(2, 1fr); }
  .datestrip { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 640px) {
  .hero-b { background-image: url('img/lounge-mobile.jpg'); }
  .hero-b.hero-account { background-image: url('img/journal-mobile.jpg'); }
  .stephead h2 { font-size: var(--t-h2); }
  /* the term box follows the cards it sits with, on phones too */
  .svc, .termnote { padding: 22px; border-radius: 24px; }
}

/* per-treatment description (item 99) */
.svcdesc { margin: 14px 2px 2px; font-size: var(--t-body); line-height: 1.7; color: var(--text);
  text-align: left; max-width: 62ch; }

/* ---------- THE REAL SITE HEADER (verbatim markup from the site's prerender;
   only logo src, absolute links, Explore->link and Book Now->My account changed).
   Support rules its inline styles rely on. ---------- */
.realheader { display: contents; }   /* so the header's own position:sticky works */
.topbar { display: none !important; }        /* design B uses the real header instead */
.realheader header.scheme-3 { position: sticky; top: 0; z-index: 50; background: rgba(5, 16, 43, .88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-family: var(--font-body); line-height: 1.5; }
.realheader a:hover { opacity: 1 !important; }
/* the site's own .ft-btn rules, verbatim (Archivo, not Space Grotesk; hover goes navy) */
.realheader .ft-btn { display: inline-flex; align-items: center; justify-content: center;
  gap: .75rem; white-space: nowrap; border-radius: .75rem; font-family: var(--font-body);
  font-weight: 500; font-size: var(--text-regular); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1.2; min-height: 48px;
  box-sizing: border-box;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .12s ease; }
.realheader .ft-btn--primary { background-color: #72694F; border-color: #72694F; color: #fff; }
.realheader .ft-btn--primary:hover { background-color: #05102b; border-color: #05102b; color: #fff; }
.realheader .ft-btn:active { transform: translateY(1px); }
.realheader .ft-btn--sm { padding: 0; width: 116px; }  /* Book Now's exact width, so the nav links sit at the site's exact x-positions */
.realheader nav > div > a, .realheader nav > div > span { flex: 0 0 auto; }
.realheader .material-symbols-rounded { font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal;
  text-transform: none; display: inline-block; white-space: nowrap; direction: ltr;
  font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; }
.realheader .ft-logo { width: auto; }
.realheader a[aria-label="Facebook"], .realheader a[aria-label="Instagram"] {
  width: 38px !important; height: 38px !important; }   /* the hydrated site renders 38px, not the prerender's 36 */
.realheader .ft-explore-menu { display: none !important; }
.realheader li:hover > .ft-explore-menu, .realheader .ft-explore-menu.open { display: grid !important; }
.realheader .ft-explore-menu::before { content: ""; position: absolute; top: -1.2rem; left: 0; right: 0; height: 1.3rem; }
.realheader .ft-explore-menu a:hover { background: rgba(255, 255, 255, .08); opacity: 1 !important; }
.realheader .ft-nav-burger { display: none; }
@media (max-width: 960px) {
  .realheader .ft-nav-links { display: none !important; }
  .realheader .ft-nav-burger { display: grid; }
  .realheader .ft-btn--sm { display: none; }   /* mobile: My account lives on the page */
}
.ft-drawer { position: fixed; inset: 0; z-index: 60; background: rgba(5, 16, 43, .97);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; }
.ft-drawer a { color: #fff; font-size: var(--t-h3); text-decoration: none; font-family: var(--font-heading); }
.ft-drawer .close { position: absolute; top: 22px; right: 22px; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: none; color: #fff;
  font-size: var(--t-price); cursor: pointer; }

/* item 100: expiry warnings (customer + staff) on the navy skin */
.warnline { background: #b0801f; color: #fff; border-radius: var(--r-ui); padding: 9px 14px;
  font-size: var(--t-small); font-weight: 600; margin: 8px 0 0; display: block; width: fit-content; max-width: 100%; line-height: 1.5; }
.warnline.red { background: #7a2f2f; }
.wlform select { background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-ui); color: var(--white); }
.toast.warn { background: #7a2f2f; border-color: #7a2f2f; color: #fff; }
.toast.ok { background: #2f7d4f; border-color: #2f7d4f; color: #fff; }
/* the before-you-arrive note must read on navy (owner, 28 Aug) */
.arrivenote { background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-ui);
  color: var(--text) !important; padding: 12px 14px; }
.arrivenote b { color: var(--white); }
.arrivenote .back { color: var(--text-mut); font-weight: 600; }

/* owner, 28 Aug: desktop lays the experiences out side by side like the site's pricing
   grid (3 across, 1.5rem gaps); mobile keeps the single stacked list. */
.svcgrid { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
  .shell { max-width: 1180px; }
  .svcgrid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .svcgrid .svc { margin-bottom: 0; display: flex; flex-direction: column; }
  .svcgrid .svc p { flex: 1; }
  /* only the welcome-back banner spans the full row — the shop tiles are normal cards */
  .svcgrid .usual { grid-column: 1 / -1; }
  .svcgrid .usual { margin-bottom: 0; }
  /* the flow stays readable, but the pickers fill the row like the cards above */
  .summary, .field, .policy, .giftfield,
  .chips, .hint, .empty, .addon, .credits { max-width: 720px; }
  /* owner, 29 Aug: "the other boxes are too big as well, they can be smaller on desktop, it just
     fills the screen for no reason." A card that is NOT in the service grid is a single column of
     reading — a confirmation, a term, a summary — and was running the full 1140px shell while the
     pickers beside it capped at 720. Same cap, centred, so the page reads as one column.
     ⚠️ Scoped to `#app > .svc`: the shop and service tiles live inside .svcgrid and must keep
     filling their three columns. */
  #app > .svc, .termnote, .confirm { max-width: 720px; margin-left: auto; margin-right: auto; }
  /* ...and the checkout reads as ONE CENTRED COLUMN (owner, 28 Aug: "needs to be centered
     to the page"). Before this the 720px-capped boxes hugged the left edge of the 1180px
     shell while the welcome banner and the pay button spanned its full width, so Review &
     pay looked like two ragged columns. */
  /* ⚠️ `.chips` was capped at 720px by the rule above but NOT centred by this one, so every chip
     row hugged the left edge of the 1180px shell while the fields above it sat centred. Worst
     under a .grouplabel, which IS centred: "WHEN IT ARRIVES" over "Send now / Pick a date" read
     as two different columns (owner, 6 Sept). `.grouplabel + .chips` already centres the buttons
     inside the box; the box itself was the thing out of place. */
  .summary, .field, .policy, .giftfield,
  .hint, .empty, .addon, .credits, .chips,
  .welcomeback, .holdchip, .divider, .applepay, .stack { margin-left: auto; margin-right: auto; }
  /* owner, 28 Aug: the "Your credits" block sat OUTSIDE the centred column — the eyebrow and
     the credit rows were uncapped, so on desktop they started at the left edge of the 1180px
     shell and ran wider than the summary card sitting centred above them. Wrapping them in
     .credits puts them in the same 720px column as everything else in checkout. */
  /* owner, 28 Aug: the front-desk block is NOT part of the checkout column — it closes the
     browse page, so it spans the full grid: its top rule runs edge to edge, from the left
     edge of the first card to the right edge of the last, and its content aligns left with
     them instead of floating in a narrow centred box. */
  .concierge { max-width: none; margin-left: 0; margin-right: 0; }
  /* 🚨 ONE POSITION, EVERY SCREEN: the identity box sits on the LEFT EDGE, level with the step
     heading and the back button. Owner, 5 Sept 2026, with the gift flow and the booking flow open
     side by side: the box on "Pick a time" *"needs to be in the same line as the gift card one,
     but this isnt just for contrast solo, it needs to be across everything."*

     ⚠️ This SUPERSEDES the 4 Sept rule, which anchored the box to whatever column happened to sit
     beneath it — the 720px centred column on the booking steps, the full width on the gift steps.
     That was internally consistent and it is exactly what produced the complaint: the box landed
     in two different places depending on which screen you were on, so clicking through moved it.
     The 4 Sept wording ("level with what sits under it") is retired; what the owner wanted then
     and now is the SAME PLACE every time, and the gift flow is the reference.

     It still HUGS its content — owner, 29 Aug: "the boxes need to be flexible, so the size of them
     doesn't give a lot of white space" — so only the edge is pinned, never the width.
     Below 900px it is untouched and fills the screen, which is what you want on a phone. */
  .summary.whatbox { width: fit-content; max-width: 720px;
    margin-left: 0; margin-right: auto; }
  /* `.summary.wide` (declared globally, ~line 304) opts a box out of the 720px checkout column.
     Since the default above now sits at the left edge, this is a NO-OP for a whatbox — kept only
     so the gift step's existing markup keeps working and so a plain `.summary.wide` is unaffected.
     Adding or removing `wide` on a whatbox no longer changes anything; do not reach for it. */
  .summary.whatbox.wide { margin-left: 0; margin-right: auto; }
  .summary.whatbox .li { gap: 32px; }
  .welcomeback, .applepay, .stack { max-width: 720px; }
  .applepay { display: block; }
  /* the hold countdown is an inline-block, so auto margins alone would not move it —
     it has to become a block before it can sit over the centred column */
  .holdchip { display: block; width: fit-content; }
  /* the step heading spans the row so Back sits hard right, level with the content edge */
  .stephead { max-width: none; }
  .stephead h2 { max-width: 720px; }
  /* dates: one even row across the full width, no sideways scrolling on desktop */
  /* the 7-column grid is gone — fourteen days in seven columns was two stacked rows of numbers
     (owner, 29 Aug). One scrolling row at every width; see .datewrap in proto.css. */
  .datestrip { gap: 10px; }
  /* times: three across the full width, grouped by part of the day */
  .tgroup { --tg-gap: 14px; }
  /* the spec strip spreads across the full row, never overlapping when the window narrows */
  .specstrip { max-width: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .specstrip span { text-align: center; white-space: normal; }
  .usual { max-width: 720px; }
  .svcgrid .usual { max-width: none; }   /* the welcome-back banner spans the whole row */
}
/* 🚨 owner, 29 Aug: "I don't like the calendar date selector, it's off, and it just looks
   unfinished — it shows a faded white section." That was this fade, and the bug was the scope it
   was written in: proto.css fades to --cream (a light skin's page colour) and site.css only
   corrected it BELOW 899px, from the days when the strip did not scroll on a desktop at all. Now
   that it scrolls at every width, a cream-to-transparent block was being painted over navy — a
   pale smear at the end of the row, which is exactly what it looked like. The fade must always
   match the ground it sits on, so none of these three are width-dependent any more. */
.datewrap::after { background: linear-gradient(90deg, transparent, var(--ground) 78%); }
.datenav { background: var(--gold); color: #fff; }
.datescroll { color: var(--text-dim); }

/* the website's own mobile dropdown menu (owner, 28 Aug) */
.realheader header { --color-main-dark: #05102b; --color-white-10: rgba(255,255,255,.1);
  --text-medium: 1rem; }
.ft-mobile-menu a:last-child { border-bottom: none !important; }
.ft-mobile-menu a:hover { opacity: 1 !important; }
/* the old full-screen drawer is retired */
.ft-drawer { display: none !important; }

/* month calendar on the navy skin */
.calpanel { background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-mid); }
.calhead b { color: var(--white); }
.caldow span { color: var(--text-dim); }
.calday { background: transparent; border: 1.5px solid var(--line); border-radius: var(--r-ui); }
.calday b { color: var(--white); }
.calday i { color: #7fc79b; }
.calday.on { background: var(--gold); border-color: var(--gold); }
.calday.on b, .calday.on i { color: #fff; }
.calday.none { opacity: .4; }
.calday.none i { color: var(--text-dim); }
.calday.past, .calday.empty { border-color: transparent; }
/* a day we are not open is not a day that has sold out — it reads as unavailable, not as busy
   (owner, 29 Aug). Full days stay pickable and keep their border; closed ones lose it. */
.calday.shut { opacity: .45; border-style: dashed; border-color: var(--line); }
.calday.shut i { color: var(--text-mut); }
.calday.none { cursor: pointer; }
@media (min-width: 900px) { .calpanel { max-width: 720px; margin-left: auto; margin-right: auto; } }

/* the chosen card in a pick-one grid (delivery method) reads as selected, gold-edged */
.svcgrid .svc.picked { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }

.creditrow { border: 1.5px solid var(--line); border-radius: var(--r-card); background: var(--panel); }
.creditrow.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--panel)); }
.creditrow span { color: var(--white); }
.creditrow small { color: var(--text-mut); }

.basket { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--panel)); border-radius: var(--r-card); }
.baskethead b { color: var(--white); }
.baskethead small, .basketrow { color: var(--text); }
.basketrow { border-top-color: var(--line); }

/* owner, 28 Aug: bank holidays are closed — the date reads as unavailable and cannot be picked */
.day.shut { opacity: .34; cursor: not-allowed; border-style: dashed; }
.day.shut:hover { border-color: var(--line); }

/* the waitlist card, in the site skin */
.wlbox { border: 1.5px solid var(--line-lo); border-radius: var(--r-mid); background: var(--panel); }
.wlbox b { color: var(--white); }
.wlbox p { color: var(--text-mut); }
.wlgo { background: var(--gold); color: #fff; border-radius: var(--r-ui); }
.wlwho { color: var(--text-dim); }

/* ═══ iOS SAFARI ZOOM GUARD ═══════════════════════════════════════════════════════════════════
   Owner, 5 Sept 2026: *"the whole zoom thing, not just on the waiver, is an issue on the customer
   facing side, and we need to fix it fully."*

   Safari on iOS zooms the ENTIRE PAGE when a guest taps a typable field whose font-size is under
   16px. It is not a preference and there is no way to opt out of it — `user-scalable=no` was
   ignored from iOS 10 precisely because disabling zoom breaks accessibility. 16px is the threshold,
   and one pixel under it is the whole bug. Measured 5 Sept: 17 fields across the two waivers sat at
   15px, so every guest signing on a phone had the page lurch on the first tap and stay zoomed for
   the rest of the form.

   🚨 WRITTEN AS A FLOOR, NOT A LIST. Fixing the 17 known fields would fix today and nothing else —
   the next field somebody adds at 15px reintroduces it silently, and nobody would connect a jumping
   page to a stylesheet. `max()` keeps any size ABOVE 16px exactly as designed and only lifts what
   would trip the threshold.

   ⚠️ Applies at every width, deliberately, rather than inside a mobile media query. The trigger is
   the browser, not the viewport: an iPhone in landscape is 844px wide and still zooms. Scoping it
   to a breakpoint would leave the bug alive in the orientation people actually fill forms in.
   The visual cost on desktop is one pixel on fields that were 15px. */
/* ⚠️ SPECIFICITY, AND IT HALF-WORKED FIRST TIME. Written as `input:not(...), textarea, select`,
   this fixed the inputs and left every textarea and select at 15px — the input selector carries
   three `:not()`s and outweighs `.form-control`, while bare `textarea` and `select` do not. The
   measurement caught it (17 fields → 4); reading the rule would not have. Each arm now carries
   enough weight on its own, and `:not(:disabled)` is honest rather than padding: a disabled field
   cannot take focus, so it cannot zoom anything. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea:not(:disabled),
select:not(:disabled) { font-size: max(16px, 1em); }

/* ---------- resume banner (owner, 6 Sept) ----------
   The "you were part-way through booking" message used to be a toast: text only, gone in 3.5
   seconds, no way to act on it. It is now a bar that stays until the guest chooses. */
.resumebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--panel); border-top: 1.5px solid var(--line);
  box-shadow: 0 -10px 30px rgba(0,0,0,.28); }
.rb-in { max-width: 90rem; margin: 0 auto; padding: 14px 5%;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rb-txt { flex: 1 1 260px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rb-txt b { color: var(--white); font-size: var(--t-body); font-weight: 600; }
.rb-txt span { color: var(--text-mut); font-size: var(--t-small); line-height: 1.5; }
.rb-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rb-act .btn { min-height: 44px; }
.rb-drop { min-height: 44px; padding: 0 14px; background: none; border: none;
  color: var(--text-mut); font-size: var(--t-small); font-weight: 600;
  letter-spacing: .06em; text-decoration: underline; text-underline-offset: 3px; }
.rb-drop:hover { color: var(--white); }
@media (max-width: 560px) {
  /* one row, not two: stacked, the bar took 214px — a quarter of a 390x844 screen — for a
     message that has to sit above the page without owning it */
  .rb-in { padding: 12px 5% 14px; gap: 10px; }
  .rb-act { width: 100%; flex-wrap: nowrap; gap: 8px; }
  .rb-act .btn { flex: 1 1 auto; font-size: var(--t-body); padding: 0 12px; }
  .rb-drop { flex: 0 0 auto; white-space: nowrap; padding: 0 4px; }
}