/* Shared iPhone screenshot frame used by the app landing pages. */
.device-frame {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 37 / 76;
  margin: 0;
  overflow: hidden;
  border: 1px solid #090a0b;
  border-radius: 56px;
  background:
    linear-gradient(
      115deg,
      #8b8e93 0%,
      #25272a 16%,
      #787c82 43%,
      #1a1b1e 72%,
      #696d73 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 0 0 3px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(15, 23, 42, 0.12),
    0 28px 70px rgba(15, 35, 54, 0.18);
}

.device-screen {
  position: absolute;
  inset: 7px;
  overflow: hidden;
  border: 5px solid #050506;
  border-radius: 49px;
  background: #000;
}

.device-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 43px;
}

/*
 * Optional Dynamic Island for screenshots captured without one. Its detached,
 * fully rounded form follows the reference frame demo. The dimensions are
 * measured from the 1260x2736 SixtyNine screenshots: 376x110 at x442, y60.
 */
.device-frame--css-island .device-screen::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: min(2.192982456%, calc(13.990476191px - 1.106821107cqw));
  left: 50%;
  width: max(
    calc(29.841269841cqw - 7.758730159px),
    calc(28.228228228cqw - 3.573099415px)
  );
  aspect-ratio: 188 / 55;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 1px 2px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.feature-section-dark .device-frame {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 0 0 3px rgba(0, 0, 0, 0.3),
    0 30px 70px rgba(0, 20, 30, 0.34);
}

.device-frame.shadow-heavy {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 0 0 3px rgba(0, 0, 0, 0.3),
    0 32px 84px rgba(15, 35, 54, 0.16);
}

@media (max-width: 560px) {
  .device-frame {
    border-radius: 48px;
  }

  .device-screen {
    inset: 6px;
    border-width: 4px;
    border-radius: 42px;
  }

  .device-screen img {
    border-radius: 37px;
  }
}