/* Статья «Этапы SEO» — только уникальные блоки (вкладки, таблица, цены) */



.sd-seo-article { max-width: 100%; }



.sd-seo-article .sd-hero--left {

  text-align: left;

  padding: 0 0 1.5rem;

  animation: none;

}



.sd-seo-article .sd-lead {

  font-size: 1.1rem;

  color: var(--sd-text-muted);

  max-width: 52rem;

  margin-left: 0;

}



.sd-seo-tabs {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0;

  margin: 2rem 0 0;

  border: 1px solid var(--sd-border);

  border-radius: var(--sd-radius) var(--sd-radius) 0 0;

  overflow: hidden;

}



.sd-seo-tab {

  padding: 1rem 1.25rem;

  border: none;

  background: var(--sd-bg-elevated);

  color: var(--sd-text-muted);

  font-weight: 700;

  font-size: 1rem;

  cursor: pointer;

  transition: background 0.2s, color 0.2s, box-shadow 0.2s;

}



.sd-seo-tab:not(:last-child) {

  border-right: 1px solid var(--sd-border);

}



.sd-seo-tab.is-active {

  color: var(--sd-text);

  background: var(--sd-nav-hover-bg);

  box-shadow: inset 0 -2px 0 var(--sd-accent);

}



.sd-seo-tabpanels {

  border: 1px solid var(--sd-border);

  border-top: none;

  border-radius: 0 0 var(--sd-radius) var(--sd-radius);

  background: var(--sd-bg-elevated);

  padding: clamp(1.25rem, 3vw, 2rem);

  color: var(--sd-text);

}



.sd-seo-tabpanel[hidden] { display: none; }



.sd-seo-tabpanel h3 {

  margin-top: 0;

  color: var(--sd-text);

}



.sd-seo-compare {

  width: 100%;

  border-collapse: collapse;

  margin: 1.5rem 0;

  font-size: 0.9rem;

  color: var(--sd-text);

}



.sd-seo-compare th,

.sd-seo-compare td {

  padding: 0.75rem 1rem;

  border: 1px solid var(--sd-border);

  text-align: left;

  vertical-align: top;

}



.sd-seo-compare th {

  background: var(--sd-nav-hover-bg);

  color: var(--sd-text);

}



.sd-seo-compare caption {

  color: var(--sd-text-muted);

}



.sd-seo-steps-list {

  counter-reset: seostep;

  list-style: none;

  padding: 0;

  margin: 1.5rem 0;

}



.sd-seo-steps-list li {

  counter-increment: seostep;

  position: relative;

  padding: 0 0 1.25rem 2.75rem;

  border-left: 2px solid var(--sd-border);

  margin-left: 0.75rem;

  color: var(--sd-text);

}



.sd-seo-steps-list li::before {

  content: counter(seostep);

  position: absolute;

  left: -0.85rem;

  top: 0;

  width: 1.75rem;

  height: 1.75rem;

  border-radius: 50%;

  background: var(--sd-accent);

  color: #fff;

  font-weight: 800;

  font-size: 0.8rem;

  display: grid;

  place-items: center;

}



.sd-seo-price-box {

  margin: 2rem 0;

  padding: 1.25rem 1.5rem;

  border-radius: var(--sd-radius);

  border: 1px solid var(--sd-border);

  background: var(--sd-nav-hover-bg);

  color: var(--sd-text);

}



.sd-seo-price-box strong {

  color: var(--sd-text);

  font-size: 1.25rem;

}



@media (max-width: 540px) {

  .sd-seo-tabs { grid-template-columns: 1fr; }

  .sd-seo-tab:not(:last-child) { border-right: none; border-bottom: 1px solid var(--sd-border); }

}