/* /vk-ads-cheklist — короткий лендинг лид-магнита по VK Рекламе.

   Всё заскоуплено под #vk-root (плюс несколько правил на body.vk-page — только
   для перекраски общей шапки/подвала под холодный фон страницы). article.css
   грузится первым, его переменные не трогаем.

   ПАЛИТРА — VK Реклама, а не FRM: фон #EDF0F6, чёрная карточка #101216,
   синий #0077FF. Лайм проекта здесь НЕ используется вообще (включая кнопку в
   шапке): страница целиком говорит на языке рекламного кабинета, смешение двух
   акцентов читалось бы как ошибка вёрстки.

   ── ГЛАВНОЕ ПРАВИЛО МОБИЛЫ (≤1023px): никаких «окошек в окошке». ──
   Карточка героя теряет радиус и уходит на всю ширину экрана — становится
   полосой-фоном, а не карточкой. Белая панель формы внутри неё исчезает: поля
   ложатся прямо на полосу. Макет коробки тоже во всю ширину. Итог: на любом
   экране мобилы видна ровно одна поверхность, вложенных прямоугольников нет.

   Порог 1023, а не 760, специально: ровно там раскладка становится
   одноколоночной. Вложенные прямоугольники допустимы только там, где есть
   настоящая двухколонная десктоп-композиция — иначе на планшете 768 в тёмной
   карточке снова появлялась белая карточка формы. */

#vk-root{
  --vk-bg:#EDF0F6;
  --vk-ink:#101216;
  --vk-blue:#0077FF;
  --vk-white:#fff;
  --vk-line:#DEE3EC;
  --vk-muted:#6A7480;
  --vk-on-dark:rgba(255,255,255,.68);
  --vk-r:28px;      /* внешние карточки */
  --vk-r-in:20px;   /* внутренние элементы */
  --vk-wrap:1180px;
  --vk-pad:clamp(20px,5vw,48px);
  --vk-sec-y:clamp(44px,6vw,88px);
  font-family:'Inter Tight',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--vk-ink);
}
#vk-root *{box-sizing:border-box;min-width:0}

/* Фон страницы + подгонка общей шапки/подвала: тёплый paper на холодной
   странице давал видимый шов на стыках. Структуру страницы не меняем. */
body.vk-page{background:#EDF0F6}
body.vk-page .cp-nav{background:rgba(237,240,246,.88);border-bottom-color:#DEE3EC}
body.vk-page .cp-nav-cta{background:#0077FF;color:#fff!important}
body.vk-page .site-footer{background:#EDF0F6;border-top-color:#DEE3EC}

#vk-root .vk-sec{padding:var(--vk-sec-y) 0}
#vk-root .vk-sec-hero{padding-top:clamp(20px,3vw,40px)}
#vk-root .vk-wrap{max-width:var(--vk-wrap);margin-inline:auto;padding-inline:var(--vk-pad);width:100%}

/* ── типографика ─────────────────────────────────────────────────────────── */
/* Кегль и ширина подобраны замером, а не на глаз: при 17ch и 54px строка
   «VK Реклама съедает» на 1440 не влезала и заголовок ломался на ЧЕТЫРЕ строки.
   20ch + текстовая колонка 1.3fr держат три строки на 1024→1920 при 56px
   (требование десктоп-композиции проекта: H1 ≥56px на 1280). */
#vk-root .vk-h1{font-size:clamp(31px,4.2vw,56px);line-height:1.03;letter-spacing:-.03em;font-weight:800;
  margin:0 0 18px;color:#fff;text-wrap:balance;hyphens:manual;max-width:20ch}
#vk-root .vk-h2{font-size:clamp(26px,3vw,40px);line-height:1.08;letter-spacing:-.025em;font-weight:800;
  margin:0 0 14px;text-wrap:balance;hyphens:manual;max-width:18ch}
#vk-root .vk-lead{font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:var(--vk-on-dark);
  margin:0 0 30px;max-width:52ch;text-wrap:pretty}
#vk-root .vk-sub{font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--vk-muted);
  margin:0;max-width:62ch;text-wrap:pretty}
#vk-root .vk-eyebrow{font-family:var(--mono,'JetBrains Mono',ui-monospace,Menlo,monospace);
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#63A8FF;margin:0 0 20px;font-weight:500}
#vk-root strong{text-wrap:balance}

/* ── кнопки (пилюли VK) ──────────────────────────────────────────────────── */
#vk-root .vk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:54px;padding:0 28px;border-radius:14px;font-size:16px;font-weight:600;line-height:1.2;
  text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit;text-align:center;
  transition:transform .12s ease,background-color .15s ease,opacity .15s ease}
#vk-root .vk-btn:active{transform:translateY(1px)}
#vk-root .vk-btn-blue{background:var(--vk-blue);color:#fff}
#vk-root .vk-btn-blue:hover{background:#2688EB}
#vk-root .vk-btn-blue[disabled]{opacity:.45;cursor:not-allowed}
#vk-root .vk-btn-wide{width:100%}

/* ── экран 1: герой ──────────────────────────────────────────────────────── */
#vk-root .vk-surface-ink{background:var(--vk-ink);color:#fff;border-radius:var(--vk-r);
  padding:clamp(32px,3.6vw,56px)}
#vk-root .vk-hero{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
#vk-root .vk-hero-text{min-width:0}
#vk-root .vk-art{min-width:0}
#vk-root .vk-art img{display:block;width:100%;height:auto;border-radius:var(--vk-r-in)}

#vk-root .vk-facts{list-style:none;margin:32px 0 0;padding:24px 0 0;display:flex;flex-wrap:wrap;gap:14px 36px;
  border-top:1px solid rgba(255,255,255,.14)}
#vk-root .vk-fact{display:flex;flex-direction:column;gap:2px;min-width:0}
#vk-root .vk-fact-n{font-size:clamp(20px,2vw,27px);font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.1}
#vk-root .vk-fact-d{font-size:14px;line-height:1.4;color:var(--vk-on-dark);max-width:24ch;text-wrap:pretty}

/* ── форма ───────────────────────────────────────────────────────────────── */
#vk-root .vk-formbox{background:var(--vk-white);border-radius:var(--vk-r-in);
  padding:clamp(22px,2.2vw,28px);color:var(--vk-ink);max-width:560px}
#vk-root .vk-form{display:flex;flex-direction:column;gap:14px}
#vk-root .vk-fields{display:grid;grid-template-columns:1fr;gap:14px}
#vk-root .vk-field{display:flex;flex-direction:column;gap:7px}
#vk-root .vk-field-l{font-size:13px;font-weight:600;color:var(--vk-muted);letter-spacing:.01em}
#vk-root .vk-input{width:100%;min-height:54px;padding:0 16px;border-radius:14px;border:1px solid var(--vk-line);
  background:#F5F7FA;font-family:inherit;font-size:16px;color:var(--vk-ink);
  transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
#vk-root .vk-input::placeholder{color:#98A2AE}
#vk-root .vk-input:focus{outline:none;border-color:var(--vk-blue);background:#fff;box-shadow:0 0 0 3px rgba(0,119,255,.14)}
#vk-root .vk-input.is-bad{border-color:#E2564A;background:#FDF3F2}
#vk-root .vk-check{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.45;color:var(--vk-muted);
  cursor:pointer;margin:0}
#vk-root .vk-check input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--vk-blue);cursor:pointer}
#vk-root .vk-check a{color:var(--vk-blue);text-underline-offset:3px}
#vk-root .vk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#vk-root .vk-formmsg{margin:0;font-size:14px;line-height:1.45;color:#C3382C}
#vk-root .vk-formmsg:empty{display:none}
#vk-root .vk-fine{margin:0;font-size:13px;line-height:1.5;color:#8A939F;text-wrap:pretty}
#vk-root .vk-fine a{color:var(--vk-blue)}

#vk-root .vk-done{display:flex;flex-direction:column;gap:12px}
#vk-root .vk-done-h{margin:0;font-size:clamp(20px,2vw,24px);font-weight:800;letter-spacing:-.02em}
#vk-root .vk-done-d{margin:0;font-size:15px;line-height:1.55;color:var(--vk-muted);text-wrap:pretty}

/* ── экран 2: что внутри ─────────────────────────────────────────────────── */
#vk-root .vk-head{margin:0 0 28px;max-width:64ch}
#vk-root .vk-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:14px}
#vk-root .vk-tile{background:var(--vk-white);border:1px solid var(--vk-line);border-radius:var(--vk-r-in);
  padding:26px}
#vk-root .vk-tile-t{font-size:clamp(18px,1.5vw,21px);line-height:1.2;font-weight:700;letter-spacing:-.02em;
  margin:0 0 10px;text-wrap:balance}
#vk-root .vk-tile-d{font-size:15px;line-height:1.55;color:var(--vk-muted);margin:0;text-wrap:pretty}
#vk-root .vk-who{margin:28px 0 0;font-size:15px;line-height:1.6;color:var(--vk-muted);max-width:74ch;text-wrap:pretty}
#vk-root .vk-who-cta{display:inline-block;margin-left:6px;color:var(--vk-blue);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ── десктоп ─────────────────────────────────────────────────────────────── */
@media (min-width:1024px){
  /* Текстовая колонка шире картинки: в ней живут и H1, и форма — им нужна
     ширина. Макет коробки подрезан в портрет (4:5) через object-fit:cover:
     в квадрате у такой картинки половина площади — поля вокруг коробки, и на
     узкой колонке коробка выглядела бы вдвое мельче, чем нужно. Cover режет
     края, а коробка на любом таком макете стоит по центру. */
  #vk-root .vk-hero{grid-template-columns:1.3fr .7fr;gap:clamp(32px,4vw,56px)}
  #vk-root .vk-art img{aspect-ratio:4/5;object-fit:cover}
  #vk-root .vk-fields{grid-template-columns:1fr 1fr}
  #vk-root .vk-tiles{grid-template-columns:repeat(3,1fr);gap:16px}
  #vk-root .vk-facts{flex-wrap:nowrap}
}

/* ── мобила и планшет ≤1023: убираем «окошко в окошке» ───────────────────── */
@media (max-width:1023px){
  /* карточка героя → полоса во всю ширину: радиуса нет, боковых полей нет */
  #vk-root .vk-sec-hero{padding:0 0 clamp(36px,8vw,56px)}
  #vk-root .vk-sec-hero .vk-wrap{padding-inline:0;max-width:none}
  #vk-root .vk-surface-ink{border-radius:0;padding:clamp(32px,8vw,48px) var(--vk-pad)}

  /* макет коробки — тоже во всю ширину, иначе он читался бы как карточка
     внутри полосы: то самое «окно в окне» */
  #vk-root .vk-art{margin:0 calc(-1 * var(--vk-pad))}
  #vk-root .vk-art img{border-radius:0}

  /* белой панели формы нет — поля лежат прямо на тёмной полосе */
  #vk-root .vk-formbox{background:transparent;padding:0;border-radius:0;max-width:none}
  #vk-root .vk-field-l{color:var(--vk-on-dark)}
  #vk-root .vk-check{color:var(--vk-on-dark)}
  #vk-root .vk-check a{color:#63A8FF}
  #vk-root .vk-input{background:#fff;border-color:transparent}
  #vk-root .vk-input:focus{box-shadow:0 0 0 3px rgba(0,119,255,.5);border-color:var(--vk-blue)}
  #vk-root .vk-fine{color:rgba(255,255,255,.5)}
  #vk-root .vk-fine a{color:#63A8FF}
  #vk-root .vk-formmsg{color:#FF9A8F}
  #vk-root .vk-done-h{color:#fff}
  #vk-root .vk-done-d{color:var(--vk-on-dark)}
  #vk-root .vk-facts{gap:16px 28px;margin-top:28px}

  #vk-root .vk-who-cta{display:block;margin:10px 0 0}
}

/* ── планшет 761–1023: раскладка ещё одноколоночная, но ширины уже большие.
   Поля в две колонки, форма и макет не растягиваются на всю строку.
   Фон полосы-макета красим в цвет самой картинки (#F2F5FA), иначе
   ограниченная по ширине светлая картинка на тёмной полосе снова читалась бы
   как вложенное окно. ────────────────────────────────────────────────────── */
@media (min-width:761px) and (max-width:1023px){
  #vk-root .vk-fields{grid-template-columns:1fr 1fr}
  #vk-root .vk-formbox{max-width:640px}
  #vk-root .vk-art{background:#F2F5FA}
  #vk-root .vk-art img{max-width:560px;margin-inline:auto}
  #vk-root .vk-tiles{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  #vk-root .vk-btn{transition:none}
}