/* Taipy - витрина, страница «Источники» (/product/sources/, HANDOFF-16).
   Общие блоки (первый экран, главы, факт-лист, FAQ, старт, «Дальше») - классы
   showcase.css; здесь только свое, префикс sr-.

   Первый экран - в логике семьи (главная, /product/, Аналитика, Студия): тот
   же стол у окна, ясный полдень, живая «Тема дня» в экране планшета (общая
   посадка data-quad из showcase.js). Главы: модуль напечатан на пустой
   карточке арта (vt-quad--paper); пока сцены нет - на белой карточке-заглушке. */

/* ---------- первый экран ---------- */
.sr-hero__art--ph { background: linear-gradient(120deg, #FFF3DE 0%, #F7E6F1 48%, #E9E4FB 100%); }
.sr-kicker { margin-bottom: 12px; }
/* вторая фраза заголовка переносится сама по себе и ровно: «Каждый день -
   / свежая тема.», без висячего «тема.» на узком экране */
.sr-h1-b { display: inline-block; text-wrap: balance; }
/* стекло плотнее, чем на /product/: за карточкой - пестрая листва, и при
   размытии она ложилась синим пятном. Только на десктопе: ниже 1200px
   showcase.css убирает стекло совсем, текст стоит на бумаге */
@media (min-width: 1200px) {
  .sr-hero .vt-glass { background: radial-gradient(85% 60% at 100% 0%, rgba(255, 225, 200, .2) 0%, transparent 55%), linear-gradient(135deg, rgba(255, 255, 255, .66) 0%, rgba(255, 255, 255, .5) 100%); }
}
.sr-trust-k { margin-right: 4px; }
/* знаки площадок - плитки приложений одного размера (как в Аналитике) */
.sr-marks { display: inline-flex; align-items: center; gap: 6px; }
.sr-marks__i, .sr-marks__i svg { display: block; width: 20px; height: 20px; }
.sr-marks__i svg { border-radius: 5px; box-shadow: 0 1px 2px rgba(23, 19, 59, .12); }
/* строка доверия в узкой карточке переносится: без висящего разделителя,
   как в Аналитике */
.sr-hero .vt-hero__trust .vt-sep { display: none; }
.sr-hero .vt-hero__trust { gap: 8px 18px; }

/* «Тема дня» в экране планшета: 380x270 (десктоп), 260x338 (--m, телефон).
   Все темы лежат в одной клетке сетки - высота по самой длинной, при смене
   ниши ничего не прыгает. Тонкая шкала экранов витрины: подписи 11-11.5,
   текст 12, заголовок 17. Кнопки источников внизу нажимаются (JS страницы). */
.sr-today { width: 100%; height: 100%; display: flex; flex-direction: column; padding: 13px 16px 12px; background: linear-gradient(180deg, #FFFFFF 0%, #FAF9FF 100%); color: #1F1A3A; }
.sr-today__bar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid #EFEDF8; }
.sr-today__lbl { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vt-indigo); }
.sr-today__lbl i { width: 6px; height: 6px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .16); }
.sr-today__day { height: 20px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 11px; font-weight: 600; color: #6F6990; background: #F3F1FA; }
/* тема - по центру между шапкой и кнопками источников: высота стопки по самой
   длинной теме, поля над и под ней поровну */
.sr-today__stack { display: grid; margin-block: auto; padding-block: 12px; }
.sr-today__item {
  grid-area: 1 / 1; display: grid; gap: 8px; align-content: start;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .45s var(--vt-ease-in), transform .6s var(--vt-ease-in), visibility 0s linear .6s;
  --ink: var(--vt-indigo); --ink-2: #6D5AE6;
}
.sr-today__item.sr-ink--pink { --ink: var(--vt-pink-ink); --ink-2: var(--vt-pink); }
.sr-today__item.sr-ink--apricot { --ink: var(--vt-apricot-ink); --ink-2: var(--vt-apricot); }
.sr-today__item.sr-ink--lilac { --ink: #6D5AE6; --ink-2: var(--vt-lilac); }
/* inherit, а не visible: без JS окно интерфейса не посажено и скрыто - тема
   не должна вылезать из него на стену */
.sr-today__item.is-on { opacity: 1; visibility: inherit; transform: none; transition: opacity .55s var(--vt-ease-in) .12s, transform .7s var(--vt-ease-in) .12s, visibility 0s; }
.sr-today__niche { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; color: var(--ink); }
.sr-today__ico { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(135deg, var(--ink-2), var(--ink)); }
.sr-today__ico svg { width: 12px; height: 12px; }
.sr-today__t { font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -.012em; text-wrap: balance; }
.sr-today__via { font-size: 12px; line-height: 1.45; color: #6F6990; }
.sr-today__via b { display: inline-flex; align-items: center; height: 20px; margin-right: 6px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 650; color: var(--ink); background: color-mix(in srgb, var(--ink-2) 13%, transparent); vertical-align: 1px; }
.sr-today__src { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid #EFEDF8; }
.sr-today__src-k { font-size: 11px; font-weight: 600; color: #8C86A8; }
.sr-today__btns { display: flex; gap: 5px; }
.sr-today__btns button { pointer-events: auto; cursor: pointer; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; display: grid; place-items: center; font: inherit; color: #8F89AB; background: #F3F1FA; transition: background .25s, color .25s, box-shadow .25s; }
.sr-today__btns button:hover { color: var(--vt-indigo); background: #E9E6FA; }
.sr-today__btns button.is-on { color: #fff; background: var(--vt-indigo); box-shadow: 0 6px 14px -8px rgba(79, 70, 229, .8); }
.sr-today__btns button:disabled { cursor: default; opacity: .5; }
.sr-today__btns svg { width: 14px; height: 14px; flex: none; }
.sr-today__btns span { display: none; }
/* телефон: вертикальный экран 260x338 - источники списком с подписями,
   последний во всю ширину */
.sr-today--m { padding: 14px 14px 12px; }
.sr-today--m .sr-today__t { font-size: 16px; }
.sr-today--m .sr-today__src { display: block; padding-top: 10px; }
.sr-today--m .sr-today__src-k { display: block; margin-bottom: 7px; }
.sr-today--m .sr-today__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.sr-today--m .sr-today__btns button { width: auto; height: 28px; padding: 0 9px; display: flex; align-items: center; gap: 7px; justify-content: flex-start; }
.sr-today--m .sr-today__btns button:last-child { grid-column: 1 / -1; }
.sr-today--m .sr-today__btns span { display: inline; font-size: 12px; font-weight: 600; }

.sr-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 9px; white-space: nowrap;
  font-size: 12.5px; font-weight: 650; color: #3F37C9; background: rgba(79, 70, 229, .08);
}
.sr-chip svg { width: 14px; height: 14px; flex: none; }

/* ---------- живые цифры ----------
   Одна белая панель на бумаге, плитки одной высоты через тонкие
   разделители. Сверху у плитки - маленький визуал кодом (высота 40), ниже
   число, заголовок и подсказка - каждый по одной строке. */
.sr-scale { padding-block: clamp(40px, 5vw, 64px) 8px; }
.sr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--vt-line); border-radius: 24px; box-shadow: 0 30px 60px -46px rgba(23, 19, 59, .38), 0 2px 6px -3px rgba(23, 19, 59, .06); }
.sr-stat { display: grid; align-content: start; min-width: 0; padding: 26px 24px 24px; }
.sr-stat + .sr-stat { border-left: 1px solid var(--vt-line); }
.sr-stat__viz { display: flex; align-items: center; height: 40px; }
.sr-stat__n { margin-top: 18px; font-size: clamp(36px, 3.2vw, 44px); font-weight: 700; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--vt-ink); }
.sr-stat__t { margin-top: 10px; font-size: 15px; font-weight: 650; line-height: 1.35; letter-spacing: -.01em; color: var(--vt-ink); }
.sr-stat__h { margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--vt-ink-3); text-wrap: balance; }
.sr-scale__week { margin-top: 18px; text-align: center; font-size: 14px; color: var(--vt-ink-3); }
/* краски визуалов */
.sr-ink-indigo { --ink: #4F46E5; }
.sr-ink-violet { --ink: #7C3AED; }
.sr-ink-pink { --ink: #FF48B0; }
.sr-ink-apricot { --ink: #E88A2F; }
.sr-ink-lilac { --ink: #8B7CF6; }
/* сферы: медальоны внахлест и «+N» */
.sr-viz-spheres i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; background: var(--ink); box-shadow: 0 0 0 2.5px #fff; }
.sr-viz-spheres i + i { margin-left: -7px; }
.sr-viz-spheres i svg { width: 15px; height: 15px; }
.sr-viz-spheres em { margin-left: 8px; height: 26px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; font-style: normal; font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: #57526E; background: #F2F0FA; }
/* проверенные ленты: строки с галочками */
.sr-viz-feeds { width: 124px; height: 44px; }
.sr-viz-feeds rect { fill: #ECE9F8; }
.sr-viz-feeds path { stroke: #16A34A; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* шесть видов источников */
.sr-viz-kinds { gap: 5px; }
.sr-viz-kinds i { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; color: var(--ink); background: color-mix(in srgb, var(--ink) 12%, #fff); }
.sr-viz-kinds i svg { width: 15px; height: 15px; }
/* пульс: линия и точка «сейчас» */
.sr-viz-pulse { width: 124px; height: 44px; overflow: visible; }
.sr-viz-pulse path { stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sr-viz-pulse__ping { fill: rgba(79, 70, 229, .28); transform-box: fill-box; transform-origin: center; animation: sr-ping 2.4s var(--vt-ease-in) infinite; }
@keyframes sr-ping { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(3.2); opacity: 0; } }

/* ---------- главы источников ---------- */
.sr-more { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--vt-indigo); text-decoration: none; }
.sr-more svg { width: 16px; height: 16px; transition: transform .2s var(--vt-ease-in); }
.sr-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.sr-more:hover svg { transform: translateX(3px); }

/* заглушка сцены, пока арта нет: печатный стол и белая карточка на месте
   будущей пустой карточки арта */
.sr-scene--ph .vt-art { background: radial-gradient(120% 90% at 18% 8%, #F8F3EA 0%, #F0E8DB 58%, #E9DFCF 100%); }
.sr-ph__dots {
  position: absolute; left: 3%; top: 10%; width: 36%; aspect-ratio: 1; border-radius: 50%; opacity: .5;
  background: radial-gradient(var(--c) 1.6px, transparent 2.1px) 0 0 / 9px 9px;
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 74%); mask-image: radial-gradient(closest-side, #000 58%, transparent 74%);
}
.sr-ph__dots--indigo { --c: #6F66F0; }
.sr-ph__dots--pink { --c: #FF5CB8; }
.sr-ph__dots--apricot { --c: #F29A45; }
.sr-ph__card { position: absolute; border-radius: 10px; background: #fff; box-shadow: 0 22px 40px -26px rgba(23, 19, 59, .5), 0 2px 6px -2px rgba(23, 19, 59, .12); }

/* ---------- модули глав: напечатаны на карточке (multiply) ---------- */
.sr-card { width: 100%; height: 100%; padding: 16px 20px; display: flex; flex-direction: column; gap: 9px; color: #221D3A; font-size: 13.5px; line-height: 1.4; }
.sr-card__k { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vt-indigo); }
.sr-card__k svg { width: 14px; height: 14px; flex: none; }
.sr-card__k i { width: 8px; height: 8px; border-radius: 50%; background: var(--vt-indigo); box-shadow: 0 0 0 4px rgba(79, 70, 229, .14); }
.sr-card__k--row { justify-content: space-between; }
.sr-card__k--row span { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: #8C86A8; }
.sr-card__t { font-size: 17.5px; font-weight: 700; line-height: 1.28; letter-spacing: -.012em; text-wrap: balance; }
.sr-card__why { color: #4B4665; }
.sr-card__why b { color: #221D3A; }
.sr-card__q { font-size: 12.5px; color: #9A94B5; }
.sr-card__k { white-space: nowrap; }
.sr-card__top, .sr-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sr-card__foot { margin-top: auto; padding-top: 10px; border-top: 1px dashed rgba(79, 70, 229, .22); }
.sr-sphere { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 9px; font-size: 13px; font-weight: 650; color: #B8650F; background: rgba(246, 160, 77, .16); white-space: nowrap; }
.sr-sphere svg { width: 15px; height: 15px; }
/* тема дня из ленты сферы: 316x239, тонкая шкала */
.sr-trend { padding: 16px 18px 14px; gap: 8px; font-size: 12.5px; line-height: 1.45; }
.sr-trend .sr-sphere { height: 26px; font-size: 12px; }
.sr-trend .sr-sphere svg { width: 14px; height: 14px; }
.sr-trend .sr-chip { height: 26px; font-size: 12px; }
.sr-trend .sr-card__foot .sr-card__q { font-size: 11.5px; }

/* каналы-образцы: каждая строка стоит на конце своей нити арта (--y - доля
   высоты карточки), нить входит в строку точкой-стыком на краю карточки и
   пунктиром до знака площадки. Знак - настоящий, в своем цвете; краска нити
   (--c) - у стыка, пунктира и рамки знака. Тема от каналов - одной строкой
   внизу карточки */
.sr-chan { position: relative; padding: 0; }
.sr-chan > .sr-card__k { position: absolute; left: 24px; right: 22px; top: 17px; }
.sr-chan__list { position: absolute; inset: 0; }
.sr-chan__list li { position: absolute; left: 0; right: 22px; top: var(--y); transform: translateY(-50%); height: 30px; padding-left: 24px; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; column-gap: 11px; }
.sr-chan__port { position: absolute; left: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--c); }
.sr-chan__port::after { content: ""; position: absolute; left: 10px; top: 3px; width: 14px; height: 2px; background: radial-gradient(circle, var(--c) .95px, transparent 1.3px) 0 0 / 4px 2px repeat-x; }
.sr-chan__list b { min-width: 0; font-size: 13.5px; font-weight: 650; line-height: 30px; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; }
/* подпись площадки мельче имени: сдвиг на 1 px ставит их на одну базовую линию */
.sr-chan__list em { position: relative; top: 1px; font-style: normal; font-size: 12px; font-weight: 500; line-height: 30px; color: #8C86A8; }
.sr-mark { width: 24px; height: 24px; border-radius: 6.5px; display: block; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px color-mix(in srgb, var(--c, #1C1917) 55%, #fff); }
.sr-mark img, .sr-mark svg { display: block; width: 24px; height: 24px; }
.sr-chan__topic { position: absolute; left: 24px; right: 22px; bottom: 16px; height: 30px; padding: 0 11px; display: flex; align-items: center; gap: 5px; border-radius: 9px; background: rgba(255, 72, 176, .08); font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; color: #221D3A; }
.sr-chan__topic > span { font-weight: 600; color: #D6268D; }
.sr-web__h, .sr-web__q > span, .sr-web__fact > span, .sr-ideas__words > span, .sr-doc__to { font-size: 11.5px; font-weight: 600; color: #8C86A8; }

/* поиск в интернете: вертикальная карточка 310x386, тонкая шкала (подписи
   11.5, текст 12.5, запрос 13.5), блоки с воздухом, факт прижат к низу */
.sr-web { padding: 20px 20px 20px; gap: 0; }
.sr-web .sr-card__k { margin-bottom: 14px; }
.sr-web__q { display: grid; gap: 3px; padding: 10px 12px 11px; border-radius: 10px; background: rgba(79, 70, 229, .06); }
.sr-web__q b { font-size: 13.5px; font-weight: 650; line-height: 1.35; color: #2E2790; text-wrap: balance; }
.sr-web__h { display: flex; justify-content: space-between; margin: 18px 0 2px; }
.sr-web__hits { display: grid; }
.sr-web__hits li { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 35px; border-bottom: 1px solid rgba(79, 70, 229, .09); }
.sr-web__hits li:last-child { border-bottom: 0; }
.sr-web__hits b { min-width: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; }
/* полезность - ровная плашка словом одной ширины, внутри карточки */
.sr-use { flex: none; width: 66px; height: 21px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 650; color: #8C86A8; background: #F1EFF7; }
.sr-use--hi { color: #fff; background: var(--vt-indigo); }
.sr-use--mid { color: #3F37C9; background: rgba(79, 70, 229, .12); }
.sr-web__fact { margin-top: auto; display: grid; gap: 3px; padding: 10px 12px 11px; border-radius: 10px; background: rgba(246, 160, 77, .13); font-size: 12.5px; line-height: 1.45; }
.sr-web__fact > span { color: #B8650F; }

/* документ */
.sr-doc { position: relative; padding: 18px 18px 18px; gap: 0; }
.sr-doc__file { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13.5px; color: #B8650F; }
.sr-doc__file svg { width: 17px; height: 17px; flex: none; }
.sr-doc__file b { color: #221D3A; font-weight: 700; }
.sr-doc__file span { font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 2px 6px; border-radius: 5px; color: #B8650F; background: rgba(246, 160, 77, .16); }
.sr-doc__t { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sr-doc__t td { height: 30px; padding: 0 8px; border-bottom: 1px solid rgba(184, 101, 15, .14); white-space: nowrap; }
.sr-doc__t td:last-child { text-align: right; font-weight: 650; }
.sr-doc__t td:nth-child(2) { color: #7A7494; }
.sr-doc__t tr.is-hit td { background: rgba(246, 160, 77, .22); font-weight: 650; }
.sr-doc__t tr.is-hit td:first-child { box-shadow: inset 3px 0 0 #F29A45; }
.sr-doc__to { display: flex; align-items: center; gap: 6px; margin: auto 0 7px; padding-top: 14px; }
.sr-doc__to svg { width: 14px; height: 14px; }
.sr-doc__post { padding: 10px 12px 11px; border-radius: 10px; background: rgba(79, 70, 229, .06); font-size: 12.5px; line-height: 1.5; }
.sr-doc__post mark { color: inherit; font-weight: 700; padding: 0 3px; border-radius: 4px; background: rgba(246, 160, 77, .38); }

/* идеи нейросети: вертикальная карточка 290x385. «Ваши слова» - тихой
   строкой под разделителем, три идеи делят оставшуюся высоту поровну (1fr),
   заголовки идей 600 и balance - без висячих слов */
.sr-ideas { padding: 20px 20px 16px; gap: 0; }
.sr-ideas .sr-card__k { margin-bottom: 12px; }
.sr-ideas__words { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid rgba(79, 70, 229, .10); font-size: 12.5px; font-weight: 500; line-height: 1.4; color: #4B4665; text-wrap: balance; }
.sr-ideas__list { flex: 1; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.sr-ideas__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: center; column-gap: 8px; row-gap: 6px; border-bottom: 1px solid rgba(79, 70, 229, .08); }
.sr-ideas__list li:last-child { border-bottom: 0; }
.sr-ideas__list b { grid-column: 1 / -1; grid-row: 2; font-size: 13.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; text-wrap: balance; }
.sr-ideas__list em { grid-row: 1; font-style: normal; font-size: 11.5px; color: #8C86A8; white-space: nowrap; overflow: hidden; }
.sr-tag { grid-row: 1; justify-self: start; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 650; }
.sr-tag--indigo { color: #3F37C9; background: rgba(79, 70, 229, .10); }
.sr-tag--apricot { color: #B8650F; background: rgba(246, 160, 77, .18); }
.sr-tag--pink { color: #D6268D; background: rgba(255, 72, 176, .12); }

/* серия: план серии напечатан на пустой карточке сцены S6 (300x365), пять
   постов делят высоту поровну */
.sr-series { padding: 20px 20px 18px; gap: 0; }
.sr-series__hd { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(79, 70, 229, .10); }
.sr-series__hd p { display: grid; gap: 1px; min-width: 0; }
.sr-series__hd b { font-size: 14px; font-weight: 700; }
.sr-series__hd span { font-size: 11.5px; color: #6F6990; }
.sr-series__ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(135deg, #FF48B0, #D6268D); }
.sr-series__ico svg { width: 16px; height: 16px; }
.sr-series__list { flex: 1; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); }
.sr-series__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; border-bottom: 1px solid rgba(79, 70, 229, .08); }
.sr-series__list li:last-child { border-bottom: 0; }
.sr-series__list i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; color: #3F37C9; background: rgba(79, 70, 229, .10); }
.sr-series__list b { min-width: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.sr-series__list span { font-size: 11.5px; font-weight: 600; color: #8C86A8; }
.sr-series__foot { display: flex; align-items: center; gap: 7px; padding-top: 11px; border-top: 1px dashed rgba(255, 72, 176, .32); font-size: 12px; font-weight: 600; color: #3A3456; }
.sr-series__foot svg { width: 14px; height: 14px; color: var(--vt-pink-ink); flex: none; }

/* ---------- как Taipy выбирает тему ----------
   Одна широкая сцена печатного стола (слот S7), разрезанная на четыре плитки.
   На десктопе плитки стоят вплотную и читаются одной сценой: они делят поровну
   полосу арта вокруг карточек (--bx - начало полосы, --band - ширина, доли
   ширины арта), так что каждая карточка стоит по центру своей плитки. Под
   плиткой - номер, заголовок и строка шага от левого края карточки (--cf -
   ширина карточки в долях плитки; subgrid ставит заголовки и тексты соседей на
   одну линию). На планшете (2 x 2) и телефоне плитка - крупный кадр своей
   карточки: карточка шириной --cardw (не шире 70% плитки), арт вокруг нее по
   --cwf (ширина карточки в долях арта) и фокусу --mfx/--mfy. */
.sr-logic { padding-block: clamp(64px, 8vw, 112px); background: linear-gradient(180deg, #F7F4FE 0%, #F2EFFB 100%); border-block: 1px solid #ECE8F8; }
.sr-logic .vt-sec-head .vt-step { font-size: 12px; line-height: 1.5; }
.sr-flow { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); max-width: 1480px; margin: 0 auto; padding-inline: 24px; }
/* тень сцены - одна на все четыре плитки: подложка под первой строкой сетки */
.sr-flow::before { content: ""; z-index: -1; grid-area: 1 / 1 / 2 / -1; border-radius: 28px; box-shadow: var(--vt-shadow-scene); pointer-events: none; }
.sr-flow__step { display: grid; grid-row: 1 / span 4; grid-template-rows: subgrid; min-width: 0; }
.sr-flow__scene { position: relative; overflow: hidden; aspect-ratio: calc(var(--arn) * var(--band, 1) / 4); container-type: size; background: #F2ECE2; }
.sr-flow__step:first-child .sr-flow__scene { border-radius: 28px 0 0 28px; }
.sr-flow__step:last-child .sr-flow__scene { border-radius: 0 28px 28px 0; }
.sr-flow__scene .vt-art { width: calc(400% / var(--band, 1)); left: calc(-400% * var(--bx, 0) / var(--band, 1) - var(--i) * 100%); }
.sr-flow__n, .sr-flow__step h3, .sr-flow__step h3 + p { margin-left: calc(50% - 50% * var(--cf, .76)); margin-right: 12px; }
.sr-flow__n { margin-top: 26px; }
.sr-flow__n i { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-style: normal; font-size: 13px; font-weight: 700; color: #fff; background: var(--vt-indigo); box-shadow: 0 0 0 4px rgba(79, 70, 229, .12); }
.sr-flow__step h3 { margin-top: 12px; font-size: 17px; font-weight: 650; line-height: 1.3; letter-spacing: -.012em; text-wrap: balance; }
.sr-flow__step h3 + p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--vt-ink-2); }
.sr-flow__more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.sr-flow__more li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--vt-line); }
.sr-flow__mi { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--vt-indigo); background: rgba(79, 70, 229, .08); }
.sr-flow__mi svg { width: 18px; height: 18px; }
.sr-flow__more li > span:last-child { font-size: 14px; line-height: 1.5; color: var(--vt-ink-2); }
.sr-flow__more b { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 650; color: var(--vt-ink); }
.sr-flow__kb { margin-top: 24px; text-align: center; }

/* подложка сцены, пока арта нет: печатный стол, растровые круги, карточки на
   плановых местах и пунктир-путь */
.sr-fph__card { position: absolute; border-radius: 1.1% / 2.6%; background: #fff; box-shadow: 0 22px 40px -26px rgba(70, 45, 20, .5), 0 2px 6px -2px rgba(70, 45, 20, .14); }
.sr-fph__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sr-fph__path path { fill: none; stroke: #8B7CF6; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 0 24; }
.sr-fph__dot { position: absolute; aspect-ratio: 1; border-radius: 50%; opacity: .55; background: radial-gradient(var(--c) 1.7px, transparent 2.2px) 0 0 / 9px 9px; -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 76%); mask-image: radial-gradient(closest-side, #000 60%, transparent 76%); }
.sr-fph__dot--a { --c: #6F66F0; left: -3%; top: -12%; width: 13%; }
.sr-fph__dot--b { --c: #FF5CB8; left: 22.5%; top: 76%; width: 9%; }
.sr-fph__dot--c { --c: #F29A45; left: 47%; top: -10%; width: 8%; }
.sr-fph__dot--d { --c: #8B7CF6; left: 88%; top: 72%; width: 14%; }

/* модули шагов на карточках сцены (256 в ширину, напечатаны: multiply) */
.sr-fp { padding: 18px 18px 16px; gap: 0; font-size: 12.5px; }
.sr-fp > .sr-card__k { margin-bottom: 10px; }
.sr-fp__rows { flex: 1; display: grid; }
.sr-fp--collect .sr-fp__rows { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.sr-fp--collect li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; border-bottom: 1px solid rgba(79, 70, 229, .07); }
.sr-fp--collect li:last-child { border-bottom: 0; }
.sr-fp--collect b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.sr-fp--collect em { font-style: normal; font-size: 12.5px; font-weight: 700; color: #3A3456; font-variant-numeric: tabular-nums; }
.sr-fp__ft { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 11px; border-top: 1px dashed rgba(79, 70, 229, .22); }
.sr-fp__ft span { font-size: 11.5px; font-weight: 600; color: #8C86A8; }
.sr-fp__ft b { font-size: 15px; font-weight: 750; color: var(--vt-indigo); font-variant-numeric: tabular-nums; }
.sr-fp__ft small { font-size: 11.5px; font-weight: 600; color: #9A94B5; }
/* 2: фильтр по нише */
.sr-fp__hd { margin-bottom: 6px; }
.sr-fp__sub { margin-top: 3px; font-size: 11.5px; color: #8C86A8; }
.sr-fp--filter .sr-fp__rows { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.sr-fp--filter li { display: grid; align-content: center; gap: 4px; border-bottom: 1px solid rgba(79, 70, 229, .07); }
.sr-fp--filter li:last-child { border-bottom: 0; }
.sr-fp--filter b { font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; }
.sr-fp--filter em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 11px; font-weight: 650; }
.sr-fp--filter em svg { width: 12px; height: 12px; }
.sr-fp--filter .is-ok em { color: #15803D; }
.sr-fp--filter .is-off em { color: #8C86A8; }
.sr-fp--filter .is-ex em { color: #D6268D; }
.sr-fp--filter .is-off b, .sr-fp--filter .is-ex b { color: #A39DBD; text-decoration: line-through; text-decoration-color: rgba(163, 157, 189, .7); }
/* 3: одно событие - одна тема */
.sr-fp__dups { display: grid; gap: 6px; }
.sr-fp__src { display: grid; gap: 1px; padding: 7px 10px 8px; border-radius: 9px; background: #fff; border: 1px solid #E9E6F8; }
.sr-fp__src span { font-size: 11px; font-weight: 600; color: #8C86A8; }
.sr-fp__src b { font-size: 12.5px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.sr-fp__join { display: grid; place-items: center; height: 30px; }
.sr-fp__join i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--vt-indigo); }
.sr-fp__join svg { width: 13px; height: 13px; stroke-width: 2.3; }
.sr-fp__one { display: grid; gap: 2px; padding: 9px 11px 10px; border-radius: 10px; background: rgba(79, 70, 229, .07); border: 1px solid rgba(79, 70, 229, .16); }
.sr-fp__one span { font-size: 11px; font-weight: 700; color: var(--vt-indigo); }
.sr-fp__one b { font-size: 13px; font-weight: 650; line-height: 1.3; text-wrap: balance; }
.sr-fp--dedup .sr-fp__ft { margin-top: auto; }

/* 4: карточка «Стратегия постов» (подписи - как в кабинете), 256 в ширину */
.sr-strat { padding: 16px 12px 14px; gap: 0; color: #1E293B; }
.sr-strat__h { display: flex; align-items: center; gap: 9px; padding-bottom: 11px; margin-bottom: 11px; border-bottom: 1px solid #EEF0F6; }
.sr-strat__h p { display: grid; gap: 1px; }
.sr-strat__ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; color: var(--vt-indigo); background: rgba(79, 70, 229, .08); }
.sr-strat__ico svg { width: 16px; height: 16px; }
.sr-strat__h b { font-size: 13.5px; font-weight: 700; }
.sr-strat__h em { font-style: normal; font-size: 11px; font-weight: 500; color: #94A3B8; }
.sr-strat__shelf { margin: 0 0 6px; font-size: 11.5px; font-weight: 600; color: #64748B; white-space: nowrap; }
.sr-strat__shelf em { font-style: normal; font-size: 10.5px; font-weight: 500; color: #94A3B8; }
.sr-strat__shelf em::before { content: " · "; }
.sr-strat__list + .sr-strat__shelf { margin-top: auto; padding-top: 12px; }
.sr-strat__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 6px; border-radius: 10px; }
.sr-strat__list--topic { border: 1px dashed #C7D2FE; background: #F5F7FF; }
.sr-strat__list--support { border: 1px dashed #99F6E4; background: #F0FDFA; }
.sr-strat__list li { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 5px 0 6px; border-radius: 7px; background: #fff; border: 1px solid #E2E8F0; }
.sr-strat__list li i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex: none; font-style: normal; font-size: 10.5px; font-weight: 700; color: #4338CA; background: #EEF2FF; }
.sr-strat__list li b { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.sr-seg { display: inline-flex; flex: none; overflow: hidden; border-radius: 6px; border: 1px solid #C7D2FE; font-size: 10.5px; font-weight: 600; }
.sr-seg span { padding: 3px 5px; color: #64748B; background: #fff; }
.sr-seg span.is-on { color: #fff; background: #4F46E5; }
.sr-seg--teal { border-color: #99F6E4; }
.sr-seg--teal span.is-on { background: #0F766E; }
.sr-only-topic { flex: none; padding: 3px 5px; border-radius: 6px; font-size: 10px; font-weight: 600; color: #047857; background: #ECFDF5; border: 1px solid #A7F3D0; }

/* шаги: строки проявляются по is-a/is-b/is-c ленты; без JS и при
   reduced-motion - сразу финальный кадр */
.vt-js .sr-flow .sr-fp--collect li { opacity: 0; transform: translateX(-6px); transition: opacity .45s var(--vt-ease-in), transform .55s var(--vt-ease-in); }
.vt-js .sr-flow.is-a .sr-fp--collect li { opacity: 1; transform: none; }
.vt-js .sr-flow.is-a .sr-fp--collect li:nth-child(2) { transition-delay: .08s; }
.vt-js .sr-flow.is-a .sr-fp--collect li:nth-child(3) { transition-delay: .16s; }
.vt-js .sr-flow.is-a .sr-fp--collect li:nth-child(4) { transition-delay: .24s; }
.vt-js .sr-flow.is-a .sr-fp--collect li:nth-child(5) { transition-delay: .32s; }
.vt-js .sr-flow .sr-fp--filter em { opacity: 0; transition: opacity .45s var(--vt-ease-in); }
.vt-js .sr-flow:not(.is-b) .sr-fp--filter b { color: inherit; text-decoration-color: transparent; }
.vt-js .sr-flow .sr-fp--filter b { transition: color .5s, text-decoration-color .5s; }
.vt-js .sr-flow.is-b .sr-fp--filter em { opacity: 1; }
.vt-js .sr-flow .sr-fp__join, .vt-js .sr-flow .sr-fp__one { opacity: 0; transform: translateY(-6px); transition: opacity .5s var(--vt-ease-in), transform .6s var(--vt-ease-in); }
.vt-js .sr-flow.is-c .sr-fp__join, .vt-js .sr-flow.is-c .sr-fp__one { opacity: 1; transform: none; }
.vt-js .sr-flow.is-c .sr-fp__one { transition-delay: .12s; }

.vt-js [data-steps] .sr-card__why, .vt-js [data-steps] .sr-chan__topic,
.vt-js [data-steps] .sr-web__hits li, .vt-js [data-steps] .sr-web__fact, .vt-js [data-steps] .sr-doc__to,
.vt-js [data-steps] .sr-doc__post, .vt-js [data-steps] .sr-ideas__list li {
  opacity: 0; transform: translateY(5px); transition: opacity .5s var(--vt-ease-in), transform .6s var(--vt-ease-in);
}
.vt-js [data-steps] .sr-doc__t tr.is-hit td { background: transparent; transition: background .6s; }
.vt-js [data-steps].is-a .sr-ideas__list li:nth-child(1),
.vt-js [data-steps].is-b .sr-card__why, .vt-js [data-steps].is-b .sr-web__hits li,
.vt-js [data-steps].is-b .sr-doc__to, .vt-js [data-steps].is-b .sr-ideas__list li:nth-child(2),
.vt-js [data-steps].is-c .sr-chan__topic, .vt-js [data-steps].is-c .sr-web__fact, .vt-js [data-steps].is-c .sr-doc__post,
.vt-js [data-steps].is-c .sr-ideas__list li:nth-child(3) { opacity: 1; transform: none; }
.vt-js [data-steps].is-b .sr-web__hits li:nth-child(2) { transition-delay: .12s; }
.vt-js [data-steps].is-b .sr-web__hits li:nth-child(3) { transition-delay: .24s; }
.vt-js [data-steps].is-b .sr-doc__t tr.is-hit td { background: rgba(246, 160, 77, .22); }

/* ---------- стена ниш ----------
   Витрина возможностей: карточка - дело («Кофейня»), под ним сфера, ниже
   набор источников. Шапка одинаковая у всех: медальон, дело одной строкой,
   сфера одной строкой (ширина карточки подобрана так, что самая длинная
   сфера влезает). Строки набора - одной высоты, значок вида источника в его
   краске, порядок видов один во всех карточках. */
.sr-wall-sec { padding-block: clamp(64px, 8vw, 112px); }
.sr-wall-sec .vt-sec-head .vt-step { font-size: 12px; line-height: 1.5; }
.sr-wall-sec .vt-sec-head p:not(.vt-step) { max-width: 36em; margin-inline: auto; }
.sr-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sr-niche { display: grid; align-content: start; padding: 20px 18px 18px; border-radius: 20px; background: #fff; border: 1px solid var(--vt-line); transition: border-color .2s ease, box-shadow .25s ease; }
.sr-niche:hover { border-color: rgba(79, 70, 229, .24); box-shadow: 0 18px 34px -26px rgba(23, 19, 59, .45); }
.sr-niche__i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--c, var(--vt-indigo)); background: color-mix(in srgb, var(--c, #4F46E5) 11%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #4F46E5) 18%, #fff); }
.sr-niche:nth-child(4n+2) { --c: var(--vt-pink-ink); }
.sr-niche:nth-child(4n+3) { --c: #D9731A; }
.sr-niche:nth-child(4n+4) { --c: #6D5AE6; }
.sr-niche__i svg { width: 19px; height: 19px; }
.sr-niche__b { margin-top: 14px; font-size: 15.5px; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; white-space: nowrap; }
.sr-niche__s { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--vt-ink-3); white-space: nowrap; }
.sr-niche__parts { display: grid; gap: 4px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--vt-line-2); }
.sr-niche__parts li { display: flex; align-items: center; gap: 10px; height: 28px; font-size: 13.5px; color: var(--vt-ink-2); white-space: nowrap; }
.sr-part { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: none; color: var(--ink); background: color-mix(in srgb, var(--ink) 12%, #fff); }
.sr-part svg { width: 13px; height: 13px; }
/* «и еще N сфер»: пунктирная плашка - набор расширяется */
.sr-wall__more { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 16px; padding: 18px 24px; border-radius: 20px; border: 1.5px dashed var(--vt-line-2); }
.sr-wall__more .sr-stat__viz { height: auto; }
.sr-wall__more p { font-size: 15px; line-height: 1.55; color: var(--vt-ink-2); text-wrap: balance; }
.sr-wall__more b { font-weight: 650; color: var(--vt-ink); }

/* старт */
.sr-start__lead { position: relative; z-index: 2; margin: 14px 0 28px; max-width: 34em; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.sr-start__lead .vt-tp { background: none; -webkit-text-fill-color: currentColor; color: #fff; font-weight: 600; }

.sr-hero__m { display: none; }

/* ---------- адаптив ---------- */
@media (max-width: 1199px) {
  /* логика: плитки - крупные кадры своих карточек, 2 x 2. Карточка - 232 px
     (модуль 256 px читается от 0.9), но не шире 70% плитки: промежуток между
     карточками на арте больше поля плитки, соседняя в кадр не заходит */
  .sr-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); column-gap: 24px; max-width: 1040px; }
  .sr-flow::before { display: none; }
  .sr-flow__step { grid-row: auto / span 4; }
  .sr-flow__step:nth-child(n+3) { margin-top: 44px; }
  .sr-flow__scene, .sr-flow__step:first-child .sr-flow__scene, .sr-flow__step:last-child .sr-flow__scene { aspect-ratio: 4 / 5; border-radius: 24px; box-shadow: var(--vt-shadow-scene); }
  .sr-flow__scene .vt-art {
    --w: calc(min(var(--cardw, 232px), 70cqw) / var(--cwf));
    width: var(--w); height: calc(var(--w) / var(--arn));
    left: clamp(calc(100cqw - var(--w)), calc(50cqw - var(--w) * var(--mfx)), 0px);
    top: clamp(calc(100cqh - var(--w) / var(--arn)), calc(50cqh - var(--w) / var(--arn) * var(--mfy)), 0px);
  }
  .sr-flow__n, .sr-flow__step h3, .sr-flow__step h3 + p { margin-left: 4px; margin-right: 4px; }
  .sr-flow__more { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
}
@media (max-width: 639px) {
  .sr-flow { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-inline: 16px; }
  .sr-flow__step { grid-row: auto; grid-template-rows: none; }
  .sr-flow__step:nth-child(n+2) { margin-top: 36px; }
  .sr-flow__scene, .sr-flow__step:first-child .sr-flow__scene, .sr-flow__step:last-child .sr-flow__scene { border-radius: 22px; }
  .sr-flow__n { margin-top: 20px; }
}
@media (max-width: 1099px) {
  /* 2 x 2: разделители - по сетке */
  .sr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-stat:nth-child(odd) { border-left: 0; }
  .sr-stat:nth-child(n+3) { border-top: 1px solid var(--vt-line); }
}
@media (max-width: 639px) {
  .sr-scale { padding-block: 28px 0; }
  .sr-stats { border-radius: 20px; }
  .sr-stat { padding: 18px 16px 18px; }
  .sr-stat__viz { height: 32px; }
  .sr-stat__n { margin-top: 14px; font-size: 32px; }
  .sr-stat__t { margin-top: 8px; font-size: 14px; }
  .sr-stat__h { font-size: 12.5px; }
  .sr-viz-spheres i { width: 26px; height: 26px; }
  .sr-viz-spheres i svg { width: 13px; height: 13px; }
  .sr-viz-spheres i + i { margin-left: -8px; }
  .sr-viz-spheres em { margin-left: 6px; height: 22px; padding: 0 7px; font-size: 11.5px; }
  .sr-viz-feeds, .sr-viz-pulse { width: 100px; height: 36px; }
  .sr-viz-kinds { gap: 3px; }
  .sr-viz-kinds i { width: 21px; height: 21px; border-radius: 6px; }
  .sr-viz-kinds i svg { width: 12px; height: 12px; }
}
@media (min-width: 1200px) {
  /* карточка текста - как у соседей по семье (/product/, Аналитика): центр по
     высоте = центр экрана планшета (--fy), газеты лежат под стеклом, справа
     карточка кончается перед чашкой. Чашка на арте S0 v3: тело - от 38.1%
     ширины (69-80% высоты), блюдце - от 35.4% (79-86%). Низкая карточка
     (кнопки в один ряд, от 499 px) до блюдца не опускается - ее край по телу
     чашки (--wc); высокая - по блюдцу с зазором 16 px (--ws). Выбор - ступенькой
     max/min без JS.
     Кегль заголовка - от ширины карточки: вторая фраза «Каждый день - свежая
     тема.» держится одной строкой (ширина фразы ~14.2 кегля) */
  .sr-hero .vt-hero__copy.vt-wrap {
    --aw: max(100cqw, calc(100cqh * var(--arn)));
    --ah: calc(var(--aw) / var(--arn));
    --al: clamp(calc(100cqw - var(--aw)), calc(100cqw * var(--px) - var(--aw) * var(--fx)), 0px);
    --at: clamp(calc(100cqh - var(--ah)), calc(100cqh * var(--py) - var(--ah) * var(--fy)), 0px);
    --wc: calc(var(--al) + var(--aw) * .372);
    --ws: calc(var(--al) + var(--aw) * .354 + 8px);
    --wall: max(var(--ws), min(var(--wc), calc((var(--wc) - 547px) * 1000)));
    --cw: min(560px, calc(var(--wall) - 48px));
  }
  .sr-hero .vt-hero__card { padding-inline: 28px; }
  /* слой текста лежит поверх всей сцены: клики проходят сквозь него к кнопкам
     источников в экране планшета, сама карточка кликабельна как прежде */
  .sr-hero .vt-hero__copy.vt-wrap { pointer-events: none; }
  .sr-hero .vt-hero__copy > .vt-hero__card { pointer-events: auto; }
  .sr-hero .vt-hero__copy > .vt-hero__card { position: relative; top: calc(var(--at) + var(--ah) * var(--fy) - 50cqh); }
  .sr-hero .vt-hero__h1 { font-size: clamp(24px, calc((var(--cw) - 64px) / 14.2), 34px); }
}
@media (min-width: 960px) {
  .vt-next__grid.sr-next--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1199px) {
  /* первый экран на планшете и телефоне: текст сверху, ниже - своя сцена
     S0m. Арт в 1.15 раза шире кадра (растяжение до 1.17 на плотности 3 -
     в пределах стандарта 1.25), кадр - по планшету: 21-86% высоты арта */
  .sr-hero__m { display: block; position: relative; width: 100%; max-width: 560px; margin: 22px auto 0; aspect-ratio: 1152 / 1531; overflow: hidden; container-type: size; }
  .sr-hero__m .vt-art { --z: 1.15; width: calc(100% * var(--z)); height: auto; aspect-ratio: 1152 / 2048; left: calc((1 - var(--z)) * 50%); top: calc(-.21 * 100cqw * var(--z) / .5625); }
  .sr-hero__m::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36px; z-index: 4; background: linear-gradient(180deg, #F7F2FC, rgba(247, 242, 252, 0)); pointer-events: none; }
  .sr-hero__m::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; z-index: 4; background: linear-gradient(0deg, var(--vt-paper), rgba(251, 250, 255, 0)); pointer-events: none; }
  .sr-kicker { justify-content: center; }
  /* главы в один столбец: сцена крупнее, модуль читается */
  .sr-ch .vt-ch__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .sr-ch .vt-ch__text { max-width: 640px; }
  .sr-ch .vt-ch__grid > .vt-scene { width: 100%; max-width: 880px; justify-self: center; }
}
@media (min-width: 561px) and (max-width: 1199px) {
  .sr-hero__m { border-radius: 26px 26px 0 0; }
}
@media (max-width: 1199px) {
  .sr-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .sr-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 959px) {
  /* планшет: кадр 3:2, арт крупнее с фокусом на карточке */
  .sr-ch .vt-ch__grid > .vt-scene .vt-art {
    --tz: 1.3;
    width: calc(100% * var(--tz)); height: calc(100% * var(--tz));
    left: clamp(calc((1 - var(--tz)) * 100%), calc((.5 - var(--tz) * var(--mfx, .5)) * 100%), 0%);
    top: clamp(calc((1 - var(--tz)) * 100%), calc((.5 - var(--tz) * var(--mfy, .5)) * 100%), 0%);
  }
}
@media (max-width: 639px) {
  /* телефон: кадр --m-ar, арт по его высоте и крупнее в --mz раз с фокусом
     на карточке (--mfx/--mfy): модуль читается от 0.9 */
  .sr-ch .vt-ch__grid > .vt-scene { width: auto; max-width: none; justify-self: stretch; }
  .sr-ch .vt-ch__grid > .vt-scene .vt-art {
    --aw: calc(100cqh * var(--arn) * var(--mz, 1));
    width: var(--aw); height: calc(100% * var(--mz, 1));
    left: clamp(calc(100cqw - var(--aw)), calc(50cqw - var(--aw) * var(--mfx, var(--fx, .5))), 0px);
    top: clamp(calc((1 - var(--mz, 1)) * 100%), calc((.5 - var(--mz, 1) * var(--mfy, .5)) * 100%), 0%);
  }
  /* стена на телефоне компактнее: шапка в строку, набор - в две колонки */
  .sr-wall { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sr-niche { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 16px; }
  .sr-niche__i { grid-row: span 2; align-self: center; }
  .sr-niche__b { margin-top: 0; align-self: end; }
  .sr-niche__s { align-self: start; }
  .sr-niche__parts { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; row-gap: 4px; margin-top: 14px; padding-top: 12px; }
  .sr-niche__parts li { height: 26px; gap: 8px; font-size: 12.5px; }
  .sr-part { width: 22px; height: 22px; }
  .sr-wall__more { flex-direction: column; gap: 12px; padding: 18px 16px; text-align: center; }
  .sr-wall__more p { font-size: 14.5px; }
}
@media (max-width: 379px) {
  /* узкий телефон: набор источников ниши - в одну колонку, строки не режутся */
  .sr-niche__parts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 559px) {
  /* строка доверия переносится: разделитель повис бы в конце строки */
  .sr-hero .vt-hero__trust .vt-sep { display: none; }
}