/* Best-Apps on iPad + Mac (2000×2500 art). Same plate as the APPS pack: meta row on top, device below. */
.slide.layout-apps-device {
  background: #fff;
  color: #000;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'SF Pro Text', system-ui, sans-serif;
}
.slide.layout-apps-device .grad { display: none; }

.dev-stage {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.dev-stage.is-ipad { top: 930px; }
.dev-stage.is-mac { top: 990px; }

.dev { position: relative; flex: none; }
.dev-screen { position: absolute; overflow: hidden; background: #0b0b0d; }
.dev-screen img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dev-screen .dev-bg { object-fit: cover; filter: blur(90px) saturate(1.2); transform: scale(1.5); opacity: .75; }
.dev-screen .dev-shot { object-fit: contain; }
.dev-live { position: absolute; inset: 0; overflow: hidden; }
.dev-wallpaper {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 18% 12%, #f4d9b8 0%, transparent 55%),
    radial-gradient(100% 90% at 88% 90%, #8fa6c9 0%, transparent 60%),
    #d8d2c8;
}

/* ── iPad · landscape, aluminium rim, thin black bezel ── */
.dev-ipad { width: 1700px; height: 1226px; }
.dev-ipad .dev-body {
  position: absolute; inset: 0;
  border-radius: 92px;
  background: linear-gradient(160deg, #d7d8da 0%, #aeb0b3 48%, #c9cacd 100%);
  padding: 5px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}
.dev-ipad .dev-body::before {
  content: '';
  position: absolute; inset: 5px;
  border-radius: 87px;
  background: #050506;
}
.dev-ipad .dev-screen { inset: 44px; border-radius: 48px; }
.dev-ipad .dev-cam {
  position: absolute; left: 50%; top: 21px;
  width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2c3347 0%, #0a0c12 62%);
  z-index: 2;
}

/* ── Mac · laptop, lid + base ── */
.dev-mac { width: 1900px; height: 1180px; }
.dev-mac .dev-lid {
  position: absolute; left: 70px; top: 0;
  width: 1760px; height: 1118px;
  border-radius: 54px 54px 14px 14px;
  background: linear-gradient(180deg, #d4d5d8 0%, #b4b6b9 100%);
  padding: 5px 5px 0;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.dev-mac .dev-bezel {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50px 50px 10px 10px;
  background: #050506;
}
.dev-mac .dev-screen { left: 26px; right: 26px; top: 26px; bottom: 30px; border-radius: 24px 24px 8px 8px; }
.dev-mac .dev-notch {
  position: absolute; left: 50%; top: 26px;
  width: 210px; height: 40px; margin-left: -105px;
  border-radius: 0 0 22px 22px;
  background: #050506;
  z-index: 3;
}
.dev-mac .dev-base {
  position: absolute; left: 0; top: 1118px;
  width: 1900px; height: 46px;
  border-radius: 0 0 76px 76px / 0 0 46px 46px;
  background: linear-gradient(180deg, #e1e2e4 0%, #bcbdc0 55%, #a3a4a8 100%);
  box-shadow: none;
}
.dev-mac .dev-hinge {
  position: absolute; left: 50%; top: 0;
  width: 340px; height: 16px; margin-left: -170px;
  border-radius: 0 0 20px 20px;
  background: linear-gradient(180deg, #8d8e92, #b3b4b8);
}