<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&display=swap" rel="stylesheet">

<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Nunito', Arial, sans-serif; }

  .section { padding: 56px 60px; }

  .steps {
    display: flex;
    gap: 0;
    justify-content: space-between;
    align-items: flex-start;
  }

  .step {
    flex: 1;
    text-align: center;
    padding: 0 24px;
    position: relative;
  }

  /* Arrow connector */
  .step:not(:last-child)::after {
    content: '→';
    position: absolute;
    right: -10px;
    top: 18px;
    font-size: 22px;
    color: #b8d8f0;
  }

  .step-num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #e8f4fc;
    border: 2px solid #0493c8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 20px;
    font-weight: 900;
    color: #1d4687;
  }

  .step h3 {
    font-size: 16px;
    font-weight: 800;
    color: #1B75BC;
    margin-bottom: 8px;
  }

  .step p {
    font-size: 14px;
    color: #686868;
    line-height: 1.55;
  }

  /* ── Mobile ── */
  @media (max-width: 640px) {
    .section { padding: 40px 24px; }

    .steps {
      flex-direction: column;
      align-items: stretch;
      gap: 36px;
    }

    .step {
      display: flex;
      align-items: flex-start;
      text-align: left;
      padding: 0;
      gap: 16px;
    }

    /* Hide the → arrow on mobile */
    .step:not(:last-child)::after { display: none; }

    /* Draw a vertical line between steps on mobile */
    .step:not(:last-child)::before {
      content: '';
      position: absolute;
      left: 27px;
      top: 56px;
      width: 2px;
      height: calc(100% + 36px);
      background: #b8d8f0;
    }

    .step-num { flex-shrink: 0; margin: 0; }

    .step-content { padding-top: 8px; }

    .step h3 { font-size: 16px; margin-bottom: 6px; }
    .step p { font-size: 14px; }
  }
</style>