.lu-included{
  /* --- Локальные токены. Меняются здесь или инлайном на блоке.
         Хочешь ярче заголовок — задай более светлые стопы в
         --lu-included-grad-text (но учитывай читаемость на светлом). --- */
  --lu-included-wash:
      linear-gradient(115deg, var(--lu-sky-haze, #EAF6FB) 0%,
                              #EAF6EF 48%,
                              #EEF6DE 100%);

  /* Вертикальные отступы полосы. Нижний намеренно больше —
     это цветной «воздух» под пилюлями, уравновешивает верх. */
  --lu-included-pad-top:    clamp(40px, 5.5vw, 68px);
  --lu-included-pad-bottom: clamp(96px, 12vw, 160px);

  /* Высота мягкого растворения у самого низа (в px, не в %).
     Держим её чуть меньше нижнего паддинга, чтобы пилюли
     оставались в плотной зоне и не затухали. */
  --lu-included-fade-size:  clamp(90px, 12vw, 150px);

  --lu-included-grad-text:
      linear-gradient(100deg, #2A8FC4 0%, #4FA23E 55%, #6DA31B 100%);
  --lu-included-title-fallback: var(--lu-accent-ink, #355F73); /* если clip:text не сработает */

  --lu-included-marker:
      linear-gradient(90deg, var(--lu-brand-blue, #5FC6F1),
                             var(--lu-brand-green, #95C12B));

  --lu-included-title-size: clamp(30px, 6vw, 52px);

  /* --- Полоса во всю ширину окна (bleed).
         Содержимое возвращается в габариты контейнера в __inner. --- */
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-top:    var(--lu-included-pad-top);
  padding-bottom: var(--lu-included-pad-bottom);
  overflow: hidden;
}

/* Подслой заливки. Растворяется книзу маской, поэтому нижней
   границы нет. Если браузер не поддерживает mask — заливка
   просто останется сплошной (мягкая деградация). */
.lu-included::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--lu-included-wash);

  -webkit-mask-image: linear-gradient(to bottom, #000 0%,
                        #000 calc(100% - var(--lu-included-fade-size)), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%,
                        #000 calc(100% - var(--lu-included-fade-size)), transparent 100%);
}

/* Содержимое — по ширине .container Bootstrap 3, прижато влево,
   поверх подслоя заливки */
.lu-included__inner{
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;   /* столбцовые отступы контейнера */
}

/* Линия-маркер над заголовком — «здесь начинается раздел» */
.lu-included__marker{
  display: block;
  width: 72px;
  height: 5px;
  margin: 0 0 20px;
  border-radius: 3px;
  background-image: var(--lu-included-marker);
}

/* Заголовок — крупный, левый край, с градиентной заливкой текста.
   Намеренно div, а не h-тег: не плодим лишних заголовков и не
   воюем с кракеновским каскадом. Двойной селектор с .text-content
   перебивает общий стиль темы. При желании можно заменить на <h2>. */
.lu-included .lu-included__title,
.text-content .lu-included .lu-included__title{
  margin: 0 0 16px !important;
  font-size: var(--lu-included-title-size) !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: var(--lu-included-title-fallback) !important;  /* сплошной фолбэк */
}

/* Градиент по тексту включаем только там, где поддержан clip:text,
   иначе остаётся читаемый сплошной цвет-фолбэк выше. */
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .lu-included .lu-included__title,
  .text-content .lu-included .lu-included__title{
    background-image: var(--lu-included-grad-text) !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
}

/* Подзаголовок — спокойным тёмным */
.lu-included__text{
  margin: 0 0 26px;
  max-width: 560px;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.55;
  color: var(--lu-bark, #6B5D4F);
}

/* =========================================================
   Пилюли — «быстрое оглавление» второй части.
   Каждая в своём лагуновом тоне; текст и иконка — потемнее
   из того же семейства (иконка наследует currentColor).
   ========================================================= */
.lu-included__pills{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lu-included__pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;

  background: var(--lu-pill-bg, var(--lu-sky-mist, #D6EEF9));
  color: var(--lu-pill-fg, var(--lu-accent-ink, #355F73));
}

.lu-included__pill .lu-icon{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* Тона вразнобой */
.lu-included__pill--blue { --lu-pill-bg: var(--lu-sky-mist,   #D6EEF9); --lu-pill-fg: var(--lu-accent-ink,  #355F73); }
.lu-included__pill--sand { --lu-pill-bg: var(--lu-cream,      #F0E4D0); --lu-pill-fg: var(--lu-earth,       #8B5A3C); }
.lu-included__pill--green{ --lu-pill-bg: var(--lu-accent-soft,#DFF3CF); --lu-pill-fg: var(--lu-forest-deep, #2F5D4E); }
.lu-included__pill--teal { --lu-pill-bg: #D9EDE9;                        --lu-pill-fg: #2F5D57; } /* бледная бирюза — нет токена в палитре */

/* =========================================================
   Модификатор безопасности: если bleed на 100vw даёт
   горизонтальную прокрутку (из-за полосы прокрутки) — или
   фон удобнее задать секцией Кракена — переключаемся на
   вариант по ширине контейнера со скруглением (без растворения).
   ========================================================= */
.lu-included--contained{
  width: 100%;
  margin-left: 0;
  border-radius: var(--lu-card-radius, 28px);
  padding: clamp(28px, 4vw, 44px) 0;
}
.lu-included--contained::before{
  -webkit-mask-image: none;
          mask-image: none;
}
.lu-included--contained .lu-included__inner{
  max-width: none;
  padding: 0 clamp(20px, 3vw, 32px);
}

/* =========================================================
   Адаптив
   ========================================================= */
@media (max-width: 767px){
  .lu-included{
    --lu-included-pad-top:    clamp(24px, 7vw, 36px);
    --lu-included-pad-bottom: clamp(56px, 16vw, 100px);
    --lu-included-fade-size:  clamp(52px, 15vw, 92px);
  }

  .lu-included__marker{
    width: 56px;
    height: 4px;
    margin-bottom: 14px;
  }

  .lu-included__text{
    max-width: none;
    margin-bottom: 20px;
  }

  /* Пилюли — ровная сетка 2×2 */
  .lu-included__pills{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .lu-included__pill{
    justify-content: center;
    padding: 9px 10px;
    font-size: 13px;
    white-space: normal;    /* длинная подпись при нужде перенесётся */
    text-align: center;
    line-height: 1.15;
    min-width: 0;
  }

  .lu-included__pill .lu-icon{
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }
}