Left Icon Accordion

<!--
  Chevron on the LEFT: it points right when closed and rotates down when open,
  so the arrow reads as "this expands" rather than as a dropdown marker. The
  answer is indented to line up with the label, not the icon.
-->
<div class="acc-left">
  <details class="acc-left__item" name="acc-left" open>
    <summary class="acc-left__question">
      <svg class="acc-left__icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
        <path d="m7.5 5 5 5-5 5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      Do you have a public API?
    </summary>
    <div class="acc-left__answer">
      <p>Yes - a REST API and webhooks on every plan, with a rate limit of 1,000 requests per minute.</p>
    </div>
  </details>

  <details class="acc-left__item" name="acc-left">
    <summary class="acc-left__question">
      <svg class="acc-left__icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
        <path d="m7.5 5 5 5-5 5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      Are there client libraries?
    </summary>
    <div class="acc-left__answer">
      <p>We publish official SDKs for TypeScript, Python, Go and Ruby, all generated from the same OpenAPI spec.</p>
    </div>
  </details>

  <details class="acc-left__item" name="acc-left">
    <summary class="acc-left__question">
      <svg class="acc-left__icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
        <path d="m7.5 5 5 5-5 5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      How do I rotate an API key?
    </summary>
    <div class="acc-left__answer">
      <p>Create a second key in Settings, deploy it, then revoke the old one. Both stay valid until you revoke.</p>
    </div>
  </details>
</div>