Option B — build spec

<h2 class="pz-q" id="pz-journey-label">Where are you in the home buying journey?</h2>

<div class="pz-journey" role="group" aria-labelledby="pz-journey-label">
  <button type="button" class="pz-tile" data-value="browsing"       aria-pressed="false">Just browsing</button>
  <button type="button" class="pz-tile" data-value="looking"        aria-pressed="false">Actively looking</button>
  <button type="button" class="pz-tile" data-value="ready"          aria-pressed="false">Ready to buy</button>
  <button type="button" class="pz-tile" data-value="under_contract" aria-pressed="false">Under contract</button>
</div>

<!-- data-value strings are placeholders. Replace with whatever the
     record already stores so no migration is needed. -->

.pz-journey {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 0 0 4px;
}

.pz-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 44px;          /* equal height, all four wrap to 2 lines */
  padding: 6px 4px;
  border: 1px solid #C9CFE0;
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1.25;
  color: #4A5061;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}

.pz-tile:hover { border-color: #233C90; }

.pz-tile:focus-visible {
  outline: 2px solid #233C90;
  outline-offset: 2px;
}

.pz-tile[aria-pressed="true"] {
  border-color: #233C90;
  background: #EDF1FB;
  color: #233C90;
  font-weight: 700;
}

/* mobile fallback — 4 across will not hold below ~420px */
@media (max-width: 420px) {
  .pz-journey { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pz-tile    { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .pz-tile { transition: none; }
}

// Replace with the component's own state handling if it already has one.
const tiles = document.querySelectorAll('#pz-prequal .pz-tile');

tiles.forEach(tile => {
  tile.addEventListener('click', () => {
    tiles.forEach(t => t.setAttribute('aria-pressed', 'false'));
    tile.setAttribute('aria-pressed', 'true');
    // onJourneySelect(tile.dataset.value);
  });
});