<div class="acc-spine">
  <input type="radio" name="spine" id="sp-1" checked />
  <input type="radio" name="spine" id="sp-2" />
  <input type="radio" name="spine" id="sp-3" />
  <label for="sp-1" class="acc-spine__c">
    <span class="acc-spine__n">01</span>
    <span class="acc-spine__t">Discover</span>
    <span class="acc-spine__b">Map the problem space. Talk to users. Sketch hypotheses.</span>
  </label>
  <label for="sp-2" class="acc-spine__c">
    <span class="acc-spine__n">02</span>
    <span class="acc-spine__t">Define</span>
    <span class="acc-spine__b">Pick one bet. Frame it crisply. Write what success looks like.</span>
  </label>
  <label for="sp-3" class="acc-spine__c">
    <span class="acc-spine__n">03</span>
    <span class="acc-spine__t">Deliver</span>
    <span class="acc-spine__b">Ship a thin slice. Measure. Decide what's next.</span>
  </label>
</div>

.acc-spine {
  display: flex; gap: 2px; height: 220px;
  border-radius: 12px; overflow: hidden; background: rgba(240,238,255,0.04);
}
.acc-spine > input { display: none; }
.acc-spine__c {
  flex: 1; cursor: pointer; padding: 14px;
  background: #1a1a24; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  transition: flex .5s cubic-bezier(.3,1,.3,1), background .3s;
}
.acc-spine__n {
  font: 800 18px monospace; color: rgba(212,154,92,0.8);
}
.acc-spine__t {
  font: 700 12px/1 system-ui; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(240,238,255,0.55);
  writing-mode: vertical-rl; transform: rotate(180deg);
  transition: all .35s;
}
.acc-spine__b {
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.65);
  opacity: 0; max-height: 0; transition: opacity .3s .15s, max-height .35s;
}
#sp-1:checked ~ [for="sp-1"],
#sp-2:checked ~ [for="sp-2"],
#sp-3:checked ~ [for="sp-3"] {
  flex: 4; background: linear-gradient(180deg,#1a1a24,#2a2438);
}
#sp-1:checked ~ [for="sp-1"] .acc-spine__t,
#sp-2:checked ~ [for="sp-2"] .acc-spine__t,
#sp-3:checked ~ [for="sp-3"] .acc-spine__t {
  writing-mode: horizontal-tb; transform: none; color: #f0eeff; font-size: 14px;
}
#sp-1:checked ~ [for="sp-1"] .acc-spine__b,
#sp-2:checked ~ [for="sp-2"] .acc-spine__b,
#sp-3:checked ~ [for="sp-3"] .acc-spine__b {
  opacity: 1; max-height: 120px;
}