/* App Store / Google Play badges, shared by every app page.
   /apps/store-links.js sets html[data-store] to ios, android or other. */
.store-row{display:flex; flex-wrap:wrap; align-items:center; column-gap:18px; row-gap:14px}
.store-badge{display:inline-flex; align-items:center; min-height:56px; text-decoration:none}
.store-badge img{display:block; width:auto; height:56px}
.store-badge:focus-visible{outline:3px solid currentColor; outline-offset:4px; border-radius:10px}

/* The viewer's own store comes first; the other one stays reachable. */
html[data-store="android"] .store-row .store-badge--play{order:-1}
html[data-store="ios"] .store-row .store-badge--ios{order:-1}

/* Promo card: one badge, following the viewer's platform (both when unknown). */
.promo-modal__store.store-swap{display:flex; flex-wrap:wrap; align-items:center; gap:14px}
.promo-modal__store.store-swap img{height:48px}
html[data-store="ios"] .store-swap .store-badge-img--play{display:none}
html[data-store="android"] .store-swap .store-badge-img--ios{display:none}

@media(max-width:600px){
  .store-row{column-gap:14px; row-gap:12px}
  .store-badge{min-height:44px}
  .store-badge img{height:44px}
  .promo-modal__store.store-swap img{height:44px}
  .qr-get img{width:84px; height:84px}
  .promo-modal__qr img{width:80px; height:80px}
}

/* Download QR, sitting flat in the badge row: scan it from a computer, tap it
   on a phone. The link follows the viewer's platform like the other store links. */
.qr-get{display:inline-flex; flex-direction:column; align-items:center; gap:7px;
  margin:0; color:inherit; text-decoration:none}
.qr-get img{display:block; width:88px; height:88px; padding:3px; border:1px solid var(--line,#e2e6ea);
  border-radius:8px; background:#fff}
.qr-get span{font-size:11px; line-height:1; letter-spacing:.04em; color:var(--muted,#5b6168)}
.qr-get:hover img{border-color:var(--accent,#0f9d8f)}
.qr-get:focus-visible{outline:3px solid var(--accent,#0f9d8f); outline-offset:3px; border-radius:8px}

/* Promo card: badge and QR on one line. */
.promo-modal__get{display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:16px}
.promo-modal__get .promo-modal__store{margin-top:0}
.promo-modal__qr{display:flex; flex-direction:column; align-items:center; gap:7px}
.promo-modal__qr img{width:88px; height:88px; padding:3px; border:1px solid var(--line,#e2e6ea);
  border-radius:8px; background:#fff}
.promo-modal__qr > span{font-size:11px; line-height:1; letter-spacing:.04em; color:var(--muted,#5b6168)}