/* Посадочная «События из вашей системы»: только то, чего нет на главной. Секции, карточки (.fit--three) и экраны — из /v2/css/landing-v2.css */

/* метка над заголовком: плашка с молнией, как метка канала на /email/ */
.events-kicker {
  display: inline-flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5);
  color: var(--text-2); font-size: var(--fs-small); font-weight: var(--fw-semibold);
}
.events-kicker .plate { background: var(--cta); color: var(--cta-text); box-shadow: none; }
.events-kicker .plate .icon { width: var(--icon-sm); height: var(--icon-sm); }

/* в hero нет ряда каналов, поэтому переписка не сдвигается под плашку MAX */
.page-events .hero__stage { margin-left: auto; }

/* событие в переписке: служебная строка по центру, как отметки в Диалогах, а не реплика */
.hcard .msg--event { align-self: center; max-width: 100%; }
.events-mark {
  display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3);
  border: var(--line) dashed var(--mock-chip-border); border-radius: var(--r-pill);
  color: var(--mock-muted); font-size: var(--fs-mock-sm); line-height: var(--lh-body); text-align: center;
}
.events-mark .icon { color: var(--mock-link); flex: none; }

/* номер шага вместо иконки: тот же размер, что у иконок карточек (как на /email/) */
.events-step {
  display: grid; place-items: center; flex: none;
  width: var(--source); height: var(--source); margin-bottom: var(--s-2);
  border-radius: 50%; background: var(--cta); color: var(--cta-text);
  font-weight: var(--fw-semibold); font-size: var(--fs-small); line-height: 1;
}
.events-links { margin-top: var(--s-5); }

/* сценарий «Брошенная корзина»: блоки редактора (.startnode, .fblk) на холсте с точками; запуск → «Ждать» → две ветки */
.events-flow {
  position: relative; overflow: hidden;
  background: var(--mock-bg); color: var(--mock-text);
  border-radius: var(--r-3); box-shadow: var(--shadow-window);
  font-size: var(--fs-mock); line-height: var(--lh-tight);
}
.events-flow::after { content: ""; position: absolute; inset: 0 0 auto 0; height: var(--line); background: var(--highlight); pointer-events: none; }
.events-canvas {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-4) var(--s-5);
  align-items: start; padding: var(--s-6) var(--s-5);
  background-color: var(--mock-bg-deep);
  background-image: radial-gradient(var(--mock-dot) var(--line), transparent var(--line)); background-size: var(--dot-step) var(--dot-step);
}
.events-canvas code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-mock-sm); overflow-wrap: anywhere; }
.events-start { grid-column: 1; grid-row: 1 / 3; align-self: center; }
.events-start__trigger { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.events-start__label { display: flex; align-items: center; gap: var(--s-1); color: var(--mock-muted); font-size: var(--fs-mock-sm); }
.events-wait { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.events-msg--yes { grid-column: 3; grid-row: 1; }
.events-msg--no { grid-column: 3; grid-row: 2; }
.events-row { display: flex; align-items: center; gap: var(--s-2); }
.events-row .icon { color: var(--mock-muted); flex: none; }
.events-out {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); margin-inline: var(--s-3);
  color: var(--mock-muted);
}
.events-out::after { content: ""; flex: none; width: var(--s-2); height: var(--s-2); border-radius: var(--r-pill); border: var(--line) solid currentColor; }
.events-out--yes { color: var(--success); }
.events-msg .fblk__field { display: inline-block; margin: 0; padding: 0 var(--s-1); }
/* связи слева от блока: в «Ждать» из запуска, в сообщения — из «Ждать» */
.events-wait::before, .events-msg::before { content: ""; position: absolute; right: 100%; width: var(--s-5); height: var(--line); background: var(--mock-muted); }
.events-wait::before { top: 50%; }
.events-msg::before { top: var(--s-5); }
.events-msg--yes::before { background: var(--success); }

/* телефон: блоки сценария столбиком, связи сверху; номер шага — строкой с текстом, как иконки карточек */
@media (max-width: 720px) {
  .events-canvas { grid-template-columns: minmax(0, 1fr); padding: var(--s-5) var(--s-4); }
  .events-start, .events-wait, .events-msg--yes, .events-msg--no { grid-column: 1; grid-row: auto; align-self: stretch; }
  .events-wait::before, .events-msg::before { right: auto; top: auto; bottom: 100%; left: var(--s-6); width: var(--line); height: var(--s-4); }
  .events-step { grid-row: 1 / 3; width: var(--icon); height: var(--icon); margin: 0; font-size: var(--fs-caption, 13px); }
}