/* ─── Comparison table (feature-comparison variant of .hzo-table) ─────
   Plans across the top, features down the side, ✓/✗ (or text) in cells.
   Markup contract: <th scope="col"> plan headers, <th scope="row"> feature
   names, each value <td> carries data-label="<plan>" for the stacked view.
   Reuses .hzo-table's responsive stacking — the additions are desktop
   alignment, the featured-column tint, and the mobile rule that turns the
   feature-name row-header into a card title (base stacking only blockifies
   <td>, never <th>, so a comparison table would otherwise break when stacked). */
.hzo-table--compare { width: 100%; border-collapse: collapse; }
.hzo-table--compare th,
.hzo-table--compare td {
    padding: 14px var(--space-md);
    border-bottom: var(--border-1) solid var(--border);
    text-align: center;
    vertical-align: middle;
}
.hzo-table--compare thead th { border-bottom: var(--border-2) solid var(--border); }
/* Feature-name column reads left-aligned (header + row-headers). */
.hzo-table--compare th:first-child,
.hzo-table--compare td:first-child { text-align: left; }
.hzo-table--compare tbody th[scope="row"] {
    font-family: var(--font-body);
    font-weight: var(--fw-600, 600);
    color: var(--text-heading);
}
/* ✓ / ✗ cell icons (mirrors the .hzo-pricing__features check). The SVGs carry
   role="img" + aria-label in markup so the state is announced to AT. */
.hzo-table--compare svg { width: 20px; height: 20px; }
.hzo-table__yes { color: var(--success); }
.hzo-table__no  { color: var(--text-muted); }
/* Recommended / featured column — tints each cell in the column (desktop) and,
   once stacked, the matching plan row in every card (mobile). No new token. */
.hzo-table__col--featured { background: var(--brand-pale); }

@media (max-width: 767px) {
    /* .hzo-table's base mobile rules already hide thead, block-ify tr/td, and
       add the data-label "<plan>: value" rows. The ONLY missing piece for a
       comparison table is the feature-name row-header (<th>) — base never
       touches <th> — so promote it to the card title. */
    .hzo-table--compare tbody th[scope="row"] {
        display: block;
        width: 100%;
        text-align: left;
        font-family: var(--font-heading);
        font-size: 1.0625rem;
        color: var(--text-heading);
        padding: var(--space-xs) 0 10px;
        border-bottom: var(--border-1) solid var(--border);
        margin-bottom: var(--space-xs);
    }
}