/* sections/trust.php */
.tr-section {
	position: relative; box-sizing: border-box; width: 100%; overflow: hidden;
	--tr-blue: color-mix(in srgb, var(--c-primary) 8%, var(--c-primary-dark));
	background: var(--tr-blue); color: var(--c-on-dark);
	border-top: 1px solid color-mix(in srgb, var(--c-primary-light) 22%, transparent);
	font-family: var(--f-body); font-size: var(--fs-sm); font-weight: 600; line-height: 1.3;
}
.tr-section *, .tr-section *::before, .tr-section *::after { box-sizing: border-box; }

/* The band is as wide as the page; its two ends fade out. */
.tr-viewport {
	overflow: hidden; padding: var(--space-4) 0;
	-webkit-mask-image: linear-gradient(to right, transparent, var(--c-bg-dark) 3rem, var(--c-bg-dark) calc(100% - 5rem), transparent calc(100% - 2.5rem));
	mask-image: linear-gradient(to right, transparent, var(--c-bg-dark) 3rem, var(--c-bg-dark) calc(100% - 5rem), transparent calc(100% - 2.5rem));
}
/* Four identical lists side by side; the track slides by one list, then starts again. */
.tr-track { display: flex; width: max-content; animation: tr-slide 48s linear infinite; }
.tr-section:hover .tr-track, .tr-toggle:checked ~ .tr-viewport .tr-track { animation-play-state: paused; }
@keyframes tr-slide { to { transform: translateX(-25%); } }

.tr-list { display: flex; flex: none; align-items: center; margin: 0; padding: 0; list-style: none; }
.tr-item { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
/* Red dot between two commitments */
.tr-item::after { content: ""; flex: none; width: 0.375rem; height: 0.375rem; margin: 0 var(--space-5); border-radius: 50%; background: var(--c-accent); }
.tr-icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--c-primary-light); }
.tr-google { flex: none; width: 1.125rem; height: 1.125rem; }

/* Pause / play: a checkbox drawn as a small round button */
.tr-toggle {
	position: absolute; z-index: 2; top: 50%; right: var(--space-2); width: 1.75rem; height: 1.75rem; margin: -0.875rem 0 0;
	opacity: 0; cursor: pointer;
}
.tr-toggle-face {
	position: absolute; z-index: 1; top: 50%; right: var(--space-2); display: grid; place-items: center;
	width: 1.75rem; height: 1.75rem; margin-top: -0.875rem; border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--c-on-dark) 28%, transparent); background: var(--tr-blue);
	color: color-mix(in srgb, var(--c-on-dark) 80%, transparent); pointer-events: none;
}
.tr-toggle-face .tr-icon { width: 0.875rem; height: 0.875rem; color: inherit; }
.tr-toggle-face .tr-icon--play, .tr-toggle:checked ~ .tr-toggle-face .tr-icon--pause { display: none; }
.tr-toggle:checked ~ .tr-toggle-face .tr-icon--play { display: block; }
.tr-toggle:hover ~ .tr-toggle-face { border-color: var(--c-on-dark); color: var(--c-on-dark); }
.tr-toggle:focus-visible ~ .tr-toggle-face { outline: 2px solid var(--c-primary-light); outline-offset: 2px; }

@media (min-width: 768px) {
	.tr-section { font-size: var(--fs-base); }
	.tr-item::after { margin: 0 var(--space-6); }
}
/* No motion: the commitments once, centred, on as many lines as needed. */
@media (prefers-reduced-motion: reduce) {
	.tr-viewport { padding: var(--space-4) var(--space-gutter); -webkit-mask-image: none; mask-image: none; }
	.tr-track { width: auto; animation: none; }
	.tr-list { flex: 1; flex-wrap: wrap; justify-content: center; row-gap: var(--space-3); }
	.tr-list[aria-hidden], .tr-toggle, .tr-toggle-face { display: none; }
	.tr-item:last-child::after { display: none; }
}