/* ============================================================
 * /guides/medicare-eligibility-check-options  —  page-specific styles.
 *
 * Guide chrome (hero, brief, sections, prose, faq, related, cta) comes from
 * /css/guide.css; this file adds only the at-a-glance comparison table, the
 * one editorial "key line", and a visually-hidden helper.
 * ============================================================ */

/* Screen-reader-only — the table's empty corner cell still needs a label. */
.visually-hidden {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* KEY LINE  —  one DM Serif editorial moment, at pull-quote scale (smaller
   than the section headings so it reads as emphasis, not a second heading). */
.key-line {
  margin-top: var(--space-32);
  max-width: 26ch;
  font-family: var(--font-display);
  font-size: var(--type-quote);
  line-height: var(--lh-quote);
  letter-spacing: var(--track-tight);
  color: var(--color-navy);
}

/* AT A GLANCE  —  comparison table; scrolls horizontally on narrow screens
   so it never forces the page body to scroll sideways. */
.compare-wrap {
  max-width: 940px;
  margin-top: var(--space-32);
  overflow-x: auto;
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
  background: var(--color-paper);
}
.compare-table {
  inline-size: 100%;
  min-inline-size: 680px;              /* keep columns legible; the wrap scrolls */
  border-collapse: collapse;
  font-size: var(--type-body-s);
}
.compare-table th,
.compare-table td {
  text-align: left;
  padding: var(--space-16);
  border-block-end: 1px solid var(--color-stone-20);
  vertical-align: top;
  line-height: var(--lh-body);
}
.compare-table thead th {
  color: var(--color-navy);
  font-size: var(--type-label-s);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  background: var(--color-mist);
}
.compare-table tbody th[scope="row"] {
  color: var(--color-midnight);
  font-weight: 600;
  inline-size: 28%;
}
.compare-table tbody td { color: var(--color-stone-60); }
/* Purpose-built column, lightly lifted so the eye lands there. */
.compare-table tbody td:last-child {
  color: var(--color-stone-90);
  background: color-mix(in srgb, var(--color-mist) 40%, transparent);
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-block-end: 0; }