/* ── CLICK-TO-PLAY DEMO VIDEO ──
   A self-hosted <video> under a poster with one Play button on top
   (assets/js/demo-video.js). Nothing moves until the visitor presses Play,
   so there is no reduced-motion variant to add. Used on construction.html
   (#con-video); the section spacing lives here so the page's own stylesheet
   doesn't grow. */
.con-videoSection { padding: 80px 0; }

.demoVideo {
  position: relative;
  margin-top: 40px;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.75);
}
.demoVideo video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.demoVideo-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px 14px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font: 600 16px/1 var(--font-main);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  transition: background var(--dur) var(--ease);
}
.demoVideo-play:hover { background: #F7BC5C; }
.demoVideo-play:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.demoVideo-play[hidden] { display: none; }
.demoVideo-play svg { width: 20px; height: 20px; flex: none; }
.demoVideo-len { font-weight: 500; opacity: 0.75; }

/* Captions from sigbot-demo.vtt, readable over the dark app screens. */
.demoVideo video::cue {
  font-family: var(--font-main);
  font-size: 18px;
  line-height: 1.35;
  color: var(--fg);
  background: rgba(10, 11, 13, 0.85);
}

@media (max-width: 640px) {
  .con-videoSection { padding: 56px 0; }
  .demoVideo { margin-top: 28px; border-radius: 10px; }
  .demoVideo-play { padding: 11px 20px 11px 16px; font-size: 15px; }
  .demoVideo video::cue { font-size: 13px; }
}