/* Trust strip, neutral outline tiles. Additive; remove the <link> and the section to roll back. */
.tr { background: var(--bg); padding-block: 40px; }
@media (min-width: 1000px) { .tr { padding-block: 64px; } }
.tr h2 { font: 300 clamp(2rem, 1.3rem + 2.4vw, 3.1rem)/1.1 "Newsreader", Georgia, serif; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 24px; max-width: none; }
.tr-lede { font-size: clamp(17px, 1.1vw + 11px, 22px); line-height: 1.55; color: var(--ink); max-width: 56ch; margin: 0 0 24px; }
@media (min-width: 1000px) { .tr h2 { margin-bottom: 24px; } .tr-lede { margin-bottom: 40px; } }
.tr-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tr-card { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px; margin: 0; min-width: 0; }
.tr-tile { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: #eeede9; color: #b4b3ad; }
.tr-tile::before, .tr-tile::after, .tr-tile i::before, .tr-tile i::after { content: ""; position: absolute; width: 12px; height: 12px; background: #d9d8d3; }
.tr-tile::before { top: 0; left: 0; } .tr-tile::after { top: 0; right: 0; }
.tr-tile i::before { bottom: 0; left: 0; } .tr-tile i::after { bottom: 0; right: 0; }
.tr-tile svg { width: 88%; height: 88%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tr-tile svg text { fill: currentColor; stroke: none; font-family: var(--font); font-weight: 400; text-anchor: middle; }
.tr-label { font: 400 15px/1.3 var(--mono); letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }
@media (min-width: 720px) { .tr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tr-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 16px; } }

/* Match the reference scale: full-width container with ~6% side gutters, bigger tiles */
.tr h2 { font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem); }
.tr-tile svg { stroke-width: 2.2; }
.tr-tile::before, .tr-tile::after, .tr-tile i::before, .tr-tile i::after { width: 14px; height: 14px; }
.tr-label { font-size: clamp(13px, .6vw + 8px, 17px); }

/* Spacing pass: odd last tile on 2-col phone layout spans the row instead of leaving a gap */
@media (max-width: 719px) {  .tr-card:last-child:nth-child(odd) { grid-column: 1 / -1; } .tr-card:last-child:nth-child(odd) .tr-tile { aspect-ratio: 2 / 1; } .tr-card:last-child:nth-child(odd) .tr-tile svg { width: auto; height: 88%; } }

/* Seal tiles (same seals as the Why TGI page) */
.tr-tile .seal { width: 72%; height: auto; max-width: none; color: var(--ink); stroke: none; fill: none; }
.tr-tile .seal circle, .tr-tile .seal path, .tr-tile .seal ellipse { stroke: currentColor; }
.tr-tile .seal [fill="currentColor"] { fill: currentColor; stroke: none; }
.tr-card:nth-child(3n+2) .seal { color: #5f4a8b; }
.tr-card:nth-child(3n) .seal { color: #8a6f00; }
.tr-tile .seal text { fill: currentColor; stroke: none; font-family: var(--mono, "Geist Mono", monospace); letter-spacing: .04em; text-anchor: middle; }
.tr-tile .seal .s1 { font-weight: 700; }
.tr-tile .seal .s2 { font-weight: 500; letter-spacing: .18em; }
@media (min-width: 1000px) { .tr-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 40px 16px; } }
.tr-note { margin: 24px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); max-width: 70ch; }