/* Shared phone frame for every app capture. Size details relative to each figure. */
.capture { container-type: inline-size; }
.hero-phone { width: min(350px, 100%); }
.phone-device {
  position: relative;
  transform: perspective(1200px) rotateY(var(--phone-y, 0deg)) rotateX(var(--phone-x, 0deg));
  transition: transform 240ms ease-out;
  filter: drop-shadow(0 40px 55px #0008) drop-shadow(0 20px 40px #7c5cff40);
}
.phone-bezel {
  position: relative;
  padding: 2.57143cqw;
  border: 1px solid #ffffff18;
  border-radius: 16cqw;
  background: linear-gradient(155deg, #35323e, #1c1c22 24%, #0e0e13 75%, #37323f);
  box-shadow: inset 0 0 0 1px #0009;
}
.phone-bezel::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid #ffffff0d;
  border-radius: 15.14286cqw;
  pointer-events: none;
}
.capture .phone-bezel .snapshot-link {
  border: 0;
  border-radius: 13.42857cqw;
  aspect-ratio: 330 / 714;
  background: #14111b;
  box-shadow: none;
}
/* Remove the capture's white outer canvas without changing its content. */
.phone-bezel img {
  position: absolute;
  width: 104.848485%;
  max-width: none;
  height: auto;
  left: -2.424242%;
  top: -5.322129%;
}
.phone-notch {
  position: absolute;
  top: 5.42857cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 30.28571cqw;
  height: 7.71429cqw;
  border-radius: 18px;
  background: #000;
  box-shadow: inset 0 1px 2px #ffffff0c;
  z-index: 2;
  pointer-events: none;
}
.phone-button { position: absolute; width: 3px; border-radius: 3px; background: #393440; }
.phone-button-volume { left: -2px; top: 41.71429cqw; height: 16cqw; }
.phone-button-power { right: -2px; top: 51.42857cqw; height: 21.71429cqw; }
.phone-device .expand-hint { bottom: 20.57143cqw; opacity: 0; transition: opacity 180ms ease; }
.capture .phone-bezel .snapshot-link:hover .expand-hint,
.capture .phone-bezel .snapshot-link:focus-visible .expand-hint { opacity: 1; }
.capture figcaption { padding-top: 24px; }
.hero-phone figcaption { padding-top: 26px; }
.capture:not(.hero-phone) .phone-device { filter: drop-shadow(0 18px 26px #24142e30); }
@media (max-width: 780px) { .hero-phone { width: min(320px, calc(100% - 24px)); } }
@media (prefers-reduced-motion: reduce) {
  .phone-device { transform: none; transition: none; }
  .phone-device .expand-hint { transition: none; }
}

/* The Email screen is native vector artwork, with no screenshot canvas to crop. */
.email-phone .phone-bezel img {
  position:static;
  width:100%;
  max-width:100%;
  height:auto;
}