/* ════════════════════════════════════════════════════════
   FAQ — Частые вопросы
   Сетка = hero/fw-sticky-wrap: padding 16px → 28px
   Механика: CSS max-height + класс .is-open, иконка + → ×
   ════════════════════════════════════════════════════════ */

.faq-section {
  padding: 72px 16px;
}
@media (min-width: 768px)  { .faq-section { padding: 88px 28px;  } }
@media (min-width: 1024px) { .faq-section { padding: 108px 28px; } }

/* ── Шапка ── */
.faq-head {
  margin-bottom: 52px;
}
@media (min-width: 768px) { .faq-head { margin-bottom: 64px; } }

.faq-title {
  font-size: clamp(2.8rem, 7vw, 5.4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.0;
  color: var(--ink);
  margin: 0;
}
.faq-title span { color: var(--muted-2); }

/* ── Список вопросов ── */
.faq-list {
  border-top: 1px solid var(--line);
}

/* ── Один вопрос ── */
.faq-item {
  border-bottom: 1px solid var(--line);
}

/* Кнопка-вопрос */
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) { .faq-q { padding: 30px 0; } }

.faq-q-text {
  font-size: clamp(15px, 1.55vw, 17px);
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink);
  line-height: 1.4;
  transition: color 200ms ease;
}
.faq-item.is-open .faq-q-text { color: #000; }

/* Иконка: + → × через rotate(45deg) */
.faq-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  color: var(--muted);
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background 220ms ease,
              border-color 220ms ease,
              color 220ms ease;
  user-select: none;
}
.faq-item.is-open .faq-icon {
  transform: rotate(45deg);
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* Ответ: раскрытие через max-height */
.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.is-open .faq-a {
  max-height: 400px;
}

.faq-a-text {
  font-size: clamp(14px, 1.35vw, 15.5px);
  color: var(--muted);
  line-height: 1.78;
  letter-spacing: -0.008em;
  padding-bottom: 28px;
  max-width: 64ch;
}