<details class="acc-slant" name="acc-slant" open>
  <summary>Architecture</summary>
  <p>Static-first, edge-cached, no SSR runtime. Fast on every connection.</p>
</details>
<details class="acc-slant" name="acc-slant">
  <summary>Data layer</summary>
  <p>Content lives in flat files. Authoring is git-tracked and reviewable.</p>
</details>
<details class="acc-slant" name="acc-slant">
  <summary>Deployment</summary>
  <p>Build once, push to CDN. No servers to manage, no scaling concerns.</p>
</details>

.acc-slant {
  background: rgba(156,123,214,0.08);
  border: 1px solid rgba(156,123,214,0.2);
  margin-bottom: 6px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition: clip-path .35s cubic-bezier(.3,1.4,.5,1), background .25s;
}
.acc-slant summary {
  cursor: pointer; list-style: none; padding: 13px 22px;
  font: 700 12px/1 system-ui; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(240,238,255,0.7);
}
.acc-slant summary::-webkit-details-marker { display: none; }
.acc-slant[open] {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  background: rgba(156,123,214,0.18);
}
.acc-slant[open] > summary { color: #f0eeff; }
.acc-slant p {
  margin: 0; padding: 0 22px 14px;
  font: 12px/1.6 system-ui; color: rgba(240,238,255,0.6);
}