/*
 * Продукты — Figma 657:6066, y 982–2318 (паттерн baserd/products): три строки feature-block по
 * 445.33 (1336 / 3). Строка — три колонки: название, картинка, описание. В макете колонки по 427,
 * вместе 1281 при рамке 1280; здесь последняя 426, а текст в ней той же ширины 331 (поля 48 и 47).
 * Уже 1280 колонки сжимаются в той же пропорции; телефон и планшет — front#808.
 *
 * Селекторы раскладки весят (0,2,0), как в hero.css: иначе в редакторе их перебивают правила
 * самого редактора и отступы потока.
 */

.baserd-products {
	overflow-x: clip;
}

.baserd-products .baserd-products__row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 427fr) minmax(0, 427fr) minmax(0, 426fr);
	min-height: 445.33px;
}

/*
 * Линия снизу: 1px #F0F0F0 10% по центру границы строк, места не занимает — слот и колонки
 * остаются высотой 445.33. Токен contrast-10 (белый 10%) отличается от макета на 1.5 из 255.
 * Под последней строкой линии нет: у 657:6155 обводки нет. ::before, а не ::after: ::after блока
 * занят рамкой выделения в редакторе. «Последняя» — строка, за которой нет строки: в редакторе за ней
 * встаёт кнопка добавления блока.
 */
.baserd-products__row::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: -0.5px;
	left: 0;
	height: 1px;
	background-color: var(--wp--preset--color--contrast-10);
	pointer-events: none;
}

.baserd-products__row:not(:has(+ .baserd-products__row))::before {
	content: none;
}

/* 657:6068: поля 48, надзаголовок сверху, ссылка pricing снизу, название посередине. */
.baserd-products .baserd-products__head {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--48);
}

/* 657:6072: product · 01 — между словом, квадратом 2×2 и номером по 4. */
.baserd-products .baserd-products__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
}

.baserd-products__eyebrow > p {
	margin: 0;
}

/* Номер — Space Mono 700 14/20, цвет надзаголовка. */
.baserd-products .baserd-products__number {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--size-14);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--size-14);
	color: var(--wp--preset--color--primary);
}

.baserd-products__number::before {
	content: "";
	width: 2px;
	height: 2px;
	background-color: currentColor;
}

/* 657:6076: 40/48 500 белый, как h2 темы. */
.baserd-products .baserd-products__title {
	margin: 0;
	color: var(--wp--preset--color--contrast);
}

/*
 * 657:6077: ссылка pricing — знак 11.2×16 и через 8 px текст надзаголовка. В макете у неё
 * прозрачность 0 во всех трёх строках: видна при наведении на строку и при фокусе с клавиатуры,
 * на сенсорных экранах видна всегда. В редакторе видна всегда, иначе её не найти.
 * Состояния — цвета текста кнопки Primary из UI kit: наведение #EC7254, нажатие #CD3B17.
 */
.baserd-products .baserd-products__pricing {
	margin: 0;
	opacity: 0;
	transition: opacity 0.2s;
}

.is-style-eyebrow.baserd-products__pricing::before {
	content: none;
}

.baserd-products__row:is(:hover, :focus-within) .baserd-products__pricing,
.baserd-products .baserd-products__pricing.block-editor-block-list__block {
	opacity: 1;
}

@media (hover: none) {
	.baserd-products .baserd-products__row .baserd-products__pricing {
		opacity: 1;
	}
}

/* По верху строки, а не по базовой линии: иначе строчный flex-элемент добавляет строке 3 px снизу. */
.baserd-products__pricing a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	vertical-align: top;
}

.baserd-products__pricing a::before {
	content: "";
	flex: none;
	width: 11.2px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("../icons/pricing.svg") center / 11.2px 16px no-repeat;
	mask: url("../icons/pricing.svg") center / 11.2px 16px no-repeat;
}

/* Под палец ссылка 44 в высоту — front#808. Поля сверху и снизу съедает отрицательный отступ, и строка не растёт. */
@media (pointer: coarse) {
	.baserd-products__pricing a {
		margin: -12px 0;
		padding: 12px 0;
	}
}

.baserd-products__pricing a:hover {
	color: var(--wp--custom--button--hover);
}

.baserd-products__pricing a:active {
	color: var(--wp--custom--button--pressed);
}

/*
 * 657:6083: слот 427 с заливкой белый 7% и свечением — круг 286 secondary 10% с размытием
 * 166.44 в Figma (в CSS радиус вдвое меньше, 83.2), по центру; всё, что вышло за слот, обрезано.
 */
.baserd-products .baserd-products__slot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 7%, transparent);
}

.baserd-products__slot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 286px;
	height: 286px;
	margin: -143px 0 0 -143px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--secondary);
	opacity: 0.1;
	filter: blur(83.2px);
	pointer-events: none;
}

/*
 * Картинки (657:6085, 657:6127, 657:6173) по центру слота. В макете серверы выше центра на 2.8 px,
 * домены ниже на 1.2: это поле «margin-top» у блока картинки в паттерне (−5.62 и 2.33, сдвиг вдвое меньше поля).
 */
.baserd-products .baserd-products__art {
	position: relative;
	margin: 0;
}

.baserd-products__art img {
	display: block;
}

/*
 * Трёхслойная анимированная иллюстрация Cloud VPS и Dedicated Servers (front#1265, Figma Animation
 * 942:*, круг 5 по ревью — полное раскрытие стопки у Cloud VPS, front#1286): раскадровка — разборка
 * стопки по слоям (кубики/сеть-облако/серверные стойки) с подсветкой активного и реальным разносом
 * слоёв по вертикали, а не лёгким «парением» на месте. Каждый .is-layer-* — это пара картинок одного
 * 617×573 канваса: .is-active (цветная) и .is-dim (серый экспорт Figma 942:8126/8128/8130, тот же
 * imageRef с фильтром saturation -1) сложены друг на друга; «подсветка» — это анимация opacity
 * только на .is-active (0↔1), серая снизу всегда видна как неактивное состояние. Только transform
 * и opacity — композитные свойства, раскладку не трогают и CLS не дают.
 *
 * Раскадровка Cloud VPS (связи прототипа Figma 89N8cHkKmH1GLWxZXW0r0T, страница Animation; подпись
 * кадров — «01 Cloud VPS» на 2408/2928/3449/3970/4491/5011/5531; кадр покоя 942:2408 в поток не
 * входит — это начало и конец каждого цикла, все три слоя собраны и цветные):
 *   Cloud VPS: 2408 → 3449 (раскрыт) → 3970 → 4491 → 5011 → 5531 → 2408.
 * У Dedicated Servers раскрытия в макете нет: её собственные кадры подписаны «02 Dedicated Servers»
 * только на 6050 и 6573 (ниже, у своих keyframes) — Flow 2 в прототипе ведёт от Cloud VPS к
 * следующей карточке, не к раскадровке Dedicated, а 2928 — тоже кадр Cloud VPS (раскрытый, как
 * 3449). Поэтому Dedicated остаётся двухкадровым циклом 6050→6573 без верхнего слоя, а разнос
 * по вертикали — только у Cloud VPS. Перевод сдвига Figma (Δy в px Figma) в translateY слоя (% от
 * высоты слоя): покой% + Δy_Figma × 0.3133 — канвас слоя 617×573 соответствует 344×319 px Figma,
 * и 1 px Figma = 100% / 319 ≈ 0.3133% высоты слоя.
 * Покой (2408): верх 12.2%, середина 6.1%, низ 0% — тот же запас по альфе, что был (круг 4): у
 * .is-layer-bottom контент доходит до нижнего края канваса (нулевой запас), у .is-layer-mid запас
 * 14% высоты, у .is-layer-top — 24%; раскрытые проценты Cloud VPS ниже используют оба знака (слой
 * уходит и выше, и ниже покоя), а не только один, как раньше, потому что так раскрывается стопка в
 * самом прототипе.
 *
 * Слот обрезает (overflow: hidden, .baserd-products__slot выше), и Cloud VPS в раскрытом виде в
 * него не помещается на части брейкпоинтов: по размаху её кадров стопка выходит за свой бокс
 * примерно на 9.1% высоты вверх и 25.9% вниз (суммарно 1.35 высоты). Решение («камера отъезжает»,
 * не уменьшение стопки в покое — макет 851:29679 держит её в полный размер и по центру, как
 * сейчас): на время движения (все плато, кроме покоя) сам контейнер .baserd-products__stack--live
 * получает анимацию transform: translateY(var(--baserd-stack-camera-shift))
 * scale(var(--baserd-stack-camera-scale)) — значения через custom properties, по умолчанию сдвиг 0
 * и масштаб 1 (на десктопе слоту хватает места без камеры — запас около 5–6 px на 1024/1440), на
 * 1023 и уже — сдвиг, а на телефоне (767 и уже) вдобавок масштаб меньше единицы. У Dedicated
 * размаха нет (она не раскрывается), поэтому камера на неё не навешена — только is-sequence-cloud-vps.
 *
 * CSS применяет translateY() к точке в исходных (немасштабированных) единицах элемента, а затем
 * scale() — ко всему уже сдвинутому результату (проверено на отдельном элементе: translateY(50%)
 * scale(0.5) даёт не центр на 50% высоты, а на 75% — сдвиг «впечатан» в координаты до масштаба).
 * Поэтому сдвиг, который ровняет зазор сверху и снизу, — фиксированные −8.4% высоты стопки на
 * любом масштабе (не «−8.4% × s», как может показаться из попытки угадать направление: вывод —
 * середина между верхней и нижней границей допустимого сдвига при данном slot_h не зависит от s,
 * потому что это просто середина несимметричного размаха 9.1%/25.9%, −(25.9%−9.1%)/2 = −8.4%).
 * Формула масштаба: s ≤ высота_слота / (1.35 × высота_стопки), с запасом ~3% на неровности между
 * кадрами Cloud VPS. Три ступени на телефон (до 364, до 390, до 767 — на 768 и шире запаса хватает
 * при одном только сдвиге) посчитаны и проверены Playwright-скриншотом и getBoundingClientRect на
 * 320/360/375/390/430/600/768/1024/1440 (не только элемента — важен край слота, а не высота стопки).
 */
.baserd-products .baserd-products__stack {
	position: relative;
	width: min(308px, 100%);
	aspect-ratio: 617 / 573;
	margin: 0;
	--baserd-stack-camera-shift: 0%;
	--baserd-stack-camera-scale: 1;
}

/*
 * «Камера» двигается только пока стопка раскрыта (--live) и не на покойных плато (0–14% и 100% у
 * обеих раскадровок, где transform: none — иначе лёгкая дрожь масштаба была бы заметна на кадре,
 * который выглядит одинаково что с камерой, что без неё). Свои keyframes на каждую раскадровку: у
 * них разные длительности и плато, но доли (%) совпадают с keyframes слоёв той же раскадровки ниже.
 */
.baserd-products .baserd-products__stack--live.is-sequence-cloud-vps {
	animation: baserd-stack-camera-cloud-vps 9s ease-in-out infinite;
}

@keyframes baserd-stack-camera-cloud-vps {
	0%, 14% {
		transform: none;
	}
	20%, 92% {
		transform: translateY(var(--baserd-stack-camera-shift)) scale(var(--baserd-stack-camera-scale));
	}
	100% {
		transform: none;
	}
}

.baserd-products .baserd-products__layer {
	position: absolute;
	inset: 0;
	margin: 0;
	transform: translateY(0);
}

.baserd-products .baserd-products__layer-img {
	position: absolute;
	inset: 0;
	margin: 0;
}

.baserd-products__layer-img img {
	display: block;
	width: 100%;
	height: 100%;
}

/* The grey twin sits under the colored one; fading .is-active out reveals it underneath. */
.baserd-products .baserd-products__layer-img.is-dim {
	z-index: 1;
}

.baserd-products .baserd-products__layer-img.is-active {
	z-index: 2;
	opacity: 1;
}

/*
 * Кадр покоя собранной стопки (Figma 942:2408, все три слоя цветные) — показывается до появления
 * карточки в окне (без --live) и при prefers-reduced-motion: reduce в любом состоянии стопки,
 * включая --live (см. правила внутри media-блока ниже, которые возвращают эти же значения).
 */
.baserd-products .is-layer-top {
	transform: translateY(12.2%);
	z-index: 3;
}

.baserd-products .is-layer-mid {
	transform: translateY(6.1%);
	z-index: 2;
}

.baserd-products .is-layer-bottom {
	transform: translateY(0%);
	z-index: 1;
}

/*
 * Dedicated Servers' end frame (942:6573) is the one spot in the storyboard where the base renders
 * above the middle layer (Figma's own child order has "4" — the base — painted last over "2"/"2_1"
 * — the middle; the middle group is also faded out to opacity 0 on that plateau, so no edge of it
 * shows over the back walls of the base). z-index
 * cannot be keyframed with a numeric tween, so it is stepped at the same 58% mark as the opacity/
 * position keyframes below (baserd-stack-dedicated-bottom-z).
 */
.baserd-products .baserd-products__stack--live.is-sequence-dedicated .is-layer-bottom {
	animation-name: baserd-stack-dedicated-bottom, baserd-stack-dedicated-bottom-z;
	animation-duration: 5.5s, 5.5s;
	animation-timing-function: ease-in-out, step-end;
	animation-iteration-count: infinite, infinite;
}

.baserd-products .baserd-products__stack--live.is-sequence-cloud-vps .is-layer-top {
	animation: baserd-stack-cloud-vps-top 9s ease-in-out infinite;
}

.baserd-products .baserd-products__stack--live.is-sequence-cloud-vps .is-layer-bottom {
	animation: baserd-stack-cloud-vps-bottom 9s ease-in-out infinite;
}

.baserd-products .baserd-products__stack--live.is-sequence-dedicated .is-layer-top {
	animation: baserd-stack-dedicated-top 5.5s ease-in-out infinite;
}

/*
 * Review round 4: 6573 is "base only", like Cloud VPS' 5531 — the whole mid group (grey twin and
 * tint together) must drop to opacity 0 on that plateau, not just dim the active layer to 0.4.
 * The base layer (stack-bottom) is a transparent-background silhouette (racks on empty floor), so
 * a merely-dimmed mid group still shows through the gaps as a translucent "ghost"; z-index alone
 * (baserd-stack-dedicated-bottom-z below) reorders paint but doesn't hide what's visible through
 * those gaps.
 */
.baserd-products .baserd-products__stack--live.is-sequence-dedicated .is-layer-mid {
	animation-name: baserd-stack-dedicated-mid, baserd-stack-dedicated-mid-group-opacity;
	animation-duration: 5.5s, 5.5s;
	animation-timing-function: ease-in-out, ease-in-out;
	animation-iteration-count: infinite, infinite;
}

@keyframes baserd-stack-dedicated-mid-group-opacity {
	0%, 42% {
		opacity: 1;
	}
	58%, 96% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*
 * Cloud VPS: 2408 (closed) -> 3449 (opened: top up and colored, mid+bottom grey) -> 3970 (top
 * lands back down on the base, still colored) -> 4491 (top gone, mid turns colored over the grey
 * base) -> 5011 (mid drops lower) -> 5531 (only the base, colored) -> back to closed. 9s, pauses
 * on each key frame (plateaus below are circle 3's hold windows, unchanged since round 3 — only
 * the translateY targets moved, to the round-5 explode distances from the brief's table).
 */
/*
 * Review round 3: explicit hold plateaus at each Figma key frame (0/20/42/56/72/86%, each with a
 * few % of flat hold before and after) so a frozen screenshot anywhere inside a plateau lands
 * cleanly on that frame — no mid-crossfade "ghost" like the round-2 3970 screenshot had.
 */
@keyframes baserd-stack-cloud-vps-top {
	0%, 14% {
		transform: translateY(12.2%);
		opacity: 1;
	}
	20%, 34% {
		transform: translateY(-9.1%);
		opacity: 1;
	}
	42%, 48% {
		transform: translateY(24.7%);
		opacity: 1;
	}
	56%, 64% {
		transform: translateY(24.7%);
		opacity: 0;
	}
	72%, 92% {
		transform: translateY(24.7%);
		opacity: 0;
	}
	100% {
		transform: translateY(12.2%);
		opacity: 1;
	}
}

@keyframes baserd-stack-cloud-vps-mid {
	0%, 14% {
		transform: translateY(6.1%);
	}
	20%, 48% {
		transform: translateY(6.7%);
	}
	56%, 64% {
		transform: translateY(6.7%);
	}
	72%, 78% {
		transform: translateY(39.9%);
	}
	86%, 92% {
		transform: translateY(39.9%);
	}
	100% {
		transform: translateY(6.1%);
	}
}

/*
 * 5531: like Dedicated's 6573, only the base is visible — the middle layer group disappears
 * entirely rather than crossfading, matching the Figma reference (no mid node in that frame).
 * Kept as its own animation (group opacity) separate from -mid above (transform) so the two
 * tweens don't need identical stop lists.
 */
.baserd-products .baserd-products__stack--live.is-sequence-cloud-vps .is-layer-mid {
	animation-name: baserd-stack-cloud-vps-mid, baserd-stack-cloud-vps-mid-group-opacity;
	animation-duration: 9s, 9s;
	animation-timing-function: ease-in-out, ease-in-out;
	animation-iteration-count: infinite, infinite;
}

@keyframes baserd-stack-cloud-vps-mid-group-opacity {
	0%, 78% {
		opacity: 1;
	}
	86%, 92% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.baserd-products .baserd-products__stack--live.is-sequence-cloud-vps .is-layer-mid .is-active {
	animation: baserd-stack-cloud-vps-mid-tint 9s ease-in-out infinite;
}

@keyframes baserd-stack-cloud-vps-mid-tint {
	/* Grey (opacity 0) through 2408, 2928/3449 AND 3970 — the Figma reference for 3970 shows the
	   cubes landing on a plain grey base, no colored middle slab peeking through yet. */
	0%, 48% {
		opacity: 0;
	}
	56%, 78% {
		opacity: 1;
	}
	86%, 92% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes baserd-stack-cloud-vps-bottom {
	0%, 14% {
		transform: translateY(0%);
	}
	20%, 64% {
		transform: translateY(25.4%);
	}
	72%, 78% {
		transform: translateY(24.4%);
	}
	86%, 92% {
		transform: translateY(24.4%);
	}
	100% {
		transform: translateY(0%);
	}
}

.baserd-products .baserd-products__stack--live.is-sequence-cloud-vps .is-layer-bottom .is-active {
	animation: baserd-stack-cloud-vps-bottom-tint 9s ease-in-out infinite;
}

@keyframes baserd-stack-cloud-vps-bottom-tint {
	0%, 14% {
		opacity: 1;
	}
	20%, 78% {
		opacity: 0;
	}
	86%, 100% {
		opacity: 1;
	}
}

/*
 * Dedicated Servers (review round 3 fix): 6050 (mid colored over grey base, top layer never
 * shown — unlike Cloud VPS, this card has no cubes frame in its own storyboard) -> 6573 (base
 * colored with racks, mid dims out). Shorter cycle, ~5.5s, two key states and pauses.
 */
/*
 * The Dedicated Servers storyboard never shows the cubes/top layer at all (942:6050 is the mid
 * layer colored over a grey base, same composition as Cloud VPS' 942:4491 — just reusing the
 * "01" render for the "02" card); kept as a real keyframe block (not a static opacity:0 rule) so
 * it is still gated correctly by the --live/reduced-motion selectors below.
 */
@keyframes baserd-stack-dedicated-top {
	0%, 100% {
		transform: translateY(20%);
		opacity: 0;
	}
}

@keyframes baserd-stack-dedicated-mid {
	0%, 100% {
		transform: translateY(6.5%);
	}
	50% {
		transform: translateY(13%);
	}
}

.baserd-products .baserd-products__stack--live.is-sequence-dedicated .is-layer-mid .is-active {
	animation: baserd-stack-dedicated-mid-tint 5.5s ease-in-out infinite;
}

@keyframes baserd-stack-dedicated-mid-tint {
	0%, 42% {
		opacity: 1;
	}
	58%, 96% {
		opacity: 0.4;
	}
	100% {
		opacity: 1;
	}
}

@keyframes baserd-stack-dedicated-bottom {
	0%, 100% {
		transform: translateY(0%);
	}
}

/*
 * step-end so the swap happens exactly at 58%/0%, matching the opacity/transform keyframes above —
 * no intermediate z-index values exist, so an eased tween would be meaningless here.
 */
@keyframes baserd-stack-dedicated-bottom-z {
	0%, 42% {
		z-index: 1;
	}
	58%, 100% {
		z-index: 4;
	}
}

.baserd-products .baserd-products__stack--live.is-sequence-dedicated .is-layer-bottom .is-active {
	animation: baserd-stack-dedicated-bottom-tint 5.5s ease-in-out infinite;
}

@keyframes baserd-stack-dedicated-bottom-tint {
	0%, 42% {
		opacity: 0;
	}
	58%, 100% {
		opacity: 1;
	}
}

/*
 * Кадр «карточка ещё не появилась в окне» (--live ещё не добавлен, и prefers-reduced-motion не
 * включён) замораживается на своём кадре для каждой последовательности отдельно, а не на общем
 * кадре покоя собранной стопки: у Cloud VPS это 942:2928 (раскрыто, верх цветной и поднят, середина
 * и низ серые), у Dedicated Servers — 942:6573 (виден только низ с цветными стойками, верх не
 * выводится вовсе, середина скрыта). То же правило действует и без поддержки IntersectionObserver
 * (products-animate.js тогда никогда не добавляет --live, и в силе остаются именно эти правила).
 * Под prefers-reduced-motion: reduce их перекрывает кадр покоя 2408 из media-блока ниже.
 */
.baserd-products .is-sequence-cloud-vps .is-layer-top {
	transform: translateY(0%);
}

.baserd-products .is-sequence-cloud-vps .is-layer-mid {
	transform: translateY(6.5%);
}

.baserd-products .is-sequence-cloud-vps .is-layer-mid .is-active {
	opacity: 0;
}

.baserd-products .is-sequence-cloud-vps .is-layer-bottom {
	transform: translateY(0%);
}

.baserd-products .is-sequence-cloud-vps .is-layer-bottom .is-active {
	opacity: 0;
}

.baserd-products .is-sequence-dedicated .is-layer-top {
	opacity: 0;
}

.baserd-products .is-sequence-dedicated .is-layer-mid {
	transform: translateY(13%);
	/* Static frame = 942:6573, base only — see the mid-group-opacity keyframe above for why the
	   whole group (not just .is-active) must disappear, not just dim. */
	opacity: 0;
}

.baserd-products .is-sequence-dedicated .is-layer-bottom {
	transform: translateY(0%);
	/* Static frame = 942:6573, where the base paints over the dimmed middle layer (see the -z
	   keyframes above); match that z-order here too. */
	z-index: 4;
}

@media (prefers-reduced-motion: reduce) {
	.baserd-products .baserd-products__stack--live.is-sequence-cloud-vps .is-layer-top,
	.baserd-products .baserd-products__stack--live.is-sequence-cloud-vps .is-layer-mid,
	.baserd-products .baserd-products__stack--live.is-sequence-cloud-vps .is-layer-bottom,
	.baserd-products .baserd-products__stack--live.is-sequence-dedicated .is-layer-top,
	.baserd-products .baserd-products__stack--live.is-sequence-dedicated .is-layer-mid,
	.baserd-products .baserd-products__stack--live.is-sequence-dedicated .is-layer-bottom,
	.baserd-products .baserd-products__stack--live.is-sequence-cloud-vps .is-layer-mid .is-active,
	.baserd-products .baserd-products__stack--live.is-sequence-cloud-vps .is-layer-bottom .is-active,
	.baserd-products .baserd-products__stack--live.is-sequence-dedicated .is-layer-mid .is-active,
	.baserd-products .baserd-products__stack--live.is-sequence-dedicated .is-layer-bottom .is-active,
	.baserd-products .baserd-products__stack--live.is-sequence-cloud-vps {
		animation: none;
	}

	/*
	 * Кадр покоя 2408 (значения базовых .is-layer-top/mid/bottom) в любом состоянии стопки.
	 * Без --live в селекторе намеренно: --live появляется только с 20% видимости, и привязка
	 * к нему дала бы при прокрутке скачок 2928/6573 → 2408, а без IntersectionObserver — 2928/6573
	 * навсегда. Специфичность выше статичных .is-sequence-... .is-layer-... выше по файлу.
	 */
	.baserd-products .baserd-products__stack.is-sequence-cloud-vps .is-layer-top,
	.baserd-products .baserd-products__stack.is-sequence-dedicated .is-layer-top {
		transform: translateY(12.2%);
		opacity: 1;
		z-index: 3;
	}

	.baserd-products .baserd-products__stack.is-sequence-cloud-vps .is-layer-mid,
	.baserd-products .baserd-products__stack.is-sequence-dedicated .is-layer-mid {
		transform: translateY(6.1%);
		opacity: 1;
		z-index: 2;
	}

	.baserd-products .baserd-products__stack.is-sequence-cloud-vps .is-layer-bottom,
	.baserd-products .baserd-products__stack.is-sequence-dedicated .is-layer-bottom {
		transform: translateY(0%);
		opacity: 1;
		z-index: 1;
	}

	.baserd-products .baserd-products__stack.is-sequence-cloud-vps .is-layer-mid .is-active,
	.baserd-products .baserd-products__stack.is-sequence-cloud-vps .is-layer-bottom .is-active,
	.baserd-products .baserd-products__stack.is-sequence-dedicated .is-layer-mid .is-active,
	.baserd-products .baserd-products__stack.is-sequence-dedicated .is-layer-bottom .is-active {
		opacity: 1;
	}
}

/* 657:6108: 20/28 400 muted, ширина 331, текст по вертикали посередине. */
.baserd-products .baserd-products__text {
	align-self: center;
	margin: 0;
	padding: 0 calc(var(--wp--preset--spacing--48) - 1px) 0 var(--wp--preset--spacing--48);
	font-size: var(--wp--preset--font-size--size-20);
	line-height: var(--wp--custom--line-height--size-20);
	color: var(--wp--preset--color--muted);
}

/*
 * Планшет — кадр 846:23509, front#1044: строки друг под другом, в строке столбцом название (поля
 * 48 от края экрана), слот во всю колонку высотой 427 и описание 20/28. Линия под строкой — во всю
 * ширину экрана. Ссылки pricing в кадрах планшета и телефона нет.
 */
@media (max-width: 1023px) {
	/* До тарифов 24 (кадры 846:23377, 851:29547): заголовок тарифов заходит на разделитель. */
	.baserd-products {
		padding-bottom: var(--wp--preset--spacing--24);
	}

	.baserd-products .baserd-products__row {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.baserd-products__row::before {
		right: calc(var(--wp--style--root--padding-right) * -1);
		left: calc(var(--wp--style--root--padding-left) * -1);
	}

	.baserd-products .baserd-products__head {
		justify-content: flex-start;
		gap: var(--wp--preset--spacing--8);
		padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--24);
	}

	.baserd-products .baserd-products__title {
		font-size: 32px;
		line-height: 40px;
	}

	.baserd-products .baserd-products__pricing {
		display: none;
	}

	.baserd-products .baserd-products__slot {
		height: 427px;
	}

	.baserd-products .baserd-products__text {
		align-self: start;
		padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--24);
	}

	/*
	 * 768–1023: без масштаба (1 по умолчанию), но с тем же фиксированным сдвигом, что и на
	 * телефоне (см. комментарий над .baserd-products__stack — сдвиг центрирует несимметричный
	 * размах 9.1%/25.9% и от масштаба не зависит): без него на 768 запас снизу у 3449/5011/5531
	 * уходит в минус (слот 427 против покоя 445.3 на 1024+), со сдвигом — равный зазор сверху и
	 * снизу на обеих ширинах диапазона.
	 */
	.baserd-products .baserd-products__stack {
		--baserd-stack-camera-shift: -8.4%;
	}
}

/*
 * Телефон — кадр 851:29679: строка в колонке, поля 16 сверху и снизу и 12 по бокам, между
 * названием, слотом и описанием 16; слот квадратный, описание 16/24. Под последней строкой 24
 * (в кадре 48, но тарифы заходят на них на 24 — см. начало блока планшета).
 */
@media (max-width: 767px) {
	.baserd-products .baserd-products__row {
		gap: var(--wp--preset--spacing--16);
		padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--12);
	}

	.baserd-products__row::before {
		right: 0;
		left: 0;
	}

	.baserd-products .baserd-products__head {
		padding: 0;
	}

	.baserd-products .baserd-products__slot {
		height: auto;
		aspect-ratio: 1;
	}

	.baserd-products .baserd-products__text {
		padding: 0;
		font-size: var(--wp--preset--font-size--size-16);
		line-height: var(--wp--custom--line-height--size-16);
	}

	/*
	 * Телефон, три ступени «камеры» по убыванию ширины слота (замерено Playwright на стенде на
	 * 320/360/375/390/430/600/768/1024/1440 — см. комментарий над .baserd-products__stack). Сдвиг —
	 * тот же фиксированный −8.4% на всех ступенях (и на 768–1023 выше): он не зависит от масштаба,
	 * потому что центрирует размах относительно середины стопки, а не подстраивается под слот.
	 * Масштаб — единственное, что меняется по ступеням; граница каждой — худший случай (наименьший
	 * слот) внутри её диапазона, с запасом не меньше 3% до предела формулы.
	 */
	.baserd-products .baserd-products__stack {
		--baserd-stack-camera-shift: -8.4%;
		--baserd-stack-camera-scale: 0.96;
	}
}

@media (max-width: 390px) {
	.baserd-products .baserd-products__stack {
		--baserd-stack-camera-shift: -8.4%;
		--baserd-stack-camera-scale: 0.8;
	}
}

@media (max-width: 364px) {
	.baserd-products .baserd-products__stack {
		--baserd-stack-camera-shift: -8.4%;
		--baserd-stack-camera-scale: 0.75;
	}
}