/* The comparison pages. Self-contained, like footer.css and header.css, and
   for the same reason: this site runs two design systems that share no custom
   properties, and a table styled with var() gets whatever the page happens to
   have loaded. Hard-coded values, no var(), no dependency on .container.

   Wide tables are the one thing on this site that genuinely cannot be made
   narrow, so they scroll inside their own box rather than making the page
   scroll sideways on a phone. */

.cmp-page { max-width: 820px; }

/* ── tables ─────────────────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  margin: 22px 0 30px;
  border: 1px solid #dbe6f0;
  border-radius: 12px;
  /* Tells a touch user the box itself scrolls. */
  -webkit-overflow-scrolling: touch;
}

table.cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.45;
  min-width: 560px;
}
table.cmp caption {
  caption-side: bottom;
  padding: 12px 16px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #5d738b;
  text-align: left;
  border-top: 1px solid #eaf0f6;
}
table.cmp th,
table.cmp td {
  padding: 11px 16px;
  text-align: left;
  border-bottom: 1px solid #eaf0f6;
  vertical-align: top;
}
table.cmp thead th {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #5d738b;
  background: #f6f9fc;
  border-bottom: 1px solid #dbe6f0;
  white-space: nowrap;
}
table.cmp tbody tr:last-child th,
table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Our rows, marked once. Not highlighted to flatter: the point of the table
   is the rows where ours is the dearer number, and they have to be findable
   too. */
table.cmp tr.mine td,
table.cmp td.mine {
  background: #f2f7ff;
  font-weight: 600;
  color: #0b2743;
}
table.cmp tr.mine td:first-child { box-shadow: inset 3px 0 0 #0066ff; }

table.cmp--terms th[scope="row"] {
  font-weight: 600;
  color: #0b2743;
  width: 32%;
  background: #fbfdff;
}

/* ── the verdict box ────────────────────────────────────────────────────── */

.verdict {
  border: 1px solid #b9d3f5;
  border-left: 4px solid #0066ff;
  border-radius: 12px;
  background: #f4f8ff;
  padding: 18px 22px 20px;
  margin: 26px 0 34px;
}
.verdict-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0066ff;
  margin: 0 0 8px;
}
.verdict p:last-child { margin: 0; font-size: 16px; line-height: 1.6; }

/* Credit where it is due to a competitor. Quieter than the body copy, but
   present: a comparison page with nothing good to say about anyone else is
   an advertisement. */
.credit {
  font-size: 14px;
  color: #5d738b;
  border-left: 2px solid #dbe6f0;
  padding-left: 16px;
  margin: 18px 0 26px;
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.faq-block { margin-top: 38px; }
.faq-block details {
  border-bottom: 1px solid #eaf0f6;
  padding: 2px 0;
}
.faq-block summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 2px;
  font-size: 15.5px;
  font-weight: 600;
  color: #0b2743;
  cursor: pointer;
  list-style: none;
}
.faq-block summary::-webkit-details-marker { display: none; }
.faq-block summary span {
  flex: none;
  color: #8ba3bb;
  font-weight: 400;
  font-size: 19px;
  line-height: 1;
}
.faq-block details[open] summary span { transform: rotate(45deg); }
.faq-block summary:focus-visible { outline: 2px solid #0066ff; outline-offset: 2px; }
.faq-block details > p {
  margin: 0 0 17px;
  padding-right: 34px;
  font-size: 15px;
  line-height: 1.68;
  color: #40566d;
}

/* ── close ──────────────────────────────────────────────────────────────── */

.cmp-cta {
  margin-top: 40px;
  padding: 26px 26px 28px;
  border-radius: 14px;
  background: #0b2743;
  color: #cfe0f1;
}
.cmp-cta h2 { color: #fff; margin: 0 0 10px; font-size: 24px; }
.cmp-cta p { color: #b7cde2; line-height: 1.65; }
.cmp-cta .button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 9px;
  background: #0066ff;
  border: 1px solid #0066ff;
  color: #fff;
  font-weight: 650;
  font-size: 15px;
  text-decoration: none;
}
.cmp-cta .button:hover { background: #2a7bff; border-color: #2a7bff; }
.cmp-cta .text-link { color: #8fc0ff; margin-left: 14px; font-size: 14.5px; }

.cmp-sources {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid #eaf0f6;
  font-size: 14px;
  color: #5d738b;
}
.cmp-sources h2 { font-size: 16px; margin-bottom: 10px; }
.cmp-sources a { color: #0057d8; }

@media (max-width: 680px) {
  table.cmp { font-size: 13.5px; }
  table.cmp th, table.cmp td { padding: 10px 13px; }
  .verdict { padding: 16px 17px 18px; }
  .cmp-cta { padding: 22px 19px 24px; }
  .cmp-cta .text-link { display: block; margin: 14px 0 0; }
}