/* ============================================================
   compare.css — сторінки порівняння з іншими системами
   Підключається лише на /business/porivniannia-altegio/.

   Наскрізний прийом — пара «ми / вони» у трьох масштабах:
   панель-дуель у хіро (.cmp-duel), рядки відмінностей (.cmp-vs),
   великі цифри в темній ціновій смузі (.cmp-price).
   Акцентний acid стоїть ЗАВЖДИ на нашому боці й ніколи на боці
   конкурента — інакше фірмовий колір працює на чужий бренд.

   Детальна таблиця повторно використовує .pr-table /
   .pr-compare__scroll із pricing.css, FAQ — .ff-faq із main.css.
   ============================================================ */

/* ============================================================
   СПІЛЬНІ ПРИЙОМИ — ті самі, що на сторінках під-ринків
   (submarket.css у гілці markets-beauty-barbershop): розщеплений
   заголовок секції, іконка-чип у картці, список із галочками.
   Коли та гілка вмерджиться — ці три блоки варто винести в один
   спільний файл, щоб не тримати дві копії.
   ============================================================ */

/* заголовок ліворуч (2/3) → підпис праворуч (1/3) */
.cmp-head--split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-4) var(--space-8);
  align-items: start;
  max-width: none;
}
.cmp-head--split > :first-child { margin: 0; }
.cmp-head--split > :last-child { margin: 0; padding-top: .3em; }
@media (max-width: 900px) {
  .cmp-head--split { grid-template-columns: 1fr; }
  .cmp-head--split > :last-child { padding-top: 0; }
}

/* іконка-чип — лише в картках і рядках, ніколи біля заголовка секції */
.cmp-ico {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--acid);
  color: var(--ink);
}
.cmp-ico--ink { background: var(--ink); color: var(--acid); }

/* список із галочками */
.cmp-checks {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cmp-checks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.cmp-checks li::before {
  content: "";
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1E21' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat,
    var(--acid);
}
/* нейтральні галочки — для колонки конкурента: та сама форма,
   але без фірмового акценту, щоб acid не працював на чужий бренд */
.cmp-checks--neutral li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B68' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat,
    var(--on-light-06);
}

/* ============================================================
   HERO — темна секція з атмосферними сяйвами (та сама мова, що
   й хіро головної). Сяйва тут не декор: acid тягнеться знизу
   ліворуч — з нашого боку, фіолетове згори праворуч — з боку
   конкурента, тож світло в кадрі повторює предмет сторінки.
   ============================================================ */
.cmp-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-dark-bg);
  padding-block: clamp(var(--space-8), 6vw, var(--space-12));
}
.cmp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 62% at 100% 0%, var(--pink-glow-strong) 0%, transparent 60%),
    radial-gradient(ellipse 58% 52% at 0% 100%, var(--acid-glow) 0%, transparent 60%),
    radial-gradient(ellipse 38% 34% at 6% 4%, var(--acid-glow-soft) 0%, transparent 56%);
}

.cmp-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(var(--space-6), 5vw, var(--space-10));
}

.cmp-hero__content { max-width: 34rem; }

.cmp-hero__media {
  justify-self: end;
  width: 100%;
  max-width: 560px;
}

.cmp-hero__title {
  position: relative;
  isolation: isolate;   /* щоб acid-плашка .highlight не провалювалась за фон */
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-on-dark);
  margin: 0 0 clamp(var(--space-4), 2vw, var(--space-5));
}

.cmp-hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--color-on-dark-muted);
  margin: 0 0 clamp(var(--space-6), 3vw, var(--space-8));
}

/* хлібні крихти й дата звірки — на темному */
.cmp-hero .breadcrumb__list,
.cmp-hero .breadcrumb__list > li:not(:last-child)::after,
.cmp-hero .breadcrumb a { color: var(--color-on-dark-muted); }
.cmp-hero .breadcrumb a:hover,
.cmp-hero .breadcrumb [aria-current="page"] { color: var(--color-on-dark); }

.cmp-asof {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-on-dark-muted);
}

/* Пара кнопок: спільний .cta-group — колонка з align-items:center,
   розрахована на «кнопка + тиха примітка», тож вирівнюємо ліворуч
   і розводимо відступом. Другорядна кнопка на темному — контурна:
   .btn--ghost зі світлою заливкою тут була б надто гучною. */
.cmp-hero .cta-group {
  align-items: flex-start;
  gap: var(--space-3);
}
.cmp-hero .btn--ghost {
  background: transparent;
  color: var(--color-on-dark);
  border-color: var(--on-dark-40);
}
.cmp-hero .btn--ghost:hover {
  background: var(--on-dark-08);
  border-color: var(--color-on-dark);
}

/* ---- Панель-дуель ---------------------------------------- */
.cmp-duel {
  position: relative;
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  background: var(--on-dark-06);
  border: 1px solid var(--on-dark-10);
  border-radius: var(--radius-lg);
}

/* вертикальна лінія поділу — по центру панелі */
.cmp-duel::before {
  content: "";
  position: absolute;
  top: clamp(var(--space-5), 3vw, var(--space-6));
  bottom: clamp(var(--space-5), 3vw, var(--space-6));
  left: 50%;
  width: 1px;
  background: var(--on-dark-10);
}

.cmp-duel__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(var(--space-5), 4vw, var(--space-8));
  padding-bottom: clamp(var(--space-4), 2.5vw, var(--space-5));
  border-bottom: 1px solid var(--on-dark-10);
}
.cmp-duel__row + .cmp-duel__row {
  padding-top: clamp(var(--space-4), 2.5vw, var(--space-5));
}
/* останній рядок закриває сама панель: без лінії й без власного нижнього
   відступу, щоб простір під ним дорівнював падінгу панелі, як і згори */
.cmp-duel__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* голови колонок */
.cmp-duel__brand {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-on-dark-muted);
}
.cmp-duel__brand--ours { color: var(--color-accent); }

/* ціна — фокус панелі */
.cmp-duel__crit {
  grid-column: 1 / -1;
  margin-bottom: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}

.cmp-duel__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-on-dark);
  font-variant-numeric: tabular-nums;
}
.cmp-duel__num--ours { color: var(--color-accent); }

.cmp-duel__unit {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-normal);
  color: var(--color-on-dark-muted);
}

.cmp-duel__val {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-on-dark-muted);
}
.cmp-duel__val--ours {
  font-weight: var(--fw-semibold);
  color: var(--color-on-dark);
}

/* ---- Секція відмінностей: рядки, а не картки ------------- */
.cmp-vs {
  background: var(--color-surface);
  padding-block: clamp(var(--space-10), 7vw, var(--space-16));
}

.cmp-vs__header {
  margin-bottom: clamp(var(--space-6), 4vw, var(--space-8));
}

.cmp-vs__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-wrap: balance;
}

.cmp-vs__sub {
  margin-top: var(--space-3);
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

/* без роздільних ліній: рядки розведено відступом, а структуру
   тримають іконки-чипи та акцентні лінії над значеннями */
.cmp-vs__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(var(--space-4), 3vw, var(--space-8));
  align-items: start;
}
.cmp-vs__row + .cmp-vs__row { margin-top: clamp(var(--space-8), 5vw, var(--space-10)); }

.cmp-vs__ico { margin-bottom: var(--space-4); }

.cmp-vs__rowtitle {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-text);
  text-wrap: balance;
}

.cmp-vs__body {
  margin-top: var(--space-2);
  max-width: 46ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

/* права частина рядка — темна плашка: контраст до білої секції,
   та сама мова, що й плашки в ціновій секції */
.cmp-vs__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-4), 2.5vw, var(--space-5));
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  background: var(--color-dark-bg);
  border-radius: var(--radius-lg);
  color: var(--color-on-dark);
}

.cmp-vs__side {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-3);
  border-top: 3px solid var(--color-on-dark-border);
}
.cmp-vs__side--ours { border-top-color: var(--color-accent); }

.cmp-vs__who {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}

.cmp-vs__what {
  margin-top: var(--space-2);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-on-dark-muted);
  font-variant-numeric: tabular-nums;
}
.cmp-vs__side--ours .cmp-vs__what {
  font-weight: var(--fw-semibold);
  color: var(--color-on-dark);
}

/* посилання на джерело всередині темної плашки */
/* одне зведене посилання на джерела під усім блоком замість повторів
   у кожному рядку */
.cmp-vs__sources {
  margin-top: clamp(var(--space-6), 4vw, var(--space-8));
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}
.cmp-vs__sources .cmp-src { margin-top: 0; }

/* ---- Цінова секція --------------------------------------
   Світле тло: тла чергуються від секції до секції (хіро темне,
   відмінності білі, CTA-смуга темна, ця — світло-сіра, таблиця біла).
   Наш бік позначено акцентною лінією згори, як у .cmp-vs, а не
   кольором цифр: acid як текст на світлому нечитабельний. */
.cmp-price {
  background: var(--color-surface-2);
  padding-block: clamp(var(--space-10), 7vw, var(--space-16));
}

.cmp-price__header {
  margin-bottom: clamp(var(--space-6), 4vw, var(--space-8));
}

.cmp-price__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-wrap: balance;
}

.cmp-price__sub {
  margin-top: var(--space-3);
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

.cmp-price__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(var(--space-5), 3vw, var(--space-6));
}

/* кейс — темна плашка на світлій секції; на темному наш бік знову
   позначаємо кольором цифри (acid читабельний), а не лише лінією */
.cmp-price__case {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  background: var(--color-dark-bg);
  border-radius: var(--radius-lg);
  color: var(--color-on-dark);
}

.cmp-price__case-label {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  color: var(--color-on-dark);
}

/* Пласка сітка 2×4 замість двох окремих стовпчиків: кожен рядок
   (бренд → число → одиниця → розрахунок) стоїть навпроти свого
   відповідника, тож лінія над розрахунком більше не скаче. */
.cmp-price__duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-4);
}

.cmp-price__who {
  padding-top: var(--space-3);
  border-top: 3px solid var(--color-on-dark-border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}
.cmp-price__who--ours { border-top-color: var(--color-accent); }

.cmp-price__num {
  align-self: end;
  margin-top: var(--space-2);
  font-family: var(--font-display);
  /* число не ламається: колонка всередині плашки вузька */
  white-space: nowrap;
  font-size: clamp(1.375rem, 2.6vw, 2.125rem);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-on-dark);
  font-variant-numeric: tabular-nums;
}
.cmp-price__num--ours { color: var(--color-accent); }

/* «За запитом» — не число, тож не має вдавати число */
.cmp-price__num--text { font-size: clamp(1.125rem, 1.8vw, 1.5rem); font-weight: var(--fw-bold); }

.cmp-price__unit {
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--color-on-dark-muted);
}

.cmp-price__calc {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-on-dark-border);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--color-on-dark-muted);
  font-variant-numeric: tabular-nums;
}

.cmp-price__foot {
  margin-top: clamp(var(--space-6), 4vw, var(--space-8));
  max-width: 68ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

/* ---- «Кому підійде кожен сервіс» -------------------------
   Дві рівні колонки: однакова структура й типографіка з обох
   боків, акцентна лінія лише над нашою. Тло світло-сіре —
   між білою таблицею та темною CTA-секцією. */
.cmp-fit {
  background: var(--color-surface-2);
  padding-block: clamp(var(--space-10), 7vw, var(--space-16));
}

.cmp-fit__header {
  margin-bottom: clamp(var(--space-6), 4vw, var(--space-8));
}

.cmp-fit__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-wrap: balance;
}

.cmp-fit__sub {
  margin-top: var(--space-3);
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

.cmp-fit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-5), 4vw, var(--space-8));
  /* картки тягнуться на висоту вищої: у колонках різна кількість
     пунктів, і при вирівнюванні по верху вони виглядали рваними */
  align-items: stretch;
}

/* колонка — картка (як .sm-pain на під-ринках), акцентна лише наша */
.cmp-fit__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.cmp-fit__col--ours { box-shadow: inset 0 3px 0 0 var(--color-accent); }

.cmp-fit__col-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-text);
  text-wrap: balance;
}

/* ============================================================
   ТЕМНА ЗОНА — CTA + тарифи під ОДНИМ тлом.
   Доки кожна секція мала власний градієнт, на стику лишався
   видимий шов: низ CTA згасав, а тарифи одразу починали свій
   градієнт із нуля. Тепер тло одне на обидві секції, самі секції
   прозорі — шву нема звідки взятися. Відсотки в градієнтах
   рахуються від усієї зони, тож пляма тягнеться крізь обидві.
   .pr-teaser тут перекривається лише на цій сторінці: compare.css
   підключений тільки тут і йде після pricing.css.
   ============================================================ */
.cmp-dark-zone {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 62% 26% at 100% 0%, rgba(131, 65, 193, .58) 0%, transparent 62%),
    radial-gradient(ellipse 50% 22% at 0% 7%, var(--acid-glow) 0%, transparent 64%),
    radial-gradient(ellipse 55% 20% at 95% 55%, rgba(187, 227, 11, .10) 0%, transparent 68%),
    radial-gradient(ellipse 40% 16% at 45% 100%, rgba(131, 65, 193, .16) 0%, transparent 70%),
    var(--color-dark-bg);
}
.cmp-dark-zone > section { background: transparent; }
/* власні сяйва секцій у зоні вимкнені — тло малює зона */
.cmp-dark-zone .cmp-join::before { content: none; }

/* ============================================================
   CTA-СЕКЦІЯ «спробувати» — універсальна, без прив'язки до
   конкретного конкурента, тож її можна переносити на наступні
   сторінки порівняння. Темне тло: стоїть перед темним блоком
   тарифів — на головній .ff і .pr-teaser так само йдуть двома
   темними поспіль, це нормальний ритм цього сайту.
   ============================================================ */
.cmp-join {
  position: relative;
  overflow: hidden;
  background: var(--color-dark-bg);
  padding-block: clamp(var(--space-10), 7vw, var(--space-16));
}
/* градієнт за рецептом фінальної CTA під-ринків: насичене фіолетове
   згори праворуч + acid знизу ліворуч */
.cmp-join::before {
  content: "";
  position: absolute;
  inset: 0 0 -1px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 95% at 100% 0%, rgba(131, 65, 193, .62) 0%, transparent 62%),
    radial-gradient(ellipse 55% 85% at 0% 18%, var(--acid-glow) 0%, transparent 64%);
}

.cmp-join__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(var(--space-6), 5vw, var(--space-10));
}

.cmp-join__content { max-width: 32rem; }

.cmp-join__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-on-dark);
  text-wrap: balance;
}

.cmp-join__sub {
  margin-top: var(--space-3);
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--color-on-dark-muted);
}

.cmp-join__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: clamp(var(--space-5), 3vw, var(--space-6));
}

.cmp-join__note {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--color-on-dark-muted);
}

.cmp-join__media {
  justify-self: end;
  width: 100%;
  max-width: 560px;
}

/* подача скріншота — як у хіро головної */
.cmp-join__shot {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45), 0 0 0 1px var(--on-dark-08);
}

/* ---- Блок тарифів на цій сторінці -------------------------
   Тут показуємо три тарифи замість чотирьох (картку Free знято),
   тож сітку з pricing.css, розраховану на чотири колонки, звужуємо
   до трьох — інакше лишалася б порожня четверта колонка.
   Діє лише тут: compare.css підключений тільки на цій сторінці. */
.pr-teaser .pr-plans__grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1200px) {
  .pr-teaser .pr-plans__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .pr-teaser .pr-plans__grid { grid-template-columns: 1fr; }
}

/* ---- Детальна таблиця ------------------------------------ */
.cmp-note {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

/* три рівні колонки: критерій і два сервіси. Правило лише на .cmp-table —
   таблиця тарифів має п'ять колонок і спільні стилі .pr-table. */
.cmp-table {
  min-width: 680px;
  table-layout: fixed;
}
.cmp-table th,
.cmp-table td { width: 33.333%; }
/* перебиваємо min-width:260px із pricing.css, інакше колонка критерію
   лишалася б ширшою за решту */
.cmp-table .pr-table__rowhead { min-width: 0; }
.cmp-table td { text-align: left; vertical-align: top; }
.cmp-table tbody td .pr-table__val { display: block; }

.cmp-disclaimer {
  margin-top: var(--space-5);
  max-width: 68ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

/* ---- Джерела та правове застереження --------------------- */
.cmp-sources {
  background: var(--color-surface);
  padding-block: clamp(var(--space-10), 7vw, var(--space-16));
}

.cmp-sources__inner { max-width: 820px; }

.cmp-sources__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.cmp-sources__lead {
  margin-top: var(--space-3);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

/* перелік джерел згорнутий: за замовчуванням видно лише застереження,
   а сам список доступний у розкритті — вміст лишається в HTML, тож
   вимога «для кожного твердження вказати джерело» виконана */
.cmp-sources__details {
  margin-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.cmp-sources__summary {
  padding-block: var(--space-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.cmp-sources__summary::-webkit-details-marker { display: none; }
.cmp-sources__summary::after {
  content: "+";
  float: right;
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}
.cmp-sources__details[open] .cmp-sources__summary::after { content: "–"; }
.cmp-sources__summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.cmp-sources__details[open] .cmp-sources__list { padding-bottom: var(--space-5); }

.cmp-sources__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: 0;
  padding: 0;
  list-style: none;
}

.cmp-sources__list li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}
.cmp-sources__list li:last-child { border-bottom: 0; padding-bottom: 0; }

.cmp-sources__what { flex: 1 1 22ch; color: var(--color-text); }

.cmp-sources__claims {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

.cmp-sources__list a,
.cmp-sources__legal a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.cmp-sources__list a:hover,
.cmp-sources__legal a:hover { color: var(--color-accent-2); }

.cmp-sources__legal {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

/* ---- Адаптив --------------------------------------------- */
@media (max-width: 860px) {
  .cmp-hero__inner { grid-template-columns: 1fr; }
  .cmp-fit__grid { grid-template-columns: 1fr; }
  .cmp-join__inner { grid-template-columns: 1fr; }
  .cmp-join__content { max-width: none; }
  .cmp-join__media { justify-self: center; max-width: 520px; }
  .cmp-hero__content { max-width: none; }
  .cmp-hero__media { justify-self: stretch; max-width: none; }
  .cmp-vs__row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .cmp-table { min-width: 560px; }
  /* пара «ми / вони» лишається у два стовпці навіть на вузькому —
     у зіставленні сенс саме в тому, що значення стоять поруч */
  .cmp-price__duo { gap: var(--space-3); }
}