/* #2699 — кейсы .com в стиле кейсов yusmpgroup.ru (assets/case.css .ru, тёмная тема).
   Подключается только к страницам с main.case-detail.cru (скрипт projects/com-cases-ru-2699/apply.py).
   Экраны «Как это работает»: окно браузера со светлой шапкой на мягкой сцене, медиа 1.5fr / текст 1fr, как на .ru. */
main.cru{--cru-ink:#e8ecf6;--cru-soft:#a3accb;--cru-line:#212a3d;--cru-card:#0f1420;--cru-bg2:#0b0f1a;--cru-blue:#6e90ff;--cru-tint:rgba(110,144,255,.14)}

/* заголовки секций — как .sec-head h2 на .ru */
main.cru .case-detail__section .section__title{font-size:clamp(28px,3.6vw,44px);font-weight:600;letter-spacing:-.01em;line-height:1.15}
main.cru .case-detail__section .section__lead{color:var(--cru-soft);font-size:17px}

/* мета под шапкой — карточка на 4 колонки (.case-meta .ru) */
main.cru .cru-meta{display:grid;grid-template-columns:repeat(4,1fr);margin:40px 0 0;padding:0;gap:0;border:1px solid var(--cru-line);border-radius:18px;overflow:hidden;background:var(--cru-card)}
main.cru .cru-meta.cru-meta--3{grid-template-columns:repeat(3,1fr)}
main.cru .cru-meta.cru-meta--2{grid-template-columns:repeat(2,1fr)}
main.cru .cru-meta>div{padding:22px 24px;border-right:1px solid var(--cru-line);min-width:0;display:block}
main.cru .cru-meta>div:last-child{border-right:0}
main.cru .cru-meta .case-detail__hero-meta-label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--cru-blue);margin:0 0 8px}
main.cru .cru-meta .case-detail__hero-meta-value{display:block;font-size:16px;font-weight:600;color:var(--cru-ink);line-height:1.35;overflow-wrap:break-word}
@media (max-width:820px){
  main.cru .cru-meta,main.cru .cru-meta.cru-meta--3{grid-template-columns:1fr 1fr}
  main.cru .cru-meta>div:nth-child(2n){border-right:0}
  main.cru .cru-meta>div:nth-child(-n+2){border-bottom:1px solid var(--cru-line)}
  main.cru .cru-meta.cru-meta--2>div{border-bottom:0}
}
@media (max-width:480px){
  main.cru .cru-meta,main.cru .cru-meta.cru-meta--3,main.cru .cru-meta.cru-meta--2{grid-template-columns:1fr}
  main.cru .cru-meta>div{border-right:0;border-bottom:1px solid var(--cru-line)}
  main.cru .cru-meta>div:last-child{border-bottom:0}
}

/* чипы особенностей — .case-highlights span .ru */
main.cru .case-highlights .case-highlight,main.cru .case-highlights>span{font-size:14px;font-weight:600;color:#a8bcff;background:var(--cru-tint);border:1px solid rgba(63,107,255,.30);border-radius:999px;padding:9px 15px;line-height:1.2}

/* «Как это работает»: все экраны одной секцией */
main.cru .cru-how__list{margin-top:40px}
main.cru .cru-how .case-feature + .case-feature{margin-top:64px}
main.cru .case-feature{display:grid !important;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr) !important;gap:56px !important;align-items:center}
main.cru .case-feature.case-feature--reverse{grid-template-columns:minmax(280px,1fr) minmax(0,1.5fr) !important}
main.cru .case-feature>.case-feature__media{order:0 !important}
main.cru .case-feature.case-feature--reverse>.case-feature__media{order:2 !important}
main.cru .case-feature>*{min-width:0}
main.cru .case-feature .case-feature__media.cfm-web,
main.cru .case-feature .case-feature__media.cfm-panel{
  display:flex !important;justify-content:center;align-items:center;
  padding:34px 20px !important;border-radius:26px !important;
  background:linear-gradient(160deg,var(--cru-tint),var(--cru-bg2)) !important;
  border:1px solid var(--cru-line) !important;box-shadow:none !important;aspect-ratio:auto !important;height:auto !important}
main.cru .case-feature .cfm-win{width:100%;border:1px solid var(--cru-line);border-radius:14px;overflow:hidden;background:var(--cru-card);
  box-shadow:0 30px 60px -34px rgba(11,16,32,.5);transition:transform .35s cubic-bezier(.16,1,.3,1)}
main.cru .case-feature .cfm-win::before{content:"";display:block;height:34px;border-bottom:1px solid var(--cru-line);
  background-color:#eef1f7;
  background-image:radial-gradient(circle at 6px 6px,#ff5f57 4px,transparent 4.5px),radial-gradient(circle at 24px 6px,#febc2e 4px,transparent 4.5px),radial-gradient(circle at 42px 6px,#28c840 4px,transparent 4.5px);
  background-position:10px 11px,10px 11px,10px 11px;background-repeat:no-repeat;background-size:auto}
main.cru .case-feature .case-feature__media img{display:block !important;width:100% !important;max-width:100% !important;height:auto !important;
  max-height:none !important;object-fit:contain !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;transform:none !important;background:#fff}
main.cru .case-feature:hover .cfm-win{transform:translateY(-6px)}
/* портретные экраны мобильных приложений — телефонный корпус, как .cf-media--phone .ru */
main.cru .case-feature.cru-phone{grid-template-columns:minmax(280px,360px) minmax(0,1fr) !important}
main.cru .case-feature.cru-phone.case-feature--reverse{grid-template-columns:minmax(0,1fr) minmax(280px,360px) !important}
main.cru .case-feature.cru-phone .cfm-win{max-width:288px;border:8px solid #0b1020;border-radius:40px;background:#0b1020}
main.cru .case-feature.cru-phone .cfm-win::before{display:none}
main.cru .case-feature.cru-phone .case-feature__media img{border-radius:32px !important}
main.cru .case-feature__title{font-size:clamp(23px,2.4vw,30px) !important;font-weight:600 !important;line-height:1.2;margin:0 0 16px}
main.cru .case-feature__text p{color:var(--cru-soft);font-size:16.5px;line-height:1.68;max-width:62ch}
main.cru .case-feature__text p+p{margin-top:14px}
@media (max-width:820px){
  main.cru .case-feature,main.cru .case-feature.case-feature--reverse,
  main.cru .case-feature.cru-phone,main.cru .case-feature.cru-phone.case-feature--reverse{grid-template-columns:1fr !important;gap:26px !important}
  main.cru .case-feature.case-feature--reverse>.case-feature__media{order:0 !important}
  main.cru .case-feature .case-feature__media.cfm-web,main.cru .case-feature .case-feature__media.cfm-panel{padding:26px 16px !important}
}
@media (prefers-reduced-motion:reduce){main.cru .case-feature .cfm-win{transition:none}main.cru .case-feature:hover .cfm-win{transform:none}}

/* цифры — .metric-strip .ru */
main.cru .cru-metrics .card{background:var(--cru-card);border:1px solid var(--cru-line);border-radius:18px;padding:28px 26px;transition:transform .3s,border-color .3s,box-shadow .3s}
main.cru .cru-metrics .card:hover{transform:translateY(-4px);border-color:var(--cru-blue);box-shadow:0 22px 44px -26px rgba(46,92,242,.36)}
/* #2700: экран без английского скриншота — только текст, без пустой колонки */
main.cru .case-feature.cru-noimg{grid-template-columns:minmax(0,1fr) !important;max-width:820px}

/* #2717 Д1: блоки без экрана — сетка карточек (.fcard .ru), а не текст в половину ширины */
main.cru .cru-how__list>:first-child{margin-top:0}
main.cru .cru-how__list>.cru-txt,main.cru .cru-how__list>.cru-txt+.case-feature{margin-top:64px}
main.cru .cru-txt{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
main.cru .cru-txt--3{grid-template-columns:repeat(3,minmax(0,1fr))}
main.cru .cru-txt--1{grid-template-columns:minmax(0,1fr)}
main.cru .cru-txt--2>.cru-tcard:last-child:nth-child(odd){grid-column:1/-1}
main.cru .cru-tcard{position:relative;min-width:0;background:var(--cru-card);border:1px solid var(--cru-line);border-radius:20px;padding:30px 30px 32px;
  transition:transform .25s,border-color .25s,box-shadow .25s}
main.cru .cru-tcard::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:var(--cru-blue);margin:0 0 20px}
main.cru .cru-tcard:hover{transform:translateY(-4px);border-color:var(--cru-blue);box-shadow:0 22px 44px -26px rgba(46,92,242,.36)}
main.cru .cru-tcard .case-feature__title{font-size:clamp(20px,1.8vw,24px) !important;margin:0 0 12px}
main.cru .cru-tcard .case-feature__text p{font-size:15.5px;line-height:1.62;max-width:none}
main.cru .cru-tcard .case-feature__text p+p{margin-top:12px}
main.cru .cru-txt--1 .cru-tcard .case-feature__text{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
main.cru .cru-txt--1 .cru-tcard .case-feature__text p+p{margin-top:0}
@media (max-width:1100px){main.cru .cru-txt--3{grid-template-columns:repeat(2,minmax(0,1fr))}main.cru .cru-txt--3>.cru-tcard:last-child{grid-column:1/-1}}
@media (max-width:820px){
  main.cru .cru-how__list>.cru-txt,main.cru .cru-how__list>.cru-txt+.case-feature{margin-top:40px}
  main.cru .cru-txt,main.cru .cru-txt--3,main.cru .cru-txt--1 .cru-tcard .case-feature__text{grid-template-columns:minmax(0,1fr)}
  main.cru .cru-txt--1 .cru-tcard .case-feature__text p+p{margin-top:12px}
  main.cru .cru-txt>.cru-tcard{grid-column:auto !important}
  main.cru .cru-tcard{padding:24px 22px 26px}
}
@media (prefers-reduced-motion:reduce){main.cru .cru-tcard{transition:none}main.cru .cru-tcard:hover{transform:none}}
/* #2717: свечение ::after (520px) карточек «Related services» выпирало за экран на 375/768 (скрытый выступ 73px) */
main.cru .card--service{overflow:clip;overflow-clip-margin:2px}