Build spec — new heading, original order

Copy fix only. Nothing on the screen moves.

Net change: the heading is replaced and the Yes/No gets its own label. Field order, positions, and layout are exactly as they are today. The heading now introduces the person, so "this person" in the question has something to point back at.

Live preview

Yes/No is clickable and keyboard operable. Inputs are real and focusable.

Consent text shown verbatim from the current screen — see the flag at the bottom before shipping it as-is.

What changed

Current

Heading: "Is this person your legal spouse?"
(no label)
Yes / No
Legal First Name *
Middle Name (optional)
Legal Last Name *
Suffix (optional)
Consent checkbox
Back / Next

New

Heading: "Tell us about the person applying with you"
Label: "Is this person your legal spouse?"
Yes / No
Legal First Name *
Middle Name (optional)
Legal Last Name *
Suffix (optional)
Consent checkbox
Back / Next

Two lines differ. Every element stays in the position it occupies today.

Markup

HTML — content block

<!-- heading: replaced -->
<h2 class="pz-heading">Tell us about the person applying with you</h2>

<!-- label: new element, sits directly above the existing Yes/No -->
<p class="pz-qlabel" id="pz-cb-spouse-label">Is this person your legal spouse?</p>
<div class="pz-yn" role="group" aria-labelledby="pz-cb-spouse-label">
  <button type="button" data-value="yes" aria-pressed="false">Yes</button>
  <button type="button" data-value="no"  aria-pressed="false">No</button>
</div>

<!-- name fields: unchanged position, hidden labels added -->
<div class="pz-field">
  <label class="pz-sr" for="pz-cb-first">Legal first name (required)</label>
  <input id="pz-cb-first" type="text" placeholder="Legal First Name *" required>
</div>
<div class="pz-field">
  <label class="pz-sr" for="pz-cb-middle">Middle name (optional)</label>
  <input id="pz-cb-middle" type="text" placeholder="Middle Name (optional)">
</div>
<div class="pz-field">
  <label class="pz-sr" for="pz-cb-last">Legal last name (required)</label>
  <input id="pz-cb-last" type="text" placeholder="Legal Last Name *" required>
</div>
<div class="pz-field">
  <label class="pz-sr" for="pz-cb-suffix">Suffix (optional)</label>
  <input id="pz-cb-suffix" type="text" placeholder="Suffix — Jr., Sr., III (optional)">
</div>

CSS — new and changed rules only

.pz-heading {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: #1F2430;
}

/* label for the Yes/No — this element is new */
.pz-qlabel {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #4A5061;
}

.pz-yn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

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

/* visually-hidden labels — keeps the placeholder look, fixes screen readers */
.pz-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

JS — Yes/No single select

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

yn.forEach(btn => {
  btn.addEventListener('click', () => {
    yn.forEach(b => b.setAttribute('aria-pressed', 'false'));
    btn.setAttribute('aria-pressed', 'true');
    // onSpouseSelect(btn.dataset.value === 'yes');
  });
});

Text changes

Element	Current	Replace with
Heading	Is this person your legal spouse?	Tell us about the person applying with you
Question label	none — Yes/No was unlabeled	Is this person your legal spouse? New element, directly above the existing Yes/No.
Field order	Yes/No → name fields	No change
Suffix placeholder	Suffix (optional) Jr., Sr., etc	Suffix — Jr., Sr., III (optional)optional
Consent text	…to obtain my credit Information…	Fix the stray capital: information. See flag below on the wording itself.
Name field labels	Legal First / Middle / Legal Last	No change — "Legal" prefix is right, keep it
Back / Next	Back / Next	No change

Notes for the developer

Consent wording — needs a compliance read before this ships The checkbox says "obtain my credit information… will not affect my credit score", but this screen collects the other person's legal name.

If the co-borrower's credit is pulled here, the buyer generally cannot authorize that on their behalf — consent and permissible purpose normally come from the person whose file is accessed.
If no credit is pulled on the co-borrower at this step, the wording is fine but sits on a screen that implies otherwise.

Not legal advice — but worth a conversation with whoever handles compliance for Approval IQ now rather than after launch. Independent of the copy change above.

Implementation details

Visually-hidden labels were added to the four inputs. Placeholder-only fields disappear as soon as someone types, which leaves screen readers with nothing and makes review harder for everyone. The .pz-sr class keeps the visual design pixel-identical. Drop it if you'd rather not touch the fields at all.
Yes/No uses aria-pressed, not a CSS class, so styling and accessibility state can't drift apart. Same pattern as the journey tiles on the previous screen.
Check the previous screen's wording. If the alone-or-with-someone step says "with someone else", this heading matches it well. If it says "co-borrower", change one of them so the buyer isn't tracking two names for the same person.