/* Content pages — guides, hubs, listicles, compare, pSEO, glossary */

.content-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.article-header {
  margin-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding-bottom: 1.5rem;
}

.article-header .eyebrow {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted, #888);
  margin-bottom: .5rem;
}

.article-header h1 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.2;
  margin: 0 0 .75rem;
}

.article-header .lead {
  font-size: 1.1rem;
  color: var(--text-muted, #555);
  margin: 0;
}

/* Prose */
.prose h2 { font-size: 1.35rem; margin: 2.5rem 0 .75rem; }
.prose h3 { font-size: 1.1rem; margin: 1.75rem 0 .5rem; }
.prose p  { line-height: 1.7; margin: 0 0 1rem; }
.prose ol, .prose ul { padding-left: 1.5rem; margin: 0 0 1rem; }
.prose li { line-height: 1.7; margin-bottom: .4rem; }

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: .9rem;
}
.prose th, .prose td {
  text-align: left;
  padding: .6rem .8rem;
  border: 1px solid rgba(255,255,255,.14);
}
.prose th { background: rgba(255,255,255,.06); font-weight: 700; }
.prose tr:nth-child(even) td { background: rgba(255,255,255,.03); }

/* Related sidebar */
.related {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.related h2 { font-size: 1.1rem; margin: 0 0 1rem; }
.related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.related li a {
  display: inline-block;
  padding: .35rem .85rem;
  background: rgba(255,255,255,.07);
  border-radius: 100px;
  font-size: .85rem;
  text-decoration: none;
  text-transform: capitalize;
  color: inherit;
}
.related li a:hover { background: rgba(255,255,255,.13); }

/* Hub spoke list */
.spokes-list { flex-direction: column; gap: .4rem; }
.spokes-list li a { border-radius: 8px; width: 100%; }