/*
Theme Name: Guru
Theme URI: https://sopromatguru.ru
Author: Guru Team
Description: Маркетинговая тема SopromatGuru (СНГ) / BeamGuru (мир). Витрина на корне домена, личный кабинет — на app.*. Использует дизайн-систему guru-landing; страницы собираются из блоков плагина guru-blocks.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: Proprietary
Text Domain: guru
*/

/* Все стили лендинга подключаются из assets/landing/css (см. functions.php).
   Здесь — только специфичные для WP надстройки. */

.main .wp-block-group,
.main .entry-content {
	margin: 0;
	padding: 0;
	max-width: none;
}

/*
 * `.main` — display:grid из guru-landing с неявной auto-колонкой: она резолвилась
 * в max-content (= ширина контейнера 1400px) и не сжималась ниже вьюпорта, из-за
 * чего при экране < 1400px появлялось горизонтальное переполнение. Явная
 * minmax(0, 1fr) позволяет колонке сжиматься до вьюпорта; контейнеры внутри
 * по-прежнему центрируются и ограничены max-width.
 */
.main {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * Плавные переходы фона между секциями.
 * Опакные секции разных светлых оттенков (services/overview #f5f9ff, features
 * #e2e9f3, reviews #fff) жёстко обрезали анимированный фон .main-bg и стыковались
 * встык с прозрачными секциями и между собой — резкие горизонтальные полосы.
 * Растворяем верх и низ каждой опакной секции в прозрачность её же цвета: тело
 * остаётся сплошным, а в зонах перехода (~160px) проступает единый фон
 * .main (#f5f9ff) + .main-bg, и границы исчезают. Тёмную тему не затрагиваем —
 * её правила `[data-theme=dark] .section` перебивают эти по специфичности.
 */
.services-overview,
.overview {
	background: linear-gradient(
		180deg,
		rgba(245, 249, 255, 0) 0,
		rgba(245, 249, 255, 1) 160px,
		rgba(245, 249, 255, 1) calc(100% - 160px),
		rgba(245, 249, 255, 0) 100%
	);
}

.features {
	background: linear-gradient(
		180deg,
		rgba(226, 233, 243, 0) 0,
		rgba(226, 233, 243, 1) 160px,
		rgba(226, 233, 243, 1) calc(100% - 160px),
		rgba(226, 233, 243, 0) 100%
	);
}

.reviews {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0) 0,
		rgba(255, 255, 255, 1) 160px,
		rgba(255, 255, 255, 1) calc(100% - 160px),
		rgba(255, 255, 255, 0) 100%
	);
}

/* Фоновые формулы приглушены, чтобы не конфликтовать с текстом hero.
   Тёмная тема не затрагивается (её `[data-theme=dark] .main-bg__glyph` перебивает). */
.main-bg__glyph {
	fill: rgba(24, 110, 52, 0.16);
}

/* CTA hero: кнопка и микротекст в колонку по центру. */
.hero__cta {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

/* Микротекст-«страховка» под основной CTA hero. */
.hero__cta-note {
	margin: 14px 0 0;
	text-align: center;
	font-size: 14px;
	line-height: 1.4;
	color: var(--text-secondary, #6b7280);
}

/* Кнопка hero сайзится по контенту и центрируется — не растягивается на всю
   ширину колонки. Причина «поплывшей» кнопки: в main.css есть `.btn{width:100%}`
   (мобильный брейкпоинт), а у иконки-стрелки — margin-left:auto; вместе на широкой
   кнопке они дают распор «текст слева / стрелка справа». Гасим оба механизма. */
.hero__cta .btn {
	align-self: center;
	width: auto;
	max-width: 100%;
	justify-content: center;
}
.hero__cta .btn .btn__icon {
	margin-left: 0;
}

/* Админ-бар не должен ломать фиксированную шапку лендинга */
body.admin-bar .header,
body.admin-bar .sg-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar .sg-header {
		top: 46px;
	}
}

/*
 * Elementor-совместимость: коллизия CSS-переменной была устранена радикально —
 * guru-переменная ширины контейнера переименована в `--guru-container-max-width`
 * (main.css / tariffs.css), поэтому она больше НЕ пересекается с одноимённой
 * `--container-max-width` Elementor'а (ту он использует для ширины своих .e-con).
 * Прежний точечный хак [class*="elementor-widget-guru-"]{--container-max-width}
 * удалён как избыточный: guru-контейнеры берут значение из :root напрямую, а
 * Elementor-контейнеры — своё. Правило см. docs/ARCHITECTURE.md §3.2.
 */

/*
 * Переключатель темы в шапке — визуальный порт .sg-theme-toggle приложения
 * (ThemeToggle.scss): те же иконки 18px, геометрия 36px и поведение hover.
 * Виден на всех страницах витрины (десктоп): лендинговые секции имеют
 * `[data-theme=dark]`-правила, тёмная тема работает по всему хрому. На мобильных
 * (<992px) скрыт — там верхняя строка отдана логотипу и гамбургеру.
 */
.header__theme {
	display: flex;
	align-items: center;
}
@media (max-width: 991.98px) {
	.header__theme {
		display: none;
	}
}
.sg-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	min-width: 36px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: var(--text-secondary, #6c757d);
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}
.sg-theme-toggle:hover {
	background: var(--bg-lightest, #f1f1f1);
	color: var(--text-primary, #212529);
}
.sg-theme-toggle:active {
	background: var(--border-color, #dee2e6);
}
.sg-theme-toggle:focus-visible {
	outline: 2px solid var(--primary-color, #28a745);
	outline-offset: 2px;
}
.sg-theme-toggle__icon {
	display: inline-flex;
}
/* Иконка отражает состояние как в приложении: light → луна, dark → солнце. */
.sg-theme-toggle__sun {
	display: none;
}
html[data-theme="dark"] .sg-theme-toggle .sg-theme-toggle__sun {
	display: block;
}
html[data-theme="dark"] .sg-theme-toggle .sg-theme-toggle__moon {
	display: none;
}
/* В темной теме хром-переменные лендинга не переопределяются — задаем явно. */
html[data-theme="dark"] .sg-theme-toggle {
	color: #9aa4b2;
}
html[data-theme="dark"] .sg-theme-toggle:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #e6e9ee;
}
html[data-theme="dark"] .sg-theme-toggle:active {
	background: rgba(255, 255, 255, 0.14);
}

/* ── Секция «Возможности»: панели табов и тематические скриншоты ──────────
   Панелей .features__content несколько (по одной на таб) — видима активная;
   guru-features.js переключает --active. Первая панель активна из разметки. */
.features .features__content:not(.features__content--active) {
	display: none;
}

/* Скриншоты парой light/dark; показ по теме страницы. Классы вешаются
   на img и в слайдерах карточек, и в одиночных окнах лендингов (blp-shot). */
.feature-slider__img--dark {
	display: none;
}
html[data-theme="dark"] .feature-slider__img--light {
	display: none;
}
html[data-theme="dark"] .feature-slider__img--dark {
	display: block;
}

/* Elementor (frontend.css: .elementor img{height:auto;border-radius:0}) грузится
   после landing/main.css при той же специфичности (0,1,1) и сбрасывал размеры
   картинок главной: скриншот карточки вылезал за нижнюю рамку слайда, аватар
   отзыва тянулся в высоту. Возвращаем значения main.css селектором посильнее
   (иконки тарифов держит сама tariffs.css: .sg-tariffs .sg-tariffs__icon img).
   Лендинги модулей (.blp) держат свои правила — их не задевает.
   Скриншоты 16:10 выше окна карточки: cover режет край, прижимаем к верху —
   шапка приложения целая, срезается пустой низ холста. */
.feature-card__image .feature-slider__slide img {
	height: calc(100% - 20px);
	border-radius: 5px;
	object-position: top;
}
.elementor .review-card__avatar img {
	height: 100%;
}
.elementor .cta__module-icon img {
	height: 24px;
}

/* Панель-анонс для модулей без карточек (фундамент). */
.features__soon {
	margin: 8px auto 0;
	max-width: 720px;
	text-align: center;
	padding: 48px 24px;
	border: 1px dashed rgba(24, 110, 52, 0.35);
	border-radius: 16px;
	color: inherit;
}
html[data-theme="dark"] .features__soon {
	border-color: rgba(154, 164, 178, 0.4);
}

/* Логотип в тёмной теме: тёмная часть знака (#353434) должна быть белой.
   SVG подключён как <img>, поэтому внешний CSS не достаёт до его заливок —
   подменяем файл на dark-вариант (logo-dark.svg). Футер не трогаем: там
   логотип уже осветляется фильтром brightness(0) invert(1). */
html[data-theme="dark"] .header__logo-img {
	content: url(assets/landing/img/logo-dark.svg);
}

/* Тема — только выбор пользователя: без data-theme="dark" страница светлая и при темной ОС.
   Сторонние стили (блоки weDocs на DaisyUI) ставят :root { color-scheme: dark } по
   prefers-color-scheme, и браузер красил системными цветами текст <html> и кнопок без
   своего цвета (точки слайдера, тире «Как это работает»). Селектор специфичнее их :root. */
:root:not([data-theme="dark"]) {
	color-scheme: light;
}

/* Карточки модулей: ряд действий — «Перейти к расчету» + опциональный
   «Пример расчета». Кнопки компактнее базовых, чтобы ряд умещался
   в одну строку в полкарточной сетке; на узких экранах переносится. */
.service-overview-card__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	margin-top: auto;
}
.service-overview-card__actions .btn {
	flex: 0 1 auto;
	font-size: 13px;
	height: 46px;
	margin-top: 0;
	padding: 10px 18px;
}
/* «Перейти к расчету» всегда прижат к правому краю ряда;
   «Пример расчета» (если есть) — слева. */
.service-overview-card__actions .btn--icon-arrow {
	margin-left: auto;
	order: 2;
	padding-right: 54px !important;
}
.service-overview-card__actions .service-overview-card__example {
	order: 1;
}
.service-overview-card__actions .btn--icon-arrow:after {
	height: 30px;
	right: 8px;
	width: 30px;
}

/* «Пример расчета»: мягкая зеленая пилюля с иконкой скачивания
   и бейджем формата файла (расширение берется из ссылки). */
.service-overview-card__example.btn {
	background: var(--primary-color-10);
	border-color: transparent;
	color: var(--primary-color-focus);
	gap: 8px;
	padding-right: 44px !important;
}
.service-overview-card__example.btn:after {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' fill='none'%3E%3Cpath stroke='%2328A745' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M1 10c0 2.2 0 3.3.683 4 .684.7 1.784.7 3.984.7h5.666c2.2 0 3.3 0 3.984-.7.683-.7.683-1.8.683-4M8.5 1.5v9.111m0 0 3.111-3.403M8.5 10.611 5.389 7.208'/%3E%3C/svg%3E");
	height: 15px;
	right: 16px;
	width: 17px;
}
.service-overview-card__example.btn:hover {
	background: var(--primary-color);
	border-color: var(--primary-color);
	box-shadow: 0 4px 16px rgba(40, 167, 69, 0.3);
	color: var(--color-white);
}
.service-overview-card__example.btn:hover:after,
.service-overview-card__example.btn:active:after {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M1 10c0 2.2 0 3.3.683 4 .684.7 1.784.7 3.984.7h5.666c2.2 0 3.3 0 3.984-.7.683-.7.683-1.8.683-4M8.5 1.5v9.111m0 0 3.111-3.403M8.5 10.611 5.389 7.208'/%3E%3C/svg%3E");
	transform: translateY(-50%) translateY(2px);
}
.service-overview-card__example-badge {
	background: var(--color-white);
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	color: var(--primary-color-focus);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	padding: 4px 6px;
}
.service-overview-card__example.btn:hover .service-overview-card__example-badge {
	background: rgba(255, 255, 255, 0.18);
	box-shadow: none;
	color: var(--color-white);
}
html[data-theme="dark"] .service-overview-card__example.btn {
	background: rgba(var(--primary-color-rgb), 0.16);
	color: var(--primary-color);
}
html[data-theme="dark"] .service-overview-card__example.btn:after {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' fill='none'%3E%3Cpath stroke='%237CE0A3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M1 10c0 2.2 0 3.3.683 4 .684.7 1.784.7 3.984.7h5.666c2.2 0 3.3 0 3.984-.7.683-.7.683-1.8.683-4M8.5 1.5v9.111m0 0 3.111-3.403M8.5 10.611 5.389 7.208'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .service-overview-card__example.btn:hover {
	background: var(--primary-color);
	color: var(--color-white);
}
html[data-theme="dark"] .service-overview-card__example.btn:hover:after {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M1 10c0 2.2 0 3.3.683 4 .684.7 1.784.7 3.984.7h5.666c2.2 0 3.3 0 3.984-.7.683-.7.683-1.8.683-4M8.5 1.5v9.111m0 0 3.111-3.403M8.5 10.611 5.389 7.208'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .service-overview-card__example-badge {
	background: rgba(255, 255, 255, 0.1);
	box-shadow: none;
	color: var(--primary-color);
}
html[data-theme="dark"] .service-overview-card__example.btn:hover .service-overview-card__example-badge {
	background: rgba(255, 255, 255, 0.18);
	color: var(--color-white);
}

/* Карточки модулей: подзаголовок — название продукта линейки
   («Балка GURU 3.0») ссылкой на страницу продукта. Типографика описания,
   но полужирная и ближе к заголовку: в колонке контента gap 16px,
   поэтому строка подтягивается отрицательным отступом. Цвет живет
   на ссылке — приглушение opacity осталось текстовому варианту, иначе
   родительская прозрачность гасила бы и зеленый. */
.service-overview-card__subtitle {
	font-family: Onest, sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	margin: -8px 0 0;
	text-align: left;
}
.service-overview-card__subtitle--plain {
	color: #000;
	opacity: 0.5;
	transition: color 0.3s ease, opacity 0.3s ease;
}
html[data-theme="dark"] .service-overview-card__subtitle--plain {
	color: var(--text-secondary);
	opacity: 0.9;
}
.service-overview-card__subtitle-link {
	color: var(--primary-color);
	text-decoration: none;
	transition: color 0.3s ease;
}
.service-overview-card__subtitle-link:hover,
.service-overview-card__subtitle-link:focus-visible {
	color: var(--primary-color-hover);
}
/* Подчеркивается только сам текст: линия у ссылки целиком тянулась бы
   и под неразрывный пробел перед стрелкой, оставляя хвостик. */
.service-overview-card__subtitle-link:hover .service-overview-card__subtitle-text,
.service-overview-card__subtitle-link:focus-visible .service-overview-card__subtitle-text {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Стрелка перехода: наследует цвет ссылки, приклеена к последнему слову
   неразрывным пробелом (не остается одна на новой строке), на ховере
   уходит по диагонали — направление совпадает с самой стрелкой. */
.service-overview-card__subtitle-arrow {
	flex: none;
	margin-bottom: 0.1em;
	transition: transform 0.3s ease;
	vertical-align: middle;
	width: 0.75em;
	height: 0.75em;
}
.service-overview-card__subtitle-link:hover .service-overview-card__subtitle-arrow,
.service-overview-card__subtitle-link:focus-visible .service-overview-card__subtitle-arrow {
	transform: translate(2px, -2px);
}
@media (prefers-reduced-motion: reduce) {
	.service-overview-card__subtitle-arrow {
		transition: none;
	}
	.service-overview-card__subtitle-link:hover .service-overview-card__subtitle-arrow,
	.service-overview-card__subtitle-link:focus-visible .service-overview-card__subtitle-arrow {
		transform: none;
	}
}
@media (max-width: 767px) {
	.service-overview-card__subtitle {
		font-size: 16px;
	}
}
@media (max-width: 480px) {
	.service-overview-card__subtitle {
		font-size: 15px;
	}
}

/* ─────────────────────────────────────────────────────────────────────
   Единый акцент. В собранном бандле guru-landing осталось несколько
   «своих» зеленых (#44c152 у .text-green, #4acd65 у ночных акцентов):
   рядом с кнопками дизайн-системы они читаются как разные бренды.
   Все ведем к --primary-color — токен уже переключается по темам
   (#28a745 светлая / #3fb950 темная), поэтому парных правил не нужно.
   ───────────────────────────────────────────────────────────────────── */
.text-green {
	color: var(--primary-color);
}
.cta__module-text,
html[data-theme="dark"] .cta__module-text {
	color: var(--primary-color);
}
.main-bg__mesh-node,
html[data-theme="dark"] .main-bg__mesh-node {
	fill: var(--primary-color);
}
.main-bg__pulse,
html[data-theme="dark"] .main-bg__pulse {
	stroke: var(--primary-color);
}
.how-it-works__eyebrow {
	color: var(--primary-color);
}
.main-bg__dot,
html[data-theme="dark"] .main-bg__dot {
	fill: var(--primary-color);
}
.main-bg__mesh-link {
	stroke: rgba(var(--primary-color-rgb), 0.22);
}
html[data-theme="dark"] .main-bg__mesh-link {
	stroke: rgba(var(--primary-color-rgb), 0.2);
}
.main-bg__glyph {
	fill: rgba(var(--primary-color-rgb), 0.35);
}
html[data-theme="dark"] .main-bg__glyph {
	fill: rgba(var(--primary-color-rgb), 0.32);
}
.how-it-works__glow {
	color: var(--primary-color);
}
.how-it-works__step-number {
	color: var(--primary-color);
}
.header .header__mobile-toggle .header__mobile-toggle-line {
	background: var(--primary-color);
}
.feature-slider__dot--active {
	background-color: var(--primary-color);
}
.main-bg__ring,
html[data-theme="dark"] .main-bg__ring {
	stroke: rgba(var(--primary-color-rgb), 0.8);
}
.cta__btn--primary,
.cta-scene__badge,
.how-it-works__dash--active,
.footer__trust-dot {
	background: var(--primary-color);
}
.truss-value--t text {
	fill: var(--primary-color);
}
.cta-scene[data-phase="4"] .truss-member--t {
	stroke: var(--primary-color);
}
/* Сцена за экраном (guru-cta-scene.js): фазы меняются без переходов — те шли в главном потоке */
.cta-scene.is-offscreen,
.cta-scene.is-offscreen * {
	transition: none !important;
}

/* Точки орбит фона: только пульс, без появления dot-in из бандла. Две анимации одного
   свойства (opacity) Chrome не отдает видеокарте, и шесть точек держали пересчет всей
   страницы каждый кадр (замер 05.11.2026: 13% главного потока, с одним пульсом — 0,7%).
   Задержки — пульса из бандла; prefers-reduced-motion гасит фон в бандле (!important). */
.main-bg__dot {
	animation: dot-pulse 5s ease-in-out infinite alternate;
}
.main-bg__dot--1 {
	animation-delay: 2.1s;
}
.main-bg__dot--2 {
	animation-delay: 2.8s;
}
.main-bg__dot--3 {
	animation-delay: 3.5s;
}
.main-bg__dot--4 {
	animation-delay: 4.2s;
}
.main-bg__dot--5 {
	animation-delay: 4.9s;
}
.main-bg__dot--6 {
	animation-delay: 5.6s;
}

/* Отбивка шапки карточки (иконка · заголовок · продукт) от контентной
   части. Начинается акцентом в цвет продуктовой ссылки и растворяется
   вправо, поэтому не выглядит «таблицей» и не спорит с рамкой карточки.
   opacity сбрасывается: у hr в бандле стоит .25 и линия бы выцвела. */
.service-overview-card__divider {
	background: linear-gradient(
		90deg,
		rgba(var(--primary-color-rgb), 0.5) 0,
		rgba(0, 0, 0, 0.1) 20%,
		transparent 82%
	);
	border: 0;
	height: 1px;
	margin: 4px 0 0;
	opacity: 1;
}
html[data-theme="dark"] .service-overview-card__divider {
	background: linear-gradient(
		90deg,
		rgba(var(--primary-color-rgb), 0.6) 0,
		rgba(255, 255, 255, 0.12) 20%,
		transparent 82%
	);
}

/* ─────────────────────────────────────────────────────────────────────────
 * Кнопки витрины: цвет в фокусе и единый радиус (владелец 03.11.2026, баги 5 и 6)
 * ─────────────────────────────────────────────────────────────────────────
 *
 * ФОКУС НЕ ПЕРЕКРАШИВАЕТ КНОПКУ. Пакет @guru_team/shared-styles задаёт
 * `a:focus { color: var(--link-color-focus) }` (#1e7e34) — правило для ТЕКСТОВЫХ
 * ссылок, но его специфичность (0,1,1) выше любого класса кнопки (0,1,0), и после
 * клика мышью (ссылка остаётся в фокусе, курсор ушёл) кнопка получала тёмно-зелёный
 * текст. На зелёной пилюле «Расчет рамы» он сливался с фоном — баг, который владелец
 * отмечал дважды. Ниже каждой кнопке-ссылке возвращён её собственный цвет; правила
 * идут в style.css, то есть ПОЗЖЕ main.css, при равной специфичности побеждают они.
 * Кнопки-<button> (.features__tab, .gwin-tab, .sg-rv__cta) правилом не задевались.
 */
.ghero-btn-p:focus,
.cta__btn--primary:focus,
.cta-final__btn--ghost:focus,
.sg-header__login:focus {
	color: #fff;
}

.ghero-btn-s:focus {
	color: var(--color-text-primary);
}

.cta__btn--ghost:focus,
.btn:focus,
.overview__service:focus {
	color: var(--color-text-primary);
}

/* Активная вкладка — белым поверх зелёной заливки (0,2,0 > 0,1,1) */
.overview__service--active:focus {
	color: var(--color-white);
}

/* Кнопка-пример «Пример расчета»: её собственный цвет и есть зелёный — оставляем */
.btn--outline.service-overview-card__example:focus {
	color: #1e7e34;
}

/*
 * ЕДИНЫЙ РАДИУС. На главной соседствовали четыре формы кнопок: 11px (hero),
 * 14px (тарифы), 30px (.btn) и пилюля 999px (CTA, вкладки, «Войти»). Пилюля —
 * преобладающая форма витрины и та, в которой сделаны главные CTA, поэтому все
 * кнопки-действия приведены к ней: одна форма = один смысл «это кнопка»
 * (единообразие контролов — базовое правило UI). Карточки и плитки (.gmod, 16px)
 * кнопками не являются и свой радиус сохраняют.
 */
/* hero (.ghero-btn-*) и тарифы (.sg-tariffs__cta) приведены к пилюле в своих файлах —
   hero-v3.css плагина и tariffs.css темы: их правила идут позже этого файла. Здесь —
   общий .btn бандла («Перейти к расчету», «Пример расчета»). */
.btn {
	border-radius: var(--radius-full, 999px);
}

/* ─────────────────────────────────────────────────────────────────────────
 * Переключатель модулей секции «Возможности» на телефоне (владелец 03.11.2026, баг 11)
 *
 * Пять кнопок стояли колонкой по 280px и занимали почти весь экран: до самого показа
 * интерфейса (ради которого секция и сделана) приходилось прокручивать пять строк.
 * Кладем их лентой поперек экрана с прокруткой пальцем — ровно так же, как вкладки
 * «Обзора возможностей» (overview.css плагина): один язык у двух одинаковых по смыслу
 * переключателей. Поля −20px доводят ленту до краев экрана (у .container поля 20px),
 * внутренний padding возвращает первой и последней кнопке воздух.
 * ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.features__tabs {
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 8px;
		margin: 0 -20px 24px;
		padding: 2px 20px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		scroll-padding-left: 20px;
	}

	.features__tabs::-webkit-scrollbar {
		display: none;
	}

	.features__tab {
		flex: 0 0 auto;
		width: auto;
		white-space: nowrap;
		padding: 10px 18px;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * Мокап телефона в секции «Модули на телефоне» (владелец 03.11.2026, баг 12)
 *
 * Блок с картинкой центрирован (auto-поля), а вот сам телефон внутри кадра нарисован
 * не по центру: слева в холсте 82px пустоты, справа 6px — замер по альфа-каналу всех
 * кадров (module-beam/frame/section, светлые и темные, 528 и 818). Сдвиг у всех
 * одинаковый, +7.2% ширины, поэтому возвращаем кадр на ось блока одним правилом.
 * Перерисовывать шесть картинок ради этого не нужно: пропорции кадра и верстка
 * вокруг него остаются прежними. Только ≤767: на десктопе кадр стоит не по центру
 * секции, а в правой части композиции с кругами — там его положение задано дизайном.
 * ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.how-it-works__phone {
		transform: translateX(-7.2%);
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * Значок AI в списке возможностей карточки модуля (владелец 03.11.2026, баг 9)
 *
 * Тот же знак, что у промо-полосы окна первого экрана (.gwin-promo-ai в hero-v3.css
 * плагина): зеленая плашка с белыми буквами. Повторен здесь, потому что список
 * карточки — другая секция со своим бандлом стилей; значения держать одинаковыми.
 * ───────────────────────────────────────────────────────────────────────── */
.service-overview-card__ai {
	display: inline-block;
	/* Пункт списка — flex-строка (галочка ::before + текст), поэтому значок в ней
	   становится отдельным элементом: без выравнивания по верху он вставал по центру
	   двухстрочного пункта, то есть рядом со ВТОРОЙ строкой. */
	align-self: flex-start;
	margin-top: 2px;
	vertical-align: 1px;
	margin-right: 5px;
	padding: 2px 5px 1.5px;
	border-radius: 5px;
	font-size: 10px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: 0.05em;
	color: #fff;
	background: #1e7e34;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Правовые страницы: политика конфиденциальности, пользовательское соглашение
 *
 * Простой документ без блоков Elementor: заголовок, разделы, списки. Ширина — как
 * у читаемой колонки (≈75 знаков в строке), поля — от контейнера темы.
 * ───────────────────────────────────────────────────────────────────────── */
.guru-legal {
	padding: 56px 0 72px;
}

.guru-legal__doc {
	max-width: 820px;
	margin: 0 auto;
	color: var(--color-text-primary);
	font-family: var(--font-family);
	font-size: 16px;
	line-height: 1.7;
}

.guru-legal__eyebrow {
	margin: 0 0 10px;
	color: var(--primary-color);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.guru-legal h1 {
	margin: 0 0 12px;
	font-size: 40px;
	line-height: 1.15;
	font-weight: 700;
}

.guru-legal__updated {
	margin: 0 0 36px;
	color: var(--text-secondary);
	font-size: 14px;
}

.guru-legal h2 {
	margin: 36px 0 12px;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
}

.guru-legal p {
	margin: 0 0 14px;
}

.guru-legal ul {
	margin: 0 0 14px;
	padding-left: 22px;
	list-style: disc;
}

.guru-legal li {
	margin-bottom: 8px;
}

.guru-legal a {
	color: var(--link-color);
}

@media (max-width: 767px) {
	.guru-legal {
		padding: 32px 0 48px;
	}

	.guru-legal h1 {
		font-size: 30px;
	}

	.guru-legal h2 {
		font-size: 19px;
	}

	.guru-legal__doc {
		font-size: 15.5px;
	}
}