/* Витрина Vibency — секции страниц. Переписан 2026-09-21. Цвета — только токены ДС
   (см. `site.css`); никаких карточек с бордером и фиксированных высот: плиты фоном
   второго оттенка, высота по содержимому, полноширинные секции. */

/* ── первый экран ─────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: clip; }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; position: relative; z-index: 1; }
.hero-text { max-inline-size: 40rem; }
.hero h1 { font-size: clamp(2.4rem, 1.5rem + 3.3vw, 4.1rem); }
.hero .lead { max-inline-size: 36rem; margin-block-end: 0.5rem; }
.hero .cta-row { margin-block: 1.25rem 2rem; }
.hero-ladder { max-inline-size: 30rem; }
.hero-ladder .ladder { --pad: 0.7rem; }
.hero-ladder .ladder-adds { font-size: 0.875rem; }
.hero-ladder .ladder-name { font-size: 0.98rem; }
/* главная: луп на весь первый экран (решение владельца 2026-09-22), текст слева поверх затемнения;
   кадр F0a скомпонован с пустой левой третью, предмет справа — object-position держит его в кадре */
.hero-full { min-block-size: calc(100svh - var(--bar-h)); display: grid; align-items: center; }
.hero-bg { position: absolute; inset: 0; margin: 0; overflow: clip; } /* обрезает свой кадр сама: у hero с текстом переполнения быть не должно */
.hero-bg picture { display: block; block-size: 100%; } /* иначе img берёт свою пропорцию и вылезает за обрезку */
.hero-bg img, .hero-bg video { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 68% 50%; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, var(--surface-chassis) 0%, color-mix(in oklch, var(--surface-chassis) 72%, transparent) 38%, transparent 68%),
    linear-gradient(to top, var(--surface-chassis) 0%, transparent 22%);
}
@media (max-width: 63.99rem) {
  .hero-bg::after { background: linear-gradient(to top, var(--surface-chassis) 0%, color-mix(in oklch, var(--surface-chassis) 78%, transparent) 55%, color-mix(in oklch, var(--surface-chassis) 40%, transparent) 100%); }
}
@media (min-width: 64rem) {
  .hero-full .hero-grid { grid-template-columns: minmax(0, 42rem); }
}
/* страницы продуктов: свой ключевой кадр фильма фоном, лёгкий параллакс (site.js, только при
   движении и на широких экранах); кадр чуть увеличен, чтобы сдвиг не открывал края */
.hero-product .hero-bg img { object-position: 72% 50%; }
.hero-product .hero-bg[data-parallax] img { transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.08); transition: none; will-change: transform; }
@media (max-width: 47.99rem) { .hero-product .hero-bg img { transform: none; } }

/* ── лестница продуктов ───────────────────────────────────────────────────── */
.ladder { --pad: clamp(0.8rem, 1.6vw, 1.15rem); }
.ladder-layer {
  position: relative; padding: var(--pad); border-radius: var(--radius);
  background: var(--surface-plate); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
  cursor: default; outline-offset: 2px;
}
.ladder-layer .ladder-layer { margin-block-start: 0.75rem; background: var(--surface-plate-raised); }
.ladder-layer .ladder-layer .ladder-layer { background: var(--surface-tray); }
.ladder-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ladder-name { font-weight: 650; font-size: 1.05rem; color: var(--text-primary); text-decoration: none; }
.ladder-name:hover { color: var(--accent-glacial-hover); }
.ladder-price { font-family: var(--family-data); font-size: 0.9rem; color: var(--text-secondary); white-space: nowrap; }
.ladder-adds { margin: 0.25rem 0 0; font-size: 0.92rem; line-height: 1.4; color: var(--text-secondary); }
.ladder-layer:hover, .ladder-layer.is-active, .ladder-layer:focus-visible { background: var(--accent-glacial-surface); }
.ladder-layer:hover > .ladder-adds, .ladder-layer.is-active > .ladder-adds { color: var(--text-primary); }
.ladder-layer:hover .ladder-layer, .ladder-layer.is-active .ladder-layer { background: var(--surface-plate-raised); }
.ladder-layer:hover .ladder-layer .ladder-layer, .ladder-layer.is-active .ladder-layer .ladder-layer { background: var(--surface-tray); }

/* ── маршруты показа ──────────────────────────────────────────────────────── */
.routes { display: grid; gap: 1rem; margin-block-start: 2rem; }
.route {
  display: grid; gap: 0.35rem; align-content: start; padding: 1.35rem 1.4rem 1.5rem; border-radius: var(--radius);
  background: var(--surface-plate); color: var(--text-primary); text-decoration: none;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.route:hover { background: var(--surface-plate-raised); transform: translateY(-2px); color: var(--text-primary); }
.route-product { font-family: var(--family-data); font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-glacial); }
.route-title { font-weight: 650; font-size: 1.2rem; line-height: 1.2; }
.route-text { color: var(--text-secondary); font-size: 0.98rem; line-height: 1.45; }
@media (min-width: 48rem) { .routes { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

/* ── карта продукта ───────────────────────────────────────────────────────── */
.band-map { padding-block-end: 0; }
.map-head { margin-block-end: 2rem; }
.map-switch { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 1.25rem; }
.map-stage { position: relative; background: var(--surface-chassis); }
.map-bg { position: absolute; inset: 0; z-index: 0; }
.map-bg img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0.55; }
/* фильм: постер под холстом, холст под линиями и узлами; подписи — левая треть */
.film-poster { position: absolute; inset-inline: 0; inset-block-start: 50%; transform: translateY(-50%); inline-size: 100%; block-size: auto; z-index: 0; opacity: 0.9; }
.film-canvas { position: absolute; inset: 0; z-index: 0; display: none; }
.map-stage.is-film .film-canvas { display: block; }
.film-captions { position: absolute; z-index: 3; inset-inline-start: var(--gutter); inset-block-start: 50%; transform: translateY(-50%); inline-size: min(24rem, 30%); display: grid; }
.film-captions p { grid-area: 1 / 1; margin: 0; padding: 1rem 1.15rem; border-radius: var(--radius-small); background: var(--surface-overlay-top); color: var(--text-secondary); font-size: 1rem; line-height: 1.45; opacity: 0; transition: opacity var(--dur) var(--ease); }
.film-captions p b { display: block; color: var(--text-primary); margin-block-end: 0.25rem; font-size: 1.1rem; }
.film-captions p.is-on { opacity: 1; }
/* планшет: колонке слева места нет — подписи идут полосой по низу сцены, орбиты уходят выше */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .map-stage:not(.is-still) .film-captions { inset-inline: var(--gutter); inset-block-start: auto; inset-block-end: var(--gutter); transform: none; inline-size: auto; }
}
.map-stage.is-still .film-captions { position: static; transform: none; inline-size: auto; display: grid; gap: 0.5rem; padding: 1rem var(--gutter) 0; }
.map-stage.is-still .film-captions p { grid-area: auto; opacity: 1; }
.map-node.is-lit, .map-core.is-lit .brand-mark { box-shadow: 0 0 0 1px var(--accent-glacial), 0 0 24px var(--accent-glacial-surface); }
.map-stage.is-film .map-node:not(.is-lit) { opacity: 0.55; }
@media (max-width: 47.99rem) {
  .film-poster { position: static; transform: none; opacity: 1; }
  /* телефон: пять подписей — листаемой лентой, а не столбиком (решение владельца 2026-09-22) */
  .map-stage .film-captions, .map-stage.is-still .film-captions { position: static; transform: none; inline-size: auto; display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1rem var(--gutter); scrollbar-width: none; }
  .map-stage .film-captions p, .map-stage.is-still .film-captions p { grid-area: auto; flex: 0 0 84%; scroll-snap-align: start; opacity: 1; }
}
.map-stage::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, var(--surface-chassis), transparent 18%, transparent 82%, var(--surface-chassis)); pointer-events: none; }
.map-more { position: relative; z-index: 2; padding: 0 var(--gutter) 2rem; }
.map-more > summary { cursor: pointer; list-style: none; padding: 0.9rem 0; color: var(--accent-glacial); font-weight: 600; }
.map-more > summary::-webkit-details-marker { display: none; }
.map-list { position: relative; z-index: 2; list-style: none; margin: 0 auto; padding: 1.5rem var(--gutter) 3rem; display: grid; gap: 0.75rem; inline-size: min(100%, var(--wrap)); }
.map-list li { padding: 0.9rem 1rem; border-radius: var(--radius-small); background: var(--surface-plate); color: var(--text-secondary); line-height: 1.4; }
.map-list li b { color: var(--text-primary); }
.map-list li[data-edition="L"]::after { content: " · появляется в LifeOS"; font-size: 0.85em; color: var(--text-muted); }
.map-list li[data-edition="B"]::after { content: " · появляется в BusinessOS"; font-size: 0.85em; color: var(--text-muted); }
@media (min-width: 48rem) {
  .map-list { grid-template-columns: repeat(2, 1fr); }
  .map-stage.is-orbital { aspect-ratio: 4 / 3; overflow: clip; }
  .map-stage.is-orbital .map-more { display: none; }
}
@media (min-width: 64rem) { .map-list { grid-template-columns: repeat(3, 1fr); } .map-stage.is-orbital { aspect-ratio: 16 / 9; } }
.map-lines { position: absolute; inset: 0; z-index: 2; inline-size: 100%; block-size: 100%; }
.map-lines line { stroke: var(--accent-glacial); stroke-width: 1; opacity: 0.35; transition: opacity var(--dur) var(--ease); }
.map-lines line.is-off { opacity: 0.08; }
/* ядро знака стоит ровно в точке схода линий: центрируется сам знак, подпись висит под ним
   абсолютно и центр не сдвигает */
.map-core {
  position: absolute; z-index: 3; inset-inline-start: var(--core-x, 50%); inset-block-start: var(--core-y, 50%); transform: translate(-50%, -50%);
  display: block; color: var(--accent-glacial); text-decoration: none;
}
/* в шапке знак блочит flex-контейнер; в ссылке карты его надо блочить явно, иначе inline-size не применится и знак исчезнет */
.map-core .brand-mark { --map-mark: clamp(4rem, 8vw, 7rem); inline-size: var(--map-mark); block-size: var(--map-mark); display: block; margin-inline: auto; filter: drop-shadow(0 0 24px var(--accent-glacial-surface)); position: relative; }
/* призрак знака в полёте из шапки в центр карты (site.js): над всем, мимо указателя */
.mark-flight { position: fixed; z-index: 60; pointer-events: none; transform-origin: 0 0; color: var(--accent-glacial); transition: transform 900ms var(--ease); filter: drop-shadow(0 0 24px var(--accent-glacial-surface)); }
/* тёмный ореол за знаком: кадр под ним бывает светлым, и тела знака терялись бы в нём */
.map-core::before { content: ""; position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(circle, var(--surface-chassis) 38%, transparent 72%); z-index: -1; opacity: 0.85; }
.map-core-name { position: absolute; inset-inline-start: 50%; inset-block-start: calc(100% + 0.5rem); transform: translateX(-50%); font-weight: 650; color: var(--text-primary); white-space: nowrap; }
.map-node {
  position: absolute; z-index: 3; transform: translate(-50%, -50%);
  font: inherit; font-weight: 600; font-size: clamp(0.85rem, 0.7rem + 0.5vw, 1.05rem); color: var(--text-primary);
  background: var(--surface-plate-raised); border: 0; border-radius: 999px;
  padding: 0.5rem 0.95rem; cursor: pointer; white-space: nowrap;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent-glacial) 35%, transparent);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.map-node::before { content: ""; display: inline-block; inline-size: 0.5em; block-size: 0.5em; margin-inline-end: 0.5em; border-radius: 50%; background: var(--accent-glacial); vertical-align: 0.05em; }
.map-node:hover, .map-node:focus-visible, .map-node.is-open { background: var(--accent-glacial-surface); box-shadow: 0 0 0 1px var(--accent-glacial); }
.map-node.is-off { opacity: 0.45; color: var(--text-secondary); }
.map-node.is-off::before { background: var(--text-muted); }
.map-tip {
  position: absolute; z-index: 4; max-inline-size: 20rem; padding: 0.9rem 1rem; border-radius: var(--radius-small);
  background: var(--surface-overlay-top); color: var(--text-primary); font-size: 0.95rem; line-height: 1.45;
  box-shadow: 0 18px 40px color-mix(in oklch, var(--surface-chassis) 65%, transparent);
  pointer-events: none;
}
.map-tip b { display: block; margin-block-end: 0.2rem; }
.map-tip .tip-edition { display: block; margin-block-start: 0.4rem; font-family: var(--family-data); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-glacial); }

/* ── сцены ────────────────────────────────────────────────────────────────── */
.scenes { display: grid; gap: clamp(3rem, 6vw, 6rem); }
.scene { display: grid; gap: 1.5rem; align-items: center; }
.scene-text { max-inline-size: 34rem; }
.scene-text p { color: var(--text-secondary); font-size: 1.05rem; }
.scene-visual { border-radius: var(--radius); overflow: clip; aspect-ratio: 16 / 10; background: var(--surface-plate); }
.scene-visual img { inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (max-width: 47.99rem) { .scene-visual { order: -1; } }
@media (min-width: 48rem) {
  .scene { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
  .scene-flip .scene-text { order: 2; }
}

/* ── всё ваше остаётся у вас ──────────────────────────────────────────────── */
.band-vashe { position: relative; overflow: clip; background: var(--surface-well); }
.vashe-grid { display: grid; gap: 2rem; align-items: center; }
.vashe-text { max-inline-size: 36rem; }
.vashe-text p { color: var(--text-secondary); font-size: 1.08rem; }
.vashe-visual { border-radius: var(--radius); overflow: clip; aspect-ratio: 16 / 10; }
.vashe-visual img { inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (min-width: 64rem) { .vashe-grid { grid-template-columns: 1fr 1.1fr; gap: 4rem; } }

/* ── три продукта ─────────────────────────────────────────────────────────── */
.produkty-grid { display: grid; gap: 2.5rem; align-items: center; }
.produkty-text { max-inline-size: 34rem; }
.price-line { font-family: var(--family-data); font-size: 1rem; color: var(--text-primary); margin: 1.25rem 0 1.5rem; }
@media (min-width: 64rem) { .produkty-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* ── автор ────────────────────────────────────────────────────────────────── */
.avtor-grid { display: grid; gap: 2rem; align-items: center; }
.avtor-visual { inline-size: min(60vw, 22rem); border-radius: var(--radius); overflow: clip; aspect-ratio: 3 / 4; background: var(--surface-plate); }
.avtor-visual img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.avtor-text { max-inline-size: 36rem; }
.avtor-text p { color: var(--text-secondary); font-size: 1.05rem; }
@media (min-width: 48rem) { .avtor-grid { grid-template-columns: auto 1fr; gap: 3.5rem; } }

/* ── вопросы ──────────────────────────────────────────────────────────────── */
.faq { margin-block-start: 1.5rem; display: grid; gap: 0.5rem; }
.faq details { border-radius: var(--radius-small); background: var(--surface-plate); }
.faq summary { list-style: none; cursor: pointer; padding: 1rem 1.25rem; font-weight: 600; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--family-data); color: var(--accent-glacial); flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0; padding: 0 1.25rem 1.1rem; color: var(--text-secondary); }

/* ── страницы продуктов ───────────────────────────────────────────────────── */
.hero-ladder[data-highlight="M"] .ladder-m,
.hero-ladder[data-highlight="L"] .ladder-l,
.hero-ladder[data-highlight="B"] .ladder-b { background: var(--accent-glacial-surface); }
.hero-ladder[data-highlight="M"] .ladder-m > .ladder-adds,
.hero-ladder[data-highlight="L"] .ladder-l > .ladder-adds,
.hero-ladder[data-highlight="B"] .ladder-b > .ladder-adds { color: var(--text-primary); }

/* предмет с точками: кадр во всю ширину, шесть точек по координатам, окошко с ситуацией */
/* ── предмет с маркерами (решение владельца 2026-09-22): маркер «точка + слово» виден всегда,
   зона нажатия 44 px, активный светится; наведение/тап открывает окошко; в покое маркеры по кругу ── */
.spots { position: relative; margin-block-start: 2rem; }
.spots-visual { aspect-ratio: 16 / 9; overflow: clip; }
.spots-visual img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.spots::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--surface-well) 0%, transparent 30%), linear-gradient(to bottom, var(--surface-well), transparent 12%, transparent 88%, var(--surface-well)); pointer-events: none; }
.spot {
  position: absolute; z-index: 2; inset-inline-start: var(--x); inset-block-start: var(--y); transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 0.55rem; min-block-size: 2.75rem; padding: 0.35rem 0.95rem 0.35rem 0.55rem;
  border: 0; border-radius: 999px; background: var(--surface-overlay-top);
  color: var(--text-primary); font: inherit; font-weight: 600; font-size: 0.95rem; line-height: 1; cursor: pointer;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent-glacial) 25%, transparent);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.spot-dot { flex: none; inline-size: 0.75rem; block-size: 0.75rem; border-radius: 50%; background: var(--accent-glacial); box-shadow: 0 0 0 0.25rem color-mix(in oklch, var(--accent-glacial) 28%, transparent); transition: box-shadow var(--dur) var(--ease); }
.spot-label { white-space: nowrap; }
.spot.is-on, .spot:hover, .spot:focus-visible { background: var(--accent-glacial-surface); box-shadow: 0 0 0 1px var(--accent-glacial), 0 12px 30px color-mix(in oklch, var(--surface-chassis) 60%, transparent); }
@keyframes spot-pulse { 0%, 100% { box-shadow: 0 0 0 0.25rem color-mix(in oklch, var(--accent-glacial) 28%, transparent); } 50% { box-shadow: 0 0 0 0.7rem color-mix(in oklch, var(--accent-glacial) 10%, transparent); } }
.spot.is-idle .spot-dot { animation: spot-pulse 2.4s var(--ease) infinite; }
.spot-panel {
  position: absolute; z-index: 3; inset-inline-start: var(--gutter); inset-block-start: 50%; transform: translateY(-50%);
  inline-size: min(26rem, 40%); padding: 1.1rem 1.25rem; border-radius: var(--radius-small);
  background: var(--surface-overlay-top); color: var(--text-primary); font-size: 1.05rem; line-height: 1.45;
  box-shadow: 0 18px 40px color-mix(in oklch, var(--surface-chassis) 65%, transparent);
  transition: opacity var(--dur) var(--ease);
}
.spot-panel:empty { opacity: 0; }
@media (max-width: 47.99rem) {
  /* телефон: слова строкой над кадром, кадр обрезан до предмета, окошко под кадром */
  .spots { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-inline: var(--gutter); }
  .spots::before { display: none; }
  .spots-visual { order: 1; flex: 1 1 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-small); margin-block-start: 0.5rem; }
  .spots-visual img { object-position: 72% 50%; }
  .spot { position: static; transform: none; order: 0; min-block-size: 2.5rem; font-size: 0.9rem; }
  .spot-panel { order: 2; flex: 1 1 100%; position: static; transform: none; inline-size: auto; margin: 0.5rem 0 0; min-block-size: 5.5rem; }
}

/* лента шагов и день */
.steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; counter-reset: step; }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; padding: 1rem 1.1rem; border-radius: var(--radius-small); background: var(--surface-plate); }
.step-n { font-family: var(--family-data); font-weight: 600; color: var(--accent-glacial); inline-size: 1.6rem; block-size: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent-glacial-surface); font-size: 0.9rem; }
@media (min-width: 64rem) { .steps { grid-template-columns: repeat(4, 1fr); } .steps li { grid-template-columns: 1fr; gap: 0.75rem; } }
.day { display: grid; gap: 1rem; margin-block-start: 2.5rem; }
.day h3 { font-size: 1rem; color: var(--accent-glacial); margin-block-end: 0.35rem; }
.day p { margin: 0; color: var(--text-secondary); }
@media (min-width: 48rem) { .day { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

/* состав */
.sostav { display: grid; gap: 1rem; margin-block: 1.5rem 2rem; }
.sostav-group { padding: 1.1rem 1.2rem; border-radius: var(--radius-small); background: var(--surface-plate); }
.sostav-group h3 { font-size: 1.05rem; margin-block-end: 0.35rem; }
.sostav-group p { margin: 0; color: var(--text-secondary); font-size: 0.98rem; }
.sostav-group.is-add { background: var(--accent-glacial-surface); }
.sostav-group.is-add h3::before { content: "+ "; color: var(--accent-glacial); }
@media (min-width: 48rem) { .sostav { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .sostav { grid-template-columns: repeat(3, 1fr); } }
#sostav .cta { margin-block-start: 0.5rem; }

/* чего не делает */
.nots { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.nots li { padding: 0.75rem 0 0.75rem 1.6rem; position: relative; color: var(--text-secondary); border-block-end: 1px solid var(--border-hairline); }
.nots li::before { content: "—"; position: absolute; inset-inline-start: 0; color: var(--text-muted); }

/* ── сравнение ────────────────────────────────────────────────────────────── */
.compare-ladder { max-inline-size: 40rem; margin-block-start: 2rem; }
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); background: var(--surface-plate); }
.cmp { inline-size: 100%; min-inline-size: 52rem; border-collapse: separate; border-spacing: 0; font-size: 0.98rem; }
.cmp th, .cmp td { padding: 0.9rem 1rem; text-align: start; vertical-align: top; border-block-end: 1px solid var(--border-hairline); }
.cmp thead th { position: sticky; inset-block-start: var(--bar-h); z-index: 2; background: var(--surface-plate-raised); font-weight: 650; font-size: 1.05rem; }
.cmp thead th:first-child { color: var(--text-muted); font-weight: 500; font-size: 0.9rem; }
.cmp tbody th { font-weight: 600; color: var(--text-primary); inline-size: 26%; }
.cmp tbody td { color: var(--text-secondary); }
.cmp tbody td[colspan] { color: var(--text-secondary); }
.cmp-badge { display: inline-block; margin-inline-start: 0.5rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--accent-glacial-surface); color: var(--accent-glacial-hover); font-size: 0.75rem; font-weight: 600; vertical-align: middle; }
.cmp-price { font-family: var(--family-data); color: var(--text-primary); font-size: 1.05rem; }
.cmp-yes { color: var(--accent-glacial); }
.cmp-no { color: var(--text-muted); }
.cmp-actions td, .cmp-actions th { border-block-end: 0; padding-block: 1.25rem; }
@media (max-width: 47.99rem) {
  /* телефон: строка таблицы — карточка, ячейки подписаны именем продукта (решение владельца 2026-09-22) */
  .cmp-wrap { overflow: visible; background: transparent; }
  .cmp { min-inline-size: 0; }
  .cmp thead { display: none; }
  .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
  .cmp tr { padding: 0.9rem 1rem; margin-block-end: 0.75rem; border-radius: var(--radius-small); background: var(--surface-plate); }
  .cmp th, .cmp td { padding: 0; border: 0; inline-size: auto; }
  .cmp tbody th { margin-block-end: 0.5rem; }
  .cmp td[data-p] { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.5rem; padding-block: 0.25rem; }
  .cmp td[data-p]::before { content: attr(data-p); color: var(--text-muted); font-size: 0.85rem; }
  .cmp-actions td[data-p] { display: inline-block; margin: 0.25rem 0.5rem 0 0; }
  .cmp-actions td[data-p]::before { content: none; }
}

/* ── финальный призыв ─────────────────────────────────────────────────────── */
.band-final { text-align: center; }
.final-grid { display: grid; justify-items: center; gap: 0.5rem; }
.final-grid .lead { margin-block-end: 1.25rem; }

/* ── портрет автора следит за курсором (site.js `avatar`, решение владельца 2026-09-21):
   карточка наклоняется к курсору, кадр внутри сдвигается навстречу — взгляд ведёт по секции.
   --look-x/--look-y ∈ [-1, 1] ставит скрипт с инерцией; без наведения, на таче и при
   «меньше движения» переменных нет, и портрет стоит. Сетка поворотов головы (LivePortrait)
   ляжет поверх этого же контракта, когда владелец выберет кадры ─────────────────────────── */
.avtor-grid { perspective: 1100px; }
.avtor-visual[data-avatar].is-live {
  overflow: clip; transform-style: preserve-3d; will-change: transform;
  transform: rotateY(calc(var(--look-x, 0) * 10deg)) rotateX(calc(var(--look-y, 0) * -8deg));
}
.avtor-visual[data-avatar].is-live img {
  transform: translate3d(calc(var(--look-x, 0) * 14px), calc(var(--look-y, 0) * 10px), 0) scale(1.06);
  transform-origin: 50% 55%; will-change: transform;
}
@media (prefers-reduced-motion: reduce), (hover: none) {
  .avtor-visual[data-avatar].is-live, .avtor-visual[data-avatar].is-live img { transform: none; }
}