/* Comparison pages: the two "Pick ... if" cards, the questions list and group intros. Tokens only. */
.cp-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.cp-pick { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-xl); border-radius: var(--radius-card); }
.cp-pick:last-child { border-color: var(--accent-ink); border-width: var(--border-selected); }
.cp-pick ul { display: grid; gap: var(--space-xs); margin: 0; padding-left: 1.25em; color: var(--ink-2); line-height: 1.6; }
.cp-pick li::marker { color: var(--accent-ink); }
.cp-intro { margin-top: var(--space-xs); color: var(--ink-2); }
.page-body > .tour { margin-top: var(--space-lg); }
.cp-faq { display: grid; gap: var(--space-xs); margin-top: var(--space-md); }
.cp-faq details { border: var(--card-border-width) solid var(--line); border-radius: var(--radius-control); background: var(--card-fill); }
.cp-faq summary { display: flex; align-items: center; min-height: var(--touch-min); padding: var(--space-xs) var(--space-lg); color: var(--ink); font-weight: 600; cursor: pointer; }
.cp-faq summary:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.cp-faq details p { padding: 0 var(--space-lg) var(--space-lg); color: var(--ink-2); }
.compare-table td, .compare-table th { overflow-wrap: anywhere; }
@media (max-width: 48rem) {
  .cp-picks { grid-template-columns: minmax(0, 1fr); }
  .cp-pick { padding: var(--space-lg); }
}