@layer components {

    /* ── Signed-in home (/apphome) ───────────────────────────────────
       Deadlines and forms beside a narrower column of rates and Africa
       Documents; one column on a phone. Both columns are capped and the pair
       sits to the left: on a wide screen fractions alone stretch the rows
       past a readable length and strand the side column at the far edge. */

    .c-apphome {
        display: grid;
        grid-template-columns: minmax(0, 46rem) minmax(0, 24rem);
        justify-content: start;
        gap: var(--space-6);
        align-items: start;
    }

    @media (max-width: 900px) {
        .c-apphome {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    /* The Africa Documents panel: a different product, so it reads as one. Its
       ink inverts through data-surface="dark", as on .c-band. */
    .c-apphome__promo {
        padding: var(--space-6);
        border-radius: var(--radius-md);
        background: var(--color-surface-inverse);
        color: var(--color-on-surface-inverse);
    }
}