/* Design system · the question toggle (owner 18.10: «exactly these, record them in the design system»).
   A flat round button 40 px: closed = a light fill (--fill) with an ink plus, open = an ink circle with a white cross
   (the plus turns 45°). Used by every question list: the FAQ block of the home page and the landings (js/faq-block.js) and the accordion of the design
   system page (js/flows.js). Open state: inside an open <details>, or on [aria-expanded="true"], or .is-open */
.qa-toggle { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--fill); color: var(--ink);
  transition: background-color .25s var(--ease-out, ease), color .25s, transform .3s var(--ease-out, ease); }
.qa-toggle::before, .qa-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 2px; margin: -1px 0 0 -7.5px; border-radius: 2px; background: currentColor; }
.qa-toggle::after { transform: rotate(90deg); }
details[open] > summary .qa-toggle, [aria-expanded="true"] .qa-toggle, .qa-toggle.is-open { background: var(--ink); color: #fff; transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .qa-toggle { transition: none; } }