/* Styles only the generated SEO pages use (tools/build-seo-pages.mjs):
   comparison tables, lists and the breadcrumb. Kept out of site.css on purpose — the landing page is at its size
   budget, and none of this appears on it. Tokens come from site.css. */

.prose p{max-width:44em}
.prose .lead{max-width:40em}
.crumbs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px}
.crumbs a{color:var(--ink-3); text-decoration:none}
.crumbs a:hover{color:var(--gold)}

.list{display:grid; gap:10px; max-width:44em}
.list li{position:relative; padding-inline-start:22px; color:var(--ink-2)}
.list li::before{content:""; position:absolute; inset-inline-start:2px; top:.7em;
  width:7px; height:7px; border-radius:50%; background:var(--gold)}
.list--num{counter-reset:n}
.list--num li{counter-increment:n; padding-inline-start:34px}
.list--num li::before{content:counter(n); top:.1em; width:24px; height:24px;
  background:var(--gold-soft); color:var(--ink); font-size:13px; font-weight:600;
  display:grid; place-items:center}
.list--check li::before{content:"✓"; width:auto; height:auto; top:0;
  background:none; color:var(--gold); font-weight:700}

.tbl{overflow-x:auto; border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--surface); max-width:100%}
.tbl table{width:100%; border-collapse:collapse; min-width:560px; font-size:15px}
.tbl th,.tbl td{padding:12px 14px; text-align:start; vertical-align:top;
  border-bottom:1px solid var(--rule-soft)}
.tbl th{background:var(--surface-2); color:var(--ink); font-weight:600}
.tbl td{color:var(--ink-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{color:var(--ink); font-weight:600}