/* ==========================================================================
   COMPONENT: Impact counters + trust strip + marquee
   The numeral is the hero element (PLAN.md 1B.3 technique 2).
   ========================================================================== */

.c-counters {
  display: grid;
  gap: var(--sp-6) var(--gap-col);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* One column on narrow phones. At two columns a cell is only ~164px wide on a
   360px screen, and the "TODO_CLIENT: verified figure" badge carries
   `white-space: nowrap` (it is a badge — breaking it looks like a mistake), so
   it pushed straight out of the grid and off the side of the page. Full-width
   rows fix the overflow and give these numerals — the loudest type on the
   page — the room they are designed for. */
@media (max-width: 479px) {
  .c-counters { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 900px) {
  .c-counters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.c-counter {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding-block-start: var(--sp-4);
  border-block-start: 2px solid var(--c-ink);
}

.c-counter__value {
  font-family: var(--ff-display);
  font-size: var(--fs-num);
  font-weight: var(--fw-bold);
  line-height: 0.94;
  letter-spacing: var(--tr-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--c-ink);
  /* Reserve the width so counting from 0 to the target causes no reflow. */
  min-width: 4ch;
}

/* Placeholder state. Set by counters.js when the figure is not yet verified.
   Rendered at a fraction of the numeral size and in muted ink so it reads as
   a held slot, not as a broken glyph. */
.c-counter__value.is-unverified {
  font-size: var(--fs-3xl);
  color: var(--c-text-muted);
  line-height: 1.4;
}

.c-counter__label {
  font-family: var(--ff-utility);
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: var(--c-text-muted);
  max-width: 22ch;
}

.c-counter__note {
  font-size: var(--fs-3xs);
  color: var(--c-text-muted);
}

.is-inverted .c-counter { border-block-start-color: var(--c-verdigris-lt); }
.is-inverted .c-counter__value { color: var(--c-text-inv); }

/* --------------------------------------------------------------------------
   TRUST STRIP
   -------------------------------------------------------------------------- */

.c-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4) var(--sp-6);
  padding: var(--sp-5);
  background-color: var(--surface-raised);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}

.c-trust__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-utility);
  font-size: var(--fs-2xs);
  letter-spacing: 0.02em;
  color: var(--c-ink);
}

.c-trust__item svg {
  width: 18px;
  height: 18px;
  color: var(--c-verdigris);
  flex: none;
}

.c-trust__sep {
  width: 1px;
  height: 20px;
  background-color: var(--c-line);
}

/* --------------------------------------------------------------------------
   MARQUEE — CSS-driven, pauses on hover and on focus-within.
   The track is duplicated in markup; the copy is aria-hidden.
   -------------------------------------------------------------------------- */

.c-marquee {
  overflow: hidden;
  padding-block: var(--sp-5);
  border-block: 1px solid var(--c-line);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--mask-opaque) 8%, var(--mask-opaque) 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--mask-opaque) 8%, var(--mask-opaque) 92%, transparent);
}

.c-marquee__track {
  display: flex;
  width: max-content;
  gap: var(--sp-6);
  animation: marquee-scroll var(--marquee-duration, 42s) linear infinite;
}

.c-marquee:hover .c-marquee__track,
.c-marquee:focus-within .c-marquee__track { animation-play-state: paused; }

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

@media (prefers-reduced-motion: reduce) {
  .c-marquee__track { animation: none; }
  .c-marquee { overflow-x: auto; }
}

.c-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  letter-spacing: var(--tr-tight);
  color: var(--c-ink);
  white-space: nowrap;
}

.c-marquee__item::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background-color: var(--c-verdigris);
  flex: none;
}

.is-inverted .c-marquee { border-color: rgb(255 255 255 / 0.14); }
.is-inverted .c-marquee__item { color: var(--c-text-inv); }