/* главная Yookey — сервис подбора. Поверх rating.css: rt-tiles, rt-flow, rt-links, rt-cases, rt-trust, rt-faq */



/* мастер подбора */



/* направления — равные карточки с числами */


.yh-dirs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }



.yh-dir__name { font-size: 16px; font-weight: 700; }



@media (max-width: 1000px) {

  
  
  
.yh-dirs { grid-template-columns: repeat(2, minmax(0, 1fr)); }


}


@media (max-width: 700px) {

  
  
  
  
  
.yh-dirs { grid-template-columns: minmax(0, 1fr); }


}



/* ===== лендинговая структура: преимущества, возможности с макетами, финальный призыв ===== */



/* в макете подбора последняя плитка — обычная (в настоящем подборе последняя — «пропустить») */



/* ===== концепция «подходящие, а не лучшие» ===== */



.rt-cases__item[hidden] { display: none; }



/* ===== версия 4 ===== */



/* что ждёт функций — пунктир только в превью целевого состояния */



/* ===== последовательный подбор: вопрос за вопросом ===== */



/* ===== блок 2: подходящие, а не лучшие ===== */



/* ===== блок 3: проекты ===== */



/* ===== блок 4: рейтинги по направлениям ===== */



/* ===== блок 5: подборки под задачи ===== */



/* ===== блок 6: сравнение ===== */



/* ===== блок 7: как работает ===== */



/* ===== v5: лёгкая продающая главная ===== */



.yh-sec__title { max-width: 24ch; margin: 0 0 32px; font-size: clamp(24px, 2.8vw, 34px); }



/* ===== v6: экраны 1–2 ===== */


.yh6 { padding-bottom: 96px; }


.yh-s1 { display: flex; flex-direction: column; align-items: center; min-height: min(72vh, 640px); justify-content: center; padding-top: 24px; text-align: center; }


.yh-s1__title { margin: 0; max-width: 15ch; font-size: clamp(34px, 5vw, 60px); line-height: 1.04; }


.yh-s1__lead { margin: 20px 0 0; max-width: 46ch; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; color: var(--rt-steel); }


.yh-s1__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }


.yh-s1__actions .rt-btn { min-height: 52px; padding: 0 24px; font-size: 15px; }


.yh-s1__dirs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 820px; margin: 36px 0 0; padding: 0; list-style: none; }


.yh-dchip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--rt-paper); font-size: 14px; font-weight: 500; color: var(--rt-ink); transition: background .16s, color .16s; }


.yh-dchip:hover { background: var(--rt-ink); color: #fff; }



.yh-s2 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: clamp(48px, 6vw, 88px); }



/* окно подбора */



body.yh-launch .yh-dchip[data-dir]:not([data-dir="seo"]) { background: transparent; box-shadow: inset 0 0 0 0 transparent; color: var(--rt-steel); }


@media (max-width: 1000px) {
 
.yh-s2 { grid-template-columns: minmax(0, 1fr); }
 
}


@media (max-width: 700px) {
 
.yh-s1 { min-height: 0; align-items: flex-start; text-align: left; padding-top: 32px; }
 
.yh-s1__actions, .yh-s1__dirs { justify-content: flex-start; }
 
.yh-s1__actions .rt-btn { flex: 1; justify-content: center; }
 
}



/* ===== экраны 3–5 ===== */


.yh-s3, .yh-s5 { margin-top: clamp(72px, 8vw, 120px); }


  


/* ===== экраны 6–7: доверие и финал ===== */


.yh-s6 { margin-top: clamp(72px, 8vw, 120px); }


.yh-s6 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 64px); align-items: center; }



@media (max-width: 1000px) {
 
.yh-s6 { grid-template-columns: minmax(0, 1fr); }
 
}



/* ===== фирменный стиль yookey: шлифовка экранов =====
   Цвета — токены сайта: --rt-brand синий только для бренда и выбора, --rt-signal красный для действий-ссылок и наведения,
   --rt-ok зелёный для позитивных цифр. Без обводок: разделение заливками, тенями и воздухом.
   Шрифты: Unbounded 600 — заголовки, Manrope 400/500/700 — текст (веса 600 у Manrope нет). */



.yh6 .yh-sec__title { font-weight: 600; }


.yh6 b { font-weight: 700; }


.yh6 .yh-dchip { font-weight: 500; }



/* экран 1: рябь от касания — фирменная идея «отзывчивости», очень тихо, только фоном */


.yh-s1 { position: relative; isolation: isolate; }


.yh-s1::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 46%; width: min(1100px, 120vw); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-radial-gradient(circle at center, transparent 0 46px, rgba(47,76,140,.07) 47px 48px);
  -webkit-mask: radial-gradient(circle at center, #000 0, rgba(0,0,0,.6) 28%, transparent 62%); mask: radial-gradient(circle at center, #000 0, rgba(0,0,0,.6) 28%, transparent 62%);
  pointer-events: none; }


.yh-s1__title { letter-spacing: -.035em; }


.yh-dchip { background: var(--rt-paper); box-shadow: 0 1px 2px rgba(16,20,28,.05); }


.yh-dchip:hover { background: var(--rt-brand-soft, #EAF0FB); color: var(--rt-brand); }



/* экран 2 */



.yh6 .rt-go:hover { color: var(--rt-signal, #D93A2E); }



/* экран 3: позитивные цифры — зелёным, подложки из палитры сайта */



/* экран 4 */



/* экран 5 */



/* экран 6: акцент цитаты — фирменный синий */



/* экран 7: тёмный блок с той же рябью */



.yh-s1__title { max-width: 20ch; }


.yh-s1__title .rt-nowrap { white-space: nowrap; }



/* ===== согласование с SEO-страницей и свои иконки ===== */


.yh6 h2, .yh6 .yh-sec__title { font-family: Unbounded, sans-serif; font-weight: 600; letter-spacing: -.03em; }



.yh-s6 { display: block; margin-top: clamp(72px, 8vw, 120px); }



.yh-dchip--all { background: transparent; box-shadow: none; color: var(--rt-steel); }


.yh-dchip--all:hover { background: transparent; color: var(--rt-signal, #D93A2E); }



/* ===== пакет правок ===== */



/* доверие на главной — без закрепления и стопки: три факта рядом */









/* ===== согласование со стилями SEO-страницы (токены rating.css) =====
   заголовки секций 24/32 (20/28 на узких), лиды 16, карточки — радиус --rt-r-card и тени --rt-sh-card / --rt-sh-hover,
   кнопки — базовые rt-btn (48 px, 14 px), чипы — Manrope 400 без теней, отступ между секциями 80 px.
   Исключение одно: H1 главной крупнее H1 рейтинга — это заглавный экран лендинга. */


.yh6 .yh-s1__title { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -.03em; max-width: 22ch; }


.yh6 .yh-s1__lead { font-size: 17px; }


.yh6 .yh-sec__title { font-size: 24px; line-height: 32px; letter-spacing: -.02em; margin-bottom: 8px; max-width: none; }



.yh6 .yh-s2, .yh6 .yh-s3, .yh6 .yh-s5, .yh6 .yh-s6 { margin-top: 80px; }


.yh6 .yh-s1__actions .rt-btn { min-height: 48px; padding: 0 20px; font-size: 14px; }



.yh6 .yh-dchip { min-height: 36px; padding: 0 14px; font-weight: 400; box-shadow: none; }



/* логотипы компаний рейтинга */



@media (max-width: 900px) {
 
.yh6 .yh-sec__title { font-size: 20px; line-height: 28px; }
  
.yh6 .yh-s2, .yh6 .yh-s3, .yh6 .yh-s5, .yh6 .yh-s6 { margin-top: 56px; }
 
}







/* ===== визуальный пакет ===== */


/* 1–2. первый экран: рябь расходится от кнопок, строка доверия — аргументами с галочками */


.yh6 .yh-s1::before { top: 64%; }



/* 3. второй экран: без серой подложки, карточка в стиле карточки рейтинга */



/* 4. проекты: одна нейтральная подложка, логотипы — отдельной строкой */



/* 5. рейтинги — компактный список в два столбца */



/* 6. доверие без номеров; финал — светлый */





/* ===== все направления ===== */



.yh-picked-wrap { position: sticky; bottom: 16px; z-index: 30; margin-top: 24px; }


.yh-picked-wrap .rt-picked[hidden] { display: none; }



/* ===== боевая версия ===== */


.rt-tile.is-off { opacity: .45; cursor: default; }


.rt-tile.is-off:hover { background: var(--rt-bg); }



/* ===== для заказчика: ориентир, возврат, поделиться, руководство, как зарабатываем ===== */


.yh-resume { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; margin: 16px 0 0; padding: 10px 16px; border-radius: var(--rt-r-pill, 999px); background: var(--rt-paper); box-shadow: var(--rt-sh-card); font-size: 14px; color: var(--rt-steel); }


.yh-resume[hidden] { display: none; }


.yh-resume [data-resume-labels] { color: var(--rt-ink); font-weight: 500; }



/* ===== иерархия: один сильный объект, остальное тише ===== */


/* первый экран — по левому краю, как шапка SEO-рейтинга; рябь тише и уходит вправо за кнопки */


.yh6 .yh-s1 { align-items: flex-start; text-align: left; min-height: min(64vh, 560px); }


.yh6 .yh-s1__title, .yh6 .yh-s1__lead { margin-left: 0; }


.yh6 .yh-s1__lead { max-width: 52ch; }


.yh6 .yh-s1__actions { justify-content: flex-start; }


.yh6 .yh-s1::before { left: 72%; top: 58%; width: min(980px, 110vw);
  background: repeating-radial-gradient(circle at center, transparent 0 46px, rgba(47,76,140,.05) 47px 48px); }



.yh6 .yh-resume { justify-content: flex-start; }



/* второй экран: 01/02/03 вместо иконок, карточка воздушнее, одно действие */



/* проекты: исходное число нейтральное, зелёным — итог и прирост; воздух между цифрой и названием */



/* рейтинги: описание направления и статус приёма */



/* доверие: три колонки с тонкими разделителями вместо плиток */











/* финал: рябь — водяной знак, второй уровень тише; строка для агентств заметнее */



/* телефон: направления строкой с прокруткой, пример короче, доверие строками */





.yh6 .yh-s1 { padding-top: clamp(40px, 6vw, 80px); }


@media (max-width: 700px) {

  
  
  
  
.yh6 .yh-s1__actions { flex-direction: column; align-items: stretch; width: 100%; }

  
.yh6 .yh-s1__actions .rt-btn { justify-content: center; }


}



/* ===== финальная шлифовка: шкала размеров, отступы, состояния =====
   Текст: 12 — метки и статусы, 13 — служебные подписи, 14 — вторичный текст и ссылки, 16 — основной текст и заголовки карточек,
   17 — лид первого экрана, 24 — H2, 28 — цифры проектов, 44 — H1. Радиусы: 6 — логотипы, 10 — вложенные плашки, 12 — элементы управления, 16 — карточки, pill — метки.
   Отступы: 8 / 12 / 16 / 24 / 32, между секциями 80 (на узких 56). */



/* ритм отступов внутри блоков */


.yh6 .yh-s2 { column-gap: 64px; }



/* цели нажатия: текстовые ссылки — не меньше 32 px на компьютере и 44 px на телефоне, без сдвига вёрстки */


.yh6 .rt-go { display: inline-flex; align-items: center; padding-block: 6px; margin-block: -6px; }


@media (max-width: 700px) {
 
.yh6 .rt-go { padding-block: 12px; margin-block: -12px; }
 
}



/* состояния: наведение, нажатие, фокус с клавиатуры (класс page--keyboard ставит шаблон), недоступно */


.yh6 .rt-btn { transition: background .16s, box-shadow .16s, transform .08s; }


.yh6 .rt-btn:active { transform: translateY(1px); }


.yh6 .rt-go:hover { color: var(--rt-signal, #D93A2E); }






.rt-tile.is-off .rt-tile__title::after { content: " · скоро"; color: var(--rt-muted); font-weight: 400; }



/* меньше движения — для тех, кто так настроил систему */


@media (prefers-reduced-motion: reduce) {

  
.yh6 * { transition: none !important; animation: none !important; }


}






/* ===== компоненты SEO-страницы на главной ===== */


/* шаги «Задача / Отрасль / Бюджет» — rt-flow, в колонку */



/* настоящая карточка рейтинга вместо своей */



.yh6 .yh-list-one { margin: 0; padding: 0; list-style: none; }



/* лента проектов: та же, что кейсы на SEO-странице */


.yh6 .yh-s3 { margin-top: 80px; }


.yh6 .yh-s3 .rt-section__lead { margin-top: 8px; }


.yh6 .rt-case__agency .rt-logo { width: 24px; height: 24px; margin-right: 8px; border-radius: var(--rt-r-xs, 6px); object-fit: contain; vertical-align: middle; }


/* рейтинги — блок подборок */



/* финал — оформление rt-join: белый блок уходит в серый, без ряби */


.yh-final-wrap { margin-top: 80px; }


.yh6 .yh-final { margin-top: 0; }


.yh6 .yh-final .rt-join__title { margin: 0; font-family: Unbounded, sans-serif; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.02em; }


.yh-agency { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 32px 0 64px; font-size: 15px; color: var(--rt-steel); }


.yh-agency b { color: var(--rt-ink); }


.yh-agency .rt-join__status { flex-basis: 100%; }


.yh-agency .rt-go { font-weight: 700; color: var(--rt-ink); }


/* окно подбора в оболочке rt-dialog */



/* второй экран как на SEO-странице: шаги в ряд, под ними карточка рейтинга во всю ширину */


.yh6 .yh-s2 { display: block; }



/* первый экран — без лишней высоты: следующий экран выглядывает снизу и зовёт прокрутить */


.yh6 .yh-s1 { min-height: 0; padding-bottom: 8px; }



/* первый экран: справа — компании рейтинга (тихо, только на широких экранах) */


.yh6 .yh-s1 { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; }


.yh6 .yh-s1 > *:not(.yh-s1__side) { grid-column: 1; }



@media (max-width: 1000px) {
 
.yh6 .yh-s1 { display: flex; }
  
}



/* ===== первый экран: компании на орбитах ряби вокруг задачи =====
   Каждое кольцо медленно вращается со своей скоростью, логотипы остаются ровными (обратный поворот).
   Ближе к центру — больше проектов под задачу. При «уменьшить движение» — стоят на месте. */


.yh6 .yh-s1::before { display: none; }


.yh-orbit { --size: 460px; position: relative; grid-column: 2; grid-row: 1 / span 6; align-self: center; width: var(--size); height: var(--size); margin: 0;
  background: repeating-radial-gradient(circle at center, transparent 0 56px, rgba(47,76,140,.07) 57px 58px);
  -webkit-mask: radial-gradient(circle, #000 0 58%, transparent 72%); mask: radial-gradient(circle, #000 0 58%, transparent 72%); }


.yh-orbit__core { position: absolute; left: 50%; top: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 132px; padding: 14px 10px; transform: translate(-50%, -50%); border-radius: 50%; aspect-ratio: 1; justify-content: center; background: var(--rt-ink); color: #fff; text-align: center; box-shadow: 0 18px 40px -18px rgba(20,22,28,.5); }


.yh-orbit__core span { font-size: 11px; color: rgba(255,255,255,.6); }


.yh-orbit__core b { font-size: 13px; line-height: 1.25; font-weight: 700; }



.yh-orbit__item { position: absolute; left: 0; top: 0; width: 48px; height: 48px; margin: -24px 0 0 -24px; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); }


.yh-orbit__item .rt-logo { display: block; width: 48px; height: 48px; border-radius: 50%; object-fit: contain; background: var(--rt-paper); box-shadow: var(--rt-sh-card), 0 0 0 4px var(--rt-bg); animation: yhSpin var(--d) linear infinite reverse; transition: box-shadow .16s; }



.yh-orbit__item:hover .rt-logo { box-shadow: var(--rt-sh-hover), 0 0 0 4px var(--rt-brand-soft, #EAF0FB); }


.yh-orbit:hover .rt-logo { animation-play-state: paused; }


.yh-orbit__note { position: absolute; left: 0; right: 0; bottom: 6px; z-index: 2; margin: 0; text-align: center; font-size: 13px; color: var(--rt-steel); }


@keyframes yhSpin { to { transform: rotate(360deg); } }


@media (prefers-reduced-motion: reduce) {
 
.yh-orbit__item .rt-logo { animation: none; }
 
}


@media (max-width: 1100px) {
 
.yh-orbit { --size: 380px; }
     
.yh-orbit__core { width: 112px; }
 
}


@media (max-width: 1000px) {
 
.yh-orbit { display: none; }
 
}



/* ===== второй экран: карточки «что подсвечивается», как «Как оценить результаты» ===== */



.yh6 .yh-s1 > *:not(.yh-s1__side):not(.yh-orbit) { grid-column: 1; }


.yh-orbit { -webkit-mask: none; mask: none; background: none; }


.yh-orbit::before { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle at center, transparent 0 56px, rgba(47,76,140,.07) 57px 58px);
  -webkit-mask: radial-gradient(circle, #000 0 56%, transparent 71%); mask: radial-gradient(circle, #000 0 56%, transparent 71%); pointer-events: none; }


.yh-orbit__note { bottom: -8px; }



.yh6 .yh-s1 > .yh-orbit { grid-column: 2; grid-row: 1 / span 7; justify-self: end; }


@media (min-width: 1101px) {

  
.yh-orbit { --size: 420px; }

   
   
  
.yh6 .yh-s1 { column-gap: 32px; }


}



/* ===== орбиты: логотипы как на SEO-странице, кольца по осям, светлый центр ===== */


.yh-orbit::before { display: none; }



.yh-orbit__item { width: 44px; height: 44px; margin: -22px 0 0 -22px; }


.yh-orbit__item .rt-logo { width: 44px; height: 44px; margin: 0; padding: 4px; border-radius: var(--rt-r-sm, 8px); background: var(--rt-paper); box-shadow: var(--rt-sh-card); }



.yh-orbit__item:hover .rt-logo { box-shadow: var(--rt-sh-hover); }


.yh-orbit__core { width: 112px; padding: 0; background: var(--rt-paper); color: var(--rt-ink); box-shadow: var(--rt-sh-hover), 0 0 0 10px rgba(47,76,140,.06); }


.yh-orbit__core b { font-family: Unbounded, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--rt-brand); }



/* ===== второй экран: четыре карточки, последняя — результат ===== */



/* ===== рейтинги: наполненные карточки направлений ===== */



/* «Четыре шага» на главной — тот же компонент, без блока вопросов */


.yh6 .yh-steps4 { margin-top: 80px; }


/* отклик ряби от центра орбит */


.yh-orbit::after { content: ""; position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(47,76,140,.35); opacity: 0; pointer-events: none; }


.yh-orbit.is-pulse::after { animation: yhPulse 1.4s cubic-bezier(.2,.7,.2,1); }


@keyframes yhPulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.6); } }


@media (prefers-reduced-motion: reduce) {
 
.yh-orbit.is-pulse::after { animation: none; }
 
}



/* ===== орбиты v2: кольца стоят, компании переезжают между ними под задачу ===== */



.yh-orbit__layer { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: yhSpin 160s linear infinite; }


.yh-orbit__layer .yh-orbit__item { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); transition: transform 1.2s cubic-bezier(.4, 0, .2, 1), opacity .6s; }


.yh-orbit__layer .rt-logo { animation: yhSpin 160s linear infinite reverse; scale: 1; transition: scale .6s; }


.yh-orbit__layer .is-far { opacity: .6; }


.yh-orbit__layer .is-far .rt-logo { scale: .82; }


.yh-orbit:hover .yh-orbit__layer, .yh-orbit:hover .yh-orbit__layer .rt-logo { animation-play-state: paused; }


.yh-orbit__core { width: 124px; }


.yh-orbit__core span { font-size: 11px; color: var(--rt-steel); }


.yh-orbit__core b { font-size: 13px; transition: opacity .25s; }


.yh-orbit__core b.is-out { opacity: 0; }


@media (prefers-reduced-motion: reduce) {
 
.yh-orbit__layer, .yh-orbit__layer .rt-logo { animation: none; }
 
.yh-orbit__layer .yh-orbit__item { transition: none; }
 
}


@media (max-width: 1100px) {
 
.yh-orbit { scale: .86; transform-origin: right center; }
 
}



/* ===== колонка редактора ===== */



/* ===== сезонность над рейтингами ===== */



.yh-orbit__core { width: 136px; }
 
.yh-orbit__core b { font-size: 12px; padding: 0 8px; }



/* ===== первый экран v3: иерархия ===== */


/* заголовок — в две строки в той же колонке, за счёт размера */


.yh6 .yh-s1__title { font-size: clamp(30px, 2.75vw, 40px); line-height: 1.12; max-width: none; }


.yh6 .yh-s1__lead { margin-top: 16px; }


.yh6 .yh-s1__actions { margin-top: 28px; }


/* второй путь — ссылки на рейтинги, а не вторая кнопка */


.yh-s1__dirs-label { margin: 24px 0 8px; font-size: 13px; color: var(--rt-steel); }



/* волна при смене задачи: мягкая дуга расходится от центра и проходит по кольцам */


@property --yh-p { syntax: '<length>'; inherits: false; initial-value: 60px; }


@property --yh-turn { syntax: '<angle>'; inherits: false; initial-value: 0deg; }



/* центр: смена задачи — мягкое затухание с подъёмом */


.yh-orbit__core b { transition: opacity .3s, transform .3s; }


.yh-orbit__core b.is-out { opacity: 0; transform: translateY(4px); }



/* ===== кольца — линии SVG, которые реагируют на курсор ===== */


.yh-orbit__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }


.yh-orbit__svg path { fill: none; stroke: rgba(47,76,140,.16); stroke-width: 1; vector-effect: non-scaling-stroke; }


.yh-orbit__svg path:nth-child(3) { stroke: rgba(47,76,140,.12); }


.yh-orbit__svg path:nth-child(4) { stroke: rgba(47,76,140,.08); }


.yh-orbit::after { display: none; }



/* ===== первый экран: подпись под кнопкой, отступы ===== */


.yh-s1__note { margin: 10px 0 0; font-size: 13px; color: var(--rt-steel); }


.yh6 .yh-s1__dirs-label { margin-top: 28px; }



/* окно подбора — оболочка SEO-страницы: старые стили своей оболочки не нужны */



.rt-tile.is-off .rt-tile__title::after { content: none; }



/* ===== первый экран: компоновка и плотность ===== */


.yh6 .yh-s1 { display: grid; grid-template-columns: minmax(0, 1fr) 420px; column-gap: 56px; align-items: center; min-height: 0; padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(24px, 3vw, 40px); }


.yh6 .yh-s1 > .yh-orbit { grid-column: 2; grid-row: 1 / span 5; align-self: center; justify-self: center; margin: 0; }


.yh6 .yh-s1__title { font-size: clamp(30px, 2.75vw, 40px); }


.yh6 .yh-s1__lead { margin-top: 14px; max-width: 46ch; }


.yh6 .yh-s1__actions { margin-top: 24px; }


.yh6 .yh-s1__note { margin-top: 10px; max-width: 46ch; font-size: 13px; line-height: 1.5; color: var(--rt-steel); }


/* рейтинги одной строкой: подпись и ссылки без стрелок, только подчёркивание */



.yh6 .yh-s1__dirs-label { font-size: 14px; color: var(--rt-steel); }



/* орбита: подпись ближе к схеме */


.yh6 .yh-orbit__note { bottom: 0; }


@media (max-width: 1100px) {
 
.yh6 .yh-s1 { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 32px; }
 
.yh6 .yh-orbit { scale: .86; transform-origin: center; }
 
}


@media (max-width: 1000px) {
 
.yh6 .yh-s1 { display: block; padding-top: 24px; }
 
}


@media (max-width: 700px) {
  
.yh6 .yh-s1__dirs-label { flex: none; }
 
}



.yh6 .yh-s1__note { max-width: none; }



@media (max-width: 700px) {
  
.yh6 .yh-s1__dirs-label { flex-basis: 100%; }
 
.yh6 .yh-s1__note { max-width: 40ch; }
 
}


/* левая часть — одна колонка, выравнивается по центру орбит без растяжения строк сетки */


.yh6 .yh-s1 > .yh-s1__main { grid-column: 1; grid-row: 1; }


.yh6 .yh-s1 > .yh-orbit { grid-row: 1; }



/* ===== орбиты по рейтингам: три набора компаний, смена — мягкое появление по кольцам ===== */


.yh-orbit__layer .yh-orbit__item { opacity: 0; pointer-events: none; transition: transform 1.2s cubic-bezier(.4, 0, .2, 1), opacity .6s ease; }


.yh-orbit__layer .yh-orbit__item.is-on { opacity: 1; pointer-events: auto; }


.yh-orbit__layer .yh-orbit__item:not(.is-on) .rt-logo { scale: .7; }


.yh-orbit__layer .yh-orbit__item.is-on .rt-logo { scale: 1; transition: scale .6s ease; }


.yh-orbit__layer .yh-orbit__item.is-on:nth-child(6n+2) { transition-delay: .06s; }


.yh-orbit__layer .yh-orbit__item.is-on:nth-child(6n+3) { transition-delay: .12s; }


.yh-orbit__layer .yh-orbit__item.is-on:nth-child(6n+4) { transition-delay: .18s; }


.yh-orbit__layer .yh-orbit__item.is-on:nth-child(6n+5) { transition-delay: .24s; }


.yh-orbit__layer .yh-orbit__item.is-on:nth-child(6n) { transition-delay: .3s; }


.yh-orbit__ph { display: block; background: var(--rt-paper); }


.yh-orbit__core b { text-transform: none; }



/* ===== ссылки направлений — пилюли, как подборки на SEO-странице; текущая подсвечена и совпадает с орбитой ===== */



/* ===== центр орбиты: «линза» с кольцом-таймером до следующей смены ===== */


.yh6 .yh-orbit__core { width: 128px; background: radial-gradient(circle at 50% 35%, #fff 0%, #fff 55%, var(--rt-brand-soft, #EAF0FB) 100%); box-shadow: 0 1px 2px rgba(20,22,28,.06), 0 14px 32px -16px rgba(47,76,140,.35); }



/* ===== первый экран v8: ритм и размеры =====
   Колонка текста: H1 40/46 → 16 → лид 17/26 → 32 → кнопка 48 → 12 → подпись 13/20 → 32 → рейтинги 32.
   Орбиты 380 — по высоте текстовой колонки; между колонками 64. */


.yh6 .yh-s1 { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 64px; padding-top: 56px; padding-bottom: 48px; }


.yh6 .yh-s1__title { font-size: clamp(30px, 2.75vw, 40px); line-height: 1.15; }


.yh6 .yh-s1__lead { margin-top: 16px; font-size: 17px; line-height: 26px; }


.yh6 .yh-s1__actions { margin-top: 32px; }


.yh6 .yh-s1__note { margin-top: 12px; font-size: 13px; line-height: 20px; }



/* рейтинги — ссылки в стиле меток второго блока (на сером фоне — белые) */



/* орбиты 380: кольца и логотипы в масштабе */


.yh6 .yh-orbit { --size: 380px; width: 380px; height: 380px; scale: none; }


.yh-orbit__svg { width: 100%; height: 100%; }


.yh6 .yh-orbit__layer { scale: .9; }



/* центр — кнопка: белый круг, который снизу наполняется водой; наполнился — смена рейтинга */


.yh6 .yh-orbit__core { position: absolute; left: 50%; top: 50%; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 124px; height: 124px; padding: 0 10px; transform: translate(-50%, -50%); border: 0; border-radius: 50%; overflow: hidden; isolation: isolate; cursor: pointer; background: var(--rt-paper); box-shadow: 0 1px 2px rgba(20,22,28,.06), 0 16px 32px -18px rgba(20,22,28,.28); font: inherit; color: var(--rt-ink); text-align: center; transition: transform .2s, box-shadow .2s; }


.yh6 .yh-orbit__core:hover { transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 1px 2px rgba(20,22,28,.06), 0 20px 40px -18px rgba(47,76,140,.4); }


.yh6 .yh-orbit__core:focus-visible { outline: 2px solid var(--rt-brand); outline-offset: 4px; }



.yh-orbit__core-k { font-size: 11px; color: var(--rt-steel); }


.yh6 .yh-orbit__core b { font-family: Unbounded, sans-serif; font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--rt-brand); }


.yh-orbit__core-go { margin-top: 4px; font-size: 11px; font-weight: 500; color: var(--rt-ink); opacity: .7; transition: opacity .2s; }


.yh6 .yh-orbit__core:hover .yh-orbit__core-go { opacity: 1; color: var(--rt-signal, #D93A2E); }



@media (max-width: 1100px) {
 
.yh6 .yh-s1 { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 40px; }
 
.yh6 .yh-orbit { scale: .9; }
 
}

 

.yh-orbit__core-go { white-space: nowrap; }



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


/* подпись под кнопкой: три пункта с воздухом и тихими разделителями */


.yh6 .yh-s1__note { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 20px; color: var(--rt-steel); }


.yh6 .yh-s1__note li + li::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px; border-radius: 50%; background: var(--rt-faint, #C9CCD3); vertical-align: middle; }



/* рейтинги: метки цвета верхней части карточек проектов; наведение — карточка «приподнимается» */



/* центр: не белый диск, а тихая подпись в центре колец; диск появляется только при наведении — как подсказка, что можно нажать */


.yh6 .yh-orbit__core { width: 116px; height: 116px; background: transparent; box-shadow: none; overflow: visible; }


.yh6 .yh-orbit__core::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--rt-paper); box-shadow: var(--rt-sh-hover); opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s; }


.yh6 .yh-orbit__core:hover { transform: translate(-50%, -50%); box-shadow: none; }


.yh6 .yh-orbit__core:hover::before, .yh6 .yh-orbit__core:focus-visible::before { opacity: 1; transform: scale(1); }


.yh-orbit__core-k { font-size: 11px; color: var(--rt-muted); }


.yh6 .yh-orbit__core b { font-family: Manrope, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--rt-ink); }


.yh6 .yh-orbit__core-go { margin-top: 2px; font-size: 11px; color: var(--rt-signal, #D93A2E); opacity: 0; transform: translateY(-2px); transition: opacity .2s, transform .2s; }


.yh6 .yh-orbit__core:hover .yh-orbit__core-go, .yh6 .yh-orbit__core:focus-visible .yh-orbit__core-go { opacity: 1; transform: none; }



/* без таймера и воды: смену показывает только «дыхание» колец и переезд логотипов */



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


/* размер логотипа от удалённости: ближе — крупнее (44 → 40 → 36 → 32) */


.yh6 .yh-orbit__layer { scale: none; }


.yh6 .yh-orbit__layer .yh-orbit__item { width: 44px; height: 44px; margin: -22px 0 0 -22px; }


.yh6 .yh-orbit__layer .yh-orbit__item .rt-logo { width: 100%; height: 100%; }


.yh6 .yh-orbit__layer .yh-orbit__item[data-ring="2"] { width: 40px; height: 40px; margin: -20px 0 0 -20px; }


.yh6 .yh-orbit__layer .yh-orbit__item[data-ring="3"] { width: 36px; height: 36px; margin: -18px 0 0 -18px; }


.yh6 .yh-orbit__layer .yh-orbit__item[data-ring="4"] { width: 32px; height: 32px; margin: -16px 0 0 -16px; opacity: .7; }


.yh6 .yh-orbit__layer .yh-orbit__item:not(.is-on)[data-ring] { opacity: 0; }


.yh6 .yh-orbit__layer .is-far .rt-logo { scale: 1; }



/* подпись к схеме — только при наведении на схему */


.yh6 .yh-orbit__note { bottom: -4px; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }


.yh6 .yh-orbit:hover .yh-orbit__note { opacity: 1; transform: none; }



/* три черточки: какое направление сейчас и сколько до смены */


.yh-orbit__steps { position: absolute; left: 50%; bottom: 18px; z-index: 3; display: flex; gap: 6px; transform: translateX(-50%); transition: opacity .25s; }


.yh-orbit__steps i { position: relative; display: block; width: 28px; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(47,76,140,.14); }


.yh-orbit__steps i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--rt-ink); transform: scaleX(0); transform-origin: left center; }


.yh-orbit__steps i.is-done::after { transform: scaleX(1); opacity: .35; }


.yh-orbit.is-tick .yh-orbit__steps i.is-on::after { animation: yhStep 5s linear forwards; }


.yh-orbit:hover .yh-orbit__steps i.is-on::after { animation-play-state: paused; }


.yh6 .yh-orbit:hover .yh-orbit__steps { opacity: 0; }


@keyframes yhStep { to { transform: scaleX(1); } }


@media (prefers-reduced-motion: reduce) {
 
.yh-orbit__steps { display: none; }
 
}



/* метки рейтингов — светлее фона вдвое, как подборки на SEO-странице; наведение — белая «приподнятая» */



/* телефон: урезанная схема под кнопкой — одно кольцо, пять логотипов */


@media (max-width: 1000px) {

  
.yh6 .yh-s1 { display: flex; flex-direction: column; }

  
.yh6 .yh-s1 > .yh-s1__main { display: contents; }

  
.yh6 .yh-s1__title { order: 1; }
 
.yh6 .yh-s1__lead { order: 2; }
 
.yh6 .yh-s1__actions { order: 3; }
 
.yh6 .yh-s1__note { order: 4; }

  
.yh6 .yh-orbit { order: 5; display: block; width: 240px; height: 240px; margin: 24px auto 0; scale: none; }

  
.yh6 .yh-s1__dirs { order: 6; }
 
.yh6 .yh-resume { order: 7; }

  
.yh6 .yh-orbit__svg path:not(:nth-child(2)) { display: none; }

  
.yh6 .yh-orbit__svg { width: 420px; height: 420px; left: 50%; top: 50%; inset: auto; transform: translate(-50%, -50%) scale(.75); }

  
.yh6 .yh-orbit__layer .yh-orbit__item { --r: 96px !important; width: 36px !important; height: 36px !important; margin: -18px 0 0 -18px !important; opacity: 0; }

  
.yh6 .yh-orbit__layer .yh-orbit__item.is-on { opacity: 1; }

  
.yh6 .yh-orbit__layer .yh-orbit__item.is-on[data-ring="4"] { display: none; }

  
.yh6 .yh-orbit__core { width: 104px; height: 104px; }

  
.yh6 .yh-orbit__core b { font-size: 13px; }

  
.yh6 .yh-orbit__steps { bottom: -14px; }

  
.yh6 .yh-orbit__note { display: none; }


}


.yh-orbit__steps { bottom: -18px; }


.yh6 .yh-orbit__note { bottom: -24px; }


.yh6 .yh-s1 { padding-bottom: 64px; }


@media (max-width: 1000px) {

  
.yh6 .yh-orbit__svg { inset: 0; left: 0; top: 0; width: 100%; height: 100%; transform: none; }

  
.yh6 .yh-orbit__svg path { display: none; }

  
.yh6 .yh-orbit__svg path:nth-child(3) { display: inline; }

  
.yh6 .yh-orbit__layer .yh-orbit__item { --r: 92px !important; }

  
.yh6 .yh-s1__note { justify-content: flex-start; }

  
.yh6 .yh-orbit { margin: 28px auto 8px; }

  
.yh6 .yh-orbit__steps { bottom: -20px; }

  
.yh6 .yh-s1__dirs { margin-top: 40px; }

  
.yh6 .yh-s1 { padding-bottom: 40px; }


}


@media (max-width: 1000px) {
 
.yh6 .yh-s1 { align-items: stretch; }
 
.yh6 .yh-s1__note, .yh6 .yh-s1__actions, .yh6 .yh-s1__dirs { align-self: stretch; }
 
}



/* ===== орбиты: логотипы точно на осях и всегда ровно =====
   Вращение задаётся углом --yh-spin, а не поворотом слоя: каждый логотип ставится на окружность и сразу «выпрямляется».
   Радиус --r меняется плавно (зарегистрированное свойство), --k — масштаб схемы к сетке колец 420. */


@property --yh-spin { syntax: '<angle>'; inherits: true; initial-value: 0deg; }


@property --r { syntax: '<length>'; inherits: false; initial-value: 0px; }


.yh6 .yh-orbit { --k: calc(380 / 420); }


.yh6 .yh-orbit__layer { animation: yhSpinVar 160s linear infinite; }


@keyframes yhSpinVar { to { --yh-spin: 360deg; } }


.yh6 .yh-orbit__layer .yh-orbit__item { transform: rotate(calc(var(--a) + var(--yh-spin))) translateX(calc(var(--r) * var(--k))) rotate(calc(-1 * (var(--a) + var(--yh-spin)))); transition: --r 1.2s cubic-bezier(.4, 0, .2, 1), opacity .5s ease; }


.yh6 .yh-orbit__layer .rt-logo { animation: none; rotate: none; }


.yh6 .yh-orbit:hover .yh-orbit__layer { animation-play-state: paused; }


@media (prefers-reduced-motion: reduce) {
 
.yh6 .yh-orbit__layer { animation: none; }
 
}


@media (max-width: 1000px) {
 
.yh6 .yh-orbit { --k: 1; }
 
}



/* три шага под схемой — как шаги в окне подбора: полоски 4 px, заполнение цветом текста */


.yh6 .yh-orbit__steps { gap: 4px; bottom: -20px; }


.yh6 .yh-orbit__steps i { width: 40px; height: 4px; border-radius: var(--rt-r-pill, 999px); background: var(--rt-tray, #E4E6EA); }


.yh6 .yh-orbit__steps i::after { background: var(--rt-ink); border-radius: var(--rt-r-pill, 999px); }


.yh6 .yh-orbit__steps i.is-done::after { transform: scaleX(1); opacity: 1; }



/* ошибки со скриншота */



.yh6 .yh-orbit__core b { white-space: nowrap; }


.yh6 .yh-orbit__core { width: 136px; }

 
.yh6 .yh-s1 { padding-bottom: 52px; }



/* ===== орбиты: внутреннее кольцо дальше от подписи в центре (логотип не наезжает на текст) ===== */


.yh6 .yh-orbit__layer .yh-orbit__item[data-ring="1"] { --r: 104px; }


.yh6 .yh-orbit__layer .yh-orbit__item[data-ring="2"] { --r: 136px; }


.yh6 .yh-orbit__layer .yh-orbit__item[data-ring="3"] { --r: 166px; }


.yh6 .yh-orbit__layer .yh-orbit__item[data-ring="4"] { --r: 196px; }


/* центр — ровный круг: ширина равна высоте; подпись в 2 строки при необходимости, без наезда */


.yh6 .yh-orbit__core { width: 124px; height: 124px; }


.yh6 .yh-orbit__core b { white-space: normal; font-size: 14px; max-width: 112px; }


/* подсказка-круг при наведении — мягче тень, как у карточек */


.yh6 .yh-orbit__core::before { box-shadow: var(--rt-sh-hover); }


/* меньше пустоты между первым экраном и следующим блоком */


.yh6 .yh-s2 { margin-top: 56px; }


@media (max-width: 1000px) {
 
.yh6 .yh-orbit__layer .yh-orbit__item[data-ring] { --r: 92px !important; }
 
}


.yh6 .yh-orbit__core b { white-space: nowrap; font-size: 13px; max-width: none; }



/* логотипы на орбитах — отступ плашки 2 px, как у логотипов в карточках рейтинга */


.yh6 .yh-orbit__layer .yh-orbit__item .rt-logo { padding: 2px; }


/* схема — на 24 px от правого края, чтобы «воздух» справа совпадал с левым у текста */


@media (min-width: 1001px) {
 
.yh6 .yh-s1 > .yh-orbit { justify-self: end; margin-right: 24px; }
 
}



/* ===== центр: содержимое внутри круга, ссылка как «Как проверяем проекты» на SEO-странице ===== */


.yh6 .yh-orbit__core { gap: 4px; padding: 0; }


.yh6 .yh-orbit__core::before { inset: -10px; }
             
/* круг подсказки 144 px — подпись и ссылка помещаются с отступами */


.yh6 .yh-orbit__core-k { margin-bottom: 0; line-height: 1.2; }


.yh6 .yh-orbit__core b { line-height: 1.25; }


.yh6 .yh-orbit__core-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--rt-ink); opacity: 0; transform: translateY(-2px); }


.yh6 .yh-orbit__core-go .rt-icon { --rt-icon: 14px; width: 14px; height: 14px; transition: transform .16s; }


.yh6 .yh-orbit__core:hover .yh-orbit__core-go, .yh6 .yh-orbit__core:focus-visible .yh-orbit__core-go { opacity: 1; transform: none; color: var(--rt-ink); }


.yh6 .yh-orbit__core:hover .yh-orbit__core-go .rt-icon { transform: translateX(2px); }


/* в покое — подпись по центру; при наведении блок с ссылкой чуть поднимается, чтобы весь текст оставался внутри круга */


.yh6 .yh-orbit__core > * { transition: transform .25s; }


.yh6 .yh-orbit__core:not(:hover):not(:focus-visible) .yh-orbit__core-k, .yh6 .yh-orbit__core:not(:hover):not(:focus-visible) b { transform: translateY(10px); }



/* черточки — синие, как шаги в окне подбора */


.yh6 .yh-orbit__steps i::after, .yh6 .yh-orbit__steps i.is-done::after { background: var(--rt-brand-bright, #3F6FD3); }


.yh6 .yh-orbit__core::before { inset: -14px; }


.yh6 .yh-orbit__core b { white-space: normal; max-width: 112px; }



/* ===== центр: подпись строго по центру круга ===== */


.yh6 .yh-orbit__core b { width: 120px; max-width: 120px; text-align: center; text-wrap: balance; }



/* ===== края схемы тише: чем дальше кольцо, тем бледнее логотип (3-е — 85%, 4-е — 55%) ===== */


.yh6 .yh-orbit__layer .yh-orbit__item.is-on[data-ring="3"] { opacity: .85; }


.yh6 .yh-orbit__layer .yh-orbit__item.is-on[data-ring="4"] { opacity: .55; }


.yh6 .yh-orbit__layer .yh-orbit__item.is-on:hover { opacity: 1; }



/* ===== ссылка в круге: при наведении на круг — обычное состояние; ховер ссылки — только при наведении на неё саму, как у rt-go ===== */


.yh6 .yh-orbit__core:hover .yh-orbit__core-go .rt-icon { transform: none; }


.yh6 .yh-orbit__core .yh-orbit__core-go:hover .rt-icon { transform: translateX(2px); }


.yh6 .yh-orbit__core .yh-orbit__core-go:hover { color: var(--rt-signal, #D93A2E); }


.yh6 .yh-orbit__core b { width: max-content; max-width: 130px; }



/* ссылка в круге — как «Как проверяем проекты»: в покое цвет текста, при наведении серая, стрелка сдвигается */


.yh6 .yh-orbit__core .yh-orbit__core-go { font-size: 14px; }


.yh6 .yh-orbit__core .yh-orbit__core-go:hover { color: var(--rt-steel); }



/* ===== первый экран v16: баланс масс, смысл колец, тише второстепенное ===== */


/* схема крупнее на ~10% (380 → 420) и ближе к тексту */


.yh6 .yh-s1 { grid-template-columns: minmax(0, 1fr) 420px; column-gap: 32px; }


.yh6 .yh-orbit { width: 420px; height: 420px; --k: 1; }


@media (min-width: 1001px) {
 
.yh6 .yh-s1 > .yh-orbit { justify-self: start; margin-right: 0; }
 
}


/* три самых релевантных — на ближнем кольце, два — на дальнем */


.yh6 .yh-orbit__layer .yh-orbit__item[data-ring="1"] { --r: 112px; width: 46px; height: 46px; margin: -23px 0 0 -23px; }


.yh6 .yh-orbit__layer .yh-orbit__item[data-ring="3"] { --r: 176px; width: 38px; height: 38px; margin: -19px 0 0 -19px; }


.yh6 .yh-orbit__layer .yh-orbit__item.is-on[data-ring="3"] { opacity: .7; }


.yh6 .yh-orbit__svg path { stroke: rgba(47,76,140,.14); }


.yh6 .yh-orbit__svg path:nth-child(2), .yh6 .yh-orbit__svg path:nth-child(4) { stroke: rgba(47,76,140,.07); }


/* рейтинги — текстовые ссылки через точку, без «кнопочных» плашек */


.yh6 .yh-s1__dirs--line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; margin: 28px 0 0; padding: 0; list-style: none; font-size: 14px; }


.yh6 .yh-s1__dirs--line .yh-s1__dirs-label { margin-right: 10px; color: var(--rt-steel); }


.yh6 .yh-s1__dirs--line li:nth-child(n+3)::before { content: "·"; margin: 0 10px; color: var(--rt-faint, #C9CCD3); }


.yh6 .yh-s1__dirs--line .yh-dchip { display: inline; height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: 14px; font-weight: 500; color: var(--rt-ink); text-decoration: underline; text-decoration-color: rgba(20,22,28,.18); text-underline-offset: 4px; transition: color .16s, text-decoration-color .16s; }


.yh6 .yh-s1__dirs--line .yh-dchip:hover { color: var(--rt-steel); text-decoration-color: currentColor; transform: none; box-shadow: none; background: none; }


/* подпись под кнопкой — тише, как пояснение, а не отдельный блок */


.yh6 .yh-s1__note { color: var(--rt-muted); }


.yh6 .yh-s1__note li + li::before { background: var(--rt-faint, #C9CCD3); opacity: .8; }


/* лид — ровные строки */


.yh6 .yh-s1__lead { max-width: 44ch; text-wrap: balance; }


@media (max-width: 1100px) {
 
.yh6 .yh-s1 { grid-template-columns: minmax(0, 1fr) 380px; }
 
.yh6 .yh-orbit { scale: .9; }
 
}


@media (max-width: 1000px) {

  
.yh6 .yh-orbit { width: 240px; height: 240px; scale: none; }

  
.yh6 .yh-orbit__layer .yh-orbit__item[data-ring] { --r: 92px !important; width: 36px !important; height: 36px !important; margin: -18px 0 0 -18px !important; }

  
.yh6 .yh-orbit__svg path { display: none; }
 
.yh6 .yh-orbit__svg path:nth-child(3) { display: inline; }

  
.yh6 .yh-s1__dirs--line .yh-s1__dirs-label { flex-basis: 100%; margin-bottom: 4px; }


}


.yh6 .yh-s1__dirs--line { justify-content: flex-start; max-width: none; }
 
.yh6 .yh-s1__dirs--line .yh-s1__dirs-label { margin-left: 0; line-height: inherit; }



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


/* ссылки рейтингов: серое подчёркивание в покое; при наведении слово плавно сереет, черта растворяется */


.yh6 .yh-s1__dirs--line .yh-dchip { text-decoration-color: var(--rt-faint, #C9CCD3); transition: color .25s ease, text-decoration-color .25s ease; }


.yh6 .yh-s1__dirs--line .yh-dchip:hover { color: var(--rt-steel); text-decoration-color: transparent; }


.yh6 .yh-s1__dirs--line .yh-dchip--all { color: var(--rt-steel); font-weight: 400; }


.yh6 .yh-s1__dirs--line .yh-dchip--all:hover { color: var(--rt-muted); }


/* схема ещё на 6% крупнее и ближе к тексту */


.yh6 .yh-s1 { grid-template-columns: minmax(0, 1fr) 446px; column-gap: 24px; }


.yh6 .yh-orbit { width: 446px; height: 446px; --k: calc(446 / 420); }


/* подпись под кнопкой — на полтона тише, контраст остаётся читаемым (≈4,6:1) */


.yh6 .yh-s1__note { color: color-mix(in srgb, var(--rt-muted) 90%, var(--rt-bg)); }


@media (max-width: 1240px) and (min-width: 1001px) {
 
.yh6 .yh-s1 { grid-template-columns: minmax(0, 1fr) 400px; }
 
.yh6 .yh-orbit { width: 400px; height: 400px; --k: calc(400 / 420); }
 
.yh6 .yh-s1__dirs--line li:last-child { display: none; }
 
}



/* ===== второй экран v2: одна мысль — запрос → совпадения → агентство ===== */


.yh6 .yh-s2v2 { display: block; margin-top: 56px; }


.yh-c2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; align-items: center; }


.yh6 .yh-c2 .yh-sec__title { margin: 0; }


.yh-c2__lead { margin: 12px 0 0; max-width: 46ch; font-size: 16px; line-height: 24px; color: var(--rt-steel); }


.yh-c2__crit { display: flex; flex-direction: column; gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }


.yh-c2__crit li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: center; }


.yh-c2__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--rt-r-ctl, 12px); background: var(--rt-paper); box-shadow: var(--rt-sh-card); font-family: Unbounded, sans-serif; font-size: 13px; font-weight: 600; color: var(--rt-ink); }


.yh-c2__crit b { display: block; font-size: 16px; font-weight: 700; }


.yh-c2__crit li span:not(.yh-c2__n) { font-size: 14px; color: var(--rt-steel); }


.yh-c2__text > .rt-go { display: inline-flex; margin-top: 28px; font-size: 14px; }



/* пример: белая карточка-«экран» с запросом сверху и найденным агентством снизу */


.yh-c2__demo { margin: 0; padding: 24px; border-radius: var(--rt-r-card, 16px); background: var(--rt-paper); box-shadow: var(--rt-sh-card); }


.yh-c2__label { margin: 0 0 8px; font-size: 12px; color: var(--rt-steel); }


.yh-c2__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }


.yh-c2__query .yh-c2__tags li { background: var(--rt-bg); color: var(--rt-ink); }



@media (max-width: 1000px) {
 
.yh-c2 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
 
}


@media (max-width: 700px) {
 
.yh-c2__demo { padding: 16px; }
 
}



/* ===== второй экран v3: всё в одной белой карточке, справа — настоящая карточка рейтинга, обрезанная по краю ===== */


.yh6 .yh-c2.rt-box { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 48px; align-items: center; padding: 40px; border-radius: var(--rt-r-card, 16px); background: var(--rt-paper); box-shadow: var(--rt-sh-card); }


.yh6 .yh-c2 .yh-sec__title { font-size: 24px; line-height: 32px; }


.yh6 .yh-c2__lead { margin-top: 12px; }


.yh6 .yh-c2__crit { margin-top: 28px; gap: 14px; }


.yh6 .yh-c2__n { background: var(--rt-bg); box-shadow: none; }


.yh6 .yh-c2__text > .rt-go { margin-top: 24px; }


/* пример — на сером, как список рейтинга; запрос → «совпало» → карточка */


.yh6 .yh-c2__demo { padding: 20px 0 20px 20px; border-radius: var(--rt-r-ctl, 12px); background: var(--rt-bg); box-shadow: none; overflow: hidden; }


.yh6 .yh-c2__query { padding-right: 20px; }


.yh6 .yh-c2__query .yh-c2__tags li { background: var(--rt-paper); }



/* карточка рейтинга в натуральную ширину, правый край уходит под затухание */


.yh-c2__clip { position: relative; overflow: hidden; }


.yh-c2__clip .rt-list { width: 660px; margin: 0; padding: 0; list-style: none; }


.yh-c2__clip::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 72px; background: linear-gradient(to right, rgba(244,245,247,0), var(--rt-bg)); pointer-events: none; }



@media (max-width: 1000px) {
 
.yh6 .yh-c2.rt-box { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 28px; }
 
}


@media (max-width: 700px) {
 
.yh6 .yh-c2.rt-box { padding: 20px; }
 
.yh6 .yh-c2__demo { padding: 16px 0 16px 16px; }
 
.yh-c2__clip .rt-list { width: 560px; }
 
}


.yh-c2__clip::after { z-index: 2; width: 96px; background: linear-gradient(to right, rgba(244,245,247,0), var(--rt-bg) 85%); }


.yh6 .yh-c2.rt-box { grid-template-columns: minmax(0, 1fr) 540px; }


@media (max-width: 1240px) {
 
.yh6 .yh-c2.rt-box { grid-template-columns: minmax(0, 1fr) 460px; }
 
}


/* пример: без оффера карточка короче; строка отраслей сразу под шапкой */


.yh6 .yh-list-one .rt-agency__spec.is-short { margin-top: 4px; }


.yh6 .yh-c2__demo { padding-bottom: 20px; }



/* пример: карточка рейтинга обрезана снизу — проект виден краем под затуханием («за кадром») */


.yh-c2__clip { max-height: 252px; }


.yh-c2__clip::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 88px; background: linear-gradient(to bottom, rgba(244,245,247,0), var(--rt-bg) 90%); pointer-events: none; }


@media (max-width: 700px) {
 
.yh-c2__clip { max-height: 300px; }
 
}



/* ===== второй экран v6 ===== */


/* 1. правая часть легче: уже на ~5%, верх по заголовку, вокруг карточки больше воздуха */


.yh6 .yh-c2.rt-box { grid-template-columns: minmax(0, 1fr) 510px; align-items: start; }


.yh6 .yh-c2__demo { padding: 24px; }


.yh6 .yh-c2__query { padding-right: 0; }


/* правая колонка: панель и ссылка «Открыть профиль» под ней */


.yh6 .yh-c2 > .yh-c2__demo { grid-column: 2; }



/* 2. номера спокойнее — светлая подложка, серые цифры, больше воздуха между строками */


.yh6 .yh-c2__crit { gap: 20px; }


.yh6 .yh-c2__n { width: 36px; height: 36px; background: color-mix(in srgb, var(--rt-bg) 55%, var(--rt-paper)); font-family: Manrope, sans-serif; font-size: 13px; font-weight: 500; color: var(--rt-steel); }


.yh6 .yh-c2__crit li { grid-template-columns: 36px minmax(0, 1fr); }


/* 4. метки запроса — исходные параметры, тише */


.yh6 .yh-c2__query .yh-c2__tags li { height: 28px; padding: 0 10px; font-size: 12px; background: color-mix(in srgb, var(--rt-paper) 70%, var(--rt-bg)); color: var(--rt-steel); }


/* 3 + 6. «почему подходит» — над карточкой и относится к ней */


.yh-c2__why { margin: 20px 0 10px; }


.yh-c2__badge { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 6px; padding: 2px 10px 2px 8px; border-radius: var(--rt-r-pill, 999px); background: var(--rt-ok-soft, #E6F4EC); color: var(--rt-ok); font-size: 12px; font-weight: 600; --rt-icon: 12px; }


.yh-c2__reasons { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--rt-ink); }


.yh-c2__reasons li + li::before { content: "·"; margin: 0 8px; color: var(--rt-faint, #C9CCD3); }


/* 5. карточка в ширину колонки (перестраивается сама, как на узком экране рейтинга); обрезка только снизу */


.yh-c2__clip .rt-list { width: auto; }


.yh-c2__clip::after { display: none; }


.yh-c2__clip { max-height: 240px; }


@media (max-width: 1240px) {
 
.yh6 .yh-c2.rt-box { grid-template-columns: minmax(0, 1fr) 440px; }
 
}


@media (max-width: 1000px) {
 
.yh6 .yh-c2 > .yh-c2__demo { grid-column: 1; }
  
}


/* причины — списком с галочками; проект виден краем снизу */


.yh-c2__reasons { flex-direction: column; gap: 4px; }


.yh-c2__reasons li { display: flex; align-items: center; gap: 6px; }


.yh-c2__reasons li + li::before { content: none; }


.yh-c2__reasons .rt-icon { --rt-icon: 14px; width: 14px; height: 14px; color: var(--rt-ok); flex: none; }


.yh6 .yh-c2__badge .rt-icon { color: var(--rt-ok); }


.yh-c2__clip { max-height: 300px; }



/* узкие экраны — после всех правил выше */


@media (max-width: 1000px) {

  
.yh6 .yh-c2.rt-box { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 28px; }

  
.yh6 .yh-c2 > .yh-c2__demo { grid-column: 1; }

  

}


@media (max-width: 700px) {
 
.yh6 .yh-c2.rt-box { padding: 20px; }
 
.yh6 .yh-c2__demo { padding: 16px; }
 
.yh-c2__clip { max-height: 320px; }
 
}



/* пример: карточка рейтинга в своей обычной раскладке (640 px), уменьшенная до ширины колонки — как «снимок» интерфейса */


@media (min-width: 1001px) {

  
.yh6 .yh-c2.rt-box { grid-template-columns: minmax(0, 1fr) 560px; }

  
.yh-c2__clip .rt-list { width: 640px; zoom: .8; }

  
.yh-c2__clip { max-height: 236px; }


}


@media (min-width: 1001px) and (max-width: 1240px) {
 
.yh6 .yh-c2.rt-box { grid-template-columns: minmax(0, 1fr) 500px; }
 
.yh-c2__clip .rt-list { zoom: .7; }
 
}



/* ===== второй экран v7 ===== */


/* причины: плотнее на 3 px */


.yh-c2__reasons { gap: 1px; }


.yh-c2__reasons li { line-height: 20px; }


/* правая панель уже на ~4%, больше воздуха между колонками */


@media (min-width: 1241px) {
 
.yh6 .yh-c2.rt-box { grid-template-columns: minmax(0, 1fr) 536px; gap: 56px; }
 
.yh-c2__clip .rt-list { zoom: .76; }
 
}


/* проект в карточке — не «выключен»: затухание только у самого низа, заголовок и метрика полностью видны */


.yh-c2__clip { max-height: 252px; }


.yh-c2__clip::before { height: 28px; background: linear-gradient(to bottom, rgba(244,245,247,0), var(--rt-bg)); }


/* «Открыть профиль» ближе к панели */



/* номера ещё спокойнее */


.yh6 .yh-c2__n { background: color-mix(in srgb, var(--rt-bg) 35%, var(--rt-paper)); color: var(--rt-muted); }


/* «Как считается соответствие» — продолжение списка */


.yh6 .yh-c2__text > .rt-go { margin-top: 18px; }


/* вторичный текст справа контрастнее */


.yh6 .yh-c2__label { color: var(--rt-steel); font-size: 13px; }


.yh6 .yh-c2__query .yh-c2__tags li { color: color-mix(in srgb, var(--rt-ink) 75%, var(--rt-steel)); }



/* ===== второй экран v8: правая часть — светло-серая полоса во всю высоту блока, без белых полей вокруг ===== */


.yh6 .yh-c2.rt-box { --yh-panel: color-mix(in srgb, var(--rt-bg) 60%, var(--rt-paper)); padding: 0; gap: 0; overflow: hidden; align-items: stretch; }


@media (min-width: 1001px) {
 
.yh6 .yh-c2.rt-box { grid-template-columns: minmax(0, 1fr) 46%; }
 
}


.yh6 .yh-c2__text { align-self: center; padding: 48px 48px 48px 40px; }


.yh6 .yh-c2 > .yh-c2__demo { display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 40px 40px 32px; border-radius: 0; background: var(--yh-panel); box-shadow: none; }


.yh6 .yh-c2__query .yh-c2__tags li { background: var(--rt-paper); }


.yh-c2__clip::before { background: linear-gradient(to bottom, color-mix(in srgb, var(--yh-panel) 0%, transparent), var(--yh-panel)); }



@media (min-width: 1001px) {
 
.yh-c2__clip .rt-list { zoom: .74; }
 
}


@media (max-width: 1000px) {

  
.yh6 .yh-c2.rt-box { grid-template-columns: minmax(0, 1fr); padding: 0; }

  
.yh6 .yh-c2__text { padding: 24px 20px 28px; }

  
.yh6 .yh-c2 > .yh-c2__demo { padding: 24px 20px; }


}


@media (min-width: 1001px) {
 
.yh6 .yh-c2.rt-box { grid-template-columns: minmax(0, 1fr) 50%; }
 
.yh6 .yh-c2 > .yh-c2__demo { padding: 36px 32px 28px; }
 
.yh6 .yh-c2__text { padding: 40px 40px 40px 40px; }
 
}


.yh6 .yh-c2 > .yh-c2__demo { padding-bottom: 36px; }



/* ===== второй экран v9: главный смысл — совпадения сверху; карточка — спокойные данные профиля ===== */


.yh6 .yh-c2__why { margin: 22px 0 22px; }


.yh6 .yh-c2__badge { margin-bottom: 10px; padding: 4px 12px 4px 10px; font-size: 14px; --rt-icon: 14px; }


.yh6 .yh-c2__reasons { gap: 0; font-size: 13px; }


.yh6 .yh-c2__reasons li { line-height: 20px; }


/* нумерация — редакционная, а не кнопки */


.yh6 .yh-c2__n { background: color-mix(in srgb, var(--rt-bg) 18%, var(--rt-paper)); color: var(--rt-muted); }


/* правая часть уже на ~8% */


@media (min-width: 1001px) {
 
.yh6 .yh-c2.rt-box { grid-template-columns: minmax(0, 1fr) 46%; }
 
}



/* ===== второй экран v10: правая часть собраннее, статус — статус, а не акцент ===== */


/* 1. плотнее по вертикали: метки → статус → причины → карточка */


.yh6 .yh-c2__why { margin: 16px 0 16px; }


/* 2. «Совпало 3 из 3» — тише: ниже плашка, шрифт 13, фон светлее */


.yh6 .yh-c2__badge { margin-bottom: 8px; padding: 2px 10px 2px 8px; font-size: 13px; background: color-mix(in srgb, var(--rt-ok-soft, #E6F4EC) 70%, var(--rt-paper)); --rt-icon: 13px; }


/* 3. причины компактнее и уже */


.yh6 .yh-c2__reasons li { line-height: 19px; }


.yh6 .yh-c2__reasons { max-width: 32ch; }


/* 9. нумерация — почти без подложки, цифры серее */


.yh6 .yh-c2__n { background: color-mix(in srgb, var(--rt-bg) 8%, var(--rt-paper)); color: color-mix(in srgb, var(--rt-muted) 80%, var(--rt-paper)); }


/* 10. «Как считается соответствие» ближе к списку */


.yh6 .yh-c2__text > .rt-go { margin-top: 8px; }


/* 11. правый фон чуть темнее — разделение яснее без линий */


.yh6 .yh-c2.rt-box { --yh-panel: color-mix(in srgb, var(--rt-bg) 72%, var(--rt-paper)); }


.yh6 .yh-c2__text > .rt-go { margin-top: 12px; }



/* ===== второй экран v11: весь блок белый и без тени; карточка прижата к правому и нижнему краю, в состоянии наведения ===== */


.yh6 .yh-c2.rt-box { --yh-panel: var(--rt-paper); background: var(--rt-paper); box-shadow: none; overflow: hidden; }


.yh6 .yh-c2 > .yh-c2__demo { justify-content: flex-start; padding: 40px 0 0 0; background: none; }


.yh6 .yh-c2__query, .yh6 .yh-c2__why { padding-right: 40px; }


.yh6 .yh-c2__query .yh-c2__tags li { background: color-mix(in srgb, var(--rt-bg) 70%, var(--rt-paper)); }


/* карточка: правый и нижний край уходят за границу блока, контур — как при наведении в рейтинге */


.yh6 .yh-c2__clip { margin-top: auto; max-height: none; overflow: visible; }


.yh6 .yh-c2__clip::before { display: none; }


.yh6 .yh-c2__clip .rt-list { margin-bottom: -40px; }


.yh6 .yh-c2__clip .rt-agency { box-shadow: var(--rt-sh-hover); border-top-right-radius: 0; border-bottom-right-radius: 0; }


.yh6 .yh-c2 { align-items: stretch; }


.yh6 .yh-c2 > .yh-c2__demo { min-height: 100%; }


/* только в этом примере — без подписи «Проекты по отраслям:», три отрасли в одну строку */


.yh6 .yh-list-one .rt-agency__industries::before { content: none; }


.yh6 .yh-list-one .rt-agency__industries { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }


/* курсор в фирменном стиле — указывает на «В шорт-лист», вокруг кончика — круг-отклик */


.yh6 .yh-c2__clip { position: relative; }


.yh-c2__cursor { position: absolute; z-index: 3; width: 40px; height: 40px; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(20,22,28,.18)); }


@media (min-width: 1001px) {
 
.yh-c2__cursor { right: 64px; top: 34px; }
 
}


@media (max-width: 1000px) {
 
.yh-c2__cursor { display: none; }
 
.yh6 .yh-c2__query, .yh6 .yh-c2__why { padding-right: 0; }
 
.yh6 .yh-c2 > .yh-c2__demo { padding: 0 20px 24px; }
 
.yh6 .yh-c2__clip .rt-list { margin-bottom: 0; }
 
.yh6 .yh-c2__clip .rt-agency { border-radius: var(--rt-r-card, 16px); }
 
}


/* правая колонка не растягивает блок: её высота — по левой, карточка уходит за нижний край */


@media (min-width: 1001px) {

  
.yh6 .yh-c2 > .yh-c2__demo { contain: size; overflow: hidden; }

  
.yh6 .yh-c2__clip { margin-top: 0; }


}


.yh6 .yh-list-one .rt-agency__industries > li { flex: none; }


@media (min-width: 1001px) {

  
.yh6 .yh-c2__clip { margin-top: auto; }

  
.yh6 .yh-c2__clip .rt-list { margin-bottom: -18px; }

  
.yh6 .yh-c2__clip .rt-agency { border-bottom-left-radius: 0; }


}


@media (min-width: 1001px) {

  
/* три отрасли целиком в строку: строка занимает и место под кнопкой шорт-листа */

  
.yh6 .yh-list-one .rt-agency__spec { grid-column: 2 / -1; }

  
.yh6 .yh-list-one .rt-agency__industries { overflow: visible; }

  
/* верх правой части ниже — меньше пустоты над карточкой */

  
.yh6 .yh-c2 > .yh-c2__demo { padding-top: 60px; }


}



/* ===== второй экран: цифры списка — как в «От чего зависит цена» на SEO-странице (Unbounded 600, 15/20, --rt-faint, без подложки) ===== */


.yh6 .yh-c2__n { display: block; width: auto; height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; font-family: Unbounded, sans-serif; font-weight: 600; font-size: 15px; line-height: 20px; color: var(--rt-faint, #C9CCD3); }


.yh6 .yh-c2__crit li { grid-template-columns: 32px minmax(0, 1fr); align-items: baseline; }


.yh6 .yh-c2__crit b { line-height: 20px; }



/* карточка в примере — тень сильнее, чтобы не растворялась на белом */


.yh6 .yh-c2__clip .rt-agency { box-shadow: 0 1px 2px rgba(20,22,28,.06), 0 12px 32px rgba(20,22,28,.12); }



/* ===== орбиты: черточки тише вдвое; линии по иерархии — ближе к центру явнее ===== */


.yh6 .yh-orbit__steps { opacity: .5; }


.yh6 .yh-orbit__svg path:nth-child(1) { stroke: rgba(47,76,140,.24); stroke-width: 1.25; }


.yh6 .yh-orbit__svg path:nth-child(2) { stroke: rgba(47,76,140,.15); stroke-width: 1; }


.yh6 .yh-orbit__svg path:nth-child(3) { stroke: rgba(47,76,140,.09); stroke-width: 1; }


.yh6 .yh-orbit__svg path:nth-child(4) { stroke: rgba(47,76,140,.05); stroke-width: .75; }


@media (max-width: 1000px) {
 
.yh6 .yh-orbit__svg path:nth-child(3) { stroke: rgba(47,76,140,.16); }
 
}



/* ===== второй экран v13: тень карточки видна слева; верх колонок на одной линии; группы и ритм ===== */


@media (min-width: 1001px) {

  
/* правую колонку обрезает сам блок (справа и снизу), а не колонка — тень карточки слева и сверху не срезается */

  
.yh6 .yh-c2 > .yh-c2__demo { overflow: visible; padding: 48px 0 0 8px; }

  
/* левая колонка — по верху, как правая: заголовок и «Ваш запрос» на одной линии */

  
.yh6 .yh-c2__text { align-self: start; padding: 44px 48px 44px 40px; }

  
.yh6 .yh-c2__query, .yh6 .yh-c2__why { padding-right: 40px; }


}


/* группа «запрос + совпадения» — одна смысловая связка */


.yh6 .yh-c2__label { margin-bottom: 8px; }


.yh6 .yh-c2__why { margin: 20px 0 0; }


.yh6 .yh-c2__badge { margin-bottom: 8px; }


/* левая колонка: заголовок → лид → список → ссылка */


.yh6 .yh-c2__lead { margin-top: 12px; }


.yh6 .yh-c2__crit { margin-top: 32px; gap: 18px; }


.yh6 .yh-c2__text > .rt-go { margin-top: 24px; }


/* карточка сразу под совпадениями (без пустоты), нижняя часть уходит за край блока */


@media (min-width: 1001px) {
 
.yh6 .yh-c2__clip { margin-top: 24px; }
 
.yh6 .yh-c2__clip .rt-list { margin-bottom: 0; }
 
}


@media (min-width: 1001px) {

  
.yh6 .yh-c2__text { padding: 44px 48px 32px 40px; }

  
.yh6 .yh-c2__crit { gap: 14px; }

  
.yh6 .yh-c2__clip { margin-top: 44px; }


}



/* пример — вымышленное агентство: логотип буквой на сером, клики по карточке не работают */


.yh-logo-letter { display: grid; place-items: center; width: var(--rt-logo, 48px); height: var(--rt-logo, 48px); border-radius: var(--rt-r-sm, 8px); background: color-mix(in srgb, var(--rt-bg) 85%, var(--rt-tray, #E4E6EA)); font-family: Unbounded, sans-serif; font-size: 20px; font-weight: 600; color: var(--rt-muted); }


.yh6 .yh-list-one { pointer-events: none; }



/* ===== второй экран: анимация по шагам (включается скриптом; без него — сразу итоговое состояние) ===== */


.yh-anim .yh-c2 { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }


.yh-anim.is-in .yh-c2 { opacity: 1; transform: none; }


/* левая колонка — по очереди */


.yh-anim .yh-c2__text > *, .yh-anim .yh-c2__crit > li { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }


.yh-anim.is-in .yh-c2__text > *, .yh-anim.is-in .yh-c2__crit > li { opacity: 1; transform: none; }


.yh-anim.is-in .yh-c2__text > :nth-child(1) { transition-delay: .1s; }
 
.yh-anim.is-in .yh-c2__text > :nth-child(2) { transition-delay: .2s; }


.yh-anim.is-in .yh-c2__text > :nth-child(3) { transition-delay: .3s; }
 
.yh-anim.is-in .yh-c2__text > :nth-child(4) { transition-delay: .7s; }


.yh-anim.is-in .yh-c2__crit > li:nth-child(1) { transition-delay: .35s; }
 
.yh-anim.is-in .yh-c2__crit > li:nth-child(2) { transition-delay: .45s; }
 
.yh-anim.is-in .yh-c2__crit > li:nth-child(3) { transition-delay: .55s; }


/* параметры запроса: сначала невыбранные, по клику — выбранные (как активный фильтр) */


.yh6 .yh-c2__query .yh-c2__tags li { transition: background .25s, color .25s, box-shadow .25s; }


.yh6 .yh-c2__query .yh-c2__tags li.is-on { background: var(--rt-ink); color: #fff; }


.yh-anim .yh-c2__query .yh-c2__tags li:not(.is-on) { background: transparent; box-shadow: inset 0 0 0 1px rgba(20,22,28,.12); color: var(--rt-steel); }


/* совпадения — после выбора всех трёх */


.yh-anim .yh-c2__badge { opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .4s ease, transform .4s ease; }


.yh-anim.is-match .yh-c2__badge { opacity: 1; transform: none; }


.yh-anim .yh-c2__reasons li { opacity: 0; transform: translateX(-6px); transition: opacity .35s ease, transform .35s ease; }


.yh-anim .yh-c2__reasons li.is-on { opacity: 1; transform: none; }


/* карточка: до совпадения — приглушённая «одна из многих», после — найденная */


.yh-anim .yh-c2__clip .rt-agency { opacity: .35; filter: grayscale(1); transform: translateY(10px); transition: opacity .6s ease, filter .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease; box-shadow: 0 1px 2px rgba(20,22,28,.04); }


.yh-anim.is-found .yh-c2__clip .rt-agency { opacity: 1; filter: none; transform: none; box-shadow: 0 1px 2px rgba(20,22,28,.06), 0 12px 32px rgba(20,22,28,.12); }


/* курсор: ездит между параметрами и кнопкой, при нажатии — круг-отклик */


.yh6 .yh-c2 > .yh-c2__demo { position: relative; }


.yh-c2__cursor--live { position: absolute; left: 0; top: 0; z-index: 5; right: auto !important; opacity: 0; transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .3s; }


.yh-c2__cursor--live.is-show { opacity: 1; }


.yh-c2__cursor--live circle { transform-origin: 9px 7px; }


.yh-c2__cursor--live.is-click circle { animation: yhClick .5s ease-out; }


@keyframes yhClick { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }



/* ===== анимация второго экрана — мягче и легче; два вида движения разведены =====
   1) Появление блока и левой колонки — как у остальных секций: короткий подъём на 12 px и проявление.
   2) Сцена внутри примера — стартует после появления, свои спокойные шаги: выбор фильтров, совпадения, карточка, шорт-лист. */


.yh-anim .yh-c2 { transform: translateY(12px); transition: opacity .8s cubic-bezier(.25,.1,.25,1), transform .8s cubic-bezier(.25,.1,.25,1); }


.yh-anim .yh-c2__text > *, .yh-anim .yh-c2__crit > li { transform: translateY(6px); transition: opacity .7s cubic-bezier(.25,.1,.25,1), transform .7s cubic-bezier(.25,.1,.25,1); }


.yh-anim.is-in .yh-c2__text > :nth-child(1) { transition-delay: .15s; }
 
.yh-anim.is-in .yh-c2__text > :nth-child(2) { transition-delay: .25s; }


.yh-anim.is-in .yh-c2__text > :nth-child(3) { transition-delay: .35s; }
 
.yh-anim.is-in .yh-c2__text > :nth-child(4) { transition-delay: .7s; }


.yh-anim.is-in .yh-c2__crit > li:nth-child(1) { transition-delay: .4s; }
 
.yh-anim.is-in .yh-c2__crit > li:nth-child(2) { transition-delay: .5s; }
 
.yh-anim.is-in .yh-c2__crit > li:nth-child(3) { transition-delay: .6s; }


/* правая часть проявляется чуть позже левой — как единая сцена */


.yh-anim .yh-c2__demo { opacity: 0; transition: opacity .8s cubic-bezier(.25,.1,.25,1) .35s; }


.yh-anim.is-in .yh-c2__demo { opacity: 1; }



/* фильтры: до выбора — нейтральные, выбранные — как на сайте: голубой фон и синий текст */


.yh-anim .yh-c2__query .yh-c2__tags li:not(.is-on) { background: color-mix(in srgb, var(--rt-bg) 70%, var(--rt-paper)); box-shadow: none; color: var(--rt-steel); }


.yh6 .yh-c2__query .yh-c2__tags li { transition: background .5s ease, color .5s ease; }


.yh6 .yh-c2__query .yh-c2__tags li.is-on { background: var(--rt-brand-soft, #EAF0FB); color: var(--rt-brand); font-weight: 500; }



/* совпадения и причины — мягкое проявление без рывков */


.yh-anim .yh-c2__badge { transform: translateY(4px); transition: opacity .6s cubic-bezier(.25,.1,.25,1), transform .6s cubic-bezier(.25,.1,.25,1); }


.yh-anim .yh-c2__reasons li { transform: translateY(4px); transition: opacity .55s cubic-bezier(.25,.1,.25,1), transform .55s cubic-bezier(.25,.1,.25,1); }


/* карточка — из приглушённой в найденную, медленно и без смещений по горизонтали */


.yh-anim .yh-c2__clip .rt-agency { opacity: .45; filter: grayscale(1); transform: translateY(6px); transition: opacity 1s cubic-bezier(.25,.1,.25,1), filter 1s ease, transform 1s cubic-bezier(.25,.1,.25,1), box-shadow 1s ease; }


/* курсор — плавные дуги, мягкий клик */


.yh-c2__cursor--live { transition: transform .75s cubic-bezier(.45,.05,.25,1), opacity .5s ease; }


.yh-c2__cursor--live.is-click circle { animation: yhClick .7s cubic-bezier(.25,.1,.25,1); }


.yh-c2__cursor--live.is-rest { opacity: .0; transition: opacity 1.2s ease 1s; }



/* ===== второй экран v15: карточка крупнее и ближе к совпадениям; меньше воздуха перед ссылкой слева ===== */


@media (min-width: 1001px) {

  
.yh6 .yh-c2__clip { margin-top: 24px; }

  
/* карточка в натуральном размере (или почти): правый край уходит за границу блока, как и нижний */

  
.yh6 .yh-c2__clip .rt-list { width: 640px; }


}


.yh6 .yh-c2__text > .rt-go { margin-top: 16px; }


/* правая колонка шире (52%) — карточка крупнее, целиком по ширине с кнопкой шорт-листа */


@media (min-width: 1001px) {
 
.yh6 .yh-c2.rt-box { grid-template-columns: minmax(0, 1fr) 52%; }
 
}


@media (min-width: 1001px) {
 
.yh6 .yh-c2.rt-box { grid-template-columns: minmax(0, 1fr) 50%; }
 
}


/* итог: правая колонка 46% (заголовок слева в две строки), группа запроса ниже на 20 px — до карточки 24 px; карточка прижата вправо и вниз */


@media (min-width: 1001px) {
 
.yh6 .yh-c2.rt-box { grid-template-columns: minmax(0, 1fr) 46%; }
 
.yh6 .yh-c2 > .yh-c2__demo { padding-top: 64px; }
 
.yh6 .yh-c2__clip { margin-top: 24px; }
 
}



/* ===== первый экран: появление при загрузке =====
   1) смысл: заголовок → лид → кнопка → подпись → рейтинги (подъём 8 px, шаг 0,1 с);
   2) схема собирается от центра: «Ваша задача» → кольца прорисовываются изнутри наружу → компании занимают места по кольцам → черточки;
   дальше схема «живёт» как обычно. Без скрипта или при «уменьшить движение» — сразу итог. */


.yh-intro .yh-s1__main > * { opacity: 0; transform: translateY(8px); transition: opacity .8s cubic-bezier(.25,.1,.25,1), transform .8s cubic-bezier(.25,.1,.25,1); }


.yh-intro.is-in .yh-s1__main > * { opacity: 1; transform: none; }


.yh-intro.is-in .yh-s1__main > :nth-child(1) { transition-delay: .05s; }


.yh-intro.is-in .yh-s1__main > :nth-child(2) { transition-delay: .15s; }


.yh-intro.is-in .yh-s1__main > :nth-child(3) { transition-delay: .25s; }


.yh-intro.is-in .yh-s1__main > :nth-child(4) { transition-delay: .32s; }


.yh-intro.is-in .yh-s1__main > :nth-child(n+5) { transition-delay: .4s; }


/* схема: центр */


.yh-intro .yh-orbit__core { opacity: 0; transition: opacity .8s ease .45s; }


.yh-intro.is-in .yh-orbit__core { opacity: 1; }


/* кольца прорисовываются по очереди изнутри наружу */


.yh-intro .yh-orbit__svg path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.45,.05,.25,1); }


.yh-intro.is-in .yh-orbit__svg path { stroke-dashoffset: 0; }


.yh-intro.is-in .yh-orbit__svg path:nth-child(1) { transition-delay: .55s; }


.yh-intro.is-in .yh-orbit__svg path:nth-child(2) { transition-delay: .7s; }


.yh-intro.is-in .yh-orbit__svg path:nth-child(3) { transition-delay: .85s; }


.yh-intro.is-in .yh-orbit__svg path:nth-child(4) { transition-delay: 1s; }


/* компании занимают места: сначала ближние, потом дальние */


.yh-intro .yh-orbit__layer { opacity: 0; transition: opacity .01s linear 1.2s; }


.yh-intro.is-in .yh-orbit__layer { opacity: 1; }


.yh-intro .yh-orbit__item.is-on .rt-logo { opacity: 0; scale: .6; transition: opacity .6s ease, scale .6s cubic-bezier(.3,1.4,.5,1); }


.yh-intro.is-in .yh-orbit__item.is-on .rt-logo { opacity: 1; scale: 1; }


.yh-intro.is-in .yh-orbit__item.is-on[data-ring="1"] .rt-logo { transition-delay: 1.25s; }


.yh-intro.is-in .yh-orbit__item.is-on[data-ring="1"]:nth-of-type(3n+2) .rt-logo { transition-delay: 1.35s; }


.yh-intro.is-in .yh-orbit__item.is-on[data-ring="1"]:nth-of-type(3n) .rt-logo { transition-delay: 1.45s; }


.yh-intro.is-in .yh-orbit__item.is-on[data-ring="3"] .rt-logo { transition-delay: 1.6s; }


.yh-intro.is-in .yh-orbit__item.is-on[data-ring="3"]:nth-of-type(odd) .rt-logo { transition-delay: 1.7s; }


.yh-intro .yh-orbit__steps { opacity: 0; transition: opacity .8s ease 1.9s; }


.yh-intro.is-in .yh-orbit__steps { opacity: .5; }



/* ===== сцена второго экрана: финал — акцент на проекте (доказательство), всё замирает ===== */


.yh-anim .yh-c2__clip .rt-agency__project { transition: box-shadow .9s ease, background .9s ease; }


.yh-anim.is-proof .yh-c2__clip .rt-agency__project { box-shadow: 0 0 0 2px color-mix(in srgb, var(--rt-ok) 22%, transparent); }


.yh-anim.is-proof .yh-c2__clip .rt-result__growth { animation: yhProof 1.2s cubic-bezier(.25,.1,.25,1) .2s 1; }


@keyframes yhProof { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }


.yh-anim.is-done .yh-c2__clip .rt-agency__project { box-shadow: none; }


.yh-c2__cursor--live.is-rest { opacity: 0; transition: opacity .8s ease; }


/* плотнее по вертикали: статус → причины → карточка */


.yh6 .yh-c2__badge { margin-bottom: 4px; }


@media (min-width: 1001px) {
 
.yh6 .yh-c2__clip { margin-top: 16px; }
 
.yh6 .yh-c2 > .yh-c2__demo { padding-top: 76px; }
 
}


.yh6 .yh-c2__text > .rt-go { margin-top: 12px; }



/* ===== третий блок: проекты по направлениям ===== */


/* строка управления: вкладки слева, «Смотреть рейтинг» и стрелки — справа */


.yh-s3__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 24px 0 16px; }



.yh6 .yh-s3 .rt-cases__nav { display: flex; align-items: center; gap: 8px; margin: 0; }


.yh6 .yh-s3__more { margin-right: 8px; font-size: 14px; }


.yh6 .yh-s3 .rt-cases__head { margin-bottom: 0; }


/* карточка проекта: верх ниже на ~36 px — без пустоты между отраслью и цифрой */


.yh6 .yh-s3 .rt-case__top { min-height: 0; padding-top: 20px; padding-bottom: 18px; gap: 0; justify-content: flex-start; }


.yh6 .yh-s3 .rt-case__context { margin-bottom: 20px; }


/* результат: «было» мелко и серым, «стало» крупно, рост — зелёной плашкой */


.yh6 .yh-s3 .rt-case__metric { display: flex; align-items: baseline; gap: 8px; margin: 0; }


.yh-cm__from { font-size: 18px; font-weight: 500; color: var(--rt-muted); }


.yh-cm__arrow { font-size: 18px; color: var(--rt-faint, #C9CCD3); }


.yh-cm__to { color: var(--rt-ink); }


.yh6 .yh-s3 .rt-case__metric-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }


.yh-cm__growth { padding: 1px 8px; border-radius: var(--rt-r-pill, 999px); background: color-mix(in srgb, var(--rt-ok-soft, #E6F4EC) 85%, var(--rt-paper)); color: var(--rt-ok); font-size: 12px; font-weight: 600; }


/* направления без пересчитанных проектов */


.yh-s3__panel[hidden] { display: none; }


.yh-s3__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 40px; border-radius: var(--rt-r-card, 16px); background: var(--rt-paper); }


.yh-s3__empty-title { margin: 0; font-size: 18px; font-weight: 700; }


.yh-s3__empty-text { margin: 0 0 8px; max-width: 52ch; font-size: 15px; color: var(--rt-steel); }


/* мягкое появление: заголовок, затем управление и карточки по очереди */


.yh-rise .rt-cases__head, .yh-rise .yh-s3__bar, .yh-rise .rt-cases__item { opacity: 0; transform: translateY(8px); transition: opacity .7s cubic-bezier(.25,.1,.25,1), transform .7s cubic-bezier(.25,.1,.25,1); }


.yh-rise.is-in .rt-cases__head, .yh-rise.is-in .yh-s3__bar, .yh-rise.is-in .rt-cases__item { opacity: 1; transform: none; }


.yh-rise.is-in .yh-s3__bar { transition-delay: .12s; }


.yh-rise.is-in .rt-cases__item:nth-child(1) { transition-delay: .2s; }
 
.yh-rise.is-in .rt-cases__item:nth-child(2) { transition-delay: .28s; }


.yh-rise.is-in .rt-cases__item:nth-child(3) { transition-delay: .36s; }
 
.yh-rise.is-in .rt-cases__item:nth-child(n+4) { transition-delay: .44s; }


@media (max-width: 700px) {
 
.yh-s3__bar { flex-direction: column; align-items: flex-start; }
 
.yh-s3__tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  
.yh-s3__empty { padding: 24px; }
 
.yh-cm__from, .yh-cm__arrow { font-size: 16px; }
 
}



/* ===== третий блок v2: спокойнее управление, компактнее верх карточек, ровный ритм ===== */


/* вкладка: активная — спокойнее */



/* «Смотреть рейтинг» — вторичный путь */


.yh6 .yh-s3__more { color: var(--rt-steel); font-weight: 500; }


.yh6 .yh-s3__more:hover { color: var(--rt-ink); }


/* стрелки ленты меньше на ~14% */


.yh6 .yh-s3 .rt-cases__arrow { width: 38px; height: 38px; --rt-icon: 16px; }


/* группы: заголовок и лид — отдельно, вкладки ближе к карточкам */


.yh-s3__bar { margin: 32px 0 12px; }


/* верх карточки ниже ещё на ~10% */


.yh6 .yh-s3 .rt-case__top { padding-top: 16px; padding-bottom: 14px; }


.yh6 .yh-s3 .rt-case__context { margin-bottom: 14px; font-size: 13px; color: var(--rt-steel); }


.yh6 .yh-s3 .rt-case__metric-label { color: var(--rt-steel); }


/* рост — тем же зелёным, что «Совпало» во втором экране */


.yh-cm__growth { background: color-mix(in srgb, var(--rt-ok-soft, #E6F4EC) 70%, var(--rt-paper)); }


/* названия: не больше трёх строк, у всех одна высота — строка с агентством на одном уровне */


.yh6 .yh-s3 .rt-case__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(3 * 1.4em); line-height: 1.4; }


/* логотип агентства тише */


.yh6 .yh-s3 .rt-case__agency .rt-logo { width: 20px; height: 20px; }


/* верх карточки — по содержимому, без фиксированной высоты компонента */


.yh6 .yh-s3 .rt-case__top { height: auto !important; aspect-ratio: auto !important; min-height: 0 !important; flex: none; }



/* ===== третий блок v3 ===== */


/* «Смотреть рейтинг» — ещё тише (контраст ~4,8:1 — читаемо) */


.yh6 .yh-s3__more { color: var(--rt-muted); }


/* верх карточки ниже ещё на ~5% */


.yh6 .yh-s3 .rt-case__top { padding-top: 14px; padding-bottom: 12px; }


.yh6 .yh-s3 .rt-case__context { margin-bottom: 12px; color: var(--rt-text, #3F4450); }


/* замок у NDA — серый контурный, как в карточке рейтинга */


.yh-cm__lock { --rt-icon: 12px; width: 12px; height: 12px; margin: 0 3px 0 0; vertical-align: -1px; color: var(--rt-muted); }


/* одинаковая насыщенность бейджа роста во всех карточках */


.yh6 .yh-s3 .yh-cm__growth { background: color-mix(in srgb, var(--rt-ok-soft, #E6F4EC) 70%, var(--rt-paper)); color: var(--rt-ok); }


/* логотип и название агентства — по одной средней линии */


.yh6 .yh-s3 .rt-case__agency { display: inline-flex; align-items: center; gap: 10px; }


.yh6 .yh-s3 .rt-case__agency .rt-logo { margin: 0; flex: none; }



.yh6 .yh-s3 .yh-cm__lock { width: 12px !important; height: 12px !important; margin: 0 4px 0 0 !important; display: inline-block; }



/* ===== третий блок v4 ===== */


/* вкладки — как переключатель на SEO-странице (rt-tabs-switch): дорожка, выбранная — белая с тенью */


.yh-s3__left { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }



.yh6 .yh-s3__more { margin: 0; }


/* стрелки ленты: «назад» смотрит влево */


.yh6 .yh-s3 .rt-cases__arrow:first-of-type .rt-icon { transform: rotate(180deg); }


/* тени карточек не обрезаются прокруткой ленты */


.yh6 .yh-s3 .rt-cases__track { padding: 8px 12px 24px; margin: -8px -12px -24px; scroll-padding-inline: 12px; }


/* наведение на название проекта и агентство — как ссылки сайта: серый, плавно */


.yh6 .yh-s3 .rt-case__title a, .yh6 .yh-s3 .rt-case__agency { transition: color .2s ease; }


.yh6 .yh-s3 .rt-case__title a:hover, .yh6 .yh-s3 .rt-case__agency:hover { color: var(--rt-steel); }


@media (max-width: 700px) {
 
.yh-s3__left { flex-direction: column; align-items: flex-start; }
  
}



/* ===== единый шаг между секциями главной: 80 px от предыдущего блока до заголовка (на широких экранах) ===== */


@media (min-width: 1001px) {

  
.yh6 .yh-s3 { margin-top: 72px; }

  
.yh6 .yh-steps4 { margin-top: 88px; }

  
.yh6 .yh-s5 { margin-top: 64px; }

  
  
.yh6 .yh-s6 { margin-top: 24px; }

  
.yh6 .yh-final-wrap { margin-top: 36px; }


}



/* строка контекста — обычный текст (у компонента flex с промежутком 8 px, из-за него замок «отрывался» от слов) */


.yh6 .yh-s3 .rt-case__context { display: block; }


.yh6 .yh-s3 .yh-cm__lock { margin: 0 3px 0 0 !important; vertical-align: -1px; }



/* лента снова уходит за край экрана (как на SEO-странице); запас только сверху и снизу — под тени */


.yh6 .yh-s3 .rt-cases__track { margin-inline: calc(-1 * var(--rt-bleed)); padding: 8px var(--rt-bleed) 24px; margin-top: -8px; margin-bottom: -24px; scroll-padding-inline: var(--rt-bleed-px, 0px); }



/* ===== третий блок v5 ===== */


/* переключатель легче: дорожка светлее, вкладки ниже на 4 px */



/* «Смотреть рейтинг» — отдельное действие, дальше от переключателя */


.yh-s3__left { column-gap: 32px; }


/* стрелка «было → стало» заметнее */


.yh-cm__arrow { color: var(--rt-muted); }



/* ===== «Четыре шага»: ссылки шагов внизу карточки, как на SEO-странице (общее правило «области нажатия» на главной их сбивало) ===== */


.yh6 .rt-steps__item .rt-go { margin: auto 0 0; padding: 16px 0 0; }


.yh6 .rt-steps__item .rt-steps__progress { margin-top: 12px; }



/* лид «Четырёх шагов» — в одну строку на широких экранах */


@media (min-width: 1001px) {
 
.yh6 .yh-steps4 .rt-section__lead { max-width: none; }
 
}



/* ===== «Четыре шага»: появление и отклик на шорт-лист ===== */


.yh-steps4.yh-rise .rt-section__head, .yh-steps4.yh-rise .rt-steps__item { opacity: 0; transform: translateY(8px); transition: opacity .7s cubic-bezier(.25,.1,.25,1), transform .7s cubic-bezier(.25,.1,.25,1), box-shadow .5s ease, background .5s ease; }


.yh-steps4.yh-rise.is-in .rt-section__head, .yh-steps4.yh-rise.is-in .rt-steps__item { opacity: 1; transform: none; }


.yh-steps4.yh-rise.is-in .rt-steps__item:nth-child(1) { transition-delay: .15s, .15s, 0s, 0s; }


.yh-steps4.yh-rise.is-in .rt-steps__item:nth-child(2) { transition-delay: .23s, .23s, 0s, 0s; }


.yh-steps4.yh-rise.is-in .rt-steps__item:nth-child(3) { transition-delay: .31s, .31s, 0s, 0s; }


.yh-steps4.yh-rise.is-in .rt-steps__item:nth-child(4) { transition-delay: .39s, .39s, 0s, 0s; }


/* шорт-лист изменился — шаг «Соберите 3–5 компаний» коротко подсвечивается, шкала мягко «вспыхивает» */


.yh6 .yh-steps4 .rt-steps__item { transition: box-shadow .5s ease, background .5s ease; }


.yh6 .yh-steps4 .rt-steps__item.is-ping { box-shadow: 0 0 0 2px color-mix(in srgb, var(--rt-brand-bright, #3F6FD3) 35%, transparent), var(--rt-sh-hover); }


.yh6 .yh-steps4 .rt-steps__item.is-ping .rt-steps__progress { animation: yhPing 1.2s cubic-bezier(.25,.1,.25,1); }


@keyframes yhPing { 0% { transform: scaleY(1); } 30% { transform: scaleY(1.8); } 100% { transform: scaleY(1); } }


@media (prefers-reduced-motion: reduce) {
 
.yh6 .yh-steps4 .rt-steps__item.is-ping .rt-steps__progress { animation: none; }
 
}



/* единый ритм шапок блоков: заголовок → лид 8 px, лид → содержимое 32 px */


.yh6 .yh-c2__lead { margin-top: 8px; }


.yh6 .yh-steps4 .rt-steps { margin-top: 32px; }



/* ===== блок «Рейтинги digital-агентств»: просто переходы в рейтинги ===== */


.yh-dirs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }


.yh-dir { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 96px; justify-content: center; padding: 20px 56px 20px 24px; border-radius: var(--rt-r-card, 16px); background: var(--rt-paper); color: var(--rt-ink); transition: box-shadow .25s ease, transform .25s ease; }


.yh-dir:hover { box-shadow: var(--rt-sh-hover); transform: translateY(-1px); }


.yh-dir__name { font-size: 17px; font-weight: 700; line-height: 24px; }



/* появление — как у остальных блоков */


.yh-s5.yh-rise .rt-section__head, .yh-s5.yh-rise .yh-dirs > li { opacity: 0; transform: translateY(8px); transition: opacity .7s cubic-bezier(.25,.1,.25,1), transform .7s cubic-bezier(.25,.1,.25,1); }


.yh-s5.yh-rise.is-in .rt-section__head, .yh-s5.yh-rise.is-in .yh-dirs > li { opacity: 1; transform: none; }


.yh-s5.yh-rise.is-in .yh-dirs > li:nth-child(1) { transition-delay: .12s; }
 
.yh-s5.yh-rise.is-in .yh-dirs > li:nth-child(2) { transition-delay: .18s; }
 
.yh-s5.yh-rise.is-in .yh-dirs > li:nth-child(3) { transition-delay: .24s; }


.yh-s5.yh-rise.is-in .yh-dirs > li:nth-child(4) { transition-delay: .3s; }
 
.yh-s5.yh-rise.is-in .yh-dirs > li:nth-child(5) { transition-delay: .36s; }
 
.yh-s5.yh-rise.is-in .yh-dirs > li:nth-child(6) { transition-delay: .42s; }


@media (max-width: 1000px) {
 
.yh-dirs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 
}


@media (max-width: 600px) {
 
.yh-dirs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
 
.yh-dir { min-height: 0; padding: 16px 48px 16px 20px; }
  
}



/* ===== «Рейтинги»: направление + основные подстраницы ===== */


.yh6 .yh-dirs > li.yh-dir { display: flex; flex-direction: column; gap: 10px; min-height: 0; justify-content: flex-start; padding: 22px 24px; border-radius: var(--rt-r-card, 16px); background: var(--rt-paper); transform: none; box-shadow: none; }


.yh6 .yh-dir:hover { transform: none; box-shadow: none; }


.yh6 .yh-dir__name { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 17px; font-weight: 700; line-height: 24px; color: var(--rt-ink); transition: color .2s ease; }


.yh6 .yh-dir__name .rt-icon { position: static; margin: 0; --rt-icon: 16px; width: 16px; height: 16px; color: var(--rt-muted); transition: transform .2s ease, color .2s ease; }


.yh6 .yh-dir__name:hover { color: var(--rt-steel); }


.yh6 .yh-dir__name:hover .rt-icon { transform: translateX(2px); color: var(--rt-steel); }



/* ===== «Рейтинги» v3: иерархия по наполненности, подстраницы — метками-подборками, как на SEO-странице ===== */


/* верхний ряд — два направления с подстраницами, широкие; нижний — четыре компактных */


.yh6 .yh-dirs { grid-template-columns: repeat(4, minmax(0, 1fr)); }


.yh6 .yh-dirs > li.yh-dir:nth-child(-n+2) { grid-column: span 2; padding: 24px; gap: 14px; }


.yh6 .yh-dirs > li.yh-dir:nth-child(n+3) { padding: 20px 24px; justify-content: center; }


/* подстраницы — метки, как «Подборки» в рейтинге: светлая подложка, при наведении темнее */



/* вся карточка компактного направления — ссылка: наведение на карточку двигает стрелку */


.yh6 .yh-dirs > li.yh-dir:nth-child(n+3) .yh-dir__name { align-self: stretch; justify-content: space-between; }


.yh6 .yh-dirs > li.yh-dir { transition: box-shadow .25s ease; }


.yh6 .yh-dirs > li.yh-dir:has(.yh-dir__name:hover) { box-shadow: var(--rt-sh-hover); }


@media (max-width: 1000px) {
 
.yh6 .yh-dirs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 
.yh6 .yh-dirs > li.yh-dir:nth-child(-n+2) { grid-column: span 2; }
 
}


@media (max-width: 600px) {
 
.yh6 .yh-dirs { grid-template-columns: minmax(0, 1fr); }
 
.yh6 .yh-dirs > li.yh-dir:nth-child(-n+2) { grid-column: auto; }
 
}



/* шаг 80 px между секциями после замены блоков: до тёмного блока доверия и после него — по краю панели */


@media (min-width: 1001px) {

  
.yh6 .yh-steps4 { margin-top: 96px; }

  
.yh6 .yh-s5 { margin-top: 72px; }

  
.yh6 .yh-s6 { margin-top: 80px; }

  
.yh6 .yh-final-wrap { margin-top: 64px; }


}



/* ===== «Рейтинги» v4: шесть одинаковых карточек, метки в одну строку ===== */


.yh6 .yh-dirs { grid-template-columns: repeat(3, minmax(0, 1fr)); }


.yh6 .yh-dirs > li.yh-dir, .yh6 .yh-dirs > li.yh-dir:nth-child(-n+2), .yh6 .yh-dirs > li.yh-dir:nth-child(n+3) { grid-column: auto; padding: 22px 24px; gap: 14px; justify-content: flex-start; }


.yh6 .yh-dirs > li.yh-dir:nth-child(n+3) .yh-dir__name { align-self: flex-start; justify-content: flex-start; }


/* метки — одной строкой; не помещаются — прокрутка вбок, справа мягкое затухание (как ряды подборок на сайте) */


.yh6 .yh-dir__subs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -24px; padding-right: 24px; }


.yh6 .yh-dir__subs::-webkit-scrollbar { display: none; }


.yh6 .yh-dir__subs li { flex: none; }


.yh6 .yh-dir__subs a { white-space: nowrap; }


.yh6 .yh-dir__subs.is-more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }


@media (max-width: 1000px) {
 
.yh6 .yh-dirs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 
}


@media (max-width: 600px) {
 
.yh6 .yh-dirs { grid-template-columns: minmax(0, 1fr); }
 
.yh6 .yh-dirs > li.yh-dir { padding: 18px 20px; }
 
.yh6 .yh-dir__subs { margin-right: -20px; padding-right: 20px; }
 
}



/* ===== «Рейтинги»: две колонки, три ряда ===== */


@media (min-width: 601px) {
 
.yh6 .yh-dirs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 
}


/* декоративные метки (страниц ещё нет): не кликаются и не попадают в обход с клавиатуры */



/* ===== «Рейтинги»: вся карточка — переход в рейтинг, метки поверх работают отдельно ===== */


.yh6 .yh-dirs > li.yh-dir { position: relative; cursor: pointer; }


.yh6 .yh-dir__name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }


.yh6 .yh-dir__subs { position: relative; z-index: 1; }


.yh6 .yh-dirs > li.yh-dir:hover { box-shadow: var(--rt-sh-hover); }


.yh6 .yh-dirs > li.yh-dir:hover .yh-dir__name { color: var(--rt-steel); }


.yh6 .yh-dirs > li.yh-dir:hover .yh-dir__name .rt-icon { transform: translateX(2px); color: var(--rt-steel); }


/* декоративные метки не перехватывают нажатие — оно уходит на карточку */


.yh6 .yh-dir__subs li:has(a[data-todo]) { pointer-events: none; }


.page--keyboard .yh6 .yh-dir__name:focus-visible { outline: none; }


.page--keyboard .yh6 .yh-dirs > li.yh-dir:has(.yh-dir__name:focus-visible) { outline: 2px solid var(--rt-brand); outline-offset: 2px; }



/* ===== сверка блоков 1–5 ===== */


/* единый шаг 80 px между блоками (на широких экранах): от края предыдущего блока до заголовка или края белого блока */


@media (min-width: 1001px) {

  
.yh6 .yh-s2v2 { margin-top: 80px; }

  
.yh6 .yh-s3 { margin-top: 80px; }

  
.yh6 .yh-steps4 { margin-top: 104px; }

  
.yh6 .yh-s5 { margin-top: 80px; }


}


/* у Manrope нет начертания 600 — браузер подставлял 700; задаём явно */


.yh6 .yh-cm__growth, .yh6 .yh-c2__badge { font-weight: 700; }


/* шкала размеров: 11 → 12, пустое состояние ленты — как заголовки и текст карточек */


.yh6 .yh-orbit__core-k { font-size: 12px; }


.yh6 .yh-s3__empty-title { font-size: 17px; line-height: 24px; }


.yh6 .yh-s3__empty-text { font-size: 14px; line-height: 21px; }


/* внутренние поля карточек — 24 px, как у шагов и кейсов */


.yh6 .yh-dirs > li.yh-dir, .yh6 .yh-dirs > li.yh-dir:nth-child(-n+2), .yh6 .yh-dirs > li.yh-dir:nth-child(n+3) { padding: 24px; }



/* ===== шаг между секциями — общий токен SEO-страницы --rt-gap-section (64 px, на телефоне 48) ===== */


.yh6 .yh-s2v2, .yh6 .yh-s3, .yh6 .yh-s5, .yh6 .yh-s6, .yh6 .yh-final-wrap { margin-top: var(--rt-gap-section, 64px) !important; }


.yh6 .yh-steps4 { margin-top: calc(var(--rt-gap-section, 64px) + 24px) !important; }


@media (max-width: 1000px) {
 
.yh6 .yh-steps4 { margin-top: var(--rt-gap-section, 48px) !important; }
 
}



/* ===== вкладки ленты и метки подстраниц — общие компоненты SEO-страницы (rt-tabs-switch, rt-links__list); здесь только раскладка ===== */


.yh6 .yh-s3__tabs { display: inline-grid; grid-auto-flow: column; grid-template-columns: none; margin-top: 0; }


.yh6 .yh-s3__tabs [role="tab"] { border: 0; font: inherit; cursor: pointer; background: none; }


.yh6 .yh-s3__tabs [aria-selected="true"] { background: var(--rt-paper); }


.yh6 .yh-dir__subs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -24px 0 0; padding: 0 24px 0 0; list-style: none; position: relative; z-index: 1; }


.yh6 .yh-dir__subs li { flex: none; }


.yh6 .yh-dir__subs a { white-space: nowrap; }


/* на компьютере ряд меток без выступа за край карточки — затухание только при реальном переполнении */


@media (min-width: 1001px) {
 
.yh6 .yh-dir__subs { margin-right: 0; padding-right: 0; }
 
}



/* ===== блок доверия — версия главной (после утверждения перенести в компонент rt-trust на SEO-странице) ===== */




/* подпись — тише, не спорит с цветными словами цитаты */




/* цитата — утверждение, а не второй заголовок страницы */




/* кавычки — почти водяной знак */




/* автор — фото на 12% меньше */






/* «Как считается рейтинг» — продолжение блока */






/* факты — легче: ниже, меньше поля, фон ближе к блоку, текст контрастнее */



















/* ===== блок доверия — компоновка панели: цитата слева, автор и ссылка справа (пустая правая половина заполняется, панель ниже) ===== */




/* факты сразу под панелью — меньше пустоты между цитатой и стопкой */




/* стопка фактов на планшете и телефоне — по краю текста панели */







/* ===== блок доверия — доводка ===== */


/* подпись блока контрастнее, но не синяя */




/* цитата — уже колонкой */




/* кавычки — ещё на четверть тише */




/* факты: меньше поля по вертикали; верхняя (активная) карточка светлее, уходящие вниз — темнее, плавно по глубине из скрипта (--o) */




/* активная карточка светлее деликатно */





/* ===== блок доверия — компоновка по элементам ===== */




/* кавычки убраны: справа теперь автор, водяной знак спорил с ним */









/* факты — как карточки по всему сайту: подзаголовок, под ним пояснение; пояснение шире, без пустой правой половины */





/* пояснения фактов — ровно в две строки у всех четырёх, карточки без пустоты */





/* ===== финальный призыв: короче, больше воздуха, кнопка — главная, рейтинги — тихо ===== */


.yh6 .yh-final.rt-join { padding-top: 48px; padding-bottom: 48px; }


.yh6 .yh-final .rt-join__text { max-width: 44ch; }


.yh6 .yh-final .rt-join__actions { display: flex; align-items: center; gap: 24px; flex-direction: row; }


.yh6 .yh-final .yh-final__more { order: 2; font-size: 14px; font-weight: 500; color: var(--rt-muted); }


.yh6 .yh-final .yh-final__more:hover { color: var(--rt-ink); }


@media (max-width: 700px) {
 
.yh6 .yh-final.rt-join { padding-top: 32px; padding-bottom: 32px; }
 
.yh6 .yh-final .rt-join__actions { flex-direction: column; align-items: stretch; gap: 16px; }
 
.yh6 .yh-final .yh-final__more { align-self: center; }
 
}



/* ===== низ страницы ===== */


/* финальный призыв — законченная белая карточка, как белый блок второго экрана (без растворяющегося низа) */


.yh6 .yh-final.rt-join { background: var(--rt-paper); border-radius: var(--rt-r-card, 16px); box-shadow: none; }


/* строка для агентств — одна строка вместо двух: статус приёма внутри фразы */


.yh6 .yh-agency { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 24px 0 0; padding: 0 48px; font-size: 15px; color: var(--rt-steel); }


.yh6 .yh-agency b { color: var(--rt-ink); font-weight: 700; }


.yh6 .yh-agency .rt-go { font-size: 14px; }


/* до подвала — общий шаг секций */


.yh6 .yh-final-wrap { padding-bottom: var(--rt-gap-section, 64px); margin-bottom: 0; }


@media (max-width: 700px) {
 
.yh6 .yh-agency { padding: 0; font-size: 14px; }
 
}



/* до подвала ровно 64 px: отступ даёт main, у обёрток своих нет */


.yh6 .yh-final-wrap { padding-bottom: 0; }


.yh6 .yh-picked-wrap { margin-top: 0; }



/* строка для агентств — по левому краю текста карточки */


@media (min-width: 701px) {
 
.yh6 .yh-agency { padding: 0 32px; }
 
}



/* ===== блок доверия — микродоводка ===== */


/* подпись блока — на полтона контрастнее */




/* черта у автора — мягче */




/* меньше пустоты между верхней частью и стопкой */




/* слои под активной карточкой — почти сливаются с фоном блока */




/* заголовок в карточке — чуть сильнее, пояснение без изменений */





/* ===== финальный призыв и строка для агентств — уровни ===== */


/* подзаголовок призыва — компактнее, ровно в две строки */


.yh6 .yh-final .rt-join__text { max-width: 40ch; }


/* «Смотреть рейтинги» — ещё на ступень тише (контраст ≈4,6:1, читаемо) */


.yh6 .yh-final .yh-final__more { color: color-mix(in srgb, var(--rt-muted) 90%, var(--rt-paper)); }


/* строка для агентств: вопрос — основной, пояснение — серее, «Стать участником» — действие */


.yh6 .yh-agency { color: var(--rt-muted); }


.yh6 .yh-agency b { color: var(--rt-ink); }


.yh6 .yh-agency .rt-go { color: var(--rt-ink); }



/* «Смотреть рейтинги» на белом — #6E7480 (контраст 4,7:1): тише кнопки, но читаемо */


.yh6 .yh-final .yh-final__more { color: #6E7480; }



/* подпись блока доверия — шрифт и начертание как на SEO-странице (у главной это h2, он наследовал Unbounded) */





/* ===== аудит: исправления ===== */


/* 1. мини-схема на планшете и телефоне: правило «схема 446 px» без медиазапроса перебивало мобильный размер — возвращаем 240 px, одно кольцо, логотипы на нём */


@media (max-width: 1000px) {

  
.yh6 .yh-orbit { width: 240px; height: 240px; --k: 1; scale: none; }

  
.yh6 .yh-orbit__svg path { display: none; }

  
.yh6 .yh-orbit__svg path:nth-child(3) { display: inline; }

  
.yh6 .yh-orbit__layer .yh-orbit__item[data-ring] { --r: 100px !important; }


}


/* 2. ссылки рейтингов на телефоне: точка-разделитель не встаёт в начало строки */


@media (max-width: 700px) {

  
.yh6 .yh-s1__dirs--line { gap: 8px 16px; }

  
.yh6 .yh-s1__dirs--line li:nth-child(n+3)::before { content: none; }


}


/* 3. вкладки ленты на телефоне — в одну строку с прокруткой, без переноса названий */


@media (max-width: 700px) {

  
.yh6 .yh-s3__tabs { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }

  
.yh6 .yh-s3__tabs::-webkit-scrollbar { display: none; }

  
.yh6 .yh-s3__tabs [role="tab"] { flex: none; white-space: nowrap; }


}


/* 4. меньше пустоты под первым экраном: схема и так даёт воздух снизу */


@media (min-width: 1001px) {
 
.yh6 .yh-s1 { padding-bottom: 32px; }
 
}



/* ===== подпись «Пример» над вымышленной карточкой ===== */


.yh-c2__example { display: inline-flex; align-items: center; height: 22px; margin: 0 0 12px; padding: 0 8px; border-radius: var(--rt-r-pill, 999px); background: color-mix(in srgb, var(--rt-bg) 80%, var(--rt-tray, #E4E6EA)); font-size: 12px; font-weight: 500; color: var(--rt-steel); }


.yh-anim .yh-c2__example { opacity: 0; transition: opacity .6s ease .4s; }


.yh-anim.is-in .yh-c2__example { opacity: 1; }



/* ===== метки подстраниц, у которых ещё нет страниц, — текст в виде той же метки (rt-links__list a), без ссылки ===== */


.yh6 .yh-dir__subs .yh-dir__soon { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--rt-r-pill, 999px); background: var(--rt-bg-soft); font-size: 14px; line-height: 1; color: var(--rt-ink); white-space: nowrap; }


.yh6 .yh-dir__subs li:has(> .yh-dir__soon) { pointer-events: none; }



.yh-c2__example { align-self: flex-start; margin-bottom: 10px; }


@media (min-width: 1001px) {
 
.yh6 .yh-c2 > .yh-c2__demo { padding-top: 44px; }
 
}



/* ===== первый экран на телефоне: ссылки рейтингов — до схемы, схема ниже на ~17% ===== */


@media (max-width: 1000px) {

  
.yh6 .yh-s1__dirs { order: 5; margin-top: 20px; }

  
.yh6 .yh-orbit { order: 6; width: 200px; height: 200px; margin: 28px auto 12px; }

  
.yh6 .yh-orbit__layer .yh-orbit__item[data-ring] { --r: 83px !important; width: 32px !important; height: 32px !important; margin: -16px 0 0 -16px !important; }

  
.yh6 .yh-orbit__core { width: 96px; height: 96px; }

  
.yh6 .yh-orbit__core b { font-size: 12px; }

  
.yh6 .yh-orbit__core-k { font-size: 11px; }

  
.yh6 .yh-orbit__steps { bottom: -16px; }


}



/* ===== рейтинги на планшете и телефоне: метки переносятся, без обрезки ===== */


@media (max-width: 1000px) {

  
.yh6 .yh-dir__subs { flex-wrap: wrap; overflow: visible; margin-right: 0; padding-right: 0; row-gap: 6px; }

  
.yh6 .yh-dir__subs.is-more { -webkit-mask-image: none; mask-image: none; }


}



/* ===== второй экран: «Пример · Ваш запрос» одной строкой ===== */


.yh6 .yh-c2__label { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 13px; line-height: 20px; color: var(--rt-steel); }


.yh6 .yh-c2__label .yh-c2__example { margin: 0; height: 22px; align-self: center; }


@media (min-width: 1001px) {
 
.yh6 .yh-c2 > .yh-c2__demo { padding-top: 46px; }
 
}



/* ===== орбиты: кольца замкнуты (штрих чуть длиннее окружности — без щели в точке начала), ближние кольца тише ===== */


.yh-intro .yh-orbit__svg path { stroke-dasharray: 1.02; stroke-dashoffset: 1.02; }


.yh-intro.is-in .yh-orbit__svg path { stroke-dashoffset: 0; }


.yh6 .yh-orbit__svg path:nth-child(1) { stroke: rgba(47,76,140,.15); stroke-width: 1; }


.yh6 .yh-orbit__svg path:nth-child(2) { stroke: rgba(47,76,140,.11); stroke-width: 1; }


.yh6 .yh-orbit__svg path:nth-child(3) { stroke: rgba(47,76,140,.08); stroke-width: 1; }


.yh6 .yh-orbit__svg path:nth-child(4) { stroke: rgba(47,76,140,.05); stroke-width: .75; }


@media (max-width: 1000px) {
 
.yh6 .yh-orbit__svg path:nth-child(3) { stroke: rgba(47,76,140,.14); }
 
}



/* ===== вкладки ленты: на сером фоне страницы дорожка переключателя не видна — даём ей заметную подложку; текст спокойнее ===== */


.yh6 .yh-s3__tabs { background: color-mix(in srgb, var(--rt-bg) 45%, var(--rt-tray, #E4E6EA)); }


.yh6 .yh-s3__tabs [role="tab"] { padding: 7px 14px; }


.yh6 .yh-s3__tabs [role="tab"] b { font-size: 14px; font-weight: 400; }


.yh6 .yh-s3__tabs [aria-selected="true"] b { font-weight: 500; }



@media (min-width: 1001px) {
 
.yh6 .yh-c2__clip { margin-top: 32px; }
 
}



/* ===== орбиты: после прорисовки линии сплошные ===== */


.yh-intro.is-drawn .yh-orbit__svg path { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }



/* ===== «Пример · Ваш запрос»: «Пример» — приглушённым текстом, без плашки ===== */


.yh6 .yh-c2__label { gap: 0; }


.yh6 .yh-c2__label .yh-c2__example { display: inline; height: auto; padding: 0; border-radius: 0; background: none; font-size: 13px; font-weight: 500; color: var(--rt-muted); }


.yh6 .yh-c2__label .yh-c2__example::after { content: "·"; margin: 0 8px; color: var(--rt-faint, #C9CCD3); font-weight: 400; }



/* ===== логотип примера: белая плашка, внутри серый квадрат со скруглением, буква с голубой точкой ===== */


.yh6 .yh-logo-letter { display: grid; place-items: center; padding: 4px; background: var(--rt-paper); box-shadow: 0 0 0 1px rgba(20,22,28,.06); border-radius: var(--rt-r-md, 10px); }


.yh6 .yh-logo-letter i { display: grid; place-items: center; position: relative; width: 100%; height: 100%; border-radius: 7px; background: linear-gradient(145deg, #E9ECF2, #DCE0E8); font-style: normal; font-family: Unbounded, sans-serif; font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: #4A5060; }


.yh6 .yh-logo-letter i::after { content: ""; position: absolute; right: 9px; bottom: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--rt-brand-bright, #3F6FD3); }


/* буква и точка рядом, как «O.» — точка не наезжает на букву */


.yh6 .yh-logo-letter i { display: flex; align-items: baseline; justify-content: center; gap: 1px; padding-top: 2px; font-size: 19px; }


.yh6 .yh-logo-letter i::after { position: static; width: 5px; height: 5px; flex: none; }



/* «Все рейтинги» видна на всех ширинах (на 1001–1240 px раньше пряталась) */


@media (max-width: 1240px) and (min-width: 1001px) {
 
.yh6 .yh-s1__dirs--line li:last-child { display: revert; }
 
.yh6 .yh-s1__dirs--line { column-gap: 12px; }
 
}



/* ===== правки по мобильной версии ===== */


/* финальный призыв: заголовок не прижат к тексту (как в остальных блоках — 8 px) */


.yh6 .yh-final .rt-join__title { margin-bottom: 8px; }



/* седьмой рейтинг — на всю ширину нижнего ряда */


@media (min-width: 601px) {
 
.yh6 .yh-dirs > li.yh-dir:nth-child(7):last-child { grid-column: 1 / -1; }
 
}



/* первый экран, телефон: «Рейтинги:» и ссылки — одной строкой, переносятся как помещаются */


@media (max-width: 1000px) {

  
.yh6 .yh-s1__dirs--line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }

  
.yh6 .yh-s1__dirs-label { flex-basis: auto; width: auto; margin: 0; }


}



/* первый экран, телефон: от схемы видна верхняя половина — две дуги, обрез по нижнему краю центра */


@media (max-width: 1000px) {

  
.yh6 .yh-orbit { width: 300px; height: 300px; margin: 20px auto -96px; clip-path: inset(0 0 102px 0); --k: calc(300 / 420); }

  
.yh6 .yh-orbit__svg path { display: none; }

  
.yh6 .yh-orbit__svg path:nth-child(1), .yh6 .yh-orbit__svg path:nth-child(3) { display: inline; stroke-width: 1; }

  
.yh6 .yh-orbit__svg path:nth-child(1) { stroke: rgba(47,76,140,.16); }

  
.yh6 .yh-orbit__svg path:nth-child(3) { stroke: rgba(47,76,140,.10); }

  
.yh6 .yh-orbit__layer .yh-orbit__item[data-ring="1"] { --r: 80px !important; }

  
.yh6 .yh-orbit__layer .yh-orbit__item[data-ring="3"] { --r: 126px !important; }

  
.yh6 .yh-orbit__layer > .yh-orbit__item:nth-child(5n+1) { --a: 215deg !important; }

  
.yh6 .yh-orbit__layer > .yh-orbit__item:nth-child(5n+2) { --a: 270deg !important; }

  
.yh6 .yh-orbit__layer > .yh-orbit__item:nth-child(5n+3) { --a: 325deg !important; }

  
.yh6 .yh-orbit__layer > .yh-orbit__item:nth-child(5n+4) { --a: 192deg !important; }

  
.yh6 .yh-orbit__layer > .yh-orbit__item:nth-child(5n+5) { --a: 348deg !important; }

  
.yh6 .yh-orbit__steps { display: none; }


}



/* «Вы искали» — карточка в стиле сайта: подпись, условия метками, действие */


.yh6 .yh-resume:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 20px 0 0; padding: 14px 16px; border-radius: var(--rt-r-card, 16px); background: var(--rt-paper); box-shadow: var(--rt-sh-card); font-size: 13px; color: var(--rt-muted); }


.yh6 .yh-resume [data-resume-labels] { display: contents; }


.yh6 .yh-resume .yh-resume__tag { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--rt-r-pill, 999px); background: var(--rt-bg-soft); font-size: 13px; color: var(--rt-ink); }


.yh6 .yh-resume .rt-go { margin-left: auto; font-size: 14px; }


@media (max-width: 600px) {
 
.yh6 .yh-resume .rt-go { margin-left: 0; flex-basis: 100%; }
 
}



/* второй экран, телефон: сначала пример, потом из чего складывается совпадение; карточка в обычном размере */


@media (max-width: 1000px) {

  
.yh6 .yh-c2.rt-box { display: flex; flex-direction: column; }

  
.yh6 .yh-c2__text { display: contents; }

  
.yh6 .yh-c2__text > .yh-sec__title { order: 1; padding: 24px 20px 0; }

  
.yh6 .yh-c2__text > .yh-c2__lead { order: 2; padding: 0 20px; }

  
.yh6 .yh-c2 > .yh-c2__demo { order: 3; padding: 20px 20px 4px; }

  
.yh6 .yh-c2__text > .yh-c2__crit { order: 4; padding: 0 20px; margin-top: 24px; }

  
.yh6 .yh-c2__text > .rt-go { order: 5; margin: 16px 20px 24px; }

  
.yh6 .yh-c2__clip .rt-list { zoom: 1 !important; width: auto !important; }

  
.yh6 .yh-c2__clip .rt-agency { border-radius: var(--rt-r-card, 16px) !important; box-shadow: var(--rt-sh-card) !important; }

  
.yh6 .yh-c2__why { margin-top: 14px; }


}


@media (max-width: 1000px) {

  
.yh6 .yh-s1__dirs--line .yh-s1__dirs-label { flex-basis: auto; width: auto; margin: 0; }

  
/* слой с логотипами масштабирован вместе со схемой (--k), радиусы — в единицах схемы */

  
.yh6 .yh-orbit__layer .yh-orbit__item[data-ring="1"] { --r: 112px !important; }

  
.yh6 .yh-orbit__layer .yh-orbit__item[data-ring="3"] { --r: 176px !important; }


}



@media (max-width: 1000px) {
 
.yh6 .yh-orbit { margin-bottom: -118px; }
 
}



@media (max-width: 1000px) {
 
.yh6 .yh-s1 .yh-orbit, .yh6 .yh-s1 > .yh-orbit { margin: 20px auto -102px !important; }
 
.yh6 .yh-s1 { padding-bottom: 28px; }
 
}



/* ===== правки 2: первый экран, «Вы искали», мобильная схема, лента и второй экран на телефоне ===== */


/* строка рейтингов: разделитель — такая же точка, как в подписи под кнопкой */


@media (min-width: 1001px) {

  
.yh6 .yh-s1__dirs--line li:nth-child(n+3)::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px; border-radius: 50%; background: var(--rt-faint, #C9CCD3); opacity: .8; vertical-align: middle; }


}



/* «Вы искали»: направление и условия метками слева, «Продолжить подбор» справа; без тени */


.yh6 .yh-resume:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 24px; margin: 24px 0 0; padding: 14px 16px 14px 20px; border-radius: var(--rt-r-card, 16px); background: var(--rt-paper); box-shadow: none; font-size: 13px; color: var(--rt-muted); }


.yh6 .yh-resume__what { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }


.yh6 .yh-resume__k { margin-right: 2px; font-size: 13px; color: var(--rt-muted); }


.yh6 .yh-resume .rt-go { margin: 0; font-size: 14px; white-space: nowrap; }


@media (max-width: 700px) {

  
.yh6 .yh-resume:not([hidden]) { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 12px; }

  
.yh6 .yh-resume .rt-go { justify-self: start; }


}



/* ===== мобильная схема: верхняя полусфера, логотипы ходят только по видимым дугам, центр всегда открыт ===== */


@property --yh-swing { syntax: '<angle>'; inherits: true; initial-value: 0deg; }


@keyframes yhSwingVar { from { --yh-spin: -14deg; } to { --yh-spin: 14deg; } }


@media (max-width: 1000px) {

  
.yh6 .yh-s1 .yh-orbit, .yh6 .yh-s1 > .yh-orbit { width: 360px; height: 360px; max-width: 100%; margin: 28px auto -72px !important; clip-path: inset(-40px -40px 72px -40px); --k: calc(360 / 420); }

  
/* дуги — второе и четвёртое кольцо; к низу растворяются, обрез не читается как «оборвано» */

  
.yh6 .yh-orbit__svg path { display: none !important; }

  
.yh6 .yh-orbit__svg path:nth-child(2), .yh6 .yh-orbit__svg path:nth-child(4) { display: inline !important; stroke-width: 1; }

  
.yh6 .yh-orbit__svg path:nth-child(2) { stroke: rgba(47,76,140,.16) !important; }

  
.yh6 .yh-orbit__svg path:nth-child(4) { stroke: rgba(47,76,140,.10) !important; }

  
.yh6 .yh-orbit__svg { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 76%); mask-image: linear-gradient(to bottom, #000 55%, transparent 76%); }

  
/* логотипы крупнее; три на ближней дуге, два на дальней; только верхняя половина */

  
.yh6 .yh-orbit__layer .yh-orbit__item { width: 50px !important; height: 50px !important; margin: -25px 0 0 -25px !important; }

  
.yh6 .yh-orbit__layer .yh-orbit__item .rt-logo { width: 50px; height: 50px; }

  
.yh6 .yh-orbit__layer .yh-orbit__item[data-ring="1"] { --r: 144px !important; }

  
.yh6 .yh-orbit__layer .yh-orbit__item[data-ring="3"] { --r: 200px !important; }

  
.yh6 .yh-orbit__layer > .yh-orbit__item:nth-child(5n+1) { --a: 222deg !important; }

  
.yh6 .yh-orbit__layer > .yh-orbit__item:nth-child(5n+2) { --a: 270deg !important; }

  
.yh6 .yh-orbit__layer > .yh-orbit__item:nth-child(5n+3) { --a: 318deg !important; }

  
.yh6 .yh-orbit__layer > .yh-orbit__item:nth-child(5n+4) { --a: 204deg !important; }

  
.yh6 .yh-orbit__layer > .yh-orbit__item:nth-child(5n+5) { --a: 336deg !important; }

  
/* движение — мягкое покачивание ±14°, логотипы не уходят ниже горизонта */

  
.yh6 .yh-orbit__layer { animation: yhSwingVar 9s ease-in-out infinite alternate !important; }

  
/* центр — сразу белый круг с подписью и ссылкой (на телефоне нет наведения) */

  
.yh6 .yh-orbit__core { width: 124px; height: 124px; }

  
.yh6 .yh-orbit__core::before { opacity: 1 !important; transform: none !important; inset: -12px; }

  
.yh6 .yh-orbit__core > * { transform: none !important; }

  
.yh6 .yh-orbit__core .yh-orbit__core-go { opacity: 1 !important; transform: none !important; font-size: 13px; }

  
.yh6 .yh-orbit__core b { font-size: 13px; }

  
/* подпись под полусферой — завершает блок */

  
.yh6 .yh-orbit__note { display: block !important; position: absolute; left: 0; right: 0; top: calc(50% + 86px); bottom: auto; margin: 0; opacity: 1 !important; transform: none !important; font-size: 12px; line-height: 16px; color: var(--rt-muted); text-align: center; }

  
.yh6 .yh-s1 .yh-resume { order: 7; }


}


@media (max-width: 1000px) and (prefers-reduced-motion: reduce) {
 
.yh6 .yh-orbit__layer { animation: none !important; }
 
}



/* ===== лента проектов на телефоне: ссылка на рейтинг — под лентой ===== */


@media (max-width: 700px) {

  
.yh6 .yh-s3 .rt-cases { display: flex; flex-direction: column; }

  
.yh6 .yh-s3 .rt-cases__head { order: 1; }

  
.yh6 .yh-s3 .yh-s3__panel { order: 2; margin-top: 24px; }

  
.yh6 .yh-s3 .yh-s3__bar { order: 3; margin: 16px 0 0; }

  
.yh6 .yh-s3 .rt-cases__nav { display: none; }


}



/* ===== второй экран на телефоне: ровные расстояния между группами, пример проще ===== */


@media (max-width: 1000px) {

  
.yh6 .yh-c2__text > .yh-c2__lead { margin-top: 8px; }

  
.yh6 .yh-c2 > .yh-c2__demo { padding: 24px 20px 0; }

  
.yh6 .yh-c2__label { margin-bottom: 8px; }

  
.yh6 .yh-c2__why { margin: 16px 0 0; }

  
.yh6 .yh-c2__badge { margin-bottom: 8px; }

  
.yh6 .yh-c2__clip { margin-top: 20px !important; }

  
.yh6 .yh-c2__text > .yh-c2__crit { margin-top: 32px; gap: 16px; }

  
.yh6 .yh-c2__text > .rt-go { margin: 20px 20px 28px; }

  
/* в примере на телефоне — без раскрывающегося списка отраслей: он ничего не объясняет, а место занимает */

  
.yh6 .yh-list-one .rt-agency__industries, .yh6 .yh-list-one .rt-agency__industries-toggle, .yh6 .yh-list-one [data-industries-toggle] { display: none !important; }


}


@media (max-width: 1000px) {

  
.yh6 .yh-list-one .rt-ind-toggle { display: none !important; }

  
.yh6 .yh-orbit__note { left: 50%; right: auto; width: 280px; margin-left: -140px; white-space: normal; text-wrap: balance; }


}



@media (max-width: 1000px) {
 
.yh6 .yh-s1 .yh-orbit, .yh6 .yh-s1 > .yh-orbit { margin-bottom: -44px !important; clip-path: inset(-40px -40px 44px -40px); }
 
}


/* планшет: строка рейтингов — как на компьютере, точки-разделители без лишних промежутков */


@media (min-width: 701px) and (max-width: 1000px) {

  
.yh6 .yh-s1__dirs--line { gap: 6px 0; }

  
.yh6 .yh-s1__dirs--line .yh-s1__dirs-label { margin-right: 10px; }

  
.yh6 .yh-s1__dirs--line li:nth-child(n+3)::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px; border-radius: 50%; background: var(--rt-faint, #C9CCD3); opacity: .8; vertical-align: middle; }


}



/* ===== первый экран: логотипы появляются сразу в своём размере — только проявляются, без «дорастания» ===== */


.yh-intro .yh-orbit__item.is-on .rt-logo { scale: 1 !important; opacity: 0; transition-property: opacity !important; transition-duration: .6s !important; transition-timing-function: ease !important; }


.yh-intro.is-in .yh-orbit__item.is-on .rt-logo { opacity: 1; }



/* ===== ссылки — только варианты компонентов, без красного =====
   1) rt-go — основная ссылка со стрелкой: цвет текста не меняется, при наведении сдвигается стрелка;
   2) rt-go--muted / второстепенная — серый → цвет текста;
   3) название-ссылка (карточки, направления) — как .rt-agency__name: при наведении подчёркивание;
   4) на тёмном фоне — 75% белого → белый. */


.yh6 .rt-go:hover, .yh6 .yh-orbit__core .yh-orbit__core-go, .yh6 .yh-orbit__core:hover .yh-orbit__core-go, .yh6 .yh-orbit__core .yh-orbit__core-go:hover { color: var(--rt-ink); }


.yh6 .yh-dchip--all, .yh6 .yh-s1__dirs--line .yh-dchip--all, .yh6 .yh-final .yh-final__more { color: var(--rt-steel); }


.yh6 .yh-dchip--all:hover, .yh6 .yh-s1__dirs--line .yh-dchip--all:hover, .yh6 .yh-final .yh-final__more:hover { color: var(--rt-ink); }


.yh6 .yh-s1__dirs--line .yh-dchip:hover { color: var(--rt-ink); text-decoration-color: currentColor; }


.yh6 .yh-dchip:hover { background: transparent; }


.yh6 .yh-s3 .rt-case__title a:hover, .yh6 .yh-s3 .rt-case__agency:hover { color: inherit; text-decoration-line: underline; text-underline-offset: 3px; }


.yh6 .yh-dir__name:hover, .yh6 .yh-dirs > li.yh-dir:hover .yh-dir__name { color: var(--rt-ink); }


.yh6 .yh-dir__name:hover .rt-icon, .yh6 .yh-dirs > li.yh-dir:hover .yh-dir__name .rt-icon { color: inherit; }



/* блок доверия и финал: появление при прокрутке */


.yh-final-wrap.yh-up > * { opacity: 0; transform: translateY(8px); transition: opacity .7s cubic-bezier(.25,.1,.25,1), transform .7s cubic-bezier(.25,.1,.25,1); }


.yh-final-wrap.yh-up.is-in > * { opacity: 1; transform: none; }








.yh-final-wrap.yh-up.is-in > :nth-child(2) { transition-delay: .15s; }



/* фраза в блоке доверия — цитата: «ёлочки», открывающая вынесена за левый край (висячая пунктуация) */





/* строка рейтингов: промежуток только за счёт точки — 10 px с обеих сторон на всех ширинах */


@media (min-width: 701px) {
 
.yh6 .yh-s1__dirs--line { column-gap: 0 !important; }
 
.yh6 .yh-s1__dirs--line .yh-s1__dirs-label { margin-right: 10px; }
 
}



/* ===== мобильная схема: ровные круглые логотипы 50 px и у каждого своя траектория и скорость ===== */


@keyframes yhSwingA { from { --yh-spin: -16deg; } to { --yh-spin: 16deg; } }


@keyframes yhSwingB { from { --yh-spin: -10deg; } to { --yh-spin: 10deg; } }


@keyframes yhSwingC { from { --yh-spin: 12deg; } to { --yh-spin: -12deg; } }


@media (max-width: 1000px) {

  
.yh6 .yh-orbit__layer .yh-orbit__item[data-ring] { width: 50px !important; height: 50px !important; margin: -25px 0 0 -25px !important; }

  
.yh6 .yh-orbit__layer .yh-orbit__item[data-ring] .rt-logo { width: 100% !important; height: 100% !important; aspect-ratio: 1; object-fit: contain; }

  
/* слой стоит, качается каждый логотип сам: разный размах, период и фаза — движение не синхронное */

  
.yh6 .yh-orbit__layer { animation: none !important; }

  
.yh6 .yh-orbit__layer > .yh-orbit__item:nth-child(5n+1) { animation: yhSwingA 8.5s ease-in-out -1s infinite alternate; }

  
.yh6 .yh-orbit__layer > .yh-orbit__item:nth-child(5n+2) { animation: yhSwingC 11s ease-in-out -4s infinite alternate; }

  
.yh6 .yh-orbit__layer > .yh-orbit__item:nth-child(5n+3) { animation: yhSwingA 9.5s ease-in-out -6s infinite alternate; }

  
.yh6 .yh-orbit__layer > .yh-orbit__item:nth-child(5n+4) { animation: yhSwingB 12s ease-in-out -2s infinite alternate; }

  
.yh6 .yh-orbit__layer > .yh-orbit__item:nth-child(5n+5) { animation: yhSwingB 10s ease-in-out -7s infinite alternate-reverse; }


}


@media (max-width: 1000px) and (prefers-reduced-motion: reduce) {
 
.yh6 .yh-orbit__layer > .yh-orbit__item { animation: none !important; }
 
}



/* ===== второй экран на телефоне: «что ввели» — на фоне страницы, «что нашлось» — белой карточкой, уходящей за правый край, как на компьютере ===== */


@media (max-width: 1000px) {

  
.yh6 .yh-c2.rt-box { background: transparent; box-shadow: none; border-radius: 0; padding: 0; overflow: visible; }

  
.yh6 .yh-c2__text > .yh-sec__title { padding: 0; }

  
.yh6 .yh-c2__text > .yh-c2__lead { padding: 0; }

  
.yh6 .yh-c2 > .yh-c2__demo { padding: 24px 0 0; overflow: visible; }

  
.yh6 .yh-c2__text > .yh-c2__crit { padding: 0; }

  
.yh6 .yh-c2__text > .rt-go { margin: 20px 0 0; }

  
/* «что нашлось»: стрелка-связка от запроса к результату и карточка до правого края экрана */

  
.yh6 .yh-c2__clip { position: relative; margin: 20px calc(-1 * var(--pad, 16px)) 0 0 !important; padding: 0; overflow: visible; }

  
.yh6 .yh-c2__clip .rt-agency { border-radius: var(--rt-r-card, 16px) 0 0 var(--rt-r-card, 16px) !important; box-shadow: var(--rt-sh-card) !important; }

  
.yh6 .yh-c2__why li { color: var(--rt-text, #3A3F4A); }


}



@media (max-width: 1000px) {
 
.yh6 .yh-orbit__layer .yh-orbit__item[data-ring="3"] { --r: 184px !important; }
 
}



/* ===== блок доверия: анимация внутри =====
   1) ключевые слова цитаты «прокрашиваются» слева направо из белого в голубой — сначала «считает система», затем «с подтверждённым результатом»;
   2) черта у подписи автора прорастает сверху вниз;
   3) без «стопки» (телефон, планшет) — факты поднимаются по одному при прокрутке. */















/* ===== телефон: логотипы 40 px, дальние — ровно на дальней дуге ===== */


@media (max-width: 1000px) {

  
.yh6 .yh-orbit__layer .yh-orbit__item[data-ring] { width: 40px !important; height: 40px !important; margin: -20px 0 0 -20px !important; }

  
.yh6 .yh-orbit__layer .yh-orbit__item[data-ring="3"] { --r: 200px !important; }


}



/* ===== второй экран на телефоне: поля по краям как у остальных блоков; карточка-пример — обычная карточка с отступами, без выхода за край ===== */


@media (max-width: 1000px) {

  
.yh6 .yh-s2v2 .yh-c2.rt-box { padding: 0 var(--pad, 16px); }

  
.yh6 .yh-c2__clip { margin: 20px 0 0 !important; }

  
.yh6 .yh-c2__clip .rt-agency { border-radius: var(--rt-r-card, 16px) !important; }


}



/* ===== блок доверия: построчное появление цитаты, затем автор (через 1 с), затем стопка (ещё через 1 с) ===== */








/* выделенные слова прокрашиваются по одному слову слева направо, когда их строка уже появилась */








/* автор и ссылка — через 1 с после последней строки */








/* стопка фактов — ещё через 1 с */








/* «с подтверждённым результатом» — на компьютере одной строкой, на телефоне переносится как помещается */





/* ===== телефон: цитата крупнее — это заголовок блока ===== */





/* ===== телефон: логотипы на ближней дуге не сближаются — центры через 50°, размах ±12° (между соседями всегда ≥ 26°, это больше логотипа) ===== */


@keyframes yhSwingD { from { --yh-spin: -12deg; } to { --yh-spin: 12deg; } }


@media (max-width: 1000px) {

  
.yh6 .yh-orbit__layer > .yh-orbit__item:nth-child(5n+1) { --a: 220deg !important; animation: yhSwingD 8.5s ease-in-out -1s infinite alternate; }

  
.yh6 .yh-orbit__layer > .yh-orbit__item:nth-child(5n+2) { --a: 270deg !important; animation: yhSwingD 11s ease-in-out -4s infinite alternate-reverse; }

  
.yh6 .yh-orbit__layer > .yh-orbit__item:nth-child(5n+3) { --a: 320deg !important; animation: yhSwingD 9.5s ease-in-out -6s infinite alternate; }

  
.yh6 .yh-orbit__layer > .yh-orbit__item:nth-child(5n+4) { --a: 204deg !important; animation: yhSwingB 12s ease-in-out -2s infinite alternate; }

  
.yh6 .yh-orbit__layer > .yh-orbit__item:nth-child(5n+5) { --a: 336deg !important; animation: yhSwingB 10s ease-in-out -7s infinite alternate-reverse; }


}


/* слова — обычные строчные элементы (не блоки): переносы и неразрывные пробелы работают как в обычном тексте; подъём — через top */






/* ===== главная: наведение — как на всём сайте (см. rt-main): подчёркнутые ссылки теряют линию, ссылки без линии становятся серыми ===== */
.yh6 .yh-s1__dirs--line .yh-dchip:hover { color: var(--rt-ink); text-decoration-color: transparent; }
.yh6 .yh-s3 .rt-case__title a:hover, .yh6 .yh-s3 .rt-case__agency:hover { color: var(--rt-steel); text-decoration-line: none; }
.yh6 .yh-dir__name:hover, .yh6 .yh-dirs > li.yh-dir:hover .yh-dir__name { color: var(--rt-steel); }

/* строка шорт-листа на телефоне: как на SEO-странице — во всю ширину и вплотную к низу экрана, без зазора */
@media (max-width: 700px) { .yh-picked-wrap { bottom: 0; } }