/* Стиль сайта slotbord.ru (6.40-Л задал язык главной, 6.40.1-Л распространил его на все страницы:
   решение владельца 11.10.2026). Подключается после /tokens.css на каждой странице лендинга и
   справки; прежнего общего /styles.css больше нет. Палитра --home-* висит на body.site; части
   страниц без аналога на главной (тарифы генератора, таблица сравнения, статьи справки) лежат
   в /pages.css и тоже берут только --home-*.
   Всё в области .site и .home-*, другие страницы не затрагивает.
   Значения — только переменные --home-* (сторож declaration-strict-value).
   Ссылки «ТЗ п.» — на TZ-glavnaya-slotbord.md. */

/* ── Переменные главной, ТЗ п. 6.1, 6.2, 6.4 ───────────────────────── */
/* Шрифты — те же файлы и диапазоны, что в styles.css (Onest 400–700 переменный, Unbounded). */
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/onest-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/unbounded-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/unbounded-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Знак рубля живёт в latin-ext, а Unbounded подключён только cyrillic + latin: без этого
   файла рубль в заголовке рисовался бы системным шрифтом. Диапазон — ровно по содержимому
   файла: шире — и знак евро (U+20AC, он есть в latin) достался бы файлу, где его нет. */
@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/unbounded-extra.woff2") format("woff2");
  unicode-range: U+00A0, U+20A1, U+20A3-20A4, U+20A6, U+20A9, U+20AB, U+20AD, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BC-20BD;
}

/* ── Общие части, взятые из styles.css (6.40-Л, замер Lighthouse: без общего файла LCP
   главной 1,9 с вместо 2,6 с). Главная подключает только tokens.css и этот файл; правила
   ниже повторяют styles.css слово в слово — при правке общего файла сверить и здесь. ── */
/* Поля колонки и высота шапки — как в styles.css:65–68 и 148–150: без них .shell подвала
   и строки «Обновлено» прижимались к краю, а якоря открывались под залипшей шапкой. */
:root {
  --margin: var(--s-48); --gap: var(--s-24);
  --topbar-h: 68px;
}
@media (min-width: 768px) and (max-width: 1279px) { :root { --margin: var(--s-32); } }
@media (max-width: 767px) { :root { --margin: var(--s-20); --gap: var(--s-12); } }
*, *::before, *::after { box-sizing: border-box; }
/* Именно clip, а не hidden: hidden делает корень блоком прокрутки и ломает position: sticky
   у шапки и сцены «Как проходит онлайн-запись», clip подрезает так же, но блока не создаёт. */
html { background: var(--home-bg); overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; position: relative; overflow-x: clip;
  background: var(--home-bg); color: var(--home-text);
  font: var(--t-16); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
h1, h2, h3 { overflow-wrap: break-word; }
ul { padding: 0; list-style: none; }
a { color: var(--home-link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
svg.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
svg.ic--sm { width: 16px; height: 16px; }
svg.ic--lg { width: 24px; height: 24px; }
[id] { scroll-margin-top: calc(var(--topbar-h) + var(--s-16)); }
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 var(--s-16);
  background: var(--home-surface); color: var(--home-ink); border: 1px solid var(--home-line);
  border-radius: var(--r-12); font: var(--t-14); font-weight: 600;
}
.skip:focus { top: 8px; }
.vh {
  position: absolute; width: 1px; height: 1px; margin: 0;
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* 6.42-Л (Г-1): одна сетка на всех страницах — та же колонка, что .home-wrap главной
   (1200 px + поля --home-gutter): на 1440 логотип шапки, h1, текст и логотип подвала стоят на
   152 px. Прежде .shell брал --margin (48 px) и стоял на 120 px — шапка и текст расходились на 32 px. */
.shell { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 var(--home-gutter); }
/* Кнопки .btn других страниц и уведомления о Метрике — тот же вид, что home-btn (ниже):
   главная — градиент, вторая — белая с рамкой, третья — текстом. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--home-sp-8); height: 56px; padding: 0 var(--home-sp-24); box-sizing: border-box;
  border-radius: var(--home-r-12); border: 1px solid transparent; color: var(--home-ink); font-family: var(--font); font-size: var(--home-fs-16); font-weight: 600; line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap; background: var(--home-surface); }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--home-grad); color: var(--home-on-dark); border-color: transparent; }
.btn--primary:hover { filter: brightness(.94); }
.btn--secondary { background: var(--home-surface); border-color: var(--home-control-line); color: var(--home-ink); }
.btn--secondary:hover { border-color: var(--home-ink); }
.btn--tertiary { background: transparent; border-color: transparent; padding: 0 var(--home-sp-12); }
.btn--tertiary:hover { text-decoration: underline; }
.btn--sm { height: 44px; padding: 0 var(--home-sp-18); border-radius: var(--home-r-10); font-size: var(--home-fs-15); }
.btn--block { width: 100%; }
.logo { display: inline-flex; align-items: center; gap: var(--s-8); font-family: var(--font-cover); font-size: var(--fs-18); font-weight: 600; line-height: 1; color: var(--home-ink); letter-spacing: -.01em; min-height: var(--hit); }
.logo:hover { text-decoration: none; }
.logo__mark { position: relative; width: 28px; height: 28px; border-radius: var(--mark-radius); flex: none; display: block; background: var(--mark-fill); }
.logo__mark::before, .logo__mark::after { content: ""; position: absolute; left: 21.875%; height: 9.375%; border-radius: var(--r-pill); background: var(--home-on-dark); }
.logo__mark::before { top: 34.375%; width: 56.25%; }
.logo__mark::after { top: 56.25%; width: 34.375%; }
.logo__mark--lg { width: 44px; height: 44px; }
.theme-btn { width: 44px; height: 44px; border-radius: var(--r-pill); border: 1px solid var(--home-control-line); background: var(--home-control); display: grid; place-items: center; cursor: pointer; color: var(--home-text-2); flex: none; }
.theme-btn:hover { background: var(--home-line); }
/* Иконка показывает, куда переключит кнопка: в светлой теме — луна, в тёмной — солнце. */
.theme-btn .ic-sun { display: none; }
:root[data-theme="dark"] .theme-btn .ic-sun { display: block; }
:root[data-theme="dark"] .theme-btn .ic-moon { display: none; }
.solid { background: var(--solid); border: 1px solid var(--solid-fill); box-shadow: var(--sh-3); color: var(--solid-text); }
.footer { position: relative; z-index: 1; background: var(--home-bg); border-top: 1px solid var(--home-line); padding: var(--s-48) 0 var(--s-40); }
.footer__g { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-24); }
.footer__about { margin-top: var(--s-12); max-width: 34ch; }
.footer__h { font: var(--t-13); font-weight: 600; margin-bottom: var(--s-12); }
.footer ul { display: grid; gap: var(--s-8); font-size: var(--fs-14); }
.footer ul a { color: var(--home-text); }
.footer ul b { color: var(--home-ink); font-weight: 600; }
.footer__legal { margin-top: var(--s-32); padding-top: var(--s-20); border-top: 1px solid var(--home-line); font-size: var(--fs-12); color: var(--home-muted); display: flex; justify-content: space-between; gap: var(--s-16); flex-wrap: wrap; }
@media (max-width: 767px) {
  .footer__g { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__g > :first-child { grid-column: 1 / -1; }
  .footer ul { gap: 0; }
  .footer li a { display: flex; align-items: center; min-height: var(--hit); }
}

.cookie-note {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60;
  width: min(560px, calc(100vw - 32px)); display: flex; align-items: center; gap: var(--s-8) var(--s-12); flex-wrap: wrap;
  padding: var(--s-12) var(--s-12) var(--s-12) var(--s-16); border-radius: var(--r-18);
}
.cookie-note p { flex: 1 1 100%; margin: 0; font: var(--t-13); color: var(--solid-text-2); }
.cookie-note a { text-decoration: underline; text-underline-offset: 2px; color: var(--solid-text); }
.cookie-note__acts { display: flex; gap: var(--s-8); margin-left: auto; }
.cookie-note .btn { min-height: var(--hit); }
.cookie-note .btn--secondary { background: transparent; color: var(--solid-text); border-color: var(--solid-text-2); }
.cookie-note .btn--secondary:hover { background: var(--solid-fill); }
@media (max-width: 767px) {
  .cookie-note { bottom: calc(var(--sticky-bar-h) + 16px); }
  .cookie-note__acts { flex: 1 1 100%; }
  .cookie-note__acts .btn { flex: 1 1 0; }
}


.site {
  /* цвета */
  --home-bg: #F5F3F9;
  --home-surface: #FFFFFF;
  --home-ink: #1B1433;
  --home-text: #4A4270;
  --home-text-2: #3A3355;
  --home-muted: #6F6888;
  --home-line: #E6E1F0;
  --home-line-2: #DDD7EA;
  --home-line-3: #EFECF5;
  --home-line-4: #F1EEF7;
  --home-line-5: #F0EDF7;
  --home-control: #F3F1F8;
  --home-control-line: #D6CFE6;
  --home-link: #4A33C9;
  --home-link-hover: #2E1F8A;
  --home-arrow: #B3ABC9;
  --home-badge: #B0105F;
  /* тёмные блоки и текст на них */
  --home-dark-bg: #1B1433;
  --home-dark-hover: #2A2150;
  --home-focus-dark: #4A33C9;
  --home-on-dark: #FFFFFF;
  --home-on-dark-2: #CFC8EF;
  --home-on-dark-3: #E4DEFA;
  --home-on-dark-accent: #B9A8F7;
  --home-on-dark-line: rgba(255, 255, 255, .12);
  --home-on-dark-line-2: rgba(255, 255, 255, .14);
  --home-on-dark-border: rgba(255, 255, 255, .2);
  --home-on-dark-btn: rgba(255, 255, 255, .35);
  --home-toast-ic: #CDBFFF;
  /* смысловые цвета фрагментов */
  --home-ok: #0E6F68;
  --home-ok-bg: #E7F6F4;
  --home-ok-line: #9BD6CF;
  --home-warn: #8A5A10;
  --home-act: #4A33C9;
  /* ячейки доски */
  --home-cell-free-bg: #E7F6F4;
  --home-cell-free-line: #9BD6CF;
  --home-cell-free-text: #0E6F68;
  --home-cell-busy-bg: #EFEDF4;
  --home-cell-busy-line: #EFEDF4;
  --home-cell-busy-text: #2A2440;
  --home-cell-sel-bg: #ECE7FF;
  --home-cell-sel-line: #A593F3;
  --home-cell-sel-text: #3B2A9E;
  --home-cell-brk-bg: #FBEED6;
  --home-cell-brk-line: #ECC98A;
  --home-cell-off-line: #EBE8F2;
  --home-cell-off-text: #5C5576;
  --home-cell-off-bg: repeating-linear-gradient(135deg, #F5F4F9 0 6px, #EBE8F2 6px 12px);
  --home-cell-off-bg-s: repeating-linear-gradient(135deg, #F3F2F7 0 3px, #E2DFEB 3px 6px);
  /* главная кнопка (единственный градиент) */
  --home-grad: linear-gradient(90deg, #DA0061 0%, #6B4BFF 50%, #0A7A85 100%);
  /* тени: доска и активная вкладка (ТЗ п. 7) */
  --home-sh-card: 0 1px 2px rgba(27, 20, 51, .05), 0 16px 40px rgba(27, 20, 51, .08);
  --home-sh-tab: 0 1px 2px rgba(27, 20, 51, .12);
  /* радиусы */
  --home-r-3: 3px;
  --home-r-6: 6px;
  --home-r-8: 8px;
  --home-r-10: 10px;
  --home-r-12: 12px;
  --home-r-14: 14px;
  --home-r-16: 16px;
  --home-r-20: 20px;
  /* кегли */
  --home-fs-11: 11px;
  --home-fs-12: 12px;
  --home-fs-13: 13px;
  --home-fs-14: 14px;
  --home-fs-15: 15px;
  --home-fs-16: 16px;
  --home-fs-17: 17px;
  --home-fs-18: 18px;
  --home-fs-19: 19px;
  --home-fs-20: 20px;
  --home-fs-22: 22px;
  --home-fs-26: 26px;
  --home-fs-40: 40px;
  --home-fs-44: 44px;
  --home-fs-h1: clamp(32px, 4.4vw, 58px);
  --home-fs-h2: clamp(26px, 2.8vw, 36px);
  --home-fs-h2-l: clamp(28px, 3vw, 40px);
  --home-fs-h2-demo: clamp(26px, 2.8vw, 38px);
  --home-fs-h2-final: clamp(28px, 3.4vw, 46px);
  /* отступы */
  --home-sp-2: 2px;
  --home-sp-3: 3px;
  --home-sp-4: 4px;
  --home-sp-6: 6px;
  --home-sp-8: 8px;
  --home-sp-10: 10px;
  --home-sp-12: 12px;
  --home-sp-14: 14px;
  --home-sp-16: 16px;
  --home-sp-18: 18px;
  --home-sp-20: 20px;
  --home-sp-22: 22px;
  --home-sp-24: 24px;
  --home-sp-28: 28px;
  --home-sp-32: 32px;
  --home-sp-36: 36px;
  --home-sp-40: 40px;
  --home-sp-48: 48px;
  --home-sp-56: 56px;
  --home-sp-72: 72px;
  --home-sp-80: 80px;
  --home-gutter: clamp(16px, 4vw, 32px);

  background: var(--home-bg);
  color: var(--home-text);
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
}
/* display у классов не должен перебивать атрибут hidden, который снимает и ставит home.js */
.site [hidden] { display: none !important; }

/* ── Каркас, ТЗ п. 5 (общие правила) ──────────────────────────────── */
.home { display: block; }
.home-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--home-gutter); }
.home-sec { padding: var(--home-sp-80) 0; position: relative; }
.home-hero { padding: var(--home-sp-56) 0 var(--home-sp-80); }
.home-final { padding: var(--home-sp-72) 0; }
.home-vygoda, .home-otlichie, .home-rabota, .home-cena, .home-faq { border-top: 1px solid var(--home-line); }
.home-anchor { display: block; width: 0; height: 0; padding: 0; margin: 0; border: 0; overflow: hidden; }
.site h1, .site h2, .site h3 { overflow-wrap: break-word; }

/* ── Типографика, ТЗ п. 6.2 ───────────────────────────────────────── */
.home-h1 { font-family: var(--font-cover); font-weight: 600; font-size: var(--home-fs-h1); line-height: 1.06; letter-spacing: -.025em; color: var(--home-ink); text-wrap: balance; }
.home-h2 { font-family: var(--font-cover); font-weight: 600; font-size: var(--home-fs-h2); line-height: 1.12; letter-spacing: -.02em; color: var(--home-ink); }
.home-h2--l { font-size: var(--home-fs-h2-l); max-width: 760px; margin-bottom: var(--home-sp-40); }
.home-h2--demo { font-size: var(--home-fs-h2-demo); color: var(--home-on-dark); }
.home-h2--final { font-size: var(--home-fs-h2-final); line-height: 1.08; color: var(--home-on-dark); }
/* 6.56.2-Л (Х-9): короткая строка «что это» над H1 главной — только телефон (mobile-fix.css). */
.home-eyebrow__m { display: none; }
.home-eyebrow { font-weight: 400; font-size: var(--home-fs-15); line-height: 1.4; color: var(--home-muted); text-transform: none; letter-spacing: 0; }
.home-lede { font-size: var(--home-fs-18); line-height: 1.5; color: var(--home-text); }
.home-lede--s { font-size: var(--home-fs-16); max-width: 300px; }
.home-usloviya .home-lede, .home-cena .home-lede { font-size: var(--home-fs-17); }
.home-fine { display: flex; flex-direction: column; gap: var(--home-sp-6); max-width: 520px; font-size: var(--home-fs-14); line-height: 1.45; color: var(--home-text); }
.home-fine p { margin: 0; }
.home-fine__cond { color: var(--home-text-2); }
.home-fine a, .home-cena__foot a, .home-faq__all { color: var(--home-link); }
.home-fine a:hover, .home-cena__foot a:hover, .home-faq__all:hover { color: var(--home-link-hover); text-decoration: underline; }
/* Ссылка внутри абзаца отличается не только цветом (WCAG 1.4.1, Lighthouse link-in-text-block). */
.home-fine a, .home-cena__foot a { text-decoration: underline; text-underline-offset: 2px; }

/* ── Кнопки, ТЗ п. 6.4 ────────────────────────────────────────────── */
.home-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 var(--home-sp-24); box-sizing: border-box;
  border: 1px solid transparent; border-radius: var(--home-r-12);
  font-family: var(--font); font-weight: 600; font-size: var(--home-fs-16); line-height: 1;
  white-space: nowrap; cursor: pointer;
  transition: filter .15s ease, border-color .15s ease, background-color .15s ease;
}
.home-btn, .home-btn:hover { text-decoration: none; }
.home-btn--main { background: var(--home-grad); color: var(--home-on-dark); border-color: transparent; }
.home-btn--main:hover { filter: brightness(.94); color: var(--home-on-dark); }
.home-btn--second { padding: 0 var(--home-sp-22); background: var(--home-surface); border-color: var(--home-control-line); color: var(--home-ink); }
.home-btn--second:hover { border-color: var(--home-ink); color: var(--home-ink); }
.home-btn--dark { background: var(--home-dark-bg); border-color: var(--home-dark-bg); color: var(--home-on-dark); }
.home-btn--dark:hover { background: var(--home-dark-hover); border-color: var(--home-dark-hover); color: var(--home-on-dark); }
.home-btn--ghost { background: transparent; border-color: var(--home-on-dark-btn); color: var(--home-on-dark); }
.home-btn--ghost:hover { border-color: var(--home-on-dark); color: var(--home-on-dark); }
.home-btn--sm { height: 44px; padding: 0 var(--home-sp-18); border-radius: var(--home-r-10); font-size: var(--home-fs-15); }
.home-btn--md { height: 52px; }
.home-btn--block { display: flex; width: 100%; }
.home-demo .home-btn--main { height: 54px; }
.home-mbar .home-btn--main { height: 48px; padding: 0 var(--home-sp-18); font-size: var(--home-fs-15); }

/* Фокус, ТЗ п. 11: у всех ссылок, кнопок и вопросов; на тёмном — белая обводка */
.site a:focus-visible, .site button:focus-visible, .site summary:focus-visible {
  outline: 2px solid var(--home-ink); outline-offset: 2px;
}
.site .home-demo :focus-visible, .site .home-final :focus-visible, .site .home-card--dark :focus-visible {
  outline-color: var(--home-on-dark);
}
.site .home-btn--dark:focus-visible { outline-color: var(--home-focus-dark); }

/* ── Шапка, ТЗ п. 5.1 ─────────────────────────────────────────────── */
.home-top { position: sticky; top: 0; z-index: 10; background: var(--home-bg); border-bottom: 1px solid var(--home-line); }
.home-top__in { max-width: 1200px; margin: 0 auto; padding: var(--home-sp-12) var(--home-gutter); display: flex; align-items: center; gap: var(--home-sp-16); }
.home-top__logo { font-size: var(--home-fs-19); color: var(--home-ink); min-width: 0; }
.home-top__nav { display: flex; flex-wrap: wrap; gap: var(--home-sp-24); margin-left: var(--home-sp-12); }
.home-top__nav a { color: var(--home-text-2); font-size: var(--home-fs-15); font-weight: 500; }
/* 6.41.3 Г: текущий раздел — цветом чернил и чертой снизу (как у вкладок блога). Вес не меняем и рамку не
   берём: подчёркивание рисуется text-decoration, пункты в ряду не сдвигаются. Черта — не только цвет (WCAG 1.4.1).
   [aria-current] ловит и «page» (оглавление, блог), и «true» (статьи справки: «Справка» — раздел). */
.home-top__nav a[aria-current] { color: var(--home-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.home-top__act { margin-left: auto; display: flex; align-items: center; gap: var(--home-sp-8); }
.home-top__login { color: var(--home-ink); font-size: var(--home-fs-15); font-weight: 600; padding: var(--home-sp-12) var(--home-sp-10); white-space: nowrap; }

/* ── Первый экран, ТЗ п. 5.2 ──────────────────────────────────────── */
.home-hero .home-wrap { display: flex; flex-direction: column; gap: var(--home-sp-36); }
.home-hero__head { display: flex; flex-direction: column; gap: var(--home-sp-16); max-width: 1060px; }
.home-hero__head > * { margin: 0; }
.home-hero__row { display: flex; flex-wrap: wrap; gap: var(--home-sp-48); align-items: flex-start; }
.home-hero__text { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: var(--home-sp-24); }
.home-hero__text > * { margin: 0; }
.home-hero__cta { display: flex; flex-wrap: wrap; gap: var(--home-sp-12); padding-top: var(--home-sp-4); }
.home-hero__board { flex: 1.75 1 560px; min-width: 0; }

/* Доска журнала: карточка, ТЗ п. 5.2 */
.home-board { background: var(--home-surface); border: 1px solid var(--home-line); border-radius: var(--home-r-16); box-shadow: var(--home-sh-card); padding: var(--home-sp-18) var(--home-sp-18) var(--home-sp-16); display: flex; flex-direction: column; gap: var(--home-sp-14); }
.home-board__top { display: flex; align-items: center; gap: var(--home-sp-12); flex-wrap: wrap; }
.home-board__day { margin-left: auto; font-size: var(--home-fs-14); font-weight: 600; color: var(--home-ink); }
/* Вкладки, ТЗ п. 8.2 */
.home-tabs { display: flex; flex-wrap: wrap; gap: var(--home-sp-4); padding: var(--home-sp-3); border-radius: var(--home-r-10); background: var(--home-control); }
.home-tab { height: 34px; padding: 0 var(--home-sp-14); border: 0; border-radius: var(--home-r-8); background: transparent; color: var(--home-text); font-family: var(--font); font-size: var(--home-fs-13); font-weight: 600; cursor: pointer; }
.home-tab[aria-selected="true"] { background: var(--home-surface); color: var(--home-ink); box-shadow: var(--home-sh-tab); }
/* Прокрутка вбок внутри карточки */
.home-board__scroll { overflow-x: auto; }
.home-panel { min-width: 600px; }
.home-grid { display: flex; flex-direction: column; gap: var(--home-sp-6); }
.home-grid__row { display: grid; grid-template-columns: 148px repeat(11, minmax(0, 1fr)); column-gap: var(--home-sp-4); height: 48px; align-items: center; border-top: 1px solid var(--home-line-4); }
.home-grid__row--head { height: 22px; border-top: 0; }
.home-grid__note { grid-column: 1 / 2; min-width: 0; font-size: var(--home-fs-12); color: var(--home-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-grid__h { font-size: var(--home-fs-12); font-weight: 600; color: var(--home-muted); padding-left: var(--home-sp-2); font-variant-numeric: tabular-nums; }
.home-grid__name { grid-column: 1 / 2; grid-row: 1; display: flex; align-items: center; gap: var(--home-sp-10); min-width: 0; padding-right: var(--home-sp-8); }
.home-ico { width: 32px; height: 32px; border-radius: var(--home-r-8); flex: none; display: flex; align-items: center; justify-content: center; background: var(--home-control); color: var(--home-text-2); }
.home-ico svg { width: 16px; height: 16px; }
.home-grid__t { display: flex; flex-direction: column; min-width: 0; }
.home-grid__t b { display: block; font-size: var(--home-fs-14); font-weight: 600; line-height: 1.3; color: var(--home-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-grid__t small { display: block; font-size: var(--home-fs-12); font-weight: 400; line-height: 1.3; color: var(--home-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ячейки, цвета — ТЗ п. 6.1 */
.home-cell { grid-row: 1; height: 38px; box-sizing: border-box; min-width: 0; overflow: hidden; display: flex; align-items: center; padding: 0 var(--home-sp-8); border: 1px solid transparent; border-radius: var(--home-r-6); font-size: var(--home-fs-13); font-weight: 500; }
.home-cell > span { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-cell--free { background: var(--home-cell-free-bg); border-color: var(--home-cell-free-line); color: var(--home-cell-free-text); }
.home-cell--busy { background: var(--home-cell-busy-bg); border-color: var(--home-cell-busy-line); color: var(--home-cell-busy-text); }
.home-cell--sel { background: var(--home-cell-sel-bg); border-color: var(--home-cell-sel-line); color: var(--home-cell-sel-text); font-weight: 600; }
.home-cell--brk { background: var(--home-cell-brk-bg); border-color: var(--home-cell-brk-line); padding: 0; }
.home-cell--off { background: var(--home-cell-off-bg); border-color: var(--home-cell-off-line); color: var(--home-cell-off-text); }
/* Подсказка про прокрутку — только на телефоне */
.home-board__hint { display: none; font-size: var(--home-fs-12); line-height: 1.3; color: var(--home-muted); }
/* Низ доски: легенда и плашка */
.home-board__foot { display: flex; align-items: center; gap: var(--home-sp-16); flex-wrap: wrap; padding-top: var(--home-sp-10); border-top: 1px solid var(--home-line-4); }
.home-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--home-sp-16); }
.home-legend > span { display: flex; align-items: center; gap: var(--home-sp-6); font-size: var(--home-fs-12); color: var(--home-text); }
.home-legend__i { display: inline-block; width: 14px; height: 10px; box-sizing: border-box; border: 1px solid transparent; border-radius: var(--home-r-3); }
.home-legend__i--free { background: var(--home-cell-free-bg); border-color: var(--home-cell-free-line); }
.home-legend__i--busy { background: var(--home-cell-busy-bg); border-color: var(--home-cell-busy-line); }
.home-legend__i--brk { background: var(--home-cell-brk-bg); border-color: var(--home-cell-brk-line); }
.home-legend__i--off { background: var(--home-cell-off-bg-s); }
.home-toast { margin-left: auto; display: flex; align-items: center; gap: var(--home-sp-10); padding: var(--home-sp-8) var(--home-sp-12); border-radius: var(--home-r-10); background: var(--home-dark-bg); color: var(--home-on-dark); font-size: var(--home-fs-13); }
.home-toast b { font-weight: 700; }
.home-toast__ic { width: 16px; height: 16px; flex: none; stroke: var(--home-toast-ic); }

/* ── 5.3 Выгода с двух сторон ─────────────────────────────────────── */
.home-vygoda__row { display: flex; flex-wrap: wrap; gap: var(--home-sp-20); align-items: stretch; }
.home-card { min-width: 0; padding: var(--home-sp-32); border-radius: var(--home-r-20); display: flex; flex-direction: column; gap: var(--home-sp-24); }
.home-card--light { flex: 5 1 340px; background: var(--home-surface); border: 1px solid var(--home-line); color: var(--home-ink); }
.home-card--dark { flex: 7 1 420px; background: var(--home-dark-bg); color: var(--home-on-dark); }
.home-card__label { display: block; font-size: var(--home-fs-14); font-weight: 600; margin-bottom: calc(var(--home-sp-6) - var(--home-sp-24)); }
.home-card--light .home-card__label { color: var(--home-ok); }
.home-card--dark .home-card__label { color: var(--home-on-dark-accent); }
.home-card__t { font-family: var(--font); font-size: var(--home-fs-26); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: inherit; }
.home-path { display: flex; flex-wrap: wrap; align-items: center; gap: var(--home-sp-10); font-size: var(--home-fs-14); color: var(--home-text-2); }
.home-path__arrow { color: var(--home-arrow); }
.home-path__end { font-weight: 700; color: var(--home-ok); }
.home-dl { margin: 0; display: flex; flex-direction: column; }
.home-dl__i { padding: var(--home-sp-16) 0; border-top: 1px solid var(--home-line-3); }
.home-card--light .home-dl__i:last-child { padding-bottom: 0; }
.home-dl dt { margin: 0; font-size: var(--home-fs-16); font-weight: 700; line-height: 1.3; }
.home-dl dd { margin: var(--home-sp-4) 0 0; font-size: var(--home-fs-15); line-height: 1.45; color: var(--home-text); }
.home-card--dark .home-dl__i { border-top-color: var(--home-on-dark-line); }
.home-card--dark .home-dl dd { color: var(--home-on-dark-2); }
.home-dl--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); column-gap: var(--home-sp-32); }
.home-journal { display: flex; align-items: center; gap: var(--home-sp-12); padding: var(--home-sp-12) var(--home-sp-14); border: 1px solid var(--home-on-dark-line-2); border-radius: var(--home-r-10); font-size: var(--home-fs-14); color: var(--home-on-dark-3); }
.home-journal__time { font-weight: 700; color: var(--home-on-dark); font-variant-numeric: tabular-nums; }

/* ── 5.3а Чем Слотборд отличается (6.56.2-Л, Х-1) ─────────────────── */
/* Та же сетка, что у «Что меняется» ниже: заголовок слева (1 1 260), пункты справа (3 1 620) — левые края совпадают
   на любой ширине. Пункты 2×2: тезис и довод, линия сверху; на 768–1023 одна колонка. Телефон — mobile-fix.css.
   Пункт — подсетка из двух строк (тезис, довод): в ряду доводы начинаются на одной высоте, даже если соседний тезис в две строки. */
.home-otlichie__row { display: flex; flex-wrap: wrap; gap: var(--home-sp-40); }
.home-otlichie__head { flex: 1 1 260px; min-width: 0; }
.home-otl { flex: 3 1 620px; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--home-sp-48); row-gap: var(--home-sp-36); }
.home-otl__i { min-width: 0; padding-top: var(--home-sp-20); border-top: 1px solid var(--home-line-2); display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
.home-otl__t { margin: 0 0 var(--home-sp-8); font-family: var(--font); font-size: var(--home-fs-22); font-weight: 600; line-height: 1.3; color: var(--home-ink); }
.home-otl__p { margin: 0; font-size: var(--home-fs-17); line-height: 26px; color: var(--home-text); text-wrap: pretty; }
@media (max-width: 1023px) { .home-otl { grid-template-columns: minmax(0, 1fr); } }

/* ── 5.4 Что меняется в работе ────────────────────────────────────── */
.home-rabota__row { display: flex; flex-wrap: wrap; gap: var(--home-sp-40); }
.home-rabota__head { flex: 1 1 260px; min-width: 0; }
.home-rabota__head .home-h2 { margin-bottom: var(--home-sp-12); }
.home-rows { flex: 3 1 620px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.home-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); gap: var(--home-sp-24); padding: var(--home-sp-28) 0; border-top: 1px solid var(--home-line-2); align-items: start; }
.home-row:last-child { border-bottom: 1px solid var(--home-line-2); }
.home-row__n { padding-top: var(--home-sp-4); font-size: var(--home-fs-15); font-weight: 600; color: var(--home-muted); font-variant-numeric: tabular-nums; }
.home-row__body { min-width: 0; }
.home-row__t { margin-bottom: var(--home-sp-6); font-family: var(--font); font-size: var(--home-fs-20); font-weight: 700; line-height: 1.3; color: var(--home-ink); }
.home-row__p { font-size: var(--home-fs-16); line-height: 1.5; color: var(--home-text); }
.home-row__paid, .home-row__note { margin-top: var(--home-sp-8); font-size: var(--home-fs-13); color: var(--home-muted); }
/* Фрагменты интерфейса — прямо на фоне, без карточки */
.home-row__fig { min-width: 0; display: flex; flex-direction: column; gap: var(--home-sp-8); font-size: var(--home-fs-13); color: var(--home-text-2); font-variant-numeric: tabular-nums; }
.home-fig { display: flex; flex-direction: column; }
.home-fig__line { display: flex; gap: var(--home-sp-12); padding: var(--home-sp-8) 0; border-bottom: 1px dashed var(--home-line-2); }
.home-fig__line:last-child, .home-fig__line:has(+ .home-fig__note) { border-bottom: 0; }
.home-fig__time { width: 42px; flex: none; font-weight: 700; }
.home-fig__main { flex: 1; min-width: 0; }
.home-fig__src { color: var(--home-muted); }
.home-fig__note { display: block; padding-top: var(--home-sp-4); font-size: var(--home-fs-12); color: var(--home-muted); }
.home-pill { display: flex; justify-content: space-between; gap: var(--home-sp-8); padding: var(--home-sp-10) var(--home-sp-12); border-radius: var(--home-r-10); }
.home-pill--ok { background: var(--home-ok-bg); color: var(--home-ok); }
.home-pill--white { background: var(--home-surface); border: 1px solid var(--home-line); color: var(--home-text-2); }
.home-plate { display: flex; flex-wrap: wrap; gap: var(--home-sp-6) var(--home-sp-8); padding: var(--home-sp-12) var(--home-sp-14); border: 1px solid var(--home-line); border-radius: var(--home-r-10); background: var(--home-surface); }
.home-plate > b, .home-plate__row, .home-plate__sub { flex: 1 1 100%; }
.home-plate__row { display: flex; justify-content: space-between; gap: var(--home-sp-8); }
.home-plate__sub { color: var(--home-text); }
.home-ok { color: var(--home-ok); }
.home-warn { color: var(--home-warn); }
.home-act { color: var(--home-act); }
.home-tag { display: inline-block; padding: var(--home-sp-6) var(--home-sp-10); border: 1px solid transparent; border-radius: var(--home-r-8); font-weight: 600; }
.home-tag--ok { background: var(--home-ok-bg); color: var(--home-ok); }
.home-tag--line { border-color: var(--home-line); }

/* ── 5.5 Переход в демо ───────────────────────────────────────────── */
.home-demo { background: var(--home-dark-bg); color: var(--home-on-dark); }
.home-demo__row { display: flex; flex-wrap: wrap; gap: var(--home-sp-48); align-items: center; }
.home-demo__text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--home-sp-20); }
.home-demo__text > * { margin: 0; }
.home-demo__sub { font-size: var(--home-fs-17); line-height: 1.5; color: var(--home-on-dark-2); }
.home-demo__text .home-btn { margin-top: var(--home-sp-4); }
.home-demo__win { flex: 1.2 1 440px; min-width: 0; }
.home-win { background: var(--home-surface); border: 1px solid var(--home-on-dark-border); border-radius: var(--home-r-14); overflow: hidden; color: var(--home-ink); }
.home-win__bar { display: flex; align-items: center; gap: var(--home-sp-8); padding: var(--home-sp-10) var(--home-sp-14); background: var(--home-control); border-bottom: 1px solid var(--home-line); }
.home-win__bar > span { min-width: 0; font-size: var(--home-fs-12); color: var(--home-muted); }
.home-win__bar > .home-win__badge { margin-left: auto; flex: none; font-size: var(--home-fs-11); font-weight: 600; color: var(--home-badge); }
.home-win__body { display: flex; }
.home-win__menu { width: 124px; flex: none; padding: var(--home-sp-12) var(--home-sp-8); border-right: 1px solid var(--home-line-5); display: flex; flex-direction: column; gap: var(--home-sp-2); }
.home-win__menu > span { padding: var(--home-sp-8) var(--home-sp-8); font-size: var(--home-fs-12); color: var(--home-text); }
.home-win__menu > .home-win__on { border-radius: var(--home-r-6); background: var(--home-cell-sel-bg); color: var(--home-cell-sel-text); font-weight: 600; }
.home-win__main { flex: 1; min-width: 0; padding: var(--home-sp-12) var(--home-sp-14); display: flex; flex-direction: column; gap: var(--home-sp-10); }
.home-win__day { font-size: var(--home-fs-13); font-weight: 700; }
.home-win__grid { display: grid; grid-template-columns: 92px repeat(6, minmax(0, 1fr)); gap: var(--home-sp-4); align-items: center; }
.home-win__h { font-size: var(--home-fs-11); color: var(--home-muted); }
.home-win__name { min-width: 0; font-size: var(--home-fs-12); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-win__cell { min-width: 0; height: 30px; box-sizing: border-box; display: flex; align-items: center; padding: 0 var(--home-sp-8); border: 1px solid transparent; border-radius: var(--home-r-6); overflow: hidden; white-space: nowrap; font-size: var(--home-fs-11); }
.home-win__cell--busy { background: var(--home-cell-busy-bg); border-color: var(--home-cell-busy-line); }
.home-win__cell--brk { background: var(--home-cell-brk-bg); border-color: var(--home-cell-brk-line); }
.home-win__cell--sel { background: var(--home-cell-sel-bg); border-color: var(--home-cell-sel-line); color: var(--home-cell-sel-text); font-weight: 600; }
.home-win__cell--free { background: var(--home-cell-free-bg); border-color: var(--home-cell-free-line); color: var(--home-cell-free-text); }

/* ── 5.6 Условия: что платите и что остаётся вашим ──────────────────────────────────────────── */
.home-usloviya .home-h2 { margin-bottom: var(--home-sp-8); }
.home-usloviya .home-lede { margin-bottom: var(--home-sp-40); }
.home-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid var(--home-line-2); }
.home-fact { min-width: 0; padding: var(--home-sp-24) var(--home-sp-24) var(--home-sp-8) 0; display: flex; flex-direction: column; gap: var(--home-sp-10); }
.home-fact__big { font-family: var(--font-cover); font-weight: 600; font-size: var(--home-fs-40); line-height: 1.1; letter-spacing: -.02em; color: var(--home-ink); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.home-fact__label { font-size: var(--home-fs-16); font-weight: 700; color: var(--home-ink); }
.home-fact__text { font-size: var(--home-fs-15); line-height: 1.45; color: var(--home-text); }

/* ── 5.8 Тарифы ───────────────────────────────────────────────────── */
.home-cena__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--home-sp-20); margin-bottom: var(--home-sp-32); }
.home-cena__head > div:first-child { display: flex; flex-direction: column; gap: var(--home-sp-8); min-width: 0; }
.home-period { margin-left: auto; display: flex; gap: var(--home-sp-2); padding: var(--home-sp-3); border: 1px solid var(--home-line); border-radius: var(--home-r-10); background: var(--home-surface); }
.home-period__b { height: 36px; padding: 0 var(--home-sp-14); border: 0; border-radius: var(--home-r-8); background: transparent; color: var(--home-text); font-family: var(--font); font-size: var(--home-fs-14); font-weight: 600; cursor: pointer; }
.home-period__b[aria-pressed="true"] { background: var(--home-dark-bg); color: var(--home-on-dark); }
.home-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--home-sp-20); align-items: stretch; }
.home-price { min-width: 0; display: flex; flex-direction: column; gap: var(--home-sp-18); padding: var(--home-sp-28); border: 1px solid var(--home-line); border-radius: var(--home-r-16); background: var(--home-surface); }
.home-price--free { border: 2px solid var(--home-ink); }
.home-price__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--home-sp-8); }
.home-price__name { font-size: var(--home-fs-17); font-weight: 700; color: var(--home-ink); }
.home-price__tag { font-size: var(--home-fs-13); color: var(--home-text); }
.home-price__num { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--home-sp-8); font-size: var(--home-fs-44); font-weight: 600; line-height: 1; letter-spacing: -.01em; color: var(--home-ink); font-variant-numeric: tabular-nums; }
.home-price__per { font-size: var(--home-fs-15); font-weight: 400; letter-spacing: 0; color: var(--home-text); }
.home-price__note { margin-top: calc(var(--home-sp-4) - var(--home-sp-18)); font-size: var(--home-fs-13); color: var(--home-muted); }
.home-price__list { flex: 1; display: flex; flex-direction: column; gap: var(--home-sp-10); margin: 0; padding: 0 0 0 var(--home-sp-18); list-style: disc; font-size: var(--home-fs-15); color: var(--home-text-2); }
.home-price__list > .home-price__muted { color: var(--home-muted); font-size: var(--home-fs-14); }
.home-cena__foot { margin-top: var(--home-sp-6); font-size: var(--home-fs-14); line-height: 1.5; color: var(--home-text); text-align: center; }
.home-prices + .home-cena__foot { margin-top: var(--home-sp-24); }
.home-cena__foot a { font-weight: 600; }

/* ── 5.9 Вопросы ──────────────────────────────────────────────────── */
.home-faq__row { display: flex; flex-wrap: wrap; gap: var(--home-sp-40); }
.home-faq__head { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--home-sp-14); }
.home-faq__all { font-size: var(--home-fs-16); font-weight: 600; }
.home-qas { flex: 3 1 560px; min-width: 0; border-top: 1px solid var(--home-line-2); }
.home-qa { border-bottom: 1px solid var(--home-line-2); }
.home-qa__q { display: flex; align-items: center; gap: var(--home-sp-16); padding: var(--home-sp-20) 0; min-height: 44px; list-style: none; cursor: pointer; font-size: var(--home-fs-18); font-weight: 600; color: var(--home-ink); }
.home-qa__q::-webkit-details-marker { display: none; }
.home-qa__q > span:first-child { flex: 1; min-width: 0; }
.home-qa__sign { flex: none; width: 20px; text-align: center; font-size: var(--home-fs-22); font-weight: 400; line-height: 1; color: var(--home-muted); }
.home-qa__sign::before { content: "+"; }
.home-qa[open] .home-qa__sign::before { content: "−"; }
.home-qa__a { max-width: 640px; margin: 0 0 var(--home-sp-20); font-size: var(--home-fs-16); line-height: 1.55; color: var(--home-text); }

/* ── 5.10 Финал ───────────────────────────────────────────────────── */
.home-final { background: var(--home-dark-bg); color: var(--home-on-dark); }
.home-final__row { display: flex; flex-wrap: wrap; gap: var(--home-sp-32); align-items: flex-end; justify-content: space-between; }
.home-final__text { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: var(--home-sp-14); }
.home-final__text > * { margin: 0; }
.home-final__sub { max-width: 540px; font-size: var(--home-fs-18); line-height: 1.5; color: var(--home-on-dark-2); }
.home-final__cta { display: flex; flex-wrap: wrap; gap: var(--home-sp-12); }
.home-fine--dark { flex: 1 1 100%; max-width: none; gap: var(--home-sp-4); color: var(--home-on-dark-2); }
.home-fine--dark .home-fine__cond, .home-fine--dark .home-fine__mail { color: var(--home-on-dark-2); }
.home-fine--dark a { color: var(--home-on-dark); }
.home-fine--dark a:hover { color: var(--home-on-dark); }

/* ── 5.11 Подвал ──────────────────────────────────────────────────── */
.home-forwho { display: flex; flex-wrap: wrap; align-items: center; gap: var(--home-sp-10) var(--home-sp-20); margin-bottom: var(--home-sp-24); padding-bottom: var(--home-sp-20); border-bottom: 1px solid var(--home-line); font-size: var(--home-fs-14); }
.home-forwho a { color: var(--home-text-2); }
.home-forwho__l { color: var(--home-muted); }
.site .footer { background: var(--home-bg); }

/* ── 5.12 Липкая панель на телефоне ───────────────────────────────── */
.home-mbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; align-items: center; gap: var(--home-sp-12); padding: var(--home-sp-12) var(--home-sp-16) calc(var(--home-sp-12) + env(safe-area-inset-bottom, 0px)); background: var(--home-surface); border-top: 1px solid var(--home-line); }
.home-mbar__t { flex: 1; min-width: 0; font-size: var(--home-fs-14); line-height: 1.3; color: var(--home-text-2); }
.home-mbar .home-btn { flex: none; }

/* ── Появление блоков при входе в окно, ТЗ п. 5, контракт ─────────── */
.site .home-sec { transition: opacity .35s ease, transform .35s ease; }
:root[data-home-anim] .home-sec:not(.home-hero):not([data-in]) { opacity: 0; transform: translateY(12px); }
@media (prefers-reduced-motion: reduce) {
  .site .home-sec, .site .home-btn { transition: none; }
  :root[data-home-anim] .home-sec { opacity: 1; transform: none; }
}

/* ── Телефон: единственная точка перелома, ТЗ п. 6.5 ──────────────── */
@media (max-width: 767px) {
  /* На самых узких экранах (320) надпись главной кнопки не помещается в строку: разрешаем перенос,
     высота растёт от минимума, страница вбок не ездит. */
  .home-btn { max-width: 100%; white-space: normal; text-align: center; height: auto; min-height: 56px; padding-top: var(--home-sp-8); padding-bottom: var(--home-sp-8); }
  .home-btn--sm { min-height: 44px; }
  .home-btn--md { min-height: 52px; }
  .home-mbar .home-btn--main { min-height: 48px; }
  .home-top__in { gap: var(--home-sp-8); }
  .home-top__act { gap: var(--home-sp-4); }
  /* На телефоне кнопки темы в шапке нет: вместе с «Войти» и «Открыть демо» (ТЗ 5.1) она не
     помещается в 360 px и наезжает на слово «Слотборд». Выбранная тема действует из хранилища. */
  .home-top .theme-btn { display: none; }
  .home-top__nav { display: none; }
  .home-top__logo { font-size: var(--home-fs-16); }
  .home-top__login { font-size: var(--home-fs-14); padding: var(--home-sp-12) var(--home-sp-4); }
  .home-top .home-btn--sm { padding: 0 var(--home-sp-12); font-size: var(--home-fs-14); }
  .home-board__hint { display: block; }
  .home-row { grid-template-columns: 32px minmax(0, 1fr); row-gap: var(--home-sp-16); }
  .home-row__fig { grid-column: 2; }
  .site .footer { padding-bottom: var(--home-sp-72); }
  :root[data-home-mbar]:not([data-consent-pending]) .home-mbar { display: flex; }
}

/* ── Тёмная тема, ТЗ п. 6.6 ───────────────────────────────────────── */
/* Значения ТЗ приняты как есть, кроме цветов смысловых плашек и ячеек: их тексты осветлены
   (ТЗ: «фон не меняется, текст осветляется»). Контраст каждой пары — в
   docs/otchet-6-40-l/kontrast-tyomnoy-temy.md. */
:root[data-theme="dark"] .site {
  --home-bg: #0E0A1C;
  --home-surface: #17122B;
  --home-ink: #F4F1FC;
  --home-text: #CFC8EF;
  --home-text-2: #E4DEFA;
  --home-muted: #A79FC4;
  --home-line: rgba(255, 255, 255, .10);
  --home-line-2: rgba(255, 255, 255, .12);
  --home-line-3: rgba(255, 255, 255, .08);
  --home-line-4: rgba(255, 255, 255, .07);
  --home-line-5: rgba(255, 255, 255, .08);
  --home-control: rgba(255, 255, 255, .08);
  --home-control-line: rgba(255, 255, 255, .22);
  --home-link: #B9A8F7;
  --home-link-hover: #D6CCFF;
  --home-arrow: #6F6888;
  /* тёмные блоки, тост, активный период — #241C45 */
  --home-dark-bg: #241C45;
  --home-dark-hover: #2F2558;
  --home-focus-dark: #F4F1FC;
  /* смысловые цвета */
  --home-ok: #7DDDD0;
  --home-ok-bg: rgba(155, 214, 207, .14);
  --home-ok-line: rgba(155, 214, 207, .4);
  --home-warn: #E8B96A;
  --home-act: #B9A8F7;
  /* ячейки: оттенки светлой темы с прозрачностью поверх --home-surface */
  --home-cell-free-bg: rgba(155, 214, 207, .16);
  --home-cell-free-line: rgba(155, 214, 207, .4);
  --home-cell-free-text: #7DDDD0;
  --home-cell-busy-bg: rgba(239, 237, 244, .1);
  --home-cell-busy-line: rgba(239, 237, 244, .1);
  --home-cell-busy-text: #E4DEFA;
  --home-cell-sel-bg: rgba(165, 147, 243, .24);
  --home-cell-sel-line: rgba(165, 147, 243, .6);
  --home-cell-sel-text: #D6CCFF;
  --home-cell-brk-bg: rgba(236, 201, 138, .18);
  --home-cell-brk-line: rgba(236, 201, 138, .45);
  --home-cell-off-line: rgba(255, 255, 255, .08);
  --home-cell-off-text: #A79FC4;
  --home-cell-off-bg: repeating-linear-gradient(135deg, #1A1530 0 6px, #231D3B 6px 12px);
  --home-cell-off-bg-s: repeating-linear-gradient(135deg, #1A1530 0 3px, #2A2345 3px 6px);
  --home-sh-card: 0 16px 40px rgba(0, 0, 0, .35);
  --home-sh-tab: 0 1px 2px rgba(0, 0, 0, .4);
}
/* Вкладка и кнопки, где цвет вписан не переменной */
:root[data-theme="dark"] .site .home-tab[aria-selected="true"] { background: var(--home-dark-bg); color: var(--home-ink); }
/* «Тёмная» кнопка на тёмной странице — инверсия: светлая заливка, тёмный текст */
:root[data-theme="dark"] .site .home-btn--dark { background: var(--home-ink); border-color: var(--home-ink); color: var(--home-bg); }
:root[data-theme="dark"] .site .home-btn--dark:hover { background: var(--home-text-2); border-color: var(--home-text-2); color: var(--home-bg); }
/* Вторая кнопка: прозрачная, рамка .35, белый текст */
:root[data-theme="dark"] .site .home-btn--second { background: transparent; border-color: var(--home-on-dark-btn); color: var(--home-on-dark); }
:root[data-theme="dark"] .site .home-btn--second:hover { border-color: var(--home-on-dark); color: var(--home-on-dark); }
/* Окно демо — картинка кабинета в светлой теме: возвращаем светлые значения внутри окна */
:root[data-theme="dark"] .site .home-win {
  --home-surface: #FFFFFF;
  --home-ink: #1B1433;
  --home-text: #4A4270;
  --home-muted: #6F6888;
  --home-line: #E6E1F0;
  --home-line-5: #F0EDF7;
  --home-control: #F3F1F8;
  --home-cell-free-bg: #E7F6F4;
  --home-cell-free-line: #9BD6CF;
  --home-cell-free-text: #0E6F68;
  --home-cell-busy-bg: #EFEDF4;
  --home-cell-busy-line: #EFEDF4;
  --home-cell-sel-bg: #ECE7FF;
  --home-cell-sel-line: #A593F3;
  --home-cell-sel-text: #3B2A9E;
  --home-cell-brk-bg: #FBEED6;
  --home-cell-brk-line: #ECC98A;
}