/* US screen captures: keep the full image attached to the phone's glass. */
.v2-page .phone {
  --phone-bezel: 5px;
  padding: var(--phone-bezel);
  border-radius: 15% / 7%;
}

.v2-page .phone--sm { --phone-bezel: 3.5px; }
.v2-page .imessage-phone { --phone-bezel: 5.5px; }

.v2-page .phone::before {
  inset: var(--phone-bezel);
  border-radius: 14% / 6.44%;
}

.v2-page .phone__screen {
  aspect-ratio: 900 / 1957;
  border-radius: 14% / 6.44%;
  clip-path: inset(0 round 14% / 6.44%);
  isolation: isolate;
}

.v2-page .phone__screen > picture,
.v2-page .phone__screen img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.v2-page .phone__screen img {
  object-fit: cover;
  object-position: center;
}

.v2-page .imessage-phone .phone__screen { aspect-ratio: 853 / 1844; }

.v2-page .imessage-phone .mock-screen {
  /* The shared FR scroll effect writes an inline scale/offset. US images
     already include the full screen, so only their opacity should crossfade. */
  transform: none !important;
  filter: none !important;
  transition-property: opacity;
  will-change: opacity;
}

/* Keep both states in one stacking context so the existing switcher works. */
.v2-page .imessage-phone .phone__screen > picture { display: contents; }