/* ============ Eyebrow pills: "white" variant ============
 * One look for the section-label pills across the pages listed below. Styling only: tags, copy,
 * display mode and spacing stay with each page's own CSS.
 *
 * Every selector is scoped to one page or template by its body class, so nothing outside the list
 * changes. body:not(#_) adds ID-level specificity, so these rules beat the !important pill rules
 * already in the Elementor page CSS and in the theme dist bundles, without depending on load order.
 *
 * Light surfaces: white pill, hairline border, soft shadow, dark text.
 * Dark surfaces (the second list): translucent white, light border, white text, no shadow.
 */

/* ---- every pill (light-surface colours by default) ---- */
body.page-id-94210:not(#_) .elementor-widget-heading.hero__supra .elementor-heading-title,
body.page-id-94210:not(#_) .tile .tile__label,
body.page-id-94210:not(#_) .podcast-card .podcast-eyebrow,
body.page-id-94212:not(#_) .elementor-widget-heading.hero__supra .elementor-heading-title,
body.page-id-94212:not(#_) .elementor-widget-heading.eyebrow .elementor-heading-title,
body.page-id-94212:not(#_) .persona-card__eyebrow,
body.page-id-94212:not(#_) span.eyebrow,
body.cara-v2:not(#_) .hero__supra,
body.cara-v2:not(#_) span.eyebrow,
body.cara-v2:not(#_) .zz__key,
body.pricing-v2-page:not(#_) .pill.pill-lime,
body.customer-stories-2025:not(#_) .cs-hero__eyebrow,
body.st_page__customer_story_editorial:not(#_) .cse-hero__eyebrow,
body.st_page__customer_story_editorial:not(#_) .cse-more__eyebrow,
body.ebooks-directory:not(#_) .eb-hero__eyebrow,
body.ebooks-directory:not(#_) .eb-sec-eyebrow,
body.single-guide:not(#_) .lp-eyebrow,
body.live-directory:not(#_) .steh-eyebrow,
body.live-directory:not(#_) .elementor-element-8904747 .elementor-heading-title,
body.live-directory:not(#_) .elementor-element-a188396 .elementor-heading-title,
body.page-id-94566:not(#_) span.eyebrow,
body.page-id-94567:not(#_) span.eyebrow,
body.page-id-94563:not(#_) span.eyebrow,
body.page-id-94564:not(#_) span.eyebrow,
body.page-id-94565:not(#_) span.eyebrow {
  --eyebrow-bg: #FFFFFF;
  --eyebrow-fg: #03261F;
  --eyebrow-border: rgba(3, 38, 31, 0.09);
  --eyebrow-shadow: 0 1px 2px rgba(3, 38, 31, 0.06), 0 4px 12px rgba(3, 38, 31, 0.04);
  --eyebrow-blur: none;

  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  height: var(--eyebrow-h, 30px) !important;
  min-height: var(--eyebrow-min-h, 0) !important;
  padding: var(--eyebrow-pad, 0 14px) !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: var(--eyebrow-lh, 1) !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
  white-space: var(--eyebrow-ws, nowrap) !important;
  color: var(--eyebrow-fg) !important;
  background: var(--eyebrow-bg) !important;
  border: 1px solid var(--eyebrow-border) !important;
  box-shadow: var(--eyebrow-shadow) !important;
  -webkit-backdrop-filter: var(--eyebrow-blur);
  backdrop-filter: var(--eyebrow-blur);
  opacity: 1 !important;
  transition: none !important;
}

/* ---- pills that sit on a dark surface ---- */
body.page-id-94210:not(#_) .tile--cara .tile__label,
body.page-id-94210:not(#_) .podcast-card--ocean .podcast-eyebrow,
body.page-id-94212:not(#_) span.eyebrow--light,
body.cara-v2:not(#_) .hero__supra,
body.cara-v2:not(#_) .anl span.eyebrow,
body.pricing-v2-page:not(#_) .pill.pill-lime,
body.single-guide:not(#_) .lp-eyebrow--ondark,
body.live-directory:not(#_) .steh-eyebrow,
body.live-directory:not(#_) .elementor-element-a188396 .elementor-heading-title,
body.page-id-94566:not(#_) span.eyebrow--light,
body.page-id-94567:not(#_) span.eyebrow--light {
  --eyebrow-bg: rgba(255, 255, 255, 0.06);
  --eyebrow-fg: #FFFFFF;
  --eyebrow-border: rgba(255, 255, 255, 0.14);
  --eyebrow-shadow: none;
  --eyebrow-blur: blur(8px);
}

/* the pricing pill is inline-block; every other pill is already flex or inline-flex */
body.pricing-v2-page:not(#_) .pill.pill-lime { display: inline-flex !important; }

/* "Keep exploring" stretches across its flex column; size it to its label like the others */
body.single-guide:not(#_) .lp-resources__intro > .lp-eyebrow { align-self: flex-start !important; width: fit-content !important; }

/* the white variant has no leading dot */
body.cara-v2:not(#_) span.eyebrow > .dot,
body.page-id-94566:not(#_) span.eyebrow > .dot,
body.page-id-94567:not(#_) span.eyebrow > .dot,
body.page-id-94563:not(#_) span.eyebrow > .dot,
body.page-id-94564:not(#_) span.eyebrow > .dot,
body.page-id-94565:not(#_) span.eyebrow > .dot { display: none !important; }

/* live-directory "Next Event | SocialTalent Live" chip: keep its status dot and divider, recolour the labels */
body.live-directory:not(#_) .steh-eyebrow .steh-tag { color: inherit !important; font: inherit !important; }
body.live-directory:not(#_) .steh-eyebrow .steh-tag.muted { opacity: 0.72; }

/* the homepage tile labels sit 18px above the tile headline, as previewed on sandbox */
body.page-id-94210:not(#_) .tile .tile__label { margin-bottom: 18px !important; }

/* long labels wrap on phones instead of overflowing (set on body, inherited by the pills above) */
@media (max-width: 767px) {
  body {
    --eyebrow-h: auto;
    --eyebrow-min-h: 30px;
    --eyebrow-pad: 6px 14px;
    --eyebrow-lh: 1.25;
    --eyebrow-ws: normal;
  }
}