/**
 * Статья блога (`parts/statya.php`).
 *
 * Общий слой — bloki.css, карточки «Похожих материалов» — blog.css,
 * здесь только своё: первый экран статьи, текст с колонкой, вставки
 * в текст, поделиться, автор, карусель услуг.
 *
 * Виды врезки-услуги, «Читайте также» и плашек выбраны заказчиком
 * 27 сентября 2026 (каждый из пяти вариантов на витрине); витрина убрана.
 * Вставки расставляет тема, а не текст статьи: сменить вид — правка
 * шаблона вставки и её стилей, во всех статьях сразу.
 */

/* ---------------------------------------------------------- первый экран */

.ss-page .ss-statya__hero {
	padding-block-end: clamp(36px, 4vw, 56px);
}

.ss-page .ss-statya__hero-setka {
	align-items: center;
	display: grid;
	gap: clamp(24px, 4vw, 56px);
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.ss-page .ss-statya__h1 {
	color: var(--ss-dark-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: clamp(26px, 3vw, 44px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0;
	text-wrap: balance;
}

.ss-page .ss-statya__meta {
	align-items: center;
	color: rgba(255, 255, 255, 0.75);
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	gap: 10px 20px;
	list-style: none;
	margin: clamp(20px, 2.4vw, 28px) 0 0;
	padding: 0;
}

.ss-page .ss-statya__meta li {
	align-items: center;
	display: inline-flex;
	gap: 8px;
	margin: 0;
}

/*
 * Карточка автора под заголовком (E-E-A-T, 14 октября 2026): фото, имя,
 * кто это, стек и плашка «Автор». На тёмной шапке — полупрозрачная,
 * как карточки тарифов; вся карточка — ссылка на «О студии».
 */
.ss-page .ss-statya__avtor-karta {
	align-items: center;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 20px;
	color: var(--ss-dark-ink);
	display: grid;
	gap: 6px 14px;
	grid-template-columns: auto minmax(0, 1fr) auto;
	margin-block-start: clamp(20px, 2.4vw, 28px);
	max-inline-size: 580px;
	padding: 14px 16px;
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.ss-page a.ss-statya__avtor-karta:hover,
.ss-page a.ss-statya__avtor-karta:focus-visible {
	border-color: var(--ss-accent);
}

.ss-page .ss-statya__avtor-foto {
	align-self: start;
	block-size: 56px;
	border-radius: 50%;
	inline-size: 56px;
	object-fit: cover;
	/* Портрет вертикальный: квадрат — с верха кадра, иначе режется голова. */
	object-position: 50% 8%;
}

.ss-page .ss-statya__avtor-slova {
	display: grid;
	gap: 4px;
	line-height: 1.4;
	min-inline-size: 0;
}

.ss-page .ss-statya__avtor-imya {
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
}

.ss-page .ss-statya__avtor-rol {
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	/* Без «года.» одним словом на строке. */
	text-wrap: pretty;
}

.ss-page .ss-statya__avtor-stek {
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
}

.ss-page .ss-statya__avtor-metka {
	align-self: start;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	color: var(--ss-dark-ink);
	font-size: 13px;
	padding: 5px 12px;
	white-space: nowrap;
}

/* Узкий телефон: плашка уходит над именем, имя получает всю ширину. */
@media (max-width: 420px) {
	.ss-page .ss-statya__avtor-karta {
		/* Фото с плашкой — отдельной строкой от слов (14 октября 2026: «всё слиплось»). */
		gap: 16px 14px;
		grid-template-columns: auto minmax(0, 1fr);
		padding: 18px;
	}

	.ss-page .ss-statya__avtor-metka {
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
	}

	.ss-page .ss-statya__avtor-slova {
		gap: 8px;
		grid-column: 1 / -1;
	}

	.ss-page .ss-statya__avtor-stek {
		margin-block-start: 2px;
	}
}

.ss-page .ss-statya__rubrika {
	border: 1px solid var(--ss-accent);
	border-radius: 999px;
	color: var(--ss-accent);
	padding: 5px 12px;
	text-decoration: none;
}

.ss-page .ss-statya__rubrika:hover,
.ss-page .ss-statya__rubrika:focus-visible {
	background: var(--ss-accent);
	color: #0b0b0b;
}

.ss-page .ss-statya__oblozhka img {
	aspect-ratio: 16 / 9;
	block-size: auto;
	border-radius: 18px;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

@media (max-width: 1024px) {
	.ss-page .ss-statya__hero-setka {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------ текст и колонка справа */

.ss-page .ss-statya__setka {
	align-items: start;
	display: grid;
	gap: clamp(32px, 4vw, 64px);
	grid-template-columns: minmax(0, 760px) minmax(0, 320px);
	justify-content: space-between;
	padding-block: clamp(40px, 5vw, 72px) var(--ss-blok);
}

/* Колонка не выше экрана: «Нужна помощь?» и услуга — своей высоты,
   оглавление забирает остаток и прокручивается внутри, если длинное
   (слово заказчика 27 сентября 2026: на небольших мониторах не влезало). */
.ss-page .ss-statya__kolonka {
	display: flex;
	flex-direction: column;
	gap: 20px;
	inset-block-start: calc(var(--ss-header-h, 78px) + 20px);
	max-block-size: calc(100vh - var(--ss-header-h, 78px) - 40px);
	position: sticky;
}

.ss-page .ss-statya__kolonka > * {
	flex: none;
}

.ss-page .ss-statya__kolonka > .ss-statya__oglavlenie {
	flex: 0 1 auto;
	min-block-size: 120px;
}

@media (max-width: 1024px) {
	.ss-page .ss-statya__setka {
		grid-template-columns: minmax(0, 1fr);
	}

	.ss-page .ss-statya__kolonka {
		display: none;
	}
}

/* Текст статьи — удобная длина строки, заголовки нашим шрифтом. */
.ss-page .ss-statya__telo {
	color: #222222;
	font-size: 17px;
	line-height: 1.7;
}

.ss-page .ss-statya__telo > * {
	margin-block: 0 1em;
}

/* Заголовки — как были в статьях на Elementor (замер боевого 28 сентября
   2026, слово заказчика): H2 40 px заглавными, на телефоне 28; H3 22,
   на планшете и телефоне 20; H4 18; все 700, строка 1.3. */
.ss-page .ss-statya__telo :is(h2, h3, h4) {
	color: var(--ss-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.3;
	margin-block: 1.8em 0.6em;
	scroll-margin-block-start: calc(var(--ss-header-h, 78px) + 20px);
	text-transform: none;
}

/* Отступы — чтобы разделы читались разделами, а не одной простынёй
   (слово заказчика): над H2 — как было в Elementor, ~64 px, над H3 ~36. */
.ss-page .ss-statya__telo h2 {
	font-size: 40px;
	margin-block: 64px 20px;
	text-transform: uppercase;
}

.ss-page .ss-statya__telo h3 {
	font-size: 22px;
	margin-block: 36px 14px;
}

.ss-page .ss-statya__telo h4 {
	font-size: 18px;
	margin-block: 28px 12px;
}

/* Первый заголовок сразу в начале текста — без поля сверху. */
.ss-page .ss-statya__telo > :first-child {
	margin-block-start: 0;
}

@media (max-width: 1024px) {
	.ss-page .ss-statya__telo h3 {
		font-size: 20px;
	}
}

@media (max-width: 767px) {
	.ss-page .ss-statya__telo h2 {
		/* От ширины экрана: «МНОГОСТРАНИЧНЫЙ САЙТ» заглавными при 28 px
		   на 390 вылезал за колонку на 22 px (замер 14 октября 2026). */
		font-size: clamp(20px, 6.4vw, 28px);
		hyphens: auto;
		margin-block: 48px 16px;
	}

	.ss-page .ss-statya__telo h3 {
		margin-block-start: 32px;
	}
}

.ss-page .ss-statya__telo :is(ul, ol) {
	padding-inline-start: 1.3em;
}

.ss-page .ss-statya__telo li {
	margin-block: 0.35em;
}

.ss-page .ss-statya__telo li::marker {
	color: var(--ss-accent-ink, #1a9e97);
	font-weight: 600;
}

/* Списки текста — выбор заказчика 28 сентября 2026 из пяти: нумерованный —
   «шаги на линии» (номер в бирюзовом кольце, кольца соединены линией),
   с точками — короткая бирюзовая черта. Не трогают: «Плюсы» и «Минусы»
   (свои стили списка) и списки внутри плашек и вставок темы. */
.ss-page .ss-statya__telo :is(ol, ul):not([class*="is-style-ss-"], .ss-plashka *, .ss-vrezka *, .ss-chitat *) {
	counter-reset: ss-punkt;
	list-style: none;
	padding-inline-start: 0;
}

/* flow-root — отступы содержимого пункта (в «Сайтах на ИИ» в пунктах
   стоят H4) остаются внутри него: иначе они выпадали между пунктами,
   и линия шагов рвалась. Первый элемент — вровень с кольцом. */
.ss-page .ss-statya__telo :is(ol, ul):not([class*="is-style-ss-"], .ss-plashka *, .ss-vrezka *, .ss-chitat *) > li {
	counter-increment: ss-punkt;
	display: flow-root;
	position: relative;
}

.ss-page .ss-statya__telo :is(ol, ul):not([class*="is-style-ss-"], .ss-plashka *, .ss-vrezka *, .ss-chitat *) > li > :first-child {
	margin-block-start: 0;
}

/* Заголовок пункта — строкой в высоту кольца, по его центру. */
.ss-page .ss-statya__telo ol:not(.ss-plashka *, .ss-vrezka *, .ss-chitat *) > li > :is(h3, h4):first-child {
	line-height: 30px;
}

.ss-page .ss-statya__telo :is(ol, ul):not([class*="is-style-ss-"], .ss-plashka *, .ss-vrezka *, .ss-chitat *) > li > :last-child {
	margin-block-end: 0;
}

.ss-page .ss-statya__telo :is(ol, ul):not([class*="is-style-ss-"], .ss-plashka *, .ss-vrezka *, .ss-chitat *) > li::before {
	inset-inline-start: 0;
	position: absolute;
}

.ss-page .ss-statya__telo ol:not(.ss-plashka *, .ss-vrezka *, .ss-chitat *) > li {
	margin: 0;
	padding-block-end: 18px;
	padding-inline-start: 48px;
}

.ss-page .ss-statya__telo ol:not(.ss-plashka *, .ss-vrezka *, .ss-chitat *) > li::before {
	align-items: center;
	background: #ffffff;
	block-size: 30px;
	border: 2px solid #25cbc2;
	border-radius: 50%;
	box-sizing: border-box;
	color: #1a9e97;
	content: counter(ss-punkt);
	display: flex;
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	inline-size: 30px;
	inset-block-start: 0;
	justify-content: center;
	z-index: 1;
}

/* Линия от кольца к следующему; у последнего пункта её нет. */
.ss-page .ss-statya__telo ol:not(.ss-plashka *, .ss-vrezka *, .ss-chitat *) > li::after {
	background: #cdeeeb;
	content: "";
	inline-size: 2px;
	inset-block: 30px 0;
	inset-inline-start: 14px;
	position: absolute;
}

.ss-page .ss-statya__telo ol:not(.ss-plashka *, .ss-vrezka *, .ss-chitat *) > li:last-child::after {
	content: none;
}

.ss-page .ss-statya__telo ul:not([class*="is-style-ss-"], .ss-plashka *, .ss-vrezka *, .ss-chitat *) > li {
	margin-block: 10px;
	padding-inline-start: 30px;
}

.ss-page .ss-statya__telo ul:not([class*="is-style-ss-"], .ss-plashka *, .ss-vrezka *, .ss-chitat *) > li::before {
	background: #25cbc2;
	block-size: 2px;
	content: "";
	inline-size: 14px;
	inset-block-start: 0.85em;
}

.ss-page .ss-statya__telo a {
	color: var(--ss-accent-ink, #1a9e97);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ss-page .ss-statya__telo img {
	block-size: auto;
	border-radius: 12px;
	max-inline-size: 100%;
}

/* Таблицы текста (блок «Таблица»): тёмная шапка шрифтом заголовков,
   строки через одну светлее. Узкий экран — таблица листается вбок
   внутри своей рамки, страница не разъезжается. */
.ss-page .ss-statya__telo .wp-block-table {
	margin-block: 1.6em;
	overflow-x: auto;
}

.ss-page .ss-statya__telo .wp-block-table table {
	background: #ffffff;
	border: 1px solid #e3e3e3;
	border-collapse: separate;
	border-radius: 14px;
	border-spacing: 0;
	font-size: 15px;
	line-height: 1.5;
	overflow: hidden;
	inline-size: 100%;
	table-layout: auto;
}

/* Три колонки и больше на телефоне не сжимаем в нечитаемые столбики. */
.ss-page .ss-statya__telo .wp-block-table table:has(tr > :nth-child(3)) {
	min-inline-size: 560px;
}

/* Сетку ячеек рисуем сами: у блока WordPress рамка тёмная со всех сторон. */
.ss-page .ss-statya__telo .wp-block-table :is(th, td) {
	border: 0;
	border-block-end: 1px solid #ececec;
	padding: 12px 14px;
	text-align: start;
	vertical-align: top;
}

.ss-page .ss-statya__telo .wp-block-table thead th {
	background: #121414;
	border-block-end: 0;
	color: #ffffff;
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
}

.ss-page .ss-statya__telo .wp-block-table tbody tr:nth-child(even) td {
	background: #f5f9f9;
}

.ss-page .ss-statya__telo .wp-block-table tbody tr:last-child td {
	border-block-end: 0;
}

/* Слова в ячейках — только целиком: общее правило «переносить где
   угодно» рвало «Zenlink.r / u» и «Теле / фоны». Колонка тогда не уже
   самого длинного слова; не помещается — таблица листается вбок. */
.ss-page .ss-statya__telo .wp-block-table :is(th, td) {
	hyphens: manual;
	overflow-wrap: normal;
	word-break: normal;
}

.ss-page .ss-statya__telo .wp-block-table td:first-child {
	font-weight: 600;
}

/* Пять колонок и больше — плотнее, чтобы на ПК встать в колонку текста. */
.ss-page .ss-statya__telo .wp-block-table table:has(tr > :nth-child(5)) {
	font-size: 14px;
}

.ss-page .ss-statya__telo .wp-block-table table:has(tr > :nth-child(5)) :is(th, td) {
	padding-inline: 10px;
}

.ss-page .ss-statya__telo .wp-block-table table:has(tr > :nth-child(5)) thead th {
	font-size: 12px;
}

/* Картинки открываются во весь экран — галереей сайта (bloki.js,
   `data-ss-galereya` / `data-ss-foto`); ссылку на файл ставит тема. */
.ss-page .ss-statya__telo a[data-ss-foto] {
	cursor: zoom-in;
	display: inline-block;
	max-inline-size: 100%;
}

/* Плюсы и минусы — стиль списка «Плюсы» / «Минусы» (в Elementor —
   списки с иконками «+» и «−»): кружок со знаком вместо маркера. */
.ss-page .ss-statya__telo ul:is(.is-style-ss-plyusy, .is-style-ss-minusy) {
	list-style: none;
	padding-inline-start: 0;
}

/* Значок — слева от пункта, текст — обычным абзацем: гибкая строка
   разносила жирное начало пункта и остальной текст в две колонки. */
.ss-page .ss-statya__telo ul:is(.is-style-ss-plyusy, .is-style-ss-minusy) > li {
	padding-inline-start: 36px;
	position: relative;
}

.ss-page .ss-statya__telo ul:is(.is-style-ss-plyusy, .is-style-ss-minusy) > li::before {
	block-size: 24px;
	border-radius: 50%;
	content: "";
	inline-size: 24px;
	inset-block-start: 0.2em;
	inset-inline-start: 0;
	position: absolute;
}

.ss-page .ss-statya__telo ul.is-style-ss-plyusy > li::before {
	background:
		linear-gradient(#1a9e97, #1a9e97) no-repeat 50% / 10px 2px,
		linear-gradient(#1a9e97, #1a9e97) no-repeat 50% / 2px 10px,
		rgba(37, 203, 194, 0.16);
}

.ss-page .ss-statya__telo ul.is-style-ss-minusy > li::before {
	background:
		linear-gradient(#6b7780, #6b7780) no-repeat 50% / 10px 2px,
		rgba(16, 20, 24, 0.07);
}

.ss-page .ss-statya__telo :is(pre, code) {
	background: #f1f3f3;
	border-radius: 6px;
	font-size: 0.9em;
}

.ss-page .ss-statya__telo code {
	padding: 0.1em 0.35em;
}

.ss-page .ss-statya__telo pre {
	overflow-x: auto;
	padding: 16px;
}

/* ------------------------------------------------------------- оглавление */

.ss-page .ss-statya__kolonka-zag {
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 12px;
}

.ss-page .ss-statya__oglavlenie {
	background: #ffffff;
	border: 1px solid #e3e3e3;
	border-radius: 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 20px;
	scrollbar-color: #cfd8d8 transparent;
	scrollbar-width: thin;
}

.ss-page .ss-oglavlenie {
	counter-reset: ss-og;
	display: grid;
	font-size: 14px;
	gap: 4px;
	line-height: 1.4;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ss-page .ss-oglavlenie ol {
	display: grid;
	gap: 2px;
	list-style: none;
	margin: 2px 0 4px;
	padding: 0;
}

.ss-page .ss-oglavlenie li {
	margin: 0;
}

/* Общее для всех видов: текст тёмный (серый сливался), пункт — блоком
   с полем, чтобы подсветка текущего читалась плашкой. */
.ss-page .ss-oglavlenie a {
	border-radius: 8px;
	color: #1b1b1b;
	display: block;
	padding: 5px 8px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.ss-page .ss-oglavlenie ol a {
	color: #4a4a4a;
	font-size: 13px;
}

.ss-page .ss-oglavlenie a:hover,
.ss-page .ss-oglavlenie a:focus-visible {
	background: #f1f6f6;
	color: var(--ss-accent-ink, #1a9e97);
}

/* Текущий раздел — подсвечивает statya.js. */
.ss-page .ss-oglavlenie a.is-tut {
	background: #e6f6f5;
	color: var(--ss-accent-ink, #1a9e97);
	font-weight: 600;
}

.ss-page .ss-oglavlenie a.is-roditel {
	color: var(--ss-accent-ink, #1a9e97);
}

.ss-page .ss-oglavlenie > li > a:is(.is-tut, .is-roditel)::before {
	color: var(--ss-accent-ink, #1a9e97);
}

/* Разделы — с номерами, подпункты — на линии под своим разделом
   (вид выбран заказчиком 27 сентября 2026 из четырёх). Номер серый,
   зелёный — только у раздела, который сейчас читают. */
.ss-page .ss-oglavlenie > li {
	counter-increment: ss-og;
}

.ss-page .ss-oglavlenie > li > a {
	font-weight: 500;
	padding-inline-start: 34px;
	position: relative;
}

.ss-page .ss-oglavlenie > li > a::before {
	color: #b3b3b3;
	content: counter(ss-og, decimal-leading-zero);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 11px;
	font-weight: 700;
	inset-block-start: 7px;
	inset-inline-start: 8px;
	position: absolute;
}

.ss-page .ss-oglavlenie ol {
	border-inline-start: 1.5px solid #d9e6e5;
	margin-inline-start: 20px;
	padding-inline-start: 6px;
}

/* На телефоне и планшете — липкая строка под шапкой (решение
   27 сентября 2026): «Содержание · текущий раздел» и полоска прогресса
   чтения; тап раскрывает оглавление панелью, пункт — закрывает её.
   Это <details>: без скрипта — просто раскрывающееся «Содержание». */
.ss-page .ss-statya__oglavlenie-tel {
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	border: 1px solid #e3e3e3;
	border-radius: 14px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
	display: none;
	inset-block-start: var(--ss-og-verh, 78px);
	margin-block-end: 28px;
	overflow: hidden;
	position: sticky;
	z-index: 20;
}

.ss-page .ss-statya__oglavlenie-tel summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 10px;
	list-style: none;
	min-block-size: 48px;
	padding: 10px 16px;
	position: relative;
}

.ss-page .ss-statya__oglavlenie-tel summary::-webkit-details-marker {
	display: none;
}

.ss-page .ss-statya__og-nad {
	flex: none;
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
}

/* Текущий раздел — после точки, в одну строку с многоточием. */
.ss-page .ss-statya__og-tekushchij {
	color: #6b6b6b;
	flex: 1;
	font-size: 13px;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ss-page .ss-statya__og-tekushchij:not(:empty)::before {
	color: var(--ss-accent-ink, #1a9e97);
	content: "· ";
}

/* Шеврон — поворачивается при раскрытии. */
.ss-page .ss-statya__oglavlenie-tel summary::after {
	block-size: 8px;
	border-block-end: 2px solid #1b1b1b;
	border-inline-end: 2px solid #1b1b1b;
	content: "";
	flex: none;
	inline-size: 8px;
	margin-inline-start: auto;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}

.ss-page .ss-statya__oglavlenie-tel[open] summary::after {
	transform: translateY(2px) rotate(-135deg);
}

/* Полоска прогресса чтения — по низу строки; ширину ставит statya.js. */
.ss-page .ss-statya__og-progress {
	background: var(--ss-accent);
	block-size: 3px;
	inline-size: var(--ss-progress, 0%);
	inset-block-end: 0;
	inset-inline-start: 0;
	position: absolute;
	transition: inline-size 0.15s linear;
}

.ss-page .ss-statya__oglavlenie-tel > .ss-oglavlenie {
	border-block-start: 1px solid #ececec;
	max-block-size: 60vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 10px 10px 12px;
}

@media (max-width: 1024px) {
	.ss-page .ss-statya__oglavlenie-tel {
		display: block;
	}

	/* Переход по пункту: заголовок встаёт ниже липкой строки, а не под ней. */
	.ss-page .ss-statya__telo :is(h2, h3, h4) {
		scroll-margin-block-start: calc(var(--ss-og-verh, 78px) + 64px);
	}
}

/* ------------------------------------------ «Нужна помощь?» и услуга */

.ss-page .ss-statya__pomosch {
	background: linear-gradient(160deg, #111111, #1f1f1f);
	border-radius: 16px;
	color: var(--ss-dark-ink);
	padding: 20px;
}

/* «Нужна помощь?» — заголовок и кнопка на форму. */
.ss-page .ss-statya__pomosch .ss-statya__kolonka-zag {
	margin-block-end: 14px;
}

.ss-page .ss-statya__pomosch-knopka {
	inline-size: 100%;
	text-decoration: none;
}

.ss-page .ss-statya__kanaly {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.ss-page .ss-statya__kanaly a {
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	color: var(--ss-dark-ink);
	display: inline-flex;
	font-size: 13px;
	gap: 6px;
	min-block-size: 36px;
	padding: 0 12px 0 6px;
	text-decoration: none;
}

.ss-page .ss-statya__kanaly a:hover,
.ss-page .ss-statya__kanaly a:focus-visible {
	border-color: var(--ss-accent);
}

.ss-page .ss-statya__telefon {
	color: var(--ss-dark-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
}

.ss-page .ss-statya__usluga {
	background: radial-gradient(120% 90% at 0% 0%, rgba(37, 203, 194, 0.16), transparent 60%), #121414;
	border-radius: 16px;
	color: var(--ss-dark-ink);
	display: grid;
	gap: 6px;
	padding: 20px;
	text-decoration: none;
}

.ss-page .ss-statya__usluga-nad {
	color: var(--ss-accent);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ss-page .ss-statya__usluga-zag {
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.ss-page .ss-statya__usluga-cena {
	color: var(--ss-dark-muted);
	font-size: 14px;
}

/* Мокап услуги — в правом нижнем углу, выходит за край карточки,
   как картинки тарифов на главной. Карточке — поле снизу под него
   и позиционирование; слова — поверх, левее мокапа. */
.ss-page .ss-statya__usluga--mokap {
	padding-block-end: 76px;
	position: relative;
}

.ss-page .ss-statya__usluga--mokap > :is(picture, .ss-statya__usluga-mokap) {
	display: block;
	inset-block-end: -22px;
	inset-inline-end: -18px;
	pointer-events: none;
	position: absolute;
}

/* Мокапы разной формы: ноутбук широкий, телефон ИИ консультанта
   и ноутбук Директа — высокие. Потолок и по ширине, и по высоте:
   широкий — во всю ширину угла, высокий — ниже заголовка. */
.ss-page .ss-statya__usluga-mokap {
	block-size: auto;
	display: block;
	inline-size: auto;
	max-block-size: 112px;
	max-inline-size: 170px;
}

/* «Подробнее» — компактная кнопка в левом нижнем углу, рядом с мокапом.
   Вся карточка — ссылка, кнопка — её надпись (слово заказчика
   27 сентября 2026: «сюда нужно вместить кнопку»). */
.ss-page .ss-statya__usluga-knopka {
	align-items: center;
	align-self: start;
	background: linear-gradient(90deg, var(--ss-accent-2, #1de9b6), var(--ss-accent));
	border-radius: 999px;
	color: #0b0b0b;
	display: inline-flex;
	font-size: 13px;
	font-weight: 500;
	gap: 6px;
	margin-block-start: 12px;
	padding: 9px 14px;
	position: relative;
	z-index: 2;
}

.ss-page .ss-statya__usluga--mokap .ss-statya__usluga-knopka {
	inset-block-end: 20px;
	inset-inline-start: 20px;
	margin: 0;
	position: absolute;
}

.ss-page .ss-statya__usluga-knopka svg {
	transition: transform 0.25s ease;
}

@media (hover: hover) {
	.ss-page .ss-statya__usluga:hover .ss-statya__usluga-knopka svg {
		transform: translateX(3px);
	}
}

@media (hover: hover) {
	.ss-page .ss-statya__usluga--mokap > :is(picture, .ss-statya__usluga-mokap) {
		transition: transform 0.3s ease;
	}

	.ss-page .ss-statya__usluga--mokap:hover > :is(picture, .ss-statya__usluga-mokap) {
		transform: translateY(-4px);
	}
}

/* -------------------------------------------------- поделиться и автор */

.ss-page .ss-statya__podelitsya {
	align-items: center;
	border-block: 1px solid #e3e3e3;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	margin-block-start: 40px;
	padding-block: 20px;
}

.ss-page .ss-statya__podelitsya p {
	font-weight: 500;
	margin: 0;
}

.ss-page .ss-statya__podelitsya ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ss-page .ss-statya__set {
	border-radius: 999px;
	color: #ffffff;
	display: inline-flex;
	font-size: 14px;
	min-block-size: 40px;
	padding: 10px 16px;
	text-decoration: none;
}

.ss-page .ss-statya__set--vk { background: #0077ff; }
.ss-page .ss-statya__set--tg { background: #229ed9; }
.ss-page .ss-statya__set--wa { background: #25d366; }

.ss-page .ss-statya__set:hover,
.ss-page .ss-statya__set:focus-visible {
	color: #ffffff;
	opacity: 0.88;
}

.ss-page .ss-statya__ob-avtore {
	background: #f7f7f7;
	border-radius: 18px;
	display: grid;
	gap: 14px;
	margin-block-start: 28px;
	padding: 22px 24px;
}

/* Фото слева от имени, текст — ниже во всю ширину. */
.ss-page .ss-statya__ob-avtore-shapka {
	align-items: center;
	display: flex;
	gap: 14px;
}

.ss-page .ss-statya__ob-avtore-foto {
	block-size: 64px;
	border-radius: 50%;
	flex: none;
	inline-size: 64px;
	object-fit: cover;
	object-position: 50% 8%;
}

.ss-page .ss-statya__ob-avtore p {
	margin: 0;
}

.ss-page .ss-statya__ob-avtore-nad {
	color: var(--ss-accent-ink, #1a9e97);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ss-page .ss-statya__ob-avtore-imya {
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
	margin-block-start: 4px !important;
}

.ss-page .ss-statya__ob-avtore-tekst {
	/* Тёплая жёлтая плашка — понравилась заказчику у заглушки (27 сентября 2026). */
	background: #fff4d6;
	border-radius: 10px;
	color: #4a4a4a;
	line-height: 1.55;
	padding: 10px 14px;
}

/* Факты и рейтинг — строкой пилюль под описанием автора. */
.ss-page .ss-statya__fakty {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ss-page .ss-statya__fakty li {
	background: #ffffff;
	border: 1px solid #e3e3e3;
	border-radius: 999px;
	color: #1b1b1b;
	font-size: 13px;
	font-weight: 500;
	margin: 0;
	padding: 6px 12px;
}

.ss-page .ss-statya__fakty li:has(.ss-statya__reyting) {
	padding: 0;
}

.ss-page .ss-statya__reyting {
	color: #1b1b1b;
	display: inline-block;
	padding: 6px 12px;
	text-decoration: none;
}

.ss-page .ss-statya__reyting span {
	color: #f5b301;
}

.ss-page .ss-statya__reyting:hover,
.ss-page .ss-statya__reyting:focus-visible {
	color: var(--ss-accent-ink, #1a9e97);
}

/* Лента работ в статье — светлый раздел, как на страницах услуг. */
.ss-page.ss-statya .ss-lenta-rabot {
	padding-block: var(--ss-blok) 0;
}

.ss-page .ss-zaglushka {
	background: #fff4d6;
	border-radius: 6px;
	padding: 6px 10px;
}

/* ------------------------------------------ карусель услуг и похожие
   Карточки услуг — как тарифы главной (вид выбран заказчиком
   27 сентября 2026 из пяти): тёмная с бирюзовым отливом, название,
   цена, кнопка «Подробнее», ноутбук с сайтом выходит из угла. Прежний
   вид повторял надпись баннера ещё раз заголовком — баннера больше нет.
   Цена и ноутбук — со страниц услуг (`ssc_statya_usluga()`). */

.ss-page .ss-statya__uslugi,
.ss-page .ss-statya__pohozhie {
	padding-block: var(--ss-blok);
}

/* Услуги сразу за статьёй (вопросов нет): два отступа по 100 px давали
   пустоту в 200 (слово заказчика) — остаётся один, поменьше. */
.ss-page .ss-statya__setka:has(+ .ss-statya__uslugi) {
	padding-block-end: clamp(40px, 5vw, 72px);
}

.ss-page .ss-statya__setka + .ss-statya__uslugi {
	padding-block-start: 0;
}

.ss-page .ss-statya__pohozhie .ss-razdel__zag {
	margin-block-end: clamp(24px, 3vw, 40px);
}

/* Поле снизу — под ноутбук, выходящий за край карточки: лента обрезает
   всё, что за ней. */
.ss-page .ss-statya__uslugi-lenta {
	--ss-kartochka: calc((100% - 40px) / 3);

	padding-block: 4px 32px;
}

@media (max-width: 1024px) {
	.ss-page .ss-statya__uslugi-lenta {
		--ss-kartochka: calc((100% - 20px) / 2);
	}
}

@media (max-width: 767px) {
	.ss-page .ss-statya__uslugi-lenta {
		--ss-kartochka: 100%;
	}
}

/* Компьютер: три услуги — все на экране, листать нечего. Не карусель,
   а сетка: у прокручиваемой ленты ноутбук крайней карточки выступает
   за край, лента сдвигалась мышью на эти пиксели, и карточки дёргались
   при наведении (заказчик, 28 сентября 2026). Карусель — только на
   планшете (по две) и телефоне (по одной). */
@media (min-width: 1025px) {
	.ss-page .ss-statya__uslugi .ss-strelki {
		display: none;
	}

	.ss-page .ss-statya__uslugi-lenta {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		overflow: visible;
		scroll-snap-type: none;
	}
}

.ss-page .ss-uk {
	background: radial-gradient(120% 90% at 0% 0%, rgba(37, 203, 194, 0.16), transparent 60%), #121414;
	container-type: inline-size;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 20px;
	color: var(--ss-dark-ink);
	display: flex;
	flex-direction: column;
	gap: 10px;
	isolation: isolate;
	padding: 24px 24px 84px;
	position: relative;
	transition: transform 0.25s ease;
}

.ss-page .ss-uk__zag {
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	text-transform: none;
}

/* Ссылка — на названии, растянута на всю карточку. */
.ss-page .ss-uk__zag a {
	color: inherit;
	text-decoration: none;
}

.ss-page .ss-uk__zag a::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 3;
}

.ss-page .ss-uk__cena {
	color: var(--ss-accent);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 22px;
	font-weight: 600;
	margin: 0;
}

.ss-page .ss-uk__knopka {
	align-items: center;
	background: linear-gradient(90deg, var(--ss-accent-2, #1de9b6), var(--ss-accent));
	border-radius: 999px;
	color: #0b0b0b;
	display: inline-flex;
	font-size: 14px;
	gap: 6px;
	inset-block-end: 24px;
	inset-inline-start: 24px;
	padding: 10px 16px;
	position: absolute;
	z-index: 2;
}

/* Картинка — прямым потомком или внутри <picture> (плагин WebP).
   Формы разные: ноутбук широкий, график SEO, ноутбук Директа и телефон
   ИИ консультанта — высокие. Потолок и по ширине, и по высоте, угол —
   правый нижний у всех. */
.ss-page .ss-uk > :is(picture, .ss-uk__mokap) {
	display: block;
	inset-block-end: -26px;
	inset-inline-end: -14px;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.ss-page .ss-uk__mokap {
	block-size: auto;
	display: block;
	inline-size: auto;
	max-block-size: 140px;
	max-inline-size: min(220px, 58cqi);
}

@media (hover: hover) {
	.ss-page .ss-uk:hover {
		transform: translateY(-3px);
	}
}

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

/* ============================================================ вставки */

/* Общее для вставок в текст: отступы как у абзаца, ширина — текста. */
.ss-page :is(.ss-vrezka, .ss-chitat, .ss-plashka) {
	margin-block: 1.6em;
}

/* --------------------------------------------------- врезка-услуга
   Вид выбран заказчиком 27 сентября 2026 (из пяти — вариант 4): тёмная
   карточка, слева обложка страницы услуги. Обложки услуг — баннеры 16:9
   с крупной надписью: обрезать их нельзя, надпись ломается, поэтому
   баннер целиком, в своей пропорции, скруглённой миниатюрой с полем. */

.ss-page .ss-vrezka {
	align-items: center;
	background: #121414;
	border-radius: 18px;
	color: var(--ss-dark-ink);
	display: grid;
	gap: 16px 24px;
	grid-template-columns: 200px minmax(0, 1fr) auto;
	padding: 12px 24px 12px 12px;
}

/* Картинка — прямым потомком или внутри <picture> (плагин WebP
   оборачивает): размер задаём той обёртке, что стоит в сетке. */
.ss-page .ss-vrezka > :is(picture, .ss-vrezka__kartinka) {
	display: block;
	inline-size: 200px;
}

.ss-page .ss-vrezka__kartinka {
	aspect-ratio: 16 / 9;
	block-size: auto;
	border-radius: 10px;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

/* У страницы услуги нет обложки — без картинки, с обычным полем. */
.ss-page .ss-vrezka:not(:has(.ss-vrezka__kartinka)) {
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 22px 24px;
}

.ss-page .ss-vrezka p {
	margin: 0;
}

.ss-page .ss-vrezka__slova {
	padding-block: 6px;
}

.ss-page .ss-vrezka__nad {
	color: var(--ss-accent);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ss-page .ss-vrezka__zag {
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	margin-block: 6px !important;
}

.ss-page .ss-vrezka__cena {
	color: var(--ss-dark-muted);
	font-size: 15px;
}

/* Ссылки текста статьи — бирюзовые с подчёркиванием; кнопка во врезке
   стоит внутри текста, и без этого правила надпись на ней серела. */
.ss-page .ss-statya__telo .ss-vrezka .ss-cta {
	color: #0b0b0b;
	text-decoration: none;
}

/* Ссылка — название услуги, растянутая на всю карточку. */
.ss-page .ss-vrezka {
	position: relative;
}

.ss-page .ss-statya__telo .ss-vrezka .ss-vrezka__ssylka {
	color: inherit;
	text-decoration: none;
}

.ss-page .ss-vrezka__ssylka::after {
	border-radius: 18px;
	content: "";
	inset: 0;
	position: absolute;
}

/* Кнопка — только вид: у .ss-cta свой слой (position, isolation), и без
   этого нажатие по ней не доходило до ссылки под ней. */
.ss-page .ss-vrezka .ss-vrezka__knopka {
	pointer-events: none;
}

.ss-page .ss-vrezka__ssylka:focus-visible {
	outline: none;
}

.ss-page .ss-vrezka:has(.ss-vrezka__ssylka:focus-visible) {
	outline: 2px solid var(--ss-accent);
	outline-offset: 3px;
}

@media (hover: hover) {
	.ss-page .ss-vrezka:has(.ss-vrezka__ssylka:hover) .ss-cta {
		transform: translateY(-2px);
	}
}

@media (max-width: 767px) {
	.ss-page .ss-vrezka,
	.ss-page .ss-vrezka:not(:has(.ss-vrezka__kartinka)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.ss-page .ss-vrezka {
		padding: 12px 12px 22px;
	}

	.ss-page .ss-vrezka > :is(picture, .ss-vrezka__kartinka) {
		inline-size: 100%;
	}

	.ss-page .ss-vrezka :is(.ss-vrezka__slova, .ss-cta) {
		margin-inline: 10px;
	}
}

/* --------------------------------------------------- «Читайте также»
   Вид выбран заказчиком 27 сентября 2026 (из пяти с обложкой — вариант 5):
   светло-бирюзовая подложка, слова слева, обложка справа; внизу время
   чтения с часами и кнопка «Читать» со стрелкой, как полоса «Читать»
   у карточек ленты. */

.ss-page .ss-chitat {
	align-items: center;
	background: #eef7f6;
	/* Рамка в тон подложки, как у плашек: на светлом фоне страницы
	   одна подложка сливалась (слово заказчика 27 сентября 2026). */
	border: 1px solid color-mix(in srgb, var(--ss-accent) 35%, transparent);
	border-radius: 16px;
	column-gap: 20px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 160px;
	padding: 14px 14px 14px 22px;
	position: relative;
	row-gap: 6px;
}

/* Обложка — прямым потомком или внутри <picture> (плагин WebP). */
.ss-page .ss-chitat > :is(picture, .ss-chitat__kartinka) {
	display: block;
	grid-column: 2;
	grid-row: 1 / span 3;
	inline-size: 160px;
}

.ss-page .ss-chitat__kartinka {
	aspect-ratio: 16 / 10;
	block-size: auto;
	border-radius: 10px;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

/* Векторная обложка — схема с логотипами («Купить плагины»): целиком,
   без кадрирования, иначе логотипы режутся по краю. */
.ss-page .ss-chitat__kartinka[src$=".svg"] {
	background: #121414;
	box-sizing: border-box;
	object-fit: contain;
	padding: 8px;
}

.ss-page .ss-chitat > :is(.ss-chitat__nad, .ss-chitat__ssylka, .ss-chitat__cena, .ss-chitat__niz) {
	grid-column: 1;
}

/* Логотип + «Перейти на сайт» (класс абзаца ss-logo-ssylka, «Вечные
   ссылки»): как в Elementor — тёмная карточка во всю колонку, логотип
   крупно по центру (он белый, под тёмный фон), под ним кнопка. Фон
   и кнопка — те же, что у промокода. */
.ss-page .ss-statya__telo p.ss-logo-ssylka {
	align-items: center;
	background:
		radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, #25cbc2 22%, transparent), transparent 60%),
		#121414;
	border-radius: 18px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 32px 24px;
}

.ss-page .ss-statya__telo p.ss-logo-ssylka br {
	display: none;
}

.ss-page .ss-statya__telo p.ss-logo-ssylka img {
	block-size: 64px;
	border-radius: 0;
	inline-size: auto;
	max-inline-size: min(100%, 460px);
	object-fit: contain;
}

.ss-page .ss-statya__telo p.ss-logo-ssylka a {
	background: #25cbc2;
	border-radius: 999px;
	color: #0b0b0b;
	font-size: 15px;
	font-weight: 600;
	padding: 14px 24px;
	text-decoration: none;
	transition: background-color 0.2s;
}

.ss-page .ss-statya__telo p.ss-logo-ssylka a:hover,
.ss-page .ss-statya__telo p.ss-logo-ssylka a:focus-visible {
	background: #ffffff;
}

@media (max-width: 767px) {
	.ss-page .ss-statya__telo p.ss-logo-ssylka img {
		block-size: 44px;
	}
}

/* Итог раздела ([ss_itog]): значок слева, над ним подпись, ниже — кто. */
.ss-page .ss-itog {
	align-items: center;
	background: #ffffff;
	border: 1px solid color-mix(in srgb, #25cbc2 35%, transparent);
	border-radius: 14px;
	column-gap: 14px;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	margin-block: 1.6em;
	padding: 12px 16px;
}

.ss-page .ss-itog > :is(picture, .ss-itog__znak) {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.ss-page .ss-itog > :is(.ss-itog__nad, .ss-itog__kto) {
	grid-column: 2;
}

/* Без значка — одна колонка, строка по центру плашки. */
.ss-page .ss-itog:not(:has(.ss-itog__znak)) {
	grid-template-columns: minmax(0, 1fr);
	padding-block: 18px;
	text-align: center;
}

.ss-page .ss-itog:not(:has(.ss-itog__znak)) > :is(.ss-itog__nad, .ss-itog__kto) {
	grid-column: 1;
}

.ss-page .ss-itog__znak {
	block-size: 56px;
	display: block;
	inline-size: 56px;
	object-fit: contain;
}

.ss-page .ss-itog__nad {
	align-self: end;
	color: var(--ss-accent-ink, #1a9e97);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ss-page .ss-itog__kto {
	align-self: start;
	color: var(--ss-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 18px;
	font-weight: 700;
}

/* Промокод партнёра ([ss_promokod]): тёмная карточка, как в Elementor, —
   скидка крупно, код на пунктирной плашке, кнопка. Узко — столбиком. */
.ss-page .ss-statya__telo .ss-promokod {
	align-items: center;
	background:
		radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, #25cbc2 22%, transparent), transparent 60%),
		#121414;
	border-radius: 18px;
	color: #ffffff;
	display: grid;
	gap: 16px 24px;
	grid-template-columns: auto minmax(0, 1fr) auto;
	margin-block: 1.6em;
	padding: 22px 28px;
}

.ss-page .ss-statya__telo .ss-promokod p {
	margin: 0;
}

.ss-page .ss-statya__telo .ss-promokod__skidka {
	display: grid;
	line-height: 1.1;
}

.ss-page .ss-statya__telo .ss-promokod__chislo {
	color: #25cbc2;
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 48px;
	font-weight: 700;
	white-space: nowrap;
}

.ss-page .ss-statya__telo .ss-promokod__tekst {
	font-size: 15px;
	font-weight: 600;
}

.ss-page .ss-statya__telo .ss-promokod__kod {
	border: 1.5px dashed color-mix(in srgb, #25cbc2 70%, transparent);
	border-radius: 12px;
	display: grid;
	gap: 2px;
	justify-items: center;
	padding: 10px 16px;
}

.ss-page .ss-statya__telo .ss-promokod__podpis {
	color: #9aa3a3;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ss-page .ss-statya__telo .ss-promokod__kod code {
	background: none;
	color: #ffffff;
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 20px;
	font-weight: 700;
	padding: 0;
	text-transform: uppercase;
	user-select: all;
}

.ss-page .ss-statya__telo .ss-promokod__knopka {
	background: #25cbc2;
	border-radius: 999px;
	color: #0b0b0b;
	font-size: 15px;
	font-weight: 600;
	padding: 14px 22px;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s;
	white-space: nowrap;
}

.ss-page .ss-statya__telo .ss-promokod__knopka:hover,
.ss-page .ss-statya__telo .ss-promokod__knopka:focus-visible {
	background: #ffffff;
}

@media (max-width: 767px) {
	.ss-page .ss-statya__telo .ss-promokod {
		grid-template-columns: minmax(0, 1fr);
		padding: 22px 20px;
		text-align: center;
	}

	.ss-page .ss-statya__telo .ss-promokod__chislo {
		font-size: 40px;
	}
}

/* Предложение партнёра ([ss_partner]): та же тёмная карточка, что
   у промокода, — логотип слева, надпись и кнопка справа. */
.ss-page .ss-statya__telo .ss-partner {
	align-items: center;
	background:
		radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, #25cbc2 22%, transparent), transparent 60%),
		#121414;
	border-radius: 18px;
	color: #ffffff;
	display: grid;
	gap: 20px 32px;
	grid-template-columns: minmax(0, 1fr) auto;
	justify-items: center;
	margin-block: 1.6em;
	padding: 26px 32px;
}

.ss-page .ss-statya__telo .ss-partner__logo {
	block-size: 56px;
	border-radius: 0;
	inline-size: auto;
	max-inline-size: 100%;
	object-fit: contain;
}

.ss-page .ss-statya__telo .ss-partner__deistvie {
	display: grid;
	gap: 12px;
	justify-items: center;
}

.ss-page .ss-statya__telo .ss-partner__tekst {
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}

.ss-page .ss-statya__telo .ss-partner__knopka {
	background: #25cbc2;
	border-radius: 999px;
	color: #0b0b0b;
	font-size: 15px;
	font-weight: 600;
	padding: 14px 24px;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s;
}

.ss-page .ss-statya__telo .ss-partner__knopka:hover,
.ss-page .ss-statya__telo .ss-partner__knopka:focus-visible {
	background: #ffffff;
}

@media (max-width: 767px) {
	.ss-page .ss-statya__telo .ss-partner {
		grid-template-columns: minmax(0, 1fr);
		padding: 24px 20px;
		text-align: center;
	}

	.ss-page .ss-statya__telo .ss-partner__logo {
		block-size: 44px;
	}
}

/* Тарифы в тексте (группа ss-tarify-dva из двух групп ss-tarif-karta):
   тёмные карточки рядом, как в Elementor, внизу цена и кнопка
   ([ss_tarif]). Узко — друг под другом. */
.ss-page .ss-statya__telo .ss-tarify-dva {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	margin-block: 1.6em;
}

/* Группа ядра в классической теме оборачивает содержимое своим div —
   для сетки и колонки его как будто нет. */
.ss-page .ss-statya__telo :is(.ss-tarify-dva, .ss-tarif-karta) > .wp-block-group__inner-container {
	display: contents;
}

.ss-page .ss-statya__telo .ss-tarif-karta {
	background:
		radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, #25cbc2 18%, transparent), transparent 60%),
		#121414;
	border-radius: 18px;
	color: #ffffff;
	display: flex;
	flex-direction: column;
	padding: 26px 24px 22px;
}

.ss-page .ss-statya__telo .ss-tarif-karta :where(h5, p, ul) {
	margin-block: 0 12px;
}

.ss-page .ss-statya__telo .ss-tarif-karta h5 {
	border-block-end: 2px solid #25cbc2;
	color: #ffffff;
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 20px;
	font-weight: 700;
	margin-block-end: 18px;
	padding-block-end: 14px;
}

.ss-page .ss-statya__telo .ss-tarif-karta p,
.ss-page .ss-statya__telo .ss-tarif-karta li {
	color: #e8ecec;
	font-size: 15px;
}

.ss-page .ss-statya__telo .ss-tarif-karta p strong {
	color: #ffffff;
}

.ss-page .ss-statya__telo .ss-tarif-karta ul {
	margin-block-end: 18px;
}

.ss-page .ss-statya__telo .ss-tarif-niz {
	align-items: center;
	background: #0b0b0b;
	border-radius: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	margin-block-start: auto;
	padding: 12px 12px 12px 20px;
}

.ss-page .ss-statya__telo .ss-tarif-niz__cena {
	color: #ffffff;
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 22px;
	font-weight: 700;
	white-space: nowrap;
}

.ss-page .ss-statya__telo .ss-tarif-niz__knopka {
	background: #25cbc2;
	border-radius: 999px;
	color: #0b0b0b;
	font-size: 15px;
	font-weight: 600;
	padding: 12px 22px;
	text-decoration: none;
	transition: background-color 0.2s;
}

.ss-page .ss-statya__telo .ss-tarif-niz__knopka:hover,
.ss-page .ss-statya__telo .ss-tarif-niz__knopka:focus-visible {
	background: #ffffff;
}

/* Цены под названием хостинга (класс абзаца ss-ceny): плашками в строку,
   как в Elementor, — «от 220 ₽/мес.» и «VPS от 210 ₽/мес.». */
.ss-page .ss-statya__telo p.ss-ceny {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ss-page .ss-statya__telo p.ss-ceny > span {
	background: #121414;
	border-radius: 10px;
	color: #ffffff;
	font-size: 15px;
	padding: 8px 14px;
	white-space: nowrap;
}

.ss-page .ss-statya__telo p.ss-ceny strong {
	color: #25cbc2;
}

/* Карточка товара: цена и зачёркнутая старая — строкой под названием. */
.ss-page .ss-chitat__cena {
	color: var(--ss-accent-ink, #1a9e97);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 18px;
	font-weight: 700;
}

.ss-page .ss-chitat__cena s {
	color: #8a8f8f;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	margin-inline-start: 8px;
}

.ss-page .ss-chitat:has(.ss-chitat__cena) > :is(picture, .ss-chitat__kartinka) {
	grid-row: 1 / span 4;
}

.ss-page .ss-chitat:not(:has(.ss-chitat__kartinka)) {
	grid-template-columns: minmax(0, 1fr);
}

.ss-page .ss-chitat__nad {
	align-self: end;
	color: var(--ss-accent-ink, #1a9e97);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ss-page .ss-chitat__ssylka {
	color: var(--ss-ink) !important;
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none !important;
}

/* Кликается вся плашка. */
.ss-page .ss-chitat__ssylka::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

/* «Читать →» и время чтения — одним тихим стилем, рядом: сначала
   «Читать», правее с отступом время (слово заказчика 27 сентября 2026). */
.ss-page .ss-chitat__niz {
	align-items: center;
	align-self: start;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin-block-start: 4px;
}

.ss-page :is(.ss-chitat__knopka, .ss-chitat__vremya) {
	align-items: center;
	color: #6b6b6b;
	display: inline-flex;
	font-size: 13px;
	gap: 6px;
}

.ss-page :is(.ss-chitat__knopka, .ss-chitat__vremya) svg {
	color: var(--ss-accent-ink, #1a9e97);
}

.ss-page .ss-chitat__knopka svg {
	transition: transform 0.25s ease;
}

@media (hover: hover) {
	.ss-page .ss-chitat {
		transition: border-color 0.2s ease;
	}

	.ss-page .ss-chitat:hover {
		border-color: var(--ss-accent);
	}

	.ss-page .ss-chitat:hover .ss-chitat__ssylka {
		color: var(--ss-accent-ink, #1a9e97) !important;
	}

	.ss-page .ss-chitat:hover .ss-chitat__knopka svg {
		transform: translateX(3px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ss-page .ss-chitat__knopka svg {
		transition: none;
	}
}

/* Телефон: обложка сверху во всю ширину, слова под ней. */
@media (max-width: 767px) {
	.ss-page .ss-chitat {
		grid-template-columns: minmax(0, 1fr);
		padding: 12px 12px 16px;
	}

	.ss-page .ss-chitat > :is(picture, .ss-chitat__kartinka) {
		grid-column: 1;
		grid-row: auto;
		inline-size: 100%;
		margin-block-end: 6px;
	}

	.ss-page .ss-chitat > :is(.ss-chitat__nad, .ss-chitat__ssylka, .ss-chitat__cena, .ss-chitat__niz) {
		margin-inline: 6px;
	}

	.ss-page .ss-chitat__ssylka {
		font-size: 16px;
	}
}

/* ------------------------------------------ плашки «Совет / Важно / Ошибка»
   Вид выбран заказчиком 27 сентября 2026 (из пяти — вариант 5):
   полупрозрачная заливка цвета плашки и рамка, как плашки CRM у тарифов. */

.ss-page .ss-plashka {
	--ss-pl: #1a9e97;

	background: color-mix(in srgb, var(--ss-pl) 8%, #ffffff);
	border: 1px solid color-mix(in srgb, var(--ss-pl) 35%, transparent);
	border-radius: 12px;
	display: grid;
	gap: 12px;
	grid-template-columns: 24px minmax(0, 1fr);
	padding: 14px 16px;
}

.ss-page .ss-plashka--vazhno {
	--ss-pl: #c98a00;
}

.ss-page .ss-plashka--oshibka {
	--ss-pl: #d8434a;
}

.ss-page .ss-plashka__znak {
	color: var(--ss-pl);
}

.ss-page .ss-plashka__slova > * {
	margin: 0 0 0.5em;
}

.ss-page .ss-plashka__slova > :last-child {
	margin-block-end: 0;
}

.ss-page .ss-plashka__zag {
	color: var(--ss-pl);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
}

.ss-page .ss-plashka__slova p:not(.ss-plashka__zag) {
	font-size: 16px;
	line-height: 1.6;
}