```html
<!--
  Note: step number is hardcoded per variant. Pick the right variant class per
  card position (bf-step-1 / bf-step-2 / bf-step-3) and match the number text
  inside .bf-step-num to the position (01 / 02 / 03).
-->
<div class="bf-timeline-step bf-step-1">
  <div class="bf-step-num">01</div>
  <h3 class="bf-step-title">{HEADLINE}</h3>
  <p class="bf-step-desc">{LEDE}</p>
  <div class="bf-step-connector"></div>
</div>

<style>
  .bf-timeline-step {
    position: relative;
    flex: 1;
    border: var(--bf-border-bold);
    padding: 32px;
    box-shadow: var(--bf-shadow-sm);
    color: var(--ink);
  }
  /* Variants — pick one per timeline position; bf-step-1 → "01", etc. */
  .bf-step-1 {
    background: var(--brand-primary);
  }
  .bf-step-2 {
    background: var(--brand-secondary);
  }
  .bf-step-3 {
    background: var(--brand-accent);
  }
  .bf-step-num {
    font-family: "Inter", sans-serif;
    font-weight: 900;
    font-size: 48px;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    color: var(--ink);
    opacity: 0.6;
  }
  .bf-step-title {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: var(--ink);
  }
  .bf-step-desc {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.5;
    color: var(--ink);
  }
  .bf-step-connector {
    position: absolute;
    top: 50%;
    right: -28px;
    width: 28px;
    height: 4px;
    background: var(--ink);
    transform: translateY(-50%);
    z-index: 5;
  }
</style>
```
