/* ============================================================
   BENCHMARK — comparative table
   ============================================================ */

.benchmark {
  padding: 120px 16px 0;
  background-color: var(--color-surface);
  background-image: radial-gradient(circle, #C8CDC4 0.6px, transparent 0.6px);
  background-size: 14px 14px;
}

/* Trust-numbers strip moved under the comparison table */
.benchmark__stats .stat__number {
  font-weight: var(--fw-regular);
  color: var(--color-mint);
}

.benchmark__stats .stat--first {
  padding-left: var(--sp-lg);
}

.benchmark__stats .stat__label {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: 1.3;
  font-weight: var(--fw-medium);
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--color-display);
}

.benchmark__stats .stat__context {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-secondary);
}

.benchmark__header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: var(--sp-3xl);
  gap: var(--sp-lg);
}

.benchmark__table {
  background: var(--color-surface);
  border: 1px solid var(--color-mint-mid);
}

.benchmark__row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.2fr 0.8fr 2fr;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-display);
}

.benchmark__row * { color: inherit; }


.benchmark__row--head {
  padding: 18px 24px;
  background: var(--color-surface-mint);
  border-bottom: 1px solid var(--color-border);
}

.benchmark__row--highlight {
  padding: 24px;
  font-size: 16px;
  color: var(--color-mint);
  font-weight: 600;
}

.benchmark__row--highlight * {
  color: inherit;
}

.benchmark__cell-num     { text-align: right; justify-self: end; }

/* ───── Mobile (≤ 720px) ───── */
@media (max-width: 720px) {
  /* Remove section side padding so the table bleeds to viewport edges.
     Header/stats carry their own horizontal padding below. */
  .benchmark {
    padding: 80px 0 0;
  }

  /* Header: stack title/lede above the target value */
  .benchmark__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-xl);
    margin-bottom: var(--sp-2xl);
    padding-left: var(--sp-md);
    padding-right: var(--sp-md);
  }
  /* Horizontal scroll table with sticky Tool column.
     Drop the mint side borders since the table now bleeds to viewport edges. */
  .benchmark__table {
    overflow-x: auto;
    border-left: 0;
    border-right: 0;
  }

  /* Force the grid wider than viewport so it scrolls */
  .benchmark__row {
    min-width: 760px;
  }

  /* Tool column stays pinned while user swipes through other columns */
  .benchmark__row > :first-child {
    position: sticky;
    left: 0;
    background: var(--color-surface);
    padding-right: var(--sp-md);
    z-index: 1;
  }
  .benchmark__row--head > :first-child {
    background: var(--color-surface-mint);
  }

  /* Stats strip: 4-col → 2×2, bleeds to viewport edges */
  .benchmark__stats {
    grid-template-columns: 1fr 1fr;
  }
  .benchmark__stats > .stat {
    border-right: 0;
    padding: var(--sp-lg) var(--sp-md);
  }
  .benchmark__stats > .stat:nth-child(odd) {
    border-right: 1px solid var(--color-border);
  }
  .benchmark__stats > .stat:nth-last-child(n+3) {
    border-bottom: 1px solid var(--color-border);
  }
  .benchmark__stats > .stat--first {
    padding-left: var(--sp-md);
  }
}