/* Comparison pages: /serviti-vs-* and /whatsapp-ai-agent-pricing. */
.cmp-table-wrap { max-width: 1120px; margin: 0 auto; overflow: hidden; border: 1px solid #dbe4f0; border-radius: 20px; background: #fff; box-shadow: 0 20px 50px rgba(15, 23, 42, .1); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; }
.cmp-table caption { padding: 18px 22px 0; color: #0f172a; font-size: 13px; font-weight: 850; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.cmp-table th, .cmp-table td { padding: 14px 18px; border-top: 1px solid #e2e8f0; text-align: left; vertical-align: top; }
.cmp-table thead th { border-top: 0; color: #0f172a; font-size: 15px; font-weight: 850; }
.cmp-table thead th:nth-child(2) { color: #1d4ed8; }
.cmp-table tbody th { width: 22%; color: #0f172a; font-weight: 750; }
.cmp-table tbody td { color: #334155; }
.cmp-table tbody td:nth-of-type(1) { background: #f5f9ff; }
.cmp-table--wide tbody th { width: 14%; }
.cmp-table--wide tbody td:nth-of-type(1) { background: transparent; }
.cmp-table--wide tbody tr:first-child { background: #f5f9ff; }
.cmp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cmp-checked { max-width: 1120px; margin: 16px auto 0; color: #64748b; font-size: 13px; line-height: 1.6; }
.cmp-checked a { color: #1d4ed8; }
.cmp-choose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 1120px; }
.cmp-choose > div { min-width: 0; padding: 26px; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; }
.cmp-choose h2 { margin: 0 0 12px; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.02em; }
.cmp-choose ul { margin: 0; padding-left: 20px; list-style: disc; }
.cmp-choose li { margin: 8px 0; color: #334155; font-size: 15.5px; line-height: 1.65; }
.cmp-cta { text-align: left; }

/* Phones: each row becomes a card, label on top, one block per platform. */
@media (max-width: 760px) {
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display: block; width: auto; }
  .cmp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp-table caption { display: block; padding: 16px 16px 4px; }
  .cmp-table tbody tr { padding: 4px 0 10px; border-top: 1px solid #e2e8f0; }
  .cmp-table tbody th { width: auto; padding: 12px 16px 4px; border: 0; }
  .cmp-table tbody td { padding: 6px 16px; border: 0; }
  .cmp-table tbody td::before { display: block; margin-bottom: 2px; color: #1d4ed8; font-size: 11px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; content: attr(data-label); }
  .cmp-table tbody td:nth-of-type(1) { border-radius: 10px; margin: 0 8px; }
  .cmp-choose { grid-template-columns: minmax(0, 1fr); }
}