/* ==========================================================================
   Страница поддержки. Одно крупное действие сверху, вопросы ниже:
   человек пришёл с проблемой, и первое, что он должен увидеть, — куда писать.
   ========================================================================== */

.sup-hero { padding: 64px 20px 40px; text-align: center; }
.sup-hero h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  letter-spacing: -.03em;
  margin: 0 0 14px;
}
.sup-lede {
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.55;
  max-width: 52ch;
  margin: 0 auto 32px;
}

/* Кнопка в мессенджер — главный элемент страницы */
.sup-tg {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(100%, 460px);
  margin: 0 auto;
  padding: 20px 22px;
  background: var(--brand);
  color: #fff;
  border-radius: 18px;
  text-decoration: none;
  text-align: left;
  transition: transform .15s, background .15s;
}
.sup-tg:hover { background: var(--brand-2); transform: translateY(-2px); }
.sup-tg span { display: block; flex: 1; min-width: 0; }
.sup-tg b { display: block; font-size: 1.06rem; font-weight: 620; }
.sup-tg i { font-style: normal; font-size: .88rem; opacity: .75; }
.sup-arrow { flex: none !important; font-size: 1.2rem; opacity: .8; }

.sup-alt {
  margin: 20px auto 0;
  font-size: .9rem;
  color: var(--muted);
  max-width: 46ch;
}
.sup-alt a { color: var(--brand-2); }

/* ---------- частые вопросы ---------- */
.sup-faq { padding: 20px 20px 50px; max-width: 760px; }
.sup-faq h2 {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  letter-spacing: -.025em;
  margin: 0 0 20px;
  text-align: center;
}

.sup-foot {
  padding: 0 20px 70px;
  max-width: 620px;
  text-align: center;
}
.sup-foot p {
  font-size: .86rem;
  color: var(--muted-2);
  line-height: 1.55;
  border-top: 1px solid var(--line-soft);
  padding-top: 22px;
  margin: 0;
}

@media (max-width: 620px) {
  .sup-hero { padding: 36px 14px 28px; }
  .sup-tg { padding: 17px 18px; gap: 13px; }
  .sup-faq { padding: 12px 14px 40px; }
}