/* Лендинг бесплатного курса «Старт в Савви» — /start (20.10.2026).
   Структура и подача — по образцу академии Higgsfield (higgsfield.ai/academy), стиль — сайт Академии (как Практикум):
   site.css + praktikum.css (токены --pk-*, компоненты .pk-*), здесь только новые блоки с префиксом st-.
   Отступы — шкала 8/12/16/24/32/48/64/96, радиусы 8/12/16/24/32/999. Без инлайна (CSP). */

/* ── Первый экран: обещания под кнопкой и продуктовая анимация без плеера ── */
.st-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 32px auto 0; max-width: 960px; }
.st-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--pk-line); border-radius: 999px; background: #fff; font-size: 14px; line-height: 1.4; color: var(--pk-ink); }
.st-badge svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--pk-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.st-show { position: relative; max-width: 1040px; margin: 48px auto 0; }
.st-show::before { content: ''; position: absolute; left: 50%; top: 12%; width: 120%; height: 90%; transform: translateX(-50%); background: radial-gradient(closest-side, var(--pk-blob), rgba(225, 237, 255, 0)); pointer-events: none; }
.st-show__cap { position: relative; margin-top: 16px; text-align: center; font-size: 14px; color: var(--pk-faint); }

/* ── «Что вы соберёте»: без агента / с агентом ── */
.st-label { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.st-label--bad { background: var(--pk-warn-bg); color: var(--pk-warn); }
.st-label--ok { background: var(--pk-pos-bg); color: var(--pk-pos); }
.st-chat-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.st-time { font-size: 13px; color: var(--pk-faint); }
.st-ba .pk-chat__body { min-height: 0; }   /* в эталоне 380 — здесь чаты короткие, высоту выравнивает сетка */
.pk-sys.st-sys-bad { color: var(--pk-warn); background: var(--pk-warn-bg); }

/* ── «Из чего состоит агент»: три части ── */
.st-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.st-part { position: relative; display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--pk-line); border-radius: 24px; background: #fff; box-shadow: var(--pk-shadow); }
.st-part__ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: var(--pk-accent-soft); }
.st-part__ic svg { width: 24px; height: 24px; fill: none; stroke: var(--pk-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.st-part__n { position: absolute; top: 24px; right: 32px; font-size: 48px; line-height: 1; font-weight: 500; color: var(--pk-line-soft); }
.st-part h3 { margin: 24px 0 0; font-size: 22px; line-height: 1.3; font-weight: 500; color: var(--pk-ink); }
.st-part p { flex: 1; margin: 8px 0 0; font-size: 16px; line-height: 1.55; color: var(--pk-muted); }

/* ── Программа: список уроков, «вы здесь» на первом ── */
.st-lessons { display: grid; gap: 12px; max-width: 880px; margin: 0 auto; padding: 0; list-style: none; }
.st-lesson { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border: 1px solid var(--pk-line); border-radius: 16px; background: #fff; }
.st-lesson__n { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--pk-ground); font-size: 16px; font-weight: 500; color: var(--pk-ink); }
.st-lesson__t { flex: 1; min-width: 0; }
.st-lesson__t b { display: block; font-size: 18px; line-height: 1.35; font-weight: 500; color: var(--pk-ink); }
.st-lesson__t span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--pk-muted); }
.st-lesson__m { flex: none; font-size: 14px; color: var(--pk-faint); }
.st-lesson.is-here { border-color: var(--pk-accent); box-shadow: inset 0 0 0 1px var(--pk-accent), var(--pk-shadow); }
.st-lesson.is-here .st-lesson__n { background: var(--pk-accent); color: #fff; }
.st-lesson.is-here .st-lesson__m { padding: 4px 12px; border-radius: 999px; background: var(--pk-accent-soft); font-weight: 500; color: var(--pk-accent); }

/* ── «Два способа провести этот час» ── */
.st-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1040px; margin: 0 auto; }
.st-way { display: flex; flex-direction: column; padding: 32px; border-radius: 24px; }   /* как у .st-part и .st-path */
.st-way--no { background: var(--pk-ground); }
.st-way--yes { background: #fff; border: 2px solid var(--pk-accent); box-shadow: var(--pk-shadow-float); }
.st-way__k { font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--pk-faint); }
.st-way--yes .st-way__k { color: var(--pk-accent); }
.st-way h3 { margin: 12px 0 0; font-size: 32px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; color: var(--pk-ink); }
.st-way ul { flex: 1; display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.st-way li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--pk-muted); }
.st-way--yes li { color: var(--pk-ink); }
.st-way li svg { width: 20px; height: 20px; flex: none; margin-top: 2px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-way--no li svg { stroke: var(--pk-faint); }
.st-way--yes li svg { stroke: var(--pk-pos); }
.st-way .pk-btn { align-self: flex-start; margin-top: 32px; }
.st-way__no-btn { align-self: flex-start; margin-top: 32px; padding: 12px 0; font-size: 15px; color: var(--pk-faint); }

/* ── Что дальше: два пути после курса ── */
.st-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.st-path { padding: 32px; border-radius: 24px; background: #fff; }
.st-path h3 { margin: 16px 0 0; font-size: 22px; line-height: 1.3; font-weight: 500; color: var(--pk-ink); }
.st-path p { margin: 8px 0 0; font-size: 16px; line-height: 1.55; color: var(--pk-muted); }

@media (max-width: 900px) {
  .st-parts, .st-vs, .st-paths { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .st-part, .st-path { padding: 24px; }
  .st-part__n { right: 24px; }
  .st-way { padding: 24px; }
  .st-way h3 { font-size: 26px; }
  .st-lesson { gap: 12px; padding: 16px; }
  .st-lesson__m { display: none; }
  .st-lesson.is-here .st-lesson__m { display: inline-block; }
}

/* ── Анимация продукта на первом экране (20.10.2026, вместо видео): окно агента, шаги курса по очереди ──
   Готовое состояние — по умолчанию (без JS, «уменьшить движение»). start.js ставит .is-live и проигрывает шаги:
   .is-cur / .is-done у шагов, .is-on у экрана, .is-in у строк и сообщений. Движутся только opacity/transform/clip-path. */
.st-demo { position: relative; text-align: left; background: #fff; border: 1px solid var(--pk-line); border-radius: 24px; box-shadow: var(--pk-shadow-float); overflow: hidden; }
.st-demo__bar { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--pk-line-soft); }
.st-demo__dots { display: flex; gap: 8px; }
.st-demo__dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--pk-line); }
.st-demo__name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.st-demo__av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--pk-accent-soft); color: var(--pk-accent); font-size: 12px; font-weight: 700; }
.st-demo__name b { font-size: 15px; font-weight: 600; color: var(--pk-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-demo__status { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--pk-pos); background: var(--pk-pos-bg); transition: color .4s ease, background-color .4s ease; }
.st-demo__status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.st-demo__status.is-draft { color: var(--pk-faint); background: var(--pk-ground); }

.st-demo__body { display: grid; grid-template-columns: 280px minmax(0, 1fr); height: 424px; }
.st-demo__side { display: flex; flex-direction: column; justify-content: space-between; padding: 24px; background: #FAFBFD; border-right: 1px solid var(--pk-line-soft); }
.st-demo__steps { display: grid; gap: 12px; }
.st-dstep { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--pk-line); transition: border-color .3s ease, box-shadow .3s ease, transform 160ms ease-out; }
.st-dstep__ic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--pk-line); transition: background-color .3s ease, border-color .3s ease; }
.st-dstep__ic svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .4s cubic-bezier(.23, 1, .32, 1); }
.st-dstep__t { display: flex; flex-direction: column; min-width: 0; }
.st-dstep__t b { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--pk-ink-2); }
.st-dstep__t span { font-size: 12px; line-height: 1.4; color: var(--pk-faint); }
.st-dstep.is-cur { border-color: var(--pk-accent); box-shadow: 0 0 0 3px var(--pk-accent-soft); }
.st-dstep.is-cur .st-dstep__ic { border-color: var(--pk-accent); }
.st-dstep.is-done .st-dstep__ic { background: var(--pk-pos); border-color: var(--pk-pos); }
.st-dstep.is-done .st-dstep__ic svg { opacity: 1; transform: none; }
.st-dstep.is-press { transform: scale(.97); }
.st-demo__prog { font-size: 13px; color: var(--pk-faint); }
.st-demo__prog > span { display: block; margin-top: 8px; font-variant-numeric: tabular-nums; }
.st-demo__prog b { font-weight: 600; color: var(--pk-ink-2); }
.st-demo .st-demo__fill { width: 100%; }

.st-demo__stage { position: relative; overflow: hidden; }
.st-view { position: absolute; inset: 24px 32px; display: flex; flex-direction: column; opacity: 0; transform: translateY(8px); filter: blur(4px); pointer-events: none; transition: opacity .5s ease-out, transform .6s cubic-bezier(.23, 1, .32, 1), filter .5s ease-out; }
.st-view.is-on { opacity: 1; transform: none; filter: none; }
.st-view__h { display: flex; align-items: baseline; gap: 12px; padding-bottom: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--pk-line-soft); }
.st-view__h b { font-size: 18px; font-weight: 600; color: var(--pk-ink-2); }
.st-view__h span { font-size: 13px; color: var(--pk-faint); }

.st-doc { display: grid; gap: 12px; padding: 24px; border: 1px solid var(--pk-line); border-radius: 16px; }
.st-doc__l { width: fit-content; max-width: 100%; margin: 0; font-size: 15px; line-height: 1.5; color: var(--pk-ink-2); }
.st-kb { display: grid; gap: 12px; }
.st-kb__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 16px; border: 1px solid var(--pk-line); border-radius: 12px; font-size: 14px; line-height: 1.45; }
.st-kb__row span { color: var(--pk-muted); }
.st-kb__row b { font-weight: 600; color: var(--pk-ink-2); text-align: right; }
.st-tg { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 16px; border-radius: 16px; background: #FAFBFD; border: 1px solid var(--pk-line-soft); overflow: hidden; }
.st-tg .pk-msg__b { font-size: 14px; }
.st-tg__typing { display: none; }
.st-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.st-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--pk-faint); animation: stDot 1s ease-in-out infinite; }
.st-dots i:nth-child(2) { animation-delay: .15s; }
.st-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes stDot { 0%, 100% { opacity: .3; transform: none; } 50% { opacity: 1; transform: translateY(-2px); } }

/* живой режим: всё, что ещё не появилось, спрятано */
.st-demo.is-live .st-doc__l { clip-path: inset(0 100% 0 0); transition: clip-path 1s steps(28, end); }
.st-demo.is-live .st-doc__l.is-in { clip-path: inset(0 0 0 0); }
.st-demo.is-live .st-kb__row { opacity: 0; transform: translateY(12px); transition: opacity .5s ease-out, transform .6s cubic-bezier(.23, 1, .32, 1); }
.st-demo.is-live .st-kb__row.is-in { opacity: 1; transform: none; }
.st-demo.is-live .st-tg__m:not(.is-in) { display: none; }
.st-demo.is-live .st-tg__typing.is-in { display: flex; }
.st-demo.is-live .st-tg__m.is-in { animation: stRise .45s cubic-bezier(.23, 1, .32, 1) both; }
@keyframes stRise { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.st-demo.is-reset * { transition: none !important; }

.st-cursor { position: absolute; left: 0; top: 0; z-index: 2; width: 24px; height: 24px; opacity: 0; pointer-events: none; transition: transform .9s cubic-bezier(.77, 0, .175, 1), opacity .3s ease; }
.st-cursor svg { display: block; width: 24px; height: 24px; fill: var(--pk-ink-2); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; transition: transform 160ms ease-out; }
.st-demo.is-live .st-cursor { opacity: 1; }
.st-demo.is-rest .st-cursor { opacity: 0; }
.st-cursor.is-click svg { transform: scale(.85); }

@media (max-width: 720px) {
  .st-demo { border-radius: 16px; }
  .st-demo__bar { gap: 12px; padding: 12px 16px; }
  .st-demo__dots, .st-demo__av, .st-cursor { display: none; }
  .st-demo__name b { font-size: 14px; }
  .st-demo__status { gap: 8px; padding: 4px 8px; font-size: 12px; }
  .st-demo__body { grid-template-columns: 1fr; height: auto; }
  .st-demo__side { padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--pk-line-soft); }
  .st-demo__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .st-dstep { flex-direction: column; gap: 4px; padding: 8px 4px; text-align: center; }
  .st-dstep__ic { width: 20px; height: 20px; }
  .st-dstep__ic svg { width: 12px; height: 12px; }
  .st-dstep__t b { font-size: 12px; white-space: nowrap; }
  .st-dstep__t span, .st-demo__prog { display: none; }
  .st-demo__stage { height: 360px; }
  .st-view { inset: 16px; }
  .st-view__h { padding-bottom: 12px; margin-bottom: 16px; }
  .st-view__h b { font-size: 16px; }
  .st-doc { gap: 8px; padding: 16px; }
  .st-doc__l, .st-kb__row { font-size: 14px; }
  .st-kb__row { grid-template-columns: 1fr; gap: 4px; padding: 12px; }
  .st-kb__row b { text-align: left; }
  .st-tg { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-view, .st-dstep, .st-dstep__ic, .st-dstep__ic svg, .st-demo__status { transition: none; }
  .st-dots i { animation: none; }
}