Final build spec

All decisions applied. No placeholders left.

Settled

Lede: "Smart move — you'll be shopping with real numbers instead of estimates."
Notice: no one in the approval process asks for money; support is the on-screen widget.
Response window: 1–2 business days.
"A licensed loan officer" on first mention, "your loan officer" after.
No state-licensure claim.
Document list approved as-is.

Live preview

Static screen — no JavaScript beyond the existing close and Continue handlers.

Markup

HTML

<div id="pz-complete" role="dialog" aria-labelledby="pz-c-title" aria-modal="true">

  <div class="pz-titlebar">
    <span class="pz-title" id="pz-c-title">Get Pre-Qualified</span>
    <button class="pz-close" type="button" aria-label="Close">&times;</button>
  </div>

  <h2 class="pz-heading">Congratulations — you've taken the real first step.</h2>
  <p class="pz-lede">Smart move — you'll be shopping with real numbers instead of
    estimates. Here's what happens from here, and what we'll need from you.</p>

  <ol class="pz-timeline">

    <!-- step 1 — the only completed step, hence the only check -->
    <li class="pz-step">
      <span class="pz-dot pz-dot--done" aria-hidden="true">
        <svg viewBox="0 0 20 20" fill="none"><path d="M5 10.5l3.2 3.2L15 6.5"
          stroke="#fff" stroke-width="2.6" stroke-linecap="round"/></svg>
      </span>
      <span>
        <b class="pz-done">Request submitted</b>
        <span>Received just now — this opens your file and starts the approval.</span>
      </span>
    </li>

    <li class="pz-step">
      <span class="pz-dot" aria-hidden="true">2</span>
      <span>
        <b>A licensed loan officer calls or emails</b>
        <span>Within 1–2 business days, to walk through your details and
          request your documents.</span>
      </span>
    </li>

    <li class="pz-step">
      <span class="pz-dot" aria-hidden="true">3</span>
      <span>
        <b>You send your documents</b>
        <span>This is the step that decides how fast the rest goes.</span>
      </span>
    </li>

    <li class="pz-step">
      <span class="pz-dot" aria-hidden="true">4</span>
      <span>
        <b>Your approval loads into Padzilly</b>
        <span>From then on, every listing you see is underwritten against
          your real approval.</span>
      </span>
    </li>

    <li class="pz-step">
      <span class="pz-dot" aria-hidden="true">5</span>
      <span>
        <b>Shop and make offers with real numbers</b>
        <span>SearchPro and OfferPro unlock.</span>
      </span>
    </li>

  </ol>

  <!-- document task card: navy + document icon, not green + star -->
  <div class="pz-docs">
    <div class="pz-docs-head">
      <svg viewBox="0 0 20 20" fill="#233C90" aria-hidden="true">
        <path d="M4 2h8l4 4v12H4z" opacity=".25"/>
        <path d="M4 2h8l4 4v12H4V2zm8 1.5V6h2.5z"/>
        <path d="M6.5 10h7v1.2h-7zm0 3h7v1.2h-7z" fill="#fff"/>
      </svg>
      <b>Start gathering these now</b>
    </div>
    <ul>
      <li>Recent pay stubs and W-2s (or tax returns if you're self-employed)</li>
      <li>Bank and asset statements</li>
      <li>Photo ID</li>
    </ul>
    <p class="pz-docs-note">Standard for any mortgage approval. Your loan officer will
      confirm exactly what's needed for your loan type.</p>
  </div>

  <!-- security notice — reassurance, not a fraud warning. Keep both sentences. -->
  <div class="pz-security">
    <svg viewBox="0 0 20 20" fill="#8A90A0" aria-hidden="true"><path
      d="M10 1l7 3v6c0 4.5-3 7.7-7 9-4-1.3-7-4.5-7-9V4z"/></svg>
    <p>No one in the approval process will ever ask you for money. If something
      seems off, message us anytime using the support widget on your screen.</p>
  </div>

  <button type="button" class="pz-cta">Continue to Home Search</button>

</div>

CSS

#pz-complete {
  font-family: Lato, 'Segoe UI', sans-serif;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(28,36,64,.16);
  max-width: 380px;
  margin: 0 auto;
  padding: 14px 18px 16px;
}

/* ---- header ---- */
#pz-complete .pz-titlebar { display:flex; align-items:center;
                             justify-content:space-between; margin-bottom:12px; }
#pz-complete .pz-title    { font-size:12.5px; font-weight:700; color:#1F2430; }
#pz-complete .pz-close    { background:none; border:0; font-size:16px; line-height:1;
                             color:#8A90A0; cursor:pointer; padding:2px 4px; }

#pz-complete .pz-heading { margin:0 0 7px; text-align:center; font-size:15px;
                           font-weight:900; line-height:1.3; color:#1F2430; }
#pz-complete .pz-lede    { margin:0 0 14px; text-align:center; font-size:11.5px;
                           line-height:1.5; color:#4A5061; }

/* ---- timeline ---- */
#pz-complete .pz-timeline { margin:0 0 13px; padding:0; list-style:none; }

#pz-complete .pz-step {
  display: flex;
  gap: 10px;
  padding-bottom: 13px;
  position: relative;
}
#pz-complete .pz-step:last-child { padding-bottom: 0; }

/* the connector line — what makes this read as a sequence */
#pz-complete .pz-step::before {
  content: '';
  position: absolute;
  left: 9px;        /* centers on the 20px dot */
  top: 20px;
  bottom: 0;
  width: 2px;
  background: #E4E7EF;
}
#pz-complete .pz-step:last-child::before { display: none; }

#pz-complete .pz-dot {
  flex: 0 0 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #233C90;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  color: #233C90;
  position: relative;
  z-index: 1;       /* sits above the connector */
}
#pz-complete .pz-dot--done     { background:#1B7A43; border-color:#1B7A43; }
#pz-complete .pz-dot--done svg { width:11px; height:11px; }

#pz-complete .pz-step b { display:block; font-size:11.5px; font-weight:900;
                          color:#1F2430; line-height:1.35; margin-bottom:2px; }
#pz-complete .pz-step b.pz-done { color:#1B7A43; }
#pz-complete .pz-step span span { display:block; font-size:10.5px;
                                   line-height:1.45; color:#8A90A0; }

/* ---- document task card ---- */
#pz-complete .pz-docs {
  border: 1px solid #C6D0EA;
  background: #F2F5FD;
  border-radius: 6px;
  padding: 11px 13px;
  margin: 0 0 12px;
}
#pz-complete .pz-docs-head     { display:flex; align-items:center; gap:7px;
                                 margin-bottom:7px; }
#pz-complete .pz-docs-head svg { width:14px; height:14px; flex:0 0 14px; }
#pz-complete .pz-docs-head b   { font-size:11.5px; font-weight:900; color:#233C90; }
#pz-complete .pz-docs ul       { margin:0; padding-left:16px; }
#pz-complete .pz-docs li       { font-size:10.5px; line-height:1.5; color:#4A5061;
                                 margin-bottom:2px; }
#pz-complete .pz-docs-note     { margin:6px 0 0; font-size:10px; font-style:italic;
                                 line-height:1.4; color:#8A90A0; }

/* ---- security notice ---- */
#pz-complete .pz-security {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  border-top: 1px solid #E4E7EF;
  padding-top: 10px;
  margin: 0 0 12px;
}
#pz-complete .pz-security svg { width:13px; height:13px; flex:0 0 13px;
                                margin-top:1px; }
#pz-complete .pz-security p   { margin:0; font-size:9.5px; line-height:1.45;
                                color:#8A90A0; }

/* ---- CTA ---- */
#pz-complete .pz-cta {
  display: block;
  width: 100%;
  background: #233C90;
  color: #fff;
  border: 0;
  border-radius: 5px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 10px;
  cursor: pointer;
}
#pz-complete .pz-cta:focus-visible { outline:2px solid #233C90;
                                     outline-offset:2px; }

Full string list

Element	Current	New
Modal title	Get Pre-Qualified	No change
Headline	You're One Step Closer to Homeownership!	Congratulations — you've taken the real first step.
Lede	A licensed mortgage professional will review your details and contact you shortly to discuss your details and approval	Smart move — you'll be shopping with real numbers instead of estimates. Here's what happens from here, and what we'll need from you.
Eyebrow	WHAT HAPPENS NEXT?	Removed — the lede introduces the timeline
Step 1	didn't exist	Request submitted Received just now — this opens your file and starts the approval.
Step 2	Watch for a call or email from your lender partner soon!	A licensed loan officer calls or emails Within 1–2 business days, to walk through your details and request your documents.
Step 3	didn't exist	You send your documents This is the step that decides how fast the rest goes.
Step 4	Your approval will be loaded into Padzilly, so you can shop for homes that fit your exact budget	Your approval loads into Padzilly From then on, every listing you see is underwritten against your real approval.
Step 5	You'll be able to make stronger offers with confidence, knowing your numbers upfront	Shop and make offers with real numbers SearchPro and OfferPro unlock.
Dropped	You'll receive your pre-qualification approval	Removed — promised an outcome not yet decided
Card heading	didn't exist	Start gathering these now
Card items	didn't exist	Recent pay stubs and W-2s (or tax returns if you're self-employed) · Bank and asset statements · Photo ID
Card note	didn't exist	Standard for any mortgage approval. Your loan officer will confirm exactly what's needed for your loan type.
Security notice	didn't exist	No one in the approval process will ever ask you for money. If something seems off, message us anytime using the support widget on your screen.
Button	Continue	Continue to Home Search
Icons	Four green checkmarks	One green check on step 1; navy numbered dots on 2–5; navy document icon on the card

Notes for the developer

Implementation

All CSS scoped under #pz-complete so it can drop into an embed without leaking.
Dots carry aria-hidden="true" — the numbers are decorative, since the <ol> already conveys order to a screen reader.
The connector line is a ::before on each step, suppressed on the last one. Adding or removing a step needs no other change.
No JavaScript beyond the close and Continue handlers already in the component.
"Support widget on your screen" refers to the existing floating support widget. If it can be opened programmatically, consider making that phrase a button that triggers it rather than plain text — a buyer reading fine print won't go hunting for it.
Terminology: "approval" and "loan officer" throughout. "Licensed" appears once, on first mention only.

Two small things worth knowing

"1–2 business days" rather than "1–2 days." A Friday-evening submission makes the plain version a broken promise before anyone has done anything wrong. Drop "business" if you'd rather, but the weekend is the reason it's there.
Worth putting the document list in the confirmation email too. The modal builds the expectation; the email is what they'll still have in hand when the loan officer calls two days later.