@layer components {
    .marketing-section,
        .marketing-cta {
            border-top: 1px solid var(--dashboard-color-border);
        }

    .marketing-section--compact {
            padding-bottom: 1.5rem;
        }

    .marketing-section--flush {
            padding: 0;
        }

    .marketing-section--center {
            text-align: center;
        }

    .marketing-section--grid {
            padding-bottom: 0;
        }

    .marketing-section__header {
            display: grid;
            gap: 0.625rem;
            max-width: 42rem;
        }

    .marketing-section__header--center {
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }

    .marketing-section__header h1,
        .marketing-section__header h2,
        .marketing-cta h2 {
            color: var(--dashboard-color-text);
            font-size: clamp(1.75rem, 4vw, 2.75rem);
            font-weight: 760;
            letter-spacing: 0;
            line-height: 1.08;
        }

    .marketing-section__header p,
        .marketing-section__lede {
            color: var(--dashboard-color-text-muted);
            font-size: 1rem;
            font-weight: 500;
            line-height: 1.6;
        }

    .marketing-section__lede {
            margin: 0 auto;
            max-width: 46rem;
        }

    .marketing-section__action {
            margin: 0.5rem calc(-1 * var(--dashboard-section-padding-x)) 0;
            padding: 2rem var(--dashboard-section-padding-x);
            text-align: center;
        }
}