/*
 * Первый экран главной — Figma 657:4316, от y 80 до 825 (паттерн baserd/hero), и полоса логотипов
 * под ним, y 825–1005 (baserd/integrations). Координаты ниже — от левого верхнего угла колонки
 * контента: на 1440 это x 80, y 80 страницы. В версии макета 748:42008 (30.09) в hero поменялся
 * только маскот (748:42010, front#851), остальные узлы на прежних местах.
 *
 * Картинки лежат от левого края колонки, как в макете. На экране уже 1440 слой картинок
 * сдвигается влево, и до 1280 панель видна целиком (см. .baserd-hero__art); ещё уже правый край
 * панели и ряда логотипов обрезается (overflow-x: clip, без прокрутки), а текст слева остаётся
 * читаемым; телефон и планшет — front#808.
 *
 * Селекторы раскладки весят (0,2,0), класс секции плюс класс элемента. Правило редактора
 * `.block-editor-block-list__layout .block-editor-block-list__block` (0,2,0) ставит блокам
 * position: relative, а отступы потока `:root :where(.is-layout-flow) > *` (0,1,0) в редакторе
 * подключаются после стилей темы. С весом (0,1,0) сцена в редакторе разъезжалась.
 */

.baserd-hero,
.has-grid-lines.baserd-logos {
	overflow-x: clip;
}

.baserd-hero .baserd-hero__stage {
	position: relative;
	box-sizing: border-box;
	min-height: 745px;
	/* Заголовок начинается с y 269.3. */
	padding-top: 189.3px;
}

/* Текст над картинками, но не шире себя: иначе закрыл бы от мыши кнопку в панели. x 126 = 80 + 46. */
.baserd-hero .baserd-hero__copy {
	position: relative;
	z-index: 1;
	width: fit-content;
	margin-left: 46px;
}

/* 657:4394: 65.77/65.77 700. */
.baserd-hero__title {
	margin: 0;
	font-weight: 700;
	line-height: var(--wp--custom--line-height--size-66);
	color: var(--wp--preset--color--contrast);
}

/*
 * 657:4395: рамка 498×79 с уголками 14×14 (1px contrast-30), текст 16/25.6 400, белый 80%,
 * поля 13 сверху, 17 слева.
 */
.baserd-hero .baserd-hero__lead {
	--baserd-corner: linear-gradient(var(--wp--preset--color--contrast-30), var(--wp--preset--color--contrast-30));
	box-sizing: border-box;
	width: 498px;
	min-height: 79px;
	margin: 25.86px 0 0;
	padding: 13px 14px 14px 17px;
	background:
		var(--baserd-corner) left top / 14px 1px no-repeat,
		var(--baserd-corner) left top / 1px 14px no-repeat,
		var(--baserd-corner) right top / 14px 1px no-repeat,
		var(--baserd-corner) right top / 1px 14px no-repeat,
		var(--baserd-corner) left bottom / 14px 1px no-repeat,
		var(--baserd-corner) left bottom / 1px 14px no-repeat,
		var(--baserd-corner) right bottom / 14px 1px no-repeat,
		var(--baserd-corner) right bottom / 1px 14px no-repeat;
	font-size: var(--wp--preset--font-size--size-16);
	line-height: var(--wp--custom--line-height--lead);
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 80%, transparent);
}

/*
 * Кнопки — из UI kit (#781), высота 66 задана полями в паттерне. В макете ряд начинается на 10 px
 * правее текста (x 136), между кнопками 20.
 */
.baserd-hero .baserd-hero__actions {
	gap: 20px;
	margin: 66.3px 0 0 10px;
}

/*
 * «> fetch https://baserd.com» (657:4359) — кнопка копирования: скрипт copy-command.js копирует
 * текст без «> ». Иконка копирования 14×19 (657:4366) через 9 от текста — цвет текста с прозрачностью
 * 50%. В разметке это ссылка без адреса, то есть просто текст команды: кнопкой <button> её делает
 * скрипт, поэтому без JS нет ни мёртвой кнопки, ни знака копирования.
 */
.is-copy-command .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

/* Без JS — текст команды: курсор текстовый, наведение и нажатие не меняют вид (значения покоя стиля Tinted). */
.wp-block-button.is-copy-command a.wp-block-button__link:not([href]) {
	cursor: text;
}

.wp-block-button.is-copy-command a.wp-block-button__link:not([href]):is(:hover, :active) {
	background-color: var(--wp--custom--button--tinted--background);
	color: var(--wp--preset--color--primary);
}

.wp-block-button.is-copy-command a.wp-block-button__link:not([href]):is(:hover, :active)::before {
	background-color: transparent;
}

.is-copy-command button.wp-block-button__link::after {
	content: "";
	flex: none;
	width: 14px;
	height: 19px;
	background-color: currentColor;
	opacity: 0.5;
	-webkit-mask: url("../icons/copy.svg") center / 14px 19px no-repeat;
	mask: url("../icons/copy.svg") center / 14px 19px no-repeat;
}

/* «Copied» над кнопкой на две секунды. В макете этого состояния нет. */
.is-copy-command {
	position: relative;
}

.is-copy-command[data-copied]::after {
	content: attr(data-copied);
	/* Скринридер слышит «Copied» из role=status, подсказку ему читать не надо. */
	content: attr(data-copied) / "";
	position: absolute;
	bottom: calc(100% + var(--wp--preset--spacing--8));
	left: 50%;
	transform: translateX(-50%);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--12);
	background-color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--size-14);
	line-height: var(--wp--custom--line-height--size-14);
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
	pointer-events: none;
}

/*
 * Картинки: слой на всю колонку, каждая на своих координатах. Порядок в разметке — порядок слоёв
 * макета: маскот, брызги справа (в 748:42008 они над маскотом), брызги слева, искры, рука за панелью,
 * панель, две руки поверх.
 *
 * На 1440 слой стоит от левого края колонки, как в макете. На экране уже он сдвигается влево ровно
 * настолько, чтобы панель с тенью (правый край 767.4 + 446.1 + 13.4 = 1226.9) осталась в колонке:
 * на 1280 колонка 1120, сдвиг 106.9. Дальше сдвиг не растёт, иначе панель легла бы под заголовок;
 * телефон и планшет — front#808.
 */
.baserd-hero .baserd-hero__art {
	position: absolute;
	inset: 0;
	left: clamp(-106.9px, 100% - 1226.9px, 0px);
	pointer-events: none;
}

/* Свечение 657:4317: круг 524 цвета secondary, 20%. Размытие слоя в Figma 166, в CSS вдвое меньше: 83. */
.baserd-hero__art::before {
	content: "";
	position: absolute;
	top: 150.6px;
	left: 650.1px;
	width: 524.3px;
	height: 524.3px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--secondary);
	opacity: 0.2;
	filter: blur(83px);
}

.baserd-hero .baserd-hero__art > .wp-block-image {
	position: absolute;
	margin: 0;
}

.baserd-hero__art > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Маскот 748:42010: рамка 615.8 × 702.2 с x 618.5, y 35.6 страницы, повёрнут на −0.25°, картинка — рендер узла 2x. */
.baserd-hero__mascot { top: -44.4px; left: 538.5px; width: 615.8px; }
.baserd-hero__splash-right { top: 176px; left: 895px; width: 311.3px; }
.baserd-hero__splash-left { top: 415.4px; left: 634.2px; width: 306.9px; }
.baserd-hero__spark { width: 36.6px; }
.baserd-hero__spark.is-spark-1 { top: 200.3px; left: 978px; }
.baserd-hero__spark.is-spark-2 { top: 138.7px; left: 1122.8px; }
.baserd-hero__spark.is-spark-3 { top: 240px; left: 1132px; }
.baserd-hero__spark.is-spark-4 { top: 271.9px; left: 1071.2px; }
/*
 * Кулаки в макете — повёрнутые векторы с кусочком картинки внутри, их рамка больше видимой части.
 * Картинки выгружены по видимой части, поэтому координаты и ширина — absoluteRenderBounds, а не рамка.
 */
.baserd-hero__hand-back { top: 281.3px; left: 915.7px; width: 42.3px; }
.baserd-hero__hand-front { top: 272.6px; left: 930.9px; width: 58px; }
.baserd-hero__hand-left { top: 324px; left: 740.5px; width: 48.7px; }

/*
 * Панель деплоя 657:4371 — картинка консоли, а не форма: вкладки не переключаются, ссылка одна —
 * «Choose file» в консоль (решение в #784). Панель в макете — уменьшенный экран консоли, поэтому
 * размеры шрифтов в ней дробные и в шкалу темы не входят: они только здесь. Подложка 657:4370 —
 * белая 10%, сдвинута на 13.4 и 13.1.
 */
.baserd-hero .baserd-deploy {
	position: absolute;
	top: 296.3px;
	left: 767.4px;
	box-sizing: border-box;
	width: 446.1px;
	padding: 21.6px 24.2px 21.7px;
	background-color: var(--wp--preset--color--contrast);
	box-shadow: 13.4px 13.1px 0 color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	color: var(--wp--custom--console--ink);
	pointer-events: auto;
}

.baserd-deploy p {
	margin: 0;
}

/* Заголовок и подпись в макете на 2.5 px левее вкладок. */
.baserd-deploy .baserd-deploy__title,
.baserd-deploy .baserd-deploy__subtitle {
	margin-left: -2.5px;
}

.baserd-deploy__title {
	font-size: 16.64px;
	font-weight: 700;
	line-height: 21.63px;
	color: var(--wp--custom--console--title);
}

.baserd-deploy .baserd-deploy__subtitle {
	margin-top: 5.47px;
	font-size: 9.46px;
	line-height: 13.52px;
	color: var(--wp--custom--console--subtitle);
}

/* Вкладки 657:4375 и 657:4378: 199.7 и 198.1 × 39.1, иконка 14, зазор 5.4, текст 9.46/12 500. */
.baserd-deploy .baserd-deploy__tabs {
	display: flex;
	margin-top: 18.7px;
}

.baserd-deploy .baserd-deploy__tab {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: 5.4px;
	box-sizing: border-box;
	height: 39.1px;
	font-size: 9.46px;
	font-weight: 500;
	line-height: 12.07px;
	background-color: var(--wp--custom--console--surface);
	color: var(--wp--custom--console--ink);
}

.baserd-deploy .baserd-deploy__tab.is-active {
	flex-basis: 199.7px;
	flex-grow: 0;
	border: 1px solid var(--wp--custom--console--border);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.baserd-deploy__tab::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: center / 14px 14px no-repeat;
	mask: center / 14px 14px no-repeat;
}

.baserd-deploy__tab.is-upload::before {
	-webkit-mask-image: url("../icons/upload.svg");
	mask-image: url("../icons/upload.svg");
}

.baserd-deploy__tab.is-git::before {
	-webkit-mask-image: url("../icons/git-branch.svg");
	mask-image: url("../icons/git-branch.svg");
}

/*
 * Зона загрузки 657:4381: 397×142, фон #F7F7F7, пунктир #AEAEAE 1px, штрих 4 и зазор 4 — рисуется
 * фоном, у border пунктир в браузере свой. Иконка в квадрате 30 (primary 10%), под ней через 8.1
 * две строки: 12/16 700 и 10/14 400.
 */
.baserd-deploy .baserd-deploy__drop {
	--baserd-dash-x: repeating-linear-gradient(90deg, var(--wp--custom--console--dash) 0 4px, transparent 4px 8px);
	--baserd-dash-y: repeating-linear-gradient(180deg, var(--wp--custom--console--dash) 0 4px, transparent 4px 8px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2.7px;
	box-sizing: border-box;
	height: 142px;
	margin-top: 19.1px;
	padding: 0 21.6px;
	background:
		var(--baserd-dash-x) left top / 100% 1px no-repeat,
		var(--baserd-dash-x) left bottom / 100% 1px no-repeat,
		var(--baserd-dash-y) left top / 1px 100% no-repeat,
		var(--baserd-dash-y) right top / 1px 100% no-repeat,
		var(--wp--custom--console--surface);
	text-align: center;
}

/* Цвет стрелки #E8542F зашит в file-arrow-up.svg: сменится primary — поменять и в файле. */
.baserd-deploy__drop::before {
	content: "";
	flex: none;
	width: 30px;
	height: 30px;
	margin-bottom: 5.4px;
	background:
		url("../icons/file-arrow-up.svg") center / 14px 14px no-repeat,
		color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
}

.baserd-deploy .baserd-deploy__drop-title {
	font-size: var(--wp--preset--font-size--size-12);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--size-12);
	color: var(--wp--custom--console--ink);
}

.baserd-deploy .baserd-deploy__drop-hint {
	font-size: var(--wp--preset--font-size--size-10);
	line-height: var(--wp--custom--line-height--size-10);
	color: var(--wp--custom--console--hint);
}

/*
 * «Choose file» 657:4388: кнопка UI kit на светлом фоне — primary 15%, текст primary 14.9/19 700,
 * высота 54.9, вырезы 7.7. Стиль Tinted: наведение, нажатие и отключённое состояние в макете
 * лендинга не нарисованы и берутся у Tinted, то есть у Secondary из UI kit.
 */
.baserd-deploy .baserd-deploy__actions {
	margin-top: 15.4px;
}

.baserd-deploy__choose .wp-element-button {
	--wp--custom--button--notch: 7.7px;
	box-sizing: border-box;
	height: 54.9px;
	padding: 0;
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent);
	font-size: 14.9px;
	line-height: 54.9px;
	color: var(--wp--preset--color--primary);
}

/* Кольцо фокуса по умолчанию светлое и на белой панели не видно (1.21:1): здесь оно цвета фона страницы. */
.baserd-deploy__choose .wp-element-button:focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/*
 * Полоса логотипов (657:7356 – 657:7362): два разделителя (divider.css), между ними 64 — ряд
 * логотипов 200 шириной через 33, от x 125, прозрачность 30%.
 * Второй разделитель заходит на следующую секцию на 23 px: продукты в макете начинаются с y 982.
 */
.has-grid-lines.baserd-logos {
	z-index: 1;
	margin-bottom: -23px;
}

.baserd-logos .baserd-logos__row {
	display: flex;
	align-items: flex-start;
	gap: 33px;
	box-sizing: border-box;
	height: 64px;
	padding: var(--wp--preset--spacing--8) 0 0 45px;
}

.baserd-logos__row > .wp-block-image {
	flex: none;
	width: 200px;
	margin: 0;
	opacity: 0.3;
}

.baserd-logos__row > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * iPad в альбомной ориентации и iPad Pro 12.9 в книжной, 1024–1279 (front#937). Сдвиг слоя влево
 * кончается на 106.9, и уже 1184 панель уходила за правый край колонки: на 1024 её срезало на
 * 150 px, а маскот вставал под «live.». Здесь слой прижат к правому краю колонки, заголовок
 * меньше на 15%, а уже 1180 слой ещё и уменьшен. Тогда панель встаёт правее подзаголовка и кнопок,
 * а тело маскота — правее заголовка: при zoom 0.74 тело начинается в 546 × 0.74 от правого края
 * колонки, это 556 на 1024 при правом крае заголовка 545. Сверху слой сдвинут на 72 × 0.74:
 * нижний край панели встаёт вровень с кнопками.
 */
@media (min-width: 1024px) and (max-width: 1279px) {
	/* Размер ставит класс has-size-66-font-size с !important, поэтому меняется сама переменная. */
	.baserd-hero .baserd-hero__title {
		--wp--preset--font-size--size-66: 56px;
		line-height: 1;
	}

	.baserd-hero .baserd-hero__art {
		inset: 0 0 auto auto;
		width: 1226.9px;
		height: 682px;
	}
}

@media (min-width: 1024px) and (max-width: 1179px) {
	.baserd-hero .baserd-hero__art {
		top: var(--wp--preset--spacing--72);
		zoom: 0.74;
	}
}

/*
 * Планшет — кадры 846:23412 (текст) и 846:23439 (картинки), front#1044. Координаты ниже — от
 * левого верхнего угла рамки картинок 672×640 (x 48, y 537 кадра 768): дизайнеры собрали сцену
 * заново, маскот меньше (521 вместо 616) и ниже, а панель, брызги и искры того же размера, что на
 * 1440. Рамка стоит по центру колонки (на 744 правый край тени панели — 626), в колонке уже 672 —
 * от её левого края. Текст — с полей 24 внутри колонки, кнопки по половине ряда через 20. Рука за
 * панелью в кадре закрыта панелью.
 */
@media (max-width: 1023px) {
	.baserd-hero .baserd-hero__stage {
		min-height: 0;
		padding: var(--wp--preset--spacing--48) 0 53px;
	}

	.baserd-hero .baserd-hero__copy {
		width: auto;
		margin: 0 var(--wp--preset--spacing--24);
	}

	.baserd-hero .baserd-hero__lead {
		max-width: 100%;
		margin-top: var(--wp--preset--spacing--24);
	}

	.baserd-hero .baserd-hero__actions {
		flex-wrap: nowrap;
		margin: 64px 0 0;
	}

	.baserd-hero .baserd-hero__actions > .wp-block-button {
		flex: 1 1 0;
		min-width: 0;
	}

	/*
	 * Команда в одну строку, как в кадрах: уже 375 она длиннее места между полями кнопки из паттерна
	 * (27 и 35) и заходит на них, а не переносится.
	 */
	.baserd-hero .baserd-hero__actions .wp-block-button__link {
		display: flex;
		justify-content: center;
		box-sizing: border-box;
		width: 100%;
		white-space: nowrap;
	}

	.baserd-hero .baserd-hero__art {
		position: relative;
		inset: auto;
		width: 672px;
		height: 640px;
		margin: var(--wp--preset--spacing--48) 0 0 max(0px, 50% - 336px);
	}

	.baserd-hero__art::before {
		top: 132px;
		left: 122px;
		width: 428px;
		height: 428px;
		filter: blur(68px);
	}

	.baserd-hero .baserd-hero__mascot { top: -65px; left: -39px; width: 521px; }
	.baserd-hero .baserd-hero__splash-right { top: 94px; left: 259px; width: 311px; }
	.baserd-hero .baserd-hero__splash-left { top: 333px; left: -2px; width: 306px; }
	.baserd-hero .baserd-hero__spark { width: 36px; }
	.baserd-hero .baserd-hero__spark.is-spark-1 { top: 155px; left: 394px; }
	.baserd-hero .baserd-hero__spark.is-spark-2 { top: 94px; left: 539px; }
	.baserd-hero .baserd-hero__spark.is-spark-3 { top: 195px; left: 548px; }
	.baserd-hero .baserd-hero__spark.is-spark-4 { top: 227px; left: 487px; }
	.baserd-hero .baserd-hero__hand-back { display: none; }
	/* Рамки рук в кадре — те же, что на 1440, относительно панели; картинки — их видимая часть (см. выше). */
	.baserd-hero .baserd-hero__hand-front { top: 190.6px; left: 295.9px; }
	.baserd-hero .baserd-hero__hand-left { top: 243px; left: 105.5px; }

	/* Подложка панели в кадре 846:23449 белая без прозрачности, а не 10%, как в 657:4370 на 1440. */
	.baserd-hero .baserd-deploy {
		top: 214px;
		left: 131px;
		box-shadow: 13.4px 13.1px 0 var(--wp--preset--color--contrast);
	}

	/* Полоса логотипов 846:23475: разделители по 48, между ними 72; продукты начинаются на 24 выше нижнего. */
	.has-grid-lines.baserd-logos {
		margin-bottom: -24px;
	}

	/*
	 * Ряд логотипов 200 через 64 (карточки 264 с полями 32) идёт от края экрана: первый — за левым
	 * краем, второй — с x 20. Ядро ставит ряду поля auto с !important, поэтому сдвиг — через left.
	 */
	.baserd-logos .baserd-logos__row {
		position: relative;
		left: calc(-244px - var(--wp--style--root--padding-left));
		gap: 64px;
		width: max-content;
		max-width: none;
		height: 72px;
		padding: var(--wp--preset--spacing--8) 0 0;
	}
}

/*
 * Телефон — кадры 851:29582 и 851:29609. Текст с полей 12 внутри колонки, кнопки друг под другом во
 * всю ширину. Логотипов два, каждый по центру своей половины экрана. Сцена планшета (672) влезает
 * до 640: там она прижата к левому краю колонки, телефонная — только уже 640 (ниже).
 */
@media (max-width: 767px) {
	.baserd-hero .baserd-hero__stage {
		padding-top: var(--wp--preset--spacing--24);
	}

	.baserd-hero .baserd-hero__copy {
		margin: 0 var(--wp--preset--spacing--12);
	}

	.baserd-hero .baserd-hero__lead {
		width: auto;
		min-height: 0;
		padding: var(--wp--preset--spacing--12);
	}

	.baserd-hero .baserd-hero__actions {
		flex-direction: column;
		align-items: stretch;
		margin-top: var(--wp--preset--spacing--48);
	}

	.baserd-hero .baserd-hero__actions > .wp-block-button {
		flex: none;
	}

	/*
	 * Полоса 856:35772: между разделителями 80, ряд во всю ширину экрана. Продукты заходят под
	 * нижний разделитель на 24, и надзаголовок первого продукта (y 1288) лежит на его нижней половине:
	 * в кадре продукты поверх полосы, поэтому полоса не поднимается над ними, как на 1440.
	 */
	.has-grid-lines.baserd-logos {
		z-index: auto;
	}

	/*
	 * Зазор планшета (64) сброшен: с ним половины на 375 по 155.5, и центры логотипов уезжали к краям
	 * на 16 px — на 78 и 297 вместо 94 и 281 (front#1054).
	 */
	.baserd-logos .baserd-logos__row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
		align-items: center;
		justify-items: center;
		left: calc(var(--wp--style--root--padding-left) * -1);
		width: calc(100% + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
		height: 80px;
		padding: 0;
		overflow: hidden;
	}

	/* В кадре Relume и Webflow — второй и третий логотипы ряда. */
	.baserd-logos .baserd-logos__row > .wp-block-image:not(:nth-child(2), :nth-child(3)) {
		display: none;
	}
}

/*
 * Сцена телефона 375×492 от x 0, y 628 кадра 851:29547 — по центру экрана, вылезает за колонку на
 * поля: панель 320×320 собрана заново (поля 20, вкладки 140, кнопка 56), а не уменьшена.
 */
@media (max-width: 639px) {
	.baserd-hero .baserd-hero__stage {
		padding-bottom: 0;
	}

	.baserd-hero .baserd-hero__art {
		width: 375px;
		height: 492px;
		margin: var(--wp--preset--spacing--16) 0 0 calc(50% - 187.5px);
	}

	.baserd-hero__art::before {
		top: 84px;
		left: 37px;
		width: 252px;
		height: 252px;
		filter: blur(40px);
	}

	.baserd-hero .baserd-hero__mascot { top: -9px; left: -26px; width: 241px; }
	.baserd-hero .baserd-hero__splash-right { top: 61px; left: 118px; width: 183px; }
	.baserd-hero .baserd-hero__splash-left { top: 202px; left: -35px; width: 180px; }
	.baserd-hero .baserd-hero__spark { width: 21px; }
	.baserd-hero .baserd-hero__spark.is-spark-1 { top: 98px; left: 198px; }
	.baserd-hero .baserd-hero__spark.is-spark-2 { top: 61px; left: 283px; }
	.baserd-hero .baserd-hero__spark.is-spark-3 { top: 121px; left: 289px; }
	.baserd-hero .baserd-hero__spark.is-spark-4 { top: 140px; left: 253px; }
	/* Руки в кадре в 0.58 от 1440. */
	.baserd-hero .baserd-hero__hand-front { top: 120.4px; left: 139.8px; width: 33.4px; }
	.baserd-hero .baserd-hero__hand-left { top: 160.7px; left: 9.4px; width: 28.7px; }

	/* Панель 856:35723: 320×320, поля 20, между блоками 16, белая подложка 856:35761 сдвинута на 8. */
	.baserd-hero .baserd-deploy {
		top: 140px;
		left: 28px;
		width: 320px;
		padding: 20px;
		box-shadow: 8px 8px 0 var(--wp--preset--color--contrast);
	}

	.baserd-deploy .baserd-deploy__title,
	.baserd-deploy .baserd-deploy__subtitle {
		margin-left: 0;
	}

	.baserd-deploy .baserd-deploy__subtitle {
		margin-top: 5px;
	}

	/* Вкладки 856:35727 и 856:35730: по 140 × 38, иконка 14, зазор 6, текст 11/14 500. */
	.baserd-deploy .baserd-deploy__tabs {
		margin-top: 16px;
	}

	.baserd-deploy .baserd-deploy__tab {
		gap: 6px;
		height: 38px;
		font-size: 11px;
		line-height: 14px;
	}

	.baserd-deploy .baserd-deploy__tab.is-active {
		flex: 1 1 0;
	}

	.baserd-deploy .baserd-deploy__drop {
		height: 97px;
		margin-top: 16px;
	}

	.baserd-deploy .baserd-deploy__actions {
		margin-top: 16px;
	}

	/* Кнопка 856:35752: 280×56, текст 16/24 700, вырезы 12. */
	.baserd-deploy__choose .wp-element-button {
		--wp--custom--button--notch: 12px;
		height: 56px;
		font-size: var(--wp--preset--font-size--size-16);
		line-height: 56px;
	}
}

/*
 * Уже 375 кадра нет: сцена уменьшается целиком (320 / 375), заголовок — до 40/48, иначе «project's»
 * в 48 не помещается в колонку 272.
 */
@media (max-width: 374px) {
	.baserd-hero .baserd-hero__title {
		--wp--preset--font-size--size-66: 40px;
		--wp--custom--line-height--size-66: 48px;
	}

	.baserd-hero .baserd-hero__art {
		zoom: 0.853;
	}
}