/* Actual product recordings, framed by the same opaque surfaces as the cards. */
.bpx-demo { margin: 0; min-width: 0; overflow: hidden; border: 1px solid #343434; border-radius: 17px; background: #111113; isolation: isolate; }
.demo-recording { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #111113; }
.demo-poster, .demo-poster img, .demo-video { display: block; width: 100%; height: 100%; }
.demo-poster { position: absolute; inset: 0; }
.demo-poster img, .demo-video { object-fit: contain; }
.demo-video { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.bpx-demo.is-ready .demo-video { opacity: 1; }
.demo-story { padding: 20px 22px; border-top: 1px solid #2c2c2c; background: #111; }
.demo-story-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #999; font-size: 9px; line-height: 1.6; letter-spacing: .025em; }
.demo-status-dot { width: 5px; height: 5px; border-radius: 50%; background: #c5c5bd; flex: 0 0 auto; }
.demo-story-divider { color: #555; margin-inline: 2px; }
.demo-story p { margin: 8px 0 0; color: #e7e7e4; font-size: 12px; line-height: 1.6; letter-spacing: -.01em; text-wrap: balance; }
@media (max-width: 600px) {
  .bpx-demo { border-radius: 12px; }
  .demo-recording { aspect-ratio: 430 / 760; }
  .demo-story { padding: 17px 15px; }
  .demo-story-eyebrow { font-size: 8px; gap: 6px; }
  .demo-story p { font-size: 12px; }
}