<div class="acc-strip">
  <input type="radio" name="strip" id="strip-1" checked />
  <input type="radio" name="strip" id="strip-2" />
  <input type="radio" name="strip" id="strip-3" />
  <input type="radio" name="strip" id="strip-4" />
  <label for="strip-1" class="acc-strip__col" data-c="0">
    <span class="acc-strip__title">DESIGN</span>
    <span class="acc-strip__body"
      >Compose from atomic tokens. Stay consistent across surfaces and scale.</span
    >
  </label>
  <label for="strip-2" class="acc-strip__col" data-c="1">
    <span class="acc-strip__title">BUILD</span>
    <span class="acc-strip__body">Hand-coded HTML and CSS, no framework lock-in. Ship faster.</span>
  </label>
  <label for="strip-3" class="acc-strip__col" data-c="2">
    <span class="acc-strip__title">SHIP</span>
    <span class="acc-strip__body">Static output, edge-cached, instant on every connection.</span>
  </label>
  <label for="strip-4" class="acc-strip__col" data-c="3">
    <span class="acc-strip__title">REPEAT</span>
    <span class="acc-strip__body">Iterate without rewriting. Components compose cleanly.</span>
  </label>
</div>

.acc-strip {
  display: flex; gap: 4px; height: 220px; width: 100%;
  border-radius: 12px; overflow: hidden;
}
.acc-strip > input { display: none; }
.acc-strip__col {
  flex: 1 1 0; cursor: pointer; padding: 16px 14px;
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; overflow: hidden;
  background: #1a1a24; color: rgba(240,238,255,0.7);
  transition: flex .55s cubic-bezier(.3,1,.3,1), background .4s;
}
.acc-strip__col[data-c="0"] { background: linear-gradient(160deg,#3a2a55,#1a1a24); }
.acc-strip__col[data-c="1"] { background: linear-gradient(160deg,#553a2a,#1a1a24); }
.acc-strip__col[data-c="2"] { background: linear-gradient(160deg,#2a553a,#1a1a24); }
.acc-strip__col[data-c="3"] { background: linear-gradient(160deg,#553a55,#1a1a24); }
.acc-strip__title {
  font: 800 11px/1 system-ui; letter-spacing: 0.18em;
  writing-mode: vertical-rl; transform: rotate(180deg);
  align-self: flex-start; transition: all .35s;
}
.acc-strip__body {
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.78);
  opacity: 0; max-height: 0; transition: opacity .3s .15s, max-height .35s;
}
#strip-1:checked ~ [for="strip-1"],
#strip-2:checked ~ [for="strip-2"],
#strip-3:checked ~ [for="strip-3"],
#strip-4:checked ~ [for="strip-4"] {
  flex: 5 1 0; color: #f0eeff;
}
#strip-1:checked ~ [for="strip-1"] .acc-strip__title,
#strip-2:checked ~ [for="strip-2"] .acc-strip__title,
#strip-3:checked ~ [for="strip-3"] .acc-strip__title,
#strip-4:checked ~ [for="strip-4"] .acc-strip__title {
  writing-mode: horizontal-tb; transform: none; font-size: 14px;
  align-self: stretch;
}
#strip-1:checked ~ [for="strip-1"] .acc-strip__body,
#strip-2:checked ~ [for="strip-2"] .acc-strip__body,
#strip-3:checked ~ [for="strip-3"] .acc-strip__body,
#strip-4:checked ~ [for="strip-4"] .acc-strip__body {
  opacity: 1; max-height: 100px; margin-top: 8px;
}