/* IceCold v2 — компоненты, разделы A (1–15), B (16–28) и D (29–39). Контракт: ICECOLD-V2-COMPONENTS.md.
   Только классы c-*, только var(--…) из icecold-v2-tokens.css.
   Состояния: живые :hover / :focus-visible / :active / :disabled и статичные .is-hover, .is-focus,
   .is-active, .is-disabled, .is-loading для листа. Вид 390 — контейнерный запрос c-vp:
   на странице .c-vp стоит на main и шапке, лист ставит его на кадр 390. */

.c-vp { container: c-vp / inline-size; }

.c-icon { inline-size: var(--icon-16); block-size: var(--icon-16); flex: none; }
.c-icon--20 { inline-size: var(--icon-20); block-size: var(--icon-20); }

/* Фокус один на все компоненты, как у SW: кольцо белый .7, отступ 2 цвета фона */
:where(.c-btn, .c-nav__link, .c-seg__opt, .c-faq__q, .c-review__person, .c-dots__dot,
       .c-card__link, .c-footer__link, .c-field__go, .c-link, .c-issue__q, .c-rowlink,
       .c-chips__chip, .c-checkbox__input):where(:focus-visible, .is-focus) {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}


/* ── 1–2. Кнопка ─────────────────────────────────────────────── */
.c-btn {
  --h: var(--control-md);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  block-size: var(--h); box-sizing: border-box; padding-inline: var(--space-16);
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--text);
  font: inherit; font-size: var(--t-small-size); font-weight: var(--fw-medium);
  line-height: var(--t-small-lh); letter-spacing: var(--t-small-ls);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) var(--ease-std), background-color var(--dur-fast) var(--ease-std),
              box-shadow var(--dur-fast) var(--ease-std), translate var(--dur-fast) var(--ease-std);
}
.c-btn--sm  { --h: var(--control-sm); }
.c-btn--lg  { --h: var(--control-lg); padding-inline: var(--space-24); font-size: var(--t-body-size); }
.c-btn--nav { --h: var(--nav-btn-h); padding-inline: var(--space-12); }
.c-btn--block { inline-size: 100%; justify-content: space-between; }

.c-btn--white { background: var(--white); color: var(--gray-950); }
.c-btn--white:where(:hover:not(:disabled, .is-disabled, [aria-disabled="true"]), .is-hover) { background: var(--gray-100); }
.c-btn--hero { border-radius: var(--r-sm); box-shadow: var(--shadow-btn); }

.c-btn--glass { background: var(--glass); box-shadow: inset 0 0 0 var(--line) var(--stroke-glass); }
.c-btn--glass:has(.c-btn__orb) { padding-inline-start: var(--space-8); }
.c-btn--glass:where(:hover:not(:disabled, .is-disabled, [aria-disabled="true"]), .is-hover) { background: var(--glass-hover); }
.c-btn__orb {
  display: inline-grid; place-items: center; flex: none;
  inline-size: calc(var(--h) - 2 * var(--space-8)); aspect-ratio: 1; border-radius: var(--r-pill);
  background: var(--glass); box-shadow: inset 0 0 0 var(--line) var(--stroke-glass);
}

.c-btn--dark { background: var(--surface-2); color: var(--text-2); }
.c-btn--dark:where(:hover:not(:disabled, .is-disabled, [aria-disabled="true"]), .is-hover) { color: var(--text); }

.c-btn--ink { background: var(--black); color: var(--text); }
.c-btn--ink:where(:hover:not(:disabled, .is-disabled, [aria-disabled="true"]), .is-hover) { background: var(--ink-hover); }

.c-btn--ring { background: var(--gray-900); box-shadow: inset 0 0 0 var(--line) var(--ring-dark); }
.c-btn--ring:where(:hover:not(:disabled, .is-disabled, [aria-disabled="true"]), .is-hover) { background: var(--glass-hover); }

.c-btn--ghost { box-shadow: inset 0 0 0 var(--line) var(--stroke-glass); }
.c-btn--ghost:where(:hover:not(:disabled, .is-disabled, [aria-disabled="true"]), .is-hover) { background: var(--glass); }

/* active: сдвиг на толщину линии вниз (своё) */
.c-btn:where(:active:not(:disabled, .is-disabled, [aria-disabled="true"]), .is-active) { translate: 0 var(--line); }
.c-btn:where(:disabled, .is-disabled, [aria-disabled="true"]) { opacity: var(--o-disabled); cursor: not-allowed; }

/* loading: спиннер вместо иконки, текст «Проверяем…» в разметке */
.c-btn:where(.is-loading, [aria-busy="true"]) { cursor: progress; }
.c-btn__spin { animation: c-spin var(--dur-slow) linear infinite; }
@keyframes c-spin { to { rotate: 1turn; } }


/* ── 3. Шапка-таблетка ───────────────────────────────────────── */
.c-nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-24);
  inline-size: max-content; min-inline-size: var(--nav-w); max-inline-size: 100%;
  block-size: var(--nav-h); box-sizing: border-box; margin-inline: auto;
  padding-inline: var(--space-16) var(--space-4); border-radius: var(--r-pill);
  background: var(--nav-fill); box-shadow: var(--ring-nav);
  -webkit-backdrop-filter: var(--blur-nav); backdrop-filter: var(--blur-nav);
  color: var(--text);
}
.c-nav__logo {
  display: inline-flex; align-items: center; gap: var(--space-8);
  color: inherit; text-decoration: none; white-space: nowrap;
  font-size: var(--t-small-size); font-weight: var(--fw-semibold); line-height: var(--t-small-lh);
}
.c-nav__links { display: flex; align-items: center; gap: var(--space-24); }
.c-nav__link {
  color: var(--nav-link); text-decoration: none; white-space: nowrap; border-radius: var(--r-xs);
  font-size: var(--t-small-size); font-weight: var(--t-small-weight); line-height: var(--t-small-lh);
  transition: color var(--dur-fast) var(--ease-std);
}
.c-nav__link:where(:hover, .is-hover, [aria-current="page"], [aria-current="true"]) { color: var(--white); }
.c-nav__end { display: flex; align-items: center; gap: var(--space-8); }
.c-nav__menu { display: none; }

/* Над чёрным кольцо --ring-nav (чёрное) пропадает — кольцо стекла */
.c-nav--black { box-shadow: var(--ring-glass); }

/* Меню 390 `.c-drawer`: компактная стеклянная панель, выпадает из шапки (владелец 13.10, круг 3; было шторкой на весь экран).
   Корень на весь экран: подложка .c-drawer__scrim (чёрный 50 %, клик закрывает) и панель .c-drawer__panel под островком,
   по бокам поля островка. Шапка остаётся над подложкой (z-index шапки задаёт страница). Скрыто visibility, а не display:
   иначе переход не проиграется. Стекло — слой ::before самой панели: прозрачность меняется у него и у содержимого,
   а не у панели целиком, — предок с opacity < 1 отрезал бы размытие от страницы, и стекло «вспыхивало» бы в конце.
   Движение только transform и opacity: открытие 300 мс, ссылки по очереди шагом ~38 мс, закрытие ~165 мс без очереди;
   при reduce сразу. Кривая открытия cubic-bezier(.2,.8,.2,1) из спеки владельца, токена такой нет */
.c-drawer {
  --drawer-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --drawer-in: var(--dur-mid);
  --drawer-out: calc(var(--dur-mid) * 0.55);
  position: fixed; inset: 0; z-index: 10;
  visibility: hidden; pointer-events: none; color: var(--text);
}
.c-drawer.is-open { visibility: visible; pointer-events: auto; }
.c-drawer__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--black) 50%, transparent); opacity: 0; }
.c-drawer__panel {
  position: absolute; isolation: isolate;
  inset-block-start: calc(var(--nav-top) + var(--nav-h) + var(--space-8)); inset-inline: var(--space-16);
  max-block-size: calc(100% - var(--nav-top) - var(--nav-h) - var(--space-24)); overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: var(--space-12); box-sizing: border-box; padding: var(--space-8) var(--space-16) var(--space-16);
  border-radius: var(--r-xl);
  transform: translateY(calc(-1 * var(--space-8))) scale(0.97); transform-origin: 100% 0;
}
.c-drawer__panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  /* Плотнее шапки: под панелью крупный текст страницы, при --nav-fill (70 %) он читается сквозь ссылки */
  background: linear-gradient(color-mix(in srgb, var(--white) 5%, transparent) 0 0), color-mix(in srgb, var(--black) 90%, transparent);
  box-shadow: var(--ring-nav);
  -webkit-backdrop-filter: var(--blur-nav); backdrop-filter: var(--blur-nav);
  opacity: 0;
}
.c-drawer__links { display: grid; }
.c-drawer__links .c-nav__link {
  display: flex; align-items: center; min-block-size: var(--space-48); color: var(--text);
  font-size: var(--t-title-size); font-weight: var(--t-title-weight); line-height: var(--t-title-lh);
  opacity: 0; transform: translateY(calc(var(--space-12) / 2));
}
.c-drawer__links .c-nav__link + .c-nav__link { border-block-start: var(--line) solid var(--stroke-faint); }
/* Язык и кнопка одной строкой; не влезает — кнопка уходит строкой ниже во всю ширину */
.c-drawer__end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); opacity: 0; }
.c-drawer__end > .c-btn { flex: 1 0 auto; }
.c-drawer.is-open :is(.c-drawer__scrim, .c-drawer__end, .c-drawer__links .c-nav__link) { opacity: 1; }
.c-drawer.is-open :is(.c-drawer__panel, .c-drawer__links .c-nav__link) { transform: none; }
.c-drawer.is-open .c-drawer__panel::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* Закрытие: всё разом и быстрее; видимость гаснет после перехода */
  .c-drawer { transition: visibility 0s linear var(--drawer-out); }
  .c-drawer__scrim, .c-drawer__end { transition: opacity var(--drawer-out) var(--ease-std); }
  .c-drawer__panel { transition: transform var(--drawer-out) var(--ease-std); }
  .c-drawer__panel::before { transition: opacity var(--drawer-out) var(--ease-std); }
  .c-drawer__links .c-nav__link { transition: opacity var(--drawer-out) var(--ease-std), transform var(--drawer-out) var(--ease-std), color var(--dur-fast) var(--ease-std); }
  /* Открытие: подложка 200, панель 300 от кнопки «Меню», ссылки и нижняя строка по очереди шагом --dur-mid / 8 */
  .c-drawer.is-open { transition: visibility 0s; }
  .c-drawer.is-open .c-drawer__scrim { transition: opacity calc(var(--drawer-in) * 2 / 3) var(--ease-std); }
  .c-drawer.is-open .c-drawer__panel { transition: transform var(--drawer-in) var(--drawer-ease); }
  .c-drawer.is-open .c-drawer__panel::before { transition: opacity var(--drawer-in) var(--drawer-ease); }
  .c-drawer.is-open :is(.c-drawer__end, .c-drawer__links .c-nav__link) {
    transition: opacity var(--drawer-in) var(--drawer-ease), transform var(--drawer-in) var(--drawer-ease), color var(--dur-fast) var(--ease-std);
    transition-delay: calc(var(--dur-mid) / 8 * var(--drawer-i, 0)), calc(var(--dur-mid) / 8 * var(--drawer-i, 0)), 0s;
  }
  .c-drawer.is-open .c-drawer__links .c-nav__link:nth-child(2) { --drawer-i: 1; }
  .c-drawer.is-open .c-drawer__links .c-nav__link:nth-child(3) { --drawer-i: 2; }
  .c-drawer.is-open .c-drawer__end { --drawer-i: 3; }
}


/* ── 4. Сегмент ──────────────────────────────────────────────── */
.c-seg {
  --n: 2; --i: 0; --pad: var(--seg-pad);
  position: relative; isolation: isolate;
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  block-size: var(--control-lg); box-sizing: border-box; padding: var(--pad);
  border-radius: var(--r-pill); background: var(--gray-950);
}
.c-seg::before {
  content: ""; position: absolute; z-index: -1;
  inset-block: var(--pad); inset-inline-start: var(--pad);
  inline-size: calc((100% - 2 * var(--pad)) / var(--n));
  border-radius: var(--r-pill); background: var(--gray-800);
  translate: calc(100% * var(--i)) 0;
  transition: translate var(--dur-mid) var(--ease-out-soft);
}
.c-seg__opt {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4);
  padding-inline: var(--space-16); border: 0; border-radius: var(--r-pill);
  background: none; color: var(--gray-400); cursor: pointer; white-space: nowrap;
  font: inherit; font-size: var(--t-small-size); font-weight: var(--fw-medium); line-height: var(--t-small-lh);
  transition: color var(--dur-fast) var(--ease-std);
}
/* Выбранная опция: кнопка с aria-pressed или ссылка с aria-current="page" (переключатель языка, круг 6) */
.c-seg__opt:where(:hover, .is-hover):not([aria-pressed="true"], [aria-current="page"]) { color: var(--gray-200); }
.c-seg__opt:is([aria-pressed="true"], [aria-current="page"]) { color: var(--text); }
a.c-seg__opt { text-decoration: none; }
.c-seg__opt:where(:active) { color: var(--text); }
.c-seg__note { color: var(--text-3); font-size: var(--t-caption-size); font-weight: var(--t-caption-weight); }

.c-seg--tone { background: none; --pad: 0px; }
.c-seg--tone::before { background: var(--tint-blue); }
.c-seg--tone .c-seg__opt[aria-pressed="true"] { color: var(--blue-300); }

.c-seg--sm { block-size: var(--control-xs); --pad: var(--space-4); }
.c-seg--sm .c-seg__opt { padding-inline: var(--space-8); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); }


/* ── 5. Метка ────────────────────────────────────────────────── */
.c-badge {
  --b-bg: var(--glass); --b-fg: var(--text);
  display: inline-flex; align-items: center; flex: none;
  padding: var(--space-4) var(--space-8); border-radius: var(--r-xs);
  background: var(--b-bg); color: var(--b-fg); white-space: nowrap;
  font-size: var(--t-caption-size); font-weight: var(--fw-medium); line-height: var(--t-caption-lh);
}
.c-badge--blue    { --b-bg: var(--tint-blue);   --b-fg: var(--blue-300); }
.c-badge--pink    { --b-bg: var(--tint-pink);   --b-fg: var(--pink-300); }
.c-badge--teal    { --b-bg: var(--tint-teal);   --b-fg: var(--teal-500); }
.c-badge--bad     { --b-bg: var(--tint-red);    --b-fg: var(--score-bad); }
.c-badge--mid     { --b-bg: var(--tint-yellow); --b-fg: var(--score-mid); }
.c-badge--good    { --b-bg: var(--tint-green);  --b-fg: var(--score-good); }
.c-badge--neutral { --b-bg: var(--glass);       --b-fg: var(--text); }


/* ── 6. Заголовок секции ─────────────────────────────────────── */
.c-head { display: grid; gap: var(--space-16); justify-items: start; }
.c-head--center { justify-items: center; text-align: center; margin-inline: auto; }
.c-head__eyebrow {
  color: var(--hue, var(--eyebrow));
  font-size: var(--t-eyebrow-size); font-weight: var(--t-eyebrow-weight); line-height: var(--t-eyebrow-lh); letter-spacing: var(--t-eyebrow-ls);
}
.c-head__title {
  max-inline-size: 24ch; color: var(--text); text-wrap: balance;
  font-size: var(--t-h2-size); font-weight: var(--t-h2-weight); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-ls);
}
.c-head__title--two > span { display: block; }
.c-head__title--two > span:first-child { color: var(--text-3); }
.c-head__lead {
  max-inline-size: 60ch; color: var(--text-3); text-wrap: pretty;
  font-size: var(--t-lead-size); font-weight: var(--t-lead-weight); line-height: var(--t-lead-lh); letter-spacing: var(--t-lead-ls);
}


/* ── 7. Карточка смысла ──────────────────────────────────────── */
.c-cards {
  display: flex; gap: var(--space-16);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline-end: calc(50% - 50vw); padding-inline-end: var(--space-24);
}
.c-cards::-webkit-scrollbar { display: none; }
.c-card {
  --hue: var(--blue-300); --tint: var(--tint-blue); --scene: url("img/scenes/scene-blue.jpg");
  position: relative; isolation: isolate; overflow: hidden; flex: none; scroll-snap-align: start;
  display: flex; flex-direction: column;
  inline-size: var(--card-feature-w); block-size: var(--card-feature-h); box-sizing: border-box;
  padding: var(--space-24); border-radius: var(--r-xl);
  background: var(--tint); box-shadow: inset 0 0 0 var(--line) var(--stroke-faint);
}
.c-card--pink { --hue: var(--pink-300); --tint: var(--tint-pink); --scene: url("img/scenes/scene-pink.jpg"); }
.c-card--teal { --hue: var(--teal-500); --tint: var(--tint-teal); --scene: url("img/scenes/scene-teal.jpg"); }
.c-card--yellow { --hue: var(--yellow-500); --tint: var(--tint-yellow); --scene: url("img/scenes/scene-yellow.jpg"); }
.c-card--green { --hue: var(--green-500); --tint: var(--tint-green); --scene: url("img/scenes/scene-green.jpg"); }
.c-card--red { --hue: var(--red-500); --tint: var(--tint-red); --scene: url("img/scenes/scene-red.jpg"); }
/* Одна карточка ряда без фото, только UI на тинте — как «Use your own words» у SW */
.c-card--noscene { --scene: none; }
/* кромка --stroke-gradient проявляется на hover, без подъёма (своё) */
.c-card::before {
  content: ""; position: absolute; inset: 0; z-index: 2; padding: var(--line); border-radius: inherit; pointer-events: none;
  background: var(--stroke-gradient); opacity: 0;
  -webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
  -webkit-mask-composite: xor;
  mask: linear-gradient(black, black) content-box exclude, linear-gradient(black, black);
  transition: opacity var(--dur-fast) var(--ease-std);
}
.c-card:where(:hover, :focus-within, .is-hover)::before { opacity: 1; }
/* Сцена: фото по тинту (960×1200, тот же 4:5), сверху градиент в тинт — прозрачно до 45 %, сплошь с 75 %.
   Пока файла нет, остаётся пустой тинт: url без файла не рисуется */
.c-card__scene {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 45%, var(--tint) 75%), var(--scene) center top / cover no-repeat, var(--tint);
}
/* Кусок настоящего интерфейса, как у SW: прижат к верху, срезан правым краем карточки на 48.
   Стекло тёмное (--nav-fill, как .c-photo__plate): светлое --glass над фото даёт белому 3,4–4,0:1, тёмное — от 9,9:1.
   Правый padding 64 = срез 48 + 16, чтобы текст не уходил под край */
.c-card__ui {
  position: absolute; z-index: 1; inset-block-start: var(--space-48); inset-inline: var(--space-24) calc(-1 * var(--space-48));
  display: grid; justify-items: start; gap: var(--space-8); padding: var(--space-16) var(--space-64) var(--space-16) var(--space-16);
  border-radius: var(--r-2xl) 0 0 var(--r-2xl); pointer-events: none;
  background: var(--nav-fill); box-shadow: var(--ring-glass);
  -webkit-backdrop-filter: var(--blur-nav); backdrop-filter: var(--blur-nav);
  color: var(--text); font-variant-numeric: tabular-nums;
}
.c-card__ui-label { color: var(--text-on-sky-2); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.c-card__ui-row {
  display: flex; align-items: center; gap: var(--space-8); justify-self: stretch; min-inline-size: 0;
  font-size: var(--t-body-size); line-height: var(--t-body-lh);
}
.c-card__ui-row .c-icon { flex: none; }
.c-card__ui-value { font-size: var(--t-title-size); font-weight: var(--fw-medium); line-height: var(--t-title-lh); }
.c-card__ui-site { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-card__ui-end { margin-inline-start: auto; }
.c-card__ui-note { color: var(--text-on-sky-2); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.c-card__ui-ok { color: var(--score-good); }
.c-card__body { position: relative; z-index: 1; display: grid; gap: var(--space-8); margin-block-start: auto; }
.c-card__icon { color: var(--hue); margin-block-end: var(--space-4); }
.c-card__title {
  color: var(--hue);
  font-size: var(--t-card-title-size); font-weight: var(--t-card-title-weight); line-height: var(--t-card-title-lh); letter-spacing: var(--t-card-title-ls);
}
.c-card__text { color: var(--text-3); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.c-card__text--last { color: var(--text); }
.c-card__link {
  display: inline-flex; align-items: center; gap: var(--space-4); justify-self: start;
  margin-block-start: var(--space-4); border-radius: var(--r-xs);
  color: var(--text-2); text-decoration: none; font-size: var(--t-small-size); line-height: var(--t-small-lh);
  transition: color var(--dur-fast) var(--ease-std);
}
.c-card__link:where(:hover, .is-hover) { color: var(--text); }

.c-dots { display: flex; justify-content: center; gap: var(--space-4); margin-block-start: var(--space-16); }
.c-dots__dot {
  display: grid; place-items: center; inline-size: var(--space-24); block-size: var(--space-24);
  padding: 0; border: 0; border-radius: var(--r-pill); background: none; cursor: pointer;
}
.c-dots__dot::before {
  content: ""; inline-size: var(--space-8); block-size: var(--space-8); border-radius: var(--r-pill);
  background: var(--text-4); transition: background-color var(--dur-fast) var(--ease-std);
}
.c-dots__dot:where(:hover, [aria-current="true"])::before { background: var(--text); }


/* ── 8. Строка функции ───────────────────────────────────────── */
.c-features { display: grid; gap: var(--space-32); }
.c-features--col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c-features--list { gap: var(--space-24); max-inline-size: var(--container-text); }
.c-feature { display: grid; gap: var(--space-8); align-content: start; }
.c-feature__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); }
.c-feature__title {
  color: var(--text);
  font-size: var(--t-small-size); font-weight: var(--fw-medium); line-height: var(--t-small-lh);
}
.c-feature__text { color: var(--text-3); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); max-inline-size: 40ch; }
.c-feature--col .c-feature__icon { color: var(--text); margin-block-end: var(--space-4); }
.c-feature--list { grid-template-columns: var(--tile-24) minmax(0, 1fr); column-gap: var(--space-12); align-items: start; }
.c-feature--list .c-feature__text { grid-column: 2; font-size: var(--t-small-size); line-height: var(--t-small-lh); max-inline-size: 60ch; }
.c-feature__tile {
  --hue: var(--blue-300);
  display: grid; place-items: center; inline-size: var(--tile-24); block-size: var(--tile-24);
  border-radius: var(--r-tile); color: var(--hue);
  background: color-mix(in srgb, var(--hue) 16%, transparent);
}
.c-feature__tile .c-icon { inline-size: var(--space-16); block-size: var(--space-16); }


/* ── 9. Карточка тарифа ──────────────────────────────────────── */
.c-prices { display: flex; flex-wrap: wrap; gap: var(--space-16); align-items: stretch; }
.c-price {
  display: flex; flex-direction: column; gap: var(--space-24);
  inline-size: min(100%, var(--card-price-w)); min-block-size: var(--card-price-h); box-sizing: border-box;
  padding: var(--space-32); border-radius: var(--r-lg);
  background: var(--surface-1); box-shadow: inset 0 0 0 var(--line) var(--stroke);
  color: var(--text);
}
/* Небо карточки растянуто на 240 %: видна тёмная часть 0–42 %, белый там не ниже 6,6:1, белый .85 — 5,3:1 */
.c-price--sky { background: var(--sky-card) top / 100% 240% no-repeat; box-shadow: none; }
.c-price__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-8); }
.c-price__badges { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.c-price__name { font-size: var(--t-card-title-size); font-weight: var(--fw-medium); line-height: var(--t-card-title-lh); }
/* «от» и «€» — спаны в строке, между ними и числом неразрывные пробелы в разметке */
.c-price__amount {
  font-size: var(--t-display-xl-size); font-weight: var(--t-display-xl-weight); line-height: var(--t-display-xl-lh); letter-spacing: var(--t-display-xl-ls);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.c-price__unit {
  color: var(--text-2); letter-spacing: var(--t-title-ls);
  font-size: var(--t-title-size); font-weight: var(--t-title-weight); line-height: var(--t-title-lh);
}
.c-price__term {
  display: flex; align-items: center; gap: var(--space-8); margin-block-start: calc(-1 * var(--space-12));
  color: var(--text-3); font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); font-variant-numeric: tabular-nums;
}
.c-price__group { display: grid; gap: var(--space-12); }
.c-price__label { font-size: var(--t-small-size); font-weight: var(--fw-semibold); line-height: var(--t-small-lh); }
/* Сброс списка: без него браузерный padding 40 у ul уводил галочки вправо от подписи группы (13.10) */
.c-price__rows { display: grid; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.c-price__row {
  display: grid; grid-template-columns: var(--icon-16) minmax(0, 1fr); gap: var(--space-12); align-items: start;
  color: var(--text-2); font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh);
}
/* Иконка по центру первой строки: (интерлиньяж − иконка) / 2. Было size × lh — px × px, calc невалиден и молча давал 0 */
.c-price__row .c-icon { margin-block-start: calc((var(--t-body-sm-lh) - var(--icon-16)) / 2); }
.c-price__end { margin-block-start: auto; display: grid; gap: var(--space-12); }
/* Сноска: --text-3, а не --text-4 из контракта — --text-4 только от 24 px (правка мозга) */
.c-price__note { color: var(--text-3); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); }
.c-price--sky :where(.c-price__unit, .c-price__term, .c-price__label, .c-price__row) { color: var(--text); }
.c-price--sky .c-price__note { color: var(--text-on-sky-2); }


/* ── 10. Отзыв ───────────────────────────────────────────────── */
/* Сам себе контейнер: на узкой ширине (телефон, колонка) раскладка меняется без медиазапроса страницы */
.c-reviews {
  container: c-reviews / inline-size;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); gap: var(--space-24) var(--space-48); align-items: center;
}
.c-review__stack { position: relative; isolation: isolate; }
.c-review__stack::before, .c-review__stack::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--r-2xl);
  background: color-mix(in srgb, var(--white) 60%, transparent); box-shadow: var(--shadow-float);
}
.c-review__stack::before { rotate: var(--tilt); }
.c-review__stack::after { rotate: calc(-1 * var(--tilt)); }
/* Передняя карточка плоская и белая, над подложками; автор — чернила на белом, а не на подложке */
.c-review {
  position: relative; z-index: 1;
  display: grid; gap: var(--space-32); box-sizing: border-box; padding: var(--space-48);
  border-radius: var(--r-2xl); background: var(--white); box-shadow: var(--shadow-float); color: var(--ink);
}
.c-review__quote {
  max-inline-size: 50ch; text-wrap: pretty;
  font-size: var(--t-title-size); font-weight: var(--t-title-weight); line-height: var(--t-title-lh); letter-spacing: var(--t-title-ls);
}
.c-review__author { display: flex; align-items: center; gap: var(--space-12); color: var(--ink); }
.c-review__avatar {
  flex: none; inline-size: var(--avatar); block-size: var(--avatar); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}
.c-review__name { display: block; font-size: var(--t-small-size); font-weight: var(--fw-semibold); line-height: var(--t-small-lh); }
.c-review__role { display: block; color: var(--ink-2); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); }
.c-review__site { color: var(--ink); font-size: var(--t-small-size); line-height: var(--t-small-lh); text-underline-offset: var(--space-4); }
.c-review__people { display: grid; gap: var(--space-4); }
.c-review__person {
  display: flex; align-items: center; gap: var(--space-12); inline-size: 100%; box-sizing: border-box;
  padding: var(--space-12); border: 0; border-radius: var(--r-md); background: none;
  color: var(--text-on-sky-2); font: inherit; text-align: start; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-std), background-color var(--dur-fast) var(--ease-std);
}
.c-review__person:where(:hover, .is-hover) { color: var(--text); }
.c-review__person[aria-pressed="true"] { background: var(--glass); color: var(--text); }
.c-review__person .c-review__avatar { background: var(--glass); box-shadow: inset 0 0 0 var(--line) var(--stroke-glass); }
.c-review__person .c-review__role { color: inherit; }
/* Узко: люди лентой сверху, карточка во всю ширину — обе ячейки на всю строку сетки */
@container c-reviews (max-width: 40rem) {
  .c-review__stack, .c-review__people { grid-column: 1 / -1; }
  .c-review__people {
    order: -1; display: flex; gap: var(--space-8); overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--space-24)); padding-inline: var(--space-24);
  }
  .c-review__person { inline-size: auto; flex: none; }
  .c-review { padding: var(--space-24); }
}


/* ── 11. FAQ ─────────────────────────────────────────────────── */
.c-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); gap: var(--space-64); align-items: start; }
/* Разделитель — по контракту (SW); правило владельца «без разделителей» с ним спорит, см. отчёт */
.c-faq__item { border-block-end: var(--line) solid var(--stroke); }
.c-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  inline-size: 100%; min-block-size: var(--row-h); box-sizing: border-box; padding: var(--space-12) 0;
  border: 0; border-radius: var(--r-xs); background: none; cursor: pointer; text-align: start;
  color: var(--gray-200); font: inherit;
  font-size: var(--t-lead-size); font-weight: var(--t-lead-weight); line-height: var(--t-lead-lh); letter-spacing: var(--t-lead-ls);
  transition: color var(--dur-fast) var(--ease-std);
}
.c-faq__q:where(:hover, .is-hover, [aria-expanded="true"]) { color: var(--text); }
.c-faq__chev { color: var(--text-3); transition: rotate var(--dur-mid) var(--ease-out-soft); }
.c-faq__q[aria-expanded="true"] .c-faq__chev { rotate: 180deg; }
/* Закрытый ответ скрыт и для глаз, и для Tab: visibility выключается после схлопывания, включается сразу */
.c-faq__a {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows var(--dur-mid) var(--ease-out-soft), visibility 0s linear var(--dur-mid);
}
.c-faq__q[aria-expanded="true"] + .c-faq__a { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.c-faq__a > div { overflow: hidden; min-block-size: 0; }
.c-faq__a p { max-inline-size: 65ch; padding-block-end: var(--space-24); color: var(--text-3); text-wrap: pretty; }
.c-faq__aside { display: grid; gap: var(--space-16); justify-items: start; }
.c-faq__aside-title { font-size: var(--t-title-size); font-weight: var(--t-title-weight); line-height: var(--t-title-lh); }


/* ── 12. Поле ────────────────────────────────────────────────── */
.c-field { display: grid; gap: var(--space-8); }
.c-field__label { color: var(--text-2); font-size: var(--t-small-size); font-weight: var(--fw-medium); line-height: var(--t-small-lh); }
.c-field__box {
  display: flex; align-items: center; gap: var(--space-8);
  block-size: var(--field-h); box-sizing: border-box; padding-inline: var(--space-16);
  border-radius: var(--r-sm); background: var(--glass); box-shadow: inset 0 0 0 var(--line) var(--stroke-glass);
  transition: box-shadow var(--dur-fast) var(--ease-std);
}
.c-field__box:focus-within, .c-field.is-focus .c-field__box { box-shadow: inset 0 0 0 var(--line) var(--stroke-glass-focus); }
.c-field__input {
  flex: 1; min-inline-size: 0; block-size: 100%; padding: 0; border: 0; outline: none; background: none;
  color: var(--text); caret-color: var(--text); font: inherit;
  font-size: var(--t-body-size); line-height: var(--t-body-lh);
}
.c-field__input::placeholder { color: var(--text-3); }
.c-field__hint { color: var(--text-3); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); }
.c-field.is-error .c-field__box { box-shadow: inset 0 0 0 var(--line) var(--score-bad); }
.c-field.is-error .c-field__hint { color: var(--score-bad); }
.c-field:has(.c-field__input:disabled), .c-field.is-disabled { opacity: var(--o-disabled); }
.c-field__input:disabled { cursor: not-allowed; }
/* На небе (Dusk, отзывы) вторичный текст не ниже белого .85 (своё, правка мозга 11.10) */
.c-on-sky :where(.c-field__label, .c-field__hint, .c-field__input::placeholder, .c-head__lead) { color: var(--text-on-sky-2); }
.c-on-sky .c-field.is-error .c-field__hint { color: var(--text); }

/* Вариант подвала: pill 44 на --surface-1, кольцо внутрь .08 → .26, кнопка-стрелка внутри */
.c-field--foot .c-field__box {
  block-size: var(--control-md); padding-inline: var(--space-16) calc((var(--control-md) - var(--control-xs)) / 2);
  border-radius: var(--r-pill); background: var(--surface-1); box-shadow: inset 0 0 0 var(--line) var(--stroke-faint);
}
.c-field--foot .c-field__box:focus-within, .c-field--foot.is-focus .c-field__box { box-shadow: inset 0 0 0 var(--line) var(--stroke-faint-focus); }
.c-field--foot.is-error .c-field__box { box-shadow: inset 0 0 0 var(--line) var(--score-bad); }
.c-field__go {
  display: grid; place-items: center; flex: none; inline-size: var(--control-xs); block-size: var(--control-xs);
  padding: 0; border: 0; border-radius: var(--r-pill); background: var(--white); color: var(--gray-950); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-std);
}
.c-field__go:where(:hover:not(:disabled), .is-hover) { background: var(--gray-100); }
.c-field__go:active:not(:disabled) { translate: 0 var(--line); }
.c-field__go:disabled { cursor: not-allowed; }


/* ── 13. Логотипы ────────────────────────────────────────────── */
.c-logos { display: grid; gap: var(--space-48); justify-items: center; text-align: center; }
.c-logos__row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--space-32) var(--space-48); inline-size: 100%;
}
/* Знак клиента — svg на currentColor, серый как у SW; пустышка — плашка стекла без текста, держит ряд */
.c-logos__mark { display: block; flex: none; block-size: var(--logo-h); inline-size: auto; max-inline-size: 100%; color: var(--text-3); }
.c-logos__mark--blank { inline-size: var(--space-96); border-radius: var(--r-xs); background: var(--glass); }


/* ── 14. QR + кнопки ─────────────────────────────────────────── */
.c-qr { display: grid; grid-template-columns: var(--qr) minmax(0, 1fr); gap: var(--space-24); align-items: center; }
.c-qr__code {
  display: grid; place-items: center; inline-size: var(--qr); block-size: var(--qr);
  border-radius: var(--r-md); background: var(--white); color: var(--ink);
}
.c-qr__body { display: grid; gap: var(--space-8); justify-items: start; }
.c-qr__title { font-size: var(--t-h3-size); font-weight: var(--t-h3-weight); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-ls); }
.c-qr__text { color: var(--text-3); font-size: var(--t-small-size); line-height: var(--t-small-lh); max-inline-size: 48ch; }
.c-qr__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-block-start: var(--space-8); }


/* ── 15. Подвал ──────────────────────────────────────────────── */
/* Состав строго по copy.md A11: знак, город, контакты; строка про автоматизацию; три ссылки */
.c-footer { display: grid; gap: var(--space-32); color: var(--text-3); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.c-footer__top { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-8) var(--space-24); }
/* Знак IceCold перед словом: высота от кегля слова, цвет от текста */
.c-logo-mark { flex: none; block-size: 1.3em; inline-size: auto; aspect-ratio: 52 / 66; fill: currentColor; }
.c-footer__logo { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--text); font-size: var(--t-title-size); font-weight: var(--fw-semibold); line-height: var(--t-title-lh); }
.c-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-24); }
.c-footer__link {
  justify-self: start; padding-block: var(--space-4); border-radius: var(--r-xs);
  color: var(--gray-600); text-decoration: none;
}
/* hover мгновенно, как у SW: без transition */
.c-footer__link:where(:hover, .is-hover) { color: var(--nav-link); }
.c-footer__next { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-16); color: var(--text-3); }
.c-footer__next p { max-inline-size: 65ch; }


/* ══ B. Проверка сайта и продажа (16–28) ═════════════════════════ */

/* Текстовая ссылка внутри строк: «или напишите нам в Telegram», «Автоматизация заявок» (своё) */
.c-link {
  display: inline-flex; align-items: center; gap: var(--space-4); border-radius: var(--r-xs);
  color: var(--text-2); text-decoration: underline; text-decoration-color: var(--text-4);
  text-underline-offset: var(--space-4); text-decoration-thickness: var(--line);
  transition: color var(--dur-fast) var(--ease-std), text-decoration-color var(--dur-fast) var(--ease-std);
}
.c-link:where(:hover, .is-hover) { color: var(--text); text-decoration-color: var(--text); }
.c-link:active { color: var(--text-3); }
.c-link .c-icon { flex: none; }

/* Кнопка-иконка: квадрат по высоте кнопки, круг (своё, для стрелок карусели) */
.c-btn--icon { inline-size: var(--h); padding: 0; }


/* ── 16. Поле проверки сайта ─────────────────────────────────── */
/* Таблетка 56 (--control-xl) на --surface-1, кольцо .08 → .26 в фокусе, кнопка внутри справа */
.c-check { display: grid; gap: var(--space-12); inline-size: 100%; max-inline-size: 36rem; }
.c-check__row {
  display: flex; align-items: center; gap: var(--space-8);
  block-size: var(--control-xl); box-sizing: border-box;
  padding-inline: var(--space-24) var(--space-4); border-radius: var(--r-pill);
  background: var(--surface-1); box-shadow: inset 0 0 0 var(--line) var(--stroke-faint);
  transition: box-shadow var(--dur-fast) var(--ease-std);
}
.c-check__row:has(.c-check__input:focus-visible), .c-check.is-focus .c-check__row { box-shadow: inset 0 0 0 var(--line) var(--stroke-faint-focus); }
.c-check.is-error .c-check__row { box-shadow: inset 0 0 0 var(--line) var(--score-bad); }
.c-check__field { display: flex; align-items: center; gap: var(--space-12); flex: 1; min-inline-size: 0; block-size: 100%; color: var(--text-3); }
.c-check__input {
  flex: 1; min-inline-size: 0; block-size: 100%; padding: 0; border: 0; outline: none; background: none;
  color: var(--text); caret-color: var(--text); font: inherit; font-size: var(--t-body-size); line-height: var(--t-body-lh);
}
.c-check__input::placeholder { color: var(--text-3); }
.c-check__input:disabled { color: var(--text-2); cursor: progress; }
.c-check__row .c-btn { flex: none; }
.c-check__msg { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8) var(--space-16); padding-inline: var(--space-24); color: var(--score-bad); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.c-check__msg .c-icon { flex: none; }
.c-check__proof { padding-inline: var(--space-24); color: var(--text-3); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); font-variant-numeric: tabular-nums; }
.c-check__price { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); padding-inline: var(--space-24); color: var(--text-3); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); font-variant-numeric: tabular-nums; }
.c-on-sky :where(.c-check__proof, .c-check__price) { color: var(--text-on-sky-2); }
.c-on-sky .c-check__msg { color: var(--text); }


/* ── 17. Прогресс проверки ───────────────────────────────────── */
.c-progress { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); gap: var(--space-48); align-items: start; }
.c-progress__main { display: grid; gap: var(--space-24); }
.c-progress__title { font-size: var(--t-title-size); font-weight: var(--t-title-weight); line-height: var(--t-title-lh); letter-spacing: var(--t-title-ls); }
.c-progress__site { color: var(--text-2); overflow-wrap: anywhere; }
/* Полоса 2 px: --accent по --stroke; доля — --p в разметке */
.c-progress__bar { --p: 0%; block-size: var(--bar-2); border-radius: var(--r-pill); background: var(--stroke); overflow: hidden; }
.c-progress__bar::before {
  content: ""; display: block; inline-size: var(--p); block-size: 100%; border-radius: inherit; background: var(--accent);
  transition: inline-size var(--dur-mid) var(--ease-out-soft);
}
.c-progress__list { display: grid; gap: var(--space-16); }
.c-progress__row { display: grid; grid-template-columns: var(--tile-24) minmax(0, 1fr) auto; gap: var(--space-12); align-items: center; }
.c-progress__mark { display: grid; place-items: center; inline-size: var(--tile-24); block-size: var(--tile-24); border-radius: var(--r-tile); background: var(--glass); color: var(--text-3); }
/* Ждёт: точка --text-4 (не текст, норма 3:1, на чёрном 3,7:1) */
.c-progress__mark::before { content: ""; inline-size: var(--dot); block-size: var(--dot); border-radius: var(--r-pill); background: var(--text-4); }
.c-progress__mark:has(.c-icon)::before { content: none; }
.c-progress__row.is-run .c-progress__mark::before { background: var(--accent); animation: c-pulse var(--dur-slow) var(--ease-std) infinite; }
.c-progress__row.is-good .c-progress__mark { color: var(--score-good); background: color-mix(in srgb, var(--score-good) 16%, transparent); }
.c-progress__row.is-mid  .c-progress__mark { color: var(--score-mid);  background: color-mix(in srgb, var(--score-mid) 16%, transparent); }
.c-progress__row.is-bad  .c-progress__mark { color: var(--score-bad);  background: color-mix(in srgb, var(--score-bad) 16%, transparent); }
.c-progress__name { color: var(--text-2); font-size: var(--t-small-size); font-weight: var(--fw-medium); line-height: var(--t-small-lh); }
.c-progress__row:where(.is-run, .is-good, .is-mid, .is-bad) .c-progress__name { color: var(--text); }
.c-progress__status { color: var(--text-3); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); white-space: nowrap; font-variant-numeric: tabular-nums; }
@keyframes c-pulse { 50% { opacity: var(--o-disabled); scale: .6; } }

/* Карточка «куда прислать» рядом с прогрессом */
.c-lead {
  display: grid; gap: var(--space-16); box-sizing: border-box; padding: var(--space-24);
  border-radius: var(--r-lg); background: var(--surface-1); box-shadow: inset 0 0 0 var(--line) var(--stroke);
}
.c-lead__title { font-size: var(--t-title-size); font-weight: var(--t-title-weight); line-height: var(--t-title-lh); letter-spacing: var(--t-title-ls); text-wrap: balance; }
.c-lead__or { font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.c-lead__note { color: var(--text-3); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); }
.c-lead__who { display: flex; align-items: center; gap: var(--space-12); color: var(--text-3); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); }


/* ── 18. Оценка ──────────────────────────────────────────────── */
/* Окно на тинте оценки; число display-xl цветом оценки, «из 100» --text-2; шкала 4 px с меткой */
.c-score {
  --hue: var(--score-bad); --tint: var(--tint-red); --v: 0;
  display: grid; gap: var(--space-24); box-sizing: border-box; padding: var(--space-32);
  border-radius: var(--r-xl); background: var(--tint); box-shadow: inset 0 0 0 var(--line) var(--stroke-faint);
}
.c-score--mid  { --hue: var(--score-mid);  --tint: var(--tint-yellow); }
.c-score--good { --hue: var(--score-good); --tint: var(--tint-green); }
.c-score__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-8) var(--space-16); }
.c-score__site { color: var(--text-2); font-size: var(--t-small-size); line-height: var(--t-small-lh); overflow-wrap: anywhere; }
/* Метка на тинте той же оценки: подложка чёрная, иначе фон метки сливается с окном */
.c-score .c-badge { --b-bg: var(--black); }
.c-score__num { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-8); font-variant-numeric: tabular-nums; }
.c-score__value {
  color: var(--hue);
  font-size: var(--t-display-xl-size); font-weight: var(--t-display-xl-weight); line-height: var(--t-display-xl-lh); letter-spacing: var(--t-display-xl-ls);
}
.c-score__of { color: var(--text-2); white-space: nowrap; font-size: var(--t-title-size); font-weight: var(--t-title-weight); line-height: var(--t-title-lh); }
.c-score__scale { position: relative; block-size: var(--space-4); border-radius: var(--r-pill); background: var(--glass); }
.c-score__scale::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--v) * 1%); border-radius: inherit; background: var(--hue); }
.c-score__scale::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: calc(var(--v) * 1%);
  inline-size: var(--space-12); block-size: var(--space-12); border-radius: var(--r-pill);
  background: var(--hue); box-shadow: 0 0 0 var(--bar-2) var(--tint); translate: -50% -50%;
}
.c-score__verdict { max-inline-size: 60ch; color: var(--text); text-wrap: pretty; font-size: var(--t-body-size); line-height: var(--t-body-lh); }
.c-score__list { display: grid; gap: var(--space-8); }
.c-score__next { display: grid; gap: var(--space-8); justify-items: start; max-inline-size: 60ch; color: var(--text-2); font-size: var(--t-small-size); line-height: var(--t-small-lh); }


/* ── 19. Проблема ────────────────────────────────────────────── */
/* Раскрытие как у FAQ (grid-rows + visibility); отдельные плашки --surface-1 вместо разделителей */
.c-issues { display: grid; gap: var(--space-8); }
.c-issue { border-radius: var(--r-lg); background: var(--surface-1); box-shadow: inset 0 0 0 var(--line) var(--stroke); }
.c-issue__q {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-12) var(--space-16);
  inline-size: 100%; min-block-size: var(--row-h); box-sizing: border-box; padding: var(--space-16) var(--space-24);
  border: 0; border-radius: var(--r-lg); background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-std);
}
.c-issue__q:where(:hover, .is-hover) { background: var(--glass); }
.c-issue__sev { inline-size: var(--space-8); block-size: var(--space-8); border-radius: var(--r-pill); background: var(--score-bad); }
.c-issue__sev--mid { background: var(--score-mid); }
.c-issue__title { font-size: var(--t-body-size); font-weight: var(--fw-medium); line-height: var(--t-body-lh); text-wrap: pretty; }
.c-issue__chev { color: var(--text-3); transition: rotate var(--dur-mid) var(--ease-out-soft); }
.c-issue__q[aria-expanded="true"] .c-issue__chev { rotate: 180deg; }
.c-issue__a {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows var(--dur-mid) var(--ease-out-soft), visibility 0s linear var(--dur-mid);
}
.c-issue__q[aria-expanded="true"] + .c-issue__a { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.c-issue__a > div { overflow: hidden; min-block-size: 0; }
.c-issue__body { display: grid; gap: var(--space-16); padding: 0 var(--space-24) var(--space-24) calc(var(--space-24) + var(--space-8) + var(--space-16)); }
.c-issue__why { max-inline-size: 60ch; color: var(--text-3); font-size: var(--t-body-size); line-height: var(--t-body-lh); text-wrap: pretty; }
/* Доказательство: цифра движка крупно, на плашке */
.c-issue__proof { display: grid; gap: var(--space-4); justify-self: start; padding: var(--space-12) var(--space-16); border-radius: var(--r-md); background: var(--glass); }
.c-issue__value { font-size: var(--t-title-size); font-weight: var(--fw-medium); line-height: var(--t-title-lh); font-variant-numeric: tabular-nums; }
.c-issue__norm { color: var(--text-3); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); font-variant-numeric: tabular-nums; }
.c-issue__fix { display: grid; gap: var(--space-8); justify-items: start; }
.c-issue__fix-title { font-size: var(--t-small-size); font-weight: var(--fw-semibold); line-height: var(--t-small-lh); }
.c-issue__fix p:not(.c-issue__fix-title) { max-inline-size: 60ch; color: var(--text-2); font-size: var(--t-small-size); line-height: var(--t-small-lh); }

/* Замок: строки уходят в чёрное маской-градиентом, без backdrop-filter */
.c-lock { position: relative; display: grid; }
.c-lock__ghost {
  display: grid; gap: var(--space-8); pointer-events: none; user-select: none;
  -webkit-mask: linear-gradient(to bottom, var(--black), transparent 85%); mask: linear-gradient(to bottom, var(--black), transparent 85%);
}
.c-lock__body {
  display: grid; gap: var(--space-16); justify-items: center; text-align: center;
  margin-block-start: calc(-1 * var(--space-64)); padding-inline: var(--space-24);
}
.c-lock__icon { display: grid; place-items: center; inline-size: var(--control-sm); block-size: var(--control-sm); border-radius: var(--r-pill); background: var(--glass); color: var(--text); }
.c-lock__text { max-inline-size: 44ch; color: var(--text-2); text-wrap: balance; }


/* ── 20. Шаги ────────────────────────────────────────────────── */
/* Без номеров (правило владельца); линия 1 px --stroke через плитки — контрактный разделитель */
.c-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-32); margin: 0; padding: 0; list-style: none; }
.c-steps::before {
  content: ""; position: absolute; z-index: -1; inset-block-start: calc(var(--tile-24) / 2); inset-inline: 0;
  block-size: var(--line); background: var(--stroke);
}
.c-steps { isolation: isolate; }
.c-step { display: grid; gap: var(--space-8); align-content: start; }
/* Плитка непрозрачная (тинт поверх --bg), чтобы линия шла под ней, а не сквозь */
.c-step .c-feature__tile { background: color-mix(in srgb, var(--hue) 16%, var(--bg)); box-shadow: 0 0 0 var(--space-8) var(--bg); margin-block-end: var(--space-8); }
.c-step__title { font-size: var(--t-title-size); font-weight: var(--t-title-weight); line-height: var(--t-title-lh); letter-spacing: var(--t-title-ls); }
.c-step__text { max-inline-size: 32ch; color: var(--text-3); font-size: var(--t-small-size); line-height: var(--t-small-lh); text-wrap: pretty; }
.c-step__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); color: var(--text-2); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); font-variant-numeric: tabular-nums; }
.c-steps-note { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); margin-block-start: var(--space-32); color: var(--text-2); font-size: var(--t-small-size); line-height: var(--t-small-lh); }


/* ── 21. Кейс ────────────────────────────────────────────────── */
/* Вертикальная на всех экранах (владелец, 11.10), ширина от слота: колонка или элемент ленты.
   Фото-мокап в среде клиента (ICECOLD-V2-PHOTO.md, «Мокапы кейсов») 4:5 от ширины карточки стоит сверху и
   растворяется вниз в тинт кейса. Текст начинается на 60 % высоты фото (отступ 75 % ширины), ниже экрана
   устройства, — на любой ширине и при любой длине текста; карточка растёт по тексту.
   Фото задаёт разметка: --case-card на article, url относительно листа. Нет файла — пустой тинт.
   Hover: фото крупнее на 3 %, карточка на месте */
.c-case {
  --tint: var(--tint-red);
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-content: end;
  border-radius: var(--r-xl); background: var(--tint);
}
.c-case--blue   { --tint: var(--tint-blue); }
.c-case--pink   { --tint: var(--tint-pink); }
.c-case--teal   { --tint: var(--tint-teal); }
.c-case--red    { --tint: var(--tint-red); }
.c-case--green  { --tint: var(--tint-green); }
.c-case--yellow { --tint: var(--tint-yellow); }
.c-case__photo {
  position: absolute; inset: 0 0 auto; aspect-ratio: 4 / 5; z-index: -1; pointer-events: none;
  /* Растворение в тинт: прозрачно до 45 %, сплошь с 75 % высоты фото — те же стопы, что у .c-card__scene */
  background: linear-gradient(to bottom, transparent 45%, var(--tint) 75%), var(--case-card, none) center top / cover no-repeat;
  transition: scale var(--dur-mid) var(--ease-out-soft);
}
.c-case:where(:hover, :focus-within, .is-hover) .c-case__photo { scale: 1.03; }
.c-case__body { display: grid; gap: var(--space-8); justify-items: start; padding: 75% var(--space-24) var(--space-24); }
.c-case__title { font-size: var(--t-title-size); font-weight: var(--t-title-weight); line-height: var(--t-title-lh); letter-spacing: var(--t-title-ls); }
.c-case__text { max-inline-size: 40ch; color: var(--text-3); font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); text-wrap: pretty; }
.c-case__body .c-btn { margin-block-start: var(--space-8); }

/* Малая 320 (около 400 в высоту) для компактной ленты B8: та же логика фото, caption-текст, кнопка --sm */
.c-case--sm { flex: none; scroll-snap-align: start; inline-size: var(--card-feature-w); }
.c-case--sm .c-case__body { gap: var(--space-4); }
.c-case--sm .c-case__title { font-size: var(--t-card-title-size); line-height: var(--t-card-title-lh); letter-spacing: var(--t-card-title-ls); }
.c-case--sm .c-case__text { font-size: var(--t-caption-size); line-height: var(--t-caption-lh); }
.c-case__more { display: flex; align-items: center; gap: var(--space-8); margin-block-start: var(--space-24); color: var(--text-3); font-size: var(--t-small-size); line-height: var(--t-small-lh); }


/* ── 23. Основатель ──────────────────────────────────────────── */
.c-founder { display: grid; grid-template-columns: minmax(12rem, 20rem) minmax(0, 1fr); gap: var(--space-48); align-items: end; }
/* Фото 3:4, r20; пока нет — серая плашка с иконкой */
.c-founder__photo {
  display: grid; place-items: center; align-content: center; gap: var(--space-8); aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--r-lg); background: var(--surface-2); color: var(--text-3);
}
.c-founder__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.c-founder__body { display: grid; gap: var(--space-24); justify-items: start; }
.c-founder__who { display: grid; gap: var(--space-4); }
.c-founder__name { font-size: var(--t-title-size); font-weight: var(--t-title-weight); line-height: var(--t-title-lh); letter-spacing: var(--t-title-ls); }
.c-founder__role { color: var(--text-3); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.c-founder__quote { margin: 0; max-inline-size: 44ch; color: var(--text); text-wrap: pretty; font-size: var(--t-body-size); line-height: var(--t-body-lh); }
.c-founder__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }


/* ── 24. Замер числом ────────────────────────────────────────── */
.c-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-32); }
.c-stat { display: grid; gap: var(--space-12); align-content: start; }
.c-stat__num {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-8); font-variant-numeric: tabular-nums;
  font-size: var(--t-display-2-size); font-weight: var(--t-display-2-weight); line-height: var(--t-display-2-lh); letter-spacing: var(--t-display-2-ls);
}
.c-stat__unit { color: var(--text-2); white-space: nowrap; font-size: var(--t-title-size); font-weight: var(--t-title-weight); line-height: var(--t-title-lh); }
.c-stat__text { max-inline-size: 34ch; color: var(--text-3); font-size: var(--t-small-size); line-height: var(--t-small-lh); text-wrap: pretty; font-variant-numeric: tabular-nums; }
/* Источник: --text-3, а не --text-4 из контракта — --text-4 только от 24 px */
.c-stats__src { max-inline-size: 72ch; margin-block-start: var(--space-32); color: var(--text-3); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); }


/* ── 25. Форма заявки ────────────────────────────────────────── */
.c-form {
  display: grid; gap: var(--space-24); box-sizing: border-box; max-inline-size: 36rem; padding: var(--space-32);
  border-radius: var(--r-xl); background: var(--surface-1); box-shadow: inset 0 0 0 var(--line) var(--stroke);
}
.c-form__title { font-size: var(--t-h3-size); font-weight: var(--t-h3-weight); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-ls); text-wrap: balance; }
.c-form__fields { display: grid; gap: var(--space-16); }
.c-form .c-seg { justify-self: start; }
.c-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); }
/* Строка под кнопкой: --text-3, а не --text-4 из контракта — 12 px */
.c-form__note { color: var(--text-3); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); }
.c-form__done { display: grid; gap: var(--space-16); justify-items: start; }
.c-form__done-icon { display: grid; place-items: center; inline-size: var(--control-sm); block-size: var(--control-sm); border-radius: var(--r-pill); background: color-mix(in srgb, var(--score-good) 16%, transparent); color: var(--score-good); }
.c-form__done-text { max-inline-size: 40ch; color: var(--text); font-size: var(--t-lead-size); line-height: var(--t-lead-lh); text-wrap: pretty; }


/* ── 26. До и после ──────────────────────────────────────────── */
/* «Сейчас» на тинте оценки, «После» на небе карточки (240 %, тёмная часть), между ними стрелка */
.c-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-16); align-items: center; }
.c-compare__side {
  --tint: var(--tint-red); --hue: var(--score-bad);
  display: grid; gap: var(--space-16); align-content: start; align-self: stretch; box-sizing: border-box; padding: var(--space-24);
  border-radius: var(--r-xl); background: var(--tint); box-shadow: inset 0 0 0 var(--line) var(--stroke-faint);
}
.c-compare__side--after { background: var(--sky-card) top / 100% 240% no-repeat; box-shadow: none; }
.c-compare__label { color: var(--text-2); font-size: var(--t-small-size); font-weight: var(--fw-medium); line-height: var(--t-small-lh); }
.c-compare__side--after .c-compare__label { color: var(--text-on-sky-2); }
.c-compare__score { color: var(--hue); font-variant-numeric: tabular-nums; font-size: var(--t-h2-size); font-weight: var(--t-h2-weight); line-height: var(--t-h2-lh); }
.c-compare__rows { display: grid; gap: var(--space-8); }
.c-compare__row { display: flex; justify-content: space-between; gap: var(--space-16); font-size: var(--t-small-size); line-height: var(--t-small-lh); font-variant-numeric: tabular-nums; }
.c-compare__row > :first-child { color: var(--text-2); }
.c-compare__side--after .c-compare__row > :first-child { color: var(--text-on-sky-2); }
.c-compare__arrow { display: grid; place-items: center; inline-size: var(--control-sm); block-size: var(--control-sm); border-radius: var(--r-pill); background: var(--glass); color: var(--text); }


/* ── 27. Сравнение с конкурентами ────────────────────────────── */
.c-bench { display: grid; gap: var(--space-32); }
.c-bench__metric { display: grid; gap: var(--space-12); }
.c-bench__name { font-size: var(--t-small-size); font-weight: var(--fw-medium); line-height: var(--t-small-lh); }
.c-bench__rows { display: grid; gap: var(--space-8); }
.c-bench__row { --v: 0; --bar: var(--glass-hover); display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr) minmax(4rem, auto); gap: var(--space-16); align-items: center; }
.c-bench__row--you { --bar: var(--hue, var(--score-bad)); }
.c-bench__who { color: var(--text-3); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); }
.c-bench__row--you .c-bench__who { color: var(--text); font-weight: var(--fw-medium); }
.c-bench__track { block-size: var(--space-8); border-radius: var(--r-pill); background: var(--surface-1); overflow: hidden; }
.c-bench__track::before { content: ""; display: block; inline-size: calc(var(--v) * 1%); block-size: 100%; border-radius: inherit; background: var(--bar); }
.c-bench__val { justify-self: end; color: var(--text-2); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); font-variant-numeric: tabular-nums; }


/* ── 28. Плавающая кнопка ────────────────────────────────────── */
/* Таблетка 52 (--ring), Telegram 20, тень --shadow-float; на странице прижата справа внизу */
.c-float {
  position: fixed; inset-block-end: var(--space-24); inset-inline-end: var(--space-24); z-index: 5;
  box-shadow: inset 0 0 0 var(--line) var(--ring-dark), var(--shadow-float);
  transition: opacity var(--dur-mid) var(--ease-out-soft), translate var(--dur-mid) var(--ease-out-soft),
              background-color var(--dur-fast) var(--ease-std), visibility 0s linear 0s;
}
.c-float .c-icon { inline-size: var(--icon-20); block-size: var(--icon-20); }
/* Скрыта: первый экран и над формой заявки */
.c-float.is-hidden { opacity: 0; translate: 0 var(--space-16); visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease-out-soft), translate var(--dur-mid) var(--ease-out-soft), visibility 0s linear var(--dur-mid); }
/* Свёрнута: круг 52, подпись остаётся для чтения с экрана */
.c-float--mini { inline-size: var(--h); padding: 0; }
.c-float--mini .c-float__label {
  position: absolute; inline-size: var(--line); block-size: var(--line); overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}


/* ══ D. Доверие и мелкие детали (29–39) ═══════════════════════════ */

/* ── 29. Ряд аватаров ────────────────────────────────────────── */
.c-avatars { display: flex; align-items: center; gap: var(--space-12); }
.c-avatars__list { display: flex; }
.c-avatars__item {
  --hue: var(--blue-300);
  inline-size: var(--avatar); block-size: var(--avatar); flex: none; overflow: hidden; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--hue) 24%, var(--surface-2)); box-shadow: 0 0 0 var(--bar-2) var(--bg);
}
.c-avatars__item + .c-avatars__item { margin-inline-start: calc(-1 * var(--space-8)); }
.c-avatars__item img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.c-avatars__more { color: var(--text-3); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); font-variant-numeric: tabular-nums; }
.c-avatars__text { color: var(--text-2); font-size: var(--t-small-size); line-height: var(--t-small-lh); }


/* ── 30. Утверждение ─────────────────────────────────────────── */
.c-statement {
  max-inline-size: 24ch; color: var(--text-3); text-wrap: balance;
  font-size: var(--t-h2-size); font-weight: var(--t-h2-weight); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-ls);
}
.c-statement strong { color: var(--text); font-weight: inherit; }


/* ── 31. Список «что входит» ─────────────────────────────────── */
.c-checklist { display: grid; gap: var(--space-16); margin: 0; padding: 0; list-style: none; max-inline-size: var(--container-text); }
.c-checklist__item { display: grid; grid-template-columns: var(--tile-24) minmax(0, 1fr); gap: var(--space-12); align-items: start; color: var(--text-3); font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); }
.c-checklist__item .c-feature__tile { margin-block-start: calc((var(--t-body-sm-lh) - var(--tile-24)) / 2); }
.c-checklist__item b { color: var(--text); font-weight: var(--fw-semibold); }


/* ── 32. Фото с плашкой ──────────────────────────────────────── */
.c-photo {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--r-xl); background: var(--surface-2); color: var(--text-3);
}
.c-photo > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Плашка тёмного стекла (как шапка): на любом фото белый не ниже 4,5:1 */
.c-photo__plate {
  position: absolute; inset-block-end: var(--space-16); inset-inline-start: var(--space-16);
  display: grid; gap: var(--space-4); padding: var(--space-12) var(--space-16); border-radius: var(--r-md);
  background: var(--nav-fill); box-shadow: var(--ring-glass); -webkit-backdrop-filter: var(--blur-nav); backdrop-filter: var(--blur-nav);
  color: var(--text);
}
.c-photo__num { font-variant-numeric: tabular-nums; font-size: var(--t-title-size); font-weight: var(--fw-medium); line-height: var(--t-title-lh); }
.c-photo__cap { color: var(--text-on-sky-2); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); }


/* ── 33. Строка-ссылка ───────────────────────────────────────── */
/* Без номеров (правило владельца); разделитель между строками — контрактный */
.c-rowlinks { display: grid; }
.c-rowlink {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--space-4) var(--space-24); align-items: center;
  padding-block: var(--space-24); border-block-end: var(--line) solid var(--stroke); border-radius: var(--r-xs);
  color: var(--text); text-decoration: none;
}
.c-rowlink__title { font-size: var(--t-title-size); font-weight: var(--t-title-weight); line-height: var(--t-title-lh); letter-spacing: var(--t-title-ls); }
.c-rowlink__text { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); color: var(--text-3); font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); font-variant-numeric: tabular-nums; }
.c-rowlink__go {
  display: grid; place-items: center; inline-size: var(--control-xs); block-size: var(--control-xs); border-radius: var(--r-pill);
  background: var(--glass); color: var(--text);
  transition: background-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std), translate var(--dur-fast) var(--ease-std);
}
.c-rowlink__text { transition: color var(--dur-fast) var(--ease-std); }
.c-rowlink:where(:hover, .is-hover) .c-rowlink__text { color: var(--text); }
.c-rowlink:where(:hover, .is-hover) .c-rowlink__go { background: var(--white); color: var(--gray-950); }
.c-rowlink:active .c-rowlink__go { translate: 0 var(--line); }
.c-rowlinks__end { margin-block-start: var(--space-32); }


/* ── 34. Окно призыва ────────────────────────────────────────── */
/* Небо Dusk 180 %: в окне только тёмная часть 0–55 %, белый .85 не ниже 5,4:1 */
.c-cta {
  display: grid; gap: var(--space-24); justify-items: center; align-content: center; text-align: center;
  min-block-size: var(--cta-h); box-sizing: border-box; padding: var(--space-64) var(--space-32);
  border-radius: var(--r-2xl); background: var(--sky-dusk) top / 100% 180% no-repeat; color: var(--text);
}
.c-cta__title { max-inline-size: 24ch; text-wrap: balance; font-size: var(--t-h3-size); font-weight: var(--t-h3-weight); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-ls); }
.c-cta__text { max-inline-size: 56ch; color: var(--text-on-sky-2); text-wrap: pretty; }
.c-cta__note { max-inline-size: 56ch; color: var(--text-on-sky-2); font-size: var(--t-small-size); line-height: var(--t-small-lh); text-wrap: pretty; }


/* ── 35. Карусель ────────────────────────────────────────────── */
/* Круг 4 (13.10): лента сверху, под ней один ряд — счётчик слева, точки справа, стрелки после точек.
   Разметка прежняя (bar со счётчиком и стрелками, лента, точки): bar растворён, его дети встают в ряд грида */
.c-carousel {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "track track track" "count dots nav";
  align-items: center; gap: var(--space-24) var(--space-16);
}
.c-carousel__bar { display: contents; }
.c-carousel__count { grid-area: count; }
.c-carousel__nav { grid-area: nav; }
.c-carousel__track { grid-area: track; }
.c-carousel__count { color: var(--text-3); font-size: var(--t-small-size); line-height: var(--t-small-lh); font-variant-numeric: tabular-nums; }
.c-carousel__count b { color: var(--text); font-weight: var(--fw-medium); }
.c-carousel__nav { display: flex; gap: var(--space-8); }
.c-carousel__track {
  display: flex; gap: var(--space-16); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
/* Базовая карточка кейса в ленте — треть окна, три в окне; малая --sm держит свои 320 */
.c-carousel__track > .c-case:not(.c-case--sm) { flex: 0 0 max(var(--card-feature-w-m), calc((100% - 2 * var(--space-16)) / 3)); scroll-snap-align: start; }
.c-carousel__track::-webkit-scrollbar { display: none; }
.c-carousel .c-dots { grid-area: dots; justify-self: end; margin-block-start: 0; }


/* ── 36. Рейтинг ─────────────────────────────────────────────── */
.c-rating {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-8) var(--space-12);
  padding: var(--space-12) var(--space-16); border-radius: var(--r-md); background: var(--glass); box-shadow: inset 0 0 0 var(--line) var(--stroke-faint);
}
.c-rating__value { font-variant-numeric: tabular-nums; font-size: var(--t-title-size); font-weight: var(--fw-medium); line-height: var(--t-title-lh); }
.c-rating__stars { display: flex; gap: var(--line); color: var(--yellow-500); }
.c-rating__stars .c-icon { inline-size: var(--space-12); block-size: var(--space-12); }
.c-rating__count { color: var(--text-3); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); }


/* ── 37. Чипы выбора ─────────────────────────────────────────── */
/* Таблетка 36 (--chip-h) на --surface-1, кольцо --stroke; выбран — белый с --gray-950 */
.c-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.c-chips__chip {
  display: inline-flex; align-items: center; gap: var(--space-8);
  block-size: var(--chip-h); box-sizing: border-box; padding-inline: var(--space-16);
  border: 0; border-radius: var(--r-pill); background: var(--surface-1); box-shadow: inset 0 0 0 var(--line) var(--stroke);
  color: var(--text-2); font: inherit; font-size: var(--t-small-size); font-weight: var(--fw-medium); line-height: var(--t-small-lh);
  white-space: nowrap; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-std), background-color var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std);
}
.c-chips__chip:where(:hover:not(:disabled), .is-hover):not([aria-pressed="true"]) { color: var(--text); box-shadow: inset 0 0 0 var(--line) var(--stroke-glass); }
.c-chips__chip[aria-pressed="true"] { background: var(--white); color: var(--gray-950); box-shadow: none; }
.c-chips__chip:where(:active:not(:disabled), .is-active) { translate: 0 var(--line); }
.c-chips__chip:where(:disabled, .is-disabled) { opacity: var(--o-disabled); cursor: not-allowed; }


/* ── 38. Флажок ──────────────────────────────────────────────── */
/* Квадрат 18 (16 + 2 линии), r4, кольцо .2; отмечен — белый с галочкой --gray-950 */
.c-checkbox { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-8) var(--space-12); align-items: start; cursor: pointer; }
.c-checkbox__box { position: relative; display: grid; place-items: center; margin-block-start: var(--line); }
.c-checkbox__input {
  appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer;
  inline-size: var(--check-box); block-size: var(--check-box);
  border-radius: var(--r-xs); background: none; box-shadow: inset 0 0 0 var(--line) var(--stroke-glass);
  transition: background-color var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std);
}
.c-checkbox:where(:hover, .is-hover) .c-checkbox__input:not(:checked, :disabled) { box-shadow: inset 0 0 0 var(--line) var(--stroke-glass-focus); }
.c-checkbox__input:checked { background: var(--white); box-shadow: none; }
.c-checkbox__mark { position: absolute; inline-size: var(--space-12); block-size: var(--space-12); color: var(--gray-950); opacity: 0; pointer-events: none; }
.c-checkbox__input:checked + .c-checkbox__mark { opacity: 1; }
.c-checkbox__input:disabled { cursor: not-allowed; }
.c-checkbox:has(:disabled) { opacity: var(--o-disabled); cursor: not-allowed; }
.c-checkbox__text { color: var(--text-3); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); text-wrap: pretty; }
.c-checkbox__text .c-link { display: inline; }
.c-checkbox__hint { grid-column: 2; color: var(--score-bad); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); }
.c-checkbox.is-error .c-checkbox__input { box-shadow: inset 0 0 0 var(--line) var(--score-bad); }


/* ── 39. Человек и контакты ──────────────────────────────────── */
.c-person { display: flex; align-items: center; gap: var(--space-12); }
.c-person__avatar { flex: none; inline-size: var(--control-sm); block-size: var(--control-sm); overflow: hidden; border-radius: var(--r-pill); background: var(--surface-2); }
.c-person__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.c-person__name { display: block; font-size: var(--t-small-size); font-weight: var(--fw-semibold); line-height: var(--t-small-lh); }
.c-person__role { display: block; color: var(--text-3); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); }
.c-contacts { display: flex; flex-wrap: wrap; gap: var(--space-16) var(--space-48); margin: 0; }
.c-contacts__item { display: grid; gap: var(--space-4); }
/* Метка --text-3, а не --text-4 из контракта — 12 px */
.c-contacts__label { color: var(--text-3); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); }
.c-contacts__value { margin: 0; font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); font-variant-numeric: tabular-nums; }


/* ── 390: раскладка по ширине контейнера c-vp ───────────────── */
@container c-vp (max-width: 640px) {
  .c-nav { inline-size: 100%; min-inline-size: 0; padding-inline-end: var(--space-4); }
  .c-nav__links, .c-nav__end { display: none; }
  .c-nav__menu { display: inline-flex; }

  .c-cards { margin-inline: calc(-1 * var(--space-24)); padding-inline: var(--space-24); scroll-padding-inline: var(--space-24); }
  .c-card { inline-size: var(--card-feature-w-m); }

  .c-features--col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24) var(--space-16); }

  .c-prices { flex-direction: column; }
  .c-price { inline-size: 100%; min-block-size: 0; padding: var(--space-24); }
  .c-price--sky { order: -1; }

  /* Отзыв перестраивается своим запросом c-reviews (раздел 10) */

  .c-faq { grid-template-columns: minmax(0, 1fr); gap: var(--space-48); }
  .c-faq__q { font-size: var(--t-body-size); line-height: var(--t-body-lh); }

  .c-logos__row { gap: var(--space-24) var(--space-16); }

  .c-qr { grid-template-columns: minmax(0, 1fr); }
  .c-qr__code { display: none; }

  .c-footer__links { flex-direction: column; gap: 0; }
  .c-footer__link { display: flex; align-items: center; min-block-size: var(--control-md); padding-block: 0; }

  /* B и D */
  .c-check__row { flex-direction: column; align-items: stretch; gap: var(--space-8); block-size: auto; padding: 0; background: none; box-shadow: none; }
  /* flex: none — иначе flex: 1 в колонке обнуляет высоту и поле сплющивается в линию */
  .c-check__field {
    flex: none; block-size: var(--field-h); padding-inline: var(--space-16); border-radius: var(--r-pill);
    background: var(--surface-1); box-shadow: inset 0 0 0 var(--line) var(--stroke-faint);
  }
  .c-check__row:has(.c-check__input:focus-visible), .c-check.is-focus .c-check__row { box-shadow: none; }
  .c-check__field:has(.c-check__input:focus-visible), .c-check.is-focus .c-check__field { box-shadow: inset 0 0 0 var(--line) var(--stroke-faint-focus); }
  .c-check.is-error .c-check__row { box-shadow: none; }
  .c-check.is-error .c-check__field { box-shadow: inset 0 0 0 var(--line) var(--score-bad); }
  .c-check__row .c-btn { --h: var(--control-lg); inline-size: 100%; }
  .c-check__msg, .c-check__proof, .c-check__price { padding-inline: var(--space-16); }

  .c-progress { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }

  .c-score { padding: var(--space-24); }

  .c-issue__q { grid-template-columns: auto minmax(0, 1fr) auto; padding-inline: var(--space-16); }
  .c-issue__q .c-badge { grid-column: 2; grid-row: 2; justify-self: start; }
  .c-issue__body { padding: 0 var(--space-16) var(--space-16); }

  .c-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  .c-steps::before { inset-block: 0; inset-inline: calc(var(--tile-24) / 2) auto; inline-size: var(--line); block-size: auto; }
  .c-step { grid-template-columns: var(--tile-24) minmax(0, 1fr); column-gap: var(--space-16); }
  .c-step > :not(.c-feature__tile) { grid-column: 2; }
  .c-step .c-feature__tile { grid-row: 1 / span 3; margin-block-end: 0; }

  .c-case--sm { inline-size: var(--card-feature-w-m); }

  .c-founder { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  .c-founder__photo { aspect-ratio: 4 / 3; }

  .c-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24) var(--space-16); }

  .c-form { padding: var(--space-24); }
  .c-form__actions .c-btn { inline-size: 100%; }

  .c-compare { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .c-compare__arrow { justify-self: center; rotate: 90deg; }

  .c-bench { gap: var(--space-8); }
  .c-bench__metric { padding: var(--space-16); border-radius: var(--r-lg); background: var(--surface-1); }
  .c-bench__track { background: var(--surface-2); }
  .c-bench__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-4); }
  .c-bench__track { grid-column: 1 / -1; grid-row: 2; }

  .c-float { inset-block-end: calc(var(--space-16) + env(safe-area-inset-bottom, 0px)); inset-inline-end: var(--space-16); }

  .c-statement { max-inline-size: none; }

  .c-cta { min-block-size: 0; padding: var(--space-48) var(--space-24); border-radius: var(--r-xl); }

  .c-carousel__nav { display: none; }
  .c-carousel__track { margin-inline: calc(-1 * var(--space-24)); padding-inline: var(--space-24); scroll-padding-inline: var(--space-24); }
  .c-carousel__track > .c-case:not(.c-case--sm) { flex-basis: var(--card-feature-w-m); }
  .c-carousel { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "track track" "count dots"; }

  .c-rowlink { grid-template-columns: minmax(0, 1fr) auto; padding-block: var(--space-16); }
  .c-rowlink__title { font-size: var(--t-card-title-size); line-height: var(--t-card-title-lh); font-weight: var(--fw-medium); }
  .c-rowlink__text { grid-column: 1; }
  .c-rowlink__go { grid-column: 2; grid-row: 1 / span 2; }
  .c-rowlinks__end .c-btn { inline-size: 100%; }

  .c-contacts { flex-direction: column; }
}

/* Без движения: все переходы и анимации компонентов c-* (A, B, D) мгновенные */
@media (prefers-reduced-motion: reduce) {
  :where([class^="c-"], [class*=" c-"]), :where([class^="c-"], [class*=" c-"])::before,
  :where([class^="c-"], [class*=" c-"])::after { transition: none; animation: none; }
}


/* ══ Варианты 13.10.2026 (правки главной A) ═══════════════════════ */

/* ── 6b. Двухцветный заголовок, обратный порядок ─────────────── */
/* Первая фраза основная, вторая приглушена белым .5 (хиро главной). Фразы блоками, не <br>.
   На тёмном верху неба Dusk (0–20 % градиента) белый .5 даёт около 5:1 */
.c-head__title--two-rev > span { display: block; }
.c-head__title--two-rev > span:last-child { color: var(--text-3); }


/* ── 7b. Карточка-список ─────────────────────────────────────── */
/* Карточка смысла без сцены и фиксированного размера: плитка и название сверху, ниже строки с иконкой
   предупреждения. Поверхность нейтральная, как у тарифа; цвет несут плитка и иконки. Высоту в ряду ровняет сетка */
.c-card--list { --tint: var(--surface-1); inline-size: auto; block-size: auto; gap: var(--space-24); box-shadow: inset 0 0 0 var(--line) var(--stroke); }
.c-card__head { display: flex; align-items: center; gap: var(--space-12); }
.c-card--list .c-card__title {
  color: var(--text);
  font-size: var(--t-title-size); font-weight: var(--t-title-weight); line-height: var(--t-title-lh); letter-spacing: var(--t-title-ls);
}
.c-card__rows { display: grid; gap: var(--space-12); margin: 0; padding: 0; list-style: none; }
.c-card__row {
  display: grid; grid-template-columns: var(--icon-16) minmax(0, 1fr); gap: var(--space-12); align-items: start;
  color: var(--text-2); font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); text-wrap: pretty;
}
.c-card__row .c-icon { margin-block-start: calc((var(--t-body-sm-lh) - var(--icon-16)) / 2); color: var(--score-bad); }


/* ── 20b. Шаги с номерами `.c-steps--num` ────────────────────── */
/* Владелец 13.10: шаги явно последовательные. Цифра display-2 и путь со стрелкой к следующему шагу:
   слева направо на 1440, сверху вниз на 390. Плиток и общей линии нет. Разметка: li.c-step >
   span.c-step__num[aria-hidden] (span.c-step__digit + span.c-step__path со стрелкой svg.c-step__arrow, у последнего пути нет)
   + div.c-step__body (заголовок, текст, мета) */
.c-steps--num::before { content: none; }
.c-steps--num .c-step { gap: var(--space-16); }
.c-step__num { display: flex; align-items: center; color: var(--text); }
.c-step__digit {
  flex: none; font-variant-numeric: tabular-nums;
  font-size: var(--t-display-2-size); font-weight: var(--t-display-2-weight); line-height: var(--t-display-2-lh); letter-spacing: var(--t-display-2-ls);
}
/* Путь: от цифры через зазор сетки (32), острие за 16 до цифры соседа.
   Круг 5: вся стрелка одним svg без viewBox (единицы = px), а не линия-блок + заливка-блок + иконка: те вставали на
   пиксельную сетку по-разному, заливка уходила вбок, на острие складывались две полупрозрачные обводки.
   Внутри две группы одной геометрии: дорожка g.c-step__track и заливка g.c-step__fill, в каждой line по процентам
   и наконечник вложенным svg.c-step__tip ровно в конце линии. Прозрачность на группу, не в цвете обводки: на острие
   обводки линии и наконечника не складываются. Поперечник 15 (нечётный): линия 1 px по оси 7,5 ложится на пиксель.
   Две ориентации — два svg: .c-step__arrow--x (1440) и .c-step__arrow--y (390), атрибуты линий CSS не трогает */
.c-step__path {
  display: flex; align-items: center; flex: 1; min-inline-size: 0;
  margin-inline: var(--space-16) calc(var(--space-16) - var(--space-32));
}
/* Размер вдоль пути 0, длину даёт рост flex от основы auto (= этот 0). Без него svg берёт умолчание 300×150:
   на 1440 путь вылезал за колонку на соседнюю цифру, на 390 высота 150 раздувала шаг. Основа 0% (flex: 1)
   не годится: в колонке без высоты процент не считается, и браузер снова берёт 150 */
.c-step__arrow {
  display: block; flex: 1 1 auto; inline-size: 0; min-inline-size: 0; block-size: calc(var(--space-16) - var(--line)); overflow: visible;
  fill: none; stroke: var(--white); stroke-width: var(--line); stroke-linejoin: round;
}
.c-step__arrow line { stroke-linecap: butt; }
.c-step__arrow path { stroke-linecap: round; }
.c-step__tip { overflow: visible; }
.c-step__arrow--y { display: none; }
/* Дорожка .2, как --stroke-glass; заливка .375 поверх: вместе 1 − .8 × .625 = .5, как прежняя стрелка --text-3 */
.c-step__track { opacity: 0.2; }
.c-step__fill { opacity: 0.375; }
.c-step__body { display: grid; gap: var(--space-8); align-content: start; }

/* ── 20c. Путь шагов оживает `.c-steps--flow` ────────────────── */
/* Круг 4 (правка c_0dd3760706a8): поверх линии пути тонкая заливка --text-3 растёт от цифры к стрелке по мере
   прокрутки блока, цифра шага разгорается с .5 до 1, когда заливка до неё дошла. Как течение времени: тихо, без вспышек.
   Scroll-driven (view-timeline списка) под @supports; без него страница ставит .is-armed, если список ниже экрана,
   и .is-on при входе: заливка проходит один раз за ~2 с. Без движения, без JS и при reduce всё заполнено сразу.
   Шаг k = 0…3 по порядку; окно шага k — 10 % пути списка через экран, с 25 % */
.c-steps--flow .c-step:nth-child(2) { --k: 1; }
.c-steps--flow .c-step:nth-child(3) { --k: 2; }
.c-steps--flow .c-step:nth-child(4) { --k: 3; }
/* Круг 5: растёт линия заливки от начала (view-box своего svg, угол 0 0), наконечник заливки проявляется
   в последние 20 % окна шага. Без анимации заливка на месте целиком */
.c-steps--flow .c-step__fill line { transform-box: view-box; transform-origin: 0 0; }
@keyframes c-steps-fill-x { from { transform: scaleX(0); } }
@keyframes c-steps-fill-y { from { transform: scaleY(0); } }
@keyframes c-steps-tip { from { opacity: 0; } }
@keyframes c-steps-lit { from { opacity: 0.5; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .c-steps--flow { view-timeline: --c-steps block; }
    .c-steps--flow .c-step__fill line {
      animation: c-steps-fill-x linear both; animation-timeline: --c-steps;
      animation-range: cover calc(25% + var(--k, 0) * 10%) cover calc(35% + var(--k, 0) * 10%);
    }
    .c-steps--flow .c-step__arrow--y .c-step__fill line { animation-name: c-steps-fill-y; }
    .c-steps--flow .c-step__fill .c-step__tip {
      animation: c-steps-tip linear both; animation-timeline: --c-steps;
      animation-range: cover calc(33% + var(--k, 0) * 10%) cover calc(35% + var(--k, 0) * 10%);
    }
    .c-steps--flow .c-step__digit {
      animation: c-steps-lit linear both; animation-timeline: --c-steps;
      animation-range: cover calc(17% + var(--k, 0) * 10%) cover calc(25% + var(--k, 0) * 10%);
    }
  }
  @supports not (animation-timeline: view()) {
    .c-steps--flow.is-armed .c-step__fill line { transform: scaleX(0); }
    .c-steps--flow.is-armed .c-step__arrow--y .c-step__fill line { transform: scaleY(0); }
    .c-steps--flow.is-armed .c-step__fill .c-step__tip { opacity: 0; }
    .c-steps--flow.is-armed .c-step__digit { opacity: 0.5; }
    .c-steps--flow.is-on .c-step__fill line {
      animation: c-steps-fill-x calc(var(--dur-mid) * 5 / 3) var(--ease-out-soft) both;
      animation-delay: calc(var(--dur-mid) * 2 * var(--k, 0) + var(--dur-mid));
    }
    .c-steps--flow.is-on .c-step__arrow--y .c-step__fill line { animation-name: c-steps-fill-y; }
    /* Линия идёт 5/3 × dur-mid; наконечник — её последние 20 %, с 2k + 7/3 */
    .c-steps--flow.is-on .c-step__fill .c-step__tip {
      animation: c-steps-tip calc(var(--dur-mid) / 3) var(--ease-std) both;
      animation-delay: calc(var(--dur-mid) * 2 * var(--k, 0) + var(--dur-mid) * 7 / 3);
    }
    .c-steps--flow.is-on .c-step__digit {
      opacity: 1; animation: c-steps-lit var(--dur-mid) var(--ease-std) both;
      animation-delay: calc(var(--dur-mid) * 2 * var(--k, 0));
    }
  }
}


/* ── 40. Сведение `.c-merge` ─────────────────────────────────── */
/* Линии сходятся в одну и упираются стрелкой в блок ниже: «все три ведут к одному». Линии — svg
   с preserveAspectRatio="none", координаты задаёт разметка под свою сетку (viewBox по ширине контейнера),
   толщина не тянется. Боковые линии помечены .c-merge__side: в ленте на узком экране страница их прячет.
   Шеврон заходит на конец линии до своей вершины (15/24) */
.c-merge { display: grid; justify-items: center; color: var(--text-3); }
/* inline-size 0 + min-inline-size 100 %: svg с viewBox 1200×48 и высотой 48 иначе заявляет min-content
   1200 px (высота × пропорция) и на 390 распирал обёртку ленты и итог вместе с ней (13.10) */
.c-merge__lines {
  display: block; inline-size: 0; min-inline-size: 100%; block-size: var(--space-48); overflow: visible;
  fill: none; stroke: var(--stroke-glass); stroke-width: var(--line);
}
.c-merge__lines path { vector-effect: non-scaling-stroke; }
.c-merge > .c-icon { margin-block-start: calc(var(--icon-16) * -15 / 24); }


/* ── 41. Схема «всё ведёт на сайт» `.c-flow` ─────────────────── */
/* Три источника в колонках → сведение (40) → главный узел → стрелка → результат. Иконки из спрайта:
   Lucide и бренды Simple Icons. Одна раскладка на 1440 и 390, ширина по колонке, не шире 24rem */
.c-flow { display: grid; justify-items: center; inline-size: 100%; max-inline-size: 24rem; margin: 0; }
.c-flow__from { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); inline-size: 100%; margin: 0; padding: 0; list-style: none; }
.c-flow__src {
  display: grid; justify-items: center; gap: var(--space-8); padding-block-end: var(--space-8);
  color: var(--text-2); text-align: center; font-size: var(--t-small-size); line-height: var(--t-small-lh);
}
.c-flow__orb {
  display: grid; place-items: center; inline-size: var(--control-sm); block-size: var(--control-sm);
  border-radius: var(--r-pill); background: var(--glass); color: var(--text);
}
.c-flow .c-merge { inline-size: 100%; }
.c-flow .c-merge__lines { block-size: var(--space-32); }
.c-flow__node {
  display: inline-flex; align-items: center; gap: var(--space-8);
  block-size: var(--control-md); box-sizing: border-box; padding-inline: var(--space-16);
  border-radius: var(--r-pill); background: var(--glass); box-shadow: inset 0 0 0 var(--line) var(--stroke-glass); color: var(--text);
  white-space: nowrap; font-size: var(--t-small-size); font-weight: var(--fw-medium); line-height: var(--t-small-lh);
}
.c-flow__node--main { block-size: var(--control-lg); padding-inline: var(--space-24); font-size: var(--t-body-size); line-height: var(--t-body-lh); }


/* ── 9b. Вилка цены `.c-price--range` ────────────────────────── */
/* «1 200–5 000 €» в display-xl (60) шире карточки: вилка кеглем display-m (40), а в узкой карточке
   (поле текста уже 280: 390, планшет) кеглем h2. Карточка — контейнер, кегль по её ширине, а не по экрану */
.c-price--range { container: c-price / inline-size; }
.c-price__amount--range { font-size: var(--t-display-m-size); line-height: var(--t-display-m-lh); letter-spacing: var(--t-display-m-ls); }
/* Подзаголовок под названием (13.10): строка caption лежит в зазоре между шапкой и суммой и высоты не добавляет —
   сумма стоит на той же высоте, что у соседней карточки ряда без подзаголовка. 4 до названия, 4 до суммы */
.c-price__sub {
  margin-block: calc(var(--space-4) - var(--space-24)) calc(-1 * var(--t-caption-lh) - var(--space-4));
  color: var(--text-3); font-size: var(--t-caption-size); line-height: var(--t-caption-lh);
}
.c-price--sky .c-price__sub { color: var(--text-on-sky-2); }
/* Сумма словами («Цена после разбора») кеглем вилки; в узкой карточке переносится, а не вылезает */
.c-price__amount--text { white-space: normal; text-wrap: balance; }
@container c-price (max-width: 280px) {
  .c-price__amount--range { font-size: var(--t-h2-size); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-ls); }
}
/* --title (круг 4, правка c_fa05608fdf4b): акцент на названии, а не на цене. Название кеглем h2 (им вилка набрана
   в узкой карточке; display-m 40 «Интернет-магазин» в поле 325 рвётся по дефису и ряд теряет линию), цена кеглем title,
   «€» той же высоты. Подзаголовок __sub остаётся сразу под названием в зазоре, сумма в ряду на одной линии */
.c-price--title .c-price__name {
  font-size: var(--t-h2-size); font-weight: var(--t-h2-weight); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-ls); text-wrap: balance;
}
.c-price--title .c-price__amount {
  font-size: var(--t-title-size); font-weight: var(--fw-semibold); line-height: var(--t-title-lh); letter-spacing: var(--t-title-ls);
}
.c-price--title .c-price__unit { font-size: inherit; line-height: inherit; }
/* Подзаголовок под крупным названием — обычной строкой small в 8 от названия (не наложением в зазор): иначе 12 px
   прилипает к цене или к «Что можно сделать». Чтобы суммы в ряду стояли на одной линии, подзаголовок у всех карточек ряда */
.c-price--title .c-price__sub { margin-block: calc(var(--space-8) - var(--space-24)) 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); }
/* Срок последней строкой карточки, под списком (правка c_2c2f79cde51f): прижат к низу, отрицательный отступ срока снят */
.c-price__term--end { margin-block-start: auto; }


/* ── 390 для вариантов 13.10 ─────────────────────────────────── */
@container c-vp (max-width: 640px) {
  /* Шаги столбиком: цифра слева в колонке 48, путь вниз через зазор 24 к следующей цифре */
  .c-steps--num { gap: var(--space-24); }
  .c-steps--num .c-step { grid-template-columns: var(--space-48) minmax(0, 1fr); column-gap: var(--space-16); }
  .c-steps--num .c-step__num { grid-column: 1; grid-row: 1; flex-direction: column; align-self: stretch; }
  .c-steps--num .c-step__body { grid-column: 2; grid-row: 1; }
  .c-steps--num .c-step__path { flex-direction: column; margin-inline: 0; margin-block: var(--space-8) calc(var(--space-8) - var(--space-24)); }
  .c-step__arrow--x { display: none; }
  .c-step__arrow--y { display: block; flex: 1 1 auto; inline-size: calc(var(--space-16) - var(--line)); block-size: 0; min-block-size: 0; }
}


/* ══ Варианты 13.10.2026, круг 2 (правки главной A) ══════════════ */

/* ── 3b. Шапка, которая собирается в островок `.c-nav--morph` ─── */
/* Владелец 13.10: наверху страницы шапка без фона во всю сетку, с началом прокрутки собирается в таблетку.
   Раскладка всегда таблетки; состояние «наверху» — класс .is-top на родителе шапки. В нём края разводятся
   transform'ом: лого влево на --nav-spread-start, ссылки и кнопки вправо на --nav-spread-end; стекло — отдельный
   слой ::before, гаснет прозрачностью и растягивается по ширине на --nav-spread-k. Значения считает страница:
   (ширина сетки − ширина таблетки) / 2 + поле таблетки. Фильтр и ширина не анимируются */
.c-nav--morph { position: relative; isolation: isolate; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.c-nav--morph::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--nav-fill); box-shadow: var(--ring-nav);
  -webkit-backdrop-filter: var(--blur-nav); backdrop-filter: var(--blur-nav);
}
/* Переходы только при разрешённом движении: общее правило reduce внизу раздела A–D на :where() с нулевой
   специфичностью и переходы классов не гасит */
@media (prefers-reduced-motion: no-preference) {
  .c-nav--morph::before { transition: opacity var(--dur-mid) var(--ease-out-soft), transform var(--dur-mid) var(--ease-out-soft); }
  .c-nav--morph > * { transition: transform var(--dur-mid) var(--ease-out-soft); }
}
.is-top > .c-nav--morph::before { opacity: 0; transform: scaleX(var(--nav-spread-k, 1)); }
.is-top > .c-nav--morph > .c-nav__logo { transform: translateX(calc(-1 * var(--nav-spread-start, 0px))); }
.is-top > .c-nav--morph > :is(.c-nav__links, .c-nav__end, .c-nav__menu) { transform: translateX(var(--nav-spread-end, 0px)); }


/* ── 4b. Сегмент в ряд с прокруткой `.c-seg-scroll` и белый `.c-seg--white` ── */
/* Круг 4 (13.10, вместо .c-seg--stack): длинные подписи («Сайт есть, заявок мало») всегда в один ряд.
   Обёртка .c-seg-scroll — горизонтальная лента без полосы прокрутки, подписи nowrap; на 390 выходит за поля
   сетки до краёв экрана, как лента кейсов, первая опция по сетке. Колонки сегмента равные (1fr от самой
   длинной подписи), поэтому бегунок едет по --i без замеров. Докрутку к выбранной опции делает страница.
   --white: бегунок белый, выбранный текст тёмный, как у белой кнопки */
.c-seg-scroll {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
}
.c-seg-scroll::-webkit-scrollbar { display: none; }
.c-seg-scroll > .c-seg { flex: none; grid-auto-columns: 1fr; }
.c-seg-scroll .c-seg__opt { scroll-snap-align: start; }
@container c-vp (max-width: 640px) {
  .c-seg-scroll { margin-inline: calc(-1 * var(--space-24)); padding-inline: var(--space-24); scroll-padding-inline: var(--space-24); }
}
.c-seg--white::before { background: var(--white); }
.c-seg--white .c-seg__opt[aria-pressed="true"] { color: var(--gray-950); }


/* ── 14b. QR картинкой ───────────────────────────────────────── */
/* Настоящий код — svg с белым полем и тихой зоной: заполняет плитку целиком, углы срезаны её радиусом */
.c-qr__code > img { inline-size: 100%; block-size: 100%; border-radius: inherit; }


/* ── 41b. Схема собирается `.c-flow--draw` ───────────────────── */
/* Владелец 13.10: путь клиента собирается на глазах. Без классов схема стоит готовой (нет JS, reduce, уже в экране).
   .is-armed ставит страница, пока схема ниже экрана: части спрятаны. .is-on при входе в экран проигрывает сборку
   один раз: источники по очереди → линии к «Сайту» → «Сайт» мягко загорается → линия → «Заявки».
   Только opacity, transform и stroke-dashoffset; конец каждой анимации совпадает со статичной схемой, страница
   снимает оба класса по концу последней. Шаг времени --dur-fast (150), вся сборка 14 шагов = 2,1 с.
   Длину штриха пути --flow-len задаёт страница (по умолчанию 200) */
.c-flow--draw .c-flow__node--main { position: relative; isolation: isolate; }
.c-flow--draw .c-flow__node--main::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0;
  background: var(--glass-hover); box-shadow: inset 0 0 0 var(--line) var(--stroke-glass-focus);
}
@media (prefers-reduced-motion: no-preference) {
  .c-flow--draw.is-armed :is(.c-flow__src, .c-merge > .c-icon, .c-flow__node) { opacity: 0; }
  .c-flow--draw.is-armed .c-merge__lines path { stroke-dasharray: var(--flow-len, 200); stroke-dashoffset: var(--flow-len, 200); }

  /* Псевдоэлемент внутри :is() роняет всё правило, поэтому ::after отдельным селектором */
  .c-flow--draw.is-on :is(.c-flow__src, .c-merge > .c-icon, .c-flow__node, .c-merge__lines path),
  .c-flow--draw.is-on .c-flow__node--main::after {
    animation-duration: calc(var(--dur-fast) * 3); animation-timing-function: var(--ease-out-soft); animation-fill-mode: both;
  }
  .c-flow--draw.is-on .c-flow__src { animation-name: c-flow-rise; }
  .c-flow--draw.is-on .c-flow__src:nth-child(2) { animation-delay: var(--dur-fast); }
  .c-flow--draw.is-on .c-flow__src:nth-child(3) { animation-delay: calc(var(--dur-fast) * 2); }
  /* Линия от каждого источника стартует через 2 шага после него */
  .c-flow--draw.is-on .c-flow__from + .c-merge path { animation-name: c-flow-draw; animation-delay: calc(var(--dur-fast) * 2); }
  .c-flow--draw.is-on .c-flow__from + .c-merge path:nth-child(2) { animation-delay: calc(var(--dur-fast) * 3); }
  .c-flow--draw.is-on .c-flow__from + .c-merge path:nth-child(3) { animation-delay: calc(var(--dur-fast) * 4); }
  .c-flow--draw.is-on .c-merge > .c-icon { animation-name: c-flow-fade; animation-duration: var(--dur-fast); animation-delay: calc(var(--dur-fast) * 6); }
  .c-flow--draw.is-on .c-flow__node--main { animation-name: c-flow-pop; animation-delay: calc(var(--dur-fast) * 7); }
  .c-flow--draw.is-on .c-flow__node--main::after { animation-name: c-flow-glow; animation-duration: calc(var(--dur-fast) * 5); animation-delay: calc(var(--dur-fast) * 8); }
  .c-flow--draw.is-on .c-flow__node--main + .c-merge path { animation-name: c-flow-draw; animation-duration: calc(var(--dur-fast) * 2); animation-delay: calc(var(--dur-fast) * 9); }
  .c-flow--draw.is-on .c-flow__node--main + .c-merge > .c-icon { animation-delay: calc(var(--dur-fast) * 10); }
  .c-flow--draw.is-on .c-flow__node--main ~ .c-flow__node { animation-name: c-flow-pop; animation-delay: calc(var(--dur-fast) * 11); }
}
@keyframes c-flow-rise { from { opacity: 0; transform: translateY(var(--space-8)); } to { opacity: 1; transform: none; } }
@keyframes c-flow-pop  { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes c-flow-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes c-flow-draw { from { stroke-dashoffset: var(--flow-len, 200); } to { stroke-dashoffset: 0; } }
@keyframes c-flow-glow { 0%, 100% { opacity: 0; } 40% { opacity: 1; } }


/* ── 42. Образец отчёта `.c-report` ──────────────────────────── */
/* Владелец 13.10 (разбор, вариант 3): окно неба Dusk, из него снизу встаёт первая страница разбора на тёмном
   стекле --nav-fill, как .c-card__ui (приём «UI на стекле над сценой» SW). Небо обрезано до тёмной части (180 %):
   вторичный текст на стекле держит контраст. Оглавление 01–05 по прямому брифу владельца, как в слое документов.
   Окно тянется по высоте ячейки родителя (align-self: stretch), лист прижат к низу */
.c-report {
  display: flex; align-items: flex-end; align-self: stretch; margin: 0; padding: var(--space-48) var(--space-48) 0;
  border-radius: var(--r-xl); overflow: clip;
  background: var(--sky-dusk) top / 100% 180% no-repeat;
}
.c-report__doc {
  flex: 1; display: grid; gap: var(--space-32); padding: var(--space-32) var(--space-32) var(--space-48);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--nav-fill); box-shadow: var(--ring-glass);
}
.c-report__head { display: grid; gap: var(--space-4); }
.c-report__head > p, .c-report__toc { margin: 0; }
.c-report__title { color: var(--text); font-size: var(--t-title-size); font-weight: var(--t-title-weight); line-height: var(--t-title-lh); }
.c-report__file { color: var(--text-2); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.c-report__toc { display: grid; gap: var(--space-16); padding: 0; list-style: none; }
.c-report__toc > li { display: grid; grid-template-columns: var(--space-24) minmax(0, 1fr); column-gap: var(--space-12); row-gap: var(--space-4); }
.c-report__num {
  grid-row: 1 / span 2; color: var(--text-2); font-variant-numeric: tabular-nums;
  font-size: var(--t-small-size); line-height: var(--t-card-title-lh);
}
.c-report__name { color: var(--text); font-size: var(--t-card-title-size); font-weight: var(--fw-semibold); line-height: var(--t-card-title-lh); font-variant-numeric: tabular-nums; }
.c-report__text { color: var(--text-2); font-size: var(--t-small-size); line-height: var(--t-small-lh); text-wrap: pretty; }
/* --on-sky (круг 4): окно без своего неба и полей, когда небо уже у всей карточки; лист — плашка тёмного стекла
   со скруглёнными углами по высоте ячейки */
.c-report--on-sky { align-items: stretch; padding: 0; border-radius: var(--r-xl); background: none; }
.c-report--on-sky .c-report__doc { padding: var(--space-32); border-radius: inherit; }
@container c-vp (max-width: 640px) {
  .c-report { padding: var(--space-32) var(--space-16) 0; border-radius: var(--r-md); }
  .c-report__doc { gap: var(--space-24); padding: var(--space-24) var(--space-24) var(--space-32); border-radius: var(--r-md) var(--r-md) 0 0; }
  .c-report--on-sky { padding: 0; }
  .c-report--on-sky .c-report__doc { padding: var(--space-24); border-radius: inherit; }
}


/* ── 43. Бегущая полоса логотипов `.c-logos--run` ──────────────── */
/* Вариант ряда логотипов: знаки бегут по кругу, края растворены маской 12/88 %, под курсором стоят.
   Два одинаковых .c-logos__row подряд, второй aria-hidden: каждый уезжает на свою ширину, стык не виден
   (ширина одного списка должна быть больше окна). Знаки — <use> на символы из .c-logos__sprite внутри полосы.
   Высота знака --logo-h × --k: --k у каждого знака своя и уравнивает оптическую высоту (широкие ниже, компактные выше).
   Бегут только с классом .is-live (скрипт страницы ставит его, пока полоса в окне); при reduce стоят. 42 с — время круга, не шкала. */
.c-logos--run {
  --run-gap: calc(var(--space-64) + var(--space-24));
  --run-h: var(--logo-h);
  --run-time: 42s;
  display: flex; gap: 0; align-items: center; overflow: clip;
  block-size: calc(var(--space-48) + var(--space-8)); color: var(--text-3);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--black) 12%, var(--black) 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--black) 12%, var(--black) 88%, transparent);
}
.c-on-sky .c-logos--run { color: var(--text-on-sky-2); }
.c-logos--run .c-logos__row {
  flex: none; flex-wrap: nowrap; justify-content: flex-start; gap: var(--run-gap);
  inline-size: auto; margin: 0; padding: 0 var(--run-gap) 0 0; list-style: none;
}
.c-logos--run .c-logos__row > li { display: flex; flex: none; }
.c-logos--run .c-logos__mark { block-size: calc(var(--run-h) * var(--k, 1)); max-inline-size: none; color: inherit; }
/* Знак, которого нет в svg: картинка служит маской, цвет тот же currentColor; mask-image и aspect-ratio задаёт страница */
.c-logos__mark--mask {
  background: currentColor;
  -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
  mask-position: center; mask-size: contain; mask-repeat: no-repeat;
}
.c-logos__sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .c-logos--run .c-logos__row { animation: c-logos-run var(--run-time) linear infinite paused; }
  .c-logos--run.is-live .c-logos__row { animation-play-state: running; }
  .c-logos--run.is-live:hover .c-logos__row { animation-play-state: paused; }
}
@keyframes c-logos-run { to { transform: translateX(-100%); } }
/* 390: полоса ниже, знаки 0,7, зазор 48, круг быстрее */
@container c-vp (max-width: 640px) {
  .c-logos--run { --run-gap: var(--space-48); --run-h: calc(var(--logo-h) * 0.7); --run-time: 30s; block-size: calc(var(--space-32) + var(--space-12)); }
}