/* Screen-recording card sits above the scrollable review embed; keep a clear
   seam between the two framed figures. */
.demo-video-card {
  margin-bottom: 1.75rem;
}

/* Demo-only review frame: manual evidence inspection should never auto-pan. */
.demo-review-motion {
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: var(--vs-teal-700) #e7edf5;
}

.demo-review-motion img {
  transform: none;
  animation: none;
  will-change: auto;
}

.demo-review-motion:focus-visible {
  outline: 3px solid var(--vs-teal-700);
  outline-offset: 3px;
}

/* Mobile serves a phone-native portrait capture (see the <picture> mobile
   sources in demo.html): the base 16/10 frame would show only a ~224px
   sliver of it, so give the scroll frame real height on small screens. */
@media (max-width: 768px) {
  .demo-review-motion {
    aspect-ratio: auto;
    height: min(72vh, 620px);
  }
}

.vs-premium .admit-section p.demo-review-instruction {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: #eef6f5;
  color: var(--color-text-secondary);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Conversion bridge directly beneath the review embed: the reader has just
   seen the evidence — give them the next step without hunting for it. */
.demo-bridge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem 1.25rem;
  margin: 1.5rem 0 2.25rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-rlg);
  background: #ffffff;
}

.demo-bridge p {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
}

/* The what-this-demo-covers stats read better after the embed than as a
   hero blocker; tighten their top rhythm in the new position. */
#demo-review .hero-stats {
  margin-top: 0;
}