/* ── 1. Tokens ─────────────────────────────────────────────── */
    :root {
      --c-dark: #000000;
      --c-light: #ffffff;
      --c-accent: #b7ff88;
      --c-accent-hov: #a3ec74;
      --c-text: #cccccc;
      --c-muted: #777777;
      --c-dim: #444444;
      --c-border: #2a2a2a;
      --c-card-bg: #1a1a1a;
      --max-w: 920px;
      --radius-pill: 9999px;
      --radius-card: 16px;
      --font-hd: 'all-round-gothic', 'Red Hat Display', Arial, sans-serif;
      --font-bd: 'Hero New', 'Red Hat Display', Arial, sans-serif;
    }

    /* ── 2. Reset ─────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; min-height: 100%; }
    body {
      font-family: var(--font-bd);
      color: var(--c-text);
      background: var(--c-dark) url('https://50629780.fs1.hubspotusercontent-na1.net/hubfs/50629780/saas/othership/graphics/Othership_Background.png') no-repeat center top fixed;
      background-size: cover;
      -webkit-font-smoothing: antialiased;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    /* ── 3. Layout ────────────────────────────────────────────── */
    .site-header { padding: 32px 24px 24px; text-align: center; flex-shrink: 0; }
    .site-header__icon { width: 64px; height: auto; }

    main {
      flex: 1 0 auto;
      width: 100%;
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 32px 24px 64px;
    }

    .intro { text-align: center; margin-bottom: 24px; }
    .intro .tag { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 12px; }
    .intro h1 { margin: 0 0 12px; font-family: var(--font-hd); font-size: 36px; font-weight: 500; line-height: 1.1; color: var(--c-light); }
    .intro p { margin: 0; font-size: 16px; color: var(--c-text); }
    .intro-divider { border: 0; width: 60px; height: 3px; background: var(--c-accent); border-radius: 2px; margin: 0 auto 32px; }

    /* ── 4. The Grid (Immovable) ─────────────────────────────── */
    .booking-panel {
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* Strict 50/50 */
      gap: 24px;
      width: 100%;
      align-items: stretch;
    }

    .bk-card {
      width: 100%;
      min-width: 0; /* Prevents card expansion */
      height: 480px;
      background: var(--c-card-bg);
      border: 1px solid var(--c-border);
      border-radius: var(--radius-card);
      padding: 20px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
    }

    /* ── 5. Components ───────────────────────────────────────── */
    .bk-card__title { font-family: var(--font-hd); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 14px; }
    .bk-card-sep { border: 0; border-top: 1px solid var(--c-border); margin: 20px 0; }

    .duration-row { display: flex; gap: 8px; flex-wrap: wrap; }
    .duration-btn { flex: 1; padding: 7px 12px; background: transparent; border: 1px solid var(--c-border); border-radius: var(--radius-pill); color: var(--c-text); font-size: 13px; cursor: pointer; }
    .duration-btn.active { border-color: var(--c-accent); color: var(--c-dark); background: var(--c-accent); font-weight: 600; }

    .cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .cal-nav__label { font-family: var(--font-hd); font-size: 15px; color: var(--c-light); }
    .cal-nav__btn { background: none; border: none; color: var(--c-text); cursor: pointer; font-size: 20px; }
    .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
    .cal-grid__hdr { text-align: center; font-size: 10px; font-weight: 700; color: var(--c-dim); padding-bottom: 8px; }
    .cal-day { width: 32px; height: 32px; margin: 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 13px; color: var(--c-dim); }
    .cal-day.available { color: var(--c-text); cursor: pointer; }
    .cal-day.available:hover { background: rgba(183, 255, 136, 0.15); color: var(--c-accent); }
    .cal-day.selected { background: var(--c-accent); color: var(--c-dark); font-weight: 700; }

    #time-list-wrap { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding-right: 4px; }
    #time-list-wrap::-webkit-scrollbar { width: 4px; }
    #time-list-wrap::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
    .time-placeholder { color: var(--c-light); font-size: 14px; text-align: center; flex: 1; display: flex; align-items: center; justify-content: center; }
    .time-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .time-slot { padding: 10px; background: transparent; border: 1px solid var(--c-border); border-radius: 8px; color: var(--c-text); font-size: 13px; cursor: pointer; }
    .time-slot.selected { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-dark); font-weight: 600; }

    .slot-summary { margin: 16px 0 24px; display: flex; align-items: center; gap: 10px; background: rgba(183, 255, 136, 0.05); border: 1px solid rgba(183, 255, 136, 0.15); border-radius: 10px; padding: 16px; font-size: 13px; color: var(--c-accent); }
    .slot-summary button { color: var(--c-light); background: none; border: none; cursor: pointer; text-decoration: underline; margin-left: auto; }

    .booking-form { display: flex; flex-direction: column; gap: 12px; }
    .bk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .bk-field { display: flex; flex-direction: column; gap: 6px; }
    .bk-field.full { grid-column: span 2; }
    .bk-label { font-size: 11px; font-weight: 700; color: var(--c-text); text-transform: uppercase; }
    .bk-input { background: rgba(255,255,255,0.05); border: 1px solid var(--c-border); border-radius: 8px; padding: 10px; color: var(--c-light); width: 100%; }
    .bk-submit { padding: 14px; background: var(--c-accent); border: 0; border-radius: var(--radius-pill); color: var(--c-dark); font-family: var(--font-hd); font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 12px; }
    .bk-consent { font-size: 11px; color: var(--c-text); line-height: 1.5; margin: 4px 0; }
    .bk-consent label { display: flex; gap: 8px; cursor: pointer; }

    /* ── 6. Footer ───────────────────────────────────────────── */
    .site-footer { padding: 48px 24px; text-align: center; flex-shrink: 0; }
    .site-footer__inner { max-width: var(--max-w); margin: 0 auto; }
    .site-footer__divider { border: 0; border-top: 1px dotted #333; margin-bottom: 24px; }
    .site-footer__logo img { width: 160px; height: auto; }
    .site-footer__tagline { font-size: 13px; font-weight: 500; color: var(--c-accent); margin: 12px 0 20px; }
    .site-footer__socials { display: flex; justify-content: center; gap: 28px; margin-bottom: 20px; }
    .site-footer__socials a { color: var(--c-light); width: 20px; height: 20px; }
    .site-footer__address, .site-footer__copyright { font-size: 10px; color: var(--c-text); margin-top: 12px; }

    /* ── 7. Responsive ───────────────────────────────────────── */
    @media (max-width: 850px) {
      .booking-panel { grid-template-columns: 1fr; max-width: 450px; margin: 0 auto; }
      .bk-card { height: auto; min-height: 480px; }
    }

    .bk-input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 2px rgba(183, 255, 136, 0.2); }
    /* Target HubSpot embed fields */
    .hs-form-html input:focus, .hs-form-html textarea:focus, .hs-form-html select:focus {
      outline: none !important; border-color: var(--c-accent) !important; box-shadow: 0 0 0 2px rgba(183, 255, 136, 0.2) !important;
    }

    /* ── Verification fallback banner ─────────────────────
       Surfaced when reCAPTCHA Enterprise fails to load (ad blocker, corporate
       firewall, Google reCAPTCHA outage, etc.). The pre-flight check polls
       window.grecaptcha.enterprise for ~5s after page load; on timeout this
       banner becomes visible and the submit button is disabled via the
       body.verification-failed class. User gets clear, actionable guidance
       BEFORE filling the form — avoids the "submit → cryptic error" trap. */
    .bk-banner {
      display: none;
      gap: 16px;
      padding: 16px 20px;
      margin: 0 auto 24px;
      background: var(--c-card-bg);
      border: 1px solid var(--c-accent);
      border-radius: var(--radius-card);
      font-family: var(--font-bd);
      color: var(--c-text);
    }
    .bk-banner:not([hidden]) { display: flex; }
    .bk-banner__icon { flex-shrink: 0; font-size: 24px; line-height: 1; color: var(--c-accent); }
    .bk-banner__body { flex: 1; }
    .bk-banner__title { margin: 0 0 6px; font-weight: 600; color: var(--c-light); font-size: 15px; }
    .bk-banner__text { margin: 0 0 8px; font-size: 14px; color: var(--c-text); }
    .bk-banner__list { margin: 0; padding-left: 20px; font-size: 14px; color: var(--c-text); }
    .bk-banner__list li { margin: 4px 0; }
    .bk-banner a { color: var(--c-accent); text-decoration: underline; }
    body.verification-failed .bk-submit {
      pointer-events: none;
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* ── Confirmation Screen ─────────────────────────────────────── */
    .bk-confirm { text-align: center; padding: 56px 24px; }
    .bk-confirm__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
    .bk-confirm__title { font-family: var(--font-hd); font-size: 32px; font-weight: 500; color: var(--c-light); margin: 0 0 24px; }
    .bk-confirm__detail { font-size: 16px; color: var(--c-text); line-height: 1.6; margin: 0; }
    .bk-confirm__detail strong { color: var(--c-accent); }
    .bk-confirm__meta { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 48px; font-size: 13px; color: var(--c-text); }
    .bk-confirm__sep { width: 1px; height: 14px; background: var(--c-light); opacity: 0.3; }
    .bk-confirm__link { color: var(--c-accent); font-weight: 600; cursor: pointer; }
    .bk-confirm__close { margin-top: 32px; font-size: 12px; color: var(--c-light); text-align: center; }