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

   Подключается на ВСЕХ страницах сайта, в том числе на кейсах (/raboty/*)
   и брифе: у них свой отдельный css и свой :root с другой палитрой
   (celadon, bordo, teal…), а /css/style.css они не грузят вовсе.
   Поэтому все токены переопределены прямо на .lm — переменные наследуются
   вниз по дереву, и модалка выглядит одинаково независимо от того,
   что объявлено в :root конкретной страницы.
   ====================================================================== */
.lm{
  --ink:#18181B; --ink-2:#27272A;
  --paper:#FAFAF9; --paper-2:#F4F4F2; --white:#fff;
  --rust:#C2410C; --rust-2:#EA6A2E; --rust-soft:rgba(194,65,12,.08);
  --text:#18181B; --text-2:#52525B; --muted:#71717A;
  --line:#E4E4E7; --line-2:#D4D4D8;
  --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}
.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,#52525B)}
.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-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:#71717A; --line:#E4E4E7; --line-2:#D4D4D8;
  --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:46px;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:#F4F4F2}
.lmbar__ms svg{width:26px;height:26px;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))}
}
@media(prefers-reduced-motion:reduce){.lmbar{transition:none}}