@layer components {

    /* ── Section head ───────────────────────────────────────────────
     Two-column head — label+title on left, lede on right.
     Stacks on narrow viewports. */
    .c-section-head {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-9);
        align-items: end;
        margin-bottom: var(--space-9);
    }

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

    .c-section-head__num {
        font-family: var(--font-display);
        font-size: var(--fs-ui);
        color: var(--color-ink-mute);
        letter-spacing: 0.05em;
    }

    .c-section-head__title {
        font-family: var(--font-display);
        font-weight: 300;
        font-size: clamp(2.125rem, 4vw, 3.5rem);
        line-height: 1.05;
        letter-spacing: -0.02em;
        margin-top: var(--space-3);
    }

    .c-section-head__lede {
        font-size: var(--fs-body);
        color: var(--color-ink-soft);
        max-width: 48ch;
    }

    /* ── Simple section head (--simple) ──────────────────────────────
     Single-column variant for reference pages where each subsection
     gets a short eyebrow + title + copy block. The two-column
     marketing variant above is for "01 — Platform / Three capabilities"
     style page-level division; this variant fits inside a content
     section. */
    .c-section-head--simple {
        display: block;
        margin-bottom: var(--space-6);
    }

    .c-section-head--simple .c-section-head__title {
        font-weight: 400;
        font-size: clamp(1.5rem, 2.75vw, 2.5rem);
        line-height: 1.1;
        max-width: 24ch;
        margin: var(--space-2) 0 var(--space-3);
        color: var(--color-ink-h2);
    }

    .c-section-head__copy {
        font-size: var(--fs-body);
        color: var(--color-ink-soft);
        line-height: 1.55;
        max-width: 64ch;
        margin: 0;
    }

    .c-section-head__copy strong {
        color: var(--color-ink);
        font-weight: 500;
    }

    /* ── On-dark variant — section heads on dark surfaces inside
     .c-band or similar inverse-surface contexts. */
    .c-section-head--on-dark .c-section-head__title {
        color: var(--color-on-dark);
    }

    .c-section-head--on-dark .c-section-head__copy {
        color: rgb(250 249 245 / .7);
    }

    .c-section-head--on-dark .c-section-head__copy strong {
        color: var(--color-on-dark);
    }
}