.sc-hero-screen { position: relative; }
.sc-phone .sc-hero-screen img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; z-index: 0;
  transition: opacity 0.22s ease-out;
}
.sc-phone .sc-hero-screen .sc-hero-base { position: relative; height: auto; }
.sc-phone .sc-hero-screen .sc-hero-frame.is-under { opacity: 1; z-index: 1; transition: none; }
.sc-phone .sc-hero-screen .sc-hero-frame.is-on { opacity: 1; z-index: 2; }
.sc-hero-cam {
  position: absolute; left: 5.979%; top: 46.372%; width: 88.04%; height: 30.37%;
  overflow: hidden; border-radius: 3.03% / 4.06%; z-index: 3;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease-out;
}
.sc-hero-cam.is-on { opacity: 1; transition-duration: 0.45s; }
.sc-phone .sc-hero-screen .sc-hero-cam img {
  position: absolute; inset: auto; left: -3.47%; top: -4.11%; width: 106.94%; height: 108.21%;
  border-radius: 0; opacity: 1; z-index: auto;
  transform: translate(5px, -3px);
  transition: transform 2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sc-hero-cam.is-on img { transform: translate(0, 0); }
.sc-hero-tap {
  position: absolute; z-index: 4; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease-out;
}
.sc-hero-tap.is-on { opacity: 1; transition-duration: 0.12s; }
.sc-hero-tap.is-at-scan { left: 72%; top: 46.3%; }
.sc-hero-tap.is-at-submit { left: 70%; top: 95.2%; }
@media (prefers-reduced-motion: reduce) {
  .sc-phone .sc-hero-screen img, .sc-hero-cam, .sc-hero-tap { transition: none; }
  .sc-phone .sc-hero-screen .sc-hero-frame[data-sc-frame="scan"] { opacity: 1; z-index: 2; }
  .sc-hero-cam { opacity: 1; }
  .sc-phone .sc-hero-screen .sc-hero-cam img { transform: none; }
}