<details class="acc-stair" name="acc-stair" style="--i: 0" open>
  <summary>Step one</summary>
  <p>Begin where you stand. The first move matters more than the plan.</p>
</details>
<details class="acc-stair" name="acc-stair" style="--i: 1">
  <summary>Step two</summary>
  <p>Ship the rough version. Real feedback beats imagined feedback.</p>
</details>
<details class="acc-stair" name="acc-stair" style="--i: 2">
  <summary>Step three</summary>
  <p>Refine. Cut what didn't earn its place. Keep the load light.</p>
</details>
<details class="acc-stair" name="acc-stair" style="--i: 3">
  <summary>Step four</summary>
  <p>Repeat the loop. Compounding shows up after the tenth turn, not the first.</p>
</details>

.acc-stair {
  margin-bottom: 4px;
  margin-left: calc(var(--i,0) * 16px);
  background: rgba(143,179,163,0.07);
  border-left: 3px solid #8fb3a3;
  border-radius: 0 8px 8px 0;
  transition: margin-left .35s cubic-bezier(.3,1.3,.5,1), background .25s;
}
.acc-stair summary {
  cursor: pointer; list-style: none; padding: 11px 14px;
  font: 600 13px/1.3 system-ui; color: rgba(240,238,255,0.7);
}
.acc-stair summary::-webkit-details-marker { display: none; }
.acc-stair[open] {
  margin-left: 0; background: rgba(143,179,163,0.15);
}
.acc-stair[open] > summary { color: #f0eeff; }
.acc-stair p {
  margin: 0; padding: 0 14px 12px;
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.6);
}