/* ---------- темы: «Зелёная линия» (палитра клиента SMART TRANSFER), правки 19.10
   Одна светлая тема. Палитра сведена к трём ролям, больше цветов на странице нет:
   - фон: светлая фисташка #eef2dc одним тоном на всю страницу (клиент просил фисташковый,
     #d2dda6 был слишком насыщенным и мутным), карточки и форма белые;
   - зелёный: #208030 действия (кнопки, фокус, выбор), #145c22 текст-акцент (ссылки, иконки, цифры),
     лесной #0e1a12 только у тёмных полос (этапы, финальная форма);
   - оранжевый #F07020 только у «Отправить и узнать цену».
   Сторонние цвета (Google, Telegram, WhatsApp, жёлтые звёзды) не используются. ---------- */
:root{
  color-scheme:light;
  --ink:#1f241e;--paper:#eef2dc;--soft:#eef2dc;--line:#d4dcb6;--muted:#4a5642;
  --accent:#208030;--hover:#107020;--link:#145c22;
  --send:#f07020;--send-hover:#e0661a;--send-ink:#1a1205;
  --card:#fff;--card-line:#dbe2c2;--fill:#f1f4e4;--stroke:#c2cc9f;--ph-c:#59654e;
  --glass:rgba(238,242,220,.86);--hair:rgba(16,40,20,.10);
  --sub:#45503f;--sub-hi:#2f382c;
  --tint:#e3ebc4;
  --inv-bg:#0e1a12;--inv-ink:#eef3ec;--inv-mute:#b9c6bb;--inv-line:rgba(255,255,255,.18);
  --dark-bg:#0e1a12;
  --ok-bg:#e6f4df;--ok-ink:#145c22;--err:#c8102e;--err-ink:#c8102e;--err-bg:#fde8ea;--err-txt:#8a0018;
  --ph1:#e8eecf;--ph2:#dfe7c0;--ph3:#e5ecc9;--arch-a:rgba(255,255,255,.95);--arch-b:rgba(255,255,255,.55);
  --img-filter:none;--map-filter:none;--map-blend:multiply;
  --photo-tint:#0e3a1c;
  --brand:#145c22;
  --todo-bg:#fff4cc;--todo-ink:#3a2f00;--shadow:none;
  --radius:14px;
}
/* тёмные лесные полосы (секция .dark) одинаковы в обеих темах */
.dark{
  --ink:#eef3ec;--line:#223026;--muted:#8fa094;--link:#94c94a;
  --card:#16271b;--card-line:transparent;--fill:#1f3325;--stroke:#2f4634;--ph-c:#a7b8aa;
  --sub:#a7b8aa;--sub-hi:#c9d6cb;
  --inv-bg:#eef3ec;--inv-ink:#14301b;--inv-mute:#4d5a4f;--inv-line:#cdd8c9;
  --ok-bg:#12301a;--ok-ink:#a9d393;--err:#ff5a5f;--err-ink:#ff7a7e;--err-bg:#3a1517;--err-txt:#ffb8ba;
  --shadow:none;color-scheme:dark;
}
body{-webkit-font-smoothing:antialiased;letter-spacing:-.011em;background:var(--paper)}
h1,h2,h3{letter-spacing:-.03em}
:focus-visible{outline-color:var(--link)}
.nav{background:var(--glass);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--hair)}
.nav.scrolled{box-shadow:none}
.mobile-menu{background:var(--paper)}
.menu a{color:var(--sub-hi)}.menu a:hover{color:var(--ink)}
/* кнопки шапки без рамки: в Safari скруглённая рамка на прозрачной кнопке поверх стеклянной
   шапки рисуется кусками, и на стыках проступает «крестик»; фон только при нажатии/наведении */
.burger{background:transparent;border:0;border-radius:12px;color:var(--ink);transition:background-color .2s}
.burger:hover,.burger:active{background:var(--fill)}
.dark{background:var(--dark-bg);color:var(--ink)}
.dark .lead,.step p{color:var(--sub)}
.btn,.btn.light{background:var(--accent);color:#fff;border-color:var(--accent);border-radius:14px;font-weight:600;padding:15px 28px}
.btn:hover,.btn.light:hover{filter:none;background:var(--hover);border-color:var(--hover)}
.btn.small{padding:10px 18px;border-radius:12px}
.btn-badge,.dark .btn-badge{background:var(--inv-bg);color:var(--inv-ink);border-color:var(--inv-bg);box-shadow:none}
.form-box,.on-dark{background:var(--card);border:1px solid var(--card-line);border-radius:18px;color:var(--ink)}
.field{background:var(--fill);border:1px solid transparent;color:var(--ink);border-radius:12px}
.field::placeholder{color:var(--ph-c)}
.field:focus,.on-dark .field:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent)}
.field.error,.on-dark .field.error{border-color:var(--err)}
.field-err,.on-dark .field-err{color:var(--err-ink)}
.consent input,.on-dark .consent input{accent-color:var(--accent)}
.consent,.on-dark .consent,.on-dark .sub,.form-box .sub{color:var(--sub)}
.consent a,.on-dark .consent a{color:var(--link)}
.form-msg,.on-dark .form-msg{background:var(--ok-bg);color:var(--ok-ink)}
.form-msg.err,.on-dark .form-msg.err{background:var(--err-bg);color:var(--err-txt)}
.dir,.tr,.rev,.step{background:var(--card);border:1px solid var(--card-line);border-radius:16px}
.dir:hover,.tr:hover,.rev:hover{border-color:var(--stroke)}
.step .n{color:var(--link)}
/* финальный шаг в той же системе, что и остальные: без заливки, только рамка акцента (style.css проявляет её последней) */
.step.final{border-color:var(--accent)}
.js .step.final:not(.is-in){border-color:var(--card-line)}
.hr{background:var(--line)}
.ph,.pic,.car-img,.pic.map{background:var(--fill)}
.pic,.car-img{border-radius:14px}
.pic.map img{mix-blend-mode:var(--map-blend);filter:var(--map-filter)}
.ph-art{background:linear-gradient(165deg,var(--ph1) 0%,var(--ph2) 62%,var(--ph3) 100%)}
.ph-arch{background:linear-gradient(180deg,var(--arch-a),var(--arch-b))}
.ph-tag{background:var(--card);color:var(--ink);border-color:var(--stroke)}
.pic img,.car-img img{filter:var(--img-filter)}
.footer{background:var(--soft);color:var(--muted);border-top:1px solid var(--hair)}
.footer h2,.footer .brand{color:var(--ink)}
.footer a{color:var(--sub-hi)}@media (hover:hover){.footer a:hover{color:var(--link)}}

/* ---------- бренд: «Smart» зелёным и силуэт машины (клиент 19.10) ---------- */

/* ---------- соцсети: шапка, подвал, мобильное меню ---------- */
.soc{color:var(--link);transition:color .15s,background-color .2s}
/* наведение только для мыши: на телефоне :hover залипает после тапа и остаётся, когда возвращаешься из мессенджера */
@media (hover:hover){.soc:hover{color:var(--hover);background:var(--fill)}}
.soc-link svg,.mobile-social svg{color:var(--link)}
.footer .slogan{color:var(--sub-hi)}
.mobile-social a{transition:background-color .15s}
@media (hover:hover){.mobile-social a:hover{background:var(--fill)}}
.todo{background:var(--todo-bg);color:var(--todo-ink)}
.legal p,.legal li{color:var(--sub-hi)}
.skip{background:var(--paper)}

/* ---------- шапка: правый блок ---------- */
.nav-right{display:flex;align-items:center;gap:10px}

/* ---------- согласие: аккуратный чекбокс по центру строки текста ---------- */
.consent{align-items:center;gap:12px;font-size:13.5px;line-height:1.4;margin:6px 0 22px}
.consent input{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin:0;border:1.5px solid var(--stroke);border-radius:6px;background:var(--fill);display:grid;place-content:center;flex:none;cursor:pointer;transition:background-color .15s,border-color .15s}
.consent input::after{content:"";width:11px;height:6px;border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;border-radius:0;transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform .15s var(--ease)}
.consent input:checked{background:var(--accent);border-color:var(--accent)}
.consent input:checked::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.consent input:hover{border-color:var(--accent)}
.consent input:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.consent input.error{outline:2px solid var(--err);outline-offset:2px}
.consent label{flex:1;min-width:0}
.consent a{font-weight:600;color:var(--link)}


/* ---------- детали браузера: выделение, каретка, скроллбар, типографика ---------- */
::selection{background:color-mix(in srgb,var(--accent) 38%,transparent);color:inherit}
input,textarea{caret-color:var(--accent)}
html{scrollbar-color:var(--stroke) transparent;scrollbar-width:thin}
h1,h2,h3{text-wrap:balance}
p,li,blockquote{text-wrap:pretty}
.consent a,.legal a,.footer a,.faq a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.consent a:hover,.legal a:hover,.footer a:hover{text-decoration-color:currentColor}
.dir b,.dir .price,.car h3{font-variant-numeric:lining-nums tabular-nums}
.btn:focus-visible{outline:2px solid var(--link);outline-offset:3px}
.btn,.form-box .form-title,.dir .price{line-height:1.3}

/* ---------- заявка одним фреймом: цвета (размеры и разметка: style.css, блок «заявка одним фреймом») ---------- */
.lf-label{color:var(--sub-hi)}
/* пустая дата выглядит как подсказка, а не как введённое значение */
.lf-field input[type=date]:invalid{color:var(--ph-c)}
.hero-svc li{color:var(--ink)}
/* иконки «куда возим» в цвет кнопки «Отправить» (клиент 19.10): оранжевый круг, тёмная иконка, как текст на кнопке (6.2:1) */
.hero-svc svg{color:var(--send-ink);background:var(--send)}

/* ---------- оранжевый CTA клиента: только отправка заявки ---------- */
.btn.lead-send,.btn.light.lead-send{background:var(--send);border-color:var(--send);color:var(--send-ink)}
.btn.lead-send:hover,.btn.light.lead-send:hover{background:var(--send-hover);border-color:var(--send-hover)}
.btn.lead-send .btn-badge{background:var(--dark-bg);color:#eef3ec;border-color:var(--dark-bg)}

.dark{--brand:#94c94a}
/* ---------- фирменный блок: знак над надписью SMART TRANSFER ----------
   Ширину блока задаёт надпись, знак растягивается ровно на неё (width:0 + min-width:100%).
   Размер всего блока задаёт одна переменная --bf (кегль надписи): 14px телефон, 16px планшет,
   14px на тесной шапке 1024–1199, 17px от 1200, 20px подвал. */
.brand,.nav .brand,.footer .brand{--bf:14px;display:inline-grid;grid-template-columns:max-content;align-content:center;justify-items:stretch;min-height:44px;margin:0;gap:calc(var(--bf) * .34) 0;color:var(--ink);font-size:var(--bf);font-weight:800;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;text-decoration:none}
.brand-mark{display:block;width:0;min-width:100%;height:auto;aspect-ratio:238.68/40;color:var(--brand);fill:currentColor;overflow:visible}
.brand-name{display:block;font-size:1em;font-weight:800;line-height:1;letter-spacing:.12em;margin-right:-.12em;text-transform:uppercase}
.brand-name b{font-weight:800;color:var(--brand)}
@supports (text-box:trim-both cap alphabetic){.brand-name{text-box:trim-both cap alphabetic}}
a.brand{border-radius:6px;transition:opacity .15s}
a.brand:hover{opacity:.8}
a.brand:focus-visible{outline:2px solid var(--link);outline-offset:4px}
@media (max-width:359px){.nav .brand{--bf:13px}}
@media (min-width:720px){.nav .brand{--bf:16px}}
@media (min-width:1024px) and (max-width:1199px){.nav .brand{--bf:14px}}
@media (min-width:1200px){.nav .brand{--bf:17px}}
.footer .brand{--bf:20px;margin-bottom:16px}
/* крупный вариант: заставки, печать */
.brand.brand-lg{--bf:44px}