/*
 * Shared store badges for the Sap Sap Speak mockups.
 * Built as inline SVG + HTML (no downloaded or hotlinked artwork), following the
 * standard black badge layout: brand mark + two-line label, thin grey keyline,
 * equal heights. Swap for the official Apple / Google badge files before launch
 * if brand review requires the exact artwork.
 */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.store-badge {
  --badge-h: 56px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--badge-h);
  min-width: 176px;
  padding: 0 18px 0 14px;
  border-radius: calc(var(--badge-h) * 0.2);
  background: #000;
  color: #fff;
  border: 1.5px solid #a6a6a6;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1;
  box-sizing: border-box;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.store-badge:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.6); }
.store-badge:focus-visible { outline: 3px solid #7ce0cf; outline-offset: 3px; }
.store-badge svg { flex: none; display: block; }
.store-badge .sb-apple { width: 26px; height: 31px; }
.store-badge .sb-play { width: 26px; height: 29px; }
.store-badge .sb-text { display: flex; flex-direction: column; gap: 3px; white-space: nowrap; }
.store-badge .sb-top { font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; }
.store-badge[data-store="android"] .sb-top { text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.06em; }
.store-badge .sb-bottom { font-size: 23px; font-weight: 600; letter-spacing: -0.015em; }
.store-badge[data-store="android"] .sb-bottom { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }

.store-badges.lg .store-badge { --badge-h: 62px; min-width: 196px; }
.store-badges.lg .sb-bottom { font-size: 25px; }
.store-badges.center { justify-content: center; }

@media (max-width: 420px) {
  .store-badges { flex-direction: column; align-items: flex-start; }
  .store-badges.center { align-items: center; }
  .store-badge { justify-content: center; width: 100%; max-width: 260px; }
}

/* Store not live yet: keep the badge visible but inert, with a "Coming soon" label. */
.badge-slot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.store-badge.is-disabled { opacity: 0.6; cursor: default; filter: saturate(0.7); }
.store-badge.is-disabled:hover { transform: none; box-shadow: none; }
.badge-soon { font: 800 11px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; background: #17130f; color: #ffd45b; padding: 5px 9px; border-radius: 999px; }
@media (max-width: 420px) { .badge-slot { align-items: center; } }