/* ─────────────────────────────────────────────────────────────────────
   Страница коммерческого предложения для Kate&Leo.
   Живёт на отдельном поддомене kateleo.gk-web.ru и НЕ входит в сайт:
   общие файлы (hero-base.css, site-nav.css/js, fonts/manrope.css) только
   подключаются, правки — все здесь.

   Шрифт один — Manrope. Заход на антикву Instrument Serif снят 27.08.2026:
   у неё нет кириллицы вовсе (0 глифов из 206), русские заголовки молча
   рисовал бы запасной шрифт, у каждого читателя свой.
   ───────────────────────────────────────────────────────────────────── */

body { background: var(--paper); color: var(--on-light); }

/* Сверху висит плавающее меню — оставляем ему воздух. */
.top { padding-top: clamp(74px, 10vh, 104px); }

/* ── ЛИСТЫ ──
   Тот же язык, что на лендинге: разделяет смена света, а не линейка. */
.pane { padding-block: clamp(52px, 8vh, 104px); }
.pane--deep   { background: var(--deep);   color: var(--on-dark); }
.pane--petrol { background: var(--petrol); color: var(--on-dark); }
.pane--chalk  { background: var(--chalk);  color: var(--on-light); }
.pane--paper  { background: var(--paper);  color: var(--on-light); }

/* ⚠️ Наезжающих листов (`position: sticky`) здесь НЕТ — и возвращать их нельзя
   выборочно. Липкий лист — позиционированный элемент, а обычный — нет, и
   браузер рисует позиционированные ПОВЕРХ непозиционированных независимо от
   порядка в разметке. 27.08.2026 из-за этого «Что получает агентство» легло
   поверх карточек с ценами: два разных раздела читались друг сквозь друга.
   На лендинге приёма работает потому, что там липкие ВСЕ листы подряд.
   Понадобится липкость — делать её сразу всем листам, не части. */

h1 { font-size: clamp(34px, 7.4vw, 92px); line-height: .92; letter-spacing: -.05em; }
h2 { font-size: clamp(27px, 4.4vw, 58px); line-height: .96; letter-spacing: -.045em; }
h3 { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.2; letter-spacing: -.02em; }

.say { max-width: 56ch; margin-top: 16px; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.5; }
.say b { font-weight: 600; }
.pane--deep .say, .pane--petrol .say, .hero .say { color: inherit; }
.pane--deep .say, .pane--petrol .say { color: var(--on-dark-soft); }
.pane--chalk .say, .pane--paper .say { color: var(--on-light-soft); }
.pane--deep .say b, .pane--petrol .say b { color: var(--on-dark); }
.pane--chalk .say b, .pane--paper .say b { color: var(--on-light); }

/* Заголовок и поясняющий абзац стоят по ЦЕНТРУ друг друга, а не по нижнему
   краю (правка владельца 27.08.2026): у двух- и трёхстрочных заголовков
   выравнивание по низу читалось как случайное. */
.head2 { display: grid; gap: 14px var(--gap); align-items: center; }
@media (min-width: 900px) { .head2 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .head2 .say { margin-top: 0; } }

.pane--deep .tag, .pane--petrol .tag { color: var(--on-dark-dim); }
.pane--chalk .tag, .pane--paper .tag { color: var(--on-light-dim); }

/* ── ПЕРВЫЙ ЭКРАН ──
   Цены и сроков здесь НЕТ (решение владельца 27.08.2026): первый экран
   говорит, что это за продукт, а деньги идут своим разделом ниже. */
.hero { padding-bottom: clamp(46px, 7vh, 88px); }
.hero .tag { color: var(--on-light-dim); }
.hero h1 { margin-top: 18px; max-width: 14ch; }
.hero__lede { margin-top: 20px; max-width: 44ch; font-size: clamp(16px, 1.5vw, 21px);
              line-height: 1.42; color: var(--on-light-soft); }
.hero__lede b { font-weight: 600; color: var(--on-light); }

.hero__grid { display: grid; gap: clamp(30px, 5vh, 54px) var(--gap); align-items: center; }
@media (min-width: 920px) {
  .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}

.acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(26px, 4vh, 44px); }

/* ── РИСУНКИ ──
   Одна тонкая линия и заливка тем же цветом на просвет — тот же язык, что у
   схемы устройства и у вигнеток на лендинге. Никаких фотографий и готовых
   корпусов устройств: владелец забраковал их на страницах кейсов 22.08.2026. */
.ill { display: flex; justify-content: center; }
.ill svg { width: 100%; height: auto; max-width: 300px; }
/* На телефоне текст и рисунок стоят столбиком, и телефон во всю ширину колонки
   вырастал до ~540 px — заголовок с кнопками уезжал за первый экран целиком. */
@media (max-width: 919px) { .ill svg { max-width: 208px; } }
[data-ink]   { fill: none; stroke: currentColor; stroke-width: 1.3;
               stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
[data-fill]  { fill: currentColor; stroke: none; opacity: .1; }
[data-solid] { fill: currentColor; stroke: none; opacity: .8; }
[data-soft]  { fill: currentColor; stroke: none; opacity: .28; }

/* Вигнетка в плитке — над заголовком, ростом с две строки. */
.viz { order: -1; height: 54px; display: flex; align-items: center; }
.viz svg { width: auto; height: 54px; max-width: 100%; }
.gain:hover .viz [data-ink], .gain:hover .viz [data-solid] { opacity: .75; }
/* В блоке «Что нужно от вас» плитки нет — рисунку нужен свой отступ снизу. */
.item .viz { margin-bottom: 10px; height: 46px; }
.item .viz svg { height: 46px; }

/* ── ШАГИ НЕВЕСТЫ ──
   ⚠️ Раньше это была дорожка с вертикальными линиями и точками, разложенная в
   три колонки. Владелец забраковал 27.08.2026, и по делу: линия внутри колонки
   говорит «читай сверху вниз», а нумерация — «читай слева направо», и глаз
   спорит сам с собой. Плюс полая точка «финиша» оказывалась посреди строки.
   Теперь порядок несёт ТОЛЬКО номер в кружке, а линий нет вовсе: карточки
   читаются как обычный текст — слева направо, сверху вниз. */
.route { display: grid; gap: var(--gap); margin-top: clamp(30px, 5vh, 56px); counter-reset: r; }
@media (min-width: 720px)  { .route { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1080px) { .route { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.route__i { counter-increment: r; display: flex; flex-direction: column; gap: 9px;
            border: 1px solid var(--line-dark); border-radius: 18px; padding: 20px 22px 22px; }
.route__i::before { content: counter(r); display: grid; place-items: center;
                    width: 30px; height: 30px; border-radius: 50%;
                    background: var(--chalk); color: var(--petrol);
                    font-size: 13px; font-weight: 700; }
.route__t { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.3;
            font-weight: 600; letter-spacing: -.02em; }
.route__d { font-size: 14.5px; line-height: 1.5; color: var(--on-dark-soft); }

/* ── ПЛИТКИ «ЧТО ПОЛУЧАЕТ АГЕНТСТВО» ── */
.gains { display: grid; gap: var(--gap); margin-top: clamp(30px, 5vh, 56px); }
@media (min-width: 720px)  { .gains { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px) { .gains { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.gain { border: 1px solid var(--line-light); border-radius: 18px; padding: 22px 22px 24px;
        background: rgba(255,255,255,.5); display: flex; flex-direction: column; gap: 10px; }
.gain p { font-size: 14.5px; line-height: 1.5; color: var(--on-light-soft); }

/* ── СХЕМА УСТРОЙСТВА ── */
.plan { margin-top: clamp(30px, 5vh, 56px); }
.plan svg { width: 100%; height: auto; }
.plan__wide { display: none; }
@media (min-width: 760px) { .plan__wide { display: block; } .plan__tall { display: none; } }

/* Тонкие линии и подписи схемы. Один набор правил на оба чертежа. */
.dg { fill: none; stroke: var(--on-light); stroke-width: 1.2; }
.dg--box { fill: rgba(255,255,255,.55); stroke: var(--line-light-2); }
.dg--dash { stroke-dasharray: 5 5; }
.dg__t { fill: var(--on-light); font: 600 17px/1 var(--sans); letter-spacing: -.02em; }
.dg__s { fill: rgba(5,38,46,.62); font: 500 12.5px/1 var(--sans); }
.dg__k { fill: rgba(5,38,46,.5); font: 700 10px/1 var(--sans); letter-spacing: .1em; }
.dg__arrow { fill: rgba(5,38,46,.55); stroke: none; }

/* Части проявляются по очереди при прокрутке. */
.dg__g { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease;
         transition-delay: calc(var(--i, 0) * 140ms); }
.plan.is-on .dg__g { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .dg__g { opacity: 1; transform: none; transition: none; } }

.legend { display: grid; gap: 18px var(--gap); margin-top: clamp(26px, 4vh, 44px); }
@media (min-width: 780px)  { .legend { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1180px) { .legend { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.legend div { padding-top: 14px; border-top: 1px solid var(--line-light); }
/* Только заголовок пояснения — блок. Выделение ВНУТРИ абзаца (`.legend p b`)
   этим правилом задевать нельзя: оно рвало фразу на две строки. */
.legend > div > b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.legend p b { font-weight: 700; color: var(--on-light); }
.legend p { margin-top: 5px; font-size: 14px; line-height: 1.5; color: var(--on-light-soft); }

/* ── «ЧТО ВХОДИТ» ГРУППАМИ ──
   ⚠️ Здесь была таблица «функция · Тест · Полный» на 21 строку. Владелец
   забраковал 27.08.2026: на телефоне она шире экрана, её приходится листать
   вбок, и к середине уже не помнишь, в какой ты колонке.
   Теперь список ОДИН, а разница между вариантами показана не второй колонкой,
   а видом группы: сплошная рамка — есть в обоих, пунктир и метка — только в
   полном. Так разница читается блоками, а не построчно. */
/* align-items: start — карточки ростом со своё содержимое. Без него в ряду
   все тянутся до самой высокой, и у коротких групп внизу зияет пустота. */
.inc { display: grid; gap: var(--gap); margin-top: clamp(24px, 4vh, 40px); align-items: start; }
@media (min-width: 760px)  { .inc { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1180px) { .inc { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.ig { display: flex; flex-direction: column; gap: 13px;
      border: 1px solid var(--line-dark); border-radius: 18px; padding: 20px 20px 22px; }
.ig--full { border-style: dashed; border-color: var(--line-dark-2); }
.ig__h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ig__n { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.ig__b { padding: 3px 9px; border-radius: 999px; border: 1px dashed var(--line-dark-2);
         font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
         color: var(--on-dark-dim); white-space: nowrap; }
.ig__l { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ig__l li { padding: 7px 12px; border-radius: 999px; font-size: 13.5px; line-height: 1.3;
            border: 1px solid var(--line-dark); background: rgba(238,241,239,.07); }
.ig--full .ig__l li { border-style: dashed; background: none; color: var(--on-dark-soft); }
/* Один пункт внутри общей группы может быть «только в полном». */
.ig__l li.only { border-style: dashed; background: none; color: var(--on-dark-soft); }

.key { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: clamp(22px, 3.5vh, 34px);
       font-size: 13.5px; color: var(--on-dark-soft); }
.key span { display: inline-flex; align-items: center; gap: 9px; }
.key i { width: 26px; height: 15px; border-radius: 999px; flex: none;
         border: 1px solid var(--line-dark); background: rgba(238,241,239,.07); }
.key i.dash { border-style: dashed; border-color: var(--line-dark-2); background: none; }

/* ── ЧТО НЕ ВХОДИТ ──
   ⚠️ Списки шли одной узкой колонкой (`max-width: 62ch`), и вся правая
   половина листа пустовала — забраковано 27.08.2026. Теперь это сетка:
   длинный список «отложено» занимает две трети и внутри сам делится на две
   колонки, короткий — оставшуюся треть. Пустоты справа больше нет. */
.excl { margin-top: clamp(26px, 4vh, 44px); padding-top: 22px;
        border-top: 1px solid var(--line-dark-2);
        display: grid; gap: 26px var(--gap); align-items: start; }
@media (min-width: 900px) { .excl { grid-template-columns: 2fr 1fr; } }
.excl ul { margin: 12px 0 0; padding-left: 18px; }
.excl li { margin-bottom: 7px; font-size: 14.5px; line-height: 1.5; color: var(--on-dark-soft); }
/* Дюжина коротких строк в один столбец читается как простыня — делим надвое.
   break-inside: avoid не даёт строке разорваться между колонками. */
@media (min-width: 640px) {
  .excl__g--wide ul { columns: 2; column-gap: var(--gap); }
  .excl__g--wide li { break-inside: avoid; }
}

/* ── ДВА ВАРИАНТА И ЦЕНА ── */
.plans { display: grid; gap: var(--gap); margin-top: clamp(30px, 5vh, 56px); align-items: stretch; }
@media (min-width: 860px) { .plans { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.pl { position: relative; display: flex; flex-direction: column; gap: 14px;
      border: 1px solid var(--line-light); border-radius: 22px; padding: 26px 24px 26px;
      background: rgba(255,255,255,.55); }
/* ⚠️ Тёмной «рекомендованной» карточки здесь НЕТ (решение владельца 27.08.2026).
   Варианты равноправны: заказчик выбирает по бюджету, а не по нашей подсказке.
   Метка осталась только как факт — «этот набор вы отметили в таблице». */
.pl__badge { position: absolute; top: -11px; left: 24px; padding: 4px 12px; border-radius: 999px;
             background: var(--paper); border: 1px solid var(--line-light-2); color: var(--on-light);
             font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pl__d { font-size: 14.5px; line-height: 1.5; color: var(--on-light-soft); }
/* Цена не должна переноситься по слогам ни на одной ширине. */
.pl__price { font-size: clamp(30px, 4.4vw, 48px); font-weight: 700; line-height: 1;
             letter-spacing: -.05em; white-space: nowrap; }
.pl__term { font-size: 14px; font-weight: 600; opacity: .72; }
.pl__list { margin: 4px 0 0; padding-left: 18px; }
.pl__list li { margin-bottom: 6px; font-size: 14.5px; line-height: 1.45; color: var(--on-light-soft); }

/* ── ПОЛОСА НЕДЕЛЬ ── */
.weeks { margin-top: clamp(30px, 5vh, 56px); }
.weeks h3 { margin-bottom: 14px; }
.wk { display: grid; gap: 10px var(--gap); }
@media (min-width: 900px) { .wk { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.wk__i { border-top: 1px solid var(--line-dark-2); padding-top: 12px; }
.wk__n { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
         text-transform: uppercase; color: var(--on-dark-dim); }
.wk__t { display: block; margin-top: 5px; font-size: 15px; line-height: 1.4; }
.weeks + .weeks { margin-top: clamp(30px, 4vh, 48px); }
.start { margin-top: clamp(24px, 4vh, 40px); padding: 14px 18px; border-radius: 14px;
         border: 1px solid var(--line-dark-2); font-size: 14.5px; line-height: 1.5;
         color: var(--on-dark); }

/* ── СПИСКИ «ЧТО НУЖНО ОТ ВАС» И «УСЛОВИЯ» ── */
/* align-items: start — пункты ростом со своё содержимое: без этого короткий
   «Договор» растягивался до высоты соседней «Оплаты по этапам». */
.items { display: grid; gap: 22px var(--gap); margin-top: clamp(30px, 5vh, 56px); align-items: start; }
@media (min-width: 780px)  { .items { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.item { padding-top: 16px; border-top: 1px solid currentColor; }
.pane--paper .item, .pane--chalk .item { border-top-color: var(--line-light); }
.pane--deep .item, .pane--petrol .item { border-top-color: var(--line-dark); }
.item h3 { font-size: clamp(16px, 1.5vw, 19px); }
.item p { margin-top: 7px; font-size: 14.5px; line-height: 1.5; }
.pane--paper .item p, .pane--chalk .item p { color: var(--on-light-soft); }
.pane--deep .item p, .pane--petrol .item p { color: var(--on-dark-soft); }
.item p b { font-weight: 700; color: inherit; }
/* Список внутри пункта «Условий»: расходы удобнее читать построчно. */
.item__l { margin: 9px 0 0; padding-left: 18px; }
.item__l li { margin-bottom: 7px; font-size: 14.5px; line-height: 1.5; color: var(--on-dark-soft); }
.item__l li b { color: var(--on-dark); }

/* ── ЧТО ДАЛЬШЕ ── */
.steps { display: grid; gap: var(--gap); margin-top: clamp(30px, 5vh, 56px); counter-reset: s; }
@media (min-width: 780px) { .steps { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.step { counter-increment: s; border: 1px solid var(--line-light); border-radius: 18px;
        padding: 22px 22px 24px; background: rgba(255,255,255,.5); }
.step::before { content: counter(s); display: grid; place-items: center; width: 30px; height: 30px;
                border-radius: 50%; background: var(--petrol); color: var(--chalk);
                font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.step p { font-size: 14.5px; line-height: 1.5; color: var(--on-light-soft); }
.step p b { font-weight: 600; color: var(--on-light); }

/* ── ПОДВАЛ ── */
.foot { background: var(--deep); color: var(--on-dark); padding-block: clamp(40px, 6vh, 70px); }
.foot__row { display: flex; flex-wrap: wrap; gap: 18px 30px; justify-content: space-between;
             align-items: flex-end; }
.foot a { text-decoration: underline; text-underline-offset: 3px;
          text-decoration-color: var(--line-dark-2); }
.foot a:hover { text-decoration-color: currentColor; }
.foot p { font-size: 14px; line-height: 1.55; color: var(--on-dark-soft); max-width: 52ch; }
.foot .tag { color: var(--on-dark-dim); }

/* ── ПЕЧАТЬ ──
   Заказчик может сохранить предложение в PDF. Тёмные листы в печати
   становятся светлыми, липкость снимается, схема не рвётся по страницам. */
@media print {
  .sitenav, .acts { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .pane, .foot { background: #fff !important; color: #000 !important;
                 position: static !important; min-height: 0 !important;
                 border-radius: 0 !important; padding-block: 18pt !important;
                 border-top: 1px solid #bbb; break-inside: auto; }
  .top { padding-top: 0 !important; }
  .say, .gain p, .legend p, .pl__d, .pl__list li, .step p, .item p, .foot p,
  .route__d, .excl li, .key { color: #333 !important; }
  /* Светлые подписи тёмных листов на белой бумаге пропадают. Заголовки колонок
     и названия блоков таблицы обязаны попасть в этот список: без них в PDF
     видны только строки функций, а что за колонки — нет. */
  .wk__n, .tag, .dg__k, .ig__b { color: #555 !important; }
  .gain, .pl, .step { background: none !important; border-color: #bbb !important; }
  .pl__badge { background: none !important; color: #000 !important; border: 1px solid #999; }
  .ig, .ig__l li, .ig__b, .key i { border-color: #999 !important; background: none !important; }
  .ig--full .ig__l li, .ig__l li.only { color: #555 !important; }
  .yes, .excl, .start, .wk__i, .item, .route__i { color: #000 !important; border-color: #bbb !important; }
  .plan { break-inside: avoid; page-break-inside: avoid; }
  .plan__tall { display: none !important; }
  .plan__wide { display: block !important; }
  .dg { stroke: #000 !important; } .dg--box { stroke: #999 !important; }
  .dg__t { fill: #000 !important; } .dg__s { fill: #444 !important; } .dg__k { fill: #666 !important; }
  .dg__arrow { fill: #444 !important; }
  .dg__g { opacity: 1 !important; transform: none !important; }
  .step::before { background: none !important; color: #000 !important; border: 1px solid #999; }
}