/* Official store badges (2026-10-12). The artwork in /assets/stores/ is each store's own file,
   unmodified: Microsoft (get.microsoft.com/images/<lang> dark.svg), Google Play
   (play.google.com/intl/en_us/badges, <code>_badge_web_generic.png) and the Chrome Web Store
   (developer.chrome.com/docs/webstore/branding, large PNG with border). gen.js swaps ms/en and
   play/en for the page's language.
   Rules that set the sizes:
   - Google Play must be the same size as or larger than the other badges, at least 28px tall,
     with clear space of a quarter of its height. Its PNG has transparent padding (41/250 on every
     side in en/ar/bn/ur, 29/250 top and bottom only in the other 15), so the image is 66px tall and
     pulled in by its padding, which leaves a visible badge of 44px (en/ar/bn/ur) or 51px (others).
   - Microsoft's badge is used at its native 44px.
   - Apple allows its badge only for apps on sale or on pre-order, and no standalone Apple logo,
     so iPhone is plain text with our own phone outline until the app is approved. */
.stores { text-align: center; }
.storerow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 22px; margin: 22px 0 0; }
.storerow.start { justify-content: flex-start; }
.storebadge { display: inline-flex; align-items: center; line-height: 0; border-radius: 6px; }
.storebadge:focus-visible { outline: 3px solid #E8622A; outline-offset: 4px; }
.storebadge img { display: block; width: auto; height: 44px; }
.storebadge.play img { height: 66px; margin: -8px 0; }
/* en, ar, bn and ur also pad the sides (41/250); the other 15 languages fill the width (29/250 top and bottom only). */
.storebadge.play img[src$="/en.png"], .storebadge.play img[src$="/ar.png"], .storebadge.play img[src$="/bn.png"], .storebadge.play img[src$="/ur.png"] { margin: -11px; }
.storesoon { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px; border-radius: 8px;
  border: 1.5px dashed currentColor; color: inherit; opacity: .85; text-decoration: none; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.storesoon svg { flex: none; width: 18px; height: 18px; }
.storesoon:hover { opacity: 1; }
.storelegal { display: block; margin-top: 18px; font-size: 11.5px; line-height: 1.5; opacity: .7; }
@media (max-width: 480px) {
  .storerow { gap: 14px 16px; }
  .storesoon { font-size: 13.5px; }
}
/* /android's hero sits over the phone mockup below 900px (it fades as the page scrolls), and Google
   does not allow the Play logo on a device screen, so the badge shows there only on wide screens; the
   narrow layout keeps the page's own text button. The end section's badge shows at every width. */
@media (max-width: 899px) { .wide-only { display: none !important; } }
@media (min-width: 900px) { .narrow-only { display: none !important; } }
.storenote { font-size: 14.5px; line-height: 1.4; opacity: .85; }