/* Device selector: native radios retain keyboard and screen-reader behavior. */
.device-switch { border: 0; padding: 0; margin: 0 auto 32px; display: flex; justify-content: center; gap: 4px; }
.device-switch legend { text-align: center; margin-bottom: 10px; font-size: .9rem; color: var(--muted); }
.device-switch label { position: relative; cursor: pointer; }
.device-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.device-switch span { display: block; min-width: 104px; padding: 10px 24px; border: 1px solid #9c969e; border-radius: 999px; text-align: center; font-weight: 600; }
.device-switch input:checked + span { background: var(--ink); color: white; border-color: var(--ink); }
.device-switch input:focus-visible + span { outline: 3px solid #934139; outline-offset: 4px; }
.device-panel[hidden] { display: none; }
.screenshot-gallery .ipad-shots { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 1060px; }
.screenshot-gallery .ipad-shots figure { padding: 24px; }
.screenshot-gallery .ipad-shots img { border: 9px solid #25252a; border-radius: 23px; width: 100%; height: auto; }
.hero img.app-icon { width: 120px; height: 120px; border-radius: 26px; }
@media(max-width:680px) { .screenshot-gallery .ipad-shots { grid-template-columns: minmax(0,1fr); max-width: 480px; } .screenshot-gallery .ipad-shots figure { padding: 16px; } .screenshot-gallery .ipad-shots img { border-width: 6px; border-radius: 16px; } }