Trust Badges Marquee Banner Block for React

Six claims don't fit one line on a narrow screen without shrinking to unreadable or wrapping to several lines, and a still row is better than a moving one wherever it fits: nothing needs pausing, and every claim can be read at once. So the block draws both from one list, MARKS, and shows the still row from the medium breakpoint and the marquee below it (the other one is display: none, so a screen reader meets only one).

Edit MARKS: each has a label, a detail and an icon. Only claims you can back up belong in a trust strip: the copy here is written for a made-up service, so replace every figure with your own measured ones, and keep time spans relative ("last 12 months") so they don't go stale. Real certificates and regulations may be named when you hold or follow them; no logos are used.

By holding it with a finger, tabbing into it, or pressing the pause button before it (its name stays "Pause the scrolling marks" and its pressed state says whether it is paused). With reduced motion on, the marquee doesn't animate at all, becomes a row you scroll by hand, and the button is hidden.

From the large breakpoint each cell stacks its detail line under the claim, which makes the strip 52 pixels tall; at the medium breakpoint it shows the claims only and is 44. Remove the max-lg:hidden classes on the detail and icon to keep it to one line at every size.

The cells and the marquee read from the other side, each claim and detail sits in a bdi so figures like "99.98%" and "12k+" keep their shape, and the spacing is logical. The icons are not arrows, so none of them turns around.