/* =====================================================================
   booking-flow.css — the styling shared by the four booking doorways.
   ---------------------------------------------------------------
   Extracted 12 September 2026 (build-audit item 9, stage 1) from the
   inline <style> block that by-date.html, service.html, setup.html and
   quote.html each carried as a near-identical copy. Every rule here was
   byte-identical (ignoring whitespace) in all four; each page keeps only
   its genuinely page-specific rules inline, AFTER this file, so page
   rules still win exactly as before.

   Verified equivalent, not assumed: before and after the move, the
   computed styles of every element on every doorway were hashed at
   desktop and at 375px width and compared. No difference.

   RULES
   - Edit shared booking styling HERE, once. Never paste a rule back into
     a doorway's inline block if it belongs to all four.
   - Bump the ?v= on the <link> in all four doorways when this changes
     (public/ has no build step, so the cache-buster is manual).
   - by-service.html (the pricing embed) is NOT on this file yet: it is a
     compact variant with 199 rules of its own. Stage 2 candidate.
   - setups.css stays separate: it is shared wider (the setups embed too).
   ===================================================================== */
/* ============================================================
     BOOKING PAGE — Theme E specific styles
     ============================================================ */

  .nav-back{font-size:13px;color:var(--text-muted);transition:color .15s}
.nav-back:hover{color:var(--text)}
/* Progress wrap */
  .progress-wrap{padding:14px 0}
.progress-card{background:var(--bg-card);border-radius:var(--radius-card);padding:16px 28px}
.progress-bar{height:3px;background:var(--border-soft);border-radius:2px;overflow:hidden;margin-bottom:10px}
.progress-fill{height:100%;background:var(--bg-deep);transition:width .35s cubic-bezier(.4,0,.2,1);width:0;border-radius:2px}
.stepper .snode{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;background:none;border:0;padding:2px 2px 0;font-family:inherit;color:var(--text-dim);cursor:default}
.stepper .snode::before{content:"";position:absolute;top:16px;right:50%;width:100%;height:2px;background:var(--border-soft);z-index:0}
.stepper .snode:first-child::before{display:none}
.stepper .snum{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;background:var(--bg-card);border:1.5px solid var(--border);color:var(--text-dim);transition:background .2s,border-color .2s,color .2s,box-shadow .2s}
.stepper .slabel{font-size:11.5px;font-weight:500;line-height:1;white-space:nowrap;color:var(--text-dim);transition:color .2s}
.stepper .snode.done{cursor:pointer}
.stepper .snode.done::before,.stepper .snode.current::before{background:var(--bg-deep)}
.stepper .snode.done .snum{background:var(--bg-deep);border-color:var(--bg-deep);color:var(--on-dark)}
.stepper .snode.done .slabel,.stepper .snode.current .slabel{color:var(--text)}
.stepper .snode.current .slabel{font-weight:600;font-size:12.5px;color:var(--accent-amber)}
.stepper .snode.done:hover .slabel{text-decoration:underline;text-underline-offset:2px}
.stepper .snode:focus-visible{outline:2px solid var(--bg-deep);outline-offset:3px;border-radius:10px}
@media (max-width:640px){
    .stepper .slabel{display:none}
    .stepper .snum{width:26px;height:26px}
    .stepper .snode::before{top:15px}
  }
.progress-meta{display:none}
@media (max-width:640px){
    .progress-meta{display:block;text-align:center;font-size:13px}
  }
.progress-meta .step-label{color:var(--accent-amber);font-weight:600}
.progress-meta .sep{opacity:.4}
.progress-heading{display:flex;justify-content:space-between;align-items:center;gap:24px}
.progress-heading-text{display:flex;flex-direction:column-reverse;gap:4px;min-width:0}
.step-title{font-family:var(--font-sans);font-size:26px;font-weight:600;line-height:1.1;letter-spacing:-.8px;margin:0;color:var(--text);white-space:nowrap}
.step-title .accent{color:var(--text-muted);font-weight:500}
.step-nav-top{display:flex;gap:10px;align-items:center;flex-wrap:nowrap}
@media (max-width:880px){
    .progress-heading{flex-direction:column;align-items:stretch;gap:12px}
    .step-title{font-size:22px;letter-spacing:-.5px;white-space:normal}
    .step-nav-top{justify-content:space-between}
  }
/* Booking nav buttons */
  .btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;background:var(--bg-deep);color:var(--on-dark);border-radius:var(--radius-btn);font-size:13px;font-weight:500;border:0;cursor:pointer;transition:background .2s,opacity .2s;font-family:inherit}
.btn:hover{background:var(--bg-deep-soft)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn::after{content:"›";font-size:16px;line-height:1}
.btn-back{background:transparent;color:var(--text-muted);padding:11px 18px;border:1px solid var(--border);border-radius:var(--radius-btn);font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit}
.btn-back::before{content:"‹";font-size:16px;line-height:1}
.btn-back:hover{color:var(--text);border-color:var(--text)}
/* Verification-code screen hardening: resend cooldown, junk hint, email-typo catch */
  #resendCode.disabled{opacity:.5;pointer-events:none;text-decoration:none}
.code-hint{font-size:12.5px;color:var(--text-dim);margin:12px 0 0;line-height:1.4}
.email-suggest{font-size:12.5px;color:var(--text-dim);margin:8px 2px 2px}
.email-suggest-fix{background:none;border:0;color:var(--text);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:0}
.btn-inquire{background:var(--bg-soft);color:var(--text);border:1px solid var(--border)}
.btn-inquire::after{color:var(--text)}
.btn-inquire:hover{background:var(--bg-card);border-color:var(--text)}
.btn-inquire:disabled{opacity:.5}
.step-nav-bottom{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;padding:24px 28px;background:var(--bg-card);border-radius:var(--radius-card)}
.step{display:none;animation:fadeIn .25s ease-out}
.step.active{display:block}
.step-card{background:var(--bg-card);border-radius:var(--radius-card);padding:26px 38px}
.seg-toggle{position:relative;display:inline-flex;background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-btn);padding:4px}
.seg-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:var(--radius-btn);background:var(--text);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.seg-toggle[data-billing="monthly"] .seg-thumb{transform:translateX(100%)}
.seg-opt{position:relative;z-index:1;flex:1;min-width:104px;text-align:center;padding:8px 18px;border-radius:var(--radius-btn);font-size:14px;font-weight:500;color:var(--text-muted);background:transparent;border:0;cursor:pointer;font-family:inherit;transition:color .25s}
.seg-opt:hover{color:var(--text)}
.seg-opt.active{color:var(--bg);-webkit-text-fill-color:var(--bg)}
/* Gentle left-to-right light sweep on "Monthly" while it's unselected, to
     draw the eye to the saving. Stops on hover (shows solid) and when active. */
  @keyframes segShimmer{0%{background-position:150% 50%}100%{background-position:-50% 50%}}
.seg-opt[data-billing="monthly"]:not(.active){
    background-image:linear-gradient(90deg,var(--text-muted) 0%,var(--text-muted) 38%,var(--text) 50%,var(--text-muted) 62%,var(--text-muted) 100%);
    background-size:220% 100%;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    animation:segShimmer 3.4s linear infinite;
  }
.seg-opt[data-billing="monthly"]:not(.active):hover{-webkit-text-fill-color:var(--text);animation:none}
@media (prefers-reduced-motion:reduce){.seg-opt[data-billing="monthly"]:not(.active){animation:none}}
.seg-wrap{position:relative;display:inline-flex;margin-top:20px}
.seg-save{position:absolute;top:-19px;left:50%;right:0;margin:0;font-size:12px;font-weight:600;color:var(--accent-amber);display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;line-height:1}
.mo-toggle{display:inline-flex;align-items:center;gap:9px;background:transparent;border:0;cursor:pointer;font-family:inherit;padding:4px 2px}
.mo-track{position:relative;width:40px;height:22px;border-radius:999px;background:var(--bg-soft);border:1px solid var(--border);transition:background .2s,border-color .2s;flex:0 0 auto;box-sizing:border-box}
.mo-knob{position:absolute;top:2px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--text-muted);transition:transform .2s,background .2s}
.mo-toggle[data-billing="monthly"] .mo-track{background:var(--accent-amber);border-color:var(--accent-amber)}
.mo-toggle[data-billing="monthly"] .mo-knob{transform:translateX(17px);background:#fff}
.mo-text{font-size:13px;font-weight:600;color:var(--text)}
.seg-badge{font-size:8.5px;font-weight:700;letter-spacing:.2px;text-transform:uppercase;background:var(--accent-amber);color:#0a0a0a;-webkit-text-fill-color:#0a0a0a;padding:2px 6px;border-radius:999px;line-height:1.35}
.billing-row .feat-info{width:15px;height:15px;font-size:9px}
/* Small, unintrusive Monthly switch + plain "-10%" (Jacob, round 18 — matches the pricing widget). */
  .billing-row .mo-toggle{gap:7px;padding:2px}
.billing-row .mo-track{width:32px;height:18px}
.billing-row .mo-knob{width:13px;height:13px;top:2px;left:2px}
.billing-row .mo-toggle[data-billing="monthly"] .mo-knob{transform:translateX(14px)}
.billing-row .mo-text{font-size:12.5px;font-weight:600}
.mo-pct{font-size:11px;font-weight:600;color:var(--accent-amber)}
.billing-row .feat-info{width:14px;height:14px;font-size:8.5px}
/* Choice cards (step 1 & 6) */
  .choices{display:grid;gap:14px}
.choices-3{grid-template-columns:repeat(3,1fr)}
.choices-2{grid-template-columns:repeat(2,1fr)}
.choices-4{grid-template-columns:repeat(4,1fr)}
.seat-choice{align-items:center;text-align:center}
.seat-choice h3{font-size:30px;margin:0}
.seats-intro{color:var(--text-dim);font-size:14px;margin:0 0 16px}
.wr-block{}
.wr-q{font-family:var(--font-sans);font-size:18px;font-weight:600;margin:0 0 4px;color:var(--text)}
.wr-help{margin:0 0 14px}
.wr-cap-note{margin:12px 0 0;font-size:13px;color:var(--text-dim)}
.wr-q-row{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;flex-wrap:wrap}
.wr-q-row .wr-q,.wr-q-row .seats-intro{margin-bottom:0}
.wr-q-row .wr-q{margin-bottom:4px}
.seat-pills{display:flex;gap:8px;flex-shrink:0}
.seat-pill{width:50px;height:50px;border-radius:12px;border:1.5px solid var(--border);background:var(--bg-soft);color:var(--text);font-size:18px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;padding:0}
.seat-pill:hover:not(.disabled){border-color:var(--text-muted)}
.seat-pill.selected{background:var(--a-green,var(--text));color:var(--bg);border-color:var(--a-green,var(--text))}
.seat-pill.disabled{opacity:.32;cursor:not-allowed}
@media (max-width:600px){.seat-pills{width:100%}.seat-pill{flex:1}}
.wr-cap-note a{color:var(--text);font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.seat-choice.disabled{opacity:.4;pointer-events:none;filter:grayscale(.4)}
/* Seat cards centre their content, which would collapse an image to 0 width —
     stretch the per-mic-count photo to fill the card. */
  .seat-choice .choice-img{align-self:stretch;width:100%;margin-bottom:10px}
.seat-choice.has-photo{text-align:center}
.seat-choice.has-photo h3{font-size:24px}
@media (max-width:880px){.choices-3,.choices-2{grid-template-columns:1fr}.choices-4{grid-template-columns:repeat(2,1fr)}}
.choice{position:relative;padding:24px;background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:var(--radius-card);text-align:left;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;gap:8px}
.choice:hover{border-color:var(--text);transform:translateY(-2px)}
.choice.selected{border-color:var(--text);background:var(--bg-card);box-shadow:0 0 0 1px var(--text) inset}
.choice-check{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:transparent;transition:all .2s}
.choice.selected .choice-check{background:var(--bg-deep);border-color:var(--bg-deep);color:var(--bg)}
.choice-icon{width:36px;height:36px;border-radius:8px;background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text);margin-bottom:6px}
.choice h3{font-size:18px;font-weight:600;margin:0;letter-spacing:-.3px}
.choice p{font-size:13px;color:var(--text-muted);margin:0;line-height:1.5}
/* Remote-guest flat fee shown INSIDE the "Yes" choice (a price tag, not above the boxes). */
  .choice-price{align-self:flex-start;margin-top:2px;font-size:14px;font-weight:700;letter-spacing:.2px;color:var(--accent-amber)}
.choice-price:empty{display:none}
.choice-img{aspect-ratio:16/9;background:var(--bg-deep);background-size:cover;background-position:center;border-radius:8px;margin-bottom:14px}
.how-it-works-link{font-size:12px;color:var(--text);font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;align-self:flex-start;margin-top:6px;padding-bottom:1px}
.how-it-works-link:hover{color:var(--text-muted)}
.tier{position:relative;background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:var(--radius-card);padding:32px 28px;text-align:left;cursor:pointer;transition:all .25s;display:flex;flex-direction:column;width:100%;font-family:inherit}
.tier:hover{border-color:var(--text);transform:translateY(-2px)}
.tier.selected{border-color:var(--text);background:var(--bg-card);box-shadow:0 0 0 1px var(--text) inset}
.tier.featured{background:var(--bg-deep);color:var(--on-dark);border-color:var(--bg-deep);box-shadow:0 12px 36px rgba(0,0,0,.14)}
.tier.featured:hover{border-color:var(--bg-deep)}
.tier.quote{background:var(--bg-card);border-style:dashed}
.booking.svc-choosing .summary{display:none}
.booking.svc-choosing .tiers{max-width:1120px;margin:0 auto}
.tier-name{font-size:28px;font-weight:700;letter-spacing:-1px;line-height:1.05;text-transform:none;color:var(--text);margin:0 0 12px;font-family:inherit}
.tier.featured .tier-name{color:rgba(255,255,255,0.65)}
.tier-tagline{font-size:14px;color:var(--text-muted);margin:0 0 26px;line-height:1.55;min-height:42px}
.tier.featured .tier-tagline{color:rgba(255,255,255,0.7)}
.tier-price-block{margin-bottom:24px;display:flex;flex-direction:column;gap:6px}
.tier-from{font-size:11px;font-weight:500;color:var(--text-dim);text-transform:uppercase;letter-spacing:1.4px;line-height:1}
.tier.featured .tier-from{color:rgba(255,255,255,0.55)}
.tier-price-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.tier-price-big{position:relative;font-size:46px;font-weight:600;letter-spacing:-1.6px;line-height:1;color:var(--text)}
.tier-price-pence{font-size:.5em;font-weight:600;letter-spacing:-.5px;vertical-align:baseline}
/* pounds stay large; pence smaller */
  .tier.featured .tier-price-big{color:var(--on-dark)}
.tier-price-big.struck{color:var(--text-muted)}
/* grey the struck full price; it stays the SAME size as one-off */
  .tier.featured .tier-price-big.struck{color:rgba(255,255,255,0.6)}
.tier-price-now{font-size:26px;font-weight:600;letter-spacing:-.8px;line-height:1;color:var(--text)}
.tier.featured .tier-price-now{color:var(--on-dark)}
.tier-price-new{display:flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1}
.tier-price-save{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--accent-amber);line-height:1}
/* Monthly "Save 10%" pill — sits beside the single price (the struck full price
     is gone; the price ROLLS one-off -> discounted on toggle). Tinted from the
     accent so it adapts to either theme + light/dark cards. */
  .tier-price-save-pill{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--accent-amber);background:color-mix(in srgb,var(--accent-amber) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent-amber) 30%,transparent);border-radius:999px;padding:4px 9px;line-height:1;white-space:nowrap}
.tier-price-save-pill[hidden]{display:none}
@keyframes pricePillIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.tier-price-save-pill.pill-in{animation:pricePillIn .35s cubic-bezier(.34,1.56,.64,1) both}
@media (prefers-reduced-motion:reduce){.tier-price-save-pill.pill-in{animation:none}}
/* Monthly: the full price stays in place and is struck (a DRAWN line, so the
     slash can sweep across on a toggle), and the discounted price slides in to
     its right. Resting state is fully struck; .billing-anim replays the draw. */
  .tier-price-big.struck::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:3px;background:currentColor;border-radius:2px;transform:scaleX(1);transform-origin:left}
@keyframes strikeDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes priceReveal{from{opacity:0;transform:translateX(8px) scale(.96)}to{opacity:1;transform:none}}
/* The slash just APPEARS (no left-to-right draw) — it's at scaleX(1) by default. */
  .tiers.billing-anim .tier-price-new{animation:priceReveal .4s ease-out .18s both}
@media (prefers-reduced-motion:reduce){.tiers.billing-anim .tier-price-new{animation:none}}
.tier-price-quote{font-size:32px;font-weight:600;letter-spacing:-1px;line-height:1;color:var(--text)}
.tier.featured .tier-price-quote{color:var(--on-dark)}
.tier-price-sub{font-size:12px;color:var(--text-dim);letter-spacing:.2px;margin-top:2px}
.tier.featured .tier-price-sub{color:rgba(255,255,255,0.55)}
/* A "stated" line (e.g. delivery time): true of the service, not an inclusion.
   Small print with a clock, under the inclusions, just above the button
   (Jacob, 14 Oct 2026). The features list grows (flex:1), so this sits on
   the button whatever the card's length. */
.tier-stated{display:flex;flex-direction:column;align-items:center;gap:2px;margin:-14px 0 12px;font-size:12px;color:var(--text-muted);text-align:center}
.tier-stated span::before{content:"";display:inline-block;width:12px;height:12px;margin:0 6px 2px 0;vertical-align:middle;background:currentColor;opacity:.85;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>") center/contain no-repeat}
.tier.featured .tier-stated{color:rgba(255,255,255,0.7)}
html[data-site-theme="c"] .tier.featured .tier-stated{color:var(--text-muted)}
.tier-divider{height:1px;background:var(--border);margin:0 0 22px}
.tier.featured .tier-divider{background:rgba(255,255,255,0.12)}
.tier-features{list-style:none;margin:0 0 28px;padding:0;flex:1}
.tier-features li{display:flex;align-items:center;gap:11px;padding:7px 0;font-size:14px;line-height:1.4}
.tier-features li.included{color:var(--text)}
.tier.featured .tier-features li.included{color:var(--on-dark)}
.tier-features li.tier-feat-prev{color:var(--text-muted);font-weight:600;font-size:13px;padding:0 0 8px}
.feat-info{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;border:1px solid var(--accent-amber);color:var(--accent-amber);font-size:9px;font-weight:700;font-style:normal;font-family:inherit;line-height:1;cursor:pointer;margin-left:7px;vertical-align:middle;user-select:none;flex-shrink:0}
.feat-info:hover{background:var(--accent-amber);color:var(--bg)}
.tier-features li.excluded{color:var(--text-dim)}
/* explicit "shown as not included" rows carry a spelled-out tag so they can
     never read as included under an "Everything in X, plus:" header (Jacob) */
  .tier-features .excl-tag{display:inline-block;margin-left:6px;padding:2px 7px;border:1px solid var(--border);border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--text-dim);vertical-align:1px;white-space:nowrap}
.tier-features li.tier-feat-excl{color:var(--text-muted);font-weight:600;font-size:13px;padding:10px 0 4px;margin-top:6px;border-top:1px solid var(--border)}
.tier.featured .tier-features li.excluded{color:rgba(255,255,255,0.4)}
.feature-icon{flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center}
li.included .feature-icon{background:rgba(26,26,26,0.06);color:var(--text)}
li.excluded .feature-icon{background:rgba(0,0,0,0.04);color:var(--text-dim)}
.tier.featured li.included .feature-icon{background:rgba(255,255,255,0.1);color:var(--on-dark)}
.tier.featured li.excluded .feature-icon{background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4)}
.feature-asterisk{font-size:13px;color:var(--text-muted);margin-left:2px;font-weight:600;cursor:help;border-bottom:1px dashed currentColor}
.tier-cta{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;background:transparent;border:1px solid var(--text);border-radius:var(--radius-btn);color:var(--text);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;margin-top:auto;font-family:inherit}
.tier-cta:hover{background:var(--text);color:var(--bg)}
.tier.featured .tier-cta{background:var(--on-dark);color:var(--bg-deep);border-color:var(--on-dark)}
.tier.featured .tier-cta:hover{background:#fff}
.tier.selected .tier-cta{background:var(--text);color:var(--bg);border-color:var(--text)}
.tier.featured.selected .tier-cta{background:var(--on-dark);color:var(--bg-deep);border-color:var(--on-dark)}
.tier-popular{position:absolute;top:-12px;left:24px;z-index:5;background:#FFE5E5;color:#000;font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;padding:6px 11px;border-radius:5px;line-height:1;box-shadow:0 4px 14px rgba(0,0,0,0.12)}
.cal-arrow{flex:0 0 auto;align-self:center;background:transparent;border:1px solid var(--border);color:var(--text);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s;font-family:inherit}
.cal-arrow:hover{border-color:var(--text);background:var(--bg-card)}
.cal-panels{display:flex;gap:36px;align-items:flex-start;flex:1;min-width:0;justify-content:center}
.cal-col{flex:1 1 0;min-width:0;max-width:560px;background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:var(--radius-card);padding:22px 24px;box-sizing:border-box}
.cal-mlabel{margin:0 0 14px;font-size:16px;font-weight:600;letter-spacing:-.3px;text-align:center}
.cal-shell .cal-grid{gap:5px}
.cal-shell .cal-day{aspect-ratio:1;font-size:14px;height:auto}
.cal-times-col{display:none;width:264px;flex:0 0 auto;flex-direction:column;background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:var(--radius-card);padding:20px;box-sizing:border-box}
.cal-shell.picking-time .cal-col-b{display:none}
.cal-shell.picking-time .cal-arrow{visibility:hidden}
.cal-shell.picking-time .cal-times-col{display:flex;animation:timesIn .34s cubic-bezier(.34,1.08,.5,1) both}
@keyframes timesIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.times-back{align-self:flex-start;background:transparent;border:0;color:var(--text-muted);font-size:12.5px;cursor:pointer;padding:0 0 12px;display:inline-flex;align-items:center;gap:4px;font-family:inherit}
.times-back:hover{color:var(--text)}
.cal-times-col .slots-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:316px;overflow-y:auto;align-content:start}
@media (prefers-reduced-motion:reduce){.cal-shell.picking-time .cal-times-col{animation:none}}
.cal-shell{display:flex;align-items:stretch;justify-content:center;gap:14px;background:transparent;border:0;padding:0;box-sizing:border-box;width:100%;max-width:1180px;margin:0 auto}
@media (max-width:760px){
    .cal-shell{padding:18px 6px;gap:3px}
    .cal-panels{flex-direction:column;align-items:center;gap:18px}
    .cal-col,.cal-times-col{width:min(320px,82vw)}
  }
.duration-picker{background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:var(--radius-card);padding:16px 30px;display:flex;align-items:center;gap:32px;flex-wrap:wrap;width:100%;max-width:1180px;margin:0 auto;box-sizing:border-box}
.duration-meta{display:flex;flex-direction:column;gap:8px;flex-shrink:0;width:230px}
.duration-meta-row{display:flex;align-items:baseline;gap:14px}
.duration-picker-label{font-size:11px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-dim);flex-shrink:0}
.duration-picker-value{font-size:22px;font-weight:600;letter-spacing:-.4px;line-height:1;display:inline-block;min-width:110px}
.duration-info-btn{background:none;border:0;padding:0;color:var(--text);font-size:12px;font-weight:500;cursor:pointer;letter-spacing:.1px;display:inline-flex;align-items:center;gap:4px;text-align:left;width:fit-content;font-family:inherit}
.duration-info-btn:hover{text-decoration:underline}
.duration-info-btn::after{content:"›";font-size:14px;line-height:1}
.duration-slider-wrap{flex:1;min-width:280px;position:relative;padding-top:24px;padding-bottom:4px}
.slider-popular{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.slider-popular-label{font-size:9px;font-weight:600;color:var(--text);letter-spacing:.6px;text-transform:uppercase;white-space:nowrap;background:var(--bg-card);border:1px solid var(--border);padding:2px 6px;border-radius:4px}
.duration-slider{width:100%;-webkit-appearance:none;appearance:none;height:6px;background:var(--border);border-radius:3px;outline:none;cursor:pointer;display:block}
.duration-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--bg-deep);cursor:pointer;border:2px solid var(--bg-card)}
.duration-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--bg-deep);cursor:pointer;border:2px solid var(--bg-card)}
.duration-marks{position:relative;height:26px;margin-top:8px}
.duration-mark{position:absolute;top:8px;font-size:10px;color:var(--text-dim);letter-spacing:.4px;white-space:nowrap;transform:translateX(-50%)}
.duration-mark[data-pos="start"]{transform:none}
.duration-mark[data-pos="end"]{transform:translateX(-100%)}
.duration-mark::before{content:"";position:absolute;top:-10px;left:50%;width:1px;height:6px;background:var(--border);transform:translateX(-50%)}
.duration-mark[data-pos="start"]::before{left:0;transform:none}
.duration-mark[data-pos="end"]::before{left:auto;right:0;transform:none}
.duration-mark.popular{color:var(--text);font-weight:600}
.duration-mark.popular::before{background:var(--text);opacity:.7;height:8px;top:-12px}
/* Hot-centre duration slider (the bar's own colour glows brightest at the recommended 4h). */
  .duration-slider-wrap.hd-wrap{padding-top:6px;padding-bottom:2px;-webkit-user-select:none;user-select:none}
.hd-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* hidden value + event holder; the custom UI drives it */
  .hd-inner{position:relative;height:24px;margin:38px 11px 0}
.hd-track{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:8px;border-radius:999px;background-image:linear-gradient(90deg,color-mix(in srgb,var(--accent-amber) 5%,transparent),color-mix(in srgb,var(--accent-amber) 22%,transparent) 33.33%,color-mix(in srgb,var(--accent-amber) 5%,transparent))}
.hd-fill{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent-amber) 27%,#000) 0%,var(--accent-amber) 33.33%,color-mix(in srgb,var(--accent-amber) 27%,#000) 100%);clip-path:inset(0 100% 0 0 round 999px);transition:clip-path .18s cubic-bezier(.34,1.06,.5,1)}
.hd-thumb{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--accent-amber);box-shadow:0 2px 7px rgba(0,0,0,.5);cursor:grab;z-index:3;transition:left .18s cubic-bezier(.34,1.06,.5,1),transform .12s ease}
.hd-thumb:active{cursor:grabbing}
.hd-thumb.grab{transform:translate(-50%,-50%) scale(1.14)}
.hd-bubble{position:absolute;bottom:28px;transform:translateX(-50%);background:var(--accent-amber);color:#0a0a0a;font-size:13px;font-weight:700;padding:5px 11px;border-radius:9px;white-space:nowrap;pointer-events:none;box-shadow:0 6px 14px rgba(0,0,0,.45);z-index:4;transition:left .18s cubic-bezier(.34,1.06,.5,1),transform .14s ease}
.hd-bubble::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--accent-amber);border-bottom:0}
.hd-bubble.grab{transform:translateX(-50%) scale(1.07)}
.hd-marks{position:relative;height:16px;margin:9px 11px 0;font-size:11px;color:var(--text-dim)}
.hd-mark{position:absolute;transform:translateX(-50%);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.hd-fill,.hd-thumb,.hd-bubble{transition:none}}
/* PHONE date-step layout (Jacob, round 18) — placed AFTER the base date-step + slider
     rules so it wins at equal specificity. Full-width calendar with the month arrows
     overlaid on the header, and a slim single-row duration bar. */
  @media (max-width:620px){
    .step-card{padding:22px 16px}
    .cal-shell{padding:0;gap:0;position:relative}
    .cal-panels{width:100%}
    /* One month at a time on phones — less vertical space (Jacob, round 18); the
       arrows step through the months. */
    .cal-col-b{display:none}
    /* Consistent 14px inset all round: the date grid AND the arrows sit the same
       distance from the calendar card's edge (Jacob, round 18). */
    .cal-col,.cal-times-col{width:100%;max-width:none;padding:16px 14px}
    .cal-shell .cal-day{font-size:14px}
    .cal-col .cal-mlabel{padding:0 44px;margin-bottom:14px}
    #calPrev,#calNext{position:absolute;top:10px;z-index:3;width:34px;height:34px;font-size:19px}
    #calPrev{left:14px}
    #calNext{right:14px}
    .duration-picker{padding:10px 14px 8px;gap:2px}
    .duration-meta{width:auto;flex:1 1 100%;flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px}
    .duration-slider-wrap,.duration-slider-wrap.hd-wrap{flex:1 1 100%;min-width:0;padding-top:0}
    .hd-inner{margin-top:34px}
    .hd-marks{margin-top:6px}
  }
/* DESKTOP date-step layout — match the phone treatment: the two month cards
     stretch to the edges of the container and the month arrows are pulled INSIDE,
     overlaid on each month's header (prev over the left month, next over the
     right month), instead of floating out on the far edges of the page. */
  @media (min-width:761px){
    .cal-shell{position:relative}
    .cal-col{max-width:none}
    #calPrev,#calNext{position:absolute;top:16px;z-index:3}
    #calPrev{left:18px}
    #calNext{right:18px}
    .cal-col .cal-mlabel{padding:0 40px}
  }
/* Date step: the calendar is the full-width HERO; start times are chosen in a
     pop-out (#timeModal) so the page isn't cluttered with both at once. */
  .date-row{display:block}
.calendar{background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:var(--radius-card);padding:24px 28px;width:100%;max-width:680px;margin:0 auto;box-sizing:border-box}
.cal-hint{margin:18px 0 2px;text-align:center;font-size:13px;color:var(--text-dim)}
.cal-hint.chosen{color:var(--text);font-weight:500}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.cal-head h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.3px}
.cal-nav{display:flex;gap:6px}
.cal-nav button{width:30px;height:30px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);color:var(--text);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .2s;font-family:inherit}
.cal-nav button:hover{background:var(--bg-deep);color:var(--bg);border-color:var(--bg-deep)}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.dow{font-size:10px;color:var(--text-dim);letter-spacing:1.2px;text-transform:uppercase;text-align:center;padding:8px 0;font-weight:500}
.cal-day{aspect-ratio:1;border:1px solid transparent;border-radius:var(--radius-btn);background:transparent;color:var(--text);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;font-weight:500;transition:all .15s;min-width:0}
/* Available days read as soft, tappable chips so the open days clearly stand out;
     unavailable days quietly recede — faint + flat, NO messy strikethrough. */
  .cal-day:not(.unavailable):not(.muted){background:var(--bg-card);border-color:var(--border)}
.cal-day:hover:not(:disabled){border-color:var(--text);background:var(--bg-soft);transform:translateY(-1px)}
.cal-day.today:not(.selected):not(.unavailable){box-shadow:inset 0 0 0 1.5px var(--text);font-weight:700}
/* Three tiers: AVAILABLE (the chip above) · BOOKED-OUT (.full — faded, DASHED
     border, clickable for the cancellation list) · CLOSED/past (ghost, inert). */
  .cal-day.unavailable{color:var(--text-dim);opacity:.25;cursor:not-allowed;pointer-events:none;background:transparent;border-color:transparent}
.cal-day.full{opacity:.62;cursor:pointer;pointer-events:auto;background:transparent;border:1px dashed var(--text-dim)}
.cal-day.full:hover{opacity:1;background:transparent;border:1px dashed var(--text);transform:translateY(-1px)}
.cal-day.muted{visibility:hidden}
/* Scarcity tint — how booked the studio already is that day. Selected/unavailable states still win. */
  .cal-day.busy-low{background:rgba(70,150,90,.16);border-color:rgba(70,150,90,.30)}
.cal-day.busy-mid{background:rgba(200,150,40,.20);border-color:rgba(200,150,40,.38)}
.cal-day.busy-high{background:rgba(190,70,55,.20);border-color:rgba(190,70,55,.40)}
.cal-day.busy-full{background:rgba(150,150,150,.20);border-color:rgba(150,150,150,.35);color:var(--text-dim)}
.cal-day.selected{background:var(--bg-deep) !important;color:var(--bg) !important;border-color:var(--bg-deep) !important}
.cal-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;font-size:11px;color:var(--text-muted)}
.cal-legend span{display:inline-flex;align-items:center;gap:5px}
.cal-legend i{width:11px;height:11px;border-radius:3px;border:1px solid transparent;display:inline-block}
.cal-legend i.busy-low{background:rgba(70,150,90,.16);border-color:rgba(70,150,90,.30)}
.cal-legend i.busy-mid{background:rgba(200,150,40,.20);border-color:rgba(200,150,40,.38)}
.cal-legend i.busy-high{background:rgba(190,70,55,.20);border-color:rgba(190,70,55,.40)}
.time-slots-panel{background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:var(--radius-card);padding:22px 26px}
.time-slots-panel h4{font-size:11px;color:var(--text-dim);font-weight:500;letter-spacing:1.4px;text-transform:uppercase;margin:0 0 14px}
.slots-list{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;max-height:420px;overflow-y:auto}
.slots-empty{color:var(--text-dim);font-size:13px;font-style:italic;grid-column:1/-1;padding:12px 0}
.slot{padding:8px 12px;background:var(--bg-card);border:1px solid var(--border);color:var(--text);font-size:13px;font-weight:500;border-radius:var(--radius-btn);cursor:pointer;font-family:inherit;transition:all .15s}
.slot:hover:not(:disabled){border-color:var(--text)}
.slot.selected{background:var(--bg-deep);color:var(--bg);border-color:var(--bg-deep)}
.slot.unavailable{color:var(--text-dim);cursor:not-allowed;text-decoration:line-through;opacity:.5}
/* Time pop-out — choose a start time after picking a day (keeps the calendar clean). */
  .time-modal{position:fixed;inset:0;background:rgba(0,0,0,0.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:1000;display:none;align-items:center;justify-content:center;padding:24px;animation:fadeIn .25s ease}
.time-modal.open{display:flex}
.time-modal-card{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius-card);width:420px;max-width:92vw;max-height:88vh;overflow-y:auto;position:relative;padding:26px;box-shadow:0 30px 80px rgba(0,0,0,0.4);animation:pickPop .3s cubic-bezier(.34,1.3,.5,1)}
.time-modal-close{position:absolute;top:14px;right:14px;background:var(--bg-deep);border:0;color:var(--bg);font-size:22px;cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1}
.time-modal-title{margin:0 0 2px;font-size:19px;font-weight:600;letter-spacing:-.3px;padding-right:34px}
.time-modal-sub{margin:0 0 18px;font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1.2px;font-weight:500}
.time-modal .slots-list{grid-template-columns:1fr 1fr;max-height:54vh}
@media (prefers-reduced-motion:reduce){.time-modal-card{animation:none}}
/* Cancellation-list form (reuses the .time-modal overlay). */
  .wl-field{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.7px;font-weight:600}
.wl-input{width:100%;box-sizing:border-box;padding:10px 12px;background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-btn);color:var(--text);font-family:inherit;font-size:14px;text-transform:none;letter-spacing:0;font-weight:400}
.wl-input:focus{outline:none;border-color:var(--text)}
/* Time slots cascade in when they first appear after a date is picked (the
     'cascade' class is added only on a fresh load, never on a re-select). */
  @keyframes slotIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.slots-list.cascade .slot{animation:slotIn .34s cubic-bezier(.22,.61,.36,1) both}
@media (prefers-reduced-motion:reduce){.slots-list.cascade .slot{animation:none}}
/* Subtle, classy micro-motion: calendar days fade in on month change, and a day/slot
     gives a gentle pop when picked. */
  @keyframes calFade{from{opacity:0}to{opacity:1}}
@keyframes pickPop{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}}
.cal-grid .cal-day{animation:calFade .3s ease both}
.cal-day.selected{animation:pickPop .28s cubic-bezier(.34,1.3,.5,1)}
@media (prefers-reduced-motion:reduce){.cal-grid .cal-day,.cal-day.selected{animation:none}}
/* Step 4 — Setups */
  .setup-availability-note{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--bg-soft);border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--text-muted);margin-bottom:18px}
.setup-availability-note svg{flex-shrink:0}
.setup-availability-note strong{color:var(--text);font-weight:500}
.setup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:680px){.setup-grid{grid-template-columns:1fr 1fr;gap:10px}}
/* Step 5 — Add-ons */
  .addons-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* Delivery step — a reassuring "what happens next" timeline with inline
     dropdown choices for turnaround + how it's delivered. Namespaced dv-*. */
  .dv-hero{margin:0 0 22px}
.dv-eyebrow{margin:0 0 8px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent-amber);font-weight:600}
.dv-title{margin:0 0 10px;font-size:25px;font-weight:600;letter-spacing:-.6px;color:var(--text)}
.dv-text{margin:0;font-size:14px;line-height:1.6;color:var(--text-muted);max-width:600px}
.dv-strong{color:var(--text);font-weight:600}
.dv-panel{background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:var(--radius-card);padding:26px 30px;margin:22px 0 14px}
.dv-tl{display:flex;flex-direction:column}
.dv-step{display:flex;gap:18px;padding:13px 0;position:relative}
.dv-step::after{content:"";position:absolute;left:19px;top:54px;bottom:-2px;width:2px;background:var(--border)}
.dv-step:last-child::after{display:none}
.dv-step.booked::after{background:linear-gradient(180deg, var(--a-green, var(--bg-deep)) 0%, var(--border) 100%)}
.dv-ico{width:40px;flex-shrink:0;display:flex;justify-content:center;align-items:flex-start;z-index:1}
.dv-dot{width:40px;height:40px;flex:0 0 40px;align-self:flex-start;box-sizing:border-box;border-radius:50%;background:var(--bg-card);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
.dv-dot.dv-done{background:var(--a-green, var(--bg-deep));border-color:var(--a-green, var(--bg-deep));color:#000}
.dv-dot svg{width:18px;height:18px}
.dv-c{padding-top:3px;min-width:0}
.dv-t{font-size:16px;font-weight:600;color:var(--text)}
.dv-d{font-size:14px;color:var(--text-muted);margin-top:4px;line-height:1.7}
.dv-d b{color:var(--text);font-weight:600}
.dv-sub{font-size:12.5px;color:var(--text-dim);margin-top:6px;line-height:1.55}
.dv-wrap{position:relative;display:inline-block}
.dv-tok{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:700;color:var(--text);background:var(--bg-card);border:1px solid var(--border);border-radius:7px;padding:1px 9px;cursor:pointer;line-height:1.5;white-space:nowrap;transition:background .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease}
.dv-tok:hover{background:color-mix(in srgb, var(--a-green, var(--accent-amber)) 16%, transparent);border-color:color-mix(in srgb, var(--a-green, var(--accent-amber)) 55%, transparent);transform:translateY(-1px);box-shadow:0 5px 14px color-mix(in srgb, var(--a-green, var(--accent-amber)) 22%, transparent)}
.dv-tok.open{background:color-mix(in srgb, var(--a-green, var(--accent-amber)) 18%, transparent);border-color:color-mix(in srgb, var(--a-green, var(--accent-amber)) 60%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--a-green, var(--accent-amber)) 16%, transparent)}
.dv-caret{font-size:9px;opacity:.7;margin-top:1px;transition:transform .18s}
.dv-tok.open .dv-caret{transform:rotate(180deg)}
.dv-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:40;width:366px;max-width:86vw;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;box-shadow:0 24px 54px rgba(0,0,0,.34);padding:8px;display:none;animation:dvIn .16s ease-out}
.dv-menu.open{display:block}
/* Checkout delivery — Variant J "statement rows" (2 July 2026, Jacob's pick):
     we STATE what happens (turnaround + delivery method); the ⚡ Express pill
     and the Change link are the only affordances. The pill carries a soft
     glow-pulse + shimmer sweep so it draws the eye without shouting. */
  .co-del{margin:6px 0 20px}
.cod-row{display:flex;align-items:center;gap:14px;padding:14px 0}
.cod-sep{font-size:10.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);padding:13px 0 3px;border-top:1px solid var(--border);margin-top:2px}
.cod-sep + .cod-row{border-top:0}
.cod-row + .cod-row, .cod-reveal + .cod-row{border-top:1px solid var(--border)}
.cod-ic{width:36px;height:36px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--text)}
.cod-ic svg{width:16px;height:16px}
.cod-b{flex:1;min-width:0}
.cod-t{display:block;font-size:14px;font-weight:700}
.cod-t b{color:var(--a-green,var(--accent-amber,#16a34a))}
.cod-d{display:block;font-size:12.5px;color:var(--text-dim);margin-top:1px}
.cod-chg{background:none;border:0;color:var(--text-dim);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.cod-chg:hover{color:var(--text)}
.cod-zap{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font:inherit;padding:5px 12px 5px 10px;border-radius:11px;cursor:pointer;white-space:nowrap;transition:border-color .18s ease,background .18s ease,color .18s ease}
.cod-zap .cz-ic{font-size:14px;line-height:1;color:var(--a-green,var(--accent-amber))}
.cod-zap .cz-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left}
.cod-zap .cz-txt b{font-size:12.5px;font-weight:700;color:var(--text)}
.cod-zap .cz-txt span{font-size:10.5px;font-weight:500;color:var(--text-dim)}
.cod-zap::before{content:"";position:absolute;top:0;bottom:0;left:-100%;width:100%;background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--a-green,var(--accent-amber)) 16%,transparent) 45%,color-mix(in srgb,var(--a-green,var(--accent-amber)) 22%,transparent) 50%,color-mix(in srgb,var(--a-green,var(--accent-amber)) 16%,transparent) 55%,transparent);animation:codWave 3.6s ease-in-out infinite;pointer-events:none}
.cod-zap:hover{border-color:var(--a-green,var(--accent-amber))}
.cod-zap.added{background:var(--a-green,var(--accent-amber));border-color:var(--a-green,var(--accent-amber));animation:none}
.cod-zap.added::before{display:none}
.cod-zap.added .cz-ic{color:#04220f}
.cod-zap.added .cz-txt b{color:#04220f}
.cod-zap.added .cz-txt span{color:var(--a-green,#1c5b31)}
@keyframes codWave{0%{left:-100%}55%,100%{left:100%}}
@media (prefers-reduced-motion:reduce){.cod-zap::before{display:none}}
/* Phone-width: the Express pill / nowrap controls would otherwise crush the
     statement text to a sliver, so let the row wrap and sit the pill under the
     text (indented past the 36px icon + 14px gap). */
  @media (max-width:560px){
    .cod-row{flex-wrap:wrap}
    .cod-b{flex:1 1 0;min-width:55%}
    .cod-zap{margin-left:50px}
  }
.cod-reveal{display:none;border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:2px 0 14px}
.cod-reveal.open{display:block}
.cod-opt{display:flex;align-items:center;gap:11px;padding:11px 14px;cursor:pointer}
.cod-opt + .cod-opt{border-top:1px solid var(--border)}
.cod-opt:hover{background:rgba(127,127,127,.07)}
.cod-radio{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--text-dim);flex:0 0 auto;position:relative}
.cod-opt.sel .cod-radio{border-color:var(--a-green,var(--accent-amber))}
.cod-opt.sel .cod-radio::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--a-green,var(--accent-amber))}
.cod-n{flex:1;font-size:13.5px;font-weight:600}
.cod-n small{display:block;font-weight:400;font-size:12px;color:var(--text-dim)}
.cod-n .rec{font-weight:500;font-size:11.5px;color:var(--text-dim);margin-left:8px}
.cod-lock{display:block;font-weight:400;font-size:11.5px;color:var(--text-dim);margin-top:2px;font-style:italic}
.cod-p{font-size:13px;font-weight:600;white-space:nowrap}
.cod-p.free{color:var(--text-dim);font-weight:400}
.cod-eps{display:none;align-items:center;gap:10px;padding:9px 14px 11px 42px;border-top:1px dashed var(--border);font-size:12.5px;color:var(--text-dim)}
.cod-eps.show{display:flex}
@keyframes dvIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.dv-head{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);font-weight:700;padding:8px 13px 9px}
.dv-opt{position:relative;display:flex;gap:12px;align-items:flex-start;padding:12px 13px;border-radius:11px;cursor:pointer;border:1.5px solid transparent;transition:background .16s ease,border-color .16s ease}
.dv-opt:hover{background:color-mix(in srgb, var(--text) 6%, var(--bg-soft));border-color:var(--border)}
.dv-opt.sel{border-color:color-mix(in srgb, var(--a-green, var(--text)) 45%, transparent);background:color-mix(in srgb, var(--a-green,#8a7a66) 9%, var(--bg-soft))}
.dv-oic{position:relative;flex-shrink:0;width:34px;height:34px;border-radius:9px;background:var(--bg-soft);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
.dv-opt.sel .dv-oic{background:color-mix(in srgb, var(--a-green,#8a7a66) 16%, transparent);border-color:color-mix(in srgb, var(--a-green,var(--accent-amber)) 45%, transparent);color:var(--a-green, var(--accent-amber))}
.dv-opt.sel .dv-oic::after{content:"✓";position:absolute;top:-6px;right:-6px;width:17px;height:17px;border-radius:50%;background:var(--a-green, var(--accent-amber));color:#0b0b0b;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg-card)}
.dv-oic svg{width:18px;height:18px}
.dv-obody{flex:1;min-width:0;padding-top:1px}
.dv-orow{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.dv-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap}
.dv-price{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap}
.dv-price.free{color:var(--a-green, var(--accent-amber));font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.dv-price .unit{font-weight:400;color:var(--text-dim);font-size:11px}
.dv-odesc{font-size:12px;color:var(--text-muted);margin-top:4px;line-height:1.45}
.dv-eps{font-weight:400;color:var(--text-dim);font-size:11px}
.dv-bul{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.dv-bul span{font-size:11.5px;color:var(--text);position:relative;padding-left:17px;line-height:1.4}
.dv-bul span::before{content:"✓";position:absolute;left:0;color:var(--a-green, var(--accent-amber));font-weight:700}
.dv-tag{position:absolute;top:-8px;right:13px;background:var(--a-green, var(--accent-amber));color:#0b0b0b;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:6px}
.dv-opt.locked .dv-oic,.dv-opt.locked .dv-name,.dv-opt.locked .dv-price,.dv-opt.locked .dv-odesc,.dv-opt.locked .dv-bul{opacity:.5}
.dv-upg{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:11.5px;font-weight:700;color:var(--a-green, var(--accent-amber))}
.dv-upg svg{width:13px;height:13px}
.dv-qty{display:inline-flex;align-items:center;gap:11px;margin-top:11px;padding:8px 13px;border:1px solid var(--border-soft);border-radius:var(--radius-btn);background:var(--bg-card)}
.dv-qty-label{font-size:12.5px;font-weight:500;color:var(--text)}
.dv-qty-btn{width:28px;height:28px;border-radius:7px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text);font-size:16px;cursor:pointer;font-family:inherit;line-height:1}
.dv-qty-n{min-width:22px;text-align:center;font-weight:600}
.dv-hint{margin:2px 2px 0;font-size:12.5px;color:var(--text-dim)}
.dv-hint .k{color:var(--text-muted);font-weight:600}
.dv-flag{margin-top:12px;font-size:11.5px;color:var(--text-dim);font-style:italic;line-height:1.5}
@media (max-width:600px){.dv-panel{padding:20px 18px}}
@media (max-width:880px){.addons-list{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.addons-list{grid-template-columns:1fr}}
.addon{position:relative;background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:var(--radius-card);display:flex;flex-direction:column;transition:all .2s;cursor:pointer;margin-top:14px;overflow:hidden}
.addon:hover{border-color:var(--text);transform:translateY(-2px)}
.addon.selected{border-color:var(--text);background:var(--bg-card);box-shadow:0 0 0 1px var(--text) inset}
.addon.popular{background:var(--bg-card)}
.addon-popular{position:absolute;top:10px;left:10px;z-index:4;background:#FFE5E5;color:#000;font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;padding:6px 11px;border-radius:5px;box-shadow:0 4px 14px rgba(0,0,0,0.12)}
.addon-info-btn{position:absolute;top:8px;right:8px;z-index:3;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:13px;background:rgba(255,255,255,0.92);border:0;color:var(--text);cursor:pointer;font-size:11px;font-weight:500;font-family:inherit;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all .15s}
.addon-info-btn:hover{background:#fff}
.addon-img{aspect-ratio:16/10;background:var(--bg-deep);background-size:cover;background-position:center}
.addon-img,.addon-vid{flex:none}
.addon-body{padding:16px 18px 12px;flex:1;display:flex;flex-direction:column;gap:6px}
.addon-body h4{font-size:15px;font-weight:600;margin:0;letter-spacing:-.2px}
.addon-body p{font-size:13px;color:var(--text-muted);line-height:1.5;margin:0}
.addon-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 18px 16px}
.addon-qty{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:var(--radius-btn,10px);padding:5px 9px;font-weight:600;font-variant-numeric:tabular-nums}
.addon-qty button{background:none;border:0;cursor:pointer;font-size:16px;line-height:1;color:var(--text);padding:0 2px;font-family:inherit}
/* Selected quantity add-on: fill the stepper box so it reads as "added",
     matching the green/olive "Added" button on the other add-ons (Jacob, 22 Jul). */
  .addon-qty.added{background:var(--text);border-color:var(--text);color:var(--bg)}
.addon-qty.added button{color:var(--bg)}
.addon-price{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap}
.addon-price .unit{font-weight:400;color:var(--text-dim);font-size:11px;margin-left:2px}
.addon-add-btn{padding:8px 18px;background:transparent;border:1px solid var(--text);border-radius:var(--radius-btn);color:var(--text);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap;font-family:inherit}
.addon-add-btn:hover{background:var(--text);color:var(--bg)}
.addon.selected .addon-add-btn{background:var(--text);color:var(--bg)}
.addon.selected .addon-add-btn::before{content:"✓ ";margin-right:2px;font-weight:700}
/* Popular add-ons match the Popular pricing card (Jacob, 22 Jul): a terracotta
     outline + a POPULAR pill poking halfway out the top. overflow must be visible
     for the pill, so the image keeps its own rounded top corners; the footer wraps
     so a selected quantity add-on's Add button can never be clipped. */
  .addon{overflow:visible}
.addon-img,.addon-vid{border-radius:var(--radius-card) var(--radius-card) 0 0}
.addon-popular{top:-12px;left:24px}
html[data-site-theme="c"] .addon.popular{border:2px solid var(--c-accent);box-shadow:0 18px 44px rgba(44,32,18,.16)}
/* The popular card's 2px border rounds at the card radius; the image's top
     corners must nest INSIDE it or the square image corner clips the rounded
     border, which reads as a "cut" corner (Jacob, 23 Jul). */
  html[data-site-theme="c"] .addon.popular .addon-img,
  html[data-site-theme="c"] .addon.popular .addon-vid{border-radius:calc(var(--radius-card) - 2px) calc(var(--radius-card) - 2px) 0 0}
.addon-footer{flex-wrap:wrap}
.addon-footer .addon-add-btn{margin-left:auto}
/* Remote pop-out: a bit more room + larger choice images. */
  #remoteModal .time-modal-card{width:720px;padding:34px 40px}
  /* Fallback: the remote question rendered inline when the pop-out cannot open (booking-flow.js remoteFallback). */
  .wr-remote-inline{margin-top:28px;padding-top:24px;border-top:1px solid var(--border-soft)}
  .wr-remote-inline .time-modal-title{padding-right:0}
#remoteModal .choice-img{aspect-ratio:4/3;margin-bottom:12px}
/* Phone: the wider desktop modal + 4:3 photos are far too tall — tighten the
     padding and use shorter 16:9 photos so the whole box fits (Jacob, 23 Jul). */
  @media (max-width:600px){
    #remoteModal .time-modal-card{width:100%;padding:22px 18px}
    #remoteModal .choice-img{aspect-ratio:16/9;margin-bottom:10px}
    #remoteModal .choice{padding:12px}
  }
/* Generic modals */
  .info-modal,.how-modal,.auth-modal,.contact-modal{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:1100;display:none;align-items:center;justify-content:center;padding:24px;animation:fadeIn .25s ease}
.info-modal.open,.how-modal.open,.auth-modal.open,.contact-modal.open{display:flex}
.info-card,.how-modal-card,.auth-card,.contact-card{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius-card);max-width:560px;width:100%;max-height:92vh;overflow:auto;position:relative;box-shadow:0 30px 80px rgba(0,0,0,0.3);display:flex;flex-direction:column}
.how-modal-card{max-width:680px}
.info-close,.how-modal-close,.auth-close,.contact-close{position:absolute;top:14px;right:14px;background:var(--bg-soft);border:1px solid var(--border);color:var(--text);font-size:20px;cursor:pointer;width:34px;height:34px;border-radius:50%;z-index:3;display:flex;align-items:center;justify-content:center;line-height:1;transition:all .2s;font-family:inherit}
.info-close:hover,.how-modal-close:hover,.auth-close:hover,.contact-close:hover{background:var(--bg-deep);color:var(--bg);border-color:var(--bg-deep)}
.info-img{aspect-ratio:16/10;background:var(--bg-deep);background-size:cover;background-position:center}
.info-img video{width:100%;height:100%;object-fit:cover;display:block}
.info-body{padding:28px 32px 26px;display:flex;flex-direction:column;gap:14px}
.info-body h3{margin:0;font-size:24px;font-weight:600;letter-spacing:-.5px}
.info-price{margin:0;font-size:14px;color:var(--text);font-weight:600;letter-spacing:.2px}
.info-desc{margin:0;font-size:14px;color:var(--text-muted);line-height:1.65}
.info-bullets{list-style:none;padding:0;margin:6px 0;display:flex;flex-direction:column;gap:10px}
.info-bullets li{display:flex;align-items:flex-start;gap:11px;font-size:13px;color:var(--text);line-height:1.55}
.info-bullets li::before{content:"";flex-shrink:0;width:5px;height:5px;border-radius:50%;background:var(--text);margin-top:8px}
.info-cta-row{display:flex;gap:10px;margin-top:8px;justify-content:flex-end}
.info-cta-secondary{padding:11px 18px;background:transparent;border:1px solid var(--border);color:var(--text);border-radius:var(--radius-btn);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .2s}
.info-cta-secondary:hover{border-color:var(--text)}
.info-cta-primary{padding:11px 18px;background:var(--bg-deep);color:var(--bg);border-radius:var(--radius-btn);font-size:13px;font-weight:500;cursor:pointer;border:0;font-family:inherit;transition:background .2s}
.info-cta-primary:hover{background:var(--bg-deep-soft)}
.info-cta-primary.added{background:var(--text-muted)}
.duration-help-card{max-width:600px}
.duration-help-card .info-body{padding:32px}
.duration-help-list{list-style:none;padding:0;margin:18px 0 4px;display:flex;flex-direction:column;gap:11px}
.duration-help-list li{display:flex;align-items:flex-start;gap:14px;padding:13px 16px;background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:8px;font-size:13px;line-height:1.55;color:var(--text-muted)}
.duration-help-list li::before{content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--text);margin-top:8px}
.duration-help-list strong{color:var(--text);font-weight:600;white-space:nowrap;flex-shrink:0;letter-spacing:-.1px}
.duration-help-tip{margin-top:18px !important;padding:14px 16px;background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:8px;font-size:13px !important}
.duration-help-tip strong{color:var(--text)}
.duration-help-video{aspect-ratio:16/9;width:100%;border-radius:var(--radius-card);overflow:hidden;background:var(--bg-deep);display:flex;align-items:center;justify-content:center;margin:4px 0 20px}
.duration-help-video span{color:var(--on-dark,#fff);opacity:.6;font-size:13px;letter-spacing:.2px}
.duration-help-video iframe,.duration-help-video video{width:100%;height:100%;border:0;display:block}
.dur-calc{display:flex;flex-direction:column;gap:18px}
.dur-q-label{display:block;font-weight:600;color:var(--text);font-size:14px;margin-bottom:9px}
.dur-input-row{display:flex;align-items:center;gap:10px}
.dur-input{width:96px;padding:10px 12px;border:1px solid var(--border-soft);border-radius:8px;background:var(--bg-soft);color:var(--text);font-size:15px;font-weight:600}
.dur-input:focus{outline:none;border-color:var(--text)}
.dur-unit{color:var(--text-muted);font-size:13px}
.dur-result{margin-top:4px;padding:18px 20px;background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:var(--radius-card);text-align:center}
.dur-result-head{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-dim);font-weight:600}
.dur-result-big{font-size:30px;font-weight:700;color:var(--text);margin:4px 0 8px;letter-spacing:-.5px}
.dur-result-why{font-size:13px;line-height:1.55;color:var(--text-muted);margin:0 0 16px}
.dur-overflow{font-size:13px;line-height:1.55;color:var(--text-muted);background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:8px;padding:14px 16px;margin-top:4px}
.dur-overflow a{color:var(--text);font-weight:600}
.dur-guide{margin-top:20px;border-top:1px solid var(--border-soft);padding-top:14px}
.dur-guide summary{cursor:pointer;font-weight:600;color:var(--text);font-size:14px;list-style:none}
.dur-guide summary::-webkit-details-marker{display:none}
.dur-guide summary::before{content:"▸ ";color:var(--text-dim)}
.dur-guide[open] summary::before{content:"▾ "}
.how-modal-img{aspect-ratio:16/8;background:var(--bg-deep);background-size:cover;background-position:center}
.how-modal-body{padding:32px}
.how-modal-body h3{margin:0 0 8px;font-size:24px;font-weight:600;letter-spacing:-.5px}
.how-modal-body .lead{margin:0 0 22px;color:var(--text-muted);font-size:14px;line-height:1.6}
.how-modal-list{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:14px}
.how-modal-list li{display:flex;align-items:flex-start;gap:14px;font-size:13.5px;color:var(--text);line-height:1.55}
.how-modal-list .step-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--bg-soft);color:var(--text);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;margin-top:1px;border:1px solid var(--border)}
.how-modal-list strong{display:block;margin-bottom:2px;color:var(--text);font-weight:600}
.how-modal-cta{width:100%;padding:13px;background:var(--bg-deep);color:var(--bg);border-radius:var(--radius-btn);font-size:14px;font-weight:500;cursor:pointer;border:0;font-family:inherit;transition:background .2s}
.how-modal-cta:hover{background:var(--bg-deep-soft)}
.auth-card{padding:32px;max-width:440px}
.auth-stage{display:none}
.auth-stage.active{display:block}
.auth-stage h3{margin:0 0 8px;font-size:22px;font-weight:600;letter-spacing:-.4px}
.auth-stage p{margin:0 0 22px;font-size:14px;color:var(--text-muted);line-height:1.55}
.auth-input{width:100%;padding:14px 16px;background:var(--bg-soft);border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;color:var(--text);margin-bottom:14px}
.auth-input:focus{outline:none;border-color:var(--text)}
.auth-input.code{font-size:24px;letter-spacing:8px;text-align:center;font-weight:600}
.auth-resend{text-align:center;font-size:12px;color:var(--text-muted);margin-top:14px}
.auth-resend a{color:var(--text);text-decoration:underline;cursor:pointer}
.auth-primary-btn{width:100%;padding:13px;background:var(--bg-deep);color:var(--bg);border-radius:var(--radius-btn);font-size:14px;font-weight:500;cursor:pointer;border:0;font-family:inherit;transition:background .2s}
.auth-primary-btn:hover{background:var(--bg-deep-soft)}
.auth-primary-btn:disabled{opacity:.4;cursor:not-allowed}
.auth-back{margin-top:12px;background:transparent;border:0;color:var(--text-muted);font-size:13px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:4px;padding:6px 0}
.auth-back:hover{color:var(--text)}
.auth-success-icon{width:54px;height:54px;border-radius:50%;background:var(--bg-deep);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 16px}
.auth-providers{display:flex;flex-direction:column;gap:10px}
.auth-providers-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:560px){.auth-providers-row{grid-template-columns:1fr}}
.auth-provider-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 12px;background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-btn);color:var(--text);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .2s}
.auth-provider-btn:hover{border-color:var(--text);background:var(--bg-card)}
.auth-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.auth-divider{text-align:center;font-size:11px;color:var(--text-dim);letter-spacing:1.6px;text-transform:uppercase;font-weight:500;margin:6px 0;display:flex;align-items:center;gap:14px}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.create-account-card{background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:var(--radius-card);padding:32px}
.create-account-card h3{margin:0 0 8px;font-size:22px;font-weight:600;letter-spacing:-.4px}
.create-account-card .lead{margin:0 0 26px;font-size:14px;color:var(--text-muted);line-height:1.65}
.signed-in-card{display:flex;align-items:center;gap:18px;padding:24px 28px;background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:var(--radius-card)}
.signed-in-icon{flex-shrink:0;width:42px;height:42px;border-radius:50%;background:var(--bg-deep);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700}
.signed-in-text strong{display:block;font-size:15px;color:var(--text);font-weight:600;margin-bottom:2px}
.signed-in-text{font-size:13px;color:var(--text-muted);line-height:1.5}
.contact-card{padding:32px;max-width:520px}
.contact-card h3{margin:0 0 8px;font-size:22px;font-weight:600;letter-spacing:-.4px}
.contact-card .lead{margin:0 0 22px;font-size:14px;color:var(--text-muted);line-height:1.6}
.contact-card form{display:flex;flex-direction:column;gap:12px}
.contact-card input,.contact-card textarea{width:100%;padding:13px 16px;background:var(--bg-soft);border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;color:var(--text)}
.contact-card input:focus,.contact-card textarea:focus{outline:none;border-color:var(--text)}
.contact-card textarea{resize:vertical;min-height:100px}
.summary h3{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-muted);font-weight:600;margin:0 0 16px;display:flex;align-items:center;gap:9px}
.summary h3::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--accent-amber);flex-shrink:0}
.summary-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:11px 0;border-bottom:1px solid var(--border-soft);font-size:13px}
.summary-row .k{color:var(--text-muted);flex-shrink:0}
.summary-row .v{color:var(--text);font-weight:600;text-align:right;line-height:1.4}
.summary-row .v.empty{color:var(--text-dim);font-weight:400;font-style:italic}
.summary-total{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:15px 17px;border-radius:11px;background:color-mix(in srgb, var(--accent-amber) 9%, transparent);border:1px solid color-mix(in srgb, var(--accent-amber) 24%, transparent)}
/* no empty — fields (principle 5): the Total band stays hidden until a real figure lands */
  .summary-total:has(.v.empty){display:none}
.summary-total .k{font-weight:600;color:var(--text-muted);text-transform:uppercase;font-size:11px;letter-spacing:1.2px}
.summary-total .v{font-size:27px;font-weight:700;letter-spacing:-.7px;color:var(--accent-amber)}
.summary-total .v.empty{color:var(--text-dim);font-size:20px;font-weight:500}
.summary-note{margin:12px 4px 0;font-size:11px;color:var(--text-dim);line-height:1.45;text-align:center}
@keyframes summaryIn{from{opacity:0;transform:translateX(28px) scale(.98)}to{opacity:1;transform:none}}
.summary.summary-enter{animation:summaryIn .55s cubic-bezier(.22,.61,.36,1)}
.done{text-align:center;padding:40px 20px;margin-bottom:18px}
.done-icon{width:64px;height:64px;border-radius:50%;background:var(--bg-deep);color:var(--bg);display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px}
.done h2{font-size:30px;font-weight:600;letter-spacing:-.6px;margin:0 0 12px}
.done p{font-size:14px;color:var(--text-muted);line-height:1.65;max-width:480px;margin:0 auto}
.confirm-card{background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:var(--radius-card);padding:28px 32px}
.confirm-card h3{margin:0 0 18px;font-size:14px;color:var(--text-muted);letter-spacing:1.4px;text-transform:uppercase;font-weight:500}
/* Review & pay headline moved inside the card (Jacob, 23 Jul). */
  .confirm-title{margin:0 0 22px;white-space:normal}
/* Redesigned promo + account-credit blocks (Jacob, 23 Jul) — token-driven so
     they read correctly on the light card (the old inline styles were dark-theme
     leftovers: invisible border, wrong colours). */
  .pay-extras{margin-top:22px;border-top:1px solid var(--border-soft);padding-top:22px;display:flex;flex-direction:column;gap:20px}
.pay-extra-label{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:9px}
.addons-intro{margin-bottom:24px}
.addons-title{margin:0 0 8px}
.addons-sub{margin:0;font-size:15px;line-height:1.55;color:var(--text-muted);max-width:60ch}
.summary-promo{margin:14px 0 10px;padding-top:14px;border-top:1px solid var(--border-soft)}
.promo-reveal{background:none;border:none;padding:0;font-family:inherit;font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.promo-reveal:hover{color:var(--text)}
.promo-row{display:flex;gap:8px;align-items:stretch}
.promo-input{flex:1;min-width:0;text-transform:uppercase;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-btn);background:var(--bg-card);color:var(--text);font-family:inherit;font-size:14px}
.promo-input::placeholder{color:var(--text-dim);text-transform:none}
.promo-input:focus{outline:none;border-color:var(--text-muted)}
.promo-apply{white-space:nowrap;padding:12px 22px;background:var(--text);color:var(--bg);border:0;border-radius:var(--radius-btn);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:opacity .15s}
.promo-apply:hover{opacity:.88}
.promo-remove{margin-top:10px;background:none;border:none;color:var(--accent-amber);cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:0;font-size:13px;font-family:inherit}
.credit-row{display:flex;gap:12px;align-items:flex-start;cursor:pointer;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-btn);padding:14px 15px;transition:border-color .15s}
.credit-row:hover{border-color:var(--text-muted)}
.credit-check{margin-top:1px;width:18px;height:18px;flex:0 0 auto;cursor:pointer;accent-color:var(--accent-amber)}
.credit-title{font-size:14px;font-weight:600;color:var(--text)}
.credit-hint{display:block;color:var(--text-muted);font-size:13px;margin-top:3px;line-height:1.45}
.confirm-rows{display:flex;flex-direction:column}
.confirm-row{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:12px 0;border-bottom:1px solid var(--border-soft);font-size:13px}
.confirm-row .k{color:var(--text-muted)}
.confirm-row .v{color:var(--text);font-weight:500;text-align:right;line-height:1.5}
.confirm-total{display:flex;justify-content:space-between;align-items:center;padding-top:18px;font-size:16px}
.confirm-total .k{font-weight:500;color:var(--text-muted)}
.confirm-total .v{font-size:24px;font-weight:600;letter-spacing:-.4px}
/* Ex-VAT split under the review total, so a business customer sees the net
     figure + VAT before paying. Computed the SAME way as the receipt PDF and
     the server (net = round(gross/1.2)), so the three always reconcile. */
  .confirm-vat{margin:6px 2px 0;text-align:right;font-size:12.5px;color:var(--text-muted)}
.confirm-note{margin-top:18px;padding:14px 16px;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:8px;font-size:12px;color:var(--text-muted);line-height:1.5}
.confirm-note strong{color:var(--text)}
/* ============================================================
     ADDITIONS for the live (Supabase-wired) build
     ============================================================ */
  /* Test-mode banner (replaces the mockup demo bar) */
  .devbar{background:var(--bg-deep);color:var(--on-dark);font-size:12.5px;text-align:center;padding:9px 16px;line-height:1.45}
.devbar b{color:#fff;font-weight:600}
/* Inline status messages (auth, pay, enquiry) */
  .auth-msg{font-size:13px;line-height:1.45;padding:11px 14px;border-radius:8px;margin-top:12px}
.auth-msg.err{background:#f6e0dc;color:#8a3526}
.auth-msg.ok{background:color-mix(in srgb,var(--a-green,#2f7d4f) 13%,transparent);color:var(--a-green,#2f7d4f)}
.auth-msg.info{background:var(--bg-soft);color:var(--text-muted)}
/* Secondary auth button + button row (email sign-in / create account) */
  .auth-secondary-btn{width:100%;padding:13px;background:transparent;color:var(--text);border:1px solid var(--border);border-radius:var(--radius-btn);font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .2s}
.auth-secondary-btn:hover{border-color:var(--text)}
.auth-secondary-btn:disabled{opacity:.4;cursor:not-allowed}
.auth-btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
.auth-field-label{font-size:11px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-dim);margin:2px 0 6px}
.order-notes{width:100%;padding:13px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;color:var(--text);resize:vertical;min-height:84px;margin-top:6px}
.order-notes:focus{outline:none;border-color:var(--text)}
/* Service chooser ("Not sure which option?") */
  .service-help-row{display:flex;justify-content:center;margin:-4px 0 22px}
.service-help-btn{background:none;border:none;font-family:inherit;font-size:14px;color:var(--text-muted);cursor:pointer;padding:6px 4px;display:inline-flex;gap:6px;align-items:center}
.service-help-btn span{color:var(--text);font-weight:500;border-bottom:1px solid var(--text);padding-bottom:1px}
.service-help-btn:hover span{opacity:.7}
.service-help-card{max-width:560px}
.service-help-video{position:relative;width:100%;aspect-ratio:16/9;background:var(--bg-deep);border-radius:var(--radius-card);overflow:hidden;margin:0 0 22px;display:flex;align-items:center;justify-content:center}
.service-help-video iframe,.service-help-video video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.service-help-video .svc-video-ph{color:rgba(255,255,255,0.6);font-size:13px;text-align:center;padding:0 20px;line-height:1.5}
.svc-q{margin:0 0 18px}
.svc-q.hidden{display:none}
.svc-q-label{font-size:14px;font-weight:600;color:var(--text);margin:0 0 10px}
.svc-opts{display:flex;flex-direction:column;gap:8px}
.svc-opt{text-align:left;background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:9px;padding:12px 14px;font-family:inherit;font-size:14px;color:var(--text);cursor:pointer;transition:all .15s}
.svc-opt:hover{border-color:var(--text)}
.svc-opt.active{border-color:var(--text);background:var(--bg-card);box-shadow:0 0 0 1px var(--text) inset}
.svc-result{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-card);padding:18px;margin:4px 0 0}
.svc-rec-from{font-size:11px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-dim);margin:0 0 4px}
.svc-rec-name{font-size:22px;font-weight:600;letter-spacing:-.4px;color:var(--text);margin:0 0 8px;font-family:var(--font-sans)}
.svc-rec-why{font-size:14px;color:var(--text-muted);line-height:1.55;margin:0 0 16px}
.svc-rec-clipnote{font-size:13px;color:var(--text-muted);background:var(--bg-card);border:1px dashed var(--border);border-radius:8px;padding:10px 12px;margin:0 0 16px;line-height:1.5}
.svc-enterprise{background:var(--bg-deep);color:var(--on-dark);border-radius:var(--radius-card);padding:16px;margin:0 0 16px}
.svc-ent-head{font-size:13px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,0.7);margin:0 0 6px}
.svc-ent-body{font-size:13px;line-height:1.55;color:rgba(255,255,255,0.9);margin:0 0 12px}
.svc-ent-link{background:var(--on-dark);color:var(--bg-deep);border:none;border-radius:var(--radius-btn);padding:9px 16px;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer}
.svc-ent-link:hover{opacity:.85}