/* Shared comparison-table styling for zoho-vs-salesforce.html and zoho-vs-monday.html.
   Deliberately neutral: both columns get equal visual weight (same background, same font
   weight) - nothing here should make one side "look like the winner." That's a content
   discipline as much as a design one, per explicit instruction: these pages must read as
   objective, not as a Zoho sales pitch dressed as a comparison. */

.cmp-table { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cmp-row { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; }
.cmp-row + .cmp-row { border-top: 1px solid var(--line); }
.cmp-row > span { padding: 16px 18px; font-size: .92rem; line-height: 1.55; }
.cmp-row > span[role="rowheader"] { font-weight: 800; color: var(--ink); background: var(--white); }
.cmp-row > span[role="cell"] { color: var(--ink); background: var(--white); }
.cmp-row > span[role="cell"] + span[role="cell"] { border-inline-start: 1px solid var(--line); }

.cmp-head { background: var(--ink); }
.cmp-head > span { color: #fff; font-weight: 800; font-size: .82rem; padding: 12px 18px; }

@media (max-width: 720px) {
  .cmp-row { grid-template-columns: 1fr; }
  .cmp-row > span[role="cell"] + span[role="cell"] { border-inline-start: none; border-top: 1px dashed var(--line); }
  .cmp-head { display: none; }
  .cmp-row:not(.cmp-head) > span[role="rowheader"] { border-bottom: 1px solid var(--line); }
}