@layer components {

    /* ── Band ───────────────────────────────────────────────────────
     Full-width dark panel used for emphatic sections. Uses the
     [data-surface="dark"] inversion pattern from the base layer, so
     every component inside renders correctly without duplication. */
    .c-band {
        /* Stable inverse tokens — bind to primitives, unaffected by the
           [data-surface="dark"] inversion that rewrites --color-ink. */
        background: var(--color-surface-inverse);
        color: var(--color-on-surface-inverse);
        position: relative;
    }

    /* Accent band — the brand-green close a page ends on, as against the
       near-black .c-band, which is an interruption part-way down. Both carry
       data-surface="dark" so the ink tokens invert for whatever sits inside;
       only the surface differs. */
    .c-band--accent {
        background: var(--color-accent);
        color: var(--color-on-dark);
    }

    .c-band__inner {
        max-width: 80rem;
        margin-inline: auto;
        padding: var(--section-space) var(--space-7);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-9);
        align-items: start;
    }

    @media (max-width: 900px) {
        .c-band__inner {
            grid-template-columns: 1fr;
            gap: var(--space-6);
            padding-inline: var(--space-5);
        }
    }

    .c-band__title {
        font-family: var(--font-display);
        font-weight: 300;
        font-size: clamp(2.375rem, 4.5vw, 4rem);
        line-height: 1.05;
        letter-spacing: -0.02em;
    }

    .c-band__title em {
        font-style: italic;
        color: var(--color-accent-soft);
    }

    .c-band__copy {
        font-size: var(--fs-body);
        color: var(--color-on-dark-mute);
        margin-bottom: var(--space-6);
        line-height: 1.6;
    }

    /* The quiet line under a band's call to action — "Received a
       document? Check it's genuine". The text needs no colour of its
       own because [data-surface="dark"] already remaps --color-ink-soft.
       The link does: --color-accent is NOT remapped, so it follows the
       footer's treatment, which is the house pattern for a link on an
       inverse surface — on-dark at rest, the soft accent on hover. The
       soft accent alone does not carry at body size on this surface. */
    .c-band__check {
        margin: var(--space-7) 0 0;
        color: var(--color-ink-soft);
    }

    .c-band__check a {
        color: var(--color-on-dark);
        font-weight: 500;
        text-underline-offset: 0.2em;
    }

    .c-band__check a:hover {
        color: var(--color-accent-soft);
    }

    /* ── Stats row ─────────────────────────────────────────────────
     Grid of number+label tiles. Used both inside .c-band (with a
     separator from the band's hero content above) and standalone in
     .c-stats-strip on pages without a band. Default is two columns;
     --4col modifier widens to four. */
    .c-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }

    .c-stats--4col {
        grid-template-columns: repeat(4, 1fr);
    }

    @media (max-width: 900px) {
        .c-stats--4col {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* Inside .c-band — gets a separator rule from the band hero above */
    .c-band .c-stats {
        margin-top: var(--space-7);
        padding-top: var(--space-6);
        border-top: 1px solid rgb(250 249 245 / .15);
    }

    .c-stat__num {
        font-family: var(--font-display);
        font-size: clamp(1.75rem, 3vw, 2.5rem);
        font-weight: 400;
        letter-spacing: -0.02em;
        line-height: 1;
    }

    .c-stat__label {
        font-size: var(--fs-ui-sm);
        color: rgb(250 249 245 / .6);
        margin-top: var(--space-2);
    }

    /* ── Stats strip — standalone dark surface for stats grids on
     pages without a c-band. Mirrors the .c-band wrapper pattern
     (full-bleed dark, constrained inner). */
    .c-stats-strip {
        background: var(--color-surface-inverse);
        color: var(--color-on-surface-inverse);
        border-top: 1px solid rgb(250 249 245 / .1);
    }

    .c-stats-strip__inner {
        max-width: 80rem;
        margin-inline: auto;
        padding: var(--space-7) var(--space-7);
    }

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

    /* Ghost button on dark surface — inherits darker border default */
    .c-band .c-button--ghost {
        color: var(--color-on-dark);
        border-color: rgb(250 249 245 / .3);
    }

    .c-band .c-button--ghost:hover {
        border-color: var(--color-on-dark);
    }
}