/* ==========================================================================
   Атлас Люксо — вёрстка макета Figma «Макет» (node 1:4995)
   Фрейм 1600 × 2829, рабочая колонка 1440 (отступы по 80).

   Базовый слой воспроизводит макет 1:1 при ширине окна 1600px и шире:
   фиксированные размеры заданы через max-width / flex-basis / aspect-ratio,
   поэтому ниже 1600px раскладка сжимается без горизонтальной прокрутки.
   Медиазапросы в конце файла перестраивают её под планшет и телефон.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Базовый сброс
   -------------------------------------------------------------------------- */

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

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-white);
    color: var(--color-ink);
    font-family: var(--font-family);
    font-weight: var(--weight-regular);
    font-style: normal;
}

h1, h2, h3, p, dl, dd, dt {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
}

img, svg {
    display: block;
    max-width: 100%;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   2. Каркас
   -------------------------------------------------------------------------- */

.layout {
    width: 100%;
    max-width: var(--frame-width);
    margin: 0 auto;
    padding-bottom: 44.35px;                /* 2784.65 → 2829 */
    background: var(--color-white);
}

.container {
    width: min(var(--content-width), 100% - var(--gutter) * 2);
    margin: 0 auto;
}

/* Горизонтальные линии во всю ширину фрейма (y = 864 и y = 2727) */
.rule {
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--color-bronze-line);
    opacity: var(--opacity-rule);
}

/* --------------------------------------------------------------------------
   3. Изображения
   Пропорции берутся из макета, поэтому картинка масштабируется без сдвигов.
   -------------------------------------------------------------------------- */

.hero__media,
.card__media,
.engineering__media {
    overflow: hidden;
    background: var(--color-placeholder);
}

.hero__media img,
.card__media img,
.engineering__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   4. Логотип (текстовый знак вместо экспортированного SVG)
   Интервалы в em, чтобы знак пропорционально уменьшался вместе с кеглем:
   при 30px слова занимают 108.5 и 123.11px — как в макете, суммарно 240px.
   -------------------------------------------------------------------------- */

.logo {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.2795em;                          /* 8.386px при 30px */
    color: var(--color-navy);
    font-size: var(--logo-size, 30px);
    font-weight: var(--weight-bold);
    line-height: 0.7563;                    /* 22.69px при 30px */
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.logo:hover {
    opacity: 0.7;
}

.logo__word--atlas {
    letter-spacing: 0.04683em;               /* → 108.5px при 30px */
}

.logo__word--luxo {
    letter-spacing: 0.0244em;                /* → 123.11px при 30px */
}

/* --------------------------------------------------------------------------
   5. Шапка (y = 30, высота 22.69)
   -------------------------------------------------------------------------- */

.header {
    padding-top: 30px;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 22.69px;
}

.header__phone {
    color: var(--color-navy);
    font-size: var(--size-phone);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-flat);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-out);
}

.header__phone:hover {
    color: var(--color-bronze);
}

/* --------------------------------------------------------------------------
   6. Локация + разделитель (y = 101, линия по центру на y = 109)
   -------------------------------------------------------------------------- */

.meta-row {
    display: flex;
    align-items: center;
    min-height: 16px;
    margin-top: 48.31px;                    /* 52.69 → 101 */
}

/* Ширина зафиксирована, чтобы линия начиналась ровно на x = 392.89 */
.meta-row__location {
    flex: 0 1 312.89px;
    color: var(--color-bronze);
    font-size: var(--size-small);
    font-weight: var(--weight-medium);
    line-height: var(--leading-flat);
    white-space: nowrap;
}

.meta-row__rule {
    flex: 1;
    height: 1px;
    background: var(--color-bronze-line);
    opacity: var(--opacity-rule);
}

/* --------------------------------------------------------------------------
   7. Hero (y = 177, высота 607)
   Сетка: слева заголовок и нижняя группа, справа картинка на всю высоту.
   Пустая строка «gap» тянется на 1fr и на 1600px даёт макетные 253px.
   -------------------------------------------------------------------------- */

.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
            "title  media"
            "gap    media"
            "bottom media";
    margin-top: 60px;                       /* 117 → 177 */
}

.hero__title {
    grid-area: title;
    max-width: 655px;
    color: var(--color-navy);
    font-size: var(--size-h1);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-h1);         /* 3 строки = 162px */
    letter-spacing: var(--tracking-h1);
    text-transform: uppercase;
}

.hero__media {
    grid-area: media;
    aspect-ratio: 720 / 607;
}

.hero__bottom {
    grid-area: bottom;
}

.hero__text {
    max-width: 483px;
    color: var(--color-navy-deep);
    font-size: var(--size-lead);
    line-height: 1.2;                       /* 24px → 3 строки = 72px */
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 45px;                              /* 401 → 446 */
    margin-top: 48px;                       /* 664 → 712 */
}

.hero__price {
    color: var(--color-bronze);
    font-size: var(--size-lead);
    font-weight: var(--weight-medium);
    line-height: 18px;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8. Кнопка (321 × 72: padding 24/48, контент 24px)
   -------------------------------------------------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--button-padding-y) var(--button-padding-x);
    border: 0;
    border-radius: var(--radius-button);
    background: var(--color-navy);
    color: var(--color-white);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-base) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.button:hover {
    background: var(--color-navy-hover);
    box-shadow: 0 10px 24px rgba(13, 47, 89, 0.22);
}

.button:active {
    transform: translateY(1px);
    box-shadow: none;
}

.button:focus-visible {
    outline: 2px solid var(--color-bronze);
    outline-offset: 3px;
}

.button__label {
    font-size: var(--size-button);
    font-weight: var(--weight-semibold);
    line-height: 1;
    letter-spacing: var(--tracking-button);
    white-space: nowrap;
}

/* Иконка повёрнута на 90°, поэтому «вправо» — это локальный translateY(−) */
.button__icon {
    display: flex;
    flex: none;
    width: 24px;
    height: 24px;
    transform: rotate(90deg);
    transition: transform var(--duration-base) var(--ease-out);
}

.button:hover .button__icon {
    transform: rotate(90deg) translateY(-5px);
}

.button--submit {
    flex: 0 0 220px;
    width: 220px;
    min-height: 73.103px;
    padding: 0;
    font-family: inherit;
}

/* --------------------------------------------------------------------------
   9. Надзаголовок и заголовок секции
   -------------------------------------------------------------------------- */

.eyebrow {
    color: var(--color-bronze);
    font-size: var(--size-small);
    font-weight: var(--weight-medium);
    line-height: var(--leading-flat);
    letter-spacing: var(--tracking-eyebrow);
}

.heading-2 {
    color: var(--color-navy);
    font-size: var(--size-h2);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-h2);         /* 2 строки = 102px */
    letter-spacing: var(--tracking-h2);
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   10. Форматы коллекции (надзаголовок y = 945.5, карточки y = 1145)
   -------------------------------------------------------------------------- */

.formats {
    margin-top: 80.5px;                     /* 865 → 945.5 */
}

.formats__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    margin-top: 33.5px;                     /* 961.5 → 995 */
}

.formats__title {
    flex: 0 1 655px;
}

.formats__lead {
    flex: 0 1 358px;
    margin-top: 51.8px;                     /* 995 → 1046.8 */
    color: var(--color-ink);
    font-size: var(--size-body);
    line-height: var(--leading-lead);
    opacity: var(--opacity-muted);
}

/* minmax(0, 340px): на 1440px колонки ровно 340px, ниже — сжимаются */
.cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 340px));
    gap: 26px;                              /* 420 → 446 */
    margin-top: 47.8px;                     /* 1097.2 → 1145 */
}

.card__media {
    aspect-ratio: 340 / 250;
}

.card__media img {
    transition: transform var(--duration-slow) var(--ease-out);
}

.card:hover .card__media img {
    transform: scale(1.05);
}

.card__title {
    margin-top: 32.15px;                    /* 1395 → 1427.15 */
    color: var(--color-navy);
    font-size: var(--size-lead);
    font-weight: var(--weight-semibold);
    line-height: 1.435;                     /* 28.705px при 20px */
    letter-spacing: var(--tracking-card);
    transition: color var(--duration-base) var(--ease-out);
}

.card:hover .card__title {
    color: var(--color-bronze);
}

.card__text {
    max-width: 291px;
    margin-top: 12.145px;                   /* 1455.855 → 1468 */
    color: var(--color-ink);
    font-size: var(--size-small);
    line-height: var(--leading-body);
    opacity: var(--opacity-muted);
}

/* --------------------------------------------------------------------------
   11. Инженерия и отделка (y = 1610, высота 491)
   -------------------------------------------------------------------------- */

.engineering {
    display: flex;
    align-items: flex-start;
    gap: 64px;                              /* 800 → 864 */
    margin-top: 100.4px;                    /* 1509.6 → 1610 */
}

.engineering__media {
    flex: 0 1 720px;
    aspect-ratio: 720 / 491;
}

.engineering__content {
    flex: 1 1 656px;                        /* 864…1520 */
    min-width: 0;
}

.engineering__title {
    margin-top: 32px;                       /* 1626 → 1658 */
}

.specs {
    margin-top: 65px;                       /* 1760 → 1825 */
}

.specs__row {
    display: flex;
    gap: 0;
    min-height: 92px;
    padding-top: 24px;
    border-top: 1px solid var(--color-rule);
}

.specs__row:last-child {
    border-bottom: 1px solid var(--color-rule);
}

.specs__term {
    flex: 0 0 270px;
    color: var(--color-navy);
    font-size: var(--size-body);
    font-weight: var(--weight-semibold);
    line-height: 1.2778;                    /* 23px при 18px */
}

/* Ширина текста 191px — заголовок переносится на две строки */
.specs__term--narrow {
    padding-right: 79px;
}

.specs__desc {
    color: var(--color-ink);
    font-size: var(--size-small);
    line-height: var(--leading-body);
    opacity: var(--opacity-muted);
}

/* Ширины на 1px меньше макетных (375 / 356): в браузере Inter чуть уже,
   и без этого перенос строки уезжает на следующее слово. */
.specs__desc--1 { max-width: 374px; }
.specs__desc--2 { max-width: 355px; }
.specs__desc--3 { max-width: 385px; }

/* --------------------------------------------------------------------------
   12. Блок заявки (полоса y = 2201, высота 426; карточка 1440 × 266)
   -------------------------------------------------------------------------- */

.cta {
    margin-top: 100px;                      /* 2101 → 2201 */
    padding: 80px var(--gutter);
    background: var(--color-cream);
    scroll-margin-top: 40px;
}

.cta__card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    min-height: 266px;
    padding: 60px;
    background: var(--color-white);
}

.cta__copy {
    flex: 0 1 523px;
}

.cta__title {
    color: var(--color-navy);
    font-size: var(--size-h3);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-h3);
    letter-spacing: var(--tracking-h3);
    text-transform: uppercase;
    white-space: nowrap;                    /* переносы заданы разметкой */
}

.cta__text {
    max-width: 458px;
    margin-top: 32px;                       /* 2411.4 → 2443.4 */
    color: var(--color-navy-deep);
    font-size: var(--size-body);
    line-height: var(--leading-text);
    opacity: var(--opacity-muted);
}

.cta__form {
    flex: 0 1 660px;                        /* 800…1460 */
}

/* --------------------------------------------------------------------------
   13. Поле ввода
   -------------------------------------------------------------------------- */

.form__row {
    display: flex;
    align-items: stretch;
    gap: 16px;
}

.field {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

.field__input {
    width: 100%;
    min-height: 73.103px;
    padding: 0 25.21px;
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-input);
    background: transparent;
    color: var(--color-navy);
    font-family: inherit;
    font-size: var(--size-input);
    line-height: normal;
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.field__input::placeholder {
    color: var(--color-navy);
    opacity: var(--opacity-subtle);
}

.field__input:hover {
    border-color: rgba(13, 47, 89, 0.4);
}

.field__input:focus {
    outline: none;
    border-color: var(--color-navy);
    box-shadow: 0 0 0 3px rgba(13, 47, 89, 0.1);
}

/* --------------------------------------------------------------------------
   14. Чекбокс согласия
   Настоящий input[type=checkbox] с appearance: none — участвует в отправке
   формы и в нативной валидации (required), галочка лежит поверх него.
   -------------------------------------------------------------------------- */

.consent {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 31.9px;                     /* 2414.1 → 2446 */
    cursor: pointer;
}

.consent__input {
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--color-navy-deep);
    border-radius: var(--radius-checkbox);
    background: transparent;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.consent__input:hover {
    border-color: var(--color-navy);
    background: rgba(13, 47, 89, 0.06);
}

.consent__input:checked {
    background: var(--color-navy-deep);
    border-color: var(--color-navy-deep);
}

.consent__input:focus-visible {
    outline: 2px solid var(--color-bronze);
    outline-offset: 2px;
}

.consent__mark {
    position: absolute;
    top: 50%;
    left: 0;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    color: var(--color-white);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%) scale(0.6);
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.consent__mark svg {
    width: 15px;
    height: 15px;
}

.consent__input:checked + .consent__mark {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/* Текст 14px/1.21 в две строки = 33.88px; вертикальные отступы дают
   макетные 41px по высоте и позволяют блоку расти на узких экранах. */
.consent__text {
    max-width: 527px;
    padding-block: 3.5px;
    color: var(--color-navy-deep);
    font-size: var(--size-caption);
    line-height: var(--leading-text);
    opacity: var(--opacity-subtle);
}

.consent__text a {
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
    transition: color var(--duration-fast) var(--ease-out);
}

.consent__text a:hover {
    color: var(--color-navy);
    text-decoration-color: var(--color-bronze);
}

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

.form__status:empty {
    display: none;
}

.form__status {
    margin-top: 16px;
    font-size: var(--size-caption);
    line-height: var(--leading-text);
}

.form__status--error {
    color: #b3261e;
}

.form__status--success {
    color: var(--color-navy);
    font-weight: var(--weight-medium);
}

.field__input--error {
    border-color: #b3261e;
}

.field__input--error:focus {
    border-color: #b3261e;
    box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}

/* Пока заявка уходит на сервер, кнопка неактивна */
.button[disabled] {
    opacity: var(--opacity-muted);
    cursor: progress;
}

.button[disabled]:hover {
    background: var(--color-navy);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   15. Подвал (линия y = 2727, строка y = 2762)
   -------------------------------------------------------------------------- */

.hero + .rule {
    margin-top: 80px;                       /* 784 → 864 */
}

.rule + .formats {
    margin-top: 80.5px;
}

.cta + .rule {
    margin-top: 100px;                      /* 2627 → 2727 */
}

.footer {
    margin-top: 34px;                       /* 2728 → 2762 */
}

.footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 22.69px;
}

.footer__note {
    color: var(--color-ink);
    font-size: var(--size-caption);
    line-height: var(--leading-text);
    text-transform: uppercase;
    opacity: var(--opacity-subtle);
}

/* --------------------------------------------------------------------------
   16. Анимации появления
   Скрытое состояние живёт под классом .js, который ставит скрипт, — без
   JavaScript контент виден сразу.
   -------------------------------------------------------------------------- */

.js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out);
}

/* Карточки выезжают каскадом */
.js .card:nth-child(2).is-visible { transition-delay: 0.08s; }
.js .card:nth-child(3).is-visible { transition-delay: 0.16s; }
.js .card:nth-child(4).is-visible { transition-delay: 0.24s; }

.js .specs__row:nth-child(2).is-visible { transition-delay: 0.08s; }
.js .specs__row:nth-child(3).is-visible { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .js [data-reveal] {
        opacity: 1;
        transform: none;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   17. Адаптив
   ========================================================================== */

/* --- До 1599px: переносы заголовков задаёт разметка, кегль уже плавающий -- */
@media (max-width: 1599px) {
    .cta__title {
        white-space: normal;
    }
}

/* --- Ноутбуки: уменьшаем боковые поля и вертикальный ритм ---------------- */
@media (max-width: 1279px) {
    :root {
        --gutter: 40px;
        --size-phone: 18px;
        --button-padding-x: 32px;
    }

    .hero__actions {
        gap: 32px;
    }

    .engineering {
        gap: 40px;
        margin-top: 80px;
    }

    .specs__term {
        flex: 0 0 200px;
    }

    .specs__term--narrow {
        padding-right: 20px;
    }

    .cta {
        margin-top: 80px;
        padding: 60px var(--gutter);
    }

    .cta__card {
        padding: 40px;
    }

    .cta + .rule {
        margin-top: 80px;
    }
}

/* --- Планшеты: hero и «Инженерия» в одну колонку, карточки по две -------- */
@media (max-width: 1023px) {
    .hero {
        grid-template-columns: 1fr;
        grid-template-areas:
                "title"
                "media"
                "bottom";
        gap: 40px;
        margin-top: 48px;
    }

    .hero__media {
        aspect-ratio: 16 / 10;
    }

    .hero__text,
    .hero__title {
        max-width: none;
    }

    .hero + .rule {
        margin-top: 56px;
    }

    .rule + .formats,
    .formats {
        margin-top: 56px;
    }

    .formats__head {
        flex-direction: column;
        gap: 20px;
        margin-top: 24px;
    }

    /* В колонке flex-basis становится высотой — сбрасываем на auto */
    .formats__title {
        flex: 0 0 auto;
    }

    .formats__lead {
        flex: 0 0 auto;
        max-width: 560px;
        margin-top: 0;
    }

    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 26px;
        margin-top: 40px;
    }

    .card__text {
        max-width: none;
    }

    /* Перенос из макета рвёт узкую колонку карточки. Перед каждым <br>
       в разметке стоит пробел, поэтому слова не склеиваются. */
    .card__text br {
        display: none;
    }

    .engineering {
        flex-direction: column;
        gap: 32px;
        margin-top: 72px;
    }

    .engineering__media {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 16 / 10;
    }

    .engineering__content {
        flex: 0 0 auto;
        width: 100%;
    }

    .engineering__title {
        margin-top: 20px;
    }

    .specs {
        margin-top: 32px;
    }

    .specs__desc--1,
    .specs__desc--2,
    .specs__desc--3 {
        max-width: none;
    }

    .cta__card {
        flex-direction: column;
        gap: 32px;
        min-height: 0;
    }

    .cta__copy,
    .cta__form {
        flex: 0 0 auto;
        width: 100%;
    }

    .cta__text {
        max-width: 560px;
    }
}

/* --- Телефоны: всё в одну колонку, форма в столбик ----------------------- */
@media (max-width: 767px) {
    :root {
        --gutter: 24px;
        --logo-size: 24px;
        --size-phone: 16px;
        --size-lead: 18px;
        --size-body: 16px;
        --size-input: 18px;
    }

    .header {
        padding-top: 20px;
    }

    .header__inner {
        gap: 16px;
    }

    /* Линия рядом с локацией на узком экране только мешает */
    .meta-row {
        margin-top: 24px;
    }

    .meta-row__location {
        flex: 0 1 auto;
        white-space: normal;
    }

    .meta-row__rule {
        display: none;
    }

    .hero {
        gap: 28px;
        margin-top: 32px;
    }

    .hero__media,
    .engineering__media {
        aspect-ratio: 4 / 3;
    }

    .hero__actions {
        gap: 20px;
        margin-top: 32px;
    }

    .button {
        padding: 20px 28px;
    }

    .hero + .rule,
    .rule + .formats,
    .formats {
        margin-top: 40px;
    }

    .cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        margin-top: 32px;
    }

    .card__title {
        margin-top: 20px;
    }

    .engineering {
        margin-top: 56px;
    }

    /* Название и описание характеристики — друг под другом */
    .specs__row {
        flex-direction: column;
        gap: 6px;
        min-height: 0;
        padding-block: 20px;
    }

    .specs__term,
    .specs__term--narrow {
        flex: 0 0 auto;
        padding-right: 0;
    }

    .cta {
        margin-top: 56px;
        padding: 40px var(--gutter);
    }

    .cta__card {
        padding: 28px 24px;
    }

    .cta + .rule {
        margin-top: 56px;
    }

    .form__row {
        flex-direction: column;
        gap: 12px;
    }

    .field__input {
        min-height: 60px;
        padding: 0 18px;
    }

    .button--submit {
        flex: 0 0 auto;
        width: 100%;
        min-height: 60px;
    }

    .consent {
        align-items: flex-start;
        margin-top: 20px;
    }

    /* Галочка выравнивается по первой строке текста, а не по центру блока */
    .consent__mark {
        top: 3.5px;
        transform: scale(0.6);
    }

    .consent__input:checked + .consent__mark {
        transform: scale(1);
    }

    .consent__text {
        max-width: none;
    }

    .footer {
        margin-top: 24px;
    }

    .footer__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .footer__note {
        white-space: normal;
    }

    .layout {
        padding-bottom: 32px;
    }
}

/* --- Узкие телефоны ------------------------------------------------------ */
@media (max-width: 479px) {
    :root {
        --gutter: 16px;
        --logo-size: 21px;
        --size-phone: 15px;
    }

    .hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .button {
        width: 100%;
    }

    .hero__price {
        text-align: center;
    }

    .hero__text br {
        display: none;
    }
}

/* --- Самые узкие экраны: логотип и телефон не влезают в одну строку ------ */
@media (max-width: 359px) {
    .header__inner {
        flex-wrap: wrap;
        gap: 10px;
    }
}