/* site.css. Секции ниже первого экрана. Направление D2 «Аналитика на тёплой бумаге».
   Первый экран и плитка метрик живут в index.html и этим файлом не затрагиваются. */

button,input,textarea,select{font-family:inherit}

/* ═══════════════════════════════════════════════════════
   Правка Дмитрия 17.08.2026: «более чёткие контуры, больше
   дизайна, поработать с кнопками, параллакс».
   Держим внутри принципов DESIGN.md: структуру задаёт граница,
   а не свечение; тень окрашена в тон бумаги, а не в серый;
   движение появляется один раз и не пиннит секции.
   ═══════════════════════════════════════════════════════ */

/* ── Контуры ─────────────────────────────────────────── */
/* карточка держится двойным контуром: видимая граница плюс тень
   в тон бумаги. Серая тень на тёплом фоне читается как наклейка */
.box,.case,.calc-card,.nope,.vs-col,.fit>div,.qa details,.leaks,.steps{
  border-color:var(--hair-2);
  box-shadow:0 1px 0 var(--hair) , 0 14px 28px -26px var(--shadow-soft)}
.box,.vs-col,.fit>div,.calc-card,.nope{transition:background .2s var(--ease),border-color .2s var(--ease)}
.box:hover,.vs-col:hover,.fit>div:hover{background:var(--fog);border-color:var(--ochre)}
.leaks li,.steps li,.case-col,.card-row,.calc-card .row,.qa summary{border-color:var(--hair)}
.case-h,.quote,.res{border-color:var(--hair-2)}
@media(min-width:820px){.case-col:first-child{border-right-color:var(--hair-2)}}
@media(min-width:900px){.vs-col{box-shadow:none}.vs-col:hover{transform:none}}
section.sec{border-top-color:var(--hair-2)}
.top{border-bottom-color:var(--hair-2)}
.metrics{border-top-color:var(--hair-2)}
.metric{border-color:var(--hair)}

/* акцентная отбивка у карточек рынка: номер становится объектом,
   а не подписью, и колонка получает верхний кант */
.box .n{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--wash);border:1px solid var(--hair-2);font-size:1.05rem;margin-bottom:var(--s3)}
.grid.g3>.box{border-top:2px solid var(--ochre)}

/* ── Кнопки ──────────────────────────────────────────── */
.btn{position:relative;transition:transform .18s var(--ease),background .25s var(--ease),
  box-shadow .25s var(--ease),border-color .2s var(--ease)}
.btn-p{gap:0;box-shadow:0 10px 22px -16px var(--shadow)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 18px 30px -18px var(--shadow)}
.btn-p:active{transform:translateY(0);box-shadow:0 6px 14px -12px var(--shadow)}
.btn-s{border-width:1px;border-color:var(--hair-2)}
.btn-s:hover{transform:translateY(-2px);border-color:var(--ochre);background:var(--card)}
/* стрелка появляется на наведении и подсказывает, что кнопка ведёт дальше */
.btn-p::after{content:"";width:0;margin-left:0;height:10px;
  background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;
  transition:width .2s var(--ease),margin .2s var(--ease);flex:none}
.btn-p:hover::after,.btn-p:focus-visible::after{width:14px;margin-left:10px}
:root{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M10.5 0.8 15 5l-4.5 4.2M15 5H0' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.fold summary{box-shadow:0 10px 22px -16px var(--shadow);transition:transform .18s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)}
.fold summary:hover{transform:translateY(-2px)}

/* ── Шапка уплотняется при прокрутке ─────────────────── */
.top{transition:box-shadow .25s var(--ease),background .25s var(--ease)}
.top.stuck{box-shadow:0 10px 24px -22px var(--shadow)}

/* ── Полоса прочитанного ─────────────────────────────── */
.readbar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:50;
  background:var(--ochre);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .1s linear}

/* ── Нумерация секций и маркер у надзаголовка ────────── */
/* страница читается как документ: у каждого раздела свой номер */
main{counter-reset:sec}
section.sec .ask{counter-increment:sec;display:flex;align-items:center;gap:12px}
section.sec .ask::before{content:counter(sec,decimal-leading-zero);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-style:normal;font-size:.72rem;letter-spacing:.1em;
  color:var(--ochre-deep);background:var(--wash);border:1px solid var(--hair-2);
  border-radius:100px;padding:3px 10px;flex:none}
section.sec .ask::after{content:"";height:1px;flex:1;background:var(--hair-2)}
#zayavka .ask::before,#zayavka .ask::after{display:none}

/* ── Виньетка между секциями ─────────────────────────── */
section.sec{position:relative}
section.sec::before{content:"";position:absolute;left:50%;top:-4px;width:7px;height:7px;
  transform:translateX(-50%) rotate(45deg);background:var(--paper);
  border:1px solid var(--hair-2);border-bottom:0;border-right:0}
section.sec.on-fog::before{background:var(--fog)}
#rynok::before{display:none}

/* ── Список потерь: строка подсвечивается ────────────── */
.leaks li{transition:background .2s var(--ease)}
.leaks li:hover{background:var(--fog)}
.leaks b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--ink);border:1px solid var(--ink);color:var(--paper);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86rem}

/* ── Шаги: номер в кружке ────────────────────────────── */
.steps li b{display:flex;align-items:center;gap:10px}
.steps li b i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;
  background:var(--wash);border:1px solid var(--hair-2);font-size:.8rem;color:var(--ochre-deep);margin-right:0}
.steps li{transition:background .2s var(--ease)}
.steps li:hover{background:var(--fog)}

/* ── Цитата получает глиф ────────────────────────────── */
.quote{position:relative}
.quote::before{content:"«";position:absolute;left:clamp(10px,1.4vw,18px);top:clamp(4px,1vh,12px);
  font-family:Lora,Georgia,serif;font-size:clamp(3rem,5vw,4.6rem);line-height:1;
  color:var(--wash);pointer-events:none}
.quote p,.quote cite{position:relative}

/* ── Колонка «я» в отстройке выделена кантом ─────────── */
.vs-col.me{position:relative;overflow:hidden}
.vs-col.me::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ochre)}

/* ── Результат кейса: цифры на подложке ──────────────── */
.res-grid>div{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-s);
  padding:clamp(14px,2vh,20px)}

/* ── Появление секций: один раз, без пиннинга ────────── */
.rise{opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rise.seen{opacity:1;transform:none}
.rise-2{transition-delay:.07s}
.rise-3{transition-delay:.14s}


@media(prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  .box:hover,.vs-col:hover,.fit>div:hover,.btn-p:hover,.btn-s:hover,.fold summary:hover{transform:none}
}

/* ── Ритм секций ─────────────────────────────────────── */
section.sec{padding:clamp(52px,7.5vh,104px) 0;border-top:1px solid var(--hair)}
section[id]{scroll-margin-top:clamp(60px,8vh,78px)}
section.sec.on-fog{background:var(--fog)}
.head{max-width:70ch}
.head .ask{display:block;margin-bottom:var(--s2)}
/* правка Дмитрия 07.08.2026: подзаголовки и подписи на светлом фоне были слишком блёклые */
.lede{color:var(--text)}
h3{font-size:clamp(1.16rem,1.05rem + .45vw,1.42rem);line-height:1.2}
.small{font-size:.92rem;line-height:1.5;color:var(--text2)}
.src{margin-top:var(--s4);color:var(--stone);font-size:.82rem;line-height:1.45}

/* ── Сетки ───────────────────────────────────────────── */
.grid{display:grid;gap:var(--s4);margin-top:clamp(24px,4vh,48px)}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
@media(min-width:720px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.g3{grid-template-columns:repeat(3,1fr)}}

.box{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);padding:clamp(20px,2.6vh,30px)}
.box h3{margin-bottom:var(--s2)}
.box p{color:var(--text2);font-size:.98rem;line-height:1.55}
.box .n{display:block;font-family:Lora,Georgia,serif;font-weight:500;font-size:1.5rem;color:var(--ochre-deep);line-height:1;margin-bottom:var(--s2)}

/* ── Список потерь ───────────────────────────────────── */
.leaks{list-style:none;margin-top:clamp(24px,4vh,44px);display:grid;gap:0;border:1px solid var(--hair);border-radius:var(--r);background:var(--card);overflow:hidden}
.leaks li{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);padding:clamp(16px,2.2vh,24px) clamp(18px,2.4vw,28px);border-bottom:1px solid var(--hair)}
.leaks li:last-child{border-bottom:0}
.leaks b{font-family:Lora,Georgia,serif;font-weight:500;font-size:1.15rem;color:var(--ochre);line-height:1.3;min-width:1.4ch}
.leaks span{font-size:1rem;line-height:1.55}
.leaks em{font-style:normal;color:var(--ink)}

/* ── Оффер ───────────────────────────────────────────── */
.offer{display:grid;gap:var(--s4);margin-top:clamp(24px,4vh,44px);grid-template-columns:1fr}
@media(min-width:900px){.offer{grid-template-columns:1.15fr .85fr;gap:var(--s6)}}
.pills{list-style:none;display:grid;gap:var(--s3)}
.pills li{display:grid;grid-template-columns:24px 1fr;gap:var(--s3);align-items:start;font-size:1.02rem;line-height:1.5}
.pills svg{width:21px;height:21px;margin-top:3px;flex:none}
.nope{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);padding:clamp(20px,2.6vh,30px)}
.nope h3{margin-bottom:var(--s3)}
.nope ul{list-style:none;display:grid;gap:var(--s2)}
.nope li{display:grid;grid-template-columns:22px 1fr;gap:var(--s2);align-items:start;font-size:.98rem;line-height:1.5;color:var(--text2)}
.promise{margin-top:var(--s4);border-left:3px solid var(--ochre);background:var(--wash);border-radius:0 var(--r-s) var(--r-s) 0;padding:var(--s4)}
.promise p{font-size:1.04rem;line-height:1.55}

/* ── Мост к расчёту ──────────────────────────────────── */
.calc{display:grid;gap:var(--s4);align-items:center;grid-template-columns:1fr}
@media(min-width:860px){.calc{grid-template-columns:1.1fr .9fr;gap:var(--s6)}}
.calc-card{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);padding:clamp(22px,3vh,34px)}
.calc-card .row{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--hair);font-size:.96rem;color:var(--text2)}
.calc-card .row:last-of-type{border-bottom:0}
.calc-card .row em{font-style:normal;font-family:Lora,Georgia,serif;font-size:1.16rem;color:var(--ochre-deep)}

/* ── Отстройка: три способа ──────────────────────────── */
.vs{display:grid;gap:var(--s4);margin-top:clamp(24px,4vh,44px);grid-template-columns:1fr}
@media(min-width:900px){.vs{grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;background:var(--card)}}
.vs-col{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);padding:clamp(20px,2.6vh,28px)}
@media(min-width:900px){.vs-col{border:0;border-right:1px solid var(--hair);border-radius:0}
  .vs-col:last-child{border-right:0}}
.vs-col k{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--stone)}
.vs-col b{display:block;margin-top:8px;font-family:Lora,Georgia,serif;font-weight:500;font-size:1.16rem;line-height:1.25}
.vs-col ul{list-style:none;display:grid;gap:11px;margin-top:var(--s4)}
.vs-col li{font-size:.95rem;line-height:1.5;color:var(--text2);padding-left:16px;position:relative}
.vs-col li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--ash)}
.vs-col.me{background:var(--wash)}
.vs-col.me k{color:var(--ochre-deep)}
.vs-col.me li{color:var(--ink)}
.vs-col.me li::before{background:var(--ochre)}

/* ── Свёрнутые девять шагов ──────────────────────────── */
.fold{margin-top:var(--s4)}
.fold summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--paper);border-radius:100px;padding:14px 26px;font-size:1rem;font-weight:500;
  transition:background .25s var(--ease)}
.fold summary::-webkit-details-marker{display:none}
.fold summary:hover{background:#000}
.fold summary:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}
.fold summary .ar{transition:transform .25s var(--ease)}
.fold[open] summary .ar{transform:rotate(180deg)}
.fold[open] summary{margin-bottom:var(--s4)}
.fold-hint{margin-top:var(--s3);color:var(--stone);font-size:.94rem;max-width:60ch}
.fold{margin-top:var(--s3)}

/* ── Снятие страха под кнопкой ───────────────────────── */
.under{display:block;margin-top:10px;color:var(--stone);font-size:.9rem;line-height:1.45;max-width:44ch}

/* ── Кейсы ───────────────────────────────────────────── */
.case{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;margin-top:clamp(24px,4vh,44px)}
.case-h{padding:clamp(20px,2.8vh,32px);border-bottom:1px solid var(--hair)}
.case-h k{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ochre)}
.case-h h3{margin-top:6px;font-family:Lora,Georgia,serif;font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);line-height:1.18;max-width:26ch}
.case-h .meta{margin-top:10px;color:var(--stone);font-size:.9rem;line-height:1.5}
.case-body{display:grid;grid-template-columns:1fr}
@media(min-width:820px){.case-body{grid-template-columns:1fr 1fr}}
.case-col{padding:clamp(20px,2.8vh,32px);border-bottom:1px solid var(--hair)}
@media(min-width:820px){.case-col:first-child{border-right:1px solid var(--hair)}}
.case-col k{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--stone);margin-bottom:var(--s3)}
.case-col ul{list-style:none;display:grid;gap:10px}
.case-col li{font-size:.97rem;line-height:1.5;color:var(--text2);padding-left:16px;position:relative}
.case-col li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--ochre)}
.res{padding:clamp(20px,2.8vh,32px);background:var(--fog)}
.res k{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ochre);margin-bottom:var(--s3)}
.res-grid{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:680px){.res-grid{grid-template-columns:repeat(3,1fr)}}
.res-grid b{display:block;font-family:Lora,Georgia,serif;font-weight:500;font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem);color:var(--ochre-deep);line-height:1.05}
.res-grid span{display:block;margin-top:6px;font-size:.92rem;line-height:1.45;color:var(--text2)}
.quote{padding:clamp(22px,3vh,34px);border-top:1px solid var(--hair)}
.quote p{font-family:Lora,Georgia,serif;font-style:italic;font-size:clamp(1.08rem,1rem + .6vw,1.4rem);line-height:1.42;max-width:44ch}
.quote cite{display:block;margin-top:var(--s3);font-style:normal;color:var(--stone);font-size:.9rem}

/* ── Этапы работы ────────────────────────────────────── */
.stage-h{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:baseline;margin-top:clamp(28px,4vh,48px)}
.stage-h k{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ochre);white-space:nowrap}
.stage-h h3{font-family:Lora,Georgia,serif;font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem);line-height:1.2}
.stage-h+p{margin-top:var(--s2);color:var(--text2);max-width:62ch}
.steps{list-style:none;display:grid;gap:0;margin-top:var(--s4);border:1px solid var(--hair);border-radius:var(--r);background:var(--card);overflow:hidden;grid-template-columns:1fr}
@media(min-width:760px){.steps{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{padding:clamp(16px,2.2vh,22px) clamp(18px,2vw,24px);border-bottom:1px solid var(--hair)}
.steps li:last-child{border-bottom:0}
@media(min-width:760px){
  .steps li{border-right:1px solid var(--hair)}
  .steps li:nth-child(2n){border-right:0}
  .steps li:nth-last-child(-n+1){border-bottom:0}
}
@media(min-width:1080px){
  .steps li:nth-child(2n){border-right:1px solid var(--hair)}
  .steps li:nth-child(3n){border-right:0}
  .steps li:nth-last-child(-n+3){border-bottom:0}
}
.steps li b{display:block;font-family:Lora,Georgia,serif;font-weight:500;font-size:1.02rem;margin-bottom:6px}
.steps li b i{font-style:normal;color:var(--ochre);margin-right:8px}
.steps li span{font-size:.92rem;line-height:1.45;color:var(--text2)}

/* ── Подходит и не подходит ──────────────────────────── */
.fit{display:grid;gap:var(--s4);margin-top:clamp(24px,4vh,44px);grid-template-columns:1fr}
@media(min-width:820px){.fit{grid-template-columns:1fr 1fr}}
.fit>div{border:1px solid var(--hair);border-radius:var(--r);padding:clamp(20px,2.6vh,30px);background:var(--card)}
.fit .no{background:var(--fog)}
.fit ul{list-style:none;display:grid;gap:var(--s3);margin-top:var(--s3)}
.fit li{display:grid;grid-template-columns:22px 1fr;gap:var(--s3);align-items:start;font-size:.99rem;line-height:1.5}

/* ── Вопросы ─────────────────────────────────────────── */
.qa{margin-top:clamp(24px,4vh,44px);display:grid;gap:var(--s3)}
.qa details{border:1px solid var(--hair);border-radius:var(--r-s);background:var(--card);overflow:hidden}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:center;
  padding:clamp(15px,2vh,20px) clamp(18px,2vw,24px);font-size:1.02rem;line-height:1.4;font-weight:500;
  transition:background .2s var(--ease)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{background:var(--fog)}
.qa summary .chev{width:26px;height:26px;border-radius:50%;background:var(--wash);display:grid;place-items:center;flex:none;transition:transform .25s var(--ease)}
.qa details[open] summary .chev{transform:rotate(180deg)}
.qa .a{padding:0 clamp(18px,2vw,24px) clamp(16px,2.2vh,22px);color:var(--text2);font-size:.99rem;line-height:1.6;max-width:72ch}

/* ── Заявка ──────────────────────────────────────────── */
#zayavka{background:var(--wash);border-top:1px solid var(--hair)}
.z-top{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:center}
.z-top img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 12%;flex:none}
.z-top b{display:block;font-family:Lora,Georgia,serif;font-weight:500;font-size:1.2rem}
.z-top span{display:block;margin-top:3px;color:var(--text2);font-size:.93rem;line-height:1.45;max-width:52ch}
.z-h{margin-top:clamp(20px,3vh,36px);font-size:clamp(1.7rem,1.25rem + 2vw,2.6rem);line-height:1.12;max-width:20ch}
.z-lede{margin-top:var(--s4);max-width:56ch;color:var(--text)}
.msgs{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:clamp(22px,3.4vh,38px)}
.msg-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:17px 30px;border-radius:14px;
  color:#fff;text-decoration:none;font-weight:600;font-size:1.05rem;transition:transform .2s var(--ease),filter .2s var(--ease);flex:1 1 220px}
.msg-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.msg-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.msg-btn svg{width:26px;height:26px;flex:none}
.m-tg{background:linear-gradient(135deg,#2AABEE,#229ED9)}
.m-wa{background:linear-gradient(135deg,#25D366,#128C7E)}
.m-max{background:linear-gradient(135deg,#8B5CF6,#6D28D9)}
.z-tel{margin-top:var(--s4);font-size:1.02rem}
.z-tel a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair)}
.z-tel a:hover{border-color:var(--ochre)}
@media(min-width:560px){.msg-btn{flex:0 1 auto}}

/* ── Подвал ──────────────────────────────────────────── */
.foot{border-top:1px solid var(--hair);background:var(--paper);padding:var(--s5) 0}
.foot .wrap{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);justify-content:space-between;align-items:center}
.foot p{color:var(--stone);font-size:.86rem;line-height:1.5}

/* ── Кнопка-якорь ────────────────────────────────────── */
.anchor{position:fixed;left:50%;transform:translateX(-50%) translateY(140%);bottom:16px;z-index:40;
  box-shadow:0 10px 30px -14px var(--shadow);transition:transform .3s var(--ease);white-space:nowrap}
.anchor.show{transform:translateX(-50%) translateY(0)}
@media(min-width:840px){.anchor{left:auto;right:24px;bottom:24px;transform:translateY(140%)}
  .anchor.show{transform:translateY(0)}}
@media(max-width:430px){.anchor{font-size:.92rem;padding:13px 22px;width:calc(100% - 32px);justify-content:center}}

/* ── Переопределения в конце файла ────────────────────
   Базовые правила секций объявлены ниже правочного блока и перебивали цвет.
   Здесь фиксируем финальный вид элементов, которые правились 17.08 вечером. */
.leaks b{background:var(--ink);border-color:var(--ink);color:var(--paper);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86rem;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center}
.box .n{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--wash);border:1px solid var(--hair-2);font-size:1.05rem;
  color:var(--ochre-deep);margin-bottom:var(--s3)}
.steps li b i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--wash);border:1px solid var(--hair-2);color:var(--ochre-deep);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;margin-right:0}

/* ── Лестница шагов и денег ──────────────────────────
   Правка по аудиту kontora vs dmitryrost от 17.08.2026: строка «коммерческие
   условия» в карте принятия решения стояла 0 из 3. Суммы не публикуются
   (решение Дмитрия от 06.08), публикуется порядок шагов и правила оплаты. */
.ladder{list-style:none;display:grid;gap:0;margin-top:clamp(24px,4vh,44px);
  border:1px solid var(--hair-2);border-radius:var(--r);background:var(--card);overflow:hidden}
@media(min-width:900px){.ladder{grid-template-columns:repeat(3,1fr)}}
.ladder li{padding:clamp(20px,2.8vh,30px);border-bottom:1px solid var(--hair);
  display:flex;flex-direction:column;transition:background .2s var(--ease)}
.ladder li:last-child{border-bottom:0}
.ladder li:hover{background:var(--fog)}
@media(min-width:900px){
  .ladder li{border-bottom:0;border-right:1px solid var(--hair)}
  .ladder li:last-child{border-right:0}
}
.ladder k{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ochre-deep)}
.ladder b{display:block;margin-top:8px;font-family:Lora,Georgia,serif;font-weight:500;
  font-size:clamp(1.16rem,1.05rem + .5vw,1.42rem);line-height:1.2}
.ladder .price{display:inline-block;margin-top:10px;align-self:flex-start;
  padding:5px 12px;border-radius:100px;background:var(--wash);border:1px solid var(--hair-2);
  font-size:.85rem;color:var(--ochre-deep)}
.ladder p{margin-top:var(--s3);font-size:.97rem;line-height:1.55;color:var(--text2)}
/* вторая ступень несёт основную нагрузку решения, поэтому выделена */
.ladder li:nth-child(2){background:var(--wash)}
.ladder li:nth-child(2):hover{background:var(--wash)}
.ladder li:nth-child(2) .price{background:var(--card)}