/* Shared site icons — Lottie / emoji via <x-icon name="..."> */
.ex-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  vertical-align: middle;
  user-select: none;
}

.ex-icon-lottie {
  overflow: hidden;
  position: relative
}

.ex-icon-lottie svg {
  display: block;
  width: 100% !important;
  height: 100% !important
}

.ex-icon-fallback {
  font-size: 0.85em;
  line-height: 1;
  opacity: 0.85
}

.ex-icon-emoji {
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.ex-icon-img {
  display: block;
  object-fit: contain
}

/* Public page wrappers that used to hold unicode emoji */
.logo-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.logo-icon .ex-icon {
  display: inline-flex
}

.feature-icon,
.value-icon-wrap,
.sl-pillar-icon,
.inst-stat-icon,
.fsearch-icon,
.empty-state-icon,
.tg-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.value-icon-wrap .ex-icon,
.sl-pillar-icon .ex-icon,
.inst-stat-icon .ex-icon {
  width: 100%;
  height: 100%;
}

/* feature icons use .feature-icon-face — don't force 100% size here */
.eyebrow,
.hero-eyebrow,
.sec-eyebrow,
.section-eyebrow,
.tl-badge,
.ip-badge,
.inst-stat-pill,
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.eyebrow .ex-icon,
.hero-eyebrow .ex-icon,
.tl-badge .ex-icon,
.ip-badge .ex-icon {
  vertical-align: middle;
}

@media (prefers-reduced-motion:reduce) {
  .ex-icon-lottie {
    animation: none !important
  }
}