.comparison-index,
.comparison-detail {
  --cmp-ink: oklch(25% .014 230);
  --cmp-muted: oklch(46% .018 230);
  --cmp-line: oklch(86% .013 230);
  --cmp-paper: oklch(99% .003 230);
  --cmp-blue: oklch(42% .095 235);
  --cmp-surface: oklch(97% .007 230);
  --cmp-selected: oklch(94% .024 230);
  color: var(--cmp-ink);
  background: var(--cmp-paper);
  padding: 28px 0 72px;
  font-family: Manrope, Arial, sans-serif;
}

.comparison-index .wrap,
.comparison-detail .wrap { max-width: 1260px; }
.comparison-index .eyebrow,
.comparison-detail .eyebrow { font-size: 12px; letter-spacing: .09em; margin-bottom: 14px; }
.comparison-index .breadcrumb,
.comparison-detail .breadcrumb { font-size: 13px; line-height: 1.6; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.comparison-index a,
.comparison-detail a { text-underline-offset: .2em; text-decoration-thickness: 1px; }
.comparison-index a:focus-visible,
.comparison-detail a:focus-visible,
.comparison-table-scroll:focus-visible { outline: 3px solid var(--cmp-blue); outline-offset: 4px; border-radius: 2px; }
.comparison-detail [tabindex="-1"] { scroll-margin-top: 112px; }
.comparison-detail h2[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
.comparison-detail h2[tabindex="-1"]:focus-visible { outline: 3px solid var(--cmp-blue); outline-offset: 6px; }

.comparison-library-nav { display: flex; gap: 30px; padding-top: 17px; border-bottom: 1px solid var(--cmp-line); font-size: 14px; }
.comparison-library-nav a { display: inline-flex; align-items: center; min-height: 45px; padding: 6px 0 15px; margin-bottom: -1px; text-decoration: none; color: var(--cmp-muted); }
.comparison-library-nav a:hover { color: var(--cmp-ink); }
.comparison-library-nav [aria-current] { color: var(--cmp-ink); font-weight: 700; border-bottom: 2px solid var(--cmp-blue); }

.comparison-index-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin: 40px 0 38px; }
.comparison-index h1,
.comparison-detail h1 { font-size: clamp(36px, 3.2vw, 46px); line-height: 1.15; letter-spacing: -.04em; font-weight: 700; margin: 10px 0 18px; max-width: 27ch; text-wrap: balance; }
.comparison-index-heading p,
.comparison-detail-heading > p { color: var(--cmp-muted); font-size: 17px; line-height: 1.7; max-width: 65ch; margin: 0; }
.comparison-checked { font-size: 13px; line-height: 1.7; color: var(--cmp-muted); flex-shrink: 0; padding-bottom: 3px; }
.comparison-checked time { color: var(--cmp-ink); font-weight: 600; }
.comparison-topic { font-size: 13px; font-weight: 700; color: var(--cmp-blue); }
.comparison-entry-topic { display: flex; flex-direction: column; gap: 7px; align-self: start; }
.comparison-entry-count { font-size: 13px; line-height: 1.6; color: var(--cmp-muted); }

.comparison-featured { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 18px 64px; padding: 32px 36px 34px; background: oklch(96% .019 230); border-radius: 8px; }
.comparison-featured .comparison-entry-topic { grid-column: 1; flex-direction: row; align-items: baseline; gap: 15px; }
.comparison-featured .comparison-entry-copy { grid-column: 1; }
.comparison-featured h2 { font-size: 30px; line-height: 1.28; letter-spacing: -.03em; margin: 0 0 13px; text-wrap: balance; }
.comparison-featured h2 a,
.comparison-directory h2 a { color: var(--cmp-ink); text-decoration: none; }
.comparison-featured h2 a:hover,
.comparison-directory h2 a:hover { text-decoration: underline; }
.comparison-featured p,
.comparison-directory p { font-size: 16px; line-height: 1.7; color: var(--cmp-muted); max-width: 59ch; margin: 0; }
.comparison-open { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: 14px; font-weight: 700; line-height: 1.4; text-decoration: none; color: var(--cmp-blue); border: 1px solid oklch(76% .03 230); border-radius: 5px; padding: 10px 15px; margin-top: 24px; background: var(--cmp-paper); transition: background 180ms cubic-bezier(.22, 1, .36, 1), border-color 180ms cubic-bezier(.22, 1, .36, 1); }
.comparison-open:hover { color: var(--cmp-blue); background: var(--cmp-selected); border-color: var(--cmp-blue); }
.comparison-open:active { background: oklch(91% .035 230); }
.comparison-preview { grid-column: 2; grid-row: 1 / 3; align-self: center; display: grid; gap: 0; padding: 0; margin: 0; }
.comparison-preview > div { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 1fr); align-items: baseline; gap: 20px; padding: 15px 0; border-bottom: 1px solid oklch(86% .024 230); }
.comparison-preview > div:first-child { padding-top: 0; }
.comparison-preview > div:last-child { border-bottom: 0; padding-bottom: 0; }
.comparison-preview dt { font-size: 18px; font-weight: 700; line-height: 1.4; }
.comparison-preview dt span { display: block; font-size: 13px; font-weight: 400; color: var(--cmp-muted); margin-top: 4px; }
.comparison-preview dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--cmp-muted); }
.comparison-directory { margin-top: 18px; }
.comparison-directory-entry { display: grid; grid-template-columns: 165px minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: 32px 0; border-bottom: 1px solid var(--cmp-line); }
.comparison-directory h2 { font-size: 24px; line-height: 1.35; letter-spacing: -.025em; margin: 0 0 10px; }
.comparison-directory .comparison-open { margin: 0; }
.comparison-directory-entry:last-child { border-bottom: 0; }
.comparison-editorial { display: grid; grid-template-columns: 165px minmax(0, 1fr) auto; gap: 28px; align-items: start; margin-top: 36px; font-size: 14px; color: var(--cmp-muted); }
.comparison-editorial strong { color: var(--cmp-ink); }
.comparison-editorial p { margin: 0; max-width: 67ch; line-height: 1.7; }
.comparison-editorial a { color: var(--cmp-blue); }
.comparison-empty { padding: 30px 0; font-size: 16px; }

.comparison-detail-heading { margin: 38px 0 26px; }
.comparison-detail h1 { max-width: 33ch; }
.comparison-meta { display: flex; gap: 7px 22px; margin-top: 20px; flex-wrap: wrap; font-size: 13px; line-height: 1.7; color: var(--cmp-muted); }
.comparison-meta a { color: var(--cmp-blue); }
.comparison-detail-heading .comparison-update { font-size: 14px; line-height: 1.7; color: var(--cmp-muted); max-width: 75ch; margin: 20px 0 0; }
.comparison-page-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 24px; padding: 10px 0; border-bottom: 1px solid var(--cmp-line); font-size: 14px; line-height: 1.6; }
.comparison-page-nav > span { color: var(--cmp-muted); margin-right: 4px; }
.comparison-page-nav a { padding: 8px 11px; color: var(--cmp-blue); font-weight: 600; text-decoration: none; border-radius: 4px; }
.comparison-page-nav a:hover { background: var(--cmp-selected); }
.comparison-skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.comparison-skip:focus { position: fixed; z-index: 30; top: 12px; left: 24px; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; padding: 13px 18px; color: var(--cmp-ink); background: var(--cmp-paper); }

.comparison-picker { background: oklch(96% .018 230); padding: 26px 30px 28px; border-radius: 8px; margin: 30px 0 44px; }
.comparison-picker-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.comparison-picker-heading h2 { font-size: 24px; line-height: 1.35; letter-spacing: -.025em; margin: 0; }
.comparison-picker-heading > span { font-size: 13px; line-height: 1.6; color: var(--cmp-muted); }
.comparison-choices { display: flex; gap: 10px; border: 0; padding: 0; margin: 19px 0 0; flex-wrap: wrap; min-width: 0; }
.comparison-choices legend { padding: 0; margin-bottom: 11px; font-size: 14px; font-weight: 600; color: var(--cmp-ink); }
.comparison-choices label { position: relative; display: flex; gap: 10px; align-items: center; padding: 11px 15px; min-height: 46px; border: 1px solid oklch(77% .028 230); border-radius: 5px; background: var(--cmp-paper); font-size: 14px; font-weight: 600; line-height: 1.45; cursor: pointer; transition: background 180ms cubic-bezier(.22, 1, .36, 1), border-color 180ms cubic-bezier(.22, 1, .36, 1); }
.comparison-choices input { appearance: auto; position: static; width: 17px; height: 17px; min-width: 17px; padding: 0; margin: 0; accent-color: var(--cmp-blue); border-radius: 50%; cursor: pointer; }
.comparison-choices label:hover { border-color: var(--cmp-blue); background: oklch(98% .01 230); }
.comparison-choices label:has(input:checked) { background: var(--cmp-selected); border-color: var(--cmp-blue); color: var(--cmp-blue); }
.comparison-choices label:has(input:focus-visible) { outline: 3px solid var(--cmp-blue); outline-offset: 3px; }
.comparison-choices input:focus-visible { outline: none; }
.comparison-choices label:has(input:disabled) { color: var(--cmp-muted); cursor: default; }
.comparison-choices input:disabled { cursor: default; }
.comparison-fit:not([data-fit-state="selected"]) { display: none; }
.comparison-fit { margin-top: 23px; display: grid; grid-template-columns: 165px minmax(0, 1fr); column-gap: 25px; row-gap: 7px; min-height: 129px; border-top: 1px solid oklch(84% .023 230); padding-top: 21px; }
.comparison-fit-label { grid-column: 1; grid-row: 1 / 4; font-size: 14px; line-height: 1.6; color: var(--cmp-muted); padding-top: 3px; }
.comparison-fit strong { font-size: 23px; line-height: 1.35; letter-spacing: -.025em; }
.comparison-fit p { font-size: 16px; line-height: 1.65; max-width: 70ch; margin: 0; }
.comparison-fit .comparison-fit-caveat { color: var(--cmp-muted); font-size: 14px; line-height: 1.7; max-width: 75ch; }
.comparison-static-choices { border-top: 1px solid var(--cmp-line); margin-top: 24px; padding-top: 15px; font-size: 15px; max-width: 75ch; line-height: 1.7; }
.comparison-static-choices p + p { margin-top: 18px; }
.comparison-static-choices span { display: block; margin-top: 5px; }

.comparison-section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin: 0 0 19px; }
.comparison-section-heading h2 { font-size: 26px; line-height: 1.35; letter-spacing: -.025em; margin: 0; }
.comparison-section-heading p { font-size: 14px; line-height: 1.6; color: var(--cmp-muted); margin: 0; }
.comparison-citation-key { color: var(--cmp-blue); font-weight: 700; }
.comparison-scroll-hint { display: none; font-size: 14px; line-height: 1.6; color: var(--cmp-muted); margin-bottom: 13px; }
.comparison-table-scroll { overflow: auto; isolation: isolate; border-top: 1px solid var(--cmp-line); border-bottom: 1px solid var(--cmp-line); outline-offset: 4px; }
.comparison-matrix { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 16px; line-height: 1.65; background: var(--cmp-paper); }
.comparison-criterion-column { width: 20%; }
.comparison-matrix th,
.comparison-matrix td { vertical-align: top; text-align: left; padding: 23px 24px; border-bottom: 1px solid var(--cmp-line); overflow-wrap: break-word; }
.comparison-matrix thead th { background: var(--cmp-surface); padding-top: 22px; padding-bottom: 25px; font-weight: 400; }
.comparison-matrix thead th:first-child { vertical-align: bottom; color: var(--cmp-muted); font-size: 14px; font-weight: 600; }
.comparison-company { display: block; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--cmp-muted); margin-bottom: 9px; }
.comparison-matrix thead strong { font-size: 23px; font-weight: 700; letter-spacing: -.025em; display: block; line-height: 1.3; }
.comparison-product-note { display: block; color: var(--cmp-muted); font-size: 14px; line-height: 1.55; margin-top: 9px; }
.comparison-matrix tbody th { font-size: 15px; font-weight: 700; line-height: 1.6; background: var(--cmp-paper); }
.comparison-matrix tbody td { color: oklch(34% .014 230); border-left: 1px solid oklch(91% .012 230); background: var(--cmp-paper); }
.comparison-matrix tbody tr:nth-child(even) > * { background: oklch(98% .006 230); }
.comparison-matrix tbody tr:hover > *,
.comparison-matrix tbody tr:focus-within > * { background: var(--cmp-selected); }
.comparison-matrix tbody tr:last-child > * { border-bottom: 0; }
.comparison-citation { display: inline; font-size: 13px; line-height: 1.5; color: var(--cmp-blue); font-weight: 700; text-decoration: none; white-space: nowrap; padding: 3px 2px; vertical-align: baseline; }
.comparison-citation:hover { color: var(--cmp-blue); text-decoration: underline; }

.comparison-practical { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; margin: 47px 0 50px; }
.comparison-practical h2 { font-size: 26px; line-height: 1.35; letter-spacing: -.025em; margin: 0 0 20px; }
.comparison-practical ol { padding: 0 0 0 22px; margin: 0; display: grid; gap: 17px; }
.comparison-practical li { padding-left: 8px; line-height: 1.7; font-size: 16px; }
.comparison-practical li::marker { font-size: 14px; font-weight: 600; color: var(--cmp-blue); }
.comparison-operation .eyebrow { margin-bottom: 8px; }
.comparison-operation h2 { margin: 0 0 16px; }
.comparison-operation p { font-size: 16px; line-height: 1.8; color: var(--cmp-muted); max-width: 65ch; margin: 0; }
.comparison-operation-links { display: flex; gap: 10px 25px; flex-wrap: wrap; margin-top: 22px; }
.comparison-operation a { display: inline-flex; padding: 9px 12px; border-radius: 4px; background: var(--cmp-selected); font-size: 14px; line-height: 1.6; font-weight: 600; color: var(--cmp-blue); text-decoration: none; }
.comparison-operation a:hover { background: oklch(90% .03 230); }
.comparison-sources { border-top: 1px solid var(--cmp-line); padding-top: 29px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 48px; }
.comparison-sources h2 { font-size: 18px; line-height: 1.35; letter-spacing: -.025em; margin: 0 0 15px; }
.comparison-sources p { font-size: 14px; line-height: 1.8; max-width: 55ch; color: var(--cmp-muted); margin: 0; }
.comparison-sources ol { list-style: none; font-size: 14px; line-height: 1.7; margin: 0; padding: 0; }
.comparison-sources li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; padding: 0; }
.comparison-sources ol { display: grid; gap: 18px; }
.comparison-sources li:first-child { padding-top: 0; }
.comparison-sources li:last-child { border-bottom: 0; }
.comparison-source-number { color: var(--cmp-blue); font-size: 13px; font-weight: 700; }
.comparison-source-link { font-weight: 600; color: var(--cmp-blue); text-decoration: none; }
.comparison-source-link:hover { text-decoration: underline; }
.comparison-source-domain { display: block; font-size: 13px; line-height: 1.6; margin-top: 4px; color: var(--cmp-muted); overflow-wrap: anywhere; }
.comparison-source-return { display: inline-flex; white-space: nowrap; margin-top: 16px; padding: 8px 11px; border-radius: 4px; background: var(--cmp-selected); color: var(--cmp-blue); font-size: 13px; font-weight: 600; text-decoration: none; }
.comparison-source-return:hover { background: oklch(90% .03 230); }
.comparison-sources li:target { background: var(--cmp-selected); outline: 8px solid var(--cmp-selected); }
.comparison-more { display: flex; gap: 8px 16px; flex-wrap: wrap; margin-top: 32px; font-size: 14px; line-height: 1.6; font-weight: 600; }
.comparison-more a { color: var(--cmp-blue); padding: 8px 12px; border-radius: 4px; text-decoration: none; }
.comparison-more a:hover { background: var(--cmp-selected); }
.comparison-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (max-width: 1000px) {
  .comparison-featured { gap: 18px 35px; padding: 28px; }
  .comparison-featured h2 { font-size: 27px; }
  .comparison-directory-entry,
  .comparison-editorial { grid-template-columns: 130px minmax(0, 1fr); gap: 22px; }
  .comparison-directory .comparison-open,
  .comparison-editorial > a { grid-column: 2; justify-self: start; }
  .comparison-matrix { min-width: 800px; }
  .comparison-scroll-hint { display: block; }
  .comparison-matrix th,
  .comparison-matrix td { padding: 21px 20px; }
  .comparison-matrix thead th:first-child,
  .comparison-matrix tbody th { position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 var(--cmp-line); }
  .comparison-practical { gap: 36px; }
  .comparison-section-heading { display: block; }
  .comparison-section-heading p { margin-top: 8px; }
  .comparison-sources { gap: 30px; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
  .comparison-sources li { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
}

@media (max-width: 700px) {
  .comparison-index-heading { display: block; margin-top: 30px; }
  .comparison-checked { display: block; margin-top: 18px; }
  .comparison-checked br { display: none; }
  .comparison-checked time { margin-left: 5px; }
  .comparison-featured { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
  .comparison-featured .comparison-entry-topic { flex-wrap: wrap; gap: 5px 15px; }
  .comparison-preview { grid-column: 1; grid-row: auto; margin-top: 9px; padding-top: 19px; border-top: 1px solid var(--cmp-line); }
  .comparison-preview > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .comparison-directory-entry { grid-template-columns: 1fr; gap: 14px; }
  .comparison-entry-topic { flex-direction: row; flex-wrap: wrap; gap: 5px 15px; }
  .comparison-directory .comparison-open { grid-column: 1; }
  .comparison-editorial,
  .comparison-practical,
  .comparison-sources { grid-template-columns: 1fr; gap: 28px; }
  .comparison-editorial { gap: 10px; }
  .comparison-editorial > a { grid-column: 1; }
  .comparison-detail-heading { margin-top: 30px; }
  .comparison-page-nav { gap: 5px 20px; }
  .comparison-page-nav > span { width: 100%; }
  .comparison-picker { padding: 23px 22px; }
  .comparison-picker-heading { display: block; }
  .comparison-picker-heading > span { display: block; margin-top: 5px; }
  .comparison-choices { flex-direction: column; align-items: flex-start; }
  .comparison-choices label { width: 100%; }
  .comparison-fit { grid-template-columns: 1fr; row-gap: 9px; min-height: 0; }
  .comparison-fit-label { grid-row: auto; grid-column: 1; padding: 0; }
  .comparison-practical { margin: 36px 0 40px; gap: 35px; }
  .comparison-sources li { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
}

@media (max-width: 450px) {
  .comparison-index,
  .comparison-detail { padding-top: 23px; }
  .comparison-library-nav { gap: 24px; }
  .comparison-index h1,
  .comparison-detail h1 { font-size: 34px; }
  .comparison-index-heading p,
  .comparison-detail-heading > p { font-size: 16px; }
  .comparison-featured { padding: 23px 20px; }
  .comparison-picker { padding: 22px 18px; }
  .comparison-matrix { min-width: 760px; font-size: 15px; }
  .comparison-matrix th,
  .comparison-matrix td { padding: 20px 16px; }
  .comparison-matrix tbody th { font-size: 14px; }
  .comparison-matrix thead strong { font-size: 21px; }
  .comparison-sources li { grid-template-columns: 28px minmax(0, 1fr); }
  .comparison-source-return { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .comparison-open,
  .comparison-choices label { transition: none; }
}

@media print {
  .comparison-page-nav,
  .comparison-skip,
  .comparison-library-nav,
  .comparison-choices,
  .comparison-fit,
  .comparison-source-return,
  .comparison-more,
  .comparison-scroll-hint { display: none; }
  .comparison-table-scroll { overflow: visible; }
  .comparison-matrix { min-width: 0; font-size: 11pt; }
  .comparison-matrix th,
  .comparison-matrix td { padding: 10px; }
  .comparison-practical,
  .comparison-sources { display: block; }
  .comparison-operation,
  .comparison-sources ol { margin-top: 22px; }
  .comparison-matrix tr,
  .comparison-sources li { break-inside: avoid; }
  .comparison-sources li:target { outline: none; }
}

/* The picture belongs to the operational explanation, after the evidence table. */
.comparison-practical{grid-template-columns:minmax(0,1fr);gap:44px;max-width:940px}
.comparison-practical>section:first-child{max-width:760px}
.comparison-practical>section:first-child ol{gap:13px}
.comparison-operation>p{font-size:18px;line-height:1.75;max-width:70ch}
.comparison-inline-visual{margin-block:28px 34px}
.comparison-inline-visual>.bv-figure{margin:0}
.comparison-operation .inline-experiment{margin-block:28px 34px}
.comparison-detail .comparison-fit p:empty{display:none}
.comparison-index .comparison-directory-entry{padding-block:28px}