/*
 * Support pages (hub, per-app support, account deletion).
 * Per-app pages also load /css/apps/<slug>.css so accents match the app, and
 * /css/app-page.css for the shared FAQ accordion.
 */

.support-main { padding-block: 40px 72px; }
@media (min-width: 1024px) { .support-main { padding-block: 64px 96px; } }

.support-main .container { max-width: 800px; }

.support-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.support-hero .app-icon { width: 64px; height: 64px; }
.support-hero h1 { margin: 0; font-size: clamp(32px, 4.5vw, 44px); line-height: 1.1; }
.support-hero .lead { margin: 0; }

.support-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 0; font-size: 15px; font-weight: 600; }

.support-section { margin-top: 48px; }
.support-section > h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 0; }
.support-section .faq { margin-top: 20px; }
.faq details a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* App directory on the hub */
.support-apps { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 640px) { .support-apps { grid-template-columns: 1fr 1fr; } }

.support-app {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    color: inherit;
    transition: box-shadow .2s ease, transform .2s ease;
}
.support-app:hover { text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.support-app .app-icon { width: 48px; height: 48px; }
.support-app h3 { margin: 0; font-size: 18px; }
.support-app p { margin: 2px 0 0; font-size: 14px; }

/* "Still need help?" card */
.contact-card { margin-top: 48px; padding: 32px; text-align: center; }
.contact-card h2 { margin: 0; font-size: clamp(22px, 2.6vw, 28px); }
.contact-card p { margin: 10px auto 0; max-width: 32rem; }
.contact-card .btn { margin-top: 24px; }
.contact-card .copy-email { justify-content: center; margin-top: 16px; }

/* Numbered/bulleted content cards (account deletion) */
.info-card { margin-top: 24px; padding: 28px; }
.info-card h2 { margin: 0 0 12px; font-size: 22px; }
.info-card ol, .info-card ul { margin: 0; padding-left: 1.25rem; color: var(--ink-2); }
.info-card li { margin: 6px 0; }
.info-card li strong { color: var(--ink); }
.info-card .note {
    margin: 16px 0 0;
    padding: 14px 16px;
    border-radius: var(--radius-input);
    background: var(--surface-sunk);
    color: var(--ink-2);
}