/* Benchmark section: separate file to bust browser cache for proof UI changes. */

.nah-eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}

.nah-benchmark-heading {
  margin-bottom: 0;
  max-width: 50rem;
  order: 1;
}

.nah-benchmark-layout {
  align-items: center;
  display: grid;
  gap: clamp(1.4rem, 4vw, 2.5rem);
  grid-template-columns: minmax(0, 1.3fr) minmax(12rem, 0.7fr);
}

.nah-benchmark-donut {
  aspect-ratio: 1;
  background:
    radial-gradient(circle at center, var(--md-default-bg-color) 0 62%, transparent 63%),
    conic-gradient(var(--md-accent-fg-color) calc(var(--value) * 1%), var(--nah-border) 0);
  border: 1px solid var(--nah-border);
  border-radius: 50%;
  display: grid;
  justify-self: center;
  order: 2;
  place-items: center;
  text-align: center;
  width: min(17rem, 72vw);
}

.nah-benchmark-donut strong {
  align-items: baseline;
  color: var(--md-default-fg-color);
  display: flex;
  font-size: clamp(2.25rem, 5vw, 4rem);
  justify-content: center;
  letter-spacing: -0.035em;
  line-height: 0.95;
}

.nah-benchmark-donut small {
  font-size: 0.72em;
  letter-spacing: -0.02em;
  margin-left: 0.03em;
}

.nah-benchmark-donut span {
  color: var(--nah-muted);
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-top: 0.45rem;
  text-transform: uppercase;
}

@media screen and (max-width: 900px) {
  .nah-benchmark-layout {
    grid-template-columns: 1fr;
  }
}