.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);
}

/* Base demo-accounting-1 label: light-to-tint gradient pill (dark gradient with light text on inverse surfaces). */
.app-section-eyebrow--gradient-pill {
  --app-eyebrow-text-color: var(--app-eyebrow-gradient-color, var(--secondary, var(--primary)));
  padding: 0.5rem 2rem;
  border: 0;
  border-radius: 999px;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--primary-rgba-20, rgba(36, 168, 87, .2)) 100%);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0;
}
.app-section-eyebrow--gradient-pill.app-section-eyebrow--inverse,
.app-general-section--surface-tertiary .app-section-eyebrow--gradient-pill,
.app-general-section--surface-contrast .app-section-eyebrow--gradient-pill,
.section-dark .app-section-eyebrow--gradient-pill {
  --app-eyebrow-text-color: #fff;
  background-image: linear-gradient(to right, var(--tertiary, #1c2e23) 0%, var(--dark, #212529) 100%);
}