> ## Documentation Index
> Fetch the complete documentation index at: https://developers.dwolla.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Dwolla Developers

> Build, test, and launch payment solutions with Dwolla's comprehensive API documentation and developer tools.

<div className="dw-hero-bg" style={{ position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 0 }} />

<div style={{ position: 'relative', zIndex: 1 }}>
  <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '5rem 1.5rem 2rem' }}>
    <div className="dw-hero-grid">
      <div>
        <a href="/docs/sdks-tools/typescript" className="dw-pill-announcement">
          <span style={{ width: '0.5rem', height: '0.5rem', borderRadius: '9999px', background: '#10b981', display: 'inline-block' }} />

          <span>New: Dwolla-TypeScript SDK is now available</span>
          <span style={{ color: '#ca4c24', fontWeight: 500, marginLeft: '0.25rem' }}>Learn more →</span>
        </a>

        <h1 className="dw-text-heading" style={{ marginTop: '2rem', fontSize: 'clamp(2.25rem, 5vw, 3.5rem)', letterSpacing: '-0.03em', lineHeight: 1.08, fontWeight: 800, color: '#0f172a' }}>
          <span style={{ color: '#ca4c24' }}>The Unified API</span>

          {' for '}

          <br />

          {'Programmable Bank Payments'}
        </h1>

        <p className="dw-text-body" style={{ marginTop: '1.5rem', fontSize: '1.125rem', lineHeight: 1.7, color: '#475569', maxWidth: '36rem' }}>
          Build, test, and launch payment solutions with Dwolla's comprehensive API documentation and developer tools.
        </p>

        <div style={{ marginTop: '2rem', display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '0.75rem' }}>
          <a href="https://accounts-sandbox.dwolla.com/sign-up" className="dw-btn-primary">
            Start building →
          </a>

          <a href="/docs" className="dw-btn-secondary">
            View documentation
          </a>
        </div>
      </div>

      {/* Right Column — 3D Layered Card Stack */}

      <div className="dw-stack-scene">
        {/* Labels — appear on hover, positioned on top of cards */}

        <div className="dw-stack-label dw-stack-label-infra">Infrastructure</div>
        <div className="dw-stack-label dw-stack-label-code">API Layer</div>
        <div className="dw-stack-label dw-stack-label-app">Your Brand</div>

        <div className="dw-stack-group">
          {/* Card 1 — Back: Infrastructure Layer */}

          <div className="dw-stack-card dw-stack-back">
            <div className="dw-stack-back-grid">
              {/* Top label */}

              <div style={{ position: 'absolute', top: '16px', left: '16px', display: 'flex', alignItems: 'center', gap: '6px' }}>
                <span style={{ width: '8px', height: '8px', borderRadius: '50%', background: 'rgba(167,139,250,0.6)' }} />

                <span style={{ width: '3rem', height: '0.25rem', borderRadius: '2px', background: 'rgba(255,255,255,0.15)' }} />
              </div>

              {/* Rail labels — positioned above each flow path */}

              <div style={{ position: 'absolute', top: '36px', left: '38px', fontSize: '0.875rem', fontWeight: 600, color: 'rgba(255,255,255,0.3)', letterSpacing: '0.02em', fontFamily: 'Inter, sans-serif' }}>ACH</div>
              <div style={{ position: 'absolute', top: '152px', left: '60px', fontSize: '0.875rem', fontWeight: 600, color: 'rgba(255,255,255,0.3)', letterSpacing: '0.02em', fontFamily: 'Inter, sans-serif' }}>RTP</div>
              <div style={{ position: 'absolute', top: '242px', left: '70px', fontSize: '0.875rem', fontWeight: 600, color: 'rgba(255,255,255,0.3)', letterSpacing: '0.02em', fontFamily: 'Inter, sans-serif' }}>FedNow</div>

              {/* Flow path 1 */}

              <div style={{ position: 'absolute', top: '55px', left: '25px', width: '70px', height: '1px', borderTop: '1.5px dashed rgba(255,255,255,0.25)' }} />

              <div style={{ position: 'absolute', top: '55px', left: '95px', width: '1px', height: '55px', borderLeft: '1.5px dashed rgba(255,255,255,0.25)' }} />

              <div style={{ position: 'absolute', top: '110px', left: '95px', width: '65px', height: '1px', borderTop: '1.5px dashed rgba(255,255,255,0.25)' }} />

              <div style={{ position: 'absolute', top: '49px', left: '18px', width: '12px', height: '12px', borderRadius: '50%', background: 'rgba(167,139,250,0.5)', boxShadow: '0 0 10px rgba(167,139,250,0.3)' }} />

              <div style={{ position: 'absolute', top: '104px', left: '155px', width: '12px', height: '12px', borderRadius: '50%', background: 'rgba(167,139,250,0.5)', boxShadow: '0 0 10px rgba(167,139,250,0.3)' }} />

              <div style={{ position: 'absolute', top: '48px', left: '88px', width: '16px', height: '16px', borderRadius: '3px', border: '1.5px solid rgba(167,139,250,0.35)', background: 'rgba(167,139,250,0.08)' }} />

              {/* Flow path 2 */}

              <div style={{ position: 'absolute', top: '170px', left: '40px', width: '90px', height: '1px', borderTop: '1.5px dashed rgba(255,255,255,0.2)' }} />

              <div style={{ position: 'absolute', top: '170px', left: '130px', width: '1px', height: '45px', borderLeft: '1.5px dashed rgba(255,255,255,0.2)' }} />

              <div style={{ position: 'absolute', top: '215px', left: '130px', width: '55px', height: '1px', borderTop: '1.5px dashed rgba(255,255,255,0.2)' }} />

              <div style={{ position: 'absolute', top: '164px', left: '33px', width: '12px', height: '12px', borderRadius: '50%', background: 'rgba(129,140,248,0.4)', boxShadow: '0 0 10px rgba(129,140,248,0.25)' }} />

              <div style={{ position: 'absolute', top: '163px', left: '123px', width: '16px', height: '16px', borderRadius: '3px', border: '1.5px solid rgba(129,140,248,0.3)', background: 'rgba(129,140,248,0.06)' }} />

              <div style={{ position: 'absolute', top: '209px', left: '180px', width: '12px', height: '12px', borderRadius: '50%', background: 'rgba(129,140,248,0.4)', boxShadow: '0 0 10px rgba(129,140,248,0.25)' }} />

              {/* Flow path 3 */}

              <div style={{ position: 'absolute', top: '265px', left: '55px', width: '100px', height: '1px', borderTop: '1.5px dashed rgba(255,255,255,0.15)' }} />

              <div style={{ position: 'absolute', top: '259px', left: '48px', width: '12px', height: '12px', borderRadius: '50%', background: 'rgba(196,181,253,0.35)' }} />

              <div style={{ position: 'absolute', top: '259px', left: '150px', width: '12px', height: '12px', borderRadius: '50%', background: 'rgba(196,181,253,0.35)' }} />

              {/* Bottom bars */}

              <div style={{ position: 'absolute', bottom: '40px', left: '16px', right: '16px', height: '26px', borderRadius: '5px', background: 'rgba(255,255,255,0.06)', display: 'flex', alignItems: 'center', padding: '0 10px', gap: '6px' }}>
                <span style={{ width: '7px', height: '7px', borderRadius: '50%', background: '#a78bfa' }} />

                <span style={{ width: '45%', height: '4px', borderRadius: '2px', background: 'rgba(255,255,255,0.15)' }} />
              </div>

              <div style={{ position: 'absolute', bottom: '12px', left: '16px', right: '16px', display: 'flex', gap: '4px' }}>
                <span style={{ flex: 1, height: '4px', borderRadius: '2px', background: 'rgba(167,139,250,0.2)' }} />

                <span style={{ flex: 0.6, height: '4px', borderRadius: '2px', background: 'rgba(129,140,248,0.15)' }} />

                <span style={{ flex: 0.8, height: '4px', borderRadius: '2px', background: 'rgba(196,181,253,0.12)' }} />
              </div>
            </div>
          </div>

          {/* Card 2 — Middle: Code Layer */}

          <div className="dw-stack-card dw-stack-mid">
            <div style={{ padding: '1rem 0.875rem', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
              {/* Window dots + tab */}

              <div style={{ display: 'flex', alignItems: 'center', gap: '5px', marginBottom: '0.25rem', paddingBottom: '0.5rem', borderBottom: '1px solid rgba(51,65,85,0.4)' }}>
                <span style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#ef4444' }} />

                <span style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#eab308' }} />

                <span style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#22c55e' }} />

                <span style={{ marginLeft: '0.75rem', width: '3.5rem', height: '0.3125rem', borderRadius: '2px', background: 'rgba(148,163,184,0.25)' }} />
              </div>

              <div style={{ display: 'flex', gap: '0.3125rem' }}>
                <span style={{ width: '1.75rem', height: '0.3125rem', borderRadius: '2px', background: '#c084fc' }} />

                <span style={{ width: '3.5rem', height: '0.3125rem', borderRadius: '2px', background: '#7dd3fc' }} />

                <span style={{ width: '0.5rem', height: '0.3125rem', borderRadius: '2px', background: '#64748b' }} />

                <span style={{ width: '2rem', height: '0.3125rem', borderRadius: '2px', background: '#c084fc' }} />

                <span style={{ width: '4rem', height: '0.3125rem', borderRadius: '2px', background: '#fbbf24' }} />
              </div>

              <div style={{ display: 'flex', gap: '0.3125rem', paddingLeft: '0.75rem' }}>
                <span style={{ width: '2.5rem', height: '0.3125rem', borderRadius: '2px', background: '#7dd3fc' }} />

                <span style={{ width: '0.5rem', height: '0.3125rem', borderRadius: '2px', background: '#64748b' }} />
              </div>

              <div style={{ display: 'flex', gap: '0.3125rem', paddingLeft: '1.5rem' }}>
                <span style={{ width: '2.25rem', height: '0.3125rem', borderRadius: '2px', background: '#7dd3fc' }} />

                <span style={{ width: '0.5rem', height: '0.3125rem', borderRadius: '2px', background: '#64748b' }} />
              </div>

              <div style={{ display: 'flex', gap: '0.3125rem', paddingLeft: '2.25rem' }}>
                <span style={{ width: '1.5rem', height: '0.3125rem', borderRadius: '2px', background: '#7dd3fc' }} />

                <span style={{ width: '4.5rem', height: '0.3125rem', borderRadius: '2px', background: '#86efac' }} />
              </div>

              <div style={{ display: 'flex', gap: '0.3125rem', paddingLeft: '1.5rem' }}>
                <span style={{ width: '0.75rem', height: '0.3125rem', borderRadius: '2px', background: '#64748b' }} />
              </div>

              <div style={{ display: 'flex', gap: '0.3125rem', paddingLeft: '1.5rem' }}>
                <span style={{ width: '3.75rem', height: '0.3125rem', borderRadius: '2px', background: '#7dd3fc' }} />

                <span style={{ width: '0.5rem', height: '0.3125rem', borderRadius: '2px', background: '#64748b' }} />
              </div>

              <div style={{ display: 'flex', gap: '0.3125rem', paddingLeft: '2.25rem' }}>
                <span style={{ width: '1.5rem', height: '0.3125rem', borderRadius: '2px', background: '#7dd3fc' }} />

                <span style={{ width: '5.5rem', height: '0.3125rem', borderRadius: '2px', background: '#86efac' }} />
              </div>

              <div style={{ display: 'flex', gap: '0.3125rem', paddingLeft: '0.75rem' }}>
                <span style={{ width: '0.75rem', height: '0.3125rem', borderRadius: '2px', background: '#64748b' }} />
              </div>

              <div style={{ display: 'flex', gap: '0.3125rem', paddingLeft: '0.75rem' }}>
                <span style={{ width: '2.5rem', height: '0.3125rem', borderRadius: '2px', background: '#7dd3fc' }} />

                <span style={{ width: '0.5rem', height: '0.3125rem', borderRadius: '2px', background: '#64748b' }} />
              </div>

              <div style={{ display: 'flex', gap: '0.3125rem', paddingLeft: '1.5rem' }}>
                <span style={{ width: '3rem', height: '0.3125rem', borderRadius: '2px', background: '#7dd3fc' }} />

                <span style={{ width: '2rem', height: '0.3125rem', borderRadius: '2px', background: '#86efac' }} />
              </div>

              <div style={{ display: 'flex', gap: '0.3125rem', paddingLeft: '1.5rem' }}>
                <span style={{ width: '2rem', height: '0.3125rem', borderRadius: '2px', background: '#7dd3fc' }} />

                <span style={{ width: '2.75rem', height: '0.3125rem', borderRadius: '2px', background: '#fdba74' }} />
              </div>

              <div style={{ display: 'flex', gap: '0.3125rem', paddingLeft: '0.75rem' }}>
                <span style={{ width: '0.75rem', height: '0.3125rem', borderRadius: '2px', background: '#64748b' }} />
              </div>

              <div style={{ display: 'flex', gap: '0.3125rem' }}>
                <span style={{ width: '1.25rem', height: '0.3125rem', borderRadius: '2px', background: '#64748b' }} />
              </div>

              {/* Status bar */}

              <div style={{ marginTop: 'auto', paddingTop: '0.5rem', borderTop: '1px solid rgba(51,65,85,0.4)', display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
                <span style={{ width: '2rem', height: '0.3125rem', borderRadius: '2px', background: 'rgba(14,165,233,0.4)' }} />

                <span style={{ width: '3.5rem', height: '0.3125rem', borderRadius: '2px', background: 'rgba(148,163,184,0.2)' }} />

                <span style={{ marginLeft: 'auto', width: '6px', height: '6px', borderRadius: '50%', background: '#10b981' }} />
              </div>
            </div>
          </div>

          {/* Card 3 — Front: Your App Layer */}

          <div className="dw-stack-card dw-stack-front">
            <div style={{ padding: '0.875rem' }}>
              {/* Top bar */}

              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '0.75rem', paddingBottom: '0.5rem', borderBottom: '1px solid #f1f5f9' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
                  <span style={{ width: '1.125rem', height: '1.125rem', borderRadius: '0.25rem', background: 'linear-gradient(135deg, #10b981, #059669)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <span style={{ color: 'white', fontSize: '0.4375rem', fontWeight: 800 }}>D</span>
                  </span>

                  <span style={{ fontSize: '0.5625rem', fontWeight: 700, color: '#334155', letterSpacing: '0.04em' }}>YOUR BRAND</span>
                </div>

                <span style={{ width: '2.25rem', height: '0.875rem', borderRadius: '0.25rem', background: '#10b981' }} />
              </div>

              {/* Transfer success */}

              <div style={{ background: '#f0fdf4', borderRadius: '0.5rem', padding: '0.625rem', marginBottom: '0.5rem', border: '1px solid #bbf7d0' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', marginBottom: '0.375rem' }}>
                  <span style={{ width: '0.875rem', height: '0.875rem', borderRadius: '50%', background: '#10b981', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <span style={{ color: 'white', fontSize: '0.4375rem', fontWeight: 800 }}>✓</span>
                  </span>

                  <span style={{ fontSize: '0.5625rem', fontWeight: 600, color: '#166534' }}>Payment Sent</span>
                </div>

                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontSize: '1.125rem', fontWeight: 700, color: '#15803d', letterSpacing: '-0.02em' }}>\$225.00</span>
                  <span style={{ fontSize: '0.5rem', color: '#6b7280' }}>Just now</span>
                </div>

                <div style={{ marginTop: '0.375rem', display: 'flex', gap: '0.25rem' }}>
                  <span style={{ fontSize: '0.4375rem', background: '#dcfce7', color: '#166534', padding: '0.0625rem 0.3125rem', borderRadius: '9999px', fontWeight: 500 }}>ACH</span>
                  <span style={{ fontSize: '0.4375rem', background: '#dcfce7', color: '#166534', padding: '0.0625rem 0.3125rem', borderRadius: '9999px', fontWeight: 500 }}>Same-Day</span>
                </div>
              </div>

              {/* Recent transfers */}

              <div style={{ background: '#f8fafc', borderRadius: '0.5rem', padding: '0.625rem' }}>
                <div style={{ fontSize: '0.5rem', fontWeight: 600, color: '#475569', marginBottom: '0.375rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Recent Transfers</div>

                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0.25rem 0', borderBottom: '1px solid #e2e8f0' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
                    <span style={{ width: '1rem', height: '1rem', borderRadius: '50%', background: '#ede9fe' }} />

                    <div>
                      <div style={{ height: '0.25rem', width: '2.5rem', borderRadius: '2px', background: '#cbd5e1', marginBottom: '0.125rem' }} />

                      <div style={{ height: '0.1875rem', width: '1.5rem', borderRadius: '2px', background: '#e2e8f0' }} />
                    </div>
                  </div>

                  <span style={{ fontSize: '0.5rem', fontWeight: 600, color: '#334155' }}>\$1,250</span>
                </div>

                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0.25rem 0', borderBottom: '1px solid #e2e8f0' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
                    <span style={{ width: '1rem', height: '1rem', borderRadius: '50%', background: '#fef3c7' }} />

                    <div>
                      <div style={{ height: '0.25rem', width: '3rem', borderRadius: '2px', background: '#cbd5e1', marginBottom: '0.125rem' }} />

                      <div style={{ height: '0.1875rem', width: '1.75rem', borderRadius: '2px', background: '#e2e8f0' }} />
                    </div>
                  </div>

                  <span style={{ fontSize: '0.5rem', fontWeight: 600, color: '#334155' }}>\$850</span>
                </div>

                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0.25rem 0' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
                    <span style={{ width: '1rem', height: '1rem', borderRadius: '50%', background: '#e0f2fe' }} />

                    <div>
                      <div style={{ height: '0.25rem', width: '2rem', borderRadius: '2px', background: '#cbd5e1', marginBottom: '0.125rem' }} />

                      <div style={{ height: '0.1875rem', width: '2rem', borderRadius: '2px', background: '#e2e8f0' }} />
                    </div>
                  </div>

                  <span style={{ fontSize: '0.5rem', fontWeight: 600, color: '#334155' }}>\$3,400</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    {/* Trust Strip */}

    <div style={{ marginTop: '3rem', display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '2rem', fontSize: '0.875rem', color: '#64748b' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
        <span style={{ width: '0.5rem', height: '0.5rem', borderRadius: '9999px', background: '#10b981', display: 'inline-block' }} />

        <span className="dw-text-muted">99.9% uptime</span>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
        <Icon icon="chart-line" size={16} color="#94a3b8" />

        <span className="dw-text-muted">126M+ annual transaction volume</span>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
        <Icon icon="bolt" size={16} color="#94a3b8" />

        <span className="dw-text-muted">ACH, Same-Day ACH, RTP, FedNow, Push to Card</span>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
        <Icon icon="clock" size={16} color="#94a3b8" />

        <span className="dw-text-muted">16+ years of payment experience</span>
      </div>
    </div>
  </div>
</div>

<div style={{ position: 'relative', zIndex: 1, maxWidth: '1200px', margin: '0 auto', padding: '0 1.5rem 5rem' }}>
  <div className="grid md:grid-cols-3 gap-4">
    <a href="/docs" className="dw-card" style={{ padding: '1.5rem', textDecoration: 'none', display: 'block' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div className="dw-icon-bg-orange">
          <Icon icon="book-open" size={20} />
        </div>

        <Icon icon="arrow-up-right-from-square" size={16} color="#94a3b8" />
      </div>

      <h2 className="dw-text-heading" style={{ marginTop: '1.25rem', fontSize: '1.125rem', fontWeight: 600, color: '#0f172a' }}>Guides and Concepts</h2>
      <p className="dw-text-body" style={{ marginTop: '0.5rem', fontSize: '0.875rem', lineHeight: 1.6, color: '#64748b' }}>Foundational documentation, quickstarts, and implementation guidance organized around how teams actually build.</p>
    </a>

    <a href="/docs/api-reference" className="dw-card" style={{ padding: '1.5rem', textDecoration: 'none', display: 'block' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div className="dw-icon-bg-sky">
          <Icon icon="code" size={20} />
        </div>

        <Icon icon="arrow-up-right-from-square" size={16} color="#94a3b8" />
      </div>

      <h2 className="dw-text-heading" style={{ marginTop: '1.25rem', fontSize: '1.125rem', fontWeight: 600, color: '#0f172a' }}>API Reference</h2>
      <p className="dw-text-body" style={{ marginTop: '0.5rem', fontSize: '0.875rem', lineHeight: 1.6, color: '#64748b' }}>Endpoints, request formats, and response examples for customers, funding sources, transfers, and webhooks.</p>
    </a>

    <a href="/docs/sdks-tools" className="dw-card" style={{ padding: '1.5rem', textDecoration: 'none', display: 'block' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div className="dw-icon-bg-emerald">
          <Icon icon="cubes" size={20} />
        </div>

        <Icon icon="arrow-up-right-from-square" size={16} color="#94a3b8" />
      </div>

      <h2 className="dw-text-heading" style={{ marginTop: '1.25rem', fontSize: '1.125rem', fontWeight: 600, color: '#0f172a' }}>SDKs and Tools</h2>
      <p className="dw-text-body" style={{ marginTop: '0.5rem', fontSize: '0.875rem', lineHeight: 1.6, color: '#64748b' }}>Official SDKs for TypeScript, PHP, Python, Ruby, C#, and Kotlin/Java, plus Postman collections and developer tooling to accelerate integration.</p>
    </a>
  </div>
</div>

<div style={{ position: 'relative', zIndex: 1, maxWidth: '1200px', margin: '0 auto', padding: '0 1.5rem 5rem' }}>
  <div style={{ maxWidth: '40rem', margin: '0 auto 2.5rem', textAlign: 'center' }}>
    <span className="dw-section-label">Platform capabilities</span>
    <h2 className="dw-text-heading" style={{ marginTop: '1rem', fontSize: '1.5rem', fontWeight: 700, letterSpacing: '-0.02em', color: '#0f172a' }}>Everything you need to build powerful payment experiences</h2>
    <p className="dw-text-body" style={{ margin: '0.75rem auto 0', fontSize: '0.875rem', lineHeight: 1.6, color: '#64748b', maxWidth: '36rem' }}>Dwolla's API provides a complete toolkit for account-to-account transfers, customer verification, and payment management.</p>
  </div>

  <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
    <div className="dw-card" style={{ padding: '1.25rem' }}>
      <div className="dw-icon-bg-violet" style={{ marginBottom: '1rem' }}>
        <Icon icon="money-bill-transfer" size={20} />
      </div>

      <h3 className="dw-text-heading" style={{ fontWeight: 600, color: '#0f172a' }}>Account-to-Account Transfers</h3>
      <p className="dw-text-body" style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#64748b', lineHeight: 1.5 }}>Initiate money movement between bank accounts with a unified API.</p>

      <div style={{ marginTop: '0.875rem', display: 'flex', flexDirection: 'column', gap: '0.375rem' }}>
        <span className="dw-cap-feature"><Icon icon="check" size={12} color="#10b981" /> ACH, Instant payments, and Wire transfers</span>
        <span className="dw-cap-feature"><Icon icon="check" size={12} color="#10b981" /> Flexible configuration of payment speed</span>
        <span className="dw-cap-feature"><Icon icon="check" size={12} color="#10b981" /> Real-time transfer status updates</span>
      </div>
    </div>

    <div className="dw-card" style={{ padding: '1.25rem' }}>
      <div className="dw-icon-bg-indigo" style={{ marginBottom: '1rem' }}>
        <Icon icon="users" size={20} />
      </div>

      <h3 className="dw-text-heading" style={{ fontWeight: 600, color: '#0f172a' }}>Flexible End-user Types</h3>
      <p className="dw-text-body" style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#64748b', lineHeight: 1.5 }}>Support various customer profiles with different verification levels.</p>

      <div style={{ marginTop: '0.875rem', display: 'flex', flexDirection: 'column', gap: '0.375rem' }}>
        <span className="dw-cap-feature"><Icon icon="check" size={12} color="#10b981" /> Personal and Business — Identity Verified, Unverified, and Receive-only Users</span>
        <span className="dw-cap-feature"><Icon icon="check" size={12} color="#10b981" /> Tailored onboarding requirements by end-user type</span>
        <span className="dw-cap-feature"><Icon icon="check" size={12} color="#10b981" /> Progressive KYC based on user needs</span>
      </div>
    </div>

    <div className="dw-card" style={{ padding: '1.25rem' }}>
      <div className="dw-icon-bg-blue" style={{ marginBottom: '1rem' }}>
        <Icon icon="building-columns" size={20} />
      </div>

      <h3 className="dw-text-heading" style={{ fontWeight: 600, color: '#0f172a' }}>Open Banking Services</h3>
      <p className="dw-text-body" style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#64748b', lineHeight: 1.5 }}>Connect to bank accounts securely with open banking APIs.</p>

      <div style={{ marginTop: '0.875rem', display: 'flex', flexDirection: 'column', gap: '0.375rem' }}>
        <span className="dw-cap-feature"><Icon icon="check" size={12} color="#10b981" /> Instant account verification</span>
        <span className="dw-cap-feature"><Icon icon="check" size={12} color="#10b981" /> Real-time bank account balance check</span>
        <span className="dw-cap-feature"><Icon icon="check" size={12} color="#10b981" /> Enhanced user experience</span>
      </div>
    </div>

    <div className="dw-card" style={{ padding: '1.25rem' }}>
      <div className="dw-icon-bg-fuchsia" style={{ marginBottom: '1rem' }}>
        <Icon icon="webhook" size={20} />
      </div>

      <h3 className="dw-text-heading" style={{ fontWeight: 600, color: '#0f172a' }}>Webhooks</h3>
      <p className="dw-text-body" style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#64748b', lineHeight: 1.5 }}>Real-time event notifications.</p>

      <div style={{ marginTop: '0.875rem', display: 'flex', flexDirection: 'column', gap: '0.375rem' }}>
        <span className="dw-cap-feature"><Icon icon="check" size={12} color="#10b981" /> Transfer status notifications</span>
        <span className="dw-cap-feature"><Icon icon="check" size={12} color="#10b981" /> Customer verification updates</span>
        <span className="dw-cap-feature"><Icon icon="check" size={12} color="#10b981" /> Secure signature verification</span>
      </div>
    </div>

    <div className="dw-card" style={{ padding: '1.25rem' }}>
      <div className="dw-icon-bg-rose" style={{ marginBottom: '1rem' }}>
        <Icon icon="shield-check" size={20} />
      </div>

      <h3 className="dw-text-heading" style={{ fontWeight: 600, color: '#0f172a' }}>Security & Compliance</h3>
      <p className="dw-text-body" style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#64748b', lineHeight: 1.5 }}>Enterprise-grade security features.</p>

      <div style={{ marginTop: '0.875rem', display: 'flex', flexDirection: 'column', gap: '0.375rem' }}>
        <span className="dw-cap-feature"><Icon icon="check" size={12} color="#10b981" /> SOC 2 Type 2 compliant</span>
        <span className="dw-cap-feature"><Icon icon="check" size={12} color="#10b981" /> Tokenization for sensitive data</span>
        <span className="dw-cap-feature"><Icon icon="check" size={12} color="#10b981" /> API key & OAuth authentication</span>
      </div>
    </div>

    <div className="dw-card" style={{ padding: '1.25rem' }}>
      <div className="dw-icon-bg-slate" style={{ marginBottom: '1rem' }}>
        <Icon icon="screwdriver-wrench" size={20} />
      </div>

      <h3 className="dw-text-heading" style={{ fontWeight: 600, color: '#0f172a' }}>Developer Tools</h3>
      <p className="dw-text-body" style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#64748b', lineHeight: 1.5 }}>Resources to accelerate development.</p>

      <div style={{ marginTop: '0.875rem', display: 'flex', flexDirection: 'column', gap: '0.375rem' }}>
        <span className="dw-cap-feature"><Icon icon="check" size={12} color="#10b981" /> SDKs for popular languages</span>
        <span className="dw-cap-feature"><Icon icon="check" size={12} color="#10b981" /> Sandbox testing environment</span>
        <span className="dw-cap-feature"><Icon icon="check" size={12} color="#10b981" /> API explorer & request builder</span>
      </div>
    </div>
  </div>
</div>

<div style={{ position: 'relative', zIndex: 1, maxWidth: '1200px', margin: '0 auto', padding: '0 1.5rem 5rem' }}>
  <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '2rem' }}>
    <span className="dw-section-label">Popular documentation</span>

    <div className="dw-divider" />

    <a href="/docs" className="dw-link-orange" style={{ fontSize: '0.875rem', whiteSpace: 'nowrap' }}>View all</a>
  </div>

  <div className="grid sm:grid-cols-2 xl:grid-cols-4 gap-4">
    <a href="/docs/quickstart" className="dw-card-flat" style={{ padding: '1rem 1.25rem', textDecoration: 'none', display: 'flex', alignItems: 'start', gap: '0.75rem' }}>
      <Icon icon="rocket" size={16} color="#ca4c24" style={{ marginTop: '0.125rem', flexShrink: 0 }} />

      <div>
        <div className="dw-text-heading" style={{ fontWeight: 500, fontSize: '0.875rem', color: '#0f172a' }}>Quickstart</div>
        <div className="dw-text-body" style={{ marginTop: '0.25rem', fontSize: '0.75rem', color: '#64748b' }}>First API call in under 5 minutes</div>
      </div>
    </a>

    <a href="/docs/customer-types" className="dw-card-flat" style={{ padding: '1rem 1.25rem', textDecoration: 'none', display: 'flex', alignItems: 'start', gap: '0.75rem' }}>
      <Icon icon="users" size={16} color="#8b5cf6" style={{ marginTop: '0.125rem', flexShrink: 0 }} />

      <div>
        <div className="dw-text-heading" style={{ fontWeight: 500, fontSize: '0.875rem', color: '#0f172a' }}>Customer Types</div>
        <div className="dw-text-body" style={{ marginTop: '0.25rem', fontSize: '0.75rem', color: '#64748b' }}>Choose the right customer type for your end users</div>
      </div>
    </a>

    <a href="/docs/bank-funding-source" className="dw-card-flat" style={{ padding: '1rem 1.25rem', textDecoration: 'none', display: 'flex', alignItems: 'start', gap: '0.75rem' }}>
      <Icon icon="credit-card" size={16} color="#0ea5e9" style={{ marginTop: '0.125rem', flexShrink: 0 }} />

      <div>
        <div className="dw-text-heading" style={{ fontWeight: 500, fontSize: '0.875rem', color: '#0f172a' }}>Funding Sources</div>
        <div className="dw-text-body" style={{ marginTop: '0.25rem', fontSize: '0.75rem', color: '#64748b' }}>Bank linking, IAV, and Open Banking</div>
      </div>
    </a>

    <a href="/docs/transfer-lifecycle" className="dw-card-flat" style={{ padding: '1rem 1.25rem', textDecoration: 'none', display: 'flex', alignItems: 'start', gap: '0.75rem' }}>
      <Icon icon="repeat" size={16} color="#10b981" style={{ marginTop: '0.125rem', flexShrink: 0 }} />

      <div>
        <div className="dw-text-heading" style={{ fontWeight: 500, fontSize: '0.875rem', color: '#0f172a' }}>Transfers</div>
        <div className="dw-text-body" style={{ marginTop: '0.25rem', fontSize: '0.75rem', color: '#64748b' }}>Lifecycle, timing, and failure handling</div>
      </div>
    </a>

    <a href="/docs/webhook-events" className="dw-card-flat" style={{ padding: '1rem 1.25rem', textDecoration: 'none', display: 'flex', alignItems: 'start', gap: '0.75rem' }}>
      <Icon icon="tower-broadcast" size={16} color="#ec4899" style={{ marginTop: '0.125rem', flexShrink: 0 }} />

      <div>
        <div className="dw-text-heading" style={{ fontWeight: 500, fontSize: '0.875rem', color: '#0f172a' }}>Webhooks</div>
        <div className="dw-text-body" style={{ marginTop: '0.25rem', fontSize: '0.75rem', color: '#64748b' }}>Events, payloads, and verification</div>
      </div>
    </a>

    <a href="/docs/instant-payments" className="dw-card-flat" style={{ padding: '1rem 1.25rem', textDecoration: 'none', display: 'flex', alignItems: 'start', gap: '0.75rem' }}>
      <Icon icon="bolt" size={16} color="#f59e0b" style={{ marginTop: '0.125rem', flexShrink: 0 }} />

      <div>
        <div className="dw-text-heading" style={{ fontWeight: 500, fontSize: '0.875rem', color: '#0f172a' }}>Instant Payments</div>
        <div className="dw-text-body" style={{ marginTop: '0.25rem', fontSize: '0.75rem', color: '#64748b' }}>RTP and FedNow instant payment rails</div>
      </div>
    </a>

    <a href="/docs/api-reference/api-fundamentals/making-requests-and-authentication" className="dw-card-flat" style={{ padding: '1rem 1.25rem', textDecoration: 'none', display: 'flex', alignItems: 'start', gap: '0.75rem' }}>
      <Icon icon="lock" size={16} color="#64748b" style={{ marginTop: '0.125rem', flexShrink: 0 }} />

      <div>
        <div className="dw-text-heading" style={{ fontWeight: 500, fontSize: '0.875rem', color: '#0f172a' }}>Authentication</div>
        <div className="dw-text-body" style={{ marginTop: '0.25rem', fontSize: '0.75rem', color: '#64748b' }}>OAuth 2.0 and token management</div>
      </div>
    </a>

    <a href="/docs/testing" className="dw-card-flat" style={{ padding: '1rem 1.25rem', textDecoration: 'none', display: 'flex', alignItems: 'start', gap: '0.75rem' }}>
      <Icon icon="flask" size={16} color="#14b8a6" style={{ marginTop: '0.125rem', flexShrink: 0 }} />

      <div>
        <div className="dw-text-heading" style={{ fontWeight: 500, fontSize: '0.875rem', color: '#0f172a' }}>Sandbox Testing</div>
        <div className="dw-text-body" style={{ marginTop: '0.25rem', fontSize: '0.75rem', color: '#64748b' }}>Simulate transfers, events, and errors</div>
      </div>
    </a>
  </div>
</div>

<div style={{ position: 'relative', zIndex: 1, maxWidth: '1200px', margin: '0 auto', padding: '0 1.5rem 5rem' }}>
  <div className="grid lg:grid-cols-2 gap-6">
    {/* SDKs */}

    <div className="dw-section-card">
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem' }}>
        <h3 className="dw-text-heading" style={{ fontSize: '1.125rem', fontWeight: 600, color: '#0f172a' }}>Official SDKs</h3>
        <a href="/docs/sdks-tools" className="dw-link-orange" style={{ fontSize: '0.75rem' }}>View all</a>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
        <a href="/docs/sdks-tools/typescript" className="dw-card-flat" style={{ padding: '1rem', display: 'flex', alignItems: 'center', justifyContent: 'space-between', textDecoration: 'none' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
            <div className="dw-sdk-badge dw-sdk-badge-ts">TS</div>

            <div>
              <div className="dw-text-heading" style={{ fontWeight: 500, fontSize: '0.875rem', color: '#0f172a' }}>TypeScript SDK</div>
              <code className="dw-text-body" style={{ fontSize: '0.75rem', color: '#64748b' }}>npm install dwolla</code>
            </div>
          </div>

          <span className="dw-badge-ga">GA</span>
        </a>

        <a href="/docs/sdks-tools/php" className="dw-card-flat" style={{ padding: '1rem', display: 'flex', alignItems: 'center', justifyContent: 'space-between', textDecoration: 'none' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
            <div className="dw-sdk-badge dw-sdk-badge-php">PHP</div>

            <div>
              <div className="dw-text-heading" style={{ fontWeight: 500, fontSize: '0.875rem', color: '#0f172a' }}>PHP SDK</div>
              <code className="dw-text-body" style={{ fontSize: '0.75rem', color: '#64748b' }}>composer require "dwolla/dwolla-php"</code>
            </div>
          </div>

          <span className="dw-badge-ga">GA</span>
        </a>

        <a href="/docs/sdks-tools/python" className="dw-card-flat" style={{ padding: '1rem', display: 'flex', alignItems: 'center', justifyContent: 'space-between', textDecoration: 'none' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
            <div className="dw-sdk-badge dw-sdk-badge-py">PY</div>

            <div>
              <div className="dw-text-heading" style={{ fontWeight: 500, fontSize: '0.875rem', color: '#0f172a' }}>Python SDK</div>
              <code className="dw-text-body" style={{ fontSize: '0.75rem', color: '#64748b' }}>pip install dwollav2</code>
            </div>
          </div>

          <span className="dw-badge-ga">GA</span>
        </a>

        <a href="/docs/sdks-tools#tools" className="dw-card-flat" style={{ padding: '1rem', display: 'flex', alignItems: 'center', justifyContent: 'space-between', textDecoration: 'none' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
            <div className="dw-sdk-badge dw-sdk-badge-postman">
              <Icon icon="code" size={14} />
            </div>

            <div>
              <div className="dw-text-heading" style={{ fontWeight: 500, fontSize: '0.875rem', color: '#0f172a' }}>Postman Collection</div>
              <code className="dw-text-body" style={{ fontSize: '0.75rem', color: '#64748b' }}>Import into Postman</code>
            </div>
          </div>

          <Icon icon="arrow-up-right-from-square" size={16} color="#94a3b8" />
        </a>
      </div>
    </div>

    {/* Payment Rails */}

    <div className="dw-section-card">
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem' }}>
        <h3 className="dw-text-heading" style={{ fontSize: '1.125rem', fontWeight: 600, color: '#0f172a' }}>Payment Rails</h3>
        <a href="/docs/transfer-processing-times" className="dw-link-orange" style={{ fontSize: '0.75rem' }}>Compare rails</a>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
        <div className="dw-card-flat" style={{ padding: '1rem' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
              <span className="dw-dot dw-dot-blue" />

              <span className="dw-text-heading" style={{ fontWeight: 500, fontSize: '0.875rem', color: '#0f172a' }}>ACH</span>
            </div>

            <span className="dw-text-body" style={{ fontSize: '0.75rem', color: '#64748b' }}>1–3 business days</span>
          </div>
        </div>

        <div className="dw-card-flat" style={{ padding: '1rem' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
              <span className="dw-dot dw-dot-sky" />

              <span className="dw-text-heading" style={{ fontWeight: 500, fontSize: '0.875rem', color: '#0f172a' }}>Same-Day ACH</span>
            </div>

            <span className="dw-text-body" style={{ fontSize: '0.75rem', color: '#64748b' }}>Same business day</span>
          </div>
        </div>

        <div className="dw-card-flat" style={{ padding: '1rem' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
              <span className="dw-dot dw-dot-emerald" />

              <span className="dw-text-heading" style={{ fontWeight: 500, fontSize: '0.875rem', color: '#0f172a' }}>RTP</span>
            </div>

            <span className="dw-text-body" style={{ fontSize: '0.75rem', color: '#64748b' }}>Seconds</span>
          </div>
        </div>

        <div className="dw-card-flat" style={{ padding: '1rem' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
              <span className="dw-dot dw-dot-violet" />

              <span className="dw-text-heading" style={{ fontWeight: 500, fontSize: '0.875rem', color: '#0f172a' }}>FedNow</span>
            </div>

            <span className="dw-text-body" style={{ fontSize: '0.75rem', color: '#64748b' }}>Seconds</span>
          </div>
        </div>

        <div className="dw-card-flat" style={{ padding: '1rem' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
              <span className="dw-dot dw-dot-pink" />

              <span className="dw-text-heading" style={{ fontWeight: 500, fontSize: '0.875rem', color: '#0f172a' }}>Instant Payments</span>
            </div>

            <span className="dw-text-body" style={{ fontSize: '0.75rem', color: '#64748b' }}>Seconds</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div style={{ position: 'relative', zIndex: 1, maxWidth: '1200px', margin: '0 auto', padding: '0 1.5rem 6rem' }}>
  <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '2rem' }}>
    <span className="dw-section-label">Resources</span>

    <div className="dw-divider" />
  </div>

  <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
    <a href="https://discuss.dwolla.com" className="dw-card-flat" style={{ padding: '1.25rem', textDecoration: 'none', display: 'block' }}>
      <Icon icon="comments" size={20} color="#94a3b8" />

      <h3 className="dw-text-heading" style={{ marginTop: '0.75rem', fontWeight: 600, fontSize: '0.875rem', color: '#0f172a' }}>Community</h3>
      <p className="dw-text-body" style={{ marginTop: '0.25rem', fontSize: '0.75rem', color: '#64748b', lineHeight: 1.5 }}>Connect with other developers building on Dwolla. Ask questions, share patterns, and get feedback.</p>
    </a>

    <a href="https://status.dwolla.com" className="dw-card-flat" style={{ padding: '1.25rem', textDecoration: 'none', display: 'block' }}>
      <Icon icon="signal" size={20} color="#94a3b8" />

      <h3 className="dw-text-heading" style={{ marginTop: '0.75rem', fontWeight: 600, fontSize: '0.875rem', color: '#0f172a' }}>System Status</h3>
      <p className="dw-text-body" style={{ marginTop: '0.25rem', fontSize: '0.75rem', color: '#64748b', lineHeight: 1.5 }}>Monitor API uptime, latency, and incident history. Subscribe for real-time updates.</p>
    </a>

    <a href="/docs/changelog" className="dw-card-flat" style={{ padding: '1.25rem', textDecoration: 'none', display: 'block' }}>
      <Icon icon="scroll" size={20} color="#94a3b8" />

      <h3 className="dw-text-heading" style={{ marginTop: '0.75rem', fontWeight: 600, fontSize: '0.875rem', color: '#0f172a' }}>Changelog</h3>
      <p className="dw-text-body" style={{ marginTop: '0.25rem', fontSize: '0.75rem', color: '#64748b', lineHeight: 1.5 }}>Track API updates, new features, and breaking changes. Stay informed on what's new.</p>
    </a>

    <a href="https://support.dwolla.com" className="dw-card-flat" style={{ padding: '1.25rem', textDecoration: 'none', display: 'block' }}>
      <Icon icon="life-ring" size={20} color="#94a3b8" />

      <h3 className="dw-text-heading" style={{ marginTop: '0.75rem', fontWeight: 600, fontSize: '0.875rem', color: '#0f172a' }}>Support</h3>
      <p className="dw-text-body" style={{ marginTop: '0.25rem', fontSize: '0.75rem', color: '#64748b', lineHeight: 1.5 }}>Reach our developer support team for help with integration issues and account questions.</p>
    </a>

    <a href="https://www.dwolla.com/updates" className="dw-card-flat" style={{ padding: '1.25rem', textDecoration: 'none', display: 'block' }}>
      <Icon icon="graduation-cap" size={20} color="#94a3b8" />

      <h3 className="dw-text-heading" style={{ marginTop: '0.75rem', fontWeight: 600, fontSize: '0.875rem', color: '#0f172a' }}>Blog</h3>
      <p className="dw-text-body" style={{ marginTop: '0.25rem', fontSize: '0.75rem', color: '#64748b', lineHeight: 1.5 }}>Technical articles, integration patterns, and product announcements from the Dwolla team.</p>
    </a>

    <a href="https://github.com/Dwolla" className="dw-card-flat" style={{ padding: '1.25rem', textDecoration: 'none', display: 'block' }}>
      <Icon icon="github" size={20} color="#94a3b8" />

      <h3 className="dw-text-heading" style={{ marginTop: '0.75rem', fontWeight: 600, fontSize: '0.875rem', color: '#0f172a' }}>GitHub</h3>
      <p className="dw-text-body" style={{ marginTop: '0.25rem', fontSize: '0.75rem', color: '#64748b', lineHeight: 1.5 }}>SDKs and sample code. Open source contributions welcome.</p>
    </a>
  </div>
</div>

<div style={{ marginTop: '2rem' }}>
  <div style={{ maxWidth: '984px', margin: '0 auto', padding: '4rem 2rem 5rem' }}>
    <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', gap: '2rem' }}>
      <div>
        <img src="https://mintcdn.com/dwolla/7t97G1tGpL5WlmDA/logo/light.svg?fit=max&auto=format&n=7t97G1tGpL5WlmDA&q=85&s=aeab6830d2ea9fe36f17f9b66f31b9e1" alt="Dwolla" style={{ height: '1.625rem' }} className="block dark:hidden" width="1278" height="202" data-path="logo/light.svg" />

        <img src="https://mintcdn.com/dwolla/7t97G1tGpL5WlmDA/logo/dark.svg?fit=max&auto=format&n=7t97G1tGpL5WlmDA&q=85&s=354e162ec12cde79a6a037fbbc41521b" alt="Dwolla" style={{ height: '1.625rem' }} className="hidden dark:block" width="1278" height="202" data-path="logo/dark.svg" />
      </div>

      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4rem' }}>
        <div>
          <div className="dw-text-heading" style={{ fontSize: '0.875rem', fontWeight: 600, color: '#0f172a', marginBottom: '0.75rem' }}>Dwolla</div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
            <a href="https://www.dwolla.com/about/" className="dw-text-body" style={{ fontSize: '0.875rem', color: '#64748b', textDecoration: 'none' }}>About</a>
            <a href="https://www.dwolla.com/updates/" className="dw-text-body" style={{ fontSize: '0.875rem', color: '#64748b', textDecoration: 'none' }}>Blog</a>
            <a href="https://www.dwolla.com/pricing/" className="dw-text-body" style={{ fontSize: '0.875rem', color: '#64748b', textDecoration: 'none' }}>Pricing</a>
            <a href="https://www.dwolla.com/contact/" className="dw-text-body" style={{ fontSize: '0.875rem', color: '#64748b', textDecoration: 'none' }}>Contact Sales</a>
            <a href="https://www.dwolla.com/legal/tos/" className="dw-text-body" style={{ fontSize: '0.875rem', color: '#64748b', textDecoration: 'none' }}>Terms of Service</a>
            <a href="https://www.dwolla.com/legal/privacy/" className="dw-text-body" style={{ fontSize: '0.875rem', color: '#64748b', textDecoration: 'none' }}>Privacy Policy</a>
            <a href="#" onClick={(e) => { e.preventDefault(); if (window.Osano) window.Osano.cm.showDrawer('osano-cm-dom-info-dialog-open'); }} className="dw-text-body" style={{ fontSize: '0.875rem', color: '#64748b', textDecoration: 'none', cursor: 'pointer' }}>Privacy Options</a>
          </div>
        </div>

        <div>
          <div className="dw-text-heading" style={{ fontSize: '0.875rem', fontWeight: 600, color: '#0f172a', marginBottom: '0.75rem' }}>Product</div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
            <a href="https://support.dwolla.com/s/" className="dw-text-body" style={{ fontSize: '0.875rem', color: '#64748b', textDecoration: 'none' }}>Support</a>
            <a href="https://www.dwolla.com/resources/" className="dw-text-body" style={{ fontSize: '0.875rem', color: '#64748b', textDecoration: 'none' }}>Resources</a>
            <a href="https://www.dwolla.com/features/" className="dw-text-body" style={{ fontSize: '0.875rem', color: '#64748b', textDecoration: 'none' }}>Features</a>
          </div>
        </div>

        <div>
          <div className="dw-text-heading" style={{ fontSize: '0.875rem', fontWeight: 600, color: '#0f172a', marginBottom: '0.75rem' }}>Developers</div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
            <a href="/docs/api-reference" className="dw-text-body" style={{ fontSize: '0.875rem', color: '#64748b', textDecoration: 'none' }}>API Reference</a>
            <a href="https://discuss.dwolla.com/" className="dw-text-body" style={{ fontSize: '0.875rem', color: '#64748b', textDecoration: 'none' }}>Support Forum</a>
            <a href="/docs/sdks-tools" className="dw-text-body" style={{ fontSize: '0.875rem', color: '#64748b', textDecoration: 'none' }}>SDKs & Tools</a>
            <a href="https://github.com/Dwolla/" className="dw-text-body" style={{ fontSize: '0.875rem', color: '#64748b', textDecoration: 'none' }}>Github Repos</a>
          </div>
        </div>
      </div>
    </div>

    <div style={{ marginTop: '3rem', paddingTop: '1.5rem', borderTop: '1px solid #e2e8f0' }}>
      <div id="dwolla-legal-disclaimer">
        <strong>Financial institutions play an important role in our network.</strong>
        <span>All funds transfers made using the Dwolla Platform are performed by a financial institution partner, and any funds held in a Dwolla Balance are held by a financial institution partner. <a href="https://www.dwolla.com/legal/about-our-financial-institution-partner/">Learn more about our financial institution partners</a>.</span>
      </div>
    </div>
  </div>
</div>