/* Editorial comparison: inherits Snapperon's system type and brand palette.
   Prose stays at 65ch; only the comparison tables use the full article width.
   Native disclosure, anchor navigation and tables work without JavaScript. */
:root {
  --comparison-space-1: .25rem;
  --comparison-space-2: .5rem;
  --comparison-space-3: .75rem;
  --comparison-space-4: 1rem;
  --comparison-space-6: 1.5rem;
  --comparison-space-8: 2rem;
  --comparison-space-12: 3rem;
  --comparison-space-16: 4rem;
  --comparison-space-24: 6rem;
  --comparison-text-small: .875rem;
  --comparison-text-body: 1rem;
  --comparison-text-lead: 1.125rem;
  --comparison-text-heading: 1.75rem;
  --comparison-tint: #f1edf9;
  --comparison-tint-ink: #403258;
  --comparison-accent-hover: #5033ce;
  --comparison-accent-pressed: #4228b6;
  --comparison-radius: .75rem;
  --comparison-focus-width: 3px;
  --comparison-target: 2.75rem;
  --comparison-sidebar: 12rem;
  --comparison-measure: 65ch;
}

.comparison {
  padding-block: var(--comparison-space-16) var(--comparison-space-24);
  font-size: var(--comparison-text-body);
  line-height: 1.65;
  accent-color: var(--accent);
  caret-color: var(--accent);
  -webkit-tap-highlight-color: transparent;
}
.comparison ::selection { background: var(--comparison-tint); color: var(--comparison-tint-ink); }
.comparison :is(h1, h2, h3) { color: var(--ink); letter-spacing: -.025em; }
.comparison h1 { max-width: 28ch; font-size: clamp(2rem, 3.5vw + .5rem, 3.5rem); line-height: 1.08; font-weight: 650; }
.comparison h2 { font-size: var(--comparison-text-heading); line-height: 1.2; font-weight: 650; }
.comparison h3 { font-size: var(--comparison-text-lead); line-height: 1.4; font-weight: 650; }
.comparison p { max-width: var(--comparison-measure); color: var(--ink-secondary); }
.comparison strong { color: var(--ink); font-weight: 600; }
.comparison small { font-size: var(--comparison-text-small); }
.comparison a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; touch-action: manipulation; }
.comparison a:active { color: var(--comparison-accent-pressed); }
.comparison :is(a, summary, [tabindex]):focus-visible { outline: var(--comparison-focus-width) solid var(--accent); outline-offset: var(--comparison-space-1); }
.comparison :is(section, h2) { scroll-margin-top: var(--comparison-space-8); }

.comparison-hero { padding-bottom: var(--comparison-space-16); border-bottom: 1px solid var(--line); }
.comparison .comparison-intro { margin-top: var(--comparison-space-6); font-size: var(--comparison-text-lead); line-height: 1.65; }
.comparison a.comparison-download { display: inline-flex; align-items: center; justify-content: center; gap: var(--comparison-space-3); padding: var(--comparison-space-4) var(--comparison-space-6); min-height: var(--comparison-target); border-radius: var(--comparison-radius); background: var(--accent); color: var(--surface); text-decoration: none; line-height: 1.4; font-weight: 600; }
.comparison-download svg { flex: 0 0 auto; }
.comparison a.comparison-download:active { background: var(--comparison-accent-pressed); transform: scale(.98); }
.comparison .comparison-requirements { margin-top: var(--comparison-space-3); }

.comparison-layout { display: grid; grid-template-columns: var(--comparison-sidebar) minmax(0, 1fr); gap: var(--comparison-space-16); margin-top: var(--comparison-space-16); align-items: start; }
.comparison-sidebar { position: sticky; top: var(--comparison-space-8); }
.comparison-contents summary { min-height: var(--comparison-target); cursor: pointer; font-size: var(--comparison-text-small); font-weight: 600; color: var(--ink); }
.comparison-contents summary::marker { color: var(--muted); }
.comparison-contents summary:active { color: var(--accent); }
.comparison-contents nav { display: grid; gap: var(--comparison-space-1); }
.comparison-contents nav a { display: flex; align-items: center; min-height: var(--comparison-target); padding-block: var(--comparison-space-2); font-size: var(--comparison-text-small); line-height: 1.4; color: var(--ink-secondary); text-decoration: none; }
.comparison-contents nav a:active { color: var(--comparison-accent-pressed); }
.comparison-body { min-width: 0; }
.comparison-body > section + section { margin-top: var(--comparison-space-16); }
.comparison-body p, .comparison-body ul { margin-top: var(--comparison-space-6); }
.comparison-body ul { padding-left: var(--comparison-space-6); color: var(--ink-secondary); max-width: var(--comparison-measure); }
.comparison-body li + li { margin-top: var(--comparison-space-3); }
.comparison-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--comparison-space-8); margin-top: var(--comparison-space-6); }
.comparison-choices p { margin-top: 0; padding-top: var(--comparison-space-6); border-top: 1px solid var(--line); }
.comparison-choices strong { display: block; margin-bottom: var(--comparison-space-3); font-size: var(--comparison-text-lead); font-weight: 650; }
.comparison-strengths > p + p { margin-top: var(--comparison-space-8); }
.comparison-strengths > p > strong:first-child { display: block; margin-bottom: var(--comparison-space-2); font-size: var(--comparison-text-lead); font-weight: 650; }

.comparison .table-scroll { margin-top: var(--comparison-space-8); }
.comparison table { border-collapse: collapse; width: 100%; table-layout: fixed; line-height: 1.5; font-variant-numeric: tabular-nums; }
.comparison th, .comparison td { padding: var(--comparison-space-4); text-align: left; vertical-align: top; overflow-wrap: break-word; border-bottom: 1px solid var(--line); }
.comparison th { font-weight: 600; color: var(--ink); }
.comparison td { color: var(--ink-secondary); }
.comparison thead th { position: sticky; top: 0; z-index: 1; padding-block: var(--comparison-space-6); border-top: 1px solid var(--line); background: var(--canvas); font-size: var(--comparison-text-lead); }
.comparison thead th:first-child { width: 28%; font-size: var(--comparison-text-small); }
.comparison :is(th, td):nth-child(2) { background: var(--comparison-tint); color: var(--comparison-tint-ink); }
.comparison .mobile-product { display: none; }
.comparison .faq-answer { padding-block: var(--comparison-space-6); border-bottom: 1px solid var(--line); }
.comparison .faq-answer:first-of-type { margin-top: var(--comparison-space-2); }
.comparison .faq-answer p { margin-top: var(--comparison-space-3); }

.comparison .comparison-closing { padding: var(--comparison-space-8); border-radius: var(--comparison-radius); background: var(--comparison-tint); color: var(--comparison-tint-ink); }
.comparison-closing :is(h2, p, small) { color: var(--comparison-tint-ink); }
.comparison-closing h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.comparison-closing p { margin-top: var(--comparison-space-4); }
.comparison-closing .comparison-requirements { margin-top: var(--comparison-space-4); }
.comparison .comparison-note { margin-top: var(--comparison-space-8); line-height: 1.55; }

@media (hover: hover) and (pointer: fine) {
  .comparison a:hover { color: var(--comparison-accent-hover); text-decoration-thickness: 2px; }
  .comparison a.comparison-download:hover { color: var(--surface); background: var(--comparison-accent-hover); }
  .comparison-contents :is(summary, a):hover { color: var(--accent); }
}
@media (max-width: 1100px) {
  .comparison-layout { grid-template-columns: 10rem minmax(0, 1fr); gap: var(--comparison-space-8); }
}
@media (max-width: 900px) {
  .comparison-layout { grid-template-columns: minmax(0, 1fr); gap: var(--comparison-space-12); margin-top: var(--comparison-space-8); }
  .comparison-sidebar { position: static; }
  .comparison-contents { padding-bottom: var(--comparison-space-6); border-bottom: 1px solid var(--line); }
  .comparison-contents nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--comparison-space-1) var(--comparison-space-6); }
  .comparison-choices { gap: var(--comparison-space-6); }
  .comparison-body p { max-width: var(--comparison-measure); }
}
@media (max-width: 640px) {
  .comparison { padding-block: var(--comparison-space-8) var(--comparison-space-16); }
  .comparison-hero { padding-bottom: var(--comparison-space-8); }
  .comparison .comparison-intro { font-size: var(--comparison-text-body); }
  .comparison-download { width: 100%; }
  .comparison a.comparison-download { padding-inline: var(--comparison-space-4); font-size: var(--comparison-text-body); }
  .comparison-choices { grid-template-columns: minmax(0, 1fr); }
  .comparison-choices p { padding-top: var(--comparison-space-4); }
  .comparison-body > section + section { margin-top: var(--comparison-space-12); }
  .comparison-body p, .comparison-body ul { margin-top: var(--comparison-space-4); }
  .comparison-choices p { margin-top: 0; }
  .comparison .comparison-closing { padding: var(--comparison-space-6); }
  .comparison .table-scroll { overflow: visible; }
  .comparison table, .comparison tbody, .comparison tr { display: block; }
  .comparison thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .comparison tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); padding-block: var(--comparison-space-4); }
  .comparison :is(th, td) { border: 0; padding: var(--comparison-space-3); }
  .comparison tbody th { grid-column: 1 / -1; padding: 0 0 var(--comparison-space-3); }
  .comparison .mobile-product { display: block; margin-bottom: var(--comparison-space-2); font-size: var(--comparison-text-small); font-weight: 600; }
  body:has(.comparison) .site-header a { min-height: var(--comparison-target); display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .comparison a.comparison-download:active { transform: none; }
}
@media (forced-colors: active) {
  .comparison a.comparison-download { border: 1px solid ButtonText; }
}
@media print {
  .comparison { width: 100%; padding: 0; }
  .comparison-sidebar, .comparison-requirements, .comparison-closing { display: none; }
  .comparison-layout { display: block; margin-top: var(--comparison-space-8); }
  .comparison h1 { max-width: none; font-size: 2rem; }
  .comparison :is(h2, h3) { break-after: avoid; }
  .comparison tr { break-inside: avoid; }
  .comparison :is(th, td):nth-child(2) { background: transparent; color: var(--ink); }
}

/* Alternative-search landing pages. Existing editorial tokens remain shared. */
.comparison [hidden],.comparison-sticky[hidden] { display:none !important; }
.comparison-breadcrumb { display:flex; flex-wrap:wrap; gap:var(--comparison-space-3); align-items:center; font-size:var(--comparison-text-small); margin-bottom:var(--comparison-space-8); }
.comparison-hero-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; gap:var(--comparison-space-8); }
.comparison .comparison-hero h1 { max-width:25ch; font-size:clamp(2rem,3vw,2.75rem); line-height:1.12; }
.comparison .comparison-intro { margin-top:var(--comparison-space-6); font-size:var(--comparison-text-lead); }
.comparison-editor { margin:0; min-width:0; }
.comparison-editor img { width:100%; height:auto; object-fit:contain; }
.comparison-editor figcaption,.comparison-proof-images figcaption { margin-top:var(--comparison-space-3); color:var(--ink-secondary); font-size:var(--comparison-text-small); }
.comparison-pillars { display:flex; flex-wrap:wrap; gap:var(--comparison-space-2) var(--comparison-space-6); padding-left:var(--comparison-space-4); margin-block:var(--comparison-space-6) 0; color:var(--ink); font-size:var(--comparison-text-small); font-weight:600; }
.comparison .comparison-compatibility,.comparison .comparison-updated { font-size:var(--comparison-text-small); line-height:1.6; margin-top:var(--comparison-space-6); }
.comparison .comparison-updated { max-width:none; margin-top:var(--comparison-space-8); }
.comparison-cta { margin-top:var(--comparison-space-8); max-width:none; }
.comparison-cta-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--comparison-space-3) var(--comparison-space-6); }
.comparison-cta-actions > [data-other-cta] { width:100%; max-width:32rem; }
.comparison .comparison-secondary { display:inline-flex; align-items:center; min-height:var(--comparison-target); font-size:var(--comparison-text-small); }
.comparison .comparison-mac-notice { margin-top:0; font-size:var(--comparison-text-small); }
.comparison [data-email-form] { margin-top:var(--comparison-space-3); }
.comparison [data-email-form] label { display:block; margin-bottom:var(--comparison-space-2); font-size:var(--comparison-text-small); color:var(--ink); font-weight:600; }
.comparison-email-controls { display:flex; gap:var(--comparison-space-2); align-items:stretch; }
.comparison-email-controls input { width:100%; min-width:0; min-height:3rem; padding:var(--comparison-space-3); border:1px solid #837b92; border-radius:var(--comparison-radius); font:inherit; font-size:1rem; color:var(--ink); background:var(--surface); }
.comparison-email-controls button { flex-shrink:0; min-height:3rem; padding:var(--comparison-space-3) var(--comparison-space-4); border:0; border-radius:var(--comparison-radius); font:inherit; font-weight:600; color:var(--surface); background:var(--accent); }
.comparison-email-controls button:active { background:var(--comparison-accent-pressed); }
.comparison-email-controls button:disabled { opacity:.65; cursor:wait; }
.comparison .comparison-email-privacy { margin-top:var(--comparison-space-2); font-size:var(--comparison-text-small); }
.comparison :is(input,button):focus-visible { outline:var(--comparison-focus-width) solid var(--accent); outline-offset:var(--comparison-space-1); }
.comparison .cta-status { margin-top:var(--comparison-space-2); font-size:var(--comparison-text-small); }
.comparison .copy-link { min-height:var(--comparison-target); margin-top:var(--comparison-space-2); border:0; padding:var(--comparison-space-2) 0; background:transparent; font:inherit; font-size:var(--comparison-text-small); color:var(--accent); text-decoration:underline; text-underline-offset:.18em; }
.comparison .comparison-requirements { margin-top:var(--comparison-space-3); color:var(--ink-secondary); }
.comparison-proof-images { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--comparison-space-6); margin-top:var(--comparison-space-6); }
.comparison-proof-images figure { min-width:0; }
.comparison-proof-images img { width:100%; height:auto; border:1px solid var(--line); }
.comparison-action-counts { margin-top:var(--comparison-space-8); }
.comparison-action-counts dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--comparison-space-6); margin:var(--comparison-space-4) 0 0; }
.comparison-action-counts dl > div { border-top:1px solid var(--line); padding-top:var(--comparison-space-4); }
.comparison-action-counts dt { font-weight:600; }
.comparison-action-counts dd { margin:var(--comparison-space-2) 0 0; color:var(--ink-secondary); font-variant-numeric:tabular-nums; }
.comparison-action-counts dd strong { font-size:var(--comparison-text-heading); }
.comparison-testimonial { margin-top:var(--comparison-space-6); }
.comparison-testimonial blockquote { margin:0; max-width:45ch; font-size:var(--comparison-text-lead); color:var(--comparison-tint-ink); }
.comparison-testimonial figcaption { margin-top:var(--comparison-space-3); font-size:var(--comparison-text-small); color:var(--comparison-tint-ink); }
.comparison-related { display:grid; gap:var(--comparison-space-3); margin-top:var(--comparison-space-12); }
.comparison-related h2 { font-size:var(--comparison-text-lead); }
.comparison-related a { display:flex; align-items:center; min-height:var(--comparison-target); }
.comparison-sticky { position:fixed; z-index:30; inset:auto 0 0; padding:var(--comparison-space-3) 0 calc(var(--comparison-space-3) + env(safe-area-inset-bottom,0px)); background:var(--surface); border-top:1px solid var(--line); }
.comparison-sticky-inner { display:flex; justify-content:space-between; align-items:center; gap:var(--comparison-space-6); }
.comparison-sticky-inner > span { font-size:var(--comparison-text-small); font-weight:600; }
.comparison-sticky .comparison-download { display:inline-flex; align-items:center; justify-content:center; min-height:var(--comparison-target); border-radius:var(--comparison-radius); padding:var(--comparison-space-3) var(--comparison-space-6); background:var(--accent); color:var(--surface); font-size:var(--comparison-text-small); font-weight:600; }
.comparison-sticky .comparison-download:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.comparison-sticky .comparison-download:active { background:var(--comparison-accent-pressed); }
.comparison-sticky p { margin-top:var(--comparison-space-1); font-size:var(--comparison-text-small); }
html[data-platform="mac"] .comparison-sticky [data-other-cta],html[data-platform="non-mac"] .comparison-sticky [data-mac-cta] { display:none !important; }
.comparison-hub { max-width:52rem; }
.comparison-hub h1 { max-width:20ch; }
.comparison-hub-links { display:grid; gap:var(--comparison-space-8); margin-block:var(--comparison-space-12); }
.comparison-hub-links article { border-top:1px solid var(--line); padding-top:var(--comparison-space-6); }
.comparison-hub-links h2 { font-size:var(--comparison-text-heading); }
.comparison-hub-links p { margin-top:var(--comparison-space-3); }
@media (hover:hover) and (pointer:fine) { .comparison-email-controls button:hover:not(:disabled),.comparison-sticky .comparison-download:hover { background:var(--comparison-accent-hover); } }
@media (max-width:1000px) { .comparison-hero-grid { grid-template-columns:minmax(0,1fr); } .comparison-editor { width:min(100%,36rem); margin-inline:auto; } }
@media (max-width:640px) {
 .comparison-proof-images { grid-template-columns:minmax(0,1fr); }
 .comparison-email-controls { flex-direction:column; }
 .comparison-cta-actions,.comparison-cta-actions>[data-mac-cta] { width:100%; }
 .comparison-cta-actions { gap:var(--comparison-space-3); }
 .comparison .comparison-hero h1 { font-size:2rem; }
 .comparison-pillars { display:grid; gap:var(--comparison-space-2); }
 .comparison-sticky-inner > span { display:none; }
 .comparison-sticky-inner > div { width:100%; }
 .comparison-sticky .comparison-download { width:100%; }
 .comparison-sticky p { text-align:center; font-size:.75rem; }
 .comparison-breadcrumb { margin-bottom:var(--comparison-space-6); }
 .comparison-related h2 { font-size:var(--comparison-text-lead); }
}
@media print { .comparison-sticky,.comparison-cta { display:none !important; } .comparison-hero-grid { display:block; } .comparison-editor { max-width:20rem; } }

/* Keep long MCP comparison content readable with native horizontal scrolling. */
.comparison .table-scroll { overflow-x:auto; overscroll-behavior-inline:contain; }
@media (max-width:640px) {
  .comparison .table-scroll table { display:table; min-width:640px; }
  .comparison .table-scroll thead { display:table-header-group; position:static; width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal; }
  .comparison .table-scroll tbody { display:table-row-group; }
  .comparison .table-scroll tr { display:table-row; }
  .comparison .table-scroll :is(th,td) { display:table-cell; padding:16px; border-bottom:1px solid var(--line); }
  .comparison .table-scroll .mobile-product { display:none; }
}
.comparison-hub > section { margin-top:48px; }
.comparison-hub > section p { margin-top:20px; }