/* ============================================================
   «Разработка ИИ-агентов» — онлайн-марафон, 2026
   Макеты: Figma «Разработка ИИ-агентов — DZN»
   Desktop 1:333 (1440) · Tablet 47:3112 (744) · Mobile 48:5049 (375)

   Вёрстка десктопная (канва 1440). Все размеры и координаты — из макета.
   Картинки лежат в img/ai-agents/ (см. комментарии у каждого блока).
   ============================================================ */

:root {
    --aia-ink:    #000000;  /* основной текст и кнопки */
    --aia-white:  #FFFFFF;
    --aia-card:   #F2F1F6;  /* серые карточки */
    --aia-lime:   #A5FC8E;  /* акцентный салатовый */
    --aia-canvas: 1440px;
    --aia-col:    1216px;   /* контентная колонка */
    /* Боковое поле: 112px на канве 1440, сжимается до нуля к 1216px.
       Между 1216 и 1440 колонка остаётся 1216, ужимаются только поля —
       вся внутренняя раскладка остаётся пиксельной. */
    --aia-gutter: clamp(0px, calc((100% - 1216px) / 2), 112px);

    /* [aia-italic] Курсивное начертание. В макете — Proxima Nova Bold Italic,
       но такого файла на сайте нет. Единственный italic внутри семейства '~' —
       это SF Pro Display Bold Italic (файл Fp95D, объявлен как 900 italic), а
       font-style в CSS сопоставляется раньше font-weight, поэтому пара
       `font-weight: 700; font-style: italic` уводит текст в чужую гарнитуру с
       другими формами букв — что и видно при сверке с макетом.

       Обход ниже подставляет семейство '-' (это Proxima Nova Regular Italic,
       файл If7oD, объявленный как normal: наклон даёт сам файл, поэтому
       обязателен `font-style: normal`, иначе браузер доклонит уже наклонные
       буквы), а вес 700 синтезирует браузер. Формы букв при этом совпадают с
       макетом, но синтетический болд тоньше настоящего (заливка глифов 11732
       против 12650 у Proxima Nova Bold) — рядом с прямым Bold в том же
       заголовке разница в толщине заметна, поэтому обход выключен.

       Настоящее решение — положить ProximaNova-BoldIt на
       ai-academy.ru/static/fonts/ и объявить его как '~' 700 italic: тогда
       текущий код (`font-weight: 700; font-style: italic`) заработает сам.

       Чтобы вернуть обход: раскомментировать переменную ниже и три парных
       строки с пометкой [aia-italic] — .aia__h2, .aia-marathon__title em,
       .aia-final__title. */
    /* --aia-italic: '-', '~', 'Proxima Nova', 'Inter', system-ui, sans-serif; */
}

/* ------------------------------------------------------------
   Каркас
   ------------------------------------------------------------ */
.aia, .aia * { box-sizing: border-box; }

/* Корень тянется во всю ширину окна, канва макета (1440) — это секции
   внутри. min-width — контентная колонка: ниже 1216px десктопная
   раскладка уже не умещается и включается адаптив. */
.aia {
    position: relative;
    min-width: var(--aia-col);
    overflow: hidden;
    padding-bottom: 120px;
    background: var(--aia-white);
    color: var(--aia-ink);
    font-family: '~', 'Proxima Nova', 'Inter', system-ui, sans-serif;
    font-weight: 400;
}

/* Слой градиентной подложки — центрированная канва 1440 без overflow:
   эллипсы привязаны к её координатам (как в макете), но свободно выходят
   за края и обрезаются только корнем .aia. Смещён на -116px, т.к. в макете
   фон начинается от шапки сайта. */
.aia__bg {
    position: absolute;
    top: -116px;
    left: 50%;
    transform: translateX(-50%);
    width: var(--aia-canvas);
    height: 6029px;
    pointer-events: none;
    z-index: 0;
}

/* Градиентные пятна: слой «background» из макета, разобранный на элементы
   (эллипс + Layer blur в Figma = border-radius + filter: blur).
   Порядок в разметке = порядок отрисовки в макете, менять нельзя.

   В макете эллипсы повёрнуты (часть — ещё и отражена, но эллипс симметричен,
   поэтому отражение сводится к повороту). Размытие при этом равномерное,
   так что каждое пятно — это 2rx × 2ry из макета плюс rotate() вокруг центра;
   left/top — координаты левого верхнего угла НЕповёрнутого бокса.
   Числа сняты с плоского SVG всего слоя background, а не с отдельных нод:
   у отдельных нод Figma отдаёт габарит без поворота, и по нему координаты
   восстанавливаются неверно.

   Три набора — свой на каждое разрешение, у макетов они разные:
   .aia__blob (десктоп, канва 1440, координаты в px),
   .aia__blob-t (планшет) и .aia__blob-m (мобильные) — там канва тянется по
   ширине окна, поэтому по горизонтали проценты от 744 и 375 соответственно. */
.aia__blob,
.aia__blob-t,
.aia__blob-m {
    position: absolute;
    border-radius: 50%;
}
.aia__blob-t,
.aia__blob-m { display: none; }

.aia__blob--1 { left: 819.36px; top: 594.55px; width: 888.96px; height: 426.92px;
    background: #C0FFA0; filter: blur(200px); transform: rotate(36.7582deg); }
.aia__blob--2 { left: -280.65px; top: 2388.83px; width: 1208.18px; height: 439.38px;
    background: #C0FFA0; filter: blur(200px); transform: rotate(-36.7582deg); }
.aia__blob--3 { left: 611.35px; top: 3647.83px; width: 1208.18px; height: 439.38px;
    background: #C0FFA0; filter: blur(200px); transform: rotate(30deg); }
.aia__blob--4 { left: -396.55px; top: 4944.84px; width: 1355.09px; height: 416.92px;
    background: #C0FFA0; filter: blur(200px); transform: rotate(-30deg); }
.aia__blob--5 { left: 40.67px; top: -74.45px; width: 813.15px; height: 263.02px;
    background: #B1FD98; filter: blur(150px); transform: rotate(32.0178deg); }

/* планшет, канва 744 */
.aia__blob-t--1 { left: 45.4887%; top: 656.31px; width: 89.3667%; height: 319.31px;
    background: #C0FFA0; filter: blur(149.59px); transform: rotate(45deg); }
.aia__blob-t--2 { left: -59.3684%; top: 6371.95px; width: 117.5379%; height: 514.82px;
    background: #C0FFA0; filter: blur(200px); transform: rotate(-60deg); }
.aia__blob-t--3 { left: 1.7716%; top: 4449.36px; width: 148.3089%; height: 401.28px;
    background: #C0FFA0; filter: blur(182.66px); transform: rotate(56.5848deg); }
.aia__blob-t--4 { left: 16.0423%; top: 2386.83px; width: 162.3898%; height: 439.38px;
    background: #C0FFA0; filter: blur(200px); transform: rotate(-36.7582deg); }
.aia__blob-t--5 { left: -66.0216%; top: 3053.44px; width: 140.222%; height: 379.4px;
    background: #C0FFA0; filter: blur(172.7px); transform: rotate(-36.7582deg); }
.aia__blob-t--6 { left: -30.5102%; top: 159.53px; width: 89.3664%; height: 215.07px;
    background: #B1FD98; filter: blur(122.65px); transform: rotate(32.0178deg); }

/* мобильные, канва 375 */
.aia__blob-m--1 { left: -79.5331%; top: -0.09px; width: 142.7243%; height: 173.12px;
    background: #B1FD98; filter: blur(98.73px); transform: rotate(45deg); }
.aia__blob-m--2 { left: 31.1533%; top: 419.88px; width: 142.7243%; height: 173.12px;
    background: #B1FD98; filter: blur(98.73px); transform: rotate(45deg); }
.aia__blob-m--3 { left: -47.1517%; top: 4719.36px; width: 294.2448%; height: 401.28px;
    background: #C0FFA0; filter: blur(182.66px); transform: rotate(56.5848deg); }
.aia__blob-m--4 { left: -53.8782%; top: 6439.33px; width: 196.7643%; height: 353.36px;
    background: #C0FFA0; filter: blur(160.84px); transform: rotate(-56.5848deg); }
.aia__blob-m--5 { left: -98.6499%; top: 3332.91px; width: 229.8203%; height: 313.42px;
    background: #C0FFA0; filter: blur(142.66px); transform: rotate(-36.7582deg); }
.aia__blob-m--6 { left: -18.9516%; top: 2571.58px; width: 193.4069%; height: 263.76px;
    background: #C0FFA0; filter: blur(120.06px); transform: rotate(-36.7582deg); }

/* Секция = канва макета: абсолютные декорации внутри считаются от её
   левого края, поэтому их left/top совпадают с координатами макета. */
.aia section {
    position: relative;
    width: 100%;
    max-width: var(--aia-canvas);
    margin-left: auto;
    margin-right: auto;
}

/* Контентная колонка (1216). */
.aia__w {
    position: relative;
    z-index: 2;
    display: flow-root;
    width: 100%;
    max-width: var(--aia-canvas);
    margin: 0 auto;
    padding: 0 var(--aia-gutter);
}

/* :where() не добавляет специфичности — иначе этот сброс (0,1,1) перебивал
   бы margin-top у правил с одним классом. */
.aia :where(h1, h2, h3, p) { margin: 0; }
.aia img { display: block; max-width: none; }

/* ---- Типографика макета ---- */
.aia__h2 {                        /* Desktop/Headline/H2/Bold Italic */
    font-weight: 700;
    font-style: italic;
    /* [aia-italic] см. :root — font-family: var(--aia-italic); font-style: normal; */
    font-size: 64px;
    line-height: 72px;
    text-align: center;
}

/* ---- Кнопка (Buttons / Main) ----
   Селектор с префиксом .aia обязателен: страница лежит внутри <div class="🦄">,
   а в CSS сайта есть `.🦄 button { display: block; width: 100%; font-size: 0;
   background: none; border: none; }` со специфичностью (0,1,1). */
.aia .aia-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 206px;
    height: 54px;
    padding: 12px 24px;
    border: 0;
    border-radius: 99px;
    background: var(--aia-ink);
    color: var(--aia-white);
    font-family: inherit;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .25s ease;
}
.aia .aia-btn:hover { background: #333636; }

/* ---- Плашка-подсветка под первыми словами (Rectangle 3767…) ----
   В макете это отдельный прямоугольник под текстом, а не фон инлайна:
   ширина и позиция взяты из макета. */
.aia-card__mark {
    position: absolute;
    border-radius: 24px;
    pointer-events: none;
}

/* Плашка шире своего текста примерно на 7–8px с каждой стороны, поэтому
   слово, попавшее на ту же строку, вплотную упирается в её край (а то и
   налезает). Добавляем этот вынос обратно отступом, чтобы между краем
   плашки и соседним словом остался обычный пробел. */
.aia-card__lead { padding-right: .35em; }

/* В «Что получишь» плашка — не отдельный прямоугольник с шириной из макета,
   а фон самого лида: карточки там резиновые (до 320px ширины экрана), лид
   может перенестись на две строки, и фикс-прямоугольник это не переживает.
   padding — вынос плашки за текст (8px из макета), отрицательный margin-left
   возвращает сам текст на координату колонки. */
.aia-gain__lead {
    padding: .06em .333em;
    margin-left: -.333em;
    border-radius: 24px;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
}

/* ---- Наборы декоративных штрихов из карточек ---- */
.aia-slash { position: absolute; display: flex; align-items: center; }
.aia-slash i {
    position: relative;
    display: block;
    width: 15.647px;
    height: 22.987px;
}
.aia-slash i::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4.114px;
    height: 24.168px;
    margin: -12.084px 0 0 -2.057px;
    border-radius: 100px;
    background: var(--aia-white);
    transform: rotate(30deg);
}

.aia-dots { position: absolute; display: flex; gap: 8px; }
.aia-dots i { display: block; width: 8px; height: 8px; background: var(--aia-white); }
.aia-dots--col { flex-direction: column; }

.aia-bars { position: absolute; display: flex; align-items: center; gap: 4px; }
.aia-bars i { display: block; height: 8px; background: var(--aia-lime); }
.aia-bars i:nth-child(1) { width: 8px; }
.aia-bars i:nth-child(2) { width: 16px; }
.aia-bars i:nth-child(3) { width: 24px; }
.aia-bars i:nth-child(4) { width: 32px; }

/* ============================================================
   1. БАННЕР
   ============================================================ */
.aia-hero {
    height: 684px;
    overflow: hidden;   /* фрейм баннера в макете обрезает линии */
}

.aia-hero__col {
    position: relative;
    padding-top: 48px;
}

/* --- тонкие линии (только десктопная канва) --- */
.aia-line { position: absolute; z-index: 1; display: block; }
.aia-line img { width: 100%; height: 100%; }

.aia-line--1 { left: -1px;  top: 572px;  width: 823px; height: 81px; }
.aia-line--3 { left: 495px; top: 237px;  width: 946px; height: 446px; }
.aia-line--4 { left: -1px;  top: 315px;  width: 653px; height: 368px; transform: scaleX(-1); }
.aia-line--5 { left: 905px; top: 87px;   width: 537px; height: 338px; }
.aia-line--7 { left: 691px; top: -1px;   width: 694px; height: 684px; }

/* Линии 2 и 6 в макете повёрнуты: наружная рамка — габарит после поворота,
   картинка внутри лежит в исходной ориентации и крутится вокруг центра. */
.aia-line--2 { left: 0;     top: -64px;  width: 724px; height: 177px; }
.aia-line--2 img {
    position: absolute;
    left: 50%; top: 50%;
    width: 179px; height: 726px;
    transform: translate(-50%, -50%) rotate(90deg) scaleY(-1);
}
.aia-line--6 { left: 762px; top: -116px; width: 173px; height: 768px; }
.aia-line--6 img {
    position: absolute;
    left: 50%; top: 50%;
    width: 770px; height: 175px;
    transform: translate(-50%, -50%) rotate(-90deg);
}

/* --- строка логотипов --- */
.aia-logos {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 24px;
}
.aia-logos img { width: 100%; height: 100%; object-fit: contain; }
.aia-logos__x          { flex: 0 0 10px; width: 10px; height: 10px; }
.aia-logos__i--fond    { width: 125px; height: 41px; }
.aia-logos__i--academy { width: 100px; height: 39px; }
.aia-logos__i--airi    { width: 116px; height: 35.304px; }

/* --- 3D-объект баннера ---
   Внешний бокс = фрейм img из макета (по нему считаются отступы соседей),
   картинка внутри — сам объект: он квадратный и меньше фрейма, поэтому
   задан отдельно, иначе растянулся бы по фрейму. */
.aia-hero__media {
    position: absolute;
    left: 624px;         /* 736 в макете − 112 отступа колонки */
    top: 24px;
    z-index: 3;
    width: 592px;
    height: 625px;
}
.aia-hero__media img { position: absolute; left: 8px; top: 25px; width: 576px; height: 576px; }

/* --- текстовый блок --- */
.aia-hero__content {
    position: relative;
    z-index: 2;
    margin-top: 107px;   /* 196 − (48 + 41) */
    width: 638px;
}

.aia-hero__date { display: flex; align-items: center; }
.aia-hero__date span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 10px 16px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    white-space: nowrap;
}
.aia-hero__date-m { background: var(--aia-ink);  color: var(--aia-white); }
.aia-hero__date-y { background: var(--aia-lime); color: var(--aia-ink); }

.aia-hero__title {
    margin-top: 8px;
    font-weight: 700;
    font-size: 64px;
    line-height: 72px;
}

.aia-hero__desc {
    position: relative;
    margin-top: 24px;
    width: 592px;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
}
.aia-hero__desc br { display: none; }   /* перенос нужен только на планшете и мобильных */

/* Здесь плашка обнимает слова внутри строки, а не стоит в начале, поэтому
   она не абсолютная с координатами макета (при чуть другой ширине шрифта
   предыдущее слово в неё упиралось), а фон самого инлайна: padding — вынос
   плашки за текст из макета, margin — просвет до соседних слов. */
.aia-hero__mark {
    /* Строка забита почти под завязку: «Онлайн-марафон,» + пробел + текст
       плашки = 574.7px при ширине абзаца 592 (замерено по самому шрифту),
       т.е. на боковые отступы плашки остаётся ~17px. Поэтому padding
       компенсируется отрицательным margin: 2×(.4−.12)em ≈ 13.4px, ещё ~4px
       запаса. Увеличивать padding можно только вместе с margin, иначе
       «лекция» уедет на следующую строку. */
    padding: .1em .4em;
    margin: 0 -.12em;
    border-radius: 100px;
    background: var(--aia-lime);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.aia-hero__content .aia-btn { margin-top: 24px; }

/* ============================================================
   2. МАРАФОН + КОМУ ПОДОЙДЁТ
   ============================================================ */
.aia-marathon { margin-top: 69px; }

.aia-marathon__col { position: relative; height: 723px; }

/* серая карточка с вырезами и «мозг» — один экспорт из макета */
.aia-marathon__img {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 1248px;
    height: 536px;
}
.aia-marathon__img img { width: 100%; height: 100%; }

.aia-marathon__text {
    position: absolute;
    left: 77px;          /* 189 − 112 */
    top: 107px;
    z-index: 2;
    width: 642px;
}
.aia-marathon__title {
    font-weight: 700;
    font-size: 64px;
    line-height: 64px;
}
.aia-marathon__title em { font-style: italic; }
/* [aia-italic] см. :root — .aia-marathon__title em { font-family: var(--aia-italic); font-style: normal; } */
.aia-marathon__desc {
    margin-top: 24px;
    font-size: 24px;
    line-height: 32px;
}

.aia-who__img {
    position: absolute;
    left: 1.5px;
    top: 526.5px;
    display: block;
    width: 1215px;
    height: 196px;
}
.aia-who__img img { width: 100%; height: 100%; }

.aia-who__title {
    position: absolute;
    left: 77px;
    top: 590px;
    z-index: 2;
    width: 423px;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
}
.aia-who__desc {
    position: absolute;
    left: 624px;         /* 736 − 112 */
    top: 593px;
    z-index: 2;
    width: 423px;
    font-size: 20px;
    line-height: 28px;
}

/* ============================================================
   3. МАРАФОН — ЭТО
   ============================================================ */
.aia-about { margin-top: 120px; }

.aia-about__grid {
    display: grid;
    grid-template-columns: repeat(3, 400px);
    gap: 8px;
    margin-top: 40px;
}

.aia-card {
    position: relative;
    height: 374px;
    overflow: hidden;
    border-radius: 16px;
}
.aia-card__text {
    position: absolute;
    left: 32px;
    top: 32px;
    z-index: 2;
    width: 336px;
    font-size: 20px;
    line-height: 28px;
}
.aia-card__mark { left: 25px; top: 30px; height: 32px; }
/* 3D-объекты карточек — экспорт самого объекта, без полей фрейма и без
   поворота: в макете он повёрнут и вылезает за фрейм img, поэтому здесь
   задан своим размером из макета и докручивается transform. Карточка
   с overflow: hidden обрезает свисающую часть — как в макете. */
.aia-card__obj  { position: absolute; object-fit: contain; }

/* «6 вебинаров» */
.aia-card--1 { background: linear-gradient(186.199deg, #A5FC8E 5.2039%, #FFFFFF 94.796%); }
.aia-card--1 .aia-card__mark { left: 24px; width: 137px; background: var(--aia-ink); }
.aia-card--1 .aia-card__lead { color: var(--aia-white); }
.aia-card--1 .aia-slash { right: 31.77px; top: 32px; }
.aia-card--1 .aia-card__obj { left: 138.14px; top: 195.14px; width: 248.1px; height: 248.1px; transform: rotate(38.18deg) scaleX(-1); }

/* «Сквозной проект» */
.aia-card--2 { background: var(--aia-card); }
.aia-card--2 .aia-card__mark { width: 176px; background: var(--aia-lime); }
.aia-card--2 .aia-dots { left: 32px; top: 334px; }
.aia-card--2 .aia-card__obj { left: 120.99px; top: 172.99px; width: 291.02px; height: 291.02px; transform: rotate(11.25deg); }

/* «К каждому занятию» — тот же градиент, но отражённый по вертикали */
.aia-card--3 { background: linear-gradient(353.801deg, #A5FC8E 5.2039%, #FFFFFF 94.796%); }
.aia-card--3 .aia-card__mark { width: 193px; background: var(--aia-ink); }
.aia-card--3 .aia-card__lead { color: var(--aia-white); }
.aia-card--3 .aia-dots { left: 32px; top: 270px; }
.aia-card--3 .aia-card__obj { left: 140.64px; top: 180.65px; width: 269.96px; height: 269.96px; transform: rotate(-128.33deg) scaleX(-1); }

/* «Практическое задание» */
.aia-card--4 { border-radius: 12px; background: var(--aia-white); }
.aia-card--4 .aia-card__mark { width: 145px; background: var(--aia-lime); }
.aia-card--4 .aia-bars { left: 32px; top: 334px; }
.aia-card--4 .aia-card__obj { left: 120px; top: 194px; width: 288px; height: 288px; }

/* фото — карточка со срезанным углом, экспорт из макета */
.aia-card--photo { overflow: visible; border-radius: 0; }
.aia-card__photo,
.aia-card__photo img { display: block; width: 100%; height: 100%; }

/* «Сообщество ВКонтакте» */
.aia-card--5 { border-radius: 12px; background: var(--aia-card); }
.aia-card--5 .aia-card__mark { width: 234px; background: var(--aia-lime); }
.aia-card--5 .aia-slash { left: 32px; top: 319px; }
.aia-card--5 .aia-card__obj { left: 107px; top: 160px; width: 305.41px; height: 305.41px; }

/* «Не нужно писать код» */
.aia-card--wide {
    grid-column: 1 / -1;
    height: 199px;
    background: var(--aia-white);
}
.aia-card__title {
    position: absolute;
    left: 32px;
    top: 48px;
    width: 423px;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
}
.aia-card__note {
    position: absolute;
    left: 630px;
    top: 51px;
    width: 423px;
    font-size: 20px;
    line-height: 28px;
}

/* ============================================================
   4. ПРОГРАММА МАРАФОНА
   ============================================================ */
.aia-program { margin-top: 120px; }

.aia-program__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 864px;
    margin: 40px auto 0;
}

.aia-level {
    display: grid;
    grid-template-columns: 158px 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 24px;
    align-items: start;
    padding: 32px 32px 32px 24px;
    border-radius: 16px;
}
.aia-level__head { display: contents; }
.aia-level__img  { grid-column: 1; grid-row: 1 / 3; width: 158px; height: 140px; }
.aia-level__img img { width: 100%; height: 100%; object-fit: contain; }

.aia-level__name {
    grid-column: 2;
    grid-row: 1;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
}
.aia-level__groups {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 16px;
}
.aia-level__group { display: flex; flex-direction: column; gap: 16px; }

.aia-lesson { display: flex; align-items: center; gap: 8px; }
.aia-lesson__num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 12px;
    border-radius: 100px;
    background: var(--aia-ink);
    color: var(--aia-white);
    font-size: 20px;
    line-height: 28px;
    white-space: nowrap;
}
.aia-lesson__title { font-weight: 700; font-size: 20px; line-height: 28px; }
.aia-lesson__desc  { font-size: 20px; line-height: 28px; }

.aia-level--1 { background: var(--aia-lime); }
.aia-level--2 { background: linear-gradient(183.017deg, #A5FC8E 32.3%, #FFFFFF 94.796%); }
.aia-level--3 { background: var(--aia-white); }
.aia-level--4 { background: var(--aia-card); }
.aia-level--bonus { background: var(--aia-ink); color: var(--aia-white); }

/* ============================================================
   5. ЧТО ПОЛУЧИШЬ
   ============================================================ */
.aia-gains { margin-top: 120px; }

/* Две колонки разной высоты — в макете это не сетка, а свободная
   раскладка, поэтому карточки стоят по координатам макета. */
.aia-gains__grid {
    position: relative;
    height: 742px;
    margin-top: 50px;    /* 122 − 72 (высота заголовка) */
}

.aia-gain {
    position: absolute;
    overflow: hidden;
    border-radius: 16px;
}
.aia-gain__text {
    position: absolute;
    left: 32px;
    top: 32px;
    z-index: 2;
    font-size: 24px;
    line-height: 32px;
}
.aia-gain__obj  { position: absolute; z-index: 1; object-fit: contain; }

.aia-gain--1 {
    left: 0; top: 2px; width: 604px; height: 242px;
    background: var(--aia-lime);
}
.aia-gain--1 .aia-gain__lead { background: var(--aia-ink); color: var(--aia-white); }
.aia-gain--1 .aia-gain__text { width: 540px; }
/* Объект здесь — не картинка во весь фрейм img, как у остальных карточек,
   а повёрнутая нода: в макете 236.23×236.23 с поворотом 12.475°, её габарит
   после поворота как раз даёт 281.69 и вылезает за правый край карточки.
   Отсюда отрицательный right и подъём по top: поворот идёт вокруг центра,
   поэтому позицию считаем от центра габарита, а не от угла фрейма.
   Планшет даёт ровно те же right/top (карточка уже на 12px, фрейм сдвинут
   на столько же), так что отдельного правила на 744–1215 не нужно. */
.aia-gain--1 .aia-gain__obj  { right: -8.95px; top: 52.73px; width: 236.23px; height: 236.23px;
    transform: rotate(12.475deg); }

.aia-gain--2 {
    left: 612px; top: 0; width: 604px; height: 242px;
    background: linear-gradient(180deg, #A5FC8E 0%, #FFFFFF 100%);
}
.aia-gain--2 .aia-gain__lead { background: var(--aia-ink); color: var(--aia-white); }
.aia-gain--2 .aia-gain__text { width: 352px; }
.aia-gain--2 .aia-gain__obj  { left: 348px; top: 80px; width: 264px; height: 264px; }

/* «Готовый проект» — белая карточка с вырезом слева, срезанным углом справа
   и штрихами по правому краю; жидкий металл внутри.
   Экспорт gain-project.webp — только металл на прозрачном фоне, самой
   карточки в нём нет. Поэтому подложка здесь белая, а форму задаёт маска —
   тот же контур из макета (векторный, поэтому одинаково тянется на все три
   разрешения: пропорции карточки на них совпадают, 604/492 = 592/482 = 344/280). */
.aia-gain--3 {
    left: 0;
    top: 250px;
    width: 604px;
    height: 492px;
    background: var(--aia-white);
    -webkit-mask: url('img/ai-agents/gain-card.svg') no-repeat 0 0 / 100% 100%;
            mask: url('img/ai-agents/gain-card.svg') no-repeat 0 0 / 100% 100%;
}
.aia-gain--3 .aia-gain__lead { background: var(--aia-lime); }
.aia-gain--3 .aia-gain__text { width: 483px; }
.aia-gain__art { position: absolute; inset: 0; display: block; }
.aia-gain__art img { width: 100%; height: 100%; }

.aia-gain--4 {
    left: 612px; top: 250px; width: 604px; height: 242px;
    background: var(--aia-white);
}
.aia-gain--4 .aia-gain__lead { background: var(--aia-lime); }
.aia-gain--4 .aia-gain__text { width: 352px; }
.aia-gain--4 .aia-gain__obj  { left: 348px; top: 80px; width: 264px; height: 264px; }

.aia-gain--5 {
    left: 612px; top: 500px; width: 298px; height: 242px;
    border-radius: 12px;
    background: var(--aia-lime);
}
.aia-gain--5 .aia-gain__lead { background: var(--aia-ink); color: var(--aia-white); }
.aia-gain--5 .aia-gain__text { width: 236px; }

.aia-gain--6 {
    left: 918px; top: 500px; width: 298px; height: 242px;
    border-radius: 12px;
    background: var(--aia-card);
}
.aia-gain--6 .aia-gain__lead { background: var(--aia-lime); }
.aia-gain--6 .aia-gain__text { width: 236px; }

/* ============================================================
   6. ФИНАЛЬНЫЙ БЛОК
   ============================================================ */
.aia-final { margin-top: 120px; }

.aia-final__card { position: relative; height: 422px; }

.aia-final__img {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 1234px;
    height: 422px;
}
.aia-final__img img { width: 100%; height: 100%; }

.aia-final__text {
    position: absolute;
    left: 77px;
    top: 90px;
    z-index: 2;
    width: 642px;
}
.aia-final__title {
    font-weight: 700;
    font-style: italic;
    /* [aia-italic] см. :root — font-family: var(--aia-italic); font-style: normal; */
    font-size: 40px;
    line-height: 1.1;
}
.aia-final__text .aia-btn { margin-top: 32px; }

/* ============================================================
   АДАПТИВ — общее для планшета и мобильных
   Десктопная сетка привязана к канве 1440, поэтому ниже 1216px
   (ширина контентной колонки) её нужно распустить.
   ============================================================ */
@media (max-width: 1215px) {
    .aia { min-width: 0; width: 100%; }
    .aia section { width: 100%; }

    /* Канва распущена по ширине окна — слой подложки тянется вместе с ней,
       поэтому у пятен здесь свои наборы координат (в процентах). */
    .aia__bg   { left: 0; width: 100%; transform: none; }
    .aia__blob { display: none; }

    /* Содержимое секций не растягивается шире колонки макета. */
    .aia__w > * {
        width: 100%;
        max-width: 592px;
        margin-left: auto;
        margin-right: auto;
    }

    .aia-line { display: none; }        /* линии есть только в макете 1440 */
    .aia-hero__desc br { display: inline; }

    /* ---------- 1. БАННЕР ---------- */
    .aia-hero { height: 513px; }
    .aia-hero__media { left: 283px; top: 133px; width: 341px; height: 360px; }
    /* фрейм img на планшете и мобильных одинаковый (341×360), объект внутри тоже */
    .aia-hero__media img { left: 5.112px; top: 14.4px; width: 331.776px; height: 331.776px; }
    .aia-hero__content { margin-top: 76px; width: 416px; }
    .aia-hero__date span { font-size: 16px; line-height: 24px; }
    .aia-hero__title { font-size: 40px; line-height: 48px; }
    .aia-hero__desc  { width: 279px; font-size: 16px; line-height: 20px; }
    /* Здесь плашка открывает строку, поэтому margin-left отрицательный на всю
       величину padding — подсвеченный текст остаётся выровнен по колонке,
       а фон выходит за неё влево, как и в макете. */
    .aia-hero__mark  { padding: 0 .4em; margin-left: -.4em; margin-right: -.12em; }

    /* ---------- 2. МАРАФОН ---------- */
    .aia-marathon { margin-top: 120px; }
    .aia-marathon__col { height: 892px; }
    .aia-marathon__img { width: 592px; height: 656px; }
    .aia-marathon__text { left: 24px; top: 64px; width: 544px; }
    .aia-marathon__title { font-size: 40px; line-height: 48px; }
    .aia-marathon__desc  { width: 544px; }

    .aia-who__img   { left: 0; top: 656px; width: 592px; height: 236px; }
    .aia-who__title { left: 24px; top: 696px; width: 447px; }
    .aia-who__desc  { left: 24px; top: 744px; width: 447px; }

    /* ---------- 3. МАРАФОН — ЭТО ---------- */
    .aia-about__grid { grid-template-columns: repeat(2, 292px); }
    .aia-card__text  { left: 24px; top: 24px; width: 244px; }
    .aia-card__mark  { left: 17px; top: 22px; }
    .aia-card--1 .aia-card__mark { left: 16px; }
    .aia-card--1 .aia-slash { right: 23.77px; top: 24px; }
    .aia-card--1 .aia-card__obj { left: 79.02px; top: 228.92px; width: 201.5px; height: 201.5px; }
    .aia-card--2 .aia-dots { left: 24px; top: 334px; }
    .aia-card--2 .aia-card__obj { left: 65.07px; top: 210.96px; width: 236.02px; height: 236.02px; }
    .aia-card--3 { background: linear-gradient(351.537deg, #A5FC8E 5.2039%, #FFFFFF 94.796%); }
    .aia-card--3 .aia-dots { left: 24px; top: 278px; }
    .aia-card--3 .aia-card__obj { left: 81.05px; top: 218.17px; width: 219.3px; height: 219.3px; }
    .aia-card--4 .aia-card__text { width: 232px; }
    .aia-card--4 .aia-card__obj  { left: 67.2px; top: 228px; width: 233.6px; height: 233.6px; }
    .aia-card--5 .aia-slash { left: auto; right: 189.77px; top: 327px; }
    .aia-card--5 .aia-card__obj { left: 53.69px; top: 200.42px; width: 248.4px; height: 248.4px; }
    .aia-card--1 { background: linear-gradient(188.463deg, #A5FC8E 5.2039%, #FFFFFF 94.796%); }

    /* «Практическое» — набор полосок в макете повёрнут в столбик */
    .aia-card--4 .aia-bars {
        left: 24px; top: 258px;
        flex-direction: column-reverse;
        align-items: flex-start;
        width: 8px; height: 92px;
    }
    .aia-bars i { width: 8px !important; }
    .aia-bars i:nth-child(1) { height: 8px; }
    .aia-bars i:nth-child(2) { height: 16px; }
    .aia-bars i:nth-child(3) { height: 24px; }
    .aia-bars i:nth-child(4) { height: 32px; }

    .aia-card--wide {
        display: flex;
        flex-direction: column;
        gap: 16px;
        height: 180px;
        padding: 24px;
        border-radius: 12px;
    }
    .aia-card__title,
    .aia-card__note { position: static; width: 100%; }

    /* ---------- 4. ПРОГРАММА ---------- */
    .aia-program__list { width: 100%; }
    .aia-level {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 24px;
    }
    .aia-level__head { display: flex; align-items: center; gap: 24px; }
    .aia-level__img  { flex: none; width: 100px; height: 89px; }
    .aia-level__groups { margin-top: 0; }

    /* ---------- 5. ЧТО ПОЛУЧИШЬ ---------- */
    .aia-gains__grid {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 292px);
        gap: 8px;
        height: auto;
        margin-top: 40px;
    }
    .aia-gain { position: relative; left: auto; top: auto; grid-column: 1 / -1; width: 100%; }
    .aia-gain__text { left: 24px; top: 24px; }
    .aia-gain--3 { height: 482px; }
    .aia-gain--5,
    .aia-gain--6 { grid-column: auto; width: 292px; }

    /* ---------- 6. ФИНАЛ ---------- */
    .aia-final__card { height: 625px; }
    .aia-final__img  { width: 592px; height: 625px; }
    .aia-final__text { left: 24px; top: 64px; width: 544px; }
}

/* ============================================================
   ПЛАНШЕТ (канва 744)
   ============================================================ */
@media (min-width: 744px) and (max-width: 1215px) {
    .aia__w { padding: 0 76px; }
    .aia__bg { top: -312px; height: 7952px; }
    .aia__blob-t { display: block; }
}

/* ============================================================
   МОБИЛЬНЫЕ (канва 375)
   ============================================================ */
@media (max-width: 743px) {
    .aia { padding-bottom: 80px; }
    .aia__w { padding: 0 16px; }
    .aia__w > * { max-width: 344px; }
    .aia__bg { top: -138px; height: 7631px; }
    .aia__blob-t { display: none; }
    .aia__blob-m { display: block; }

    .aia__h2 { font-size: 40px; line-height: 48px; }
    .aia .aia-btn { width: 100%; }

    /* ---------- 1. БАННЕР ---------- */
    .aia-hero { height: auto; }
    .aia-hero__col { padding-top: 16px; }
    .aia-logos { gap: 14px; }
    .aia-logos__x          { flex-basis: 6px; width: 6px; height: 6px; }
    .aia-logos__i--fond    { width: 59px;     height: 19.352px; }
    .aia-logos__i--academy { width: 55.897px; height: 21.8px; }
    .aia-logos__i--airi    { width: 63px;     height: 18px; }

    /* объект возвращается в поток между логотипами и текстом;
       бокс тянется по колонке, пропорция макета держит объект квадратным */
    .aia-hero__media { position: relative; left: auto; top: auto; margin: 8px auto 0; width: 100%; height: auto; aspect-ratio: 341 / 360; }
    .aia-hero__media img { left: 1.4991%; top: 4%; width: 97.295%; height: auto; }
    .aia-hero__content { margin-top: 16px; width: 100%; }
    .aia-hero__desc { width: 100%; }

    /* ---------- 2. МАРАФОН ---------- */
    .aia-marathon { margin-top: 80px; }
    /* Колонка держит пропорцию мобильного макета (344×629), поэтому обе
       картинки и координаты по вертикали задаются процентами и сжимаются
       вместе с ней. Тексты остаются в px: они не масштабируются, только
       переносятся на строку-другую больше — запас по высоте это позволяет. */
    .aia-marathon__col { height: auto; aspect-ratio: 344 / 629; }
    .aia-marathon__img { width: 100%; height: 71.8601%; }
    .aia-marathon__text { left: 24px; top: 6.3593%; right: 21px; width: auto; }
    .aia-marathon__title { font-size: 24px; line-height: 32px; }
    .aia-marathon__desc  { margin-top: 16px; width: auto; font-size: 18px; line-height: 22px; }

    /* Полоса «Кому подойдёт» ужимается вместе с колонкой, а текст на ней —
       нет: на 320px описание становится пятистрочным и вылезает за неё.
       Поэтому у полосы есть минимум по высоте — ниже него она перестаёт
       сжиматься и слегка вытягивается (это ровный серый прямоугольник,
       на нём растяжение в пару процентов незаметно). */
    .aia-who__img   { top: 71.8601%; width: 100%; height: max(28.1399%, 160px); }
    .aia-who__title { top: 75.6757%; right: 24px; width: auto; font-size: 18px; line-height: 22px; }
    .aia-who__desc  { top: 80.4452%; right: 24px; width: auto; font-size: 18px; line-height: 22px; }

    /* ---------- 3. МАРАФОН — ЭТО ---------- */
    .aia-about { margin-top: 80px; }
    /* Колонка резиновая; высоту карточек оставляем фиксированной — при
       сужении текст переносится на лишнюю строку, и пропорциональная высота
       ему бы, наоборот, места убавила. Плашки лидов тут можно не трогать:
       самый длинный лид (198.6px при 18px) влезает в строку и на 320. */
    .aia-about__grid { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
    .aia-card { height: 300px; }
    .aia-card__text { left: 24px; top: 24px; right: 24px; width: auto; font-size: 18px; line-height: 26px; }
    /* фото — единственная карточка-картинка, кадрируем вместо растягивания */
    .aia-card__photo img { object-fit: cover; }
    .aia-card__mark { top: 24px; height: 28px; }
    .aia-card--1 .aia-card__mark { left: 16px; width: 124px; }
    .aia-card--1 .aia-slash { right: 24.77px; top: 24px; }
    .aia-card--1 .aia-card__obj { left: 44.1773%; top: 168.84px; width: 52.8895%; height: auto; }
    .aia-card--1 { background: linear-gradient(185.785deg, #A5FC8E 5.2039%, #FFFFFF 94.796%); }
    .aia-card--2 .aia-card__mark { width: 158px; }
    .aia-card--2 .aia-dots { left: 24px; top: 268px; }
    .aia-card--2 .aia-card__obj { left: 40.5203%; top: 152.59px; width: 62.0407%; height: auto; }
    .aia-card--3 { background: linear-gradient(354.215deg, #A5FC8E 5.2039%, #FFFFFF 94.796%); }
    .aia-card--3 .aia-card__mark { width: 177px; }
    .aia-card--3 .aia-dots { left: 24px; top: 204px; }
    .aia-card--3 .aia-card__obj { left: 44.7093%; top: 159.21px; width: 57.5494%; height: auto; }
    .aia-card--4 .aia-card__mark { width: 131px; }
    .aia-card--4 .aia-card__text { width: auto; max-width: 232px; }
    .aia-card--4 .aia-bars { top: 184px; }
    .aia-card--4 .aia-card__obj { left: 41.0785%; top: 168px; width: 61.3953%; height: auto; }
    .aia-card--5 { border-radius: 16px; }
    .aia-card--5 .aia-card__mark { width: 212px; }
    .aia-card--5 .aia-slash { left: 24px; right: auto; top: auto; bottom: 24px; }
    .aia-card--5 .aia-card__obj { left: 37.5378%; top: 143.07px; width: 65.1076%; height: auto; }

    .aia-card--wide { gap: 8px; height: auto; }
    .aia-card__title { font-size: 18px; line-height: 22px; }
    .aia-card__note  { font-size: 18px; line-height: 26px; }

    /* ---------- 4. ПРОГРАММА ---------- */
    .aia-program { margin-top: 80px; }
    .aia-program__list { gap: 8px; margin-top: 24px; }
    .aia-level { gap: 16px; padding: 24px 16px; }
    .aia-level__head { gap: 8px; }
    .aia-level__img { width: 64px; height: 58px; }
    .aia-level__groups { gap: 16px; }
    .aia-level__group  { gap: 8px; }
    .aia-lesson { gap: 16px; }
    .aia-lesson__num,
    .aia-lesson__title,
    .aia-lesson__desc { font-size: 18px; line-height: 22px; }

    /* ---------- 5. ЧТО ПОЛУЧИШЬ ---------- */
    .aia-gains { margin-top: 80px; }
    /* Карточки резиновые: колонка не 344px, а 1fr, поэтому блок доживает
       до 320px ширины экрана (344 — это ровно ширина колонки макета, ниже
       неё фикс-значения вылезали за экран и обрезались .aia).
       Внутренности тоже без фикс-ширин: текст растянут left/right,
       3D-объект прижат к правому краю, плашка лида резиновая сама по себе. */
    .aia-gains__grid { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
    .aia-gain { height: 200px; }
    .aia-gain__text { left: 16px; top: 16px; right: 32px; width: auto !important; font-size: 18px; line-height: 22px; }
    .aia-gain__obj  { right: 0 !important; left: auto !important; top: 124px !important; bottom: auto; width: 120px !important; height: 120px !important; }
    .aia-gain__lead { padding: 0 .389em; margin-left: -.389em; }
    /* У этой карточки иллюстрация во всю ширину, поэтому высота не фикс,
       а пропорция макета — иначе при сжатии металл сплющило бы. */
    /* На мобильном у этой карточки своя фигура, а не уменьшенная десктопная:
       вырез слева идёт от нижнего края до середины (137.6 из 280), справа
       края ровные — ни выреза, ни ступеньки, а «радиатор» приходит из самой
       картинки металла, не из маски.
       Маска висит на псевдоэлементе, а не на карточке: в макете металл двумя
       каплями выходит левее контура (y 197–238 и 244–278), и маска на самой
       карточке срезала бы их вместе с фоном. Поэтому фон и форма — на ::before,
       картинка лежит поверх и не маскируется. border-radius снимаем: скругления
       уже заданы контуром, а рамка бокса обрезала бы те же капли. */
    .aia-gain--3 {
        height: auto;
        aspect-ratio: 344 / 280;
        border-radius: 0;
        background: none;
        -webkit-mask: none;
                mask: none;
    }
    .aia-gain--3::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--aia-white);
        -webkit-mask: url('img/ai-agents/gain-card-mob.svg') no-repeat 0 0 / 100% 100%;
                mask: url('img/ai-agents/gain-card-mob.svg') no-repeat 0 0 / 100% 100%;
    }
    /* тот же повёрнутый объект, мобильные пропорции (в макете 119.86×119.86) */
    .aia-gain--1 .aia-gain__obj { right: -10.31px !important; top: 105.36px !important;
        width: 119.86px !important; height: 119.86px !important; }
    .aia-gain--3 .aia-gain__text { right: 16px; }
    .aia-gain--5,
    .aia-gain--6 { grid-column: auto; width: 100%; height: 100px; border-radius: 16px; }
    .aia-gain--5 .aia-gain__text { right: 16px; }
    /* на мобильном макете «Сертификат» — на чёрной плашке, как и «Сообщество» */
    .aia-gain--6 .aia-gain__lead { background: var(--aia-ink); color: var(--aia-white); }
    .aia-gain--6 .aia-gain__text { right: 16px; }

    /* ---------- 6. ФИНАЛ ---------- */
    .aia-final { margin-top: 80px; }
    .aia-final__card { height: auto; aspect-ratio: 344 / 484; }
    .aia-final__img  { width: 100%; height: 100%; }
    .aia-final__text { left: 24px; top: 40px; right: 24px; width: auto; }
    .aia-final__title { font-size: 24px; line-height: 32px; }
    .aia-final__text .aia-btn { margin-top: 24px; }
}

/* ============================================================
   УЗКИЕ ЭКРАНЫ (320–359) — не целевые разрешения
   Блоки с картинкой-подложкой сжимаются вместе с шириной, а текст поверх
   них — нет: он переносится на лишние строки и наезжает на 3D-объект,
   который в этих картинках лежит внизу. Здесь задаём таким блокам минимум
   по высоте — ровно такой, чтобы текст успевал закончиться над объектом.
   Расплата — картинка тянется по вертикали (у марафона на 320 это ~44%),
   но на целевых ширинах правило не срабатывает вовсе.
   ============================================================ */
@media (max-width: 359px) {
    .aia-gain--3     { min-height: 300px; }
    .aia-final__card { min-height: 560px; }
}
/* «Мозг» в марафоне занимает нижние 38% картинки, поэтому текст наезжает
   на него чуть дольше остальных — до 365px включительно. */
@media (max-width: 365px) {
    .aia-marathon__col { min-height: 760px; }   /* картинка — 71.86% от колонки */
}

/* ============================================================
   Модалка анкеты — стили перенесены из style-new.css
   Базовые стили формы приходят из b-order-form.css и style-form.css
   (подключены рядом с разметкой в HTML), здесь — только надстройка
   под палитру страницы.
   ============================================================ */
.b-order-subtitle.green { display: flex; align-items: center; gap: 8px; }
.b-order-subtitle.green svg { height: 24px; width: 24px; min-width: 24px; }
.b-order-subtitle.green span { font-size: 16px; line-height: 22px; color: #209F6D; font-weight: 400; }
.b-order-title { margin-bottom: 25px; }
.b-reg-field.first { flex: 0 0 60%; }
.b-reg-field.second { flex: 0 0 36.5%; }
.input-subtext { font-weight: 400; font-size: 16px; line-height: 24px; color: #B2B4B2; margin: 24px 0 8px; }
.🦄 .b-order-politic label { max-width: none; margin-left: 0; margin-top: 16px; }
.🦄 .b-order-politic .m-form-policy__text { font-size: 16px; max-width: 610px; color: var(--aia-ink); }
.b-order-button button { margin-left: unset; }
.buttons { display: flex; justify-content: flex-start; gap: 32px; }
.🦄 .b-order-button button { padding: 12px 31px; max-width: unset; border-radius: 99px; }
.🦄 .b-order-button--white button { background-color: var(--aia-white); color: var(--aia-ink); border: 1px solid var(--aia-ink); padding: 12px 24px; }
.🦄 .b-order-button--white button:hover { background-color: rgb(220, 220, 220) !important; }
.🦄 .b-order-button { margin-top: 48px; }
.b-reg-field__input.telephone span { width: 90%; }
.b-reg-field__input.telephone.not-empty span { width: unset; }
.input-subtext.--bday { display: flex; justify-content: flex-start; margin-top: 0; }
.b-order-form-group-inputs.--first-row { align-items: flex-end; }
.b-reg-field__select-panel.error span { color: var(--color50); }
.🦄 .m-send-image { max-width: unset; }
.🦄 .m-send-title { max-width: 500px; margin: 32px auto 16px; }
.🦄 .b-order-forms-result .b-order-button { margin-top: 32px; justify-content: center; }
.🦄 .b-order-forms-result .b-order-button button { gap: 8px; }
.🦄 .b-order-forms-result p { font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; }

/* Кнопка «вверх» в CSS сайта — position: fixed без z-index, т.е. лежит на
   нулевом уровне корневого контекста наложения. Блоки страницы (картинки,
   кнопки, декоративные линии) идут с z-index 1–3 и перекрывали её верхний
   край. Специфичность (0,2,0) повторяет селектор сайта, а этот файл
   подключён после него — поэтому правило перебивает исходное. */
.🦄 .f-arrow-top { z-index: 10; }

/* На мобильных базовый b-order-form.css разворачивает строку полей в
   колонку. В колонке flex-basis первой строки (ФИО / дата рождения)
   начинает задавать высоту, а align-items: flex-end — жать поля по
   контенту вместо растягивания. Поэтому здесь оба правила снимаем:
   поля становятся на всю ширину, как остальные. */
@media screen and (max-width: 743px) {
    .b-order-form-group-inputs.--first-row { align-items: unset; }
    .b-reg-field.first,
    .b-reg-field.second { flex: 0 0 auto; width: 100%; }
}