/* Proof bar — four claims across on desktop, one at a time on a phone.
   The mobile slider is opt-in: JS adds .proof-bar--slider once it takes over,
   so without JS the band degrades to a plain vertical stack with no dead arrows. */

.proof-bar .proof-bar__viewport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 1280px;
  margin: 0 auto;
}

.proof-bar .proof-bar__grid {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  text-align: center;
}

.proof-bar .proof-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}

.proof-bar .proof-bar__icon {
  display: block;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
}

.proof-bar .proof-bar__label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.proof-bar .proof-bar__line {
  display: block;
}

/* Arrows only exist for the mobile slider. */
.proof-bar .proof-bar__arrow {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(var(--color-text), 0.28);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.proof-bar .proof-bar__arrow:hover {
  border-color: rgba(var(--color-text), 0.6);
  background: rgba(var(--color-text), 0.08);
}

.proof-bar .proof-bar__arrow:focus-visible {
  outline: 2px solid rgba(var(--color-text), 0.9);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  /* Without JS: a readable vertical stack. */
  .proof-bar .proof-bar__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .proof-bar .proof-bar__item {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    text-align: left;
  }

  .proof-bar .proof-bar__label {
    font-size: 11px;
  }

  /* With JS: every claim shares one cell and the active one fades in. */
  .proof-bar--slider .proof-bar__grid {
    align-items: center;
    min-height: 44px;
  }

  .proof-bar--slider .proof-bar__item {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.55s ease, visibility 0.55s ease;
  }

  .proof-bar--slider .proof-bar__item.is-active {
    opacity: 1;
    visibility: visible;
  }

  .proof-bar--slider .proof-bar__arrow {
    display: inline-flex;
  }

  /* Aug 31 #26: no ring around the arrows on a phone — just the chevron. The
     button keeps its 34px box so the tap target does not shrink with the
     border, and the hover fill goes with the ring it used to sit inside. */
  .proof-bar .proof-bar__arrow,
  .proof-bar .proof-bar__arrow:hover {
    border: 0;
    border-radius: 0;
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .proof-bar--slider .proof-bar__item {
    transition: none;
  }
}