/* Booking page local overrides */
    body {
      background: var(--cream);
    }
    .booking-page-wrap {
      background: var(--cream);
    }
    .booking-main {
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 var(--sp-5);
    }

    /* Booking tier cards */
    .booking-tiers-wrap {
      max-width: var(--container-prose-md);
      margin: 0 auto;
      padding: var(--sp-7) var(--sp-5) 80px;
    }
    /* Audit round-4 2026-05-08: tier cards were flat white with a 2px
       border, reading "spec sheet" rather than "Stripe pricing." Now
       layered: subtle warm-white gradient + warm shadow on every card,
       and the featured card adds a rim-light glow + boosted shadow so
       the eye knows the winner at a glance. */
    .booking-card {
      background: var(--grad-white-soft, var(--white));
      border: 2px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--sp-6);
      margin-bottom: var(--sp-5);
      box-shadow: var(--shadow-warm);
      transition: transform var(--duration-base) var(--ease-out),
                  box-shadow var(--duration-base) var(--ease-out);
    }
    .booking-card:hover {
      transform: translateY(var(--card-hover-lift));
      box-shadow: var(--shadow-warm-lg);
    }
    .booking-card-featured {
      border-color: var(--orange);
      position: relative;
      /* Premium "winner" treatment — soft orange ambient glow behind
         the card + warm shadow + slight scale boost. The card visibly
         "lights up" relative to its siblings. */
      background:
        linear-gradient(180deg, rgba(232, 118, 43, 0.04) 0%, rgba(255, 255, 255, 1) 60%),
        var(--white);
      box-shadow: var(--shadow-warm-lg), var(--shadow-accent-glow);
    }
    .booking-card-featured:hover {
      box-shadow: var(--shadow-warm-xl), var(--shadow-accent-glow-lg);
    }
    .booking-card-featured-badge {
      position: absolute;
      top: -12px;
      left: var(--sp-5);
      background: var(--orange);
      color: var(--slate);
      font-size: var(--fs-xs);
      font-weight: 700;
      padding: var(--sp-1) 14px;
      border-radius: var(--radius-pill);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .booking-card-last {
      margin-bottom: 40px;
    }
    .booking-card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: var(--sp-4);
      flex-wrap: wrap;
    }
    .booking-card-title {
      font-family: var(--font-heading);
      font-size: var(--fs-lg);
      color: var(--slate);
      margin-bottom: var(--sp-1);
    }
    .booking-card-subtitle {
      font-size: var(--fs-sm);
      color: var(--ink-2);
    }
    .booking-card-price {
      font-family: var(--font-heading);
      font-size: var(--fs-xl);
      color: var(--accent-large);   /* vibrant brand orange — AA Large at 28px */
    }
    .booking-card-desc {
      font-size: var(--fs-sm);
      color: var(--ink-2);
      line-height: 1.65;
      margin: var(--sp-4) 0 20px;
    }
    .booking-card-btn {
      width: 100%;
      text-align: center;
      justify-content: center;
    }
    .booking-card-features {
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
      margin-bottom: var(--sp-5);
      padding-top: var(--sp-4);
      border-top: 1px solid var(--border);
    }
    /* Was display:flex with gap. Defensive refactor: block + absolute
       feat-icon prevents any future <abbr>/<strong> in feature text
       from being lifted into a flex item. */
    .booking-card-features li {
      position: relative;
      padding-left: 22px;
      font-size: var(--fs-sm);
      color: var(--slate);
      line-height: 1.45;
    }
    .booking-card-features .feat-icon {
      /* Was --success (var(--ok), 2.54:1 on white FAIL). Now --ok-text (5.14:1).
         Now absolutely positioned in the parent's left padding so feature
         text flows inline naturally. */
      position: absolute;
      left: 0;
      top: 1px;
      color: var(--ok-text);
      font-size: var(--fs-sm);
    }

    /* "How Booking Works" 1-2-3-4 block was removed in the visual quality
       audit (2026-05-06). It duplicated the 1-2-3 sequence in
       .booking-preflight at the top of the page. The whole .booking-how
       component (.booking-how, .booking-how-title, .booking-how-steps,
       .booking-how-step, .booking-how-num, .booking-how-text) is therefore
       dead and was deleted from the stylesheet at the same time. */

    /* Trust strip */
    .booking-trust {
      text-align: center;
    }
    .booking-trust-badges {
      display: flex;
      gap: var(--sp-5);
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: var(--sp-5);
    }
    .booking-trust-badge {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-1half);
      font-size: var(--fs-sm);
      color: var(--ink-2);
    }
    .booking-trust-check {
      color: var(--success);
    }
    .booking-trust-note {
      font-size: var(--fs-sm);
      color: var(--ink-2);
    }
    .booking-trust-link {
      /* --orange var(--orange) = 2.6:1 on cream FAIL. --orange-text/--accent-active = 5.98:1 AA. */
      color: var(--orange-text);
      font-weight: 600;
    }

    /* ── Extracted Inline Styles ── */
    .nav-links a.nav-highlight { color: var(--orange-on-dark); font-weight: 600; }
    .mobile-nav-highlight { color: var(--orange-on-dark); font-weight: 700; }
    .booking-pricing-note { text-align: center; font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--sp-5); }
    /* Was --orange var(--orange) = 2.6:1 on cream (FAIL). --orange-text/--accent-active = 5.98:1 AA. */
    .booking-pricing-note a { color: var(--orange-text); }

    /* ── Booking pre-flight: 3-step "what happens next" preview ──
       Sits between hero and pricing tiers. Reduces commit-anxiety on
       the booking CTA — the buyer sees the post-click flow before
       picking a tier. */
    .booking-preflight {
      background: var(--cream);
      padding: var(--sp-7) 0 var(--sp-5);
    }
    .booking-preflight-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-6);
      max-width: 920px;
      margin: 0 auto;
    }
    .booking-preflight-step {
      text-align: center;
    }
    /* Booking-preflight uses .step-circle (canonical 36px orange) — see
       styles.css. Local-only override: bottom margin, since this row stacks
       circle-over-caption rather than the marketing horizontal layout. */
    .booking-preflight-step .step-circle {
      margin-bottom: var(--sp-3);
    }
    .booking-preflight-title {
      font-family: var(--font-heading);
      font-size: var(--fs-md);
      color: var(--slate);
      margin: 0 0 var(--sp-1half);
    }
    .booking-preflight-desc {
      font-size: var(--fs-sm);
      color: var(--body-text);
      line-height: var(--lh-base);
      margin: 0;
      max-width: 28ch;
      margin-left: auto;
      margin-right: auto;
    }

    @media (max-width: 768px) {
      .booking-hero { padding: 110px 0 40px; }
      .booking-preflight-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
      }
    }