/* Единая тема сайта markproperty.ai — «тёмно-синий с золотом».
   Эталон — главная страница: её палитра, шрифты и карточки лежат здесь как
   токены, а ниже на них переводятся страницы, которые верстались отдельно и
   пришли каждая со своим набором цветов.

   Файл подключается ПОСЛЕ собственных стилей страницы: побеждает он, а не они.
   Тексты, разметка и поведение страниц не трогаются — только внешний вид.

   Правила разнесены по разделам и включаются классом на <body>:
   `mark-partners` — страницы партнёрской программы, `mark-conversations` —
   страница примеров диалогов. Без класса файл не делает ничего: так две
   страницы с разными именами переменных не мешают друг другу. */

:root {
  --m-bg: #070E16;
  --m-hero: radial-gradient(1100px 900px at 50% 12%, #0F2035 0%, #0B1826 42%, #070E16 78%);
  --m-surface: rgba(255,255,255,.035);
  --m-surface-2: rgba(255,255,255,.065);
  --m-solid: #0B1826;
  --m-solid-2: #122135;
  --m-line: rgba(201,169,110,.28);
  --m-line-soft: rgba(255,255,255,.10);
  --m-ink: #F2F6FA;
  --m-ink-2: #C3D0DE;
  --m-muted: #8FA2B8;
  --m-dim: #5E718A;
  --m-gold: #C9A96E;
  --m-gold-hi: #E0C997;
  --m-on-gold: #1A1206;
  --m-highlight: rgba(41,74,112,.55);
  --m-shadow: 0 26px 70px rgba(0,0,0,.42);
  --m-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --m-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Скруглений на сайте ровно три: карточка, мелкая плашка, пилюля кнопки. */
  --m-radius: 16px;
  --m-radius-sm: 12px;
  --m-pill: 999px;
  /* ДВЕ ШИРИНЫ НА ВЕСЬ САЙТ — и ни одной больше.
     Читаемая строка: web.dev называет идеалом 66 знаков, приемлемым —
     45–75; WCAG 1.4.8 ставит потолок в 80. Отсюда колонка текста.
     Всё, что в неё не влезает по смыслу (таблицы, карточки, калькулятор,
     лента переписки), живёт во второй, широкой. Обе по центру, поэтому
     края у блоков совпадают. Пять разных ширин на одной странице — это
     не «сложная сетка», а её отсутствие. */
  /* Ширина в точках, а не в «ch»: единица ch считается от кегля самого
     блока, и на заголовке в 46 точек 66ch превращались бы в полторы
     тысячи — ограничение просто не срабатывало. 620 точек при кегле
     текста 16–17 дают те самые 66 знаков. */
  --m-text: 620px;
  --m-wide: 960px;
}

/* ─────────────────────────────────────────────────────────────────────
   ОБЩЕЕ ДЛЯ ОБЕИХ СТРАНИЦ
   ───────────────────────────────────────────────────────────────────── */

/* Фон самого документа. Страницы делают тело прозрачным, чтобы было видно
   свечение, — без этого при оттягивании страницы на телефоне и на снимке
   всей страницы под ним проступал белый холст. */
html:has(> body.mark-dark) { background: var(--m-bg); }

body.mark-dark {
  background: var(--m-bg);
  color: var(--m-ink);
  font-family: var(--m-sans);
  -webkit-font-smoothing: antialiased;
}

/* Свечение эталона: приклеено к окну, чтобы длинная страница не «выезжала»
   из подсветки на середине прокрутки. */
body.mark-dark::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--m-hero);
  pointer-events: none;
}

body.mark-dark h1,
body.mark-dark h2,
body.mark-dark h3,
body.mark-dark h4 {
  font-family: var(--m-display);
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--m-ink);
}

body.mark-dark a { color: var(--m-gold-hi); }
body.mark-dark a:hover { color: var(--m-gold-hi); }
body.mark-dark a:focus-visible,
body.mark-dark button:focus-visible,
body.mark-dark summary:focus-visible {
  outline: 2px solid var(--m-gold-hi);
  outline-offset: 3px;
}
body.mark-dark ::selection { background: var(--m-gold); color: var(--m-on-gold); }
body.mark-dark ::placeholder { color: var(--m-dim); }

/* ─────────────────────────────────────────────────────────────────────
   ПАРТНЁРСКАЯ ПРОГРАММА
   Страница построена на своих переменных — достаточно перевести их на
   токены темы, остальное подхватится само.
   ───────────────────────────────────────────────────────────────────── */

body.mark-partners {
  --bg: var(--m-bg);
  --surface: var(--m-surface);
  --surface-2: var(--m-surface-2);
  --ink: var(--m-ink);
  --ink-2: var(--m-ink-2);
  --muted: var(--m-muted);
  --line: var(--m-line);
  --line-soft: var(--m-line-soft);
  --accent: var(--m-gold);
  --accent-soft: var(--m-highlight);
  --accent-ink: var(--m-gold-hi);
  --good: var(--m-gold-hi);
  --good-soft: rgba(224,201,151,.12);
  --warn: var(--m-gold-hi);
  --warn-soft: rgba(224,201,151,.12);
  --shadow: var(--m-shadow);
  background: transparent;
  font-family: var(--m-sans);
  font-size: 16.5px;
  line-height: 1.62;
}

/* Заголовки и всё «интерфейсное» — на шрифт эталона. */
body.mark-partners h1,
body.mark-partners h2,
body.mark-partners h3,
body.mark-partners .rate,
body.mark-partners .cval,
body.mark-partners .btn,
body.mark-partners .brandmark,
body.mark-partners .fit b,
body.mark-partners .proof b,
body.mark-partners .rcard b,
body.mark-partners ol.steps b,
body.mark-partners .qa summary,
body.mark-partners .ctrl label,
body.mark-partners td.co,
body.mark-partners #ctrlbar a,
body.mark-partners #dots button span,
body.mark-partners .langs .lg,
body.mark-partners .own input {
  font-family: var(--m-display);
}

/* Метки и номера разделов: капслок с разрядкой вместо моноширинного —
   так же, как подписи полей на главной. */
body.mark-partners .label,
body.mark-partners .num,
body.mark-partners th,
body.mark-partners .tagline,
body.mark-partners .langs .lab,
body.mark-partners .fit .i,
body.mark-partners .fit.you .mark,
body.mark-partners .qa summary::before {
  font-family: var(--m-sans);
  letter-spacing: .1em;
  font-weight: 700;
}

/* Текст идёт по той же сетке, что заголовки, линии разделов и таблицы:
   отдельная узкая колонка посреди широкой страницы читалась как случайная
   ширина. Выключка по обоим краям с автоматическими переносами — иначе
   justify рвёт строки дырами между словами. Переносы берут язык из
   атрибута на странице, а его переключает сам сайт. */
body.mark-partners p,
body.mark-partners .lede,
body.mark-partners .sub,
body.mark-partners .col,
body.mark-partners .explain,
body.mark-partners .qa .body,
body.mark-partners ol.steps li .d,
body.mark-partners .fit .d {
  max-width: none;
}
/* Короткие строки по формату не выключаются: подпись под таблицей или
   строка в карточке растянулась бы в редкую сетку из двух слов. */
body.mark-partners .cap,
body.mark-partners .rcard .sm,
body.mark-partners .model p,
body.mark-partners .langs,
body.mark-partners .msgbox,
body.mark-partners .btnrow,
body.mark-partners .qa .brief dd {
  text-align: left;
  hyphens: manual;
}
body.mark-partners .lede { color: var(--m-ink-2); }
body.mark-partners .lede em {
  box-shadow: inset 0 -0.55em 0 var(--m-highlight);
  color: var(--m-ink);
}

/* Блоки: скругления и подложки эталона вместо почти прямых углов. */
body.mark-partners .model,
body.mark-partners .calc,
body.mark-partners .tscroll,
body.mark-partners .nofit,
body.mark-partners .cta,
body.mark-partners .proof div,
body.mark-partners .msgbox {
  border-radius: var(--m-radius);
  background: var(--m-surface);
  box-shadow: var(--m-shadow);
}
body.mark-partners .rcard,
body.mark-partners .presets button,
body.mark-partners .own input,
body.mark-partners .fit.you {
  border-radius: var(--m-radius-sm);
}
body.mark-partners .model.main { border-top: 3px solid var(--m-gold); }
body.mark-partners .nofit { border-left: 3px solid var(--m-gold-hi); }
body.mark-partners .cta { border-left: 3px solid var(--m-gold); }

/* Кнопки — золотая пилюля с тёмной надписью. */
body.mark-partners .btn {
  background: var(--m-gold);
  color: var(--m-on-gold);
  border-radius: var(--m-pill);
  font-weight: 800;
  padding: 13px 26px;
}
body.mark-partners .btn:hover { background: var(--m-gold-hi); color: var(--m-on-gold); }
body.mark-partners .btn.tg { border-radius: var(--m-pill); }
body.mark-partners ol.steps li::before {
  background: var(--m-gold);
  color: var(--m-on-gold);
  font-family: var(--m-display);
}
body.mark-partners .presets button[aria-pressed="true"] {
  background: var(--m-gold);
  border-color: var(--m-gold);
  color: var(--m-on-gold);
}
body.mark-partners .presets button[aria-pressed="true"] span { color: rgba(26,18,6,.75); }
body.mark-partners .presets button { color: var(--m-ink); }
body.mark-partners .own input { background: var(--m-surface-2); color: var(--m-ink); }
body.mark-partners input[type=range] { accent-color: var(--m-gold); }

/* Плавающие элементы поверх страницы — тёмное стекло вместо белого. */
body.mark-partners #ctrlbar,
body.mark-partners #nextBtn,
body.mark-partners #dots button span {
  background: rgba(11,24,38,.92);
  border-color: var(--m-line);
  color: var(--m-ink);
  backdrop-filter: blur(6px);
}
body.mark-partners #ctrlbar .grp { background: rgba(255,255,255,.05); }
body.mark-partners #ctrlbar a { color: var(--m-muted); }
body.mark-partners #ctrlbar a:hover { color: var(--m-ink); }
body.mark-partners #ctrlbar a.on { background: var(--m-gold); color: var(--m-on-gold); }
body.mark-partners #nextBtn { color: var(--m-gold-hi); }
body.mark-partners #dots button { background: var(--m-surface-2); }

body.mark-partners .brandmark { color: var(--m-ink); }
body.mark-partners .brandmark span { color: var(--m-gold); }
body.mark-partners footer.site { border-top: 1px solid var(--m-line-soft); }

/* ─────────────────────────────────────────────────────────────────────
   ПРИМЕРЫ ДИАЛОГОВ
   Здесь палитра называется «бумага / глина / мох», а поверх неё лежал
   ещё и зелёный слой бренда. Переводим и то и другое.
   ───────────────────────────────────────────────────────────────────── */

body.mark-conversations {
  --paper-0: transparent;
  --paper-1: var(--m-surface);
  --paper-2: var(--m-line-soft);
  --ink-0: var(--m-ink);
  --ink-1: var(--m-ink-2);
  --ink-2: var(--m-muted);
  --clay-0: var(--m-gold);
  --clay-1: var(--m-gold-hi);
  --clay-2: rgba(201,169,110,.18);
  --amber: var(--m-gold);
  --amber-bright: var(--m-gold-hi);
  --amber-soft: rgba(201,169,110,.14);
  --moss: var(--m-gold-hi);
  --moss-soft: rgba(224,201,151,.12);
  --white: var(--m-surface);
  --brand-accent: var(--m-gold);
  --brand-dark: var(--m-solid);
  /* --header-edge НЕ трогаем: несмотря на название, это не цвет, а отступ
     сверху для липкой панели фильтров (высота шапки + вырез экрана).
     Подмена его цветом ломает прилипание — панель уезжает вверх. */
  --shadow: var(--m-shadow);
  --serif: var(--m-display);
  --sans: var(--m-sans);
  background: transparent;
  color: var(--m-ink);
}

/* Шапка, подвал и мобильные полосы навигации были тёмно-зелёными. */
body.mark-conversations .topbar,
body.mark-conversations .page-root > .topbar,
body.mark-conversations footer,
body.mark-conversations #reading-pane > .mobile-audience,
body.mark-conversations #reading-pane > .mobile-case-nav {
  background: rgba(11,24,38,.96);
  color: var(--m-ink);
  border-bottom-color: var(--m-line);
  border-color: var(--m-line);
}
body.mark-conversations footer {
  background: var(--m-solid);
  border-top: 1px solid var(--m-line);
}
body.mark-conversations .brand,
body.mark-conversations .brand-symbol,
body.mark-conversations .topbar .brand-symbol {
  background: var(--m-gold);
  color: var(--m-on-gold);
}
body.mark-conversations .brand {
  background: none;
  color: var(--m-ink);
  font-family: var(--m-display);
}

/* Первый экран: то же свечение, что и на главной. */
body.mark-conversations .hero {
  background: var(--m-hero);
  color: var(--m-ink);
}
body.mark-conversations .hero-copy,
body.mark-conversations .hero-note { color: var(--m-ink-2); }
body.mark-conversations .hero-note { border-left-color: var(--m-gold); }
body.mark-conversations .hero-note strong { color: var(--m-ink); }

/* Переключатели языка и аудитории. */
body.mark-conversations .topbar .page-lang-switch,
body.mark-conversations .audience-option {
  background: rgba(255,255,255,.05);
  border-color: var(--m-line);
  color: var(--m-ink-2);
}
body.mark-conversations .topbar .page-lang-switch label,
body.mark-conversations .page-lang-switch a { color: var(--m-ink-2); }
body.mark-conversations #page-ru:checked ~ .page-root .page-lang-switch label[for="page-ru"],
body.mark-conversations #page-en:checked ~ .page-root .page-lang-switch label[for="page-en"],
body.mark-conversations .page-lang-switch a[aria-current="page"],
body.mark-conversations #audience-all:checked ~ .page-root label[for="audience-all"],
body.mark-conversations #audience-developer:checked ~ .page-root label[for="audience-developer"],
body.mark-conversations #audience-agency:checked ~ .page-root label[for="audience-agency"] {
  background: var(--m-gold);
  border-color: var(--m-gold);
  color: var(--m-on-gold);
}
body.mark-conversations .mobile-case-nav,
body.mark-conversations .mobile-case-nav a,
body.mark-conversations .mobile-audience { border-color: var(--m-line-soft); }
body.mark-conversations .mobile-case-nav a:hover,
body.mark-conversations .mobile-case-nav a:focus-visible,
body.mark-conversations .mobile-case-nav a[aria-current="location"] {
  background: rgba(255,255,255,.06);
  color: var(--m-gold-hi);
  border-color: var(--m-gold);
}
body.mark-conversations .mobile-case-nav a[aria-current="location"] { box-shadow: inset 0 -3px var(--m-gold); }

/* Карточки, переписка и таблицы. */
body.mark-conversations .metrics,
body.mark-conversations .journey {
  background: var(--m-surface);
  border-radius: var(--m-radius);
}
body.mark-conversations .case { border-bottom-color: var(--m-line-soft); }
body.mark-conversations .thread,
body.mark-conversations .message { border-color: var(--m-line-soft); }
body.mark-conversations .message.mark {
  background: rgba(201,169,110,.10);
  border-left-color: var(--m-gold);
}
body.mark-conversations .handoff-grid,
body.mark-conversations .handoff-field { border-color: var(--m-line-soft); }
body.mark-conversations .sales-handoff header div > span,
body.mark-conversations .handoff-field > span,
body.mark-conversations .sales-handoff header > small { color: var(--m-muted); }

/* Раскрывающиеся вопросы — как на партнёрке: тонкая линия и знак «+». */
body.mark-conversations .seo-context details { border-bottom-color: var(--m-line-soft); }
body.mark-conversations .seo-context summary { color: var(--m-ink); }
body.mark-conversations .seo-context details p { color: var(--m-ink-2); }
body.mark-conversations .site-footer { border-top-color: var(--m-line); }
body.mark-conversations .skip-link { background: var(--m-gold); color: var(--m-on-gold); }

/* Кнопка Telegram стала золотой вместе с остальными — значок на ней тоже
   должен быть тёмным, иначе белая иконка тонет в золоте. */
body.mark-partners .btn.tg svg { fill: var(--m-on-gold); }

/* Надзаголовки страницы диалогов были мятными — переводим в золото темы. */
body.mark-conversations .kicker,
body.mark-conversations .eyebrow,
body.mark-conversations .hero .kicker { color: var(--m-gold); }

/* Заголовки этой страницы верстались под узкий гротеск и держали кегль до
   88px. Шрифт темы заметно шире: на русском такой заголовок рассыпался
   по одному слову в строку. Кегль ниже, межстрочный — чуть просторнее. */
body.mark-conversations h1 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.08; }
body.mark-conversations h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.12; }
body.mark-conversations .seo-context h2 { font-size: clamp(24px, 3vw, 34px); }
body.mark-conversations h1, body.mark-conversations h2 { letter-spacing: -.02em; }

/* Реплики клиента и лента переписки. Фон пузыря клиента был задан светлым
   в обход переменных — на тёмной странице текст в нём становился нечитаемым. */
body.mark-conversations .thread { background: var(--m-surface); border-color: var(--m-line-soft); }
body.mark-conversations .message { border-color: var(--m-line-soft); }
body.mark-conversations .message.mark {
  background: rgba(201,169,110,.10);
  border-left-color: var(--m-gold);
}
body.mark-conversations .message.lead {
  background: rgba(255,255,255,.055);
  border-right-color: var(--m-muted);
}
body.mark-conversations .message time.chat-time .clock-main { color: var(--m-ink); }
body.mark-conversations .message time.chat-time .clock-local,
body.mark-conversations .message time.chat-time .clock-local span { color: var(--m-muted); }
body.mark-conversations .key-moment { outline-color: var(--m-gold-hi); }

/* Переключатель языка внутри ленты. Выбранная сторона красится правилом с
   `!important` и адресом по id — перебить его селектором нельзя. Поэтому
   подменяем не правило, а значения, которые оно берёт: на самих метках
   «тёмный текст» становится золотом, а «белый» — тёмным. */
body.mark-conversations .thread-content label[data-thread-label] {
  --ink-0: var(--m-gold);
  --white: var(--m-on-gold);
  color: var(--m-ink-2);
}

/* Подвал страницы диалогов состоит из ДВУХ элементов: широкой полосы с
   названием и служебной строки (ссылка на сайт, дата редакции, языки).
   Вторая свёрстана как колонка контента, но красится как подвал — на
   странице это читалось как вторая полоса другой ширины с пустыми полями
   по краям. Растягиваем её на всю ширину, а содержимое держим на той же
   сетке, что и остальной текст: подвал становится одним блоком. */
body.mark-conversations footer.site-footer {
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--m-solid);
  border-top: 1px solid var(--m-line-soft);
  padding-inline: max(20px, calc((100% - 1180px) / 2));
}

/* Раскрывающиеся вопросы на всех страницах выглядят одинаково: знак «+»
   слева, треугольник браузера убран. Прежде на странице диалогов стояла
   системная стрелка, а на партнёрке — плюс. */
body.mark-conversations .seo-context summary {
  list-style: none;
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-family: var(--m-display);
  font-size: 16px;
}
body.mark-conversations .seo-context summary::-webkit-details-marker { display: none; }
body.mark-conversations .seo-context summary::before {
  content: "+";
  color: var(--m-gold);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
}
body.mark-conversations .seo-context details[open] summary::before { content: "\2212"; }

/* Сводка для отдела продаж под лентой: подложка и поля были светлыми,
   на тёмной странице текст в них терялся. */
body.mark-conversations .sales-handoff {
  background: rgba(255,255,255,.05);
  border-color: var(--m-line-soft);
  color: var(--m-ink);
}
body.mark-conversations .handoff-field { background: rgba(255,255,255,.04); }
body.mark-conversations .handoff-field .thread-copy,
body.mark-conversations .handoff-field p,
body.mark-conversations .handoff-field b,
body.mark-conversations .handoff-field strong { color: var(--m-ink); }
body.mark-conversations .sales-handoff header div > strong { color: var(--m-ink); }
body.mark-conversations .sales-handoff { border-left-color: var(--m-gold); }

/* Плашки событий в ленте (бронь, перенос, срыв, ссылка, встреча) и врезка
   про скорость ответа были светлыми — каждая со своим фоном. На тёмной
   странице их текст пропадал. Подложка у всех одна, а смысл события
   различается ромбиком и рамкой: смотрится как один набор, а не пять. */
body.mark-conversations .response-sla,
body.mark-conversations .event.booked,
body.mark-conversations .event.rescheduled,
body.mark-conversations .event.missed,
body.mark-conversations .event.completed,
body.mark-conversations .event.link-sent {
  background: rgba(255,255,255,.06);
  border-color: var(--m-line-soft);
  color: var(--m-ink);
}
body.mark-conversations .response-sla { border-left: 4px solid var(--m-gold); }
body.mark-conversations .event.booked { border-color: rgba(201,169,110,.45); }
body.mark-conversations .event.booked .event-dot,
body.mark-conversations .event.completed .event-dot,
body.mark-conversations .event.start .event-dot { background: var(--m-gold); }
body.mark-conversations .event.rescheduled .event-dot { background: var(--m-muted); }
body.mark-conversations .event.missed .event-dot { background: #E08A7A; }
body.mark-conversations .event.missed { border-color: rgba(224,138,122,.45); }
body.mark-conversations .event.link-sent .event-dot { background: #7FB2D9; }
body.mark-conversations .event,
body.mark-conversations .event.start,
body.mark-conversations .event.completed { color: var(--m-ink-2); }
body.mark-conversations .event time { color: var(--m-muted); }
body.mark-conversations .metrics,
body.mark-conversations .journey { background: var(--m-surface); }
body.mark-conversations .journey strong { color: var(--m-gold); }
body.mark-conversations .journey span { color: var(--m-ink-2); }
body.mark-conversations .journey,
body.mark-conversations .journey div { border-color: var(--m-line-soft); }
/* Врезка про скорость ответа: заголовок был тёмно-коричневым, а плашка
   «в ту же минуту» — светлым текстом на золоте. */
body.mark-conversations .sla-heading > strong { color: var(--m-ink); }
body.mark-conversations .sla-heading > span { color: var(--m-gold); }
body.mark-conversations .sla-step {
  background: rgba(255,255,255,.05);
  border-color: var(--m-line-soft);
}
body.mark-conversations .sla-step > span { color: var(--m-muted); }
body.mark-conversations .sla-step time { color: var(--m-ink); }
body.mark-conversations .sla-arrow { color: var(--m-gold); }
body.mark-conversations .sla-speed { background: var(--m-gold); color: var(--m-on-gold); }
body.mark-conversations .sla-speed strong,
body.mark-conversations .sla-speed span { color: var(--m-on-gold); }

/* Книжный набор и на странице диалогов: сплошной текст выключается по
   обоим краям с переносами. Реплики переписки НЕ трогаем — они короткие,
   и выключка растащила бы их в редкую сетку из двух-трёх слов. */
body.mark-conversations .hero-copy,
body.mark-conversations .case > p,
body.mark-conversations .message p,
body.mark-conversations .thread-head,
body.mark-conversations .event,
body.mark-conversations .handoff-field { text-align: left; hyphens: manual; }

/* ── Телефон ─────────────────────────────────────────────────────────
   На узкой колонке выключка по формату всегда проигрывает: в строку
   помещается пять-шесть слов, и края выравниваются дырами между ними.
   Ниже 620px возвращаем обычный левый край, переносы оставляем. */
@media (max-width: 620px) {
  body.mark-partners p,
  body.mark-partners .lede,
  body.mark-partners .sub,
  body.mark-partners .col,
  body.mark-partners .explain,
  body.mark-partners .qa .body,
  body.mark-partners ol.steps li .d,
  body.mark-partners .fit .d,
  body.mark-conversations .hero-copy,
  body.mark-conversations .case > p,
  body.mark-conversations .case-intro,
  body.mark-conversations .case-lede,
  body.mark-conversations .seo-context details p,
  body.mark-conversations .reading-note p {
    text-align: left;
  }
  /* Заголовок на телефоне был так крупен, что разрывал пополам даже
     сумму в тексте («$29 / 000»). */
  body.mark-partners h1 { font-size: clamp(27px, 7.4vw, 38px); }
  body.mark-conversations h1 { font-size: clamp(26px, 7.2vw, 36px); }
}

/* Рамка переключателя языка (и в шапке, и внутри ленты) была почти белой
   плашкой — на тёмной странице она светилась пятном. */
body.mark-conversations .lang-switch {
  background: rgba(255,255,255,.05);
  border-color: var(--m-line);
}

/* ─────────────────────────────────────────────────────────────────────
   ДВЕ ШИРИНЫ НА ВЕСЬ САЙТ
   Широкая держит внешние поля страницы, узкая — читаемую строку.
   Всё, что не названо узким, остаётся широким.
   ───────────────────────────────────────────────────────────────────── */

body.mark-partners .wrap,
body.mark-partners footer.site { max-width: calc(var(--m-wide) + 44px); }
body.mark-conversations .shell { width: min(var(--m-wide), calc(100% - 40px)); }
body.mark-conversations footer.site-footer {
  padding-inline: max(20px, calc((100% - var(--m-wide)) / 2));
}

/* Узкая колонка — сплошной текст. Заголовки разделов и линии под ними
   остаются широкими: они делят страницу на части, а не читаются строкой. */
body.mark-partners p,
body.mark-partners .lede,
body.mark-partners .sub,
body.mark-partners .col,
body.mark-partners .explain,
body.mark-partners .qa .body,
body.mark-partners ol.steps li .d,
body.mark-partners .fit .d,
body.mark-conversations .hero-copy,
body.mark-conversations .case-intro,
body.mark-conversations .case > p,
body.mark-conversations .seo-context details p,
body.mark-conversations .reading-note p {
  max-width: var(--m-text);
}

/* Ручные ограничения ширины таблиц стояли в разметке и делали из четырёх
   таблиц четыре разные колонки. */
/* Ручные ширины таблиц стояли прямо в разметке (640, 520 и другие) и
   делали из четырёх таблиц четыре разные колонки. Перебиваем их общей
   мерой — иначе `!important` из разметки держит старый разнобой. */
body.mark-partners .tscroll[style] { max-width: var(--m-text) !important; }


/* Первый экран страницы диалогов делился на две колонки (заголовок и
   врезка рядом). В общем столбе на заголовок остаётся меньше половины
   ширины, и он рассыпается по одному слову в строку. Ставим блоки друг
   под другом: заголовку — вся ширина, врезке — ширина текста. */
body.mark-conversations .hero-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
body.mark-conversations h1 { font-size: clamp(32px, 4vw, 48px); }

/* ─────────────────────────────────────────────────────────────────────
   ЧИТАЕМОСТЬ ПО ИЗМЕРИМЫМ ПРАВИЛАМ
   Не «как красивее», а по числам из гайдлайнов — чтобы следующая правка
   спорила с числом, а не со вкусом.
   ───────────────────────────────────────────────────────────────────── */

/* Кегль основного текста. WCAG 1.4.4 требует, чтобы текст масштабировался
   до 200% без потерь, а мелкий кегль этот запас съедает: 13–14 точек на
   странице диалогов читались уже на пределе. 16 — общепринятый низ. */
body.mark-dark p,
body.mark-dark li,
body.mark-dark dd,
body.mark-dark td,
body.mark-dark figcaption { font-size: max(16px, 1em); }

/* Межстрочный: WCAG 1.4.8 требует не меньше 1.5, web.dev называет 1.65
   удобным для строки в 66 знаков. */
body.mark-dark p,
body.mark-dark li,
body.mark-dark .lede,
body.mark-dark .case-intro { line-height: 1.65; }

/* Зона нажатия не меньше 24×24 точек (WCAG 2.5.8). Видимый размер при
   этом не меняется: точке навигации остаётся 9 точек, растёт только
   область, в которую нужно попасть пальцем или курсором. */
body.mark-partners #dots button {
  position: relative;
}
body.mark-partners #dots button::after {
  content: "";
  position: absolute;
  inset: -8px;
  min-width: 24px;
  min-height: 24px;
}
body.mark-conversations .site-footer a,
body.mark-conversations .site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Заголовки разделов и линии под ними живут в ТОЙ ЖЕ колонке, что текст:
   иначе на границе колонки видна ступенька — заголовок уезжает вправо
   дальше, чем строки под ним. Шире колонки выходит только то, что иначе
   не показать: таблицы, карточки, калькулятор, сетки. */
body.mark-partners .shead,
body.mark-partners h1,
body.mark-partners .meta,
body.mark-partners .langs,
body.mark-partners ol.steps,
body.mark-partners .fits,
body.mark-partners .qa,
body.mark-partners .msgbox,
body.mark-partners .cap { max-width: var(--m-text); }

/* Широкой остаётся ТОЛЬКО то, чему ширина нужна по содержанию: сетки из
   нескольких карточек и калькулятор с ползунком. Блок с призывом, врезка
   и шаблон сообщения растянутыми лишь набирали пустоту справа. */
body.mark-partners .models,
body.mark-partners .proof,
body.mark-partners .result,
body.mark-partners .calc { max-width: var(--m-wide); }
body.mark-partners .cta,
body.mark-partners .nofit { max-width: var(--m-text); }

/* Мера в 66 знаков — правило для СПЛОШНОГО текста, который читают
   построчно. Главный заголовок страницы читается одним взглядом, и в
   узкой колонке он лишь начинает рвать числа пополам: ему широкая. */
body.mark-partners h1 { max-width: var(--m-wide); }

/* Переносы по слогам оставляем только там, где строка узкая — на
   телефоне. На колонке в 66 знаков они лишь дробят слова без пользы:
   правый край и так не выравнивается. */
body.mark-dark { hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 620px) {
  body.mark-partners p, body.mark-partners .lede, body.mark-partners .col,
  body.mark-conversations .case-intro, body.mark-conversations .hero-copy,
  body.mark-conversations .seo-context details p {
    hyphens: auto; -webkit-hyphens: auto;
  }
}
/* Врезка первого экрана — тоже сплошной текст, ей та же мера строки. */
body.mark-conversations .hero-note { max-width: var(--m-text); }
/* Остатки сплошного текста, жившие во всю ширину: вводное примечание,
   подпись между кейсами и строка в подвале. */
body.mark-conversations p.reading-note,
body.mark-conversations .reading-note p,
body.mark-conversations .case-boundary p,
body.mark-conversations footer .shell p { max-width: var(--m-text); }

/* Остальные мелкие цели: логотип-ссылка, подписи-переключатели и метки
   полей. Видимый размер прежний — растёт только зона попадания. */
body.mark-partners .brandmark,
body.mark-partners #ctrlbar a,
body.mark-partners .ctrl label,
body.mark-conversations .brand {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Таблицы — в колонку текста. Растянутая на всю ширину таблица из двух
   коротких колонок отрывает число от подписи: глазу приходится
   перепрыгивать пустоту. Широкой остаётся только та, где содержимому
   действительно тесно, — для неё внутри включена прокрутка. */
body.mark-partners .tscroll { max-width: var(--m-text); }

/* Список вопросов начинался собственной линией сразу под линией заголовка
   раздела — две одинаковые черты в пяти точках друг от друга читаются как
   дефект. Разделители между вопросами остаются. */
body.mark-partners .qa { border-top: none; }

/* ─────────────────────────────────────────────────────────────────────
   ШАПКА КАК НА ГЛАВНОЙ
   Логотип — слово «MARK» с золотой точкой, шрифт и начертание главной:
   жирный гротеск без разрядки. Переключатель языка — пилюля с золотой
   выбранной стороной, как у партнёрки.
   ───────────────────────────────────────────────────────────────────── */

body.mark-partners .brandmark {
  font-family: var(--m-display);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--m-ink);
}
body.mark-partners .brandmark span { color: var(--m-gold); }

/* На странице диалогов логотип был значком «M» и словом «Mark». Разметку
   не трогаем (её охраняет CSP с хешами) — значок прячем, слово набираем
   прописными и ставим золотую точку. Название для экранных чтецов
   остаётся в aria-label ссылки. */
body.mark-conversations .topbar .brand-symbol { display: none; }
body.mark-conversations .topbar .brand,
body.mark-conversations footer .shell > strong {
  font-family: var(--m-display);
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--m-ink);
}
body.mark-conversations .topbar .brand { font-size: 22px; gap: 0; }
body.mark-conversations .topbar .brand::after,
body.mark-conversations footer .shell > strong::after {
  content: ".";
  color: var(--m-gold);
}

body.mark-partners #ctrlbar,
body.mark-partners #ctrlbar .grp,
body.mark-conversations .lang-switch { border-radius: var(--m-pill); }
body.mark-partners #ctrlbar a,
body.mark-conversations .lang-switch a,
body.mark-conversations .lang-switch label {
  border-radius: var(--m-pill);
  font-family: var(--m-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

/* ─────────────────────────────────────────────────────────────────────
   ХОРОШО НА ЛЮБОМ УСТРОЙСТВЕ
   Три числа на весь сайт: кнопка или ссылка-кнопка не ниже 44 точек
   (Apple HIG, WCAG 2.5.5), служебная подпись не мельче 12, основной
   текст на телефоне не мельче 15.
   ───────────────────────────────────────────────────────────────────── */

/* Цели нажатия. */
body.mark-partners #ctrlbar a,
body.mark-partners .brandmark,
body.mark-partners footer.site a,
body.mark-conversations .topbar .brand,
body.mark-conversations .lang-switch a,
body.mark-conversations .lang-switch label,
body.mark-conversations .seo-context summary,
body.mark-conversations .site-footer a,
body.mark-conversations .site-footer nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
body.mark-partners #ctrlbar a { min-width: 44px; padding: 0 12px; }
body.mark-partners #ctrlbar { padding: 3px; }
body.mark-partners #ctrlbar .grp { padding: 0; }
body.mark-partners .brandmark { justify-content: flex-start; }
body.mark-conversations .lang-switch a,
body.mark-conversations .lang-switch label { min-width: 44px; padding: 0 10px; }
body.mark-conversations .lang-switch { padding: 2px; }
body.mark-conversations .seo-context summary {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-block: 6px;
}
/* Ползунок калькулятора: дорожка тонкая, но браться за неё пальцем
   можно по всей высоте строки. */
body.mark-partners .ctrl input[type=range] { min-height: 44px; }

/* Служебные подписи — не мельче 12. */
body.mark-partners .label,
body.mark-partners th,
body.mark-partners .langs .lab,
body.mark-partners .presets button span,
body.mark-conversations .switch-context,
body.mark-conversations .mobile-language-cue,
body.mark-conversations .role-badge,
body.mark-conversations .sla-heading > span,
body.mark-conversations .sla-step > span,
body.mark-conversations .sla-step time span,
body.mark-conversations .sla-speed span,
body.mark-conversations .case-boundary strong,
body.mark-conversations .message time,
body.mark-conversations .message time span,
body.mark-conversations .message time.chat-time .clock-local,
body.mark-conversations .message time.chat-time .clock-local span,
body.mark-conversations .event time,
body.mark-conversations .sales-handoff header div > span,
body.mark-conversations .handoff-field > span,
body.mark-conversations .sales-handoff header > small,
body.mark-conversations .mobile-case-nav a {
  font-size: 12px;
}

/* Основной текст — не мельче 15: описания тарифов и ответы в справке
   были набраны в 14–14,5. */
body.mark-partners .model .who,
body.mark-partners .qa .brief dd { font-size: 15px; }

/* Подписи пресетов калькулятора на телефоне рвались посреди слова
   («небольш-ой»): в четверть ширины экрана не влезало слово вместе с
   боковыми полями кнопки. Поля сужаем, слово держим целым. */
@media (max-width: 430px) {
  body.mark-partners .presets button { padding-inline: 2px; }
  body.mark-partners .presets button span { overflow-wrap: normal; letter-spacing: 0; }
}

/* Врезка «Следующий этап после Zoom» осталась светло-зелёной плашкой
   прежней темы — на тёмной странице она светилась пятном. Переводим её
   в тот же вид, что врезка про скорость ответа. */
body.mark-conversations .case-boundary {
  background: rgba(255,255,255,.06);
  border-color: var(--m-line-soft);
  border-left-color: var(--m-gold);
  color: var(--m-ink-2);
}
body.mark-conversations .case-boundary > span {
  background: var(--m-gold);
  color: var(--m-on-gold);
}
body.mark-conversations .case-boundary strong { color: var(--m-gold-hi); }
body.mark-conversations .case-boundary p { font-size: 15px; }

/* Ярлык «Марк от лица агентства» остался мятным на светлой подложке, а
   соседний «от лица девелопера» уже золотой. Один вид для обоих. */
body.mark-conversations .role-badge.agency,
body.mark-conversations .role-badge.developer {
  color: var(--m-gold-hi);
  background: rgba(201,169,110,.12);
}

/* Подвал партнёрки: ссылки подняты до 44 точек — разделители-точки
   выравниваются по их середине, а не прилипают к верху строки. */
body.mark-partners footer.site nav { align-items: center; }