/* Book a Call. Card 9. Role tokens only. */

.ct-page__h {
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-bold);
  font-size: var(--ct-size-hook);
  margin: 0 0 9px;
}

.ct-lede { max-width: 62ch; margin: 0 0 22px; }

/* The box is not width-constrained: the Calendly iframe needs roughly 1000px
 * to lay out its month grid, and squeezing it into a reading measure produces a
 * very tall narrow column. The prose inside it IS constrained, separately —
 * a reading measure is right for sentences and wrong for a calendar. */
.ct-booking {
  border: 1px solid var(--ct-border);
  padding: 18px;
}
.ct-booking__gate,
.ct-booking__direct { max-width: 62ch; }

.ct-booking__load {
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-semibold);
  font-size: var(--ct-size-ui);
  color: var(--ct-text-inverse);
  background: var(--ct-accent-primary);
  border: 0;
  padding: 11px 18px;
  cursor: pointer;
}
.ct-booking__load[disabled] { background: var(--ct-text-muted); cursor: default; }

.ct-booking__disclosure {
  font-size: var(--ct-size-meta);
  line-height: 1.45;
  color: var(--ct-text-muted);
  margin: 9px 0 0;
  max-width: 54ch;
}

.ct-booking__failed {
  font-size: var(--ct-size-meta);
  color: var(--ct-text);
  border-left: 3px solid var(--ct-accent-secondary);
  padding-left: 10px;
  margin: 11px 0 0;
}

/* Sized to the widget so the page does not jump when the iframe appears. */
.ct-booking__host { min-width: 320px; min-height: 700px; }
/* The host is focused when the widget loads, so a keyboard or screen-reader
 * user is moved to the thing they just asked for rather than left at the button
 * that has now disappeared. tabindex="-1" makes it focusable without adding it
 * to the tab order. */
.ct-booking__host:focus { outline: none; }

.ct-booking__direct {
  font-size: var(--ct-size-body-sm);
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--ct-border);
}
.ct-booking__direct a { color: var(--ct-accent-primary); }