/* Support page specific styles */
.support-hero {
  position: relative;
  padding: var(--space-16) 0 var(--space-12);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 60%);
  border-bottom: 1px solid var(--color-border);
}
.hero-inner { display: grid; gap: var(--space-8); align-items: center; grid-template-columns: 1fr; }
.hero-content h1 { margin-bottom: var(--space-3); }
.hero-actions { display: inline-flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.hero-media { max-width: 520px; margin-left: auto; }
.hero-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
@media (min-width: 960px) { .hero-inner { grid-template-columns: 1.1fr 0.9fr; } }

.section { padding: var(--space-14) 0; }
.cards-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* FAQ */
.faq-list details { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); background: var(--color-surface); }
.faq-list summary { cursor: pointer; font-weight: 700; outline: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list details[open] { box-shadow: var(--shadow-sm); }
.faq-list details > div { margin-top: var(--space-3); color: var(--color-text); }

/* Testimonials */
.testimonial .testimonial-quote { font-size: var(--text-lg); }
.testimonial footer { color: var(--color-muted); margin-top: var(--space-3); }

/* Resources figure */
.resource-figure { margin-top: var(--space-6); }
.resource-figure img { border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }

/* Team */
.team-figure { margin: var(--space-6) 0; }
.team-figure img { border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.team-list .card h3 { margin-bottom: var(--space-2); }

/* Feedback form */
.form-grid { grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.consent-row { margin-top: var(--space-3); }
@media (min-width: 720px) { .form-grid { grid-template-columns: 1fr 1fr; } }