/* Booking pages — extends styles.css (tokens, header, footer, .btn, .lbl, .mark) */
/* After editing, re-stamp AND verify the stamped URL actually serves the new bytes:
   curl -sS "$D/book.css?v=<hash>" | grep max-width
   Cloudflare's edge can cache the OLD body under the NEW hash if a request lands
   mid-propagation, and _headers pins it for an hour. Bump the hash again to fix. */

/* a narrower measure than the marketing pages: one column, nothing to scan sideways */
.bk-wrap{width:min(100% - 2.5rem,760px);margin-inline:auto}
.bk{padding:clamp(2.2rem,5vw,3.6rem) 0 clamp(2.6rem,5vw,4rem)}
.bk-head .hd{gap:1.2rem}
.bk-head .who{font-family:'PlexM',ui-monospace,monospace;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2)}

.bk h1{font-size:clamp(32px,4.4vw,52px);margin-bottom:.3em;text-align:center}
.bk .lede{color:var(--ink-2);font-size:clamp(1.02rem,.98rem + .3vw,1.18rem);font-weight:600;
  text-align:center;max-width:46ch;margin-inline:auto;margin-bottom:1.1rem}
/* 64ch is the measure at which every page's note falls to exactly two lines, the
   longest being /book/20; below it that one and the index run to three */
.bk .note{text-align:center;max-width:64ch;margin-inline:auto;color:var(--ink-2);font-size:.98rem}

/* duration, format and audience as one compact ledger row, sized to its contents */
.facts{margin:1.5rem auto;border:1px solid var(--rule-2);border-radius:var(--r);background:var(--card);
  overflow:hidden;display:grid;grid-template-columns:repeat(3,auto);width:fit-content;max-width:100%}
.facts .f{padding:.7rem 1.4rem;border-right:1px solid var(--rule);text-align:center}
.facts .f:last-child{border-right:0}
.facts .f .lbl{display:block;margin-bottom:.25rem}
.facts .f .v{font-family:'PlexM',ui-monospace,monospace;font-size:.95rem;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink)}
@media(max-width:640px){
  .facts{grid-template-columns:1fr;width:auto}
  .facts .f{border-right:0;border-bottom:1px solid var(--rule)}
  .facts .f:last-child{border-bottom:0}
}

/* the widget sits in the same framed card the funnel uses for video */
.booker{margin:clamp(1.4rem,3vw,2rem) 0 0;border:1px solid var(--rule-2);border-radius:var(--r);
  background:var(--card);overflow:hidden;
  box-shadow:0 1px 2px rgba(30,27,21,.06),0 12px 34px rgba(30,27,21,.10)}
.booker-hd{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:space-between;align-items:center;
  padding:.6rem .9rem;background:var(--paper-2);border-bottom:1px solid var(--rule-2)}
/* space is reserved for the widget so the page does not jump when it loads;
   the fallback panel is short, so it drops the reservation */
.booker-body{min-height:640px;background:var(--card)}
.booker-body.is-fallback{min-height:0}
.booker-body iframe{width:100%;height:720px;border:0;display:block;background:var(--card)}
@media(max-width:640px){ .booker-body iframe{height:900px} }
/* Cal.com sizes its own frame to the content and resizes as the booker changes step,
   so a fixed height here would either clip it or leave dead space below it */
.booker-body.is-cal iframe{height:auto}

/* shown when no calendar is configured yet, and if a widget fails to load */
.booker-fallback{padding:clamp(1.6rem,4vw,2.4rem);text-align:center}
.booker-fallback p{margin:0 auto 1.1rem;max-width:44ch;color:var(--ink-2)}

/* the other lengths, quiet enough not to compete with the widget */
.durations{margin:clamp(1.8rem,3.5vw,2.6rem) 0 0;padding-top:1.3rem;border-top:2px solid var(--rule-2)}
.durations .lbl{display:block;text-align:center;margin-bottom:.8rem}
.durations ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.durations a{display:inline-block;text-decoration:none;color:var(--ink);font-weight:600;font-size:.92rem;
  padding:.5rem 1rem;border:1px solid var(--rule-2);border-radius:var(--r);background:var(--card);
  transition:border-color .18s,color .18s}
.durations a:hover{border-color:var(--stamp);color:var(--stamp)}
.durations a[aria-current="page"]{background:var(--paper-2);color:var(--ink-2);border-style:dashed}

/* /book index: one ruled entry per call length */
.picker{list-style:none;margin:clamp(1.6rem,3vw,2.2rem) 0 0;padding:0;border:1px solid var(--rule-2);
  border-radius:var(--r);background:var(--card);overflow:hidden;
  box-shadow:0 1px 2px rgba(30,27,21,.05),0 10px 30px rgba(30,27,21,.06)}
.picker li{border-bottom:1px solid var(--rule)}
.picker li:last-child{border-bottom:0}
.picker a{display:grid;grid-template-columns:auto 1fr auto;gap:.5rem 1.2rem;align-items:baseline;
  padding:1rem 1.1rem;text-decoration:none;color:var(--ink);transition:background .18s}
.picker a:hover{background:var(--paper-2)}
.picker .mins{font-family:'PlexM',ui-monospace,monospace;font-size:.95rem;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--stamp);white-space:nowrap}
.picker .desc{font-weight:600}
.picker .desc small{display:block;font-weight:400;color:var(--ink-2);font-size:.88rem;margin-top:.15rem}
.picker .go{color:var(--ink-2);font-size:1.1rem;align-self:center}
@media(max-width:560px){
  .picker a{grid-template-columns:auto 1fr}
  .picker .go{display:none}
}

/* on the onboarding funnel the widget sits under the video, so it takes the
   player's measure rather than the full column (funnel.css .stage is max-width:75%) */
.funnel .booker{max-width:75%;margin-inline:auto}
@media(max-width:900px){ .funnel .booker{max-width:100%} }