.seo-guide {
  --seo-ink: #102a43;
  --seo-muted: #52677b;
  --seo-line: #d8e5ef;
  --seo-soft: #f4f9fc;
  width: min(100%, 1120px);
  margin: clamp(2.5rem, 6vw, 5rem) auto;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  color: var(--seo-ink);
  background: #fff;
  border: 1px solid var(--seo-line);
  border-radius: 24px;
  box-shadow: 0 20px 55px rgba(15, 42, 67, .08);
}

.seo-guide *,
.seo-guide *::before,
.seo-guide *::after { box-sizing: border-box; min-width: 0; }
.seo-guide__intro { max-width: 820px; }
.seo-guide__eyebrow {
  display: inline-flex;
  margin-bottom: .75rem;
  padding: .42rem .72rem;
  border-radius: 999px;
  background: #e7f5ff;
  color: #075985;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.seo-guide h2 { margin: 0 0 .8rem; font-size: clamp(1.65rem, 4vw, 2.45rem); line-height: 1.12; }
.seo-guide h3 { margin: 0 0 .55rem; font-size: 1.12rem; line-height: 1.3; }
.seo-guide p { line-height: 1.75; }
.seo-guide__intro > p { color: var(--seo-muted); font-size: 1.03rem; }

.seo-guide__steps,
.seo-guide__source-grid,
.seo-guide__related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1rem;
}
.seo-guide__steps { margin: 1.75rem 0; }
.seo-guide__step {
  padding: 1.1rem;
  border: 1px solid var(--seo-line);
  border-radius: 16px;
  background: var(--seo-soft);
}
.seo-guide__step p { margin: 0; color: var(--seo-muted); }
.seo-guide__faq,
.seo-guide__sources,
.seo-guide__related { margin-top: 2rem; }
.seo-guide__faq-list { display: grid; gap: .7rem; }
.seo-guide__faq details { border: 1px solid var(--seo-line); border-radius: 14px; background: #fff; }
.seo-guide__faq summary {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: .85rem 1rem;
  cursor: pointer;
  font-weight: 750;
  line-height: 1.4;
  touch-action: manipulation;
}
.seo-guide__faq details p { margin: 0; padding: 0 1rem 1rem; color: var(--seo-muted); }
.seo-guide__source-grid a,
.seo-guide__related-grid a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 72px;
  padding: .9rem 1rem;
  border: 1px solid var(--seo-line);
  border-radius: 14px;
  color: #075985;
  text-decoration: none;
  overflow-wrap: anywhere;
  touch-action: manipulation;
}
.seo-guide__source-grid a:hover,
.seo-guide__source-grid a:focus-visible,
.seo-guide__related-grid a:hover,
.seo-guide__related-grid a:focus-visible {
  border-color: #0b78b7;
  box-shadow: 0 0 0 3px rgba(11, 120, 183, .16);
  outline: none;
}
.seo-guide__source-grid span,
.seo-guide__related-grid span { margin-top: .25rem; color: var(--seo-muted); font-size: .9rem; line-height: 1.45; }
.seo-guide__editorial { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--seo-line); color: var(--seo-muted); font-size: .88rem; }

@media (max-width: 720px) {
  .seo-guide { width: calc(100% - 1rem); margin: 2rem .5rem; padding: 1.1rem; border-radius: 18px; }
  .seo-guide__steps,
  .seo-guide__source-grid,
  .seo-guide__related-grid { grid-template-columns: 1fr; }
  .seo-guide__source-grid a,
  .seo-guide__related-grid a { width: 100%; min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .seo-guide *, .seo-guide *::before, .seo-guide *::after { scroll-behavior: auto !important; transition: none !important; }
}