@layer components{.hero{background:radial-gradient(70rem 40rem at 15% -20%,var(--color-accent-surface),transparent 65%),var(--color-surface-alt);border-block-end:1px solid var(--color-border);& .hero__inner{--stack-space:var(--space-s);padding-block:var(--space-2xl)var(--space-xl)}& .hero__eyebrow{color:var(--color-accent-strong);font-size:var(--size-step--1);font-weight:600;letter-spacing:.12em;text-transform:uppercase}& .hero__title{max-width:16ch;font-size:var(--size-step-4);letter-spacing:-.02em}& .hero__lead{font-size:var(--size-step-1)}& .hero__text{color:var(--color-text-muted)}& .hero__actions{margin-block-start:var(--space-xs)}}}