/* iPhone Duo page: the landing's own components, plus sizes for the wide Duo screenshots. */

.section-header .section-title::before { display: none; }
h1, h2, .section-header .section-subtitle, .duo-card h3 { text-wrap: balance; }
.duo-card p, .duo-hero .hero-subtitle { text-wrap: pretty; }

#screens { scroll-margin-top: var(--scroll-offset); }

a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.duo-hero { min-height: 0; padding-top: 7rem; padding-bottom: 3rem; }
.duo-hero .hero-split-wide { max-width: var(--container); }
.duo-hero .hero-text { flex: 1 1 36%; }
.duo-hero .hero-subtitle { max-width: 40ch; }
.duo-hero .hero-devices { flex: 1 1 60%; max-width: 680px; }

.duo-shot { width: 100%; height: auto; filter: var(--shadow-device); }

@media (min-width: 881px) {
    .duo-images { flex: 0 0 56%; max-width: 56%; }
}

.duo-cards { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.duo-card { grid-column: span 12; --lead: 1.3rem; --body: 1rem; padding: 1.5rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.duo-card h3 { margin: 0 0 .65rem; font-size: var(--lead); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--text); }
.duo-card p { margin: 0; font-size: var(--body); line-height: 1.55; color: var(--text-2); }

@media (max-width: 880px) {
    .duo-hero { padding-top: 4.5rem; }
}

@media (min-width: 641px) {
    .duo-cards { gap: 1.25rem; }
    .duo-card { grid-column: span 7; --lead: 1.7rem; --body: 1.075rem; padding: 1.75rem; }
    .duo-card:nth-child(4n + 2), .duo-card:nth-child(4n + 3) { grid-column: span 5; --lead: 1.45rem; --body: 1rem; }
    .duo-card:last-child { grid-column: 1 / -1; --lead: 1.7rem; --body: 1.075rem; }
}

@media (min-width: 1181px) {
    .duo-card:nth-child(n) { grid-column: span 4; --lead: 1.55rem; --body: 1.05rem; }
    .duo-card:is(:nth-child(1), :nth-child(6), :nth-child(9)) { grid-column: span 5; --lead: 1.85rem; --body: 1.1rem; }
    .duo-card:is(:nth-child(3), :nth-child(4), :nth-child(8)) { grid-column: span 3; --lead: 1.35rem; --body: 1rem; }
    .duo-card:nth-child(3n + 2) { transition-delay: .08s; }
    .duo-card:nth-child(3n) { transition-delay: .16s; }
}