/* ======================================================================
   Модалка «Быстрая заявка» — самодостаточный файл.

   Подключается на ВСЕХ страницах сайта, в том числе на кейсах (/raboty/*)
   и брифе: у них свой отдельный css и свой :root с другой палитрой
   (celadon, bordo, teal…), а /css/style.css они не грузят вовсе.
   Поэтому все токены переопределены прямо на .lm — переменные наследуются
   вниз по дереву, и модалка выглядит одинаково независимо от того,
   что объявлено в :root конкретной страницы.
   ====================================================================== */
.lm{
  --ink:#18181B; --ink-2:#2A2420;
  --paper:#F8F5F0; --paper-2:#F0EAE1; --white:#fff;
  --rust:#C2410C; --rust-2:#EA6A2E; --rust-soft:rgba(194,65,12,.08);
  --text:#18181B; --text-2:#57514A; --muted:#6B645B;
  --line:#E4DCD0; --line-2:#D3C9BB;
  --radius:4px; --radius-lg:8px;
  --shadow:0 20px 50px -24px rgba(24,24,27,.28);
  --serif:'Libre Bodoni',Georgia,'Times New Roman',serif;
  --sans:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
/* На страницах кейсов body задаёт свой font-family/line-height — внутри
   карточки возвращаем шрифты и метрику сайта, чтобы форма не «плыла».
   Осторожно с селекторами вида «.lm h2»: они специфичнее, чем .lm__title,
   и перебивают заголовочный шрифт. Поэтому только сброс box-sizing. */
.lm *,.lm *::before,.lm *::after{box-sizing:border-box}

/* ===================== Быстрая заявка — модалка ===================== */
.lm-open{overflow:hidden}
/* z-index 100000 — не «с запасом», а по факту: на страницах кейсов свои
   фиксированные слои, объявленные ВЫШЕ модалки (.vs-minibar 9999, .lb 10000).
   При z-index:1000 шапка кейса рисовалась поверх карточки и накрывала крестик:
   человек видел форму, которую нечем закрыть. Вебвизор 31.07: заход из Липецка
   на /raboty/geokad48/, модалка открылась на 30-й секунде, уход на 37-й. */
.lm{position:fixed;inset:0;z-index:100000;display:none;align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto}
/* Пока модалка открыта, чужие фиксированные слои страницы убираем совсем —
   полагаться на один только z-index нельзя: у минибара свой transform и
   backdrop-filter, они создают контекст наложения и ведут себя по-разному
   в мобильных webview (MIUI, Samsung Internet). */
.lm-open .vs-minibar{opacity:0!important;transform:translateY(-100%)!important;pointer-events:none}
.lm-open .ckn{display:none}
.lm-open .lmbar{transform:translateY(120%);pointer-events:none}
.lm.is-open{display:flex}
/* На узком экране фокус при открытии уходит на саму карточку (см. lead-modal.js:
   автофокус в поле поднимал бы клавиатуру сразу). Рамку показывать не за что. */
.lm__card:focus{outline:none}
.lm__ov{position:fixed;inset:0;background:rgba(24,24,27,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lm__card{position:relative;z-index:1;width:100%;max-width:460px;margin:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:34px 32px 30px;animation:lm-in .28s cubic-bezier(.2,.8,.2,1)}
@keyframes lm-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.lm__x{position:absolute;top:14px;right:14px;width:34px;height:34px;border:none;background:transparent;color:var(--muted);font-size:24px;line-height:1;cursor:pointer;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.lm__x:hover{background:var(--paper-2);color:var(--ink)}
.lm__kicker{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--rust);margin:0 0 10px}
.lm__title{font-family:var(--serif);font-size:26px;line-height:1.2;margin:0 0 8px;color:var(--ink)}
.lm__sub{font-size:14px;color:var(--text-2);margin:0 0 22px;line-height:1.55}
.lm__field{margin-bottom:14px}
.lm__label{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.lm__input{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--white);border:1px solid var(--line-2);border-radius:var(--radius);padding:11px 13px;transition:border-color .15s,box-shadow .15s}
.lm__input::placeholder{color:var(--muted)}
.lm__input:focus{outline:none;border-color:var(--rust);box-shadow:0 0 0 3px var(--rust-soft)}
.lm__submit{width:100%;font-family:var(--sans);font-size:16px;font-weight:600;color:#fff;background:var(--rust);border:none;border-radius:var(--radius);padding:14px;cursor:pointer;margin-top:6px;transition:background .15s}
.lm__submit:hover{background:var(--rust-2)}
.lm__submit:disabled{opacity:.6;cursor:default}
.lm__note{font-size:12px;color:var(--muted);text-align:center;margin:12px 0 0;line-height:1.5}
.lm__note a{color:var(--muted);text-decoration:underline}
/* Согласие 152-ФЗ. Галочка обязана быть видимой и кликабельной: спрятать её
   под чекбокс в 10px или под opacity — то же нарушение, что и её отсутствие. */
.lm__agree{display:flex;gap:10px;align-items:flex-start;margin:16px 0 4px;
  font-size:12.5px;line-height:1.5;color:var(--muted);cursor:pointer}
.lm__agree input{flex:0 0 auto;width:16px;height:16px;margin:1px 0 0;accent-color:var(--rust);cursor:pointer}
.lm__agree a{color:var(--muted);text-decoration:underline}
.lm__agree a:hover{color:var(--rust)}
/* Не отметил — подсвечиваем галочку, а не только пишем ошибку внизу.
   Текст темнеет: серая подпись рядом с красной рамкой читается как «отключено»,
   а нам надо наоборот — «посмотри сюда». Снимается сразу по клику. */
/* В квизе всё выровнено по центру — галочка не должна выпадать влево.
   align-items:center, а не flex-start: строка тут одна, и по верху she бы
   висела. Ширину не ограничиваем — center по родителю уже держит её на месте. */
.lm__agree--center{justify-content:center;align-items:center;text-align:left}
.lm__agree.is-bad{color:var(--ink)}
.lm__agree.is-bad input{outline:2px solid var(--rust);outline-offset:2px;border-radius:2px}
.lm__agree.is-bad input:focus-visible{outline-color:var(--rust)}
@media (prefers-reduced-motion:no-preference){
  .lm__agree.is-bad input{animation:agree-nudge .32s cubic-bezier(.36,.07,.19,.97)}
}
@keyframes agree-nudge{
  0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)}
}
.lm__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.lm__err{color:var(--rust);font-size:13px;margin:10px 0 0;text-align:center;display:none}
.lm__err.is-on{display:block}
.lm__done{text-align:center;padding:16px 0 6px}
.lm__check{width:56px;height:56px;border-radius:50%;background:var(--rust-soft);color:var(--rust);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:28px;font-weight:700}
/* ===================== Мобильная версия =====================
   360×800 — реальное разрешение посетителя из Липецка, и это низ рынка,
   на который и надо равняться. Карточка занимает весь экран, поэтому
   крестик обязан быть fixed, а не absolute: absolute уезжает вверх вместе
   со скроллом карточки, и на середине формы выхода уже нет. Плюс ему нужен
   собственный фон — прозрачный крестик поверх текста формы не читается. */
@media(max-width:520px){
  .lm{padding:0}
  .lm__card{max-width:none;min-height:100%;border-radius:0;border:none;
    padding:52px 18px calc(28px + env(safe-area-inset-bottom));margin:0}
  .lm__x{position:fixed;top:10px;right:10px;z-index:3;width:42px;height:42px;
    background:var(--white);border:1px solid var(--line-2);border-radius:50%;
    box-shadow:0 2px 12px rgba(24,24,27,.14);color:var(--ink);font-size:26px}
  .lm__x:hover{background:var(--paper-2)}
  /* Экран короткий: четыре выгоды + разделитель + три поля + четыре
     радиокнопки + согласие + кнопка не помещаются даже наполовину.
     Сжимаем верх — заголовок, выгоды и отступы, — чтобы первое поле
     оказалось в зоне видимости, а не за краем экрана. */
  .lm__title{font-size:22px;line-height:1.22}
  .lm__kicker{margin-bottom:8px}
  .lm__perks{gap:7px;margin-bottom:16px}
  .lm__perks li{font-size:13.5px;line-height:1.4}
  .lm__divider{margin:16px 0 12px;padding-top:14px}
  .lm__field{margin-bottom:12px}
  /* 16px у инпутов не трогаем: любое меньшее значение заставляет iOS
     зумить страницу при фокусе, и после ввода человек остаётся в
     увеличенном, разъехавшемся макете. */
  .lm__submit{padding:15px}
  .lm__note{margin-top:10px}
}
/* Совсем узкие экраны (320–360) — ещё плотнее */
@media(max-width:360px){
  .lm__card{padding:52px 14px calc(24px + env(safe-area-inset-bottom))}
  .lm__title{font-size:20px}
}



/* --- заявка: чек-лист выгод (4 пункта из питча) --- */
.lm__perks{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px}
.lm__perks li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.45;color:var(--text-2)}
.lm__perk-ico{flex:0 0 auto;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--rust-soft);color:var(--rust);display:flex;align-items:center;justify-content:center}
.lm__perk-ico svg{width:10px;height:10px}

/* --- заявка: подзаголовок-разделитель перед полями формы --- */
.lm__divider{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:20px 0 14px;padding-top:18px;border-top:1px solid var(--line)}

/* --- заявка: выбор мессенджера для связи, фирменные значки --- */
.lm__msg{margin-bottom:6px}
.lm__msg-grid{display:flex;flex-wrap:wrap;gap:8px}
.lm__msg-opt{position:relative;flex:1 1 auto}
.lm__msg--std{margin:0 0 14px}
.lm__msg--std .lm__label{display:block;margin-bottom:7px;font-size:13.5px;font-weight:600;color:var(--text-2,#57514A)}
.lm__msg-opt input{position:absolute;opacity:0;pointer-events:none}
.lm__msg-opt>span{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--line-2);border-radius:999px;cursor:pointer;background:var(--white);transition:border-color .15s,background .15s,box-shadow .15s}
.lm__msg-opt input:checked+span{border-color:var(--rust);background:var(--rust-soft);box-shadow:0 0 0 1px var(--rust) inset}
.lm__msg-opt input:focus-visible+span{box-shadow:0 0 0 3px var(--rust-soft)}
/* Мессенджер обязателен и заранее не выбран: если человек проскочил шаг,
   подсвечиваем сами кнопки, а не только строку ошибки под формой. */
.lm__msg.is-bad .lm__label{color:#B91C1C}
.lm__msg.is-bad .lm__msg-opt>span{border-color:#B91C1C;background:#FDF3F3}
.lm__msg-ico{width:23px;height:23px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.lm__msg-ico svg{width:13px;height:13px;display:block}
.lm__msg-ico--max{background:#471AFF}
.lm__msg-ico--wa{background:#25D366}
.lm__msg-ico--tg{background:#229ED9}
/* Звонок — акцентный оранжевый: это не чужой бренд, а действие на нашей стороне. */
.lm__msg-ico--call{background:#EA6A2E}
.lm__msg-label{font-size:13.5px;font-weight:500;color:var(--text-2);white-space:nowrap}
.lm__msg-opt input:checked+span .lm__msg-label{color:var(--rust);font-weight:600}
@media(max-width:360px){.lm__msg-grid{grid-template-columns:1fr}}

/* ===================== ПК-версия: две колонки =====================
   На мобильном модалка — один вертикальный поток: питч, потом форма.
   На широком экране это заставляет скроллить ради кнопки, поэтому от
   880px раскладываем питч и форму рядом: слева — зачем оставлять заявку,
   справа — сами поля. Карточка теряет собственные паддинги (padding:0),
   их берут на себя .lm__aside и .lm__main, чтобы левая панель заливалась
   фоном до края и работала как отдельная плашка. overflow:hidden — чтобы
   заливка не вылезала из скруглений. */
@media(min-width:880px){
  .lm__card{max-width:880px;padding:0;overflow:hidden}
  .lm__grid{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);align-items:stretch}
  .lm__aside{background:var(--paper-2);border-right:1px solid var(--line);padding:42px 34px;
    display:flex;flex-direction:column;justify-content:center}
  .lm__main{padding:42px 38px 34px}
  /* Разделитель «Расскажите о вашем бизнесе» нужен, только когда форма идёт
     следом за питчем в одном столбце. В две колонки он лишний шум. */
  .lm__divider{display:none}
  .lm__title{font-size:28px}
  .lm__perks{margin-bottom:0}
  .lm__msg-grid{grid-template-columns:1fr 1fr}
  .lm__done{padding:52px 40px 44px}
  /* Крестик не должен наезжать на текст левой панели */
  .lm__x{top:12px;right:12px}
}

/* ============================================================
   Мобильная панель «Обсудить проект» на страницах кейсов.
   Кейс читают вертикально и долго — единственная точка входа в
   заявку раньше жила в подвале, куда доходят единицы. Панель
   держит действие под большим пальцем всю дорогу, но появляется
   не сразу: пока человек не прочитал хотя бы четверть страницы,
   предлагать обсудить проект нечего.

   Токены переопределены на .lmbar по той же причине, что и на .lm:
   у кейсов свой :root, и /css/style.css они не грузят.
   ============================================================ */
.lmbar{
  --rust:#C2410C; --rust-2:#EA6A2E; --white:#fff;
  --ink:#18181B; --muted:#6B645B; --line:#E4DCD0; --line-2:#D3C9BB;
  --sans:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  position:fixed;left:0;right:0;bottom:0;z-index:9998;
  display:none;align-items:center;gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 24px -18px rgba(24,24,27,.5);
  font-family:var(--sans);
  transform:translateY(120%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  box-sizing:border-box;
}
.lmbar *,.lmbar *::before,.lmbar *::after{box-sizing:border-box}
.lmbar.is-on{transform:none}
/* Панель — мобильная история. На десктопе своё место для CTA есть
   в тексте кейса, и полоса внизу там только съедает экран. */
@media(max-width:900px){.lmbar{display:flex}}
/* Мессенджеры отдельными кнопками слева от формы: если человек уже
   выбрал, где ему писать, это одно касание против семи полей.
   Иконками, чтобы не отнимать ширину у основного действия. */
.lmbar__ms{
  flex:0 0 auto;width:50px;height:50px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);background:var(--white);
  text-decoration:none;transition:border-color .15s,background .15s;
}
.lmbar__ms:active{background:#F0EAE1}
.lmbar__ms svg{width:28px;height:28px;display:block}
/* Старое имя кнопки — на случай, если где-то остался закешированный html. */
.lmbar__tel{
  flex:0 0 auto;width:46px;height:50px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);background:var(--white);color:var(--ink);
  text-decoration:none;
}
.lmbar__tel svg{width:21px;height:21px}
.lmbar__cta{
  flex:1 1 auto;min-width:0;height:50px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-family:var(--sans);border:none;border-radius:12px;
  background:var(--rust);color:#fff;cursor:pointer;
  padding:0 14px;line-height:1.15;
}
.lmbar__cta:active{background:var(--rust-2)}
.lmbar__cta b{font-size:15.5px;font-weight:700;letter-spacing:.01em}
.lmbar__cta span{font-size:11px;font-weight:400;opacity:.86;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* Пока панель на экране, подвал и плашка cookie должны подняться —
   иначе панель накрывает и ссылки подвала, и кнопку «ОК». */
@media(max-width:900px){
  .lmbar-on body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .lmbar-on .ckn{bottom:calc(80px + env(safe-area-inset-bottom))}
}
/* Панель прячется, когда на экране низ калькулятора: она зовёт туда же,
   куда и он, а собой накрывает кнопку «Далее», строку «Отвечаю сам…»
   и ссылку в Telegram. Класс ставит наблюдатель в lead-modal.js. */
.lmbar--off{transform:translateY(120%)!important;pointer-events:none}
@media(prefers-reduced-motion:reduce){.lmbar{transition:none}}

/* ============================================================
   Мобильный порядок и липкая кнопка.

   Вебвизор 23.08: две сессии с рекламы (Android, 354×792 и 360×800)
   открыли форму и ушли, ничего не отправив, — 1:02 и 1:16. На записи
   видно одно и то же: первый экран целиком занимают кикер, заголовок
   в две строки и четыре галочки-выгоды, поле «Как вас зовут» стоит у
   самого нижнего края, а выбор мессенджера уже за сгибом. Человек
   тапает в поле — выезжает клавиатура, от карточки остаётся полоса
   в ~180px с одним полем, кнопки отправки не видно вовсе, и сколько
   ещё вопросов впереди — непонятно.

   Лечим тремя вещами, не выкидывая контент:
   1) выгоды уезжают ПОД форму (aside → display:contents + order):
      свою работу они сделали на лендинге, внутри формы они только
      отодвигают первое поле за край экрана;
   2) кнопка отправки — sticky снизу, видна всегда, вместе с ошибкой,
      которая по order поднимается НАД кнопкой (в разметке она после);
   3) короткая честная строка «3 вопроса — меньше минуты»: на записях
      люди уходят именно в момент, когда не понимают длину формы.
   ============================================================ */
@media(max-width:879px){
  /* aside растворяется, его дети становятся элементами общего потока —
     только так можно поставить перки после формы, не трогая разметку. */
  .lm__grid{display:flex;flex-direction:column}
  .lm__aside{display:contents}
  .lm__kicker{order:1}
  .lm__title{order:2}
  .lm__meta{order:3}
  .lm__main{order:4}
  .lm__perks{order:5}

  /* Перки внизу — уже не питч, а подтверждение: тише, компактнее,
     отделены линией от кнопки. */
  .lm__perks{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);gap:8px}
  .lm__perks li{font-size:13px;color:var(--muted)}

  /* Разделитель остаётся как ориентир, но без своей верхней линии и
     полутора десятков пикселей отступа — их теперь занимает форма. */
  .lm__divider{margin:14px 0 12px;padding-top:0;border-top:none}

  /* Ошибка (в разметке — после кнопки) поднимается над ней: под липкой
     кнопкой её просто не видно. Примечание уходит вниз. */
  .lm__form{display:flex;flex-direction:column}
  .lm__submit{order:1}
  /* Строка согласия обязана идти СРАЗУ ЗА кнопкой: смысл в том, что человек
     соглашается нажатием, и текст об этом должен читаться рядом с ней.
     Без явного order flex ставит её выше липкой кнопки — фраза «нажимая
     кнопку» повисает над кнопкой, которой ещё не видно. */
  .lm__consent{order:2}
  .lm__note{order:3}

  /* Липкая кнопка. Halo-тень цветом бумаги (0 0 0 10px) прячет контент,
     который проезжает под кнопкой, — без неё текст «выныривает» из-под
     скруглений. Сама тень вниз даёт понять, что под кнопкой ещё есть
     страница. */
  .lm__submit{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));z-index:2;
    margin-top:16px;
    box-shadow:0 8px 22px -8px rgba(24,24,27,.4), 0 0 0 10px var(--paper)}

  /* Браузер подскроллит сфокусированное поле — но по умолчанию поставит
     его вплотную к низу, то есть под кнопку. Резервируем её высоту. */
  .lm__input,.lm__msg-grid{scroll-margin-bottom:104px}
}

/* Строка ожидания под заголовком: сколько это займёт. Пишем правду —
   полей действительно три, и врать про «шаг 1 из 5» нельзя. */
.lm__meta{display:flex;align-items:center;gap:7px;margin:0 0 18px;
  font-size:13px;color:var(--muted)}
.lm__meta::before{content:'';flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--rust);opacity:.55}
@media(min-width:880px){.lm__meta{margin-bottom:20px}}

/* Согласие даётся действием — нажатием кнопки, строка стоит сразу под ней.
   Так работают Яндекс, Авито, Т-Банк; 152-ФЗ это допускает (конклюдентное
   действие). Галочку убрали 31.08: люди её не замечали и уходили из формы.
   Текст приглушён, но не спрятан — ссылки видимые и кликабельные, иначе
   согласие считается неинформированным. */
.lm__consent,.lm__consent.lm__consent{margin:10px 0 0;font-size:12px;line-height:1.5;
  color:var(--muted,#6B645B);text-align:center;font-weight:400;max-width:none}
.lm__consent--left.lm__consent--left{text-align:left}
.lm__consent a,.lm__consent.lm__consent a{color:var(--muted,#6B645B);font-size:inherit;
  text-decoration:underline;text-underline-offset:2px}
.lm__consent a:hover{color:var(--rust,#C2410C)}

/* Страницы кейсов оформлены каждая по-своему, часть — на тёмном фоне.
   Жёсткий серый там не читается, поэтому берём цвет у родителя и просто
   приглушаем прозрачностью: строка вписывается в любую тему. Ссылки
   подчёркнуты и в полную яркость — согласие должно быть читаемым. */
.vs-form .lm__consent,.vs-form .lm__consent.lm__consent{color:inherit;opacity:.72;text-align:left}
.vs-form .lm__consent a,.vs-form .lm__consent.lm__consent a{color:inherit;opacity:1}

/* ======================================================================
   Карточка-приглашение (тизер) — 09.09.

   Заменила автооткрытие модалки 06.09, но стили тогда не написали:
   блок выводился статикой в конце body, во всю ширину, без фона — то есть
   автопоказа фактически не было. Проверено 09.09 на живом сайте:
   position:static, top 9117px, фон прозрачный.

   Логика та же, что у модалки: не мешать чтению. Карточка сидит в правом
   нижнем углу, узкая, с тенью и крестиком; форму открывает только клик
   по кнопке. На мобильных не показывается вовсе — там нижняя панель связи.
   ====================================================================== */
.lmtease{
  --ink:#18181B; --muted:#6B645B; --line:#E4DCD0;
  --rust:#C2410C; --rust-2:#EA6A2E;
  --sans:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  position:fixed; right:24px; bottom:24px; z-index:99998;
  width:320px; max-width:calc(100vw - 48px);
  padding:20px 22px 22px;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  box-shadow:0 20px 50px -24px rgba(24,24,27,.38);
  font-family:var(--sans); color:var(--ink);
  /* Появление снизу вверх: карточка «выезжает», а не мигает. До добавления
     класса is-on она сдвинута и прозрачна — и не перехватывает клики. */
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.lmtease.is-on{opacity:1; transform:none; pointer-events:auto}
.lmtease *,.lmtease *::before,.lmtease *::after{box-sizing:border-box}

.lmtease__x{
  position:absolute; top:6px; right:8px;
  width:28px; height:28px; padding:0;
  border:0; background:none; cursor:pointer;
  font-size:22px; line-height:1; color:var(--muted);
}
.lmtease__x:hover{color:var(--ink)}

.lmtease__kicker{
  margin:0 0 8px; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--rust); font-weight:600;
}
.lmtease__title{margin:0 0 8px; font-size:17px; line-height:1.35; font-weight:600}
.lmtease__text{margin:0 0 16px; font-size:14px; line-height:1.5; color:var(--muted)}

.lmtease__btn{
  display:block; width:100%; padding:12px 16px;
  border:0; border-radius:4px; cursor:pointer;
  background:var(--rust); color:#fff;
  font-family:inherit; font-size:15px; font-weight:600; line-height:1.2;
  transition:background .15s ease;
}
.lmtease__btn:hover{background:var(--rust-2)}

/* Мобильные: карточку не показываем — за это отвечает isDesktop() в js,
   но подстрахуемся и стилями на случай, если окно сузили после показа. */
@media(max-width:899px){.lmtease{display:none}}

/* Уважение к системной настройке «меньше движения». */
@media(prefers-reduced-motion:reduce){
  .lmtease{transition:none; transform:none}
}

/* Пометка «необязательно» у поля «Чем занимаетесь» — 09.09.
   Аналитика форм за 26.08–08.09 показала 100 % уходов именно на этом поле:
   оно не проверялось в валидации, но выглядело как обязательное. Пометка
   набрана мельче и приглушённее подписи — читается как подсказка, а не как
   часть вопроса, и не утяжеляет форму визуально. */
.lm__opt{font-weight:400;font-size:12px;color:var(--muted,#6B645B)}

/* Галочка согласия в нижней форме на страницах услуг — 20.09.
   В квизе галочки нет намеренно: её убрали 31.08, она съедала заявки.
   Здесь строка согласия становится кликабельной меткой, поведение
   остальных .lm__consent не меняется. */
.lm__consent--check{display:flex;gap:8px;align-items:flex-start;text-align:left;cursor:pointer}
.lm__consent--check .lm__consent-box{flex:0 0 auto;width:16px;height:16px;margin:1px 0 0;
  accent-color:var(--rust,#C2410C);cursor:pointer}
.lm__consent--check.is-bad{color:var(--rust,#C2410C)}
.lm__consent--check.is-bad .lm__consent-box{outline:2px solid var(--rust,#C2410C);outline-offset:2px}