/* Adapted from the studio source header.css and bloki.css. */
/*
 * Шапка сайта.
 *
 * Накладка: лежит поверх первого экрана и места на странице не занимает.
 * Наверху она прозрачна — видно картинку под ней, — а как только
 * страница поехала, наливается фоном с размытием и дальше едет липкой.
 *
 * **Состояний два, и прозрачное — то, что помечено классом.** По
 * умолчанию полоса с фоном; `is-top` снимает его, и этот класс стоит
 * прямо в разметке, а `header.js` снимает его при прокрутке. Порядок
 * выбран не из вкуса: у WP Rocket включено удаление неиспользуемого
 * CSS, а он выбрасывает правила для классов, которых нет в отданной
 * странице. Первая версия вешала скриптом `is-scrolled` — в разметке
 * такого класса не было, Rocket вырезал его правила целиком, и на
 * боевом шапка осталась прозрачной над контентом. Теперь оба состояния
 * есть в разметке, и вырезать нечего.
 *
 * Размытие включается только там, где браузер его умеет: проверка
 * через @supports, а не надежда.
 */

.ssh {
	--ssh-bg: #0e0e0e;
	--ssh-ink: #ffffff;
	--ssh-muted: rgba(255, 255, 255, 0.5);
	--ssh-line: rgba(255, 255, 255, 0.09);
	--ssh-accent: #25cbc2;
	--ssh-h: var(--ss-header-h, 78px);

	background: var(--ssh-bg);
	border-block-end: 1px solid var(--ssh-line);
	color: var(--ssh-ink);
	font-family: "Manrope", system-ui, -apple-system, sans-serif;
	inset-block-start: 0;
	inset-inline: 0;
	position: fixed;
	transition: background-color 0.25s ease, border-color 0.25s ease;
	z-index: 500;
}

.ssh.is-top {
	background: transparent;
	border-block-end-color: transparent;
}

@supports (backdrop-filter: blur(1px)) {
	.ssh {
		backdrop-filter: blur(14px);
		background: rgba(14, 14, 14, 0.82);
	}

	.ssh.is-top {
		backdrop-filter: none;
		background: transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ssh {
		transition: none;
	}
}

.ssh .ssh__inner {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	gap: 18px;
	margin-inline: auto;
	/* Одна оболочка на шапку, меню и подвал — величина в tokens.css. */
	max-width: calc(var(--ss-shell) + var(--ss-gutter) * 2);
	min-block-size: var(--ssh-h);
	padding-block: 9px;
	padding-inline: var(--ss-gutter);
}

.ssh a {
	color: inherit;
	text-decoration: none;
}

/* Наведение цвет не меняет — за это отвечает каждая кнопка отдельно.
   Правило нужно из-за кита: `.elementor-kit-6 a:hover` перекрашивает
   любую ссылку в акцент, и одиночного `.ssh a { color: inherit }` ему
   мало — у него вес выше. Из-за этого значок меню, набранный
   currentColor, при наведении целиком уходил в бирюзу. */
.ssh a:hover,
.ssh a:focus-visible {
	color: inherit;
}

.ssh a:focus-visible {
	outline: 2px solid var(--ssh-accent);
	outline-offset: 3px;
}

.ssh .ssh__logo img {
	display: block;
	height: auto;
	width: 190px;
}

/* Оценка. Без обводки: пилюлями в шапке обозначено действие —
   «Обсудить проект» и «Меню». Оценка не действие, а довод, и рамка
   вокруг неё обещала кнопку. Форму держат сами значки источников. */
.ssh .ssh__rating {
	align-items: center;
	display: flex;
	gap: 9px;
	min-block-size: 46px;
	margin-inline-end: auto;
	transition: opacity 0.2s ease;
	white-space: nowrap;
}

/* Всё, что отвечает на наведение, спрятано за `hover: hover`.
   На сенсорном экране :hover прилипает к последнему нажатому элементу
   и держится, пока не коснёшься чего-то ещё: после закрытия меню
   значок в шапке продолжал перебирать квадратами сам по себе.
   Отклик на фокус при этом остаётся снаружи — он про клавиатуру. */
@media (hover: hover) {
	.ssh .ssh__rating:hover {
		opacity: 0.82;
	}
}

/* Две строки вместо одной. В строку тот же состав занимал 244 пикселя
   и не оставлял полосе запаса; в две — вдвое меньше, а высота пилюли
   не изменилась: вертикаль в шапке и так пустовала. */
.ssh .ssh__rows {
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
}

.ssh .ssh__top {
	align-items: center;
	display: flex;
	gap: 6px;
}

/* Пять звёзд, а не одна: одна читалась как «оценка единица».
   Плотно, чтобы ряд не растягивал полосу. */
.ssh .ssh__stars {
	color: #ffb800;
	font-size: 11px;
	letter-spacing: 0.5px;
	line-height: 1;
}

.ssh .ssh__score {
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}

/* Число отзывов — не подпись, а довод: 78 это много. Поэтому тем же
   цветом, что и оценка. */
.ssh .ssh__count {
	color: var(--ssh-ink);
	font-size: 13px;
	line-height: 1;
}

.ssh .ssh__social {
	display: flex;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ssh .ssh__social li {
	margin: 0;
}

.ssh .ssh__social a {
	align-items: center;
	block-size: 48px;
	display: flex;
	inline-size: 46px;
	justify-content: center;
	transition: transform 0.2s ease;
}

/* В полную силу, как в подвале: приглушённый значок на тёмном фоне
   выглядел выключенным. Отклик на наведение — сдвигом, не яркостью. */
.ssh .ssh__social a:focus-visible {
	transform: translateY(-2px);
}

@media (hover: hover) {
	.ssh .ssh__social a:hover {
		transform: translateY(-2px);
	}
}

.ssh .ssh__social img {
	display: block;
	height: 34px;
	width: 34px;
}

.ssh .ssh__online {
	align-items: center;
	color: var(--ssh-muted);
	display: flex;
	font-size: 13px;
	gap: 7px;
	letter-spacing: 0.04em;
	margin: 0;
	margin-inline-end: auto;
	white-space: nowrap;
}

.ssh .ssh__dot {
	background: var(--ssh-accent);
	block-size: 7px;
	border-radius: 50%;
	display: inline-block;
	inline-size: 7px;
}

/* ------------------------------------------------------------ действие */

.ssh .ssh__phone {
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 21px;
	font-weight: 500;
	letter-spacing: -0.01em;
	padding-block: 8px;
	transition: color 0.2s ease;
	white-space: nowrap;
}

.ssh .ssh__phone:focus-visible {
	color: var(--ssh-accent);
}

@media (hover: hover) {
	.ssh .ssh__phone:hover {
		color: var(--ssh-accent);
	}
}

.ssh .ssh__cta {
	align-items: center;
	border: 1px solid var(--ssh-accent);
	border-radius: 999px;
	color: var(--ssh-accent);
	display: inline-flex;
	font-size: 15px;
	min-block-size: 50px;
	padding-inline: 21px;
	transition: background-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

.ssh .ssh__cta:focus-visible {
	background: var(--ssh-accent);
	color: #0e0e0e;
}

@media (hover: hover) {
	.ssh .ssh__cta:hover {
		background: var(--ssh-accent);
		color: #0e0e0e;
	}
}

/* --------------------------------------------------------------- меню */

.ssh .ssh__menu {
	align-items: center;
	display: inline-flex;
	font-size: 15px;
	gap: 11px;
	min-block-size: 50px;
	padding-inline: 4px;
	transition: opacity 0.2s ease;
}

.ssh .ssh__menu:focus-visible {
	opacity: 0.82;
}

@media (hover: hover) {
	.ssh .ssh__menu:hover {
		opacity: 0.82;
	}
}

/* Знак меню: четыре квадрата, один акцентом. Три полоски читались
   как служебный значок из набора; сложенные квадраты — та же геометрия,
   что у пластин логотипа.

   На наведение акцент обегает квадраты по кругу — по часовой стрелке,
   сверху слева. Поворот всей связки в ромб пробовали и убрали: четыре
   квадрата, повёрнутые на 45°, — это чужой знак, «Перекрёсток». */
.ssh .ssh__burger {
	display: grid;
	gap: 4px;
	grid-template-columns: repeat(2, 8px);
}

/* Цвет задан явно, а не currentColor: в шапке цвет ссылки трогает кит,
   и значок ездил вместе с ним. */
.ssh .ssh__burger i {
	background: var(--ssh-ink);
	block-size: 8px;
	border-radius: 2.5px;
	display: block;
	inline-size: 8px;
	transition: background-color 0.2s ease;
}

.ssh .ssh__burger i:first-child {
	background: var(--ssh-accent);
}

/* Бегунок светится чуть крупнее соседей — иначе на восьми пикселях
   переход цвета читается как мигание, а не как движение. */
@keyframes ssh-krug {
	0%, 16% {
		background: var(--ssh-accent);
		transform: scale(1.15);
	}

	36%, 100% {
		background: var(--ssh-ink);
		transform: scale(1);
	}
}

/* Задержки идут по кольцу, а не по порядку в разметке: сетка читается
   строками (слева направо, сверху вниз), поэтому нижние два меняются
   местами. */
.ssh .ssh__menu:focus-visible .ssh__burger i {
	animation: ssh-krug 1.2s linear infinite;
}

.ssh .ssh__menu:focus-visible .ssh__burger i:nth-child(2) {
	animation-delay: 0.3s;
}

.ssh .ssh__menu:focus-visible .ssh__burger i:nth-child(4) {
	animation-delay: 0.6s;
}

.ssh .ssh__menu:focus-visible .ssh__burger i:nth-child(3) {
	animation-delay: 0.9s;
}

@media (hover: hover) {
	.ssh .ssh__menu:hover .ssh__burger i {
		animation: ssh-krug 1.2s linear infinite;
	}

	.ssh .ssh__menu:hover .ssh__burger i:nth-child(2) {
		animation-delay: 0.3s;
	}

	.ssh .ssh__menu:hover .ssh__burger i:nth-child(4) {
		animation-delay: 0.6s;
	}

	.ssh .ssh__menu:hover .ssh__burger i:nth-child(3) {
		animation-delay: 0.9s;
	}
}

/* Бег — украшение: без него остаётся тот же знак с акцентом в углу. */
@media (prefers-reduced-motion: reduce) {
	.ssh .ssh__menu:hover .ssh__burger i,
	.ssh .ssh__menu:focus-visible .ssh__burger i {
		animation: none;
	}
}

/* --------------------------------------------------------- уже 1200 */

/* Пороги выбраны замером, а не по названиям устройств.
   1320 — полосе становится тесно раньше, чем она формально перестаёт
   помещаться: запас падает со 168 до 28 пикселей.
   1100 — запас уходит в минус (−20), и элементы начинают сжимать
   друг друга. Оценка уходит первой: она украшение доверия, и тот же
   рейтинг есть в панели меню, а телефон и кнопка — это действие. */
@media (max-width: 1320px) {
	.ssh .ssh__social {
		display: none;
	}
}

@media (max-width: 1100px) {
	.ssh .ssh__rating {
		display: none;
	}

	.ssh .ssh__logo {
		margin-inline-end: auto;
	}
}

/* ---------------------------------------------------------- уже 900 */

/* Между 767 и 820 логотип с телефоном, кнопкой и меню перестают
   помещаться: замер даёт −36. Кнопка уходит первой — то же действие
   есть в панели меню, а телефон в шапке ничем не заменить. */
@media (max-width: 860px) {
	.ssh .ssh__cta {
		display: none;
	}
}

/* Смена режима — вместе с контентом Elementor, на 767. */
@media (max-width: 767px) {
	.ssh {
		--ssh-h: 62px;
	}

	.ssh .ssh__inner {
		gap: 12px;
		padding-inline: 16px;
	}

	/* На телефоне в <picture> подставляется значок: он почти квадратный,
	   поэтому задаём высоту, а ширину пусть считает сам. */
	.ssh .ssh__logo img {
		block-size: 38px;
		width: auto;
	}

	/* Три полосы: знак, мессенджеры, кнопка меню. Сетка, а не отступы
	   с auto, — только она ставит мессенджеры ровно по середине полосы,
	   не считаясь с тем, что логотип и кнопка разной ширины. */
	.ssh .ssh__inner {
		display: grid;
		grid-template-columns: auto 1fr auto;
	}

	.ssh .ssh__rating {
		display: none;
	}

	/* На телефоне вместо номера — мессенджеры: набирать с телефона
	   готовы единицы, а написать в один тап готовы почти все. Номер
	   никуда не делся, он в панели меню и в подвале. */
	.ssh .ssh__phone {
		display: none;
	}

	.ssh .ssh__social {
		display: flex;
		justify-content: center;
	}

	.ssh .ssh__social a {
		inline-size: 44px;
	}

	.ssh .ssh__menu-label {
		display: none;
	}

	.ssh .ssh__menu {
		block-size: 40px;
		inline-size: 40px;
		justify-content: center;
		padding-inline: 0;
	}
}

/* Значки источников отзывов. Во всю высоту обеих строк: отзывы
   Яндекса и 2ГИС — это и есть довод, прятать их в мелочь значит
   обесценить цифру рядом. */
.ssh .ssh__sources {
	align-items: center;
	display: inline-flex;
	gap: 4px;
}

.ssh .ssh__sources img {
	border-radius: 5px;
	display: block;
	height: 28px;
	width: 28px;
}



/* Узкие телефоны. Со значком вместо надписи места хватает почти везде,
   поэтому осталась одна ступень — и та про поля, а не про размеры. */
@media (max-width: 360px) {
	.ssh .ssh__inner {
		gap: 10px;
		padding-inline: 14px;
	}

	.ssh .ssh__logo img {
		block-size: 34px;
	}
}

.lp-home .studio-cta {
	--ss-cta-krug: 40px;

	align-items: center;
	background: linear-gradient(90deg, var(--ss-accent-2), var(--ss-accent));
	border-radius: 999px;
	box-shadow:
		0 10px 26px rgba(37, 203, 194, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.5);
	color: #0b0b0b;
	display: inline-flex;
	font-size: 15px;
	font-weight: 500;
	gap: 10px;
	isolation: isolate;
	justify-content: center;
	min-block-size: 54px;
	overflow: hidden;
	padding-block: 7px;
	padding-inline: 28px calc(var(--ss-cta-krug) + 7px + 16px);
	position: relative;
	text-decoration: none;
	text-transform: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lp-home .studio-cta:hover,
.lp-home .studio-cta:focus-visible {
	color: #0b0b0b;
}

.lp-home .studio-cta > span[aria-hidden="true"] {
	display: none;
}

/* Круг со стрелкой. */
.lp-home .studio-cta::before {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")
		no-repeat 50% 50% / 18px,
		#0b0b0b;
	block-size: var(--ss-cta-krug);
	border-radius: 50%;
	content: "";
	inline-size: var(--ss-cta-krug);
	inset-block-start: 50%;
	inset-inline-end: 7px;
	position: absolute;
	transition: transform 0.25s ease;
	translate: 0 -50%;
}

/* Блик: узкая косая полоса света, пробегает и отдыхает. */
.lp-home .studio-cta::after {
	animation: studio-blik 4s ease-in-out infinite;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
	content: "";
	inline-size: 40%;
	inset-block: 0;
	inset-inline-start: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(-160%) skewX(-20deg);
	z-index: -1;
}

@keyframes studio-blik {
	0% {
		transform: translateX(-160%) skewX(-20deg);
	}

	35%,
	100% {
		transform: translateX(320%) skewX(-20deg);
	}
}

/* Стрелка уходит вправо и возвращается слева. */
@keyframes studio-strelka {
	0% {
		background-position: 50% 50%, 0 0;
	}

	45% {
		background-position: calc(50% + 30px) 50%, 0 0;
	}

	46% {
		background-position: calc(50% - 30px) 50%, 0 0;
	}

	100% {
		background-position: 50% 50%, 0 0;
	}
}

@media (hover: hover) {
	.lp-home .studio-cta:hover {
		box-shadow:
			0 14px 34px rgba(37, 203, 194, 0.42),
			inset 0 1px 0 rgba(255, 255, 255, 0.5);
		transform: translateY(-2px);
	}

	.lp-home .studio-cta:hover::before {
		animation: studio-strelka 0.6s ease-in-out;
	}
}

.lp-home .studio-cta:focus-visible {
	outline: 2px solid var(--ss-accent-ink);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.lp-home .studio-cta::after,
	.lp-home .studio-cta:hover::before {
		animation: none;
	}

	.lp-home .studio-cta::after {
		display: none;
	}
}


.lp-home .ss-stroki {
	display: grid;
	overflow: clip;
	padding-block: max(48px, calc(4vw + 20px));
	position: relative;
}

/* Раздел сразу под строками — почти без поля сверху. Строки и так
   держат своё поле под наклон, и полный отступ блока складывался
   с ним в 129 px пустоты от угла полосы до заголовка. Пятая часть
   токена даёт около пятидесяти. */
.lp-home .ss-stroki + section {
	padding-block-start: calc(var(--ss-blok) / 5);
}

/* И сверху так же: светлый раздел перед строками (калькулятор на
   лендингах) — без полного поля снизу, иначе над строками зиял
   двойной отступ — поле раздела плюс собственное поле строк. */
.lp-home section:not(.ss-hero):has(+ .ss-stroki) {
	padding-block-end: calc(var(--ss-blok) / 5);
}

.lp-home .ss-stroki__polosa {
	align-self: center;
	grid-area: 1 / 1;
	inline-size: 110%;
	margin-inline-start: -5%;
	overflow: hidden;
	padding-block: clamp(12px, 1.4vw, 18px);
}

.lp-home .ss-stroki__polosa--pervaya {
	background: linear-gradient(90deg, var(--ss-accent-2), var(--ss-accent));
	color: #0b0b0b;
	position: relative;
	transform: rotate(-4deg);
	z-index: 1;
}

.lp-home .ss-stroki__polosa--vtoraya {
	background: var(--ss-dark);
	color: #ffffff;
	transform: rotate(4deg);
}

/* Тёмный вариант — строки между двумя тёмными разделами: фон тёмный,
   тот же, что у разделов, линии сетки белые, вторая строка инвертирована —
   чёрная на тёмном пропала бы. */
/* Фон ровный, без градиента: с градиентом на стыках с первым экраном
   и калькулятором проступала ступенька — у тех начало и конец #111111,
   этим же цветом строки их и сшивают. */
.lp-home .ss-stroki--temnyj {
	--ss-liniya: rgba(255, 255, 255, 0.06);
	--ss-ugol: clamp(20px, 2.4vw, 36px);

	background: #111111;
}

/* Под скруглённые нижние углы первого экрана тёмные строки подложены
   снизу, иначе в углах светлели бы уголки фона страницы. Первый экран
   при этом поднят над ними. */
.lp-home .ss-hero + .ss-stroki--temnyj {
	margin-block-start: calc(var(--ss-ugol) * -1);
	padding-block-start: calc(max(48px, calc(4vw + 20px)) + var(--ss-ugol));
}

.lp-home .ss-hero:has(+ .ss-stroki--temnyj) {
	z-index: 1;
}

.lp-home .ss-stroki--temnyj .ss-stroki__polosa--vtoraya {
	background: #ffffff;
	color: #0b0b0b;
}

.lp-home .ss-stroki__lenta {
	animation: studio-beg 60s linear infinite;
	display: flex;
	inline-size: max-content;
}

.lp-home .ss-stroki__polosa--vtoraya .ss-stroki__lenta {
	animation-direction: reverse;
}

.lp-home .ss-stroki__lenta span {
	flex: none;
	font-family: "Unbounded", system-ui, sans-serif;
	/* Тянется за окном, как было в Elementor: на ПК и планшете 3.2vw,
	   на телефоне 6vw — ниже порог мельчит строку до нечитаемого. */
	font-size: 3.2vw;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1;
	padding-inline-end: 1.2em;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.lp-home .ss-stroki__lenta span {
		font-size: 6vw;
	}
}

/* Сдвиг ровно на половину ленты: кусок повторён четыре раза,
   и вторая пара встаёт на место первой без шва. */
@keyframes studio-beg {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-home .ss-stroki__lenta {
		animation: none;
	}
}


/* Portal content and container adaptations; source animation values retained. */
.lp-home{--ss-header-h:78px;--ss-shell:1440px;--ss-gutter:20px;--ss-blok:100px;--ss-dark:#0e0e0e;--ss-accent:#25cbc2;--ss-accent-2:#1affd3;--ss-accent-ink:#0d8b84;--studio-shell:min(1440px,calc(100vw - 112px))}
.lp-header.ssh{font-family:Manrope,Arial,sans-serif;inset-inline:0;top:0}
.lp-header .ssh__inner{width:var(--studio-shell);max-width:none;min-height:78px;padding-inline:0;gap:22px}
.lp-header .lp-account{display:inline-flex;gap:9px}
.lp-header .lp-account svg{color:currentColor}
.lp-header .lp-mobile-menu{display:block;position:relative}
.lp-header .lp-mobile-menu>summary{border:0;border-radius:0;padding:0 4px;list-style:none;min-height:50px;gap:11px}
.lp-header .lp-mobile-menu>summary>span{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
.lp-header .lp-mobile-menu>summary .ssh__menu-label{font-size:15px;font-weight:500}
.lp-header .lp-mobile-menu[open]>summary .ssh__burger i{animation:none;background:var(--ssh-accent)}
.lp-header .lp-mobile-menu nav{position:absolute;right:0;top:calc(100% + 14px);width:min(300px,calc(100vw - 40px));padding:10px;background:#191c1a;border:1px solid #ffffff24;border-radius:18px;box-shadow:0 20px 60px #0009}
.lp-header .lp-mobile-menu nav a{display:flex;align-items:center;justify-content:space-between;padding:15px 14px;border-radius:9px;font-size:14px}
.lp-header .lp-mobile-menu nav a:hover{background:#ffffff08;color:#25cbc2}
.lp-header .lp-mobile-menu nav svg{width:20px;height:20px}
.lp-skip{z-index:600}
.lp-hero-inner{padding-block-start:calc(var(--ss-header-h) + clamp(70px,7vw,105px))}
.lp-catalog{scroll-margin-top:calc(var(--ss-header-h) + 24px)}
.lp-hero .studio-cta{--ss-cta-krug:50px;font-size:17px;min-block-size:66px;padding-block:8px;padding-inline-start:38px}
.lp-actions .lp-button-secondary{min-height:66px;font-size:14px}
.lp-home .ss-stroki{background:#f7f7f7;isolation:isolate}
@media(min-width:981px){.lp-art{top:calc(50% + var(--ss-header-h)/2)}}
@media(max-width:1200px){.lp-home{--studio-shell:calc(100vw - 72px)}.lp-header .ssh__inner{gap:18px}.lp-header .lp-nav{gap:18px}.lp-header .ssh__cta{font-size:13px;padding-inline:16px}}
@media(max-width:1024px){.lp-home{--ss-blok:80px}}
@media(max-width:980px){.lp-home{--studio-shell:calc(100vw - 40px)}.lp-hero-inner{padding-block-start:calc(var(--ss-header-h) + 55px)}}
@media(max-width:767px){.lp-home{--ss-header-h:62px;--ss-blok:50px}.lp-header .ssh__inner{min-height:62px;grid-template-columns:auto 1fr auto;gap:12px}.lp-header .lp-account{display:inline-flex;justify-self:center;min-block-size:40px;font-size:11px;padding-inline:12px}.lp-header .lp-account svg{width:17px;height:17px}.lp-header .lp-mobile-menu>summary{min-height:40px;width:40px;padding:0;justify-content:center}.lp-header .lp-mobile-menu>summary .ssh__menu-label{display:none}.lp-actions{align-items:stretch;flex-direction:column;max-width:440px}.lp-hero .studio-cta{width:100%}.lp-actions .lp-button-secondary{min-height:54px}}
@media(max-width:380px){.lp-home{--studio-shell:calc(100vw - 32px)}.lp-header .ssh__inner{gap:10px}.lp-header .lp-account{font-size:10px;padding-inline:10px}}
@media(hover:none){.lp-home .studio-cta:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.lp-header,.lp-header .ssh__burger i,.lp-home .studio-cta{transition:none}.lp-home .studio-cta:hover{transform:none}}