/*
 * ru.complainsite.com — оформление 2026.
 * Подключается после style.css базовой темы и перекрывает её.
 * Язык интерфейса: крупная типографика Onest, плавающая панель шапки,
 * полоса метаданных, пилюли, модульные плитки. Префикс cs-, БЕМ.
 */

:root {
	--cs-ink: #0e1116;
	--cs-ink-2: rgba(14, 17, 22, .76);
	--cs-ink-3: rgba(14, 17, 22, .45);
	--cs-line: #e8ebf2;
	--cs-bg: #ffffff;
	--cs-soft: #f3f6fb;
	--cs-soft-2: #eef3ff;
	--cs-dark: #14161d;
	--cs-blue: #2f5bea;
	--cs-blue-soft: #e7edff;
	--cs-amber: #ffd23f;
	--cs-amber-soft: #fff6d6;
	--cs-green: #12a07a;
	--cs-green-soft: #e4f6f1;
	--cs-red: #e5484d;
	--cs-red-soft: #fdecec;
	--cs-r-lg: 26px;
	--cs-r-md: 18px;
	--cs-r-sm: 12px;
	--cs-wrap: 1220px;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

body {
	background: var(--cs-bg);
	color: var(--cs-ink);
	font-family: 'Onest', 'Segoe UI', system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.wrapper,
.container {
	background: transparent;
	box-shadow: none;
	max-width: none;
	width: auto;
}

a,
a:hover,
a:focus,
.cs-tag,
.cs-chip,
.cs-item,
.cs-alpha__item,
.cs-jump__item,
.cs-links__item,
.cs-call,
.cs-call a,
.cs-meta a,
.breadcrumbs a,
.header__nav-2 a,
.cs-tabs__item,
.post a,
.post .cs-jump a,
.post .cs-call,
.post .cs-chip,
.post .cs-item,
.post .cs-tag {
	color: var(--cs-ink);
	text-decoration: none;
	border-bottom: 0;
}

/* в самом тексте статьи ссылки должны быть заметны */
.post__entry a {
	color: var(--cs-blue);
	text-decoration: none;
	border-bottom: 1px solid rgba(47, 91, 234, .35);
}

.post__entry a:not(.cs-chip):not(.cs-item) {
	color: var(--cs-blue);
	border-bottom: 1px solid rgba(47, 91, 234, .35);
}

.post__entry a:hover {
	border-bottom-color: var(--cs-blue);
}

.cs-contacts__val a,
.cs-org__row a,
.cs-dark a {
	border-bottom: 2px solid var(--cs-amber);
}

/* ======================================================================
   ШАПКА — плавающая панель
   ====================================================================== */

.header {
	background: none;
	padding: 12px 0 0;
	margin: 0 0 14px;
	/* базовая тема держит шапку фиксированной высоты и растягивает меню
	   абсолютом — оба правила отменяем, панель собирается флексом */
	height: auto;
	position: static;
}

.header:before {
	display: none;
}

.header__top {
	max-width: var(--cs-wrap);
	margin: 0 auto;
	padding: 8px 10px 8px 14px;
	display: flex;
	align-items: center;
	gap: 14px;
	/* базовая тема фиксирует высоту шапки в 150px под старый макет */
	height: auto;
	background: linear-gradient(105deg, #eef2fd 0%, #f4f8ff 45%, #eaf4f1 100%);
	border-radius: var(--cs-r-lg);
}

.header__logo,
a.header__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	/* в базовой теме слева резервировалось 90px под абсолютный логотип */
	padding: 0;
	margin: 0;
}

.header__logo-image {
	/* в базовой теме картинка выводится абсолютом поверх текста */
	position: static;
	width: auto;
	transform: none;
}

.header__logo-image img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	background: #fff;
}

.header__logo-title {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--cs-ink);
}

.header__logo-title span {
	color: var(--cs-blue);
}

.header__logo-desc,
.header__popular,
.header__soc,
.header__nav-1 {
	display: none;
}

.header__menu {
	position: relative;
	flex: 1 1 auto;
	/* без этого flex-элемент не сжимается ниже ширины содержимого,
	   и строка меню выталкивает поиск за пределы панели */
	min-width: 0;
	background: none;
	border: 0;
}

.header__nav-2 {
	position: static;
	height: auto;
	inset: auto;
	padding: 0;
	margin: 0;
	max-width: none;
	white-space: normal;
}

.header__nav-2 > ul {
	display: flex;
	flex-wrap: nowrap;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}

/* «Ещё» — сюда скрипт складывает пункты, которые не поместились в строку */
.cs-more {
	position: relative;
	display: none;
	height: auto;
	line-height: 1.25;
}

.cs-more.is-visible {
	display: block;
}

.cs-more__toggle {
	padding: 6px 12px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .55);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--cs-ink-2);
	cursor: pointer;
	white-space: nowrap;
}

.cs-more__toggle:hover,
.cs-more.is-open .cs-more__toggle {
	background: #fff;
	color: var(--cs-ink);
}

.cs-more__list {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 60;
	min-width: 210px;
	padding: 8px;
	margin: 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-r-sm);
	box-shadow: 0 12px 30px rgba(14, 17, 22, .12);
}

.cs-more.is-open .cs-more__list {
	display: block;
}

.cs-more__list li {
	height: auto;
	line-height: 1.25;
}

.cs-more__list a {
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--cs-ink-2);
	white-space: nowrap;
}

.cs-more__list a:hover {
	background: var(--cs-soft);
	color: var(--cs-ink);
}

/* вложенные рубрики внутри «Ещё» показываем сразу — прятать их некуда.
   Селектор длиннее, чем правило скрытия ниже по файлу, иначе оно перебивает. */
.header__nav-2 .cs-more__list .sub-menu {
	display: block;
	list-style: none;
	margin: 4px 0 4px 10px;
	padding: 0 0 0 10px;
	border-left: 1px solid var(--cs-line);
	/* фон подменю приходит инлайном из настроек темы — гасим */
	background: transparent;
}

.header__nav-2 .cs-more__list .sub-menu a {
	font-size: 13px;
	padding: 6px 10px;
}

.header__nav-2 > ul > li > a {
	display: block;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	color: var(--cs-ink-2);
	/* базовая тема задаёт пунктам line-height: 70px — из-за него шапка была
	   вдвое выше содержимого */
	line-height: 1.25;
	height: auto;
}

.header__nav-2 > ul > li {
	height: auto;
	line-height: 1.25;
}

.header__nav-2 > ul > li > a:hover {
	background: #fff;
	color: var(--cs-ink);
}

.header__nav-2 .sub-menu {
	display: none;
}

.search {
	flex: 0 0 250px;
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;
	height: 38px;
}

.search__input {
	width: 100%;
	height: 38px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	padding: 0 46px 0 20px;
	font: inherit;
	font-size: 15px;
	color: var(--cs-ink);
}

.search__input::placeholder {
	color: var(--cs-ink-3);
}

.search__button {
	position: absolute;
	right: 5px;
	top: 5px;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: var(--cs-blue);
	cursor: pointer;
}

.search__button:before {
	content: '';
	display: block;
	width: 11px;
	height: 11px;
	margin: 0 auto;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 4px 4px 0 -1px #fff;
	transform: translateX(-1px) scale(.85) rotate(-45deg);
}

/* ======================================================================
   ОБЩАЯ РАСКЛАДКА
   ====================================================================== */

.middle,
.wrap {
	max-width: var(--cs-wrap);
	margin: 0 auto;
	padding: 0 20px 8px;
	float: none;
	width: auto;
}

.post {
	margin: 0;
}

.content {
	float: none;
	width: auto;
	/* базовая тема держит справа место под сайдбар (padding 31.53%),
	   но сайдбара у нас нет — колонка должна занимать всю ширину */
	padding: 0;
}

.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	margin: 0 0 18px;
	color: var(--cs-ink-3);
}

.breadcrumbs .home {
	/* иконка домика из базовой темы наезжала на пилюлю крошки */
	padding: 5px 12px;
	background: none;
}

.breadcrumbs .sep {
	/* пустой span-разделитель базовой темы рисовался красной чертой;
	   в пилюльных крошках разделитель не нужен вовсе */
	display: none;
}

.breadcrumbs .sep:before,
.breadcrumbs .sep:after {
	display: none;
}

.breadcrumbs a {
	display: inline-block;
	max-width: 420px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid var(--cs-line);
	color: var(--cs-ink-2);
}

.breadcrumbs a:hover {
	border: 1px solid var(--cs-blue);
	color: var(--cs-blue);
}

/* ======================================================================
   ПОЛОСА МЕТАДАННЫХ
   ====================================================================== */

.cs-meta {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 1px;
	background: var(--cs-line);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-r-md);
	overflow: hidden;
	margin-bottom: 26px;
}

.cs-meta__item {
	background: #fff;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.cs-meta__num {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1;
	white-space: nowrap;
}

.cs-meta__icon {
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border-radius: 11px;
	background: var(--cs-amber);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.cs-meta__label {
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cs-ink-3);
	line-height: 1.3;
}

.cs-meta__value {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ======================================================================
   ЗАГОЛОВОК КАРТОЧКИ
   ====================================================================== */

.cs-head {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	margin-bottom: 34px;
}

.cs-head__brand {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}

.cs-head__logo {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	border: 1px solid var(--cs-line);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex: 0 0 auto;
	background: #fff;
}

.cs-head__logo img {
	max-width: 46px;
	max-height: 46px;
	width: auto;
	height: auto;
}

.cs-tag {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--cs-soft);
	font-size: 13px;
	font-weight: 500;
	color: var(--cs-ink-2);
}

.cs-title {
	/* заголовки страниц бывают длинными — размер подстраивается под ширину */
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.03;
	font-weight: 800;
	letter-spacing: -.035em;
	margin: 0 0 18px;
}

.cs-lead {
	position: relative;
	padding-left: 46px;
	font-size: 19px;
	line-height: 1.45;
	color: var(--cs-ink-2);
	margin: 0;
}

.cs-lead:before {
	content: '';
	position: absolute;
	left: 0;
	top: 14px;
	width: 30px;
	height: 3px;
	border-radius: 2px;
	background: var(--cs-amber);
}

/* плитки справа */

.cs-cards {
	display: grid;
	gap: 14px;
}

/* в узкой колонке заголовка мета-плитки должны дышать */
.cs-cards .cs-meta {
	margin-bottom: 0;
}

.cs-cards .cs-meta__item {
	padding: 14px 16px;
	align-items: flex-start;
}

.cs-cards .cs-meta__num {
	font-size: 26px;
}

.cs-call {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px;
	border-radius: var(--cs-r-md);
	background: linear-gradient(120deg, #fff3c4, #ffe27a 60%, #ffd23f);
}

.cs-call__label {
	font-size: 12px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: rgba(14, 17, 22, .55);
	margin-bottom: 4px;
}

.cs-call__value {
	font-size: 27px;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1;
	color: var(--cs-ink);
	display: block;
}

.cs-call__note {
	font-size: 13px;
	color: rgba(14, 17, 22, .6);
	margin-top: 6px;
}

.cs-call__arrow {
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--cs-ink);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
}

.cs-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cs-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 15px;
	border-radius: 999px;
	border: 1px solid var(--cs-line);
	font-size: 14px;
	font-weight: 500;
	color: var(--cs-ink);
	background: #fff;
}

.cs-chip:hover {
	border: 1px solid var(--cs-blue);
	color: var(--cs-blue);
}

.cs-chip--accent {
	background: var(--cs-red-soft);
	border-color: transparent;
	color: var(--cs-red);
}

.cs-chip__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cs-green);
}

.cs-dark {
	background: var(--cs-dark);
	color: #fff;
	border-radius: var(--cs-r-md);
	padding: 22px 24px;
}

.cs-dark__label {
	font-size: 12px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
	margin-bottom: 8px;
}

.cs-dark__title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0 0 10px;
	color: #fff;
}

.cs-dark__text {
	font-size: 14px;
	color: rgba(255, 255, 255, .72);
	margin: 0 0 14px;
}

.cs-dark a {
	color: var(--cs-amber);
}

.cs-dark__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: 14px;
}

/* ======================================================================
   КОНТАКТЫ
   ====================================================================== */

.cs-section {
	margin: 0 0 40px;
	scroll-margin-top: 96px;
}

.cs-section:last-child {
	margin-bottom: 0;
}

.cs-h2 {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.1;
	margin: 0 0 6px;
}

.cs-sub {
	font-size: 15px;
	color: var(--cs-ink-3);
	margin: 0 0 22px;
}

.cs-contacts {
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-r-md);
	overflow: hidden;
}

.cs-contacts__row {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 18px;
	padding: 16px 22px;
	border-bottom: 1px solid var(--cs-line);
	align-items: baseline;
	margin: 0;
}

.cs-contacts__row:last-child {
	border-bottom: 0;
}

.cs-contacts__row:nth-child(odd) {
	background: #fcfdff;
}

.cs-contacts__key {
	font-size: 14px;
	color: var(--cs-ink-3);
}

.cs-contacts__val {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	word-break: break-word;
}

.cs-contacts__val a {
	color: var(--cs-ink);
	border-bottom: 2px solid var(--cs-amber);
}

.cs-contacts__val a:hover {
	color: var(--cs-blue);
	border-color: var(--cs-blue);
}

.cs-contacts__val a.cs-source,
.cs-source {
	display: inline-block;
	font-weight: 400;
	color: var(--cs-ink-3);
	border-bottom: 1px dotted var(--cs-ink-3);
	margin-left: 10px;
	font-size: 12px;
	font-weight: 400;
	color: var(--cs-ink-3);
	border-bottom: 1px dotted var(--cs-ink-3);
}

/* ======================================================================
   ТЕКСТ
   ====================================================================== */

.post {
	background: none;
	padding: 0;
}

.post__entry {
	font-size: 17px;
	line-height: 1.65;
	color: var(--cs-ink-2);
}

.post__entry > *:last-child {
	margin-bottom: 0;
}

.post__entry h2 {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.1;
	color: var(--cs-ink);
	margin: 44px 0 16px;
}

.post__entry h2:first-child {
	margin-top: 0;
}

.post__entry h3 {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--cs-ink);
	margin: 30px 0 12px;
}

.post__entry p {
	margin: 0 0 16px;
}

.post__entry b,
.post__entry strong {
	color: var(--cs-ink);
	font-weight: 600;
}

.post__entry ul,
.post__entry ol {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.post__entry ul > li,
.post__entry ol > li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 12px;
}

.post__entry ul > li:before {
	content: '';
	position: absolute;
	left: 4px;
	top: 11px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cs-green);
}

.post__entry ol {
	counter-reset: cs-num;
}

.post__entry ol > li {
	counter-increment: cs-num;
	padding-left: 34px;
}

.post__entry ol > li:before {
	content: counter(cs-num);
	position: absolute;
	left: 0;
	top: 2px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--cs-soft-2);
	color: var(--cs-blue);
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* шаги */

.cs-steps {
	list-style: none;
	counter-reset: cs-step;
	padding: 0;
	margin: 0 0 22px;
	display: grid;
	gap: 8px;
}

.post__entry .cs-steps > li,
.cs-steps__item {
	counter-increment: cs-step;
	position: relative;
	padding: 18px 22px 18px 68px;
	margin: 0;
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-r-sm);
	background: #fff;
	color: var(--cs-ink-2);
}

.post__entry .cs-steps > li:before,
.cs-steps__item:before {
	content: counter(cs-step);
	position: absolute;
	left: 20px;
	top: 17px;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: var(--cs-amber);
	color: var(--cs-ink);
	font-size: 15px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cs-steps__title {
	display: block;
	font-weight: 700;
	color: var(--cs-ink);
	margin-bottom: 3px;
	font-size: 17px;
}

/* ======================================================================
   РАСКЛАДКА СТРАНИЦЫ: текст + липкая колонка
   ====================================================================== */

.cs-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 44px;
	align-items: start;
	margin-bottom: 40px;
}

.cs-layout__main > .cs-section:last-child {
	margin-bottom: 0;
}

.cs-aside {
	position: sticky;
	top: 18px;
	display: grid;
	gap: 14px;
}

.cs-aside__box {
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-r-md);
	padding: 18px 20px;
}

.cs-aside__title {
	font-size: 12px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--cs-ink-3);
	margin-bottom: 12px;
}

.cs-aside__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.cs-aside__list li,
.cs-footer__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-aside__list li:before,
.cs-footer__list li:before {
	display: none;
}

.cs-aside__list a {
	font-size: 15px;
	color: var(--cs-ink-2);
	line-height: 1.35;
	display: block;
}

.cs-aside__list a:hover {
	color: var(--cs-blue);
}

.cs-toc__num {
	display: inline-block;
	width: 22px;
	color: var(--cs-ink-3);
	font-size: 13px;
}

/* ======================================================================
   FAQ
   ====================================================================== */

.cs-faq__item {
	border-bottom: 1px solid var(--cs-line);
}

.cs-faq__item:first-of-type {
	border-top: 1px solid var(--cs-line);
}

.cs-faq__q {
	cursor: pointer;
	list-style: none;
	position: relative;
	padding: 20px 46px 20px 0;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--cs-ink);
}

.cs-faq__q::-webkit-details-marker {
	display: none;
}

.cs-faq__q:after {
	content: '+';
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--cs-soft);
	color: var(--cs-ink-2);
	font-size: 19px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cs-faq__item[open] .cs-faq__q:after {
	content: '–';
	background: var(--cs-amber);
}

.cs-faq__a {
	padding: 0 46px 22px 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--cs-ink-2);
}

.cs-faq__a p:last-child {
	margin-bottom: 0;
}

/* ======================================================================
   ВЕДОМСТВА
   ====================================================================== */

.cs-orgs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
}

.cs-org {
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-r-md);
	padding: 20px 22px;
}

.cs-org__name {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.02em;
	margin-bottom: 6px;
}

.cs-org__what {
	font-size: 14px;
	color: var(--cs-ink-3);
	margin-bottom: 14px;
}

.cs-org__row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 0;
	border-top: 1px solid var(--cs-line);
	font-size: 14px;
}

.cs-org__row span:first-child {
	color: var(--cs-ink-3);
}

.cs-org__row a {
	font-weight: 600;
	border-bottom: 2px solid var(--cs-amber);
}

/* ======================================================================
   СПИСКИ КОМПАНИЙ
   ====================================================================== */

.cs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
}

.cs-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-r-sm);
	background: #fff;
	min-width: 0;
}

.cs-item:hover {
	/* сброс подчёркиваний ссылок снимал у плитки нижнюю границу на ховере,
	   и рамка «разрывалась», наезжая на соседнюю карточку */
	border: 1px solid var(--cs-ink);
}

.cs-item__logo {
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	object-fit: contain;
	border-radius: 9px;
}

.cs-item__body {
	min-width: 0;
}

.cs-item__name {
	display: block;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cs-item__phone {
	display: block;
	font-size: 13px;
	color: var(--cs-green);
	font-weight: 500;
}

.cs-item__none {
	display: block;
	font-size: 13px;
	color: var(--cs-ink-3);
}

/* ======================================================================
   ГЛАВНАЯ
   ====================================================================== */

.cs-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
	margin-bottom: 54px;
}

.cs-hero__eyebrow {
	font-size: 26px;
	font-weight: 400;
	color: var(--cs-ink-3);
	letter-spacing: -.02em;
	line-height: 1.1;
}

.cs-hero__title {
	font-size: 60px;
	line-height: .99;
	font-weight: 800;
	letter-spacing: -.04em;
	margin: 0 0 22px;
}

.cs-hero__text {
	font-size: 17px;
	color: var(--cs-ink-2);
	max-width: 480px;
	margin: 0 0 26px;
}

.cs-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 26px;
	margin-bottom: 30px;
}

.cs-links__item {
	position: relative;
	padding: 8px 0 8px 30px;
	font-size: 15px;
	color: var(--cs-ink-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cs-links__item:before {
	content: '';
	position: absolute;
	left: 0;
	top: 17px;
	width: 18px;
	height: 2px;
	background: var(--cs-line);
}

.cs-links__item:hover {
	color: var(--cs-ink);
}

.cs-links__item:hover:before {
	background: var(--cs-amber);
}

.cs-numbers {
	display: grid;
	gap: 16px;
}

.cs-number {
	display: flex;
	align-items: center;
	gap: 18px;
}

.cs-number__val {
	font-size: 52px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -.045em;
	color: var(--cs-blue);
}

.cs-number__cap {
	font-size: 14px;
	color: var(--cs-ink-3);
	max-width: 190px;
	line-height: 1.35;
}

.cs-alpha {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
	gap: 6px;
}

.cs-alpha__item {
	position: relative;
	aspect-ratio: 1 / 1;
	font-size: 20px;
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 25px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--cs-ink);
	background: #fff;
}

.cs-alpha__item:hover {
	border: 1px solid var(--cs-ink);
}

.cs-alpha__item--empty {
	color: var(--cs-ink-3);
	background: var(--cs-soft);
	border-color: transparent;
	pointer-events: none;
}

.cs-alpha__count {
	position: absolute;
	top: 4px;
	right: 6px;
	font-size: 10px;
	font-weight: 600;
	color: var(--cs-green);
}

.cs-hint {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 26px;
	padding: 24px;
	border-radius: var(--cs-r-md);
	background: linear-gradient(105deg, #eaf1ff, #eefaf5);
}

.cs-hint__icon {
	width: 54px;
	height: 54px;
	flex: 0 0 auto;
	border-radius: 16px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}

.cs-hint__badge {
	position: absolute;
	top: -12px;
	left: 24px;
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--cs-blue);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}

.cs-hint__text {
	font-size: 16px;
	color: var(--cs-ink-2);
}

.cs-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 5px;
	border: 1px solid var(--cs-line);
	border-radius: 999px;
	margin-bottom: 20px;
}

.cs-tabs__item {
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	color: var(--cs-ink-2);
}

.cs-tabs__item:hover {
	background: var(--cs-soft);
	color: var(--cs-ink);
}

.cs-tabs__item--active,
.cs-tabs__item--active:hover {
	background: var(--cs-ink);
	color: #fff;
}

/* ======================================================================
   ЯКОРНАЯ ПАНЕЛЬ
   ====================================================================== */

.cs-jump {
	position: sticky;
	top: 12px;
	z-index: 30;
	display: flex;
	gap: 4px;
	padding: 6px;
	margin: 0 auto 30px;
	width: fit-content;
	max-width: 100%;
	overflow-x: auto;
	background: rgba(255, 255, 255, .93);
	border: 1px solid var(--cs-line);
	border-radius: 999px;
}

.cs-jump__item {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	color: var(--cs-ink-2);
	white-space: nowrap;
}

.cs-jump__item:hover {
	background: var(--cs-soft);
	color: var(--cs-ink);
}

.cs-jump__count {
	display: inline-block;
	min-width: 20px;
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--cs-amber);
	color: var(--cs-ink);
	font-size: 11px;
	font-weight: 700;
	text-align: center;
}

/* ======================================================================
   КОММЕНТАРИИ
   ====================================================================== */

.comments {
	float: none;
	width: auto;
}

.grid {
	display: block;
}

.comment-form input[type=text],
.comment-form input[type=email],
.comment-form textarea {
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-r-sm);
	padding: 12px 16px;
	font: inherit;
	font-size: 16px;
	background: #fff;
}

.comment-form textarea {
	min-height: 130px;
}

.comment-form input[type=submit],
.comment-form .submit {
	background: var(--cs-ink);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 13px 28px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.comment-form input[type=submit]:hover {
	background: var(--cs-blue);
}

/* ======================================================================
   ПАГИНАЦИЯ
   ====================================================================== */

.cs-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 24px;
}

.cs-pager__item a:hover {
	border: 1px solid var(--cs-ink);
}

.cs-pager__item a,
.cs-pager__item span {
	display: inline-block;
	min-width: 42px;
	text-align: center;
	padding: 10px 12px;
	border-radius: var(--cs-r-sm);
	border: 1px solid var(--cs-line);
	font-weight: 600;
	font-size: 15px;
}

.cs-pager__item span.current {
	background: var(--cs-ink);
	border-color: var(--cs-ink);
	color: #fff;
}

/* ======================================================================
   ПОДВАЛ
   ====================================================================== */

.cs-footer {
	background: var(--cs-soft);
	color: var(--cs-ink-2);
	margin-top: 56px;
	padding: 40px 0 28px;
}

.cs-footer__inner {
	max-width: var(--cs-wrap);
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.1fr);
	gap: 40px;
	align-items: start;
}

.cs-footer__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.cs-footer__logo img {
	width: 38px;
	height: 38px;
	border-radius: 50%;
}

.cs-footer__name {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--cs-ink);
}

.cs-footer__name span {
	color: var(--cs-blue);
}

.cs-footer__about {
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 14px;
	max-width: 360px;
}

.cs-footer__copy {
	font-size: 13px;
	color: var(--cs-ink-3);
	margin: 0;
}

.cs-footer__title {
	font-size: 12px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--cs-ink-3);
	margin-bottom: 14px;
}

.cs-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.cs-footer__list a,
.cs-footer__link {
	font-size: 14px;
	color: var(--cs-ink-2);
	line-height: 1.35;
}

.cs-footer__list a:hover,
.cs-footer__link:hover {
	color: var(--cs-ink);
}

.cs-footer__note {
	font-size: 13px;
	line-height: 1.5;
	color: var(--cs-ink-3);
	margin: 0 0 12px;
}

.cs-footer__link {
	display: inline-block;
	border-bottom: 1px solid var(--cs-line);
}

.cs-footer__counters {
	max-width: var(--cs-wrap);
	margin: 26px auto 0;
	padding: 18px 20px 0;
	border-top: 1px solid var(--cs-line);
	opacity: .5;
}

/* ======================================================================
   АДАПТИВ
   ====================================================================== */

@media (max-width: 1129px) {
	.header__top {
		position: relative;
		flex-wrap: wrap;
		padding: 10px 52px 10px 14px;
		border-radius: var(--cs-r-md);
		gap: 10px;
	}

	.search {
		flex: 1 1 100%;
		order: 3;
	}

	/* на мобильных меню показывает выезжающая панель базовой темы */
	.header__menu {
		display: none;
	}

	.header__menu-toggle {
		position: absolute;
		top: 13px;
		right: 14px;
		bottom: auto;
		left: auto;
		display: block;
		width: 28px;
		height: 28px;
		border: 0;
		background-color: transparent;
	}

	.header__nav-2 > ul {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		padding: 8px 0 2px;
	}

	.header__nav-2 .sub-menu {
		display: block;
		list-style: none;
		margin: 2px 0 2px 12px;
		padding: 0 0 0 12px;
		border-left: 1px solid rgba(14, 17, 22, .12);
	}

	.header__nav-2 .sub-menu a {
		display: block;
		padding: 6px 10px;
		font-size: 14px;
		color: var(--cs-ink-2);
	}
}

@media (max-width: 1000px) {
	.cs-head,
	.cs-hero,
	.cs-layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.cs-aside {
		position: static;
	}

	.cs-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}

	.cs-title {
		font-size: 40px;
	}

	.cs-hero__title {
		font-size: 44px;
	}

	.cs-h2,
	.post__entry h2 {
		font-size: 28px;
	}

	.cs-meta {
		grid-auto-flow: row;
		grid-auto-columns: auto;
	}
}

@media (max-width: 640px) {
	body {
		font-size: 15px;
	}

	.cs-title {
		font-size: 31px;
		letter-spacing: -.03em;
	}

	.cs-hero__title {
		font-size: 36px;
	}

	.cs-hero__eyebrow {
		font-size: 20px;
	}

	.cs-lead {
		font-size: 17px;
		padding-left: 0;
	}

	.cs-lead:before {
		display: none;
	}

	.cs-h2,
	.post__entry h2 {
		font-size: 25px;
	}

	.cs-contacts__row {
		grid-template-columns: 1fr;
		gap: 3px;
		padding: 14px 16px;
	}

	.cs-links {
		grid-template-columns: 1fr;
	}

	.cs-number__val {
		font-size: 42px;
	}

	.cs-call {
		padding: 18px;
	}

	.cs-call__value {
		font-size: 23px;
	}

	.post__entry .cs-steps > li,
	.cs-steps__item {
		padding: 16px 16px 16px 58px;
	}

	.cs-jump {
		border-radius: var(--cs-r-md);
		justify-content: flex-start;
	}

	.cs-footer__inner {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}

/* ======================================================================
   ВЫЕЗЖАЮЩЕЕ МЕНЮ НА МОБИЛЬНЫХ
   Разметку и логику даёт базовая тема (js/scripts.js), здесь только вид:
   тёмно-фиолетовая панель со старого макета к оформлению не подходит.
   ====================================================================== */

.menu__inner,
.menu__item,
.menu__topmenu,
.menu__submenu {
	/* тёмный фон рисуют вложенные списки, а не сама панель */
	background: #fff;
}

.menu__inner {
	box-shadow: 0 0 40px rgba(14, 17, 22, .18);
}

.menu-overlay {
	background: rgba(14, 17, 22, .45);
}

.menu a {
	color: var(--cs-ink);
	font-size: 16px;
	font-weight: 500;
	padding: 13px 20px;
}

.menu li {
	border-bottom-color: var(--cs-line);
}

.menu a:not(:last-child),
.menu li + li {
	border-top-color: var(--cs-line);
}

.menu__close {
	background-color: var(--cs-ink);
	border-radius: 0 0 0 var(--cs-r-md);
}

.menu__topbar {
	background: var(--cs-soft);
	color: var(--cs-ink);
}

.menu__title {
	color: var(--cs-ink);
	font-weight: 600;
}

.menu__show-submenu {
	background-color: var(--cs-soft);
}

/* ======================================================================
   ПОДСКАЗКА ПРО ВОЗВРАТ ДЕНЕГ ЗА ПОДПИСКУ
   Показывается на карточках, где люди чаще всего жалуются на автосписания.
   ====================================================================== */

.cs-subs {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin: 22px 0 0;
	padding: 20px 22px;
	background: var(--cs-amber-soft);
	border: 1px solid rgba(255, 210, 63, .55);
	border-radius: var(--cs-r-md);
}

.cs-subs__icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 21px;
	background: #fff;
	border-radius: 50%;
}

.cs-subs__body {
	min-width: 0;
}

.cs-subs__title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.01em;
	margin-bottom: 4px;
}

.cs-subs__text {
	margin: 0 0 12px;
	color: var(--cs-ink-2);
	font-size: 15px;
}

.cs-subs__link,
.post .cs-subs__link,
.post__entry .cs-subs__link {
	/* сброс ссылок статьи перекрашивал текст кнопки в тёмный по тёмному */
	color: #fff;
	border-bottom: 0;
}

.cs-subs__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	background: var(--cs-dark);
	color: #fff;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
}

.cs-subs__link:after {
	content: '→';
}

.cs-subs__link:hover,
.post .cs-subs__link:hover {
	background: var(--cs-blue);
	color: #fff;
}

@media (max-width: 640px) {
	.cs-subs {
		padding: 16px;
		gap: 12px;
	}

	.cs-subs__icon {
		width: 34px;
		height: 34px;
		font-size: 17px;
	}
}