/* ============================================================================
   Osseus demo modal — companion to assets/demo-modal.js.
   Opens any [data-demo-src] link in a centered dialog with an iframe that
   lazily loads the self-contained generated demo (demos/onboarding-*.html,
   designed at a fixed 1280x720) and scales it to fit. Single source of
   truth: linked from index.html AND the generated use-case pages
   (scripts/build-vertical-pages.js) — edit here, not inline.
   z-index 1200 sits above the site grain overlay (999); the Cal.com embed
   uses a far larger z-index and is unaffected.
   ========================================================================= */
.dm-overlay{
  position:fixed;inset:0;z-index:1200;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(43,38,32,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .18s ease;
}
.dm-overlay.is-open{opacity:1}
.dm-overlay[hidden]{display:none}
.dm-panel{
  position:relative;
  width:min(1160px,calc(100vw - 48px));
  max-height:calc(100vh - 96px);
  background:#F5F0E9;
  border:1px solid rgba(43,38,32,.14);
  border-radius:18px;
  box-shadow:0 40px 90px rgba(43,38,32,.32),0 4px 14px rgba(43,38,32,.14);
  padding:50px 12px 12px;
  display:flex;flex-direction:column;
  font-family:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
}
.dm-title{
  position:absolute;top:0;left:20px;height:50px;
  display:inline-flex;align-items:center;
  font-size:13px;font-weight:600;color:rgba(43,38,32,.62);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 84px);
}
.dm-close{
  position:absolute;top:3px;right:3px;width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  appearance:none;background:none;border:0;border-radius:12px;cursor:pointer;
  font-family:inherit;font-size:26px;font-weight:400;line-height:1;color:rgba(43,38,32,.65);
  transition:color .15s ease,background .15s ease;
}
.dm-close:hover{color:#2B2620;background:rgba(43,38,32,.07)}
.dm-close:focus-visible{outline:2px solid #33507D;outline-offset:-2px}
/* frame centers the scaled demo; on desktop everything fits, no scrolling */
.dm-frame{
  display:flex;justify-content:center;align-items:flex-start;
  min-height:0;overflow:hidden;
}
/* .dm-scale is sized by demo-modal.js to naturalSize x scale and clips the
   transformed iframe; the iframe keeps the demo's natural 1280x720 layout */
.dm-scale{
  position:relative;overflow:hidden;flex:none;
  border-radius:10px;border:1px solid rgba(43,38,32,.14);
  background:#F5F0E9;
}
.dm-scale iframe{
  display:block;border:0;background:#F5F0E9;
  transform-origin:0 0;
}
@media (max-width:768px){
  .dm-overlay{padding:10px}
  .dm-panel{width:calc(100vw - 20px);max-height:calc(100vh - 20px);padding:46px 8px 8px}
  .dm-title{left:14px;height:46px}
  /* pan-and-scan: the demo scales to ~78vh tall and scrolls horizontally */
  .dm-frame{justify-content:flex-start;overflow:auto;-webkit-overflow-scrolling:touch;max-height:78vh}
}
@media (prefers-reduced-motion:reduce){
  .dm-overlay{transition:none}
}