/* Заглушки строк текста и картинок в макетах */
.sm-lines { display: grid; gap: 8px; }
.sm-lines i { display: block; height: 7px; width: var(--w, 100%); border-radius: 99px; background: var(--surface-3); }
.sm-img {
  position: relative;
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 14%, var(--surface)), color-mix(in srgb, var(--sky) 16%, var(--surface)));
}
.sm-img.is-chart::after {
  content: "";
  position: absolute;
  inset: 22% 10% 18%;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--violet) 32%, transparent) 0 100%) 0 100% / 14% 40% no-repeat,
    linear-gradient(to top, color-mix(in srgb, var(--violet) 32%, transparent) 0 100%) 28% 100% / 14% 62% no-repeat,
    linear-gradient(to top, color-mix(in srgb, var(--violet) 32%, transparent) 0 100%) 57% 100% / 14% 50% no-repeat,
    linear-gradient(to top, color-mix(in srgb, var(--sky) 45%, transparent) 0 100%) 86% 100% / 14% 88% no-repeat;
}
.sm-img.is-table::after {
  content: "";
  position: absolute;
  inset: 18% 10%;
  border-radius: 6px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 calc(25% - 1px), color-mix(in srgb, var(--ink-900) 14%, transparent) calc(25% - 1px) 25%),
    linear-gradient(90deg, transparent 0 40%, color-mix(in srgb, var(--ink-900) 10%, transparent) 40% calc(40% + 1px), transparent 0),
    color-mix(in srgb, var(--surface) 70%, transparent);
}
.sm-img.is-photo { background: radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--sky) 40%, var(--surface)), transparent 45%), linear-gradient(160deg, color-mix(in srgb, var(--violet) 22%, var(--surface)), color-mix(in srgb, var(--ink-900) 12%, var(--surface))); }

/* ---------- 1. Первый экран: неделя ---------- */
.sm-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; min-height: 340px; }
.sm-day { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.sm-day.is-today { background: color-mix(in srgb, var(--violet) 6%, var(--surface)); border-color: color-mix(in srgb, var(--violet) 25%, transparent); }
.sm-day-name { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-400); }
.sm-day.is-today .sm-day-name { color: var(--violet-ink); }
.sm-post {
  display: grid;
  gap: 6px;
  justify-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.sm-post b { font-size: 12.5px; line-height: 1.35; font-weight: 550; color: var(--ink-900); }
.sm-post .chip { font-size: 10.5px; height: 20px; padding: 0 7px; }
.sm-post-ch { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-500); }
.sm-post.is-draft { border-style: dashed; box-shadow: none; }
@media (max-width: 1024px) {
  .sm-week { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 0; }
  .sm-day:nth-child(n + 4) { display: none; }
}
@media (max-width: 560px) {
  .sm-week { grid-template-columns: 1fr; }
  .sm-day:nth-child(n + 3) { display: none; }
}

/* ---------- 2. Боль ---------- */
.sm-pain { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.sm-pain-list { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: pain; }
.sm-pain-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; padding: 16px 0; border-top: 1px solid var(--line); counter-increment: pain; }
.sm-pain-list li:last-child { border-bottom: 1px solid var(--line); }
.sm-pain-list li::before { content: "0" counter(pain); grid-row: span 2; font-family: var(--font-mono); font-size: 12px; color: var(--st-bad); padding-top: 3px; }
.sm-pain-list b { font-size: 16px; font-weight: 550; color: var(--ink-900); }
.sm-pain-list span { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--ink-500); }
.sm-chat-wrap {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-md);
  transform: rotate(1deg);
}
.sm-chat-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 14px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-500); }
@media (max-width: 1024px) { .sm-pain { grid-template-columns: 1fr; } .sm-chat-wrap { transform: none; } }

/* ---------- 3. Пять этапов ---------- */
.sm-pipe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: none; }
.sm-stage { position: relative; display: flex; flex-direction: column; gap: 10px; }
.sm-stage .card-title { margin: 4px 0 0; font-size: 18px; }
.sm-stage .card-text { margin: 0; font-size: 14px; }
.sm-stage + .sm-stage::before {
  content: "";
  position: absolute;
  top: 30px;
  left: -12px;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--ink-300);
  border-right: 1.5px solid var(--ink-300);
  transform: rotate(45deg);
}
.sm-stage-vis { margin-top: auto; }
.sm-stage .kv-row { gap: 8px; }
.sm-stage .kv-key, .sm-stage .kv-val { font-size: 12.5px; }
.sm-stage .kv-val { text-align: right; }
.sm-heads { display: grid; gap: 6px; }
.sm-heads span { padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); font-size: 12px; line-height: 1.35; color: var(--ink-400); text-decoration: line-through; text-decoration-color: var(--ink-300); }
.sm-heads span.is-pick { color: var(--ink-900); text-decoration: none; border-color: color-mix(in srgb, var(--violet) 35%, transparent); background: color-mix(in srgb, var(--violet) 7%, var(--surface)); }
.sm-aida { display: grid; gap: 8px; }
.sm-aida div { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 8px; }
.sm-aida i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-style: normal; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--violet-ink); background: color-mix(in srgb, var(--violet) 10%, transparent); }
.sm-aida span { font-size: 12px; line-height: 1.35; color: var(--ink-700); }
.sm-pics { display: grid; gap: 8px; }
.sm-pic { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); }
.sm-pic i { position: relative; display: block; height: 32px; border-radius: 6px; border: 1px solid var(--line); overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 18%, var(--surface)), color-mix(in srgb, var(--sky) 20%, var(--surface))); }
.sm-pic i.is-table { background: repeating-linear-gradient(to bottom, var(--surface) 0 7px, var(--surface-3) 7px 8px); }
.sm-pic i.is-photo { background: linear-gradient(160deg, color-mix(in srgb, var(--violet) 26%, var(--surface)), color-mix(in srgb, var(--ink-900) 16%, var(--surface))); }
.sm-checks { display: grid; gap: 10px; }
.sm-check-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.sm-check-head b { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink-900); }
.sm-checks .checks li { font-size: 13px; }
@media (max-width: 1180px) {
  .sm-pipe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm-stage:nth-child(4)::before { display: none; }
}
@media (max-width: 760px) {
  .sm-pipe { grid-template-columns: 1fr; }
  .sm-stage + .sm-stage::before { display: block; top: -11px; left: 28px; transform: rotate(135deg); }
}

/* ---------- 4. Возможности ---------- */
.sm-plan .mt-row { --mt-cols: minmax(0, 1fr) 90px 118px; }
.sm-plan .mt-row > :nth-child(2) { color: var(--ink-500); }
@media (max-width: 560px) { .sm-plan .mt-row { --mt-cols: minmax(0, 1fr) 112px; } }
.sm-status { list-style: none; margin: 0; padding: 0; display: grid; }
.sm-status li { position: relative; padding: 0 0 16px 28px; font-size: 14px; color: var(--ink-500); }
.sm-status li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); }
.sm-status li::after { content: ""; position: absolute; left: 7.5px; top: 21px; bottom: 2px; width: 1px; background: var(--line-strong); }
.sm-status li:last-child { padding-bottom: 0; }
.sm-status li:last-child::after { display: none; }
.sm-status li.is-done { color: var(--ink-900); }
.sm-status li.is-done::before { border-color: var(--st-ok); background: var(--st-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.3 2.6 2.6L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.sm-status li.is-now { color: var(--ink-900); font-weight: 550; }
.sm-status li.is-now::before { border-color: var(--violet); box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 15%, transparent); }
.sm-stats .metric-value { white-space: nowrap; }
@media (max-width: 560px) { .sm-stats { grid-template-columns: 1fr; } }
.sm-spark { height: 64px; margin-top: 14px; }
.sm-legend { display: flex; gap: 16px; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); }
.sm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sm-legend i { width: 14px; height: 2px; border-radius: 2px; background: var(--violet); }
.sm-legend i.is-sky { background: var(--sky); }
.sm-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-base { display: grid; gap: 14px; }
.sm-prev--tg .sm-img { aspect-ratio: 16 / 6; }

/* ---------- 5. Площадки ---------- */
.sm-ch .segmented { margin-bottom: 20px; }
.sm-ch-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.sm-prev {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-window);
}
.sm-tg-head { display: flex; align-items: center; gap: 10px; }
.sm-tg-head i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-style: normal; font-weight: 650; color: #fff; background: linear-gradient(135deg, var(--violet), var(--sky)); }
.sm-tg-head b { display: block; font-size: 14.5px; color: var(--ink-900); }
.sm-tg-head span { font-size: 12.5px; color: var(--ink-500); }
.sm-tg-post { display: grid; gap: 10px; max-width: 520px; padding: 10px; border-radius: 16px 16px 16px 4px; background: var(--surface-2); border: 1px solid var(--line); }
.sm-tg-post p { margin: 0; padding: 0 4px; font-size: 14.5px; line-height: 1.55; color: var(--ink-700); }
.sm-tg-post p b { color: var(--ink-900); }
.sm-tg-meta { justify-self: end; padding: 0 4px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); }
.sm-prev--article h3 { margin: 0; font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-900); }
.sm-article-foot { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-ch-kv { padding: 18px 20px; }
.sm-ch .segmented { flex-wrap: wrap; }
.sm-vk-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-700); }
.sm-vk-text b { color: var(--ink-900); }
.sm-vk-bar { display: flex; gap: 10px; font-size: 13px; color: var(--ink-500); }
.sm-vk-bar span { padding: 5px 10px; border-radius: 99px; background: var(--surface-2); }
.sm-vk-bar .sm-vk-views { margin-left: auto; background: transparent; }
.sm-ig { display: grid; gap: 10px; width: min(300px, 100%); margin: 0 auto; }
.sm-ig-head { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-900); }
.sm-ig-head i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-style: normal; font-weight: 650; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--violet), var(--sky)); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--violet) 40%, transparent); }
.sm-ig-img { position: relative; display: grid; place-items: end start; aspect-ratio: 4 / 5; padding: 22px; border-radius: 6px; overflow: hidden; background: radial-gradient(circle at 75% 20%, color-mix(in srgb, var(--sky) 45%, transparent), transparent 50%), linear-gradient(160deg, color-mix(in srgb, var(--violet) 70%, #1b1530), #1b1530); }
.sm-ig-img span { max-width: 12ch; font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.sm-ig-img::after { content: "1/5"; position: absolute; top: 12px; right: 12px; padding: 2px 8px; border-radius: 99px; font-family: var(--font-mono); font-size: 11px; color: #fff; background: rgba(0, 0, 0, 0.35); }
.sm-ig-bar { display: flex; gap: 14px; font-size: 18px; color: var(--ink-700); }
.sm-ig p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-700); }
.sm-ig p b { color: var(--ink-900); }
.switch-stack > .sm-prev--ig[hidden], .switch-stack > .sm-prev--vk[hidden] { display: grid; }
@media (max-width: 960px) { .sm-ch-grid { grid-template-columns: 1fr; } }

/* ---------- 6. Проверка (тёмная) ---------- */
.sm-guard { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.sm-guard-text { display: grid; gap: 24px; }
.sm-guard-text .checks li { font-size: 15.5px; }
@media (max-width: 1024px) { .sm-guard { grid-template-columns: 1fr; } }

/* ---------- 7. Что остаётся за вами ---------- */
.sm-yours { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.sm-yours-text { display: grid; gap: 24px; }
.sm-yours-text .checks li { font-size: 15.5px; }
.sm-review { display: grid; gap: 12px; }
.sm-review-title { font-family: var(--font-display); font-size: clamp(19px, 1.8vw, 23px); line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; color: var(--ink-900); }
.sm-review-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sm-review .btn-row { margin-top: 6px; }
@media (max-width: 1024px) { .sm-yours { grid-template-columns: 1fr; } }

/* Скрытая панель переключателя — той же раскладки, что видимая: высота блока не прыгает */
.switch-stack > .sm-prev[hidden],
.switch-stack > .sm-ch-kv[hidden] { display: grid; }