body.synergies-page main {
  scroll-margin-top: 4.25rem;
}

.hero--synergies {
  position: relative;
}

.hero-layout {
  align-items: center;
  gap: var(--space-32);
}

.hero-copy .hero-subtitle {
  max-width: 38rem;
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

.hero-visual {
  display: flex;
  justify-content: flex-end;
}

.hero-visual-orbit {
  max-width: 26rem;
}

.hero-visual-title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-12);
}

.hero-visual-text {
  margin-bottom: var(--space-16);
}

.hero-visual-list {
  list-style: none;
  display: grid;
  gap: var(--space-8);
  font-size: var(--font-size-sm);
}

.dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  display: inline-block;
  margin-right: var(--space-8);
}

.dot--crimson {
  background: var(--color-primary);
  box-shadow: var(--shadow-neon-primary);
}

.dot--blue {
  background: var(--color-accent-blue);
  box-shadow: var(--shadow-neon-blue);
}

.dot--violet {
  background: #a855f7;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.8);
}

.section-header {
  margin-bottom: var(--space-24);
}

.section-header p {
  max-width: 40rem;
}

.section-intro .intro-layout {
  align-items: stretch;
  gap: var(--space-32);
}

.intro-highlight {
  align-self: stretch;
}

.intro-list {
  list-style: none;
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
  font-size: var(--font-size-sm);
}

.intro-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

.checklist {
  list-style: none;
  display: grid;
  gap: var(--space-8);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-16);
}

.numbered-list {
  list-style: decimal;
  padding-left: 1.25rem;
  display: grid;
  gap: var(--space-8);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-16);
}

.elemental-layout {
  gap: var(--space-32);
  align-items: flex-start;
}

.elemental-card .affinity-list {
  list-style: none;
  display: grid;
  gap: var(--space-8);
  font-size: var(--font-size-sm);
}

.elemental-visual figcaption,
.tactical-visual figcaption,
.charts-visual figcaption {
  margin-top: var(--space-12);
  font-size: var(--font-size-xs);
}

.archetype-grid {
  margin-top: var(--space-24);
}

.archetype-card .archetype-points {
  list-style: none;
  display: grid;
  gap: var(--space-8);
  font-size: var(--font-size-sm);
}

.archetype-footer {
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  padding-top: var(--space-24);
}

.tactical-layout {
  gap: var(--space-32);
  align-items: flex-start;
}

.combo-list {
  list-style: none;
  display: grid;
  gap: var(--space-8);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-16);
}

.counterplay-layout {
  gap: var(--space-32);
  align-items: stretch;
}

.charts-layout {
  gap: var(--space-32);
  align-items: stretch;
}

.charts-footer {
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  padding-top: var(--space-24);
}

.key-heroes-grid {
  margin-top: var(--space-24);
}

.key-hero-card .key-hero-points {
  list-style: none;
  display: grid;
  gap: var(--space-8);
  font-size: var(--font-size-sm);
}

.case-study-card {
  margin-top: var(--space-24);
}

.case-study-layout {
  gap: var(--space-32);
}

.case-subheading {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-12);
}

.case-list {
  list-style: none;
  display: grid;
  gap: var(--space-8);
  font-size: var(--font-size-sm);
}

.pitfalls-layout {
  gap: var(--space-32);
  align-items: stretch;
}

.pitfalls-side {
  max-width: 32rem;
}

.planner-layout {
  gap: var(--space-32);
  align-items: stretch;
}

.planner-list,
.planner-steps {
  list-style: none;
  display: grid;
  gap: var(--space-8);
  font-size: var(--font-size-sm);
}

.planner-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-top: var(--space-16);
}

.crosslinks-inner {
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  padding-top: var(--space-24);
  gap: var(--space-24);
}

.crosslinks-heading {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-12);
}

.crosslinks-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

.inline-link {
  text-decoration: underline;
  text-decoration-color: rgba(45, 212, 255, 0.6);
}

@media (max-width: 1024px) {
  .hero-visual {
    justify-content: flex-start;
  }

  .hero-visual-orbit {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .hero {
    padding-top: var(--space-64);
    padding-bottom: var(--space-48);
  }

  .hero-cta-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .archetype-footer-stack,
  .charts-footer-stack,
  .crosslinks-stack {
    flex-direction: column;
    align-items: flex-start;
  }

  .pitfalls-side {
    max-width: 100%;
  }
}