Option B — build spec

Shortened heading, new helper line naming gift funds. No layout change beyond that.

Net change: heading text changes, one helper line is added, five tiles and Back/Next are untouched. The stray slider-shaped element on the first tile in the current build is not reproduced here — it doesn't appear anywhere in this markup, so if it's a leftover component mounted elsewhere in the real page, removing this block should remove it too. If it persists after this ships, that confirms it's coming from somewhere else in the surrounding code, not this screen's own markup.

Live preview

Tiles are clickable and keyboard operable.

"$30,000 - $50,000" shown selected as an example of the active state.

Markup

HTML

<h2 class="pzs-q" id="pzs-q-label">How much do you have saved toward this home?</h2>
<p class="pzs-helper">Include savings, investments, or gift funds you can use for
  your down payment and closing costs.</p>

<div class="pzs-options" role="group" aria-labelledby="pzs-q-label">
  <button type="button" class="pzs-tile" data-value="0-5000">$0 - $5,000</button>
  <button type="button" class="pzs-tile" data-value="5000-15000">$5,000 - $15,000</button>
  <button type="button" class="pzs-tile" data-value="15000-30000">$15,000 - $30,000</button>
  <button type="button" class="pzs-tile" data-value="30000-50000">$30,000 - $50,000</button>
  <button type="button" class="pzs-tile" data-value="50000-plus">Above $50,000</button>
</div>

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

CSS

.pzs-q {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: #1F2430;
}

.pzs-helper {
  margin: 0 0 14px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #8A90A0;
}

.pzs-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px;
}

.pzs-tile {
  border: 1px solid #C9CFE0;
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  font-size: 12.5px;
  color: #4A5061;
  padding: 9px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}

.pzs-tile:hover         { border-color: #233C90; }
.pzs-tile:focus-visible { outline: 2px solid #233C90; outline-offset: 2px; }

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

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

JS — single select

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

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

Text changes

Element	Current	Replace with
Heading	How much have you saved for your home?	How much do you have saved toward this home?
Helper line	none	Include savings, investments, or gift funds you can use for your down payment and closing costs.
Tiles	$0–$5,000 · $5,000–$15,000 · $15,000–$30,000 · $30,000–$50,000 · Above $50,000	No change
Back / Next	Back / Next	No change

Notes for the developer

The slider-shaped element on the first tile isn't in this markup In the current live screen, "$0 - $5,000" renders with a small toggle/knob shape overlapping it that no other tile has. This build spec's HTML and CSS don't include anything that would produce that, so it's most likely coming from a leftover component still mounted somewhere else in the page, or dead CSS targeting that specific tile. Worth a quick look before or alongside this copy change, since replacing just the text won't fix it if the cause lives outside this block.

Notes

The data-value strings are placeholders. Keep whatever the record already stores and change only the visible label, so no migration is needed.
Selected state uses aria-pressed, not a CSS class, matching the pattern used on the journey-stage tiles earlier in this flow.
Still open: whether this figure is meant as one household total or a per-applicant amount. Doesn't change this screen's markup either way, but affects how the value is labeled downstream in the submitted-details summary.