/* ==========================================================================
   /book — the whole funnel in one screen: what happens next on the left,
   the calendar on the right. Reuses the legal-page header shell.
   ========================================================================== */

.book-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  color: var(--white);
  background:
    radial-gradient(90% 70% at 82% 4%, rgba(64, 136, 244, .22), transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(62, 109, 92, .18), transparent 64%),
    linear-gradient(168deg, #1b2934 0%, #17232d 52%, #131e27 100%);
}
.book-header { border-bottom: 1px solid rgba(255, 255, 255, .09); background: rgba(19, 30, 39, .5); }
.book-header-shell {
  width: min(1240px, calc(100% - 64px));
  height: 76px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 26px;
  margin-inline: auto;
}
.book-back { color: #aebcc3; font-size: 13px; font-weight: 600; transition: color .22s ease; }
.book-back:hover { color: var(--white); }

.book-layout {
  width: min(1420px, calc(100% - 64px));
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(900px, 1fr);
  align-items: start;
  gap: 60px;
  margin-inline: auto;
  padding-block: 56px 72px;
}

.book-intro h1 { max-width: 13ch; margin: 18px 0 0; font-size: clamp(36px, 4.2vw, 54px); }
.book-intro h1 span { color: var(--folder-lift); }
.book-intro > p:not(.section-label, .book-assurance) { max-width: 46ch; margin: 22px 0 0; color: #c3cfd5; font-size: 17px; line-height: 1.68; }

.book-points { list-style: none; display: grid; gap: 20px; margin: 36px 0 0; padding: 0; }
.book-points li { display: grid; grid-template-columns: 34px 1fr; align-items: start; gap: 15px; }
.book-points i {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--carbon);
  background: linear-gradient(180deg, #6bb0ff, var(--folder));
  border-radius: 50%;
  font-family: var(--utility); font-size: 12px; font-style: normal; font-weight: 600;
  box-shadow: 0 8px 18px -8px rgba(64, 136, 244, .9);
}
.book-points span { display: grid; gap: 3px; }
.book-points strong { font-size: 15px; letter-spacing: -.012em; }
.book-points small { color: #a5b6be; font-size: 13px; line-height: 1.5; }

.book-assurance {
  display: grid; grid-template-columns: 28px 1fr; align-items: start; gap: 13px;
  margin: 34px 0 0; padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.book-assurance > i {
  width: 28px; height: 28px; display: grid; place-items: center;
  color: var(--white); background: var(--confirmed); border-radius: 50%;
  font-size: 13px; font-style: normal;
}
.book-assurance span { display: grid; gap: 3px; color: #a5b6be; font-size: 13px; line-height: 1.55; }
.book-assurance strong { color: var(--white); font-size: 14px; }

.book-panel {
  overflow: hidden;
  color: var(--ink);
  background: var(--porcelain);
  border-radius: var(--r-lg);
  box-shadow: var(--e-dark), 0 0 110px -34px rgba(64, 136, 244, .85);
}
.book-panel-head {
  min-height: 58px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px 22px;
  background: linear-gradient(180deg, #e4ebef, var(--docket));
  border-bottom: 1px solid var(--line);
  font-family: var(--utility);
}
.book-panel-head span { font-size: 12px; font-weight: 600; letter-spacing: .05em; }
.book-panel-head small { color: #596c75; font-size: 11px; }
.book-page .cal-inline { width: 100%; min-height: 560px; background: var(--porcelain); }
.book-fallback { margin: 0; padding: 24px 22px 28px; color: #55666e; font-size: 15px; line-height: 1.6; }
.book-fallback[hidden] { display: none; }
.book-fallback a { color: var(--folder-deep); border-bottom: 1px solid rgba(44, 111, 221, .35); }

.book-page .site-footer { background: transparent; border-top: 1px solid rgba(255, 255, 255, .09); }

@media (max-width: 1360px) {
  .book-layout { grid-template-columns: 1fr; gap: 40px; padding-block: 40px 64px; }
  .book-panel { order: -1; }
  .book-intro { max-width: 680px; }
  .book-intro h1 { max-width: 18ch; }
}

/* Between roughly 620 and 800 the embed attempts its two-pane layout, cannot
   fit it, and stacks badly at over 900px tall. Holding it narrower there makes
   it choose the compact layout instead, which is 300px shorter. Above 800 it
   fits the wide layout properly and should be left alone. */
@media (min-width: 620px) and (max-width: 800px) {
  .book-panel { max-width: 560px; margin-inline: auto; }
}

@media (max-width: 560px) {
  .book-header-shell { width: calc(100% - 30px); height: 68px; }
  .book-layout { width: calc(100% - 30px); padding-block: 34px 56px; }
  .book-intro h1 { max-width: none; font-size: clamp(29px, 8.4vw, 38px); }
  .book-intro > p:not(.section-label, .book-assurance) { font-size: 16px; }
  .book-points { gap: 16px; margin-top: 28px; }
  .book-page .cal-inline { min-height: 560px; }
  .book-panel-head { padding: 12px 16px; }
}