/* Proof Metrics -- hairline-divided band of counters. */

.proofmetrics-block {
  background: var(--bellco-bg-card);
  border-top: 1px solid rgba(139, 217, 186, 0.15);
  border-bottom: 1px solid rgba(139, 217, 186, 0.15);
}

.proofmetrics-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-left: 1px solid var(--bellco-divider);
}

.proofmetrics-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
  border-right: 1px solid var(--bellco-divider);
}

.proofmetrics-value {
  font-family: var(--font1);
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
  font-variant-numeric: tabular-nums;
  /* A value and its unit are one token -- "1-Year" must never break across
     two lines, which knocks that cell taller than the rest of the row. */
  white-space: nowrap;
}

.proofmetrics-suffix {
  color: var(--bellco-mint);
}

/* Word suffixes ("-Year") carry far more width than symbols ("+", "%"),
   so they step down rather than forcing the whole row smaller. */
.proofmetrics-suffix--word {
  font-size: 0.62em;
}

.proofmetrics-label {
  font-family: var(--font1);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bellco-muted);
  max-width: 160px;
  margin: 12px 0 0;
}

@media (max-width: 1199px) {
  .proofmetrics-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .proofmetrics-item {
    border-bottom: 1px solid var(--bellco-divider);
    padding: 40px 20px;
  }

  .proofmetrics-value {
    font-size: 46px;
  }
}

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

  .proofmetrics-value {
    font-size: 38px;
  }

  .proofmetrics-label {
    font-size: var(--bellco-micro);
  }
}