/* ── Цены ─────────────────────────────────────────────────────────────
   Шапка с персонажем, прайс строками, четыре фактора цены, синий пакет
   «выгоднее» и призыв с персонажем. Классы страницы — ds-ceny__*. */

.ds-page--ceny{padding-bottom:48px}

/* шапка: слева вступление, справа персонаж у стола */
.ds-ceny__head{display:grid;grid-template-columns:minmax(0,1fr) 460px;align-items:end;column-gap:20px;
  padding:28px 56px 0 56px}
.ds-ceny__head-text{align-self:start;padding-bottom:48px}
.ds-ceny__head .ds-kroshki{margin-bottom:0}
.ds-ceny__head .ds-page__title{font-size:168px;font-weight:600;line-height:1}
.ds-ceny__head .ds-page__lead{max-width:600px;margin-top:20px}
.ds-ceny__vstuplenie{margin:20px 0 0;max-width:580px;color:var(--ds-gray);font:400 16px/24px var(--ds-font-text)}
.ds-ceny__lico{display:block;width:100%;height:auto;margin:0 0 -6px}

/* прайс: значок | название и описание | срок | цена по правому краю | стрелка */
.ds-ceny__stroka{display:grid;grid-template-columns:64px minmax(0,522px) minmax(190px,250px) minmax(max-content,340px) 44px;justify-content:space-between;
  grid-template-areas:"ik nazv srok cena go" "ik opis srok cena go";
  column-gap:28px;row-gap:6px;align-items:center;padding:20px 28px;border-bottom:1px solid var(--ds-line)}
.ds-ceny__ikonka{grid-area:ik;display:grid;place-items:center;width:64px;height:64px;border-radius:16px;
  background:var(--ds-badge);color:var(--ds-blue)}
.ds-ceny__nazvanie{grid-area:nazv;align-self:end;margin:0;font:500 28px/1.1 var(--ds-font-display);text-transform:uppercase}
.ds-ceny__nazvanie a{color:inherit}
.ds-ceny__nazvanie a:hover{color:var(--ds-blue-dark)}
.ds-ceny__opisanie{grid-area:opis;align-self:start;margin:0;color:var(--ds-gray);font:400 16px/21px var(--ds-font-text)}
.ds-ceny__cena{grid-area:cena;display:flex;justify-content:flex-end;align-items:flex-end;gap:0 8px;margin:0;color:var(--ds-blue)}
.ds-ceny__pered{font:500 24px/1 var(--ds-font-display);text-transform:uppercase;margin-bottom:6px}
.ds-ceny__summa{font:600 56px/1 var(--ds-font-display);letter-spacing:-.01em;white-space:nowrap}
.ds-ceny__posle{margin-bottom:0;font:500 24px/1 var(--ds-font-display);text-transform:uppercase;white-space:nowrap}
.ds-ceny__srok{grid-area:srok;display:flex;text-wrap:balance;align-items:center;gap:12px;margin:0;font:400 15px/1.4 var(--ds-font-text)}
.ds-ceny__srok svg{flex:none;color:var(--ds-blue)}
/* ₽ в одну вертикаль: «/ мес» одной ширины, у строк без него такой же отступ справа (ширина + зазор 8) */
@media (min-width:810px){
  .ds-ceny__posle{min-width:var(--ds-ceny-posle)}
  .ds-ceny__cena:not(:has(.ds-ceny__posle)){padding-right:calc(var(--ds-ceny-posle) + 8px)}
}
.ds-ceny__stroka{--ds-ceny-posle:44px}
.ds-ceny__go{grid-area:go;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--ds-line);
  border-radius:50%;color:var(--ds-ink);transition:background .18s ease,color .18s ease,border-color .18s ease}
.ds-ceny__go:hover{background:var(--ds-blue);border-color:var(--ds-blue);color:#fff}

/* что влияет на цену */
.ds-ceny__faktory{padding:56px 28px 28px}
.ds-ceny__zagolovok{margin:0 0 28px;font:600 64px/1 var(--ds-font-display);text-transform:uppercase}
.ds-ceny__faktory-setka{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ds-ceny__faktor{display:flex;align-items:center;gap:20px;padding:28px;border-radius:24px;background:var(--ds-tile)}
.ds-ceny__faktor-nomer{flex:none;width:80px;color:var(--ds-blue);font:500 64px/1 var(--ds-font-display)}
.ds-ceny__faktor-ikonka{flex:none;align-self:center;color:var(--ds-blue)}
.ds-ceny__faktor-tekst{display:grid;gap:6px;min-width:0}
.ds-ceny__faktor-nazvanie{margin:0;font:500 28px/1.1 var(--ds-font-display);text-transform:uppercase}
.ds-ceny__faktor-tekst p{margin:0;color:var(--ds-gray);font:400 16px/22px var(--ds-font-text)}

/* два нижних блока: «Пакет выгоднее» и «Сколько выйдет у вас» — вариант A «Уравнение».
   Заголовки по шкале раздела «Что влияет на цену»: 64 / 50 / 42, абзацы 18 / 17. */
.ds-ceny__paket,.ds-ceny__prizyv{--ds-c-h2:64px;--ds-c-txt:18px;--ds-c-pad:56px;--ds-c-r:28px;
  --ds-c-on-blue:#fff;--ds-c-on-blue-soft:rgba(234,244,253,.82);--ds-c-line-blue:rgba(234,244,253,.34);--ds-c-old:rgba(234,244,253,.72)}
:root[data-theme="dark"] .ds-ceny__paket{--ds-c-on-blue:var(--ds-ink);--ds-c-on-blue-soft:var(--ds-lead-ink);--ds-c-line-blue:var(--ds-line);--ds-c-old:var(--ds-gray)}
.ds-ceny__h2{margin:0;font:600 var(--ds-c-h2)/1 var(--ds-font-display);text-transform:uppercase}

/* пакет выгоднее: счёт строкой на линии с искрами, знаки операций сидят на вертикальных линиях */
.ds-ceny__paket{margin:0 28px;padding:var(--ds-c-pad);border-radius:var(--ds-c-r);background:var(--ds-blue-dark);color:var(--ds-c-on-blue)}
:root[data-theme="dark"] .ds-ceny__paket{background:var(--ds-tile)}
.ds-ceny__verh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);align-items:end;gap:40px}
.ds-ceny__paket-poyasnenie{margin:0;color:var(--ds-c-on-blue-soft);font:400 var(--ds-c-txt)/1.55 var(--ds-font-text)}
.ds-ceny__ur{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr 1.45fr;margin-top:48px;border-top:1px solid var(--ds-c-line-blue)}
.ds-ceny__s{color:var(--ds-c-on-blue);top:-6px}
.ds-ceny__s--1{left:-6px}.ds-ceny__s--2{right:-6px}
.ds-ceny__ch{position:relative;display:grid;align-content:end;gap:12px;padding:28px 28px 0;border-left:1px solid var(--ds-c-line-blue)}
.ds-ceny__ch:first-of-type{border-left:0;padding-left:0}
.ds-ceny__chto{font:500 24px/1 var(--ds-font-display);text-transform:uppercase;letter-spacing:.02em;color:var(--ds-c-on-blue-soft)}
.ds-ceny__itog{font:600 64px/1 var(--ds-font-display);letter-spacing:-.02em;white-space:nowrap;text-decoration-thickness:3px}
.ds-ceny__ch--old .ds-ceny__itog{color:var(--ds-c-old)}
.ds-ceny__ch--new .ds-ceny__itog{font-size:100px}
.ds-ceny__ch--new small{margin-left:12px;font:500 34px/1 var(--ds-font-display);text-transform:uppercase}
.ds-ceny__ch--new .ds-ceny__chto{color:var(--ds-c-on-blue)}
.ds-ceny__op{position:absolute;left:-18px;top:-18px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--ds-blue-dark);border:1px solid var(--ds-c-line-blue);font:500 24px/1 var(--ds-font-text)}
:root[data-theme="dark"] .ds-ceny__op{background:var(--ds-tile)}

/* условия работы под прайсом: организации и ИП, аванс, гарантия */
.ds-ceny__usloviya{margin:20px 28px 0;max-width:820px;color:var(--ds-gray);font:400 15px/1.5 var(--ds-font-text)}
.ds-ceny__usloviya a{color:var(--ds-blue-dark);text-underline-offset:3px}
@media (max-width:809px){.ds-ceny__usloviya{margin:16px 20px 0;font-size:14px}}

/* призыв «Сколько выйдет у вас» */
.ds-ceny__prizyv{display:grid;grid-template-columns:400px minmax(0,1fr);align-items:end;column-gap:56px;
  margin:28px 28px 0;padding:28px var(--ds-c-pad) 0 48px;border-radius:var(--ds-c-r);background:var(--ds-tile)}
/* ролик pers-layk-loop (2:3): рамка по пропорции ролика, персонаж целиком */
.ds-ceny__prizyv-lico{display:block;justify-self:center;width:auto;height:480px}
.ds-ceny__prizyv-tekst{align-self:center;display:grid;justify-items:start;padding:24px 0 56px}
.ds-ceny__prizyv-opisanie{max-width:560px;margin:20px 0 32px;color:var(--ds-gray);font:400 var(--ds-c-txt)/1.55 var(--ds-font-text)}
:root[data-theme="dark"] .ds-ceny__prizyv > .ds-ceny__prizyv-lico{height:420px;padding:20px 28px;margin:0 0 28px;border-radius:24px}

@media (max-width:1199px){
  .ds-ceny__head{grid-template-columns:minmax(0,1fr) 285px;padding:28px 28px 0}
  .ds-ceny__head-text{padding-bottom:40px}
  .ds-ceny__head .ds-page__title{font-size:72px}
  .ds-ceny__head .ds-page__lead{margin-top:16px;max-width:380px;font-size:17px;line-height:26px}
  .ds-ceny__vstuplenie{margin-top:16px;max-width:440px}

  .ds-ceny__stroka{grid-template-columns:56px max-content minmax(0,1fr) 44px;
    grid-template-areas:"ik nazv nazv go" "ik opis opis go" ". srok cena cena";
    column-gap:16px;row-gap:6px;padding:24px 20px}
  .ds-ceny__stroka .ds-ceny__cena,.ds-ceny__stroka .ds-ceny__srok{margin-top:8px}
  .ds-ceny__ikonka{width:56px;height:56px}
  .ds-ceny__nazvanie{font-size:27px}
  .ds-ceny__opisanie{font-size:15px}
  .ds-ceny__summa{font-size:44px}
  .ds-ceny__pered,.ds-ceny__posle{font-size:26px}
  .ds-ceny__pered{margin-bottom:5px}
  .ds-ceny__srok{gap:12px;padding-left:0}

  .ds-ceny__faktory{padding:56px 28px 28px}
  .ds-ceny__zagolovok{font-size:50px}
  .ds-ceny__faktor{padding:24px 28px;gap:16px}
  .ds-ceny__faktor-nomer{width:84px;font-size:64px}
  .ds-ceny__faktor-nazvanie{font-size:24px}
  .ds-ceny__faktor-tekst p{font-size:15px;line-height:22px}

  .ds-ceny__paket,.ds-ceny__prizyv{--ds-c-h2:50px;--ds-c-pad:32px}
  .ds-ceny__ur{grid-template-columns:1fr 1fr}
  .ds-ceny__ch:nth-of-type(3){border-left:0;padding-left:0}
  .ds-ceny__ch:nth-of-type(n+3){margin-top:28px;border-top:1px solid var(--ds-c-line-blue)}
}

@media (max-width:809px){
  .ds-ceny__head{grid-template-columns:minmax(0,1fr);padding:28px 20px 0}
  .ds-ceny__head-text{padding-bottom:24px}
  .ds-ceny__head .ds-kroshki{margin-bottom:12px}
  .ds-ceny__head .ds-page__title{font-size:52px}
  .ds-ceny__head .ds-page__lead{max-width:320px;margin-top:12px;font-size:16px;line-height:1.5}
  .ds-ceny__vstuplenie{margin-top:12px;font-size:15px;line-height:21px;max-width:330px}
  .ds-ceny__lico{display:none}

  .ds-ceny__stroka{grid-template-columns:48px max-content minmax(0,1fr) 44px;
    grid-template-areas:"ik nazv nazv go" "opis opis opis opis" "srok srok srok srok" "cena cena cena cena";
    column-gap:14px;row-gap:12px;padding:20px;justify-content:stretch}
  .ds-ceny__srok{align-self:center}
  .ds-ceny__ikonka{width:48px;height:48px;border-radius:12px}
  .ds-ceny__nazvanie{align-self:center;font-size:22px}
  .ds-ceny__opisanie{align-self:start}
  .ds-ceny__summa{font-size:36px}
  .ds-ceny__pered,.ds-ceny__posle{font-size:22px}
  .ds-ceny__pered{margin-bottom:3px}
  .ds-ceny__cena{justify-content:flex-start;gap:0 6px}
  .ds-ceny__srok{gap:8px;padding-left:0;margin-top:0}
  .ds-ceny__stroka .ds-ceny__cena,.ds-ceny__stroka .ds-ceny__srok{margin-top:0}

  .ds-ceny__faktory{padding:32px 20px 20px}
  .ds-ceny__zagolovok{margin-bottom:20px;font-size:42px}
  .ds-ceny__faktory-setka{grid-template-columns:1fr;gap:12px}
  .ds-ceny__faktor{padding:20px 16px;gap:14px;border-radius:24px}
  .ds-ceny__faktor-nomer{width:52px;font-size:44px}
  .ds-ceny__faktor-nazvanie{font-size:22px}

  .ds-ceny__paket,.ds-ceny__prizyv{--ds-c-h2:42px;--ds-c-txt:17px;--ds-c-pad:20px;--ds-c-r:20px}
  .ds-ceny__paket{margin:0 20px;padding:28px 20px}
  .ds-ceny__verh{grid-template-columns:1fr;gap:16px}
  .ds-ceny__ur{grid-template-columns:1fr;margin-top:28px}
  .ds-ceny__ch,.ds-ceny__ch:first-of-type,.ds-ceny__ch:nth-of-type(3){grid-template-columns:28px 1fr auto;align-items:baseline;gap:0 8px;
    padding:16px 0;border-left:0;margin-top:0}
  .ds-ceny__ch:nth-of-type(n+2){border-top:1px solid var(--ds-c-line-blue)}
  .ds-ceny__ch:first-of-type .ds-ceny__chto{grid-column:2}
  .ds-ceny__op{position:static;width:auto;height:auto;border:0;background:none;font-size:20px}
  .ds-ceny__chto{font-size:20px}
  .ds-ceny__itog{font-size:40px}
  .ds-ceny__ch--new{grid-template-columns:28px 1fr;row-gap:8px}
  .ds-ceny__ch--new .ds-ceny__itog{grid-column:2;justify-self:end;font-size:68px}
  .ds-ceny__ch--new small{font-size:26px;margin-left:8px}
  .ds-ceny__prizyv{grid-template-columns:1fr;margin:20px 20px 0;padding:24px 20px 0}
  .ds-ceny__prizyv-lico{height:340px}
  .ds-ceny__prizyv-tekst{padding:20px 0 28px}
  .ds-ceny__prizyv-opisanie{margin:12px 0 24px}
  .ds-ceny__prizyv .ds-btn{width:100%;justify-content:center}
  :root[data-theme="dark"] .ds-ceny__prizyv > .ds-ceny__prizyv-lico{height:340px;margin:0}
}

/* Тёмная тема: персонаж стоит на белой скруглённой плашке, как на главной
   (прозрачная вырезка на тёмном фоне даёт ореол вокруг обуви). Текста на плашках нет. */
:root[data-theme="dark"] .ds-ceny__lico,
:root[data-theme="dark"] .ds-ceny__prizyv-lico{
  background:var(--ds-кадр);border-radius:24px;color:#111;
  --ds-ink:#111;--ds-gray:#6B7280;--ds-blue-dark:#1B6FBF;--ds-bg-card:#fff;--ds-badge:#EDEDED;
  --ds-tile:#EAF4FD;--ds-line:rgba(224,224,224,.63)}
:root[data-theme="dark"] .ds-ceny__lico{margin-bottom:0}

@media (max-width:809px){
  :root[data-theme="dark"] .ds-ceny__lico{display:none}
  :root[data-theme="dark"] .ds-ceny__prizyv-lico{border-radius:20px 20px 0 0}
}