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

# FaceSign developer hub

> Ship step-up verification in an afternoon. FaceSign replaces insecure SMS codes and expensive call centers with a 20-second AI-led conversation.

<div style={{ color: 'var(--fs-strong, rgb(10 15 14))' }}>
  <div style={{ maxWidth: '72rem', margin: '0 auto', padding: '6rem 1.5rem 0 1.5rem', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', borderRadius: '999px', border: '1px solid rgba(120,120,120,0.25)', padding: '0.35rem 0.9rem', fontSize: '0.875rem', fontWeight: 500, marginBottom: '2rem' }}>
      <span style={{ height: '0.5rem', width: '0.5rem', borderRadius: '999px', background: '#10b981', display: 'inline-block' }} />

      \~15s end-to-end verification
    </div>

    <div style={{ maxWidth: '52rem', fontSize: 'clamp(2.75rem, 6vw, 4.5rem)', fontWeight: 800, letterSpacing: '-0.045em', lineHeight: 1.05 }}>
      Ship step-up verification in an afternoon.
    </div>

    <div style={{ marginTop: '1.5rem', maxWidth: '38rem', fontSize: '1.2rem', lineHeight: 1.6, color: 'var(--fs-muted, rgb(80 85 83))', fontWeight: 400 }}>
      FaceSign replaces insecure SMS codes and expensive call centers with a 20-second AI-led conversation. Six models verify both the person and their state of mind.
    </div>

    <div style={{ marginTop: '2.5rem', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', gap: '1rem' }}>
      <a href="/docs/mcp" style={{ display: 'inline-flex', height: '3rem', alignItems: 'center', borderRadius: '999px', background: '#10b981', color: '#ffffff', padding: '0 1.6rem', fontSize: '1rem', fontWeight: 600, textDecoration: 'none' }}>
        Get started
      </a>

      <div style={{ display: 'inline-flex', height: '3rem', alignItems: 'center', gap: '0.75rem', borderRadius: '999px', border: '1px solid rgba(120,120,120,0.25)', background: 'rgba(120,120,120,0.06)', padding: '0 1.1rem' }}>
        <span style={{ fontFamily: 'monospace', fontSize: '0.875rem', color: 'var(--fs-muted, rgb(80 85 83))' }}>\$</span>
        <code style={{ fontFamily: 'monospace', fontSize: '0.875rem', fontWeight: 500 }}>npm i @facesignai/api</code>
      </div>
    </div>

    <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: '3rem', marginTop: '4rem' }}>
      <div><div style={{ fontSize: '1.875rem', fontWeight: 600, letterSpacing: '-0.02em' }}>\~15s</div><div style={{ fontSize: '0.875rem', color: 'var(--fs-muted, rgb(80 85 83))', marginTop: '0.25rem' }}>End-to-end verification</div></div>
      <div><div style={{ fontSize: '1.875rem', fontWeight: 600, letterSpacing: '-0.02em' }}>6</div><div style={{ fontSize: '0.875rem', color: 'var(--fs-muted, rgb(80 85 83))', marginTop: '0.25rem' }}>Built-in security layers</div></div>
      <div><div style={{ fontSize: '1.875rem', fontWeight: 600, letterSpacing: '-0.02em' }}>5 MB</div><div style={{ fontSize: '0.875rem', color: 'var(--fs-muted, rgb(80 85 83))', marginTop: '0.25rem' }}>Zero-install embed</div></div>
      <div><div style={{ fontSize: '1.875rem', fontWeight: 600, letterSpacing: '-0.02em' }}>1 port</div><div style={{ fontSize: '0.875rem', color: 'var(--fs-muted, rgb(80 85 83))', marginTop: '0.25rem' }}>Firewall friendly</div></div>
    </div>
  </div>

  <div style={{ maxWidth: '72rem', margin: '0 auto', padding: '6rem 1.5rem 0 1.5rem' }}>
    <div style={{ fontSize: '1.875rem', fontWeight: 700, letterSpacing: '-0.025em', marginBottom: '0.75rem' }}>Five steps to your first session</div>

    <div style={{ fontSize: '1.125rem', maxWidth: '42rem', color: 'var(--fs-muted, rgb(80 85 83))', fontWeight: 400, marginBottom: '2.5rem' }}>
      FaceSign exposes a Model Context Protocol server. Any MCP-capable client (Claude Code, Cursor, Zed) can build, preview, and export a full Next.js app through natural language.
    </div>

    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: '1rem' }}>
      <div style={{ border: '1px solid rgba(120,120,120,0.25)', borderRadius: '14px', padding: '1.25rem' }}>
        <div style={{ fontSize: '0.7rem', fontWeight: 600, color: '#10b981', letterSpacing: '0.15em', marginBottom: '0.5rem' }}>STEP 01</div>
        <div style={{ fontSize: '0.9rem', fontWeight: 600, marginBottom: '0.4rem' }}>Get a key</div>
        <div style={{ fontSize: '0.875rem', color: 'var(--fs-muted, rgb(80 85 83))', lineHeight: 1.55 }}>Request an sk\_live\_ key from your account, or sk\_test\_ for the sandbox.</div>
      </div>

      <div style={{ border: '1px solid rgba(120,120,120,0.25)', borderRadius: '14px', padding: '1.25rem' }}>
        <div style={{ fontSize: '0.7rem', fontWeight: 600, color: '#10b981', letterSpacing: '0.15em', marginBottom: '0.5rem' }}>STEP 02</div>
        <div style={{ fontSize: '0.9rem', fontWeight: 600, marginBottom: '0.4rem' }}>Add the MCP</div>
        <div style={{ fontSize: '0.875rem', color: 'var(--fs-muted, rgb(80 85 83))', lineHeight: 1.55 }}>Drop the FaceSign server into your client config. HTTP, one header, no install.</div>
      </div>

      <div style={{ border: '1px solid rgba(120,120,120,0.25)', borderRadius: '14px', padding: '1.25rem' }}>
        <div style={{ fontSize: '0.7rem', fontWeight: 600, color: '#10b981', letterSpacing: '0.15em', marginBottom: '0.5rem' }}>STEP 03</div>
        <div style={{ fontSize: '0.9rem', fontWeight: 600, marginBottom: '0.4rem' }}>Describe it</div>
        <div style={{ fontSize: '0.875rem', color: 'var(--fs-muted, rgb(80 85 83))', lineHeight: 1.55 }}>Tell the MCP client what you're building. It assembles the flow and writes the pages.</div>
      </div>

      <div style={{ border: '1px solid rgba(120,120,120,0.25)', borderRadius: '14px', padding: '1.25rem' }}>
        <div style={{ fontSize: '0.7rem', fontWeight: 600, color: '#10b981', letterSpacing: '0.15em', marginBottom: '0.5rem' }}>STEP 04</div>
        <div style={{ fontSize: '0.9rem', fontWeight: 600, marginBottom: '0.4rem' }}>Test locally</div>
        <div style={{ fontSize: '0.875rem', color: 'var(--fs-muted, rgb(80 85 83))', lineHeight: 1.55 }}>Use launch\_session\_ui for a browser preview, or export\_app for a full Next.js project.</div>
      </div>

      <div style={{ border: '1px solid rgba(120,120,120,0.25)', borderRadius: '14px', padding: '1.25rem' }}>
        <div style={{ fontSize: '0.7rem', fontWeight: 600, color: '#10b981', letterSpacing: '0.15em', marginBottom: '0.5rem' }}>STEP 05</div>
        <div style={{ fontSize: '0.9rem', fontWeight: 600, marginBottom: '0.4rem' }}>Deploy</div>
        <div style={{ fontSize: '0.875rem', color: 'var(--fs-muted, rgb(80 85 83))', lineHeight: 1.55 }}>Push the export to any Node host. Set FACESIGN\_API\_KEY, point your users at it.</div>
      </div>
    </div>
  </div>

  <div style={{ maxWidth: '56rem', margin: '0 auto', padding: '6rem 1.5rem 0 1.5rem' }}>
    <div style={{ textAlign: 'center', marginBottom: '2.5rem' }}>
      <div style={{ fontSize: '2rem', fontWeight: 700, letterSpacing: '-0.025em', marginBottom: '0.75rem' }}>A real flow, not a toy.</div>

      <div style={{ fontSize: '1.125rem', maxWidth: '40rem', margin: '0 auto', color: 'var(--fs-muted, rgb(80 85 83))', fontWeight: 400 }}>
        Greeting, recognition, liveness, closing. The complete happy path in one session create call.
      </div>
    </div>

    ```typescript title="session-create.ts" wrap theme={null}
    import Client, { FSNodeType } from '@facesignai/api'

    const client = new Client({ auth: process.env.FACESIGN_API_KEY })

    const { session, clientSecret } = await client.session.create({
      clientReferenceId: 'user-123',
      avatarId: '65f9e3c9-d48b-4118-b73a-4ae2e3cbb8f0',
      langs: ['en', 'it', 'de', 'fr', 'es'],
      defaultLang: 'en',
      videoAIAnalysisEnabled: true,
      flow: [
        { id: 'start', type: FSNodeType.START, outcome: 'greeting' },

        { id: 'greeting', type: FSNodeType.CONVERSATION,
          prompt: "Warmly greet the user. Ask them to confirm they're ready to verify.",
          outcomes: [{ id: 'ready', condition: 'user is ready', targetNodeId: 'recognition' }] },

        { id: 'recognition', type: FSNodeType.RECOGNITION,
          outcomes: {
            recognized: 'liveness_known',
            newUser:    'liveness_new',
            noFace:     'liveness_new',
          } },

        { id: 'liveness_known', type: FSNodeType.LIVENESS_DETECTION,
          outcomes: {
            livenessDetected:  'closing',
            deepfakeDetected:  'closing',
            noFace:            'closing',
          } },

        { id: 'liveness_new', type: FSNodeType.LIVENESS_DETECTION,
          outcomes: {
            livenessDetected:  'closing',
            deepfakeDetected:  'closing',
            noFace:            'closing',
          } },

        { id: 'closing', type: FSNodeType.CONVERSATION,
          prompt: "Say: You're all set. Thanks for verifying.",
          doesNotRequireReply: true,
          outcomes: [{ id: 'done', condition: '', targetNodeId: 'end' }] },

        { id: 'end', type: FSNodeType.END },
      ],
    })

    // Embed clientSecret.url in an iframe or redirect the user to it.
    console.log(clientSecret.url)
    ```

    <div style={{ marginTop: '1rem', textAlign: 'center', fontSize: '0.8rem', color: 'var(--fs-muted, rgb(80 85 83))', fontWeight: 400 }}>
      Every outcome routes forward. Video AI analysis runs out-of-band after the session ends.
    </div>
  </div>

  <div style={{ maxWidth: '72rem', margin: '0 auto', padding: '6rem 1.5rem 0 1.5rem' }}>
    <CardGroup cols={3}>
      <Card title="AI-guided flow building" icon="wand-sparkles">
        Describe your use case in plain English. The MCP interviews you, builds the verification flow, and exports a production-ready app.
      </Card>

      <Card title="10 verification nodes" icon="layers">
        Liveness, facial recognition, document scanning, coercion detection, KBA, and OTP — all composable in any verification flow.
      </Card>

      <Card title="Deploy anywhere" icon="send">
        Export to Next.js or static HTML. One environment variable. Zero vendor lock-in.
      </Card>
    </CardGroup>
  </div>

  <div style={{ maxWidth: '72rem', margin: '0 auto', padding: '6rem 1.5rem 0 1.5rem' }}>
    <div style={{ fontSize: '1.875rem', fontWeight: 700, letterSpacing: '-0.025em', marginBottom: '0.75rem' }}>Seven live demos</div>

    <div style={{ fontSize: '1.125rem', maxWidth: '42rem', color: 'var(--fs-muted, rgb(80 85 83))', fontWeight: 400, marginBottom: '2.5rem' }}>
      Every reference demo is a working FaceSign integration you can try now and adapt. Each is built from the same MCP primitives.
    </div>

    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '1.25rem' }}>
      <div style={{ display: 'flex', flexDirection: 'column', border: '1px solid rgba(120,120,120,0.25)', borderRadius: '14px', padding: '1.5rem' }}>
        <div style={{ fontSize: '1rem', fontWeight: 600, marginBottom: '0.5rem' }}>Step-up auth</div>
        <div style={{ fontSize: '0.875rem', color: 'var(--fs-muted, rgb(80 85 83))', lineHeight: 1.55, flex: 1, marginBottom: '1rem', fontWeight: 400 }}>Before a sensitive action, promote the user through a short verification. Recognition + liveness + conversational check.</div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.4rem', marginBottom: '1rem' }}>
          <span style={{ fontSize: '0.7rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', background: 'rgba(120,120,120,0.1)', border: '1px solid rgba(120,120,120,0.2)', padding: '0.1rem 0.5rem', borderRadius: '5px' }}>recognition</span>
          <span style={{ fontSize: '0.7rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', background: 'rgba(120,120,120,0.1)', border: '1px solid rgba(120,120,120,0.2)', padding: '0.1rem 0.5rem', borderRadius: '5px' }}>liveness</span>
          <span style={{ fontSize: '0.7rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', background: 'rgba(120,120,120,0.1)', border: '1px solid rgba(120,120,120,0.2)', padding: '0.1rem 0.5rem', borderRadius: '5px' }}>OTP</span>
        </div>

        <div style={{ display: 'flex', gap: '1rem' }}>
          <a href="https://stepup.facesign.dev" target="_blank" rel="noopener noreferrer" style={{ fontSize: '0.875rem', fontWeight: 600, color: '#10b981', textDecoration: 'none' }}>Try live →</a>
          <a href="https://github.com/facesignai/facesign-api-sample/tree/main/demos/step-up-auth" target="_blank" rel="noopener noreferrer" style={{ fontSize: '0.875rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', textDecoration: 'none' }}>Source →</a>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', border: '1px solid rgba(120,120,120,0.25)', borderRadius: '14px', padding: '1.5rem' }}>
        <div style={{ fontSize: '1rem', fontWeight: 600, marginBottom: '0.5rem' }}>Coercion detection</div>
        <div style={{ fontSize: '0.875rem', color: 'var(--fs-muted, rgb(80 85 83))', lineHeight: 1.55, flex: 1, marginBottom: '1rem', fontWeight: 400 }}>Detects signs of duress, secondary voices, scripted responses, and environmental anomalies for high risk transactions.</div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.4rem', marginBottom: '1rem' }}>
          <span style={{ fontSize: '0.7rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', background: 'rgba(120,120,120,0.1)', border: '1px solid rgba(120,120,120,0.2)', padding: '0.1rem 0.5rem', borderRadius: '5px' }}>intent</span>
          <span style={{ fontSize: '0.7rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', background: 'rgba(120,120,120,0.1)', border: '1px solid rgba(120,120,120,0.2)', padding: '0.1rem 0.5rem', borderRadius: '5px' }}>video AI</span>
          <span style={{ fontSize: '0.7rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', background: 'rgba(120,120,120,0.1)', border: '1px solid rgba(120,120,120,0.2)', padding: '0.1rem 0.5rem', borderRadius: '5px' }}>fraud</span>
        </div>

        <div style={{ display: 'flex', gap: '1rem' }}>
          <a href="https://coercion.facesign.dev" target="_blank" rel="noopener noreferrer" style={{ fontSize: '0.875rem', fontWeight: 600, color: '#10b981', textDecoration: 'none' }}>Try live →</a>
          <a href="https://github.com/facesignai/facesign-api-sample/tree/main/demos/coercion-detection" target="_blank" rel="noopener noreferrer" style={{ fontSize: '0.875rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', textDecoration: 'none' }}>Source →</a>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', border: '1px solid rgba(120,120,120,0.25)', borderRadius: '14px', padding: '1.5rem' }}>
        <div style={{ fontSize: '1rem', fontWeight: 600, marginBottom: '0.5rem' }}>Account recovery</div>
        <div style={{ fontSize: '0.875rem', color: 'var(--fs-muted, rgb(80 85 83))', lineHeight: 1.55, flex: 1, marginBottom: '1rem', fontWeight: 400 }}>Self-serve recovery flow with knowledge-based questions, liveness, and recognition. Replaces call center KBA.</div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.4rem', marginBottom: '1rem' }}>
          <span style={{ fontSize: '0.7rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', background: 'rgba(120,120,120,0.1)', border: '1px solid rgba(120,120,120,0.2)', padding: '0.1rem 0.5rem', borderRadius: '5px' }}>KBA</span>
          <span style={{ fontSize: '0.7rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', background: 'rgba(120,120,120,0.1)', border: '1px solid rgba(120,120,120,0.2)', padding: '0.1rem 0.5rem', borderRadius: '5px' }}>recognition</span>
          <span style={{ fontSize: '0.7rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', background: 'rgba(120,120,120,0.1)', border: '1px solid rgba(120,120,120,0.2)', padding: '0.1rem 0.5rem', borderRadius: '5px' }}>self-serve</span>
        </div>

        <div style={{ display: 'flex', gap: '1rem' }}>
          <a href="https://recovery.facesign.dev" target="_blank" rel="noopener noreferrer" style={{ fontSize: '0.875rem', fontWeight: 600, color: '#10b981', textDecoration: 'none' }}>Try live →</a>
          <a href="https://github.com/facesignai/facesign-api-sample/tree/main/demos/account-recovery" target="_blank" rel="noopener noreferrer" style={{ fontSize: '0.875rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', textDecoration: 'none' }}>Source →</a>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', border: '1px solid rgba(120,120,120,0.25)', borderRadius: '14px', padding: '1.5rem' }}>
        <div style={{ fontSize: '1rem', fontWeight: 600, marginBottom: '0.5rem' }}>Workforce verification</div>
        <div style={{ fontSize: '0.875rem', color: 'var(--fs-muted, rgb(80 85 83))', lineHeight: 1.55, flex: 1, marginBottom: '1rem', fontWeight: 400 }}>Verify employees before accessing sensitive files, systems, or admin panels. Per-session identity confirmation.</div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.4rem', marginBottom: '1rem' }}>
          <span style={{ fontSize: '0.7rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', background: 'rgba(120,120,120,0.1)', border: '1px solid rgba(120,120,120,0.2)', padding: '0.1rem 0.5rem', borderRadius: '5px' }}>internal</span>
          <span style={{ fontSize: '0.7rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', background: 'rgba(120,120,120,0.1)', border: '1px solid rgba(120,120,120,0.2)', padding: '0.1rem 0.5rem', borderRadius: '5px' }}>audit</span>
          <span style={{ fontSize: '0.7rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', background: 'rgba(120,120,120,0.1)', border: '1px solid rgba(120,120,120,0.2)', padding: '0.1rem 0.5rem', borderRadius: '5px' }}>SSO-adjacent</span>
        </div>

        <div style={{ display: 'flex', gap: '1rem' }}>
          <a href="https://workforce.facesign.dev" target="_blank" rel="noopener noreferrer" style={{ fontSize: '0.875rem', fontWeight: 600, color: '#10b981', textDecoration: 'none' }}>Try live →</a>
          <a href="https://github.com/facesignai/facesign-api-sample/tree/main/demos/workforce-verification" target="_blank" rel="noopener noreferrer" style={{ fontSize: '0.875rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', textDecoration: 'none' }}>Source →</a>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', border: '1px solid rgba(120,120,120,0.25)', borderRadius: '14px', padding: '1.5rem' }}>
        <div style={{ fontSize: '1rem', fontWeight: 600, marginBottom: '0.5rem' }}>Interview verification</div>
        <div style={{ fontSize: '0.875rem', color: 'var(--fs-muted, rgb(80 85 83))', lineHeight: 1.55, flex: 1, marginBottom: '1rem', fontWeight: 400 }}>Confirms the person in interview two is the same from interview one. Mitigates identity fraud in remote hiring.</div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.4rem', marginBottom: '1rem' }}>
          <span style={{ fontSize: '0.7rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', background: 'rgba(120,120,120,0.1)', border: '1px solid rgba(120,120,120,0.2)', padding: '0.1rem 0.5rem', borderRadius: '5px' }}>recognition</span>
          <span style={{ fontSize: '0.7rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', background: 'rgba(120,120,120,0.1)', border: '1px solid rgba(120,120,120,0.2)', padding: '0.1rem 0.5rem', borderRadius: '5px' }}>continuity</span>
          <span style={{ fontSize: '0.7rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', background: 'rgba(120,120,120,0.1)', border: '1px solid rgba(120,120,120,0.2)', padding: '0.1rem 0.5rem', borderRadius: '5px' }}>hiring</span>
        </div>

        <div style={{ display: 'flex', gap: '1rem' }}>
          <a href="https://interviews.facesign.dev" target="_blank" rel="noopener noreferrer" style={{ fontSize: '0.875rem', fontWeight: 600, color: '#10b981', textDecoration: 'none' }}>Try live →</a>
          <a href="https://github.com/facesignai/facesign-api-sample/tree/main/demos/interview-verification" target="_blank" rel="noopener noreferrer" style={{ fontSize: '0.875rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', textDecoration: 'none' }}>Source →</a>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', border: '1px solid rgba(120,120,120,0.25)', borderRadius: '14px', padding: '1.5rem' }}>
        <div style={{ fontSize: '1rem', fontWeight: 600, marginBottom: '0.5rem' }}>Gaming and gambling</div>
        <div style={{ fontSize: '0.875rem', color: 'var(--fs-muted, rgb(80 85 83))', lineHeight: 1.55, flex: 1, marginBottom: '1rem', fontWeight: 400 }}>Responsible gaming check-ins. Verify the player is the account holder and not under duress or impaired.</div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.4rem', marginBottom: '1rem' }}>
          <span style={{ fontSize: '0.7rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', background: 'rgba(120,120,120,0.1)', border: '1px solid rgba(120,120,120,0.2)', padding: '0.1rem 0.5rem', borderRadius: '5px' }}>responsible gaming</span>
          <span style={{ fontSize: '0.7rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', background: 'rgba(120,120,120,0.1)', border: '1px solid rgba(120,120,120,0.2)', padding: '0.1rem 0.5rem', borderRadius: '5px' }}>compliance</span>
          <span style={{ fontSize: '0.7rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', background: 'rgba(120,120,120,0.1)', border: '1px solid rgba(120,120,120,0.2)', padding: '0.1rem 0.5rem', borderRadius: '5px' }}>intent</span>
        </div>

        <div style={{ display: 'flex', gap: '1rem' }}>
          <a href="https://gaming.facesign.dev" target="_blank" rel="noopener noreferrer" style={{ fontSize: '0.875rem', fontWeight: 600, color: '#10b981', textDecoration: 'none' }}>Try live →</a>
          <a href="https://github.com/facesignai/facesign-api-sample/tree/main/demos/gaming-responsible" target="_blank" rel="noopener noreferrer" style={{ fontSize: '0.875rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', textDecoration: 'none' }}>Source →</a>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', border: '1px solid rgba(120,120,120,0.25)', borderRadius: '14px', padding: '1.5rem' }}>
        <div style={{ fontSize: '1rem', fontWeight: 600, marginBottom: '0.5rem' }}>KYC onboarding</div>
        <div style={{ fontSize: '0.875rem', color: 'var(--fs-muted, rgb(80 85 83))', lineHeight: 1.55, flex: 1, marginBottom: '1rem', fontWeight: 400 }}>Full KYC with document scan, face-to-document comparison, liveness, and recognition enrollment.</div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.4rem', marginBottom: '1rem' }}>
          <span style={{ fontSize: '0.7rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', background: 'rgba(120,120,120,0.1)', border: '1px solid rgba(120,120,120,0.2)', padding: '0.1rem 0.5rem', borderRadius: '5px' }}>document scan</span>
          <span style={{ fontSize: '0.7rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', background: 'rgba(120,120,120,0.1)', border: '1px solid rgba(120,120,120,0.2)', padding: '0.1rem 0.5rem', borderRadius: '5px' }}>face compare</span>
          <span style={{ fontSize: '0.7rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', background: 'rgba(120,120,120,0.1)', border: '1px solid rgba(120,120,120,0.2)', padding: '0.1rem 0.5rem', borderRadius: '5px' }}>enrollment</span>
        </div>

        <div style={{ display: 'flex', gap: '1rem' }}>
          <a href="https://kyc.facesign.dev" target="_blank" rel="noopener noreferrer" style={{ fontSize: '0.875rem', fontWeight: 600, color: '#10b981', textDecoration: 'none' }}>Try live →</a>
          <a href="https://github.com/facesignai/facesign-api-sample/tree/main/demos/kyc-onboarding" target="_blank" rel="noopener noreferrer" style={{ fontSize: '0.875rem', fontWeight: 500, color: 'var(--fs-muted, rgb(80 85 83))', textDecoration: 'none' }}>Source →</a>
        </div>
      </div>
    </div>
  </div>

  <div style={{ maxWidth: '72rem', margin: '0 auto', padding: '6rem 1.5rem 0 1.5rem' }}>
    <div style={{ fontSize: '1.875rem', fontWeight: 700, letterSpacing: '-0.025em', marginBottom: '0.75rem' }}>13 languages, zero extra work</div>

    <div style={{ fontSize: '1.125rem', maxWidth: '42rem', color: 'var(--fs-muted, rgb(80 85 83))', fontWeight: 400, marginBottom: '2.5rem' }}>
      Browser language detection drives both avatar speech and the wrapper UI automatically. You write prompts once. FaceSign handles the rest.
    </div>

    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.6rem', marginBottom: '3rem' }}>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', border: '1px solid rgba(120,120,120,0.25)', borderRadius: '10px', padding: '0.5rem 0.8rem' }}><span style={{ fontSize: '1.05rem' }}>🇬🇧</span><span style={{ fontSize: '0.875rem', fontWeight: 500 }}>English</span><span style={{ fontSize: '0.72rem', color: 'var(--fs-muted, rgb(80 85 83))', fontFamily: 'monospace' }}>en</span></div>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', border: '1px solid rgba(120,120,120,0.25)', borderRadius: '10px', padding: '0.5rem 0.8rem' }}><span style={{ fontSize: '1.05rem' }}>🇮🇹</span><span style={{ fontSize: '0.875rem', fontWeight: 500 }}>Italian</span><span style={{ fontSize: '0.72rem', color: 'var(--fs-muted, rgb(80 85 83))', fontFamily: 'monospace' }}>it</span></div>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', border: '1px solid rgba(120,120,120,0.25)', borderRadius: '10px', padding: '0.5rem 0.8rem' }}><span style={{ fontSize: '1.05rem' }}>🇩🇪</span><span style={{ fontSize: '0.875rem', fontWeight: 500 }}>German</span><span style={{ fontSize: '0.72rem', color: 'var(--fs-muted, rgb(80 85 83))', fontFamily: 'monospace' }}>de</span></div>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', border: '1px solid rgba(120,120,120,0.25)', borderRadius: '10px', padding: '0.5rem 0.8rem' }}><span style={{ fontSize: '1.05rem' }}>🇫🇷</span><span style={{ fontSize: '0.875rem', fontWeight: 500 }}>French</span><span style={{ fontSize: '0.72rem', color: 'var(--fs-muted, rgb(80 85 83))', fontFamily: 'monospace' }}>fr</span></div>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', border: '1px solid rgba(120,120,120,0.25)', borderRadius: '10px', padding: '0.5rem 0.8rem' }}><span style={{ fontSize: '1.05rem' }}>🇪🇸</span><span style={{ fontSize: '0.875rem', fontWeight: 500 }}>Spanish</span><span style={{ fontSize: '0.72rem', color: 'var(--fs-muted, rgb(80 85 83))', fontFamily: 'monospace' }}>es</span></div>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', border: '1px solid rgba(120,120,120,0.25)', borderRadius: '10px', padding: '0.5rem 0.8rem' }}><span style={{ fontSize: '1.05rem' }}>🇵🇹</span><span style={{ fontSize: '0.875rem', fontWeight: 500 }}>Portuguese</span><span style={{ fontSize: '0.72rem', color: 'var(--fs-muted, rgb(80 85 83))', fontFamily: 'monospace' }}>pt</span></div>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', border: '1px solid rgba(120,120,120,0.25)', borderRadius: '10px', padding: '0.5rem 0.8rem' }}><span style={{ fontSize: '1.05rem' }}>🇷🇺</span><span style={{ fontSize: '0.875rem', fontWeight: 500 }}>Russian</span><span style={{ fontSize: '0.72rem', color: 'var(--fs-muted, rgb(80 85 83))', fontFamily: 'monospace' }}>ru</span></div>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', border: '1px solid rgba(120,120,120,0.25)', borderRadius: '10px', padding: '0.5rem 0.8rem' }}><span style={{ fontSize: '1.05rem' }}>🇯🇵</span><span style={{ fontSize: '0.875rem', fontWeight: 500 }}>Japanese</span><span style={{ fontSize: '0.72rem', color: 'var(--fs-muted, rgb(80 85 83))', fontFamily: 'monospace' }}>ja</span></div>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', border: '1px solid rgba(120,120,120,0.25)', borderRadius: '10px', padding: '0.5rem 0.8rem' }}><span style={{ fontSize: '1.05rem' }}>🇮🇩</span><span style={{ fontSize: '0.875rem', fontWeight: 500 }}>Indonesian</span><span style={{ fontSize: '0.72rem', color: 'var(--fs-muted, rgb(80 85 83))', fontFamily: 'monospace' }}>id</span></div>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', border: '1px solid rgba(120,120,120,0.25)', borderRadius: '10px', padding: '0.5rem 0.8rem' }}><span style={{ fontSize: '1.05rem' }}>🇳🇴</span><span style={{ fontSize: '0.875rem', fontWeight: 500 }}>Norwegian</span><span style={{ fontSize: '0.72rem', color: 'var(--fs-muted, rgb(80 85 83))', fontFamily: 'monospace' }}>no</span></div>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', border: '1px solid rgba(120,120,120,0.25)', borderRadius: '10px', padding: '0.5rem 0.8rem' }}><span style={{ fontSize: '1.05rem' }}>🇨🇳</span><span style={{ fontSize: '0.875rem', fontWeight: 500 }}>Chinese Simplified</span><span style={{ fontSize: '0.72rem', color: 'var(--fs-muted, rgb(80 85 83))', fontFamily: 'monospace' }}>zh</span></div>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', border: '1px solid rgba(120,120,120,0.25)', borderRadius: '10px', padding: '0.5rem 0.8rem' }}><span style={{ fontSize: '1.05rem' }}>🇹🇼</span><span style={{ fontSize: '0.875rem', fontWeight: 500 }}>Chinese Traditional</span><span style={{ fontSize: '0.72rem', color: 'var(--fs-muted, rgb(80 85 83))', fontFamily: 'monospace' }}>zh-TW</span></div>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', border: '1px solid rgba(120,120,120,0.25)', borderRadius: '10px', padding: '0.5rem 0.8rem' }}><span style={{ fontSize: '1.05rem' }}>🇭🇰</span><span style={{ fontSize: '0.875rem', fontWeight: 500 }}>Chinese Cantonese</span><span style={{ fontSize: '0.72rem', color: 'var(--fs-muted, rgb(80 85 83))', fontFamily: 'monospace' }}>zh-HK</span></div>
    </div>

    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '2rem' }}>
      <div>
        <div style={{ fontSize: '1rem', fontWeight: 600, marginBottom: '0.75rem' }}>How it works</div>

        <div style={{ fontSize: '0.875rem', color: 'var(--fs-muted, rgb(80 85 83))', lineHeight: 1.6, fontWeight: 400 }}>
          The session matches the end user's <code>navigator.language</code> against your <code>langs</code> whitelist. If it matches, that language is used for both avatar speech and the wrapper UI. Otherwise it falls back to <code>defaultLang</code> (default: en). BCP-47 normalization covers aliases like <code>zh-Hans</code> and base-language fallbacks like <code>fr-CA</code>. No extra localization code required.
        </div>
      </div>

      <div>
        <div style={{ fontSize: '1rem', fontWeight: 600, marginBottom: '0.75rem' }}>Test any language</div>

        <div style={{ fontSize: '0.875rem', color: 'var(--fs-muted, rgb(80 85 83))', lineHeight: 1.6, fontWeight: 400, marginBottom: '0.75rem' }}>
          Append <code>?lang=XX</code> to any demo URL to override browser detection — for example <code>[https://stepup.facesign.dev/?lang=it](https://stepup.facesign.dev/?lang=it)</code> for Italian or <code>?lang=ja</code> for Japanese.
        </div>
      </div>
    </div>
  </div>

  <div style={{ maxWidth: '72rem', margin: '0 auto', padding: '6rem 1.5rem 0 1.5rem' }}>
    <div style={{ fontSize: '1.875rem', fontWeight: 700, letterSpacing: '-0.025em', marginBottom: '0.75rem' }}>The full playbook</div>

    <div style={{ fontSize: '1.125rem', maxWidth: '42rem', color: 'var(--fs-muted, rgb(80 85 83))', fontWeight: 400, marginBottom: '2.5rem' }}>
      Flow rules, edge cases, deployment gotchas, and complete example flows. Written for engineers shipping to production.
    </div>

    <CardGroup cols={3}>
      <Card title="Flow builder" icon="workflow" href="/docs/reference/concepts#nodes">Node types, outcomes, valid graph patterns</Card>
      <Card title="Conversation rules" icon="message-square" href="/docs/guides/conversation-rules">13 load-bearing rules for avatar behavior</Card>
      <Card title="Localization" icon="globe" href="/docs/guides/multilingual">Language resolution, prompts, currency formatting</Card>
      <Card title="Recognition branching" icon="scan-face" href="/docs/use-cases/account-recovery">Proven pattern for known vs new user paths</Card>
      <Card title="Document scanning" icon="file-text" href="/docs/guides/verification-patterns">Scan IDs, passports, driving licences</Card>
      <Card title="Pre-session pages" icon="app-window" href="/docs/guides/custom-pages">Branded landing pages before session starts</Card>
      <Card title="Recap pages" icon="clipboard-list" href="/docs/guides/custom-pages">Thank-you pages, or a full verification report</Card>
      <Card title="Deployment" icon="rocket" href="/docs/guides/production-checklist">Vercel, Railway, Fly, containers</Card>
      <Card title="Known behaviors" icon="triangle-alert" href="/docs/reference/known-behaviors">Edge cases to design around</Card>
      <Card title="Privacy model" icon="lock" href="/docs/security/biometric-data">What's retained, discarded, controlled</Card>
      <Card title="Pre-release checklist" icon="list-checks" href="/docs/guides/production-checklist">Everything to verify before production</Card>
    </CardGroup>
  </div>

  <div style={{ maxWidth: '72rem', margin: '0 auto', padding: '6rem 1.5rem 0 1.5rem' }}>
    <div style={{ fontSize: '1.875rem', fontWeight: 700, letterSpacing: '-0.025em', marginBottom: '0.75rem' }}>Prefer to build by hand?</div>

    <div style={{ fontSize: '1.125rem', maxWidth: '42rem', color: 'var(--fs-muted, rgb(80 85 83))', fontWeight: 400, marginBottom: '2.5rem' }}>
      The MCP handles most integrations, but direct SDK and REST access are first-class for teams who need lower-level control.
    </div>

    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '1.5rem' }}>
      <div style={{ display: 'flex', flexDirection: 'column', border: '1px solid rgba(120,120,120,0.25)', borderRadius: '14px', padding: '2rem' }}>
        <div style={{ fontSize: '1.125rem', fontWeight: 600, letterSpacing: '-0.02em', marginBottom: '0.75rem' }}>TypeScript / Node SDK</div>

        <div style={{ fontSize: '0.875rem', color: 'var(--fs-muted, rgb(80 85 83))', lineHeight: 1.6, fontWeight: 400, marginBottom: '1.25rem', flex: 1 }}>
          Official package with full types. Works in Next.js, Express, serverless functions, and anywhere Node runs.
        </div>

        <div style={{ display: 'flex', height: '2.75rem', alignItems: 'center', gap: '0.75rem', borderRadius: '10px', border: '1px solid rgba(120,120,120,0.25)', background: 'rgba(120,120,120,0.06)', padding: '0 1rem' }}>
          <span style={{ fontFamily: 'monospace', fontSize: '0.875rem', color: 'var(--fs-muted, rgb(80 85 83))' }}>\$</span>
          <code style={{ fontFamily: 'monospace', fontSize: '0.875rem', fontWeight: 500 }}>npm i @facesignai/api</code>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', border: '1px solid rgba(120,120,120,0.25)', borderRadius: '14px', padding: '2rem' }}>
        <div style={{ fontSize: '1.125rem', fontWeight: 600, letterSpacing: '-0.02em', marginBottom: '0.75rem' }}>REST API</div>

        <div style={{ fontSize: '0.875rem', color: 'var(--fs-muted, rgb(80 85 83))', lineHeight: 1.6, fontWeight: 400, marginBottom: '1.25rem', flex: 1 }}>
          The raw HTTP API if you're working in Python, Go, Ruby, or any other backend. Session create, session get, and webhook events are the three endpoints you'll use most.
        </div>

        <a href="/docs/api-reference/createSession" style={{ fontSize: '0.875rem', fontWeight: 600, color: '#10b981', textDecoration: 'none' }}>API reference →</a>
      </div>
    </div>
  </div>

  <div style={{ maxWidth: '72rem', margin: '0 auto', padding: '6rem 1.5rem 0 1.5rem' }}>
    <div style={{ fontSize: '1.875rem', fontWeight: 700, letterSpacing: '-0.025em', marginBottom: '2rem' }}>Frequently asked questions</div>

    <AccordionGroup>
      <Accordion title="How do I get an API key?">
        Request an sk\_live\_ production key or sk\_test\_ sandbox key from your account dashboard. If you don't have an account yet, email [developers@facesign.ai](mailto:developers@facesign.ai). Keys carry no setup fee.
      </Accordion>

      <Accordion title="Is there a sandbox or free tier?">
        Yes. Every account gets a sandbox environment with an sk\_test\_ key that includes free sessions for development. Sandbox sessions are functionally identical to production.
      </Accordion>

      <Accordion title="How does pricing work?">
        Usage-based, priced per verification session. No minimums, no implementation fees, and volume discounts kick in as you scale.
      </Accordion>

      <Accordion title="Which browsers and devices are supported?">
        Any modern Chromium, Safari 15+, or Firefox on desktop and mobile. Standard WebRTC, camera and mic permissions. No native install.
      </Accordion>

      <Accordion title="Can I embed FaceSign in my own app?">
        Yes. Drop the session URL into an iframe or WebView, or use the JavaScript SDK for a programmatic embed. About 5 MB, one outbound port.
      </Accordion>

      <Accordion title="How do I receive session results?">
        Webhooks notify your backend when a session's state changes; your server then fetches the full payload via GET /sessions/:id with your API key. Polling the same endpoint works as a fallback.
      </Accordion>

      <Accordion title="Can I customize the avatar, voice, or language?">
        Yes. Choose from our avatar library or work with us on a branded custom avatar. 10+ languages supported.
      </Accordion>

      <Accordion title="What data does FaceSign store?">
        FaceSign is a data processor; you are the data controller. Video is processed in memory and discarded. You choose your data processing region.
      </Accordion>

      <Accordion title="Is FaceSign SOC 2 or GDPR compliant?">
        Architected for GDPR and CCPA from day one. SOC 2 Type II is in progress. Ask [security@facesign.ai](mailto:security@facesign.ai) for details.
      </Accordion>

      <Accordion title="Where is data processed?">
        US and EU processing regions are available. Other regions are on request. Data residency can be configured at the account level. Contact [security@facesign.ai](mailto:security@facesign.ai) to configure residency for your deployment.
      </Accordion>

      <Accordion title="How do webhooks work?">
        Register an HTTPS endpoint with a signing secret in your dashboard. FaceSign POSTs a compact event (id, type, sessionId, createdAt) on status, media, and analysis updates — verify the HMAC-SHA256 X-FaceSign-Signature header, then fetch the full state via GET /sessions/:id. Transient delivery failures are retried automatically.
      </Accordion>

      <Accordion title="What compliance frameworks does FaceSign cover?">
        GDPR and CCPA from day one. SOC 2 Type II is in progress. For questions about compliance posture, specific certifications, or security documentation, email [security@facesign.ai](mailto:security@facesign.ai).
      </Accordion>
    </AccordionGroup>
  </div>

  <div style={{ marginTop: '6rem', background: '#09090b', padding: '8rem 1.5rem' }}>
    <div style={{ maxWidth: '72rem', margin: '0 auto', textAlign: 'center' }}>
      <div style={{ fontSize: 'clamp(2.25rem, 5vw, 3rem)', fontWeight: 700, letterSpacing: '-0.025em', marginBottom: '1rem', color: '#ffffff' }}>Ready to build?</div>

      <div style={{ fontSize: '1.125rem', color: 'rgba(255,255,255,0.6)', marginBottom: '2.5rem', fontWeight: 400, maxWidth: '34rem', margin: '0 auto 2.5rem auto' }}>
        Request an API key, wire up the MCP, and ship a working integration today.
      </div>

      <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: '1rem' }}>
        <a href="mailto:developers@facesign.ai?subject=API%20key%20request" style={{ display: 'inline-flex', height: '3rem', alignItems: 'center', borderRadius: '999px', background: '#ffffff', color: '#09090b', padding: '0 2rem', fontSize: '1rem', fontWeight: 600, textDecoration: 'none' }}>Request a key</a>
        <a href="/docs/mcp" style={{ display: 'inline-flex', height: '3rem', alignItems: 'center', borderRadius: '999px', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff', padding: '0 2rem', fontSize: '1rem', fontWeight: 500, textDecoration: 'none' }}>Read the docs</a>
      </div>
    </div>
  </div>
</div>