/* /alternativa — one comparison table. Loaded only on that page.
   Rules mirror the company-page tables in site.css (ruled rows, no borders, uppercase label
   heads) so the page reads as the same site. */

/* The highlight in the h1: the rest of the line is the serif of every list-page title,
   this is a solid block in the data blue of the site (the tint behind our column, at full
   strength) with the paper colour knocked out of it — the one thing on the page with a
   filled background, so the eye lands on it first, without a colour the palette does not
   already have. */
.alternativa__free {
  display: inline-block;
  padding: 3px 14px 5px;
  border-radius: 8px;
  background: var(--data);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.92em;
  font-weight: 800;
  letter-spacing: 0.015em;
  white-space: nowrap;
  vertical-align: 0.04em;
}

/* No lede on this page (operator's call, 2026-09-03): the h1 says it all. The legend keeps
   the distance it had below the lede — 10 + 24 + 22 — so the title breathes the same. */
.compare-legend {
  margin: 56px 2px 0;
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.compare-legend__item { white-space: nowrap; }
.compare-glyph { font-size: 14px; margin-right: 4px; }

/* Five columns and the wrap is 840px: on a phone the table scrolls inside its own box rather
   than pushing the page sideways. */
.compare-scroll { margin-top: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.compare-table {
  width: 100%;
  min-width: 600px;
  font-size: 13.5px;
  white-space: normal;
}
.compare-table th, .compare-table td {
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 9px 12px 9px 0;
  text-align: left;
  vertical-align: top;
  line-height: 1.4;
}
.compare-table thead th {
  background: transparent;
  border-bottom: 1px solid var(--rule-strong);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--label);
  white-space: nowrap;
  text-align: center;
}
.compare-table thead th:first-child { text-align: left; }
.compare-table th[scope="row"] {
  font-weight: 400;
  color: var(--ink);
  width: 40%;
}
/* Same specificity as the `th, td` rule above and later in the file, so the centring wins;
   the padding is symmetric for the same reason — a right-only pad shifts the glyph off the
   column's centre. */
.compare-table td.compare-table__mark {
  text-align: center;
  padding: 9px 6px;
  font-size: 16px;
  line-height: 1.2;
}
/* Our column is the answer the page exists to give; the others are context. A tinted
   background rather than a colour on the mark — the marks already carry their meaning. */
.compare-table__ours { background: rgba(53, 90, 112, 0.06); }
/* The price row is the punchline of the table: bold, label and cells alike. The th
   selector matches the specificity of the `th[scope="row"]` rule above and comes later,
   so the 400 weight there does not win. */
.compare-table__text-row th[scope="row"],
.compare-table__text-row td { font-weight: 600; }
.compare-table__text-row td { text-align: center; padding: 9px 6px; }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }

/* The official-sources strip: a small uppercase label in the table-head voice, then host
   names as chips. Muted, dashed chips are sources behind rows still being built. */
.sources__label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--label);
}
.sources__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sources__chip {
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.2;
}
.sources__chip a { color: var(--ink-soft); text-decoration: none; }
.sources__chip a:hover { color: var(--ink); text-decoration: underline; }
.sources__chip--progress { border-style: dashed; border-color: var(--rule); }
.sources__chip--progress a { color: var(--muted); }