/* book.html: Book a call (Bay Light). Uses site-v3.css tokens. */
.book-hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--col-gap);
  align-items: end;
}
.book-portrait { margin: 0; aspect-ratio: 4 / 5; max-width: 26rem; justify-self: end; width: 100%; overflow: hidden; }
.book-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.book-creds { list-style: none; margin: var(--s-6) 0 0; padding: var(--s-5) 0 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.book-creds li { padding-block: 2px; }

/* HubSpot's widget draws its own card; the band colour shows through the transparent frame. */
.book-band { padding-block: var(--s-8); background: var(--fog); }
.book-cal { max-width: 940px; margin-inline: auto; }
.book-cal .meetings-iframe-container { min-height: 700px; }
.book-after { max-width: 850px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); color: var(--ink-2); }
.book-after p { margin: 0; }
.book-after a { color: var(--accent-ink); text-underline-offset: .2em; }

.book-expect { padding-block: var(--section); }
.book-expect h2 { font-family: var(--display); font-size: var(--t-h2); font-weight: 400; margin: 0 0 var(--s-6); }
.book-steps {
  list-style: none; margin: 0; padding: 0; counter-reset: step;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap);
}
.book-steps li { counter-increment: step; border-top: 1px solid var(--ink); padding-top: var(--s-4); }
.book-steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--accent-ink);
  margin-bottom: var(--s-3);
}
.book-steps h3 {
  font-family: var(--caps);
  font-size: var(--caps-size, 12px);
  letter-spacing: var(--caps-track, .22em);
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 var(--s-2);
  color: var(--ink);
}
.book-steps p { margin: 0; color: var(--ink-2); max-width: 22rem; }

@media (max-width: 899px) {
  .book-hero .wrap { grid-template-columns: 1fr; }
  .book-portrait { justify-self: start; max-width: 16rem; }
  .book-steps { grid-template-columns: 1fr; gap: var(--s-5); }
  .book-band { padding-block: var(--s-5); }
  /* Give HubSpot's phone layout the full screen width. */
  .book-cal { margin-inline: calc(var(--gutter) * -1); }
  .book-cal .meetings-iframe-container { min-height: 640px; }
}
@media (max-width: 599px) {
  .book-portrait { display: none; }
}