/* ============================================================================
   YuChat — адаптив по 4 фиксированным диапазонам.
   Каждый диапазон спроектирован по СВОЕЙ минимальной ширине:
     320–479  мобайл          (проектируем на 320)
     480–759  большой телефон (проектируем на 480)
     760–979  планшет         (проектируем на 760)
     ≥980     десктоп         — база, живёт в инлайновых стилях, тут не трогаем
   Внутри диапазона тянется только боковой паддинг страницы (--yc-pad).

   Порядок блоков:
     1. Каскад ≤979  — «уходим с десктопной сетки»
     2. Каскад ≤759  — «одна колонка, без тяжёлых демо»
     3. Точный 760–979 — планшет как исключение
     4. Точный 480–759 — большой телефон как исключение
     5. Точный ≤479   — мобайл как исключение
   База страниц собрана инлайновыми стилями, поэтому все переопределения
   идут с !important — иначе инлайн выигрывает.
   ============================================================================ */


/* ============================================================================
   1. КАСКАД ≤979 — сход с десктопной сетки
   Композиция: страница становится одноколоночной по смыслу (двухколоночные
   «текст + демо» разбиваются), инлайновая навигация уезжает в бургер,
   декор пересобирается под меньший кадр, тач-цели вырастают до 44px.
   ============================================================================ */
@media (max-width: 979px) {

  /* Боковой паддинг — единственная величина, тянущаяся внутри диапазона */
  #yc-root { --yc-pad: clamp(28px, 4vw, 44px); }
  #yc-root section,
  #yc-root > footer { padding-left: var(--yc-pad) !important; padding-right: var(--yc-pad) !important; }
  #yc-root nav { padding-left: var(--yc-pad) !important; padding-right: max(12px, calc(var(--yc-pad) - 12px)) !important; gap: 12px !important; }

  /* Навбар: инлайновые ссылки → бургер. Логотип и правые контролы остаются.
     Бургер уезжает в конец флекс-строки, чтобы его меню прижималось к правому
     краю навбара и не выходило за кадр на узких диапазонах. */
  .yc-navlinks { display: none !important; }
  .yc-burger { display: block !important; order: 3 !important; margin-left: 2px !important; }
  #yc-root nav > a:first-child { min-height: 44px !important; }

  /* Тач-цели: десктопные 34–38px не проходят по 44px */
  #yc-root nav button,
  #yc-root nav .yc-login-btn { min-height: 44px !important; height: 44px !important; }
  #yc-root nav button[aria-label] { min-width: 44px !important; }
  .yc-chip { height: 44px !important; }

  /* Логотипы клиентов: шесть в строку не влезают ниже 980 */
  .yc-clogo-grid { grid-template-columns: repeat(3, 1fr) !important; margin-left: 0 !important; margin-right: 0 !important; }
  .yc-clogo-ghost { display: none !important; }
  #yc-root > footer a[aria-label] { width: 44px !important; height: 44px !important; }
  /* Ссылки-строки в футере и кнопки в карточках тарифов — до 44px по высоте */
  .yc-footgrid a, .yc-footgrid > div > div > span { padding: 11px 0 !important; display: flex !important; align-items: center !important; }
  .yc-footgrid > div > div > a[aria-label] { padding: 0 !important; }
  .yc-plan a, .yc-plan button { min-height: 44px !important; height: 44px !important; }
  #blog a[href="YuChat%20News.dc.html"] { min-height: 44px !important; display: inline-flex !important; align-items: center !important; }

  /* Типографика: своя пара clamp'ов на диапазон, текстовые блоки — в ch */
  .yc-hero-title { font-size: clamp(28px, 4.4vw, 40px) !important; }
  .yc-rh { font-size: clamp(26px, 4.2vw, 40px) !important; }
  .yc-rlead { font-size: clamp(15px, 1.9vw, 17px) !important; max-width: 60ch !important; }
  #yc-root h1.yc-rh, #yc-root h1 { text-wrap: pretty; }

  /* Герой: сетка «заголовок над карусельной сценой» вместо экрана на 100vh */
  #hero { min-height: 1024px !important; padding-top: 150px !important; }
  #hero > div[style*="max-width:860px"] { max-width: 46ch !important; }

  /* Карусель карточек: сцена уезжает выше и уменьшается через .yc-tilt
     (JS правит только карточки внутри .yc-ring, .yc-tilt свободен) */
  .yc-scene { top: 340px !important; height: 560px !important; }
  .yc-tilt { transform: scale(0.86) !important; }
  .yc-trust { top: 834px !important; }

  /* Стеклянные карточки-спутники вокруг чата: без курсора им нечего показывать */
  .yc-float-card { display: none !important; }

  /* Двухколоночные блоки «текст + демо» → одна колонка, демо под текстом */
  .yc-neira-grid,
  [data-roles],
  .yc-result-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }

  /* «Для кого?»: вертикальный список → свайпаемая горизонтальная лента */
  .yc-roletabs {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 18px 6px 22px !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .yc-roletabs::-webkit-scrollbar { display: none; }
  .yc-roletabs > [data-role-tab] {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    white-space: nowrap !important;
    min-height: 48px !important;
  }
  .yc-neira-grid > div > div[style*="max-width:366px"] { margin-left: 0 !important; max-width: 100% !important; }

  /* Бенто «Почему YuChat»: 3 колонки → 2, высокая карточка перестаёт быть высокой */
  .yc-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
  .yc-why-grid > div { grid-row: auto !important; min-height: 240px !important; }

  /* Карточные ленты */
  .yc-bloggrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .yc-plans { grid-template-columns: minmax(0, 1fr) !important; }
  .yc-postgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Макет приложения на «Скачать»: правая ветка — вторичная, уходит */
  .yc-app-thread { display: none !important; }
  .yc-app-grid { grid-template-columns: 64px 200px 1fr !important; height: 500px !important; }

  /* Футер: три смысловые колонки → две, контакты во всю ширину */
  .yc-footgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 24px !important; }
  .yc-footgrid > div:last-child { grid-column: 1 / -1 !important; justify-self: start !important; }
  #yc-root > footer { padding-top: 72px !important; }
}


/* ============================================================================
   2. КАСКАД ≤759 — телефонная композиция
   Всё в одну колонку, тяжёлые демо и вторичный декор снимаются целиком,
   поля и кнопки становятся полноширинными.
   ============================================================================ */
@media (max-width: 759px) {

  #yc-root { --yc-pad: clamp(20px, 4vw, 30px); }

  /* Герой без карусели: 3D-сцена на телефоне не читается и стоит дорого */
  .yc-scene { display: none !important; }
  #hero { min-height: 0 !important; padding-top: 120px !important; padding-bottom: 56px !important; }
  .yc-trust { position: static !important; top: auto !important; margin-top: 34px !important; }
  #hero .yc-hero-cta { margin-top: 26px !important; }
  #hero .yc-hero-cta > button { width: 100% !important; height: 52px !important; }

  /* Точечный фон героя: маска сжимается к заголовку, иначе точки съедают текст */
  #hero > div[aria-hidden="true"] {
    -webkit-mask-image: radial-gradient(120% 46% at 50% 16%, #000 0%, rgba(0,0,0,.45) 55%, transparent 88%) !important;
            mask-image: radial-gradient(120% 46% at 50% 16%, #000 0%, rgba(0,0,0,.45) 55%, transparent 88%) !important;
    opacity: .8 !important;
  }

  /* Одна колонка везде */
  .yc-clogo-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .yc-why-grid,
  .yc-bloggrid,
  .yc-postgrid,
  .yc-dl-grid,
  .yc-footgrid { grid-template-columns: minmax(0, 1fr) !important; }
  .yc-why-grid > div { min-height: 200px !important; }
  .yc-footgrid > div:last-child { grid-column: auto !important; }

  /* Макет приложения: остаётся только один центральный пейн */
  .yc-app-grid { grid-template-columns: minmax(0, 1fr) !important; height: auto !important; }
  .yc-app-rail, .yc-app-chans { display: none !important; }

  /* Лид-магнит в углу — вторичный, на телефоне мешает основному CTA */
  .yc-lead-widget { display: none !important; }

  /* Секции: вертикальный ритм вдвое плотнее десктопного */
  #yc-root section { padding-top: 64px !important; padding-bottom: 64px !important; }
  #yc-root section#demo-form { padding-top: 56px !important; padding-bottom: 88px !important; }
  #yc-root > footer { padding-top: 56px !important; }
  #yc-root section#hero { padding-top: 120px !important; }
  #yc-root section#pricing,
  #yc-root section#news,
  #yc-root section[data-screen-label="Скачать"] { padding-top: 112px !important; }

  /* Формы: поля и кнопки во всю ширину, минимум 52px по высоте */
  .yc-field, .yc-cta-field { height: 52px !important; font-size: 16px !important; }
  .yc-check { width: 28px !important; height: 28px !important; }
  #yc-root label { min-height: 44px !important; align-items: center !important; }
  .yc-cta, #demo-form button { width: 100% !important; min-height: 52px !important; }
  .yc-cta-card { padding: 24px !important; }
  /* Эллипсы-растворители полосы CTA: не шире кадра (480–759) */
  .yc-cta-fade-t { left: 0 !important; width: 100% !important; top: -34% !important; height: 72% !important; filter: blur(56px) !important; }
  .yc-cta-fade-b { left: 0 !important; width: 100% !important; bottom: -34% !important; height: 74% !important; filter: blur(56px) !important; }

  /* Плитки сторов и дропдауны платформ */
  .yc-pill { height: 60px !important; }
  .yc-plat-btn { width: 100% !important; height: 54px !important; }
  .yc-plat-menu { left: 0 !important; right: 0 !important; min-width: 0 !important; width: auto !important; }
  .yc-plat-item { min-height: 44px !important; }

  /* Модалки и панели: лист на всю ширину минус паддинг */
  #yc-root [role="dialog"] { width: calc(100% - 24px) !important; max-height: 86vh !important; }
  #yc-root [role="dialog"] > div { padding: 34px 20px 24px !important; }

  /* Гигантское слово в футере: на узком кадре оно только шумит */
  #yc-root > footer > div[aria-hidden="true"].yc-hero-title,
  #yc-root > footer .yc-hero-title[aria-hidden="true"] { font-size: clamp(64px, 26vw, 130px) !important; }
}


/* ============================================================================
   3. ТОЧНЫЙ 760–979 — ПЛАНШЕТ (проектировано на 760)
   Кадр ещё держит два столбца в мелких сетках и уменьшенную карусель.
   ============================================================================ */
@media (min-width: 760px) and (max-width: 979px) {

  #yc-root { --yc-pad: clamp(30px, 4vw, 44px); }

  .yc-hero-title { font-size: clamp(32px, 4.2vw, 38px) !important; }
  .yc-rh { font-size: clamp(33px, 4.4vw, 41px) !important; }
  .yc-rlead { max-width: 58ch !important; }
  /* Герой: заголовок и подпись под ним чуть крупнее остальных секций */
  #hero h1.yc-hero-title { font-size: clamp(37px, 4.9vw, 45px) !important; }
  #hero .yc-rotate { font-size: clamp(18px, 2.2vw, 21px) !important; }

  /* Герой: заголовок + уменьшенная сцена карусели, высота фиксируется под неё */
  #hero { min-height: 940px !important; padding-top: 148px !important; }
  .yc-scene { top: 290px !important; height: 560px !important; opacity: 1 !important; }
  .yc-trust { top: 800px !important; }
  .yc-tilt { transform: scale(0.90) !important; }

  /* Демо-макет приложения: рейл + каналы + переписка */
  .yc-app-grid { grid-template-columns: 60px 180px 1fr !important; height: 470px !important; }

  /* Плитки сторов: три в ряд ещё влезают на 760 */
  .yc-dl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  #yc-root section { padding-top: 88px !important; padding-bottom: 88px !important; }
  #yc-root section#hero { padding-top: 148px !important; }
  /* «Войти» на планшете: чуть ниже прочих тач-целей */  #yc-root nav .yc-login-btn { min-height: 38px !important; height: 38px !important; }
  /* Бенто 2×2 на планшете: меняем ряды местами (1↔3, 2↔4) */
  .yc-why-grid > div:nth-child(1) { order: 4 !important; }
  .yc-why-grid > div:nth-child(2) { order: 3 !important; }
  .yc-why-grid > div:nth-child(3) { order: 1 !important; min-height: 200px !important; }
  .yc-why-grid > div:nth-child(4) { order: 2 !important; min-height: 200px !important; }

  /* Футер: тач-высота 44px уже даёт воздух — убираем двойной gap в колонках ссылок */
  .yc-footgrid > div > div:has(> a):not(:has(> a[aria-label])), .yc-footgrid > div > div:has(> span) { gap: 0 !important; }
  /* колонка «Контакты»: ссылки — прямые дети колонки, гасим её gap */
  .yc-footgrid > div:has(> a) { gap: 0 !important; }
  .yc-footgrid > div:has(> a) > div { margin-top: 14px !important; }
  .yc-footgrid > div > div { align-self: start !important; }

  /* Блог: одна лента карточек с затемнением справа — намёк на продолжение */
  .yc-bloggrid {
    grid-template-columns: repeat(4, 252px) !important;
    overflow: hidden !important;
    margin-right: calc(-1 * var(--yc-pad)) !important;
    padding-right: var(--yc-pad) !important;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 72%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 72%, transparent 100%);
  }
  .yc-bloggrid > a > div:first-child { height: 150px !important; }

  /* «Для кого?»: заголовок и табы над фреймом диалога */
  [data-roles] > div:nth-child(1) { order: 2 !important; }
  [data-roles] > div:nth-child(2) { order: 1 !important; }
  [data-roles] { gap: 24px !important; }
  /* \u0442\u0430\u0431\u044b \u0432\u043b\u0435\u0437\u0430\u044e\u0442 \u0431\u0435\u0437 \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u2014 \u0441\u043d\u0438\u043c\u0430\u0435\u043c overflow, \u0438\u043d\u0430\u0447\u0435 \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043e\u0431\u0440\u0435\u0437\u0430\u0435\u0442\u0441\u044f */
  .yc-roletabs { overflow: visible !important; flex-wrap: wrap !important; padding: 8px 0 12px !important; gap: 12px !important; }

  /* Заголовок Нейры: «внутри YuChat» отдельной строкой */
  .yc-neira-br { display: inline !important; }

  /* Диалог Нейры по центру + летающие плашки вокруг (без курсорного параллакса) */
  .yc-neira-grid > div:last-child > div:not(.yc-float-card) { margin-left: auto !important; margin-right: auto !important; }
  .yc-neira-grid > div:last-child { zoom: 0.82; margin-top: 58px !important; }
  #yc-root .yc-float-card { display: block !important; transform: none !important; }
  /* плашки по краям — внутрь кадра, с лёгким заходом на диалог */
  #yc-root .yc-float-card:nth-of-type(2),
  #yc-root .yc-float-card:nth-of-type(3) { left: calc(50% - 340px) !important; right: auto !important; }
  #yc-root .yc-float-card:nth-of-type(4),
  #yc-root .yc-float-card:nth-of-type(5) { right: calc(50% - 340px) !important; left: auto !important; }

  /* Рукописная стрелка над блоком Нейры: меньше, чтобы не наезжала на бенто */
  .yc-neira-grid > div > div[aria-hidden="true"] { width: 280px !important; height: 182px !important; left: auto !important; right: 40px !important; bottom: calc(100% - 34px) !important; transform: none !important; }
  .yc-neira-grid > div > div[aria-hidden="true"] > svg { width: 280px !important; height: 182px !important; }

  /* Клиенты и партнёры: без лишнего воздуха сверху */
  #yc-root section:has(.yc-clogo-grid) { padding-top: 12px !important; padding-bottom: 56px !important; }
}


/* ============================================================================
   4. ТОЧНЫЙ 480–759 — БОЛЬШОЙ ТЕЛЕФОН (проектировано на 480)
   Одна колонка, но хватает ширины на две плитки сторов и на 2 статистики в ряд.
   ============================================================================ */
@media (min-width: 480px) and (max-width: 759px) {

  #yc-root { --yc-pad: clamp(20px, 4vw, 30px); }

  .yc-hero-title { font-size: clamp(37px, 7.4vw, 48px) !important; }
  .yc-rh { font-size: clamp(35px, 7vw, 45px) !important; }
  .yc-rlead { font-size: 18px !important; max-width: 44ch !important; }

  /* Две плитки сторов в ряд — иконка + два строчки текста ещё читаются */
  .yc-dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .yc-dl-grid > .yc-plat:last-child,
  .yc-dl-grid > .yc-pill:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }

  /* Мелкие метрики внутри карточек-демо: 3 в ряд превращаются в 2 */
  .yc-app-grid [style*="grid-template-columns:repeat(3,1fr)"],
  [data-roles] [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* CTA героя: кнопка по контенту, а не во всю ширину */
  #hero .yc-hero-cta > button { width: auto !important; min-width: 210px !important; height: 50px !important; padding: 0 34px !important; }

  /* Карусель возвращается: центральная карточка + два края. Масштаб держит .yc-tilt,
     геометрия в JS не трогается. */
  .yc-scene {
    display: block !important;
    top: 360px !important; height: 520px !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  .yc-tilt { transform: scale(0.92) !important; }
  /* Растворение по низу карточки: в узком кадре завал сжат к самому низу (иначе тень съедает карточку) */
  #yc-root .yc-scene .yc-ring .yc-card {
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  #yc-root .yc-scene .yc-ring > div::after {
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  /* В этом кадре карточка занимает почти весь герой и её почти чёрная заливка
     сливалась с фоном — поднимаем светлоту фона и усиливаем внутренний контур */
  #yc-root[data-theme="dark"] .yc-scene .yc-ring .yc-card {
    background: linear-gradient(155deg, rgba(46,41,84,0.97) 0%, rgba(33,29,64,0.975) 55%, rgba(25,22,50,0.98) 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(160,142,255,0.42), inset 0 0 0 2.6px rgba(160,142,255,0.18),
                inset 0 0 0 4px rgba(160,142,255,0.07), inset 0 1.52px 0 rgba(190,175,255,0.44),
                inset 0 0 60px rgba(110,86,225,0.16), 0 30px 70px rgba(6,4,18,0.62) !important;
  }
  #yc-root section#hero { padding-top: 148px !important; padding-bottom: 40px !important; }
  .yc-trust { margin-top: 300px !important; }

  /* Клиенты и партнёры: рамки ниже, логотипы мельче, воздух над блоком снят */
  #yc-root section:has(.yc-clogo-grid) { padding-top: 8px !important; padding-bottom: 56px !important; }
  .yc-clogo-grid { gap: 10px !important; }
  .yc-clogo-cell, .yc-clogo-ghost > div { min-height: 62px !important; border-radius: 12px !important; }
  .yc-clogo-layer { align-items: center !important; padding: 8px 12px !important; }
  .yc-clogo { max-height: 24px !important; height: auto !important; }

  /* Блог: одна карточка в кадре, край второй выглядывает и уходит в фон */
  .yc-bloggrid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-auto-columns: 88% !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    align-items: start !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none !important;
    margin-right: calc(-1 * var(--yc-pad)) !important;
    padding-right: var(--yc-pad) !important;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 82%, transparent 100%) !important;
            mask-image: linear-gradient(90deg, #000 0%, #000 82%, transparent 100%) !important;
  }
  .yc-bloggrid::-webkit-scrollbar { display: none !important; }
  /* «до 200» и «Безопасность» в один столбец: 200px тянет карточки — хватает контента */
  .yc-why-grid > div:nth-child(3),
  .yc-why-grid > div:nth-child(4) { min-height: 0 !important; }
  .yc-why-grid > div:nth-child(4) { gap: 12px !important; }
  /* Рукописная стрелка над блоком Нейры: в узком кадре наезжает на карточки */
  .yc-neira-arrow { display: none !important; }
  /* Заголовок Нейры: без переноса слова слипаются («сотрудниквнутри») */
  .yc-neira-br { display: inline !important; }

  /* Фрейм диалога Нейры: по центру колонки, а не у правого края */
  .yc-neira-grid > div:last-child > div:not(.yc-float-card) { max-width: 420px !important; margin-left: auto !important; margin-right: auto !important; }
  .yc-neira-grid > div:last-child { margin-left: auto !important; margin-right: auto !important; width: 100% !important; }
  [data-roles] { gap: 24px !important; }
  [data-roles] > div:nth-child(1) { order: 2 !important; }
  [data-roles] > div:nth-child(2) { order: 1 !important; }
  [data-roles] [data-role-panel] { max-width: 420px !important; margin-left: auto !important; margin-right: auto !important; }
  [data-roles] > div:nth-child(2) > * { max-width: 420px !important; margin-left: auto !important; margin-right: auto !important; }
  /* Табы бенто 2×2 */
  .yc-roletabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
    padding: 6px 0 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  .yc-roletabs > [data-role-tab] { justify-content: center !important; text-align: center !important; padding: 14px 16px !important; font-size: 15px !important; border-radius: 12px !important; }
  /* Свечение активного таба мягче десктопного */
  .yc-roletabs > [data-role-tab][style*="yu-gradient"] { box-shadow: 0 6px 18px rgba(137,82,243,0.30) !important; }
  /* «Войти» в этом кадре ниже прочих тач-целей — рядом с бургером выглядит компактнее */
  #yc-root nav .yc-login-btn { min-height: 36px !important; height: 36px !important; }

  /* Футер: две колонки и без двойных зазоров — 44px тач-высоты уже дают воздух */
  .yc-footgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 20px !important; }
  .yc-footgrid > div > div:has(> a), .yc-footgrid > div > div:has(> span) { gap: 0 !important; }
  .yc-footgrid > div:has(> a) { gap: 0 !important; }
  .yc-footgrid > div > div { align-self: start !important; }
  .yc-footgrid a, .yc-footgrid > div > div > span { padding: 7px 0 !important; }
  .yc-footgrid > div > div > a[aria-label] { padding: 0 !important; }
  /* длинные пункты правовой базы переносятся, иконки соцсетей не слипаются */
  .yc-footgrid a { white-space: normal !important; overflow-wrap: anywhere !important; }
  .yc-footgrid > div > div:has(> a[aria-label]) { gap: 10px !important; margin-top: 14px !important; }
}


/* ============================================================================
   5. ТОЧНЫЙ ≤479 — МОБАЙЛ (проектировано на 320)
   Исключения для самого узкого кадра: минимальный паддинг, всё в один столбец,
   декоративные слои почти гасятся, заголовки переносятся по словам.
   ============================================================================ */
@media (max-width: 479px) {

  #yc-root { --yc-pad: clamp(16px, 5vw, 22px); }

  /* h1 героя несёт и .yc-rh, и .yc-hero-title — берём специфичностью, иначе выигрывает .yc-rh ниже */
  #hero h1.yc-hero-title { font-size: clamp(28px, 9vw, 33px) !important; line-height: 1.12 !important; }
  .yc-hero-title { font-size: clamp(28px, 9vw, 33px) !important; line-height: 1.12 !important; }
  /* 4 строки как на 480: ограничиваем строку по самому длинному слову */
  #hero h1.yc-hero-title { max-width: 13ch !important; margin-left: auto !important; margin-right: auto !important; text-wrap: balance; }  .yc-rh { font-size: clamp(21px, 6.6vw, 26px) !important; line-height: 1.16 !important; }
  .yc-rlead { font-size: 15px !important; max-width: 38ch !important; }
  #hero .yc-rotate { font-size: 15px !important; height: 3.4em !important; }
  #hero > div[style*="max-width:860px"] { max-width: 28ch !important; }

  /* Декор: точки и washes почти гасим — на 320 они забивают текст */
  #hero > div[aria-hidden="true"] { opacity: .55 !important; }
  #yc-root section > div[aria-hidden="true"] { opacity: .34 !important; }

  /* Всё в один столбец, без исключений */
  .yc-dl-grid,
  .yc-why-grid,
  .yc-bloggrid,
  .yc-postgrid,
  .yc-plans,
  .yc-footgrid { grid-template-columns: minmax(0, 1fr) !important; }

  /* Карточки: паддинг и радиусы под узкий кадр */
  .yc-plan, .yc-post, .yc-why-grid > div { padding: 20px !important; border-radius: 18px !important; }
  .yc-cta-card { padding: 18px !important; border-radius: 16px !important; }
  /* Эллипсы CTA под 320–479 */
  .yc-cta-fade-t { top: -28% !important; height: 62% !important; filter: blur(44px) !important; }
  .yc-cta-fade-b { bottom: -28% !important; height: 64% !important; filter: blur(44px) !important; }

  /* Табы новостей: горизонтальная лента вместо переноса */
  .yc-feed [style*="display:flex"] > .yc-chip { flex: none !important; }
  .yc-chip { padding: 0 12px !important; font-size: 13px !important; }

  /* Инлайновые auto-fit сетки (minmax 240–320px) на 320 не влезают в кадр:
     трек остаётся минимальным и карточки срезаются паддингом — сводим в одну колонку */
  #yc-root [style*="minmax(320px"],
  #yc-root [style*="minmax(300px"],
  #yc-root [style*="minmax(240px"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Мелкие сетки внутри демо-карточек — в столбец */
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Футер: контакты и соцсети без «прижатия вправо» */
  .yc-footgrid > div { justify-self: start !important; }
  #yc-root > footer > div > div:last-child { margin-top: 56px !important; }
  #yc-root > footer .yc-hero-title[aria-hidden="true"] { font-size: clamp(52px, 24vw, 96px) !important; }

  /* Навбар на 320: «Войти» живёт в бургере, иначе правая группа не влезает */
  #yc-root nav { gap: 2px !important; }
  #yc-root nav .yc-login-btn { display: none !important; }
  .yc-burger-menu { min-width: min(240px, calc(100vw - 28px)) !important; }
  .yc-burger-login { display: flex !important; }

  /* Модалки: лист почти во всю ширину */
  #yc-root [role="dialog"] { width: calc(100% - 16px) !important; }
  #yc-root [role="dialog"] > div { padding: 30px 16px 20px !important; }

  /* --- Композиция как на 480, ужатая под 320. Карусель героя не возвращается:
     .yc-scene остаётся display:none из каскада ≤759, герой живёт только текстом. --- */
  #yc-root section#hero { padding-top: 112px !important; padding-bottom: 32px !important; }
  .yc-trust { margin-top: 56px !important; gap: 14px !important; }
  .yc-trust > div:last-child { gap: 26px !important; }
  .yc-tlogo { height: 20px !important; }
  .yc-tlogo[alt="НЛМК"] { height: 25px !important; }
  .yc-tlogo[alt="X5 Group"] { height: 23px !important; }
  /* CTA героя: кнопка по контенту, а не во всю ширину */
  #hero .yc-hero-cta > button { width: auto !important; min-width: 0 !important; height: 48px !important; padding: 0 26px !important; }

  /* Клиенты и партнёры: рамки ниже, логотипы мельче, воздух над блоком снят */
  #yc-root section:has(.yc-clogo-grid) { padding-top: 6px !important; padding-bottom: 48px !important; }
  .yc-clogo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .yc-clogo-cell, .yc-clogo-ghost > div { min-height: 56px !important; border-radius: 10px !important; }
  .yc-clogo-layer { align-items: center !important; padding: 6px 10px !important; }
  .yc-clogo { max-height: 21px !important; height: auto !important; }

  /* Блог: одна карточка в кадре, край второй выглядывает и уходит в фон */
  .yc-bloggrid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-auto-columns: 86% !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    align-items: start !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none !important;
    margin-right: calc(-1 * var(--yc-pad)) !important;
    padding-right: var(--yc-pad) !important;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 84%, transparent 100%) !important;
            mask-image: linear-gradient(90deg, #000 0%, #000 84%, transparent 100%) !important;
  }
  .yc-bloggrid::-webkit-scrollbar { display: none !important; }

  /* Бенто: карточки тянутся контентом, а не минимальной высотой */
  .yc-why-grid > div { min-height: 0 !important; }
  .yc-why-grid > div:nth-child(4) { gap: 10px !important; }

  /* Нейра: стрелка снята, заголовок с переносом, фрейм диалога по центру колонки */
  .yc-neira-arrow { display: none !important; }
  .yc-neira-br { display: inline !important; }
  .yc-neira-grid > div:last-child > div:not(.yc-float-card) { max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
  .yc-neira-grid > div:last-child { margin-left: auto !important; margin-right: auto !important; width: 100% !important; }

  /* «Для кого?»: заголовок и табы над панелью, табы бенто 2×2 */
  [data-roles] { gap: 20px !important; }
  [data-roles] > div:nth-child(1) { order: 2 !important; }
  [data-roles] > div:nth-child(2) { order: 1 !important; }
  [data-roles] [data-role-panel] { max-width: 100% !important; }
  .yc-roletabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 4px 0 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  .yc-roletabs > [data-role-tab] { justify-content: center !important; text-align: center !important; padding: 12px 10px !important; font-size: 14px !important; border-radius: 11px !important; min-height: 46px !important; }
  .yc-roletabs > [data-role-tab][style*="yu-gradient"] { box-shadow: 0 6px 16px rgba(137,82,243,0.28) !important; }

  /* Футер: один столбец, но без двойных зазоров — тач-высота уже даёт воздух */
  .yc-footgrid > div > div:has(> a), .yc-footgrid > div > div:has(> span) { gap: 0 !important; }
  .yc-footgrid > div:has(> a) { gap: 0 !important; }
  .yc-footgrid > div > div { align-self: start !important; }
  .yc-footgrid a, .yc-footgrid > div > div > span { padding: 7px 0 !important; }
  .yc-footgrid > div > div > a[aria-label] { padding: 0 !important; }
  .yc-footgrid a { white-space: normal !important; overflow-wrap: anywhere !important; }
  .yc-footgrid > div > div:has(> a[aria-label]) { gap: 10px !important; margin-top: 12px !important; }
}


/* ============================================================================
   СТРАНИЦА ТАРИФОВ
   Карточки планов: шапка «название + плашка» перестаёт быть nowrap (иначе
   min-content колонки шире кадра и карточки уезжают под обрез), на планшете
   два столбца, ниже — один.
   ============================================================================ */
@media (max-width: 979px) {
  #pricing { padding-top: 132px !important; }
  #pricing > div > div:first-child { margin-bottom: 34px !important; }
  .yc-plans > .yc-plan { min-width: 0 !important; }
  .yc-plan-head { flex-wrap: wrap !important; row-gap: 8px !important; }
  .yc-plan-head > h2 { white-space: normal !important; }
  .yc-plan h2 { white-space: normal !important; overflow-wrap: anywhere !important; }
  .yc-plan > a, .yc-plan > button { align-self: stretch !important; justify-content: center !important; }
}
@media (min-width: 760px) and (max-width: 979px) {
  .yc-plans { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
  #pricing { padding-top: 148px !important; }
}
@media (max-width: 759px) {
  #pricing { padding-top: 112px !important; padding-bottom: 72px !important; }
  .yc-plan { padding: 22px !important; }
  .yc-plan h2 { font-size: 18px !important; }
  .yc-plan > div[style*="font-size:34px"], .yc-plan .yc-display[style*="34px"] { font-size: 30px !important; }
}
@media (max-width: 479px) {
  #pricing { padding-top: 104px !important; }
  .yc-plan { padding: 18px !important; border-radius: 16px !important; }
  .yc-plan h2 { font-size: 17px !important; letter-spacing: 0 !important; }
}


/* ============================================================================
   БУРГЕР-МЕНЮ (появляется только ниже 980)
   ============================================================================ */
.yc-burger { display: none; position: relative; }
.yc-burger > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 12px; }
.yc-burger > summary::-webkit-details-marker { display: none; }
.yc-burger > summary > i { display: block; flex: none; width: 20px; height: 2px; min-height: 2px; border-radius: 2px; background: var(--text-primary); transition: transform .22s ease, opacity .22s ease; }
.yc-burger[open] > summary > i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.yc-burger[open] > summary > i:nth-child(2) { opacity: 0; }
.yc-burger[open] > summary > i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.yc-burger-menu {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 80;
  min-width: 236px; padding: 8px; display: flex; flex-direction: column;
  border-radius: 18px; background: color-mix(in srgb, var(--surface-1) 55%, transparent);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: none;
  -webkit-backdrop-filter: blur(60px) saturate(170%); backdrop-filter: blur(60px) saturate(170%);
}
/* Пока бургер открыт — снимаем backdrop-filter с навбара: вложенный backdrop-filter
   считает фон только внутри родителя, и меню, выходящее за навбар, не размывалось. */
#yc-root nav:has(.yc-burger[open]) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.yc-burger-menu > a {
  display: flex; align-items: center; min-height: 48px; padding: 0 14px;
  border-radius: 12px; color: var(--text-primary); text-decoration: none;
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
}
.yc-burger-login { display: none; }
.yc-burger-menu > a:hover { background: rgba(137, 82, 243, .10); color: var(--text-primary); }


/* --- висячие строки: балансируем переносы (все диапазоны) --- */
h1, h2, h3, .yc-rh, .yc-hero-title, .yc-display, .yc-clamp2, .yc-clamp3 { text-wrap: balance; }
p, .yc-rlead, .yc-desc2 { text-wrap: pretty; }

/* перенос в заголовке Нейры: «внутри YuChat» всегда второй строкой */
.yc-neira-br { display: inline; }

/* Заголовок героя: явный перенос после «мессенджер» на десктопе, ниже 980 — свободный */
#hero h1.yc-hero-title { text-wrap: initial; }
@media (max-width: 979px) { .yc-hero-br { display: none; } #hero h1.yc-hero-title { text-wrap: balance; } }