/* Use Little Binder on a computer, phone, or app (/how/use-on-computer-phone-and-apps). */
.device-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 8px; }
.device-pick { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-height: 60px; padding: 14px 16px; border: 2px solid var(--brand-pale); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; }
.device-pick:hover, .device-pick:focus-visible { border-color: var(--brand); }
.device-pick-icon { grid-row: 1 / span 2; width: 52px; height: 52px; }
.device-pick-icon svg { display: block; width: 100%; height: 100%; }
.device-pick strong { align-self: end; font-size: 1.02rem; }
.device-pick span { align-self: start; color: var(--ink-soft); font-size: .9rem; line-height: 1.4; }
.device-section { scroll-margin-top: 96px; padding-top: 24px; }
.device-steps { list-style: none; counter-reset: device-step; margin: 18px 0 8px; padding: 0; }
.device-steps li { counter-increment: device-step; position: relative; min-height: 40px; margin: 0 0 14px; padding: 5px 0 0 54px; line-height: 1.6; }
.device-steps li::before { content: counter(device-step); position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: var(--surface); font-weight: 700; }
.device-shot { margin: 28px 0 8px; }
.device-shot img { display: block; width: 100%; height: auto; }
.device-shot-medium img { max-width: 480px; margin: 0 auto; }
.device-shot-phone img { max-width: 300px; margin: 0 auto; }
.device-shot figcaption { margin-top: 14px; padding: 16px 20px; border-radius: var(--radius); background: var(--note-pale); }
.device-shot figcaption strong { display: block; margin-bottom: 8px; }
.device-callouts { list-style: none; counter-reset: device-mark; margin: 0; padding: 0; }
.device-callouts li { counter-increment: device-mark; position: relative; margin: 6px 0; padding-left: 38px; line-height: 1.5; }
.device-callouts li::before { content: counter(device-mark); position: absolute; top: -1px; left: 0; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pop-red); color: var(--surface); font-size: .85rem; font-weight: 700; }
.device-note { margin: 4px 0 0; padding: 14px 18px; border-left: 4px solid var(--brand-soft); background: var(--brand-pale); border-radius: 0 var(--radius) var(--radius) 0; }
@media (max-width: 720px) {
  .device-picker { grid-template-columns: 1fr; }
}