/* ============================================================
   BlueSystm — funnel.css
   The four post-quiz / paid-traffic pages and the booking card they share:
     /quiz/result       quiz-result.html      (Q1, end of the quiz)
     /quiz/projection   quiz-projection.html  (Q2, the result's CTA and the SMS link)
     /book              book.html             (Q3, the ad landing page)
     /book/requested    book-requested.html   (Q4, after the booking card)
   Ported from Design's "Funnel Q1–Q4" and "BookingWidget" (.dc.html, project
   0d63ee4f, 2026-09-30): every inline style there became a class rule here,
   values unchanged. Tokens from tokens.css. The header is the QUIZ's header
   (quiz.css .q1–.q5), not Design's logo-only bar: David keeps the quiz's
   entry system on every funnel page — "Back to site" and a clickable logo
   when the reader came from the site, nothing to leave by on ad traffic.

   Hover rules sit behind @media (hover: hover): a finger has no hover, and on
   iOS a hover latches after the tap — the same rule the quiz applies in JS.
   ============================================================ */

/* ── reset (Design's, verbatim) ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 24px; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--body); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--blue); text-decoration: none; }
/* Hovers live behind (hover: hover) and (pointer: fine): a finger has no hover,
   and on a phone a tap leaves the hover style on until the next tap elsewhere. */
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--blue-hover); } }
::selection { background: var(--blue-tint); }
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
:where(button) { font: inherit; }

/* ── the shell ── */
.fn-page { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }
.fn-main { width: 100%; margin: 0 auto; padding: clamp(32px, 6vh, 64px) 24px 0; }
.fn-main--result { flex: 1; max-width: 760px; padding-bottom: var(--sp-9); text-align: center; }
.fn-main--projection { max-width: 1008px; }
.fn-main--book { max-width: 1168px; }
.fn-main--requested { max-width: 808px; }
.fn-gap { height: var(--sp-9); }

/* The quiz's header: quiz.css .q1 (bar), .q2/.q3 (the logo crop), .q5 (exit).
   Full width with the quiz's 48px gutters — Design's bar was capped at 1280px
   and centred, which put the logo inboard of the quiz's on a wide screen
   (David, 2026-09-30: "less wide than the quiz"). */
.fn-header { position: relative; z-index: 2; width: 100%; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 62px; padding: 0 var(--sp-7); }
.fn-brand { display: flex; align-items: center; flex-shrink: 0; height: 40px; margin-left: -4px; overflow: hidden; }
.fn-brand img { height: 142px; width: auto; margin: 1px -14px 0 -16px; }
/* Hidden by the sheet; the shell script turns it on inline for site entry,
   exactly as quiz-behaviors.js does for #exitLink. */
.fn-exit { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border-width: 1px; border-style: solid; border-color: var(--border); border-radius: var(--r-pill); background: rgba(255,255,255,.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--muted); transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
@media (hover: hover) { .fn-exit:hover { color: var(--blue); border-color: var(--blue); } }
@media (max-width: 767px) {
  .fn-header { height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 20px 0; }
  .fn-exit { padding: 0 14px; }
}

/* Vince's footer: one row, wraps on narrow screens. */
.fn-footer { width: 100%; max-width: 1120px; margin: 0 auto; padding: var(--sp-6) 24px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-6); flex-wrap: wrap; font-size: var(--fs-small); color: var(--muted); }
.fn-footer-left { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.fn-footer-brand { display: flex; align-items: center; height: 30px; overflow: hidden; }
.fn-footer-brand img { height: 108px; width: auto; margin: 0 -11px 0 -12px; }
.fn-footer-right { display: flex; align-items: center; gap: var(--sp-5); }
.fn-footer-right a { color: var(--muted); transition: color var(--dur-fast) var(--ease-standard); }
/* A 44px hit box on both policy links without moving the row: min-height and
   side padding grow the box, the negative margins hand the space back. */
.fn-footer-right a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin: -13px -4px; }
@media (hover: hover) { .fn-footer-right a:hover { color: var(--blue); } }

/* ── shared atoms ── */
.fn-eyebrow { display: block; font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); font-weight: var(--fw-eyebrow); text-transform: uppercase; color: var(--blue); }
.fn-eyebrow--muted { color: var(--muted); }
.fn-blue { color: var(--blue); }

/* The site's glow button, verbatim from index.html / revenue-cta.css. */
.glow-btn { position: relative; display: inline-flex; align-items: center; gap: var(--sp-3); background: var(--blue); color: #FFFFFF; font-weight: 600; font-size: var(--fs-body); letter-spacing: var(--ls-wide); text-transform: uppercase; padding: var(--sp-5) var(--sp-7); border-radius: var(--r-pill); border: none; cursor: pointer; text-decoration: none; transition: all var(--dur-base) var(--ease-standard); box-shadow: var(--glow); }
@media (hover: hover) and (pointer: fine) { .glow-btn:hover { color: #FFFFFF; transform: translateY(-2px) scale(1.03); box-shadow: var(--glow); } }
.glow-btn-arrow { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: rgba(255,255,255,0.15); border-radius: 50%; transition: transform var(--dur-fast) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { .glow-btn:hover .glow-btn-arrow { transform: translateX(3px); } }

/* The video placeholder (Q2: Dave, Q4: Vince). Swap in the real video. */
.fn-video { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--r-lg); background: var(--dark); box-shadow: var(--e4); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-5); cursor: pointer; transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
@media (hover: hover) { .fn-video:hover { transform: translateY(-4px); } }
.fn-play { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); box-shadow: var(--glow); margin-bottom: var(--sp-2); }
.fn-play--sm { width: 72px; height: 72px; }
.fn-video-title { font-size: clamp(18px, 2.4vw, 24px); letter-spacing: var(--ls-snug); font-weight: 700; color: #FFFFFF; }
.fn-video-title--sm { font-size: clamp(18px, 2.4vw, 22px); }
.fn-video-sub { font-size: var(--fs-small); color: #C4C9D4; }

/* Vince's sign-off row. */
.fn-signoff { display: flex; align-items: center; gap: var(--sp-3); }
.fn-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-tint); color: var(--blue); font-size: var(--fs-lead); font-weight: 800; }
.fn-signoff-text { display: flex; flex-direction: column; line-height: 1.35; }
.fn-signoff-text strong { font-size: var(--fs-body); font-weight: 700; color: var(--dark); }
.fn-signoff-text span { font-size: var(--fs-small); color: var(--muted); }

/* The mobile sticky CTA (Q2 below 840px, Q3 below 880px). Slides in; the
   page script owns .is-on — hidden while the card is on screen or a field
   has focus. The spacer keeps the footer clear of it. */
.fn-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-overlay); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 12px 20px max(12px, env(safe-area-inset-bottom)); background: var(--frost); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--border); transform: translateY(110%); transition: transform var(--dur-base) var(--ease-out); }
.fn-bar.is-on { transform: translateY(0); }
.fn-bar-text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.fn-bar-text strong { font-size: var(--fs-small); font-weight: 700; color: var(--dark); }
.fn-bar-text span { font-size: 12px; color: var(--muted); }
.fn-bar-btn { flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 20px; border-radius: var(--r-pill); background: var(--blue); color: #FFFFFF; font-size: 12px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; box-shadow: var(--e2); }
@media (hover: hover) and (pointer: fine) { .fn-bar-btn:hover { color: #FFFFFF; } }
.fn-bar-btn:active { transform: scale(0.97); }
.fn-bar-spacer { height: 0; }
@media (max-width: 839px) { .fn-bar-spacer--projection { height: 72px; } }
@media (max-width: 879px) { .fn-bar-spacer--book { height: 72px; } }

/* ── Q1: the quiz result ── */
.qr-h1 { margin: var(--sp-4) auto 0; max-width: 620px; font-size: clamp(30px, 4.2vw, 44px); line-height: 1.1; letter-spacing: var(--ls-snug); font-weight: 700; color: var(--dark); text-wrap: balance; }
.qr-num-wrap { margin-top: var(--sp-6); display: flex; flex-direction: column; align-items: center; }
.qr-num { font-size: clamp(128px, 20vw, 192px); line-height: .88; font-weight: 900; letter-spacing: -0.05em; color: var(--blue); font-variant-numeric: tabular-nums; }
.qr-unit { margin: var(--sp-5) 0 0; font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-snug); font-weight: 600; color: var(--dark); }
.qr-gap { margin-top: var(--sp-5); display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-pill); box-shadow: var(--e2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.qr-gap[hidden] { display: none; }
.qr-gap-label { font-size: 11px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--muted); }
.qr-gap-val { font-size: var(--fs-small); font-weight: 700; letter-spacing: var(--ls-snug); color: var(--blue); }
.qr-lead { margin: var(--sp-6) auto 0; max-width: 500px; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--body); text-wrap: pretty; }
.qr-lead strong { font-weight: 700; color: var(--dark); }
.qr-next { margin: var(--sp-7) auto 0; padding-top: var(--sp-6); max-width: 520px; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); }
.qr-next-copy { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--muted); text-wrap: balance; }
.qr-note { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
.qr-fine { margin: var(--sp-7) 0 0; font-size: 12px; color: var(--muted); }

/* ── Q2: the projection ── */
.qp-intro { text-align: center; }
.qp-h1 { margin: var(--sp-4) auto 0; max-width: 820px; font-size: clamp(36px, 5.2vw, 56px); line-height: 1.04; letter-spacing: var(--ls-tight); font-weight: 800; color: var(--dark); text-wrap: balance; }
.qp-lead { margin: var(--sp-5) auto 0; max-width: 640px; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--body); text-wrap: pretty; }
.qp-lead strong { font-weight: 700; color: var(--dark); }

/* The calculator card. */
.qp-card { margin: var(--sp-7) auto 0; max-width: 880px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--e3); overflow: hidden; }
.qp-card[hidden] { display: none; }
.qp-split { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.qp-col { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--sp-6) var(--sp-4) var(--sp-7); }
.qp-col--ours { background: var(--blue-tint); border-left: 1px solid rgba(37,99,235,.16); }
.qp-col-label { font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); font-weight: var(--fw-eyebrow); text-transform: uppercase; color: var(--muted); }
.qp-col--ours .qp-col-label { color: var(--blue); }
.qp-col-num { margin-top: var(--sp-3); font-size: clamp(56px, 9vw, 88px); line-height: .95; letter-spacing: -0.04em; font-weight: 800; color: var(--body); font-variant-numeric: tabular-nums; }
.qp-col--ours .qp-col-num { letter-spacing: -0.05em; font-weight: 900; color: var(--blue); }
.qp-col-unit { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--muted); }
.qp-col--ours .qp-col-unit { color: var(--dark); font-weight: 500; }
/* Two elements, on purpose: the wrapper is positioned on the divider with a
   translate, the pill inside it is what the pop animation scales. One
   element would lose its translate for the length of the animation. */
.qp-gap { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); z-index: 2; }
.qp-gap[hidden] { display: none; }
.qp-gap-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-pill); box-shadow: var(--e2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.qp-gap-label { font-size: 11px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--muted); }
.qp-gap-val { font-size: var(--fs-small); font-weight: 700; letter-spacing: var(--ls-snug); color: var(--blue); }

.qp-slider { padding: var(--sp-7) clamp(20px, 4vw, 40px) var(--sp-5); border-top: 1px solid var(--border); }
.qp-slider-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); }
.qp-slider-text { min-width: 0; }
.qp-slider-label { display: block; font-size: var(--fs-body); font-weight: 700; letter-spacing: var(--ls-snug); color: var(--dark); }
.qp-slider-sub { margin: 2px 0 0; font-size: var(--fs-small); color: var(--muted); }
.qp-slider-val { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.qp-slider-out { font-size: clamp(24px, 3vw, 32px); line-height: 1; font-weight: 800; letter-spacing: var(--ls-tight); color: var(--dark); }
.qp-slider-unit { font-size: 13px; font-weight: 600; color: var(--muted); }
/* The custom track: rail, fill, crew-full mark, thumb, and the native range
   input on top at opacity 0 for the hit area and the keyboard.
   Nothing on it is laid out per frame. The fill is the rail's full width,
   clipped by the rail and slid in with translateX, so its rounded end stays
   round (scaleX would squash it). The thumb rides .qp-thumb-run, a box the
   size of the track, and translateX(p%) of that box is exactly left: p% of
   the track. funnel-projection.js writes the two transforms. */
.qp-track { position: relative; margin-top: var(--sp-5); padding-top: 22px; height: 52px; }
.qp-rail { position: absolute; left: 0; right: 0; bottom: 14px; height: 6px; border-radius: 999px; background: rgba(11,16,34,.10); overflow: hidden; }
.qp-fill { position: absolute; inset: 0; border-radius: 999px; background: var(--blue); transform: translateX(-100%); }
.qp-thumb-run { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.qp-mark { position: absolute; bottom: 20px; left: 33%; width: 3px; height: 14px; border-radius: 2px; transform: translateX(-50%); background: rgba(11,16,34,.28); transition: background-color var(--dur-fast) var(--ease-standard); }
.qp-mark[hidden] { display: none; }
.qp-mark-tag { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; white-space: nowrap; color: var(--muted); transition: color var(--dur-fast) var(--ease-standard); }
.qp-mark.is-crossed { background: var(--blue); }
.qp-mark.is-crossed .qp-mark-tag { color: var(--blue); }
.qp-thumb { position: absolute; bottom: 17px; left: 0; width: 26px; height: 26px; transform: translate(-50%, 50%); border-radius: 50%; background: var(--blue); border: 3px solid #FFFFFF; box-shadow: var(--e2); pointer-events: none; z-index: 1; }
.qp-range { position: absolute; left: -13px; right: -13px; bottom: 0; width: calc(100% + 26px); height: 44px; margin: 0; opacity: 0; cursor: grab; z-index: 2; touch-action: pan-y; -webkit-appearance: none; appearance: none; background: transparent; }
.qp-range:active { cursor: grabbing; }
.qp-track-labels { margin-top: var(--sp-2); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.qp-reset { position: relative; min-height: 36px; padding: 0 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-pill); font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--blue); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-standard), transform var(--dur-micro) var(--ease-standard); }
@media (hover: hover) { .qp-reset:hover { border-color: var(--blue); } }
/* The pill stays 36px; its hit box is 44 (5px past the padding box, 4 past the border). */
.qp-reset::before { content: ''; position: absolute; inset: -5px 0; }
.qp-reset:active { transform: scale(0.97); }
.qp-track-note { margin: var(--sp-3) 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; }

/* The breakdown accordion. */
.qp-bd { border-top: 1px solid var(--border); padding: 0 clamp(20px, 4vw, 40px); }
.qp-bd-btn { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 0; background: none; border: 0; font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; color: var(--dark); text-align: left; cursor: pointer; }
.qp-bd-icon { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-tint); color: var(--blue); transition: transform var(--dur-base) var(--ease-standard); }
.qp-bd-btn[aria-expanded="true"] .qp-bd-icon { transform: rotate(45deg); }
.qp-bd-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-standard); }
.qp-bd-wrap.is-open { grid-template-rows: 1fr; }
.qp-bd-inner { overflow: hidden; min-height: 0; }
.qp-table { font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.qp-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-3); padding: 12px 0; border-top: 1px solid var(--border); }
.qp-row--head { padding: 10px 0; }
.qp-th { font-size: 11px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--muted); }
.qp-th--right { text-align: right; }
.qp-th--ours { text-align: right; color: var(--blue); }
.qp-rowhead { color: var(--body); }
.qp-cell { text-align: right; font-weight: 600; color: var(--body); }
.qp-cell--ours { text-align: right; font-weight: 800; color: var(--blue); }
.qp-cap { padding: var(--sp-4) 0 var(--sp-5); border-top: 1px solid var(--border); }
.qp-cap-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.qp-cap-label { font-size: 11px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--muted); }
.qp-cap-line { font-size: var(--fs-small); font-weight: 700; color: var(--dark); font-variant-numeric: tabular-nums; }
.qp-cap-bar { position: relative; margin-top: var(--sp-2); height: 6px; border-radius: 999px; background: rgba(11,16,34,.08); overflow: hidden; }
/* Full width, clipped by the bar and slid in: a transform, never a width, and
   the rounded end stays round (scaleX would squash it). */
.qp-cap-fill { position: absolute; inset: 0; border-radius: 999px; background: var(--blue); transform: translateX(-100%); transition: transform var(--dur-base) var(--ease-standard); }
.qp-cap-copy { margin: var(--sp-3) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
.qp-disclosure { margin: var(--sp-4) auto 0; max-width: 880px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--muted); }
.qp-disclosure[hidden] { display: none; }

/* The video section. */
.qp-watch { margin: var(--sp-9) auto 0; max-width: 880px; text-align: center; }
.qp-h2 { margin: 0; font-size: clamp(30px, 4vw, 40px); line-height: var(--lh-h2); letter-spacing: var(--ls-snug); font-weight: 800; color: var(--dark); text-wrap: balance; }
.qp-watch-copy { margin: var(--sp-4) auto 0; max-width: 620px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--body); text-wrap: pretty; }
.qp-watch .fn-video { margin-top: var(--sp-6); }

/* The book section: copy beside the card, copy below it under 840px. */
.qp-book { margin-top: var(--sp-9); display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-7); scroll-margin-top: 24px; }
.qp-book-copy { flex: 1 1 300px; min-width: 0; position: sticky; top: 32px; order: 1; }
.qp-book-copy h2 { margin: var(--sp-3) 0 0; font-size: clamp(30px, 4vw, 40px); line-height: var(--lh-h2); letter-spacing: var(--ls-snug); font-weight: 800; color: var(--dark); }
.qp-book-copy > p { margin: var(--sp-5) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--body); text-wrap: pretty; }
.qp-book-copy > p + p { margin-top: var(--sp-4); }
.qp-book-copy > p.qp-reassure { margin-top: var(--sp-5); padding: var(--sp-4) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--muted); }
.qp-reassure strong { font-weight: 700; color: var(--dark); }
.qp-book-copy .fn-signoff { margin-top: var(--sp-5); }
.qp-widget { flex: 1.5 1 440px; min-width: 0; order: 2; }
@media (max-width: 839px) { .qp-book-copy { position: static; order: 3; } }
.qp-faq { margin: var(--sp-9) auto 0; max-width: 880px; }

/* The site's FAQ accordion, verbatim from index.html — plus the one fix
   Design flagged: .faq-q is `all: unset`, so it must say border-box itself
   or its 100% width plus padding overflows the card and slices the icon off. */
.faq-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item { position: relative; z-index: 1; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; will-change: transform; transform: scale(1); transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
@media (hover: hover) { .faq-item:hover { z-index: 5; border-color: var(--blue); box-shadow: var(--e3); transform: scale(1.03); } }
.faq-item.open { z-index: 2; border-color: var(--blue); box-shadow: var(--e3); }
@media (hover: hover) { .faq-item.open:hover { z-index: 5; border-color: var(--blue); box-shadow: var(--e4); transform: scale(1.03); } }
.faq-q { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); width: 100%; padding: var(--sp-5) var(--sp-6); cursor: pointer; font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h4); color: var(--dark); letter-spacing: var(--ls-snug); line-height: 1.35; transition: color var(--dur-fast) var(--ease-standard); }
.faq-q:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; }
@media (hover: hover) { .faq-q:hover { color: var(--blue); } }
.faq-item.open .faq-q { color: var(--dark); padding-bottom: var(--sp-4); }
.faq-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--r-pill); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; position: relative; transition: all var(--dur-base) var(--ease-standard); background: var(--card); }
@media (hover: hover) { .faq-q:hover .faq-icon { border-color: var(--blue); } }
.faq-item.open .faq-icon { background: var(--blue); border-color: var(--blue); transform: rotate(45deg); }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: var(--muted); transition: background var(--dur-fast) var(--ease-standard); border-radius: 2px; }
.faq-icon::before { width: 13px; height: 1.5px; }
.faq-icon::after { width: 1.5px; height: 13px; }
@media (hover: hover) { .faq-q:hover .faq-icon::before, .faq-q:hover .faq-icon::after { background: var(--blue); } }
.faq-item.open .faq-icon::before, .faq-item.open .faq-icon::after { background: var(--card); }
.faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-standard); }
.faq-item.open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a { overflow: hidden; min-height: 0; }
.faq-a-inner { padding: 0 var(--sp-6) var(--sp-6); max-width: 720px; }
.faq-a-inner::before { content: ''; display: block; height: 1px; background: var(--border); margin-bottom: var(--sp-5); }
.faq-a-inner p { font-family: var(--font-sans); font-size: var(--fs-body); color: var(--body); line-height: 1.7; margin: 0 0 var(--sp-3); }
.faq-a-inner p:last-child { margin: 0; }
@media (max-width: 720px) {
  .faq-q { font-size: var(--fs-body); padding: var(--sp-5) var(--sp-5); gap: var(--sp-4); }
  .faq-icon { width: 32px; height: 32px; }
  .faq-icon::before { width: 11px; }
  .faq-icon::after { height: 11px; }
  .faq-a-inner { padding: 0 var(--sp-5) var(--sp-5); }
}

/* ── Q3: the ad landing page ── */
.bk-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(32px, 6vw, 72px); }
.bk-intro { flex: 1 1 360px; min-width: 0; padding-top: var(--sp-3); position: sticky; top: 32px; }
.bk-h1 { margin: var(--sp-5) 0 0; max-width: 540px; font-size: clamp(40px, 5.4vw, 60px); line-height: 1.02; letter-spacing: var(--ls-tight); font-weight: 800; color: var(--dark); text-wrap: balance; }
.bk-lead { margin: var(--sp-5) 0 0; max-width: 470px; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--body); text-wrap: pretty; }
.bk-desc { margin: var(--sp-4) 0 0; max-width: 470px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--muted); text-wrap: pretty; }
.bk-signoff { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); max-width: 470px; }
.bk-book { flex: 1 1 460px; min-width: 0; scroll-margin-top: 24px; }
.bk-book-head { margin-bottom: var(--sp-4); display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.bk-book-head h2 { margin: 0; font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-snug); font-weight: 700; color: var(--dark); }
.bk-book-head p { margin: 0; font-size: var(--fs-small); color: var(--muted); }
/* The card is drawn by funnel-book.js, and on a slow first load the page can
   paint before the module runs: "What we'll cover" painted 623px too high and
   jumped when the card arrived (CLS 0.196 at 768). The host keeps the card's
   settled height from the first paint: 623px is the time step with a
   five-row month at every width from 420px up (below that the cover is under
   the fold before the card mounts). A six-row month is 48px taller and only
   that much can still move. */
@media (min-width: 420px) { .bk-book #bookingHost { min-height: 623px; } }
.bk-cover { margin-top: var(--sp-9); padding-top: var(--sp-7); border-top: 1px solid var(--border); }
.bk-cover-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4) var(--sp-7); }
.bk-cover-head h2 { margin: 0; font-size: clamp(30px, 4vw, 40px); line-height: var(--lh-h2); letter-spacing: var(--ls-snug); font-weight: 800; color: var(--dark); }
.bk-cover-head p { margin: 0; max-width: 420px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--muted); text-wrap: pretty; }
.bk-topics { margin-top: var(--sp-6); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--sp-5); }
.bk-topic { padding: var(--sp-6); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--e2); transition: box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
@media (hover: hover) { .bk-topic:hover { box-shadow: var(--e3); transform: translateY(-4px); } }
.bk-topic-n { display: block; font-size: var(--fs-small); font-weight: 700; letter-spacing: var(--ls-wide); color: var(--blue); font-variant-numeric: tabular-nums; }
.bk-topic h3 { margin: var(--sp-5) 0 0; font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-snug); font-weight: 700; color: var(--dark); }
.bk-topic p { margin: var(--sp-3) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--muted); text-wrap: pretty; }
@media (max-width: 879px) { .bk-intro { position: static; } }

/* ── Q4: call requested ── */
.rq-intro { text-align: center; }
.rq-check { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--blue); box-shadow: var(--glow); }
.rq-intro .fn-eyebrow { margin-top: var(--sp-6); }
.rq-h1 { margin: var(--sp-4) auto 0; font-size: clamp(36px, 5.2vw, 52px); line-height: var(--lh-h1); letter-spacing: var(--ls-tight); font-weight: 800; color: var(--dark); text-wrap: balance; }
.rq-greeting { margin: var(--sp-4) auto 0; max-width: 560px; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--body); text-wrap: pretty; }
.rq-watch { margin-top: var(--sp-8); text-align: center; }
.rq-h2 { margin: 0; font-size: clamp(28px, 3.6vw, 36px); line-height: var(--lh-h2); letter-spacing: var(--ls-snug); font-weight: 800; color: var(--dark); text-wrap: balance; }
.rq-watch-copy { margin: var(--sp-4) auto 0; max-width: 540px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--body); text-wrap: pretty; }
.rq-watch .fn-video { margin-top: var(--sp-6); }
.rq-summary { margin-top: var(--sp-7); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--e3); overflow: hidden; }
.rq-sum-head { padding: var(--sp-5) clamp(20px, 4vw, 32px); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.rq-sum-head h2 { margin: 0; font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-snug); font-weight: 700; color: var(--dark); }
.rq-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--green-tint); font-size: 11px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--dark); }
.rq-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.rq-sum-body { padding: var(--sp-5) clamp(20px, 4vw, 32px); display: flex; align-items: center; gap: var(--sp-5); }
.rq-tile { flex: none; width: 76px; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; text-align: center; background: var(--card); box-shadow: var(--e1); }
.rq-tile-mon { display: block; padding: 4px 0; background: var(--blue); color: #FFFFFF; font-size: 11px; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; }
.rq-tile-day { display: block; padding: 6px 0 8px; font-size: 32px; line-height: 1.1; font-weight: 800; letter-spacing: var(--ls-tight); color: var(--dark); font-variant-numeric: tabular-nums; }
.rq-sum-text { min-width: 0; }
.rq-date { display: block; font-size: var(--fs-lead); line-height: 1.35; font-weight: 700; letter-spacing: var(--ls-snug); color: var(--dark); }
.rq-time { display: block; margin-top: 2px; font-size: var(--fs-body); color: var(--body); font-variant-numeric: tabular-nums; }
.rq-person { display: block; margin-top: 4px; font-size: var(--fs-small); color: var(--muted); }
.rq-invite { margin: 0 clamp(20px, 4vw, 32px); padding: var(--sp-4) 0; border-top: 1px solid var(--border); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--muted); text-wrap: pretty; }
.rq-cal { margin: 0 clamp(20px, 4vw, 32px); padding-bottom: var(--sp-4); }
.rq-cal-btn { width: 100%; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); background: var(--blue); color: #FFFFFF; border: 0; border-radius: var(--r-pill); font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; cursor: pointer; box-shadow: var(--e2); transition: background var(--dur-micro) var(--ease-standard), transform var(--dur-micro) var(--ease-standard); }
@media (hover: hover) { .rq-cal-btn:hover { background: var(--blue-hover); } }
.rq-cal-btn:active { transform: scale(0.97); }
.rq-cal-icon { display: inline-flex; transition: transform var(--dur-base) var(--ease-standard); }
.rq-cal-btn[aria-expanded="true"] .rq-cal-icon { transform: rotate(45deg); }
.rq-cal-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-standard); }
.rq-cal-wrap.is-open { grid-template-rows: 1fr; }
.rq-cal-inner { overflow: hidden; min-height: 0; }
.rq-cal-menu { margin-top: var(--sp-2); padding: var(--sp-2); display: grid; gap: 4px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); }
.rq-cal-link { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 48px; padding: 8px 12px; border-radius: var(--r-sm); font-size: var(--fs-small); font-weight: 600; color: var(--dark); transition: background var(--dur-micro) var(--ease-standard), color var(--dur-micro) var(--ease-standard); }
@media (hover: hover) { .rq-cal-link:hover { background: var(--blue-tint); color: var(--blue); } }
.rq-cal-link span { color: var(--blue); }
.rq-cal-note { margin: 0; padding: 8px 12px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.rq-change-row { margin-top: var(--sp-2); display: flex; justify-content: center; }
.rq-change { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; font-size: var(--fs-small); font-weight: 600; color: var(--blue); }
.rq-panel { margin-top: var(--sp-8); padding: var(--sp-6) clamp(20px, 4vw, 32px); background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--r-lg); box-shadow: var(--panel-inset); }
.rq-panel h2 { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-snug); font-weight: 800; color: var(--dark); }
.rq-panel p { margin: var(--sp-4) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--body); text-wrap: pretty; }
.rq-panel p.rq-panel-strong { margin-top: var(--sp-3); font-weight: 600; color: var(--dark); }

/* ── Q5: the change page, /book?change=<token> ──
   Design: "Funnel Q5 Change Call Time.dc.html" (2026-10-18). book.html's
   second <main> (data-view="change"). The picker card IS the booking card
   (mountBooking's change template in funnel-booking.js), so its calendar,
   slots, arrows, time-zone menu, hover/active states and focus rings are the
   bw- rules below; the cx- rules here are the design's inline styles for
   everything the booking card doesn't have, its style-hover / style-active /
   style-focus as :hover (on hover-capable screens), :active and :focus. Where
   the site adds a state the design doesn't draw, the rule says so. */
/* While funnel-book.js reads the call, the header and the booking page are kept
   invisible (their space kept), so the page can then enter the way /book
   does. If the script never lifts the hold (it failed to load), they show
   after 6 seconds. */
html[data-view-wait] .fn-header, html[data-view-wait] .fn-main--book { visibility: hidden; animation: cx-wait-lift 0s linear 6s forwards; }
@keyframes cx-wait-lift { to { visibility: visible; } }
/* Several cx- rules set a display; [hidden] must still win inside the view. */
.cx-main [hidden] { display: none !important; }
.cx-main { width: 100%; max-width: 1168px; margin: 0 auto; padding: clamp(32px, 6vh, 64px) 24px 0; }
/* The two cards' bottom edges line up (the owner, 2026-10-18): the columns
   stretch to one height, the booked call sits at the foot of the left column
   (never closer than --sp-6 under the lead, the design's gap), and the right
   card fills its column. This replaces the design's sticky left column. When
   the columns stack (narrow screens) each keeps its own height: no change. */
.cx-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(32px, 6vw, 72px); }
/* The left column stays put while the picker scrolls, as the design has it (sticky from
   880px, static below); its card's extra top margin is measured on load by funnel-book.js
   so the two cards' bottom edges line up when the page opens. */
.cx-intro { flex: 1 1 360px; min-width: 0; padding-top: var(--sp-3); }
@media (min-width: 880px) { .cx-intro { position: sticky; top: 32px; } }
.cx-intro > .cx-card { margin-top: var(--sp-6); }
.cx-eyebrow { display: block; font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); font-weight: var(--fw-eyebrow); text-transform: uppercase; color: var(--blue); }
.cx-h1 { margin: var(--sp-5) 0 0; max-width: 520px; font-size: clamp(36px, 4.6vw, 52px); line-height: 1.04; letter-spacing: var(--ls-tight); font-weight: 800; color: var(--dark); text-wrap: balance; }
.cx-blue { color: var(--blue); }
.cx-lead { margin: var(--sp-5) 0 0; max-width: 470px; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--body); text-wrap: pretty; }

/* the booked call (left) */
.cx-card { max-width: 470px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--e2); overflow: hidden; }
.cx-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.cx-card-label { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); font-weight: var(--fw-eyebrow); text-transform: uppercase; color: var(--muted); }
.cx-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; }
.cx-pill--booked { background: var(--green-tint); color: var(--dark); }
.cx-pill--moved { background: var(--blue-tint); color: var(--blue); }
.cx-pill--cancelled { background: var(--bg); border: 1px solid var(--border); color: var(--muted); }
.cx-pill-dot { width: 6px; height: 6px; border-radius: 50%; }
.cx-pill-dot--booked { background: var(--green); }
.cx-pill-dot--moved { background: var(--blue); }
.cx-when { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5); }
.cx-tile { flex: none; width: 64px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); text-align: center; background: var(--card); }
.cx-tile-mon { display: block; padding: 4px 0; background: var(--blue); color: #FFFFFF; font-size: 11px; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; }
.cx-tile-day { display: block; padding: 6px 0 8px; font-size: 26px; line-height: 1.1; font-weight: 800; letter-spacing: var(--ls-snug); color: var(--dark); font-variant-numeric: tabular-nums; }
.cx-when-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cx-cur-date { font-size: var(--fs-lead); line-height: 1.3; letter-spacing: var(--ls-snug); font-weight: 700; color: var(--dark); }
.cx-cur-time { font-size: var(--fs-body); color: var(--body); font-variant-numeric: tabular-nums; }
.cx-when.is-cancelled .cx-cur-date { color: var(--muted); text-decoration: line-through; }
.cx-when.is-cancelled .cx-cur-time { text-decoration: line-through; }
.cx-cur-meta { font-size: var(--fs-small); color: var(--muted); }
.cx-prev { margin: 0; padding: 0 var(--sp-5) var(--sp-4); font-size: var(--fs-small); color: var(--muted); }
.cx-strike { text-decoration: line-through; }
.cx-pending { margin: 0 var(--sp-5) var(--sp-5); padding: var(--sp-3) var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); background: var(--blue-tint); border: 1px solid rgba(37,99,235,.18); border-radius: var(--r-md); }
.cx-pending-icon { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #FFFFFF; }
.cx-pending-text { min-width: 0; }
.cx-pending-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--blue); }
.cx-pending-line { display: block; margin-top: 2px; font-size: var(--fs-small); font-weight: 700; color: var(--dark); font-variant-numeric: tabular-nums; }
.cx-dl { margin: 0; padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3) var(--sp-5); font-size: var(--fs-small); }
.cx-dt { color: var(--muted); }
.cx-dd { margin: 0; color: var(--dark); font-weight: 600; overflow-wrap: anywhere; }
.cx-dd-contact { margin: 0; display: flex; flex-direction: column; gap: 2px; color: var(--dark); overflow-wrap: anywhere; }
.cx-num { font-variant-numeric: tabular-nums; }
.cx-cancel { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); font-size: var(--fs-small); color: var(--muted); }
.cx-cancel-link { padding: 0; background: none; border: 0; font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; color: var(--blue); cursor: pointer; }
@media (hover: hover) { .cx-cancel-link:hover { color: var(--blue-hover); } }
.cx-confirm { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.cx-confirm-q { font-size: var(--fs-small); font-weight: 600; color: var(--dark); }
.cx-confirm-btns { display: flex; gap: var(--sp-2); }
.cx-keep { min-height: 40px; padding: 0 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-pill); font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--dark); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-standard); }
@media (hover: hover) { .cx-keep:hover { border-color: var(--blue); } }
.cx-keep:active { transform: scale(0.97); }
.cx-yes { min-height: 40px; padding: 0 16px; background: var(--dark); border: 1px solid var(--dark); border-radius: var(--r-pill); font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: #FFFFFF; cursor: pointer; }
.cx-yes:not(:disabled):active { transform: scale(0.97); }
/* Not drawn in the design: the cancel on its way (the booking card's sending
   look), and a cancel that failed (one line across the row, the error colour). */
.cx-yes:disabled { opacity: .6; cursor: wait; }
.cx-confirm-err { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--red); }
.cx-confirm-err:empty { display: none; }

/* the picker (right): the booking card, plus what the design adds to it */
.cx-pick { flex: 1 1 460px; min-width: 0; scroll-margin-top: 24px; }
/* The booking card fills the column; the picker stays at its top, and the
   moved and cancelled cards are centred in the height. */
.cx-card-host { min-width: 0; }
.cx-pick-head { margin-bottom: var(--sp-4); display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.cx-pick-title { margin: 0; font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-snug); font-weight: 700; color: var(--dark); }
.cx-pick-sub { margin: 0; font-size: var(--fs-small); color: var(--muted); }
/* The call's own day: a .bw-day with a dashed blue edge (the card's hover and active states stay). */
.bw-day.cx-day--cur { border: 1px dashed var(--blue); font-weight: 700; color: var(--blue); }
.cx-legend { margin-top: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); font-size: 12px; color: var(--muted); }
.cx-legend-mark { width: 14px; height: 14px; border: 1px dashed var(--blue); border-radius: 4px; }
/* The call's own time in the day's slots: not a button, marked "Current". */
.cx-slot-cur { min-height: 44px; padding: 4px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed var(--blue); border-radius: var(--r-sm); font-size: var(--fs-small); font-weight: 600; line-height: 1.15; color: var(--blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-slot-cur-word { font-size: 10px; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; }
.cx-move { margin-top: var(--sp-5); width: 100%; min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); background: var(--blue); color: #FFFFFF; border: 0; border-radius: var(--r-pill); font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; cursor: pointer; box-shadow: var(--glow); transition: background var(--dur-micro) var(--ease-standard), transform var(--dur-micro) var(--ease-standard); }
@media (hover: hover) { .cx-move:not(:disabled):hover { background: var(--blue-hover); transform: translateY(-2px); } }
.cx-move:not(:disabled):active { transform: scale(0.97); }
.cx-move:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; box-shadow: none; }
.cx-note { margin: var(--sp-3) 0 0; text-align: center; font-size: 12px; color: var(--muted); }
/* Not drawn in the design: a move that was refused or failed says so here. */
.cx-note.is-error { color: var(--red); }

/* moved, cancelled (right) */
.cx-done { flex: 1; padding: var(--sp-7) var(--sp-6); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cx-done-disc { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); box-shadow: var(--glow); }
.cx-done-title { margin: var(--sp-5) 0 0; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-snug); font-weight: 800; color: var(--dark); }
.cx-done-title--first { margin-top: 0; }
.cx-done-title:focus { outline: none; }
.cx-done-line { margin: var(--sp-3) 0 0; font-size: var(--fs-lead); font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; }
.cx-done-text { margin: var(--sp-3) 0 0; max-width: 380px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); text-wrap: pretty; }
.cx-done-btns { margin-top: var(--sp-6); display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
.cx-view { min-height: 48px; display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0 22px; border-radius: var(--r-pill); background: var(--blue); color: #FFFFFF; font-size: var(--fs-small); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; box-shadow: var(--e2); transition: background var(--dur-micro) var(--ease-standard); }
@media (hover: hover) { .cx-view:hover { background: var(--blue-hover); color: #FFFFFF; } }
.cx-again { min-height: 48px; padding: 0 22px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-pill); font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--dark); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-standard); }
@media (hover: hover) { .cx-again:hover { border-color: var(--blue); color: var(--blue); } }
/* A link here (it opens /book), drawn as the design's button. */
.cx-rebook { margin-top: var(--sp-6); min-height: 48px; display: inline-flex; align-items: center; padding: 0 22px; background: var(--blue); border: 0; border-radius: var(--r-pill); font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: #FFFFFF; cursor: pointer; box-shadow: var(--e2); transition: background var(--dur-micro) var(--ease-standard); }
@media (hover: hover) { .cx-rebook:hover { background: var(--blue-hover); color: #FFFFFF; } }

/* ── the booking card (Q2 + Q3) ── */
/* No overflow: hidden on the card, so the dropdown menus can extend past it. */
.bw { min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--e3); scroll-margin-top: 24px; font-family: var(--font-sans); }
.bw-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5); border-bottom: 1px solid var(--border); }
.bw-head .fn-avatar { letter-spacing: var(--ls-snug); }
.bw-head-text { min-width: 0; }
.bw-head h3 { margin: 0; font-size: var(--fs-lead); line-height: 1.3; letter-spacing: var(--ls-snug); font-weight: 700; color: var(--dark); }
.bw-head p { margin: 2px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
.bw-steps { list-style: none; margin: 0; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.bw-step { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.bw-step-num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 700; }
.bw-step-num svg { display: none; }
.bw-step.is-on .bw-step-num { background: var(--blue); border-color: var(--blue); color: #FFFFFF; }
.bw-step.is-done .bw-step-num { background: var(--blue-tint); border-color: transparent; color: var(--blue); }
.bw-step.is-done .bw-step-num svg { display: block; }
.bw-step.is-done .bw-step-num b { display: none; }
.bw-step-num b { font-weight: 700; }
.bw-step-label { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); font-weight: var(--fw-eyebrow); text-transform: uppercase; color: var(--muted); }
.bw-step.is-on .bw-step-label { color: var(--dark); }
.bw-conn { flex: 1; min-width: 24px; height: 2px; border-radius: 2px; background: var(--border); position: relative; overflow: hidden; }
.bw-conn-fill { position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-standard); }
/* Under 420px the two steps side by side need about 320px and the row has
   less: "Your details" ran to the card's edge at 390 and was hidden at 320.
   So the row stacks instead of squeezing: the circles take the ends of the
   row with the connector running between them, and each label sits under its
   own circle, the first left-aligned and the second right-aligned. Same
   words, same type, same 12px gap; the labels share the full width. */
@media (max-width: 419px) {
  .bw-steps { position: relative; justify-content: space-between; align-items: flex-start; }
  .bw-step { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .bw-step[data-step-2] { align-items: flex-end; }
  .bw-conn { position: absolute; top: calc(var(--sp-4) + 11px); left: calc(var(--sp-5) + 24px + var(--sp-3)); right: calc(var(--sp-5) + 24px + var(--sp-3)); min-width: 0; }
}

.bw-section { padding: var(--sp-5); }
.bw-month-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.bw-month-title { margin: 0; font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-snug); font-weight: 700; color: var(--dark); }
.bw-month-nav { display: flex; gap: var(--sp-2); }
.bw-nav-btn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--dark); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-micro) var(--ease-standard); }
@media (hover: hover) { .bw-nav-btn:not(:disabled):hover { border-color: var(--blue); color: var(--blue); } }
.bw-nav-btn:not(:disabled):active { transform: scale(0.97); }
.bw-nav-btn:disabled { background: none; color: #C4C9D4; cursor: not-allowed; }
/* The arrows stay 40px; the hit box is 44 (2px past the border each way). */
.bw-nav-btn::before { content: ''; position: absolute; inset: -3px; }
.bw-dows { margin-top: var(--sp-5); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bw-dow { text-align: center; font-size: 11px; letter-spacing: var(--ls-wide); font-weight: 600; text-transform: uppercase; color: var(--muted); }
.bw-dow--we { color: #C4C9D4; }
.bw-cells { margin-top: var(--sp-3); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bw-off { position: relative; height: 44px; display: grid; place-items: center; font-size: var(--fs-small); font-weight: 500; color: #C4C9D4; font-variant-numeric: tabular-nums; }
.bw-today { position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--blue); }
.bw-day { position: relative; justify-self: center; height: 44px; width: 100%; max-width: 52px; min-width: 0; padding: 0; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; color: var(--dark); cursor: pointer; font-variant-numeric: tabular-nums; transition: background var(--dur-micro) var(--ease-standard), color var(--dur-micro) var(--ease-standard), transform var(--dur-micro) var(--ease-standard); }
@media (hover: hover) { .bw-day:not([aria-pressed="true"]):hover { background: var(--blue-tint); color: var(--blue); } }
.bw-day:active { transform: scale(0.97); }
.bw-day[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); font-weight: 700; color: #FFFFFF; box-shadow: var(--e2); }
/* Each day's hit box spans its whole column: 2px past the border on each side
   covers the 4px gap, so the boxes meet with no dead strip between days. */
.bw-day::before { content: ''; position: absolute; inset: -1px -3px; }
/* On a phone the seven columns were 39px wide (Apple's floor is 44). The day
   grid and its weekday row widen together into the section's side padding,
   which puts every column at 44px or more from 375px up. */
@media (max-width: 479px) {
  .bw-dows, .bw-cells { margin-left: -14px; margin-right: -14px; }
}
.bw-tz-row { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.bw-tz-label { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); font-weight: var(--fw-eyebrow); text-transform: uppercase; color: var(--muted); }
.bw-tz-wrap { position: relative; display: inline-flex; min-width: 0; }
/* The pill draws 40px tall and the select is 44: a 2px transparent border
   carries the hit box past the pill, the 1px line is an inset shadow on the
   padding box, and the -2px margin keeps the row exactly where it was. The
   padding is the old 8/36/14 plus the old 1px border, so the text and the
   chevron do not move. */
.bw-tz { appearance: none; -webkit-appearance: none; min-height: 44px; margin: -2px; padding: 9px 37px 9px 15px; background: var(--card); background-clip: padding-box; border: 2px solid transparent; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--border); font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; color: var(--dark); cursor: pointer; outline: none; transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
@media (hover: hover) { .bw-tz:hover { box-shadow: inset 0 0 0 1px var(--blue); } }
/* The 3px focus ring: the transparent border takes the ring's colour for its
   first 2px and a 1px shadow adds the third, the same band --ring paints. */
.bw-tz:focus { border-color: rgba(37,99,235,.18); box-shadow: inset 0 0 0 1px var(--blue), 0 0 0 1px rgba(37,99,235,.18); }
.bw-tz-chev { position: absolute; right: 14px; top: 50%; margin-top: -6px; pointer-events: none; }
.bw-slots { margin-top: var(--sp-5); }
.bw-slots-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.bw-slots-title { margin: 0; font-size: var(--fs-body); line-height: 1.4; letter-spacing: var(--ls-snug); font-weight: 700; color: var(--dark); }
.bw-slots-grid { margin-top: var(--sp-3); display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--sp-2); max-height: 216px; overflow-y: auto; padding: 2px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.bw-slot { min-height: 44px; padding: 0 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; color: var(--dark); cursor: pointer; font-variant-numeric: tabular-nums; white-space: nowrap; transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-micro) var(--ease-standard); }
@media (hover: hover) { .bw-slot:not([aria-pressed="true"]):hover { border-color: var(--blue); color: var(--blue); } }
.bw-slot:active { transform: scale(0.97); }
.bw-slot[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); font-weight: 700; color: #FFFFFF; box-shadow: var(--e2); }
.bw-continue { margin-top: var(--sp-5); width: 100%; min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); background: var(--blue); color: #FFFFFF; border: 0; border-radius: var(--r-pill); font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; cursor: pointer; box-shadow: var(--e2); transition: background var(--dur-micro) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-micro) var(--ease-standard); }
@media (hover: hover) { .bw-continue:not(:disabled):hover { background: var(--blue-hover); box-shadow: var(--e3); } }
.bw-continue:not(:disabled):active { transform: scale(0.97); }
.bw-continue:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; box-shadow: none; }
.bw-hint { margin: var(--sp-3) 0 0; text-align: center; font-size: 12px; color: var(--muted); }

.bw-sel { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--blue-tint); border: 1px solid rgba(37,99,235,.18); border-radius: var(--r-md); }
.bw-sel-text { min-width: 0; }
.bw-sel-day { display: block; font-size: var(--fs-small); font-weight: 700; color: var(--dark); }
.bw-sel-time { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--body); font-variant-numeric: tabular-nums; }
.bw-change { flex: none; min-height: 40px; padding: 0 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-pill); font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--blue); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-standard), transform var(--dur-micro) var(--ease-standard); }
@media (hover: hover) { .bw-change:hover { border-color: var(--blue); } }
.bw-change:active { transform: scale(0.97); }
.bw-h4 { margin: var(--sp-5) 0 0; font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-snug); font-weight: 700; color: var(--dark); }
.bw-prefill { margin: var(--sp-2) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
.bw-req { margin: var(--sp-1) 0 0; font-size: 12px; color: var(--muted); }
.bw-form { margin: var(--sp-5) 0 0; }
.bw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--sp-4); }
.bw-field { min-width: 0; }
.bw-label { display: block; margin-bottom: 7px; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); font-weight: var(--fw-eyebrow); text-transform: uppercase; color: var(--muted); }
.bw-input { width: 100%; min-height: 48px; padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); font-family: var(--font-sans); font-size: 16px; color: var(--dark); outline: none; text-overflow: ellipsis; transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
.bw-input--phone { font-variant-numeric: tabular-nums; }
.bw-input:focus { border-color: var(--blue); box-shadow: var(--ring); }
.bw-input[aria-invalid="true"] { border-color: var(--red); }
.bw-err { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--red); }
.bw-err:empty { display: none; }
/* The custom dropdowns. */
.bw-dd { position: relative; }
.bw-dd-btn { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: none; font-family: var(--font-sans); font-size: 16px; text-align: left; cursor: pointer; outline: none; transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
@media (hover: hover) { .bw-dd-btn:hover { border-color: var(--blue); } }
.bw-dd-btn:focus, .bw-dd-btn[aria-expanded="true"] { border-color: var(--blue); box-shadow: var(--ring); }
.bw-dd-btn[aria-invalid="true"] { border-color: var(--red); }
.bw-dd-text { flex: 1; min-width: 0; white-space: normal; line-height: 1.35; text-wrap: pretty; color: var(--muted); }
.bw-dd-text.is-set { color: var(--dark); }
.bw-dd-chev { flex: none; transition: transform var(--dur-base) var(--ease-standard); }
.bw-dd-btn[aria-expanded="true"] .bw-dd-chev { transform: rotate(180deg); }
.bw-dd-menu { position: absolute; z-index: 30; left: -10px; right: -10px; top: 100%; display: grid; grid-template-rows: 0fr; opacity: 0; pointer-events: none; transition: grid-template-rows var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-standard); }
.bw-dd-menu.is-open { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; }
.bw-dd-clip { overflow: hidden; min-height: 0; padding: 0 10px; }
.bw-dd-list { margin: 6px 0 20px; padding: 5px; max-height: 264px; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--e3); transform: translateY(-8px); transition: transform var(--dur-base) var(--ease-out); scrollbar-width: thin; }
.bw-dd-menu.is-open .bw-dd-list { transform: translateY(0); }
.bw-dd-opt { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 10px 12px; background: transparent; border: 0; border-radius: var(--r-sm); font-family: var(--font-sans); font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--dark); text-align: left; cursor: pointer; outline: none; transition: background var(--dur-micro) var(--ease-standard), color var(--dur-micro) var(--ease-standard); }
.bw-dd-opt:focus { background: var(--blue-tint); color: var(--blue); }
@media (hover: hover) and (pointer: fine) { .bw-dd-opt:hover { background: var(--blue-tint); color: var(--blue); } }
.bw-dd-opt[aria-selected="true"] { background: var(--blue-tint); color: var(--blue); font-weight: 700; }
.bw-dd-opt span { min-width: 0; }
.bw-dd-opt svg { flex: none; display: none; }
.bw-dd-opt[aria-selected="true"] svg { display: block; }
.bw-challenge { margin-top: var(--sp-5); }
.bw-challenge-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: 7px; font-size: var(--fs-small); font-weight: 600; line-height: 1.4; color: var(--dark); }
.bw-opt-tag { flex: none; font-size: 11px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--muted); }
.bw-help { margin: var(--sp-2) 0 0; font-size: 12px; color: var(--muted); }
.bw-note { margin-top: var(--sp-4); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.bw-note-btn { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 0; background: none; border: 0; font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; color: var(--dark); text-align: left; cursor: pointer; }
.bw-note-btn .bw-opt-tag { margin-left: 6px; }
.bw-note-icon { flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: var(--blue); transition: transform var(--dur-base) var(--ease-standard); }
.bw-note-btn[aria-expanded="true"] .bw-note-icon { transform: rotate(45deg); }
.bw-note-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-standard); }
.bw-note-wrap.is-open { grid-template-rows: 1fr; }
.bw-note-inner { overflow: hidden; min-height: 0; }
.bw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bw-textarea { display: block; width: 100%; margin: 0 0 var(--sp-4); padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); font-family: var(--font-sans); font-size: 16px; line-height: var(--lh-body); color: var(--dark); resize: vertical; outline: none; transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
.bw-textarea:focus { border-color: var(--blue); box-shadow: var(--ring); }
.bw-privacy { margin: var(--sp-4) 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.bw-privacy a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.bw-form-err { margin: var(--sp-3) 0 0; font-size: var(--fs-small); color: var(--red); }
.bw-form-err:empty { display: none; }
.bw-submit { margin-top: var(--sp-4); width: 100%; min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); background: var(--blue); color: #FFFFFF; border: 0; border-radius: var(--r-pill); font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; cursor: pointer; box-shadow: var(--glow); transition: background var(--dur-micro) var(--ease-standard), transform var(--dur-micro) var(--ease-standard); }
@media (hover: hover) { .bw-submit:not(:disabled):hover { background: var(--blue-hover); transform: translateY(-2px); } }
.bw-submit:not(:disabled):active { transform: scale(0.97); }
.bw-submit:disabled { opacity: .6; cursor: wait; }