Build spec v5 — terminology update

Same 2 × 2 tile layout you approved. One word changed in the helper line.

What's different from v4: the helper sentence said "a local expert." It now says "a licensed loan officer," matching the completion screen and the rest of the flow. Everything else — layout, tiles, trims, height savings — is unchanged from what you already signed off on.

Live preview

Both real widths. Tiles are clickable and keyboard operable.

Desktop — 350 px

Tiles are 152 px. Every label fits on one line.

Phone — 343 px

Tiles are 145 px. Identical layout — nothing switches.

Text and element changes

The green row is the only thing new since v4.

Element	Current	Replace with
Helper text	Pick a general area, this help us connect you with a local expert and you can always change it later	Pick a general area so we can connect you with a licensed loan officer. You can change it later.
Tile 1	I'm just browsing	Just browsing
Tile 2	I'm actively looking at home (plural bug)	Actively looking
Tile 3	I'm ready to buy now!	Ready to buy
Tile 4	I've signed a contract	Under contract
Tile layout	Four stacked rows, 190 px wide	2 × 2 grid, full column width
Map instruction	Use + to zoom in, then tap the area you're interested in	Remove
County legend chip	• County	Remove — restates the dropdown beside it
Map height	≈180 px	150 px
Both headings	Where are you… / What area…	No change
Dropdowns	State / County	No change
Back / Next	Back / Next	No change

Markup

HTML — tiles and helper line

<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>

<h2 class="pz-q pz-q--second">What area are you considering?</h2>

<!-- CHANGED in v5: "a local expert" is now "a licensed loan officer" -->
<p class="pz-helper">Pick a general area so we can connect you with
  a licensed loan officer. You can change it later.</p>

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

CSS — unchanged from v4, included for completeness

.pz-journey {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* same at every width */
  gap: 8px;
}

.pz-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 44px;        /* iOS 44pt / Android 48dp touch target */
  padding: 7px 6px;
  border: 1px solid #C9CFE0;
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  font-size: 12.5px;        /* all four labels fit on one line at 145px+ */
  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;
}

.pz-helper {
  margin: 0 0 10px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.5;
  color: #8A90A0;
}

/* 320px phones only — drop if unsupported */
@media (max-width: 340px) {
  .pz-journey { grid-template-columns: 1fr; gap: 6px; }
  .pz-tile    { min-height: 40px; }
}

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

JS — single select, unchanged

const tiles = document.querySelectorAll('.pz-journey .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);
  });
});

Height budget

Unchanged from v4. Estimates measured off a screenshot — confirm against the real component.

Change	Notes	Saving
Tiles → 2 × 2	Four rows become two, single-line labels.	≈32 px
Map 180 → 150 px	Precise selection happens via the dropdowns.	≈30 px
Remove instruction line	Map controls are self-evident.	≈18 px
Remove legend chip	Duplicates the County dropdown.	≈16 px
Total	All four applied	≈96 px

Notes for the developer

data-value strings are placeholders. If these answers feed segmentation, routing, or reporting, keep the value the record already stores and change only the visible label.
Selected state uses aria-pressed, not a CSS class, so styling and accessibility state can't drift apart.
Test at 375 × 667 (iPhone SE) rather than a modern tall phone — that's the viewport that fails first.
One media query, at 340 px, for 320 px-wide phones. Drop it if those aren't supported. The main 2×2 grid needs no breakpoint.
If it still scrolls slightly on phones, that's acceptable — a vertical swipe is the native gesture there. Don't shrink the type to fix it.
"Licensed loan officer" now appears here and on the completion screen. These two are five steps apart in the flow, so the repeat reads as consistency rather than over-explaining.