/* Homepage iPhone Duo section (#duo).
   Apple's marketing rules forbid animating, flipping or spinning a product image, and allow
   fades and dissolves. So the three framed screens are stacked and only their opacity changes:
   the device never moves. Reduced motion shows the open map alone. */
.duo-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.duo-steps{list-style:none;padding:0;margin:26px 0 0;counter-reset:duo}
.duo-steps li{padding:12px 0;border-top:1px solid var(--line);color:var(--muted)}
.duo-steps b{color:var(--ink);font-weight:700}
.duo-stage{position:relative;margin:0;aspect-ratio:1600/1162}
.duo-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;animation:duo-cycle 12s infinite}
.duo-closed{animation-delay:0s}.duo-open{animation-delay:4s}.duo-zoom{animation-delay:8s}
/* Each frame: fade in over ~0.8s, hold, fade out, then wait two slots. */
@keyframes duo-cycle{0%{opacity:0}7%{opacity:1}30%{opacity:1}37%{opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.duo-frame{animation:none}.duo-open{opacity:1}}
@media(max-width:900px){.duo-grid{grid-template-columns:1fr;gap:30px}}

/* The "Optimized for iPhone Duo" flag above the hero headline. */
.duo-flag{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:6px 12px 6px 6px;border:1px solid var(--line);border-radius:100px;color:var(--ink);text-decoration:none;font-size:.85rem;background:var(--card)}
.duo-flag:hover{border-color:var(--blue)}
.duo-flag-new{background:var(--blue);color:#fff;border-radius:100px;padding:2px 9px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}