/* App Store + Google Play badges.
   Used by every page in the marketing site. Single source of truth so
   visual updates (height, gap, mobile alignment) only need to happen here. */

.ikt-app-badges-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
}

.ikt-app-badges-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 48px;
  row-gap: 16px;
}

.ikt-app-badges-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 6px;
  transition: opacity 0.15s ease;
}

.ikt-app-badges-row a:hover { opacity: 0.9; }

.ikt-app-badges-row img {
  height: 48px;
  width: auto;
  display: block;
}

/* Hero variant — 56px badges with matching gap. */
.ikt-app-badges-hero .ikt-app-badges-row { column-gap: 56px; }
.ikt-app-badges-hero .ikt-app-badges-row img { height: 56px; }

/* Hero placement is centered at every viewport — the surrounding hero
   content (headline, sub, pills, CTAs) is centered, so left-aligning
   the badges on desktop looked off-center against the rest of the
   layout (Randall flagged this 2026-06-13). The default
   `justify-content: center` on `.ikt-app-badges-row` already does this;
   we just need the wrapper text alignment to stay centered too. */
.ikt-app-badges-hero { text-align: center; }