/* Compare table: what the free evaluation and the audit report include, in
   one surface panel that scrolls inline on narrow screens. The audit column
   sits on the accent-soft ground. Contrast on accent-soft: accent 7.04 light,
   4.58 dark; text-secondary 7.03 light, 6.94 dark; text-primary 14.61 light,
   12.19 dark. Cells always hold a word; the check glyph is aria-hidden. */

/* position: relative keeps the visually hidden caption inside the scroller. */
.compare-table {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface);
}

.compare-table table {
  inline-size: 100%;
  min-inline-size: 35rem;
  border-collapse: collapse;
}

.compare-table th,
.compare-table td {
  padding: var(--space-s) var(--space-m);
  text-align: center;
  vertical-align: middle;
}

.compare-table th:first-child,
.compare-table td:first-child {
  text-align: start;
}

.compare-table th:last-child,
.compare-table td:last-child {
  background-color: var(--accent-soft);
}

.compare-table thead th {
  padding-block: var(--space-m);
  font-weight: 600;
}

.compare-table thead th:first-child {
  color: var(--text-muted);
}

.compare-table tbody tr {
  border-block-start: 1px solid var(--border-subtle);
}

/* Row headers name what you get: body text, not a column label. */
.compare-table tbody th {
  color: var(--text-primary);
  font-weight: 400;
}

.compare-table__plan {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: var(--leading-heading);
}

.compare-table th:last-child .compare-table__plan {
  color: var(--accent);
}

.compare-table__sub {
  display: block;
  color: var(--text-muted);
  font-size: var(--step--1);
  font-weight: 400;
}

.compare-table th:last-child .compare-table__sub {
  color: var(--text-secondary);
}

.compare-table__yes {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

.compare-table__no {
  color: var(--text-muted);
}

.compare-table__glyph {
  inline-size: 1.25em;
  block-size: 1.25em;
  margin-inline-end: var(--space-3xs);
  vertical-align: -0.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.compare-table__actions td {
  padding-block: var(--space-m);
}