/* /loyalty-program — обычная (немедийная) страница: шапка hero-2026
   в варианте --no-media (как /svedeniya, /contacts), но в собственном
   фиолетовом цвете. Типографика и цвета — только через UI-kit
   (.text-h2/.text-body-*, токены --surface-card-soft, --gradient-primary).
   Кастомная page-секция «шаги» в духе contacts-grid: своего
   «steps»-компонента в ките нет. */

/* Hero background — та же капсульная сетка, что у /svedeniya
   (single SVG, масштабируется по брейкпоинтам внутри hero-2026). */
.page-loyalty-program .hero-2026 {
  --hero-bg-image: url("/images/contacts/v2/hero-bg.svg");
  --hero-bg-image-sm: url("/images/contacts/v2/hero-bg.svg");
  --hero-bg-image-lg: url("/images/contacts/v2/hero-bg.svg");
}

/* Hero gradient blob — фиолетовый → розовый (бренд-оттенки
   --gradient-primary). Отличает страницу от /contacts (зелёный→жёлтый),
   /index (маджента→оранж) и /business (синий→зелёный). Геометрия — как
   у /svedeniya/contacts. */
.page-loyalty-program .hero-2026-gradient {
  left: 35.76%;
  top: 18.71%;
  width: 84.03%;
  height: 87.14%;
  background: linear-gradient(71.76deg, #7359bf 20.38%, #e8639a 90.22%);
  opacity: 0.4;
  filter: blur(150px);
}

/* Верхний отступ компенсирует отсутствие margin-bottom у hero-2026
   (в отличие от articles-hero). Шкала — как у .contacts-section
   после hero-2026: 40 → 48@576 → 56@768 → 60@1024. */
.loyalty-steps {
  margin-top: 40px;
  margin-bottom: 56px;
}

@media (min-width: 576px) {
  .loyalty-steps {
    margin-top: 48px;
  }
}

@media (min-width: 768px) {
  .loyalty-steps {
    margin-top: 56px;
    margin-bottom: 64px;
  }
}

@media (min-width: 1024px) {
  .loyalty-steps {
    margin-top: 60px;
    margin-bottom: 80px;
  }
}

.loyalty-steps-head {
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (min-width: 768px) {
  .loyalty-steps-head {
    margin-bottom: 36px;
  }
}

@media (min-width: 1024px) {
  .loyalty-steps-head {
    margin-bottom: 44px;
  }
}

.loyalty-steps-lead {
  margin: 0;
}

.loyalty-steps-head h2 {
  margin: 0;
}

.loyalty-steps-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 840px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 1024px) {
  .loyalty-steps-list {
    gap: 16px;
  }
}

.loyalty-step {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--surface-card-soft, #f3f3f4);
  border-radius: 24px;
  padding: 20px;
}

@media (min-width: 768px) {
  .loyalty-step {
    gap: 20px;
    padding: 24px 28px;
  }
}

@media (min-width: 1024px) {
  .loyalty-step {
    gap: 24px;
    padding: 28px 32px;
  }
}

.loyalty-step-num {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: var(--brand-white, #fff);
  font-family: "Onest", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}

@media (min-width: 768px) {
  .loyalty-step-num {
    width: 52px;
    height: 52px;
    font-size: 22px;
  }
}

@media (min-width: 1024px) {
  .loyalty-step-num {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }
}

.loyalty-step-text {
  margin: 0;
}

.loyalty-step-path {
  font-weight: 600;
}

.loyalty-steps-note {
  margin: 28px auto 0;
  text-align: center;
}

@media (min-width: 768px) {
  .loyalty-steps-note {
    margin-top: 36px;
  }
}

.loyalty-steps-note a {
  font-weight: 500;
  text-decoration: underline;
}