/* Стили контентных (SEO) страниц. Использует токены темы из redesign.css. */
.seo-shell { max-width: 820px; }
.seo-article { padding: 8px 0 36px; }
.seo-article .eyebrow { margin-bottom: 14px; }

.seo-article h1 {
  margin: 0 0 16px;
  font-size: clamp(30px, 5.5vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.seo-lede {
  max-width: 680px;
  margin: 0 0 30px;
  color: var(--ink-soft);
  font-size: clamp(17px, 2.4vw, 20px);
  line-height: 1.55;
}

.seo-article h2 {
  margin: 40px 0 14px;
  font-size: clamp(22px, 3.4vw, 28px);
  line-height: 1.2;
}

.seo-article h3 { margin: 26px 0 10px; font-size: 19px; }
.seo-article p { margin: 0 0 16px; color: var(--ink); line-height: 1.65; font-size: 16px; }
.seo-article p a, .seo-article li a { color: var(--accent); text-underline-offset: 3px; }
.seo-article ul, .seo-article ol { margin: 0 0 18px; padding-left: 22px; line-height: 1.65; }
.seo-article li { margin-bottom: 8px; color: var(--ink); }
.seo-article strong { color: var(--ink); }

.seo-card {
  margin: 22px 0;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: var(--shadow-card);
}

.seo-steps { counter-reset: step; padding-left: 0; list-style: none; }
.seo-steps > li {
  position: relative;
  margin-bottom: 14px;
  padding-left: 44px;
  min-height: 30px;
}
.seo-steps > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink, #052a20);
  font-weight: 900;
  font-size: 14px;
}

.seo-table-wrap { overflow-x: auto; margin: 22px 0; }
.seo-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
.seo-table th, .seo-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.seo-table th { color: var(--ink-soft); font-weight: 800; }
.seo-table td { color: var(--ink); }

.seo-faq { margin: 8px 0 0; }
.seo-faq details { border-top: 1px solid var(--border); }
.seo-faq summary {
  cursor: pointer;
  padding: 15px 2px;
  font-weight: 800;
  list-style: none;
  color: var(--ink);
}
.seo-faq summary::-webkit-details-marker { display: none; }
.seo-faq details[open] summary { color: var(--accent); }
.seo-faq details > p { padding: 0 2px 15px; color: var(--ink-soft); }

.seo-cta {
  margin: 42px 0;
  padding: 28px 24px;
  border: 1px solid var(--accent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  text-align: center;
}
.seo-cta h2 { margin: 0 0 8px; }
.seo-cta p { margin: 0 0 18px; color: var(--ink-soft); }
.seo-cta .btn { min-width: 240px; }

.seo-related { margin: 46px 0 0; }
.seo-related h2 { font-size: 20px; margin-bottom: 14px; }
.seo-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.seo-related a {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  transition: border-color .18s ease;
}
.seo-related a:hover { border-color: var(--accent); }
.seo-updated { margin-top: 32px; color: var(--ink-soft); font-size: 13px; }