/* Store badges: the App Store badge, then the Google Play badge.
   Every page that shows the App Store badge links this file, so they all match.

   Badge rules this layout keeps (Apple and Google guidelines, read 2026-10-13):
   - Apple: the App Store badge comes first in a lineup of badges. Keep type and
     graphics out of a clear space one quarter of the badge's height.
   - Google: clear space is one quarter of the badge's height. The Google Play badge
     is the same size or larger than other store badges. Never recolor or alter it.

   The badges stack at the same height, on one left edge (.is-start) or one center
   line (everything else). Google's PNG carries its own clear space as transparent
   margin. A negative margin takes that margin back out of the layout, so the visible
   badge lines up with the App Store badge and the gap between them is one clear space. */

.store-badges {
  --badge-h: 48px;                    /* height of both badges in this row */
  --clear: calc(var(--badge-h) / 4);  /* clear space, the same for both stores */
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--clear);
}
.store-badges.is-hero { --badge-h: 54px; }
.store-badges.is-start { align-items: flex-start; }
.store-badges > * { flex: none; }

.store-play {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}
.store-play:focus-visible {
  outline: 2px solid var(--signal, #FF6B35);
  outline-offset: 4px;
  border-radius: 8px;
}
.store-play-badge {
  /* Share of the PNG's height that is badge rather than transparent margin.
     1 means the file is cropped to the badge. Set it once if the file changes. */
  --gp-art: 0.672;
  display: block;
  width: auto;
  height: calc(var(--badge-h) / var(--gp-art));
  margin: calc(var(--badge-h) * (1 - 1 / var(--gp-art)) / 2);
}