/* llmall — швейцарская (интернациональная типографическая) система.
 *
 * Правила, по которым собран файл:
 *   · сетка 12 / 8 / 4 колонки, всё выровнено по ней, асимметрия вместо центра;
 *   · два шрифта: Geist (текст) и Geist Mono (метки, индексы, данные);
 *   · три цвета: бумага, тушь, один сигнальный акцент + один серый для
 *     вторичного текста (контрасты измерены, см. README);
 *   · никаких градиентов, теней и скруглений — только линейки 1px и воздух;
 *   · размеры и отступы — только из шкал ниже, без произвольных значений.
 */

/* 1. Шрифты: локальные woff2 из сборки, нарезка по unicode-range как в оригинале */

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(_next/static/media/fef07dbb0973bf53-s.518e079e.woff2) format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(_next/static/media/8a480f0b521d4e75-s.ea323500.woff2) format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(_next/static/media/53b9e256198e5412-s.853d50a3.woff2) format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301,
    U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(_next/static/media/7178b3e590c64307-s.55554cd0.woff2) format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329,
    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: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(_next/static/media/caa3a2e1cccd8315-s.p.3b6cae6d.woff2) format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(_next/static/media/5ce348bf30bf5439-s.56c1f21e.woff2) format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(_next/static/media/4fa387ec64143e14-s.3b336396.woff2) format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(_next/static/media/7d817b4c03b0c5f1-s.a40b9a8b.woff2) format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301,
    U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(_next/static/media/bbc41e54d2fcbd21-s.fe42ddf4.woff2) format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329,
    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: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(_next/static/media/797e433ab948586e-s.p.29207c2f.woff2) format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Токены — единственный источник значений */

:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #0b0b0b;
  --muted: #595959; /* 7.00:1 на бумаге */
  /* Акцент — лайм из фирменной палитры (#9CFD1A, замерен по образцу). Лайм
     светлый (1.27:1 на белой бумаге), поэтому работают два значения:
       --accent     заливка (марки, плашки, заливка кнопки) → текст на ней ЧЁРНЫЙ
       --accent-ink тот же тон, но тёмный: текст, ссылки, линейки → 7.28:1 */
  --accent: #9cfd1a;
  --accent-ink: #396105; /* 7.28:1 на бумаге */
  --accent-soft: #eefcc9; /* бледная заливка для чипов и строк */
  --rule: rgba(11, 11, 11, 0.18); /* только внутренние, декоративные линейки */
  --rule-ink: #0b0b0b; /* структурные линейки и рамки */
  --on-accent: #0b0b0b; /* на заливке: 14.4:1 */

  --font-sans: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Шкала из трёх кеглей: 14 · 16 · 24. Всё, что заголовок — секция, пункт,
     вопрос, номер шага, логотип — носит 24; весь текст — 16; служебные метки,
     mono, таблица и подписи — 14. Уровни внутри одного кегля различаются
     структурой (счётчик секции, линейка, ширина колонки, вес, цвет), а не
     размером. Дисплей — знак, а не ступень текста. */
  --fs-small: 0.875rem; /* метки, mono, таблица, подписи */
  --fs-body: 1rem; /* весь текст, включая лид и ответы FAQ */
  --fs-title: 1.5rem; /* все заголовки */
  --fs-display: clamp(2.5rem, 7.2vw, 6rem); /* знак: только h1 */

  --lh-display: 0.98;
  --lh-title: 1.15; /* 24/27.6 — заголовок в одну-две строки */
  --lh-body: 1.55;

  /* базовая единица 4px */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --maxw: 1440px;
  --page-pad: clamp(1rem, 4vw, 3rem);
  --gutter: clamp(1rem, 2vw, 1.5rem);
  --head-h: 4rem;
  --control-h: 2.75rem;
  --control-h-sm: 2.25rem;
  --logo-w: 148px;
  --logo-h: 40px;

  --dur: 180ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

html.dark, html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b0b0b;
  --ink: #f5f5f5; /* 18.05:1 */
  --muted: #a1a1a1; /* 7.62:1 */
  /* Лайм на чёрной бумаге — 15.44:1, поэтому в тёмной теме он годится и как
     заливка, и как текст: --accent-ink тот же лайм. */
  --accent: #9cfd1a;
  --accent-ink: #9cfd1a;
  --accent-soft: #2b3a0d;
  --on-accent: #0b0b0b; /* на заливке: 14.4:1 */
  --rule: rgba(245, 245, 245, 0.2);
  --rule-ink: #f5f5f5;
}

/* 3. База */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + var(--sp-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

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

/* Цель skip-ссылки. Фокус сюда ставится программно, элемента управления тут нет,
   поэтому рамку вокруг всего main не рисуем — иначе она обводит контейнер
   высотой в несколько экранов. */
#main:focus,
#main:focus-visible {
  outline: none;
}

h1,
h2,
h3,
p,
ul,
ol,
figure,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

/* 4. Сетка */

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* Только внутри лендинга: это страничная сетка посадочной, а не утилита. */
.landing-root .grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .landing-root .grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .landing-root .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.col-1-4 {
  grid-column: 1 / -1;
}
.col-5-8,
.col-1-9 {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .col-1-4 {
    grid-column: span 3;
  }
  .col-5-8 {
    grid-column: span 5;
  }
}

@media (min-width: 1200px) {
  .col-1-4 {
    grid-column: 1 / span 4;
  }
  .col-5-8 {
    grid-column: 5 / span 8;
  }
  .col-1-9 {
    grid-column: 1 / span 9;
  }
  .col-lead {
    grid-column: 7 / span 6;
  }
  .col-6-12 {
    grid-column: 6 / span 7;
  }
  .col-8-12 {
    grid-column: 8 / span 5;
  }
}

/* Пара «текст + фигура» на одной строке, когда текст стоит первым в DOM:
   col-lead занимает колонки 7–12, а автораскладка грида не возвращает
   последующие элементы влево — фигура col-1-4 после него уезжает на вторую
   строку. Модификатор закрепляет элементы за колонками независимо от порядка
   в DOM (мобильный порядок чтения остаётся текст→фигура). */
@media (min-width: 1200px) {
  .grid--leadtext > .col-5-8 {
    grid-column: 7 / span 6;
    grid-row: 1; /* без явной строки sparse-курсор после первого элемента
                     уводит второй на новую строку, даже с фиксированной колонкой */
  }

  .grid--leadtext > .col-1-4 {
    grid-column: 1 / span 4;
    grid-row: 1;
  }
}

/* 5. Типографика */

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.03em;
  font-weight: 600;
  text-wrap: balance;
}

.h2 {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: -0.02em;
  font-weight: 600;
  text-wrap: balance;
}

.h3 {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  max-width: 52ch;
}

.prose p + p {
  margin-top: var(--sp-4);
}

.prose p {
  max-width: 64ch; /* 45–75 знаков в строке */
  color: var(--muted);
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

/* Микротипографика mono: один размер, одно начертание, один трекинг на всю
   страницу — метки, счётчики секций, подписи таблиц, номера пунктов. */
.label,
.band__index,
.item__num,
.faq__num,
.compare thead th,
.ruled__val,
.band__tag {
  /* счётчики и метки: 12px / 400 / 0.1em */
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0.1em;
}

.label {
  text-transform: uppercase;
  color: var(--muted);
}

.label--accent {
  color: var(--accent-ink);
}

.rule-top {
  border-top: 1px solid var(--rule-ink);
}

/* 6. Ссылки и кнопки: default / hover / focus / active / disabled */

a {
  color: inherit;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.link {
  color: var(--ink);
  text-decoration: underline;
  transition: color var(--dur) var(--ease);
}

.link:hover {
  color: var(--accent-ink);
}

.link:active {
  color: var(--accent-ink);
}

.link[aria-disabled="true"] {
  color: var(--muted);
  pointer-events: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid var(--rule-ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.btn:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn:active {
  background: var(--accent);
  border-color: var(--accent-ink);
  color: var(--on-accent);
}

.btn--fill {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn--fill:hover {
  background: var(--accent);
  border-color: var(--accent-ink);
  color: var(--on-accent);
}

.btn--fill:active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.btn[aria-disabled="true"],
.btn:disabled {
  border-color: var(--rule);
  color: var(--muted);
  background: var(--paper);
  cursor: not-allowed;
}

.btn--sm {
  min-height: var(--control-h-sm);
  padding: 0 var(--sp-4);
  font-size: var(--fs-small);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* position: fixed, а не absolute: при прокрутке absolute-ссылка остаётся
   в начале документа и фокус оказывается за экраном (проверено: scrollY 3000 →
   rect.y −2992). Фиксированная всегда попадает в вид сверху. */
.skip {
  position: fixed;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-3) var(--sp-4);
  z-index: 100;
}

.skip:focus {
  left: var(--sp-4);
  top: var(--sp-2);
}

/* 7. Шапка */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-ink);
}

/* flex-wrap включён всегда: при увеличенном пользователем кегле шапка
   переносит инструменты на вторую строку, а не выходит за правый край
   (замер при кегле ×1.25: было 101px переполнения на 960px). */
.site-head__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  min-height: var(--head-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: -0.01em;
}

@media (max-width: 560px) {
  .site-head__inner {
    flex-wrap: wrap;
    padding-block: var(--sp-2);
    row-gap: var(--sp-1);
  }
}

.brand__fallback {
  font-family: var(--font-mono);
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.nav {
  display: none;
  gap: var(--sp-4);
  margin-left: var(--sp-6);
}

/* Навигация появляется только там, где шапка держит одну строку.
   Порог поднимался дважды: сперва под пять пунктов (замер — 1024px давал вторую
   строку, 92px вместо 64px), затем под восемь: пункт «Обезличивание» — самый
   длинный, и на 1080px шапка снова уезжала на 148px. Замер после добавления:
   1280px — 93px (ещё две строки), 1440px — 65px (одна). Порог 1440px берётся с
   запасом, потому что длина пунктов различается по локалям (ru длиннее всех). */
@media (min-width: 1440px) {
  .nav {
    display: flex;
  }
}

.nav a {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding-block: var(--sp-2);
  border-bottom: 1px solid transparent;
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--accent-ink);
}

.head-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-left: auto;
}

.icon-btn {
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.icon-btn:hover {
  background: var(--ink);
  color: var(--paper);
}

.icon-btn svg {
  width: 1rem;
  height: 1rem;
}

html[data-theme="light"] .icon-sun,
html.dark .icon-moon, html[data-theme="dark"] .icon-moon {
  display: none;
}

/* 8. Секции */

.band {
  padding-block: var(--sp-8);
  border-top: 1px solid var(--rule-ink);
}

@media (min-width: 768px) {
  .band {
    padding-block: var(--sp-9);
  }
}

.band__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  padding-bottom: var(--sp-5);
}

/* метка-тег уходит в правый край полосы, счётчик и заголовок остаются слева */
.band__tag {
  margin-left: auto;
  align-self: baseline;
}

.band__index {
  color: var(--accent-ink);
  /* кегль заголовка секции: номер и h2 читаются одной строкой, счётчик
     остаётся mono с разрядкой — меняется только размер */
  font-size: var(--fs-title);
}

/* 9. Хиро */

.hero {
  padding-block: var(--sp-8) var(--sp-9);
}

.hero__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: baseline;
  padding-bottom: var(--sp-6);
}

.hero__lead {
  margin-top: var(--sp-6);
}

/* Условия старта — единственное место в первом экране, где стоит не техника,
   а снятие барьера: без карты, минута, тестовые средства. Отсюда акцентная
   линейка и полужирный: разбор просил подсветить это, а не читать в мелком. */
.hero__benefit {
  margin-top: var(--sp-4);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--accent);
  font-weight: 600;
}

.hero__facts {
  margin-top: var(--sp-8);
  border-top: 1px solid var(--rule-ink);
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.facts li {
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}

@media (min-width: 768px) {
  /* Пять фактов одной строкой, пока хватает ширины (≈1100px+): flex по ширине
     текста, а не 4–5 равных колонок грида — в них текст складывался в 2–3
     строки, а пятый факт уезжал вниз. На 768–1024 ячейки просто переносятся
     на вторую строку целиком. */
  .facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-3) var(--sp-4);
  }

  .facts li {
    border-bottom: 0;
    padding: var(--sp-4) 0;
  }

  /* Линейка-разделитель слева, кроме первого; отступ после неё — тот же шаг
     16px, что и до неё (без этого текст упирался в линейку вплотную). */
  .facts li + li {
    border-left: 1px solid var(--rule);
    padding-left: var(--sp-4);
  }
}

/* 10. Список моделей (вместо бегущей строки) */

.models {
  margin-top: var(--sp-7);
  border-top: 1px solid var(--rule-ink);
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .models {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .models {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.models li {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}

/* 11. Модульные сетки контента */

/* Пункты идут двумя колонками до 1600px: в трёх колонках мера строки падала до
   ~34 знаков, а для описаний комфортно 45–65. */
.items {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule-ink);
}

@media (min-width: 768px) {
  .items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1600px) {
  .items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.item {
  padding: var(--sp-5) var(--sp-5) var(--sp-6) 0;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 768px) {
  .item {
    border-right: 1px solid var(--rule);
    padding-right: var(--sp-5);
  }
  .item:nth-child(2n) {
    border-right: 0;
    padding-left: var(--sp-5);
  }
}

/* Три колонки: у средней линейка с обеих сторон, поэтому и отступ с обеих.
   Здесь было `2n { padding-left: 0 }`, и тексты 02 / 05 / 08 упирались в
   линейку предыдущей колонки вплотную (замер на 1680px: 0px, надо 24). */
@media (min-width: 1600px) {
  .item:nth-child(3n + 1) {
    border-right: 1px solid var(--rule);
    padding-left: 0;
  }
  .item:nth-child(3n + 2) {
    border-right: 1px solid var(--rule);
    padding-left: var(--sp-5);
  }
  .item:nth-child(3n) {
    border-right: 0;
    padding-left: var(--sp-5);
  }
}

.item__num {
  color: var(--accent-ink);
  display: block;
  margin-bottom: var(--sp-5);
}

.item__text {
  margin-top: var(--sp-3);
  color: var(--muted);
  max-width: 46ch;
}

/* Замыкающий пункт растягивается на всю полосу сетки: одиночная плашка в
   половине строки оставляет дыру в модульной сетке. */
.item--cta {
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-5);
}

@media (min-width: 768px) {
  .item--cta {
    grid-column: span 2;
  }
}

@media (min-width: 1600px) {
  .item--cta {
    grid-column: span 3;
  }
}

.item--cta .item__num {
  color: inherit;
}

.item--cta .item__text {
  color: var(--paper);
  opacity: 0.75;
}

.item--cta .btn {
  margin-top: var(--sp-5);
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.item--cta .btn:hover {
  background: var(--accent);
  border-color: var(--accent-ink);
  color: var(--on-accent);
}

/* 12. Шаги */

.steps {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  border-top: 1px solid var(--rule-ink);
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.step {
  padding: var(--sp-5) var(--sp-5) var(--sp-6) 0;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 768px) {
  .step {
    border-bottom: 0;
    border-right: 1px solid var(--rule);
    padding-right: var(--sp-5);
  }
  /* Симметрично линейке: 24px до / 24px после (замер был 0px справа). */
  .step:not(:first-child) {
    padding-left: var(--sp-5);
  }
  .step:last-child {
    border-right: 0;
  }
}

.step__num {
  font-family: var(--font-mono);
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-ink);
  display: block;
  margin-bottom: var(--sp-5);
}

/* 13. Таблица сравнения */

.compare {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.compare__cap {
  display: block;
  width: 100%;
  padding-bottom: var(--sp-4);
}

.compare th,
.compare td {
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  border-top: 1px solid var(--rule);
  vertical-align: top;
  font-size: var(--fs-small);
}

/* Шапка таблицы — отдельный блок, а не ещё один ряд: тушью, каким цветом
   набраны метки строк, и закрыта линейкой снизу, чтобы не читалась как
   первый ряд данных. */
.compare thead th {
  border-top: 1px solid var(--rule-ink);
  border-bottom: 1px solid var(--rule-ink);
  text-transform: uppercase;
  color: var(--ink);
}

@media (min-width: 701px) {
  /* Линейку снизу даёт шапка: у первого ряда данных своей верхней нет,
     иначе линии наложились бы друг на друга. */
  .compare tbody tr:first-child > * {
    border-top: 0;
  }
}

.compare thead th:last-child,
.compare td:last-child {
  padding-right: 0;
}

/* Метки строк — th[scope=row], а не td: скринридер объявляет строку
   вместе с её заголовком. Отсюда же сброс браузерных жирного и центровки. */
.compare tbody th {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink);
}

.compare__ours {
  border-left: 2px solid var(--accent);
  padding-left: var(--sp-4) !important;
}

/* Четвёртый столбец — расшифровка выгоды простым языком: вторичный голос
   (muted) за волосяной линейкой, чтобы не спорил с колонкой llmall. */
.compare__why {
  border-left: 1px solid var(--rule);
  padding-left: var(--sp-4) !important; /* как .compare__ours: перебить padding-left: 0 у .compare td */
  color: var(--muted);
}

@media (max-width: 700px) {
  .compare,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td {
    display: block;
  }
  .compare thead {
    display: none;
  }
  .compare tr {
    padding-block: var(--sp-4);
    border-top: 1px solid var(--rule-ink);
  }
  .compare td,
  .compare tbody th {
    border-top: 0;
    padding: 0 0 var(--sp-3);
  }
  .compare__ours {
    border-left: 0;
    padding-left: 0 !important;
  }
  .compare__ours::before {
    content: "llmall — ";
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    letter-spacing: 0.08em;
    color: var(--accent-ink);
  }
  /* В стеке четвёртая ячейка подписывается префиксом — шапки нет.
     Вертикальная линейка в столбик не нужна. */
  .compare__why {
    border-left: 0;
    padding-left: 0 !important;
  }
  .compare__why::before {
    content: "Что это даёт — ";
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    letter-spacing: 0.08em;
    color: var(--muted);
  }
}

/* 13.1 Измерения инференса (#speed): данные как таблица в DOM, а не картинка —
   читается скринридером, живёт в токенах (две темы без парных снимков), не
   мылится на ретине. Одноуровневый .compare: те же линейки и mono, но без
   мобильного стека — подписи c=5/c=6 из шапки в стеке потерялись бы, а три
   узкие колонки помещаются и на 320px. */

.bench {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.bench th,
.bench td {
  padding: var(--sp-4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
  vertical-align: top;
}

.bench thead th {
  border-top: 0; /* верхнюю линейку держит рамка .figure — без двойной линии */
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Имена моделей — id-шники, регистр не трогаем: uppercase исказил бы их. */
.bench tbody th {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--muted);
}

.bench td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.bench b {
  font-weight: 600;
}

/* Узкие экраны: рёбра таблицы прижимаем к краям фигуры, боковые поля ячеек
   уже — три колонки должны помещаться в 280px даже при кегле ×1.25 (min-content
   имени модели держит самый длинный фрагмент между дефисами). */
@media (max-width: 480px) {
  .bench th,
  .bench td {
    padding-inline: var(--sp-3);
  }

  .bench th:first-child,
  .bench td:first-child {
    padding-left: 0;
  }

  .bench th:last-child,
  .bench td:last-child {
    padding-right: 0;
  }
}

/* 14. Фигуры и изображения */

.figure {
  margin-top: var(--sp-6);
  border: 1px solid var(--rule-ink);
}

.figure img {
  width: 100%;
}

.figure figcaption {
  border-top: 1px solid var(--rule);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--muted);
}

html[data-theme="light"] .only-dark,
html.dark .only-light, html[data-theme="dark"] .only-light {
  display: none;
}

/* 15. Списки с линейками (без буллетов и карточек) */

.ruled {
  border-top: 1px solid var(--rule-ink);
}

.ruled li {
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--rule);
  /* На мобильных — стопкой (ключ, под ним значение), как раньше с flex-wrap. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4);
}

/* От 600px — два фиксированных столбца, а не flex space-between: при длинном
   ключе («Используете подписки (ollama.com, …)») значение переносилось под
   ключ. Грид держит значение в правом столбце, ключ переносится внутри своего. */
@media (min-width: 600px) {
  .ruled li {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .ruled .ruled__val {
    text-align: right;
  }
}

.ruled .ruled__key {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}

.ruled .ruled__val {
  text-transform: uppercase;
  color: var(--accent-ink);
}
/* --accent-ink рассчитан на бумагу своей темы; в тёмной он уже лаймовый (правка
   в токенах), но у .ruled__val был ещё и унаследованный цвет от body. */
html.dark .ruled__val, html[data-theme="dark"] .ruled__val { color: var(--accent-ink); }

/* 16. FAQ на details — работает без JS */

.faq {
  border-top: 1px solid var(--rule-ink);
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
  min-height: 3.5rem;
  padding-block: var(--sp-4);
  cursor: pointer;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: 600;
  transition: color var(--dur) var(--ease);
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* Вопрос — настоящий h3 (чтобы по нему ходить навигацией по заголовкам),
   но раскладка остаётся аккордеонной: номер, вопрос, знак. */
.faq summary .h3 {
  flex: 1;
  min-width: 0; /* вопрос переносится по словам, а не расширяет строку */
  display: flex;
  flex-wrap: wrap; /* на очень узких экранах знак «+» уходит на вторую строку */
  gap: var(--sp-4);
  align-items: baseline;
}

.faq summary:hover {
  color: var(--accent-ink);
}

.faq summary .faq__num {
  color: var(--accent-ink);
  min-width: 2rem;
}

.faq summary .faq__mark {
  margin-left: auto;
  font-family: var(--font-mono);
  /* Знак вдвое крупнее текста вопроса — видимый маркер аккордеона;
     baseline-выравнивание summary держит строку ровной. */
  font-size: calc(var(--fs-body) * 2);
  line-height: 1;
  color: var(--muted);
}

.faq details[open] summary .faq__mark::before {
  content: "−";
}

.faq details:not([open]) summary .faq__mark::before {
  content: "+";
}

.faq details p {
  padding: 0 0 var(--sp-5) 3rem;
  color: var(--muted);
  max-width: 68ch;
}

/* 17. Финальный призыв и подвал */

.cta {
  border-top: 1px solid var(--rule-ink);
  padding-block: var(--sp-9);
}

.site-foot {
  border-top: 1px solid var(--rule-ink);
  padding-block: var(--sp-6);
}

.site-foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  align-items: baseline;
  justify-content: space-between;
}

.site-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
}

/* 18. Знак в шапке и утилиты отступов (только токены шкалы) */

.brand__canvas {
  display: block;
  width: var(--logo-w);
  height: var(--logo-h);
  visibility: hidden;
}

.mt-5 {
  margin-top: var(--sp-5);
}

.mt-7 {
  margin-top: var(--sp-7);
}

/* 19. Анимации появления секций нет намеренно: контент, скрытый до скролла,
   не виден в печати, полностраничном рендере и быстрой прокрутке. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition-duration: 1ms !important;
  }
}

/* 21. Правки по разбору обратной связи 24.09.2026 (FEEDBACK-2026-09-24.md).
   Всё ниже — ответы на конкретные замечания, значения берутся из тех же
   токенов шкалы и палитры.

   21.1 Вывод-выгода в пунктах и секциях: аудитория читает клипами, поэтому
   завершающая мысль набрана полужирным, а не растворяется в описании. */

.item__benefit {
  margin-top: var(--sp-3);
  font-weight: 600;
  max-width: 58ch;
}

/* Вывод секции «Быстрый инференс»: польза вместо технического текста. */
.benefit {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  font-weight: 600;
  max-width: 46ch;
}

/* 21.2 Каталог: вместо бегущей строки — группы по задачам. */

.catalog {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--sp-6) var(--gutter);
  margin-top: var(--sp-6);
}

@media (min-width: 640px) {
  .catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .catalog {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Специфичность выше, чем у .models в разделе 10: внутри группы всегда одна
   колонка, ширину задаёт сама группа. */
.catalog .models {
  margin-top: 0;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.catalog__cap {
  display: block;
  padding-bottom: var(--sp-2);
}

/* 21.3 «Для кого» — четыре роли: две колонки и на широких экранах, потому что
   в три колонки четыре пункта дают ряд 3 + 1. */

@media (min-width: 768px) {
  .items--plain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 21.4 Список с иконкой-галочкой в круге (разбор просил иконки вместо
   голых галочек и полужирную ключевую мысль в каждом пункте). */

.checklist {
  border-top: 1px solid var(--rule-ink);
}

.checklist li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--rule);
}

.checklist li strong {
  font-weight: 600;
}

.checklist__icon {
  flex: none;
  color: var(--accent-ink);
  line-height: 0;
  margin-top: 0.15em;
}

.checklist__icon svg {
  display: block;
}

/* Маркер состояния — единственная круглая форма в системе: круг читается как
   выбор, а не как карточка, и снят с общего запрета на скругления. */
.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: var(--sp-2);
  border-radius: 50%;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: 1;
  vertical-align: -0.2em;
}

.mark--yes {
  color: var(--accent-ink);
}

.mark--no {
  color: var(--muted);
}

/* Колонка llmall весит больше не цветом, а весом начертания: цвет в системе
   один, и на нём уже держится структура. */
.compare tbody td:not(.compare__ours) {
  color: var(--muted);
}

.compare td.compare__ours {
  color: var(--ink);
  font-weight: 600;
}

/* 21.5 Словарь терминов в FAQ. */

.glossary {
  padding: 0 0 var(--sp-4) 3rem;
  max-width: 68ch;
}

.glossary dt {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  padding-top: var(--sp-4);
}

.glossary dt:first-child {
  padding-top: 0;
}

.glossary dd {
  color: var(--muted);
  padding-block: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--rule);
}

.glossary dd:last-child {
  border-bottom: 0;
}

/* 21.6 Кнопка «наверх»: не все знают, что логотип закреплён. Появляется после
   первого экрана, поэтому в начале страницы внимания не забирает. */

.to-top {
  position: fixed;
  inset-inline-end: var(--page-pad);
  bottom: var(--sp-5);
  z-index: 50;
  width: var(--control-h);
  height: var(--control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--rule-ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

/* атрибут hidden сильнее, чем display: inline-flex */
.to-top[hidden] {
  display: none;
}

.to-top:hover {
  background: var(--ink);
  color: var(--paper);
}

@media print {
  .to-top {
    display: none;
  }
}

/* 21.7 Схема маршрутизации комбо (9.3, FEEDBACK-2026-09-24.md): inline-SVG в
   цветах темы — файловых картинок под две темы не нужно, токены красят и
   схему. Геометрия в viewBox, цвета и кегли — только токены. */

.combo {
  margin-top: 0;
}

.combo svg {
  display: block;
  width: 100%;
  height: auto;
}

.combo-box {
  fill: var(--paper);
  stroke: var(--rule-ink);
  stroke-width: 1;
}

.combo-box--alt {
  stroke: var(--accent);
}

.combo-line {
  fill: none;
  stroke: var(--rule-ink);
  stroke-width: 1;
}

.combo-line--alt {
  stroke: var(--accent);
}

.combo-tri {
  fill: var(--rule-ink);
  stroke: none;
}

.combo-tri--alt {
  fill: var(--accent);
}

/* Вертикальное многоточие между моделями: список комбо продолжается —
   за самой дешёвой доступной следует следующая по цене. */
.combo-dot {
  fill: var(--muted);
  stroke: none;
}

/* Текст схемы живёт в координатах viewBox и сжимается вместе с ней: на 375px
   фигура ~341px шириной (масштаб 0.45), поэтому кегль — ступень title (24):
   на десктопе это ~18px, на мобильном ~11px. Ниже — нечитаемо. */

.combo-t {
  fill: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-title);
  font-weight: 600;
}

.combo-t-accent {
  fill: var(--accent);
  font-family: var(--font-sans);
  font-size: var(--fs-title);
  font-weight: 600;
}

.combo-t-muted {
  fill: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-title);
}

/* 21.8 Скриншоты кабинета (9.3): мокапы в двух темах — landing/cabinet-*.png,
   сняты с .review-tmp/mocks/cabinet.html скриптом .review-tmp/shots-mocks.mjs.
   Настоящие снимки ставятся заменой src — разметка и стили не меняются. */

.shots {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--sp-6) var(--gutter);
  margin-top: var(--sp-6);
}

@media (min-width: 640px) {
  .shots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .shots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.shot__img {
  margin-top: var(--sp-4);
  border: 1px solid var(--rule-ink);
}

/* 20. Режим высокой контрастности Windows: линейки и кнопки не пропадают */

@media (forced-colors: active) {
  .btn,
  .icon-btn,
  .figure,
  .figure figcaption,
  .compare th,
  .compare td,
  .bench th,
  .bench td,
  .item,
  .step,
  .faq details,
  .ruled li,
  .models li {
    border-color: ButtonText;
  }

  .item--cta,
  .btn--fill,
  .to-top,
  .mark,
  .shot__img {
    border: 1px solid ButtonText;
  }

  /* Схема комбо: в высокой контрастности работает системными цветами. */
  .combo-box {
    fill: Canvas;
    stroke: ButtonText;
  }

  .combo-box--alt {
    stroke: Highlight;
  }

  .combo-line {
    stroke: ButtonText;
  }

  .combo-line--alt {
    stroke: Highlight;
  }

  .combo-tri {
    fill: ButtonText;
  }

  .combo-tri--alt {
    fill: Highlight;
  }

  .combo-t,
  .combo-t-muted,
  .combo-t-accent,
  .combo-dot {
    fill: CanvasText;
  }

  /* В высокой контрастности акцентный круг не должен сливаться с текстом. */
  .checklist__icon {
    color: ButtonText;
  }

  :focus-visible {
    outline-color: Highlight;
  }
}

/* Пояснение внутри таблицы: диапазон цены автонабора и пометка «автонабор» —
   тише основного числа, чтобы столбец цен читался с первого взгляда. */
.bench__note {
  color: var(--muted);
  font-weight: 400;
}

/* Блок кода для разработчиков: моноширинный, с горизонтальной прокруткой на узких
   экранах (длинные строки curl иначе ломают вёрстку). Фон — токены темы, чтобы
   блок читался и в светлой, и в тёмной. */
.dev-code {
  margin: 0;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: 1.6;
  background: color-mix(in oklab, var(--fg) 5%, transparent);
  border: 1px solid var(--rule);
  border-radius: 2px;
  white-space: pre;
  tab-size: 2;
}
.dev-code code {
  font: inherit;
  color: var(--fg);
}
@media (max-width: 640px) {
  .dev-code { font-size: 11px; padding: 0.85rem 1rem; }
}

/* 14. Обезличивание (#anon): таблица «до / после» из трёх колонок.
   На узких экранах mono-значения (почта, номер карты) не переносятся по своей
   природе — 23 символа в 10px дают 217px и выносят таблицу за вьюпорт (замерено:
   390 → 443 px). Поэтому ячейкам разрешён перенос по любому символу, а сами
   значения прижимаются к левому краю: читаемость важнее «ровной» сетки. */
/* `overflow-wrap: anywhere` уже схлопывает min-content, поэтому на десктопе таблица
   остаётся на auto-раскладке — как соседние .bench (скорость, цены). Жёсткая
   `table-layout: fixed` с долей на первой колонке применилась бы ко всем ширинам и
   на 1380px отдала бы ~360px под слово «Карта», оставив колонки значений в пустоте.
   Фиксация нужна ТОЛЬКО на узких экранах, где иначе таблица выходит за вьюпорт
   (замерено: 390 → 443 px). */
.anon-table th,
.anon-table td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 480px) {
  .anon-table {
    font-size: 11px;
  }

  .anon-table th:first-child,
  .anon-table td:first-child {
    width: 30%;
  }
}

/* 14.2 Обезличивание: компактный список шагов (.items--tight).
   Базовый .items на ≥768px раскладывается в ДВЕ колонки (см. :783) — внутри узкого
   col-1-4 это давало два столбца по ~110px и рваные подписи. Здесь список всегда
   одноколоночный: шаги читаются сверху вниз, номер слева. */
.items--tight {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.items--tight > .item {
  padding-block: var(--sp-3);
}

@media (min-width: 768px) {
  .items--tight {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media (min-width: 1600px) {
  .items--tight {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* 14.3 Кегль в узкой ячейке задаётся на САМОЙ ячейке: `.bench th, .bench td` держит
   font-size прямо на td, а прямое объявление всегда бьёт наследуемое от таблицы —
   правило на .anon-table оставалось no-op. */
@media (max-width: 480px) {
  .anon-table {
    table-layout: fixed;
    width: 100%;
  }

  /* Первая колонка — подпись поля, она короткая: фиксируем долю только здесь. */
  .anon-table th:first-child,
  .anon-table td:first-child {
    width: 30%;
  }

  .anon-table th,
  .anon-table td {
    font-size: 11px;
  }
}