---
updatedAt: 2026-09-30T15:09:02.000Z
agentTools:
  projectIndex: https://docs.sumsub.com/llms.txt
---

# Sumsub Overview and Quick Start

Your implementation journey from Sandbox to successful verifications

<HTMLBlock>{`
<style>
  /* =========================================================
     1. CANVAS OVERRIDES & RESET
     ========================================================= */
  body:has(#shorts-hub) .content-toc.grid-25 { display: none !important; }
  body:has(#shorts-hub) .content-body.grid-75,
  body:has(#shorts-hub) .super-hub-doc-article { 
    width: 100% !important; 
    max-width: 100% !important; 
    flex: 0 0 100% !important; 
    padding: 0 !important; 
    margin: 0 !important; 
    display: block !important; 
  }

  #shorts-hub { 
    width: 100% !important; 
    max-width: 100% !important; 
    margin: 0 !important;
    padding: 4px 0 24px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ss-slate-700);
    box-sizing: border-box;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
  }

  #shorts-hub * { box-sizing: border-box; }

  /* OVERRIDE GLOBAL ANCHOR TAGS */
  #shorts-hub a,
  #shorts-hub a:hover,
  #shorts-hub a:focus,
  #shorts-hub a:visited {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  /* BULLETPROOF ARROW & MARKER RESET */
  summary.card-headline-strip,
  details summary,
  .card-headline-strip {
    display: flex !important;
    list-style: none !important;
    list-style-type: none !important;
  }
  
  summary.card-headline-strip::-webkit-details-marker,
  summary.card-headline-strip::marker,
  .card-headline-strip::-webkit-details-marker,
  .card-headline-strip::marker {
    display: none !important;
    content: "" !important;
  }

  /* =========================================================
     2. DESIGN SYSTEM TOKENS
     ========================================================= */
  #shorts-hub {
    --ss-slate-900: #000000;
    --ss-slate-800: #0F172A;
    --ss-slate-700: #334155;
    --ss-slate-600: #475569;
    --ss-slate-500: #64748B;
    --ss-slate-400: #94A3B8;
    --ss-slate-200: #E2E8F0;
    --ss-slate-100: #F1F5F9;
    --ss-slate-50:  #F8FAFC;
    
    --ss-accent: #0052FF;
    --ss-accent-dark: #003ECC;
    --ss-accent-soft: #EEF2FF;
    --ss-mint: #00E5A3;

    --ss-stroke-subtle: #E2E8F0;
    --ss-radius-premium: 12px;
    --ss-radius-pill: 9999px;
    --ss-shadow-card: 0 1px 3px 0 rgba(15, 23, 42, 0.03), 0 1px 2px -1px rgba(15, 23, 42, 0.02);
    --ss-shadow-hover: 0 8px 16px -4px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.02);
    --ss-easing: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* =========================================================
     3. HEADER & ACCESSIBLE INPUTS
     ========================================================= */
  #shorts-hub .hub-description { margin: 0 0 16px 0; }
  #shorts-hub .hub-description p { margin: 0; font-size: 14px; color: var(--ss-slate-500); line-height: 1.5; }

  #shorts-hub .radio-input-trigger, 
  #shorts-hub .card-toggle-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* FOCUS STATES */
  #shorts-hub .radio-input-trigger:focus-visible ~ .filter-dock label[for],
  #shorts-hub .card-toggle-input:focus-visible ~ .card-headline-strip {
    outline: 2px solid var(--ss-slate-800);
    outline-offset: 1px;
  }

  /* =========================================================
     4. COCKPIT FILTER CONTROL DOCK (RADIO CONTROL)
     ========================================================= */
  #shorts-hub .filter-dock {
    display: flex;
    width: 100%;
    background: var(--ss-slate-100);
    padding: 3px;
    border-radius: 10px;
    margin-bottom: 10px;
    gap: 3px;
    border: 1px solid var(--ss-stroke-subtle);
    flex-shrink: 0;
    box-sizing: border-box;
    overflow-x: auto;
  }

  #shorts-hub .filter-tab-label {
    flex: 1;
    text-align: center;
    padding: 6px 10px;
    font-size: 11.5px; 
    font-weight: 500;
    color: var(--ss-slate-600);
    border-radius: 7px;
    cursor: pointer;
    transition: var(--ss-easing);
    user-select: none;
    white-space: nowrap;
    border: 1px solid transparent;
  }
  #shorts-hub .filter-tab-label:hover { color: var(--ss-slate-900); }

  /* RADIO ACTIVE TAB STYLES */
  #f-all:checked ~ .filter-dock label[for="f-all"],
  #f-integration:checked ~ .filter-dock label[for="f-integration"],
  #f-setup:checked ~ .filter-dock label[for="f-setup"],
  #f-testing:checked ~ .filter-dock label[for="f-testing"] { 
    background: #FFFFFF; 
    color: var(--ss-slate-900); 
    font-weight: 600; 
    border-color: var(--ss-slate-200); 
    box-shadow: 0 1px 2px rgba(15,23,42,0.05); 
  }

  /* RADIO SECTION FILTERING LOGIC */
  #f-integration:checked ~ .timeline-section:not([data-section="integration"]),
  #f-setup:checked ~ .timeline-section:not([data-section="setup"]),
  #f-testing:checked ~ .timeline-section:not([data-section="testing"]) {
    display: none !important;
  }

  /* TIP BANNER */
  #shorts-hub .rail-onboarding-tip {
    background: var(--ss-slate-50);
    border: 1px solid var(--ss-slate-200);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ss-slate-600);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
  }

  /* =========================================================
     5. MAIN GRID
     ========================================================= */
  #shorts-hub .balanced-split-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px; 
    gap: 24px;
    align-items: start;
    width: 100%;
  }

  #shorts-hub .sticky-left-viewport {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 12px;
    width: 100%;
  }

  #shorts-hub .cinema-player-box {
    background: #000000;
    border-radius: var(--ss-radius-premium);
    overflow: hidden;
    box-shadow: var(--ss-shadow-card);
    border: 1px solid var(--ss-stroke-subtle);
    width: 100%;
    aspect-ratio: 16 / 9; 
  }

  #shorts-hub .iframe-canvas {
    width: 100%;
    height: 100%;
    background: #000000;
    display: block;
    border: none;
  }

  #shorts-hub .bottom-boxes-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
  }

  #shorts-hub .checklist-card {
    background: #FFFFFF;
    border: 1px solid var(--ss-slate-200);
    border-top: 3px solid var(--ss-mint);
    border-radius: var(--ss-radius-premium);
    padding: 14px;
    box-shadow: var(--ss-shadow-card);
  }
  #shorts-hub .checklist-card h3 {
    margin: 0 0 8px; font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--ss-slate-400);
  }
  #shorts-hub .checklist-item {
    display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px;
    color: var(--ss-slate-700); font-size: 12px; line-height: 1.4; cursor: pointer;
  }
  #shorts-hub .checklist-item:last-child { margin-bottom: 0; }
  #shorts-hub .checklist-item input { width: 14px; height: 14px; margin-top: 1px; flex-shrink: 0; accent-color: var(--ss-mint); cursor: pointer; }
  #shorts-hub .inline-guide-link { color: var(--ss-accent) !important; font-weight: 600; text-decoration: none !important; margin-left: 2px; }
  #shorts-hub .inline-guide-link:hover { text-decoration: underline !important; }

  #shorts-hub .launchpad-footer-panel {
    background: #FFFFFF;
    border: 1px solid var(--ss-slate-200);
    border-radius: var(--ss-radius-premium);
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    box-shadow: var(--ss-shadow-card);
  }
  #shorts-hub .launchpad-footer-panel h2 { margin: 0 0 3px 0; font-size: 14px; font-weight: 600; color: var(--ss-slate-800); letter-spacing: -0.01em; }
  #shorts-hub .launchpad-footer-panel p { margin: 0; font-size: 11px; color: var(--ss-slate-500); line-height: 1.4; }

  #shorts-hub .btn-launch {
    background: var(--ss-slate-900);
    color: #FFFFFF !important;
    font-weight: 600;
    font-size: 12px;
    text-decoration: none !important;
    padding: 7px 12px;
    border-radius: 8px;
    white-space: nowrap;
    transition: var(--ss-easing);
    text-align: center;
    width: 100%;
    border: none;
    display: block;
  }
  #shorts-hub .btn-launch:hover { 
    background: #1E293B;
    color: #FFFFFF !important;
  }

  /* =========================================================
     6. RIGHT TIMELINE RAIL & SECTIONS
     ========================================================= */
  #shorts-hub .right-timeline-rail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  #shorts-hub .timeline-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #shorts-hub .section-lane-divider {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ss-slate-400);
    margin: 8px 0 2px 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #shorts-hub .section-lane-divider::after { content: ""; flex-grow: 1; height: 1px; background: var(--ss-slate-200); }
  #shorts-hub .filter-dock + .timeline-section .section-lane-divider,
  #shorts-hub .rail-onboarding-tip + .timeline-section .section-lane-divider { margin-top: 0; }

  /* =========================================================
     7. MILESTONE CARDS
     ========================================================= */
  #shorts-hub .milestone-card {
    position: relative;
    background: #FFFFFF; 
    border: 1px solid var(--ss-slate-200);
    border-left: 3px solid var(--ss-slate-200); 
    border-radius: var(--ss-radius-premium);
    box-shadow: var(--ss-shadow-card);
    transition: var(--ss-easing);
    overflow: hidden;
    width: 100%;
  }

  #shorts-hub .milestone-card:hover { 
    border-color: rgba(15, 23, 42, 0.2); 
    box-shadow: var(--ss-shadow-hover); 
  }

  #shorts-hub .milestone-card:has(.card-toggle-input:checked) {
    border-left-color: var(--ss-accent);
    border-color: rgba(0, 82, 255, 0.3);
  }

  #shorts-hub .card-headline-strip {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px 14px; 
    background: transparent; 
    cursor: pointer;
    user-select: none;
    z-index: 2; 
    gap: 6px;
    transition: var(--ss-easing);
  }

  #shorts-hub .card-header-row-1, 
  #shorts-hub .card-header-row-2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  #shorts-hub .card-header-row-1 h3 {
    margin: 0;
    margin-left: 44px;
    font-size: 13.5px; 
    font-weight: 600;
    color: var(--ss-slate-800);
    letter-spacing: -0.01em;
    line-height: 1.35;
  }

  #shorts-hub .bc-teaser-time {
    margin-left: 44px;
    background: var(--ss-slate-100);
    color: var(--ss-slate-600);
    border: 1px solid var(--ss-slate-200);
    font-weight: 500;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  #shorts-hub .bg-watermark {
    position: absolute;
    left: 10px; 
    top: 10px;
    font-size: 30px; 
    font-weight: 800;
    font-family: inherit;
    color: var(--ss-slate-200);
    user-select: none;
    pointer-events: none;
    z-index: 1; 
    line-height: 1; 
    transition: var(--ss-easing);
  }

  #shorts-hub .interaction-meta-block {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
  }

  #shorts-hub .click-state-hint {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ss-slate-400);
    transition: var(--ss-easing);
  }
  #shorts-hub .click-state-hint::before { content: "Expand"; }
  #shorts-hub .card-toggle-input:checked ~ .card-headline-strip .click-state-hint::before { content: "Collapse"; }

  #shorts-hub .accordion-carret-icon {
    width: 12px;
    height: 12px;
    color: var(--ss-slate-400);
    transition: var(--ss-easing);
    flex-shrink: 0;
  }

  #shorts-hub .card-toggle-input:checked ~ .card-headline-strip .accordion-carret-icon { 
    transform: rotate(180deg); 
    color: var(--ss-slate-900); 
  }

  /* DROPDOWN PANELS */
  #shorts-hub .strategic-context-grid {
    display: none;
    border-top: 1px solid var(--ss-stroke-subtle);
    position: relative;
    z-index: 2;
    background: var(--ss-slate-50);
  }

  #shorts-hub .card-toggle-input:checked ~ .strategic-context-grid { display: block; }

  #shorts-hub .context-block-cell { 
    padding: 10px 14px; 
    border-bottom: 1px solid var(--ss-stroke-subtle); 
  }
  #shorts-hub .cell-title-row { 
    margin-bottom: 4px; 
    font-size: 9.5px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.05em;
    color: var(--ss-accent);
  }
  #shorts-hub .context-block-cell ul { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.5; color: var(--ss-slate-600); }
  #shorts-hub .context-block-cell li { margin-bottom: 4px; }
  #shorts-hub .context-block-cell li:last-child { margin-bottom: 0; }

  #shorts-hub .card-action-bar-cell { 
    padding: 8px 14px; 
    display: flex; 
    gap: 6px; 
    background: #FFFFFF; 
  }

  #shorts-hub .ua-btn {
    flex: 1;
    font-size: 11px; 
    font-weight: 600;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    border-radius: 6px;
    transition: var(--ss-easing);
    text-align: center;
    white-space: nowrap;
    border: none;
    cursor: pointer;
  }

  #shorts-hub .ua-video { background: var(--ss-slate-100); color: var(--ss-slate-700) !important; }
  #shorts-hub .ua-video:hover { background: var(--ss-slate-200); color: var(--ss-slate-900) !important; }
  #shorts-hub .ua-docs { background: #FFFFFF; border: 1px solid var(--ss-slate-200); color: var(--ss-slate-700) !important; }
  #shorts-hub .ua-docs:hover { border-color: var(--ss-slate-300); background: var(--ss-slate-50); color: var(--ss-slate-900) !important; }
  #shorts-hub .ua-next { background: var(--ss-accent); color: #FFFFFF !important; }
  #shorts-hub .ua-next:hover { background: var(--ss-accent-dark); }

  /* =========================================================
     8. PAGE FOOTER NAVIGATION
     ========================================================= */
  #shorts-hub .hub-footer-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--ss-slate-200);
    width: 100%;
  }

  #shorts-hub .btn-footer-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: var(--ss-easing);
    cursor: pointer;
  }

  #shorts-hub .btn-footer-secondary {
    background: #FFFFFF;
    border: 1px solid var(--ss-slate-200);
    color: var(--ss-slate-700) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }
  #shorts-hub .btn-footer-secondary:hover {
    background: var(--ss-slate-100);
    color: var(--ss-slate-900) !important;
    border-color: var(--ss-slate-300);
    transform: translateX(-2px);
  }

  #shorts-hub .btn-footer-primary {
    background: var(--ss-accent);
    border: 1px solid var(--ss-accent);
    color: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(0, 82, 255, 0.15);
  }
  #shorts-hub .btn-footer-primary:hover {
    background: var(--ss-accent-dark);
    border-color: var(--ss-accent-dark);
    transform: translateX(2px);
  }

  /* =========================================================
     9. RESPONSIVE ADAPTATION
     ========================================================= */
  @media (max-width: 1024px) {
    #shorts-hub .balanced-split-grid { 
      grid-template-columns: 1fr; 
      gap: 24px; 
    }
    #shorts-hub .right-timeline-rail { max-width: 100%; }
    #shorts-hub .sticky-left-viewport { position: static; }
  }

  @media (max-width: 640px) {
    #shorts-hub .bottom-boxes-split { grid-template-columns: 1fr; }
    #shorts-hub .filter-dock { width: 100%; overflow-x: auto; }
    #shorts-hub .filter-tab-label { flex: 1 0 auto; text-align: center; }
    #shorts-hub .hub-footer-nav {
      flex-direction: column-reverse;
      gap: 10px;
    }
    #shorts-hub .btn-footer-nav {
      width: 100%;
    }
  }
</style>

<div id="shorts-hub">

  <div class="balanced-split-grid">
    
    <div class="sticky-left-viewport">
      <div class="cinema-player-box">
        <iframe class="iframe-canvas" name="v_frame" id="vp" src="https://www.youtube.com/embed/r4c_AP74qGw?start=0&rel=0" title="Sumsub Quick Start Guide" allowfullscreen></iframe>
      </div>

      <div class="bottom-boxes-split">
        <div class="checklist-card">
          <h3>Implementation Checklist</h3>
          <label class="checklist-item"><input type="checkbox" /><span>Choose your integration <a href="/docs/go-live" target="_blank" class="inline-guide-link">→</a></span></label>
          <label class="checklist-item"><input type="checkbox" /><span>Configure account and billing <a href="/docs/billing" target="_blank" class="inline-guide-link">→</a></span></label>
          <label class="checklist-item"><input type="checkbox" /><span>Test in Sandbox <a href="/docs/test-in-sandbox" target="_blank" class="inline-guide-link">→</a></span></label>
          <label class="checklist-item"><input type="checkbox" /><span>Watch video guides <a href="/docs/gs-with-sumsub" target="_blank" class="inline-guide-link">→</a></span></label>
          <label class="checklist-item"><input type="checkbox" /><span>Review results and go live <a href="/docs/review-results-in-applicant-profile" target="_blank" class="inline-guide-link">→</a></span></label>
        </div>

        <div class="launchpad-footer-panel">
          <div>
            <h2>Ready to integrate?</h2>
            <p>Head over to the Sumsub Dashboard to configure your integration and verification levels.</p>
          </div>
          <a href="https://cockpit.sumsub.com/checkus/home" target="_blank" class="btn-launch">Go to Dashboard →</a>
        </div>
      </div>
    </div>

    
    <div class="right-timeline-rail">

      
      <input type="radio" name="shorts-filter" id="f-all" class="radio-input-trigger" aria-label="Filter all modules" checked />
      <input type="radio" name="shorts-filter" id="f-integration" class="radio-input-trigger" aria-label="Filter integration modules" />
      <input type="radio" name="shorts-filter" id="f-setup" class="radio-input-trigger" aria-label="Filter setup modules" />
      <input type="radio" name="shorts-filter" id="f-testing" class="radio-input-trigger" aria-label="Filter testing modules" />

      
      <div class="filter-dock">
        <label for="f-all" class="filter-tab-label">All</label>
        <label for="f-integration" class="filter-tab-label">Integration Options</label>
        <label for="f-setup" class="filter-tab-label">Setup & Config</label>
        <label for="f-testing" class="filter-tab-label">Testing & Launch</label>
      </div>

      <div class="rail-onboarding-tip">
        <span>💡</span> <span>Click any module to view key takeaways, play video segments, or open documentation.</span>
      </div>

      
      <div class="timeline-section" data-section="integration">
        <div class="section-lane-divider">Integration Options</div>

        
        <div class="milestone-card">
          <input type="checkbox" id="ch-01" class="card-toggle-input" aria-label="Toggle Module 01" />
          <label for="ch-01" class="card-headline-strip">
            <div class="bg-watermark">01</div>
            <div class="card-header-row-1">
              <h3>Integration Types</h3>
              <div class="interaction-meta-block">
                <span class="click-state-hint"></span>
                <svg class="accordion-carret-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"></path></svg>
              </div>
            </div>
            <div class="card-header-row-2">
              <span class="bc-teaser-time">🎬 0:16</span>
            </div>
          </label>
          <div class="strategic-context-grid">
            <div class="context-block-cell">
              <div class="cell-title-row">Key Takeaways</div>
              <ul>
                <li><b>Verification Links:</b> No-code option, minimum customization.</li>
                <li><b>Web and Mobile SDK:</b> Sumsub's recommended solution, easy yet customizable.</li>
                <li><b>API:</b> Most coding and customization required.</li>
              </ul>
            </div>
            <div class="card-action-bar-cell">
              <a href="https://www.youtube.com/embed/r4c_AP74qGw?start=16&autoplay=1&rel=0" target="v_frame" class="ua-btn ua-video">🎬 Play</a>
              <a href="/docs/go-live" target="_blank" class="ua-btn ua-docs">Open Guide ↗</a>
              <a href="https://www.youtube.com/embed/r4c_AP74qGw?start=32&autoplay=1&rel=0" target="v_frame" class="ua-btn ua-next">Next Module →</a>
            </div>
          </div>
        </div>

        
        <div class="milestone-card">
          <input type="checkbox" id="ch-02" class="card-toggle-input" aria-label="Toggle Module 02" />
          <label for="ch-02" class="card-headline-strip">
            <div class="bg-watermark">02</div>
            <div class="card-header-row-1">
              <h3>Verification Links</h3>
              <div class="interaction-meta-block">
                <span class="click-state-hint"></span>
                <svg class="accordion-carret-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"></path></svg>
              </div>
            </div>
            <div class="card-header-row-2">
              <span class="bc-teaser-time">🎬 0:32</span>
            </div>
          </label>
          <div class="strategic-context-grid">
            <div class="context-block-cell">
              <div class="cell-title-row">Key Takeaways</div>
              <ul>
                <li><b>No-code way</b> to start verifying instantly.</li>
                <li><b>Customization</b> available but limited.</li>
              </ul>
            </div>
            <div class="card-action-bar-cell">
              <a href="https://www.youtube.com/embed/r4c_AP74qGw?start=32&autoplay=1&rel=0" target="v_frame" class="ua-btn ua-video">🎬 Play</a>
              <a href="/docs/verification-links" target="_blank" class="ua-btn ua-docs">Open Guide ↗</a>
              <a href="https://www.youtube.com/embed/r4c_AP74qGw?start=204&autoplay=1&rel=0" target="v_frame" class="ua-btn ua-next">Next Module →</a>
            </div>
          </div>
        </div>

        
        <div class="milestone-card">
          <input type="checkbox" id="ch-03" class="card-toggle-input" aria-label="Toggle Module 03" />
          <label for="ch-03" class="card-headline-strip">
            <div class="bg-watermark">03</div>
            <div class="card-header-row-1">
              <h3>SDK Integration</h3>
              <div class="interaction-meta-block">
                <span class="click-state-hint"></span>
                <svg class="accordion-carret-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"></path></svg>
              </div>
            </div>
            <div class="card-header-row-2">
              <span class="bc-teaser-time">🎬 3:24</span>
            </div>
          </label>
          <div class="strategic-context-grid">
            <div class="context-block-cell">
              <div class="cell-title-row">Key Takeaways</div>
              <ul>
                <li>Sumsub's <b>recommended solution</b>.</li>
                <li><b>Full customization</b> available.</li>
              </ul>
            </div>
            <div class="card-action-bar-cell">
              <a href="https://www.youtube.com/embed/r4c_AP74qGw?start=204&autoplay=1&rel=0" target="v_frame" class="ua-btn ua-video">🎬 Play</a>
              <a href="/docs/get-started-with-web-sdk" target="_blank" class="ua-btn ua-docs">Open Guide ↗</a>
              <a href="https://www.youtube.com/embed/r4c_AP74qGw?start=374&autoplay=1&rel=0" target="v_frame" class="ua-btn ua-next">Next Module →</a>
            </div>
          </div>
        </div>

        
        <div class="milestone-card">
          <input type="checkbox" id="ch-04" class="card-toggle-input" aria-label="Toggle Module 04" />
          <label for="ch-04" class="card-headline-strip">
            <div class="bg-watermark">04</div>
            <div class="card-header-row-1">
              <h3>API Integration</h3>
              <div class="interaction-meta-block">
                <span class="click-state-hint"></span>
                <svg class="accordion-carret-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"></path></svg>
              </div>
            </div>
            <div class="card-header-row-2">
              <span class="bc-teaser-time">🎬 6:14</span>
            </div>
          </label>
          <div class="strategic-context-grid">
            <div class="context-block-cell">
              <div class="cell-title-row">Key Takeaways</div>
              <ul>
                <li><b>Client-side</b> implementation: most coding.</li>
                <li><b>Full customization</b> available.</li>
              </ul>
            </div>
            <div class="card-action-bar-cell">
              <a href="https://www.youtube.com/embed/r4c_AP74qGw?start=374&autoplay=1&rel=0" target="v_frame" class="ua-btn ua-video">🎬 Play</a>
              <a href="/docs/verification-links" target="_blank" class="ua-btn ua-docs">Open Guide ↗</a>
              <a href="https://www.youtube.com/embed/r4c_AP74qGw?start=434&autoplay=1&rel=0" target="v_frame" class="ua-btn ua-next">Next Module →</a>
            </div>
          </div>
        </div>
      </div>

      
      <div class="timeline-section" data-section="setup">
        <div class="section-lane-divider">Setup & Config</div>

        
        <div class="milestone-card">
          <input type="checkbox" id="ch-05" class="card-toggle-input" aria-label="Toggle Module 05" />
          <label for="ch-05" class="card-headline-strip">
            <div class="bg-watermark">05</div>
            <div class="card-header-row-1">
              <h3>Environments & Modes</h3>
              <div class="interaction-meta-block">
                <span class="click-state-hint"></span>
                <svg class="accordion-carret-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"></path></svg>
              </div>
            </div>
            <div class="card-header-row-2">
              <span class="bc-teaser-time">🎬 7:14</span>
            </div>
          </label>
          <div class="strategic-context-grid">
            <div class="context-block-cell">
              <div class="cell-title-row">Key Takeaways</div>
              <ul>
                <li>Environments a.k.a. Your Path from Login to Live: <b>Sandbox, Trial, Production</b>.</li>
                <li><b>Modes:</b> Sandbox vs. Production.</li>
              </ul>
            </div>
            <div class="card-action-bar-cell">
              <a href="https://www.youtube.com/embed/r4c_AP74qGw?start=434&autoplay=1&rel=0" target="v_frame" class="ua-btn ua-video">🎬 Play</a>
              <a href="/docs/test-in-sandbox" target="_blank" class="ua-btn ua-docs">Open Guide ↗</a>
              <a href="https://www.youtube.com/embed/r4c_AP74qGw?start=713&autoplay=1&rel=0" target="v_frame" class="ua-btn ua-next">Next Module →</a>
            </div>
          </div>
        </div>

        
        <div class="milestone-card">
          <input type="checkbox" id="ch-06" class="card-toggle-input" aria-label="Toggle Module 06" />
          <label for="ch-06" class="card-headline-strip">
            <div class="bg-watermark">06</div>
            <div class="card-header-row-1">
              <h3>Dashboard Navigation & Helpcenter</h3>
              <div class="interaction-meta-block">
                <span class="click-state-hint"></span>
                <svg class="accordion-carret-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"></path></svg>
              </div>
            </div>
            <div class="card-header-row-2">
              <span class="bc-teaser-time">🎬 11:53</span>
            </div>
          </label>
          <div class="strategic-context-grid">
            <div class="context-block-cell">
              <div class="cell-title-row">Key Takeaways</div>
              <ul>
                <li><b>Home page</b> navigation.</li>
                <li>Helpful <b>guides & resources</b>.</li>
              </ul>
            </div>
            <div class="card-action-bar-cell">
              <a href="https://www.youtube.com/embed/r4c_AP74qGw?start=713&autoplay=1&rel=0" target="v_frame" class="ua-btn ua-video">🎬 Play</a>
              <a href="/docs/account" target="_blank" class="ua-btn ua-docs">Open Guide ↗</a>
              <a href="https://www.youtube.com/embed/r4c_AP74qGw?start=840&autoplay=1&rel=0" target="v_frame" class="ua-btn ua-next">Next Module →</a>
            </div>
          </div>
        </div>

        
        <div class="milestone-card">
          <input type="checkbox" id="ch-07" class="card-toggle-input" aria-label="Toggle Module 07" />
          <label for="ch-07" class="card-headline-strip">
            <div class="bg-watermark">07</div>
            <div class="card-header-row-1">
              <h3>Creating Verification Level</h3>
              <div class="interaction-meta-block">
                <span class="click-state-hint"></span>
                <svg class="accordion-carret-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"></path></svg>
              </div>
            </div>
            <div class="card-header-row-2">
              <span class="bc-teaser-time">🎬 14:00</span>
            </div>
          </label>
          <div class="strategic-context-grid">
            <div class="context-block-cell">
              <div class="cell-title-row">Key Takeaways</div>
              <ul>
                <li>Level is a sequence of steps your users take to get verified.</li>
                <li><b>No-code:</b> Easy to set up, easy to edit.</li>
                <li>Levels for <b>Individuals</b> (KYC) and <b>Companies</b> (KYB).</li>
              </ul>
            </div>
            <div class="card-action-bar-cell">
              <a href="https://www.youtube.com/embed/r4c_AP74qGw?start=840&autoplay=1&rel=0" target="v_frame" class="ua-btn ua-video">🎬 Play</a>
              <a href="/docs/verification-levels" target="_blank" class="ua-btn ua-docs">Open Guide ↗</a>
              <a href="https://www.youtube.com/embed/r4c_AP74qGw?start=1047&autoplay=1&rel=0" target="v_frame" class="ua-btn ua-next">Next Module →</a>
            </div>
          </div>
        </div>
      </div>

      
      <div class="timeline-section" data-section="testing">
        <div class="section-lane-divider">Testing & Launch</div>

        
        <div class="milestone-card">
          <input type="checkbox" id="ch-08" class="card-toggle-input" aria-label="Toggle Module 08" />
          <label for="ch-08" class="card-headline-strip">
            <div class="bg-watermark">08</div>
            <div class="card-header-row-1">
              <h3>Testing Your Flow</h3>
              <div class="interaction-meta-block">
                <span class="click-state-hint"></span>
                <svg class="accordion-carret-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"></path></svg>
              </div>
            </div>
            <div class="card-header-row-2">
              <span class="bc-teaser-time">🎬 17:27</span>
            </div>
          </label>
          <div class="strategic-context-grid">
            <div class="context-block-cell">
              <div class="cell-title-row">Key Takeaways</div>
              <ul>
                <li><b>Run Level</b> in Sandbox and complete steps from user's POV.</li>
                <li>Use <a href="/docs/verification-document-templates" target="_blank" style="color: #0052FF;">templated documents</a> for secure testing.</li>
              </ul>
            </div>
            <div class="card-action-bar-cell">
              <a href="https://www.youtube.com/embed/r4c_AP74qGw?start=1047&autoplay=1&rel=0" target="v_frame" class="ua-btn ua-video">🎬 Play</a>
              <a href="/docs/test-in-sandbox" target="_blank" class="ua-btn ua-docs">Open Guide ↗</a>
              <a href="https://www.youtube.com/embed/r4c_AP74qGw?start=1142&autoplay=1&rel=0" target="v_frame" class="ua-btn ua-next">Next Module →</a>
            </div>
          </div>
        </div>

        
        <div class="milestone-card">
          <input type="checkbox" id="ch-09" class="card-toggle-input" aria-label="Toggle Module 09" />
          <label for="ch-09" class="card-headline-strip">
            <div class="bg-watermark">09</div>
            <div class="card-header-row-1">
              <h3>Reviewing Results & Reports</h3>
              <div class="interaction-meta-block">
                <span class="click-state-hint"></span>
                <svg class="accordion-carret-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"></path></svg>
              </div>
            </div>
            <div class="card-header-row-2">
              <span class="bc-teaser-time">🎬 19:02</span>
            </div>
          </label>
          <div class="strategic-context-grid">
            <div class="context-block-cell">
              <div class="cell-title-row">Key Takeaways</div>
              <ul>
                <li>Review applicant profiles.</li>
                <li>Download applicant reports for audits.</li>
              </ul>
            </div>
            <div class="card-action-bar-cell">
              <a href="https://www.youtube.com/embed/r4c_AP74qGw?start=1142&autoplay=1&rel=0" target="v_frame" class="ua-btn ua-video">🎬 Play</a>
              <a href="/docs/review-results-in-applicant-profile" target="_blank" class="ua-btn ua-docs">Open Guide ↗</a>
              <a href="/docs/configure-verification-levels" class="ua-btn ua-next">Next Guide →</a>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

  
  <div class="hub-footer-nav">
    <a href="/docs/gs-kyc" class="btn-footer-nav btn-footer-secondary">
      ← To User Verification Hub
    </a>
    <a href="/docs/gs-with-sumsub" class="btn-footer-nav btn-footer-primary">
      To Product Videos Home →
    </a>
  </div>

</div>
`}</HTMLBlock>