/* ── Шрифты: Cormorant Garamond + Manrope, локально в теме.
   Google CDN не используем: в РФ нестабилен, а CSP артефактов его режет. ── */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/tp/cormorant-500-cyr.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/tp/cormorant-500-lat.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/tp/cormorant-600-cyr.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/tp/cormorant-600-lat.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/tp/manrope-400-cyr.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/tp/manrope-400-lat.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/tp/manrope-500-cyr.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/tp/manrope-500-lat.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/tp/manrope-700-cyr.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/tp/manrope-700-lat.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/tp/manrope-300-cyr.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/tp/manrope-300-lat.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200;font-display:swap;src:url('fonts/tp/manrope-200-cyr.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200;font-display:swap;src:url('fonts/tp/manrope-200-lat.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ==========================================================================
   ТВОЙ ПУТЬ — шапка и первый экран
   Значения взяты из авторского globals.css (архив от дизайнера),
   а НЕ намерены по картинке. Классы с префиксом tp-, чтобы не пересечься
   со штатной темой Free. Брейкпоинты авторские: 374 / 600 / 980.
   ========================================================================== */

/* ── Токены ─────────────────────────────────────────────────────────────── */
html[data-tp-mode="light"] {
  --tp-bg:          #f3e8d9;   /* тёплый крем (как на 2-м экране) — общий для всей светлой темы */
  --tp-bg-deep:     #ecdfcb;
  --tp-surface:     #fffdf8;
  --tp-text:        #0b2340;
  --tp-text-2:      #173d62;
  --tp-muted:       #5f6f80;
  --tp-gold:        #c9a35b;
  --tp-gold-light:  #ddc99e;
  --tp-gold-bright: #bf862d;
  /* искры в кольцах: на кремовом фоне «почти белое» не видно, поэтому в светлой
     теме — светлое тёплое золото; в тёмной (ниже) — почти белое */
  --tp-spark:       #e6bf63;
  --tp-border:      rgba(184, 139, 57, .34);
  --tp-header-bg:   rgba(243, 232, 217, .9);
  --tp-btn-bg:      #0b2b4c;
  --tp-btn-text:    #f6d98c;
  --tp-hero-edge:   #f3e8d9;
  /* чередование фонов и инверсный блок «О методологии» (десктоп).
     invert-bg = цвет фона фото автора (#00092a), чтобы квадрат снимка сливался. */
  --tp-bg-alt:      #eee2ce;
  --tp-invert-bg:   #00092a;
  --tp-invert-text: #f2eee4;
  --tp-invert-muted:rgba(242,238,228,.72);
  color-scheme: light;
}

html[data-tp-mode="dark"] {
  --tp-bg:          #041326;
  --tp-bg-deep:     #06101f;
  --tp-surface:     #0a1b31;
  --tp-text:        #f5f0e5;
  --tp-text-2:      #e8dfce;
  --tp-muted:       #a9b8cc;
  --tp-gold:        #e9b95d;
  --tp-gold-light:  #ffd783;
  --tp-gold-bright: #ffc758;
  --tp-spark:       #fff6de;
  --tp-border:      rgba(233, 185, 93, .58);
  --tp-header-bg:   rgba(4, 19, 38, .88);
  --tp-btn-bg:      linear-gradient(135deg, #e9b95d, #ffd783);
  --tp-btn-text:    #071528;
  --tp-hero-edge:   #041326;
  /* чередование фонов и инверсный блок «О методологии» (десктоп).
     invert-bg = цвет фона фото автора (#00092a), чтобы квадрат снимка сливался. */
  --tp-bg-alt:      #071a2f;
  --tp-invert-bg:   #00092a;
  --tp-invert-text: #f3ecdd;
  --tp-invert-muted:rgba(243,236,221,.7);
  color-scheme: dark;
}

html { scroll-behavior: smooth; scroll-padding-top: 86px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* #themeOverride — id у <body> в теме Free. Без него правило темы
   body{background-color:#fff} перебивает наше по специфичности. */
html[data-tp-mode] body,
html[data-tp-mode] body#themeOverride {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Шапка теперь position:fixed — освобождаем под неё место сверху.
     В теме Free body сам является скролл-контейнером (height:100vh; overflow:auto),
     поэтому sticky в нём вёл себя ненадёжно; fixed + этот отступ работают всегда.
     scroll-padding-top — чтобы якорные переходы не заезжали под шапку. */
  padding-top: 84px;
  scroll-padding-top: 84px;
  /* Free-тема ставит body{min-width:320px} в site.css — на узких экранах
     (заказчик ~305px, зум) body распирает до 320 и даёт ГОРИЗОНТАЛЬНУЮ прокрутку
     на уровне <html> (у body overflow-x:hidden, но скролл живёт на html). Снимаем
     этот пол — контент адаптивный и спокойно сжимается уже. */
  min-width: 0;
  /* !important вынужденно: инлайновый <style> темы Free идёт после нашего CSS
     и ставит фон с !important. Без этого body остаётся белым. */
  background: var(--tp-bg) !important;
  color: var(--tp-text);
  /* ⚠️ НЕ анимировать background: `transition: background` на body ЗАМОРАЖИВАЕТ фон
     на старом значении при переключении темы (меняется только var --tp-bg, а
     transition, ссылающийся на custom-property, не триггерит перерисовку) → в тёмной
     теме body оставался КРЕМОВЫМ, прозрачная секция .tp-who показывала кремовую
     полосу за шапкой (бел. заголовок на светлом = не виден). Проверено: убрать
     background из transition → фон верно = навы/крем. Фон переключаем мгновенно. */
  transition: color .35s ease;
}

/* Узкие экраны (≤374): кнопка тарифа «Пройти подбор» с fit-content+min-width:132
   не влезала в колонку карточки и давала вылет ~6px. Тянем во всю ширину колонки. */
@media (max-width: 374px) {
  .tp-tier__btn { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
}

/* Звёздная пыль поверх фона — только в тёмной теме */
html[data-tp-mode] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,215,131,.55) 0 1px, transparent 1.3px),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.40) 0 1px, transparent 1.3px),
    radial-gradient(circle at 35% 75%, rgba(233,185,93,.40) 0 1px, transparent 1.3px);
  background-size: 190px 190px, 260px 260px, 330px 330px;
  transition: opacity .4s ease;
}
html[data-tp-mode="dark"] body::before { opacity: .16; }

/* ── Шапка ──────────────────────────────────────────────────────────────── */
.tp-hdr {
  box-sizing: border-box;
  /* fixed, а не sticky: в теме Free скролл-контейнер — сам body (height:100vh;
     overflow:auto), и sticky в нём срабатывал не всегда. fixed пиннит к вьюпорту
     железно; место под шапку освобождает padding-top у body. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 84px;          /* было 76: подняли под аватар 62px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  background: var(--tp-header-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  /* без transition на фон: со .35s шапка перетекала цветом, пока остальная
     страница переключала тему мгновенно — казалось, что шапка «подтормаживает».
     Теперь фон меняется сразу, синхронно со всем. */
}

.tp-brand {
  display: flex;
  align-items: center;
  color: var(--tp-text);
  text-decoration: none;
  /* Сжимаемся сами, вместо того чтобы выталкивать переключатель и бургер
     за экран, если шрифт отрисуется шире ожидаемого.
     ⚠ overflow здесь НЕ ставить: золотое кольцо аватарки рисуется
     box-shadow'ом снаружи её границы и подрезалось сверху и снизу.
     Обрезкой занимается .tp-brand__copy — этого достаточно. */
  flex: 0 1 auto;
  min-width: 0;
  gap: 10px;             /* раньше расстояние держала звёздочка */
}

.tp-brand__ava {
  width: 62px;           /* +20% к исходным 52 */
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  display: block;
  box-shadow: 0 0 0 1px var(--tp-gold), 0 0 14px rgba(233, 185, 93, .14);
}

.tp-brand__copy {
  display: flex;
  flex-direction: column;
  line-height: .96;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.tp-brand__copy strong,
.tp-brand__copy small {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  /* 600 — настоящее начертание шрифта, оно скачано в тему.
     Браузер не подделывает жирность синтетически. */
  font-weight: 600;
}

/* В CSS дизайнера логотип наследует var(--text) и в «Тени» выходит кремовым,
   но на макете он золотой. Идём за макетом. */
.tp-brand__copy strong { font-size: 26px; letter-spacing: .025em; }   /* +20% к 22 */
html[data-tp-mode="dark"]  .tp-brand__copy strong { color: var(--tp-gold-light); }
html[data-tp-mode="dark"]  .tp-brand__copy small  { color: var(--tp-gold); }
html[data-tp-mode="light"] .tp-brand__copy strong,
html[data-tp-mode="light"] .tp-brand__copy small  { color: var(--tp-text); }

.tp-brand__copy small {
  font-size: 20px;       /* было 18 */
  letter-spacing: .045em;
  margin-top: 5px;
}

.tp-hdr__actions {
  display: flex;
  align-items: center;
  gap: 18px;             /* было 8: отодвинули переключатель от бургера */
  flex: 0 0 auto;   /* эти два элемента ужимать нельзя */
}

/* ── Переключатель «Свет / Тень» ────────────────────────────────────────── */
.tp-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: transparent;
}

.tp-toggle button {
  position: relative;
  border: 0;
  background: transparent;
  padding: 9px 8px 11px;
  border-radius: 0;
  font-family: inherit;
  font-size: 14px;       /* +20% к 12 */
  line-height: 1;
  cursor: pointer;
  color: var(--tp-muted);
  transition: .25s ease;
}

/* разделитель между «Свет» и «Тень» убран (по просьбе владельца) */
.tp-toggle button + button::before { content: none; }

/* золотое подчёркивание активной темы */
.tp-toggle button::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 4px;
  height: 1px;
  background: var(--tp-gold-bright);
  transform: scaleX(0);
  transition: transform .25s ease;
  box-shadow: 0 0 7px var(--tp-gold);
}

.tp-toggle button[aria-pressed="true"] { color: var(--tp-gold-bright); }
.tp-toggle button[aria-pressed="true"]::after { transform: scaleX(1); }

/* ── Кнопка меню ────────────────────────────────────────────────────────── */
.tp-menu-btn {
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  display: grid;
  place-content: center;
  gap: 5px;
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
}

.tp-menu-btn:hover { background: color-mix(in srgb, var(--tp-gold) 10%, transparent); }

.tp-menu-btn span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--tp-text);
  border-radius: 4px;
  transition: .28s ease;
}

/* В «Тени» бургер золотой — в тон логотипу, а не белый */
html[data-tp-mode="dark"] .tp-menu-btn span { background: var(--tp-gold-light); }

.tp-menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tp-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tp-menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Горизонтальное меню в шапке — по умолчанию скрыто, включается на десктопе ── */
.tp-nav { display: none; }

/* ── Первый экран ───────────────────────────────────────────────────────── */
.tp-hero {
  display: block;          /* тема может навязать grid/flex — фиксируем явно */
  position: relative;      /* якорь для кнопки, наложенной на картинку */
  width: 100%;
  max-width: 853px;
  margin: 0 auto;
  padding: 0;
  flex: none;              /* body в теме Free — flex-контейнер */
  box-sizing: border-box;
}

.tp-hero__art {
  position: relative;
  display: block;
  width: 100%;
  min-height: 620px;
  overflow: hidden;
}

.tp-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* --tp-hero-y: доля картинки по вертикали. Меньше — картинка ниже (виден верх). */
  object-position: 53% var(--tp-hero-y, 50%);
  display: block;
}

.tp-hero__img--light { display: none; }
html[data-tp-mode="light"] .tp-hero__img--dark  { display: none; }
html[data-tp-mode="light"] .tp-hero__img--light { display: block; }
/* Широкие панорамы — только десктоп. На мобильном (база) прячем всегда,
   иначе они лягут поверх вертикальных картинок. Показ — в медиазапросе ≥980. */
.tp-hero__img--dark-wide,
.tp-hero__img--light-wide { display: none; }

/* В «Свете» картинка спущена ниже — открыт верх, фигуры и тропа сдвинуты вниз */
html[data-tp-mode="light"] .tp-hero__img { --tp-hero-y: 30%; }

/* мягкие края сверху и снизу — картинка растворяется в фоне страницы */
.tp-hero__art::before,
.tp-hero__art::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  height: 55px;
  pointer-events: none;
}
.tp-hero__art::before { top: 0;    background: linear-gradient(to bottom, var(--tp-hero-edge), transparent); }
.tp-hero__art::after  { bottom: 0; background: linear-gradient(to top,    var(--tp-hero-edge), transparent); }

/* в «Свете» нижнее растворение длиннее и мягче, чтобы низ был светлее */
html[data-tp-mode="light"] .tp-hero__art::after { height: 150px; }

/* Верхний край картинки уходит в кремовый АРКОЙ: купол от верхнего центра,
   как продолжение бежевой шапки. Ниже дуги — чистая картинка без наложений. */
html[data-tp-mode="light"] .tp-hero__art::before {
  /* --tp-arc-h: высота арки. Меньше — арка выше, текст ниже неё на чистой картинке. */
  height: var(--tp-arc-h, 80px);
  background: radial-gradient(150% 100% at 50% -35%,
              var(--tp-hero-edge) 0%,  var(--tp-hero-edge) 34%,
              rgba(246,240,230,.50) 60%, rgba(246,240,230,.14) 82%,
              transparent 100%);
}

html[data-tp-mode="light"] .tp-hero__art {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 88%, transparent 100%);
}


/* ── Первый экран: подложка и четыре пункта ────────────────────────────────
   Размеры из авторского globals.css (.hero-overlay / .hero-steps).            */

/* Сплошной подложки нет — картинки самодостаточны.
   Но в «Свете» верх картинки растворяется в кремовый фон и осветляет зону
   под первыми пунктами, где кремовый текст сливается. Поэтому возвращаем
   ТОЛЬКО верхнее затемнение и ТОЛЬКО в светлой теме. */
.tp-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: none;
}
/* Синего затемнения в «Свете» нет — заменено на кремовое ОСВЕТЛЕНИЕ дугой
   (см. ::before ниже). */
html[data-tp-mode="light"] .tp-hero__overlay { display: none; }

.tp-hero__steps {
  position: absolute;
  z-index: 3;
  list-style: none;
  padding: 0;
  margin: 0;
  left: 18px;
  top: 62px;              /* было 92: подняли блок выше */
  width: min(86%, 410px);
  /* кегль заголовка вынесен в переменную: по нему считается высота
     строки у цифры, чтобы цифра вставала по центру заголовка */
  --tp-step-title: 18px;   /* размер заголовков «Понять себя» */
  color: #f5f0e5;
  /* text-shadow убран по просьбе владельца 23.07 */
}

.tp-hero__steps li {
  position: relative;
  display: grid;
  grid-template-columns: 39px 1fr;   /* центр колонки = ось нити 19.5px */
  gap: 8px;
  min-height: 65px;
}

/* золотая нить между точками */
.tp-hero__steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 30px;                         /* от нижнего края точки текущего пункта */
  width: 1px;                        /* 1 физ. пиксель — тоньше не отрисуется */
  transform: scaleX(0.5);            /* визуально ~0.5px на плотных экранах */
  height: 35px;
  background: linear-gradient(var(--tp-gold-light), var(--tp-gold));
  /* без box-shadow: свечение 8px делало нить визуально толстой.
     На макете это тонкая линия без ореола. */
}

.tp-hero__steps li > span {
  color: #ffd783;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: calc(var(--tp-step-title) * 0.9);   /* на 10% меньше заголовка */
  font-weight: 200;                              /* самое тонкое начертание, скачано в тему */
  /* высота строки от заголовка — цифра по центру заголовка по вертикали */
  line-height: calc(var(--tp-step-title) * 1.18);
  /* цифра и точка центрируются по одной оси = оси нити (19.5px) */
  /* колонка цифры (grid: 48px). Сжимаем её до оси нити и центрируем в ней
     и цифру, и точку — обе встают на 19.5px, ровно на нить. */
  box-sizing: border-box;
  width: 39px;
  text-align: center;
}

/* точка под номером */
.tp-hero__steps li > span::after {
  content: "";
  display: block;
  width: 5px;                    /* по правке в DevTools от 23.07 */
  height: 5px;
  margin: 4px auto 0;
  border-radius: 50%;
  background: #ffe39e;
  box-shadow: 0 0 10px #ffffff;  /* белое свечение вместо золотого */
}

/* у пункта 04 точки нет — как в макете */
.tp-hero__steps li:last-child > span::after { display: none; }

.tp-hero__steps li > div { display: flex; flex-direction: column; }

.tp-hero__steps strong {
  font-size: var(--tp-step-title);
  line-height: 1.18;
  letter-spacing: -.03em;
  font-weight: 500;
}

.tp-hero__steps small {
  color: rgba(245,240,229,.85);
  font-size: 13px;
  margin-top: 3px;
}

/* Десктопная подача hero и новые секции — ТОЛЬКО десктоп.
   На мобильном hero — картинка с наложенными шагами; мобильную не трогаем. */
.tp-hero__pitch { display: none; }
.tp-path,
.tp-method,
.tp-final { display: none; }

/* ── Светлая тема: картинка яркая, тёмный текст, без затемняющей подложки ──
   В «Тени» подложка тёмная — под белый текст. В «Свете» она бы гасила
   картинку (жалоба владельца 23.07), поэтому здесь лёгкая кремовая:
   слегка проявляет тёмный текст слева и растворяет низ в фон страницы. */

/* Текст в «Свете» остаётся кремовым, как в «Тени»: он лежит над тёмными
   горами картинки. Меняется только фон СТРАНИЦЫ, но не текст на hero. */

/* ── Адаптив: авторские брейкпоинты ─────────────────────────────────────── */
@media (max-width: 374px) {
  .tp-hdr { padding-inline: 10px; }
  .tp-brand { gap: 8px; }
  .tp-brand__ava { width: clamp(42px, calc(100vw - 263px), 50px); height: clamp(42px, calc(100vw - 263px), 50px); }   /* fluid — см. капкан "адаптивная аватарка" ниже, было 58->38->56 фикс.px */
  .tp-brand__copy strong { font-size: 23px; }     /* +20% к 19 */
  .tp-brand__copy small  { font-size: 17.5px; }
  .tp-hdr__actions { gap: 11px; }
  .tp-toggle button { padding: 7px 5px; font-size: 13px; }
  .tp-hero__steps { left: 14px; width: 91%; top: 54px; }
  .tp-menu-btn { width: 38px; }
}

@media (min-width: 600px) {
  .tp-hdr { height: 108px; padding-inline: 28px; }
  .tp-brand__ava { width: clamp(78px, 10vw, 90px); height: clamp(78px, 10vw, 90px); }
  .tp-brand__copy strong { font-size: 30px; }
  .tp-brand__copy small  { font-size: 21px; }
  .tp-toggle button { font-size: 16px; padding-inline: 12px; }
  /* аватарка увеличена (владелец, 2026-08-19) — шапка стала выше (92->108),
     держим отступ контента и якорей в паре с ней. Мобильный header (84px,
     <600px) не трогаем — там места по горизонтали мало, см. капкан ниже. */
  html[data-tp-mode] body,
  html[data-tp-mode] body#themeOverride { padding-top: 108px; scroll-padding-top: 108px; }

  .tp-hero { padding-inline: 28px; }
  .tp-hero__art { margin-inline: 0; min-height: 940px; }
  .tp-hero__img { object-position: center center; }
  .tp-hero__steps { left: 7%; top: 120px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ДЕСКТОП (≥980). Мобильный/планшет выше не меняем.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Подвал ─────────────────────────────────────────────────────────────── */
.tp-footer {
  padding: 28px 16px 36px;
  border-top: 1px solid var(--tp-border);
  background: var(--tp-bg);
  text-align: center;
  font-size: 14px;
  color: var(--tp-muted);
}
.tp-footer .tp-wrap { max-width: 853px; margin: 0 auto; }
/* .tp-footer .tp-footer__links, а не просто .tp-footer__links: иначе более
   специфичное .tp-footer p { margin:0 } ниже перебивает отступ и строки слипаются. */
.tp-footer .tp-footer__links { display: flex; justify-content: center; gap: 22px; margin: 0 0 24px; }
.tp-footer__links a { color: var(--tp-gold); text-decoration: none; }
.tp-footer__links a:hover { text-decoration: underline; }
.tp-footer p { margin: 0; }

/* Горизонтальную прокрутку не маскируем: overflow-x:clip прячет причину
   и не поддерживается старыми браузерами. Вместо этого элементы выше
   устроены так, чтобы не вылезать за экран в принципе. */


/* ══════════════════════════════════════════════════════════════════════════
   Выдвижное меню (значения из авторского globals.css: .menu-drawer/.backdrop)
   ══════════════════════════════════════════════════════════════════════════ */
.tp-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgba(2, 9, 20, .66);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.tp-menu-backdrop.is-visible { opacity: 1; pointer-events: auto; }

.tp-menu {
  position: fixed;
  z-index: 60;
  top: 0;
  right: 0;
  width: min(88vw, 420px);
  /* ⚠️ svh, НЕ dvh (2026-08-29). Панель ВСЕГДА в разметке — закрытая она просто
     уехала за край через transform, оставаясь фиксированным слоем. С высотой в
     dvh она пересчитывалась на КАЖДОЕ движение адресной строки браузера, то есть
     прямо во время прокрутки страницы, и тянула за собой пересчёт раскладки.
     svh статичен. Первый экран (.tp-cons) на svh перевели раньше — тот же капкан. */
  height: 100vh;
  height: 100svh;
  padding: 12px 24px calc(26px + env(safe-area-inset-bottom));
  background: var(--tp-surface);
  box-shadow: -18px 0 60px rgba(0, 0, 0, .26);
  transform: translateX(102%);
  transition: transform .38s cubic-bezier(.22, 1, .36, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.tp-menu.is-open { transform: translateX(0); }

.tp-menu__nav { display: flex; flex-direction: column; }

.tp-menu__link {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  padding: 14px 3px;
  border-bottom: 1px solid color-mix(in srgb, var(--tp-border) 50%, transparent);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 23px;
  font-weight: 500;
  color: var(--tp-text);
  text-decoration: none;
  transition: color .2s ease, padding-left .2s ease;
}
.tp-menu__link:hover,
.tp-menu__link:focus-visible { color: var(--tp-gold-bright); padding-left: 9px; }

.tp-menu__link span {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--tp-gold);
  font-variant-numeric: tabular-nums;
}

.tp-menu__foot {
  margin-top: auto;
  padding-top: 22px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tp-muted);
}

/* крестик закрытия меню */
.tp-menu__top {
  display: flex;
  justify-content: flex-end;
  margin: -2px -6px 2px 0;
}
.tp-menu__close {
  position: relative;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  flex: 0 0 auto;
}
.tp-menu__close:hover { background: color-mix(in srgb, var(--tp-gold) 12%, transparent); }
.tp-menu__close span {
  position: absolute;
  left: 50%; top: 50%;
  width: 22px; height: 2px;
  background: var(--tp-gold);
  border-radius: 2px;
}
.tp-menu__close span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.tp-menu__close span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }


/* ══════════════════════════════════════════════════════════════════════════
   Кнопки (значения из авторского globals.css: .primary-cta / .hero-cta)
   Тёмная — золотая с тёмным текстом; светлая — чернильно-синяя с золотым.
   ══════════════════════════════════════════════════════════════════════════ */
.tp-cta {
  box-sizing: border-box;   /* иначе padding раздувает ширину и даёт прокрутку */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 56px;
  padding: 12px 22px;
  border: 1px solid color-mix(in srgb, var(--tp-gold-light) 70%, transparent);
  border-radius: 12px;
  background: var(--tp-btn-bg);
  color: var(--tp-btn-text);
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 16px 42px rgba(60,42,18,.10);
  transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
}
/* В тёмной теме убираем яркий золотой ободок и свечение: на золотом фоне
   они создавали видимость «толстой» кнопки. Должна читаться как в светлой. */
html[data-tp-mode="dark"] .tp-cta {
  border-color: transparent;
  box-shadow: 0 18px 46px rgba(0,0,0,.28);
}

.tp-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 18px 40px rgba(0,0,0,.18), 0 0 24px rgba(233,185,93,.18);
}
.tp-cta:active { transform: translateY(1px) scale(.99); }
.tp-cta__star { color: currentColor; font-size: 21px; line-height: 1; }

/* Кнопка первого экрана — во всю ширину, чуть заходит на низ картинки */
.tp-cta--hero {
  position: absolute;
  left: 16px;
  right: 16px;
  /* --tp-cta-bottom: высота кнопки над низом картинки. Больше — кнопка выше (ближе к фигурам). */
  bottom: var(--tp-cta-bottom, 120px);
  width: auto;
  margin: 0;
  min-height: 54px;         /* тоньше по вертикали (обе темы) */
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 19px;
  z-index: 4;
}


/* ══════════════════════════════════════════════════════════════════════════
   Секции главной + блок «Что для вас важно сейчас?» (направления)
   Значения из авторского globals.css (.section / .direction-card / .quiz-card)
   ══════════════════════════════════════════════════════════════════════════ */
.tp-section {
  max-width: 760px;
  margin: 0 auto;
  /* отступы между блоками держим компактными — правило проекта */
  padding: 26px 20px;
  box-sizing: border-box;
}
/* первый блок после первого экрана подтянут вверх и получает СПЛОШНОЙ фон,
   чтобы перекрыть уходящий в кремовый низ картинки — иначе kicker налезал
   на полупрозрачную картинку и не читался. */
.tp-hero + .tp-section {
  margin-top: -70px;
  padding-top: 34px;
  position: relative;
  z-index: 3;
  background: var(--tp-bg);
  border-radius: 22px 22px 0 0;
}

.tp-sec-head { text-align: center; margin: 0 auto 18px; max-width: 560px; }
.tp-kicker {
  color: var(--tp-gold-bright);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.tp-kicker::after {
  content: "✦";
  display: block;
  margin-top: 8px;
  font-size: 12px;
  text-shadow: 0 0 12px var(--tp-gold);
}
.tp-sec-title {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 9vw, 52px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0;
  color: var(--tp-text);
}
.tp-sec-sub {
  color: var(--tp-muted);
  margin: 14px auto 0;
  max-width: 460px;
  font-size: 13px;
  line-height: 1.55;
}

/* ── Сетка карточек ── */
.tp-dir-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.tp-dir {
  position: relative;
  /* Free-тема задаёт всем <button> height:230px и line-height:35px —
     перебиваем это для карточек (специфичность класса выше button). */
  height: auto;
  min-height: 150px;
  line-height: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* прижимаем к верху: иконка у всех карточек на одной высоте,
     кольца выравниваются в ряду независимо от длины текста */
  justify-content: flex-start;
  gap: 2px;
  padding: 14px 10px 14px;
  text-align: center;
  border: 1px solid var(--tp-border);
  border-radius: 24px;
  background: var(--tp-surface);
  color: var(--tp-text);
  cursor: pointer;
  overflow: hidden;
  transition: transform .24s ease, border-color .25s ease, background .3s ease, box-shadow .3s ease;
}
.tp-dir:hover { transform: translateY(-3px); border-color: var(--tp-gold); }
.tp-dir[aria-pressed="true"] {
  border-color: var(--tp-gold-bright);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tp-gold) 22%, transparent), 0 0 26px rgba(233,185,93,.14);
}
.tp-dir__ico {
  width: 128px;
  height: 128px;
  margin-bottom: 2px;
  color: var(--tp-gold);
  overflow: visible;
}
.tp-dir:hover .tp-dir__ico,
.tp-dir[aria-pressed="true"] .tp-dir__ico { color: var(--tp-gold-bright); }
.tp-dir strong {
  max-width: 100%;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(20px, 5.6vw, 27px);
  font-weight: 600;
  line-height: 1.08;
  text-wrap: balance;
}
.tp-dir small {
  max-width: 100%;
  color: var(--tp-muted);
  font-size: 12px;
  line-height: 1.35;
  margin-top: 8px;
  text-wrap: balance;
}
.tp-dir__mark {
  position: absolute;
  inset: auto 0 0;
  background: var(--tp-gold);
  color: #071528;
  font-size: 10px;
  padding: 4px;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: translateY(100%);
  transition: transform .25s ease;
}
.tp-dir[aria-pressed="true"] .tp-dir__mark { transform: translateY(0); }

/* ── Карточка «Не знаете, с чего начать?» ── */
.tp-quiz {
  margin-top: 14px;
  display: grid;
  /* звезда уже — тексту больше ширины, чтобы заголовок лёг в одну строку */
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 10px;
  padding: 20px 14px;
  border: 1px solid var(--tp-border);
  border-radius: 26px;
  background: var(--tp-surface);
  box-shadow: var(--tp-shadow, 0 10px 30px rgba(60,42,18,.06));
}
.tp-quiz__star {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--tp-border);
  border-radius: 50%;
  color: var(--tp-gold);
  line-height: 1;
}
/* Все круглые иконки блоков рисуются одинаково — одно правило на всех */
.tp-quiz__star svg,
.tp-tier__ico svg,
.tp-step__ico svg,
.tp-step__spark svg,
.tp-result__ico svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* восьмиконечная звезда в кнопке */
.tp-cta__star svg { width: 1em; height: 1em; display: block; }
.tp-cta__star .tp-glowstar { width: 1.7em; height: 1.7em; display: block; margin: -0.35em 0; }
.tp-quiz__body { min-width: 0; }
.tp-quiz__body h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  /* по макету — строго в одну строку, кегль подстраивается под ширину экрана */
  font-size: clamp(16px, 5vw, 27px);
  white-space: nowrap;
  font-weight: 600;
  line-height: 1.05;
  margin: 0;
  color: var(--tp-text);
}
.tp-quiz__body p { color: var(--tp-muted); margin: 6px 0 0; font-size: 12px; line-height: 1.42; }
.tp-quiz__btn {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 50px;
  font-size: 16px;
}

/* Cormorant по умолчанию рисует старостильные цифры (ростом со строчную):
   «ТВОЙ ПУТЬ 1.0» читалось как «1.о». Включаем маюскульные, как на макете. */
.tp-sec-title,
.tp-tier__title,
.tp-quiz__body h3,
.tp-dir strong,
.tp-step__num,
.tp-step__body h3,
.tp-result__title,
.tp-brand__copy strong {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* ── Появление блоков при прокрутке ──────────────────────────────────────
   Классы навешивает JS. Если он не отработал (или отключён) — ничего не
   прячется, страница остаётся полностью читаемой.
   После проигрывания JS снимает классы, иначе animation-fill-mode держал бы
   transform и ломал бы hover-подъём карточек. */
@media (prefers-reduced-motion: no-preference) {
  .tp-reveal { opacity: 0; }
  .tp-reveal--in { animation: tpReveal .55s cubic-bezier(.22, .7, .25, 1) both; }
}
@keyframes tpReveal {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ── Блок «Выберите глубину разбора» — три уровня продукта ── */
.tp-tiers { display: grid; gap: 14px; }
.tp-tier {
  display: grid;
  grid-template-columns: 116px 1fr;
  align-items: center;
  gap: 10px;
  padding: 16px 10px;
  border: 1px solid var(--tp-border);
  border-radius: 24px;
  background: var(--tp-surface);
}
.tp-tier__ico { width: 116px; height: 116px; color: var(--tp-gold); }
.tp-tier__body { min-width: 0; }
.tp-tier__label {
  margin: 0 0 8px;
  color: var(--tp-gold-bright);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  line-height: 1.3;
}
/* Заголовок карточки — один стиль на блок продуктов и блок шагов.
   360px → 21px: столько влезает в строку рядом с крупной иконкой. */
.tp-tier__title,
.tp-step__body h3 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(18px, 5.85vw, 30px);
  font-weight: 600;
  line-height: 1.05;
  color: var(--tp-text);
}
/* в карточке продукта заголовок по макету строго в одну строку, в шаге — переносится */
.tp-tier__title { white-space: nowrap; }
.tp-step__body h3 { text-wrap: balance; }
.tp-tier__desc { margin: 4px 0 0; color: var(--tp-muted); font-size: 12px; line-height: 1.4; }
.tp-tier__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.tp-tier__list li {
  position: relative;
  padding-left: 20px;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--tp-text-2);
}
/* золотая искра-маркер: маска, чтобы цвет шёл от темы */
.tp-tier__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 13px;
  height: 13px;
  transform: translateY(-50%);
  background: var(--tp-gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 Q13.2 10.8 24 12 Q13.2 13.2 12 24 Q10.8 13.2 0 12 Q10.8 10.8 12 0 Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 Q13.2 10.8 24 12 Q13.2 13.2 12 24 Q10.8 13.2 0 12 Q10.8 10.8 12 0 Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.tp-tier__btn { margin-top: 14px; width: fit-content; min-width: 132px; min-height: 42px; padding: 9px 18px; font-size: 14px; }
/* ссылка «Смотреть все продукты» — контурная, во всю ширину */
.tp-tiers__all {
  margin-top: 14px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 12px 18px;
  border: 1px solid var(--tp-border);
  border-radius: 12px;
  background: transparent;
  color: var(--tp-gold);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .25s ease, color .25s ease;
}
.tp-tiers__all:hover { border-color: var(--tp-gold); color: var(--tp-gold-bright); }

/* ── Блок «Как всё происходит» — маршрут из трёх шагов ── */
.tp-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.tp-step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: start;
  gap: 10px;
}
/* Золотая нить маршрута. Рисуется отрезками у каждого шага, а не одной линией
   на всю колонку: только так она может гаснуть у каждой искры — положение искр
   зависит от высоты карточек и общему градиенту неизвестно.
   21.5, а не 22: линия шириной 1px, её центр обязан совпасть с центром кружка
   (22px = половина колонки 44px), иначе нить пройдёт мимо искры. */
.tp-step::after {
  content: "";
  position: absolute;
  left: 21.5px;
  top: 44px;          /* низ кружка */
  bottom: -10px;      /* центр искры = середина промежутка между шагами */
  width: 1px;
  /* растворение фиксированной длины: не зависит от высоты карточки */
  background: linear-gradient(to bottom, var(--tp-gold), var(--tp-gold) calc(100% - 30px), transparent);
}
/* последний шаг: нить уходит в итоговую карточку и там же гаснет */
.tp-step:last-child::after { bottom: -18px; }
/* короткий отрезок над кружком — нить проявляется из искры */
.tp-step:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 21.5px;
  top: -10px;
  height: 10px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--tp-gold));
}

/* Искра на нити в промежутке между шагами (top = −половина gap).
   Именно <svg>, а не глиф ✦: у шрифтового знака чернила смещены внутри
   строки, и по центру нити он не встаёт — сколько ни правь left. */
.tp-step__spark {
  position: absolute;
  left: 22px;
  top: -10px;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  color: var(--tp-gold);
  pointer-events: none;
}
.tp-step__num {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--tp-gold);
  border-radius: 50%;
  /* именно фон страницы, а не surface: кружок должен прятать нить под собой */
  background: var(--tp-bg);
  color: var(--tp-gold-bright);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1;
}
html[data-tp-mode="dark"] .tp-step__num { box-shadow: 0 0 18px rgba(233,185,93,.16); }

.tp-step__card {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--tp-border);
  border-radius: 22px;
  background: var(--tp-surface);
}
.tp-step__ico { width: 80px; height: 80px; color: var(--tp-gold); }
.tp-step__body { min-width: 0; }
.tp-step__body p { margin: 6px 0 0; color: var(--tp-muted); font-size: 11.5px; line-height: 1.4; }

/* ── Итог блока: «В результате вы получите» ── */
.tp-result {
  margin-top: 18px;
  padding: 16px 14px 18px;
  border: 1px solid var(--tp-border);
  border-radius: 26px;
  background: var(--tp-surface);
  text-align: center;
}
.tp-result__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(21px, 6.6vw, 34px);
  font-weight: 600;
  line-height: 1.06;
  color: var(--tp-text);
}
/* Светлая тема: радиальное свечение под звёздами иконок на кремовом фоне
   читается как грязная тень — убираем его у всех «выделенных» иконок.
   (Тёмной темы не касается — там свечение уместно.) */
html[data-tp-mode="light"] .tp-result__ico circle[fill^="url("],
html[data-tp-mode="light"] .tp-quiz__star circle[fill^="url("],
html[data-tp-mode="light"] .tp-step__spark circle[fill^="url("] { display: none; }

.tp-result__grid {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tp-result__grid li { display: grid; justify-items: center; gap: 6px; padding: 0 1px; }
.tp-result__grid li + li { border-left: 1px solid color-mix(in srgb, var(--tp-gold) 26%, transparent); }
.tp-result__grid span { color: var(--tp-text-2); font-size: 12.5px; line-height: 1.2; }
/* иконки во всю ширину колонки (минус зазор до разделителей) */
.tp-result__ico { width: 84px; height: 84px; color: var(--tp-gold); }
/* разделитель: две линии и искра между ними */
.tp-result__sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  color: var(--tp-gold);
  font-size: 11px;
  line-height: 1;
}
.tp-result__sep::before,
.tp-result__sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--tp-gold) 26%, transparent);
}
.tp-result__note {
  margin: 12px auto 0;
  max-width: 270px;
  color: var(--tp-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.tp-result__btn { margin-top: 14px; width: 100%; min-height: 52px; font-size: 16px; }

@media (min-width: 600px) {
  .tp-section { padding: 40px 28px; }
  .tp-tier { grid-template-columns: 152px 1fr; gap: 18px; padding: 22px 20px; }
  .tp-tier__ico { width: 152px; height: 152px; }
  .tp-dir-grid { gap: 18px; }
  .tp-dir { min-height: 200px; }
  .tp-quiz { grid-template-columns: 110px 1fr; padding: 28px; }
  .tp-quiz__btn { grid-column: 2; width: fit-content; min-width: 250px; }

  .tp-steps { gap: 24px; }
  .tp-step::after { left: 27.5px; top: 56px; bottom: -12px; }
  .tp-step:not(:first-child)::before { left: 27.5px; top: -12px; height: 12px; }
  .tp-step { grid-template-columns: 56px 1fr; gap: 16px; }
  .tp-step__spark { left: 28px; top: -12px; width: 32px; height: 32px; }
  .tp-step__num { width: 56px; height: 56px; font-size: 26px; }
  .tp-step__card { grid-template-columns: 104px 1fr; gap: 16px; padding: 18px 20px; }
  .tp-step__ico { width: 104px; height: 104px; }
  .tp-step__body p { font-size: 13px; margin-top: 8px; }
  .tp-result { padding: 24px; }
  .tp-result__ico { width: 120px; height: 120px; }
  .tp-result__grid span { font-size: 14px; }
  .tp-result__note { max-width: 340px; font-size: 13.5px; }
  .tp-result__btn { width: fit-content; min-width: 260px; }
}

/* ═══ ДЕСКТОП (≥980) — в конце файла, чтобы перебивать базовые правила ═══ */
@media (min-width: 980px) {
  /* ── Шапка: горизонтальное меню вместо бургера ── */
  .tp-hdr { justify-content: flex-start; gap: clamp(18px, 3vw, 44px); padding-inline: clamp(28px, 5vw, 64px); }
  .tp-nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 32px);
  }
  .tp-nav a {
    position: relative;
    color: var(--tp-text);
    text-decoration: none;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 15px;
    letter-spacing: .01em;
    white-space: nowrap;
    padding: 6px 0;
    transition: color .2s ease;
  }
  .tp-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: var(--tp-gold-bright);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
  }
  .tp-nav a:hover { color: var(--tp-gold-bright); }
  .tp-nav a:hover::after { transform: scaleX(1); }
  .tp-hdr__actions { margin-left: auto; }
  .tp-menu-btn { display: none; }

  /* ── Ширина контента ── */
  .tp-section { max-width: 1120px; padding: 58px 40px; }
  .tp-sec-head { max-width: 720px; }
  .tp-hero + .tp-section { margin-top: 0; border-radius: 0; padding-top: 58px; }

  /* ── Первый экран: две колонки (текст слева, картинка справа) ── */
  .tp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    align-items: center;
    gap: 56px;
    max-width: 1120px;
    padding: 12px 40px 24px;   /* подняли первый экран выше (было 44 сверху) */
  }
  /* grid-row:1 обязателен: art идёт в DOM первым с колонкой 2, а lead вторым
     с колонкой 1 — без явной строки авто-раскладка кидает lead во вторую строку. */
  .tp-hero__lead { grid-column: 1; grid-row: 1; }
  .tp-hero__art {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    /* картинки очень высокие (853×1844). Контейнер 3:4 и меньше — не громоздкий;
       object-position смещён к верху, чтобы звезда попадала целиком, а не срезалась. */
    aspect-ratio: 3 / 4;
    border-radius: 0;
  }
  .tp-hero__art::before,
  .tp-hero__art::after { display: none; }
  /* Размытые (растворяющиеся) края со всех сторон — картинка втекает в фон.
     Две линейные маски (по X и по Y) пересекаются => мягкая рамка по периметру.
     Селектор html[data-tp-mode] той же специфичности, что и правило маски у light,
     но ниже по коду — поэтому перебивает его в обеих темах. */
  html[data-tp-mode] .tp-hero__art {
    -webkit-mask-image:
      linear-gradient(to right,  transparent 0, #000 9%, #000 91%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image:
      linear-gradient(to right,  transparent 0, #000 9%, #000 91%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
  .tp-hero__img { object-position: center 20%; }

  .tp-hero__kicker {
    display: block;
    margin: 0 0 14px;
    color: var(--tp-gold-bright);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
  }
  .tp-hero__title {
    display: block;
    margin: 0 0 26px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(38px, 4vw, 58px);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -.02em;
    font-variant-numeric: lining-nums;
    color: var(--tp-text);
  }
  /* шаги: из наложения на картинку — в обычную колонку слева */
  .tp-hero__steps {
    position: static;
    left: auto; top: auto;
    width: auto;
    --tp-step-title: 22px;
    color: var(--tp-text);
  }
  .tp-hero__steps li {
    min-height: 0;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding-bottom: 22px;
  }
  .tp-hero__steps li:not(:last-child)::after { left: 21.5px; top: 30px; height: calc(100% - 30px); }
  .tp-hero__steps li > span { width: 44px; color: var(--tp-gold-bright); }
  .tp-hero__steps li > span::after { background: var(--tp-gold); box-shadow: 0 0 8px var(--tp-gold); }
  .tp-hero__steps strong { font-size: var(--tp-step-title); color: var(--tp-text); }
  .tp-hero__steps small { font-size: 14px; color: var(--tp-muted); }
  .tp-cta--hero {
    position: static;
    left: auto; right: auto; bottom: auto;
    width: fit-content;
    margin: 30px 0 0;
    min-height: 58px;
    padding-inline: 34px;
    font-size: 18px;
  }

  /* ── Направления: фон-полоса во всю ширину, контент по центру, компактно ── */
  #napravleniya { max-width: none; padding: 30px 40px 34px; }
  #napravleniya .tp-sec-head,
  #napravleniya .tp-dir-grid,
  #napravleniya .tp-quiz { max-width: 940px; margin-inline: auto; }
  #napravleniya .tp-sec-head { margin-bottom: 18px; }
  #napravleniya .tp-dir-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  #napravleniya .tp-dir { min-height: 0; padding: 12px 12px; border-radius: 18px; }
  #napravleniya .tp-dir__ico { width: 56px; height: 56px; }
  #napravleniya .tp-dir strong { font-size: 20px; }
  #napravleniya .tp-dir small { margin-top: 3px; }
  /* квиз: звезда | текст | кнопка — всё по центру по вертикали (кнопка справа) */
  #napravleniya .tp-quiz {
    grid-template-columns: 64px 1fr auto; align-items: center;
    gap: 6px 22px; padding: 14px 22px; margin-top: 14px;
  }
  #napravleniya .tp-quiz__btn {
    grid-column: auto; align-self: center;
    width: auto; margin: 0; white-space: nowrap;
  }

  /* ── Продукты: три карточки в ряд, вертикальные ── */
  .tp-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
  .tp-tier {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 4px;
    padding: 28px 22px 24px;
  }
  .tp-tier__ico { width: 132px; height: 132px; }
  .tp-tier__title { white-space: normal; }
  /* описание под карточкой — в одну строку (по просьбе владельца) */
  .tp-tier__desc { max-width: none; white-space: nowrap; }
  .tp-tier__list { justify-items: start; text-align: left; width: fit-content; margin-inline: auto; }
  .tp-tier__btn { margin: 16px auto 0; }
  .tp-tiers__all { max-width: 440px; margin-inline: auto; }

  /* ── Как всё происходит + Результат: держим по центру, не растягиваем ── */
  #kak-rabotaet .tp-steps,
  #kak-rabotaet .tp-result { max-width: 760px; margin-inline: auto; }
  /* текст в блоке результата — в одну строку (снимаем перенос <br> и лимит ширины) */
  .tp-result__note { max-width: none; }
  .tp-result__note br { display: none; }

  /* ══ HERO: ведём смыслом. Скрываем шаги/мобильную кнопку, показываем подачу ══ */
  .tp-hero__steps { display: none; }
  .tp-cta--hero { display: none; }
  .tp-hero__pitch { display: block; }
  .tp-hero__eyebrow {
    margin: 0 0 18px;
    color: var(--tp-gold-bright);
    font-size: 13px; font-weight: 500;
    letter-spacing: .22em; text-transform: uppercase;
  }
  .tp-hero__h1 {
    margin: 0 0 22px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(44px, 5vw, 70px);
    font-weight: 600; line-height: 1.02; letter-spacing: -.02em;
    font-variant-numeric: lining-nums;
    color: var(--tp-text);
    text-wrap: balance;
  }
  .tp-hero__sub {
    margin: 0 0 28px;
    max-width: 44ch;
    color: var(--tp-muted);
    font-size: 18px; line-height: 1.6;
  }
  .tp-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 18px; }
  .tp-hero__actions .tp-cta { min-height: 56px; padding-inline: 28px; font-size: 16px; }
  .tp-hero__trust { margin: 0; color: var(--tp-muted); font-size: 13px; letter-spacing: .03em; }
  /* картинка чуть крупнее — рядом с крупным H1 не теряется */
  .tp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: center; }

  /* вторичная (контурная) кнопка */
  .tp-cta.tp-cta--ghost {
    background: transparent;
    color: var(--tp-text);
    border: 1px solid var(--tp-border);
    box-shadow: none;
  }
  .tp-cta.tp-cta--ghost:hover { border-color: var(--tp-gold); color: var(--tp-gold-bright); filter: none; }

  /* ══ «Четыре шага вашего пути» — 4 колонки, линия сверху убывающей насыщенности ══ */
  .tp-path { display: block; }
  .tp-path .tp-sec-head { max-width: 720px; }
  .tp-path__grid {
    list-style: none; margin: 8px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
  }
  .tp-path__grid li { padding-top: 18px; border-top: 2px solid var(--tp-gold); }
  .tp-path__grid li:nth-child(1) { border-top-color: color-mix(in srgb, var(--tp-gold) 90%, transparent); }
  .tp-path__grid li:nth-child(2) { border-top-color: color-mix(in srgb, var(--tp-gold) 62%, transparent); }
  .tp-path__grid li:nth-child(3) { border-top-color: color-mix(in srgb, var(--tp-gold) 42%, transparent); }
  .tp-path__grid li:nth-child(4) { border-top-color: color-mix(in srgb, var(--tp-gold) 26%, transparent); }
  .tp-path__num {
    display: block; margin: 0 0 6px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 34px; font-weight: 600; line-height: 1;
    font-variant-numeric: lining-nums;
    color: var(--tp-gold-bright);
  }
  .tp-path__grid h3 {
    margin: 0 0 8px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 24px; font-weight: 600; color: var(--tp-text);
  }
  .tp-path__grid p { margin: 0; color: var(--tp-muted); font-size: 14.5px; line-height: 1.55; }

  /* ══ О методологии — инверсный блок во всю ширину ══ */
  .tp-method {
    display: block;
    background: var(--tp-invert-bg);
    color: var(--tp-invert-text);
    padding: 76px 40px;
    margin-top: 10px;
  }
  .tp-method__inner {
    max-width: 1120px; margin: 0 auto;
    display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: center;
  }
  .tp-method__portrait { margin: 0; }
  /* Картинка уже со своей рамкой (кольцо + звезда) — НЕ добавляем свой круг/кольцо,
     иначе дублируется и обрезается звезда. Показываем как есть. */
  .tp-method__portrait img {
    width: 100%; max-width: 300px; height: auto; display: block;
    /* фон блока = фон фото (#00092a), скругление убрано — край снимка растворяется */
    border-radius: 0;
  }
  .tp-method .tp-kicker { color: var(--tp-gold-bright); text-align: left; }
  .tp-method .tp-kicker::after { display: none; }
  .tp-method .tp-sec-title {
    color: var(--tp-invert-text); text-align: left;
    font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; max-width: 18ch;
  }
  .tp-method__lead { margin: 16px 0 30px; max-width: 60ch; color: var(--tp-invert-muted); font-size: 17px; line-height: 1.65; }
  .tp-method__principles {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  }
  .tp-method__principles li { padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--tp-gold) 55%, transparent); }
  .tp-method__principles h3 {
    margin: 0 0 6px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 22px; font-weight: 600; color: var(--tp-invert-text);
  }
  .tp-method__principles p { margin: 0; color: var(--tp-invert-muted); font-size: 14px; line-height: 1.5; }

  /* ══ Финальный CTA ══ */
  .tp-final { display: block; padding: 56px 40px 72px; }
  .tp-final__inner {
    max-width: 1120px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 48px;
  }
  .tp-final .tp-sec-title { margin: 0; text-align: left; font-size: clamp(28px, 3.2vw, 42px); }
  .tp-final__text p { margin: 12px 0 0; max-width: 52ch; color: var(--tp-muted); font-size: 16px; line-height: 1.55; }
  .tp-final__btn { flex: 0 0 auto; min-height: 60px; padding-inline: 36px; font-size: 18px; }
  html[data-tp-mode="dark"] .tp-final__btn { box-shadow: 0 0 44px rgba(233, 185, 93, .22); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ДЕСКТОПНЫЙ ПЕРВЫЙ ЭКРАН — точное воспроизведение прототипа Claude Design
   (handoff «Твой путь. Десктоп», 2026-07-29). Значения 1-в-1 из хендоффа.
   Меню НЕ трогаем. Мобильную версию (<980) не затрагивает.
   Токены прототипа вынесены в --pp-* и используются только здесь.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 980px) {

  html[data-tp-mode="light"] {
    --pp-band:#F8F2E5; --pp-sect:#FCF9F2;
    --pp-ink:#2A241C; --pp-ink2:#6B6154; --pp-ink3:#8C8375;
    --pp-gold:#C0902F; --pp-gold-hi:#E0B45D; --pp-gold-num:#D8B26A;
    --pp-icon-ink:#8F6821;              /* цифры блока «4 шага» — тёмное золото */
    --pp-emblem-ink:#8F6821;            /* эмблема шага 4 — как затемнённые иконки на свете */
    --pp-rule:rgba(192,144,47,.28); --pp-rule-soft:rgba(192,144,47,.16);
    --pp-ring:rgba(192,144,47,.35); --pp-ring2:rgba(192,144,47,.22);
    --pp-btn-grad:linear-gradient(180deg,#F0CE7B 0%,#DBAE4C 55%,#CFA03B 100%);
    --pp-btn-ink:#4A3712; --pp-btn-sh:0 8px 22px rgba(190,145,50,.28);
  }
  html[data-tp-mode="dark"] {
    --pp-band:#08182A; --pp-sect:#06121F;
    --pp-ink:#F6F1E6; --pp-ink2:#AFB9C6; --pp-ink3:#8A95A4;
    --pp-gold:#E2AB4E; --pp-gold-hi:#F5D68C; --pp-gold-num:#D9A445;
    --pp-icon-ink:#C69A45;              /* цифры — тот же тон, что у иконок шагов 1–3 */
    --pp-emblem-ink:#E7CD8E;            /* эмблема шага 4 — светлее, чтобы совпасть по яркости с иконками */
    --pp-rule:rgba(226,171,78,.30); --pp-rule-soft:rgba(226,171,78,.16);
    --pp-ring:rgba(226,171,78,.40); --pp-ring2:rgba(226,171,78,.24);
    --pp-btn-grad:linear-gradient(180deg,#F3D07A 0%,#DCA939 60%,#C6912A 100%);
    --pp-btn-ink:#3B2A08; --pp-btn-sh:0 10px 26px rgba(0,0,0,.45);
  }

  /* ── ГЕРОЙ ─────────────────────────────────────────────────────────────── */
  .tp-hero {
    display: block; position: relative; overflow: hidden;
    width: 100%; max-width: none; margin: 0; padding: 0;
    background: var(--pp-sect); min-height: 0;
  }
  .tp-hero__art {
    position: absolute; inset: 0 0 0 30%;
    /* Край панорамы привязан к колонке контента (1420px), а не к проценту от
       окна: иначе на 1920 текст колонки уезжал на картинку и золотая строка
       выцветала. Так композиция на всех экранах шире 1420 такая же, как на
       1420, а ниже — прежние 30%. */
    left: max(30%, calc(max(0px, (100% - 1420px) / 2) + 426px));
    width: auto; height: auto; min-height: 0; aspect-ratio: auto;
    border-radius: 0; z-index: 0; pointer-events: none;
  }
  .tp-hero__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center 40%;
  }
  .tp-hero__img--dark, .tp-hero__img--light { display: none; }
  .tp-hero__img--dark-wide, .tp-hero__img--light-wide { display: none; }
  html[data-tp-mode="dark"]  .tp-hero__img--dark-wide  { display: block; }
  html[data-tp-mode="light"] .tp-hero__img--light-wide { display: block; }
  html[data-tp-mode] .tp-hero__art {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 12%, #000 42%);
            mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 12%, #000 42%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .tp-hero__art::before, .tp-hero__art::after { display: none; }
  .tp-hero__overlay { display: none; }

  .tp-hero__lead {
    position: relative; z-index: 3;
    max-width: 1420px; margin: 0 auto;
    padding: 24px 58px 22px; min-height: 0; display: block;
  }
  .tp-hero__pitch { display: block; max-width: none; }

  .tp-hero__eyebrow {
    display: flex; align-items: center; gap: 14px; margin: 0 0 13px;
    color: var(--pp-gold); font-size: 14px; font-weight: 600;
    letter-spacing: 2.4px; text-transform: uppercase;
  }
  .tp-hero__eyebrow::before { content: none; }
  .tp-eyebrow-star { display: inline-flex; flex: none; align-items: center; }
  .tp-eyebrow-star .tp-glowstar { width: 24px; height: 24px; display: block; margin: -5px 0; }
  /* эмблема «ТВОЙ ПУТЬ 1.0» в 4-м шаге */
  /* эмблема «ТВОЙ ПУТЬ 1.0» — тот же цвет и масштаб, что у иконок шагов */
  .tp-path__ico--emblem { width: 78px; height: 78px; color: var(--pp-emblem-ink); }

  .tp-hero__h1 {
    margin: 0; display: block;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600; line-height: 1.08; letter-spacing: .5px;
    font-variant-numeric: lining-nums;
    text-transform: uppercase; text-wrap: initial;
    color: var(--pp-ink); font-size: 60px;
  }
  .tp-hero__h1-accent {
    display: block; margin-top: 2px;
    font-size: 47px; letter-spacing: 1px; color: var(--pp-gold);
  }

  .tp-hero__sub {
    margin: 16px 0 0; max-width: 500px;
    font-size: 16px; line-height: 1.6; color: var(--pp-ink2);
  }
  .tp-hero__sub b { color: var(--pp-gold); font-weight: 700; }
  .tp-hero__trust { display: none; }

  .tp-hero__actions { display: block; margin: 20px 0 0; }
  .tp-hero__pitch .tp-cta {
    display: inline-flex; align-items: center; gap: 18px;
    min-height: 0; padding: 14px 34px; border-radius: 10px; border: none;
    background: var(--pp-btn-grad); color: var(--pp-btn-ink);
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 15px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase;
    box-shadow: var(--pp-btn-sh);
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  }
  .tp-hero__pitch .tp-cta:hover {
    transform: translateY(-2px); filter: brightness(1.06);
    box-shadow: 0 14px 34px rgba(190,145,50,.38);
  }
  .tp-hero__pitch .tp-cta:active { transform: translateY(0); }
  .tp-hero__pitch .tp-cta__star { font-size: 17px; color: currentColor; }

  /* ── ПОЛОСА «4 ШАГА» ───────────────────────────────────────────────────── */
  .tp-hero + .tp-path { margin-top: 0; }
  .tp-path {
    display: block; max-width: none; margin: 0; padding: 0;
    background: var(--pp-band); border-top: 1px solid var(--pp-rule-soft);
  }
  .tp-path__head {
    display: flex; align-items: center; gap: 26px;
    max-width: 1420px; margin: 0 auto; padding: 10px 58px 2px;
  }
  .tp-path__head::before,
  .tp-path__head::after { content: ""; flex: 1; height: 1px; }
  .tp-path__head::before { background: linear-gradient(to right, transparent, var(--pp-rule)); }
  .tp-path__head::after  { background: linear-gradient(to left,  transparent, var(--pp-rule)); }
  .tp-path__kicker {
    margin: 0; flex: none;
    font-size: 15px; font-weight: 600; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--pp-gold);
  }
  .tp-path__grid {
    list-style: none;
    display: flex; align-items: center; gap: 0;
    max-width: 1420px; margin: 0 auto; padding: 14px 58px 18px;
  }
  .tp-path .tp-path__step {
    flex: 1 1 0; min-width: 0;
    display: flex; align-items: center; gap: 15px;
    padding: 0; border-top: none;
  }
  .tp-path__ring {
    position: relative; flex: none;
    width: 92px; height: 92px; display: grid; place-items: center;
  }
  /* декоративное кольцо-мандала (svg владельца) — на подложке, иконка сверху */
  .tp-path__mandala { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .tp-path__ico { position: relative; z-index: 1; width: 60px; height: 60px; display: block; }
  /* на светлой теме золото иконок/мандалы/стрелок чуть темнее — по просьбе владельца */
  html[data-tp-mode="light"] .tp-path__ico,
  html[data-tp-mode="light"] .tp-path__mandala,
  html[data-tp-mode="light"] .tp-path__arrow { filter: brightness(.82) saturate(1.12); }
  .tp-path__txt {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: flex-start; gap: 11px;
  }
  .tp-path .tp-path__num {
    flex: none; margin: -5px 0 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 27px; font-weight: 500; line-height: 1;
    font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
    color: var(--pp-icon-ink);
  }
  .tp-path__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .tp-path__body strong {
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 17px; font-weight: 600; line-height: 1.2;
    color: var(--pp-ink);
  }
  .tp-path__body small { font-size: 12.5px; line-height: 1.55; color: var(--pp-ink3); }
  .tp-path .tp-path__conn {
    flex: none; align-self: center;
    display: flex; align-items: center; justify-content: center;
    margin: 0 6px; padding-top: 0; border-top: none;       /* сброс золотой черты от старого правила */
    line-height: 1;
  }
  .tp-path__conn::before, .tp-path__conn::after { content: none; }
  .tp-path__arrow { width: 42px; height: auto; display: block; transform: translateX(-16px); }
}

/* ── «4 шага»: на узких десктоп-ширинах (зум 125%, десктоп-режим на телефоне)
   4-в-ряд не помещается и элементы наезжают. Переводим в сетку 2×2 без стрелок. ── */
@media (min-width: 980px) and (max-width: 1339px) {
  .tp-path__grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 24px 40px; align-items: center;
    padding: 26px clamp(40px, 5vw, 58px) 34px;
  }
  .tp-path .tp-path__conn { display: none; }
  .tp-path .tp-path__step { align-items: center; }
}

/* ── Шапка: текучие размеры, чтобы бренд+меню+переключатель влезали на узких
   десктоп-ширинах и при зуме (иначе «ТВОЙ ПУТЬ» обрезался, меню наезжало). ── */
@media (min-width: 980px) {
  .tp-hdr { gap: clamp(12px, 2vw, 44px); padding-inline: clamp(18px, 3.5vw, 64px); }
  .tp-brand__ava { width: clamp(58px, 5.2vw, 84px); height: clamp(58px, 5.2vw, 84px); }
  .tp-brand__copy strong { font-size: clamp(20px, 2vw, 30px); }
  .tp-brand__copy small  { font-size: clamp(13px, 1.4vw, 21px); }
  .tp-nav { gap: clamp(9px, 1.5vw, 32px); }
  .tp-nav a { font-size: clamp(12.5px, 1.05vw, 15px); }
  .tp-toggle button { font-size: clamp(13px, 1.1vw, 16px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ВТОРОЙ ЭКРАН — фон «звёздное золото» под блоком «Что для вас важно сейчас?».
   Только фон (из прототипа Claude Design). Тёмная тема — в наших цветах.
   Работает на всех ширинах; путь к svg относительный (лежит рядом с css).
   ═══════════════════════════════════════════════════════════════════════════ */
/* Поле «звёздное золото» под блоками «Что важно» + «Выберите глубину» +
   «Как всё происходит» — единый фон без стыков (svg зафиксирован к вьюпорту). */
.tp-field { position: relative; isolation: isolate; }
.tp-field::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("bg-starfield.svg?v2") center center / cover fixed;
}
.tp-field::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 34% at 50% 2%, rgba(243,223,174,.26) 0%, rgba(243,223,174,0) 72%);
}
.tp-field > * { position: relative; z-index: 1; background: transparent; }

html[data-tp-mode="light"] .tp-field {
  background: linear-gradient(180deg, #FEFCF8 0%, #FBF4E8 42%, #F8F0E1 74%, #FCF6EC 100%);
}
html[data-tp-mode="dark"] .tp-field {
  background: linear-gradient(180deg, #071624 0%, #08182b 46%, #061020 100%);
}
html[data-tp-mode="dark"] .tp-field::after {
  background: radial-gradient(60% 34% at 50% 2%, rgba(233,185,93,.12) 0%, rgba(233,185,93,0) 72%);
}

/* карточки на поле — сплошные, с лёгкой тенью, единообразные */
.tp-field .tp-dir,
.tp-field .tp-quiz,
.tp-field .tp-tier,
.tp-field .tp-step__card,
.tp-field .tp-result {
  background: #FFFDF8;
  border-color: rgba(198, 154, 69, .22);
  box-shadow: 0 6px 22px rgba(150, 118, 56, .10);
}
html[data-tp-mode="dark"] .tp-field .tp-dir,
html[data-tp-mode="dark"] .tp-field .tp-quiz,
html[data-tp-mode="dark"] .tp-field .tp-tier,
html[data-tp-mode="dark"] .tp-field .tp-step__card,
html[data-tp-mode="dark"] .tp-field .tp-result {
  background: #0c1f37;
  border-color: rgba(233, 185, 93, .24);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}

/* на узких экранах фиксированный фон часто отключается — даём мягкий фолбэк */
@media (max-width: 720px) {
  .tp-field::before { background-attachment: scroll; background-size: cover; }
}

/* ── 2026-07-30 (итог): мобильный hero под баннер «пара на тропе». ──────── */
@media (max-width: 979px) {
  /* читаемость шагов на светлом баннере — цвета как в десктопной светлой теме */
  html[data-tp-mode="light"] .tp-hero__steps,
  html[data-tp-mode="light"] .tp-hero__steps strong { color: var(--tp-text); }
  html[data-tp-mode="light"] .tp-hero__steps small { color: var(--tp-muted); }
  html[data-tp-mode="light"] .tp-hero__steps li > span { color: var(--tp-gold-bright); }
  html[data-tp-mode="light"] .tp-hero__overlay {
    display: block;
    background: linear-gradient(180deg, rgba(246,240,230,.82) 0%, rgba(246,240,230,.5) 32%, rgba(246,240,230,0) 60%);
  }
  /* кнопка hero в светлой теме — золотой стиль как на десктопе */
  html[data-tp-mode="light"] .tp-cta--hero {
    background: linear-gradient(180deg,#F0CE7B 0%,#DBAE4C 55%,#CFA03B 100%);
    color: #4A3712; border-color: transparent;
    box-shadow: 0 8px 22px rgba(190,145,50,.28);
  }
}
@media (max-width: 599px) {
  /* короче слот → передний план тропы уходит, следующий блок подтягивается. Без зума. */
  /* svh, не dvh — см. капкан у .tp-menu и .tp-cons */
  .tp-hero__art { min-height: calc(100vh - 84px); min-height: calc(100svh - 84px); }
  .tp-hero__img { object-position: 50% 50%; }
  .tp-hero { --tp-cta-bottom: 16px; }
}

/* 2026-07-30: мобильный светлый hero — контраст цифр/нити/точек/подписей на светлом баннере */
@media (max-width: 979px) {
  html[data-tp-mode="light"] .tp-hero__steps li > span { color: #6e4e14; }
  html[data-tp-mode="light"] .tp-hero__steps li > span::after { background: #6e4e14; box-shadow: none; }
  html[data-tp-mode="light"] .tp-hero__steps li:not(:last-child)::after { background: linear-gradient(#9a7420, #6e4e14); }
  html[data-tp-mode="light"] .tp-hero__steps small {
    color: var(--tp-text-2);
    font-size: 14px;
    text-shadow: 0 1px 6px rgba(246,240,230,.95);
  }
}

/* 2026-07-30: цифры шагов в светлой теме чуть жирнее (мобильный) */
@media (max-width: 979px) {
  html[data-tp-mode="light"] .tp-hero__steps li > span { font-weight: 400; }
}

/* ── 2026-07-30: фон «звёздное золото» — ТОЛЬКО десктоп. На мобильном (<980)
   поле без спец-фона, как раньше (не конфликтует с мобильными правками). ── */
@media (max-width: 979px) {
  html[data-tp-mode="light"] .tp-field,
  html[data-tp-mode="dark"] .tp-field,
  .tp-field { background: none; }
  .tp-field::before,
  .tp-field::after { display: none; }
  .tp-field .tp-dir,
  .tp-field .tp-quiz,
  .tp-field .tp-tier,
  .tp-field .tp-step__card,
  .tp-field .tp-result { background: var(--tp-surface); box-shadow: none; }
}

/* ── 2026-07-31: адаптив шапки на телефонах (≤599). Крупные базовые размеры
   не помещались на ~360–440px: логотип обрезался, «Свет/Тень» наезжал. ── */
@media (max-width: 599px) {
  .tp-hdr { padding: 8px 12px; gap: 8px; }
  /* Лого — ОТДЕЛЬНЫЙ СЛОЙ ПОВЕРХ тумблера (как слои в фотошопе): на узких телефонах
     (у заказчика ~305px сериф рендерится шире) «ТВОЙ ПУТЬ» вплотную подходил к
     «Свет/Тень» и последняя «Ь» пряталась. z-index держит лого сверху — оно всегда
     читается целиком. */
  .tp-brand { gap: 8px; flex: 0 1 auto; min-width: 0; position: relative; z-index: 2; }
  .tp-brand__ava { width: clamp(42px, calc(100vw - 263px), 50px); height: clamp(42px, calc(100vw - 263px), 50px); }
  .tp-brand__copy strong { font-size: 24px; }
  .tp-brand__copy small  { font-size: 18px; }
  .tp-hdr__actions { gap: 8px; flex: 0 0 auto; position: relative; z-index: 1; }
  .tp-toggle button { font-size: 14px; padding: 6px 6px; }
  .tp-menu-btn { width: 34px; }
}
/* ≤374 (напр. 305px заказчика) — теснее: лого немного меньше + поджат правый блок,
   чтобы «ТВОЙ ПУТЬ / с Доброславом» не наезжал на «Свет/Тень» (зазор ~14px на 305). */
@media (max-width: 374px) {
  .tp-hdr { padding-inline: 12px; }
  .tp-hdr__actions { gap: 6px; }
  /* лого РЕАЛЬНО разведено с «Свет/Тень»: на 305 зазор ~26px (даже при более
     широком рендере серифа в Яндекс-браузере остаётся чистый отступ). z-index
     из ≤599 — дополнительная страховка. */
  .tp-brand__ava { width: clamp(42px, calc(100vw - 263px), 50px); height: clamp(42px, calc(100vw - 263px), 50px); }
  .tp-brand__copy strong { font-size: 17px; }
  .tp-brand__copy small  { font-size: 13px; }
  .tp-toggle button { font-size: 11.5px; padding: 5px 4px; }
  .tp-menu-btn { width: 34px; }
}

/* ── 2026-07-31: узкие телефоны (≤374, напр. 305px) — надпись на hero-кнопке
   при 19px вылезала за кнопку вправо. Уменьшаем кегль, чтобы влезала по центру. ── */
@media (max-width: 374px) {
  .tp-cta--hero { font-size: 15.5px; padding-left: 14px; padding-right: 14px; gap: 9px; }
  .tp-cta--hero .tp-cta__star { font-size: 16px; }
}

/* ── 2026-07-31: hero-кнопка (мобайл) — компактная пилюля по центру.
   Ширина по содержимому, центрируется (left:0;right:0;margin:auto), звезда рядом
   с текстом. Так вся кнопка визуально ровно по центру экрана. ── */
.tp-cta--hero {
  left: 0; right: 0; margin-inline: auto;
  width: max-content; max-width: calc(100% - 32px);
  justify-content: center;
}
.tp-cta--hero .tp-cta__star { position: static; transform: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   2026-07-31 · МОБИЛЬНЫЙ ПЕРВЫЙ ЭКРАН — «СОЗВЕЗДИЕ» (по прототипу Claude Design)
   Интерактивное небо: 5 звёзд-узлов, при касании раскрывается «шёпот» —
   направление Пути. Автосмена каждые 5.4с. Разметку рисует JS в home.html.
   Только <980. Десктоп (≥980) не затрагивается — там свой .tp-hero__lead.
   Темы через html[data-tp-mode]; фон — своя картинка на свет/тень.
   ═══════════════════════════════════════════════════════════════════════════ */
.tp-cons { display: none; }

@media (max-width: 979px) {
  /* убираем прежний мобильный hero (картинка «пара на тропе» + шаги + кнопка) */
  .tp-hero__art,
  .tp-hero__lead { display: none; }
  .tp-hero { padding: 0; }

  /* ── контейнер первого экрана ─────────────────────────────────────────── */
  .tp-cons {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(3px, .8vh, 9px);
    /* ⚠️ svh, НЕ dvh: dvh меняется при показе/скрытии адресной строки во время
       скролла → высота первого экрана «плыла» и второй экран прыгал. svh —
       статичная (маленький вьюпорт), при загрузке выглядит так же, но не растёт
       на ходу, поэтому переход первый→второй экран плавный. */
    min-height: calc(100vh - 84px);
    min-height: calc(100svh - 84px);
    padding-bottom: max(14px, 1.6vh);
    overflow: hidden;
    box-sizing: border-box;
  }

  /* ── фон-картинка + растворения ───────────────────────────────────────── */
  /* Фон через background-image: даёт зум + фокус (object-fit тут не крутит по
     вертикали, т.к. картинка сильно шире портретного экрана). background-size:
     auto 120% приближает пару и опускает её ниже, чтобы «Самое главное» встало
     под ногами героев; position-y удерживает вверху путеводную звезду. */
  .tp-cons__img { display: none; }   /* <img> больше не используем — фон на .tp-cons__art */
  .tp-cons__art {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
    background-color: var(--tp-bg);   /* полосы по краям при зуме <100% = фон темы */
    background-repeat: no-repeat;
    /* <100% по высоте = пара МЕЛЬЧЕ (отдалена), сверху/снизу полосы растворяются
       плашками в фон. 86% — стартовое; меньше число → пара дальше. */
    background-size: auto 86%;
    background-position: 42% -20%;
  }
  html[data-tp-mode="dark"]  .tp-cons__art { background-image: url("/_tp/hero-cons-dark.jpg?v1"); }
  html[data-tp-mode="light"] .tp-cons__art { background-image: url("/_tp/hero-cons-light.jpg?v1"); }
  /* лёгкое затемнение картинки от гор вниз (только светлая тема) — чуть глубже
     к низу, заодно помогает читаемости пунктов на ярком фоне */
  html[data-tp-mode="light"] .tp-cons__art::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, transparent 26%, rgba(30,21,8,.16) 52%, rgba(30,21,8,.26) 100%);
  }

  .tp-cons__veil-t,
  .tp-cons__veil-b { position: absolute; z-index: 1; pointer-events: none; }
  /* Верхнее растворение — ТОЛЬКО слева (под заголовком). Раньше было во всю
     ширину и глушило путеводную звезду по центру. Маска гасит плашку вправо,
     не доходя до звезды. */
  .tp-cons__veil-t {
    top: 0; left: 0; right: auto; width: 60%; height: 210px;
    -webkit-mask-image: linear-gradient(90deg, #000 0 50%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0 50%, transparent 100%);
  }
  .tp-cons__veil-b { left: 0; right: 0; bottom: 0; height: 46%; }
  html[data-tp-mode="dark"]  .tp-cons__veil-t { background: linear-gradient(180deg, rgba(4,19,38,.72) 0%, rgba(4,19,38,.5) 60%, rgba(4,19,38,0) 100%); }
  html[data-tp-mode="dark"]  .tp-cons__veil-b { background: linear-gradient(180deg, rgba(4,19,38,0) 0%, rgba(4,19,38,.45) 40%, rgba(4,19,38,.88) 72%, var(--tp-bg) 100%); }
  html[data-tp-mode="light"] .tp-cons__veil-t { background: linear-gradient(180deg, rgba(246,240,230,.92) 0%, rgba(246,240,230,.72) 55%, rgba(246,240,230,0) 100%); }
  html[data-tp-mode="light"] .tp-cons__veil-b { background: linear-gradient(180deg, rgba(246,240,230,0) 0%, rgba(246,240,230,.5) 40%, rgba(246,240,230,.9) 72%, var(--tp-bg) 100%); }

  /* контент над картинкой */
  .tp-cons__title,
  .tp-cons__hint,
  .tp-cons__sky,
  .tp-cons__bottom { position: relative; z-index: 3; }

  /* ── заголовок ────────────────────────────────────────────────────────── */
  .tp-cons__title {
    margin: clamp(8px,1.6vh,16px) 16px clamp(5px,1vh,10px);
    max-width: min(86%, 340px);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
    font-variant-numeric: lining-nums;
    font-size: clamp(18px, min(5.4vw,3vh), 24px);
    line-height: 1.24;
    text-wrap: pretty;
  }
  .tp-cons__gold { color: var(--tp-gold); font-weight: 600; }
  html[data-tp-mode="dark"]  .tp-cons__title { color: var(--tp-text); text-shadow: 0 1px 14px rgba(3,8,18,.9); }
  html[data-tp-mode="light"] .tp-cons__title { color: var(--tp-text); }

  .tp-cons__hint {
    margin: 0 16px;
    font: 500 9px/1.35 "Manrope", system-ui, sans-serif;
    letter-spacing: .2em; text-transform: uppercase;
  }
  html[data-tp-mode="dark"]  .tp-cons__hint { color: #fffdf6; text-shadow: 0 0 10px rgba(255,246,214,.6), 0 1px 10px rgba(3,8,18,.9); animation: tpConsHint 4.4s ease-in-out infinite; }
  html[data-tp-mode="light"] .tp-cons__hint { color: var(--tp-text); animation: tpConsHintL 4.4s ease-in-out infinite; }
  @keyframes tpConsHint  { 0%,100% { opacity:.62; } 50% { opacity:1; } }
  @keyframes tpConsHintL { 0%,100% { opacity:.55; } 50% { opacity:1; } }

  /* ── небо ─────────────────────────────────────────────────────────────── */
  /* margin-top: гарантированный зазор от подписи «прикоснитесь к звезде» —
     верхняя звезда (y≈1.4%) и её «шёпот» иначе налезают на подпись, особенно
     на невысоких экранах, где .tp-cons gap схлопывается до 2px. */
  .tp-cons__sky { position: relative; flex: 1 1 auto; min-height: 0; margin-top: clamp(10px, 2.4vh, 22px); }
  html[data-tp-mode="dark"]  .tp-cons__sky { color: var(--tp-gold-light); }
  html[data-tp-mode="light"] .tp-cons__sky { color: #6e4e12; }
  .tp-cons__link { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

  /* звезда-узел */
  .tp-node {
    position: absolute; z-index: 3; width: 54px; height: 54px; margin: -27px 0 0 -27px;
    display: grid; place-items: center; cursor: pointer; touch-action: manipulation;
  }
  .tp-node i {
    display: block; width: 31px; height: 31px;
    transition: width .75s cubic-bezier(.2,.9,.24,1), height .75s cubic-bezier(.2,.9,.24,1), filter .75s ease;
    animation: tpConsTwinkle 4.4s cubic-bezier(.45,0,.55,1) infinite;
  }
  .tp-node.on i {
    width: 47px; height: 47px; animation: none; opacity: 1;
    filter: drop-shadow(0 0 16px rgba(255,240,200,.95)) drop-shadow(0 0 34px rgba(242,208,128,.55));
  }
  @keyframes tpConsTwinkle { 0%,100% { opacity:.42; transform:scale(.84); } 50% { opacity:1; transform:scale(1.09); } }
  html[data-tp-mode="dark"] .tp-node i { color: #f2d080; }
  /* светлая тема: «солнышки» с тёплым свечением */
  html[data-tp-mode="light"] .tp-node i {
    color: #6e4e12; animation-name: tpConsTwinkleSun; animation-duration: 1.7s;
    filter: drop-shadow(0 0 1px rgba(58,40,10,.55)) drop-shadow(0 0 3px rgba(255,255,255,1)) drop-shadow(0 0 9px rgba(255,214,110,1)) drop-shadow(0 0 20px rgba(244,170,26,.8)) drop-shadow(0 0 36px rgba(226,140,10,.45));
  }
  html[data-tp-mode="light"] .tp-node:not(.on) i { width: 25.5px; height: 25.5px; }
  html[data-tp-mode="light"] .tp-node.on i {
    width: 50px; height: 50px; animation: none; opacity: 1;
    filter: drop-shadow(0 0 1px rgba(58,40,10,.6)) drop-shadow(0 0 4px rgba(255,255,255,1)) drop-shadow(0 0 13px rgba(255,224,140,1)) drop-shadow(0 0 28px rgba(248,180,36,.9)) drop-shadow(0 0 52px rgba(230,146,10,.5));
  }
  @keyframes tpConsTwinkleSun { 0%,100% { opacity:.8; transform:scale(.96); } 50% { opacity:1; transform:scale(1.07); } }

  /* «шёпот» — раскрытое направление */
  .tp-whisper {
    position: absolute; z-index: 6; isolation: isolate; pointer-events: none; margin: 0; box-sizing: border-box;
    font: 400 clamp(11.5px, min(3.4vw,3vh), 16px)/1.42 "Manrope", system-ui, sans-serif;
    text-wrap: pretty; padding: 0; border-radius: 10px;
    animation: tpConsWhisper 1.5s cubic-bezier(.2,.9,.24,1) both;
  }
  @keyframes tpConsWhisper {
    0%   { opacity:0; transform:translateY(10px) scale(.985); filter:blur(9px); }
    45%  { opacity:.6; filter:blur(3px); }
    100% { opacity:1; transform:none; filter:blur(0); }
  }
  .tp-whisper__ln {
    position: relative; display: inline; padding: 2.5px 9px; border-radius: 9px; line-height: 1.42;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .tp-whisper__bl { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .tp-whisper__bl span {
    display: inline; padding: 2.5px 9px; border-radius: 9px; line-height: 1.42; color: transparent; filter: blur(6px);
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  html[data-tp-mode="dark"]  .tp-whisper { color: #f4eee0; text-shadow: 0 1px 10px rgba(3,8,18,.9); }
  html[data-tp-mode="dark"]  .tp-whisper__bl span { background: rgba(6,11,22,.34); }
  html[data-tp-mode="light"] .tp-whisper { color: var(--tp-text); }
  html[data-tp-mode="light"] .tp-whisper__bl span { background: rgba(255,252,245,.88); }
  /* Пункт «Опора» (data-k="2") — самый длинный текст. Сужаем плашку, чтобы он
     разбился на ~4 строки и не упирался в правый край экрана (ширину JS ставит
     инлайном, поэтому нужен max-width, а не width). */
  .tp-whisper[data-k="2"] { max-width: 45%; }

  /* ═══ СВЕТЛАЯ ТЕМА: лучи от солнца (вместо созвездия) ═══════════════════════
     JS (контроллер в home.html) наполняет #tpConsSky либо созвездием (тень),
     либо этой сценой лучей (свет). Пункты скрыты маской-полосой, JS покадрово
     ведёт mask-position — строка «проявляется» полосой света. Подложка текста —
     как в текущем варианте (кремовая, box-decoration-break). ── */
  /* Пункт скрыт (opacity:0); JS плавно проявляет его и растворяет — как «шёпот»
     в тёмной теме. Маску-смахивание убрали (была слишком резкой на входе/выходе). */
  /* ⚠️⚠️ will-change ЗДЕСЬ БЫЛ ГЛАВНОЙ ПРИЧИНОЙ МИГАНИЯ (2026-08-29).
     Было: `will-change: opacity, filter, transform`. Это приказ браузеру
     ПОСТОЯННО держать элемент отдельным слоем в видеопамяти — не на время
     анимации, а всю жизнь страницы. Пять строк текста + пять бликов = десять
     вечных слоёв (замерено: в светлой теме 10 элементов с will-change, в тёмной
     НИ ОДНОГО — вот и вся разница между темами). На телефоне это съедало бюджет
     памяти, плиток на прокручиваемый контент не оставалось, и страница отдавала
     пустые кремовые кадры.
     ⚠️ Именно поэтому не помогла пауза анимаций: слои остаются промотанными и
     когда анимация стоит.
     Убирать безопасно: современный Chromium сам поднимает элемент в слой на
     время WAAPI-анимации transform/opacity/filter. Вид НЕ меняется. */
  .tp-item { position: absolute; opacity: 0; }
  .tp-item__row { display: grid; grid-template-columns: 19px 1fr; gap: 2px; align-items: start; }
  .tp-item__p {
    position: relative; isolation: isolate; margin: 0;
    font: 400 clamp(11.5px, min(3.4vw,2.5vh), 15px)/1.42 "Manrope", system-ui, sans-serif;
    /* тёплый «чернильный» коричневый — читаемо и в гармонии с золотой картинкой.
       Мягкий белый ОРЕОЛ (без офсета) отделяет буквы от «шумного» фото — это
       читаемость без жёсткой плашки. */
    color: #35270f; text-wrap: pretty;
    text-shadow: 0 0 5px rgba(255,251,240,.9), 0 0 11px rgba(255,250,236,.6);
  }
  .tp-item__ln { display: inline; padding: 2.5px 9px; border-radius: 9px; line-height: 1.42; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .tp-item__bl { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  /* подложка строки — как в текущем варианте на сайте (whisper): blur(6px) */
  .tp-item__bl span { display: inline; padding: 2.5px 8px; border-radius: 9px; line-height: 1.42; color: transparent; filter: blur(7px); background: rgba(255,251,242,.72); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

  /* Проблеск-маркер на позиции узла (NODES). Обёртка центрирует блик в точке
     и её JS увеличивает при попадании луча (transform на обёртке, чтобы не
     конфликтовать с мерцанием .tp-glint внутри). Видны всегда. */
  /* will-change убран — см. капкан у .tp-item выше */
  .tp-glint-mark { position: absolute; z-index: 4; width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .tp-glint { position: relative; display: block; width: 26px; height: 26px; animation: tpGlint 4.6s ease-in-out infinite; }
  @keyframes tpGlint { 0%,100% { opacity:.7; transform:scale(.9) rotate(-4deg); } 50% { opacity:1; transform:scale(1.08) rotate(4deg); } }

  /* луч от звезды к строке */
  .tp-ray { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; transform-origin: 0 50%; opacity: 0; z-index: 5; }
  .tp-ray__line { position: absolute; left: 0; top: 0; width: 100%; height: 0; transform-origin: 0 50%; }
  .tp-ray__tip { position: absolute; left: 100%; top: 0; width: 0; height: 0; opacity: 0; }

  /* вспышка на месте текста */
  .tp-ray-flash { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; z-index: 4; border-radius: 18px; filter: blur(7px); background: radial-gradient(58% 130% at 14% 50%,rgba(255,255,255,.98) 0%,rgba(255,252,240,.75) 30%,rgba(255,240,198,.3) 60%,rgba(255,234,176,0) 100%); }

  /* невидимая зона касания «солнца» (звезды на картинке) */
  .tp-ray-sun { position: absolute; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%; cursor: pointer; z-index: 6; }

  /* ── нижний блок «Самое главное» + кнопка ─────────────────────────────── */
  .tp-cons__bottom {
    position: relative;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: clamp(5px,1vh,11px); padding: 14px 16px 0; margin-top: clamp(6px,1.2vh,12px);
  }
  /* Подложка под текстом «Самое главное» — плавно из прозрачного (вверху) в фон
     темы (внизу). ::before выше блока, чтобы переход из картинки был мягким.
     Цвет фона берётся из темы: тень — тёмная, свет — светлая. */
  .tp-cons__bottom::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: -140px; z-index: -1; pointer-events: none;
  }
  html[data-tp-mode="dark"]  .tp-cons__bottom::before { background: linear-gradient(180deg, rgba(4,19,38,0) 0%, rgba(4,19,38,.45) 42%, rgba(4,19,38,.85) 55%, var(--tp-bg) 60%); }
  html[data-tp-mode="light"] .tp-cons__bottom::before { background: linear-gradient(180deg, rgba(246,240,230,0) 0%, rgba(246,240,230,.45) 42%, rgba(246,240,230,.85) 55%, var(--tp-bg) 60%); }
  .tp-cons__rule { display: block; width: 38%; height: 1px; }
  html[data-tp-mode="dark"]  .tp-cons__rule { background: linear-gradient(90deg, rgba(232,196,106,0), rgba(232,196,106,.55), rgba(232,196,106,0)); }
  html[data-tp-mode="light"] .tp-cons__rule { background: linear-gradient(90deg, rgba(176,138,62,0), rgba(176,138,62,.6), rgba(176,138,62,0)); }
  .tp-cons__label {
    font: 600 clamp(9.5px,2.7vw,12.5px)/1 "Manrope", system-ui, sans-serif;
    letter-spacing: .24em; text-transform: uppercase; color: var(--tp-gold);
  }
  .tp-cons__main {
    font-size: clamp(11.5px, min(3.4vw,3vh), 16px); line-height: 1.42; text-wrap: pretty; color: var(--tp-text);
  }
  html[data-tp-mode="dark"] .tp-cons__main,
  html[data-tp-mode="dark"] .tp-cons__label { text-shadow: 0 1px 12px rgba(3,8,18,.9); }
  /* тот же тёплый коричневый, что у пунктов-лучей */
  html[data-tp-mode="light"] .tp-cons__main { color: #35270f; text-shadow: 0 1px 9px rgba(255,252,245,1); }
  .tp-cons__cta { width: 100%; margin-top: clamp(3px,.6vh,7px); }

  /* низкие экраны — плотнее */
  @media (max-height: 640px) {
    .tp-cons { gap: 2px; }
    .tp-node i        { width: 26px; height: 26px; }
    .tp-node.on i     { width: 38px; height: 38px; }
    html[data-tp-mode="light"] .tp-node.on i { width: 40px; height: 40px; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   БЛОК «Кому будут полезны инструменты ТВОЕГО ПУТИ?» — аудитория (#komu)
   Телефон (<600): все 6 карточек 2×3 на один экран. Планшет/десктоп (≥600):
   обычная 2-колоночная сетка в потоке. Отступы/колонки — в брейкпоинтах ниже.
   ═══════════════════════════════════════════════════════════════════════ */
.tp-who {
  position: relative;
  isolation: isolate;
  max-width: 760px;
  margin: 0 auto;
  box-sizing: border-box;
  background: transparent;
  overflow-x: clip;   /* страховка: секция НИКОГДА не даёт горизонтальную прокрутку */
}
/* Фон 2-го экрана — общий тёплый --tp-bg (как у всей светлой темы), отдельного
   градиента больше нет; секция прозрачна и показывает тёплый фон body. */

/* сияние-glow больше не используется (фон плоский, атмосфера — в карточках) */
.tp-who__sky { display: none; }

/* ── Заголовок блока (по левому краю, как в прототипе) ── */
.tp-who__head { position: relative; z-index: 1; margin: 0 0 18px; }
.tp-who__kicker {
  margin: 0 0 12px;
  color: var(--tp-gold-bright);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.tp-who__flourish { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; }
.tp-who__flourish i {
  font-style: normal;
  font-size: 13px;
  line-height: 1;
  color: var(--tp-gold);
  text-shadow: 0 0 12px var(--tp-gold);
}
.tp-who__flourish b {
  display: block;
  width: 54px;
  height: 1px;
  background: linear-gradient(to right, var(--tp-gold), transparent);
}
/* левая черта — зеркало правой (золото у звезды, тает наружу) */
.tp-who__flourish b:first-child {
  background: linear-gradient(to left, var(--tp-gold), transparent);
}
.tp-who__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(29px, 8.4vw, 40px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums;
  color: var(--tp-text);
}
.tp-who__accent { color: var(--tp-gold-bright); }

/* ── Сетка карточек (колонки/gap задаются в брейкпоинтах ниже) ── */
.tp-who__grid {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

/* ── «Солнечные окна»: карточка = картинка-пергамент (рваный край, прозрачные
   поля ложатся прямо на фон). СВЕТЛАЯ тема — светлая бумага (колос/веточка),
   текст тёмный. ТЁМНАЯ тема — тёмный сланец с созвездием, текст светлый. */
.tp-who__card {
  position: relative;
  min-width: 0;                 /* карточка может быть уже min-content содержимого */
  border: 0;
  background: transparent;
}
/* Пергамент вынесен на слой ::before, чтобы тень (drop-shadow) повторяла рваный
   край, а текст поверх оставался чётким. Тень — слева и снизу (объём). */
.tp-who__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  /* cover + низ: пергамент НЕ растягивается; колосок/созвездие снизу видны */
  background-position: center bottom;
  background-size: cover;
  filter:
    drop-shadow(-5px 6px 8px rgba(120, 85, 35, .22))
    drop-shadow(-1px 2px 3px rgba(120, 85, 35, .12));
  /* ОДИН чистый лист-база на ВСЕ карточки (без веточек — они отдельным слоем) */
  background-image: url("/_tp/who-base-light.webp?v1");
}
.tp-who__card > * { position: relative; z-index: 1; }

/* Веточки-оверлеи: маленькая золотая веточка в свободном НИЖНЕМ ПРАВОМ углу
   карточек 1, 2, 4 (у них внизу воздух; слева на пергаменте уже колосок).
   Слой ::after поверх пергамента (z:0), но ПОД текстом (текст z:1) — если текст
   длинный, он ложится поверх веточки, читаемость не страдает. Веточки высокие/
   узкие → бокс выше ширины. Только СВЕТЛАЯ тема (в тёмной — созвездие на сланце). */
.tp-who__card::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 4%;
  bottom: 3%;
  /* Размер В ПРОЦЕНТАХ от карточки: на узких экранах карточки вытянутые (выше) →
     веточка автоматически крупнее (у заказчика ~305px это заметно). Высота ведёт
     (веточки высокие), ширины хватает, чтобы contain не подрезал. max-* — потолок
     для планшета/десктопа, где карточки крупные. */
  width: 44%;
  height: 40%;
  max-width: 72px;
  max-height: 112px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  /* еле заметная тёплая тень — веточка чуть «лежит» на бумаге */
  filter: drop-shadow(-1px 1.5px 1.5px rgba(84, 58, 22, .26));
  opacity: 0;                 /* по умолчанию веточки нет */
}
html[data-tp-mode="light"] .tp-who__card:nth-child(1)::after { opacity: .9; background-image: url("/_tp/who-sprig-a.webp?v1"); }
html[data-tp-mode="light"] .tp-who__card:nth-child(2)::after { opacity: .9; background-image: url("/_tp/who-sprig-b.webp?v1"); }
html[data-tp-mode="light"] .tp-who__card:nth-child(3)::after { opacity: .9; background-image: url("/_tp/who-sprig-d.webp?v1"); }
html[data-tp-mode="light"] .tp-who__card:nth-child(4)::after { opacity: .9; background-image: url("/_tp/who-sprig-c.webp?v1"); }

/* ТЁМНАЯ ТЕМА: ЧИСТЫЙ НАВЫ (без текстур) — гладкая карточка с мягким навы-
   градиентом + лунным свечением сверху + ТОНКОЙ ЗОЛОТОЙ РАМКОЙ + скруглением.
   Созвездие (::after) — герой, дугой внизу, зеркалим по колонкам. Веточек нет. */
html[data-tp-mode="dark"] .tp-who__card::before {
  background:
    radial-gradient(120% 62% at 50% -12%, rgba(74, 116, 168, .28) 0%, rgba(74,116,168,0) 62%),
    linear-gradient(158deg, #10273f 0%, #0a1d33 52%, #06152a 100%);
  border: 1px solid rgba(233, 185, 93, .22);
  border-radius: 16px;
  filter: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .05);
}
/* Созвездие-оверлей — мягкой полосой ВНИЗУ карточки, ТОЛЬКО на 1, 2, 4 (симметрично
   веточкам в светлой теме). Приглушено, тянется по ширине, привязано к низу. */
html[data-tp-mode="dark"] .tp-who__card:nth-child(1)::after,
html[data-tp-mode="dark"] .tp-who__card:nth-child(2)::after,
html[data-tp-mode="dark"] .tp-who__card:nth-child(3)::after,
html[data-tp-mode="dark"] .tp-who__card:nth-child(4)::after {
  left: 4%;
  right: 4%;
  bottom: 4%;
  width: auto;
  height: 46%;
  max-width: none;
  max-height: none;
  opacity: .72;
  filter: none;
  background-position: center bottom;
  background-image: url("/_tp/who-constel2.webp?v1");
}
/* тёмная тема, текст на навы-карточке: золотистый заголовок + холодный серо-голубой
   текст (тёплый бежевый на навы выглядел тускло/грязно) */
html[data-tp-mode="dark"] .tp-who__name { color: #f6e9c8; }
html[data-tp-mode="dark"] .tp-who__desc { color: #aeb8c6; }

/* строка карточки: номер + заголовок на одной строке (иконок больше нет) */
.tp-who__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.tp-who__num {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--tp-gold);
  border-radius: 50%;
  color: var(--tp-gold-bright);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
}
.tp-who__name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: #35270f;                 /* тёмный текст на светлой бумаге (обе темы) */
  overflow-wrap: break-word;      /* длинные слова переносятся, не распирают карточку */
}
.tp-who__desc {
  margin: 8px 0 0;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #6b5836;                 /* тёплый серо-коричневый на бумаге */
  overflow-wrap: break-word;
}
/* нумерацию на карточках убрали по просьбе владельца — заголовок поднимается вверх */
.tp-who__num { display: none; }

/* ── ТЕЛЕФОН (<600): 2 колонки, текущие (горизонтальные) пергаменты через cover.
   Номер над заголовком (заголовку — вся ширина колонки), текст компактный.
   Положение/выравнивание текста настраивается вручную (align + padding). */
@media (max-width: 599px) {
  .tp-who { padding: clamp(16px, 2.3vh, 26px) 10px 20px; margin-top: clamp(26px, 5.5vh, 56px); }
  .tp-who__head { margin: 0 0 clamp(10px, 1.8vh, 18px); text-align: center; }
  .tp-who__kicker { margin: 0 0 clamp(4px, .8vh, 8px); font-size: clamp(9px, 2.6vw, 11px); letter-spacing: .18em; }
  .tp-who__flourish { margin: 0 0 clamp(5px, 1vh, 9px); gap: 7px; justify-content: center; }
  .tp-who__flourish b { width: 40px; }
  .tp-who__title { font-size: clamp(21px, 6.6vw, 30px); line-height: 1.2; }

  .tp-who__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows: 1fr;          /* все ряды равной высоты → карточки одного размера */
    column-gap: 8px;
    row-gap: 10px;
  }
  /* центр-низ: лучик (сверху) сохраняется, обрезаются только края */

  .tp-who__card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   /* заголовки ровно сверху (как было) */
    text-align: left;              /* выравнивание влево */
    padding: clamp(12px, 3.4vw, 16px) clamp(9px, 2.6vw, 13px) clamp(14px, 4vw, 20px);
  }
  /* номер СВЕРХУ — заголовку достаётся вся ширина колонки, слова не рвутся */
  .tp-who__row {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(5px, 1.4vw, 8px);
    margin-bottom: clamp(5px, 1.4vw, 8px);
  }
  .tp-who__num {
    width: 28px; height: 28px;
    font-size: 11px; border-width: 1.5px;
  }
  .tp-who__name {
    align-self: stretch;
    font-size: clamp(15px, 4.1vw, 17.5px);
    line-height: 1.15;
  }
  .tp-who__desc {
    margin: clamp(4px, 1.2vw, 7px) 0 0;
    font-size: clamp(10.5px, 2.9vw, 12px);
    line-height: 1.4;
  }
}

/* ── Планшет: две колонки ── */
@media (min-width: 600px) {
  .tp-who { padding: 32px 26px 44px; }
  .tp-who__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .tp-who__card { padding: 22px 24px 24px; }
  .tp-who__name { font-size: 23px; }
}

/* ── Десктоп: шире контейнер, крупный заголовок; портретной картинки-восхода
   здесь нет — возвращаем мягкое сияние в углу ── */
@media (min-width: 980px) {
  .tp-who {
    max-width: 1120px;
    padding: 52px 40px 56px;
    background-image: none;
    background-color: transparent;
    overflow: hidden;
  }
  .tp-who__head { max-width: 720px; margin: 0 auto 30px; text-align: center; }
  .tp-who__title { font-size: clamp(40px, 4vw, 54px); }
  .tp-who__flourish { justify-content: center; }
  .tp-who__flourish b { width: 68px; }
  .tp-who__grid { gap: 26px; }
  .tp-who__card { padding: 24px 28px 26px; }
  .tp-who__row { margin-bottom: 14px; }
  .tp-who__num { width: 42px; height: 42px; font-size: 14px; }
  .tp-who__name { font-size: 26px; }
  .tp-who__desc { font-size: 14px; margin-top: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ⏸ ВРЕМЕННО: кнопка «Подобрать решение» скрыта во ВСЕХ блоках.
   Логику и назначение переделаем позже — тогда этот блок удалить/вернуть.
   display:none убирает и внешние отступы кнопок, поэтому блоки ниже
   поднимаются сами — пустого места не остаётся.
   Кнопки «Пройти подбор» (.tp-quiz__btn) и тарифов (.tp-tier__btn) НЕ трогаем.
   ═══════════════════════════════════════════════════════════════════════ */
.tp-hero__actions,          /* десктопный hero (единственная .tp-cta внутри) */
.tp-cta--hero,              /* мобильный hero (наложение на картинку) */
.tp-cons__cta,              /* мобильный первый экран — «созвездие» */
.tp-result__btn,            /* демо-результат */
.tp-final__btn {            /* финальный CTA */
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   3-й экран: «Как использовать экосистему ТВОЙ ПУТЬ?» — точка входа (#eco).
   Два входа: по СФЕРЕ ЖИЗНИ (8 карточек) и по ПОДХОДУ/МЕТОДУ (5 пилюль).
   Язык — как 2-й экран: крем-пергамент / навы+золотая рамка, золото,
   Cormorant+Manrope, иконка тонкой линией в кольце. (черновик, допилим)
   ═══════════════════════════════════════════════════════════════════════ */
.tp-eco {
  position: relative;
  isolation: isolate;
  max-width: 860px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: clip;                 /* страховка от горизонтальной прокрутки */
  padding: clamp(24px,5.5vw,50px) clamp(12px,3.4vw,30px) clamp(34px,8vw,60px);
}
.tp-eco__head { text-align: center; margin-bottom: clamp(16px,4vw,26px); }
.tp-eco__flourish { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 14px; }
.tp-eco__flourish b { display: block; width: clamp(34px,10vw,54px); height: 1px; background: linear-gradient(to right, var(--tp-gold), transparent); }
.tp-eco__flourish b:first-child { background: linear-gradient(to left, var(--tp-gold), transparent); }
.tp-eco__flourish i { font-style: normal; font-size: 13px; line-height: 1; color: var(--tp-gold); text-shadow: 0 0 12px var(--tp-gold); }
.tp-eco__title {
  margin: 0; font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-weight: 600;
  font-size: clamp(23px, 6.6vw, 40px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; color: var(--tp-text);
}
.tp-eco__accent { color: var(--tp-gold-bright); }

.tp-eco__block { margin-top: clamp(18px,4.5vw,28px); }
.tp-eco__lead {
  margin: 0 auto clamp(13px,3.4vw,17px);
  max-width: 52ch;
  text-align: center;
  font: 400 clamp(12.5px,3.3vw,15px)/1.5 "Manrope", system-ui, sans-serif;
  color: color-mix(in srgb, var(--tp-text) 72%, transparent);
}

/* сетка сфер: телефон 2 колонки, планшет+ 4 */
.tp-eco__spheres { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(7px,2vw,14px); margin-inline: -6px; }
@media (min-width: 620px) { .tp-eco__spheres { grid-template-columns: repeat(4, minmax(0,1fr)); margin-inline: 0; } }

.tp-eco__sphere {
  display: flex; flex-direction: column; align-items: center; gap: clamp(9px,2.4vw,13px);
  padding: clamp(15px,3.8vw,22px) clamp(7px,2vw,13px);
  border: 1px solid transparent; border-radius: 16px; cursor: pointer;
  font: inherit; color: inherit; text-align: center; position: relative; isolation: isolate; min-width: 0;
  height: auto; line-height: normal;      /* перебиваем Free-тему button{height:230px} */
  text-decoration: none;                  /* теперь это <a> — ссылка на категорию-сферу */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
html[data-tp-mode="light"] .tp-eco__sphere {
  background: linear-gradient(160deg, #fbf4e7 0%, #f2e6d2 100%);
  border-color: color-mix(in srgb, #b0883e 34%, transparent);
  /* лёгкая тень СЛЕВА и СНИЗУ — как у карточек 2-го экрана (объём) */
  box-shadow: -5px 6px 8px rgba(120,85,35,.18), -1px 2px 3px rgba(120,85,35,.1), inset 0 1px 0 rgba(255,255,255,.5);
}
html[data-tp-mode="dark"] .tp-eco__sphere {
  background:
    radial-gradient(120% 62% at 50% -12%, rgba(74,116,168,.26) 0%, rgba(74,116,168,0) 62%),
    linear-gradient(158deg, #10273f 0%, #0a1d33 52%, #06152a 100%);
  border-color: color-mix(in srgb, #e9b95d 24%, transparent);
  box-shadow: -5px 6px 10px rgba(0,0,0,.42), -1px 2px 3px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
}
.tp-eco__sphere:hover { transform: translateY(-2px); }
html[data-tp-mode="light"] .tp-eco__sphere:hover { border-color: color-mix(in srgb, #b0883e 60%, transparent); box-shadow: 0 10px 22px rgba(120,85,35,.18); }
html[data-tp-mode="dark"]  .tp-eco__sphere:hover { border-color: color-mix(in srgb, #e9b95d 55%, transparent); box-shadow: 0 12px 26px rgba(0,0,0,.5); }

/* ── Вариант А «Золотая печать»: иконка-гравировка в металлическом золоте на
   мягком медальоне (ободок + эмбосс). Глиф МАКСИМАЛЬНО крупный в круге —
   у каждого свой размер (см. nth-child), т.к. плотность глифов разная. ── */
.tp-eco__ico {
  position: relative;
  width: clamp(64px,17vw,86px); height: clamp(64px,17vw,86px);
  flex: none; display: grid; place-items: center;
  border-radius: 50%; overflow: hidden;   /* круг-медальон + клип прозрачных углов крупного глифа */
}
html[data-tp-mode="light"] .tp-eco__ico {
  background: radial-gradient(circle at 38% 30%, #fbf3df, #efe0c4 78%);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.9), inset 0 -3px 6px rgba(150,110,45,.22), 0 3px 9px rgba(120,85,35,.16);
  border: 1px solid color-mix(in srgb, #b0883e 44%, transparent);
}
html[data-tp-mode="dark"] .tp-eco__ico {
  background: radial-gradient(circle at 38% 30%, #173350, #0b1f38 80%);
  box-shadow: inset 0 1px 2px rgba(150,190,255,.14), inset 0 -3px 7px rgba(0,0,0,.5), 0 3px 11px rgba(0,0,0,.42);
  border: 1px solid color-mix(in srgb, #e9b95d 34%, transparent);
}
/* металлическое золото (градиент-перелив), задаём и на strokes, и на fill-акценты */
.tp-eco__ico svg { display: block; }
html[data-tp-mode="light"] .tp-eco__ico svg * { stroke: url(#tpGoldLt); }
html[data-tp-mode="dark"]  .tp-eco__ico svg * { stroke: url(#tpGoldDk); }
html[data-tp-mode="light"] .tp-eco__ico svg [fill]:not([fill="none"]) { fill: url(#tpGoldLt); }
html[data-tp-mode="dark"]  .tp-eco__ico svg [fill]:not([fill="none"]) { fill: url(#tpGoldDk); }
/* иконка «Семья» — вектор-трейс (заливкой, не обводкой): отключаем stroke, чтобы линии не двоились */
html[data-tp-mode] .tp-eco__ico svg.tp-eco__fam * { stroke: none; }
html[data-tp-mode="light"] .tp-eco__ico svg { filter: drop-shadow(0 1px .5px rgba(90,60,12,.5)); }
html[data-tp-mode="dark"]  .tp-eco__ico svg { filter: drop-shadow(0 1px .5px rgba(0,0,0,.5)); }

/* ── Шапка страницы категории-сферы (медальон над заголовком) ── */
.category-heder { text-align: center; }
.tp-cat-sphere { display: flex; justify-content: center; margin: 2px 0 12px; }
.tp-cat-sphere .tp-eco__ico { width: clamp(76px,21vw,98px); height: clamp(76px,21vw,98px); }
.tp-cat-sphere .tp-eco__ico svg { width: 132%; height: 132%; }
.tp-cat-sphere .tp-eco__ico svg.tp-eco__fam { width: 72%; height: 72%; }

/* ═══════════════════════════════════════════════════════════════
   Карточки товара и страница товара — под тему ТВОЙ ПУТЬ.
   Перекрываем ядовитую бирюзу (#0d8393) и красную цену (#f91155)
   Free-темы золотом. !important — т.к. shop.css/UIkit специфичны.
   ═══════════════════════════════════════════════════════════════ */
/* Основная кнопка покупки — золотая заливка */
.button.addtocart, .button.js-submit-form, #open-status-modal {
  background: linear-gradient(135deg,#ffe9ad 0%,#eabb60 46%,#c8912e 100%) !important;
  color: #0a1d33 !important;
  border: 1px solid transparent !important;
  text-shadow: none !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.28) !important;
  font: 600 15px/1.25 "Manrope", system-ui, sans-serif !important;
  letter-spacing: .01em !important;
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
.button.addtocart:hover, .button.js-submit-form:hover, #open-status-modal:hover {
  filter: brightness(1.06) !important; transform: translateY(-1px) !important;
  box-shadow: 0 7px 20px rgba(0,0,0,.4) !important; color: #0a1d33 !important;
}
/* Вторичная кнопка «Купить в 1 клик» — призрачная, золотой контур */
.buy1click-open-button, .buy1click-open-button.uk-button-primary {
  background: transparent !important;
  color: var(--tp-gold) !important;
  border: 1px solid color-mix(in srgb, var(--tp-gold) 55%, transparent) !important;
  text-shadow: none !important; box-shadow: none !important;
  font: 600 15px/1.25 "Manrope", system-ui, sans-serif !important;
  transition: border-color .2s ease, background .2s ease !important;
}
.buy1click-open-button:hover {
  background: color-mix(in srgb, var(--tp-gold) 12%, transparent) !important;
  border-color: var(--tp-gold) !important; color: var(--tp-gold) !important;
}
/* Цена — золото вместо кислотно-красного */
.price, .product__price, .ruble,
.Product-grid_prices .price, .product_prices .price {
  color: var(--tp-gold) !important;
}
html[data-tp-mode="light"] .price,
html[data-tp-mode="light"] .product__price,
html[data-tp-mode="light"] .ruble,
html[data-tp-mode="light"] .product_prices .price { color: #9c7420 !important; }
/* Зачёркнутая старая цена — приглушённая */
.old-price, .product__old-price { color: #8a97a8 !important; }
/* Рейтинг и скидка */
.reviews__rating-fill { background: var(--tp-gold) !important; }
.circle-progress__rate { color: var(--tp-gold) !important; }
.js-product-discount { color: var(--tp-gold) !important; }
.cat-badge--discount { background: color-mix(in srgb, var(--tp-gold) 22%, transparent) !important; color: var(--tp-gold) !important; }
span.js-product-discount, .product .js-product-discount { color: var(--tp-gold) !important; }
/* Модалка «Купить в 1 клик»: крестик и submit-кнопка в тему */
.uk-modal-close-default { background: transparent !important; color: var(--tp-gold) !important; }
.uk-button-primary:not(.buy1click-open-button), input[type="submit"].uk-button {
  background: linear-gradient(135deg,#ffe9ad 0%,#eabb60 46%,#c8912e 100%) !important;
  color: #0a1d33 !important; border: 1px solid transparent !important; text-shadow: none !important;
  font: 600 15px/1.25 "Manrope", system-ui, sans-serif !important;
}
/* Убрать «в наличии» и «в корзину» (пока — будет прямой «купить») */
.Product-stock, .Product-grid_stock, .Product-grid_stock-sku-box,
.Product-stock_item, .Product-stock_item-high { display: none !important; }
.addtocart, .button.addtocart, .button.js-submit-form.addtocart { display: none !important; }
/* превью в категории: убрать наклейку скидки, звёзды-рейтинг и сердечко «в избранное» */
.Product-grid .badge.product-card_discounts,
.Product-grid .js-product-discount { display: none !important; }
.Product-grid .rating { display: none !important; }
.Product-grid .Product-grid_action,
.Product-grid .js-favorites-add.add-to-favorite { display: none !important; }
/* Превью фото карточки — крупнее и БЕЗ обрезки (разборы портретные) */
/* ОДНА карточка в строке — это инфографика, её видно целиком */
.cat--list.js-preview-products { display: flex; flex-direction: column; align-items: center; }
.cat--list .Product-grid { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; text-align: center; }
/* контейнеры фото — на всю ширину карточки (плагин превью-галереи по умолчанию узкий).
   ВНУТРЕННЮЮ раскладку/свайп плагина НЕ трогаем (overflow/white-space/position/display). */
.cat--list .product__box--image,
.cat--list .Product-grid_img.list-thumb-image,
.cat--list .Product-grid_img.list-thumb-image .list-thumb-image_wrap,
.cat--list .protilegallery_wrapper {
  width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 auto !important;
}
.cat--list .Product-grid_img.list-thumb-image { background: none; border-radius: 14px; }
/* тема-обёртка была absolute + height:100% (старый padding-hack) → контейнер схлопывался в 0.
   static + height:auto, чтобы высота галереи протолкнулась вверх. Это НЕ внутренность плагина. */
.cat--list .Product-grid_img.list-thumb-image,
.cat--list .Product-grid_img.list-thumb-image .list-thumb-image_wrap {
  position: static !important; height: auto !important; min-height: 0 !important;
}
/* галерея — квадрат по ширине карточки (было фикс. 200px), свайп сохраняется */
.cat--list .protilegallery_images { height: auto !important; aspect-ratio: 1 / 1 !important; line-height: 0 !important; }
/* СВАЙП НА ТЕЛЕФОНЕ (ptg-swipe.js): родной свайп плагина ронял фото на реальных
   телефонах. Наш скрипт делает контейнер НАТИВНОЙ scroll-snap лентой (.ptg2) —
   браузер сам обрабатывает свайп (без трансформов/пустых слоёв, макс. совместимость),
   JS лишь предзагружает фото и рисует точки. Плагину снимаем .PTGmobile — он глохнет.
   Тап по карточке = переход на товар (нативная прокрутка не мешает клику). */
/* БЕЗ прокрутки/трансформов: браузер Huawei не рисует картинку внутри
   overflow-x/трансформированного слоя. Показываем ОДНО фото через display
   (тот же путь, что у плагина точно отрисовывается), свайп переключает какое видно. */
.cat--list .protilegallery_images.ptg2 {
  position: relative; overflow: hidden;
  height: var(--ptg-h, auto) !important; aspect-ratio: auto !important; line-height: 0 !important;
}
.cat--list .protilegallery_images.ptg2 .protilegallery_image {
  display: none !important; width: 100% !important; height: 100% !important; margin: 0 !important;
}
.cat--list .protilegallery_images.ptg2 .protilegallery_image.ptg-active { display: block !important; }
/* точки — в обёртке галереи (position:relative у плагина), поверх ленты */
.cat--list .protilegallery_wrapper .ptg2-dots {
  position: absolute; left: 0; right: 0; bottom: 6px; z-index: 3;
  display: flex; justify-content: center; gap: 5px; line-height: 0; pointer-events: none;
}
.cat--list .protilegallery_wrapper .ptg2-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(60,45,20,.3);
  box-shadow: 0 0 2px rgba(255,255,255,.6); transition: background .2s, transform .2s;
}
.cat--list .protilegallery_wrapper .ptg2-dots span.on { background: #b0883e; transform: scale(1.3); }
.cat--list .protilegallery_image img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
/* убрать индикатор номеров картинок (сегменты-плитки и счётчик); свайп остаётся */
.dotted-img, .cat--list .protilegallery_tiles { display: none !important; }
.cat--list .protilegallery_images[data-now-image]::before { content: none !important; display: none !important; }
/* цена по центру карточки (в один столбец) */
.cat--list .Product-grid_prices { justify-content: center !important; }
/* Наименование товара: цвет по теме (--tp-text: светлая=тёмный навы, тёмная=кремовый —
   раньше был #333 и в тёмной теме сливался) + КРУПНЕЕ в обеих темах (было 14px). */
.cat--list .Product-grid_name,
.cat--list .Product-grid_name a {
  color: var(--tp-text) !important;
  font-size: clamp(17px, 5vw, 22px) !important;
  line-height: 1.25 !important;
}
/* Убрать селектор «Показывать по N» в категориях (владелец, 2026-08-08).
   Блок .products-pagination на витрине держит ТОЛЬКО этот селект — нумерации
   страниц нет (в категориях-сферах мало товаров). Прячем весь блок, чтобы не
   осталось пустой рамки/отступа. */
.cat-content .products-pagination { display: none !important; }

/* ── Описания .tgg/.tgm: заголовки шрифтом ПРОЕКТА (Cormorant) + вернуть
   задуманный дизайном СВЕТЛЫЙ цвет (моё общее правило .product_description h2/h3
   перебивало его на тёмный #6b4f1c — оттого «терялись»). Специфичность выше. ── */
.product_description .tgg__kicker, .product_description .tgg__title, .product_description .tgg__h, .product_description .tgg__num, .product_description .tgg__quote,
.product_description .tgm__kicker, .product_description .tgm__title, .product_description .tgm__h, .product_description .tgm__num, .product_description .tgm__quote {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  letter-spacing: -.005em !important;
}
.product_description .tgg__title, .product_description .tgg__h,
.product_description .tgm__title, .product_description .tgm__h { color: #f6efdd !important; }
.product_description .tgg__title, .product_description .tgm__title {
  text-shadow: 0 2px 16px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.6) !important;
}
/* Страница товара: убрать звёзды/«Оставить отзыв», верхнюю «Поделиться», «Выбрать статус», «В избранное» */
.product-top-actions .rating { display: none !important; }
.product_share { display: none !important; }
#open-status-modal { display: none !important; }
.product-top-actions .product_action-btn,
.product-top-actions .add-to-favorite { display: none !important; }

/* ── Страница товара: оставить только ФОТО + ЗАГОЛОВОК + ОПИСАНИЕ ──
   Скрываем крошки, всю коммерческую колонку (цена, кол-во, кнопки,
   нижние соц-иконки) и матрасные блоки (доставка/сертификат/кредит/размер). */
.breadcrumbs, .breadcrumbs--box { display: none !important; }
.product-cart--box { display: none !important; }
/* навигация вкладок (характеристики/отзывы) — прочь, оставляем описание */
.product_page .js-tabs, .product_page .tabs-nav, .product-tabs__nav, .tabs-titles { display: none !important; }

/* Описание — типографика под тему */
.tab-contents { max-width: 720px; margin: 0 auto; }
.product_description { font: 400 clamp(15px,3.9vw,17px)/1.62 "Manrope", system-ui, sans-serif; }
html[data-tp-mode="dark"] .product_description { color: #dbe3ee; }
html[data-tp-mode="light"] .product_description { color: #3a2e18; }
.product_description h2, .product_description h3 {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; letter-spacing: -.01em; line-height: 1.15;
}
.product_description h2 { font-size: clamp(23px,6.4vw,32px); margin: .2em 0 .45em; }
.product_description h3 { font-size: clamp(19px,5.2vw,23px); margin: 1.1em 0 .35em; }
html[data-tp-mode="dark"] .product_description h2, html[data-tp-mode="dark"] .product_description h3 { color: #f6e9c8; }
html[data-tp-mode="light"] .product_description h2, html[data-tp-mode="light"] .product_description h3 { color: #6b4f1c; }
.product_description p { margin: .6em 0; }
.product_description strong { color: var(--tp-gold); font-weight: 600; }
.product_description ul { list-style: none; padding-left: 0; margin: .6em 0; }
.product_description li { position: relative; padding-left: 1.6em; margin: .5em 0; }
.product_description li::before { content: "✦"; position: absolute; left: .2em; top: .05em; color: var(--tp-gold); font-size: .82em; }
/* убрать теги и блок «просмотренные/похожие товары» */
.product_tags, .product_tags-cats { display: none !important; }
[class*="product_cross"] { display: none !important; }
/* убрать вкладки «Обзор/Отзывы»: описание раскрыто по умолчанию, отзывы скрыты */
/* десктоп-вкладки */
ul.tabs.js-tabs { display: none !important; }
.tab-contents .tab-content_el.product_description { display: block !important; }
.tab-contents .tab-content_el:not(.product_description) { display: none !important; }
/* мобильный аккордеон (заголовки «Обзор»/«Отзывы» + контент отзывов) */
.tab-acc-wrap .acc-tabs-el { display: none !important; }
#product-description.acc-tab-content_item { display: block !important; }
#product-reviews.acc-tab-content_item, .product_reviews.js-acc-tab-content { display: none !important; }
/* индивидуальный размер: каждый глиф заполняет ~80% круга (радиус контента разный) */
.tp-eco__sphere:nth-child(1) .tp-eco__ico svg { width: 146%; height: 146%; }  /* Деньги */
.tp-eco__sphere:nth-child(2) .tp-eco__ico svg { width: 114%; height: 114%; }  /* Любовь (самый широкий) */
.tp-eco__sphere:nth-child(3) .tp-eco__ico svg { width: 167%; height: 167%; }  /* Здоровье (лотос — компактнее) */
.tp-eco__sphere:nth-child(4) .tp-eco__ico svg { width: 125%; height: 125%; }  /* Профориентация */
.tp-eco__sphere:nth-child(5) .tp-eco__ico svg { width: 146%; height: 146%; }  /* Психологическое */
.tp-eco__sphere:nth-child(6) .tp-eco__ico svg { width: 125%; height: 125%; }  /* Познание */
.tp-eco__sphere:nth-child(7) .tp-eco__ico svg { width: 119%; height: 119%; }  /* Перемены */
.tp-eco__sphere:nth-child(8) .tp-eco__ico svg { width: 71%; height: 71%; }  /* Семья (вектор-трейс, viewBox 180, широкая) */



.tp-eco__name {
  width: 100%; box-sizing: border-box; text-align: center;
  white-space: normal;              /* сброс унаследованного nowrap — иначе длинные названия не переносились и вылезали за карточку */
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600;
  font-size: clamp(16px,5.2vw,22px); line-height: 1.16; letter-spacing: -.01em; overflow-wrap: break-word;
}
html[data-tp-mode="light"] .tp-eco__name { color: #35270f; }
html[data-tp-mode="dark"]  .tp-eco__name { color: #f6e9c8; }

/* разделитель между входами */
.tp-eco__div { display: flex; align-items: center; justify-content: center; gap: 12px; margin: clamp(22px,5.5vw,34px) 6px clamp(2px,1vw,6px); }
.tp-eco__div b { display: block; flex: 1 1 auto; max-width: 120px; height: 1px; background: linear-gradient(to right, transparent, color-mix(in srgb, var(--tp-gold) 55%, transparent), transparent); }
.tp-eco__div i { font-style: normal; font-size: 12px; color: var(--tp-gold); opacity: .85; }

/* методы — та же «золотая печать», что и у сфер, но компактным чипом
   (мини-медальон + подпись). Единая концепция: поверхность карточки,
   золотая рамка, направленная тень (без свечения), градиент-золото на иконке. */
.tp-eco__methods { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px,2.2vw,11px); }
.tp-eco__method {
  display: inline-flex; align-items: center; gap: clamp(3px,0.9vw,4px); cursor: pointer; font: inherit; color: inherit;
  padding: clamp(9px,2.4vw,11px) clamp(15px,3.6vw,18px);
  border: 1px solid transparent; border-radius: 999px;
  position: relative; isolation: isolate; min-width: 0;
  height: auto; line-height: normal;      /* перебиваем Free-тему button{height:230px} */
  text-decoration: none;                  /* теперь это <a> — ссылка на категорию-метод */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
html[data-tp-mode="light"] .tp-eco__method {
  background: linear-gradient(160deg, #fbf4e7 0%, #f2e6d2 100%);
  border-color: color-mix(in srgb, #b0883e 34%, transparent);
  box-shadow: -4px 5px 7px rgba(120,85,35,.16), -1px 1px 2px rgba(120,85,35,.1), inset 0 1px 0 rgba(255,255,255,.5);
}
html[data-tp-mode="dark"] .tp-eco__method {
  background:
    radial-gradient(120% 130% at 50% -30%, rgba(74,116,168,.22) 0%, rgba(74,116,168,0) 62%),
    linear-gradient(158deg, #10273f 0%, #0a1d33 60%, #06152a 100%);
  border-color: color-mix(in srgb, #e9b95d 24%, transparent);
  box-shadow: -4px 5px 8px rgba(0,0,0,.4), -1px 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
}
.tp-eco__method:hover { transform: translateY(-2px); }
html[data-tp-mode="light"] .tp-eco__method:hover { border-color: color-mix(in srgb, #b0883e 60%, transparent); box-shadow: 0 9px 18px rgba(120,85,35,.18); }
html[data-tp-mode="dark"]  .tp-eco__method:hover { border-color: color-mix(in srgb, #e9b95d 55%, transparent); box-shadow: 0 10px 20px rgba(0,0,0,.5); }

/* иконка без оправы — просто золото-градиент (кружки-медальоны убраны) */
.tp-eco__method i { flex: none; display: inline-flex; color: var(--tp-gold); }
.tp-eco__method i svg { width: clamp(30px,8.5vw,34px); height: clamp(30px,8.5vw,34px); display: block; }
html[data-tp-mode="light"] .tp-eco__method i svg * { stroke: url(#tpGoldLt); }
html[data-tp-mode="dark"]  .tp-eco__method i svg * { stroke: url(#tpGoldDk); }
html[data-tp-mode="light"] .tp-eco__method i svg { filter: drop-shadow(0 1px .5px rgba(90,60,12,.5)); }
html[data-tp-mode="dark"]  .tp-eco__method i svg { filter: drop-shadow(0 1px .5px rgba(0,0,0,.5)); }
/* цифры-акценты внутри иконок (нумерология) — тонким КОНТУРОМ (как остальные иконки),
   а не заливкой; цвет-градиент берётся из общего правила .tp-eco__method i svg * */
.tp-eco__method i svg text { fill: none; stroke-width: .9; }
/* подпись — тот же шрифт, что у названий сфер (Cormorant Garamond);
   white-space:normal сбрасывает унаследованный nowrap, иначе текст вылезает */
.tp-eco__method span {
  min-width: 0; text-align: center; white-space: normal;   /* перенос по пробелам, но НЕ посреди слова */
  font: 600 clamp(15px,4.4vw,17.5px)/1.14 "Cormorant Garamond", Georgia, serif; letter-spacing: -.01em;
}
html[data-tp-mode="light"] .tp-eco__method span { color: #35270f; }
html[data-tp-mode="dark"]  .tp-eco__method span { color: #f6e9c8; }
/* ступенчатая подпись из 2 слов: первое — слева, второе — справа */
.tp-eco__method .tp-m-stag { display: inline-flex; flex-direction: column; }
.tp-eco__method .tp-m-stag > span:first-child { align-self: flex-start; }
.tp-eco__method .tp-m-stag > span:last-child  { align-self: flex-end; }

/* мобильный: методы — сетка 2 в ряд (как сферы), последний чип один по центру.
   Чипы тянутся на всю колонку → выравниваем содержимое по центру. */
@media (max-width: 619.98px) {
  .tp-eco__methods { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  /* одинаковая «толщина» всех пилюль: высота под 2 строки, контент по центру */
  .tp-eco__method { justify-content: center; min-height: clamp(45px,12.6vw,52px); padding: clamp(5px,1.5vw,8px) clamp(8px,2.4vw,12px); }
  .tp-eco__method:last-child { grid-column: 1 / -1; justify-self: center; width: max-content; padding-inline: clamp(16px,4.6vw,20px); }
}

/* ⏸ ВРЕМЕННО СКРЫТО (до допиливания завтра): все экраны ПОСЛЕ нового 3-го (#eco).
   .tp-field оборачивает #napravleniya/#tiers/#kak-rabotaet/#method; .tp-final отдельно.
   Вернуть — удалить это правило. */
.tp-field, .tp-final { display: none !important; }

/* ==== ТВОЙ ПУТЬ: скругление фото на странице ТОВАРА, как в категории (2026-08-11) ==== */
.product_gallery-images-main-el { border-radius: 14px !important; overflow: hidden !important; }
.product_gallery-images-main-el img,
.product_gallery-images-main-el .product_gallery-images-main-el-img { border-radius: 14px !important; }
.product_gallery-images-main-el-outer { border-radius: 14px !important; }
/* превью-миниатюры под главным фото — скругление (по просьбе владельца) */
.image-preview,
.image-preview > a,
.image-preview img { border-radius: 10px !important; overflow: hidden !important; }

/* убрать БЕЛУЮ подложку галереи, которая просвечивает на скруглённых углах фото */
.product_gallery-images,
.product_gallery-images-main,
.product_gallery-images-main .owl-stage-outer,
.product_gallery-images-main .owl-stage,
.product_gallery-images-main .owl-item,
.product_gallery-images-main-el-outer,
.product_gallery-images-main-el { background: transparent !important; }
/* и клипаем обёртку слайда со скруглением, чтобы подложке негде было вылезти */
.product_gallery-images-main-el-outer,
.product_gallery-images-main .owl-item { border-radius: 14px !important; overflow: hidden !important; }


/* ==== ТВОЙ ПУТЬ: КНОПКА «НАВЕРХ» (2026-08-19) ====
   Штатная разметка Free (#move-to-top / .btn-top) на сайте была нерабочей:
   показывающий её JS никогда не был подключён, поэтому кнопка всегда стояла
   display:none — при скролле ничего не появлялось. Ниже: (1) переодеваем
   кружок в фирменный стиль — та же палитра, что у .tp-cta (var(--tp-btn-bg)/
   --tp-btn-text/--tp-gold-light), просто стрелка без подписи; (2) видимость
   переключаем СВОИМ классом .is-visible через opacity/visibility, а не через
   display — иначе конфликтует с базовым display:none из Free. Логика показа
   и клика — в index.html рядом с разметкой кнопки. */
.btn-top {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: calc(24px + env(safe-area-inset-bottom));
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  background: var(--tp-btn-bg);
  border: 1px solid color-mix(in srgb, var(--tp-gold-light) 70%, transparent);
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .4);
  z-index: 45;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, box-shadow .25s ease, filter .25s ease;
  cursor: pointer;
}
.btn-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.btn-top:hover { filter: brightness(1.06); box-shadow: 0 18px 38px -10px rgba(0, 0, 0, .3), 0 0 20px rgba(233, 185, 93, .18); }
.btn-top:active { transform: scale(.94); }
.btn-top:focus-visible { outline: 2px solid var(--tp-gold-bright); outline-offset: 2px; }
html[data-tp-mode="dark"] .btn-top { border-color: transparent; }
.btn-top #svgSrollToTop { width: 18px; height: auto; display: block; }
.btn-top .st0 { stroke: var(--tp-btn-text) !important; }
@media (max-width: 640px) {
  .btn-top { width: 44px; height: 44px; right: max(14px, env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); }
  .btn-top #svgSrollToTop { width: 16px; }
}

/* ==== ТВОЙ ПУТЬ: мобильная шапка ВНИЗ, только карточка товара (2026-08-11) ==== */
@media (max-width: 767px){
  html.tp-product .tp-hdr{ top:auto !important; bottom:0 !important; box-shadow:0 -8px 24px rgba(0,0,0,.28) !important; }
  html.tp-product body{ padding-top:0 !important; padding-bottom:112px !important; }
  html.tp-product .btn-top{ bottom:124px !important; }
}

/* убрать заголовок товара на странице товара — инфографика самодостаточна (2026-08-11) */
h1.product_name { display: none !important; }

/* убрать белую черточку над фото товара — пустой блок верхних действий с border-bottom (2026-08-11) */
.product-top-actions { display: none !important; }


/* ============================================================================
   ЛИЧНЫЙ КАБИНЕТ (2026-08-13) — перекраска Webasyst-аккаунта в дизайн твой-путь.
   Только CSS. Целится в стабильные классы Webasyst (.my-page/.Login/.wa-*/.Orders*)
   + свой хук .tp-cab__nav-wrap (обёртка меню в shop main.html).
   Фаза 1: вход, восстановление пароля, профиль (Мои данные), заказы (Мои разборы), меню.
   ============================================================================ */

/* ---- контейнер области кабинета ------------------------------------------ */
.my-page{
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(14px,3.4vw,26px) 16px clamp(40px,8vh,74px);
  box-sizing: border-box;
}
/* узкий центр только для форм входа/профиля; заказы могут быть шире */
.my-page .Login,
.my-page .My__Page--Profile{ max-width: 440px; margin: 0 auto; }

/* ---- карточка-панель (вход, профиль) ------------------------------------- */
.my-page .Login__Box{
  background: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: 18px;
  padding: clamp(22px,5vw,36px) clamp(20px,5vw,34px);
  box-shadow: 0 20px 52px -26px rgba(11,35,64,.42), inset 0 1px 0 rgba(255,255,255,.55);
}
html[data-tp-mode="dark"] .my-page .Login__Box{
  box-shadow: 0 20px 52px -22px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ---- заголовки ------------------------------------------------------------ */
.my-page .Title__Main{
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(27px,6.2vw,35px);
  line-height: 1.12;
  color: var(--tp-text);
  text-align: center;
  border: 0 !important;         /* глушим -With-Border подчёркивание темы */
  padding: 0 !important;
  margin: 0 0 .55em;
}
.my-page .Title__Main::after{      /* флориш ✦ как на сайте */
  content: "✦";
  display: block;
  color: var(--tp-gold);
  font-size: .42em;
  line-height: 1;
  margin: .35em auto 0;
  opacity: .9;
}

/* ---- поля ввода ----------------------------------------------------------- */
.my-page .wa-name{
  font: 500 13px/1.4 'Manrope', sans-serif;
  color: var(--tp-muted);
  margin: 0 0 6px;
}
.my-page .wa-field{ margin: 0 0 clamp(12px,2.4vw,16px); }
.my-page input[type=text],
.my-page input[type=email],
.my-page input[type=password],
.my-page input[type=tel],
.my-page input[type=number],
.my-page input[type=date],
.my-page select,
.my-page textarea{
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--tp-bg) !important;
  border: 1px solid var(--tp-border) !important;
  border-radius: 11px !important;
  padding: 12px 14px !important;
  font: 400 15px 'Manrope', sans-serif !important;
  color: var(--tp-text) !important;
  box-shadow: none !important;
  transition: border-color .18s, box-shadow .18s;
}
.my-page input:focus,
.my-page select:focus,
.my-page textarea:focus{
  border-color: var(--tp-gold-bright) !important;
  box-shadow: 0 0 0 3px rgba(201,163,91,.20) !important;
  outline: none !important;
}
.my-page input::placeholder{ color: var(--tp-muted); opacity: .7; }

/* ---- кнопки: главная (Войти/Сохранить) ----------------------------------- */
.my-page .wa-login-submit,
.my-page .wa-form input[type=submit],
.my-page form[id*="edit"] input[type=submit]{
  -webkit-appearance: none !important; appearance: none !important;
  display: block; width: 100%;
  height: auto !important; min-height: 0 !important; line-height: 1.2 !important;
  margin: 4px 0 0 !important;
  background: var(--tp-btn-bg) !important;
  color: var(--tp-btn-text) !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 13px 20px !important;
  font: 600 15px 'Manrope', sans-serif !important;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 12px 26px -14px rgba(11,43,76,.6);
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.my-page .wa-login-submit:hover,
.my-page .wa-form input[type=submit]:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.my-page .wa-login-submit:active,
.my-page .wa-form input[type=submit]:active{ transform: translateY(0); }

/* кнопка «Изменить» на профиле — вторичная (контур) */
.my-page #wa-my-info-edit.button{
  -webkit-appearance: none !important; appearance: none !important;
  height: auto !important; min-height: 0 !important; line-height: 1.2 !important;
  width: auto !important; display: inline-block;
  background: transparent !important;
  color: var(--tp-gold-bright) !important;
  border: 1px solid var(--tp-border) !important;
  border-radius: 11px !important;
  padding: 10px 22px !important;
  font: 600 14px 'Manrope', sans-serif !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.my-page #wa-my-info-edit.button:hover{
  border-color: var(--tp-gold-bright) !important;
  background: rgba(201,163,91,.08) !important;
}

/* ---- ссылки в формах ------------------------------------------------------ */
.my-page .wa-signup-url a,
.my-page .wa-login-forgotpassword-url,
.my-page .wa-edit-login-link,
.my-page #wa-my-info-cancel,
.my-page #page a{
  color: var(--tp-gold-bright);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .18s;
}
.my-page .wa-signup-url a:hover,
.my-page .wa-login-forgotpassword-url:hover,
.my-page #page a:hover{ border-bottom-color: var(--tp-gold-bright); }
.my-page .wa-signup-url,
.my-page .wa-login-form-actions{ text-align: center; }
.my-page .wa-signup-url{ margin-top: 14px; font-size: 14px; color: var(--tp-muted); }

/* сообщения/ошибки */
.my-page .My__Info.-Success,
.my-page .wa-info-messages:not(:empty){
  background: rgba(201,163,91,.12);
  border: 1px solid var(--tp-border);
  border-radius: 11px;
  padding: 11px 14px;
  color: var(--tp-text);
  font: 500 14px 'Manrope', sans-serif;
  margin: 0 0 16px;
}
.my-page .wa-error-msg,
.my-page .errormsg{ color: #c0392b; font-size: 13px; margin-top: 5px; }
html[data-tp-mode="dark"] .my-page .wa-error-msg,
html[data-tp-mode="dark"] .my-page .errormsg{ color: #ff9a8a; }

/* ---- профиль: read-view поля --------------------------------------------- */
.my-page #wa-my-info-read-wrapper .wa-field{
  display: flex; justify-content: space-between; gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--tp-border);
  margin: 0;
}
.my-page #wa-my-info-read-wrapper .wa-field:last-child{ border-bottom: 0; }
.my-page #wa-my-info-read-wrapper .wa-name{ margin: 0; }
.my-page #wa-my-info-read-wrapper .wa-value{
  color: var(--tp-text); font: 500 15px 'Manrope', sans-serif; text-align: right;
  /* ⚠️ На узких экранах почта вылезала за карточку (владелец, 2026-09-01, 305px).
     .wa-field — флекс-строка, а у флекс-элемента min-width:auto: он НЕ сжимается
     уже своего самого длинного слова. «ermakova_m@matras-krovat.ru» — одно слово
     без пробелов, вот строка и распирала контейнер.
     min-width:0 разрешает сжатие, overflow-wrap:anywhere разрешает перенос ВНУТРИ
     слова (обычный break-word здесь не спасает: он не рвёт длинные токены с @ и
     дефисами так, как нужно). Тот же капкан, что с grid: 1fr → minmax(0,1fr). */
  min-width: 0;
  overflow-wrap: anywhere;
}
/* подпись поля тоже не должна распирать строку */
.my-page #wa-my-info-read-wrapper .wa-name{ min-width: 0; overflow-wrap: anywhere; }
.my-page #wa-my-info-read-wrapper .wa-field:last-child{ justify-content: flex-start; padding-top: 18px; }

/* ⚠️⚠️ ПОЧТА И ТЕЛЕФОН В ПРОФИЛЕ — ЭТО ССЫЛКИ, А НЕ ТЕКСТ (владелец, 2026-09-01:
   «ну и что с цветом текста то? Где почта и телефон»).
   Webasyst рендерит эти два поля как `<a class="inline" href="mailto:…">` и
   `href="tel:…">` (waContactEmailField / waContactPhoneField), остальные значения
   — простым текстом. Цвет с `.wa-value` до ссылки не доходит: у `a` своё правило
   в общей теме Free. Замер на боевой: значение — rgb(245,240,229), а ссылка —
   rgb(51,51,51) на фоне rgb(4,19,38), контраст ~1.4:1, то есть не видно вообще.
   Наследуем цвет значения; ховер — золотом, как везде на сайте. */
.my-page .wa-value a,
.my-page #wa-my-info-read-wrapper .wa-value a.inline{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.my-page .wa-value a:hover,
.my-page #wa-my-info-read-wrapper .wa-value a.inline:hover{
  color: var(--tp-gold-bright);
  border-bottom-color: var(--tp-gold-bright);
}

/* oauth-адаптеры */
.my-page .My__OAuth--Title{
  font: 500 13px 'Manrope', sans-serif; color: var(--tp-muted);
  margin: 20px 0 10px; text-align: center;
}
.my-page .My__OAuth--List{ display: flex; gap: 10px; justify-content: center; padding: 0; list-style: none; }
.my-page .My__OAuth--Img{ width: 34px; height: 34px; border-radius: 9px; }

/* ============================================================================
   МЕНЮ КАБИНЕТА (таб-бар) — обёртка .tp-cab__nav-wrap вокруг {$wa->myNav}
   ============================================================================ */
.tp-cab__nav-wrap{ max-width: 560px; margin: clamp(10px,2.6vw,18px) auto 0; padding: 0 16px; box-sizing: border-box; }
.tp-cab__nav-wrap ul{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.tp-cab__nav-wrap li{ margin: 0; }
.tp-cab__nav-wrap li::before{ content: none !important; display: none !important; }
.tp-cab__nav-wrap a{
  display: block; padding: 9px 17px;
  border-radius: 999px;
  font: 600 13.5px 'Manrope', sans-serif;
  text-decoration: none;
  color: var(--tp-muted);
  background: var(--tp-surface);
  border: 1px solid var(--tp-border);
  transition: color .18s, border-color .18s, background .18s;
}
.tp-cab__nav-wrap a:hover{ color: var(--tp-gold-bright); border-color: var(--tp-gold-bright); }
.tp-cab__nav-wrap a.selected{
  background: var(--tp-btn-bg); color: var(--tp-btn-text) !important;
  border-color: transparent;
  box-shadow: 0 10px 22px -14px rgba(11,43,76,.6);
}

/* ============================================================================
   МОИ РАЗБОРЫ (список заказов) — .Orders__*
   ============================================================================ */
.my-page .Orders__List{ display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.my-page .Orders__Item{
  background: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 14px 40px -28px rgba(11,35,64,.4);
  display: flex; flex-direction: column; gap: 12px;
}
.my-page .Orders__Status{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.my-page .Orders__Link{
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600; font-size: 21px;
  color: var(--tp-gold-bright) !important;
  text-decoration: none;
}
.my-page .Orders__Badge{
  background: var(--tp-bg-alt) !important;
  color: var(--tp-text) !important;
  border: 1px solid var(--tp-border);
  border-radius: 999px;
  padding: 4px 12px;
  font: 600 12px 'Manrope', sans-serif !important;
  letter-spacing: .01em;
}
.my-page .Orders__Badge.-Paid,
.my-page .Orders__Badge.-Processing{
  background: rgba(201,163,91,.16) !important;
  color: var(--tp-gold-bright) !important;
  border-color: var(--tp-gold-bright);
}
.my-page .Orders__Box--Info{ display: flex; gap: 8px; align-items: baseline; }
.my-page .Orders__Title--H3{
  font: 600 12px 'Manrope', sans-serif; color: var(--tp-muted);
  text-transform: uppercase; letter-spacing: .04em; margin: 0;
}
.my-page .Orders__Text--Method{ color: var(--tp-text); margin: 0; font-size: 14px; }
.my-page .Orders__Resume{ border-top: 1px solid var(--tp-border); padding-top: 10px; }
.my-page .Orders__Box--Single{ margin: 5px 0; }
.my-page .Orders__Link--Single{ color: var(--tp-text) !important; text-decoration: none; }
.my-page .Orders__Link--Single:hover{ color: var(--tp-gold-bright) !important; }
.my-page .Orders__Link--Single span{ color: var(--tp-muted); }

/* пустое состояние */
.my-page .Orders__List{ color: var(--tp-muted); }

/* ---- восстановление пароля (#page) --------------------------------------- */
.my-page #page,
#page.js-ajax-form{ max-width: 440px; margin: 0 auto; }
.my-page #page h1{
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
  font-size: clamp(24px,5.6vw,31px); color: var(--tp-text); text-align: center; margin: 0 0 .7em;
}

/* ЛК-фикс (2026-08-13): контейнер кабинета — bare .my-page-правило выпало при append, дублирую в конце */
.my-page{ max-width: 560px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; padding-bottom: clamp(40px,8vh,74px); padding-top: clamp(14px,3.4vw,26px); box-sizing: border-box; }

/* ЛК: пункт «Личный кабинет / Войти» и «Выйти» в бургер-меню (2026-08-13) */
.tp-menu__link--account{ color: var(--tp-gold-bright); }
.tp-menu__link--account:hover,
.tp-menu__link--account:focus-visible{ color: var(--tp-gold-bright); }
.tp-menu__acc-ico{ display: flex; align-items: center; justify-content: center; color: var(--tp-gold-bright); }
.tp-menu__acc-ico svg{ width: 27px; height: 27px; }
.tp-menu__link--logout{ font-size: 16px; color: var(--tp-muted); border-bottom: 0; }
.tp-menu__link--logout span{ font-size: 17px; color: var(--tp-muted); }
.tp-menu__link--logout:hover,
.tp-menu__link--logout:focus-visible{ color: var(--tp-gold-bright); }

/* ЛК (2026-08-13): перебиваем teal Free-темы (.pages .shop a.selected) в меню-табе кабинета.
   Специфичность .tp-cab__nav-wrap ul li a.selected (0,3,3) + !important гарантированно бьёт Free. */
.tp-cab__nav-wrap ul li a{ background: var(--tp-surface) !important; color: var(--tp-muted) !important; border: 1px solid var(--tp-border) !important; border-radius: 999px !important; }
.tp-cab__nav-wrap ul li a:hover,
.tp-cab__nav-wrap ul li a:focus-visible{ color: var(--tp-gold-bright) !important; border-color: var(--tp-gold-bright) !important; }
.tp-cab__nav-wrap ul li a.selected{ background: var(--tp-btn-bg) !important; color: var(--tp-btn-text) !important; border-color: transparent !important; box-shadow: 0 10px 22px -14px rgba(11,43,76,.6) !important; }

/* ЛК: «Выйти» отдельной приглушённой ссылкой внизу кабинета, с разделителем (2026-08-13) */
.tp-cab__logout{ max-width:560px; margin:26px auto 0; padding:20px 16px 0; text-align:center; box-sizing:border-box; border-top:1px solid var(--tp-border); }
.tp-cab__logout a{ display:inline-block; color:var(--tp-muted); font:600 14px 'Manrope',sans-serif; text-decoration:none; padding:9px 22px; border-radius:999px; border:1px solid transparent; transition:color .18s, border-color .18s, background .18s; }
.tp-cab__logout a:hover,.tp-cab__logout a:focus-visible{ color:var(--tp-gold-bright); border-color:var(--tp-border); background:rgba(201,163,91,.06); }

/* ЛК: ЖЁСТКО в одну строку — пилюли профиль+заказы (перебиваем Free .pages li) (2026-08-13) */
.tp-cab__nav-wrap > ul,
.tp-cab__nav-wrap > ul.pages{
  display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
  gap:10px !important; justify-content:center !important; align-items:center !important;
  width:100% !important; box-sizing:border-box;
  list-style:none !important; margin:0 !important; padding:0 !important;
}
.tp-cab__nav-wrap > ul > li,
.tp-cab__nav-wrap > ul.pages > li{
  display:inline-flex !important; width:auto !important; max-width:none !important;
  flex:0 0 auto !important; margin:0 !important; padding:0 !important; float:none !important;
}
.tp-cab__nav-wrap > ul > li > a{ margin:0 !important; }

/* Галерея товара: рамка ВЫБРАННОЙ миниатюры под тему (было красное #ff210c Free) (2026-08-13) */
html[data-tp-mode="light"] .image-preview.selected,
html[data-tp-mode="light"] .image-preview.selected:not(.image-preview--video),
html[data-tp-mode="light"] .image-preview.selected.image-preview--video{ border-color:#0b2b4c !important; }
html[data-tp-mode="dark"] .image-preview.selected,
html[data-tp-mode="dark"] .image-preview.selected:not(.image-preview--video),
html[data-tp-mode="dark"] .image-preview.selected.image-preview--video{ border-color:#e9b95d !important; }

/* ЛК: 2 пилюли (профиль+заказы) — равными половинами в ОДНУ строку на любой ширине,
   включая 305px (телефон заказчика). flex 50/50 + nowrap = гарантированно один ряд (2026-08-13) */
.tp-cab__nav-wrap > ul{ flex-wrap:nowrap !important; gap:8px !important; max-width:440px; margin-left:auto !important; margin-right:auto !important; }
.tp-cab__nav-wrap > ul > li{ flex:1 1 0 !important; min-width:0 !important; }
.tp-cab__nav-wrap > ul > li > a{ display:block !important; width:100% !important; text-align:center !important; white-space:nowrap !important; box-sizing:border-box !important; padding-left:10px !important; padding-right:10px !important; }

/* Карточка товара: показать хлебные крошки (глобально скрыты выше) — путь назад к категории (2026-08-13).
   Только на странице товара html.tp-product; перебиваем display:none !important нашей же строки. */
html.tp-product .breadcrumbs--box{ display:block !important; max-width:900px; margin:0 auto; padding:16px 18px 2px; box-sizing:border-box; }
html.tp-product .breadcrumbs{
  display:flex !important; flex-wrap:wrap; align-items:center; gap:3px 7px;
  list-style:none; margin:0 !important; padding:0 !important;
  font-family:'Manrope',system-ui,sans-serif; font-size:13px; line-height:1.4;
}
html.tp-product .breadcrumbs > li{ display:inline-flex !important; align-items:center; gap:7px; margin:0 !important; white-space:nowrap; }
html.tp-product .breadcrumbs > li span[itemprop="name"]{ color:var(--tp-muted); }
html.tp-product .breadcrumbs a{ color:var(--tp-gold-bright); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .18s; }
html.tp-product .breadcrumbs a span[itemprop="name"]{ color:var(--tp-gold-bright); }
html.tp-product .breadcrumbs a:hover{ border-bottom-color:var(--tp-gold-bright); }
html.tp-product .breadcrumbs .rarr{ color:var(--tp-muted); opacity:.55; }
html.tp-product .breadcrumbs > li:last-child span[itemprop="name"]{ color:var(--tp-muted); }

/* Карточка товара: ссылка «← Назад» (на страницу, откуда пришли) (2026-08-13) */
html.tp-product .breadcrumbs--box .tp-back{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--tp-gold-bright); font:600 14px 'Manrope',system-ui,sans-serif;
  text-decoration:none; border-bottom:1px solid transparent; transition:border-color .18s;
}
html.tp-product .breadcrumbs--box .tp-back:hover{ border-bottom-color:var(--tp-gold-bright); }


/* ============================================================================
   ДЕСКТОП-ПРАВКИ (2026-08-14): категория (превью) + карточка товара (галерея/описание)
   ============================================================================ */

/* 1. КАТЕГОРИЯ: превью товаров нормального размера (были растянуты на всю ширину,
   т.к. в сфере мало товаров и плитка распирала контейнер). */
@media (min-width: 768px){
  .js-preview-products.products-tile{ display:flex; flex-wrap:wrap; gap:26px; justify-content:flex-start; align-items:flex-start; }
  .js-preview-products.products-tile > .Product-grid{ width:270px !important; max-width:270px !important; flex:0 0 270px !important; }
  .js-preview-products.products-tile .Product-grid_img.list-thumb-image,
  .js-preview-products.products-tile .product__box--image{ width:100% !important; }
}


/* ============================================================================
   КАТЕГОРИЯ (2026-08-14): плитка вместо списка + скрыть теги.
   (Матрас-категории убираются в sidebar.cat.html фильтром id>=1575.)
   ============================================================================ */
/* товары плиткой (ряд с переносом), а не в столбик — десктоп */
@media (min-width: 768px){
  .js-preview-products.products-tile{ flex-direction: row !important; }
}
/* убрать блок тегов в сайдбаре (не нужен на твой-путь) */
.tags--sidebar,
.sb-wrap.tags,
.js-tags.tags--sidebar{ display: none !important; }

/* Карточка товара v2 (2026-08-14): тарифы не обрезаются (minmax(0,1fr) вместо 1fr),
   убрано сужение .hio до 640 (тарифы не влезали), весь контент карточки -20% через zoom.
   Только десктоп ≥980, мобильный не трогаем. */
@media (min-width: 980px){
  html.tp-product .hio .hio__tierlist{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Категория: не обрезать название товара в плитке (Free ставил .Product-grid_name{height:2.7rem;overflow:hidden}) (2026-08-14) */
@media (min-width:768px){
  .js-preview-products.products-tile .Product-grid_name{ height:auto !important; max-height:none !important; overflow:visible !important; line-height:1.25 !important; }
}

/* ЭКРАН ПОКУПКИ v2 (2026-08-24): галерея 520px в паспарту слева + колонка покупки
   (имя + питч + тарифы в ряд + широкая кнопка + гарантии, всё собирает JS в
   .hio__tiers--top, см. tgm-desc.js buildTopBlock/buildBuyHead) справа — вместо
   центрированной галереи и тарифов отдельным рядом ниже (было до v502).
   .product-page_main-right (штатная форма покупки) по-прежнему скрыта — покупка
   идёт через .hio__order/.hio__tiers--top, как и раньше. Только десктоп ≥980. */
@media (min-width: 980px){
  html.tp-product .product-page_main-right{ display: none !important; }
  html.tp-product .product-page_main{
    display: grid !important;
    /* 50/50, но с пределом ширины ряда: на 1920 «честная половина» дала бы по 950px —
       обложка-гигант и кнопка через пол-экрана. Предел 1200 + центрирование = пропорции
       держатся одинаково на 1366 и 1920. Вторая колонка не уже 500px, иначе на 980
       три карточки тарифа схлопываются в нечитаемые столбики. */
    grid-template-columns: minmax(0, 1fr) minmax(470px, 1fr) !important;
    column-gap: 42px !important; row-gap: 0 !important; align-items: start !important;
    justify-content: normal !important;
    max-width: 1085px !important; margin-left: auto !important; margin-right: auto !important;
  }

  /* Крошки: правило от 13.08 центрирует их в колонке 900px (`max-width:900px;margin:0 auto`) —
     тогда контент карточки и был узкой колонкой. Теперь контент во всю ширину (1331px на 1366),
     и коробка 900px повисала по центру — выглядело как «уехавшая вправо». Выравниваем по левому краю
     контента, ровно над лентой миниатюр. На мобильном прежнее центрирование не трогаем. */
  html.tp-product .breadcrumbs--box{ max-width: 1085px !important; margin: 0 auto !important; padding: 2px 0 0 !important; }

  /* галерея — паспарту в тон карточки .hio (та же кремовая/навы плашка).
     ⚠️⚠️ КАПКАН (поймано 2026-08-24, стоило двух заходов и обрезанной обложки на
     боевом): `.product-page_main-left` — это flex-РЯД (`flex-direction:row`) с
     `overflow:hidden`, где ПЕРВЫЙ ребёнок — вертикальная лента миниатюр
     `.previews_gallery` (69px), а вторым идёт сама галерея. `width:100%` на
     галерее = 100% ВСЕЙ ячейки (520px), т.е. она начиналась после ленты и
     вылезала за правый край ровно на ширину ленты — а `overflow:hidden` ячейки
     её там же и срезал. Симптом: обложка обрезана справа, причём на карточках с
     ОДНИМ фото лента уже, и обрезка почти незаметна.
     Лечение — колонка: обложка сверху, миниатюры ПОД ней в строку (так и было
     в согласованном макете, п.06 предложения). */
  html.tp-product .product-page_main-left{
    flex: none !important; width: 100% !important; max-width: none !important;
    display: flex !important; flex-direction: row !important; align-items: flex-start !important;
    gap: 10px !important; overflow: visible !important;
  }
  /* лента миниатюр — вертикально СЛЕВА от обложки (как на маркетплейсах) */
  html.tp-product .product-page_main-left .previews_gallery{
    order: 1 !important; flex: 0 0 56px !important; width: 56px !important; height: auto !important; margin: 0 !important;
  }
  /* ⚠️ Обложка занимает ОСТАТОК строки через flex, а НЕ `width:100%`: 100% считается
     от всей ячейки (не от свободного места), из-за чего она вылезала за правый край
     ровно на ширину ленты и срезалась `overflow:hidden` ячейки. `min-width:0` —
     чтобы флекс-элементу было разрешено сжиматься ниже своего content-size. */
  html.tp-product .product-page_main-left .product_gallery-images{
    order: 2 !important; flex: 1 1 auto !important; min-width: 0 !important; width: auto !important;
    height: auto !important; aspect-ratio: 1 / 1 !important;
  }
  /* Паспарту вокруг обложки убрано по просьбе владельца (2026-08-24): на обложке уже
     нарисована своя золотая рамка, вторая рамка вокруг неё была лишней. */
  html.tp-product .product-page_main-left .product_gallery-images,
  html[data-tp-mode="dark"] .product-page_main-left .product_gallery-images{
    box-sizing: border-box !important; padding: 0 !important; border: 0 !important;
    background: none !important; border-radius: 14px !important;
  }
  html.tp-product .product-page_main-left .product_gallery-images-main-img{ width: 100% !important; height: 100% !important; object-fit: contain !important; border-radius: 12px !important; }
  /* миниатюры — столбиком, ровной колонкой (тема сыпет им margin в разные стороны) */
  html.tp-product .product-page_main-left .image-preview-list{
    flex-direction: column !important; flex-wrap: nowrap !important;
    width: 100% !important; height: auto !important; max-height: none !important;
    justify-content: flex-start !important; align-items: stretch !important;
    gap: 9px !important; margin: 0 !important; padding: 0 !important;
  }
  html.tp-product .product-page_main-left .image-preview-list > *{ margin: 0 !important; }
  html.tp-product .product-page_main-left .image-preview{
    width: 56px !important; height: 56px !important; flex: none !important; margin: 0 !important;
  }
  /* зум-лупа по наведению убрана (владелец: увеличенный кусок перекрывал инфографику).
     ⚠️⚠️ КАПКАН: плагин jquery-zoom не просто кладёт `img.zoomImg` СВЕРХУ — он на
     mouseover ставит САМОЙ обложке инлайновый `visibility:hidden` и показывает вместо
     неё увеличенную копию. Поэтому одного `.zoomImg{display:none}` мало: копия скрыта,
     оригинал скрыт плагином → при наведении фото ПРОПАДАЛО. Обязательна вторая строка,
     возвращающая видимость оригиналу (stylesheet `!important` бьёт инлайн-стиль плагина).
     Клик-попап галереи (swipebox) при этом остаётся рабочим. */
  html.tp-product .product_gallery-images .zoomImg{ display: none !important; }
  html.tp-product .product_gallery-images-main-img{ visibility: visible !important; opacity: 1 !important; }

  /* меньше воздуха между шапкой и карточкой: было 72px (14 у .inner-wrap + 18 полей
     крошек + 14 после них), стало ~36px. .inner-wrap глобальный — сужаем до tp-product. */
  html.tp-product .inner-wrap{ padding-top: 4px !important; }
  html.tp-product .product-page{ margin-top: -10px !important; }

  /* колонка покупки — вторая грид-ячейка; лёгкая липкость в пределах своего ряда
     (не через весь текст ниже — так же, как в согласованном моке: описание идёт
     отдельным полноширинным блоком под этим рядом, см. tgm-desc.css) */
  html.tp-product .hio__tiers--top{
    grid-column: 2 !important; margin: 0 !important; padding: 0 !important;
    max-width: none !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important;
    position: sticky !important; top: 118px !important; align-self: start !important; text-align: left !important;
  }
  html.tp-product .hio__tiers--top .hio__kicker{ text-align: left !important; margin: 0 0 14px !important; }
  html.tp-product .hio__tiers--top .hio__tierlist{ max-width: none !important; margin: 0 !important; min-width: 0 !important; }
  /* тарифные карточки в колонке покупки — компактнее (владелец: «слишком большие»,
     2026-08-24). Только .hio__tiers--top — те же карточки в теле описания ниже
     (у них внизу больше свободного места по ширине) не трогаем. */
  /* Карточка тарифа = флекс-колонка, цена прижата к низу (`margin-top:auto`).
     Грид-строка растягивает все три карточки на одну высоту → цены встают РОВНО
     в одну линию независимо от того, что «Личная консультация» переносится на две
     строки, а описания разной длины. Раньше цена шла сразу за описанием и «плясала».
     Шрифты внутри УВЕЛИЧЕНЫ, а сама карточка не выросла — компенсировано полями. */
  html.tp-product .hio__tiers--top .hio__tier{
    display: grid !important; min-width: 0 !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: auto auto 1fr !important;              /* 3-й ряд тянется → цена уезжает вниз */
    grid-template-areas: "ico name" "desc desc" "price price" !important;
    column-gap: 6px !important; row-gap: 6px !important;
    align-items: center !important; text-align: left !important;
    /* текст опущен ниже по просьбе владельца: верхнее поле 10 → 17px (2026-08-24).
       Рост карточки при этом минимальный — свободное место в 3-м ряду (`1fr`,
       над ценой) частично поглощает добавленный отступ. */
    padding: 17px 9px 11px !important; border-radius: 11px !important;
  }
  html.tp-product .hio__tiers--top .hio__tier__ico{ grid-area: ico !important; width: 32px !important; height: 32px !important; margin: 0 !important; }
  html.tp-product .hio__tiers--top .hio__tier__name{ grid-area: name !important; font-size: 15.5px !important; line-height: 1.15 !important; padding-right: 0 !important; }
  /* место под радио-кружок резервируем ТОЛЬКО на первой строке названия — плавающая
     распорка. Обычный padding-right сужал бы и вторую строку, а именно на неё
     переносится длинное слово («консультация»), и ему нужна вся ширина. */
  html.tp-product .hio__tiers--top .hio__tier__name::before{
    content: "" !important; float: right !important; width: 22px !important; height: 12px !important;
  }
  html.tp-product .hio__tiers--top .hio__tier__desc{ grid-area: desc !important; font-size: 12.5px !important; line-height: 1.32 !important; min-height: 0 !important; margin: 0 !important; }
  html.tp-product .hio__tiers--top .hio__tier__price{
    grid-area: price !important; align-self: end !important; margin: 0 !important; padding-top: 8px !important;
  }
  html.tp-product .hio__tiers--top .hio__tier__price b,
  html.tp-product .hio__tiers--top .hio__tier__price strong{ font-size: 19.5px !important; }
  html.tp-product .hio__tiers--top .hio__tier__radio{ width: 14px !important; height: 14px !important; top: 8px !important; right: 8px !important; border-width: 2px !important; }
  html.tp-product .hio__tiers--top .hio__tierlist{ gap: 9px !important; }
  /* ⚠️ break-word на НАЗВАНИИ рвал слово посреди («консультац/ия») — в узкой колонке
     это первое, что ломается. Название переносим только по пробелам. */
  html.tp-product .hio__tiers--top .hio__tier__name{ overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; }
  html.tp-product .hio__tiers--top .hio__tier__desc{ overflow-wrap: break-word !important; }
  html.tp-product .hio__tiers--top .hio__tiers__cta{ text-align: left !important; margin-top: 22px !important; }
  html.tp-product .hio__tiers--top .hio__order{ width: 100% !important; min-width: 0 !important; display: flex !important; }
}

/* Узкий десктоп (980–1126): ряд покупки ещё не упёрся в предел 1085, карточки тарифа
   уже (≈150px против 166), и название «Личная консультация» перестаёт влезать.
   Здесь шрифт и медальон на шаг меньше — выше 1127 действуют полные размеры. */
@media (min-width: 980px) and (max-width: 1126px){
  html.tp-product .hio__tiers--top .hio__tier__name{ font-size: 13px !important; }
  html.tp-product .hio__tiers--top .hio__tier__desc{ font-size: 11.5px !important; }
  html.tp-product .hio__tiers--top .hio__tier__ico{ width: 28px !important; height: 28px !important; }
  html.tp-product .hio__tiers--top .hio__tier__price b,
  html.tp-product .hio__tiers--top .hio__tier__price strong{ font-size: 17.5px !important; }
}

/* описание .hio — не сжимаем до 620 v2: ширину и ритм панелей теперь держит
   сам общий движок (.hio__panel--cream 900px / .hio__panel--navy во всю ширину
   экрана), см. tgm-desc.css. .hio остаётся авто-шириной документа.
   ⚠️ Капкан (2026-08-24): родная тема сама сжимает обёртку табов до 720px
   (`.tab-contents.js-tabs-wrap{max-width:720px}`, Free) — из-за неё .hio (и
   значит все панели/полосы внутри) не мог вырасти шире 720, сколько ни снимай
   ограничение с самого .hio. Снимаем именно на обёртке табов. */
@media (min-width: 980px){
  html.tp-product .tab-contents.js-tabs-wrap:has(.hio),
  html.tp-product #product-description:has(.hio){ max-width: none !important; width: 100% !important; }
}

/* Баннер категории-сферы (свет/тень, адаптивно) вместо иконки-медальона (2026-08-14) */
.tp-cat-banner{ max-width: 820px; margin: 0 auto clamp(8px,1.8vw,18px); padding: 0 12px; box-sizing: border-box; }
.tp-cat-banner__img{ display: block; width: 100%; height: auto; border-radius: clamp(10px,1.6vw,18px); }
.tp-cat-banner__img--dark{ display: none; }
html[data-tp-mode="dark"] .tp-cat-banner__img--dark{ display: block; }
html[data-tp-mode="dark"] .tp-cat-banner__img--light{ display: none; }

/* Баннеры категорий: без скруглений; на мобильном — во всю ширину экрана (2026-08-14) */
.tp-cat-banner__img{ border-radius: 0 !important; }
@media (max-width: 767px){
  .tp-cat-banner{ max-width: none !important; width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 0 !important; }
}

/* Баннер категории: на мобильном прижать к шапке (убрать 14px зазор inner-wrap) (2026-08-14) */
@media (max-width: 767px){
  .tp-cat-banner{ margin-top: -14px !important; }
}

/* Категория: заголовок серифом темы (Cormorant Garamond, был Manrope) + больше отступ до карточек (2026-08-14) */
.category-name{ font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important; font-weight: 600 !important; }
.category-heder{ margin-bottom: clamp(34px, 5.5vw, 68px) !important; }
/* ⚠️ 2026-08-21/24: правило выше (от 14.08, !important) перебивало мою правку
   отступа баннер→карточки — визуально ничего не менялось, хотя CSS был на
   боевом. Снимаем его тем же весом на десктопе; на мобильном (то, ради чего
   оно писалось) не трогаем — действует только в @media(min-width:980px). */
@media (min-width: 980px) { .category-heder { margin-bottom: 15px !important; } }

/* Категория ДЕСКТОП (2026-08-14): сайдбар слева от самого верха, баннер+название+товары — правая
   колонка. .category-page=grid, .category{display:contents} растворяет flex-ряд → сайдбар и .content
   становятся элементами грида (сайдбар span 2 строки, баннер row1 col2, товары row2 col2). */
@media (min-width: 980px){
  .category-page{ display:grid !important; grid-template-columns:250px minmax(0,1fr) !important; grid-template-rows:auto auto !important; column-gap:30px !important; align-items:start !important; }
  .category-page > .category-heder{ grid-column:2 !important; grid-row:1 !important; }
  .category-page > .category{ display:contents !important; }
  .category > .out_sidebars{ grid-column:1 !important; grid-row:1 / span 2 !important; }
  .category > .content.with-sidebar{ grid-column:2 !important; grid-row:2 !important; width:auto !important; }
}

/* Ссылка на кабинет в шапке ДЕСКТОПА (на мобильном — в бургер-меню) (2026-08-14) */
.tp-hdr__account{ display: none; }
@media (min-width: 980px){
  .tp-hdr__account{ display: inline-flex; align-items: center; gap: 7px; color: var(--tp-text); text-decoration: none; font: 600 14px 'Manrope', system-ui, sans-serif; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--tp-border); transition: color .18s, border-color .18s, background .18s; white-space: nowrap; }
  .tp-hdr__account:hover{ color: var(--tp-gold-bright); border-color: var(--tp-gold-bright); background: rgba(201,163,91,.06); }
  .tp-hdr__account svg{ width: 19px; height: 19px; flex: none; }
}
/* Категория: плитки по центру (баннер выравнивается с ними) + сайдбар чуть ниже шапки (2026-08-14) */
@media (min-width: 768px){ .js-preview-products.products-tile{ justify-content: center !important; } }
@media (min-width: 980px){ .category > .out_sidebars{ margin-top: 28px !important; } }

/* Названия товаров в плитке — серифом темы (Cormorant Garamond, был Manrope) (2026-08-14) */
.Product-grid_name{ font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important; font-weight: 600 !important; }

/* Сайдбар категорий: светлый текст в ТЁМНОЙ теме (был #333 Free — терялся на навы) (2026-08-14) */
html[data-tp-mode="dark"] .sidebar-cats_link,
html[data-tp-mode="dark"] .sidebar-cats_title,
html[data-tp-mode="dark"] .subcategories_el__link,
html[data-tp-mode="dark"] .subcategories_el__name,
html[data-tp-mode="dark"] .sidebar-subcategories_el a{ color: var(--tp-text) !important; }
html[data-tp-mode="dark"] .sidebar-cats_link.selected,
html[data-tp-mode="dark"] .sidebar-cats_link.selected .sidebar-cats_title,
html[data-tp-mode="dark"] .sidebar-cats_link:hover,
html[data-tp-mode="dark"] .sidebar-cats_link:hover .sidebar-cats_title{ color: var(--tp-gold-bright) !important; }

/* Убрать названия товаров под плиткой — имя уже крупно на инфографике-картинке (2026-08-14) */
.Product-grid_name{ display: none !important; }

/* ==========================================================================
   Попап «Заказать» (ФИО / дата рождения / email) — tp-order.js (2026-08-18)
   Класс tp-om (order modal), не пересекается с чужими модалками (uk-modal).
   ========================================================================== */
html.tp-om-lock{ overflow: hidden; }

.tp-om{
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  padding: 16px;
}
.tp-om.is-open{ display: flex; }

.tp-om__backdrop{
  position: absolute; inset: 0;
  background: rgba(4, 19, 38, .55);
  backdrop-filter: blur(2px);
}
html[data-tp-mode="light"] .tp-om__backdrop{ background: rgba(11, 35, 64, .35); }

.tp-om__box{
  position: relative;
  width: 100%; max-width: 420px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--tp-surface);
  color: var(--tp-text);
  border: 1px solid var(--tp-border);
  border-radius: 18px;
  padding: 28px 24px 24px;
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
  font-family: 'Manrope', system-ui, sans-serif;
}

.tp-om__close{
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--tp-muted);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.tp-om__close:hover{ color: var(--tp-gold-bright); }

.tp-om__title{
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(20px, 5vw, 24px);
  margin: 0 0 8px;
  padding-right: 24px;
  font-variant-numeric: lining-nums;
}

.tp-om__hint{
  margin: 0 0 18px;
  font-size: 14px; line-height: 1.4;
  color: var(--tp-muted);
}

.tp-om__form{ display: flex; flex-direction: column; gap: 14px; }

.tp-om__field{ display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.tp-om__field span{ color: var(--tp-text-2); }
.tp-om__field input{
  font-family: inherit; font-size: 16px; /* 16px — чтобы iOS не зумил при фокусе */
  padding: 11px 13px;
  border: 1px solid var(--tp-border);
  border-radius: 10px;
  background: var(--tp-bg);
  color: var(--tp-text);
}
.tp-om__field input:focus{
  outline: none;
  border-color: var(--tp-gold-bright);
}

.tp-om__consent{
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 12.5px; line-height: 1.4; color: var(--tp-muted);
}
.tp-om__consent input{ margin-top: 3px; flex: 0 0 auto; }

.tp-om__error{
  font-size: 13px; color: #c0392b;
  background: rgba(192, 57, 43, .1);
  border: 1px solid rgba(192, 57, 43, .3);
  border-radius: 8px;
  padding: 8px 11px;
}
html[data-tp-mode="dark"] .tp-om__error{ color: #ff8a75; }

/* Free-тема вешает на ВСЕ <button> { height:230px; line-height:35px } — известный
   капкан проекта, лечится специфичностью класса (см. .tp-dir в tvoy-put.css). */
.tp-om__submit, .tp-om__close{ height: auto; line-height: normal; }

.tp-om__submit{
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  font-family: inherit; font-weight: 700; font-size: 16px;
  border: 0; border-radius: 12px; padding: 13px 18px;
  cursor: pointer;
  background: var(--tp-btn-bg); color: var(--tp-btn-text);
  transition: opacity .15s;
}
.tp-om__submit:disabled{ opacity: .6; cursor: default; }

@media (max-width: 374px){
  .tp-om__box{ padding: 22px 16px 18px; border-radius: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-08-21 · ДЕСКТОПНОЕ СОЗВЕЗДИЕ В ПЕРВОМ ЭКРАНЕ (.tp-hsky) — ТОЛЬКО ≥980.
   Владелец: «первый экран на десктопе нравится как есть — добавь туда же
   созвездие», и звёзды с подложкой «шёпота» — ТОЧЬ-В-ТОЧЬ как на мобильном.
   Поэтому здесь всё скопировано с мобильного первого экрана (.tp-cons):
     • «Тень» — звезда созвездия (глиф STAR/STAR_ON, стили как у .tp-node);
     • «Свет» — солнце и луч: от солнца летит луч, на конце вспыхивает
       флёр, и только потом проявляется строка (проблеск здесь векторный);
     • подложка текста — как .tp-whisper: размытый дубль строки (blur 6px),
       без чёткой плашки; прозрачность своя на свет и на тень.
   Глифы отдаёт мобильный контроллер (window.tpStarGlyphs) — второй копии SVG
   в коде нет, поэтому звёзды не разъедутся при будущих правках мобильной.
   ⚠️ Ключевые кадры мобильного объявлены внутри @media(max-width:979px) и на
   десктопе не работают — ниже их копии с префиксом tpHsky.
   Линий между звёздами нет (владелец: «совсем не нравятся»).
   Высота героя поднята до clamp(430px,34vw,560px): при прежних ~302px
   панорама была срезана в полоску и созвездию негде было стоять.
   Мобильную версию не затрагивает: базово .tp-hsky{display:none}.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ⏸ ВЫКЛЮЧЕНО 2026-08-21: звёзды и луч на главной десктопа больше не нужны —
   строка смысла переехала в колонку героя, и держать текст им стало нечего
   (фотография и так со звездой, Млечным Путём и месяцем). Вернуть — убрать
   !important-правило ниже; вся разметка, стили и JS-ветка wireSky() на месте. */
.tp-hsky { display: none; }
/* баннер сферы — только десктоп; на мобильном остаётся медальон-иконка */
.tp-eco__pic { display: none; }
/* «Подробнее» в плитке — только десктоп: на мобильном плитка и так ведёт в товар */
.tp-more { display: none; }

@media (min-width: 980px) {
  /* герой: та же раскладка, но выше и текст по вертикальному центру */
  .tp-hero { display: flex; align-items: center; min-height: clamp(424px, 30vw, 508px); }
  .tp-hero__lead { width: 100%; }

  /* Поле созвездия — правая часть панорамы. Левый край привязан к той же
     колонке 1420px, в которой лежит текст героя: на широких экранах она
     уезжает вправо вместе с центровкой, и процент от ширины героя не годится.
     z-index 4 — ВЫШЕ .tp-hero__lead (z-index 3), иначе текстовый слой
     перехватывает мышь и наведение на звёзды не работает. */
  .tp-hsky {
    display: none !important;   /* ⏸ выключено, см. комментарий выше */
    position: absolute; z-index: 4;
    left: calc(max(0px, (100% - 1420px) / 2) + 680px); right: 3%; top: 0; bottom: 0;
    pointer-events: none;
  }

  /* ── узлы-звёзды ───────────────────────────────────────────────────────── */
  .tp-hsky__star {
    position: absolute; z-index: 3; width: 78px; height: 78px; margin: -39px 0 0 -39px;
    display: grid; place-items: center;
    padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto;
  }
  .tp-hsky__glyph {
    display: block;
    transition: width .75s cubic-bezier(.2,.9,.24,1), height .75s cubic-bezier(.2,.9,.24,1),
                transform .75s cubic-bezier(.2,.9,.24,1), filter .75s ease;
  }
  .tp-hsky__glyph svg { display: block; width: 100%; height: 100%; overflow: visible; }

  /* «Тень»: звезда созвездия — размеры как у .tp-node, только крупнее */
  html[data-tp-mode="dark"] .tp-hsky__glyph {
    width: 38px; height: 38px; color: #f2d080;
    animation: tpHskyTwinkle 4.4s cubic-bezier(.45,0,.55,1) infinite;
  }
  html[data-tp-mode="dark"] .tp-hsky__star.is-on .tp-hsky__glyph {
    width: 58px; height: 58px; animation: none; opacity: 1;
    filter: drop-shadow(0 0 16px rgba(255,240,200,.95)) drop-shadow(0 0 34px rgba(242,208,128,.55));
  }
  @keyframes tpHskyTwinkle { 0%,100% { opacity:.42; transform:scale(.84); } 50% { opacity:1; transform:scale(1.09); } }

  /* «Свет»: проблеск — векторный (см. SPARKLE в home.html), поэтому просто
     задаём размер; тёплый ореол — как у «солнышек» мобильной светлой темы,
     ядро остаётся белым. */
  html[data-tp-mode="light"] .tp-hsky__glyph {
    width: 52px; height: 52px;
    animation: tpHskyGlint 4.6s ease-in-out infinite;
    filter: drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 0 10px rgba(255,214,110,.8))
            drop-shadow(0 0 24px rgba(244,170,26,.45));
  }
  html[data-tp-mode="light"] .tp-hsky__star.is-on .tp-hsky__glyph {
    width: 78px; height: 78px; animation: none; opacity: 1;
    filter: drop-shadow(0 0 4px rgba(255,255,255,1)) drop-shadow(0 0 14px rgba(255,224,140,1))
            drop-shadow(0 0 30px rgba(248,180,36,.9)) drop-shadow(0 0 56px rgba(230,146,10,.5));
  }
  @keyframes tpHskyGlint { 0%,100% { opacity:.78; transform:scale(.94); } 50% { opacity:1; transform:scale(1.06); } }

  /* ── луч от солнца (светлая тема) — стили 1:1 с мобильной сценой ───────── */
  .tp-hsky .tp-ray { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; transform-origin: 0 50%; opacity: 0; z-index: 5; }
  .tp-hsky .tp-ray__line { position: absolute; left: 0; top: 0; width: 100%; height: 0; transform-origin: 0 50%; }
  .tp-hsky .tp-ray__tip { position: absolute; left: 100%; top: 0; width: 0; height: 0; opacity: 0; }
  /* Толщина — как в мобильной сцене (ядро 2.4px, ореол 22px): чуть шире было
     похоже на световой меч. Оставляем ниточку, чуть подняв только ореол. */
  .tp-hsky .tp-ray__line > span:first-child {
    height: 24px !important; margin-top: -12px !important; filter: blur(8px) !important;
  }
  .tp-hsky .tp-ray__line > span:last-child {
    height: 2.2px !important; margin-top: -1.1px !important;
  }

  /* Полёт луча ведёт CSS-анимация (класс is-fire ставит JS): в отличие от
     element.animate() её видно при проверке рендером, и она одинаково
     отрабатывает во всех браузерах. Держится, пока на экране строка. */
  .tp-hsky .tp-ray.is-fire .tp-ray__line { animation: tpHskyBeam 5.25s cubic-bezier(.3,.6,.25,1) forwards; }
  @keyframes tpHskyBeam {
    0%   { transform: scaleX(.01); opacity: 0; filter: blur(3px); }
    7%   { opacity: .6; }
    24%  { transform: scaleX(1); opacity: 1; filter: blur(0); }
    84%  { transform: scaleX(1); opacity: 1; filter: blur(0); }
    100% { transform: scaleX(1); opacity: 0; filter: blur(1px); }
  }
  .tp-hsky .tp-ray.is-fire .tp-ray__tip { animation: tpHskyFlare 5s .5s ease-in-out both; }
  @keyframes tpHskyFlare {
    0%   { opacity: 0; transform: scale(.15) rotate(-12deg); }
    8%   { opacity: 1; transform: scale(1.15) rotate(-4deg); }
    45%  { opacity: .96; transform: scale(1) rotate(4deg); }
    80%  { opacity: .9; transform: scale(1) rotate(-3deg); }
    100% { opacity: 0; transform: scale(.97); }
  }
  .tp-hsky .tp-ray.is-fire [data-mote] { animation: tpHskyMote 3.2s ease-out both; }
  .tp-hsky .tp-ray.is-fire [data-mote]:nth-child(2n)   { animation-delay: .4s; animation-duration: 3.6s; }
  .tp-hsky .tp-ray.is-fire [data-mote]:nth-child(3n)   { animation-delay: .8s; animation-duration: 4s; }
  @keyframes tpHskyMote {
    0%   { opacity: 0; transform: translate3d(0,0,0) scale(.35); }
    32%  { opacity: .9; }
    68%  { opacity: .45; }
    100% { opacity: 0; transform: translate3d(9px,-14px,0) scale(1.2); }
  }

  .tp-hsky__star:focus-visible { outline: 2px solid var(--pp-gold-hi); outline-offset: 4px; border-radius: 50%; }

  /* ── смысловая строка героя (вариант «одна колонка», 2026-08-21) ────────
     Владелец: «слева всё разрозненно, ЭКОСИСТЕМА ИНСТРУМЕНТОВ ДЛЯ выбивается».
     Причина — два вступления на одном экране, набранных одинаково (золотой
     Manrope капсом): левое и правое конкурировали за внимание. Теперь смысл
     собран в одной колонке — связка мелко, сама мысль крупной серифной
     строкой, а панорама остаётся чистой картиной без единой надписи.
     Строка меняется в такт с созвездием, точки под ней показывают такт.
     Блок лежит внутри .tp-hero__pitch, а он скрыт на мобильном — значит
     мобильную версию это не задевает по определению. ── */
  .tp-hero__rule {
    display: block; width: 64px; height: 1px; margin: 18px 0 0;
    background: linear-gradient(90deg, var(--pp-gold), transparent);
  }
  /* Ширина подобрана так, чтобы ЛЮБАЯ из пяти строк вставала ровно в две и
     заканчивалась до края панорамы (владелец: «текст не должен на изображение
     накладываться»). Панорама начинается не ближе 426px от края колонки, у
     блока 58px отступа — значит чистого места ровно ~368px. */
  .tp-hero__say { margin: 20px 0 0; max-width: 372px; }
  .tp-hero__say-pre {
    margin: 0 0 6px; font: 400 13.5px/1.4 "Manrope", system-ui, sans-serif;
    letter-spacing: .03em; color: var(--pp-ink3);
  }
  /* Строки лежат стопкой в ОДНОЙ ячейке грида: высота блока равна самой
     высокой строке и не скачет при смене, а если серифный шрифт ещё не
     подгрузился и текст встал в три ряда — блок вырастет, а не наедет на
     точки (при абсолютном позиционировании именно это и случалось). */
  .tp-hero__say-box { display: grid; min-height: 58px; }
  .tp-hero__say-line {
    grid-area: 1 / 1; margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600;
    /* 21.5px: при 372px ширины любая из пяти строк гарантированно встаёт в
       две строки даже с чуть более широкими метриками шрифта в других
       браузерах (на 23px «самопознания и уверенного движения…» местами
       срывалась в три). */
    font-size: 21.5px; line-height: 1.32; color: var(--pp-gold); text-wrap: pretty;
    /* уходящая строка гаснет быстрее, чем появляется новая, — иначе на
       середине перехода обе видны наполовину и текст двоится */
    opacity: 0; transform: translateY(6px);
    transition: opacity .26s ease, transform .26s ease;
  }
  .tp-hero__say-line.is-on {
    opacity: 1; transform: none;
    transition: opacity .45s ease .2s, transform .45s ease .2s;
  }
  .tp-hero__dots { display: flex; gap: 4px; margin: 10px 0 0; margin-left: -7px; }
  /* Точки — управление: наведение/клик переключают строку. Кружок остаётся
     маленьким, а нажимать удобно: кнопка 20px, краска — только в 6px
     content-box (background-clip). Активная чуть крупнее за счёт padding —
     без «раздувания» на наведении, которое бросалось в глаза. */
  .tp-hero__dot {
    width: 20px; height: 20px; padding: 7px; border: 0; border-radius: 50%;
    background-color: color-mix(in srgb, var(--pp-gold) 34%, transparent);
    background-clip: content-box; cursor: pointer;
    transition: background-color .35s ease, padding .35s ease;
  }
  .tp-hero__dot:hover { background-color: color-mix(in srgb, var(--pp-gold) 70%, transparent); }
  .tp-hero__dot.is-on { background-color: var(--pp-gold); padding: 6px; }
  .tp-hero__dot:focus-visible { outline: 2px solid var(--pp-gold); outline-offset: 3px; }

  @media (prefers-reduced-motion: reduce) {
    .tp-hero__say-line { transition: none; }
    .tp-hsky__glyph { transition: none; animation: none; }
    .tp-hsky .tp-ray { display: none !important; }
  }
}

/* ── Узкий десктоп (980–1339): рядом с заголовком созвездию не хватает ширины.
   Собираем звёзды в верхнюю полосу неба — над заголовком. Позиции узлов
   заданы инлайном в разметке, поэтому здесь перебиваем их !important. ── */
@media (min-width: 980px) and (max-width: 1339px) {
  .tp-hsky__star[data-i="0"] { left: 10% !important; top: 15% !important; }
  .tp-hsky__star[data-i="1"] { left: 32% !important; top:  9% !important; }
  .tp-hsky__star[data-i="2"] { left: 54% !important; top: 18% !important; }
  .tp-hsky__star[data-i="3"] { left: 76% !important; top: 10% !important; }
  .tp-hsky__star[data-i="4"] { left: 92% !important; top: 23% !important; }
  .tp-hero__say-line { font-size: 21px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-08-21 · КАРКАС ДЕСКТОПА — ОДНА КОЛОНКА КОНТЕНТА (только ≥980).
   До этого каждая секция жила в своей случайной ширине: 1420 (герой и «4 шага»),
   1120 (.tp-section, .tp-who, .tp-method), 860 (.tp-eco). Из-за этого страница
   «дышала» неровно: заголовки не вставали друг под друга, а экосистема вообще
   выглядела узкой лентой посреди пустого поля.
   Теперь один контейнер на всё: --tp-cont 1420px + --tp-gut 58px (то же, что
   уже было у героя и «4 шагов» и что владелец приняла), для сплошного текста —
   --tp-read 900px. Вертикальный ритм компактный: 52px между секциями.
   Ниже 980px не действует ничего из этого блока.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 980px) {
  :root { --tp-cont: 1420px; --tp-gut: 58px; --tp-read: 900px; }

  .tp-section { max-width: var(--tp-cont); padding: 52px var(--tp-gut); }
  .tp-hero + .tp-section { padding-top: 52px; }
  .tp-who  { max-width: var(--tp-cont); padding: 52px var(--tp-gut) 54px; }
  .tp-eco  { max-width: var(--tp-cont); padding: 46px var(--tp-gut) 54px; }
  .tp-method { padding: 62px var(--tp-gut); }
  .tp-method__inner { max-width: calc(var(--tp-cont) - var(--tp-gut) * 2); }

  /* ── «Кому будут полезны»: в широкой колонке 2 колонки карточек выглядят
     разреженно — с 1200px переводим в 3, блок становится короче на треть ── */
  .tp-who__grid { gap: 20px; }
  .tp-who__desc { text-wrap: pretty; }
  /* ⚠️ НЕ ставить .tp-who__card{height:100%}: в грид-строке с авто-высотой
     процент считается от строки, которую эта же карточка и формирует, — Chrome
     занижает строку, и второй ряд наезжает на первый на ~30px. Карточки и так
     растягиваются по строке (align-items:stretch по умолчанию). */

  /* заголовок 2-го экрана: в широкой колонке ему хватает двух строк */
  .tp-who__head { max-width: var(--tp-read); }
  .tp-who__title { font-size: clamp(34px, 3.1vw, 44px); }

  /* ── Масштаб внутри широкой колонки ────────────────────────────────────
     Расширив контейнер, размеры элементов надо ПОДТЯНУТЬ, а не оставить от
     прежней узкой раскладки: иначе медальоны и заголовки читаются крупно
     (владелец: «не кажется, что слишком крупно всё?»). Ориентир: медальон
     занимает ~27% ширины карточки, карточка сферы ниже 160px. ── */
  /* ── Карточка сферы на десктопе: баннер категории вместо иконки ─────────
     Владелец: «вместо этих иконок можно использовать изображения, которые на
     баннерах категорий». Картинки уже лежат на сервере (те же, что на страницах
     сфер): /_tp/cat/<slug>-{light,dark}.webp, 1000×426.
     Берём их ФОНОМ, а не <img>: у фона грузится только та тема, что показана
     сейчас (скрытый <img> браузер всё равно скачал бы — восемь лишних файлов).
     Медальон-иконка на десктопе прячется, на мобильном остаётся как был. ── */
  .tp-eco__spheres { gap: 16px; }
  .tp-eco__sphere { padding: 0 0 15px; gap: 0; border-radius: 14px; overflow: hidden; }
  .tp-eco__ico { display: none; }
  .tp-eco__pic {
    display: block; width: 100%; aspect-ratio: 1000 / 426; position: relative;
    background-size: cover; background-position: center;
  }
  html[data-tp-mode="light"] .tp-eco__pic { background-image: var(--pic-l); }
  html[data-tp-mode="dark"]  .tp-eco__pic { background-image: var(--pic-d); }
  /* низ картинки растворяется в фоне карточки — без жёсткого прямоугольника */
  .tp-eco__pic::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 38%;
  }
  html[data-tp-mode="light"] .tp-eco__pic::after { background: linear-gradient(180deg, rgba(247,237,220,0), rgba(247,237,220,.95)); }
  html[data-tp-mode="dark"]  .tp-eco__pic::after { background: linear-gradient(180deg, rgba(11,32,54,0), rgba(11,32,54,.95)); }
  .tp-eco__name { display: block; padding: 12px 14px 0; font-size: 17.5px; }
  .tp-eco__title { font-size: clamp(28px, 2.5vw, 34px); }
  .tp-eco__lead { font-size: 15px; }
  .tp-eco__methods { gap: 12px; }

  .tp-who__title { font-size: clamp(30px, 2.6vw, 38px); }
  .tp-who__card { padding: 20px 24px 22px; }
  .tp-who__name { font-size: 22px; }
  .tp-who__desc { font-size: 14px; margin-top: 10px; }

  /* секции чуть плотнее по вертикали */
  .tp-section { padding-block: 46px; }
  .tp-who  { padding-block: 46px 48px; }
  .tp-eco  { padding-block: 40px 48px; }
}

@media (min-width: 1200px) {
  .tp-who__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-08-21 · МЕГАМЕНЮ «НАПРАВЛЕНИЯ» (только ≥980).
   Главный выигрыш десктопа: весь каталог — 8 сфер и 5 методов — открывается
   из шапки на любой странице, не возвращаясь на главную.
   Панель висит от края до края под шапкой (.tp-hdr — position:fixed, значит
   для absolute-панели она и есть система координат), контент внутри — в той же
   колонке 1420/58, что и все секции.
   Разметка лежит в site index.html, там же контроллер. На мобильном не видно
   по определению: .tp-nav{display:none} до 980px.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 980px) {
  .tp-nav__drop { display: flex; align-items: center; }
  .tp-nav__trigger { position: relative; }
  .tp-nav__chev {
    display: inline-block; width: 7px; height: 7px; margin: -3px 0 0 8px;
    border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
    transform: rotate(45deg); vertical-align: middle;
    transition: transform .25s ease, opacity .25s ease; opacity: .7;
  }
  .tp-nav__drop.is-open .tp-nav__chev { transform: rotate(225deg) translate(-2px,-2px); opacity: 1; }
  .tp-nav__drop.is-open > .tp-nav__trigger { color: var(--tp-gold-bright); }

  /* Панель во всю ширину под шапкой (.tp-hdr — position:fixed, значит для
     absolute-панели она и есть система координат), контент внутри — в той же
     колонке 1420/58, что и все секции страницы. */
  .tp-nav__drop { position: static; }
  .tp-mega {
    position: absolute; left: 0; right: 0; top: 100%;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    border-bottom: 1px solid color-mix(in srgb, var(--tp-gold) 45%, transparent);
    box-shadow: 0 26px 44px -30px rgba(20, 12, 0, .6);
  }
  html[data-tp-mode="light"] .tp-mega { background: #FBF7EF; }
  html[data-tp-mode="dark"]  .tp-mega { background: #071827; }
  .tp-nav__drop.is-open .tp-mega { opacity: 1; visibility: visible; transform: none; }

  /* ⚠️ Панель лежит внутри .tp-nav, а у .tp-nav a стоит white-space:nowrap и
     подчёркивание-пуля ::after — здесь и то и другое сбрасываем. */
  .tp-mega a { white-space: normal; }
  .tp-mega a::after { content: none; }

  .tp-mega__inner {
    max-width: var(--tp-cont); margin: 0 auto; padding: 26px var(--tp-gut) 30px;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .62fr) 320px;
    gap: 40px; align-items: center;
  }
  .tp-mega__cap {
    margin: 0 0 12px; font: 600 11.5px/1 "Manrope", system-ui, sans-serif;
    letter-spacing: .2em; text-transform: uppercase; color: var(--tp-gold);
  }
  .tp-mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px 30px; }
  .tp-mega__list--two { grid-template-columns: 1fr 1fr; }
  .tp-mega__list a {
    display: inline-block; padding: 2px 0; text-decoration: none; font-size: 15px;
    color: var(--tp-text); border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
  }
  .tp-mega__list a:hover { color: var(--tp-gold-bright); border-bottom-color: var(--tp-gold-bright); }

  /* Карточка-подсказка. Раньше текст жался к левому краю, а сама карточка
     тянулась во всю высоту панели и выпадала из вида (владелец: «текст прилип
     к левому краю, и вообще смотрится выбивающе»). Теперь: по центру, по
     содержимому, в языке карточек сайта — рамка, кремовый градиент, серифный
     заголовок. */
  .tp-mega__promo {
    display: block; align-self: center; padding: 22px 24px 24px; border-radius: 14px;
    text-align: center; text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--tp-gold) 38%, transparent);
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  html[data-tp-mode="light"] .tp-mega__promo {
    background: linear-gradient(160deg, #FBF4E7, #F2E6D2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  }
  html[data-tp-mode="dark"] .tp-mega__promo {
    background: linear-gradient(158deg, #10273F, #06152A);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  }
  .tp-mega__promo:hover { border-color: var(--tp-gold-bright); transform: translateY(-2px); }
  .tp-mega__promo-cap {
    display: block; font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600; font-size: 21px; line-height: 1.14; color: var(--tp-text);
  }
  .tp-mega__promo-txt {
    display: block; margin: 9px 0 0; font-size: 13.5px; line-height: 1.5;
    color: var(--tp-muted); text-wrap: pretty;
  }
  .tp-mega__promo-go {
    display: block; margin: 14px 0 0; padding: 12px 0 0;
    border-top: 1px solid color-mix(in srgb, var(--tp-gold) 28%, transparent);
    font: 600 11.5px/1 "Manrope", system-ui, sans-serif; letter-spacing: .14em;
    text-transform: uppercase; color: var(--tp-gold);
  }
  .tp-mega__promo-go::after { content: " →"; }
  .tp-mega__promo:hover .tp-mega__promo-go { color: var(--tp-gold-bright); }

  @media (prefers-reduced-motion: reduce) {
    .tp-mega { transition: none; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-08-21 · СТРАНИЦА СФЕРЫ (КАТАЛОГ) НА ДЕСКТОПЕ — только ≥980.
   Было: баннер-картинка 615px посреди пустоты, название под ней мелким
   текстом, список категорий голыми ссылками в 10px от края экрана, плитки
   270px и цена «490 ₽ … 20 000 ₽», которая читается как ошибка.
   Стало: баннер во всю ширину колонки с названием поверх, слева — карточка
   навигации с отмеченным текущим пунктом, справа — витрина по 3 в ряд в том
   же языке карточек, что и остальной сайт. Цена приведена к «от 490 ₽».
   Всё в общей колонке 1420/58. Мобильную не трогаем (везде ≥980).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 980px) {
  /* ── общая колонка для крошек и тела страницы ──────────────────────────
     ⚠️ Раскладку держит .category-page — это ГРИД самой темы (250px + 1fr),
     а .category внутри стоит display:contents, то есть ширину/флекс на нём
     задавать бесполезно: его дети живут в гриде родителя. Поэтому колонку
     задаём именно на .category-page, а шапку категории растягиваем на оба
     столбца. */
  /* Весь блок (меню + баннер + витрина) сдвинут вправо: баннер и витрина сжаты
     до 80% и прижаты влево, поэтому пустая полоса собиралась справа — левый
     отступ уравновешивает её, и страница перестаёт выглядеть съехавшей влево.
     Сдвиг небольшой (владелец: «но не сильно»), поэтому не половина пустоты,
     а примерно четверть. */
  .category-page {
    max-width: var(--tp-cont); margin-inline: auto; box-sizing: border-box;
    padding-left: calc(var(--tp-gut) + 60px); padding-right: var(--tp-gut);
    grid-template-columns: 285px minmax(0, 1fr) !important; column-gap: 24px;
  }
  /* Баннер стоит в правой колонке, а не над обеими: так верх колонки навигации
     совпадает с верхом баннера. Колонка занимает обе строки грида — иначе
     sticky некуда ехать. */
  .category-heder { grid-column: 2; grid-row: 1; max-width: none; padding-inline: 0; width: 80%; margin-inline: 0; }
  .content.with-sidebar { grid-column: 2; grid-row: 2; }
  .category { max-width: none; padding-inline: 0; }
  /* баннер сферы на мобильном ограничен 820px с полями — на десктопе во всю колонку */
  /* Баннер тоже на 20% меньше и по центру колонки — вровень с витриной
     (владелец: «сделай баннер меньше на 20% и отцентрируй баннер и карточки»).
     max-width:none снимает мобильное ограничение 820px, дальше ширину задаёт
     width:80%, а margin-inline:auto центрует. */
  /* ⚠️ Заголовок .category-name позиционируется абсолютно ОТНОСИТЕЛЬНО
     .category-heder. Поэтому сжимать надо саму шапку, а не баннер внутри неё:
     когда сжимали баннер (width:80% на .tp-cat-banner), заголовок оставался
     привязан к полной ширине колонки и уезжал за картинку. */
  .tp-cat-banner { max-width: none !important; padding-inline: 0 !important; width: 100% !important; }
  /* ⚠️ Крошки на сайте скрыты намеренно (правило .breadcrumbs,.breadcrumbs--box
     выше по файлу) и включены только на карточке товара — не трогаем. */

  /* ── баннер сферы: название лежит поверх картинки ── */
  .category-heder { position: relative; }
  .tp-cat-banner {
    position: relative; width: 100%; margin: 14px 0 0;
    border-radius: 18px; overflow: hidden; aspect-ratio: 1000 / 426;   /* родная пропорция файла: кадрировать нельзя, у картинок важен верх */
  }
  .tp-cat-banner__img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tp-cat-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
  /* Подложка под названием. Раньше это была полоса на треть кадра по
     горизонтали — она забеливала левую часть картинки (владелец: «белая плашка
     в верхнем левом углу закрывает часть изображения»). Теперь мягкое пятно
     только в нижнем левом углу, ровно под названием: картинка остаётся целой. */
  html[data-tp-mode="light"] .tp-cat-banner::after {
    background: radial-gradient(115% 92% at 0% 100%, rgba(255,251,243,.9) 0%, rgba(255,251,243,.45) 34%, rgba(255,251,243,0) 62%);
  }
  html[data-tp-mode="dark"] .tp-cat-banner::after {
    background: radial-gradient(115% 92% at 0% 100%, rgba(4,19,38,.9) 0%, rgba(4,19,38,.45) 34%, rgba(4,19,38,0) 62%);
  }
  h1.category-name {
    position: absolute; left: 40px; bottom: 20px; z-index: 2;
    margin: 0; max-width: 46%; text-align: left;
    font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600;
    /* на 20% меньше вслед за самим баннером (он тоже сжат до 80%) —
       иначе крупный заголовок на уменьшенной картинке выглядит несоразмерно */
    font-size: clamp(22px, 1.85vw, 29px); line-height: 1.0; letter-spacing: .01em;
    color: var(--tp-text);
  }
  html[data-tp-mode="light"] h1.category-name { text-shadow: 0 0 18px rgba(255,251,243,.95), 0 0 40px rgba(255,251,243,.7); }
  html[data-tp-mode="dark"]  h1.category-name { text-shadow: 0 0 20px rgba(4,19,38,.95), 0 0 44px rgba(4,19,38,.75); }

  /* ── левая колонка: карточка навигации вместо голого списка ── */
  .category { display: flex; align-items: flex-start; gap: 40px; }
  /* Колонка едет вместе со страницей: шапка зафиксирована (84px), поэтому
     липнем на 100px от верха. align-self:start обязателен — иначе грид тянет
     колонку на всю высоту строки и липнуть нечему. */
  .out_sidebars {
    width: 285px; flex: none; align-self: start;
    grid-column: 1; grid-row: 1 / span 2;
  }
  /* ⚠️ Прежнее правило от 14.08 опускало колонку на 28px, а плагин
     theiaStickySidebar вешает инлайновый position:relative — поэтому и
     специфичность выше, и !important. Липнем средствами CSS, плагин глушим:
     скролл-контейнер в теме Free — сам body, sticky в нём работает. */
  .category > .out_sidebars {
    margin-top: 14px !important;   /* ровно как отступ баннера сверху */
    position: sticky !important; top: 100px !important;
    max-height: calc(100vh - 124px); overflow: auto; overscroll-behavior: contain;
  }
  .out_sidebars .theiaStickySidebar { position: static !important; transform: none !important; }
  .out_sidebars::-webkit-scrollbar { width: 6px; }
  .out_sidebars::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--tp-gold) 40%, transparent); border-radius: 3px; }
  .left-sidebar .sb-wrap.sidebar-categories {
    border: 1px solid color-mix(in srgb, var(--tp-gold) 34%, transparent);
    border-radius: 16px; padding: 18px 18px 20px;
  }
  html[data-tp-mode="light"] .left-sidebar .sb-wrap.sidebar-categories { background: linear-gradient(160deg, #FBF4E7, #F3E8D6); }
  html[data-tp-mode="dark"]  .left-sidebar .sb-wrap.sidebar-categories { background: linear-gradient(158deg, #0F2740, #07182B); }
  /* два блока: «Сферы жизни» и «Методы» — как в макете предложения */
  .tp-sb-cap {
    margin: 0 0 10px; font: 600 12px/1 "Manrope", system-ui, sans-serif;
    letter-spacing: .2em; text-transform: uppercase; color: var(--tp-gold);
  }
  .tp-sb-group + .tp-sb-group { margin-top: 18px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--tp-gold) 26%, transparent); }
  ul.sidebar-cats { list-style: none; margin: 0; padding: 0; }
  /* ⚠️ Тема вешает свои отступы и на пункт (margin-bottom:15px), и на обёртку
     ссылки (10px) — из-за них между пунктами набегало 58px. Гасим оба. */
  ul.sidebar-cats .sidebar-cats_el { margin: 0 !important; }
  ul.sidebar-cats .sidebar-cats__link-badge--box { margin: 0 !important; padding: 0 !important; }
  .sidebar-cats_link {
    display: block; padding: 5px 0 5px 14px; position: relative;
    font-size: 15.5px; line-height: 1.35; color: var(--tp-text); text-decoration: none;
    transition: color .2s ease;
  }
  .sidebar-cats_link::before {
    content: ""; position: absolute; left: 0; top: 13px;
    width: 5px; height: 5px; border-radius: 50%;
    background: color-mix(in srgb, var(--tp-gold) 40%, transparent);
    transition: background .2s ease, transform .2s ease;
  }
  .sidebar-cats_link:hover { color: var(--tp-gold-bright); }
  .sidebar-cats_link:hover::before { background: var(--tp-gold-bright); }
  .sidebar-cats_el.is-current .sidebar-cats_link { color: var(--tp-gold); font-weight: 600; }
  .sidebar-cats_el.is-current .sidebar-cats_link::before { background: var(--tp-gold); transform: scale(1.4); }

  /* ── витрина: 3 карточки в ряд ── */
  .content.with-sidebar { flex: 1 1 auto; min-width: 0; }
  /* 2 в ряд, не 3: на обложке есть мелкий текст (подзаголовок формата
     «ПЕРСОНАЛЬНЫЙ АНАЛИЗ» + 3-4 строки описания) — при 290px он не читался,
     владелец подтвердила переход на 2 колонки после сравнения обоих вариантов. */
  /* Витрина на 20% меньше (владелец: «уменьши масштаб этих карточек на 20%»).
     ⚠️ zoom здесь бесполезен: блок всё равно растягивается на всю ширину
     колонки — zoom лишь добавляет CSS-пикселей внутри, визуальный размер
     карточек не меняется. Тот же капкан, что был с width:82% на колонке.
     Работает только сжатие самой СЕТКИ: обе колонки и промежуток между ними
     уменьшаются пропорционально. Сетка отцентрована по колонке — вровень
     с баннером, у которого те же 80% и margin-inline:auto. */
  .js-preview-products.products-tile {
    width: 80%; margin-inline: 0;
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px; justify-content: initial !important;
  }
  /* ⚠️ Выше по файлу (правка 14.08) стоит
       @media(min-width:768px) .js-preview-products.products-tile > .Product-grid
       { width:270px !important; max-width:270px !important; flex:0 0 270px !important }
     — специфичность (0,3,0) перебивала мои правила, и карточка не занимала
     колонку: обложка упиралась в 240px и текст на инфографике не читался.
     Снимаем ограничение тем же весом. */
  .js-preview-products.products-tile > .Product-grid {
    width: auto !important; max-width: none !important; flex: initial !important;
  }
  .Product-grid.-four {
    width: auto !important; max-width: none !important; margin: 0 !important; padding: 14px 14px 16px !important;
    border: 1px solid color-mix(in srgb, var(--tp-gold) 34%, transparent); border-radius: 16px;
    display: flex; flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  html[data-tp-mode="light"] .Product-grid.-four {
    background: linear-gradient(160deg, #FBF4E7, #F2E6D2);
    box-shadow: -5px 6px 8px rgba(120,85,35,.14), inset 0 1px 0 rgba(255,255,255,.5);
  }
  html[data-tp-mode="dark"] .Product-grid.-four {
    background: linear-gradient(158deg, #10273F, #06152A);
    box-shadow: -5px 6px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  }
  .Product-grid.-four:hover { transform: translateY(-3px); border-color: var(--tp-gold); }
  /* Обложка выходит на края карточки (владелец: «белые поля вокруг фото
     убери — сверху, справа, слева»): бленд задаём ТОЛЬКО на самом внешнем
     из вложенных блоков (.product__box--image — прямой ребёнок карточки),
     отрицательным отступом на величину паддинга карточки (14px). Всё, что
     вложено глубже (<a>.Product-grid_img → .list-thumb-image_wrap →
     protilegallery_*), просто на 100%/100% заполняет уже «вылетевшего»
     родителя — если бы бленд задать ещё и на них, отступ утроился бы и
     картинка съехала вбок. Скругление — только у верхних углов (16px, как у
     карточки), снизу картинка прямым срезом переходит в текст. */
  /* ⚠️ Настоящая причина, почему картинка не «вылетала» на края (было три
     подхода подряд, прежде чем нашли): дело было не в порядке каскада, а в
     чужом `max-width: 100%`, откуда-то унаследованном/примененном к этому
     блоку (источник в CSSOM не нашёлся — ни один правило-текст с max-width
     не matches() этот элемент, но computed style его чётко показывал). При
     max-width:100% любой `width` больше контейнера просто СРЕЗАЕТСЯ обратно —
     дело не в специфичности `width`, поэтому лишний класс-предок ничего не
     чинил. Явно снимаем max-width здесь же. */
  .category .Product-grid.-four .product__box--image {
    margin: -14px -14px 0 !important; width: calc(100% + 28px) !important;
    max-width: none !important;
    height: auto !important; aspect-ratio: 1 / 1;
    border-radius: 16px 16px 0 0; overflow: hidden;
  }
  /* ⚠️ Плагин галереи (protilegallery) прибивает этим элементам жёсткие
     240px — перебиваем тем же весом, чтобы они заполняли уже расширенного
     родителя, а не тянули свой старый фиксированный размер. */
  .Product-grid.-four .Product-grid_img,
  .Product-grid.-four .list-thumb-image_wrap,
  .Product-grid.-four .protilegallery_wrapper,
  .Product-grid.-four .protilegallery_images,
  .Product-grid.-four .protilegallery_image {
    width: 100% !important; height: 100% !important;
  }
  .Product-grid.-four .protilegallery_image img {
    width: 100% !important; height: 100% !important; object-fit: cover;
  }

  /* порядок: сначала название, потом цена и кнопка */
  .Product-grid_content { display: flex; flex-direction: column; }
  .Product-grid_description { order: 1; }
  .Product-grid_prices { order: 2; margin-top: 6px; }
  .Product-grid_stock-sku-box, .Product-grid.-four .rating { display: none !important; }
  /* ⚠️ Название в плитке скрыто НАМЕРЕННО (правило .Product-grid_name выше по
     файлу): оно нарисовано на самой обложке. Не возвращать. */

  /* цена: показываем только нижнюю границу — «от 490 ₽» */
  /* Две разметки цены: у товара с несколькими форматами — диапазон
     (.small-price «490 ₽ … 20 000 ₽»), у товара с одной ценой — просто .price.
     Приводим обе к одному виду; «от» ставим только там, где диапазон. */
  .Product-grid_prices .small-price,
  .Product-grid_prices .price {
    font: 700 19px/1 "Manrope", system-ui, sans-serif !important;
    letter-spacing: .01em; color: var(--tp-text) !important;
  }
  .Product-grid_prices .small-price::before { content: "от "; font-weight: 400; font-size: 14.5px; color: var(--tp-muted); }
  .Product-grid_prices .small-price__dots { display: none; }
  .Product-grid_prices .small-price .nowrap ~ .nowrap { display: none; }

  /* ⚠️ «В корзину» и «в избранное» скрыты намеренно по всему сайту (правила
     .addtocart и .Product-grid_action выше по файлу) — в плитке остаётся пустая
     строка, поэтому убираем и её. Вся плитка кликабельна: обложка ведёт на
     карточку товара. */
  .Product-grid_bottom { display: flex !important; align-items: center; justify-content: center; padding-top: 8px; }
  .Product-grid_prices { text-align: center; }
  /* Кнопка входа в товар — один в один с «Заказать анализ» (.hio__order) на
     карточке товара, только компактнее по паддингам: золотой градиент, светлая
     обводка, скругление 13px, капс. */
  /* ⚠️ Ширину кнопке НЕ задавать в min-width: карточка узкая, и кнопка вылезала
     за её края. Только 100% ширины контента с border-box. */
  .tp-more {
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; width: 100%; max-width: 100%; padding: 13px 30px;
    border: 1px solid rgba(150,112,40,.42); border-radius: 13px; cursor: pointer;
    font-family: "Manrope", system-ui, sans-serif; font-size: 14px; font-weight: 700;
    line-height: 1.25; letter-spacing: .09em; text-transform: uppercase; text-align: center;
    color: #1a1206; text-decoration: none;
    background: linear-gradient(135deg, #f0d488, #d4af52 47%, #bd923c);
    box-shadow: 0 14px 30px -14px rgba(150,112,40,.5), inset 0 1px 0 rgba(255,250,225,.55);
    transition: transform .2s, box-shadow .2s, filter .2s;
  }
  .tp-more:hover { transform: translateY(-2px); filter: brightness(1.04); }
  .tp-more:active { transform: translateY(0); }
}


/* ===== MK: ШАПКА — ЛОГОТИП ОБРЕЗАЛСЯ НА 980px (2026-08-24) =====
   Симптом: на 980 (нижняя граница десктопа, где появляется навигация) логотип
   показывался как «ТВОЙ ПУТ».
   Замер: `.tp-brand__copy` рендерился 88px при нужных 116 (scrollWidth) и обрезался
   собственным `overflow:hidden; white-space:nowrap`. Сжимался потому, что в шапке
   (flex-ряд) навигация 470 + правые кнопки 232 + два гэпа 39 + боковые поля 68.6
   съедали всё: бренду доставалось 156px вместо 182 нужных.
   ⚠️ Лечить надо НЕ обрезку, а дефицит места — вернуть ~28px.
   Поля шапки заданы плавающе: `clamp(18px, 3.5vw, 64px)` → на 980 это 34.3px, много.
   Первая версия фикса ставила жёсткие 16px в полосе 980–1100 — владелец справедливо
   заметила, что это чужеродно: вся шапка на относительных величинах, а полоса даёт
   скачок на обеих границах. Поэтому ФОРМУЛА, а не диапазон:
     clamp(16px, calc(5.6vw - 39px), 64px)
       980 → 15.9 ≈ 16   (дефицит закрыт, у бренда запас ~10px)
      1100 → 22.6
      1440 → 41.6
      1920 → 68.5 → упирается в 64
   Растёт плавно, границ и скачков нет. Бренду дополнительно запрещено сжиматься —
   чтобы дефицит впредь не съедал именно название. */
@media (min-width: 980px){
  .tp-hdr{ padding-inline: clamp(16px, calc(5.6vw - 39px), 64px); }
  .tp-brand{ flex: 0 0 auto; }
}

/* ===== MK: ПОДВАЛ v1 — ДЕСКТОП И МОБИЛЬНЫЙ (2026-08-24) ================================
   Разметка ОДНА на все ширины (site index.html), раскладок две: десктопная
   (четыре колонки) и мобильная (бренд → сферы → методы+проект парой).

   БЫЛО: полоса 125px по центру страницы — две ссылки и строка имени. После
   длинной главной и шестиметровых инфостраниц она читается как обрыв, а не
   как конец: уходить с сайта некуда, кроме шапки.
   СТАЛО: закрывающий аккорд — колонки ссылок, внизу тонкая строка имени и года.
   Состав с 2026-08-28: «ТВОЙ ПУТЬ в соцсетях» → «Доброслав в соцсетях» → «Проект».

   ЦВЕТ: подвал ИДЁТ ЗА ТЕМОЙ САЙТА (владелец, 2026-08-24: «цвет футера должен
   быть в цвет темы и меняться, если тему меняем. А то он и там, и там тёмный»).
   Первая редакция стояла на --tp-invert-* (#00092a в обеих темах, как инверсный
   блок «О методологии» на главной) — забракована. Теперь всё на ОБЩИХ токенах
   темы, поэтому подвал перекрашивается сам:
     фон      --tp-bg-deep   (крем #ecdfcb  ↔ навы #06101f)
     текст    --tp-muted     (#5f6f80       ↔ #a9b8cc)
     ссылки   --tp-text      (синь #0b2340  ↔ крем #f5f0e5)
     подписи  --tp-gold-bright (#bf862d     ↔ #ffc758) — на креме обычное
              --tp-gold (#c9a35b) даёт контраст ~2.3:1 и не читается.
   ⚠️ Сферы и методы теперь живут ТОЛЬКО в мегаменю (.tp-mega) и в шапке —
   дублирования с подвалом больше нет, синхронизировать нечего.               */

@media (min-width:980px){

  .tp-footer{
    padding:0; text-align:left;
    background:var(--tp-bg-deep); color:var(--tp-muted);
    border-top:1px solid var(--tp-border);
  }
  /* ширина — как у остального десктопа (шапка/лента главной идут по 1240) */
  .tp-footer .tp-foot{
    max-width:1240px; margin:0 auto; padding:46px 20px 34px;
    /* владелец 2026-08-25 убрала из подвала аватарку, логотип и строку сути —
       вместо колонки бренда теперь такая же колонка ссылок «Сообщества».
       Первая колонка уже: в ней три коротких названия, «Сферы» шире всех. */
    /* владелец 2026-08-28 убрала колонки «Сферы жизни» и «Подходы и методы» —
       осталось ТРИ равные колонки: соцсети проекта, соцсети Доброслава, «Проект».
       minmax(0,1fr), а не 1fr: голый 1fr имеет min-width:auto и не даёт колонке
       сжаться уже своего содержимого — на промежуточных ширинах это выносит
       сетку за 1240 (см. общее правило адаптивности проекта). */
    display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:44px;
    align-items:start;
  }

  /* ── колонки ссылок ──────────────────────────────────────────────────── */
  /* ⚠️ `.tp-footer .tp-foot__cap`, а не голый класс: в теме выше по файлу лежит
     `.tp-footer p{margin:0}` (0,1,1) и перебивает голый класс (0,1,0) —
     подпись колонки слипалась с первым пунктом списка. Тот же капкан уже
     ловился на `.tp-footer__links`, см. комментарий у него. */
  .tp-footer .tp-foot__cap{
    margin:0 0 13px; font:600 11.5px/1 "Manrope", system-ui, sans-serif;
    letter-spacing:.2em; text-transform:uppercase; color:var(--tp-gold-bright);
  }
  .tp-foot__list{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
  .tp-foot__list a{
    text-decoration:none; font-size:14.5px; line-height:1.35;
    color:var(--tp-text); border-bottom:1px solid transparent;
    transition:color .2s ease, border-color .2s ease;
  }
  .tp-foot__list a:hover{ color:var(--tp-gold-bright); border-bottom-color:var(--tp-gold-bright); }

  /* ── нижняя строка ───────────────────────────────────────────────────── */
  /* нижняя строка — ПО ЦЕНТРУ подвала (владелец: «это надо по центру экрана
     разместить, посередине»). Было по краям: имя слева, год справа. */
  .tp-foot__base{
    max-width:1240px; margin:0 auto; padding:15px 20px 26px;
    border-top:1px solid var(--tp-border);
    display:flex; justify-content:center; align-items:center; gap:10px;
    text-align:center; font-size:13px; color:var(--tp-muted); opacity:.85;
  }
  .tp-footer .tp-foot__base p{ margin:0; }
}

/* ── МОБИЛЬНЫЙ (<980): подвал ТОЖЕ полноценный ─────────────────────────────
   Владелец: «на мобильном тоже надо, у нас там футер тоже неполноценный».
   Разметка одна на все ширины, меняется только раскладка:
     бренд во всю ширину → «Сферы жизни» во всю ширину (список в две колонки,
     чтобы восемь пунктов не растягивали подвал) → «Методы» и «Проект» парой.
   ⚠️ На карточке товара (html.tp-product, ≤767px) шапка висит ВНИЗУ экрана и
   перекрывает подвал; просвет ей даёт правило `html.tp-product .tp-footer
   {padding-bottom:124px !important}` выше по файлу — здесь padding задаём
   без !important, чтобы то правило продолжало выигрывать по нижнему полю. */
@media (max-width:979px){
  .tp-footer{
    padding:0; text-align:left;
    background:var(--tp-bg-deep); color:var(--tp-muted);
    border-top:1px solid var(--tp-border);
  }
  .tp-footer .tp-foot{
    max-width:680px; margin:0 auto; padding:30px 18px 22px;
    display:grid; grid-template-columns:1fr 1fr; gap:26px 20px;
  }
  /* порядок на телефоне = порядок в разметке (order'ы 2026-08-28 сняты вместе
     со «Сферами» и «Методами»): две колонки соцсетей парой, «Проект» во всю
     ширину под ними. ⚠️ Колонки адресуются :nth-of-type — меняя состав подвала,
     ПЕРЕСЧИТЫВАТЬ номера. Сейчас: 1 — соцсети проекта, 2 — соцсети Доброслава,
     3 — «Проект». */
  .tp-foot__col:nth-of-type(3){ grid-column:1 / -1; }            /* Проект */

  .tp-footer .tp-foot__cap{
    margin:0 0 11px; font:600 11px/1 "Manrope", system-ui, sans-serif;
    letter-spacing:.2em; text-transform:uppercase; color:var(--tp-gold-bright);
  }
  .tp-foot__list{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
  .tp-foot__list a{
    text-decoration:none; font-size:14px; line-height:1.35; color:var(--tp-text);
  }
  .tp-foot__list a:active{ color:var(--tp-gold-bright); }

  .tp-foot__base{
    max-width:680px; margin:0 auto; padding:14px 18px 22px;
    border-top:1px solid var(--tp-border);
    display:flex; flex-direction:column; align-items:center; gap:5px;
    text-align:center; font-size:12.5px; color:var(--tp-muted); opacity:.85;
  }
  .tp-footer .tp-foot__base p{ margin:0; }
}
/* совсем узкие экраны: колонки друг под другом */
@media (max-width:479px){
  .tp-footer .tp-foot{ grid-template-columns:1fr; }
}
/* ── тултипы у ссылок соцсетей (владелец, 2026-08-28) ──────────────────────
   «При наведении курсора на ссылки должны быть подписи "Перейти в канал",
   а для инстаграма — подпись о запрещённой в РФ организации.»
   Свой тултип, а не атрибут title: нативный всплывает через ~1с, не тянет
   длинный юридический текст в несколько строк и не красится темой.
   ⚠️ display:inline-block обязателен: у строчного <a> при переносе строки
   абсолютный потомок цепляется не к тому боксу. Ссылки короткие — на поток
   это не влияет.
   ⚠️ Наведения нет на тач-экранах — там подпись показывается по нажатию
   (:active) и с клавиатуры (:focus-visible).                                */
.tp-foot__list a[data-tip]{ position:relative; display:inline-block; }
.tp-foot__list a[data-tip]::after{
  content:attr(data-tip);
  position:absolute; left:0; bottom:calc(100% + 9px);
  z-index:60;
  width:max-content; max-width:min(280px, 64vw);
  box-sizing:border-box; padding:8px 11px; border-radius:9px;
  background:var(--tp-text); color:var(--tp-bg-deep);
  font:500 12px/1.4 "Manrope", system-ui, sans-serif;
  letter-spacing:normal; text-transform:none; text-align:left; white-space:normal;
  box-shadow:0 10px 26px rgba(0,0,0,.30);
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  pointer-events:none;
}
.tp-foot__list a[data-tip]:hover::after,
.tp-foot__list a[data-tip]:focus-visible::after,
.tp-foot__list a[data-tip]:active::after{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .16s ease, transform .16s ease, visibility 0s;
}
/* ── сноска про Meta видимым текстом (владелец, 2026-08-28) ─────────────────
   «В мобильной версии надо сноску, что запрещён на территории РФ. А то там ведь
   не наводится курсор.» Тултип на тач-экранах не показывается сам — только по
   нажатию, а пометка юридическая, её нельзя ставить в зависимость от жеста.
   Показываем сноску там, где наведения НЕТ, и прячем там, где работает тултип.
   ⚠️ Условие ДВОЙНОЕ, и это осознанно: `hover:none` ловит планшеты и тач-ноутбуки
   любой ширины, `max-width:979` — мышиные окна, ужатые до мобильной раскладки.
   Одним медиазапросом такое «или» не записать, поэтому два правила подряд.
   ⚠️ `.tp-footer .tp-foot__note`, а не голый класс: `.tp-footer p{margin:0}` (0,1,1)
   выше по файлу перебило бы отступ — тот же капкан, что у `.tp-foot__cap`.     */
.tp-footer .tp-foot__note{ display:none; }
.tp-foot__star{ display:none; }

@media (max-width:979px){
  .tp-footer .tp-foot__note{ display:block; }
  .tp-foot__star{ display:inline; }
}
@media (hover: none){
  .tp-footer .tp-foot__note{ display:block; }
  .tp-foot__star{ display:inline; }
}

/* Оформление одно на все случаи: мельче пунктов списка, приглушённым цветом —
   это служебная строка, а не ссылка. */
.tp-footer .tp-foot__note{
  margin:12px 0 0; max-width:34em;
  color:var(--tp-muted); font-size:11.5px; line-height:1.45; text-align:left;
}
/* Звёздочка-отсылка к сноске — ОТДЕЛЬНЫЙ <sup> в разметке, а НЕ псевдоэлемент.
   ⚠️ КАПКАН: `::after` у этой же ссылки уже занят тултипом
   (`.tp-foot__list a[data-tip]::after`, специфичность 0-2-2). Звёздочка на
   `.tp-foot__nogram::after` (0-1-1) проигрывала и не рисовалась вовсе, а её
   margin-left вдобавок подтекал в тултип. Два разных смысла на одном
   псевдоэлементе не живут — звёздочку держим элементом. */
.tp-foot__star{
  font-size:.8em; margin-left:1px; color:var(--tp-gold-bright);
  /* свой vertical-align у <sup> уже есть; line-height:0, чтобы надстрочный знак
     не увеличивал высоту строки списка */
  line-height:0;
}
/* ===== /MK ПОДВАЛ v1 ===== */

/* ===== MK: БЛОК «О СОЗДАТЕЛЕ ПРОЕКТА» (.tp-method) — 2026-08-25 =============
   Раньше здесь была «О методологии / Не предсказания, а структура мышления»
   с тремя принципами; владелец заменила блок целиком на рассказ о создателе
   и попросила показывать его И НА МОБИЛЬНОМ («добавить его на мобильный тоже»).

   Класс `.tp-method` оставлен как есть — на нём висит вся инверсная подача
   (фон --tp-invert-bg, тёмный в обеих темах) и десктопная сетка; переименование
   стоило бы правок в трёх местах ради нуля пользы.

   Здесь: (1) снимаем `display:none` на мобильном и даём мобильную раскладку,
   (2) обрамляем портрет — у нового снимка СВОЙ фон (тёмно-синий с тёплым
   светом), он не растворяется в фоне блока, как прежний. Прежний портрет был
   растворён альфой прямо в webp и стоял без рамки; этот — снимок в рамке. */

/* ── мобильный: блок теперь есть ─────────────────────────────────────────── */
@media (max-width:979px){
  .tp-method{
    display:block;
    background:var(--tp-invert-bg); color:var(--tp-invert-text);
    padding:36px 18px 40px; margin-top:10px;
  }
  .tp-method__inner{ max-width:640px; margin:0 auto; display:grid; gap:20px; }
  .tp-method__portrait{ margin:0; }
  .tp-method__portrait img{
    width:100%; max-width:230px; height:auto; display:block; margin:0 auto;
  }
  .tp-method .tp-kicker{ color:var(--tp-gold-bright); text-align:center; }
  .tp-method .tp-kicker::after{ display:none; }
  .tp-method .tp-sec-title{
    color:var(--tp-invert-text); text-align:center; margin:8px 0 0;
    /* владелец: «размер шрифта заголовка сделай меньше, он огромный» */
    font-size:clamp(21px,5vw,26px); line-height:1.16;
  }
  .tp-method__lead{
    margin:14px 0 0; color:var(--tp-invert-muted);
    font-size:15.5px; line-height:1.62; text-align:left;
  }
}

/* ── портрет в рамке: и на десктопе, и на мобильном ──────────────────────── */
.tp-method__portrait img{
  border-radius:16px;
  border:1px solid rgba(233,185,93,.35);
  box-shadow:0 22px 44px -24px rgba(0,0,0,.75);
}

/* ── десктоп: два абзаца вместо лида и списка принципов ──────────────────── */
@media (min-width:980px){
  /* композиция ЦЕЛИКОМ по центру экрана (владелец: «на десктопе по центру,
     не слева»). Раньше сетка растягивалась на все 1120px, а абзац упирался в
     60ch — справа оставалось ~150px пустоты, и пара «фото + текст» выглядела
     сдвинутой влево. Теперь колонки фиксированные, а сетка центрируется. */
  .tp-method__inner{
    grid-template-columns:300px minmax(0,620px) !important;
    justify-content:center !important;
  }
  .tp-method__lead{ margin:16px 0 0; max-width:none; }
  .tp-method__lead + .tp-method__lead{ margin-top:14px; }
  /* заголовок: было clamp(30,3.4vw,44) — на 1440 давало 44px, владелец
     попросила меньше («он огромный»).
     ⚠️ max-width СНЯТ: базовые 18ch (и даже 24ch) отрывали «ПУТЬ» от «ТВОЙ»
     и уводили его на вторую строку — владелец это заметила. При кегле 28px
     заголовок целиком влезает в строку колонки. В самом названии проекта
     стоит неразрывный пробел, чтобы «ТВОЙ ПУТЬ» не разрывался и на узких. */
  .tp-method .tp-sec-title{ font-size:clamp(26px,2.2vw,32px) !important; max-width:none; }
  .tp-method__lead{ font-size:17px; }
}

/* ── ЦВЕТ ИДЁТ ЗА ТЕМОЙ (владелец, 2026-08-25: «цвета нужны в цвета выбранной
   темы»). Раньше блок был инверсным — тёмным в ОБЕИХ темах на --tp-invert-*;
   так же начинали подвал, и там владелец это тоже забраковала. Теперь всё на
   общих токенах, блок перекрашивается вместе с сайтом:
     фон    --tp-bg-alt (крем #eee2ce ↔ навы #071a2f) — это тон чередующихся
            полос главной, поэтому блок читается как её секция, а не как вставка;
     текст  --tp-text / --tp-muted.
   Правила вне медиа-запросов и ПОЗЖЕ базовых по файлу — перебивают их порядком
   в каскаде, без !important. Кикер «О создателе» убран из разметки. ── */
/* ⚠️ ФОН — КАК У СТРАНИЦЫ. Сначала блок стоял на --tp-bg-alt (#eee2ce ↔ #071a2f) —
   это тон «чередующихся полос», но на главной чередования нет: все секции ниже
   первого экрана идут на общем фоне, и блок читался как случайная полоса
   (владелец: «цвет блока отличается — это так задумано?»). Теперь фон общий,
   а границы блока держат волосяные линии сверху и снизу. */
.tp-method{
  background:var(--tp-bg); color:var(--tp-text);
  border-top:1px solid var(--tp-border);
  border-bottom:1px solid var(--tp-border);
}
.tp-method .tp-sec-title{ color:var(--tp-text); }
 /* абзац здесь — основной текст блока, а не подпись: берём --tp-text-2, а не
   --tp-muted (тот на креме даёт контраст 4.05 — ниже нормы для длинного текста). */
.tp-method__lead{ color:var(--tp-text-2); }
/* портрет: рамка тоже по токену темы */
.tp-method__portrait img{ border-color:var(--tp-border); }

/* ── два портрета: свой снимок на каждую тему (владелец, 2026-08-28) ────────
   Разметка — две <img> в .tp-method__portrait, переключаем чистым CSS по
   html[data-tp-mode], как первый экран (.tp-hero__img--dark/--light): без JS
   нет ни мигания при загрузке, ни подмены src при смене темы. По умолчанию
   (тень и «атрибут ещё не проставлен») показываем тёмный снимок.
   ⚠️ КАПКАН СПЕЦИФИЧНОСТИ: базовые правила блока — `.tp-method__portrait img`
   (0,1,1) — ставят `display:block`, и голый класс (0,1,0) им проигрывает,
   сколько бы ниже по файлу он ни лежал. Поэтому селекторы переключения
   обязательно с предком: `.tp-method__portrait .tp-method__img--…` (0,2,0).
   ⚠️ Снимки РАЗНЫХ пропорций (свет 2:3, тень 1:1) — в светлой теме блок выше
   примерно на 150px на десктопе. Так и задумано: кадры владелец выбрала сама,
   обрезать их до одинаковой рамки не стал.                                   */
.tp-method__portrait .tp-method__img--light{ display:none; }
html[data-tp-mode="light"] .tp-method__portrait .tp-method__img--dark { display:none; }
html[data-tp-mode="light"] .tp-method__portrait .tp-method__img--light{ display:block; }

/* Портрет уже базовых 300/230px (владелец, 2026-08-28: «в светлой теме сделай
   фото чуть меньше»). Оба кадра вертикальные 2:3, и в полную ширину они
   вымахивали по высоте (452/347px) и перевешивали текст. 250/195px → высота
   375/293px. Правило общее для обоих снимков: пропорции у них одинаковые, и
   разный размер по темам читался бы как скачок при переключении.
   ⚠️ Ширину задаём в ОБОИХ медиазапросах: базовый max-width у блока свой на
   десктопе (300) и на мобильном (230), одним правилом снаружи их не покрыть. */
@media (min-width:980px){
  .tp-method__portrait .tp-method__img{ max-width:250px; }
}
@media (max-width:979px){
  .tp-method__portrait .tp-method__img{ max-width:195px; }
}

/* ── «Подробнее о Доброславе»: раскрывающийся рассказ (владелец, 2026-08-28) ──
   Механика — нативный <details>/<summary>, без своего JS: открывается мышью,
   пальцем и с клавиатуры, а Ctrl+F находит спрятанный текст (браузеры сами
   раскрывают details при поиске). Цвет ссылки и стрелки — по токенам темы.
   ⚠️ Маркер-треугольник у <summary> гасим ТРЕМЯ способами: `display:inline-flex`
   (снимает display:list-item), `::marker` и вебкитовский `::-webkit-details-marker`
   — по отдельности ни один не покрывает все браузеры, что есть у аудитории.  */
.tp-method__more{ margin-top:18px; }
.tp-method__more-btn{
  display:inline-flex; align-items:center; gap:7px; width:max-content;
  cursor:pointer; list-style:none;
  color:var(--tp-gold-bright);
  font:600 15px/1.35 "Manrope", system-ui, -apple-system, sans-serif;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.tp-method__more-btn::marker{ content:""; }
.tp-method__more-btn::-webkit-details-marker{ display:none; }
.tp-method__more-btn:hover{ border-bottom-color:currentColor; }
.tp-method__more-btn:focus-visible{ outline:2px solid var(--tp-gold-bright); outline-offset:3px; border-radius:3px; }
.tp-method__more-chev{ display:block; width:15px; height:15px; transition:transform .22s ease; }
.tp-method__more-chev svg{ display:block; width:100%; height:100%; }
.tp-method__more[open] .tp-method__more-chev{ transform:rotate(180deg); }
.tp-method__more-body{ animation:tpMoreIn .25s ease both; }
/* `.tp-method .tp-method__more-body p` (0,2,1): голый класс проиграл бы правилам
   вида `.блок p` из темы Free, а они задают свой margin абзацам. */
.tp-method .tp-method__more-body p{
  margin:14px 0 0; color:var(--tp-text-2);
  font-size:15.5px; line-height:1.62; text-align:left;
}
@media (min-width:980px){
  .tp-method .tp-method__more-body p{ font-size:17px; }
}
/* строка-афоризм «…доверяя себе и нашему Миру (с)» — выделена из потока абзацев.
   Селектор с двумя предками (0,3,0), чтобы перебить общее правило абзацев
   `.tp-method .tp-method__more-body p` (0,2,1) по верхнему полю и цвету. */
/* ⚠️ ДЕСКТОП: пока рассказ свёрнут, фото и текст центрируются друг относительно
   друга (`.tp-method__inner{align-items:center}` выше по файлу) — так и задумано.
   Раскрытый рассказ вытягивает текстовую колонку до ~1400px, и при center портрет
   уезжает на 702px вниз, к середине текста (мерил на боевой). Раскрыт — прижимаем
   фото к верху, к заголовку. Селектор (0,2,0) бьёт базовый (0,1,0) без !important. */
@media (min-width:980px){
  .tp-method__inner:has(.tp-method__more[open]){ align-items:start; }
}
.tp-method .tp-method__more-body .tp-method__quote{
  margin:22px 0 6px; padding-left:14px;
  border-left:2px solid color-mix(in srgb, var(--tp-gold-bright) 55%, transparent);
  color:var(--tp-text); font-style:italic;
}
@keyframes tpMoreIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .tp-method__more-body{ animation:none; }
  .tp-method__more-chev{ transition:none; }
}
/* ===== /MK блок «О создателе проекта» ===== */

/* ===== MK: БАННЕР «САЙТ В РАЗРАБОТКЕ» (.tp-devnote) — 2026-08-28 =============
   Владелец: «вверху сайта разместить баннер: сайт находится в разработке…».
   ВРЕМЕННЫЙ блок — убрать вместе с разметкой в site index.html, когда сайт
   откроется.

   Почему статичный, а не fixed: шапка .tp-hdr уже position:fixed, и место под
   неё отдано body{padding-top:84/108px}. Второй fixed-слой заставил бы держать
   эти отступы в паре с высотой баннера, а она плавает от переносов текста на
   каждой ширине — верный способ получить наезд. Статичный баннер встаёт первым
   элементом потока, т.е. ровно под шапкой, и уезжает при прокрутке.
   Цвет — на общих токенах, поэтому баннер перекрашивается вместе с темой.    */
.tp-devnote{
  box-sizing:border-box; width:100%;
  padding:9px 16px;
  background:color-mix(in srgb, var(--tp-gold-bright) 13%, var(--tp-bg-deep));
  border-bottom:1px solid color-mix(in srgb, var(--tp-gold-bright) 34%, transparent);
}
/* ⚠️ В ТЁМНОЙ теме тот же рецепт не годится: золото #ffc758, подмешанное в навы
   #06101f, уводит фон в болотно-серый (#262826 — мерил на боевой). Поэтому в
   тени поднимаем сам навы холодным --tp-muted, а золото оставляем только в
   рамке и иконке — полоса остаётся в синей гамме сайта. */
html[data-tp-mode="dark"] .tp-devnote{
  background:color-mix(in srgb, var(--tp-muted) 16%, var(--tp-bg-deep));
}
.tp-devnote__in{
  /* 1240, как и вся десктопная сетка сайта: после того как «наши каналы» стали
     крупнее, строке нужно 1109px, и в прежние 1100 она переставала помещаться —
     баннер разъезжался на две строки уже на 1440 (мерил на боевой). */
  max-width:1240px; margin:0 auto;
  display:flex; align-items:flex-start; justify-content:center; gap:9px;
}
.tp-devnote__ico{
  flex:0 0 auto; width:17px; height:17px; margin-top:2px;
  color:var(--tp-gold-bright);
}
.tp-devnote__ico svg{ display:block; width:100%; height:100%; }
/* `.tp-devnote p` (0,1,1), а не голый класс: в теме Free и в наших блоках
   отступы абзацу задаются селекторами вида `.блок p` — голый класс им проигрывает. */
.tp-devnote p{
  margin:0;
  font:500 13.5px/1.45 "Manrope", system-ui, -apple-system, sans-serif;
  color:var(--tp-text); text-align:center; text-wrap:pretty;
}
/* «наши каналы» — ссылка в подвал, к колонке «ТВОЙ ПУТЬ в соцсетях»
   (владелец, 2026-08-28: «крупнее и подчеркнуть; по нажатию попадаешь в подвал»).
   ⚠️ Цвет — --tp-text, а НЕ золото: в светлой теме --tp-gold-bright (#bf862d)
   на фоне баннера (#e6d4b6) даёт контраст 2.17:1 — ниже нормы, текст плывёт.
   Ссылку выделяют размер, жирность и подчёркивание, они работают в обеих темах.
   line-height:1 у ссылки — иначе более крупный кегль распирает строку абзаца. */
.tp-devnote__link{
  color:var(--tp-text);
  font-size:1.14em; font-weight:700; line-height:1;
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, currentColor 55%, transparent);
  transition:text-decoration-color .2s ease;
}
.tp-devnote__link:hover,
.tp-devnote__link:focus-visible{ text-decoration-color:currentColor; }
.tp-devnote__link:focus-visible{ outline:2px solid var(--tp-gold-bright); outline-offset:2px; border-radius:3px; }
/* якорь в подвале: чтобы при переходе колонка не влипала в верхний край */
#tp-socials{ scroll-margin-top:120px; }

@media (max-width:599px){
  .tp-devnote{ padding:8px 14px; }
  .tp-devnote__in{ gap:8px; }
  .tp-devnote__ico{ width:15px; height:15px; margin-top:1px; }
  .tp-devnote p{ font-size:12.5px; line-height:1.4; text-align:left; }
}
/* ===== /MK баннер «сайт в разработке» ===== */

/* ===== MK: ЭКОНОМ-РЕЖИМ ТЕЛЕФОНА — снимаем самые дорогие для GPU слои ========
   Владелец, 2026-08-28: «когда мало зарядки, при прокрутке экран мигает и пустой».
   Энергосбережение на телефоне режет частоты GPU и поднимает
   prefers-reduced-motion. На странице ДВА полноэкранных fixed-слоя, которые
   композитор обязан перерисовывать на КАЖДЫЙ кадр прокрутки:
     1) шапка с backdrop-filter: blur(18px) — она читает пиксели под собой,
        то есть на каждом кадре заново размывает проезжающий контент;
     2) body::before — звёздная пыль на трёх radial-gradient во весь вьюпорт.
   На урезанных частотах плитки не успевают отрисоваться — отсюда мигание и
   пустые кадры. В эконом-режиме гасим оба.
   ⚠️ Шапке обязательно вернуть НЕПРОЗРАЧНЫЙ фон: --tp-header-bg это --tp-bg с
   альфой .88/.9, и без размытия сквозь неё просвечивал бы текст страницы.
   ⚠️ Гипотеза: воспроизвести мигание на десктопе нельзя, проверять на живом
   телефоне с включённым энергосбережением.                                    */
@media (prefers-reduced-motion: reduce) {
  .tp-hdr{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:var(--tp-bg) !important;
  }
  html[data-tp-mode] body::before{ display:none !important; }
}
/* ===== /MK эконом-режим ===== */

/* ===== MK: ПЛАВНОСТЬ ПРОКРУТКИ НА ТЕЛЕФОНЕ (2026-08-29) =====================
   Владелец прислала видео: при прокрутке страница отдаёт то пустой кремовый фон,
   то чёрное, а фиксированная кнопка «наверх» продолжает рисоваться. Это
   голодание компоновщика — он не успевает растеризовать плитки прокручиваемого
   слоя. Батарея на видео 97%, так что дело НЕ в энергосбережении.
   Снимаем два самых дорогих слоя на узких экранах.                            */
@media (max-width: 979px) {
  /* 1) Размытие под шапкой. .tp-hdr — position:fixed поверх прокручиваемого
     контента, и backdrop-filter заставляет КАЖДЫЙ кадр заново читать и размывать
     пиксели проезжающей под ней страницы. На Android это стабильно ломает
     плавность прокрутки. Фон делаем непрозрачным: --tp-header-bg это --tp-bg с
     альфой .88/.9, без размытия сквозь него просвечивал бы текст.
     ⚠️ !important не нужен — правило лежит ниже базового `.tp-hdr` по файлу и
     выигрывает порядком в каскаде при равной специфичности. */
  .tp-hdr{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:var(--tp-bg);
  }
}
/* 2) Звёздная пыль в СВЕТЛОЙ теме не видна вовсе (opacity:0), но остаётся
   полноэкранным position:fixed слоем и участвует в композиции каждого кадра.
   В светлой теме убираем её совсем; в тёмной она видима (opacity:.16) — там
   оставляем. */
html[data-tp-mode="light"] body::before{ display:none; }
/* ===== /MK плавность прокрутки ===== */

/* ===== MK: ГЛАВНАЯ ПРИЧИНА МИГАНИЯ — ВЫСОТА СТРАНИЦЫ ЗАВИСЕЛА ОТ АДРЕСНОЙ
   СТРОКИ БРАУЗЕРА (2026-08-29) ===============================================
   Тема Free ставит `html{height:-webkit-fill-available}`, а на неё опирается
   `body{height:100%}`. То есть высота html И body ПРИВЯЗАНА к текущей высоте
   вьюпорта. На телефоне адресная строка прячется и показывается ПРЯМО ВО ВРЕМЯ
   прокрутки — вьюпорт скачет на ~100px, и каждый такой скачок заставляет
   пересчитывать раскладку ВСЕЙ страницы, у которой ~4000px высоты.
   Измерено на боевой (375px): вьюпорт 812 → 700 менял общую высоту документа
   3982 → 3859. Пересчёт такого масштаба посреди инерционной прокрутки браузер
   не успевает отрисовать — отсюда пустые кремовые и чёрные кадры на видео.
   Лечение: снять привязку. Высота — по содержимому, «на весь экран» держим
   через min-height. Прокрутка и раньше жила на КОРНЕ (проверено: htmlSH 3982
   при bodyCH 896) — скролл-контейнер не меняется, ломать нечего.
   ⚠️ min-height в svh, а не dvh: dvh точно так же скачет вместе с адресной
   строкой и вернул бы ту же проблему. svh статичен.
   ⚠️ Скоупим на `html[data-tp-mode]` — атрибут ставит наш index.html, поэтому
   правило не заденет остальные витрины на общем движке.                       */
html[data-tp-mode]{ height:auto; }
html[data-tp-mode] body#themeOverride{ height:auto; min-height:100vh; }
@supports (min-height: 100svh){
  html[data-tp-mode] body#themeOverride{ min-height:100svh; }
}

/* (Проверено 2026-08-29: затемнение под меню .tp-menu-backdrop скрывать
   дополнительно НЕ НУЖНО — разметка держит на нём атрибут `hidden`, который JS
   снимает только на время открытия, то есть закрытым слоя в композиции нет.
   Пробовал добавить visibility:hidden — правило оказалось пустой работой.) */
/* ===== /MK причина мигания ===== */

/* ===== MK: ВЫБОР «КОМУ РАЗБОР» в модалке заказа (2026-08-31) =================
   Владелец: «при оформлении заказа должен быть чекбокс "Использовать мои данные"
   (выделен по умолчанию) и под ним "Сделать разбор для другого человека". Это
   если пользователь авторизован. А если неавторизован — пусть просто указывает
   данные (без чекбоксов)».
   Блок рисуется всегда, но JS снимает с него `hidden` ТОЛЬКО для авторизованных.
   Внутри radio, а не два checkbox: варианты взаимоисключающие, и радио само даёт
   верное поведение с клавиатуры и в скринридерах. Внешне — две строки-варианта. */
/* ⚠️ КАПКАН: `display:grid` НИЖЕ по специфичности перебивает браузерное правило
   `[hidden]{display:none}` — у гостя блок выбора оставался ВИДЕН (проверено на
   боевой: hidden=true, а computed display=grid, высота 74px). Любому классу с
   собственным `display` нужен парный сброс на [hidden]. */
.tp-om__who[hidden]{ display:none; }
.tp-om__who{
  display:grid; gap:9px;
  padding:12px 13px;
  border:1px solid var(--tp-border); border-radius:12px;
  background:color-mix(in srgb, var(--tp-gold-bright) 7%, transparent);
}
.tp-om__who-opt{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14.5px; line-height:1.35; color:var(--tp-text); cursor:pointer;
}
/* ⚠️ Размер задаём явно: у темы Free есть правило на height для input'ов
   определённых типов, и полагаться на размер по умолчанию тут не стоит. */
.tp-om__who-opt input{
  flex:0 0 auto; width:17px; height:17px; margin:1px 0 0;
  accent-color:var(--tp-gold-bright); cursor:pointer;
}
/* ⚠️ `.tp-om__form .tp-om__who-note` (0,2,0), а не голый класс: правила вида
   `.блок p` (0,1,1) перебили бы отступ. Отрицательный верхний отступ — чтобы
   подпись прижалась к блоку выбора, несмотря на gap:14px у формы. */
.tp-om__form .tp-om__who-note{
  margin:-6px 0 0;
  font-size:13px; line-height:1.4; color:var(--tp-muted);
}
/* ===== /MK выбор «кому разбор» ===== */

/* ═══ Оплата бонусами в модалке заказа (2026-09-07) ═══
   Блок показывается только когда есть что списать — см. setupBonus()
   в tp-order.js. Сумму всё равно пересчитывает сервер, поле здесь —
   пожелание человека, а не истина. */
.tp-om__bonus{
  border: 1px solid var(--tp-border);
  border-radius: 10px;
  padding: 11px 13px;
}
.tp-om__bonus-head{
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 14px; line-height: 1.35;
  cursor: pointer;
}
.tp-om__bonus-head input{ margin-top: 2px; flex: 0 0 auto; }
.tp-om__bonus-cap{ color: var(--tp-text-2); }

.tp-om__bonus-row{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px;
}
.tp-om__bonus-row input{
  font-family: inherit; font-size: 16px; /* 16px — чтобы iOS не зумил при фокусе */
  padding: 9px 12px;
  width: 130px; max-width: 100%;
  border: 1px solid var(--tp-border);
  border-radius: 10px;
  background: var(--tp-bg);
  color: var(--tp-text);
}
.tp-om__bonus-row input:focus{ outline: none; border-color: var(--tp-gold-bright); }
.tp-om__bonus-note{ font-size: 12.5px; color: var(--tp-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   КАРТОЧКА ЗАКАЗА: страницы «Оплата» и «Заказ принят» (2026-09-07)

   Один макет на обе страницы — это одна и та же сущность на разных шагах.
   Классы движка описаний (.hio__list, .hio__note, .hio__title) НЕ используются:
   .hio__list — сетка в две колонки, .hio__note — рамка с фоном, .hio__title —
   заголовок обложки в 58px. От темы берём только панель с золотой рамкой.

   ⚠️ Каждый селектор начинается с `.hio ` — движок описаний содержит сброс
   `.hio, .hio *{margin:0;padding:0;border:0;background:none;text-align:inherit}`
   и грузится ПОСЛЕ этого файла: при равной силе побеждал он, и рамка, фон
   и отступы чека молча обнулялись.

   Ритм 8 / 16 / 24. Всё по центру, чек — единственный блок с левой выключкой.
   ═══════════════════════════════════════════════════════════════════════════ */

.hio--pay .hio__panel{
  max-width: 720px; margin: 0 auto;
  padding-top: 40px; padding-bottom: 40px;
}
.hio--pay .hio__kicker{ color: #6d5220 !important; }
html[data-tp-mode="dark"] .hio--pay .hio__kicker{ color: var(--gold-br) !important; }

.hio .tp-pay{ max-width: 440px; margin: 0 auto; text-align: center; }

/* ── заголовок ─────────────────────────────────────────────────────────── */
/* !important — тема задаёт заголовкам свой шрифт правилом с большей
   специфичностью, и засечный молча заменялся на рубленый Manrope. */
.hio .tp-pay__h{
  font-family: var(--serif) !important;
  font-weight: 700 !important;
  font-size: clamp(25px, 3.4vw, 32px) !important;
  line-height: 1.15 !important;
  color: var(--head) !important;
  margin: 8px 0 0 !important;
}
.hio .tp-pay .hio__rule{ margin-top: 16px !important; max-width: 200px; }

/* ── чек ───────────────────────────────────────────────────────────────── */
.hio .tp-pay__receipt{
  margin: 24px 0 0;
  text-align: left;
  border: 1px solid rgba(168, 133, 83, .28);
  border-radius: 14px;
  background: rgba(255, 252, 244, .5);
  overflow: hidden;
}
.hio .tp-pay__row{
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 18px;
  border-bottom: 1px dashed rgba(168, 133, 83, .26);
}
.hio .tp-pay__row:last-child{ border-bottom: 0; }
.hio .tp-pay__label{
  flex: 0 0 auto;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: #8a7550;
}
.hio .tp-pay__value{
  flex: 1 1 auto; min-width: 0; text-align: right;
  font-size: 15px; line-height: 1.35; color: var(--ink);
  overflow-wrap: anywhere;
}
.hio .tp-pay__value em{
  display: block; font-style: normal; font-size: 13px; color: #8a7550; margin-top: 2px;
}

.hio .tp-pay__row--total{
  background: rgba(200, 162, 74, .09);
  padding-top: 15px; padding-bottom: 15px;
}
.hio .tp-pay__sum{
  font-family: var(--serif) !important;
  font-size: clamp(26px, 3.6vw, 32px) !important;
  font-weight: 700; line-height: 1; color: var(--head);
  white-space: nowrap; font-variant-numeric: lining-nums;
}
.hio .tp-pay__row--bonus .tp-pay__value{ font-size: 14px; color: #6f7f55; }

/* ── состояния ─────────────────────────────────────────────────────────── */
.hio .tp-pay__ok,
.hio .tp-pay__err{
  margin: 20px 0 0; padding: 12px 16px; border-radius: 12px;
  font-size: 14.5px; line-height: 1.5; text-align: center;
}
.hio .tp-pay__ok{  border: 1px solid rgba(61, 122, 61, .3);  background: rgba(61, 122, 61, .09); }
.hio .tp-pay__err{ border: 1px solid rgba(176, 60, 44, .28); background: rgba(176, 60, 44, .07); }
.hio .tp-pay__ok p,
.hio .tp-pay__err p{ margin: 0 0 4px !important; }
.hio .tp-pay__ok p:last-child,
.hio .tp-pay__err p:last-child{ margin-bottom: 0 !important; }

/* ── действие ──────────────────────────────────────────────────────────── */
.hio .tp-pay__act{ margin: 24px 0 0; }

/* !important — внутри .hio свои правила для ссылок: они снимали фон и отступы,
   и кнопка превращалась в обычный текст. height/line-height — из-за темы Free,
   которая задаёт всем кнопкам height:230px. */
.hio .tp-pay__btn,
.hio .tp-pay-form input[type=submit]{
  display: inline-flex !important; align-items: center; justify-content: center;
  height: auto !important; line-height: normal !important;
  min-width: 280px; max-width: 100%;
  padding: 15px 30px !important;
  border: 0 !important; border-radius: 999px !important;
  font-family: inherit; font-size: 16px !important; font-weight: 700 !important;
  letter-spacing: .01em;
  text-decoration: none !important; cursor: pointer;
  background: var(--tp-btn-bg) !important; color: var(--tp-btn-text) !important;
  box-shadow: 0 8px 20px -12px rgba(11, 43, 76, .8);
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.hio .tp-pay__btn:hover,
.hio .tp-pay-form input[type=submit]:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -12px rgba(11, 43, 76, .85);
}
.hio .tp-pay-form input[type=submit]:disabled{ opacity: .55; cursor: default; transform: none; }

/* Плагин рисует внутри формы свою строку «Перенаправление…» и админскую
   иконку — на витрине они лишние, подпись даём сами. */
.hio .tp-pay-form form{ margin: 0; }
.hio .tp-pay-form em,
.hio .tp-pay-form .icon16,
.hio .tp-pay-form .loading{ display: none !important; }

/* ── мелкий текст ──────────────────────────────────────────────────────── */
.hio .tp-pay__hint{
  margin: 14px auto 0; max-width: 380px;
  font-size: 13px; line-height: 1.55; color: #86745a;
}
.hio .tp-pay__hint strong{ color: var(--ink); font-weight: 600; }
.hio .tp-pay__safe{ margin: 10px auto 0; font-size: 12.5px; color: #98866a; }

.hio .tp-pay__links{ margin: 22px 0 0; font-size: 14px; }
.hio .tp-pay__links a{ color: #7a6a4e; text-decoration: underline; text-underline-offset: 3px; }
.hio .tp-pay__links a:hover{ color: var(--head); }
.hio .tp-pay__sep{ color: #b3a184; margin: 0 8px; }

/* ── «Тень» ────────────────────────────────────────────────────────────── */
html[data-tp-mode="dark"] .hio__panel--cream .tp-pay__h,
html[data-tp-mode="dark"] .hio__panel--cream .tp-pay__sum{ color: #f3ead7 !important; }
html[data-tp-mode="dark"] .hio__panel--cream .tp-pay__receipt{
  border-color: rgba(224, 189, 102, .3); background: rgba(255, 244, 214, .05);
}
html[data-tp-mode="dark"] .hio__panel--cream .tp-pay__row{ border-bottom-color: rgba(224, 189, 102, .2); }
html[data-tp-mode="dark"] .hio__panel--cream .tp-pay__row--total{ background: rgba(224, 189, 102, .09); }
html[data-tp-mode="dark"] .hio__panel--cream .tp-pay__label,
html[data-tp-mode="dark"] .hio__panel--cream .tp-pay__value em{ color: #a99b7e; }
html[data-tp-mode="dark"] .hio__panel--cream .tp-pay__value{ color: #dfe7e1; }
html[data-tp-mode="dark"] .hio__panel--cream .tp-pay__hint,
html[data-tp-mode="dark"] .hio__panel--cream .tp-pay__safe{ color: #a2ada6; }
html[data-tp-mode="dark"] .hio__panel--cream .tp-pay__hint strong{ color: #e6ece8; }
html[data-tp-mode="dark"] .hio__panel--cream .tp-pay__ok,
html[data-tp-mode="dark"] .hio__panel--cream .tp-pay__err{ color: #e6ece8; }
html[data-tp-mode="dark"] .hio__panel--cream .tp-pay__links a{ color: #a9b5ad; }
html[data-tp-mode="dark"] .hio__panel--cream .tp-pay__links a:hover{ color: #f3ead7; }

/* ── мобильный ─────────────────────────────────────────────────────────── */
@media (max-width: 640px){
  .hio--pay .hio__panel{ padding-top: 30px; padding-bottom: 30px; }
  .hio .tp-pay{ max-width: none; }

  /* Строка чека складывается: подпись сверху, значение под ней по левому краю —
     в узкой колонке пара «слева-справа» рвётся и читается плохо.
     Итоговая строка остаётся в строку: подпись и сумма коротки. */
  .hio .tp-pay__row{ display: block; padding: 12px 15px; }
  .hio .tp-pay__label{ display: block; margin-bottom: 3px; }
  .hio .tp-pay__value{ text-align: left; }
  .hio .tp-pay__row--total{ display: flex; align-items: baseline; }
  .hio .tp-pay__row--total .tp-pay__label{ margin-bottom: 0; }
  .hio .tp-pay__row--total .tp-pay__value{ text-align: right; }

  .hio .tp-pay__btn,
  .hio .tp-pay-form input[type=submit]{ width: 100%; min-width: 0; }
  .hio .tp-pay__links{ font-size: 15px; }
}

/* Кнопка «Оплатить» там, где это ссылка (кабинет и прочие места вне .hio). */
.tp-pay-btn,
.hio .tp-pay-btn{ display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }


/* ===== MK: «ВОПРОС-ОТВЕТ» В ДЕСКТОПНОМ НАВЕ — ТОЛЬКО С 1140px (2026-09-09) ===
   Шестой пункт горизонтального меню НЕ ВЛЕЗАЕТ на 980px — это граница появления
   нава и самое узкое место. Мерил на боевой: с добавленным пунктом правый край
   .tp-hdr__actions уходил на 1030 при вьюпорте 980, то есть «Кабинет» и
   переключатель тем оказывались ЗА краем экрана. На 1100 пункт влезает с зазором
   22px, на 1180 — 73px; порог взят 1140 с запасом.
   На 980–1139px страница остаётся доступной из подвала (колонка «Проект»),
   ниже 980 — из бургера, где она шестым пунктом.
   ⚠️ Правило парное к [hidden]-капкану не нужно: у .tp-nav__faq нет своего
   display, гасим его именно медиазапросом.                                    */
@media (max-width: 1139px) {
  .tp-nav__faq { display: none; }
}