/* The recording fits the existing monitor bezel (1536 x 1024 image). */
.hero-demo .preview-toolbar { gap: 12px; padding: 4px 20px; min-height: 52px; }
.hero-demo-label { margin-right: auto; color: var(--secondary-slate-dark); font-size: 0.68rem; }
.hero-monitor { position: relative; animation: hero-monitor-float 12s ease-in-out infinite paused; }
.hero-demo[data-running="true"] .hero-monitor { animation-play-state: running; }
.hero-demo .preview-window:hover .hero-product-shot img { transform: none; }
.hero-demo-screen {
  position: absolute;
  left: 17.65%;
  top: 15%;
  width: 64.65%;
  height: 53.8%;
  object-fit: contain;
  background: #f4f8f8;
  border-radius: 1px;
  pointer-events: none;
}
@keyframes hero-monitor-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-monitor { animation: none; }
}
@media (max-width: 576px) {
  .hero-demo .preview-toolbar { padding-inline: 12px; gap: 8px; }
  .hero-demo-label { font-size: 0.6rem; }
}