/* RevMatic AI | /book/
   Loads after /assets/css/site.css. No photo hero: the breadcrumb, the title, the three steps and the calendar side by side
   on wide screens, stacked on phones. The calendar itself is the CRM's widget, dark (Neo style, background #100E17,
   orange #FF8A3C, set in the calendar's Widget appearance 10-06), framed as a card in the same dark. */
.bk { padding-top: calc(var(--header-h) + clamp(28px, 1.2rem + 2.4vw, 64px)); padding-bottom: var(--sec-y); }
.bk .crumbs ol { margin: 0 0 18px; }
.bk__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
.bk__h1 {
  margin-top: 14px; font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: var(--fs-h1);
  line-height: 0.99; letter-spacing: -0.028em; color: var(--platinum);
}
.bk__lede { margin-top: 20px; }
.bk__steps { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.bk__steps li { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.bk__n { flex: none; width: 34px; font: 500 13px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--plasma-soft); }
.bk__t { font: 500 clamp(1.05rem, 1rem + 0.3vw, 1.2rem)/1.4 var(--font-text); color: var(--platinum); }
.bk__call { margin-top: 24px; font: 400 17px/1.5 var(--font-text); color: var(--ink-88); }
.bk__call a { display: inline-flex; align-items: center; min-height: 44px; color: var(--platinum); font-weight: 500; border-bottom: 1px solid var(--line-strong); }
.bk__call a:hover { border-color: var(--plasma-soft); }
.bk__leo { margin-top: 18px; }
.bk__cal { scroll-margin-top: calc(var(--header-h) + 16px); }
.bk__calk { margin-bottom: 12px; }
.bk__frame { border-radius: var(--r-card); overflow: hidden; background: #100E17; border: 1px solid var(--line-strong); box-shadow: 0 30px 80px -40px rgba(140, 112, 255, 0.45); }
.bk__frame iframe { display: block; width: 100%; min-height: 560px; border: 0; background: #100E17; color-scheme: light; }
/* color-scheme: light on the frame matches the calendar page's own (light) scheme. Without it the browser sees this dark
   page embedding a light document and paints an opaque WHITE canvas behind it: a white edge around the dark widget. */
.bk__alt { margin-top: 14px; font: 400 15px/1.5 var(--font-text); color: var(--smoke); }
.bk__alt a { color: var(--platinum); border-bottom: 1px solid var(--line-strong); }
@media (min-width: 1024px) {
  .bk__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
  .bk__copy { position: sticky; top: calc(var(--header-h) + 24px); }
}