@layer components {
  .cta[data-variant="sky"] { color: var(--color-on-sky); text-align: center; background: var(--hero-sun), var(--hero-sky); }
  .cta__inner { display: grid; justify-items: center; gap: var(--space-5); }
  .cta__title { font: 300 var(--font-size-h1) / 1 var(--font-display); letter-spacing: var(--tracking-display); text-transform: uppercase; text-shadow: var(--hero-title-shadow); }
  .cta__text { font-size: var(--step-1); color: var(--color-on-sky-muted); }
}