/* Alvartus — «Гороскоп»: группы систем, карточки с кнопкой в бота, путь из четырёх шагов. Сначала телефон. */

.alv-why .alv-h3 { font-size: 1.6rem; }

/* группы систем */
.alv-sgroup + .alv-sgroup { margin-top: 56px; }
.alv-sgroup__head { display: grid; gap: 4px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--alv-line); }
.alv-sgroup__title { display: flex; align-items: baseline; gap: 12px; margin: 0; font: 600 1.9rem/1.1 var(--alv-serif); color: #fbf3d5; }
.alv-sgroup__title span { font-size: 1rem; font-family: var(--alv-sans); font-weight: 700; letter-spacing: .14em; color: var(--alv-gold); }
.alv-sgroup__head p { margin: 0 !important; color: var(--alv-muted); }

.alv-sysx { display: flex; flex-direction: column; align-items: flex-start; }
.alv-sysx .alv-h3 { font-size: 1.45rem; margin-bottom: .4em; }
.alv-sysx p { font-size: .94rem; margin-bottom: 20px !important; flex: 1; }
.alv-sysx .alv-btn { margin-top: auto; }

/* путь: дата → расчёт → сверка → послание */
.alv-path { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; position: relative; }
.alv-path::before { content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(180deg, #f3c94b, #a98bff, #2ee6c8, #ff8fc8); opacity: .6; }
.alv-path__step { position: relative; display: flex; gap: 18px; align-items: flex-start; }
.alv-path__dot {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: var(--alv-acc);
  background: radial-gradient(circle, color-mix(in srgb, var(--alv-acc) 30%, #120f3a), #120f3a 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--alv-acc) 60%, transparent), 0 0 30px color-mix(in srgb, var(--alv-acc) 35%, transparent);
}
.alv-path__dot .alv-ico { width: 26px; height: 26px; }
.alv-path__step .alv-h3 { margin: 8px 0 4px; }
.alv-path__step p { margin: 0 !important; color: var(--alv-muted); }

@media (min-width: 960px) {
  .alv-path { grid-template-columns: repeat(4, 1fr); gap: 26px; }
  .alv-path::before { left: 28px; right: 28px; top: 28px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, #f3c94b, #a98bff, #2ee6c8, #ff8fc8); }
  .alv-path__step { flex-direction: column; }
}