/*
Theme Name: LTX Studio Ru
Description: Тема сайта ltxstudio.info. Язык дизайна — «открытая модель»: серое полотно офсайта, розовый акцент, липкая колонка версии и строки-полосы с подсветкой.
Version: 1.1.2
Text Domain: ltx-ru
*/

/* ============================================================
   ТОКЕНЫ. Палитра, контейнер и форма кнопок сняты кодом
   с живого DOM ltx.io 26.08.2026 — по требованию владельца.
   Розовый #FF72B2 — цвет полосы анонса офсайта; в сетке
   розового акцента нет ни у одного сайта.
   ============================================================ */
:root {
	--paper:   #E7E8EB;   /* body background офсайта */
	--white:   #FDFDFD;
	--ink:     #0B0B0B;   /* цвет текста офсайта */
	--ink-2:   #56585E;
	--ink-3:   #86888F;
	--line:    rgba(11, 11, 11, .16);
	--line-2:  rgba(11, 11, 11, .08);

	--pink:    #FF72B2;
	--pink-2:  #FFD3E6;
	--pink-3:  rgba(255, 114, 178, .12);

	--wide:    1600px;    /* max-width офсайта */
	--col:     730px;     /* текстовая колонка офсайта */
	--pad:     40px;
	--head:    64px;
	--strip:   32px;      /* полоса анонса */

	--r:       5px;       /* радиус кнопок офсайта — 4.8px */
	--r-b:     14px;      /* радиус блока */

	--f:       'Ysabeau Infant', 'Segoe UI', Arial, sans-serif;
	--f-m:     ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--ease:    cubic-bezier(.22, 1, .36, 1);
	--t:       .2s;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--f);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--pink); }
a:hover { color: var(--pink); }

.wide { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--pad); }
.wide--col { max-width: calc(var(--col) + var(--pad) * 2); }

.skip {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: var(--r);
}
.skip:focus { left: 12px; top: 12px; }

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

/* ============================================================
   ТИПОГРАФИКА.
   Шрифт офсайта Aeonik — коммерческий (CoType), взять нельзя
   ни строкой подключения, ни хостингом файла. Замена подобрана
   по роли: Ysabeau Infant, гуманистический гротеск с одноэтажной
   «a», кириллица 6 субсетов. Семейства Ysabeau (Qwen AI Ru)
   и Ysabeau Office (Flux AI) заняты — это отдельное семейство.
   ============================================================ */
h1, h2, h3, h4 {
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1.03;
	margin: 0 0 .42em;
}
h1 { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5.2rem); }
h2 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.6rem); }
h3 { font-size: clamp(1.22rem, 1.06rem + .7vw, 1.6rem); font-weight: 600; letter-spacing: -.015em; }
h4 { font-size: 1.06rem; font-weight: 600; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.lead { font-size: clamp(1.05rem, .98rem + .4vw, 1.3rem); line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.dim { color: var(--ink-2); }
.dim-2 { color: var(--ink-3); }
.mono { font-family: var(--f-m); font-size: .9em; }

/* ============================================================
   КНОПКИ — с офсайта: радиус 4.8px (не пилюли),
   padding 8px 20.8px 9.6px, высота 36.
   ============================================================ */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px; min-width: 0;
	font-family: var(--f);
	font-size: 1rem; font-weight: 500; line-height: 1.2;
	text-decoration: none;
	padding: 8px 21px 10px;
	border-radius: var(--r);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #2a2a2a; color: var(--paper); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.btn--pink { background: var(--pink); color: var(--ink); }
.btn--pink:hover { background: #ff8ec1; color: var(--ink); }

/* ============================================================
   ПОЛОСА АНОНСА И ШАПКА — обе с офсайта.
   ============================================================ */
.strip {
	background: var(--pink); color: var(--ink);
	height: var(--strip);
	display: flex; align-items: center; justify-content: center;
	font-size: .84rem; letter-spacing: .06em; text-transform: uppercase;
}
.strip a { color: var(--ink); text-decoration: none; }
.strip a:hover { text-decoration: underline; }

.top {
	position: sticky; top: 0; z-index: 30;
	background: var(--paper);
	border-bottom: 1px solid transparent;
	transition: border-color var(--t) var(--ease);
}
.top.set { border-bottom-color: var(--line-2); }
.top__in {
	height: var(--head);
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center; gap: 20px;
}
.logo { grid-column: 1; display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.logo__m { width: 34px; height: 22px; flex: 0 0 auto; }
.logo__w { font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; }
.logo__w i { font-style: normal; color: var(--ink-3); }

.nav { grid-column: 2; display: flex; align-items: center; justify-content: flex-start; gap: 22px; min-width: 0; padding-left: 26px; }
.nav a {
	font-size: .86rem; text-decoration: none; color: var(--ink);
	white-space: nowrap; text-transform: uppercase; letter-spacing: .05em;
	transition: color var(--t) var(--ease);
}
.nav a:hover, .nav a.on { color: var(--pink); }
.top__end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }

.bun {
	display: none; width: 40px; height: 36px; padding: 0;
	background: transparent; border: 1px solid var(--ink); border-radius: var(--r);
	cursor: pointer; align-items: center; justify-content: center;
}
.bun i { display: block; width: 15px; height: 1.6px; background: var(--ink); position: relative; }
.bun i::before, .bun i::after {
	content: ''; position: absolute; left: 0; width: 15px; height: 1.6px; background: var(--ink);
}
.bun i::before { top: -5px; }
.bun i::after { top: 5px; }
.bun.is-open i { background: transparent; }
.bun.is-open i::before { top: 0; transform: rotate(45deg); }
.bun.is-open i::after { top: 0; transform: rotate(-45deg); }

/* Класс состояния — .is-open, не голое .open. */
.sheet {
	position: fixed; inset: calc(var(--strip) + var(--head)) 0 auto 0; z-index: 29;
	background: var(--paper); border-bottom: 1px solid var(--line);
	display: none; padding: 8px 0 18px;
	max-height: calc(100vh - var(--strip) - var(--head)); overflow-y: auto;
}
.sheet.is-open { display: block; }
.sheet a {
	display: block; padding: 12px 2px; text-decoration: none;
	color: var(--ink); border-bottom: 1px solid var(--line-2); font-size: 1rem;
}
.sheet a:last-child { border-bottom: 0; }

/* ============================================================
   ПЕРВЫЙ ЭКРАН — по офсайту: заголовок по центру, подпись, две кнопки.
   ============================================================ */
.hero { padding-block: clamp(56px, 8vw, 128px) clamp(36px, 5vw, 72px); text-align: center; }
.hero h1 { margin-inline: auto; max-width: 16ch; }
.hero .lead { margin: 0 auto 30px; max-width: 62ch; }
.hero__row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ── Первый экран с роликом ────────────────────────────────
   l6.mp4 лежит фоном панели, содержимое — над ним. Ролик не
   ловит указатель (pointer-events: none) и лежит ниже текста
   по z-index, поэтому кнопки кликаются как обычно.

   Ролик — пейзаж: небо светлое, лес внизу тёмный. Чернила
   #0B0B0B над лесом без подложки не читаются, поэтому кадр
   обесцвечен и высветлен, а поверх лежит вуаль цвета полотна,
   к низу плотнее — там как раз лес и кнопки. Плотность
   подобрана замером контраста по серии кадров, а не на глаз.

   Панель — отдельный слой внутри .hero, а не сама секция:
   боковые поля .wide остаются полями страницы, и скруглённый
   край не упирается в край экрана. */
.hero--vid { padding-block: clamp(18px, 2.4vw, 34px) clamp(36px, 5vw, 72px); }
.hero__panel { position: relative; isolation: isolate; border-radius: var(--r-b); overflow: hidden; }
.hero--vid .hero__in { padding: clamp(58px, 8vw, 132px) clamp(18px, 3vw, 52px) clamp(52px, 7vw, 108px); }
.hero__in { position: relative; z-index: 1; }
.hero__bg {
	position: absolute; inset: 0; z-index: 0;
	pointer-events: none; overflow: hidden;
	background: var(--paper);
}
/* Обесцвечивание, подъём яркости и сжатие тонового диапазона —
   три числа из замера. Contrast .66 поднимает тёмный лес и почти
   не трогает небо: без него нижняя треть кадра съедала лид.
   Тон один и тот же у ролика и у неподвижного кадра, иначе
   в щадящем режиме первый экран менял бы вид. */
.hero__still, .hero__vid {
	position: absolute; inset: 0; display: block;
	width: 100%; height: 100%;
	max-width: none; object-fit: cover;
	filter: grayscale(1) brightness(1.32) contrast(.66);
}
.hero__still { background: center / cover no-repeat; }
.hero__veil {
	position: absolute; inset: 0; display: block;
	background: linear-gradient(180deg,
		rgba(231, 232, 235, .69) 0%,
		rgba(231, 232, 235, .75) 42%,
		rgba(231, 232, 235, .87) 100%);
}
/* Лид над роликом темнее обычного --ink-2 (#56585E): потолок
   контраста задаёт цвет текста, и на #56585E замер по 22 кадрам
   давал 3,76:1 при норме 4,5. С #4A4C52 худший кадр — 4,87:1. */
.hero--vid .lead { color: #4A4C52; }

/* ============================================================
   БЛОК «ЧТО НОВОГО» — приём офсайта: левая колонка прилипает,
   правая прокручивает нумерованные пункты.
   ============================================================ */
.newin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.newin__side { align-self: start; }
.newin__list { display: grid; gap: 0; }
.newin__i { padding-block: clamp(22px, 3vw, 40px); border-top: 1px solid var(--line); }
.newin__i:first-child { border-top: 0; }
.newin__h { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: baseline; }
.newin__n { font-family: var(--f-m); font-size: 1rem; color: var(--ink-3); }
.newin__t { margin: 0; }
.newin__p { color: var(--ink-2); margin: 10px 0 0; }
/* Рамка кадра. Фоном идёт неподвижный кадр из inline-стиля (он же
   poster ролика), градиент остаётся запасным полотном, если кадра нет.
   Ролик лежит поверх фона; в щадящем режиме он гасится, и на месте
   остаётся тот же кадр — без мигания и без пустой рамки. */
.newin__media {
	margin-top: 20px; border-radius: var(--r-b); overflow: hidden;
	background-color: #dfe1e6;
	background-image: linear-gradient(140deg, #cfd3da 0%, #e7e8eb 55%, var(--pink-2) 100%);
	background-size: cover; background-position: center; background-repeat: no-repeat;
	aspect-ratio: 16 / 9;
}
.newin__media img, .newin__media video { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   ВРЕЗКА-КАДР НА ВНУТРЕННИХ СТРАНИЦАХ.
   Стоит по центру текстовой колонки. Ширину не растягиваем на всю
   колонку: у роликов 16:9, и во всю ширину 728px врезка забирает
   пол-экрана и разрывает чтение. Форма и радиус — те же, что
   у рамки кадра в блоке «Что нового», чтобы страница не выглядела
   собранной из двух разных тем.
   ============================================================ */
.pmedia {
	margin: 0 auto clamp(26px, 3vw, 40px);
	max-width: 560px;
	border-radius: var(--r-b);
	overflow: hidden;
	background-color: #dfe1e6;
	aspect-ratio: 16 / 9;
}
.pmedia img, .pmedia video { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 620px) {
	.pmedia { max-width: none; }
}

/* ============================================================
   БЛОК «ЗАПУСКАТЬ У СЕБЯ» — строки-полосы с подсветкой.
   Приём офсайта: волосяная линейка между строками, при наведении
   строка подсвечивается целиком.
   ============================================================ */
.own__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; margin-bottom: 34px; }
.own__rows { border-top: 1px solid var(--line); }
.own__r {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
	padding: clamp(20px, 2.4vw, 30px) clamp(12px, 1.6vw, 22px);
	border-bottom: 1px solid var(--line);
	transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.own__r:hover { background: var(--pink-3); }
.own__r:hover .own__t { color: var(--pink); }
.own__t { margin: 0; font-size: clamp(1.2rem, 1rem + .9vw, 1.75rem); font-weight: 600; letter-spacing: -.02em; transition: color var(--t) var(--ease); }
.own__d { color: var(--ink-2); margin: 0; }

/* ============================================================
   СЕКЦИИ И КАРТОЧКИ
   ============================================================ */
.band { padding-block: clamp(44px, 5.5vw, 92px) 0; }
.band > h2 { max-width: 20ch; }
.band__lead { max-width: 60ch; color: var(--ink-2); margin-bottom: 30px; }

.hr { height: 1px; background: var(--line); margin-top: clamp(44px, 5.5vw, 92px); }

.grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.grid > * { min-width: 0; }

.card {
	background: var(--white);
	border-radius: var(--r-b);
	padding: clamp(20px, 2.2vw, 30px);
	transition: box-shadow var(--t) var(--ease);
}
.card:hover { box-shadow: 0 12px 34px rgba(11, 11, 11, .07); }
.card--ink { background: var(--ink); color: var(--paper); }
.card--ink h3 { color: var(--paper); }
.card--ink .dim { color: rgba(231, 232, 235, .72); }
.card--pink { background: var(--pink-3); }

.ticks { list-style: none; margin: 14px 0 0; padding: 0; }
.ticks li { position: relative; padding-left: 22px; margin-bottom: 9px; color: var(--ink-2); font-size: .96rem; }
.ticks li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 10px; height: 2px; background: var(--pink); }
.ticks li:last-child { margin-bottom: 0; }

/* ============================================================
   ТАБЛИЦЫ
   ============================================================ */
.tw { overflow-x: auto; border-radius: var(--r-b); background: var(--white); }
table.data { width: 100%; border-collapse: collapse; min-width: 600px; font-size: .96rem; }
table.data th, table.data td { padding: 14px 20px; text-align: left; vertical-align: top; }
table.data thead th {
	font-size: .76rem; text-transform: uppercase; letter-spacing: .08em;
	color: var(--ink-3); font-weight: 600; white-space: nowrap;
}
table.data tbody tr { border-top: 1px solid var(--line-2); }

/* ============================================================
   ОТЗЫВЫ
   ============================================================ */
.stars { display: inline-flex; gap: 3px; vertical-align: middle; }
.stars i {
	width: 14px; height: 14px; display: block; background: var(--line);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.stars i.on { background: var(--pink); }

.score { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.score__n { font-size: clamp(3rem, 2rem + 3vw, 4.8rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; }

.crit { display: grid; gap: 16px 30px; grid-template-columns: minmax(0, 1fr); }
.crit__t { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.crit__v { font-family: var(--f-m); color: var(--pink); }
.crit__b { height: 4px; background: var(--line-2); overflow: hidden; margin: 6px 0; }
.crit__b i { display: block; height: 100%; background: var(--pink); }
.crit__d { font-size: .9rem; color: var(--ink-2); }

.who { font-weight: 600; }
.role { font-size: .86rem; color: var(--ink-3); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { display: grid; gap: 8px; }
.faq__i { background: var(--white); border-radius: var(--r-b); overflow: hidden; }
.faq__q {
	width: 100%; text-align: left; cursor: pointer;
	background: transparent; border: 0; color: var(--ink);
	font-family: var(--f); font-size: 1.06rem; font-weight: 600;
	padding: 19px 54px 19px 22px; position: relative;
}
.faq__q::after {
	content: ''; position: absolute; right: 24px; top: 50%;
	width: 9px; height: 9px; margin-top: -6px;
	border-right: 2px solid var(--pink); border-bottom: 2px solid var(--pink);
	transform: rotate(45deg); transition: transform var(--t) var(--ease);
}
.faq__i.is-open .faq__q::after { transform: translateY(3px) rotate(-135deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.faq__i.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 22px 19px; color: var(--ink-2); margin: 0; }

/* ============================================================
   ЛЕНТА КАДРОВ — кадры целиком, не поместившиеся за переключателями
   ============================================================ */
.reel { --gap: 16px; display: flex; gap: var(--gap); overflow: hidden; scroll-behavior: smooth; }
.reel__c { flex: 0 0 calc((100% - (var(--cols, 1) - 1) * var(--gap)) / var(--cols, 1)); min-width: 0; }
.reel__c figure { margin: 0; background: var(--white); border-radius: var(--r-b); overflow: hidden; }
.reel__c img { width: 100%; height: auto; object-fit: contain; }
.reel__cap { padding: 12px 16px; font-size: .88rem; color: var(--ink-2); }
.reel-nav { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.reel-nav button {
	width: 38px; height: 38px; border-radius: var(--r);
	background: transparent; border: 1px solid var(--ink); color: var(--ink);
	cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
	transition: background-color var(--t) var(--ease), color var(--t) var(--ease), opacity var(--t) var(--ease);
}
.reel-nav button:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.reel-nav button:disabled { opacity: .35; cursor: default; }
.reel-nav button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.dots { display: inline-flex; gap: 6px; margin-left: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); display: block; }
.dots i.on { background: var(--pink); }

/* ============================================================
   ПОДВАЛ — структура референса 6 (четыре колонки, центрированный
   копирайт, ряд иконок), но БЕЗ карточки: чернильная полоса
   во всю ширину с розовой нитью-разделителем. У соседнего сайта
   сетки тот же референс исполнен карточкой на светлом — здесь
   отпечаток намеренно другой.
   ============================================================ */
.foot { margin-top: clamp(56px, 7vw, 112px); background: var(--ink); color: var(--paper); padding-block: clamp(40px, 5vw, 76px) 30px; }
.foot__cols { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.foot__h { font-weight: 600; font-size: 1rem; margin: 0 0 14px; color: var(--paper); }
.foot__cols a { display: block; color: rgba(231, 232, 235, .72); text-decoration: none; font-size: .94rem; margin-bottom: 9px; }
.foot__cols a:hover { color: var(--pink); }
.foot__cols p { color: rgba(231, 232, 235, .72); font-size: .94rem; }
.foot__mark { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; color: var(--paper); }
.foot__thread { height: 2px; background: linear-gradient(to right, transparent, var(--pink) 22%, var(--pink) 78%, transparent); margin: clamp(26px, 3vw, 44px) 0 22px; }
.foot__legal { text-align: center; font-size: .86rem; color: rgba(231, 232, 235, .58); margin: 0 0 16px; }
.foot__ico { display: flex; justify-content: center; gap: 12px; }
.foot__ico a {
	width: 38px; height: 38px; border-radius: var(--r); margin: 0;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(231, 232, 235, .24); color: rgba(231, 232, 235, .8);
	transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.foot__ico a:hover { border-color: var(--pink); color: var(--pink); }
.foot__ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* ============================================================
   ВСПЛЫВАЮЩАЯ АНИМАЦИЯ — приём офсайта: блок въезжает снизу
   и одновременно наводится на резкость. Совпадение с ChatGPT
   («всплытие с блюром») здесь вынужденное: владелец потребовал
   сохранить анимацию офсайта, а она устроена именно так.
   Скрытое состояние висит только на .js — без скрипта всё видно.
   ============================================================ */
.js .up { opacity: 0; transform: translateY(26px); filter: blur(7px); }
.js .up.in {
	opacity: 1; transform: none; filter: none;
	transition: opacity .55s var(--ease), transform .6s var(--ease), filter .5s var(--ease);
	transition-delay: var(--d, 0ms);
}

/* ============================================================
   АДАПТИВ. Лестница своя: 1520 / 1300 / 1120 / 960 / 780 / 600 / 430
   ============================================================ */
@media (min-width: 961px) {
	.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.crit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.foot__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	/* Левая колонка прилипает, правая прокручивается — приём офсайта. */
	.newin { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
	.newin__side { position: sticky; top: calc(var(--head) + 28px); }

	/* ── Наслаивание пунктов ────────────────────────────────
	   Каждый пункт прилипает под шапкой, следующий останавливается
	   ровно на высоту заголовочной строки ниже — и наезжает на
	   предыдущий, закрывая его текст и кадр. Наружу от накрытого
	   пункта торчит его собственная строка «номер + заголовок»,
	   так что по мере прокрутки сверху набирается список уже
	   прочитанных пунктов, а внизу открыт текущий.

	   Ступенька --nstep не константа: её считает scripts.js по
	   живой высоте .newin__h, иначе при другом размере шрифта
	   заголовок накрытого пункта обрезался бы посередине.
	   Значения по умолчанию заданы здесь — без JS стопка тоже
	   собирается, скрипт лишь уточняет два числа.

	   Запас снизу — та прокрутка, за которую стопка успевает
	   сложиться: без него последний пункт накрывает предыдущий
	   в тот момент, когда блок уже уезжает из кадра. */
	.newin__list {
		--nstick: calc(var(--head) + 28px);
		--nstep: 72px;
		padding-bottom: max(56px, calc(var(--nstep) * 2));
	}
	.newin__i {
		position: sticky;
		top: calc(var(--nstick) + var(--ni, 0) * var(--nstep));
		background: var(--paper);
	}
	.newin__i:nth-child(1) { --ni: 0; z-index: 1; }
	.newin__i:nth-child(2) { --ni: 1; z-index: 2; }
	.newin__i:nth-child(3) { --ni: 2; z-index: 3; }
	.newin__i:nth-child(4) { --ni: 3; z-index: 4; }
	.newin__i:nth-child(5) { --ni: 4; z-index: 5; }
	.newin__i:nth-child(6) { --ni: 5; z-index: 6; }

	/* Пункт выше свободного окна прилип бы обрезанным: верх виден,
	   низ ушёл за край и никогда не покажется. Класс ставит скрипт
	   по замеру — тогда пункты просто идут друг за другом. */
	.newin__list--flat .newin__i { position: static; }

	.own__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
	.own__r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: baseline; }
}

@media (min-width: 601px) and (max-width: 960px) {
	.grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1520px) { :root { --pad: 32px; } }
@media (max-width: 1300px) { .nav { gap: 15px; } .nav a { font-size: .8rem; } }

/* Порог бургера посчитан: логотип ~140 + две кнопки ~250 + гэпы 40 +
   поля 64 = 494px; девять пунктов при гэпе 15px занимают ~640px,
   плюс зазор 8px с каждой стороны — меню перестаёт помещаться
   около 1150px. Изменится число пунктов — пересчитать заново. */
@media (max-width: 1150px) {
	.nav { display: none; }
	.bun { display: inline-flex; }
}

@media (max-width: 960px) { :root { --pad: 24px; } .newin__side { position: static; } }
@media (max-width: 780px) { .hero { text-align: left; } .hero h1 { margin-inline: 0; } .hero .lead { margin-inline: 0; } .hero__row { justify-content: flex-start; } }
@media (max-width: 600px) {
	body { font-size: 16px; }
	:root { --pad: 18px; }
	.hero__row .btn { width: 100%; }
	.strip { font-size: .74rem; letter-spacing: .04em; }
}

@media (max-width: 600px) {
	.tw { overflow-x: visible; background: none; }
	table.data { min-width: 0; }
	table.data thead {
		position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}
	table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
	table.data tr { background: var(--white); border-radius: var(--r-b); margin-bottom: 12px; border-top: 0; padding: 6px 0; }
	table.data tr:last-child { margin-bottom: 0; }
	table.data td { padding: 9px 20px 9px 44%; position: relative; }
	table.data td::before {
		content: attr(data-label); position: absolute; left: 20px; top: 9px; width: 38%;
		font-size: .78rem; color: var(--ink-3); font-weight: 600;
	}
}

@media (max-width: 430px) { :root { --pad: 14px; } .top__in { gap: 10px; } .logo__w { display: none; } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.js .up { opacity: 1; transform: none; filter: none; }
	.newin__side { position: static; }
	/* Стопка не собирается: пункты идут друг за другом, все видны сразу.
	   !important — правила стопки объявлены ниже по файлу. */
	.newin__i { position: static !important; }
	/* Ролики не проигрываются: и в рамке кадра, и на первом экране
	   остаётся неподвижный кадр, который лежит фоном под ними. */
	.newin__media video, .hero__vid, .pmedia video { display: none; }
	/* У врезки ролик погашен, поэтому кадр показываем постером-фоном:
	   без этого на её месте осталась бы пустая серая плита. */
	.pmedia { background-size: cover; background-position: center; }
}