/*
 * Booking widget — consent-gated Calendly embed.
 *
 * Shared by the 8 landing pages and the 8 /contact/ pages, so it must not
 * depend on either page's local classes: the landing page has .btn, /contact/
 * does not. Everything the widget needs is defined here, using only the CSS
 * custom properties both pages declare (with literal fallbacks anyway).
 *
 * Loaded as a real stylesheet, not injected by script, so the pre-consent
 * placeholder is styled on first paint and stays usable with JS disabled.
 */
.book-band .section-sub { margin-bottom: 0; }

.book-points {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 64ch;
}
.book-points li {
  position: relative;
  padding-left: 26px;
  color: var(--fg-dim, rgba(241, 236, 245, 0.74));
  font-size: 16px;
  line-height: 1.55;
  font-weight: 300;
}
.book-points li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-soft, #9bb6ff);
}

.book-widget {
  margin-top: 38px;
  max-width: 920px;
  padding: 26px;
  border: 1px solid var(--line-strong, rgba(241, 236, 245, 0.14));
  border-radius: 18px;
  background: var(--bg-card, rgba(241, 236, 245, 0.025));
}
.bk-gate-tx {
  margin: 0 0 20px;
  max-width: 72ch;
  color: var(--fg-dim, rgba(241, 236, 245, 0.74));
  font-size: 14.5px;
  line-height: 1.6;
  font-weight: 300;
}
.bk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.bk-note {
  margin: 18px 0 0;
  color: var(--fg-faint, rgba(241, 236, 245, 0.42));
  font-size: 13px;
  line-height: 1.5;
  font-weight: 300;
}

/* Self-contained button, because /contact/ has no .btn of its own. */
.bk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s, border-color .15s, background-color .15s;
}
.bk-btn-primary {
  background: var(--grad-cta, linear-gradient(95deg, #3a64c8, #6e8bf5));
  color: #fff;
}
.bk-btn:hover { filter: brightness(1.12); color: #fff; }
.bk-btn:focus-visible {
  outline: 2px solid var(--accent-soft, #9bb6ff);
  outline-offset: 3px;
}

/* Nothing of Calendly's is in the DOM until booking.js mounts it and sets
   .bk-on, so this host is empty and hidden on a fresh visit. */
.bk-frame-host { display: none; }
.bk-on .bk-frame-host { display: block; margin-bottom: 20px; }
.bk-on .bk-gate-tx { display: none; }
.bk-frame {
  display: block;
  width: 100%;
  height: 760px;
  border: 0;
  border-radius: 12px;
  background: #fff;
}

@media (max-width: 760px) {
  .book-widget { padding: 18px; border-radius: 14px; }
  .book-points li { font-size: 15px; }
  .bk-actions { flex-direction: column; align-items: stretch; }
  .bk-btn { width: 100%; }
  .bk-frame { height: 940px; }
}

/* No animation is used here on purpose; nothing to disable for
   prefers-reduced-motion, and the transition above is colour-only. */