/* landing.css — дополнения к дизайн-системе PM Culture для лендинга c-iwe.com.
   В styles.css нет таблиц и аккордеона — добавлены здесь на тех же токенах.
   styles.css не трогаем: он — точная копия с pmculture-site и обновляется заменой файла. */

/* На узких экранах слово «интеллектуальная» не помещается в h1 из clamp()
   дизайн-системы — уменьшаем кегль и разрешаем переносы (lang=ru в html). */
@media (max-width: 480px) {
  .hero h1 {
    font-size: clamp(26px, 9vw, 40px);
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* Подпись под hero-кнопками (hero центрирован — центрируем и её) */
.cta-note {
  margin: 14px auto 0;
  font-size: 15px;
  color: var(--navy-2);   /* navy-3 не проходит WCAG AA (3:1) для 15px */
  max-width: 520px;
}

/* ===== Сравнительная таблица ===== */
.cmp-wrap {
  overflow-x: auto;               /* на узких экранах таблица скроллится сама, страница — нет */
  margin-top: 28px;
  border: 1px solid var(--navy-line);
  border-radius: 14px;
}
.cmp {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 16px;
}
.cmp th, .cmp td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--navy-line);
}
.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td { border-bottom: none; }
.cmp thead th {
  background: var(--cream-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy-2);
}
.cmp tbody td:first-child {
  font-weight: 600;
  color: var(--navy-2);
  white-space: nowrap;
}
.cmp tbody td:nth-child(2) { color: var(--navy-2); }
.cmp tbody td:nth-child(3) { color: var(--navy); }

/* ===== FAQ-аккордеон ===== */
.faq-item {
  border: 1px solid var(--navy-line);
  border-radius: 14px;
  background: var(--cream);
  margin-top: 14px;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 48px 18px 20px;
  font-weight: 700;
  font-size: 17px;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--teal);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--teal); }
.faq-body {
  padding: 0 20px 18px;
  color: var(--navy-2);
}
.faq-body p { margin: 10px 0; }
.faq-body ol { margin: 10px 0; padding-left: 22px; }
.faq-body li { margin: 6px 0; }
.faq-body em { color: var(--navy-2); }
.faq-body code {
  background: var(--cream-2);
  border: 1px solid var(--navy-line);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 15px;
}
.faq-body img,
.faq-body video {
  width: 100%;
  max-width: 720px;
  border: 1px solid var(--navy-line);
  border-radius: 10px;
  margin-top: 6px;
}
.faq-body .note {
  font-size: 14px;
  color: var(--navy-2);
}