/* FAQ — accordions on top of the shared .legal article styling. Uses <details>/<summary>, so it works
   with zero JavaScript (and stays open/searchable when the browser prints or finds text). */

.faq details {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    margin-bottom: 0.7rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.faq details[open] { border-color: #cfc8ba; }

.faq summary {
    list-style: none;                       /* hide the default triangle… */
    cursor: pointer;
    padding: 1rem 3rem 1rem 1.2rem;
    font-weight: 700;
    font-size: 1rem;
    position: relative;
    color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }   /* …in WebKit too */
.faq summary:hover { background: #faf8f4; }

/* …and draw our own chevron, which rotates when the answer opens. */
.faq summary::after {
    content: "";
    position: absolute;
    right: 1.25rem;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .18s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }

.faq details > *:not(summary) { padding: 0 1.2rem; }
.faq details > *:not(summary):first-of-type { padding-top: 0.2rem; }
.faq details > *:last-child { padding-bottom: 1.1rem; }
.faq details ul { padding-left: 2.6rem; }
.faq details li { margin-bottom: 0.25rem; }

/* Where the answer came from — every answer points back at the document that actually promises it. */
.faq .src { font-size: 0.84rem; color: var(--muted); margin-top: 0.7rem; }
.faq .src a { color: var(--teal-dark); font-weight: 600; }
.faq .src a:hover { text-decoration: underline; }

.faq h2 { margin-top: 2.2rem; }