/* ===================================================
   Стили страницы "Участие" (participation.html)
   =================================================== */

/* ===========================
   ХЛЕБНЫЕ КРОШКИ (BREADCRUMBS) - МИНИМАЛЬНЫЕ СТИЛИ ДЛЯ ОБЕСПЕЧЕНИЯ РАБОТЫ
   =========================== */
.breadcrumbs__link {
  color: #1e2a4b !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  font-weight: 600 !important;
}

.breadcrumbs__link:hover {
  color: #F70518 !important;
}

/* ===========================
   ИСПРАВЛЕНИЕ НАВИГАЦИИ ДЛЯ ДИАПАЗОНА 768-1023px
   =========================== */


/* ===========================
   ОСНОВНЫЕ ПЕРЕМЕННЫЕ
   =========================== */
:root {
  --primary-red: #F70518;
  --text-blue: #1e2a4b;
  --text-gray: #B4B4B4;
  --grid-gap: 1.25em;
}

/* ===========================
   БАЗОВАЯ СТРУКТУРА GRID
   =========================== */
/* Используем глобальные стили контейнера из main.css */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  width: 100%;
}

.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }
.span-12 { grid-column: span 12; }

/* ===========================
   HEADER ПРОСТРАНСТВО
   =========================== */
.participation-main {
  margin-top: 0;
  padding-top: 0;
}

/* ===========================
   ЗАГОЛОВОК СТРАНИЦЫ
   =========================== */
.participation-headline {
  margin-bottom: 3em;
}

.participation-headline__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(6rem, 8vw, 10rem);
  font-weight: 900;
  line-height: 0.9;
  color: var(--text-gray);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* ===========================
   ПОДЗАГОЛОВОК С КЛЮЧЕВЫМИ ВЫГОДАМИ
   =========================== */
.participation-subtitle {
  margin-bottom: 2em;
}

.participation-subtitle__text {
  font-family: 'Inter', sans-serif;
  font-size: clamp(3rem, 3.3vw, 3.5rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--primary-red);
  margin: 0;
}

.participation-benefits-title {
  margin-bottom: 5.5em;
}

.participation-benefits-title__text {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2rem, 2.6vw, 2.7rem);
  font-weight: 600;
  color: #000;
  margin: 0;
}

/* ===========================
   ЛИНИЯ НА УРОВНЕ ЗАГОЛОВКА "КЛЮЧЕВЫЕ ВЫГОДЫ"
   =========================== */
.participation-benefits-title {
  margin-bottom: 5.5em;
  position: relative;
}

.participation-benefits-title .grid-12 {
  position: relative;
}

.participation-benefits-title .grid-12::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 32%;
  right: 0;
  transform: translateY(-50%);
  height: 1px;
  background-color: #E6E6E6;
  z-index: 0;
}

.participation-benefits-title__text {
  padding: 0;
  position: relative;
  z-index: 1;
}

/* ===========================
   КАРТОЧКИ ВЫГОД
   =========================== */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2em;
  margin-bottom: 4em;
}

.benefit-card {
  background: transparent;
  padding: 0;
  padding-bottom: 4em;
  text-align: left;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Контейнеры для обычного и развернутого состояния */
.benefit-content,
.benefit-expanded {
  transition: all 0.3s ease;
}

/* Обычное состояние - показываем только benefit-content */
.benefit-expanded {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  background: white;
  padding: 2em;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  z-index: 10;
  border: 1px solid rgba(247, 5, 24, 0.1);
}

/* При наведении показываем развернутое состояние */
.benefit-card:hover .benefit-content {
  opacity: 0;
  visibility: hidden;
}

.benefit-card:hover .benefit-expanded {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Скрываем кнопку "Подробнее" при наведении */
.benefit-card:hover .benefit-more {
  opacity: 0;
  visibility: hidden;
}

/* Стили для полного текста */
.benefit-text-full {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, 1.1vw, 1.3em);
  line-height: 1.5;
  color: var(--text-blue);
  margin: 0;
  max-width: 100%;
}

.benefit-icon-group {
  display: flex;
  align-items: center;
  justify-content: left;
  margin-bottom: 1.5em;
  height: 4em;
}

.benefit-icon-group img {
  height: 100%;
  width: auto;
}

/* Увеличиваем венки на 30% */
.benefit-icon-group img:first-child,
.benefit-icon-group img:last-child {
  transform: scale(1.3);
}

.benefit-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.8em;
  font-weight: 700;
  color: #f70518;
  margin: 0 0 clamp(0.5rem, 0.7vh, 1rem) 0;
  line-height: 1.3;
  max-width: 80%;
}

.benefit-text {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.3rem);
  line-height: 1.5;
  color: var(--text-blue);
  margin: 0 0 1.5em 0;
  max-width: 80%;
}

.benefit-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'Inter', sans-serif;
  font-size: 1em;
  font-weight: 500;
  color: var(--primary-red);
  text-decoration: none;
  transition: all 0.3s ease;
}

.benefit-more:hover {
  color: #d40414;
}

/* Стрелка как на главной странице - справа от текста */
.benefit-more {
  position: relative;
}

.benefit-more::after {
  content: '';
  position: absolute;
  right: -3em;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75em;
  height: 0.75em;
}

.benefit-more::before {
  content: '';
  position: absolute;
  right: -3em;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75em;
  height: 2px;
  background: var(--primary-red);
}

.benefit-more::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0.625em;
  height: 0.625em;
  border-right: 2px solid var(--primary-red);
  border-top: 2px solid var(--primary-red);
  transform: translateY(-50%) rotate(45deg);
}

/* ===========================
   КРИТЕРИИ ОТБОРА
   =========================== */
.criteria-section {
  margin-top: 4em;
  margin-bottom: 4em;
}

.criteria-headline {
  margin-bottom: 5em;
}

.criteria-headline__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(6rem, 8vw, 10rem);
  font-weight: 900;
  line-height: 0.9;
  color: var(--text-gray);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.criteria-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1em;
}

.criteria-card {
  background: transparent;
  padding: clamp(1rem, 1.2vw, 1.5em) clamp(0.3rem, 0.6vw, 1rem);
  text-align: center;
  border-radius: 0.5em;
  transition: background-color 0.3s ease;
  min-height: clamp(20rem, 23vw, 24rem); /* Увеличение высоты на ~10% */
  display: flex;
  flex-direction: column;
}

.criteria-card:hover {
  background: rgba(247, 5, 24, 0.05);
}

.criteria-icon-group {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1em;
  height: 3em;
}

.criteria-icon-group img {
  height: 100%;
  width: auto;
}

/* Увеличиваем венки на 30% для критериев */
.criteria-icon-group img:first-child,
.criteria-icon-group img:last-child {
  transform: scale(1.3);
}

.criteria-text {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.7rem, 0.9vw, 0.9rem);
  line-height: 1.4;
  color: #000;
  margin: 0 0 auto 0; /* auto для прижатия заголовка к низу */
  text-align: center;
  flex: 1; /* Занимает доступное пространство */
}

.criteria-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.7rem, 0.9vw, 1em);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary-red);
  margin: 0;
  text-align: center;
  letter-spacing: 0.05em;
  margin-top: auto; /* Прижимает к низу карточки */
}

/* ===========================
   АДАПТИВНОСТЬ
   =========================== */
@media (max-width: 1024px) {
  
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
}

@media (max-width: 767px) {

  
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 1.5em;
  }
  
  .criteria-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  
 
}

@media (max-width: 480px) {

  
  .criteria-grid {
    grid-template-columns: 1fr;
  }
  

}

/* ===========================
   КНОПКА УЧАСТИЯ
   =========================== */
.participation-cta {
  margin: 6em 0;
  text-align: center;
}

.participation-cta__content {
  display: flex;
  justify-content: center;
}

/* ===========================
   ЭТАПЫ ВСТУПЛЕНИЯ
   =========================== */
.steps-section {
  margin: 6em 0;
}

.steps-headline {
  margin-bottom: 4em;
}

.steps-headline__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(7rem, 8vw, 10rem);
  font-weight: 900;
  line-height: 0.9;
  color: var(--text-gray);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.steps-container {
  position: relative;
}

.steps-list {
  display: flex;
  flex-direction: column;
  gap: 3em;
  position: relative;
}

/* Новая структура этапов */
.step-item {
  position: relative;
  display: flex;
  margin-bottom: 2em;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.step-item.active {
  opacity: 1;
}

/* Левая часть: название этапа */
.step-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2rem, 2.3vw, 2.5rem);
  font-weight: 600;
  color: #000;
  margin: 0;
  cursor: pointer;
  text-align: left;
  padding-right: 2em;
  width: 24.67%; /* 2 колонки из 12 */
  position: absolute;
  top: 30%; /* 30% от высоты описания */
  transform: translateY(-50%);
  z-index: 3;
}

/* Средняя часть: кружок */
.step-circle-container {
  position: absolute;
  left: 20%; /* После 2 колонок */
  top: 30%; /* 30% от высоты */
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 10;
}

.step-circle {
  width: 2.625em; /* 42px - круг №2 (внешний) */
  height: 2.625em;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10; /* Выше линии */
}

.step-item.active .step-circle {
  background: rgba(247, 5, 24, 0.15); /* Круг №2 появляется только у активного */
}

.step-circle-inner {
  width: 0.84375em; /* 13.5px - круг №1 (внутренний) */
  height: 0.84375em;
  border-radius: 50%;
  background: var(--primary-red);
  z-index: 10; /* Выше линии */
}

/* Правая часть: описание - объединенный блок */
.step-content {
  margin-left: 25%; /* Отступ от кружка */
  width: 75%; /* 9 колонок из 12 */
  position: relative;
}

/* Объединенный блок описания - фон только у активного */
.step-basic-info {
  background: transparent; /* Прозрачный фон по умолчанию */
  padding: 2em;
  border-radius: 0.75em;
  position: relative;
  min-height: 8em; /* Минимальная высота для позиционирования */
  transition: background-color 0.3s ease; /* Плавная анимация фона */
}

/* Фон появляется только у активного этапа */
.step-item.active .step-basic-info {
  background: #edeeee;
}

/* Треугольник слева от описания - только у активного */
.step-basic-info::before {
  content: '';
  position: absolute;
  left: -0.75em;
  top: 30%; /* На уровне центра круга №1 */
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 0.75em solid transparent;
  border-bottom: 0.75em solid transparent;
  border-right: 0.75em solid transparent; /* Прозрачный по умолчанию */
  z-index: 1;
  transition: border-right-color 0.3s ease; /* Плавная анимация цвета */
}

/* Треугольник становится видимым только у активного этапа */
.step-item.active .step-basic-info::before {
  border-right-color: #edeeee;
}

.step-basic-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.7em;
  font-weight: 700;
  color: var(--primary-red);
  margin: 0 0 0.5em 0;
  padding: 0 0 0 0.8em;
  max-width: 69%;
}

.step-basic-text {
  font-family: 'Inter', sans-serif;
  font-size: 1.4em;
  line-height: 1.5;
  color: #000;
  padding: 0 0 0 1em;
  max-width: 90%;
}

.step-expanded {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding-top: 1em;
}

.step-item.active .step-expanded {
  max-height: 50em;
}

/* Динамическая вертикальная пунктирная линия между кружками */
.step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(19.98% + 1.3125em); /* Точный центр кружка (20% + радиус внутреннего круга) */
  top: calc(29% + 1.3125em); /* От центра кружка + радиус (чтобы линия начиналась от центра) */
  width: 2px;
  height: var(--line-height, 2em); /* Динамическая высота через CSS-переменную */
  background: linear-gradient(to bottom, #CCCCCC 50%, transparent 50%);
  background-size: 2px 10px;
  z-index: 0; /* Под всеми кружками и фоном */
}



.step-details {
  border: 1px solid rgba(247, 5, 24, 0.2);
  border-radius: 0.75em;
  padding: 1em 1.5em 1em 1.5em;
  background: transparent; /* Убираем красную заливку, оставляем только границу */
}

.step-details-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.2em;
  font-weight: 600;
  color: #000;
  margin: 0 0 0.2em 0;
}

.step-details-list {
  list-style: none;
  padding-left: 0.5em;
  margin: 0 0 2em 0;
}

.step-details-list li {
  font-family: 'Inter', sans-serif;
  font-size: 1em;
  line-height: 1.4;
  color: #000;
  margin: 0 0 0.5em 0;
  position: relative;
  padding-left: 1em;
}

.step-details-list li::before {
  content: '•';
  color: #000000;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.5em; /* Увеличиваем размер точки */
  font-weight: bold; /* Делаем точку жирнее */
  line-height: 1; /* Выравниваем по вертикали */
}

.step-details-description {
  font-family: 'Inter', sans-serif;
  margin: 0; 
  font-size: 1em; 
  line-height: 1.4;
}

/* ===========================
   НОВЫЙ ПРОМО-БЛОК
   =========================== */
.participation-promo {
  margin: 6em 0;
  position: relative;
}

/* Разделительные линии */
.promo-divider {
  height: 1px;
  background-color: var(--text-gray);
  width: 100%;
  margin: 3em 0;
}

.promo-divider--top {
  margin-bottom: 4em;
}

.promo-divider--bottom {
  margin-top: 4em;
}

/* Контент промо-блока */
.promo-content {
  position: relative;
  z-index: 2;
  padding-right: 2em;
}

.promo-title, .promo-title-step {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2rem, 2.3vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--primary-red);
  margin: 1em 0 1.5em 0;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  /* Позволяем тексту выходить за границы и накладываться на картинку */
  position: relative;
  z-index: 3;
  min-width: 136%;
}

.promo-text {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.2rem, 1.4vw, 1.5rem);
  line-height: 1.5;
  color: var(--text-blue);
  margin: 0 0 2.5em 0;
  min-width: 103%;
}

.promo-button {
  background: #d9001b !important;
  color: #ffffff !important;
  border: 0.125em solid #d9001b !important;
  border-radius: 0.3em !important;
  padding: 1em clamp(2rem, 3vw, 6em) !important;
  font-size: 1em !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
  cursor: pointer !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  position: absolute;
  left: 0;
  bottom: 2rem;
}

.participation-promo .container .grid-12 .span-5 {
  display: flex;
}

.promo-button:hover {
  background: #ffffff !important;
  color: #d9001b !important;
  transform: translateY(-0.125em) !important;
}

/* Картинка */
.promo-image {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.promo-image__img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* Адаптивность для промо-блока */
@media (max-width: 1024px) {
  .promo-title {
    font-size: 2.5em;
  }
   
}

@media (max-width: 767px) {
  .participation-promo .grid-12 {
    grid-template-columns: 1fr;
  }
  
  .participation-promo .span-6,
  .participation-promo .span-7 {
    grid-column: span 12;
  }
  
  .promo-title {
    font-size: 2em;
  }
  
  .promo-text {
    font-size: 1.1em;
  }
  
  .promo-content {
    padding-right: 0;
    margin-bottom: 2em;
  }
}

/* ===========================
   БЛОК СРАВНЕНИЯ ЧЛЕНСТВА
   =========================== */
.participation-comparison {
  margin: 6em 0;
  position: relative;
}

.comparison-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(3rem, 4vw, 5rem);
  font-weight: 900;
  line-height: 0.9;
  color: var(--text-gray);
  margin: 0 0 0.5em 0;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.comparison-text {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.1rem, 1.3vw, 1.7rem);
  line-height: 1.6;
  color: var(--text-blue);
  margin: 0 0 2em 0;
  /* Позволяем тексту выходить за границы */
  min-width: 121%;
}

.comparison-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2rem, 2.5vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--primary-red);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  min-width: 21em;
}

/* Адаптивность для блока сравнения */
@media (max-width: 1024px) {

  
  
  .comparison-subtitle {
    font-size: 2em;
  }
}

@media (max-width: 767px) {

  
  .participation-comparison .span-10,
  .participation-comparison .span-6,
  .participation-comparison .span-7 {
    grid-column: span 12;
  }
}

/* ===========================
   ТАБЛИЦА СРАВНЕНИЯ
   =========================== */
.comparison-table-section {
  margin: 6em 0;
}

/* Глобальное скрытие элементов карусели (показываются только в 768-1023px) */
.carousel-nav,
.carousel-indicators,
.carousel-indicator {
  display: none !important;
}

/* Убираем общую рамку таблицы, теперь каждый блок отдельно */

/* Заголовки таблицы */
.comparison-table__header {
  display: flex;
  gap: 1.7em; /* Отступы между заголовками */
  margin-bottom: 2em; /* Увеличиваем отступ между заголовками и данными */
  border: none; /* Убираем все границы у заголовков */
}

.comparison-table__cell--header {
  flex: 1;
  padding: clamp(2rem, 2.3vw, 2.5rem) 1em 1em 1em;
  text-align: center;
  color: #fff;
  font-weight: 700;
  border-radius: 0.6em; /* Скругленные углы для заголовков */
  border: none; /* Убираем все границы у ячеек заголовков */
}

.comparison-table__cell--header h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.5em;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  color: #fff; /* Явно указываем белый цвет текста */
}

/* Цвета заголовков */
.comparison-table__cell--criteria {
  background: var(--text-gray);
}

.comparison-table__cell--membership {
  background: var(--primary-red);
}

.comparison-table__cell--outsourcing {
  background: var(--text-gray);
  max-width: 32%;
  padding: 1.5em 1em 1em 1em;

}

/* Контейнер для горизонтального расположения блоков */
.comparison-table__blocks-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  width: 100%;
}

/* Группы строк с данными - вертикальные блоки в горизонтальном расположении */
.comparison-table__group {
  border: 1px solid #E6E6E6;
  border-radius: 0.5em;
  overflow: hidden;
  box-shadow: 0 0.125em 0.5em rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column; /* Вертикальное расположение строк внутри блока */
  height: 100%; /* Одинаковая высота для всех блоков */
}

.h1 {
  font-weight: bold;
}

/* Строки с данными - прижаты друг к другу внутри группы */
.comparison-table__row {
  display: flex;
  border: none;
  border-radius: 0;
  margin: 0; /* Убираем все отступы между строками */
  overflow: hidden;
  box-shadow: none; /* Убираем тени */
  flex: 1; /* Каждая строка занимает равное пространство */
  min-height: 0; /* Позволяет flex-элементам сжиматься */
}

/* Первая строка в группе - скругленные углы сверху */
.comparison-table__group .comparison-table__row:first-child {
  border-radius: 0.5em 0.5em 0 0;
}

/* Последняя строка в группе - скругленные углы снизу */
.comparison-table__group .comparison-table__row:last-child {
  border-radius: 0 0 0.5em 0.5em;
  margin-bottom: 0;
}

/* Убираем нижнюю границу у всех строк кроме последней в группе */
.comparison-table__group .comparison-table__row:not(:last-child) {
  border-bottom: 1px solid #E6E6E6;
  margin-bottom: 0; /* Убираем отступы между строками внутри группы */
}

/* Чередование цветов фона */
.comparison-table__row:nth-child(odd) .comparison-table__cell {
  background: #fff;
}

.comparison-table__row:nth-child(even) .comparison-table__cell {
  background: #F5F5F5;
}

/* Ячейки */
.comparison-table__cell {
  flex: 1;
  padding: clamp(0.5rem, 1.2vw, 2rem) clamp(2rem, 2.5vw, 3rem);
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.5rem, 1vw, 2rem);
  line-height: 1.5;
  color: #000;
  text-align: center;
  vertical-align: middle;
  border-right: none; /* Убираем границы между ячейками, так как теперь одна ячейка в строке */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4em;
  height: 100%; /* Занимает всю доступную высоту строки */
}

.comparison-table__cell:last-child {
  border-right: none;
}

/* Иконки для пунктов */
.checkmark {
  color: #28a745;
  font-weight: bold;
  margin-right: 0.2em;
  font-size: 1em;
}

.cross {
  color: var(--primary-red);
  font-weight: bold;
  margin-right: 0.5em;
  font-size: 1.2em;
}

/* Адаптивность для таблицы сравнения */
@media (max-width: 1024px) {

  
}

@media (max-width: 767px) {
  .comparison-table {
    display: block;
  }
  
  .comparison-table__header {
    display: flex;
    flex-direction: column;
    gap: 1.7em;
  }
  
  .comparison-table__blocks-container {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
  }
  
  .comparison-table__group {
    display: flex;
    flex-direction: column;
  }
  
  .comparison-table__row {
    display: flex;
    flex-direction: column;
  }
  
  .comparison-table__cell--header,
  .comparison-table__cell {
    display: block;
    border-right: none;
    border-bottom: 1px solid #E6E6E6;
    text-align: left;
    padding: 1em;
    min-height: auto;
  }
  
  .comparison-table__cell--header:last-child,
  .comparison-table__cell:last-child {
    border-bottom: none;
  }
  
  .comparison-table__cell--header h3 {
    font-size: 1.2em;
  }
  
  .comparison-table__cell {
    font-size: 0.85em;
  }
}

/* ===========================
   СКРЫТИЕ СТАРОГО КОНТЕНТА
   =========================== */
.participation-intro,
.participation-benefits:not(.new-benefits),
.participation-criteria:not(.new-criteria),
.participation-steps,
.participation-compare {
  display: none !important;
}

/* ===========================
   БЛОК "ПОЧЕМУ СТОИТ ВЫБРАТЬ ЧЛЕНСТВО В КПТМ?"
   =========================== */
.membership-benefits-section {
  margin: 6em 0;
  position: relative;
}

/* Разделительные линии */
.membership-divider {
  height: 1px;
  background-color: var(--text-gray);
  width: 100%;
  margin: 3em 0;
}

.membership-divider--top {
  margin-bottom: 4em;
}

.membership-divider--bottom {
  margin-top: 4em;
}

/* Заголовок */
.membership-benefits-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2rem, 2.5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--primary-red);
  margin-bottom: clamp(1rem, 1.5vw, 2rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  min-width: 110%;
}

/* Список преимуществ */
.membership-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.membership-benefit-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 2em;
}

.membership-benefit-item:last-child {
  margin-bottom: 0;
}

/* Заголовок с иконкой и подзаголовком */
.benefit-header {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 0.5em;
}

/* Зеленая галочка */
.benefit-checkmark {
  color: #28a745;
  font-size: 1.5em;
  font-weight: bold;
  flex-shrink: 0;
}

/* Подзаголовок */
.benefit-header strong {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.6rem, 1.7vw, 1.8rem);
  font-weight: 700;
  color: #000;
  line-height: 1.3;
}

/* Контент преимущества */
.benefit-content {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, 1vw, 1.1em);
  line-height: 1.6;
  color: var(--text-blue);
  margin: 0;
}


@media (min-width: 1280px) and (max-width: 1439px) {
  .participation-headline__title{font-size: clamp(6rem, 7vw, 9rem)}
  .participation-subtitle__text {font-size: clamp(2rem, 2.5vw, 3rem);}
  .participation-benefits-title__text {font-size: clamp(1.8rem, 2.3vw, 2.5rem);}
  .benefit-icon-group {height: clamp(2.4rem, 2.7vw, 3rem);}
  .benefit-title {font-size: clamp(1.2rem, 1.5vw, 1.8rem); }
  .benefit-text {font-size: clamp(0.9rem, 1.1vw, 1.2rem);}
  .benefit-more {font-size: clamp(0.8rem, 0.9vw, 1rem);}
  .criteria-section {margin-top: clamp(2rem, 3vw, 3rem); margin-bottom: clamp(2rem, 3vw, 3rem);}
  .benefits-grid {margin-bottom: 0;}
  .benefit-card {padding-bottom: 2em;}
  .criteria-icon-group {height: clamp(2.4rem, 2.7vw, 3rem);}
  .criteria-card {min-height: clamp(18rem, 21vw, 23rem);}
  .steps-section {margin: 4rem 0;}
  .steps-headline__title {font-size: clamp(6rem, 7vw, 9rem);}
  .step-title {font-size: clamp(1.6rem, 2vw, 2.3rem);}
  .step-basic-title {font-size: clamp(1.4rem, 1.6vw, 1.7rem);}
  .step-basic-text {font-size: clamp(1.1rem, 1.2vw, 1.4rem);}
  .step-details-title {font-size: clamp(1rem, 1.1vw, 1.2rem);}
  .step-details-list li {font-size: clamp(0.8rem, 0.9vw, 1rem);}
  .step-details-description {font-size: clamp(0.8rem, 1.1vw, 1.3rem);}
  .promo-title {font-size: clamp(1.8rem, 2vw, 2.3rem); margin: 1rem 0 1rem 0;}
  .promo-title-step {font-size: clamp(1.6rem, 2.18vw, 2.3rem); }
  .promo-text {font-size: clamp(0.9rem, 1.1vw, 1.4rem); }
  .promo-button {padding: 0.5rem clamp(1rem, 1.5vw, 3rem) !important; font-size: clamp(0.8rem, 0.9vw, 1rem) !important; bottom: 1rem;}
  .participation-promo {margin: clamp(2rem, 3vw, 5rem) 0;}
  .participation-comparison {margin: clamp(2rem, 3vw, 5rem) 0;}
  .comparison-title {font-size: clamp(3rem, 3.3vw, 3.8rem);}
  .comparison-text {font-size: clamp(1rem, 1.2vw, 1.6rem);}
  .comparison-subtitle {font-size: clamp(2.1rem, 2.3vw, 2.7rem);}
  .comparison-table-section {margin: 3rem 0;}
  .comparison-table__cell--header h3 {font-size: clamp(1rem, 1.2vw, 1.5rem);}
  .comparison-table__cell--header {padding: clamp(1.8rem, 2.1vw, 2.3rem) 0.8rem 0.8rem 0.8rem;}
  .comparison-table__cell {font-size: clamp(0.7rem, 0.9vw, 1.4rem); padding: clamp(0.3rem, 1vw, 1.8rem) clamp(2rem, 2.5vw, 3rem);}
  .comparison-table__header {gap: 1.35rem;}
  .membership-benefits-section {margin: clamp(2rem, 3vw, 5rem) 0;}
  .membership-benefits-title {font-size: clamp(2.2rem, 2.5vw, 3rem); }
  .benefit-content {font-size: clamp(1rem, 1.2vw, 1.3rem);}
 
  

}

@media (min-width: 1024px) and (max-width: 1279px) {
  .participation-headline__title, .criteria-headline__title {font-size: clamp(6rem, 7vw, 8rem);}
  .participation-subtitle__text {font-size: clamp(2.1rem, 3.3vw, 3.5rem);}
  .participation-benefits-title__text {font-size: clamp(1.8rem, 2.5vw, 2.8rem);}
  .benefits-grid {margin-bottom: 0;}
  .participation-headline__title, .criteria-headline__title {font-size: clamp(6rem, 7vw, 8rem);}
  .criteria-headline {margin-bottom: 3em;}
  .criteria-grid {grid-template-columns: repeat(5, 1fr);}
  .criteria-title {font-size: clamp(0.6rem, 0.9vw, 1em);}
  .steps-section {margin: 3em 0;}
  .step-basic-title {font-size: clamp(1.5rem, 2vw, 2.3rem);}
  .step-basic-text {font-size: clamp(1rem, 1.4vw, 1.6rem);}
  .step-details-title {font-size: clamp(1rem, 1.2vw, 1.4rem);}
  .step-details-list li {font-size: clamp(0.9rem, 1.2vw, 1.4rem);}
  .step-details-description {font-size: clamp(0.9rem, 1.2vw, 1.4rem);}
  .step-basic-title {max-width: 80%;}
  .promo-title, .promo-title-step {font-size: clamp(1.8rem, 2.6vw, 2.8rem); min-width: 155%; margin: 1em 0 0.5em 0;}
  .promo-button {bottom: 1rem; padding: 0.5rem clamp(1rem, 2.5vw, 4rem) !important; font-size: clamp(0.8rem, 1vw, 1.2rem) !important;}
  .participation-promo {margin: 2rem 0;}
  .comparison-title {font-size: clamp(2.5rem, 4.5vw, 5rem); min-width: 110%;}
  .comparison-text {font-size: clamp(1.1rem, 1.4vw, 1.7rem); min-width: 145%; margin: 0 0 1rem 0}
  .comparison-table-section {margin: 3em 0;}
  .comparison-table__header {margin-bottom: 1rem;}
  .comparison-table__cell--header h3 {font-size: clamp(1rem, 1.2vw, 1.5rem); align-content: center;}
  .comparison-table__header {display: flex; justify-content: center; height: 9vh;}
  .comparison-table__cell--criteria {display: flex; justify-content: center;}
  .comparison-table__cell--header {padding: 0;}
  .checkmark {font-size: 1rem;}
  .comparison-table__cell--membership {display: flex; justify-content: center;}
  .comparison-table__cell--outsourcing {display: flex; justify-content: center;}
  .criteria-text {font-size: clamp(0.67rem, 0.7vw, 1rem);}
  .step-title {font-size: clamp(1.5rem, 2vw, 2.3rem);}
  .promo-text {font-size: clamp(0.9rem, 1vw, 1.2rem) !important;}
  .participation-comparison {margin: 3em 0;}
  .comparison-table__header {gap: 1.2rem;}
  .membership-benefits-title {font-size: clamp(2.3rem, 2.5vw, 3rem);}
  .benefit-header strong {font-size: clamp(1.4rem, 1.6vw, 1.7rem);}
  .benefit-content {font-size: clamp(0.9rem, 1vw, 1.1em);}
  .membership-benefits-section {margin: 3em 0;}
  .promo-title, .promo-title-step {font-size: clamp(1.8rem, 2.9vw, 3rem);}
  .comparison-table__cell {font-size: clamp(0.68rem, 1vw, 2rem);}

}

@media (min-width: 768px) and (max-width: 1023px) {
  .participation-headline__title,
  .criteria-headline__title {
    font-size: clamp(4rem, 9vw, 10rem);
  }
  .participation-subtitle__text {
    font-size: clamp(1.75rem, 2vw, 3rem);
  }
  .header .header__nav-wrapper {
    justify-content: center !important; /* Переопределяем start из main.css */
    grid-column: span 7 !important; /* Восстанавливаем исходное значение из HTML span-8 */
  }
  .participation-benefits-title__text {
    font-size: clamp(1.4rem, 2.2vw, 2.8rem);
  }
  .steps-headline__title {
    font-size: clamp(4rem, 9vw, 10rem);
  }
  .step-basic-text {
    font-size: clamp(1.2rem, 1.3vw, 1.4rem);
  }
  .step-basic-title {
    font-size: clamp(1.5rem, 1.3vw, 1.7rem);
    max-width: 87%;
  }
  .step-title {
    font-size: clamp(1.2rem, 2.3vw, 2.5rem);
  }
  
  /* ============================================================================
     КРИТЕРИИ ОТБОРА - LAYOUT ДЛЯ ДИАПАЗОНА 768-1023px
     2 карточки в ряд вместо 5
     ============================================================================ */
  
  .criteria-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
    justify-items: center !important;
  }
  
  .criteria-card {
    max-width: 300px !important; /* Ограничиваем ширину карточек */
    width: 100% !important;
  }
  
  /* ============================================================================
     АККОРДИОН ДЛЯ КАРТОЧЕК ВЫГОД (768-1023px)
     Убираем hover, добавляем клик, показываем только полное описание
     ============================================================================ */
  
  /* Отключаем hover-эффекты - делаем их нейтральными для JavaScript */
  /* Базовые hover-эффекты будут переопределены ниже через :not(.active) */
  
  /* Принудительно отключаем базовые hover-эффекты только в этом диапазоне */
  .benefit-card:not(.active):hover .benefit-content {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  .benefit-card:not(.active):hover .benefit-expanded {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
  }
  
  /* Состояние по умолчанию - показываем обычное содержимое */
  .benefit-card .benefit-content {
    opacity: 1;
    visibility: visible;
  }
  
  .benefit-card .benefit-expanded {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    background: transparent;
    pointer-events: none;
  }
  
  /* Активное состояние (раскрытый аккордион) */
  .benefit-card.active .benefit-content {
    opacity: 0;
    visibility: hidden;
  }
  
  .benefit-card.active .benefit-expanded {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  
  /* В раскрытом состоянии скрываем иконку и заголовок, показываем только текст */
  .benefit-card.active .benefit-expanded .benefit-icon-group,
  .benefit-card.active .benefit-expanded .benefit-title {
    display: none !important;
  }
  
  .benefit-card.active .benefit-expanded .benefit-text-full {
    margin-top: 0 !important;
    font-size: clamp(1rem, 1.2vw, 1.3rem);
    line-height: 1.5;
  }
  
  /* Курсор для кликабельных карточек */
  .benefit-card {
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .benefit-card:hover {
    transform: translateY(-2px);
  }
  
  /* ============================================================================
     БЛОК "ПРИСОЕДИНЯЙТЕСЬ К БУДУЩЕМУ МАШИНОСТРОЕНИЯ" (768-1023px)
     Вертикальный layout: Заголовок → Текст → Изображение → Кнопка
     ============================================================================ */
  
  /* Отключаем grid, используем flexbox */
  .participation-promo .grid-12 {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    grid-template-columns: none !important;
    align-items: center !important;
  }
  
  /* Контейнеры span - правильный порядок */
  .participation-promo .span-5 {
    order: 1 !important; /* Заголовок и текст первыми */
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .participation-promo .span-7 {
    order: 2 !important; /* Изображение вторым */
    width: 100% !important;
    max-width: 600px !important;
    display: flex !important;
    justify-content: center !important;
  }
  
  /* Контент промо-блока - только заголовок и текст */
  .participation-promo .promo-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding-right: 0 !important;
    gap: 1.5rem !important;
    width: 100% !important;
  }
  
  /* Заголовок */
  .participation-promo .promo-title,
  .participation-promo .promo-title-step {
    font-size: clamp(2.2rem, 2.8vw, 3.2rem) !important;
    margin: 0 !important;
    width: 100% !important;
    white-space: normal;
    min-width: 100%;
  }
  
  /* Текст */
  .participation-promo .promo-text {
    font-size: clamp(1.1rem, 1.4vw, 1.6rem) !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 80% !important;
  }
  
  /* Кнопка - исключаем из promo-content и позиционируем после изображения */
  .participation-promo .promo-button {
    position: absolute !important;
    top: auto !important;
    bottom: -300% !important; /* Под всем блоком */
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 1rem 2rem !important;
    font-size: clamp(1rem, 1.2vw, 1.3rem) !important;
    width: auto !important;
    max-width: 300px !important;
    z-index: 10 !important;
    /* Исключаем из flex-flow родителя */
  }

  #openConsortiumModal2 {
    bottom: -400% !important;
  }
  
  /* Grid-12 использует flexbox для правильного порядка */
  .participation-promo .grid-12 {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    align-items: center !important;
    position: relative !important;
    padding-bottom: 6rem !important; /* Место для абсолютно позиционированной кнопки */
  }
  
  /* Контейнер promo-content не содержит кнопку в flex-flow */
  .participation-promo .promo-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1.5rem !important;
    width: 100% !important;
    /* Кнопка не участвует в этом flex-контейнере */
  }
  
  /* Убираем кнопку из flex-flow promo-content */
  /* Кнопка теперь позиционируется абсолютно относительно grid-12 */
  
  /* Изображение */
  .participation-promo .promo-image {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  
  .participation-promo .promo-image__img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Корректировка отступов блока */
  .participation-promo {
    margin: clamp(3rem, 4vw, 5rem) 0 !important;
    padding: 2rem 0 !important;
  }
  .steps-section {
    margin: 0;
  }
  .participation-comparison {
    margin: 0;
  }
  .comparison-title {
    font-size: clamp(2.8rem, 5.5vw, 7rem);
    white-space: nowrap;
  }
  .comparison-text {
    min-width: 200%;
  }
  .membership-benefits-title {
    font-size: clamp(2.2rem, 2.8vw, 3.2rem) !important;
  }
  .benefit-header strong {
    font-size: clamp(1.4rem, 1.7vw, 1.8rem);
  }
  /* ============================================================================
     КАРУСЕЛЬ ТАБЛИЦЫ СРАВНЕНИЯ (768-1023px)
     Показывает один столбец (70% ширины) с навигацией стрелками
     ============================================================================ */
  
  /* Контейнер карусели */
  .comparison-table-section {
    position: relative !important;
    overflow: hidden !important;
    padding: 2rem 0 !important;
    margin: 2em 0 !important;
  }
  
  /* Заголовки - показываем только активный */
  .comparison-table__header {
    display: flex !important;
    justify-content: center !important;
    width: 70% !important;
    max-width: 600px !important;
    margin: 0 auto 2rem auto !important;
    gap: 0 !important;
    position: relative !important;
  }
  
  .comparison-table__cell--header {
    display: none !important; /* Скрываем все заголовки по умолчанию */
    width: 100% !important;
    text-align: center !important;
  }
  
  .comparison-table__cell--header.active {
    display: block !important; /* Показываем только активный заголовок */
  }
  
  /* Контейнер данных - показываем только одну группу на позицию */
  .comparison-table__blocks-container {
    display: flex !important;
    width: 100% !important; /* Контейнер занимает всю ширину */
    gap: 2rem !important;
    grid-template-columns: none !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }
  
  /* Группы данных - базовые стили */
  .comparison-table__group {
    width: 70% !important; /* 70% от viewport */
    max-width: 600px !important;
    flex-shrink: 0 !important;
    display: none !important; /* Скрыты по умолчанию */
    flex-direction: column !important;
    margin: 0 auto !important;
  }
  
  /* Внутренние строки занимают всю ширину группы */
  .comparison-table__group .comparison-table__row {
    width: 100% !important;
    margin: 0 !important;
  }
  
  /* ============================================================================
     ПОЗИЦИИ КАРУСЕЛИ: ОДИН СТОЛБЕЦ НА ПОЗИЦИЮ
     
     ГРУППА 1: Критерии (названия критериев)
     ГРУППА 2: Ответы для "Членство в КПТМ" (✅ ответы)
     ГРУППА 3: Ответы для "Разовое партнерство" (❌ ответы)
     ============================================================================ */
  
  /* ПОЗИЦИЯ 0 (КРИТЕРИЙ): Показываем только названия критериев */
  .comparison-table__blocks-container.position-0 .comparison-table__group:nth-child(1) {
    display: flex !important;
    width: 70% !important; /* Одна группа - занимает 70% */
  }
  
  /* ПОЗИЦИЯ 1 (ЧЛЕНСТВО): Показываем только ответы для членства */
  .comparison-table__blocks-container.position-1 .comparison-table__group:nth-child(2) {
    display: flex !important;
    width: 70% !important; /* Одна группа - занимает 70% */
  }
  
  /* ПОЗИЦИЯ 2 (ПАРТНЕРСТВО): Показываем только ответы для партнерства */
  .comparison-table__blocks-container.position-2 .comparison-table__group:nth-child(3) {
    display: flex !important;
    width: 70% !important; /* Одна группа - занимает 70% */
  }
  
  /* Стрелки навигации - показываем в этом диапазоне */
  .carousel-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: var(--primary-red) !important;
    color: white !important;
    border: none !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
    z-index: 10 !important;
    transition: all 0.3s ease !important;
    display: flex !important; /* Показываем в диапазоне 768-1023px */
    align-items: center !important;
    justify-content: center !important;
  }
  
  .carousel-nav:hover {
    background: #d40414 !important;
    transform: translateY(-50%) scale(1.1) !important;
  }
  
  .carousel-nav:disabled {
    background: #ccc !important;
    cursor: not-allowed !important;
    transform: translateY(-50%) !important;
  }
  
  .carousel-nav--prev {
    left: 5% !important;
  }
  
  .carousel-nav--next {
    right: 5% !important;
  }
  
  /* Индикаторы текущей позиции */
  .carousel-indicators {
    display: flex !important;
    justify-content: center !important;
    gap: 1rem !important;
    margin-top: 2rem !important;
  }
  
  .carousel-indicator {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #ccc !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
    display: block !important; /* Показываем в диапазоне 768-1023px */
  }
  
  .carousel-indicator.active {
    background: var(--primary-red) !important;
  }
  .comparison-table__cell {
    font-size: clamp(1rem, 1.2vw, 2rem);
  }
  .comparison-table__cell--membership {
    min-width: 100%;
  }
  .comparison-table__cell--outsourcing {
    max-width: 100%;
  }
  .membership-benefits-section {
    margin: 2em 0;
  }
  
}

@media (min-width: 576px) and (max-width: 767px) { 
  .participation-headline__title {
    font-size: clamp(3.5rem, 10vw, 12rem);
  }
  .participation-headline {
    margin-bottom: 2em;
  }
  .participation-subtitle__text {
    font-size: clamp(1.8rem, 3.3vw, 3.5rem);
  }
  .participation-subtitle .container .grid-12 .span-8 {
    grid-column: span 12;
  }
  .participation-benefits-title__text {
    font-size: clamp(1.5rem, 2.6vw, 2.7rem);
  }
  .participation-benefits-title .container .grid-12 .span-4 {
    grid-column: span 7;}
    .benefit-icon-group {
      justify-content: center;
    }
    .benefit-icon-group {
      margin: 0 auto 0.5em;
    }
    .benefit-text {
      margin: 0 auto 1em;
      font-size: clamp(1.2rem, 2.7vw, 4rem);
    }
    .header__cta-wrapper.span-2, .header__cta-wrapper.span-3 {
      grid-column: span 10 !important;
    }
    .benefit-title {
      margin: 0 auto 0.5em;
     }
     .benefit-card {
      text-align: center;
     }
     .criteria-headline__title {
      font-size: clamp(4.5rem, 12vw, 14rem);
     }
     .criteria-headline {
      margin: 2em;
     }
     .steps-headline__title {
      font-size: clamp(2.5rem, 12vw, 13rem);
     }
     .comparison-title {
      font-size: clamp(2rem, 10vw, 13rem);
     }
     .comparison-text {
      font-size: clamp(0.8rem, 3vw, 4rem);
     }
     .comparison-subtitle {
      font-size: clamp(1rem, 4.5vw, 6rem);
     }
     .membership-benefits-title {
      font-size: clamp(1rem, 4.5vw, 6rem);
     }
     .membership-divider--top {
      margin-bottom: 2em;
     }
     .benefit-header {
      gap: 0.5em;
     }
     .benefit-header strong {
      font-size: clamp(1rem, 3vw, 6rem);
     }
     .benefit-content {
      font-size: clamp(0.8rem, 2.5vw, 6rem);
     }
     .participation-comparison {
      margin: 2em 0;
     }
     .membership-divider--bottom {
      margin: 2em;
     }
     .membership-divider {
      margin: 2em;
     }
     .participation-promo {
      margin: 0;
     }

}





@media (max-width: 767px) {
  .membership-benefits-section .grid-12 {
    grid-template-columns: 1fr;
  }
  
  /* Адаптивность для карточек выгод */
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 1.5em;
  }
  
  .benefit-card {
    padding-bottom: 2em;
  }
  
  /* На мобильных устройствах показываем развернутое состояние по клику */
  .benefit-expanded {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    padding: 0;
    box-shadow: none;
    margin-top: 1em;
    display: none;
  }
  
  .benefit-card:hover .benefit-content {
    opacity: 1;
    visibility: visible;
  }
  
  .benefit-card:hover .benefit-expanded {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  
  /* Показываем развернутое состояние при активном состоянии */
  .benefit-card.active .benefit-expanded {
    display: block;
  }
  
  .benefit-card.active .benefit-more {
    display: none;
  }
}
  
  .membership-benefits-section .span-5,
  .membership-benefits-section .span-10 {
    grid-column: span 12;
  }
  

  
  .membership-benefit-item {
    margin-bottom: 1.5em;
  }
  
  /* АДАПТИВНЫЙ МАКЕТ ДЛЯ PROMO СЕКЦИЙ: ВЕРТИКАЛЬНОЕ РАСПОЛОЖЕНИЕ */
  .promo-content .grid-12 {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  .promo-content .span-5,
  .promo-content .span-7 {
    grid-column: span 12 !important;
    width: 100% !important;
    order: 0 !important;
  }
  
  .promo-content .span-7 {
    order: 1 !important;
  }
  
  .promo-content .span-5 {
    order: 2 !important;
  }
  
  .promo-content .promo-button {
    order: 3 !important;
    width: 70% !important;
    margin-top: 20px !important;
  }
  
  .promo-image {
    text-align: center !important;
    margin-bottom: 20px !important;
  }
  
  .promo-image__img {
    max-width: 100% !important;
    height: auto !important;
  }

  @media (min-width: 320px) and (max-width: 575px) {
    .participation-headline__title {
      font-size: clamp(1rem, 10vw, 12rem);
    }
    .participation-headline {
      margin-bottom: 2em;
    }
    .participation-subtitle__text {
      font-size: clamp(1rem, 5vw, 7rem);
    }
    .participation-subtitle .container .grid-12 .span-8 {
      grid-column: span 12;
    }
    .participation-benefits-title__text {
      font-size: clamp(1rem, 3.5vw, 3rem);
    }
    .participation-benefits-title .container .grid-12 .span-4 {
      grid-column: span 7;
    }
    .breadcrumbs {
      margin: 2em 0 0 0 !important;
    }
    .breadcrumbs-grid {
      margin: 3rem auto 0;
      padding: 0 10px !important;
    }
    .header--white ~ main {
      padding-top: 0 !important;
    }
    .participation-benefits-title {
      margin-bottom: 3em;
    }
    .benefit-icon-group, .criteria-icon-group {
      height: 3em;
      justify-content: center;
     }
     .benefit-card {
      text-align: center;
     }
     .benefit-title {
      font-size: clamp(1rem, 5vw, 6rem);
      margin: 0 auto 0.5em;
     }
     .benefit-text {
      font-size: clamp(0.8rem, 3.6vw, 5rem);
      margin: 0 auto 1em;
     }
     .benefit-more {
      font-size: clamp(0.8rem, 3vw, 4rem);
     }
     .criteria-headline__title {
      font-size: clamp(3rem, 12vw, 13rem);
     }
     .criteria-headline {
      margin: 2em 0;
     }
     .participation-comparison {
      margin: 2em 0;
     }
     .steps-headline__title {
      font-size: clamp(2.5rem, 12vw, 13rem);
     }
     .comparison-title {
      font-size: clamp(2rem, 10vw, 13rem);
     }
     .comparison-text {
      font-size: clamp(0.8rem, 3vw, 4rem);
     }
     .comparison-subtitle {
      font-size: clamp(1rem, 4.5vw, 6rem);
     }
     .membership-benefits-title {
      font-size: clamp(1.2rem, 4.5vw, 6rem);
     }
     .membership-divider--top {
      margin-bottom: 2em;
     }
     .benefit-header strong {
      font-size: clamp(1rem, 3vw, 6rem);
     }
     .benefit-header {
      gap: 0.5em;
     }
     .benefit-content {
      font-size: clamp(0.8rem, 2.5vw, 6rem);
     }
     .membership-divider--bottom {
      margin: 2em;
     }
     .membership-divider {
      margin: 2em;
     }
     .participation-promo {
      margin: 0;
     }
     .promo-button {
      left: 50%;
      transform: translateX(-50%);
      bottom: 2%;
      padding: 0.5em !important;
      font-size: clamp(0.8rem, 0.9vw, 1rem) !important;
     }
     .promo-content .promo-button {
      width: 70% !important;
     }
     .promo-content {
      position: inherit;
     }
     .participation-promo .container .grid-12 .span-5 {
      grid-column: span 11;
  
     }
     .promo-title, .promo-title-step {
      min-width: 100%;
      font-size: clamp(1.4rem, 2.3vw, 3rem);
      margin: 0 0 0.5em 0;
     }
     .promo-text {
      margin: 0;
     }
     .promo-content {
      margin-bottom: 0;
     }
     .membership-benefits-section {
      margin: 0;
     }
     .promo-image__img {
      margin-bottom: 4em;
     }
     .promo-divider--bottom {
      margin: 0;
     }
     .comparison-text {
      min-width: 100%;
      margin: 0;
     }
     .comparison-table__cell--outsourcing {
      max-width: 100%;
     }
     
     /* АДАПТИВНЫЙ МАКЕТ ДЛЯ ЭТАПОВ: ПОСТРОЧНОЕ ОТОБРАЖЕНИЕ */
     .step-item {
       display: flex !important;
       flex-direction: column !important;
       align-items: flex-start !important;
       margin-bottom: 1.5em !important;
       opacity: 1 !important;
       padding: 1em !important;
       border: 1px solid #e0e0e0 !important;
       border-radius: 8px !important;
       background: #fff !important;
       cursor: pointer !important;
       transition: all 0.3s ease !important;
     }
     
     .step-item:hover {
       border-color: var(--primary-red) !important;
       box-shadow: 0 2px 8px rgba(217, 0, 27, 0.1) !important;
     }
     
     .step-item.active {
       border-color: var(--primary-red) !important;
       background: #fef7f7 !important;
       box-shadow: 0 4px 12px rgba(217, 0, 27, 0.15) !important;
     }
     
     .step-title {
       font-size: clamp(1.2rem, 4vw, 1.8rem) !important;
       margin: 0 0 0.5em 0 !important;
       color: #999 !important;
       font-weight: 600 !important;
     }
     
     .step-basic-title {
       font-size: clamp(1rem, 3.5vw, 1.4rem) !important;
       margin: 0 0 0.5em 0 !important;
       color: #999 !important;
       font-weight: 500 !important;
     }
     
     /* Нормальные цвета для активных карточек */
     .step-item.active .step-title {
       color: #000 !important;
     }
     
     .step-item.active .step-basic-title {
       color: var(--primary-red) !important;
     }
     
     .step-basic-text {
       font-size: clamp(0.9rem, 3vw, 1.1rem) !important;
       margin: 0 0 1em 0 !important;
       color: #666 !important;
       line-height: 1.5 !important;
     }
     
     .step-expanded {
       display: none !important;
       margin-top: 1em !important;
       padding-top: 1em !important;
       border-top: 1px solid #e0e0e0 !important;
     }
     
     .step-item.active .step-expanded {
       display: block !important;
     }
     
     .step-expanded h5 {
       font-size: clamp(0.9rem, 2.8vw, 1.1rem) !important;
       margin: 0 0 0.5em 0 !important;
       color: var(--primary-red) !important;
       font-weight: 600 !important;
     }
     
     .step-expanded p {
       font-size: clamp(0.8rem, 2.5vw, 1rem) !important;
       margin: 0 0 0.8em 0 !important;
       color: #555 !important;
       line-height: 1.5 !important;
     }
     
     .step-expanded ul {
       margin: 0 0 0.8em 0 !important;
       padding-left: 1.2em !important;
     }
     
     .step-expanded li {
       font-size: clamp(0.8rem, 2.5vw, 1rem) !important;
       margin: 0 0 0.3em 0 !important;
       color: #555 !important;
       line-height: 1.4 !important;
     }
     
     /* Скрываем кружки и линии на мобильных */
     .step-circle-container,
     .step-item::after {
       display: none !important;
     }
     
     /* Настраиваем контент для вертикального расположения */
     .step-content {
       margin-left: 0 !important;
       width: 100% !important;
       position: static !important;
     }
     
     /* Скрываем фон и треугольник */
     .step-basic-info {
       background: transparent !important;
       position: static !important;
       padding: 0 !important;
       margin: 0 !important;
     }
     
     .step-basic-info::before {
       display: none !important;
     }
     
     /* Обеспечиваем правильный порядок элементов */
     
     .step-title {
       order: 1 !important;
       margin-bottom: 0.5em !important;
     }
     
     .step-content {
       order: 2 !important;
       width: 100% !important;
     }
     
     .step-basic-info {
       order: 3 !important;
     }
     
     .step-expanded {
       order: 4 !important;
     }
     
     /* Обеспечиваем стабильность позиции заголовка */
     .step-title {
       position: relative !important;
       z-index: 10 !important;
       margin-top: 7% !important;
     }
     .step-title {
      width: 100%;
     }
     .steps-list {
      gap: 0;
     }
  }