/* Native details/summary FAQ accordion. the approved mockup. */
details { border-top: 1px solid var(--hairline); max-width: 60rem; }
details:last-of-type { border-bottom: 1px solid var(--hairline); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; }
summary::-webkit-details-marker { display: none; }
summary .icon { transition: transform .25s ease; color: var(--accent-text); flex: none; }
details[open] summary .icon { transform: rotate(45deg); }
details p { margin: 0 0 1.5rem; max-width: 46rem; color: var(--ink-muted); }
details p a { text-decoration: underline; text-decoration-thickness: 1px; }
details p a:hover { color: var(--accent-text); }

/* Phones: the mockups drop the question size to 1.25rem. base.css has the same rule, but this file loads
   after it and its 1.5rem above would win, so the shared rule is repeated here. */
@media (max-width: 48rem) { summary { font-size: 1.25rem; } }