{
  "1": "<!DOCTYPE html>",
  "2": "<html lang=\"en\">",
  "3": "<head>",
  "4": "  <meta charset=\"UTF-8\" />",
  "5": "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\" />",
  "6": "  <title>YOUPI Store · Enterprise Payment Gateway Suite</title>",
  "7": "  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />",
  "8": "  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />",
  "9": "  <!-- OFFICIAL YOUPI PG UNIVERSAL INTEGRATION SCRIPT -->",
  "10": "  <script src=\"/youpi.js\" data-youpi-key=\"00000000-0000-0000-0000-000000000001\" data-currency=\"INR\"></script>",
  "11": "",
  "12": "  <style>",
  "13": "    :root {",
  "14": "      --primary: #2563eb;",
  "15": "      --primary-hover: #1d4ed8;",
  "16": "      --primary-glow: rgba(37, 99, 235, 0.22);",
  "17": "      --primary-light: #eff6ff;",
  "18": "      --primary-border: #bfdbfe;",
  "19": "",
  "20": "      --bg: #f8fafc;",
  "21": "      --bg-card: #ffffff;",
  "22": "      --bg-card-subtle: #f8fafc;",
  "23": "      --border: #e2e8f0;",
  "24": "      --border-focus: #2563eb;",
  "25": "      --border-hover: #cbd5e1;",
  "26": "",
  "27": "      --text: #0f172a;",
  "28": "      --text-muted: #64748b;",
  "29": "      --text-dim: #94a3b8;",
  "30": "      --text-heading: #0f172a;",
  "31": "",
  "32": "      --success: #059669;",
  "33": "      --success-light: #ecfdf5;",
  "34": "      --success-border: #a7f3d0;",
  "35": "",
  "36": "      --amber: #d97706;",
  "37": "      --amber-light: #fffbeb;",
  "38": "      --amber-border: #fde68a;",
  "39": "",
  "40": "      --danger: #dc2626;",
  "41": "      --danger-light: #fef2f2;",
  "42": "      --danger-border: #fca5a5;",
  "43": "",
  "44": "      --radius-sm: 8px;",
  "45": "      --radius-md: 12px;",
  "46": "      --radius-lg: 16px;",
  "47": "      --radius-xl: 20px;",
  "48": "",
  "49": "      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);",
  "50": "      --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.04);",
  "51": "      --shadow-lg: 0 12px 30px -4px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.03);",
  "52": "      --shadow-glow: 0 8px 24px -4px rgba(37, 99, 235, 0.28);",
  "53": "    }",
  "54": "",
  "55": "    * {",
  "56": "      box-sizing: border-box;",
  "57": "      margin: 0;",
  "58": "      padding: 0;",
  "59": "      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;",
  "60": "    }",
  "61": "",
  "62": "    body {",
  "63": "      background: var(--bg);",
  "64": "      color: var(--text);",
  "65": "      min-height: 100vh;",
  "66": "      display: flex;",
  "67": "      flex-direction: column;",
  "68": "      line-height: 1.5;",
  "69": "      overflow-x: hidden;",
  "70": "    }",
  "71": "",
  "72": "    /* --- TOP ANNOUNCEMENT BANNER --- */",
  "73": "    .top-announcement {",
  "74": "      background: linear-gradient(90deg, #1e3a8a 0%, #2563eb 50%, #0284c7 100%);",
  "75": "      color: #ffffff;",
  "76": "      font-size: 0.78rem;",
  "77": "      font-weight: 600;",
  "78": "      padding: 0.45rem 1rem;",
  "79": "      text-align: center;",
  "80": "      display: flex;",
  "81": "      align-items: center;",
  "82": "      justify-content: center;",
  "83": "      gap: 0.6rem;",
  "84": "      letter-spacing: 0.02em;",
  "85": "    }",
  "86": "",
  "87": "    /* --- HEADER & NAVIGATION --- */",
  "88": "    header {",
  "89": "      background: #ffffff;",
  "90": "      border-bottom: 1px solid var(--border);",
  "91": "      position: sticky;",
  "92": "      top: 0;",
  "93": "      z-index: 100;",
  "94": "      box-shadow: var(--shadow-sm);",
  "95": "    }",
  "96": "    .header-inner {",
  "97": "      max-width: 1280px;",
  "98": "      margin: 0 auto;",
  "99": "      padding: 0.85rem 1.5rem;",
  "100": "      display: flex;",
  "101": "      align-items: center;",
  "102": "      justify-content: space-between;",
  "103": "      gap: 1rem;",
  "104": "    }",
  "105": "    .brand-group {",
  "106": "      display: flex;",
  "107": "      align-items: center;",
  "108": "      gap: 0.85rem;",
  "109": "      text-decoration: none;",
  "110": "    }",
  "111": "    .brand-logo-badge {",
  "112": "      width: 38px;",
  "113": "      height: 38px;",
  "114": "      background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);",
  "115": "      color: #ffffff;",
  "116": "      border-radius: var(--radius-sm);",
  "117": "      display: flex;",
  "118": "      align-items: center;",
  "119": "      justify-content: center;",
  "120": "      font-weight: 900;",
  "121": "      font-size: 1.25rem;",
  "122": "      box-shadow: var(--shadow-sm);",
  "123": "    }",
  "124": "    .brand-text {",
  "125": "      display: flex;",
  "126": "      flex-direction: column;",
  "127": "    }",
  "128": "    .brand-title {",
  "129": "      font-family: 'Outfit', sans-serif;",
  "130": "      font-size: 1.25rem;",
  "131": "      font-weight: 800;",
  "132": "      color: var(--text-heading);",
  "133": "      line-height: 1.1;",
  "134": "      letter-spacing: -0.02em;",
  "135": "    }",
  "136": "    .brand-subtitle {",
  "137": "      font-size: 0.72rem;",
  "138": "      font-weight: 700;",
  "139": "      color: var(--primary);",
  "140": "      text-transform: uppercase;",
  "141": "      letter-spacing: 0.05em;",
  "142": "    }",
  "143": "",
  "144": "    .badge-live-store {",
  "145": "      display: inline-flex;",
  "146": "      align-items: center;",
  "147": "      gap: 0.35rem;",
  "148": "      background: var(--success-light);",
  "149": "      border: 1px solid var(--success-border);",
  "150": "      color: var(--success);",
  "151": "      font-size: 0.75rem;",
  "152": "      font-weight: 700;",
  "153": "      padding: 0.25rem 0.65rem;",
  "154": "      border-radius: 9999px;",
  "155": "    }",
  "156": "    .badge-live-store .dot {",
  "157": "      width: 7px;",
  "158": "      height: 7px;",
  "159": "      background: #10b981;",
  "160": "      border-radius: 50%;",
  "161": "      animation: pulseDot 1.8s infinite;",
  "162": "    }",
  "163": "    @keyframes pulseDot {",
  "164": "      0%, 100% { opacity: 1; transform: scale(1); }",
  "165": "      50% { opacity: 0.5; transform: scale(0.85); }",
  "166": "    }",
  "167": "",
  "168": "    .btn-admin-link {",
  "169": "      display: inline-flex;",
  "170": "      align-items: center;",
  "171": "      gap: 0.4rem;",
  "172": "      background: #f1f5f9;",
  "173": "      border: 1px solid var(--border);",
  "174": "      color: var(--text);",
  "175": "      font-size: 0.78rem;",
  "176": "      font-weight: 700;",
  "177": "      padding: 0.4rem 0.8rem;",
  "178": "      border-radius: var(--radius-sm);",
  "179": "      text-decoration: none;",
  "180": "      transition: all 0.15s;",
  "181": "    }",
  "182": "    .btn-admin-link:hover {",
  "183": "      background: #e2e8f0;",
  "184": "      border-color: var(--border-hover);",
  "185": "    }",
  "186": "",
  "187": "    /* --- MAIN PDP CONTAINER --- */",
  "188": "    .product-showcase-container {",
  "189": "      max-width: 1280px;",
  "190": "      margin: 1.5rem auto 2.5rem;",
  "191": "      padding: 0 1.5rem;",
  "192": "      width: 100%;",
  "193": "    }",
  "194": "",
  "195": "    .pdp-grid {",
  "196": "      display: grid;",
  "197": "      grid-template-columns: 1.15fr 1fr;",
  "198": "      gap: 2.5rem;",
  "199": "      align-items: start;",
  "200": "    }",
  "201": "",
  "202": "    /* --- LEFT: PRODUCT VISUAL GALLERY --- */",
  "203": "    .gallery-column {",
  "204": "      background: var(--bg-card);",
  "205": "      border: 1px solid var(--border);",
  "206": "      border-radius: var(--radius-xl);",
  "207": "      padding: 1.5rem;",
  "208": "      box-shadow: var(--shadow-sm);",
  "209": "      position: sticky;",
  "210": "      top: 85px;",
  "211": "    }",
  "212": "    .gallery-main-viewport {",
  "213": "      width: 100%;",
  "214": "      height: 480px;",
  "215": "      background: #090d16;",
  "216": "      border: 1px solid #1e293b;",
  "217": "      border-radius: var(--radius-lg);",
  "218": "      position: relative;",
  "219": "      overflow: hidden;",
  "220": "      display: flex;",
  "221": "      align-items: center;",
  "222": "      justify-content: center;",
  "223": "      cursor: zoom-in;",
  "224": "      box-shadow: inset 0 2px 8px rgba(0,0,0,0.4);",
  "225": "    }",
  "226": "    .gallery-main-img {",
  "227": "      max-width: 100%;",
  "228": "      max-height: 100%;",
  "229": "      width: auto;",
  "230": "      height: auto;",
  "231": "      object-fit: contain;",
  "232": "      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;",
  "233": "    }",
  "234": "    .gallery-main-img:hover {",
  "235": "      transform: scale(1.02);",
  "236": "    }",
  "237": "    .gallery-badge-overlay {",
  "238": "      position: absolute;",
  "239": "      top: 14px;",
  "240": "      left: 14px;",
  "241": "      background: rgba(15, 23, 42, 0.85);",
  "242": "      backdrop-filter: blur(8px);",
  "243": "      -webkit-backdrop-filter: blur(8px);",
  "244": "      border: 1px solid rgba(255, 255, 255, 0.15);",
  "245": "      color: #ffffff;",
  "246": "      font-size: 0.75rem;",
  "247": "      font-weight: 700;",
  "248": "      padding: 0.35rem 0.75rem;",
  "249": "      border-radius: 9999px;",
  "250": "      display: inline-flex;",
  "251": "      align-items: center;",
  "252": "      gap: 0.4rem;",
  "253": "      pointer-events: none;",
  "254": "    }",
  "255": "    .gallery-zoom-hint {",
  "256": "      position: absolute;",
  "257": "      bottom: 14px;",
  "258": "      right: 14px;",
  "259": "      background: rgba(15, 23, 42, 0.85);",
  "260": "      backdrop-filter: blur(8px);",
  "261": "      border: 1px solid rgba(255, 255, 255, 0.15);",
  "262": "      color: #94a3b8;",
  "263": "      font-size: 0.72rem;",
  "264": "      font-weight: 600;",
  "265": "      padding: 0.3rem 0.65rem;",
  "266": "      border-radius: var(--radius-sm);",
  "267": "      display: inline-flex;",
  "268": "      align-items: center;",
  "269": "      gap: 0.35rem;",
  "270": "      pointer-events: none;",
  "271": "    }",
  "272": "",
  "273": "    /* Thumbnail Carousel Grid */",
  "274": "    .thumbnails-grid {",
  "275": "      display: grid;",
  "276": "      grid-template-columns: repeat(5, 1fr);",
  "277": "      gap: 0.75rem;",
  "278": "      margin-top: 1rem;",
  "279": "    }",
  "280": "    .thumb-card {",
  "281": "      border: 2px solid var(--border);",
  "282": "      border-radius: var(--radius-md);",
  "283": "      background: #090d16;",
  "284": "      height: 75px;",
  "285": "      padding: 4px;",
  "286": "      display: flex;",
  "287": "      flex-direction: column;",
  "288": "      align-items: center;",
  "289": "      justify-content: center;",
  "290": "      cursor: pointer;",
  "291": "      transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);",
  "292": "      overflow: hidden;",
  "293": "      position: relative;",
  "294": "    }",
  "295": "    .thumb-card img {",
  "296": "      max-width: 100%;",
  "297": "      max-height: 100%;",
  "298": "      object-fit: cover;",
  "299": "      border-radius: 6px;",
  "300": "      opacity: 0.82;",
  "301": "      transition: opacity 0.15s;",
  "302": "    }",
  "303": "    .thumb-card:hover {",
  "304": "      border-color: var(--primary-border);",
  "305": "      transform: translateY(-2px);",
  "306": "    }",
  "307": "    .thumb-card:hover img {",
  "308": "      opacity: 1;",
  "309": "    }",
  "310": "    .thumb-card.active {",
  "311": "      border-color: var(--primary);",
  "312": "      box-shadow: 0 0 0 2px var(--primary-glow);",
  "313": "    }",
  "314": "    .thumb-card.active img {",
  "315": "      opacity: 1;",
  "316": "    }",
  "317": "",
  "318": "    /* --- RIGHT: PRODUCT BUY BOX --- */",
  "319": "    .details-column {",
  "320": "      display: flex;",
  "321": "      flex-direction: column;",
  "322": "      gap: 1.25rem;",
  "323": "    }",
  "324": "",
  "325": "    .product-h1 {",
  "326": "      font-family: 'Outfit', sans-serif;",
  "327": "      font-size: 2.15rem;",
  "328": "      font-weight: 800;",
  "329": "      line-height: 1.2;",
  "330": "      color: var(--text-heading);",
  "331": "      letter-spacing: -0.025em;",
  "332": "    }",
  "333": "",
  "334": "    /* Core Features Checklist */",
  "335": "    .feature-checklist {",
  "336": "      list-style: none;",
  "337": "      display: flex;",
  "338": "      flex-direction: column;",
  "339": "      gap: 0.65rem;",
  "340": "      margin: 0.35rem 0;",
  "341": "    }",
  "342": "    .feature-checklist li {",
  "343": "      font-size: 0.86rem;",
  "344": "      color: var(--text);",
  "345": "      display: flex;",
  "346": "      align-items: flex-start;",
  "347": "      gap: 0.65rem;",
  "348": "      line-height: 1.45;",
  "349": "    }",
  "350": "    .feature-checklist li .chk {",
  "351": "      color: var(--success);",
  "352": "      font-weight: 900;",
  "353": "      font-size: 0.95rem;",
  "354": "      margin-top: 1px;",
  "355": "      flex-shrink: 0;",
  "356": "    }",
  "357": "",
  "358": "    /* --- THE DEMO CHECKOUT BUY BOX CARD --- */",
  "359": "    .buy-box-card {",
  "360": "      background: #ffffff;",
  "361": "      border: 2px solid #bfdbfe;",
  "362": "      border-radius: var(--radius-xl);",
  "363": "      padding: 1.75rem;",
  "364": "      box-shadow: var(--shadow-md);",
  "365": "      position: relative;",
  "366": "    }",
  "367": "    .buy-box-card::before {",
  "368": "      content: \"\";",
  "369": "      position: absolute;",
  "370": "      top: -2px;",
  "371": "      left: 10%;",
  "372": "      right: 10%;",
  "373": "      height: 3px;",
  "374": "      background: linear-gradient(90deg, #2563eb, #38bdf8, #2563eb);",
  "375": "      border-radius: 3px;",
  "376": "    }",
  "377": "",
  "378": "    .pricing-header {",
  "379": "      display: flex;",
  "380": "      align-items: baseline;",
  "381": "      justify-content: space-between;",
  "382": "      margin-bottom: 0.5rem;",
  "383": "    }",
  "384": "    .price-main {",
  "385": "      font-family: 'Outfit', sans-serif;",
  "386": "      font-size: 2.6rem;",
  "387": "      font-weight: 900;",
  "388": "      color: #0f172a;",
  "389": "      letter-spacing: -0.03em;",
  "390": "      line-height: 1;",
  "391": "    }",
  "392": "    .price-badge-demo {",
  "393": "      background: #eff6ff;",
  "394": "      border: 1px solid #bfdbfe;",
  "395": "      color: #2563eb;",
  "396": "      font-size: 0.72rem;",
  "397": "      font-weight: 800;",
  "398": "      text-transform: uppercase;",
  "399": "      padding: 0.25rem 0.65rem;",
  "400": "      border-radius: 9999px;",
  "401": "      letter-spacing: 0.04em;",
  "402": "    }",
  "403": "",
  "404": "    .pricing-note {",
  "405": "      font-size: 0.82rem;",
  "406": "      color: var(--text-muted);",
  "407": "      margin-bottom: 1.25rem;",
  "408": "    }",
  "409": "",
  "410": "    /* AMOUNT SELECTOR CHIPS */",
  "411": "    .amount-selector-title {",
  "412": "      font-size: 0.78rem;",
  "413": "      font-weight: 800;",
  "414": "      text-transform: uppercase;",
  "415": "      letter-spacing: 0.05em;",
  "416": "      color: var(--text-muted);",
  "417": "      margin-bottom: 0.65rem;",
  "418": "      display: flex;",
  "419": "      justify-content: space-between;",
  "420": "      align-items: center;",
  "421": "    }",
  "422": "    .amount-selector-chips {",
  "423": "      display: grid;",
  "424": "      grid-template-columns: repeat(5, 1fr);",
  "425": "      gap: 0.5rem;",
  "426": "      margin-bottom: 1rem;",
  "427": "    }",
  "428": "    .chip-btn {",
  "429": "      padding: 0.55rem 0.4rem;",
  "430": "      font-size: 0.85rem;",
  "431": "      font-weight: 800;",
  "432": "      border-radius: var(--radius-sm);",
  "433": "      border: 1px solid var(--border);",
  "434": "      background: #ffffff;",
  "435": "      color: var(--text);",
  "436": "      cursor: pointer;",
  "437": "      text-align: center;",
  "438": "      transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);",
  "439": "    }",
  "440": "    .chip-btn:hover {",
  "441": "      border-color: var(--primary-border);",
  "442": "      background: var(--primary-light);",
  "443": "      color: var(--primary);",
  "444": "    }",
  "445": "    .chip-btn.active {",
  "446": "      border-color: var(--primary);",
  "447": "      background: var(--primary);",
  "448": "      color: #ffffff;",
  "449": "      box-shadow: 0 2px 8px var(--primary-glow);",
  "450": "    }",
  "451": "",
  "452": "    /* CUSTOM AMOUNT INPUT ROW */",
  "453": "    .custom-amount-box {",
  "454": "      margin-bottom: 1.25rem;",
  "455": "      background: var(--bg-card-subtle);",
  "456": "      border: 1px solid var(--border);",
  "457": "      border-radius: var(--radius-md);",
  "458": "      padding: 0.75rem 1rem;",
  "459": "      display: flex;",
  "460": "      align-items: center;",
  "461": "      justify-content: space-between;",
  "462": "      gap: 0.75rem;",
  "463": "    }",
  "464": "    .custom-amount-label {",
  "465": "      font-size: 0.82rem;",
  "466": "      font-weight: 700;",
  "467": "      color: var(--text);",
  "468": "      white-space: nowrap;",
  "469": "    }",
  "470": "    .custom-input-wrap {",
  "471": "      display: flex;",
  "472": "      align-items: center;",
  "473": "      background: #ffffff;",
  "474": "      border: 1px solid var(--border);",
  "475": "      border-radius: var(--radius-sm);",
  "476": "      padding: 0.35rem 0.65rem;",
  "477": "      width: 150px;",
  "478": "      transition: border-color 0.15s;",
  "479": "    }",
  "480": "    .custom-input-wrap:focus-within {",
  "481": "      border-color: var(--primary);",
  "482": "      box-shadow: 0 0 0 3px var(--primary-light);",
  "483": "    }",
  "484": "    .custom-currency-symbol {",
  "485": "      font-weight: 800;",
  "486": "      color: var(--text-muted);",
  "487": "      font-size: 0.95rem;",
  "488": "      margin-right: 4px;",
  "489": "    }",
  "490": "    .custom-amount-input {",
  "491": "      border: none;",
  "492": "      outline: none;",
  "493": "      font-size: 1rem;",
  "494": "      font-weight: 800;",
  "495": "      color: var(--text-heading);",
  "496": "      width: 100%;",
  "497": "    }",
  "498": "",
  "499": "    /* PRIMARY BUY BUTTON */",
  "500": "    .btn-buy-primary {",
  "501": "      width: 100%;",
  "502": "      background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);",
  "503": "      color: #ffffff;",
  "504": "      border: none;",
  "505": "      border-radius: var(--radius-md);",
  "506": "      padding: 1.05rem 1.5rem;",
  "507": "      font-size: 1.08rem;",
  "508": "      font-weight: 800;",
  "509": "      cursor: pointer;",
  "510": "      display: flex;",
  "511": "      align-items: center;",
  "512": "      justify-content: center;",
  "513": "      gap: 0.65rem;",
  "514": "      box-shadow: var(--shadow-glow);",
  "515": "      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);",
  "516": "      letter-spacing: -0.01em;",
  "517": "    }",
  "518": "    .btn-buy-primary:hover {",
  "519": "      transform: translateY(-2px);",
  "520": "      box-shadow: 0 10px 28px -4px rgba(37, 99, 235, 0.38);",
  "521": "      background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);",
  "522": "    }",
  "523": "    .btn-buy-primary:active {",
  "524": "      transform: translateY(0);",
  "525": "    }",
  "526": "    .btn-buy-primary:disabled {",
  "527": "      opacity: 0.65;",
  "528": "      cursor: not-allowed;",
  "529": "      transform: none;",
  "530": "    }",
  "531": "",
  "532": "    .security-guarantee-note {",
  "533": "      font-size: 0.75rem;",
  "534": "      color: var(--text-muted);",
  "535": "      text-align: center;",
  "536": "      margin-top: 0.85rem;",
  "537": "      display: flex;",
  "538": "      align-items: center;",
  "539": "      justify-content: center;",
  "540": "      gap: 0.4rem;",
  "541": "    }",
  "542": "",
  "543": "    /* VALUE PROPOSITION BADGES GRID */",
  "544": "    .value-props-grid {",
  "545": "      display: grid;",
  "546": "      grid-template-columns: repeat(2, 1fr);",
  "547": "      gap: 0.75rem;",
  "548": "      margin-top: 1.25rem;",
  "549": "      padding-top: 1.25rem;",
  "550": "      border-top: 1px solid var(--border);",
  "551": "    }",
  "552": "    .prop-pill {",
  "553": "      display: flex;",
  "554": "      align-items: center;",
  "555": "      gap: 0.5rem;",
  "556": "      font-size: 0.78rem;",
  "557": "      font-weight: 600;",
  "558": "      color: var(--text-muted);",
  "559": "    }",
  "560": "    .prop-pill .icon {",
  "561": "      font-size: 0.95rem;",
  "562": "    }",
  "563": "",
  "564": "    /* --- ARCHITECTURE REQUIREMENTS & TRADEOFFS SECTION --- */",
  "565": "    .requirements-section {",
  "566": "      max-width: 1280px;",
  "567": "      margin: 2.5rem auto 1.5rem;",
  "568": "      padding: 0 1.5rem;",
  "569": "      width: 100%;",
  "570": "    }",
  "571": "    .req-banner {",
  "572": "      background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);",
  "573": "      border: 2px solid #fcd34d;",
  "574": "      border-radius: var(--radius-xl);",
  "575": "      padding: 2rem;",
  "576": "      box-shadow: var(--shadow-sm);",
  "577": "    }",
  "578": "    .req-grid {",
  "579": "      display: grid;",
  "580": "      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));",
  "581": "      gap: 1.5rem;",
  "582": "      margin-top: 1.25rem;",
  "583": "    }",
  "584": "    .req-card {",
  "585": "      background: #ffffff;",
  "586": "      border: 1px solid #fde68a;",
  "587": "      border-radius: var(--radius-lg);",
  "588": "      padding: 1.5rem;",
  "589": "      box-shadow: var(--shadow-sm);",
  "590": "      display: flex;",
  "591": "      flex-direction: column;",
  "592": "      justify-content: space-between;",
  "593": "    }",
  "594": "    .req-card.danger-card {",
  "595": "      border-color: #fca5a5;",
  "596": "    }",
  "597": "    .req-card.conditional-card {",
  "598": "      border-color: #fed7aa;",
  "599": "    }",
  "600": "    .req-pill-badge {",
  "601": "      font-size: 0.7rem;",
  "602": "      font-weight: 800;",
  "603": "      padding: 0.2rem 0.55rem;",
  "604": "      border-radius: 9999px;",
  "605": "      text-transform: uppercase;",
  "606": "      letter-spacing: 0.04em;",
  "607": "    }",
  "608": "",
  "609": "    /* --- CAPABILITIES SECTION --- */",
  "610": "    .specs-section {",
  "611": "      max-width: 1280px;",
  "612": "      margin: 2rem auto;",
  "613": "      padding: 0 1.5rem;",
  "614": "      width: 100%;",
  "615": "    }",
  "616": "    .section-heading-row {",
  "617": "      text-align: center;",
  "618": "      max-width: 720px;",
  "619": "      margin: 0 auto 2.5rem;",
  "620": "    }",
  "621": "    .section-badge {",
  "622": "      display: inline-block;",
  "623": "      font-size: 0.75rem;",
  "624": "      font-weight: 800;",
  "625": "      text-transform: uppercase;",
  "626": "      color: var(--primary);",
  "627": "      background: var(--primary-light);",
  "628": "      padding: 0.25rem 0.75rem;",
  "629": "      border-radius: 9999px;",
  "630": "      letter-spacing: 0.05em;",
  "631": "      margin-bottom: 0.5rem;",
  "632": "    }",
  "633": "    .section-title {",
  "634": "      font-family: 'Outfit', sans-serif;",
  "635": "      font-size: 2rem;",
  "636": "      font-weight: 800;",
  "637": "      color: var(--text-heading);",
  "638": "      letter-spacing: -0.025em;",
  "639": "    }",
  "640": "",
  "641": "    .features-quad-grid {",
  "642": "      display: grid;",
  "643": "      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));",
  "644": "      gap: 1.5rem;",
  "645": "      margin-bottom: 3rem;",
  "646": "    }",
  "647": "    .quad-card {",
  "648": "      background: #ffffff;",
  "649": "      border: 1px solid var(--border);",
  "650": "      border-radius: var(--radius-lg);",
  "651": "      padding: 1.5rem;",
  "652": "      box-shadow: var(--shadow-sm);",
  "653": "      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);",
  "654": "    }",
  "655": "    .quad-card:hover {",
  "656": "      transform: translateY(-3px);",
  "657": "      box-shadow: var(--shadow-md);",
  "658": "      border-color: var(--border-hover);",
  "659": "    }",
  "660": "    .quad-icon {",
  "661": "      width: 44px;",
  "662": "      height: 44px;",
  "663": "      border-radius: var(--radius-md);",
  "664": "      background: var(--primary-light);",
  "665": "      color: var(--primary);",
  "666": "      display: flex;",
  "667": "      align-items: center;",
  "668": "      justify-content: center;",
  "669": "      font-size: 1.35rem;",
  "670": "      margin-bottom: 1rem;",
  "671": "    }",
  "672": "    .quad-title {",
  "673": "      font-size: 1.05rem;",
  "674": "      font-weight: 800;",
  "675": "      color: var(--text-heading);",
  "676": "      margin-bottom: 0.4rem;",
  "677": "    }",
  "678": "    .quad-desc {",
  "679": "      font-size: 0.85rem;",
  "680": "      color: var(--text-muted);",
  "681": "      line-height: 1.5;",
  "682": "    }",
  "683": "",
  "684": "    /* COMPARISON TABLE */",
  "685": "    .comparison-card {",
  "686": "      background: #ffffff;",
  "687": "      border: 1px solid var(--border);",
  "688": "      border-radius: var(--radius-xl);",
  "689": "      padding: 2rem;",
  "690": "      box-shadow: var(--shadow-sm);",
  "691": "      margin-bottom: 3rem;",
  "692": "      overflow-x: auto;",
  "693": "    }",
  "694": "    .comparison-table {",
  "695": "      width: 100%;",
  "696": "      border-collapse: collapse;",
  "697": "      font-size: 0.88rem;",
  "698": "    }",
  "699": "    .comparison-table th {",
  "700": "      text-align: left;",
  "1050": "        gap: 0.35rem;",
  "1051": "        margin-top: 0.75rem;",
  "1052": "      }",
  "1053": "      .thumb-card {",
  "1054": "        height: 52px;",
  "1055": "        border-radius: var(--radius-sm);",
  "1056": "        padding: 2px;",
  "1057": "      }",
  "1058": "      .requirements-section {",
  "1059": "        padding: 0 0.85rem;",
  "1060": "        margin: 1.5rem auto 1rem;",
  "1061": "      }",
  "1062": "      .req-banner {",
  "1063": "        padding: 1.15rem 1rem;",
  "1064": "        border-radius: var(--radius-lg);",
  "1065": "      }",
  "1066": "      .req-grid {",
  "1067": "        grid-template-columns: 1fr;",
  "1068": "        gap: 1rem;",
  "1069": "        margin-top: 1rem;",
  "1070": "      }",
  "1071": "      .req-card {",
  "1072": "        padding: 1.1rem;",
  "1073": "      }",
  "1074": "      .specs-section {",
  "1075": "        padding: 0 0.85rem;",
  "1076": "        margin: 1.5rem auto;",
  "1077": "      }",
  "1078": "      .section-title {",
  "1079": "        font-size: 1.45rem;",
  "1080": "      }",
  "1081": "      .features-quad-grid {",
  "1082": "        grid-template-columns: 1fr;",
  "1083": "        gap: 1rem;",
  "1084": "        margin-bottom: 2rem;",
  "1085": "      }",
  "1086": "      .comparison-card {",
  "1087": "        padding: 1.15rem 0.85rem;",
  "1088": "        border-radius: var(--radius-lg);",
  "1089": "        margin-bottom: 2rem;",
  "1090": "      }",
  "1091": "      .comparison-table th, .comparison-table td {",
  "1092": "        padding: 0.65rem 0.5rem;",
  "1093": "        font-size: 0.8rem;",
  "1094": "      }",
  "1095": "      footer {",
  "1096": "        padding: 1.75rem 1rem;",
  "1097": "      }",
  "1098": "      .footer-inner {",
  "1099": "        flex-direction: column;",
  "1100": "        text-align: center;",
  "1101": "        gap: 1rem;",
  "1102": "        justify-content: center;",
  "1103": "      }",
  "1104": "    }",
  "1105": "  </style>",
  "1106": "</head>",
  "1107": "<body>",
  "1108": "",
  "1109": "  <!-- TOP ANNOUNCEMENT BAR -->",
  "1110": "  <div class=\"top-announcement\">",
  "1111": "    <span>✨ <strong>YOUPI Gateway</strong> Demo Powered by YOUPI PG</span>",
  "1112": "    <span style=\"opacity:0.4;\">|</span>",
  "1113": "    <span>Zero Platform Fees · Direct P2P UPI Settlement</span>",
  "1114": "  </div>",
  "1115": "",
  "1116": "  <!-- STICKY MAIN HEADER -->",
  "1117": "  <header>",
  "1118": "    <div class=\"header-inner\">",
  "1119": "      <a href=\"/\" class=\"brand-group\">",
  "1120": "        <div class=\"brand-logo-badge\">⚡</div>",
  "1121": "        <div class=\"brand-text\">",
  "1122": "          <span class=\"brand-title\">YOUPI Store</span>",
  "1123": "          <span class=\"brand-subtitle\">Official Payment Gateway Demo</span>",
  "1124": "        </div>",
  "1125": "      <nav style=\"display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap;\">",
  "1126": "        <a href=\"#purchase\" class=\"btn-admin-link\">🛒 Buy Demo Pack</a>",
  "1127": "        <a href=\"#outcome-pages\" class=\"btn-admin-link\">🚦 Outcome Pages</a>",
  "1128": "        <a href=\"#developer-guide\" class=\"btn-admin-link\" style=\"background:#eff6ff; color:#2563eb; border-color:#bfdbfe;\">📖 Developer Guide</a>",
  "1129": "        <a href=\"/openapi.yaml\" target=\"_blank\" class=\"btn-admin-link\">⚙️ OpenAPI</a>",
  "1130": "        <a href=\"/wallet\" class=\"btn-admin-link\" style=\"background:#1e293b; color:#ffffff; border-color:#334155;\">🪙 Wallet (<span id=\"topWalletBalance\">50</span>)</a>",
  "1131": "      </nav>",
  "1132": "    </div>",
  "1133": "  </header>",
  "1134": "",
  "1135": "  <!-- MAIN E-COMMERCE PRODUCT DETAIL PAGE -->",
  "1136": "  <main class=\"product-showcase-container\">",
  "1137": "    <div class=\"pdp-grid\">",
  "1138": "",
  "1139": "      <!-- LEFT COLUMN: INTERACTIVE VISUAL GALLERY -->",
  "1140": "      <div class=\"gallery-column\" id=\"gallery\">",
  "1141": "        <div class=\"gallery-main-viewport\" onclick=\"openLightbox()\" title=\"Click to view full-resolution screenshot\">",
  "1142": "          <img id=\"mainGalleryImg\" class=\"gallery-main-img\" src=\"/assets/gateway_pc_checkout.png?v=2\" alt=\"YOUPI PG Desktop Checkout View\" />",
  "1143": "          <div class=\"gallery-zoom-hint\">",
  "1144": "            <span>🔍</span>",
  "1145": "            <span>Click to Enlarge</span>",
  "1146": "          </div>",
  "1147": "        </div>",
  "1148": "",
  "1149": "        <!-- 5 High-Res Gateway Screenshots Carousel -->",
  "1150": "        <div class=\"thumbnails-grid\">",
  "1151": "          <div class=\"thumb-card active\" onclick=\"switchGalleryPhoto(0, '/assets/gateway_pc_checkout.png?v=2', 'Desktop 2-Column Checkout', 'Authentic desktop 2-column checkout frame with real-time dynamic QR, clean card at counter, live order summary, and verified merchant branding.')\">",
  "1152": "            <img src=\"/assets/gateway_pc_checkout.png?v=2\" alt=\"PC Checkout\" />",
  "1153": "          </div>",
  "1154": "          <div class=\"thumb-card\" onclick=\"switchGalleryPhoto(1, '/assets/gateway_mobile_checkout.png?v=2', 'Mobile Instant Sheet &amp; UPI Intent', 'Native fluid mobile checkout bottom sheet with instant UPI app deep-linking (GPay, PhonePe, Paytm, CRED).')\">",
  "1155": "            <img src=\"/assets/gateway_mobile_checkout.png?v=2\" alt=\"Mobile Checkout\" />",
  "1156": "          </div>",
  "1157": "          <div class=\"thumb-card\" onclick=\"switchGalleryPhoto(2, '/assets/gateway_merchant_operations.png?v=2', 'Merchant Operations &amp; Live Slots Hub', 'Crisp bright white operations dashboard with real-time slot allocation, floating cashier till dock, and observers status.')\">",
  "1158": "            <img src=\"/assets/gateway_merchant_operations.png?v=2\" alt=\"Operations Hub\" />",
  "1159": "          </div>",
  "1160": "          <div class=\"thumb-card\" onclick=\"switchGalleryPhoto(3, '/assets/gateway_developer_dark_hub.png?v=2', 'Developer Hub (Real Dark Mode)', 'Authentic obsidian real dark mode with multi-service supervisor, live host ports, and aggregate streaming terminal.')\">",
  "1161": "            <img src=\"/assets/gateway_developer_dark_hub.png?v=2\" alt=\"Developer Hub\" />",
  "1162": "          </div>",
  "1163": "          <div class=\"thumb-card\" onclick=\"switchGalleryPhoto(4, '/assets/gateway_whitelabel_customizer.png?v=2', 'White-Label Customizer &amp; Mockup', 'Live smartphone reflection with instant brand logo, custom color palette, trust seals, and conversion banners.')\">",
  "1164": "            <img src=\"/assets/gateway_whitelabel_customizer.png?v=2\" alt=\"White-Label Customizer\" />",
  "1165": "          </div>",
  "1166": "        </div>",
  "1167": "      </div>",
  "1168": "",
  "1169": "      <!-- RIGHT COLUMN: PRODUCT BUY BOX FIRST (PRIORITIZED DEMO), THEN CONTENT BELOW IT -->",
  "1170": "      <div class=\"details-column\">",
  "1171": "        <div class=\"product-header-block\">",
  "1172": "          <h1 class=\"product-h1\">YOUPI PG — Small Scale Self-Hosted UPI Payment Gateway</h1>",
  "1173": "          <p style=\"color:var(--text-muted); font-size:0.92rem; margin-top:0.35rem; font-weight:600;\">",
  "1174": "            Direct-to-bank sovereign settlement. Test live checkout with zero intermediary fees.",
  "1175": "          </p>",
  "1176": "        </div>",
  "1177": "",
  "1178": "        <!-- THE BUY BOX CARD: PRIORITIZED FIRST -->",
  "1179": "        <div class=\"buy-box-card\">",
  "1180": "          <div class=\"pricing-header\">",
  "1181": "            <div>",
  "1182": "              <span style=\"font-size:0.8rem; font-weight:700; color:var(--text-muted); text-transform:uppercase;\">Live Demo Checkout Price</span>",
  "1183": "              <div class=\"price-main\" id=\"displayPrice\">₹1.00</div>",
  "1184": "            </div>",
  "1185": "            <span class=\"price-badge-demo\">1-Tap Live Checkout</span>",
  "1186": "          </div>",
  "1187": "",
  "1188": "          <p class=\"pricing-note\">",
  "1189": "            Test real end-to-end payment gateway execution. Default is <strong>₹1.00</strong> for instant testing, or select/type any custom amount:",
  "1190": "          </p>",
  "1191": "",
  "1192": "          <!-- Quick Preset Chips -->",
  "1193": "          <div class=\"amount-selector-title\">",
  "1194": "            <span>Quick Select Test Amount</span>",
  "1195": "          </div>",
  "1196": "          <div class=\"amount-selector-chips\">",
  "1197": "            <button type=\"button\" class=\"chip-btn active\" onclick=\"selectAmount(1.00, this)\">₹1 (Demo)</button>",
  "1198": "            <button type=\"button\" class=\"chip-btn\" onclick=\"selectAmount(10.00, this)\">₹10</button>",
  "1199": "            <button type=\"button\" class=\"chip-btn\" onclick=\"selectAmount(100.00, this)\">₹100</button>",
  "1200": "            <button type=\"button\" class=\"chip-btn\" onclick=\"selectAmount(499.00, this)\">₹499</button>",
  "1201": "            <button type=\"button\" class=\"chip-btn\" onclick=\"selectAmount(1499.00, this)\">₹1,499</button>",
  "1202": "          </div>",
  "1203": "",
  "1204": "          <!-- Custom Amount Input -->",
  "1205": "          <div class=\"custom-amount-box\">",
  "1206": "            <span class=\"custom-amount-label\">Or Custom Amount:</span>",
  "1207": "            <div class=\"custom-input-wrap\">",
  "1208": "              <span class=\"custom-currency-symbol\">₹</span>",
  "1209": "              <input type=\"number\" id=\"customAmountInput\" class=\"custom-amount-input\" value=\"1.00\" min=\"1\" step=\"any\" oninput=\"handleCustomAmountInput(this.value)\" />",
  "1210": "            </div>",
  "1211": "          </div>",
  "1212": "",
  "1213": "          <!-- PRIMARY BUY BUTTON (Official One-Button Integration Target) -->",
  "1214": "          <button type=\"button\"",
  "1215": "                  class=\"btn-buy-primary\"",
  "1216": "                  id=\"btnInitiateCheckout\"",
  "1217": "                  data-youpi-pay",
  "1218": "                  data-order-id=\"\"",
  "1219": "                  data-amount=\"1.00\"",
  "1220": "                  data-currency=\"INR\"",
  "1221": "                  data-name=\"YOUPI Store\"",
  "1222": "                  data-description=\"YOUPI PG Enterprise Suite Top-Up\"",
  "1223": "                  data-success-url=\"/order-success\"",
  "1224": "                  data-failed-url=\"/order-failed\"",
  "1225": "                  data-suspicious-url=\"/order-suspicious\"",
  "1226": "                  data-expired-url=\"/order-expired\"",
  "1227": "                  data-cancelled-url=\"/order-cancelled\"",
  "1228": "                  onclick=\"startGatewayPurchase()\">",
  "1229": "            <span>⚡ Buy Now with YOUPI PG · <span id=\"btnAmountDisplay\">₹1.00</span></span>",
  "1230": "          </button>",
  "1231": "",
  "1232": "          <div class=\"security-guarantee-note\">",
  "1233": "            <span>🔒</span>",
  "1234": "            <span>Bank-Grade 256-Bit SSL · Direct UPI Settlement · 0% Deductions</span>",
  "1235": "          </div>",
  "1236": "",
  "1237": "          <!-- Value Proposition Grid -->",
  "1238": "          <div class=\"value-props-grid\">",
  "1239": "            <div class=\"prop-pill\"><span class=\"icon\">⚡</span> Sub-second QR Code</div>",
  "1240": "            <div class=\"prop-pill\"><span class=\"icon\">🛡️</span> Direct P2P Settlement</div>",
  "1241": "            <div class=\"prop-pill\"><span class=\"icon\">💬</span> WhatsApp OTP Auth</div>",
  "1242": "            <div class=\"prop-pill\"><span class=\"icon\">📱</span> Bank SMS Parsing</div>",
  "1243": "            <div class=\"prop-pill\"><span class=\"icon\">📧</span> Gmail Parsing</div>",
  "1244": "            <div class=\"prop-pill\"><span class=\"icon\">🔒</span> Browser Fingerprinting</div>",
  "1245": "            <div class=\"prop-pill\"><span class=\"icon\">🛑</span> Instant Fraud Ban</div>",
  "1246": "            <div class=\"prop-pill\"><span class=\"icon\">🏪</span> Cashier POS Till Desk</div>",
  "1247": "          </div>",
  "1248": "        </div>",
  "1249": "",
  "1250": "        <!-- CONTENT BELOW THE DEMO: Security Features Checklist -->",
  "1251": "        <div class=\"security-checklist-block\" style=\"background:#ffffff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.25rem 1.5rem; box-shadow:var(--shadow-sm);\">",
  "1252": "          <div style=\"font-size:0.8rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); margin-bottom:0.75rem;\">",
  "1253": "            Security &amp; Core Capabilities",
  "1254": "          </div>",
  "1255": "          <ul class=\"feature-checklist\">",
  "1256": "            <li>",
  "1257": "              <span class=\"chk\">✓</span>",
  "1258": "              <span><strong>0% Gateway Fees:</strong> Direct bank settlement with zero aggregator fees.</span>",
  "1259": "            </li>",
  "1260": "            <li>",
  "1261": "              <span class=\"chk\">✓</span>",
  "1262": "              <span><strong>WhatsApp-Based OTP Auth:</strong> Verifies buyers with WhatsApp OTP before checkout.</span>",
  "1263": "            </li>",
  "1264": "            <li>",
  "1265": "              <span class=\"chk\">✓</span>",
  "1266": "              <span><strong>SMS &amp; Email Parsing:</strong> Automatically parses incoming bank SMS and Gmail alerts to verify payments.</span>",
  "1267": "            </li>",
  "1268": "            <li>",
  "1269": "              <span class=\"chk\">✓</span>",
  "1270": "              <span><strong>Browser Fingerprinting:</strong> Identifies buyer devices and flags high-risk or repeat offenders.</span>",
  "1271": "            </li>",
  "1272": "            <li>",
  "1273": "              <span class=\"chk\">✓</span>",
  "1274": "              <span><strong>Bans Fraudulent Users Instantly:</strong> Automatically bans fraudulent and suspicious users immediately.</span>",
  "1275": "            </li>",
  "1276": "            <li>",
  "1277": "              <span class=\"chk\">✓</span>",
  "1278": "              <span><strong>Strict Payment Verification Parameters:</strong> Strictly verifies payment amount, transaction UTR, and timestamp.</span>",
  "1279": "            </li>",
  "1280": "            <li>",
  "1281": "              <span class=\"chk\">✓</span>",
  "1282": "              <span><strong>POS Cashier Counter Desk:</strong> Counter checkout for walk-in cash and card payments.</span>",
  "1283": "            </li>",
  "1284": "            <li>",
  "1285": "              <span class=\"chk\">✓</span>",
  "1286": "              <span><strong>100% White-Label:</strong> Custom merchant domain, logo, and branding.</span>",
  "1287": "            </li>",
  "1288": "          </ul>",
  "1289": "        </div>",
  "1290": "",
  "1291": "      </div>",
  "1292": "    </div>",
  "1293": "  </main>",
  "1294": "",
  "1295": "  <!-- CRITICAL ARCHITECTURAL REQUIREMENTS & SECURITY FLAW SECTION -->",
  "1296": "  <section class=\"requirements-section\" id=\"requirements\">",
  "1297": "    <div class=\"req-banner\">",
  "1298": "      <div style=\"display:flex; align-items:center; gap:0.75rem; margin-bottom:1rem;\">",
  "1299": "        <span style=\"font-size:1.75rem;\">⚠️</span>",
  "1300": "        <div>",
  "1301": "          <h2 style=\"font-family:'Outfit',sans-serif; font-size:1.45rem; font-weight:800; color:#78350f; letter-spacing:-0.02em;\">",
  "1302": "            Security Flaw &amp; System Requirements",
  "1303": "          </h2>",
  "1304": "          <p style=\"font-size:0.85rem; color:#92400e; margin-top:0.2rem;\">",
  "1305": "            Key operational limitations, bank notification rules, and device compatibility for YOUPI PG.",
  "1306": "          </p>",
  "1307": "        </div>",
  "1308": "      </div>",
  "1309": "",
  "1310": "      <div class=\"req-grid\">",
  "1311": "        ",
  "1312": "        <!-- CARD 1: THE SECURITY FLAW / LIMITATION -->",
  "1313": "        <div class=\"req-card\">",
  "1314": "          <div>",
  "1315": "            <div style=\"display:flex; align-items:center; justify-content:space-between; margin-bottom:0.75rem;\">",
  "1316": "              <div style=\"display:flex; align-items:center; gap:0.5rem;\">",
  "1317": "                <span style=\"font-size:1.25rem;\">⏳</span>",
  "1318": "                <strong style=\"font-size:1.05rem; color:#0f172a;\">Security Flaw: Single-Session UPI Queue</strong>",
  "1319": "              </div>",
  "1320": "              <span class=\"req-pill-badge\" style=\"background:#eff6ff; color:#2563eb; border:1px solid #bfdbfe;\">SECURITY FLAW</span>",
  "1321": "            </div>",
  "1322": "            <p style=\"font-size:0.86rem; color:#334155; line-height:1.55;\">",
  "1323": "              <strong>UPI works on a strict queue system to ensure topmost security and prevent payment mismatches.</strong> Only one user can pay on a VPA at a time. Other buyers must wait in a queue until the active transaction completes.",
  "1324": "            </p>",
  "1325": "          </div>",
  "1326": "          <div style=\"margin-top:0.85rem; padding:0.65rem 0.85rem; background:#f8fafc; border-left:3px solid #2563eb; border-radius:4px; font-size:0.78rem; color:#475569;\">",
  "1327": "            🔒 <em>Why this exists:</em> Guarantees every payment matches the exact order with 100% security and zero payment mismatch.",
  "1328": "          </div>",
  "1329": "        </div>",
  "1330": "",
  "1331": "        <!-- CARD 2: BANK SMS & GMAIL NOTIFICATION MANDATE (STRICT PREREQUISITE) -->",
  "1332": "        <div class=\"req-card danger-card\">",
  "1333": "          <div>",
  "1334": "            <div style=\"display:flex; align-items:center; justify-content:space-between; margin-bottom:0.75rem;\">",
  "1335": "              <div style=\"display:flex; align-items:center; gap:0.5rem;\">",
  "1336": "                <span style=\"font-size:1.25rem;\">🚨</span>",
  "1337": "                <strong style=\"font-size:1.05rem; color:#991b1b;\">Mandatory Requirement: Bank SMS &amp; Gmail Alerts</strong>",
  "1338": "              </div>",
  "1339": "              <span class=\"req-pill-badge\" style=\"background:#fef2f2; color:#dc2626; border:1px solid #fecaca;\">MANDATORY REQUIREMENT</span>",
  "1340": "            </div>",
  "1341": "            <p style=\"font-size:0.86rem; color:#334155; line-height:1.55;\">",
  "1342": "              <strong>Your bank must push messages to Gmail and SMS. This is mandatory even for ₹1 transactions. Without it, it does not work.</strong> The gateway parses incoming SMS and Gmail alerts to automatically verify payments.",
  "1343": "            </p>",
  "1344": "          </div>",
  "1345": "          <div style=\"margin-top:0.85rem; padding:0.65rem 0.85rem; background:#fef2f2; border-left:3px solid #dc2626; border-radius:4px; font-size:0.78rem; color:#991b1b;\">",
  "1346": "            ⚠️ <em>Requirement:</em> Real-time SMS and email alerts must be active on your bank account for all transactions.",
  "1347": "          </div>",
  "1348": "        </div>",
  "1349": "",
  "1350": "        <!-- CARD 3: CONDITIONAL DEVICE REQUIREMENT -->",
  "1351": "        <div class=\"req-card conditional-card\">",
  "1352": "          <div>",
  "1353": "            <div style=\"display:flex; align-items:center; justify-content:space-between; margin-bottom:0.75rem;\">",
  "1354": "              <div style=\"display:flex; align-items:center; gap:0.5rem;\">",
  "1355": "                <span style=\"font-size:1.25rem;\">📱</span>",
  "1356": "                <strong style=\"font-size:1.05rem; color:#9a3412;\">Conditional Requirement: Device Setup</strong>",
  "1357": "              </div>",
  "1358": "              <span class=\"req-pill-badge\" style=\"background:#fff7ed; color:#c2410c; border:1px solid #fed7aa;\">CONDITIONAL REQUIREMENT</span>",
  "1359": "            </div>",
  "1360": "            <p style=\"font-size:0.86rem; color:#334155; line-height:1.55;\">",
  "1361": "              <strong>If you want Gmail + SMS verification, you need an Android device.</strong> Or if you only need Gmail verification, you can use an iPhone. <strong>SMS verification is not supported by iPhones.</strong>",
  "1362": "            </p>",
  "1363": "            <div style=\"display:flex; flex-direction:column; gap:0.45rem; margin-top:0.75rem;\">",
  "1364": "              <div style=\"display:flex; align-items:center; justify-content:space-between; padding:0.45rem 0.65rem; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:6px; font-size:0.78rem;\">",
  "1365": "                <span style=\"color:#166534; font-weight:700;\">🟢 Gmail + SMS Verification</span>",
  "1366": "                <span style=\"color:#15803d; font-weight:800; font-size:0.74rem; background:#dcfce7; padding:2px 8px; border-radius:4px;\">Android Device Required</span>",
  "1367": "              </div>",
  "1368": "              <div style=\"display:flex; align-items:center; justify-content:space-between; padding:0.45rem 0.65rem; background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; font-size:0.78rem;\">",
  "1369": "                <span style=\"color:#334155; font-weight:700;\">🔵 Gmail Verification Only</span>",
  "1370": "                <span style=\"color:#0f172a; font-weight:800; font-size:0.74rem; background:#e2e8f0; padding:2px 8px; border-radius:4px;\">iPhone Supported</span>",
  "1371": "              </div>",
  "1372": "            </div>",
  "1373": "          </div>",
  "1374": "          <div style=\"margin-top:0.85rem; padding:0.65rem 0.85rem; background:#fff7ed; border-left:3px solid #ea580c; border-radius:4px; font-size:0.78rem; color:#9a3412;\">",
  "1375": "            ⚠️ <em>Important Limitation:</em> SMS verification is not supported by iPhones.",
  "1376": "          </div>",
  "1377": "        </div>",
  "1378": "",
  "1379": "      </div>",
  "1380": "    </div>",
  "1381": "  </section>",
  "1382": "",
  "1383": "  <!-- TECHNICAL SPECIFICATIONS & QUAD CARDS -->",
  "1384": "  <section class=\"specs-section\" id=\"features\">",
  "1385": "    <div class=\"section-heading-row\">",
  "1386": "      <span class=\"section-badge\">Gateway Capabilities</span>",
  "1387": "      <h2 class=\"section-title\">Built For Small Scale Businesses</h2>",
  "1388": "    </div>",
  "1389": "",
  "1390": "    <div class=\"features-quad-grid\">",
  "1391": "      <div class=\"quad-card\">",
  "1392": "        <div class=\"quad-icon\">⚡</div>",
  "1393": "        <h3 class=\"quad-title\">0% Gateway Fees</h3>",
  "1394": "        <p class=\"quad-desc\">",
  "1395": "          Direct bank settlement with zero aggregator fees. 100% of the funds go directly into your account.",
  "1396": "        </p>",
  "1397": "      </div>",
  "1398": "",
  "1399": "      <div class=\"quad-card\">",
  "1400": "        <div class=\"quad-icon\">💬</div>",
  "1401": "        <h3 class=\"quad-title\">WhatsApp OTP Auth</h3>",
  "1402": "        <p class=\"quad-desc\">",
  "1403": "          Verifies buyers with WhatsApp OTP before checkout to prevent fake orders and confirm valid mobile numbers.",
  "1404": "        </p>",
  "1405": "      </div>",
  "1406": "",
  "1407": "      <div class=\"quad-card\">",
  "1408": "        <div class=\"quad-icon\">🔒</div>",
  "1409": "        <h3 class=\"quad-title\">Browser Fingerprinting &amp; Instant Bans</h3>",
  "1410": "        <p class=\"quad-desc\">",
  "1411": "          Identifies buyer devices and flags high-risk or repeat offenders. Automatically bans fraudulent users immediately.",
  "1412": "        </p>",
  "1413": "      </div>",
  "1414": "",
  "1415": "      <div class=\"quad-card\">",
  "1416": "        <div class=\"quad-icon\">📱</div>",
  "1417": "        <h3 class=\"quad-title\">SMS &amp; Email Parsing</h3>",
  "1418": "        <p class=\"quad-desc\">",
  "1419": "          Parses incoming bank SMS and Gmail alerts to automatically verify payments and confirm transactions in real time.",
  "1420": "        </p>",
  "1421": "      </div>",
  "1422": "    </div>",
  "1423": "",
  "1424": "    <!-- COMPARISON TABLE -->",
  "1425": "    <div class=\"comparison-card\" id=\"comparison\">",
  "1426": "      <h3 style=\"font-size:1.3rem; font-weight:800; margin-bottom:1.25rem;\">Why Merchants Switch to YOUPI PG</h3>",
  "1427": "      <table class=\"comparison-table\">",
  "1428": "        <thead>",
  "1429": "          <tr>",
  "1430": "            <th>Architecture Feature</th>",
  "1431": "            <th class=\"col-highlight\">⚡ YOUPI PG (Self-Hosted)</th>",
  "1432": "            <th>Traditional Gateways (Razorpay / Stripe)</th>",
  "1433": "          </tr>",
  "1434": "        </thead>",
  "1435": "        <tbody>",
  "1436": "          <tr>",
  "1437": "            <td><strong>Transaction Fee</strong></td>",
  "1438": "            <td class=\"col-highlight\"><strong>0% (Zero Fees Forever)</strong></td>",
  "1439": "            <td>2.0% – 3.0% + 18% GST</td>",
  "1440": "          </tr>",
  "1441": "          <tr>",
  "1442": "            <td><strong>Settlement Window</strong></td>",
  "1443": "            <td class=\"col-highlight\"><strong>Instant (Direct to Bank)</strong></td>",
  "1444": "            <td>T+2 to T+3 Business Days</td>",
  "1445": "          </tr>",
  "1446": "          <tr>",
  "1447": "            <td><strong>Customer Authentication</strong></td>",
  "1448": "            <td class=\"col-highlight\"><strong>WhatsApp-Based OTP Verification</strong></td>",
  "1449": "            <td>SMS / Email OTP Only</td>",
  "1450": "          </tr>",
  "1451": "          <tr>",
  "1452": "            <td><strong>Fraud Mitigation</strong></td>",
  "1453": "            <td class=\"col-highlight\"><strong>Browser Fingerprinting &amp; Instant Bans</strong></td>",
  "1454": "            <td>Generic Risk Scoring</td>",
  "1455": "          </tr>",
  "1456": "          <tr>",
  "1457": "            <td><strong>Payment Verification</strong></td>",
  "1458": "            <td class=\"col-highlight\"><strong>Parses Bank SMS &amp; Gmail Alerts</strong></td>",
  "1459": "            <td>Aggregator Dependent</td>",
  "1460": "          </tr>",
  "1461": "          <tr>",
  "1462": "            <td><strong>White-Label Customization</strong></td>",
  "1463": "            <td class=\"col-highlight\"><strong>100% Brand Control &amp; Custom Domain</strong></td>",
  "1464": "            <td>Aggregator Branding Mandatory</td>",
  "1465": "          </tr>",
  "1466": "          <tr>",
  "1467": "            <td><strong>POS Counter &amp; Till Support</strong></td>",
  "1468": "            <td class=\"col-highlight\"><strong>Included (Cash &amp; Card Modalities)</strong></td>",
  "1469": "            <td>Separate Hardware / High Add-On Cost</td>",
  "1470": "          </tr>",
  "1471": "        </tbody>",
  "1472": "      </table>",
  "1473": "    </div>",
  "1474": "  </section>",
  "1475": "",
  "1476": "  <!-- ============================================================ -->",
  "1477": "  <!-- DEMO MERCHANT OUTCOME PAGES SHOWCASE                         -->",
  "1478": "  <!-- ============================================================ -->",
  "1479": "  <section class=\"specs-section\" id=\"outcome-pages\" style=\"background:#ffffff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:3.5rem 1.5rem;\">",
  "1480": "    <div style=\"max-width:1280px; margin:0 auto;\">",
  "1481": "      <div class=\"section-heading-row\" style=\"text-align:center; margin-bottom:2.5rem;\">",
  "1482": "        <span class=\"section-badge\" style=\"background:rgba(37,99,235,0.1); color:#2563eb; border:1px solid rgba(37,99,235,0.25);\">Merchant Reference Pages</span>",
  "1483": "        <h2 class=\"section-title\" style=\"font-size:2rem; margin-top:0.5rem;\">Standardized Gateway Outcome Demonstrations</h2>",
  "1484": "        <p style=\"color:var(--text-muted); max-width:700px; margin:0.5rem auto 0; font-size:0.95rem;\">",
  "1485": "          YOUPI PG communicates 5 distinct deterministic payment outcomes. Below are the live reference merchant pages demonstrating how customer experiences should be rendered.",
  "1486": "        </p>",
  "1487": "      </div>",
  "1488": "",
  "1489": "      <div style=\"display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:1.25rem;\">",
  "1490": "        <!-- Card 1: SUCCESS -->",
  "1491": "        <div style=\"background:#f0fdf4; border:1px solid #bbf7d0; border-radius:14px; padding:1.5rem; display:flex; flex-direction:column; justify-content:space-between;\">",
  "1492": "          <div>",
  "1493": "            <div style=\"display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem;\">",
  "1494": "              <span style=\"display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#22c55e; color:#fff; font-size:0.9rem; font-weight:800;\">✓</span>",
  "1495": "              <strong style=\"color:#166534; font-size:1.1rem;\">SUCCESS</strong>",
  "1496": "            </div>",
  "1497": "            <p style=\"font-size:0.85rem; color:#15803d; line-height:1.5; margin-bottom:1rem;\">",
  "1498": "              Payment verified by banking observers. Order marked paid and provisioned.",
  "1499": "            </p>",
  "1500": "          </div>",
  "1501": "          <a href=\"/order-success?order_id=ORD-SUCCESS-TEST&amount=499.00&utr=987654321012&mode=UPI\" class=\"btn\" style=\"background:#16a34a; color:#ffffff; font-size:0.85rem; padding:0.6rem; text-decoration:none; text-align:center; border-radius:8px; font-weight:700;\">",
  "1502": "            Preview Success Page →",
  "1503": "          </a>",
  "1504": "        </div>",
  "1505": "",
  "1506": "        <!-- Card 2: FAILED -->",
  "1507": "        <div style=\"background:#fef2f2; border:1px solid #fecaca; border-radius:14px; padding:1.5rem; display:flex; flex-direction:column; justify-content:space-between;\">",
  "1508": "          <div>",
  "1509": "            <div style=\"display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem;\">",
  "1510": "              <span style=\"display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#ef4444; color:#fff; font-size:0.9rem; font-weight:800;\">✕</span>",
  "1511": "              <strong style=\"color:#991b1b; font-size:1.1rem;\">FAILED</strong>",
  "1512": "            </div>",
  "1513": "            <p style=\"font-size:0.85rem; color:#b91c1c; line-height:1.5; margin-bottom:1rem;\">",
  "1514": "              Transaction declined or not confirmed. Informs customer no funds were lost.",
  "1515": "            </p>",
  "1516": "          </div>",
  "1517": "          <a href=\"/order-failed?order_id=ORD-FAILED-TEST&reason=UPI_CONFIRMATION_TIMEOUT\" class=\"btn\" style=\"background:#dc2626; color:#ffffff; font-size:0.85rem; padding:0.6rem; text-decoration:none; text-align:center; border-radius:8px; font-weight:700;\">",
  "1518": "            Preview Failed Page →",
  "1519": "          </a>",
  "1520": "        </div>",
  "1521": "",
  "1522": "        <!-- Card 3: SUSPICIOUS -->",
  "1523": "        <div style=\"background:#fffbeb; border:1px solid #fde68a; border-radius:14px; padding:1.5rem; display:flex; flex-direction:column; justify-content:space-between;\">",
  "1524": "          <div>",
  "1525": "            <div style=\"display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem;\">",
  "1526": "              <span style=\"display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#f59e0b; color:#fff; font-size:0.9rem; font-weight:800;\">⚠</span>",
  "1527": "              <strong style=\"color:#92400e; font-size:1.1rem;\">SUSPICIOUS</strong>",
  "1528": "            </div>",
  "1529": "            <p style=\"font-size:0.85rem; color:#b45309; line-height:1.5; margin-bottom:1rem;\">",
  "1530": "              Flagged by gateway security systems. Held for manual compliance review.",
  "1531": "            </p>",
  "1532": "          </div>",
  "1533": "          <a href=\"/order-suspicious?order_id=ORD-SUSPICIOUS-TEST\" class=\"btn\" style=\"background:#d97706; color:#ffffff; font-size:0.85rem; padding:0.6rem; text-decoration:none; text-align:center; border-radius:8px; font-weight:700;\">",
  "1534": "            Preview Review Page →",
  "1535": "          </a>",
  "1536": "        </div>",
  "1537": "",
  "1538": "        <!-- Card 4: EXPIRED -->",
  "1539": "        <div style=\"background:#f8fafc; border:1px solid #cbd5e1; border-radius:14px; padding:1.5rem; display:flex; flex-direction:column; justify-content:space-between;\">",
  "1540": "          <div>",
  "1541": "            <div style=\"display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem;\">",
  "1542": "              <span style=\"display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#64748b; color:#fff; font-size:0.9rem; font-weight:800;\">⏱</span>",
  "1543": "              <strong style=\"color:#334155; font-size:1.1rem;\">EXPIRED</strong>",
  "1544": "            </div>",
  "1545": "            <p style=\"font-size:0.85rem; color:#475569; line-height:1.5; margin-bottom:1rem;\">",
  "1546": "              5-minute session window elapsed. Slot auto-released for next customer.",
  "1547": "            </p>",
  "1548": "          </div>",
  "1549": "          <a href=\"/order-expired?order_id=ORD-EXPIRED-TEST\" class=\"btn\" style=\"background:#475569; color:#ffffff; font-size:0.85rem; padding:0.6rem; text-decoration:none; text-align:center; border-radius:8px; font-weight:700;\">",
  "1550": "            Preview Expired Page →",
  "1551": "          </a>",
  "1552": "        </div>",
  "1553": "",
  "1554": "        <!-- Card 5: CANCELLED -->",
  "1555": "        <div style=\"background:#f8fafc; border:1px solid #cbd5e1; border-radius:14px; padding:1.5rem; display:flex; flex-direction:column; justify-content:space-between;\">",
  "1556": "          <div>",
  "1557": "            <div style=\"display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem;\">",
  "1558": "              <span style=\"display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#94a3b8; color:#fff; font-size:0.9rem; font-weight:800;\">⊘</span>",
  "1559": "              <strong style=\"color:#334155; font-size:1.1rem;\">CANCELLED</strong>",
  "1560": "            </div>",
  "1561": "            <p style=\"font-size:0.85rem; color:#475569; line-height:1.5; margin-bottom:1rem;\">",
  "1562": "              User dismissed modal or requested cancellation before payment.",
  "1563": "            </p>",
  "1564": "          </div>",
  "1565": "          <a href=\"/order-cancelled?order_id=ORD-CANCELLED-TEST\" class=\"btn\" style=\"background:#64748b; color:#ffffff; font-size:0.85rem; padding:0.6rem; text-decoration:none; text-align:center; border-radius:8px; font-weight:700;\">",
  "1566": "            Preview Cancelled Page →",
  "1567": "          </a>",
  "1568": "        </div>",
  "1569": "      </div>",
  "1570": "    </div>",
  "1571": "  </section>",
  "1572": "",
  "1573": "  <!-- ============================================================ -->",
  "1574": "  <!-- OFFICIAL DEVELOPER INTEGRATION GUIDE                         -->",
  "1575": "  <!-- ============================================================ -->",
  "1576": "  <section class=\"specs-section\" id=\"developer-guide\" style=\"background:#0f172a; color:#f8fafc; padding:4rem 1.5rem;\">",
  "1577": "    <div style=\"max-width:1100px; margin:0 auto;\">",
  "1578": "      <div style=\"text-align:center; margin-bottom:3rem;\">",
  "1579": "        <span style=\"background:rgba(56,189,248,0.15); border:1px solid rgba(56,189,248,0.35); color:#38bdf8; font-size:0.8rem; font-weight:800; padding:0.35rem 1rem; border-radius:20px; text-transform:uppercase; letter-spacing:0.04em;\">Official Integration Guide</span>",
  "1580": "        <h2 style=\"font-family:'Outfit',sans-serif; font-size:2.4rem; font-weight:800; color:#ffffff; margin-top:0.75rem;\">Integrate YOUPI PG in 5 Minutes</h2>",
  "1581": "        <p style=\"color:#94a3b8; font-size:1.05rem; max-width:700px; margin:0.5rem auto 0;\">",
  "1582": "          Universal, framework-independent browser integration. Works with PHP, Node.js, Python, Laravel, Django, Next.js, WordPress, or plain HTML.",
  "1583": "        </p>",
  "1584": "      </div>",
  "1585": "",
  "1586": "      <!-- STEP 1 -->",
  "1587": "      <div style=\"background:#1e293b; border:1px solid #334155; border-radius:16px; padding:1.75rem; margin-bottom:1.75rem;\">",
  "1588": "        <div style=\"display:flex; align-items:center; gap:0.75rem; margin-bottom:0.75rem;\">",
  "1589": "          <span style=\"background:#2563eb; color:#ffffff; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800;\">1</span>",
  "1590": "          <h3 style=\"font-family:'Outfit',sans-serif; font-size:1.35rem; font-weight:700; color:#ffffff;\">Add the Official Script to Your Page</h3>",
  "1591": "        </div>",
  "1592": "        <p style=\"color:#cbd5e1; font-size:0.92rem; margin-bottom:1rem; line-height:1.5;\">",
  "1593": "          Place this single script tag in your HTML. It automatically provides modal checkout, responsive iframe sizing, and button auto-detection.",
  "1594": "        </p>",
  "1595": "        <pre style=\"background:#0b1120; border:1px solid #1e293b; border-radius:10px; padding:1rem; color:#38bdf8; font-family:monospace; font-size:0.9rem; overflow-x:auto;\"><code>&lt;!-- Official YOUPI PG Universal Integration Script --&gt;",
  "1596": "&lt;script",
  "1597": "    src=\"https://&lt;youpi-checkout-host&gt;/youpi.js\"",
  "1598": "    data-youpi-key=\"YOUR_PUBLIC_KEY\"&gt;",
  "1599": "&lt;/script&gt;</code></pre>",
  "1600": "      </div>",
  "1601": "",
  "1602": "      <!-- STEP 2 -->",
  "1603": "      <div style=\"background:#1e293b; border:1px solid #334155; border-radius:16px; padding:1.75rem; margin-bottom:1.75rem;\">",
  "1604": "        <div style=\"display:flex; align-items:center; gap:0.75rem; margin-bottom:0.75rem;\">",
  "1605": "          <span style=\"background:#2563eb; color:#ffffff; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800;\">2</span>",
  "1606": "          <h3 style=\"font-family:'Outfit',sans-serif; font-size:1.35rem; font-weight:700; color:#ffffff;\">Map Your Payment Button (Zero JavaScript)</h3>",
  "1607": "        </div>",
  "1608": "        <p style=\"color:#cbd5e1; font-size:0.92rem; margin-bottom:1rem; line-height:1.5;\">",
  "1609": "          Add <code>data-youpi-pay</code>, <code>data-order-id</code>, and <code>data-amount</code> to any button. The script automatically opens the centered modal checkout on click!",
  "1610": "        </p>",
  "1611": "        <pre style=\"background:#0b1120; border:1px solid #1e293b; border-radius:10px; padding:1rem; color:#4ade80; font-family:monospace; font-size:0.9rem; overflow-x:auto;\"><code>&lt;button",
  "1612": "    data-youpi-pay",
  "1613": "    data-order-id=\"ORDER-1001\"",
  "1614": "    data-amount=\"499\"&gt;",
  "1615": "    Buy Now",
  "1616": "&lt;/button&gt;</code></pre>",
  "1617": "        <p style=\"color:#94a3b8; font-size:0.85rem; margin-top:0.75rem;\">",
  "1618": "          Optional button attributes: <code>data-currency=\"INR\"</code>, <code>data-customer-name=\"Mohit\"</code>, <code>data-customer-email=\"mohit@example.com\"</code>, <code>data-customer-phone=\"9876543210\"</code>, <code>data-metadata='{\"sku\":\"TSHIRT-01\"}'</code>.",
  "1619": "        </p>",
  "1620": "      </div>",
  "1621": "",
  "1622": "      <!-- STEP 3 -->",
  "1623": "      <div style=\"background:#1e293b; border:1px solid #334155; border-radius:16px; padding:1.75rem; margin-bottom:1.75rem;\">",
  "1624": "        <div style=\"display:flex; align-items:center; gap:0.75rem; margin-bottom:0.75rem;\">",
  "1625": "          <span style=\"background:#2563eb; color:#ffffff; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800;\">3</span>",
  "1626": "          <h3 style=\"font-family:'Outfit',sans-serif; font-size:1.35rem; font-weight:700; color:#ffffff;\">Listen to Browser Payment Events (For Frontend UX)</h3>",
  "1627": "        </div>",
  "1628": "        <p style=\"color:#cbd5e1; font-size:0.92rem; margin-bottom:1rem; line-height:1.5;\">",
  "1629": "          The script emits standardized DOM CustomEvents on <code>window</code> to drive your user experience.",
  "1630": "        </p>",
  "1631": "        <pre style=\"background:#0b1120; border:1px solid #1e293b; border-radius:10px; padding:1rem; color:#facc15; font-family:monospace; font-size:0.88rem; overflow-x:auto;\"><code>&lt;script&gt;",
  "1632": "  window.addEventListener('youpi:payment:success', (e) =&gt; {",
  "1633": "    const { order_id, amount_received, utr, payment_mode } = e.detail;",
  "1634": "    console.log(`Payment confirmed for Order #${order_id}. UTR: ${utr}`);",
  "1635": "    window.location.href = `/order-success?order_id=${order_id}&amount=${amount_received}&utr=${utr}`;",
  "1636": "  });",
  "1637": "",
  "1638": "  window.addEventListener('youpi:payment:failed', (e) =&gt; {",
  "1639": "    window.location.href = `/order-failed?order_id=${e.detail.order_id}&reason=${e.detail.reason}`;",
  "1640": "  });",
  "1641": "",
  "1642": "  window.addEventListener('youpi:payment:suspicious', (e) =&gt; {",
  "1643": "    window.location.href = `/order-suspicious?order_id=${e.detail.order_id}`;",
  "1644": "  });",
  "1645": "&lt;/script&gt;</code></pre>",
  "1646": "      </div>",
  "1647": "",
  "1648": "      <!-- STEP 4 -->",
  "1649": "      <div style=\"background:#1e293b; border:1px solid #334155; border-radius:16px; padding:1.75rem; margin-bottom:1.75rem;\">",
  "1650": "        <div style=\"display:flex; align-items:center; gap:0.75rem; margin-bottom:0.75rem;\">",
  "1651": "          <span style=\"background:#2563eb; color:#ffffff; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800;\">4</span>",
  "1652": "          <h3 style=\"font-family:'Outfit',sans-serif; font-size:1.35rem; font-weight:700; color:#ffffff;\">Or Use Programmatic Invocation: <code>Youpi.pay({...})</code></h3>",
  "1653": "        </div>",
  "1654": "        <p style=\"color:#cbd5e1; font-size:0.92rem; margin-bottom:1rem; line-height:1.5;\">",
  "1655": "          For dynamic shopping carts (React, Vue, Next.js, Nuxt), call the programmatic API directly:",
  "1656": "        </p>",
  "1657": "        <pre style=\"background:#0b1120; border:1px solid #1e293b; border-radius:10px; padding:1rem; color:#a78bfa; font-family:monospace; font-size:0.88rem; overflow-x:auto;\"><code>Youpi.pay({",
  "1658": "  order_id: \"ORDER-1001\",",
  "1659": "  amount: 499,",
  "1660": "  currency: \"INR\",",
  "1661": "  customer: {",
  "1662": "    name: \"Mohit\",",
  "1663": "    email: \"mohit@example.com\",",
  "1664": "    phone: \"9876543210\"",
  "1665": "  },",
  "1666": "  metadata: { product_id: \"TSHIRT-01\" },",
  "1667": "  handler: function(response) {",
  "1668": "    // response: { status: \"SUCCESS\", order_id, amount_received, utr, payment_mode }",
  "1669": "    alert(`Payment successful! UTR: ${response.utr}`);",
  "1670": "  },",
  "1671": "  onFailed: function(response) {",
  "1672": "    alert(`Payment failed: ${response.reason}`);",
  "1673": "  }",
  "1674": "});</code></pre>",
  "1675": "      </div>",
  "1676": "",
  "1677": "      <!-- STEP 5 -->",
  "1678": "      <div style=\"background:#1e293b; border:1px solid #334155; border-radius:16px; padding:1.75rem; margin-bottom:2.5rem;\">",
  "1679": "        <div style=\"display:flex; align-items:center; gap:0.75rem; margin-bottom:0.75rem;\">",
  "1680": "          <span style=\"background:#10b981; color:#ffffff; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800;\">5</span>",
  "1681": "          <h3 style=\"font-family:'Outfit',sans-serif; font-size:1.35rem; font-weight:700; color:#ffffff;\">Configure Authoritative Backend Webhook (Server-to-Server)</h3>",
  "1682": "        </div>",
  "1683": "        <div style=\"background:rgba(239,68,68,0.15); border:1px solid rgba(239,68,68,0.3); border-radius:8px; padding:0.85rem 1rem; color:#fca5a5; font-size:0.88rem; margin-bottom:1rem;\">",
  "1684": "          <strong>CRITICAL SECURITY INVARIANT:</strong> Never mark an order paid based only on client-side browser events. Only fulfill orders after verifying the server-to-server HMAC-SHA256 signed webhook!",
  "1685": "        </div>",
  "1686": "        <pre style=\"background:#0b1120; border:1px solid #1e293b; border-radius:10px; padding:1rem; color:#f472b6; font-family:monospace; font-size:0.88rem; overflow-x:auto;\"><code>// Node.js / Express Webhook Receiver Reference",
  "1687": "import crypto from 'node:crypto';",
  "1688": "",
  "1689": "app.post('/api/youpi-webhook', express.raw({ type: 'application/json' }), (req, res) => {",
  "1690": "  const signature = req.headers['x-gateway-signature']; // 'sha256=...'",
  "1691": "  const webhookSecret = process.env.YOUPI_WEBHOOK_SECRET;",
  "1692": "",
  "1693": "  // Verify HMAC-SHA256 signature",
  "1694": "  const expectedHmac = crypto.createHmac('sha256', webhookSecret).update(req.body).digest('hex');",
  "1695": "  if (signature !== `sha256=${expectedHmac}`) {",
  "1696": "    return res.status(401).send('Signature mismatch');",
  "1697": "  }",
  "1698": "",
  "1699": "  const event = JSON.parse(req.body.toString());",
  "1700": "  if (event.event === 'SUCCESS') {",
  "1701": "    // Authoritative proof: Mark order as PAID in your database!",
  "1702": "    db.orders.markPaid(event.orderId, { utr: event.utr, amount: event.amount });",
  "1703": "  }",
  "1704": "",
  "1705": "  res.status(200).json({ received: true });",
  "1706": "});</code></pre>",
  "1707": "      </div>",
  "1708": "",
  "1709": "      <!-- FAQ ACCORDION: 18 DEVELOPER QUESTIONS -->",
  "1710": "      <div style=\"background:#111c34; border:1px solid #1e293b; border-radius:18px; padding:2rem;\">",
  "1711": "        <h3 style=\"font-family:'Outfit',sans-serif; font-size:1.6rem; font-weight:800; color:#ffffff; margin-bottom:1.5rem; text-align:center;\">",
  "1712": "          Frequently Asked Developer Questions",
  "1713": "        </h3>",
  "1714": "        ",
  "1715": "        <div style=\"display:grid; grid-template-columns:1fr 1fr; gap:1.25rem;\">",
  "1716": "          <div style=\"background:#0c1527; padding:1.25rem; border-radius:10px; border:1px solid #1e293b;\">",
  "1717": "            <strong style=\"color:#38bdf8; font-size:0.95rem;\">Q: What do I put in my HTML?</strong>",
  "1718": "            <p style=\"color:#94a3b8; font-size:0.85rem; margin-top:0.4rem; line-height:1.5;\">A: Exactly one script tag: <code>&lt;script src=\"...\" data-youpi-key=\"KEY\"&gt;&lt;/script&gt;</code> and your button with <code>data-youpi-pay</code>.</p>",
  "1719": "          </div>",
  "1720": "          <div style=\"background:#0c1527; padding:1.25rem; border-radius:10px; border:1px solid #1e293b;\">",
  "1721": "            <strong style=\"color:#38bdf8; font-size:0.95rem;\">Q: What information do I send to YOUPI?</strong>",
  "1722": "            <p style=\"color:#94a3b8; font-size:0.85rem; margin-top:0.4rem; line-height:1.5;\">A: Only <code>order_id</code> and <code>amount</code> are required. Currency defaults to INR. Customer info and metadata are optional.</p>",
  "1723": "          </div>",
  "1724": "          <div style=\"background:#0c1527; padding:1.25rem; border-radius:10px; border:1px solid #1e293b;\">",
  "1725": "            <strong style=\"color:#38bdf8; font-size:0.95rem;\">Q: How does the payment modal open?</strong>",
  "1726": "            <p style=\"color:#94a3b8; font-size:0.85rem; margin-top:0.4rem; line-height:1.5;\">A: Automatically! Clicking a <code>data-youpi-pay</code> button dims and blurs the background and renders the centered 2-column modal (or mobile drawer).</p>",
  "1727": "          </div>",
  "1728": "          <div style=\"background:#0c1527; padding:1.25rem; border-radius:10px; border:1px solid #1e293b;\">",
  "1729": "            <strong style=\"color:#38bdf8; font-size:0.95rem;\">Q: Which event actually proves the order is paid?</strong>",
  "1730": "            <p style=\"color:#94a3b8; font-size:0.85rem; margin-top:0.4rem; line-height:1.5;\">A: ONLY the server-to-server webhook with valid HMAC signature. Browser events are for UI animations only.</p>",
  "1731": "          </div>",
  "1732": "          <div style=\"background:#0c1527; padding:1.25rem; border-radius:10px; border:1px solid #1e293b;\">",
  "1733": "            <strong style=\"color:#38bdf8; font-size:0.95rem;\">Q: What should never be trusted from the browser?</strong>",
  "1734": "            <p style=\"color:#94a3b8; font-size:0.85rem; margin-top:0.4rem; line-height:1.5;\">A: Any frontend declaration of payment success. Never mark orders as fulfilled based solely on browser redirects or client callbacks.</p>",
  "1735": "          </div>",
  "1736": "          <div style=\"background:#0c1527; padding:1.25rem; border-radius:10px; border:1px solid #1e293b;\">",
  "1737": "            <strong style=\"color:#38bdf8; font-size:0.95rem;\">Q: Does the browser integration need private API secrets?</strong>",
  "1738": "            <p style=\"color:#94a3b8; font-size:0.85rem; margin-top:0.4rem; line-height:1.5;\">A: NO! Only your public merchant key is placed in the browser. Private webhook secrets remain securely on your server.</p>",
  "1739": "          </div>",
  "1740": "        </div>",
  "1741": "      </div>",
  "1742": "    </div>",
  "1743": "  </section>",
  "1744": "",
  "1745": "  <!-- FOOTER -->",
  "1746": "  <footer>",
  "1747": "    <div class=\"footer-inner\">",
  "1748": "      <div class=\"footer-brand\">",
  "1749": "        <div class=\"brand-logo-badge\">⚡</div>",
  "1750": "        <div>",
  "1751": "          <div style=\"font-family:'Outfit', sans-serif; font-size:1.2rem; font-weight:800; color:#ffffff;\">YOUPI Store</div>",
  "1752": "          <div style=\"font-size:0.75rem; color:#94a3b8;\">Official Demo Store &amp; E-Commerce Gateway Showcase</div>",
  "1753": "        </div>",
  "1754": "      </div>",
  "1755": "      <div style=\"font-size:0.8rem; color:#94a3b8;\">",
  "1756": "        © 2026 YOUPI PG · Sovereign Small Scale Payment Gateway Suite",
  "1757": "      </div>",
  "1758": "    </div>",
  "1759": "  </footer>",
  "1760": "",
  "1761": "  <!-- LIGHTBOX MODAL FOR FULL-RES IMAGE INSPECTION -->",
  "1762": "  <div class=\"lightbox-modal\" id=\"lightboxModal\" onclick=\"closeLightbox(event)\">",
  "1763": "    <button type=\"button\" class=\"lightbox-close-btn\" onclick=\"closeLightbox()\">✕</button>",
  "1764": "    <img id=\"lightboxImg\" class=\"lightbox-img\" src=\"/assets/gateway_pc_checkout.png\" alt=\"Enlarged Gateway Photo\" />",
  "1765": "  </div>",
  "1766": "",
  "1767": "  <!-- PAYMENT SUCCESS CELEBRATION MODAL -->",
  "1768": "  <div class=\"celebration-modal\" id=\"celebrationModal\">",
  "1769": "    <div class=\"celebration-card\">",
  "1770": "      <div class=\"celebration-icon\">✓</div>",
  "1771": "      <h2 style=\"font-family:'Outfit',sans-serif; font-size:1.6rem; font-weight:800; color:#0f172a; margin-bottom:0.4rem;\">Payment Verified!</h2>",
  "1772": "      <p style=\"font-size:0.88rem; color:var(--text-muted);\">",
  "1773": "        Your transaction was verified via banking observers. Your YOUPI PG Suite license is provisioned.",
  "1774": "      </p>",
  "1775": "",
  "1776": "      <div class=\"receipt-box\">",
  "1777": "        <div class=\"receipt-row\"><span>Product:</span><strong>YOUPI PG Small Scale Suite</strong></div>",
  "1778": "        <div class=\"receipt-row\"><span>Order ID:</span><span id=\"receiptOrderId\" style=\"font-family:monospace; font-weight:700;\">-</span></div>",
  "1779": "        <div class=\"receipt-row\"><span>Payment ID:</span><span id=\"receiptPaymentId\" style=\"font-family:monospace; font-size:0.75rem;\">-</span></div>",
  "1780": "        <div class=\"receipt-row\"><span>Amount Paid:</span><strong id=\"receiptAmountPaid\" style=\"color:#059669; font-size:0.95rem;\">₹1.00</strong></div>",
  "1781": "        <div class=\"receipt-row\"><span>License Token:</span><code style=\"color:#2563eb; font-weight:700;\">YPG-SML-2026-LIVE</code></div>",
  "1782": "      </div>",
  "1783": "",
  "1784": "      <button type=\"button\" class=\"btn-buy-primary\" onclick=\"closeCelebrationModal()\" style=\"padding:0.75rem 1.25rem; font-size:0.95rem;\">",
  "1785": "        Done &amp; Close Receipt",
  "1786": "      </button>",
  "1787": "    </div>",
  "1788": "  </div>",
  "1789": "",
  "1790": "  <!-- JAVASCRIPT: INTERACTIVE CONTROLLER & YOUPI CHECKOUT EMBED -->",
  "1791": "  <script>",
  "1792": "    // --- STATE MANAGEMENT ---",
  "1793": "    let currentAmount = 1.00;",
  "1794": "    const photos = [",
  "1795": "      {",
  "1796": "        url: '/assets/gateway_pc_checkout.png?v=2',",
  "1797": "        badge: '💻 Desktop 2-Column Checkout',",
  "1798": "        title: 'Desktop 2-Column Checkout',",
  "1799": "        desc: 'Authentic desktop 2-column checkout frame with real-time dynamic QR, clean card at counter, live order summary, and verified merchant branding.'",
  "1800": "      },",
  "1801": "      {",
  "1802": "        url: '/assets/gateway_mobile_checkout.png?v=2',",
  "1803": "        badge: '📱 Mobile Instant Sheet & UPI Intent',",
  "1804": "        title: 'Mobile Instant Sheet & UPI Intent',",
  "1805": "        desc: 'Native fluid mobile checkout bottom sheet with instant UPI app deep-linking (GPay, PhonePe, Paytm, CRED).'",
  "1806": "      },",
  "1807": "      {",
  "1808": "        url: '/assets/gateway_merchant_operations.png?v=2',",
  "1809": "        badge: '📊 Merchant Operations & Live Slots Hub',",
  "1810": "        title: 'Merchant Operations & Live Slots Hub',",
  "1811": "        desc: 'Crisp bright white operations dashboard with real-time slot allocation, floating cashier till dock, and observers status.'",
  "1812": "      },",
  "1813": "      {",
  "1814": "        url: '/assets/gateway_developer_dark_hub.png?v=2',",
  "1815": "        badge: '🌙 Developer Hub (Real Dark Mode)',",
  "1816": "        title: 'Developer Hub (Real Dark Mode)',",
  "1817": "        desc: 'Authentic obsidian real dark mode with multi-service supervisor, live host ports, and aggregate streaming terminal.'",
  "1818": "      },",
  "1819": "      {",
  "1820": "        url: '/assets/gateway_whitelabel_customizer.png?v=2',",
  "1821": "        badge: '🎨 White-Label Customizer & Mockup',",
  "1822": "        title: 'White-Label Customizer & Mockup',",
  "1823": "        desc: 'Live smartphone reflection with instant brand logo, custom color palette, trust seals, and conversion banners.'",
  "1824": "      }",
  "1825": "    ];",
  "1826": "    let currentPhotoIndex = 0;",
  "1827": "",
  "1828": "    // --- GALLERY CONTROLLER ---",
  "1829": "    function switchGalleryPhoto(index, url, title, desc) {",
  "1830": "      currentPhotoIndex = index;",
  "1831": "      const mainImg = document.getElementById('mainGalleryImg');",
  "1832": "      const badgeText = document.getElementById('galleryBadgeText');",
  "1833": "",
  "1834": "      if (mainImg) {",
  "1835": "        mainImg.style.opacity = '0.3';",
  "1836": "        mainImg.src = url;",
  "1837": "        setTimeout(() => { mainImg.style.opacity = '1'; }, 100);",
  "1838": "      }",
  "1839": "      if (badgeText) badgeText.textContent = title;",
  "1840": "",
  "1841": "      // Update thumbnails active state",
  "1842": "      document.querySelectorAll('.thumb-card').forEach((el, i) => {",
  "1843": "        el.classList.toggle('active', i === index);",
  "1844": "      });",
  "1845": "    }",
  "1846": "",
  "1847": "    function openLightbox() {",
  "1848": "      const modal = document.getElementById('lightboxModal');",
  "1849": "      const img = document.getElementById('lightboxImg');",
  "1850": "      if (modal && img) {",
  "1860": "    }",
  "1861": "",
  "1862": "    // --- AMOUNT MODIFIER & BUY BOX ---",
  "1863": "    function selectAmount(amt, chipEl) {",
  "1864": "      currentAmount = Number(amt);",
  "1865": "      updateAmountUI();",
  "1866": "",
  "1867": "      document.querySelectorAll('.chip-btn').forEach(b => b.classList.remove('active'));",
  "1868": "      if (chipEl) chipEl.classList.add('active');",
  "1869": "      const customInput = document.getElementById('customAmountInput');",
  "1870": "      if (customInput) customInput.value = currentAmount.toFixed(2);",
  "1871": "    }",
  "1872": "",
  "1873": "    function handleCustomAmountInput(val) {",
  "1874": "      const num = parseFloat(val);",
  "1875": "      if (!isNaN(num) && num >= 1) {",
  "1876": "        currentAmount = num;",
  "1877": "        updateAmountUI();",
  "1878": "      }",
  "1879": "      // Unset active chips if not exact match",
  "1880": "      document.querySelectorAll('.chip-btn').forEach(b => {",
  "1881": "        const chipVal = parseFloat(b.innerText.replace(/[^0-9.]/g, ''));",
  "1882": "        b.classList.toggle('active', chipVal === currentAmount);",
  "1883": "      });",
  "1884": "    }",
  "1885": "",
  "1886": "    function updateAmountUI() {",
  "1887": "      const formatted = '₹' + currentAmount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });",
  "1888": "      const dispEl = document.getElementById('displayPrice');",
  "1889": "      const btnDisp = document.getElementById('btnAmountDisplay');",
  "1890": "      if (dispEl) dispEl.textContent = formatted;",
  "1891": "      if (btnDisp) btnDisp.textContent = formatted;",
  "1892": "    }",
  "1893": "",
  "1894": "    // --- PURCHASE INITIATION (Using Official Universal YouPI Integration) ---",
  "1895": "    async function startGatewayPurchase() {",
  "1896": "      const btn = document.getElementById('btnInitiateCheckout');",
  "1897": "      const oldHtml = btn.innerHTML;",
  "1898": "      btn.disabled = true;",
  "1899": "      btn.innerHTML = '<span>⏳ Preparing Gateway Session...</span>';",
  "1900": "",
  "1901": "      try {",
  "1902": "        const orderId = `COIN-ORD-${Date.now()}`;",
  "1903": "        btn.setAttribute('data-amount', currentAmount.toFixed(2));",
  "1904": "        btn.setAttribute('data-order-id', orderId);",
  "1905": "",
  "1906": "        // 1. Create order on store backend via YoupiPaymentClient",
  "1907": "        const res = await fetch('/api/checkout', {",
  "1908": "          method: 'POST',",
  "1909": "          headers: { 'Content-Type': 'application/json' },",
  "1910": "          body: JSON.stringify({",
  "1911": "            price: currentAmount,",
  "1912": "            productName: 'YOUPI PG Enterprise Gateway Suite',",
  "1913": "            coins: Math.round(currentAmount)",
  "1914": "          })",
  "1915": "        });",
  "1916": "",
  "1917": "        const data = await res.json();",
  "1918": "        if (!res.ok || !data.checkoutUrl) {",
  "1919": "          alert(data.error || 'Failed to initiate checkout session.');",
  "1920": "          btn.disabled = false;",
  "1921": "          btn.innerHTML = oldHtml;",
  "1922": "          return;",
  "1923": "        }",
  "1924": "",
  "1925": "        // 2. Launch checkout modal using official Youpi.pay() SDK",
  "1926": "        window.Youpi.pay({",
  "1927": "          checkoutUrl: data.checkoutUrl,",
  "1928": "          order_id: data.orderId,",
  "1929": "          amount: currentAmount,",
  "1930": "          currency: 'INR',",
  "1931": "          name: 'YOUPI Store',",
  "1932": "          description: 'YOUPI PG Enterprise Suite Top-Up',",
  "1933": "          successUrl: `/order-success?order_id=${encodeURIComponent(data.orderId)}&amount=${encodeURIComponent(currentAmount)}`,",
  "1934": "          failedUrl: `/order-failed?order_id=${encodeURIComponent(data.orderId)}`,",
  "1935": "          suspiciousUrl: `/order-suspicious?order_id=${encodeURIComponent(data.orderId)}`,",
  "1936": "          expiredUrl: `/order-expired?order_id=${encodeURIComponent(data.orderId)}`,",
  "1937": "          cancelledUrl: `/order-cancelled?order_id=${encodeURIComponent(data.orderId)}`,",
  "1938": "          handler: function(paymentResponse) {",
  "1939": "            btn.disabled = false;",
  "1940": "            btn.innerHTML = oldHtml;",
  "1941": "            showCelebrationModal(data.orderId, paymentResponse.utr || paymentResponse.paymentId || data.paymentId, currentAmount);",
  "1942": "          },",
  "1943": "          onClose: function() {",
  "1944": "            btn.disabled = false;",
  "1945": "            btn.innerHTML = oldHtml;",
  "1946": "          }",
  "1947": "        });",
  "1948": "      } catch (err) {",
  "1949": "        alert('Error launching YOUPI Gateway: ' + err.message);",
  "1950": "        btn.disabled = false;",
  "1951": "        btn.innerHTML = oldHtml;",
  "1952": "      }",
  "1953": "    }",
  "1954": "",
  "1955": "    // --- OFFICIAL BROWSER PAYMENT EVENT LISTENERS ---",
  "1956": "    window.addEventListener('youpi:payment:success', function(e) {",
  "1957": "      console.log('[YOUPI PG Event] youpi:payment:success', e.detail);",
  "1958": "      const res = e.detail;",
  "1959": "      fetch('/api/verify-payment', {",
  "1960": "        method: 'POST',",
  "1961": "        headers: { 'Content-Type': 'application/json' },",
  "1962": "        body: JSON.stringify({",
  "1963": "          orderId: res.order_id,",
  "1964": "          amount: res.amount_received || currentAmount,",
  "1965": "          coins: Math.round(res.amount_received || currentAmount),",
  "1966": "          paymentId: res.utr || res.order_id",
  "1967": "        })",
  "1968": "      }).then(r => r.json()).then(d => {",
  "1969": "        if (d.coins !== undefined) {",
  "1970": "          const el = document.getElementById('topWalletBalance');",
  "1971": "          if (el) el.textContent = d.coins;",
  "1972": "        }",
  "1973": "      }).catch(() => {});",
  "1974": "    });",
  "1975": "",
  "1976": "    window.addEventListener('youpi:payment:failed', function(e) {",
  "1977": "      console.warn('[YOUPI PG Event] youpi:payment:failed', e.detail);",
  "1978": "    });",
  "1979": "",
  "1980": "    window.addEventListener('youpi:payment:suspicious', function(e) {",
  "1981": "      console.warn('[YOUPI PG Event] youpi:payment:suspicious', e.detail);",
  "1982": "    });",
  "1983": "",
  "1984": "    window.addEventListener('youpi:payment:expired', function(e) {",
  "1985": "      console.warn('[YOUPI PG Event] youpi:payment:expired', e.detail);",
  "1986": "    });",
  "1987": "",
  "1988": "    window.addEventListener('youpi:payment:cancelled', function(e) {",
  "1989": "      console.log('[YOUPI PG Event] youpi:payment:cancelled', e.detail);",
  "1990": "    });",
  "1991": "",
  "1992": "    function showCelebrationModal(orderId, paymentId, amount) {",
  "1993": "      const modal = document.getElementById('celebrationModal');",
  "1994": "      const elOrder = document.getElementById('receiptOrderId');",
  "1995": "      const elPayment = document.getElementById('receiptPaymentId');",
  "1996": "      const elAmount = document.getElementById('receiptAmountPaid');",
  "1997": "",
  "1998": "      if (elOrder) elOrder.textContent = orderId || 'YOUPI-ORD-LIVE';",
  "1999": "      if (elPayment) elPayment.textContent = paymentId || 'pay_verified';",
  "2000": "      if (elAmount) elAmount.textContent = '₹' + Number(amount).toFixed(2);",
  "2001": "      if (modal) modal.classList.add('active');",
  "2002": "    }",
  "2003": "",
  "2004": "    function closeCelebrationModal() {",
  "2005": "      const modal = document.getElementById('celebrationModal');",
  "2006": "      if (modal) modal.classList.remove('active');",
  "2007": "    }",
  "2008": "",
  "2009": "    // Keydown ESC to close modals",
  "2010": "    window.addEventListener('keydown', (e) => {",
  "2011": "      if (e.key === 'Escape') {",
  "2012": "        closeLightbox();",
  "2013": "        closeCelebrationModal();",
  "2014": "      }",
  "2015": "    });",
  "2016": "",
  "2017": "    // Initialize UI on load",
  "2018": "    updateAmountUI();",
  "2019": "  </script>",
  "2020": "</body>",
  "2021": "</html>",
  "2022": ""
}