:root {
        /* derived */
        --brand-tint: color-mix(in srgb, var(--brand) 9%, #fff);
        --alert: #b5532b;
        --alert-bg: #fbeae2;
        --alert-border: #f3d4c4;
        --radio-border: #cac4ba;
        --pill-soft: #f1ede5;
        --pill-soft-border: #d3ccbf;
        --chip-idle-bg: #f1ece4;
      }
      body {
        margin: 0;
        font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
        font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--bg);
      }
      .wrap { max-width: 480px; margin: 0 auto; padding: 22px 16px 48px; }
      .platform-foot { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line);
        text-align: center; font-size: 13px; color: var(--muted); }
      .platform-foot a { color: var(--muted); font-weight: 600; text-decoration: none; }
      .platform-foot a:hover { color: var(--brand); }
      /* Logo hidden for now — too small to read at this size; the event banner
         carries the branding. Re-enable (display:flex) once the logo treatment is
         sorted (per Tom). */
      header.brand { display: none; align-items: center; gap: 12px; margin-bottom: 16px; }
      header.brand img { height: 36px; }
      h1 { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; margin: 0 0 4px; }
      .muted { color: var(--muted); }

      /* Generic input + concert (simple event) styles */
      label { display: block; font-weight: 600; margin: 14px 0 6px; }
      input[type="text"], input[type="email"], input[type="number"] {
        width: 100%; padding: 12px 14px; border: 1px solid var(--ctl-border);
        border-radius: 12px; font-size: 1rem; background: var(--surface); font-family: inherit; color: var(--ink);
      }
      input[type="number"] { width: 84px; }
      input:focus-visible, button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
      /* keyboard focus shows a clean ring around the whole option row, not a partial one */
      .srow-flex:focus-within { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 12px; }
      .srow-flex input[type="radio"]:focus:not(:focus-visible) { outline: none; }
      .srow-flex:focus-within:not(:has(:focus-visible)) { outline: none; }
      .card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin: 14px 0; }
      .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
      .qty { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
      .qty:last-child { border-bottom: 0; }
      .price { font-variant-numeric: tabular-nums; }
      .sold-out { color: var(--muted); font-style: italic; }
      button.pay {
        margin-top: 20px; width: 100%; padding: 14px; border: 0; border-radius: 12px;
        background: var(--brand); color: #fff; font-size: 1.05rem; font-weight: 700; cursor: pointer; font-family: inherit;
      }
      .msg { background: var(--alert-bg); color: var(--alert); border: 1px solid var(--alert-border); padding: 10px 14px; border-radius: 12px; margin-bottom: 14px; }
      .success-badge { width: 64px; height: 64px; border-radius: 50%; background: var(--brand-tint);
        color: var(--brand); display: flex; align-items: center; justify-content: center;
        font-size: 34px; font-weight: 700; margin: 8px 0 16px; }

      /* ===== Workshop booking wizard ===== */
      .sheet { background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
        box-shadow: 0 1px 2px rgba(40,32,20,.04); padding: 22px 18px; }
      .eyebrow { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
      .event-title { font-family: var(--serif); font-weight: 500; font-size: 30px; text-align: center; margin: 4px 0 2px; }
      .event-sub { text-align: center; color: var(--muted); font-size: 15px; margin: 0 0 16px; }
      .caps { font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }

      .viewprog { width: 100%; min-height: 48px; margin: 4px 0 14px; border: 1px solid var(--ctl-border);
        border-radius: 12px; background: var(--surface); color: var(--brand); cursor: pointer; font: inherit; font-weight: 600; }
      .earlybird { background: #f0ece4; border-radius: 12px; padding: 12px 14px; font-size: 14px; margin: 6px 0 4px; }
      .earlybird .star { color: var(--brand); }
      .earlybird b { color: var(--brand); }

      .steprow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
        background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin: 10px 0; }
      .steprow .nm2 { font-size: 18px; font-weight: 700; }
      .steprow .sub { color: var(--muted); font-size: 15px; }
      .stepc { display: flex; align-items: center; gap: 6px; }
      .sb { width: 48px; height: 48px; font-size: 1.5rem; line-height: 1; border-radius: 12px; cursor: pointer; font-family: inherit; }
      .sb.minus { border: 1.5px solid var(--ctl-border); background: var(--surface); color: var(--brand); }
      .sb.plus { border: 0; background: var(--brand); color: #fff; }
      .sb:disabled { opacity: .4; cursor: default; }
      .cv { min-width: 38px; text-align: center; font-size: 22px; font-weight: 700; }

      .footerbar, .totalbar { background: transparent; border-top: 1px solid var(--line);
        display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 0; margin-top: 18px; }
      .totalbar { flex-direction: column; align-items: stretch; }
      .ctxline { font-size: 13px; color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
      .ctxline .hl { font-weight: 700; }
      .ctxline .hl-warn { color: var(--alert); }
      .ctxline .hl-ok { color: var(--brand); }
      .totalrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
      .totlbl { font-size: 13px; color: var(--muted); }
      .totamt { font-size: 27px; font-weight: 700; }
      .subamt { font-size: 26px; font-weight: 700; }
      .btn-primary { border: 0; border-radius: 12px; background: var(--brand); color: #fff; font: inherit;
        font-weight: 700; font-size: 1rem; padding: 14px 18px; cursor: pointer; white-space: nowrap; }
      .btn-ghost { border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; padding: 6px 2px; }

      /* .person-h / .person-sub / .cap stay — shared by the merch + details steps. */
      .person-h { font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 2px 0; }
      .person-sub { color: var(--muted); font-size: 15px; margin: 0 0 12px; }
      .cap { color: var(--muted); }
      .cap.low { color: var(--alert); font-weight: 700; }

      /* ============================================================
         Per-person "build your day" screen — refined (Claude Design
         buyer-page-handoff): flat, dense, one continuous white surface,
         sticky blurred top bar + sticky total bar. Scoped to .sheet.pp /
         .pp-* so it never touches the merch/details/step-1 chrome.
         ============================================================ */
      .sheet.pp { padding: 0; }
      /* These selectable rows/pills/segments are <label>s — null out the global
         form-label margin (label { margin:14px 0 6px }) so their own spacing rules
         (gap, padding, the segmented track) control layout exactly. */
      .sheet.pp .srow-flex, .sheet.pp .pp-pill, .sheet.pp .pp-seg-opt { margin: 0; }

      .pp-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
        gap: 10px; padding: 13px 18px; border-bottom: 1px solid #f3efe8; border-radius: 16px 16px 0 0;
        background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
      .pp-back { border: 0; background: none; font: 600 14px "Hanken Grotesk", sans-serif; color: #9a9388; cursor: pointer; padding: 4px 2px; }
      .pp-back:hover { color: var(--ink); }
      .pp-person { font: 600 12.5px "Hanken Grotesk", sans-serif; color: #b6afa4; letter-spacing: .02em; }
      .pp-spacer { width: 30px; }

      .pp-intro { padding: 18px 18px 4px; }
      .pp-h1 { font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1.1; letter-spacing: -.01em; color: #221f1b; margin: 0; }
      .pp-sub { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
      .pp-name { margin-top: 13px; width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid var(--line);
        border-radius: 10px; font: 500 15px "Hanken Grotesk", sans-serif; color: var(--ink); background: var(--bg); }
      .pp-name::placeholder { color: #a8a198; }

      .pp-sessions { padding: 6px 14px 4px; }
      /* One clean hairline above each session (not the first) to separate them. */
      .pp-session { border-top: 1px solid #f3efe8; padding: 16px 0 4px; }
      .pp-session:first-child { border-top: 0; padding-top: 4px; }
      .pp-session.nudge .pp-scaps { color: var(--alert); }
      .pp-shead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 4px; margin-bottom: 6px; }
      .pp-scaps { font: 600 11px "Hanken Grotesk", sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #9a9388; }
      .pp-stime { color: #7c766d; }
      .chip { font: 600 11px "Hanken Grotesk", sans-serif; padding: 3px 9px; border-radius: 10px; white-space: nowrap; max-width: 52%; overflow: hidden; text-overflow: ellipsis; }
      .chip.todo { color: #9a9388; background: var(--chip-idle-bg); }
      /* Picked sessions show no header chip — the tinted row + filled radio (and
         the progress bar below) already confirm the choice. */
      .chip.done { display: none; }
      .chip.nudge { color: var(--alert); background: var(--alert-bg); }

      .srow-flex { display: flex; align-items: flex-start; gap: 11px; padding: 10px 12px; border-radius: 12px; cursor: pointer; transition: background .12s; }
      .srow-flex:has(input:checked) { background: var(--brand-tint); }
      .srow-flex:hover { background: #f7f4ef; }
      .srow-flex:has(input:checked):hover { background: #e8f1ee; }
      .srow-flex.full { opacity: .5; cursor: default; }
      .pp-radio { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 19px; height: 19px; margin: 1px 0 0;
        border-radius: 50%; border: 2px solid var(--radio-border); background: var(--surface); cursor: pointer; }
      .pp-radio:checked { border-color: var(--brand); background: radial-gradient(circle at center, #fff 0 3.5px, var(--brand) 4.5px); }
      .pp-body { flex: 1; min-width: 0; }
      .pp-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
      .pp-nm { font: 600 15px "Hanken Grotesk", sans-serif; color: var(--ink); line-height: 1.25; }
      .pp-sur { font: 700 11px "Hanken Grotesk", sans-serif; color: var(--brand); background: var(--brand-tint); padding: 2px 7px; border-radius: 9px; }
      .pp-lead { display: block; font: 400 12.5px "Hanken Grotesk", sans-serif; color: #8a847a; margin-top: 3px; }
      .pp-cap { flex: 0 0 auto; align-self: center; font: 500 12.5px "Hanken Grotesk", sans-serif; color: #a8a198; white-space: nowrap; }
      .pp-cap.low { color: var(--alert); font-weight: 600; }

      .pp-hair { height: 1px; background: #f3efe8; margin: 6px 18px 0; }
      .pp-details { padding: 18px 18px 6px; }
      .pp-detail-caps { font: 600 11px "Hanken Grotesk", sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #9a9388; margin-bottom: 14px; }
      .pp-qlabel { font: 600 14px "Hanken Grotesk", sans-serif; color: var(--ink); margin-bottom: 9px; }
      .pp-qhint { color: var(--muted); font-size: 12.5px; margin: -4px 0 9px; }
      .pp-qtext { width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px;
        font: 500 15px "Hanken Grotesk", sans-serif; color: var(--ink); background: var(--bg); margin-bottom: 20px; }
      .pp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
      .pp-pill { display: inline-flex; align-items: center; padding: 8px 15px; border-radius: 19px; cursor: pointer;
        font: 600 13.5px "Hanken Grotesk", sans-serif; color: #4a4640; background: var(--surface); border: 1px solid var(--ctl-border); transition: all .12s; }
      .pp-pill:hover { border-color: #bdb6ab; }
      .pp-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
      .pp-pill:has(input:checked) { background: var(--brand); border-color: var(--brand); color: #fff; }
      /* A cream track split into two halves; the selected half is a solid brand
         fill that occupies its WHOLE half (no inset — overflow:hidden clips the
         fill to the track's rounded corners). Flat + on-brand, matching the pills. */
      .pp-seg { display: flex; background: #f4f0ea; border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
      .pp-seg-opt { flex: 1; text-align: center; padding: 13px 0; cursor: pointer;
        font: 600 14px "Hanken Grotesk", sans-serif; color: var(--muted); transition: background .12s, color .12s; }
      .pp-seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
      .pp-seg-opt:hover:not(:has(input:checked)) { color: var(--ink); }
      .pp-seg-opt:has(input:checked) { background: var(--brand); color: #fff; }

      .pp-banwrap { padding: 0 18px; }
      .pp-total { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line);
        border-radius: 0 0 16px 16px; padding: 12px 18px 16px; }
      .pp-progress { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }
      .pp-progseg { width: 22px; height: 4px; border-radius: 2px; background: #e2dcd2; }
      .pp-progseg.on { background: var(--brand); }
      .pp-progress-lbl { font: 500 12px "Hanken Grotesk", sans-serif; color: #8a847a; margin-left: 6px; }
      .pp-total-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
      .pp-total-lbl { font: 500 12px "Hanken Grotesk", sans-serif; color: #8a847a; }
      .pp-total-amt { font: 600 23px "Newsreader", serif; color: var(--ink); }
      .pp-continue { border: 0; border-radius: 12px; background: var(--brand); color: #fff;
        font: 600 16px "Hanken Grotesk", sans-serif; padding: 14px 26px; cursor: pointer; white-space: nowrap; }

      .banner { background: var(--alert-bg); color: var(--alert); border: 1px solid var(--alert-border);
        border-radius: 12px; padding: 11px 14px; font-size: 14px; font-weight: 600; margin: 10px 0; display: none; }
      .banner.show { display: block; }

      /* full-day programme modal — slide-up sheet */
      .pmodal { position: fixed; inset: 0; z-index: 60; background: rgba(31,28,25,.55);
        display: flex; align-items: flex-end; justify-content: center;
        opacity: 0; visibility: hidden; transition: opacity .2s ease; }
      .pmodal.show { opacity: 1; visibility: visible; }
      .psheet { background: var(--bg); width: 100%; max-width: 440px; max-height: 90vh;
        display: flex; flex-direction: column; border-radius: 26px 26px 0 0;
        transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
      .pmodal.show .psheet { transform: translateY(0); }
      .grabber { width: 40px; height: 5px; background: #ddd6cc; border-radius: 3px; margin: 8px auto 0; flex: 0 0 auto; }
      .pshead { position: relative; flex: 0 0 auto; padding: 12px 20px 16px; border-bottom: 1px solid var(--line); }
      .ptitle { font-family: var(--serif); font-weight: 500; font-size: 27px; color: var(--ink); margin: 0; }
      .psub { font-size: 14px; font-weight: 500; color: var(--muted); margin-top: 2px; }
      .pclose { position: absolute; top: 12px; right: 16px; width: 44px; height: 44px; border-radius: 50%;
        border: 0; background: #f1ece4; color: var(--ink); font-size: 19px; line-height: 1; cursor: pointer; }
      .pbody { overflow-y: auto; padding: 18px 18px 24px; }
      .pcaps { font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
      .pcaps:not(:first-child) { margin-top: 18px; }
      .pcard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(40,32,20,.04); }
      .prow { padding: 15px 16px; border-top: 1px solid var(--line); }
      .prow:first-child { border-top: 0; }
      .prow-top { display: flex; align-items: baseline; gap: 10px; }
      .pname { font-size: 17px; font-weight: 700; color: var(--ink); }
      .pchip { font-size: 12px; font-weight: 700; color: var(--brand); background: var(--brand-tint); padding: 3px 9px; border-radius: 20px; }
      .pcap { margin-left: auto; font-size: 15px; color: var(--muted); white-space: nowrap; }
      .pcap.low { color: var(--alert); font-weight: 700; }
      .pdesc { font-size: 15px; line-height: 1.45; color: var(--muted); margin-top: 5px; }
      @media (prefers-reduced-motion: reduce) { .pmodal, .psheet { transition: none; } }

      /* merch step — thumbnail + a full-width content column (name, description,
         then a footer line of price/stock + stepper) so the copy isn't squeezed
         into a narrow column beside the stepper. */
      .merchrow { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
      .merchrow:last-of-type { border-bottom: 0; }
      .merch-top { display: flex; align-items: flex-start; gap: 14px; }
      .merch-thumb { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 12px; overflow: hidden;
        background: var(--soft-fill, #f1ece4); border: 1px solid var(--line); }
      .merch-thumb img { width: 100%; height: 100%; object-fit: cover; }
      .merch-main { flex: 1; min-width: 0; }
      .merch-name { font: 600 16px "Hanken Grotesk", sans-serif; color: var(--ink); line-height: 1.25; }
      .merch-desc { font: 400 13.5px "Hanken Grotesk", sans-serif; line-height: 1.45; color: var(--muted); margin-top: 3px; }
      /* Footer spans the full card width: price/stock pinned left, stepper right. */
      .merch-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
      .merch-meta { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
      .merch-price { font-weight: 700; font-variant-numeric: tabular-nums; }
      .merch-foot .stepc { flex: 0 0 auto; }
      .merchrow.full { opacity: .55; }

      /* per-ticket add-ons (paid on the day) — inline on each ticket/person,
         always visible (never collapsed) so buyers see them while scrolling.
         Styled to the buyer-page handoff "extras" rows: name + price line, a
         white − / dark + stepper; the count greys out at 0. */
      .addons { margin-top: 12px; }
      .ticket-slot { padding-bottom: 6px; }
      .addon-head { font: 600 14px "Hanken Grotesk", sans-serif; color: var(--ink); margin: 4px 0 11px; }
      .addon-body { display: flex; flex-direction: column; gap: 4px; }
      .addonrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; }
      .addon-info { min-width: 0; }
      .addon-name { font: 600 15px "Hanken Grotesk", sans-serif; color: var(--ink); }
      .addon-desc { font: 400 12.5px "Hanken Grotesk", sans-serif; line-height: 1.4; color: var(--muted); margin-top: 1px; }
      .addon-meta { margin-top: 2px; }
      .addon-price { font: 500 13px "Hanken Grotesk", sans-serif; color: var(--ink); }
      .addon-payday { color: #a8a198; font-weight: 400; }
      .addonrow .stepc { flex: 0 0 auto; gap: 9px; }
      .addonrow .sb { width: 44px; height: 40px; border-radius: 11px; font-size: 21px; font-weight: 400; }
      .addonrow .sb.minus { border: 1px solid var(--ctl-border); background: var(--surface); color: var(--ink); }
      .addonrow .sb.plus { border: 0; background: var(--ink); color: #fff; }
      .addonrow .stepc.at-min .sb.minus { opacity: .4; }
      .addonrow .cv { min-width: 20px; font: 600 16px "Hanken Grotesk", sans-serif; color: var(--ink); }
      .addonrow .stepc.at-min .cv { color: #bdb6ab; }
      /* "On the day" sub-line under the pay-now total */
      .payday-line { font-size: 13px; color: var(--muted); margin-top: 3px; }
      .payday-line b { color: var(--ink); font-variant-numeric: tabular-nums; }

      /* Promo code: compact field + themed Apply button (design-system secondary:
         white, 1.5px hairline border, brand label — matches the other buttons). */
      .promo-row { display: flex; gap: 8px; align-items: stretch; }
      .promo-row input { flex: 1 1 auto; max-width: 240px; min-width: 0; }
      .btn-secondary { border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface, #fff);
        color: var(--brand); font: inherit; font-weight: 700; font-size: 1rem; padding: 0 20px;
        cursor: pointer; white-space: nowrap; }
      .btn-secondary:hover { border-color: var(--control-border, #ded8d0); }
      .btn-secondary:disabled { opacity: .55; cursor: default; }
      .promo-row .btn-secondary { flex: 0 0 auto; min-width: 100px; }
      .promo-msg { font-size: 13px; margin-top: 8px; }
      .promo-msg.ok { color: var(--brand); font-weight: 600; }
      .promo-msg.err { color: var(--alert, #b5532b); }
      /* Itemised cost breakdown above the total: subtotal − discount, hairline, total */
      .cost-lines { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
      .cost-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px;
        color: var(--muted); padding: 2px 0; }
      .cost-line span:last-child { font-variant-numeric: tabular-nums; color: var(--ink); }
      .cost-line.save span { color: var(--brand); font-weight: 600; }

      /* Order recap on the pay step — tappable lines that jump back to the step
         they came from. Token-driven, so the dark theme needs no overrides. */
      .recap { margin: 4px 0 16px; }
      .recap-lines { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
      .recap-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
        width: 100%; padding: 12px 14px; border: 0; border-top: 1px solid var(--line);
        background: var(--surface); font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
      .recap-line:first-child { border-top: 0; }
      .recap-line:hover:not(:disabled) { background: var(--brand-tint); }
      .recap-line:disabled { cursor: default; }
      .recap-main { min-width: 0; }
      .recap-nm { font-weight: 600; font-size: 15px; }
      .recap-sub { color: var(--muted); font-weight: 500; }
      .recap-picks { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
      .recap-amt { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 15px; }
      .recap-day .recap-amt, .recap-day .recap-nm { color: var(--muted); font-weight: 500; }

      .wizard.js .step { display: none; }
      .wizard.js .step.active { display: block; }

      @media (prefers-reduced-motion: no-preference) { .desc { transition: none; } }

      /* Preview mode (rendered inside the editor's preview pane). */
      .preview-banner {
        position: sticky; top: 0; z-index: 5; text-align: center;
        background: var(--ink); color: #fff; font-size: 12px; font-weight: 600;
        letter-spacing: .02em; padding: 7px 14px;
      }
      body.is-preview .pay[disabled],
      body.is-preview .btn-primary[disabled] { opacity: .55; cursor: not-allowed; }

      /* ============================================================
         Dark theme — the seller's "Booking page theme: Dark" choice
         (body.theme-dark, set from org.page_theme). Token overrides
         first, then the handful of rules that hardcode light colours.
         --brand stays the seller's colour for FILLS (buttons, radios);
         --brand-fg is a lightened version for brand-as-text so links
         and chips keep contrast on the dark background.
         ============================================================ */
      body.theme-dark {
        --ink: #ece7df;
        --muted: #a49d92;
        --line: #37332c;
        --bg: #171512;
        --surface: #211e19;
        --ctl-border: #46413a;
        --brand-fg: color-mix(in srgb, var(--brand) 52%, #ffffff);
        --brand-tint: color-mix(in srgb, var(--brand) 30%, #211e19);
        --alert: #e0764a;
        --alert-bg: rgba(224, 118, 74, .14);
        --alert-border: rgba(224, 118, 74, .35);
        --radio-border: #575047;
        --pill-soft: #2b2721;
        --pill-soft-border: #46413a;
        --chip-idle-bg: #2b2721;
        color-scheme: dark;
      }
      /* brand-as-foreground → lightened brand */
      body.theme-dark .platform-foot a:hover,
      body.theme-dark .viewprog,
      body.theme-dark .earlybird .star, body.theme-dark .earlybird b,
      body.theme-dark .sb.minus,
      body.theme-dark .success-badge,
      body.theme-dark .pp-sur,
      body.theme-dark .pchip,
      body.theme-dark .promo-msg.ok,
      body.theme-dark .ctxline .hl-ok,
      body.theme-dark .btn-secondary { color: var(--brand-fg); }
      body.theme-dark .cost-line.save span { color: var(--brand-fg); }
      /* hardcoded light neutrals → dark equivalents */
      body.theme-dark .earlybird { background: #2b2721; }
      body.theme-dark .pp-top { background: rgba(26, 24, 20, .88); border-bottom-color: #37332c; }
      body.theme-dark .pp-back { color: #a49d92; }
      body.theme-dark .pp-back:hover { color: var(--ink); }
      body.theme-dark .pp-person { color: #8a8378; }
      body.theme-dark .pp-h1 { color: #f2ede4; }
      body.theme-dark .pp-name::placeholder, body.theme-dark .pp-qtext::placeholder { color: #7c7569; }
      body.theme-dark .pp-session, body.theme-dark .pp-hair { border-top-color: #37332c; }
      body.theme-dark .pp-hair { background: #37332c; }
      body.theme-dark .pp-scaps, body.theme-dark .pp-detail-caps { color: #8a8378; }
      body.theme-dark .pp-stime { color: #948d81; }
      body.theme-dark .chip.todo { color: #a49d92; }
      body.theme-dark .srow-flex:hover { background: #2a2620; }
      body.theme-dark .srow-flex:has(input:checked):hover {
        background: color-mix(in srgb, var(--brand) 38%, #211e19);
      }
      body.theme-dark .pp-lead { color: #948d81; }
      body.theme-dark .pp-cap { color: #8a8378; }
      body.theme-dark .pp-pill { color: #d9d3c9; }
      body.theme-dark .pp-pill:hover { border-color: #5a544a; }
      body.theme-dark .pp-seg { background: #2b2721; }
      body.theme-dark .pp-progseg { background: #46413a; }
      body.theme-dark .pp-progress-lbl, body.theme-dark .pp-total-lbl { color: #948d81; }
      body.theme-dark .grabber { background: #46413a; }
      body.theme-dark .pclose { background: #2b2721; color: var(--ink); }
      body.theme-dark .merch-thumb { background: #2b2721; }
      body.theme-dark .addon-payday { color: #8a8378; }
      /* the ink-filled add-on "+" flips: light button, dark glyph */
      body.theme-dark .addonrow .sb.plus { background: var(--ink); color: #171512; }
      body.theme-dark .addonrow .stepc.at-min .cv { color: #6e675c; }
      body.theme-dark .preview-banner { background: #0d0c0a; color: #fff; }
      body.theme-dark .sheet { box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
      body.theme-dark .pcard { box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
      body.theme-dark .pmodal { background: rgba(0, 0, 0, .6); }