/* devices page extras */
.devices-page { background: var(--grey); min-height: 100vh; }
.devices-hero { background: var(--navy); color: #fff; padding: 2rem 0 1.8rem; }
.devices-hero h1 { margin: .3rem 0 .5rem; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; }
.devices-hero p { margin: 0; color: rgba(255,255,255,.75); max-width: 40rem; }
.devices-stage {
  padding: 2.4rem 0 3.2rem;
}
.devices-row {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 3rem; flex-wrap: wrap;
}
.device-col { display: flex; flex-direction: column; align-items: center; gap: .85rem; }
.device-label {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* iPhone 393×852 + bezel */
.iphone {
  --w: 393px; --h: 852px; --bezel: 12px; --radius: 52px;
  width: calc(var(--w) + var(--bezel)*2);
  height: calc(var(--h) + var(--bezel)*2 + 8px);
  background: #1a1a1a;
  border-radius: var(--radius);
  padding: var(--bezel);
  padding-top: calc(var(--bezel) + 4px);
  padding-bottom: calc(var(--bezel) + 4px);
  box-shadow:
    0 0 0 2px #2a2a2a,
    0 24px 60px rgba(11,31,58,.28),
    inset 0 0 0 1px #444;
  position: relative;
}
.iphone .island {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 118px; height: 34px; background: #000; border-radius: 20px; z-index: 3;
}
.iphone .side-btn {
  position: absolute; width: 3px; background: #2c2c2c; border-radius: 2px;
}
.iphone .btn-silent { top: 120px; left: -3px; height: 28px; }
.iphone .btn-vol-up { top: 168px; left: -3px; height: 52px; }
.iphone .btn-vol-dn { top: 228px; left: -3px; height: 52px; }
.iphone .btn-power { top: 190px; right: -3px; height: 90px; }
.iphone-screen {
  width: var(--w); height: var(--h); border-radius: 40px; overflow: hidden;
  background: #fff; position: relative;
}
.iphone-screen iframe { width: 393px; height: 852px; border: 0; display: block; background: #fff; }

/* iPad 820×1180 + bezel */
.ipad {
  --w: 820px; --h: 1180px; --bezel: 22px; --radius: 36px;
  /* scale down so both devices fit a 1440-wide desktop */
  --s: 0.68;
  width: calc((var(--w) + var(--bezel)*2) * var(--s));
  height: calc((var(--h) + var(--bezel)*2) * var(--s));
}
.ipad-inner {
  width: calc(var(--w) + var(--bezel)*2);
  height: calc(var(--h) + var(--bezel)*2);
  background: #1c1c1c;
  border-radius: var(--radius);
  padding: var(--bezel);
  box-shadow:
    0 0 0 2px #2a2a2a,
    0 24px 60px rgba(11,31,58,.28),
    inset 0 0 0 1px #444;
  position: relative;
  transform: scale(var(--s));
  transform-origin: top left;
}
.ipad-inner .cam {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px; background: #111; border-radius: 50%;
  box-shadow: inset 0 0 0 2px #333, 0 0 0 3px #1c1c1c;
  z-index: 3;
}
.ipad-screen {
  width: var(--w); height: var(--h); border-radius: 8px; overflow: hidden; background: #fff;
}
.ipad-screen iframe { width: 820px; height: 1180px; border: 0; display: block; background: #fff; }

@media (max-width: 1179px) {
  .devices-row { gap: 2rem; }
  .ipad { --s: 0.55; }
}
@media (max-width: 819px) {
  .devices-row { flex-direction: column; align-items: center; }
  .ipad { --s: 0.42; }
  .iphone { transform: scale(.86); transform-origin: top center; margin-bottom: -80px; }
}