/* The /compare and /features routes. Loaded on top of landing.css, never by
   the landing page itself, which has no table and no prose column. */

.page { padding-block: 34px 72px; }
.page > * + * { margin-block-start: 26px; }

.crumbs ol { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-soft); }
.crumbs li + li::before { content: "/"; margin-inline-end: 10px; color: var(--line-hard); }
.crumbs a { color: var(--fg-soft); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

.page h1 { font-size: clamp(30px, 4.6vw, 52px); max-width: 20ch; margin-block: 20px 0; }
.page h2 { font-size: clamp(22px, 2.8vw, 30px); max-width: 30ch; margin-block-start: 52px; }
.page h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .04em; margin-block-start: 30px; }
.page p, .page li { font-size: 15px; color: var(--fg-soft); line-height: 1.7; max-width: 76ch; }
.page p b, .page li b { color: var(--fg); font-weight: 600; }
.page ul, .page ol { padding-inline-start: 20px; }
.page li + li { margin-block-start: 8px; }

.lede { font-size: clamp(16px, 1.8vw, 19px) !important; color: var(--fg) !important; max-width: 62ch; }
.answer { border-inline-start: 3px solid var(--accent); background: var(--panel); padding: 20px 24px; }
.answer p { color: var(--fg) !important; font-size: 16px !important; max-width: 66ch; }

/* The comparison table. Every cell that states a fact carries its source under
   it, so a reader and a crawler see the citation without a hover. */
.cmp-scroll { overflow-x: auto; border: 1.5px solid var(--line-hard); }
table.cmp { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 14px; }
table.cmp caption { text-align: start; padding: 16px 18px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-soft); border-block-end: 1.5px solid var(--line-hard); }
table.cmp th, table.cmp td { border: 1px solid var(--line); padding: 14px 16px; vertical-align: top; text-align: start; }
table.cmp thead th { background: var(--panel-2); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg); }
table.cmp tbody th { background: var(--panel); font-weight: 600; color: var(--fg); width: 20%; }
table.cmp td { color: var(--fg-soft); line-height: 1.6; }
table.cmp td b { color: var(--fg); font-weight: 600; }
.cite { display: block; margin-block-start: 8px; font-size: 11.5px; letter-spacing: .02em; }
.cite a { color: var(--fg-soft); text-decoration-thickness: 1px; }
.cite a:hover { color: var(--accent); }
.quote { display: block; margin-block-start: 6px; font-size: 12px; color: var(--fg-soft); border-inline-start: 2px solid var(--line-hard); padding-inline-start: 10px; }

.verdicts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0; border: 1.5px solid var(--line-hard); }
.verdict { padding: 24px; }
.verdict + .verdict { border-inline-start: 1.5px solid var(--line-hard); }
.verdict h3 { margin-block-start: 0; color: var(--accent); }
.verdict ul { margin-block-start: 14px; }

.proof { border: 1.5px solid var(--line-hard); background: #000; }
.proof-bar { padding: 10px 16px; border-block-end: 1px solid var(--line); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-soft); }
.proof pre { padding: 18px 16px; font-size: 13px; line-height: 1.6; color: var(--fg); }

.page-updated { font-size: 12px !important; text-transform: uppercase; letter-spacing: .05em; margin-block-start: 56px; padding-block-start: 18px; border-block-start: 1px solid var(--line); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0; border: 1.5px solid var(--line-hard); }
.card-grid > a { display: block; padding: 24px; color: var(--fg); text-decoration: none; border-inline-start: 1.5px solid var(--line-hard); border-block-start: 1.5px solid var(--line-hard); }
.card-grid > a:hover { background: var(--panel); }
.card-grid > a strong { display: block; font-size: 16px; text-transform: uppercase; letter-spacing: -.01em; }
.card-grid > a span { display: block; margin-block-start: 10px; font-size: 14px; color: var(--fg-soft); line-height: 1.6; }

@media (max-width: 700px) {
  .verdict + .verdict { border-inline-start: 0; border-block-start: 1.5px solid var(--line-hard); }
}

@media print {
  nav, footer { display: none; }
  .page p, .page li, table.cmp td { color: #000; }
}