/* Comparison pages. Loaded AFTER legal.css and adds only what a comparison needs:
   a wider column for the tables, the tables themselves, and one inline call to action.

   🔴 A COMPARISON TABLE ON A PHONE IS THE WHOLE RISK HERE. Three columns of prose at
   360px either shrink to unreadable or push the page sideways, and a marketing page that
   scrolls horizontally on an iPhone is worse than no page. `.tablewrap` scrolls the TABLE
   inside its own box, so the body never moves. */
:root{ --wrap:880px; }

.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:18px 0; }
table.cmp{
  border-collapse:collapse; width:100%; min-width:520px;
  font-size:15px; background:var(--paper-2);
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
table.cmp th, table.cmp td{
  text-align:left; padding:11px 14px; border-bottom:1px solid var(--line);
  color:var(--ink-2); vertical-align:top;
}
table.cmp th{ color:var(--ink); font-weight:650; font-size:13px; letter-spacing:.01em; }
table.cmp tbody tr:last-child td{ border-bottom:none; }
table.cmp td:first-child{ color:var(--ink); }

/* Our row is marked, once, and only in the price table. Colouring every one of our cells
   green turns an honest table into a sales graphic, and a reader who is comparing
   products is exactly the reader who notices. */
table.cmp tr.us{ background:var(--coral-wash); }
table.cmp td.good{ color:var(--ink); font-weight:600; }

.note{ font-size:13px; color:var(--muted); }
.cta-inline{ font-weight:650; text-decoration:none; }
.cta-inline:hover{ text-decoration:underline; }

/* The visible FAQ. Its wording is the source the JSON-LD in the head is copied from,
   because markup for content a reader cannot see is against Google's own policy and is
   the kind of shortcut that costs a manual action. */
.faq-q{ font-size:15px; margin:22px 0 4px; color:var(--ink); }
.faq-a{ margin:0; }