/* Scoped to the iPhone Duo showcase; existing page styles are unchanged. */
.duo-showcase {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  align-items: center;
  gap: 64px;
  padding-bottom: 100px;
}
.duo-copy { min-width: 0; }
.duo-copy .eyebrow { color: #7c886c; margin-bottom: 20px; }
.duo-copy h2 {
  font-size: clamp(28px, 3vw, 39px);
  font-weight: 650;
  line-height: 1.65;
  margin-bottom: 22px;
}
.duo-copy > p:last-child { color: var(--muted); font-size: 13px; line-height: 2; }
.duo-figure { min-width: 0; padding: 20px 22px 0; }
.duo-frame {
  position: relative;
  isolation: isolate;
  padding: 9px;
  border: 1px solid #818881;
  border-radius: 39px;
  background: linear-gradient(145deg, #c2c7bf, #515853 16%, #1d231e 48%, #767c75 86%, #a3aaa1);
  box-shadow: 0 2px 0 #d7dbd1 inset, 0 -3px 0 #333b32 inset,
    0 5px 0 #555e53, 0 7px 0 #9da494, 0 28px 45px -14px #193d3538;
  transform: perspective(1600px) rotateY(-8deg) rotateZ(2deg);
  transform-origin: center;
}
.duo-frame::before {
  content: "";
  position: absolute;
  top: 19%;
  right: -3px;
  width: 3px;
  height: 10%;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(#bac0b5, #626c60, #aab2a4);
  z-index: -1;
}
.duo-screen { overflow: hidden; border-radius: 30px; background: #000; }
.duo-screen img { width: 100%; height: auto; }
.duo-crease {
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 50%;
  width: 13px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #00000007 30%, #ffffff0c 55%, transparent);
  pointer-events: none;
  border-radius: 3px;
}
.duo-figure figcaption { margin-top: 28px; font-size: 9px; color: var(--muted); text-align: center; line-height: 1.8; }
@media (max-width: 1000px) {
  .duo-showcase { gap: 34px; grid-template-columns: .75fr 1.25fr; }
  .duo-frame { padding: 7px; border-radius: 30px; }
  .duo-screen { border-radius: 23px; }
  .duo-crease { top: 7px; bottom: 7px; }
}
@media (max-width: 800px) {
  .duo-showcase { grid-template-columns: 1fr; gap: 30px; padding-bottom: 70px; }
  .duo-copy > p:last-child { max-width: 480px; }
  .duo-figure { width: min(650px, 100%); justify-self: center; padding: 8px 8px 0; }
  .duo-frame { transform: perspective(1600px) rotateY(-5deg) rotateZ(1.5deg); }
}
@media (max-width: 650px) {
  .duo-showcase { gap: 24px; padding-bottom: 55px; }
  .duo-copy .eyebrow { font-size: 9px; margin-bottom: 16px; }
  .duo-copy h2 { font-size: 29px; margin-bottom: 17px; }
  .duo-figure { padding-inline: 4px; }
  .duo-frame { border-radius: 21px; padding: 5px; }
  .duo-screen { border-radius: 15px; }
  .duo-crease { top: 5px; bottom: 5px; width: 9px; }
  .duo-figure figcaption { margin-top: 22px; font-size: 8px; }
}