/* Contact Us page specific styles */
.section { padding-block: var(--space-16); }
.section--intro { padding-block: var(--space-12); }
.muted { color: var(--gray-700); font-size: var(--fs-sm); }

.cards-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 720px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards-grid { grid-template-columns: repeat(4, 1fr); } }

.support-list { margin-top: var(--space-4); }
.support-list li + li { margin-top: var(--space-3); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* Forms */
.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.form-grid--newsletter { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid--newsletter { grid-template-columns: 2fr 1fr; align-items: end; }
}
.form-field--full { grid-column: 1 / -1; }
.checkbox { display: flex; gap: var(--space-3); align-items: flex-start; }
.form-status { margin-top: var(--space-4); min-height: 1.5em; }
.form-status.success { color: var(--color-success); }
.form-status.error { color: var(--color-danger); }

/* FAQ */
.faq details { border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-4) var(--space-6); box-shadow: var(--shadow-sm); }
.faq details + details { margin-top: var(--space-4); }
.faq summary { cursor: pointer; font-weight: 600; }
.faq__panel { margin-top: var(--space-3); color: var(--gray-900); }

/* Social */
.social-list { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-4); }
@media (min-width: 480px) { .social-list { grid-template-columns: repeat(3, 1fr); } }
.social-link { display: inline-flex; align-items: center; gap: 10px; padding: 0.75rem 1rem; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.social-link:hover { box-shadow: var(--shadow-md); }

/* Quotes */
.quotes { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quotes blockquote p { font-style: italic; }
.quotes footer { margin-top: var(--space-3); color: var(--gray-700); font-size: var(--fs-sm); }