/* ex-compare: orange-headed comparison table with orange column rules. Rows become cards on phones. */
.ex-compare-table{max-width:66rem;margin-inline:auto;background:var(--card);box-shadow:var(--card-shadow);border-radius:var(--r);overflow:hidden}
.ex-c-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.1fr);border-bottom:1px solid var(--line-c)}
.ex-c-row > span{padding:1rem 1.2rem;font-size:.92rem;line-height:1.5}
.ex-c-row > span + span{border-left:2px solid var(--orange-hi)}
.ex-c-row--head{background:var(--orange-hi);color:#fff;border-bottom:0}
.ex-c-row--head > span{font-family:var(--serif),sans-serif;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding-block:1.2rem;color:#13212B}
.ex-c-row--head > span + span{border-left-color:rgba(255,255,255,.55)}
.ex-c-k{font-weight:700;color:var(--cream)}
.ex-c-row:not(.ex-c-row--head) span[role=cell]{color:var(--muted)}
.ex-c-row:nth-child(odd):not(.ex-c-row--head){background:var(--bg2)}
.ex-compare .ex-note{text-align:center}
@media (max-width:720px){
  .ex-c-row--head{display:none}
  .ex-c-row{grid-template-columns:1fr;padding:.4rem 0}
  .ex-c-row > span{padding:.5rem 1rem}
  .ex-c-row > span + span{border-left:3px solid var(--orange-hi);margin-left:1rem;padding-left:.8rem}
  .ex-c-row span[role=cell]::before{content:attr(data-col);display:block;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--terra);margin-bottom:.15rem}
}