@layer components {

    /* ── Country tiles (/countries) ──────────────────────────────────
     The country landing page reuses the Trust Center's .c-requirement
     card (RCL: marketing/app-marketing-trust.css) rather than minting a
     card of its own — same visual shape, same 3/2/1 responsive grid,
     same accent-rail hover. What that component doesn't cover is the
     card being a *link*, so only the link affordance lives here.

     Host-local on purpose: Africa Documents has no country hubs, so
     there's no second consumer yet. Promote these into the RCL
     alongside .c-requirement if a second host needs a linked tile. */

    /* The base layer opts anchors back in to accent colour + underline
       ("components that don't want link styling override explicitly"),
       so a card-shaped anchor has to opt out — otherwise the whole tile
       renders underlined in accent. */
    .c-requirement--link {
        display: block;
        color: inherit;
        text-decoration: none;
        /* Room for the corner arrow so long regulator lines don't run
           underneath it. */
        padding-right: var(--space-8);
    }

    /* Registrar / revenue-authority line. Quieter than __desc so each
       tile reads name → what you get → who regulates it. */
    .c-requirement__meta {
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
        line-height: 1.4;
        margin: var(--space-3) 0 0;
    }

    /* Corner arrow — the "this is a destination" cue. .c-requirement is
       already position:relative, so this anchors to the card. */
    .c-requirement__go {
        position: absolute;
        right: var(--space-5);
        bottom: var(--space-5);
        font-size: var(--fs-ui);
        color: var(--color-ink-mute);
        transition: color var(--dur-fast) var(--ease),
                    transform var(--dur-fast) var(--ease);
    }

    .c-requirement--link:hover .c-requirement__go {
        color: var(--color-accent);
        transform: translateX(2px);
    }
}