/* Наши правки поверх стилей оригинала.
   Подключается последним, поэтому !important нужен только там,
   где у оригинала селектор той же специфичности (#id). */

/* --- Иконки блока «Join our community» ---------------------------------
   Discord и YouTube — это два PNG одинакового размера, 115x96 каждый.
   Оригинал рендерит их с разной шириной: 61px и 88px, то есть разница на
   экране 44%. Из-за этого одинаковые по исходнику иконки и вшитый в них
   текст выглядят разномасштабно. Приводим к общей ширине.

   Атрибуты width/height в разметке (94x107 и 135x105) не соответствуют
   реальным файлам — это данные из редактора LearnWorlds. Правильное
   соотношение сторон задаём здесь через aspect-ratio, чтобы не было
   скачка вёрстки до загрузки картинки.                                   */

#el_1737317676420_526,   /* Discord — 8 400+ People   */
#el_1737317676420_527 {  /* YouTube — 50 000+ Followers */
    width: 88px !important;
    height: auto !important;
    aspect-ratio: 115 / 96;
}

/* --- Логотипы блока «Trusted by» ---------------------------------------
   Польские вузы заменены на MIT, Harvard, Stanford, Toronto, McGill, UBC
   (карта подмены — _tools/assets-swap.json).

   У оригинала каждому логотипу была задана своя ширина: 151 / 161 / 130 /
   145 / 99 / 142 px — под пропорции прежних файлов. Новые экспортированы
   на общую ширину 280px, поэтому одинаковая CSS-ширина даёт одинаковый
   масштаб, а разные — нет. Задаём одну на всех.                          */

#el_1737308876417_609,   /* Harvard  */
#el_1737308876419_611,   /* MIT      */
#el_1737308876420_613,   /* Stanford */
#el_1737308876421_615,   /* Toronto  */
#el_1737308876433_617,   /* McGill   */
#el_1737308876434_619 {  /* UBC      */
    width: 160px !important;
    height: auto !important;
}

/* --- Баннер про cookie -------------------------------------------------
   Оригинал — полоса во всю ширину внизу (row шириной 1170px, центрированная,
   рамка только сверху). Делаем компактную карточку в левом нижнем углу:
   она не перекрывает контент и не тянет на себя внимание.

   Специфичность у оригинала — одиночный класс, поэтому !important не нужен
   нигде, кроме width: там правило конкурирует с фиксированной шириной 1170px. */

.dataProtectionSettingsWrapper {
    position: fixed;
    left: 24px;
    right: auto;
    bottom: 24px;
    top: auto;                      /* оригинал растягивал обёртку на весь экран */
    height: auto;
    width: 352px;
    max-width: calc(100vw - 48px);
    background: none;               /* она же служила затемняющей подложкой */
    padding: 0;
    z-index: 9999;
}

/* Именно этот элемент, а не обёртка, растягивался на всю высоту тёмным фоном
   и служил затемняющей подложкой страницы. Сбрасываем — карточке подложка не нужна. */
.dataProtectionSettings {
    margin: 0;
    height: auto !important;
    background: none !important;
}

.dataProtectionSettings-row {
    width: 100% !important;
    border-width: 2px;              /* в оригинале рамка только сверху */
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}

/* Первая строка — текст и кнопка. В узкой карточке ставим их друг под друга. */
.dataProtectionSettings-row:first-child {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.dataProtectionSettingsDescr {
    font-size: 13px;
    line-height: 1.45;
    margin-left: 0;
    padding-right: 0;
    text-align: left;               /* в узкой колонке центровка читается хуже */
}

.dataProtectionSettings-btn {
    width: 100%;
    text-align: center;
}

/* Панель «accept individual cookies» тоже должна помещаться в карточку. */
.dataProtectionSettings-row:nth-child(2) {
    padding: 14px 16px;
    max-height: 60vh;
    overflow-y: auto;
}

.dataProtectionSettings-lbl,
.dataProtectionSettings-txt {
    font-size: 12px;
}

/* --- Форма заявки -------------------------------------------------------
   Заменяет прежнюю подписку в одно поле. Цвета взяты с сайта: синяя рамка
   поля и зелёная кнопка — как у остальных призывов к действию. */

.ai-lead-form {
    max-width: 560px;
    margin: 0 auto;
    text-align: left;
    /* Секция задаёт свой шрифт заголовкам; без этого подписи полей
       наследовали засечный и выбивались из остальной страницы. */
    font-family: Barlow, "Noto Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

.ai-row {
    display: flex;
    gap: 16px;
}

.ai-row .ai-field {
    flex: 1 1 0;
    min-width: 0;              /* иначе длинное значение распирает колонку */
}

.ai-field {
    margin-bottom: 16px;
}

.ai-field label {
    display: block;
    font-family: inherit;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1b2559;
}

.ai-field input,
.ai-phone {
    width: 100%;
    box-sizing: border-box;
    height: 52px;
    border: 2px solid #1d46ec;
    border-radius: 6px;
    background: #fff;
}

.ai-field input {
    padding: 0 14px;
    font: inherit;
    font-size: 16px;
    color: #1b2559;
}

.ai-field input:focus,
.ai-phone:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px rgba(29, 70, 236, .18);
}

.ai-field input.is-invalid,
.ai-phone:has(input.is-invalid) {
    border-color: #e0364c;
}

/* Телефон: флаг и код +65 — часть поля, а не отдельные элементы. */
.ai-phone {
    display: flex;
    align-items: center;
    padding-left: 12px;
    gap: 8px;
}

.ai-phone__flag {
    display: flex;
    flex: 0 0 auto;
}

.ai-phone__code {
    flex: 0 0 auto;
    font-size: 16px;
    color: #1b2559;
}

.ai-phone input {
    border: none;
    height: 48px;
    padding-left: 4px;
    box-shadow: none !important;
}

.ai-submit {
    width: 100%;
    height: 54px;
    margin-top: 4px;
    border: none;
    border-radius: 6px;
    background: #2ecc8f;
    color: #fff;
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
}

.ai-submit:hover {
    background: #27b47e;
}

.ai-note {
    min-height: 20px;
    margin: 12px 0 0;
    font-size: 14px;
}

.ai-note.is-error { color: #e0364c; }
.ai-note.is-ok    { color: #1f9d63; }

@media (max-width: 560px) {
    .ai-row { flex-direction: column; gap: 0; }
}

/* Кнопка первого экрана стала ссылкой-якорем: <a> не наследует от <button>
   выравнивание и подчёркивание, задаём явно. */
.ai-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.ai-cta:hover { text-decoration: none; }

/* Прокрутка по якорю оставляет место сверху, чтобы был виден заголовок блока. */
#get-started { scroll-margin-top: 150px; }

/* --- Меню в шапке ------------------------------------------------------
   Убираем шеврон (он рисуется псевдоэлементом) и выпадающие списки:
   все пункты теперь ведут на форму, раскрывать нечего. */

.lw-topbar-option-link.with-submenu::after {
    content: none !important;
    display: none !important;
}

.lw-topbar-submenu {
    display: none !important;
}

/* Пункты-заголовки были <div>, а не ссылками — курсор надо задать вручную. */
.lw-topbar-option-link {
    cursor: pointer;
}

/* --- Фоновые картинки как обычные <img> ---------------------------------
   apply.py переносит style="background-image:url(...)" в тег <img> внутри
   того же блока: фон браузер запрашивает только после разбора CSS и раскладки,
   то есть уже позади блокирующих скриптов, а <img> сканер находит сразу при
   разборе разметки.

   Растягиваем картинку на весь блок. object-fit:cover по центру повторяет
   прежние background-size:cover и background-position:50% 50%, обрезку даёт
   overflow:hidden родителя с его скруглением. pointer-events:none — чтобы
   ссылка-обёртка карточки по-прежнему принимала клики. */

.ai-bg-host {
    position: relative;
}

.ai-bg-host > .ai-bg-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    border-radius: inherit;
    pointer-events: none;
}

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

   Пропорции задаём сами (aspect-ratio), а не классом движка, — блок держит
   форму независимо от того, что происходит со скриптами LearnWorlds. */

.ai-video {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #0d1030;
    cursor: pointer;
}

.ai-video__poster,
.ai-video iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.ai-video__poster {
    object-fit: cover;
}

.ai-video__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}

.ai-video:hover .ai-video__play {
    transform: translate(-50%, -50%) scale(1.06);
    background: #fff;
}

.ai-video__play svg {
    width: 34px;
    height: 34px;
    margin-left: 4px;          /* треугольник кажется смещённым влево без этого */
    fill: #1d46ec;
}

/* Обёртку блока движок прячет, когда не находит внутри своего проигрывателя:
   для него блок пустой. Мы наполнили его сами — возвращаем показ. Специфичность
   тут не поможет, скрытие приходит инлайновым стилем, отсюда !important. */
.ai-video-host {
    display: block !important;
}

/* Пока скрипт не успел выбросить достроенный движком проигрыватель,
   он не должен мелькать поверх превью. */
.ai-video-host .js-video-wrapper,
.ai-video-host .js-embed-wrapper {
    display: none !important;
}

/* Подсказка вместо плеера, когда страница открыта файлом: плеер YouTube на
   такой странице не запускается. На боевом домене не появляется никогда. */
.ai-video__note {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 16px;
    background: rgba(13, 16, 48, .88);
    color: #fff;
    font-family: Barlow, "Noto Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    line-height: 1.4;
}

/* --- Страница благодарности --------------------------------------------
   thanks.html собрана из privacy.html, поэтому текстовый блок там рассчитан
   на длинный документ. Для трёх строк его нужно сузить и убрать разнобой
   в отступах между абзацами. */

.ai-thanks {
    max-width: 620px;
    margin: 0 auto;
}

.ai-thanks p {
    margin: 0 0 12px;
}

/* Кнопка возврата: отделяем от текста, но не на всю высоту секции. */
.ai-thanks-actions {
    margin-top: 28px !important;
}

/* --- Реквизиты в футере -------------------------------------------------
   Название и адрес юрлица должны быть видны на сайте — этого требует
   проверка рекламодателя в Google. Блок мелкий, как и остальной футер. */

.ai-legal {
    margin-bottom: 10px;
    line-height: 1.5;
}

.ai-legal__name {
    font-weight: 600;
}

/* Копирайт приглушаем, чтобы название читалось первым. */
.ai-legal__copy {
    opacity: .75;
}