/* Анимированные экраны «Как это работает» вместо гифок: вёрстка в стиле
   кабинета, размеры в долях ширины экрана (cqw). Анимация — CSS, цикл 10 с;
   при переключении шага панель выходит из display:none и цикл начинается
   заново. Ленты и карточки берут классы .feed-* из base.css. */
.b-how-screen { container-type: inline-size; }
.scr { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 20px; background: var(--light); }
.scr .feed { height: 100%; }
.scr .feed-side img { width: 3.4cqw; }

/* 1. Онбординг ICP */
.scr-form { display: flex; flex-direction: column; gap: 1.5cqw; padding: 2.6cqw 6cqw 2.6cqw 4cqw; }
.scr-steps { display: flex; align-items: center; gap: .8cqw; }
.scr-steps span { width: 5cqw; height: .5cqw; border-radius: 1cqw; background: var(--line); }
.scr-steps .is-on { background: var(--black); }
.scr-steps small { margin-left: .6cqw; color: var(--muted); font-size: 1.2cqw; }
.scr-title { font: 600 2.6cqw/1.2 var(--sans); }
.scr-hint { max-width: 60cqw; color: var(--muted); font-size: 1.35cqw; line-height: 1.4; }
.scr-field { display: grid; gap: .6cqw; min-width: 0; }
.scr-field > span { font-size: 1.3cqw; font-weight: 600; }
.scr-field > i {
  display: block; padding: 1cqw 1.4cqw; border: 1px solid var(--line); border-radius: 1.2cqw;
  background: var(--white); font-size: 1.35cqw; font-style: normal; color: var(--body);
}
.scr-row { display: flex; align-items: flex-end; gap: 1.2cqw; }
.scr-row .scr-field { flex: 1; }
.scr-area > i { display: grid; gap: .3cqw; min-height: 7.4cqw; border-color: var(--yellow); box-shadow: 0 0 0 .35cqw var(--yellow-soft); }
.scr-chips { display: flex; flex-wrap: wrap; gap: .8cqw; }
.scr-chip { padding: .6cqw 1.4cqw; border: 1px solid var(--line); border-radius: 99px; background: var(--white); font-size: 1.3cqw; }
.scr-btn, .scr-btn-ghost {
  display: inline-grid; place-items: center; align-self: flex-start; height: 4cqw; padding: 0 3cqw;
  border-radius: 99px; background: var(--yellow); font-size: 1.4cqw; font-weight: 500;
}
.scr-btn-ghost { height: 3.9cqw; border: 1px solid var(--yellow); background: var(--white); white-space: nowrap; }

/* Печать строк: каждая строка «проявляется» слева направо в своё окно цикла */
.scr-type { display: block; overflow: hidden; width: 0; font-style: normal; white-space: nowrap; }
.scr-type-1 { animation: scr-type-1 10s steps(36) infinite; }
.scr-type-2 { animation: scr-type-2 10s steps(36) infinite; }
.scr-type-3 { animation: scr-type-3 10s steps(36) infinite; }
@keyframes scr-type-1 { 0%, 4% { width: 0; } 18%, 96% { width: 100%; } 100% { width: 0; } }
@keyframes scr-type-2 { 0%, 18% { width: 0; } 32%, 96% { width: 100%; } 100% { width: 0; } }
@keyframes scr-type-3 { 0%, 32% { width: 0; } 46%, 96% { width: 100%; } 100% { width: 0; } }

.scr-chip-1 { animation: scr-chip-1 10s infinite; }
.scr-chip-2 { animation: scr-chip-2 10s infinite; }
.scr-chip-3 { animation: scr-chip-3 10s infinite; }
.scr-chip-4 { animation: scr-chip-4 10s infinite; }
@keyframes scr-chip-1 { 0%, 52% { background: var(--white); border-color: var(--line); } 55%, 96% { background: var(--yellow); border-color: var(--yellow); } }
@keyframes scr-chip-2 { 0%, 57% { background: var(--white); border-color: var(--line); } 60%, 96% { background: var(--yellow); border-color: var(--yellow); } }
@keyframes scr-chip-3 { 0%, 62% { background: var(--white); border-color: var(--line); } 65%, 96% { background: var(--yellow); border-color: var(--yellow); } }
@keyframes scr-chip-4 { 0%, 67% { background: var(--white); border-color: var(--line); } 70%, 96% { background: var(--yellow); border-color: var(--yellow); } }
.scr-icp .scr-btn { animation: scr-press 10s infinite; }
@keyframes scr-press { 0%, 76% { transform: none; box-shadow: none; } 80% { transform: scale(.96); box-shadow: 0 0 0 .6cqw var(--yellow-soft); } 84%, 100% { transform: none; box-shadow: none; } }

/* 2. Лента: три новых сигнала появляются по очереди сверху вниз и подсвечиваются */
.scr-feed .feed-row { transition: none; }
.scr-new-1 { animation: scr-new-1 10s infinite; }
.scr-new-2 { animation: scr-new-2 10s infinite; }
.scr-new-3 { animation: scr-new-3 10s infinite; }
.scr-new-4 { animation: scr-new-4 10s infinite; }
.scr-new-5 { animation: scr-new-5 10s infinite; }
.scr-new-6 { animation: scr-new-6 10s infinite; }
@keyframes scr-new-1 { 0%, 4% { opacity: 0; transform: translateY(-1.5cqw); background: var(--yellow-soft); } 9% { opacity: 1; transform: none; background: var(--yellow-soft); } 26%, 96% { opacity: 1; background: var(--white); } 100% { opacity: 0; } }
@keyframes scr-new-2 { 0%, 14% { opacity: 0; transform: translateY(-1.5cqw); background: var(--yellow-soft); } 19% { opacity: 1; transform: none; background: var(--yellow-soft); } 36%, 96% { opacity: 1; background: var(--white); } 100% { opacity: 0; } }
@keyframes scr-new-3 { 0%, 24% { opacity: 0; transform: translateY(-1.5cqw); background: var(--yellow-soft); } 29% { opacity: 1; transform: none; background: var(--yellow-soft); } 46%, 96% { opacity: 1; background: var(--white); } 100% { opacity: 0; } }
@keyframes scr-new-4 { 0%, 34% { opacity: 0; transform: translateY(-1.5cqw); background: var(--yellow-soft); } 39% { opacity: 1; transform: none; background: var(--yellow-soft); } 56%, 96% { opacity: 1; background: var(--white); } 100% { opacity: 0; } }
@keyframes scr-new-5 { 0%, 44% { opacity: 0; transform: translateY(-1.5cqw); background: var(--yellow-soft); } 49% { opacity: 1; transform: none; background: var(--yellow-soft); } 66%, 96% { opacity: 1; background: var(--white); } 100% { opacity: 0; } }
@keyframes scr-new-6 { 0%, 54% { opacity: 0; transform: translateY(-1.5cqw); background: var(--yellow-soft); } 59% { opacity: 1; transform: none; background: var(--yellow-soft); } 76%, 96% { opacity: 1; background: var(--white); } 100% { opacity: 0; } }

/* 3. Оффер: карточка сигнала слева, письмо печатается справа, потом «Отправлено» */
.scr-offer-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 2cqw; align-items: start; }
.scr-card, .scr-mail { display: grid; gap: 1.1cqw; padding: 2cqw; border-radius: 1.8cqw; background: var(--white); }
.scr-card-top { display: flex; align-items: center; gap: 1.2cqw; }
.scr-card-top > span:nth-child(2) { display: grid; gap: .2cqw; min-width: 0; }
.scr-card-top b { font-size: 1.5cqw; line-height: 1.25; }
.scr-card small, .scr-mail-to { color: var(--muted); font-size: 1.2cqw; }
.scr-label { color: var(--muted); font-size: 1.15cqw; text-transform: uppercase; letter-spacing: .06em; }
.scr-card p { font: 400 1.45cqw/1.45 var(--sans); }
.scr-person { display: flex; align-items: center; gap: 1cqw; }
.scr-person > span:last-child { display: grid; gap: .2cqw; }
.scr-person b { font-size: 1.4cqw; }
.scr-avatar { display: grid; place-items: center; width: 4cqw; height: 4cqw; border-radius: 50%; background: var(--black); color: var(--white); font-size: 1.25cqw; font-weight: 600; }
.scr-mail-top { display: flex; align-items: center; justify-content: space-between; }
.scr-mail-top b { font: 600 1.8cqw/1.2 var(--sans); }
.scr-ai { padding: .4cqw 1cqw; border-radius: 99px; background: var(--yellow); font-size: 1.15cqw; font-weight: 500; }
.scr-mail-body { display: grid; gap: .35cqw; min-height: 8cqw; padding: 1.3cqw 1.4cqw; border: 1px solid var(--line); border-radius: 1.2cqw; font-size: 1.4cqw; line-height: 1.4; }
.scr-mail-foot { position: relative; display: flex; align-items: center; gap: 1.4cqw; min-height: 4cqw; }
.scr-offer .scr-btn { animation: scr-press-send 10s infinite; }
@keyframes scr-press-send { 0%, 56% { transform: none; box-shadow: none; } 60% { transform: scale(.96); box-shadow: 0 0 0 .6cqw var(--yellow-soft); } 64%, 100% { transform: none; box-shadow: none; } }
.scr-sent {
  padding: .7cqw 1.4cqw; border-radius: 99px; background: var(--black); color: var(--white);
  font-size: 1.2cqw; white-space: nowrap; opacity: 0; animation: scr-sent 10s infinite;
}
.scr-sent::before { content: "✓ "; color: var(--yellow); }
@keyframes scr-sent { 0%, 62% { opacity: 0; transform: translateY(.6cqw); } 66%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (max-width: 640px) {
  .scr { border-radius: 10px; aspect-ratio: 4 / 3.4; }
  .scr .feed-side { display: none; }
  .scr-form { padding: 3cqw 4cqw; gap: 2cqw; }
  .scr-title { font-size: 4cqw; }
  .scr-hint, .scr-field > span, .scr-field > i, .scr-chip { font-size: 2.4cqw; }
  .scr-row { display: none; }
  .scr-offer-grid { grid-template-columns: 1fr; }
  .scr-offer .scr-card { display: none; }
  .scr-mail { font-size: 2.6cqw; }
  .scr-mail-body, .scr-card p { font-size: 2.6cqw; }
  .scr-mail-top b { font-size: 3.4cqw; }
  .scr-ai, .scr-mail-to, .scr-sent { font-size: 2.2cqw; }
  .scr-btn { height: 7cqw; font-size: 2.6cqw; }
  .scr-feed .feed-row:nth-child(n+5) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scr-type { width: 100% !important; animation: none !important; }
  .scr-new, .scr-sent { opacity: 1 !important; animation: none !important; }
}

/* 4. «Нет своей базы?»: поиск компаний — фильтры включаются, строки появляются */
.rs-builder-frame { padding: 14px; background: rgb(255 255 255 / 8%); container-type: inline-size; }
.rs-builder-preview { display: block; }
.scr-search { aspect-ratio: 16 / 9; }
.scr-filters { display: flex; flex-wrap: wrap; gap: 1cqw; margin: 1.8cqw 0 1.6cqw; }
.scr-filter {
  display: grid; gap: .2cqw; padding: .8cqw 1.6cqw; border: 1px solid var(--line); border-radius: 1.2cqw;
  background: var(--white); font-size: 1.35cqw; font-weight: 500;
}
.scr-filter small { color: var(--muted); font-size: 1.1cqw; font-weight: 400; }
.scr-table { display: grid; gap: .6cqw; }
.scr-th, .scr-tr { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr .8fr; gap: 1cqw; align-items: center; padding: 1cqw 1.6cqw; font-size: 1.3cqw; }
.scr-th { color: var(--muted); font-size: 1.15cqw; }
.scr-tr { border-radius: 1.2cqw; background: var(--white); color: var(--body); }
.scr-tr b { color: var(--ink); font-weight: 600; }
.scr-tr-1 { animation: scr-row-1 10s infinite; }
.scr-tr-2 { animation: scr-row-2 10s infinite; }
.scr-tr-3 { animation: scr-row-3 10s infinite; }
.scr-tr-4 { animation: scr-row-4 10s infinite; }
.scr-tr-5 { animation: scr-row-5 10s infinite; }
@keyframes scr-row-1 { 0%, 72% { opacity: 0; transform: translateY(1cqw); } 75%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes scr-row-2 { 0%, 75% { opacity: 0; transform: translateY(1cqw); } 78%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes scr-row-3 { 0%, 78% { opacity: 0; transform: translateY(1cqw); } 81%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes scr-row-4 { 0%, 81% { opacity: 0; transform: translateY(1cqw); } 84%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes scr-row-5 { 0%, 84% { opacity: 0; transform: translateY(1cqw); } 87%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.scr-total { display: flex; align-items: center; justify-content: space-between; margin-top: 1.4cqw; font-size: 1.35cqw; }
.scr-search .scr-btn { animation: scr-press 10s infinite; }
@media (max-width: 640px) {
  .scr-search { aspect-ratio: 4 / 3.6; }
  .scr-filter, .scr-th, .scr-tr, .scr-total { font-size: 2.3cqw; }
  .scr-th, .scr-tr { grid-template-columns: 1.5fr 1fr 1fr; }
  .scr-th span:nth-child(n+4), .scr-tr span:nth-child(n+4) { display: none; }
}
.scr-offer { aspect-ratio: 16 / 7.6; }
.scr-offer .scr-offer-grid { align-content: center; height: 100%; }
@media (max-width: 640px) { .scr-offer { aspect-ratio: 4 / 3.2; } }