/* ─────────────────────────────────────────────────────────────────
   block-compare-table-alt — feature comparison matrix (card-wrapped
   variant with hint column).
   T5 redesign 2026-05-06: sticky header, sticky first column on
   mobile, info-icon hint column, highlighted-column emphasis.
   ───────────────────────────────────────────────────────────────── */

.block-compare-table-alt { position: relative; font-family: var(--ds-font-body); }

.block-compare-table-alt .compare-table-alt-shell {
  border-radius: var(--ds-radius);
  overflow: hidden;
  background: var(--scheme-card-bg);
  border: 1px solid var(--scheme-rule);
  box-shadow: var(--ds-shadow-md);
}

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

.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);
}

/* ── Sticky header ───────────────────────────────────────────
   SENIOR-T7 2026-05-07: see compare-table.css for rationale.
   Anton-uppercase replaced with humanist sans 18px bold. */
.block-compare-table-alt .table-compare thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--ds-paper, #faf6ec);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: var(--ds-space-4);
  border-bottom: 2px solid var(--ds-ink);
  color: var(--ds-ink);
  vertical-align: middle;
  text-align: center;
}

.block-compare-table-alt .compare-alt-head-feature {
  position: sticky;
  left: 0;
  z-index: 6 !important;
  text-align: left;
}

.block-compare-table-alt .compare-alt-head-spacer {
  width: 5%;
  background: var(--ds-paper, #faf6ec) !important;
}

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

.block-compare-table-alt .compare-alt-head-product.is-highlighted {
  background: var(--ds-cta) !important;
  color: var(--scheme-fg, #fff);
  border-bottom-color: var(--ds-cta);
}

/* SENIOR-T7 2026-05-07: pill bumped from 9px to 12px.
   P-A11Y-2 2026-05-08: same fix as compare-table.css — bg=--ds-ink +
   color=var(--scheme-fg,#fff) was ink-on-ink (1.00:1, invisible) under any
   light scheme. Switched to ds-cta orange + literal #fff (~4.59:1, AA). */
.block-compare-table-alt .compare-alt-head-pill {
  position: absolute;
  top: var(--ds-space-2);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ds-cta);
  color: #fff !important;
  font-family: var(--ds-font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--ds-radius-pill);
  font-weight: 700;
}

.block-compare-table-alt .compare-alt-head-product-label {
  display: inline-block;
  padding-top: var(--ds-space-3);
}

.block-compare-table-alt .compare-alt-head-product:not(.is-highlighted) .compare-alt-head-pill { display: none; }

/* ── Body ──────────────────────────────────────────────────── */
/* SENIOR-T7 2026-05-07: explicit body font-size locked to ds-fs-body
   (18px) so cell text stays at the AARP-recommended floor regardless
   of inheritance changes.
   F3 2026-05-08: A4 measured tbody cells at 1.09:1 due to scheme-card-fg
   collapsing onto scheme-card-bg under inverted schemes. Pin to literal
   ink-on-paper-card for unambiguous 19.32:1 AAA on light schemes. */
.block-compare-table-alt .table-compare tbody th {
  position: sticky;
  left: 0;
  background: var(--scheme-card-bg, #fff);
  z-index: 2;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body, 1.125rem);
  font-weight: 600;
  color: var(--ds-ink);
  padding: var(--ds-space-4);
  border-bottom: 1px solid var(--scheme-rule);
  border-right: 1px solid var(--scheme-rule);
  text-align: left;
  vertical-align: middle;
  min-width: 220px;
  line-height: 1.5;
}

.block-compare-table-alt .table-compare tbody td {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body, 1.125rem);
  padding: var(--ds-space-4) var(--ds-space-3);
  border-bottom: 1px solid var(--scheme-rule);
  vertical-align: middle;
  color: var(--ds-ink);
  background: var(--scheme-card-bg, #fff);
  text-align: center;
  min-width: 110px;
}

/* F3 2026-05-08: dark-scheme restoration — flip cells to white when
   the block sits inside an ink/steel scheme so we don't regress the
   inverted surfaces. */
.scheme-ink .block-compare-table-alt .table-compare tbody th,
.scheme-ink .block-compare-table-alt .table-compare tbody td,
.scheme-steel .block-compare-table-alt .table-compare tbody th,
.scheme-steel .block-compare-table-alt .table-compare tbody td,
.ds-scheme-ink .block-compare-table-alt .table-compare tbody th,
.ds-scheme-ink .block-compare-table-alt .table-compare tbody td,
.ds-scheme-steel .block-compare-table-alt .table-compare tbody th,
.ds-scheme-steel .block-compare-table-alt .table-compare tbody td {
  color: #fff;
  background: var(--scheme-card-bg);
}

.block-compare-table-alt .compare-alt-hint-cell {
  width: 5%;
  min-width: 50px;
  background: color-mix(in srgb, var(--ds-paper, #faf6ec) 50%, var(--scheme-card-bg) 50%);
}

.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(--ds-paper, #faf6ec) 60%, var(--scheme-card-bg) 40%);
}
.block-compare-table-alt .table-compare tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--ds-paper, #faf6ec) 30%, var(--scheme-card-bg) 70%);
}

.block-compare-table-alt .compare-alt-cell.is-highlighted {
  background: color-mix(in srgb, var(--ds-cta) 6%, var(--scheme-card-bg) 94%) !important;
}
.block-compare-table-alt .table-compare tbody tr:nth-child(even) .compare-alt-cell.is-highlighted {
  background: color-mix(in srgb, var(--ds-cta) 12%, var(--scheme-card-bg) 88%) !important;
}

/* ── Hint icon (info) ──────────────────────────────────────── */
/* BUG-T7 2026-05-07: visible disc kept at 22px (≥AARP non-text 18px),
   but min-width pin keeps it from collapsing inside the table cell.
   Mobile bumps to 36×36 in media block (was 36 already, kept). */
.block-compare-table-alt .compare-alt-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  min-width: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--scheme-fg-mute);
  color: var(--scheme-fg-mute);
  font-family: var(--ds-font-body);
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
  cursor: help;
  background: var(--scheme-card-bg);
  vertical-align: middle;
  transition: color var(--ds-duration-fast) var(--ds-ease-out),
              border-color var(--ds-duration-fast) var(--ds-ease-out);
}

.block-compare-table-alt .compare-alt-hint:hover,
.block-compare-table-alt .compare-alt-hint:focus-visible {
  color: var(--ds-cta);
  border-color: var(--ds-cta);
}

/* ── Check / X icons ───────────────────────────────────────────────
   FIX-T5 2026-05-06 — single-render fix.
   See compare-table.css for full explanation. We rely on the global
   `.t-icon::before` SVG-mask in theme.min.css and only style the
   parent chip here.
   ───────────────────────────────────────────────────────────────── */
.block-compare-table-alt .t-icon {
  width: 24px; height: 24px;
  vertical-align: middle;
  color: var(--scheme-fg, #fff);
}

.block-compare-table-alt .t-check-circle { background: var(--ds-trust); }

.block-compare-table-alt .t-x-circle {
  background: var(--scheme-fg-mute);
  opacity: 0.5;
}

.block-compare-table-alt .compare-alt-cell.is-highlighted .t-check-circle { background: var(--ds-cta); }

/* ── Modern stroke-only check / em-dash mark (W9-A13 2026-05-07) ───
   See compare-table.css for full rationale. Scoped to the alt block.
   ───────────────────────────────────────────────────────────────── */
.block-compare-table-alt .ct-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  line-height: 1;
  vertical-align: middle;
}
.block-compare-table-alt .ct-mark--yes { color: var(--ds-trust); }
.block-compare-table-alt .compare-alt-cell.is-highlighted .ct-mark--yes { color: var(--ds-cta); }
.block-compare-table-alt .ct-mark--no {
  color: var(--scheme-fg-mute);
  opacity: 0.55;
  font-size: 22px;
  font-weight: 500;
}
@media (prefers-reduced-motion: no-preference) {
  .block-compare-table-alt .ct-mark--yes svg {
    transition: transform var(--ds-duration-fast) var(--ds-ease);
  }
  .block-compare-table-alt .compare-alt-cell:hover .ct-mark--yes svg {
    transform: scale(1.08);
  }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .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);
    min-height: 44px; /* mobile-44 */
  }
  .block-compare-table-alt .table-compare tbody th { min-width: 160px; }
  .block-compare-table-alt .table-compare tbody td { min-width: 80px; }
  .block-compare-table-alt .compare-alt-hint {
    width: 36px; height: 36px;
    min-width: 36px; min-height: 36px;
    font-size: 14px;
  }
  /* BUG-T7 2026-05-07: bottom margin reservation so the sticky mobile
     CTA bar (Call now / Get a free quote, fixed at viewport bottom)
     doesn't overlay the last row of the comparison table. The bar is
     ~88px tall in the senior layout (53px button + 16+19px wrap padding),
     so we reserve ~96px to give the scroll-hint clear breathing room.
     SWEEP-B3 2026-05-08: switched 96px hardcode → token contract
     (--ds-sticky-cta-clearance) so desktop auto-zeroes and any future
     resize of the bar propagates without a CSS edit. */
  .block-compare-table-alt .compare-table-alt-shell {
    margin-bottom: var(--ds-sticky-cta-clearance, 96px);
  }
}

/* SWEEP-B3 2026-05-08: the inline hint disc reads 22px desktop / 36px
   mobile. AARP/WCAG primary tap target is 44+. Expand the *interactive*
   hit-area without bloating the visible glyph by giving the span an
   invisible ::before pad that lifts the actionable region to 44×44.
   Keeps the visual identical, fixes 4× medium-severity small_tap audits. */
.block-compare-table-alt .compare-alt-hint {
  position: relative;
}
.block-compare-table-alt .compare-alt-hint::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  /* transparent — purely a hit-area expander, never a visual disc. */
}

.block-compare-table-alt .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ── Scroll hint (mobile) — SENIOR-T7 2026-05-07 ───────────── */
.block-compare-table-alt .compare-alt-scroll-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  padding: 12px var(--ds-space-3);
  background: var(--ds-ink);
  color: var(--scheme-fg, #fff);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm, 1rem);
  font-weight: 600;
  letter-spacing: 0.02em;
}
@media (min-width: 769px) {
  .block-compare-table-alt .compare-alt-scroll-hint { display: none !important; }
}