/* ==========================================================================
   PIMPORT — оформление «Clay» (макет «Homepage — Clay, no lottery», EN,
   1440 и 390). Мягкие белые карточки над утопленными подложками, крупная
   плотная типографика, живые сцены на условных данных.

   Подключается только на страницах в новом оформлении (pim_is_clay(),
   inc/clay.php) поверх theme.css: у body класс pim-clay, шапка и подвал
   перекрашиваются здесь на своих старых классах. Примитивы — с префиксом
   c-, секции главной — с префиксом h-.
   ========================================================================== */

:root {
  --c-ground: #F3F4F8;
  --c-ink: #151A2D;
  --c-ink-2: #3A4160;
  --c-body: #4A5272;
  --c-muted: #626986;
  --c-well-bg: #EEF0F5;
  --c-tint-bg: #EEF2FF;
  --c-accent: #1A4FD6;
  --c-accent-hover: #163FB8;
  --c-ok: #1D7A45;
  --c-danger: #B4442A;
  --c-line: #E3E6EE;
  --c-wrap: 1200px;
  --c-pad: 24px;
}

body.pim-clay {
  background: var(--c-ground);
  color: var(--c-ink);

  /* Токены theme.css в значениях нового оформления: почти все компоненты
     темы строятся на них, и одна подмена доносит фон, линии, радиусы и
     тени до каждой страницы. Моноширинный шрифт в подписях и бейджах
     уходит — в новом оформлении его нет; код в статьях остаётся моно
     (правило ниже). */
  --pim-canvas: var(--c-ground);
  --pim-subtle: var(--c-well-bg);
  --pim-ink: var(--c-ink);
  --pim-muted: var(--c-body);
  --pim-faint: var(--c-muted);
  --pim-line: #E3E6EE;
  --pim-strong: #D9DEE8;
  --pim-accent-soft: var(--c-tint-bg);
  --pim-accent-line: #D6E0FC;
  --pim-r-sm: 8px;
  --pim-r-md: 14px;
  --pim-r-lg: 24px;
  --pim-shadow-sm: 0 1px 2px rgba(20, 32, 72, .05);
  --pim-shadow-card: 0 0 0 1px #E6E9F1, 0 6px 16px rgba(20, 32, 72, .06);
  --pim-container: var(--c-wrap);
  --pim-mono: var(--pim-sans);
}

.pim-clay .pim-prose code,
.pim-clay .pim-prose pre,
.pim-clay .pim-code-inline,
.pim-clay kbd,
.pim-clay samp {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.pim-clay a { color: var(--c-accent); }
.pim-clay a:hover { color: var(--c-accent-hover); }

/* ------------------------------------------------------------ примитивы --- */

/* Карточка «поверх»: белая, светлый блик сверху, мягкая тень вниз. */
.c-soft {
  background: #FFFFFF;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 -2px 0 rgba(20, 32, 72, .035) inset,
    0 2px 6px rgba(20, 32, 72, .05),
    0 14px 34px rgba(20, 32, 72, .07);
}

/* Подложка «вглубь»: внутренняя тень сверху, блик снизу. */
.c-well {
  background: var(--c-well-bg);
  box-shadow: inset 0 2px 6px rgba(20, 32, 72, .08), inset 0 -1px 0 rgba(255, 255, 255, .9);
}

.c-tint { background: var(--c-tint-bg); }

/* Второстепенные карточки — спокойнее (D12): тонкая граница и лёгкая тень.
   Полную глубину держат только сцена первого экрана, главная карточка
   цены, блок наценки и финальный призыв — так видно, что здесь главное. */
.h-step.c-soft,
.h-tile.c-soft:not(.h-tile--big),
.h-price__card.c-soft,
.h-good.c-soft,
.h-facts__card.c-soft {
  box-shadow: 0 0 0 1px #E6E9F1, 0 1px 2px rgba(20, 32, 72, .04), 0 6px 16px rgba(20, 32, 72, .04);
}

.c-num { font-variant-numeric: tabular-nums; }

.c-pbtn,
.c-sbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s, transform .2s, box-shadow .2s;
}

.c-pbtn {
  min-height: 48px;
  padding: 0 20px;
  background: var(--c-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(26, 79, 214, .2), 0 8px 18px rgba(26, 79, 214, .18);
  font-size: 15px;
}

.pim-clay .c-pbtn,
.pim-clay .c-pbtn:hover,
.pim-clay .c-pbtn:visited { color: #FFFFFF; text-decoration: none; }

.c-pbtn:hover { background: var(--c-accent-hover); transform: translateY(-1px); }
.c-pbtn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .18); }

.pim-clay .c-sbtn,
.pim-clay .c-sbtn:hover { color: var(--c-ink); text-decoration: none; }

.c-sbtn:hover { transform: translateY(-1px); }

.c-pbtn--lg { min-height: 56px; padding: 0 26px; font-size: 17px; }
.c-pbtn--md { min-height: 54px; padding: 0 24px; font-size: 16px; }
.c-sbtn--lg { min-height: 56px; padding: 0 22px; font-size: 17px; }

/* Приподнимается под указателем — только там, где указатель есть. */
.c-lift { transition: transform .35s cubic-bezier(.2, .9, .3, 1), box-shadow .35s; }

@media (hover: hover) {
  .c-lift:hover { transform: translateY(-3px); }
}

.pim-clay :focus-visible {
  outline: 3px solid #8FAAFF;
  outline-offset: 3px;
}

/* ------------------------------------------------------------- анимации --- */

@keyframes c-dash { to { stroke-dashoffset: -24; } }
@keyframes c-floaty {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-9px) rotate(var(--r, 0deg)); }
}
@keyframes c-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes c-travel {
  0% { offset-distance: 0%; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes c-pop { 0% { transform: scale(1.16); } 10% { transform: scale(.96); } 18%, 100% { transform: scale(1); } }
@keyframes c-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes c-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes c-nudge { 0%, 70%, 100% { transform: translateX(0); } 80% { transform: translateX(6px); } 90% { transform: translateX(0); } }

/* Появление блоков при прокрутке — анимацией, привязанной к прокрутке.
   Браузер, который её не умеет, показывает блок сразу: скрытым он не
   останется ни при каком раскладе. */
@supports (animation-timeline: view()) {
  .c-rv {
    animation: c-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 24%;
  }
}

/* «Остановить анимацию» в шапке ставит этот класс у body (home.js). */
/* Сцены главной двигаются один раз, когда впервые попали на экран: home.js
   ставит секции класс is-live, и каждая анимация ниже укладывается в 5 с
   и заканчивается в покое. Бесконечного движения на странице нет, поэтому
   и кнопка «остановить» не нужна (WCAG 2.2.2 — до 5 с). Без скрипта и при
   prefers-reduced-motion класса нет и сцены стоят в конечном положении. */

/* ---------------------------------------------------------------- шапка --- */

.pim-clay .pim-header {
  top: 0;
  padding: 12px var(--c-pad) 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
}

.pim-clay .pim-header__inner {
  position: relative;
  width: auto;
  max-width: var(--c-wrap);
  height: auto;
  min-height: 60px;
  padding: 8px 8px 8px 16px;
  gap: 6px 18px;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 -2px 0 rgba(20, 32, 72, .035) inset,
    0 2px 6px rgba(20, 32, 72, .05),
    0 14px 34px rgba(20, 32, 72, .07);
}

.pim-clay .pim-logo { color: var(--c-ink); }
.pim-clay .pim-logo__text { font-size: 21px; }

.pim-clay .pim-nav {
  flex: 1 1 auto;
  margin-right: 0;
  gap: 2px;
}

.pim-clay .pim-nav a {
  padding: 0 11px;
  border-radius: 10px;
  color: var(--c-ink-2);
  font-weight: 500;
}

.pim-clay .pim-nav a:hover {
  background: var(--c-well-bg);
  color: var(--c-ink);
}

.pim-clay .pim-langs {
  height: auto;
  padding: 3px;
  border: 0;
  border-radius: 12px;
  background: var(--c-well-bg);
  box-shadow: inset 0 2px 6px rgba(20, 32, 72, .08), inset 0 -1px 0 rgba(255, 255, 255, .9);
  overflow: visible;
}

.pim-clay .pim-langs__item {
  min-width: 38px;
  min-height: 38px;
  padding: 0 10px;
  border-right: 0;
  border-radius: 9px;
  color: var(--c-muted);
  font-family: var(--pim-sans);
  font-size: 13px;
  font-weight: 600;
}

.pim-clay .pim-langs__item[aria-current="true"] {
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20, 32, 72, .08), 0 2px 6px rgba(20, 32, 72, .06);
  color: var(--c-ink);
}

.pim-clay .pim-btn--primary,
.pim-clay #pim-nav .pim-nav__cta {
  border: 0;
  border-radius: 14px;
  background: var(--c-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(26, 79, 214, .2), 0 8px 18px rgba(26, 79, 214, .18);
}

.pim-clay .pim-btn--primary,
.pim-clay .pim-btn--primary:hover,
.pim-clay .pim-btn--primary:visited { color: #FFFFFF; text-decoration: none; }

.pim-clay .pim-btn--primary:hover,
.pim-clay #pim-nav .pim-nav__cta:hover { background: var(--c-accent-hover); }

.pim-clay .pim-burger {
  /* Без flex: none шапка ужимала кнопку до 18 px, когда рядом длинная
     подпись «Демо» и три языка. */
  flex: none;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 12px;
  background: var(--c-well-bg);
  box-shadow: inset 0 2px 6px rgba(20, 32, 72, .08), inset 0 -1px 0 rgba(255, 255, 255, .9);
}

.pim-clay .pim-burger span { width: 18px; height: 2px; border-radius: 2px; }

@media (max-width: 1023px) {
  .pim-clay .pim-header { padding: 10px 12px 0; }
  .pim-clay .pim-header__inner { min-height: 58px; padding: 6px 6px 6px 12px; gap: 8px; border-radius: 18px; }
  .pim-clay .pim-logo__text { font-size: 20px; }

  .pim-clay .pim-header__demo { color: var(--c-accent); }

  .pim-clay .pim-nav--open {
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    padding: 10px 12px 14px;
    border: 0;
    border-radius: 22px;
    background: #FFFFFF;
    box-shadow: 0 2px 6px rgba(20, 32, 72, .05), 0 18px 40px rgba(20, 32, 72, .14);
  }

  .pim-clay .pim-nav--open a {
    height: 50px;
    padding: 0 10px;
    color: var(--c-ink);
    font-size: 19px;
    font-weight: 600;
  }

  .pim-clay .pim-nav--open .pim-nav__cta { min-height: 52px; height: auto; font-size: 16px; }
}

/* Узкие телефоны: логотип, «Демо», меню и три языка должны уместиться в
   строку — как в старой шапке, кнопки языков ужимаются по ширине. */
@media (max-width: 480px) {
  .pim-clay .pim-langs__item { min-width: 32px; padding: 0 6px; }
  .pim-clay .pim-header__demo { padding: 0 6px; }
}

/* До 379 px логотип, «Демо», меню 46 px и три языка в строку не входят:
   быстрая ссылка уходит — «Демо» остаётся в самом меню. */
@media (max-width: 379px) {
  .pim-clay .pim-header__demo { display: none; }
}

@media (max-width: 359px) {
  .pim-clay .pim-header { padding: 8px 8px 0; }
  .pim-clay .pim-langs__item { min-width: 28px; padding: 0 4px; }
}

/* ---------------------------------------------------------------- подвал --- */

.pim-clay .pim-footer {
  margin-top: 0;
  padding: 0 var(--c-pad) 32px;
  border-top: 0;
  background: transparent;
}

.pim-clay .pim-footer__card {
  max-width: var(--c-wrap);
  margin: 0 auto;
  padding: 36px;
  border-radius: 28px;
  background: #FFFFFF;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 -2px 0 rgba(20, 32, 72, .035) inset,
    0 2px 6px rgba(20, 32, 72, .05),
    0 14px 34px rgba(20, 32, 72, .07);
}

.pim-clay .pim-footer .pim-container { width: auto; }

.pim-clay .pim-footer__cols { padding: 0 0 26px; }

.pim-clay .pim-footer__text { color: var(--c-muted); font-size: 14px; }

.pim-clay .pim-footer__col-title { color: var(--c-muted); font-size: 13px; }

.pim-clay .pim-footer__col a,
.pim-clay .pim-footer__col--mono a {
  min-height: 32px;
  color: var(--c-ink);
  font-family: var(--pim-sans);
  font-size: 15px;
}

.pim-clay .pim-footer__col a:hover { color: var(--c-accent); }

.pim-clay .pim-footer__col { gap: 2px; }

.pim-clay .pim-footer__hours { font-family: var(--pim-sans); font-size: 13px; color: var(--c-muted); }

.pim-clay .pim-footer .pim-note { display: none; }

.pim-clay .pim-footer__bottom {
  padding: 12px 18px;
  border: 0;
  border-radius: 14px;
  background: var(--c-well-bg);
  box-shadow: inset 0 2px 6px rgba(20, 32, 72, .08), inset 0 -1px 0 rgba(255, 255, 255, .9);
  color: var(--c-muted);
  font-family: var(--pim-sans);
  font-size: 14px;
}

.pim-clay .pim-footer__legal a,
.pim-clay .pim-footer__consent,
.pim-clay .pim-footer__langs a { color: var(--c-muted); }

.pim-clay .pim-footer__langs [aria-current="true"] { color: var(--c-ink); }

@media (max-width: 767px) {
  .pim-clay .pim-footer { padding: 0 12px 96px; }
  .pim-clay .pim-footer__card { padding: 24px 20px; border-radius: 24px; }
  .pim-clay .pim-footer__cols { padding: 0 0 22px; }
  .pim-clay .pim-footer__bottom { padding: 12px 16px; }
}

/* ====================================================== общие страницы === */

/* Внутренние страницы в новом оформлении (пока заявка). Разметка у них
   старая — здесь только перекраска её классов, без изменения логики. */

.pim-clay .pim-container { width: min(var(--c-wrap), 100% - 2 * var(--c-pad)); }

.pim-clay .pim-page { padding: 48px 0 72px; }

.pim-clay .pim-page__head { gap: 14px; margin-bottom: 44px; }

/* Кнопки под шапкой страницы: ближе к ней и с полноценным отступом до
   первого раздела — раньше кнопка почти касалась следующего заголовка. */
.pim-clay .pim-page__head + .pim-page__actions { margin: -16px 0 56px; }

.pim-clay .pim-page__title {
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.pim-clay .pim-page__head .pim-hero__lead {
  max-width: 620px;
  color: var(--c-body);
  font-size: 18px;
  line-height: 1.55;
}

.pim-clay .pim-h2 { font-weight: 700; letter-spacing: -0.03em; }

.pim-clay .pim-section { padding-top: 56px; }
.pim-clay .pim-section--tight { padding-top: 8px; }

/* Кнопки старой разметки — в форме кнопок нового оформления. */
.pim-clay .pim-btn { border-radius: 14px; }

.pim-clay .pim-btn--xl { height: auto; min-height: 56px; font-size: 17px; }

.pim-clay .pim-btn--secondary {
  border: 0;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px #E1E5EE, 0 2px 6px rgba(20, 32, 72, .05);
  color: var(--c-ink);
}

.pim-clay .pim-btn--secondary:hover { color: var(--c-accent); }

/* Карточка заявки: форма — белая, «что будет дальше» — в подложке. */
.pim-clay .pim-request {
  border: 0;
  border-radius: 28px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 2px 6px rgba(20, 32, 72, .05),
    0 14px 34px rgba(20, 32, 72, .07);
}

.pim-clay .pim-request__main { padding: 40px; border-right: 0; }

.pim-clay .pim-request__aside {
  padding: 40px 36px;
  background: var(--c-well-bg);
  box-shadow: inset 0 2px 6px rgba(20, 32, 72, .06);
}

.pim-clay .pim-request__aside-title { color: var(--c-ink); font-size: 17px; font-weight: 700; }

.pim-clay .pim-next__num {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 0;
  border-radius: 9px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20, 32, 72, .08);
  color: var(--c-accent);
  font-family: var(--pim-sans);
  font-size: 13px;
  font-weight: 700;
}

.pim-clay .pim-next__title { color: var(--c-ink); font-weight: 600; }
.pim-clay .pim-next__text { color: var(--c-body); }

.pim-clay .pim-request__aside-foot {
  border-top-color: #DCE0EA;
  color: var(--c-muted);
  font-family: var(--pim-sans);
  font-size: 13px;
}

/* Поля. */
.pim-clay .pim-field label { color: var(--c-ink-2); font-size: 14px; }

.pim-clay .pim-field input,
.pim-clay .pim-field select,
.pim-clay .pim-field textarea {
  border: 1px solid #D9DEE8;
  border-radius: 14px;
  background-color: #FFFFFF;
  font-family: var(--pim-sans);
  font-size: 16px;
  transition: border-color .15s, box-shadow .15s;
}

.pim-clay .pim-field input,
.pim-clay .pim-field select { height: 52px; padding-left: 16px; }

.pim-clay .pim-field textarea { min-height: 112px; padding: 14px 16px; }

.pim-clay .pim-field input:focus,
.pim-clay .pim-field select:focus,
.pim-clay .pim-field textarea:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(26, 79, 214, .14);
}

.pim-clay .pim-field--error input,
.pim-clay .pim-field--error select,
.pim-clay .pim-field--error textarea {
  border-color: var(--pim-danger);
  box-shadow: 0 0 0 4px rgba(180, 35, 24, .1);
}

.pim-clay .pim-field__hint { color: var(--c-muted); }

.pim-clay .pim-form__alert { border-left: 0; border-radius: 14px; }

.pim-clay .pim-context {
  border: 0;
  border-radius: 14px;
  background: var(--c-tint-bg);
}

.pim-clay .pim-form__hint,
.pim-clay .pim-form__privacy { color: var(--c-muted); }

/* «Что вы получите до оплаты» и ссылки под формой. */
.pim-clay .pim-trust {
  border: 0;
  border-radius: 28px;
  box-shadow: 0 0 0 1px #E6E9F1, 0 1px 2px rgba(20, 32, 72, .04), 0 6px 16px rgba(20, 32, 72, .04);
}

.pim-clay .pim-trust__text { color: var(--c-body); }
.pim-clay .pim-trust__stats { border-left-color: #E3E6EE; }

.pim-clay .pim-stat__num,
.pim-clay .pim-trust__stats .pim-stat__num { font-family: var(--pim-sans); font-weight: 700; letter-spacing: -0.03em; }
.pim-clay .pim-stat__label { color: var(--c-muted); }

.pim-clay .pim-card {
  border: 0;
  border-radius: 24px;
  box-shadow: 0 0 0 1px #E6E9F1, 0 1px 2px rgba(20, 32, 72, .04), 0 6px 16px rgba(20, 32, 72, .04);
}

.pim-clay .pim-linkcard { transition: transform .35s cubic-bezier(.2, .9, .3, 1), box-shadow .35s; }

.pim-clay .pim-linkcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px #DCE1EC, 0 10px 24px rgba(20, 32, 72, .08);
}

/* Врезки и финальный призыв страницы (template-parts/page-cta.php). */
.pim-clay .pim-callout {
  padding: 22px 26px;
  border: 0;
  border-radius: 22px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px #E6E9F1, 0 1px 2px rgba(20, 32, 72, .04), 0 6px 16px rgba(20, 32, 72, .04);
}

.pim-clay .pim-callout__title { font-weight: 700; }

/* Финал страницы — как финальный призыв главной: полная глубина, крупно. */
.pim-clay .pim-callout--final {
  margin-top: 56px;
  padding: 36px 40px;
  border-radius: 32px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 2px 6px rgba(20, 32, 72, .05),
    0 14px 34px rgba(20, 32, 72, .07);
}

.pim-clay .pim-callout--final .pim-callout__title {
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.pim-clay .pim-callout--final .pim-callout__text { font-size: 16px; }

/* Вопросы-аккордеоны внутренних страниц — карточками, как на главной. */
.pim-clay .pim-faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 0;
  background: transparent;
  overflow: visible;
}

.pim-clay .pim-faq__item {
  padding: 18px 22px;
  border: 0;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px #E6E9F1, 0 1px 2px rgba(20, 32, 72, .04);
  transition: background-color .25s, box-shadow .25s;
}

.pim-clay .pim-faq__item:last-child { border-bottom: 0; }
.pim-clay .pim-faq__item:hover { background: #FFFFFF; box-shadow: 0 0 0 1px #D9DEE8, 0 4px 12px rgba(20, 32, 72, .06); }

.pim-clay .pim-faq__item[aria-expanded="true"] {
  background: var(--c-well-bg);
  box-shadow: inset 0 2px 6px rgba(20, 32, 72, .08), inset 0 -1px 0 rgba(255, 255, 255, .9);
}

.pim-clay .pim-faq__question { font-size: 17px; }
.pim-clay .pim-faq__answer { color: var(--c-body); }

.pim-clay .pim-sign {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 9px;
  background: var(--c-tint-bg);
  color: var(--c-accent);
  font-weight: 700;
}

.pim-clay .pim-details {
  border: 0;
  border-radius: 20px;
  box-shadow: 0 0 0 1px #E6E9F1, 0 1px 2px rgba(20, 32, 72, .04);
}

.pim-clay .pim-details[open] .pim-details__summary { border-bottom-color: #E6E9F1; }

@media (max-width: 1023px) {
  .pim-clay .pim-request__main,
  .pim-clay .pim-request__aside { padding: 28px; }
}

/* Телефон: вводный отступ перед формой короче — форма ближе к началу. */
@media (max-width: 620px) {
  .pim-clay .pim-page { padding: 20px 0 48px; }
  .pim-clay .pim-page__head { gap: 10px; margin-bottom: 28px; }
  .pim-clay .pim-page__head + .pim-page__actions { margin: -8px 0 36px; }
  .pim-clay .pim-callout--final { margin-top: 40px; padding: 24px 20px; border-radius: 24px; }
  .pim-clay .pim-callout--final .pim-btn { width: 100%; }
  .pim-clay .pim-faq__item { padding: 16px; }
  .pim-clay .pim-page__title { font-size: 34px; }
  .pim-clay .pim-page__head .pim-hero__lead { font-size: 16px; }
  .pim-clay .pim-section { padding-top: 40px; }
  .pim-clay .pim-request { border-radius: 22px; }
  .pim-clay .pim-request__main,
  .pim-clay .pim-request__aside { padding: 20px 16px; }
  .pim-clay .pim-trust { border-radius: 22px; }
}

/* ========================================== сцена платформ (страницы) === */

/* template-parts/platform-scene.php — SVG: прайсы → механизм → магазин на
   платформе. Всё по кругу и вразнобой: у каждой части своя длительность
   (решение владельца 19.10.2026). При prefers-reduced-motion анимации
   выключает общее правило theme.css, сцена стоит в спокойном виде; вне
   экрана — пауза (theme.js ставит is-paused). */

.ps-scene { padding: 14px; border-radius: 28px; }
.ps-scene.is-paused * { animation-play-state: paused !important; }

.ps-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ps-svg--narrow { display: none; }

.ps-t { font-family: var(--pim-sans); }
.ps-t--fmt { fill: var(--c-accent); font-size: 9.5px; font-weight: 700; }
.ps-t--name { fill: var(--c-ink); font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }
.ps-t--from { fill: var(--c-muted); font-size: 13px; font-weight: 700; }
.ps-t--to { fill: var(--c-accent); font-size: 15px; font-weight: 700; }
.ps-t--tag { fill: var(--c-ok); font-size: 11px; font-weight: 600; }
.ps-t--foot,
.ps-t--label { fill: var(--c-muted); font-size: 11px; font-weight: 600; }
.ps-t--brand { fill: var(--c-ink); font-size: 13px; font-weight: 700; }
.ps-t--price { fill: var(--c-accent); font-size: 12px; font-weight: 700; }

/* Провода и бегущие по ним импульсы — у каждого свой темп и сдвиг. */
.ps-wire { fill: none; stroke: #C9D5FF; stroke-width: 2; stroke-dasharray: 4 4; }

.ps-pulse {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 5 95;
  stroke-dashoffset: 100;
  animation: ps-pulse calc(1.7s + var(--i) * .29s) linear calc(var(--i) * -.53s) infinite;
}

@keyframes ps-pulse {
  0% { stroke-dashoffset: 100; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { stroke-dashoffset: 5; opacity: 0; }
}

/* Прайсы покачиваются, каждый в своём ритме. */
.ps-sheet {
  transform-box: fill-box;
  transform-origin: center;
  animation: ps-bob calc(2.9s + var(--i) * .41s) ease-in-out calc(var(--i) * -.77s) infinite;
}

@keyframes ps-bob {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  30% { transform: translate(1px, -3px) rotate(-1.2deg); }
  70% { transform: translate(-1px, 2px) rotate(.8deg); }
}

/* Механизм — конвейер: шестерёнка крутится, товары по очереди проходят
   обработку. Круг из пяти товаров — 16 с, окно товара — 3,2 с (20 %);
   задержка карточки — --k × 3,2 с, её части берут ту же задержку. Без
   анимации виден первый товар целиком обработанным, плашки горят. */
.ps-gear { transform-box: fill-box; transform-origin: center; animation: ps-rot 6s linear infinite; }
@keyframes ps-rot { to { transform: rotate(360deg); } }

.ps-t--good { fill: var(--c-ink); font-size: 12px; font-weight: 700; }
.ps-t--gfrom { fill: var(--c-muted); font-size: 12px; font-weight: 700; }
.ps-t--gto { fill: var(--c-accent); font-size: 13px; font-weight: 700; }

.ps-good { opacity: 0; transform-box: fill-box; animation: ps-good 16s ease-in-out calc(var(--k) * 3.2s) infinite both; }
.ps-good--0 { opacity: 1; }

@keyframes ps-good {
  0% { opacity: 0; transform: translateX(-26px); }
  1.6%, 16.5% { opacity: 1; transform: none; }
  19.5%, 100% { opacity: 0; transform: translateX(26px); }
}

/* Фото. */
.ps-good__photo {
  transform-box: fill-box;
  transform-origin: center;
  animation: ps-good-photo 16s ease-out calc(var(--k) * 3.2s) infinite both;
}

@keyframes ps-good-photo {
  0%, 3% { opacity: 0; transform: scale(.6); }
  4.6%, 100% { opacity: 1; transform: none; }
}

/* Описание — строки заполняются слева направо. */
.ps-good__desc {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: ps-good-desc 16s ease-out calc(var(--k) * 3.2s) infinite both;
}

.ps-good__desc--2 { animation-name: ps-good-desc2; }

@keyframes ps-good-desc { 0%, 5.2% { transform: scaleX(0); } 7.6%, 100% { transform: scaleX(1); } }
@keyframes ps-good-desc2 { 0%, 6.6% { transform: scaleX(0); } 9%, 100% { transform: scaleX(1); } }

/* Наценка: новая цена и процент, цена поставщика приглушается. */
.ps-good__markup {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: ps-good-markup 16s ease-out calc(var(--k) * 3.2s) infinite both;
}

@keyframes ps-good-markup {
  0%, 9.4% { opacity: 0; transform: translateX(-6px); }
  10.4% { opacity: 1; transform: scale(1.06); }
  11.4%, 100% { opacity: 1; transform: none; }
}

.ps-good__from { animation: ps-good-from 16s ease-out calc(var(--k) * 3.2s) infinite both; }
@keyframes ps-good-from { 0%, 9.6% { opacity: 1; } 10.6%, 100% { opacity: .55; } }

/* Категория — метка с папкой (плашка «Категория» горит на 63 % окна). */
.ps-good__cat {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: ps-good-cat 16s ease-out calc(var(--k) * 3.2s) infinite both;
}

@keyframes ps-good-cat {
  0%, 12% { opacity: 0; transform: scale(.7); }
  13.2%, 100% { opacity: 1; transform: none; }
}

/* Готово — галочка, после неё карточка уезжает в магазин. */
.ps-good__done {
  transform-box: fill-box;
  transform-origin: center;
  animation: ps-good-done 16s cubic-bezier(.2, 1.4, .4, 1) calc(var(--k) * 3.2s) infinite both;
}

@keyframes ps-good-done {
  0%, 13.6% { opacity: 0; transform: scale(.3); }
  15.2%, 100% { opacity: 1; transform: none; }
}

/* Чек-лист «что делает PIMPORT»: цикл 3,2 с совпадает с окном товара.
   На своём шаге строка подсвечивается, кружок становится зелёным и в нём
   появляется галочка; в конце окна всё гаснет перед следующим товаром.
   Без анимации все четыре строки отмечены. */
.ps-chip__bg { fill: var(--c-tint-bg); }
.ps-chip__dot { fill: #2DBE6C; }
.ps-chip__check { transform-box: fill-box; transform-origin: center; }
.ps-chip__text { fill: var(--c-accent); font-size: 11px; font-weight: 700; }

/* У каждой строки свои кадры: загорается на своём шаге (фото 24 %,
   описание 32 %, наценка 52 %, категория 63 % окна), гаснут все вместе
   в конце окна, пока карточка уезжает. */
.ps-chip--0 .ps-chip__bg { animation: ps-chip-bg0 3.2s ease-in-out infinite both; }
.ps-chip--0 .ps-chip__dot { animation: ps-chip-dot0 3.2s ease-in-out infinite both; }
.ps-chip--0 .ps-chip__check { animation: ps-chip-check0 3.2s cubic-bezier(.2, 1.5, .4, 1) infinite both; }
.ps-chip--0 .ps-chip__text { animation: ps-chip-text0 3.2s ease-in-out infinite both; }
.ps-chip--1 .ps-chip__bg { animation: ps-chip-bg1 3.2s ease-in-out infinite both; }
.ps-chip--1 .ps-chip__dot { animation: ps-chip-dot1 3.2s ease-in-out infinite both; }
.ps-chip--1 .ps-chip__check { animation: ps-chip-check1 3.2s cubic-bezier(.2, 1.5, .4, 1) infinite both; }
.ps-chip--1 .ps-chip__text { animation: ps-chip-text1 3.2s ease-in-out infinite both; }
.ps-chip--2 .ps-chip__bg { animation: ps-chip-bg2 3.2s ease-in-out infinite both; }
.ps-chip--2 .ps-chip__dot { animation: ps-chip-dot2 3.2s ease-in-out infinite both; }
.ps-chip--2 .ps-chip__check { animation: ps-chip-check2 3.2s cubic-bezier(.2, 1.5, .4, 1) infinite both; }
.ps-chip--2 .ps-chip__text { animation: ps-chip-text2 3.2s ease-in-out infinite both; }
.ps-chip--3 .ps-chip__bg { animation: ps-chip-bg3 3.2s ease-in-out infinite both; }
.ps-chip--3 .ps-chip__dot { animation: ps-chip-dot3 3.2s ease-in-out infinite both; }
.ps-chip--3 .ps-chip__check { animation: ps-chip-check3 3.2s cubic-bezier(.2, 1.5, .4, 1) infinite both; }
.ps-chip--3 .ps-chip__text { animation: ps-chip-text3 3.2s ease-in-out infinite both; }

@keyframes ps-chip-bg0 { 0%, 21% { fill: #EEF0F5; } 24%, 82% { fill: #EEF2FF; } 90%, 100% { fill: #EEF0F5; } }
@keyframes ps-chip-dot0 { 0%, 21% { fill: #D9DEE8; } 24%, 82% { fill: #2DBE6C; } 90%, 100% { fill: #D9DEE8; } }
@keyframes ps-chip-check0 { 0%, 21% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(1.25); } 29%, 82% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes ps-chip-text0 { 0%, 21% { fill: #8A90A8; } 24%, 82% { fill: #1A4FD6; } 90%, 100% { fill: #8A90A8; } }
@keyframes ps-chip-bg1 { 0%, 29% { fill: #EEF0F5; } 32%, 82% { fill: #EEF2FF; } 90%, 100% { fill: #EEF0F5; } }
@keyframes ps-chip-dot1 { 0%, 29% { fill: #D9DEE8; } 32%, 82% { fill: #2DBE6C; } 90%, 100% { fill: #D9DEE8; } }
@keyframes ps-chip-check1 { 0%, 29% { opacity: 0; transform: scale(.3); } 33% { opacity: 1; transform: scale(1.25); } 37%, 82% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes ps-chip-text1 { 0%, 29% { fill: #8A90A8; } 32%, 82% { fill: #1A4FD6; } 90%, 100% { fill: #8A90A8; } }
@keyframes ps-chip-bg2 { 0%, 49% { fill: #EEF0F5; } 52%, 82% { fill: #EEF2FF; } 90%, 100% { fill: #EEF0F5; } }
@keyframes ps-chip-dot2 { 0%, 49% { fill: #D9DEE8; } 52%, 82% { fill: #2DBE6C; } 90%, 100% { fill: #D9DEE8; } }
@keyframes ps-chip-check2 { 0%, 49% { opacity: 0; transform: scale(.3); } 53% { opacity: 1; transform: scale(1.25); } 57%, 82% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes ps-chip-text2 { 0%, 49% { fill: #8A90A8; } 52%, 82% { fill: #1A4FD6; } 90%, 100% { fill: #8A90A8; } }
@keyframes ps-chip-bg3 { 0%, 60% { fill: #EEF0F5; } 63%, 82% { fill: #EEF2FF; } 90%, 100% { fill: #EEF0F5; } }
@keyframes ps-chip-dot3 { 0%, 60% { fill: #D9DEE8; } 63%, 82% { fill: #2DBE6C; } 90%, 100% { fill: #D9DEE8; } }
@keyframes ps-chip-check3 { 0%, 60% { opacity: 0; transform: scale(.3); } 64% { opacity: 1; transform: scale(1.25); } 68%, 82% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes ps-chip-text3 { 0%, 60% { fill: #8A90A8; } 63%, 82% { fill: #1A4FD6; } 90%, 100% { fill: #8A90A8; } }

/* Магазин, цикл 12 с — четыре этапа импорта (см. шаблон). Карточки идут
   со сдвигом 0,4 с (--i). Без анимации — конечное состояние: всё заполнено,
   цены и наличие стоят, подпись — первого этапа. */
.ps-t--stage { fill: var(--c-accent); font-size: 11px; font-weight: 700; }

.ps-row { transform-box: fill-box; animation: ps-row 12s ease-in-out calc(var(--i) * .4s) infinite both; }

@keyframes ps-row {
  0% { opacity: 0; transform: translateX(-12px); }
  4%, 93% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: none; }
}

/* 2. Фото и описание. */
.ps-row__photo {
  transform-box: fill-box;
  transform-origin: center;
  animation: ps-photo 12s ease-out calc(var(--i) * .4s) infinite both;
}

@keyframes ps-photo {
  0%, 26% { opacity: 0; transform: scale(.6); }
  31%, 100% { opacity: 1; transform: none; }
}

.ps-row__title { animation: ps-title 12s ease-in-out calc(var(--i) * .4s) infinite both; fill: #3A4160; }

@keyframes ps-title {
  0%, 28% { fill: #E3E6EE; }
  33%, 100% { fill: #3A4160; }
}

.ps-row__desc {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: ps-desc 12s ease-out calc(var(--i) * .4s) infinite both;
}

@keyframes ps-desc {
  0%, 31% { transform: scaleX(0); }
  42%, 100% { transform: scaleX(1); }
}

/* 3. Цены: появляются, у первого товара цена меняется со вспышкой. */
.ps-row__price-a,
.ps-row__price-b { transform-box: fill-box; transform-origin: 0 70%; }

.ps-row__price-a { animation: ps-price 12s ease-out calc(var(--i) * .4s) infinite both; }

@keyframes ps-price {
  0%, 51% { opacity: 0; transform: scale(.7); }
  55% { opacity: 1; transform: scale(1.15); }
  58%, 100% { opacity: 1; transform: none; }
}

.ps-row__price-b { opacity: 0; }
.ps-row--0 .ps-row__price-a { animation-name: ps-price-a0; }
.ps-row--0 .ps-row__price-b { animation: ps-price-b0 12s ease-out infinite both; }
.ps-row--0 .ps-row__bg { animation: ps-flash0 12s ease-in-out infinite both; }

@keyframes ps-price-a0 {
  0%, 51% { opacity: 0; transform: scale(.7); }
  55% { opacity: 1; transform: scale(1.15); }
  58%, 64% { opacity: 1; transform: none; }
  67%, 100% { opacity: 0; transform: none; }
}

@keyframes ps-price-b0 {
  0%, 64% { opacity: 0; transform: scale(.7); }
  67% { opacity: 1; transform: scale(1.18); }
  70%, 100% { opacity: 1; transform: none; }
}

@keyframes ps-flash0 {
  0%, 64% { fill: #EEF0F5; }
  67% { fill: #DCE5FF; }
  76%, 100% { fill: #EEF0F5; }
}

/* 4. Наличие: точки загораются, второй товар кончился. */
.ps-row__off { opacity: 0; }
.ps-row__on { animation: ps-on 12s ease-out calc(var(--i) * .4s) infinite both; }

@keyframes ps-on {
  0%, 73% { opacity: 0; }
  77%, 100% { opacity: 1; }
}

.ps-row--1 .ps-row__on { animation-name: ps-on1; }
.ps-row--1 .ps-row__off { animation: ps-off1 12s ease-out .4s infinite both; }
.ps-row--1 .ps-row__price-a { animation-name: ps-price-1; }

@keyframes ps-on1 { 0%, 73% { opacity: 0; } 77%, 84% { opacity: 1; } 87%, 100% { opacity: 0; } }
@keyframes ps-off1 { 0%, 84% { opacity: 0; } 87%, 100% { opacity: 1; } }
@keyframes ps-price-1 {
  0%, 51% { opacity: 0; transform: scale(.7); }
  55% { opacity: 1; transform: scale(1.15); }
  58%, 84% { opacity: 1; transform: none; }
  87%, 100% { opacity: .35; transform: none; }
}

/* Подпись этапа и индикатор. Окна этапов: 0–25, 25–50, 50–71, 71–100 %. */
.ps-stage { opacity: 0; }
.ps-stage--0 { opacity: 1; }
.ps-step { fill: #D9DEE8; }
.ps-step--0 { fill: var(--c-accent); }

.ps-stage--0 { animation: ps-st0 12s linear infinite both; }
.ps-stage--1 { animation: ps-st1 12s linear infinite both; }
.ps-stage--2 { animation: ps-st2 12s linear infinite both; }
.ps-stage--3 { animation: ps-st3 12s linear infinite both; }

@keyframes ps-st0 { 0%, 23% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes ps-st1 { 0%, 25% { opacity: 0; } 27%, 48% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ps-st2 { 0%, 50% { opacity: 0; } 52%, 69% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes ps-st3 { 0%, 71% { opacity: 0; } 73%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }

.ps-step--0 { animation: ps-sp0 12s linear infinite both; }
.ps-step--1 { animation: ps-sp1 12s linear infinite both; }
.ps-step--2 { animation: ps-sp2 12s linear infinite both; }
.ps-step--3 { animation: ps-sp3 12s linear infinite both; }

@keyframes ps-sp0 { 0%, 24% { fill: #1A4FD6; } 25%, 100% { fill: #D9DEE8; } }
@keyframes ps-sp1 { 0%, 24% { fill: #D9DEE8; } 25%, 49% { fill: #1A4FD6; } 50%, 100% { fill: #D9DEE8; } }
@keyframes ps-sp2 { 0%, 49% { fill: #D9DEE8; } 50%, 70% { fill: #1A4FD6; } 71%, 100% { fill: #D9DEE8; } }
@keyframes ps-sp3 { 0%, 70% { fill: #D9DEE8; } 71%, 100% { fill: #1A4FD6; } }

/* Платформы по кругу (страница «Платформы»): окно каждой — 1/N цикла,
   кадры ps-brand-N печатает шаблон. Без анимации видна первая. */
.ps-brand { transform-box: fill-box; }
.ps-scene--cycle .ps-brand { opacity: 0; animation: ps-brand-4 calc(var(--n, 4) * 2.6s) ease-in-out calc(var(--i) * 2.6s) infinite both; }
/* :first-of-type, а не :first-child — первым в группе магазина идёт фон. */
.ps-scene--cycle .ps-brand:first-of-type { opacity: 1; }

/* Без движения — без импульсов: застывший штрих на проводе выглядит сбоем. */
@media (prefers-reduced-motion: reduce) {
  .ps-pulse { display: none; }
}

@media (max-width: 620px) {
  .ps-scene { padding: 10px; border-radius: 24px; }
  .ps-svg--wide { display: none; }
  .ps-svg--narrow { display: block; }
}

/* ============================== платформы: готовые интеграции (карточки) === */

/* page-platforms.php: карточки в оформлении главной. */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.pf-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 28px;
}

.pf-card__head { display: flex; align-items: center; gap: 14px; }

.pf-card__logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
}

.pf-card__logo .pim-platform__logo,
.pf-card__logo img { width: 32px; height: 32px; }

.pf-card__name { flex: 1; min-width: 0; margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }

.pim-clay .pf-card__name a { color: var(--c-ink); text-decoration: none; }
.pim-clay .pf-card__name a:hover { color: var(--c-accent); }

.pf-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #E6F5EC;
  color: var(--c-ok);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.pf-badge .c-check { color: var(--c-ok); }

.pf-card__versions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 18px;
  margin: 0;
  padding: 14px 16px;
  border-radius: 16px;
}

.pf-card__versions dt { color: var(--c-muted); font-size: 12px; font-weight: 600; }
.pf-card__versions dd { margin: 3px 0 0; color: var(--c-ink); font-size: 15px; font-weight: 700; }

.pf-card__text { margin: 0; color: var(--c-body); font-size: 15px; line-height: 1.55; }

/* Возможности — плашками с зелёной галочкой, как чек-лист в сцене. */
.pf-card__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-card__list li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--c-ink-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.pf-tick {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2DBE6C;
}

.pf-card__limits { padding: 14px 16px; border-radius: 16px; }
.pf-card__limits-title { color: var(--c-ink); font-size: 14px; font-weight: 700; }
.pf-card__limits p { margin: 6px 0 0; color: var(--c-body); font-size: 14px; line-height: 1.5; }

.pf-card__ask { display: flex; align-items: flex-start; gap: 8px; color: var(--c-body); font-size: 14px; line-height: 1.5; }
.pf-card__ask svg { flex: none; margin-top: 3px; }

.pf-card__more { margin-top: auto; }

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

@media (max-width: 620px) {
  .pf-card { padding: 18px; border-radius: 24px; }
  /* Пометка — своей строкой под названием: рядом с длинным названием
     («WooCommerce») ей не хватало места, и она наезжала на него. */
  .pf-card__head { flex-wrap: wrap; row-gap: 6px; }
  .pf-card__name { flex: 1 1 calc(100% - 66px); font-size: 19px; }
  .pf-badge { margin-left: 66px; }
  .pf-card__list { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================ плагины === */

/* Каталог /plugins/ и страница плагина (page-plugins.php,
   single-pim_plugin.php, общая карточка — template-parts/plugin-card.php). */

/* Введение в две колонки: текст и схема (каталог плагинов, страницы
   платформ) или пример (плагин). */
.pl-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  align-items: center;
  gap: 48px;
  margin-bottom: 56px;
}

.pl-hero--single { grid-template-columns: minmax(0, 1fr); }

.pim-clay .pl-hero .pim-page__head { margin-bottom: 0; }
.pim-clay .pl-hero .pim-page__actions { margin: 24px 0 0; }

/* Сцена каталога — template-parts/plugin-scene.php (общие части — у ps-). */
.pls-name { fill: var(--c-ink); font-weight: 700; letter-spacing: -0.01em; }
.pls-badge { fill: var(--c-accent); font-size: 10.5px; font-weight: 700; }
.pls-badge--free { fill: var(--c-ok); }
.pls-d { fill: var(--c-ink-2); font-size: 12px; font-weight: 700; }
.pls-d--muted { fill: var(--c-muted); }
.pls-d--to { fill: var(--c-accent); }
.pls-d--ok { fill: var(--c-ok); font-size: 11px; font-weight: 700; }
.pls-d--bad { fill: var(--c-danger); font-size: 11px; font-weight: 700; }
.pls-d--wm { fill: #FFFFFF; font-size: 8px; font-weight: 700; }
.pls-d--code { fill: var(--c-accent); font-size: 10px; font-weight: 700; font-family: "JetBrains Mono", ui-monospace, monospace; }
.pls-brand__name { fill: var(--c-ink); font-size: 11px; font-weight: 700; }
.pls-shop-price { fill: var(--c-accent); font-size: 11px; font-weight: 700; }

.pls-item,
.pls-brand { opacity: 0; transform-box: fill-box; }
.pls-item:first-of-type,
.pls-brand:first-of-type { opacity: 1; }

/* Провода от плагинов — зелёные импульсы снизу вверх, в PIMPORT. */
.pls-up { stroke: #2DBE6C; }

.pls-socket { fill: #FFFFFF; stroke: #9DB2F2; stroke-width: 2; animation: pls-socket 2.4s ease-in-out calc(var(--i) * .8s) infinite; }
@keyframes pls-socket { 0%, 100% { stroke: #9DB2F2; } 50% { stroke: #2DBE6C; } }

.pls-busy { animation: pls-busy 1.6s ease-in-out infinite; }
@keyframes pls-busy { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Навигация по разделам — сегменты, как переключатель на главной. На
   компьютере держится под шапкой, пока листаешь каталог. */
.pl-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border-radius: 16px;
}

.pl-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  color: var(--c-ink-2);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.pim-clay .pl-nav a:hover {
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20, 32, 72, .08), 0 2px 6px rgba(20, 32, 72, .06);
  color: var(--c-ink);
  text-decoration: none;
}

@media (min-width: 1024px) {
  .pl-nav {
    position: sticky;
    top: 86px;
    z-index: 10;
    box-shadow: inset 0 2px 6px rgba(20, 32, 72, .08), 0 6px 18px rgba(20, 32, 72, .08);
  }

  /* Якорь раздела — ниже шапки и плавающей навигации. */
  .pim-clay .pl-group[id] { scroll-margin-top: 150px; }
}

.pl-group { padding-top: 56px; }
.pl-group > .pim-h2 { margin-bottom: 24px; }

.pl-lead {
  max-width: 640px;
  margin: -8px 0 24px;
  color: var(--c-body);
  font-size: 17px;
  line-height: 1.55;
}

.pl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Карточка плагина. */
.pl-card {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 24px;
}

.pl-card__pic {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
}

.pl-card__pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pl-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px 8px;
}

.pl-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

.pl-card__name { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }

.pim-clay .pl-card__name a { color: var(--c-ink); text-decoration: none; }
.pim-clay .pl-card__name a:hover { color: var(--c-accent); }

.pl-card__text { margin: 0; color: var(--c-body); font-size: 15px; line-height: 1.5; }

.pl-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: auto;
  padding-top: 4px;
}

.pl-card__btn { min-height: 40px; padding: 0 16px; font-size: 14px; }

/* Одиночная карточка раздела: снимок слева, текст справа. */
.pl-grid--one { grid-template-columns: minmax(0, 1fr); }

.pl-grid--one .pl-card {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  align-items: center;
  gap: 8px 20px;
}

.pl-grid--one .pl-card__body { padding: 14px 18px 14px 4px; }
.pl-grid--one .pl-card__name { font-size: 20px; }
.pl-grid--one .pl-card__text { max-width: 520px; font-size: 16px; }

/* Подписи под «было → стало». */
#numbers .pl-io + .pim-note { margin-top: 14px; }
#numbers .pim-note + .pim-note { margin-top: 6px; }

.pl-badge {
  flex: none;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--c-tint-bg);
  color: var(--c-accent);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.pl-badge--free { background: #E6F5EC; color: var(--c-ok); }

.pl-chip {
  margin-left: auto;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--c-well-bg);
  color: var(--c-ink-2);
  font-size: 12px;
  font-weight: 600;
}

/* Доработка под задачу: три пункта и действие. */
.pl-tile.c-soft {
  padding: 22px;
  border-radius: 22px;
  box-shadow: 0 0 0 1px #E6E9F1, 0 1px 2px rgba(20, 32, 72, .04), 0 6px 16px rgba(20, 32, 72, .04);
}

.pl-tile__title { font-size: 17px; font-weight: 700; }
.pl-tile__text { margin: 6px 0 0; color: var(--c-body); font-size: 15px; line-height: 1.5; }

.pl-group .pim-callout { margin-top: 20px; }

/* Для разработчиков: текст и короткий список. */
.pl-own {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
  gap: 32px;
  padding: 32px;
  border-radius: 28px;
}

.pl-own__copy p { margin: 12px 0 0; color: var(--c-body); font-size: 16px; line-height: 1.6; }

.pl-own__list { margin: 0; padding: 20px 22px; border-radius: 20px; }
.pl-own__list > div + div { margin-top: 14px; }
.pl-own__list dt { color: var(--c-ink); font-size: 14px; font-weight: 700; }
.pl-own__list dd { margin: 2px 0 0; color: var(--c-body); font-size: 14px; line-height: 1.5; }

/* Страница плагина: пример результата справа от введения. */
.pl-hero__shot { margin: 0; }

.pl-shot { padding: 10px; border-radius: 26px; }

.pl-shot img { display: block; width: 100%; height: auto; border-radius: 18px; }

.pl-shot__caption { margin-top: 10px; color: var(--c-muted); font-size: 13px; text-align: right; }

.pl-shot--text {
  padding: 24px;
  border-radius: 24px;
  color: var(--c-body);
  font-size: 16px;
  line-height: 1.55;
}

.pim-clay .pim-plugin__actions { margin-top: 10px; }

/* Проверенный пример: исходные данные → результат. */
.pl-io {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
}

.pl-io__arrow { align-self: center; }

.pl-io__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border-radius: 18px;
}

.pl-io__label { color: var(--c-muted); font-size: 13px; font-weight: 600; }
.pl-io__value { color: var(--c-ink); font-size: 17px; font-weight: 600; line-height: 1.4; }
.pl-io__cell--out .pl-io__value { color: var(--c-accent); }

/* Как получить и подключить — отдельной карточкой с действием. */
.pl-get { padding: 32px; border-radius: 28px; }
.pl-get .pim-section-head { margin-bottom: 12px; }

@media (max-width: 980px) {
  .pl-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-own { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pl-grid--one { grid-template-columns: minmax(0, 1fr); }
  .pl-grid--one .pl-card { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .pl-hero { margin-bottom: 36px; }
  .pl-nav { width: auto; }
  .pl-nav a { padding: 0 12px; font-size: 14px; }
  .pl-group { padding-top: 40px; }
  .pl-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pl-grid--one .pl-card { display: flex; }
  .pl-grid--one .pl-card__body { padding: 14px 12px 8px; }
  .pl-own { padding: 22px 18px; border-radius: 24px; }
  .pl-io { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pl-io__arrow { justify-self: center; transform: rotate(90deg); }
  .pl-get { padding: 22px 18px; border-radius: 24px; }
}

/* ============================================================= главная === */

.h-wrap {
  width: min(var(--c-wrap), 100% - 2 * var(--c-pad));
  margin-inline: auto;
}

.h-wrap--narrow { width: min(860px, 100% - 2 * var(--c-pad)); }

.h-section { padding: 72px 0 32px; }

/* Переход по якорю (#faq, #pricing…) останавливал заголовок секции под
   липкой шапкой (низ шапки — 72 px на компьютере, 68 на телефоне). Своё
   верхнее поле у секции уже есть, поэтому добавки хватает небольшой:
   заголовок встаёт в 30–40 px под шапкой. */
.pim-clay main [id] { scroll-margin-top: 40px; }

#how.h-section { padding-top: 96px; }

.h-eyebrow {
  color: var(--c-accent);
  font-size: 16px;
  font-weight: 600;
}

.h-eyebrow--sm { font-size: 15px; }

.h-h2 {
  margin: 0;
  font-size: clamp(38px, 4.6vw, 60px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* Вторая половина заголовка приглушена и на компьютере уходит на свою
   строку, как в макете; на телефоне идёт сразу следом. */
.h-h2__dim { display: block; color: var(--c-muted); }

.h-h2--md {
  margin-top: 12px;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
}

.h-head { max-width: 640px; }

.h-head__lead {
  margin: 16px 0 0;
  max-width: 540px;
  color: var(--c-body);
  font-size: 18px;
  line-height: 1.55;
}

.h-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.h-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
}

.h-actions--end { margin-top: auto; padding-top: 28px; }

.h-muted { color: var(--c-muted); font-size: 14px; }

.h-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
}

.h-link--lg { font-size: 16px; }

.h-caption {
  margin-top: 10px;
  color: var(--c-muted);
  font-size: 12px;
  text-align: right;
}

.h-caption--left { margin-top: 0; text-align: left; }

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

.h-hero { padding: 64px 0 72px; }

.h-hero__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
}

.h-hero__copy { flex: 999 1 500px; min-width: 0; }
/* Предметы сцены расставлены от краёв в пикселях: растянутая во всю ширину
   (на планшете, когда сцена уходит под текст) она разваливается. Поэтому
   ширина ограничена, а сцена встаёт по центру. */
.h-hero__scene { flex: 1 1 480px; min-width: 0; max-width: 560px; margin-inline: auto; }

.h-hero__title {
  margin: 16px 0 0;
  /* H1 называет услугу целиком, он длиннее лозунга макета: кегль ниже,
     чтобы на компьютере выходило 2–3 строки. */
  font-size: clamp(44px, 4.8vw, 68px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.h-hero__lead {
  margin: 24px 0 0;
  max-width: 540px;
  color: var(--c-body);
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.55;
}

.h-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

.h-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  color: var(--c-body);
  font-size: 15px;
}

.h-checks li { display: flex; align-items: center; gap: 8px; }

.c-check { flex: none; color: var(--c-accent); }

/* Сцена: прайсы слева, по проводу бегут точки к карточке товара, у которой
   цена меняется с поставщицкой на магазинную; снизу стопка уведомлений. */
.h-scene {
  position: relative;
  height: 486px;
  padding: 28px;
  border-radius: 32px;
  overflow: hidden;
}

.h-sheet {
  position: absolute;
  border-radius: 16px;
}

.is-live .h-sheet { animation: c-floaty 4.2s ease-in-out 1; }

.h-sheet--xml { left: 24px; top: 30px; width: 150px; padding: 14px; --r: -2deg; }
.h-sheet--csv { left: 44px; top: 220px; width: 130px; padding: 12px; --r: 2deg; }

.is-live .h-sheet--csv { animation-delay: .6s; }

.h-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--c-muted);
  font-size: 12px;
  font-weight: 600;
}

.h-fmt {
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--c-tint-bg);
  color: var(--c-accent);
  font-size: 10px;
  font-weight: 700;
}

.h-lines { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.h-lines i { display: block; height: 7px; border-radius: 4px; background: var(--c-line); }
.h-lines i.is-hot { background: #C9D5FF; }
.h-sheet--csv .h-lines { gap: 6px; margin-top: 10px; }
.h-sheet--csv .h-lines i { height: 6px; }

.h-sheet__foot { margin-top: 12px; font-size: 12px; font-weight: 600; }

.h-wire {
  position: absolute;
  left: 176px;
  top: 70px;
  width: 120px;
  height: 300px;
}

.h-wire path {
  fill: none;
  stroke: #9DB2F2;
  stroke-width: 2.5;
  stroke-dasharray: 6 6;
}

.is-live .h-wire path { animation: c-dash 1.2s linear 3; }

.h-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 5px rgba(26, 79, 214, .14);
  offset-path: path('M180 110 C236 110 236 200 292 200');
  opacity: 0;
}

/* Точки пробегают по проводу дважды и гаснут — последний кадр c-travel
   прозрачный. */
.is-live .h-dot { animation: c-travel 1.8s ease-in-out 2; }

.h-dot--b {
  background: #5C80E8;
  offset-path: path('M180 260 C236 260 236 200 292 200');
}

.is-live .h-dot--b { animation-delay: .9s; }

.h-product {
  position: absolute;
  right: 28px;
  top: 46px;
  width: 230px;
  padding: 14px;
  border-radius: 24px;
}

.is-live .h-product { animation: c-bob 4.2s ease-in-out 1; }

.h-product__pic {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  border-radius: 16px;
}

.h-product__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.h-product__prices {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.h-product__arrow { flex: none; margin-bottom: 10px; }

.h-product__from {
  color: var(--c-ink-2);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.45;
}

.h-product__name { font-size: 17px; font-weight: 700; }

.h-product__cat {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--c-well-bg);
  color: var(--c-body);
  font-size: 11px;
  font-weight: 600;
}

.h-product__label { color: var(--c-muted); font-size: 11px; line-height: 1.3; }

.h-product__price {
  display: inline-block;
  transform-origin: 0 70%;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  transition: color .4s;
}

.h-product__price.is-store { color: var(--c-accent); }
.h-product__price.is-pop { animation: c-pop .6s ease-out; }

.h-instock {
  display: flex;
  margin-top: 8px;
  align-items: center;
  gap: 6px;
  color: var(--c-ok);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.h-instock > span:first-child { width: 8px; height: 8px; border-radius: 50%; background: #2DBE6C; }

.h-tag {
  position: absolute;
  right: 14px;
  top: 30px;
  padding: 8px 12px;
  border-radius: 12px;
  color: var(--c-accent);
  font-size: 14px;
  font-weight: 700;
  --r: 4deg;
}

.is-live .h-tag { animation: c-floaty 4.2s ease-in-out .4s 1; }

.h-notes {
  position: absolute;
  right: 40px;
  top: 314px;
  width: 272px;
  height: 160px;
}

.h-note {
  position: absolute;
  left: 0;
  right: 0;
  /* Шаг 54 px: при 42 нижняя карточка закрывала вторую строку верхней. */
  top: calc(var(--i) * 54px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
}

/* Уведомления прилетают по одному и остаются. */
.is-live .h-note { animation: c-in .6s cubic-bezier(.2, 1.2, .4, 1) calc(.4s + var(--i) * .6s) 1 both; }

.h-note__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.h-note__text { min-width: 0; }
.h-note__text b { display: block; font-size: 13px; font-weight: 600; }
.h-note__text span { display: block; color: var(--c-muted); font-size: 12px; }

.h-box {
  position: absolute;
  left: 36px;
  bottom: 26px;
  width: 110px;
  height: 100px;
  --r: -3deg;
}

.is-live .h-box { animation: c-floaty 4.2s ease-in-out .3s 1; }

/* ---------------------------------------------------- платформы и факты --- */

.h-facts__card { padding: 8px; border-radius: 28px; }

.h-facts__platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 34px;
  padding: 18px 24px;
  color: var(--c-ink-2);
  font-size: 18px;
  font-weight: 600;
}

.pim-clay .h-facts__platforms a { color: var(--c-ink-2); }
.pim-clay .h-facts__platforms a:hover { color: var(--c-accent); }

.h-facts__label { color: var(--c-muted); font-size: 14px; font-weight: 500; }

.pim-clay .h-facts__custom { color: var(--c-muted); font-weight: 500; }

.h-facts__nums {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-radius: 22px;
}

.h-facts__nums > div { padding: 22px 24px; }

.h-facts__nums dt { font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }

.h-facts__nums dd { margin: 4px 0 0; color: var(--c-muted); font-size: 14px; }

/* ----------------------------------------------------------------- шаги --- */

.h-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 48px 0 0;
  padding: 0 max(var(--c-pad), (100% - var(--c-wrap)) / 2);
  list-style: none;
}

.h-step { padding: 16px 16px 22px; border-radius: 26px; }

.h-step--pay.c-soft { box-shadow: 0 0 0 2px var(--c-accent), 0 10px 24px rgba(26, 79, 214, .12); }

.h-step__scene {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  height: 150px;
  padding: 18px;
  border-radius: 18px;
}

.h-mini-label { color: var(--c-muted); font-size: 11px; font-weight: 600; }

.h-mini-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--c-ink-2);
  font-size: 13px;
}

.h-mini-send {
  align-self: flex-end;
  padding: 6px 12px;
  border-radius: 9px;
  background: var(--c-accent);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
}

.h-mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.h-mini-grid > span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 10px;
}

.h-mini-grid i { display: block; }

.h-mini-more { color: var(--c-accent); font-size: 12px; font-weight: 700; }

.h-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
}

.h-mini-row > span:first-child { color: var(--c-ink-2); }

.h-done {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2DBE6C;
}

.h-switch {
  position: relative;
  flex: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #C9CEDB;
  transition: background-color .3s;
}

.h-switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: left .35s cubic-bezier(.3, 1.4, .5, 1);
}

.h-switch.is-on { background: var(--c-accent); }
.h-switch.is-on i { left: 19px; }

.h-switch--lg { width: 42px; height: 24px; }
.h-switch--lg i { width: 18px; height: 18px; }
.h-switch--lg.is-on i { left: 21px; }

.h-mini-runs { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.h-mini-runs > div { display: flex; justify-content: space-between; color: var(--c-ink-2); }
.h-mini-runs b { color: var(--c-muted); font-weight: 400; }
.h-mini-runs b.is-done { color: var(--c-ok); font-weight: 600; }

.h-step__copy { margin-top: 18px; padding: 0 6px; }

.h-step__meta { color: var(--c-muted); font-size: 13px; font-weight: 600; }
.h-step--pay .h-step__meta { color: var(--c-accent); }

.h-step__title { margin: 6px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }

.h-step__text { margin: 6px 0 0; color: var(--c-body); font-size: 15px; line-height: 1.5; }

/* ----------------------------------------------------------------- бенто --- */

.h-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 44px;
}

.h-tile { padding: 26px; border-radius: 28px; }

.h-tile--big {
  display: flex;
  flex-direction: column;
  gap: 18px;
  grid-column: span 2;
  grid-row: span 2;
}

.h-tile--wide { grid-column: span 2; }

.h-tile--row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.h-tile__body { flex: 1 1 220px; min-width: 0; }

.h-tile__title { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.h-tile__title--lg { font-size: 24px; letter-spacing: -0.02em; }
.h-tile__title--sm { margin-top: 16px; font-size: 19px; }

.h-tile__text { margin: 6px 0 0; color: var(--c-body); font-size: 15px; line-height: 1.5; }

.h-tile--big .h-tile__text { margin-top: 8px; max-width: 420px; }

.h-table { flex: 1; padding: 6px 14px; border-radius: 20px; }

.h-table__row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr .8fr;
  align-items: center;
  gap: 10px;
  margin: 0 -10px 3px;
  padding: 10px;
  border-radius: 12px;
  font-size: 15px;
  transition: background-color .35s, box-shadow .35s;
}

.h-table__row--head {
  margin: 0;
  padding: 10px 0;
  color: var(--c-muted);
  font-size: 12px;
  font-weight: 600;
}

.h-table__row.is-lit { background: #FFFFFF; box-shadow: 0 2px 6px rgba(20, 32, 72, .08); }

.h-table__name { font-weight: 600; }
.h-table__sup { color: var(--c-muted); }
.h-table__store { color: var(--c-accent); font-weight: 600; }
/* Скрытый товар — приглушённым, но читаемым: 4.5:1 на подложке. */
.h-table__store.is-off { color: var(--c-muted); font-weight: 500; }
.h-table__stock { color: var(--c-ok); font-weight: 600; }
.h-table__stock.is-zero { color: var(--c-danger); }

.h-formats { display: flex; flex-wrap: wrap; gap: 8px; color: var(--c-accent); font-size: 13px; font-weight: 700; }
.h-formats span { padding: 10px 12px; border-radius: 12px; }

.h-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
}

.h-oos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
}

.h-switch--lg i.c-soft { background: #FFFFFF; }

.h-map { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; font-size: 14px; font-weight: 600; }
.h-map > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.h-map span { padding: 7px 12px; border-radius: 10px; }
.h-map .c-well { color: var(--c-ink-2); }
.h-map .c-tint { color: var(--c-accent); }

.h-plugins {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.h-plugins a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  height: 100%;
  padding: 9px 12px;
  border-radius: 12px;
  text-decoration: none;
}

.pim-clay .h-plugins a { color: var(--c-ink); }
.pim-clay .h-plugins a:hover { color: var(--c-accent); text-decoration: none; }

.h-plugins__name { min-width: 0; }
.h-plugins__price { flex: none; font-weight: 600; }
.h-plugins__price.is-free { color: var(--c-ok); }

#plugins .h-link { margin-top: 6px; font-size: 14px; }

/* ------------------------------------------------- наценка по диапазонам --- */

.h-section--tight { padding-top: 72px; }

.h-ranges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 44px;
  padding: clamp(26px, 4vw, 52px);
  border-radius: 36px;
}

.h-ranges__copy { flex: 1 1 360px; min-width: 0; }
.h-ranges__demo { flex: 1 1 460px; min-width: 0; }

.h-ranges .h-head__lead { max-width: 440px; font-size: 17px; }

.h-bands { max-width: 440px; margin-top: 26px; }

.h-bands__bar {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
}

.h-bands__bar span { flex: 1; padding: 12px 0; border-radius: 10px; text-align: center; }
.h-bands__bar span:nth-child(1) { background: var(--c-accent); color: #FFFFFF; }
.h-bands__bar span:nth-child(2) { flex: 1.3; background: #3F65D8; color: #FFFFFF; }
.h-bands__bar span:nth-child(3) { background: #C9D5FF; color: var(--c-ink); }

.h-bands__labels { display: flex; margin-top: 8px; color: var(--c-muted); font-size: 13px; }
.h-bands__labels span { flex: 1; }
.h-bands__labels span:nth-child(1) { padding-left: 8px; }
.h-bands__labels span:nth-child(2) { flex: 1.3; text-align: center; }
.h-bands__labels span:nth-child(3) { padding-right: 8px; text-align: right; }

.h-seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
}

.h-seg[hidden] { display: none; }

.h-seg button {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--c-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.h-seg button[aria-pressed="true"] {
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20, 32, 72, .08), 0 2px 6px rgba(20, 32, 72, .06);
}

.h-goods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.h-good { padding: 14px; border-radius: 22px; }

.h-good__pic {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  border-radius: 14px;
}

.h-good__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }

.h-good__name { font-size: 15px; font-weight: 600; }

.h-good__pct {
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--c-tint-bg);
  color: var(--c-accent);
  font-size: 12px;
  font-weight: 600;
  transition: opacity .3s;
}

[data-mode="supplier"] .h-good__pct { opacity: 0; }

.h-good__price {
  margin-top: 2px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  transition: color .3s;
}

.h-good__price.is-store { color: var(--c-accent); }

/* ------------------------------------------------------------- стоимость --- */

.h-price {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 20px;
  margin-top: 40px;
}

.h-price__main {
  display: flex;
  flex: 999 1 480px;
  flex-direction: column;
  min-width: 0;
  padding: clamp(26px, 4vw, 44px);
  border-radius: 32px;
}

.h-price__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }

.h-price__name { margin: 0; font-size: 20px; font-weight: 700; }
.h-price__name--sm { font-size: 18px; }

.h-badge {
  padding: 5px 11px;
  border-radius: 9px;
  background: var(--c-tint-bg);
  color: var(--c-accent);
  font-size: 13px;
  font-weight: 600;
}

.h-badge--muted { padding: 4px 10px; border-radius: 8px; background: var(--c-well-bg); color: var(--c-muted); font-size: 12px; }

.h-price__sum {
  margin-top: 14px;
  font-size: clamp(64px, 7vw, 92px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
}

.h-price__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  color: var(--c-ink-2);
  font-size: 16px;
}

.h-price__list li { display: flex; gap: 10px; }
.h-price__list .c-check { margin-top: 2px; }

.h-price__side { display: flex; flex: 1 1 320px; flex-direction: column; gap: 20px; min-width: 0; }

.h-price__card { flex: 1; padding: 26px; border-radius: 28px; }

.h-price__card .h-tile__text { margin-top: 10px; }

.h-price__mon {
  margin-top: 12px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.h-price__mon span { color: var(--c-muted); font-size: 15px; font-weight: 500; letter-spacing: 0; }

/* ----------------------------------------------------------------- ролик --- */

.h-video { margin-top: 36px; padding: 14px; border-radius: 36px; }

.h-video .pim-video { margin: 0; border: 0; border-radius: 26px; }

/* ---------------------------------------------------------------- вопросы --- */

.h-faq { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }

.h-faq__item {
  border-radius: 20px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px #E6E9F1, 0 1px 2px rgba(20, 32, 72, .04);
  transition: background-color .25s, box-shadow .25s;
}

/* Раскрытый вопрос «утоплен»: так видно, какой из них сейчас открыт. */
.h-faq__item:has(> [aria-expanded="true"]) {
  background: var(--c-well-bg);
  box-shadow: inset 0 2px 6px rgba(20, 32, 72, .08), inset 0 -1px 0 rgba(255, 255, 255, .9);
}

.h-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 64px;
  padding: 16px 22px;
  border: 0;
  background: transparent;
  color: var(--c-ink);
  font-size: 17px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.h-faq__q:focus-visible { outline-offset: -3px; border-radius: 20px; }

.h-faq__q svg { flex: none; transition: transform .3s; }
.h-faq__q[aria-expanded="true"] svg { transform: rotate(180deg); }

.h-faq__a { margin: 0; padding: 0 22px 20px; color: var(--c-body); font-size: 16px; line-height: 1.6; }

/* hidden="until-found" прячет содержимое, но не саму коробку: без этого
   у свёрнутого вопроса оставался нижний отступ ответа. */
.h-faq__a[hidden] { padding: 0; }

.h-faq__contact { margin: 22px 0 0; color: var(--c-muted); font-size: 15px; }

/* ---------------------------------------------------------------- статьи --- */

.h-h2--sm { font-size: clamp(30px, 3.2vw, 40px); }

.h-articles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.h-article.c-soft {
  border-radius: 24px;
  box-shadow: 0 0 0 1px #E6E9F1, 0 1px 2px rgba(20, 32, 72, .04), 0 6px 16px rgba(20, 32, 72, .04);
}

.h-article a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 22px 24px;
  border-radius: 24px;
  text-decoration: none;
}

.pim-clay .h-article a,
.pim-clay .h-article a:hover { color: var(--c-ink); text-decoration: none; }

.h-article__title { font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.h-article__text { color: var(--c-body); font-size: 15px; line-height: 1.5; }
.h-article__more { margin-top: auto; padding-top: 6px; color: var(--c-accent); font-size: 15px; font-weight: 600; }

@media (max-width: 980px) {
  .h-articles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ------------------------------------------------------ финальный призыв --- */

.h-final { padding: 80px 0 90px; }

.h-final__card {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 72px);
  border-radius: 40px;
  text-align: center;
}

.h-final__title {
  margin: 0;
  font-size: clamp(42px, 5.6vw, 76px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.h-final__text {
  max-width: 520px;
  margin: 20px auto 30px;
  color: var(--c-body);
  font-size: 18px;
  line-height: 1.55;
}

.h-final__note { margin-top: 14px; }

/* ---------------------------------------------- липкая кнопка (телефон) --- */

.h-sticky { display: none; }

/* ------------------------------------------------------------ планшет --- */

@media (max-width: 980px) {
  .h-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Средняя ширина: четыре шага и четыре факта встают 2 × 2 — при
   auto-fit выходило 3 + 1 с одиноким последним. */
@media (max-width: 999px) {
  .h-steps,
  .h-facts__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ телефон --- */

@media (max-width: 620px) {
  :root { --c-pad: 16px; }

  .h-section { padding: 60px 0 20px; }
  #how.h-section { padding-top: 60px; }
  .h-section--tight { padding-top: 40px; }

  .h-h2 { font-size: 38px; }
  .h-h2__dim { display: inline; }
  .h-h2--md { font-size: 30px; line-height: 1.08; }
  .h-head__lead { font-size: 16px; }

  .h-hero { padding: 30px 0 36px; }
  .h-hero__grid { gap: 24px; }
  .h-eyebrow { font-size: 15px; }
  .h-hero__title { margin-top: 12px; font-size: 40px; line-height: 1.05; }
  .h-hero__lead { margin-top: 16px; font-size: 17px; }
  .h-hero__actions { flex-direction: column; align-items: stretch; margin-top: 24px; }
  .h-hero__actions .c-sbtn--lg { min-height: 54px; font-size: 16px; }
  .h-checks { flex-direction: column; margin-top: 18px; }

  /* Сцена на телефоне — компактная: прайс, провод, карточка и одно
     уведомление снизу; второстепенные предметы убраны. */
  .h-scene { height: 304px; padding: 0; border-radius: 26px; }
  .h-sheet--xml { left: 14px; top: 18px; width: 124px; padding: 11px; }
  .h-sheet--xml .h-lines i:nth-child(5) { display: none; }
  .h-lines { gap: 5px; margin-top: 9px; }
  .h-lines i { height: 6px; }
  .h-sheet__head { font-size: 11px; }
  .h-sheet__foot { margin-top: 9px; font-size: 11px; }
  .h-sheet--csv,
  .h-tag,
  .h-box,
  .h-dot { display: none; }
  .h-wire { left: 128px; top: 40px; width: 80px; height: 120px; }
  .h-product { right: 14px; top: 26px; width: 190px; padding: 10px; border-radius: 20px; }
  .h-product__pic { height: 74px; border-radius: 13px; }
  .h-product__pic svg { width: 104px; height: 73px; }
  .h-product__row { margin-top: 8px; }
  .h-product__prices { gap: 6px; margin-top: 6px; }
  .h-product__arrow { width: 12px; margin-bottom: 7px; }
  .h-product__from { font-size: 14px; }
  .h-instock { margin-top: 4px; }
  .h-product__name { font-size: 14px; }
  .h-product__cat { display: none; }
  .h-product__label { font-size: 10px; }
  .h-product__price { font-size: 20px; }
  .h-instock { font-size: 10px; }
  .h-notes { left: 14px; right: 14px; top: auto; bottom: 14px; width: auto; height: 58px; }
  .h-note,
  .is-live .h-note { top: 0; animation: none; }
  .h-note:not(:first-child) { display: none; }

  .h-facts__card { padding: 6px; border-radius: 24px; }
  .h-facts__platforms { gap: 6px 16px; padding: 14px 14px 12px; font-size: 16px; }
  .h-facts__label { flex-basis: 100%; font-size: 13px; }
  .h-facts__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 18px; }
  .h-facts__nums > div { padding: 16px 14px; }
  .h-facts__nums dt { font-size: 20px; }
  .h-facts__nums dd { margin-top: 2px; font-size: 13px; }

  /* Шаги столбиком и без сцен: всё, что важно, — в подписи шага. */
  .h-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 24px;
  }

  .h-step { padding: 16px 16px 18px; border-radius: 20px; }
  .h-step__scene { display: none; }
  .h-step__copy { margin-top: 0; padding: 0; }
  .h-step__meta { font-size: 12px; }
  .h-step__title { font-size: 18px; }
  .h-step__text { font-size: 14px; }
  #how .h-actions { margin-top: 20px; }

  .h-bento { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 24px; }
  .h-tile--big,
  .h-tile--wide { grid-column: auto; grid-row: auto; }
  .h-tile { padding: 18px; border-radius: 24px; }
  .h-tile__title { font-size: 18px; }
  .h-tile__title--lg { font-size: 19px; }
  .h-tile__text { font-size: 14px; }
  .h-table { padding: 5px 12px; border-radius: 16px; }
  .h-table__row { grid-template-columns: 1.6fr 1fr .9fr; gap: 8px; margin: 0 -8px 3px; padding: 9px 8px; font-size: 14px; }
  .h-table__row--head { margin: 0; padding: 8px 0; font-size: 11px; }
  .h-table__row > :nth-child(2) { display: none; }
  .h-plugins { font-size: 13px; }

  .h-ranges { gap: 18px; padding: 22px 16px; border-radius: 28px; }
  .h-ranges__copy,
  .h-ranges__demo { flex-basis: 100%; }
  .h-bands { margin-top: 18px; }
  .h-bands__bar { font-size: 14px; }
  .h-bands__bar span { padding: 10px 0; }
  .h-bands__labels { font-size: 11px; }
  .h-seg { display: flex; }
  .h-seg button { flex: 1; padding: 0 10px; }
  .h-goods { gap: 12px; margin-top: 16px; }
  .h-good { padding: 10px; border-radius: 18px; }
  .h-good__pic { height: 62px; border-radius: 12px; }
  .h-good__pic svg { width: 46px; height: 46px; }
  .h-good__name { font-size: 13px; }
  .h-good__pct { padding: 2px 6px; font-size: 11px; }
  .h-good__price { font-size: 22px; }

  .h-price { margin-top: 24px; gap: 14px; }
  .h-price__main,
  .h-price__card { border-radius: 24px; }
  .h-price__sum { font-size: 64px; }
  .h-price__list { grid-template-columns: minmax(0, 1fr); font-size: 15px; }
  .h-price__mon { font-size: 30px; }
  .h-price .c-pbtn { width: 100%; }

  .h-video { margin-top: 24px; padding: 8px; border-radius: 26px; }
  .h-video .pim-video { border-radius: 20px; }

  .h-faq { margin-top: 24px; gap: 10px; }
  .h-faq__q { min-height: 58px; padding: 14px 16px; font-size: 16px; }
  .h-faq__a { padding: 0 16px 18px; font-size: 15px; }

  .h-final { padding: 50px 0 60px; }
  .h-final__card { border-radius: 28px; }
  .h-final__title { font-size: 40px; }
  .h-final__text { font-size: 16px; }
  .h-final .c-pbtn { width: 100%; }

  .h-sticky {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 10px;
    z-index: 25;
    display: block;
    transform: translateY(calc(100% + 24px));
    visibility: hidden;
    transition: transform .3s cubic-bezier(.2, .9, .3, 1), visibility 0s .3s;
  }

  .h-sticky[hidden] { display: none; }

  /* Уехавшая вниз полоса не должна ловить фокус с клавиатуры. */
  .h-sticky.is-on { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.2, .9, .3, 1); }

  .h-sticky__bar { display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 14px; border-radius: 18px; }
  .h-sticky__note { flex: none; max-width: 76px; color: var(--c-muted); font-size: 12px; font-weight: 500; line-height: 1.25; }
  .h-sticky .c-pbtn { flex: 1; min-height: 52px; font-size: 16px; }
}

@media (max-width: 380px) {
  .h-hero__title { font-size: 36px; }
  .h-h2 { font-size: 32px; }
  .h-final__title { font-size: 34px; }
  .h-price__sum { font-size: 54px; }
  .h-product { width: 150px; }
}