/* ==========================================================================
   KF Elements — Compare Table
   --------------------------------------------------------------------------
   The same chrome as the price table's `head` style: a white, bordered,
   rounded card with a filled head row. It is DECLARED here rather than shared
   from a file — `assets/css/base.css` is the frame lane's (ADR-0004) and a
   widget stylesheet is per widget, so "shares the overflow rule with the price
   table" means the same class and the same declaration, not one file.

   NO `tbody tr` BACKGROUND, on purpose: the zebra rows the reference shows on
   both sides of the comparison strips are the THEME's row reset, and a widget
   that painted its own would fight every theme that has one.

   AT ≤767 THE WRAP SCROLLS and the table keeps a 560px floor, so four columns
   of prose stay readable on a phone instead of collapsing into a column of
   single words. That is the reference's own mobile rule.

   Tokens only: every colour reads a --kfe-* custom property from base.css with
   today's value as its fallback (ADR-0004 decision 2); the fixed geometry (the
   15/18 cell padding, the 560px floor) is the reference's own drawing.
   ========================================================================== */

.kfe .kfe-compare-table .head { margin-bottom: 26px; text-align: var(--kfe-head-align, start); }
.kfe .kfe-compare-table .head .kfe-compare-table-title {
  font-family: var(--kfe-font-heading);
  font-weight: var(--kfe-heading-weight);
  color: var(--kfe-heading, var(--kfe-primary));
  letter-spacing: -0.01em;
  margin: 0;
  font-size: var(--kfe-title-size, var(--kfe-h2-size, clamp(1.8rem, 3.4vw, 2.7rem)));
  line-height: 1.22;
}
.kfe .kfe-compare-table.kfe-dark .head .kfe-compare-table-title { color: #fff; }
/* NO measure on the intro: the reference's lead-in runs the wrap's full width
   (tree 741's text-editor above `table.ee-tbl` carries no max-width), and a
   72ch cap turned its one line into two in the read pair. */
.kfe .kfe-compare-table .intro {
  color: var(--kfe-body, var(--kfe-muted));
  font-size: var(--kfe-body-size, 17px);
  margin-bottom: 26px;
}
.kfe .kfe-compare-table .intro p + p { margin-top: 16px; }
.kfe .kfe-compare-table .intro ul, .kfe .kfe-compare-table .intro ol { margin: 16px 0 0; padding-inline-start: var(--kfe-list-indent); }
.kfe .kfe-compare-table .intro li + li { margin-top: 6px; }
.kfe .kfe-compare-table .intro a { color: var(--kfe-link, var(--kfe-accent)); }

/* The wrap, not the page, takes the overflow. */
.kfe .kfe-compare-table .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.kfe .kfe-compare-table .kfe-compare {
  width: 100%;
  border-collapse: collapse;
  text-align: start;
  background: var(--kfe-white);
  border: 1px solid var(--kfe-line);
  border-radius: var(--kfe-radius-card, 12px);
  overflow: hidden;
}
.kfe .kfe-compare-table .kfe-compare th {
  background: var(--kfe-primary-deep);
  color: #fff;
  text-align: start;
  padding: 15px 18px;
  font-size: 15px;
  font-weight: 700;
}
.kfe .kfe-compare-table .kfe-compare td {
  padding: 15px 18px;
  border-top: 1px solid var(--kfe-line);
  color: var(--kfe-body, var(--kfe-muted));
  font-size: var(--kfe-body-size, 16px);
  vertical-align: top;
}
.kfe .kfe-compare-table .kfe-compare.first-bold td:first-child {
  color: var(--kfe-heading, var(--kfe-primary));
  font-weight: 600;
  white-space: nowrap;
}

/* dark-ground flips, in the pack's idiom (feature-grid.css). The table keeps
   its own light ground, so only what sits outside it flips. */
.kfe .kfe-compare-table.kfe-dark .intro { color: var(--kfe-on-dark); }
.kfe .kfe-compare-table.kfe-dark .intro a { color: #fff; }
.kfe .kfe-compare-table.kfe-dark .kfe-compare { border-color: rgba(255, 255, 255, 0.18); }

/* The table scrolls rather than crushing four columns of prose. */
@media (max-width: 767px) {
  .kfe .kfe-compare-table .kfe-compare { min-inline-size: 560px; }
}
@media (max-width: 560px) {
  .kfe .kfe-compare-table .kfe-compare th,
  .kfe .kfe-compare-table .kfe-compare td { padding: 11px 12px; font-size: 14px; }
}