/* Дизайн-слой Smart Minds (этап 7, с 17.10.2026).
   Подключается ПОСЛЕ ../prototypes/assets/mercury.css и motion.css: раскладку и движение берём из прототипа,
   здесь — цвет, шрифты, кнопки, карточки, иллюстрации. Все цвета — токены ниже, в компонентах литералов нет.

   Раскладка: как у mercury.com — центрированный первый экран, тёмная зона, бежевая, светлая, тёмный призыв.
   Стиль один — «Редакция» (Literata + Onest). Варианты «Кобальт» и «Смелый» убраны 20.10.2026. */

:root{
  /* Стиль «Редакция» (выбран 20.10.2026, см. QUESTIONS.md): антиква в заголовках. Цвета — как в v3 (по выбору Дмитрия 20.10): графит, тёплый светлый, зелёный #1F6B3A */
  /* поверхности */
  --paper:#fbfaf8;      /* фон страницы */
  --lav:#f1efea;        /* первый экран, светлые зоны (у прототипа — лавандовые) */
  --beige:#f4f2ee;      /* бежевая зона «Под задачу» */
  --card:#ffffff;       /* карточки интерфейса */
  --tint:#ecebe6;       /* фон иллюстраций */
  --tint2:#efe9e4;      /* тёплый фон иллюстраций */
  --skel:color-mix(in srgb,var(--c4) 55%,var(--card)); /* полоски-заглушки текста в иллюстрациях */
  /* текст */
  --ink:#1b1b1a;        /* заголовки */
  --text:#4a4a47;       /* основной текст */
  --muted:#5b5b58;      /* подписи (≥4.5:1 и на светлых зонах) */
  --hint:#5b5b58;       /* служебное (= muted: светлее не проходит WCAG AA) */
  --line:#e3e1dc;
  /* тёмная зона */
  --dark:#0f1115;
  --dark2:#171a20;      /* карточки на тёмном */
  --darkline:#2a2e36;
  --darktext:#c9cbcf;
  --darkmuted:#9a9da3;
  /* акцент и графики */
  --accent:#1f6b3a;
  --accent-hover:#17552d;
  --accent-soft:#dcebe0;
  --on-accent:#ffffff;
  --c2:#4e9a63; --c3:#8fc29d; --c4:#cfe5d5; --c5:#e8cdb9;
  --good:#2f6a12; --goodbg:#e6f2da;
  --bad:#a8261b; --bad-on-dark:#f4a69d;  /* ошибки в форме: на светлом и на тёмном */
  /* иллюстрации: вечерняя сцена наружной рекламы и прочие тёмные картинки */
  --night1:#0e1110; --night2:#1c2620; --night3:#3e5446; --night4:#a98a78; --glow:#f2c9a8;
  /* пометки для Дмитрия и Юлии */
  --warnbg:#faeeda; --warn:#7d4a0a;

  /* шрифты */
  --f-display:"Literata",Georgia,serif;
  --f-body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",monospace;
  --d-wt:500;           /* насыщенность заголовков */
  --d-track:-.012em;    /* трекинг крупных заголовков: антикве плотный не нужен */
  --h1:clamp(34px,5vw,64px);
  --h2:clamp(28px,3.2vw,46px);
  --big:clamp(52px,5.6vw,76px);   /* цифры */
  --hero-num:clamp(76px,9vw,128px); /* цифра кейса */

  --r:14px;             /* радиус крупных карточек */
  --r-s:10px;
}

/* ── база ── */
body{background:var(--paper);color:var(--text);font-family:var(--f-body);font-size:16px;line-height:1.45;font-feature-settings:"ss01","cv11"}
h1,h2,.t28,.zh,.nums b,.slide .res b,.mm-big,.mm-foot a.mm-fl{font-family:var(--f-display);font-weight:var(--d-wt)}
h1,h2,.zh,.t28{text-wrap:balance}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent-soft);color:var(--ink)}

/* токены прототипа → токены дизайна (mercury.css и стили страницы читают их) */
:root{
  --page:var(--paper); --ink2:var(--ink); --muted2:var(--muted); --grid:color-mix(in srgb,var(--c3) 45%,transparent);
  --cardlav:var(--lav); --white:var(--card); --on:var(--on-accent); --th-dark:var(--dark);
}

/* ── темы прокрутки (motion.css) — из токенов ── */
html[data-th=neutral],html[data-th=light]{--th-bg:var(--paper);--th-h:var(--ink);--th-t:var(--text);--th-m:var(--muted);--th-line:var(--line);--th-acc:var(--accent)}
html[data-th=beige]{--th-bg:var(--beige);--th-h:var(--ink);--th-t:var(--text);--th-m:var(--muted);--th-line:color-mix(in srgb,var(--ink) 12%,var(--beige));--th-acc:var(--accent)}
html[data-th=purple]{--th-bg:var(--lav);--th-h:var(--ink);--th-t:var(--text);--th-m:var(--muted);--th-line:var(--line);--th-acc:var(--accent)}
html[data-th=dark],html[data-th=footer]{--th-bg:var(--dark);--th-h:var(--on-accent);--th-t:var(--darktext);--th-m:var(--darkmuted);--th-line:var(--darkline);--th-acc:var(--c4)}

/* ── шапка и логотип ── */
.logo{font-family:var(--f-body);font-weight:600;letter-spacing:.14em;font-size:15px;color:var(--ink)}
.logo svg{width:30px;height:30px;flex:none}
.logo svg circle{stroke:currentColor}
.logo svg .dot{fill:var(--accent);stroke:none}
html.mh header .logo{color:var(--th-h)}
nav,.right{font-size:15px}
#hdr.mopen .logo svg .dot{fill:var(--on-accent)}

/* ── кнопки ── */
.pill{height:44px;padding:0 22px;font-size:16px;font-weight:500;background:var(--accent);color:var(--on-accent);letter-spacing:-.005em}
.pill:not(.ghost):not(.lav):not(.soft):not(.dk):not(.tonal):not(.glass):hover{background-color:var(--accent-hover)}
.pill.ghost{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.pill.ghost:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 30%,transparent)}
.pill.dk{background:transparent;color:var(--on-accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--darkmuted) 65%,transparent)}
.pill.dk:hover{box-shadow:inset 0 0 0 1px var(--darkmuted)}
.pill .arr{font-family:var(--f-body);transition:transform .3s cubic-bezier(0,0,.2,1)}
.pill:hover .arr{transform:translateX(3px)}
header .pill{height:40px;padding:0 18px;font-size:15px}
button.pill{border:0;font-family:inherit;font-weight:500;cursor:pointer}
/* планшеты и узкие ноутбуки: шапка не должна вылезать за экран */
@media (max-width:1200px) and (min-width:761px){
  header{gap:16px;padding:0 20px}
  #hdr nav.mnav{gap:2px}
  #hdr nav.mnav>a{padding:8px 10px}
  .right{gap:18px}
}
@media (max-width:960px) and (min-width:761px){
  .right .li{display:none}
  .logo{letter-spacing:.1em}
}

/* ── типографика секций ── */
.hero h1{font-size:var(--h1);line-height:1.08;letter-spacing:var(--d-track);color:var(--ink);max-width:1080px}
.hero p{font-size:clamp(17px,1.45vw,21px);line-height:1.4;color:var(--muted);max-width:700px}
h2{font-size:var(--h2);line-height:1.08;letter-spacing:var(--d-track);color:var(--ink)}
.t28{letter-spacing:-.015em}
.b18{color:var(--text);line-height:1.45}
/* служебная надпись над блоком — моно, как графы медиаплана */
.eyebrow{display:inline-block;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.dark .eyebrow,.cta .eyebrow{color:var(--darkmuted)}

/* ── интерфейс-иллюстрации: тот же язык, что медиаплан ── */
.ui{background:var(--card);border-color:var(--line);font-family:var(--f-body)}
.ui .side{color:var(--ink)}
.ui .side .on{background:var(--lav)}
.ui .ws i{background:linear-gradient(135deg,var(--c3),var(--accent))}
.ui .tabs .on{border-bottom-color:var(--accent)}
.ui .mv{color:var(--accent)}
.ui .box{border-color:var(--line)}
.ui .row{border-color:var(--line)}
.ui h4{font-family:var(--f-body);font-weight:500;letter-spacing:-.01em}
.mod{background:color-mix(in srgb,var(--card) 97%,transparent);border-radius:var(--r);box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 5%,transparent),0 12px 32px color-mix(in srgb,var(--ink) 7%,transparent);color:var(--muted);font-family:var(--f-body)}
.mod .h{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mod .l{border-color:var(--line);color:var(--ink)}
.mod .sec{border-color:var(--line)}
.ok{color:var(--good);background:var(--goodbg);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.02em;border-radius:6px}
.circle{background:var(--accent-soft);color:var(--accent);transition:background .3s,color .3s,transform .3s cubic-bezier(0,0,.2,1)}
a:hover .circle{background:var(--accent);color:var(--on-accent);transform:translateX(4px)}

/* ── подвал ── */
footer{background:var(--dark);padding-top:96px}
@media (max-width:760px){footer{padding-top:64px}}
/* подвал всегда тёмный, даже если тема прокрутки ещё не переключилась (короткие страницы, первый кадр) */
html.th footer[data-theme]{background:var(--dark);--th-h:var(--on-accent);--th-t:var(--darktext);--th-m:var(--darkmuted);--th-line:var(--darkline)}
footer .legal a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.cols b{color:var(--darkmuted);font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.legal{border-color:var(--darkline);color:var(--darkmuted)}
.legal p{color:var(--darktext)}
footer .cols a:hover{color:var(--darkmuted)}

/* ── мега-меню: шрифт заголовков ── */
#hdr{--mm-bg:var(--dark);--mm-mut:var(--darkmuted)}
.mm-lab{font-family:var(--f-mono);font-size:11px}

/* ── телефон: закреплённая панель «Обсудить задачу» + «Telegram» (≤760 px) ── */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;z-index:35;left:0;right:0;bottom:0;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--paper) 92%,transparent);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 -1px 0 var(--line)}
  .mbar .pill{justify-content:center;height:44px;padding:0 12px;font-size:15px}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .float{display:none!important}
  html.mm-lock .mbar{display:none}
  /* главная: панель выезжает после первого экрана — на знакомстве кнопок нет */
  .mbar.late{transform:translateY(110%);transition:transform .35s cubic-bezier(.2,1,.4,1)}
  .mbar.late.up{transform:none}
}

/* ── формы «Обсудить задачу» (главная, контакты): ошибки, согласие, ловушка для ботов ── */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.ferr{display:block;min-height:0;font-size:13px;line-height:1.35;color:var(--bad)}
.ferr:empty{display:none}
[aria-invalid=true]{border-color:var(--bad)!important;box-shadow:0 0 0 1px var(--bad)}
.agree{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:13px;line-height:1.45;color:var(--muted);cursor:pointer}
form .agree input[type=checkbox]{flex:none;width:18px;height:18px;padding:0;margin:1px 0 0;accent-color:var(--accent)}
.agree a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:3px}
.agree a:hover{color:var(--accent)}
.fmsg{margin:12px 0 0;font-size:14px;line-height:1.4;color:var(--muted)}
.fmsg:empty{display:none}
.fmsg.err{color:var(--bad)}
.fmsg a{color:inherit;text-decoration:underline}
form[aria-busy=true] button[type=submit]{opacity:.6;pointer-events:none}
/* тёмная карточка формы на главной */
.dcard .ferr,.dcard .fmsg.err{color:var(--bad-on-dark)}
.dcard [aria-invalid=true]{border-color:var(--bad-on-dark)!important;box-shadow:0 0 0 1px var(--bad-on-dark)}
.dcard .agree,.dcard .form label.agree{display:flex;color:var(--darkmuted);margin:4px 0 0;font-family:var(--f-body);font-size:13px;letter-spacing:0;text-transform:none}
.dcard .agree a:hover{color:var(--on-accent)}
.dcard .fmsg{color:var(--darktext)}
.dcard label small{font-size:inherit;color:var(--darkmuted)}
.dcard input::placeholder,.dcard textarea::placeholder{color:var(--darkmuted)}
.formcard input::placeholder,.formcard textarea::placeholder{color:var(--muted)}

/* ── пометки: по умолчанию скрыты, включаются панелью ── */
html:not(.show-notes) .note,html:not(.show-notes) .todo{display:none!important}
.note,.todo{background:var(--warnbg);color:var(--warn);font-family:var(--f-body)}

/* ── кнопка «Пометки» — служебная, только в design/, на сайте (dist/) её нет ── */
.dpanel{position:fixed;z-index:40;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:6px;padding:6px;border-radius:14px;background:var(--dark);color:var(--on-accent);font:500 13px/1 var(--f-body);
  box-shadow:0 10px 30px color-mix(in srgb,var(--dark) 28%,transparent)}
.dpanel button{height:32px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--on-accent);font:inherit;cursor:pointer;white-space:nowrap}
.dpanel button:hover{background:color-mix(in srgb,var(--on-accent) 8%,transparent)}
.dpanel button[aria-pressed=true]{background:var(--warnbg);color:var(--warn)}
@media (max-width:760px){.dpanel{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

/* ── картинки серии v3 на внутренних страницах (приём главной): в слот-иллюстрацию (.pic, .img, .vis, .shot, .slide…)
   добавлен класс vimg и первым ребёнком <img class="vbg">; нарисованный интерфейс остаётся в разметке, но скрыт.
   Исходники — my-site/generated-src/v3 и generated-src/v3-extra ── */
.vimg{position:relative;overflow:hidden}
.vimg>.vbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block;margin:0}
.vimg>:not(.vbg):not(.note){display:none!important}
.vimg:before,.vimg:after{display:none!important}
/* первый экран направления: картинка блоком 2:1 со скруглением вместо «скриншота» кабинета */
.vimg.vhero{height:auto!important;-webkit-mask:none!important;mask:none!important;background:none!important;border-radius:0}
.vimg.vhero>.vbg{position:relative;inset:auto;height:auto;aspect-ratio:2/1;border-radius:16px;box-shadow:0 30px 80px color-mix(in srgb,var(--night1) 14%,transparent)}
/* картинки, у которых кадр меняется по вкладке или пункту: видна только .on */
.vimg.vswap>.vbg{opacity:0;transition:opacity .4s cubic-bezier(0,0,.2,1)}
.vimg.vswap>.vbg.on{opacity:1}
/* где главный объект не в центре кадра — сдвигаем кадрирование */
.vimg>.vbg[src*="img/o-tray."]{object-position:50% 80%}
.vimg>.vbg[src*="img/analytics."]{object-position:50% 68%}
@media (max-width:760px){.vimg.vhero>.vbg{aspect-ratio:4/3;border-radius:12px}}

/* ── карточки выровнены по общим строкам: картинка, заголовок, текст и кнопка (иконка, заголовок, абзац) — на одном уровне во всём ряду ── */
@supports (grid-template-rows:subgrid){
  .cards,.cards4,.feat,.feat6{grid-auto-rows:auto}
  .cards>.card,.cards4>.card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .cards>.card>.circle,.cards4>.card>.circle{align-self:end}
  .feat>div,.feat6>div{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start;justify-items:center}
}

/* 20.10: превью в карточках «Что ещё можно добавить» — пропорции картинки 16:10, чтобы картинка 3:2 не обрезалась наполовину */
.cards4 .card .img.vimg{height:auto!important;aspect-ratio:16/10}
.vimg>.vbg[src*="img/k-hero."]{object-position:72% 50%}

/* ── 21.10 приёмка живого сайта ── */
/* переносы: заголовки ровными строками, в абзацах без одного слова на последней строке */
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
/* телефон: длинные слова в H1 («медиапланирование», «конфиденциальности») не вылезают за экран */
@media (max-width:480px){
  .hero h1{font-size:clamp(26px,7.6vw,40px)}
  h1,h2{overflow-wrap:break-word}
}
/* тап-зоны на телефоне — не меньше 44 px */
@media (max-width:760px){
  .mburg,.mmob-x{width:44px;height:44px}
  .circle{width:44px;height:44px}
  footer .cols a{display:block;padding:7px 0}
  form .agree input[type=checkbox]{width:22px;height:22px;margin-top:-1px}
}
/* плавающая плашка «Обсудить задачу» прячется, когда виден подвал (класс ставит site.js) */
.float{transition:opacity .25s}
html.foot-in .float{opacity:0;pointer-events:none}
html.foot-in .float div{pointer-events:none}
/* плашка про cookie — маленькая, в левом нижнем углу (как у vc.ru) */
.cookie{position:fixed;z-index:45;left:16px;bottom:16px;display:flex;gap:16px;align-items:center;padding:8px 8px 8px 18px;
  border-radius:12px;background:var(--dark);color:var(--darktext);font:14px/1.3 var(--f-body);border:1px solid var(--darkline);box-shadow:0 10px 30px color-mix(in srgb,var(--dark) 28%,transparent)}
.cookie p{margin:0;white-space:nowrap}
.cookie a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.cookie button{flex:none;height:34px;padding:0 14px;border:0;border-radius:34px;background:var(--card);color:var(--ink);font:500 14px/1 var(--f-body);cursor:pointer}
@media (max-width:760px){.cookie{left:12px;right:12px;justify-content:space-between;bottom:calc(76px + env(safe-area-inset-bottom,0px))}.cookie p{white-space:normal}}
/* картинка первого экрана направления — одной ширины на всех страницах (как сетка контента, 1044 px) */
.shot.vimg.vhero,.city.vimg.vhero{width:100%;max-width:1044px;margin-left:auto;margin-right:auto;padding:0 16px;box-sizing:border-box;background:none!important;box-shadow:none!important}
/* подсветка за «скриншотом» первого экрана осталась от прототипа; с картинкой серии она выглядит как случайное зелёное пятно */
.top:has(.vimg.vhero):before{display:none}
/* подсказки над полем «Задача» (site.js) */
.taskchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.taskchips button{height:36px;padding:0 14px;border:1px solid var(--line);border-radius:36px;background:var(--card);color:var(--ink);
  font:15px/1 var(--f-body);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.taskchips button:hover{border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.taskchips button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.taskchips button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dcard .taskchips button{background:transparent;border-color:var(--darkline);color:var(--darktext)}
.dcard .taskchips button:hover{border-color:var(--darkmuted)}
.dcard .taskchips button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
@media (max-width:760px){.taskchips button{height:40px;font-size:14px}}
/* столбики графика растут снизу, когда график показался (site.js) */
.chart .b.grow{transform:scaleY(0);transform-origin:50% 100%;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.chart .b.grow.in{transform:none}