smartcomply-web-sdk 1.0.51 → 1.0.53

package/dist/smartcomply.browser.js

@@ -4460,8 +4460,7 @@ var SmartComplySDK = (() => {
   var BLINK_HOLD_FRAMES = 2;
   var YAW_MOTION_THRESHOLD_DEG = 6;
   var ActionDetector = class {
-    /** Kept for API compatibility with callers that still pass a list in. Unused internally. */
-    constructor(_requiredActions) {
+    constructor() {
       this.blinkHoldCount = 0;
       this.blinkDetected = false;
       this.motionDetected = false;
@@ -4498,24 +4497,13 @@ var SmartComplySDK = (() => {
         faceDetected,
         blinkDetected: this.blinkDetected,
         motionDetected: this.motionDetected,
-        livenessConfirmed: this.blinkDetected || this.motionDetected,
-        progress: 0
-        // caller fills in time-based progress
+        livenessConfirmed: this.blinkDetected || this.motionDetected
       };
     }
     getHeadYaw(matrix) {
       if (!matrix || matrix.length < 16) return 0;
       return Math.atan2(-matrix[2], matrix[0]) * (180 / Math.PI);
     }
-    livenessConfirmed() {
-      return this.blinkDetected || this.motionDetected;
-    }
-    reset() {
-      this.blinkHoldCount = 0;
-      this.blinkDetected = false;
-      this.motionDetected = false;
-      this.baselineYaw = null;
-    }
   };
 
   // src/modules/liveness/LivenessUI.ts
@@ -4533,6 +4521,20 @@ var SmartComplySDK = (() => {
       0%,100% { opacity:0.3; transform:scale(0.85); }
       50%     { opacity:1;   transform:scale(1); }
     }
+    @keyframes sc-scanline-sweep {
+      0%   { transform:translateY(-4%); opacity:0; }
+      8%   { opacity:0.9; }
+      92%  { opacity:0.9; }
+      100% { transform:translateY(104%); opacity:0; }
+    }
+    @keyframes sc-corner-pulse {
+      0%,100% { opacity:0.55; }
+      50%     { opacity:1; }
+    }
+    @keyframes sc-oval-breathe {
+      0%,100% { opacity:0.5; }
+      50%     { opacity:0.85; }
+    }
   `;
     document.head.appendChild(s2);
   }
@@ -4542,11 +4544,15 @@ var SmartComplySDK = (() => {
       this.videoEl = null;
       this.instructionEl = null;
       this.confidenceRingEl = null;
+      this.bgOvalEl = null;
+      this.guideWrapEl = null;
+      this.scanlineEl = null;
       this.overlayEl = null;
       this.dotsEl = null;
       this.docCaptureRoot = null;
       this.scanStartMs = 0;
       this.scanDurationMs = 0;
+      this.faceTracked = false;
     }
     mount(container, challenge) {
       injectLivenessKeyframes();
@@ -4564,41 +4570,110 @@ var SmartComplySDK = (() => {
       this.videoEl.muted = true;
       this.videoEl.style.cssText = `
       width:100%;height:100%;display:block;
+      filter:brightness(1.03) contrast(1.03);
       transform:scaleX(-1);object-fit:cover;
+    `;
+      const vignette = document.createElement("div");
+      vignette.style.cssText = `
+      position:absolute;inset:0;pointer-events:none;
+      background:radial-gradient(ellipse 34% 44% at 50% 47%, transparent 55%, rgba(0,0,0,0.55) 100%);
     `;
       const guideWrap = document.createElement("div");
       guideWrap.style.cssText = `
       position:absolute;top:50%;left:50%;
       transform:translate(-50%,-52%);
       width:64%;aspect-ratio:140/180;pointer-events:none;
+      filter:drop-shadow(0 0 18px rgba(59,130,246,0.35));
+      transition:filter 0.3s ease;
     `;
+      this.guideWrapEl = guideWrap;
       const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
       svg.setAttribute("viewBox", "0 0 140 180");
-      svg.style.cssText = "width:100%;height:100%;";
+      svg.style.cssText = "width:100%;height:100%;overflow:visible;";
+      const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+      const clip = document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
+      clip.setAttribute("id", "sc-oval-clip");
+      const clipOval = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
+      clipOval.setAttribute("cx", "70");
+      clipOval.setAttribute("cy", "90");
+      clipOval.setAttribute("rx", "64");
+      clipOval.setAttribute("ry", "86");
+      clip.appendChild(clipOval);
+      defs.appendChild(clip);
+      svg.appendChild(defs);
+      const trackOval = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
+      trackOval.setAttribute("cx", "70");
+      trackOval.setAttribute("cy", "90");
+      trackOval.setAttribute("rx", "58");
+      trackOval.setAttribute("ry", "80");
+      trackOval.setAttribute("fill", "none");
+      trackOval.setAttribute("stroke", "rgba(255,255,255,0.16)");
+      trackOval.setAttribute("stroke-width", "1");
+      trackOval.setAttribute("stroke-dasharray", "2 5");
+      svg.appendChild(trackOval);
       const bgOval = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
       bgOval.setAttribute("cx", "70");
       bgOval.setAttribute("cy", "90");
       bgOval.setAttribute("rx", "64");
       bgOval.setAttribute("ry", "86");
       bgOval.setAttribute("fill", "none");
-      bgOval.setAttribute("stroke", "rgba(255,255,255,0.35)");
-      bgOval.setAttribute("stroke-width", "2");
+      bgOval.setAttribute("stroke", "rgba(255,255,255,0.4)");
+      bgOval.setAttribute("stroke-width", "1.5");
+      bgOval.style.cssText = "animation:sc-oval-breathe 2.4s ease-in-out infinite;transition:stroke 0.3s ease;";
+      this.bgOvalEl = bgOval;
       const confOval = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
       confOval.setAttribute("cx", "70");
       confOval.setAttribute("cy", "90");
       confOval.setAttribute("rx", "64");
       confOval.setAttribute("ry", "86");
       confOval.setAttribute("fill", "none");
-      confOval.setAttribute("stroke", "#22c55e");
-      confOval.setAttribute("stroke-width", "3");
+      confOval.setAttribute("stroke", "#3b82f6");
+      confOval.setAttribute("stroke-width", "2.5");
+      confOval.setAttribute("stroke-linecap", "round");
       const circ = 2 * Math.PI * Math.sqrt((64 * 64 + 86 * 86) / 2);
       confOval.setAttribute("stroke-dasharray", `${circ}`);
       confOval.setAttribute("stroke-dashoffset", `${circ}`);
-      confOval.style.cssText = "transition:stroke-dashoffset 0.2s linear;transform:rotate(-90deg);transform-origin:70px 90px;";
+      confOval.style.cssText = "transition:stroke-dashoffset 0.2s linear,stroke 0.3s ease;transform:rotate(-90deg);transform-origin:70px 90px;";
       this.confidenceRingEl = confOval;
+      const bracketGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
+      bracketGroup.setAttribute("stroke", "#3b82f6");
+      bracketGroup.setAttribute("stroke-width", "3");
+      bracketGroup.setAttribute("stroke-linecap", "round");
+      bracketGroup.setAttribute("fill", "none");
+      bracketGroup.style.cssText = "animation:sc-corner-pulse 2s ease-in-out infinite;";
+      const bracketLen = 14;
+      const bx0 = 70 - 64 * 0.74, bx1 = 70 + 64 * 0.74;
+      const by0 = 90 - 86 * 0.82, by1 = 90 + 86 * 0.82;
+      const brackets = [
+        `M${bx0},${by0 + bracketLen} L${bx0},${by0} L${bx0 + bracketLen},${by0}`,
+        `M${bx1 - bracketLen},${by0} L${bx1},${by0} L${bx1},${by0 + bracketLen}`,
+        `M${bx0},${by1 - bracketLen} L${bx0},${by1} L${bx0 + bracketLen},${by1}`,
+        `M${bx1 - bracketLen},${by1} L${bx1},${by1} L${bx1},${by1 - bracketLen}`
+      ];
+      for (const d2 of brackets) {
+        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path.setAttribute("d", d2);
+        bracketGroup.appendChild(path);
+      }
       svg.appendChild(bgOval);
       svg.appendChild(confOval);
+      svg.appendChild(bracketGroup);
       guideWrap.appendChild(svg);
+      const scanlineClipWrap = document.createElement("div");
+      scanlineClipWrap.style.cssText = `
+      position:absolute;inset:0;
+      clip-path:ellipse(45.7% 47.8% at 50% 50%);
+      overflow:hidden;
+    `;
+      const scanline = document.createElement("div");
+      scanline.style.cssText = `
+      position:absolute;left:0;right:0;height:26%;top:0;
+      background:linear-gradient(180deg,transparent 0%,rgba(59,130,246,0.32) 45%,rgba(147,197,253,0.55) 50%,rgba(59,130,246,0.32) 55%,transparent 100%);
+      animation:sc-scanline-sweep 2.6s ease-in-out infinite;
+    `;
+      this.scanlineEl = scanline;
+      scanlineClipWrap.appendChild(scanline);
+      guideWrap.appendChild(scanlineClipWrap);
       const camTop = document.createElement("div");
       camTop.style.cssText = `
       position:absolute;top:0;left:0;right:0;
@@ -4622,13 +4697,14 @@ var SmartComplySDK = (() => {
       for (let i2 = 0; i2 < 3; i2++) {
         const dot = document.createElement("div");
         dot.style.cssText = `
-        width:6px;height:6px;border-radius:50%;background:#22c55e;
+        width:6px;height:6px;border-radius:50%;background:#3b82f6;
         animation:sc-scan-dot 1.1s ease-in-out ${i2 * 0.18}s infinite;
       `;
         this.dotsEl.appendChild(dot);
       }
       camBottom.appendChild(this.dotsEl);
       this.root.appendChild(this.videoEl);
+      this.root.appendChild(vignette);
       this.root.appendChild(guideWrap);
       this.root.appendChild(camTop);
       this.root.appendChild(camBottom);
@@ -4662,6 +4738,25 @@ var SmartComplySDK = (() => {
       this.confidenceRingEl.setAttribute("stroke-dashoffset", `${circ * (1 - pct)}`);
       this.confidenceRingEl.setAttribute("stroke", livenessConfirmed ? "#22c55e" : "#3b82f6");
     }
+    /**
+     * Reflects whether a face is currently detected in-frame — brightens the
+     * oval guide's glow/brackets when locked on, and dims the scan-line sweep
+     * so the UI visibly distinguishes "searching" from "actively scanning".
+     */
+    setFaceTracking(tracked) {
+      if (this.faceTracked === tracked) return;
+      this.faceTracked = tracked;
+      if (this.guideWrapEl) {
+        this.guideWrapEl.style.filter = tracked ? "drop-shadow(0 0 22px rgba(34,197,94,0.45))" : "drop-shadow(0 0 18px rgba(59,130,246,0.35))";
+      }
+      if (this.bgOvalEl) {
+        this.bgOvalEl.setAttribute("stroke", tracked ? "rgba(74,222,128,0.55)" : "rgba(255,255,255,0.4)");
+      }
+      if (this.scanlineEl) {
+        this.scanlineEl.style.animationPlayState = tracked ? "running" : "paused";
+        this.scanlineEl.style.opacity = tracked ? "1" : "0.4";
+      }
+    }
     updateInstruction(text) {
       if (this.instructionEl) this.instructionEl.textContent = text;
     }
@@ -4803,6 +4898,10 @@ var SmartComplySDK = (() => {
       this.confidenceRingEl = null;
       this.overlayEl = null;
       this.dotsEl = null;
+      this.bgOvalEl = null;
+      this.guideWrapEl = null;
+      this.scanlineEl = null;
+      this.faceTracked = false;
     }
   };
 
@@ -4970,7 +5069,7 @@ var SmartComplySDK = (() => {
         tempVideo.muted = true;
         tempVideo.playsInline = true;
         await tempVideo.play();
-        ui2.mount(container, { actions: [], time_limit_seconds: 0, instruction: "Centre your face in the oval" });
+        ui2.mount(container, { time_limit_seconds: 0, instruction: "Centre your face in the oval" });
         const uiVideo = ui2.getVideoElement();
         if (uiVideo) {
           uiVideo.srcObject = stream;
@@ -4983,7 +5082,6 @@ var SmartComplySDK = (() => {
         ui2.updateInstruction("Centre your face in the oval");
         const videoForDetection = uiVideo || tempVideo;
         await new Promise((resolve) => {
-          let attempts = 0;
           let stableFrames = 0;
           let missedFrames = 0;
           const STABLE_REQUIRED = 4;
@@ -4997,6 +5095,7 @@ var SmartComplySDK = (() => {
             }
             if (videoForDetection.readyState >= 2) {
               const detection = faceEngine.detect(videoForDetection, performance.now());
+              ui2.setFaceTracking(detection.faceDetected);
               if (detection.faceDetected) {
                 stableFrames++;
                 missedFrames = 0;
@@ -5045,7 +5144,6 @@ var SmartComplySDK = (() => {
         tempVideo.srcObject = null;
         tempVideo.remove();
         const uiChallenge = {
-          actions: entry.challenge_actions,
           time_limit_seconds: LIVENESS_TIME_LIMIT_SECONDS,
           instruction: "Blink and look around naturally"
         };
@@ -5072,6 +5170,7 @@ var SmartComplySDK = (() => {
                 const detection = faceEngine.detect(videoEl, performance.now());
                 const scan = actionDetector.check(detection);
                 ui2.updateScanProgress(scan.livenessConfirmed);
+                ui2.setFaceTracking(detection.faceDetected);
                 if (!detection.faceDetected) {
                   ui2.updateInstruction("Move your face into the oval");
                 } else {
@@ -6347,13 +6446,13 @@ var SmartComplySDK = (() => {
 
   // src/flow/SmartComplyFlow.ts
   var COUNTRY_LABELS = {
-    nigeria: "🇳🇬  Nigeria",
-    global: "🌍  Other Countries",
-    ghana: "🇬🇭  Ghana",
-    kenya: "🇰🇪  Kenya",
-    south_africa: "🇿🇦  South Africa",
-    united_states: "🇺🇸  United States",
-    united_kingdom: "🇬🇧  United Kingdom"
+    nigeria: "🇳🇬  Nigeria",
+    global: "🌍  Other Countries",
+    ghana: "🇬🇭  Ghana",
+    kenya: "🇰🇪  Kenya",
+    south_africa: "🇿🇦  South Africa",
+    united_states: "🇺🇸  United States",
+    united_kingdom: "🇬🇧  United Kingdom"
   };
   function isUploadFieldType(type) {
     return type === "upload" || type === "image" || type === "file";
@@ -6367,37 +6466,37 @@ var SmartComplySDK = (() => {
       return t2.includes("voter") || t2.includes("driver") || t2.includes("license") || t2.includes("national id") || t2.includes("national id card");
     };
     if (u2.includes("BVN") || u2.includes("BANK VERIFICATION")) {
-      return { icon: "🏦", desc: "Enter your 11-digit Bank Verification Number (BVN)", requiresBack: false };
+      return { icon: "🏦", desc: "Enter your 11-digit Bank Verification Number (BVN)", requiresBack: false };
     }
     if (u2.includes("NIN") || u2.includes("NATIONAL IDENTITY NUMBER")) {
-      return { icon: "🆔", desc: "Enter your 11-digit National Identification Number (NIN)", requiresBack: false };
+      return { icon: "🆔", desc: "Enter your 11-digit National Identification Number (NIN)", requiresBack: false };
     }
     if (u2.includes("GHANA")) {
-      if (isDocumentFlow) return { icon: "🪪", desc: "Capture or upload your Ghana Card", requiresBack: true };
-      return { icon: "🪪", desc: "Enter your Ghana Card number", requiresBack: false };
+      if (isDocumentFlow) return { icon: "🪪", desc: "Capture or upload your Ghana Card", requiresBack: true };
+      return { icon: "🪪", desc: "Enter your Ghana Card number", requiresBack: false };
     }
     if (u2.includes("SSNIT"))
-      return { icon: "🏛️", desc: "Enter your SSNIT number", requiresBack: false };
+      return { icon: "🏛️", desc: "Enter your SSNIT number", requiresBack: false };
     if (u2.includes("KENYA") || u2.includes("NATIONAL") && u2.includes("KENYA"))
-      return { icon: "🆔", desc: "Enter your Kenya National ID number", requiresBack: false };
+      return { icon: "🆔", desc: "Enter your Kenya National ID number", requiresBack: false };
     if (u2.includes("TIN") || u2.includes("TAX IDENTIFICATION"))
-      return { icon: "🧾", desc: "Enter your Tax Identification Number (TIN)", requiresBack: false };
+      return { icon: "🧾", desc: "Enter your Tax Identification Number (TIN)", requiresBack: false };
     if (u2.includes("CAC") || u2.includes("CORPORATE AFFAIRS") || u2.includes("COMPANY"))
-      return { icon: "🏢", desc: advanced ? "Enter RC number, company name & type" : "Enter your company registration number", requiresBack: false };
+      return { icon: "🏢", desc: advanced ? "Enter RC number, company name & type" : "Enter your company registration number", requiresBack: false };
     if (u2.includes("VOTER") || u2.includes("PVC")) {
       const requiresBack = requiresBackSide(typeName);
       return {
-        icon: "🗳️",
+        icon: "🗳️",
         desc: isDocumentFlow ? `Capture or upload your voter's card${requiresBack ? " (front & back)" : ""}` : "Enter your voter ID number",
         requiresBack: isDocumentFlow ? requiresBack : false
       };
     }
     if (u2.includes("PASSPORT"))
-      return { icon: "📘", desc: isDocumentFlow ? "Capture or upload your passport" : "Enter your passport number", requiresBack: false };
+      return { icon: "📘", desc: isDocumentFlow ? "Capture or upload your passport" : "Enter your passport number", requiresBack: false };
     if (u2.includes("DRIVER") || u2.includes("LICENSE") || u2.includes("LICENCE")) {
       const requiresBack = requiresBackSide(typeName);
       return {
-        icon: "🚗",
+        icon: "🚗",
         desc: isDocumentFlow ? `Capture or upload your driver's license${requiresBack ? " (front & back)" : ""}` : "Enter your driver's license number",
         requiresBack: isDocumentFlow ? requiresBack : false
       };
@@ -6405,15 +6504,15 @@ var SmartComplySDK = (() => {
     if (u2.includes("NATIONAL ID") || u2.includes("NATIONAL") && u2.includes("CARD")) {
       const requiresBack = requiresBackSide(typeName);
       return {
-        icon: "🪪",
+        icon: "🪪",
         desc: isDocumentFlow ? `Capture or upload your ID card${requiresBack ? " (front & back)" : ""}` : "Enter your National ID number",
         requiresBack: isDocumentFlow ? requiresBack : false
       };
     }
     if (u2.includes("LIVENESS") || u2.includes("FACE COMPARISON") || u2.includes("FACE MATCH"))
-      return { icon: "🤳", desc: "We'll capture a short selfie video to verify you", requiresBack: false };
+      return { icon: "🤳", desc: "We'll capture a short selfie video to verify you", requiresBack: false };
     return {
-      icon: isDocumentFlow ? "📄" : "🆔",
+      icon: isDocumentFlow ? "📄" : "🆔",
       desc: isDocumentFlow ? "Capture or upload your document" : "Enter your ID number",
       requiresBack: false
     };
@@ -6551,7 +6650,7 @@ var SmartComplySDK = (() => {
       this.livenessEntryId = null;
       this.isDestroyed = false;
       this.headerBackBtn = null;
-      // Retry safety — max 3 confirmation rejections or liveness failures per session
+      // Retry safety — max 3 confirmation rejections or liveness failures per session
       this._confirmRetries = 0;
       this._livenessFailures = 0;
       // IVS result stored for confirm_identity screen
@@ -6566,9 +6665,9 @@ var SmartComplySDK = (() => {
       this._ocrExpirySoon = false;
       // Camera pre-warm stream (created during confirmation screen, used in liveness)
       this._prewarmedStream = null;
-      // OCR gate poll timer — stored so it can be cancelled on navigation or close
+      // OCR gate poll timer — stored so it can be cancelled on navigation or close
       this._ocrPollTimer = null;
-      // UI timeout from _startStatusPolling — stored so close() can cancel it
+      // UI timeout from _startStatusPolling — stored so close() can cancel it
       this._uiTimeoutId = null;
       // Session expiry
       this.sessionExpiryTimer = null;
@@ -6643,9 +6742,9 @@ var SmartComplySDK = (() => {
       }
       this.options.onClose?.();
     }
-    // ─────────────────────────────────────────────────────────────────
+    // ─────────────────────────────────────────────────────────────────
     // Initialization
-    // ─────────────────────────────────────────────────────────────────
+    // ─────────────────────────────────────────────────────────────────
     mount() {
       this.injectStyles();
       this.overlay = document.createElement("div");
@@ -6730,9 +6829,9 @@ var SmartComplySDK = (() => {
         this.showErrorStep(err.message || "Failed to initialize. Please try again.");
       }
     }
-    // ─────────────────────────────────────────────────────────────────
+    // ─────────────────────────────────────────────────────────────────
     // Step rendering
-    // ─────────────────────────────────────────────────────────────────
+    // ─────────────────────────────────────────────────────────────────
     showStep(step) {
       this.currentStep = step;
       if (!this.contentArea) return;
@@ -6807,7 +6906,7 @@ var SmartComplySDK = (() => {
         wrapper.style.transform = "translateX(0)";
       });
     }
-    // ── Loading ─────────────────────────────────────────────────────
+    // ── Loading ─────────────────────────────────────────────────────
     renderLoading(container) {
       container.style.cssText += "display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;gap:16px;";
       const spinnerWrap = document.createElement("div");
@@ -6838,7 +6937,7 @@ var SmartComplySDK = (() => {
       sub.textContent = "Connecting to the verification service...";
       container.appendChild(sub);
     }
-    // ── Welcome ────────────────────────────────────────────────────
+    // ── Welcome ────────────────────────────────────────────────────
     renderWelcome(container) {
       container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;";
       const isDocFlow = this.isDocumentFlow();
@@ -6852,7 +6951,7 @@ var SmartComplySDK = (() => {
       background:linear-gradient(135deg,${this.theme.primary}22,${this.theme.primaryGlow});
       border:1.5px solid ${this.theme.primary}33;
     `;
-      iconWrap.textContent = isDocFlow ? "🪪" : "🛡️";
+      iconWrap.textContent = isDocFlow ? "🪪" : "🛡️";
       topRow.appendChild(iconWrap);
       const badge = document.createElement("div");
       badge.style.cssText = `
@@ -6863,7 +6962,7 @@ var SmartComplySDK = (() => {
       color:${this.theme.primary};
       border:1px solid ${this.theme.primary}30;
     `;
-      badge.textContent = isDocFlow ? "📄  Document Verification" : "🔍  Data Verification";
+      badge.textContent = isDocFlow ? "📄  Document Verification" : "🔍  Data Verification";
       topRow.appendChild(badge);
       container.appendChild(topRow);
       const titleWrap = document.createElement("div");
@@ -6885,13 +6984,13 @@ var SmartComplySDK = (() => {
       titleWrap.appendChild(desc);
       container.appendChild(titleWrap);
       const steps = isDocFlow ? [
-        { icon: "🪪", text: "Choose your document type", sub: "Passport, National ID, Driver License" },
-        { icon: "📷", text: "Scan your document", sub: "Upload or capture a photo of your ID" },
-        { icon: "🤳", text: "Face check", sub: "Quick selfie to confirm it's you" }
+        { icon: "🪪", text: "Choose your document type", sub: "Passport, National ID, Driver License" },
+        { icon: "📷", text: "Scan your document", sub: "Upload or capture a photo of your ID" },
+        { icon: "🤳", text: "Face check", sub: "Quick selfie to confirm it's you" }
       ] : [
-        { icon: "🆔", text: "Choose your ID type", sub: "NIN, BVN, Voter's Card and more" },
-        { icon: "📝", text: "Enter your ID details", sub: "Exactly as shown on your ID" },
-        { icon: "🤳", text: "Face check", sub: "Quick selfie to confirm it's you" }
+        { icon: "🆔", text: "Choose your ID type", sub: "NIN, BVN, Voter's Card and more" },
+        { icon: "📝", text: "Enter your ID details", sub: "Exactly as shown on your ID" },
+        { icon: "🤳", text: "Face check", sub: "Quick selfie to confirm it's you" }
       ];
       const stepsWrap = document.createElement("div");
       stepsWrap.style.cssText = `
@@ -6931,7 +7030,7 @@ var SmartComplySDK = (() => {
         stepsWrap.appendChild(row);
       });
       container.appendChild(stepsWrap);
-      const btn = this.createPrimaryButton("Get Started →");
+      const btn = this.createPrimaryButton("Get Started →");
       btn.style.cssText += "margin-top:2px;";
       btn.addEventListener("click", () => this.showStep("country"));
       container.appendChild(btn);
@@ -6940,10 +7039,10 @@ var SmartComplySDK = (() => {
       display:flex;align-items:center;gap:6px;
       color:${this.theme.textMuted};font-size:10.5px;
     `;
-      trust.textContent = "🔒  End-to-end encrypted";
+      trust.textContent = "🔒  End-to-end encrypted";
       container.appendChild(trust);
     }
-    // ── Country Select ──────────────────────────────────────────────
+    // ── Country Select ──────────────────────────────────────────────
     renderCountrySelect(container) {
       container.style.cssText += "display:flex;flex-direction:column;gap:14px;";
       const channels = this.sdkConfig?.channels || {};
@@ -6971,7 +7070,7 @@ var SmartComplySDK = (() => {
         container.appendChild(card);
       }
     }
-    // ── ID Type Select ──────────────────────────────────────────────
+    // ── ID Type Select ──────────────────────────────────────────────
     renderIdTypeSelect(container) {
       container.style.cssText += "display:flex;flex-direction:column;gap:14px;";
       const globalDocFlow = this.isDocumentFlow();
@@ -6993,7 +7092,7 @@ var SmartComplySDK = (() => {
         const requiresBack = requiresBackFromBackend ?? info.requiresBack;
         let subtitle2 = info.desc;
         if (requiresBack && isThisDocFlow) {
-          subtitle2 += " ⚠️ Both sides required";
+          subtitle2 += " ⚠️ Both sides required";
         }
         const displayName = typeName.replace(/\s*with\s+face\s*/gi, " ").replace(/\s*\(NIN\)\s*/gi, " ").replace(/\s*\(BVN\)\s*/gi, " ").replace(/\s{2,}/g, " ").trim();
         const card = this.createOptionCard(
@@ -7026,7 +7125,7 @@ var SmartComplySDK = (() => {
         container.appendChild(card);
       }
     }
-    // ── ID Input (data verification — dynamic fields) ─────────────
+    // ── ID Input (data verification — dynamic fields) ─────────────
     renderIdInput(container) {
       container.style.cssText += "display:flex;flex-direction:column;gap:14px;";
       const dataFields = this.selectedChannelFields.filter((f2) => f2.type !== "upload");
@@ -7056,13 +7155,13 @@ var SmartComplySDK = (() => {
         { match: "BVN", rule: { minLen: 11, maxLen: 11, numeric: true, hint: "BVN must be exactly 11 digits" } },
         { match: "NIN", rule: { minLen: 11, maxLen: 11, numeric: true, hint: "NIN must be exactly 11 digits" } },
         { match: "NATIONAL IDENTITY", rule: { minLen: 11, maxLen: 11, numeric: true, hint: "NIN must be exactly 11 digits" } },
-        { match: "PASSPORT", rule: { minLen: 6, maxLen: 20, alphanumeric: true, hint: "Passport number must be 6–20 alphanumeric characters" } },
-        { match: "DRIVER", rule: { minLen: 3, maxLen: 30, alphanumeric: true, hint: "Licence number must be 3–30 alphanumeric characters" } },
-        { match: "VOTER", rule: { minLen: 6, maxLen: 30, alphanumeric: true, hint: "Voter ID must be 6–30 alphanumeric characters" } },
-        { match: "GHANA", rule: { minLen: 8, maxLen: 20, alphanumeric: true, hint: "Ghana Card number must be 8–20 alphanumeric characters" } },
-        { match: "SSNIT", rule: { minLen: 7, maxLen: 15, alphanumeric: true, hint: "SSNIT number must be 7–15 alphanumeric characters" } },
-        { match: "TIN", rule: { minLen: 8, maxLen: 20, alphanumeric: true, hint: "TIN must be 8–20 characters" } },
-        { match: "KRA", rule: { minLen: 10, maxLen: 12, alphanumeric: true, hint: "KRA PIN must be 10–12 characters" } }
+        { match: "PASSPORT", rule: { minLen: 6, maxLen: 20, alphanumeric: true, hint: "Passport number must be 6–20 alphanumeric characters" } },
+        { match: "DRIVER", rule: { minLen: 3, maxLen: 30, alphanumeric: true, hint: "Licence number must be 3–30 alphanumeric characters" } },
+        { match: "VOTER", rule: { minLen: 6, maxLen: 30, alphanumeric: true, hint: "Voter ID must be 6–30 alphanumeric characters" } },
+        { match: "GHANA", rule: { minLen: 8, maxLen: 20, alphanumeric: true, hint: "Ghana Card number must be 8–20 alphanumeric characters" } },
+        { match: "SSNIT", rule: { minLen: 7, maxLen: 15, alphanumeric: true, hint: "SSNIT number must be 7–15 alphanumeric characters" } },
+        { match: "TIN", rule: { minLen: 8, maxLen: 20, alphanumeric: true, hint: "TIN must be 8–20 characters" } },
+        { match: "KRA", rule: { minLen: 10, maxLen: 12, alphanumeric: true, hint: "KRA PIN must be 10–12 characters" } }
       ];
       function getFieldRule(label) {
         const upper = label.toUpperCase();
@@ -7302,7 +7401,7 @@ var SmartComplySDK = (() => {
         setTimeout(() => firstInput.focus(), 350);
       }
     }
-    // ── Document Capture ────────────────────────────────────────────
+    // ── Document Capture ────────────────────────────────────────────
     renderDocumentCapture(container) {
       container.style.cssText += "display:flex;flex-direction:column;gap:14px;";
       const rawName = this.selectedIdTypeName || this.selectedIdType || "your document";
@@ -7338,7 +7437,7 @@ var SmartComplySDK = (() => {
         this.showErrorStep(err.message || "Document capture failed. Please try again.");
       });
     }
-    // ── W3: Identity Confirmation (data verification) ───────────────
+    // ── W3: Identity Confirmation (data verification) ───────────────
     renderConfirmIdentity(container) {
       container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:8px 0;";
       if (this._confirmRetries >= _SmartComplyFlow.MAX_RETRIES) {
@@ -7348,7 +7447,7 @@ var SmartComplySDK = (() => {
       this._prewarmCamera();
       const iconWrap = document.createElement("div");
       iconWrap.style.cssText = `width:64px;height:64px;border-radius:50%;background:${this.theme.primary}15;border:2px solid ${this.theme.primary}30;display:flex;align-items:center;justify-content:center;font-size:28px;`;
-      iconWrap.textContent = "🛡️";
+      iconWrap.textContent = "🛡️";
       container.appendChild(iconWrap);
       const title = document.createElement("h2");
       title.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
@@ -7385,7 +7484,7 @@ var SmartComplySDK = (() => {
         sub.textContent = "Your details have been confirmed. Please continue to the face check.";
         container.appendChild(sub);
       }
-      const yesBtn = this.createPrimaryButton("Yes, that's me — continue");
+      const yesBtn = this.createPrimaryButton("Yes, that's me — continue");
       yesBtn.addEventListener("click", () => {
         this._confirmRetries = 0;
         this.showStep("liveness");
@@ -7402,7 +7501,7 @@ var SmartComplySDK = (() => {
       });
       container.appendChild(noBtn);
     }
-    // ── W4: Document Confirmation (document verification) ────────────
+    // ── W4: Document Confirmation (document verification) ────────────
     renderDocumentConfirm(container) {
       container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:8px 0;";
       if (this._confirmRetries >= _SmartComplyFlow.MAX_RETRIES) {
@@ -7412,7 +7511,7 @@ var SmartComplySDK = (() => {
       this._prewarmCamera();
       const iconWrap = document.createElement("div");
       iconWrap.style.cssText = `width:64px;height:64px;border-radius:50%;background:${this.theme.primary}15;border:2px solid ${this.theme.primary}30;display:flex;align-items:center;justify-content:center;font-size:28px;`;
-      iconWrap.textContent = "📄";
+      iconWrap.textContent = "📄";
       container.appendChild(iconWrap);
       const title = document.createElement("h2");
       title.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
@@ -7435,7 +7534,7 @@ var SmartComplySDK = (() => {
       if (this._ocrExpirySoon && !this._ocrIsExpired) {
         const warn = document.createElement("div");
         warn.style.cssText = `width:100%;padding:10px 14px;border-radius:10px;background:${this.theme.warning}18;border:1px solid ${this.theme.warning}40;color:${this.theme.warning};font-size:12px;text-align:left;line-height:1.5;`;
-        warn.textContent = "⚠️  Your document expires soon. Some services may not accept it, but you can still continue.";
+        warn.textContent = "⚠️  Your document expires soon. Some services may not accept it, but you can still continue.";
         container.appendChild(warn);
       }
       const card = document.createElement("div");
@@ -7489,7 +7588,7 @@ var SmartComplySDK = (() => {
       });
       container.appendChild(noBtn);
     }
-    // ── W6+W7+W8: OCR Gate (document verification) ───────────────────
+    // ── W6+W7+W8: OCR Gate (document verification) ───────────────────
     renderOcrGate(container) {
       container.style.cssText += "display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 0;text-align:center;";
       const spinnerWrap = document.createElement("div");
@@ -7498,18 +7597,18 @@ var SmartComplySDK = (() => {
       ring.style.cssText = `position:absolute;inset:0;border-radius:50%;border:3px solid ${this.theme.border};border-top-color:${this.theme.primary};animation:sc-spin 0.9s linear infinite;`;
       const centre = document.createElement("div");
       centre.style.cssText = "position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;";
-      centre.textContent = "📄";
+      centre.textContent = "📄";
       spinnerWrap.appendChild(ring);
       spinnerWrap.appendChild(centre);
       container.appendChild(spinnerWrap);
       const statusEl = document.createElement("div");
       statusEl.setAttribute("aria-live", "polite");
       statusEl.style.cssText = `color:${this.theme.text};font-size:15px;font-weight:600;`;
-      statusEl.textContent = "Reading your document…";
+      statusEl.textContent = "Reading your document…";
       container.appendChild(statusEl);
       const subEl = document.createElement("div");
       subEl.style.cssText = `color:${this.theme.textSecondary};font-size:12px;max-width:260px;line-height:1.5;`;
-      subEl.textContent = "This usually takes 5–15 seconds. Please wait.";
+      subEl.textContent = "This usually takes 5–15 seconds. Please wait.";
       container.appendChild(subEl);
       if (!this.livenessEntryId) {
         this.showErrorStep("Document upload failed. Please try again.");
@@ -7554,8 +7653,8 @@ var SmartComplySDK = (() => {
           if (polls < MAX_POLLS && !this.isDestroyed) {
             this._ocrPollTimer = setTimeout(poll, 2e3);
           } else if (!this.isDestroyed) {
-            statusEl.textContent = "Taking longer than usual…";
-            subEl.textContent = "We'll continue — you can confirm your details on the next screen.";
+            statusEl.textContent = "Taking longer than usual…";
+            subEl.textContent = "We'll continue — you can confirm your details on the next screen.";
             this._ocrPollTimer = setTimeout(() => {
               if (!this.isDestroyed) this.showStep("document_confirm");
             }, 2e3);
@@ -7574,7 +7673,7 @@ var SmartComplySDK = (() => {
       container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:20px 0;";
       const icon = document.createElement("div");
       icon.style.cssText = `width:72px;height:72px;border-radius:50%;background:${this.theme.errorBg};border:3px solid ${this.theme.error};display:flex;align-items:center;justify-content:center;font-size:28px;`;
-      icon.textContent = "📅";
+      icon.textContent = "📅";
       container.appendChild(icon);
       const t2 = document.createElement("h2");
       t2.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
@@ -7603,7 +7702,7 @@ var SmartComplySDK = (() => {
       container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:20px 0;";
       const icon = document.createElement("div");
       icon.style.cssText = `width:72px;height:72px;border-radius:50%;background:${this.theme.errorBg};border:3px solid ${this.theme.error};display:flex;align-items:center;justify-content:center;font-size:28px;`;
-      icon.textContent = "🔍";
+      icon.textContent = "🔍";
       container.appendChild(icon);
       const t2 = document.createElement("h2");
       t2.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
@@ -7623,7 +7722,7 @@ var SmartComplySDK = (() => {
       });
       container.appendChild(retryBtn);
     }
-    // ── W11: You're all done (end-user final screen) ─────────────────
+    // ── W11: You're all done (end-user final screen) ─────────────────
     renderDone(container) {
       container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:24px 0;";
       container.setAttribute("role", "status");
@@ -7636,7 +7735,7 @@ var SmartComplySDK = (() => {
       });
       const iconWrap = document.createElement("div");
       iconWrap.style.cssText = `width:80px;height:80px;border-radius:50%;background:${this.theme.successBg};border:3px solid ${this.theme.success};display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;color:${this.theme.success};animation:sc-pop 0.4s ease;`;
-      iconWrap.textContent = "✓";
+      iconWrap.textContent = "✓";
       container.appendChild(iconWrap);
       const title = document.createElement("h2");
       title.style.cssText = `color:${this.theme.text};font-size:22px;font-weight:700;margin:0;`;
@@ -7648,7 +7747,7 @@ var SmartComplySDK = (() => {
       container.appendChild(desc);
       const info = document.createElement("div");
       info.style.cssText = `color:${this.theme.textMuted};font-size:11px;display:flex;align-items:center;gap:4px;`;
-      info.textContent = "🔒  Your data is encrypted and secure";
+      info.textContent = "🔒  Your data is encrypted and secure";
       container.appendChild(info);
       const doneBtn = this.createPrimaryButton("Close");
       doneBtn.addEventListener("click", () => {
@@ -7656,12 +7755,12 @@ var SmartComplySDK = (() => {
       });
       container.appendChild(doneBtn);
     }
-    // ── W14: Retry limit reached ─────────────────────────────────────
+    // ── W14: Retry limit reached ─────────────────────────────────────
     _renderRetryLimitReached(container) {
       container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:24px 0;";
       const icon = document.createElement("div");
       icon.style.cssText = `width:72px;height:72px;border-radius:50%;background:${this.theme.errorBg};border:3px solid ${this.theme.error};display:flex;align-items:center;justify-content:center;font-size:28px;`;
-      icon.textContent = "⚠️";
+      icon.textContent = "⚠️";
       container.appendChild(icon);
       const t2 = document.createElement("h2");
       t2.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
@@ -7678,7 +7777,7 @@ var SmartComplySDK = (() => {
       });
       container.appendChild(closeBtn);
     }
-    // ── W13: Camera pre-warm ─────────────────────────────────────────
+    // ── W13: Camera pre-warm ─────────────────────────────────────────
     _prewarmCamera() {
       if (this._prewarmedStream || this.isDestroyed) return;
       navigator.mediaDevices?.getUserMedia?.({ video: { facingMode: "user" } }).then((stream) => {
@@ -7717,7 +7816,7 @@ var SmartComplySDK = (() => {
       <div style="display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 20px;">
         <div style="position:relative;width:52px;height:52px;">
           <div style="position:absolute;inset:0;border-radius:50%;border:3px solid ${this.theme.border};border-top-color:${this.theme.primary};animation:sc-spin 0.8s linear infinite;"></div>
-          <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;">🔍</div>
+          <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;">🔍</div>
         </div>
         <div style="color:${this.theme.text};font-size:14px;font-weight:600;">Scanning document...</div>
         <div style="color:${this.theme.textSecondary};font-size:12px;text-align:center;max-width:200px;line-height:1.5;">Running OCR and verifying your identity</div>
@@ -7775,7 +7874,7 @@ var SmartComplySDK = (() => {
               <div style="display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px 20px;text-align:center;">
                 <div style="position:relative;width:52px;height:52px;">
                   <div style="position:absolute;inset:0;border-radius:50%;border:3px solid ${this.theme.border};border-top-color:${this.theme.primary};animation:sc-spin 0.8s linear infinite;"></div>
-                  <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;">🔄</div>
+                  <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;">🔄</div>
                 </div>
                 <div style="color:${this.theme.text};font-size:14px;font-weight:600;">Retrying...</div>
                 <div style="color:${this.theme.textSecondary};font-size:12px;max-width:240px;line-height:1.5;">Attempt ${retryCount} of ${maxRetries}</div>
@@ -7816,7 +7915,7 @@ var SmartComplySDK = (() => {
         wrap.setAttribute("role", "alert");
         const icon = document.createElement("div");
         icon.style.cssText = `width:56px;height:56px;border-radius:50%;background:${this.theme.errorBg};border:3px solid ${this.theme.error};display:flex;align-items:center;justify-content:center;font-size:26px;`;
-        icon.textContent = "🔍";
+        icon.textContent = "🔍";
         wrap.appendChild(icon);
         const titleEl = document.createElement("div");
         titleEl.style.cssText = `color:${this.theme.text};font-size:14px;font-weight:700;`;
@@ -7840,7 +7939,7 @@ var SmartComplySDK = (() => {
         this.showErrorStep(userMessage);
       }
     }
-    // ── Liveness ────────────────────────────────────────────────────
+    // ── Liveness ────────────────────────────────────────────────────
     renderLiveness(container) {
       container.style.cssText += "display:flex;flex-direction:column;gap:14px;";
       if (this._livenessFailures >= _SmartComplyFlow.MAX_RETRIES) {
@@ -7899,7 +7998,7 @@ var SmartComplySDK = (() => {
     }
     renderResult(_container) {
     }
-    // ── Error ───────────────────────────────────────────────────────
+    // ── Error ───────────────────────────────────────────────────────
     showErrorStep(message) {
       this.currentStep = "error";
       if (!this.contentArea) return;
@@ -7916,7 +8015,7 @@ var SmartComplySDK = (() => {
       const isDocQuality = /blurry|blur|quality|glare|dark|bright|lighting/i.test(message);
       const isExpiredDoc = /document.*expired|expired.*document/i.test(message);
       const isFaceMatch = /face.*match|selfie.*match|does not match/i.test(message);
-      const errorIcon = isCameraErr ? "📷" : isNetworkErr ? "📡" : isAuthErr ? "⏱" : isDocQuality ? "🔍" : isExpiredDoc ? "📅" : isFaceMatch ? "🤳" : "✕";
+      const errorIcon = isCameraErr ? "📷" : isNetworkErr ? "📡" : isAuthErr ? "⏱" : isDocQuality ? "🔍" : isExpiredDoc ? "📅" : isFaceMatch ? "🤳" : "✕";
       const errorTitle = isCameraErr ? "Camera Access Required" : isNetworkErr ? "Connection Problem" : isAuthErr ? "Session Expired" : isDocQuality ? "Document Photo Unclear" : isExpiredDoc ? "Document Expired" : isFaceMatch ? "Face Match Failed" : "Verification Unsuccessful";
       const userMessage = isCameraErr ? "Please allow camera access in your browser settings and try again." : isNetworkErr ? "Check your internet connection and try again." : isAuthErr ? "Your session has expired. Please start again." : isDocQuality ? _sanitizeUserMessage(message) || "Please retake your document photo in good lighting with no glare." : isExpiredDoc ? "The document you submitted has expired. Please use a valid, current ID." : isFaceMatch ? "Your selfie did not match the photo on your ID. Please ensure you are using your own valid document and face the camera directly." : _sanitizeUserMessage(message) || "We were unable to complete your verification. Please try again.";
       const iconWrap = document.createElement("div");
@@ -7952,9 +8051,9 @@ var SmartComplySDK = (() => {
       wrapper.appendChild(closeBtn);
       this.contentArea.appendChild(wrapper);
     }
-    // ─────────────────────────────────────────────────────────────────
+    // ─────────────────────────────────────────────────────────────────
     // UI Helpers
-    // ─────────────────────────────────────────────────────────────────
+    // ─────────────────────────────────────────────────────────────────
     createHeader() {
       const header = document.createElement("div");
       header.setAttribute("role", "banner");
@@ -8021,7 +8120,7 @@ var SmartComplySDK = (() => {
       stepIndicator.appendChild(this.stepLabel);
       header.appendChild(stepIndicator);
       const closeBtn = document.createElement("button");
-      closeBtn.innerHTML = "✕";
+      closeBtn.innerHTML = "✕";
       closeBtn.setAttribute("aria-label", "Close identity verification");
       closeBtn.style.cssText = `
       width:32px;height:32px;border-radius:8px;flex-shrink:0;
@@ -8102,7 +8201,7 @@ var SmartComplySDK = (() => {
       }
       const arrow = document.createElement("span");
       arrow.style.cssText = `color:${this.theme.textMuted};font-size:18px;flex-shrink:0;`;
-      arrow.textContent = "→";
+      arrow.textContent = "→";
       card.appendChild(textWrap);
       card.appendChild(arrow);
       return card;
@@ -8174,7 +8273,7 @@ var SmartComplySDK = (() => {
         if (this.currentStep === "loading" || this.currentStep === "welcome") {
           this.stepLabel.textContent = "";
         } else if (this.currentStep === "done" || this.currentStep === "result") {
-          this.stepLabel.textContent = "Complete ✓";
+          this.stepLabel.textContent = "Complete ✓";
         } else if (stage2Steps.includes(this.currentStep)) {
           this.stepLabel.textContent = "Stage 2 of 2: Face Check";
         } else if (stage1Steps.includes(this.currentStep)) {