Centered Light Trust Row CTA Block for React

Each cell is a real button that opens a small note above it with a click, a tap, Enter or Space, and closes with Escape or a click elsewhere, returning focus to the cell. Nothing depends on hover, so it works on a phone and with a keyboard. The note is named after the cell, and the cell's name ends with "what it covers" for screen readers.

Edit CHIPS at the top of the file: each entry has an icon, a label and the note's text. The grid is built from the list (four columns from sm, two below it, so keep an even count). Only list what's true: a cell is a claim, and the note is where a reader checks it. Replace the SOC 2 and sign-on notes with your own facts, or remove the cells you can't back.

Both are links (href="#"): send the Shine Button to your sign-up or audit form and the outline one to a walkthrough. Each renders the link it's given with render, with nativeButton={false}.

It's a list named "Trust and compliance", so a screen reader says how many cells there are and moves through them one by one. The icons are decorative and the list has no heading of its own: the section's heading is the headline above.

The buttons wrap onto new lines and stay centred, the headline steps down from text-5xl to text-3xl, and a note is at most 16 rem wide and moves to stay on screen. Below sm the four cells take two rows of two, down to 320 px. In a right-to-left layout the grid and the notes mirror.

The headline, text, buttons and cells fade up once when the section loads, and a note fades and rises as it opens. With reduced motion they appear at once, and the notes open without moving.