/* =========================================================================
   РСЯ и ретаргетинг (K05): блоки страницы
   Общие токены и компоненты — в site.css. Здесь только то, чего там нет.
   Схема первого экрана — разметка и CSS, без скриптов: без JS и при
   «уменьшить движение» видна целиком, импульс по линии просто не бежит.
   ========================================================================= */

/* ---------- первый экран: путь вернувшегося посетителя */
.rt-stage { min-height: 0; height: auto; display: grid; align-content: center; justify-items: end; gap: 10px; }
.rt-loop { position: relative; list-style: none; width: 100%; max-width: 470px; display: grid; gap: 10px; padding: clamp(16px, 2.4vw, 26px); border-radius: var(--radius-lg); background: linear-gradient(160deg, rgba(24, 38, 74, 0.72), rgba(17, 28, 51, 0.92)); border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6); overflow: hidden; }
/* вертикальная линия за значками и импульс, который бежит по ней сверху вниз */
.rt-loop::before { content: ""; position: absolute; left: calc(clamp(16px, 2.4vw, 26px) + 19px); top: 40px; bottom: 40px; border-left: 2px dashed rgba(142, 171, 255, 0.4); }
.rt-loop::after { content: ""; position: absolute; left: calc(clamp(16px, 2.4vw, 26px) + 13px); top: 33px; bottom: 33px; width: 14px; background: radial-gradient(circle, var(--signal) 0 4px, rgba(255, 176, 32, 0.25) 4.5px 7px, transparent 7.5px) 50% 0 / 14px 14px no-repeat; opacity: 0; }
.rt-loop li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px 14px 8px 0; }
.rt-loop li > span:last-child { display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; background: var(--night-2); border: 1px solid var(--night-line); }
.rt-loop b { color: #eef2fb; font-weight: 650; font-size: 0.97rem; line-height: 1.25; }
.rt-loop small { color: var(--fog); font-size: 0.82rem; line-height: 1.3; }
.rt-ico { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--night-3); border: 1px solid rgba(142, 171, 255, 0.45); }
.rt-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--flow-light); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rt-loop .is-leak .rt-ico { border-color: rgba(255, 107, 91, 0.6); }
.rt-loop .is-leak .rt-ico svg { stroke: var(--leak); }
.rt-loop .is-goal .rt-ico { background: rgba(255, 176, 32, 0.16); border-color: var(--signal); }
.rt-loop .is-goal .rt-ico svg { stroke: var(--signal); stroke-width: 2.4; }
.rt-loop .is-goal > span:last-child { border-color: rgba(255, 176, 32, 0.55); background: rgba(255, 176, 32, 0.1); }
.rt-loop .is-goal b { color: var(--signal); }
.rt-loop .is-off { opacity: 0.85; }
.rt-loop .is-off .rt-ico svg { stroke: var(--fog-dim); }
.rt-loop .is-off > span:last-child { border-style: dashed; background: transparent; }
.rt-cap { width: 100%; max-width: 470px; margin: 0; color: var(--fog-dim); font-size: 0.82rem; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-off) .rt-loop::after { animation: rt-drop 4.8s ease-in-out infinite; }
}
@keyframes rt-drop { 0% { background-position: 50% 0%; opacity: 0; } 8% { opacity: 1; } 86% { opacity: 1; } 100% { background-position: 50% 100%; opacity: 0; } }

/* ---------- кому подойдёт: два столбца как «обещаю / не обещаю» */
.rt-fit .no { background: transparent; }

/* ---------- аудитории */
.rt-segs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rt-seg { display: grid; gap: 10px; align-content: start; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
.rt-seg h3 { font-size: var(--step-1); font-weight: 650; line-height: 1.3; }
.rt-seg p { margin: 0; color: var(--fg-soft); }
.rt-tag { justify-self: start; padding: 4px 12px; border-radius: 999px; background: rgba(142, 171, 255, 0.16); color: var(--flow-light); font-size: 0.8rem; font-weight: 700; }
.rt-seg--new .rt-tag { background: rgba(47, 191, 138, 0.18); color: #86e3bf; }
.rt-seg--off { border-style: dashed; }
.rt-seg--off .rt-tag { background: rgba(255, 107, 91, 0.16); color: #ff9a8f; }
.rt-note { margin: 20px 0 0; color: var(--fg-dim); font-size: var(--step--1); }

/* ---------- как запускаю */
.rt-steps { list-style: none; counter-reset: rt; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.rt-steps li { counter-increment: rt; position: relative; display: grid; gap: 8px; align-content: start; padding: 22px 20px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
.rt-steps li::before { content: counter(rt); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 4px; border-radius: 50%; background: var(--night); color: var(--signal); font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.rt-steps b { font-weight: 650; line-height: 1.3; }
.rt-steps span { color: var(--fg-soft); font-size: 0.97rem; line-height: 1.45; }

/* ---------- адаптив */
@media (max-width: 1180px) {
  .rt-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .rt-stage { justify-items: center; }
  .rt-segs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rt-segs, .rt-steps { grid-template-columns: minmax(0, 1fr); }
  .rt-steps li { grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; }
  .rt-steps li::before { grid-row: span 2; margin: 0; }
  .rt-loop li { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding-right: 0; }
  .rt-ico { width: 36px; height: 36px; }
  .rt-loop::before { left: calc(clamp(16px, 2.4vw, 26px) + 17px); }
  .rt-loop::after { left: calc(clamp(16px, 2.4vw, 26px) + 11px); }
}