@layer components {

    /* ── Marketing section ──────────────────────────────────────────
     Shared wrapper for marketing-style sections — centers content,
     caps width at 80rem, and applies the standard side padding that
     fluidly tightens on narrow viewports.

     Use as the section root for new content sections instead of
     repeating `max-width: 80rem; margin-inline: auto; padding: 0 var(--space-7)`
     in every component CSS file.

     Wrap full-bleed treatments (dark .c-band, .c-stats-strip) at the
     section level and use .c-marketing-section to constrain the inner
     content. */
    .c-marketing-section {
        max-width: 80rem;
        margin-inline: auto;
        padding-inline: var(--space-7);
    }

    @media (max-width: 900px) {
        .c-marketing-section {
            padding-inline: var(--space-5);
        }
    }

    /* Vertical padding helpers — apply on top of .c-marketing-section
       where the section needs default top/bottom rhythm. Sections that
       have custom vertical padding (hero, cta, band) keep their own
       padding rule and skip these. */
    .c-marketing-section--pad {
        padding-block: var(--section-space);
    }


    /* Two-column content layout — used inside .c-marketing-section
       to split a section into two parallel content columns. Stacks on
       narrow viewports. */
    .c-marketing-section__two-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-9);
    }

    @media (max-width: 900px) {
        .c-marketing-section__two-col {
            grid-template-columns: 1fr;
            gap: var(--space-7);
        }
    }
}