@layer components {

    /* ── Hero illustration card ──────────────────────────────────────
     The picture beside a marketing hero: a register, a filing record, a
     tender notice. One component serves every page, because what differs
     between them is rows of text, not structure — five bespoke cards
     would be five things to restyle when the brand moves.

     It sits in .c-hero__rail, which pins it top-right above 1100px and
     drops it into the flow below that.

     EVERY CARD SAYS "Illustration" IN ITS HEADER. The content is sample
     data with invented company names and dates, and a card that looks
     like a product screenshot must never be mistaken for one. */

    .c-illus {
        background: var(--color-surface-field);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        padding: var(--space-5);
    }

    .c-illus__head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-4);
        font-size: var(--fs-caption);
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--color-ink-mute);
        margin-bottom: var(--space-4);
    }

    .c-illus__title {
        margin: 0 0 var(--space-4);
        font-size: var(--fs-body-lg);
        font-weight: 600;
        color: var(--color-ink);
    }

    /* A row is label + what it is on the left, state on the right. */
    .c-illus__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-3) 0;
        border-top: 1px solid var(--color-line);
    }

    .c-illus__label {
        font-size: var(--fs-ui);
        color: var(--color-ink);
    }

    .c-illus__what {
        display: block;
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
        margin-top: 2px;
    }

    .c-illus__value {
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-soft);
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    /* State pills. Colour alone never carries the meaning — each pill
       says what it is, so it still reads in greyscale or to a screen
       reader. */
    .c-illus__pill {
        display: inline-block;
        font-size: var(--fs-caption);
        letter-spacing: .03em;
        border-radius: var(--radius-pill);
        padding: 2px var(--space-3);
        white-space: nowrap;
        background: var(--color-surface-alt);
        color: var(--color-ink-soft);
    }

    .c-illus__pill--ok {
        background: var(--color-success-soft);
        color: var(--color-success-deep);
    }

    .c-illus__pill--due {
        background: var(--color-warn-soft);
        color: var(--color-warn-deep);
    }

    .c-illus__pill--late {
        background: var(--color-error-soft);
        color: var(--color-error-deep);
    }

    .c-illus__note {
        margin: var(--space-4) 0 0;
        padding-top: var(--space-3);
        border-top: 1px solid var(--color-line);
        font-size: var(--fs-caption);
        color: var(--color-ink-mute);
    }
}