Edit element

sa-cva-how-it-works

Name (slug) Version

Category Status

Description When to use Source skill Rules (one per line, leading dash optional) Live reference URL Deployment notes HTML

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

Cancel