/* ==========================================================================
   table.css — the pricing comparison
   Scrolls inside its own container. The page body never scrolls sideways.
   ========================================================================== */

.table-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;

  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
}

.table {
  width: 100%;
  min-width: 40rem;                  /* below this the columns collide      */

  /* An explicit white ground so the featured column's tint has something to
     read against. Without it the table inherits the sunken band and the
     highlight all but disappears. */
  background-color: var(--surface);

  border-collapse: collapse;
  font-size: var(--fs-xs);
}

.table caption {
  padding: var(--space-4) var(--space-5);

  color: var(--text-muted);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow);
  text-align: start;
  text-transform: uppercase;

  border-block-end: var(--border-w) solid var(--border);
}

.table th,
.table td {
  padding: var(--space-4) var(--space-5);
  text-align: start;
  vertical-align: top;
}

.table thead th {
  background-color: var(--surface-sunken);

  color: var(--text);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;

  border-block-end: var(--border-w-strong) solid var(--border-strong);
}

.table tbody th {
  color: var(--text);
  font-weight: var(--fw-semibold);
}

.table tbody tr + tr th,
.table tbody tr + tr td {
  border-block-start: var(--border-w) solid var(--border);
}

.table td { color: var(--text-secondary); }

/* Figures right-align so they compare down the column. */
.table .num {
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}

.table .num-head { text-align: end; }

/* The recommended column is marked by a rule and a label, not by colour. */
.table .col-featured {
  background-color: var(--accent-wash);
  border-inline: var(--border-w-strong) solid var(--accent);
}

.table thead .col-featured { border-block-end-color: var(--accent); }

.table-note {
  margin-block-start: var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
}

/* Scroll affordance, shown only where the table can actually scroll. */
.table-hint {
  display: block;
  margin-block-end: var(--space-3);

  color: var(--text-muted);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

@media (min-width: 48rem) {
  .table-hint { display: none; }
}