/* ============================================================
   Support page — layout and component styles
   ============================================================ */

.support-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    max-width: 720px;
    margin: 0 auto;
}

.contact-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--cyan-a10);
    color: var(--accent-on-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

/* Contact cards on dark background */
.contact-card {
    background: var(--white-a04);
}

/* Doc topic links inside hero panel */
.doc-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.doc-link:hover {
    background: var(--white-a04);
}

/* FAQ */
.faq-item { border-bottom: 1px solid var(--border); }

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) 0;
    cursor: pointer;
    font-weight: var(--font-semibold);
    color: var(--light-text);
    gap: var(--space-4);
    list-style: none;
}

.faq-question:hover { color: var(--accent); }

.faq-chevron {
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.faq-item.open .faq-chevron { transform: rotate(180deg); }

.faq-answer {
    display: none;
    padding: 0 0 var(--space-5);
    font-size: var(--text-sm);
    color: var(--light-text-sub);
    line-height: var(--leading-relaxed);
    max-width: 680px;
}

.faq-item.open .faq-answer { display: block; }

@media (max-width: 1024px) {
    .support-hero-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .contact-grid { grid-template-columns: 1fr; }
}