/*
 * Правовые страницы: согласие, политика, cookie.
 *
 * Читают их не подряд, а по пункту: пришли с формы, чтобы проверить,
 * что будет с телефоном. Отсюда всё остальное — липкое оглавление
 * сбоку, колонка в одну ширину чтения и нумерация пунктов, оставленная
 * прямо в тексте, как в исходном документе: на неё ссылаются.
 *
 * Холст светлый, первый экран тёмный — как на страницах плагинов
 * и в работах. Сайт один.
 *
 * Правила вложены в `.sspr` по той же причине, что везде: пока живёт
 * кит Elementor, одиночный селектор он перебивает.
 */

/* Палитра общая, здесь псевдонимы под здешние имена. */
.sspr {
	--sspr-bg: var(--ss-bg);
	--sspr-surface: var(--ss-surface);
	--sspr-ink: var(--ss-ink);
	--sspr-dim: var(--ss-dim);
	--sspr-line: var(--ss-line);
	--sspr-dark: var(--ss-dark);
	--sspr-dark-ink: var(--ss-dark-ink);
	--sspr-dark-muted: var(--ss-dark-muted);
	--sspr-accent: var(--ss-accent);
	--sspr-accent-ink: var(--ss-accent-ink);

	background: var(--sspr-bg);
	color: var(--sspr-ink);
	display: block;
	font-family: "Gotham Pro", system-ui, -apple-system, sans-serif;
	font-size: var(--ss-text);
	overflow-x: clip;
}

.sspr .sspr__inner {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: calc(var(--ss-shell) + var(--ss-gutter) * 2);
	padding-inline: var(--ss-gutter);
}

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

.sspr .sspr__hero {
	background: var(--sspr-dark);
	border-end-end-radius: clamp(20px, 2.4vw, 36px);
	border-end-start-radius: clamp(20px, 2.4vw, 36px);
	color: var(--sspr-dark-ink);
	padding-block: calc(var(--ss-header-h, 78px) + clamp(30px, 5vh, 60px)) clamp(26px, 4vh, 48px);
}

.sspr .sspr__label {
	align-items: center;
	color: var(--sspr-accent);
	display: inline-flex;
	font-size: 13px;
	gap: 8px;
	letter-spacing: 0.1em;
	margin: 0 0 14px;
	text-transform: uppercase;
}

.sspr .sspr__label::before {
	background: var(--sspr-accent);
	block-size: 1px;
	content: "";
	display: inline-block;
	inline-size: 24px;
}

.sspr .sspr__title {
	color: var(--sspr-dark-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: var(--ss-h1);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 0;
	max-width: 22ch;
	text-transform: none;
}

.sspr .sspr__data {
	color: var(--sspr-dark-muted);
	font-size: var(--ss-small);
	margin: clamp(12px, 2vh, 18px) 0 0;
}

/* ---------------------------------------------------------------- раскладка */

.sspr .sspr__body {
	align-items: start;
	display: grid;
	gap: clamp(24px, 3vw, 56px);
	grid-template-columns: 300px minmax(0, 1fr);
	padding-block: clamp(32px, 5vh, 56px) clamp(48px, 8vh, 96px);
}

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

.sspr .sspr__toc {
	background: var(--sspr-surface);
	border: 1px solid var(--sspr-line);
	border-radius: 18px;
	inset-block-start: calc(var(--ss-header-h, 78px) + 16px);
	max-block-size: calc(100vh - var(--ss-header-h, 78px) - 48px);
	overflow-y: auto;
	padding: clamp(18px, 2vw, 24px);
	position: sticky;
}

.sspr .sspr__toc-title {
	color: var(--sspr-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: var(--ss-h4);
	font-weight: 500;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
}

.sspr .sspr__toc-list {
	counter-reset: sspr-nomer;
	display: grid;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Свои номера, потому что разделы в тексте уже пронумерованы автором:
   «1. Общие положения». Браузерный маркер дал бы вторую нумерацию
   рядом с первой. */
.sspr .sspr__toc-list li {
	margin: 0;
}

.sspr .sspr__toc-list a {
	color: var(--sspr-dim);
	display: block;
	font-size: var(--ss-small);
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.2s ease;
}

/* ------------------------------------------------------------------- текст */

.sspr .sspr__text {
	line-height: 1.7;
	max-width: 76ch;
}

.sspr .sspr__text h2 {
	color: var(--sspr-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: var(--ss-h3);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: clamp(32px, 4.4vh, 48px) 0 14px;
	scroll-margin-block-start: calc(var(--ss-header-h, 78px) + 20px);
	text-transform: none;
}

.sspr .sspr__text > h2:first-child {
	margin-block-start: 0;
}

.sspr .sspr__text p {
	margin: 0 0 1em;
}

.sspr .sspr__text a {
	color: var(--sspr-accent-ink);
	overflow-wrap: anywhere;
}

/* Перечни — с точкой, а не с галочкой: здесь это перечисление,
   а не список достоинств. */
.sspr .sspr__text ul {
	display: grid;
	gap: 8px;
	list-style: none;
	margin: 0 0 1.2em;
	padding: 0;
}

.sspr .sspr__text ul li {
	margin: 0;
	padding-inline-start: 22px;
	position: relative;
}

.sspr .sspr__text ul li::before {
	background: var(--sspr-accent);
	block-size: 6px;
	border-radius: 50%;
	content: "";
	inset-block-start: 0.65em;
	inset-inline-start: 4px;
	position: absolute;
	inline-size: 6px;
}

/* --------------------------------------------------------------- таблица */

/*
 * Таблица целей обработки: четыре колонки текста. На узком экране
 * она не сжимается до читаемого, поэтому едет вбок в своей рамке —
 * страница при этом стоит на месте.
 */
.sspr .sspr__text table {
	background: var(--sspr-surface);
	border: 1px solid var(--sspr-line);
	border-collapse: collapse;
	border-radius: 14px;
	display: table;
	font-size: var(--ss-small);
	margin: 0 0 1.4em;
	overflow: hidden;
	width: 100%;
}

.sspr .sspr__text th,
.sspr .sspr__text td {
	border-block-start: 1px solid var(--sspr-line);
	padding: 12px 14px;
	text-align: start;
	vertical-align: top;
}

.sspr .sspr__text th {
	background: rgba(16, 20, 24, 0.04);
	border-block-start: 0;
	font-weight: 600;
}

/* ------------------------------------------------------------- наведение */

@media (hover: hover) {
	.sspr .sspr__toc-list a:hover {
		color: var(--sspr-accent-ink);
	}

	.sspr a:hover {
		color: var(--sspr-accent-ink);
	}
}

/* ---------------------------------------------------------- уже 1024 */

@media (max-width: 1024px) {
	/* Оглавление уезжает наверх и перестаёт быть липким: в одну колонку
	   оно и так первое, что видно. */
	.sspr .sspr__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.sspr .sspr__toc {
		max-block-size: none;
		position: static;
	}

	.sspr .sspr__toc-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ----------------------------------------------------------- уже 767 */

@media (max-width: 767px) {
	.sspr {
		--ss-gutter: 10px;
	}

	.sspr .sspr__title {
		max-width: none;
	}

	.sspr .sspr__toc-list {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Таблица едет вбок внутри своей рамки. */
	.sspr .sspr__text table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	.sspr .sspr__text th,
	.sspr .sspr__text td {
		white-space: normal;
		min-inline-size: 180px;
	}
}