/* Рассылки в мессенджерах для бизнеса — стили страницы.
   Файл не собирается через gulp sass (node-sass 4 не разбирает min()/max() и @container блоков c2l), правится напрямую.
   1) Интеграция в сайт: страница без бокового меню + стили стандартной формы callback (tpl/sass/includes/_callback.scss).
   2) Блоки c2l-* от дизайнеров (без изменений, кроме путей к картинкам). */

/* ---------- 1. Интеграция в сайт ---------- */

/* Бокового меню нет: зона контента на всю ширину .wrapper (сайт с 1440px сужает её под aside) */
.wrapper--c2l .wrapper__content {
  width: 100%;
}

@charset "UTF-8";
.form-callback__policy i, .form-callback-code__head, .call-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-callback__policy {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.form-callback-code__list li, .form-callback-call {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.form-callback__policy i, .form-callback__policy svg, .form-callback-code__list li {
  transition: 200ms;
}

.form-callback__desc {
  margin-top: -30px;
  margin-bottom: 40px;
}

.form-callback__desc ul li {
  display: flex;
  gap: 8px;
}

.form-callback__desc ul li::before {
  content: "";
  display: block;
  margin-top: 10px;
  width: 5px;
  height: 5px;
  background: #205b9b;
  border-radius: 50%;
}

@media all and (max-width: 767px) {
  .form-callback__desc {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

@keyframes pagination {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.form-callback__policy i {
  width: 24px;
  min-width: 24px;
  height: 24px;
  border: 1px solid #e7eaed;
  border-radius: 4px;
}

.no-touch .form-callback__policy i:hover {
  background-color: #f9fafc;
  border-color: #205b9b;
}

.form-callback__policy svg {
  fill: #fff;
  opacity: 0;
}

.form-callback__policy input {
  display: none;
}

.form-callback__policy input:checked ~ i {
  background-color: #205b9b !important;
  border-color: #205b9b;
}

.form-callback__policy input:checked ~ i svg {
  opacity: 1;
}

.form-callback__policy {
  position: relative;
  cursor: pointer;
}

.form-callback__policy i {
  margin-right: 10px;
}

.form-callback__policy a {
  color: #205b9b;
  font-weight: 700;
}

.no-touch .form-callback__policy a:hover {
  color: #212121;
}

.form-callback-code {
  position: absolute;
  width: 60px;
  height: 100%;
  top: 0;
  left: 0;
}

.no-touch .form-callback-code:hover + input, .active.form-callback-code + input {
  border-color: #205b9b;
  background-color: #f9fafc;
}

.active.form-callback-code {
  width: 100%;
}

.form-callback-code__head {
  width: 60px;
  height: 100%;
  cursor: pointer;
}

.form-callback-code__head:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 3px 0 3px;
  border-color: #205b9b transparent transparent transparent;
  margin-left: 6px;
}

.active.form-callback-code__head:after {
  border-width: 0 3px 4px 3px;
  border-color: transparent transparent #205b9b transparent;
}

.form-callback-code__body {
  position: absolute;
  display: none;
  width: 100%;
  max-height: 216px;
  top: 100%;
  left: 0;
  margin-top: 4px;
  border-radius: 6px;
  background-color: #fff;
  border: 1px solid #205b9b;
  overflow: hidden;
  z-index: 110;
}

.form-callback-code__body .mCSB_scrollTools {
  right: 10px;
  top: 15px;
  bottom: 15px;
}

.form-callback-code__list {
  padding: 15px;
}

.form-callback-code__list li {
  padding: 5px;
  cursor: pointer;
}

.no-touch .form-callback-code__list li:hover {
  color: #205b9b;
}

.form-callback-code__list li + li {
  margin-top: 4px;
}

.no-touch .form-callback-code__list li:hover, .form-callback-code__list li.active {
  color: #205b9b;
  background: #f9fafc;
  border-radius: 2px;
}

.no-touch .form-callback-code__list li:hover span, .form-callback-code__list li.active span {
  color: #205b9b;
}

.form-callback-code__list div {
  margin-right: 10px;
}

.form-callback-code__list span {
  color: #8997a6;
  margin-left: 10px;
}

._h2 {
  margin-bottom: 40px;
  font: 700 36px/40px Nunito, sans-serif;
  text-align: center;
}

._h3 {
  font: 700 24px/32px Nunito, sans-serif;
  text-align: center;
}

@media (min-width: 1025px) {
  ._h2 {
    line-height: 60px;
    font-size: 52px;
    text-align: left;
  }
  ._h3 {
    text-align: left;
  }
}

html {
  scroll-behavior: smooth;
}

._fw {
  width: 100%;
}

.lg-backdrop {
  background-color: rgba(0, 0, 0, 0.88) !important;
}

.callback {
  margin-bottom: 64px;
}

@media all and (min-width: 1025px) {
  .callback {
    margin-bottom: 150px;
  }
}

.callback__title {
  margin-bottom: 40px;
}

.callback__wrapper {
  display: flex;
  flex-direction: column-reverse;
  gap: 24px;
  min-width: 0;
}

@media screen and (min-width: 1024px) {
  .callback__wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

.callback__links {
  display: block;
  padding: 24px;
  border-radius: 24px;
  color: #fff;
  min-width: 0;
  border: 1px solid rgba(32, 91, 155, 0.1);
}

@media screen and (min-width: 1024px) {
  .callback__links {
    padding: 36px;
  }
}

.callback__form {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background-color: #e0f2fc;
  border-radius: 24px;
}

@media screen and (min-width: 1024px) {
  .callback__form {
    padding: 40px;
  }
}

.links-callback__list {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  .links-callback__list {
    margin-bottom: 32px;
  }
}

.links-callback__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(32, 91, 155, 0.1);
  background-color: rgba(255, 255, 255, 0.05);
  color: #000;
}

.links-callback__item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.links-callback__companies-title {
  display: none;
}

@media screen and (min-width: 768px) {
  .links-callback__companies-title {
    display: block;
  }
}

.links-callback__slider {
  display: none;
  position: relative;
}

@media screen and (min-width: 768px) {
  .links-callback__slider {
    display: block;
  }
}

.links-callback__slider::before, .links-callback__slider::after {
  content: "";
  width: 40px;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 10;
}

.links-callback__slider::before {
  left: 0;
  background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0.1) 100%);
}

.links-callback__slider::after {
  right: 0;
  background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0.1) 100%);
}

.links-callback__slider-wrapper {
  transition-timing-function: linear !important;
  /* Равномерная скорость */
}

.links-callback__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.form-callback {
  position: relative;
}

.form-callback__title {
  display: none;
  margin-bottom: 32px;
  font-weight: 400;
  font-size: 24px;
}

@media screen and (min-width: 1024px) {
  .form-callback__title {
    display: block;
    margin-bottom: 16px;
  }
}

.form-callback__left {
  display: flex;
  flex-direction: column;
  padding: 24px;
  padding-bottom: 0;
  background-color: rgba(32, 91, 155, 0.03);
  flex: 0 0 520px;
  border-radius: 15px 15px 0 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

@media screen and (min-width: 768px) {
  .form-callback__left {
    padding: 40px;
    border-radius: 16px;
  }
  .form-callback__left::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, #f8fafc 0%, rgba(248, 250, 252, 0) 100%);
    opacity: 0.7;
  }
}

.form-callback__image {
  display: none;
  margin-top: auto;
  position: relative;
  z-index: 2;
}

.form-callback__image img {
  width: 100%;
  max-width: 304px;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
}

@media screen and (min-width: 768px) {
  .form-callback__image {
    display: block;
  }
}

.form-callback__desc {
  max-width: 500px;
  margin-bottom: 30px;
}

.form-callback__desc ul {
  margin-top: 20px;
  list-style-type: none;
  counter-reset: num;
}

.form-callback__desc ul li {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  text-align: left;
}

.form-callback__desc ul li:not(:last-child) {
  margin-bottom: 10px;
}

.form-callback__desc ul li::before {
  content: "0" counter(num);
  counter-increment: num;
  font: 700 24px/32px Nunito, sans-serif;
  color: #205b9b;
}

.form-callback__desc ul li a {
  font-weight: 600;
  color: #205b9b;
}

.form-callback__form {
  background: rgba(32, 91, 155, 0.03);
  border-radius: 0 0 15px 15px;
  padding: 0 24px 24px;
  width: auto;
  flex: 1 1 auto;
}

@media screen and (min-width: 768px) {
  .form-callback__form {
    padding: 40px;
    border-radius: 15px;
  }
}

.form-callback__form-title {
  margin-bottom: 40px;
}

.form-callback__label {
  position: relative;
  display: block;
  margin-bottom: 8px;
}

.form-callback__label:after {
  content: "*";
  position: absolute;
  top: 8px;
  right: 8px;
  color: #cd2020;
}

.form-callback__label._no-required::after {
  content: none;
}

.form-callback textarea {
  height: 108px;
  padding-top: 20px;
}

.form-callback__field, .form-callback__area {
  display: block;
  width: 100%;
  color: #212121;
  font: 400 16px OpenSans, sans-serif;
  border-radius: 6px;
  background-color: #fff;
  border: 1px solid #8997a633;
  transition: border-color 200ms, background-color 200ms;
}

.form-callback__field:focus, .form-callback__field:hover, .form-callback__area:focus, .form-callback__area:hover {
  border-color: #205b9b;
  background-color: #f9fafc;
}

.form-callback__field {
  height: 54px;
  padding: 0 20px;
}

.form-callback__field_phone {
  padding-left: 60px;
}

.form-callback__area {
  height: 120px;
  padding: 10px 20px;
}

.form-callback__file input {
  display: none;
}

.form-callback__file span {
  text-overflow: ellipsis;
  overflow: hidden;
}

.form-callback__file svg {
  margin-right: 10px;
}

.form-callback__file.active {
  background-color: rgba(32, 91, 155, 0.1);
}

.form-callback__radio-group {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.form-callback__radio-label {
  font: 400 14px OpenSans, sans-serif;
  color: #212121;
  white-space: nowrap;
}

.form-callback__radio {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.form-callback__radio input[type="radio"] {
  display: none;
}

.form-callback__radio i {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(32, 91, 155, 0.3);
  background-color: #fff;
  position: relative;
  transition: border-color 0.2s ease;
}

.form-callback__radio i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #205b9b;
  transition: transform 0.2s ease;
}

.form-callback__radio input[type="radio"]:checked + i {
  border-color: #205b9b;
}

.form-callback__radio input[type="radio"]:checked + i::after {
  transform: translate(-50%, -50%) scale(1);
}

.form-callback__radio span {
  font: 400 14px OpenSans, sans-serif;
  color: #212121;
}

.form-callback__policy {
  margin-top: 32px;
}

.form-callback__policy i {
  background-color: #fff;
}

.form-callback__policy:last-of-type {
  margin-top: 24px;
  margin-bottom: 32px;
}

.form-callback__btns {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

@media screen and (min-width: 1024px) {
  .form-callback__btns {
    flex-direction: row;
  }
}

.form-callback-call {
  margin-top: 40px;
}

.form-callback-call svg {
  margin-right: 20px;
}

.form-callback-call a {
  font-weight: 600;
}

.form-callback__call-btn {
  display: flex;
  gap: 12px;
}

.form-callback__call-btn:hover .call-btn__icon {
  background-color: rgba(32, 91, 155, 0.05);
}

.call-btn__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(32, 91, 155, 0.1);
  transition: background 0.2s ease;
}

.call-btn__text {
  margin-left: 0 !important;
}

/* ---------- 2. Блоки страницы ---------- */

/* Рассылки для бизнеса в Chat2Desk — блоки лендинга. Собрано 20261023-1043. Всё изолировано в классах .c2l-*. */

/* ==========================================================================
   c2l-base.css — база для блоков лендингов Chat2Desk
   Версия: 0.2 (токены сняты с живого сайта chat2desk.com, 2026-09-25;
   сверены с UI-китом в Фигме, 2026-09-26; 2026-10-15 — шкала масштаба,
   аватар со знаком канала, слой c2l-ui замкнут на корень .c2l-ui)

   Правила файла:
   - всё только внутри .c2l (корень каждого блока) — на сайт ничего не течёт;
   - все переменные с префиксом --c2l-;
   - адаптив на container queries: ширина блока ≠ ширине экрана
     (на сайте html{zoom:80%} при 1024–1920px, зона ограничена max-width .wrapper).

   Контейнерные брейкпоинты (ширина контентной зоны в CSS px):
     < 480   телефон            (320–440)
     ≥ 480   большой телефон    (480–728)
     ≥ 700   планшет            (728–983; НЕ 768 — на экране 768 зона всего 728)
     ≥ 1000  десктоп            (1240–1624, рендер с zoom 0.8)
   ========================================================================== */

/* ---------- Токены ---------- */
.c2l {
  /* Цвета */
  --c2l-c-text: #212121;
  --c2l-c-text-2: #5d6a76;          /* фирстиль 2026: менее важный текст, AA на белом и tint */
  --c2l-c-primary: #1e63b8;         /* фирстиль 2026: брендовый синий (был #205b9b) */
  --c2l-c-primary-hover: #1a559e;
  --c2l-c-primary-soft: #8fb1dc;    /* 50% */
  --c2l-c-primary-25: #c6d8ed;      /* 25% */
  --c2l-c-on-primary: #ffffff;
  --c2l-c-bg: #ffffff;
  --c2l-c-tint: #f3f7fb;            /* 5% — основной фон карточек и секций */
  --c2l-c-tint-2: #e9f0f8;          /* 10% — более тёмный фон, фон при наведении */
  --c2l-c-sky: #e0f2fc;             /* голубой */
  --c2l-c-green: #e6f7e9;           /* фон CTA-баннера в ките */
  --c2l-c-lilac: #eee7ff;           /* фирстиль 2026: выделение блоков */
  --c2l-c-yellow: #fcf9ec;          /* фирстиль 2026: выделение блоков */
  --c2l-c-positive: #38cd20;
  --c2l-c-negative: #cd2020;
  --c2l-grad-main: radial-gradient(circle at 50% 50%, #8fb1dc 0%, #1e63b8 100%);
  --c2l-c-line: rgba(30, 99, 184, 0.12);
  --c2l-c-chip: rgba(30, 99, 184, 0.1);

  /* Шрифт — только Nunito Sans (решение заказчика 2026-09-28): /tpl/css/fonts-2026.css,
     подключается на сайте один раз (в превью — kit/fonts). Пока его нет — OpenSans сайта. */
  --c2l-font-text: "Nunito Sans", OpenSans, "Open Sans", Arial, sans-serif;
  --c2l-font-head: var(--c2l-font-text);

  /* Тени (UI-кит продукта: Shadow medium/200, Shadow Large/500) — для окон и карточек интерфейса */
  --c2l-shadow-md: 0 8px 10px -4px rgba(30, 57, 87, 0.08), 0 4px 8px -4px rgba(30, 57, 87, 0.12);
  --c2l-shadow-lg: 0 10px 32px -4px rgba(30, 57, 87, 0.1), 0 6px 14px -6px rgba(30, 57, 87, 0.12);

  /* Радиусы */
  --c2l-r-xl: 24px;                 /* 32px на десктопе */
  --c2l-r-lg: 20px;
  --c2l-r-md: 16px;
  --c2l-r-sm: 10px;
  --c2l-r-btn: 6px;

  /* Отступы */
  --c2l-space-section: 64px;        /* между блоками; 150px на десктопе */
  --c2l-space-head: 32px;           /* заголовок секции → контент; 40px на десктопе */
  --c2l-space-card: 24px;           /* внутренний отступ карточки; 32px на десктопе */
  --c2l-gap: 16px;                  /* сетка; 24px на десктопе */

  /* Кнопка */
  --c2l-btn-h: 56px;               /* 44.8 экранных px при zoom80%, решение 2026-10-02 */

  /* Движение */
  --c2l-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --c2l-dur: 0.2s;
}

/* ---------- Корень блока ---------- */
.c2l {
  container-type: inline-size;
  display: block;
  width: 100%;
  margin: 0 0 var(--c2l-space-section);
  color: var(--c2l-c-text);
  font: 400 16px/24px var(--c2l-font-text);
  text-align: left;
}

@container (min-width: 700px) {
  .c2l > * { font-size: 18px; line-height: 27px; }  /* базовый текст 2026: Md 18/150% */
}

@container (min-width: 1000px) {
  .c2l * { --c2l-space-head: 40px; --c2l-space-card: 32px; --c2l-gap: 24px; --c2l-r-xl: 32px; }
}

/* Отступ между секциями зависит от ширины контентной зоны, но у корня
   нет контейнера-предка — поэтому здесь исключение: media по экрану. */
@media (min-width: 1025px) {
  .c2l { --c2l-space-section: 150px; }
}

/* ---------- Сброс внутри блока (не полагаемся на сброс сайта) ---------- */
.c2l *,
.c2l *::before,
.c2l *::after { box-sizing: border-box; }

.c2l :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, dl, dd) { margin: 0; padding: 0; }
.c2l :where(ul, ol) { list-style: none; }
.c2l :where(img, svg, video, picture) { display: block; max-width: 100%; }
.c2l :where(img) { height: auto; }
.c2l :where(a) { color: inherit; text-decoration: none; }
.c2l :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.c2l :where(b, strong) { font-weight: 700; }
/* hidden сильнее display у компонентов: скрытая панель не должна проявиться из-за display: grid/flex */
.c2l [hidden] { display: none; }
/* сайт красит все svg в currentColor — у иконок-обводок заливку задаём явно */
.c2l svg[fill="none"] { fill: none; }

/* ---------- Типографика ---------- */
.c2l-h1,
.c2l-h2,
.c2l-h3,
.c2l-h4 { font-family: var(--c2l-font-head); font-weight: 700; color: var(--c2l-c-text); text-wrap: balance; }
/* H3/H4 в фирстиле — SemiBold (Nunito Sans вариативный, 600 есть). */
.c2l-h3,
.c2l-h4 { font-weight: 600; }

/* Шкала фирстиля 2026 («Сайт/Desktop»). Телефон и планшет в фирстиле не заданы — подобраны. */
.c2l-h1 { font-size: 32px; line-height: 36px; }
.c2l-h2 { font-size: 28px; line-height: 32px; }
.c2l-h3 { font-size: 24px; line-height: 30px; }
.c2l-h4 { font-size: 20px; line-height: 26px; }

.c2l-xl    { font-size: 20px; line-height: 26px; font-weight: 500; }  /* Xl */
.c2l-lead  { font-size: 18px; line-height: 26px; }                    /* Lg */
.c2l-text  { font-size: 16px; line-height: 24px; }                    /* Md */
.c2l-small { font-size: 14px; line-height: 21px; }                    /* Sm */
.c2l-xs    { font-size: 13px; line-height: 19px; }                    /* Xs */
.c2l-muted { color: var(--c2l-c-text-2); }

/* Крупные значения: свободное поле, заранее зарезервированная ширина при наборе. */
.c2l-number { font-family: var(--c2l-font-text); font-size: 64px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
@container (min-width: 700px) { .c2l-number { font-size: 68px; } }
@container (min-width: 1000px) { .c2l-number { font-size: 96px; } }


@container (min-width: 700px) {
  .c2l-h1 { font-size: 44px; line-height: 48px; }
  .c2l-h2 { font-size: 36px; line-height: 40px; }
  .c2l-h3 { font-size: 30px; line-height: 36px; }
  .c2l-h4 { font-size: 24px; line-height: 30px; }

  .c2l-xl    { font-size: 24px; line-height: 31px; }
  .c2l-lead  { font-size: 22px; line-height: 31px; }
  .c2l-text  { font-size: 18px; line-height: 27px; }
  .c2l-small { font-size: 16px; line-height: 24px; }
  .c2l-xs    { font-size: 14px; line-height: 21px; }
}

@container (min-width: 1000px) {
  .c2l-h1 { font-size: 64px; line-height: 67px; }   /* 64/105% */
  .c2l-h2 { font-size: 48px; line-height: 53px; }   /* 48/110% */
  .c2l-h3 { font-size: 40px; line-height: 48px; }   /* 40/120% */
  .c2l-h4 { font-size: 32px; line-height: 38px; }   /* 32/120% */
}

/* ---------- Шапка секции ---------- */
.c2l-head { display: grid; gap: 12px; margin-bottom: var(--c2l-space-head); max-width: 880px; }
.c2l-head--center { margin-inline: auto; text-align: center; justify-items: center; }

/* ---------- Кнопки ---------- */
.c2l-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--c2l-btn-h);
  padding: 0 32px;
  border: 1px solid transparent;
  border-radius: var(--c2l-r-btn);
  font: 400 16px/24px var(--c2l-font-text);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--c2l-dur), color var(--c2l-dur), border-color var(--c2l-dur);
}
.c2l-btn:focus-visible { outline: 2px solid var(--c2l-c-primary); outline-offset: 3px; }

.c2l-btn--primary { background: var(--c2l-c-primary); color: var(--c2l-c-on-primary); }
.c2l-btn--primary:hover { background: var(--c2l-c-primary-hover); }

/* вторичная — тональная: не спорит с основной за внимание (решение заказчика 2026-09-26, refs: disrupt-team#П2) */
/* заливка полупрозрачная: видна и на белом, и на tint-фоне */
.c2l-btn--tonal { background: var(--c2l-c-chip); color: var(--c2l-c-text); }
.c2l-btn--tonal:hover { background: var(--c2l-c-primary-25); }

.c2l-btn--light { background: var(--c2l-c-bg); color: var(--c2l-c-primary); }
.c2l-btn--light:hover { background: var(--c2l-c-tint-2); }

@container (max-width: 479px) {
  .c2l-btn { width: 100%; white-space: normal; }
}

@container (min-width: 1000px) {
  .c2l-btn { padding: 0 45px; }
}

/* ---------- Карточки и плашки ---------- */
.c2l-card { padding: var(--c2l-space-card); border-radius: var(--c2l-r-md); background: var(--c2l-c-tint); }
.c2l-card--line { background: transparent; border: 1px solid var(--c2l-c-line); border-radius: var(--c2l-r-lg); }
.c2l-card--sky { background: var(--c2l-c-sky); }
.c2l-card--primary { background: var(--c2l-c-primary); color: var(--c2l-c-on-primary); }

/* Цветовой ритм: действующие поверхности бренда, 2026-10-22.
   Специфичность сохраняет цвет панели при подключении базы каталога поверх кита. */
.c2l .c2l-card--mint { background: var(--c2l-c-green); }
.c2l .c2l-card--lilac { background: var(--c2l-c-lilac); }
.c2l .c2l-card--sand { background: var(--c2l-c-yellow); }
.c2l .c2l-card--blue-soft { background: var(--c2l-c-primary-25); }

/* Компактный яркий акцент рядом с текстом, без заливки целого блока. */
.c2l .c2l-icon.c2l-icon--accent { background: var(--c2l-c-primary); color: var(--c2l-c-on-primary); }

.c2l-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--c2l-r-sm);
  background: var(--c2l-c-chip);
  font-size: 14px;
  line-height: 22px;
}

/* ---------- Доступность и движение ---------- */
.c2l-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Выделение текста — из палитры, а не браузерное */
.c2l ::selection { background: rgba(30, 99, 184, 0.18); }

/* prefers-reduced-motion: убираем движение в пространстве, смена цвета,
   прозрачности и состояния остаётся (обратная связь не пропадает). */
@media (prefers-reduced-motion: reduce) {
  .c2l *,
  .c2l *::before,
  .c2l *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-property: color, background-color, border-color, outline-color, opacity, box-shadow !important;
  }
}

/* ==========================================================================
   Шкала масштаба (ревизия заказчика 2026-10-14, docs/03-design.md → «Шкала масштаба»)
   Размер объекта задаёт его роль, а не свободное место. Значения — CSS px блока
   (на экране ×0,8 при zoom сайта). Те же имена и значения — в catalog/src/base.css;
   на телефоне и планшете кегль интерфейса не меньше 13px (контракт).
   ========================================================================== */
.c2l {
  /* Интерфейс продукта — один масштаб для полного окна, телефона и фрагмента */
  --c2l-ui-fs: 14px;                /* основной текст интерфейса; 16 на десктопе */
  --c2l-ui-fs-2: 13px;              /* вторичный; 14 на десктопе */
  --c2l-ui-fs-3: 13px;              /* время, счётчики */
  --c2l-ui-ava: 38px;               /* аватар; 44 на десктопе */
  --c2l-ui-ava-s: 20px;             /* мини-аватар оператора; 22 */
  --c2l-ui-chan: 20px;              /* знак канала; 22 */
  /* Объекты по роли */
  --c2l-scene-h: 480px;             /* сцена-визуал; 560 / 640 (потолок 720) */
  --c2l-phone-w: 300px;             /* телефон-мессенджер; 340 / 380 */
  --c2l-frag-w: 600px;              /* фрагмент интерфейса: карточка, список, панель */
  --c2l-logo-h: 30px;               /* знак клиента или интеграции; 34 / 40 */
  --c2l-tile-h: 80px;               /* плитка логотипа; 96 / 112 */
  --c2l-fs-num: 24px;               /* число-факт на линии или в строке = H3; 30 / 40 */
}

/* Токены по ширине — на потомке корня (корень не спрашивает свою ширину). База блоков каталога в landing.css
   задаёт те же имена тем же способом и подключается позже — её значения главнее. */
@container (min-width: 700px) {
  .c2l > * {
    --c2l-ui-fs: 15px; --c2l-ui-ava: 40px; --c2l-ui-ava-s: 21px;
    --c2l-scene-h: 560px; --c2l-phone-w: 340px; --c2l-logo-h: 34px; --c2l-tile-h: 96px; --c2l-fs-num: 30px;
  }
}

@container (min-width: 1000px) {
  .c2l > * {
    --c2l-ui-fs: 16px; --c2l-ui-fs-2: 14px; --c2l-ui-ava: 44px; --c2l-ui-ava-s: 22px; --c2l-ui-chan: 22px;
    --c2l-scene-h: 640px; --c2l-phone-w: 380px; --c2l-logo-h: 40px; --c2l-tile-h: 112px; --c2l-fs-num: 40px;
  }
}

/* Полное окно продукта: на телефоне и планшете тесное — на полступени мельче фрагментов */
@container (max-width: 999.98px) {
  .c2l-ui-window { --c2l-ui-fs: 14px; --c2l-ui-fs-2: 13px; --c2l-ui-fs-3: 13px; }
}

/* Аватар со знаком канала: знак на 12px правее края аватара (не закрывает лицо), белая обводка 3px.
   <span class="c2l-ava"><img class="c2l-ava__img" …><img class="c2l-ava-chan" …></span> */
.c2l-ava { position: relative; display: inline-block; flex: none; width: var(--c2l-ui-ava); height: var(--c2l-ui-ava); margin-inline-end: 12px; }
.c2l-ava__img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.c2l-ava-chan { position: absolute; right: -12px; bottom: -2px; width: calc(var(--c2l-ui-chan) * 0.85); height: calc(var(--c2l-ui-chan) * 0.85); border: 3px solid #fff; border-radius: 50%; background: #fff; box-sizing: content-box; }

/* ==========================================================================
   Интерфейс продукта (c2l-ui) — компоненты Chat2Desk UI Kit New
   Слой работает только внутри корня .c2l-ui (окно в единицах кита). Блоки каталога
   используют свой слой с теми же короткими именами (.c2l-ui-app, -btn, -tag —
   catalog/src/base.css), поэтому селекторы здесь замкнуты на .c2l-ui (2026-10-15).
   Источник: Фигма «Chat2Desk UI Kit New (Copy)» PvcmmQImsrppDlD95th09b —
   Main menu 12171:185, Menu 2nd lvl 1508:88, Message 1495:85 / 1492:18970,
   System Notification 1616:18955 / 1824:33, Chat input 1625:19113,
   Tags 1387:67, Cards 1912:0 (channels_mini, Operator).
   Размеры кита заданы в единицах --c2l-u (1px кита × масштаб --c2l-ui-k),
   поэтому окно продукта масштабируется целиком и остаётся «как в продукте».
   Шрифт — Nunito Sans вместо Roboto (решение заказчика: один шрифт).
   Отступления от кита ради контраста AA (только текст): ссылки и кнопки
   #2B6FC2 вместо #549CF0, второстепенный текст #5D6A76 вместо #888/#7E93A0,
   красный бейдж #C9372C вместо #E1574D. Иконки и заливки — цвета кита.
   ========================================================================== */
.c2l-ui {
  --c2l-ui-k: 1.2;
  --c2l-u: calc(var(--c2l-ui-k) * 1px);
  --c2l-ui-main: #549cf0;           /* Main colors/Main — иконки, галочки */
  --c2l-ui-link: #2b6fc2;           /* текстовые ссылки и кнопки (AA) */
  --c2l-ui-brand: #205b9b;          /* иконки главного меню */
  --c2l-ui-title: #3f3f3f;          /* For Text/Title */
  --c2l-ui-text-2: #5d6a76;         /* второстепенный текст (AA) */
  --c2l-ui-menu: #d2e0eb;           /* Background/Main menu bar */
  --c2l-ui-bg: #f5f7f8;             /* Background/The intranet menu bar — фон чата */
  --c2l-ui-out: #e0e9ef;            /* OutMessage — сообщение оператора */
  --c2l-ui-input: #ecf1f3;          /* подложка поля ввода */
  --c2l-ui-line: #e3eaef;
  --c2l-ui-hover: rgba(84, 156, 240, 0.1);
  --c2l-ui-neg: #c9372c;            /* Negative status (AA-вариант) */
  --c2l-ui-pos: #83c62d;            /* Positive status */
  --c2l-ui-note: #cef0a3;           /* комментарий оператора */
  --c2l-ui-tag-red: #ff8888;
  --c2l-ui-tag-yellow: #fff38b;
  --c2l-ui-tag-blue: #abe1ff;
  --c2l-ui-tag-pink: #e79ff2;
  --c2l-ui-tag-orange: #ffb774;
  --c2l-ui-tag-green: #c5f983;
  --c2l-ui-tag-violet: #a2a1df;
  font: 400 calc(14 * var(--c2l-u)) / calc(18.2 * var(--c2l-u)) var(--c2l-font-text);  /* кит: 14/18 */
  color: var(--c2l-ui-title);
  text-align: left;
}
.c2l-ui img { max-width: none; }
.c2l-ui__ic { width: calc(20 * var(--c2l-u)); height: calc(20 * var(--c2l-u)); flex: none; }
.c2l-ui__ic--16 { width: calc(16 * var(--c2l-u)); height: calc(16 * var(--c2l-u)); }
.c2l-ui__ic--12 { width: calc(12 * var(--c2l-u)); height: calc(12 * var(--c2l-u)); }

/* Окно: главное меню | меню 2-го уровня | список | чат | карточка */
.c2l-ui.c2l-ui-app {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: calc(8 * var(--c2l-u)) calc(8 * var(--c2l-u)) 0 0;
  background: #fff;
  box-shadow: var(--c2l-shadow-lg);
}
.c2l-ui.c2l-ui-app > * { min-width: 0; }

/* Главное меню (Main menu, 88px) */
.c2l-ui .c2l-ui-menu { flex: none; display: flex; flex-direction: column; align-items: center; width: calc(88 * var(--c2l-u)); padding-top: calc(20 * var(--c2l-u)); background: var(--c2l-ui-menu); }
.c2l-ui .c2l-ui-menu__logo { display: grid; place-items: center; width: calc(48 * var(--c2l-u)); height: calc(48 * var(--c2l-u)); margin-bottom: calc(27 * var(--c2l-u)); border-radius: 50%; background: #fff; }
.c2l-ui .c2l-ui-menu__logo img { width: calc(23 * var(--c2l-u)); height: calc(23 * var(--c2l-u)); }
.c2l-ui .c2l-ui-menu__item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--c2l-u));
  width: 100%; padding: calc(14 * var(--c2l-u)) calc(2 * var(--c2l-u));
  color: var(--c2l-ui-brand);
  font-size: calc(11 * var(--c2l-u)); line-height: calc(13 * var(--c2l-u)); text-align: center;
}
.c2l-ui .c2l-ui-menu__item span { color: var(--c2l-ui-title); }
.c2l-ui .c2l-ui-menu__item.c2l-is-active { background: var(--c2l-ui-bg); }
.c2l-ui .c2l-ui-menu__item.c2l-is-marked::after { content: ""; position: absolute; top: calc(10 * var(--c2l-u)); right: calc(14 * var(--c2l-u)); width: calc(6 * var(--c2l-u)); height: calc(6 * var(--c2l-u)); border-radius: 50%; background: #e1574d; }
.c2l-ui .c2l-ui-menu__op { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--c2l-u)); width: 100%; margin-top: auto; padding: calc(14 * var(--c2l-u)) calc(2 * var(--c2l-u)); background: var(--c2l-ui-hover); font-size: calc(11 * var(--c2l-u)); line-height: calc(13 * var(--c2l-u)); }
.c2l-ui .c2l-ui-menu__op img { width: calc(32 * var(--c2l-u)); height: calc(32 * var(--c2l-u)); border-radius: 50%; }
.c2l-ui .c2l-ui-rate { display: inline-flex; align-items: center; gap: calc(4 * var(--c2l-u)); padding: calc(2 * var(--c2l-u)) calc(4 * var(--c2l-u)); border-radius: 99px; background: #fff; }

/* Меню 2-го уровня (Menu 2nd lvl) */
.c2l-ui .c2l-ui-side { flex: none; width: calc(212 * var(--c2l-u)); padding: calc(20 * var(--c2l-u)) calc(16 * var(--c2l-u)); background: var(--c2l-ui-bg); }
.c2l-ui .c2l-ui-side__title { margin-bottom: calc(16 * var(--c2l-u)); font-size: calc(24 * var(--c2l-u)); line-height: calc(28 * var(--c2l-u)); font-weight: 600; }
.c2l-ui .c2l-ui-side__group { display: flex; align-items: center; justify-content: space-between; margin: calc(12 * var(--c2l-u)) 0 calc(4 * var(--c2l-u)); font-weight: 600; }
.c2l-ui .c2l-ui-side__item { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--c2l-u)); padding: calc(6 * var(--c2l-u)) 0 calc(6 * var(--c2l-u)) calc(8 * var(--c2l-u)); }
.c2l-ui .c2l-ui-side__item.c2l-is-active { color: var(--c2l-ui-link); }
.c2l-ui .c2l-ui-count { display: inline-flex; align-items: center; gap: calc(4 * var(--c2l-u)); padding-left: calc(7 * var(--c2l-u)); border-radius: calc(20 * var(--c2l-u)); background: #fff; font-size: calc(12 * var(--c2l-u)); line-height: calc(14 * var(--c2l-u)); font-variant-numeric: tabular-nums; }
.c2l-ui .c2l-ui-badge { display: inline-block; min-width: calc(20 * var(--c2l-u)); padding: calc(3 * var(--c2l-u)) calc(7 * var(--c2l-u)); border-radius: 99px; background: var(--c2l-ui-neg); color: #fff; font-size: calc(12 * var(--c2l-u)); line-height: calc(14 * var(--c2l-u)); text-align: center; font-variant-numeric: tabular-nums; }

/* Список диалогов */
.c2l-ui .c2l-ui-list { flex: none; width: calc(300 * var(--c2l-u)); border-right: 1px solid var(--c2l-ui-line); background: #fff; }
.c2l-ui .c2l-ui-search { display: flex; align-items: center; gap: calc(8 * var(--c2l-u)); margin: calc(14 * var(--c2l-u)); padding: calc(8 * var(--c2l-u)) calc(10 * var(--c2l-u)); border: 1px solid var(--c2l-ui-line); border-radius: calc(4 * var(--c2l-u)); color: var(--c2l-ui-text-2); }
.c2l-ui .c2l-ui-dialog { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 calc(12 * var(--c2l-u)); align-items: start; padding: calc(12 * var(--c2l-u)) calc(14 * var(--c2l-u)); border-bottom: 1px solid var(--c2l-ui-line); }
.c2l-ui .c2l-ui-dialog.c2l-is-active { background: var(--c2l-ui-hover); }
.c2l-ui .c2l-ui-dialog__name { display: block; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.c2l-ui .c2l-ui-dialog__text { display: block; overflow: hidden; color: var(--c2l-ui-text-2); white-space: nowrap; text-overflow: ellipsis; }
.c2l-ui .c2l-ui-dialog__meta { display: grid; justify-items: end; gap: calc(6 * var(--c2l-u)); color: var(--c2l-ui-text-2); font-size: calc(12 * var(--c2l-u)); line-height: calc(14 * var(--c2l-u)); font-variant-numeric: tabular-nums; }

/* Аватар с каналом */
.c2l-ui .c2l-ui-ava { position: relative; display: block; flex: none; width: calc(40 * var(--c2l-u)); height: calc(40 * var(--c2l-u)); }
.c2l-ui .c2l-ui-ava > img:first-child { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.c2l-ui .c2l-ui-ava--32 { width: calc(32 * var(--c2l-u)); height: calc(32 * var(--c2l-u)); }
.c2l-ui .c2l-ui-ava--56 { width: calc(56 * var(--c2l-u)); height: calc(56 * var(--c2l-u)); }
.c2l-ui .c2l-ui-ava__ch { position: absolute; right: calc(-4 * var(--c2l-u)); bottom: calc(-4 * var(--c2l-u)); width: calc(18 * var(--c2l-u)); height: calc(18 * var(--c2l-u)); border: calc(2 * var(--c2l-u)) solid #fff; border-radius: calc(6 * var(--c2l-u)); background: #fff; box-sizing: content-box; }
.c2l-ui .c2l-ui-ava__ch img { width: 100%; height: 100%; }
.c2l-ui .c2l-ui-ava--bot { display: grid; place-items: center; border: 1px solid var(--c2l-ui-menu); border-radius: 50%; background: var(--c2l-ui-bg); color: var(--c2l-ui-brand); }

/* Чат */
.c2l-ui .c2l-ui-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--c2l-ui-bg); }
.c2l-ui .c2l-ui-chat__head { display: flex; align-items: center; gap: calc(12 * var(--c2l-u)); padding: calc(12 * var(--c2l-u)) calc(20 * var(--c2l-u)); border-bottom: 1px solid var(--c2l-ui-line); background: #fff; }
.c2l-ui .c2l-ui-chat__who { display: grid; min-width: 0; }
.c2l-ui .c2l-ui-chat__who b { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.c2l-ui .c2l-ui-chat__who span { color: var(--c2l-ui-text-2); font-size: calc(12 * var(--c2l-u)); line-height: calc(14 * var(--c2l-u)); }
.c2l-ui .c2l-ui-chat__body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(10 * var(--c2l-u)); padding: calc(20 * var(--c2l-u)); overflow: hidden; }
.c2l-ui .c2l-ui-day { align-self: center; color: var(--c2l-ui-text-2); font-size: calc(12 * var(--c2l-u)); line-height: calc(14 * var(--c2l-u)); }

/* Сообщения (Message client / operator) */
.c2l-ui .c2l-ui-msg { align-self: flex-start; display: flex; align-items: flex-end; gap: calc(14 * var(--c2l-u)); max-width: 86%; padding: calc(14 * var(--c2l-u)) calc(14 * var(--c2l-u)) calc(6 * var(--c2l-u)); border-radius: 0 calc(6 * var(--c2l-u)) calc(6 * var(--c2l-u)) calc(6 * var(--c2l-u)); background: #fff; }
.c2l-ui .c2l-ui-msg__text { padding-bottom: calc(8 * var(--c2l-u)); overflow-wrap: anywhere; }
.c2l-ui .c2l-ui-msg__time { display: inline-flex; align-items: center; gap: calc(2 * var(--c2l-u)); flex: none; color: var(--c2l-ui-text-2); font-size: calc(12 * var(--c2l-u)); line-height: calc(14 * var(--c2l-u)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c2l-ui .c2l-ui-msg__time svg { width: calc(16 * var(--c2l-u)); height: calc(16 * var(--c2l-u)); color: var(--c2l-ui-main); }
.c2l-ui .c2l-ui-out { align-self: flex-end; display: flex; align-items: flex-start; gap: calc(10 * var(--c2l-u)); max-width: 92%; }
.c2l-ui .c2l-ui-out .c2l-ui-msg { max-width: none; border-radius: calc(6 * var(--c2l-u)) 0 calc(6 * var(--c2l-u)) calc(6 * var(--c2l-u)); background: var(--c2l-ui-out); }
.c2l-ui .c2l-ui-note { align-self: flex-start; display: flex; align-items: flex-start; gap: calc(10 * var(--c2l-u)); max-width: 86%; padding: calc(14 * var(--c2l-u)) calc(14 * var(--c2l-u)) calc(6 * var(--c2l-u)); border-radius: calc(6 * var(--c2l-u)); background: var(--c2l-ui-note); }
.c2l-ui .c2l-ui-sys { align-self: center; display: grid; justify-items: center; gap: calc(8 * var(--c2l-u)); padding: calc(6 * var(--c2l-u)) calc(14 * var(--c2l-u)) calc(8 * var(--c2l-u)); font-size: calc(12 * var(--c2l-u)); line-height: calc(14 * var(--c2l-u)); text-align: center; }
.c2l-ui .c2l-ui-sys__row { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(6 * var(--c2l-u)); }
.c2l-ui .c2l-ui-link { color: var(--c2l-ui-link); }
.c2l-ui .c2l-ui-typing { align-self: flex-start; display: inline-flex; gap: calc(4 * var(--c2l-u)); padding: calc(12 * var(--c2l-u)) calc(14 * var(--c2l-u)); border-radius: 0 calc(6 * var(--c2l-u)) calc(6 * var(--c2l-u)) calc(6 * var(--c2l-u)); background: #fff; }
.c2l-ui .c2l-ui-typing i { width: calc(6 * var(--c2l-u)); height: calc(6 * var(--c2l-u)); border-radius: 50%; background: var(--c2l-ui-main); animation: c2l-ui-typing 1.2s infinite ease-in-out both; }
.c2l-ui .c2l-ui-typing i:nth-child(2) { animation-delay: 0.15s; }
.c2l-ui .c2l-ui-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes c2l-ui-typing { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(calc(-3 * var(--c2l-u))); } }

/* Теги и тикеты (Tags & tickets) */
.c2l-ui .c2l-ui-tag { display: inline-flex; align-items: center; gap: calc(4 * var(--c2l-u)); padding: calc(4 * var(--c2l-u)); border-radius: calc(2 * var(--c2l-u)); background: var(--c2l-ui-tag-blue); color: var(--c2l-ui-title); font-size: calc(12 * var(--c2l-u)); line-height: calc(14 * var(--c2l-u)); white-space: nowrap; }
.c2l-ui .c2l-ui-tag--red { background: var(--c2l-ui-tag-red); }
.c2l-ui .c2l-ui-tag--yellow { background: var(--c2l-ui-tag-yellow); }
.c2l-ui .c2l-ui-tag--pink { background: var(--c2l-ui-tag-pink); }
.c2l-ui .c2l-ui-tag--orange { background: var(--c2l-ui-tag-orange); }
.c2l-ui .c2l-ui-tag--green { background: var(--c2l-ui-tag-green); }
.c2l-ui .c2l-ui-tag--violet { background: var(--c2l-ui-tag-violet); }
.c2l-ui .c2l-ui-role { display: inline-block; padding: calc(4 * var(--c2l-u)) calc(6 * var(--c2l-u)); border-radius: calc(4 * var(--c2l-u)); background: #f6d9d9; font-size: calc(14 * var(--c2l-u)); line-height: calc(18 * var(--c2l-u)); }
.c2l-ui .c2l-ui-role--super { background: #e3f3d6; }
.c2l-ui .c2l-ui-role--oper { background: #dde9fb; }

/* Поле ввода (Chat input) */
.c2l-ui .c2l-ui-input { padding: calc(20 * var(--c2l-u)) calc(20 * var(--c2l-u)) calc(14 * var(--c2l-u)); background: var(--c2l-ui-input); }
.c2l-ui .c2l-ui-input__tabs { display: flex; }
.c2l-ui .c2l-ui-input__tab { padding: calc(8 * var(--c2l-u)) calc(14 * var(--c2l-u)); border-radius: calc(4 * var(--c2l-u)) calc(4 * var(--c2l-u)) 0 0; background: var(--c2l-ui-menu); color: var(--c2l-ui-brand); font-weight: 600; }
.c2l-ui .c2l-ui-input__tab.c2l-is-active { background: #fff; color: var(--c2l-ui-title); }
.c2l-ui .c2l-ui-input__field { display: flex; align-items: center; gap: calc(10 * var(--c2l-u)); padding: calc(10 * var(--c2l-u)) calc(16 * var(--c2l-u)) calc(10 * var(--c2l-u)) calc(10 * var(--c2l-u)); border-radius: 0 calc(4 * var(--c2l-u)) calc(4 * var(--c2l-u)) calc(4 * var(--c2l-u)); background: #fff; color: var(--c2l-ui-main); }
.c2l-ui .c2l-ui-input__text { flex: 1; min-width: 0; color: var(--c2l-ui-text-2); }

/* Карточка клиента */
.c2l-ui .c2l-ui-card { flex: none; width: calc(280 * var(--c2l-u)); padding: calc(20 * var(--c2l-u)); border-left: 1px solid var(--c2l-ui-line); background: #fff; }
.c2l-ui .c2l-ui-card__row { display: grid; gap: calc(2 * var(--c2l-u)); padding: calc(10 * var(--c2l-u)) 0; border-bottom: 1px solid var(--c2l-ui-line); }
.c2l-ui .c2l-ui-card__row small { color: var(--c2l-ui-text-2); font-size: calc(12 * var(--c2l-u)); line-height: calc(14 * var(--c2l-u)); }

/* Карточка клиента, комментарий, системная плашка — дополнения */
.c2l-ui .c2l-ui-sys--box { padding: calc(10 * var(--c2l-u)) calc(14 * var(--c2l-u)); border-radius: calc(6 * var(--c2l-u)); background: var(--c2l-ui-out); font-size: calc(14 * var(--c2l-u)); line-height: calc(18 * var(--c2l-u)); }
.c2l-ui .c2l-ui-note__ava { width: calc(32 * var(--c2l-u)); height: calc(32 * var(--c2l-u)); border-radius: 50%; }
.c2l-ui .c2l-ui-card__name { margin: calc(10 * var(--c2l-u)) 0 calc(4 * var(--c2l-u)); font-size: calc(16 * var(--c2l-u)); line-height: calc(20 * var(--c2l-u)); font-weight: 600; }
.c2l-ui .c2l-ui-card__chs { display: flex; gap: calc(6 * var(--c2l-u)); }
.c2l-ui .c2l-ui-card__tags { justify-content: flex-start; }

/* Кнопки продукта (Button) */
.c2l-ui .c2l-ui-btn { display: inline-flex; align-items: center; justify-content: center; padding: calc(7 * var(--c2l-u)) calc(16 * var(--c2l-u)); border: 1px solid var(--c2l-ui-link); border-radius: calc(4 * var(--c2l-u)); background: var(--c2l-ui-link); color: #fff; font-size: calc(14 * var(--c2l-u)); line-height: calc(18 * var(--c2l-u)); }
.c2l-ui .c2l-ui-btn--line { background: #fff; color: var(--c2l-ui-link); }

/* Переключатель (Switch) */
.c2l-ui .c2l-ui-switch { position: relative; flex: none; width: calc(28 * var(--c2l-u)); height: calc(16 * var(--c2l-u)); border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 calc(1 * var(--c2l-u)) #d2d2d2; transition: background-color 0.2s; }
.c2l-ui .c2l-ui-switch::after { content: ""; position: absolute; top: calc(2 * var(--c2l-u)); left: calc(2 * var(--c2l-u)); width: calc(12 * var(--c2l-u)); height: calc(12 * var(--c2l-u)); border-radius: 50%; background: #fff; box-shadow: 0 calc(2 * var(--c2l-u)) calc(4 * var(--c2l-u)) rgba(39,73,112,.3); transition: transform 0.2s var(--c2l-ease); }
.c2l-ui .c2l-ui-switch.c2l-is-on { background: var(--c2l-ui-main); box-shadow: none; }
.c2l-ui .c2l-ui-switch.c2l-is-on::after { transform: translateX(calc(12 * var(--c2l-u))); }

/* Появление нового элемента интерфейса (сообщение, диалог) */
.c2l-ui .c2l-ui-in { animation: c2l-ui-in 0.45s var(--c2l-ease) both; }
@keyframes c2l-ui-in { from { opacity: 0; transform: translateY(calc(10 * var(--c2l-u))) scale(0.98); } to { opacity: 1; transform: none; } }


/* ===== Блоки лендинга ===== */
/* Chat2Desk для интернет-магазинов — стили блоков. Правила: docs/02-block-contract.md
   Собрано из каталога блоков среды (catalog/src) 2026-10-15: report/port/port.cjs.
   Порядок: общая основа блоков (catalog/src/base.css поверх kit/c2l-base.css, мессенджеры) → блоки в порядке страницы.
   Адаптив — @container c2l (корень .c2l назван контейнером c2l); правила ширины корня перенесены на .c2l-<блок>__in. */

/* ============ основа блоков ============ */

/* Палитра интерфейсов продукта и сцен: жёсткие цвета вынесены в токены (контракт: цвета — из токенов) */
.c2l {
  --c2l-ui-c1: #000;
  --c2l-ui-c2: rgb(16 40 70 / 0.12);
  --c2l-ui-c3: #fff;
  --c2l-ui-c4: rgb(60 60 67 / 0.29);
  --c2l-ui-c5: #3390ec;
  --c2l-ui-c6: rgb(0 0 0 / 0.12);
}

.c2l {
  container-name: c2l;
}

.c2l {
  --c2l-blue: #1E63B8;
  --c2l-blue-hover: #1A559E;
  --c2l-blue-5: #F3F7FB;
  --c2l-blue-10: #E9F0F8;
  --c2l-blue-25: #C6D8ED;
  --c2l-blue-50: #8FB1DC;
  --c2l-white: #FFFFFF;
  --c2l-ink: #212121;
  --c2l-muted: #5D6A76;
  --c2l-gray-5: #F7F8F8;
  --c2l-gray-10: #EFF0F1;
  --c2l-gray-16: #E5E7E9;
  --c2l-gray-20: #DFE1E4;
  --c2l-gray-28: #D2D5D9;
  --c2l-sky: #E0F2FC;
  --c2l-sky-2: #BFE4F8;
  --c2l-mint: #E6F7E9;
  --c2l-mint-2: #C6EBCD;
  --c2l-lilac: #EEE7FF;
  --c2l-lilac-2: #DACCFF;
  --c2l-sand: #FCF9EC;
  --c2l-sand-2: #F4E8B9;
  --c2l-navy-900: #0A1524;
  --c2l-navy-800: #0D1C30;
  --c2l-navy-700: #15263C;
  --c2l-navy-600: #1E3048;
  --c2l-on-dark: #FFFFFF;
  --c2l-on-dark-muted: #A6B6C9;
  --c2l-on-dark-accent: var(--c2l-blue-50);
  --c2l-navy-bg: linear-gradient(180deg, var(--c2l-navy-900) 0%, var(--c2l-navy-800) 100%);
  --c2l-bw: 1px;
  --c2l-bw-2: 2px;
  --c2l-line: var(--c2l-gray-20);
  --c2l-line-strong: var(--c2l-gray-28);
  --c2l-line-dark: rgb(255 255 255 / 0.12);
  --c2l-line-dark-strong: rgb(255 255 255 / 0.24);
  --c2l-focus: 3px solid var(--c2l-blue);
  --c2l-focus-offset: 3px;
  --c2l-shadow-1: 0 1px 2px rgb(10 21 36 / 0.06), 0 2px 6px rgb(10 21 36 / 0.06);
  --c2l-shadow-2: 0 2px 4px rgb(10 21 36 / 0.04), 0 16px 40px -16px rgb(10 21 36 / 0.2);
  --c2l-r-xs: 8px;
  --c2l-r-s: 12px;
  --c2l-r-m: 20px;
  --c2l-r-l: 28px;
  --c2l-r-2xl: 40px;
  --c2l-r-pill: 999px;
  --c2l-sp-1: 4px;
  --c2l-sp-2: 8px;
  --c2l-sp-3: 12px;
  --c2l-sp-4: 16px;
  --c2l-sp-5: 24px;
  --c2l-sp-6: 32px;
  --c2l-sp-7: 40px;
  --c2l-sp-8: 48px;
  --c2l-sp-9: 64px;
  --c2l-sp-10: 80px;
  --c2l-sp-11: 96px;
  --c2l-sp-12: 128px;
  --c2l-section-y: var(--c2l-sp-12);
  --c2l-panel-x: var(--c2l-sp-9);
  --c2l-card-pad: var(--c2l-sp-7);
  --c2l-grid-gap: var(--c2l-sp-5);
  --c2l-gap-in: var(--c2l-sp-2);
  --c2l-gap-group: var(--c2l-sp-5);
  --c2l-gap-part: var(--c2l-sp-9);
  --c2l-inline: var(--c2l-sp-3);
  --c2l-font: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --c2l-fw-bold: 700;
  --c2l-fw-semi: 600;
  --c2l-fw-medium: 500;
  --c2l-fw-regular: 400;
  --c2l-fs-display: 88px;
  --c2l-lh-display: 1;
  --c2l-fs-h1: 64px;
  --c2l-lh-h1: 1.05;
  --c2l-fs-h2: 48px;
  --c2l-lh-h2: 1.1;
  --c2l-fs-h3: 40px;
  --c2l-lh-h3: 1.2;
  --c2l-fs-h4: 33px;
  --c2l-lh-h4: 1.2;
  --c2l-fs-xl: 24px;
  --c2l-lh-xl: 1.3;
  --c2l-fs-lg: 22px;
  --c2l-lh-lg: 1.4;
  --c2l-fs-md: 18px;
  --c2l-lh-md: 1.5;
  --c2l-fs-sm: 16px;
  --c2l-lh-sm: 1.5;
  --c2l-fs-xs: 14px;
  --c2l-lh-xs: 1.5;
  --c2l-btn-h: 56px;
  --c2l-btn-x: var(--c2l-sp-6);
  --c2l-skl-0: rgb(93 106 118 / 0.06);
  --c2l-skl-1: rgb(93 106 118 / 0.11);
  --c2l-skl-2: rgb(93 106 118 / 0.18);
  --c2l-skl-3: rgb(93 106 118 / 0.3);
  --c2l-skd-0: rgb(255 255 255 / 0.03);
  --c2l-skd-1: rgb(255 255 255 / 0.075);
  --c2l-skd-2: rgb(255 255 255 / 0.12);
  --c2l-skd-3: rgb(255 255 255 / 0.2);
  --c2l-skd-4: rgb(255 255 255 / 0.26);
  --c2l-skd-line: rgb(255 255 255 / 0.5);
  --c2l-sk-0: var(--c2l-skl-0);
  --c2l-sk-1: var(--c2l-skl-1);
  --c2l-sk-2: var(--c2l-skl-2);
  --c2l-sk-3: var(--c2l-skl-3);
  --c2l-sk-w: var(--c2l-white);
  --c2l-sk-l: var(--c2l-skl-2);
  --c2l-dot-step: 14px;
  --c2l-dot-r: 1.15px;
  --c2l-dot-on-scene: rgb(255 255 255 / 0.09);
  --c2l-dot-on-sky: rgb(255 255 255 / 0.34);
  --c2l-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='1.2' fill='%23E5E7E9'/%3E%3C/svg%3E");
  --c2l-dots-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='1.1' fill='%23FFFFFF' fill-opacity='0.1'/%3E%3C/svg%3E");
  --c2l-scene-base: linear-gradient(180deg, var(--c2l-navy-800) 0%, var(--c2l-navy-800) 45%, color-mix(in srgb, var(--c2l-blue) 30%, var(--c2l-navy-900)) 74%, color-mix(in srgb, var(--c2l-blue) 65%, var(--c2l-navy-900)) 100%);
  --c2l-scene-light: radial-gradient(130% 55% at 50% 100%, color-mix(in srgb, color-mix(in srgb, var(--c2l-blue-50) 15%, var(--c2l-blue)) 36%, transparent), transparent 100%);
  --c2l-scene-edge: linear-gradient(180deg, color-mix(in srgb, var(--c2l-blue-50) 18%, transparent), color-mix(in srgb, color-mix(in srgb, var(--c2l-sky-2) 70%, var(--c2l-blue)) 38%, transparent));
  --c2l-sky-base: linear-gradient(180deg, color-mix(in srgb, var(--c2l-sky) 90%, var(--c2l-sky-2)) 0%, color-mix(in srgb, var(--c2l-sky) 15%, var(--c2l-sky-2)) 45%, color-mix(in srgb, var(--c2l-sky-2) 85%, var(--c2l-blue)) 100%);
  --c2l-sky-light: radial-gradient(70% 70% at 50% 110%, color-mix(in srgb, var(--c2l-sky-2) 25%, var(--c2l-blue)) 0%, color-mix(in srgb, color-mix(in srgb, var(--c2l-sky-2) 45%, var(--c2l-blue)) 75%, transparent) 40%, transparent 75%),
    radial-gradient(100% 60% at 12% 100%, color-mix(in srgb, var(--c2l-white) 85%, transparent), transparent 60%),
    radial-gradient(100% 60% at 88% 100%, color-mix(in srgb, var(--c2l-white) 80%, transparent), transparent 60%);
  --c2l-sky-edge: linear-gradient(180deg, color-mix(in srgb, var(--c2l-white) 70%, transparent), color-mix(in srgb, var(--c2l-white) 0%, transparent));
  --c2l-scene-bleed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230A1524'/%3E%3Cstop offset='.5' stop-color='%230D1C30'/%3E%3Cstop offset='.78' stop-color='%23102C50'/%3E%3Cstop offset='1' stop-color='%23174884'/%3E%3C/linearGradient%3E%3Cpattern id='p' width='14' height='14' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='7' cy='7' r='1.15' fill='%23fff' fill-opacity='.09'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23p)'/%3E%3C/svg%3E");
  --c2l-rule: var(--c2l-bw) solid var(--c2l-line);
  --c2l-rule-dark: var(--c2l-bw) solid var(--c2l-line-dark-strong);
  --c2l-card-bg: var(--c2l-blue-5);
  --c2l-ui-fs: 16px;
  --c2l-ui-fs-2: 14px;
  --c2l-ui-fs-3: 13px;
  --c2l-ui-ava: 44px;
  --c2l-ui-ava-s: 22px;
  --c2l-ui-chan: 22px;
  --c2l-scene-h: 640px;
  --c2l-phone-w: 380px;
  --c2l-frag-w: 600px;
  --c2l-logo-h: 40px;
  --c2l-tile-h: 112px;
  --c2l-fs-num: var(--c2l-fs-h3);
  font-family: var(--c2l-font);
  color: var(--c2l-ink);
  font-size: var(--c2l-fs-md);
  line-height: var(--c2l-lh-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

.c2l > * {
  padding-block: var(--c2l-section-y);
  font-size: var(--c2l-fs-md);
  line-height: var(--c2l-lh-md);
}

.c2l :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--c2l-font);
  font-weight: inherit;
  letter-spacing: normal;
}

@container c2l (max-width: 999.98px) {
  .c2l > * {
    --c2l-r-xs: 6px;
    --c2l-r-s: 12px;
    --c2l-r-m: 16px;
    --c2l-r-l: 24px;
    --c2l-r-2xl: 32px;
    --c2l-section-y: var(--c2l-sp-11);
    --c2l-panel-x: var(--c2l-sp-7);
    --c2l-card-pad: var(--c2l-sp-6);
    --c2l-grid-gap: var(--c2l-sp-4);
    --c2l-gap-part: var(--c2l-sp-8);
    --c2l-fs-display: 64px;
    --c2l-fs-h1: 48px;
    --c2l-lh-h1: 1.08;
    --c2l-fs-h2: 38px;
    --c2l-lh-h2: 1.12;
    --c2l-fs-h3: 32px;
    --c2l-fs-h4: 27px;
    --c2l-fs-xl: 21px;
    --c2l-lh-xl: 1.35;
    --c2l-fs-lg: 19px;
    --c2l-fs-md: 17px;
    --c2l-fs-sm: 15px;
    --c2l-fs-xs: 13px;
    --c2l-btn-h: 52px;
    --c2l-btn-x: 28px;
    --c2l-ui-fs: 15px;
    --c2l-ui-fs-2: 13px;
    --c2l-ui-fs-3: 13px;
    --c2l-ui-ava: 40px;
    --c2l-ui-ava-s: 21px;
    --c2l-ui-chan: 20px;
    --c2l-scene-h: 560px;
    --c2l-phone-w: 340px;
    --c2l-logo-h: 34px;
    --c2l-tile-h: 96px;
  }
}

@container c2l (max-width: 699.98px) {
  .c2l > * {
    --c2l-r-xs: 6px;
    --c2l-r-s: 10px;
    --c2l-r-m: 16px;
    --c2l-r-l: 20px;
    --c2l-r-2xl: 24px;
    --c2l-section-y: var(--c2l-sp-9);
    --c2l-panel-x: var(--c2l-sp-5);
    --c2l-card-pad: var(--c2l-sp-5);
    --c2l-grid-gap: var(--c2l-sp-3);
    --c2l-gap-group: var(--c2l-sp-4);
    --c2l-gap-part: var(--c2l-sp-6);
    --c2l-inline: var(--c2l-sp-2);
    --c2l-fs-display: clamp(40px, 14cqi, 52px);
    --c2l-fs-h1: clamp(24px, 9cqi, 34px);
    --c2l-lh-h1: 1.12;
    --c2l-fs-h2: clamp(26px, 8.4cqi, 28px);
    --c2l-lh-h2: 1.18;
    --c2l-fs-h3: 24px;
    --c2l-lh-h3: 1.25;
    --c2l-fs-h4: 21px;
    --c2l-lh-h4: 1.3;
    --c2l-fs-xl: 19px;
    --c2l-fs-lg: 17px;
    --c2l-fs-md: 16px;
    --c2l-fs-sm: 14px;
    --c2l-fs-xs: 13px;
    --c2l-btn-h: 48px;
    --c2l-btn-x: var(--c2l-sp-5);
    --c2l-ui-fs: 14px;
    --c2l-ui-fs-2: 13px;
    --c2l-ui-fs-3: 13px;
    --c2l-ui-ava: 38px;
    --c2l-ui-ava-s: 20px;
    --c2l-ui-chan: 20px;
    --c2l-scene-h: 480px;
    --c2l-phone-w: 300px;
    --c2l-logo-h: 30px;
    --c2l-tile-h: 80px;
  }
}

.c2l *,
.c2l *::before,
.c2l *::after {
  box-sizing: border-box;
}

.c2l :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) {
  margin: 0;
}

.c2l :where(ul, ol) {
  padding: 0;
  list-style: none;
}

.c2l-scene {
  --c2l-sk-0: var(--c2l-skd-0);
  --c2l-sk-1: var(--c2l-skd-1);
  --c2l-sk-2: var(--c2l-skd-2);
  --c2l-sk-3: var(--c2l-skd-3);
  --c2l-sk-w: color-mix(in srgb, var(--c2l-white) 5.5%, transparent);
  --c2l-sk-l: var(--c2l-line-dark);
  position: relative;
  overflow: hidden;
  border: var(--c2l-bw) solid transparent;
  border-radius: var(--c2l-r-l);
  background:
    radial-gradient(circle, var(--c2l-dot-on-scene) var(--c2l-dot-r), transparent calc(var(--c2l-dot-r) + 0.5px)) 0 0 / var(--c2l-dot-step) var(--c2l-dot-step) padding-box,
    var(--c2l-scene-light) padding-box,
    var(--c2l-scene-base) padding-box,
    var(--c2l-scene-edge) border-box;
  color: var(--c2l-on-dark);
}

.c2l-scene--sky {
  --c2l-sk-0: var(--c2l-skl-0);
  --c2l-sk-1: var(--c2l-skl-1);
  --c2l-sk-2: var(--c2l-skl-2);
  --c2l-sk-3: var(--c2l-skl-3);
  --c2l-sk-w: var(--c2l-white);
  --c2l-sk-l: var(--c2l-skl-2);
  background:
    radial-gradient(circle, var(--c2l-dot-on-sky) var(--c2l-dot-r), transparent calc(var(--c2l-dot-r) + 0.5px)) 0 0 / var(--c2l-dot-step) var(--c2l-dot-step) padding-box,
    var(--c2l-sky-light) padding-box,
    var(--c2l-sky-base) padding-box,
    var(--c2l-sky-edge) border-box;
  background-clip: padding-box, padding-box, padding-box, padding-box, padding-box, border-box;
  color: var(--c2l-ink);
}

.c2l-cols > * + * {
  border-block-start: var(--c2l-rule);
}

@container c2l (min-width: 700px) {
  .c2l-cols > * + * {
    border-block-start: 0;
    border-inline-start: var(--c2l-rule);
  }
}

.c2l-h2 {
  font-size: var(--c2l-fs-h2);
  font-weight: 600;
  line-height: var(--c2l-lh-h2);
  text-wrap: balance;
}

.c2l-text {
  color: var(--c2l-muted);
  font-size: var(--c2l-fs-md);
  line-height: var(--c2l-lh-md);
  text-wrap: pretty;
}

.c2l-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--c2l-sp-2);
  min-block-size: var(--c2l-btn-h);
  padding-inline: var(--c2l-btn-x);
  border: var(--c2l-bw) solid transparent;
  border-radius: var(--c2l-r-pill);
  font-family: var(--c2l-font);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-size: var(--c2l-fs-md);
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.c2l-btn svg {
  flex: none;
  inline-size: 1.1em;
  block-size: 1.1em;
}

.c2l-btn--primary {
  background: var(--c2l-blue);
  color: var(--c2l-white);
}

.c2l-btn--secondary {
  background: var(--c2l-gray-10);
  color: var(--c2l-ink);
}

.c2l-btn:focus-visible,
.c2l-focus:focus-visible {
  outline: var(--c2l-focus);
  outline-offset: var(--c2l-focus-offset);
}

@media (hover: hover) {
  .c2l-btn--primary:hover {
    background: var(--c2l-blue-hover);
  }

  .c2l-btn--secondary:hover {
    background: var(--c2l-gray-16);
  }

  .c2l-btn:hover svg {
    translate: var(--c2l-bw-2) 0;
  }
}

.c2l-btn--primary:active {
  background: var(--c2l-blue-hover);
}

@media (prefers-reduced-motion: no-preference) {
  .c2l-btn {
    transition-property: background-color, border-color, scale;
    transition-duration: 150ms;
    transition-timing-function: ease-out;
  }

  .c2l-btn svg {
    transition-property: translate;
    transition-duration: 150ms;
    transition-timing-function: ease-out;
  }

  .c2l-btn:active {
    scale: 0.96;
  }
}

.c2l-ico {
  flex: none;
}

.c2l-mark {
  flex: none;
  display: inline-block;
  inline-size: 1.25em;
  block-size: 1.25em;
  border-radius: 50%;
  background: var(--c2l-sk-2);
}

.c2l-chan {
  background: none;
  object-fit: contain;
}

.c2l-icon {
  --c2l-icon-size: 48px;
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: var(--c2l-icon-size);
  block-size: var(--c2l-icon-size);
  border-radius: calc(var(--c2l-icon-size) * 0.28);
  background: linear-gradient(180deg, var(--c2l-blue-5) 0%, var(--c2l-blue-10) 100%);
  color: var(--c2l-blue);
}

.c2l-icon__glyph {
  inline-size: 56%;
  block-size: 56%;
}

.c2l-has-ink {
  position: relative;
  isolation: isolate;
}

.c2l-tab-ink {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: -1;
  border-radius: var(--c2l-ink-r, var(--c2l-r-pill));
  background: var(--c2l-ink-bg, var(--c2l-gray-10));
  box-shadow: var(--c2l-ink-shadow, none);
  pointer-events: none;
}

.c2l-has-ink [role="tab"][aria-selected="true"] {
  background: transparent;
  box-shadow: none;
}

@media (prefers-reduced-motion: no-preference) {
  .c2l-tab-ink {
    transition-property: transform, inline-size, block-size;
    transition-duration: 320ms;
    transition-timing-function: cubic-bezier(0.3, 0, 0, 1);
  }

  .c2l [role="tabpanel"]:not([hidden]) {
    animation: c2l-panel-in 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}

@keyframes c2l-panel-in {
  from {
    opacity: 0;
    translate: 0 var(--c2l-sp-2);
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

.c2l-msgr {
  --c2l-msgr-fs: var(--c2l-ui-fs, 19px);
  --c2l-msgr-r: 32px;
  position: relative;
  display: block;
  inline-size: 100%;
  font-size: var(--c2l-msgr-fs);
  line-height: 1.3;
  text-align: start;
  letter-spacing: 0;
}

.c2l-msgr__screen {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  overflow: hidden;
  border-radius: var(--c2l-msgr-r);
  background: var(--c2l-msgr-wall);
  color: var(--c2l-ui-c1);
  box-shadow: 0 0 0 1px var(--c2l-msgr-edge, var(--c2l-ui-c2));
}

.c2l-msgr__sys {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  padding: 0.85em 1.7em 0.35em 2em;
  background: var(--c2l-msgr-bar);
  color: var(--c2l-msgr-bar-ink);
  font-size: max(13px, 0.95em);
}

.c2l-msgr__sys b {
  font-weight: 600;
}

.c2l-msgr__sysic {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  block-size: 0.75em;
}

.c2l-msgr__sysic i {
  inline-size: 3px;
  border-radius: 1px;
  background: currentColor;
}

.c2l-msgr__sysic i:nth-child(1) {
  block-size: 40%;
}

.c2l-msgr__sysic i:nth-child(2) {
  block-size: 65%;
}

.c2l-msgr__sysic i:nth-child(3) {
  block-size: 100%;
}

.c2l-msgr__sysic i:nth-child(4) {
  inline-size: 1.55em;
  block-size: 100%;
  margin-inline-start: 0.35em;
  border-radius: 3px;
  background: linear-gradient(90deg, currentColor 72%, transparent 72%);
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 45%, transparent);
}

.c2l-msgr__bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.6em;
  padding: 0.45em 0.9em 0.6em;
  background: var(--c2l-msgr-bar);
  color: var(--c2l-msgr-bar-ink);
}

.c2l-msgr__who {
  display: grid;
  flex: 1;
  min-inline-size: 0;
}

.c2l-msgr__who b {
  overflow: hidden;
  font-weight: 600;
  font-size: 1.07em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c2l-msgr__who small {
  overflow: hidden;
  font-size: max(13px, 0.85em);
  color: var(--c2l-msgr-bar-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c2l-msgr__ava {
  flex: none;
  inline-size: 2.45em;
  block-size: 2.45em;
  border-radius: 50%;
  object-fit: cover;
}

.c2l-msgr__ava--txt {
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c2l-ava) 70%, var(--c2l-ui-c3)), var(--c2l-ava));
  color: var(--c2l-ui-c3);
  font-weight: 600;
  font-size: max(13px, 0.95em);
}

.c2l-msgr__ico {
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: 1.6em;
  block-size: 1.6em;
}

.c2l-msgr svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.c2l-msgr__feed {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: 0;
  overflow: hidden;
}

.c2l-msgr__flow {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: 0.8em 0.75em 0.7em;
}

.c2l-msgr__msg {
  position: relative;
  max-inline-size: 82%;
  padding: 0.42em 0.7em 0.45em;
  border-radius: var(--c2l-msgr-br);
  background: var(--c2l-msgr-in);
  overflow-wrap: anywhere;
}

.c2l-msgr__msg--in {
  align-self: flex-start;
}

.c2l-msgr__tx::after {
  content: "";
  display: inline-block;
  inline-size: var(--c2l-msgr-meta-w, 3.1em);
}

.c2l-msgr__meta {
  position: absolute;
  inset-inline-end: 0.65em;
  inset-block-end: 0.32em;
  display: flex;
  align-items: center;
  gap: 0.2em;
  color: var(--c2l-msgr-time);
  font-size: max(13px, 0.74em);
  white-space: nowrap;
}

@keyframes c2l-msgr-dot {
  0%,
  60%,
  100% {
    opacity: 0.35;
    translate: 0 0;
  }

  30% {
    opacity: 1;
    translate: 0 -0.18em;
  }
}

.c2l-msgr__input {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.55em;
  padding: 0.5em 0.75em 1.35em;
  background: var(--c2l-msgr-inbar);
  color: var(--c2l-msgr-inicon);
}

.c2l-msgr__field {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.4em;
  min-inline-size: 0;
  min-block-size: 2.3em;
  padding-inline: 0.8em 0.5em;
  border-radius: 1.2em;
  background: var(--c2l-ui-c3);
}

.c2l-msgr__ph {
  flex: 1;
  color: var(--c2l-msgr-ph);
}

.c2l-msgr--tg {
  --c2l-msgr-wall: linear-gradient(rgb(236 244 226 / 0.5), rgb(236 244 226 / 0.5)), url("/tpl/images/rassylki-v-messendzherah/wp-telegram-ios.webp") center / cover, #A9CD8C;
  --c2l-msgr-bar: #fff;
  --c2l-msgr-bar-ink: #000;
  --c2l-msgr-bar-muted: #8E8E93;
  --c2l-msgr-in: #fff;
  --c2l-msgr-out: #EFFEDD;
  --c2l-msgr-br: 1.15em;
  --c2l-msgr-time: #A0ABB5;
  --c2l-msgr-time-out: #5DB15A;
  --c2l-msgr-ticks: #4FAE4E;
  --c2l-msgr-note: rgb(50 82 38 / 0.42);
  --c2l-msgr-note-ink: #fff;
  --c2l-msgr-inbar: #fff;
  --c2l-msgr-inicon: #8E8E93;
  --c2l-msgr-ph: #A2A2A7;
  font-family: var(--c2l-font);
}

.c2l-msgr--tg .c2l-msgr__bar {
  border-block-end: 1px solid var(--c2l-ui-c4);
}

.c2l-msgr--tg .c2l-msgr__input {
  border-block-start: 1px solid var(--c2l-ui-c4);
}

.c2l-msgr--tg .c2l-msgr__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
}

.c2l-msgr--tg .c2l-msgr__bar > .c2l-msgr__ava {
  justify-self: end;
}

.c2l-msgr--tg .c2l-msgr__who {
  text-align: center;
}

.c2l-msgr__back {
  display: flex;
  flex: none;
  align-items: center;
  min-inline-size: 0;
  color: var(--c2l-ui-c5);
  font-size: 1.02em;
}

.c2l-msgr__back svg {
  inline-size: 1.2em;
  block-size: 1.3em;
}

.c2l-msgr--tg .c2l-msgr__msg:not(.c2l-is-cont)::before {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inline-size: 0.75em;
  block-size: 1.05em;
  background: inherit;
}

.c2l-msgr--tg .c2l-msgr__msg--in:not(.c2l-is-cont) {
  border-end-start-radius: 0.3em;
}

.c2l-msgr--tg .c2l-msgr__msg--in:not(.c2l-is-cont)::before {
  inset-inline-start: -0.42em;
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 40% 80%, 75% 45%);
}

.c2l-msgr--tg .c2l-msgr__field {
  box-shadow: inset 0 0 0 1px var(--c2l-ui-c6);
}

@keyframes c2l-beat-in {
  from {
    opacity: 0;
    translate: 0 0.5em;
    scale: 0.97;
  }

  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

.c2l + .c2l {
  margin-block-start: var(--c2l-space-section);
}

.c2l > [class$="__in"] {
  padding-block: 0;
}

.c2l:first-child {
  padding-block-start: 32px;
}

.c2l :where(h1,h2,h3) {
  text-wrap: balance;
}

.c2l :where(p) {
  text-wrap: pretty;
}

.c2l .c2l-btn {
  min-block-size:56px;
  border-radius:var(--c2l-r-btn);
}

.c2l [data-c2l-site-block] {
  margin-block-start: var(--c2l-space-section);
}

/* ============ c2l-hero-window ============ */
.c2l-hero-window__in {
  padding-block: var(--c2l-sp-8) var(--c2l-sp-8);
  text-align: center;
}

.c2l-hero-window__intro {
  display: grid;
  justify-items: center;
}

.c2l-hero-window__title {
  max-inline-size: 14em;
  font-size: var(--c2l-fs-h1);
  line-height: var(--c2l-lh-h1);
  font-weight: 600;
  text-wrap: balance;
}

.c2l-hero-window__lede {
  max-inline-size: 34em;
  margin-block-start: var(--c2l-sp-4);
  color: var(--c2l-muted);
  font-size: var(--c2l-fs-lg);
  line-height: var(--c2l-lh-lg);
  text-wrap: pretty;
}

.c2l-hero-window__actions {
  display: grid;
  gap: var(--c2l-sp-2);
  inline-size: 100%;
  margin-block-start: var(--c2l-sp-5);
}

@container c2l (min-width: 700px) {
  .c2l-hero-window__in {
    padding-block: var(--c2l-sp-10) var(--c2l-sp-10);
  }

  .c2l-hero-window__title {
    max-inline-size: 15em;
  }

  .c2l-hero-window__lede {
    max-inline-size: 31em;
    margin-block-start: var(--c2l-sp-5);
    text-wrap: balance;
  }

  .c2l-hero-window__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--c2l-sp-3);
    inline-size: auto;
    margin-block-start: var(--c2l-sp-6);
  }
}

@container c2l (min-width: 1000px) {
  .c2l-hero-window__in {
    padding-block: var(--c2l-sp-12) var(--c2l-sp-12);
  }

  .c2l-hero-window__title {
    max-inline-size: 17em;
  }

  .c2l-hero-window__lede {
    max-inline-size: 36em;
    margin-block-start: var(--c2l-sp-5);
  }

  .c2l-hero-window__actions {
    margin-block-start: var(--c2l-sp-7);
  }
}

/* ============ c2l-scenario-tabs ============ */
.c2l-scenario-tabs__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "text" "tabs" "scene";
  gap: var(--c2l-sp-6);
}

.c2l-scenario-tabs__head {
  grid-area: head;
}

.c2l-scenario-tabs__text {
  grid-area: text;
}

.c2l-scenario-tabs__tabs {
  grid-area: tabs;
}

.c2l-scenario-tabs__scene {
  grid-area: scene;
}

.c2l-scenario-tabs__head {
  display: flex;
  align-items: center;
  gap: var(--c2l-sp-4);
}

.c2l-scenario-tabs__title {
  font-size: var(--c2l-fs-h2);
  line-height: var(--c2l-lh-h2);
  font-weight: 500;
  text-wrap: balance;
}

.c2l-scenario-tabs__desc {
  max-inline-size: 30em;
  color: var(--c2l-muted);
  font-size: var(--c2l-fs-lg);
  line-height: var(--c2l-lh-lg);
  text-wrap: pretty;
}

.c2l-scenario-tabs__scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--c2l-sp-5) var(--c2l-sp-4) 0;
}

.c2l-scenario-tabs__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: end;
  gap: var(--c2l-sp-4);
}

.c2l-scenario-tabs__panel[hidden] {
  display: none;
}

.c2l-scenario-tabs__phone {
  inline-size: min(100%, var(--c2l-phone-w));
  block-size: 480px;
}

.c2l-scenario-tabs__phone .c2l-msgr__screen {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.c2l-scenario-tabs__tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-self: start;
  inline-size: fit-content;
  max-inline-size: 100%;
  gap: var(--c2l-sp-1);
  padding: var(--c2l-sp-1);
  border: var(--c2l-rule);
  border-radius: var(--c2l-r-pill);
}

.c2l-scenario-tabs__tab {
  min-block-size: 44px;
  padding-inline: var(--c2l-sp-3);
  border: 0;
  border-radius: var(--c2l-r-pill);
  background: transparent;
  color: var(--c2l-muted);
  font-family: var(--c2l-font);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-size: var(--c2l-fs-md);
  line-height: var(--c2l-lh-md);
  font-weight: 600;
  cursor: pointer;
}

.c2l-scenario-tabs__tab[aria-selected="true"] {
  background: var(--c2l-gray-10);
  color: var(--c2l-ink);
}

@media (hover: hover) {
  .c2l-scenario-tabs__tab:hover {
    color: var(--c2l-ink);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .c2l-scenario-tabs__tab {
    transition-property: background-color, color;
    transition-duration: 150ms;
    transition-timing-function: ease-out;
  }
}

@keyframes c2l-scenario-tabs-swap {
  from {
    opacity: 0.35;
  }

  to {
    opacity: 1;
  }
}

@container c2l (min-width: 700px) {
  .c2l-scenario-tabs__scene {
    padding: var(--c2l-sp-6) var(--c2l-sp-6) 0;
  }

  .c2l-scenario-tabs__phone {
    inline-size: min(100%, var(--c2l-phone-w));
    block-size: 520px;
  }
}

@container c2l (min-width: 1000px) {
  .c2l-scenario-tabs__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 50%);
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas:
      ".    scene"
      "head scene"
      "text scene"
      "tabs scene"
      ".    scene";
    column-gap: 6%;
    row-gap: 0;
  }

  .c2l-scenario-tabs__head {
    gap: var(--c2l-sp-5);
  }

  .c2l-scenario-tabs__title {
    max-inline-size: 13em;
  }

  .c2l-scenario-tabs__text {
    margin-block-start: var(--c2l-sp-6);
  }

  .c2l-scenario-tabs__tabs {
    margin-block-start: var(--c2l-sp-8);
  }

  .c2l-scenario-tabs__tab {
    min-block-size: 56px;
    padding-inline: var(--c2l-sp-5);
  }

  .c2l-scenario-tabs__phone {
    inline-size: min(100%, var(--c2l-phone-w));
    block-size: 560px;
  }
}

@container c2l (max-width: 699.98px) {
  .c2l-scenario-tabs__tabs {
    flex-wrap: nowrap;
    gap: 0;
    justify-self: center;
  }

  .c2l-scenario-tabs__tab {
    padding-inline: var(--c2l-sp-2);
    font-size: var(--c2l-fs-sm);
    white-space: nowrap;
  }
}

@container c2l (max-width: 339.98px) {
  .c2l-scenario-tabs__tabs {
    flex-wrap: wrap;
    border-radius: var(--c2l-r-l);
  }
}

/* ============ c2l-compare-rows ============ */
.c2l-compare-rows__title {
  max-inline-size: 12em;
  font-size: var(--c2l-fs-h2);
  line-height: var(--c2l-lh-h2);
  font-weight: 500;
  text-wrap: balance;
}

@container c2l (min-width: 1000px) {
  .c2l-compare-rows__title {
    font-weight: 400;
  }
}

/* ============ c2l-feature-trio ============ */
.c2l-feature-trio__title {
  max-inline-size: 14em;
  font-size: var(--c2l-fs-h2);
  line-height: var(--c2l-lh-h2);
  font-weight: 550;
  text-wrap: balance;
}

.c2l-feature-trio__list {
  display: grid;
  gap: var(--c2l-sp-6);
  margin-block-start: var(--c2l-sp-6);
}

.c2l-feature-trio__text {
  margin-block-start: var(--c2l-sp-2);
  color: var(--c2l-ink);
  font-size: var(--c2l-fs-xl);
  line-height: var(--c2l-lh-xl);
  text-wrap: pretty;
}

@container c2l (min-width: 700px) {
  .c2l-feature-trio__list {
    margin-block-start: var(--c2l-sp-8);
  }
}

@container c2l (min-width: 700px) and (max-width: 999.98px) {
  .c2l-feature-trio__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--c2l-sp-6);
  }

  .c2l-feature-trio__item {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: var(--c2l-sp-6);
    align-items: center;
  }

  .c2l-feature-trio__text {
    align-self: start;
  }
}

@container c2l (min-width: 1000px) {
  .c2l-feature-trio__title {
    font-weight: 500;
  }

  .c2l-feature-trio__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--c2l-sp-5);
    margin-block-start: var(--c2l-sp-11);
  }

  .c2l-feature-trio__text {
    margin-block-start: var(--c2l-sp-3);
  }
}

/* ============ c2l-feature-grid ============ */
.c2l-feature-grid__head {
  margin-block-end: var(--c2l-sp-7);
}

.c2l-feature-grid__cells {
  --c2l-lat-cols: 1;
  --c2l-lat-rows: 6;
  display: grid;
  grid-auto-rows: 1fr;
  background: var(--c2l-white);
}

.c2l-feature-grid__cell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  align-items: center;
  column-gap: var(--c2l-sp-4);
  padding: var(--c2l-sp-5) var(--c2l-sp-5) var(--c2l-sp-6);
}

.c2l-feature-grid__icon {
  --c2l-icon-size: 44px;
}

.c2l-feature-grid__name {
  font-size: var(--c2l-fs-xl);
  line-height: var(--c2l-lh-xl);
  font-weight: 650;
}

.c2l-feature-grid__text {
  grid-column: 1 / -1;
  margin-block-start: var(--c2l-sp-4);
  color: var(--c2l-muted);
  font-size: var(--c2l-fs-lg);
  line-height: var(--c2l-lh-lg);
  text-wrap: pretty;
}

@container c2l (min-width: 700px) {
  .c2l-feature-grid__head {
    margin-block-end: var(--c2l-sp-8);
  }

  .c2l-feature-grid__cells {
    --c2l-lat-cols: 2;
    --c2l-lat-rows: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c2l-feature-grid__cell {
    padding: var(--c2l-sp-6) var(--c2l-sp-6) var(--c2l-sp-7);
  }
}

@container c2l (min-width: 1000px) {
  .c2l-feature-grid__head {
    margin-block-end: var(--c2l-sp-9);
  }

  .c2l-feature-grid__cells {
    --c2l-lat-cols: 3;
    --c2l-lat-rows: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .c2l-feature-grid__cell {
    min-block-size: 296px;
    padding: var(--c2l-sp-8) var(--c2l-sp-8) var(--c2l-sp-8);
  }

  .c2l-feature-grid__icon {
    --c2l-icon-size: 52px;
  }

  .c2l-feature-grid__text {
    margin-block-start: var(--c2l-sp-5);
  }
}

/* ============ c2l-numbered-trio ============ */
.c2l-numbered-trio__title {
  font-size: var(--c2l-fs-h2);
  line-height: var(--c2l-lh-h2);
  font-weight: 500;
}

.c2l-numbered-trio__list {
  display: grid;
  margin-block-start: var(--c2l-sp-6);
}

.c2l-numbered-trio__item {
  padding: var(--c2l-sp-5) var(--c2l-sp-5) var(--c2l-sp-6);
}

.c2l-numbered-trio__num {
  display: block;
  color: var(--c2l-muted);
  font-size: var(--c2l-fs-h1);
  line-height: var(--c2l-lh-h1);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
}

.c2l-numbered-trio__name {
  margin-block-start: var(--c2l-sp-5);
  font-size: var(--c2l-fs-h4);
  line-height: var(--c2l-lh-h4);
  font-weight: 450;
}

.c2l-numbered-trio__text {
  margin-block-start: var(--c2l-sp-3);
  color: var(--c2l-muted);
  font-size: var(--c2l-fs-md);
  line-height: var(--c2l-lh-md);
  text-wrap: pretty;
}

@container c2l (min-width: 700px) {
  .c2l-numbered-trio__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container c2l (min-width: 1000px) {
  .c2l-numbered-trio__list {
    margin-block-start: var(--c2l-sp-10);
  }

  .c2l-numbered-trio__item {
    padding: var(--c2l-sp-9) var(--c2l-sp-9) var(--c2l-sp-9);
  }

  .c2l-numbered-trio__name {
    margin-block-start: var(--c2l-sp-9);
  }

  .c2l-numbered-trio__text {
    margin-block-start: var(--c2l-sp-5);
  }
}

/* ============ c2l-cost-rows ============ */
.c2l-cost-rows__head {
  display: grid;
  gap: var(--c2l-gap-group);
}

.c2l-cost-rows__title {
  max-inline-size: 12em;
  font-size: var(--c2l-fs-h2);
  line-height: var(--c2l-lh-h2);
  font-weight: 500;
  text-wrap: balance;
}

.c2l-cost-rows__lead {
  max-inline-size: 30em;
  color: var(--c2l-muted);
  font-size: var(--c2l-fs-lg);
  line-height: var(--c2l-lh-lg);
  text-wrap: pretty;
}

@container c2l (min-width: 700px) {
  .c2l-cost-rows__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--c2l-sp-7);
  }
}

@container c2l (min-width: 1000px) {
  .c2l-cost-rows__head {
    gap: var(--c2l-sp-9);
  }

  .c2l-cost-rows__title {
    font-weight: 400;
  }
}

/* ============ c2l-action-banner ============ */
.c2l-action-banner__in {
  padding-block: var(--c2l-sp-5) var(--c2l-sp-8);
}

.c2l-action-banner__panel {
  display: grid;
  justify-items: center;
  padding: var(--c2l-sp-8) var(--c2l-sp-4) var(--c2l-sp-9);
  text-align: center;
}

.c2l-action-banner__title {
  max-inline-size: 17em;
  color: var(--c2l-ink);
  font-size: var(--c2l-fs-h2);
  line-height: var(--c2l-lh-h2);
  font-weight: 500;
  text-wrap: balance;
}

.c2l-action-banner__lead {
  max-inline-size: 30em;
  margin-block-start: var(--c2l-sp-3);
  color: var(--c2l-ink);
  font-size: var(--c2l-fs-lg);
  line-height: var(--c2l-lh-lg);
  text-wrap: balance;
}

.c2l-action-banner__btn {
  margin-block-start: var(--c2l-sp-5);
}

@container c2l (min-width: 700px) {
  .c2l-action-banner__panel {
    padding: var(--c2l-sp-10) var(--c2l-sp-7) var(--c2l-sp-11);
  }
}

@container c2l (min-width: 1000px) {
  .c2l-action-banner__in {
    padding-block: var(--c2l-sp-8) var(--c2l-sp-11);
  }

  .c2l-action-banner__panel {
    padding: 200px var(--c2l-sp-8) 190px;
  }

  .c2l-action-banner__lead {
    margin-block-start: var(--c2l-sp-4);
  }

  .c2l-action-banner__btn {
    margin-block-start: var(--c2l-sp-7);
  }
}


/* ============ c2l-mailing-scene ============ */
.c2l-hero-window__intro { max-inline-size:none; padding:40px 16px; margin-inline:auto; }
.c2l-hero-window__intro .c2l-hero-window__lede { color:var(--c2l-ink); }
.c2l-hero-window__logo { display:none; }
.c2l-hero-window__title { max-inline-size: 16em; }
.c2l-mailing-scene { display:grid; gap:32px; margin-block-start:48px; padding:32px 20px; text-align:left; }
.c2l-mailing-scene__thesis { color:var(--c2l-ink); font-size:var(--c2l-fs-h4); line-height:1.3; font-weight:600; text-wrap:balance; }
.c2l-mailing-scene__thesis span { color:var(--c2l-blue); }
.c2l-mailing-scene__desc { margin-block-start:16px; color:var(--c2l-muted); font-size:var(--c2l-fs-md); line-height:1.5; max-inline-size:28em; }
.c2l-mailing-scene__route { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-block-start:24px; font-size:16px; }
.c2l-mailing-scene__route > span { display:flex; align-items:center; gap:8px; padding:12px; border-radius:var(--c2l-r-s); background:var(--c2l-white); }
.c2l-mailing-scene__route svg,.c2l-mailing-scene__mark { inline-size:24px; block-size:24px; }
.c2l-mailing-scene__window { min-inline-size:0; align-self:center; background:var(--c2l-white); box-shadow:var(--c2l-shadow-md); border-radius:10px; overflow:hidden; text-align:left; }
.c2l-mailing-scene__apphead { padding:16px 20px; border-bottom:1px solid var(--c2l-c-line); font-size:16px; font-weight:600; }
.c2l-mailing-scene__body { padding:24px 20px 32px; }
.c2l-mailing-scene__ui-title { display:block; font-size:16px; line-height:1.4; font-weight:600; }
.c2l-mailing-scene__ui-hint { margin-block-start:8px; font-size:13px; color:var(--c2l-c-text-2); line-height:1.5; }
.c2l-mailing-scene__fields { display:grid; gap:16px; margin-block-start:24px; font-size:14px; }
.c2l-mailing-scene__fields p { margin-block-end:8px; font-weight:600; }
.c2l-mailing-scene__field { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; min-block-size:40px; border-radius:4px; background:var(--c2l-c-tint); border:1px solid var(--c2l-c-line); }
.c2l-mailing-scene__field svg { inline-size:18px; block-size:18px; color:var(--c2l-blue); transform:rotate(90deg); }
.c2l-mailing-scene__add { margin-block-start:16px; font-size:14px; color:var(--c2l-blue); }
.c2l-mailing-types { display:grid; gap:24px; margin-block-start:32px; text-align:left; }
.c2l-mailing-types li { padding-block-start:20px; border-block-start:1px solid var(--c2l-line); }
.c2l-mailing-types h2 { font-size:var(--c2l-fs-xl); line-height:1.3; font-weight:600; }
.c2l-mailing-types p { font-size:var(--c2l-fs-sm); line-height:1.5; margin-block-start:8px; color:var(--c2l-muted); }
@container c2l (min-width:480px) {
 .c2l-mailing-types { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .c2l-mailing-scene__fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container c2l (min-width:700px) {
 .c2l-hero-window__intro { padding:64px 32px; }
 .c2l-mailing-scene { padding:48px; }
 .c2l-mailing-scene__window { max-inline-size:640px; inline-size:100%; justify-self:center; }
 .c2l-mailing-types { gap:32px; }
 .c2l-mailing-types { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@container c2l (min-width:1000px) {
 .c2l-hero-window__intro { padding:80px 48px; }
 .c2l-mailing-scene { grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); align-items:center; gap:64px; padding:64px; min-block-size:400px; margin-block-start:64px; }
 .c2l-mailing-types { grid-template-columns:repeat(3,minmax(0,1fr)); margin-block-start:40px; }
 .c2l-mailing-scene__thesis { font-size:var(--c2l-fs-h3); }
}
/* ============ c2l-scenario-tabs ============ */
.c2l-scenario-tabs__tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); inline-size:100%; border-radius:var(--c2l-r-s); gap:4px; }
.c2l-scenario-tabs__tab { white-space:normal; min-block-size:56px; border-radius:8px; padding:12px 8px; font-size:var(--c2l-fs-sm); text-align:left; }
.c2l-scenario-tabs__tab[aria-selected="true"] { background:var(--c2l-gray-10); }
.c2l-scenario-tabs__scene { padding:24px 16px; align-items:center; }
.c2l-scenario-tabs__panel { align-content:center; gap:20px; }
.c2l-scenario-tabs__phone { block-size:280px; }
.c2l-mailing-example { color:var(--c2l-muted); font-size:var(--c2l-fs-sm); }
.c2l-mailing-caption { max-inline-size:28em; text-align:center; font-size:var(--c2l-fs-md); color:var(--c2l-ink); line-height:1.5; }
.c2l-scenario-tabs__phone .c2l-msgr__screen { border-radius:inherit; }
.c2l-scenario-tabs .c2l-msgr__meta,.c2l-scenario-tabs .c2l-msgr__ph { color:var(--c2l-c-text-2); }
.c2l-scenario-tabs .c2l-msgr__back { color:var(--c2l-blue); }
@container c2l (min-width:700px) {
 .c2l-scenario-tabs__scene { padding:40px; min-block-size:440px; }
 .c2l-scenario-tabs__phone { block-size:300px; }
}
@container c2l (min-width:1000px) {
 .c2l-scenario-tabs__scene { min-block-size:520px; }
 .c2l-scenario-tabs__tabs { margin-block-start:32px; }
 .c2l-scenario-tabs__tab { min-block-size:64px; padding:12px 16px; }
 .c2l-scenario-tabs__phone { block-size:300px; }
}
/* ============ c2l-feature-grid ============ */
.c2l-feature-grid > .c2l-feature-grid__in { padding:0; background:var(--c2l-white); }
.c2l-feature-grid__cells { grid-template-columns:minmax(0,1fr); gap:var(--c2l-gap); background:transparent; }
.c2l-feature-grid__text { color:var(--c2l-ink); }
.c2l-feature-grid__head { max-inline-size:42em; }
.c2l-feature-grid__cell { min-block-size:0; padding:32px 24px; }
@container c2l (min-width:700px) {
 .c2l-feature-grid__cells { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .c2l-feature-grid__cell:last-child { grid-column:1 / -1; }
}
/* ============ c2l-numbered-trio ============ */
.c2l-numbered-trio__list { background:var(--c2l-c-yellow); }
.c2l-numbered-trio__text { color:var(--c2l-ink); }
@container c2l (min-width:700px) {
 .c2l-numbered-trio__list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container c2l (min-width:1000px) {
 .c2l-numbered-trio__list { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .c2l-numbered-trio__item { padding:32px; }
 .c2l-numbered-trio__name { margin-block-start:24px; font-size:var(--c2l-fs-xl); }
 .c2l-numbered-trio__text { margin-block-start:16px; }
}
/* ============ c2l-action-banner ============ */
.c2l-action-banner__panel { padding:64px 24px; }
.c2l-action-banner__title { max-inline-size:19em; }
.c2l-action-banner { margin-block-end:var(--c2l-space-section); }
@container c2l (min-width:1000px) {
 .c2l-action-banner__panel { padding:96px 64px; }
}


/* ============ c2l-mailing editorial: акценты рядом с текстом ============ */
.c2l-mailing-introline { display:flex; align-items:center; justify-content:center; gap:20px; max-inline-size:1120px; }
.c2l-mailing-introline > .c2l-icon { flex:none; }
.c2l-hero-window__intro { padding:32px 0; background:var(--c2l-white); }
.c2l-mailing-scene { padding:24px 0; background:none; }
.c2l-scenario-tabs__scene { background:none; }
.c2l-feature-grid .c2l-feature-grid__cell { background:var(--c2l-white); padding:24px 0; border-block-start:1px solid var(--c2l-line); border-radius:0; }
.c2l-feature-grid .c2l-feature-grid__icon { --c2l-icon-size:56px; }
.c2l-feature-grid__text { max-inline-size:42em; }
.c2l-numbered-trio .c2l-numbered-trio__list { background:var(--c2l-white); }
.c2l-numbered-trio__num { color:var(--c2l-blue); }
.c2l-action-banner__panel { background:var(--c2l-white); padding:32px 0; }
.c2l-mailing-link { display:inline-flex; align-items:center; min-block-size:56px; color:var(--c2l-blue); font-size:var(--c2l-fs-md); line-height:1.5; text-decoration:underline; text-underline-offset:4px; }
.c2l-mailing-link:hover { color:var(--c2l-blue-hover); }
.c2l-mailing-link:focus-visible { outline:3px solid var(--c2l-blue); outline-offset:4px; }
.c2l-mailing-guide { margin-block-start:16px; }
.c2l-mailing-note { margin-block-start:24px; font-size:var(--c2l-fs-md); line-height:1.5; color:var(--c2l-ink); max-inline-size:58em; }
.c2l-mailing-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-block-start:32px; }
.c2l-mailing-iconline { display:flex; align-items:center; gap:16px; font-size:var(--c2l-fs-xl); line-height:1.3; font-weight:600; }
.c2l-mailing-iconline > .c2l-icon { flex:none; }
.c2l-mailing-preparation { margin-block-start:24px; display:grid; gap:16px; max-inline-size:70em; }
.c2l-mailing-outcomes { display:grid; gap:32px; margin-block-start:40px; }
.c2l-mailing-outcomes h3 { color:var(--c2l-blue); font-size:var(--c2l-fs-xl); line-height:1.3; }
.c2l-mailing-outcomes p { margin-block-start:12px; }
.c2l-feature-trio__list { margin-block-start:32px; }
.c2l-feature-trio__item { display:block; padding-block-start:24px; border-block-start:1px solid var(--c2l-line); }
.c2l-feature-trio__text { font-size:var(--c2l-fs-md); line-height:1.5; }
.c2l-case-columns__card { padding:24px 0; background:var(--c2l-white); border-radius:0; }
.c2l-case-columns__text { font-size:var(--c2l-fs-md); line-height:1.5; }
.c2l-case-columns__title { max-inline-size:22em; }
.c2l-case-columns__about,.c2l-case-columns__brand { line-height:1.5; }
.c2l-mailing-result { color:var(--c2l-blue); font-size:var(--c2l-fs-h3); line-height:1.2; }
.c2l-compare-rows__title,.c2l-cost-rows__title { max-inline-size:20em; }
.c2l-compare-rows__table,.c2l-cost-rows__table { margin-block-start:32px; }
.c2l-compare-rows__table th,.c2l-cost-rows__table th { font-weight:600; }
.c2l-compare-rows__table thead .c2l-compare-rows__us,.c2l-cost-rows__table thead .c2l-cost-rows__us { background:none; color:var(--c2l-blue); }
.c2l-compare-rows__row td.c2l-compare-rows__us,.c2l-cost-rows__row td.c2l-cost-rows__us { background:none; font-weight:400; }
.c2l-compare-rows__row td.c2l-compare-rows__them,.c2l-cost-rows__row td.c2l-cost-rows__them { color:var(--c2l-ink); }
@container c2l (min-width:700px) {
 .c2l-hero-window__intro { padding:48px 0; }
 .c2l-mailing-scene { padding:40px 0; }
 .c2l-mailing-outcomes { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .c2l-compare-rows__row td,.c2l-cost-rows__row td { font-size:var(--c2l-fs-md); line-height:1.5; }
 .c2l-compare-rows__param,.c2l-cost-rows__param { font-size:var(--c2l-fs-xl); line-height:1.3; }
 .c2l-feature-trio__item { display:block; }
}
@container c2l (min-width:1000px) {
 .c2l-hero-window__intro { padding:48px 0; }
 .c2l-mailing-scene { padding:40px 0; }
 .c2l-action-banner__panel { padding:48px 0; }
 .c2l-feature-trio__list { margin-block-start:40px; }
 .c2l-compare-rows__head,.c2l-cost-rows__head { align-items:start; }
 .c2l-case-columns__card { padding:32px 0; }
 .c2l-case-columns__col { padding:24px; }
}

/* Только лендинг рассылок: компактный ритм и реальные кадры Figma. */
.c2l { --c2l-space-section:48px; }
.c2l-hero-window { padding-block:24px 0; text-align:start; }
.c2l-mailing-hero-layout { display:grid; gap:24px; align-items:center; }
.c2l-hero-window .c2l-hero-window__intro { padding:0; justify-items:start; text-align:start; }
.c2l-hero-window .c2l-hero-window__title { max-inline-size:14em; }
.c2l-hero-window .c2l-hero-window__lede { margin-block-start:20px; max-inline-size:31em; }
.c2l-hero-window .c2l-hero-window__actions { justify-content:start; gap:16px; margin-block-start:24px; }
.c2l-mailing-hero-visual { min-inline-size:0; padding:24px 16px; border-radius:var(--c2l-r-l); background:var(--c2l-c-lilac); }
.c2l-mailing-channel-art { display:flex; align-items:center; gap:20px; margin-block-end:20px; }
.c2l-mailing-channel-art > svg { inline-size:48px; block-size:48px; }
.c2l-mailing-channel-art > img { inline-size:64px; block-size:64px; }
.c2l-mailing-channel-art > span { padding:16px; border-radius:var(--c2l-r-m); background:var(--c2l-blue); color:var(--c2l-white); font-size:var(--c2l-fs-xl); font-weight:600; }
.c2l-mailing-visual-title { font-size:var(--c2l-fs-h4); line-height:1.3; font-weight:600; margin-block-end:20px; }
.c2l-mailing-figure { margin:0; min-inline-size:0; }
.c2l-mailing-figure figcaption { margin-block-start:12px; font-size:var(--c2l-fs-sm); line-height:1.4; color:var(--c2l-muted); }
.c2l-mailing-cascade-scroll,.c2l-mailing-report-scroll { overflow-x:auto; border-radius:var(--c2l-r-s); background:var(--c2l-white); }
.c2l-mailing-cascade-scroll:focus-visible,.c2l-mailing-report-scroll:focus-visible { outline:3px solid var(--c2l-blue); outline-offset:4px; }
.c2l-mailing-cascade-scroll > img { display:block; inline-size:550px; max-inline-size:none; block-size:auto; }
.c2l-mailing-report-scroll > img { display:block; inline-size:520px; max-inline-size:none; block-size:auto; }
.c2l-mailing-types { display:flex; flex-wrap:wrap; gap:16px 24px; margin-block-start:24px; padding-block-start:16px; border-block-start:1px solid var(--c2l-line); }
.c2l-mailing-types li { padding:0; border:0; }
.c2l-mailing-types h2 { font-size:var(--c2l-fs-lg); }
.c2l-mailing-types p { display:none; }
.c2l-scenario-tabs .c2l-scenario-tabs__scene { padding:20px 0; min-block-size:0; }
.c2l-scenario-tabs__tabs { margin-block-start:24px; }
.c2l-feature-grid__cells { margin-block-start:24px; gap:16px 32px; }
.c2l-feature-grid .c2l-feature-grid__cell { display:grid; grid-template-columns:48px minmax(0,1fr); align-content:start; column-gap:16px; padding-block:16px; }
.c2l-feature-grid .c2l-feature-grid__icon { --c2l-icon-size:48px; grid-row:1 / 3; }
.c2l-feature-grid__cell .c2l-feature-grid__name { margin:0; }
.c2l-feature-grid__cell .c2l-feature-grid__text { margin-block-start:8px; }
.c2l-mailing-methods { margin-block-start:24px; }
.c2l-mailing-methods > div,.c2l-mailing-costs > div { padding-block:16px; border-block-start:1px solid var(--c2l-line); }
.c2l-mailing-methods dt,.c2l-mailing-costs dt { font-size:var(--c2l-fs-xl); line-height:1.3; font-weight:600; }
.c2l-mailing-methods dd,.c2l-mailing-costs dd { font-size:var(--c2l-fs-md); line-height:1.5; margin-block-start:8px; color:var(--c2l-muted); }
.c2l-mailing-costs { display:grid; gap:0 32px; margin-block-start:24px; }
.c2l-mailing-launch { display:grid; gap:24px; margin-block-start:24px; }
.c2l-numbered-trio .c2l-numbered-trio__list { display:grid; grid-template-columns:minmax(0,1fr); margin:0; gap:0; border-radius:0; }
.c2l-numbered-trio .c2l-numbered-trio__item { display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; padding:16px 0; border:0; border-block-start:1px solid var(--c2l-line); }
.c2l-numbered-trio .c2l-numbered-trio__num { font-size:var(--c2l-fs-h4); line-height:1.3; }
.c2l-numbered-trio .c2l-numbered-trio__name { margin:0; font-size:var(--c2l-fs-xl); line-height:1.3; }
.c2l-numbered-trio .c2l-numbered-trio__text { margin-block-start:8px; font-size:var(--c2l-fs-md); }
.c2l-mailing-report { min-inline-size:0; padding:20px; border-radius:var(--c2l-r-l); background:var(--c2l-c-sky); }
.c2l-mailing-report > p { margin-block:12px 20px; }
.c2l-mailing-note { margin-block-start:16px; }
.c2l-mailing-actions { margin-block-start:20px; gap:16px; }
.c2l-feature-trio__list { gap:24px; margin-block-start:24px; }
.c2l-feature-trio__item { padding-block-start:16px; }
.c2l-action-banner .c2l-action-banner__panel { padding:24px 0; }
@container c2l (min-width:480px) {
 .c2l-mailing-types { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .c2l-mailing-costs { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container c2l (min-width:700px) {
 .c2l-mailing-hero-visual { padding:32px; }
 .c2l-mailing-methods > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:24px; }
 .c2l-mailing-methods dd { margin:0; }
 .c2l-mailing-report-scroll > img { inline-size:100%; max-inline-size:520px; margin-inline:auto; }
}
@container c2l (min-width:1000px) {
 .c2l-mailing-hero-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; }
 .c2l-mailing-hero-visual { padding:32px; }
 .c2l-mailing-launch { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; }
 .c2l-mailing-types { margin-block-start:32px; }
 .c2l-mailing-cascade-scroll > img { inline-size:100%; max-inline-size:550px; }
 .c2l-scenario-tabs .c2l-scenario-tabs__scene { padding:24px 0; }
}

/* Подача из принятого образца internet-magaziny-v2. Только текущий лендинг. */
.c2l-hero-window { --c2l-hero-a:color-mix(in srgb,var(--c2l-lilac-2) 55%,var(--c2l-blue-50)); --c2l-hero-b:color-mix(in srgb,var(--c2l-sky-2) 45%,var(--c2l-blue-50)); }
.c2l-hero-window > .c2l-hero-window__in {
 padding:32px 16px 16px; border-radius:var(--c2l-r-l);
 background:radial-gradient(70% 55% at 4% 2%,var(--c2l-hero-a),transparent 72%),radial-gradient(60% 50% at 98% 10%,var(--c2l-hero-b),transparent 72%),radial-gradient(65% 45% at 96% 100%,var(--c2l-mint-2),transparent 74%),radial-gradient(60% 45% at 2% 100%,var(--c2l-sand-2),transparent 74%),var(--c2l-sky);
}
.c2l-mailing-hero-layout { grid-template-columns:minmax(0,1fr); gap:24px; }
.c2l-hero-window .c2l-hero-window__intro { justify-items:center; text-align:center; background:none; }
.c2l-hero-window .c2l-hero-window__title { max-inline-size:15em; }
.c2l-hero-window .c2l-hero-window__lede { max-inline-size:34em; }
.c2l-hero-window .c2l-hero-window__actions { justify-content:center; }
.c2l-mailing-hero-cards { display:grid; gap:16px; min-inline-size:0; }
.c2l-mailing-hero-visual,.c2l-mailing-message-card { min-inline-size:0; padding:20px 16px; background:var(--c2l-white); border-radius:var(--c2l-r-m); box-shadow:var(--c2l-shadow-md); text-align:start; }
.c2l-mailing-visual-title { margin:0; font-size:var(--c2l-fs-xl); line-height:1.3; }
.c2l-mailing-card-lead { margin-block:8px 20px; font-size:var(--c2l-fs-md); line-height:1.5; color:var(--c2l-ink); }
.c2l-mailing-channel-art { margin-block:24px; gap:16px; }
.c2l-mailing-channel-art > img { inline-size:48px; block-size:48px; }
.c2l-mailing-channel-art > svg { inline-size:32px; block-size:32px; }
.c2l-mailing-channel-art > span { padding:12px; font-size:var(--c2l-fs-lg); }
.c2l-mailing-message-stage { display:grid; place-items:center; padding:20px 12px; background:var(--c2l-blue-5); border-radius:var(--c2l-r-s); min-inline-size:0; }
.c2l-mailing-hero-phone { inline-size:min(100%,320px); block-size:240px; }
.c2l-mailing-hero-phone .c2l-msgr__meta,.c2l-mailing-hero-phone .c2l-msgr__ph { color:var(--c2l-c-text-2); }
.c2l-mailing-hero-phone .c2l-msgr__back { color:var(--c2l-blue); }
.c2l-mailing-message-card > .c2l-mailing-example { margin-block-start:12px; font-size:var(--c2l-fs-sm); }
.c2l-mailing-types { justify-content:center; margin-block-start:20px; border:0; padding:0; }
.c2l-mailing-types li { padding:8px 16px; border-radius:var(--c2l-r-pill); background:var(--c2l-white); }
.c2l-mailing-types h2 { font-size:var(--c2l-fs-sm); }
.c2l-scenario-tabs .c2l-scenario-tabs__scene { padding:24px 16px; background:var(--c2l-white); border-radius:var(--c2l-r-l); }
.c2l-scenario-tabs .c2l-msgr--tg { --c2l-msgr-wall:var(--c2l-blue-5); }
.c2l-scenario-tabs__tabs { background:var(--c2l-blue-5); border:0; }
.c2l-scenario-tabs__tab[aria-selected="true"] { background:var(--c2l-white); color:var(--c2l-blue); }
.c2l-scenario-tabs .c2l-mailing-caption,.c2l-scenario-tabs .c2l-mailing-example { color:var(--c2l-ink); }
.c2l-mailing-figure figcaption { color:var(--c2l-ink); }
.c2l-mailing-report { background:var(--c2l-sky); padding:24px 20px; }
.c2l-mailing-report > p { color:var(--c2l-ink); }
.c2l-case-columns .c2l-case-columns__card { padding:24px; border-radius:var(--c2l-r-l); background:var(--c2l-sand-2); }
.c2l-case-columns__card :where(.c2l-case-columns__about,.c2l-case-columns__note) { color:var(--c2l-ink); }
.c2l-case-columns__card .c2l-case-columns__name { color:var(--c2l-ink); }
.c2l-cost-rows > .c2l-cost-rows__in { padding:24px; border-radius:var(--c2l-r-l); background:var(--c2l-blue-5); }
.c2l-cost-rows .c2l-mailing-costs dd,.c2l-cost-rows .c2l-cost-rows__lead { color:var(--c2l-ink); }
.c2l-action-banner .c2l-action-banner__panel { padding:40px 24px; border-radius:var(--c2l-r-l); background:var(--c2l-navy-900); }
.c2l-action-banner .c2l-action-banner__title,.c2l-action-banner .c2l-action-banner__lead { color:var(--c2l-white); }
.c2l-action-banner .c2l-action-banner__lead { max-inline-size:36em; }
@container c2l (min-width:700px) {
 .c2l-hero-window > .c2l-hero-window__in { padding:48px 24px 24px; }
 .c2l-mailing-hero-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
 .c2l-mailing-hero-visual,.c2l-mailing-message-card { display:flex; flex-direction:column; padding:24px; }
 .c2l-mailing-channel-art { margin-block:16px; }
 .c2l-mailing-cascade-scroll > img { inline-size:550px; max-inline-size:none; }
 .c2l-mailing-message-stage { grid-row:span 1; }
 .c2l-scenario-tabs .c2l-scenario-tabs__scene { padding:32px; }
 .c2l-case-columns .c2l-case-columns__card { padding:32px; }
 .c2l-cost-rows > .c2l-cost-rows__in { padding:32px; }
 .c2l-action-banner .c2l-action-banner__panel { padding:56px 32px; }
}
@container c2l (min-width:1000px) {
 .c2l-hero-window > .c2l-hero-window__in { padding:56px 32px 32px; }
 .c2l-mailing-hero-layout { grid-template-columns:minmax(0,1fr); gap:32px; }
 .c2l-mailing-hero-cards { gap:32px; }
 .c2l-mailing-hero-visual,.c2l-mailing-message-card { padding:32px; }
 .c2l-mailing-cascade-scroll > img { inline-size:100%; max-inline-size:550px; }
 .c2l-mailing-report { padding:32px; }
 .c2l-action-banner .c2l-action-banner__panel { padding:64px 40px; }
}

/* Шесть средних разделов. Hero, scenarios и start намеренно не затрагиваются. */
.c2l-compare-rows > .c2l-compare-rows__in { padding:28px 20px; background:var(--c2l-sky); border-radius:var(--c2l-r-l); }
.c2l-compare-rows .c2l-compare-rows__title { max-inline-size:22em; }
.c2l-compare-rows .c2l-mailing-methods { display:grid; gap:16px; margin-block-start:24px; }
.c2l-compare-rows .c2l-mailing-methods > div { display:block; padding:24px; border:0; border-radius:var(--c2l-r-m); background:var(--c2l-white); box-shadow:var(--c2l-shadow-md); }
.c2l-compare-rows .c2l-mailing-methods dt { color:var(--c2l-blue); }
.c2l-compare-rows .c2l-mailing-methods dd { margin-block-start:16px; color:var(--c2l-ink); }
.c2l-compare-rows .c2l-mailing-note { max-inline-size:65em; margin-block-start:24px; }
.c2l-feature-trio > .c2l-feature-trio__in { padding:28px 20px; background:var(--c2l-white); border:1px solid var(--c2l-blue); border-radius:var(--c2l-r-l); }
.c2l-feature-trio .c2l-feature-trio__title { max-inline-size:24em; }
.c2l-feature-trio .c2l-feature-trio__list { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.c2l-feature-trio .c2l-feature-trio__item { padding:24px; background:var(--c2l-white); border:0; border-radius:var(--c2l-r-m); box-shadow:var(--c2l-shadow-md); }
.c2l-feature-trio .c2l-mailing-iconline { display:flex; flex-direction:column; align-items:start; gap:20px; }
.c2l-feature-trio .c2l-mailing-iconline > .c2l-icon { --c2l-icon-size:56px; }
.c2l-feature-trio .c2l-feature-trio__text { margin-block-start:16px; color:var(--c2l-ink); }
.c2l-feature-trio .c2l-mailing-note { margin-block-start:24px; }
.c2l-feature-grid > .c2l-feature-grid__in { display:grid; gap:24px; padding:0; }
.c2l-feature-grid .c2l-feature-grid__head { display:flex; flex-direction:column; justify-content:center; align-items:start; gap:32px; padding:32px 24px; background:var(--c2l-c-lilac); border-radius:var(--c2l-r-l); max-inline-size:none; }
.c2l-feature-grid .c2l-mailing-benefit-channels { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.c2l-feature-grid .c2l-mailing-benefit-channels > :where(img,svg) { inline-size:48px; block-size:48px; }
.c2l-feature-grid .c2l-feature-grid__head .c2l-h2 { max-inline-size:14em; }
.c2l-feature-grid .c2l-feature-grid__cells { display:grid; grid-template-columns:minmax(0,1fr); margin:0; gap:0; }
.c2l-feature-grid .c2l-feature-grid__cell { grid-column:auto; grid-template-columns:48px minmax(0,1fr); padding:20px 0; border-block-start:0; border-block-end:1px solid var(--c2l-line); }
.c2l-feature-grid .c2l-feature-grid__cell:last-child { border-block-end:0; }
.c2l-feature-grid .c2l-feature-grid__text { max-inline-size:40em; color:var(--c2l-ink); }
.c2l-numbered-trio > .c2l-numbered-trio__in { padding:28px 20px; border-radius:var(--c2l-r-l); background:var(--c2l-blue-5); }
.c2l-numbered-trio .c2l-numbered-trio__title { max-inline-size:25em; }
.c2l-numbered-trio .c2l-numbered-trio__list { background:none; }
.c2l-numbered-trio .c2l-numbered-trio__item { padding:20px 0; gap:16px; }
.c2l-numbered-trio .c2l-numbered-trio__num { display:grid; place-items:center; inline-size:44px; block-size:44px; border-radius:var(--c2l-r-pill); background:var(--c2l-blue); color:var(--c2l-white); font-size:var(--c2l-fs-lg); }
.c2l-numbered-trio .c2l-numbered-trio__text { color:var(--c2l-ink); }
.c2l-numbered-trio .c2l-mailing-report { padding:24px 16px; background:var(--c2l-white); box-shadow:var(--c2l-shadow-md); }
.c2l-case-columns > .c2l-case-columns__in { padding:28px 20px; border-radius:var(--c2l-r-l); background:var(--c2l-sky); }
.c2l-case-columns .c2l-case-columns__title { max-inline-size:24em; }
.c2l-case-columns .c2l-case-columns__card { margin-block-start:24px; padding:0; border-radius:0; background:none; }
.c2l-case-columns .c2l-case-columns__head { padding-block-end:24px; }
.c2l-case-columns .c2l-case-columns__col { padding:24px 0; }
.c2l-case-columns .c2l-case-columns__col:last-child { padding:24px; background:var(--c2l-white); border-radius:var(--c2l-r-m); }
.c2l-case-columns .c2l-case-columns__col:last-child .c2l-mailing-result { font-size:var(--c2l-fs-h2); line-height:1.1; }
.c2l-case-columns .c2l-case-columns__name { color:var(--c2l-ink); }
.c2l-case-columns .c2l-case-columns__foot { margin-block-start:24px; }
.c2l-cost-rows > .c2l-cost-rows__in { padding:28px 20px; background:var(--c2l-c-lilac); border-radius:var(--c2l-r-l); }
.c2l-cost-rows .c2l-cost-rows__title { max-inline-size:21em; }
.c2l-cost-rows .c2l-mailing-costs { display:grid; grid-template-columns:minmax(0,1fr); gap:0; margin-block-start:24px; padding:8px 24px; background:var(--c2l-white); border-radius:var(--c2l-r-m); }
.c2l-cost-rows .c2l-mailing-costs > div { display:grid; gap:12px; padding-block:20px; }
.c2l-cost-rows .c2l-mailing-costs > div:first-child { border-block-start:0; }
.c2l-cost-rows .c2l-mailing-costs dt { color:var(--c2l-blue); }
.c2l-cost-rows .c2l-mailing-costs dd { margin:0; color:var(--c2l-ink); }
.c2l-cost-rows .c2l-mailing-actions { margin-block-start:24px; }
.c2l-cost-rows .c2l-mailing-actions .c2l-btn--secondary { background:var(--c2l-white); }
@container c2l (min-width:700px) {
 .c2l-compare-rows > .c2l-compare-rows__in,.c2l-feature-trio > .c2l-feature-trio__in,.c2l-numbered-trio > .c2l-numbered-trio__in,.c2l-case-columns > .c2l-case-columns__in,.c2l-cost-rows > .c2l-cost-rows__in { padding:32px; }
 .c2l-compare-rows .c2l-mailing-methods { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .c2l-feature-trio .c2l-feature-trio__list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
 .c2l-feature-trio .c2l-feature-trio__item { display:block; padding:24px 20px; }
 .c2l-feature-grid > .c2l-feature-grid__in { grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:32px; align-items:stretch; }
 .c2l-feature-grid .c2l-feature-grid__head { padding:32px; }
 .c2l-numbered-trio .c2l-mailing-report { padding:24px; }
 .c2l-cost-rows .c2l-mailing-costs > div { grid-template-columns:minmax(0,1fr) minmax(0,2fr); align-items:start; gap:32px; }
}
@container c2l (min-width:1000px) {
 .c2l-compare-rows > .c2l-compare-rows__in,.c2l-feature-trio > .c2l-feature-trio__in,.c2l-numbered-trio > .c2l-numbered-trio__in,.c2l-case-columns > .c2l-case-columns__in,.c2l-cost-rows > .c2l-cost-rows__in { padding:40px; }
 .c2l-compare-rows .c2l-mailing-methods { gap:24px; }
 .c2l-compare-rows .c2l-mailing-methods > div { padding:32px; }
 .c2l-feature-trio .c2l-feature-trio__list { gap:24px; }
 .c2l-feature-trio .c2l-feature-trio__item { padding:32px; }
 .c2l-feature-grid > .c2l-feature-grid__in { gap:40px; }
 .c2l-feature-grid .c2l-feature-grid__head { padding:40px; }
 .c2l-case-columns .c2l-case-columns__cols { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,0.9fr); gap:32px; }
 .c2l-case-columns .c2l-case-columns__col { border:0; }
 .c2l-case-columns .c2l-case-columns__col:last-child { padding:24px; }
 .c2l-cost-rows .c2l-mailing-costs { padding:8px 32px; }
}