/* Comparison guides follow the VRP reference: answer, decision, evidence, application.
   Opt-in classes keep the existing article library unchanged. */
article:has(.cmp-reference) > header h1 { overflow-wrap: anywhere; }
.blog-content .cmp-reference {
  --cmp-ink: #18181b;
  --cmp-muted: #52525b;
  --cmp-line: #e4e4e7;
  --cmp-surface: #fafafa;
  --cmp-blue: #1d64b5;
  color: var(--cmp-ink);
  overflow-wrap: break-word;
}
.blog-content .cmp-reference > section { margin-block: 2.5rem; }
.blog-content .cmp-reference h2[id],
.blog-content .cmp-reference h3[id],
.blog-content .cmp-reference section[id] { scroll-margin-top: 110px; }
.blog-content .cmp-reference p { color: var(--cmp-muted); line-height: 1.75; }
.blog-content .cmp-reference li { color: var(--cmp-muted); }
.blog-content .cmp-reference h2,
.blog-content .cmp-reference h3,
.blog-content .cmp-reference strong { color: var(--cmp-ink); }
.blog-content .cmp-reference a { text-underline-offset: .18em; }
.blog-content .cmp-reference a:focus-visible,
.blog-content .cmp-reference button:focus-visible,
.blog-content .cmp-reference summary:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 4px;
}
.blog-content .cmp-reference .cmp-kicker {
  margin: 0 0 .75rem;
  color: var(--cmp-blue);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.blog-content .cmp-reference .cmp-hero {
  margin-top: .5rem;
  padding: 1.75rem;
  border: 1px solid #cddff2;
  border-radius: 1rem;
  background: linear-gradient(145deg, #f3f8fd, #fff 72%);
}
.blog-content .cmp-reference .cmp-lead {
  max-width: 46rem;
  margin: 0 0 1rem;
  font-size: clamp(1.65rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.035em;
  text-wrap: balance;
  color: var(--cmp-ink);
}
.blog-content .cmp-provenance {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .75rem;
  margin: 1rem 0 1.5rem;
  color: var(--cmp-muted);
  font-size: .75rem;
  line-height: 1.5;
}
.blog-content .cmp-provenance span {
  padding: .3rem .55rem;
  border: 1px solid var(--cmp-line);
  border-radius: .35rem;
  background: #fff;
}
.blog-content .cmp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.blog-content .cmp-hero-grid > *,
.blog-content .cmp-pair > *,
.blog-content .cmp-fields > * { min-width: 0; }
.blog-content .cmp-hero-grid p:first-child { margin-top: 0; }
.blog-content .cmp-snapshot {
  padding: 1.15rem 1.25rem;
  border: 1px solid #cddff2;
  border-radius: .75rem;
  background: #fff;
}
.blog-content .cmp-choice + .cmp-choice {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cmp-line);
}
.blog-content .cmp-choice > span,
.blog-content .cmp-choice > small {
  display: block;
  margin-bottom: .25rem;
  color: var(--cmp-muted);
  font-size: .75rem;
}
.blog-content .cmp-choice > strong { display: block; font-size: 1.1rem; }
.blog-content .cmp-choice h2,
.blog-content .cmp-choice h3 { margin: 0 0 .4rem; padding: 0; border: 0; font-size: 1.1rem; line-height: 1.4; }
.blog-content .cmp-choice p { margin: .3rem 0 0; font-size: .875rem; line-height: 1.6; }
.blog-content .cmp-actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin-top: 1.25rem; }
.blog-content a.cmp-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .6rem 1rem;
  border: 1px solid #175aa6;
  border-radius: .5rem;
  background: #1d64b5;
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}
.blog-content a.cmp-primary:hover { background: #174f90; color: #fff; }
.blog-content a.cmp-link { font-size: .875rem; font-weight: 600; }
.blog-content .cmp-reference .cmp-conclusion {
  padding: 1.35rem 1.5rem;
  border-left: 4px solid var(--cmp-blue);
  border-radius: 0 .7rem .7rem 0;
  background: #f1f6fc;
}
.blog-content .cmp-conclusion h2 { margin: 0 0 .75rem; font-size: 1.3rem; }
.blog-content .cmp-conclusion > :last-child { margin-bottom: 0; }
.blog-content .cmp-toc { margin: 2rem 0; padding: 1.1rem 1.25rem; border: 1px solid var(--cmp-line); border-radius: .75rem; background: var(--cmp-surface); }
.blog-content .cmp-toc > b,
.blog-content .cmp-toc > strong { display: block; margin-bottom: .65rem; }
.blog-content .cmp-toc a { display: inline-block; margin: .3rem 1rem .3rem 0; font-size: .875rem; line-height: 1.6; }
.blog-content .cmp-toc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.blog-content .cmp-toc-grid b { display: block; margin-bottom: .5rem; font-size: .75rem; color: var(--cmp-muted); }
.blog-content .cmp-toc-grid a { display: block; margin: .45rem 0; }
.blog-content .cmp-table-wrap { max-width: 100%; margin: 1.25rem 0; }
.blog-content .cmp-reference table.cmp-table { display: table; width: 100%; min-width: 0; table-layout: auto; border-collapse: collapse; white-space: normal; font-size: .875rem; }
.blog-content .cmp-reference table.cmp-table th,
.blog-content .cmp-reference table.cmp-table td { padding: .8rem .75rem; border-bottom: 1px solid var(--cmp-line); text-align: left; vertical-align: top; white-space: normal; line-height: 1.65; overflow-wrap: anywhere; }
.blog-content .cmp-reference table.cmp-table thead th { background: #f4f7fb; color: var(--cmp-ink); font-size: .75rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.blog-content .cmp-reference table.cmp-table th[scope="row"] { min-width: 8rem; max-width: 12rem; font-weight: 600; }
.blog-content .cmp-reference table.cmp-table caption { padding: 0 0 .6rem; text-align: left; color: var(--cmp-muted); font-size: .8125rem; }
.blog-content .cmp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.blog-content .cmp-card { padding: 1.2rem; border: 1px solid var(--cmp-line); border-radius: .75rem; background: var(--cmp-surface); }
.blog-content .cmp-card h3 { margin-top: 0; }
.blog-content .cmp-card > :last-child { margin-bottom: 0; }
.blog-content .cmp-note { margin: 1.25rem 0; padding: 1rem 1.15rem; border-left: 3px solid #94a3b8; background: var(--cmp-surface); color: var(--cmp-muted); font-size: .875rem; }
.blog-content .cmp-worked { margin: 1.5rem 0; padding: 1.25rem 1.4rem; border: 1px solid #cddff2; border-radius: .75rem; background: #f8fbff; }
.blog-content .cmp-worked > :first-child { margin-top: 0; }
.blog-content .cmp-worked > :last-child { margin-bottom: 0; }
.blog-content .cmp-reference pre { max-width: 100%; overflow-x: auto; background: #0d1117; border: 1px solid #262c36; border-radius: .6rem; padding: 1rem; }
.blog-content .cmp-reference pre code { white-space: pre; overflow-wrap: normal; color: #e4e4e7; background: transparent; font-size: .8rem; line-height: 1.65; }
.blog-content .cmp-reference :not(pre) > code { overflow-wrap: anywhere; white-space: normal; }
.blog-content .cmp-reference :is(.cmp-faq, #faq) details { margin: .65rem 0; border: 1px solid var(--cmp-line); border-radius: .6rem; }
.blog-content .cmp-reference :is(.cmp-faq, #faq) summary { padding: 1rem 1.1rem; cursor: pointer; font-weight: 600; font-size: .9375rem; line-height: 1.5; }
.blog-content .cmp-reference :is(.cmp-faq, #faq) details > p,
.blog-content .cmp-reference :is(.cmp-faq, #faq) details > div { margin: 0; padding: 0 1.1rem 1.1rem; font-size: .9rem; }
.blog-content .cmp-sources { padding-top: 1rem; border-top: 1px solid var(--cmp-line); }
.blog-content .cmp-sources li { margin: .65rem 0; font-size: .875rem; line-height: 1.65; overflow-wrap: anywhere; }
.blog-content .cmp-sources > p { color: var(--cmp-muted); font-size: .8125rem; }
.blog-content .cmp-next { margin: 2.5rem 0 1rem; padding: 1.5rem; border: 1px solid #cddff2; border-radius: .85rem; background: linear-gradient(135deg, #eff6ff, #fff); }
.blog-content .cmp-next h2 { margin-top: 0; font-size: 1.4rem; }
.blog-content .cmp-next > :last-child { margin-bottom: 0; }
.blog-content .cmp-calculator { margin: 1.5rem 0; padding: 1.25rem; border: 1px solid #b9d0eb; border-radius: .75rem; background: #f3f8fd; }
.blog-content .cmp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; }
.blog-content .cmp-calculator label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .8125rem; line-height: 1.5; }
.blog-content .cmp-calculator input,
.blog-content .cmp-calculator select,
.blog-content .cmp-calculator textarea { box-sizing: border-box; max-width: 100%; width: 100%; border: 1px solid #a9bfd8; border-radius: .4rem; padding: .6rem .7rem; background: #fff; color: #18181b; font: inherit; font-size: .875rem; }
.blog-content .cmp-calculator textarea { min-height: 8rem; font-family: ui-monospace, monospace; }
.blog-content .cmp-calculator button { min-height: 2.75rem; border: 1px solid #175aa6; border-radius: .45rem; padding: .55rem .9rem; background: #1d64b5; color: #fff; font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.blog-content .cmp-calculator output { display: block; margin: 1rem 0 .35rem; color: #174f90; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.45; }
.blog-content .cmp-calculator [data-cmp-status] { margin: .5rem 0 0; font-size: .875rem; line-height: 1.6; }
@media (max-width: 760px) {
  .blog-content .cmp-hero-grid,
  .blog-content .cmp-pair { grid-template-columns: minmax(0, 1fr); }
  .blog-content .cmp-reference .cmp-hero { padding: 1.2rem; }
  .blog-content .cmp-toc-grid { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .blog-content .cmp-toc a { margin-block: .4rem; }
}
@media (max-width: 640px) {
  .blog-content .cmp-reference > section { margin-block: 2rem; }
  .blog-content .cmp-reference table.cmp-table caption { display: block; width: 100%; padding: 0 0 .75rem; line-height: 1.6; }
  .blog-content .cmp-reference table.cmp-table th[scope="row"] { max-width: none; }
  .blog-content .cmp-reference table.cmp-table td,
  .blog-content .cmp-reference table.cmp-table th[scope="row"] { border-bottom: 0; padding: .35rem 0; }
  .blog-content .cmp-fields { grid-template-columns: minmax(0, 1fr); }
  .blog-content .cmp-actions > a.cmp-primary { width: 100%; }
}
html.dark .blog-content .cmp-reference { --cmp-ink: #f4f4f5; --cmp-muted: #c4c4cc; --cmp-line: #374151; --cmp-surface: #17202d; --cmp-blue: #93c5fd; }
html.dark .blog-content .cmp-reference :is(h2, h3, strong, b, td, th, summary) { color: var(--cmp-ink); }
html.dark .blog-content .cmp-reference :is(p, li) { color: var(--cmp-muted); }
html.dark .blog-content .cmp-reference .cmp-lead { color: var(--cmp-ink); }
html.dark .blog-content .cmp-reference .cmp-kicker { color: var(--cmp-blue); }
html.dark .blog-content .cmp-reference a:not(.cmp-primary) { color: #93c5fd; }
html.dark .blog-content .cmp-reference :not(pre) > code { background: #25344b; color: #e9b4f6; }
html.dark .blog-content .cmp-reference table.cmp-table { border-color: var(--cmp-line); }
html.dark .blog-content .cmp-reference table.cmp-table :is(td, th) { border-color: var(--cmp-line); }
html.dark .blog-content .cmp-reference table.cmp-table tbody tr:nth-child(even),
html.dark .blog-content .cmp-reference table.cmp-table tbody tr:hover { background: #17202d; }
html.dark .blog-content .cmp-reference .cmp-hero,
html.dark .blog-content .cmp-reference .cmp-next { background: linear-gradient(145deg, #152236, #101827); border-color: #3b5575; }
html.dark .blog-content .cmp-reference .cmp-conclusion,
html.dark .blog-content .cmp-reference .cmp-worked,
html.dark .blog-content .cmp-reference .cmp-calculator { background: #142338; border-color: #3b5575; }
html.dark .blog-content .cmp-snapshot,
html.dark .blog-content .cmp-provenance span { background: #111b2a; border-color: #3b5575; }
html.dark .blog-content .cmp-reference table.cmp-table thead th { background: #17243a; color: #f4f4f5; }
html.dark .blog-content .cmp-calculator input,
html.dark .blog-content .cmp-calculator select,
html.dark .blog-content .cmp-calculator textarea { background: #111b2a; color: #f4f4f5; border-color: #64748b; }
html.dark .blog-content .cmp-calculator output { color: #bfdbfe; }
@media (max-width: 640px) {
  html.dark .blog-content .cmp-reference table.seo-cards tr { background: #111b2a; border-color: #3b5575; }
  html.dark .blog-content .cmp-reference table.seo-cards td::before { color: #b8c6da; }
}