/* ============================================================
   booking.css - Layout for the booking page (book.html)
   ------------------------------------------------------------
   Goal: this is the "section" stylesheet for the booking page,
   the way legal.css is for the legal pages. The booking page
   reuses legal.css's standalone-page chrome (.legal-bar /
   .legal-foot) and the shared helpers; this file adds only the
   things unique to the page - the intro agenda list and the
   inline scheduling-embed container.

   It reuses the shared layers unchanged: tokens.css (every value
   below is a var(--…), nothing hardcoded), base.css (.container,
   .center, .lede) and components.css (.logo, .btn, .fine). No JS
   beyond js/booking_embed.js, which mounts the calendar.

   Authored MOBILE-FIRST. The embed is fluid (full container
   width) at every viewport, so no breakpoints are needed.

   Load order on book.html: tokens -> base -> components ->
   legal (shared chrome) -> booking (this file, last).
   ============================================================ */

/* ─── intro agenda - the "what we'll cover" list above the calendar, with the
   same green check (✓) bullets as the pricing checklist (--color-go). The list
   is centered and sized to its longest line (width: fit-content) so no bullet
   wraps on desktop; the .container is centered, so text-align is reset to left
   here, and each row is a flex line - the check, then the text - like pricing. ─── */
.booking-agenda {
  list-style: none;
  width: fit-content;        /* as wide as the longest bullet, so no line wraps */
  max-width: 100%;           /* but never overflow a narrow screen (wraps there) */
  margin: 0 auto var(--space-7);
  text-align: left;
}
.booking-agenda li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  color: var(--color-ink-secondary);
  line-height: 1.5;
}
.booking-agenda li:last-child { margin-bottom: 0; }
.booking-agenda li::before {
  content: "\2713";
  flex: 0 0 auto;
  color: var(--color-go);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.5;
}

/* ─── inline-embed container - the third-party calendar injects its <iframe>
   here (js/booking_embed.js). The min-height reserves the box so the page does
   not shift when the calendar paints (no CLS). ─── */
.booking-embed {
  width: 100%;
  min-height: var(--booking-min-height);
}

/* ─── fallback line under the calendar - the always-present "Book a call" link
   (its href is also the single source of the booking link the embed uses). ─── */
.booking-alt {
  margin-top: var(--space-5);
}