/* =============================================================================
   demos.css — стили анимированных «Примеров работы» на лендинге чат224.рф.

   Воссоздаёт интерфейс приложения chat224.ru (НЕ запись реального app — всё
   вымышленное по построению, поэтому утечка данных невозможна). Цвета/радиусы
   взяты из apps/web/src/App.css (токены приложения), чтобы демо были узнаваемы.

   Движок (demos.js) монтирует «фейк-приложение» в .demo-stage и гоняет таймлайн
   с курсором и подписями. Здесь — только внешний вид.
   ============================================================================= */

.usecases-list {
  display: flex;
  flex-direction: column;
  gap: 72px;
}

/* ── Один сценарий: заголовок + сцена с двумя устройствами + подпись ── */
.usecase {
  scroll-margin-top: 90px;
}
.usecase-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.usecase-num {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--c-primary-softer);
  color: var(--c-primary);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 17px;
  align-self: center;
}
.usecase-title {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.usecase-sub {
  flex-basis: 100%;
  color: var(--c-text-muted);
  font-size: 15px;
  line-height: 1.5;
  margin-top: 2px;
}

/* ── Сцена: две панели рядом + общий слой курсора ── */
.demo-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 26px;
  background: linear-gradient(180deg, #f1f5f9 0%, #e6ebf2 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.demo-stage::before {
  /* лёгкая «точечная» подложка, как в hero */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1.5px 1.5px, rgba(15,23,42,0.05) 1.3px, transparent 1.3px);
  background-size: 26px 26px;
  pointer-events: none;
  z-index: 0;
}
.demo-stage > * { position: relative; z-index: 1; }

/* Палитра приложения (миррор apps/web/src/App.css, light theme) */
.fa {
  --d-accent: oklch(55% 0.13 265);
  --d-accent-fg: #ffffff;
  --d-bubble-me: oklch(94% 0.04 150);
  --d-bubble-me-ink: #1a1a1a;
  --d-bubble-peer: #ffffff;
  --d-bubble-peer-bd: #e6e5df;
  --d-task: oklch(93% 0.04 25);
  --d-task-bd: rgba(220, 90, 70, 0.32);
  --d-done: #6b7280;
  --d-done-ink: #e5e7eb;
  --d-bg: #fafaf8;
  --d-surface: #ffffff;
  --d-surface2: #f5f5f2;
  --d-ink: #141414;
  --d-ink2: #3d3d3a;
  --d-muted: #8a8a85;
  --d-line: #e6e5df;
  --d-line-soft: #efeee8;
  --d-amber-bg: #fef3c7;
  --d-amber-ink: #b45309;
  --d-blue-bg: #dbeafe;
  --d-blue-ink: #1d4ed8;
  --d-green-bg: #d1fae5;
  --d-green-ink: #047857;
  color: var(--d-ink);
  font-size: 13px;
  line-height: 1.4;
  position: relative;
}

/* ── Рамка телефона (краткий режим) ── */
.demo-phone {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  aspect-ratio: 300 / 600;
  background: #0f1115;
  border-radius: 34px;
  padding: 10px;
  box-shadow: 0 22px 44px -10px rgba(15,23,42,.34), inset 0 0 0 2px #23262e;
}
.demo-phone .fa-screen {
  width: 100%;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: var(--d-bg);
  display: flex;
  flex-direction: column;
  position: relative;
}
.demo-phone .fa-notch {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 16px;
  background: #0f1115;
  border-radius: 0 0 12px 12px;
  z-index: 6;
}

/* ── Рамка десктопа (полный режим) ── */
.demo-desktop {
  width: 100%;
  background: var(--d-surface);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 48px -12px rgba(15,23,42,.26);
  border: 1px solid #d4dae3;
}
.demo-titlebar {
  height: 34px;
  background: #e9edf2;
  border-bottom: 1px solid #d4dae3;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
}
.demo-titlebar i {
  width: 11px; height: 11px; border-radius: 50%;
  background: #c4ccd6; display: block;
}
.demo-titlebar i:nth-child(1) { background: #ff5f57; }
.demo-titlebar i:nth-child(2) { background: #febc2e; }
.demo-titlebar i:nth-child(3) { background: #28c840; }
.demo-titlebar .demo-url {
  margin-left: 10px;
  font-size: 11px;
  color: #64748b;
  background: #fff;
  border-radius: 6px;
  padding: 3px 12px;
}
.demo-desktop .fa-screen {
  height: 440px;
  background: var(--d-bg);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* ── Шапка приложения внутри экрана ── */
.fa-appbar {
  height: 40px;
  flex: 0 0 auto;
  background: var(--d-surface);
  border-bottom: 1px solid var(--d-line);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  font-weight: 700;
  color: var(--d-accent);
  font-size: 14px;
}
.fa-appbar .fa-appbar-icons { margin-left: auto; display: flex; gap: 12px; color: var(--d-muted); }
.fa-appbar .fa-appbar-icons svg { width: 17px; height: 17px; }

/* Полный режим: сайдбар + основная область */
.fa-full { flex: 1 1 auto; display: flex; min-height: 0; }
.fa-sidebar {
  flex: 0 0 230px;
  border-right: 1px solid var(--d-line);
  background: var(--d-surface);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.fa-main { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; background: var(--d-bg); }

/* Телефон: одна колонка */
.demo-phone .fa-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

/* ── Список чатов ── */
.fa-listhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; font-weight: 700; font-size: 13px;
  border-bottom: 1px solid var(--d-line-soft);
}
.fa-newchat {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--d-bubble-me); color: var(--d-bubble-me-ink);
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.16);
  font-size: 17px; font-weight: 500;
}
.fa-list { flex: 1 1 auto; overflow: hidden; }
.fa-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; cursor: default;
  border-bottom: 1px solid var(--d-line-soft);
  transition: background .15s;
}
.fa-row.is-active { background: var(--d-surface2); }
.fa-avatar {
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px; color: #fff;
}
.fa-avatar.a1 { background: #6366f1; }
.fa-avatar.a2 { background: #0ea5e9; }
.fa-avatar.a3 { background: #f59e0b; }
.fa-avatar.a4 { background: #ec4899; }
.fa-avatar.a5 { background: #14b8a6; }
.fa-row-mid { flex: 1 1 auto; min-width: 0; }
.fa-row-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-row-prev { color: var(--d-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-row-badge {
  flex: 0 0 auto;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--d-accent); color: #fff;
  font-size: 10.5px; font-weight: 700;
  display: none; align-items: center; justify-content: center;
}
.fa-row-badge.show { display: inline-flex; }
.fa-row-badge.call { background: #ef4444; }

/* ── Лента сообщений ── */
.fa-chathead {
  flex: 0 0 auto; height: 42px;
  display: flex; align-items: center; gap: 9px;
  padding: 0 13px; border-bottom: 1px solid var(--d-line);
  background: var(--d-surface);
}
.fa-chathead .fa-avatar { width: 28px; height: 28px; font-size: 11px; }
.fa-chathead .nm { font-weight: 650; font-size: 13px; }
.fa-chathead .fa-callbtn {
  margin-left: auto; color: var(--d-muted);
  display: grid; place-items: center;
}
.fa-chathead .fa-callbtn svg { width: 18px; height: 18px; }

.fa-feed {
  flex: 1 1 auto;
  overflow: hidden;
  padding: 14px 13px 8px;
  display: flex; flex-direction: column; gap: 9px;
}
.fa-msg {
  max-width: 78%;
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(7px);
  transition: opacity .3s ease, transform .3s ease;
}
.fa-msg.in { opacity: 1; transform: none; }
.fa-msg.me { align-self: flex-end; align-items: flex-end; }
.fa-msg.peer { align-self: flex-start; align-items: flex-start; }
.fa-bubble {
  padding: 8px 12px;
  font-size: 13px; line-height: 1.4;
  position: relative;
  word-break: break-word;
}
.fa-msg.me .fa-bubble {
  background: var(--d-bubble-me); color: var(--d-bubble-me-ink);
  border-radius: 14px 14px 4px 14px;
}
.fa-msg.peer .fa-bubble {
  background: var(--d-bubble-peer); color: var(--d-ink);
  border: 1px solid var(--d-bubble-peer-bd);
  border-radius: 14px 14px 14px 4px;
}
.fa-author { font-size: 11px; font-weight: 700; color: var(--d-accent); margin-bottom: 2px; }
.fa-meta { font-size: 10px; color: var(--d-muted); margin-top: 3px; display: flex; gap: 5px; }
.fa-meta .tick { color: var(--d-accent); }

/* реакция-лайк */
.fa-react {
  position: absolute; bottom: -11px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--d-surface); border: 1px solid var(--d-line);
  display: grid; place-items: center; font-size: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  opacity: 0; transform: scale(.4);
  transition: opacity .25s, transform .25s;
}
.fa-msg.me .fa-react { left: 8px; }
.fa-msg.peer .fa-react { right: 8px; }
.fa-react.show { opacity: 1; transform: scale(1); }

/* цитата-ответ внутри пузыря */
.fa-reply {
  border-left: 3px solid var(--d-accent);
  background: rgba(80, 90, 220, .08);
  border-radius: 0 4px 4px 0;
  padding: 3px 7px; margin-bottom: 4px;
  font-size: 11px;
}
.fa-reply .ra { color: var(--d-accent); font-weight: 700; display: block; }
.fa-reply .rt { color: var(--d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }

/* ── Композер ── */
.fa-compose {
  flex: 0 0 auto;
  margin: 8px 10px 10px;
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--d-line); border-radius: 14px;
  background: var(--d-surface); padding: 6px 8px;
  transition: border-color .15s;
}
.fa-compose.focus { border-color: var(--d-accent); }
.fa-input {
  flex: 1 1 auto; min-height: 20px;
  font-size: 13px; color: var(--d-ink);
  padding: 2px 4px; white-space: pre-wrap;
}
.fa-input:empty::before { content: attr(data-ph); color: var(--d-muted); }
.fa-input .caret {
  display: inline-block; width: 1.5px; height: 14px;
  background: var(--d-accent); vertical-align: -2px;
  animation: fa-blink 1s step-end infinite;
}
@keyframes fa-blink { 50% { opacity: 0; } }
.fa-send, .fa-mic {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
}
.fa-send { background: var(--d-accent); color: var(--d-accent-fg); }
.fa-send svg { width: 16px; height: 16px; }
.fa-mic { color: var(--d-muted); }
.fa-mic svg { width: 18px; height: 18px; }
.fa-hidden { display: none !important; }

/* ── Диалог «Новый чат» / контекст-меню / задача (оверлей в пределах экрана) ── */
.fa-overlay {
  position: absolute; inset: 0; z-index: 8;
  background: rgba(0,0,0,.42);
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.fa-overlay.show { opacity: 1; }
.fa-card {
  width: 100%; max-width: 270px;
  background: var(--d-surface); border-radius: 13px;
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
  overflow: hidden;
  transform: translateY(8px) scale(.98);
  transition: transform .22s ease;
}
.fa-overlay.show .fa-card { transform: none; }
.fa-card-head { padding: 11px 14px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--d-line-soft); }
.fa-contact {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 13px; transition: background .12s;
}
.fa-contact.hl { background: var(--d-surface2); }
.fa-contact .nm { font-weight: 600; font-size: 13px; }
.fa-contact .dp { font-size: 11px; color: var(--d-muted); }
.fa-card-foot { padding: 10px 13px; border-top: 1px solid var(--d-line-soft); display: flex; justify-content: flex-end; }
.fa-btn-primary {
  background: var(--d-accent); color: #fff;
  border-radius: 8px; padding: 7px 14px; font-size: 12.5px; font-weight: 600;
}

/* контекст-меню по правому клику */
.fa-ctx {
  position: absolute; z-index: 9;
  background: var(--d-surface); border-radius: 13px;
  box-shadow: 0 12px 40px rgba(0,0,0,.26);
  padding: 5px; min-width: 168px;
  opacity: 0; transform: scale(.94); transform-origin: top left;
  transition: opacity .16s, transform .16s; pointer-events: none;
}
.fa-ctx.show { opacity: 1; transform: none; }
.fa-ctx button {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 9px 12px; border-radius: 8px;
  font-size: 13px; color: var(--d-ink); text-align: left;
}
.fa-ctx button.hl { background: var(--d-surface2); }
.fa-ctx button svg { width: 15px; height: 15px; color: var(--d-muted); }

/* диалог создания задачи + чек-лист */
.fa-task-dialog .fa-card { max-width: 250px; }
.fa-field {
  margin: 9px 13px 0; padding: 7px 10px;
  border: 1px solid var(--d-line); border-radius: 8px;
  font-size: 12.5px; background: var(--d-surface);
}
.fa-field.label { color: var(--d-muted); font-size: 11px; border: 0; padding: 0; margin: 12px 13px 3px; font-weight: 600; }
.fa-cl-item {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 13px 0; font-size: 12.5px;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .25s, transform .25s;
}
.fa-cl-item.in { opacity: 1; transform: none; }
.fa-cl-box {
  flex: 0 0 auto; width: 15px; height: 15px; border-radius: 4px;
  border: 1.6px solid var(--d-muted); display: grid; place-items: center;
  transition: background .18s, border-color .18s;
}
.fa-cl-box svg { width: 11px; height: 11px; color: #fff; opacity: 0; transition: opacity .18s; }
.fa-cl-item.done .fa-cl-box { background: var(--d-green-ink); border-color: var(--d-green-ink); }
.fa-cl-item.done .fa-cl-box svg { opacity: 1; }
.fa-cl-item.done .fa-cl-text { color: var(--d-muted); text-decoration: line-through; }

/* «задачный» пузырь и его состояния */
.fa-msg.task .fa-bubble {
  background: var(--d-task);
  border: 1px solid var(--d-task-bd);
  border-radius: 12px;
}
.fa-msg.task.me .fa-bubble { border-radius: 12px; }
.fa-task-status {
  display: inline-block; margin-top: 5px;
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
}
.st-open { background: var(--d-blue-bg); color: var(--d-blue-ink); }
.st-progress { background: var(--d-amber-bg); color: var(--d-amber-ink); }
.st-done { background: #f3f4f6; color: var(--d-done); }
.fa-task-cl { font-size: 10.5px; color: var(--d-muted); margin-top: 4px; }
.fa-task-cl b { color: var(--d-green-ink); }

/* завершённая задача — серый пузырь */
.fa-msg.task.completed .fa-bubble {
  background: var(--d-done) !important;
  border-color: #4b5563 !important;
  color: var(--d-done-ink) !important;
}
.fa-msg.task.completed .fa-task-cl,
.fa-msg.task.completed .fa-meta { color: #cbd5e1 !important; }
.fa-msg.task.completed .fa-task-cl b { color: #d1fae5 !important; }

/* ── Курсор-указатель + клик-рябь ── */
.demo-cursor {
  position: absolute; top: 0; left: 0; z-index: 20;
  width: 22px; height: 22px;
  margin: -2px 0 0 -2px;
  pointer-events: none;
  opacity: 0;
  transition: transform .72s cubic-bezier(.5,.05,.2,1), opacity .3s;
  will-change: transform;
}
.demo-cursor.on { opacity: 1; }
.demo-cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); display: block; }
.demo-cursor::after {
  content: ""; position: absolute; left: 1px; top: 1px;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(5,150,105,.45);
  transform: scale(0); opacity: 0;
}
.demo-cursor.click::after { animation: fa-ripple .42s ease-out; }
@keyframes fa-ripple {
  0% { transform: scale(0); opacity: .9; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ── Подпись-пояснение под сценой ── */
.demo-caption {
  margin-top: 18px;
  display: flex; align-items: flex-start; gap: 12px;
  min-height: 48px;
}
.demo-caption .dc-dot {
  flex: 0 0 auto; margin-top: 4px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-primary); box-shadow: 0 0 0 4px var(--c-primary-soft);
}
.demo-caption .dc-text {
  font-size: 16px; color: var(--c-text); line-height: 1.45;
  font-weight: 500;
  transition: opacity .2s ease;
}
.demo-caption .dc-text.fade { opacity: 0; }
.demo-progress { display: flex; gap: 6px; margin-top: 14px; }
.demo-progress i {
  height: 4px; flex: 1 1 auto; border-radius: 2px;
  background: var(--c-border); overflow: hidden; position: relative;
}
.demo-progress i.done { background: var(--c-primary-soft); }
.demo-progress i.active::after {
  content: ""; position: absolute; inset: 0;
  background: var(--c-primary); transform-origin: left;
  animation: dc-fill linear forwards;
}
@keyframes dc-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Аудиозвонок ── */
.fa-call {
  position: absolute; inset: 0; z-index: 7;
  background: linear-gradient(180deg, #1f2430, #11141b);
  color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.fa-call.show { opacity: 1; }
.fa-call .fa-avatar { width: 72px; height: 72px; font-size: 26px; }
.fa-call .cl-name { font-size: 17px; font-weight: 650; }
.fa-call .cl-state { font-size: 13px; color: #b6bdca; }
.fa-call .cl-ring { position: relative; }
.fa-call .cl-ring::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  animation: cl-pulse 1.6s ease-out infinite;
}
.fa-call.connected .cl-ring::after { animation: none; border-color: transparent; }
@keyframes cl-pulse { 0% { transform: scale(.92); opacity: .8; } 100% { transform: scale(1.25); opacity: 0; } }
.fa-call-actions { display: flex; gap: 26px; margin-top: 14px; }
.fa-call-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.fa-call-btn svg { width: 22px; height: 22px; }
.fa-call-btn.accept { background: #22c55e; }
.fa-call-btn.decline, .fa-call-btn.hangup { background: #ef4444; }
.fa-call-btn.mute { background: rgba(255,255,255,.16); width: 42px; height: 42px; }
.fa-call .cl-timer { font-variant-numeric: tabular-nums; font-size: 13px; color: #d7dbe3; }

/* ── Голосовое сообщение + расшифровка ── */
.fa-voice {
  display: flex; align-items: center; gap: 8px;
  min-width: 150px;
}
.fa-voice .vplay {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--d-accent); color: #fff; display: grid; place-items: center; flex: 0 0 auto;
}
.fa-voice .vplay svg { width: 13px; height: 13px; }
.fa-wave { display: flex; align-items: center; gap: 2px; height: 20px; flex: 1 1 auto; }
.fa-wave span {
  width: 2px; border-radius: 1px; background: var(--d-accent); opacity: .55;
  height: 30%;
}
.fa-wave.live span { animation: vw 0.9s ease-in-out infinite; }
.fa-wave.live span:nth-child(2n) { animation-delay: .15s; }
.fa-wave.live span:nth-child(3n) { animation-delay: .3s; }
.fa-wave.live span:nth-child(4n) { animation-delay: .45s; }
@keyframes vw { 0%,100% { height: 25%; } 50% { height: 90%; } }
.fa-vtime { font-size: 10.5px; color: var(--d-muted); flex: 0 0 auto; }
.fa-transcribe {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--d-line);
  font-size: 12px; color: var(--d-ink2); line-height: 1.4;
}
.fa-transcribe .tlabel {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; color: var(--d-accent);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px;
}
.fa-transcribe .tlabel svg { width: 11px; height: 11px; }

/* ── group avatars stack ── */
.fa-avatars-stack { display: flex; }
.fa-avatars-stack .fa-avatar { width: 26px; height: 26px; font-size: 10px; margin-left: -8px; border: 2px solid var(--d-surface); }
.fa-avatars-stack .fa-avatar:first-child { margin-left: 0; }

/* assignee toggles в диалоге задачи */
.fa-assignee {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 13px 0; padding: 5px 8px; border-radius: 8px;
  font-size: 12.5px; transition: background .15s;
}
.fa-assignee.on { background: var(--d-green-bg); }
.fa-assignee .ck {
  margin-left: auto; width: 16px; height: 16px; border-radius: 5px;
  border: 1.6px solid var(--d-muted); display: grid; place-items: center;
}
.fa-assignee.on .ck { background: var(--d-green-ink); border-color: var(--d-green-ink); }
.fa-assignee .ck svg { width: 11px; height: 11px; color: #fff; opacity: 0; }
.fa-assignee.on .ck svg { opacity: 1; }

/* device label под каждой панелью */
.demo-devlabel {
  text-align: center; font-size: 11.5px; color: var(--c-text-faint);
  margin-top: 9px; font-weight: 600; letter-spacing: .02em;
}

/* ── Текстовый fallback (no-JS / reduced-motion) ── */
.demo-fallback { display: none; }
.no-js .demo-stage, .reduce-motion .demo-stage { min-height: auto; }
.demo-fallback ol { padding-left: 20px; color: var(--c-text-muted); line-height: 1.7; font-size: 15px; }
.demo-fallback li { margin-bottom: 4px; }

/* ── Адаптив ── */
@media (max-width: 900px) {
  .demo-stage { grid-template-columns: 1fr; gap: 30px; }
  .demo-phone { max-width: 270px; }
  .demo-desktop .fa-screen { height: 400px; }
  .fa-sidebar { flex-basis: 200px; }
}
@media (max-width: 560px) {
  .demo-stage { padding: 16px; }
  .fa-sidebar { display: none; } /* на узких — десктоп-панель показывает только ленту */
  .demo-caption .dc-text { font-size: 15px; }
  .usecases-list { gap: 56px; }
}

/* Если пользователь просит «меньше движения» ИЛИ выключен JS — прячем сцену,
   показываем текстовый список шагов (demos.js снимает класс no-js при старте). */
.reduce-motion .demo-stage,
.reduce-motion .demo-caption,
.reduce-motion .demo-progress,
.no-js .demo-stage,
.no-js .demo-caption,
.no-js .demo-progress { display: none; }
.reduce-motion .demo-fallback,
.no-js .demo-fallback { display: block; margin-top: 8px; }