/* Comparison pages: aligned to the header's wrap, text held to a reading measure, the matrix given the full width. */
main.compare-page { padding: var(--s8) var(--gutter) var(--s9); }
.compare-page h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); margin-bottom: var(--s3); max-width: 24ch; }
.compare-page .lede { font-size: 1.1875rem; max-width: 60ch; margin-bottom: var(--s2); }
.compare-page .updated { font-size: var(--t-small); color: var(--muted); margin-bottom: var(--s7); }
.compare-page h2 { font-size: 1.625rem; margin: var(--s8) 0 var(--s4); }
.compare-page h3 { font-size: 1.1875rem; margin: var(--s5) 0 var(--s2); }
.compare-page p, .compare-page ul { max-width: 68ch; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The matrix: one extension per row, every cell a short value */
.matrix { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.matrix th { text-align: left; font-size: 0.8125rem; font-weight: 700; color: var(--muted); padding: var(--s2) var(--s3); border-bottom: 2px solid var(--ink); white-space: nowrap; vertical-align: bottom; }
.matrix td { padding: var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }
.matrix td:first-child { min-width: 15ch; }
.matrix td:first-child b { display: block; font-size: 1rem; line-height: 1.3; }
.matrix td:first-child small { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--muted); line-height: 1.35; }
.matrix .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.matrix .nowrap, .matrix .price { white-space: nowrap; }
.matrix .yes, .vs .yes { color: var(--rise); font-weight: 800; }
.matrix .no, .vs .no { color: var(--muted); }
.matrix .watch { font-size: 0.8125rem; color: var(--muted); max-width: 22ch; }
.matrix tr.ours td { background: var(--tint); }
.ours-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px; vertical-align: 2px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .02em; color: #1E1B18; background: var(--gold); border-radius: 3px;
}
.matrix-key { font-size: var(--t-small); color: var(--muted); margin-top: var(--s3); }

/* Which one: need on the left, extension on the right */
.which { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 760px; margin: 0; border-top: 1px solid var(--line); }
.which dt, .which dd { margin: 0; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.which dt { color: var(--muted); padding-right: var(--s4); }
.which dd { font-weight: 700; }
.which dd small { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--muted); }

@media (max-width: 900px) {
  .matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .matrix, .matrix tbody { display: block; }
  .matrix tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2) var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
  .matrix tr.ours { padding: var(--s4) var(--s3); background: var(--tint); }
  .matrix tr.ours td { background: none; }
  .matrix td { border: 0; padding: 0; text-align: left; white-space: normal; }
  .matrix .num { text-align: left; }
  .matrix td:first-child, .matrix .price, .matrix .watch { grid-column: 1 / -1; max-width: none; }
  .matrix td:not(:first-child)::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 400; color: var(--muted); }
}
@media (max-width: 560px) {
  .which { grid-template-columns: 1fr; }
  .which dt { border-bottom: 0; padding-bottom: 0; }
}

/* Head to head: one feature per row, the two extensions side by side */
.vs { width: 100%; max-width: 760px; border-collapse: collapse; margin: var(--s5) 0 var(--s2); font-size: 0.9375rem; }
.vs th, .vs td { text-align: left; padding: var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }
.vs thead th { font-size: 1rem; font-weight: 800; border-bottom: 2px solid var(--ink); padding-bottom: var(--s2); }
.vs tbody th { font-weight: 400; color: var(--muted); width: 32%; padding-left: 0; }
.vs .ours { background: var(--tint); }
.vs-key { font-size: var(--t-small); color: var(--muted); }
.vs thead th { white-space: nowrap; }
@media (max-width: 560px) {
  .vs th, .vs td { padding: var(--s3) var(--s2); }
  .vs tbody th { width: 28%; padding-left: 0; }
  .vs .ours-tag { margin-left: 4px; }
}
.vs .nowrap { white-space: nowrap; }
/* A two-plan table placed in a 12-column band */
.vs.stack { grid-column: 1 / -1; max-width: 920px; }
@media (max-width: 560px) {
  .vs.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .vs.stack, .vs.stack tbody { display: block; }
  .vs.stack tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s3); border-bottom: 1px solid var(--line); padding: var(--s3) 0; }
  .vs.stack th, .vs.stack td { border: 0; padding: 0; width: auto; }
  .vs.stack tbody th { grid-column: 1 / -1; color: var(--ink); font-weight: 700; margin-bottom: var(--s1); }
  .vs.stack td { padding: var(--s2); }
  .vs.stack td:first-of-type { padding-left: 0; }
  .vs.stack td::before { display: block; font-size: 0.75rem; color: var(--muted); }
  .vs.stack td:first-of-type::before { content: "Free"; }
  .vs.stack td.ours::before { content: "Pro"; }
}