<details class="acc-chv" name="acc-chv">
  <summary>How long does setup take?<span class="acc-chv__ico" aria-hidden="true"></span></summary>
  <p>Under five minutes. Copy the markup, paste the styles, you're done.</p>
</details>
<details class="acc-chv" name="acc-chv" open>
  <summary>
    Can I use this commercially?<span class="acc-chv__ico" aria-hidden="true"></span>
  </summary>
  <p>Yes — MIT licensed. Use it in client work, products, anywhere.</p>
</details>
<details class="acc-chv" name="acc-chv">
  <summary>Is there a Figma version?<span class="acc-chv__ico" aria-hidden="true"></span></summary>
  <p>Not yet. Designs live in code as the source of truth.</p>
</details>

.acc-chv {
  border-bottom: 1px solid rgba(143,179,163,0.18); padding: 4px 0;
}
.acc-chv summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; padding: 14px 4px;
  font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.7);
  transition: color .2s;
}
.acc-chv summary::-webkit-details-marker { display: none; }
.acc-chv summary:hover { color: #f0eeff; }
.acc-chv__ico {
  width: 9px; height: 9px;
  border-right: 2px solid #8fb3a3;
  border-bottom: 2px solid #8fb3a3;
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .35s cubic-bezier(.4,1.4,.5,1);
  flex-shrink: 0;
}
.acc-chv[open] > summary { color: #f0eeff; }
.acc-chv[open] .acc-chv__ico {
  transform: rotate(225deg) translate(-2px,-2px);
}
.acc-chv p {
  margin: 0 0 12px; padding: 0 4px;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.55);
}