/*
 * Общий плакатный набор для страниц услуг CRM и AI и страниц кейсов (23.09.2026, владелец: «в таком же формате по дизайну
 * и структуре, как “Сайты и лендинги”»). Это копия /services/sayty-i-lendingi/web-poster.css на 23.09.2026 со всеми значениями,
 * которые владелец выставил ползунками на «Сайтах» (раскладка первого экрана, шаги, форматы, «≠», проверки): новые страницы
 * стоят так же. Файл «Сайтов» не подключаем, чтобы правки одной страницы не сдвигали другие.
 * Картинки у каждой страницы свои — пропорции и сдвиги под них в CSS страницы (--fig-ar, --tx/--ty/--ts, --fr-*, --ck-*).
 * Берет основу из /home-poster.css и /services/vk-reklama/vk-poster.css.
 */

/* ---------- первый экран: вместо портрета — коллаж, как на стоматологии и Директе (assets/sayty/hero.webp, Grok + вырезка) ---------- */
.hero--web .hero__title{font-size:clamp(52px,9.6vw,150px)}
.hero--web .hero__stage{margin-right:0}
.hero--web .hero__fig{aspect-ratio:var(--fig-ar,1200/1494);height:min(97%,780px);right:-1%;bottom:clamp(10px,2vh,24px)}
.hero--web .hero__fig picture{position:absolute;inset:0}
.hero--web .hero__art{display:block;width:100%;height:100%;object-fit:contain;translate:calc(var(--px,0) * 8px) calc(var(--py,0) * 5px);transition:translate .5s cubic-bezier(.16,1,.3,1)}
.hero--web .sticker__num{gap:0;letter-spacing:-.01em}
.hero--web .sticker__num [data-count]{min-width:0}
.hero--web .sticker--hero{left:auto;right:calc(100% - 32%);bottom:5%;width:clamp(250px,19vw,300px)}
.hero--web .wfacts{grid-area:facts}
.js .hero--web .hero__art{opacity:0;transform:translateY(18px) rotate(1deg)}
.js .hero--web.is-go .hero__art{opacity:1;transform:none;transition:opacity .6s ease-out .15s,transform .8s cubic-bezier(.16,1,.3,1) .15s,translate .5s cubic-bezier(.16,1,.3,1)}

/* полоса фактов под первым экраном */
.hero--web{grid-template-areas:". stage" "title stage" ". stage" "body stage" "facts facts"}
.wfacts{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 calc(var(--g) * -1) 0;padding:0;list-style:none;border-top:3px solid var(--ink);background:var(--ink);color:var(--paper)}
.wfacts li{display:flex;flex-direction:column;gap:6px;padding:clamp(18px,2vw,26px) clamp(14px,1.6vw,26px);border-right:1px solid rgba(244,243,238,.22)}
.wfacts li:first-child{padding-left:var(--g)}
.wfacts li:last-child{border-right:0;padding-right:var(--g)}
.wfacts b{font:900 clamp(34px,3.4vw,54px)/.9 var(--display);color:var(--lime);letter-spacing:-.01em}
.wfacts span{font:500 14px/1.32 var(--text);color:var(--on-ink-soft)}

/* заголовок и лид в новых блоках стоят на том же расстоянии, что и в блоках главной */
.wchk__head .lead{margin-top:clamp(14px,1.6vw,22px)}
/* шапки «Как проходит разработка» и форматов — та же сетка, что у pains/scope/price: заголовок слева, лид справа по нижней линии */
.wfmt__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px 32px;align-items:end;max-width:none;margin-bottom:clamp(36px,4vw,64px)}
.wfmt__head .h2{grid-column:1;grid-row:1/span 2;margin:0}
.wfmt__head .lead{grid-column:2;margin:0}
.wfmt,.wchk{padding-block:var(--sec)}
@media (min-width:981px){.wfmt__head .lead{grid-row:1/span 2;align-self:end;padding-bottom:6px}}
.wfmt__note .audit__link{display:inline;margin:0;color:var(--paper)}
.wfmt__note .audit__link:hover{color:var(--lime)}


/* ---------- вырезки-коллажи страницы (assets/sayty/*.webp: сгенерированы в Grok, фон вырезан) ---------- */



/* предмет формата: наклеен сверху карточки и выступает над рваным краем бумаги */
.wcard__pic{position:relative;z-index:1;height:clamp(180px,16vw,250px);margin:calc(-1 * clamp(96px,8.6vw,138px)) 0 clamp(10px,1vw,16px)}
.wcard__pic img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;translate:var(--tx,0px) var(--ty,0px);scale:var(--ts,1);rotate:var(--tr,0deg);transform-origin:50% 100%}
.wcard--1 .wcard__pic{rotate:-3deg}
.wcard--2 .wcard__pic{rotate:2.5deg}
.wcard--3 .wcard__pic{rotate:-1.5deg}
.wcard--4 .wcard__pic{rotate:3deg}

/* ---------- «Дизайн ≠ продажи»: блок «VK Реклама ≠ продажи» из vk-poster.css (.open--ref) 1:1, свои только картинки и синяя полоса, как на Директе ---------- */
.open--web{background:var(--paper)}
.open--web .commit li.is-loud{background:var(--blue);color:#fff}
.open--web .commit li.is-loud p{color:#fff}
.open--web .commit li.is-loud p b{padding:.06em .22em .04em;background:var(--lime);color:var(--ink);-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* пустая рама в руке стоит на месте рупора: «красиво, но пусто»; ноутбук с лендингом — на месте отчета CRM */
@media (min-width:981px){
  .open--web .open__frame{left:36.6vw;top:2.9vw;width:21.4vw}
  .open--web .report-shot{top:20.7vw;width:51vw}
}
@media (max-width:980px){
  .open--web .open__frame{width:clamp(140px,42vw,250px);bottom:calc(-1 * (clamp(20px,4.2vw,40px) + 2.1vw + 11vw))}
}
@media (min-width:600px) and (max-width:980px){
  .open--web .open__frame{bottom:calc(-1 * (clamp(20px,4.2vw,40px) + 2.1vw + 1vw))}
}

/* на темных блоках выделенные слова заголовка лаймовые, без плашки (как «на 70+ клиниках» на стоматологии) */
.hl-lime{color:var(--lime)}


/* ---------- форматы сайтов ---------- */
.wfmt{background:var(--ink);color:var(--paper)}
.wfmt__head .h2{color:var(--paper)}
.wfmt__head .lead{color:var(--on-ink-soft)}
.wfmt__list{list-style:none;margin:clamp(62px,5.6vw,92px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,26px)}
.wcard{position:relative;display:flex;flex-direction:column;min-height:100%;padding:clamp(52px,4.6vw,76px) clamp(18px,1.7vw,28px) clamp(20px,2vw,30px);color:var(--ink);isolation:isolate}
.wcard__paper{position:absolute;z-index:-1;inset:-2% -3%;width:106%;height:104%;object-fit:fill}
.wcard--3{color:var(--paper)}
.wcard--2{color:var(--paper)}
.wcard__n{margin:0 0 6px;font:900 clamp(30px,2.6vw,44px)/.86 var(--display);letter-spacing:-.02em;opacity:.55}
.wcard__h{margin:0;font:900 clamp(26px,2.3vw,38px)/.92 var(--display);text-transform:uppercase}
.wcard__when{margin:8px 0 0;font:700 13px/1.35 var(--text);text-transform:uppercase;letter-spacing:.05em;opacity:.72}
.wcard__txt{margin:14px 0 0;font-size:15px;line-height:1.5}
.wcard__list{margin:16px 0 22px;padding:0;list-style:none;display:grid;gap:8px;font-size:14px;line-height:1.35}
.wcard__list li{position:relative;padding-left:20px}
.wcard__list li::before{content:"";position:absolute;left:0;top:.42em;width:10px;height:10px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.wcard__btn{margin-top:auto;align-self:flex-start}
.wfmt__note{margin:clamp(22px,2.4vw,34px) 0 0;max-width:60ch;font-size:16px;line-height:1.5;color:var(--on-ink-soft)}

/* ---------- проверки перед публикацией ---------- */
.wchk{background:var(--paper);color:var(--ink)}
.wchk__head{max-width:980px}
.wchk .wrap{position:relative}
/* лупа над формой — справа от заголовка, чуть заходит на карточки, как наклеенная */
.wchk__art{position:absolute;z-index:2;right:calc(var(--g) + clamp(0px,1vw,20px));top:calc(-1 * clamp(10px,1.6vw,26px));width:clamp(250px,24vw,350px);rotate:4deg;pointer-events:none}
.wchk__art img{display:block;width:100%;height:auto}
.wchk__list{list-style:none;margin:clamp(30px,3.4vw,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,30px)}
.wchk__list li{position:relative;padding:clamp(18px,1.8vw,26px);background:var(--sheet);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.wchk__list li:nth-child(3n+2){box-shadow:8px 8px 0 var(--blue)}
.wchk__list li:nth-child(3n){box-shadow:8px 8px 0 var(--lime)}
.wchk__box{display:grid;place-items:center;width:34px;height:34px;margin-bottom:12px;background:var(--lime);border:2px solid var(--ink)}
.wchk__box .icon{width:20px;height:20px;stroke:var(--ink);stroke-width:3.4;fill:none;stroke-linecap:square}
.wchk__list b{display:block;font:800 clamp(19px,1.5vw,24px)/1.05 var(--display);text-transform:uppercase}
.wchk__list p{margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--muted)}

/* ---------- в тесте отвечает тот же человек, что и в блоке «Команда» ---------- */
.quiz__pic--web{background-image:url(/assets/home/maxim.webp);background-position:50% 6%;background-size:122%}

/* 981–1260: коллаж уже колонки текста и прижат к верху, чтобы не заходить на лид; наклейка — на нижнем краю коллажа */
@media (min-width:981px) and (max-width:1260px){
  .hero--web .hero__fig{top:clamp(12px,2vw,28px);bottom:auto;right:-1%;height:auto;width:min(42vw,500px)}
  .hero--web .hero__body{max-width:min(540px,calc(58vw - 2 * var(--g) - 24px))}
  .hero--web .sticker--hero{left:auto;right:3%;bottom:-13%;width:clamp(230px,22vw,260px)}
}

/* ================= планшет ================= */
@media (max-width:1180px){
  .wfmt__list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(120px,13vw,160px)}
  .wchk__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wchk__art{position:relative;right:auto;top:auto;width:min(62%,300px);margin:clamp(18px,3vw,28px) 0 calc(-1 * clamp(20px,4vw,40px)) auto}
}
@media (max-width:980px){
  .wfmt__head{grid-template-columns:1fr;gap:18px}
  .wfmt__head .h2,.wfmt__head .lead{grid-column:1;grid-row:auto}
  /* первый экран: заголовок, синяя полоса с иллюстрацией, наклейка кейса под ней, текст и факты */
  .hero--web{grid-template-columns:1fr;grid-template-areas:"title" "stage" "body" "facts";grid-template-rows:auto auto auto auto}
  .hero--web .hero__stage{position:relative;margin:clamp(18px,4vw,30px) 0 0;height:auto;min-height:0;clip-path:none;padding:0}
  .hero--web .hero__stage::after{display:none}
  .hero--web .hero__fig{top:auto}
  .hero--web .hero__fig{position:relative;display:block;right:auto;bottom:auto;width:min(88%,500px);height:auto;aspect-ratio:var(--fig-ar,1200/1494);margin:0 0 clamp(56px,15vw,84px) auto}
  .hero--web .hero__art{translate:none}
  .hero--web .sticker--hero{position:absolute;display:block;left:calc(-1 * min(13.6vw,68px));right:auto;top:auto;bottom:calc(-1 * clamp(48px,13vw,76px));width:min(56vw,250px);margin:0;padding:12px 15px 14px;--r:-5deg}
  .hero--web .sticker__num{font-size:clamp(44px,12vw,60px)}
  .hero--web .sticker__cap{font-size:13px}
  .hero--web .hero__body{padding-top:clamp(20px,5vw,30px);max-width:62ch}
  .wfacts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wfacts li:nth-child(2){border-right:0;padding-right:var(--g)}
  .wfacts li:nth-child(-n+2){border-bottom:1px solid rgba(244,243,238,.22)}
  .wfacts li:nth-child(3){padding-left:var(--g)}
}

/* планшет: лупа стоит справа от заголовка и лида, как картинки в шапках других блоков, без пустой полосы слева */
@media (min-width:701px) and (max-width:1180px){
  .wchk .wrap{display:grid;grid-template-columns:minmax(0,1fr) min(34%,300px);column-gap:clamp(20px,3vw,40px);align-items:end}
  .wchk__head{grid-column:1;grid-row:1}
  .wchk__art{grid-column:2;grid-row:1;width:100%;margin:0 0 calc(-1 * clamp(16px,3vw,30px))}
  .wchk__list{grid-column:1/-1;grid-row:2}
}

/* ================= телефон ================= */
@media (max-width:700px){
  .wfacts{grid-template-columns:1fr 1fr}
  .wfacts b{font-size:clamp(30px,8.4vw,40px)}
  .wfacts span{font-size:13px}
  .wfmt__slider{margin:-100px calc(var(--g) * -1) 0;overflow:hidden}
  .wfmt__list{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(84vw,360px);gap:14px;margin-top:8px;padding:calc(clamp(104px,28vw,128px) + 28px) var(--g) 20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .wfmt__list::-webkit-scrollbar{display:none}
  .wcard{scroll-snap-align:start;align-self:start;min-height:0}
  .wcard__pic{height:clamp(170px,46vw,210px);margin-top:calc(-1 * clamp(96px,26vw,120px))}
  .wchk__list{grid-template-columns:1fr}
  .wchk__list li{box-shadow:6px 6px 0 var(--ink)}
  .wchk__list li:nth-child(3n+2){box-shadow:6px 6px 0 var(--blue)}
  .wchk__list li:nth-child(3n){box-shadow:6px 6px 0 var(--lime)}
}

/* ================= иллюстрации на планшете и телефоне ================= */
@media (max-width:980px){
}
@media (max-width:700px){
}

/* SEO 22.09.2026: ключ первой строкой H1 — мелкий кикер над слоганом (как «Маркетинговое агентство полного цикла» на главной) */
.hero--web .hero__title .hl--k{font:700 clamp(11px,1.12vw,17px)/1.25 var(--text);letter-spacing:.12em;margin:0 0 1.2em;white-space:normal}
@media (max-width:480px){.hero--web .hero__title .hl--k{letter-spacing:.06em;margin-bottom:.9em}}

/* ---------- мелочи по аудиту 22.09.2026 (только эта страница) ---------- */
/* большая цифра кейса одним словом: «+64%», а не «+ 64 %» (span счетчика внутри flex) */
#cases .pc .giant{gap:0}
/* три вкладки кейсов одинаковой ширины */
@media (min-width:981px){#cases .case-nav__row a{flex:1 1 0;min-width:0}}
/* «Й» и «Д» не слипаются со строкой выше */
#formats-title,#cases-title,#scope-title,#reviews-title,#audit-title{line-height:.93}
#cases .nextcase h3{line-height:.95}
/* телефон в подписи формы не рвется на дефисе */
.form__alt a[href^="tel:"]{white-space:nowrap}
@media (max-width:700px){
  /* первая карточка форматов стоит с отступом страницы, а не вплотную к краю экрана */
  .wfmt__list{scroll-padding-inline:var(--g)}
  /* подписи цифр кейса в одной строке сетки начинаются на одной высоте */
  .pc .tally div{align-content:start}
}

/* ---------- заголовок первого экрана в стиле главной (home-hero.css): вся шапка скошена на 3°,
   строки вытянуты по вертикали, под последней — лаймовая плашка-параллелограмм, кикер скошен вместе с заголовком ---------- */
.hero--web .hero__title{font-size:clamp(46px,7.6vw,118px);line-height:1;transform:skewY(-3deg);transform-origin:0 0}
.hero--web .hero__title .hl--1,.hero--web .hero__title .hl--2,.hero--web .hero__title .hl--3{height:1.2em;transform-origin:0 80%;white-space:nowrap}
.hero--web .hero__title .hl--1{scale:1 1.7;margin-top:.86em;height:1.36em;transform-origin:0 72%}
.hero--web .hero__title .hl--2{scale:1 1.62}
.hero--web .hero__title .hl--3{scale:1 1.33;margin-top:-.06em}
.hero--web .hero__title .hl--3 .marker::before,.hero--web .hero__title .marker--m::before{left:-.16em;right:-.12em;top:.04em;bottom:-.1em;transform:none;clip-path:polygon(2.24% 0,100% 0,98.02% 100%,0 100%)}
/* на компьютере «объясняет» без плашки: плашка только под последней строкой, как на главной */
@media (min-width:981px){.hero--web .hero__title .marker--m::before{display:none}}
/* на телефоне и планшете плашка идет под всей строкой «объясняет и продает.»: плашка первого слова заходит под пробел */
@media (max-width:980px){.hero--web .hero__title .marker--m::before{right:-.34em;clip-path:none}}
.hero--web .hero__title .hl--k{margin-bottom:1.05em}
@media (max-width:980px){
  /* «объясняет и продает.» — одной строкой (владелец), кегль под самую длинную строку */
  .hero--web .hero__title{font-size:10.6vw;padding-top:clamp(22px,6vw,44px)}
  .hero--web .hero__title .hl--2,.hero--web .hero__title .hl--3{display:inline-block;vertical-align:top;margin-top:0;scale:1 1.5}
}

/* ---------- ползунки владельца (?tune): сдвиг и размер коллажа и наклейки первого экрана ---------- */
.hero--web .hero__fig picture{translate:var(--art-x,0px) var(--art-y,0px);scale:var(--art-s,1)}
.hero--web .sticker--hero{translate:var(--st-x,0px) var(--st-y,0px);scale:var(--st-s,1)}
/* значения владельца с ползунков (23.09.2026, телефон 398px): коллаж вправо 47, вверх 142, 100%; наклейка влево 16, вверх 300, 67%.
   Вбиты долями ширины экрана, чтобы на других телефонах картинка стояла так же */
@media (max-width:700px){
  .hero--web{--art-x:11.81vw;--art-y:-35.68vw;--art-s:1;--st-x:-4.02vw;--st-y:-75.38vw;--st-s:.67}
}
/* значения владельца с ползунков для компьютера (23.09.2026, 1563×863): коллаж вверх 216, 108%; наклейка влево 131, вверх 406 */
@media (min-width:1261px){
  /* коллаж привязан к верху блока (у владельца его верх стоял в 3px от верха блока), а не сдвинут на фиксированные 216px:
     иначе на экранах ниже 863px верх уезжал под шапку. Высота 780px, на ширине меньше 1444px — 54vw; наклейка — доли высоты коллажа */
  .hero--web{--fh:min(780px,54vw);--art-y:0px;--art-s:1.08;--st-x:calc(var(--fh) * -.168);--st-y:calc(var(--fh) * -.209)}
  .hero--web .hero__fig{top:3px;bottom:auto;height:var(--fh)}
}
/* на телефоне и планшете сдвиг коллажа по вертикали двигает и раскладку: текст идет сразу за картинкой,
   а наклейка остается там, куда ее поставили (ее сдвиг считается от прежнего места коллажа) */
@media (max-width:980px){
  .hero--web .hero__fig{margin-top:var(--art-y,0px);margin-bottom:clamp(12px,4vw,20px)}
  .hero--web .hero__fig picture{translate:var(--art-x,0px) 0}
  .hero--web .sticker--hero{translate:var(--st-x,0px) calc(var(--st-y,0px) - var(--art-y,0px))}
  /* обычный отступ от кнопки теста до полосы фактов */
  .hero--web .hero__body{padding-bottom:clamp(26px,7vw,36px)}
}

/* ---------- наклейка первого экрана листает кейсы (web-hero.js, как home-hero.js на главной) ---------- */
/* цвет — как у плаката кейса; тень-плашка видна на любом фоне коллажа */
.hero--web .sticker--hero[data-tone="dark"]{background:var(--ink);color:var(--on-ink);box-shadow:10px 10px 0 var(--lime)}
.hero--web .sticker--hero[data-tone="dark"] .sticker__num{color:var(--lime)}
.hero--web .sticker--hero[data-tone="blue"]{background:var(--blue);color:#fff}
.hero--web .sticker--hero[data-tone="paper"]{background:var(--sheet);box-shadow:10px 10px 0 var(--blue)}
.hero--web .sticker--hero[data-tone="paper"] .sticker__num{color:var(--blue)}
.hero--web .sticker__num small{margin-left:.08em}
/* смена кейса: наклейка улетает вверх и прилетает новой (те же тайминги, что на главной) */
.hero--web .sticker--hero.is-swap{animation:web-swap .62s cubic-bezier(.3,.7,.2,1) both}
@keyframes web-swap{
  0%{transform:rotate(var(--r,-4deg))}
  38%{transform:translate(10%,-18%) rotate(calc(var(--r,-4deg) + 7deg)) scale(1.03);opacity:0}
  42%{transform:translate(-12%,16%) rotate(calc(var(--r,-4deg) - 7deg)) scale(1.04);opacity:0}
  100%{transform:rotate(var(--r,-4deg));opacity:1}
}
@media (prefers-reduced-motion:reduce){.hero--web .sticker--hero.is-swap{animation:none}}

/* ================= «Как проходит разработка» (#process) — концепция блока главной «Все, что нужно для управляемого роста»
   (home-services.css): рваные полосы-картинки /assets/home/services/band-*.webp, крупные заголовки строк, лаймовый итог справа,
   картинка шага заходит на правый край полосы. На планшете полосы — карточки в две колонки, на телефоне — листаемые карточки
   с краями тех же полос (border-image), как на главной. Картинки шагов — свои (assets/sayty/step-*.webp) ================= */
.wsx{position:relative;overflow:clip;background:var(--paper);color:var(--ink);padding-block:var(--sec)}
.wsx img{max-width:none}
.wsx__in{position:relative;max-width:1536px;margin-inline:auto;padding-inline:var(--g);container-type:inline-size}
.wsx__title{margin:0;font-family:var(--display);font-weight:900;line-height:1;text-transform:uppercase;color:var(--ink)}
.wsx__l1,.wsx__l2{display:block;width:max-content;white-space:nowrap;transform-origin:0 80%}
.wsx__l1{margin-top:.34em;scale:1 1.42}
.wsx__l2{margin-top:.3em;scale:1 1.52;rotate:-.9deg}
.wsx__lead p{margin:0;font:400 16px/1.45 var(--text)}
.wsx__lead p + p{margin-top:10px}
.wsx__lead b{font-weight:700}
.wsx__rows{margin:0;padding:0;list-style:none}
.wsx__row{position:relative}
.wsx__n{font:800 22px/1 var(--display);transform-origin:0 80%;scale:1 1.16}
.wsx__h{margin:0;font-family:var(--display);font-weight:900;line-height:1;text-transform:uppercase;white-space:nowrap;transform-origin:0 80%}
.wsx__goal{margin:0;font-weight:700}
.wsx__works{margin:0;padding:0;list-style:none}
.wsx__works li{position:relative;padding-left:20px}
.wsx__works li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--lime)}
.wsx__out{position:relative;margin:0;display:flex;flex-direction:column;gap:8px}
.wsx__out i{font:700 11px/1 var(--text);font-style:normal;text-transform:uppercase;letter-spacing:.1em;opacity:.7}
.wsx__out b{font-family:var(--display);font-weight:800;line-height:1.08;text-transform:uppercase;color:var(--lime);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
/* цвета: 1 и 3 — черные полосы, 2 и 4 — белые, 5 — синяя */
.wsx__row--1,.wsx__row--3,.wsx__row--5{color:#F4F3EE}
.wsx__row--2,.wsx__row--4{color:var(--ink)}
/* на белой полосе итог — черный текст на лаймовой плашке, маркеры списка в черной рамке (как «Сайты и лендинги» на главной) */
.wsx__row--2 .wsx__out b,.wsx__row--4 .wsx__out b{color:var(--ink);text-decoration:none;background:var(--lime);padding:3px 5px 2px;width:fit-content;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.wsx__row--2 .wsx__works li::before,.wsx__row--4 .wsx__works li::before{box-shadow:0 0 0 1.5px var(--ink)}
.wsx__row--5 .wsx__out b{color:#fff}
.wsx__row--5 .wsx__works li::before{background:var(--lime)}
.wsx__foot{position:relative;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:18px 40px}
.wsx__start{position:relative;inset:auto;margin:0;padding:12px 18px 13px;max-width:none;white-space:nowrap;border-width:3px;box-shadow:6px 6px 0 var(--ink);font-size:clamp(20px,1.7vw,26px);--r:-2.5deg}
.wsx__note{margin:0;max-width:52ch;font:400 16px/1.4 var(--text);rotate:-1.6deg;transform-origin:0 0}
.wsx__note b{font-weight:700}

/* ---------------- десктоп (от 1280px): полосы одна под другой, как на главной ---------------- */
@media (min-width:1280px){
  .wsx{--u:min(calc(100vw / 1536),1px)}
  .wsx__in{padding-inline:calc(36 * var(--u))}
  .wsx__title{position:relative;z-index:6;margin-left:calc(22 * var(--u));font-size:calc(96 * var(--u))}
  .wsx__lead{position:absolute;z-index:6;left:calc(790 * var(--u));top:calc(64 * var(--u));width:calc(430 * var(--u))}
  .wsx__lead p{font-size:max(13px,calc(15 * var(--u)))}
  .wsx__rows{position:relative;z-index:1;margin-top:calc(44 * var(--u))}
  .wsx__row{display:grid;grid-template-columns:calc(480 * var(--u)) calc(380 * var(--u)) calc(262 * var(--u)) 1fr;grid-template-areas:"h goal out ." "h works out .";align-items:center;column-gap:0;min-height:calc(168 * var(--u));padding:calc(30 * var(--u)) 0 calc(28 * var(--u)) calc(70 * var(--u));margin-top:calc(-10 * var(--u))}
  .wsx__band{position:absolute;z-index:1;left:0;top:0;width:var(--bw,100%);height:100%;transform:rotate(var(--r,0deg)) skewX(var(--k,0deg)) scaleX(var(--fx,1))}
  .wsx__row--1 .wsx__band{--r:-.45deg;--k:-.34deg}
  .wsx__row--2 .wsx__band{--r:-.3deg;--k:.34deg}
  .wsx__row--3 .wsx__band{--r:.09deg;--k:2.4deg}
  .wsx__row--4 .wsx__band{--r:.35deg;--k:-.6deg;--fx:-1}
  .wsx__row--5 .wsx__band{--r:-.19deg;--k:.17deg;--bw:82%}
  .wsx__n,.wsx__h,.wsx__goal,.wsx__works,.wsx__out{position:relative;z-index:3}
  .wsx__n{position:absolute;left:calc(26 * var(--u));top:calc(40 * var(--u));font-size:calc(22 * var(--u))}
  .wsx__h{grid-area:h;align-self:center;font-size:calc(74 * var(--u));rotate:-1.6deg;scale:1 1.2}
  .wsx__goal{grid-area:goal;align-self:end;max-width:calc(370 * var(--u));font-size:max(12px,calc(15 * var(--u)));line-height:1.3}
  .wsx__works{grid-area:works;align-self:start;margin-top:calc(10 * var(--u));font-size:max(11.5px,calc(14 * var(--u)));line-height:1.32}
  .wsx__works li{padding-left:calc(19 * var(--u))}
  .wsx__works li::before{width:calc(7 * var(--u));height:calc(7 * var(--u))}
  .wsx__out{grid-area:out;align-self:center;padding-left:calc(32 * var(--u));max-width:calc(262 * var(--u))}
  .wsx__out::before{content:"";position:absolute;left:0;top:-6%;bottom:-6%;width:max(1px,calc(1.5 * var(--u)));background:currentColor}
  .wsx__out i{font-size:max(10px,calc(11 * var(--u)))}
  .wsx__out b{font-size:calc(20 * var(--u))}
  /* картинка шага на правом краю полосы, чуть выходит за ее верх и низ */
  .wsx__pic{position:absolute;z-index:4;right:calc(var(--px,10) * var(--u));top:50%;height:calc(var(--ph,200) * var(--u));width:auto;translate:var(--tx,0px) calc(-50% + var(--ty,0px));scale:var(--ts,1);rotate:calc(var(--pr,0deg) + var(--tr,0deg))}
  .wsx__row--1 .wsx__pic{--ph:206;--pr:2deg;--px:14}
  .wsx__row--2 .wsx__pic{--ph:214;--pr:-2.5deg;--px:30}
  .wsx__row--3 .wsx__pic{--ph:176;--pr:1.5deg;--px:4}
  .wsx__row--4 .wsx__pic{--ph:160;--pr:-1.8deg;--px:0}
  .wsx__row--5 .wsx__pic{--ph:200;--pr:3deg;--px:24}
  .wsx__foot{margin:calc(48 * var(--u)) 0 0 calc(22 * var(--u))}
  .wsx__start{font-size:calc(26 * var(--u))}
  .wsx__note{font-size:max(13px,calc(16 * var(--u)))}
}

/* ---------------- телефон и планшет: карточки с рваными краями полос ---------------- */
@media (max-width:1279.98px){
  .wsx__title{font-size:min(12.6cqw,96px);margin-left:-.02em}
  .wsx__lead{margin-top:clamp(20px,4cqw,30px);max-width:62ch}
  .wsx__lead p{font-size:clamp(15px,2.2cqw,18px)}
  .wsx__rows{position:relative;z-index:2;display:grid;gap:30px;margin-top:clamp(56px,10cqw,84px)}
  .wsx__row{position:relative;padding:0 20px 26px;border:solid transparent;border-width:14px 10px;border-image-slice:22 20;border-image-width:14px 10px;border-image-repeat:stretch;background-clip:padding-box;display:flex;flex-direction:column;align-items:flex-start}
  .wsx__row--1{border-image-source:url("/assets/home/services/band-1-m.webp");background-color:#141411}
  .wsx__row--2,.wsx__row--4{border-image-source:url("/assets/home/services/band-2-m.webp");background-color:#ECE8E3}
  .wsx__row--3{border-image-source:url("/assets/home/services/band-3-m.webp");background-color:#111210}
  .wsx__row--5{border-image-source:url("/assets/home/services/band-4-m.webp");background-color:#0157F9}
  .wsx__band{display:none}
  .wsx__pic{position:relative;z-index:2;align-self:flex-end;width:var(--pw,56%);height:auto;margin:-46px -22px 0 0;translate:var(--tx,0px) var(--ty,0px);scale:var(--ts,1);rotate:calc(var(--r0,0deg) + var(--tr,0deg));transform-origin:100% 100%}
  .wsx__row--1 .wsx__pic{--r0:2deg}
  .wsx__row--2 .wsx__pic{--pw:50%;--r0:-2.5deg}
  .wsx__row--3 .wsx__pic{--pw:60%;--r0:1.5deg}
  .wsx__row--4 .wsx__pic{--pw:62%;--r0:-1.8deg}
  .wsx__row--5 .wsx__pic{--pw:54%;--r0:3deg}
  .wsx__n{position:absolute;top:12px;left:20px;font-size:24px}
  .wsx__h{margin-top:4px;font-size:min(13cqw,64px);rotate:-1.4deg;scale:1 1.14}
  .wsx__goal{margin-top:16px;font-size:16px;line-height:1.35;max-width:36ch}
  .wsx__works{margin-top:12px;font-size:15px;line-height:1.4}
  .wsx__works li + li{margin-top:3px}
  .wsx__out{margin-top:20px;padding-top:18px;width:100%}
  .wsx__out::before{content:"";position:absolute;left:0;top:0;width:64px;height:2px;background:currentColor}
  .wsx__out b{font-size:22px}
  .wsx__foot{margin-top:clamp(40px,8cqw,64px)}
}
/* телефон (до 700px): карточки листаются свайпом, как на главной — без стрелок и счетчиков, подсказка — край следующей карточки */
@media (max-width:699.98px){
  .wsx__slider{--side:calc((100vw - 100cqw) / 2);--card:min(86cqw,380px);margin:calc(clamp(56px,10cqw,84px) - 140px) calc(50% - 50vw) 0}
  .wsx__rows{grid-auto-flow:column;grid-auto-columns:var(--card);gap:16px;align-items:start;margin:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:140px var(--side) 26px;scroll-padding-inline:var(--side);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .wsx__rows::-webkit-scrollbar{display:none}
  .wsx__rows:focus-visible{outline:3px solid var(--blue);outline-offset:-4px}
  .wsx__row{scroll-snap-align:start;scroll-snap-stop:always;padding-inline:18px}
  .wsx__h{font-size:min(12.4cqw,54px)}
  .wsx__foot{margin-top:clamp(20px,5cqw,36px)}
}
/* планшет: карточки одна под другой, внутри две колонки — заголовок и текст слева, картинка и итог справа */
@media (min-width:700px) and (max-width:1279.98px){
  .wsx__rows{gap:40px}
  .wsx__row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:clamp(24px,4cqw,48px);align-items:start;padding:26px 30px 30px}
  .wsx__n{left:30px;top:14px}
  .wsx__h{grid-column:1;grid-row:1;margin-top:30px;font-size:min(8.4cqw,80px)}
  .wsx__goal{grid-column:1;grid-row:2}
  .wsx__works{grid-column:1;grid-row:3}
  .wsx__pic{grid-column:2;grid-row:1 / span 2;justify-self:end;width:min(var(--pw,56%) + 20%,320px);margin:-52px -40px 0 0}
  .wsx__out{grid-column:2;grid-row:3;align-self:end;margin-top:18px}
}

/* значения владельца с ползунков для картинок шагов (23.09.2026, телефон 401px), вбиты долями ширины экрана:
   шаг 03 — вправо 23, вниз 24, 121%; шаг 04 — вправо 21, 113%; шаг 05 — вниз 40, 118% */
@media (max-width:699.98px){
  .wsx__row--3{--tx:5.74vw;--ty:5.99vw;--ts:1.21}
  .wsx__row--4{--tx:5.24vw;--ts:1.13}
  .wsx__row--5{--ty:9.98vw;--ts:1.18}
}

/* значения владельца с ползунков для картинок форматов (#formats, телефон 401px), вбиты долями ширины экрана.
   Лендинг — вправо 40, вниз 51, 123%; квиз — вправо 8, вниз 29, 116%, наклон 6,5°; сайт компании — вправо 23, вниз 29, 113%; посадочные — вниз 25, 109% */
@media (max-width:700px){
  .wcard--1{--tx:9.98vw;--ty:12.72vw;--ts:1.23}
  .wcard--2{--tx:2vw;--ty:7.23vw;--ts:1.16;--tr:6.5deg}
  .wcard--3{--tx:5.74vw;--ty:7.23vw;--ts:1.13}
  .wcard--4{--ty:6.23vw;--ts:1.09}
}

/* ---------- «Дизайн ≠ продажи» (#system): крючки для ползунков владельца (синяя полоса, ноутбук, рука с рамкой).
   Без значений ничего не меняют; значения ставятся на section#system и потом вбиваются сюда ---------- */
.open--web{overflow-x:clip}
.open--web .open__frame{translate:var(--fr-x,0px) var(--fr-y,0px);scale:var(--fr-s,1);rotate:var(--fr-r,0deg)}
.open--web .report-shot{translate:var(--lp-x,0px) var(--lp-y,0px);scale:var(--lp-s,1);rotate:var(--lp-r,0deg)}
.open--web .report-zone::before{translate:var(--bl-x,0px) var(--bl-y,0px);scale:var(--bl-w,1) var(--bl-h,1)}
@media (max-width:980px){.open--web .report-zone::before{rotate:calc(-1.4deg + var(--bl-r,0deg))}}
@media (min-width:981px){.open--web .report-zone::before{rotate:var(--bl-r,0deg)}}
/* значения владельца с ползунков (23.09.2026, телефон 343px), вбиты долями ширины экрана:
   синяя полоса — вниз 28, ширина 121%; ноутбук — влево 11, вверх 26; рука с рамкой — вверх 154 */
@media (max-width:700px){
  .open--web{--bl-y:8.16vw;--bl-w:1.21;--lp-x:-3.21vw;--lp-y:-7.58vw;--fr-y:-44.9vw}
}

/* ---------- «Что проверяем перед публикацией» (#checklist): крючки для ползунков владельца (картинка с лупой) ---------- */
.wchk{overflow-x:clip}
.wchk__art img{translate:var(--ck-x,0px) var(--ck-y,0px);scale:var(--ck-s,1);rotate:var(--ck-r,0deg)}
/* значения владельца (23.09.2026, телефон 365px): картинка вправо 10, вниз 85 — поставлена раскладкой, а не сдвигом:
   картинка в 20px под лидом, заходит на первую карточку на 82px, как выставил владелец; карточки поднялись вслед за ней */
@media (max-width:700px){
  .wchk{--ck-x:2.74vw}
  .wchk__art{margin:7vw 0 max(calc(min(62%, 300px) * -.504), -105px) auto}
}
/* значения владельца с ползунков для компьютера (23.09.2026, 1580px):
   рука с рамкой — вправо 66, вверх 44, 93%, наклон 23,5° (блок в vw, поэтому доли ширины);
   картинка с лупой — влево 172, 125%, наклон 15,5° */
@media (min-width:981px){
  .open--web{--fr-x:4.18vw;--fr-y:-2.78vw;--fr-s:.93;--fr-r:23.5deg}
}
@media (min-width:1181px){
  .wchk{--ck-x:max(-172px, calc(-172px + (1580px - 100vw) * .15));--ck-s:1.25;--ck-r:15.5deg}
}

/* 701–980: под коллажем место для наклейки, которая свисает с его нижнего края, — иначе она ложилась на лид (23.09.2026) */
@media (min-width:701px) and (max-width:980px){
  .hero--web .hero__fig{margin-bottom:clamp(64px,10vw,96px)}
}

/* 23.09.2026, владелец: «сократить расстояние между текстом под заголовком и карточками» форматов на телефоне —
   запас над выступающими картинками уменьшен на 72px (было +100px в отступе списка): от лида до верха картинок ~24px вместо ~96px.
   Номера этапов (01–05) в «Как проходит внедрение» убраны по просьбе владельца — в разметке их больше нет. */

/* ---------- телефон (<700px): картинка этапа — фоном карточки под текстом ----------
   значения владельца с ползунков (23.09.2026, экран 335px): текст от верха 22px, запас над лентой 24px, ширина 66%,
   затемнение цветом карточки 0,45, обрезка по карточке. Положение по умолчанию — среднее по картинкам CRM (центр 69%, сверху 202px),
   точные положения каждой карточки CRM — в crm-poster.css */
@media (max-width:699.98px){
  .wsx__rows{padding-top:24px}
  .wsx__slider{margin-top:calc(clamp(56px,10cqw,84px) - 24px)}
  .wsx__row{isolation:isolate;overflow:hidden;padding-top:22px}
  .wsx__row--1{--sb-bg:#141411}
  .wsx__row--2,.wsx__row--4{--sb-bg:#ECE8E3}
  .wsx__row--3{--sb-bg:#111210}
  .wsx__row--5{--sb-bg:#0157F9}
  .wsx__pic{position:absolute;z-index:0;left:var(--sb-x,69%);top:var(--sb-y,202px);width:var(--sb-w,66%);margin:0;translate:-50% 0;scale:1;rotate:0deg;transform-origin:50% 50%}
  .wsx__row::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--sb-bg);opacity:.45}
  .wsx__row>:not(.wsx__pic):not(.wsx__band){position:relative;z-index:1}
}

/* телефон: длинный заголовок этапа («Выбор процесса», «Карта данных») не влезал в карточку и обрезался ее краем —
   размер шрифта не больше, чем влезает по длине заголовка (--hl ставит сборщик; буква этого шрифта ≈ 0,45 кегля, запас до 0,47) */
@media (max-width:699.98px){
  .wsx__h{font-size:min(12.4cqw,54px,calc((var(--card) - 60px) / (var(--hl,8) * .47)))}
}