.section-header {
  max-width: 720px;
  margin: 0 auto var(--space-6);
  text-align: left;
}

.section-intro {
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

.hero-guides-layout {
  align-items: center;
  margin-top: var(--space-6);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.hero-meta {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.hero-guides-visual {
  display: none;
}

.hero-guides-card {
  height: 100%;
}

.hero-guides-card-title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.hero-guides-list {
  list-style: disc;
  margin-left: 1.25rem;
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
}

.guides-featured {
  gap: var(--space-6);
}

.guides-featured-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.guides-featured-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.guides-featured-media img {
  width: 100%;
  height: auto;
}

.guides-featured-aside {
  display: flex;
  align-items: stretch;
}

.guides-grid {
  margin-top: var(--space-4);
}

.guides-criteria,
.guides-reviews,
.guides-tutorial,
.guides-rating,
.guides-tips,
.guides-cases {
  margin-top: var(--space-4);
}

.guides-tutorial-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.guides-tutorial-aside {
  display: flex;
  align-items: stretch;
}

.faq-list {
  margin-top: var(--space-4);
}

.faq-item__question {
  width: 100%;
  text-align: left;
  background-color: transparent;
  font-size: var(--text-sm);
}

.faq-toggle {
  font-size: var(--text-lg);
  color: var(--color-primary);
}

.faq-item__answer {
  display: none;
}

.faq-item__answer[aria-hidden="false"] {
  display: block;
}

.guides-cta {
  padding-top: var(--space-8);
  padding-bottom: var(--space-12);
}

.guides-cta-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

.guides-cta-meta {
  max-width: 420px;
  font-size: var(--text-sm);
}

@media (min-width: 768px) {
  .hero-guides-visual {
    display: block;
  }

  .guides-cta-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .guides-featured-main {
    padding: var(--space-6);
  }

  .guides-cases .card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
}