/* ============================================================
   MOBILE APP — realistic phone frame for the Coming Soon section
   Pure CSS, no JS, no external dependencies. No brand marks.
   Layout (.zz__row, .zz__copy, .checklist) lives in features.css.
   ============================================================ */

.iphone {
  position: relative;
  width: 100%;
  max-width: 230px;
  aspect-ratio: 9 / 19.5;
  background: linear-gradient(180deg, #2d2e30 0%, #1a1b1d 100%);
  border-radius: 36px;
  padding: 6px;
  box-shadow:
    /* inner highlight ring (chrome shine) */
    inset 0 0 0 1.5px rgba(255, 255, 255, .08),
    /* inner dark ring (where the bezel meets the screen) */
    inset 0 0 0 3px rgba(0, 0, 0, .35),
    /* contact shadow */
    0 1px 3px rgba(15, 23, 42, .05),
    /* main floating shadow */
    0 16px 38px -10px rgba(15, 23, 42, .22),
    /* soft ambient shadow */
    0 32px 60px -18px rgba(15, 23, 42, .12);
  margin: 0 auto;
}

/* Dynamic Island — pill in the center, above the screen's status bar.
   Sits exactly where the real hardware notch would be, so the iOS
   status-bar items in the screenshot (clock left, battery right)
   visually flow around it as in real life. */
.iphone__notch {
  display: block;
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 22px;
  background: #000;
  border-radius: 12px;
  z-index: 5;
  pointer-events: none;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, .06);
}

/* Left side: mute/action button + volume up + volume down
   One pseudo-element, two extra buttons drawn via stacked box-shadows
   (offset only on Y axis, color carried over). */
.iphone::before {
  content: '';
  position: absolute;
  left: -1.5px;
  top: 22%;
  width: 2.5px;
  height: 20px;
  background: #15161a;
  border-radius: 1.5px 0 0 1.5px;
  box-shadow:
    0 44px 0 0 #15161a,    /* Volume Up */
    0 78px 0 0 #15161a;    /* Volume Down */
  pointer-events: none;
}

/* Right side: power / standby button (longer than the left ones) */
.iphone::after {
  content: '';
  position: absolute;
  right: -1.5px;
  top: 27%;
  width: 2.5px;
  height: 54px;
  background: #15161a;
  border-radius: 0 1.5px 1.5px 0;
  pointer-events: none;
}

.iphone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
}

.iphone__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}