/*
 * "Download on the App Store" badge, shared by the welcome-hub iOS card
 * (_connect_card_ios.html) and the mobile-web install banner (pwa-install.js).
 * Black pill with a hairline white border so it reads on both the warm
 * canvas and the ink banner.
 */
.appstore-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  background: #000;
  color: #fff;
  text-decoration: none;
  padding: 9px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  transition: transform .12s ease, box-shadow .12s ease;
}
.appstore-badge:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .24);
}
.appstore-badge:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.appstore-badge svg { width: 23px; height: 23px; flex: 0 0 auto; display: block; }
.appstore-badge__txt { display: flex; flex-direction: column; line-height: 1.05; }
.appstore-badge__txt small { font-size: .62rem; font-weight: 500; letter-spacing: .01em; }
.appstore-badge__txt strong { font-size: 1.14rem; font-weight: 600; letter-spacing: -.02em; }

/* Compact variant for the 12px-gutter install banner. */
.appstore-badge--sm { min-height: 40px; padding: 6px 14px; gap: 8px; border-radius: 10px; }
.appstore-badge--sm svg { width: 20px; height: 20px; }
.appstore-badge--sm .appstore-badge__txt strong { font-size: 1rem; }