/* Shared landing/article comparison; keep one horizontally scrollable table. */
.comparison .table-wrap { border: 1px solid var(--line); border-radius: var(--surface-radius); overflow-x: auto; background: var(--panel); }
.comparison .table-wrap:focus-visible { outline: 3px solid var(--teal-action); outline-offset: 4px; }
.comparison table { width: 100%; min-width: 1040px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: var(--type-detail); line-height: 1.6; }
.comparison caption { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.comparison col:first-child { width: 170px; }
.comparison col { width: calc((100% - 170px) / 5); }
.comparison th, .comparison td { padding: var(--space-3) var(--space-2); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.comparison thead th { color: var(--navy); font-size: var(--type-detail); font-weight: 700; border-bottom: 1px solid var(--line); background: var(--panel); }
.comparison thead th span { display: block; margin-bottom: var(--space-1); color: var(--muted); font: 400 11px/1 var(--mono); }
.comparison tbody tr + tr > * { border-top: 1px solid var(--line); }
.comparison tr > * + * { border-left: 1px solid var(--line); }
.comparison tr > :first-child { position: sticky; left: 0; z-index: 1; border-right: 1px solid var(--line); }
.comparison tr > :nth-child(2) { border-left: 0; }
.comparison tbody th { color: var(--navy); font-size: var(--type-body); line-height: 1.4; background: var(--panel); }
.comparison tbody th small { display: block; margin-top: var(--space-1); color: var(--muted); font-size: var(--type-detail); font-weight: 400; line-height: 1.5; }
.comparison tbody td { color: var(--muted); }
.comparison .crest-row, .comparison .crest-row th { background: var(--cp-surface-muted); }
.comparison .crest-name { display: flex; align-items: center; gap: var(--space-1); font-size: var(--type-body); }
.comparison .crest-name img { width: 24px; height: 24px; object-fit: contain; }
.comparison .price { display: block; margin-bottom: var(--space-1); color: var(--navy); font-weight: 700; font-size: var(--type-body); line-height: 1.4; }
.comparison .mobile-label { display: none; }
.comparison .scroll-hint { display: none; margin: 0 0 var(--space-2); color: var(--muted); font-size: var(--type-detail); }
.comparison .fine-print { max-width: 960px; margin: var(--space-3) 0; color: var(--muted); font-size: var(--type-detail); line-height: 1.7; }
.comparison { min-width: 0; }
.comparison .scroll-hint { display: block; }
/* Compact landing table: fewer columns than the guide's full detail table. */
.comparison.comparison--compact table { min-width: 760px; }
.comparison.comparison--compact col:first-child { width: 170px; }
.comparison.comparison--compact col { width: calc((100% - 170px) / 4); }
.comparison .crest-row, .comparison .crest-row th { background: var(--panel-soft); }
.comparison-capability { display: block; white-space: nowrap; }
.comparison-capability > span { display: inline-block; margin-inline-end: var(--space-1, 8px); }
.capability-yes { color: var(--teal-strong); font-weight: 700; }
.capability-no { color: var(--cp-danger, #b42318); font-weight: 700; }

.comparison.comparison--compact tr > :nth-child(2) { background: var(--panel-soft); }

/* PBI-049: the landing "Compare the details" link keeps a >=24px target (WCAG 2.5.8) without changing the line box. */
.comparison > p > a { display: inline-block; }