/* Shared "Peace of Mind, Built-in." trust band — used by the rates pages and the
 * marketing landing page via templates/shared/trust.html.
 *
 * Relies on the semantic tokens (surface/content/brand/space) and the .t-* type
 * classes being defined by the including page's stylesheet.
 */

.trust {
  background: var(--treo-surface-brand);
}

.trust-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--treo-space-xxl) var(--treo-space-xl) var(--treo-space-xxxl);
}

.trust-title {
  margin: 0;
  color: var(--treo-content-on-brand);
}

/* The hyphen is a break opportunity; keep "Built-in." on one line. */
.trust-nobreak {
  white-space: nowrap;
}

.trust-copy {
  margin: var(--treo-space-l) 0 0;
  max-width: 65ch;
  color: var(--treo-brand-light);
}

/* 2×2 tiles: every tile shares the photos' portrait aspect so mixed sources (photo, GIF, SVG)
   read as one set; object-fit crops the odd ones to fit. */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--treo-space-xxxl) var(--treo-space-xl);
  margin: var(--treo-space-xxl) 0 0;
  padding: 0;
  list-style: none;
}

.trust-item-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 692 / 844;
  object-fit: cover;
  border-radius: var(--treo-radius-lg);
}

/* Tile titles stay in the sans so the section's serif heading remains the only display voice;
   white vs. brand-light body gives the two levels contrast without extra size. */
.trust-item-title {
  margin: var(--treo-space-m) 0 0;
  font-family: var(--treo-font-sans);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--treo-content-on-brand);
}

.trust-item-copy {
  margin: var(--treo-space-xxs) 0 0;
  color: var(--treo-brand-light);
}