/* ══ Book a demo, v2: one column, 520px, compact. Scoped under #dm2 and
   shared with nothing in modal.css. Closed at rest through the hidden
   attribute (UA display:none), so nothing paints before this async file
   lands. Tokens only; light theme through html[data-theme="light"].

   The panel is a flex column: head, a fields region that is the only thing
   that scrolls when the viewport is shorter than the content, and a foot
   (button, promise) that stays put. A grid row would size to content and
   let the panel clip whatever sat past its max-height, which is how the
   first build lost the Venues chips; flex-shrink against max-height does
   not.

   Motion is CSS transitions keyed on .is-open / .is-in plus one keyframed
   wake in the confirmation's drawing; #dm2.dm2--static (reduced motion,
   ?static, no GSAP) resolves every state at once. Emerald appears in five
   places: the primary button, the focus ring, the selected chips, the
   confirmation check, and what the system lights in the drawing. The one
   warm accent (#f0b06a) is the guest's portal in that drawing. Everything
   else is ink, mute, hairline. ══ */
#dm2{position:fixed;inset:0;z-index:1400;display:grid;place-items:center;padding:24px;box-sizing:border-box;font-family:var(--pg-font);
  --dm2-danger:#f2665f;   /* 5.9:1 on --pg-bg-2 (dark); light swaps below */
}
#dm2[hidden]{display:none}
#dm2 *,#dm2 *::before,#dm2 *::after{box-sizing:border-box}
html[data-theme="light"] #dm2{--dm2-danger:#c8453d}   /* 4.8:1 on white */

/* overlay: the page ground at 64% plus an 8px blur */
#dm2 .dm2__overlay{position:absolute;inset:0;background:rgba(11,16,24,.64);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .18s var(--pg-ease)}
html[data-theme="light"] #dm2 .dm2__overlay{background:rgba(255,255,255,.64)}
#dm2.is-open .dm2__overlay{opacity:1}

/* panel */
#dm2 .dm2__panel{position:relative;display:flex;flex-direction:column;width:min(520px,100%);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);background:var(--pg-bg-2);border:1px solid var(--pg-hairline);border-radius:14px;overflow:hidden;outline:none;opacity:0;transform:scale(.98);transition:opacity .22s var(--pg-ease),transform .22s var(--pg-ease)}
html[data-theme="light"] #dm2 .dm2__panel{box-shadow:0 24px 64px rgba(16,16,22,.18)}
#dm2.is-open .dm2__panel{opacity:1;transform:none}
/* the script pins the height, swaps the pane, then eases to the new content */
#dm2 .dm2__panel.is-sizing{transition:height .24s var(--pg-ease)}

/* form: head / fields / foot */
#dm2 .dm2__form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin:0;transition:opacity .1s var(--pg-ease)}
#dm2 .dm2__form.is-out{opacity:0}
#dm2 .dm2__form[hidden]{display:none}
#dm2 .dm2__head{flex:0 0 auto;padding:26px 28px 0}
#dm2 .dm2__title{margin:0 0 4px;padding-right:36px;font-size:19px;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:var(--pg-ink)}
#dm2 .dm2__sub{margin:0;font-size:13.5px;line-height:1.5;color:var(--pg-mute)}
#dm2 .dm2__fields{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px 28px 4px}
#dm2 .dm2__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
/* block rhythm: direct children of the fields region only, so the second
   field inside the side-by-side row starts level with the first */
#dm2 .dm2__fields>.dm2__row+.dm2__field,#dm2 .dm2__fields>.dm2__field+.dm2__field{margin-top:16px}
#dm2 .dm2__row>.dm2__field{margin-top:0}
#dm2 label,#dm2 .dm2__group-label{display:block;margin:0 0 4px;font-size:12.5px;font-weight:500;line-height:1.4;color:var(--pg-ink)}
#dm2 label.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#dm2 .dm2__opt{font-weight:400;color:var(--pg-mute)}
#dm2 input,#dm2 select{display:block;width:100%;height:38px;margin:0;padding:0 10px;border-radius:8px;background:var(--pg-bg);border:1px solid var(--pg-hairline);color:var(--pg-ink);font:400 13.5px/1.2 var(--pg-font);appearance:none;-webkit-appearance:none}
#dm2 input::placeholder{color:var(--pg-mute);opacity:1}   /* mute, never the ink a value wears */
#dm2 select{padding-right:28px;text-overflow:ellipsis;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%239aa3ad' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:11px 11px}
html[data-theme="light"] #dm2 select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23565d68' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
#dm2 input:focus,#dm2 select:focus{outline:2px solid var(--pg-emerald);outline-offset:2px}
#dm2 button:focus-visible,#dm2 a:focus-visible,#dm2 .dm2__done:focus-visible{outline:2px solid var(--pg-emerald);outline-offset:2px}
#dm2 [aria-invalid="true"]{border-color:var(--dm2-danger)}
#dm2 .dm2__phone-row{display:grid;grid-template-columns:118px minmax(0,1fr);gap:8px}
#dm2 .dm2__help,#dm2 .dm2__err{margin:6px 0 0;font-size:12.5px;line-height:1.5}
#dm2 .dm2__help{color:var(--pg-mute)}
#dm2 .dm2__err{color:var(--dm2-danger)}
#dm2 .dm2__err:empty{display:none}

/* optional section: a hairline with 14px padding, one label, two chip groups */
#dm2 .dm2__section{margin:14px 0 8px;padding-top:14px;border-top:1px solid var(--pg-hairline);font-size:12px;line-height:1.4;font-weight:500;letter-spacing:.04em;color:var(--pg-faint)}
#dm2 .dm2__group+.dm2__group{margin-top:10px}
#dm2 .dm2__chips{display:flex;flex-wrap:wrap;gap:6px}
#dm2 .dm2__chip{display:inline-flex;align-items:center;height:30px;padding:0 11px;border-radius:999px;border:1px solid var(--pg-hairline);background:var(--pg-bg);color:var(--pg-ink);font:500 12.5px/1 var(--pg-font);cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
#dm2 .dm2__chip:hover{border-color:var(--pg-mute)}
/* selected: emerald border and text on emerald at 10%. Light theme takes the
   site's text-size emerald token, the only emerald that clears 4.5:1 on a
   white ground at 12.5px. */
#dm2 .dm2__chip[aria-pressed="true"]{border-color:var(--pg-emerald);color:var(--pg-emerald);background:rgba(21,184,127,.1)}
html[data-theme="light"] #dm2 .dm2__chip[aria-pressed="true"]{color:var(--pg-emerald-hi);background:rgba(15,158,108,.1)}
#dm2 .dm2__chip[disabled]{cursor:default;opacity:.7}

/* foot: the button and the promise, never scrolled away */
#dm2 .dm2__foot{flex:0 0 auto;padding:12px 28px 24px}
#dm2 .dm2__fail{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--dm2-danger)}
#dm2 .dm2__fail[hidden]{display:none}
#dm2 .dm2__fail a{color:inherit;font-weight:600}
#dm2 .dm2__submit{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:42px;padding:0 20px;border:0;border-radius:8px;background:var(--pg-cta);color:#fff;font:500 14px/1 var(--pg-font);cursor:pointer;transition:background-color .2s}
#dm2 .dm2__submit:hover{background:var(--pg-cta-hover)}
#dm2 .dm2__submit[disabled]{cursor:default}
#dm2 .dm2__spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:dm2-spin .8s linear infinite}
#dm2 .dm2__spin[hidden]{display:none}
@keyframes dm2-spin{to{transform:rotate(360deg)}}
#dm2 .dm2__note{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--pg-mute);text-align:center}

/* ── confirmation. Heading and email from the first frame; the pane fades
   in over 140ms while the panel eases to this height. 16px between blocks.
   The drawing's CSS default is the awake pose; .is-in (and not static) plays
   the asleep→awake keyframes once from the beats in the brief:
   .30 check draws · .55 router dot · .65 one ring · .95 phone wakes ·
   1.25 dashboard wakes · 1.70 settled. Nothing loops. ── */
#dm2 .dm2__done{display:flex;flex-direction:column;align-items:stretch;gap:16px;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:26px 28px 24px;outline:none;opacity:0;transition:opacity .14s var(--pg-ease);
  --dm2-lit:.1;   /* lit screens; light theme .08 */
}
html[data-theme="light"] #dm2 .dm2__done{--dm2-lit:.08}
#dm2 .dm2__done[hidden]{display:none}
#dm2 .dm2__done.is-in{opacity:1}
#dm2 .dm2__title--done{display:flex;align-items:flex-start;gap:8px;margin:0}
#dm2 .dm2__check{flex:0 0 auto;width:20px;height:20px;margin-top:2px;fill:none;stroke:var(--pg-emerald);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#dm2 .dm2__check path{stroke-dasharray:1;stroke-dashoffset:0}
#dm2 .dm2__done-email{margin:0;font-size:13.5px;line-height:1.5;color:var(--pg-mute);overflow-wrap:anywhere}
#dm2 .dm2__done-email b{font-weight:500;color:var(--pg-ink)}
#dm2 .dm2__textlink{display:inline;height:auto;margin:0;padding:0;border:0;background:none;color:var(--pg-ink);font-family:var(--pg-font);font-size:inherit;font-weight:500;line-height:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--pg-mute);cursor:pointer}
#dm2 .dm2__textlink:hover{text-decoration-color:var(--pg-ink)}

/* the drawing: 464x140 at 520, scaled with the sheet below */
#dm2 .dm2__scene{display:block;width:100%;height:auto;aspect-ratio:464/140;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;color:var(--pg-mute)}
#dm2 .dm2__scene *{vector-effect:non-scaling-stroke}
#dm2 .dm2__structure{color:var(--pg-ink);stroke-opacity:.6}
#dm2 .dm2__furniture{color:var(--pg-mute)}
#dm2 .dm2__furn{display:none}
#dm2 .dm2__scene[data-furn="table"] .dm2__furn--table,#dm2 .dm2__scene[data-furn="hotel"] .dm2__furn--hotel,#dm2 .dm2__scene[data-furn="retail"] .dm2__furn--retail,#dm2 .dm2__scene[data-furn="desk"] .dm2__furn--desk{display:inline}
#dm2 .dm2__dot{fill:var(--pg-emerald);stroke:none}
#dm2 .dm2__ring{stroke:var(--pg-emerald);opacity:0}
#dm2 .dm2__phone-lit{fill:#f0b06a;fill-opacity:var(--dm2-lit);stroke:none}
#dm2 .dm2__pill{stroke:#f0b06a;stroke-dasharray:1;stroke-dashoffset:0}
#dm2 .dm2__laptop-lit{fill:var(--pg-emerald);fill-opacity:var(--dm2-lit);stroke:none}
#dm2 .dm2__bars rect{fill:var(--pg-emerald);stroke:none;transform-box:fill-box;transform-origin:50% 100%}
#dm2 .dm2__tickmark{stroke:var(--pg-emerald);stroke-dasharray:1;stroke-dashoffset:0}

/* the wake, once, from the asleep pose (the "from" of each keyframe holds
   through its delay: fill-mode both) */
#dm2 .dm2__done.is-in .dm2__check-ring{animation:dm2-draw .25s var(--pg-ease) .3s both}
#dm2 .dm2__done.is-in .dm2__check-tick{animation:dm2-draw .15s var(--pg-ease) .55s both}
#dm2 .dm2__done.is-in .dm2__dot{animation:dm2-light .15s linear .55s both}
#dm2 .dm2__done.is-in .dm2__ring{animation:dm2-ring 1s cubic-bezier(.16,1,.3,1) .65s both}
#dm2 .dm2__done.is-in .dm2__phone-lit{animation:dm2-lit .15s linear .95s both}
#dm2 .dm2__done.is-in .dm2__pill{animation:dm2-draw .2s var(--pg-ease) 1.05s both}
#dm2 .dm2__done.is-in .dm2__laptop-lit{animation:dm2-lit .15s linear 1.25s both}
#dm2 .dm2__done.is-in .dm2__bars rect{animation:dm2-rise .24s var(--pg-ease) 1.25s both}
#dm2 .dm2__done.is-in .dm2__bars rect:nth-child(2){animation-delay:1.29s}
#dm2 .dm2__done.is-in .dm2__bars rect:nth-child(3){animation-delay:1.33s}
#dm2 .dm2__done.is-in .dm2__tickmark{animation:dm2-draw .24s var(--pg-ease) 1.33s both}
@keyframes dm2-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes dm2-light{from{opacity:0}to{opacity:1}}
@keyframes dm2-lit{from{fill-opacity:0}to{fill-opacity:var(--dm2-lit)}}
@keyframes dm2-ring{from{transform:scale(0);opacity:.5}to{transform:scale(1);opacity:0}}
@keyframes dm2-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* what happens next: a real sequence, so it is numbered; hairlines between */
#dm2 .dm2__next-wrap{display:block}
#dm2 .dm2__section--done{margin:0 0 6px;padding:0;border:0}
#dm2 .dm2__next{list-style:none;margin:0;padding:0;counter-reset:dm2-step;border-top:1px solid var(--pg-hairline)}
#dm2 .dm2__next li{counter-increment:dm2-step;display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px solid var(--pg-hairline);font-size:13.5px;line-height:1.5;color:var(--pg-ink)}
#dm2 .dm2__next li::before{content:counter(dm2-step);font-size:12px;font-weight:600;line-height:20px;color:var(--pg-mute);font-variant-numeric:tabular-nums}

/* bottom row: quiet links left, one button right */
#dm2 .dm2__done-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
#dm2 .dm2__while{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:12.5px;line-height:1.5;color:var(--pg-mute)}
#dm2 .dm2__while a{color:var(--pg-ink);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--pg-mute)}
#dm2 .dm2__while a:hover{text-decoration-color:var(--pg-ink)}
#dm2 .dm2__while a[hidden]{display:none}
#dm2 .dm2__secondary{display:inline-flex;align-items:center;height:36px;margin:0;padding:0 14px;border-radius:8px;border:1px solid var(--pg-hairline);background:transparent;color:var(--pg-ink);font:500 13.5px/1 var(--pg-font);text-decoration:none;cursor:pointer;transition:border-color .15s}
#dm2 .dm2__secondary:hover{border-color:var(--pg-mute)}
#dm2 .dm2__primary{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:8px;border:0;background:var(--pg-cta);color:#fff;font:500 13.5px/1 var(--pg-font);text-decoration:none;transition:background-color .2s}
#dm2 .dm2__primary:hover{background:var(--pg-cta-hover)}

/* close: 32px hit area, 18px glyph, on the heading's line */
#dm2 .dm2__close{position:absolute;top:22px;right:22px;z-index:2;width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:transparent;color:var(--pg-mute);cursor:pointer;transition:color .15s,background-color .15s}
#dm2 .dm2__close:hover{color:var(--pg-ink);background:var(--pg-hairline-soft)}
#dm2 .dm2__close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* the static pose: reduced motion, ?static, no GSAP (class), and the media
   query as a backstop for the class */
#dm2.dm2--static .dm2__overlay,#dm2.dm2--static .dm2__panel,#dm2.dm2--static .dm2__form,#dm2.dm2--static .dm2__done,#dm2.dm2--static .dm2__chip{transition:none}
#dm2.dm2--static .dm2__panel{transform:none}
#dm2.dm2--static .dm2__done.is-in .dm2__scene *,#dm2.dm2--static .dm2__done.is-in .dm2__check path,#dm2.dm2--static .dm2__spin{animation:none}
#dm2.dm2--static .dm2__spin{display:none}
@media (prefers-reduced-motion:reduce){
  #dm2 .dm2__overlay,#dm2 .dm2__panel,#dm2 .dm2__form,#dm2 .dm2__done,#dm2 .dm2__chip{transition:none}
  #dm2 .dm2__panel{transform:none}
  #dm2 .dm2__done.is-in .dm2__scene *,#dm2 .dm2__done.is-in .dm2__check path,#dm2 .dm2__spin{animation:none}
  #dm2 .dm2__spin{display:none}
}

/* below 640: a bottom sheet that rises to its content. The fields scroll
   only when the viewport (keyboard up) is shorter than the content; the
   button stays at the sheet's foot. */
@media (max-width:639px){
  #dm2{padding:0;align-items:end}
  #dm2 .dm2__panel{width:100%;max-height:100vh;max-height:100dvh;border-radius:14px 14px 0 0;border-width:1px 0 0;opacity:1;transform:translateY(100%);transition:transform .26s var(--pg-ease)}
  #dm2.is-open .dm2__panel{transform:none}
  #dm2.dm2--static .dm2__panel{transform:none}
  #dm2 .dm2__head{padding:22px 16px 0}
  #dm2 .dm2__fields{padding:16px 16px 4px}
  #dm2 .dm2__foot{padding:12px 16px calc(16px + env(safe-area-inset-bottom))}
  #dm2 .dm2__done{padding:22px 16px calc(20px + env(safe-area-inset-bottom))}
  #dm2 .dm2__secondary,#dm2 .dm2__primary{height:44px;padding:0 18px}   /* touch */
  #dm2 .dm2__chip{height:36px}     /* touch */
  #dm2 .dm2__close{top:16px;right:10px;width:44px;height:44px}   /* touch */
}
@media (max-width:639px) and (prefers-reduced-motion:reduce){
  #dm2 .dm2__panel{transform:none;transition:none}
}
@media (max-width:479px){
  #dm2 .dm2__row{grid-template-columns:minmax(0,1fr)}
  #dm2 .dm2__row .dm2__field+.dm2__field{margin-top:16px}
}