Plus / Minus Accordion

<!--
  The indicator is two 2px bars stacked at the same spot: the horizontal one is
  always visible, the vertical one collapses (scaleY(0)) when the panel opens,
  so + morphs into −. Both bars are aria-hidden - aria-expanded on the control
  is what a screen reader announces.
-->
<div class="acc-pm">
  <details class="acc-pm__item" name="acc-pm" open>
    <summary class="acc-pm__question">
      Is there a free trial?
      <span class="acc-pm__indicator" aria-hidden="true">
        <span class="acc-pm__bar"></span>
        <span class="acc-pm__bar acc-pm__bar--vertical"></span>
      </span>
    </summary>
    <div class="acc-pm__answer">
      <p>14 days on any paid plan, no card required. You keep everything you build during the trial.</p>
    </div>
  </details>

  <details class="acc-pm__item" name="acc-pm">
    <summary class="acc-pm__question">
      What happens when the trial ends?
      <span class="acc-pm__indicator" aria-hidden="true">
        <span class="acc-pm__bar"></span>
        <span class="acc-pm__bar acc-pm__bar--vertical"></span>
      </span>
    </summary>
    <div class="acc-pm__answer">
      <p>Your workspace drops to the free tier. Nothing is deleted, and you can upgrade again whenever you like.</p>
    </div>
  </details>

  <details class="acc-pm__item" name="acc-pm">
    <summary class="acc-pm__question">
      Can I extend my trial?
      <span class="acc-pm__indicator" aria-hidden="true">
        <span class="acc-pm__bar"></span>
        <span class="acc-pm__bar acc-pm__bar--vertical"></span>
      </span>
    </summary>
    <div class="acc-pm__answer">
      <p>Email support and we will add another 14 days once, no questions asked.</p>
    </div>
  </details>
</div>