/* ==========================================================================
   Страница «Мобильное приложение Promin»
   Макет: 1920 / 1440 / 768 / 360.
   Десктоп — в vw (px / 1920 * 100), ниже 1660 — фиксированные пиксели,
   как в остальной вёрстке темы.
   ========================================================================== */

.promin-app-page {
    --app-yellow: #FBC707;
    --app-black:  #000000;
    --app-grey:   #808080;
    --app-line:   #E2E2E2;
    --app-bg:     #F5F5F5;

    overflow: hidden;
}

.promin-app-page section {
    box-sizing: border-box;
}

/* ── кнопки сторов ───────────────────────────────────────────────────────── */

.promin-app-page .app-store-buttons {
    display: flex;
    align-items: center;
    gap: 0.729vw;                       /* 14px */
}

.promin-app-page .app-store-buttons__item {
    display: block;
    width: 15.469vw;                    /* 297px */
    height: 5.313vw;                    /* 102px */
    flex: 0 0 auto;
    transition: transform .2s ease;
}

.promin-app-page .app-store-buttons__item img {
    display: block;
    width: 100%;
    height: auto;
}

.promin-app-page .app-store-buttons__item:hover {
    transform: translateY(-2px);
}

/* ── 1. первый экран ─────────────────────────────────────────────────────── */
/* Координаты из макета (1920): блок 1800×860 с отступом 60 по краям,
   крошки 140/80, текст 140/192 шириной 861, визуал 913/6 размером 837×921 —
   он выше блока и подрезается снизу. */

.promin-app-page .app-hero {
    padding: 0 3.125vw;                 /* 60px */
}

.promin-app-page .app-hero__inner {
    position: relative;
    height: 44.792vw;                   /* 860px */
    border-radius: 1.667vw;             /* 32px */
    background: var(--app-black);
    overflow: hidden;
}

.promin-app-page .app-hero__text {
    position: absolute;
    z-index: 2;
    /* текст выровнен по левому краю остальных блоков страницы (260px от края
       экрана), поэтому отступ внутри чёрного блока — 200px, а не 140 */
    left: 10.417vw;                     /* 200px */
    top: 4.167vw;                       /* 80px */
    width: 44.844vw;                    /* 861px */
}

/* Хлебные крошки — оформление один в один как на странице «Аренда автомобилей
   для такси»: те же кегль, начертания, прозрачность и разделитель темы.
   Своим остаётся только расстояние до заголовка (по макету) — тема даёт
   крошкам min-height 50px, и от него заголовок съезжал бы на 28px. */
.promin-app-page .app-hero__text .bread_crumbs,
.promin-app-page #BreadcrumbList {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: auto;
    margin: 0 0 4.688vw;                /* до заголовка: 192 − 80 − 22 = 90px */
    padding: 0;
    list-style: none;
    min-height: 0;
    white-space: nowrap;
    overflow: visible;
    color: #FFFFFF;
}

.promin-app-page .app-hero__text .bread_crumbs li {
    display: flex;
    align-items: center;
    gap: 0;
}

.promin-app-page .app-hero__text .bread_crumbs a,
.promin-app-page .app-hero__text .bread_crumbs a span,
.promin-app-page .app-hero__text .bread_crumbs li > span {
    font-size: .8883vw;                 /* 17px — как в теме */
    font-weight: 300;
    line-height: 1.139vw;
    color: #FFFFFF;
    text-decoration: none;
}

.promin-app-page .app-hero__text .bread_crumbs a { opacity: .5; }

.promin-app-page .app-hero__text .bread_crumbs li:last-child a,
.promin-app-page .app-hero__text .bread_crumbs li:last-child > span {
    font-weight: 500;
    opacity: 1;
}

.promin-app-page .app-hero__text .bread_crumbs svg,
.promin-app-page #BreadcrumbList svg {
    flex: 0 0 auto;
    width: .833vw;                      /* 16px */
    height: .833vw;
    min-width: 8px;
    min-height: 8px;
    margin: 0 1.042vw;                  /* 20px с каждой стороны */
    opacity: .5;
    color: #FFFFFF;
}

.promin-app-page .app-hero__text .bread_crumbs svg path,
.promin-app-page #BreadcrumbList svg path {
    stroke: #FFFFFF;
    stroke-width: 1;
}

.promin-app-page .app-hero__title {
    margin: 0 0 2.083vw;                /* 40px */
    font-weight: 600;
    font-size: 3.75vw;                  /* 72px */
    line-height: 1;
    letter-spacing: -0.15vw;            /* -2.88px */
    color: #FFFFFF;
}

.promin-app-page .app-hero__desc {
    max-width: 43.281vw;                /* 831px */
    margin: 0;
    font-weight: 500;
    font-size: 1.25vw;                  /* 24px */
    line-height: 1.458;                 /* 35px — строка как в макете */
    color: #FFFFFF;
}

.promin-app-page .app-hero__desc p {
    margin: 0;
}

.promin-app-page .app-hero__note {
    max-width: 43.281vw;
    /* в макете подпись отделена от абзаца неполной пустой строкой */
    margin: 0.469vw 0 0;                /* 9px */
    font-weight: 500;
    font-size: 1.25vw;
    line-height: 1.458;
    color: var(--app-grey);
}

.promin-app-page .app-store-buttons--hero {
    margin-top: 3.125vw;                /* 60px */
}

.promin-app-page .app-hero__weblink {
    display: inline-block;
    margin-top: 2.083vw;                /* 40px */
    font-weight: 500;
    font-size: 0.833vw;                 /* 16px */
    line-height: 1.4;
    color: var(--app-grey);
    text-decoration: underline;
}

.promin-app-page .app-hero__weblink:hover {
    color: #FFFFFF;
}

/* позиция подобрана сопоставлением с макетом: композиция 827×854 в точке 973/4 */
.promin-app-page .app-hero__visual {
    position: absolute;
    z-index: 1;
    left: 50.677vw;                     /* 973px */
    top: 0.208vw;                       /* 4px */
    width: 43.073vw;                    /* 827px */
}

.promin-app-page .app-hero__visual img {
    display: block;
    width: 100%;
    height: auto;
}

/* Кнопка «Открыть приложение» есть только в мобильном макете, поэтому на
   широких экранах скрыта. Форма и поворот круга — от modern-btn-block темы. */
.promin-app-page .app-action {
    display: none;
}

/* ── 2. возможности ──────────────────────────────────────────────────────── */
/* Контейнер 1400 по центру. Заголовок 916×128, подзаголовок на y=160,
   карточки 680×860 с зазором 40 на y=254, сноска на y=1141. */

.promin-app-page .app-features {
    width: 72.917vw;                    /* 1400px */
    margin: 12.031vw auto 0;            /* 231px — столько же между всеми блоками */
}

.promin-app-page .app-features__title {
    margin: 0;
    font-weight: 400;                   /* выделенные слова — в <strong> */
    font-size: 3.333vw;                 /* 64px */
    line-height: 1;
    letter-spacing: -0.067vw;           /* -1.28px */
    color: var(--app-black);
    max-width: 47.708vw;                /* 916px — по ширине текста в макете */
}

.promin-app-page .app-features__title strong {
    font-weight: 600;
}

.promin-app-page .app-features__desc {
    margin: 1.667vw 0 0;                /* 160 − 128 = 32px */
    font-weight: 500;
    font-size: 1.25vw;                  /* 24px */
    line-height: 1.4;
    color: var(--app-black);
}

.promin-app-page .app-features__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.083vw;                       /* 40px */
    margin-top: 3.125vw;                /* 254 − (160 + 34) = 60px */
}

.promin-app-page .app-card {
    display: flex;
    flex-direction: column;
    /* в макете карточка ровно 860px: иллюстрация внизу подрезается по краю,
       а не растягивает блок под свой размер */
    height: 44.792vw;                   /* 860px */
    padding: 3.802vw 3.802vw 0;         /* 73px */
    border: 1px solid var(--app-line);
    border-radius: 1.667vw;             /* 32px */
    background: #FFFFFF;
    overflow: hidden;
}

.promin-app-page .app-card__title {
    margin: 0 0 1.563vw;                /* 30px */
    font-weight: 600;
    font-size: 2.5vw;                   /* 48px */
    line-height: 1.2;
    letter-spacing: -0.1vw;             /* -1.92px */
    color: var(--app-black);
}

.promin-app-page .app-card__list {
    display: flex;
    flex-direction: column;
    gap: 1.563vw;                       /* 30px */
    margin: 0;
    padding: 0;
    list-style: none;
}

.promin-app-page .app-card__item {
    display: flex;
    align-items: center;
    gap: 1.094vw;                       /* 21px */
}

.promin-app-page .app-card__icon {
    flex: 0 0 auto;
    width: 2.292vw;                     /* 44px */
    height: auto;
}

.promin-app-page .app-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.521vw;                       /* 10px */
    max-width: 24.479vw;                /* 470px */
}

.promin-app-page .app-card__head {
    margin: 0;
    font-weight: 700;
    font-size: 0.833vw;                 /* 16px */
    line-height: 1.375;                 /* 22px — строка как в макете */
    color: var(--app-black);
}

.promin-app-page .app-card__text {
    margin: 0;                          /* 10px между строками задаёт gap у __body */
    font-weight: 400;
    font-size: 0.833vw;
    line-height: 1.375;                 /* 22px */
    color: var(--app-black);
}

/* иллюстрация прижата к низу карточки и вытянута на всю её ширину */
/* картинка обёрнута в <picture> — именно он flex-элемент карточки, поэтому
   прижимать к низу нужно его: margin: auto на самом <img> ничего не давал,
   и на ширинах 991–1279 под иллюстрацией оставалась полоса до 47px */
.promin-app-page .app-card picture {
    display: block;
    margin-top: auto;
}

.promin-app-page .app-card__image {
    display: block;
    width: calc(100% + 7.604vw);        /* компенсируем боковые padding 73px */
    margin: 0 -3.802vw 0;
    height: auto;
}

.promin-app-page .app-features__note {
    display: flex;
    align-items: center;                /* значок по центру по вертикали */
    gap: 1.406vw;                       /* 27px до текста */
    margin: 1.406vw 0 0;                /* 1141 − 1114 = 27px от карточек */
    padding: 1.354vw 1.823vw;           /* 26px / 35px */
    border-radius: 1.042vw;             /* 20px */
    background: var(--app-bg);
    font-weight: 400;
    font-size: 0.833vw;                 /* 16px */
    line-height: 1.375;
    color: var(--app-grey);
}

.promin-app-page .app-features__note-icon {
    flex: 0 0 auto;
    width: 1.693vw;                     /* 32.5px */
    height: 1.693vw;
    background: url(../assets/images/app/icons/note-info.svg) no-repeat center / contain;
}

/* ── 3. жёлтый блок со ссылкой на приложение ─────────────────────────────── */

.promin-app-page .app-download {
    position: relative;
    width: 93.75vw;                     /* 1800px */
    height: 33.854vw;                   /* 650px */
    margin: 12.031vw auto 0;            /* 2556 − 2326 = 231px */
    border-radius: 1.667vw;
    background: var(--app-yellow);
    overflow: hidden;
}

.promin-app-page .app-download__text {
    position: absolute;
    z-index: 2;                         /* у картинки телефона жёлтый фон карточки
                                           запечён в файл, и она срезала последнее
                                           слово строки — текст кладём поверх */
    left: 10.469vw;                     /* 201px */
    top: 6.615vw;                       /* 127px */
    width: 43.281vw;                    /* 831px */
}

.promin-app-page .app-download__title {
    margin: 0;
    font-weight: 400;
    font-size: 3.333vw;                 /* 64px */
    line-height: 1.2;
    letter-spacing: -0.133vw;           /* -2.56px */
    color: var(--app-black);
}

.promin-app-page .app-download__title strong {
    font-weight: 600;
}

.promin-app-page .app-download__desc {
    margin: 2.083vw 0 0;                /* 194 − 154 = 40px */
    font-weight: 500;
    font-size: 1.25vw;                  /* 24px */
    line-height: 1.4;
    color: var(--app-black);
}

/* в этом блоке кнопки меньше, чем на первом экране: 291×94 против 297×102 */
.promin-app-page .app-store-buttons--download {
    margin-top: 2.083vw;                /* 302 − 194 − 68 = 40px */
    gap: 0.729vw;                       /* 14px */
}

.promin-app-page .app-store-buttons--download .app-store-buttons__item {
    width: 15.156vw;                    /* 291px */
    height: 4.896vw;                    /* 94px */
}

.promin-app-page .app-download__phone {
    position: absolute;
    z-index: 1;
    left: 50vw;                         /* 960px — подобрано сопоставлением с макетом */
    top: 0;
    width: 36.458vw;                    /* 700px */
}

.promin-app-page .app-download__phone img {
    display: block;
    width: 100%;
    height: auto;
}

.promin-app-page .app-download__qr-note {
    margin: 0.833vw 0 0;
    font-size: 0.729vw;
    line-height: 1.3;
    color: var(--app-black);
}

/* ── 4. что видно в приложении ───────────────────────────────────────────── */

.promin-app-page .app-screens {
    display: flex;
    align-items: flex-start;
    gap: 4.219vw;                       /* 81px */
    width: 72.917vw;                    /* 1400px */
    margin: 12.031vw auto 0;
}

.promin-app-page .app-screens__media {
    position: relative;
    flex: 0 0 auto;
    width: 18.698vw;                    /* 359px */
    margin-top: 0.729vw;                /* 14px */
    min-height: 38.906vw;               /* 747px */
}

/* лента нужна только на телефоне; выше она «растворяется» */
.promin-app-page .app-screens__track {
    display: contents;
}

.promin-app-page .app-screens__shot {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.promin-app-page .app-screens__shot.is-active {
    opacity: 1;
    position: relative;
    pointer-events: auto;
}

.promin-app-page .app-screens__side {
    flex: 1 1 auto;
    min-width: 0;
}

.promin-app-page .app-screens__title {
    margin: 0 0 4.167vw;                /* 144 − 64 = 80px */
    font-weight: 400;
    font-size: 3.333vw;                 /* 64px */
    line-height: 1;
    letter-spacing: -0.067vw;
    color: var(--app-black);
}

.promin-app-page .app-screens__title strong {
    font-weight: 600;
}

.promin-app-page .app-screens__list {
    display: flex;
    flex-direction: column;
    gap: 0.729vw;                       /* 14px */
}

.promin-app-page .app-screens__item {
    border-radius: 1.667vw;             /* 32px */
    background: var(--app-bg);
    transition: background .25s ease;
}

.promin-app-page .app-screens__item.is-open {
    background: var(--app-yellow);
}

.promin-app-page .app-screens__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.042vw;
    width: 100%;
    padding: 2.292vw 1.875vw;           /* 44px / 36px */
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--app-black);
}

.promin-app-page .app-screens__head-text {
    max-width: 43.281vw;                /* 831px — на этой ширине заголовок ложится в две строки */
    font-weight: 600;
    font-size: 2.5vw;                   /* 48px */
    line-height: 1.2;
    letter-spacing: -0.1vw;             /* -1.92px */
}

/* кружок со стрелкой: у раскрытого пункта белый, у остальных жёлтый */
.promin-app-page .app-screens__toggle {
    position: relative;
    flex: 0 0 auto;
    width: 3.125vw;                     /* 60px */
    height: 3.125vw;
    border-radius: 50%;
    /* стрелка — та же, что в макете: с хвостиком, а не «галочка» */
    background: var(--app-yellow) url(../assets/images/app/icons/arrow-down.svg) no-repeat center / 1.25vw 1.25vw;
    transition: background-color .25s ease, transform .25s ease;
}

/* в макете стрелка и у раскрытого пункта смотрит вниз — меняется только фон */
.promin-app-page .app-screens__item.is-open .app-screens__toggle {
    background-color: #FFFFFF;
    transform: rotate(180deg);          /* у раскрытого пункта стрелка смотрит вверх, как в FAQ */
}

/* у раскрытого пункта между заголовком и описанием ровно 32px: нижний отступ
   заголовка сложился бы с верхним отступом текста и дал лишние 44px */
.promin-app-page .app-screens__item.is-open .app-screens__head {
    padding-bottom: 0;
    transition: padding-bottom .3s ease;
}

.promin-app-page .app-screens__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}

.promin-app-page .app-screens__item.is-open .app-screens__body {
    grid-template-rows: 1fr;
}

.promin-app-page .app-screens__body > p {
    overflow: hidden;
    margin: 0;
    padding: 0 1.875vw;                 /* 36px */
    max-width: 46.198vw;                /* 887px */
    font-weight: 500;
    font-size: 1.25vw;                  /* 24px */
    line-height: 1.4;
    color: var(--app-black);
}

/* раскрытый пункт: 44 сверху + заголовок + 32 + описание + 44 снизу = 244px */
.promin-app-page .app-screens__item.is-open .app-screens__body > p {
    padding-top: 1.667vw;               /* 32px */
    padding-bottom: 2.292vw;            /* 44px */
}

/* ── 5. онбординг ────────────────────────────────────────────────────────── */
/* Разметка совпадает со страницами услуг: тема сама подсвечивает пройденные
   шаги при скролле (register-driver-taxi-circle-activ) и рисует линию между
   кругами. Здесь — только размеры и типографика по макету. */

/* карточка 1400×1212: внутренний отступ 82px по бокам, 111px сверху и снизу */
.promin-app-page .app-steps {
    --step-gap: 4.219vw;                /* 81px между шагами */
    width: 72.917vw;                    /* 1400px */
    margin: 12.031vw auto 0;
    padding: 5.781vw 4.271vw;           /* 111px / 82px */
    border-radius: 1.667vw;             /* 32px */
    background: var(--app-bg);
}

/* «Как начать» — обычным начертанием, «пользоваться Promin» — полужирным */
.promin-app-page .app-steps .app-steps__title {
    width: auto;
    margin: 0 0 4.167vw;                /* 80px до первого шага */
    font-weight: 400;
    font-size: 3.333vw;                 /* 64px */
    line-height: 1;
    letter-spacing: -0.067vw;           /* -1.28px */
    text-align: left;
    color: var(--app-black);
}

.promin-app-page .app-steps .app-steps__title strong {
    font-weight: 600;
}

/* Тема центрирует блок шагов; в этом макете он прижат влево. */
.promin-app-page .app-steps .register-driver-taxi-wrapper {
    align-items: flex-start;
    width: 100%;
    padding: 0;
}

.promin-app-page .app-steps .register-driver-taxi-block {
    width: 100%;
    margin: 0;
}

/* Линия между кругами — это border-left карточки, поэтому её левый край
   проходит по центру круга: 80px от края блока, текст ещё через 111px. */
.promin-app-page .app-steps.section-register-driver-taxi .register-driver-taxi-wrapper .register-driver-taxi-block .register-driver-taxi-cart {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* ширину не фиксируем: карточка сдвинута margin-left, и width:100% вынесло
       бы её текст за правый отступ блока */
    width: auto;
    /* border-box: в min-height входит и отступ до следующего шага */
    min-height: calc(8.333vw + var(--step-gap));   /* круг с ореолом — 160px */
    margin: 0 0 0 4.167vw;              /* центр кругов на 80px */
    padding: 0 0 var(--step-gap) 5.677vw;   /* 109px от линии до текста */
    /* В макете линия между кругами есть всегда, поэтому рисуем её сами, а не
       ждём класса, который тема навешивает при скролле. Круги её перекрывают,
       так что видны только промежутки — как в макете. */
    border-left: 2px solid var(--app-yellow);
}

/* цепочка та же длины, иначе min-height выше перебивает */
.promin-app-page .app-steps.section-register-driver-taxi .register-driver-taxi-wrapper .register-driver-taxi-block .register-driver-taxi-cart:last-child {
    min-height: 6.25vw;                 /* у последнего круга нет ореола */
    padding-bottom: 0;
    border-left-color: transparent;     /* ниже последнего круга линии нет */
}

/* у первого шага линия идёт от центра круга вниз, иначе торчит над ним */
.promin-app-page .app-steps.section-register-driver-taxi .register-driver-taxi-wrapper .register-driver-taxi-block .register-driver-taxi-cart:first-child {
    border-left-color: transparent;
}

.promin-app-page .app-steps .register-driver-taxi-cart:first-child::before {
    content: '';
    position: absolute;
    left: -2px;
    top: calc((100% - var(--step-gap)) / 2);
    bottom: 0;
    width: 2px;
    background: var(--app-yellow);
}

/* последний отрезок доводим ровно до центра круга — дальше круг её закрывает */
.promin-app-page .app-steps .register-driver-taxi-cart:last-child::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 0;
    width: 2px;
    height: 50%;
    background: var(--app-yellow);
}

/* круг выступает влево на половину ширины, чтобы сесть центром на линию,
   и центрируется по высоте текста — приписка снизу в расчёт не идёт */
.promin-app-page .app-steps.section-register-driver-taxi .register-driver-taxi-wrapper .register-driver-taxi-block .register-driver-taxi-cart .register-driver-taxi-circle {
    left: -3.125vw;                     /* -60px */
    top: calc((100% - var(--step-gap)) / 2);
    transform: translateY(-50%);
    width: 6.25vw;                      /* 120px */
    height: 6.25vw;
    font-size: 1.667vw;                 /* 32px */
    font-weight: 600;
    letter-spacing: -0.067vw;
}

/* последний шаг в макете — контур без заливки и без ореола, поэтому и круг
   центрируется по всей высоте: отступа до следующего шага у него нет */
.promin-app-page .app-steps.section-register-driver-taxi .register-driver-taxi-wrapper .register-driver-taxi-block .register-driver-taxi-cart:last-child .register-driver-taxi-circle {
    top: 50%;
}

/* до прокрутки — контур без заливки; когда шаг пройден, тема заливает круг и
   добавляет ауру, поэтому свои цвета здесь не навязываем */
.promin-app-page .app-steps.section-register-driver-taxi .register-driver-taxi-wrapper .register-driver-taxi-block .register-driver-taxi-cart:last-child .register-driver-taxi-circle:not(.register-driver-taxi-circle-finish) {
    border: 2px solid var(--app-yellow);
    background-color: #fff;
    box-shadow: none;
}

.promin-app-page .app-steps.section-register-driver-taxi .register-driver-taxi-wrapper .register-driver-taxi-block .register-driver-taxi-cart:last-child .register-driver-taxi-circle-finish {
    border: 2px solid transparent;      /* у темы здесь рамка в 20px — круг бы съёжился */
}

.promin-app-page .app-steps .register-taxi-text-c {
    margin: 0 0 1.563vw;                /* 30px */
    font-weight: 600;
    font-size: 2.5vw;                   /* 48px */
    line-height: 1.2;
    letter-spacing: -0.1vw;             /* -1.92px */
    color: var(--app-black);
}

.promin-app-page .app-steps .register-taxi-text-d {
    margin: 0;
    max-width: 54.219vw;                /* 1041px */
    font-weight: 500;
    font-size: 1.25vw;                  /* 24px */
    line-height: 1.4;
    color: var(--app-black);
}

.promin-app-page .app-steps__note {
    width: auto;
    margin: 4.167vw 0 0;                /* 80px */
    font-weight: 600;
    font-size: 1.25vw;                  /* 24px */
    line-height: 1.4;
    color: var(--app-black);
}

.promin-app-page .app-steps__note a {
    color: var(--app-black);
    text-decoration: underline;
}

/* ── 6. вопросы ──────────────────────────────────────────────────────────── */

/* тема добавляет списку вопросов нижний отступ (200px на 1920, 95px на телефоне),
   из-за чего разрыв до следующего блока был заметно больше остальных */
.promin-app-page .app-faq .question-client-wrapper {
    margin-bottom: 0;
}

.promin-app-page .app-faq {
    margin-top: 12.031vw;
}

/* в макете между заголовком и первым вопросом 80px, тема даёт 60 */
.promin-app-page .app-faq .big-text-title {
    margin-bottom: 4.167vw;             /* 80px */
    font-weight: 400;
    font-size: 3.333vw;                 /* 64px */
    line-height: 1;
    letter-spacing: -0.067vw;
}

.promin-app-page .app-faq .big-text-title strong {
    font-weight: 600;
}

/* вопрос и ответ в макете набраны полужирным */
.promin-app-page .app-faq.section-question-client .question-client-wrapper .question-client-cart .question-client-title h3 {
    font-weight: 600;
    letter-spacing: -0.05vw;            /* -0.96px */
}

.promin-app-page .app-faq .question-client-description {
    font-weight: 600;
    font-size: 0.833vw;                 /* 16px */
    letter-spacing: -0.033vw;           /* -0.64px */
    line-height: 1.2;
}

/* ── 7. финальный блок ───────────────────────────────────────────────────── */

.promin-app-page .app-cta {
    display: flex;
    gap: 0.521vw;                       /* 10px */
    width: 93.75vw;                     /* 1800px */
    margin: 12.031vw auto 6.25vw;
}

.promin-app-page .app-cta__text {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 59.115vw;                    /* 1135px */
    min-height: 39.583vw;               /* 760px */
    /* правого отступа нет: текстовый блок в макете 936px и доходит до края
       жёлтой карточки, иначе описание переносится раньше времени */
    padding: 6.302vw 0 5.365vw 10.365vw;   /* 121 / 0 / 103 / 199 */
    border-radius: 1.667vw;
    background: var(--app-yellow);
}

.promin-app-page .app-cta__title {
    margin: 0;
    max-width: 51.667vw;                /* 992px */
    font-weight: 600;
    font-size: 4.167vw;                 /* 80px */
    line-height: 1;
    letter-spacing: -0.083vw;           /* -1.6px */
    color: var(--app-black);
}

.promin-app-page .app-cta__desc {
    max-width: 48.75vw;                 /* 936px — как текстовый фрейм в макете */
    margin: 2.083vw 0 0;                /* 40px */
    font-weight: 500;
    font-size: 1.25vw;                  /* 24px */
    line-height: 1.2;
    letter-spacing: -0.025vw;           /* -0.48px */
    color: var(--app-black);
}

/* кнопки сторов в макете 297×102 с промежутком 14px */
.promin-app-page .app-store-buttons--cta {
    margin-top: 2.083vw;                /* 40px */
    gap: 0.729vw;                       /* 14px */
}

.promin-app-page .app-store-buttons--cta .app-store-buttons__item {
    width: 15.469vw;                    /* 297px */
    height: 5.313vw;                    /* 102px */
}

.promin-app-page .app-cta__weblink {
    display: inline-block;
    margin-top: 2.083vw;                /* 40px */
    font-weight: 500;
    font-size: 0.833vw;                 /* 16px */
    color: var(--app-black);
    text-decoration: underline;
}

.promin-app-page .app-cta__card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34.115vw;                    /* 655px */
    min-height: 39.583vw;               /* 760px */
    border-radius: 1.667vw;
    background: var(--app-black);
    overflow: hidden;
}

.promin-app-page .app-cta__card img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── ниже 1660: фиксированные размеры ───────────────────────────────────── */

/* ── ниже 1660: размеры фиксируем в px по макету 1440 ───────────────────── */

@media (max-width: 1660px) {
    /* кнопки сторов: в каждом блоке макета свой размер */
    .promin-app-page .app-store-buttons { gap: 14px; }
    .promin-app-page .app-store-buttons__item { width: 297px; height: 102px; }

    /* 1. первый экран — блок 1370×700, текст 785px */
    .promin-app-page .app-hero { padding: 0 35px; }
    .promin-app-page .app-hero__inner { height: 700px; border-radius: 24px; }
    .promin-app-page .app-hero__text { left: 60px; top: 40px; width: 785px; }
    .promin-app-page .app-hero__text .bread_crumbs,
    .promin-app-page #BreadcrumbList { margin-bottom: 27px; }
    .promin-app-page .app-hero__text .bread_crumbs a,
    .promin-app-page .app-hero__text .bread_crumbs a span,
    .promin-app-page .app-hero__text .bread_crumbs li > span { font-size: 16px; font-weight: 400; line-height: 21.86px; }
    .promin-app-page .app-hero__text .bread_crumbs li:last-child a,
    .promin-app-page .app-hero__text .bread_crumbs li:last-child > span { font-weight: 500; }
    .promin-app-page .app-hero__text .bread_crumbs svg,
    .promin-app-page #BreadcrumbList svg { width: 16px; height: 16px; }
    .promin-app-page .app-hero__title { max-width: 766px; margin-bottom: 28px; font-size: 64px; letter-spacing: -2.56px; }
    .promin-app-page .app-hero__desc,
    .promin-app-page .app-hero__note { max-width: 766px; font-size: 20px; line-height: 1.45; }
    .promin-app-page .app-hero__note { margin-top: 9px; }
    .promin-app-page .app-store-buttons--hero { margin-top: 28px; }
    .promin-app-page .app-hero__weblink { margin-top: 28px; font-size: 16px; }
    .promin-app-page .app-hero__visual { left: auto; right: 0; top: 0; width: 630px; margin-right: 0; }

    /* 2. карточки — контейнер 1250, карточки 607×768 */
    .promin-app-page .app-features { width: 100%; max-width: 1250px; padding: 0; margin-top: 140px; }
    .promin-app-page .app-features__title { max-width: 802px; font-size: 56px; line-height: 1; letter-spacing: -2.24px; }
    .promin-app-page .app-features__desc { margin-top: 31px; font-size: 24px; }
    .promin-app-page .app-features__grid { gap: 36px; margin-top: 47px; }
    .promin-app-page .app-card { height: 768px; min-height: 0; padding: 65px 42px 0; border-radius: 24px; }
    .promin-app-page .app-card__title { margin-bottom: 27px; font-size: 44px; line-height: 1.2; letter-spacing: -1.76px; }
    .promin-app-page .app-card__list { gap: 27px; }
    .promin-app-page .app-card__item { gap: 14px; }
    .promin-app-page .app-card__icon { width: 44px; }
    .promin-app-page .app-card__body { gap: 9px; max-width: none; }
    .promin-app-page .app-card__head,
    .promin-app-page .app-card__text { font-size: 16px; line-height: 1.375; }
    .promin-app-page .app-card__image { width: calc(100% + 84px); margin: auto -42px 0; }
    .promin-app-page .app-features__note { margin-top: 32px; padding: 26px 30px; border-radius: 16px; font-size: 16px; }

    /* 3. скачать — блок 1370×495 на макете 1440; размеры тянутся по ширине окна,
       иначе на 1280 текст упирается в телефон, а телефон не заполняет карточку */
    .promin-app-page .app-download { width: calc(100% - 4.861vw); height: 34.375vw; min-height: 0; margin: 140px auto 0; border-radius: 1.667vw; }
    .promin-app-page .app-download__text { position: absolute; left: 8.194vw; top: 4.375vw; width: 43.889vw; max-width: none; padding: 0; }
    .promin-app-page .app-download__title { font-size: 3.333vw; line-height: 1.4; letter-spacing: -0.133vw; }
    .promin-app-page .app-download__desc { margin-top: 2.083vw; font-size: 1.667vw; line-height: 1.4; }
    .promin-app-page .app-store-buttons--download { margin-top: 2.153vw; gap: 0.764vw; }
    .promin-app-page .app-store-buttons--download .app-store-buttons__item { width: 15.347vw; height: 5vw; }
    .promin-app-page .app-download__phone { left: auto; right: 7.5vw; top: 0; width: 36.944vw; }

    /* 4. что видно в приложении — телефон 320, правая часть 858 */
    .promin-app-page .app-screens { width: 100%; max-width: 1250px; padding: 0; gap: 72px; margin-top: 140px; }
    .promin-app-page .app-screens__media { width: 320px; min-height: 0; margin-top: 13px; }
    .promin-app-page .app-screens__title { margin-bottom: 71px; font-size: 48px; line-height: 1.2; letter-spacing: -1.92px; }
    .promin-app-page .app-screens__list { gap: 13px; }
    .promin-app-page .app-screens__head { padding: 38px 32px; }
    .promin-app-page .app-screens__head-text { max-width: none; font-size: 40px; letter-spacing: -1.6px; }
    .promin-app-page .app-screens__toggle { width: 52px; height: 52px; background-size: 21px 21px; }
    .promin-app-page .app-screens__body > p { max-width: none; padding: 0 32px; font-size: 20px; }
    .promin-app-page .app-screens__item.is-open .app-screens__body > p { padding-top: 27px; padding-bottom: 38px; }

    /* 5. онбординг — контейнер 1250, внутренние поля 73 */
    .promin-app-page .app-steps { --step-gap: 72px; width: 100%; max-width: 1250px; margin: 140px auto 0; padding: 117px 73px; border-radius: 24px; }
    .promin-app-page .app-steps .app-steps__title { margin-bottom: 71px; font-size: 56px; line-height: 1; letter-spacing: -1.12px; }
    .promin-app-page .app-steps .app-steps__title br { display: none; }   /* в макете 1440 заголовок в одну строку */
    .promin-app-page .app-steps.section-register-driver-taxi .register-driver-taxi-wrapper .register-driver-taxi-block .register-driver-taxi-cart { min-height: calc(143px + var(--step-gap)); margin-left: 71px; padding: 0 0 var(--step-gap) 98px; }
    .promin-app-page .app-steps.section-register-driver-taxi .register-driver-taxi-wrapper .register-driver-taxi-block .register-driver-taxi-cart:last-child { min-height: 110px; }
    .promin-app-page .app-steps.section-register-driver-taxi .register-driver-taxi-wrapper .register-driver-taxi-block .register-driver-taxi-cart .register-driver-taxi-circle { left: -55px; width: 110px; height: 110px; font-size: 30px; }
    .promin-app-page .app-steps .register-taxi-text-c { margin-bottom: 27px; font-size: 44px; letter-spacing: -1.76px; }
    .promin-app-page .app-steps .register-taxi-text-d { max-width: 929px; font-size: 24px; }
    .promin-app-page .app-steps__note { margin-top: 71px; font-size: 24px; }

    /* 6. вопросы — контейнер 1252, пункты во всю его ширину */
    .promin-app-page .app-faq { margin-top: 140px; }
    .promin-app-page .app-faq .big-text-title { max-width: 1135px; margin: 0 auto 71px; font-size: 56px; letter-spacing: -2.24px; }
    .promin-app-page .app-faq .question-client-wrapper { width: 100%; max-width: 1252px; }
    /* высоту строки держит кнопка-стрелка (60px), отсюда отступы 24px */
    .promin-app-page .app-faq .question-client-cart { width: 100%; margin: 0; padding: 24px 40px; }
    /* у темы padding висит на самом заголовке — снимаем, высоту задаёт карточка */
    .promin-app-page .app-faq .question-client-wrapper .question-client-cart .question-client-title h3 { padding: 0; font-size: 24px; line-height: 1.2; }
    .promin-app-page .app-faq .question-client-description { margin-top: 20px; font-size: 20px; line-height: 1.4; }

    /* 7. финальный блок — жёлтая часть 871 из 1370 */
    .promin-app-page .app-cta { width: calc(100% - 4.861vw); margin: 140px auto 90px; }
    .promin-app-page .app-cta__text { width: 871px; min-height: 578px; padding: 74px 0 74px 97px; border-radius: 24px; }
    .promin-app-page .app-cta__title { max-width: 656px; font-size: 56px; line-height: 1; letter-spacing: -1.12px; }
    .promin-app-page .app-cta__desc { max-width: 641px; margin-top: 30px; font-size: 20px; line-height: 1.45; }
    .promin-app-page .app-store-buttons--cta { margin-top: 31px; gap: 11px; }
    .promin-app-page .app-store-buttons--cta .app-store-buttons__item { width: 226px; height: 78px; }
    .promin-app-page .app-cta__weblink { margin-top: 30px; font-size: 16px; }
    .promin-app-page .app-cta__card { width: 499px; min-height: 578px; border-radius: 24px; }
}

@media (max-width: 1279px) {
    /* высота была фиксированной с 1660: ниже 1280 картинка и текст ужимались,
       а внизу карточки оставалась пустая чёрная полоса до 240px */
    .promin-app-page .app-hero__inner { height: 54.688vw; padding: 40px 0 40px 40px; }
    .promin-app-page .app-hero__text { max-width: 50%; }
    .promin-app-page .app-hero__title { font-size: 38px; letter-spacing: -1.4px; }
    .promin-app-page .app-hero__desc,
    .promin-app-page .app-hero__note { font-size: 16px; }
    .promin-app-page .app-store-buttons__item { width: 190px; height: 66px; }
    .promin-app-page .app-hero__visual { width: 46%; }

    .promin-app-page .app-features__title,
    .promin-app-page .app-download__title,
    .promin-app-page .app-screens__title,
    .promin-app-page .app-steps .app-steps__title,
    .promin-app-page .app-cta__title { font-size: 36px; letter-spacing: -1.2px; }
    .promin-app-page .app-steps { --step-gap: 56px; padding: 72px 48px; }
    .promin-app-page .app-steps .app-steps__title { margin-bottom: 56px; letter-spacing: -1.2px; }
    .promin-app-page .app-steps.section-register-driver-taxi .register-driver-taxi-wrapper .register-driver-taxi-block .register-driver-taxi-cart { min-height: calc(112px + var(--step-gap)); margin-left: 56px; padding: 0 0 var(--step-gap) 76px; }
    .promin-app-page .app-steps.section-register-driver-taxi .register-driver-taxi-wrapper .register-driver-taxi-block .register-driver-taxi-cart:last-child { min-height: 84px; }
    .promin-app-page .app-steps.section-register-driver-taxi .register-driver-taxi-wrapper .register-driver-taxi-block .register-driver-taxi-cart .register-driver-taxi-circle { left: -42px; width: 84px; height: 84px; font-size: 23px; }
    .promin-app-page .app-steps .register-taxi-text-c { margin-bottom: 21px; font-size: 34px; letter-spacing: -1.36px; }
    .promin-app-page .app-steps .register-taxi-text-d { max-width: none; font-size: 18px; }
    .promin-app-page .app-steps__note { margin-top: 56px; font-size: 18px; }

    .promin-app-page .app-card { padding: 36px 36px 0; }
    .promin-app-page .app-card__title { font-size: 28px; }
    .promin-app-page .app-card__image { width: calc(100% + 72px); margin: 24px -36px 0; }
    /* размеры блока «скачать» тянутся по ширине окна правилами 1660 — до 990,
       где начинается раскладка макета 768 */
    .promin-app-page .app-screens__media { width: 230px; }
    .promin-app-page .app-screens__head-text { font-size: 22px; }
    .promin-app-page .app-screens__head { padding: 26px 22px; }
    .promin-app-page .app-cta__text { padding: 44px; }
}

/* ── планшет и мобильный: колонка ───────────────────────────────────────── */

/* ── планшет: размеры по макету 768, раскладки остаются горизонтальными ─── */

@media (max-width: 990px) {
    /* 1. первый экран: крошки по центру, кнопки столбиком, картинка справа */
    .promin-app-page .app-hero { padding: 0 19px; }
    .promin-app-page .app-hero__inner { height: 895px; border-radius: 20px; }
    /* max-width из брейкпоинта выше здесь только мешает */
    .promin-app-page .app-hero__text { left: 32px; top: 40px; width: 658px; max-width: none; }
    .promin-app-page .app-hero__text .bread_crumbs,
    .promin-app-page #BreadcrumbList { justify-content: center; margin-bottom: 40px; }
    .promin-app-page .app-hero__text .bread_crumbs svg,
    .promin-app-page #BreadcrumbList svg { margin: 0 10px; }
    .promin-app-page .app-hero__title { max-width: 597px; margin-bottom: 28px; font-size: 56px; line-height: 1.143; letter-spacing: -2.24px; }
    .promin-app-page .app-hero__desc,
    .promin-app-page .app-hero__note { max-width: 434px; font-size: 18px; line-height: 1.55; }
    .promin-app-page .app-hero__note { margin-top: 7px; }
    .promin-app-page .app-store-buttons--hero { flex-direction: column; align-items: flex-start; gap: 28px; margin-top: 28px; }
    .promin-app-page .app-store-buttons--hero .app-store-buttons__item { width: 198px; height: 68px; }
    .promin-app-page .app-hero__weblink { margin-top: 28px; font-size: 16px; }
    .promin-app-page .app-hero__visual { left: 179px; right: auto; top: 327px; width: 615px; margin: 0; }

    /* 2. карточки: две колонки по 320px */
    .promin-app-page .app-features { width: 100%; max-width: 680px; margin-top: 90px; padding: 0; }
    .promin-app-page .app-features__title { max-width: 670px; font-size: 40px; line-height: 1.15; letter-spacing: -1.6px; }
    .promin-app-page .app-features__desc { margin-top: 15px; font-size: 16px; line-height: 1.375; }
    .promin-app-page .app-features__grid { grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 20px; }
    .promin-app-page .app-card { height: auto; padding: 35px 23px 0; border-radius: 20px; }
    /* иллюстрация прижимается к нижней границе и подрезается снизу, как на десктопе:
       раньше карточка держала фиксированную высоту и под картинкой оставалась пустая полоса */
    .promin-app-page .app-card picture { display: block; width: calc(100% + 46px); margin: auto -23px 0; aspect-ratio: 371 / 172; overflow: hidden; }
    .promin-app-page .app-card__list { margin-bottom: 24px; }
    .promin-app-page .app-card__title { margin-bottom: 14px; font-size: 24px; line-height: 1.2; letter-spacing: -0.96px; }
    .promin-app-page .app-card__list { gap: 14px; }
    .promin-app-page .app-card__item { align-items: flex-start; gap: 10px; }
    .promin-app-page .app-card__icon { width: 21px; margin-top: 4px; }
    .promin-app-page .app-card__body { gap: 5px; }
    .promin-app-page .app-card__head,
    .promin-app-page .app-card__text { font-size: 14px; line-height: 1.375; }
    .promin-app-page .app-card__image { width: 100%; height: auto; margin: 0; }
    .promin-app-page .app-features__note { gap: 12px; margin-top: 15px; padding: 12px 22px; border-radius: 12px; font-size: 12px; }
    .promin-app-page .app-features__note-icon { width: 20px; height: 20px; }

    /* 3. скачать: текст слева, телефон справа за краем блока */
    .promin-app-page .app-download { width: calc(100% - 38px); height: auto; min-height: 264px; margin: 90px auto 0; border-radius: 20px; }
    .promin-app-page .app-download__text { position: static; width: auto; max-width: none; padding: 19px 293px 19px 31px; }
    .promin-app-page .app-download__title { font-size: 34px; line-height: 1.35; letter-spacing: -1.36px; }
    .promin-app-page .app-download__desc { margin-top: 16px; font-size: 16px; line-height: 1.375; }
    .promin-app-page .app-store-buttons--download { margin-top: 16px; gap: 6px; }
    .promin-app-page .app-store-buttons--download .app-store-buttons__item { width: 118px; height: 38px; }
    /* у файла с телефоном корпус упирается в края картинки: если поставить её
       целиком внутрь карточки, видно прямой срез. Поэтому телефон чуть больше
       карточки и подрезается её границей — срез совпадает с краем, как на десктопе */
    .promin-app-page .app-download__phone { position: absolute; left: auto; right: -24px; top: -10px; bottom: -10px; width: auto; margin: 0; transform: none; }
    .promin-app-page .app-download__phone picture { display: block; height: 100%; }
    .promin-app-page .app-download__phone img { height: 100%; width: auto; object-fit: contain; }
    .promin-app-page .app-download__qr-note { display: none; }

    /* 4. что видно в приложении: телефон слева, список справа */
    .promin-app-page .app-screens { flex-direction: row; width: 100%; max-width: 671px; gap: 16px; margin-top: 90px; padding: 0; }
    .promin-app-page .app-screens__media { width: 194px; max-width: none; min-height: 0; margin: 0; }
    .promin-app-page .app-screens__side { flex: 1 1 auto; }
    .promin-app-page .app-screens__title { margin-bottom: 20px; font-size: 32px; line-height: 1.25; letter-spacing: -1.28px; }
    .promin-app-page .app-screens__list { gap: 5px; }
    .promin-app-page .app-screens__head { padding: 20px 18px; }
    .promin-app-page .app-screens__head-text { font-size: 20px; letter-spacing: -0.8px; }
    .promin-app-page .app-screens__toggle { width: 32px; height: 32px; background-size: 14px 14px; }
    .promin-app-page .app-screens__body > p { padding: 0 18px; font-size: 14px; }
    .promin-app-page .app-screens__item.is-open .app-screens__body > p { padding-top: 12px; padding-bottom: 20px; }

    /* 5. онбординг */
    .promin-app-page .app-steps { --step-gap: 39px; width: 100%; max-width: 670px; margin: 90px auto 0; padding: 34px 39px; border-radius: 20px; }
    .promin-app-page .app-steps .app-steps__title { margin-bottom: 38px; font-size: 32px; line-height: 1.25; letter-spacing: -0.64px; }
    .promin-app-page .app-steps.section-register-driver-taxi .register-driver-taxi-wrapper .register-driver-taxi-block .register-driver-taxi-cart { min-height: calc(77px + var(--step-gap)); margin-left: 38px; padding: 0 0 var(--step-gap) 53px; }
    .promin-app-page .app-steps.section-register-driver-taxi .register-driver-taxi-wrapper .register-driver-taxi-block .register-driver-taxi-cart:last-child { min-height: 57px; }
    .promin-app-page .app-steps.section-register-driver-taxi .register-driver-taxi-wrapper .register-driver-taxi-block .register-driver-taxi-cart .register-driver-taxi-circle { left: -38px; width: 77px; height: 77px; font-size: 18px; }
    .promin-app-page .app-steps .register-taxi-text-c { margin-bottom: 14px; font-size: 24px; letter-spacing: -0.96px; }
    .promin-app-page .app-steps .register-taxi-text-d { max-width: 498px; font-size: 16px; }
    .promin-app-page .app-steps__note { margin-top: 38px; font-size: 16px; }

    /* 6. вопросы */
    .promin-app-page .app-faq { margin-top: 90px; }
    .promin-app-page .app-faq .big-text-title { max-width: 608px; margin: 0 auto 38px; font-size: 32px; letter-spacing: -1.28px; }
    .promin-app-page .app-faq .question-client-wrapper { max-width: 670px; }
    .promin-app-page .app-faq .question-client-cart { padding: 14px 22px; }
    .promin-app-page .app-faq .question-client-wrapper .question-client-cart .question-client-title h3 { padding: 0; font-size: 18px; line-height: 1.2; }
    .promin-app-page .app-faq .question-client-description { margin-top: 12px; font-size: 14px; }

    /* 7. финальный блок: жёлтая и чёрная части рядом */
    .promin-app-page .app-cta { flex-direction: row; width: calc(100% - 38px); gap: 4px; margin: 90px auto 60px; }
    .promin-app-page .app-cta__text { width: 460px; min-height: 308px; padding: 20px 0 20px 29px; border-radius: 20px; }
    .promin-app-page .app-cta__title { max-width: 350px; font-size: 32px; line-height: 1.25; letter-spacing: -0.64px; }
    .promin-app-page .app-cta__desc { max-width: 403px; margin-top: 16px; font-size: 14px; line-height: 1.36; }
    .promin-app-page .app-store-buttons--cta { margin-top: 16px; gap: 6px; }
    .promin-app-page .app-store-buttons--cta .app-store-buttons__item { width: 120px; height: 41px; }
    .promin-app-page .app-cta__weblink { margin-top: 16px; font-size: 12px; }
    .promin-app-page .app-cta__card { width: 266px; min-height: 308px; border-radius: 20px; }
}

/* ── между планшетом и мобильным: раскладка макета 768 тянется по ширине ───
   первый экран и блок «скачать» собраны на абсолютных координатах, поэтому
   ниже ~700px фиксированные пиксели наезжали друг на друга. Значения те же,
   что и в блоке 990, только пересчитаны в vw от 768 — на 767px картинка
   совпадает пиксель в пиксель, дальше всё уменьшается пропорционально */

@media (max-width: 767px) {
    .promin-app-page .app-hero { padding: 0 2.474vw; }
    .promin-app-page .app-hero__inner { height: 116.536vw; border-radius: 2.604vw; }
    .promin-app-page .app-hero__text { left: 4.167vw; top: 5.208vw; width: 85.677vw; }
    .promin-app-page .app-hero__text .bread_crumbs,
    .promin-app-page #BreadcrumbList { margin-bottom: 5.208vw; }
    .promin-app-page .app-hero__title { max-width: 77.734vw; margin-bottom: 3.646vw; font-size: 7.292vw; letter-spacing: -0.292vw; }
    .promin-app-page .app-hero__desc,
    .promin-app-page .app-hero__note { max-width: 56.51vw; font-size: 2.344vw; }
    .promin-app-page .app-hero__note { margin-top: 0.911vw; }
    .promin-app-page .app-store-buttons--hero { gap: 3.646vw; margin-top: 3.646vw; }
    .promin-app-page .app-store-buttons--hero .app-store-buttons__item { width: 25.781vw; height: 8.854vw; }
    .promin-app-page .app-hero__weblink { margin-top: 3.646vw; font-size: 2.083vw; }
    .promin-app-page .app-hero__visual { left: 23.307vw; top: 42.578vw; width: 80.078vw; }

    .promin-app-page .app-download { width: calc(100% - 4.948vw); height: auto; min-height: 34.375vw; margin: 90px auto 0; border-radius: 2.604vw; }
    .promin-app-page .app-download__text { padding: 2.474vw 38.151vw 2.474vw 4.036vw; }
    .promin-app-page .app-download__title { font-size: 4.427vw; line-height: 1.35; letter-spacing: -0.177vw; }
    .promin-app-page .app-download__desc { margin-top: 2.083vw; font-size: 2.083vw; }
    .promin-app-page .app-store-buttons--download { margin-top: 2.083vw; gap: 0.781vw; }
    .promin-app-page .app-store-buttons--download .app-store-buttons__item { width: 15.365vw; height: 4.948vw; }
    .promin-app-page .app-download__phone { right: -3.125vw; top: -1.302vw; bottom: -1.302vw; width: auto; transform: none; }

    /* жёлтая и чёрная части финального блока заданы фиксированной шириной —
       ниже 768 они сжимались, и картинка в чёрной карточке обрезалась */
    .promin-app-page .app-cta { width: calc(100% - 4.948vw); gap: 0.521vw; margin: 11.719vw auto 7.813vw; }
    .promin-app-page .app-cta__text { width: 59.896vw; min-height: 40.104vw; padding: 2.604vw 0 2.604vw 3.776vw; border-radius: 2.604vw; }
    .promin-app-page .app-cta__title { max-width: 45.573vw; font-size: 4.167vw; letter-spacing: -0.083vw; }
    .promin-app-page .app-cta__desc { max-width: 52.474vw; margin-top: 2.083vw; font-size: 1.823vw; }
    .promin-app-page .app-store-buttons--cta { margin-top: 2.083vw; gap: 0.781vw; }
    .promin-app-page .app-store-buttons--cta .app-store-buttons__item { width: 15.625vw; height: 5.339vw; }
    .promin-app-page .app-cta__weblink { margin-top: 2.083vw; font-size: 1.563vw; }
    .promin-app-page .app-cta__card { width: 34.635vw; min-height: 40.104vw; border-radius: 2.604vw; }
}

@media (max-width: 620px) {
    /* 1. первый экран: картинка под текстом, кнопки в ряд */
    .promin-app-page .app-hero { padding: 0 10px; }
    .promin-app-page .app-hero__inner { height: auto; min-height: 590px; border-radius: 16px; }
    .promin-app-page .app-hero__text { left: 30px; right: 30px; top: 20px; width: auto; max-width: none; }
    /* на телефоне тема даёт крошкам 14px — как на странице аренды */
    .promin-app-page .app-hero__text .bread_crumbs,
    .promin-app-page #BreadcrumbList { flex-wrap: nowrap; justify-content: flex-start; margin-bottom: 30px; }
    .promin-app-page #BreadcrumbList a,
    .promin-app-page #BreadcrumbList a span,
    .promin-app-page #BreadcrumbList li > span { font-size: 14px; line-height: 19.12px; white-space: nowrap; }
    .promin-app-page #BreadcrumbList svg { width: 16px; height: 16px; margin: 0 10px; }
    .promin-app-page .app-hero__title { max-width: none; margin-bottom: 30px; font-size: 29px; line-height: 1.05; letter-spacing: -1.16px; }
    /* в макете абзац занимает шесть строк; держим его высоту, чтобы кнопки
       стояли на своём месте независимо от того, как лёг перенос */
    .promin-app-page .app-hero__desc { max-width: none; min-height: 132px; font-size: 16px; line-height: 1.4; }
    .promin-app-page .app-hero__note { max-width: none; font-size: 16px; line-height: 1.4; }
    .promin-app-page .app-hero__note { margin-top: 8px; }
    .promin-app-page .app-store-buttons--hero { flex-direction: row; gap: 2px; margin-top: 30px; }
    .promin-app-page .app-store-buttons--hero .app-store-buttons__item { width: 114px; height: 39px; }
    .promin-app-page .app-hero__weblink { margin-top: 10px; font-size: 14px; }
    .promin-app-page .app-hero__visual { left: 102px; right: auto; top: 340px; width: 250px; }

    /* 2. карточки в одну колонку */
    .promin-app-page .app-features { width: calc(100% - 20px); max-width: none; margin: 40px auto 0; }
    /* в макете заголовок занимает три строки, подзаголовок — три */
    .promin-app-page .app-features__title { max-width: none; min-height: 84px; font-size: 28px; line-height: 1; letter-spacing: -0.56px; }
    .promin-app-page .app-features__desc { min-height: 60px; margin-top: 15px; font-size: 14px; line-height: 1.43; }
    .promin-app-page .app-features__grid { grid-template-columns: 1fr; gap: 15px; margin-top: 15px; }
    .promin-app-page .app-card { height: auto; padding: 35px 23px 0; border-radius: 16px; }
    .promin-app-page .app-card__title { margin-bottom: 15px; font-size: 20px; letter-spacing: -0.6px; }
    .promin-app-page .app-card__list { gap: 14px; }
    .promin-app-page .app-card__icon { width: 21px; }
    .promin-app-page .app-card__head { font-size: 13px; }
    .promin-app-page .app-card__text { font-size: 13px; line-height: 1.46; }
    .promin-app-page .app-features__note { gap: 10px; margin-top: 15px; padding: 14px 6px; border-radius: 12px; font-size: 11px; }
    .promin-app-page .app-features__note-icon { width: 18px; height: 18px; }

    /* 3. скачать: телефон в правом нижнем углу, кнопки столбиком */
    /* высота по содержимому: на узких экранах текст переносится на большее число
       строк, и кнопки вылезали за нижнюю границу */
    .promin-app-page .app-download { width: calc(100% - 20px); height: auto; min-height: 365px; margin: 60px auto 0; border-radius: 16px; }
    .promin-app-page .app-download__text { position: static; width: auto; padding: 30px 132px 30px 30px; }
    /* заголовок и описание шире своей колонки: телефон стоит внизу справа,
       и над ним место свободно */
    .promin-app-page .app-download__title { width: 140%; margin-bottom: 30px; font-size: 28px; line-height: 1; letter-spacing: -0.56px; }
    .promin-app-page .app-download__title br { display: none; }
    .promin-app-page .app-download__desc { width: 130%; max-width: none; min-height: 88px; margin-top: 0; font-size: 14px; line-height: 1.57; }
    .promin-app-page .app-store-buttons--download { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 0; margin-bottom: 15px; }
    .promin-app-page .app-store-buttons--download .app-store-buttons__item { width: 150px; height: 51px; }
    .promin-app-page .app-download__phone { right: 0; top: auto; bottom: 0; width: 200px; transform: none; }
    /* на планшете картинка тянется по высоте, здесь — по ширине обёртки */
    .promin-app-page .app-download__phone picture { height: auto; }
    .promin-app-page .app-download__phone img { width: 100%; height: 100%; object-fit: contain; }

    /* Кнопка «Открыть приложение» — это modern-btn-block с главной страницы:
       размеры, кружок, плашка и поворот при наведении берутся из стилей темы.
       Своё здесь только положение, подпись и чёрный вариант для жёлтого блока. */
    .promin-app-page .app-action {
        display: block;
        margin: 40px auto 0;               /* кнопка по центру, как в макете */
        color: var(--app-yellow);          /* цвет плашки: в svg fill="currentColor" */
        text-decoration: none;
    }

    /* на главной кружок 50px с отступом 5px (правило её обёртки), а общий
       стиль темы даёт 45px и 8px — выравниваем под главную */
    .promin-app-page .app-action.modern-btn-block .modern-btn-part1 { width: 50px; height: 50px; left: 5px; top: 5px; transform: rotate(135deg); }
    /* стрелка тоньше и чуть меньше, чем в теме (там 24px и stroke 2) */
    .promin-app-page .app-action .circl-arrow-btn svg { min-width: 20px; min-height: 20px; }
    .promin-app-page .app-action .circl-arrow-btn svg path { stroke-width: 1.5; }

    /* На тачскринах :hover «залипает» после нажатия: кружок оставался
       развёрнутым (стрелка вверх вместо диагонали). Разворот из темы
       оставляем только там, где есть настоящий курсор. */
    @media (hover: none) {
        .promin-app-page .app-action.modern-btn-block:hover .modern-btn-part1,
        .promin-app-page .app-cta .app-action.modern-btn-block:hover .modern-btn-part1 { transform: rotate(135deg); }
    }

    /* подпись: на главной текст нарисован в svg, у нас он из админки —
       ставим по центру области справа от кружка (60…280) тем же кеглем */
    .promin-app-page .app-action__text {
        position: absolute;
        z-index: 2;
        left: 60px;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
        font-weight: 500;
        font-size: 15px;
        line-height: 1;
        color: var(--app-black);
        pointer-events: none;
    }

    /* на жёлтом фоне плашка в макете чёрная, а подпись белая */
    .promin-app-page .app-cta .app-action { margin: 40px auto 0; color: var(--app-black); }
    .promin-app-page .app-cta .app-action.modern-btn-block .modern-btn-part1 { background-color: var(--app-black); }
    .promin-app-page .app-cta .app-action .app-action__text { color: #FFFFFF; }

    .promin-app-page .app-download + .app-action { margin: 30px auto 0; }

    /* подпись, вынесенная скриптом из чёрного блока */
    /* подпись, вынесенная скриптом из чёрного блока: оформление один в один
       как у заметки в блоке возможностей — фон, цвет текста, значок, отступы */
    .promin-app-page .app-hero__note--card {
        display: flex;
        align-items: center;
        gap: 10px;
        max-width: none;
        width: 100%;
        margin: 10px 0 0;
        padding: 14px 6px;
        border-radius: 12px;
        background: var(--app-bg);
        color: var(--app-grey);
        font-weight: 400;
        font-size: 11px;
        line-height: 1.375;
    }

    .promin-app-page .app-hero__note--card::before {
        content: '';
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        background: url(../assets/images/app/icons/note-info.svg) no-repeat center / contain;
    }

    /* 4. что видно в приложении: экраны лентой, выбранный по центру */
    .promin-app-page .app-screens { flex-direction: column; width: calc(100% - 20px); max-width: none; gap: 0; margin: 40px auto 0; }
    /* в мобильном макете у блока нет заголовка — прячем, оставляя его
       в разметке для структуры страницы */
    .promin-app-page .app-screens__title {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    /* в макете рядом с выбранным экраном видны края соседних */
    .promin-app-page .app-screens__media {
        width: 100%;                        /* лента во всю ширину блока */
        height: auto;                       /* высоту задаёт пропорция экрана */
        margin: 0 auto;
        overflow: hidden;                   /* блок не прокручивается: ленту двигает скрипт */
    }

    .promin-app-page .app-screens__track {
        display: flex;
        align-items: flex-end;              /* экраны стоят на одной нижней линии */
        gap: 0;                             /* соседние экраны заходят под выбранный */
        height: auto;
        /* отступ считается от ширины экрана, иначе на широких телефонах
           выбранный экран уезжает из центра */
        padding: 0;                            /* положение ленты задаёт скрипт */
        /* анимацию перехода пока не включаем */
    }

    /* три экрана вместе занимают ровно ширину блока: 39.75 + 53 + 39.75 - 4 x 8.125 = 100 */
    .promin-app-page .app-screens__shot {
        position: relative;
        z-index: 1;
        flex: 0 0 39.75%;                   /* соседний экран — 75% от выбранного */
        width: 39.75%;
        height: auto;                       /* пропорции сохраняются, края не режутся */
        margin: 0 -8.125%;                  /* края уходят под соседний экран */
        align-self: flex-end;               /* соседние экраны стоят ниже выбранного */
        opacity: 1;                         /* на широких экранах видно только выбранный */
        object-fit: contain;
        pointer-events: auto;
    }

    /* выбранный экран лежит поверх соседних и в полную высоту */
    .promin-app-page .app-screens__shot.is-active {
        z-index: 2;
        flex-basis: 53%;
        width: 53%;
    }

    /* список заходит на ленту и лежит поверх неё — иначе телефоны перекрывают
       первый пункт */
    .promin-app-page .app-screens__side {
        position: relative;
        z-index: 2;
        margin-top: -18px;                  /* столько же экраны заходят под список в макете */
    }
    .promin-app-page .app-screens__list { gap: 5px; }
    .promin-app-page .app-screens__head { padding: 14px 16px; }
    .promin-app-page .app-screens__head-text { font-size: 16px; letter-spacing: -0.48px; }
    .promin-app-page .app-screens__toggle { width: 24px; height: 24px; background-size: 12px 12px; }
    .promin-app-page .app-screens__body > p { padding: 0 16px; font-size: 12px; }
    .promin-app-page .app-screens__item.is-open .app-screens__body > p { padding-top: 10px; padding-bottom: 14px; }

    /* 5. онбординг */
    .promin-app-page .app-steps { --step-gap: 19px; width: calc(100% - 20px); max-width: none; margin: 60px auto 0; padding: 36px 19px; border-radius: 16px; }
    .promin-app-page .app-steps .app-steps__title { margin-bottom: 38px; font-size: 28px; line-height: 1; letter-spacing: -0.56px; }
    .promin-app-page .app-steps .app-steps__title br { display: block; }   /* на узком экране заголовок снова в две строки */
    .promin-app-page .app-steps.section-register-driver-taxi .register-driver-taxi-wrapper .register-driver-taxi-block .register-driver-taxi-cart { min-height: calc(70px + var(--step-gap)); margin-left: 35px; padding: 0 0 var(--step-gap) 42px; }
    .promin-app-page .app-steps.section-register-driver-taxi .register-driver-taxi-wrapper .register-driver-taxi-block .register-driver-taxi-cart:last-child { min-height: 54px; }
    .promin-app-page .app-steps.section-register-driver-taxi .register-driver-taxi-wrapper .register-driver-taxi-block .register-driver-taxi-cart .register-driver-taxi-circle { left: -27px; width: 53px; height: 53px; font-size: 15px; }
    .promin-app-page .app-steps.section-register-driver-taxi .register-driver-taxi-wrapper .register-driver-taxi-block .register-driver-taxi-cart .register-driver-taxi-circle-activ,
    .promin-app-page .app-steps.section-register-driver-taxi .register-driver-taxi-wrapper .register-driver-taxi-block .register-driver-taxi-cart .register-driver-taxi-circle-finish { box-shadow: 0 0 0 9px rgba(251, 199, 7, .2); }
    .promin-app-page .app-steps .register-taxi-text-c { margin-bottom: 7px; font-size: 20px; letter-spacing: -0.6px; }
    .promin-app-page .app-steps .register-taxi-text-d { max-width: 204px; font-size: 14px; line-height: 1.43; }
    .promin-app-page .app-steps__note { margin-top: 40px; font-size: 14px; }

    /* 6. вопросы */
    .promin-app-page .app-faq { margin-top: 60px; }
    /* в макете заголовок прижат влево и набран крупнее */
    .promin-app-page .app-faq .big-text-title { width: calc(100% - 20px); max-width: none; min-height: 102px; margin: 0 0 22px; font-size: 28px; line-height: 1.2; letter-spacing: -0.56px; text-align: left; }
    .promin-app-page .app-faq .question-client-wrapper { width: calc(100% - 20px); max-width: none; }
    .promin-app-page .app-faq .question-client-cart { padding: 20px 16px; }
    /* тема держит строку вопроса в фиксированной высоте — на телефоне она лишняя */
    .promin-app-page .app-faq.section-question-client .question-client-wrapper .question-client-cart .question-client-title { min-height: 0; height: auto; }
    .promin-app-page .app-faq.section-question-client .question-client-wrapper .question-client-cart .question-client-title .button-for-click,
    .promin-app-page .app-faq.section-question-client .question-client-wrapper .question-client-cart .question-client-title .button-for-click-active { width: 44px; height: 44px; flex-shrink: 0; }
    .promin-app-page .app-faq.section-question-client .question-client-wrapper .question-client-cart .question-client-title .button-for-click svg,
    .promin-app-page .app-faq.section-question-client .question-client-wrapper .question-client-cart .question-client-title .button-for-click-active svg { width: 18px; height: 18px; min-width: 0; min-height: 0; }
    .promin-app-page .app-faq.section-question-client .question-client-wrapper .question-client-cart .question-client-title h3 { padding: 0; font-size: 16px; line-height: 1.5; }
    .promin-app-page .app-faq .question-client-description { font-size: 13px; }
    .promin-app-page .app-faq.section-question-client .question-client-wrapper .active-client-cart .question-client-description { margin-top: 32px; }

    /* 7. финальный блок: жёлтая часть, под ней чёрная */
    .promin-app-page .app-cta { flex-direction: column; width: calc(100% - 20px); gap: 10px; margin: 60px auto 40px; }
    .promin-app-page .app-cta__text { width: 100%; min-height: 389px; padding: 36px 31px; border-radius: 16px; }
    .promin-app-page .app-cta__title { max-width: none; font-size: 28px; line-height: 1; letter-spacing: -0.56px; }
    .promin-app-page .app-cta__desc { max-width: 310px; margin-top: 15px; font-size: 14px; line-height: 1.21; }
    .promin-app-page .app-store-buttons--cta { justify-content: center; margin-top: 15px; gap: 6px; }
    .promin-app-page .app-store-buttons--cta .app-store-buttons__item { width: 150px; height: 51px; }
    .promin-app-page .app-cta__weblink { margin-top: 15px; font-size: 12px; }
    .promin-app-page .app-cta__card { width: 100%; height: 220px; min-height: 0; border-radius: 16px; overflow: hidden; }
    /* в мобильном макете в карточке виден логотип, а не середина с QR-кодом */
    .promin-app-page .app-cta__card img { height: 100%; object-fit: cover; object-position: top center; }
}

/* ── совсем узкие экраны (iPhone SE 1-го поколения и старые андроиды) ─────
   кнопки сторов занимают почти всю ширину карточки, поэтому телефон
   в блоке «скачать» уменьшаем, чтобы он не оказался под ними */

@media (max-width: 359px) {
    .promin-app-page .app-download__phone { width: 120px; }
}