/* ==========================================================================
   Страница-кейс Kassir.ru
   Подключается ПОСЛЕ styles.css — переиспользует переменные, шрифты,
   .site-shell, .site-header, .brand, .contact-nav, .button, .final-cta*
   ========================================================================== */

:root {
  --case-accent: #ffc300;
  --case-divider-line: linear-gradient(
    90deg,
    rgba(63, 44, 17, 0) 0%,
    #5b5518 17%,
    #aeaa8d 34%,
    #ffffff 50.481%,
    #aeaa8d 67%,
    #5b5518 84%,
    rgba(63, 44, 17, 0) 100%
  );
  /* Уточнено попиксельно по рендеру Figma: реальный градиент не белый→акцент,
     а светло-тёплый кремовый → насыщенный тёплый золотой (без чистого белого
     и без предельно тёмного акцента) — иначе на сайте цвет был еле заметен. */
  --case-gold-text: linear-gradient(175deg, #fee9b8 0%, #ffc84d 100%);
}

.case-page .site-shell {
  overflow-x: hidden;
}

/* ---------- Шапка ---------- */
.case-header {
  background: transparent;
  border-radius: 0;
}

.case-header .header-bg {
  display: none;
}

.case-header__left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.back-button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  padding: 12px;
  border: 1px solid var(--green-stroke, #448b3b);
  border-radius: 24px;
  color: #ffffff;
  background: rgba(13, 13, 13, 0.35);
  transition: border-color 180ms ease, background 180ms ease;
}

.back-button svg {
  width: 24px;
  height: 24px;
}

.back-button:hover {
  border-color: #ffffff;
  background: rgba(13, 13, 13, 0.6);
}

/* показать контакты и на этой странице всегда (десктоп-диапазон) */
.case-header .contact-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #e4e4e4;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
}

.case-header .nav-divider {
  width: 1px;
  height: 20px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.5);
}

/* ---------- Общий контейнер секций ---------- */
.case-page section,
.case-page .case-divider {
  position: relative;
  width: 100%;
}

/* ---------- Герой ----------
   Точное повторение фрейма 599:1896: внешний отступ 100px сверху и 60px
   по бокам, внутренний баннер 599:1897 со скруглением 40px и overflow.
   Фон-матрица (image 1747) заменён на анимированный WebGL-терминал
   (data-faulty-terminal, тот же код, что в hero главной) с жёлтым тинтом
   #FFC301. Ни у одного из фреймов нет собственной заливки — терминал
   сам рисует тёмный фон, телефоны идут прозрачным слоем поверх. */
.case-hero {
  position: relative;
  aspect-ratio: 1440 / 558;
  /* отступы в % от ширины — точно как в макете (100/1440, 60/1440),
     масштабируются пропорционально во всём диапазоне 1280–1920 */
  padding: 6.944% 4.167% 0;
}

.case-hero__banner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 40px;
}

.case-hero__terminal {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.case-hero__terminal canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.case-hero__fade {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

/* края затемняются на ~100px (100/1320 ≈ 7.58% по ширине, 100/458 ≈ 21.8% по высоте) */
.case-hero__fade--left {
  top: 0;
  bottom: 0;
  left: 0;
  width: 7.58%;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(13, 13, 13, 0) 100%);
}

.case-hero__fade--right {
  top: 0;
  bottom: 0;
  right: 0;
  width: 7.58%;
  background: linear-gradient(270deg, var(--bg) 0%, rgba(13, 13, 13, 0) 100%);
}

.case-hero__fade--top {
  top: 0;
  left: 0;
  right: 0;
  height: 21.8%;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(13, 13, 13, 0) 100%);
}

.case-hero__fade--bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 21.8%;
  background: linear-gradient(0deg, var(--bg) 0%, rgba(13, 13, 13, 0) 100%);
}

/* телефоны: 900/1320 ≈ 68.18% ширины баннера, по центру со сдвигом −20px, прижаты к низу */
.case-hero__phones {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0;
  width: 68.18%;
  height: auto;
  transform: translateX(calc(-50% - 20px));
}

/* ---------- Ряд чипов после hero (686:1839) ---------- */
.case-chips {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px clamp(24px, 5.56vw, 80px);
}

.case-chips__row,
.case-chips__award {
  display: flex;
  width: min(843px, 100%);
}

.case-chips__row {
  gap: 12px;
}

.case-chips__row span,
.case-chips__award span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 20px;
  white-space: nowrap;
  /* градиентная обводка (жёлтый диагональный градиент, как у кнопок карусели) */
  background:
    linear-gradient(#0d0d0d, #0d0d0d) padding-box,
    linear-gradient(135deg, #ffedb6 0%, #ffd54d 50%, #fdc61f 100%) border-box;
}

.case-chips__row span {
  color: #ffffff;
  font-size: 16px;
  line-height: 20px;
}

.case-chips__award span {
  color: var(--text-muted, #bcbcbc);
  font-size: 16px;
  line-height: 20px;
}

/* Уточнение в кавычках — просто продолжение текста внутри одной пилюли,
   а не вложенная пилюля. Сбрасываем стили чипа, которые иначе наследуются
   от `.case-chips__award span` (селектор ловит и вложенный span тоже).
   На мобилке этот span полностью скрывается (см. медиа-запрос ниже). */
.case-chips__award .case-chips__award-detail {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* ---------- Контекст / Проблема / Цель ---------- */
.case-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 clamp(24px, 5.56vw, 80px);
}

.case-intro__block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(843px, 100%);
  padding: 20px 0;
}

.case-intro__block:first-child {
  padding-top: 80px;
}

.case-intro__block:last-child {
  padding-bottom: 40px;
}

.case-intro h2 {
  margin: 0;
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  color: #ffffff;
}

.case-intro p {
  margin: 0;
  font-weight: 300;
  font-size: 20px;
  line-height: 24px;
  color: var(--text-muted, #999999);
}

.case-intro p b {
  font-weight: 300;
  color: #ffffff;
}

.case-goal {
  font-size: 32px !important;
  line-height: 40px !important;
  color: transparent !important;
  background-image: var(--case-gold-text);
  background-clip: text;
  -webkit-background-clip: text;
}

/* ---------- Разделитель с подписью ---------- */
.case-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px clamp(40px, 4.44vw, 64px);
}

.case-divider::before {
  content: "";
  position: absolute;
  left: clamp(40px, 4.44vw, 64px);
  right: clamp(40px, 4.44vw, 64px);
  height: 1px;
  background: var(--case-divider-line);
}

.case-divider span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--bg, #0d0d0d);
  color: var(--text-muted, #999999);
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  white-space: nowrap;
}

.case-divider span::before,
.case-divider span::after {
  content: "";
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: url("assets/arrow-down.svg") center / 21.67px 25px no-repeat;
  opacity: 0.6;
}

/* ---------- Три колонки (Проблема / Исследования / Действие) ---------- */
.case-cols {
  display: flex;
  gap: 28px;
  padding: 20px clamp(24px, 5.56vw, 80px);
}

.case-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-col h3 {
  margin: 0;
  font-weight: 300;
  font-size: 24px;
  line-height: 28px;
  color: #ffffff;
}

.case-col p {
  margin: 0;
  font-weight: 300;
  font-size: 20px;
  line-height: 24px;
  color: var(--text-muted, #999999);
}

/* ---------- Экраны (карусель) ---------- */
.case-screens {
  padding-top: 40px;
}

.case-screens__head {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 4px clamp(24px, 5.56vw, 80px);
}

.case-screens__head h3 {
  margin: 0;
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  color: #ffffff;
}

.carousel-nav {
  display: flex;
  gap: 8px;
}

.carousel-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 24px;
  color: #ffffff;
  cursor: pointer;
  /* градиентная обводка (жёлтый диагональный градиент), заливка под цвет фона */
  background:
    linear-gradient(#0d0d0d, #0d0d0d) padding-box,
    linear-gradient(135deg, #ffedb6 0%, #ffd54d 50%, #fdc61f 100%) border-box;
  transition: background 320ms ease;
}

.carousel-btn svg {
  width: 24px;
  height: 24px;
}

/* при наведении обводка переходит в белую (как кнопка «назад» в хедере) */
.carousel-btn:hover {
  background:
    linear-gradient(#0d0d0d, #0d0d0d) padding-box,
    linear-gradient(135deg, #ffffff 0%, #ffffff 100%) border-box;
}

.case-screens__track {
  display: flex;
  gap: 20px;
  padding: 16px clamp(24px, 5vw, 72px);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.case-screens__track::-webkit-scrollbar {
  display: none;
}

.case-screens__track img {
  flex: 0 0 auto;
  width: 242px;
  height: 524px;
  object-fit: cover;
  border-radius: 16px;
}

/* ---------- Результаты ---------- */
.case-results {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 60px clamp(24px, 5.56vw, 80px) 80px;
}

.case-results h2 {
  margin: 0;
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  color: #ffffff;
}

.case-results__row {
  display: flex;
  gap: 28px;
}

.case-metric {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-metric__value {
  margin: 0;
  font-weight: 300;
  font-size: 24px;
  line-height: 28px;
  color: transparent;
  background-image: var(--case-gold-text);
  background-clip: text;
  -webkit-background-clip: text;
}

.case-metric__desc {
  margin: 0;
  font-weight: 300;
  font-size: 20px;
  line-height: 24px;
  color: var(--text-muted, #999999);
}

/* ---------- Другие кейсы: обводка чипсов — тот же градиент, что и
   внутри самого кейса, на который ведёт карточка (жёлтый/синий/красный) ---------- */
.other-card .chips span {
  border: 1px solid transparent;
}

.other-card--kassir .chips span {
  background:
    linear-gradient(#0d0d0d, #0d0d0d) padding-box,
    linear-gradient(135deg, #ffedb6 0%, #ffd54d 50%, #fdc61f 100%) border-box;
}

.other-card--vanta .chips span {
  background:
    linear-gradient(#0d0d0d, #0d0d0d) padding-box,
    linear-gradient(135deg, #bbe3ff 0%, #35acfe 100%) border-box;
}

.other-card--intermark .chips span {
  background:
    linear-gradient(#0d0d0d, #0d0d0d) padding-box,
    linear-gradient(135deg, #581716 0%, #d22a25 100%) border-box;
}

/* ---------- Другие кейсы ---------- */
.other-cases {
  display: flex;
  gap: 40px;
  padding: 32px clamp(40px, 4.44vw, 64px) 64px;
  background: var(--bg, #0d0d0d);
}

.other-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.other-card__media {
  width: 100%;
  aspect-ratio: 651 / 278;
  overflow: hidden;
  border-radius: 40px;
}

.other-card__media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 320ms ease;
}

.other-card:hover .other-card__media img {
  transform: scale(1.02);
}

.other-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 20px;
}

.other-card__body h3 {
  margin: 0;
  font-weight: 300;
  font-size: 24px;
  line-height: 28px;
  color: #ffffff;
}

.other-card__body p {
  margin: 0;
  font-weight: 300;
  font-size: 20px;
  line-height: 24px;
  color: var(--text-muted, #999999);
}

/* ---------- Финальный блок (жёлтая тема) ---------- */
.case-final {
  height: 635px;
}

.case-final .final-cta__content {
  top: calc(50% - 82px);
}

/* Ниже 1280px .final-cta__content переходит в колонку (правило из
   styles.css) — тогда контент (фото 309 + gap 32 + copy 306 = 647px)
   становится выше самой секции (635px) и верх фото обрезается
   overflow:hidden. Увеличиваем секцию под колоночную раскладку и
   убираем сдвиг «-82px» (он подобран под короткий ряд-контент
   десктопа) — при равной высоте секции и контента обычное 50%-
   центрирование укладывает контент ровно в границы без обрезки.
   На десктоп (≥1280px, раскладка в ряд) это не влияет. */
@media (max-width: 1279px) {
  .case-final {
    height: 647px;
  }

  .case-final .final-cta__content {
    top: 50%;
  }
}

.case-final .final-cta__copy {
  padding: 60px 0;
}

.case-final .final-cta__text h2 {
  font-size: 48px;
  line-height: 1;
  background-image: linear-gradient(133deg, #fff0d0 0%, #ffcf5c 100%);
}

.case-final__photo {
  border: 1px solid transparent;
  background:
    linear-gradient(#0d0d0d, #0d0d0d) padding-box,
    linear-gradient(180deg, #ffffff 0%, #fdc61f 100%) border-box;
}

/* Точные отступы фото по Figma: у Kassir (753:12826) и Ванты (752:12822)
   картинка 246×362 смещена на left:-19px, top:9px внутри карточки 210×309 —
   этот файл общий для всех трёх страниц, поэтому здесь стоят значения для
   большинства (Kassir/Ванта); у Интермарка (752:12821 / 766:1696) сдвиг
   на 1px отличается (-18px/10px) — переопределено в intermark-case.css. */
.case-final__photo img {
  position: absolute;
  top: 9px;
  left: -19px;
  width: 246px;
  height: 362px;
  max-width: none;
  object-fit: cover;
}

.case-final .final-cta__button {
  border: 1px solid transparent;
  /* градиентная обводка (диагональный светло-золотой градиент), заливка под цвет фона */
  background:
    linear-gradient(#0d0d0d, #0d0d0d) padding-box,
    linear-gradient(135deg, #fbecb7 0%, #fcde7a 100%) border-box;
}

.case-final .final-cta__button:hover {
  background:
    linear-gradient(#0d0d0d, #0d0d0d) padding-box,
    linear-gradient(135deg, #ffffff 0%, #ffffff 100%) border-box;
}

/* ---------- Адаптивность ---------- */
@media (min-width: 1280px) {
  .case-header {
    height: 128px;
    padding: 20px 72px 0;
    align-items: flex-start;
  }
}

@media (max-width: 1279px) {
  .case-header {
    height: 104px;
    padding: 24px 16px 32px;
  }

  .case-header .contact-nav {
    display: none;
  }
}

/* ==========================================================================
   МОБИЛЬНАЯ ВЕРСИЯ (360–1279) — ОБЩАЯ для всех трёх кейсов.
   .site-shell (styles.css) расширяется до 768px и дальше держится
   ФИКСИРОВАННЫМ на 768px вплоть до 1280px (та же логика, что у десктопа:
   расширяется до 1920px и держится фиксированным дальше). Поэтому мобильная
   вёрстка должна оставаться активной весь этот диапазон 360–1279, а не
   отключаться на 768px — иначе с 769 до 1279 контейнер уже фиксирован на
   768px, но контент внутри переключается на десктопные ряды/колонки и не
   помещается (бургер и правила ниже пропадали, а .contact-nav скрыт до 1280
   отдельным правилом — получался «мёртвый» диапазон без навигации вовсе).
   Файл подключается на всех страницах-кейсах, поэтому здесь лежат правила,
   одинаковые для Kassir / Ванта / Интермарк, ПЛЮС значения по умолчанию для
   «телефонного» героя и горизонтальной ленты экранов (так работают Kassir и
   Ванта — большинство). Интермарк переопределяет герой (ноутбук) и экраны
   (широкие скрины стопкой) в intermark-case.css, который грузится позже.
   ========================================================================== */

/* --- Нейтральные правила (все ширины) --- */
.case-feature {
  display: contents;
}

/* Кнопка-заголовок колонки на десктопе выглядит как обычный <h3>
   и не реагирует на клики (аккордеон только в мобильной версии) */
.case-col__header {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  pointer-events: none;
}

.case-col__chevron {
  display: none;
}

@media (max-width: 1279px) {
  /* -------------------- Шапка: логотип + бургер -------------------- */
  .case-header {
    height: 128px;
    padding: 24px 16px 56px 20px;
    align-items: flex-start;
  }

  .case-header__left .back-button {
    display: none;
  }

  /* -------------------- Герой (общая рамка) -------------------- */
  .case-hero {
    aspect-ratio: auto;
    padding: 100px 0 0;
  }

  .case-hero__banner {
    aspect-ratio: 360 / 458;
    height: auto;
  }

  /* Значения по умолчанию (Kassir / Ванта): терминал остаётся на весь
     баннер, все 4 градиента по краям крупнее (по 100px в макете), а вместо
     трёх телефонов показываем только центральный — тот же hero-phones.png,
     обрезанный object-fit-ом к центру (778:1666 в Figma). */
  .case-hero__fade--left,
  .case-hero__fade--right {
    width: 27.78%;
  }

  .case-hero__fade--top,
  .case-hero__fade--bottom {
    height: 21.83%;
  }

  .case-hero__phones {
    left: 50%;
    bottom: 0;
    width: 61.94%;
    aspect-ratio: 223 / 273;
    height: auto;
    object-fit: cover;
    object-position: center;
    transform: translateX(-50%);
  }

  /* -------------------- Чипы -------------------- */
  .case-chips {
    padding: 20px 16px;
  }

  .case-chips__row,
  .case-chips__award {
    justify-content: center;
  }

  .case-chips__award span {
    white-space: normal;
    text-align: center;
  }

  /* На мобилке уточнение в кавычках убираем (только у Интермарка есть
     такой span; на других страницах правило просто не находит цель). */
  .case-chips__award .case-chips__award-detail {
    display: none;
  }

  /* -------------------- Контекст / Проблема / Цель -------------------- */
  .case-intro {
    padding: 0 16px;
  }

  .case-intro__block {
    gap: 4px;
    padding: 20px 0;
  }

  .case-intro__block:first-child {
    padding-top: 40px;
  }

  .case-intro__block:last-child {
    padding-bottom: 40px;
  }

  .case-intro h2 {
    font-size: 24px;
    line-height: 28px;
  }

  .case-intro p {
    font-size: 16px;
    line-height: 20px;
  }

  .case-goal {
    font-size: 24px !important;
    line-height: 28px !important;
  }

  /* Якорь «Другие кейсы» из бургер-меню — отступ под фиксированную шапку */
  #other-cases {
    scroll-margin-top: 96px;
  }

  /* -------------------- Разделители секций/фич -------------------- */
  .case-divider {
    padding: 18px 16px;
  }

  .case-divider::before {
    left: 16px;
    right: 16px;
  }

  .case-divider span {
    gap: 8px;
    font-size: 24px;
    line-height: 28px;
  }

  .case-divider span::before,
  .case-divider span::after {
    width: 28px;
    height: 28px;
    background-size: 15px 18px;
  }

  /* -------------------- Порядок внутри фичи: разделитель → экраны → дропдауны -------------------- */
  .case-feature {
    display: flex;
    flex-direction: column;
  }

  .case-feature .case-divider {
    order: 0;
  }

  .case-feature .case-screens {
    order: 1;
  }

  .case-feature .case-cols {
    order: 2;
  }

  /* -------------------- Экраны (общее): без кнопок, заголовок 24/28 -------------------- */
  .case-screens .carousel-nav {
    display: none;
  }

  .case-screens__head h3 {
    font-size: 24px;
    line-height: 28px;
  }

  /* Экраны по умолчанию (Kassir / Ванта): горизонтальная лента телефонов
     242×524 (как на десктопе, свайпом), заголовок с отступом 24/12. */
  .case-screens {
    padding-top: 0;
    padding-bottom: 40px;
  }

  .case-screens__head {
    padding: 24px 16px 12px;
  }

  .case-screens__track {
    padding: 4px 12px;
  }

  /* -------------------- Колонки → аккордеон-дропдауны -------------------- */
  .case-cols {
    flex-direction: column;
    gap: 0;
    padding: 8px 16px;
  }

  .case-col {
    gap: 0;
    padding: 0;
    border-top: 1px solid #3d3d3d;
  }

  .case-col:first-child {
    border-top: 0;
  }

  .case-col__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 18px 0;
    cursor: pointer;
    pointer-events: auto;
    transition: padding-bottom 280ms ease;
  }

  /* В закрытом виде отступ снизу симметричен верхнему (18px). В открытом —
     эти 18px даёт padding-bottom параграфа, а здесь оставляем только зазор
     между заголовком и текстом (4px, как между h2 и p в .case-intro__block). */
  .case-col.is-open .case-col__header {
    padding-bottom: 4px;
  }

  .case-col__header h3 {
    font-size: 20px;
    line-height: 24px;
  }

  .case-col__chevron {
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #ffffff;
    transition: transform 220ms ease;
  }

  .case-col.is-open .case-col__chevron {
    transform: rotate(180deg);
  }

  .case-col__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 280ms ease;
  }

  .case-col.is-open .case-col__body {
    grid-template-rows: 1fr;
  }

  .case-col__body p {
    overflow: hidden;
    min-height: 0;
    font-size: 16px;
    line-height: 20px;
  }

  .case-col.is-open .case-col__body p {
    padding-bottom: 18px;
  }

  /* -------------------- Результаты: метрики стопкой -------------------- */
  .case-results {
    gap: 16px;
    padding: 12px 16px 40px;
  }

  .case-results h2 {
    font-size: 24px;
    line-height: 28px;
  }

  .case-results__row {
    flex-direction: column;
    gap: 16px;
  }

  .case-metric--empty {
    display: none;
  }

  .case-metric {
    gap: 8px;
  }

  .case-metric__value {
    font-size: 20px;
    line-height: 24px;
  }

  .case-metric__desc {
    font-size: 16px;
    line-height: 20px;
  }

  /* -------------------- Другие кейсы: карточки стопкой, без чипов -------------------- */
  .other-cases {
    flex-direction: column;
    gap: 8px;
    padding: 16px 16px 32px;
  }

  .other-card__media {
    border-radius: 24px;
  }

  .other-card .chips {
    display: none;
  }

  .other-card__body {
    gap: 8px;
    padding: 20px;
  }

  .other-card__body h3 {
    font-size: 20px;
    line-height: 24px;
  }

  .other-card__body p {
    font-size: 16px;
    line-height: 20px;
  }

  /* -------------------- Финальный блок --------------------
     Секция 16(pt) + 309(фото) + 16(gap) + 306(copy) = 647px — ровно под
     контент в колоночной раскладке (без вертикального центрирования). */
  .case-final {
    height: 647px;
  }

  .case-final .final-cta__content {
    top: 0;
    width: min(360px, 100vw);
    padding-top: 16px;
    gap: 16px;
    transform: translateX(-50%);
  }

  .case-final .final-cta__copy {
    width: 100%;
    padding: 12px 16px;
  }

  .case-final .final-cta__text h2 {
    font-size: 36px;
  }
}

/* ==========================================================================
   ЛАЙТБОКС ПРОСМОТРА ЭКРАНОВ (клик по картинке в карусели → полноэкранный
   просмотрщик с перелистыванием). Общий для всех трёх кейсов; сама галерея
   сквозная по всем кейсам (логика в kassir-case.js).
   ========================================================================== */
.case-screens__track img {
  cursor: zoom-in;
}

.screen-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(12px, 2vh, 24px);
  padding: clamp(16px, 3vh, 28px) clamp(16px, 4vw, 56px);
  background: rgba(8, 8, 8, 0.94);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  transition: opacity 220ms ease;
}

.screen-lightbox[hidden] {
  display: none;
}

.screen-lightbox.is-open {
  opacity: 1;
}

/* ---- Верхняя строка: название кейса + закрыть ---- */
.screen-lightbox__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.screen-lightbox__case {
  font-weight: 400;
  font-size: clamp(20px, 3vw, 32px);
  line-height: 1.1;
  color: #ffffff;
  letter-spacing: 0.01em;
}

.screen-lightbox__close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease;
}

.screen-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.16);
}

.screen-lightbox__close svg {
  width: 24px;
  height: 24px;
}

/* ---- Центр: стрелки + картинка ---- */
/* Стрелки — position:absolute поверх краёв сцены на ВСЕХ ширинах (не только
   мобильных): это убирает их из flex-потока, поэтому .screen-lightbox__frame
   остаётся единственным layout-элементом сцены. Место под сами кнопки при
   этом резервируем вручную через max-width рамки (calc ниже) — иначе у
   широких (альбомных) картинок рамка заезжает под стрелки. */
.screen-lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.screen-lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease;
}

.screen-lightbox__nav--prev {
  left: clamp(0px, 1vw, 16px);
}

.screen-lightbox__nav--next {
  right: clamp(0px, 1vw, 16px);
}

.screen-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.16);
}

.screen-lightbox__nav svg {
  width: 24px;
  height: 24px;
}

/* Рамка вокруг картинки: реальный размер экрана бывает то портретный
   (телефонные скрины Kassir/Ванты, ~0.46), то альбомный (веб-скрины
   Интермарка, ~1.78–1.80) — сцена же всегда широкая landscape-обёртка.
   Раньше border-radius стоял прямо на <img>, растянутой на весь бокс сцены
   (object-fit:contain): для портретных экранов видимая картинка оказывалась
   узкой колонкой по центру, а скруглялись пустые (невидимые) углы бокса —
   на самой картинке скругления не было видно.

   Пробовал чисто через CSS (aspect-ratio + max-width/max-height) — но когда
   max-width реально становился ограничивающим (широкие веб-скрины Интермарка,
   не помещающиеся по ширине), браузер обрезал width, а height не пересчитывал
   обратно под тот же aspect-ratio — рамка теряла пропорции и «скакала» по
   размеру. Поэтому размер рамки считаем явно в px через JS (классический
   ручной contain-fit: подгоняем то по высоте, то по ширине сцены, смотря что
   раньше упрётся в границу) — это не зависит от того, как конкретный браузер
   резолвит одновременно aspect-ratio и оба max-констрейнта. */
.screen-lightbox__frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

.screen-lightbox__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Нижняя строка: название задачи + счётчик ---- */
.screen-lightbox__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.screen-lightbox__task {
  font-weight: 300;
  font-size: clamp(16px, 2.4vw, 24px);
  line-height: 1.2;
  color: #e4e4e4;
}

.screen-lightbox__counter {
  flex-shrink: 0;
  font-weight: 300;
  font-size: clamp(16px, 2.4vw, 24px);
  line-height: 1.2;
  color: var(--text-muted, #999999);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  /* На мобилке кнопки чуть меньше и с более тёмной подложкой (лежат прямо
     на краю картинки почти без зазора, нужен контраст). */
  .screen-lightbox__nav {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.45);
  }

  .screen-lightbox__nav:hover {
    background: rgba(0, 0, 0, 0.6);
  }

  .screen-lightbox__nav--prev {
    left: 0;
  }

  .screen-lightbox__nav--next {
    right: 0;
  }

  .screen-lightbox__nav svg {
    width: 20px;
    height: 20px;
  }
}