/* 📱 Get App on Phone (phoneapp.js): the 🍎 / 🤖 tabs (the app's .seg segmented control, full width) and the
   picked phone's steps, in the theme's tokens (light and dark). */
.pa-box .pa-lead { margin: 0 0 .8rem; }
.pa-box .pa-already { margin: 0 0 .7rem; padding: .5rem .7rem; border-radius: var(--radius-sm); background: var(--good-soft); color: var(--text); font-weight: 600; }
.pa-box .pa-computer { margin: 0 0 .9rem; padding: .6rem .75rem; border-radius: var(--radius-sm); background: var(--sunken); }
.pa-box .pa-computer p { margin: 0 0 .4rem; }
.pa-box .pa-link { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pa-box .pa-link a { color: var(--accent-text); font-weight: 700; overflow-wrap: anywhere; }
.pa-box .pa-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 0 0 .7rem; }
.pa-box .pa-tabs .seg-btn { padding: .5rem .6rem; text-align: center; }
.pa-box .pa-tabs .seg-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: -2px; }
.pa-box .pa-secs { display: grid; }
.pa-box .pa-sec:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 1px; }
.pa-box .pa-sec { border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem .85rem; background: var(--surface); }
.pa-box .pa-sec h4 { margin: 0 0 .45rem; font-size: 1rem; }
.pa-box .pa-steps { margin: 0; padding-left: 1.4rem; display: grid; gap: .3rem; }
.pa-box .pa-steps li { overflow-wrap: anywhere; }
.pa-box .pa-note { margin: .5rem 0 0; }