/* ─────────────────────────────────────────────────────────────────
   block-compare-table-alt — feature comparison matrix (card-wrapped
   variant with hint column). Same visual language as compare-table.
   Card surface, typography, section title inherit from design-system.
   ───────────────────────────────────────────────────────────────── */

.block-compare-table-alt {
  position: relative;
}

.block-compare-table-alt .table-responsive {
  margin: 0;
  -webkit-overflow-scrolling: touch;
}

.block-compare-table-alt .table-compare {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  color: var(--scheme-card-fg);
}

.block-compare-table-alt .table-compare thead th {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-sm);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: var(--ds-space-4);
  border-bottom: 2px solid var(--scheme-rule);
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--scheme-card-bg);
  vertical-align: middle;
}

.block-compare-table-alt .table-compare tbody th {
  font-weight: 600;
  color: var(--scheme-card-fg);
  padding: var(--ds-space-4);
  border-bottom: 1px solid var(--scheme-rule);
  text-align: left;
  vertical-align: middle;
}

.block-compare-table-alt .table-compare tbody td {
  padding: var(--ds-space-4) var(--ds-space-3);
  border-bottom: 1px solid var(--scheme-rule);
  vertical-align: middle;
  color: var(--scheme-card-fg);
}

.block-compare-table-alt .table-compare tbody tr:last-child th,
.block-compare-table-alt .table-compare tbody tr:last-child td {
  border-bottom: none;
}

.block-compare-table-alt .table-compare tbody tr:nth-child(even) th {
  background: color-mix(in srgb, var(--scheme-rule) 25%, transparent);
}

.block-compare-table-alt .text-muted { color: var(--scheme-fg-mute); }

/* Hint icon (info) */
.block-compare-table-alt .fa-info-circle {
  color: var(--scheme-fg-mute);
  cursor: help;
  font-size: var(--ds-fs-body-lg);
  transition: color var(--ds-duration-fast) var(--ds-ease-out);
}
.block-compare-table-alt .fa-info-circle:hover { color: var(--ds-cta); }

/* Check / X circle icons (shared visual with compare-table) */
.block-compare-table-alt .t-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  position: relative;
  vertical-align: middle;
}

.block-compare-table-alt .t-check-circle { background: var(--ds-trust); }
.block-compare-table-alt .t-check-circle::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.block-compare-table-alt .t-x-circle {
  background: var(--scheme-fg-mute);
  opacity: 0.55;
}
.block-compare-table-alt .t-x-circle::before,
.block-compare-table-alt .t-x-circle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 2.5px;
  background: #fff;
}
.block-compare-table-alt .t-x-circle::before { transform: translate(-50%, -50%) rotate(45deg); }
.block-compare-table-alt .t-x-circle::after  { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 600px) {
  .block-compare-table-alt .table-compare thead th,
  .block-compare-table-alt .table-compare tbody th,
  .block-compare-table-alt .table-compare tbody td {
    padding: var(--ds-space-3);
    font-size: var(--ds-fs-body-sm);
  }
}