/* Посадочные страницы. Структура блоков, пропорции и сетки взяты из прототипов
   («Прототип - Дизайнерам», «Дистрибьюторы_дилеры», «Спящая красавица»),
   типографика и цвет — из токенов темы engleton. Соответствие переменных:
   макет --ink → --color-black, --ink-soft → --color-gray-text,
   --brass → --color-brown-accent, --line → --color-black-20,
   --stone/--paper → белый и --color-light. */

.lp-section *,
.lp-section *:before,
.lp-section *:after,
.lp-nav * {
    box-sizing: border-box;
}

/* --- Секция и колонки текста ------------------------------------------- */

.lp-section {
    padding: 76px 0;
}

.lp-section + .lp-section {
    padding-top: 0;
}

/* :where() держит нулевую специфичность — иначе этот сброс перебивает
   отступы заголовков внутри блоков (название проекта, шаги, вопросы). */
.lp-section :where(h1, h2, h3, h4) {
    margin: 0;
    text-wrap: balance;
}

/* Размеров текста ровно три: заголовок блока (h2), заголовок элемента
   (--font-h4-mini) и основной текст (--font-body-16). Надзаголовки, подписи
   и сноски идут тем же основным размером, роль передают регистр, цвет и курсив. */
.lp-section :where(h3, h4) {
    font: var(--font-h4-mini);
}

.lp-eyebrow {
    color: var(--color-brown-accent);
    display: block;
    font: var(--font-body-16);
    letter-spacing: .08em;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.lp-lead {
    color: var(--color-gray-text);
    font: var(--font-body-16);
    margin: 18px 0 0;
    max-width: 60ch;
}

.lp-lead + .lp-lead {
    margin-top: 14px;
}

.lp-text {
    color: var(--color-gray-text);
    font: var(--font-body-16);
    margin: 12px 0 0;
}

/* Технические заметки для команды — курсив и розовый, чтобы не путались
   с текстом страницы (правка из задачи 52706). */
.lp-fine {
    color: var(--color-red);
    font: var(--font-body-16);
    font-style: italic;
    margin-top: 18px;
}

/* --- Заглушки кадров ---------------------------------------------------- */

.lp-placeholder {
    align-items: center;
    background: var(--color-light);
    border: 1px solid var(--color-black-20);
    color: var(--color-gray-text);
    display: flex;
    font: var(--font-body-16);
    justify-content: center;
    padding: 24px;
    position: relative;
    text-align: center;
}

.lp-placeholder:before {
    background-image: linear-gradient(var(--color-black-10) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-black-10) 1px, transparent 1px);
    background-size: 28px 28px;
    content: "";
    inset: 0;
    opacity: .5;
    position: absolute;
}

.lp-placeholder span {
    max-width: 32ch;
    overflow-wrap: anywhere;
    position: relative;
}

.lp-placeholder--hero {
    aspect-ratio: 16/8;
    margin-top: 44px;
}

.lp-placeholder--wide {
    aspect-ratio: 16/9;
    margin-top: 44px;
}

.lp-placeholder--portrait {
    aspect-ratio: 3/4;
}

.lp-placeholder--square {
    aspect-ratio: 1/1;
}

.lp-placeholder--product {
    aspect-ratio: 4/3;
}

/* --- Первый экран ------------------------------------------------------- */

.lp-hero {
    padding-bottom: 72px;
    padding-top: 88px;
}

.lp-hero h1 {
    max-width: 16ch;
}

.lp-hero .lp-lead {
    margin-top: 22px;
    max-width: 52ch;
}

.lp-cta {
    margin-top: 28px;
}

/* Кнопки и подписи полей на сайте набраны 14px и 12px — внутри посадочных
   приводим их к основному размеру, чтобы размеров текста осталось три. */
.lp-section .btn,
.lp-nav .btn {
    font: var(--font-body-16);
    font-weight: 500;
    letter-spacing: .56px;
    padding: 1.5rem 2.6rem;
    text-transform: uppercase;
}

.lp-section .form-input__top span,
.lp-section .checkbox label span {
    font: var(--font-body-16);
    font-weight: 500;
}

/* Первый экран «Спящей красавицы» — две колонки: текст и кадр */
.lp-hero--split .lp-hero__grid {
    align-items: center;
    display: grid;
    gap: 64px;
    grid-template-columns: 1.05fr .8fr;
}

.lp-hero__badge {
    border: 1px solid var(--color-black-20);
    border-radius: 20px;
    display: inline-flex;
    margin-bottom: 26px;
    padding: 8px 14px;
}

.lp-hero__badge .lp-eyebrow {
    margin: 0;
}

.lp-hero__caption {
    color: var(--color-gray-text);
    font: var(--font-body-16);
    margin-top: 14px;
    text-align: center;
}

.lp-buttons {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 28px;
}

/* На первом экране кнопки идут в один ряд */
.lp-hero .lp-buttons {
    flex-wrap: nowrap;
}

.lp-hero .lp-buttons .btn {
    padding: 1.5rem 2rem;
    white-space: nowrap;
}

.lp-split {
    display: grid;
    gap: 48px;
    grid-template-columns: 320px 1fr;
}

.lp-split__media {
    margin: 0;
}

.lp-credit {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 32px;
}

.lp-credit b {
    display: block;
    font: var(--font-body-16);
    font-weight: 500;
}

.lp-credit span {
    color: var(--color-gray-text);
    display: block;
    font: var(--font-body-16);
    margin-top: 4px;
}

.lp-brands {
    margin-top: 48px;
}

.lp-brands .lp-icons {
    margin-top: 16px;
}

/* --- Цифры -------------------------------------------------------------- */

.lp-stats {
    border-top: 1px solid var(--color-black-20);
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 52px;
    padding-top: 44px;
}

.lp-stat b {
    color: var(--color-brown-accent);
    display: block;
    font: var(--font-h2-medium);
    font-variant-numeric: tabular-nums;
}

.lp-stat span {
    color: var(--color-gray-text);
    display: block;
    font: var(--font-body-16);
    margin-top: 8px;
    max-width: 22ch;
}

/* --- Проект ------------------------------------------------------------- */

.lp-project {
    margin-top: 56px;
}

.lp-project__name {
    margin-top: 28px;
}

.lp-project-meta {
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(2, 1fr);
    margin: 36px 0 0;
}

.lp-project-meta dt {
    color: var(--color-gray-text);
    font: var(--font-body-16);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.lp-project-meta dd {
    font: var(--font-body-16);
    margin: 6px 0 0;
}

.lp-subhead {
    margin-top: 48px;
}

/* --- Карточки товаров --------------------------------------------------- */

.lp-products {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 24px;
}

.lp-product {
    background: #fff;
    border: 1px solid var(--color-black-20);
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 12px;
    transition: border-color .2s ease;
}

.lp-product:hover {
    border-color: #d1ab53;
}

.lp-product__photo-wrap {
    background: #fff;
    display: block;
}

.lp-product__photo {
    aspect-ratio: 1/1;
    background: #fff;
    border: 0;
    display: block;
    object-fit: contain;
    padding: 0;
    width: 100%;
}

.lp-product__name {
    display: block;
    font: var(--font-body-14);
    font-weight: 700;
    margin-top: 12px;
}

.lp-product__meta {
    color: var(--color-gray-text);
    font: var(--font-body-16);
    margin-top: 4px;
}

.lp-product__link {
    border-bottom: 0;
    color: var(--color-brown-accent);
    display: inline-block;
    font: var(--font-body-16);
    font-weight: 500;
    margin-top: 22px;
}

.lp-product__link:hover {
    color: var(--color-brown-accent-hover);
}

/* Ведомость характеристик изделия («Спящая красавица») */
.lp-product__specs {
    display: grid;
    font: var(--font-body-14);
    gap: 5px 10px;
    grid-template-columns: auto 1fr;
    margin: 8px 0 0;
}

.lp-product__specs > div {
    display: contents;
}

.lp-product__specs dt {
    color: var(--color-gray-text);
}

.lp-product__specs dd {
    margin: 0;
}

/* --- Служебная заметка -------------------------------------------------- */

.lp-note {
    background: var(--color-light);
    color: var(--color-red);
    font: var(--font-body-16);
    font-style: italic;
    margin-top: 40px;
    padding: 18px 20px;
}

/* --- Цепочка «концепция → подбор → результат» --------------------------- */

.lp-sequence {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    margin-top: 48px;
}

.lp-sequence .lp-placeholder {
    aspect-ratio: 4/5;
}

.lp-sequence__arrow {
    color: var(--color-gray-text);
    font-size: 2rem;
}

/* --- Сетка на волосяных линиях ------------------------------------------ */

.lp-grid-2,
.lp-steps,
.lp-icons {
    background: var(--color-black-20);
    display: grid;
    gap: 1px;
    margin-top: 48px;
}

.lp-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.lp-grid-2 > div {
    background: var(--color-white);
    padding: 38px;
}

.lp-card__title {
    font: var(--font-h4-mini);
    margin-bottom: 14px;
}

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

.lp-list li {
    color: var(--color-gray-text);
    font: var(--font-body-16);
    padding-left: 18px;
    position: relative;
}

.lp-list li:before {
    color: var(--color-brown-accent);
    content: "—";
    left: 0;
    position: absolute;
}

.lp-list--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 9px 24px;
}

/* Списки блоков посадочной для дилеров — круглый маркер, как в макете */
.lp-list--dot li {
    padding-left: 16px;
}

.lp-list--dot li:before {
    background: var(--color-brown-accent);
    border-radius: 50%;
    content: "";
    height: 5px;
    top: .7em;
    width: 5px;
}

/* --- Коллекции ---------------------------------------------------------- */

.lp-collections {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 48px;
}

.lp-collection {
    display: flex;
    flex-direction: column;
}

.lp-collection__name {
    display: block;
    font: var(--font-h4-mini);
    margin-top: 18px;
}

.lp-collection__tag {
    color: var(--color-brown-accent);
    font: var(--font-body-16);
    font-weight: 500;
    margin-top: 4px;
}

.lp-collection__desc {
    color: var(--color-gray-text);
    font: var(--font-body-16);
    margin-top: 10px;
}

.lp-swatches-label {
    color: var(--color-gray-text);
    font: var(--font-body-16);
    letter-spacing: .09em;
    margin: 18px 0 9px;
    text-transform: uppercase;
}

.lp-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.lp-swatch {
    background: none;
    border: 0;
    cursor: pointer;
    display: flex;
    line-height: 0;
    padding: 3px;
    position: relative;
}

.lp-swatch span[data-dot] {
    background: var(--swatch-color);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 1px 2px rgba(0, 0, 0, .18);
    display: block;
    height: 20px;
    width: 20px;
}

.lp-swatch:hover span[data-dot] {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 2px var(--color-white), 0 0 0 3px var(--color-brown-accent);
}

.lp-swatch .lp-tip {
    background: var(--color-black);
    bottom: calc(100% + 10px);
    color: var(--color-white);
    font: var(--font-body-16);
    left: 50%;
    opacity: 0;
    padding: 6px 10px;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, 4px);
    transition: var(--transition);
    white-space: nowrap;
    z-index: 5;
}

.lp-swatch .lp-tip:after {
    border: 5px solid transparent;
    border-top-color: var(--color-black);
    content: "";
    left: 50%;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
}

.lp-swatch:hover .lp-tip {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* --- Шаги --------------------------------------------------------------- */

.lp-steps {
    grid-template-columns: repeat(4, 1fr);
}

.lp-step {
    background: var(--color-white);
    padding: 32px 26px;
}

.lp-step__num {
    color: var(--color-brown-accent);
    font: var(--font-h3-medium);
    font-variant-numeric: tabular-nums;
}

.lp-step h3 {
    margin-top: 14px;
}

.lp-step p {
    color: var(--color-gray-text);
    font: var(--font-body-16);
    margin-top: 8px;
}

/* Процесс на странице дилеров — вертикальный список */
.lp-steps--five {
    background: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.lp-steps--five .lp-step {
    border-top: 1px solid var(--color-black-20);
    display: grid;
    gap: 24px;
    grid-template-columns: 56px 1fr;
    padding: 22px 0;
}

.lp-steps--five .lp-step:last-child {
    border-bottom: 1px solid var(--color-black-20);
}

.lp-steps--five .lp-step__num {
    font: var(--font-h4-mini);
    font-style: italic;
}

.lp-steps--five .lp-step h3 {
    margin-top: 0;
}

/* --- Блоки «почему» ----------------------------------------------------- */

.lp-why {
    border-top: 1px solid var(--color-black-20);
    margin-top: 46px;
    padding-top: 46px;
}

.lp-why:first-of-type {
    border-top: 0;
    margin-top: 32px;
    padding-top: 0;
}



.lp-mini-steps {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 24px;
}

.lp-mini-step {
    border-left: 2px solid var(--color-brown-accent);
    padding-left: 16px;
}

.lp-mini-step b {
    display: block;
    font: var(--font-body-16);
    font-weight: 500;
    margin-bottom: 4px;
}

.lp-mini-step span {
    color: var(--color-gray-text);
    font: var(--font-body-16);
}

/* --- Отзывы ------------------------------------------------------------- */

.lp-testimonials {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 48px;
}

.lp-testimonial {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lp-testimonial__photo {
    border-radius: 100px;
    height: 56px;
    min-height: 0;
    padding: 0;
    width: 56px;
}

.lp-testimonial__photo:before {
    display: none;
}

/* В макете цитата набрана курсивным шрифтом с засечками; на сайте засечек
   нет, поэтому цитату отличает курсив и увеличенный интерлиньяж. */
.lp-testimonial q {
    display: block;
    font: var(--font-body-subtitle);
    font-style: italic;
    line-height: 1.5;
    quotes: none;
}

.lp-testimonial__who b {
    display: block;
    font: var(--font-body-16);
    font-weight: 500;
}

.lp-testimonial__who span {
    color: var(--color-gray-text);
    display: block;
    font: var(--font-body-16);
    margin-top: 4px;
}

.lp-lead--spaced {
    margin-top: 40px;
}

/* --- Форма -------------------------------------------------------------- */

.lp-form {
    margin-top: 40px;
}

.lp-form__grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
}

.lp-field--full {
    grid-column: 1/-1;
}

.lp-form .form-input__top {
    margin-bottom: 8px;
}

.lp-form textarea.input {
    min-height: 96px;
    resize: vertical;
}

.lp-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    margin-top: 12px;
}

.lp-form .btn {
    margin-top: 32px;
}

/* --- Блоки посадочной для дилеров --------------------------------------- */

.lp-icons {
    grid-template-columns: repeat(4, 1fr);
}

/* Плитка тезиса: квадратная иллюстрация сверху, подпись под ней по центру —
   как в макете (visual-ph + icon-label). */
.lp-icons__item {
    align-items: center;
    background: var(--color-white);
    color: var(--color-gray-text);
    display: flex;
    flex-direction: column;
    font: var(--font-body-16);
    gap: 12px;
    padding: 18px 14px 16px;
    text-align: center;
}

.lp-icons__icon {
    fill: var(--color-brown-accent);
    height: 3.2rem;
    width: 3.2rem;
}

.lp-icons__icon--empty {
    align-items: center;
    background: var(--color-light);
    border: 1px solid var(--color-black-20);
    color: var(--color-gray-text);
    display: flex;
    font: var(--font-body-16);
    height: 76px;
    justify-content: center;
    letter-spacing: .05em;
    text-transform: uppercase;
    width: 76px;
}

.lp-group-label {
    margin-top: 40px;
}

.lp-faq {
    border-top: 1px solid var(--color-black-20);
    margin-top: 48px;
}

.lp-faq__item {
    border-bottom: 1px solid var(--color-black-20);
    padding: 24px 0;
}

.lp-faq__item h3 {
    margin-bottom: 10px;
}

/* --- Блоки «Спящей красавицы» ------------------------------------------- */

.lp-section-head {
    margin-bottom: 40px;
    max-width: 56ch;
}

.lp-audience {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.lp-audience__card {
    display: grid;
    gap: 32px;
    grid-template-columns: 260px 1fr;
}

.lp-audience__head h3 {
    font: var(--font-h4-mini);
    margin-bottom: 12px;
}

.lp-audience__head p {
    color: var(--color-gray-text);
    font: var(--font-body-16);
    margin: 0;
}

.lp-audience__body {
    border-left: 1px solid var(--color-black-20);
    padding-left: 32px;
}

.lp-audience__body .lp-text {
    margin-top: 0;
    max-width: 56ch;
}

.lp-audience__body .btn {
    margin-top: 22px;
}

.lp-gallery {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 48px;
}

.lp-gallery .lp-placeholder {
    aspect-ratio: 4/3;
}

.lp-visit-grid {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 32px;
}

.lp-fact-row {
    border-top: 1px solid var(--color-black-20);
    display: grid;
    gap: 20px;
    grid-template-columns: 56px 1fr;
    margin-top: 32px;
    padding-top: 32px;
}

.lp-fact-row:first-of-type {
    margin-top: 48px;
}

.lp-fact-row__icon {
    align-items: center;
    background: var(--color-brown-accent);
    border-radius: 50%;
    display: flex;
    height: 56px;
    justify-content: center;
    width: 56px;
}

.lp-fact-row__icon svg {
    height: 28px;
    width: 28px;
}

.lp-fact-row__icon img {
    border-radius: 50%;
    height: 36px;
    object-fit: cover;
    width: 36px;
}

.lp-fact-row h3 {
    margin-bottom: 8px;
}

.lp-fact-row .lp-lead {
    margin-top: 0;
}

.lp-facts {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}

.lp-facts > div {
    border-bottom: 1px solid var(--color-black-20);
    display: grid;
    gap: 14px;
    grid-template-columns: 140px 1fr;
    padding-bottom: 14px;
}

.lp-facts dt {
    color: var(--color-gray-text);
    font: var(--font-body-16);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.lp-facts dd {
    font: var(--font-body-16);
    font-weight: 500;
    margin: 0;
}

.lp-cta-band {
    text-align: center;
}

.lp-cta-band .lp-lead {
    margin-left: auto;
    margin-right: auto;
    max-width: 52ch;
}

.lp-cta-band .lp-buttons {
    justify-content: center;
    margin-bottom: 36px;
}

.lp-cta-band .lp-fine {
    margin: 0 auto;
    max-width: 60ch;
}

/* Внутренний блок — виден, что не для боевой публикации */
.lp-internal {
    background: repeating-linear-gradient(135deg, var(--color-light), var(--color-light) 14px, var(--color-white) 14px, var(--color-white) 28px);
}

.lp-internal .container > * {
    background: var(--color-white);
}

/* --- Навигация по посадочным (только стенд) ----------------------------- */

.lp-nav {
    background: var(--color-white);
    border: 1px solid var(--color-black-20);
    padding: 20px;
    width: 232px;
}

.lp-nav__title {
    color: var(--color-black-50);
    font: var(--font-body-16);
    letter-spacing: .1em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.lp-nav ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-nav a {
    color: var(--color-gray-text);
    display: block;
    font: var(--font-body-16);
    transition: var(--transition);
}

.lp-nav a:hover {
    color: var(--color-brown-accent);
}

.lp-nav a.is-active {
    color: var(--color-black);
    font-weight: 500;
}

/* --- Адаптив. Держим в конце файла: правила ниже по тексту с той же
       специфичностью перебивают медиазапросы, объявленные раньше. --------- */

@media (max-width: 1779px) {
    .lp-nav {
        border-left: 0;
        border-right: 0;
        border-top: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 12px 32px;
        margin: 0 auto;
        max-width: var(--max-width);
        padding: 16px var(--container);
        width: 100%;
    }

    .lp-nav__title {
        margin-bottom: 0;
    }

    .lp-nav ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 24px;
    }
}

@media (min-width: 1780px) {
    .lp-nav {
        left: 24px;
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        z-index: 50;
    }
}

@media (max-width: 1024px) {
    .lp-split {
        gap: 32px;
        grid-template-columns: 240px 1fr;
    }

    .lp-products {
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-hero--split .lp-hero__grid {
        gap: 32px;
        grid-template-columns: 1fr;
    }

    .lp-icons,
    .lp-steps,
    .lp-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-audience__card {
        grid-template-columns: 200px 1fr;
        gap: 24px;
    }
}

@media (max-width: 800px) {
    .lp-sequence {
        grid-template-columns: 1fr;
    }

    .lp-sequence__arrow {
        justify-self: center;
        transform: rotate(90deg);
    }

    .lp-collections {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .lp-section {
        padding: 52px 0;
    }

    .lp-hero {
        padding-bottom: 48px;
        padding-top: 56px;
    }

    .lp-stats,
    .lp-grid-2,
    .lp-products,
    .lp-collections,
    .lp-steps,
    .lp-icons,
    .lp-gallery,
    .lp-testimonials,
    .lp-mini-steps,
    .lp-form__grid,
    .lp-form__grid--3,
    .lp-subsection,
    .lp-why--media,
    .lp-hero--media > .container {
        grid-template-columns: 1fr;
    }

    .lp-project-meta,
    .lp-audience__card,
    .lp-facts > div,
    .lp-fact-row,
    .lp-visit-grid,
    .lp-steps--five .lp-step {
        grid-template-columns: 1fr;
    }

    .lp-audience__body {
        border-left: 0;
        padding-left: 0;
    }

    .lp-split {
        grid-template-columns: 1fr;
    }

    .lp-hero .lp-buttons {
        flex-wrap: wrap;
    }

    .lp-grid-2 > div,
    .lp-step {
        padding: 24px;
    }

    .lp-section .btn {
        width: 100%;
    }
}


/* --- Светлая подложка секции (первый экран, «Склад и сроки») ------------ */

.lp-section--tint {
    background: var(--color-light);
}

.lp-section + .lp-section.lp-section--tint {
    padding-top: 76px;
}

.lp-section--tint .lp-placeholder,
.lp-section--tint .lp-icons__item,
.lp-section--tint .lp-icons__icon--empty {
    background: var(--color-white);
}

/* --- Блок-схема процесса ------------------------------------------------ */

.lp-flow {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-top: 48px;
}

.lp-flow__step {
    flex: 1 1 0;
    min-width: 180px;
    padding: 8px 0;
}

.lp-flow__num {
    color: var(--color-brown-accent);
    font: var(--font-h4-mini);
    font-variant-numeric: tabular-nums;
    margin-bottom: 12px;
}

.lp-flow__step h3 {
    margin-bottom: 8px;
}


.lp-cta-center {
    display: flex;
    justify-content: center;
}

/* --- Подсекции с иллюстрацией (блок «Премиальность, которую можно
       объяснить фактами») — квадратная иллюстрация напротив каждого тезиса --- */

.lp-subsection {
    display: grid;
    gap: 16px 32px;
    grid-template-columns: 253px 1fr;
    align-items: center;
}

.lp-subsection__copy {
    min-width: 0;
}

.lp-subsection__title {
    margin: 0 0 12px;
}

.lp-subsection + .lp-subsection {
    border-top: 1px solid var(--color-black-20);
    margin-top: 32px;
    padding-top: 32px;
}

.lp-subsection .lp-placeholder,
.lp-subsection__photo {
    aspect-ratio: 1/1;
    display: block;
    object-fit: cover;
    width: 100%;
}

.lp-subsection .lp-placeholder {
    letter-spacing: .05em;
    overflow: hidden;
    padding: 8px;
    text-transform: uppercase;
}

.lp-subsection .lp-placeholder span {
    max-width: 100%;
}

/* --- Коммерческие условия — на разметке и стилях FAQ сайта ------------- */

.lp-faq-site {
    margin-top: 48px;
}

.lp-faq-site .faq-item + .faq-item {
    margin-top: 24px;
}

.lp-faq-site .faq-item__answer {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows .3s ease-in-out;
}

.lp-faq-site .faq-item.is-active .faq-item__answer {
    grid-template-rows: 1fr;
    padding-top: 12px;
}

.lp-faq-site .faq-item__answer > div {
    min-height: 0;
}

/* --- Иконочные тезисы формы заявки/* --- Иконочные тезисы формы заявки (2 ряда по 3) ------------------------ */

.lp-icons--three {
    grid-template-columns: repeat(3, 1fr);
}

.lp-is-hidden {
    display: none !important;
}

.lp-icons__label {
    white-space: pre-line;
}

.lp-icons__badge {
    align-items: center;
    background: var(--color-brown-accent);
    border-radius: 50%;
    display: flex;
    height: 56px;
    justify-content: center;
    width: 56px;
}

.lp-icons__badge .lp-icons__icon,
.lp-icons__badge svg {
    display: block;
    fill: #fff;
    height: 26px;
    width: 26px;
}

.lp-hero--cover {
    background-color: #111;
    background-position: center right;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    padding-top: 58px; /* 88 − 30, CID 11093223 */
}

.lp-hero--cover h1,
.lp-hero--cover .lp-lead,
.lp-hero--cover .lp-icons__label {
    color: #fff;
}

.lp-hero--cover .lp-icons {
    background: transparent;
    gap: 16px 24px;
}

.lp-hero--cover .lp-icons__item {
    background: transparent;
    padding: 0;
}

.lp-hero--cover .lp-cta,
.lp-hero--cover .btn--brown {
    position: relative;
    z-index: 1;
}

.lp-icons--logos .lp-icons__item,
.lp-icons--photos .lp-icons__item {
    background: var(--color-white);
    padding: 12px;
}

.lp-icons__logo {
    display: block;
    height: auto;
    max-height: 96px;
    object-fit: contain;
    width: 100%;
}

.lp-icons__photo {
    aspect-ratio: 1/1;
    border-radius: 50%;
    display: block;
    object-fit: cover;
    width: 88px;
}

.lp-collection__visual {
    overflow: hidden;
    position: relative;
}

.lp-collection__visual img {
    aspect-ratio: 3/4;
    display: block;
    object-fit: cover;
    width: 100%;
}

.lp-collection__name--left {
    display: block;
    margin-top: 14px;
    text-align: left;
    width: 100%;
}

.lp-section[data-lp-block="b03"] .lp-lead,
.lp-section[data-lp-block="brand"] .lp-lead,
.lp-section[data-lp-block="idea"] .lp-lead {
    max-width: none;
}

.lp-subsections {
    margin-top: 72px;
}

.lp-hero--media > .container {
    align-items: center;
    display: grid;
    gap: 48px;
    grid-template-columns: 1fr 1fr;
}

.lp-hero__visual img,
.lp-split__photo,
.lp-visit__map {
    display: block;
    height: auto;
    width: 100%;
}

.lp-hero__visual img {
    object-fit: cover;
}

.lp-hero--split .lp-hero__visual img {
    aspect-ratio: 3/4;
}

.lp-hero--media .lp-hero__visual img {
    /* 11093242: photo is ~1:1 with bathtub + ceiling; 16/10 cover cropped them off */
    aspect-ratio: auto;
    height: auto;
    object-fit: contain;
    width: 100%;
}

.lp-split__photo {
    aspect-ratio: 3/4;
    object-fit: cover;
}

.lp-gallery__item {
    margin: 0;
}

.lp-gallery__item img {
    aspect-ratio: 4/3;
    display: block;
    object-fit: cover;
    width: 100%;
}

.lp-gallery__item figcaption {
    color: var(--color-gray-text);
    font: var(--font-body-16);
    margin-top: 10px;
    text-align: center;
}

.lp-sequence__shot {
    margin: 0;
}

.lp-sequence__shot img {
    aspect-ratio: 4/5;
    display: block;
    object-fit: cover;
    width: 100%;
}

.lp-sequence__shot figcaption {
    color: var(--color-gray-text);
    font: var(--font-body-16);
    margin-top: 10px;
    text-align: center;
}

.lp-why--media {
    align-items: center;
    display: grid;
    gap: 32px;
    grid-template-columns: 280px 1fr;
}

.lp-why__photo {
    display: block;
    height: auto;
    width: 100%;
}

.lp-form__grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.lp-consent {
    color: var(--color-gray-text);
    font: var(--font-body-16);
    margin-top: 18px;
}

@media (max-width: 1024px) {
    .lp-subsection {
        grid-template-columns: 184px 1fr;
    }

    .lp-why--media,
    .lp-hero--media > .container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .lp-form__grid--3 {
        grid-template-columns: 1fr;
    }

    .lp-subsection {
        grid-template-columns: 1fr;
    }
}