/* case-popup — попап кейса #m-case по макету владельца (Figma h0Iwvl2ABU8Z0brFf4Oe4L, узел 114:7), 07.11.
   Полноэкранное окно: слева липкое оглавление с линией прогресса (наполняется градиентом по мере чтения),
   справа разделы кейса; заголовок и ниша прокручиваются вместе с контентом; крестик и стрелки кейсов — всегда на виду.
   Разметку собирает assets/js/cases.js (поле story у кейса или старые поля), механика окна — assets/js/modal.js.
   Подключён ПОСЛЕДНИМ (после mobile-*.css): файл целиком отвечает за #m-case, включая адаптив.
   Механику появления (блюр на подложке в финальном значении, анимируется только opacity) задаёт fix-pk-modals.css — здесь её не трогаем.
   Правила: без контурных обводок, без грязных теней, на скролле меняется только transform. */

/* ============ окно: на весь экран (ПК и планшет) ============ */
@media (min-width:768px){
  #m-case{padding:0;place-items:stretch;grid-template:minmax(0,1fr) / minmax(0,1fr)}
  #m-case .modal__overlay{background:rgba(1,1,3,.84)}
  #m-case .modal__frame--case{zoom:1;width:100%;height:100vh;height:100dvh;display:block}
  #m-case .modal__panel{width:100%;height:100%;max-height:none;padding:0;border-radius:0;background:transparent;box-shadow:none}
  #m-case .modal__panel::after{display:none}
  #m-case .modal__body{height:100%;margin:0;-webkit-mask:none;mask:none;scrollbar-width:none}
  #m-case .modal__body::-webkit-scrollbar{display:none}
  /* крестик — тонкий, как в макете; круг-подложка появляется на ховере */
  #m-case .modal__close{top:22px;right:24px;width:52px;height:52px;background-color:transparent;color:rgba(255,255,255,.72)}
  #m-case .modal__close:hover{background-color:rgba(255,255,255,.08);color:#fff}
  /* стрелки кейсов + счётчик — пилюля внизу справа, вне прокрутки */
  #m-case .cs-nav{position:absolute;right:24px;bottom:24px;z-index:5;display:flex;align-items:center;gap:4px;padding:6px;
    border-radius:100px;background:rgba(18,19,24,.82)}
}
#m-case .cs-nav .modal__nav{position:relative;inset:auto;margin:0;width:44px;height:44px}
#m-case .cs-nav:has(.modal__nav[hidden]){display:none}
#m-case .cpop__count{position:static;min-width:62px;text-align:center;font:500 12px/16px var(--f-text);letter-spacing:.06em;
  color:rgba(255,255,255,.42);font-variant-numeric:tabular-nums}
#m-case .cpop__count:empty{display:none}

/* ============ сетка: поля | оглавление | контент 710 | ниша ============ */
#m-case .cs{--pl:max(clamp(48px,8.7vw,125px),calc((100vw - 1440px) / 2 + 125px));--toc:clamp(220px,18vw,260px);--col:710px;
  display:grid;grid-template-columns:var(--pl) var(--toc) minmax(0,var(--col)) minmax(0,1fr);padding-top:74px}
#m-case .cs--after{padding:96px 0 150px}
#m-case .cs-toc{grid-column:2;grid-row:1 / 3;position:sticky;top:74px;align-self:start;padding-right:28px}
#m-case .cs-main{grid-column:3;grid-row:1 / 3;min-width:0}
#m-case .cs--after .cs-main{grid-row:auto}
#m-case .cs-aside{grid-column:4;grid-row:1;justify-self:end;padding:6px max(24px,calc(var(--pl) - 20px)) 0 24px}
#m-case .cs-head__meta{display:none}
@media (max-width:1279px){
  #m-case .cs-aside{display:none}
  #m-case .cs-head__meta{display:flex;margin-bottom:16px}
}

/* ============ оглавление ============ */
#m-case .cs-toc__label{margin:6px 0 15px 24px;font:400 10px/12px var(--f-text);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5)}
#m-case .cs-toc__wrap{position:relative;padding-left:24px}
/* линия прогресса: дорожка белый 8 %, заливка — фирменный градиент сверху вниз (scaleY), на краю — светящаяся точка */
#m-case .cs-toc__rail{position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;background:rgba(255,255,255,.08)}
#m-case .cs-toc__fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#FBD080 0%,#E2C278 45%,#80E1A6 100%);
  transform-origin:50% 0;transform:scaleY(0);will-change:transform}
#m-case .cs-toc__dot{position:absolute;left:50%;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#FFF4D6;
  box-shadow:0 0 0 4px rgba(251,208,128,.13),0 0 16px 3px rgba(226,194,120,.5);will-change:transform}
#m-case .cs-toc__list{display:flex;flex-direction:column;gap:20px;margin:0;padding:0;list-style:none}
#m-case .cs-toc__list li{margin:0}
#m-case .cs-toc__a{display:block;font:400 28px/29px var(--f-display);color:rgba(255,255,255,.4);transition:color .35s var(--ease)}
#m-case .cs-toc__a:hover{color:rgba(255,255,255,.75)}
#m-case .cs-toc__a.is-active{color:#fff}
#m-case .cs-toc__a:focus-visible{outline:2px solid var(--c-gold);outline-offset:4px;border-radius:6px}
#m-case .cs-toc__bar{display:none}
@media (min-width:1024px) and (max-height:820px){
  #m-case .cs-toc__list{gap:14px}
  #m-case .cs-toc__a{font-size:24px;line-height:26px}
}

/* ============ шапка кейса (прокручивается) ============ */
#m-case .cs-title{font:400 40px/44px var(--f-display);color:#fff;max-width:700px}
#m-case .cs-lead{margin-top:16px;max-width:700px;font:400 15px/27px var(--f-text);color:rgba(255,255,255,.7)}
#m-case .cs-hero{margin-top:24px;width:100%;max-width:700px;aspect-ratio:700 / 385;border-radius:15px;overflow:hidden}
#m-case .cs-hero > picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
/* девайсы (ПК+телефон) стоят прямо на фоне попапа — без тёмной плитки-подложки (правило владельца 07.11) */
#m-case .cs-hero.cpop__stage{background:none}
#m-case .cs-hero.cpop__stage::after{display:none}

/* ============ разделы ============ */
#m-case .cs-sec{margin-top:64px;padding-top:56px;border-top:1px solid rgba(255,255,255,.08)}
#m-case .cs-sec:first-of-type{margin-top:48px;padding-top:0;border-top:0}
#m-case .cs-sec > * + *{margin-top:24px}
#m-case .cs-sec > .cs-h1 + *{margin-top:20px}
#m-case .cs-h1{font:400 35px/38px var(--f-display);color:#fff;max-width:700px}
#m-case .cs-sec > .cs-h2{margin-top:48px}
#m-case .cs-h2{font:400 25px/29px var(--f-display);color:#fff}
#m-case .cs-p{max-width:700px;font:400 15px/27px var(--f-text);color:rgba(255,255,255,.7)}
#m-case .cs-p b,#m-case .cs-list b{font-weight:500;color:#fff}
/* акцентное слово — градиент; padding-block, чтобы не резались низы букв (правило СТИЛЬ.md) */
#m-case :is(.cs-p,.cs-h1,.cs-pop__t,.cs-cta__t) em{font-style:normal;padding-block:.08em;background:var(--g-word);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
#m-case .cs-p em{color:transparent}

/* список — ромбы, без разделителей */
#m-case .cs-list{max-width:700px}
#m-case .cs-list li{position:relative;padding-left:24px;font:400 15px/26px var(--f-text);color:rgba(255,255,255,.7)}
#m-case .cs-list li + li{margin-top:14px}
#m-case .cs-list li::before{content:"";position:absolute;left:2px;top:10px;width:6px;height:6px;border-radius:1.5px;background:var(--g-btn);transform:rotate(45deg)}

/* буллиты с иконкой — 3 колонки (макет: «Название буллита») */
#m-case .cs-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 40px;max-width:710px}
#m-case .cs-sec > .cs-feats{margin-top:32px}
#m-case .cs-feat{display:flex;flex-direction:column}
#m-case .cs-ic{width:18px;height:18px;flex:none}
#m-case .cs-feat__t{margin-top:12px;font:500 15px/22px var(--f-text);color:#fff}
#m-case .cs-feat__d{margin-top:6px;font:400 13px/22px var(--f-text);color:rgba(255,255,255,.7)}

/* цифры */
#m-case .cs-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 40px;max-width:710px}
#m-case .cs-sec > .cs-metrics{margin-top:36px}
#m-case .cs-metric__v{display:inline-block;padding-block:.06em;font:400 64px/60px var(--f-display);background:var(--g-word);
  -webkit-background-clip:text;background-clip:text;color:transparent}
#m-case .cs-metric__l{display:block;margin-top:10px;font:400 13px/21px var(--f-text);color:rgba(255,255,255,.62)}

/* путь по шагам */
#m-case .cs-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 40px;max-width:710px;counter-reset:s}
#m-case .cs-sec > .cs-steps{margin-top:36px}
#m-case .cs-step{display:flex;flex-direction:column}
#m-case .cs-step__n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.06);
  font:600 12px/1 var(--f-text);color:var(--c-gold);font-variant-numeric:tabular-nums}
#m-case .cs-step__t{margin-top:14px;font:500 15px/22px var(--f-text);color:#fff}
#m-case .cs-step__d{margin-top:4px;font:400 13px/21px var(--f-text);color:rgba(255,255,255,.62)}

/* экран с внутренней прокруткой (макет: «Наведите курсор на экран и прокручивайте вниз») */
#m-case .cs-shot{max-width:700px}
#m-case .cs-sec > .cs-shot{margin-top:32px}
#m-case .cs-hint{display:flex;align-items:center;gap:9px;margin-bottom:14px;font:500 12px/15px var(--f-text);color:#fff}
#m-case .cs-hint b{font-weight:500;background:var(--g-word);-webkit-background-clip:text;background-clip:text;color:transparent}
#m-case .cs-hint__ic{width:14px;height:12px;flex:none}
#m-case .cs-shot__scr{position:relative;border-radius:15px;overflow:hidden;background:#F3F5F4}
#m-case .cs-shot__img,#m-case .cs-phone__img{display:block}
#m-case .cs-shot__img img,#m-case .cs-phone__img img{display:block;width:100%;height:auto}
#m-case .cs-shot.is-scroll .cs-shot__scr{height:385px;overflow-y:auto;overscroll-behavior:auto;scrollbar-width:thin;scrollbar-color:rgba(16,16,16,.28) transparent;
  -webkit-mask:linear-gradient(180deg,#000 calc(100% - 56px),rgba(0,0,0,.25));mask:linear-gradient(180deg,#000 calc(100% - 56px),rgba(0,0,0,.25))}
#m-case .cs-shot.is-scroll .cs-shot__scr.is-end{-webkit-mask:none;mask:none}
#m-case .cs-shot__scr:focus-visible,#m-case .cs-phone__scr:focus-visible{outline:2px solid var(--c-gold);outline-offset:3px}
#m-case .cs-cap{margin-top:12px;font:400 13px/20px var(--f-text);color:rgba(255,255,255,.4)}

/* телефон с прокруткой */
#m-case .cs-phone{display:grid;grid-template-columns:280px minmax(0,1fr);gap:48px;align-items:center;max-width:710px}
#m-case .cs-sec > .cs-phone{margin-top:32px}
#m-case .cs-phone__dev{position:relative;width:280px;padding:9px;border-radius:46px;background:linear-gradient(160deg,#2b2c31,#111215)}
#m-case .cs-phone__scr{height:570px;border-radius:37px;overflow-y:auto;overscroll-behavior:auto;scrollbar-width:none;background:#F5F6F5}
#m-case .cs-phone__scr::-webkit-scrollbar{display:none}
#m-case .cs-phone__isl{position:absolute;top:19px;left:50%;width:82px;height:24px;margin-left:-41px;border-radius:20px;background:#0A0A0C;pointer-events:none}
#m-case .cs-phone__txt .cs-hint{margin-bottom:18px}
/* ============ блок «3 мобилки в ряд» (без скролла) ============ */
#m-case .cs-phones{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:710px}
#m-case .cs-sec > .cs-phones{margin-top:32px}
#m-case .cs-ph{margin:0}
#m-case .cs-ph__scr{display:block;border-radius:30px;overflow:hidden;background:#F5F6F5;
  box-shadow:0 0 0 6px #16171b,0 0 0 7px rgba(255,255,255,.10),0 26px 54px -26px rgba(0,0,0,.92)}
#m-case .cs-ph__img img{display:block;width:100%;height:auto}
#m-case .cs-ph__cap{margin-top:18px;font:400 13px/19px var(--f-text);color:rgba(255,255,255,.42)}

/* слайдер (макет: «Можно сделать слайдер») — лента уходит за правый край окна */
#m-case .cs-slider{max-width:none}
#m-case .cs-sec > .cs-slider{margin-top:-46px}
#m-case .cs-slider__head{pointer-events:none;min-height:0}
#m-case .cs-slider__btns{pointer-events:auto}
#m-case .cs-slider__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:710px}
#m-case .cs-slider__head .cs-p{max-width:540px}
#m-case .cs-slider__btns{display:flex;gap:10px;flex:none}
#m-case .cs-sl{display:grid;place-items:center;width:50px;height:50px;border:0;border-radius:50%;cursor:pointer;background:var(--g-btn);color:#101010;
  transition:background-color var(--t-fast) ease,color var(--t-fast) ease,box-shadow var(--t-med) var(--ease),opacity var(--t-fast) ease}
#m-case .cs-sl svg{width:16px;height:16px}
#m-case .cs-sl:not(:disabled):hover{box-shadow:0 12px 30px -12px rgba(226,194,120,.65)}
#m-case .cs-sl:disabled{background:rgba(255,255,255,.06);color:rgba(255,255,255,.28);cursor:default}
#m-case .cs-sl:focus-visible{outline:2px solid var(--c-gold);outline-offset:3px}
#m-case .cs-slider__track{display:flex;gap:20px;margin-top:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin-right:calc(var(--pl) + var(--toc) + var(--col) - 100vw);padding-right:calc(100vw - var(--pl) - var(--toc) - var(--col))}
#m-case .cs-slider__track::-webkit-scrollbar{display:none}
#m-case .cs-slide{flex:0 0 510px;scroll-snap-align:start}
#m-case .cs-slide__img{display:block;aspect-ratio:1400 / 875;border-radius:15px;overflow:hidden;background:#F3F5F4}
#m-case .cs-slide__img img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
#m-case .is-tiles .cs-slide{flex-basis:300px}
#m-case .is-tiles .cs-slide__img{aspect-ratio:212 / 136;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.025))}
#m-case .is-tiles .cs-slide__img svg{display:block;width:100%;height:100%}
#m-case .cs-slide__cap{display:flex;gap:16px;max-width:300px;margin-top:14px;font:400 13px/20px var(--f-text);color:rgba(255,255,255,.42)}
#m-case .cs-slide__cap i{font-style:normal;font-variant-numeric:tabular-nums}

/* акцент: вырезанные элементы интерфейса под наклоном (макет: «Можно выделять отдельные элементы акцентировано») */
#m-case .cs-sec > .cs-pop{margin-top:56px}
#m-case .cs-pop__t{max-width:700px;font:400 30px/34px var(--f-display);color:#fff}
#m-case .cs-pop__stage{position:relative;width:100%;max-width:700px;aspect-ratio:700 / var(--h);margin-top:28px}
#m-case .cs-pop__i{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%);border-radius:18px;overflow:hidden;
  transform:rotate(var(--r));box-shadow:0 30px 60px -32px rgba(0,0,0,.7);
  opacity:0;translate:0 26px;transition:opacity .7s var(--ease) var(--d),translate .9s var(--ease) var(--d)}
#m-case .cs-pop.is-in .cs-pop__i{opacity:1;translate:0 0}
#m-case .cs-pop__i img{display:block;width:100%;height:auto}
#m-case .cs-pop__d{margin-top:24px;max-width:440px}

/* было / стало */
#m-case .cs-cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:710px}
#m-case .cs-sec > .cs-cmp{margin-top:32px}
#m-case .cs-cmp__col{padding:26px 28px 28px;border-radius:20px;background:rgba(255,255,255,.04)}
#m-case .cs-cmp__col.is-after{background:linear-gradient(160deg,rgba(251,208,128,.13),rgba(128,225,166,.09))}
#m-case .cs-cmp__t{display:block;font:500 12px/16px var(--f-text);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)}
#m-case .is-after .cs-cmp__t{color:rgba(251,208,128,.9)}
#m-case .cs-cmp ul{margin-top:16px}
#m-case .cs-cmp li{position:relative;padding-left:24px;font:400 15px/23px var(--f-text);color:rgba(255,255,255,.6)}
#m-case .cs-cmp li + li{margin-top:12px}
#m-case .cs-cmp li::before{content:"";position:absolute;left:2px;top:11px;width:10px;height:1.5px;border-radius:1px;background:rgba(255,255,255,.3)}
#m-case .is-after li{color:#fff}
#m-case .is-after li::before{top:6px;width:12px;height:7px;border:solid #80E1A6;border-width:0 0 1.6px 1.6px;border-radius:0;background:none;transform:rotate(-45deg)}

/* цитата / отзыв */
#m-case .cs-quote{position:relative;max-width:700px;padding-left:44px}
#m-case .cs-quote::before{content:"«";position:absolute;left:0;top:-14px;font:400 64px/1 var(--f-display);background:var(--g-word);-webkit-background-clip:text;background-clip:text;color:transparent}
#m-case .cs-quote p{font:400 24px/31px var(--f-display);color:#fff}
#m-case .cs-quote footer{margin-top:16px;font:400 13px/20px var(--f-text);color:rgba(255,255,255,.5)}
#m-case .cs-quote footer b{display:block;font-weight:500;color:#fff}

/* варианты оффера (для сайтов) */
#m-case .cs-offers{display:grid;gap:14px;max-width:710px}
#m-case .cs-offer{padding:22px 26px 24px;border-radius:20px;background:rgba(255,255,255,.04)}
#m-case .cs-offer.is-chosen{background:linear-gradient(160deg,rgba(251,208,128,.14),rgba(128,225,166,.1))}
#m-case .cs-offer__n{display:block;font:500 12px/16px var(--f-text);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4)}
#m-case .is-chosen .cs-offer__n{color:rgba(251,208,128,.9)}
#m-case .cs-offer__t{display:block;margin-top:10px;font:400 22px/27px var(--f-display);color:#fff}
#m-case .cs-offer__d{display:block;margin-top:8px;font:400 13px/21px var(--f-text);color:rgba(255,255,255,.6)}

/* результат (кейсы на старых полях) */
#m-case .cs-res{max-width:710px;padding:28px 30px 30px;border-radius:20px;background:linear-gradient(160deg,rgba(251,208,128,.13),rgba(128,225,166,.09))}
#m-case .cs-res__t{font:400 26px/32px var(--f-display);color:#fff}

/* ============ призыв и другие кейсы ============ */
#m-case .cs-cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:32px;max-width:710px;min-height:172px;
  padding:24px 40px 26px 28px;border-radius:35px;background:linear-gradient(90.12deg,#FFCF7F 0%,#16F0C8 177.96%)}
#m-case .cs-cta__glow{position:absolute;right:-70px;top:-10px;width:340px;height:300px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.5),rgba(255,255,255,0))}
#m-case .cs-cta__txt{position:relative;max-width:431px}
#m-case .cs-cta__t{font:400 30px/34px var(--f-display);color:#060606}
#m-case .cs-cta__t em{background:none;color:inherit}
#m-case .cs-cta__d{margin-top:10px;font:400 15px/22px var(--f-text);color:rgba(6,6,6,.7)}
#m-case .cs-cta__act{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;flex:none}
#m-case .cs-cta__btn{display:inline-flex;align-items:center;gap:10px;height:60px;padding:0 30px;border-radius:100px;background:#fff;color:#101010;
  font:600 13px/17px var(--f-text);transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)}
#m-case .cs-cta__btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(6,6,6,.4)}
#m-case .cs-cta__btn .btn__arr,#m-case .cs-cta__demo .btn__arr{width:7px;height:7px;transition:transform var(--t-med) var(--ease)}
#m-case .cs-cta__btn:hover .btn__arr,#m-case .cs-cta__demo:hover .btn__arr{transform:translate(2px,-2px)}
#m-case .cs-cta__demo{display:inline-flex;align-items:center;gap:6px;font:500 13px/17px var(--f-text);color:rgba(6,6,6,.68);transition:color var(--t-fast) ease}
#m-case .cs-cta__demo:hover{color:#060606}
#m-case .cs-cta a:focus-visible{outline:2px solid #060606;outline-offset:3px;border-radius:100px}
#m-case .cs-rel__h{margin-top:80px}
#m-case .cs-rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:710px;margin-top:28px}
#m-case .cs-rel__card{display:block;width:100%;padding:0;border:0;background:none;text-align:left;color:inherit;cursor:pointer}
#m-case .cs-rel__img{display:block;aspect-ratio:16 / 10;border-radius:14px;overflow:hidden;background:#15171C}
#m-case .cs-rel__img img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s var(--ease)}
#m-case .cs-rel__card:hover .cs-rel__img img{transform:scale(1.04)}
#m-case .cs-rel__card .cmeta{margin-top:14px}
#m-case .cs-rel__t{display:block;margin-top:6px;font:400 20px/23px var(--f-display);color:#fff;transition:color var(--t-fast) ease}
#m-case .cs-rel__card:hover .cs-rel__t{color:var(--c-gold)}
#m-case .cs-rel__card:focus-visible{outline:2px solid var(--c-gold);outline-offset:4px;border-radius:14px}

/* ============ планшет и телефон: одна колонка, оглавление — полоса чипсов сверху ============ */
@media (max-width:1023px){
  #m-case .cs{display:block;padding:0 24px}
  #m-case .cs--after{padding:72px 24px 120px}
  #m-case .cs-aside{display:none}
  #m-case .cs-head__meta{display:flex;margin-bottom:14px}
  #m-case .cs-toc{position:sticky;top:0;z-index:3;margin:0 -24px;padding:10px 24px 0;background:rgba(12,13,17,.96)}
  #m-case .cs-toc__label,#m-case .cs-toc__rail{display:none}
  #m-case .cs-toc__wrap{padding:0}
  #m-case .cs-toc__list{flex-direction:row;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:10px;margin-right:-24px;padding-right:24px}
  #m-case .cs-toc__list::-webkit-scrollbar{display:none}
  #m-case .cs-toc__a{white-space:nowrap;padding:9px 14px;border-radius:100px;background:rgba(255,255,255,.06);
    font:500 13px/16px var(--f-text);color:rgba(255,255,255,.62);transition:background-color .3s var(--ease),color .3s var(--ease)}
  #m-case .cs-toc__a.is-active{background:var(--g-btn);color:#101010}
  #m-case .cs-toc__bar{display:block;height:2px;margin:0 -24px;background:rgba(255,255,255,.06)}
  #m-case .cs-toc__bar i{display:block;height:100%;background:var(--g-btn);transform-origin:0 50%;transform:scaleX(0);will-change:transform}
  #m-case .cs-head{padding-top:28px}
  #m-case .cs-title{font-size:32px;line-height:35px}
  #m-case .cs-h1{font-size:28px;line-height:31px}
  #m-case .cs-sec{margin-top:52px;padding-top:44px}
  #m-case .cs-sec:first-of-type{margin-top:44px}
  #m-case .cs-slider__track{margin-right:-24px;padding-right:24px}
  #m-case .cs-slide{flex-basis:min(510px,82%)}
  /* длинные скрины на тач-экранах — целиком, без вложенной прокрутки (свайп листает окно, а не скрин) */
  #m-case .cs-shot.is-scroll .cs-shot__scr{height:auto;overflow:visible;-webkit-mask:none;mask:none}
  #m-case .cs-shot.is-scroll .cs-hint{display:none}
}
@media (min-width:768px) and (max-width:1023px){
  #m-case .cs{padding-top:76px}
  #m-case .cs-toc{top:0}
}
@media (max-width:767px){
  #m-case .cs-nav{position:absolute;top:8px;left:10px;z-index:5;display:flex;align-items:center;gap:2px}
  #m-case .cs-nav .modal__nav{width:44px;height:44px}
  #m-case .cpop__count{min-width:52px;font-size:11px}
  #m-case .cs{padding:0 16px}
  #m-case .cs--after{padding:56px 16px 48px}
  #m-case .cs-toc{margin:0 -16px;padding:6px 16px 0}
  #m-case .cs-toc__list{margin-right:-16px;padding-right:16px}
  #m-case .cs-toc__bar{margin:0 -16px}
  #m-case .cs-head{padding-top:22px}
  #m-case .cs-title{font-size:28px;line-height:31px}
  #m-case .cs-lead,#m-case .cs-p{font-size:15px;line-height:25px}
  #m-case .cs-hero{margin-top:20px;aspect-ratio:394 / 276}
  #m-case .cs-h1{font-size:25px;line-height:28px}
  #m-case .cs-h2{font-size:22px;line-height:26px}
  #m-case .cs-pop__t{font-size:24px;line-height:28px}
  #m-case .cs-sec{margin-top:44px;padding-top:36px}
  #m-case .cs-feats,#m-case .cs-cmp,#m-case .cs-rel{grid-template-columns:minmax(0,1fr)}
  #m-case .cs-feats{gap:26px}
  #m-case .cs-metrics{grid-template-columns:minmax(0,1fr);gap:22px}
  #m-case .cs-metric{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:14px}
  #m-case .cs-metric__v{font-size:52px;line-height:50px}
  #m-case .cs-metric__l{margin-top:0}
  #m-case .cs-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
  #m-case .cs-phone{grid-template-columns:minmax(0,1fr);gap:24px;justify-items:center}
  #m-case .cs-phone__dev{width:250px}
  #m-case .cs-phone__scr{height:500px}
  #m-case .cs-phone__txt{justify-self:stretch}
  #m-case .cs-slider__track{margin-right:-16px;padding-right:16px;gap:14px}
  #m-case .cs-phones{grid-template-columns:repeat(3,76%);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  #m-case .cs-phones::-webkit-scrollbar{display:none}
  #m-case .cs-ph{scroll-snap-align:start}

  #m-case .cs-slider__btns{display:none}
  #m-case .cs-slide{flex-basis:86%}
  #m-case .cs-cmp__col{padding:22px 20px 24px}
  #m-case .cs-cta{flex-direction:column;align-items:stretch;gap:22px;padding:24px 22px;border-radius:28px}
  #m-case .cs-cta__t{font-size:26px;line-height:30px}
  #m-case .cs-cta__btn{justify-content:center;height:56px}
  #m-case .cs-rel__h{margin-top:56px}
  #m-case .cs-rel{gap:28px}
}
@media (prefers-reduced-motion:reduce){
  #m-case .cs-pop__i{opacity:1;translate:none;transition:none}
}