/* Trust badges (see badges.mjs): official App Store and Stripe badges at their own proportions, and our chips
   drawn to sit with them (40 px tall, 6 px corners, a hairline border like Stripe's badge). */

.tb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tb { display: inline-flex; align-items: center; height: 40px; flex: none; text-decoration: none; }
.tb--img img { display: block; height: 40px; width: auto; }
/* Apple's badge stays clear: nothing may sit on it, so "Coming soon" is a separate tag beside it, with a gap of at
   least a quarter of the badge's height. */
.tb--soon { gap: 10px; }
.tb--soon em {
  padding: 4px 8px; border-radius: 999px; background: var(--uh-sun, #FFC94D); color: #0B1C30; font: 800 10.5px/1.2 var(--uh-font, system-ui, sans-serif);
  font-style: normal; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 1px 0 rgba(11, 28, 48, .18); /* no blur: macOS Preview prints blurred shadows as grey boxes */
}
.tb--chip {
  gap: 9px; padding: 0 13px 0 10px; border-radius: 6px; border: 1px solid #0B1C30; background: #fff; color: #0B1C30;
  font: 800 14px/1.05 var(--uh-font, system-ui, sans-serif); letter-spacing: -0.01em; white-space: nowrap;
}
.tb--chip small { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; color: #42546A; margin-bottom: 1px; }
.tb--chip .i { width: 22px; height: 22px; color: var(--uh-teal, #0E7C7B); flex: none; }
.tb__au { width: 26px; height: auto; flex: none; fill: var(--uh-teal, #0E7C7B); stroke: var(--uh-teal, #0E7C7B); stroke-width: .6; stroke-linejoin: round; }
.tb-row--dark .tb--chip { background: transparent; border-color: rgba(255, 255, 255, .85); color: #fff; }
.tb-row--dark .tb--chip small { color: rgba(255, 255, 255, .72); }
.tb-row--dark .tb--chip .i, .tb-row--dark .tb__au { color: var(--uh-aqua, #7FE0D6); fill: var(--uh-aqua, #7FE0D6); stroke: var(--uh-aqua, #7FE0D6); }