/* ---------- 1. Первый экран ---------- */
.so-speed {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: var(--shadow-sm);
}
.so-speed { position: relative; }
.so-founder {
  position: absolute;
  top: -34px;
  right: clamp(16px, 3vw, 36px);
  z-index: 2;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas: "photo quote" "photo cap";
  column-gap: 14px;
  row-gap: 6px;
  align-items: center;
  width: min(360px, 42%);
  margin: 0;
  padding: 14px 18px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  transform: rotate(1.5deg);
  animation: so-float 6s var(--ease-in-out, ease-in-out) infinite;
}
.so-founder img { grid-area: photo; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px color-mix(in srgb, var(--violet) 35%, transparent); }
.so-founder blockquote { grid-area: quote; margin: 0; font-family: var(--font-display); font-size: 15px; line-height: 1.3; font-weight: 550; color: var(--ink-900); }
.so-founder figcaption { grid-area: cap; display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 12.5px; color: var(--ink-500); }
.so-founder figcaption b { font-weight: 600; color: var(--ink-700); }
@keyframes so-float { 0%, 100% { transform: rotate(1.5deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .so-founder { animation: none; } }
.so-speed-title { padding-right: min(380px, 44%); }
@media (max-width: 960px) {
  .so-founder { position: static; width: auto; transform: none; animation: none; order: 2; }
  .so-speed-title { padding-right: 0; }
}
.so-speed-title { margin: 0; font-family: var(--font-display); font-size: clamp(20px, 2.1vw, 30px); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-900); }
.so-speed-rows { display: grid; gap: 12px; }
.so-speed-row { display: grid; grid-template-columns: 136px minmax(0, 1fr) 110px; align-items: center; gap: 16px; }
.so-speed-who { font-size: 14px; font-weight: 550; color: var(--ink-700); }
.so-speed-row.is-prb .so-speed-who { color: var(--violet-ink); }
.so-speed-time { justify-self: end; font-family: var(--font-display); font-size: clamp(18px, 1.8vw, 24px); font-weight: 650; letter-spacing: -0.02em; color: var(--ink-400); white-space: nowrap; }
.so-speed-row.is-prb .so-speed-time { color: var(--violet-ink); }
.so-speed-track { display: flex; gap: 3px; height: 34px; }
.so-speed-track.is-agency i { display: flex; align-items: center; width: var(--w); min-width: 0; padding: 0 10px; border-radius: 7px; background: var(--surface-3); font-style: normal; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-speed-track.is-prb { align-items: center; gap: 12px; }
.so-speed-track.is-prb i { width: 34px; height: 34px; flex: none; border-radius: 7px; background: var(--violet) 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 / 16px no-repeat; box-shadow: 0 6px 18px -6px var(--violet); }
.so-speed-track.is-prb span { font-family: var(--font-mono); font-size: 12px; color: var(--violet-ink); }
.so-speed-note { margin: 0; font-size: 13.5px; color: var(--ink-500); }
@media (max-width: 760px) {
  .so-speed-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .so-speed-track { grid-column: 1 / -1; grid-row: 2; }
  .so-speed-track.is-agency i { padding: 0 6px; font-size: 10px; }
}
@media (max-width: 480px) { .so-speed-track.is-agency i { font-size: 0; } }

.so-metrics .metric-value { white-space: nowrap; }
.so-issues { display: grid; }
.so-issue {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-900);
}
.so-issue:first-child { border-top: 0; padding-top: 0; }
.so-issue .chip { justify-self: start; }
@media (max-width: 560px) {
  .so-issue { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- 2. Боль ---------- */
.so-pain { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.so-pain-list { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: pain; }
.so-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; }
.so-pain-list li:last-child { border-bottom: 1px solid var(--line); }
.so-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; }
.so-pain-list b { font-size: 16px; font-weight: 550; color: var(--ink-900); }
.so-pain-list span { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--ink-500); }

.so-sheet {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  padding: 10px;
  box-shadow: var(--shadow-md);
  transform: rotate(-1deg);
}
.so-sheet-bar { display: flex; justify-content: space-between; gap: 12px; padding: 6px 8px 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-500); }
.so-sheet-file { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-sheet-date { flex: none; color: var(--st-bad); }
.so-sheet-grid { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.so-sheet-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1.6fr) minmax(0, 0.7fr) minmax(0, 0.9fr);
  font-size: 13.5px;
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}
.so-sheet-row > span { padding: 10px 12px; border-right: 1px solid var(--line); border-top: 1px solid var(--line); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-sheet-row > span:last-child { border-right: 0; }
.so-sheet-row > span:first-child { font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); background: var(--surface-2); text-align: center; }
.so-sheet-head > span { border-top: 0; background: var(--surface-2); font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-400); }
.so-sheet-row.is-dup > span:nth-child(2) { background: color-mix(in srgb, var(--st-bad) 10%, transparent); }
.so-cell-q { color: var(--st-warn); font-weight: 600; }
.so-sheet-notes { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 8px 4px; }
@media (max-width: 1024px) { .so-pain { grid-template-columns: 1fr; } .so-sheet { transform: none; } }
@media (max-width: 560px) {
  .so-sheet-row { grid-template-columns: 24px minmax(0, 1fr) 62px; font-size: 12.5px; }
  .so-sheet-row > span { padding: 9px 8px; }
  .so-sheet-row > span:first-child { padding: 9px 0; }
  .so-sheet-bar { flex-direction: column; gap: 4px; }
  .so-sheet-row > span:nth-child(4) { display: none; }
  .so-sheet-row > span:nth-child(3) { border-right: 0; }
}

/* ---------- 3. Возможности ---------- */
.so-audit .mt-row { --mt-cols: minmax(0, 1fr) 64px 92px; }
.so-audit .mt-row > :last-child { justify-self: end; }
.so-meta .mt-row { --mt-cols: minmax(0, 1fr) minmax(0, 1fr) 104px; }
.so-meta .mt-row > :nth-child(2) { justify-self: start; }
.so-meta .mt-name { font-family: var(--font-mono); font-size: 12px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
@media (max-width: 560px) {
  .so-audit .mt-row { --mt-cols: minmax(0, 1fr) 40px 88px; }
  .so-meta .mt-row { --mt-cols: minmax(0, 1fr) auto; }
  .so-meta .mt-row > :nth-child(2) { display: none; }
}

.so-cluster {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.so-cluster-head { display: grid; gap: 4px; margin-bottom: 4px; }
.so-cluster-head b { font-size: 15px; font-weight: 550; color: var(--ink-900); }
.so-q { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13px; color: var(--ink-700); }
.so-q span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-q i { flex: none; font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); }
.so-cluster-page,
.so-cluster-warn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--line-strong); font-family: var(--font-mono); font-size: 12px; color: var(--ink-700); }
.so-cluster-warn { justify-content: flex-start; border-top: 0; padding-top: 0; font-family: var(--font-body); font-size: 13px; color: var(--ink-500); }

.so-pos .spark { height: 72px; }
.so-pos .spark-line { stroke: var(--st-bad); }
.so-pos-axis { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); }

.so-content { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.so-brief { display: grid; gap: 8px; }
.so-brief > b { font-size: 15px; font-weight: 550; color: var(--ink-900); }
.so-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.so-steps li {
  position: relative;
  padding: 0 0 18px 28px;
  font-size: 14px;
  color: var(--ink-500);
}
.so-steps 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);
}
.so-steps li::after {
  content: "";
  position: absolute;
  left: 7.5px;
  top: 21px;
  bottom: 2px;
  width: 1px;
  background: var(--line-strong);
}
.so-steps li:last-child { padding-bottom: 0; }
.so-steps li:last-child::after { display: none; }
.so-steps li.is-done { color: var(--ink-900); }
.so-steps 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; }
.so-steps li.is-now { color: var(--ink-900); font-weight: 550; }
.so-steps li.is-now::before { border-color: var(--violet); box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 15%, transparent); }
@media (max-width: 760px) { .so-content { grid-template-columns: 1fr; } }

.so-schema { display: grid; gap: 14px; }
.so-code {
  margin: 0;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--night);
  color: var(--night-muted);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
}
.so-k { color: #b394ff; }
.so-s { color: #7fd2ff; }
.so-m { padding: 1px 6px; border-radius: 5px; background: rgba(214, 165, 78, 0.18); color: #d6a54e; }

/* ---------- 4. Сниппет до/после ---------- */
.so-snip .segmented { margin-bottom: 20px; }
.so-snip-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.so-serp {
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-window);
}
.so-serp-query {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  margin-bottom: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  font-size: 15px;
  color: var(--ink-900);
}
.so-serp-query svg { width: 16px; height: 16px; color: var(--ink-400); flex: none; }
.so-serp-item { display: grid; gap: 6px; }
.so-serp-url { font-size: 13px; color: var(--st-ok); }
.so-serp-title { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.3; font-weight: 500; color: var(--sky-ink); }
.so-serp-desc { font-size: 14.5px; line-height: 1.55; color: var(--ink-700); }
.so-serp-rich { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; font-size: 13px; color: var(--ink-500); }
.so-serp-rich span + span::before { content: "·"; margin-right: 14px; color: var(--ink-300); }
.so-serp-star { color: var(--st-warn); }
.so-serp-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.so-serp-links span { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line-strong); font-size: 13px; color: var(--sky-ink); }
.so-snip-kv { padding: 18px 20px; }
@media (max-width: 960px) { .so-snip-grid { grid-template-columns: 1fr; } }

/* ---------- 5. Нейросети ---------- */
.so-geo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: stretch; }
.so-geo .card { display: flex; flex-direction: column; gap: 14px; }
.so-geo .card-text { margin-top: 0; }
.so-bots { margin-top: auto; }
.so-bots .mt-row { --mt-cols: minmax(0, 1fr) auto; }
.so-geo-log { margin-top: auto; }
@media (max-width: 960px) { .so-geo { grid-template-columns: 1fr; } }

/* ---------- 6. Карты, ссылки, структура ---------- */
.so-nap .mt-row { --mt-cols: minmax(0, 1.3fr) 80px 80px 80px minmax(0, 1fr); }
.so-nap .mt-row > :not(:first-child) { justify-self: center; text-align: center; }
.so-nap .mt-row > :last-child { justify-self: end; text-align: right; }
.so-ok { color: var(--st-ok); font-weight: 600; }
@media (max-width: 560px) {
  .so-nap .mt-row { --mt-cols: minmax(0, 1fr) 54px 54px 60px; gap: 6px; }
  .so-nap .mt-head { font-size: 9.5px; letter-spacing: 0.02em; }
  .so-nap .mt-name i { display: none; }
}

.so-struct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.so-struct-text { display: grid; gap: 14px; justify-items: start; }
.so-struct-text .card-title,
.so-struct-text .card-text { margin: 0; }
.so-tree { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.so-branch { display: grid; gap: 8px; padding-left: 18px; border-left: 1px solid var(--line-strong); margin-left: 10px; }
.so-node {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-900);
}
.so-node.is-root { justify-self: start; font-weight: 600; }
.so-node.is-sub { margin-left: 18px; }
.so-node.is-gap { border-style: dashed; background: transparent; font-family: var(--font-body); font-size: 13px; color: var(--ink-500); }
.so-node-n { color: var(--ink-400); font-size: 11.5px; }
@media (max-width: 960px) { .so-struct { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .so-node.is-sub { margin-left: 0; } }

/* ---------- 8. Что остаётся за вами ---------- */
.so-yours { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.so-yours-text { display: grid; gap: 24px; }
.so-yours-text .checks li { font-size: 15.5px; }
.so-approve { display: grid; }
.so-approve-row { display: grid; gap: 8px; padding: 16px 0; border-top: 1px solid var(--line); }
.so-approve-row:first-child { border-top: 0; padding-top: 0; }
.so-approve-row:last-child { padding-bottom: 0; }
.so-approve-old { font-size: 13.5px; color: var(--ink-400); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--st-bad) 60%, transparent); }
.so-approve-new { font-size: 14.5px; line-height: 1.45; color: var(--ink-900); }
.so-approve-row .btn-row { margin-top: 4px; }
@media (max-width: 1024px) { .so-yours { grid-template-columns: 1fr; } }

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