/* trust — this component's own styles, put in the head by the renderer where it is drawn.
   Colours and sizes only through var(--*), so the design drives these too. */

/* --- trust bar ----------------------------------------------------------- */
.trust {
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 2rem 0;
}


.trust--band { background: var(--primary); border-color: var(--primary); }


/* On the band the figure stands on --primary, and only --primary-ink is
   checked against it: --accent is a free colour and may be the same hue (a
   yellow on a yellow band read as nothing). */
.trust--band .trust__figure { color: var(--primary-ink); }


/* .9 of the label colour: any palette whose button label holds 4.5 holds it here too (.75 asked the button for 6.7). */
.trust--band .trust__label  { color: var(--primary-ink); opacity: .9; }

.trust__list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}


.trust__item { display: flex; flex-direction: column; gap: .35rem; text-align: center; }


.trust__figure {
    font-family: var(--font-display);
    font-size: 1.75rem; line-height: 1.1; color: var(--mark, var(--primary));
}


.trust__label { font-size: .85rem; color: var(--muted); }

@media (max-width: 900px) {
    .trust__list      { grid-template-columns: repeat(2, 1fr); }
}