@layer components {

    .c-trust-strip {
        border-top: 1px solid var(--color-line);
        border-bottom: 1px solid var(--color-line);
        background: var(--color-surface-alt);
    }

    .c-trust-strip__inner {
        max-width: 80rem;
        margin-inline: auto;
        padding: var(--space-5) var(--space-7);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-7);
        flex-wrap: wrap;
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
    }

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

    .c-trust-strip__label {
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-size: var(--fs-caption, 0.6875rem);
    }

    .c-trust-strip__items {
        display: flex;
        gap: var(--space-7);
        flex-wrap: wrap;
        font-family: var(--font-display);
        font-size: var(--fs-body);
        color: var(--color-ink);
    }

    /* ── Trust-strip country ticker ─────────────────────────────────
       Variant of the generic .c-ticker that lives *inside* a
       .c-trust-strip__inner row, occupying the column to the LEFT of
       the trust-strip label. The ticker fills the available row
       width; overflow:hidden clips the moving track so it can't push
       the label off-screen. Colours match the light trust-strip
       palette (--color-ink + --color-line) rather than the dark hero
       ticker. */
    .c-trust-ticker {
        flex: 1 1 0;
        min-width: 0;          /* allow the flex item to shrink past its content width */
        overflow: hidden;
        align-self: stretch;
        display: flex;
        align-items: center;
    }

    .c-trust-ticker__track {
        display: flex;
        gap: var(--space-7);
        white-space: nowrap;
        animation: c-trust-ticker-scroll 120s linear infinite;
        width: max-content;
    }

    .c-trust-ticker__item {
        font-family: var(--font-display);
        font-size: var(--fs-body);
        color: var(--color-ink);
        display: inline-flex;
        align-items: center;
        gap: var(--space-3);
    }

    .c-trust-ticker__item::before {
        content: "\2022";
        color: var(--color-line);
        font-size: var(--fs-caption);
    }

    @keyframes c-trust-ticker-scroll {
        to { transform: translateX(-50%); }
    }

    @media (prefers-reduced-motion: reduce) {
        .c-trust-ticker__track {
            animation: none;
        }
    }
}