/* video-modal.css — the shared ▶ button and the player it opens.
   Scoped under .mxv / .video-btn so it cannot collide with the homepage's own scroll-beat styles. */

/* ---- the trigger: a secondary chip button, never competing with Book a demo ----
   It carries its own opaque background so it stays legible on a white panel, a dark scroll beat
   or over the globe — the homepage beats are not all the same colour. */
.video-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 9px 16px;
  border: 1px solid rgba(47,58,166,.32);
  border-radius: 24px;
  background: #eef0ff;
  color: #2f3aa6;                        /* 7.4:1 on its own chip */
  font: 600 .86rem/1.2 inherit;
  cursor: pointer;
  text-align: left;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.video-btn:hover,
.video-btn:focus-visible { background: #2f3aa6; color: #fff; border-color: #2f3aa6; }
.video-btn:focus-visible { outline: 2px solid #39d0ff; outline-offset: 2px; }

/* the hero's is the only primary one */
.video-btn--primary,
.stop .video-btn--primary,
.panel .video-btn--primary { background: var(--orange, #E97A58); border-color: var(--orange, #E97A58); color: #2B1206; }
.video-btn--primary:hover, .video-btn--primary:focus-visible,
.stop .video-btn--primary:hover, .stop .video-btn--primary:focus-visible,
.panel .video-btn--primary:hover, .panel .video-btn--primary:focus-visible { background: #d9693f; border-color: #d9693f; color: #2B1206; }

/* ---- the player ---- */
.mxv { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 24px; }
.mxv[hidden] { display: none; }
.mxv-backdrop { position: absolute; inset: 0; background: rgba(6,9,30,.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mxv-frame {
  position: relative;
  width: min(1100px, 100%);
  background: #0b1020;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  overflow: hidden;
  animation: mxv-in .22s ease;
}
.mxv-instant .mxv-frame { animation: none; }
@keyframes mxv-in { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mxv-frame { animation: none; } }

.mxv-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; }
.mxv-title { margin: 0; color: #eaf0ff; font-size: 1rem; font-weight: 700; flex: 1 1 auto; }
.mxv-close {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #eaf0ff; font-size: 1rem; cursor: pointer;
}
.mxv-close:hover { background: rgba(255,255,255,.2); }
.mxv-close:focus-visible { outline: 2px solid #39d0ff; outline-offset: 2px; }

.mxv-stage { position: relative; aspect-ratio: 16 / 9; background: #000; }
.mxv-video { width: 100%; height: 100%; display: block; background: #000; }

/* end screen over the last frame */
.mxv-end {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  background: rgba(6,9,30,.78);
}
.mxv-end[hidden] { display: none; }
.mxv-end-cta {
  background: var(--orange, #E97A58); color: #2B1206; border: none;
  padding: 13px 26px; border-radius: 26px; font: 800 .92rem/1 inherit;
  letter-spacing: .03em; cursor: pointer;
}
.mxv-end-cta:hover { background: #d9693f; }
.mxv-replay {
  background: transparent; color: #eaf0ff; border: 1px solid rgba(255,255,255,.4);
  padding: 10px 20px; border-radius: 24px; font: 600 .86rem/1 inherit; cursor: pointer;
}
.mxv-replay:hover { background: rgba(255,255,255,.12); }
.mxv-end-cta:focus-visible,
.mxv-replay:focus-visible { outline: 2px solid #39d0ff; outline-offset: 2px; }

.mxv-foot { padding: 10px 18px 14px; }
.mxv-transcript-btn {
  background: none; border: none; color: #aeb8ff; font: 600 .82rem/1 inherit;
  cursor: pointer; padding: 4px 0; text-decoration: underline;
}
.mxv-transcript-btn[hidden] { display: none; }
.mxv-transcript {
  max-height: 34vh; overflow: auto; padding: 0 18px 18px;
  color: #c3cae6; font-size: .9rem; line-height: 1.6; white-space: pre-wrap;
}
.mxv-transcript[hidden] { display: none; }

/* page behind must not scroll while the player is open */
html.mxv-open, html.mxv-open body { overflow: hidden !important; }

@media (max-width: 760px) {
  .mxv { padding: 0; place-items: stretch; }
  .mxv-frame { width: 100%; border-radius: 0; border: none; height: 100%; display: flex; flex-direction: column; justify-content: center; }
  .mxv-title { font-size: .92rem; }
  .video-btn { width: 100%; justify-content: center; }
}