/* ============================================================================
   Главная manibus.ru — мир «Пост наблюдения».
   С #432 общая часть мира — шрифты, токены, поверхности браузера, шапка,
   подвал, органы управления, поля, таблицы, модалки — живёт в instrument.css
   и работает на всех страницах. Здесь только то, что принадлежит главной.
   Направление выбрано владельцем 21.09.2026 на столе решения impeccable,
   ключ сида 6d5fad34, кандидат 3 из 7. Контракт направления — комментарием
   в начале Pages/Index.cshtml, он уезжает в собранную разметку.

   Страница — не рассказ о сервисе, а включённый прибор. Отсюда все решения:
   корпус и врезанное экранное поле как два разных материала, зелёный
   люминофор с затуханием вместо неонового свечения, гравировка вместо
   подписей, огромная табличная цифра вместо «большое число — мелкая
   подпись». Карточек «иконка + заголовок + текст» на странице нет:
   это ленивый контейнер, и именно он стоял здесь до 21.09.2026.

   Тексты и порядок блоков заморожены фазой 1 (docs/launch/structure.md,
   docs/launch/notes/texts-home-18.09.2026.md). Ни одной новой фразы этот файл не вводит.
   ============================================================================ */

/* Типографика мира — только на главной: это правило, а не токены. */
.home {
    font-family: var(--i-text);
    font-size: var(--i-t-base);
    line-height: 1.55;
    color: var(--i-ink);
    font-variant-numeric: tabular-nums;
}

/* --- Корпус во весь экран -------------------------------------------------
   main в _Layout.cshtml несёт бутстраповские отступы с !important, а корпус
   прибора обязан доходить до краёв экрана. Правило видит только главную:
   :has(.home) не срабатывает больше нигде на сайте. */

body:has(.home) > main {
    padding: 0 !important;
}

.home.container {
    max-width: none;
    padding: 0;
    background: var(--i-housing);
}

/* --- Типографика ----------------------------------------------------------
   Регистр первый: гравировка. Моноширинный в верхнем регистре с разрядкой —
   так подписывают панель, и так разрядка становится материалом, а не
   украшением. */

.home .i-label {
    display: block;
    font-family: var(--i-mono);
    font-size: var(--i-t-label);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--i-ink-2);
}

/* Регистр второй: показание. Огромная табличная цифра.
   Разряды в разметке отбиты неразрывным пробелом, а в моноширинном он
   шириной в целый знак — на 60 px это дыра. Пробел поджимается словесным
   интервалом, межбуквенный при этом остаётся в пределах пола (−0,03em). */
.home .i-readout {
    display: block;
    font-family: var(--i-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    letter-spacing: -.03em;
    word-spacing: -.34em;
    line-height: .95;
    color: var(--i-phos);
}

.home h1 {
    margin: 0 0 calc(var(--i-u) * 3);
    font-family: var(--i-text);
    font-size: var(--i-t-h1);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.022em;
    color: var(--i-ink);
    /* balance для короткого заголовка; этот в две фразы с жёстким переносом,
       и балансировщик на узком экране оставляет длинное слово висеть за краем.
       pretty правит только висячие строки и ничего не ломает. */
    text-wrap: pretty;
    overflow-wrap: break-word;
}

.home h2 {
    margin: 0 0 calc(var(--i-u) * 2);
    font-family: var(--i-text);
    font-size: var(--i-t-h2);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--i-ink);
    text-wrap: balance;
}

.home h3 {
    margin: 0 0 var(--i-u);
    font-family: var(--i-text);
    font-size: var(--i-t-h3);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--i-ink);
    text-wrap: balance;
}

.home p {
    margin: 0 0 calc(var(--i-u) * 2);
    max-width: var(--i-measure);
}

.home p:last-child {
    margin-bottom: 0;
}

.home .i-lead {
    font-size: var(--i-t-lead);
    line-height: 1.5;
    color: var(--i-ink);
}

.home .i-sub {
    font-size: var(--i-t-base);
    color: var(--i-ink-2);
}

.home a:not(.btn) {
    color: var(--i-phos);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

.home a:not(.btn):hover {
    color: var(--i-ink);
}

/* --- Материалы ------------------------------------------------------------
   Одна система глубины на весь прибор: фаска. Ни одной падающей тени —
   у приборной панели её нет, у неё есть освещённое верхнее ребро
   и затенённое нижнее. */

.home .i-plate {
    position: relative;
    padding: calc(var(--i-u) * 3);
    background: var(--i-housing);
    border: 1px solid var(--i-housing-hi);
    border-radius: var(--i-radius);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .05),
    inset 0 -1px 0 rgb(0 0 0 / .45);
}

/* Плата, врезанная в экранное поле: она не выступает, а утоплена. */
.home .i-plate--screen {
    background: var(--i-screen);
    border-color: #1d2620;
    box-shadow: inset 0 1px 0 rgb(0 0 0 / .6),
    inset 0 -1px 0 rgb(255 255 255 / .04);
}

/* --- Секции ---------------------------------------------------------------
   Прокрутка поставлена как приход (подъём от «Кинотеатра ар-деко»):
   три сужающихся регистра. Открытый пост — разбор — протокол. На каждом
   пороге поле деления уплотняется, а поля секции сжимаются. */

.home > section {
    position: relative;
    padding: calc(var(--i-u) * 9) var(--i-gutter, 24px);
    border-top: 1px solid var(--i-housing-hi);
}

.home > section:first-child {
    border-top: 0;
}

.home .i-inner {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
}

/* Регистр второй — разбор. На корпусе проступает только крупное деление:
   прибор открыт, но уже размечен. */
.home .i-sec--reg2,
.home .i-sec--reg3 {
    --i-sec-grat: var(--i-housing-hi);
    position: relative;
}

.home .i-sec--screen {
    --i-sec-grat: var(--i-grat-major);
}

/* Порог регистра — измерительная кромка, а не сетка под текстом.
   Первая редакция стелила двухосную сетку фоном всей секции; финишная
   рецензия 21.09.2026 приняла это обоснование для экранного поля и отклонила
   для прозаических регистров: на 360 вертикальные линии режут строки.
   Сетка осталась там, где под ней действительно измерительная поверхность,
   а на пороге секции теперь работает то, что у мира и так было и не
   использовалось, — шкала делений. Уплотнение делений от регистра к регистру
   и есть обещанное сужение (подъём от «Кинотеатра ар-деко»). */
.home .i-sec--reg2::before,
.home .i-sec--reg3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 9px;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(to right, var(--i-sec-grat) 1px, transparent 1px);
    background-size: 16px 9px;
    background-repeat: repeat-x;
}

/* Регистр третий — протокол. Деление вдвое плотнее, поля сжимаются:
   к этому месту человек уже не знакомится, а сверяет. */
.home .i-sec--reg3 {
    padding-top: calc(var(--i-u) * 7);
    padding-bottom: calc(var(--i-u) * 7);
}

.home .i-sec--reg3::before {
    height: 13px;
    background-size: 8px 13px;
}

/* ============================================================================
   Блок 1. Первый экран — открытый пост
   ============================================================================ */

.home .i-hero {
    padding: 0;
    overflow: hidden;
    background: var(--i-housing);
}

.home .i-hero-top {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: min(74vh, 640px);
    align-items: center;
}

/* Врезанное экранное поле. Уходит за правый край — прибор шире экрана,
   мы видим его часть. */
.home .i-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--i-screen);
}

/* Графика: сетка делений самого прибора. Мелкое деление — 8 px,
   крупное — 64 px. Сетка здесь заработана: под ней измерительный
   инструмент, а не декоративная «сеточка». */
.home .i-field::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
            linear-gradient(to right, var(--i-grat) 1px, transparent 1px),
            linear-gradient(to bottom, var(--i-grat) 1px, transparent 1px),
            linear-gradient(to right, var(--i-grat-major) 1px, transparent 1px),
            linear-gradient(to bottom, var(--i-grat-major) 1px, transparent 1px);
    background-size: 8px 8px, 8px 8px, 64px 64px, 64px 64px;
    opacity: .85;
}

/* Корпус наезжает на поле слева: текст стоит на металле, а не на экране.
   Дальше 56 % корпус кончается и поле открыто целиком — иначе тезис
   направления не виден, а видна ещё одна тёмная страница. */
.home .i-field::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
    var(--i-housing) 0%,
    var(--i-housing) 30%,
    rgb(26 29 24 / .88) 40%,
    rgb(26 29 24 / .30) 50%,
    rgb(26 29 24 / 0) 58%);
}

/* Холст стоит МЕЖДУ сеткой делений и корпусом: ::after перекрывает его слева,
   и развёртка видна только там, где в корпусе открыто окно. Иначе яркая линия
   ходит поперёк заголовка — прибор светит сквозь собственный металл. */
.home .i-sweep {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.home .i-hero-body {
    position: relative;
    z-index: 2;
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: calc(var(--i-u) * 9) var(--i-gutter, 24px);
}

.home .i-hero-body > * {
    max-width: 44rem;
}

/* Плашка «97 из 100» — привинченный к корпусу шильдик.
   Заклёпки нарисованы, потому что у шильдика они есть. */
.home .i-tag {
    position: relative;
    display: block;
    margin: calc(var(--i-u) * 3) 0;
    padding: calc(var(--i-u) * 2) calc(var(--i-u) * 4);
    max-width: 40rem;
    font-size: var(--i-t-sm);
    line-height: 1.45;
    color: var(--i-ink);
    background: var(--i-housing-hi);
    border: 1px solid var(--i-edge);
    border-radius: var(--i-radius);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .06);
}

.home .i-tag::before,
.home .i-tag::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: var(--i-housing-lo);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .12);
}

.home .i-tag::before {
    left: 11px;
}

.home .i-tag::after {
    right: 11px;
}

/* --- Три показания под кнопкой -------------------------------------------
   Подъём от «Киоска экибэн»: крышка рисует содержимое коробки, и диаграмма
   не врёт. Эти три числа — не украшение, а оглавление страницы: каждое
   ведёт к блоку, который его доказывает. */

.home .i-readouts {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1320px;
    margin: 0 auto;
    border-top: 1px solid var(--i-housing-hi);
}

.home .i-readout-cell {
    display: block;
    padding: calc(var(--i-u) * 4) var(--i-gutter, 24px);
    border-left: 1px solid var(--i-housing-hi);
    color: inherit;
    text-decoration: none;
    transition: background .25s var(--i-ease);
}

.home .i-readout-cell:first-child {
    border-left: 0;
}

.home a.i-readout-cell:hover,
.home a.i-readout-cell:focus-visible {
    background: var(--i-housing-hi);
    color: inherit;
}

.home .i-readout-cell .i-readout {
    font-size: clamp(34px, 4.4vw, 62px);
    margin-bottom: var(--i-u);
}

.home .i-readout-cell .i-label {
    max-width: 22ch;
}

/* ============================================================================
   Кнопка целевого действия — орган управления
   Не «кнопка-таблетка», а механический орган с фаской: у него есть
   поднятое состояние, нажатое и ход между ними.
   ============================================================================ */

.home .i-cta {
    margin: calc(var(--i-u) * 4) 0 0;
}

.home .i-cta-btn,
.home .i-cta-btn:link,
.home .i-cta-btn:visited {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--i-u) * 2);
    min-height: 56px;
    padding: 0 calc(var(--i-u) * 4);
    font-family: var(--i-mono);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    color: #14170f;
    background: var(--i-phos);
    border: 1px solid #52d4ad;
    border-radius: var(--i-radius);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .45),
    inset 0 -2px 0 rgb(0 0 0 / .28);
    transition: transform .12s var(--i-ease), background .18s var(--i-ease);
}

/* Ход органа управления: при нажатии он уходит в панель. */
.home .i-cta-btn:hover {
    background: #14cc9b;
    color: #14170f;
}

.home .i-cta-btn:active {
    transform: translateY(2px);
    box-shadow: inset 0 2px 4px rgb(0 0 0 / .4);
}

/* Стрелка нарисована, а не набрана глифом: знак — часть системы,
   а не символ из таблицы Юникода. */
.home .i-cta-btn svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.home .i-cta-note {
    margin: calc(var(--i-u) * 2) 0 0;
    font-family: var(--i-mono);
    font-size: var(--i-t-label);
    letter-spacing: .04em;
    color: var(--i-ink-2);
    max-width: 34rem;
}

/* ============================================================================
   Блок 4. Три шага — рейка операций
   Не три карточки в ряд: у последовательности есть направление, и его несёт
   сама рейка. Номер разрывает рейку в точке фиксатора — так подписывают
   положения на панели.
   ============================================================================ */

.home .i-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: calc(var(--i-u) * 6) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.home .i-track-stop {
    position: relative;
    padding: calc(var(--i-u) * 5) calc(var(--i-u) * 5) 0 0;
    border-top: 1px solid var(--i-edge);
}

.home .i-track-num {
    position: absolute;
    top: -.62em;
    left: 0;
    padding-right: calc(var(--i-u) * 2);
    font-family: var(--i-mono);
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    color: var(--i-phos);
    background: var(--i-housing);
}

.home .i-track-stop h3 {
    margin-top: 0;
}

/* --- Разделение труда: разными материалами, а не разными заголовками ------ */

.home .i-duty {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--i-u) * 3);
    margin-top: calc(var(--i-u) * 7);
}

.home .i-duty-h {
    font-family: var(--i-mono);
    font-size: var(--i-t-label);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--i-ink-2);
    margin-bottom: calc(var(--i-u) * 3);
}

.home .i-duty-col--machine .i-duty-h {
    color: var(--i-phos-dim);
}

.home .i-ticks {
    margin: 0;
    padding: 0;
    list-style: none;
}

.home .i-ticks li {
    position: relative;
    padding-left: calc(var(--i-u) * 4);
    margin-bottom: calc(var(--i-u) * 2);
}

.home .i-ticks li:last-child {
    margin-bottom: 0;
}

/* Ручная работа — начерченная галка. Знак нарисован геометрией, а не взят
   глифом из таблицы: чужой символ внутри выдержанного мира читается заплаткой. */
.home .i-ticks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .42em;
    width: 9px;
    height: 5px;
    border-left: 1.5px solid var(--i-ink-2);
    border-bottom: 1.5px solid var(--i-ink-2);
    transform: rotate(-45deg);
}

/* Машинная работа — деление цикла, а не галка: это повторяется. */
.home .i-ticks--cycle li::before {
    top: .52em;
    width: 8px;
    height: 8px;
    border: 1.5px solid var(--i-phos-dim);
    border-radius: 50%;
    transform: none;
}

/* --- Клеймо: одиночное несущее утверждение ------------------------------- */

.home .i-stamp {
    margin: calc(var(--i-u) * 7) 0 0;
    padding: calc(var(--i-u) * 3) 0;
    max-width: 64ch;
    border-top: 3px double var(--i-edge);
    border-bottom: 3px double var(--i-edge);
    color: var(--i-ink);
}

/* --- Полоса целевого действия -------------------------------------------- */

.home .i-cta-line {
    padding-top: calc(var(--i-u) * 6);
    padding-bottom: calc(var(--i-u) * 6);
    background: var(--i-housing-lo);
}

.home .i-cta-line .i-cta {
    margin: 0;
}

.home .i-cta-line--inner {
    margin: calc(var(--i-u) * 7) 0;
    padding: calc(var(--i-u) * 5) calc(var(--i-u) * 4);
    border-top: 1px solid var(--i-housing-hi);
    border-bottom: 1px solid var(--i-housing-hi);
    background: none;
}

/* ============================================================================
   Блок 2. Как устроен кабинет — приборная панель
   Первая редакция держала шесть одинаковых плит с рамкой. Это ровно первый
   пункт списка Refuse и ровно тот объект, от которого отказывается тезис
   направления, — финишная рецензия 21.09.2026 отклонила его как
   противоречие контракту.
   Теперь это одна панель: рамка у шасси, между модулями волосяные линии,
   а схема каждого факта врезана в окно из экранного материала. Двухматериальная
   система мира перестала жить в одном только первом экране.
   ============================================================================ */

.home .i-modules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: calc(var(--i-u) * 5);
    border-top: 1px solid var(--i-housing-hi);
    border-left: 1px solid var(--i-housing-hi);
}

.home .i-module {
    display: grid;
    grid-template-columns: 152px minmax(0, 1fr);
    align-items: start;
    align-content: start;
    gap: calc(var(--i-u) * 3);
    padding: calc(var(--i-u) * 4);
    border-right: 1px solid var(--i-housing-hi);
    border-bottom: 1px solid var(--i-housing-hi);
}

/* Врезанное окно: тот же материал, что экранное поле первого экрана,
   и та же утопленная фаска. Пропорция у всех шести одна — повтор
   одинакового прибора и есть линейка, по которой панель читается рядом,
   а не шестью отдельными предметами. */
.home .i-module-win {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    padding: calc(var(--i-u) * 2);
    background: var(--i-screen);
    border: 1px solid #1d2620;
    box-shadow: inset 0 1px 0 rgb(0 0 0 / .6),
    inset 0 -1px 0 rgb(255 255 255 / .04);
}

.home .i-module-body h3 {
    font-size: 19px;
    margin-bottom: calc(var(--i-u) * 1.5);
}

.home .i-module-body p {
    font-size: var(--i-t-sm);
    line-height: 1.55;
    color: var(--i-ink);
    margin: 0;
}

/* Схема — чертёж под конкретный факт, а не иконка из набора.
   Она несёт содержание: пять уровней отметки нарисованы пятью вложенными
   контурами, семь полей находки — семью линейками. */
.home .i-dia {
    display: block;
    width: 100%;
    height: auto;
    max-width: 112px;
    color: var(--i-phos-dim);
}

/* ============================================================================
   Блок 5. Зачем мне это? — положения переключателя
   Шесть поводов стоят в одной колонке фиксаторами: ни одно положение
   не назначено правильным, человек выбирает своё. Слева — заголовок секции,
   справа — сама лента: ширина используется, а мера чтения не растягивается.
   ============================================================================ */

.home .i-sec--screen {
    background: var(--i-screen);
}

.home .i-band {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--i-grat-major);
}

.home .i-band-pos {
    position: relative;
    padding: calc(var(--i-u) * 3) 0 calc(var(--i-u) * 3) calc(var(--i-u) * 5);
    border-bottom: 1px solid var(--i-grat-major);
}

/* Фиксатор положения. */
.home .i-band-pos::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(var(--i-u) * 3 + .55em);
    width: 14px;
    height: 1px;
    background: var(--i-phos);
}

.home .i-band-pos h3 {
    font-size: 19px;
    margin-bottom: calc(var(--i-u) * 1.5);
}

.home .i-band-pos p {
    font-size: var(--i-t-sm);
    color: var(--i-ink);
    margin: 0;
}

/* ============================================================================
   Блок 7. Достижения в цифрах — панель показаний и ряд одинаковых приборов
   ============================================================================ */

.home .i-h-sec {
    margin: calc(var(--i-u) * 8) 0 calc(var(--i-u) * 2);
    padding-top: calc(var(--i-u) * 2);
    border-top: 1px solid var(--i-housing-hi);
    font-size: var(--i-t-h3);
}

/* Протокольная колонка вместо плиточной решётки.
   Первая редакция держала шесть плиток «крупное число + мелкая подпись» —
   шаблон hero-metric из списка Refuse; финишная рецензия 21.09.2026 его
   отклонила. Числа объявлены показаниями прибора — значит, читаются протоколом:
   подпись слева гравировкой, число справа табличной цифрой. Правое
   выравнивание даёт рваный левый край, и порядок величины виден шириной
   числа раньше, чем прочитано само число. Ради этого табличная цифра
   и существует. */
/* Колонка ограничена мерой, а не шириной секции: на 1440 подпись и число
   разносило на тысячу с лишним пикселей, и пару держала одна волосяная линия
   через самый пустой пролёт страницы. Гроссбух читается парой, а не двумя
   краями листа. */
.home .i-protocol {
    max-width: 820px;
    margin: calc(var(--i-u) * 4) 0 0;
    border-top: 1px solid var(--i-housing-hi);
}

.home .i-protocol-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: calc(var(--i-u) * 3);
    padding: calc(var(--i-u) * 2.5) 0;
    border-bottom: 1px solid var(--i-housing-hi);
}

.home .i-protocol dt {
    max-width: 44ch;
    font-weight: 500;
}

.home .i-protocol dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.home .i-protocol .i-readout {
    font-size: clamp(30px, 4.4vw, 58px);
}

/* Красный — цвет нарушения: здесь «32 268 нарушений», на поле первого экрана —
   чужие кадры. Одно значение в двух местах, больше красного на странице нет. */
.home .i-protocol-row--alarm .i-readout {
    color: var(--i-alarm);
}

.home .i-protocol-row--alarm dt {
    color: var(--i-ink);
}

/* --- Срезы по авторам: шесть одинаковых приборов на общей шкале ----------- */

.home .i-slices {
    width: 100%;
    margin-top: calc(var(--i-u) * 3);
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.home .i-slices th {
    padding: 0 calc(var(--i-u) * 2) var(--i-u) 0;
    text-align: left;
    vertical-align: bottom;
    font-family: var(--i-mono);
    font-size: var(--i-t-label);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--i-ink-2);
    border-bottom: 1px solid var(--i-edge);
}

.home .i-slices td {
    padding: calc(var(--i-u) * 2) calc(var(--i-u) * 2) calc(var(--i-u) * 2) 0;
    border-bottom: 1px solid var(--i-housing-hi);
    font-family: var(--i-mono);
    font-size: 19px;
    color: var(--i-ink);
    vertical-align: middle;
}

.home .i-slices td:nth-child(2) {
    width: 46%;
    color: var(--i-phos);
}

/* Полоса на общей шкале: длина — доля от максимума 1 876.
   Ряд читается линейкой, а не шестью отдельными числами. */
.home .i-bar {
    position: relative;
    display: block;
    width: 100%;
    height: 4px;
    margin-bottom: var(--i-u);
    background: var(--i-grat-major);
}

/* Заливка — настоящий элемент, а не ::before: развёртка ведёт её трансформом,
   и масштаб от левого края двигает правую кромку ровно со скоростью прохода. */
.home .i-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--i-bar);
    background: var(--i-phos);
    transform-origin: left center;
}

/* Пиковая метка: у стрелки с массой есть отметка максимума. Она же — торцевая
   кромка полосы в покое: видно, где полоса кончается, даже на тёмной дорожке. */
.home .i-bar-peak {
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: var(--i-bar);
    width: 2px;
    margin-left: -1px;
    background: var(--i-phos);
}

/* --- Развёртка по журналу -------------------------------------------------
   Прибор взводит только скрипт: без него журнал стоит в итоговом виде,
   и ни одна цифра не прячется. Под классом is-armed полосы пусты,
   метки и числа погашены — до того, как их напишет развёртка. */
.home .i-slices-wrap {
    position: relative;
    overflow: hidden;
}

.home .i-slices-wrap.is-armed .i-bar-fill {
    transform: scaleX(0);
}

.home .i-slices-wrap.is-armed .i-bar-peak,
.home .i-slices-wrap.is-armed .i-count {
    opacity: 0;
}

/* Сама развёртка — тот же приём, что в координатном поле первого экрана:
   узкая кромка люминофора и след за ней. Правая граница элемента и есть линия. */
.home .i-slices-sweep {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -160px;
    width: 160px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(to right, rgb(0 188 140 / 0), rgb(0 188 140 / .1));
    border-right: 1.5px solid rgb(0 188 140 / .6);
}

/* Сравнение строк наведением: какая строка ваша — заранее не скажет никто,
   поэтому строку можно вынуть из ряда взглядом. Остальные приглушаются
   до .8, а не сильнее: при .6 зелёные числа журнала падали до 3,3:1,
   при .8 держат 4,8:1.
   Только для устройств с настоящим наведением — на телефоне это ложный тап. */
@media (hover: hover) {
    .home .i-slices tbody tr {
        transition: opacity .2s var(--i-ease);
    }

    .home .i-slices tbody:hover tr {
        opacity: .8;
    }

    .home .i-slices tbody tr:hover {
        opacity: 1;
    }
}

/* --- Дела и голоса -------------------------------------------------------- */

/* Дела и голоса — тоже деления одного шасси, а не девять карточек с рамками
   подряд. Рамка у панели, между делениями волосяные линии. */
.home .i-files,
.home .i-voices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: calc(var(--i-u) * 3);
    border-top: 1px solid var(--i-housing-hi);
    border-left: 1px solid var(--i-housing-hi);
}

.home .i-file,
.home .i-voice {
    padding: calc(var(--i-u) * 4);
    border-right: 1px solid var(--i-housing-hi);
    border-bottom: 1px solid var(--i-housing-hi);
}

/* Голоса стоят на экранном материале — это цитаты с другой стороны прибора. */
.home .i-voices {
    background: var(--i-screen);
    border-color: #1d2620;
}

.home .i-voice {
    border-color: #1d2620;
}

.home .i-file p {
    font-size: var(--i-t-sm);
    line-height: 1.6;
}

.home .i-file h4 {
    margin: calc(var(--i-u) * 2) 0 calc(var(--i-u) * 2);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--i-ink);
}

/* Портрет — окно в панели: квадрат в рамке, приглушённый по цвету, а не круглая
   аватарка. Фаски у него нет: внутренняя тень на <img> не рисуется. */
.home .i-portrait {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border: 1px solid var(--i-edge);
    border-radius: 0;
    filter: grayscale(.35) contrast(1.05);
}

.home .i-portrait--lg {
    width: 72px;
    height: 72px;
}

.home .i-sign {
    display: flex;
    align-items: center;
    gap: calc(var(--i-u) * 2);
    margin: calc(var(--i-u) * 3) 0 0;
    font-family: var(--i-mono);
    font-size: var(--i-t-label);
    letter-spacing: .04em;
    color: var(--i-ink-2);
}

.home .i-file .i-sign {
    padding-top: calc(var(--i-u) * 2);
    border-top: 1px solid var(--i-housing-hi);
}

.home .i-voice p:first-child {
    font-size: var(--i-t-sm);
    line-height: 1.6;
}

.home .i-voice .i-sign {
    padding-top: calc(var(--i-u) * 2);
    border-top: 1px solid var(--i-grat-major);
}

/* ============================================================================
   Блок 8. FAQ — ряд подписанных клавиш
   Механика гармошки бутстраповская: она доступна с клавиатуры и работает
   без собственных скриптов. Меняется только материал.
   ============================================================================ */

.home .i-switches {
    margin-top: calc(var(--i-u) * 4);
    border-top: 1px solid var(--i-housing-hi);
}

.home .i-switches .accordion-item {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--i-housing-hi);
    border-radius: 0;
}

.home .i-switches .accordion-button {
    padding: calc(var(--i-u) * 3) calc(var(--i-u) * 6) calc(var(--i-u) * 3) 0;
    font-family: var(--i-text);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--i-ink);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.home .i-switches .accordion-button:not(.collapsed) {
    color: var(--i-phos);
    background: none;
    box-shadow: none;
}

.home .i-switches .accordion-button:hover {
    color: var(--i-phos);
}

/* Индикатор клавиши: плюс, который при открытии становится минусом.
   Бутстраповская шеврон-картинка снята — она из другой системы знаков. */
.home .i-switches .accordion-button::after {
    content: '';
    position: absolute;
    right: 0;
    width: 14px;
    height: 14px;
    background:
            linear-gradient(currentColor, currentColor) center/14px 1.5px no-repeat,
            linear-gradient(currentColor, currentColor) center/1.5px 14px no-repeat;
    transform: none;
    transition: background-size .2s var(--i-ease);
}

.home .i-switches .accordion-button:not(.collapsed)::after {
    background:
            linear-gradient(currentColor, currentColor) center/14px 1.5px no-repeat,
            linear-gradient(currentColor, currentColor) center/1.5px 0 no-repeat;
}

.home .i-switches .accordion-body {
    padding: 0 calc(var(--i-u) * 6) calc(var(--i-u) * 4) 0;
    color: var(--i-ink);
}

.home .i-switches .accordion-body p {
    font-size: var(--i-t-base);
}

/* Заметки стенда: в боевую сборку не попадают, но пока видны — должны
   резать глаз, а не прятаться в мире. */
.home .i-dev-note {
    margin-top: calc(var(--i-u) * 2);
    padding: calc(var(--i-u) * 2);
    font-family: var(--i-mono);
    font-size: 13px;
    line-height: 1.5;
    color: #ffd9d5;
    background: #3a1714;
    border: 1px dashed var(--i-alarm);
}

/* ============================================================================
   Блок 9. Повторный призыв — страница закрывается тем же материалом
   ============================================================================ */

.home .i-final {
    position: relative;
    padding-top: calc(var(--i-u) * 10);
    padding-bottom: calc(var(--i-u) * 10);
    background: var(--i-screen);
    border-top: 1px solid var(--i-housing-hi);
    overflow: hidden;
}

.home .i-final::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
            linear-gradient(to right, var(--i-grat) 1px, transparent 1px),
            linear-gradient(to bottom, var(--i-grat) 1px, transparent 1px);
    background-size: 8px 8px;
    opacity: .7;
}

.home .i-final .i-inner {
    position: relative;
}

.home .i-final-line {
    max-width: 52ch;
    font-size: var(--i-t-lead);
    line-height: 1.45;
    color: var(--i-ink);
}

.home .i-final-call {
    max-width: 52ch;
    margin-top: calc(var(--i-u) * 2);
    font-size: var(--i-t-lead);
    font-weight: 700;
    color: var(--i-phos);
}

/* ============================================================================
   Адаптация
   Аудитория читает с телефона — это основной случай, а не «адаптив под конец».
   ============================================================================ */

@media (min-width: 768px) {
    .home {
        --i-gutter: 40px;
        --i-t-h1: 52px;
        --i-t-h2: 38px;
        --i-t-lead: 21px;
    }
}

@media (min-width: 1200px) {
    .home {
        --i-gutter: 56px;
        --i-t-h1: 54px;
        --i-t-h2: 44px;
    }

    .home .i-hero-body > * {
        max-width: 46rem;
    }

    /* Блок 5: заголовок слева, лента положений справа. Ширина используется,
       а мера чтения не растягивается на весь экран. */
    .home .i-sec--screen .i-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
        column-gap: calc(var(--i-u) * 10);
        align-items: start;
    }

    .home .i-sec--screen h2 {
        grid-column: 1;
        grid-row: 1;
    }

    .home .i-sec--screen .i-sub {
        grid-column: 1;
        grid-row: 2;
    }

    .home .i-sec--screen .i-band {
        grid-column: 2;
        grid-row: 1 / span 3;
        margin-top: .35em;
    }
}

/* Планшет: стойка ужимается до четырёх колонок — широкая плата занимает ряд,
   узкие встают по две. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .home .i-modules {
        grid-template-columns: minmax(0, 1fr);
    }

    .home .i-files,
    .home .i-voices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .home {
        --i-gutter: 20px;
    }

    /* Поле остаётся подложкой и на телефоне: уходит за края, а не лежит
       полосой над заголовком. Первая редакция резала его в 180-пиксельный
       ремешок с жёстким низом, и первый экран основного устройства аудитории
       превращался в обрезок графики — финишная рецензия 21.09.2026 отклонила
       это как противоречие обещанному первому экрану.
       Экран невысокий, поэтому корпус наезжает не наискось, как на десктопе,
       а сверху вниз: к тому месту, где начинается текст, под ним уже сплошной
       металл. Поле видно в верхней четверти и по краям. */
    .home .i-hero-top {
        min-height: 0;
    }

    /* Рядом с текстом на телефоне места для кадров нет — строки идут во всю
       ширину. Поле раскрывается под кнопкой: нижнее поле первого экрана держит
       для него зону в 184 px. Кнопка при этом остаётся до сгиба, а опознавание
       «свой-чужой» — первое, что человек видит при прокрутке. */
    .home .i-hero-body {
        padding-top: calc(var(--i-u) * 3);
        padding-bottom: 184px;
    }

    .home .i-field::after {
        background: linear-gradient(to bottom,
        rgb(26 29 24 / .06) 0%,
        rgb(26 29 24 / .52) 20%,
        rgb(26 29 24 / .94) 36%,
        var(--i-housing) 46%,
        var(--i-housing) calc(100% - 250px),
        rgb(26 29 24 / .3) calc(100% - 170px),
        rgb(26 29 24 / .06) 100%);
    }

    /* Шильдик поджимается: на 800 px высоты каждая пара десятков решает,
       попадёт орган управления в первый экран или уедет за сгиб. */
    .home .i-tag {
        margin: calc(var(--i-u) * 2) 0;
        padding: calc(var(--i-u) * 1.5) calc(var(--i-u) * 4);
    }

    .home .i-cta {
        margin-top: calc(var(--i-u) * 3);
    }

    .home .i-readouts {
        grid-template-columns: 1fr;
    }

    .home .i-readout-cell {
        border-left: 0;
        border-top: 1px solid var(--i-housing-hi);
        padding-top: calc(var(--i-u) * 3);
        padding-bottom: calc(var(--i-u) * 3);
    }

    .home .i-readout-cell:first-child {
        border-top: 0;
    }

    .home .i-readout-cell .i-readout {
        font-size: 40px;
    }

    /* Рейка операций встаёт вертикально: направление теперь сверху вниз,
       фиксаторы — на левом краю. */
    .home .i-track {
        grid-template-columns: minmax(0, 1fr);
    }

    .home .i-track-stop {
        padding: calc(var(--i-u) * 4) 0 calc(var(--i-u) * 3) calc(var(--i-u) * 5);
        border-top: 0;
        border-left: 1px solid var(--i-edge);
    }

    .home .i-track-num {
        top: calc(var(--i-u) * 4 - .12em);
        left: -.42em;
        padding: calc(var(--i-u) * .5) 0;
        font-size: 20px;
    }

    .home .i-duty,
    .home .i-modules,
    .home .i-files,
    .home .i-voices {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Окно схемы уходит под текст: на 360 колонка в 152 px съедает половину
       ширины и абзац встаёт в шесть слов. */
    .home .i-module {
        grid-template-columns: minmax(0, 1fr);
        gap: calc(var(--i-u) * 2);
        padding: calc(var(--i-u) * 3);
    }

    .home .i-module-win {
        justify-content: flex-start;
        padding: calc(var(--i-u) * 1.5) calc(var(--i-u) * 2);
    }

    .home .i-file,
    .home .i-voice {
        padding: calc(var(--i-u) * 3);
    }

    .home .i-protocol-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: calc(var(--i-u) * 2);
        padding: calc(var(--i-u) * 2) 0;
    }

    .home .i-protocol .i-readout {
        font-size: 28px;
    }

    /* Кнопка «вниз» — общий компонент сайта: на телефоне она встаёт поверх
       строки подзаголовка в первом экране. На главной её убираем: семь точек
       целевого действия по странице и так ведут вниз лучше стрелки.
       Кнопку «наверх» оставляем — ей есть что делать на странице в 17 000 px. */
    body:has(.home) #scrollToBottomBtn {
        display: none !important;
    }

    /* Таблица срезов на 360: три колонки чисел удерживаются кеглем и полями,
       горизонтальной прокрутки на странице быть не должно. */
    .home .i-slices td {
        font-size: 15px;
        padding: calc(var(--i-u) * 1.5) var(--i-u) calc(var(--i-u) * 1.5) 0;
    }

    /* Кегль подписей не опускается ниже 12 px даже здесь: это пол доступности,
       а не предпочтение. Тесно становится — жертвуем разрядкой, не кеглем. */
    .home .i-slices th {
        letter-spacing: .02em;
        padding-right: var(--i-u);
    }

    .home .i-slices td:nth-child(2) {
        width: 42%;
    }
}

/* Кому движение мешает, тот видит итог сразу: поле первого экрана стоит уже
   опознанным (скрипт рисует его статично), журнал срезов и показания — в итоговом
   виде. Здесь снимаются переходы органов управления; остальное делает скрипт. */
@media (prefers-reduced-motion: reduce) {
    .home .i-cta-btn,
    .home .i-readout-cell {
        transition: none;
    }
}