/* Booking page: who you meet and why on the left, the calendar on the right.
   Calendly's own event details are hidden in the embed, so this column carries them.
   Brand hues only: navy #01055e, blue #217bff, cyan #2fd4fb. */
.bk{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  grid-template-areas:"left cal"; gap:0 56px; align-items:stretch}
/* The left column matches the calendar column's height and spreads its four groups
   (intro, facts, who it suits, form note) with equal space between them, so its last
   line stays level with the guarantee line and no single gap looks empty. */
.bk-left{grid-area:left; display:flex; flex-direction:column; justify-content:space-between; gap:30px}
.bk-intro{}
.bk-cal{grid-area:cal; align-self:start}
.bk-more{}
.bk h1{font-size:clamp(34px,4.4vw,52px)}

/* call facts: one quiet strip under the intro */
.facts{list-style:none; margin:0; padding:0; display:inline-flex; flex-wrap:nowrap; align-self:flex-start;
  align-items:center; border:1px solid #2a3499; border-radius:100px; background:#080d5c; overflow:hidden}
.facts li{display:flex; align-items:center; gap:7px; padding:9px 15px; font-size:13.5px;
  color:#c5ccf2; white-space:nowrap; cursor:default;
  transition:background-color .18s ease, color .18s ease}
.facts li:hover{background:rgba(33,123,255,.16); color:#fff}
.facts li svg{transition:transform .18s ease, stroke .18s ease}
.facts li:hover svg{transform:scale(1.15); stroke:#fff}
.facts li+li{border-left:1px solid #2a3499}
.facts svg{width:16px; height:16px; flex:none; fill:none; stroke:#2fd4fb; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}

/* the host, heading the calendar card */
.host{display:flex; gap:16px; align-items:center; padding:20px 26px;
  border-bottom:1px solid #1b2380; background:linear-gradient(160deg,#0b1180,#080d5c)}
.host .ph{position:relative; flex:none; width:64px; height:64px; border-radius:12px;
  overflow:hidden; background:#102dc2}
.host .ph img{display:block; width:100%; height:100%; object-fit:cover}
.host .hk{font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#2fd4fb}
.host .hn{font-size:18px; font-weight:600; color:#fff; margin-top:3px; line-height:1.2; letter-spacing:-.01em}
.host .hr{font-size:13px; color:#8b93cd; margin-top:2px}

/* who it suits */
.bk-more h2{font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:#2fd4fb; margin:0 0 14px}
.fit{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.fit li{position:relative; padding-left:24px; color:#aab4ee; font-size:16px; line-height:1.55}
.fit li::before{content:""; position:absolute; left:0; top:.55em; width:9px; height:8px; background:#217bff;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 85'%3E%3Cpath d='M0 0H100V28H28V85H0Z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 85'%3E%3Cpath d='M0 0H100V28H28V85H0Z'/%3E%3C/svg%3E") no-repeat center/contain}
.prep{margin:0; font-size:14px; color:#8b93cd; line-height:1.6; max-width:48ch}
.prep b{color:#2fd4fb; font-weight:600}

/* the calendar */
.cal{border:1px solid #2a3499; border-radius:18px; overflow:hidden; background:#01055e;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.6)}
/* The date picker ends 474px down (the time zone selector) in a five-week month and
   ~522px in a six-week one; 540 clears both. Calendly's data-resize reported 2px for
   this embed and collapsed it, so it stays off; later steps scroll inside the embed. */
.cal .calendly-inline-widget{min-width:300px; height:540px}
.cal noscript a{display:block; padding:40px; text-align:center; color:#5c9bff}
/* Hides the scrollbar Calendly's page shows inside the embed. The frame is widened by
   exactly the scrollbar's width (--sbw, measured below) and the extra strip is clipped,
   so the calendar keeps the same visible width and scrolling still works. Where
   scrollbars take no space (phones, macOS) --sbw stays 0 and nothing changes. */
.cal .calendly-inline-widget{overflow:hidden !important}
.cal .calendly-inline-widget iframe{display:block; width:calc(100% + var(--sbw, 0px)) !important;
  max-width:none !important; margin-left:var(--sbl, 0px)}
.guarantee{margin:14px 0 0; text-align:center; font-size:14px; line-height:1.6; color:#8b93cd}
.guarantee b{color:#2fd4fb; font-weight:600}

@media (max-width:900px){
  .bk{grid-template-columns:minmax(0,1fr); grid-template-areas:"intro" "facts" "cal" "more" "prep"; gap:0}
  .bk-left{display:contents}
  .bk-intro{grid-area:intro}
  .facts{grid-area:facts; margin-top:24px; justify-self:start}
  .bk-cal{margin-top:30px}
  .bk-more{grid-area:more; margin-top:40px}
  .prep{grid-area:prep; margin-top:20px}
}
.facts .sm{display:none}
@media (max-width:1100px){.facts .lg{display:none} .facts .sm{display:inline}}
@media (max-width:480px){
  .host{padding:16px 18px}
  .facts{display:flex; flex-wrap:nowrap}
  .facts li{padding:8px 11px; font-size:12.5px; gap:6px}
  .facts svg{width:14px; height:14px}
  .facts .lg{display:none}
  .facts .sm{display:inline}
}