/* /book: heading, calendar, promises.
   A rebuild of the export's book.html. The page sits on the same soft band as
   the other hand-built pages, the calendar is the whole middle of it, and the
   four promises run underneath in a row of columns divided by hairlines,
   which is how the live page sets them. */

.bk-hero {
  background: var(--hero-band, #f1f5f9);
  padding: 132px 0 72px;
}

.bk-inner { display: grid; gap: clamp(30px, 4vw, 48px); }

.bk-head { text-align: center; }
.bk-head h1 {
  margin: 10px 0 0;
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.028em;
}

/* The calendar sits on white so it reads as its own surface, and reserves its
   height up front so the promises below do not jump when Calendly loads. */
.bk-calendly-wrap {
  background: var(--bg, #fff);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px -32px rgba(43, 69, 95, 0.4);
}

/* Calendly draws a fixed 800px card and centres it in whatever width it is
   given, so a wider container does not make the calendar bigger, it only pads
   it. At the container's full 1176px that was 188px of empty white down each
   side, and 42px under it.
   1000px is the floor: measured against the live widget, 1000px keeps the
   two-column layout and 990px drops to the stacked one, which is 924px tall
   and scrolls inside the frame. So this is as tight as it goes without making
   the calendar worse, and the 100px that remains each side is Calendly's own
   padding around its card, inside the iframe, where we cannot reach it.
   680px height against their 658px of content, verified to still fit after a
   date is picked and the times column appears. */
.bk-calendly-wrap { position: relative; width: 100%; max-width: 1000px; margin-inline: auto; }

.calendly-inline-widget {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 320px;
  height: 680px;
}

/* Keep compatibility with already-published HTML until its next publication. */
.bk-calendly-loading { display: none; }

.calendly-inline-widget iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.bk-noscript { padding: 48px; text-align: center; }

.bk-promises {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

/* The live page divides these with a rule on the left of each column. */
.bk-promise {
  padding: 4px 0 4px 28px;
  border-left: 1px solid var(--ink, #2b455f);
}
.bk-promise h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1.28;
  color: var(--ink, #2b455f);
}
.bk-promise p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink-soft, #4e6479);
}

@media (max-width: 991px) {
  /* Below Calendly's own 1000px breakpoint the widget stacks, and the stacked
     layout is 1020px tall against 883px on a phone. At the desktop height it
     scrolled inside the frame, which puts a scrollbar around a calendar that
     is already inside a scrolling page. Given the room it needs instead. */
  .calendly-inline-widget { width: auto; height: 1040px; }
  .bk-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

@media (max-width: 560px) {
  /* the stacked layout is shorter on a phone: 883px, not 1020px */
  .calendly-inline-widget { height: 900px; }
  .bk-hero { padding-top: 116px; }
  .bk-promises { grid-template-columns: minmax(0, 1fr); }
  .bk-promise { padding-left: 20px; }
}

/* ============================================================
   CALL CONFIRMED
   The hero and "what happens next" share one background
   (is-tint on both sections), so there is no seam to blend -
   the fix for two sections not meeting well is not having two
   colours to meet in the first place. The dark card is the only
   contrast on the page, which is what should draw the eye.
   ============================================================ */
/* `--badge` drives three things at once - the sticker's size, how far it
   overlaps the card, and the card's top padding - so they cannot drift apart.
   Half the sticker sits above the card's top edge and half below it.

   The top padding measures to the sticker, not to the card, because the
   sticker now reaches half its own height higher than the card ever did: the
   fixed nav was landing 2px off it at 834px and 4px into it at 390px.

   The section keeps its top padding but not its bottom: the next section
   shares this exact background (.bk-next-wrap below), so the gap between the
   card and "What happens next" is this one value rather than two paddings
   stacked. That stacking used to put 176px of empty space under the card. */
.bk-confirmed-wrap { --badge: 148px; padding: clamp(96px, 9vw, 116px) 0 56px; }
.bk-next-wrap { padding-top: 0; }

@media (max-width: 560px) {
  .bk-confirmed-wrap { --badge: 112px; }
}

/* Full container width, matching .next-grid below rather than sitting as a
   narrower card centred inside the same container - the two are meant to
   read as one measure. */
.bk-confirmed-card {
  position: relative;
  /* .closing-card sets margin-bottom:-96px to overlap a footer elsewhere on
     the site; this card does not overlap anything and was pulling the
     section after it 96px upward, hiding "What happens next" behind the
     card entirely. */
  margin-bottom: 0;
  /* Top padding clears the half of the sticker that overlaps the card, plus a
     gap, so the eyebrow never collides with the confetti. */
  padding: calc(var(--badge) / 2 + 26px) clamp(24px, 5vw, 56px) 48px;
  border-radius: 28px;
  text-align: center;
  color: #fff;
}
.bk-confirmed-card .eyebrow { color: #8fd3d8; }
.bk-confirmed-card h1 {
  margin: 14px 0 0;
  color: #fff;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  letter-spacing: -0.025em;
}
/* Scoped to .bk-confirmed-card rather than left as a bare class: .closing-card
   p (site.css) targets any <p> under a .closing-card, this element among
   them, and its rule is more specific than a single class alone. Without the
   ancestor qualifier here, that rule's own colour and spacing would win. */
.bk-confirmed-card .bk-confirmed-sub {
  max-width: 46ch;
  margin: 12px auto 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.98rem;
  line-height: 1.6;
}
.bk-confirmed-card .bk-confirmed-sub strong { color: #fff; }

/* Straddles the card's top edge, as on the live page. It is a sibling of the
   card rather than a child, so .closing-card's overflow:hidden cannot clip it;
   the negative bottom margin pulls the card up underneath instead.

   z-index beats .closing-card's own z-index:2, or the card's textured
   background would paint over the half of the sticker that overlaps it.

   The sticker is transparent and carries its own colour, so it needs no disc
   behind it: the white circle and drop shadow that framed the old tick would
   read as a plate the confetti was sitting on. */
.bk-confirmed-badge {
  display: block;
  position: relative;
  z-index: 3;
  margin-bottom: calc(var(--badge) / -2);
  pointer-events: none;
}
/* Centred on the image itself, not the span around it: the span is a block of
   the card's full width, so auto margins on it have nothing to centre. */
.bk-confirmed-badge img {
  display: block;
  margin: 0 auto;
  width: var(--badge);
  height: auto;
}

/* The white card nested inside the dark one. Left-aligned internally even
   though the card itself is centred on the page - a label/value pair reads
   better ragged-left than centred. */
.bk-confirm {
  max-width: 480px;
  margin: 32px auto 0;
  padding: 26px 28px;
  border-radius: 18px;
  background: #fff;
  color: var(--ink, #2b455f);
  text-align: left;
}
.bk-confirm-label {
  display: block;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint, #607488);
}
.bk-confirm-name { display: block; margin-top: 4px; font-size: 1.05rem; }

.bk-confirm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.bk-confirm-tile {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg-wash, #f5f9fa);
}
.bk-confirm-tile b { display: block; margin-top: 2px; font-size: 0.98rem; }

.bk-confirm-hr { height: 1px; background: var(--line, #e2eaef); margin: 20px 0; }

/* The first row after the date/time tiles needs the same gap the rows below it
   get from the adjacent-sibling rule, which cannot reach across the grid. Only
   visible once a booking with a join link renders, which is why it sat at 0. */
.bk-confirm-grid + .bk-confirm-row { margin-top: 16px; }
.bk-confirm-row + .bk-confirm-row { margin-top: 16px; }
.bk-confirm-row .btn { margin-top: 10px; width: 100%; justify-content: center; }

/* Three equal columns spanning the card. They used to be pills sized to their
   own text, which left a wedge of empty white to the right of "Apple" - the
   only row in the card that did not reach both edges. */
.bk-cal-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.bk-cal-links a {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 8px;
  border: 1px solid var(--line, #e2eaef);
  /* Matches .bk-confirm-tile above it. A 999px pill reads as a tag at chip
     width and as a lozenge once it is a third of the card wide. */
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink, #2b455f);
}
/* Brand marks carry their own colour, so they are sized and left alone. */
.bk-cal-links a svg, .bk-cal-links a img { flex: none; width: 16px; height: 16px; display: block; }
.bk-cal-links a:hover { border-color: var(--action, #2ea6f5); text-decoration: none; }

/* Reschedule and cancel share the class but are not buttons: they sit inline
   under their label, so the grid above must not reach them. */
#ho-manage-links .bk-cal-links { display: flex; grid-template-columns: none; gap: 8px; }
#ho-manage-links .bk-cal-links a { border: 0; padding: 0; justify-content: flex-start; }

/* --- what happens next --------------------------------------------------- */
.section h2.is-center { text-align: center; }

/* .art-video (site.css) caps itself at 860px, which is the right measure for a
   course video sitting in a column of prose. Here the video is one of three
   things stacked in the same container - the confirmed card above it and the
   four steps below - and the export runs all three at the full container width.
   Capping this one alone would make it the odd element on the page. */
.bk-next-video { max-width: none; margin: 28px auto 0; }

.next-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.next-card {
  background: #fff;
  border: 1px solid var(--line, #e2eaef);
  border-radius: var(--radius, 12px);
  padding: 26px 24px 28px;
}
.next-icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--tile-aqua, #e4f1f4);
  color: var(--action-deep, #234fa4);
}
.next-card h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink, #2b455f);
  letter-spacing: -0.01em;
}
.next-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft, #4e6479); }

@media (max-width: 991px) {
  .next-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .bk-confirmed-wrap { padding-top: 92px; }
  /* Longhand for the sides and bottom only. The shorthand used to be here and
     would reset the top padding to a flat value, dropping the clearance the
     overlapping sticker needs and letting the confetti sit on the eyebrow. */
  .bk-confirmed-card {
    padding-right: 22px; padding-bottom: 36px; padding-left: 22px;
    border-radius: 22px;
  }
  .bk-confirm { padding: 22px 20px; }
  .bk-confirm-grid { grid-template-columns: 1fr; }
  .next-grid { grid-template-columns: minmax(0, 1fr); }
}