/* ============================================================
   CAPELY: why buy from Capely + how it works
   Two blocks, two <section class="section"> (contract §3: padding
   is uniform via .section, never invented per block). Icons are
   inline SVG, stroke only, currentColor, sized below.
   ============================================================ */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}

.trust-card {
  min-width: 0;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}

.trust-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--accent);
  margin-bottom: 16px;
}
.trust-icon svg { width: 20px; height: 20px; }

/* Wraps, and the addresses inside it are allowed to break.
   The support address is a single unbreakable word roughly 150px wide, so on
   a narrower card than the author happened to be testing on it simply ran out
   past the card's padding and sat on the page, underline and all. It looked
   fine at 1440 and broken on a laptop. A contact row must never depend on the
   viewport being wide enough for the longest address the owner might set in
   config.js, because that string is a placeholder and will change. */
.trust-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 16px;
  min-width: 0;
}
.trust-contacts > * {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* ---------- how it works ---------- */

/* ---------- shared card typography ---------- */
.trust-card h3 {
  font-size: 16.5px;
  margin-bottom: 8px;
}

.trust-card p {
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

/* ---------- links: underlined, not colour-only, per contract §10.5 ---------- */
.trust-link,
.trust-inline-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}
.trust-link:hover,
.trust-inline-link:hover { color: var(--mint-300); }
.trust-link { font-size: 14px; }

.ext-ic {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 3px;
  vertical-align: -1px;
}

@media (max-width: 900px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .trust-grid { grid-template-columns: 1fr; }
}