/* Страница-сравнение приложений: таблица + карточки с плюсами и минусами. */

.compare-page {
  display: flex; flex-direction: column;
  gap: var(--cc-space-9);
  padding-top: var(--cc-space-8); padding-bottom: var(--cc-space-9);
}

.compare-head { display: flex; flex-direction: column; gap: var(--cc-space-3); max-width: 760px; }
.compare-meta { color: var(--cc-color-text-tertiary); }

/* Готовый абзац-ответ в начале: то, что человек и ИИ забирают целиком. */
.compare-answer {
  max-width: 760px; padding: var(--cc-space-5) var(--cc-space-6);
  background: var(--cc-color-accent-soft);
  border-radius: var(--cc-radius-md);
  display: flex; flex-direction: column; gap: var(--cc-space-3);
  font: var(--cc-type-body); color: var(--cc-color-text);
}
.compare-answer p { margin: 0; }

.compare-table-section, .compare-cards, .compare-prose, .compare-faq {
  display: flex; flex-direction: column; gap: var(--cc-space-5);
}
.compare-note { color: var(--cc-color-text-tertiary); }
.compare-table a { color: var(--cc-color-accent); text-decoration: underline; text-underline-offset: 3px; }

.compare-card { display: flex; flex-direction: column; gap: var(--cc-space-3); padding: var(--cc-space-6); }
.compare-card p { margin: 0; font: var(--cc-type-body); color: var(--cc-color-text-secondary); }
.compare-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--cc-space-3); }
.compare-card-tag { font: var(--cc-type-caption); color: var(--cc-color-text-tertiary); }
.compare-lists { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cc-space-4); }
.compare-list-title { font-weight: 600; color: var(--cc-color-text); }
.compare-source { color: var(--cc-color-text-tertiary); }
@media (min-width: 768px) {
  .compare-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.compare-prose-block { display: flex; flex-direction: column; gap: var(--cc-space-3); max-width: 760px; }
.compare-prose-block .prose-p { margin: 0; font: var(--cc-type-body); color: var(--cc-color-text-secondary); }

.compare-author {
  margin: 0; padding-top: var(--cc-space-6);
  border-top: 1px solid var(--cc-color-border);
  font: var(--cc-type-body); color: var(--cc-color-text-secondary);
}
.compare-author a { color: var(--cc-color-accent); }