/* Book-a-demo dialog — night theme, full-screen. Motion = opacity/transform only; reduced motion disables it. */

html.demo-open { overflow: hidden; }

dialog.demo {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--night); color: var(--night-text);
  -webkit-overflow-scrolling: touch;
}
dialog.demo::backdrop { background: var(--night); }
dialog.demo[open] { animation: dm-in 260ms var(--ease) both; }
@keyframes dm-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.dm-glow { position: fixed; inset: 0; overflow: clip; pointer-events: none; }
.dm-glow::before { content: ""; position: absolute; left: 50%; bottom: -60%; width: 130%; aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(95,184,159,.2), transparent 70%); }
.dm-shell { position: relative; min-height: 100%; display: flex; flex-direction: column; padding: 0 var(--gutter) max(32px, env(safe-area-inset-bottom)); max-width: var(--max); margin-inline: auto; }

.dm-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--nav-h); padding-top: env(safe-area-inset-top); }
.dm-top .brands { display: flex; align-items: center; gap: 12px; }
.dm-top .slash { width: 1px; height: 22px; background: currentColor; opacity: .35; transform: rotate(18deg); }
.dm-x {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 14px;
  background: transparent; color: var(--night-text); border: 1px solid var(--night-line); border-radius: 8px; cursor: pointer;
  font: 500 var(--t-2xs)/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.dm-x:hover { border-color: var(--night-muted); background: var(--night-raised); }
.dm-x svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.6; fill: none; }

.dm-main { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 20px; align-content: start; flex: 1; }
.dm-intro .kicker { margin: 0 0 20px; }
.dm-h { margin: 0; font: italic 400 clamp(3rem, 2rem + 4.5vw, 7.5rem)/.9 var(--font-atlas); letter-spacing: -.035em; color: var(--night-text); }
.dm-h:focus { outline: none; }
.dm-lede { margin: 16px 0 0; max-width: 40ch; font-size: var(--t-md); line-height: 1.55; color: var(--night-muted); }

.dm-card { padding: 20px; }
.dm-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.dm-form[hidden] { display: none; }
.dm-f { display: grid; gap: 7px; min-width: 0; }
.dm-f > label { font: 500 var(--t-2xs)/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--night-muted); }
.dm-f input, .dm-f select {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: 8px;
  background: var(--night); color: var(--night-text); border: 1px solid var(--night-line);
  font: 400 1rem/1.2 var(--font-body); /* 16px: no iOS zoom */
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.dm-f input::placeholder { color: color-mix(in srgb, var(--night-muted) 70%, transparent); }
.dm-f input:hover, .dm-f select:hover { border-color: var(--night-muted); }
.dm-f input:focus, .dm-f select:focus { outline: 2px solid var(--glow); outline-offset: 1px; border-color: var(--glow); border-radius: 8px; }
.dm-f select {
  -webkit-appearance: none; appearance: none; padding-right: 42px; text-overflow: ellipsis; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a39e94' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.dm-f select:invalid, .dm-f select.is-empty { color: color-mix(in srgb, var(--night-muted) 85%, transparent); }
.dm-f select option { color: var(--night-text); background: var(--night-surface); }
.dm-f [aria-invalid="true"] { border-color: #e9946a; }
.dm-err { margin: 0; font: 400 var(--t-xs)/1.4 var(--font-body); color: #f0a37e; }
.dm-err[hidden] { display: none; }

/* Honeypot: off-screen, not display:none (bots still see it), unreachable by keyboard and AT. */
.dm-hp input { font-size: 1rem; }
.dm-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.dm-ts { min-height: 65px; }
.dm-ts[hidden] { display: none; }

.dm-banner { margin: 0; padding: 12px 14px; border-radius: 8px; border: 1px solid #e9946a; background: rgba(233,148,106,.1); color: #f6c4ab; font-size: var(--t-sm); line-height: 1.45; }
.dm-banner[hidden] { display: none; }

.dm-actions { display: flex; flex-direction: column; gap: 10px; }
.dm-submit { width: 100%; min-height: 48px; }
.dm-submit[aria-disabled="true"] { cursor: progress; opacity: .8; }
.dm-spin { display: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: dm-rot 700ms linear infinite; }
.dm-submit[aria-busy="true"] .dm-spin { display: inline-block; }
@keyframes dm-rot { to { transform: rotate(360deg); } }
.dm-note { margin: 0; }

.dm-done { display: grid; gap: 16px; justify-items: start; padding-block: 8px; }
.dm-done[hidden] { display: none; }
.dm-done .kicker { color: var(--glow); }
.dm-done h3 { margin: 0; font: italic 400 clamp(2rem, 1.4rem + 2.4vw, 3.25rem)/1.05 var(--font-atlas); letter-spacing: -.025em; }
.dm-done h3:focus { outline: none; }

@media (min-width: 600px) {
  .dm-card { padding: 28px; }
  .dm-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
  .dm-f.wide, .dm-ts, .dm-banner, .dm-actions { grid-column: 1 / -1; }
  .dm-actions { flex-direction: row; align-items: center; gap: 16px; }
  .dm-submit { width: auto; min-width: 200px; }
}
@media (min-width: 960px) {
  .dm-main { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 7vw, 112px); align-items: start; padding-top: clamp(24px, 9vh, 104px); }
  .dm-card { padding: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  dialog.demo[open] { animation: none; }
  .dm-spin { animation: none; border-right-color: currentColor; border-style: dotted; }
}