.app-section-eyebrow {
  --app-eyebrow-text-color: var(--app-eyebrow-color, var(--app-color-accent-text, var(--primary)));
  --app-eyebrow-surface: var(--primary-rgba-10);
  --app-eyebrow-border: color-mix(in srgb, var(--primary) 24%, transparent);
  --app-eyebrow-solid-background: var(--primary);
  --app-eyebrow-solid-color: var(--primary-inverse);
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin: 0 0 0.75rem;
  color: var(--app-eyebrow-text-color);
  font-family: var(--app-font-ui, inherit);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.app-main .app-section-eyebrow,
.mp-site .app-section-eyebrow {
  color: var(--app-eyebrow-text-color);
}

.app-section-eyebrow--highlight {
  padding-inline: 0.08em;
  background: linear-gradient(to top, color-mix(in srgb, var(--app-eyebrow-accent, var(--primary)) 22%, transparent) 0 38%, transparent 38% 100%);
}

.app-section-eyebrow--soft-pill {
  padding: 0.48rem 0.85rem;
  border: 1px solid var(--app-eyebrow-border);
  border-radius: 999px;
  background: var(--app-eyebrow-surface);
}

.app-section-eyebrow--solid {
  --app-eyebrow-text-color: var(--app-eyebrow-solid-color);
  padding: 0.42rem 0.72rem;
  border: 1px solid var(--app-eyebrow-solid-background);
  border-radius: 0.25rem;
  background: var(--app-eyebrow-solid-background);
}

.app-section-eyebrow--inverse,
.app-general-section--surface-contrast .app-section-eyebrow {
  --app-eyebrow-color: var(--primary-inverse);
  --app-eyebrow-accent: var(--primary-inverse);
  --app-eyebrow-surface: color-mix(in srgb, var(--primary-inverse) 14%, transparent);
  --app-eyebrow-border: color-mix(in srgb, var(--primary-inverse) 38%, transparent);
  --app-eyebrow-solid-background: var(--primary-inverse);
  --app-eyebrow-solid-color: var(--primary);
}

.section-dark .app-section-eyebrow,
.app-hero .app-section-eyebrow {
  --app-eyebrow-color: var(--light);
  --app-eyebrow-accent: var(--light);
  --app-eyebrow-surface: var(--light-rgba-20);
  --app-eyebrow-border: color-mix(in srgb, var(--light) 38%, transparent);
  --app-eyebrow-solid-background: var(--light);
  --app-eyebrow-solid-color: var(--primary);
}