.badge-ce-eyebrow {
  display: inline-flex;
  align-items: center;
  background: #deecff;
  color: #2952e3;
  font-weight: var(--ce-font-weight-semibold);
  font-size: 0.9rem;
  padding: 4px 18px;
  border-radius: var(--ce-radius-pill);
}

.badge-ce-new {
  background: var(--ce-color-teal);
  color: #06382f;
  font-weight: var(--ce-font-weight-bold);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  padding: 0.3em 0.65em;
}

/* NEW - .badge-pill/.badge-comingsoon were referenced in
   _FeaturesList.cshtml (row.Badge, e.g. "Coming soon" on PNP
   assessments) but never defined anywhere in badges.css or
   comparison.css - rendered as plain unstyled text. Added here rather
   than in comparison.css since this is a generic reusable badge shape,
   matching how .badge-ce-eyebrow/.badge-ce-new work as shared
   components, not page-specific styling.

   NOTE: if pricing-calculator.css also defines .badge-pill/
   .badge-comingsoon for the AddOn "Coming soon"/"Beta-release" badges
   (haven't seen that file to confirm), there's a real chance of a
   duplicate definition - check for conflicts if those badges look
   different from this one after this change. */
.badge-pill {
  display: inline-flex;
  align-items: center;
  font-weight: var(--ce-font-weight-semibold);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  padding: 0.3em 0.65em;
  border-radius: var(--ce-radius-pill);
  margin-left: 8px;
  vertical-align: middle;
}

.badge-comingsoon {
  background: #4caf50;
  color: #eef0f4;
}