sa-cva-how-it-works v2026-06-10
Numbered How-It-Works steps in a 2-column layout with center divider and large Georgia/Times New Roman display numerals in orange.
Source skill: sa-cva-how-it-works · Updated 2026-06-10 16:47:55
When to use
Explain a process or onboarding steps with big numbered display numerals.
Rules & constraints
- Foundry orange `#D97706` is for text, borders (up to 4px), dividers, and icon strokes only -- never a background fill. Step numerals use orange as text color, which is correct.
- No em dashes in body copy. This snippet uses `—` HTML entities as the visual truth source; production copy should follow the firm's em-dash style guide.
- Phone number lives in `tel:` href only. Button label is text, never the phone number itself.
- Fonts: Poppins (body/step copy) + Georgia/Times New Roman (H2 + numerals + step titles). The host page must load the Google Fonts link below.
- Text always full opacity. This mockup source uses `opacity:.85` on step copy -- preserve as visual truth; production should use solid hex per sa-brand-decisions §3.
- This is the VISUAL TRUTH SOURCE for SAIL Design Foundation v1 -- do not redesign or recolor.
- **Google Fonts (host page must load):**
- `https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap`
Live reference
https://aguiarinjurylawyers.com/practice-areas/commercial-vehicle-accidents/
Deployment notes
Packaged from the commercial-vehicle-accidents page. Host page must load the Poppins Google Fonts link. VISUAL TRUTH SOURCE for SAIL Design Foundation v1 — do not redesign or recolor.
HTML
<!-- ==================== HOW IT WORKS ==================== -->
<section class="sa-howitworks" aria-labelledby="cva-how-h">
<div class="sa-howitworks__inner">
<header class="sa-howitworks__head"><h2 class="sa-howitworks__h2" id="cva-how-h">How It Works</h2></header>
<ol class="sa-steps" role="list">
<li class="sa-step"><span class="sa-step__num" aria-hidden="true">1</span><div class="sa-step__body"><h3 class="sa-step__title">Call.</h3><p class="sa-step__copy">Call us 24/7. Most commercial vehicle cases can be qualified in under 10 minutes.</p></div></li>
<li class="sa-step"><span class="sa-step__num" aria-hidden="true">2</span><div class="sa-step__body"><h3 class="sa-step__title">Ask.</h3><p class="sa-step__copy">Ask us questions. We know you have several after a crash this serious. We want to answer them.</p></div></li>
<li class="sa-step"><span class="sa-step__num" aria-hidden="true">3</span><div class="sa-step__body"><h3 class="sa-step__title">Answer.</h3><p class="sa-step__copy">Answer a few of ours. That helps us both make sure we're a good fit, and it lets us get to work for you right away.</p></div></li>
<li class="sa-step"><span class="sa-step__num" aria-hidden="true">4</span><div class="sa-step__body"><h3 class="sa-step__title">Review.</h3><p class="sa-step__copy">Review our paperwork. We send it electronically, a standard contingency agreement and authorizations so we can start preserving evidence.</p></div></li>
<li class="sa-step"><span class="sa-step__num" aria-hidden="true">5</span><div class="sa-step__body"><h3 class="sa-step__title">Heal.</h3><p class="sa-step__copy">You focus on healing. A team of three goes to work on the rest, and walks through it all with you.</p></div></li>
</ol>
</div>
</section>CSS
:root{
--sail-navy:#0B212D; --sail-navy-deep:#0a1520;
--sail-orange:#D97706; --sail-orange-deep:#B45309;
--sail-white:#fff; --sail-ink-light:#f7f9fa; --sail-mute:#5a6770;
--sail-rule:rgba(11,33,45,.12); --card-border:#E5E9EC;
--font-display:Georgia,'Times New Roman',serif; --font-ui:'Poppins',system-ui,sans-serif;
--container:1180px;
}
/* ---------- How It Works numbered steps (block) ---------- */
.sa-howitworks{padding:clamp(64px,9vw,120px) 24px;background:#fff;}
.sa-howitworks__inner{max-width:var(--container);margin:0 auto;}
.sa-howitworks__head{margin:0 auto clamp(40px,6vw,72px);text-align:center;}
.sa-howitworks__h2{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,4vw,52px);letter-spacing:.02em;line-height:1.08;margin:0;text-transform:uppercase;}
.sa-steps{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(48px,7vw,96px);position:relative;list-style:none;padding:0;margin:0;}
.sa-steps::before{content:"";position:absolute;top:24px;bottom:24px;left:50%;width:1px;background:var(--sail-rule);}
.sa-step{display:grid;grid-template-columns:auto 1fr;column-gap:32px;align-items:start;padding:clamp(28px,3.5vw,40px) 0;border-bottom:1px solid var(--sail-rule);}
.sa-step:nth-last-child(-n+2):nth-child(odd){border-bottom:none;}
.sa-step:nth-last-child(1){border-bottom:none;}
.sa-step:nth-child(1),.sa-step:nth-child(2){padding-top:0;}
.sa-step__num{font-family:var(--font-display);font-weight:400;font-size:clamp(44px,5.4vw,72px);line-height:.9;color:var(--sail-orange);letter-spacing:-.02em;min-width:1.6em;}
.sa-step__body{padding-top:8px;}
.sa-step__title{font-family:var(--font-display);font-weight:600;font-size:clamp(23px,2.4vw,29px);line-height:1.15;margin:0 0 12px;}
.sa-step__copy{font-size:16px;line-height:1.7;margin:0;opacity:1;max-width:40ch;}
@media(max-width:860px){.sa-steps{grid-template-columns:1fr;}.sa-steps::before{display:none;}.sa-step{grid-template-columns:1fr;row-gap:12px;padding:32px 0;text-align:center;}.sa-step:nth-child(1){padding-top:0;}.sa-step__num{margin:0 auto;}.sa-step__copy{margin:0 auto;}}
/* === ALL-CAPS + CENTERED (sa-copywriting §2, SCOPED 2026-06-10) === */
.sa-howitworks h1,.sa-howitworks h2,.sa-howitworks h3{text-transform:uppercase !important;text-align:center !important;}
.sa-howitworks .cva-btn,.sa-howitworks .cva-btn--primary,.sa-howitworks .cva-btn--ghost,.sa-howitworks .sa-cta-banner-btn,.sa-howitworks .sa-sidebar-btn,.sa-howitworks .sa-side-btn,.sa-howitworks .sa-submit-btn,.sa-howitworks .sa-bsg-cta,.sa-howitworks .sa-hero-cta,.sa-howitworks .sa-partner-btn,.sa-howitworks .sa-btn,.sa-howitworks .sa-cta,.sa-howitworks .sa-cta-btn,.sa-howitworks .btn{text-transform:uppercase !important;text-align:center !important;}