/* Guide page specific styles - minimal, leveraging base.css */
.guide .page-hero {
  padding: var(--space-16) 0 var(--space-12);
  background: radial-gradient(1200px 600px at 20% 0%, rgba(255,184,77,0.08), transparent),
              radial-gradient(1200px 600px at 80% 100%, rgba(77,159,255,0.06), transparent);
}
.guide .page-hero p { max-width: 60ch; }
.guide .hero-actions { margin-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Breadcrumbs */
.breadcrumbs { border-bottom: 1px solid var(--color-neutral-700); background: var(--color-background-elevated); }
.breadcrumbs-list { display: flex; gap: var(--space-2); padding: var(--space-3) 0; color: var(--color-text-muted); }
.breadcrumbs-list li + li::before { content: '\203A'; margin: 0 var(--space-2); color: var(--color-neutral-500); }
.breadcrumbs a { color: var(--color-accent-light); }

/* Sections */
.section { padding: var(--space-12) 0; }

/* Lists */
.list-bullets { display: grid; gap: var(--space-3); }
.list-bullets li { position: relative; padding-left: 1.25rem; color: var(--color-text-secondary); }
.list-bullets li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); position: absolute; left: 0; top: 0.7em; box-shadow: var(--shadow-glow); }

/* Grid spacing helper */
.gap-6 { gap: var(--space-6); }

/* FAQ */
.section-faq .faq-controls { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); }
.section-faq details { background: var(--color-background-elevated); border: 1px solid var(--color-neutral-700); border-radius: var(--radius-base); padding: var(--space-4); margin-bottom: var(--space-3); box-shadow: var(--shadow-sm); }
.section-faq summary { font-family: var(--font-heading); font-weight: var(--font-weight-semibold); cursor: pointer; }
.section-faq details[open] { border-color: var(--color-primary); box-shadow: var(--shadow-base), var(--shadow-glow); }
.section-faq details p { margin-top: var(--space-3); }

/* Final CTA */
.section-cta-final .card-body p { margin-left: auto; margin-right: auto; max-width: 60ch; }

@media (max-width: 640px) {
  .guide .hero-actions { flex-direction: column; align-items: flex-start; }
}