/* Comparison pages (/compare/..., /pl/porownanie/...). Loaded after feature.css; only adds the price and feature
   table, its source notes and the copy blocks between sections. */

.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--feature-line); border-radius: 20px; font-size: 15px; line-height: 1.6; color: #393346; }
.compare-table caption { caption-side: top; text-align: left; font: 600 18px/1.45 var(--font-display); color: #211a35; padding: 0 0 16px; }
.compare-table th, .compare-table td { padding: 18px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--feature-line); }
.compare-table thead th { border-top: 0; background: #ece8ff; font: 600 16px/1.35 var(--font-display); color: #211a35; }
.compare-table thead th:first-child { border-top-left-radius: 19px; }
.compare-table thead th:last-child { border-top-right-radius: 19px; }
.compare-table tbody th { width: 20%; font: 600 15px/1.45 var(--font-display); color: #211a35; }
.compare-table td { width: 40%; }
.compare-table a { color: #614bdb; font-weight: 600; }
.compare-source { display: block; margin-top: 8px; font-size: 14px; line-height: 1.55; color: #686274; }
.compare-note { margin: 20px 0 0; font-size: 14px; line-height: 1.65; color: #686274; max-width: 800px; }
.compare-note a { color: #614bdb; font-weight: 600; }
.compare-copy { max-width: 800px; }
.compare-fit__no { margin-top: 40px; }
.compare-copy p { font-size: 17px; line-height: 1.7; color: #393346; margin: 0 0 18px; }
.compare-copy p:last-child { margin-bottom: 0; }
.compare-copy a { color: #614bdb; font-weight: 600; }

/* Phones: each row becomes a card (feature name on top, then POSTIVA and the other tool, each labelled), so the
   table reads top to bottom and never scrolls sideways. */
@media (max-width: 760px) {
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; width: auto; }
  .compare-table { border: 0; background: none; }
  .compare-table caption { display: block; }
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .compare-table tbody tr { background: #fff; border: 1px solid var(--feature-line); border-radius: 18px; overflow: hidden; margin-top: 14px; }
  .compare-table tbody th { width: auto; border-top: 0; background: #ece8ff; padding: 14px 18px; }
  .compare-table td { padding: 14px 18px; }
  /* The label is visual only (alt text ""): the cell roles already tie each cell to its column header. */
  .compare-table td::before { content: attr(data-label); content: attr(data-label) / ""; display: block; font: 600 14px/1.4 var(--font-display); color: #614bdb; margin-bottom: 4px; }
}