@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);
    }

    /* Inside <app-page> the page is the one container: it caps the width and
       supplies the gutter, so a marketing block drops its own rather than
       doubling them. */
    .c-page :is(.c-hero, .c-marketing-section, .c-cta, .c-pillars, .c-how) {
        max-width: none;
        padding-inline: 0;
    }

    /* A full-bleed block still reaches the viewport edges from inside the
       page's column; its __inner re-centres the content. */
    .c-page :is(.c-band, .c-stats-strip, .c-trust-strip, .c-verification) {
        margin-inline: calc(50% - 50vw);
    }

    /* 100vw includes the vertical scrollbar, so the breakout overshoots by its
       width. clip, not hidden, so sticky elements keep working. */
    body:has(.c-page :is(.c-band, .c-stats-strip, .c-trust-strip, .c-verification)) {
        overflow-x: clip;
    }


    /* 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);
        }
    }
}