/* Выпуск 6.56-Л «Главная на телефоне, волна 1»: поправки только главной и восьми ниш (с 6.56.1-Л) и только до 767 px.
   Подключён к главной (после site.css) и к нишам (после pages.css), на других страницах его нет. Откат — отмена коммитов задач А–Г
   выпуска: одной строкой подключения не откатить, меню и короткие подписи (data-short) живут в index.html,
   а без этого файла меню видно и на десктопе. 6.56.1-Л: мок журнала и блок демо на телефоне скрыты правилами
   этого файла (задача А). Основание: marketing/issledovaniya/ux-audit-mobilnyj-lending-22-10-2026.md, п. 4.1.
   Цвета, размеры текста, поля и скругления — только токены (--home-*, --hit, --r-*): тёмную тему
   даёт палитра. Следующие задачи выпуска дописывают свои разделы в блок max-width ниже. */

@media (max-width: 767px) {
  /* Переменные телефона живут здесь: site.css не трогаем. Токенов 28 и 30 px в шкале --home-fs-* нет (Х-6 6.56.1-Л: H1 — 28 px). */
  .site { --home-sp-n12: -12px; --home-fs-28: 28px; --home-fs-30: 30px; --home-sp-44: 44px; --home-fs-24: 24px; }
  /* 6.56.2-Л (Критик UX/UI, «стыдно показать»): значение плитки условий — не крупнее 7,5 % ширины, иначе на 320 «30 дней»
     не входит в колонку 136 px и рвётся посреди слова. На 390+ — прежние 28 px. */
  .site { --home-fs-fact: min(28px, 7.5vw); }

  /* ── Шапка (задача А, Х-3): логотип, «Меню», «Открыть демо». Не выше 60 px: 6 + 44 + 6 + граница. ── */
  .home-top__in { padding-top: var(--home-sp-6); padding-bottom: var(--home-sp-6); gap: var(--home-sp-8); }
  .home-top__login { display: none; }
  .home-top__act { margin-left: 0; }
  /* Логотип не сжимается и не прячется: «Меню» и «Открыть демо» уступают ему место полями (по 6 px; зазор шапки 8, Х-7).
     На 360 «Открыть демо» — в одну строку, на 320 допустимы две. */
  .home-top__logo { flex: none; }
  .home-top .home-btn--sm { padding: 0 var(--home-sp-6); }

  /* Опора списка — сама шапка (она липкая), поэтому details не позиционируем. */
  .home-menu { position: static; margin-left: auto; }
  .home-menu > summary { display: flex; align-items: center; box-sizing: border-box; height: var(--hit); padding: 0 var(--home-sp-6); list-style: none; cursor: pointer; border: 1px solid var(--home-control-line); border-radius: var(--home-r-10); background: var(--home-control); color: var(--home-ink); font-size: var(--home-fs-14); font-weight: 600; white-space: nowrap; }
  .home-menu > summary::-webkit-details-marker { display: none; }
  .home-menu[open] > summary { background: var(--home-surface); }
  /* Слой-ловушка (приём Primer CSS): у открытого меню summary растягивает прозрачный слой на весь экран, касание вне
     меню попадает в summary и закрывает details без перехода и без скрипта (на iOS click с неинтерактивного
     элемента до document не доходит). Список — над слоем (z-index); логотип и «Открыть демо» под слоем. */
  .home-menu[open] > summary::before { content: ""; position: fixed; inset: 0; cursor: default; }
  /* Слой живёт внутри шапки (z-index 10), а липкая панель (20) и плашка о Метрике (60) — выше неё: пока меню открыто,
     шапка поднимается над ними, иначе касание панели проходило мимо слоя (вторая проверка правок). */
  .home-top:has(.home-menu[open]) { z-index: 70; }

  /* Список под шапкой на всю ширину; пункты по 44 px через 8 px. Сверху разделы сайта, под чертой «Войти» и «Тема». */
  .home-menu__list { z-index: 1; position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; gap: var(--home-sp-8); box-sizing: border-box; max-height: 80vh; overflow-y: auto; padding: var(--home-sp-12) var(--home-gutter) var(--home-sp-16); border-bottom: 1px solid var(--home-line); background: var(--home-bg); box-shadow: var(--home-sh-card); }
  .home-menu__nav, .home-menu__acts { display: flex; flex-direction: column; gap: var(--home-sp-8); }
  .home-menu__acts { padding-top: var(--home-sp-8); border-top: 1px solid var(--home-line); }
  .home-menu__nav > a, .home-menu__acts > a, .home-menu__acts > button { display: flex; align-items: center; box-sizing: border-box; min-height: var(--hit); padding: 0 var(--home-sp-16); border: 1px solid var(--home-line); border-radius: var(--home-r-10); background: var(--home-surface); color: var(--home-ink); font-family: var(--font); font-size: var(--home-fs-16); font-weight: 600; line-height: 1; text-align: left; }

  /* Кнопка темы в меню — пункт со значком и подписью; сама кнопка шапки (site.css) на телефоне скрыта. */
  .home-top .home-menu__theme { display: flex; width: auto; height: auto; justify-content: flex-start; gap: var(--home-sp-10); cursor: pointer; }
  .home-menu__theme > span { color: var(--home-ink); }
  /* Без скриптов переключатель ничего не делает — пункта «Тема» нет (признак data-js ставит theme-init.js). */
  :root:not([data-js]) .home-menu__theme { display: none; }

  /* ── Ритм и карточки (задача В, Х-8): отступ секций 80 → 44, поля карточек 32 → 20. Раздел стоит ДО первого
     экрана: у героя свой верх (20), и он обязан победить общее правило .home-sec, а в файле выигрывает позднее. ── */
  .home-sec { padding-top: var(--home-sp-44); padding-bottom: var(--home-sp-44); }
  .home-vygoda .home-h2 { font-size: var(--home-fs-24); margin-bottom: var(--home-sp-20); }
  .home-card { padding: var(--home-sp-20); }
  .home-card__t { font-size: var(--home-fs-24); }
  /* Цепочка шагов переносится между шагами, а не внутри них. */
  .home-path { gap: var(--home-sp-6) var(--home-sp-8); }
  .home-path > span { white-space: nowrap; }
  /* Стрелка — отдельный элемент flex-ряда и на 360 попадала в начало строки. Рисуем её после шага (::after) и
     прячем прежние: она переносится вместе со своим шагом. Читателям экрана стрелка не нужна (пустая подпись). */
  .home-path__arrow { display: none; }
  .home-path > span:nth-child(1)::after, .home-path > span:nth-child(3)::after { content: "→"; content: "→" / ""; margin-left: var(--home-sp-8); color: var(--home-arrow); }

  /* ── Первый экран (задача Б, Х-4): заголовок 30 px, кнопки столбцом на всю ширину, основная выше
     (порядок разметки). Строка о почте убрана из первого экрана в разметке. ── */
  .home-hero { padding-top: var(--home-sp-20); padding-bottom: var(--home-sp-44); }
  .home-hero .home-wrap { gap: var(--home-sp-16); }
  .home-hero__text { gap: var(--home-sp-16); }
  .home-hero .home-lede { font-size: var(--home-fs-16); }
  .home-hero .home-h1 { font-size: var(--home-fs-28); }
  .home-hero__cta { flex-direction: column; }
  .home-hero__cta .home-btn { width: 100%; }
  /* П6: кнопки финального блока — как в первом экране: столбцом, обе на всю ширину и по 56 px. */
  .home-final__cta { flex-direction: column; flex-basis: 100%; width: 100%; }
  .home-final__cta .home-btn { width: 100%; min-height: 56px; }
  .home-hero .home-fine { font-size: var(--home-fs-14); }
  /* Х-6, Ф-2: на телефоне в первом экране одна фраза — второе предложение лида (оно несёт механизм); первое («Слотборд —
     сервис онлайн-записи…») повторяет надзаголовок и H1. В разметке текст целый. */
  .home-hero .home-lede__s:not(.home-lede__keep) { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* ── Мишени не меньше 44 px (задача В, Х-7): «Для кого» плитками, ссылки служебного текста, период тарифов.
     Вкладки сфер журнала — задача Г. ── */
  .home-forwho { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--home-sp-8); }
  .home-forwho__l { grid-column: 1 / -1; }
  /* Текущая ниша в подвале ниши — <b aria-current="page">: плитка того же размера, что ссылки, с акцентной рамкой. */
  .home-forwho b[aria-current] { display: flex; align-items: center; box-sizing: border-box; min-height: var(--hit); padding: 0 var(--home-sp-12); border: 1px solid var(--home-ink); border-radius: var(--home-r-10); background: var(--home-surface); color: var(--home-ink); font-weight: 600; }
  .home-forwho a { display: flex; align-items: center; min-height: var(--hit); padding: 0 var(--home-sp-12); border: 1px solid var(--home-line); border-radius: var(--home-r-10); background: var(--home-surface); }
  /* Область касания 44 px без роста межстрочного шага: поля сверху и снизу добавляют высоту, отрицательные внешние отступы её забирают. */
  .home-fine a, .home-cena__foot a { display: inline-block; box-sizing: border-box; min-height: var(--hit); padding: var(--home-sp-12) 0; margin: var(--home-sp-n12) 0; }
  .home-faq__all { display: inline-flex; align-items: center; min-height: var(--hit); }
  .home-period { gap: var(--home-sp-8); }
  .home-period__b { height: var(--hit); }

  /* ── Мок и блок демо на телефоне (6.56.1-Л, задача А; решения владельца Р-1, Р-4, Х-2, Х-3) ──
     Показа кабинета на телефоне нет: мок журнала, блок «Посмотрите живой кабинет» с окном и надзаголовок первого
     экрана скрыты (разметку не удаляем, на 768+ всё прежнее). Призывы в демо — кнопки первого экрана, липкая
     полоса и финал. Номер причины стоит над заголовком, а не колонкой слева. Прежние правила журнала-примера
     6.56-Л (сетка, короткие подписи, пометка, резерв вкладок) мертвы вместе с моком и удалены. */
  .home-hero__board { display: none; }
  .home-demo { display: none; }
  .home-hero .home-eyebrow { display: none; }
  /* 6.56.2-Л (Х-9): у главной над H1 снова «что это» — короткая строка «Сервис для онлайн-записи» (решение владельца 24.10) вместо полного надзаголовка
     (его смысл — в плитках ниш). У ниш надзаголовок на телефоне скрыт по-прежнему: модификатора --m у них нет. */
  .home-hero .home-eyebrow--m { display: block; }
  .home-eyebrow--m .home-eyebrow__full { display: none; }
  .home-eyebrow--m .home-eyebrow__m { display: inline; }
  .home-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--home-sp-8); }
  .home-row__n { padding-top: 0; font-size: var(--home-fs-13); }
  .home-row__fig { grid-column: 1; margin-top: var(--home-sp-8); }

  /* ── «Подробнее» у причин (6.56.1-Л, задача Б; Р-3, Х-4) ──
     Описание свёрнуто только на телефоне и только при :root[data-js] (признак ставит синхронный theme-init.js до
     первой отрисовки: свёртка и кнопка есть с первого кадра, сдвига нет). Без скрипта и на 768+ абзац виден целиком.
     Кнопка в разметке с hidden (на страницах без этого файла её нет нигде: .site [hidden] в site.css), здесь показана
     правилом с весом выше (0,4,0 против 0,2,0), только при data-js на телефоне. Вид кнопки — как строка вопроса: от 44 px, без рамки, «+/−» справа, фокус общий (.site button). */
  :root[data-js] .home-more__rest:not(.is-open) { display: none; }
  :root[data-js] .site .home-more__btn[hidden] { display: flex !important; align-items: center; justify-content: space-between; box-sizing: border-box; width: 100%; min-height: var(--hit); margin: 0; padding: 0; border: 0; background: transparent; color: var(--home-link); font-family: var(--font); font-size: var(--home-fs-15); font-weight: 500; text-align: left; cursor: pointer; }
  .home-more__btn::after { content: "+"; content: "+" / ""; flex: none; width: 20px; text-align: center; font-size: var(--home-fs-22); font-weight: 400; line-height: 1; color: var(--home-muted); }
  .home-more__btn[aria-expanded="true"]::after { content: "−"; content: "−" / ""; }

  /* «Что входит» у платных тарифов — то же устройство (кнопка .home-more__btn, список .home-more__rest). Бесплатный
     список не сворачивается: в нём условия бесплатного («до 5 карточек», «один исполнитель», строка «Работает на Слотборде»). */

  /* ── Плитки ниш сразу после первого экрана (6.56.1-Л, задача Б; Х-6): как «Для кого» в подвале ── */
  .home-nishi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--home-sp-8); box-sizing: border-box; padding: 0 var(--home-gutter) var(--home-sp-44); }
  .home-nishi__t { grid-column: 1 / -1; margin: 0 0 var(--home-sp-4); font-size: var(--home-fs-16); font-weight: 600; line-height: 1.4; color: var(--home-ink); }
  .home-nishi a { display: flex; align-items: center; min-height: var(--hit); padding: 0 var(--home-sp-12); border: 1px solid var(--home-line); border-radius: var(--home-r-10); background: var(--home-surface); color: var(--home-text-2); font-size: var(--home-fs-14); }

  /* ── Статьи ниши (6.56.1-Л, задача В; Х-8): на телефоне две ссылки и «Все статьи». Ссылка в разметке с hidden
     (на десктопе её нет), здесь показана правилом с весом выше .site [hidden]. ── */
  .blog-links > li:nth-child(n+3) { display: none; }
  .site .blog-niche__all[hidden] { display: inline-flex !important; align-items: center; min-height: var(--hit); margin-top: var(--home-sp-8); color: var(--home-link); font-size: var(--home-fs-16); font-weight: 600; }

  /* ── Мини-карточки причин видны всегда; подписи 13 px (было 12), переносов внутри времени и имени нет (&nbsp;) ── */
  .home-fig__note, .home-fig__src, .home-fig__link { font-size: var(--home-fs-13); }
  .home-nw { white-space: nowrap; }

  /* ── Плашка о Метрике (6.56.1-Л, задача Г; Р-6, Ф-1): снизу, компактная. Текст прежний (demo-modules.js), 13 px;
     низ — 8 px от края (без подъёма над скрытой липкой полосой: пока ответа нет, полоса не показывается). Кнопки по
     44 px (--hit из site.css). Раскладка сама: текст и кнопки в одной строке, пока хватает ширины (плашка до 480 px),
     иначе кнопки встают под текстом в строку на всю ширину. Ширина прежняя: до 560 px (иначе боком текст и кнопки не встают в строку). ── */
  .cookie-note { bottom: var(--home-sp-8); padding: var(--home-sp-6) var(--home-sp-12); gap: var(--home-sp-4) var(--home-sp-8); }
  .cookie-note p { flex: 100 1 180px; font-size: var(--home-fs-13); line-height: 1.25; }
  .cookie-note__acts { flex: 1 1 250px; margin-left: 0; }

  /* ── «Чем Слотборд отличается» (6.56.2-Л, Х-1): список из четырёх строк с разделителями, как блок вопросов, — без фона
     карточек, значков и «Подробнее». Заголовок 26 (две строки), тезис 18/600 в строку, довод 16/24 не длиннее двух строк. ── */
  .home-otlichie .home-h2 { font-size: var(--home-fs-26); margin-bottom: var(--home-sp-12); }
  .home-otlichie__row { display: block; }
  .home-otl { display: block; border-top: 1px solid var(--home-line-2); }
  .home-otl__i { display: block; padding: var(--home-sp-12) 0; border-top: 0; border-bottom: 1px solid var(--home-line-2); }
  .home-otl__t { margin-bottom: var(--home-sp-2); font-size: var(--home-fs-18); line-height: 1.25; }
  .home-otl__p { font-size: var(--home-fs-16); line-height: 24px; }

  /* ── Условия («Что платите…») плитками 2×2 (Ф-5 6.56.1-Л): значение 28 px, подпись и текст 14 px; порядок блоков прежний. ── */
  .home-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--home-sp-16); }
  .home-fact { padding: var(--home-sp-16) 0 var(--home-sp-8); gap: var(--home-sp-4); }
  .home-fact__big { font-size: var(--home-fs-fact); }
  .home-fact__label { font-size: var(--home-fs-14); }
  .home-fact__text { font-size: var(--home-fs-14); line-height: 1.4; }

  /* ── «Открыть демо» в шапке — второстепенного вида, контуром, как «Меню» (Х-9): яркая тёмная плашка тянула глаз
     от главной кнопки первого экрана. Цель header_demo не тронута; фокус виден чернилами (focus-dark на светлом не виден). ── */
  /* Селектор тяжелее тёмной темы site.css (:root[data-theme="dark"] .site .home-btn--dark, 0,4,0): иначе в тёмной
     теме кнопка оставалась светлой плашкой. */
  :root .site .home-top .home-btn--sm.home-btn--dark { background: transparent; border-color: var(--home-control-line); color: var(--home-ink); }
  :root .site .home-top .home-btn--sm.home-btn--dark:hover { background: var(--home-control); border-color: var(--home-control-line); color: var(--home-ink); }
  .site .home-top .home-btn--sm:focus-visible { outline-color: var(--home-ink); }

  /* ── Блоки на 480–767 px — не шире 480 по центру (Х-10); шапка остаётся во всю ширину, сужается только содержимое
     секций, подвала и плиток ниш. ── */
  .home-wrap, .shell { max-width: 480px; }
  .home-nishi { max-width: 480px; margin: 0 auto; }
}

@media (min-width: 768px) {
  /* Только скрытие того, что есть лишь на телефоне: меню, плитки ниш (6.56.1-Л Б). Кнопки «Подробнее» и «Что входит» в разметке с hidden. */
  .home-menu, .home-nishi { display: none; }
}