/* Generated by scripts/site-pages.ts from scripts/site-stores.ts. Do not edit. */
.store-badges { --badge-h: 48px; display: flex; flex-direction: column; gap: 10px; }
.store-badges--sm { --badge-h: 40px; }
.store-row { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--badge-h) / 4); }
.store-badge { display: inline-flex; line-height: 0; border-radius: 9px; }
.store-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.store-badge img { display: block; width: auto; height: var(--badge-h); }
.store-badge--play img {
  height: calc(var(--badge-h) * 250 / 168);
  margin: calc(var(--badge-h) * -41 / 168);
}
.store-qr { display: flex; align-items: center; gap: 12px; margin: 0; }
.store-qr-code { width: 96px; height: 96px; border-radius: 6px; flex: none; }
.store-qr figcaption { max-width: 10em; font-size: 13px; line-height: 1.4; opacity: .8; }
.store-dock {
  display: none; position: fixed; right: 24px; bottom: 24px; z-index: 40;
  padding: 14px; gap: 12px; border-radius: 16px;
  background: rgba(11, 26, 32, .94); color: #F4EFE6;
  border: 1px solid rgba(244, 239, 230, .14);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}
.store-dock { transition: opacity .25s ease, transform .25s ease, visibility 0s linear 0s; }
.store-dock.is-away {
  opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
@media (prefers-reduced-motion: reduce) { .store-dock, .store-dock.is-away { transform: none; } }
.store-stack { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--badge-h) / 4); }
.store-soon { margin: 0; font-size: 14px; line-height: 1.45; }
.store-legal { margin: 10px 0 0; font-size: 11.5px; line-height: 1.4; opacity: .65; }
.footer-stores { margin-top: 18px; }
/* The front page's hero has no button row to sit in, so its badges take the
   button row's own distance from the lede (`.hero-cta` in landing.css). */
.home-hero [data-store-placement="hero"] { margin-top: 34px; gap: 18px; }
@media (max-width: 760px) {
  .home-hero [data-store-placement="hero"] { margin-top: 24px; gap: 14px; }
}
.plan .store-badges { margin-top: 22px; }
.plan .store-badges .store-soon { font-size: 13.5px; }

/* A pointer and a mouse is a desk, where the code is the way to a phone.
   Below 1100px the panel would sit on the page's own words. */
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) { .store-dock { display: flex; } }

/* Keep every available download visible, even on the other phone platform. */
html[data-store-platform="ios"] .store-soon--android,
html[data-store-platform="android"] .store-soon--ios,
html[data-store-platform="ios"] .store-dock,
html[data-store-platform="android"] .store-dock { display: none; }