/* Start:/local/templates/dryrent/assets/style.css?1790315946104062*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* overflow-x нужен на ОБОИХ элементах: в Safari правило на одном body
   скролл-контейнер не создаёт, и страница всё равно ездит вбок. */
html {
    overflow-x: hidden;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

.header {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    /* Воздух вокруг кнопок урезан вдвое — просьба владельца 17.09.2026. Было
       20 px сверху и снизу, шапка съедала 86 px первого экрана; стало 10 —
       66 px, и высоту целиком задаёт строка меню (45,6 px), а не отступы.
       Отступы контента ПОД шапкой (`.page .crumbs`, `.page .article`) урезаны
       на ту же дельту: они существуют ровно ради фиксированной шапки, и,
       оставь их прежними, дырка бы просто переехала вниз. */
    padding: 10px 0;
    position: fixed;
    width: 100%;
    /* Обычно 0. Залогиненному в админку переменную выставляет
       admin-panel.js: панель Битрикса на публичке стоит В ПОТОКЕ,
       и фиксированная шапка иначе накрывает её кнопки. Посетителю
       переменная не приходит — работает запасное значение. */
    top: var(--dryrent-panel-offset, 0px);
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    gap: 20px;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

/* Телефон — выпуклая зелёная кнопка с трубкой (решение владельца 15–16.09.2026):
   её видно сразу, и она просит нажать. Объём собран тенями, а не картинкой:
   светлая кромка сверху, тёмная снизу, борт 3 px под кнопкой и падающая тень;
   при наведении кнопка приподнимается, при нажатии проваливается на этот борт.
   Светлый градиент — просьба владельца 16.09.2026, и у неё есть цена: белый
   текст на середине градиента даёт контраст 3,1 против 5,0 у прежней тёмной
   заливки, поэтому под текстом стоит тень — без неё на солнце буквы плывут.
   Трубка — маска из встроенного SVG: без внешнего файла и без правки разметки,
   цвет берёт у текста. */
.header-phone {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    background: linear-gradient(180deg, #34d16a 0%, #22a851 45%, #178a41 100%);
    color: white;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    text-decoration: none;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 3px 0 #0f6330,
        0 6px 14px rgba(0, 0, 0, 0.3);
    transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.header-phone::before {
    content: '';
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6.6%202.2C7.3%202%208%202.3%208.3%203L9.6%206.1C9.9%206.8%209.7%207.6%209.1%208L7.6%209.1C8.7%2011.5%2012.5%2015.3%2014.9%2016.4L16%2014.9C16.4%2014.3%2017.2%2014.1%2017.9%2014.4L21%2015.7C21.7%2016%2022%2016.7%2021.8%2017.4L21.1%2020C20.9%2020.8%2020.1%2021.3%2019.3%2021.2C10.2%2020.4%203.6%2013.8%202.8%204.7C2.7%203.9%203.2%203.1%204%202.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6.6%202.2C7.3%202%208%202.3%208.3%203L9.6%206.1C9.9%206.8%209.7%207.6%209.1%208L7.6%209.1C8.7%2011.5%2012.5%2015.3%2014.9%2016.4L16%2014.9C16.4%2014.3%2017.2%2014.1%2017.9%2014.4L21%2015.7C21.7%2016%2022%2016.7%2021.8%2017.4L21.1%2020C20.9%2020.8%2020.1%2021.3%2019.3%2021.2C10.2%2020.4%203.6%2013.8%202.8%204.7C2.7%203.9%203.2%203.1%204%202.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.header-phone:hover,
.header-phone:focus-visible {
    background: linear-gradient(180deg, #4ade80 0%, #2cc062 45%, #1f9d4d 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 4px 0 #0f6330,
        0 8px 18px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}

/* Нажатие: кнопка садится на борт, внутрь ложится тень — палец её продавливает. */
.header-phone:active {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 2px 6px rgba(0, 0, 0, 0.28),
        0 1px 0 #0f6330,
        0 2px 6px rgba(0, 0, 0, 0.25);
    transform: translateY(2px);
}

/* Рядом с телефоном — квадратная кнопка «оставить заявку» (просьба владельца
   17.09.2026). Две кнопки идут ОДНОЙ ГРУППОЙ, и группа здесь не ради вида:
   на узком экране порядок в строке задаёт `order`, и он обязан стоять на
   контейнере — висел бы на телефоне, квадрат встал бы перед ним.
   Высота квадрата не задана числом: `align-items: stretch` берёт её у
   телефонной кнопки, `aspect-ratio` делает из неё ширину. Поэтому смена кегля
   телефона больше не расквадрачивает соседа. Боковые поля оставлены как
   запасной путь: браузер без `aspect-ratio` даст ширину по иконке с полями —
   36 px, то есть тот же квадрат, а не узкую полоску. */
.header-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex: 0 0 auto;
}

.header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    aspect-ratio: 1 / 1;
    padding: 0 8px;
    /* Голубая, а не зелёная (решение владельца 18.09.2026): два соседних
       действия разного рода — «позвонить» и «оставить заявку» — одним цветом
       читались как одна кнопка, разрезанная пополам. Оттенок выбран замером:
       белая иконка на середине этого градиента даёт контраст 3,58 против 3,09
       у зелёной кнопки телефона; самый светлый «небесный» вариант давал 2,14
       и отброшен — иконка на нём терялась. */
    background: linear-gradient(180deg, #4cb9f0 0%, #118fd0 45%, #0a6fa6 100%);
    color: white;
    text-decoration: none;
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 3px 0 #064f7a,
        0 6px 14px rgba(0, 0, 0, 0.3);
    transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}

/* Бланк со строками — маска из встроенного SVG, как трубка у телефона: без
   внешнего файла, цвет берётся у текста. Текста на кнопке нет, поэтому её
   название живёт в `aria-label` и `title` (см. dryrent_header_cta). */
.header-cta::before {
    content: '';
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%203h6a1%201%200%200%201%201%201v1H8V4a1%201%200%200%201%201-1z'/%3E%3Cpath%20d='M16%205h2a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V7a2%202%200%200%201%202-2h2'/%3E%3Cpath%20d='M8%2011h8'/%3E%3Cpath%20d='M8%2015h5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%203h6a1%201%200%200%201%201%201v1H8V4a1%201%200%200%201%201-1z'/%3E%3Cpath%20d='M16%205h2a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V7a2%202%200%200%201%202-2h2'/%3E%3Cpath%20d='M8%2011h8'/%3E%3Cpath%20d='M8%2015h5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.header-cta:hover,
.header-cta:focus-visible {
    background: linear-gradient(180deg, #62c6f7 0%, #1a9fdd 45%, #0b7cb8 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 4px 0 #064f7a,
        0 8px 18px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}

.header-cta:active {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 2px 6px rgba(0, 0, 0, 0.28),
        0 1px 0 #064f7a,
        0 2px 6px rgba(0, 0, 0, 0.25);
    transform: translateY(2px);
}

/* Шапка фиксированная: без отступа форма, к которой ведёт кнопка, встала бы
   заголовком ровно под неё. 80 px — высота шапки (66) плюс воздух.
   Этот отступ работает для перехода по ссылке `/#booking` с другой страницы. */
#booking {
    scroll-margin-top: 80px;
}

/* 🔴 Кнопка в шапке листает не сюда, а к САМОМУ полю телефона — иначе на
   телефоне поле уезжает под клавиатуру. Замер 18.09.2026 (375×812): прокрутка
   к началу секции оставляла поле на 541..588 px, а клавиатура закрывает всё
   ниже ~471 px — между заголовком секции и полем стоит таблица тарифов.
   120 px выбраны замером: при 80 подпись «Телефон *» уезжает под шапку,
   при 160 остаётся лишний воздух. Сейчас подпись встаёт на 86 px, поле —
   на 120, то есть видно, во что пишешь, и клавиатура ничего не закрывает. */
#customerPhone {
    scroll-margin-top: 120px;
}

.hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 120px 20px 80px;
    text-align: center;
}

.hero h1 {
    font-size: 2.8em;
    margin-bottom: 20px;
    font-weight: 300;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.hero p {
    font-size: 1.3em;
    margin-bottom: 30px;
    opacity: 0.9;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn {
    background: white;
    color: #667eea;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    transition: transform 0.2s;
}

.cta-btn:hover {
    transform: translateY(-3px);
}

.cta-btn.secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.features {
    padding: 80px 20px;
    background: white;
}

.features-container {
    max-width: 1200px;
    margin: 0 auto;
}

.features h2 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 50px;
    color: #2c3e50;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.feature-card {
    text-align: center;
    padding: 40px 20px;
    border-radius: 15px;
    background: #f8f9fa;
    transition: transform 0.3s;
}

/* «Частые задачи» — ЧЕТЫРЕ карточки, а общий минимум колонки 300px при контейнере
   1200 и зазоре 40 пускает в ряд только три (4×300+3×40 = 1320 > 1200), и четвёртая
   висит одна. Сужаем минимум ТОЛЬКО для этого блока: 4×260+120 = 1160 ≤ 1200.
   Соседний блок «Наши возможности» (6 карточек, 3×2) не трогаем. */
#chastye-zadachi .features-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Карточка-ссылка (блок «Частые задачи»): та же плитка, кликабельная целиком.
   display задаём явно — на inline-элемент в гриде полагаться не хочется. */
a.feature-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    font-size: 4em;
    margin-bottom: 20px;
}

.feature-card h3 {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: #2c3e50;
}

.feature-card p {
    color: #6c757d;
    line-height: 1.6;
}

.booking-title {
    text-align: center;
}

.booking-subtitle {
    text-align: center;
}

.booking-container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 60px;
}

.price-info {
    margin-bottom: 40px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
}

.price-info h3 {
    color: #2c3e50;
    margin-bottom: 20px;
    text-align: center;
}

.price-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.price-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #e1e8ed;
}

.price-item:last-child {
    border-bottom: none;
    font-weight: 600;
    font-size: 1.1em;
}

.booking-form {
    margin-top: 30px;
}

.form-group {
    margin-bottom: 20px;
}

/* Телефон и имя одной строкой. На узком экране — друг под другом: два поля
   по половине ширины телефона там уже нечитаемы. */
.form-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* Поля ДЕЛЯТ ширину строки между собой. 16.09.2026 им задали фиксированную
   ширину «под вводимый контент», и назавтра владелец сказал, что форма
   «кажется съехавшей влево». Так и было: замер на боевой главной (форма 720 px)
   дал 452 px занятых в строке «телефон + имя» и 205 px в строке «этаж + лифт» —
   пустота справа во всю четверть формы читается как сдвиг всей формы.
   Теперь ширина складывается из базиса (кому сколько нужно: дате — на календарь,
   этажу — на две цифры) и доли роста, поэтому строка занимает колонку целиком,
   а поля остаются соразмерны содержимому.
   Адрес и комментарий по-прежнему во всю ширину — там вводят длинный текст. */
.form-row {
    flex-wrap: wrap;
}

.form-row > .form-group {
    flex: 1 1 auto;
}

/* Галка ширину НЕ делит: она по размеру своего текста (владелец 18.09.2026 —
   «а то отцентрованные как-то не очень выглядят»). Строка всё равно занимает
   колонку целиком: остаток забирают поля, которые растут. */
.form-row > .checkbox-inline {
    flex: 0 0 auto;
}

/* Галке min-width не даём: она должна переносить строку целиком, а не
   ужиматься под своим текстом. */
.form-row > .form-group {
    min-width: 0;
}

/* 🔴 Префикс `.form-row >` у каждого правила ОБЯЗАТЕЛЕН. Без него правило весит
   (0,1,0) против (0,2,1) у общего `.form-row > .form-group` выше, и общее
   побеждает: замер 17.09.2026 — телефон с именем получили базис по содержимому,
   вдвоём в строку не влезли и встали друг под другом во всю ширину. */

/* Телефон и имя — ровно пополам: нулевой базис и одинаковый рост. */
.form-row > .form-group-phone,
.form-row > .form-group-name { flex: 1 1 0; }

/* Тройки «дата + площадь + пыль» и «домофон + этаж + лифт»: доли роста держат
   пропорции — иначе поле этажа получило бы столько же места, сколько домофон. */
.form-row > .form-group-date     { flex: 1 1 150px; }
.form-row > .form-group-area     { flex: 0.6 1 90px; }
.form-row > .form-group-intercom { flex: 1.2 1 180px; }
.form-row > .form-group-floor    { flex: 0.5 1 80px; }

/* Поле телефона: «+7» стоит слева подписью, в самом поле — 10 цифр. */
.form-group-phone .phone-prefix {
    display: inline-flex;
    align-items: center;
    padding: 12px 12px;
    border: 2px solid #e1e8ed;
    border-right: 0;
    border-radius: 8px 0 0 8px;
    background: #f5f7f9;
    color: #2c3e50;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

/* Инпут телефона встаёт вплотную к подписи. `width: auto` перебивает общее
   `.form-group input { width: 100% }`, иначе поле вылезает за подпись. */
.form-group-phone input[type="tel"] {
    /* Базис задан ЧИСЛОМ, а не auto: при auto поле просит ширину по содержимому
       (у input по умолчанию size=20, это ~230 px), сумма с префиксом не влезала
       в группу, и flex переносил «+7» на отдельную строку. Замерено 16.09.2026. */
    width: 120px;
    flex: 1 1 120px;
    min-width: 0;
    border-radius: 0 8px 8px 0;
}

.form-group-phone {
    display: flex;
    flex-wrap: wrap;
}

.form-group-phone label {
    flex: 1 0 100%;
}

.field-hint {
    flex: 1 0 100%;
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.35;
    color: #6c757d;
}


/* ОТКАЗ ПОЛЯ — своя пометка вместо нативного пузыря браузера. Пузырь висит на
   самом поле: телефон и кнопка отправки разнесены на 1291 px при экране 812
   (замер 18.09.2026), а у согласия анкер вовсе 9×9 внутри пилюли — там при
   нажатии не происходило НИЧЕГО видимого. Ставит и снимает booking.js,
   он же прокручивает к полю и наводит фокус. */
.field-error {
    /* Та же раскладка, что у `.field-hint`: `.form-group-phone` — это flex,
       и без базиса 100% сообщение встанет в строку рядом с полем. */
    flex: 1 0 100%;
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
    color: #c0392b;
}

/* Рамка поля краснеет заодно: на длинной форме сообщение под полем легко
   пропустить, а цвет виден боковым зрением. Вес (0,5,1) перебивает и
   `.form-group input` (0,1,1), и `:focus` (0,2,1) — подсветка держится,
   пока человек не начал править. Лампочки исключены: у них `border: 0`,
   красить нечего, а пилюлю красит правило ниже. */
.form-group.has-error input:not([type="checkbox"]):not([type="radio"]),
.form-group.has-error select,
.form-group.has-error textarea {
    border-color: #c0392b;
}

/* У согласия «полем» человек считает пилюлю, а не лампочку внутри неё.
   Вес (0,3,0) против `.form-group .checkbox-inline` (0,2,0). */
.form-group.has-error .checkbox-inline {
    border-color: #c0392b;
}


/* Строка «этаж + галка про лифт»: поле этажа узкое, галка встаёт рядом и
   выравнивается по нижнему краю поля, а не по подписи над ним. */
.form-row-tight {
    gap: 14px;
    align-items: flex-end;
}

/* ПЕРЕКЛЮЧАТЕЛЬ ФОРМЫ — овальная кнопка с лампочкой. ОДНА конструкция на два
   вида: галки («Строительной пыли нет», «Без лифта») и выбор региона. Так
   просил владелец 18.09.2026, и так честнее: два элемента с одинаковым смыслом
   не должны различаться устройством.
   Ширина — по содержимому: растягивать нечего, текст стоит у своего огонька.
   🔴 Пара селекторов `.X` + `.form-group .X` ОБЯЗАТЕЛЬНА у обоих видов: они
   стоят внутри fieldset.form-group, и на них падает `.form-group label` весом
   (0,1,1) — с `font-weight: 600` и `color: #2c3e50`. Без пары пилюли станут
   жирными, а выбранный и невыбранный регион — одного цвета, то есть ровно тем,
   на что владелец жаловался 16.09. */
.checkbox-inline,
.form-group .checkbox-inline,
.radio-chip,
.form-group .radio-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border: 1px solid #e1e8ed;
    border-radius: 999px;
    background: #fff;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 400;
    color: #757575;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

/* Галка стоит в одной строке с полями — ей нужен тот же нижний отступ, что
   у поля, иначе строки слипнутся. Чипы региона живут в своей строке с gap. */
.checkbox-inline,
.form-group .checkbox-inline {
    margin-bottom: 20px;
}

.checkbox-inline:hover,
.radio-chip:hover {
    border-color: #9fb3c8;
}

/* Отмеченный — контрастный: разницу держат лампочка и чёрный текст против
   серого. Заливки нет ни у того, ни у другого (решение владельца 17.09.2026). */
.checkbox-inline input[type="checkbox"]:checked + span,
.radio-chip input[type="radio"]:checked + span {
    color: #2c3e50;
}

.checkbox-inline span,
.radio-chip span {
    transition: color 0.15s;
}

/* 🔴 Сам переключатель ПРЕВРАЩЁН в лампочку (`appearance: none`), а не спрятан
   под оформление. Две причины, обе измеренные.
   (1) Согласие на ПД обязательное, а спрятанный `required`-элемент браузер не
   может ни показать, ни сфокусировать — он отказывается отправлять форму и не
   объясняет человеку причину.
   (2) Скрытый инпут ложится в координату (0,0) документа: при выборе региона
   страница уезжала в начало (замер 16.09.2026, от −884 до −1443 px), а без
   удлинённого селектора он же получал ширину 375 px и давал горизонтальный
   скролл на телефоне (замер 20.08.2026). Видимой лампочке это не грозит.
   Пара селекторов с `.form-group` — против `.form-group input { width: 100% }`
   и `.form-group label`, которые иначе перебивают по специфичности. */
.checkbox-inline input[type="checkbox"],
.form-group .checkbox-inline input[type="checkbox"],
.radio-chip input[type="radio"],
.form-group .radio-chip input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 9px;
    min-width: 9px;
    height: 9px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ccd4dc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.18);
    transition: background 0.15s, box-shadow 0.15s;
    cursor: pointer;
}

/* Горит зелёным со свечением — тот же огонёк, что у выбранного региона
   и что на самих осушителях. */
.checkbox-inline input[type="checkbox"]:checked,
.form-group .checkbox-inline input[type="checkbox"]:checked,
.radio-chip input[type="radio"]:checked,
.form-group .radio-chip input[type="radio"]:checked {
    background: #3ee07a;
    box-shadow:
        0 0 7px 2px rgba(62, 224, 122, 0.7),
        inset 0 0 2px rgba(255, 255, 255, 0.85);
}

/* Лампочка маленькая — фокус с клавиатуры обводим заметно. */
.checkbox-inline input[type="checkbox"]:focus-visible,
.form-group .checkbox-inline input[type="checkbox"]:focus-visible,
.radio-chip input[type="radio"]:focus-visible,
.form-group .radio-chip input[type="radio"]:focus-visible {
    outline: 2px solid #2c3e50;
    outline-offset: 3px;
}

/* Вложенный fieldset не должен добавлять свой отступ поверх родительского. */
.form-fieldset .form-group:last-child {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .form-row {
        flex-direction: column;
        gap: 0;
        /* В колонке align-items управляет уже ШИРИНОЙ: без stretch поля
           сжимаются по содержимому (замер 16.09.2026 на 375 px — поле имени
           195 px вместо 295). На широком экране flex-start остаётся: там он
           не даёт полям тянуться по высоте друг за другом. */
        align-items: stretch;
    }

    /* 🔴 В колонке flex-basis задаёт уже ВЫСОТУ, а не ширину: без этого сброса
       поле даты растянулось бы на 150 px в высоту. Ширину даёт align-items:
       stretch выше. Домофон отдельной строкой больше не нужен — он переехал
       внутрь строки (17.09.2026) и попадает под общее правило. */
    .form-row > .form-group {
        flex: 0 0 auto;
        width: 100%;
    }

    /* Галка и в колонке по размеру текста: растянутый на всю ширину овал
       с текстом посередине выглядел пустым (владелец 18.09.2026). */
    .form-row > .checkbox-inline {
        flex: 0 0 auto;
        width: auto;
    }
}

/* Группа «Адрес аренды»: регион чипами-радиокнопками + текстовый адрес под ними.
   fieldset по умолчанию несёт свою рамку и отступы — снимаем, вид задаём сами. */
.form-fieldset {
    border: 0;
    padding: 0;
    margin-inline: 0;
}

.form-fieldset legend {
    padding: 0;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c3e50;
}

.radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

/* Чип региона собран ТОЙ ЖЕ конструкцией, что галка (см. «ПЕРЕКЛЮЧАТЕЛЬ ФОРМЫ»
   выше): овал на самом <label>, лампочка — сама радиокнопка. Отдельных правил
   ему больше не нужно.
   Снято 18.09.2026 вместе со скрытым инпутом: `position: relative` у чипа
   (держал абсолютно позиционированное радио), правило нулевой ширины и
   псевдо-лампочка `span::before`. Не возвращать: они лечили последствия
   скрытия, которого больше нет. */

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c3e50;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e1e8ed;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3498db;
}

/* Кнопка отправки собрана по образцу кнопки телефона в шапке (владелец
   18.09.2026: «по стилистике как в шапке кнопка с телефоном, более выпуклой»)
   и сделана выпуклее неё: борт 5 px против 3 и тень глубже — это главное
   действие страницы. Конструкция та же: вертикальный градиент, светлая кромка
   сверху, тёмная снизу, сплошной борт и мягкая тень под ним.
   ⚠️ Цвет ОСТАВЛЕН СИНИМ: зелёный на сайте занят телефоном, две одинаковые
   зелёные кнопки спорили бы за внимание. Перекрасить — две строки (градиент
   и цвет борта), решение владельца.
   ⚠️ Класс носит и форма отзыва (`otzyvy/`, `_msk/`) — правим глобально
   намеренно: две кнопки отправки разного вида на одном сайте хуже. */
.submit-btn {
    display: block;
    width: 100%;
    padding: 16px 30px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, #4aa8e8 0%, #2f88c8 45%, #216fa8 100%);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 5px 0 #17527d,
        0 10px 20px rgba(0, 0, 0, 0.3);
    transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.submit-btn:hover,
.submit-btn:focus-visible {
    background: linear-gradient(180deg, #5cb6f2 0%, #3a97d8 45%, #2680bd 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 6px 0 #17527d,
        0 12px 24px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}

/* Нажатие: кнопка садится на борт, тень уходит внутрь — палец её продавливает. */
.submit-btn:active {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 2px 7px rgba(0, 0, 0, 0.3),
        0 1px 0 #17527d,
        0 3px 8px rgba(0, 0, 0, 0.25);
    transform: translateY(4px);
}

.loading {
    display: none;
    text-align: center;
    padding: 20px;
}

.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 0 auto 10px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.result {
    margin-top: 20px;
    padding: 20px;
    border-radius: 8px;
    display: none;
}

.result.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.result.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.faq {
    padding: 80px 20px;
    background: #f8f9fa;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq h2 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 50px;
    color: #2c3e50;
}

.faq-item {
    background: white;
    border-radius: 10px;
    padding: 20px 25px;
    margin-bottom: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.faq-item h3 {
    font-size: 1.15em;
    margin-bottom: 8px;
    color: #2c3e50;
}

.faq-item p {
    color: #6c757d;
}

.footer {
    background: #2c3e50;
    color: white;
    padding: 40px 20px;
    text-align: center;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
}

.footer-links a {
    color: white;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.footer-links a:hover {
    opacity: 1;
}

.footer p {
    opacity: 0.7;
}

/* Подсказки у кнопок шапки (владелец 18.09.2026: «всплывающие подсказки —
   Позвонить, Форма заказа»). Свои, а не нативный `title`: нативная всплывает
   через секунду и выглядит системной. Показываем и по наведению, и по фокусу
   с клавиатуры. На телефоне наведения нет — подсказка просто не появляется,
   и это нормально: там у кнопок есть свои подписи в меню. */
.header-tip {
    position: relative;
}

.header-tip::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    border-radius: 7px;
    background: #1f2d3a;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s;
    z-index: 30;
}

.header-tip:hover::after,
.header-tip:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

.form-group.form-consent {
    margin-top: 26px;
}

/* Текст согласия — обычный абзац, а подтверждение под ним отдельной кнопкой
   (владелец 18.09.2026). Прежняя конструкция `label` вокруг всего текста снята
   вместе со своими правилами: кнопка берёт оформление у общего переключателя. */
.consent-text {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.55;
    color: #6c757d;
}

.consent-text a {
    color: #2980b9;
}

.footer-legal {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 14px;
    line-height: 1.75;
    opacity: 0.75;
}

.footer-legal a {
    color: white;
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 1.9em;
    }

    .doc h1 {
        font-size: 1.5em;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    /* Блок «Частые задачи» перебивает общее правило по специфичности (id + класс),
       поэтому на узких экранах его нужно вернуть в одну колонку ЯВНО — иначе он
       даёт две, когда соседний блок уже даёт одну. Замерено на 606 px. */
    #chastye-zadachi .features-grid {
        grid-template-columns: 1fr;
    }

    .footer-links {
        flex-direction: column;
        gap: 15px;
    }
}

/* ── Документ-страница (/privacy/ и будущие юр-страницы) ─────────────────── */
/* Верхний отступ, как у .hero, освобождает место под фиксированную шапку. */

.doc {
    max-width: 820px;
    margin: 0 auto;
    padding: 130px 20px 70px;
}

.doc h1 {
    font-size: 2em;
    font-weight: 300;
    color: #2c3e50;
    margin-bottom: 10px;
    line-height: 1.25;
}

.doc .rev {
    color: #6c757d;
    font-size: 15px;
    margin-bottom: 35px;
}

.doc h2 {
    font-size: 1.25em;
    color: #2c3e50;
    margin: 34px 0 12px;
}

.doc p {
    margin-bottom: 12px;
}

.doc ul {
    margin: 0 0 12px 22px;
}

.doc li {
    margin-bottom: 7px;
}

.doc a {
    color: #2980b9;
}

.doc .req {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 22px 24px;
    margin-bottom: 12px;
    line-height: 1.8;
}

.doc .back {
    display: inline-block;
    margin-top: 40px;
    background: #3498db;
    color: white;
    padding: 13px 26px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

/* ── Посадочные страницы Тира A ──────────────────────────────────────────── */
/* Классы только НОВЫЕ: ни одно существующее правило не переопределяется,     */
/* поэтому главная и /privacy/ рендерятся байт-в-байт как раньше.             */

.crumbs {
    max-width: 900px;
    margin: 0 auto 22px;
    font-size: 15px;
    opacity: 0.85;
}

.crumbs a {
    color: inherit;
    text-decoration: underline;
}

.crumbs-sep {
    margin: 0 8px;
    opacity: 0.6;
}

/* Блок фактов: то, что языковые модели вытаскивают со страницы дословно
   (адрес пункта, минимальный срок, доставка, модель). Явный <dl> вместо
   прозы — чтобы факт был отделим от текста и машиной, и глазом. */

.facts {
    padding: 70px 20px;
    background: #f8f9fa;
}

.facts-container {
    max-width: 900px;
    margin: 0 auto;
}

.facts h2 {
    font-size: 2em;
    color: #2c3e50;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 300;
}

.facts-list {
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr;
    gap: 0;
    background: white;
    border-radius: 12px;
    padding: 8px 26px;
}

.facts-list dt {
    font-weight: 600;
    color: #2c3e50;
    padding: 16px 20px 16px 0;
    border-top: 1px solid #eceff1;
}

.facts-list dd {
    margin: 0;
    padding: 16px 0;
    color: #444;
    border-top: 1px solid #eceff1;
}

.facts-list dt:first-of-type,
.facts-list dt:first-of-type + dd {
    border-top: 0;
}

/* Пошаговая инструкция и расчёт стоимости */

.article {
    padding: 70px 20px;
    background: white;
}

/* Шапка фиксированная, и её высота — 86 px на любой ширине экрана (замер
   15.09.2026), поэтому первый блок страницы сам отодвигается из-под неё:
   у .hero на это 120 px, у .doc — 130 px, а у .article было всего 70,
   и верх секции уходил под шапку на 16 px — на гео-страницах и страницах
   объектов вместе с хлебными крошками.
   Селекторы нарочно без «>» от .page: под администратором Битрикс
   заворачивает содержимое страницы в свой div области правки, и прямой
   потомок перестаёт совпадать. :first-of-type считает только секции,
   поэтому ни этот div, ни крошки перед секцией его не сбивают. */
.page .article:first-of-type {
    padding-top: 90px;
}

/* На отзывах и форме отзыва крошки стоят не в секции, а перед ней, и отступа
   у них не было вовсе — под шапкой они скрывались целиком. Отступ сверху
   берут на себя сами крошки, а секция за ними его уже не повторяет.
   Ширина 940 = 900 контента + поля по 20 px: так текст крошек встаёт ровно
   по левому краю заголовка ниже. Крошки внутри секций правило не трогает. */
.page .crumbs {
    max-width: 940px;
    padding: 90px 20px 0;
}
.page section .crumbs {
    max-width: 900px;
    padding: 0;
}
.page .crumbs + .article {
    padding-top: 0;
}

.article.alt {
    background: #f8f9fa;
}

.article-container {
    max-width: 900px;
    margin: 0 auto;
}

.article h2 {
    font-size: 2em;
    color: #2c3e50;
    margin-bottom: 22px;
    font-weight: 300;
}

.article h3 {
    font-size: 1.25em;
    color: #2c3e50;
    margin: 28px 0 10px;
}

.article p {
    margin-bottom: 14px;
    color: #444;
}

.article ol,
.article ul {
    margin: 0 0 16px 22px;
    color: #444;
}

.article li {
    margin-bottom: 10px;
}

.article .note {
    background: #f8f9fa;
    border-left: 4px solid #3498db;
    border-radius: 0 8px 8px 0;
    padding: 16px 20px;
    margin: 22px 0;
    color: #444;
}

.calc-table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0 8px;
}

.calc-table th,
.calc-table td {
    text-align: left;
    padding: 13px 14px;
    border-bottom: 1px solid #eceff1;
    vertical-align: top;
}

.calc-table th {
    color: #2c3e50;
    font-size: 15px;
}

.calc-table td:last-child {
    white-space: nowrap;
    font-weight: 600;
    color: #2c3e50;
}

/* Таблица возмещения на /pravila-arendy/.
   🔴 Своих правил у неё НЕ БЫЛО вовсе — разметка `.price-table` отдавалась голой,
   строки сливались в сплошной текст. Именно это и есть замечание §8 вычитки
   «оформить красивее, чтобы строки были видны», а не вопрос вкуса.
   .table-wrap даёт горизонтальную прокрутку на узком экране: таблица с суммами
   не должна тянуть за собой всю страницу. */
.table-wrap {
    overflow-x: auto;
    margin: 18px 0 8px;
}

.price-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 420px;
}

.price-table th,
.price-table td {
    text-align: left;
    padding: 13px 14px;
    border-bottom: 1px solid #e1e8ed;
    vertical-align: top;
}

.price-table thead th {
    color: #2c3e50;
    font-size: 15px;
    background: #f8f9fa;
    border-bottom: 2px solid #d6dee5;
}

/* Зебра: на длинном списке позиций глаз теряет строку между «что» и «сколько». */
.price-table tbody tr:nth-child(even) {
    background: #fafbfc;
}

.price-table td:last-child {
    white-space: nowrap;
    font-weight: 600;
    color: #2c3e50;
    text-align: right;
}

/* ── Фотографии с объектов ───────────────────────────────────────────────── */
/* Кадры снимаются телефоном и почти все ВЕРТИКАЛЬНЫЕ. Поэтому размер задаёт   */
/* высота, а не ширина: при ограничении по ширине вертикальный кадр вырастает  */
/* на полтора экрана. Обрезку (object-fit: cover) не берём — на лучших кадрах  */
/* прибор стоит внизу кадра, кроп его срежет.                                  */

.photo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin: 26px 0 8px;
}

/* Высоту держит FIGURE, а не max-height на самой картинке. Причина —
   резервирование места: при `width:auto; height:auto; max-height:420px`
   ещё не загруженный кадр занимает 0×0, страница дёргается при подгрузке
   (CLS), а до загрузки на её месте пусто. Фиксированная высота figure даёт
   браузеру место сразу, ширину он берёт из соотношения width/height. */
.photo-row figure {
    margin: 0;
    flex: 0 1 auto;
    height: 420px;
}

.photo-row img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(44, 62, 80, .12);
}

.photo-caption {
    max-width: 900px;
    margin: 6px auto 0;
    color: #7f8c8d;
    font-size: 15px;
    text-align: center;
}

/* Перелинковка в подвале страницы */

.related {
    padding: 60px 20px;
    background: #f8f9fa;
}

.related-container {
    max-width: 900px;
    margin: 0 auto;
}

.related h2 {
    font-size: 1.6em;
    color: #2c3e50;
    margin-bottom: 18px;
    font-weight: 300;
}

.related ul {
    list-style: none;
}

.related li {
    margin-bottom: 12px;
}

.related a {
    color: #2980b9;
    font-size: 17px;
}

@media (max-width: 768px) {
    .facts-list {
        grid-template-columns: 1fr;
        padding: 6px 20px;
    }

    .facts-list dt {
        padding: 16px 0 2px;
    }

    .facts-list dt + dd {
        border-top: 0;
        padding-top: 0;
    }

    .facts h2,
    .article h2 {
        font-size: 1.6em;
    }

    .calc-table th,
    .calc-table td {
        padding: 10px 8px;
        font-size: 15px;
    }

    /* На телефоне два вертикальных кадра рядом дают по ~150 px ширины —
       разглядеть нечего. Кадр на всю ширину, друг под другом; место до
       загрузки резервируется соотношением из атрибутов width/height. */
    .photo-row figure {
        height: auto;
        width: 100%;
    }

    .photo-row img {
        width: 100%;
        height: auto;
        max-height: 60vh;
        object-fit: cover;
    }
}

/* ── Уведомление о cookie ────────────────────────────────────────────────── */
/* Прилепленная строка внизу окна. Узкая и НЕ перекрывает контент модально:   */
/* на посадочных из поиска блокирующий оверлей бьёт по поведенческим, ради    */
/* которых эти страницы и делаются.                                          */

/* Уведомление о cookie стоит В ПОТОКЕ, СРАЗУ ПОД подвалом, а не фиксировано
   у нижней кромки экрана (вычитка 17.08.2026, §9): фиксированная полоса
   перекрывала подвал, и реквизиты было не прочитать.
   🔴 Отсюда же второе требование владельца — «после закрытия не должно
   оставаться пустого пространства»: оно выполняется САМО, потому что
   [hidden] + display:none убирает блок из потока. Вернёшь position:fixed —
   вернёшь и перекрытие подвала. */
.cookie-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 12px 20px;
    background: rgba(44, 62, 80, 0.97);
    color: #fff;
    font-size: 14px;
    line-height: 1.45;
}

.cookie-notice[hidden] {
    display: none; /* [hidden] иначе проигрывает display:flex выше */
}

.cookie-notice p {
    margin: 0;
    max-width: 900px;
}

.cookie-notice a {
    color: #fff;
    text-decoration: underline;
}

.cookie-notice-btn {
    flex: 0 0 auto;
    background: #fff;
    color: #2c3e50;
    border: 0;
    border-radius: 6px;
    padding: 9px 22px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s;
}

.cookie-notice-btn:hover {
    opacity: 0.85;
}

@media (max-width: 768px) {
    .cookie-notice {
        gap: 10px;
        padding: 12px 16px;
        font-size: 13px;
    }

    .cookie-notice-btn {
        width: 100%;
    }
}

/* ── Знак в шапке и видеоинструкция ──────────────────────────────────────── */

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.logo img {
    display: block;
    flex: 0 0 auto;
}

.video-instr {
    display: block;
    width: 100%;
    max-width: 420px;   /* ролик вертикальный: во всю ширину он бы занял экран */
    height: auto;
    margin: 22px auto 0;
    border-radius: 12px;
    background: #000;
}

/* Ссылки на профили с отзывами в подвале */

.footer-profiles {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 15px;
}

/* Иконка площадки — буквенный знак в кружке (§9). Текстом, а не картинкой:
   ни одного обращения к чужому домену и нечего кешировать. */
.profile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    transition: background 0.2s, border-color 0.2s;
}

/* В подвале бейдж центрируется вместе с иконками площадок, а не липнет
   к левому краю: весь подвал выровнен по центру. */
.footer .rating-badge {
    display: flex;
    justify-content: center;
    margin: 18px 0 0;
}

/* Двухбуквенный знак («VK») тем же кеглем в кружок 38 px не влезает. */
.profile-icon-wide {
    font-size: 14px;
    letter-spacing: 0.5px;
}

.profile-icon:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Название площадки для скринридера: ряд кружков без него нечитаем.
   clip-path вместо display:none — скрытое display:none не озвучивается. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.footer-offer {
    margin-top: 10px;
}

/* Быстрый старт рядом с видеоинструкцией.
   Две колонки на десктопе, одна на мобильном. Видео теряет верхний margin:
   в ряду его задаёт gap, иначе колонки разъезжаются по вертикали. */

.video-row {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-top: 22px;
}

.video-row .video-instr {
    margin: 0;
    max-width: 100%;
    display: block;
}

/* Два ролика рядом: новый корпус и старый. Подпись живёт в <figcaption>
   своего <figure> — связь подписи с роликом задана разметкой, а не тем,
   что они оказались соседями. */
.video-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.video-item {
    margin: 0;
    min-width: 0;
}

.video-item figcaption {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.3;
    text-align: center;
    opacity: 0.85;
}

/* Колонка с видео: ролик + ссылка на руководство ПОД ним (§1) — раньше под
   видео была пустота, а вся текстовая «колбаса» уезжала во вторую колонку. */
.video-col {
    min-width: 0;
}

.video-col .qs-manual {
    margin: 14px 0 0;
}

/* Блок «Какой осушитель привозим»: фото слева, характеристики справа. */
.device-row {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-top: 18px;
}

.device-row .photo-row {
    margin: 0;
}

.device-specs > p {
    margin-top: 0;
}

.device-list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px 18px;
    margin: 16px 0 0;
}

.device-list dt {
    font-weight: 600;
    color: #2c3e50;
}

.device-list dd {
    margin: 0;
}

@media (max-width: 768px) {
    .device-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .device-list {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .device-list dd {
        margin-bottom: 10px;
    }
}

/* Плашка тарифа над формой — две строки вместо сетки из карточек (§1). */
.price-line {
    margin: 0;
    text-align: center;
    font-size: 1.05em;
}

.quickstart h3 {
    margin: 0 0 10px;
    font-size: 19px;
}

.quickstart h3 + p,
.quickstart ol + h3 {
    margin-top: 0;
}

.quickstart > * + h3 {
    margin-top: 22px;
}

.qs-steps {
    margin: 0;
    padding-left: 22px;
}

.qs-steps li {
    margin-bottom: 7px;
}

.qs-warn {
    border-left: 3px solid #d9822b;
    padding-left: 14px;
}

.qs-manual {
    margin-top: 20px;
}

@media (max-width: 800px) {
    .video-row {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .video-row .video-instr {
        max-width: 100%;
        margin: 0;
    }

    /* Ролики в СТОПКУ, каждый во всю ширину колонки — решение владельца
       25.09.2026. Прежний довод «стопка уводит текст вниз» им снят: два
       вертикальных ролика по ~170 px на телефоне — это превью, на котором
       не разобрать ни панель, ни подписи кнопок, ради которых их и смотрят.
       Ограничение ширины на телефон не влияет (колонка там уже) — оно держит
       кадр на планшете, где иначе один ролик занял бы полтора экрана. */
    .video-pair {
        grid-template-columns: 1fr;
        gap: 18px;
        max-width: 520px;
        margin: 0 auto;
    }
}

/* Подпись разработчика в подвале — тише реквизитов, но кликабельна */

.footer-dev {
    margin-top: 14px;
    font-size: 14px;
    opacity: 0.75;
}

.footer-dev a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ⚠️ Цвет ОБЯЗАТЕЛЕН: без него ссылка берёт браузерный синий и на тёмном
   подвале почти не читается. Поймано только визуальной проверкой —
   ни tidy, ни разметка такого не видят. */

.footer-dev a {
    color: inherit;
}

/* Знак студии рядом с названием. Цвет не задаём: он приходит из currentColor
   в самом SVG, то есть всегда совпадает с цветом подписи. */

.footer-dev-logo {
    height: 13px;
    width: auto;
    vertical-align: -1px;
    margin-right: 5px;
}

/* ── Схема районов (S5a) ──────────────────────────────────────────────────── */
/* Своя SVG вместо картографического API: ноль обращений к третьей стороне,    */
/* ноль лимитов и, в отличие от картинки, район кликабелен, а его название     */
/* лежит в разметке. Геометрия — в local/php_interface/geo-data.php.           */

.geomap {
    margin: 28px 0 10px;
}

.geomap-svg {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 0 auto;
}

.geomap-shape {
    fill: #e8eef3;
    stroke: #fff;
    stroke-width: 1.4;
    stroke-linejoin: round;
    transition: fill 0.15s;
}

.geomap-shapes a:hover .geomap-shape,
.geomap-shapes a:focus .geomap-shape,
.geomap-shape.is-active {
    fill: #7fb3d5;
}

/* Обводка только для клавиатуры: рамка вокруг всей фигуры при клике мышью
   выглядит как дефект, а без неё табом невозможно понять, где ты. */
.geomap-shapes a:focus-visible .geomap-shape {
    stroke: #2c3e50;
    stroke-width: 2.5;
}

.geomap-city {
    fill: #d8e4ee;
    stroke: #fff;
    stroke-width: 1.4;
}

/* Ладога и Онега поверх районов — иначе административные лучи, которыми
   поделена вода, читаются как дефект отрисовки. */
.geomap-water {
    fill: #dce9f2;
}

.geomap-kad {
    fill: none;
    stroke: #b0413e;
    stroke-width: 2.2;
    stroke-dasharray: 6 4;
}

/* 🔴 Всё, что нарисовано ПОВЕРХ районов, курсор не ловит — иначе оно съедает
   клик по району под собой, а район остаётся невыбранным. Оба случая пойманы
   живым кликом в браузере, скриптовая приёмка их не видит (в разметке всё на
   месте): подпись района — самая естественная цель клика, а пунктир КАД идёт
   через весь город и перехватывал клик на всей своей длине. */
.geomap-labels,
.geomap-pins text,
.geomap-kad,
.geomap-water,
.geomap-city {
    pointer-events: none;
}

.geomap-labels text {
    font-family: inherit;
    font-weight: 600;
    fill: #33475b;
    text-anchor: middle;
    /* Белая подложка под буквами: без неё подпись теряется на границе районов. */
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 3;
    stroke-linejoin: round;
}

.geomap-labels .geomap-city-label {
    font-size: 15px;
    fill: #1b3a57;
}

.geomap-pins circle {
    fill: #b0413e;
    stroke: #fff;
    stroke-width: 2;
}

.geomap-pins text {
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    fill: #b0413e;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 4;
    stroke-linejoin: round;
}

.geomap-legend {
    max-width: 900px;
    margin: 6px auto 0;
    font-size: 14px;
    color: #667;
}

/* Плашка рисуется псевдоэлементом, а не пустым <span>: пустой элемент
   ради цвета — и разметочный мусор, и предупреждение tidy на каждой странице. */
.geomap-key::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    border-radius: 3px;
    vertical-align: -2px;
}

.geomap-key-city::before {
    background: #d8e4ee;
}

.geomap-key-pin::before {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #b0413e;
}

.geomap-key-kad::before {
    height: 0;
    width: 18px;
    border-top: 3px dashed #b0413e;
    border-radius: 0;
    vertical-align: 3px;
}

/* ── Крупный план района: посёлки (S5b) ───────────────────────────────────── */
/* Отдельный набор поверх .geomap-*: там схема РЕГИОНА с кликабельными          */
/* районами, здесь один район крупно и точки посёлков. Общие слои (город, вода, */
/* КАД, пины) переиспользуются как есть.                                        */

.geonp-svg {
    /* Карта детальная и у Всеволожского вытянута на север: без потолка по
       высоте она занимает на десктопе полтора экрана. */
    max-height: 78vh;
    max-width: 760px;
}

.geonp-nb {
    fill: #eef1f4;
    stroke: #fff;
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.geonp-area {
    fill: #dbe9dd;
    stroke: #8fae95;
    stroke-width: 2;
    stroke-linejoin: round;
}

.geonp-dot {
    fill: #33475b;
    transition: fill 0.15s, r 0.15s;
}

/* Посёлок, где уже работали, — тем же зелёным, что район с кейсом на схеме
   области: один язык на обеих картах. */
.geonp-dots a:hover .geonp-dot,
.geonp-dots a:focus .geonp-dot,
.geonp-dot.is-active {
    fill: #b0413e;
}

.geonp-dots a:focus-visible .geonp-dot {
    stroke: #2c3e50;
    stroke-width: 2.5;
}

.geonp-labels text {
    font-size: 15px;
}

/* Контуры курсор не ловят: иначе они съедают клик по точке под собой — тот же
   дефект, что пойман живым кликом на схеме области. А ПОДПИСИ его ловят и ведут
   туда же, куда точка под ними: это один и тот же объект, и название — самая
   естественная цель нажатия (решение владельца 31.08.2026). */
.geonp-nb,
.geonp-area {
    pointer-events: none;
}

.geonp-labels a {
    cursor: pointer;
}

.geonp-labels a:hover .geonp-lbl,
.geonp-labels a:focus .geonp-lbl {
    fill: #b0413e;
}

/* Посёлок, на странице которого мы сейчас: он не ссылка, поэтому и выглядеть
   должен иначе — иначе человек ищет, куда нажать, и нажимает в никуда. */
.geonp-dot.is-current {
    fill: #b0413e;
    stroke: #fff;
    stroke-width: 3;
}

.geonp-lbl.is-current {
    fill: #b0413e;
    font-weight: 700;
}

.geonp-key-dot::before {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #33475b;
}

.geonp-table tbody tr:target {
    background: #eaf4fb;
    /* Шапка фиксированная, и без отступа строка, к которой ведёт клик по точке,
       встаёт ровно под неё — подсветка есть, а строки не видно (замер в браузере:
       top = 0 при высоте шапки 76 px). Отступ урезан вместе с высотой шапки
       17.09.2026: та стала 66 px на десктопе и 56 на телефоне. */
    scroll-margin-top: 76px;
}

/* На узком экране таблица посёлков — самая широкая на странице: четыре
   колонки, и первая с длинными названиями. Уменьшаем кегль, а не режем
   колонки: расстояние и подача — то, ради чего человек её и открыл. */
@media (max-width: 560px) {
    .geonp-table {
        font-size: 14px;
    }

    .geonp-lbl {
        font-size: 20px;
    }
}

/* Карточка района: её наполняет geomap.js ИЗ СТРОКИ ТАБЛИЦЫ — своих данных
   у неё нет и быть не должно, иначе карта и таблица разъедутся. */
.geomap-panel {
    max-width: 900px;
    margin: 14px auto 0;
    padding: 16px 20px;
    background: #f8f9fa;
    border-left: 4px solid #3498db;
    border-radius: 0 8px 8px 0;
}

.geomap-panel h3 {
    font-size: 1.15em;
    color: #2c3e50;
    margin: 0 0 8px;
}

.geomap-panel dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
    margin: 0;
}

.geomap-panel dt {
    color: #667;
}

.geomap-panel dd {
    margin: 0;
    font-weight: 600;
    color: #2c3e50;
}

/* Строка района в таблице: подсвечивается и при переходе по якорю (без JS),
   и при выборе района на схеме. */
.geo-table tbody tr:target,
.geo-table tbody tr.is-active {
    background: #eaf4fb;
}

.geo-table th[scope="row"] {
    font-weight: 600;
    color: #2c3e50;
}

.geo-caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 6px;
    color: #667;
    font-size: 14px;
}

.geo-sub {
    display: block;
    font-weight: 400;
    font-size: 13px;
    color: #7a8794;
}

@media (max-width: 768px) {
    /* На телефоне подпись района ужимается до 5 пикселей — читать нечего,
       а грязь на схеме остаётся. Название района всё равно есть в таблице
       под картой и во всплывающей подсказке. */
    .geomap-labels {
        display: none;
    }

    /* 🔴 У КРУПНОГО ПЛАНА района подписи скрывать нельзя: там масштаб втрое
       мельче области, и карта без названий отвечает на вопрос «возите ли вы
       в мой посёлок» одними безымянными точками. Оставляем крупнейшие и
       задираем кегль — при 15px на экране 606 они выходили в 8 px. */
    .geonp-labels {
        display: block;
    }

    .geonp-lbl {
        display: none;
    }

    .geonp-lbl.is-big {
        display: block;
        font-size: 30px;
    }

    /* Кегль подписи пункта на узком экране подобран ЗАМЕРОМ, а не на глаз:
       при 22px самая длинная подпись выходила за правый край viewBox (1000
       единиц) и теряла последнюю букву. Замер повторять при смене состава
       точек — длина подписи считается от самой длинной из них. */
    .geomap-pins text {
        font-size: 19px;
    }

    .geomap-panel dl {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .geomap-panel dd {
        margin-bottom: 8px;
    }
}

.geomap-panel-sub {
    margin: -4px 0 10px;
    color: #667;
    font-size: 14px;
}

/* ---------- Меню шапки ----------
   Десктоп: строка ссылок, у «Просушки» подменю на :hover/:focus-within.
   Мобильные (≤768px): бургер, панель выезжает под шапкой.
   Панель абсолютная относительно .header (он fixed), поэтому контент
   страницы не сдвигается и CLS не растёт. */

.nav-menu {
    display: flex;
    list-style: none;
    gap: 0;
    align-items: center;
}

.nav-menu > li {
    position: relative;
}

/* Разделители — лёгкие вертикальные линии между пунктами вместо широкого
   промежутка (решение владельца 15.09.2026). Раньше между словами было 60 px
   (промежуток 30 + поля по 15), теперь 20 px с линией посередине. */
.nav-menu > li + li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 18px;
    margin-top: -9px;
    background: rgba(255, 255, 255, 0.22);
    pointer-events: none;
}

/* У самого порога бургера кегль пунктов плавно уменьшается до 15 px — запас на
   шрифты шире маковских, чтобы кнопки справа не упирались в край экрана. */
@media (min-width: 1200px) {
    .nav-menu > li > a {
        font-size: clamp(15px, 1.34vw, 16px);
    }
}

.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;
    transition: background 0.3s;
    display: block;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
    background: rgba(255, 255, 255, 0.1);
}

/* Подменю «Просушка». Родительский пункт остаётся ССЫЛКОЙ на страницу
   просушки помещений: пункт без адреса на тач-устройстве превращается
   в ловушку — по нему некуда перейти. */
.nav-sub {
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background: #2c3e50;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    padding: 8px 0;
    margin-top: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s, transform .2s, visibility .2s;
}

.nav-has-sub:hover > .nav-sub,
.nav-has-sub:focus-within > .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-sub a {
    border-radius: 0;
    padding: 10px 18px;
    white-space: nowrap;
    font-size: 15px;
}

.nav-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 10px;
    cursor: pointer;
    line-height: 0;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 5px 0;
    background: #fff;
    transition: transform .25s, opacity .25s;
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1199px) {
    /* Порог бургера поднят с 768 до 1119 px 15.09.2026, а 17.09.2026 — до 1199.
       Полная шапка — логотип, меню с разделителями и две кнопки справа — просит
       1042 px на шрифтах macOS и 1119 px на Verdana, самом широком шрифте из
       списка. Вторая кнопка (заявка) забрала 44 px, и на прежнем пороге
       оставалось РОВНО 1 px из 1120: замер в iframe 17.09.2026. Такой запас —
       это тот же дефект 20.08.2026, когда телефон уходил за правый край, а
       `overflow-x: hidden` это прятал. С 1200 px на Verdana остаётся 41 px.
       Планшету бургер и удобнее — подменю по наведению на сенсорном не открыть. */

    /* Шапка обязана помещаться в узкий экран: замер на 414 px (iPhone 11) давал
       402 px из 414 — то есть впритык, и страницу растягивало вбок. Ужимаем
       отступы и кегль, элементам разрешаем сжиматься. */
    .nav-container {
        padding: 0 12px;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .logo {
        order: 1;
        min-width: 0;
        font-size: 16px;
        gap: 6px;
    }

    .nav-toggle {
        display: block;
        order: 3;
        flex: 0 0 auto;
        padding: 10px 0 10px 10px;
    }

    /* На мобильных панель скрыта, пока её не открыли бургером.
       display:none вместо visibility — иначе ссылки остаются в
       порядке табуляции у закрытого меню. */
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #2c3e50;
        padding: 8px 0 14px;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
        max-height: calc(100vh - 100%);
        overflow-y: auto;
    }

    .nav-menu.is-open {
        display: flex;
    }

    .nav-menu a {
        border-radius: 0;
        padding: 12px 22px;
    }

    /* В бургере вложенность не нужна: подменю разворачивается плоским
       списком с отступом — на телефоне это надёжнее раскрывающегося блока. */
    .nav-sub {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
        margin: 0;
        padding: 0;
        min-width: 0;
    }

    .nav-sub a {
        padding-left: 40px;
        font-size: 15px;
        opacity: .9;
    }

    /* Порядок в строке задаёт ГРУППА кнопок, а не телефон: иначе квадратная
       кнопка заявки (у неё своего `order` нет) встала бы левее телефона. */
    .header-actions {
        order: 2;
        gap: 6px;
    }

    .header-phone {
        font-size: 16px;
        padding: 7px 12px;
        gap: 6px;
    }

    .header-cta {
        padding: 0 7px;
    }

    .header-cta::before {
        width: 18px;
        height: 18px;
    }

    .header-phone::before {
        width: 16px;
        height: 16px;
    }

    /* В бургере пункты идут столбиком — разделители между ними не нужны. */
    .nav-menu > li + li::before {
        display: none;
    }
}

/* ── Отзывы ─────────────────────────────────────────────────────────────────
   Звёзды — радиокнопки в обратном порядке (5→1) + селектор `~`: подсветка
   «до выбранной» работает без единой строки JS. Визуальный порядок
   возвращает row-reverse.
   ⚠️ Селектор скрытия радио УДЛИНЁН намеренно (`.review-form .stars input`):
   ниже в файле стоит `.form-group input { width: 100% }` с той же
   специфичностью, и однажды оно уже победило короткое правило скрытия —
   невидимые радиокнопки получили ширину 375 px и растянули страницу вбок.
   ⚠️ Отсчёт идёт от САМОЙ группы — у `.review-form .stars` ради этого стоит
   `position: relative`. Снимешь её — вернётся скачок страницы в начало
   при клике по оценке (18.09.2026), а не только съезд вбок. */
.review-form .stars {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    /* У солнца лучи идут во все стороны, а не только вверх, как у звёздочки — на
       прежних 4 px соседние иконки задевали друг друга лучами. */
    gap: 8px;
    /* 🔴 Обязательная строка, а не оформление. Радиокнопки внутри скрыты
       абсолютным позиционированием; без позиционированного предка они считаются
       от начала ДОКУМЕНТА и физически лежат в координате (0,0) страницы, поэтому
       клик по солнышку уводил страницу в самое начало. Замерено 18.09.2026:
       прокрутка 300 → 0, после правки 300 → 300 на всех пяти. Та же причина и то
       же лечение, что у чипа региона в форме заявки (16.09.2026). */
    position: relative;
}

.review-form .stars input {
    position: absolute;
    /* Под центром ряда, а не в его левом верхнем углу: подсказка браузера
       встаёт у этого поля, и из угла она накрывала сами солнышки. */
    left: 50%;
    top: 100%;
    padding: 0;
    border: 0;
    margin: 0;
    /* 🔴 Поле «визуально скрыто», а НЕ нулевое, и это не стиль, а работа формы.
       У кнопки стоит `required`; нулевую браузер не считает отображаемой, поэтому
       без выбранной оценки он не показывал подсказку и не отправлял форму —
       нажатие «Отправить» не давало ровно ничего, и человек с уже написанным
       отзывом упирался в стену. Замерено 18.09.2026: 0 событий submit, подсказки
       нет; с этими правилами подсказка встаёт у блока оценки. Дефект того же
       рода нашла соседняя сессия на форме заявки. */
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
}

.review-form .stars label {
    display: inline-flex;
    margin: 0;
    line-height: 1;
    color: #d6dee5;
    cursor: pointer;
    transition: color 0.15s;
}

/* Солнце наследует цвет от label (`fill: currentColor` внутри symbol) —
   поэтому подсветка «до выбранной» держится на тех же правилах, что работали
   для звёздочки, и цвет задаётся в одном месте. */
.review-form .stars .rating-sun {
    display: block;
    width: 38px;
    height: 38px;
}

.review-form .stars input:checked ~ label,
.review-form .stars label:hover,
.review-form .stars label:hover ~ label {
    color: #ffc53d;
}

.review-form .stars input:focus-visible + label {
    outline: 2px solid #2c3e50;
    outline-offset: 2px;
}

.review-form .review-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c3e50;
}

/* Своих правил у согласия в отзыве НЕТ: с 18.09.2026 это тот же переключатель
   с лампочкой, что на форме заявки. Прежняя пара `.review-form .review-consent
   {label,input}` удалена вместе с разметкой — весом (0,2,1) она перебивала общий
   `.form-group .checkbox-inline` (0,2,0) и растянула бы пилюлю во всю ширину. */

.review-error {
    padding: 12px 16px;
    border-radius: 10px;
    background: #fdecea;
    color: #8e2a20;
    margin-bottom: 20px;
}

.review-copy-text {
    margin: 20px 0;
    padding: 16px 20px;
    border-left: 3px solid #2c3e50;
    background: #f8f9fa;
    border-radius: 0 10px 10px 0;
    white-space: pre-wrap;
}

.review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* Вторичная ссылка рядом с кнопкой и под блоками — не синяя по умолчанию,
   а в цвете текста сайта: синее подчёркивание среди карточек выбивается. */
.review-link {
    color: #2c3e50;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #9fb3c8;
}

.review-link:hover {
    border-bottom-color: #2c3e50;
}

/* Кнопка, сделанная ссылкой (например «Оставить отзыв»), не должна выглядеть
   как подчёркнутый текст. */
a.submit-btn {
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

/* В строке действий кнопка соседствует со ссылкой — растянутая на всю ширину
   .submit-btn ломала бы строку пополам. */
.review-actions .submit-btn {
    width: auto;
    padding-left: 28px;
    padding-right: 28px;
}

.review-hint {
    color: #6c757d;
    font-size: 15px;
}

/* Карточка отзыва в списке и в блоке на главной */
.review-card {
    padding: 24px;
    border-radius: 15px;
    background: #f8f9fa;
}

.review-card .review-stars {
    display: flex;
    gap: 4px;
}

/* 20 px против прежних 18 у звёздочки: у солнца тонкие лучи и просвет внутри, на
   размере звезды оно читается хуже неё. Замерено на живой странице отзывов. */
.review-card .review-stars .rating-sun {
    width: 20px;
    height: 20px;
}

/* Контейнер с <symbol> — только хранилище контура, в поток он не попадает.
   display:block, а не position:absolute: абсолютный элемент без позиционированного
   предка лёг бы в (0,0) документа — ровно та мина, что дала скачок страницы. */
.rating-sun-defs {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Цвет знака оценки — один на сайт: жёлтый из логотипа и серый «не выбрано». */
.rating-sun-on {
    color: #ffc53d;
}

.rating-sun-off {
    color: #d6dee5;
}

.review-card .review-meta {
    margin-top: 14px;
    color: #6c757d;
    font-size: 15px;
}

.review-card .review-body {
    margin-top: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.review-source {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    color: #6c757d;
}

@media (max-width: 768px) {
    .reviews-grid {
        grid-template-columns: 1fr;
    }
}

/* На светлой секции карточка обязана отличаться от ФОНА, иначе её границ не видно:
   у секции .alt и у карточки один и тот же #f8f9fa — замерено на живой странице,
   оба вернули rgb(248,249,250). Плюс выравнивание по верху: карточки разной длины
   не должны растягиваться до высоты самой длинной в ряду. */
.article.alt .review-card {
    background: #fff;
}

.reviews-grid {
    align-items: start;
}

/* Список площадок на экране успеха: не маркированный «список дел», а перечень
   ссылок с пояснением — человек выбирает одну, а не выполняет все. */
.review-targets {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
}

.review-targets li {
    padding: 12px 0;
    border-top: 1px solid #e6ebf0;
    color: #6c757d;
    line-height: 1.5;
}

.review-targets li a {
    color: #2c3e50;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #9fb3c8;
}

/* Бейдж рейтинга Яндекса. Габариты заданы атрибутами самого фрейма (иначе
   он «прыгает» при загрузке), здесь только отступы и рамка: атрибут
   frameborder из кода Яндекса невалиден в HTML5 и заменён на CSS. */
.rating-badge {
    margin: 0 0 28px;
}

.rating-badge iframe {
    display: block;
    border: 0;
    max-width: 100%;
}

/* Кейсы на странице района. Отдельно от карточек отзыва: у тех
   white-space: pre-wrap ради авторских абзацев, а здесь текст собирается
   шаблоном, и его отступы уезжали бы в вывод. */
/* 🔴 Кейсы — ГОРИЗОНТАЛЬНЫЕ ПЛАШКИ в столбик (решение владельца 10.09.2026).
   Были колонки-карточки, и сетка тянула их по самой высокой: кейс без фото и
   описания давал пустой прямоугольник 2830 px при 78 px содержимого (замерено
   на Калининском). Плашка занимает ровно свою высоту — пустоты не возникает
   в принципе, а не «реже». */
.geo-cases {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 20px;
}

.geo-case {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
    gap: 24px;
    align-items: start;
    background: #fff;
    border: 1px solid #e6ebf0;
    border-radius: 10px;
    padding: 20px 22px;
    line-height: 1.6;
}

/* Без кадров вторая зона не нужна — текст идёт во всю ширину. Класс ставит
   PHP, а не :has(): предсказуемее и не зависит от поддержки селектора. */
.geo-case--nophoto {
    grid-template-columns: 1fr;
}

/* minmax(0,…) выше и min-width здесь — против классического распирания
   грид-колонки длинным словом или широкой картинкой. */
.geo-case-body,
.geo-case-media {
    min-width: 0;
}

.geo-case h3 {
    margin: 0 0 8px;
    font-size: 17px;
}

.geo-case p {
    margin: 0 0 8px;
}

.geo-case p:last-child {
    margin-bottom: 0;
}

.geo-case-meta {
    color: #6c757d;
}

/* Соседние районы внизу страницы района: перелинковка, а не навигация —
   поэтому колонками, мелко и без маркеров. */
.geo-neighbours {
    list-style: none;
    padding: 0;
    margin: 16px 0 24px;
    columns: 2;
    column-gap: 32px;
}

.geo-neighbours li {
    padding: 6px 0;
    break-inside: avoid;
}

.geo-neighbours li a {
    color: #2c3e50;
    text-decoration: none;
    border-bottom: 1px solid #9fb3c8;
}

@media (max-width: 560px) {
    .geo-neighbours {
        columns: 1;
    }
}

/* Ссылка на страницу района в карточке схемы. Стоит под заголовком карточки,
   до списка цифр: это переход, а не значение. */
.geomap-panel-link {
    display: inline-block;
    margin: 4px 0 12px;
    color: #2c3e50;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #9fb3c8;
}

/* Название района в таблице географии стало ссылкой на его страницу —
   гасим подчёркивание по умолчанию, оставляя явную границу снизу. */
.geo-table th a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid #9fb3c8;
}

/* Логотип на узких экранах. Раньше тесноту снимало скрытие текстовой подписи,
   но теперь знак и слово — один файл, прятать нечего: уменьшаем сам логотип.
   Пропорция сохраняется через height:auto, ширина ограничивается — иначе при
   системном увеличении шрифта страницу опять растянет вбок (это уже случалось). */
/* До 560 px в <picture> подставляется знак (квадрат 46×46) — задаём ему
   квадратный размер, иначе он унаследует width/height полного логотипа
   из атрибутов <img> и растянется. */
@media (max-width: 560px) {
    .logo img {
        width: 38px;
        height: 38px;
    }
}

/* Между 560 и 720 полный логотип ещё показывается, но рядом с телефоном
   ему тесно — ужимаем по высоте, пропорция держится сама. */
@media (min-width: 561px) and (max-width: 720px) {
    .logo img {
        width: auto;
        height: 30px;
    }
}

/* Шапка: логотип упирался в первый пункт меню — замер дал зазор РОВНО 0 px,
   при том что между самими пунктами меню 30 px. Внешние промежутки не могут
   быть меньше внутренних, иначе блоки читаются как один слипшийся ряд.
   Разводим: зазор в шапке больше внутреннего, логотип чуть меньше. */
.header-container,
header nav {
    gap: 44px;
}

/* 🔴 ТОЛЬКО для широких экранов. Без обёртки в @media это правило стоит
   в конце файла и при равной специфичности побеждает медиа-правила выше —
   знак-солнце на телефоне растягивался с 38 до 200 px. Замечено владельцем
   сразу после выкладки: «на мобиле логотип стал конским». */
@media (min-width: 721px) {
    .logo img {
        width: 150px;
        height: auto;
    }
}

/* Кнопка «Оставить отзыв» стоит сразу под заголовком (решение владельца
   22.08.2026). Отступ снизу — чтобы она не липла к первой карточке ленты. */
.review-actions-top {
    margin: 20px 0 32px;
}

/* Фоторяд ВНУТРИ карточки кейса. Общий .photo-row на узком экране даёт кадру
   60vh — правильно для тематической страницы с тремя снимками и плохо для
   кейса: у аренды на Полюстровском их шесть, и карточка растянулась на ЧЕТЫРЕ
   экрана прокрутки (замерено 03.09.2026: 2808 px при экране 701). Двумя
   колонками тот же набор укладывается примерно в полтора экрана.
   Десктоп не трогаем — там ряд и так укладывается в три колонки. */
/* Кадры кейса — КАРУСЕЛЬ: горизонтальная прокрутка со снапом, без JS.
   Ширина кадра меньше зоны намеренно: край следующего виден, иначе о нём
   не догадаться — стрелок у нас нет. */
.geo-case-media .photo-row {
    display: flex;
    /* 🔴 nowrap и justify-content обязательны: базовое .photo-row ставит
       flex-wrap: wrap и центрирование — без перекрытия кадры переносятся
       на новые строки, и вместо ленты выходит столбик (замерено 10.09.2026:
       карточка с шестью кадрами вытянулась на 2610 px). */
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 6px;
}

.geo-case-media .photo-row figure {
    flex: 0 0 84%;
    scroll-snap-align: start;
    margin: 0;
    width: auto;
    /* Базовое правило держит height: 420px — в карусели высоту задаёт кадр. */
    height: auto;
}

/* Лента тянется мышью (assets/carousel.js). Класс is-draggable ставит сам
   скрипт: без JS тянуть нечем, и «хваталка» обещала бы несуществующее.
   🔴 На время жеста снап снимается — mandatory иначе возвращает ленту к
   ближайшему кадру на каждом кадре движения, и протянуть её невозможно. */
.geo-case-media .photo-row.is-draggable {
    cursor: grab;
}

.geo-case-media .photo-row.is-dragging {
    cursor: grabbing;
}

/* Снап снимается и на время жеста, и на время доводки после клика: в обоих
   случаях позицию ведёт скрипт, а mandatory тянул бы ленту обратно к
   ближайшему кадру на каждом кадре анимации. */
.geo-case-media .photo-row.is-dragging,
.geo-case-media .photo-row.is-animating {
    scroll-snap-type: none;
}

/* Иначе браузер начинает НАТИВНЫЙ перенос картинки: она отрывается призраком
   и жест ломается на первом же движении. */
.geo-case-media .photo-row.is-draggable img {
    -webkit-user-drag: none;
    user-select: none;
}

.geo-case-media .photo-row img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 44vh;
    object-fit: cover;
    border-radius: 8px;
}

@media (max-width: 768px) {
    /* На узком экране плашка складывается в стопку: текст, под ним карусель. */
    .geo-case {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .geo-case-media .photo-row figure {
        flex-basis: 88%;
    }

    .geo-case-media .photo-row img {
        max-height: 38vh;
    }
}

/* Строка кейса-точки: старая аренда, от которой остался один адрес.
   Приглушена, чтобы не спорить с карточками, где есть что рассказать. */
.geo-case-thin {
    color: #7f8c8d;
    font-style: italic;
}

/* Таблица пакетов в блоке «Тарифы и условия» (12.09.2026). Узкая по смыслу:
   две колонки, срок и цена, — поэтому не растягивается на всю ширину блока
   и на узком экране не требует горизонтальной прокрутки. */
.tariff-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0 0;
    font-size: 15px;
}

.tariff-table th,
.tariff-table td {
    padding: 7px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.tariff-table th {
    font-weight: 600;
    opacity: .75;
}

.tariff-table td:last-child,
.tariff-table th:last-child {
    text-align: right;
    white-space: nowrap;
}

.tariff-table tr:last-child td {
    border-bottom: 0;
}

/* Ссылка на полный прайс под таблицей формы (22.09.2026). Решение владельца:
   «лаконичнее, по середине, более пастельной, серосиней, чтоб не отвлекала
   акцент от формы» — поэтому она мельче основного текста и приглушена по тону.
   Цвет #5a6b7d даёт контраст 5,3:1 на фоне блока #f8f9fa: тише акцентного
   #2980b9, но выше порога читаемости, то есть приглушение не за счёт доступности. */
/* Прайс на /price/ — три колонки (решение владельца 23.09.2026: «Срок, Цена,
   Продление»). Цена и ставка прижаты вправо, но у ставки перенос разрешён:
   общее правило .tariff-table запрещает его последней колонке, а строка
   «500 ₽/сут первые 2 суток, дальше 400 ₽/сут» без переноса выносит таблицу
   за край экрана. */
.tariff-table--3 th:nth-child(2),
.tariff-table--3 td:nth-child(2) {
    text-align: right;
    white-space: nowrap;
}

.tariff-table--3 th:last-child,
.tariff-table--3 td:last-child {
    text-align: right;
    white-space: normal;
}

@media (max-width: 560px) {
    .tariff-table--3 {
        font-size: 13px;
    }

    .tariff-table--3 th,
    .tariff-table--3 td {
        padding: 6px 5px;
    }
}

.tariff-all {
    margin: 12px 0 0;
    text-align: center;
    font-size: 14px;
}

.tariff-all a {
    color: #5a6b7d;
    text-decoration: none;
    border-bottom: 1px solid rgba(90, 107, 125, .3);
    padding-bottom: 1px;
    transition: color .15s ease, border-color .15s ease;
}

.tariff-all a:hover,
.tariff-all a:focus-visible {
    color: #2c3e50;
    border-bottom-color: rgba(44, 62, 80, .45);
}

/* Примечания под таблицами доставки на /price/ (решение владельца 24.09.2026:
   «примечания размести сразу под таблицей с ценами доставки, шрифтом не
   крупнее чем сама таблица»). 14 px против 15 px у .tariff-table — примечание
   читается вместе с цифрами и не спорит с ними по весу. Два класса в селекторе
   нужны, чтобы перебить .article ul и .article li: у них класс + элемент. */
.article .tariff-note {
    margin: 8px 0 0;
    font-size: 14px;
    color: #555;
}

.article ul.tariff-note {
    margin-left: 22px;
}

.article .tariff-note li {
    margin-bottom: 4px;
}

.article .tariff-note li:last-child {
    margin-bottom: 0;
}

/* ── Шапка карточки объекта: кадр ЖК в своей колонке ──────────────────────
   Решение владельца 24.09.2026: «пусть он будет справа от заголовка и текста
   про жк … в свое отдельной колонке, и только на мобиле перед текстом, сразу
   после заголовка».

   По умолчанию (узкий экран) — одна колонка, и порядок берётся из разметки:
   заголовок → кадр → адрес → вступление. Двухколоночная раскладка включается
   с 769 px — тем же порогом, которым размечен весь остальной шаблон.

   ⚠️ Кадр внутри колонки держится ШИРИНОЙ, а не высотой. Общее правило
   `.photo-row figure{height:420px}` в колонке 300 px даёт горизонтальный вылет
   на любом ГОРИЗОНТАЛЬНОМ кадре: 1200×900 при высоте 420 — это 560 px, то есть
   почти вдвое шире колонки. Соотношение сторон держат атрибуты width/height
   самой картинки, поэтому место под кадр браузер резервирует и без высоты. */
.obj-head__photo .photo-row {
    margin: 0 0 18px;
}

.obj-head__photo .photo-row figure {
    height: auto;
    width: 100%;
}

.obj-head__photo .photo-row img {
    width: 100%;
    height: auto;
}

@media (min-width: 769px) {
    .obj-head:not(.obj-head--nophoto) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
        grid-template-areas:
            "title photo"
            "meta  photo"
            "intro photo";
        column-gap: 28px;
        align-items: start;
    }

    .obj-head__title {
        grid-area: title;
    }

    .obj-head__meta {
        grid-area: meta;
    }

    .obj-head__intro {
        grid-area: intro;
    }

    .obj-head__photo {
        grid-area: photo;
    }

    .obj-head__photo .photo-row {
        margin: 0;
    }
}

/* End */
/* /local/templates/dryrent/assets/style.css?1790315946104062 */