/* Exact browser recordings: keep the captured viewport ratio and all page details. */
.device-viewport { position: relative; overflow: hidden; aspect-ratio: 8 / 5; background: #fcfcfa; }
.phone .device-viewport { aspect-ratio: 195 / 422; }
.device-viewport > .device-poster { display: block; width: 100%; height: 100%; object-fit: contain; }
.device-viewport > .device-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; }
.device-video[data-video-state="playing"], .device-video[data-video-state="paused"] { opacity: 1; }
.device-stage .phone, .device-stage .desktop { animation: none !important; translate: none !important; }
.device-stage .phone, .device-stage .phone .device-chrome { background: #f7f8fa; }
.device-stage figcaption a { color: #1b7542; text-decoration: underline; text-underline-offset: 3px; }
.device-stage figcaption a:hover { color: #104c2b; }
.device-stage figcaption a:focus-visible { outline: 2px solid #1E8149; outline-offset: 5px; border-radius: 2px; }
@media (max-width: 760px) {
  /* Match the real tall phone viewport without overlapping the headline above. */
  .device-stage .phone { width: 28%; max-width: 145px; border-radius: 20px; }
  .device-stage .phone .device-chrome { height: 16px; }
  .device-stage .phone .device-chrome i { width: 30px; height: 7px; }
}
@media print { .device-viewport > .device-video { display: none; } }