/* Раздел «Продукты», индексы сценариев и перелинковка решений ↔ мостов ↔ продуктов.
   Каркас от 04.10.2026: .pr-placeholder — заглушки под картинки и видео, убрать после наполнения. */

.pr-section {
  padding: 48px 0;
}

.pr-section--tight {
  padding: 28px 0;
}

.pr-section--sub .pr-section-title {
  font-size: 22px;
  line-height: 1.3;
  text-align: left;
}

.pr-section-title {
  margin: 0 0 28px;
  text-align: center;
}

.pr-group-link,
.pr-group-link:hover {
  color: inherit;
  text-decoration: none;
}

/* Карточки-ссылки */
.pr-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .pr-links {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .pr-links {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Три карточки — всегда в один ряд с планшета (иначе на 768–1023 выходит 2 + 1) */
@media (min-width: 768px) {
  .pr-links:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Группы продуктов на /products — по две в ряд: в группах 4, 2, 4 и 1 карточка (Ксения 06.10.2026) */
@media (min-width: 768px) {
  .pr-links--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Интеграции на /products — по четыре в ряд: восемь карточек в две строки */
@media (min-width: 1024px) {
  .pr-links--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pr-link {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-white, #fff);
  /* Край карточки — тонкой рамкой, как у карточек мостов (.most-quote, .most-up-card),
     а не широкой тенью: светло-серые картинки сливались с размытой тенью на белом фоне */
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: var(--shadow-xsm);
  color: inherit;
  text-decoration: none;
}

.pr-link:hover {
  color: inherit;
  text-decoration: none;
}

.pr-link-media {
  display: block;
  aspect-ratio: 16 / 9;
  background-color: var(--gray-100, #f2f4f7);
  background-position: center;
  background-size: cover;
}

.pr-link-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px 24px;
}

.pr-link-tag {
  font-size: 13px;
  line-height: 1.3;
  color: var(--text-muted, #667085);
}

.pr-link-title {
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}

.pr-link-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted, #667085);
}

/* «Все сценарии», «Все продукты» под сеткой карточек — второстепенная кнопка
   btn-2026, как «Интеграции» в шапке и кнопки под тарифами */
.pr-links-more {
  margin: 32px 0 0;
  text-align: center;
}
/* тень — как у карточек над кнопкой: рамка 1px и маленькая тень вместо широкой */
.pr-links-more .btn-2026 {
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: var(--shadow-xsm);

  &:hover {
    box-shadow: var(--shadow-btn);
  }
}

/* Превью видео моста целиком, 16:10 — как кадр записи, без черных полос по бокам
   и без обрезки сверху и снизу */
.pr-link-media--1610 {
  aspect-ratio: 16 / 10;
}

/* Ссылка под блоком решения */
.pr-more {
  display: inline-block;
  margin-top: 12px;
  font-weight: 600;
  color: var(--text-default);
  text-decoration: none;
}

.pr-more::after {
  content: " \2192";
}

.pr-more:hover {
  color: var(--text-default);
  text-decoration: none;
}

.pr-more--light {
  color: #fff;
  text-decoration: underline;
}

/* Решения на главной: три группы */
.pr-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 1024px) {
  .pr-groups {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pr-group {
  padding: 28px;
  border-radius: 8px;
  background: var(--surface-white, #fff);
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: var(--shadow-xsm);
}

.pr-group-title {
  margin: 0 0 16px;
}

.pr-group-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pr-group-list a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--gray-300, #d0d5dd);
}

.pr-group-list a:hover {
  border-bottom-color: currentColor;
}

/* Тариф */
.pr-tariff {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px;
  border-radius: 8px;
  background: var(--gray-100, #f2f4f7);
}

.pr-tariff-title,
.pr-tariff-text {
  margin: 0;
}

/* Шапка /products и /integrations: кнопки сразу под подзаголовком,
   а не прижаты к низу картинки (в компоненте у кнопок margin-top: auto) */
.page-products-index .hero-2026-actions,
.page-integrations .hero-2026-actions {
  @media (min-width: 1024px) {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* Интеграции */
.pr-integrations {
  display: grid;
  gap: 20px;
}

.pr-integration {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 24px;
  border-radius: 8px;
  background: var(--surface-white, #fff);
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: var(--shadow-xsm);
  scroll-margin-top: 100px;
}

@media (min-width: 768px) {
  .pr-integration {
    grid-template-columns: 280px 1fr;
    align-items: center;
  }
}

.pr-integration-title {
  margin: 0 0 8px;
}

.pr-integration-text {
  margin: 0;
}

.pr-integration-media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Скругления на страницах раздела (продукты, интеграции, сценарии):
   крупные карточки и картинки — не больше 8px, мелкое (кнопки, чипы, миниатюры) — 4px.
   Компоненты UI-кита ниже приводятся к этому только здесь, на остальных страницах сайта
   они не меняются. */
:is(.page-product, .page-transcription) .info-cards-2026-card,
:is(.page-product, .page-transcription) .features-2026-row-media,
:is(.page-product, .page-transcription) .faq-2026-list > .relative,
:is(.page-product, .page-transcription) .faq-2026-list .faq-panel,
:is(.page-product, .page-transcription, .page-most) .cta-form-manager-photo {
  border-radius: 8px;
}

/* Мосты (/solutions/<решение>/<мост>) — то же правило: блоки и окна не круглее 8px,
   «пузыри» реплик сохраняют хвостик. Перекрывает most.css, сам файл мостов не трогаем. */
.page-most {
  --most-radius: 8px;
}
.page-most :is(.most-way, .most-lane, .most-lane-result, .most-step, .most-look-stage, .most-win,
  .most-find-hit, .most-compare tr, .most-compare td, .most-quote, .most-quotes-also, .most-doubt,
  .most-live, .most-chain-row) {
  border-radius: 8px;
}
.page-most :is(.most-find-search, .most-mail-video, .most-case-ico, .most-live-icon, .most-live-stat) {
  border-radius: 8px;
}
.page-most :is(.most-chip--say, .most-chat-video, .most-doubt-q) {
  border-radius: 8px 8px 8px 4px;
}

/* Картинка в карточке info-cards-2026 (страницы продуктов, «Что умеет») */
.pr-card-media {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  border-radius: 8px;
}

/* Ритм новых страниц (продукты, интеграции, сценарии), правило Ксении 05.10.2026:
   заголовок блока → содержимое 40px, конец блока → следующий блок 120px.
   На узких экранах блоки — по шкале сайта (64 / 72 / 80), как у features-2026 и faq-2026. */
:is(.page-product, .page-transcription) .pr-section {
  margin: 72px 0;
  padding: 0;

  @media (max-width: 575px) {
    margin: 64px 0;
  }
  @media (min-width: 768px) {
    margin: 80px 0;
  }
  @media (min-width: 1280px) {
    margin: 120px 0;
  }
}

@media (min-width: 768px) {
  /* заголовок → содержимое: 40px (у соседних элементов margin схлопываются в 40) */
  :is(.page-product, .page-transcription) :is(.pr-section-title, .features-2026-title, .faq-2026-title) {
    margin-bottom: 40px;
  }
  :is(.page-product, .page-transcription) :is(.pr-section-title, .features-2026-title, .faq-2026-title) + :not([class*="subtitle"]) {
    margin-top: 40px;
  }
  /* если под заголовком есть подзаголовок — 40px от подзаголовка до содержимого */
  :is(.page-product, .page-transcription) :is(.tr-steps-subtitle, .results-band-2026-subtitle,
    .features-2026-subtitle, .tr-pricing-subtitle) {
    margin-bottom: 40px;
  }
  :is(.page-product, .page-transcription) :is(.tr-steps-subtitle, .results-band-2026-subtitle,
    .features-2026-subtitle, .tr-pricing-subtitle) + * {
    margin-top: 40px;
  }
  /* «Как это работает» без подзаголовка */
  :is(.page-product, .page-transcription) .tr-steps-title + .tr-steps-grid {
    margin-top: 40px;
  }
}

/* Шапки новых страниц (продукты, /products, /integrations, сценарии) — белый фон, а не серый;
   цветная подсветка у страниц продуктов остается (Ксения 06.10.2026) */
:is(.page-product, .page-transcription) .hero-2026 {
  background-color: var(--brand-white);
}

/* Фоновая сетка шапки без затухания по краям (в исходных svg края гасли в #f6f6f6 —
   на белом это серая полоса); Ксения 06.10.2026: затухание не нужно нигде */
.page-transcription .hero-2026 {
  --hero-bg-image: url("/images/products/hero-bg-white.svg");
  --hero-bg-image-sm: url("/images/products/hero-bg-white.svg");
  --hero-bg-image-lg: url("/images/products/hero-bg-white.svg");
}
:is(.page-products-index, .page-integrations, .page-scenarios) .hero-2026 {
  --hero-bg-image-sm: url("/images/products/hero-bg-768-white.svg");
}
/* и без маски, которая гасила сетку сверху и снизу шапки; сетка бледнее (Ксения 06.10.2026) */
:is(.page-product, .page-transcription) .hero-2026-bg {
  mask-image: none;
  -webkit-mask-image: none;
  opacity: 0.5;
}

/* Запись встреч: розово-оранжевая подсветка не доходит до низа шапки — без полосы у нижнего края */
body.page-meeting-recording .hero-2026-gradient {
  height: 70%;
}
body.page-meeting-recording .mr-hero-glow {
  top: 0;
  height: 70%;
}

/* Запись встреч: в шапке плотнее — крошки → заголовок 12px, подзаголовок → текст и текст → кнопки по 24px
   (Ксения 06.10.2026) */
@media (min-width: 1024px) {
  body.page-meeting-recording .hero-2026--with-breadcrumb .hero-2026-container {
    row-gap: 12px;
  }
}
@media (min-width: 768px) {
  body.page-meeting-recording .hero-2026 .hero-2026-subtitle,
  body.page-meeting-recording .hero-2026 .hero-2026-actions {
    margin-top: 24px;
  }
}

/* Шапки новых страниц: заголовок → текст 36px, текст → кнопки 36px (Ксения 05.10.2026).
   Отступ задаем сверху у текста и у кнопок: в колонке шапки margin не схлопываются,
   и без подзаголовка от заголовка до кнопок тоже будет 36px. */
@media (min-width: 768px) {
  :is(.page-product, .page-transcription) .hero-2026 .hero-2026-title {
    margin-bottom: 0;
  }
  :is(.page-product, .page-transcription) .hero-2026 .hero-2026-subtitle {
    margin-top: 36px;
    margin-bottom: 0;
  }
  :is(.page-product, .page-transcription) .hero-2026 .hero-2026-actions {
    margin-top: 36px;
    margin-bottom: 0;
  }
}

/* Шапка: от кнопок (или подписи под ними) до низа шапки — не меньше 65px на любой ширине.
   Раньше было 0 на 1024–1279, 32 на телефоне, 50 на планшете, 60 на десктопе. */
:is(.page-product, .page-transcription) .hero-2026.hero-2026 {
  padding-bottom: 65px;
}

/* Тарифы строками без картинок (образец Ксении 05.10.2026, «Запись встреч»):
   слева «Тариф — цена» и описание, справа три значения. */
.pricing-2026-list--tarify .pricing-2026-card + .pricing-2026-card {
  margin-top: 56px;
}
.pricing-2026-list--tarify .pricing-2026-card + .pricing-2026-card::before {
  top: -28px;
}
@media (min-width: 576px) {
  .pricing-2026-list--tarify .pricing-2026-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "body"
      "tiers";
  }
}
@media (min-width: 1024px) {
  .pricing-2026-list--tarify .pricing-2026-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title tiers"
      "body  tiers";
    column-gap: 48px;
    align-items: center;
  }
  .pricing-2026-list--tarify .pricing-2026-card-body {
    max-width: 560px;
  }
}
.pricing-2026-list--tarify .pricing-2026-tier {
  width: 140px;
  /* подписи в одну или две строки — значения все равно на одной линии */
  grid-template-rows: minmax(52px, 1fr) auto;
  align-items: end;
}
.pricing-2026-list--tarify .pricing-2026-tier-label {
  line-height: 1.3;
}
.pricing-2026-list--tarify + .tr-pricing-actions {
  flex-wrap: wrap;
  gap: 12px;
}
.pricing-2026-list--tarify ~ .tr-pricing-actions,
.tr-pricing-subtitle:has(+ * + .pricing-2026-list--tarify),
.tr-pricing-subtitle:has(+ .pricing-2026-list--tarify) {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.pricing-2026-list--tarify .pricing-2026-tier-price {
  width: 140px;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .pricing-2026-list--tarify .pricing-2026-tier {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }
}
@media (max-width: 767px) {
  .pricing-2026-list--tarify .pricing-2026-tier-price {
    width: 100%;
    white-space: normal;
  }
}

/* Основной текст (не заголовки) на новых страницах — светлый, Onest 300.
   Заголовки, подписи карточек, кнопки, ярлыки и цифры в тарифах не трогаем. */
:is(.page-product, .page-transcription) main :is(p, li, .pr-link-text, .faq-panel-content):not([class*="title"]):not([class*="label"]):not([class*="tag"]) {
  font-weight: 300;
}

/* Страница всех сценариев: группа («Продажи и клиенты») и ее решения.
   Шапка группы → первое решение 40px, решения внутри группы — 64px, группы между собой — 120px. */
.page-scenarios .pr-section:not(.pr-section--sub):has(+ .pr-section--sub) {
  margin-bottom: 0;

  & .pr-section-title {
    margin-bottom: 0;
  }
}
.page-scenarios .pr-section:not(.pr-section--sub) + .pr-section--sub {
  margin-top: 40px;
}
.page-scenarios .pr-section--sub:has(+ .pr-section--sub) {
  margin-bottom: 0;
}
.page-scenarios .pr-section--sub + .pr-section--sub {
  margin-top: 64px;
}

/* Заглушки каркаса — убрать после наполнения */
.pr-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 160px;
  padding: 20px;
  border: 2px dashed var(--gray-300, #d0d5dd);
  border-radius: 8px;
  background: var(--gray-100, #f2f4f7);
  color: var(--text-muted, #667085);
  text-align: center;
}

.pr-placeholder--video {
  aspect-ratio: 16 / 9;
  min-height: 0;
}

.pr-placeholder--card {
  margin-bottom: 16px;
  aspect-ratio: 4 / 3;
  min-height: 0;
}

.pr-placeholder-kind {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pr-placeholder-text {
  font-size: 14px;
  line-height: 1.4;
}

/* Картинка в шапке страницы продукта (вместо заглушки видео): по центру текстового блока,
   а не на 53px ниже крошек, как у расшифровки (Ксения 06.10.2026: «подними»). */
@media (min-width: 1024px) {
  .page-product .hero-2026-media.pr-hero-media,
  :is(.page-transcription, .page-meeting-recording) .hero-2026-media {
    margin-top: 0;
    align-self: center;
  }
}

/* Цвет шапки — по палитре страниц решений (Ксения 06.10.2026: «почему шапка у всех зеленая»).
   Тон задается классом на body; к холодным тонам — сине-зеленая кнопка (btn-2026--gradient-green),
   к теплым — красно-фиолетовая (btn-2026--gradient-purple). */
body:is([class*="pr-tone-"]) .hero-2026-gradient {
  left: 45%;
  top: 10%;
  width: 70%;
  height: 90%;
  opacity: 0.45;
  filter: blur(150px);
}
body.pr-tone-lime .hero-2026-gradient { background: linear-gradient(-52deg, #c9ff4b 13%, #9de786 85%); }
body.pr-tone-teal .hero-2026-gradient { background: linear-gradient(201.42deg, #57c6d0 -1.41%, #9de786 90.73%); }
body.pr-tone-blue .hero-2026-gradient { background: linear-gradient(201.42deg, #9d8bd3 -1.41%, #4ea1d5 90.73%); }
body.pr-tone-sky .hero-2026-gradient { background: linear-gradient(304.64deg, #9d8bd3 30%, #7fb2ec 60%, #8fd3e0 82%, #c9b8f0 95%); }
body.pr-tone-warm .hero-2026-gradient { background: linear-gradient(304.64deg, #ffd086 34.4%, #f4a3a3 63%, #e4a9c7 80%, #9d8bd3 95%); }
body.pr-tone-pink .hero-2026-gradient { background: linear-gradient(304.64deg, #e4a9c7 30%, #c9b8f0 58%, #9d8bd3 80%, #f4a3a3 95%); }
body.pr-tone-orange .hero-2026-gradient { background: linear-gradient(304.64deg, #ffb27a 30%, #ffd086 58%, #d9f0a3 80%, #f4a3a3 95%); }
body.pr-tone-red .hero-2026-gradient { background: linear-gradient(304.64deg, #f4a3a3 30%, #ffb27a 58%, #ffd086 80%, #e4a9c7 95%); }
/* левые пятна в сетке шапки — тоже под тон (были зелеными на всех страницах);
   у lime и teal остается исходная зеленая сетка */
body.pr-tone-blue .hero-2026 { --hero-bg-image: url("/images/products/hero-bg-white-blue.svg"); --hero-bg-image-lg: url("/images/products/hero-bg-white-blue.svg"); }
body.pr-tone-sky .hero-2026 { --hero-bg-image: url("/images/products/hero-bg-white-sky.svg"); --hero-bg-image-lg: url("/images/products/hero-bg-white-sky.svg"); }
body.pr-tone-warm .hero-2026 { --hero-bg-image: url("/images/products/hero-bg-white-warm.svg"); --hero-bg-image-lg: url("/images/products/hero-bg-white-warm.svg"); }
body.pr-tone-pink .hero-2026 { --hero-bg-image: url("/images/products/hero-bg-white-pink.svg"); --hero-bg-image-lg: url("/images/products/hero-bg-white-pink.svg"); }
body.pr-tone-orange .hero-2026 { --hero-bg-image: url("/images/products/hero-bg-white-orange.svg"); --hero-bg-image-lg: url("/images/products/hero-bg-white-orange.svg"); }
body.pr-tone-red .hero-2026 { --hero-bg-image: url("/images/products/hero-bg-white-red.svg"); --hero-bg-image-lg: url("/images/products/hero-bg-white-red.svg"); }

/* Шапка продукта: если кнопки ниже картинки, до низа шапки было ровно 65px — тесно
   (Ксения 06.10.2026, аналитика, видеоанкетирование, расшифровка, видеоредактор, библиотека).
   Запас под кнопками: шапка растет только там, где кнопки — самый нижний элемент. */
body:is(.page-product, .page-transcription):not(.page-solution) .hero-2026-actions {
  margin-bottom: 16px;

  @media (min-width: 1024px) {
    margin-bottom: 35px;
  }
}

/* Страница всех сценариев: заголовки решений — по центру, как заголовки групп (Ксения 06.10.2026) */
.page-scenarios .pr-section--sub .pr-section-title {
  text-align: center;
}

/* «Как это работает — три шага»: шаги столбиком слева (номер на вертикальной линии),
   справа картинка с главным экраном продукта; подложка блока — прежняя, во всю ширину
   (Ксения 06.10.2026, выбран вариант 3 из трех) */
.tr-steps-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;

  @media (min-width: 1024px) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 64px;
    align-items: center;
  }
}
.tr-steps-split .tr-steps-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;

  @media (min-width: 1280px) {
    gap: 36px;
  }
}
.tr-steps-split .tr-steps-card {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
  text-align: left;
}
/* линия от номера к следующему номеру */
.tr-steps-split .tr-steps-card:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 56px;
  bottom: -24px;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(180deg, #5ed08f, #3d9ff5);
  opacity: 0.5;

  @media (min-width: 1280px) {
    bottom: -28px;
  }
}
.tr-steps-split .tr-steps-card-num {
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  margin: 0;
  font-size: 22px;
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06), 0 6px 16px rgba(17, 17, 17, 0.08);
}
.tr-steps-split .tr-steps-card-title {
  grid-column: 2;
  margin: 10px 0 8px;

  @media (min-width: 1280px) {
    font-size: 22px;
    letter-spacing: -0.4px;
  }
}
.tr-steps-split .tr-steps-card-text {
  grid-column: 2;
}
/* не выше 420px: высокие картинки (запись встреч) не перевешивают список шагов (Ксения 06.10.2026) */
.tr-steps-media img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 640px);
  max-height: 420px;
  margin: 0 auto;
}

/* blob-prerender:start body.pr-tone-lime .hero-2026-gradient #71 */
/* Сгенерировано .claude/skills/blob-prerender — руками не править, перезапусти скрипт.
   Было filter: blur(150px) → картинка пятна вместе с ореолом; рамка-отступ
   расширяет фон на ширину ореола, не сдвигая само пятно. */
body.pr-tone-lime .hero-2026-gradient {
  filter: none;
  box-sizing: content-box;
  border: 375px solid transparent;
  margin: -375px;
  border-radius: 0;
  background: url("/images/blobs/products-body-pr-tone-lime-hero-2026-gradient-xs.webp") center / 100% 100% no-repeat border-box;
}
@media (max-width: 575.98px) {
  body.pr-tone-lime .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-lime-hero-2026-gradient-xs.webp");
  }
}
@media (min-width: 576px) and (max-width: 1023.98px) {
  body.pr-tone-lime .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-lime-hero-2026-gradient-sm.webp");
  }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  body.pr-tone-lime .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-lime-hero-2026-gradient-md.webp");
  }
}
@media (min-width: 1280px) {
  body.pr-tone-lime .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-lime-hero-2026-gradient-lg.webp");
  }
}
/* blob-prerender:end */

/* blob-prerender:start body.pr-tone-teal .hero-2026-gradient #72 */
/* Сгенерировано .claude/skills/blob-prerender — руками не править, перезапусти скрипт.
   Было filter: blur(150px) → картинка пятна вместе с ореолом; рамка-отступ
   расширяет фон на ширину ореола, не сдвигая само пятно. */
body.pr-tone-teal .hero-2026-gradient {
  filter: none;
  box-sizing: content-box;
  border: 375px solid transparent;
  margin: -375px;
  border-radius: 0;
  background: url("/images/blobs/products-body-pr-tone-teal-hero-2026-gradient-xs.webp") center / 100% 100% no-repeat border-box;
}
@media (max-width: 575.98px) {
  body.pr-tone-teal .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-teal-hero-2026-gradient-xs.webp");
  }
}
@media (min-width: 576px) and (max-width: 1023.98px) {
  body.pr-tone-teal .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-teal-hero-2026-gradient-sm.webp");
  }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  body.pr-tone-teal .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-teal-hero-2026-gradient-md.webp");
  }
}
@media (min-width: 1280px) {
  body.pr-tone-teal .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-teal-hero-2026-gradient-lg.webp");
  }
}
/* blob-prerender:end */

/* blob-prerender:start body.pr-tone-blue .hero-2026-gradient #73 */
/* Сгенерировано .claude/skills/blob-prerender — руками не править, перезапусти скрипт.
   Было filter: blur(150px) → картинка пятна вместе с ореолом; рамка-отступ
   расширяет фон на ширину ореола, не сдвигая само пятно. */
body.pr-tone-blue .hero-2026-gradient {
  filter: none;
  box-sizing: content-box;
  border: 375px solid transparent;
  margin: -375px;
  border-radius: 0;
  background: url("/images/blobs/products-body-pr-tone-blue-hero-2026-gradient-xs.webp") center / 100% 100% no-repeat border-box;
}
@media (max-width: 575.98px) {
  body.pr-tone-blue .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-blue-hero-2026-gradient-xs.webp");
  }
}
@media (min-width: 576px) and (max-width: 1023.98px) {
  body.pr-tone-blue .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-blue-hero-2026-gradient-sm.webp");
  }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  body.pr-tone-blue .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-blue-hero-2026-gradient-md.webp");
  }
}
@media (min-width: 1280px) {
  body.pr-tone-blue .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-blue-hero-2026-gradient-lg.webp");
  }
}
/* blob-prerender:end */

/* blob-prerender:start body.pr-tone-sky .hero-2026-gradient #74 */
/* Сгенерировано .claude/skills/blob-prerender — руками не править, перезапусти скрипт.
   Было filter: blur(150px) → картинка пятна вместе с ореолом; рамка-отступ
   расширяет фон на ширину ореола, не сдвигая само пятно. */
body.pr-tone-sky .hero-2026-gradient {
  filter: none;
  box-sizing: content-box;
  border: 375px solid transparent;
  margin: -375px;
  border-radius: 0;
  background: url("/images/blobs/products-body-pr-tone-sky-hero-2026-gradient-xs.webp") center / 100% 100% no-repeat border-box;
}
@media (max-width: 575.98px) {
  body.pr-tone-sky .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-sky-hero-2026-gradient-xs.webp");
  }
}
@media (min-width: 576px) and (max-width: 1023.98px) {
  body.pr-tone-sky .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-sky-hero-2026-gradient-sm.webp");
  }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  body.pr-tone-sky .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-sky-hero-2026-gradient-md.webp");
  }
}
@media (min-width: 1280px) {
  body.pr-tone-sky .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-sky-hero-2026-gradient-lg.webp");
  }
}
/* blob-prerender:end */

/* blob-prerender:start body.pr-tone-warm .hero-2026-gradient #75 */
/* Сгенерировано .claude/skills/blob-prerender — руками не править, перезапусти скрипт.
   Было filter: blur(150px) → картинка пятна вместе с ореолом; рамка-отступ
   расширяет фон на ширину ореола, не сдвигая само пятно. */
body.pr-tone-warm .hero-2026-gradient {
  filter: none;
  box-sizing: content-box;
  border: 375px solid transparent;
  margin: -375px;
  border-radius: 0;
  background: url("/images/blobs/products-body-pr-tone-warm-hero-2026-gradient-xs.webp") center / 100% 100% no-repeat border-box;
}
@media (max-width: 575.98px) {
  body.pr-tone-warm .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-warm-hero-2026-gradient-xs.webp");
  }
}
@media (min-width: 576px) and (max-width: 1023.98px) {
  body.pr-tone-warm .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-warm-hero-2026-gradient-sm.webp");
  }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  body.pr-tone-warm .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-warm-hero-2026-gradient-md.webp");
  }
}
@media (min-width: 1280px) {
  body.pr-tone-warm .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-warm-hero-2026-gradient-lg.webp");
  }
}
/* blob-prerender:end */

/* blob-prerender:start body.pr-tone-pink .hero-2026-gradient #76 */
/* Сгенерировано .claude/skills/blob-prerender — руками не править, перезапусти скрипт.
   Было filter: blur(150px) → картинка пятна вместе с ореолом; рамка-отступ
   расширяет фон на ширину ореола, не сдвигая само пятно. */
body.pr-tone-pink .hero-2026-gradient {
  filter: none;
  box-sizing: content-box;
  border: 375px solid transparent;
  margin: -375px;
  border-radius: 0;
  background: url("/images/blobs/products-body-pr-tone-pink-hero-2026-gradient-xs.webp") center / 100% 100% no-repeat border-box;
}
@media (max-width: 575.98px) {
  body.pr-tone-pink .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-pink-hero-2026-gradient-xs.webp");
  }
}
@media (min-width: 576px) and (max-width: 1023.98px) {
  body.pr-tone-pink .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-pink-hero-2026-gradient-sm.webp");
  }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  body.pr-tone-pink .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-pink-hero-2026-gradient-md.webp");
  }
}
@media (min-width: 1280px) {
  body.pr-tone-pink .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-pink-hero-2026-gradient-lg.webp");
  }
}
/* blob-prerender:end */

/* blob-prerender:start body.pr-tone-orange .hero-2026-gradient #77 */
/* Сгенерировано .claude/skills/blob-prerender — руками не править, перезапусти скрипт.
   Было filter: blur(150px) → картинка пятна вместе с ореолом; рамка-отступ
   расширяет фон на ширину ореола, не сдвигая само пятно. */
body.pr-tone-orange .hero-2026-gradient {
  filter: none;
  box-sizing: content-box;
  border: 375px solid transparent;
  margin: -375px;
  border-radius: 0;
  background: url("/images/blobs/products-body-pr-tone-orange-hero-2026-gradient-xs.webp") center / 100% 100% no-repeat border-box;
}
@media (max-width: 575.98px) {
  body.pr-tone-orange .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-orange-hero-2026-gradient-xs.webp");
  }
}
@media (min-width: 576px) and (max-width: 1023.98px) {
  body.pr-tone-orange .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-orange-hero-2026-gradient-sm.webp");
  }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  body.pr-tone-orange .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-orange-hero-2026-gradient-md.webp");
  }
}
@media (min-width: 1280px) {
  body.pr-tone-orange .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-orange-hero-2026-gradient-lg.webp");
  }
}
/* blob-prerender:end */

/* blob-prerender:start body.pr-tone-red .hero-2026-gradient #78 */
/* Сгенерировано .claude/skills/blob-prerender — руками не править, перезапусти скрипт.
   Было filter: blur(150px) → картинка пятна вместе с ореолом; рамка-отступ
   расширяет фон на ширину ореола, не сдвигая само пятно. */
body.pr-tone-red .hero-2026-gradient {
  filter: none;
  box-sizing: content-box;
  border: 375px solid transparent;
  margin: -375px;
  border-radius: 0;
  background: url("/images/blobs/products-body-pr-tone-red-hero-2026-gradient-xs.webp") center / 100% 100% no-repeat border-box;
}
@media (max-width: 575.98px) {
  body.pr-tone-red .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-red-hero-2026-gradient-xs.webp");
  }
}
@media (min-width: 576px) and (max-width: 1023.98px) {
  body.pr-tone-red .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-red-hero-2026-gradient-sm.webp");
  }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  body.pr-tone-red .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-red-hero-2026-gradient-md.webp");
  }
}
@media (min-width: 1280px) {
  body.pr-tone-red .hero-2026-gradient {
    border-width: 375px;
    margin: -375px;
    background-image: url("/images/blobs/products-body-pr-tone-red-hero-2026-gradient-lg.webp");
  }
}
/* blob-prerender:end */