.ecosystem-brand-shell {
  position: relative;
  isolation: isolate;
  --eco-brand-dark-bg: #251640;
  --eco-brand-dark-surface: #322055;
  --eco-brand-text-on-dark: #fffaf0;
  --eco-brand-muted-on-dark: rgba(255, 250, 240, 0.72);
  --eco-brand-hero-emphasis: var(--eco-brand-highlight);
  --eco-brand-cta-text: #ffffff;
  --eco-brand-input-bg: var(--eco-brand-surface-alt);
  --eco-brand-badge-bg: color-mix(in srgb, var(--eco-brand-primary) 12%, var(--eco-brand-surface));
  --eco-brand-quote-accent: var(--eco-brand-highlight);
  --eco-brand-label-spacing: 0;
  --eco-brand-texture-opacity: 0;
  --eco-brand-card-shadow: 0 18px 44px color-mix(in srgb, var(--eco-brand-primary) 16%, transparent);
  --eco-brand-button-shadow: 0 14px 28px color-mix(in srgb, var(--eco-brand-primary) 24%, transparent);
  --eco-brand-button-bg: linear-gradient(135deg, var(--eco-brand-primary), var(--eco-brand-secondary));
  --eco-brand-button-border: color-mix(in srgb, var(--eco-brand-primary) 74%, #000 26%);
  --eco-brand-button-color: var(--eco-brand-cta-text);
  --eco-brand-button-text-transform: uppercase;
  --eco-brand-hero-size: clamp(2.25rem, 5.4vw, 4.6rem);
  --eco-brand-section-spacing: 28px;
}

.ecosystem-brand-shell .ecosystem-kicker,
.ecosystem-brand-shell .ecosystem-course-reco,
.ecosystem-brand-shell .ecosystem-course-state,
.ecosystem-brand-shell .button {
  letter-spacing: var(--eco-brand-label-spacing);
}

.ecosystem-brand-shell .ecosystem-identity h1 {
  font-size: var(--eco-brand-hero-size);
}

.ecosystem-brand-shell .ecosystem-stat-card,
.ecosystem-brand-shell .ecosystem-login-card,
.ecosystem-brand-shell .ecosystem-search-shell,
.ecosystem-brand-shell .ecosystem-filter-chip,
.ecosystem-brand-shell .ecosystem-course-card {
  box-shadow: var(--eco-brand-card-shadow);
}

.ecosystem-brand-shell .ecosystem-search-shell,
.ecosystem-brand-shell input,
.ecosystem-brand-shell textarea,
.ecosystem-brand-shell select {
  background: color-mix(in srgb, var(--eco-brand-input-bg) 88%, var(--eco-brand-surface) 12%);
}

.ecosystem-brand-shell .ecosystem-course-reco,
.ecosystem-brand-shell .ecosystem-course-state,
.ecosystem-brand-shell .ecosystem-filter-chip strong {
  background: var(--eco-brand-badge-bg);
}

.ecosystem-brand-shell .button:not(.secondary) {
  background: var(--eco-brand-button-bg);
  border-color: var(--eco-brand-button-border);
  color: var(--eco-brand-button-color);
  box-shadow: var(--eco-brand-button-shadow);
  text-transform: var(--eco-brand-button-text-transform);
}

.ecosystem-brand-shell .button.secondary {
  box-shadow: var(--eco-brand-card-shadow);
}

.ecosystem-brand-shell .ecosystem-hero em,
.ecosystem-brand-shell blockquote::before,
.ecosystem-brand-shell blockquote em {
  color: var(--eco-brand-hero-emphasis);
}

.ecosystem-brand-shell .ecosystem-hero {
  padding-block: max(var(--eco-brand-section-spacing), 20px);
}

.ecosystem-brand-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--eco-brand-texture-opacity);
  background-image:
    linear-gradient(90deg, rgba(15, 23, 42, 0.12) 1px, transparent 1px),
    linear-gradient(0deg, rgba(15, 23, 42, 0.10) 1px, transparent 1px);
  background-size: 18px 18px;
  mix-blend-mode: multiply;
  z-index: 0;
}

.ecosystem-brand-shell > * {
  position: relative;
}