/* Store badges: the App Store and Google Play, side by side, in the black-badge style both stores use (black, grey
   keyline, white type; never animated or restyled).
   A store that doesn't have Lantern yet shows its badge greyed and inert, saying "Coming soon". Apple's rules don't
   allow "Download on the App Store" before the app is live, so the live badge appears only once main.js has the
   App Store link. Shared by the homepage and the invite page. */
.stores { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.store-badge {
  box-sizing: border-box; display: inline-flex; align-items: center; gap: 10px; height: 56px; min-width: 178px; padding: 0 20px 0 15px;
  background: var(--badge-bg, #000); color: var(--badge-fg, #fff); border: 1px solid var(--badge-line, #a6a6a6); border-radius: 12px;
  text-decoration: none; white-space: nowrap;
}
.store-badge svg { width: 28px; height: 28px; flex: none; margin-top: -3px; }
.store-badge.gp svg { width: 24px; height: 24px; margin-top: 0; }
.store-badge span { display: grid; line-height: 1; text-align: left; font-family: -apple-system, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.store-badge small { font-size: 11px; font-weight: 500; letter-spacing: 0.01em; }
.store-badge b { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin-top: 2px; }

/* Not out yet: greyed, not a link, not focusable, and it says so */
.store-badge.soon {
  background: rgba(16, 22, 48, 0.84); color: #9aa2cb; border-color: rgba(190, 200, 255, 0.2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);           /* legible over the 3D street too */
  cursor: default; user-select: none; -webkit-user-select: none;
}
.store-badge.soon svg { opacity: 0.85; }

/* Sizes: the header's small pair, the closing call to action's large pair */
.store-badge.sm { height: 40px; min-width: 0; padding: 0 12px 0 10px; gap: 7px; border-radius: 9px; }
.store-badge.sm svg { width: 19px; height: 19px; margin-top: -2px; }
.store-badge.sm.gp svg { width: 16px; height: 16px; margin-top: 0; }
.store-badge.sm small { font-size: 8px; }
.store-badge.sm b { font-size: 16px; margin-top: 1px; }
.store-badge.lg { height: 64px; min-width: 200px; padding: 0 24px 0 18px; border-radius: 14px; }
.store-badge.lg svg { width: 32px; height: 32px; }
.store-badge.lg.gp svg { width: 27px; height: 27px; }
.store-badge.lg small { font-size: 12.5px; }
.store-badge.lg b { font-size: 27px; }

/* Phones: the pair shares the row equally rather than wrapping one under the other */
@media (max-width: 520px) {
  .stores:not(.sm) { width: 100%; justify-content: center; flex-wrap: nowrap; gap: 10px; }
  .stores:not(.sm) .store-badge { flex: 1 1 0; min-width: 0; max-width: 220px; height: 54px; padding: 0 10px; gap: 8px; justify-content: center; }
  .stores:not(.sm) .store-badge svg { width: 24px; height: 24px; }
  .stores:not(.sm) .store-badge.gp svg { width: 21px; height: 21px; }
  .stores:not(.sm) .store-badge small { font-size: 9.5px; }
  .stores:not(.sm) .store-badge b { font-size: 19px; }
}
/* The header: one row, and below a wide desktop just one badge, the App Store's (the page has both) */
.stores.sm { flex-wrap: nowrap; gap: 8px; }
@media (max-width: 1100px) { .stores.sm .store-badge.gp { display: none; } }
/* A badge a script hasn't switched on yet (the invite page's live one) */
.store-badge[hidden] { display: none; }