/* ============================================================================
   ViewChat — Download, десктопная раскладка (>= 768px only).

   Парный файл к css/download-mobile-redesign.css. Разделение жёсткое и
   проверяемое: там всё живёт внутри @media (max-width: 767.98px), здесь —
   внутри @media (min-width: 768px). Диапазоны не пересекаются ни на пиксель,
   поэтому мобильная страница этим файлом не затрагивается вообще: ниже 768px
   он не даёт ни одного правила, кроме `.dld { display: none }`.

   Ни одного глобального селектора: каждое правило начинается либо с `.dld*`,
   либо с `body.download-page`. Правил для голых video / img / header / footer
   / accordion здесь нет.

   Компаньон: js/download-desktop-redesign.js (видео-hero, аккордеон).
   ========================================================================== */

/* Десктопная разметка не должна существовать на телефоне. Парная половина —
   выключение шаблонных секций внутри медиазапроса ниже.

   Сюда же два элемента, которые физически лежат в общей шапке, а не внутри
   `.dld`: коралловая pill Download и шеврон у переключателя языка. Оба нужны
   только десктопу, и оба выключены здесь, ВНЕ медиазапроса, — иначе они
   появились бы в мобильном выезжающем меню и мобильная раскладка изменилась
   бы. Включаются они ниже, внутри min-width: 768px. */
.dld,
.dld-nav-cta,
.dld-lang-caret,
.dld-foot { display: none; }

/* Пункт меню приходится гасить отдельным, более специфичным селектором:
   menu.css задаёт `.wsmenu > .wsmenu-list > li { display: block }` (0,3,0),
   и правило по одному классу выше его не перебивает — на телефоне pill
   всплывал в выезжающем меню. Селектор ужат до этой страницы, а внутри
   min-width: 768px точно такой же по весу селектор ниже включает пункт
   обратно (побеждает как более поздний). */
body.download-page #header .wsmenu > .wsmenu-list > li.dld-nav-cta { display: none; }

@media (min-width: 768px) {

  /* --- токены ------------------------------------------------------------
     Значения сняты с референса пипеткой, не подобраны на глаз. */
  body.download-page {
    --dld-coral: #fd294e;
    --dld-coral-ink: #e5203f;
    --dld-ink: #0c0b2b;          /* наборный чёрный, как у остальных страниц */
    --dld-ink-2: #46455f;
    --dld-muted: #6f6e85;
    --dld-paper: #ffffff;
    --dld-faq-bg: #f7f7fa;       /* очень светлый нейтральный фон FAQ */
    --dld-line: rgba(12, 11, 43, .09);
    --dld-dark: #11141b;         /* грунт CTA-баннера */
    /* Высота шаблонной белой ленты — та же, что на features.html (её никто
       не переопределяет ни там, ни здесь). Этим же числом отбивается hero:
       .header-wrapper на шаблоне fixed, поэтому полоса не занимает места в
       потоке и первая секция обязана отступить сама. */
    --dld-hdr: 112px;
    /* Одна колонка на всю страницу. Замеры референса при его ширине,
       пересчитанные на 1440: контент секций идёт примерно от 99 до 1341
       (≈1242), а CTA-баннер заметно шире — от 41 до 1399 (≈1360). Отсюда две
       разные боковые отбивки при общей максимальной ширине 1440: секции
       получают 99px, баннер — 40px. Обе заданы через clamp, поэтому на 1100
       колонка сжимается, а на 1920 упирается в 1440 и страница не растекается. */
    --dld-max: 1440px;
    --dld-gutter: clamp(28px, 6.9vw, 99px);
    --dld-gutter-wide: clamp(20px, 2.8vw, 40px);
  }

  /* --- шаблонная раскладка уходит ------------------------------------------
     Старые секции не удалены из разметки — они просто выключены. Вместе с
     ними уходят разделители, иначе от каждого остался бы висящий hr. */
  body.download-page .download-section,
  body.download-page .statistic-section,
  body.download-page #faqs-1,
  body.download-page .page > hr.divider { display: none !important; }

  /* --- корень ------------------------------------------------------------- */
  .dld {
    display: block;
    background: var(--dld-paper);
    color: var(--dld-ink);
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    overflow-x: clip;
  }

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

  .dld__wrap {
    width: 100%;
    max-width: var(--dld-max);
    margin: 0 auto;
    padding-inline: var(--dld-gutter);
  }

  /* Баннер CTA шире остальных секций — так он снят с референса. */
  .dld-cta .dld__wrap { padding-inline: var(--dld-gutter-wide); }

  /* =========================================================================
     1. ШАПКА

     Белая полоса берётся один в один из features.html: те же четыре правила,
     что лежат в css/stories-desktop.css (блок «--- header ---»), с теми же
     значениями — белый фон с !important, волосяная граница
     rgba(16,16,22,.07), снятая тень, z-index 1200 у обёртки и типографика
     ссылок 15px/600/#16161b с коралловым ховером, включая обе ступени кегля
     на 1319.98 и 1199.98. Ничего не подбиралось заново.

     Высота полосы тоже как там — своя, шаблонная (112px): собственного
     height здесь нет, поэтому обе страницы дают одинаковую ленту. Зазора
     сверху нет: .header-wrapper на этом шаблоне fixed и стоит в нуле, а
     первая секция отбивается на высоту ленты через --dld-hdr.

     Всё остальное в этом блоке — не оформление ленты, а раскладка: она нужна
     коралловой pill и переключателю языка, которых в features.html нет.
     ========================================================================= */

  /* --- перенесено из css/stories-desktop.css (features.html) -------------- */
  body.download-page .header-wrapper { z-index: 1200; }

  body.download-page .wsmainfull {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(16, 16, 22, .07);
    box-shadow: none !important;
  }

  body.download-page .wsmenu > .wsmenu-list > li > a.h-link {
    color: #16161b;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.005em;
  }

  body.download-page .wsmenu > .wsmenu-list > li > a.h-link:hover {
    color: var(--dld-coral) !important;
  }

  @media (max-width: 1319.98px) {
    body.download-page .wsmenu > .wsmenu-list > li > a.h-link { font-size: 14px; }
  }

  @media (max-width: 1199.98px) {
    body.download-page .wsmenu > .wsmenu-list > li > a.h-link { font-size: 13.5px; }
  }
  /* --- конец перенесённого блока ------------------------------------------ */

  /* Раскладка полосы. Высота не задаётся: она шаблонная, ровно как на
     features.html. */
  body.download-page #header .wsmainwp {
    display: flex;
    align-items: center;
    max-width: var(--dld-max);
    padding-inline: var(--dld-gutter);
    /* Ровно та высота, которую эта же обёртка имеет на features.html.
       Там она набегает не из дизайна, а из шаблонной float-раскладки: <ul>
       внутри .wsmenu всплывающий, и остающиеся вокруг него текстовые узлы
       добавляют строчный бокс в 1.33px поверх 70px пунктов. Во flex-раскладке
       такого бокса нет, и лента выходила на 1px ниже. Значение проставлено
       явно, чтобы обе страницы давали одинаковые 112px. */
    min-height: 71.33px;
  }

  /* На белой шапке нужен только тёмный логотип; белый вариант шаблона
     (для прозрачной шапки поверх тёмного экрана) здесь не участвует. */
  body.download-page #header .desktoplogo { margin: 0; padding: 0; }
  body.download-page #header .desktoplogo:has(.logo-white) { display: none; }
  body.download-page #header .desktoplogo .logo-black { display: block; }
  body.download-page #header .desktoplogo img { height: 26px; width: auto; }

  body.download-page #header .wsmenu {
    flex: 1 1 auto;
    float: none;
    margin: 0;
    /* Гарантированный воздух между логотипом и первой ссылкой: меню
       центрируется, и на узком десктопе оно иначе встаёт вплотную к нему. */
    padding-left: clamp(18px, 2.6vw, 44px);
  }

  body.download-page #header .wsmenu-list {
    display: flex;
    align-items: center;
    /* Ссылки идут по центру полосы, а pill и язык прижаты вправо
       (margin-left: auto у pill ниже) — ровно как в референсе. */
    justify-content: center;
    gap: 2px;
    float: none;
    margin: 0;
    padding: 0;
  }

  /* flex: 0 0 auto обязателен, а не косметика: по умолчанию flex-элементы
     ужимаются, и языковая кнопка получала ширину 50px при содержимом 108px —
     флаг с подписью вылезали из своей коробки прямо на pill. */
  body.download-page #header .wsmenu-list > li {
    flex: 0 0 auto;
    float: none;
    margin: 0;
  }

  /* !important вынужденное: css/language-modal.css задаёт этим же ссылкам
     `padding-left/right: 24px !important` для всего сайта, и обычным правилом
     его не перебить — из-за этого меню требовало 1060px и не помещалось ниже
     1280px. Селектор ужат до этой страницы. */
  /* Цвет, кегль и насыщенность ссылок приходят из перенесённого блока выше.
     Здесь остаются только горизонтальные отступы — их приходится задавать с
     !important, потому что css/language-modal.css ставит этим же ссылкам
     `padding-left/right: 24px !important` для всего сайта. Без этого меню
     требует 1060px и не помещается вместе с pill ниже 1280px (на
     features.html pill нет, поэтому там вопрос не возникает). */
  body.download-page #header .wsmenu-list > li > a.h-link {
    /* Вертикальные значения — шаблонные (10px + line-height 50px = 70px), и
       трогать их нельзя: именно они задают высоту ленты, а она должна
       совпасть с features.html до пикселя. Сжимаются только горизонтальные. */
    padding: 10px 13px !important;
    background: transparent;
    transition: color 140ms ease;
  }

  body.download-page #header .wsmenu-list > li > a.h-link:focus-visible {
    color: var(--dld-coral);
    background: transparent;
  }

  /* Коралловая pill. Ведёт к store-кнопкам этого же экрана (в референсе у неё
     стрелка вниз), поэтому это работающая CTA, а не ссылка страницы на себя.
     Ниже 768px пункт скрыт целиком — мобильная шапка не меняется. */
  /* margin-left: auto забирает всё свободное место слева, поэтому pill и
     языковой переключатель садятся у правого края, а ссылки остаются по
     центру оставшейся полосы. */
  body.download-page #header .wsmenu > .wsmenu-list > li.dld-nav-cta {
    display: block;
    margin-left: auto;
    margin-right: 4px;
  }

  /* line-height здесь своя: шаблонные 50px, нужные обычным пунктам ради
     высоты ленты, раздували бы саму pill вдвое. */
  body.download-page #header .wsmenu-list > li.dld-nav-cta > a.h-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1;
    padding: 11px 22px !important;
    border-radius: 999px;
    background: var(--dld-coral);
    color: #fff;
    font-weight: 600;
    transition: background 140ms ease, transform 140ms ease;
  }

  body.download-page #header .wsmenu-list > li.dld-nav-cta > a.h-link:hover,
  body.download-page #header .wsmenu-list > li.dld-nav-cta > a.h-link:focus-visible {
    background: var(--dld-coral-ink);
    color: #fff;
  }

  body.download-page #header .wsmenu-list > li.dld-nav-cta > a.h-link:active { transform: scale(.985); }

  body.download-page #header .dld-nav-cta__arrow { width: 13px; height: 13px; }

  /* Языковой переключатель: тот же элемент и та же логика, только вид под
     белую шапку. Флаг подставляет i18n.js — здесь только размер. */
  /* Кнопка сайта несёт `width: 50px !important` (css/language-modal.css) и
     одновременно `min-width: 112px` (css/lang-switcher-2.css): вторая правила
     первую и вытягивала кнопку до 112px. Опираться на такое равновесие нельзя,
     поэтому ширина здесь задаётся честно — по содержимому. !important
     вынужденное, ровно чтобы перебить чужое !important, и селектор ужат до
     этой страницы: на остальных страницах переключатель прежний. */
  body.download-page #header .wsmenu > .wsmenu-list > li.lang-switcher-desktop > .lang-btn--desktop {
    width: auto !important;
    min-width: 0;
  }

  body.download-page #header .lang-btn--desktop {
    flex: 0 0 auto;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: transparent;
    white-space: nowrap;
  }

  body.download-page #header .lang-btn--desktop > * { flex: 0 0 auto; }

  /* !important здесь вынужденное, а не по привычке: css/language-modal.css
     задаёт этому же флагу `width/height: 35px !important` для всего сайта,
     и обычным правилом его не перебить. Селектор ужат до этой страницы
     (body.download-page), поэтому размер флага на всех остальных страницах
     остаётся прежним. 35px квадрат рядом с 64-пиксельной полосой шапки
     выглядит нашлёпкой, а флаг ещё и не квадратный по пропорции. */
  body.download-page #header .wsmenu > .wsmenu-list > li.lang-switcher-desktop > .lang-btn--desktop img.lang-btn__icon {
    width: 24px !important;
    height: 16px !important;
    border-radius: 2px;
    object-fit: cover;
  }

  body.download-page #header .lang-btn--desktop .lang-btn__label {
    color: #3a3950 !important;
    font-size: 14.5px;
    font-weight: 500;
  }

  body.download-page #header .lang-btn--desktop .dld-lang-caret {
    display: block;
    width: 10px;
    height: 10px;
    color: #8b8aa0;
  }

  /* =========================================================================
     2. HERO — десктопное видео
     ========================================================================= */

  .dld-hero {
    position: relative;
    /* Высота выросла ровно на то, что освободила снятая полоса преимуществ:
       она занимала 156px на 1440 и 1920 и 158px на 1100, и эти пиксели
       перешли сюда. Замерено до правки: hero 465 + полоса 156 = 621 на 1440,
       400 + 158 = 558 на 1100, 518 + 156 = 674 на 1920 — clamp ниже даёт
       621 / 540 / 680 соответственно.

       Кадр от этого не растягивается: object-fit: cover никогда не искажает
       пропорцию, он только подрезает. Ролик 16:9 в более высокой секции
       подрезается по вертикали меньше — то есть видно больше кадра, и он
       перестаёт читаться сплющенным. */
    height: clamp(540px, 43.1vw, 680px);
    margin-top: var(--dld-hdr);
    overflow: hidden;
    isolation: isolate;
    /* Грунт до готовности постера — тёмный, а не чёрная вспышка. */
    background: #14161a;
    color: #fff;
  }

  /* Слой медиа декоративный, кликов не перехватывает. Область зарезервирована
     с первой отрисовки (inset:0 внутри секции фиксированной высоты), поэтому
     появление видео не двигает layout ни на пиксель. */
  .dld-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .dld-hero__poster,
  .dld-hero__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }

  /* Постер лежит под видео всегда: при загрузке, на паузе, при отказе
     автоплея и в режимах без видео. Пустого места и чёрного кадра не бывает. */
  .dld-hero__poster { z-index: 0; }

  .dld-hero__video {
    z-index: 1;
    opacity: 0;
    background: transparent;
    transition: opacity 260ms ease-out;
  }

  /* Класс ставит JS после первого декодированного кадра (loadeddata). */
  .dld-hero.is-video-ready .dld-hero__video { opacity: 1; }

  /* Скрим направленный, а не общее затемнение: правая часть кадра, где у
     ролика своя композиция, остаётся почти открытой.

     Плотность посчитана, а не подобрана. Ролик — контрастная ч/б нарезка, и в
     зоне копии 30% его кадров дают почти белый фон (замерено по всем 120
     кадрам: средняя яркость до 244 из 255). Белый текст по белому кадру
     обязан оставаться читаемым, поэтому слева слой плотный (0.88 у кромки,
     0.72 под копией — это контраст ~9:1 даже на чисто белом кадре), а правее
     62% ширины он быстро уходит в лёгкую дымку 0.12 и композиция ролика видна
     как есть. Второй слой — короткий низовой подпор под QR-блоком. */
  .dld-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
      linear-gradient(
        to right,
        rgba(8, 10, 14, .88) 0%,
        rgba(8, 10, 14, .84) 30%,
        rgba(8, 10, 14, .80) 50%,
        rgba(8, 10, 14, .76) 58%,
        rgba(8, 10, 14, .60) 64%,
        rgba(8, 10, 14, .34) 72%,
        rgba(8, 10, 14, .16) 80%,
        rgba(8, 10, 14, .10) 90%,
        rgba(8, 10, 14, .10) 100%
      ),
      linear-gradient(
        to top,
        rgba(8, 10, 14, .34) 0%,
        rgba(8, 10, 14, 0) 34%
      );
  }

  .dld-hero__inner {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .dld-hero__content {
    flex: 0 1 auto;
    width: min(520px, 42vw);
    margin-left: clamp(24px, 4vw, 76px);
  }

  .dld-hero__eyebrow {
    margin: 0 0 10px;
    color: var(--dld-coral);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
  }

  .dld-hero__title {
    margin: 0 0 16px;
    color: #fff;
    font-size: clamp(38px, 3.75vw, 54px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.025em;
  }

  /* Коралловая точка — общий приём всех четырёх экранов. */
  .dld-dot { color: var(--dld-coral); }

  .dld-hero__text {
    max-width: 25em;
    margin: 0 0 22px;
    color: rgba(255, 255, 255, .86);
    font-size: clamp(15px, 1.18vw, 17px);
    line-height: 1.5;
  }

  .dld-hero__cta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
  }

  /* --- QR-блок ------------------------------------------------------------
     Картинка та же, что шаблон рисует в футере (images/qr-code.png) — нового
     ассета страница не заводит. */
  .dld-hero__qr {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .dld-hero__qr-img {
    flex: 0 0 auto;
    width: 74px;
    height: 74px;
    padding: 6px;
    border-radius: 10px;
    background: #fff;
    object-fit: contain;
  }

  .dld-hero__qr-copy {
    color: rgba(255, 255, 255, .88);
    font-size: 13.5px;
    line-height: 1.45;
  }

  .dld-hero__qr-title {
    display: block;
    color: #fff;
    font-weight: 600;
  }

  /* =========================================================================
     STORE-КНОПКИ (общие для hero и финальной CTA)
     Цвет приходит из контекста двумя переменными, поэтому разметка кнопки
     одна на оба места.
     ========================================================================= */

  .dld-store {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 172px;
    padding: 11px 20px;
    border: 1px solid var(--dld-store-bd, transparent);
    border-radius: 10px;
    background: var(--dld-store-bg);
    color: var(--dld-store-fg);
    text-decoration: none;
    transition: transform 140ms ease, background 140ms ease;
  }

  .dld-store:hover,
  .dld-store:focus-visible { color: var(--dld-store-fg); text-decoration: none; }
  .dld-store:active { transform: scale(.985); }

  .dld-store:focus-visible {
    outline: 2px solid var(--dld-coral);
    outline-offset: 3px;
  }

  .dld-store__icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  /* Яблоко в проекте одно — сплошной чёрный глиф images/png_icons/ios.png.
     На тёмной кнопке он инвертируется, ровно как на главной странице. */
  .dld-store--dark .dld-store__icon--apple { filter: invert(1); }

  .dld-store__copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }

  .dld-store__top {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.1;
    opacity: .84;
  }

  .dld-store__name {
    font-size: 16.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.15;
    /* App Store и Google Play — имена магазинов, одинаковы во всех локалях. */
    white-space: nowrap;
  }

  .dld-store--dark {
    --dld-store-bg: #0e0f12;
    --dld-store-fg: #ffffff;
    --dld-store-bd: rgba(255, 255, 255, .12);
  }

  /* Заметный контур только у кнопок в hero: там почти чёрная кнопка лежит
     прямо на тёмном видео и без границы сливалась с кадром. В финальной CTA
     фон свой и постоянный, её кнопки остаются как были (.12) — переменная
     переопределяется точечно, поэтому баннер не задет.

     Ровно 1px, без тени и свечения. Габарит не меняется: у .dld-store стоит
     box-sizing: border-box, и граница была там и раньше — меняется только её
     прозрачность. */
  .dld-hero__cta .dld-store {
    --dld-store-bd: rgba(255, 255, 255, .72);
  }

  /* =========================================================================
     3. FAQ
     ========================================================================= */

  .dld-faq {
    padding: clamp(48px, 5vw, 74px) 0 clamp(44px, 4.6vw, 68px);
    background: var(--dld-faq-bg);
  }

  .dld-faq__grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1.5fr);
    gap: clamp(32px, 5vw, 84px);
    align-items: start;
  }

  .dld-eyebrow {
    margin: 0 0 12px;
    color: var(--dld-coral);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
  }

  .dld-faq__title {
    margin: 0 0 16px;
    color: var(--dld-ink);
    font-size: clamp(34px, 3.1vw, 44px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.025em;
  }

  .dld-faq__text {
    max-width: 24em;
    margin: 0 0 24px;
    color: var(--dld-muted);
    font-size: 15.5px;
    line-height: 1.55;
  }

  .dld-faq__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 26px;
    border-radius: 999px;
    background: var(--dld-coral);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 140ms ease, transform 140ms ease;
  }

  .dld-faq__cta:hover,
  .dld-faq__cta:focus-visible { background: var(--dld-coral-ink); color: #fff; text-decoration: none; }
  .dld-faq__cta:active { transform: scale(.985); }

  .dld-faq__cta:focus-visible { outline: 2px solid var(--dld-coral); outline-offset: 3px; }

  .dld-faq__cta svg { width: 15px; height: 15px; }

  /* --- аккордеон ----------------------------------------------------------
     Разметка и поведение те же, что у мобильного: <button> внутри <li>, не
     более одной раскрытой строки, панель прячется атрибутом hidden. Enter и
     Space достаются от платформы. */
  .dld-acc {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dld-acc__item {
    border: 1px solid var(--dld-line);
    border-radius: 12px;
    background: var(--dld-paper);
    overflow: hidden;
  }

  .dld-acc__item.is-open { border-color: rgba(253, 41, 78, .28); }

  .dld-acc__head {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 19px 22px;
    border: 0;
    background: transparent;
    color: var(--dld-ink);
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -.008em;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
  }

  .dld-acc__head:focus-visible {
    outline: 2px solid var(--dld-coral);
    outline-offset: -2px;
    border-radius: 11px;
  }

  /* Коралловая «Q.» перед вопросом — приём референса. Не переводится: это
     типографская метка, одинаковая во всех локалях. */
  .dld-acc__q {
    flex: 0 0 auto;
    color: var(--dld-coral);
    font-weight: 700;
  }

  .dld-acc__label { flex: 1 1 auto; min-width: 0; }

  /* Плюс из двух псевдоэлементов: в раскрытом состоянии вертикальный штрих
     складывается и знак становится минусом — без второй иконки. */
  .dld-acc__sign {
    position: relative;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(12, 11, 43, .045);
    transition: background 160ms ease;
  }

  .dld-acc__sign::before,
  .dld-acc__sign::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--dld-ink-2);
    transform: translate(-50%, -50%);
    transition: opacity 160ms ease, background 160ms ease;
  }

  .dld-acc__sign::before { width: 12px; height: 1.6px; }
  .dld-acc__sign::after { width: 1.6px; height: 12px; }

  .dld-acc__item.is-open .dld-acc__sign { background: rgba(253, 41, 78, .10); }
  .dld-acc__item.is-open .dld-acc__sign::before { background: var(--dld-coral); }
  .dld-acc__item.is-open .dld-acc__sign::after { opacity: 0; }

  .dld-acc__panel { padding: 0 22px 20px 56px; }

  .dld-acc__panel p {
    margin: 0;
    color: var(--dld-ink-2);
    font-size: 15px;
    line-height: 1.6;
  }

  /* =========================================================================
     4. ФИНАЛЬНАЯ CTA «Start your story now.»
     Широкий тёмный баннер со скруглением. Изображение — фон самого баннера,
     отдельной подложки под ним нет.
     ========================================================================= */

  .dld-cta { padding: clamp(30px, 3.4vw, 46px) 0 clamp(40px, 4.4vw, 62px); }

  .dld-cta__banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Пропорция референса: 1360x192 при 1440 — почти 7:1. min-height не даёт
       кнопкам упереться в кромку на 1100. */
    min-height: clamp(230px, 15.5vw, 270px);
    padding: clamp(26px, 2.4vw, 34px) clamp(24px, 3vw, 48px);
    border-radius: 24px;
    background: var(--dld-dark);
    overflow: hidden;
    isolation: isolate;
    text-align: center;
  }

  .dld-cta__art {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .dld-cta__art img {
    display: block;
    width: 100%;
    height: 100%;
    /* cover, поэтому кадр 2170x725 не тянется и не сплющивается ни на одной
       ширине — по краям он режется. Центр композиции (дуга перелёта и глобус)
       и вшитая справа подпись при этом остаются в кадре. */
    object-fit: cover;
    object-position: 50% 46%;
  }

  /* Читаемость копии по центру. Ровно один слой, плотный только по центру:
     края баннера, где у картинки собственная композиция, почти не затронуты. */
  .dld-cta__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        to right,
        rgba(9, 12, 18, .12) 0%,
        rgba(9, 12, 18, .52) 22%,
        rgba(9, 12, 18, .72) 38%,
        rgba(9, 12, 18, .72) 62%,
        rgba(9, 12, 18, .46) 76%,
        rgba(9, 12, 18, .10) 100%
      );
  }

  .dld-cta__copy {
    position: relative;
    z-index: 1;
    max-width: 640px;
  }

  .dld-cta__copy .dld-eyebrow { margin-bottom: 10px; }

  .dld-cta__title {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(30px, 2.8vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.025em;
  }

  .dld-cta__text {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, .82);
    font-size: clamp(14.5px, 1.15vw, 16.5px);
    line-height: 1.45;
  }

  .dld-cta__buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
  }

  /* =========================================================================
     5. ФУТЕР
     Шаблонный футер на десктопе выключается и заменяется компактной белой
     полосой референса. Разметка шаблона не удалена — тот же <footer>.
     ========================================================================= */

  body.download-page footer.footer {
    padding-top: 0;
    padding-bottom: 0;
    background: var(--dld-paper);
  }

  body.download-page footer.footer > .container { display: none !important; }

  .dld-foot {
    display: block;
    border-top: 1px solid var(--dld-line);
    background: var(--dld-paper);
  }

  .dld-foot__row {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
    padding-block: 22px;
  }

  .dld-foot__brand { flex: 0 0 auto; }

  .dld-foot__logo { display: block; width: auto; height: 24px; margin: 0 0 6px; }

  .dld-foot__tagline {
    margin: 0;
    color: var(--dld-muted);
    font-size: 13px;
    line-height: 1.3;
  }

  .dld-foot__nav {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    /* Восемь пунктов должны укладываться в одну строку, как в референсе:
       на 1440 им остаётся ~700px между брендом и правой колонкой, и при
       gap 30px строка не помещалась — «Contact us» уезжал на вторую. */
    gap: 6px clamp(12px, 1.5vw, 22px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dld-foot__nav li { margin: 0; padding: 0; }

  .dld-foot__nav a {
    color: #4b4a63;
    font-size: 13.5px;
    white-space: nowrap;
    line-height: 1.3;
    text-decoration: none;
    transition: color 140ms ease;
  }

  .dld-foot__nav a:hover,
  .dld-foot__nav a:focus-visible { color: var(--dld-coral); text-decoration: none; }

  .dld-foot__end {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
  }

  .dld-foot__socials {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dld-foot__socials li { margin: 0; padding: 0; line-height: 1; }

  .dld-foot__socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2f2e45;
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
    transition: color 140ms ease;
  }

  .dld-foot__socials a:hover,
  .dld-foot__socials a:focus-visible { color: var(--dld-coral); }

  .dld-foot__legal {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
  }

  .dld-foot__copy {
    margin: 0;
    color: var(--dld-muted);
    font-size: 12px;
    line-height: 1.35;
  }

  .dld-foot__copy span { color: inherit; }

  .dld-foot__links {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dld-foot__links li { margin: 0; padding: 0; line-height: 1; }

  .dld-foot__links a {
    color: var(--dld-muted);
    font-size: 12px;
    line-height: 1.35;
    text-decoration: none;
  }

  .dld-foot__links a:hover,
  .dld-foot__links a:focus-visible { color: var(--dld-coral); }

  .dld-foot__sep { color: rgba(12, 11, 43, .22); font-size: 12px; line-height: 1; }

  /* =========================================================================
     Узкий десктоп (992–1279px)

     Шаблон отдаёт десктопную шапку только от 992px — ниже menu.css включает
     мобильный бургер, поэтому этот диапазон и есть вся «узкая» территория.

     Замерено: восемь пунктов меню плюс pill и переключатель языка требуют
     1060px, а свободного места при 1100px остаётся 934px — шапка молча
     обрезалась справа, вместе с языком. Поэтому сжатие идёт ступенями, и
     каждая ступень посчитана, а не выставлена на глаз.
     ========================================================================= */

  /* Полоса 1180–1400: боковая отбивка секций уже близка к своим 99px, а
     ширины футеру ещё не хватает — восемь пунктов уходили на вторую строку.
     Сжимаются только интервалы футера, типографика не трогается. */
  @media (max-width: 1399.98px) and (min-width: 1100px) {
    .dld-foot__row { gap: 18px; }
    .dld-foot__nav { gap: 6px 10px; }
    .dld-foot__nav a { font-size: 12.5px; }
    .dld-foot__tagline { font-size: 12.5px; }
  }

  /* Локали с самыми длинными подписями (ru, es, th, vi). После появления
     девятого пункта ряда (ViewChat Play) им не хватает уже базовой ступени,
     поэтому каждая ступень лестницы ниже получает для них свою строку.
     Остальные локали идут по прежним значениям. */
  html.lang-ru body.download-page #header .wsmenu-list > li > a.h-link,
  html.lang-es body.download-page #header .wsmenu-list > li > a.h-link,
  html.lang-th body.download-page #header .wsmenu-list > li > a.h-link,
  html.lang-vi body.download-page #header .wsmenu-list > li > a.h-link {
    padding: 10px 10px !important;
    font-size: 14px;
  }

  @media (max-width: 1279.98px) {
    body.download-page #header .wsmenu-list > li > a.h-link { padding: 10px 8px !important; font-size: 14px; }
    body.download-page #header .wsmenu-list > li.dld-nav-cta > a.h-link { padding: 10px 18px !important; }
    body.download-page #header .lang-btn--desktop .lang-btn__label { font-size: 14px; }

    html.lang-ru body.download-page #header .wsmenu-list > li > a.h-link,
    html.lang-es body.download-page #header .wsmenu-list > li > a.h-link,
    html.lang-th body.download-page #header .wsmenu-list > li > a.h-link,
    html.lang-vi body.download-page #header .wsmenu-list > li > a.h-link {
      padding: 10px 6px !important;
      font-size: 13px;
    }
  }

  /* Вьетнамский, 992–1440px. Ряд ссылок здесь центрируется между
     логотипом и pill, поэтому лишняя ширина отъедает зазор слева
     половиной: девятый пункт (ViewChat Play) увёл первый пункт на
     логотип — на 1300px перекрытие было 23px. «Những người sáng tạo» —
     самая длинная подпись сайта, её и ужимаем сильнее прочих. Другие
     локали и другие ширины не трогаются. */
  @media (max-width: 1440.98px) {
    html.lang-vi body.download-page #header .wsmenu-list > li > a.h-link { padding: 10px 5px !important; font-size: 13px; }
    html.lang-vi body.download-page #header .wsmenu-list > li.models-nav-item > a.h-link { padding: 10px 4px !important; font-size: 11.5px; }
  }

  @media (max-width: 1119.98px) {
    body.download-page { --dld-gutter: clamp(24px, 3vw, 34px); }
    body.download-page #header .wsmenu-list > li > a.h-link { padding: 10px 6px !important; font-size: 13.5px; }
    body.download-page #header .wsmenu-list > li.dld-nav-cta > a.h-link { padding: 9px 15px !important; }
    body.download-page #header .dld-nav-cta { margin-right: 2px; }

    /* Девятый пункт ряда (ViewChat Play) добавился во всех локалях, и в
       запас этой ступени не уложился только вьетнамский: «Những người
       sáng tạo» — самая длинная подпись сайта, и вместе с ней ряд вылезал
       за правый край на ~30px. Ужимается одна локаль, общая лестница выше
       остаётся как была. */
    html.lang-vi body.download-page #header .wsmenu-list > li > a.h-link { padding: 10px 5px !important; font-size: 12.5px; }
  }

  /* Подпись «Language» уходит, флаг и шеврон остаются: переключатель
     по-прежнему на месте и работает, а 78px, которые занимало слово,
     — единственный запас, которого не хватало на 992px. Тот же приём уже
     есть в css/lang-switcher-2.css для очень узких телефонов. */
  @media (max-width: 1039.98px) {
    body.download-page #header .lang-btn--desktop .lang-btn__label { display: none; }
    body.download-page #header .wsmenu-list > li > a.h-link { padding: 10px 5px !important; font-size: 13px; }
  }

  /* =========================================================================
     Планшет (768–991px)

     Здесь шаблон уже показывает мобильный бургер вместо десктопного меню, а
     страница остаётся десктопной. Hero перестаёт быть трёхчастным:
     рукописная подпись уходит — на такой ширине она отбирала бы у копии
     половину строки.
     ========================================================================= */

  @media (max-width: 1099.98px) {
    .dld-hero__content { width: min(560px, 62vw); margin-left: 0; }
    .dld-hero__cta { flex-wrap: wrap; }


    .dld-faq__grid { grid-template-columns: 1fr; gap: 30px; }
    .dld-faq__text { max-width: none; }

    .dld-foot__row { flex-wrap: wrap; justify-content: space-between; }
    .dld-foot__nav { order: 3; flex-basis: 100%; justify-content: flex-start; }
  }

  /* Ниже 992px десктопная шапка шаблона уступает место мобильному бургеру, и
     страница остаётся без своей белой полосы — но hero всё ещё отбит на её
     высоту. Отбивка приводится к высоте мобильной шапки шаблона (80px). */
  @media (max-width: 991.98px) {
    body.download-page { --dld-hdr: 80px; }
    .dld-hero__content { width: auto; }
  }

  /* Пользователь просил меньше движения — гасим переход постер→видео и
     микро-нажатия. Видео при этом вообще не загружается (см. JS). */
  @media (prefers-reduced-motion: reduce) {
    .dld-hero__video,
    .dld-store,
    .dld-faq__cta,
    .dld-acc__sign,
    .dld-acc__sign::before,
    .dld-acc__sign::after { transition: none; }
    .dld-store:active,
    .dld-faq__cta:active { transform: none; }
  }
}