/* ==========================================================================
   02 TRUST RAIL — moved directly under the hero. Hard-bordered cells on a rail
   that bleeds the full viewport past --width-content, clipped by --scrim-edge
   at both ends: grid break 3. A contact sheet that moves, not logo soup.
   ========================================================================== */

.trust {
  background: var(--surface-alt);
  border-block: var(--border-width-hair) solid var(--border-hairline);
}

.trust__label {
  display: flex;
  margin-block-end: var(--space-md);
}

.trust__rail {
  position: relative;
  overflow: hidden;
  border-block: var(--border-width-hair) solid var(--border-soft);
  /* the rail measures itself so a set can be told to fill it — see .trust__set */
  container-type: inline-size;
}
.trust__rail::before,
.trust__rail::after {
  content: "";
  position: absolute;
  inset-block: 0;
  z-index: var(--z-scrim);
  width: var(--rail-peek);
  background: var(--scrim-edge);
  pointer-events: none;
}
.trust__rail::after { inset-inline-end: 0; transform: scale3d(-1, 1, 1); }
.trust__rail::before { inset-inline-start: 0; }

.trust__track {
  display: flex;
  width: max-content;
  animation: trust-marquee var(--dur-marquee) linear infinite;
}
.trust__rail:hover .trust__track { animation-play-state: paused; }

.trust__set { display: flex; }

/* the cell — a real 1px division, not a floating mark */
/* The seam. With six cells the loop spanned ~1,150px, so on a 1,920px screen the
   second set was on screen beside the first and the same marque read twice. Ten
   cells at --cell-min-w span 2,300px and fix 1,920 by arithmetic, but not 2,560,
   and the next widescreen size would fail again — so the rule is stated instead
   of counted.

   Two copies of one marque sit exactly one loop apart, so both are on screen iff
   the rail is wider than the loop minus a cell. Solve 10c >= rail + c: a cell is
   never narrower than a ninth of the rail, and ten of them always overhang it by
   a whole cell. The extra --cell-min-w inside the divide is margin, so the
   boundary is never met exactly and sub-pixel rounding cannot reopen the seam.
   Below ~1,840px the token is already wider than the fraction and governs alone,
   which is why nothing changes at 1,440. 100cqi is the rail's own inline size,
   not the viewport's, so the scrollbar is already subtracted. */
.trust__cell {
  display: grid;
  place-items: center;
  /* Two lines, not one. Chrome before 105, Safari before 16 and Firefox before
     110 have no container queries, and an unknown unit invalidates the WHOLE
     declaration — so a lone cqi line ships NO min-width at all and the cells
     collapse to the width of their own text, which is not the stated fallback.
     The token line restores it: below ~1,840px the token governs anyway, so on
     those engines the rail is identical up to that width and above it the
     second copy of a marque can appear on screen. That is the survivable
     outcome the seam rule was written to avoid, not a broken one. */
  min-width: var(--cell-min-w);
  min-width: max(var(--cell-min-w), calc((100cqi + var(--cell-min-w)) / 9));
  height: var(--cell-h);
  padding-inline: var(--space-md);
  border-inline-start: var(--border-width-hair) solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-faint);
  transition: color var(--dur-fast) var(--ease-state), background-color var(--dur-fast) var(--ease-state);
}
.trust__cell:hover { color: var(--text-secondary); background: var(--surface-raised); }

@keyframes trust-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .trust__track { animation: none; }
  .trust__rail { overflow-x: auto; }
}