/* Match the rounded system typography used by the iOS app. */
:root { --font-rounded: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, sans-serif; }
html,
body {
  font-family: var(--font-rounded);
  -webkit-font-smoothing: antialiased;
}

.app-store-badge {
  display: inline-block;
  margin: 10px 0 0;
  line-height: 0;
  border-radius: 7px;
}

.app-store-badge img {
  display: block;
  width: auto;
  height: 48px;
}

/* Recordings already contain the status bar and Dynamic Island. */
.iphone-frame {
  position: relative;
  padding: 7px;
  border: 1px solid #787672;
  border-radius: 15% / 7%;
  background: #191919;
  box-shadow: 0 0 0 1px #272726, 0 8px 20px #33271918;
  isolation: isolate;
}

.iphone-screen {
  overflow: hidden;
  border-radius: 12.5% / 5.8%;
  background: #000;
  transform: translateZ(0);
}

.iphone-screen video,
.iphone-screen img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 720 / 1566;
  object-fit: contain;
  border-radius: 0;
}

.iphone-frame::before,
.iphone-frame::after {
  content: '';
  position: absolute;
  width: 3px;
  background: #454442;
  border-radius: 2px;
  pointer-events: none;
  z-index: -1;
}

.iphone-frame::before {
  top: 19%;
  left: -3px;
  height: 6%;
  box-shadow: 0 39px #454442;
}

.iphone-frame::after {
  top: 28%;
  right: -3px;
  height: 10%;
}

.iphone-frame:focus-within {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

/* A thin metal rim and black display seal, matching the launch treatment.
   The clean Dynamic Island is baked into the footage, including its poster. */
.iphone-frame--clean {
  --frame-padding: 2px;
  padding: var(--frame-padding);
  border: 0;
  border-radius: 13.5% / 6.2%;
  background: linear-gradient(120deg, #eeeae4, #878582 28%, #d5d2cc 58%, #686765);
  box-shadow: 0 0 0 1px #5c5b5759, 0 18px 34px -12px #30271933;
}

.iphone-frame--clean .iphone-screen {
  border: 3px solid #101010;
  border-radius: 13% / 6%;
}

.iphone-frame--clean::before,
.iphone-frame--clean::after {
  background: linear-gradient(90deg, #777571, #d0ccc5, #93918c);
}