Service List 01

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="services_component">
  <div class="services_container">
    <div class="services_header">
      <div class="services_headwrap">
        <p class="services_eyebrow">What we do</p>
        <h2 class="services_title">
          <span class="services_title_accent">faster.</span>
        </h2>
      </div>
      <a class="services_cta" href="#">Book a demo →</a>
    </div>
    <ul class="services_list">
      <li class="services_row">
        <p class="services_num">01</p>
        <h3 class="services_name">Automated Reconciliation</h3>
        <p class="services_desc">Match thousands of transactions across banks and ledgers in seconds — no more month-end spreadsheet marathons.</p>
        <a class="services_arrow" href="#">→</a>
      </li>
      <li class="services_row">
        <p class="services_num">02</p>
        <h3 class="services_name">Real-Time Cash Flow</h3>
        <p class="services_desc">Live dashboards forecast runway and burn so leadership always knows exactly where the money is going.</p>
        <a class="services_arrow" href="#">→</a>
      </li>
      <li class="services_row">
        <p class="services_num">03</p>
        <h3 class="services_name">Compliance & Audit Trails</h3>
        <p class="services_desc">Every entry is timestamped and immutable, giving auditors a clean, verifiable record from day one — SOC 2 ready.</p>
        <a class="services_arrow" href="#">→</a>
      </li>
      <li class="services_row">
        <p class="services_num">04</p>
        <h3 class="services_name">Team Spend Controls</h3>
        <p class="services_desc">Set budgets, issue virtual cards, and approve expenses in one flow — with policy guardrails baked into every purchase.</p>
        <a class="services_arrow" href="#">→</a>
      </li>
    </ul>
  </div>
</section>

<style>
.services_component {
  width:100%;
  background:#f7f8fa;
  padding:120px 24px;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  box-sizing:border-box;
}

.services_container {
  max-width:1180px;
  margin:0 auto;
}

.services_header {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  flex-wrap:wrap;
  margin-bottom:72px;
}

.services_headwrap {
  max-width:620px;
}

.services_eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#0f4c3a;
  margin:0 0 22px 0;
}

.services_title {
  color:#101418;
  font-size:52px;
  line-height:1.04;
  font-weight:600;
  letter-spacing:-0.02em;
  margin:0;
}

.services_title_accent {
  color:#0f4c3a;
  font-style:italic;
}

.services_cta {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#0f4c3a;
  color:#ffffff;
  font-size:15px;
  font-weight:600;
  padding:15px 26px;
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;
  transition:background .2s ease;
}

.services_list {
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid #e2e5ea;
}

.services_row {
  display:grid;
  grid-template-columns:80px 1.4fr 1.6fr 44px;
  align-items:center;
  gap:32px;
  padding:38px 8px;
  border-bottom:1px solid #e2e5ea;
  transition:padding .25s ease,background .25s ease;
}

.services_num {
  color:#0f4c3a;
  font-size:18px;
  font-weight:600;
  letter-spacing:0.04em;
  margin:0;
}

.services_name {
  color:#101418;
  font-size:28px;
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.1;
  margin:0;
}

.services_desc {
  color:#5b6470;
  font-size:16px;
  line-height:1.6;
  margin:0;
}

.services_arrow {
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid #cfd4db;
  color:#0f4c3a;
  font-size:18px;
  text-decoration:none;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
</style>