@layer components {
    .final-cta {
        position: relative;
        text-align: center;
        padding-block: var(--space-2xl);
        padding-inline: var(--space-s);
        background: var(--gradient-brand-strong);
        color: #ffffff;
        overflow: clip;

        & .final-cta__title {
            max-width: 42rem;
            margin-inline: auto;
            color: #ffffff;
        }

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

            & .button[data-variant="primary"] {
                background: #ffffff;
                /* The literal brand token, not --color-accent-strong: this band is the
                   dark brand gradient in *both* colour schemes (hence the hardcoded
                   #ffffff above), but --color-accent-strong flips to a light cyan in
                   dark mode, which on this white button was ~1.9:1. */
                color: var(--clr-brand-800);
                box-shadow: var(--shadow-l);
            }

            & .button[data-variant="secondary"] {
                background: transparent;
                border-color: color-mix(in srgb, #ffffff 40%, transparent);
                color: #ffffff;

                &:hover {
                    border-color: #ffffff;
                    color: #ffffff;
                }
            }
        }

        & .final-cta__contact {
            color: color-mix(in srgb, #ffffff 75%, transparent);
        }
    }
}