/* iPhone 17 Pro Max — flat frame, no shadows */
.iphone17 {
  --phone-w: 300px;
  --phone-h: 652px;
  --bezel: 10px;
  --radius-outer: 52px;
  --radius-inner: 44px;
  --frame: #1c1c1e;
  --frame-edge: #3a3a3c;
  --screen: #000;
  width: var(--phone-w);
  margin-inline: auto;
}

.iphone17-device {
  position: relative;
  width: var(--phone-w);
  height: var(--phone-h);
  border-radius: var(--radius-outer);
  background: linear-gradient(160deg, #3a3a3c 0%, var(--frame) 22%, #101012 100%);
  border: 2px solid var(--frame-edge);
  padding: var(--bezel);
  box-sizing: border-box;
}

.iphone17-btn {
  position: absolute;
  background: var(--frame-edge);
  border-radius: 2px;
  pointer-events: none;
}

.iphone17-btn-action {
  left: -3px;
  top: 118px;
  width: 3px;
  height: 34px;
}

.iphone17-btn-vol-up {
  left: -3px;
  top: 164px;
  width: 3px;
  height: 58px;
}

.iphone17-btn-vol-down {
  left: -3px;
  top: 234px;
  width: 3px;
  height: 58px;
}

.iphone17-btn-power {
  right: -3px;
  top: 156px;
  width: 3px;
  height: 88px;
}

.iphone17-btn-camera {
  right: -3px;
  top: 268px;
  width: 3px;
  height: 52px;
}

.iphone17-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-inner);
  overflow: hidden;
  background: var(--screen);
  border: 1px solid #0a0a0a;
  isolation: isolate;
  contain: layout paint;
}

.iphone17-screen iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--screen);
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.preview-frame-wrap {
  width: 100%;
  height: 100%;
}

/* Dynamic Island */
.iphone17-island {
  position: absolute;
  top: calc(var(--bezel) + 11px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 126px;
  height: 37px;
  border-radius: 20px;
  background: #000;
  border: 1px solid #1a1a1a;
  pointer-events: none;
}

.iphone17-island::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #1a2540, #060608 70%);
  border: 1px solid #222;
}

.iphone17-caption {
  margin: 20px 0 0;
  text-align: center;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.iphone17-caption strong {
  color: var(--ink-soft);
  font-weight: 600;
}

@media (max-width: 900px) {
  .iphone17 {
    --phone-w: min(272px, 72vw);
    --phone-h: calc(var(--phone-w) * 2.162);
    --bezel: 9px;
    --radius-outer: 48px;
    --radius-inner: 40px;
  }

  .iphone17-island {
    width: 112px;
    height: 34px;
    top: calc(var(--bezel) + 10px);
  }

  .iphone17-btn-action { top: 108px; height: 30px; }
  .iphone17-btn-vol-up { top: 150px; height: 52px; }
  .iphone17-btn-vol-down { top: 214px; height: 52px; }
  .iphone17-btn-power { top: 142px; height: 80px; }
  .iphone17-btn-camera { top: 244px; height: 46px; }
}

@media (max-width: 520px) {
  .iphone17 {
    --phone-w: min(260px, 78vw);
  }
}