/*
 * Гарнитура макета — Vela Sans (SIL OFL, производная от Manrope).
 * Пока не получены оригинальные woff2, подставлен Manrope — родитель Vela Sans,
 * ближайший по метрикам. Подмена снимается заменой файлов в /fonts и имени ниже.
 */
@font-face {
    font-family: "Vela Sans Fallback";
    src: url("../fonts/manrope-cyrillic.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Vela Sans Fallback";
    src: url("../fonts/manrope-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Vela Sans Fallback";
    src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * Лендинг «Лечение катаракты» — база и дизайн-токены (KOY-1660).
 * Токены сняты с макета Figma rB4fcXHd8V4ahIsp9V7Iqs.
 * Семейства шрифтов заведены переменными: правка гарнитуры — одна строка.
 */

:root {
    /* Цвет */
    --kt-blue: #4E7FFF;
    --kt-blue-dark: #3364E3;
    --kt-blue-accent: #3268F7;
    --kt-ink: #121724;
    --kt-bg: #FFFFFF;
    --kt-bg-soft: #F5F6F8;
    --kt-bg-mute: #EEF0F3;
    --kt-bg-alt: #F3F4F6;
    --kt-border: #E4E6EA;

    /* Типографика */
    --kt-font-head: "Vela Sans", "Vela Sans Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --kt-font-body: "Vela Sans", "Vela Sans Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    /* Макет нарисован под 1440. Между 1024 и 1440 кегль тянется плавно,
       иначе на промежуточных ширинах заголовок наезжает на фото. */
    --kt-h1: clamp(38px, 3.82vw, 55px);
    --kt-h2: clamp(34px, 3.33vw, 48px);
    --kt-h3: clamp(24px, 1.94vw, 28px);
    --kt-h5: clamp(28px, 2.64vw, 38px);
    --kt-h4: clamp(21px, 1.67vw, 24px);
    --kt-lead: clamp(20px, 1.67vw, 24px);
    --kt-body: 20px;
    --kt-body-s: 16px;
    --kt-small: 14px;

    /* Сетка */
    --kt-content: 1180px;
    --kt-gutter: 20px;
    --kt-section-y: 90px;
    /* Колонка контента 1180 по центру. На 1440 даёт ровно 130px по бокам,
       как в макете; шире — центрируется, уже — прижимается к полям.
       Считаем от % (не vw), чтобы полоса прокрутки не вызывала горизонтальный сдвиг. */
    --kt-pad-x: max(var(--kt-gutter), (100% - var(--kt-content)) / 2);
    --kt-section-x: var(--kt-pad-x);

    /* Радиусы */
    --kt-r-sm: 21px;
    --kt-r-md: 24px;
    --kt-r-lg: 28px;
    --kt-r-pill: 100px;
}

@media (max-width: 1023px) {
    :root {
        --kt-h1: 32px;
        --kt-h2: 28px;
        --kt-h3: 22px;
        --kt-h5: 22px;
        --kt-h4: 20px;
        --kt-lead: 18px;
        --kt-body: 16px;
        --kt-body-s: 14px;
        --kt-section-y: 58px;
        --kt-section-x: var(--kt-gutter);
    }
}

/* Сброс в пределах лендинга */
.kt-page {
    margin: 0;
    background: var(--kt-bg);
    color: var(--kt-ink);
    font-family: var(--kt-font-body);
    font-size: var(--kt-body);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

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

/* h4 тоже сюда: без сброса у него остаются браузерные отступы 1.33em,
   и в карточках «Что вы получите» заголовок отрывался от описания. */
.kt-page h1,
.kt-page h2,
.kt-page h3,
.kt-page h4,
.kt-page h5,
.kt-page h6 {
    font-family: var(--kt-font-head);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
}

.kt-page h1 {
    font-size: var(--kt-h1);
    line-height: 0.95;
}

/* Через :where(), как и сброс ссылок: иначе (0,2,0) перебивает правило
   компонента (0,1,0) — медиазапросы вес не добавляют, и `display: none`
   у декоративной картинки на мобильной не срабатывал. */
:where(.kt-page) img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* :where() обнуляет вес селектора: сброс перестаёт перебивать цвет,
   заданный компонентом. Без этого ссылка-кнопка приезжала с цветом текста
   (стрелки в «Начните с диагностики» были чёрными вместо белых). */
:where(.kt-page) a {
    color: inherit;
}

.kt-skip-link {
    position: absolute;
    left: -9999px;
}

.kt-skip-link:focus {
    left: 20px;
    top: 20px;
    z-index: 100;
    background: #fff;
    padding: 12px 20px;
    border-radius: var(--kt-r-sm);
}

.kt-container {
    width: 100%;
    max-width: calc(var(--kt-content) + var(--kt-gutter) * 2);
    margin: 0 auto;
    padding-inline: var(--kt-gutter);
}

.kt-section {
    padding-block: var(--kt-section-y);
}

/* Базовые компоненты по холсту «Для разработчиков» */
.kt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: var(--kt-r-pill);
    font: inherit;
    font-size: 18px;
    line-height: 1;
    padding: 20px 32px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.kt-btn--filled {
    background: var(--kt-blue);
    color: #fff;
}

.kt-btn--filled:hover {
    background: var(--kt-blue-dark);
}

.kt-btn--light {
    background: #fff;
    color: var(--kt-ink);
}

.kt-btn--light:hover {
    background: var(--kt-bg-mute);
}

.kt-btn--pseudo {
    background: transparent;
    color: var(--kt-ink);
    border: 1px solid var(--kt-border);
}

.kt-btn--pseudo:hover {
    border-color: var(--kt-ink);
}

.kt-btn--sm {
    padding: 14px 24px;
    font-size: 16px;
}

.kt-field {
    width: 100%;
    padding: 20px 24px;
    border: 1px solid var(--kt-border);
    border-radius: var(--kt-r-sm);
    background: #fff;
    font: inherit;
    color: var(--kt-ink);
}

.kt-field::placeholder {
    color: #9AA0AC;
}

.kt-field:focus {
    outline: none;
    border-color: var(--kt-blue);
}

.kt-field--error {
    border-color: #E5484D;
}

/* Служебная заглушка несвёрстанной секции — только на превью */
.kt-section--stub {
    border-top: 1px dashed var(--kt-border);
    background: var(--kt-bg-soft);
    text-align: center;
}

.kt-stub__label {
    margin: 0 0 8px;
    font-size: var(--kt-small);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9AA0AC;
}

.kt-stub__title {
    font-size: 24px;
    color: #6B7280;
}

/* Подвал свёрстан ниже, в конце файла (макет 1:3115 / 1:4834). */

/* ─────────────────────────────────────────────────────────────
   Шапка — макет 646:296 «Header desktop»
   Белая плашка 80px поверх первого экрана, скруглена снизу на 24.
   ───────────────────────────────────────────────────────────── */
.kt-header {
    /* Шапка закреплена сверху и остаётся видимой при прокрутке. Место под неё
       уже заложено верхним падингом первого экрана, поэтому переход с absolute
       на fixed вёрстку не сдвигает. */
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--kt-border);
    border-radius: 0 0 var(--kt-r-md) var(--kt-r-md);
    transition: box-shadow .2s ease;
}

/* Цель якоря не должна прятаться под закреплённой шапкой. Высоту шапки
   в переменную кладёт landing.js, значение по умолчанию — на случай без JS. */
:where(.kt-page) [id^="kt-"] {
    scroll-margin-top: calc(var(--kt-header-h, 80px) + 16px);
}

/* Как только страница поехала — отделяем шапку тенью от контента под ней. */
.kt-header--stuck {
    box-shadow: 0 6px 24px rgba(18, 23, 36, .08);
}

/* Открытое мобильное меню не должно уезжать за экран у закреплённой шапки. */
.kt-header__mobile {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.kt-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 80px;
    padding: 14px var(--kt-section-x);
}

.kt-header__logo {
    display: block;
    flex-shrink: 0;
}

.kt-header__logo img {
    width: 154px;
    height: 52px;
}

.kt-header__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.kt-header__link {
    display: flex;
    align-items: center;
    height: 52px;
    padding: 0 16px;
    border-radius: var(--kt-r-pill);
    font-size: var(--kt-small);
    line-height: 1.2;
    text-decoration: none;
    color: var(--kt-ink);
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease;
}

.kt-header__link:hover {
    background: var(--kt-bg-alt);
    color: var(--kt-blue);
}

.kt-header__buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.kt-header__phone,
.kt-header__test {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 20px;
    border: 0;
    border-radius: var(--kt-r-pill);
    font-family: inherit;
    font-size: var(--kt-small);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease;
}

.kt-header__phone {
    background: var(--kt-bg-alt);
    color: var(--kt-ink);
}

.kt-header__phone:hover {
    background: var(--kt-bg-mute);
}

.kt-header__test {
    background: var(--kt-blue);
    color: #fff;
}

.kt-header__test:hover {
    background: var(--kt-blue-dark);
}

.kt-header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.kt-header__burger span {
    display: block;
    height: 2px;
    background: var(--kt-ink);
    border-radius: 2px;
}

.kt-header__contact {
    display: none;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 48px;
    border-radius: 49px;
    background: var(--kt-bg-alt);
}

.kt-header__contact img {
    width: 70px;
    height: 48px;
}

.kt-header__mobile {
    padding: 8px var(--kt-gutter) var(--kt-gutter);
    border-top: 1px solid var(--kt-border);
}

.kt-header__list--mobile {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 12px;
}

.kt-header__phone--mobile {
    display: flex;
}

/* Шапка на планшете и телефоне */
/* Шапка и первый экран переключаются на мобильную версию на одной ширине —
   иначе на планшетном диапазоне бургер соседствует с десктопным героем. */
@media (min-width: 1024px) and (max-width: 1279px) {
    /* Тесный десктоп: меню целиком не помещается вместе с телефоном —
       телефон уезжает в кнопку связи, отступы в меню поджимаются. */
    .kt-header__inner {
        gap: 12px;
    }

    .kt-header__link {
        padding: 0 10px;
    }

    .kt-header__phone {
        display: none;
    }
}

@media (max-width: 1023px) {
    .kt-header {
        border-radius: 0 0 20px 20px;
    }

    .kt-header__nav,
    .kt-header__buttons {
        display: none;
    }

    /* Макет 646:3337: бургер слева, логотип рядом, кнопка связи справа. */
    .kt-header__burger {
        display: flex;
        order: -1;
    }

    .kt-header__contact {
        display: inline-flex;
    }

    .kt-header__inner {
        justify-content: flex-start;
        gap: 12px;
        min-height: 68px;
        padding: 10px 8px;
    }

    .kt-header__logo {
        margin-inline-end: auto;
    }

    .kt-header__logo img {
        width: 138px;
        height: 44px;
    }
}

@media (min-width: 1024px) {
    .kt-header__mobile {
        display: none;
    }
}

/* ─────────────────────────────────────────────────────────────
   Секция 1 — первый экран, макет 646:996
   ───────────────────────────────────────────────────────────── */
.kt-hero {
    position: relative;
    z-index: 1;
    isolation: isolate;
    padding: 180px var(--kt-section-x) 120px;
    border-bottom: 1px solid var(--kt-border);
    background: linear-gradient(180deg, #B0CFE1 12%, #CEDEDF 100%);
    overflow: hidden;
}

/* Фото позиционировано как в макете: десктоп — 2022px при кадре 1440
   со сдвигом -292px; мобильная — 951px при 390 со сдвигом -488/-78. */
.kt-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.kt-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Кадрирование повторяет макет: по горизонтали видно центр фотографии. */
.kt-hero__bg--desktop img {
    object-position: 50% 0;
}

/* В мобильном макете кадр другой — видна правая часть снимка. */
.kt-hero__bg--mobile {
    display: none;
}

/* Кадр из макета (1:3199): картинка 951 при экране 390 со сдвигом -488 по X,
   низом вровень с низом секции. object-fit: cover сюда не годится — в макете
   снимок обрезан и по горизонтали, и по вертикали в разной пропорции, а cover
   умеет резать только по одной оси, из-за чего фигуры уезжали вправо и вниз.
   Привязка к низу, а не к верху: если текст на узком экране перенесётся и
   секция подрастёт, снимок не оторвётся от нижнего края. */
.kt-hero__bg--mobile img {
    position: absolute;
    bottom: 0;
    left: -125.13vw;
    width: 243.85vw;
    height: auto;
    max-width: none;
    object-fit: fill;
}

@media (max-width: 1023px) {
    .kt-hero__bg--desktop {
        display: none;
    }

    .kt-hero__bg--mobile {
        display: block;
    }
}

.kt-hero__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Макет: фрейм «left» 766 при колонке 1180 — это 65%. Держим долю,
       а не пиксели, иначе на узком десктопе текст уезжает на лица. */
    max-width: min(766px, 65%);
    min-height: 520px;
}

.kt-hero__facts,
.kt-hero__title,
.kt-hero__lead {
    max-width: 723px;
}

.kt-hero__facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
    color: var(--kt-blue-accent);
}

.kt-hero__fact + .kt-hero__fact::before {
    content: "|";
    margin-inline-end: 10px;
}

.kt-hero__title {
    margin-bottom: 8px;
    background: linear-gradient(149deg, #1552EF 0%, #3268F7 52%, #4E7FFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.kt-hero__lead {
    margin: 0;
    font-size: var(--kt-lead);
    line-height: 1.2;
    color: #3C4046;
}

.kt-hero__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-self: stretch;
    margin-top: auto;
    padding-top: 40px;
}

.kt-hero .kt-btn {
    padding: 18px 32px;
    font-size: var(--kt-body);
}

.kt-hero .kt-btn--light {
    color: var(--kt-blue);
}

.kt-hero__fact--mobile {
    display: none;
}

@media (max-width: 1023px) {
    .kt-hero {
        /* Макет: отступ 175px сверху включает статус-бар телефона (42px),
           в браузере его нет — поэтому 133px. Блок «left» — 600px. */
        padding: 133px var(--kt-gutter) 35px;
        background: linear-gradient(180deg, #B0CFE1 0%, #CFE0F0 43%);
    }

    .kt-hero__inner {
        min-height: 600px;
        /* Макет нарисован под 390. На планшете колонку не растягиваем:
           строка в 800+ пикселей кеглем 32 читается плохо. */
        max-width: 560px;
    }

    .kt-hero__facts,
    .kt-hero__title,
    .kt-hero__lead {
        max-width: none;
    }

    .kt-hero__facts {
        gap: 5px;
        margin-bottom: 24px;
        font-size: var(--kt-small);
    }

    .kt-hero__fact + .kt-hero__fact::before {
        margin-inline-end: 5px;
    }

    .kt-hero__fact--mobile {
        display: list-item;
    }

    .kt-hero__title {
        font-weight: 700;
        line-height: 1;
    }

    .kt-hero__br {
        display: none;
    }

    .kt-hero__btns {
        flex-direction: column;
        align-items: stretch;
        padding-top: 32px;
    }

    .kt-hero .kt-btn {
        width: 100%;
        min-height: 52px;
        padding: 16px 24px;
        font-size: 16px;
        font-weight: 500;
    }
}

/* ─────────────────────────────────────────────────────────────
   Плавающая карточка-подсказка — как на lkz.sfe.ru: остаётся у нижнего
   края окна при прокрутке и доступна на всех ширинах экрана.
   ───────────────────────────────────────────────────────────── */
.kt-hero__promo {
    display: block;
    position: fixed;
    right: clamp(16px, 6vw, 44px);
    bottom: 10px;
    z-index: 990;
    width: min(320px, calc(100vw - 32px));
    padding: 25px 24px;
    background: #fff;
    border-bottom: 1px solid var(--kt-border);
    border-radius: var(--kt-r-sm);
    box-shadow: 0 10px 30px rgba(17, 47, 95, .16);
    text-align: center;
}

.kt-hero__promo-text {
    margin: 0 0 14px;
    font-size: var(--kt-small);
    font-weight: 500;
    line-height: 1.2;
    color: var(--kt-ink);
}

.kt-hero__promo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 20px;
    border: 0;
    border-radius: var(--kt-r-pill);
    background: var(--kt-blue);
    font-family: inherit;
    font-size: var(--kt-small);
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease;
}

.kt-hero__promo-btn:hover {
    background: var(--kt-blue-dark);
}

/* ─────────────────────────────────────────────────────────────
   Секция 2 «Начните с диагностики» — макет 646:1036
   Три ступени в общей рамке, разделены вертикальными линиями.
   ───────────────────────────────────────────────────────────── */
.kt-diag {
    padding-inline: var(--kt-section-x);
}

.kt-icon {
    width: 100%;
    height: 100%;
    display: block;
}

.kt-diag__inner {
    display: flex;
    flex-direction: column;
    gap: 42px;
    /* В макете блок фиксирован по высоте (450), ступени занимают остаток.
       Держим минимум, но даём вырасти, если текст переносится иначе. */
    min-height: 450px;
    margin-bottom: 42px;
}

.kt-diag__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kt-diag__eyebrow,
.kt-diag__lead {
    margin: 0;
    color: var(--kt-ink);
    opacity: .6;
}

.kt-diag__eyebrow {
    font-size: var(--kt-body-s);
    line-height: 1.2;
}

.kt-diag__title {
    font-size: var(--kt-h2);
    line-height: 1;
    color: var(--kt-blue);
}

.kt-diag__lead {
    font-size: var(--kt-body);
    line-height: 1.2;
}

.kt-diag__ladder {
    display: flex;
    flex: 1;
    border: 1px solid var(--kt-border);
    border-radius: var(--kt-r-sm);
}

.kt-diag__rung {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    flex: 1;
    gap: 24px;
    padding: 24px;
    border-inline-end: 1px solid var(--kt-border);
}

.kt-diag__rung:last-child {
    border-inline-end: 0;
}

.kt-diag__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.kt-diag__label {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: #85878D;
}

.kt-diag__group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kt-diag__name {
    font-size: var(--kt-h4);
    line-height: 1;
}

.kt-diag__text {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .8;
}

.kt-diag__go {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 62px;
    height: 62px;
    padding: 15px;
    border: 0;
    border-radius: var(--kt-r-pill);
    background: var(--kt-blue);
    color: #fff;
    cursor: pointer;
    transition: background-color .18s ease;
}

.kt-diag__go:hover {
    background: var(--kt-blue-dark);
}

.kt-diag__note {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
}

/* Приглушён только текст: иконка в макете полноцветная. */
.kt-diag__note-text {
    opacity: .6;
}

.kt-diag__note-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    padding: 10px;
    border-radius: var(--kt-r-md);
    background: #F1F5FF;
    color: var(--kt-blue);
}

@media (max-width: 1023px) {
    .kt-diag__inner {
        min-height: 0;
        gap: 32px;
        margin-bottom: 32px;
    }

    /* Три ступени в ряд на телефоне не помещаются — складываем в столбец,
       разделители из вертикальных становятся горизонтальными. */
    .kt-diag__ladder {
        flex-direction: column;
    }

    .kt-diag__rung {
        /* В столбце равная высота не нужна: иначе короткие карточки
           растягиваются до самой длинной и кнопка повисает в пустоте.
           Но нижняя граница из макета есть — 274px. */
        flex: none;
        min-height: 274px;
        gap: 20px;
        padding: 20px;
        border-inline-end: 0;
        border-bottom: 1px solid var(--kt-border);
    }

    .kt-diag__rung:last-child {
        border-bottom: 0;
    }

    .kt-diag__body {
        gap: 12px;
    }

    .kt-diag__go {
        width: 52px;
        height: 52px;
        padding: 12px;
    }

    .kt-diag__note {
        align-items: flex-start;
        gap: 12px;
        font-size: var(--kt-body-s);
    }

    .kt-diag__note-icon {
        width: 40px;
        height: 40px;
        padding: 8px;
    }
}


/* ─────────────────────────────────────────────────────────────
   Селф-тест — поп-ап. Макет YvWGCUAoq7pcZT0nqdSSF2, 1:4899 … 1:5336.
   Карточка 1180 — та же колонка контента, что у секций.
   ───────────────────────────────────────────────────────────── */
.kt-quiz {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px var(--kt-gutter);
    overflow-y: auto;
}

.kt-quiz[hidden] {
    display: none;
}

.kt-quiz__overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 21, 23, .4);
}

.kt-quiz__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    max-width: var(--kt-content);
    margin: auto;
    padding: 28px 26px;
    border-radius: var(--kt-r-sm);
    background: #fff;
}

.kt-quiz__card[hidden] {
    display: none;
}

.kt-quiz__card--done {
    padding-bottom: 102px;
    background: var(--kt-bg-soft);
}

.kt-quiz__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kt-quiz__top--end {
    justify-content: flex-end;
}

.kt-quiz__dots {
    display: flex;
    gap: 5px;
}

.kt-quiz__dot {
    width: 24px;
    height: 5px;
    border-radius: 3px;
    background: #E1E9FF;
    transition: background-color .2s ease;
}

.kt-quiz__dot.is-on {
    background: var(--kt-blue);
}

.kt-quiz__close {
    width: 42px;
    height: 42px;
    padding: 9px;
    border: 0;
    border-radius: var(--kt-r-pill);
    background: transparent;
    color: var(--kt-ink);
    cursor: pointer;
}

.kt-quiz__close:hover {
    background: var(--kt-bg-alt);
}

.kt-quiz__close svg {
    width: 100%;
    height: 100%;
}

/* Форма — колонка с тем же шагом 32, что и карточка в макете:
   иначе кнопки прилипают к согласию. */
.kt-quiz__form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.kt-quiz__step {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.kt-quiz__step[hidden] {
    display: none;
}

.kt-quiz__head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kt-quiz__counter {
    margin: 0;
    font-size: var(--kt-lead);
    line-height: 1.2;
    color: #6A6F75;
}

.kt-quiz__question {
    margin: 0;
    font-family: var(--kt-font-head);
    font-size: var(--kt-h5);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #141517;
}

.kt-quiz__options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kt-quiz__option {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 62px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 16px;
    background: #fff;
    font-size: var(--kt-lead);
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .18s ease;
}

.kt-quiz__option:hover {
    border-color: var(--kt-blue);
}

.kt-quiz__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Радиокнопка из макета: кольцо 22 и точка 10 внутри */
.kt-quiz__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 1px solid var(--kt-border);
    border-radius: 11px;
    background: #fff;
}

.kt-quiz__mark::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 11px;
    background: transparent;
}

.kt-quiz__option:has(input:checked) {
    border-color: var(--kt-blue);
}

.kt-quiz__option:has(input:checked) .kt-quiz__mark {
    border-color: #C0D1FF;
    background: transparent;
}

.kt-quiz__option:has(input:checked) .kt-quiz__mark::before {
    background: var(--kt-blue);
}

.kt-quiz__option:has(input:focus-visible) {
    outline: 2px solid var(--kt-blue);
    outline-offset: 2px;
}

/* Экран контактов */
.kt-quiz__fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kt-quiz__field {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 72px;
    padding: 12px 30px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 16px;
    background: #fff;
    transition: border-color .18s ease;
}

.kt-quiz__field:focus-within,
.kt-quiz__field.is-filled {
    border-color: var(--kt-blue);
}

.kt-quiz__field-label {
    display: none;
    font-size: var(--kt-body-s);
    line-height: 1.2;
    color: #717171;
}

.kt-quiz__field.is-filled .kt-quiz__field-label {
    display: block;
}

.kt-quiz__field input {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--kt-lead);
    line-height: 1.2;
    color: var(--kt-ink);
}

.kt-quiz__field input:focus {
    outline: none;
}

.kt-quiz__field input::placeholder {
    color: #85878D;
}

.kt-quiz__check {
    position: absolute;
    top: 50%;
    right: 30px;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    color: var(--kt-blue);
    opacity: 0;
    transition: opacity .18s ease;
}

.kt-quiz__field.is-filled .kt-quiz__check {
    opacity: 1;
}

.kt-quiz__consent {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: #6A6F75;
}

.kt-quiz__consent a {
    color: var(--kt-blue);
}

.kt-quiz__error {
    margin: 0;
    font-size: var(--kt-body-s);
    color: #E5484D;
}

.kt-quiz__error[hidden] {
    display: none;
}

/* Ловушка для ботов — вне потока и вне доступа с клавиатуры */
.kt-quiz__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.kt-quiz__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.kt-quiz__back {
    width: 62px;
    padding: 24px 20px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 30px;
    background: transparent;
    font: inherit;
    font-size: var(--kt-body);
    font-weight: 500;
    line-height: 1.2;
    color: rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}

.kt-quiz__back:hover:not(:disabled) {
    border-color: var(--kt-ink);
    color: var(--kt-ink);
}

.kt-quiz__back:disabled {
    opacity: .4;
    cursor: default;
}

.kt-quiz__next {
    padding: 18px 32px;
    border: 0;
    border-radius: var(--kt-r-pill);
    background: var(--kt-blue);
    font: inherit;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: #fff;
    cursor: pointer;
    transition: background-color .18s ease;
}

.kt-quiz__next:hover:not(:disabled) {
    background: var(--kt-blue-dark);
}

.kt-quiz__next:disabled {
    opacity: .6;
    cursor: default;
}

/* Экран благодарности */
.kt-quiz__done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 42px;
    max-width: 832px;
    margin: 0 auto;
    text-align: center;
}

.kt-quiz__done-title {
    font-size: var(--kt-h2);
    line-height: 1;
    color: var(--kt-blue);
}

.kt-quiz__done-lead {
    margin: 10px 0 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .6;
}

.kt-quiz__done-call {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--kt-ink);
    opacity: .6;
}

.kt-quiz__done-call p {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
}

.kt-quiz__done-phone {
    font-family: var(--kt-font-head);
    font-size: var(--kt-h3);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

@media (max-width: 1023px) {
    .kt-quiz {
        padding: 20px var(--kt-gutter);
    }

    .kt-quiz__card {
        gap: 24px;
        padding: 20px;
    }

    .kt-quiz__card--done {
        padding-bottom: 40px;
    }

    .kt-quiz__step {
        gap: 24px;
    }

    .kt-quiz__option {
        min-height: 56px;
        font-size: var(--kt-body);
    }

    .kt-quiz__field {
        min-height: 64px;
        padding: 10px 18px;
    }

    .kt-quiz__field input {
        font-size: var(--kt-body);
    }

    .kt-quiz__check {
        right: 18px;
    }

    .kt-quiz__consent,
    .kt-quiz__counter {
        font-size: var(--kt-body-s);
    }

    .kt-quiz__back {
        width: 52px;
        padding: 16px 12px;
    }

    .kt-quiz__next {
        /* В поп-апе кнопка тянется во всю ширину, во встроенном тесте
           в макете она по содержимому — см. .kt-quiz-inline ниже. */
        flex: 1;
        padding: 16px 20px;
        font-size: var(--kt-body-s);
    }

    .kt-quiz-inline .kt-quiz__next {
        flex: 0 0 auto;
    }

    /* В мобильном макете (1:5659) подпись «Проверьте себя за минуту» стоит
       НАД плашкой шага, на десктопе — наоборот. Меняем порядок стилями,
       как и в блоке экспресс-диагностики. */
    .kt-st__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .kt-st__badge {
        order: 2;
    }

    .kt-st__hint {
        order: 1;
    }

    .kt-quiz__done {
        gap: 24px;
    }
}

/* ─────────────────────────────────────────────────────────────
   Секция 3 «Селф-тест» — макет 1:1560.
   Синий блок: слева текст, справа карточка с тем же тестом.
   ───────────────────────────────────────────────────────────── */
.kt-st {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--kt-section-y) var(--kt-section-x);
    border-radius: var(--kt-r-md) var(--kt-r-md) 0 0;
    background: var(--kt-blue);
    color: #fff;
}

/* Декоративное свечение из макета: absolute, за содержимым */
.kt-st__bg {
    position: absolute;
    top: 40px;
    left: -389px;
    z-index: -1;
    width: 1366px;
    max-width: none;
    pointer-events: none;
}

.kt-st__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
}

/* Обязательная пара к display: авторский display перебивает [hidden] из
   стилей браузера, и элемент остаётся в потоке. Без этого блок теста
   продолжал занимать место под экраном благодарности. */
.kt-st__inner[hidden] {
    display: none;
}

.kt-st__text,
.kt-st__card {
    flex: 1 1 420px;
}

.kt-st__text {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.kt-st__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.kt-st__badge {
    padding: 12px 24px;
    border-radius: 50px;
    background: #F1F5FF;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-blue);
}

.kt-st__hint {
    font-size: var(--kt-body);
    line-height: 1.2;
    opacity: .6;
}

.kt-st__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kt-st__title {
    font-size: var(--kt-h2);
    line-height: 1;
    color: #fff;
}

.kt-st__lead {
    margin: 0;
    font-size: var(--kt-lead);
    line-height: 1.2;
    opacity: .9;
}

.kt-st__card {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 38px 26px 28px;
    border-radius: var(--kt-r-sm);
    background: #fff;
    color: var(--kt-ink);
}

/* Встроенная карточка: счётчик справа в верхней строке, вопрос кеглем H3 */
.kt-quiz-inline .kt-quiz__counter {
    margin: 0;
    text-align: right;
}

.kt-quiz-inline .kt-quiz__question {
    font-size: var(--kt-h3);
    font-weight: 700;
}

.kt-quiz-inline .kt-quiz__option {
    align-items: flex-start;
    min-height: 0;
    padding: 20px 12px 22px;
    border-radius: 14px;
    font-size: var(--kt-body);
}

.kt-quiz-inline .kt-quiz__option-text {
    opacity: .8;
}

.kt-quiz-inline .kt-quiz__field input,
.kt-quiz-inline .kt-quiz__consent {
    font-size: var(--kt-body);
}

.kt-quiz-inline .kt-quiz__done {
    gap: 12px;
    max-width: none;
}

.kt-quiz-inline .kt-quiz__done[hidden] {
    display: none;
}

.kt-quiz-inline .kt-quiz__done-title {
    margin: 0;
    font-family: var(--kt-font-head);
    font-size: var(--kt-h3);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--kt-blue);
}

.kt-quiz-inline .kt-quiz__done-lead {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .6;
}

/* Круглая кнопка «назад» с иконкой — вариант из этой секции */
.kt-quiz__back--round {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    padding: 15px;
    border-radius: var(--kt-r-pill);
    color: rgba(0, 0, 0, .35);
}

.kt-quiz__back--round svg {
    width: 100%;
    height: 100%;
}

.kt-quiz__next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.kt-quiz__next svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

@media (max-width: 1023px) {
    .kt-st {
        border-radius: var(--kt-r-lg) var(--kt-r-lg) 0 0;
    }

    .kt-st__inner {
        gap: 32px;
    }

    .kt-st__card {
        padding: 24px 20px;
        gap: 24px;
    }

    .kt-st__bg {
        top: 0;
        left: -60%;
        width: 220%;
    }

    .kt-quiz-inline .kt-quiz__option {
        padding: 16px 12px;
    }

    .kt-quiz__back--round {
        width: 52px;
        height: 52px;
        padding: 13px;
    }
}

/* ─────────────────────────────────────────────────────────────
   Секция 4 «Бесплатная экспресс-диагностика» — макет 1:1601
   ───────────────────────────────────────────────────────────── */
.kt-exp {
    display: flex;
    flex-direction: column;
    gap: 42px;
    padding-inline: var(--kt-section-x);
    border-bottom: 1px solid var(--kt-border);
}

.kt-exp__head {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.kt-exp__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.kt-exp__badge {
    padding: 12px 24px;
    border-radius: 50px;
    background: #F1F5FF;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-blue);
}

.kt-exp__time {
    font-size: var(--kt-body);
    line-height: 1.2;
    color: #85878D;
}

.kt-exp__title-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kt-exp__title {
    font-size: var(--kt-h2);
    line-height: 1;
    color: var(--kt-blue);
}

.kt-exp__lead {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .6;
}

.kt-exp__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kt-exp__subtitle {
    font-size: var(--kt-h3);
    font-weight: 700;
    line-height: 1;
    color: #141517;
}

.kt-exp__cards {
    display: flex;
    border: 1px solid var(--kt-border);
    border-radius: var(--kt-r-sm);
}

.kt-exp__card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
    padding: 24px;
    border-inline-end: 1px solid var(--kt-border);
}

.kt-exp__card:last-child {
    border-inline-end: 0;
}

.kt-exp__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    padding: 14px;
    border-radius: 10px;
    background: #F1F5FF;
    color: var(--kt-blue);
}

.kt-exp__card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kt-exp__card-title {
    font-size: var(--kt-h4);
    line-height: 1;
}

.kt-exp__card-lead {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .8;
}

.kt-exp__cta {
    align-self: flex-start;
    padding: 18px 32px;
    font-size: var(--kt-body);
}

@media (max-width: 1023px) {
    .kt-exp {
        gap: 32px;
    }

    .kt-exp__head {
        gap: 24px;
    }

    .kt-exp__br {
        display: none;
    }

    /* Четыре карточки в ряд на телефоне не помещаются — в столбец,
       разделители из вертикальных становятся горизонтальными. */
    .kt-exp__cards {
        flex-direction: column;
    }

    /* В мобильном макете «15–20 минут» стоит над плашкой шага.
       Меняем порядок стилями: на десктопе он обратный, разметку не трогаем. */
    .kt-exp__badge {
        order: 2;
    }

    .kt-exp__time {
        order: 1;
    }

    .kt-exp__card {
        flex: none;
        min-height: 204px;
        gap: 16px;
        padding: 20px;
        border-inline-end: 0;
        border-bottom: 1px solid var(--kt-border);
    }

    .kt-exp__card:last-child {
        border-bottom: 0;
    }

    .kt-exp__icon {
        width: 52px;
        height: 52px;
        padding: 12px;
    }

    .kt-exp__cta {
        align-self: stretch;
        /* Надпись должна лечь в одну строку. При падинге 32 не хватало
           одного пикселя (287 текста против 286 свободных), поэтому
           боковые падинги 20. Размер держим 16, как в макете, и ужимаем
           только на экранах уже 390, где 16 физически не помещается. */
        padding-inline: 20px;
        font-size: min(16px, 4.1vw);
        white-space: nowrap;
        text-align: center;
    }
}

/* ─────────────────────────────────────────────────────────────
   Секция 5 «Комплексная диагностика катаракты» — макет 1:1692
   ───────────────────────────────────────────────────────────── */
.kt-cmp {
    display: flex;
    flex-direction: column;
    gap: 42px;
    padding: var(--kt-section-y) var(--kt-section-x);
    border-radius: 0 0 var(--kt-r-md) var(--kt-r-md);
    background: var(--kt-blue);
    color: #fff;
}

.kt-cmp__main {
    display: flex;
    align-items: stretch;
    gap: 48px;
}

.kt-cmp__text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    /* Ровно половина, а не `flex: 1 1 0`: при равном flex-grow колонки всё
       равно делились 540/592 из-за контента карточки, и левой не хватало
       ширины на два столбца с галочками. В макете половины равные. */
    flex: 0 0 calc(50% - 24px);
    min-width: 0;
}

.kt-cmp__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

.kt-cmp__badge {
    padding: 12px 24px;
    border-radius: 50px;
    background: #F1F5FF;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-blue);
}

.kt-cmp__title-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kt-cmp__title {
    max-width: 567px;
    font-size: var(--kt-h2);
    line-height: 1;
    color: #fff;
}

.kt-cmp__lead {
    margin: 0;
    font-size: var(--kt-lead);
    line-height: 1.2;
    opacity: .9;
}

/* Два столбца, как в макете. Сетка, а не перенос по фиксированной ширине:
   так второй столбец не схлопывается, если колонка чуть уже расчётной. */
.kt-cmp__checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 21px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kt-cmp__check {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--kt-font-head);
    font-size: var(--kt-body);
    font-weight: 600;
    /* В макете 1.0, но пункты в две строки при таком интерлиньяже слипаются.
       Аудитория лендинга — пожилые, читаемость важнее буквальности. */
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.kt-cmp__check-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    padding: 5px;
    border-radius: 13px;
    background: #F1F5FF;
    color: var(--kt-blue);
}

.kt-cmp__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    flex: 0 0 calc(50% - 24px);
    min-width: 0;
    padding: 38px 26px 28px;
    border-radius: var(--kt-r-sm);
    background: #fff;
    color: var(--kt-ink);
}

.kt-cmp__price-box {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.kt-cmp__card-title {
    margin: 0;
    font-family: var(--kt-font-head);
    font-size: var(--kt-body);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #141517;
}

.kt-cmp__price {
    margin: 0;
    font-family: var(--kt-font-head);
    font-size: var(--kt-h2);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--kt-blue);
}

.kt-cmp__rows {
    margin: 0;
}

.kt-cmp__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 24px;
    border-bottom: 1px solid #EEF0F3;
}

.kt-cmp__row:last-child {
    border-bottom: 0;
}

.kt-cmp__row dt {
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .8;
}

.kt-cmp__row dd {
    margin: 0;
    font-family: var(--kt-font-head);
    font-size: var(--kt-body);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-align: right;
    color: #141517;
}

.kt-cmp__cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kt-cmp__btn {
    padding: 18px 32px;
    font-size: var(--kt-body);
}

.kt-cmp__note {
    margin: 0;
    font-size: var(--kt-body-s);
    line-height: 1.2;
    text-align: left;
    color: var(--kt-ink);
    opacity: .8;
}

/* Плашка про скидку 3% */
.kt-cmp__promo {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 146px;
    padding: 16px 32px;
    border-radius: var(--kt-r-sm);
    background: #fff;
    overflow: hidden;
}

/* Два абзаца стоят вплотную — на десктопе это выглядит как один блок
   с переносом, каким он и был до разделения. */
.kt-cmp__promo-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.kt-cmp__promo-text,
.kt-cmp__promo-path {
    margin: 0;
    max-width: 1132px;
    font-family: var(--kt-font-head);
    font-size: var(--kt-h3);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #141517;
}

.kt-cmp__promo-text > span {
    color: var(--kt-blue);
}

/* Двоеточие есть только в мобильном макете. */
.kt-cmp__colon {
    display: none;
}

/* Декоративная графика из макета: висит справа, за текстом */
.kt-cmp__promo-decor {
    position: absolute;
    top: -75px;
    right: 32px;
    width: 324px;
    height: auto;
    pointer-events: none;
}

@media (max-width: 1279px) {
    .kt-cmp__promo-decor {
        opacity: .5;
    }
}

@media (max-width: 1023px) {
    .kt-cmp {
        gap: 32px;
        border-radius: 0 0 var(--kt-r-lg) var(--kt-r-lg);
    }

    .kt-cmp__main {
        flex-direction: column;
        gap: 32px;
    }

    .kt-cmp__text,
    .kt-cmp__card {
        flex: none;
    }

    .kt-cmp__text {
        gap: 32px;
    }

    .kt-cmp__head {
        gap: 24px;
    }

    .kt-cmp__checks {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .kt-cmp__card {
        padding: 24px 20px;
    }

    .kt-cmp__row {
        padding-block: 16px;
    }

    /* Макет 1:3483: карточка 298 высотой, текст сверху, декорация снизу справа. */
    .kt-cmp__promo {
        align-items: flex-start;
        min-height: 298px;
        padding: 32px 26px;
    }

    .kt-cmp__promo-body {
        gap: 24px;
    }

    .kt-cmp__promo-text {
        font-size: 24px;
        font-weight: 600;
    }

    /* Путь набран обычным начертанием и мельче — так в мобильном макете. */
    .kt-cmp__promo-path {
        font-family: var(--kt-font-body);
        font-size: var(--kt-lead);
        font-weight: 400;
        line-height: 1.2;
        letter-spacing: 0;
        color: var(--kt-ink);
        opacity: .8;
    }

    .kt-cmp__colon {
        display: inline;
    }

    /* Декорация в мобильном макете крупнее и уходит за правый нижний угол:
       группа 391×405 при карточке 350 со сдвигом 128 / 51. */
    .kt-cmp__promo-decor {
        top: 51px;
        right: auto;
        left: 36.57%;
        width: 111.73%;
        /* Общий сброс ограничивает картинки шириной родителя, а эта по макету
           шире карточки и уходит за её правый край. */
        max-width: none;
        opacity: 1;
    }
}

/* Перенос в строке «При операции» — только на десктопе: на телефоне
   карточка узкая и лишний разрыв ломает и без того короткую строку. */
.kt-cmp__br-d {
    display: inline;
}

@media (max-width: 1023px) {
    .kt-cmp__br-d {
        display: none;
    }
}

/* ─────────────────────────────────────────────────────────────
   Секция 6 «Выбираете операцию для старшего родственника?» — макет 1:1818
   ───────────────────────────────────────────────────────────── */
.kt-fam {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--kt-section-y) var(--kt-section-x);
    background: #fff;
}

/* Фото в макете шире кадра и сдвинуто влево: 1601 при 1440 и x = -32 */
.kt-fam__bg {
    position: absolute;
    top: 8px;
    left: -2.22%;
    z-index: -1;
    width: 111.18%;
    pointer-events: none;
}

/* Обязательно width: 100% у самой картинки. Общий сброс задаёт только
   max-width, поэтому на экранах шире ~1440 <picture> растягивался, а <img>
   оставался в своих 1601px — справа оставалась белая полоса. */
.kt-fam__bg img {
    width: 100%;
}

.kt-fam__row {
    display: flex;
    align-items: stretch;
    gap: 48px;
}

.kt-fam__left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    /* Ровные половины: см. правку в блоке комплексной диагностики. */
    flex: 0 0 calc(50% - 24px);
    min-width: 0;
}

.kt-fam__head {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.kt-fam__eyebrow {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .6;
}

.kt-fam__title {
    font-size: var(--kt-h2);
    line-height: 1;
    color: var(--kt-blue);
}

.kt-fam__cta {
    padding: 18px 32px;
    font-size: var(--kt-body);
}

.kt-fam__memo {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 0 0 calc(50% - 24px);
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--kt-border);
    border-radius: 16px;
    background: #fff;
}

.kt-fam__memo-title {
    font-size: var(--kt-h4);
    line-height: 1.1;
    color: #141517;
}

.kt-fam__facts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kt-fam__fact {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-block: 21px;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .8;
}

/* Разделитель в макете — линия, растворяющаяся к краям */
.kt-fam__fact + .kt-fam__fact {
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, rgba(228, 230, 234, .15) 0%, rgba(228, 230, 234, 1) 50%, rgba(228, 230, 234, .15) 100%) 1;
    border-inline: 0;
    border-bottom: 0;
}

.kt-fam__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    padding: 14px;
    border-radius: 10px;
    background: #F1F5FF;
    color: var(--kt-blue);
    opacity: 1;
}

@media (max-width: 1023px) {
    .kt-fam__row {
        flex-direction: column;
        gap: 32px;
    }

    .kt-fam__left,
    .kt-fam__memo {
        flex: none;
    }

    .kt-fam__row {
        gap: 48px;
    }

    /* Макет 1:3535: колонка фиксированной высоты, заголовок сверху, кнопка
       внизу, между ними просвечивает фотография. */
    .kt-fam__left {
        min-height: 556px;
        gap: 24px;
    }

    .kt-fam__head {
        gap: 20px;
    }

    .kt-fam__cta {
        align-self: stretch;
        text-align: center;
    }

    .kt-fam__memo {
        padding: 24px;
    }

    /* Разделители идут во всю ширину карточки, поэтому список выходит
       за её падинги. */
    .kt-fam__facts {
        margin-inline: -24px;
    }

    /* В мобильном макете (1:3545) иконка стоит НАД текстом, а не слева. */
    .kt-fam__fact {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 24px;
        border-bottom: 1px solid var(--kt-border);
    }

    .kt-fam__fact + .kt-fam__fact {
        border-top: 0;
        border-image: none;
    }

    .kt-fam__fact:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .kt-fam__icon {
        width: 60px;
        height: 60px;
        padding: 14px;
    }

    .kt-fam__br {
        display: none;
    }

    /* Фото есть и на телефоне, просто кадр другой: 1139 при экране 390
       со сдвигом -91 по X и 76 по Y (макет 1:3533). */
    .kt-fam__bg {
        top: 76px;
        left: -23.33%;
        width: 292.05%;
        max-width: none;
    }
}

/* ─────────────────────────────────────────────────────────────
   Секция 7 «Как вы будете видеть» — макет 1:2008.
   Сравнение до/после: одна фотография, левая половина размыта.
   ───────────────────────────────────────────────────────────── */
.kt-vis {
    display: flex;
    flex-direction: column;
    gap: 42px;
    padding-inline: var(--kt-section-x);
}

.kt-vis__top {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kt-vis__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kt-vis__title {
    font-size: var(--kt-h2);
    line-height: 1;
    color: var(--kt-blue);
}

.kt-vis__lead {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .6;
}

.kt-vis__sim {
    --kt-compare: 47.6%;
    position: relative;
    height: 489px;
    border: 1px solid var(--kt-border);
    border-radius: var(--kt-r-sm);
    background: var(--kt-bg-mute);
    overflow: hidden;
    cursor: col-resize;
    user-select: none;
}

.kt-vis__photo {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .25s ease;
}

.kt-vis__photo.is-active {
    opacity: 1;
}

.kt-vis__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* В макете картинка 1180×921 лежит в кадре 489 со сдвигом -241:
       видимая полоса 241…730, её центр — 52.7%, то есть кадр отцентрован
       по вертикали. Раньше стояло 26% — ошибка пересчёта. */
    object-position: 50% 52.7%;
}

/* Левая часть — как видит человек с катарактой: размытие и лёгкая пелена.
   Ширина части и есть положение шторки. */
.kt-vis__before {
    position: absolute;
    inset: 0;
    width: var(--kt-compare);
    border-right: 1px solid #fff;
    backdrop-filter: blur(7.5px);
    background: rgba(255, 255, 255, .05);
    overflow: hidden;
}

.kt-vis__chip {
    position: absolute;
    bottom: 14px;
    padding: 12px 24px;
    border-radius: 50px;
    background: rgba(0, 0, 0, .09);
    backdrop-filter: blur(25px);
    font-size: var(--kt-body);
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
}

.kt-vis__chip b {
    font-weight: 700;
}

.kt-vis__chip--before {
    left: 14px;
}

.kt-vis__chip--after {
    right: 14px;
}

.kt-vis__handle {
    position: absolute;
    top: 50%;
    left: var(--kt-compare);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 15px;
    border: 0;
    border-radius: var(--kt-r-pill);
    background: #fff;
    transform: translate(-50%, -50%);
    cursor: col-resize;
    touch-action: none;
}

.kt-vis__handle:focus-visible {
    outline: 2px solid var(--kt-blue);
    outline-offset: 3px;
}

.kt-vis__handle img {
    width: 24px;
    height: 21px;
}

.kt-vis__scenes {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kt-vis__scene {
    padding: 12px 24px;
    border: 1px solid var(--kt-border);
    border-radius: 50px;
    background: #fff;
    font: inherit;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .8;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.kt-vis__scene:hover {
    border-color: var(--kt-blue);
}

.kt-vis__scene.is-active {
    border-color: transparent;
    background: #F1F5FF;
    color: var(--kt-blue);
    opacity: 1;
}

/* Четыре карточки типов линз — та же рамка, что в «Что вы получите» */
.kt-vis__lenses {
    display: flex;
    border: 1px solid var(--kt-border);
    border-radius: var(--kt-r-sm);
}

/* Выпадающий список сцен — только на телефоне (макет 1:3748). */
.kt-vis__picker {
    display: none;
}

.kt-vis__picker-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.kt-vis__lens {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
    padding: 24px;
    border-inline-end: 1px solid var(--kt-border);
}

.kt-vis__lens:last-child {
    border-inline-end: 0;
}

.kt-vis__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    padding: 14px;
    border-radius: 10px;
    background: #F1F5FF;
    color: var(--kt-blue);
}

.kt-vis__lens-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kt-vis__lens-title {
    font-size: var(--kt-h4);
    line-height: 1;
}

.kt-vis__lens-lead {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .6;
}

@media (max-width: 1023px) {
    .kt-vis {
        gap: 32px;
    }

    .kt-vis__br {
        display: none;
    }

    .kt-vis__sim {
        height: 320px;
    }

    .kt-vis__scene {
        padding: 8px 14px;
        font-size: var(--kt-body-s);
    }

    /* Две подписи на 390 не расходятся по краям: сужаем и уменьшаем кегль,
       иначе они наезжают друг на друга посередине. */
    .kt-vis__chip {
        bottom: 10px;
        padding: 6px 12px;
        white-space: normal;
        max-width: 40%;
        font-size: var(--kt-small);
        line-height: 1.15;
    }

    .kt-vis__chip--before {
        left: 10px;
    }

    .kt-vis__chip--after {
        right: 10px;
    }

    .kt-vis__scenes {
        top: 10px;
        left: 10px;
        right: 10px;
    }

    .kt-vis__lenses {
        flex-direction: column;
    }

    /* Четыре плашки закрывали пол-фотографии — вместо них один список.
       Подписи «Сейчас» / «После операции» на телефоне тоже убраны:
       на узком кадре они занимали нижнюю треть снимка. */
    .kt-vis__scenes,
    .kt-vis__chip {
        display: none;
    }

    .kt-vis__picker {
        position: absolute;
        top: 14px;
        left: 14px;
        right: 14px;
        z-index: 3;
        display: flex;
        align-items: center;
    }

    .kt-vis__select {
        width: 100%;
        padding: 12px 48px 12px 24px;
        border: 0;
        border-radius: 50px;
        background: #F1F5FF;
        font: inherit;
        font-size: var(--kt-lead);
        line-height: 1.2;
        color: var(--kt-blue);
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
    }

    .kt-vis__select:focus-visible {
        outline: 2px solid var(--kt-blue);
        outline-offset: 2px;
    }

    .kt-vis__picker-arrow {
        position: absolute;
        right: 22px;
        width: 21px;
        height: 21px;
        color: var(--kt-blue);
        pointer-events: none;
    }

    .kt-vis__lens {
        min-height: 204px;
        flex: none;
        gap: 16px;
        padding: 20px;
        border-inline-end: 0;
        border-bottom: 1px solid var(--kt-border);
    }

    .kt-vis__lens:last-child {
        border-bottom: 0;
    }

    .kt-vis__icon {
        width: 52px;
        height: 52px;
        padding: 12px;
    }
}

/* ─────────────────────────────────────────────────────────────
   Секция 8 «Сколько это стоит» — макет 1:2079
   ───────────────────────────────────────────────────────────── */
.kt-price {
    display: flex;
    flex-direction: column;
    gap: 42px;
    padding-inline: var(--kt-section-x);
}

.kt-price__top {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kt-price__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kt-price__title {
    font-size: var(--kt-h2);
    line-height: 1;
    color: var(--kt-blue);
}

.kt-price__lead {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .6;
}

/* Карточки цен: фотоподложка, белая плашка прижата к низу */
.kt-price__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.kt-price__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 456px;
    padding: 8px;
    border: 1px solid var(--kt-border);
    border-radius: var(--kt-r-sm);
    background: var(--kt-card-bg) center / cover no-repeat, var(--kt-bg-mute);
    overflow: hidden;
}

/* Корона привязана к белой плашке, а не к карточке: плашка на мобильной
   ниже, и от карточки корона улетала бы в середину фотографии. */
.kt-price__crown {
    position: absolute;
    top: -20px;
    right: 10px;
    width: 40px;
    height: 40px;
}

.kt-price__plate {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
    min-height: 196px;
    padding: 16px;
    border-radius: 16px;
    background: #fff;
}

.kt-price__amount,
.kt-price__about {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kt-price__from {
    font-family: var(--kt-font-head);
    font-size: var(--kt-body);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--kt-ink);
    opacity: .6;
}

.kt-price__sum {
    font-family: var(--kt-font-head);
    font-size: var(--kt-h3);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--kt-blue);
}

.kt-price__name {
    font-size: var(--kt-h4);
    line-height: 1;
}

.kt-price__desc {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .8;
}

/* Плашка про производителей */
.kt-price__promo {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 146px;
    padding: 16px 32px;
    border-radius: var(--kt-r-sm);
    background: var(--kt-bg-soft);
    overflow: hidden;
}

.kt-price__promo-decor {
    position: absolute;
    top: -153px;
    right: -90px;
    width: 494px;
    height: auto;
    opacity: .6;
    pointer-events: none;
}

.kt-price__promo-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.kt-price__promo-text,
.kt-price__promo-geo {
    position: relative;
    margin: 0;
    max-width: 805px;
    font-family: var(--kt-font-head);
    font-size: var(--kt-h3);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--kt-ink);
}

.kt-price__promo-text > span {
    color: var(--kt-blue);
}

/* «Что входит» и «Финансовые условия» */
.kt-price__cols {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding-top: 12px;
}

.kt-price__col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 0 0 calc(50% - 8px);
    min-width: 0;
    padding-right: 16px;
    border-radius: 14px;
    background: #fff;
}

.kt-price__col-title {
    font-size: var(--kt-h3);
    font-weight: 700;
    line-height: 1;
}

.kt-price__items {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kt-price__item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 277px;
    max-width: 100%;
    font-size: var(--kt-body);
    line-height: 1.15;
    color: var(--kt-ink);
    opacity: .8;
}

.kt-price__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    padding: 11px;
    border-radius: 8px;
    background: #F1F5FF;
    color: var(--kt-blue);
}

.kt-price__note {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .6;
}

@media (max-width: 1279px) {
    .kt-price__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    .kt-price {
        gap: 32px;
    }

    .kt-price__br {
        display: none;
    }

    .kt-price__card {
        min-height: 360px;
    }

    .kt-price__plate {
        min-height: 0;
        padding: 14px;
    }

    /* Карточки уезжают в горизонтальную ленту (макет 1:3838). */
    .kt-price__grid {
        display: flex;
        /* Без scroll-padding снап прижимает карточку к самому краю окна
           прокрутки и боковой отступ съедается: слева в начале ленты,
           справа в конце. */
        scroll-padding-inline: var(--kt-section-x);
        gap: 8px;
        margin-inline: calc(var(--kt-section-x) * -1);
        padding-inline: var(--kt-section-x);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .kt-price__grid::-webkit-scrollbar {
        display: none;
    }

    .kt-price__card {
        flex: 0 0 min(350px, calc(100vw - 40px));
        scroll-snap-align: start;
    }

    /* Макет 1:3888: плашка 298 высотой, текст сверху, заголовок и перечень
       стран разными начертаниями. */
    .kt-price__promo {
        align-items: flex-start;
        min-height: 298px;
        padding: 32px 26px;
    }

    .kt-price__promo-body {
        gap: 24px;
    }

    .kt-price__promo-text {
        font-size: 24px;
        font-weight: 600;
    }

    .kt-price__promo-geo {
        font-family: var(--kt-font-body);
        font-size: var(--kt-lead);
        font-weight: 400;
        line-height: 1.2;
        letter-spacing: 0;
    }

    /* Декорация есть и в мобильном макете (1:3889): 494 при плашке 350,
       сдвиг 26 / 32. max-width сбрасываем — она шире плашки. */
    .kt-price__promo-decor {
        top: 32px;
        right: auto;
        left: 7.43%;
        width: 141.14%;
        max-width: none;
    }

    .kt-price__cols {
        flex-direction: column;
        gap: 24px;
        padding-top: 0;
    }

    .kt-price__col {
        flex: none;
        gap: 16px;
        padding-right: 0;
    }

    .kt-price__item {
        width: 100%;
        gap: 12px;
    }
}

@media (max-width: 600px) {
    .kt-price__grid {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────────────
   Секция 9 «Какая линза подойдёт именно вам» — макет 1:2259
   ───────────────────────────────────────────────────────────── */
.kt-lens {
    display: flex;
    flex-direction: column;
    gap: 42px;
    padding-inline: var(--kt-section-x);
}

.kt-lens__top {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kt-lens__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kt-lens__title {
    font-size: var(--kt-h2);
    line-height: 1;
    color: var(--kt-blue);
}

.kt-lens__lead {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .6;
}

.kt-lens__table-wrap {
    border: 1px solid var(--kt-border);
    border-radius: var(--kt-r-sm);
    background: var(--kt-bg-mute);
    overflow: hidden;
}

.kt-lens__table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.kt-lens__table thead tr {
    background: #F1F5FF;
}

.kt-lens__table th,
.kt-lens__table td {
    padding: 16px 24px;
    font-size: var(--kt-body);
    line-height: 1.2;
    vertical-align: middle;
}

.kt-lens__table thead th {
    padding-block: 21px;
    font-weight: 400;
    color: var(--kt-blue);
}

/* Ширины столбцов из макета: 240 / 293 / 293 / остаток */
.kt-lens__table th:first-child { width: 240px; }
.kt-lens__table th:nth-child(2),
.kt-lens__table th:nth-child(3) { width: 293px; }

.kt-lens__table tbody tr {
    background: #fff;
    border-bottom: 1px solid var(--kt-bg-mute);
}

.kt-lens__table tbody tr:last-child {
    border-bottom: 0;
}

/* Не flex: ячейка должна остаться table-cell, иначе первый столбец
   выравнивается по верху, а остальные по центру строки. */
.kt-lens__table tbody th {
    font-family: var(--kt-font-head);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--kt-ink);
}

.kt-lens__table tbody th span {
    vertical-align: middle;
}

.kt-lens__table tbody td {
    color: var(--kt-ink);
    opacity: .8;
}

.kt-lens__crown {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-inline-end: 12px;
    vertical-align: middle;
}

/* Сноска: строка растянута, текст занимает остаток — значит прижата влево
   (как в блоке «Начните с диагностики»). */
.kt-lens__note {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
}

.kt-lens__note-text {
    opacity: .6;
}

.kt-lens__note-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    padding: 10px;
    border-radius: var(--kt-r-md);
    background: #F1F5FF;
    color: var(--kt-blue);
}

@media (max-width: 1023px) {
    .kt-lens {
        gap: 32px;
    }

    .kt-lens__br {
        display: none;
    }

    /* Таблица прокручивается вбок целиком (макет 1:3974): колонки
       240 / 293 / 293 / остаток, обёртка во всю ширину экрана. */
    /* Обёртка остаётся в колонке контента, как в макете: слева и справа
       те же 20px, что у остального блока, рамка и скругление сохраняются.
       Full-bleed убран — таблица упиралась в самый край экрана. */
    .kt-lens__table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .kt-lens__table-wrap::-webkit-scrollbar {
        display: none;
    }

    .kt-lens__table {
        min-width: 1156px;
    }

    .kt-lens__table th:first-child {
        width: 240px;
    }

    .kt-lens__table th:nth-child(2),
    .kt-lens__table th:nth-child(3) {
        width: 293px;
    }

    .kt-lens__note {
        align-items: flex-start;
        gap: 12px;
        font-size: var(--kt-body-s);
    }

    .kt-lens__note-icon {
        width: 40px;
        height: 40px;
        padding: 8px;
    }
}

/* ─────────────────────────────────────────────────────────────
   Секция 10 «Как это на самом деле» — макет 1:2319
   ───────────────────────────────────────────────────────────── */
.kt-real {
    display: flex;
    flex-direction: column;
    gap: 64px;
    padding-inline: var(--kt-section-x);
}

.kt-real__block {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.kt-real__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kt-real__title {
    font-size: var(--kt-h2);
    line-height: 1;
    color: var(--kt-blue);
}

.kt-real__lead {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .6;
}

.kt-real__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.kt-real__card {
    position: relative;
    min-height: 304px;
    padding: 20px 20px 22px;
    border: 1px solid var(--kt-border);
    border-radius: 14px;
    overflow: hidden;
}

.kt-real__card-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.kt-real__card-title {
    font-size: var(--kt-h3);
    font-weight: 700;
    line-height: 1.05;
    color: #141517;
}

.kt-real__card-title span {
    color: var(--kt-blue);
}

.kt-real__card-lead {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: #6A6F75;
}

/* Иллюстрация прижата к правому нижнему углу и намеренно обрезается краем
   карточки — так в макете. Пересчёт: карточка 223×304, картинка ~210
   выходит вправо на ~50 и вниз на ~58. Держим в долях, чтобы кроп сохранялся
   на любой ширине карточки. */
.kt-real__card-img {
    position: absolute;
    right: -23%;
    bottom: -19%;
    z-index: -1;
    display: block;
    width: 94%;
    pointer-events: none;
}

.kt-real__card-img img {
    width: 100%;
    height: auto;
}

.kt-real__card-text {
    position: relative;
}

.kt-real__subtitle {
    font-size: var(--kt-h3);
    font-weight: 700;
    line-height: 1;
    color: #141517;
}

.kt-real__process {
    display: flex;
    align-items: stretch;
    gap: 32px;
}

/* Заглушка под видео — согласовано с заказчиком */
.kt-real__video {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 660px;
    min-height: 370px;
    padding: 24px;
    border: 1px solid var(--kt-border);
    border-radius: 12px;
    background: var(--kt-bg-mute);
}

.kt-real__video p {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    text-align: center;
    color: #9AA0A7;
}

.kt-real__stages {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
}

.kt-real__line {
    flex-shrink: 0;
    width: 21px;
    height: auto;
    align-self: stretch;
    object-fit: fill;
}

.kt-real__stage-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.kt-real__stage {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px;
    border-radius: 12px;
    background: #fff;
}

.kt-real__stage-title {
    font-size: var(--kt-h3);
    font-weight: 700;
    line-height: 1;
    color: #141517;
}

.kt-real__stage-lead {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: #6A6F75;
}

@media (max-width: 1279px) {
    .kt-real__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .kt-real__video {
        flex: 1 1 0;
        min-height: 300px;
    }
}

@media (max-width: 1023px) {
    .kt-real {
        gap: 42px;
    }

    .kt-real__block {
        gap: 24px;
    }

    .kt-real__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .kt-real__card {
        min-height: 240px;
        padding: 16px 16px 18px;
    }

    .kt-real__process {
        flex-direction: column;
        gap: 24px;
    }

    .kt-real__video {
        flex: none;
        min-height: 200px;
        padding: 20px;
    }

    /* Вертикальная линия-таймлайн на узком экране не нужна */
    .kt-real__line {
        display: none;
    }

    .kt-real__stage {
        padding: 18px;
        border: 1px solid var(--kt-border);
    }
}

/* На телефоне карточки идут по одной — так в мобильном макете. */
@media (max-width: 767px) {
    /* Макет 1:4133: вертикальная линия-таймлайн есть и на телефоне,
       карточки без рамки, падинг 22, заголовок 26, текст 18. */
    .kt-real__line {
        display: block;
    }

    .kt-real__stage {
        padding: 22px;
        border: 0;
    }

    .kt-real__stage-title {
        font-size: 26px;
        font-weight: 600;
    }

    .kt-real__stage-lead {
        font-size: var(--kt-lead);
    }

    .kt-real__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Макет 1:4085: карточка 210 высотой, текст во всю ширину сверху,
       иллюстрация крупная и уходит за правый нижний угол. Раньше текст
       был зажат в левую половину, а картинка сидела мелко в углу. */
    .kt-real__card {
        min-height: 210px;
        padding: 20px 20px 22px;
    }

    .kt-real__card-title {
        font-size: 26px;
    }

    .kt-real__card-lead {
        font-size: var(--kt-lead);
        color: #6A6F75;
        opacity: 1;
    }

    .kt-real__card-img {
        right: -20px;
        bottom: -64px;
        width: 60%;
    }

    /* На телефоне заголовок помещается в строку, как в макете. */
    .kt-real__br-d {
        display: none;
    }
}

/* ─────────────────────────────────────────────────────────────
   Секция 11 «Платно или по ОМС» — макет 1:2461 / 1:4167
   ───────────────────────────────────────────────────────────── */
.kt-oms {
    display: flex;
    flex-direction: column;
    gap: 42px;
    padding-inline: var(--kt-section-x);
    background: var(--kt-bg);
}

.kt-oms__top {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kt-oms__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kt-oms__title {
    font-size: var(--kt-h2);
    line-height: 1;
    color: var(--kt-blue);
}

.kt-oms__lead {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .6;
}

.kt-oms__table-wrap {
    border: 1px solid var(--kt-border);
    border-radius: var(--kt-r-sm);
    background: var(--kt-bg-mute);
    overflow: hidden;
}

.kt-oms__table {
    width: 100%;
    /* fixed: два правых столбца в макете делят остаток поровну (440 / 440),
       при auto-раскладке ширина уезжает вслед за длиной текста. */
    table-layout: fixed;
    border-collapse: collapse;
    text-align: left;
}

.kt-oms__table thead tr {
    background: #F1F5FF;
}

.kt-oms__table th,
.kt-oms__table td {
    padding: 16px 24px;
    font-size: var(--kt-body);
    line-height: 1.2;
    vertical-align: middle;
}

.kt-oms__table thead th {
    padding-block: 21px;
    font-weight: 400;
    color: var(--kt-blue);
}

/* Первый столбец 300 из макета, два оставшихся делят остаток поровну. */
.kt-oms__table th:first-child {
    width: 300px;
}

.kt-oms__table tbody tr {
    background: #fff;
    border-bottom: 1px solid var(--kt-bg-mute);
}

.kt-oms__table tbody tr:last-child {
    border-bottom: 0;
}

/* Не flex: ячейка должна остаться table-cell, иначе первый столбец
   выравнивается по верху, а остальные по центру строки. */
.kt-oms__table tbody th {
    font-family: var(--kt-font-head);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--kt-ink);
}

.kt-oms__table tbody td {
    color: var(--kt-ink);
    opacity: .8;
}

/* Ячейка «платно»: галочка в слоте 16px, текст через 8px — так в макете. */
.kt-oms__paid {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.kt-oms__check {
    flex-shrink: 0;
    width: 16px;
    height: 7px;
    /* Центрируем галочку по ПЕРВОЙ строке текста: (1.2em − 7px) / 2. */
    margin-top: calc((1.2em - 7px) / 2);
    color: var(--kt-blue);
}

/* Сноска прижата влево — как в блоках «Начните с диагностики» и «Линза». */
.kt-oms__note {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
}

.kt-oms__note-text {
    opacity: .6;
}

.kt-oms__note-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    padding: 10px;
    border-radius: var(--kt-r-md);
    background: #F1F5FF;
    color: var(--kt-blue);
}

@media (max-width: 1023px) {
    .kt-oms {
        gap: 32px;
    }

    .kt-oms__head {
        gap: 4px;
    }

    .kt-oms__br {
        display: none;
    }

    /* Таблица прокручивается вбок целиком (макет 1:4172), как и таблица
       линз: колонки 240 / 293 / остаток, обёртка во всю ширину экрана. */
    /* Обёртка остаётся в колонке контента, как в макете: слева и справа
       те же 20px, что у остального блока, рамка и скругление сохраняются.
       Full-bleed убран — таблица упиралась в самый край экрана. */
    .kt-oms__table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .kt-oms__table-wrap::-webkit-scrollbar {
        display: none;
    }

    .kt-oms__table {
        min-width: 826px;
    }

    .kt-oms__table th:first-child {
        width: 240px;
    }

    .kt-oms__table th:nth-child(2) {
        width: 293px;
    }

    /* Сноска на телефоне колонкой: иконка сверху, текст под ней. */
    .kt-oms__note,
    .kt-lens__note {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        font-size: var(--kt-body-s);
    }

    .kt-oms__note-icon {
        width: 40px;
        height: 40px;
        padding: 8px;
    }
}

/* ─────────────────────────────────────────────────────────────
   Секция 12 «Наши хирурги» — макет 1:2562 / 1:4263
   ───────────────────────────────────────────────────────────── */
.kt-docs {
    display: flex;
    flex-direction: column;
    gap: 42px;
    padding-inline: var(--kt-section-x);
    background: var(--kt-bg);
}

.kt-docs__top {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kt-docs__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kt-docs__title {
    font-size: var(--kt-h2);
    line-height: 1;
    color: var(--kt-blue);
}

.kt-docs__lead {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .6;
}

.kt-docs__grid {
    display: flex;
    gap: 18px;
}

.kt-docs__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Ровно половина колонки: (1180 − 18) / 2 = 581, как в макете. */
    flex: 0 0 calc(50% - 9px);
    height: 812px;
    padding: 24px;
    border: 1px solid var(--kt-border);
    border-radius: var(--kt-r-sm);
    overflow: hidden;
}

.kt-docs__photo,
.kt-docs__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Кадр обрезается только по бокам: высота фото (1216) при масштабе
       под карточку 812 совпадает с её высотой, вертикального запаса нет. */
    object-position: center;
}

/* Матовая плашка поверх фото. */
.kt-docs__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 30px 30px;
    border-radius: var(--kt-r-md);
    background: rgba(255, 255, 255, .74);
    -webkit-backdrop-filter: blur(18px);
            backdrop-filter: blur(18px);
    overflow: visible;
}

/* Контур плашки — градиент от полупрозрачно-белого к нулю, обычной
   рамкой такой не задать: рисуем маской по краю. */
.kt-docs__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .49) 0%, rgba(255, 255, 255, 0) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.kt-docs__waves {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    border-radius: inherit;
    pointer-events: none;
}

.kt-docs__name {
    position: relative;
    margin: 0;
    /* Desk/H5 36 Medium из макета — своей переменной под этот размер нет. */
    font-size: clamp(26px, 2.5vw, 36px);
    font-weight: 500;
    line-height: 1.2;
    color: var(--kt-ink);
}

.kt-docs__role {
    position: relative;
    margin: 0;
    font-size: var(--kt-lead);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .6;
}

/* Круг стажа выходит за плашку на 15px вправо и вверх — так в макете. */
.kt-docs__exp {
    position: absolute;
    top: -15px;
    right: -15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 125px;
    height: 125px;
    margin: 0;
    border-radius: 50%;
    background: var(--kt-blue);
    color: #fff;
    text-align: center;
    letter-spacing: -0.02em;
}

.kt-docs__exp-label {
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
}

.kt-docs__exp-value {
    font-family: var(--kt-font-head);
    font-size: 27px;
    font-weight: 600;
    line-height: 1;
}

/* Блок «Мы отвечаем за результат» */
.kt-docs__promo {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kt-docs__promo-title {
    margin: 0;
    font-size: var(--kt-h3);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--kt-ink);
}

.kt-docs__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.kt-docs__fact {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kt-docs__fact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: #F1F5FF;
    color: var(--kt-blue);
}

.kt-docs__fact-icon .kt-icon {
    width: 32px;
    height: 32px;
}

.kt-docs__fact-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kt-docs__fact-title {
    font-size: var(--kt-h4);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--kt-ink);
}

.kt-docs__fact-text {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .8;
}

.kt-docs__br-m {
    display: none;
}

@media (max-width: 1023px) {
    .kt-docs {
        gap: 32px;
    }

    .kt-docs__head {
        gap: 4px;
    }

    .kt-docs__br-d {
        display: none;
    }

    .kt-docs__br-m {
        display: inline;
    }

    /* Карточки уезжают в горизонтальную ленту — так в мобильном макете.
       Лента во всю ширину экрана, поэтому гасим падинги секции. */
    .kt-docs__grid {
        gap: 8px;
        /* Без scroll-padding снап прижимает карточку к самому краю окна
           прокрутки и боковой отступ съедается. */
        scroll-padding-inline: var(--kt-section-x);
        margin-inline: calc(var(--kt-section-x) * -1);
        padding-inline: var(--kt-section-x);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .kt-docs__grid::-webkit-scrollbar {
        display: none;
    }

    .kt-docs__card {
        flex: 0 0 min(350px, calc(100vw - 40px));
        height: 532px;
        padding: 20px;
        border: 0;
        border-radius: var(--kt-r-md);
        scroll-snap-align: start;
    }

    .kt-docs__panel {
        gap: 8px;
        padding: 16px 20px 20px;
        border-radius: 16px;
        -webkit-backdrop-filter: blur(12px);
                backdrop-filter: blur(12px);
    }

    .kt-docs__panel::before {
        padding: 1px;
    }

    .kt-docs__exp {
        top: -10px;
        right: -10px;
        width: 82px;
        height: 82px;
    }

    .kt-docs__exp-label {
        font-size: 11px;
    }

    .kt-docs__exp-value {
        font-size: 18px;
    }

    /* На телефоне пункты идут списком в общей рамке с разделителями. */
    .kt-docs__facts {
        grid-template-columns: 1fr;
        gap: 0;
        border: 1px solid var(--kt-border);
        border-radius: var(--kt-r-sm);
        overflow: hidden;
    }

    .kt-docs__fact {
        gap: 24px;
        padding: 24px;
        background: #fff;
        border-bottom: 1px solid var(--kt-border);
    }

    .kt-docs__fact:last-child {
        border-bottom: 0;
    }

}

/* ─────────────────────────────────────────────────────────────
   Секция 13 «Сопровождение и возвращение к обычной жизни»
   — макет 1:2796 / 1:4489
   ───────────────────────────────────────────────────────────── */
.kt-care {
    display: flex;
    flex-direction: column;
    gap: 42px;
    padding-inline: var(--kt-section-x);
    background: var(--kt-bg);
}

.kt-care__top {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kt-care__head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kt-care__eyebrow {
    margin: 0;
    font-size: var(--kt-body-s);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .6;
}

.kt-care__title {
    font-size: var(--kt-h2);
    line-height: 1;
    color: var(--kt-blue);
}

.kt-care__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    height: 456px;
}

.kt-care__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 8px;
    border: 1px solid var(--kt-border);
    border-radius: var(--kt-r-sm);
    overflow: hidden;
}

.kt-care__photo,
.kt-care__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Кадр уже обрезан по макету при сборке файла — доводить нечего. */
    object-position: center;
}

.kt-care__plate {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* min-height, а не height: у карточки «Следующий день» подпись в две
       строки, при жёстких 138px её обрезало бы. */
    min-height: 138px;
    padding: 24px 16px 38px;
    border-radius: 16px;
    background: #fff;
}

.kt-care__stage {
    margin: 0;
    font-size: var(--kt-h4);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #141517;
}

.kt-care__when {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .8;
}

.kt-care__notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.kt-care__note {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* У левого пункта в макете лишний отступ справа — чтобы текст не подходил
   вплотную к правой колонке. */
.kt-care__note:first-child {
    padding-right: 16px;
}

.kt-care__note-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: #F1F5FF;
    color: var(--kt-blue);
}

.kt-care__note-icon .kt-icon {
    width: 32px;
    height: 32px;
}

.kt-care__note-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kt-care__note-title {
    margin: 0;
    font-size: var(--kt-h3);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #141517;
}

.kt-care__note-text {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .8;
}

.kt-care__br-m {
    display: none;
}

@media (max-width: 1023px) {
    .kt-care {
        gap: 32px;
    }

    .kt-care__head {
        gap: 4px;
    }

    .kt-care__eyebrow {
        font-size: var(--kt-body);
    }

    .kt-care__br-m {
        display: inline;
    }

    /* Карточки уезжают в горизонтальную ленту во всю ширину экрана. */
    .kt-care__grid {
        display: flex;
        /* Без scroll-padding снап прижимает карточку к самому краю окна
           прокрутки и боковой отступ съедается: слева в начале ленты,
           справа в конце. */
        scroll-padding-inline: var(--kt-section-x);
        margin-inline: calc(var(--kt-section-x) * -1);
        padding-inline: var(--kt-section-x);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .kt-care__grid::-webkit-scrollbar {
        display: none;
    }

    .kt-care__card {
        flex: 0 0 min(350px, calc(100vw - 40px));
        scroll-snap-align: start;
    }

    .kt-care__plate {
        min-height: 134px;
        padding: 24px 16px;
    }

    .kt-care__notes {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .kt-care__note {
        gap: 24px;
    }

    .kt-care__note:first-child {
        padding-right: 0;
    }

    .kt-care__note-title {
        font-size: var(--kt-h4);
        font-weight: 600;
    }
}

/* ─────────────────────────────────────────────────────────────
   Секция 14 «Спокойствие на весь год после операции»
   — макет 1:2967 / 1:4691
   ───────────────────────────────────────────────────────────── */
.kt-year {
    position: relative;
    padding: var(--kt-section-y) var(--kt-section-x);
    border-radius: var(--kt-r-md);
    background: var(--kt-blue);
    color: #fff;
    overflow: hidden;
}

/* Свечение из макета: 1366×1366, сдвиг −389 по X и +40 по Y от левого
   верхнего угла секции шириной 1440 — переводим в проценты ширины. */
/* Внутри SVG стоит mix-blend-mode: plus-darker — его понимает только Safari,
   в Chrome и Firefox светлый градиент ложится поверх синего как белое пятно
   вместо затемнения. multiply даёт ту же картинку, что в макете.
   То же самое у фона блока селф-теста — файл один и тот же. */
.kt-year__bg,
.kt-st__bg {
    mix-blend-mode: multiply;
}

.kt-year__bg {
    position: absolute;
    top: 2.78%;
    left: -27.01%;
    width: 94.86%;
    height: auto;
    pointer-events: none;
}

.kt-year__inner {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 48px;
}

.kt-year__text {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Ровно половина колонки, как в макете: (1180 − 48) / 2 = 566. */
    flex: 0 0 calc(50% - 24px);
    min-width: 0;
}

.kt-year__eyebrow {
    margin: 0;
    font-size: var(--kt-body);
    font-weight: 500;
    line-height: 1.2;
    opacity: .6;
}

.kt-year__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kt-year__title {
    font-size: var(--kt-h2);
    line-height: 1;
    color: #fff;
}

/* Переносы лида по макету — только на десктопе: на телефоне колонка узкая
   и текст переносится сам. */
.kt-year__br-d {
    display: inline;
}

.kt-year__lead {
    margin: 0;
    font-size: var(--kt-body);
    font-weight: 500;
    line-height: 1.2;
    opacity: .9;
}

.kt-year__card {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex: 0 0 calc(50% - 24px);
    min-width: 0;
    padding: 24px 26px 28px;
    border: 1.5px solid var(--kt-border);
    border-radius: var(--kt-r-sm);
    background: #fff;
    color: var(--kt-ink);
}

.kt-year__badge {
    align-self: flex-start;
    margin: 0;
    padding: 12px 24px;
    border-radius: 50px;
    background: #F1F5FF;
    font-size: var(--kt-body);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--kt-blue);
}

.kt-year__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kt-year__price-box {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Разделитель из макета — не отдельный блок, а нижняя граница. */
    padding-bottom: 24px;
    border-bottom: 1px solid var(--kt-bg-mute);
}

.kt-year__pkg {
    margin: 0;
    font-size: var(--kt-h3);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #141517;
}

.kt-year__price {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 0;
}

.kt-year__sum {
    font-family: var(--kt-font-head);
    font-size: var(--kt-h2);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--kt-blue);
}

.kt-year__per {
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .8;
}

.kt-year__list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kt-year__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: #141517;
}

.kt-year__check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    background: #F1F5FF;
    color: var(--kt-blue);
}

.kt-year__check svg {
    width: 16px;
    height: 11px;
}

.kt-year__cta {
    width: 100%;
    font-size: var(--kt-body);
    padding: 18px 32px;
}

@media (max-width: 1023px) {
    .kt-year {
        padding: var(--kt-section-y) var(--kt-section-x) 20px;
        border-radius: var(--kt-r-lg);
    }

    /* На телефоне свечение крупнее и уходит вверх за край блока. */
    .kt-year__bg {
        top: -105.6%;
        left: 5.13%;
        width: 205.13%;
        opacity: .7;
    }

    .kt-year__inner {
        flex-direction: column;
        gap: 22px;
    }

    .kt-year__text,
    .kt-year__card {
        flex: none;
    }

    .kt-year__text {
        gap: 42px;
    }

    .kt-year__head {
        gap: 4px;
    }

    .kt-year__br-d {
        display: none;
    }

    .kt-year__card {
        gap: 18px;
        padding: 28px 26px;
        border: 0;
    }

    .kt-year__badge {
        font-size: var(--kt-lead);
    }

    .kt-year__pkg {
        font-size: var(--kt-lead);
        font-weight: 600;
        line-height: 1.2;
    }

    .kt-year__price-box {
        padding-bottom: 18px;
    }

    .kt-year__cta {
        padding: 18px 24px;
        font-size: var(--kt-body-s);
    }
}

/* ─────────────────────────────────────────────────────────────
   Секция 15 «Частые вопросы» — макет 1:3020 / 1:4742
   ───────────────────────────────────────────────────────────── */
.kt-faq {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-inline: var(--kt-section-x);
    background: var(--kt-bg);
}

.kt-faq__head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kt-faq__eyebrow {
    margin: 0;
    font-size: var(--kt-body-s);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .6;
}

.kt-faq__title {
    font-size: var(--kt-h2);
    line-height: 1;
    color: var(--kt-blue);
}

.kt-faq__list {
    display: flex;
    flex-direction: column;
}

/* Поле поиска */
.kt-faq__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 30px 18px 16px;
    border: 1px solid rgba(133, 135, 141, .2);
    border-radius: 16px;
    background: #fff;
    transition: border-color .18s ease;
}

.kt-faq__search:focus-within {
    border-color: var(--kt-blue);
}

.kt-faq__search-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #85878D;
}

/* Подпись нужна экранному диктору, глазами её заменяет placeholder. */
.kt-faq__search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.kt-faq__search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
}

.kt-faq__search-input::placeholder {
    color: var(--kt-ink);
    opacity: .6;
}

.kt-faq__search-input:focus {
    outline: none;
}

/* Пункт-гармошка */
.kt-faq__item {
    padding-top: 20px;
    border-bottom: 1px solid rgba(18, 23, 36, .1);
}

.kt-faq__item:last-of-type {
    border-bottom: 0;
}

.kt-faq__q {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Сверху 40 (20 у пункта + 20 здесь) — из макета. Снизу в макете отступ
       давал только раскрытый ответ, поэтому в свёрнутом виде вопрос лежал
       прямо на разделителе. Ставим те же 40, чтобы он был ровно посередине
       между линиями; заодно вырастает область нажатия. */
    padding-block: 20px 40px;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: #141517;
    cursor: pointer;
    list-style: none;
}

/* Штатный треугольник <details> в Safari и Chrome убирается по-разному. */
.kt-faq__q::-webkit-details-marker {
    display: none;
}

.kt-faq__q-text {
    flex: 1 1 auto;
}

.kt-faq__sign {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--kt-ink);
    transition: transform .22s ease;
}

/* У раскрытого пункта отступ снизу берёт на себя сам ответ — иначе
   между вопросом и текстом появился бы двойной зазор. */
.kt-faq__item[open] .kt-faq__q {
    padding-bottom: 0;
}

/* Плюс превращается в крестик поворотом — отдельной иконки не нужно. */
.kt-faq__item[open] .kt-faq__sign {
    transform: rotate(45deg);
}

.kt-faq__item:hover .kt-faq__q,
.kt-faq__item:hover .kt-faq__sign {
    color: var(--kt-blue);
}

.kt-faq__q:focus-visible {
    outline: 2px solid var(--kt-blue);
    outline-offset: 4px;
    border-radius: 4px;
}

.kt-faq__a {
    padding: 12px 56px 20px 0;
    /* Раскрытие анимируем прозрачностью: высоту у <details> плавно
       менять нечем, содержимое в закрытом виде вообще не рендерится. */
    animation: kt-faq-in .22s ease;
}

.kt-faq__a p {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    /* В макете здесь .6 поверх .8 — это ~0,48 и контраст ниже нормы.
       Аудитория блока — люди с плохим зрением, поэтому оставляем .8,
       как у остального текста лендинга. */
    opacity: .8;
}

.kt-faq__a p + p {
    margin-top: 20px;
}

@keyframes kt-faq-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.kt-faq__empty {
    margin: 24px 0 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .8;
}

.kt-faq__empty a {
    color: var(--kt-blue);
    white-space: nowrap;
}

@media (max-width: 1023px) {
    .kt-faq__head {
        gap: 4px;
    }

    .kt-faq__eyebrow {
        font-size: var(--kt-body);
    }

    .kt-faq__a {
        padding-right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kt-faq__a {
        animation: none;
    }

    .kt-faq__sign {
        transition: none;
    }
}

/* ─────────────────────────────────────────────────────────────
   Секция 16 «Начните с диагностики» — форма записи,
   макет 1:3094 / 1:4815
   ───────────────────────────────────────────────────────────── */
.kt-form {
    position: relative;
    padding: var(--kt-section-y) var(--kt-section-x);
    border-bottom: 1px solid var(--kt-border);
    background: var(--kt-bg-soft);
    overflow: hidden;
}

/* Светлая подложка из макета: 1359×1359 со сдвигом +40 / −494 при ширине 1440. */
.kt-form__bg {
    position: absolute;
    top: -34.31%;
    left: 2.78%;
    width: 94.38%;
    height: auto;
    opacity: .6;
    pointer-events: none;
}

.kt-form__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 42px;
}

.kt-form__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.kt-form__title {
    font-size: var(--kt-h2);
    line-height: 1;
    color: var(--kt-blue);
}

.kt-form__lead {
    /* Ширина строки из макета — иначе лид растягивается на все 1180. */
    max-width: 973px;
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .6;
}

.kt-form__form,
.kt-form__done {
    /* Колонка формы из макета. */
    width: min(660px, 100%);
}

.kt-form__form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* См. комментарий у .kt-st__inner[hidden]: без этой пары заполненная форма
   оставалась на экране рядом с благодарностью после отправки. */
.kt-form__form[hidden] {
    display: none;
}

.kt-form__fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kt-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.kt-form__field {
    display: block;
}

/* Подпись нужна экранному диктору: placeholder ему не замена,
   он исчезает при вводе и не всеми читается. */
.kt-form__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.kt-form__field input,
.kt-form__field textarea {
    display: block;
    width: 100%;
    height: 62px;
    padding: 0 30px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 16px;
    background: #fff;
    font: inherit;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    transition: border-color .18s ease;
}

.kt-form__field textarea {
    height: 125px;
    padding: 20px 30px;
    resize: vertical;
}

.kt-form__field input::placeholder,
.kt-form__field textarea::placeholder {
    color: #85878D;
}

.kt-form__field input:focus,
.kt-form__field textarea:focus {
    outline: none;
    border-color: var(--kt-blue);
}

/* Поле-ловушка для ботов: убираем из потока, но не display:none —
   часть ботов такие поля пропускает. */
.kt-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.kt-form__error {
    margin: 0;
    font-size: var(--kt-body-s);
    line-height: 1.2;
    color: #D14343;
}

.kt-form__submit {
    width: 100%;
    padding: 18px 32px;
    font-size: var(--kt-body);
}

.kt-form__consent {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--kt-body-s);
    line-height: 1.2;
    color: #6A6F75;
    text-align: left;
}

.kt-form__consent input,
.kt-quiz__consent input {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--kt-blue);
}

.kt-form__consent a {
    color: var(--kt-blue);
}

.kt-form__done {
    padding: 32px 30px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 16px;
    background: #fff;
    text-align: center;
}

.kt-form__done-title {
    margin: 0 0 12px;
    font-family: var(--kt-font-head);
    font-size: var(--kt-h3);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--kt-ink);
}

.kt-form__done-lead {
    margin: 0;
    font-size: var(--kt-body);
    line-height: 1.2;
    color: var(--kt-ink);
    opacity: .8;
}

.kt-form__done-lead + .kt-form__done-lead {
    margin-top: 8px;
}

@media (max-width: 1023px) {
    /* На телефоне заголовок и лид прижаты влево — так в макете. */
    .kt-form__inner {
        align-items: stretch;
        gap: 24px;
    }

    .kt-form__head {
        align-items: flex-start;
        gap: 4px;
        text-align: left;
    }

    .kt-form__bg {
        top: -46%;
        left: -50%;
        width: 200%;
    }

    /* Имя и фамилия в один столбец: два поля по 165px нечитаемы. */
    .kt-form__row {
        grid-template-columns: 1fr;
    }

    .kt-form__submit {
        padding: 18px 24px;
        font-size: var(--kt-body-s);
    }

    .kt-form__consent {
        text-align: left;
    }
}

/* ─────────────────────────────────────────────────────────────
   Подвал — макет 1:3115 (десктоп) / 1:4834 (мобильная)
   ───────────────────────────────────────────────────────────── */
.kt-footer {
    padding: 72px var(--kt-section-x);
    background: var(--kt-blue-dark);
    color: #fff;
}

.kt-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 42px;
}

/* Верхняя плашка: логотип, телефоны, кнопка */
.kt-footer__top {
    display: flex;
    align-items: center;
    gap: 56px;
    padding: 44px;
    border-radius: var(--kt-r-sm);
    background: var(--kt-blue);
}

.kt-footer__logo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.kt-footer__logo img {
    width: 173px;
}

.kt-footer__logo-sub {
    width: 131px;
}

.kt-footer__phones {
    display: flex;
    gap: 32px;
}

.kt-footer__phone {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.kt-footer__phone-num {
    font-size: var(--kt-body);
    line-height: 1.2;
    color: #fff;
    text-decoration: none;
}

.kt-footer__phone-note {
    font-size: var(--kt-body-s);
    line-height: 1.2;
    color: #fff;
    opacity: .4;
}

/* Иконки чатов у второго номера — только на телефоне, как в макете. */
.kt-footer__chats {
    display: none;
}

.kt-footer__cta {
    flex-shrink: 0;
    margin-left: auto;
    padding: 18px 32px;
    background: #fff;
    color: var(--kt-blue);
    font-size: var(--kt-body);
}

.kt-footer__cta:hover {
    background: #EEF2FF;
}

/* Колонки */
.kt-footer__grid {
    display: flex;
    gap: 56px;
}

.kt-footer__cols {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    /* Ширина блока со списками из макета. */
    flex: 0 0 520px;
}

.kt-footer__col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1 1 0;
    min-width: 0;
}

.kt-footer__col-title {
    margin: 0;
    font-family: var(--kt-font-head);
    font-size: var(--kt-h4);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
}

.kt-footer__links {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kt-footer__links a {
    font-size: var(--kt-body-s);
    line-height: 1.2;
    color: #E3E7F2;
    text-decoration: none;
    transition: opacity .18s ease;
}

.kt-footer__links a:hover {
    opacity: .7;
}

.kt-footer__info {
    display: flex;
    flex-direction: column;
    gap: 42px;
}

.kt-footer__info-row {
    display: flex;
    gap: 61px;
}

.kt-footer__addresses {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kt-footer__addresses li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--kt-body-s);
    line-height: 1.2;
    color: #E3E7F2;
}

.kt-footer__pin {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #fff;
}

.kt-footer__hours {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kt-footer__hours p {
    margin: 0;
    font-size: var(--kt-body-s);
    line-height: 1.2;
    color: #E3E7F2;
}

.kt-footer__social {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kt-footer__social-title {
    margin: 0;
    font-size: var(--kt-body-s);
    line-height: 1.2;
    color: #E3E7F2;
}

.kt-footer__social-links {
    display: flex;
    gap: 8px;
}

.kt-footer__social-links img,
.kt-footer__chats img {
    width: 36px;
    height: 36px;
    transition: opacity .18s ease;
}

.kt-footer__social-links a:hover img,
.kt-footer__chats a:hover img {
    opacity: .8;
}

/* Нижняя строка */
.kt-footer__credit {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .4);
}

.kt-footer__legal {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Ширина абзаца из макета — иначе строка тянется на все 1180. */
    max-width: 925px;
}

.kt-footer__legal p {
    margin: 0;
    font-size: var(--kt-body-s);
    line-height: 1.2;
    color: #E3E7F2;
    opacity: .5;
}

.kt-footer__author {
    margin: 0;
}

.kt-footer__author a {
    font-size: var(--kt-body-s);
    line-height: 1.2;
    color: #E3E7F2;
    opacity: .5;
}

@media (max-width: 1023px) {
    .kt-footer {
        padding: 20px var(--kt-section-x) 58px;
    }

    .kt-footer__top {
        flex-direction: column;
        align-items: stretch;
        gap: 26px;
        padding: 24px;
    }

    .kt-footer__br-d {
        display: none;
    }

    .kt-footer__phones {
        flex-direction: column;
        gap: 16px;
    }

    /* На телефоне у второго номера появляются иконки чатов. */
    /* Уточнение про мессенджеры есть только на десктопе. */
    .kt-footer__note-add {
        display: none;
    }

    .kt-footer__chats {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-top: 8px;
        opacity: .6;
    }

    .kt-footer__chats img {
        width: auto;
        height: 32px;
    }

    .kt-footer__cta {
        margin-left: 0;
        padding: 18px 24px;
        font-size: var(--kt-body-s);
    }

    .kt-footer__grid {
        flex-direction: column;
        gap: 56px;
    }

    .kt-footer__cols {
        flex: none;
    }

    .kt-footer__info {
        gap: 24px;
    }

    .kt-footer__info-row {
        flex-direction: column;
        gap: 24px;
    }

    .kt-footer__social-links img {
        width: 46px;
        height: 46px;
    }
}

/* В мобильном макете (1:4834;315:9933) списки стоят в два столбца и на 390 —
   в один столбец их разворачивать не надо. */

/* ─────────────────────────────────────────────────────────────
   Появление блоков при прокрутке (см. landing.js)

   Кривая cubic-bezier(.22, 1, .36, 1) — быстрый старт и мягкое
   «оседание» в конце: движение заметное, но спокойное. Аудитория
   страницы пожилая, резкие рывки здесь неуместны.
   ───────────────────────────────────────────────────────────── */
.kt-reveal {
    opacity: 0;
    transform: translateY(34px) scale(.97);
    transition: opacity .75s cubic-bezier(.22, 1, .36, 1),
                transform .75s cubic-bezier(.22, 1, .36, 1);
}

.kt-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Заголовок секции идёт мягче карточек и без масштаба. */
.kt-reveal--head {
    transform: translateY(22px);
}

/* Фотография внутри карточки чуть отъезжает — карточка «оживает»,
   а не просто всплывает. Дольше остальных, чтобы движение не обрывалось. */
.kt-docs__card.kt-reveal .kt-docs__photo img,
.kt-care__card.kt-reveal .kt-care__photo img,
.kt-real__card.kt-reveal .kt-real__card-img {
    transform: scale(1.08);
    transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}

.kt-docs__card.kt-reveal.is-in .kt-docs__photo img,
.kt-care__card.kt-reveal.is-in .kt-care__photo img,
.kt-real__card.kt-reveal.is-in .kt-real__card-img {
    transform: none;
}

/* Строки таблиц двигать по вертикали нельзя — поедет разметка ячеек,
   поэтому им только проявление. */
.kt-lens__table .kt-reveal,
.kt-oms__table .kt-reveal {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .kt-reveal,
    .kt-reveal--head {
        opacity: 1;
        transform: none;
        transition: none;
    }
}