/* Booking and pricing pages only (Book a demo, Book an AI confidence call, Pricing), on top of shared/product.css.
   Owned by the pages-booking tab (3 Nov); the shared file is product-pages-2's. Linked from each page's body. */

/* Booking hero: the words on the left, HubSpot's live calendar in a white window on the right, both above the fold. */
.hero.book { min-height: 0; text-align: left; padding: calc(var(--navh) + 64px) 0 112px; }
.hero.book .wrap { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); justify-items: start; align-items: center; gap: clamp(32px, 5vw, 80px); }
.hero.book .words { display: grid; gap: 24px; align-content: center; }
/* On the calendar pages the words sit at the top of their column, level with the calendar window, so the headline and lede
   both show above the fold at 1366x650 (going-over point 51, 5 Nov). Pricing's quote form (#quote) does the same, so its headline
   starts level with the form and the ticks rise towards the fold (point 91, 5 Nov). The webinar heroes keep theirs centred. */
.hero.book .wrap:has(.cal-window, #quote) { align-items: start; }
.hero.book .wrap:has(.cal-window, #quote) .words { align-content: start; padding-top: clamp(8px, 2vw, 32px); }
.hero.book h1 { max-width: 16ch; font-size: clamp(40px, 4.6vw, 76px); }
.hero.book .lede { max-width: 30em; }
.hero.book .ticks { margin-top: 4px; }
/* Pricing only (#quote): less space above the headline, so all three ticks show above the fold at 1366x650 (going-over point 108, 5 Nov).
   The booking pages keep theirs. */
@media (min-width: 1101px) {
  .hero.book:has(#quote) { padding-top: calc(var(--navh) + 32px); }
  .hero.book .wrap:has(#quote) .words { padding-top: 0; gap: 18px; }
}

/* HubSpot's meetings calendar: their iframe in our window. Only the box is styled; what's inside the iframe is HubSpot's. */
.cal-window { width: 100%; padding: clamp(8px, 1.2vw, 14px); }
.cal-window .form-note { padding: 8px 10px 0; }
.cal-box { min-height: 640px; border-radius: var(--r-m); overflow: hidden; }
.cal-box iframe { display: block; width: 100% !important; min-height: 640px; border: 0; }
.cal-box .note-sm { padding: 24px 12px; }
/* HubSpot's calendar iframe is 756px tall but its calendar ends about 666px down: the box stops 40px after it (point 52, 5 Nov).
   The time-slot step after a date click couldn't be seen headless, so only the empty space below the calendar is trimmed. */
.cal-box.meetings-iframe-container { min-height: 0; height: 706px; }
.cal-window .cal-after { padding: 4px 10px 6px; }

@media (max-width: 1100px) {
  .hero.book .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero.book .words { justify-items: start; }
}
@media (max-width: 767px) {
  .hero.book { padding: calc(var(--navh) + 40px) 0 88px; }
  .cal-window { padding: 6px; }
}

/* Pricing: the three points have a heading each */
.ticks.rich li b { display: block; font-weight: 500; margin-bottom: 2px; }
.ticks.rich li span { color: var(--ink-soft); }
.form-window h2 { font-size: var(--t-h3); margin-bottom: 8px; }
.form-window .intro { color: var(--ink-soft); margin-bottom: 16px; }

/* Pricing: AO's quote and numbers */
.quote-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.quote { display: grid; gap: 20px; }
.quote .ico { width: 56px; height: 56px; border-radius: var(--r-m); }
.quote blockquote { font-size: var(--t-h3); font-weight: 300; line-height: 1.3; letter-spacing: -0.02em; }
.quote figcaption { font-size: var(--t-small); color: var(--ink-soft); }
.quote figcaption b { color: var(--ink); font-weight: 500; }
.talk { margin-top: clamp(40px, 5vw, 64px); font-size: var(--t-lede); font-weight: 400; }
.talk a { color: var(--ink); font-weight: 500; }

@media (max-width: 1100px) { .quote-split { grid-template-columns: minmax(0, 1fr); } }

/* fixes: browser default margins on the quote; HubSpot's phone field (country list + number) in one even row */
.quote, .quote blockquote { margin: 0; }
.hs-form-box .hs-fieldtype-phonenumber .hs-fieldtype-intl-phone.hs-input { height: auto !important; border: 0 !important; background: none !important; padding: 0 !important; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; }
.hs-form-box .hs-fieldtype-phonenumber select.hs-input, .hs-form-box .hs-fieldtype-phonenumber input.hs-input { width: 100% !important; margin: 0 !important; float: none !important; }
.hs-form-box select.hs-input { height: 44px; border-radius: var(--r-m); border: 1px solid #cfd8e1; background: #fbfcfd; padding: 0 10px; font: inherit; font-size: 15px; color: var(--ink); }
.hs-form-box textarea.hs-input { height: 96px !important; padding: 10px 14px !important; }
.hs-form-box .hs-fieldtype-intl-phone select.hs-input { max-width: none !important; min-width: 0 !important; }
@media (max-width: 640px) { .hs-form-box .hs-fieldtype-phonenumber .hs-fieldtype-intl-phone.hs-input { grid-template-columns: minmax(0, 1fr); } }
/* HubSpot's own injected styles set the country list to 30% and the number to 70%; this outranks them */
.hs-form-box form.hs-form .hs-phone .input .hs-fieldtype-intl-phone.hs-input > select.hs-input, .hs-form-box form.hs-form .hs-phone .input .hs-fieldtype-intl-phone.hs-input > input.hs-input { width: 100% !important; max-width: none !important; }

/* Book a partnership call: Courtney's Calendly, as on the live page. Calendly's inline widget needs a set height. */
.cal-box.calendly-inline-widget { height: 760px; min-width: 0; }
.cal-box.calendly-inline-widget iframe { height: 100% !important; }