/* Hardware artwork uses measured screen openings. Screenshot pixels are never stretched. */
.phone, .screen-item .phone, .campaign-phone {
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  overflow: visible; aspect-ratio: 1508 / 3278;
  filter: drop-shadow(0 24px 24px rgba(0,0,0,.4));
}
.phone::before { display: none; }
.phone::after, .campaign-phone::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: url('/assets/devices/iphone.png') center / 100% 100% no-repeat;
  opacity: 1; mix-blend-mode: normal; pointer-events: none;
}
.phone img, .screen-item .phone img, .campaign-phone img {
  position: absolute; left: 10.013%; top: 9.991%; width: 79.974%; height: 80.018%;
  border-radius: 0; object-fit: contain;
  mask: url('/assets/devices/phone-mask.svg') center / 100% 100% no-repeat;
}
.phone { margin-left: 0; margin-right: 0; }
.phone-hero { width: min(85%, 430px); }
.phone-card { width: min(90%, 440px); }
.watch-screen, .watch-capture, .campaign-watch {
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  aspect-ratio: 560 / 880; overflow: visible;
  filter: drop-shadow(0 22px 20px rgba(0,0,0,.5));
}
.watch-screen::after, .watch-capture::after, .campaign-watch::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: url('/assets/devices/watch.png') center / contain no-repeat; pointer-events: none;
}
.watch-screen img, .watch-capture img, .campaign-watch img {
  position: absolute; left: 12.4%; top: 21.5%; width: 75.2%; height: 57%;
  aspect-ratio: auto; object-fit: contain; background: #000;
  border-radius: 26% / 22%;
}
.watch-screen figcaption, .watch-capture figcaption, .campaign-watch small { display: none; }
.watch-hero { width: 170px; bottom: 7%; left: 0; }
.watch-capture { width: 100%; }
.campaign-watch { top: 175px; width: 74%; left: 13%; }
.campaign-phone { width: 86%; left: 7%; top: 122px; }
.duo-section { border-top: 1px solid var(--line); }
.duo-stage { display: grid; place-items: center; padding: 35px 15px;
  border-radius: 32px; background: radial-gradient(ellipse at 30% 40%, #323d1e, transparent 65%), #141419; }
.duo-device { position: relative; width: min(100%, 960px); aspect-ratio: 3093 / 2247;
  filter: drop-shadow(0 30px 30px #0008); container-type: inline-size; }
.duo-device::after { content: ''; position: absolute; width: 72.648%; height: 137.65%; left: 13.676%; top: -18.825%; transform: rotate(90deg); z-index: 2; pointer-events: none;
  background: url('/assets/devices/duo.png') center / 100% 100% no-repeat; }
.duo-screen { position: absolute; inset: 5.34% 3.88%; overflow: hidden; border-radius: 7%;
  background: radial-gradient(circle at 80% 0, #303b16, transparent 45%), #101014; padding: 3% 4%; }
.duo-screen header { display: flex; align-items: center; justify-content: space-between; font-size: 2.3cqw; }
.duo-screen header b { font-size: 4cqw; }
.duo-screen h3 { font-size: 3.6cqw; letter-spacing: -.04em; margin: 3% 0; }
.duo-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 4%; }
.duo-timer, .duo-plan { border: 1px solid #ffffff18; background: #ffffff08; border-radius: 3cqw; padding: 4%; }
.duo-timer { text-align: center; }
.duo-screen small { font-size: 1.8cqw; color: #b1b1bb; }
.duo-ring { width: 58%; aspect-ratio: 1; border: 1cqw solid var(--lime); border-left-color: #343e21;
  border-radius: 50%; display: grid; place-content: center; margin: 5% auto; }
.duo-ring strong { font-size: 6cqw; letter-spacing: -.07em; }
.duo-ring span { font-size: 2cqw; color: var(--lime); }
.duo-control { background: var(--lime); color: #12150b; border-radius: 2cqw; padding: 4%; font-size: 2cqw; font-weight: 700; }
.duo-plan h4 { font-size: 2.6cqw; margin: 0 0 3%; }
.duo-plan p { font-size: 1.8cqw; margin: 0; padding: 4% 0; border-bottom: 1px solid #ffffff14; }
.duo-plan p:first-of-type { color: var(--lime); }
.duo-summary { display: flex; justify-content: space-between; margin-top: 2%; padding: 2% 6%; border-radius: 2cqw; background: #ffffff08; font-size: 1.5cqw; }
.duo-summary b { display: block; color: var(--lime); font-size: 2.6cqw; margin-bottom: 3%; }
.duo-note { font-size: 13px; color: var(--muted); text-align: center; margin-top: 24px; }
@media(max-width:600px) {
  .phone-hero { width: 84%; }
  .phone-card { width: 85%; }
  .watch-hero { width: 130px; bottom: 6%; }
  .watch-capture { width: 70%; }
  .campaign-watch { top: 160px; width: 70%; left: 15%; }
  .campaign-phone { top: 110px; }
}