/* Страница /calculator — макет v4 (templates/calculator-v4.php, js/calc-v4.js).
   Только при MOQUP_CALC_OWN = true.

   Все правила начинаются с .c4: бутстрап на всех страницах (a:hover 0-1-1,
   h1–h3, p, ul, label, summary) перебивает одиночный класс компонента.
   Гарнитура — Manrope, шрифт сайта и макета (style.css задаёт --mq-font
   всем элементам с !important).
   Шапка сайта фиксирована, 64 px: отступ первого экрана считается от неё.
   Цвета и размеры — токены README макетов: v4 (11.11.2026) и первого
   экрана с калькулятором (12.11.2026). */

.c4 {
  --c4-acc: #4C3DF7; --c4-acc-h: #3527D6; --c4-acc-ink: #4033C9; --c4-tint: #EFECFE; --c4-ring: #E3DEFE;
  --c4-v1: #B3A9FF; --c4-v2: #8E83F8; --c4-v3: #C9C2FD;
  --c4-ink: #0E1116; --c4-t2: #3C4553; --c4-t3: #4A5361; --c4-t4: #5B6472; --c4-t5: #6A7383; --c4-t6: #8A919E; --c4-ph: #9AA2B1;
  --c4-bg1: #F5F6F8; --c4-bg2: #FAFAFC; --c4-bg3: #FBFBFD; --c4-bg4: #F0F1F4;
  --c4-l1: #EDEFF3; --c4-l2: #E6E8EC; --c4-l3: #DCDFE5; --c4-l4: #D5D8E0;
  --c4-ok-bg: #E3F7E9; --c4-ok: #12693B; --c4-warn-bg: #FFF1E6; --c4-warn: #A24E07;
  --c4-err: #E5484D; --c4-err-ink: #C4282E; --c4-err-bg: #FFF8F8;
  color: var(--c4-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overflow-x: clip;
}
.c4 *, .c4 *::before, .c4 *::after { box-sizing: border-box; }
.c4 [hidden] { display: none !important; }
.c4 a { color: var(--c4-acc); text-decoration: none; }
.c4 a:hover { color: var(--c4-acc-h); text-decoration: underline; }
.c4 h1, .c4 h2, .c4 h3, .c4 p, .c4 ul, .c4 ol { margin: 0; }
.c4 ul, .c4 ol { padding: 0; list-style: none; }
.c4 button { font: inherit; color: inherit; }

/* 1220 px — ширина контента, поля снаружи (README: «max-width: 1220px,
   боковые поля clamp(16px, 4vw, 24px)»): content-box. До 12 ноября 2026
   года поля входили в 1220 и контент выходил 1172. */
.c4 .c4__wrap { max-width: 1220px; box-sizing: content-box; margin: 0 auto; padding: 0 clamp(16px, 4vw, 24px); }
.c4 .c4__h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -.03em; font-weight: 800; text-wrap: balance; }
.c4 .c4__h2--center { max-width: 900px; margin: 0 auto clamp(20px, 3vw, 32px); text-align: center; }
.c4 .c4__h2--narrow { max-width: 820px; margin-bottom: 16px; }
.c4 .c4__h3 { font-size: 19px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }

/* ── Кнопки ── */
.c4 .c4__btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px;
  background: var(--c4-acc); color: #fff; font-weight: 800; cursor: pointer; text-decoration: none; white-space: nowrap; }
.c4 .c4__btn:hover { background: var(--c4-acc-h); color: #fff; text-decoration: none; }
.c4 .c4__btn:disabled { opacity: .6; cursor: default; }
.c4 .c4__btn--mid { height: 54px; padding: 0 30px; font-size: 16px; font-weight: 700; }
.c4 .c4__btn--white { margin-top: 10px; height: 56px; padding: 0 40px; font-size: 16px; background: #fff; color: var(--c4-acc); }
.c4 .c4__btn--white:hover { background: var(--c4-tint); color: var(--c4-acc); }

/* ── 1. Первый экран: текст слева, карточка калькулятора справа ──
   Макет «калькулятор в первом экране» от 12 ноября 2026 года
   (kalkulyator_hero_prod, README). Фон начинается за шапкой, как у соседних
   страниц: градиент и розовый блик справа сверху, высота слоя — 1000 px
   (на .c4, ниже).
   Шапка сайта общая (nav.php): своё меню макета не переносили. */
/* Боковых полей у секции нет: общий style.css до 768 px даёт секциям
   по 15 px с !important, и карточка выходила на 30 px уже макета.
   Поля — у .c4__hero-in, 12–24 px, как в макете. */
.c4 .c4__hero { padding: 64px 0 0 !important; }
/* Фон — на корне страницы, как в макете: первый экран короче слоя
   в 1000 px, и на самой секции на её нижней границе виден край. */
.c4.c4 { background: radial-gradient(900px 520px at 100% 0%, rgba(255, 214, 236, .55), rgba(255, 214, 236, 0) 70%) no-repeat,
              linear-gradient(180deg, #ECEFF8 0px, #F1F1FA 520px, #FFFFFF 1000px) no-repeat, #fff;
  background-size: 100% 1000px, 100% 1000px, auto; }
.c4 .c4__hero-in { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(24px, 4vw, 56px);
  padding: clamp(20px, 3vw, 48px) clamp(12px, 3vw, 24px) clamp(36px, 5vw, 72px); }
.c4 .c4__hero-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: clamp(0px, 1.5vw, 24px) 4px 0; }
/* левая колонка прилипает при прокрутке (README: sticky, top 96) */
@media (min-width: 960px) { .c4 .c4__hero-text { position: sticky; top: 96px; align-self: flex-start; } }
.c4 .c4__hero-calc { flex: 1 1 460px; min-width: 0; max-width: 560px; }

.c4 .c4__tag { align-self: flex-start; display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px;
  border-radius: 999px; background: var(--c4-ok-bg); font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--c4-ok); }
.c4 .c4__tag img { flex: 0 0 auto; width: 26px; height: 26px; display: block; margin: -3px 0; }
/* H1 — размер макета первого экрана: 28–42 px, 700. */
.c4 .c4__h1 { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.1; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
.c4 .c4__lead { max-width: 520px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; color: var(--c4-t2); text-wrap: pretty; }
.c4 .c4__ticks { margin-top: 4px; display: flex; flex-direction: column; gap: 10px; }
.c4 .c4__ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--c4-t2); }
.c4 .c4__ticks b { color: var(--c4-ink); font-weight: 700; }
.c4 .c4__tick { flex: none; width: 20px; height: 20px; border-radius: 999px; background: var(--c4-ok-bg); color: var(--c4-ok);
  font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.c4 .c4__proof { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 16px; border-top: 1px solid var(--c4-ring); font-size: 14px; color: var(--c4-t4); }
.c4 .c4__proof b { color: var(--c4-ink); }
.c4 .c4__m-only { display: none; }
/* Телефон (≤ 640): короткий тег, H1 со словом «считает», вводка без
   последней фразы, без списка и строки доверия — сразу форма. */
@media (max-width: 640px) {
  .c4 .c4__m-only { display: inline; }
  .c4 .c4__d-only, .c4 .c4__ticks, .c4 .c4__proof { display: none; }
  .c4 .c4__tag-t { display: none; }
  .c4 .c4__tag::after { content: attr(data-m); }
}

/* ── 2. Карточка калькулятора ── */
.c4 .c4__win { width: 100%; background: #fff; border-radius: 24px; overflow: hidden; color: var(--c4-ink);
  box-shadow: 0 24px 60px rgba(60, 45, 200, .14), 0 2px 6px rgba(14, 17, 22, .05); }
/* Бегущая обводка — только на ≥ 960; в фокусе формы стоит,
   при prefers-reduced-motion — статичная. */
@property --c4-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes c4ring { to { --c4-a: 360deg; } }
@media (min-width: 960px) {
  .c4 .c4__win { border: 2px solid transparent; animation: c4ring 6s linear infinite;
    background: linear-gradient(#fff, #fff) padding-box,
                conic-gradient(from var(--c4-a), #E4E0FF 0deg, #4C3DF7 70deg, #9B8CFF 120deg, #E4E0FF 190deg, #E4E0FF 360deg) border-box; }
  .c4 .c4__win:focus-within { animation-play-state: paused; }
}
@media (min-width: 960px) and (prefers-reduced-motion: reduce) {
  .c4 .c4__win { animation: none; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #4C3DF7, #B3A9FF) border-box; }
}
.c4 .c4__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px;
  padding: 16px clamp(16px, 2vw, 24px); border-bottom: 1px solid var(--c4-l1); }
.c4 .c4__bar-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.c4 .c4__mark { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--c4-acc); display: flex; align-items: center; justify-content: center; }
.c4 .c4__mark svg { display: block; }
.c4 .c4__bar-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c4 .c4__bar-h { font-size: 15px; font-weight: 700; white-space: nowrap; }
.c4 .c4__bar-sub { font-size: 12.5px; line-height: 1.35; color: var(--c4-t5); }
.c4 .c4__bar-r { flex: none; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.c4 .c4__bt { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--c4-bg4);
  color: var(--c4-t2); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.c4 .c4__bt--ok { background: #E8F7EE; color: #137A3A; }
.c4 .c4__bt i, .c4 .c4__bar-st i { width: 7px; height: 7px; border-radius: 999px; background: #1FB955; }
.c4 .c4__win[data-stage="res"] .c4__bt { height: 28px; }
.c4 .c4__bar-st { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--c4-t4); white-space: nowrap; }
.c4 .c4__bar-st i { width: 8px; height: 8px; background: var(--c4-acc); box-shadow: 0 0 0 4px var(--c4-ring); }
.c4 .c4__again { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid #E3E5EA;
  background: #fff; color: var(--c4-t2); font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.c4 .c4__again:hover { border-color: var(--c4-acc); color: var(--c4-acc); }
.c4 .c4__svg { display: inline-flex; flex: none; }
.c4 .c4__svg svg { display: block; }

/* форма */
.c4 .c4__form { margin: 0; padding: clamp(16px, 2vw, 24px); display: flex; flex-direction: column; gap: 14px; }
.c4 .c4__form[hidden] { display: none; }
.c4 .c4__drop { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 8px 12px; border-radius: 14px;
  border: 1.5px dashed #C9CDD6; background: var(--c4-bg2); color: var(--c4-ink); cursor: pointer; }
.c4 .c4__drop:hover { border-color: var(--c4-acc); background: #F6F4FF; }
.c4 .c4__drop-ico { flex: none; width: 32px; height: 32px; border-radius: 9px; overflow: hidden; background: var(--c4-tint); color: var(--c4-acc);
  font-size: 20px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.c4 .c4__drop-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c4 .c4__drop-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.c4 .c4__drop-t b { font-size: 14px; font-weight: 700; }
.c4 .c4__drop-t span { font-size: 12.5px; color: var(--c4-t5); }
.c4 .c4__drop--err { border-color: var(--c4-err); background: var(--c4-err-bg); }
.c4 .c4__drop--err .c4__drop-ico { background: #FDE8E8; color: var(--c4-err-ink); }
.c4 .c4__drop--err b { color: var(--c4-err-ink); }
.c4 .c4__row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.c4 .c4__row-pf { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; }
.c4 .c4__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.c4 .c4__label { font-size: 13px; font-weight: 700; color: var(--c4-t2); }
.c4 .c4__label--sm { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c4 .c4__req { color: var(--c4-acc); }
.c4 .c4__input { width: 100%; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid #E3E5EA; background: var(--c4-bg2);
  color: var(--c4-ink); font-size: 16px; font-family: inherit; outline: none; }
.c4 .c4__input--num { border-radius: 10px; font-variant-numeric: tabular-nums; }
.c4 .c4__input::placeholder { color: var(--c4-ph); }
.c4 .c4__input:focus { border-color: var(--c4-acc); box-shadow: 0 0 0 4px var(--c4-ring); background: #fff; }
.c4 .c4__input--err, .c4 .c4__input--err:focus { border-color: var(--c4-err); }
.c4 .c4__err { font-size: 12px; font-weight: 600; color: var(--c4-err-ink); }
.c4 .c4__err:empty { display: none; }
.c4 .c4__chips-row { display: flex; gap: 6px; flex-wrap: wrap; }
.c4 .c4__opt { height: 44px; padding: 0 13px; border-radius: 999px; border: 1.5px solid #E3E5EA; background: #fff; color: var(--c4-ink);
  font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.c4 .c4__opt:hover { border-color: var(--c4-acc); }
.c4 .c4__opt--on, .c4 .c4__opt--on:hover { border-color: var(--c4-acc); background: #F6F4FF; color: var(--c4-acc); }
.c4 .c4__chips-row--err .c4__opt { border-color: var(--c4-err); }
.c4 .c4__dims { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--c4-l1); }
.c4 .c4__dims-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.c4 .c4__sub { font-size: 13px; color: var(--c4-t4); }
.c4 .c4__tabs { display: flex; gap: 2px; background: var(--c4-bg4); border-radius: 999px; padding: 3px; }
.c4 .c4__tab { border: 0; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; background: transparent; color: var(--c4-t4); cursor: pointer; }
.c4 .c4__tab[aria-selected="true"] { background: #fff; color: var(--c4-ink); box-shadow: 0 1px 2px rgba(14, 17, 22, .12); }
.c4 .c4__pane { display: flex; flex-direction: column; gap: 10px; }
.c4 .c4__grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.c4 .c4__total { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 10px; background: #F6F7F9;
  font-size: 13.5px; color: var(--c4-t4); }
.c4 .c4__total b { color: var(--c4-ink); font-variant-numeric: tabular-nums; }
.c4 .c4__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.c4 .c4__submit { display: flex; flex-direction: column; gap: 10px; }
.c4 .c4__btn--wide { width: 100%; height: 52px; font-size: 16px; box-shadow: 0 10px 24px rgba(76, 61, 247, .24); }
.c4 .c4__consent { font-size: 12px; line-height: 1.45; color: var(--c4-t5); text-align: center; }
.c4 .c4__err--form { text-align: center; }
@media (max-width: 480px) {
  .c4 .c4__grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c4 .c4__row-pf { grid-template-columns: 1fr; }
}

/* загрузка */
.c4 .c4__out { animation: c4in .3s ease-out both; }
@keyframes c4in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.c4 .c4__run { padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 18px; }
.c4 .c4__run-h { display: flex; flex-direction: column; gap: 6px; }
.c4 .c4__run-t { font-size: 19px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.c4 .c4__run-s { font-size: 14px; line-height: 1.5; color: var(--c4-t4); }
.c4 .c4__prog { display: block; height: 6px; border-radius: 999px; background: var(--c4-tint); overflow: hidden; }
.c4 .c4__prog span { display: block; height: 100%; border-radius: 999px; background: var(--c4-acc); transition: width .6s ease; }
.c4 .c4__steps { display: flex; flex-direction: column; }
.c4 .c4__st { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #F2F3F5; font-size: 14.5px; font-weight: 500; color: var(--c4-t6); }
.c4 .c4__st-i { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #E3E5EA;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; }
.c4 .c4__st--done { color: var(--c4-ink); }
.c4 .c4__st--done .c4__st-i { border: 0; background: #1FB955; }
.c4 .c4__st--on { color: var(--c4-ink); font-weight: 700; }
.c4 .c4__st--on .c4__st-i { border: 2.5px solid var(--c4-ring); border-top-color: var(--c4-acc); animation: c4spin .8s linear infinite; }
@keyframes c4spin { to { transform: rotate(360deg); } }
.c4 .c4__skel { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: #F6F7F9; }
.c4 .c4__skel span { display: block; height: 10px; border-radius: 5px; background: #EEF0F3; }
.c4 .c4__skel span:nth-child(1) { width: 38%; height: 12px; border-radius: 6px; background: #E8EAEE; }
.c4 .c4__skel span:nth-child(2) { width: 54%; height: 30px; border-radius: 8px; background: #E8EAEE; }
.c4 .c4__skel span:nth-child(3) { width: 72%; }
.c4 .c4__skel span:nth-child(4) { width: 64%; }
.c4 .c4__skel span:nth-child(5) { width: 68%; }
.c4 .c4__run-n { font-size: 12.5px; line-height: 1.45; color: var(--c4-t5); }

/* результат */
.c4 .c4__result { padding: clamp(18px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 14px; }
.c4 .c4__r-top { display: flex; gap: 16px; align-items: flex-start; }
.c4 .c4__r-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.c4 .c4__r-item { font-size: 13px; line-height: 1.5; color: var(--c4-t4); overflow-wrap: anywhere; }
.c4 .c4__tag-g { display: inline-flex; align-items: center; height: 20px; margin-left: 4px; padding: 0 8px; border-radius: 999px; background: var(--c4-bg4);
  color: var(--c4-t4); font-size: 12px; font-weight: 700; vertical-align: 1px; white-space: nowrap; }
.c4 .c4__tag-g--md { height: 24px; margin-left: 0; padding: 0 10px; font-size: 12.5px; align-self: center; }
.c4 .c4__r-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.c4 .c4__r-sum { font-size: clamp(34px, 3.4vw, 44px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--c4-acc); font-variant-numeric: tabular-nums; }
.c4 .c4__r-unit { font-size: 16px; font-weight: 600; color: var(--c4-acc); }
.c4 .c4__r-batch { font-size: 14px; line-height: 1.45; color: var(--c4-t2); }
.c4 .c4__r-batch b { font-variant-numeric: tabular-nums; }
.c4 .c4__r-rate { font-size: 12.5px; line-height: 1.45; color: var(--c4-t5); font-variant-numeric: tabular-nums; }
.c4 .c4__r-rate--stale { display: flex; gap: 6px; align-items: flex-start; }
.c4 .c4__r-rate--stale .c4__svg { transform: translateY(2px); }
.c4 .c4__r-rate--stale b { font-weight: 700; color: var(--c4-t2); }
.c4 .c4__r-norate { margin-top: 4px; padding: 12px 14px; border-radius: 12px; background: #F3F4F6; color: var(--c4-t2); font-size: 14px; line-height: 1.5; }
.c4 .c4__r-thumb { flex: none; width: 76px; height: 76px; border-radius: 14px; overflow: hidden; border: 1px solid var(--c4-l1); background: #F6F4FF; display: flex; }
.c4 .c4__r-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c4 .c4__r-thumb .c4__svg { width: 100%; height: 100%; }
.c4 .c4__lines { display: flex; flex-direction: column; border-top: 1px solid var(--c4-l1); }
.c4 .c4__line { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; }
.c4 .c4__line-k { flex: none; font-size: 14px; color: var(--c4-t4); }
.c4 .c4__line-d { flex: 1 1 16px; min-width: 12px; border-bottom: 2px dotted #DDE0E6; transform: translateY(-4px); }
.c4 .c4__line-v { min-width: 0; text-align: right; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.c4 .c4__line-mute { font-weight: 600; color: var(--c4-t5); }
.c4 .c4__line-hide { color: #A3A9B5; }
.c4 .c4__tip { position: relative; cursor: help; text-decoration: underline dashed #A3A9B5; text-underline-offset: 4px; }
.c4 .c4__tip::after { content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 8px); white-space: nowrap; background: var(--c4-ink); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: 0; padding: 6px 10px; border-radius: 8px; opacity: 0; transform: translateY(4px);
  pointer-events: none; transition: opacity .15s, transform .15s; }
.c4 .c4__tip:hover::after, .c4 .c4__tip:focus::after { opacity: 1; transform: none; }
.c4 .c4__tip:focus { outline: none; }
.c4 .c4__better { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: #F6F4FF; border: 1.5px solid #D9D3FF; }
.c4 .c4__better-h { font-size: 13px; font-weight: 700; color: var(--c4-acc); }
.c4 .c4__better-p { display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; }
.c4 .c4__better-sum { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.c4 .c4__better-sum span { font-size: 15px; font-weight: 600; color: var(--c4-t2); letter-spacing: 0; }
.c4 .c4__tag-ok { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: #E8F7EE; color: #137A3A;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c4 .c4__better-t { font-size: 13.5px; line-height: 1.5; color: var(--c4-t2); }
.c4 .c4__contacts { display: flex; gap: 8px; }
.c4 .c4__msg { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 999px; background: #fff;
  font-size: 14px; font-weight: 700; color: var(--c4-ink); box-shadow: 0 1px 2px rgba(14, 17, 22, .08); text-decoration: none; }
.c4 .c4__msg:hover { box-shadow: 0 0 0 1.5px var(--c4-acc); color: var(--c4-ink); text-decoration: none; }
.c4 .c4__msg svg { display: block; flex: none; }
/* «Обсудить расчёт с менеджером» — второстепенно, под результатом */
.c4 .c4__mgr { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
.c4 .c4__mgr-h { margin: 0; font-size: 13px; font-weight: 600; color: var(--c4-t4); }
.c4 .c4__mgr .c4__msg { box-shadow: 0 0 0 1px #E3E5EA; }
.c4 .c4__mgr .c4__msg:hover { box-shadow: 0 0 0 1.5px var(--c4-acc); }
.c4 .c4__save { display: flex; flex-direction: column; gap: 10px; }
.c4 .c4__save form { margin: 0; }
.c4 .c4__btn--save { width: 100%; min-height: 50px; padding: 0 18px; font-size: 15px; box-shadow: 0 10px 24px rgba(76, 61, 247, .22); }
.c4 .c4__save-s { display: none; }
/* на 390 длинная подпись в одну строку не встаёт (screens/18 макета) */
@media (max-width: 480px) { .c4 .c4__save-l { display: none; } .c4 .c4__save-s { display: inline; } }
.c4 .c4__perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; }
.c4 .c4__perk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--c4-t2); }
.c4 .c4__perk-i { flex: none; width: 16px; height: 16px; border-radius: 50%; background: #E8F7EE; color: #137A3A; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; }
.c4 .c4__fine { font-size: 12px; line-height: 1.45; color: var(--c4-t5); }

/* отказы, недоступность, лимиты — прежние сообщения внутри карточки */
.c4 .c4__msgbox { padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.c4 .c4__msg-ico { width: 44px; height: 44px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; }
.c4 .c4__msgbox--e .c4__msg-ico { background: var(--c4-tint); color: var(--c4-acc); }
.c4 .c4__msgbox--zh .c4__msg-ico { background: var(--c4-warn-bg); color: var(--c4-warn); }
.c4 .c4__msgbox--z .c4__msg-ico, .c4 .c4__msgbox--z2 .c4__msg-ico { background: var(--c4-bg4); color: var(--c4-t4); }
.c4 .c4__msg-t { font-size: 15px; line-height: 1.55; color: var(--c4-t2); }
.c4 .c4__msg-acts { align-self: stretch; display: flex; flex-direction: column; gap: 10px; }
.c4 .c4__btn--res { width: 100%; height: 50px; font-size: 15px; font-weight: 700; }
.c4 .c4__brief { font-size: 14px; font-weight: 600; }

/* На 390 тег «Готово» и «Посчитать другой товар» встают строкой ниже
   заголовка (README макета). */
@media (max-width: 640px) {
  .c4 .c4__bar-r { justify-content: flex-start; }
  .c4 .c4__win[data-stage="form"] .c4__bar-r { flex-basis: 100%; }
  .c4 .c4__win[data-stage="res"] .c4__bar-r, .c4 .c4__win[data-stage="msg"] .c4__bar-r { flex-basis: 100%; }
}

/* ── 3. Как это работает ── */
.c4 .c4__sec { padding-top: clamp(48px, 6vw, 64px); }
.c4 .c4__sec > .c4__h2 { margin-bottom: 24px; }
.c4 .c4__ico { width: 40px; height: 40px; border-radius: 999px; background: var(--c4-ink); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.c4 .c4__ico--lg { width: 48px; height: 48px; margin-bottom: 0; }
.c4 .c4__how { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 22px 28px; }
.c4 .c4__how-step { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.c4 .c4__how-top { display: flex; align-items: center; gap: 12px; }
.c4 .c4__how-n { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 999px; background: var(--c4-acc); color: #fff; font-size: 18px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px var(--c4-tint); }
.c4 .c4__how-line { flex: 1 1 auto; display: flex; align-items: center; color: var(--c4-v1); font-size: 18px; font-weight: 800; overflow: hidden; }
.c4 .c4__how-line i { flex: 1 1 auto; margin-right: 2px; border-top: 2px dashed var(--c4-v3); }
.c4 .c4__how-h { margin-top: 6px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.c4 .c4__how-t { font-size: 15px; line-height: 1.5; color: var(--c4-t3); text-wrap: pretty; }
@media (max-width: 639px) { .c4 .c4__how-line { display: none; } }

/* ── 5. Себестоимость ── */
.c4 .c4__cost { margin-top: clamp(56px, 7vw, 88px); background: linear-gradient(180deg, #F1EEFF 0%, #F7F5FF 60%, #FFFFFF 100%); overflow: hidden; }
.c4 .c4__cost-in { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.c4 .c4__intro { max-width: 820px; font-size: 17px; line-height: 1.6; color: #1B212B; text-wrap: pretty; }
.c4 .c4__formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 28px 0 32px; }
.c4 .c4__pill { height: 42px; display: flex; align-items: center; padding: 0 16px; border-radius: 999px; background: #fff;
  box-shadow: 0 2px 8px rgba(40, 30, 140, .06); font-size: 15px; font-weight: 700; white-space: nowrap; }
.c4 .c4__pill--total { padding: 0 18px; background: var(--c4-acc); color: #fff; font-weight: 800; box-shadow: 0 8px 20px rgba(76, 61, 247, .3); }
.c4 .c4__op { font-size: 18px; font-weight: 800; color: var(--c4-v2); }
/* знак и следующая таблетка переносятся вместе — «=» не остаётся в конце строки */
.c4 .c4__fx { display: inline-flex; align-items: center; gap: 10px; }
.c4 .c4__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.c4 .c4__card { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.4vw, 28px); border-radius: 22px;
  background: rgba(255, 255, 255, .75); border: 1px solid rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(40, 30, 140, .05); }
.c4 .c4__card-h { margin-top: 4px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.c4 .c4__card-t { font-size: 15px; line-height: 1.55; color: var(--c4-t3); text-wrap: pretty; }
.c4 .c4__cost-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 28px; margin-top: 28px; }
.c4 .c4__cost-p { font-size: 16px; line-height: 1.55; color: #1B212B; }

/* ── 6. Готовые расчёты: одна разметка, таблица с 640 px, карточки ниже ── */
.c4 .c4__sec--cats { padding-top: clamp(48px, 6vw, 72px); }
.c4 .c4__sec--cats > .c4__h2 { margin-bottom: 12px; }
.c4 .c4__intro--cats { max-width: 70ch; margin-bottom: 22px; font-size: 17px; line-height: 1.55; color: var(--c4-t3); }
.c4 .c4__cats { border: 1px solid var(--c4-l2); border-radius: 16px; overflow: hidden; }
.c4 .c4__cats-head, .c4 .c4__cat { display: flex; gap: 16px; align-items: baseline; padding: 14px 20px; }
.c4 .c4__cats-head { padding: 12px 20px; background: var(--c4-bg2); border-bottom: 1px solid var(--c4-l1); font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--c4-t5); }
.c4 .c4__cats-head span:nth-child(1), .c4 .c4__cat-n { flex: 1 1 200px; min-width: 0; }
.c4 .c4__cats-head span:nth-child(2), .c4 .c4__cat-c:nth-child(2) { flex: 0 0 130px; }
.c4 .c4__cats-head span:nth-child(3), .c4 .c4__cat-c:nth-child(3) { flex: 1 1 220px; min-width: 0; }
.c4 .c4__cats-head span:nth-child(4), .c4 .c4__cat-c--cost { flex: 0 0 140px; text-align: right; }
.c4 .c4__cat { border-bottom: 1px solid var(--c4-bg4); color: var(--c4-ink); font-size: 15px; }
.c4 .c4__cat:last-child { border-bottom: 0; }
.c4 .c4__cat:hover { background: var(--c4-bg2); color: var(--c4-ink); text-decoration: none; }
.c4 .c4__cat-n { font-weight: 700; color: var(--c4-acc); }
.c4 .c4__cat-c { color: var(--c4-t2); }
.c4 .c4__cat-c--cost { font-weight: 800; color: var(--c4-ink); white-space: nowrap; }
.c4 .c4__cat-k { display: none; }
.c4 .c4__cats-foot { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px 24px; margin-top: 12px; }
.c4 .c4__cats-foot span { font-size: 13px; line-height: 1.5; color: var(--c4-t5); }
.c4 .c4__cats-foot a { font-size: 15px; font-weight: 700; }
@media (max-width: 639px) {
  .c4 .c4__cats { border: 0; border-radius: 0; overflow: visible; display: flex; flex-direction: column; gap: 10px; }
  .c4 .c4__cats-head { display: none; }
  .c4 .c4__cat, .c4 .c4__cat:last-child { flex-direction: column; align-items: stretch; gap: 8px; padding: 16px; border: 1px solid var(--c4-l2); border-radius: 16px; font-size: 14px; }
  .c4 .c4__cat-n { flex: none; padding-bottom: 2px; font-size: 16px; font-weight: 800; }
  .c4 .c4__cat-c, .c4 .c4__cat-c:nth-child(2), .c4 .c4__cat-c:nth-child(3), .c4 .c4__cat-c--cost { flex: none; display: flex; justify-content: space-between;
    gap: 12px; text-align: right; white-space: normal; }
  .c4 .c4__cat-k { display: inline; flex: 0 0 auto; color: var(--c4-t5); font-weight: 400; }
}

/* ── 7. FAQ ── */
.c4 .c4__sec--faq { max-width: 900px; padding-top: clamp(56px, 7vw, 88px); }
.c4 .c4__sec--faq > .c4__h2 { margin-bottom: 12px; }
.c4 .c4__faq { border-bottom: 1px solid var(--c4-l1); }
.c4 .c4__faq summary { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 20px 2px; cursor: pointer; list-style: none; }
.c4 .c4__faq summary::-webkit-details-marker { display: none; }
.c4 .c4__faq-q { font-size: 17px; font-weight: 700; line-height: 1.4; }
.c4 .c4__plus { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 999px; background: var(--c4-bg1); color: var(--c4-acc); font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.c4 .c4__faq[open] .c4__plus { transform: rotate(45deg); }
.c4 .c4__faq-a { max-width: 75ch; padding: 0 2px 22px; font-size: 16px; line-height: 1.6; color: var(--c4-t3); }

/* ── 8. Финальный призыв и «Что ещё» ── */
.c4 .c4__final { margin-top: clamp(56px, 7vw, 88px); padding: clamp(32px, 5vw, 60px) clamp(22px, 4vw, 48px); border-radius: 28px; background: var(--c4-acc);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.c4 .c4__final-h { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; letter-spacing: -.03em; font-weight: 800; color: #fff; text-wrap: balance; }
.c4 .c4__final-t { max-width: 52ch; font-size: 17px; line-height: 1.55; color: #E6E2FE; text-wrap: pretty; }
.c4 .c4__more { padding: 28px 0 72px; }
.c4 .c4__more-k { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c4-t5); }
.c4 .c4__more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.c4 .c4__more-a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 22px; border-radius: 16px;
  background: var(--c4-bg1); color: var(--c4-ink); font-size: 16px; font-weight: 700; }
.c4 .c4__more-a:hover { background: var(--c4-tint); color: var(--c4-ink); text-decoration: none; }
.c4 .c4__more-a span { color: var(--c4-acc); font-size: 18px; }

@media (prefers-reduced-motion: reduce) { .c4 .c4__st--on .c4__st-i { animation-duration: 2.4s; } .c4 .c4__out { animation: none; } }
@media print { .c4 .c4__faq-a { display: block; } }