/*
Theme Name: Seedance Ru
Description: Тема сайта seedanceai.help. Язык дизайна — «раскадровка»: светлое полотно, блоки лесенкой, линейки-разделители с подписью, тёмная карточка подвала.
Version: 1.0.4
Text Domain: seedance-ru
*/

/* ============================================================
   ТОКЕНЫ.
   Палитра, контейнер, форма кнопок и радиус блока сняты кодом
   из бандла офсайта main.9dc4f7fd.css (seed.bytedance.com) 26.08.2026.
   Полотно взято светлым осознанно: тот же бандл даёт и светлые токены
   (#f8f8f8, #fcfcfd, #f7f8fd), а тёмную сторону офсайта уже заняли
   два соседних сайта сетки — seedance-ai.info (#171719) и
   seedream.help (#18191B). Расхождение сделано по самой сильной оси.
   ============================================================ */
:root {
	--paper:    #F8F8F8;
	--white:    #FFFFFF;
	--ink:      #151515;
	--ink-2:    #62636C;
	--ink-3:    #8B8D98;
	--line:     rgba(21, 21, 21, .12);
	--line-2:   rgba(21, 21, 21, .07);

	--blue:     #3C56F4;   /* самый частый цвет бандла — 60 вхождений */
	--blue-ink: #2B41CC;
	--sky:      #90B9E5;   /* второй тон офсайта */
	--dark:     #1E1F24;   /* подвал-карточка */

	/* Контейнер офсайта: 1600px с полями 120px, центруется его же формулой.
	   На узких экранах поля сжимаются, иначе от контента ничего не остаётся. */
	--gut:      120px;
	--half:     800px;     /* половина 1600 */

	--r:        20px;      /* доминирующий радиус блока — 32 вхождения */
	--r-sm:     8px;
	--r-lg:     32px;
	--r-pil:    300px;     /* кнопки офсайта */

	--f-d:      'Poiret One', Georgia, serif;
	--f-t:      'Noto Serif', Georgia, 'Times New Roman', serif;

	/* Перелёт — этим всплывающая анимация отличается от занятых:
	   у ChatGPT всплытие с блюром, у Gemini пословный выезд. */
	--pop:      cubic-bezier(.34, 1.56, .64, 1);
	--ease:     cubic-bezier(.22, 1, .36, 1);
	--t:        .22s;
}

*, *::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-t);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

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

/* Контейнер — формула офсайта. Поля не padding, а margin: так блок
   внутри может выйти на всю ширину окна, не ломая ритм полей. */
.hold { margin-inline: max(var(--gut), 50vw - var(--half)); }
.hold--text { max-width: 860px; }

.skip {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--ink); color: var(--white); padding: 10px 18px; border-radius: var(--r-pil);
}
.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;
}

/* ============================================================
   ТИПОГРАФИКА.
   Дисплей — Poiret One: тонкий геометрический, держит гигантский
   логотип-заголовок с референса 5. Набор — Noto Serif.
   Poiret One существует только в 400, поэтому ниже h2 не используется.
   ============================================================ */
h1, h2 {
	font-family: var(--f-d);
	font-weight: 400;
	letter-spacing: -.01em;
	line-height: 1.02;
	margin: 0 0 .4em;
}
h1 { font-size: clamp(2.8rem, 1.6rem + 5vw, 6rem); }
h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.6rem); }

h3, h4 {
	font-family: var(--f-t);
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.2;
	margin: 0 0 .5em;
}
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
h4 { font-size: 1.06rem; }

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

.lead {
	font-size: clamp(1.05rem, .98rem + .38vw, 1.26rem);
	line-height: 1.55;
	color: var(--ink-2);
	max-width: 62ch;
}
.dim { color: var(--ink-2); }
.dim-2 { color: var(--ink-3); }

/* Заголовок в две краски — приём с референса 5 */
.soft { color: var(--ink-3); }

/* ============================================================
   КНОПКИ — пилюли офсайта: radius 300px, padding 12px 24px,
   заливка #3C56F4.
   ============================================================ */
.pil {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px; min-width: 0;
	font-family: var(--f-t);
	font-size: .96rem; font-weight: 600; line-height: 1.2;
	text-decoration: none;
	padding: 12px 24px;
	border-radius: var(--r-pil);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.pil--fill { background: var(--blue); color: var(--white); }
.pil--fill:hover { background: var(--blue-ink); color: var(--white); }
.pil--line { background: transparent; color: var(--ink); border-color: var(--line); }
.pil--line:hover { border-color: var(--ink); color: var(--ink); }
.pil--ink { background: var(--ink); color: var(--white); }
.pil--ink:hover { background: #000; color: var(--white); }
.pil--sm { padding: 9px 18px; font-size: .88rem; }

/* ============================================================
   ШАПКА — светлая, наливается фоном по скроллу.
   ============================================================ */
.bar {
	position: fixed; inset: 0 0 auto 0; z-index: 30;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.bar.set {
	background: rgba(248, 248, 248, .88);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom-color: var(--line-2);
}
.bar__in {
	height: 78px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 20px;
}
.mark { grid-column: 1; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.mark__s { width: 26px; height: 26px; flex: 0 0 auto; }
.mark__w { font-family: var(--f-d); font-size: 1.6rem; line-height: 1; letter-spacing: .01em; }
.mark__w i { font-style: normal; color: var(--blue); }

.nav { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 18px; min-width: 0; }
.nav a {
	font-size: .9rem; text-decoration: none; color: var(--ink-2);
	white-space: nowrap; transition: color var(--t) var(--ease);
}
.nav a:hover, .nav a.on { color: var(--ink); }
.bar__end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }

.bun {
	display: none; width: 42px; height: 42px; padding: 0;
	background: transparent; border: 1px solid var(--line); border-radius: var(--r-pil);
	cursor: pointer; align-items: center; justify-content: center;
}
.bun i { display: block; width: 16px; height: 1.6px; background: var(--ink); position: relative; }
.bun i::before, .bun i::after {
	content: ''; position: absolute; left: 0; width: 16px; 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: 78px 0 auto 0; z-index: 29;
	background: var(--paper); border-bottom: 1px solid var(--line-2);
	display: none; padding: 8px 0 20px;
	max-height: calc(100vh - 78px); overflow-y: auto;
}
.sheet.is-open { display: block; }
.sheet a {
	display: block; padding: 13px 2px; text-decoration: none;
	color: var(--ink); border-bottom: 1px solid var(--line-2); font-size: 1rem;
}
.sheet a:last-child { border-bottom: 0; }

main { padding-top: 44px; }

/* ============================================================
   ПЕРВЫЙ ЭКРАН — референс 5: кадр во всю ширину, гигантское имя
   поверх его нижней кромки, абзац в правом верхнем углу.
   ============================================================ */
.top { position: relative; padding-top: clamp(20px, 3vw, 44px); }
.top__frame {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: linear-gradient(155deg, #20315e 0%, #3C56F4 45%, #90B9E5 100%);
	min-height: clamp(340px, 46vw, 620px);
	display: flex; align-items: flex-end;
	padding: clamp(20px, 3vw, 48px);
}
.top__frame img, .top__frame video {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

.top__name {
	position: relative; z-index: 2;
	font-family: var(--f-d);
	font-size: clamp(3.2rem, 1rem + 9vw, 11rem);
	line-height: .9; letter-spacing: .01em;
	color: var(--white);
	margin: 0;
}
.top__said {
	position: absolute; right: clamp(20px, 3vw, 48px); top: clamp(20px, 3vw, 44px);
	z-index: 2; max-width: 42ch;
	color: rgba(255, 255, 255, .92); font-size: clamp(.95rem, .9rem + .3vw, 1.12rem);
}
.top__row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Полоса чисел под первым экраном — тоже с референса 5 */
.figs {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px;
	padding-block: clamp(28px, 4vw, 52px);
}
.fig { display: block; }
.fig b {
	display: block; font-family: var(--f-d); font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem);
	line-height: 1; letter-spacing: .01em;
}
.fig i { display: block; font-style: normal; font-size: .88rem; color: var(--ink-3); margin-top: 8px; }

/* ============================================================
   ЛИНЕЙКА-РАЗДЕЛИТЕЛЬ с подписью посередине — референс 5.
   Это разделитель между секциями, а не надстрочная подпись
   над заголовком: заголовку он не принадлежит.
   ============================================================ */
.rule { display: flex; align-items: center; gap: 18px; margin-block: clamp(40px, 5vw, 76px); }
.rule i { display: block; height: 1px; background: var(--line); flex: 1 1 auto; }
/* Стиля для подписи внутри линейки здесь нет намеренно: подпись капсом
   перед заголовком — надстрочный лейбл, он запрещён (стоп-лист, С4).
   Если снова захочется «подписать секцию» — факт уходит в заголовок. */

/* ============================================================
   СЕКЦИИ И ЛЕСЕНКА.
   Блоки разной ширины И с вертикальным смещением — асимметрия
   с референса 5.
   ============================================================ */
.band { padding-block: clamp(16px, 2vw, 28px) 0; }
.band > h2 { max-width: 20ch; }
.band__lead { max-width: 62ch; color: var(--ink-2); margin-bottom: 30px; }

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

.card {
	background: var(--white);
	border-radius: var(--r);
	padding: clamp(20px, 2.2vw, 32px);
	transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.card:hover { box-shadow: 0 14px 40px rgba(21, 21, 21, .07); }
.card--tint { background: linear-gradient(160deg, rgba(60, 86, 244, .1), rgba(144, 185, 229, .12)); }
.card--ink { background: var(--dark); color: var(--white); }
.card--ink .dim, .card--ink .dim-2 { color: rgba(255, 255, 255, .72); }
.card--ink h3 { color: var(--white); }
.card--bare { background: none; padding-inline: 0; }

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

/* ============================================================
   ТАБЛИЦЫ
   ============================================================ */
.tw { overflow-x: auto; border-radius: var(--r); background: var(--white); }
table.data { width: 100%; border-collapse: collapse; min-width: 620px; font-size: .95rem; }
table.data th, table.data td { padding: 15px 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(--blue); }

.score { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 28px; }
.score__n { font-family: var(--f-d); font-size: clamp(3rem, 2rem + 3vw, 5rem); line-height: 1; }

.crit { display: grid; gap: 16px 32px; grid-template-columns: minmax(0, 1fr); }
.crit__t { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.crit__n { font-weight: 600; }
.crit__v { color: var(--blue); font-weight: 600; font-variant-numeric: tabular-nums; }
.crit__b { height: 4px; border-radius: var(--r-pil); background: var(--line-2); overflow: hidden; margin: 6px 0; }
.crit__b i { display: block; height: 100%; background: var(--blue); }
.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: 10px; }
.faq__i { background: var(--white); border-radius: var(--r); overflow: hidden; }
.faq__q {
	width: 100%; text-align: left; cursor: pointer;
	background: transparent; border: 0; color: var(--ink);
	font-family: var(--f-t); font-size: 1.04rem; font-weight: 600;
	padding: 20px 56px 20px 24px; position: relative;
}
.faq__q::after {
	content: ''; position: absolute; right: 26px; top: 50%;
	width: 9px; height: 9px; margin-top: -6px;
	border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
	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 24px 20px; 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); 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: 40px; height: 40px; border-radius: var(--r-pil);
	background: var(--white); border: 1px solid var(--line); color: var(--ink);
	cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
	transition: border-color var(--t) var(--ease), color var(--t) var(--ease), opacity var(--t) var(--ease);
}
.reel-nav button:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.reel-nav button:disabled { opacity: .4; cursor: default; }
.reel-nav button svg { width: 18px; height: 18px; 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(--blue); }

/* ============================================================
   ВРЕЗКА-КАДР НА ВНУТРЕННИХ СТРАНИЦАХ.
   Кадр стоит по центру полосы — это прямое требование владельца,
   поэтому центровка задана и полями (margin-inline: auto),
   и выравниванием содержимого, а не одним из двух.
   Кадр показывается ЦЕЛИКОМ: обрезки в этой теме нет ни в ленте
   на главной, ни здесь. Отсюда contain и высота по кадру,
   а не 16/9 с кропом.
   Форма снята с карточки ленты — белая плита с радиусом 20px:
   врезка обязана читаться как часть этой темы, а не как деталь,
   принесённая из соседней.
   ============================================================ */
.pshot {
	margin: 0 auto;
    max-width: 1000px;
	background-color: var(--white);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: var(--r);
	overflow: hidden;
	text-align: center;
}
.pshot img { width: 100%; height: auto; }
.pshot video { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 640px) {
	.pshot { margin-inline: 0; max-width: none; }
}

/* ============================================================
   ПОДВАЛ — референс 6: тёмная карточка на четыре колонки,
   центрированный копирайт и ряд иконок под ним.
   ============================================================ */
.foot { padding-block: clamp(40px, 5vw, 80px); }
.foot__card {
	background: var(--dark); color: var(--white);
	border-radius: var(--r-lg);
	padding: clamp(28px, 4vw, 60px);
}
.foot__cols { display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr); }
.foot__h { font-family: var(--f-t); font-weight: 600; font-size: 1.05rem; margin: 0 0 14px; }
.foot__cols a, .foot__cols p { color: rgba(255, 255, 255, .74); text-decoration: none; font-size: .94rem; }
.foot__cols a { display: block; margin-bottom: 9px; }
.foot__cols a:hover { color: var(--white); }
.foot__mark { font-family: var(--f-d); font-size: 2rem; line-height: 1; margin: 0 0 12px; color: var(--white); }
.foot__rule { height: 1px; background: rgba(255, 255, 255, .14); margin: clamp(24px, 3vw, 40px) 0 20px; }
.foot__legal { text-align: center; font-size: .86rem; color: rgba(255, 255, 255, .6); margin: 0 0 16px; }
.foot__ico { display: flex; justify-content: center; gap: 14px; }
.foot__ico a {
	width: 38px; height: 38px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .8);
	transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
	margin: 0;
}
.foot__ico a:hover { border-color: var(--white); color: var(--white); }
.foot__ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* ============================================================
   ВСПЛЫВАЮЩАЯ АНИМАЦИЯ.
   Блок выскакивает снизу с лёгким перелётом — этим она отличается
   от занятых в сетке всплытий (с блюром, пословного выезда,
   маскирующего ревила, построчного подъёма).
   Скрытое состояние висит только на .js: без скрипта всё видно сразу.
   ============================================================ */
.js .pop { opacity: 0; transform: translateY(30px) scale(.965); }
.js .pop.in {
	opacity: 1; transform: none;
	transition: opacity .5s var(--ease), transform .62s var(--pop);
	transition-delay: var(--d, 0ms);

}

/* ============================================================
   АДАПТИВ. Лестница своя: 1440 / 1180 / 980 / 820 / 640 / 520 / 400
   ============================================================ */
@media (min-width: 981px) {
	.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.crit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.foot__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	/* Лесенка: ширины разные И низы не выровнены. */
	.cards--stair { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; }
	.st-a { grid-column: span 7; }
	.st-b { grid-column: span 5; margin-top: 46px; }
	.st-c { grid-column: span 4; }
	.st-d { grid-column: span 8; margin-top: 34px; }
	.st-e { grid-column: span 6; }
	.st-f { grid-column: span 6; margin-top: 52px; }
}

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

@media (max-width: 1440px) { :root { --gut: 80px; } }
@media (max-width: 1180px) { :root { --gut: 56px; } }

/* Сжатие меню шапки.
   Двенадцать пунктов при gap 18px / .9rem занимают 887px. Средняя колонка
   сетки отдаёт (ширина окна − поля − знак − реф-кнопка − два гэпа сетки):
       до 1440px   have = w − 478   (--gut 80)
       с 1441px    have = w − 558   (--gut 120: скачок поля срезает колонку)
   То есть меню при исходных значениях перестаёт помещаться уже с 1444px,
   а не с 1350px — провал 1441–1444 даёт именно скачок --gut, и дальше вниз
   не помещается всё до самого бургера. Прежнее правило висело на 1180px,
   куда меню не доживает (бургер с 1260px), и потому не работало никогда.
   Две ступени вместо одной, чтобы не мельчить кегль на ходовых 1366 и 1440:
       1261–1340  gap 10 / .84rem  →  need ~753, худший have 783 (на 1261)
       1341–1500  gap 14 / .88rem  →  need ~827, худший have 863 (на 1341)
       от 1501    gap 18 / .9rem   →  need  887, худший have 943 (на 1501)
   Запас need↔have в худшей точке каждой ступени — не меньше 30px.
   Изменится число или длина пунктов — арифметику пересчитать замером
   (hdr-cdp.ps1), а не на глаз. */
@media (max-width: 1500px) { .nav { gap: 14px; } .nav a { font-size: .88rem; } }
@media (max-width: 1340px) { .nav { gap: 10px; } .nav a { font-size: .84rem; } }

/* Порог бургера посчитан: знак ~150 + кнопка ~180 + два гэпа 40 +
   поля 112 = 482px; двенадцать пунктов при гэпе 13px занимают ~760px,
   плюс зазор 8px с каждой стороны — меню перестаёт помещаться
   около 1258px. Изменится число пунктов — арифметику пересчитать. */
@media (max-width: 1260px) {
	.nav { display: none; }
	.bun { display: inline-flex; }
}

@media (max-width: 980px) { :root { --gut: 40px; } }
@media (max-width: 820px) { :root { --gut: 28px; } .top__said { position: static; max-width: none; margin-bottom: 18px; } .top__frame { flex-direction: column; align-items: flex-start; justify-content: flex-end; min-height: 550px;} }
@media (max-width: 640px) {
	body { font-size: 16px; }
	:root { --gut: 20px; }
	.top__row .pil { width: 100%; }
}

@media (max-width: 620px) {
	.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); margin-bottom: 12px; border-top: 0; padding: 6px 0; }
	table.data tr:last-child { margin-bottom: 0; }
	table.data td { padding: 9px 20px 9px 46%; position: relative; }
	table.data td::before {
		content: attr(data-label); position: absolute; left: 20px; top: 9px; width: 40%;
		font-size: .78rem; color: var(--ink-3); font-weight: 600;
	}
}

@media (max-width: 400px) { :root { --gut: 16px; } .mark__w { font-size: 1.4rem; } .bar__in { gap: 10px; } }

@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 .pop { opacity: 1; transform: none; }

	/* Ролик во врезке гасим, но плиту не оставляем пустой: постер
	   лежит фоном самой рамки, и на месте видео остаётся тот же
	   неподвижный кадр. Пропорции держит inline-стиль рамки. */
	.pshot video { display: none; }
}