/* Server-injected after the site's styles; preserved across site:unpack. */
.cat .face {
  transition: visibility 0s linear 0.4s;
}
.cat .face.front { visibility: visible; }
.cat .face.back { visibility: hidden; }
.cat.flip .face.front { visibility: hidden; }
.cat.flip .face.back { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .cat .face { transition-delay: 0s !important; }
}

video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}

.brand-stage { isolation: isolate; }
.site-head { transform: translate3d(0, 0, 0); }

@supports not (overflow-x: clip) {
  html { overflow-x: hidden; }
}

@media (max-width: 760px) {
  .cmp.new p.foot {
    position: relative;
    z-index: 2;
    padding-right: 104px;
  }
}

/* Keep the phone and heading in the same intrinsic-height row on mobile. */
@media (max-width: 860px) {
  .how-stage {
    padding-top: calc(var(--head-h) - 6px + env(safe-area-inset-top, 0px));
    align-items: start;
    align-content: start;
  }
  .how-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 14px;
    align-items: center;
    height: auto;
  }
  .how-copy { display: contents; }
  .how-copy > :first-child {
    grid-row: 1;
    grid-column: 1;
    align-self: center;
  }
  #steps {
    grid-row: 2;
    grid-column: 1 / -1;
    gap: 6px;
    padding-bottom: 70px;
  }
  #phone {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
    height: clamp(120px, calc(100svh - 480px - env(safe-area-inset-top, 0px)), 250px);
    width: auto;
    transform: rotate(-2deg);
    border-radius: 24px;
    margin: 6px 4px 0 0;
  }
  #phoneTag, .phone-tag { display: none; }
  .how-copy .display { font-size: clamp(20px, 5.6vw, 28px); }
  .step { padding: 10px 14px; }
}

@media (max-width: 860px) and (max-height: 620px) {
  #steps .step p { display: none; }
  .readout { margin-top: 6px; }
}