@layer components {

    .c-hero {
        max-width: 80rem;
        margin-inline: auto;
        padding: var(--section-space) var(--space-7);
        position: relative;
    }

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

    .c-hero__title {
        font-family: var(--font-display);
        font-weight: 300;
        font-size: clamp(2.5rem, 4.4vw, 4.5rem);
        line-height: 1.05;
        letter-spacing: -0.03em;
        max-width: 14ch;
        margin-bottom: var(--space-6);
    }

    .c-hero__title em {
        font-style: italic;
        font-weight: 400;
        color: var(--color-accent);
    }

    .c-hero__sub {
        font-size: var(--fs-body-lg);
        line-height: 1.55;
        color: var(--color-ink-soft);
        max-width: 52ch;
        margin-bottom: var(--space-7);
    }

    .c-hero__actions {
        display: flex;
        gap: var(--space-4);
        flex-wrap: wrap;
    }

    /* ── Right rail — document-check card + its trust note ─────────
     On wide viewports the rail is pinned to the TOP-right of the hero,
     level with the eyebrow, so the card reads across from the headline
     rather than hanging below the CTA row (which left a dead gap in the
     middle-right and pushed the hero taller than the left column).
     Below 1100px it is a normal block in the flow after the buttons —
     the card goes full-width and the note stays hidden, as before. */
    @media (min-width: 1100px) {
        .c-hero__rail {
            position: absolute;
            top: var(--section-space);
            right: var(--space-7);
            width: 22rem;
        }
    }

    /* Meta panel — top-right of the hero on wide viewports. */
    .c-hero__meta {
        display: none;
    }

    @media (min-width: 1100px) {
        .c-hero__meta {
            display: block;
            position: absolute;
            top: var(--section-space);
            right: var(--space-7);
            width: 13.75rem;
            font-size: var(--fs-ui-sm);
            color: var(--color-ink-mute);
            border-top: 1px solid var(--color-line);
            padding-top: var(--space-4);
        }
    }

    /* In a hero that carries the rail, the card owns the TOP-right corner, so the
       note drops to the BOTTOM-right — level with the action buttons on the left,
       bracketing the right column the same way the left one is. `bottom` matches
       the hero's own bottom padding so the two baselines line up, and the width
       matches the card above it. Heroes without a rail (e.g. the
       AccountableAfricaAI home page) keep the top-right placement above. */
    @media (min-width: 1100px) {
        .c-hero:has(.c-hero__rail) .c-hero__meta {
            top: auto;
            bottom: var(--section-space);
            width: 22rem;
        }
    }

    .c-hero__meta strong {
        display: block;
        color: var(--color-ink);
        font-weight: 500;
        margin-bottom: var(--space-2);
        font-family: var(--font-display);
        font-size: var(--fs-body-sm);
    }

    /* ── Compact hero (--compact) ────────────────────────────────────
     Reference / informational pages (Trust Center, About, etc.) — same
     hero scaffold (eyebrow + title + sub + jumps) but smaller display
     type so it reads as informational, not editorial. */
    .c-hero--compact .c-hero__title {
        font-size: clamp(2rem, 4vw, 3.25rem);
        font-weight: 400;
        max-width: 24ch;
        margin-bottom: var(--space-5);
    }

    .c-hero--compact .c-hero__sub {
        max-width: 68ch;
        margin-bottom: var(--space-6);
    }

    .c-hero--compact .c-hero__sub strong {
        color: var(--color-ink);
        font-weight: 500;
    }

    /* Inline jump-link row, used by compact heros to anchor in-page
       sections. Separated from the lede by a hairline rule. */
    .c-hero__jumps {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-6);
        padding-top: var(--space-5);
        border-top: 1px solid var(--color-line);
    }

    .c-hero__jump {
        font-size: var(--fs-ui);
        color: var(--color-ink);
        text-decoration: none;
        transition: color var(--dur-fast) var(--ease);
    }

    .c-hero__jump:hover {
        color: var(--color-accent);
    }

    /* ── Split hero (--split) ─────────────────────────────────────────
     Copy on the left (.c-hero__main), a panel in the rail on the right.
     A grid rather than the absolutely positioned rail above, so a tall
     panel makes the hero taller instead of running over what follows.
     Below 1100px the rail follows the copy. */
    @media (min-width: 1100px) {
        .c-hero--split {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 30rem;
            column-gap: var(--space-9);
            align-items: start;
        }

        .c-hero--split .c-hero__rail {
            position: static;
            width: auto;
        }

        /* The full-width title size would wrap a short headline onto four
           lines in a column that shares the row with the rail. */
        .c-hero--split .c-hero__title {
            font-size: clamp(3rem, 5.4vw, 5.25rem);
            max-width: none;
        }
    }

    @media (max-width: 1099.98px) {
        .c-hero--split .c-hero__rail {
            margin-top: var(--space-8);
        }
    }

    /* ── Figure hero (--figure) ───────────────────────────────────────
     A full-width image under the title. The 14ch title cap exists to
     keep a headline from running across empty space; here the image
     beneath sets the width, so the title spans it too. */
    .c-hero--figure .c-hero__title {
        max-width: none;
    }

    /* On a phone the figure already explains the platform, so the hero
       keeps one full-width call to action and a centred check link. */
    @media (max-width: 760px) {
        .c-hero--figure .c-hero__actions .c-button--solid {
            flex: 1 1 100%;
            justify-content: center;
        }

        .c-hero--figure .c-hero__actions .c-button--ghost {
            display: none;
        }

        .c-hero--figure .c-hero__check {
            text-align: center;
        }

        .c-hero--figure .c-hero__note {
            padding-top: 0;
            border-top: 0;
        }
    }

    /* ── Hero panel ───────────────────────────────────────────────────
     A titled list in a card: label, term + description rows split by
     hairlines, and a closing line. */
    .c-hero__panel {
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-lg);
        padding: var(--space-7) var(--space-6);
    }

    .c-hero__panel-label {
        margin: 0 0 var(--space-3);
        font-size: var(--fs-ui-sm);
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--color-ink-mute);
    }

    .c-hero__panel-list {
        margin: 0;
    }

    .c-hero__panel-row {
        padding-block: var(--space-4);
        border-bottom: 1px solid var(--color-line);
    }

    .c-hero__panel-term {
        font-size: var(--fs-body-lg);
        font-weight: 500;
        color: var(--color-ink);
    }

    .c-hero__panel-desc {
        margin: var(--space-1) 0 0;
        font-size: var(--fs-ui);
        color: var(--color-ink-soft);
    }

    .c-hero__panel-summary {
        margin: var(--space-5) 0 0;
        font-size: var(--fs-ui);
        color: var(--color-ink);
    }

    /* A one-line secondary action under the buttons. */
    .c-hero__check {
        margin: var(--space-5) 0 0;
        color: var(--color-ink-soft);
    }

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

    /* Small print under the hero copy, set off by a hairline. */
    .c-hero__note {
        margin: var(--space-5) 0 0;
        padding-top: var(--space-4);
        border-top: 1px solid var(--color-line);
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
    }
}