@font-face {
	font-family: "Golos Text";
	src: url("../fonts/golos-text-variable.woff2") format("woff2");
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
}

:root {
	--gs-paper: #eef3f5;
	--gs-white: #ffffff;
	--gs-ink: #173a51;
	--gs-ink-deep: #102b3e;
	--gs-blue: #3c78a2;
	--gs-blue-soft: #cbdce6;
	--gs-coral: #d84a69;
	--gs-coral-dark: #b63250;
	--gs-error: #8d1731;
	--gs-success: #175e49;
	--gs-line: 1px solid rgba(23, 58, 81, 0.2);
	--gs-shell: var(--shell);
	--gs-space: clamp(4.5rem, 9vw, 9rem);
	--gs-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--gs-paper);
	color: var(--gs-ink);
	font-family: "Golos Text", "Segoe UI", sans-serif;
	font-size: 1rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

body.menu-open {
	overflow: hidden;
}

img,
svg {
	display: block;
	max-width: 100%;
}

button,
input,
select,
textarea {
	font: inherit;
}

a {
	color: inherit;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
}

h1,
h2,
h3,
p {
	margin-top: 0;
}

h1,
h2,
h3 {
	color: var(--gs-ink-deep);
	font-weight: 760;
	letter-spacing: -0.03em;
	line-height: 0.98;
	text-wrap: balance;
}

h1 {
	max-width: 12ch;
	font-size: clamp(3.4rem, 6.4vw, 6rem);
}

h2 {
	max-width: 16ch;
	font-size: clamp(2.4rem, 4.6vw, 4.8rem);
}

h3 {
	font-size: clamp(1.25rem, 2vw, 1.8rem);
	line-height: 1.12;
}

:focus-visible {
	outline: 3px solid var(--gs-ink-deep);
	outline-offset: 4px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.gs-skip-link {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 1000;
	padding: 0.85rem 1rem;
	background: var(--gs-ink-deep);
	color: var(--gs-white);
	transform: translateY(-180%);
}

.gs-skip-link:focus {
	transform: translateY(0);
}

.gs-shell {
	width: var(--gs-shell);
	margin-inline: auto;
}

.gs-icon {
	width: 1.5rem;
	height: 1.5rem;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

/*
 * Стоматологический словарь и звезда рейтинга нарисованы силуэтом, а не
 * контуром. Правило идёт после .gs-icon и перебивает его: обводка поверх
 * такой формы залепила бы вырезы, которыми она и читается.
 */
.gs-icon--solid {
	fill: currentColor;
	stroke: none;
}

.gs-prose {
	max-width: 72ch;
}

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

.gs-main {
	overflow: clip;
}

/* Телефон часто стоит голой ссылкой внутри тёмных карточек: на телефоне
   такой строке не хватало высоты до тач-минимума. */
@media (max-width: 820px) {
	a[href^="tel:"] {
		display: inline-flex;
		min-height: var(--tap);
		align-items: center;
	}
}

/* Текстовая страница вне конструктора: заголовок упирался в липкую шапку,
   а последний абзац — в футер. */
.gs-main.gs-prose {
	padding-block: var(--section-y);
}

.gs-main.gs-prose h1 {
	margin-bottom: var(--s-8);
}

.gs-main.gs-prose h2 {
	margin-top: var(--s-10);
}

.gs-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--c-bg);
	border-bottom: var(--gs-line);
	transition: box-shadow var(--dur) var(--ease);
}

.gs-header.is-scrolled {
	box-shadow: 0 0.55rem 1.8rem rgba(16, 43, 62, 0.1);
}

.gs-header__contact-bar {
	background: var(--gs-ink-deep);
	color: var(--gs-white);
	font-size: 0.78rem;
	font-weight: 650;
}

.gs-header__contact-inner {
	display: grid;
	min-height: 2.35rem;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: clamp(1rem, 2.5vw, 2.5rem);
	align-items: center;
}

.gs-header__contact-inner > * {
	min-width: 0;
	margin: 0;
}

.gs-header__addresses {
	display: flex;
	min-width: 0;
	justify-content: center;
	gap: clamp(0.8rem, 2vw, 2rem);
}

.gs-header__addresses > * {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Мобильный дубль адресов рядом с логотипом. На десктопе их показывает
   тёмная полоса выше, второй раз в той же шапке они не нужны. */
.gs-header__places {
	display: none;
}

.gs-header__contact-bar a:hover {
	color: var(--gs-blue-soft);
}

.gs-header__contact-bar a:focus-visible,
.gs-menu a:focus-visible,
.gs-footer a:focus-visible,
.gs-footer button:focus-visible {
	outline-color: var(--gs-white);
}

.gs-header__inner {
	display: flex;
	min-height: 4.9rem;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.gs-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	color: var(--gs-ink-deep);
	font-size: clamp(1rem, 1.5vw, 1.35rem);
	font-weight: 700;
	line-height: 1.05;
	text-decoration: none;
}

.gs-brand__mark {
	width: 2.7rem;
	height: 2.7rem;
}

.gs-brand__text {
	max-width: 12rem;
}

.gs-site-logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	object-position: left center;
}

.gs-site-logo--header {
	max-width: 15rem;
	max-height: 3.5rem;
}

.gs-header__actions,
.gs-header__phone,
.gs-header__messengers {
	display: flex;
	align-items: center;
}

.gs-header__actions {
	gap: clamp(0.5rem, 1.5vw, 1.5rem);
}

.gs-header__nav {
	margin-inline: auto;
}

.gs-header__nav ul {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-header__nav a {
	display: inline-flex;
	min-height: var(--tap);
	align-items: center;
	font-size: var(--t-sm);
	font-weight: 600;
	text-decoration: none;
}

.gs-header__nav a:hover {
	color: var(--c-blue-deep);
}

.gs-header__phone {
	gap: 0.55rem;
	min-height: var(--tap);
	font-size: 1.05rem;
	font-weight: 700;
	text-decoration: none;
}

.gs-phone-icon {
	display: block;
	width: 1.45rem;
	height: 1.45rem;
	flex: 0 0 1.45rem;
	object-fit: contain;
}

.gs-phone-icon--light {
	filter: brightness(0) invert(1);
}

.gs-header__messengers {
	gap: 0.45rem;
}

.gs-header__messengers a {
	display: grid;
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-decoration: none;
}

.gs-header__messengers a:hover {
	background: transparent;
	opacity: 0.72;
}

.gs-messenger-icon {
	display: block;
	width: 1.55rem;
	height: 1.55rem;
	flex: 0 0 1.55rem;
	object-fit: contain;
}

.gs-header__messengers .gs-messenger-icon {
	width: 1.7rem;
	height: 1.7rem;
}

.gs-button {
	display: inline-flex;
	min-height: 3.35rem;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	padding: 0.9rem 1.4rem;
	border: 0;
	background: var(--gs-blue);
	color: var(--gs-white);
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	border-radius: var(--r-sm);
	clip-path: none;
	transition: background-color 240ms var(--gs-ease), transform 240ms var(--gs-ease), box-shadow 240ms var(--gs-ease);
}

.gs-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 0.65rem 1.5rem rgba(16, 43, 62, 0.17);
}

.gs-button:disabled {
	cursor: wait;
	opacity: 0.62;
	transform: none;
}

.gs-button--compact {
	min-height: 2.85rem;
	padding-block: 0.7rem;
}

.gs-button--coral {
	background: var(--gs-coral);
}

.gs-button--coral:hover {
	background: var(--gs-coral-dark);
}

.gs-button--dark {
	background: var(--gs-ink-deep);
}

.gs-menu-button {
	display: grid;
	width: 2.9rem;
	height: 2.9rem;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--gs-ink-deep);
	color: var(--gs-white);
	cursor: pointer;
}

/* Высоту задаёт содержимое: в меню теперь три-пять услуг, и min-height
   в 36rem оставлял под ними пустую тёмную плиту на пол-экрана. */
.gs-menu {
	position: absolute;
	inset: 100% 0 auto;
	padding-block: 2rem 2.5rem;
	background: var(--gs-ink-deep);
	color: var(--gs-white);
	box-shadow: 0 1rem 2.8rem rgba(16, 43, 62, 0.22);
}

/* Одна колонка на всех ширинах. Двухколоночная сетка была рассчитана на
   длинную навигацию: на трёх услугах она оставляла дыру во второй строке,
   а названия вроде «Имплантация зубов в Оренбурге» ломались на три
   строки в 405px. Списком услуги читаются сверху вниз за один проход. */
.gs-menu ul {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-menu ul a {
	display: block;
	padding: 1.1rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	font-size: clamp(1.15rem, 2.2vw, 1.9rem);
	font-weight: 650;
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

@media (hover: hover) {
	.gs-menu ul a:hover {
		color: var(--c-accent-on-deep);
	}
}

.gs-menu__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr);
	gap: clamp(3rem, 8vw, 8rem);
}

/* Надпись над списком услуг: в меню теперь один раздел, и без подписи
   ссылки читаются как случайный набор страниц. */
.gs-menu__label {
	margin: 0 0 0.75rem;
	color: var(--c-on-deep-2);
	font-size: 0.78rem;
	font-weight: 650;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Текущая услуга остаётся в списке, но перестаёт быть ссылкой на вид:
   иначе посетитель тыкает в неё и получает перезагрузку той же страницы. */
.gs-menu ul a[aria-current="page"] {
	color: var(--c-accent-on-deep);
}

.gs-menu__action {
	display: grid;
	align-content: start;
	gap: 0.85rem;
	padding-top: 1rem;
}

.gs-menu__note {
	margin: 0;
	color: var(--c-on-deep-2);
	font-size: 0.88rem;
}

.gs-hero {
	position: relative;
	background: var(--gs-white);
}

.gs-hero__planes {
	position: absolute;
	inset: 0 24% 0 32%;
	background: var(--gs-paper);
	clip-path: polygon(8% 10%, 100% 0, 83% 40%, 100% 65%, 48% 100%, 0 76%, 15% 48%, 0 28%);
	opacity: 0.78;
}

.gs-hero__grid {
	position: relative;
	display: grid;
	min-height: 43rem;
	grid-template-columns: minmax(0, 0.82fr) minmax(19rem, 0.92fr) minmax(20rem, 0.62fr);
	align-items: stretch;
}

.gs-hero__copy {
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 3vw, 3rem) 5rem 0;
}

.gs-hero__copy h1 {
	margin-bottom: 2.2rem;
}

.gs-hero__text {
	max-width: 32rem;
	color: var(--gs-blue);
	font-size: clamp(1.05rem, 1.45vw, 1.3rem);
}

.gs-hero__mobile-cta {
	display: none;
	align-self: flex-start;
	margin-top: 1.4rem;
}

.gs-hero__portrait {
	position: relative;
	z-index: 1;
	min-height: 43rem;
	overflow: hidden;
}

.gs-hero__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}

.gs-hero__halftone {
	position: absolute;
	inset: 0 -1px 0 auto;
	width: 27%;
	background-color: var(--gs-ink-deep);
	background-image: radial-gradient(circle, var(--gs-ink-deep) 0 1.5px, transparent 1.7px);
	background-size: 8px 8px;
	mask-image: linear-gradient(90deg, transparent, var(--gs-ink-deep) 82%);
	pointer-events: none;
}

.gs-required-media {
	display: grid;
	height: 100%;
	min-height: 30rem;
	place-items: center;
	padding: 2rem;
	background: var(--gs-blue-soft);
	color: var(--gs-ink-deep);
	text-align: center;
}

.gs-required-media span {
	max-width: 18rem;
	padding: 1rem;
	border: 1px dashed var(--gs-blue);
	font-weight: 700;
}

.gs-hero__form-panel {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	padding: 3.5rem clamp(1.5rem, 3vw, 3rem);
	background: var(--gs-coral);
	color: var(--gs-white);
}

.gs-hero__form-panel::after {
	position: absolute;
	right: 100%;
	bottom: 0;
	width: 2.4rem;
	height: 38%;
	background: var(--gs-coral);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	content: "";
}

.gs-lead-form {
	width: 100%;
}

.gs-lead-form__title {
	max-width: 10ch;
	margin-bottom: 1rem;
	color: inherit;
	font-size: clamp(2rem, 3vw, 3.25rem);
}

.gs-lead-form__note {
	max-width: 34rem;
	margin-bottom: 1.5rem;
	color: rgba(255, 255, 255, 0.88);
}

.gs-field {
	display: grid;
	gap: 0.35rem;
	margin-bottom: 0.9rem;
}

.gs-field span {
	font-size: 0.86rem;
	font-weight: 650;
}

.gs-field input,
.gs-field select {
	width: 100%;
	min-height: 3.45rem;
	padding: 0.8rem 1rem;
	border: 2px solid transparent;
	border-radius: 0;
	background: var(--gs-white);
	color: var(--gs-ink-deep);
}

.gs-field input::placeholder {
	color: var(--c-ink-3);
	opacity: 1;
}

.gs-field input:focus,
.gs-field select:focus {
	border-color: var(--gs-ink-deep);
	outline: none;
}

.gs-field input[aria-invalid="true"],
.gs-field select[aria-invalid="true"] {
	border-color: var(--gs-error);
}

.gs-consent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.7rem;
	align-items: start;
	margin: 1.1rem 0 1.4rem;
	font-size: 0.78rem;
	line-height: 1.35;
}

.gs-consent input {
	width: 1.2rem;
	height: 1.2rem;
	margin: 0;
	accent-color: var(--gs-ink-deep);
}

.gs-honeypot {
	position: absolute;
	left: -9999px;
}

.gs-lead-form__submit {
	width: 100%;
}

.gs-lead-form--quiz.is-contact-step .gs-lead-form__note {
	display: none;
}

.gs-quiz__progress {
	display: grid;
	gap: 0.55rem;
	margin-bottom: 1.5rem;
	font-size: 0.82rem;
	font-weight: 700;
}

.gs-quiz__progress > div {
	height: 0.22rem;
	background: rgba(255, 255, 255, 0.3);
}

.gs-quiz__progress i {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--gs-white);
	transform: scaleX(var(--gs-quiz-progress, 0.3333));
	transform-origin: left center;
	transition: transform 320ms var(--gs-ease);
}

.gs-quiz__step {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.gs-quiz__step[hidden] {
	display: none;
}

.gs-quiz__step legend {
	width: 100%;
	margin-bottom: 1rem;
	padding: 0;
	color: var(--gs-white);
	font-size: clamp(1.3rem, 2vw, 1.75rem);
	font-weight: 750;
	line-height: 1.12;
}

.gs-quiz__choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.65rem;
	margin-bottom: 1.2rem;
}

.gs-quiz__choices label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.65rem;
	align-items: center;
	min-height: 3.5rem;
	padding: 0.75rem 0.9rem;
	background: var(--gs-white);
	color: var(--gs-ink-deep);
	font-weight: 650;
	cursor: pointer;
	transition: background-color 180ms var(--gs-ease), color 180ms var(--gs-ease), transform 180ms var(--gs-ease);
}

.gs-quiz__choices label:hover,
.gs-quiz__choices label:has(input:checked) {
	background: var(--gs-ink-deep);
	color: var(--gs-white);
	transform: translateY(-1px);
}

.gs-quiz__choices input {
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	accent-color: var(--gs-coral);
}

.gs-quiz__next {
	width: 100%;
}

.gs-quiz__actions {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.7rem;
	align-items: center;
}

.gs-quiz__back {
	min-height: 3.35rem;
	padding: 0.7rem 0;
	border: 0;
	border-bottom: 1px solid currentColor;
	background: transparent;
	color: var(--gs-white);
	font: inherit;
	font-weight: 650;
	cursor: pointer;
}

.gs-form-status {
	min-height: 1.5em;
	margin: 0.9rem 0 0;
	font-size: 0.9rem;
	font-weight: 650;
}

.gs-form-status.is-error {
	color: var(--gs-white);
}

.gs-form-status.is-success {
	color: var(--gs-white);
}

.gs-evidence-strip {
	position: relative;
	z-index: 4;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: -1.75rem;
	background: var(--gs-white);
}

.gs-evidence-strip__item {
	position: relative;
	min-height: 13rem;
	margin: 0;
	overflow: hidden;
	border-right: 0.7rem solid var(--gs-white);
	clip-path: polygon(0 0, 94% 0, 100% 100%, 4% 100%);
}

.gs-evidence-strip__item:last-child {
	border-right: 0;
}

.gs-evidence-strip__item figcaption {
	position: absolute;
	top: 1.4rem;
	left: clamp(1.2rem, 2.7vw, 2.5rem);
	z-index: 2;
	font-size: clamp(1.35rem, 2vw, 2rem);
	font-weight: 750;
}

.gs-evidence-strip__item img,
.gs-media-slot {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gs-media-slot {
	min-height: 12rem;
	background: var(--gs-paper);
	border: 1px dashed rgba(60, 120, 162, 0.4);
}

.gs-section {
	padding-block: var(--gs-space);
}

.gs-section:nth-child(odd) {
	background: var(--gs-white);
}

.gs-section__split {
	display: grid;
	grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
	gap: clamp(2.5rem, 7vw, 8rem);
	align-items: start;
}

.gs-section__split > :last-child {
	padding-top: clamp(0.2rem, 1vw, 1rem);
}

.gs-audience__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-audience__list li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.3rem;
	padding: 1.5rem 0;
	border-bottom: var(--gs-line);
}

.gs-audience__list .gs-icon {
	width: 2rem;
	height: 2rem;
	color: var(--gs-coral);
}

.gs-audience__list h3 {
	margin-bottom: 0.5rem;
}

.gs-audience__list p {
	margin-bottom: 0;
}

.gs-route {
	position: relative;
	background: var(--gs-paper) !important;
}

.gs-route h2 {
	margin-bottom: clamp(3rem, 6vw, 6rem);
}

.gs-route__list {
	display: grid;
	grid-template-columns: repeat(var(--stage-count), minmax(13rem, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: visible;
}

.gs-route__stage {
	position: relative;
	min-height: 0;
	padding: clamp(2rem, 3.5vw, 3.5rem) clamp(1.5rem, 2.8vw, 2.7rem) 0;
	overflow: hidden;
	background: var(--gs-white);
	clip-path: polygon(8% 0, 100% 4%, 92% 100%, 0 96%);
	transition: clip-path 700ms var(--gs-ease), transform 700ms var(--gs-ease);
}

.has-js .gs-route:not(.is-visible) .gs-route__stage {
	clip-path: polygon(8% 0, 14% 4%, 10% 100%, 0 96%);
	transform: translateX(-2rem);
}

.has-js .gs-route.is-visible .gs-route__stage:nth-child(2) {
	transition-delay: 80ms;
}

.has-js .gs-route.is-visible .gs-route__stage:nth-child(3) {
	transition-delay: 160ms;
}

.has-js .gs-route.is-visible .gs-route__stage:nth-child(4) {
	transition-delay: 240ms;
}

.gs-route__stage + .gs-route__stage {
	margin-left: -1.2rem;
}

.gs-route__stage:nth-child(even) {
	transform: translateY(-2rem);
}

.has-js .gs-route:not(.is-visible) .gs-route__stage:nth-child(even) {
	transform: translate(-2rem, -2rem);
}

.gs-route__number {
	margin-bottom: 1rem;
	color: var(--gs-blue);
	font-size: clamp(3.8rem, 6vw, 6.5rem);
	font-weight: 650;
	letter-spacing: -0.04em;
	line-height: 1;
}

.gs-route__stage h3 {
	margin-bottom: 1rem;
	font-size: clamp(1.8rem, 2.8vw, 3rem);
}

.gs-route__stage > p:not(.gs-route__number) {
	min-height: 0;
}

.gs-route__stage img,
.gs-route__stage .gs-media-slot {
	width: calc(100% + 5.4rem);
	height: 16rem;
	margin: 1.6rem -2.7rem 0;
	object-fit: cover;
}

.gs-methods__list {
	margin-top: clamp(3rem, 6vw, 6rem);
	border-top: var(--gs-line);
}

.gs-methods__list article {
	display: grid;
	grid-template-columns: minmax(14rem, 0.7fr) minmax(20rem, 1.3fr) auto;
	gap: 2rem;
	align-items: baseline;
	padding: 2rem 0;
	border-bottom: var(--gs-line);
}

.gs-methods__price {
	color: var(--gs-coral-dark);
	font-size: 1.2rem;
	font-weight: 750;
}

.gs-doctors__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin-top: clamp(3rem, 6vw, 6rem);
}

.gs-doctor {
	position: relative;
}

.gs-doctor__media {
	position: relative;
	aspect-ratio: 4 / 5;
	margin-bottom: 1.4rem;
	overflow: hidden;
	background: var(--gs-blue-soft);
	clip-path: polygon(0 0, 92% 0, 100% 92%, 8% 100%);
}

.gs-doctor__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gs-doctor h3 {
	margin-bottom: 0.6rem;
}

.gs-results__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	margin-top: clamp(3rem, 6vw, 6rem);
}

.gs-result {
	margin: 0;
}

.gs-result__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	aspect-ratio: 8 / 3;
	overflow: hidden;
}

.gs-result__pair img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gs-result figcaption {
	padding-top: 1rem;
}

.gs-faq__list {
	border-top: var(--gs-line);
}

.gs-faq details {
	border-bottom: var(--gs-line);
}

.gs-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem 0;
	font-size: 1.15rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.gs-faq summary::-webkit-details-marker {
	display: none;
}

.gs-faq details[open] summary .gs-icon {
	transform: rotate(180deg);
}

.gs-faq details .gs-prose {
	padding-bottom: 1.5rem;
}

.gs-conversion {
	background: var(--gs-coral) !important;
	color: var(--gs-white);
}

.gs-conversion__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(20rem, 0.65fr);
	gap: clamp(3rem, 10vw, 10rem);
	align-items: center;
}

.gs-conversion h2 {
	color: var(--gs-white);
}

.gs-conversion__form {
	padding: clamp(1.5rem, 3vw, 3rem);
	background: rgba(16, 43, 62, 0.14);
	clip-path: polygon(0 0, 96% 0, 100% 12%, 100% 100%, 4% 100%, 0 88%);
}

.gs-footer {
	background: var(--gs-ink-deep);
	color: rgba(255, 255, 255, 0.82);
}

.gs-footer__grid {
	display: grid;
	grid-template-columns: minmax(14rem, 0.8fr) minmax(20rem, 1.3fr) minmax(12rem, 0.7fr);
	gap: clamp(2rem, 6vw, 6rem);
	padding-block: clamp(4rem, 8vw, 7rem);
}

.gs-footer h2,
.gs-footer__brand {
	color: var(--gs-white);
	font-size: 1.2rem;
	font-weight: 750;
}

.gs-footer h3 {
	margin-bottom: 0.35rem;
	color: var(--gs-white);
	font-size: 1rem;
	line-height: 1.35;
}

.gs-footer address {
	font-style: normal;
}

.gs-footer__identity {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: 0.65rem;
}

.gs-footer__logo {
	display: inline-flex;
	max-width: 100%;
	color: var(--gs-white);
	text-decoration: none;
}

.gs-site-logo--footer {
	max-width: 15rem;
	max-height: 4.2rem;
	/* Логотип тёмный, на тёмном подвале его нужно выбелить.
	   Контур не нужен: белое на #0f2c40 даёт контраст с запасом. */
	filter: brightness(0) invert(1);
}

.gs-footer__identity > * {
	margin: 0;
}

.gs-footer__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--gs-white);
	font-size: clamp(1.25rem, 2vw, 1.8rem);
	font-weight: 750;
}

.gs-footer__branches {
	display: grid;
	align-content: start;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 2rem;
}

.gs-footer__branches > h2 {
	grid-column: 1 / -1;
	margin-bottom: 0.5rem;
}

.gs-footer__branch {
	min-width: 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.gs-footer__branch > * {
	margin-bottom: 0.5rem;
	overflow-wrap: anywhere;
}

.gs-footer__route-link,
.gs-footer__messengers a {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
	gap: 0.55rem;
	color: var(--gs-white);
	font-weight: 650;
}

.gs-footer__route-link .gs-icon,
.gs-footer__messengers .gs-icon {
	width: 1.15rem;
	height: 1.15rem;
}

.gs-footer__messenger-label {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}

.gs-footer__channels {
	min-width: 0;
}

.gs-footer__messengers {
	display: grid;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.gs-footer__messengers a {
	justify-content: space-between;
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
	text-decoration: none;
}

.gs-map {
	min-height: 28rem;
	background: var(--gs-blue-soft);
}

.gs-map iframe {
	display: block;
	width: 100%;
	height: 28rem;
	border: 0;
}

.gs-map__placeholder {
	display: grid;
	min-height: 28rem;
	place-items: center;
	align-content: center;
	gap: 1rem;
	color: var(--gs-ink-deep);
}

.gs-map__placeholder .gs-icon {
	width: 3rem;
	height: 3rem;
}

.gs-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-block: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 0.82rem;
}

.gs-footer__legal p {
	margin: 0;
}

@media (max-width: 1180px) {
	.gs-header__nav {
		display: none;
	}

	.gs-header__addresses > *:not(:first-child) {
		display: none;
	}

	/* Мессенджеры прячутся только там, где им не хватает места
	   рядом с навигацией. На мобильном навигации нет — они
	   возвращаются вместе с телефоном, это основные каналы связи. */
	.gs-header__messengers {
		display: none;
	}

	.gs-hero__grid {
		grid-template-columns: minmax(0, 0.88fr) minmax(18rem, 1fr);
	}

	.gs-hero__form-panel {
		grid-column: 1 / -1;
	}

	.gs-hero__form-panel .gs-lead-form {
		display: grid;
		grid-template-columns: 1.1fr 1fr 1fr;
		gap: 0.9rem;
		align-items: end;
	}

	.gs-hero__form-panel .gs-lead-form__title,
	.gs-hero__form-panel .gs-lead-form__note,
	.gs-hero__form-panel .gs-consent,
	.gs-hero__form-panel .gs-form-status {
		grid-column: 1 / -1;
	}

	.gs-route__list {
		overflow: visible;
		scroll-snap-type: none;
	}

	.gs-route__stage {
		min-width: 0;
		scroll-snap-align: none;
	}
}

@media (max-width: 820px) {
	:root {
		--gs-shell: min(100% - 2.5rem, 44rem);
	}

	h1 {
		font-size: clamp(3rem, 14vw, 5.1rem);
	}

	h2 {
		font-size: clamp(2.25rem, 10vw, 3.8rem);
	}

	.gs-header .gs-button--compact {
		display: none;
	}

	/* Мессенджеры и номер рядом с логотипом в одну строку не влезают:
	   четыре иконки плюс номер шире, чем остаток строки. Бургер
	   выводится из потока, и вторая строка получает всю ширину. */
	.gs-header__inner {
		/* Высоту первой строки задаёт логотип. Одна переменная на
		   логотип и бургер: иначе бургер центрируется по угаданному
		   отступу и садится на разделительную линейку. */
		--gs-brand-h: 3rem;
		position: relative;
		flex-wrap: wrap;
		row-gap: 0.5rem;
	}

	.gs-menu-button {
		position: absolute;
		top: calc((var(--gs-brand-h) - 2.9rem) / 2);
		right: 0;
	}

	/* nowrap: мессенджеры и номер держим в одной строке. С wrap на 375px
	   не хватало 7 пикселей, и номер уезжал на третий ряд — при липкой
	   шапке это заметная потеря первого экрана. */
	.gs-header__actions {
		width: 100%;
		gap: 0.5rem;
		flex-wrap: nowrap;
		justify-content: center;
		padding-top: 0.5rem;
		border-top: 1px solid var(--c-line);
	}

	.gs-header__messengers {
		display: flex;
		flex: 0 0 auto;
		gap: 0;
	}

	/* Размер плавающий, а не по брейкпоинтам: четыре кнопки и номер должны
	   уместиться в строку и на 320px, и на 430px. Нижняя граница 1.95rem
	   (~31px) — выше минимума WCAG 2.2 (24px), но ниже комфортных 44px:
	   это цена одной строки вместо двух. Звонок и запись рядом остаются
	   целями нормального размера. */
	.gs-header__messengers a {
		width: clamp(1.95rem, 9.6vw, 2.4rem);
		height: clamp(1.95rem, 9.6vw, 2.4rem);
	}

	.gs-header__messengers .gs-messenger-icon {
		width: clamp(1.15rem, 5.6vw, 1.45rem);
		height: clamp(1.15rem, 5.6vw, 1.45rem);
	}

	.gs-header__phone {
		flex: 0 1 auto;
		min-width: 0;
		font-size: clamp(0.8rem, 3.8vw, 0.92rem);
		white-space: nowrap;
	}

	.gs-header__contact-bar {
		display: none;
	}

	/* Адреса возвращаются вместо скрытой полосы — в свободное место справа
	   от логотипа. Это единственное место, где они не добавляют шапке
	   третий ряд: на 844px он съел бы ещё пятую часть экрана. */
	.gs-header__places {
		display: flex;
		/* `1 1 0` с нулевой базой, а не `0 1 auto`: иначе на 320px блок не
		   сжимается, а переносится на свою строку и шапка вырастает на
		   39px. Сжатие упирается в min-width: 0 и отдаёт адреса под
		   многоточие — это лучше, чем лишний ряд в липкой шапке. */
		flex: 1 1 0;
		min-width: 0;
		align-items: center;
		justify-content: flex-end;
		gap: 0.3rem;
		/* Бургер выведен из потока (position: absolute; right: 0), поэтому
		   место под него приходится держать отступом, а не gap. */
		margin-right: 3.5rem;
		color: var(--c-ink-2);
		font-size: 0.72rem;
		font-weight: 650;
		line-height: 1.35;
	}

	.gs-header__places-icon {
		width: 0.95rem;
		height: 0.95rem;
		flex: 0 0 auto;
		color: var(--c-ink);
	}

	.gs-header__places ul {
		display: grid;
		min-width: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.gs-header__places a {
		display: block;
		overflow: hidden;
		color: inherit;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Тач-минимум здесь не выдержать — строка адреса физически ниже 44px,
	   а разносить две строки на 44px значит вернуть третий ряд. Адрес не
	   основное действие шапки: звонок, мессенджеры и запись доступны
	   рядом кнопками нормального размера, а полный адрес со ссылкой на
	   карту лежит в меню под бургером и в подвале. */
	.gs-header__places a:active {
		color: var(--c-ink);
	}

	.gs-header__inner {
		min-height: 4.5rem;
	}

	.gs-brand__text {
		max-width: 9rem;
	}

	.gs-site-logo--header {
		max-width: 10rem;
		max-height: var(--gs-brand-h);
	}

	.gs-menu {
		max-height: calc(100vh - 4.5rem);
		overflow-y: auto;
	}

	.gs-menu__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.gs-hero__grid {
		width: 100%;
		grid-template-columns: 1fr;
	}

	.gs-hero__copy {
		width: var(--gs-shell);
		margin-inline: auto;
		padding: 4.5rem 0 2.5rem;
	}

	.gs-hero__mobile-cta {
		display: inline-flex;
	}

	.gs-hero__portrait {
		min-height: 30rem;
	}

	.gs-hero__form-panel {
		padding-inline: max(4.5vw, calc((100vw - 44rem) / 2));
	}

	.gs-hero__form-panel .gs-lead-form {
		display: block;
	}

	.gs-quiz__choices {
		grid-template-columns: 1fr;
	}

	.gs-evidence-strip {
		width: 100%;
		grid-template-columns: 1fr;
		margin-top: 0;
	}

	.gs-evidence-strip__item {
		min-height: 12rem;
		border-right: 0;
		border-bottom: 0.55rem solid var(--gs-white);
		clip-path: polygon(0 0, 100% 4%, 94% 100%, 0 94%);
	}

	.gs-section__split,
	.gs-conversion__grid,
	.gs-footer__grid {
		grid-template-columns: 1fr;
	}

	.gs-section__split {
		gap: 2rem;
	}

	.gs-route__list {
		display: block;
		overflow: visible;
	}

	.gs-route__stage,
	.gs-route__stage + .gs-route__stage,
	.gs-route__stage:nth-child(even) {
		min-height: auto;
		margin: -0.6rem 0 0;
		padding: 2.2rem 1.5rem 0 2rem;
		transform: none;
		clip-path: polygon(0 0, 96% 2%, 100% 96%, 4% 100%);
	}

	.gs-route__stage > p:not(.gs-route__number) {
		min-height: 0;
	}

	.gs-route__stage img,
	.gs-route__stage .gs-media-slot {
		width: calc(100% + 3.5rem);
		height: 13rem;
		margin: 1.4rem -1.5rem 0 -2rem;
	}

	.gs-methods__list article {
		grid-template-columns: 1fr;
		gap: 0.6rem;
	}

	.gs-doctors__list,
	.gs-results__list {
		grid-template-columns: 1fr;
	}

	.gs-footer__legal {
		align-items: flex-start;
		flex-direction: column;
	}

	.gs-footer__branches {
		grid-template-columns: 1fr;
	}
}

/* Движение выключается, обратная связь — нет: цвет, тень и
   прозрачность продолжают отвечать на действие. Зеркалит правило
   в tokens.css; раньше здесь глушились вообще все переходы, и
   кнопки переставали реагировать на нажатие. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-property: color, background-color, border-color, box-shadow, opacity, outline-color !important;
	}
}

/* ============================================================
   ОБЩИЕ ПРИМИТИВЫ РЕДАКЦИОННЫХ ЭКРАНОВ
   Призрачный номер секции повторялся десятью почти одинаковыми
   правилами. Общее собрано здесь, блок задаёт только положение
   и, если нужно, свой кегль и цвет через переменные.
   ============================================================ */

.gs-index {
	position: absolute;
	z-index: 0;
	color: var(--gs-index-color, color-mix(in srgb, var(--gs-block-soft) 78%, transparent));
	font-size: var(--gs-index-size, clamp(9rem, 16vw, 17rem));
	font-weight: 720;
	letter-spacing: -0.08em;
	line-height: 0.8;
	pointer-events: none;
}

/* Иконка вместо номера. Размер считается от font-size той же метки, поэтому
   каждый блок сохраняет свой масштаб: у FAQ знак мельче, у первого экрана
   крупнее — отдельные размеры задавать не нужно. Крупнее 1em ставить не
   стоит: на первом экране знак в два раза больше налезал на надзаголовок. */
.gs-index--icon {
	display: block;
	width: var(--gs-index-icon-size, 1em);
	line-height: 0;
}

/* Селектор из двух классов не для красоты: ниже по файлу лежит
   .gs-editable-icon с жёсткими 3rem, и при равной специфичности знак
   остался бы 48-пиксельным вместо метки во всю высоту блока.
   Прозрачность приезжает инлайновой переменной из поля «Прозрачность
   иконки». Висит на самом знаке, а не на обёртке: у обёртки opacity
   анимирует появление (gs-ghost-in), и анимация перебила бы значение
   редактора. */
.gs-index--icon .gs-index__glyph {
	display: block;
	width: 100%;
	height: auto;
	opacity: var(--gs-index-icon-opacity, 1);
}

/* Контурный знак темы наследует цвет метки через currentColor. Обводка
   тоньше обычной: на 17rem штрих в 1.8 превратился бы в жирную рамку,
   а знак должен читаться как водяной. */
.gs-index--icon svg.gs-index__glyph {
	stroke-width: 1.1;
}

/* Заливочный знак в той же роли ведёт себя иначе: контур на 17rem держит
   пустоту внутри, а силуэт кроет площадь целиком и при той же прозрачности
   читается пятном, а не водяным знаком. Гасим по умолчанию; поле
   «Прозрачность иконки» по-прежнему перебивает — переменная та же. */
.gs-index--icon svg.gs-icon--solid.gs-index__glyph {
	opacity: var(--gs-index-icon-opacity, 0.22);
}


/* ============================================================
   РЕДАКЦИОННЫЕ ЭКРАНЫ 01–02
   Все цвета наследуют глобальные SCF-токены; --gs-block-dark и
   --gs-block-soft могут быть переопределены редактором у блока.
   ============================================================ */

.gs-editorial-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-bottom: var(--s-6);
	color: var(--c-accent-text);
	font-size: var(--t-eyebrow);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.gs-editorial-eyebrow::before {
	width: 3px;
	height: 1.5rem;
	background: var(--c-accent);
	content: "";
}

.gs-editorial-button {
	display: inline-flex;
	min-height: 3.75rem;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.85rem;
	border: 2px solid transparent;
	border-radius: var(--r-sm);
	background: var(--c-accent-cta);
	color: var(--c-bg);
	font-size: var(--t-h4);
	font-weight: 650;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.gs-editorial-button:hover {
	background: var(--c-accent-cta-hover);
	box-shadow: var(--sh-md);
	transform: translateY(-1px);
}

.gs-editable-icon {
	width: 3rem;
	height: 3rem;
	object-fit: contain;
}

.gs-hero-editorial {
	--gs-block-dark: var(--c-bg-deep);
	--gs-block-soft: var(--c-bg-blue);
	position: relative;
	min-height: clamp(47rem, 76vw, 59rem);
	overflow: hidden;
	background: var(--c-bg);
}

.gs-hero-editorial__soft-plane,
.gs-hero-editorial__dark-plane,
.gs-hero-editorial__index {
	position: absolute;
	pointer-events: none;
}

.gs-hero-editorial__soft-plane {
	/* Верхний край выше надзаголовка: бейджик должен лежать на голубом,
	   а не на белом. 15% высоты первого экрана — примерно 150px на 1080. */
	inset: 0 30% 0 0;
	background: color-mix(in srgb, var(--gs-block-soft) 72%, var(--c-bg));
}

.gs-hero-editorial__dark-plane {
	inset: 0 0 0 70%;
	background: var(--gs-block-dark);
}

/* z-index: 1 — иначе метка не видна вообще. Первый экран единственный, где
   плоскости позиционированы и непрозрачны; в разметке они идут после метки,
   а z-index у них auto. При равном уровне выигрывает тот, кто ниже в DOM, и
   светло-голубая плита закрашивала метку целиком. Единица поднимает её над
   плоскостями, но оставляет под .gs-hero-editorial__inner с z-index: 2 —
   графика не лезет поверх заголовка. */
.gs-hero-editorial__index {
	z-index: 1;
	top: 1rem;
	left: max(1rem, calc((100vw - 1440px) / 2));
	--gs-index-color: color-mix(in srgb, var(--gs-block-soft) 78%, transparent);
	--gs-index-size: clamp(1rem, 5vw, 10rem);
}

.gs-hero-editorial__inner {
	position: relative;
	z-index: 2;
	display: grid;
	width: var(--shell);
	min-height: inherit;
	margin-inline: auto;
	/* Левая колонка шире прежнего: при 0.82fr под текст оставалось 464px,
	   и заголовок рвался на четыре строки вместо трёх. */
	grid-template-columns: minmax(25rem, 1fr) minmax(30rem, 1.2fr);
	/* Вторая строка — только под сноску. Так низ визуала привязан к низу
	   кнопки структурой сетки, а не подобранным отступом: меняется длина
	   заголовка — края продолжают совпадать. */
	grid-template-rows: auto auto;
	/* Строки держат высоту содержимого: без этого min-height секции
	   растягивает их, и визуал уезжает ниже кнопки. */
	align-content: start;
	align-items: start;
}

.gs-hero-editorial__copy {
	grid-area: 1 / 1;
}

.gs-hero-editorial__note {
	grid-area: 2 / 1;
}

.gs-hero-editorial__copy {
	z-index: 3;
	align-self: center;
	padding: clamp(1rem, 1vw, 1rem) clamp(1rem, 3vw, 1rem) 0 0;
}

.gs-hero-editorial h1 {
	/* Заголовок держит три строки. Самая длинная — «зубов в Оренбурге»,
	   569px при кегле 60px, поэтому под текст нужно не меньше 580px;
	   ширину задаёт колонка, мера здесь только верхний предел. */
	max-width: 20ch;
	margin-bottom: var(--s-6);
	font-size: var(--t-display);
	line-height: 1.04;
}

.gs-hero-editorial__lead {
	max-width: 35rem;
	color: var(--c-ink-2);
	font-size: var(--t-lead);
}

.gs-hero-editorial__benefits {
	display: grid;
	gap: var(--s-3);
	margin: var(--s-8) 0;
	padding: 0;
	list-style: none;
}

.gs-hero-editorial__benefits li {
	display: flex;
	min-height: var(--tap);
	align-items: center;
	gap: var(--s-4);
	font-size: var(--t-sm);
	font-weight: 600;
}

.gs-hero-editorial__benefit-icon {
	display: grid;
	width: 2.5rem;
	height: 2.5rem;
	flex: 0 0 2.5rem;
	place-items: center;
	border-radius: var(--r-sm);
	background: var(--gs-block-soft);
	color: var(--c-blue-deep);
}

.gs-hero-editorial__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-6);
	align-items: center;
}

.gs-editorial-link {
	display: inline-flex;
	min-height: var(--tap);
	align-items: center;
	border-bottom: 1.5px solid currentColor;
	color: var(--c-ink);
	font-weight: 650;
	text-decoration: none;
}

.gs-hero-editorial__note {
	padding: var(--s-5) clamp(2rem, 3vw, 3.5rem) var(--s-12) 0;
	margin: 0;
	color: var(--c-ink-3);
	font-size: var(--t-sm);
}

.gs-hero-editorial__visual {
	position: relative;
	display: flex;
	width: min(62rem, 100%);
	min-width: 0;
	flex-direction: column;
	grid-area: 1 / 2;
	align-self: stretch;
	padding-bottom: 0;
	margin-top: clamp(3.5rem, 5vw, 5rem);
	margin-right: 0;
}

.gs-hero-editorial__media {
	/* Высота кадра задана явно, а не растяжением по колонке: с flex: 1
	   снимок дотягивался до низа текста и на длинном заголовке вырастал
	   почти в квадрат. Одна величина держит его ландшафтным на любой
	   длине текста; если колонка текста выше, низ правой колонки просто
	   уходит в тёмную плоскость. */
	--gs-hero-media-h: clamp(24rem, 34vw, 36rem);
	z-index: 2;
	height: var(--gs-hero-media-h);
	flex: 0 0 auto;
	margin: 0;
	overflow: hidden;
	border-radius: var(--r-md);
	background: var(--gs-block-soft);
}

.gs-hero-editorial__media img {
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	object-position: var(--gs-hero-image-x, 50%) var(--gs-hero-image-y, 22%);
}

.gs-hero-editorial__metrics {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 4;
	display: grid;
	width: auto;
	margin: 0;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-radius: var(--r-sm);
	box-shadow: var(--sh-md);
	overflow: hidden;
}

.gs-hero-editorial__metric {
	display: grid;
	min-height: 8.25rem;
	place-content: center;
	gap: var(--s-2);
	padding: var(--s-4);
	background: var(--c-bg);
	color: var(--c-ink);
	text-align: center;
}

.gs-hero-editorial__metric + .gs-hero-editorial__metric {
	border-left: 1px solid var(--c-line);
}

.gs-hero-editorial__metric.is-dark {
	border-color: var(--c-line-deep);
	background: var(--gs-block-dark);
	color: var(--c-on-deep);
}

.gs-hero-editorial__metric strong {
	font-size: var(--t-metric);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.gs-hero-editorial__metric span {
	font-size: var(--t-sm);
}

.gs-audience-editorial {
	--gs-block-dark: var(--c-bg-deep);
	position: relative;
	overflow: hidden;
	background: var(--c-bg);
}

.gs-audience-editorial__index {
	top: -3rem;
	right: -1rem;
	--gs-index-color: var(--c-bg-blue);
	--gs-index-size: clamp(8rem, 16vw, 17rem);
}

.gs-audience-editorial__inner {
	position: relative;
	z-index: 1;
	display: grid;
	width: var(--shell);
	margin-inline: auto;
	/* 42/58 как в макете: при 0.72fr левая колонка занимала 36%%, и фото
	   с кнопкой оказывались в слишком узком столбце. */
	grid-template-columns: minmax(26rem, 0.85fr) minmax(34rem, 1.2fr);
}

.gs-audience-editorial__intro {
	display: flex;
	min-width: 0;
	flex-direction: column;
	padding: var(--section-y-sm) clamp(1.5rem, 3vw, 3rem) var(--section-y-sm) 0;
}

.gs-audience-editorial h2 {
	/* Две строки: самая длинная «Помогаем в ситуациях» — 504px при кегле
	   44px, поэтому мера не меньше 520px. При 10ch рвался на пять строк. */
	max-width: 26ch;
	font-size: var(--t-h2);
}

.gs-audience-editorial__lead {
	max-width: 32rem;
	color: var(--c-ink-2);
	font-size: var(--t-lead);
}

.gs-audience-editorial__media {
	min-height: 22rem;
	margin: var(--s-8) 0 0;
	overflow: hidden;
	border-radius: var(--r-md);
}

.gs-audience-editorial__media img {
	width: 100%;
	height: 100%;
	min-height: 22rem;
	object-fit: cover;
}

.gs-audience-editorial__actions {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--s-5);
	align-items: center;
	margin-top: var(--s-6);
}

.gs-audience-editorial__actions .gs-editorial-button {
	flex: 0 0 auto;
}

.gs-audience-editorial__note {
	display: flex;
	min-width: 0;
	max-width: none;
	align-items: center;
	gap: var(--s-3);
	color: var(--c-ink-2);
	font-size: var(--t-xs);
}

.gs-audience-editorial__note > span {
	flex: 0 0 4rem;
	color: var(--c-blue-deep);
}

/* Иконка вопроса крупная: это самостоятельный знак рядом с подписью,
   а не буллит. Ширина задана, высота тянется по пропорции. */
.gs-audience-editorial__note .gs-editable-icon,
.gs-audience-editorial__note .gs-icon {
	width: 4rem;
	height: auto;
}

.gs-audience-editorial__list {
	display: grid;
	min-width: 0;
	margin: 0;
	padding: var(--section-y-sm) 0 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
}

.gs-audience-editorial__item {
	position: relative;
	display: grid;
	min-height: 11rem;
	align-content: start;
	padding: 5rem clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.5rem, 2.4vw, 2.25rem);
	border-bottom: 1px solid var(--c-line);
	border-left: 1px solid var(--c-line);
	background: color-mix(in srgb, var(--c-bg) 92%, transparent);
}

.gs-audience-editorial__item.is-dark {
	border-color: var(--c-line-deep);
	background: var(--gs-block-dark);
	color: var(--c-on-deep);
}

.gs-audience-editorial__number {
	position: absolute;
	top: var(--s-4);
	left: clamp(2rem, 4vw, 3.5rem);
	color: var(--c-bg-blue);
	font-size: clamp(2.5rem, 3.6vw, 3.5rem);
	font-weight: 720;
	line-height: 1;
}

.gs-audience-editorial__item.is-dark .gs-audience-editorial__number {
	color: color-mix(in srgb, var(--c-on-deep) 38%, transparent);
}

.gs-audience-editorial__icon {
	position: absolute;
	top: var(--s-5);
	right: clamp(2rem, 4vw, 3.5rem);
	color: var(--c-blue-deep);
}

.gs-audience-editorial__icon .gs-editable-icon {
	width: 3rem;
	height: 3rem;
}

.gs-audience-editorial__item.is-dark .gs-audience-editorial__icon,
.gs-audience-editorial__item.is-dark h3 {
	color: var(--c-on-deep);
}

/* Загруженная иконка — растр, currentColor её не касается: на тёмной
   ячейке тёмный знак сливался с фоном. Выбеливаем тем же приёмом,
   что и логотип в подвале. Встроенные SVG живут на currentColor. */
.gs-audience-editorial__item.is-dark img.gs-audience-editorial__icon-media,
.gs-audience-editorial__item.is-dark .gs-audience-editorial__icon img {
	filter: brightness(0) invert(1);
}

/* Переходы состояний: цвет и фон, без сдвигов — ячейка некликабельна. */
.gs-audience-editorial__item,
.gs-audience-editorial__item h3,
.gs-audience-editorial__item p,
.gs-audience-editorial__item .gs-audience-editorial__icon,
.gs-audience-editorial__item .gs-audience-editorial__number {
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
		color var(--dur) var(--ease), filter var(--dur) var(--ease);
}

.gs-audience-editorial__item h3 {
	position: relative;
	/* Две строки резерва: заголовки и пояснения соседних ячеек
	   выравниваются по одному уровню независимо от длины текста. */
	min-height: 2.4em;
	margin-bottom: var(--s-3);
	font-size: var(--t-h3);
}

.gs-audience-editorial__item p {
	position: relative;
	max-width: 30ch;
	margin: 0;
	color: var(--c-ink-2);
	font-size: var(--t-sm);
}

.gs-audience-editorial__item.is-dark p {
	color: var(--c-on-deep-2);
}

@media (max-width: 1050px) {
	.gs-hero-editorial__inner {
		width: min(100% - 2.5rem, 1200px);
		grid-template-columns: minmax(22rem, 0.85fr) minmax(27rem, 1.15fr);
	}

	.gs-hero-editorial__visual {
		width: auto;
		padding-bottom: 0;
		margin-top: var(--s-6);
		margin-right: 0;
	}

	.gs-hero-editorial__metrics {
		position: relative;
		right: auto;
		bottom: auto;
		left: auto;
		width: calc(100% - 2rem);
		margin: -3rem auto 0;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gs-audience-editorial__inner {
		grid-template-columns: minmax(20rem, 0.75fr) minmax(30rem, 1.25fr);
	}
}

@media (max-width: 980px) {
	.gs-hero-editorial__copy,
	.gs-hero-editorial__note,
	.gs-hero-editorial__visual {
		grid-area: auto;
	}

	.gs-hero-editorial__note {
		padding: var(--s-5) var(--shell-gutter) var(--s-8);
		background: color-mix(in srgb, var(--gs-block-soft) 72%, var(--c-bg));
	}
}

@media (max-width: 760px) {
	.gs-hero-editorial {
		min-height: auto;
		padding-bottom: var(--section-y-sm);
	}

	/* Полоса шагов сама тёмная карточка со скруглением. Плоскость
	   под ней выступала прямоугольным краем из-под скругления —
	   на мобильном она лишняя. */
	.gs-hero-editorial__dark-plane {
		display: none;
	}

	/* Плоскость задавалась процентами и резала заголовок пополам.
	   На мобильном фон отдан самому блоку текста: граница теперь
	   совпадает с его краем, а не с угаданной долей высоты. */
	.gs-hero-editorial__soft-plane {
		display: none;
	}

	/* Номер стоял за самим заголовком и мутил его. По DESIGN.md
	   на 760 призрачные номера убираются — здесь именно тот случай. */
	.gs-hero-editorial__index {
		display: none;
	}

	.gs-hero-editorial__inner {
		width: 100%;
		grid-template-columns: 1fr;
	}

	.gs-hero-editorial__copy {
		width: 100%;
		padding: var(--section-y-sm) var(--shell-gutter) var(--s-6);
		background: color-mix(in srgb, var(--gs-block-soft) 72%, var(--c-bg));
	}

	.gs-hero-editorial__visual {
		width: 100%;
		margin-top: 0;
	}

	.gs-hero-editorial__media {
		width: calc(100% - var(--shell-gutter) * 2);
		height: 22rem;
		min-height: 22rem;
		margin-inline: auto;
		border-radius: var(--r-md);
	}

	.gs-hero-editorial__media img {
		min-height: 22rem;
	}

	.gs-hero-editorial__metrics {
		width: calc(100% - 2rem);
		margin: -2rem auto 0;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gs-hero-editorial__metric {
		min-height: 7rem;
	}

	.gs-audience-editorial__inner {
		grid-template-columns: 1fr;
	}

	.gs-audience-editorial__intro {
		padding-inline: 0;
	}

	.gs-audience-editorial__media {
		margin-left: -1rem;
	}

	.gs-audience-editorial__list {
		padding-top: 0;
	}
}

@media (max-width: 520px) {
	.gs-hero-editorial__actions,
	.gs-audience-editorial__actions {
		align-items: stretch;
		flex-direction: column;
	}

	/* width:100% не учитывает собственные margin-inline элемента: в FAQ
	   кнопка с отступами вылезала за правый край. Растяжение флекс-элементом
	   даёт ту же ширину и уважает поля. */
	.gs-editorial-button {
		width: auto;
		align-self: stretch;
	}

	/* Вторичное действие на телефоне — контурная кнопка, а не
	   подчёркнутая ссылка: на узком экране ссылка теряется
	   под заливной кнопкой. DESIGN.md такой вариант допускает. */
	.gs-editorial-link {
		width: auto;
		min-height: 3.75rem;
		align-self: stretch;
		justify-content: center;
		padding: 0.85rem 1.85rem;
		border: 2px solid var(--c-line-control);
		border-bottom-width: 2px;
		border-radius: var(--r-sm);
	}

	.gs-audience-editorial__list {
		grid-template-columns: 1fr;
	}

	.gs-audience-editorial__item {
		min-height: 15rem;
		border-left: 0;
	}
}

/* ============================================================
   МОУШЕН И СОСТОЯНИЯ ЭКРАНОВ 01–02
   Один авторский вход — «разворот собирается»: сначала плоскости,
   затем корешок текста, следом фотография, и последней на неё
   ложится полоса метрик. Экран 02 входит иначе: поле
   расчерчивается линейками, внутри ячейки первым идёт номер.
   Все состояния покоя — видимые: без CSS и без JS страница
   читается полностью, ничего не остаётся скрытым.
   ============================================================ */

@keyframes gs-plane-in-right {
	from { clip-path: inset(0 0 0 100%); }
	to { clip-path: inset(0); }
}

@keyframes gs-plane-in-top {
	from { clip-path: inset(100% 0 0 0); }
	to { clip-path: inset(0); }
}

@keyframes gs-ghost-in {
	from { opacity: 0; transform: translateY(-0.09em); }
	to { opacity: 1; transform: none; }
}

@keyframes gs-rule-draw {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

@keyframes gs-spine-in {
	from { opacity: 0; transform: translateY(1.1rem); }
	to { opacity: 1; transform: none; }
}

@keyframes gs-frame-in {
	from { clip-path: inset(0 0 100% 0); }
	to { clip-path: inset(0); }
}

@keyframes gs-photo-settle {
	from { transform: scale(1.06); }
	to { transform: none; }
}

@keyframes gs-strip-in {
	from { opacity: 0; transform: translateY(101%); }
	to { opacity: 1; transform: none; }
}

/* --- Экран 01: вход. Чистый CSS, без зависимости от JS: скрипт
   лежит в подвале, и гейт на .has-js дал бы вспышку финального
   состояния до перехода в стартовое. --- */

.gs-hero-editorial__dark-plane {
	animation: gs-plane-in-right 620ms var(--ease-entrance) both;
}

.gs-hero-editorial__soft-plane {
	animation: gs-plane-in-top 560ms var(--ease-entrance) 80ms both;
}

.gs-hero-editorial__index {
	animation: gs-ghost-in 720ms var(--ease-entrance) 140ms both;
}

.gs-hero-editorial .gs-editorial-eyebrow {
	animation: gs-spine-in 480ms var(--ease-entrance) 200ms both;
}

.gs-hero-editorial .gs-editorial-eyebrow::before {
	transform-origin: top;
	animation: gs-rule-draw 320ms var(--ease-entrance) 260ms both;
}

.gs-hero-editorial h1 {
	animation: gs-spine-in 600ms var(--ease-entrance) 240ms both;
}

.gs-hero-editorial__lead {
	animation: gs-spine-in 540ms var(--ease-entrance) 330ms both;
}

/* --gs-i приходит из шаблона: количество выгод и метрик задаёт
   редактор, поэтому шаг задержки считается, а не перечисляется. */
.gs-hero-editorial__benefits li {
	animation: gs-spine-in 500ms var(--ease-entrance) calc(400ms + var(--gs-i, 0) * 65ms) both;
}

.gs-hero-editorial__actions {
	animation: gs-spine-in 520ms var(--ease-entrance) 560ms both;
}

.gs-hero-editorial__note {
	animation: gs-spine-in 480ms var(--ease-entrance) 640ms both;
}

.gs-hero-editorial__media {
	animation: gs-frame-in 720ms var(--ease-entrance) 180ms both;
}

.gs-hero-editorial__media img {
	animation: gs-photo-settle 1000ms var(--ease-entrance) 180ms both;
}

.gs-hero-editorial__metric {
	animation: gs-strip-in 600ms var(--ease-entrance) calc(660ms + var(--gs-i, 0) * 55ms) both;
}

/* Полоса «что дальше» приходит последней: она итог первого экрана. */
.gs-hero-editorial__next {
	animation: gs-spine-in 560ms var(--ease-entrance) 860ms both;
}

/* --- Экран 02: поле расчерчивается. Скролл-триггер, поэтому гейт
   на .has-js — как в блоке маршрута. --- */

.gs-audience-editorial__index {
	transition: opacity 700ms var(--ease-entrance), transform 700ms var(--ease-entrance);
}

.has-js .gs-audience-editorial:not(.is-visible) .gs-audience-editorial__index {
	opacity: 0;
	transform: translateY(-0.08em);
}

.gs-audience-editorial .gs-editorial-eyebrow::before {
	transform-origin: top;
	transition: transform 340ms var(--ease-entrance) 140ms;
}

.has-js .gs-audience-editorial:not(.is-visible) .gs-editorial-eyebrow::before {
	transform: scaleY(0);
}

.gs-audience-editorial__intro > * {
	transition: opacity 560ms var(--ease-entrance) calc(var(--gs-i, 0) * 80ms),
		transform 560ms var(--ease-entrance) calc(var(--gs-i, 0) * 80ms);
}

.has-js .gs-audience-editorial:not(.is-visible) .gs-audience-editorial__intro > * {
	opacity: 0;
	transform: translateY(1rem);
}

.gs-audience-editorial__intro > *:nth-child(2) { --gs-i: 1; }
.gs-audience-editorial__intro > *:nth-child(3) { --gs-i: 2; }
.gs-audience-editorial__intro > *:nth-child(4) { --gs-i: 3; }
.gs-audience-editorial__intro > *:nth-child(5) { --gs-i: 4; }

/* Линейка ячейки проявляется с шагом; background без задержки —
   его держит ховер, и запаздывание читалось бы как подвисание. */
.gs-audience-editorial__item {
	transition: border-color 520ms var(--ease-entrance) calc(var(--gs-i, 0) * 70ms),
		background-color var(--dur) var(--ease);
}

.has-js .gs-audience-editorial:not(.is-visible) .gs-audience-editorial__item {
	border-color: transparent;
}

.gs-audience-editorial__number,
.gs-audience-editorial__icon,
.gs-audience-editorial__item h3,
.gs-audience-editorial__item p {
	transition: opacity 520ms var(--ease-entrance), transform 520ms var(--ease-entrance),
		color var(--dur) var(--ease);
}

.gs-audience-editorial__number {
	transition-delay: calc(var(--gs-i, 0) * 70ms + 60ms);
}

.gs-audience-editorial__icon {
	transition-delay: calc(var(--gs-i, 0) * 70ms + 110ms);
}

.gs-audience-editorial__item h3 {
	transition-delay: calc(var(--gs-i, 0) * 70ms + 150ms);
}

.gs-audience-editorial__item p {
	transition-delay: calc(var(--gs-i, 0) * 70ms + 190ms);
}

.has-js .gs-audience-editorial:not(.is-visible) .gs-audience-editorial__number,
.has-js .gs-audience-editorial:not(.is-visible) .gs-audience-editorial__icon {
	opacity: 0;
	transform: translateY(0.5rem);
}

.has-js .gs-audience-editorial:not(.is-visible) .gs-audience-editorial__item h3,
.has-js .gs-audience-editorial:not(.is-visible) .gs-audience-editorial__item p {
	opacity: 0;
	transform: translateY(0.75rem);
}

/* --- Состояния наведения и нажатия --- */

.gs-editorial-link {
	transition: color var(--dur) var(--ease);
}

.gs-editorial-button:active {
	background: var(--c-accent-cta-hover);
	box-shadow: none;
	transform: translateY(1px);
}

.gs-editorial-link:hover,
.gs-editorial-link:focus-visible {
	/* Подчёркивание идёт по currentColor — линейка теплеет вместе с текстом. */
	color: var(--c-accent-text);
}

/* Ячейки поля 02 некликабельны: наведение переворачивает тон, но не
   обещает переход. Ни подъёма, ни тени, ни смены курсора. Светлая
   ячейка уходит в тёмную, тёмная — в светлую, поэтому в поле всегда
   ровно одна перевёрнутая ячейка: она и есть указатель внимания. */
@media (hover: hover) {
	.gs-audience-editorial__item:hover {
		border-color: var(--c-line-deep);
		background: var(--gs-block-dark);
		color: var(--c-on-deep);
	}

	.gs-audience-editorial__item:hover h3,
	.gs-audience-editorial__item:hover .gs-audience-editorial__icon {
		color: var(--c-on-deep);
	}

	.gs-audience-editorial__item:hover p {
		color: var(--c-on-deep-2);
	}

	/* Цифра берёт цвет того состояния, в которое ячейка переходит: при
	   переворачивании тона третий оттенок не появляется, а тёплый акцент
	   в системе отдан действию, а не фоновой графике. */
	.gs-audience-editorial__item:hover .gs-audience-editorial__number {
		color: color-mix(in srgb, var(--c-on-deep) 38%, transparent);
	}

	.gs-audience-editorial__item:hover .gs-audience-editorial__icon img {
		filter: brightness(0) invert(1);
	}

	/* Тёмная ячейка идёт в обратную сторону. */
	.gs-audience-editorial__item.is-dark:hover {
		border-color: var(--c-line);
		background: var(--c-bg);
		color: var(--c-ink);
	}

	.gs-audience-editorial__item.is-dark:hover h3 {
		color: var(--c-ink);
	}

	.gs-audience-editorial__item.is-dark:hover .gs-audience-editorial__icon {
		color: var(--c-blue-deep);
	}

	.gs-audience-editorial__item.is-dark:hover p {
		color: var(--c-ink-2);
	}

	.gs-audience-editorial__item.is-dark:hover .gs-audience-editorial__number {
		color: var(--c-bg-blue);
	}

	.gs-audience-editorial__item.is-dark:hover .gs-audience-editorial__icon img {
		filter: none;
	}
}

/* Reduced motion гасит движение, но не обратную связь: цвет, тень
   и прозрачность продолжают отвечать на действие. */
@media (prefers-reduced-motion: reduce) {
	.gs-hero-editorial__dark-plane,
	.gs-hero-editorial__soft-plane,
	.gs-hero-editorial__index,
	.gs-hero-editorial .gs-editorial-eyebrow,
	.gs-hero-editorial .gs-editorial-eyebrow::before,
	.gs-hero-editorial h1,
	.gs-hero-editorial__lead,
	.gs-hero-editorial__benefits li,
	.gs-hero-editorial__actions,
	.gs-hero-editorial__note,
	.gs-hero-editorial__media,
	.gs-hero-editorial__media img,
	.gs-hero-editorial__metric,
	.gs-hero-editorial__next {
		animation: none;
	}

	/* Нажатие остаётся заметным по цвету, но без сдвига. */
	.gs-editorial-button:hover,
	.gs-editorial-button:active {
		transform: none;
	}
}

/* Decision-route refinement: keep the approved visual language, vary the rhythm by role. */
.gs-section {
	padding-block: 0;
}

.gs-audience {
	padding-block: clamp(4rem, 7vw, 7rem) clamp(3.5rem, 6vw, 6rem);
	background: var(--gs-white);
}

.gs-conversion--quiz {
	padding-block: clamp(4.5rem, 8vw, 8rem);
	background: var(--gs-paper) !important;
	color: var(--gs-ink-deep);
}

.gs-route {
	padding-block: clamp(5rem, 9vw, 9rem);
}

.gs-methods--options {
	padding-block: clamp(4.5rem, 8vw, 8rem);
	background: var(--gs-white);
}

.gs-methods--cost_breakdown {
	padding-block: clamp(3.5rem, 5.5vw, 5.5rem);
	background: var(--gs-paper);
}

.gs-doctors,
.gs-results {
	padding-block: clamp(5rem, 9vw, 9rem);
}

.gs-faq {
	padding-block: clamp(4rem, 7vw, 7rem);
	background: var(--gs-white);
}

.gs-conversion--final {
	padding-block: clamp(5rem, 9vw, 8rem);
	background: var(--gs-ink-deep) !important;
}

.gs-hero__planes {
	inset: 0 23% 0 30%;
	background: transparent;
	clip-path: none;
	opacity: 1;
}

.gs-hero__planes i {
	position: absolute;
	inset: 0;
	display: block;
	background: var(--gs-paper);
	clip-path: polygon(6% 0, 70% 0, 54% 100%, 0 80%);
}

.gs-hero__planes i:nth-child(2) {
	background: var(--gs-blue-soft);
	opacity: 0.58;
	clip-path: polygon(54% 0, 100% 14%, 86% 88%, 54% 100%, 44% 54%);
}

.gs-hero__planes i:nth-child(3) {
	background: var(--gs-white);
	opacity: 0.72;
	clip-path: polygon(22% 18%, 60% 0, 44% 54%, 64% 100%, 8% 74%);
}

.gs-hero__grid {
	min-height: 42rem;
	grid-template-columns: minmax(0, 0.9fr) minmax(19rem, 0.76fr) minmax(20rem, 0.68fr);
}

.gs-hero__portrait {
	min-height: 42rem;
}

.gs-hero__portrait img {
	aspect-ratio: 4 / 5;
	object-position: 50% 22%;
}

.gs-hero__form-panel .gs-lead-form__title {
	max-width: 15ch;
	font-size: clamp(1.25rem, 2vw, 1.8rem);
	letter-spacing: -0.025em;
}

.gs-hero__form-panel .gs-lead-form__note {
	font-size: 0.9rem;
	line-height: 1.5;
}

.gs-evidence-strip {
	margin-top: -1rem;
}

.gs-evidence-strip__route {
	position: absolute;
	top: -1.15rem;
	left: 3%;
	z-index: 5;
	width: 94%;
	height: 2rem;
	overflow: visible;
	pointer-events: none;
}

.gs-evidence-strip__route path {
	fill: none;
	stroke: var(--gs-blue);
	stroke-width: 0.35;
	vector-effect: non-scaling-stroke;
}

.gs-audience__list li {
	padding-block: 1.1rem;
}

.gs-audience__list .gs-icon {
	color: var(--gs-blue);
}

.gs-audience__list h3 {
	font-size: clamp(1.25rem, 2vw, 1.8rem);
}

.gs-audience__list p {
	max-width: 58ch;
	color: var(--gs-blue);
}

.gs-audience__transition {
	max-width: 62ch;
	margin: 1.8rem 0 0;
	font-weight: 650;
}

.gs-audience__transition a {
	color: var(--gs-coral-dark);
	text-underline-offset: 0.22em;
}

.gs-conversion--quiz .gs-conversion__grid {
	grid-template-columns: minmax(0, 0.72fr) minmax(34rem, 1.28fr);
	gap: clamp(3rem, 7vw, 7rem);
}

.gs-conversion--quiz h2,
.gs-conversion--quiz .gs-prose {
	color: var(--gs-ink-deep);
}

.gs-conversion--quiz .gs-conversion__form {
	padding: clamp(2rem, 4vw, 4rem);
	background: var(--gs-white);
	color: var(--gs-ink-deep);
	clip-path: polygon(0 0, 94% 0, 100% 10%, 97% 100%, 4% 96%);
}

.gs-conversion--quiz .gs-lead-form__title,
.gs-conversion--quiz .gs-quiz__step legend {
	color: var(--gs-ink-deep);
}

.gs-conversion--quiz .gs-lead-form__note {
	color: var(--gs-blue);
}

.gs-conversion--quiz .gs-quiz__progress > div {
	background: var(--gs-blue-soft);
}

.gs-conversion--quiz .gs-quiz__progress i {
	background: var(--gs-coral);
}

.gs-conversion--quiz .gs-quiz__choices label {
	border: 1px solid rgba(60, 120, 162, 0.28);
	background: var(--gs-paper);
}

.gs-conversion--quiz .gs-quiz__choices label:hover,
.gs-conversion--quiz .gs-quiz__choices label:has(input:checked) {
	border-color: var(--gs-coral);
	background: var(--gs-white);
	color: var(--gs-ink-deep);
	box-shadow: inset 0 -3px 0 var(--gs-coral);
}

.gs-conversion--quiz .gs-quiz__back {
	color: var(--gs-ink-deep);
}

.gs-quiz__result {
	max-width: 60ch;
	margin-bottom: 1.5rem;
	color: var(--gs-blue);
}

.gs-route__map {
	position: relative;
}

.gs-route__path {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 13rem;
	overflow: visible;
	pointer-events: none;
}

.gs-route__path path {
	fill: none;
	stroke: var(--gs-blue);
	stroke-width: 2;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	vector-effect: non-scaling-stroke;
	transition: stroke-dashoffset 1200ms var(--gs-ease);
}

.gs-route.is-visible .gs-route__path path {
	stroke-dashoffset: 0;
}

.gs-route__list {
	position: relative;
	z-index: 2;
	overflow: visible;
	scroll-snap-type: none;
}

.gs-route__stage {
	display: grid;
	min-width: 0;
	min-height: 0;
	grid-template-rows: auto 1fr auto;
	padding: clamp(2rem, 3.2vw, 3.2rem) clamp(1.35rem, 2.4vw, 2.35rem) 0;
	overflow: hidden;
}

.gs-route__stage + .gs-route__stage {
	margin-left: -1.35rem;
}

.gs-route__stage:nth-child(even) {
	transform: translateY(1.7rem);
}

.has-js .gs-route:not(.is-visible) .gs-route__stage:nth-child(even) {
	transform: translate(-2rem, 1.7rem);
}

.gs-route__number {
	z-index: 4;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1.4rem;
	border: 2px solid var(--gs-blue);
	border-radius: 50%;
	background: var(--gs-white);
	font-size: 0.9rem;
	font-weight: 750;
	line-height: 2.7rem;
	text-align: center;
}

.gs-route__content {
	min-width: 0;
}

.gs-route__stage h3 {
	font-size: clamp(1.25rem, 2vw, 1.8rem);
}

.gs-route__stage > p:not(.gs-route__number) {
	min-height: 0;
}

.gs-route__stage img {
	width: calc(100% + 4.7rem);
	height: clamp(12rem, 17vw, 16rem);
	margin: 1.6rem -2.35rem 0;
	object-fit: cover;
}

.gs-methods__list article {
	grid-template-columns: minmax(13rem, 0.72fr) minmax(18rem, 1.15fr) minmax(12rem, 0.7fr);
	align-items: start;
}

.gs-methods__situation {
	margin: 0.45rem 0 0;
	color: var(--gs-blue);
	font-size: 0.9rem;
}

.gs-methods__value {
	min-width: 0;
}

.gs-methods__value p {
	margin-bottom: 0.65rem;
}

.gs-methods__price {
	color: var(--gs-ink-deep);
}

.gs-methods__closing {
	max-width: 72ch;
	margin: 2rem 0 0 auto;
	padding-top: 1.5rem;
	border-top: 1px solid var(--gs-blue);
	font-weight: 650;
}

.gs-methods--cost_breakdown .gs-section__split {
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.gs-methods--cost_breakdown .gs-methods__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 3rem;
	border-top: 1px solid var(--gs-blue);
}

.gs-methods--cost_breakdown .gs-methods__list article {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-content: start;
	padding: 1.35rem 1.35rem 1.35rem 0;
	border-right: var(--gs-line);
}

.gs-methods--cost_breakdown .gs-methods__list article:nth-child(3n) {
	border-right: 0;
}

.gs-methods__index {
	color: var(--gs-blue);
	font-weight: 750;
}

.gs-methods--cost_breakdown .gs-methods__list article > p,
.gs-methods--cost_breakdown .gs-methods__value {
	grid-column: 2;
}

.gs-doctors__list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gs-doctors--count-1 .gs-doctors__list {
	grid-template-columns: minmax(0, 1fr);
}

.gs-doctors--count-1 .gs-doctor {
	display: grid;
	grid-template-columns: minmax(18rem, 0.8fr) minmax(18rem, 1fr);
	gap: clamp(2rem, 7vw, 7rem);
	align-items: center;
}

.gs-doctors--count-1 .gs-doctor__media {
	margin-bottom: 0;
}

.gs-doctors--count-2 .gs-doctors__list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 3vw, 3rem);
}

.gs-doctor__fact {
	color: var(--gs-blue);
	font-weight: 650;
}

.gs-result__pair {
	aspect-ratio: auto;
}

.gs-result__pair > div {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.gs-result__pair span {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	padding: 0.35rem 0.65rem;
	background: var(--gs-ink-deep);
	color: var(--gs-white);
	font-size: 0.78rem;
	font-weight: 750;
	text-transform: uppercase;
}

.gs-result__story {
	display: grid;
	gap: 0.45rem;
}

.gs-result__story p {
	margin: 0;
}

.gs-result__comment {
	margin-top: 0.4rem !important;
	color: var(--gs-blue);
}

.gs-faq summary {
	min-height: 4.25rem;
	padding-block: 1.2rem;
}

.gs-conversion--final .gs-conversion__form {
	background: rgba(255, 255, 255, 0.08);
}

.gs-conversion__contacts {
	display: grid;
	gap: 0.75rem;
	margin-top: 2rem;
}

.gs-conversion__contacts > a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: inherit;
	font-size: clamp(1.25rem, 2vw, 1.8rem);
	font-weight: 750;
}

.gs-conversion__messengers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.2rem;
}

.gs-conversion__messengers a {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
	gap: 0.5rem;
	color: inherit;
	font-weight: 650;
}

@media (max-width: 1180px) {
	.gs-hero__grid {
		grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 1fr);
	}

	.gs-hero__form-panel .gs-lead-form {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gs-hero__form-panel .gs-lead-form__submit {
		align-self: end;
	}

	.gs-route__path {
		display: none;
	}

	.gs-route__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
		overflow: visible;
	}

	.gs-route__stage,
	.gs-route__stage + .gs-route__stage {
		min-width: 0;
		margin: -0.35rem 0 0;
	}

	.gs-route__stage:nth-child(even) {
		transform: translateY(1.2rem);
	}

	.gs-route__list::before {
		position: absolute;
		top: 1.5rem;
		bottom: 1.5rem;
		left: 50%;
		width: 1px;
		background: var(--gs-blue);
		content: "";
	}
}

@media (max-width: 820px) {
	.gs-hero__planes {
		inset: 0;
	}

	.gs-hero__grid {
		grid-template-columns: 1fr;
	}

	.gs-hero__portrait img {
		aspect-ratio: auto;
	}

	.gs-hero__portrait {
		min-height: 30rem;
		height: 30rem;
	}

	.gs-evidence-strip__route {
		display: none;
	}

	.gs-conversion--quiz .gs-conversion__grid,
	.gs-methods--cost_breakdown .gs-section__split {
		grid-template-columns: 1fr;
	}

	.gs-conversion--quiz .gs-conversion__form {
		padding: 1.5rem;
	}

	.gs-route__list {
		display: block;
		padding-left: 1.25rem;
	}

	.gs-route__list::before {
		top: 0;
		bottom: 0;
		left: 1.25rem;
	}

	.gs-route__stage,
	.gs-route__stage + .gs-route__stage,
	.gs-route__stage:nth-child(even) {
		margin: -0.4rem 0 0;
		transform: none;
	}

	.gs-route__number {
		margin-left: -2.25rem;
	}

	.gs-route__stage img {
		width: calc(100% + 3.5rem);
		margin: 1.4rem -1.5rem 0 -2rem;
	}

	.gs-methods__list article {
		grid-template-columns: 1fr;
	}

	.gs-methods--cost_breakdown .gs-methods__list {
		grid-template-columns: 1fr;
	}

	.gs-methods--cost_breakdown .gs-methods__list article {
		grid-template-columns: auto 1fr;
		border-right: 0;
	}

	.gs-doctors--count-1 .gs-doctor,
	.gs-doctors--count-2 .gs-doctors__list {
		grid-template-columns: 1fr;
	}

	.gs-doctors__list,
	.gs-results__list {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.gs-quiz__actions {
		grid-template-columns: 1fr;
	}

	.gs-quiz__back {
		order: 2;
		width: 100%;
	}

	.gs-result__pair {
		grid-template-columns: 1fr;
	}

	.gs-result__pair > div {
		aspect-ratio: 4 / 3;
	}
}

/* ============================================================
   КВИЗ И ФИНАЛЬНАЯ ФОРМА — редакционная подача, версия 2
   Слева тёмная колонка с обещанием и фотографией, справа светлое
   поле с вопросом. Логика формы в forms.php и landing.js.
   ============================================================ */

.gs-conversion-editorial {
	--gs-block-dark: var(--c-bg-deep);
	--gs-block-soft: var(--c-bg-blue);
	position: relative;
	overflow: hidden;
	padding-block: var(--section-y-sm);
	background: var(--c-bg);
}

.gs-conversion-editorial__inner {
	position: relative;
	z-index: 1;
	display: grid;
	width: var(--shell);
	margin-inline: auto;
	overflow: hidden;
	border-radius: var(--r-md);
	grid-template-columns: minmax(21rem, 0.6fr) minmax(26rem, 1.4fr);
	align-items: stretch;
}

/* --- Левая тёмная колонка --- */

.gs-conversion-editorial__intro {
	position: relative;
	z-index: 2;
	display: flex;
	min-width: 0;
	flex-direction: column;
	/* Левый отступ равнялся --shell-inset, чтобы текст стоял на общей
	   вертикали сайта. Но колонка узкая, а на широком экране inset
	   вырастает до 270px и съедает её: под заголовок оставалось ~280px
	   при слове «консультации» в 290px. Отступ ограничен сверху. */
	padding: clamp(2rem, 3.5vw, 3.25rem);
	background: var(--gs-block-dark);
	color: var(--c-on-deep);
}

.gs-conversion-editorial__intro .gs-editorial-eyebrow {
	color: var(--c-accent-on-deep);
}

.gs-conversion-editorial h2 {
	max-width: 18ch;
	margin-bottom: var(--s-4);
	color: var(--c-on-deep);
	font-size: var(--t-h2);
	line-height: 1.1;
	/* hyphens убран — он рвал «во-проса» и «подгото-вим» посреди слова.
	   overflow-wrap оставлен страховкой: он переносит слово целиком
	   и срабатывает, только когда оно физически не влезает. */
	overflow-wrap: break-word;
	hyphens: manual;
}


.gs-conversion-editorial__lead {
	max-width: 30rem;
	color: var(--c-on-deep-2);
	font-size: var(--t-sm);
}

.gs-conversion-editorial__lead p {
	margin: 0;
}

.gs-conversion-editorial__media {
	margin: var(--s-8) 0 0;
	overflow: hidden;
	border-radius: var(--r-md);
}

.gs-conversion-editorial__media img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.gs-conversion-editorial__contacts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3) var(--s-6);
	align-items: center;
	margin-top: var(--s-8);
}

.gs-conversion-editorial__phone {
	display: inline-flex;
	min-height: var(--tap);
	align-items: center;
	color: var(--c-on-deep);
	font-size: var(--t-h3);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
	white-space: nowrap;
}

.gs-conversion-editorial__hours {
	color: var(--c-on-deep-2);
	font-size: var(--t-sm);
}

.gs-conversion-editorial__messengers {
	display: flex;
	gap: var(--s-2);
}

.gs-conversion-editorial__messengers a {
	display: grid;
	width: var(--tap);
	height: var(--tap);
	place-items: center;
	border-radius: var(--r-full);
	background: color-mix(in srgb, var(--c-on-deep) 12%, transparent);
	transition: transform var(--dur) var(--ease);
}

.gs-conversion-editorial__messengers a:hover {
	transform: translateY(-2px);
}

.gs-conversion-editorial__messengers img,
.gs-conversion-editorial__messengers svg {
	width: 1.35rem;
	height: 1.35rem;
}

.gs-conversion-editorial__note {
	max-width: 28rem;
	margin-top: var(--s-4);
	color: var(--c-on-deep-2);
	font-size: var(--t-sm);
}

/* --- Правое светлое поле --- */

.gs-conversion-editorial__panel {
	position: relative;
	min-width: 0;
	padding: clamp(2rem, 3.5vw, 3.25rem);
	background: var(--c-bg-alt);
}

/* Финальная форма короче тёмной колонки напротив, а колонки тянутся до общей
   высоты — весь остаток раньше собирался под формой одной дырой в 625px.
   Ставим форму по центру: тот же остаток разложен сверху и снизу и читается
   полем, а не провалом. У квиза не трогаем — он выше и центрирование дёргало
   бы шаги при переключении. */
.gs-conversion-editorial--final .gs-conversion-editorial__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Второй путь связи под кнопкой. Иконки — одной строкой; подпись переносится
   на свою строку только на узком экране, где четыре кружка рядом с текстом
   уже не встают. */
.gs-conversion-editorial__write {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-3);
	align-items: center;
	margin-top: var(--s-5);
}

.gs-conversion-editorial__write-label {
	color: var(--c-ink-2);
	font-size: var(--t-sm);
}

/* Подложка кружка считается от тёмного фона колонки. Здесь поле светлое,
   поэтому тот же процент от --c-on-deep дал бы почти невидимое пятно. */
.gs-conversion-editorial__write .gs-conversion-editorial__messengers a {
	background: color-mix(in srgb, var(--c-ink) 8%, transparent);
}

/* Призрачный номер уходит за правый край — приём из hero и audience */
.gs-conversion-editorial__index {
	top: calc(var(--section-y-sm) - 1.5rem);
	right: calc(var(--shell-inset) + clamp(0.5rem, 1.5vw, 1.5rem));
	--gs-index-color: color-mix(in srgb, var(--gs-block-soft) 88%, var(--c-bg-alt));
	--gs-index-size: clamp(9rem, 15vw, 16rem);
}

.gs-conversion-editorial__soft-plane,
.gs-conversion-editorial__dark-plane {
	display: none;
}

.gs-conversion-editorial .gs-lead-form {
	position: relative;
	z-index: 1;
}

/* Заголовок формы виден только там, где нет квиза */
.gs-conversion-editorial--quiz .gs-lead-form__title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.gs-conversion-editorial--final .gs-lead-form__title {
	max-width: none;
	margin-bottom: var(--s-2);
	color: var(--c-ink);
	font-size: var(--t-h3);
	font-weight: 700;
	line-height: 1.2;
}

.gs-conversion-editorial .gs-lead-form__note {
	max-width: 44ch;
	margin-bottom: var(--s-6);
	color: var(--c-ink-2);
	font-size: var(--t-sm);
}

/* --- Счётчик и прогресс --- */

.gs-conversion-editorial .gs-quiz__progress {
	display: grid;
	gap: var(--s-3);
	margin-bottom: var(--s-10);
}

.gs-conversion-editorial .gs-quiz__counter {
	color: var(--c-ink-2);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gs-conversion-editorial .gs-quiz__bar {
	height: 6px;
	overflow: hidden;
	border-radius: var(--r-full);
	background: var(--c-line);
}

/* landing.js ставит --gs-quiz-progress как долю от 0 до 1 */
.gs-conversion-editorial .gs-quiz__bar i {
	display: block;
	height: 100%;
	border-radius: var(--r-full);
	background: var(--c-accent-cta);
	transform: scaleX(var(--gs-quiz-progress, 0.2));
	transform-origin: left;
	transition: transform 320ms var(--ease);
}

/* --- Вопрос --- */

.gs-conversion-editorial .gs-quiz__step {
	min-width: 0;
	padding: 0;
	border: 0;
	margin: 0;
}

.gs-conversion-editorial .gs-quiz__step legend {
	display: block;
	width: 100%;
	padding: 0;
	margin-bottom: var(--s-8);
	color: var(--c-ink);
	font-size: var(--t-h2);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* --- Варианты ответа: сетка карточек --- */

.gs-conversion-editorial .gs-quiz__choices {
	display: grid;
	gap: var(--s-4);
	margin-bottom: var(--s-10);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Нечётное число вариантов не должно оставлять висящую половину строки. */
.gs-conversion-editorial .gs-quiz__choices > :last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.gs-conversion-editorial .gs-quiz__choice {
	position: relative;
	display: flex;
	min-height: 6rem;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-5);
	border: 1.5px solid var(--c-line);
	border-radius: var(--r-md);
	background: var(--c-bg);
	cursor: pointer;
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
		color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.gs-conversion-editorial .gs-quiz__choice:hover {
	border-color: var(--c-line-control);
	box-shadow: var(--sh-md);
}

/* Радиокнопка остаётся в потоке для клавиатуры и скринридера,
   но не участвует в композиции — состояние показывает сама карточка. */
.gs-conversion-editorial .gs-quiz__choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.gs-conversion-editorial .gs-quiz__choice-icon {
	flex: 0 0 auto;
	color: var(--c-blue-deep);
	transition: color var(--dur) var(--ease);
}

.gs-conversion-editorial .gs-quiz__choice-icon .gs-icon,
.gs-conversion-editorial .gs-quiz__choice-icon .gs-editable-icon {
	width: 3.5rem;
	height: 3.5rem;
}

.gs-conversion-editorial .gs-quiz__choice-label {
	font-size: var(--t-h4);
	font-weight: 650;
	line-height: 1.25;
}

/* Терракотовая галочка появляется только у выбранного варианта */
.gs-conversion-editorial .gs-quiz__choice-mark {
	position: absolute;
	top: var(--s-4);
	right: var(--s-4);
	display: grid;
	width: 2.25rem;
	height: 2.25rem;
	place-items: center;
	border-radius: var(--r-full);
	background: var(--c-accent-cta);
	color: #fff;
	opacity: 0;
	transform: scale(0.7);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.gs-conversion-editorial .gs-quiz__choice-mark .gs-icon {
	width: 1.25rem;
	height: 1.25rem;
	stroke-width: 3;
}

.gs-conversion-editorial .gs-quiz__choice.is-selected {
	border-color: var(--gs-block-dark);
	background: var(--gs-block-dark);
	color: var(--c-on-deep);
}

.gs-conversion-editorial .gs-quiz__choice.is-selected .gs-quiz__choice-icon {
	color: var(--c-on-deep);
}

.gs-conversion-editorial .gs-quiz__choice.is-selected .gs-quiz__choice-mark {
	opacity: 1;
	transform: scale(1);
}

.gs-conversion-editorial .gs-quiz__choice:focus-within {
	outline: 3px solid var(--c-focus);
	outline-offset: 3px;
}

/* --- Низ шага: мета-строка доверия и кнопки --- */

.gs-conversion-editorial .gs-quiz__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-6);
	align-items: center;
	justify-content: space-between;
}

.gs-conversion-editorial .gs-quiz__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-5) var(--s-8);
	align-items: center;
	color: var(--c-ink-2);
	font-size: var(--t-xs);
	line-height: 1.35;
}

.gs-conversion-editorial .gs-quiz__meta-list {
	display: grid;
	gap: var(--s-3);
	padding: 0;
	margin: 0;
	list-style: none;
}

.gs-conversion-editorial .gs-quiz__meta-list li,
.gs-conversion-editorial .gs-quiz__disclaimer {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin: 0;
}

/* Оговорка ложится в три строки, как в макете: при 22ch она рвалась
   на четыре узких обрывка. */
.gs-conversion-editorial .gs-quiz__disclaimer {
	max-width: 30ch;
	padding-left: var(--s-8);
	border-left: 1px solid var(--c-line);
}

.gs-conversion-editorial .gs-quiz__meta-icon {
	display: grid;
	width: 1.75rem;
	height: 1.75rem;
	flex: 0 0 1.75rem;
	place-items: center;
	border-radius: var(--r-full);
	border: 1px solid var(--c-line-control);
	color: var(--c-blue-deep);
}

.gs-conversion-editorial .gs-quiz__meta-icon .gs-icon {
	width: 1rem;
	height: 1rem;
}

.gs-conversion-editorial .gs-quiz__buttons {
	display: flex;
	gap: var(--s-4);
	align-items: center;
	margin-left: auto;
}

.gs-conversion-editorial .gs-quiz__back {
	display: inline-flex;
	min-height: var(--tap);
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-ink-2);
	font: inherit;
	font-size: var(--t-sm);
	font-weight: 650;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.gs-conversion-editorial .gs-quiz__back:hover {
	color: var(--c-ink);
}

.gs-conversion-editorial .gs-quiz__result {
	padding: var(--s-5);
	border-radius: var(--r-sm);
	margin-bottom: var(--s-6);
	background: var(--c-bg-accent);
	color: var(--c-ink);
	font-size: var(--t-sm);
}

/* Кнопка «Далее» — крупная редакционная */
.gs-conversion-editorial .gs-button {
	display: inline-flex;
	min-height: 3.75rem;
	align-items: center;
	justify-content: center;
	gap: var(--s-4);
	padding: 0.85rem 1.85rem;
	border: 2px solid transparent;
	border-radius: var(--r-sm);
	background: var(--c-accent-cta);
	color: #fff;
	font-size: var(--t-h4);
	font-weight: 650;
	clip-path: none;
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.gs-conversion-editorial .gs-button:hover {
	background: var(--c-accent-cta-hover);
	box-shadow: var(--sh-md);
	transform: translateY(-1px);
}

.gs-conversion-editorial .gs-button .gs-icon {
	width: 1.35rem;
	height: 1.35rem;
}

/* --- Финальная форма: поля в две колонки --- */

.gs-conversion-editorial--final .gs-field {
	margin-bottom: var(--s-4);
}

@media (min-width: 861px) {
	.gs-conversion-editorial--final .gs-lead-form {
		display: grid;
		gap: 0 var(--s-4);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gs-conversion-editorial--final .gs-lead-form__title,
	.gs-conversion-editorial--final .gs-lead-form__note,
	.gs-conversion-editorial--final .gs-consent,
	.gs-conversion-editorial--final .gs-lead-form__submit,
	.gs-conversion-editorial--final .gs-form-status {
		grid-column: 1 / -1;
	}
}

/* --- Адаптив --- */

@media (max-width: 1180px) {
	.gs-conversion-editorial .gs-quiz__choice {
		min-height: 5.5rem;
		gap: var(--s-4);
		padding: var(--s-5);
	}

	.gs-conversion-editorial .gs-quiz__choice-icon .gs-icon,
	.gs-conversion-editorial .gs-quiz__choice-icon .gs-editable-icon {
		width: 2.75rem;
		height: 2.75rem;
	}
}

@media (max-width: 980px) {
	.gs-conversion-editorial__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.gs-conversion-editorial__intro,
	.gs-conversion-editorial__panel {
		padding-inline: clamp(1.25rem, 5vw, 3rem);
	}

	.gs-conversion-editorial__intro {
		padding-block: var(--section-y-sm);
	}

	.gs-conversion-editorial h2 {
		max-width: 20ch;
	}

	.gs-conversion-editorial__media img {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 640px) {
	.gs-conversion-editorial .gs-quiz__choices {
		grid-template-columns: minmax(0, 1fr);
	}

	.gs-conversion-editorial .gs-quiz__choice {
		min-height: var(--tap);
		padding: var(--s-4);
	}

	.gs-conversion-editorial .gs-quiz__choice-icon .gs-icon,
	.gs-conversion-editorial .gs-quiz__choice-icon .gs-editable-icon {
		width: 2.25rem;
		height: 2.25rem;
	}

	.gs-conversion-editorial .gs-quiz__step legend {
		font-size: var(--t-h3);
	}

	.gs-conversion-editorial .gs-quiz__disclaimer {
		padding-left: 0;
		border-left: 0;
	}

	.gs-conversion-editorial .gs-quiz__buttons {
		width: 100%;
		margin-left: 0;
	}

	.gs-conversion-editorial .gs-quiz__buttons .gs-button {
		flex: 1;
	}

	.gs-conversion-editorial__index {
		font-size: clamp(6rem, 26vw, 9rem);
	}
}

/* ============================================================
   ЭКРАН 05 — МАРШРУТ ЛЕЧЕНИЯ
   Слева корешок, справа фотография, под ними горизонтальная
   линия времени: узлы на волосяной оси, у текущего этапа —
   выноска. Заменяет clip-path-полигоны прошлой темы.
   ============================================================ */

.gs-route-editorial {
	--gs-block-dark: var(--c-bg-deep);
	--gs-block-soft: var(--c-bg-blue);
	--gs-node: 1.5rem;
	position: relative;
	overflow: hidden;
	padding-block: var(--section-y);
	background: var(--c-bg-alt);
}

.gs-route-editorial__index {
	top: -2rem;
	right: clamp(1rem, 3vw, 3.5rem);
	--gs-index-color: color-mix(in srgb, var(--gs-block-soft) 70%, var(--c-bg-alt));
	--gs-index-size: clamp(9rem, 16vw, 17rem);
}

.gs-route-editorial__inner {
	position: relative;
	z-index: 1;
	display: grid;
	width: var(--shell);
	margin-inline: auto;
	grid-template-columns: minmax(20rem, 0.8fr) minmax(28rem, 1.2fr);
	column-gap: clamp(2rem, 4vw, 4rem);
}

.gs-route-editorial__intro {
	grid-area: 1 / 1;
	align-self: start;
	min-width: 0;
	padding-bottom: var(--s-10);
}

.gs-route-editorial h2 {
	max-width: 21ch;
	margin-bottom: var(--s-6);
	font-size: var(--t-h2);
	overflow-wrap: break-word;
	hyphens: auto;
}

.gs-route-editorial__lead {
	max-width: 32rem;
	color: var(--c-ink-2);
	font-size: var(--t-lead);
}

.gs-route-editorial__lead p {
	margin: 0;
}

.gs-route-editorial__media {
	grid-area: 1 / 2;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border-radius: var(--r-md);
}

.gs-route-editorial__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 20rem;
	object-fit: cover;
}

.gs-route-editorial__track {
	position: relative;
	z-index: 2;
	display: grid;
	padding: 0;
	margin: clamp(2rem, 3vw, 3rem) 0 0;
	grid-area: 2 / 1 / 3 / -1;
	grid-template-columns: repeat(var(--gs-stage-count, 4), minmax(0, 1fr));
	list-style: none;
}

/* Ось с загибом вниз на правом краю: одна коробка, у которой видны
   только верхняя граница и правый скруглённый угол. */
.gs-route-editorial__track::before {
	position: absolute;
	top: calc(var(--gs-node) / 2);
	right: 0;
	left: calc(50% / var(--gs-stage-count, 4));
	height: 4.5rem;
	border-top: 2px solid var(--gs-block-dark);
	border-right: 2px solid var(--gs-block-dark);
	border-top-right-radius: 2.5rem;
	content: "";
	pointer-events: none;
	transition: clip-path 900ms var(--ease-entrance);
	clip-path: inset(0);
}

.gs-route-editorial__stage {
	position: relative;
	min-width: 0;
	padding-right: var(--s-6);
	padding-top: calc(var(--gs-node) + var(--s-10));
	transition: opacity 520ms var(--ease-entrance) calc(var(--gs-i, 0) * 110ms),
		transform 520ms var(--ease-entrance) calc(var(--gs-i, 0) * 110ms);
}

/* Пунктирный поводок от узла к содержимому этапа */
.gs-route-editorial__stage::before {
	position: absolute;
	top: var(--gs-node);
	left: calc(var(--gs-node) / 2);
	width: 0;
	height: var(--s-10);
	border-left: 1px dashed var(--c-line-control);
	content: "";
	transform: translateX(-0.5px);
}

.gs-route-editorial__node {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	width: var(--gs-node);
	height: var(--gs-node);
	place-items: center;
	border: 3px solid var(--gs-block-dark);
	border-radius: var(--r-full);
	background: var(--c-bg);
}

.gs-route-editorial__stage.is-current .gs-route-editorial__node::before {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: var(--r-full);
	background: var(--c-accent-cta);
	content: "";
}

/* Описание этапа лежит в одном месте — здесь. Раньше оно дублировалось:
   выноска у текущего этапа повторяла его заголовок и текст, а тот же текст
   стоял под иконкой. Теперь под иконкой только заголовок, а описание
   всплывает по наведению. Там, где наведения нет, выноска остаётся обычным
   абзацем под заголовком — иначе текст этапа стал бы недоступен. */
.gs-route-editorial__callout {
	display: grid;
	justify-items: start;
	gap: var(--s-2);
	margin-top: var(--s-2);
}

.gs-route-editorial__badge {
	padding: 0.3rem 0.7rem;
	border-radius: var(--r-xs);
	background: var(--c-accent-cta);
	color: var(--c-bg);
	font-size: var(--t-eyebrow);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Карточка по наведению. Курсора нет — нет и всплытия, поэтому весь
   card-режим живёт под (hover: hover), а не под шириной экрана. */
@media (hover: hover) {
	.gs-route-editorial__stage p {
		max-width: none;
	}

	.gs-route-editorial__callout {
		position: absolute;
		bottom: calc(100% - var(--gs-node) + var(--s-5));
		left: calc(var(--gs-node) / 2);
		z-index: 3;
		width: max-content;
		max-width: 18rem;
		padding: var(--s-5) var(--s-6);
		margin-top: 0;
		border-radius: var(--r-md);
		background: var(--c-bg);
		box-shadow: var(--sh-lg);
		opacity: 0;
		visibility: hidden;
		/* Карточка вылетает за пределы этапа и накрывает соседей — курсор
		   она перехватывать не должна, иначе наведение мигает. */
		pointer-events: none;
		transform: translateX(-2.5rem) translateY(0.5rem);
		transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms var(--ease);
	}

	.gs-route-editorial__stage:hover .gs-route-editorial__callout {
		opacity: 1;
		visibility: visible;
		transform: translateX(-2.5rem);
	}

	/* Хвостик выноски указывает на узел */
	.gs-route-editorial__callout::after {
		position: absolute;
		top: 100%;
		left: 2.5rem;
		width: 1rem;
		height: 1rem;
		background: var(--c-bg);
		content: "";
		transform: translate(-50%, -50%) rotate(45deg);
	}

	/* Этап читается как наводимый: заголовок и узел теплеют вместе с выноской. */
	.gs-route-editorial__stage:hover h3 {
		color: var(--c-accent-text);
	}
}

.gs-route-editorial__body {
	display: flex;
	min-width: 0;
	gap: var(--s-4);
	align-items: flex-start;
}

.gs-route-editorial__icon {
	flex: 0 0 auto;
	color: var(--c-blue-deep);
}

.gs-route-editorial__icon .gs-icon,
.gs-route-editorial__icon .gs-editable-icon {
	width: 3rem;
	height: 3rem;
}

.gs-route-editorial__text {
	min-width: 0;
}

.gs-route-editorial__number {
	display: block;
	margin-bottom: var(--s-1);
	font-size: var(--t-h3);
	font-weight: 720;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	line-height: 1;
}

.gs-route-editorial__stage h3 {
	margin: 0 0 var(--s-2);
	font-size: var(--t-h4);
	font-weight: 700;
	line-height: 1.2;
}

.gs-route-editorial__stage p {
	max-width: 24ch;
	margin: 0;
	color: var(--c-ink-2);
	font-size: var(--t-sm);
}

.gs-route-editorial__footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-5) var(--s-8);
	align-items: center;
	grid-area: 3 / 1 / 4 / -1;
	margin-top: var(--s-12);
}

.gs-route-editorial__cta {
	display: inline-flex;
	min-height: var(--tap);
	align-items: center;
	gap: var(--s-4);
	color: var(--c-accent-text);
	font-size: var(--t-h4);
	font-weight: 650;
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

.gs-route-editorial__cta .gs-icon {
	width: 1.5rem;
	height: 1.5rem;
	transition: transform var(--dur) var(--ease);
}

.gs-route-editorial__note {
	max-width: 52ch;
	padding-left: var(--s-8);
	border-left: 1px solid var(--c-line);
	margin: 0;
	color: var(--c-ink-3);
	font-size: var(--t-sm);
}

@media (hover: hover) {
	.gs-route-editorial__cta:hover {
		color: var(--c-accent-cta-hover);
	}

	.gs-route-editorial__cta:hover .gs-icon {
		transform: translateX(0.35rem);
	}
}

.has-js .gs-route-editorial:not(.is-visible) .gs-route-editorial__track::before {
	clip-path: inset(0 100% 0 0);
}

.has-js .gs-route-editorial:not(.is-visible) .gs-route-editorial__stage {
	opacity: 0;
	transform: translateY(1rem);
}

@media (max-width: 1180px) {
	.gs-route-editorial__track {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--s-10);
	}

	/* На двух колонках сквозная ось теряет смысл — ряды держат узлы сами. */
	.gs-route-editorial__track::before {
		display: none;
	}

}

/* Узкая колонка — узкая карточка. Только в card-режиме: без наведения
   выноска идёт по ширине подписи. */
@media (max-width: 1180px) and (hover: hover) {
	.gs-route-editorial__callout {
		max-width: 16rem;
	}
}

@media (max-width: 900px) {
	.gs-route-editorial__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.gs-route-editorial__intro,
	.gs-route-editorial__track,
	.gs-route-editorial__footer {
		grid-area: auto;
	}

	.gs-route-editorial__media {
		grid-area: auto;
		margin-bottom: var(--s-10);
	}

	.gs-route-editorial__track {
		margin-top: 0;
	}
}

@media (max-width: 620px) {
	.gs-route-editorial__track {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--s-8);
	}

	.gs-route-editorial__stage {
		padding-right: 0;
		padding-top: calc(var(--gs-node) + var(--s-8));
	}

	.gs-route-editorial__stage::before {
		height: var(--s-8);
	}

	.gs-route-editorial__note {
		padding-left: 0;
		border-left: 0;
	}
}

/* --- Кадры этапов в общей рамке --- */

.gs-route-editorial__media {
	position: relative;
	min-height: 20rem;
	isolation: isolate;
}

/* Базовый кадр держит высоту рамки, кадры этапов лежат поверх него.
   :has здесь сознательно не используется — в проекте на него не опираются. */
.gs-route-editorial__photo:not(.is-base) {
	position: absolute;
	inset: 0;
	min-height: 0;
	opacity: 0;
	transition: opacity 420ms var(--ease-entrance);
}

.gs-route-editorial__photo.is-active {
	opacity: 1;
}

/* Этап со снимком читается как управляемый: курсор, тёплый номер, тёплый узел. */
@media (hover: hover) {
	.gs-route-editorial__stage.has-photo {
		cursor: pointer;
	}

	.gs-route-editorial__stage.has-photo .gs-route-editorial__number,
	.gs-route-editorial__stage.has-photo .gs-route-editorial__node {
		transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
	}

	.gs-route-editorial__stage.has-photo:hover .gs-route-editorial__number {
		color: var(--c-accent-text);
	}

	.gs-route-editorial__stage.has-photo:hover .gs-route-editorial__node {
		border-color: var(--c-accent-cta);
	}
}

/* --- Импульс по оси маршрута ---
   Свет идёт слева направо, узлы отзываются по очереди, когда он до
   них доходит. Цикл длинный и с паузой: это указатель, а не бегущая
   строка. Работает только пока секция на экране — класс is-live
   ставит наблюдатель в landing.js. */

.gs-route-editorial {
	--gs-route-cycle: 4.5s;
	--gs-route-step: 0.62s;
}

@keyframes gs-route-sweep {
	0% { background-position-x: -30%; }
	55% { background-position-x: 130%; }
	100% { background-position-x: 130%; }
}

@keyframes gs-route-node-pulse {
	0% { opacity: 0.55; transform: scale(1); }
	26% { opacity: 0; transform: scale(2.1); }
	100% { opacity: 0; transform: scale(2.1); }
}

.gs-route-editorial__track::after {
	position: absolute;
	top: calc(var(--gs-node) / 2);
	right: 0;
	left: calc(50% / var(--gs-stage-count, 4));
	height: 2px;
	background-image: linear-gradient(90deg, transparent 0%, var(--c-accent) 50%, transparent 100%);
	background-repeat: no-repeat;
	background-size: 26% 100%;
	background-position-x: -30%;
	content: "";
	opacity: 0;
	pointer-events: none;
}

.gs-route-editorial.is-live .gs-route-editorial__track::after {
	opacity: 1;
	animation: gs-route-sweep var(--gs-route-cycle) ease-in-out infinite;
}

/* Кольцо расходится от узла; задержка выстраивает узлы в очередь. */
.gs-route-editorial__node::after {
	position: absolute;
	inset: -3px;
	border: 2px solid var(--c-accent);
	border-radius: var(--r-full);
	content: "";
	opacity: 0;
	pointer-events: none;
}

.gs-route-editorial.is-live .gs-route-editorial__node::after {
	animation: gs-route-node-pulse var(--gs-route-cycle) ease-out infinite;
	animation-delay: calc(var(--gs-i, 0) * var(--gs-route-step));
}

/* Ось ниже 1180 скрыта — вместе с ней уходит и свет. */
@media (max-width: 1180px) {
	.gs-route-editorial__track::after {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-route-editorial__track::after,
	.gs-route-editorial__node::after {
		animation: none;
		opacity: 0;
	}
}

/* ============================================================
   ЭКРАН 06 — ВРАЧИ
   Слева портрет с тёмной карточкой-подписью, справа корешок с
   цитатой текущего врача и переключателем. Следующий врач
   выглядывает из правого нижнего угла. Заменяет сетку карточек
   прошлой темы.
   ============================================================ */

.gs-doctors-editorial {
	--gs-block-dark: var(--c-bg-deep);
	--gs-block-soft: var(--c-bg-blue);
	position: relative;
	overflow: hidden;
	padding-block: var(--section-y);
	background: var(--c-bg);
}

.gs-doctors-editorial__index {
	top: -1.5rem;
	left: max(1rem, calc((100vw - var(--sb, 0px) - 1440px) / 2));
	--gs-index-color: color-mix(in srgb, var(--gs-block-soft) 72%, var(--c-bg));
	--gs-index-size: clamp(9rem, 16vw, 17rem);
}

.gs-doctors-editorial__inner {
	position: relative;
	z-index: 1;
	display: grid;
	width: var(--shell);
	margin-inline: auto;
	grid-template-columns: minmax(24rem, 1.05fr) minmax(22rem, 0.95fr);
	column-gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

/* --- Портрет --- */

.gs-doctors-editorial__stage {
	position: relative;
	min-width: 0;
	aspect-ratio: 4 / 5;
}

.gs-doctors-editorial__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 420ms var(--ease-entrance);
	pointer-events: none;
}

.gs-doctors-editorial__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.gs-doctors-editorial__photo {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--r-md);
	object-fit: cover;
}

/* Тёмная карточка ложится на нижний край портрета и тянется по своей
   подписи. Растянутая от края до края, она оставляла справа пустое поле
   в четверть карточки: строка фактов короче кадра. Потолок ширины — тот
   же отступ справа, что был у растянутой карточки, чтобы длинное имя не
   доехало до края портрета. */
.gs-doctors-editorial__card {
	--gs-card-inset: clamp(1rem, 2.5vw, 2rem);
	position: absolute;
	bottom: var(--gs-card-inset);
	left: var(--gs-card-inset);
	width: max-content;
	max-width: calc(100% - var(--gs-card-inset) - clamp(1.5rem, 4vw, 3.5rem));
	padding: var(--s-5) var(--s-6);
	border-radius: var(--r-md);
	background: var(--gs-block-dark);
	color: var(--c-on-deep);
	box-shadow: var(--sh-md);
}

.gs-doctors-editorial__card h3 {
	margin: 0 0 var(--s-1);
	color: var(--c-on-deep);
	font-size: var(--t-h3);
	font-weight: 700;
	line-height: 1.2;
}

.gs-doctors-editorial__role {
	margin: 0;
	color: var(--c-on-deep-2);
	font-size: var(--t-sm);
}

.gs-doctors-editorial__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3) var(--s-5);
	align-items: center;
	padding: var(--s-4) 0 0;
	border-top: 1px solid var(--c-line-deep);
	margin: var(--s-4) 0 0;
	list-style: none;
}

.gs-doctors-editorial__facts li {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	color: var(--c-on-deep-2);
	font-size: var(--t-xs);
}

.gs-doctors-editorial__facts li + li {
	padding-left: var(--s-5);
	border-left: 1px solid var(--c-line-deep);
}

.gs-doctors-editorial__facts .gs-icon {
	display: block;
	width: 1.1rem;
	height: 1.1rem;
	color: var(--c-accent-on-deep);
}

/* --- Правый корешок --- */

.gs-doctors-editorial__intro {
	min-width: 0;
}

.gs-doctors-editorial h2 {
	max-width: 20ch;
	margin-bottom: var(--s-5);
	font-size: var(--t-h2);
	overflow-wrap: break-word;
	hyphens: auto;
}

.gs-doctors-editorial__lead {
	max-width: 30rem;
	padding-bottom: var(--s-8);
	border-bottom: 1px solid var(--c-line);
	color: var(--c-ink-2);
	font-size: var(--t-sm);
}

.gs-doctors-editorial__lead p {
	margin: 0;
}

/* --- Цитата врача --- */

.gs-doctors-editorial__quotes {
	position: relative;
	display: grid;
	margin: var(--s-8) 0;
}

/* Цитаты лежат в одной ячейке сетки: высота держится по самой
   длинной, и переключение не дёргает кнопку под ними. */
.gs-doctors-editorial__quote {
	grid-area: 1 / 1;
	padding: 0 0 0 var(--s-8);
	margin: 0;
	opacity: 0;
	transition: opacity 320ms var(--ease-entrance);
	pointer-events: none;
}

.gs-doctors-editorial__quote.is-active {
	opacity: 1;
	pointer-events: auto;
}

.gs-doctors-editorial__quote::before {
	position: absolute;
	left: 0;
	color: var(--c-accent);
	content: "\201C";
	font-size: 3rem;
	font-weight: 720;
	line-height: 0.9;
}

.gs-doctors-editorial__quote p {
	max-width: 26ch;
	margin: 0;
	font-size: var(--t-h4);
	font-weight: 500;
	line-height: 1.45;
}

/* --- Переключатель --- */

.gs-doctors-editorial__nav {
	display: flex;
	gap: var(--s-5);
	align-items: center;
	margin-top: var(--s-8);
}

.gs-doctors-editorial__arrow {
	display: grid;
	width: var(--tap);
	height: var(--tap);
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: var(--r-full);
	background: none;
	color: var(--c-ink);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.gs-doctors-editorial__arrow .gs-icon {
	width: 1.6rem;
	height: 1.6rem;
	transform: rotate(180deg);
}

.gs-doctors-editorial__arrow--next .gs-icon {
	transform: none;
}

.gs-doctors-editorial__counter {
	margin: 0;
	color: var(--c-ink-3);
	font-size: var(--t-sm);
	font-variant-numeric: tabular-nums;
	font-weight: 650;
}

.gs-doctors-editorial__counter [data-gs-doctor-current] {
	color: var(--c-ink);
	font-size: var(--t-h4);
	font-weight: 720;
}

@media (hover: hover) {
	.gs-doctors-editorial__arrow:hover {
		background: var(--c-bg-alt);
		color: var(--c-accent-text);
	}
}

/* --- Следующий врач выглядывает из угла --- */

.gs-doctors-editorial__peek {
	position: absolute;
	right: calc(-1 * clamp(2rem, 6vw, 6rem));
	bottom: 0;
	display: flex;
	gap: var(--s-4);
	align-items: center;
	width: clamp(17rem, 22vw, 21rem);
	padding: var(--s-4) var(--s-5);
	border: 0;
	border-radius: var(--r-md);
	background: var(--c-bg);
	box-shadow: var(--sh-lg);
	cursor: pointer;
	text-align: left;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.gs-doctors-editorial__peek-text {
	display: grid;
	min-width: 0;
	gap: var(--s-1);
}

.gs-doctors-editorial__peek-text strong {
	font-size: var(--t-sm);
	font-weight: 700;
	line-height: 1.25;
}

.gs-doctors-editorial__peek-text span {
	color: var(--c-blue-deep);
	font-size: var(--t-xs);
}

.gs-doctors-editorial__peek-photo {
	display: block;
	width: 4.5rem;
	height: 5.5rem;
	flex: 0 0 4.5rem;
	border-radius: var(--r-sm);
	object-fit: cover;
}

@media (hover: hover) {
	.gs-doctors-editorial__peek:hover {
		box-shadow: var(--sh-lg);
		transform: translateX(-0.5rem);
	}
}

/* --- Вход по скроллу --- */

.gs-doctors-editorial__intro > *,
.gs-doctors-editorial__stage {
	transition: opacity 560ms var(--ease-entrance) calc(var(--gs-i, 0) * 80ms),
		transform 560ms var(--ease-entrance) calc(var(--gs-i, 0) * 80ms);
}

.has-js .gs-doctors-editorial:not(.is-visible) .gs-doctors-editorial__intro > *,
.has-js .gs-doctors-editorial:not(.is-visible) .gs-doctors-editorial__stage {
	opacity: 0;
	transform: translateY(1rem);
}

.gs-doctors-editorial__intro > *:nth-child(2) { --gs-i: 1; }
.gs-doctors-editorial__intro > *:nth-child(3) { --gs-i: 2; }
.gs-doctors-editorial__intro > *:nth-child(4) { --gs-i: 3; }
.gs-doctors-editorial__intro > *:nth-child(5) { --gs-i: 4; }

/* --- Адаптив --- */

@media (max-width: 1180px) {
	.gs-doctors-editorial__peek {
		right: 0;
		width: clamp(15rem, 26vw, 18rem);
	}
}

@media (max-width: 900px) {
	.gs-doctors-editorial__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--s-10);
	}

	.gs-doctors-editorial__stage {
		aspect-ratio: 3 / 4;
		max-width: 32rem;
	}

	/* Подсказка уходит в поток: в углу она перекрыла бы переключатель. */
	.gs-doctors-editorial__peek {
		position: static;
		width: 100%;
		max-width: 24rem;
		margin-top: var(--s-6);
	}

	@media (hover: hover) {
		.gs-doctors-editorial__peek:hover {
			transform: none;
		}
	}
}

@media (max-width: 560px) {
	.gs-doctors-editorial__card {
		--gs-card-inset: var(--s-3);
		max-width: calc(100% - var(--s-3) * 2);
		padding: var(--s-4);
	}

	.gs-doctors-editorial__facts li + li {
		padding-left: 0;
		border-left: 0;
	}

	.gs-doctors-editorial__quote {
		padding-left: var(--s-6);
	}
}

/* ============================================================
   ЭКРАН 03 — СТОИМОСТЬ И УСЛОВИЯ ОПЛАТЫ
   Левый корешок с действием, справа фотография оборудования.
   Выделенное условие лежит на фотографии, остальные — полосой
   крупных чисел, накрывающей её низ.
   ============================================================ */

.gs-offer-editorial {
	--gs-block-dark: var(--c-bg-deep);
	--gs-block-soft: var(--c-bg-blue);
	position: relative;
	overflow: hidden;
	padding-block: var(--section-y);
	background: var(--c-bg-alt);
}

/* Призрачный номер уходит в левый низ — под корешок, за контент. */
.gs-offer-editorial__index {
	bottom: -3rem;
	left: max(1rem, calc((100vw - var(--sb, 0px) - 1440px) / 2));
	--gs-index-color: color-mix(in srgb, var(--gs-block-soft) 72%, var(--c-bg-alt));
	--gs-index-size: clamp(9rem, 17vw, 18rem);
}

.gs-offer-editorial__inner {
	position: relative;
	z-index: 1;
	display: grid;
	width: var(--shell);
	margin-inline: auto;
	grid-template-columns: minmax(19rem, 0.72fr) minmax(30rem, 1.28fr);
	column-gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

.gs-offer-editorial__intro {
	min-width: 0;
}

.gs-offer-editorial h2 {
	max-width: 18ch;
	margin-bottom: var(--s-5);
	font-size: var(--t-h2);
	overflow-wrap: break-word;
	hyphens: auto;
}

.gs-offer-editorial__lead {
	max-width: 26rem;
	margin-bottom: var(--s-8);
	color: var(--c-blue-deep);
	font-size: var(--t-sm);
}

.gs-offer-editorial__lead p {
	margin: 0;
}

.gs-offer-editorial__lead p + p {
	margin-top: var(--s-2);
}

.gs-offer-editorial__note {
	max-width: 24ch;
	margin: var(--s-6) 0 0;
	color: var(--c-ink-3);
	font-size: var(--t-xs);
}

/* --- Фотография и выделенное условие на ней --- */

.gs-offer-editorial__visual {
	position: relative;
	min-width: 0;
}

.gs-offer-editorial__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--r-md);
}

.gs-offer-editorial__media img {
	display: block;
	width: 100%;
	height: clamp(20rem, 30vw, 28rem);
	object-fit: cover;
}

.gs-offer-editorial__gift {
	position: absolute;
	top: clamp(1rem, 2.5vw, 2rem);
	left: clamp(1rem, 2.5vw, 2rem);
	z-index: 2;
	display: grid;
	justify-items: start;
	gap: var(--s-2);
	max-width: 17rem;
	padding: var(--s-5);
	border-radius: var(--r-sm);
	background: var(--c-bg);
	box-shadow: var(--sh-md);
}

.gs-offer-editorial__badge {
	padding: 0.25rem 0.6rem;
	border-radius: var(--r-xs);
	background: var(--c-accent-cta);
	color: var(--c-bg);
	font-size: var(--t-eyebrow);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gs-offer-editorial__gift strong {
	font-size: var(--t-h3);
	font-weight: 700;
	line-height: 1.15;
}

.gs-offer-editorial__gift > span:not(.gs-offer-editorial__badge) {
	color: var(--c-blue-deep);
	font-size: var(--t-xs);
}

.gs-offer-editorial__gift small {
	color: var(--c-ink-3);
	font-size: var(--t-xs);
}

/* --- Полоса крупных чисел накрывает низ фотографии --- */

.gs-offer-editorial__panels {
	position: relative;
	z-index: 2;
	display: grid;
	padding: 0;
	margin: calc(-1 * clamp(2rem, 5vw, 4.5rem)) 0 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-4);
	list-style: none;
}

.gs-offer-editorial__panel {
	display: grid;
	align-content: start;
	gap: var(--s-2) var(--s-5);
	padding: clamp(1.25rem, 2.5vw, 2rem);
	border-radius: var(--r-md);
	background: var(--c-bg);
	box-shadow: var(--sh-md);
	grid-template-columns: auto minmax(0, 1fr);
}

.gs-offer-editorial__panel.is-dark {
	background: var(--gs-block-dark);
	color: var(--c-on-deep);
}

.gs-offer-editorial__value {
	grid-area: 1 / 1;
	margin: 0;
	font-size: var(--t-metric);
	font-variant-numeric: tabular-nums;
	font-weight: 720;
	letter-spacing: -0.03em;
	line-height: 1;
}

.gs-offer-editorial__panel-text {
	min-width: 0;
	grid-area: 1 / 2;
	align-self: center;
}

.gs-offer-editorial__panel h3 {
	margin: 0 0 var(--s-1);
	font-size: var(--t-h4);
	font-weight: 700;
	line-height: 1.2;
}

.gs-offer-editorial__panel.is-dark h3 {
	color: var(--c-on-deep);
}

.gs-offer-editorial__panel-text p {
	max-width: 26ch;
	margin: 0;
	color: var(--c-ink-2);
	font-size: var(--t-xs);
}

.gs-offer-editorial__panel.is-dark .gs-offer-editorial__panel-text p {
	color: var(--c-on-deep-2);
}

.gs-offer-editorial__panel-icons {
	display: flex;
	gap: var(--s-3);
	align-items: center;
	grid-area: 2 / 1;
	margin-top: var(--s-3);
	color: var(--c-blue-deep);
}

.gs-offer-editorial__panel.is-dark .gs-offer-editorial__panel-icons {
	color: var(--c-accent-on-deep);
}

.gs-offer-editorial__panel-icons .gs-icon,
.gs-offer-editorial__panel-icons .gs-editable-icon {
	display: block;
	width: 1.75rem;
	height: 1.75rem;
}

.gs-offer-editorial__panel-note {
	grid-area: 3 / 1 / 4 / -1;
	margin: var(--s-3) 0 0;
	color: var(--c-ink-3);
	font-size: var(--t-xs);
}

.gs-offer-editorial__panel.is-dark .gs-offer-editorial__panel-note {
	color: var(--c-on-deep-2);
}

.gs-offer-editorial__footnote {
	grid-column: 1 / -1;
	max-width: 60ch;
	margin: var(--s-6) 0 0;
	color: var(--c-ink-3);
	font-size: var(--t-xs);
}

/* --- Вход по скроллу --- */

.gs-offer-editorial__intro > *,
.gs-offer-editorial__media,
.gs-offer-editorial__panel {
	transition: opacity 520ms var(--ease-entrance) calc(var(--gs-i, 0) * 90ms),
		transform 520ms var(--ease-entrance) calc(var(--gs-i, 0) * 90ms);
}

.has-js .gs-offer-editorial:not(.is-visible) .gs-offer-editorial__intro > *,
.has-js .gs-offer-editorial:not(.is-visible) .gs-offer-editorial__media,
.has-js .gs-offer-editorial:not(.is-visible) .gs-offer-editorial__panel {
	opacity: 0;
	transform: translateY(1rem);
}

.gs-offer-editorial__gift {
	transition: opacity 420ms var(--ease-entrance) 520ms, transform 420ms var(--ease-entrance) 520ms;
}

.has-js .gs-offer-editorial:not(.is-visible) .gs-offer-editorial__gift {
	opacity: 0;
	transform: translateY(-0.5rem);
}

.gs-offer-editorial__intro > *:nth-child(2) { --gs-i: 1; }
.gs-offer-editorial__intro > *:nth-child(3) { --gs-i: 2; }
.gs-offer-editorial__intro > *:nth-child(4) { --gs-i: 3; }
.gs-offer-editorial__intro > *:nth-child(5) { --gs-i: 4; }

/* --- Адаптив --- */

@media (max-width: 1050px) {
	.gs-offer-editorial__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--s-10);
	}
}

@media (max-width: 620px) {
	.gs-offer-editorial__panels {
		grid-template-columns: minmax(0, 1fr);
		/* Полоса перестаёт накрывать фотографию: на одной колонке
		   наложение съело бы её нижнюю треть. */
		margin-top: var(--s-5);
	}

	.gs-offer-editorial__gift {
		max-width: none;
		right: clamp(1rem, 2.5vw, 2rem);
	}

	.gs-offer-editorial__panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.gs-offer-editorial__value,
	.gs-offer-editorial__panel-text,
	.gs-offer-editorial__panel-icons,
	.gs-offer-editorial__panel-note {
		grid-area: auto;
	}
}

/* ============================================================
   ЭКРАН 09 — НЕЗАВИСИМЫЕ ОТЗЫВЫ
   Панели площадок стоят вплотную и разделены волосяными
   линейками — приём поля из блока 02. Тон каждой панели задаёт
   редактор: белая, тёмная или голубая.
   ============================================================ */

.gs-reviews-editorial {
	--gs-block-dark: var(--c-bg-deep);
	--gs-block-soft: var(--c-bg-blue);
	position: relative;
	overflow: hidden;
	padding-block: var(--section-y);
	background: var(--c-bg);
}

.gs-reviews-editorial__index {
	top: -1rem;
	right: clamp(1rem, 3vw, 3.5rem);
	--gs-index-color: color-mix(in srgb, var(--gs-block-soft) 72%, var(--c-bg));
	--gs-index-size: clamp(9rem, 16vw, 17rem);
}

/* Вертикальная плашка сидит на левом краю секции */
.gs-reviews-editorial__ribbon {
	position: absolute;
	bottom: clamp(3rem, 8vw, 7rem);
	left: 0;
	z-index: 2;
	padding: var(--s-4) var(--s-2);
	border-radius: 0 var(--r-xs) var(--r-xs) 0;
	background: var(--c-accent-cta);
	color: var(--c-bg);
	font-size: var(--t-eyebrow);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.gs-reviews-editorial__inner {
	position: relative;
	z-index: 1;
	width: var(--shell);
	margin-inline: auto;
}

.gs-reviews-editorial h2 {
	max-width: 22ch;
	margin-bottom: var(--s-4);
	font-size: var(--t-h2);
	overflow-wrap: break-word;
	hyphens: auto;
}

.gs-reviews-editorial__lead {
	max-width: 44ch;
	color: var(--c-blue-deep);
	font-size: var(--t-sm);
}

.gs-reviews-editorial__lead p {
	margin: 0;
}

/* --- Поле площадок --- */

.gs-reviews-editorial__platforms {
	display: grid;
	padding: 0;
	margin: var(--s-10) 0 0;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	overflow: hidden;
	border-radius: var(--r-md);
	list-style: none;
}

.gs-reviews-editorial__platform {
	display: grid;
	align-content: start;
	gap: var(--s-3);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--c-bg);
	color: var(--c-ink);
}

/* Линейка между панелями, без рамки по периметру поля */
.gs-reviews-editorial__platform + .gs-reviews-editorial__platform {
	box-shadow: inset 1px 0 0 var(--c-line);
}

.gs-reviews-editorial__platform.is-dark {
	background: var(--gs-block-dark);
	color: var(--c-on-deep);
}

.gs-reviews-editorial__platform.is-dark + .gs-reviews-editorial__platform,
.gs-reviews-editorial__platform.is-dark {
	box-shadow: none;
}

.gs-reviews-editorial__platform.is-soft {
	background: var(--gs-block-soft);
	box-shadow: none;
}

.gs-reviews-editorial__brand {
	display: flex;
	min-height: 2.5rem;
	align-items: center;
}

.gs-reviews-editorial__logo {
	display: block;
	width: auto;
	max-width: 12rem;
	max-height: 2rem;
	object-fit: contain;
	object-position: left center;
}

.gs-reviews-editorial__name {
	font-size: var(--t-h4);
	font-weight: 700;
}

.gs-reviews-editorial__rating {
	margin: 0;
	font-size: var(--t-metric);
	font-variant-numeric: tabular-nums;
	font-weight: 720;
	letter-spacing: -0.03em;
	line-height: 1;
}

/* Дорожка из пяти приглушённых звёзд, поверх неё — золотая заливка,
   обрезанная по доле рейтинга. Так 4,6 показывает 92%, а не пять целых. */
.gs-reviews-editorial__stars {
	position: relative;
	display: inline-block;
	margin: 0;
	line-height: 0;
}

.gs-reviews-editorial__stars-track,
.gs-reviews-editorial__stars-fill {
	display: flex;
	gap: 0.2rem;
}

.gs-reviews-editorial__stars-track {
	color: var(--c-line-control);
}

.gs-reviews-editorial__stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--gs-rating-fill, 0%);
	overflow: hidden;
	color: var(--c-rating);
}

.gs-reviews-editorial__platform.is-dark .gs-reviews-editorial__stars-track {
	color: var(--c-line-control-deep);
}

.gs-reviews-editorial__platform.is-dark .gs-reviews-editorial__stars-fill {
	color: var(--c-on-deep);
}

.gs-reviews-editorial__stars .gs-icon {
	width: 1.15rem;
	height: 1.15rem;
	flex: 0 0 auto;
}

.gs-reviews-editorial__caption {
	margin: 0;
	color: var(--c-blue-deep);
	font-size: var(--t-sm);
}

.gs-reviews-editorial__platform.is-dark .gs-reviews-editorial__caption {
	color: var(--c-on-deep-2);
}

.gs-reviews-editorial__count {
	margin: 0;
	color: var(--c-ink-3);
	font-size: var(--t-xs);
}

.gs-reviews-editorial__platform.is-dark .gs-reviews-editorial__count {
	color: var(--c-on-deep-2);
}

.gs-reviews-editorial__link {
	display: inline-flex;
	min-height: var(--tap);
	align-items: center;
	gap: var(--s-2);
	margin-top: var(--s-2);
	color: var(--c-ink);
	font-size: var(--t-sm);
	font-weight: 650;
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

.gs-reviews-editorial__platform.is-dark .gs-reviews-editorial__link {
	color: var(--c-on-deep);
}

.gs-reviews-editorial__link .gs-icon {
	width: 1.1rem;
	height: 1.1rem;
	transition: transform var(--dur) var(--ease);
}

/* --- Нижняя строка --- */

.gs-reviews-editorial__footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4) var(--s-8);
	align-items: center;
	justify-content: space-between;
	padding-top: var(--s-6);
	margin-top: var(--s-6);
	border-top: 1px solid var(--c-line);
}

.gs-reviews-editorial__note {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: var(--s-3);
	margin: 0;
	color: var(--c-ink-3);
	font-size: var(--t-xs);
}

.gs-reviews-editorial__note .gs-icon {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--c-line-control);
}

.gs-reviews-editorial__all {
	display: inline-flex;
	min-height: var(--tap);
	align-items: center;
	gap: var(--s-4);
	border-bottom: 1.5px solid currentColor;
	color: var(--c-ink);
	font-size: var(--t-sm);
	font-weight: 650;
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

.gs-reviews-editorial__all .gs-icon {
	width: 1.4rem;
	height: 1.4rem;
	transition: transform var(--dur) var(--ease);
}

@media (hover: hover) {
	.gs-reviews-editorial__link:hover,
	.gs-reviews-editorial__all:hover {
		color: var(--c-accent-text);
	}

	.gs-reviews-editorial__platform.is-dark .gs-reviews-editorial__link:hover {
		color: var(--c-accent-on-deep);
	}

	.gs-reviews-editorial__link:hover .gs-icon {
		transform: translate(0.15rem, -0.15rem);
	}

	.gs-reviews-editorial__all:hover .gs-icon {
		transform: translateX(0.35rem);
	}
}

/* --- Вход по скроллу --- */

.gs-reviews-editorial__intro > *,
.gs-reviews-editorial__platform {
	transition: opacity 520ms var(--ease-entrance) calc(var(--gs-i, 0) * 100ms),
		transform 520ms var(--ease-entrance) calc(var(--gs-i, 0) * 100ms);
}

.has-js .gs-reviews-editorial:not(.is-visible) .gs-reviews-editorial__intro > *,
.has-js .gs-reviews-editorial:not(.is-visible) .gs-reviews-editorial__platform {
	opacity: 0;
	transform: translateY(1rem);
}

.gs-reviews-editorial__intro > *:nth-child(2) { --gs-i: 1; }
.gs-reviews-editorial__intro > *:nth-child(3) { --gs-i: 2; }

/* --- Адаптив --- */

@media (max-width: 760px) {
	/* Плашка перекрыла бы содержимое панелей на узком экране. */
	.gs-reviews-editorial__ribbon {
		display: none;
	}

	.gs-reviews-editorial__platforms {
		grid-template-columns: minmax(0, 1fr);
	}

	/* На одной колонке линейка переезжает с левого края на верхний. */
	.gs-reviews-editorial__platform + .gs-reviews-editorial__platform {
		box-shadow: inset 0 1px 0 var(--c-line);
	}

	.gs-reviews-editorial__platform.is-dark,
	.gs-reviews-editorial__platform.is-dark + .gs-reviews-editorial__platform,
	.gs-reviews-editorial__platform.is-soft {
		box-shadow: none;
	}

	.gs-reviews-editorial__footer {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* ============================================================
   ЭКРАН 08 — ВАРИАНТЫ ЛЕЧЕНИЯ
   Аккордеон: раскрытый вариант — тёмная плоскость с иллюстрацией
   и составом, свёрнутые — строки на волосяных линейках.
   ============================================================ */

.gs-methods-editorial {
	--gs-block-dark: var(--c-bg-deep);
	--gs-block-soft: var(--c-bg-blue);
	position: relative;
	overflow: hidden;
	background: var(--c-bg-alt);
}

.gs-methods-editorial__index {
	bottom: -2.5rem;
	left: max(1rem, calc((100vw - var(--sb, 0px) - 1440px) / 2));
	--gs-index-color: color-mix(in srgb, var(--gs-block-soft) 72%, var(--c-bg-alt));
	--gs-index-size: clamp(9rem, 17vw, 18rem);
}

.gs-methods-editorial__inner {
	position: relative;
	z-index: 1;
	display: grid;
	width: var(--shell);
	margin-inline: auto;
	grid-template-columns: minmax(18rem, 0.62fr) minmax(30rem, 1.38fr);
	column-gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

.gs-methods-editorial__intro {
	min-width: 0;
	padding-block: var(--section-y);
}

.gs-methods-editorial h2 {
	max-width: 17ch;
	margin-bottom: var(--s-6);
	font-size: var(--t-h2);
	overflow-wrap: break-word;
	hyphens: auto;
}

.gs-methods-editorial__lead {
	max-width: 28rem;
	color: var(--c-blue-deep);
	font-size: var(--t-sm);
}

.gs-methods-editorial__lead p {
	margin: 0;
}

.gs-methods-editorial__list {
	min-width: 0;
	padding: 0;
	margin: 0;
	list-style: none;
}

/* --- Строка варианта --- */

.gs-methods-editorial__item {
	border-bottom: 1px solid var(--c-line);
	background: var(--c-bg);
}

.gs-methods-editorial__item.is-open {
	border-bottom-color: transparent;
	background: var(--gs-block-dark);
	color: var(--c-on-deep);
}

.gs-methods-editorial__heading {
	margin: 0;
	/* Глобальное h3 красит обёртку в основной тёмный, кнопка внутри
	   наследует уже её — на раскрытой тёмной строке заголовок и номер
	   пропадали. Цвет берём у строки. */
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.gs-methods-editorial__head {
	display: grid;
	width: 100%;
	align-items: center;
	gap: var(--s-5);
	padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 3rem);
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	text-align: left;
	transition: color var(--dur) var(--ease);
}

/* Места в строке закреплены: у раскрытого варианта знак уходит из сетки,
   и автоматическая раскладка сдвигала кнопку в освободившуюся колонку. */
.gs-methods-editorial__number {
	grid-column: 1;
}

.gs-methods-editorial__icon {
	grid-column: 2;
}

.gs-methods-editorial__title {
	grid-column: 3;
}

.gs-methods-editorial__toggle {
	grid-column: 4;
	justify-self: end;
}

.gs-methods-editorial__number {
	font-size: var(--t-h2);
	font-variant-numeric: tabular-nums;
	font-weight: 720;
	letter-spacing: -0.03em;
	line-height: 1;
}

.gs-methods-editorial__item.is-open .gs-methods-editorial__number {
	font-size: var(--t-metric);
}

.gs-methods-editorial__icon {
	display: flex;
	color: var(--c-blue-deep);
}

.gs-methods-editorial__icon .gs-icon,
.gs-methods-editorial__icon .gs-editable-icon {
	width: 3rem;
	height: 3rem;
}

/* У раскрытого варианта роль знака берёт на себя иллюстрация. */
.gs-methods-editorial__item.is-open .gs-methods-editorial__icon {
	display: none;
}

.gs-methods-editorial__title {
	font-size: var(--t-h3);
	font-weight: 700;
	line-height: 1.2;
}

.gs-methods-editorial__item.is-open .gs-methods-editorial__title {
	max-width: 14ch;
	font-size: var(--t-h2);
}

/* Круглый плюс: две линейки, а не глиф «+» из шрифта. */
.gs-methods-editorial__toggle {
	position: relative;
	display: block;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--c-line-control);
	border-radius: var(--r-full);
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.gs-methods-editorial__toggle::before,
.gs-methods-editorial__toggle::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.85rem;
	height: 1.5px;
	background: var(--c-ink-2);
	content: "";
	transform: translate(-50%, -50%);
	transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.gs-methods-editorial__toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.gs-methods-editorial__item.is-open .gs-methods-editorial__toggle {
	border-color: var(--c-line-control-deep);
}

.gs-methods-editorial__item.is-open .gs-methods-editorial__toggle::before,
.gs-methods-editorial__item.is-open .gs-methods-editorial__toggle::after {
	background: var(--c-on-deep);
}

/* Раскрытый: минус вместо плюса */
.gs-methods-editorial__item.is-open .gs-methods-editorial__toggle::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

/* --- Раскрытая панель --- */

/* Раскрытие анимируется строкой сетки: 0fr → 1fr. Так высота считается
   браузером и не требует замеров в скрипте. Без JS список раскрыт весь —
   контент доступен и когда скрипт не отработал. */
.has-js .gs-methods-editorial__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--dur-slow) var(--ease);
}

.has-js .gs-methods-editorial__item.is-open .gs-methods-editorial__panel {
	grid-template-rows: 1fr;
}

.has-js .gs-methods-editorial__panel > .gs-methods-editorial__panel-inner {
	min-height: 0;
	overflow: hidden;
	/* Нижнее поле — часть самой ячейки сетки, и строка 0fr его не схлопывает:
	   свёрнутая панель оставалась высотой в этот отступ. Убираем его вместе
	   с высотой и возвращаем на раскрытии. */
	padding-bottom: 0;
	transition: padding-bottom var(--dur-slow) var(--ease);
}

.has-js .gs-methods-editorial__item.is-open .gs-methods-editorial__panel > .gs-methods-editorial__panel-inner {
	padding-bottom: clamp(1.5rem, 3vw, 3rem);
}

@media (prefers-reduced-motion: reduce) {
	.has-js .gs-methods-editorial__panel {
		transition: none;
	}
}

.gs-methods-editorial__panel-inner {
	display: grid;
	gap: clamp(1.5rem, 3vw, 3rem);
	padding: 0 clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 3vw, 3rem);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	align-items: start;
}

.gs-methods-editorial__summary {
	grid-area: 1 / 1;
	/* Подтяжка вверх на отрицательном поле выезжала за край панели, а панель
	   теперь обрезает всё выше себя — первая строка обрубалась. */
	margin-top: 0;
}

.gs-methods-editorial__subtitle {
	max-width: 24ch;
	margin: 0;
	color: var(--c-on-deep-2);
	font-size: var(--t-sm);
}

.gs-methods-editorial__text {
	max-width: 34ch;
	margin: var(--s-3) 0 0;
	color: var(--c-on-deep-2);
	font-size: var(--t-sm);
}

.gs-methods-editorial__illustration {
	grid-area: 2 / 1;
	margin: 0;
	align-self: center;
}

.gs-methods-editorial__illustration img {
	display: block;
	width: 100%;
	max-height: 22rem;
	object-fit: contain;
}

.gs-methods-editorial__aside {
	display: grid;
	gap: var(--s-6);
	grid-area: 1 / 2 / 3 / 3;
	justify-items: start;
}

.gs-methods-editorial__points {
	display: grid;
	gap: var(--s-6);
	padding: 0;
	margin: 0;
	list-style: none;
}

.gs-methods-editorial__points li {
	display: flex;
	gap: var(--s-4);
	align-items: flex-start;
}

.gs-methods-editorial__point-icon {
	flex: 0 0 auto;
	color: var(--c-on-deep);
}

.gs-methods-editorial__point-icon .gs-icon,
.gs-methods-editorial__point-icon .gs-editable-icon {
	display: block;
	width: 2.5rem;
	height: 2.5rem;
}

.gs-methods-editorial__point-text {
	display: grid;
	min-width: 0;
	gap: var(--s-1);
}

.gs-methods-editorial__point-text strong {
	color: var(--c-on-deep);
	font-size: var(--t-h4);
	font-weight: 700;
	line-height: 1.2;
}

.gs-methods-editorial__point-text span {
	max-width: 34ch;
	color: var(--c-on-deep-2);
	font-size: var(--t-sm);
}

.gs-methods-editorial__closing {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	grid-column: 2;
	max-width: 60ch;
	padding: var(--s-6) clamp(1.5rem, 3vw, 3rem) var(--section-y);
	margin: 0;
	color: var(--c-blue-deep);
	font-size: var(--t-sm);
}

.gs-methods-editorial__closing .gs-icon {
	display: block;
	width: 1.75rem;
	height: 1.75rem;
	flex: 0 0 1.75rem;
	color: var(--c-line-control);
}

@media (hover: hover) {
	.gs-methods-editorial__item:not(.is-open) .gs-methods-editorial__head:hover {
		color: var(--c-accent-text);
	}

	.gs-methods-editorial__item:not(.is-open) .gs-methods-editorial__head:hover .gs-methods-editorial__toggle {
		border-color: var(--c-accent-cta);
		background: var(--c-bg-accent);
	}

	.gs-methods-editorial__item:not(.is-open) .gs-methods-editorial__head:hover .gs-methods-editorial__toggle::before,
	.gs-methods-editorial__item:not(.is-open) .gs-methods-editorial__head:hover .gs-methods-editorial__toggle::after {
		background: var(--c-accent-cta);
	}
}

/* --- Адаптив --- */

@media (max-width: 1050px) {
	.gs-methods-editorial__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.gs-methods-editorial__intro {
		padding-bottom: var(--s-10);
	}

	.gs-methods-editorial__closing {
		grid-column: auto;
	}
}

@media (max-width: 760px) {
	.gs-methods-editorial__panel-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.gs-methods-editorial__summary,
	.gs-methods-editorial__illustration,
	.gs-methods-editorial__aside {
		grid-area: auto;
	}

	.gs-methods-editorial__head {
		gap: var(--s-4);
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	/* Иконка уступает место заголовку: на узкой строке важнее текст. */
	.gs-methods-editorial__icon {
		display: none;
	}
}

/* ============================================================
   ЭКРАН 07 — РЕЗУЛЬТАТЫ ЛЕЧЕНИЯ
   Сравнение «до/после» со шторкой на всю ширину и тёмная карточка
   случая справа. Шторку двигает range — так работают и клавиатура,
   и тач, и скринридер, без собственной обработки перетаскивания.
   ============================================================ */

.gs-results-editorial {
	--gs-block-dark: var(--c-bg-deep);
	--gs-block-soft: var(--c-bg-blue);
	position: relative;
	overflow: hidden;
	padding-bottom: var(--section-y-sm);
	background: var(--c-bg);
}

.gs-results-editorial__index {
	top: -2rem;
	right: clamp(1rem, 3vw, 3.5rem);
	--gs-index-color: color-mix(in srgb, var(--gs-block-soft) 72%, var(--c-bg));
	--gs-index-size: clamp(9rem, 16vw, 17rem);
}

.gs-results-editorial__intro {
	position: relative;
	z-index: 1;
	width: var(--shell);
	padding-block: var(--section-y-sm);
	margin-inline: auto;
}

.gs-results-editorial h2 {
	max-width: 26ch;
	margin-bottom: var(--s-3);
	font-size: var(--t-h2);
	overflow-wrap: break-word;
	hyphens: auto;
}

.gs-results-editorial__lead {
	max-width: 60ch;
	color: var(--c-blue-deep);
	font-size: var(--t-sm);
}

.gs-results-editorial__lead p {
	margin: 0;
}

.gs-results-editorial__stage {
	position: relative;
	z-index: 1;
	/* Та же вертикаль, что у остальных блоков: сцена не выходит
	   за общий контейнер. Скругление и обрезка — на ней, потому что
	   кадры и тёмная карточка стыкуются вплотную. */
	width: var(--shell);
	margin-inline: auto;
	overflow: hidden;
	border-radius: var(--r-md);
}

.gs-results-editorial__case[hidden] {
	display: none;
}

.gs-results-editorial__case {
	display: grid;
	/* Кадр был почти во всю сцену и перевешивал рассказ о случае.
	   Полтора к одному: фотография остаётся главной, но цифры и текст
	   больше не жмутся в узкую колонку. */
	grid-template-columns: minmax(0, 1.45fr) minmax(22rem, 1fr);
}

/* --- Сравнение --- */

.gs-results-editorial__compare {
	position: relative;
	min-width: 0;
	overflow: hidden;
	background: var(--c-bg-alt);
}

.gs-results-editorial__photo {
	display: block;
	width: 100%;
	height: 100%;
	min-height: clamp(20rem, 32vw, 30rem);
	object-fit: cover;
}

/* Кадр «после» обрезается по позиции шторки */
.gs-results-editorial__after {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	clip-path: inset(0 0 0 var(--gs-split, 50%));
}

/* Подпись «до» лежит под слоем «после»: когда шторка уходит влево,
   слой накрывает её, и подпись не остаётся висеть над чужим кадром.
   Подпись «после» лежит внутри самого слоя и обрезается вместе с ним. */
.gs-results-editorial__tag {
	position: absolute;
	top: clamp(1rem, 2.5vw, 2rem);
	z-index: 1;
	padding: 0.35rem 0.9rem;
	border-radius: var(--r-xs);
	background: var(--c-bg);
	color: var(--c-ink);
	font-size: var(--t-eyebrow);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gs-results-editorial__tag--before {
	left: clamp(1rem, 2.5vw, 2rem);
}

.gs-results-editorial__tag--after {
	right: clamp(1rem, 2.5vw, 2rem);
}

.gs-results-editorial__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--gs-split, 50%);
	z-index: 3;
	width: 2px;
	background: var(--c-bg);
	pointer-events: none;
	transform: translateX(-1px);
}

.gs-results-editorial__handle {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	border: 2px solid var(--c-bg);
	border-radius: var(--r-full);
	background: var(--gs-block-dark);
	transform: translate(-50%, -50%);
}

/* Две шевронные стрелки внутри ручки, нарисованные линейками */
.gs-results-editorial__handle::before,
.gs-results-editorial__handle::after {
	position: absolute;
	top: 50%;
	width: 0.55rem;
	height: 0.55rem;
	border-top: 2px solid var(--c-bg);
	border-left: 2px solid var(--c-bg);
	content: "";
}

.gs-results-editorial__handle::before {
	left: 32%;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.gs-results-editorial__handle::after {
	left: 68%;
	transform: translate(-50%, -50%) rotate(135deg);
}

/* Range лежит поверх кадра невидимым слоем: он и есть управление. */
.gs-results-editorial__range {
	position: absolute;
	inset: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	margin: 0;
	appearance: none;
	background: transparent;
	cursor: ew-resize;
}

.gs-results-editorial__range::-webkit-slider-thumb {
	width: 3.5rem;
	height: 3.5rem;
	appearance: none;
	border-radius: var(--r-full);
	background: transparent;
	cursor: ew-resize;
}

.gs-results-editorial__range::-moz-range-thumb {
	width: 3.5rem;
	height: 3.5rem;
	border: 0;
	border-radius: var(--r-full);
	background: transparent;
	cursor: ew-resize;
}

.gs-results-editorial__range:focus-visible {
	outline: 3px solid var(--c-focus);
	outline-offset: -6px;
}

/* --- Карточка случая --- */

.gs-results-editorial__story {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(1.35rem, 2.2vw, 2.25rem);
	background: var(--gs-block-dark);
	color: var(--c-on-deep);
}

.gs-results-editorial__case-label {
	margin: 0 0 var(--s-3);
	color: var(--c-on-deep);
	font-size: var(--t-sm);
	font-weight: 650;
}

.gs-results-editorial__story h3 {
	max-width: 20ch;
	margin: 0 0 var(--s-5);
	padding-bottom: var(--s-5);
	border-bottom: 1px solid var(--c-line-deep);
	color: var(--c-on-deep);
	font-size: clamp(1.35rem, 1.9vw, 1.75rem);
	font-weight: 700;
	line-height: 1.15;
	width: 100%;
}

/* Цифры случая: три коротких числа сразу под заголовком. Без них
   рассказ остаётся качественным — «восстановлено», «улучшилось», —
   а решение принимают по срокам и объёму. */
.gs-results-editorial__metrics {
	display: grid;
	gap: var(--s-3);
	margin: 0 0 var(--s-5);
	padding: 0 0 var(--s-5);
	border-bottom: 1px solid var(--c-line-deep);
	/* Строкой, а не столбцом: три коротких числа рядом читаются как сводка
	   случая, а в колонку они добавляли к карточке почти двести пикселей. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
}

.gs-results-editorial__metrics li {
	display: grid;
	gap: 0.15rem;
}

.gs-results-editorial__metrics strong {
	font-size: clamp(1.25rem, 1.7vw, 1.6rem);
	font-weight: 720;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
	line-height: 1;
}

.gs-results-editorial__metrics span {
	color: var(--c-on-deep-2);
	font-size: var(--t-xs);
	line-height: 1.3;
}

/* На широкой колонке три факта в столбец добавляли карточке лишние
   двести пикселей — и фотография тянулась за ними. */
.gs-results-editorial__facts {
	width: 100%;
}

@media (min-width: 1100px) {
	.gs-results-editorial__facts {
		display: grid;
		gap: 0 var(--s-5);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gs-results-editorial__facts > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

.gs-results-editorial__fact {
	width: 100%;
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--c-line-deep);
	margin-bottom: var(--s-3);
}

.gs-results-editorial__fact strong {
	display: block;
	margin-bottom: 0.15rem;
	color: var(--c-on-deep);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.gs-results-editorial__fact p {
	max-width: 32ch;
	margin: 0;
	color: var(--c-on-deep-2);
	font-size: var(--t-sm);
}

.gs-results-editorial__disclaimer {
	max-width: 34ch;
	margin: 0 0 var(--s-6);
	color: var(--c-on-deep-2);
	font-size: var(--t-xs);
}

.gs-results-editorial__nav {
	display: flex;
	gap: var(--s-4);
	align-items: center;
	margin-top: var(--s-8);
}

.gs-results-editorial__arrow {
	display: grid;
	width: var(--tap);
	height: var(--tap);
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: var(--r-full);
	background: none;
	color: var(--c-on-deep);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.gs-results-editorial__arrow .gs-icon {
	width: 1.6rem;
	height: 1.6rem;
	transform: rotate(180deg);
}

.gs-results-editorial__arrow--next .gs-icon {
	transform: none;
}

.gs-results-editorial__counter {
	margin: 0;
	color: var(--c-on-deep-2);
	font-size: var(--t-sm);
	font-variant-numeric: tabular-nums;
	font-weight: 650;
}

.gs-results-editorial__counter [data-gs-result-current] {
	color: var(--c-on-deep);
	font-size: var(--t-h4);
	font-weight: 720;
}

.gs-results-editorial__note {
	width: var(--shell);
	padding-top: var(--s-6);
	margin-inline: auto;
	color: var(--c-ink-3);
	font-size: var(--t-xs);
}

@media (hover: hover) {
	.gs-results-editorial__arrow:hover {
		background: color-mix(in srgb, var(--c-on-deep) 12%, transparent);
		color: var(--c-accent-on-deep);
	}
}

/* --- Адаптив --- */

@media (max-width: 980px) {
	.gs-results-editorial__case {
		grid-template-columns: minmax(0, 1fr);
	}

	.gs-results-editorial__photo {
		min-height: clamp(15rem, 46vw, 21rem);
	}
}

@media (max-width: 560px) {
	.gs-results-editorial__handle {
		width: 2.75rem;
		height: 2.75rem;
	}

	.gs-results-editorial__story h3 {
		font-size: var(--t-h3);
	}
}

/* ============================================================
   ЦЕНЫ — короткий прайс
   Левый корешок и поле строк на волосяных линейках. Цена набрана
   ступенью metric с табличными цифрами: столбец сумм должен читаться
   сверху вниз, а не прыгать по ширине знаков.
   ============================================================ */

.gs-prices-editorial {
	--gs-block-dark: var(--c-bg-deep);
	--gs-block-soft: var(--c-bg-blue);
	position: relative;
	overflow: hidden;
	/* Идёт следом за «Условиями» на бумажном фоне — белый держит границу
	   между секциями без лишней линии. */
	padding-block: var(--section-y);
	background: var(--c-bg);
	color: var(--c-ink);
}

.gs-prices-editorial__index {
	right: max(1rem, calc((100vw - var(--sb, 0px) - 1440px) / 2));
	bottom: -3rem;
	--gs-index-color: color-mix(in srgb, var(--gs-block-soft) 62%, var(--c-bg));
	--gs-index-size: clamp(8rem, 15vw, 16rem);
}

.gs-prices-editorial__inner {
	position: relative;
	z-index: 2;
	display: grid;
	width: var(--shell);
	margin-inline: auto;
	gap: clamp(2rem, 4vw, 4.5rem);
	grid-template-columns: minmax(20rem, 0.72fr) minmax(28rem, 1.28fr);
	align-items: start;
}

/* Заголовок цен ниже общего editorial-кегля: рядом с ним колонка цифр,
   и на 4.6vw он перекрикивал сами суммы, ради которых блок и сделан.
   Возврат к базовой ступени шкалы — с ним мера в 10ch давала пятистрочную
   башню, поэтому строка стала шире. */
.gs-prices-editorial__intro h2 {
	max-width: 15ch;
	margin-bottom: var(--s-4);
	font-size: var(--t-h2);
}

.gs-prices-editorial__lead {
	max-width: 34rem;
	margin-bottom: var(--s-6);
	color: var(--c-ink-2);
	font-size: var(--t-lead);
	line-height: 1.55;
}

.gs-prices-editorial__lead p:last-child {
	margin-bottom: 0;
}

.gs-prices-editorial__note {
	max-width: 30ch;
	margin: var(--s-4) 0 0;
	color: var(--c-ink-3);
	font-size: var(--t-sm);
	line-height: 1.5;
}

.gs-prices-editorial__list {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--c-line);
	list-style: none;
}

.gs-prices-editorial__row {
	display: grid;
	gap: var(--s-4) var(--s-6);
	align-items: baseline;
	/* Внутреннее поле одинаковое у всех строк, включая светлые: при
	   переворачивании тона строка не должна прыгать по горизонтали. */
	padding: clamp(1.1rem, 1.8vw, 1.6rem) clamp(1rem, 2vw, 1.5rem);
	border-bottom: 1px solid var(--c-line);
	grid-template-columns: minmax(0, 1fr) auto;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
		color var(--dur) var(--ease);
}

.gs-prices-editorial__row .gs-prices-editorial__what p,
.gs-prices-editorial__row .gs-prices-editorial__monthly {
	transition: color var(--dur) var(--ease);
}

/* Одна тёмная строка на поле — тот же приём, что у ячеек «Ситуаций». */
.gs-prices-editorial__row.is-dark {
	border-bottom-color: transparent;
	background: var(--gs-block-dark, var(--c-bg-deep));
	color: var(--c-on-deep);
}

/* Наведение переворачивает тон строки: светлая уходит в тёмную, тёмная
   возвращается на бумагу и снова опирается на волосяную линейку. Строки
   некликабельны — ни курсора, ни подъёма, только тон. */
@media (hover: hover) {
	.gs-prices-editorial__row:hover {
		border-bottom-color: transparent;
		background: var(--gs-block-dark, var(--c-bg-deep));
		color: var(--c-on-deep);
	}

	.gs-prices-editorial__row:hover .gs-prices-editorial__what p {
		color: var(--c-on-deep-2);
	}

	.gs-prices-editorial__row:hover .gs-prices-editorial__monthly {
		color: var(--c-accent-on-deep);
	}

	.gs-prices-editorial__row.is-dark:hover {
		border-bottom-color: var(--c-line);
		background: var(--c-bg);
		color: var(--c-ink);
	}

	.gs-prices-editorial__row.is-dark:hover .gs-prices-editorial__what p,
	.gs-prices-editorial__row.is-dark:hover .gs-prices-editorial__monthly {
		color: var(--c-ink-3);
	}
}

.gs-prices-editorial__what h3 {
	/* Глобальное правило h3 красит заголовок в основной текст, и на тёмной
	   строке он становился невидимым: 1.01:1. Цвет берём у строки. */
	color: inherit;
	margin: 0 0 0.15em;
	font-size: var(--t-h4);
	font-weight: 650;
	line-height: 1.25;
}

.gs-prices-editorial__what p {
	max-width: 44ch;
	margin: 0;
	color: var(--c-ink-3);
	font-size: var(--t-sm);
	line-height: 1.45;
}

.gs-prices-editorial__row.is-dark .gs-prices-editorial__what p {
	color: var(--c-on-deep-2);
}

.gs-prices-editorial__price {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	justify-items: end;
	text-align: right;
}

.gs-prices-editorial__value {
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	font-weight: 720;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	line-height: 1.1;
	white-space: nowrap;
}

.gs-prices-editorial__monthly {
	color: var(--c-ink-3);
	font-size: var(--t-xs);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.gs-prices-editorial__row.is-dark .gs-prices-editorial__monthly {
	color: var(--c-accent-on-deep);
}

.gs-prices-editorial__footnote {
	max-width: 68ch;
	margin: var(--s-6) 0 0;
	color: var(--c-ink-3);
	font-size: var(--t-xs);
	line-height: 1.5;
	grid-column: 2;
}

@media (max-width: 980px) {
	.gs-prices-editorial__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.gs-prices-editorial__intro h2 {
		max-width: 14ch;
	}

	.gs-prices-editorial__footnote {
		grid-column: 1;
	}
}

@media (max-width: 560px) {
	/* Цена остаётся справа от названия — так строка читается как прайс,
	   а не как пять отдельных абзацев. Описание уходит под них во всю
	   ширину: столбец из четырёх стопок давал строки по 150px. */
	.gs-prices-editorial__row {
		gap: 0.35rem var(--s-4);
		padding-block: var(--s-4);
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
	}

	.gs-prices-editorial__what {
		display: contents;
	}

	.gs-prices-editorial__what h3 {
		grid-column: 1;
		grid-row: 1;
	}

	.gs-prices-editorial__what p {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.gs-prices-editorial__price {
		grid-column: 2;
		grid-row: 1;
	}

	.gs-prices-editorial__lead {
		margin-bottom: var(--s-5);
	}
}

/* ============================================================
   SEO-ТЕКСТ
   Последняя секция перед футером. Набор мелкий и приглушённый:
   блок обслуживает поиск и дочитавших, а не тех, кто принимает
   решение по первому экрану. Раскрытие — тот же ::details-content,
   что у вопросов.
   ============================================================ */

.gs-seotext {
	padding-block: var(--section-y-sm);
	background: var(--c-bg-alt);
	color: var(--c-ink-2);
}

.gs-seotext__inner {
	width: var(--shell);
	margin-inline: auto;
}

.gs-seotext__heading {
	max-width: 26ch;
	margin: 0 0 var(--s-5);
	color: var(--c-ink);
	font-size: var(--t-h4);
	font-weight: 700;
	line-height: 1.25;
}

.gs-seotext__body {
	max-width: 78ch;
	font-size: var(--t-sm);
	line-height: 1.65;
}

.gs-seotext__body p {
	margin: 0 0 var(--s-4);
}

.gs-seotext__body p:last-child {
	margin-bottom: 0;
}

.gs-seotext__body h3 {
	max-width: 32ch;
	margin: var(--s-6) 0 var(--s-3);
	color: var(--c-ink);
	font-size: var(--t-body);
	font-weight: 700;
	line-height: 1.3;
}

.gs-seotext__body ul,
.gs-seotext__body ol {
	margin: 0 0 var(--s-4);
	padding-left: 1.15rem;
}

.gs-seotext__body li {
	margin-bottom: var(--s-2);
}

.gs-seotext__body a {
	color: var(--c-accent-text);
	text-underline-offset: 0.2em;
}

/* --- Свёртка --- */

.gs-seotext__details summary {
	display: inline-flex;
	gap: var(--s-3);
	align-items: center;
	min-height: var(--tap);
	color: var(--c-ink);
	cursor: pointer;
	font-size: var(--t-sm);
	font-weight: 650;
	list-style: none;
}

.gs-seotext__details summary::-webkit-details-marker {
	display: none;
}

.gs-seotext__details summary::marker {
	content: "";
}

.gs-seotext__summary-label {
	border-bottom: 1.5px solid currentColor;
}

/* Стрелка из двух линеек, как в остальных переключателях темы. */
.gs-seotext__summary-icon {
	position: relative;
	display: block;
	width: 1.75rem;
	height: 1.75rem;
	border: 1px solid var(--c-line-control);
	border-radius: var(--r-full);
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.gs-seotext__summary-icon::before,
.gs-seotext__summary-icon::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.55rem;
	height: 1.5px;
	background: var(--c-ink-2);
	content: "";
	transform: translate(-50%, -50%);
}

.gs-seotext__summary-icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: transform var(--dur) var(--ease);
}

.gs-seotext__details[open] .gs-seotext__summary-icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.gs-seotext__details::details-content {
	overflow: hidden;
	block-size: 0;
	transition: block-size var(--dur-slow) var(--ease), content-visibility var(--dur-slow) var(--ease) allow-discrete;
}

.gs-seotext__details[open]::details-content {
	block-size: auto;
}

.gs-seotext__details .gs-seotext__body {
	padding-top: var(--s-5);
}

/* На широком экране текст идёт в две колонки: одна колонка в 78 знаков
   оставляла бы половину полосы пустой, а пускать мелкий кегль во всю
   ширину нельзя — строка перестаёт читаться. */
@media (min-width: 1100px) {
	.gs-seotext__body {
		max-width: none;
		columns: 2;
		column-gap: clamp(2.5rem, 5vw, 5rem);
	}

	.gs-seotext__body > * {
		break-inside: avoid;
	}

	.gs-seotext__body h3 {
		break-after: avoid;
	}

	.gs-seotext__body h3:first-child {
		margin-top: 0;
	}
}

.gs-seotext__note {
	max-width: 78ch;
	margin: var(--s-5) 0 0;
	color: var(--c-ink-3);
	font-size: var(--t-xs);
	line-height: 1.5;
}

@media (hover: hover) {
	.gs-seotext__details summary:hover {
		color: var(--c-accent-text);
	}

	.gs-seotext__details summary:hover .gs-seotext__summary-icon {
		border-color: var(--c-accent-cta);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-seotext__details::details-content {
		transition: none;
	}
}

/* ============================================================
   ФУТЕР — ФИЛИАЛЫ КЛИНИКИ
   Переключатель адресов, тёмная карточка с контактами и галерея
   филиала. Сквозной для всего сайта, заменяет прежний футер
   в три колонки.
   ============================================================ */

.gs-footer-editorial {
	position: relative;
	overflow: hidden;
	background: var(--c-bg);
	color: var(--c-ink);
}

.gs-footer-editorial__top {
	position: relative;
	display: grid;
	width: var(--shell);
	padding-block: var(--s-8);
	margin-inline: auto;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--s-6) clamp(1.5rem, 3vw, 3rem);
	align-items: center;
}

.gs-footer-editorial__index {
	--gs-index-color: color-mix(in srgb, var(--c-bg-blue) 72%, var(--c-bg));
	--gs-index-size: clamp(4rem, 8vw, 7.5rem);
}

.gs-footer-editorial__titles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3) var(--s-6);
	align-items: baseline;
	min-width: 0;
}

.gs-footer-editorial h2 {
	max-width: 23ch;
	margin: 0;
	font-size: var(--t-h2);
	overflow-wrap: break-word;
	hyphens: auto;
}

.gs-footer-editorial__titles p {
	max-width: 26ch;
	margin: 0;
	color: var(--c-blue-deep);
	font-size: var(--t-sm);
}

.gs-footer-editorial__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
}

.gs-footer-editorial__tab {
	display: inline-flex;
	min-height: 3.75rem;
	align-items: center;
	gap: var(--s-3);
	padding: 0.85rem 1.5rem;
	border: 1px solid var(--c-line-control);
	border-radius: var(--r-sm);
	background: var(--c-bg);
	color: var(--c-ink);
	cursor: pointer;
	font: inherit;
	font-size: var(--t-sm);
	font-weight: 650;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.gs-footer-editorial__tab .gs-icon {
	display: block;
	width: 1.35rem;
	height: 1.35rem;
}

.gs-footer-editorial__tab.is-active {
	border-color: var(--c-bg-deep);
	background: var(--c-bg-deep);
	color: var(--c-on-deep);
}

/* --- Панель филиала --- */

.gs-footer-editorial__panel[hidden] {
	display: none;
}

.gs-footer-editorial__panel {
	display: grid;
	width: var(--shell);
	margin-inline: auto;
	grid-template-columns: minmax(18rem, 0.42fr) minmax(0, 1fr);
	grid-template-rows: auto auto;
	overflow: hidden;
	border-radius: var(--r-md);
}

.gs-footer-editorial__card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	grid-area: 1 / 1;
	padding: clamp(1.5rem, 3vw, 2.75rem);
	background: var(--c-bg-deep);
	color: var(--c-on-deep);
}

/* Логотип наверху, контакты прижаты к низу колонки: между ними
   растёт воздух, а не пустота под текстом. */
.gs-footer-editorial__logo {
	display: block;
	max-width: 100%;
	margin-bottom: var(--s-5);
	text-decoration: none;
}

.gs-footer-editorial__brand {
	color: var(--c-on-deep);
	font-size: var(--t-h3);
	font-weight: 720;
	line-height: 1.15;
}

.gs-footer-editorial__contacts {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	margin-top: auto;
}

.gs-footer-editorial__eyebrow {
	margin: 0 0 var(--s-5);
	color: var(--c-on-deep-2);
	font-size: var(--t-eyebrow);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gs-footer-editorial__address {
	width: 100%;
	padding-bottom: var(--s-4);
	border-bottom: 1px solid var(--c-line-deep);
	margin: 0 0 var(--s-4);
	color: var(--c-on-deep);
	font-size: var(--t-h3);
	font-style: normal;
	font-weight: 700;
	line-height: 1.25;
}

.gs-footer-editorial__hours {
	display: flex;
	width: 100%;
	align-items: center;
	gap: var(--s-3);
	padding-bottom: var(--s-4);
	border-bottom: 1px solid var(--c-line-deep);
	margin: 0 0 var(--s-5);
	color: var(--c-on-deep);
	font-size: var(--t-sm);
}

.gs-footer-editorial__hours .gs-icon {
	display: block;
	width: 1.35rem;
	height: 1.35rem;
	flex: 0 0 1.35rem;
}

.gs-footer-editorial__route {
	display: inline-flex;
	min-height: var(--tap);
	align-items: center;
	gap: var(--s-2);
	border-bottom: 1.5px solid currentColor;
	margin-bottom: var(--s-5);
	color: var(--c-on-deep);
	font-size: var(--t-sm);
	font-weight: 650;
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

.gs-footer-editorial__route .gs-icon {
	width: 1.1rem;
	height: 1.1rem;
	transition: transform var(--dur) var(--ease);
}

.gs-footer-editorial__note {
	max-width: 30ch;
	margin: var(--s-5) 0 0;
	color: var(--c-on-deep-2);
	font-size: var(--t-xs);
}

/* Мессенджеры — на месте, отмеченном в макете, под подписью */
.gs-footer-editorial__messengers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin-top: var(--s-5);
}

/* Без рамки: у иконок мессенджеров своя фирменная подложка,
   и контейнерная обводка спорит с ней. Размер плитки оставлен
   ради тач-цели. */
.gs-footer-editorial__messengers a {
	display: grid;
	width: 3.25rem;
	height: 3.25rem;
	place-items: center;
	border: 0;
	border-radius: var(--r-sm);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.gs-footer-editorial__messengers img,
.gs-footer-editorial__messengers svg {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

/* --- Полоса преимуществ --- */

.gs-footer-editorial__facts {
	display: grid;
	grid-area: 2 / 1;
	padding: 0;
	margin: 0;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	background: var(--c-bg-alt);
	list-style: none;
}

.gs-footer-editorial__facts li {
	display: grid;
	gap: var(--s-3);
	justify-items: center;
	align-content: center;
	padding: var(--s-6) var(--s-3);
	color: var(--c-ink-2);
	font-size: var(--t-xs);
	text-align: center;
}

.gs-footer-editorial__facts li + li {
	box-shadow: inset 1px 0 0 var(--c-line);
}

.gs-footer-editorial__facts .gs-icon,
.gs-footer-editorial__facts .gs-editable-icon {
	display: block;
	width: 3rem;
	height: 3rem;
	color: var(--c-ink-2);
}

/* --- Галерея филиала --- */

/* display: contents — чтобы крупный кадр и лента миниатюр стали
   собственными ячейками панели. Иначе обёртка занимает обе строки
   целиком, её внутреннее деление живёт своей жизнью, и лента
   не совпадает по высоте с полосой преимуществ слева. */
.gs-footer-editorial__gallery {
	display: contents;
}

.gs-footer-editorial__viewer {
	position: relative;
	min-width: 0;
	/* Нижняя граница на случай короткой карточки: без неё пустой
	   контейнер схлопнулся бы в ноль. Верхнюю задаёт сама карточка. */
	min-height: clamp(20rem, 26vw, 30rem);
	grid-area: 1 / 2;
	background: var(--c-bg-alt);
}

.gs-footer-editorial__shot[hidden] {
	display: none;
}

.gs-footer-editorial__shot {
	position: absolute;
	inset: 0;
	margin: 0;
}

.gs-footer-editorial__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gs-footer-editorial__shot figcaption {
	position: absolute;
	bottom: clamp(1rem, 2.5vw, 2rem);
	left: clamp(1rem, 2.5vw, 2rem);
	color: var(--c-on-deep);
	font-size: var(--t-sm);
	font-weight: 650;
	text-shadow: 0 1px 6px rgba(15, 44, 64, 0.55);
}

.gs-footer-editorial__viewer-nav {
	position: absolute;
	top: clamp(1rem, 2.5vw, 2rem);
	right: clamp(1rem, 2.5vw, 2rem);
	display: flex;
	gap: var(--s-3);
	align-items: center;
}

.gs-footer-editorial__counter {
	margin: 0;
	color: var(--c-on-deep);
	font-size: var(--t-sm);
	font-variant-numeric: tabular-nums;
	font-weight: 650;
	text-shadow: 0 1px 6px rgba(15, 44, 64, 0.55);
}

.gs-footer-editorial__arrow {
	display: grid;
	width: 3rem;
	height: 3rem;
	place-items: center;
	padding: 0;
	border: 1px solid var(--c-line-control-deep);
	border-radius: var(--r-full);
	background: color-mix(in srgb, var(--c-bg-deep) 72%, transparent);
	color: var(--c-on-deep);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease);
}

.gs-footer-editorial__arrow .gs-icon {
	width: 1.4rem;
	height: 1.4rem;
	transform: rotate(180deg);
}

.gs-footer-editorial__arrow--next .gs-icon {
	transform: none;
}

.gs-footer-editorial__thumbs {
	display: grid;
	padding: 0;
	margin: 0;
	grid-area: 2 / 2;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	list-style: none;
}

.gs-footer-editorial__thumb {
	display: grid;
	width: 100%;
	padding: 0 0 var(--s-4);
	border: 0;
	border-top: 3px solid transparent;
	background: var(--c-bg);
	color: var(--c-ink-2);
	cursor: pointer;
	font: inherit;
	font-size: var(--t-xs);
	text-align: left;
}

.gs-footer-editorial__thumb img {
	display: block;
	width: 100%;
	height: clamp(5rem, 9vw, 7.5rem);
	margin-bottom: var(--s-3);
	object-fit: cover;
}

.gs-footer-editorial__thumb span {
	padding-inline: var(--s-4);
}

/* Активная миниатюра помечается терракотовой чертой сверху */
.gs-footer-editorial__thumb.is-active {
	border-top-color: var(--c-accent-cta);
	color: var(--c-ink);
}

/* --- Правовая строка --- */

.gs-footer-editorial__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3) var(--s-8);
	align-items: center;
	width: var(--shell);
	padding-block: var(--s-6);
	margin-inline: auto;
	color: var(--c-ink-3);
	font-size: var(--t-xs);
}

.gs-footer-editorial__legal p {
	margin: 0;
}

.gs-footer-editorial__legal a {
	display: inline-flex;
	min-height: var(--tap);
	align-items: center;
}

.gs-footer-editorial__legal a {
	color: var(--c-ink-3);
}

@media (hover: hover) {
	.gs-footer-editorial__tab:not(.is-active):hover {
		border-color: var(--c-bg-deep);
		color: var(--c-accent-text);
	}

	.gs-footer-editorial__route:hover {
		color: var(--c-accent-on-deep);
	}

	.gs-footer-editorial__route:hover .gs-icon {
		transform: translate(0.15rem, -0.15rem);
	}

	.gs-footer-editorial__messengers a:hover {
		opacity: 0.82;
		transform: translateY(-2px);
	}

	.gs-footer-editorial__arrow:hover {
		background: var(--c-bg-deep);
	}

	.gs-footer-editorial__thumb:not(.is-active):hover {
		color: var(--c-ink);
	}
}

/* --- Адаптив --- */

@media (max-width: 1180px) {
	.gs-footer-editorial__top {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.gs-footer-editorial__tabs {
		grid-column: 1 / -1;
	}
}

@media (max-width: 900px) {
	.gs-footer-editorial__panel {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto;
	}

	.gs-footer-editorial__card,
	.gs-footer-editorial__facts,
	.gs-footer-editorial__viewer,
	.gs-footer-editorial__thumbs {
		grid-area: auto;
	}
}

@media (max-width: 640px) {
	.gs-footer-editorial__index {
		display: none;
	}

	.gs-footer-editorial__facts {
		grid-auto-flow: row;
	}

	.gs-footer-editorial__facts li + li {
		box-shadow: inset 0 1px 0 var(--c-line);
	}

	/* Четыре миниатюры в строку на телефоне превращаются в марки;
	   две в ряд ещё читаются вместе с подписью. */
	.gs-footer-editorial__thumbs {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ============================================================
   ЭКРАН 11 — ВОПРОСЫ И ОТВЕТЫ
   Тёмный корешок с фотографией слева, аккордеон справа.
   Аккордеон построен на <details name>: группа открывает
   один вопрос за раз средствами браузера, без скрипта.
   ============================================================ */

.gs-faq-editorial {
	--gs-block-dark: var(--c-bg-deep);
	--gs-block-soft: var(--c-bg-blue);
	position: relative;
	overflow: hidden;
	background: var(--c-bg-alt);
}

.gs-faq-editorial__inner {
	display: grid;
	width: var(--shell);
	margin-inline: auto;
	grid-template-columns: minmax(19rem, 0.62fr) minmax(28rem, 1.38fr);
	align-items: stretch;
}

/* --- Тёмный корешок --- */

.gs-faq-editorial__intro {
	position: relative;
	display: flex;
	min-width: 0;
	flex-direction: column;
	padding: var(--section-y) 0 0;
	background: var(--gs-block-dark);
	color: var(--c-on-deep);
}

.gs-faq-editorial__intro > *:not(.gs-faq-editorial__media) {
	margin-inline: clamp(1.5rem, 3vw, 2.75rem);
}

.gs-faq-editorial h2 {
	max-width: 14ch;
	margin-bottom: var(--s-5);
	color: var(--c-on-deep);
	font-size: var(--t-h2);
	overflow-wrap: break-word;
	hyphens: auto;
}

.gs-faq-editorial__lead {
	max-width: 30ch;
	color: var(--c-on-deep-2);
	font-size: var(--t-sm);
}

.gs-faq-editorial__lead p {
	margin: 0;
}

/* Призрачный номер здесь в потоке: он держит воздух между лидом
   и фотографией, а не лежит абсолютом в углу. */
/* Единственный номер не на .gs-index: здесь он стоит в потоке и
   держит воздух между лидом и фотографией, а не лежит абсолютом. */
.gs-faq-editorial__index {
	margin-top: var(--s-6);
	color: color-mix(in srgb, var(--c-on-deep) 16%, transparent);
	font-size: clamp(6rem, 10vw, 9rem);
	font-weight: 720;
	letter-spacing: -0.06em;
	line-height: 0.85;
	pointer-events: none;
}

.gs-faq-editorial__media {
	margin: auto 0 0;
	overflow: hidden;
}

.gs-faq-editorial__media img {
	display: block;
	width: 100%;
	height: clamp(14rem, 20vw, 18rem);
	object-fit: cover;
}

.gs-faq-editorial__cta {
	justify-content: space-between;
	gap: var(--s-4);
	margin: clamp(1.5rem, 3vw, 2.75rem);
	margin-top: clamp(1.5rem, 3vw, 2.75rem);
}

.gs-faq-editorial__cta .gs-icon {
	width: 1.5rem;
	height: 1.5rem;
	flex: 0 0 1.5rem;
	transition: transform var(--dur) var(--ease);
}

/* --- Аккордеон --- */

.gs-faq-editorial__list {
	min-width: 0;
	padding: var(--section-y) clamp(1.5rem, 3vw, 3rem);
}

.gs-faq-editorial__item {
	border-bottom: 1px solid var(--c-line);
}

.gs-faq-editorial__item[open] {
	border-bottom-color: transparent;
	border-radius: var(--r-md);
	background: var(--gs-block-soft);
}

.gs-faq-editorial__item summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-6);
	padding: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1rem, 2vw, 1.75rem);
	cursor: pointer;
	list-style: none;
}

/* Служебный треугольник браузера убираем в обоих движках */
.gs-faq-editorial__item summary::-webkit-details-marker {
	display: none;
}

.gs-faq-editorial__item summary::marker {
	content: "";
}

.gs-faq-editorial__question {
	max-width: 34ch;
	font-size: var(--t-h3);
	font-weight: 700;
	line-height: 1.25;
	transition: color var(--dur) var(--ease);
}

/* Плюс из двух линеек; у раскрытого вопроса вторая доворачивается в минус */
.gs-faq-editorial__toggle {
	position: relative;
	display: block;
	width: 2.75rem;
	height: 2.75rem;
	flex: 0 0 2.75rem;
	border: 1px solid var(--c-blue);
	border-radius: var(--r-full);
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.gs-faq-editorial__toggle::before,
.gs-faq-editorial__toggle::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.85rem;
	height: 1.5px;
	background: var(--c-blue-deep);
	content: "";
	transform: translate(-50%, -50%);
	transition: transform var(--dur) var(--ease);
}

.gs-faq-editorial__toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.gs-faq-editorial__item[open] .gs-faq-editorial__toggle::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

/* Плавное раскрытие ответа. <details> закрывает содержимое сам, поэтому
   анимируем не блок, а слот ::details-content — иначе пришлось бы отбирать
   у элемента его же поведение и переписывать взаимное закрытие вопросов
   на скрипте. Где слот ещё не поддержан (Firefox, Safari до 18.4), ответ
   открывается сразу — как открывался и раньше. */
.gs-faq-editorial__item::details-content {
	overflow: hidden;
	block-size: 0;
	transition: block-size var(--dur-slow) var(--ease), content-visibility var(--dur-slow) var(--ease) allow-discrete;
}

.gs-faq-editorial__item[open]::details-content {
	block-size: auto;
}

@media (prefers-reduced-motion: reduce) {
	.gs-faq-editorial__item::details-content {
		transition: none;
	}
}

.gs-faq-editorial__answer {
	max-width: 62ch;
	padding: 0 clamp(1rem, 2vw, 1.75rem) clamp(1.25rem, 2.2vw, 1.75rem);
	color: var(--c-ink-2);
	font-size: var(--t-sm);
}

.gs-faq-editorial__answer p {
	margin: 0 0 var(--s-3);
}

.gs-faq-editorial__answer p:last-child {
	margin-bottom: 0;
}

/* --- Строка с телефоном --- */

.gs-faq-editorial__contact {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	margin: var(--s-8) 0 0;
	padding-inline: clamp(1rem, 2vw, 1.75rem);
	color: var(--c-ink-2);
	font-size: var(--t-sm);
}

.gs-faq-editorial__contact-icon {
	display: grid;
	width: 3rem;
	height: 3rem;
	flex: 0 0 3rem;
	place-items: center;
	border: 1px solid var(--c-blue);
	border-radius: var(--r-full);
	color: var(--c-blue-deep);
}

.gs-faq-editorial__contact-icon .gs-icon {
	width: 1.4rem;
	height: 1.4rem;
}

.gs-faq-editorial__contact a {
	color: var(--c-blue-deep);
	font-weight: 700;
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

@media (hover: hover) {
	.gs-faq-editorial__item:not([open]) summary:hover .gs-faq-editorial__question {
		color: var(--c-accent-text);
	}

	.gs-faq-editorial__item:not([open]) summary:hover .gs-faq-editorial__toggle {
		border-color: var(--c-accent-cta);
		background: var(--c-bg-accent);
	}

	.gs-faq-editorial__cta:hover .gs-icon {
		transform: translateX(0.35rem);
	}

	.gs-faq-editorial__contact a:hover {
		color: var(--c-accent-text);
	}
}

/* --- Вход по скроллу --- */

.gs-faq-editorial__intro > *,
.gs-faq-editorial__item {
	transition: opacity 520ms var(--ease-entrance) calc(var(--gs-i, 0) * 80ms),
		transform 520ms var(--ease-entrance) calc(var(--gs-i, 0) * 80ms);
}

.has-js .gs-faq-editorial:not(.is-visible) .gs-faq-editorial__intro > *,
.has-js .gs-faq-editorial:not(.is-visible) .gs-faq-editorial__item {
	opacity: 0;
	transform: translateY(1rem);
}

.gs-faq-editorial__intro > *:nth-child(2) { --gs-i: 1; }
.gs-faq-editorial__intro > *:nth-child(3) { --gs-i: 2; }
.gs-faq-editorial__intro > *:nth-child(4) { --gs-i: 3; }
.gs-faq-editorial__intro > *:nth-child(5) { --gs-i: 4; }
.gs-faq-editorial__item:nth-child(2) { --gs-i: 1; }
.gs-faq-editorial__item:nth-child(3) { --gs-i: 2; }
.gs-faq-editorial__item:nth-child(4) { --gs-i: 3; }
.gs-faq-editorial__item:nth-child(5) { --gs-i: 4; }
.gs-faq-editorial__item:nth-child(6) { --gs-i: 5; }

/* --- Адаптив --- */

@media (max-width: 1050px) {
	.gs-faq-editorial__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.gs-faq-editorial__intro {
		padding-bottom: 0;
	}

	.gs-faq-editorial__media {
		margin-top: var(--s-8);
	}
}

@media (max-width: 560px) {
	.gs-faq-editorial__question {
		font-size: var(--t-h4);
	}

	.gs-faq-editorial__contact {
		align-items: flex-start;
	}
}

/* --- Полоса «что дальше» под фотографией первого экрана ---
   Светлый язычок слева со скруглением с одной стороны, справа
   тёмное поле с линией времени: узлы на оси, последний терракотовый —
   это результат, к которому ведёт стрелка. */

/* Полоса стоит под фотографией, на месте прежней полосы метрик,
   и слегка выступает влево за её край — светлый язычок должен
   зайти на границу светлой и тёмной плоскостей. */
.gs-hero-editorial__next {
	position: relative;
	z-index: 3;
	display: grid;
	overflow: hidden;
	border-radius: var(--r-md);
	/* Одна опорная величина на всю ось: линия, наконечник и улыбка
	   считаются от неё. Ось идёт через центры знаков — знаки и есть
	   узлы маршрута, поэтому её высота складывается из поля дорожки,
	   поля шага и половины знака, а не задаётся отдельным числом. */
	--gs-icon: 3.5rem;
	--gs-steps-top: clamp(1.25rem, 2.5vw, 1.75rem);
	--gs-axis-top: calc(var(--gs-steps-top) + var(--s-2) + var(--gs-icon) / 2);
	--gs-axis-pad: clamp(1.5rem, 3vw, 2.5rem);
	--gs-axis-end: 4rem;
	grid-template-columns: minmax(15rem, 0.32fr) minmax(0, 1fr);
	/* Наезжает на нижний край фотографии — ту же роль играла полоса
	   метрик, на месте которой полоса стоит. */
	margin-top: calc(-1 * clamp(1.75rem, 3.5vw, 3.5rem));
	margin-left: calc(-1 * clamp(2rem, 7vw, 8rem));
	/* Полоса лежит на тёмной плоскости того же цвета и без контура
	   растворяется в ней. Взят line-control-deep, а не line-deep:
	   на одинаковом фоне 18%% белого — это волос, который не читается. */
	border: 1px solid var(--c-line-control-deep);
	background: var(--gs-block-dark);
}

.gs-hero-editorial__next-intro {
	/* Указатель: правый край сходится в остриё и показывает на шаги.
	   Ширина острия вынесена в переменную — от неё же считается
	   правый отступ, иначе текст лёг бы на скос. */
	--gs-point: 1.75rem;
	display: grid;
	align-content: center;
	gap: var(--s-2);
	padding: clamp(1.25rem, 2.5vw, 2rem) calc(clamp(1.5rem, 3vw, 2.5rem) + var(--gs-point)) clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
	border-radius: var(--r-md) 0 0 var(--r-md);
	background: var(--gs-block-soft);
	clip-path: polygon(0 0, calc(100% - var(--gs-point)) 0, 100% 50%, calc(100% - var(--gs-point)) 100%, 0 100%);
}

.gs-hero-editorial__next-eyebrow {
	margin: 0;
	color: var(--c-blue-deep);
	font-size: var(--t-eyebrow);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gs-hero-editorial__next-heading {
	margin: 0;
	color: var(--c-ink);
	font-size: var(--t-h3);
	font-weight: 700;
	line-height: 1.2;
}

.gs-hero-editorial__next-track {
	position: relative;
	display: grid;
	padding: var(--gs-steps-top) var(--gs-axis-pad) clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	grid-template-columns: repeat(var(--gs-step-count, 3), minmax(0, 1fr));
	list-style: none;
}

/* Ось со стрелкой: линия и наконечник из границ, без SVG. Оба центра
   сведены через translateY(-50%) — иначе линия центрируется по своей
   высоте, наконечник по своей, и стык уезжает на доли пикселя. */
.gs-hero-editorial__next-track::before {
	position: absolute;
	top: var(--gs-axis-top);
	right: calc(var(--gs-axis-pad) + var(--gs-axis-end));
	left: calc(var(--gs-axis-pad) + var(--s-2));
	height: 2px;
	background: var(--c-on-deep);
	content: "";
	transform: translateY(-50%);
}

.gs-hero-editorial__next-track::after {
	position: absolute;
	top: var(--gs-axis-top);
	right: calc(var(--gs-axis-pad) + var(--gs-axis-end));
	width: 0.6rem;
	height: 0.6rem;
	border-top: 2px solid var(--c-on-deep);
	border-right: 2px solid var(--c-on-deep);
	content: "";
	transform: translate(1px, -50%) rotate(45deg);
}

/* Улыбка отсчитывается от дорожки, как линия и наконечник, поэтому
   лежит с ней в одной обёртке: от всей полосы она уезжала в светлый
   язычок, как только тот вставал не сбоку, а сверху. */
.gs-hero-editorial__next-route {
	position: relative;
	min-width: 0;
}

/* Улыбка стоит за наконечником — то, к чему ведёт весь маршрут. */
.gs-hero-editorial__next-smile {
	position: absolute;
	top: var(--gs-axis-top);
	right: var(--gs-axis-pad);
	display: block;
	color: var(--c-on-deep);
	transform: translateY(-50%);
}

.gs-hero-editorial__next-smile .gs-icon,
.gs-hero-editorial__next-smile .gs-editable-icon {
	display: block;
	width: 2.6rem;
	height: 2.6rem;
}

.gs-hero-editorial__next-step {
	position: relative;
	display: flex;
	min-width: 0;
	gap: var(--s-4);
	align-items: flex-start;
	padding: var(--s-2) var(--s-5) var(--s-2) var(--s-2);
	border-radius: var(--r-sm);
}

.gs-hero-editorial__next-step + .gs-hero-editorial__next-step {
	padding-left: var(--s-5);
	border-left: 1px solid var(--c-line-deep);
}

.gs-hero-editorial__next-step,
.gs-hero-editorial__next-icon {
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
		color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* Знак шага — тоже растр: на тёмной карточке он должен быть белым. */
.gs-hero-editorial__next-icon img {
	filter: brightness(0) invert(1);
}

@media (hover: hover) {
	/* Шаги не кликабельны: наведение подсвечивает шаг, но не обещает
	   перехода — ни курсора, ни подъёма, ни тени. Теплеет знак и узел
	   на оси, чтобы взгляд связал кружок с подписью под ним. */
	.gs-hero-editorial__next-step:hover {
		background: color-mix(in srgb, var(--c-on-deep) 7%, transparent);
	}

	.gs-hero-editorial__next-step:hover .gs-hero-editorial__next-icon {
		border-color: var(--c-accent-on-deep);
	}
}

/* Знак стоит на оси и закрывает её собой: отдельный узел-кружок на
   линии, проходящей сквозь знак, был бы второй меткой того же места.
   Фон — цвет полосы, иначе линия прошла бы сквозь знак насквозь. */
.gs-hero-editorial__next-icon {
	display: grid;
	width: var(--gs-icon);
	height: var(--gs-icon);
	flex: 0 0 var(--gs-icon);
	place-items: center;
	border: 1.5px solid var(--c-line-control-deep);
	border-radius: var(--r-full);
	background: var(--gs-block-dark);
	color: var(--c-on-deep);
}

/* Последний шаг — результат, к которому ведёт стрелка */
.gs-hero-editorial__next-step:last-child .gs-hero-editorial__next-icon {
	border-color: var(--c-accent-cta);
}

.gs-hero-editorial__next-icon .gs-icon,
.gs-hero-editorial__next-icon .gs-editable-icon {
	display: block;
	width: 1.9rem;
	height: 1.9rem;
}

.gs-hero-editorial__next-text {
	display: grid;
	min-width: 0;
	gap: var(--s-1);
}

.gs-hero-editorial__next-text strong {
	color: var(--c-on-deep);
	font-size: var(--t-sm);
	font-weight: 700;
	line-height: 1.2;
}

.gs-hero-editorial__next-desc {
	max-width: 22ch;
	color: var(--c-on-deep-2);
	font-size: var(--t-xs);
}

/* Три шага в ряд: знак сбоку от подписи съедал колонку — при ширине
   колонки 142px на текст оставалось 29px, и подписи лезли под знак
   соседа. Поэтому знак стоит над подписью. Больше на оси ничего не
   стоит: номера шагов сняты, и линия идёт от знака к знаку сплошной. */
@media (min-width: 641px) {
	.gs-hero-editorial__next {
		--gs-icon: 3rem;
	}

	.gs-hero-editorial__next-step {
		flex-direction: column;
		gap: var(--s-3);
		padding: var(--s-2);
	}

	.gs-hero-editorial__next-step + .gs-hero-editorial__next-step {
		padding-left: var(--s-4);
	}

	.gs-hero-editorial__next-icon .gs-icon,
	.gs-hero-editorial__next-icon .gs-editable-icon {
		width: 1.6rem;
		height: 1.6rem;
	}

	.gs-hero-editorial__next-desc {
		max-width: none;
	}
}

@media (max-width: 980px) {
	.gs-hero-editorial__next {
		grid-template-columns: minmax(0, 1fr);
		margin-left: 0;
		/* В одну колонку наезд перекрыл бы лицо на снимке. */
		margin-top: var(--s-6);
	}

	/* Указатель разворачивается вниз: шаги теперь под табличкой,
	   а не справа от неё. Остриё то же, только грань другая. */
	.gs-hero-editorial__next-intro {
		padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem) calc(clamp(1.25rem, 2.5vw, 2rem) + var(--gs-point));
		border-radius: var(--r-md) var(--r-md) 0 0;
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--gs-point)), 50% 100%, 0 calc(100% - var(--gs-point)));
	}
}

@media (max-width: 640px) {
	.gs-hero-editorial__next-track {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--s-6);
	}

	/* Ось не исчезает, а разворачивается вертикально: она идёт
	   через центры знаков — те же узлы, что и на широком экране. */
	.gs-hero-editorial__next {
		--gs-axis-x: calc(var(--gs-axis-pad) + var(--gs-icon) / 2);
	}

	/* Знаки выстроены по одному левому краю: поле первого шага было
	   меньше, чем у соседей, и ось шла мимо его центра. */
	.gs-hero-editorial__next-step {
		padding-left: 0;
	}

	.gs-hero-editorial__next-track {
		padding-bottom: 5rem;
	}

	.gs-hero-editorial__next-track::before {
		top: var(--gs-axis-top);
		right: auto;
		bottom: 4.25rem;
		left: var(--gs-axis-x);
		width: 2px;
		height: auto;
		transform: translateX(-50%);
	}

	/* Наконечник доворачивается вниз — туда же, куда ведёт линия. */
	.gs-hero-editorial__next-track::after {
		top: auto;
		right: auto;
		bottom: 3.6rem;
		left: var(--gs-axis-x);
		transform: translate(-50%, 0) rotate(135deg);
	}

	.gs-hero-editorial__next-smile {
		top: auto;
		right: auto;
		bottom: var(--s-4);
		left: var(--gs-axis-x);
		transform: translateX(-50%);
	}

	.gs-hero-editorial__next-step + .gs-hero-editorial__next-step {
		padding-left: 0;
		padding-top: var(--s-6);
		border-left: 0;
		border-top: 1px solid var(--c-line-deep);
	}
}

/* --- Попап заявки -------------------------------------------------------
   Нативный <dialog>: фокус-ловушка, Esc и инертный фон достаются от браузера,
   а не от нашего кода. Глубина — плоскость и одна тень, как у полосы метрик;
   backdrop-filter в системе запрещён. */

.gs-modal {
	/* Стили автора перебивают браузерные, поэтому position задаём явно:
	   любое другое значение вынет модальное окно из фиксированного слоя,
	   оно окажется в потоке в конце документа, и showModal() подтянет
	   к нему страницу — то есть прокрутит её вверх. */
	position: fixed;
	inset: 0;
	margin: auto;
	max-width: min(34rem, calc(100vw - 2rem));
	width: 100%;
	max-height: min(94vh, 56rem);
	padding: 0;
	border: 0;
	border-radius: var(--r-md);
	background: var(--c-bg);
	color: var(--c-ink);
	box-shadow: var(--sh-md);
	overflow: visible;
}

/* Фон под окном не должен уезжать вместе с пальцем. Ширину исчезнувшей
   полосы прокрутки возвращаем отступом: иначе страница под окном скачком
   становится на 15px шире, и это видно по шапке. */
body.popup-open {
	overflow: hidden;
	padding-right: var(--sb, 0px);
}

.gs-modal::backdrop {
	background: rgba(15, 44, 64, 0.62);
}

.gs-modal[open] {
	animation: gs-modal-in var(--dur) var(--ease) both;
}

.gs-modal[open]::backdrop {
	animation: gs-modal-fade var(--dur) var(--ease) both;
}

@keyframes gs-modal-in {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}
}

@keyframes gs-modal-fade {
	from {
		opacity: 0;
	}
}

.gs-modal__panel {
	display: grid;
	gap: var(--s-3);
	max-height: min(94vh, 56rem);
	padding: clamp(1.35rem, 3.2vw, 2.25rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Полоса прокрутки внутри окна режет композицию пополам. Прокрутка
	   остаётся, исчезает только её хром. */
	scrollbar-width: none;
}

.gs-modal__panel::-webkit-scrollbar {
	display: none;
}

/* Полосы нет — значит нужен другой сигнал, что содержимое продолжается.
   Тени у кромок появляются сами: слои `local` уезжают вместе с текстом и
   открывают лежащие под ними `scroll`-градиенты. Ничего не показывают,
   когда прокручивать нечего. */
.gs-modal__panel {
	background:
		linear-gradient(var(--c-bg) 30%, rgba(255, 255, 255, 0)) top / 100% 1.75rem no-repeat local,
		linear-gradient(rgba(255, 255, 255, 0), var(--c-bg) 70%) bottom / 100% 1.75rem no-repeat local,
		radial-gradient(farthest-side at 50% 0, rgba(15, 44, 64, 0.16), rgba(15, 44, 64, 0)) top / 100% 0.7rem no-repeat scroll,
		radial-gradient(farthest-side at 50% 100%, rgba(15, 44, 64, 0.16), rgba(15, 44, 64, 0)) bottom / 100% 0.7rem no-repeat scroll;
}

.gs-modal__title {
	max-width: 16ch;
	margin: 0;
	font-size: var(--t-h3);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.gs-modal__lead {
	max-width: 42ch;
	margin: 0;
	color: var(--c-ink-2);
	font-size: var(--t-sm);
	line-height: 1.55;
}

.gs-modal .gs-lead-form {
	/* Без display:grid объявленный gap ничего не держал, а отступ у полей
	   в окне снят — поля слипались в одну колонну. */
	display: grid;
	gap: var(--s-3);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* Пустая строка статуса — тоже ячейка сетки: без неё внизу висел лишний шаг. */
.gs-modal .gs-form-status:empty {
	display: none;
}

.gs-modal .gs-lead-form__submit {
	width: 100%;
}

/* Доказательство рядом с просьбой: срок ответа, гарантия, подарок. */
.gs-modal__facts {
	display: grid;
	gap: var(--s-2);
	margin: 0;
	padding: var(--s-3) 0 0;
	border-top: 1px solid var(--c-line);
	list-style: none;
}

.gs-modal__facts li {
	display: grid;
	grid-template-columns: 1.25rem 1fr;
	gap: var(--s-3);
	align-items: center;
	color: var(--c-ink-2);
	font-size: var(--t-sm);
	line-height: 1.4;
}

.gs-modal__facts .gs-icon {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--c-blue-deep);
}

.gs-modal__contacts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3) var(--s-5);
	align-items: center;
	justify-content: space-between;
	padding-top: var(--s-3);
	border-top: 1px solid var(--c-line);
}

.gs-modal__phone {
	min-height: var(--tap);
	display: inline-flex;
	align-items: center;
	color: var(--c-ink);
	font-size: 1.125rem;
	font-weight: 650;
	text-decoration: none;
	border-bottom: 1.5px solid currentColor;
}

.gs-modal__messengers {
	display: flex;
	gap: var(--s-2);
}

.gs-modal__messengers a {
	display: grid;
	place-items: center;
	width: var(--tap);
	height: var(--tap);
	border-radius: var(--r-sm);
	background: var(--c-bg-blue);
}

.gs-modal__messengers img,
.gs-modal__messengers svg {
	width: 1.5rem;
	height: 1.5rem;
}

.gs-modal__close {
	position: absolute;
	z-index: 3;
	top: 0.75rem;
	right: 0.75rem;
	width: var(--tap);
	height: var(--tap);
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: var(--r-full);
	background: var(--c-bg-alt);
	color: var(--c-ink);
	cursor: pointer;
	transition: background var(--dur) var(--ease);
}

.gs-modal__close:hover {
	background: var(--c-bg-blue);
}

.gs-modal__close span {
	position: relative;
	display: block;
	width: 1rem;
	height: 1rem;
}

.gs-modal__close span::before,
.gs-modal__close span::after {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	content: "";
}

.gs-modal__close span::before {
	transform: rotate(45deg);
}

.gs-modal__close span::after {
	transform: rotate(-45deg);
}

/* На узком экране окно ведёт себя как нижняя шторка: большой палец достаёт
   до кнопки, а не тянется к центру экрана. */
@media (max-width: 560px) {
	.gs-modal {
		width: 100%;
		max-width: 100%;
		max-height: 94vh;
		margin: auto auto 0;
		border-radius: var(--r-md) var(--r-md) 0 0;
	}

	.gs-modal__panel {
		border-radius: var(--r-md) var(--r-md) 0 0;
	}

	.gs-modal__panel {
		max-height: 94vh;
		padding-bottom: max(var(--s-6), env(safe-area-inset-bottom));
	}

	.gs-modal[open] {
		animation-name: gs-modal-sheet;
	}
}

@keyframes gs-modal-sheet {
	from {
		transform: translateY(2rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-modal[open],
	.gs-modal[open]::backdrop {
		animation: none;
	}
}

/* Поля и кнопка внутри окна. Базовые правила `.gs-field` достались от прошлой
   темы: прозрачная рамка, нулевой радиус и розовая кнопка `--gs-coral`.
   В редакционных блоках они перекрыты контейнером, а окно — новый контейнер,
   поэтому системный вид полей задаём здесь и только токенами. */

.gs-modal .gs-field {
	margin-bottom: 0;
}

/* Подпись живёт в плейсхолдере, поэтому он не может быть бледным шумом:
   c-ink-3 даёт 5.19:1 на белом — читается, но не спорит с введённым текстом. */
.gs-modal .gs-field input::placeholder {
	color: var(--c-ink-3);
	opacity: 1;
}

.gs-modal .gs-field input,
.gs-modal .gs-field select {
	min-height: 3.25rem;
	padding: 0.75rem 0.95rem;
	border: 1.5px solid var(--c-line-control);
	border-radius: var(--r-sm);
	background: var(--c-bg);
	color: var(--c-ink);
	font-size: var(--t-body);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.gs-modal .gs-field input:focus-visible,
.gs-modal .gs-field select:focus-visible {
	border-color: var(--c-blue-deep);
	outline: 3px solid var(--c-focus);
	outline-offset: 2px;
}

.gs-modal .gs-field input[aria-invalid="true"],
.gs-modal .gs-field select[aria-invalid="true"] {
	border-color: var(--c-error);
}

.gs-modal .gs-consent {
	gap: var(--s-3);
	color: var(--c-ink-2);
	font-size: var(--t-xs);
	line-height: 1.45;
}

.gs-modal .gs-consent input {
	accent-color: var(--c-accent-cta);
}

.gs-modal .gs-button {
	min-height: 3.75rem;
	border-radius: var(--r-sm);
	background: var(--c-accent-cta);
	color: var(--c-bg);
	font-size: 1.125rem;
	font-weight: 650;
}

.gs-modal .gs-button:hover {
	background: var(--c-accent-cta-hover);
}

.gs-modal .gs-form-status {
	margin: 0;
	font-size: var(--t-sm);
}

/* Кнопка записи в мобильном меню: до сих пор меню отдавало только телефон. */
.gs-menu__cta {
	justify-self: start;
	margin-bottom: var(--s-4);
}