/* Keep each evaluation total beside its label on both landing pages. */
.evals-page .breadth,
.evidence-breadth {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  border-block: 1px solid var(--rule);
  padding: 0;
}

.evals-page .breadth > div,
.evidence-breadth > div {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 14px;
  padding: 25px 28px;
  min-width: 0;
}

.evidence-breadth > div {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.evals-page .breadth > div:first-child,
.evidence-breadth > div:first-child {
  padding-left: 0;
}

.evals-page .breadth > div + div,
.evidence-breadth > div + div {
  border-left: 1px solid var(--rule);
}

.evals-page .breadth strong,
.evidence-breadth dd {
  margin: 0;
  font: 600 clamp(36px, 4.4vw, 64px)/1.1 var(--sans);
  letter-spacing: -.05em;
  color: var(--accent);
  white-space: nowrap;
}

.evals-page .breadth span,
.evidence-breadth dt {
  margin: 0;
  font: 500 clamp(18px, 1.9vw, 27px)/1.2 var(--sans);
  letter-spacing: -.025em;
  text-transform: none;
  color: var(--ink);
}

@media (max-width: 1000px) {
  .evals-page .breadth > div,
  .evidence-breadth > div {
    padding-inline: 16px;
    gap: 10px;
  }
}

@media (max-width: 700px) {
  .evals-page .breadth,
  .evidence-breadth {
    grid-template-columns: 1fr;
  }

  .evals-page .breadth > div,
  .evidence-breadth > div {
    padding: 20px 0;
    gap: 16px;
  }

  .evals-page .breadth > div + div,
  .evidence-breadth > div + div {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }

  .evals-page .breadth strong,
  .evidence-breadth dd {
    font-size: 48px;
  }

  .evals-page .breadth span,
  .evidence-breadth dt {
    font-size: 24px;
  }
}