/* Создано build.py из content/brand/variants.yaml. Руками не править. */
[data-variant="a"] {
  --L-bg: #ffffff;
  --L-surface: #f2f3f5;
  --L-ink: #111418;
  --L-ink2: #3f454e;
  --L-muted: #5c636d;
  --L-soft: #8b919a;
  --L-line: #e2e4e8;
  --L-line2: #c3c7cd;
  --L-accent: #1c4f9c;
  --L-on-accent: #ffffff;
  --L-hover: #ff6a2b;
  --L-on-hover: #111418;
  --L-danger: #b42318;
  --L-p-oborot: #1c4f9c;
  --L-p-kvant: #1d7445;
  --L-p-shtab: #8a5a06;
  --L-p-aplanner: #6a3fc0;
  --D-bg: #0f1215;
  --D-surface: #181c21;
  --D-ink: #f3f4f6;
  --D-ink2: #bcc1c8;
  --D-muted: #959ca6;
  --D-soft: #6b727c;
  --D-line: #252a31;
  --D-line2: #3b424b;
  --D-accent: #82a9ee;
  --D-on-accent: #0f1215;
  --D-hover: #ff7a3d;
  --D-on-hover: #0f1215;
  --D-danger: #ff8f80;
  --D-p-oborot: #82a9ee;
  --D-p-kvant: #5cc68a;
  --D-p-shtab: #e3aa4c;
  --D-p-aplanner: #b69cf2;
  --font-head: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-text: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --head-weight: 700;
  --head-tracking: -0.02em;
}
[data-variant="b"] {
  --L-bg: #f3f4f5;
  --L-surface: #ffffff;
  --L-ink: #1e2329;
  --L-ink2: #434b55;
  --L-muted: #58616c;
  --L-soft: #858d97;
  --L-line: #dfe2e6;
  --L-line2: #bfc5cc;
  --L-accent: #0d6b61;
  --L-on-accent: #ffffff;
  --L-hover: #0d6b61;
  --L-on-hover: #ffffff;
  --L-danger: #b42318;
  --L-p-oborot: #2b5aa6;
  --L-p-kvant: #276b2c;
  --L-p-shtab: #855600;
  --L-p-aplanner: #6643b0;
  --D-bg: #1e2329;
  --D-surface: #262c33;
  --D-ink: #eceff2;
  --D-ink2: #bdc4cc;
  --D-muted: #a0a8b2;
  --D-soft: #727b86;
  --D-line: #323940;
  --D-line2: #48515b;
  --D-accent: #5cc4b5;
  --D-on-accent: #132320;
  --D-hover: #5cc4b5;
  --D-on-hover: #132320;
  --D-danger: #ff9585;
  --D-p-oborot: #8db1ef;
  --D-p-kvant: #7fcf84;
  --D-p-shtab: #e6b45e;
  --D-p-aplanner: #bca6f2;
  --font-head: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --head-weight: 700;
  --head-tracking: -0.025em;
}
[data-variant="c"] {
  --L-bg: #f3eee3;
  --L-surface: #fbf8f1;
  --L-ink: #15233d;
  --L-ink2: #3a475c;
  --L-muted: #56606f;
  --L-soft: #87857e;
  --L-line: #ddd5c5;
  --L-line2: #bfb4a0;
  --L-accent: #a33c27;
  --L-on-accent: #ffffff;
  --L-hover: #a33c27;
  --L-on-hover: #ffffff;
  --L-danger: #a8261b;
  --L-p-oborot: #22508f;
  --L-p-kvant: #2b673b;
  --L-p-shtab: #7f4f00;
  --L-p-aplanner: #673a99;
  --D-bg: #121a28;
  --D-surface: #1a2434;
  --D-ink: #f1ebdf;
  --D-ink2: #c9c2b5;
  --D-muted: #a7a196;
  --D-soft: #737168;
  --D-line: #263044;
  --D-line2: #3b4760;
  --D-accent: #ec8a73;
  --D-on-accent: #121a28;
  --D-hover: #ec8a73;
  --D-on-hover: #121a28;
  --D-danger: #ff9a8a;
  --D-p-oborot: #92b4ea;
  --D-p-kvant: #7cc792;
  --D-p-shtab: #e7ae60;
  --D-p-aplanner: #c5a4ec;
  --font-head: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-text: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --head-weight: 800;
  --head-tracking: -0.035em;
}
[data-variant], .force-light { --bg: var(--L-bg); --surface: var(--L-surface); --ink: var(--L-ink); --ink2: var(--L-ink2); --muted: var(--L-muted); --soft: var(--L-soft); --line: var(--L-line); --line2: var(--L-line2); --accent: var(--L-accent); --on-accent: var(--L-on-accent); --hover: var(--L-hover); --on-hover: var(--L-on-hover); --danger: var(--L-danger); --p-oborot: var(--L-p-oborot); --p-kvant: var(--L-p-kvant); --p-shtab: var(--L-p-shtab); --p-aplanner: var(--L-p-aplanner); color-scheme: light; }
:root[data-theme="dark"][data-variant], :root[data-theme="dark"] [data-variant], .force-dark { --bg: var(--D-bg); --surface: var(--D-surface); --ink: var(--D-ink); --ink2: var(--D-ink2); --muted: var(--D-muted); --soft: var(--D-soft); --line: var(--D-line); --line2: var(--D-line2); --accent: var(--D-accent); --on-accent: var(--D-on-accent); --hover: var(--D-hover); --on-hover: var(--D-on-hover); --danger: var(--D-danger); --p-oborot: var(--D-p-oborot); --p-kvant: var(--D-p-kvant); --p-shtab: var(--D-p-shtab); --p-aplanner: var(--D-p-aplanner); color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-variant], :root:not([data-theme="light"]) [data-variant] { --bg: var(--D-bg); --surface: var(--D-surface); --ink: var(--D-ink); --ink2: var(--D-ink2); --muted: var(--D-muted); --soft: var(--D-soft); --line: var(--D-line); --line2: var(--D-line2); --accent: var(--D-accent); --on-accent: var(--D-on-accent); --hover: var(--D-hover); --on-hover: var(--D-on-hover); --danger: var(--D-danger); --p-oborot: var(--D-p-oborot); --p-kvant: var(--D-p-kvant); --p-shtab: var(--D-p-shtab); --p-aplanner: var(--D-p-aplanner); color-scheme: dark; }
  :root:not([data-theme="light"]) .force-light { --bg: var(--L-bg); --surface: var(--L-surface); --ink: var(--L-ink); --ink2: var(--L-ink2); --muted: var(--L-muted); --soft: var(--L-soft); --line: var(--L-line); --line2: var(--L-line2); --accent: var(--L-accent); --on-accent: var(--L-on-accent); --hover: var(--L-hover); --on-hover: var(--L-on-hover); --danger: var(--L-danger); --p-oborot: var(--L-p-oborot); --p-kvant: var(--L-p-kvant); --p-shtab: var(--L-p-shtab); --p-aplanner: var(--L-p-aplanner); color-scheme: light; }
}
:root[data-theme="dark"] .force-light { --bg: var(--L-bg); --surface: var(--L-surface); --ink: var(--L-ink); --ink2: var(--L-ink2); --muted: var(--L-muted); --soft: var(--L-soft); --line: var(--L-line); --line2: var(--L-line2); --accent: var(--L-accent); --on-accent: var(--L-on-accent); --hover: var(--L-hover); --on-hover: var(--L-on-hover); --danger: var(--L-danger); --p-oborot: var(--L-p-oborot); --p-kvant: var(--L-p-kvant); --p-shtab: var(--L-p-shtab); --p-aplanner: var(--L-p-aplanner); color-scheme: light; }
:root:not([data-theme="dark"]) .force-dark { --bg: var(--D-bg); --surface: var(--D-surface); --ink: var(--D-ink); --ink2: var(--D-ink2); --muted: var(--D-muted); --soft: var(--D-soft); --line: var(--D-line); --line2: var(--D-line2); --accent: var(--D-accent); --on-accent: var(--D-on-accent); --hover: var(--D-hover); --on-hover: var(--D-on-hover); --danger: var(--D-danger); --p-oborot: var(--D-p-oborot); --p-kvant: var(--D-p-kvant); --p-shtab: var(--D-p-shtab); --p-aplanner: var(--D-p-aplanner); color-scheme: dark; }
/* Секция в обратной теме: тёмная на светлой странице и наоборот. */
.invert { --bg: var(--D-bg); --surface: var(--D-surface); --ink: var(--D-ink); --ink2: var(--D-ink2); --muted: var(--D-muted); --soft: var(--D-soft); --line: var(--D-line); --line2: var(--D-line2); --accent: var(--D-accent); --on-accent: var(--D-on-accent); --hover: var(--D-hover); --on-hover: var(--D-on-hover); --danger: var(--D-danger); --p-oborot: var(--D-p-oborot); --p-kvant: var(--D-p-kvant); --p-shtab: var(--D-p-shtab); --p-aplanner: var(--D-p-aplanner); color-scheme: dark; }
:root[data-theme="dark"] .invert { --bg: var(--L-bg); --surface: var(--L-surface); --ink: var(--L-ink); --ink2: var(--L-ink2); --muted: var(--L-muted); --soft: var(--L-soft); --line: var(--L-line); --line2: var(--L-line2); --accent: var(--L-accent); --on-accent: var(--L-on-accent); --hover: var(--L-hover); --on-hover: var(--L-on-hover); --danger: var(--L-danger); --p-oborot: var(--L-p-oborot); --p-kvant: var(--L-p-kvant); --p-shtab: var(--L-p-shtab); --p-aplanner: var(--L-p-aplanner); color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .invert { --bg: var(--L-bg); --surface: var(--L-surface); --ink: var(--L-ink); --ink2: var(--L-ink2); --muted: var(--L-muted); --soft: var(--L-soft); --line: var(--L-line); --line2: var(--L-line2); --accent: var(--L-accent); --on-accent: var(--L-on-accent); --hover: var(--L-hover); --on-hover: var(--L-on-hover); --danger: var(--L-danger); --p-oborot: var(--L-p-oborot); --p-kvant: var(--L-p-kvant); --p-shtab: var(--L-p-shtab); --p-aplanner: var(--L-p-aplanner); color-scheme: light; }
}
:root[data-theme="light"] .invert { --bg: var(--D-bg); --surface: var(--D-surface); --ink: var(--D-ink); --ink2: var(--D-ink2); --muted: var(--D-muted); --soft: var(--D-soft); --line: var(--D-line); --line2: var(--D-line2); --accent: var(--D-accent); --on-accent: var(--D-on-accent); --hover: var(--D-hover); --on-hover: var(--D-on-hover); --danger: var(--D-danger); --p-oborot: var(--D-p-oborot); --p-kvant: var(--D-p-kvant); --p-shtab: var(--D-p-shtab); --p-aplanner: var(--D-p-aplanner); color-scheme: dark; }
/* ---------------------------------------------------------------------------
   Основа: шрифты, сброс, типографика, контейнер, сетка 12/8/4.
   Цвета — только через токены (--bg, --ink ...), их задаёт tokens.css,
   собранный из content/brand/variants.yaml.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "Unbounded";
  src: url("/assets/fonts/unbounded/Unbounded.a265894dd2.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("/assets/fonts/onest/Onest.3c5c2abc6c.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Golos Text";
  src: url("/assets/fonts/golostext/GolosText.bfc9708286.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrainsmono/JetBrainsMono.cf09d518c3.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --fs-h1: clamp(2.25rem, 1.1rem + 3.4vw, 4rem);
  --fs-h2: clamp(1.75rem, 1rem + 2.2vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.45vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.42vw, 1.375rem);
  --fs-body: clamp(1rem, 0.94rem + 0.18vw, 1.125rem);
  --fs-small: 0.9375rem;
  --fs-mono: 0.8125rem;

  --gutter: 16px;
  --gap: 16px;
  --container: 1320px;
  --section: 64px;
  --header-h: 64px;
  --radius-pill: 999px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 640px) {
  :root { --gutter: 32px; --gap: 20px; --section: 88px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 48px; --gap: 24px; --section: clamp(96px, 8vw, 144px); --header-h: 72px; }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:where(h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote) { margin: 0; }
:where(ul, ol)[role="list"], .plain-list { list-style: none; padding: 0; margin: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection { background: var(--accent); color: var(--on-accent); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-pill);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Типографика --------------------------------------------------------- */

.h1, .h2, .h3, .display {
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  letter-spacing: var(--head-tracking);
  color: var(--ink);
  text-wrap: balance;
}
.h1 { font-size: var(--fs-h1); line-height: 1.04; }
.h2 { font-size: var(--fs-h2); line-height: 1.08; }
.h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: calc(var(--head-tracking) / 2); }
.tone-soft { color: var(--soft); }
/* На подложке (surface) серого тона «soft» не хватает до 3:1 — там серая часть заголовка темнее. */
.section--surface .tone-soft { color: var(--muted); }
.lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--ink2); max-width: 40em; text-wrap: pretty; }
.text { max-width: 38em; text-wrap: pretty; }
.text-2 { color: var(--ink2); }
.small { font-size: var(--fs-small); }
.muted { color: var(--muted); }
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.prose > * + * { margin-top: 1em; }
.prose { max-width: 40em; }

/* --- Контейнер и сетка 12 / 8 / 4 ---------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
.grid > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .md-4 { grid-column: span 4; }
  .md-8 { grid-column: span 8; }
}
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg-3 { grid-column: span 3; }
  .lg-4 { grid-column: span 4; }
  .lg-5 { grid-column: span 5; }
  .lg-6 { grid-column: span 6; }
  .lg-7 { grid-column: span 7; }
  .lg-8 { grid-column: span 8; }
  .lg-9 { grid-column: span 9; }
  .lg-12 { grid-column: 1 / -1; }
  .lg-start-5 { grid-column-start: 5; }
  .lg-start-7 { grid-column-start: 7; }
}

.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }
.section--surface { background: var(--surface); }
.section--surface + .section, .section + .section--surface { padding-top: var(--section); }
.section--invert { background: var(--bg); color: var(--ink); }
.section--invert + .section, .section + .section--invert { padding-top: var(--section); }
.section-head { display: grid; gap: 16px; margin-bottom: clamp(32px, 4vw, 56px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ---------------------------------------------------------------------------
   Каркас страницы: служебная строка, шапка, панель «Продукты», мобильное
   меню, подвал. Разметка — templates/partials/{header,footer}.html.
   ------------------------------------------------------------------------ */

/* Части, которые различаются по вариантам стиля (знак, подписи образца):
   в разметке есть все варианты, скрываются чужие. */
:root[data-variant="a"] [data-show-variant]:not([data-show-variant~="a"]),
:root[data-variant="b"] [data-show-variant]:not([data-show-variant~="b"]),
:root[data-variant="c"] [data-show-variant]:not([data-show-variant~="c"]) { display: none !important; }
.wm { display: block; }

.wordmark { width: auto; height: 100%; }
.monogram { width: 100%; height: auto; }
.monogram .mk-tile { fill: var(--ink); }
.monogram .mk-glyph { fill: var(--bg); }
.monogram .mk-accent { fill: var(--hover); }
.monogram-circle .mk-tile { fill: var(--accent); }
.monogram-circle .mk-glyph { fill: var(--on-accent); }
.monogram-stamp .mk-paper { fill: transparent; }
.monogram-stamp .mk-frame { stroke: var(--accent); }
.monogram-stamp .mk-glyph { fill: var(--accent); }

/* --- Служебная строка ----------------------------------------------------- */

.utility {
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-mono);
  font-family: var(--font-mono);
}
.utility__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 40px; }
.utility a { color: inherit; text-decoration: none; }
.utility a:hover { text-decoration: underline; }
.utility__news { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.utility__news span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.utility__news::before { content: ""; width: 6px; height: 6px; background: var(--hover); flex: none; }
.utility__contacts { display: flex; gap: 24px; flex: none; }
@media (max-width: 767px) { .utility__contacts { display: none; } }

/* --- Шапка: прячется при прокрутке вниз ----------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: transform .28s var(--ease);
}
.header.is-hidden { transform: translateY(-100%); }
.header__in { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.header__logo { display: block; height: 18px; color: var(--ink); flex: none; }
.header__logo .wm { height: 100%; }
@media (min-width: 1024px) { .header__logo { height: 20px; } }
.header__nav { display: none; align-items: center; gap: 4px; margin-left: 24px; }
.header__right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.nav-link:hover { background: var(--surface); }
.nav-link svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.nav-link[aria-expanded="true"] { background: var(--surface); }
.nav-link[aria-expanded="true"] svg { transform: rotate(180deg); }
.header .header__login { display: none; }
.header .header__cta { display: none; }
.header .burger { margin-left: 4px; }
@media (min-width: 1100px) {
  .header__nav { display: flex; }
  .header .header__login, .header .header__cta { display: inline-flex; }
  .header .burger { display: none; }
}
@media (min-width: 640px) and (max-width: 1099px) {
  .header .header__cta { display: inline-flex; }
}

/* Панель «Продукты» */
.ppanel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--bg);
  border-bottom: 1px solid var(--line2);
}
.ppanel__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ppanel__item {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 28px 24px 32px;
  color: var(--ink);
  text-decoration: none;
}
.ppanel__item:hover { background: var(--surface); }
.ppanel__name { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-tracking); font-size: 1.25rem; }
.ppanel__short { color: var(--ink2); font-size: var(--fs-small); line-height: 1.4; }
.ppanel__mark { width: 28px; height: 4px; background: var(--p); }

/* Мобильное меню на весь экран, кнопка заявки внизу */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg);
  color: var(--ink);
}
.mmenu__top { display: flex; align-items: center; justify-content: space-between; height: 64px; border-bottom: 1px solid var(--line); }
.mmenu__body { overflow-y: auto; padding-block: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-content: start; }
.mmenu__label { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--muted); margin-bottom: 8px; }
.mmenu__products a, .mmenu__links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.mmenu__products b { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-tracking); font-size: 1.375rem; }
.mmenu__products span { color: var(--muted); font-size: var(--fs-small); text-align: right; }
.mmenu__links a { font-size: 1.125rem; font-weight: 500; }
.mmenu__contacts { display: grid; gap: 6px; }
.mmenu__contacts a { color: var(--ink); }
.mmenu__bottom { padding-block: 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.mmenu__bottom .btn { width: 100%; }
body.is-locked { overflow: hidden; }

/* --- Подвал --------------------------------------------------------------- */

.footer { background: var(--surface); color: var(--ink); padding-top: clamp(56px, 6vw, 96px); overflow: hidden; }
.footer a { color: var(--ink); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__cols { row-gap: 40px; }
.footer__title { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--muted); margin-bottom: 14px; }
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: var(--fs-small); }
.footer__product { display: grid; gap: 2px; }
/* «Настройки cookies» — кнопка под видом ссылки; без JS не работает и скрыта. */
.footer__cookies { display: none; }
:root[data-cookies] .footer__cookies { display: list-item; }
.footer__linkbtn { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.footer__linkbtn:hover { text-decoration: underline; }
.footer__product span { color: var(--muted); font-size: 0.875rem; }
.footer__contacts { display: grid; gap: 10px; font-size: var(--fs-small); }
.footer__contacts a { font-size: 1.0625rem; font-weight: 600; }
.footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
  margin-top: 56px;
  padding-block: 20px;
  border-top: 1px solid var(--line2);
}
.footer__req { color: var(--muted); }
.footer__mark { color: var(--line2); padding-block: 24px clamp(16px, 2vw, 32px); }
.footer__mark .wm { width: 100%; height: auto; }
.footer__mark svg { width: 100%; height: auto; }

/* Переключатель темы — радиокнопки-сегменты */
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line2);
  border-radius: var(--radius-pill);
  margin: 0;
}
.segmented legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.segmented label { position: relative; }
.segmented input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segmented span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  white-space: nowrap;
}
.segmented svg { width: 16px; height: 16px; }
@media (max-width: 420px) {
  .footer .segmented { display: flex; width: 100%; }
  .footer .segmented label { flex: 1; }
  .footer .segmented span { justify-content: center; width: 100%; padding-inline: 6px; }
}
.segmented input:checked + span { background: var(--ink); color: var(--bg); }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ---------------------------------------------------------------------------
   Компоненты (ТЗ 6.4). Разметка — макросы templates/partials/components.html.
   ------------------------------------------------------------------------ */

/* --- Кнопки: пилюли; при наведении — заливка цветом наведения ----------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--ink); color: var(--bg); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--line2); }
.btn--primary:hover, .btn--outline:hover {
  background: var(--hover);
  border-color: var(--hover);
  color: var(--on-hover);
}
.btn--text {
  min-height: 44px;
  padding-inline: 4px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line2);
  text-underline-offset: 0.3em;
  border-radius: 4px;
}
.btn--text:hover { text-decoration-color: currentColor; }
.btn--sm { min-height: 40px; padding: 8px 18px; font-size: 0.9375rem; }
.btn[aria-disabled="true"], .btn:disabled {
  background: transparent;
  border: 1px dashed var(--line2);
  color: var(--muted);
  cursor: not-allowed;
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 639px) {
  .btn-row--stack > .btn { flex: 1 1 100%; white-space: normal; }
}

/* --- Бейдж стадии: слово + форма значка (не только цвет) ----------------- */

.stage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--line2);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}
.stage::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border: 1.5px solid currentColor;
}
.stage--sale::before { background: currentColor; }
.stage--implementation::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.stage--early::before { border-style: dashed; border-radius: 50%; }
.stage--early { border-style: dashed; }

/* --- Бейдж продукта: цвет продукта на подкрашенном фоне ----------------- */

.pbadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 10px;
  background: color-mix(in srgb, var(--p, var(--ink)) 12%, var(--bg));
  color: var(--p, var(--ink));
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
  white-space: nowrap;
}
.pbadge::before { content: ""; width: 8px; height: 8px; background: currentColor; flex: none; }
.p-oborot { --p: var(--p-oborot); }
.p-kvant { --p: var(--p-kvant); }
.p-shtab { --p: var(--p-shtab); }
.p-aplanner { --p: var(--p-aplanner); }

/* --- Сетка с угловыми крестиками (фирменный декор, приём 19) ------------- */

.xgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.xcell {
  --x: var(--line2);
  position: relative;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(var(--x), var(--x)) 6px 10px / 9px 1px no-repeat,
    linear-gradient(var(--x), var(--x)) 10px 6px / 1px 9px no-repeat,
    linear-gradient(var(--x), var(--x)) calc(100% - 6px) 10px / 9px 1px no-repeat,
    linear-gradient(var(--x), var(--x)) calc(100% - 10px) 6px / 1px 9px no-repeat,
    linear-gradient(var(--x), var(--x)) 6px calc(100% - 10px) / 9px 1px no-repeat,
    linear-gradient(var(--x), var(--x)) 10px calc(100% - 6px) / 1px 9px no-repeat,
    linear-gradient(var(--x), var(--x)) calc(100% - 6px) calc(100% - 10px) / 9px 1px no-repeat,
    linear-gradient(var(--x), var(--x)) calc(100% - 10px) calc(100% - 6px) / 1px 9px no-repeat;
}
@media (min-width: 1024px) {
  .xgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .xgrid--3, .xgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Скриншот в рамке окна ------------------------------------------------ */

.shot {
  margin: 0;
  border: 1px solid var(--line2);
  background: var(--surface);
}
.shot__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}
.shot__bar::before { content: ""; width: 8px; height: 8px; background: var(--p, var(--line2)); flex: none; }
.shot__img { aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.shot__img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.shot__placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, var(--line) 11px 12px);
}

/* --- Карточка продукта ---------------------------------------------------- */

.pcard {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 24px;
  padding: clamp(20px, 2.6vw, 40px);
}
.pcard__body { display: grid; gap: 14px; align-content: start; }
.pcard__top { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.pcard__name { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); }
.pcard__name a { color: inherit; text-decoration: none; }
.pcard__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.pcard__tagline { color: var(--ink2); max-width: 32em; }
.pcard .btn-row { margin-top: 6px; }

/* --- Шаги 01–05 ----------------------------------------------------------- */

.steps { counter-reset: step; }
.step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 24px 24px 28px; align-content: start; }
.step__num {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.step__title { font-family: var(--font-text); font-weight: 600; font-size: 1.125rem; line-height: 1.3; }
.step__text { color: var(--ink2); font-size: var(--fs-small); }
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Строка «для кого» ---------------------------------------------------- */

.audience { border-top: 1px solid var(--line2); }
.audience__row {
  display: grid;
  gap: 8px 24px;
  padding-block: 24px;
  border-bottom: 1px solid var(--line2);
}
.audience__who { font-weight: 600; font-size: 1.125rem; }
.audience__pain { color: var(--ink2); }
@media (min-width: 1024px) {
  .audience__row { grid-template-columns: 4fr 5fr 3fr; align-items: baseline; }
  .audience__product { justify-self: end; }
}

/* --- Таблица тарифов: цифры моноширинным, вправо ------------------------- */

.table-wrap { overflow-x: auto; }
.tariffs { width: 100%; font-variant-numeric: tabular-nums; }
.tariffs caption { text-align: left; padding-bottom: 12px; color: var(--muted); font-size: var(--fs-small); }
.tariffs th, .tariffs td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: baseline;
}
.tariffs thead th {
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--muted);
  border-bottom-color: var(--line2);
  vertical-align: bottom;
}
.tariffs tbody th { font-weight: 600; }
.tariffs .r { text-align: right; }
.tariffs td.r { font-family: var(--font-mono); font-size: 0.9375rem; white-space: nowrap; }
.tariffs td.price { color: var(--ink); font-weight: 600; }
.tariffs tbody tr:hover { background: var(--surface); }
@media (max-width: 767px) {
  .tariffs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tariffs, .tariffs caption, .tariffs tbody, .tariffs tr, .tariffs th, .tariffs td { display: block; width: 100%; }
  .tariffs tr { padding: 16px 0; border-bottom: 1px solid var(--line2); }
  .tariffs tbody th { padding: 0 0 8px; border: 0; font-size: 1.125rem; }
  .tariffs td { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border: 0; }
  .tariffs td::before { content: attr(data-label); color: var(--muted); font-family: var(--font-text); font-size: var(--fs-small); font-weight: 400; white-space: normal; }
  .tariffs tbody tr:hover { background: none; }
}

/* --- Аккордеон вопросов --------------------------------------------------- */

.acc { border-top: 1px solid var(--line2); }
.acc__item { border-bottom: 1px solid var(--line2); }
.acc__q { margin: 0; font-size: 1.125rem; font-weight: 600; }
.acc__btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  border: 0;
  background: none;
  text-align: left;
  font-weight: 600;
  line-height: 1.35;
}
.acc__btn:hover { color: var(--accent); }
.acc__icon { width: 20px; height: 20px; flex: none; transition: transform .2s var(--ease); }
.acc__btn[aria-expanded="true"] .acc__icon { transform: rotate(45deg); }
.acc__a { padding: 0 0 24px; max-width: 46em; color: var(--ink2); }
.acc__a > * + * { margin-top: 0.75em; }

/* --- Табы скриншотов ------------------------------------------------------ */

.tabs__bar { display: flex; gap: 8px; margin-top: 16px; align-items: flex-start; }
.tabs__list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 auto; min-width: 0; }
.tabs__pause { flex: none; }
.tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 16px 6px 12px;
  border: 1px solid var(--line2);
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 600;
}
.tabs__tab::before { content: ""; width: 8px; height: 8px; background: var(--p, currentColor); }
.tabs__tab[aria-selected="true"]::before { outline: 1px solid var(--bg); }
.tabs__tab[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tabs__tab:hover:not([aria-selected="true"]) { border-color: var(--ink); }
.tabs__pause {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border: 1px solid var(--line2);
  border-radius: 50%;
  background: transparent;
}
.tabs__pause svg { width: 16px; height: 16px; }
.tabs__panel[hidden] { display: none; }
.tabs__caption { margin-top: 12px; color: var(--muted); font-size: var(--fs-small); min-height: 3em; }

/* --- Липкое оглавление ---------------------------------------------------- */

.toc { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.toc__title { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--muted); margin-bottom: 12px; }
.toc__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line2); }
.toc__link {
  display: block;
  margin-left: -1px;
  padding: 7px 0 7px 16px;
  border-left: 2px solid transparent;
  color: var(--ink2);
  text-decoration: none;
  font-size: var(--fs-small);
  line-height: 1.35;
}
.toc__link:hover { color: var(--ink); }
.toc__link[aria-current="true"] { color: var(--ink); border-left-color: var(--ink); font-weight: 600; }
@media (max-width: 1023px) { .toc { display: none; } }

/* --- Поля формы ----------------------------------------------------------- */

.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 640px; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.field__label { font-weight: 600; font-size: 1rem; }
.field__opt { font-weight: 400; color: var(--muted); }
.field__hint { color: var(--muted); font-size: var(--fs-small); }
.field__input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--line2);
  border-radius: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 1rem;
}
textarea.field__input { min-height: 120px; resize: vertical; line-height: 1.5; }
.field__input:hover { border-color: var(--muted); }
.field__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field__input[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 4px 0 0 var(--danger); }
.field__error {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--danger);
  font-size: var(--fs-small);
  font-weight: 600;
}
.field__error svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.choice-group { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.choice-group legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 16px;
  border: 1px solid var(--line2);
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
}
.chip input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip:hover span { border-color: var(--ink); }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: var(--fs-small); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }

/* --- Блок документа ------------------------------------------------------- */

.doc {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 24px;
  align-items: center;
}
.doc__icon { width: 40px; height: 48px; color: var(--muted); }
.doc__title { font-weight: 600; font-size: 1.125rem; line-height: 1.3; }
.doc__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--muted); }
@media (min-width: 640px) { .doc { grid-template-columns: auto 1fr auto; gap: 24px; } }

/* --- Плашка cookies ------------------------------------------------------- */

.cookie {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid var(--line2);
  background: var(--bg);
  max-width: 720px;
}
/* Рабочая плашка: внизу экрана, видна только при data-cookies="ask" на <html>
   (theme.js ставит до отрисовки). position: fixed не сдвигает страницу, а
   site.js добавляет снизу отступ высотой с плашку (--cookie-pad), чтобы она не
   закрывала конец страницы и кнопки формы. Окно заявки открывается поверх. */
.cookie--fixed {
  display: none;
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  margin-inline: auto;
  max-height: calc(100vh - 32px); overflow: auto;
  box-shadow: 0 8px 32px rgba(10, 12, 15, 0.18);
}
:root[data-cookies="ask"] .cookie--fixed { display: grid; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-cookies="ask"] .cookie--fixed { animation: cookie-in 0.24s ease-out; }
}
@keyframes cookie-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 479px) {
  .cookie--fixed { left: 8px; right: 8px; bottom: 8px; padding: 16px; gap: 12px; }
  .cookie--fixed .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cookie--fixed .btn { padding-inline: 10px; white-space: normal; }
}
@media (min-width: 768px) { .cookie { grid-template-columns: 1fr auto; align-items: center; } }
html { scroll-padding-bottom: var(--cookie-pad, 0px); }
.footer { padding-bottom: var(--cookie-pad, 0px); }
@media print { .cookie--fixed { display: none !important; } }

/* --- Всплывающее окно формы ---------------------------------------------- */

.modal {
  width: min(680px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 0;
  border: 1px solid var(--line2);
  background: var(--bg);
  color: var(--ink);
}
.modal::backdrop { background: rgba(10, 12, 15, 0.6); }
.modal__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.modal__body { padding: 24px; }
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { border-color: var(--ink); }

/* --- Финальный призыв ----------------------------------------------------- */

.cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.cta .h2 { max-width: 18em; }
@media (min-width: 1024px) {
  .cta { grid-template-columns: 7fr 5fr; align-items: end; gap: var(--gap); }
  .cta .btn-row { justify-content: flex-end; }
}
/* ---------------------------------------------------------------------------
   Страницы этапа 1: главная (templates/pages/index.html) и страница продукта
   (templates/pages/product.html). Цвета — только токены.
   ------------------------------------------------------------------------ */

/* --- Главная: первый экран ------------------------------------------------ */

.hero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.hero__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-content: center; }
.hero .h1 { font-size: clamp(2.25rem, 1.2rem + 3vw, 4rem); }
@media (min-width: 1024px) {
  .hero__in { grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
}

/* Карточки продуктов на главной: на тёмно-сером фоне секции — фон страницы */
.pcards .pcard { background-color: var(--bg); }

/* «Почему мы» */
.why__item { display: grid; gap: 12px; align-content: start; padding: 28px 24px 32px; }
.why__num { color: var(--muted); }
.why__title { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.why__text { color: var(--ink2); font-size: var(--fs-small); }

/* «С чем работает» */
@media (min-width: 1024px) { .xgrid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 1023px) { .xgrid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sources__item { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 28px 24px; background-color: var(--bg); }
.sources__tag { color: var(--muted); }
.sources__title { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-tracking); font-size: 1.25rem; line-height: 1.2; }
.sources__text { color: var(--ink2); font-size: var(--fs-small); }
.sources__products { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Вопросы по рубрикам */
.faq-head { display: grid; gap: 24px; align-content: start; }
@media (min-width: 1024px) { .faq-head { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; } }
.faq-nav ul { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px;
  border: 1px solid var(--line2); border-radius: var(--radius-pill);
  color: var(--ink); text-decoration: none; font-size: 0.9375rem;
}
.faq-nav a:hover { border-color: var(--ink); }
.faq-group + .faq-group { margin-top: 48px; }
.faq-group__title { color: var(--muted); margin-bottom: 8px; }

/* --- Страница продукта: первый экран -------------------------------------- */

.phero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.phero__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-content: center; }
.phero__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.phero__title { font-size: clamp(2.5rem, 1.3rem + 3.6vw, 4.5rem); }
.phero__sub {
  display: block;
  margin-top: 0.35em;
  font-size: clamp(1.25rem, 0.95rem + 1vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: calc(var(--head-tracking) / 2);
}
.phero__note { max-width: 36em; }
@media (min-width: 1024px) {
  .phero__in { grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
}

/* --- Страница продукта: оглавление и разделы ------------------------------ */

.ppage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); padding-bottom: var(--section); }
.ppage__body { min-width: 0; }
@media (min-width: 1024px) {
  .ppage { grid-template-columns: 3fr 9fr; gap: 48px; }
  .ppage__aside { position: relative; }
}
.psec { padding-block: clamp(48px, 5vw, 80px); border-top: 1px solid var(--line2); }
.psec > .h2, .psec__head { margin-bottom: clamp(24px, 3vw, 40px); }
.psec__head { display: grid; gap: 16px; }
.psec__head > .h2 { margin-bottom: 0; }

.pain { display: grid; gap: 12px; align-content: start; padding: 28px 24px 32px; }
.pain__text { color: var(--ink2); }

/* Список возможностей: название и пояснение */
.flist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--gap);
  margin-top: 40px;
  border-top: 1px solid var(--line2);
}
@media (min-width: 768px) { .flist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.flist__item { display: grid; gap: 6px; align-content: start; padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.flist__title { font-weight: 600; }
.flist__title::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--p, var(--ink)); vertical-align: 0.1em; }
.flist__text { color: var(--ink2); font-size: var(--fs-small); }

.pnote {
  margin-top: 24px;
  padding: 16px 20px;
  border-left: 3px solid var(--p, var(--ink));
  background: var(--surface);
  color: var(--ink2);
  font-size: var(--fs-small);
  max-width: 48em;
}

/* Снимки телефона */
.phones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 40px; }
.phones__text { display: grid; gap: 8px; align-content: start; max-width: 32em; }
.phones__row { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.phone { flex: 0 0 auto; width: min(260px, 70vw); margin: 0; scroll-snap-align: start; }
.phone__frame {
  border: 1px solid var(--line2);
  border-radius: 28px;
  padding: 8px;
  background: var(--surface);
}
.phone__frame picture, .phone__frame img { border-radius: 20px; overflow: hidden; background: #fff; }
.phone__cap { margin-top: 10px; color: var(--muted); font-size: var(--fs-small); text-align: center; }
@media (min-width: 1024px) {
  .phones__row { overflow: visible; flex-wrap: wrap; }
  .phone { width: 240px; }
}

/* Стоимость */
.price-notes { display: grid; gap: 10px; margin-block: 24px; max-width: 52em; color: var(--ink2); font-size: var(--fs-small); }
.price-notes b { color: var(--ink); }
.price-box__list, .price-box__ask { display: grid; gap: 14px; align-content: start; padding: 28px 24px 32px; }
.price-box__value { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-tracking); font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.1; }
.price-box__ask .btn { justify-self: start; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 22px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; border: 1.5px solid currentColor; background: currentColor; }

/* Безопасность и данные */
.facts { margin: 0; }
.facts__item { display: grid; gap: 8px; align-content: start; padding: 24px 24px 28px; }
.facts__item dt { font-weight: 600; font-size: 1.0625rem; }
.facts__item dd { margin: 0; color: var(--ink2); font-size: var(--fs-small); }

/* Шаги внутри колонки страницы продукта: не больше четырёх в ряд */
@media (min-width: 1024px) {
  .ppage .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ppage .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ppage .steps--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Страница продукта: ссылка под кнопками первого экрана ---------------- */
/* Текстовая ссылка («Документация») — своей строкой и ровно по левому краю
   кнопок: без внутреннего отступа текстовой кнопки. */
.phero__link { margin-top: -6px; }
.phero__link .btn--text { min-height: 32px; padding-inline: 0; }

/* --- Текстовые страницы этапа 1б (templates/pages/article.html) ----------- */

.ahero { padding-bottom: clamp(32px, 4vw, 56px); }
.ahero__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 54em; }
.ahero__title { font-size: clamp(1.75rem, 1rem + 3.2vw, 3.5rem); overflow-wrap: break-word; hyphens: manual; }
.ahero--legal .ahero__title { font-size: clamp(1.625rem, 1rem + 2.4vw, 3rem); }
.crumbs { margin-bottom: 24px; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; }
.crumbs li + li::before { content: "/"; margin-inline: 10px; color: var(--line2); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

.draft-flag {
  display: grid; gap: 4px;
  padding: 14px 18px;
  border: 1px dashed var(--ink);
  border-left: 4px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-small);
  max-width: 44em;
}
.draft-flag span { color: var(--ink2); }

@media (min-width: 1024px) { .ppage--notoc { grid-template-columns: minmax(0, 1fr); } }
.ppage--notoc .ppage__body { max-width: 1080px; }
.ppage--legal .psec { padding-block: clamp(28px, 3vw, 44px); }
.ppage--legal .psec__head { margin-bottom: 16px; }
.legal__h { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); }

/* Текст документа: абзацы, списки, ссылки */
.doc-text { max-width: 46em; color: var(--ink2); }
.doc-text > * + * { margin-top: 0.9em; }
.doc-text strong, .doc-text b { color: var(--ink); }
.doc-text ul, .doc-text ol { padding-left: 1.4em; }
.doc-text li + li { margin-top: 0.4em; }
.doc-text code { font-family: var(--font-mono); font-size: 0.875em; }
/* Таблицы из Markdown (политика cookies): на телефоне длинные имена cookies
   переносятся, таблица не шире колонки текста. */
.doc-text table { width: 100%; font-size: var(--fs-small); line-height: 1.45; }
.doc-text th, .doc-text td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc-text th:last-child, .doc-text td:last-child { padding-right: 0; }
.doc-text thead th { color: var(--muted); font-weight: 600; border-bottom-color: var(--line2); vertical-align: bottom; }
.doc-text td code { overflow-wrap: anywhere; color: var(--ink); }
@media (max-width: 479px) {
  .doc-text table { font-size: 0.8125rem; }
  .doc-text th, .doc-text td { padding-right: 8px; }
}
.psec__after { margin-top: 24px; }
.psec__btns { margin-top: 24px; }

/* Пометка «уточнить» — видна на предпросмотре; в боевую сборку не проходит */
mark.todo {
  padding: 0 4px;
  background: transparent;
  color: var(--danger);
  border: 1px dashed var(--danger);
  font-weight: 600;
}

/* Реквизиты: подпись слева, значение справа */
.req { margin: 0; border-top: 1px solid var(--line2); max-width: 60em; }
.req__row { display: grid; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.req__row dt { color: var(--muted); font-size: var(--fs-small); }
.req__row dd { margin: 0; color: var(--ink); }
.req__row dd.num { font-size: 1rem; }
@media (min-width: 640px) { .req__row { grid-template-columns: minmax(180px, 1fr) 2fr; align-items: baseline; } }

/* Краткое описание и функции программы */
.doc-summary { max-width: 46em; font-size: 1.0625rem; line-height: 1.6; }
.fnlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line2); max-width: 60em; }
.fnlist__item { display: grid; grid-template-columns: 2.5em minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink2); }
.fnlist__num { color: var(--muted); font-size: 0.875rem; padding-top: 0.15em; }

/* Документы: блок с файлами PDF и Word */
.docs .doc { padding: 24px; }
.doc__body { display: grid; gap: 6px; }
.doc__files { display: flex; flex-wrap: wrap; gap: 8px; }
.doc__file { gap: 8px; }
.doc__size { font-weight: 400; color: var(--muted); }
.doc__file:hover .doc__size { color: inherit; }
.doc__url { display: none; }
@media (min-width: 640px) { .docs .doc { grid-template-columns: auto minmax(0, 1fr) auto; } }
@media (max-width: 639px) {
  .docs .doc { grid-template-columns: 28px minmax(0, 1fr); gap: 16px 14px; align-items: start; }
  .docs .doc__icon { width: 28px; height: 34px; }
  .doc__files { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc__file { width: 100%; padding-inline: 10px; }
}

/* Тарифы: короткие таблицы и подпись про налоги */
.tariffs--short { max-width: 720px; }
.price-tax { margin-top: 16px; }

/* Карточки (внедрение, правовые документы, продукты) */
.card { display: grid; gap: 12px; align-content: start; padding: 28px 24px 32px; }
.card__top { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.card__products { display: flex; flex-wrap: wrap; gap: 6px; }
.card__text { color: var(--ink2); font-size: var(--fs-small); }
.card__price { color: var(--muted); }

/* --- Заявка --------------------------------------------------------------- */

.form-off {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--line2);
  border-left: 4px solid var(--ink);
  background: var(--surface);
  color: var(--ink2);
  font-size: var(--fs-small);
}
.form-off svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ink); }
.form-off b { color: var(--ink); }
.form-off--done { display: grid; gap: 8px; max-width: 640px; font-size: 1rem; }
.form-off--done:focus { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Ответ сервиса заявок: экран «Заявка №N принята» и сбой отправки */
.form-done {
  display: grid; gap: 8px; max-width: 640px;
  padding: 20px 20px 20px 24px;
  border: 1px solid var(--line2);
  border-left: 4px solid var(--accent);
  background: var(--surface);
  color: var(--ink2);
}
.form-done__title { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-tracking); font-size: 1.375rem; line-height: 1.25; color: var(--ink); }
.form-done:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.form-alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--danger);
  border-left: 4px solid var(--danger);
  background: var(--surface);
  color: var(--ink2);
  font-size: var(--fs-small);
}
.form-alert[hidden] { display: none; }
.form-alert svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--danger); }
.form-alert > div { display: grid; gap: 6px; }
.form-alert__text { color: var(--ink); font-weight: 600; }
.btn[disabled] { opacity: .65; cursor: progress; }

.zpage { padding-top: 8px; row-gap: 56px; }
@media (min-width: 1024px) { .zpage { grid-template-columns: 7fr 5fr; gap: 64px; } }
.zpage__aside { display: grid; gap: 28px; align-content: start; }
@media (min-width: 1024px) { .zpage__aside { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; } }
.znext { border-top: 1px solid var(--line2); }
.znext__item { display: grid; grid-template-columns: 2.5em minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink2); }
.znext__item b { color: var(--ink); }
.znext__num { color: var(--muted); font-size: 0.875rem; padding-top: 0.15em; }
.zpage__contacts { display: grid; gap: 6px; }
.zpage__contacts a { color: var(--ink); font-weight: 600; text-decoration: none; }
.zpage__contacts a:hover { text-decoration: underline; }
/* Без формы (config.yaml: leads: contacts): телефон и почта крупно, ниже — что написать. */
.zcontact { display: grid; gap: 40px; align-content: start; }
.zcontact__ways { display: grid; gap: 0; border-top: 1px solid var(--line2); }
@media (min-width: 640px) { .zcontact__ways { grid-template-columns: 1fr 1fr; gap: 0 32px; } }
.zcontact__way { display: grid; gap: 8px; padding: 20px 0; border-bottom: 1px solid var(--line); align-content: start; }
.zcontact__label { font-size: 0.875rem; }
.zcontact__value {
  font-weight: 600; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); line-height: 1.3;
  color: var(--ink); text-decoration: none; overflow-wrap: break-word;
}
.zcontact__value:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.zcontact__h { margin-bottom: -16px; }
.ztopics { border-top: 1px solid var(--line2); }
.ztopic { padding: 14px 0 14px 16px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; color: var(--ink2); }
.ztopic b { color: var(--ink); }
.ztopic.is-picked { border-left-color: var(--accent); background: var(--surface); }

/* --- Печать: документация и правовые страницы печатаются без шапки ------- */

@media print {
  /* Печать всегда чёрным по белому, в какой бы теме ни была страница */
  :root, [data-variant], .invert, .force-dark, .force-light {
    --bg: #fff !important; --surface: #fff !important; --ink: #000 !important; --ink2: #111 !important;
    --muted: #444 !important; --soft: #444 !important; --line: #bbb !important; --line2: #888 !important;
    --accent: #000 !important; --danger: #000 !important; color-scheme: light !important;
  }
  @page { margin: 16mm 14mm; }
  body { font-size: 11pt; line-height: 1.45; background: #fff; color: #000; }
  .skip-link, .utility, .header, .mmenu, .footer, .ppage__aside, .modal, .section--invert,
  .btn-row, .psec__btns, .cookie, .tabs__bar, .crumbs { display: none !important; }
  .section { padding-block: 0 12pt; }
  .ppage, .ppage--notoc { display: block; padding-bottom: 0; }
  .psec { padding-block: 12pt; border-top: 1px solid #888; break-inside: auto; }
  .psec__head { margin-bottom: 8pt; }
  .h1, .ahero__title { font-size: 22pt; }
  .h2 { font-size: 16pt; }
  .h3, .legal__h { font-size: 13pt; }
  .lead { font-size: 12pt; }
  h1, h2, h3, .doc__title, dt { break-after: avoid; }
  .xgrid { display: block; border: 0; }
  .xcell { background: none; border: 0; border-bottom: 1px solid #bbb; }
  .facts__item, .card, .docs .doc { padding: 8pt 0; break-inside: avoid; }
  .docs .doc { display: block; }
  .doc__icon { display: none; }
  .doc__files { display: block; margin-top: 4pt; }
  .doc__files li { break-inside: avoid; }
  .doc__file { display: inline; min-height: 0; padding: 0; border: 0; font-weight: 600; }
  .doc__file svg { display: none; }
  .doc__url { display: inline; margin-left: 8pt; font-size: 9pt; color: #000; }
  .doc-text a[href^="/"]::after, .facts a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .tariffs td.r { font-size: 10pt; }
  .tariffs thead { position: static; width: auto; height: auto; clip: auto; }
  .tariffs, .tariffs caption, .tariffs tbody, .tariffs tr, .tariffs th, .tariffs td { display: revert; width: auto; }
  .tariffs td::before { content: none; }
  .tariffs tbody tr:hover { background: none; }
  .draft-flag { border-color: #000; background: none; }
  mark.todo { color: #000; border-color: #000; }
  a { color: #000; text-decoration: underline; }
}