/* Book your demo pop-up (js/book-demo.js), shared by every page (2026-10-25). Self-contained:
   its own close button, keyframes and scroll lock, so pages without the home styles can load it. */
html.wl-locked { overflow: hidden; scrollbar-gutter: stable; }
@keyframes bd-in { from { opacity: 0; transform: translateY(6px) scale(.97); } }
@keyframes bd-fade { from { opacity: 0; } }

.book-demo {
  width: min(1040px, calc(100vw - 32px));
  height: min(820px, calc(100dvh - 32px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
}
.book-demo[open] { display: flex; flex-direction: column; animation: bd-in .2s var(--ease-out) both; }
.book-demo::backdrop {
  background: rgba(244, 244, 244, .55);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.book-demo[open]::backdrop { animation: bd-fade .2s var(--ease-out) both; }
.bd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  flex: none;
  height: 60px;
  padding: 0 var(--sp-12) 0 var(--sp-24);
  border-bottom: 1px solid var(--line);
}
.bd-title { margin: 0; color: var(--muted); }
.bd-actions { display: flex; align-items: center; gap: var(--sp-16); }
.bd-head .dialog-close {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.bd-head .dialog-close:hover { border-color: var(--line-strong); background: var(--paper); }
.bd-head .dialog-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.bd-newtab { font-size: var(--w-meta); font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.bd-newtab:hover { text-decoration-color: var(--ink); }
.bd-frame { position: relative; flex: 1; min-height: 0; }
.bd-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: var(--w-meta); color: var(--muted); }
.book-demo.is-loaded .bd-loading { display: none; }
.bd-iframe { position: relative; display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 559px) {
  .book-demo { width: calc(100vw - 16px); height: calc(100dvh - 16px); border-radius: 12px; }
  .bd-head { padding-left: var(--sp-16); }
}
@media (prefers-reduced-motion: reduce) {
  .book-demo[open], .book-demo[open]::backdrop { animation: none; }
}
@media (max-width: 399px) {
  .bd-title { display: none; }
  .bd-actions { width: 100%; justify-content: space-between; }
  .bd-newtab { white-space: nowrap; }
}