/* Общие стили SEO-лендингов AccountServer */
.seo-page .breadcrumb {
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: 20px;
}
.seo-page .breadcrumb a { color: var(--accent); }
.seo-page h2 { font-size: 1.35rem; margin: 28px 0 12px; }
.seo-page h3 { font-size: 1.05rem; margin: 16px 0 8px; }
.seo-page p, .seo-page li { font-size: .95rem; color: var(--muted); max-width: 70ch; }
.seo-page ul, .seo-page ol { margin: 12px 0 12px 1.25rem; }
.seo-page .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.seo-page .compare-table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 16px 0; min-width: 280px; }
.seo-page .compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 16px 0;
}
.seo-page .compare-table th, .seo-page .compare-table td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top;
}
.seo-page .compare-table thead th { color: var(--muted); font-size: .78rem; text-transform: uppercase; }
.seo-page .win { color: var(--success); font-weight: 600; }
.seo-page .note-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin: 16px 0;
}
.seo-page .code-sample, .seo-page pre.code-block {
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; font-size: .82rem; overflow-x: auto; font-family: var(--font-mono, monospace);
  color: var(--text); margin: 10px 0;
}
.seo-page .code-caption { font-size: .85rem; color: var(--muted); margin-top: 4px; }
.seo-page .mcp-path-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px; margin: 20px 0 28px;
}
.seo-page .mcp-path-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
}
.seo-page .mcp-path-card h3 { margin: 0; font-size: 1.05rem; color: var(--text); }
.seo-page .mcp-path-card .path-badge {
  display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent); font-weight: 600;
}
.seo-page .mcp-endpoint {
  font-family: var(--font-mono, monospace); font-size: .82rem; word-break: break-all;
  color: var(--text); background: var(--surface2); padding: 8px 10px; border-radius: 6px;
  border: 1px solid var(--border);
}
.seo-page .mcp-steps { list-style: none; margin: 16px 0; padding: 0; counter-reset: mcpstep; }
.seo-page .mcp-steps li {
  counter-increment: mcpstep; padding: 6px 0 6px 32px; position: relative; color: var(--muted); font-size: .92rem;
}
.seo-page .mcp-steps li::before {
  content: counter(mcpstep); position: absolute; left: 0; top: 4px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--surface2);
  border: 1px solid var(--border); font-size: .72rem; display: flex; align-items: center; justify-content: center;
  color: var(--text);
}
.seo-page .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin: 16px 0; }
.seo-page .cycle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .88rem; }
.seo-page .cycle-node { padding: 6px 10px; border-radius: 6px; background: var(--surface2); border: 1px solid var(--border); }
.seo-page .cycle-node.accent { border-color: var(--accent); color: var(--accent); }
.seo-page .cycle-arrow { color: var(--muted); }