@layer components {
    .hero {
        position: relative;
        text-align: center;
        padding-block: var(--space-xl);
        padding-inline: var(--space-s);
        overflow: clip;
        isolation: isolate;

        /*
         * The vertical rhythm is set here and nowhere else. The title and subtitle are left with
         * their user-agent margins otherwise, and `h1`'s `0.67em` of a `--size-step-3` font is
         * ~40px that stacks on top of whatever the element above already asked for — that alone
         * left the eyebrow badge floating 70px away from the title it belongs to.
         */
        & > * {
            margin-block: 0;
        }

        &::before {
            content: '';
            position: absolute;
            inset: -10% -10% auto -10%;
            height: 32rem;
            background: var(--gradient-brand-soft);
            filter: blur(60px);
            z-index: -1;
        }

        & .hero__eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.4em;
            padding: var(--space-3xs, 0.25rem) var(--space-s);
            border-radius: var(--radius-full);
            background: var(--color-surface-mixed);
            border: 1px solid var(--color-border);
            color: var(--color-accent-strong);
            font-weight: 600;
            font-size: 0.85rem;
            margin-block-end: var(--space-s);
        }

        & .hero__title {
            color: var(--color-text);
            font-size: var(--size-step-3);
            max-width: 50rem;
            margin-inline: auto;
            margin-block-end: var(--space-s);
        }

        & .hero__subtitle {
            color: var(--color-text-muted);
            max-width: 40rem;
            margin-inline: auto;
            font-size: var(--size-step-1);
        }

        & .hero__actions {
            display: flex;
            justify-content: center;
            gap: var(--space-s);
            margin-block-start: var(--space-m);
            flex-wrap: wrap;
        }
    }
}