:root {
    --bg: #0f172a;         /* slate-900 */
    --card: #111827;       /* gray-900 */
    --muted: #9ca3af;      /* gray-400 */
    --text: #e5e7eb;       /* gray-200 */
    --accent: #22d3ee;     /* cyan-400 */
    --ring: rgba(34, 211, 238, .35);
}

/* Each item */
#faq .faq-item {
    border-bottom: 1px solid #e5e7eb;
    padding: .25rem 0 1rem;
}

/* Button row */
#faq .btn-faq {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: .75rem 0;
    font-size: 1.125rem;
    line-height: 1.4;
    cursor: pointer;
}

/* Chevron */
#faq .btn-faq .chev {
    /*width: .75rem; height: .75rem; flex: 0 0 .75rem;*/
    width: .9rem; height: .9rem;
    border-right: 3px solid #ffa500;  /* teal */
    border-bottom: 3px solid #ffa500;
    transform: rotate(-45deg);
    transition: transform .2s ease;
}

/* Rotate chevron when open */
#faq .faq-item[aria-expanded="true"] .btn-faq .chev { transform: rotate(45deg); }

/* Panel: smooth open/close without JS height calculations */
#faq .panel {
    display: grid;                /* the “grid rows” trick */
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease, opacity .25s ease;
    opacity: 0;
    margin-top: 0;
}
#faq .panel > div { overflow: hidden; } /* hides content while closed */

/* Open state driven purely by aria-expanded */
#faq .faq-item[aria-expanded="true"] .panel {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-left: 26px;
}

/* Make sure no old rules fight us */
#faq .panel { position: static !important; }
#faq .panel, #faq .panel * { box-sizing: border-box; }

/* Focus styles (keyboard accessibility) */
#faq .btn-faq:focus-visible {
    outline: 2px solid #00c2d6;
    outline-offset: 3px;
    border-radius: .375rem;
}

/* Motion-safe */
@media (prefers-reduced-motion: reduce) {
    #faq .panel { transition: none; }
    #faq .btn-faq .chev { transition: none; }
}


/* Restore bullets inside FAQ panels */
#faq .panel ul {
    list-style: disc;
    list-style-position: outside;
    padding-left: 1.25rem;   /* indent */
    margin: .5rem 0 1rem;
}

#faq .panel ol {
    list-style: decimal;
    list-style-position: outside;
    padding-left: 1.25rem;
    margin: .5rem 0 1rem;
}

#faq .panel li { margin: .25rem 0; }

/* Optional: nicer nested bullets */
#faq .panel ul ul { list-style: circle; }
#faq .panel ul ul ul { list-style: square; }

#faq .panel ul { list-style: disc !important; padding-left: 1.25rem !important; }