{"schemaVersion":"2.0.0","defaultLanguage":"en-US","languages":["en-US"],"launchScreenId":"393b7413-a1bd-469a-a858-bee60fbb8eec","screens":{"033690c6-8f3c-492e-9075-0793019edf0c":{"tags":[],"content":{"offlineFirst":true,"header":{},"canvas":{"background":{"content":{"color":"#1a1a1a"},"kind":"solid"},"webViewBackgroundColor":"#1a1a1a","insets":{"start":16,"bottom":0,"end":16,"top":0}},"actionBar":{},"embed":{"childSections":[{"order":0,"kind":"Media","layout":{"flexGrow":1,"scrollable":false,"flexShrink":1,"heightKind":"auto"},"id":"section-moe87nw0-z7r8h","mediaContent":{"kind":"Image","appearance":{},"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png"}}}}},"label":"frame_2131331307"},{"layout":{"heightKind":"auto","scrollable":false,"flexShrink":1,"flexGrow":1},"kind":"Media","order":1,"label":"frame_2131331309","mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png"}}}},"appearance":{}},"id":"section-moe8gqhb-nk7tv"},{"order":2,"layout":{"heightKind":"auto","flexGrow":0,"flexShrink":1,"scrollable":false},"kind":"SingleSelectionList","id":"section-mpr8kj62-84aw6","label":"Single Selection","optionsListContent":{"itemLayout":"Title","cellHeightFromCellWidth":null,"items":[{"action":{"edges":[],"kind":"next"},"title":{"appearance":{},"translations":{"en-US":"Beginner"}},"variableValue":"Beginner"},{"title":{"translations":{"en-US":"Intermediate"},"appearance":{}},"action":{"edges":[],"kind":"next"},"variableValue":"Intermediate"},{"action":{"kind":"next","edges":[]},"variableValue":"Competent","title":{"appearance":{},"translations":{"en-US":"Competent"}}},{"variableValue":"Advanced","title":{"translations":{"en-US":"Advanced"},"kind":"static"},"weight":4,"action":{"kind":"advance","edges":[]},"subtitle":{"kind":"static","translations":{"en-US":""}}},{"action":{"kind":"advance","edges":[]},"subtitle":{"translations":{"en-US":""},"kind":"static"},"title":{"translations":{"en-US":"Expert"},"kind":"static"},"variableValue":"Expert","weight":5}],"appearance":{"insets":{"top":12,"end":12,"bottom":12,"start":12}},"selectionMode":"one"}}],"callback":{"action":{"kind":"advance","edges":[{"transitionKind":"push","nextScreenId":"3ea17d81-e32d-4b43-817c-b623030af0ca","conditions":[{"key":"poker_level","value":"368a5f97-e0ee-4a07-8f4b-cdf671a773ea,83f4955b-675b-4f4c-b550-e61f6f11df2c,5ac6ae35-0c0b-4b67-a88c-9e676835c859,594c6a78-859e-4094-a8c2-2fe900b3f20a,f1075881-00f7-43d3-8f0c-9e95adb873cb,13133250-0567-4958-9917-83dce9a68d99","operator":"in"}]},{"conditions":[],"transitionKind":"push","nextScreenId":"5a7d085b-0587-4eee-9689-88135db2836b"}]}},"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Poker Level</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000000;\n      overflow: hidden;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    /* --- Nav Bar --- */\n    .nav-bar {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      padding: 14px 24px 0 16px;\n      gap: 16px;\n    }\n\n    .back-btn {\n      width: 44px;\n      height: 44px;\n      border-radius: 50%;\n      border: 1px solid rgba(255, 255, 255, 0.12);\n      background: rgba(255, 255, 255, 0.05);\n      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: rgba(255, 255, 255, 0.7);\n    }\n    .back-btn svg { width: 20px; height: 20px; }\n\n    .progress-bar-bg {\n      flex: 1;\n      height: 8px;\n      background-color: #222327;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      width: 13.75%;\n      background-color: #526DF2;\n      border-radius: 4px;\n    }\n\n    /* --- Header --- */\n    .header {\n      flex-shrink: 0;\n      padding: 32px 30px 0;\n    }\n\n    #title_label {\n      margin: 0 0 12px;\n      font-size: 22px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 28px;\n      letter-spacing: -0.26px;\n    }\n\n    #subtitle_label {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 400;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n\n    /* --- Options List --- */\n    .options-list {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 32px 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      scrollbar-width: none;\n    }\n    .options-list::-webkit-scrollbar { display: none; }\n\n    .option-card {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 18px 16px;\n      border-radius: 20px;\n      background: #131416;\n      border: 2px solid #222327;\n      box-shadow: 0px 3px 0px 0px #222327;\n      cursor: pointer;\n      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;\n    }\n\n    .option-card.selected {\n      border-color: #526DF2;\n      background: #1A1E4C;\n      box-shadow: 0px 3px 0px 0px #526DF2;\n    }\n\n    .option-text {\n      flex: 1;\n    }\n\n    .option-title {\n      font-size: 17px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 22px;\n      letter-spacing: -0.43px;\n      margin-bottom: 4px;\n    }\n\n    .option-desc {\n      font-size: 15px;\n      font-weight: 400;\n      color: #A4A7AE;\n      line-height: 20px;\n      letter-spacing: -0.23px;\n    }\n\n    /* Radio indicator */\n    .option-radio {\n      flex-shrink: 0;\n      width: 20px;\n      height: 20px;\n      border-radius: 10px;\n      border: 1px solid #222327;\n      background: #000000;\n      transition: border-color 0.15s, background 0.15s;\n      position: relative;\n    }\n\n    .option-card.selected .option-radio {\n      border-color: #526DF2;\n      background: #526DF2;\n    }\n\n    .option-card.selected .option-radio::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      background: #FFFFFF;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      flex-shrink: 0;\n      padding: 20px 16px 24px;\n    }\n\n    #action_button {\n      width: 100%;\n      padding: 14px 20px;\n      box-sizing: border-box;\n      background-color: #F5F5F5;\n      color: #000000;\n      border: none;\n      border-radius: 16px;\n      font-family: 'Inter', sans-serif;\n      font-size: 18px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);\n    }\n    #action_button:hover:not(:disabled) { opacity: 0.9; }\n    #action_button:disabled {\n      opacity: 0.3;\n      cursor: default;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <!-- Nav bar -->\n    <div class=\"nav-bar\">\n      <button class=\"back-btn\" onclick=\"handleBack()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n      <div class=\"progress-bar-bg\">\n        <div class=\"progress-bar-fill\"></div>\n      </div>\n    </div>\n\n    <!-- Header -->\n    <div class=\"header\">\n      <h1 id=\"title_label\">What is your current poker level?</h1>\n      <p id=\"subtitle_label\">No need to overthink it. The trainer adapts as you progress, at any level</p>\n    </div>\n\n    <!-- Options -->\n    <div class=\"options-list\">\n      <div class=\"option-card\" data-label=\"Beginner\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Beginner</div>\n          <div class=\"option-desc\">I'm still learning the rules and hand rankings</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-label=\"Intermediate\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Intermediate</div>\n          <div class=\"option-desc\">I can play and understand a little strategy</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-label=\"Competent\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Competent</div>\n          <div class=\"option-desc\">I use position and basic ranges to make my decisions.</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-label=\"Advanced\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Advanced</div>\n          <div class=\"option-desc\">I play a range-based game and understand board textures</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-label=\"Expert\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Expert</div>\n          <div class=\"option-desc\">I've studied in-depth GTO and could play pro</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"footer\">\n      <button id=\"action_button\" disabled onclick=\"handleContinue()\">Continue</button>\n    </div>\n\n  </div>\n\n  <script>\n    // ========================================================================\n    // --- ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n    // ========================================================================\n\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: 'en',\n      screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => {\n      console.log('leaveCustomScreen:', args);\n    };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => {\n            port.postMessage({ eventName: 'LeaveCustomScreen', args }, []);\n          };\n          window.backScreen = () => {\n            port.postMessage({ eventName: 'BackScreen', args: null }, []);\n          };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!isOnboardingOnline) {\n          console.log('Running in standalone mode');\n          initScreen();\n        }\n      }, 100);\n    });\n\n    // ========================================================================\n    // --- SCREEN LOGIC ---\n    // ========================================================================\n\n    const DATA_KEY = 'poker_level';\n    let selectedOptionId = null;\n    let labelToOptionId = {};\n    let optionIdToLabel = {};\n\n    // -- Haptics --\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) {\n            return currentWindow.segmentlySDK;\n          }\n          if (currentWindow === currentWindow.parent) {\n            break;\n          }\n          currentWindow = currentWindow.parent;\n        } catch (e) {\n          console.warn('Cross-origin access blocked at level', i);\n          break;\n        }\n      }\n      return null;\n    }\n\n    function handleBack() {\n      window.backScreen();\n    }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n      console.log('Screen Initialized');\n\n      const sdk = getSegmentlySDK();\n\n      // Build label <-> option-id maps from the variable definition.\n      // The enum variable stores the option UUID, not the label, so we need\n      // to translate when reading/writing.\n      if (sdk && sdk.getVariableDefinition) {\n        const def = sdk.getVariableDefinition(DATA_KEY);\n        if (def && Array.isArray(def.options)) {\n          def.options.forEach(opt => {\n            labelToOptionId[opt.label] = opt.id;\n            optionIdToLabel[opt.id] = opt.label;\n          });\n        }\n      }\n\n      // Restore saved selection\n      let saved = sdk ? sdk.getVariable(DATA_KEY) : null;\n      if (!saved) {\n        const inputs = window.onboardingOnlineCustomScreenData.inputs;\n        if (inputs && inputs[DATA_KEY]) {\n          const inputData = inputs[DATA_KEY];\n          saved = (typeof inputData === 'object' && 'value' in inputData)\n            ? inputData.value\n            : inputData;\n        }\n      }\n      if (saved) {\n        const savedLabel = optionIdToLabel[saved] || saved;\n        const card = document.querySelector(`.option-card[data-label=\"${savedLabel}\"]`);\n        if (card) {\n          card.classList.add('selected');\n          selectedOptionId = labelToOptionId[savedLabel] || saved;\n          document.getElementById('action_button').disabled = false;\n        }\n      }\n\n      updateLabels();\n    }\n\n    function selectOption(card) {\n      haptic('selection');\n      document.querySelectorAll('.option-card').forEach(c => c.classList.remove('selected'));\n      card.classList.add('selected');\n      const label = card.dataset.label;\n      selectedOptionId = labelToOptionId[label] || label;\n      document.getElementById('action_button').disabled = false;\n    }\n\n    function handleContinue() {\n      if (!selectedOptionId) return;\n      haptic('medium');\n\n      const sdk = getSegmentlySDK();\n      if (sdk) {\n        sdk.trackEvent('UserUpdatedValue', {\n          screenName: 'poker-level',\n          answer: optionIdToLabel[selectedOptionId] || selectedOptionId\n        });\n      }\n      if (sdk && sdk.setVariable) {\n        sdk.setVariable(DATA_KEY, selectedOptionId);\n      }\n      window.leaveCustomScreen({\n        [DATA_KEY]: selectedOptionId\n      });\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language]) {\n        titleEl.textContent = labels.title_label.value.l10n[language];\n      }\n\n      const subtitleEl = document.getElementById('subtitle_label');\n      if (subtitleEl && labels.subtitle_label?.value?.l10n?.[language]) {\n        subtitleEl.textContent = labels.subtitle_label.value.l10n[language];\n      }\n\n      const btnEl = document.getElementById('action_button');\n      if (btnEl && labels.button_text?.value?.l10n?.[language]) {\n        btnEl.textContent = labels.button_text.value.l10n[language];\n      }\n    }\n  </script>\n</body>\n</html>\n"},"systemPrompt":null,"countdown":null,"animated":true},"name":"poker-level","position":{"x":2000,"y":1088},"screenType":"WebEmbed","id":"033690c6-8f3c-492e-9075-0793019edf0c"},"094b2427-55d5-4948-bc53-f37eb7d524c2":{"id":"094b2427-55d5-4948-bc53-f37eb7d524c2","screenType":"WebEmbed","position":{"y":1104,"x":6650.666666666667},"content":{"animated":true,"countdown":null,"systemPrompt":null,"embed":{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Stats</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000000;\n      overflow: hidden;\n      position: relative;\n    }\n    /* Soft blue glow centered behind the chart (Figma \"Ellipse 6\") */\n    .screen-container::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background:\n        radial-gradient(ellipse 90% 55% at 50% 50%,\n                        rgba(82, 111, 242, 0.275) 0%,\n                        rgba(82, 111, 242, 0.09)  40%,\n                        rgba(82, 111, 242, 0)     70%);\n      pointer-events: none;\n      z-index: 0;\n    }\n    /* Animated chart sits behind all content */\n    .chart-bg {\n      position: absolute;\n      inset: 0;\n      z-index: 0;\n      pointer-events: none;\n      display: flex;\n      align-items: stretch;\n      justify-content: stretch;\n    }\n    .chart-bg svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    /* --- Stats header --- */\n    .stats-header {\n      position: relative;\n      z-index: 2;\n      padding: 70px 0 0 32px;\n      flex-shrink: 0;\n    }\n\n    .percentage {\n      font-size: 64px;\n      font-weight: 700;\n      color: #FFFFFF;\n      line-height: 72px;\n      letter-spacing: -3px;\n      margin: 0;\n    }\n\n    .percentage-desc {\n      margin: 16px 0 0;\n      font-size: 17px;\n      font-weight: 500;\n      color: #717680;\n      line-height: 22px;\n      letter-spacing: -0.43px;\n    }\n\n    /* --- Spacer --- */\n    .curve-area {\n      flex: 1;\n      min-height: 0;\n    }\n\n    /* --- Bottom Text --- */\n    .bottom-section {\n      flex-shrink: 0;\n      padding: 0 30px;\n      text-align: center;\n      position: relative;\n      z-index: 2;\n    }\n\n    #title_label {\n      margin: 0 0 12px;\n      font-size: 28px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 34px;\n      letter-spacing: -0.5px;\n    }\n\n    #subtitle_label {\n      margin: 0 0 12px;\n      font-size: 20px;\n      font-weight: 500;\n      color: #727785;\n      line-height: 25px;\n      letter-spacing: -0.45px;\n    }\n\n    .footnote {\n      margin: 0;\n      font-size: 12px;\n      font-weight: 400;\n      color: #727785;\n      line-height: 16px;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      flex-shrink: 0;\n      padding: 16px 24px 24px;\n      position: relative;\n      z-index: 2;\n    }\n\n    #action_button {\n      width: 100%;\n      padding: 14px 20px;\n      box-sizing: border-box;\n      background-color: #F5F5F5;\n      color: #000000;\n      border: none;\n      border-radius: 16px;\n      font-family: 'Inter', sans-serif;\n      font-size: 18px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);\n    }\n    #action_button:hover { opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <!-- Animated chart (Figma Vector 1 brushstroke) -->\n    <div class=\"chart-bg\">\n      <svg viewBox=\"0 0 444 426\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n        <defs>\n          <linearGradient id=\"curveGrad\" gradientUnits=\"userSpaceOnUse\"\n                          x1=\"367\" y1=\"130.954\" x2=\"185.36\" y2=\"371.527\">\n            <stop offset=\"0\"   stop-color=\"#000000\"/>\n            <stop offset=\"0.5\" stop-color=\"#526DF2\"/>\n            <stop offset=\"1\"   stop-color=\"#000000\"/>\n          </linearGradient>\n          <filter id=\"curveHalo\" x=\"-30%\" y=\"-30%\" width=\"160%\" height=\"160%\">\n            <feGaussianBlur stdDeviation=\"6\"/>\n          </filter>\n          <!-- Mask: a thick stroked centerline that follows the brushstroke's path.\n               Animating its stroke-dashoffset reveals the brushstroke EXACTLY along its own curve. -->\n          <mask id=\"curveReveal\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"444\" height=\"426\">\n            <!-- Centerline derived by averaging outer & inner edges of the Figma path\n                 at each major control point: (395,45) (393,70) (383,131) (301,284)\n                 (140,362) (75,372) (49,373) — guarantees the reveal follows the\n                 brushstroke's true middle, not a top-down sweep. -->\n            <path id=\"curveCenterline\"\n                  d=\"M 49 373 C 70 371, 100 366, 140 362 C 200 358, 240 330, 301 284 C 340 250, 360 200, 383 132 C 391 110, 394 70, 395 45\"\n                  fill=\"none\" stroke=\"#FFFFFF\" stroke-width=\"36\" stroke-linecap=\"round\"/>\n          </mask>\n        </defs>\n\n        <g mask=\"url(#curveReveal)\">\n          <!-- Soft halo behind the brushstroke (tighter blur → shape stays strict) -->\n          <path d=\"M394.986 37C399.405 36.9925 402.992 40.5475 403 44.9402L395 44.9538C403 44.9402 403 44.9434 403 44.947V45.0887C403 45.1744 402.999 45.296 402.998 45.4528C402.995 45.7669 402.99 46.2224 402.979 46.8121C402.956 47.9913 402.912 49.709 402.821 51.9133C402.64 56.3212 402.276 62.6796 401.542 70.5714C400.075 86.3456 397.128 108.3 391.198 133.091C379.375 182.522 355.505 244.02 307.073 289.945C258.685 335.83 193.886 358.47 141.834 369.712C115.716 375.353 92.5821 378.172 75.9639 379.582C67.6503 380.288 60.9545 380.643 56.3164 380.82C53.9973 380.909 52.1915 380.954 50.9541 380.977C50.3353 380.988 49.8582 380.994 49.5303 380.997C49.3666 380.999 49.24 381 49.1514 381H49.0059C49.0026 380.996 49 380.817 49 373.046V381C44.5817 381 41 377.439 41 373.046C41 368.654 44.5807 365.094 48.998 365.092H49.0801C49.1448 365.092 49.2474 365.092 49.3867 365.091C49.6656 365.088 50.092 365.082 50.6592 365.072C51.7943 365.051 53.4931 365.009 55.7002 364.925C60.115 364.755 66.5614 364.416 74.6035 363.733C90.697 362.367 113.131 359.633 138.438 354.167C189.235 343.195 250.713 321.406 296.03 278.434C341.304 235.504 364.158 177.384 375.633 129.411C381.352 105.5 384.197 84.306 385.61 69.1073C386.317 61.5128 386.664 55.4278 386.835 51.2647C386.92 49.1838 386.961 47.5839 386.981 46.5169C386.991 45.9836 386.996 45.5831 386.998 45.3227C386.999 45.1925 387 45.0967 387 45.0373V44.9635C386.995 40.5725 390.569 37.0075 394.986 37Z\"\n                fill=\"url(#curveGrad)\" filter=\"url(#curveHalo)\" opacity=\"0.6\"/>\n          <!-- Crisp brushstroke (the strict shape) -->\n          <path d=\"M394.986 37C399.405 36.9925 402.992 40.5475 403 44.9402L395 44.9538C403 44.9402 403 44.9434 403 44.947V45.0887C403 45.1744 402.999 45.296 402.998 45.4528C402.995 45.7669 402.99 46.2224 402.979 46.8121C402.956 47.9913 402.912 49.709 402.821 51.9133C402.64 56.3212 402.276 62.6796 401.542 70.5714C400.075 86.3456 397.128 108.3 391.198 133.091C379.375 182.522 355.505 244.02 307.073 289.945C258.685 335.83 193.886 358.47 141.834 369.712C115.716 375.353 92.5821 378.172 75.9639 379.582C67.6503 380.288 60.9545 380.643 56.3164 380.82C53.9973 380.909 52.1915 380.954 50.9541 380.977C50.3353 380.988 49.8582 380.994 49.5303 380.997C49.3666 380.999 49.24 381 49.1514 381H49.0059C49.0026 380.996 49 380.817 49 373.046V381C44.5817 381 41 377.439 41 373.046C41 368.654 44.5807 365.094 48.998 365.092H49.0801C49.1448 365.092 49.2474 365.092 49.3867 365.091C49.6656 365.088 50.092 365.082 50.6592 365.072C51.7943 365.051 53.4931 365.009 55.7002 364.925C60.115 364.755 66.5614 364.416 74.6035 363.733C90.697 362.367 113.131 359.633 138.438 354.167C189.235 343.195 250.713 321.406 296.03 278.434C341.304 235.504 364.158 177.384 375.633 129.411C381.352 105.5 384.197 84.306 385.61 69.1073C386.317 61.5128 386.664 55.4278 386.835 51.2647C386.92 49.1838 386.961 47.5839 386.981 46.5169C386.991 45.9836 386.996 45.5831 386.998 45.3227C386.999 45.1925 387 45.0967 387 45.0373V44.9635C386.995 40.5725 390.569 37.0075 394.986 37Z\"\n                fill=\"url(#curveGrad)\"/>\n        </g>\n\n        <!-- Featured icon — center-origin so transform=\"translate(x,y)\" places its center on the path -->\n        <g id=\"curveIcon\" opacity=\"0\">\n          <image href=\"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777487589800_featured-icon/origin.png\"\n                 x=\"-32\" y=\"-32\" width=\"64\" height=\"64\"\n                 preserveAspectRatio=\"xMidYMid meet\"/>\n        </g>\n      </svg>\n    </div>\n\n    <!-- Stats text -->\n    <div class=\"stats-header\">\n      <p class=\"percentage\" id=\"percentage\">0%</p>\n      <p class=\"percentage-desc\" id=\"percentage_desc\">Of players increase <br>their Win Rate in 2 Weeks*</p>\n    </div>\n\n    <!-- Spacer -->\n    <div class=\"curve-area\"></div>\n\n    <!-- Bottom text -->\n    <div class=\"bottom-section\">\n      <h1 id=\"title_label\">Winners train.</h1>\n      <p id=\"subtitle_label\">Everyone else guesses.</p>\n      <p class=\"footnote\" id=\"footnote\">*based on internal user surveys</p>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"footer\">\n      <button id=\"action_button\" onclick=\"handleContinue()\">Continue</button>\n    </div>\n\n  </div>\n\n  <script>\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {}, labels: {}, userData: {}, customData: {},\n      webOnboarding: {}, incomeUserData: {}, language: 'en', screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => { console.log('leaveCustomScreen:', args); };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => { port.postMessage({ eventName: 'LeaveCustomScreen', args }, []); };\n          window.backScreen = () => { port.postMessage({ eventName: 'BackScreen', args: null }, []); };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => { if (!isOnboardingOnline) initScreen(); }, 100);\n    });\n\n    // -- Haptics --\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) return currentWindow.segmentlySDK;\n          if (currentWindow === currentWindow.parent) break;\n          currentWindow = currentWindow.parent;\n        } catch (e) { break; }\n      }\n      return null;\n    }\n\n    function handleBack() { window.backScreen(); }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n\n      updateLabels();\n      startAnimation();\n    }\n\n    function startAnimation() {\n      const duration = 1800;\n      const targetPercent = 91;\n      const percentEl = document.getElementById('percentage');\n      const centerline = document.getElementById('curveCenterline');\n      const icon = document.getElementById('curveIcon');\n      const startTime = performance.now();\n\n      // Pre-measure the centerline so we can drive its dashoffset from the same RAF\n      let pathLen = 0;\n      if (centerline) {\n        pathLen = centerline.getTotalLength();\n        centerline.style.strokeDasharray  = pathLen;\n        centerline.style.strokeDashoffset = pathLen;\n      }\n\n      // Icon rides at the leading edge but parks 15% before the path's tip\n      const iconMaxFraction = 0.85;\n      let iconVisible = false;\n\n      function updateFrame(now) {\n        const elapsed = now - startTime;\n        const progress = Math.min(elapsed / duration, 1);\n        const eased = 1 - Math.pow(1 - progress, 3); // easeOutCubic — same curve for both\n\n        // Counter\n        const current = Math.round(eased * targetPercent);\n        percentEl.textContent = current + '%';\n\n        // Brushstroke reveal — uses the same eased value, so they're tied together\n        if (centerline && pathLen) {\n          centerline.style.strokeDashoffset = pathLen * (1 - eased);\n\n          // Icon rides along the centerline at leading-edge pace, capped at iconMaxFraction\n          if (icon) {\n            const iconAt = Math.min(eased, iconMaxFraction) * pathLen;\n            if (iconAt > 0) {\n              const p = centerline.getPointAtLength(iconAt);\n              icon.setAttribute('transform', `translate(${p.x.toFixed(2)},${p.y.toFixed(2)})`);\n              if (!iconVisible) {\n                iconVisible = true;\n                icon.style.transition = 'opacity 250ms ease-out';\n                icon.style.opacity = '1';\n                haptic('selection');\n              }\n            }\n          }\n        }\n\n        if (progress < 1) {\n          requestAnimationFrame(updateFrame);\n        } else {\n          percentEl.textContent = targetPercent + '%';\n          haptic('medium');\n        }\n      }\n\n      requestAnimationFrame(updateFrame);\n    }\n\n    function handleContinue() {\n      haptic('medium');\n      const sdk = getSegmentlySDK();\n      if (sdk) sdk.trackEvent('UserContinuedOnboarding', { screenName: 'stats' });\n      if (sdk && sdk.setVariable) sdk.setVariable('action', 'continue');\n      window.leaveCustomScreen({ action: 'continue' });\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language])\n        titleEl.innerHTML = labels.title_label.value.l10n[language];\n\n      const subtitleEl = document.getElementById('subtitle_label');\n      if (subtitleEl && labels.subtitle_label?.value?.l10n?.[language])\n        subtitleEl.textContent = labels.subtitle_label.value.l10n[language];\n\n      const btnEl = document.getElementById('action_button');\n      if (btnEl && labels.button_text?.value?.l10n?.[language])\n        btnEl.textContent = labels.button_text.value.l10n[language];\n    }\n  </script>\n</body>\n</html>\n","childSections":[{"label":"frame_2131331307","id":"section-moe87nw0-z7r8h","mediaContent":{"appearance":{},"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777487589800_featured-icon/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777487589800_featured-icon/small.png"}}}},"kind":"Image"},"layout":{"scrollable":false,"flexShrink":1,"flexGrow":1,"heightKind":"auto"},"kind":"Media","order":0},{"layout":{"flexGrow":1,"scrollable":false,"flexShrink":1,"heightKind":"auto"},"kind":"Media","order":1,"label":"frame_2131331309","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png"}}}},"appearance":{},"kind":"Image"},"id":"section-moe8gqhb-nk7tv"},{"order":2,"layout":{"scrollable":false,"flexGrow":1,"flexShrink":1,"heightKind":"auto"},"kind":"Media","mediaContent":{"kind":"Image","appearance":{},"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115572624_1-stats-background/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115572624_1-stats-background/origin.png"}}}}},"id":"section-moe8qa2a-3u5xz","label":"1-stats-background"},{"label":"Media (image / video)","mediaContent":{"appearance":{},"content":{"image":{"translations":{"en-US":{"original":"https://dev-api.segmently.ai/assets/onboardings/global-themes/a23df18f-281d-4d01-ae67-3822a6bc7e29/images/origin/en-US_1769515244797_1738462175991-aacva33.png"}}}},"kind":"Image"},"id":"section-moke7gh4-5ve21","kind":"Media","layout":{"heightKind":"auto","scrollable":false,"flexGrow":1,"flexShrink":1},"order":3}],"callback":{"action":{"kind":"advance","edges":[{"nextScreenId":"915d218e-c2a1-4c79-89b5-c8c5854f63ca","conditions":[],"transitionKind":"push"}]}}},"actionBar":{},"canvas":{"background":{"content":{"color":"#1a1a1a"},"kind":"solid"},"webViewBackgroundColor":"#1a1a1a","insets":{"bottom":0,"end":16,"start":16,"top":0}},"offlineFirst":true,"header":{}},"name":"winners-chart","tags":[]},"094f5413-8220-454f-b6e5-7256e4c5b75a":{"id":"094f5413-8220-454f-b6e5-7256e4c5b75a","tags":[],"name":"postflop-decisions-beginner","content":{"canvas":{"webViewBackgroundColor":"#1a1a1a","insets":{"bottom":0,"end":16,"start":16,"top":0},"background":{"kind":"solid","content":{"color":"#1a1a1a"}}},"offlineFirst":true,"header":{},"actionBar":{},"systemPrompt":null,"embed":{"childSections":[{"kind":"Media","layout":{"heightKind":"auto","flexGrow":1,"flexShrink":1,"scrollable":false},"order":0,"label":"frame_2131331307","id":"section-moe87nw0-z7r8h","mediaContent":{"appearance":{},"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png"}}}},"kind":"Image"}},{"label":"frame_2131331309","mediaContent":{"kind":"Image","appearance":{},"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png"}}}}},"id":"section-moe8gqhb-nk7tv","layout":{"flexGrow":1,"scrollable":false,"flexShrink":1,"heightKind":"auto"},"kind":"Media","order":1}],"callback":{"action":{"edges":[{"nextScreenId":"79a3d60a-4c07-4870-a913-cfde14ca9ce7","transitionKind":"push","conditions":[]}],"kind":"advance"}},"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Postflop Decision</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000000;\n      overflow: hidden;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    .nav-bar {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      padding: 14px 24px 0 16px;\n      gap: 16px;\n    }\n\n    .back-btn {\n      width: 44px;\n      height: 44px;\n      border-radius: 50%;\n      border: 1px solid rgba(255, 255, 255, 0.12);\n      background: rgba(255, 255, 255, 0.05);\n      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: rgba(255, 255, 255, 0.7);\n    }\n    .back-btn svg { width: 20px; height: 20px; }\n\n    .progress-bar-bg {\n      flex: 1;\n      height: 8px;\n      background-color: #222327;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      width: 76%;\n      background-color: #526DF2;\n      border-radius: 4px;\n    }\n\n    .header {\n      flex-shrink: 0;\n      padding: 32px 30px 0;\n    }\n\n    #title_label {\n      margin: 0;\n      font-size: 22px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 28px;\n      letter-spacing: -0.26px;\n    }\n\n    .options-list {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 32px 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      scrollbar-width: none;\n    }\n    .options-list::-webkit-scrollbar { display: none; }\n\n    .option-card {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 18px 16px;\n      border-radius: 20px;\n      background: #131416;\n      border: 2px solid #222327;\n      box-shadow: 0px 3px 0px 0px #222327;\n      cursor: pointer;\n      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;\n    }\n\n    .option-card.selected {\n      border-color: #526DF2;\n      background: #1A1E4C;\n      box-shadow: 0px 3px 0px 0px #526DF2;\n    }\n\n    .option-text { flex: 1; }\n\n    .option-title {\n      font-size: 17px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 22px;\n      letter-spacing: -0.43px;\n      margin-bottom: 4px;\n    }\n\n    .option-desc {\n      font-size: 13.5px;\n      font-weight: 400;\n      color: #A4A7AE;\n      line-height: 20px;\n      letter-spacing: -0.23px;\n    }\n\n    .option-radio {\n      flex-shrink: 0;\n      width: 20px;\n      height: 20px;\n      border-radius: 10px;\n      border: 1px solid #222327;\n      background: #000000;\n      transition: border-color 0.15s, background 0.15s;\n      position: relative;\n    }\n\n    .option-card.selected .option-radio {\n      border-color: #526DF2;\n      background: #526DF2;\n    }\n\n    .option-card.selected .option-radio::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      background: #FFFFFF;\n    }\n\n    .footer-hint {\n      flex-shrink: 0;\n      text-align: center;\n      margin: 0;\n      padding: 8px 24px 0;\n      font-size: 16px;\n      font-weight: 400;\n      font-style: italic;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"nav-bar\">\n      <button class=\"back-btn\" onclick=\"handleBack()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n      <div class=\"progress-bar-bg\">\n        <div class=\"progress-bar-fill\"></div>\n      </div>\n    </div>\n\n    <div class=\"header\">\n      <h1 id=\"title_label\">How do you usually decide what to do after the flop?</h1>\n    </div>\n\n    <div class=\"options-list\">\n      <div class=\"option-card\" data-id=\"NOT_SURE\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Not sure</div>\n          <div class=\"option-desc\">I'm totally new!</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"BY_FEEL\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Mostly by feel</div>\n          <div class=\"option-desc\">I rely on instinct more than analysis</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"SOME_STRUCTURE\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Some structure</div>\n          <div class=\"option-desc\">I consider position and what the board looks like</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"MORE_STRUCTURED\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">More structured</div>\n          <div class=\"option-desc\">I put my opponent on a range</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <p class=\"footer-hint\" id=\"hint_label\">You can adjust later</p>\n    </div>\n\n  </div>\n\n  <script>\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {}, labels: {}, userData: {}, customData: {},\n      webOnboarding: {}, incomeUserData: {}, language: 'en', screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => { console.log('leaveCustomScreen:', args); };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => { port.postMessage({ eventName: 'LeaveCustomScreen', args }, []); };\n          window.backScreen = () => { port.postMessage({ eventName: 'BackScreen', args: null }, []); };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => { if (!isOnboardingOnline) { initScreen(); } }, 100);\n    });\n\n    const DATA_KEY = 'postflop_decision';\n    let selectedId = null;\n\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) return currentWindow.segmentlySDK;\n          if (currentWindow === currentWindow.parent) break;\n          currentWindow = currentWindow.parent;\n        } catch (e) { break; }\n      }\n      return null;\n    }\n\n    function handleBack() { window.backScreen(); }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n\n      const sdk = getSegmentlySDK();\n      let saved = sdk ? sdk.getVariable(DATA_KEY) : null;\n      if (!saved) {\n        const inputs = window.onboardingOnlineCustomScreenData.inputs;\n        if (inputs && inputs[DATA_KEY]) {\n          const inputData = inputs[DATA_KEY];\n          saved = (typeof inputData === 'object' && 'value' in inputData) ? inputData.value : inputData;\n        }\n      }\n      if (saved) {\n        const card = document.querySelector(`.option-card[data-id=\"${saved}\"]`);\n        if (card) { card.classList.add('selected'); selectedId = saved; }\n      }\n\n      updateLabels();\n    }\n\n    function selectOption(card) {\n      haptic('selection');\n      document.querySelectorAll('.option-card').forEach(c => c.classList.remove('selected'));\n      card.classList.add('selected');\n      selectedId = card.dataset.id;\n\n      setTimeout(() => {\n        haptic('medium');\n        const sdk = getSegmentlySDK();\n        if (sdk) sdk.trackEvent('UserUpdatedValue', { screenName: 'postflop_decision', answer: selectedId });\n        if (sdk && sdk.setVariable) sdk.setVariable(DATA_KEY, selectedId);\n        window.leaveCustomScreen({ [DATA_KEY]: selectedId });\n      }, 400);\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language])\n        titleEl.textContent = labels.title_label.value.l10n[language];\n\n      const hintEl = document.getElementById('hint_label');\n      if (hintEl && labels.hint_label?.value?.l10n?.[language])\n        hintEl.textContent = labels.hint_label.value.l10n[language];\n    }\n  </script>\n</body>\n</html>\n"},"animated":true,"countdown":null},"position":{"x":4896,"y":32},"screenType":"WebEmbed"},"095e1827-4fdc-46c1-bd1f-5090a3501e97":{"tags":[],"content":{"canvas":{"webViewBackgroundColor":"#1a1a1a","insets":{"top":0,"start":16,"end":16,"bottom":0},"background":{"content":{"color":"#1a1a1a"},"kind":"solid"}},"header":{},"offlineFirst":true,"actionBar":{},"systemPrompt":null,"embed":{"callback":{"action":{"edges":[{"transitionKind":"push","nextScreenId":"2a924111-073e-449b-8ba1-9dcb05aa6665","conditions":[]}],"kind":"advance"}},"childSections":[{"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png"}}}},"appearance":{}},"id":"section-moe87nw0-z7r8h","label":"frame_2131331307","order":0,"kind":"Media","layout":{"scrollable":false,"flexShrink":1,"flexGrow":1,"heightKind":"auto"}},{"label":"frame_2131331309","mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png"}}}},"appearance":{}},"id":"section-moe8gqhb-nk7tv","layout":{"scrollable":false,"flexShrink":1,"flexGrow":1,"heightKind":"auto"},"kind":"Media","order":1},{"label":"1-stats-background","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115572624_1-stats-background/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115572624_1-stats-background/small.png"}}}},"appearance":{},"kind":"Image"},"id":"section-moe8qa2a-3u5xz","layout":{"scrollable":false,"flexShrink":1,"flexGrow":1,"heightKind":"auto"},"kind":"Media","order":2},{"label":"hero","mediaContent":{"appearance":{},"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115622136_hero/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115622136_hero/small.png"}}}},"kind":"Image"},"id":"section-moe8rbkb-4jjcw","layout":{"heightKind":"auto","flexShrink":1,"flexGrow":1,"scrollable":false},"kind":"Media","order":3},{"mediaContent":{"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115693642_hero-sessions-adapted/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115693642_hero-sessions-adapted/origin.png"}}}},"appearance":{},"kind":"Image"},"id":"section-moe8suth-031ep","label":"hero-sessions-adapted","order":4,"layout":{"heightKind":"auto","flexGrow":1,"flexShrink":1,"scrollable":false},"kind":"Media"},{"order":5,"kind":"Media","layout":{"scrollable":false,"flexShrink":1,"flexGrow":1,"heightKind":"auto"},"mediaContent":{"appearance":{},"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115729103_email-background/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115729103_email-background/origin.png"}}}},"kind":"Image"},"id":"section-moe8tlwx-91z5s","label":"email-background"},{"order":6,"layout":{"flexShrink":1,"flexGrow":1,"scrollable":false,"heightKind":"auto"},"kind":"Media","mediaContent":{"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115848553_cards-hero/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115848553_cards-hero/origin.png"}}}},"appearance":{},"kind":"Image"},"id":"section-moe8w6g7-3bm7l","label":"cards-hero"}],"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Building</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000000;\n      overflow: hidden;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    /* --- Title --- */\n    .title-section {\n      flex-shrink: 0;\n      padding: 60px 32px 0;\n      text-align: center;\n    }\n\n    #title_label {\n      margin: 0;\n      font-size: 28px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 34px;\n      letter-spacing: -0.5px;\n    }\n\n    .accent { color: #526DF2; }\n\n    /* --- Scrollable content --- */\n    .content {\n      flex: 1;\n      overflow-y: auto;\n      scrollbar-width: none;\n      min-height: 0;\n    }\n    .content::-webkit-scrollbar { display: none; }\n\n    /* --- Progress Steps --- */\n    .steps-section {\n      padding: 32px 24px 0;\n    }\n\n    .steps-card {\n      background: #131416;\n      border: 2px solid #222327;\n      border-radius: 20px;\n      box-shadow: 0px 3px 0px 0px #222327;\n      padding: 24px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n    }\n\n    .step {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .step-label {\n      font-size: 15px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 20px;\n      letter-spacing: -0.23px;\n      opacity: 0.4;\n      transition: opacity 0.3s;\n    }\n\n    .step.active .step-label,\n    .step.done .step-label {\n      opacity: 1;\n    }\n\n    .step-bar-bg {\n      height: 6px;\n      background: rgba(255, 255, 255, 0.08);\n      border-radius: 3px;\n      overflow: hidden;\n    }\n\n    .step-bar-fill {\n      height: 100%;\n      width: 0%;\n      background: #526DF2;\n      border-radius: 3px;\n      transition: width 0.1s linear;\n    }\n\n    /* --- Hint --- */\n    .hint {\n      text-align: center;\n      padding: 20px 24px 0;\n      font-size: 15px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 20px;\n      letter-spacing: -0.23px;\n    }\n\n    /* --- Error overlay --- */\n    .error-overlay {\n      display: none;\n      position: fixed;\n      inset: 0;\n      background: rgba(0, 0, 0, 0.75);\n      z-index: 100;\n      justify-content: center;\n      align-items: center;\n    }\n    .error-overlay.visible {\n      display: flex;\n    }\n    .error-card {\n      background: #131416;\n      border: 2px solid #222327;\n      border-radius: 20px;\n      padding: 28px 24px;\n      text-align: center;\n      margin: 0 24px;\n      max-width: 340px;\n      width: 100%;\n    }\n    .error-card p {\n      margin: 0 0 20px;\n      font-size: 15px;\n      font-weight: 500;\n      color: #FFFFFF;\n      line-height: 22px;\n    }\n    .retry-btn {\n      width: 100%;\n      height: 50px;\n      border: none;\n      border-radius: 14px;\n      background: #526DF2;\n      color: #FFFFFF;\n      font-size: 17px;\n      font-weight: 600;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    /* --- Review Card --- */\n    .review-section {\n      flex-shrink: 0;\n      padding: 20px 24px 24px;\n    }\n\n    .review-card {\n      background: #131416;\n      border: 2px solid #222327;\n      border-radius: 20px;\n      box-shadow: 0px 3px 0px 0px #222327;\n      padding: 20px;\n    }\n\n    .review-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: 16px;\n    }\n\n    .reviewer-name {\n      font-size: 17px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 22px;\n      letter-spacing: -0.43px;\n    }\n\n    .stars {\n      font-size: 16px;\n      letter-spacing: 2px;\n      color: #F5A623;\n    }\n\n    .review-text {\n      font-size: 14px;\n      font-weight: 400;\n      color: #FFFFFF;\n      line-height: 1.6;\n      letter-spacing: -0.15px;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <!-- Title -->\n    <div class=\"title-section\">\n      <h1 id=\"title_label\">Building Your <span class=\"accent\">Custom Poker Trainer</span></h1>\n    </div>\n\n    <!-- Scrollable content -->\n    <div class=\"content\">\n\n    <!-- Progress Steps -->\n    <div class=\"steps-section\">\n      <div class=\"steps-card\">\n        <div class=\"step active\" id=\"step1\">\n          <div class=\"step-label\">Analyzing your level</div>\n          <div class=\"step-bar-bg\"><div class=\"step-bar-fill\" id=\"bar1\"></div></div>\n        </div>\n        <div class=\"step\" id=\"step2\">\n          <div class=\"step-label\">Comparing against our database</div>\n          <div class=\"step-bar-bg\"><div class=\"step-bar-fill\" id=\"bar2\"></div></div>\n        </div>\n        <div class=\"step\" id=\"step3\">\n          <div class=\"step-label\">Configuring your custom drills</div>\n          <div class=\"step-bar-bg\"><div class=\"step-bar-fill\" id=\"bar3\"></div></div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Hint -->\n    <p class=\"hint\" id=\"hint_label\">This might take up to 30 seconds</p>\n\n    <!-- Review -->\n    <div class=\"review-section\">\n      <div class=\"review-card\">\n        <div class=\"review-header\">\n          <span class=\"reviewer-name\">Viraj Patel (M31)</span>\n          <span class=\"stars\">★★★★★</span>\n        </div>\n        <p class=\"review-text\">I knew basic ranges and concepts, but I kept losing in the same few situations without knowing why. What surprised me most is how the trainer adapts to what I mess up instead of throwing random scenarios at me. After a week, it was basically drilling my exact leaks over and over until they stopped being leaks. My decisions feel calmer now, especially in 3-bet and blind vs blind spots. That alone paid for the app.</p>\n      </div>\n    </div>\n\n    </div><!-- /.content -->\n\n    <!-- Error overlay -->\n    <div class=\"error-overlay\" id=\"error_overlay\">\n      <div class=\"error-card\">\n        <p id=\"error_message\">Something went wrong. Please try again.</p>\n        <button class=\"retry-btn\" id=\"retry_btn\">Try Again</button>\n      </div>\n    </div>\n\n  </div>\n\n  <script>\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {}, labels: {}, userData: {}, customData: {},\n      webOnboarding: {}, incomeUserData: {}, language: 'en', screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => { console.log('leaveCustomScreen:', args); };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => { port.postMessage({ eventName: 'LeaveCustomScreen', args }, []); };\n          window.backScreen = () => { port.postMessage({ eventName: 'BackScreen', args: null }, []); };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => { if (!isOnboardingOnline) initScreen(); }, 100);\n    });\n\n    // -- Haptics --\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) return currentWindow.segmentlySDK;\n          if (currentWindow === currentWindow.parent) break;\n          currentWindow = currentWindow.parent;\n        } catch (e) { break; }\n      }\n      return null;\n    }\n\n    let apiDone = false;\n    let apiError = false;\n    let stepsDone = false;\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n\n      updateLabels();\n      createAccount();\n      runSteps();\n\n      document.getElementById('retry_btn').addEventListener('click', () => {\n        document.getElementById('error_overlay').classList.remove('visible');\n        createAccount();\n      });\n    }\n\n    function createAccount() {\n      apiDone = false;\n      apiError = false;\n\n      const sdk = getSegmentlySDK();\n      const email = sdk ? sdk.getVariable('email') : '';\n      const platformUserId = sdk ? sdk.getPlatformUserId() : '';\n\n      fetch('https://us-central1-poker-runout.cloudfunctions.net/createOnboardingUser', {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json',\n          'Authorization': 'Bearer mR7xKw2NpJ9vBtYd4LqZs5CfAe8UhG3X'\n        },\n        body: JSON.stringify({ email: email, userId: platformUserId })\n      })\n      .then(res => {\n        if (!res.ok) throw new Error('HTTP ' + res.status);\n        return res.json();\n      })\n      .then(data => {\n        if (sdk && sdk.setVariable) {\n          sdk.setVariable('otp', data.token || '');\n          sdk.setVariable('existing_user', data.existing_user || '');\n          sdk.setVariable('password', data.password || '');\n        }\n        apiDone = true;\n        tryAdvance();\n      })\n      .catch(err => {\n        console.error('createAccount error:', err);\n        apiError = true;\n        if (stepsDone) {\n          document.getElementById('error_overlay').classList.add('visible');\n        }\n      });\n    }\n\n    function runSteps() {\n      const steps = [\n        { stepEl: 'step1', barEl: 'bar1', duration: 3500 },\n        { stepEl: 'step2', barEl: 'bar2', duration: 2800 },\n        { stepEl: 'step3', barEl: 'bar3', duration: 2520 }\n      ];\n\n      let currentStep = 0;\n\n      function animateStep() {\n        if (currentStep >= steps.length) {\n          stepsDone = true;\n          if (apiError) {\n            document.getElementById('error_overlay').classList.add('visible');\n          } else {\n            tryAdvance();\n          }\n          return;\n        }\n\n        const { stepEl, barEl, duration } = steps[currentStep];\n        const step = document.getElementById(stepEl);\n        const bar = document.getElementById(barEl);\n\n        step.classList.add('active');\n        haptic('selection');\n\n        const startTime = performance.now();\n        const interval = 16;\n\n        function easeStutter(t) {\n          // Piecewise: slow → burst → slow → burst → ease out\n          if (t < 0.25) return t * 0.6;                          // slow start\n          if (t < 0.4)  return 0.15 + (t - 0.25) * 2.0;         // burst\n          if (t < 0.6)  return 0.45 + (t - 0.4) * 0.5;          // slow again\n          if (t < 0.8)  return 0.55 + (t - 0.6) * 1.8;          // burst\n          return 0.91 + (t - 0.8) * 0.45;                        // ease to finish\n        }\n\n        function tick() {\n          const elapsed = performance.now() - startTime;\n          const progress = Math.min(elapsed / duration, 1);\n          const visual = easeStutter(progress);\n          bar.style.width = (visual * 100) + '%';\n\n          if (progress < 1) {\n            requestAnimationFrame(tick);\n          } else {\n            step.classList.remove('active');\n            step.classList.add('done');\n            currentStep++;\n            setTimeout(animateStep, 200);\n          }\n        }\n\n        requestAnimationFrame(tick);\n      }\n\n      animateStep();\n    }\n\n    function tryAdvance() {\n      if (!apiDone || !stepsDone) return;\n      setTimeout(() => {\n        haptic('medium');\n        const sdk = getSegmentlySDK();\n        if (sdk) sdk.trackEvent('UserContinuedOnboarding', { screenName: 'building' });\n        if (sdk && sdk.setVariable) sdk.setVariable('action', 'continue');\n        window.leaveCustomScreen({ action: 'continue' });\n      }, 500);\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language])\n        titleEl.innerHTML = labels.title_label.value.l10n[language];\n    }\n  </script>\n</body>\n</html>\n"},"animated":true,"countdown":null},"name":"loading","position":{"x":10023.999999999998,"y":1104},"screenType":"WebEmbed","id":"095e1827-4fdc-46c1-bd1f-5090a3501e97"},"168804a9-a17a-4776-90e5-a3398fd93df9":{"position":{"y":1392,"x":6048},"screenType":"WebEmbed","tags":[],"name":"goals-expert","content":{"countdown":null,"animated":true,"embed":{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Goals</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000000;\n      overflow: hidden;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    .nav-bar {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      padding: 14px 24px 0 16px;\n      gap: 16px;\n    }\n\n    .back-btn {\n      width: 44px;\n      height: 44px;\n      border-radius: 50%;\n      border: 1px solid rgba(255, 255, 255, 0.12);\n      background: rgba(255, 255, 255, 0.05);\n      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: rgba(255, 255, 255, 0.7);\n    }\n    .back-btn svg { width: 20px; height: 20px; }\n\n    .progress-bar-bg {\n      flex: 1;\n      height: 8px;\n      background-color: #222327;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      width: 95%;\n      background-color: #526DF2;\n      border-radius: 4px;\n    }\n\n    .header {\n      flex-shrink: 0;\n      padding: 32px 30px 0;\n    }\n\n    #title_label {\n      margin: 0 0 12px;\n      font-size: 22px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 28px;\n      letter-spacing: -0.26px;\n    }\n\n    #subtitle_label {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 400;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n\n    .options-list {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 32px 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      scrollbar-width: none;\n    }\n    .options-list::-webkit-scrollbar { display: none; }\n\n    .option-card {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 18px 16px;\n      border-radius: 20px;\n      background: #131416;\n      border: 2px solid #222327;\n      box-shadow: 0px 3px 0px 0px #222327;\n      cursor: pointer;\n      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;\n    }\n\n    .option-card.selected {\n      border-color: #526DF2;\n      background: #1A1E4C;\n      box-shadow: 0px 3px 0px 0px #526DF2;\n    }\n\n    .option-title {\n      flex: 1;\n      font-size: 17px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 22px;\n      letter-spacing: -0.43px;\n    }\n\n    .option-check {\n      flex-shrink: 0;\n      width: 20px;\n      height: 20px;\n      border-radius: 8px;\n      border: 1px solid #393B41;\n      background: #222327;\n      transition: border-color 0.15s, background 0.15s;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .option-card.selected .option-check {\n      border-color: #526DF2;\n      background: #526DF2;\n    }\n\n    .option-card.selected .option-check::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 5px;\n      height: 9px;\n      border-right: 2px solid #FFFFFF;\n      border-bottom: 2px solid #FFFFFF;\n      transform: translate(-50%, -60%) rotate(40deg);\n    }\n\n    .footer-hint {\n      flex-shrink: 0;\n      text-align: center;\n      margin: 0;\n      padding: 8px 24px 0;\n      font-size: 16px;\n      font-weight: 400;\n      font-style: italic;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n\n    .footer {\n      flex-shrink: 0;\n      padding: 12px 24px 24px;\n    }\n\n    #action_button {\n      width: 100%;\n      padding: 14px 20px;\n      box-sizing: border-box;\n      background-color: #F5F5F5;\n      color: #000000;\n      border: none;\n      border-radius: 16px;\n      font-family: 'Inter', sans-serif;\n      font-size: 18px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);\n    }\n    #action_button:hover:not(:disabled) { opacity: 0.9; }\n    #action_button:disabled {\n      opacity: 0.3;\n      cursor: default;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"nav-bar\">\n      <button class=\"back-btn\" onclick=\"handleBack()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n      <div class=\"progress-bar-bg\">\n        <div class=\"progress-bar-fill\"></div>\n      </div>\n    </div>\n\n    <div class=\"header\">\n      <h1 id=\"title_label\">What are your goals with Runout Poker?</h1>\n    </div>\n\n    <div class=\"options-list\">\n      <div class=\"option-card\" data-id=\"INCREASE_WINRATE\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Increase win-rate</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"CONSISTENTLY_PROFITABLE\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Become consistently profitable</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"PLAY_DISCIPLINED\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Play more disciplined</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"GO_DEEP_TOURNAMENTS\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Go deep in tournaments often</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"FEEL_CONFIDENT\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Feel confident playing with anyone</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"BECOME_PROFESSIONAL\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Become a professional</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <p class=\"footer-hint\" id=\"hint_label\">You can adjust later</p>\n    </div>\n\n    <div class=\"footer\">\n      <button id=\"action_button\" disabled onclick=\"handleContinue()\">Continue</button>\n    </div>\n\n  </div>\n\n  <script>\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {}, labels: {}, userData: {}, customData: {},\n      webOnboarding: {}, incomeUserData: {}, language: 'en', screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => { console.log('leaveCustomScreen:', args); };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => { port.postMessage({ eventName: 'LeaveCustomScreen', args }, []); };\n          window.backScreen = () => { port.postMessage({ eventName: 'BackScreen', args: null }, []); };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => { if (!isOnboardingOnline) initScreen(); }, 100);\n    });\n\n    const DATA_KEY = 'poker_goals';\n    let selectedIds = [];\n\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) return currentWindow.segmentlySDK;\n          if (currentWindow === currentWindow.parent) break;\n          currentWindow = currentWindow.parent;\n        } catch (e) { break; }\n      }\n      return null;\n    }\n\n    function handleBack() { window.backScreen(); }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n\n      const sdk = getSegmentlySDK();\n      let saved = sdk ? sdk.getVariable(DATA_KEY) : null;\n      if (!saved) {\n        const inputs = window.onboardingOnlineCustomScreenData.inputs;\n        if (inputs && inputs[DATA_KEY]) {\n          const inputData = inputs[DATA_KEY];\n          saved = (typeof inputData === 'object' && 'value' in inputData) ? inputData.value : inputData;\n        }\n      }\n      if (saved) {\n        const ids = typeof saved === 'string' ? saved.split(',') : saved;\n        if (Array.isArray(ids)) {\n          ids.forEach(id => {\n            const card = document.querySelector(`.option-card[data-id=\"${id}\"]`);\n            if (card) card.classList.add('selected');\n          });\n          selectedIds = ids;\n          updateButton();\n        }\n      }\n\n      updateLabels();\n    }\n\n    function toggleOption(card) {\n      haptic('selection');\n      const id = card.dataset.id;\n      if (card.classList.contains('selected')) {\n        card.classList.remove('selected');\n        selectedIds = selectedIds.filter(i => i !== id);\n      } else {\n        card.classList.add('selected');\n        selectedIds.push(id);\n      }\n      updateButton();\n    }\n\n    function updateButton() {\n      document.getElementById('action_button').disabled = selectedIds.length === 0;\n    }\n\n    function handleContinue() {\n      if (selectedIds.length === 0) return;\n      haptic('medium');\n\n      const sdk = getSegmentlySDK();\n      if (sdk) sdk.trackEvent('UserUpdatedValue', { screenName: 'poker_goals', answer: selectedIds.join(',') });\n      if (sdk && sdk.setVariable) sdk.setVariable(DATA_KEY, selectedIds.join(','));\n      window.leaveCustomScreen({ [DATA_KEY]: selectedIds.join(',') });\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language])\n        titleEl.textContent = labels.title_label.value.l10n[language];\n\n      const hintEl = document.getElementById('hint_label');\n      if (hintEl && labels.hint_label?.value?.l10n?.[language])\n        hintEl.textContent = labels.hint_label.value.l10n[language];\n\n      const btnEl = document.getElementById('action_button');\n      if (btnEl && labels.button_text?.value?.l10n?.[language])\n        btnEl.textContent = labels.button_text.value.l10n[language];\n    }\n  </script>\n</body>\n</html>\n","callback":{"action":{"edges":[{"transitionKind":"push","nextScreenId":"094b2427-55d5-4948-bc53-f37eb7d524c2","conditions":[]}],"kind":"advance"}},"childSections":[{"label":"frame_2131331307","mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png"}}}},"appearance":{}},"id":"section-moe87nw0-z7r8h","layout":{"flexGrow":1,"flexShrink":1,"scrollable":false,"heightKind":"auto"},"kind":"Media","order":0},{"order":1,"kind":"Media","layout":{"heightKind":"auto","scrollable":false,"flexGrow":1,"flexShrink":1},"id":"section-moe8gqhb-nk7tv","mediaContent":{"appearance":{},"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png"}}}},"kind":"Image"},"label":"frame_2131331309"}]},"systemPrompt":null,"actionBar":{},"offlineFirst":true,"header":{},"canvas":{"background":{"kind":"solid","content":{"color":"#1a1a1a"}},"webViewBackgroundColor":"#1a1a1a","insets":{"top":0,"start":16,"bottom":0,"end":16}}},"id":"168804a9-a17a-4776-90e5-a3398fd93df9"},"1b2955e1-612b-404a-af4d-050276bc41e1":{"id":"1b2955e1-612b-404a-af4d-050276bc41e1","tags":[],"name":"format-selection-expert","content":{"canvas":{"background":{"content":{"color":"#1a1a1a"},"kind":"solid"},"webViewBackgroundColor":"#1a1a1a","insets":{"start":16,"bottom":0,"end":16,"top":0}},"header":{},"offlineFirst":true,"actionBar":{},"systemPrompt":null,"embed":{"callback":{"action":{"edges":[{"nextScreenId":"6bd9fb73-b6a7-4940-8c14-270c3b1d9254","transitionKind":"push","conditions":[]}],"kind":"advance"}},"childSections":[{"label":"frame_2131331307","id":"section-moe87nw0-z7r8h","mediaContent":{"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png"}}}},"appearance":{},"kind":"Image"},"kind":"Media","layout":{"heightKind":"auto","flexShrink":1,"scrollable":false,"flexGrow":1},"order":0},{"order":1,"kind":"Media","layout":{"heightKind":"auto","scrollable":false,"flexGrow":1,"flexShrink":1},"mediaContent":{"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png"}}}},"appearance":{},"kind":"Image"},"id":"section-moe8gqhb-nk7tv","label":"frame_2131331309"}],"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Format Selection</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000000;\n      overflow: hidden;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    /* --- Nav Bar --- */\n    .nav-bar {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      padding: 14px 24px 0 16px;\n      gap: 16px;\n    }\n\n    .back-btn {\n      width: 44px;\n      height: 44px;\n      border-radius: 50%;\n      border: 1px solid rgba(255, 255, 255, 0.12);\n      background: rgba(255, 255, 255, 0.05);\n      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: rgba(255, 255, 255, 0.7);\n    }\n    .back-btn svg { width: 20px; height: 20px; }\n\n    .progress-bar-bg {\n      flex: 1;\n      height: 8px;\n      background-color: #222327;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      width: 40%;\n      background-color: #526DF2;\n      border-radius: 4px;\n    }\n\n    /* --- Header --- */\n    .header {\n      flex-shrink: 0;\n      padding: 32px 30px 0;\n    }\n\n    #title_label {\n      margin: 0 0 12px;\n      font-size: 22px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 28px;\n      letter-spacing: -0.26px;\n    }\n\n    #subtitle_label {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 400;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n\n    /* --- Options List --- */\n    .options-list {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 32px 16px 0;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      scrollbar-width: none;\n    }\n    .options-list::-webkit-scrollbar { display: none; }\n\n    .option-card {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 18px 16px;\n      border-radius: 20px;\n      background: #131416;\n      border: 2px solid #222327;\n      box-shadow: 0px 3px 0px 0px #222327;\n      cursor: pointer;\n      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;\n    }\n\n    .option-card.selected {\n      border-color: #526DF2;\n      background: #1A1E4C;\n      box-shadow: 0px 3px 0px 0px #526DF2;\n    }\n\n    .option-title {\n      flex: 1;\n      font-size: 17px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 22px;\n      letter-spacing: -0.43px;\n    }\n\n    /* Checkbox indicator */\n    .option-check {\n      flex-shrink: 0;\n      width: 20px;\n      height: 20px;\n      border-radius: 8px;\n      border: 1px solid #393B41;\n      background: #222327;\n      transition: border-color 0.15s, background 0.15s;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .option-card.selected .option-check {\n      border-color: #526DF2;\n      background: #526DF2;\n    }\n\n    .option-card.selected .option-check::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 5px;\n      height: 9px;\n      border-right: 2px solid #FFFFFF;\n      border-bottom: 2px solid #FFFFFF;\n      transform: translate(-50%, -60%) rotate(40deg);\n    }\n\n    /* --- Footer hint --- */\n    .footer-hint {\n      flex-shrink: 0;\n      text-align: center;\n      margin: 0;\n      padding: 8px 24px 0;\n      font-size: 16px;\n      font-weight: 400;\n      font-style: italic;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      flex-shrink: 0;\n      padding: 20px 24px 24px;\n      margin-top: auto;\n    }\n\n    #action_button {\n      width: 100%;\n      padding: 14px 20px;\n      box-sizing: border-box;\n      background-color: #F5F5F5;\n      color: #000000;\n      border: none;\n      border-radius: 16px;\n      font-family: 'Inter', sans-serif;\n      font-size: 18px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);\n    }\n    #action_button:hover:not(:disabled) { opacity: 0.9; }\n    #action_button:disabled {\n      opacity: 0.3;\n      cursor: default;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <!-- Nav bar -->\n    <div class=\"nav-bar\">\n      <button class=\"back-btn\" onclick=\"handleBack()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n      <div class=\"progress-bar-bg\">\n        <div class=\"progress-bar-fill\"></div>\n      </div>\n    </div>\n\n    <!-- Header -->\n    <div class=\"header\">\n      <h1 id=\"title_label\">Which formats are you most interested in studying?</h1>\n      <p id=\"subtitle_label\">This will be used to calibrate your trainer</p>\n    </div>\n\n    <!-- Options -->\n    <div class=\"options-list\">\n      <div class=\"option-card\" data-id=\"CASH_GAMES\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Cash Games</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"TOURNAMENTS_MTT\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Tournaments (MTT)</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"SIT_AND_GO\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Sit & Go / Single-Table Tournaments</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <!-- Hint inside options list -->\n      <p class=\"footer-hint\" id=\"hint_label\">You can adjust later</p>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"footer\">\n      <button id=\"action_button\" disabled onclick=\"handleContinue()\">Continue</button>\n    </div>\n\n  </div>\n\n  <script>\n    // ========================================================================\n    // --- ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n    // ========================================================================\n\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: 'en',\n      screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => {\n      console.log('leaveCustomScreen:', args);\n    };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => {\n            port.postMessage({ eventName: 'LeaveCustomScreen', args }, []);\n          };\n          window.backScreen = () => {\n            port.postMessage({ eventName: 'BackScreen', args: null }, []);\n          };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!isOnboardingOnline) {\n          console.log('Running in standalone mode');\n          initScreen();\n        }\n      }, 100);\n    });\n\n    // ========================================================================\n    // --- SCREEN LOGIC ---\n    // ========================================================================\n\n    const DATA_KEY = 'study_formats';\n    let selectedIds = [];\n\n    // -- Haptics --\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) {\n            return currentWindow.segmentlySDK;\n          }\n          if (currentWindow === currentWindow.parent) {\n            break;\n          }\n          currentWindow = currentWindow.parent;\n        } catch (e) {\n          console.warn('Cross-origin access blocked at level', i);\n          break;\n        }\n      }\n      return null;\n    }\n\n    function handleBack() {\n      window.backScreen();\n    }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n      console.log('Screen Initialized');\n\n      // Restore saved selection\n      const sdk = getSegmentlySDK();\n      let saved = sdk ? sdk.getVariable(DATA_KEY) : null;\n      if (!saved) {\n        const inputs = window.onboardingOnlineCustomScreenData.inputs;\n        if (inputs && inputs[DATA_KEY]) {\n          const inputData = inputs[DATA_KEY];\n          saved = (typeof inputData === 'object' && 'value' in inputData)\n            ? inputData.value\n            : inputData;\n        }\n      }\n      if (saved) {\n        const ids = typeof saved === 'string' ? saved.split(',') : saved;\n        if (Array.isArray(ids)) {\n          ids.forEach(id => {\n            const card = document.querySelector(`.option-card[data-id=\"${id}\"]`);\n            if (card) card.classList.add('selected');\n          });\n          selectedIds = ids;\n          updateButton();\n        }\n      }\n\n      updateLabels();\n    }\n\n    function toggleOption(card) {\n      haptic('selection');\n      const id = card.dataset.id;\n      if (card.classList.contains('selected')) {\n        card.classList.remove('selected');\n        selectedIds = selectedIds.filter(i => i !== id);\n      } else {\n        card.classList.add('selected');\n        selectedIds.push(id);\n      }\n      updateButton();\n    }\n\n    function updateButton() {\n      document.getElementById('action_button').disabled = selectedIds.length === 0;\n    }\n\n    function handleContinue() {\n      if (selectedIds.length === 0) return;\n      haptic('medium');\n\n      const sdk = getSegmentlySDK();\n      if (sdk) {\n        sdk.trackEvent('UserUpdatedValue', {\n          screenName: 'format_selection',\n          answer: selectedIds.join(',')\n        });\n      }\n      if (sdk && sdk.setVariable) {\n        sdk.setVariable(DATA_KEY, selectedIds.join(','));\n      }\n      window.leaveCustomScreen({\n        [DATA_KEY]: selectedIds.join(',')\n      });\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language]) {\n        titleEl.textContent = labels.title_label.value.l10n[language];\n      }\n\n      const subtitleEl = document.getElementById('subtitle_label');\n      if (subtitleEl && labels.subtitle_label?.value?.l10n?.[language]) {\n        subtitleEl.textContent = labels.subtitle_label.value.l10n[language];\n      }\n\n      const hintEl = document.getElementById('hint_label');\n      if (hintEl && labels.hint_label?.value?.l10n?.[language]) {\n        hintEl.textContent = labels.hint_label.value.l10n[language];\n      }\n\n      const btnEl = document.getElementById('action_button');\n      if (btnEl && labels.button_text?.value?.l10n?.[language]) {\n        btnEl.textContent = labels.button_text.value.l10n[language];\n      }\n    }\n  </script>\n</body>\n</html>\n"},"animated":true,"countdown":null},"position":{"x":3248,"y":1408},"screenType":"WebEmbed"},"1e1426b1-6cd8-4657-a0f4-75c02779c96c":{"id":"1e1426b1-6cd8-4657-a0f4-75c02779c96c","content":{"embed":{"childSections":[{"kind":"Media","layout":{"heightKind":"auto","flexGrow":1,"flexShrink":1,"scrollable":false},"order":0,"label":"frame_2131331307","mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png"}}}},"appearance":{}},"id":"section-moe87nw0-z7r8h"},{"layout":{"heightKind":"auto","scrollable":false,"flexShrink":1,"flexGrow":1},"kind":"Media","order":1,"label":"frame_2131331309","id":"section-moe8gqhb-nk7tv","mediaContent":{"appearance":{},"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png"}}}},"kind":"Image"}},{"kind":"Media","layout":{"flexShrink":1,"flexGrow":1,"scrollable":false,"heightKind":"auto"},"order":2,"label":"1-stats-background","id":"section-moe8qa2a-3u5xz","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115572624_1-stats-background/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115572624_1-stats-background/small.png"}}}},"appearance":{},"kind":"Image"}},{"order":3,"layout":{"flexGrow":1,"scrollable":false,"flexShrink":1,"heightKind":"auto"},"kind":"Media","id":"section-moe8rbkb-4jjcw","mediaContent":{"kind":"Image","appearance":{},"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115622136_hero/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115622136_hero/small.png"}}}}},"label":"hero"},{"order":4,"kind":"Media","layout":{"flexGrow":1,"scrollable":false,"flexShrink":1,"heightKind":"auto"},"mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115693642_hero-sessions-adapted/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115693642_hero-sessions-adapted/small.png"}}}},"appearance":{},"kind":"Image"},"id":"section-moe8suth-031ep","label":"hero-sessions-adapted"}],"callback":{"action":{"edges":[{"nextScreenId":"9148bd8c-6eac-4bd8-9a30-78ba9b768ad6","conditions":[],"transitionKind":"push"}],"kind":"advance"}},"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Training System</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000000;\n      overflow: hidden;\n      position: relative;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    /* --- Stats header --- */\n    .stats-header {\n      flex-shrink: 0;\n      padding: 70px 0 0;\n      text-align: center;\n    }\n\n    .percentage {\n      font-size: 64px;\n      font-weight: 700;\n      color: #FFFFFF;\n      line-height: 72px;\n      letter-spacing: -3px;\n      margin: 0;\n    }\n\n    .percentage-desc {\n      margin: 12px auto 0;\n      font-size: 17px;\n      font-weight: 500;\n      color: #717680;\n      line-height: 22px;\n      letter-spacing: -0.43px;\n      max-width: 240px;\n    }\n\n    /* --- Hero image --- */\n    .hero-section {\n      flex: 1 1 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 0;\n      overflow: hidden;\n      padding: 0;\n    }\n\n    .hero-image {\n      display: block;\n      width: 100%;\n      max-height: 100%;\n      object-fit: contain;\n      pointer-events: none;\n    }\n\n    /* --- Bottom Text --- */\n    .bottom-section {\n      flex-shrink: 0;\n      padding: 0 30px;\n      text-align: center;\n    }\n\n    #title_label {\n      margin: 0 0 12px;\n      font-size: 28px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 34px;\n      letter-spacing: -0.5px;\n    }\n\n    #subtitle_label {\n      margin: 0 0 12px;\n      font-size: 20px;\n      font-weight: 500;\n      color: #727785;\n      line-height: 25px;\n      letter-spacing: -0.45px;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      flex-shrink: 0;\n      padding: 16px 24px 24px;\n    }\n\n    #action_button {\n      width: 100%;\n      padding: 14px 20px;\n      box-sizing: border-box;\n      background-color: #F5F5F5;\n      color: #000000;\n      border: none;\n      border-radius: 16px;\n      font-family: 'Inter', sans-serif;\n      font-size: 18px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);\n    }\n    #action_button:hover { opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <!-- Stats text -->\n    <div class=\"stats-header\">\n      <p class=\"percentage\" id=\"percentage\">0%</p>\n      <p class=\"percentage-desc\" id=\"percentage_desc\">Of sessions adapted to your mistakes</p>\n    </div>\n\n    <!-- Hero image (static) -->\n    <div class=\"hero-section\">\n      <img class=\"hero-image\" src=\"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115693642_hero-sessions-adapted/origin.png\" alt=\"Training system loop\">\n    </div>\n\n    <!-- Bottom text -->\n    <div class=\"bottom-section\">\n      <h1 id=\"title_label\">The training system<br>that adapts to you.</h1>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"footer\">\n      <button id=\"action_button\" onclick=\"handleContinue()\">Continue</button>\n    </div>\n\n  </div>\n\n  <script>\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {}, labels: {}, userData: {}, customData: {},\n      webOnboarding: {}, incomeUserData: {}, language: 'en', screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => { console.log('leaveCustomScreen:', args); };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => { port.postMessage({ eventName: 'LeaveCustomScreen', args }, []); };\n          window.backScreen = () => { port.postMessage({ eventName: 'BackScreen', args: null }, []); };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => { if (!isOnboardingOnline) initScreen(); }, 100);\n    });\n\n    // -- Haptics --\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) return currentWindow.segmentlySDK;\n          if (currentWindow === currentWindow.parent) break;\n          currentWindow = currentWindow.parent;\n        } catch (e) { break; }\n      }\n      return null;\n    }\n\n    function handleBack() { window.backScreen(); }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n\n      updateLabels();\n      startAnimation();\n    }\n\n    function startAnimation() {\n      const duration = 1800;\n      const targetPercent = 100;\n      const percentEl = document.getElementById('percentage');\n      const startTime = performance.now();\n\n      function updateCounter(now) {\n        const elapsed = now - startTime;\n        const progress = Math.min(elapsed / duration, 1);\n        const eased = 1 - Math.pow(1 - progress, 3);\n        const current = Math.round(eased * targetPercent);\n        percentEl.textContent = current + '%';\n\n        if (progress < 1) {\n          requestAnimationFrame(updateCounter);\n        } else {\n          percentEl.textContent = targetPercent + '%';\n          haptic('medium');\n        }\n      }\n\n      requestAnimationFrame(updateCounter);\n    }\n\n    function handleContinue() {\n      haptic('medium');\n      const sdk = getSegmentlySDK();\n      if (sdk) sdk.trackEvent('UserContinuedOnboarding', { screenName: 'training_system' });\n      if (sdk && sdk.setVariable) sdk.setVariable('action', 'continue');\n      window.leaveCustomScreen({ action: 'continue' });\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language])\n        titleEl.innerHTML = labels.title_label.value.l10n[language];\n\n      const btnEl = document.getElementById('action_button');\n      if (btnEl && labels.button_text?.value?.l10n?.[language])\n        btnEl.textContent = labels.button_text.value.l10n[language];\n    }\n  </script>\n</body>\n</html>\n"},"systemPrompt":null,"countdown":null,"animated":true,"header":{},"offlineFirst":true,"canvas":{"insets":{"start":16,"bottom":0,"end":16,"top":0},"webViewBackgroundColor":"#1a1a1a","background":{"content":{"color":"#1a1a1a"},"kind":"solid"}},"actionBar":{}},"name":"training-system-chart","tags":[],"screenType":"WebEmbed","position":{"x":7776,"y":1104}},"222628ee-75a9-4299-b2a7-a43515eb075f":{"name":"goals-beginner","content":{"header":{},"offlineFirst":true,"canvas":{"insets":{"top":0,"start":16,"bottom":0,"end":16},"webViewBackgroundColor":"#1a1a1a","background":{"kind":"solid","content":{"color":"#1a1a1a"}}},"actionBar":{},"embed":{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Goals</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000000;\n      overflow: hidden;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    .nav-bar {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      padding: 14px 24px 0 16px;\n      gap: 16px;\n    }\n\n    .back-btn {\n      width: 44px;\n      height: 44px;\n      border-radius: 50%;\n      border: 1px solid rgba(255, 255, 255, 0.12);\n      background: rgba(255, 255, 255, 0.05);\n      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: rgba(255, 255, 255, 0.7);\n    }\n    .back-btn svg { width: 20px; height: 20px; }\n\n    .progress-bar-bg {\n      flex: 1;\n      height: 8px;\n      background-color: #222327;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      width: 95%;\n      background-color: #526DF2;\n      border-radius: 4px;\n    }\n\n    .header {\n      flex-shrink: 0;\n      padding: 32px 30px 0;\n    }\n\n    #title_label {\n      margin: 0 0 12px;\n      font-size: 22px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 28px;\n      letter-spacing: -0.26px;\n    }\n\n    #subtitle_label {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 400;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n\n    .options-list {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 32px 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      scrollbar-width: none;\n    }\n    .options-list::-webkit-scrollbar { display: none; }\n\n    .option-card {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 18px 16px;\n      border-radius: 20px;\n      background: #131416;\n      border: 2px solid #222327;\n      box-shadow: 0px 3px 0px 0px #222327;\n      cursor: pointer;\n      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;\n    }\n\n    .option-card.selected {\n      border-color: #526DF2;\n      background: #1A1E4C;\n      box-shadow: 0px 3px 0px 0px #526DF2;\n    }\n\n    .option-title {\n      flex: 1;\n      font-size: 17px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 22px;\n      letter-spacing: -0.43px;\n    }\n\n    .option-check {\n      flex-shrink: 0;\n      width: 20px;\n      height: 20px;\n      border-radius: 8px;\n      border: 1px solid #393B41;\n      background: #222327;\n      transition: border-color 0.15s, background 0.15s;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .option-card.selected .option-check {\n      border-color: #526DF2;\n      background: #526DF2;\n    }\n\n    .option-card.selected .option-check::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 5px;\n      height: 9px;\n      border-right: 2px solid #FFFFFF;\n      border-bottom: 2px solid #FFFFFF;\n      transform: translate(-50%, -60%) rotate(40deg);\n    }\n\n    .footer-hint {\n      flex-shrink: 0;\n      text-align: center;\n      margin: 0;\n      padding: 8px 24px 0;\n      font-size: 16px;\n      font-weight: 400;\n      font-style: italic;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n\n    .footer {\n      flex-shrink: 0;\n      padding: 12px 24px 24px;\n    }\n\n    #action_button {\n      width: 100%;\n      padding: 14px 20px;\n      box-sizing: border-box;\n      background-color: #F5F5F5;\n      color: #000000;\n      border: none;\n      border-radius: 16px;\n      font-family: 'Inter', sans-serif;\n      font-size: 18px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);\n    }\n    #action_button:hover:not(:disabled) { opacity: 0.9; }\n    #action_button:disabled {\n      opacity: 0.3;\n      cursor: default;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"nav-bar\">\n      <button class=\"back-btn\" onclick=\"handleBack()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n      <div class=\"progress-bar-bg\">\n        <div class=\"progress-bar-fill\"></div>\n      </div>\n    </div>\n\n    <div class=\"header\">\n      <h1 id=\"title_label\">What are your goals with poker wizard?</h1>\n      <p id=\"subtitle_label\">We'll make sure you hit them!</p>\n    </div>\n\n    <div class=\"options-list\">\n      <div class=\"option-card\" data-id=\"INCREASE_WINRATE\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Increase my win-rate</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"STOP_FEELING_LOST\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Stop feeling lost during hands</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"PLAY_DISCIPLINED\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Play more disciplined</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"FEEL_CONFIDENT\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Feel confident playing with anyone</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"STOP_SECOND_GUESSING\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Stop second-guessing decisions</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"BUILD_FOUNDATION\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Build a strong foundation</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"READ_PEOPLE\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Read people and situations better</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"IMPROVE_UNDER_PRESSURE\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Improve decision-making under pressure</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <p class=\"footer-hint\" id=\"hint_label\">You can adjust later</p>\n    </div>\n\n    <div class=\"footer\">\n      <button id=\"action_button\" disabled onclick=\"handleContinue()\">Continue</button>\n    </div>\n\n  </div>\n\n  <script>\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {}, labels: {}, userData: {}, customData: {},\n      webOnboarding: {}, incomeUserData: {}, language: 'en', screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => { console.log('leaveCustomScreen:', args); };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => { port.postMessage({ eventName: 'LeaveCustomScreen', args }, []); };\n          window.backScreen = () => { port.postMessage({ eventName: 'BackScreen', args: null }, []); };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => { if (!isOnboardingOnline) initScreen(); }, 100);\n    });\n\n    const DATA_KEY = 'poker_goals';\n    let selectedIds = [];\n\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) return currentWindow.segmentlySDK;\n          if (currentWindow === currentWindow.parent) break;\n          currentWindow = currentWindow.parent;\n        } catch (e) { break; }\n      }\n      return null;\n    }\n\n    function handleBack() { window.backScreen(); }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n\n      const sdk = getSegmentlySDK();\n      let saved = sdk ? sdk.getVariable(DATA_KEY) : null;\n      if (!saved) {\n        const inputs = window.onboardingOnlineCustomScreenData.inputs;\n        if (inputs && inputs[DATA_KEY]) {\n          const inputData = inputs[DATA_KEY];\n          saved = (typeof inputData === 'object' && 'value' in inputData) ? inputData.value : inputData;\n        }\n      }\n      if (saved) {\n        const ids = typeof saved === 'string' ? saved.split(',') : saved;\n        if (Array.isArray(ids)) {\n          ids.forEach(id => {\n            const card = document.querySelector(`.option-card[data-id=\"${id}\"]`);\n            if (card) card.classList.add('selected');\n          });\n          selectedIds = ids;\n          updateButton();\n        }\n      }\n\n      updateLabels();\n    }\n\n    function toggleOption(card) {\n      haptic('selection');\n      const id = card.dataset.id;\n      if (card.classList.contains('selected')) {\n        card.classList.remove('selected');\n        selectedIds = selectedIds.filter(i => i !== id);\n      } else {\n        card.classList.add('selected');\n        selectedIds.push(id);\n      }\n      updateButton();\n    }\n\n    function updateButton() {\n      document.getElementById('action_button').disabled = selectedIds.length === 0;\n    }\n\n    function handleContinue() {\n      if (selectedIds.length === 0) return;\n      haptic('medium');\n\n      const sdk = getSegmentlySDK();\n      if (sdk) sdk.trackEvent('UserUpdatedValue', { screenName: 'poker_goals', answer: selectedIds.join(',') });\n      if (sdk && sdk.setVariable) sdk.setVariable(DATA_KEY, selectedIds.join(','));\n      window.leaveCustomScreen({ [DATA_KEY]: selectedIds.join(',') });\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language])\n        titleEl.textContent = labels.title_label.value.l10n[language];\n\n      const subtitleEl = document.getElementById('subtitle_label');\n      if (subtitleEl && labels.subtitle_label?.value?.l10n?.[language])\n        subtitleEl.textContent = labels.subtitle_label.value.l10n[language];\n\n      const hintEl = document.getElementById('hint_label');\n      if (hintEl && labels.hint_label?.value?.l10n?.[language])\n        hintEl.textContent = labels.hint_label.value.l10n[language];\n\n      const btnEl = document.getElementById('action_button');\n      if (btnEl && labels.button_text?.value?.l10n?.[language])\n        btnEl.textContent = labels.button_text.value.l10n[language];\n    }\n  </script>\n</body>\n</html>\n","callback":{"action":{"kind":"advance","edges":[{"conditions":[],"nextScreenId":"094b2427-55d5-4948-bc53-f37eb7d524c2","transitionKind":"push"}]}},"childSections":[{"order":0,"kind":"Media","layout":{"scrollable":false,"flexGrow":1,"flexShrink":1,"heightKind":"auto"},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png"}}}},"appearance":{}},"id":"section-moe87nw0-z7r8h","label":"frame_2131331307"},{"id":"section-moe8gqhb-nk7tv","mediaContent":{"kind":"Image","appearance":{},"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png"}}}}},"label":"frame_2131331309","order":1,"layout":{"heightKind":"auto","scrollable":false,"flexShrink":1,"flexGrow":1},"kind":"Media"}]},"systemPrompt":null,"countdown":null,"animated":true},"tags":[],"screenType":"WebEmbed","position":{"y":16,"x":6016},"id":"222628ee-75a9-4299-b2a7-a43515eb075f"},"2a924111-073e-449b-8ba1-9dcb05aa6665":{"name":"plan-ready","content":{"offlineFirst":true,"header":{},"canvas":{"background":{"kind":"solid","content":{"color":"#1a1a1a"}},"insets":{"bottom":0,"end":16,"start":16,"top":0},"webViewBackgroundColor":"#1a1a1a"},"actionBar":{},"embed":{"childSections":[{"layout":{"heightKind":"auto","flexGrow":1,"scrollable":false,"flexShrink":1},"kind":"Media","order":0,"label":"frame_2131331307","mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png"}}}},"appearance":{}},"id":"section-moe87nw0-z7r8h"},{"layout":{"heightKind":"auto","flexShrink":1,"scrollable":false,"flexGrow":1},"kind":"Media","order":1,"label":"frame_2131331309","id":"section-moe8gqhb-nk7tv","mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png"}}}},"appearance":{}}},{"id":"section-moe8qa2a-3u5xz","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115572624_1-stats-background/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115572624_1-stats-background/small.png"}}}},"appearance":{},"kind":"Image"},"label":"1-stats-background","order":2,"kind":"Media","layout":{"heightKind":"auto","scrollable":false,"flexGrow":1,"flexShrink":1}},{"order":3,"layout":{"heightKind":"auto","flexGrow":1,"scrollable":false,"flexShrink":1},"kind":"Media","id":"section-moe8rbkb-4jjcw","mediaContent":{"kind":"Image","appearance":{},"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115622136_hero/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115622136_hero/small.png"}}}}},"label":"hero"},{"order":4,"layout":{"scrollable":false,"flexShrink":1,"flexGrow":1,"heightKind":"auto"},"kind":"Media","mediaContent":{"kind":"Image","appearance":{},"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115693642_hero-sessions-adapted/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115693642_hero-sessions-adapted/small.png"}}}}},"id":"section-moe8suth-031ep","label":"hero-sessions-adapted"},{"label":"email-background","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115729103_email-background/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115729103_email-background/small.png"}}}},"appearance":{},"kind":"Image"},"id":"section-moe8tlwx-91z5s","layout":{"flexGrow":1,"scrollable":false,"flexShrink":1,"heightKind":"auto"},"kind":"Media","order":5},{"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115848553_cards-hero/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115848553_cards-hero/small.png"}}}},"appearance":{}},"id":"section-moe8w6g7-3bm7l","label":"cards-hero","order":6,"kind":"Media","layout":{"heightKind":"auto","flexGrow":1,"flexShrink":1,"scrollable":false}},{"layout":{"flexGrow":1,"flexShrink":1,"scrollable":false,"heightKind":"auto"},"kind":"Media","order":7,"label":"hero-done","mediaContent":{"appearance":{},"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115914971_hero-done/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115914971_hero-done/small.png"}}}},"kind":"Image"},"id":"section-moe8xlex-635v8"}],"callback":{"action":{"edges":[{"nextScreenId":"7ae80f43-2084-4e85-a871-d91732f50ee9","conditions":[],"transitionKind":"push"}],"kind":"advance"}},"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Plan Ready</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: -apple-system, 'SF Pro Display', 'SF Pro Text', BlinkMacSystemFont, 'Inter', \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000000;\n      overflow: hidden;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    .content {\n      flex: 1;\n      overflow-y: auto;\n      scrollbar-width: none;\n      padding: 16px 0 0;\n    }\n    .content::-webkit-scrollbar { display: none; }\n\n    /* --- Hero --- */\n    .hero {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      position: relative;\n      padding: 0 65px 8px;\n    }\n\n    .hero-image {\n      width: 100%;\n      max-width: 245px;\n      height: auto;\n      pointer-events: none;\n    }\n\n/* --- Title --- */\n    .title-section {\n      text-align: center;\n      padding: 12px 32px 0;\n    }\n\n    #title_label {\n      margin: 0 0 12px;\n      font-size: 28px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 34px;\n      letter-spacing: -0.5px;\n    }\n\n    #subtitle_label {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 500;\n      color: #727785;\n      line-height: 25px;\n      letter-spacing: -0.45px;\n    }\n\n    /* --- Plan includes card --- */\n    .plan-card {\n      margin: 24px 16px 0;\n      background: #131416;\n      border: 2px solid #222327;\n      border-radius: 20px;\n      overflow: hidden;\n      box-shadow: 0px 3px 0px 0px #222327;\n    }\n\n    .plan-card-header {\n      padding: 20px 20px 0;\n      text-align: center;\n    }\n\n    .plan-card-header span {\n      font-size: 17px;\n      font-weight: 500;\n      color: #FFFFFF;\n      line-height: 22px;\n      letter-spacing: -0.43px;\n    }\n\n    .plan-divider {\n      height: 1px;\n      background: #222327;\n      margin: 20px 20px 0;\n    }\n\n    .plan-items {\n      padding: 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .plan-item {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .plan-item-check {\n      flex-shrink: 0;\n      width: 24px;\n      height: 24px;\n      background: #1A1E4C;\n      border-radius: 8px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .plan-item-check svg {\n      width: 12px;\n      height: 12px;\n      color: #526DF2;\n      stroke-width: 3;\n    }\n\n    .plan-item-text {\n      font-size: 16px;\n      font-weight: 400;\n      color: #FFFFFF;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n\n    /* --- Bottom tagline --- */\n    .tagline {\n      text-align: center;\n      padding: 20px 32px 0;\n      margin: 0;\n      font-size: 16px;\n      font-weight: 400;\n      color: #FFFFFF;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      flex-shrink: 0;\n      padding: 16px 24px 24px;\n    }\n\n    #action_button {\n      width: 100%;\n      padding: 14px 20px;\n      box-sizing: border-box;\n      background-color: #F5F5F5;\n      color: #000000;\n      border: none;\n      border-radius: 16px;\n      font-family: 'Inter', sans-serif;\n      font-size: 18px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);\n    }\n    #action_button:hover { opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"content\">\n      <!-- Hero -->\n      <div class=\"hero\">\n        <img class=\"hero-image\" src=\"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115914971_hero-done/origin.png\" alt=\"Trainer ready\">\n      </div>\n\n      <!-- Title -->\n      <div class=\"title-section\">\n        <h1 id=\"title_label\">Your Custom Trainer is Ready</h1>\n        <p id=\"subtitle_label\">Personalized to your level</p>\n      </div>\n\n      <!-- Plan includes -->\n      <div class=\"plan-card\">\n        <div class=\"plan-card-header\">\n          <span>Your plan includes</span>\n        </div>\n        <div class=\"plan-divider\"></div>\n        <div class=\"plan-items\">\n          <div class=\"plan-item\">\n            <div class=\"plan-item-check\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"3\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n              </svg>\n            </div>\n            <span class=\"plan-item-text\">Daily drills designed for you</span>\n          </div>\n          <div class=\"plan-item\">\n            <div class=\"plan-item-check\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"3\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n              </svg>\n            </div>\n            <span class=\"plan-item-text\">Custom-built quizzes & lessons</span>\n          </div>\n          <div class=\"plan-item\">\n            <div class=\"plan-item-check\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"3\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n              </svg>\n            </div>\n            <span class=\"plan-item-text\">Progress tracking & analytics</span>\n          </div>\n          <div class=\"plan-item\">\n            <div class=\"plan-item-check\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"3\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n              </svg>\n            </div>\n            <span class=\"plan-item-text\">Adapts to your level & mistakes</span>\n          </div>\n        </div>\n      </div>\n\n      <!-- Tagline -->\n      <p class=\"tagline\">Your custom trainer turns repeated mistakes into stronger decisions.</p>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"footer\">\n      <button id=\"action_button\" onclick=\"handleContinue()\">Continue</button>\n    </div>\n\n  </div>\n\n  <script>\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {}, labels: {}, userData: {}, customData: {},\n      webOnboarding: {}, incomeUserData: {}, language: 'en', screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => { console.log('leaveCustomScreen:', args); };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => { port.postMessage({ eventName: 'LeaveCustomScreen', args }, []); };\n          window.backScreen = () => { port.postMessage({ eventName: 'BackScreen', args: null }, []); };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => { if (!isOnboardingOnline) initScreen(); }, 100);\n    });\n\n    // -- Haptics --\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) return currentWindow.segmentlySDK;\n          if (currentWindow === currentWindow.parent) break;\n          currentWindow = currentWindow.parent;\n        } catch (e) { break; }\n      }\n      return null;\n    }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n      updateLabels();\n    }\n\n    function handleContinue() {\n      haptic('medium');\n      const sdk = getSegmentlySDK();\n      if (sdk) sdk.trackEvent('UserContinuedOnboarding', { screenName: 'plan_ready' });\n      if (sdk && sdk.setVariable) sdk.setVariable('action', 'continue');\n      window.leaveCustomScreen({ action: 'continue' });\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language])\n        titleEl.innerHTML = labels.title_label.value.l10n[language];\n\n      const subtitleEl = document.getElementById('subtitle_label');\n      if (subtitleEl && labels.subtitle_label?.value?.l10n?.[language])\n        subtitleEl.textContent = labels.subtitle_label.value.l10n[language];\n\n      const btnEl = document.getElementById('action_button');\n      if (btnEl && labels.button_text?.value?.l10n?.[language])\n        btnEl.textContent = labels.button_text.value.l10n[language];\n    }\n  </script>\n</body>\n</html>\n"},"systemPrompt":null,"countdown":null,"animated":true},"tags":[],"screenType":"WebEmbed","position":{"y":1104,"x":10586.666666666664},"id":"2a924111-073e-449b-8ba1-9dcb05aa6665"},"2ec901f7-b9ef-41b9-b7e9-713e5cefdc63":{"screenType":"WebEmbed","position":{"x":4368,"y":1424},"content":{"canvas":{"background":{"kind":"solid","content":{"color":"#1a1a1a"}},"webViewBackgroundColor":"#1a1a1a","insets":{"top":0,"start":16,"bottom":0,"end":16}},"header":{},"offlineFirst":true,"actionBar":{},"systemPrompt":null,"embed":{"childSections":[{"id":"section-moe87nw0-z7r8h","mediaContent":{"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png"}}}},"appearance":{},"kind":"Image"},"label":"frame_2131331307","order":0,"kind":"Media","layout":{"heightKind":"auto","scrollable":false,"flexShrink":1,"flexGrow":1}},{"label":"frame_2131331309","id":"section-moe8gqhb-nk7tv","mediaContent":{"kind":"Image","appearance":{},"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png"}}}}},"layout":{"heightKind":"auto","flexShrink":1,"flexGrow":1,"scrollable":false},"kind":"Media","order":1}],"callback":{"action":{"edges":[{"nextScreenId":"a2c37d0c-f323-4e5d-a157-a413c4034a43","transitionKind":"push","conditions":[]}],"kind":"advance"}},"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Preflop Comfort</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000000;\n      overflow: hidden;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    .nav-bar {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      padding: 14px 24px 0 16px;\n      gap: 16px;\n    }\n\n    .back-btn {\n      width: 44px;\n      height: 44px;\n      border-radius: 50%;\n      border: 1px solid rgba(255, 255, 255, 0.12);\n      background: rgba(255, 255, 255, 0.05);\n      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: rgba(255, 255, 255, 0.7);\n    }\n    .back-btn svg { width: 20px; height: 20px; }\n\n    .progress-bar-bg {\n      flex: 1;\n      height: 8px;\n      background-color: #222327;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      width: 64%;\n      background-color: #526DF2;\n      border-radius: 4px;\n    }\n\n    .header {\n      flex-shrink: 0;\n      padding: 32px 30px 0;\n    }\n\n    #title_label {\n      margin: 0 0 12px;\n      font-size: 22px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 28px;\n      letter-spacing: -0.26px;\n    }\n\n    #subtitle_label {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 400;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n\n    .options-list {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 32px 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      scrollbar-width: none;\n    }\n    .options-list::-webkit-scrollbar { display: none; }\n\n    .option-card {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 18px 16px;\n      border-radius: 20px;\n      background: #131416;\n      border: 2px solid #222327;\n      box-shadow: 0px 3px 0px 0px #222327;\n      cursor: pointer;\n      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;\n    }\n\n    .option-card.selected {\n      border-color: #526DF2;\n      background: #1A1E4C;\n      box-shadow: 0px 3px 0px 0px #526DF2;\n    }\n\n    .option-text { flex: 1; }\n\n    .option-title {\n      font-size: 17px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 22px;\n      letter-spacing: -0.43px;\n      margin-bottom: 4px;\n    }\n\n    .option-desc {\n      font-size: 13.5px;\n      font-weight: 400;\n      color: #A4A7AE;\n      line-height: 20px;\n      letter-spacing: -0.23px;\n    }\n\n    .option-radio {\n      flex-shrink: 0;\n      width: 20px;\n      height: 20px;\n      border-radius: 10px;\n      border: 1px solid #222327;\n      background: #000000;\n      transition: border-color 0.15s, background 0.15s;\n      position: relative;\n    }\n\n    .option-card.selected .option-radio {\n      border-color: #526DF2;\n      background: #526DF2;\n    }\n\n    .option-card.selected .option-radio::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      background: #FFFFFF;\n    }\n\n    .footer-hint {\n      flex-shrink: 0;\n      text-align: center;\n      margin: 0;\n      padding: 8px 24px 0;\n      font-size: 16px;\n      font-weight: 400;\n      font-style: italic;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"nav-bar\">\n      <button class=\"back-btn\" onclick=\"handleBack()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n      <div class=\"progress-bar-bg\">\n        <div class=\"progress-bar-fill\"></div>\n      </div>\n    </div>\n\n    <div class=\"header\">\n      <h1 id=\"title_label\">How confident are you in your preflop ranges?</h1>\n    </div>\n\n    <div class=\"options-list\">\n      <div class=\"option-card\" data-id=\"NOT_VERY_CONFIDENT\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Not very confident</div>\n          <div class=\"option-desc\">I often feel like I don't know what to do</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"MODERATELY_CONFIDENT\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Moderately confident</div>\n          <div class=\"option-desc\">I understand standard opens, but don't always adjust optimally</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"CONFIDENT\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Confident</div>\n          <div class=\"option-desc\">I know solid opening ranges and deviate accordingly</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"VERY_CONFIDENT\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Very confident</div>\n          <div class=\"option-desc\">I actively adjust ranges based on position, opponents, and game dynamics</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <p class=\"footer-hint\" id=\"hint_label\">You can adjust later</p>\n    </div>\n\n  </div>\n\n  <script>\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: 'en',\n      screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => {\n      console.log('leaveCustomScreen:', args);\n    };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => {\n            port.postMessage({ eventName: 'LeaveCustomScreen', args }, []);\n          };\n          window.backScreen = () => {\n            port.postMessage({ eventName: 'BackScreen', args: null }, []);\n          };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!isOnboardingOnline) {\n          console.log('Running in standalone mode');\n          initScreen();\n        }\n      }, 100);\n    });\n\n    const DATA_KEY = 'preflop_comfort';\n    let selectedId = null;\n\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) return currentWindow.segmentlySDK;\n          if (currentWindow === currentWindow.parent) break;\n          currentWindow = currentWindow.parent;\n        } catch (e) { break; }\n      }\n      return null;\n    }\n\n    function handleBack() { window.backScreen(); }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n\n      const sdk = getSegmentlySDK();\n      let saved = sdk ? sdk.getVariable(DATA_KEY) : null;\n      if (!saved) {\n        const inputs = window.onboardingOnlineCustomScreenData.inputs;\n        if (inputs && inputs[DATA_KEY]) {\n          const inputData = inputs[DATA_KEY];\n          saved = (typeof inputData === 'object' && 'value' in inputData)\n            ? inputData.value\n            : inputData;\n        }\n      }\n      if (saved) {\n        const card = document.querySelector(`.option-card[data-id=\"${saved}\"]`);\n        if (card) {\n          card.classList.add('selected');\n          selectedId = saved;\n        }\n      }\n\n      updateLabels();\n    }\n\n    function selectOption(card) {\n      haptic('selection');\n      document.querySelectorAll('.option-card').forEach(c => c.classList.remove('selected'));\n      card.classList.add('selected');\n      selectedId = card.dataset.id;\n\n      setTimeout(() => {\n        haptic('medium');\n        const sdk = getSegmentlySDK();\n        if (sdk) {\n          sdk.trackEvent('UserUpdatedValue', {\n            screenName: 'preflop_comfort',\n            answer: selectedId\n          });\n        }\n        if (sdk && sdk.setVariable) {\n          sdk.setVariable(DATA_KEY, selectedId);\n        }\n        window.leaveCustomScreen({ [DATA_KEY]: selectedId });\n      }, 400);\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language])\n        titleEl.textContent = labels.title_label.value.l10n[language];\n\n      const hintEl = document.getElementById('hint_label');\n      if (hintEl && labels.hint_label?.value?.l10n?.[language])\n        hintEl.textContent = labels.hint_label.value.l10n[language];\n    }\n  </script>\n</body>\n</html>\n"},"animated":true,"countdown":null},"name":"play-comfort-expert","tags":[],"id":"2ec901f7-b9ef-41b9-b7e9-713e5cefdc63"},"393b7413-a1bd-469a-a858-bee60fbb8eec":{"position":{"x":1344,"y":1104},"screenType":"WebEmbed","tags":[],"name":"intro","content":{"countdown":null,"animated":true,"embed":{"childSections":[{"label":"frame_2131331307","mediaContent":{"kind":"Image","appearance":{},"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png"}}}}},"id":"section-moe87nw0-z7r8h","kind":"Media","layout":{"flexGrow":1,"flexShrink":1,"scrollable":false,"heightKind":"auto"},"order":0}],"callback":{"action":{"kind":"advance","edges":[{"nextScreenId":"033690c6-8f3c-492e-9075-0793019edf0c","conditions":[],"transitionKind":"push"}]}},"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Welcome</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    /* --- Base & Mobile-First Styles --- */\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background:\n        radial-gradient(ellipse 160% 55% at 50% 115%, rgba(26, 30, 76, 0.9) 0%, rgba(10, 12, 40, 0.5) 45%, transparent 70%),\n        #000000;\n      overflow: hidden;\n      cursor: pointer;\n    }\n\n    /* --- Desktop Preview Simulation (iPhone Frame) --- */\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    /* --- Hero Image --- */\n    .hero-section {\n      flex: 0 1 auto;       /* shrink when the screen runs short */\n      min-height: 0;        /* allow children to compress below intrinsic size */\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 28px 16px 0;\n    }\n\n    .hero-image {\n      display: block;\n      width: 100%;\n      max-width: 340px;\n      height: auto;\n      max-height: 100%;     /* never overflow the (possibly shrunken) hero-section */\n      object-fit: contain;  /* preserve aspect ratio when height is the limiting factor */\n      pointer-events: none;\n    }\n\n    /* --- Text Block: floats in remaining space between hero and CTA --- */\n    .text-block {\n      flex-shrink: 0;\n      padding: 0 24px;\n      text-align: center;\n      margin-top: auto;\n      margin-bottom: auto;\n    }\n\n    #title_label {\n      margin: 0 0 12px;\n      font-size: 26px;\n      font-weight: 700;\n      color: #FFFFFF;\n      line-height: 1.25;\n      letter-spacing: -0.5px;\n    }\n\n    #subtitle_label {\n      margin: 0;\n      font-size: 15px;\n      font-weight: 400;\n      color: rgba(255, 255, 255, 0.5);\n      line-height: 1.5;\n      letter-spacing: 0.1px;\n    }\n\n    /* --- Button: pinned to bottom --- */\n    .footer {\n      padding: 20px 16px 24px;\n      flex-shrink: 0;\n    }\n\n    #action_button {\n      width: 100%;\n      padding: 14px 20px;\n      box-sizing: border-box;\n      background-color: #F5F5F5;\n      color: #000000;\n      border: none;\n      border-radius: 16px;\n      font-family: 'Inter', sans-serif;\n      font-size: 18px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);\n    }\n    #action_button:hover {\n      opacity: 0.9;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <!-- Hero Image -->\n    <div class=\"hero-section\">\n      <img class=\"hero-image\" src=\"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png\" alt=\"Poker table preview\">\n    </div>\n\n    <!-- Text block -->\n    <div class=\"text-block\">\n      <h1 id=\"title_label\">Poker trainer that<br>learns from you</h1>\n      <p id=\"subtitle_label\">Just like your TikTok feed, our trainer adapts to your behavior. Every mistake shapes what you see next, creating personalized drills to fix your exact leaks.</p>\n    </div>\n\n    <!-- Button pinned to bottom -->\n    <div class=\"footer\">\n      <button id=\"action_button\">Get Started</button>\n    </div>\n\n  </div>\n\n  <script>\n    // ========================================================================\n    // --- ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n    // ========================================================================\n\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: 'en',\n      screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => {\n      console.log('leaveCustomScreen:', args);\n    };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => {\n            port.postMessage({ eventName: 'LeaveCustomScreen', args }, []);\n          };\n          window.backScreen = () => {\n            port.postMessage({ eventName: 'BackScreen', args: null }, []);\n          };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!isOnboardingOnline) {\n          console.log('Running in standalone mode');\n          initScreen();\n        }\n      }, 100);\n    });\n\n    // ========================================================================\n    // --- SCREEN LOGIC ---\n    // ========================================================================\n\n    // -- Haptics --\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) {\n            return currentWindow.segmentlySDK;\n          }\n          if (currentWindow === currentWindow.parent) {\n            break;\n          }\n          currentWindow = currentWindow.parent;\n        } catch (e) {\n          console.warn('Cross-origin access blocked at level', i);\n          break;\n        }\n      }\n      return null;\n    }\n\n    function handleBack() {\n      window.backScreen();\n    }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n      console.log('Screen Initialized');\n\n      updateLabels();\n      addEventListeners();\n    }\n\n    function addEventListeners() {\n      let isNavigating = false;\n\n      const navigate = () => {\n        haptic('medium');\n        if (isNavigating) return;\n        isNavigating = true;\n\n        const sdk = getSegmentlySDK();\n        if (sdk) {\n          sdk.trackEvent('UserStartedOnboarding', { screenName: 'intro' });\n        }\n\n        if (sdk && sdk.setVariable) {\n          sdk.setVariable('action', 'get_started');\n        }\n        window.leaveCustomScreen({ action: 'get_started' });\n      };\n\n      const container = document.querySelector('.screen-container');\n      if (container) {\n        container.addEventListener('click', navigate);\n      }\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language]) {\n        titleEl.innerHTML = labels.title_label.value.l10n[language];\n      }\n\n      const subtitleEl = document.getElementById('subtitle_label');\n      if (subtitleEl && labels.subtitle_label?.value?.l10n?.[language]) {\n        subtitleEl.textContent = labels.subtitle_label.value.l10n[language];\n      }\n\n      const primaryEl = document.getElementById('action_button');\n      if (primaryEl && labels.button_text?.value?.l10n?.[language]) {\n        primaryEl.textContent = labels.button_text.value.l10n[language];\n      }\n    }\n  </script>\n</body>\n</html>\n"},"systemPrompt":null,"actionBar":{},"offlineFirst":true,"header":{},"canvas":{"webViewBackgroundColor":"#1a1a1a","insets":{"top":0,"end":16,"bottom":0,"start":16},"background":{"content":{"color":"#1a1a1a"},"kind":"solid"}}},"id":"393b7413-a1bd-469a-a858-bee60fbb8eec"},"3e352016-48a5-47de-b7ee-68c5beaf0172":{"tags":[],"name":"weak-areas-expert","content":{"actionBar":{},"offlineFirst":true,"header":{},"canvas":{"background":{"content":{"color":"#1a1a1a"},"kind":"solid"},"insets":{"top":0,"end":16,"bottom":0,"start":16},"webViewBackgroundColor":"#1a1a1a"},"countdown":null,"animated":true,"embed":{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Weak Areas</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000000;\n      overflow: hidden;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    .nav-bar {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      padding: 14px 24px 0 16px;\n      gap: 16px;\n    }\n\n    .back-btn {\n      width: 44px;\n      height: 44px;\n      border-radius: 50%;\n      border: 1px solid rgba(255, 255, 255, 0.12);\n      background: rgba(255, 255, 255, 0.05);\n      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: rgba(255, 255, 255, 0.7);\n    }\n    .back-btn svg { width: 20px; height: 20px; }\n\n    .progress-bar-bg {\n      flex: 1;\n      height: 8px;\n      background-color: #222327;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      width: 88%;\n      background-color: #526DF2;\n      border-radius: 4px;\n    }\n\n    .header {\n      flex-shrink: 0;\n      padding: 32px 30px 0;\n    }\n\n    #title_label {\n      margin: 0 0 12px;\n      font-size: 22px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 28px;\n      letter-spacing: -0.26px;\n    }\n\n    #subtitle_label {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 400;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n\n    .options-list {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 32px 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      scrollbar-width: none;\n    }\n    .options-list::-webkit-scrollbar { display: none; }\n\n    .option-card {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 18px 16px;\n      border-radius: 20px;\n      background: #131416;\n      border: 2px solid #222327;\n      box-shadow: 0px 3px 0px 0px #222327;\n      cursor: pointer;\n      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;\n    }\n\n    .option-card.selected {\n      border-color: #526DF2;\n      background: #1A1E4C;\n      box-shadow: 0px 3px 0px 0px #526DF2;\n    }\n\n    .option-text { flex: 1; }\n\n    .option-title {\n      flex: 1;\n      font-size: 17px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 22px;\n      letter-spacing: -0.43px;\n    }\n\n    .option-desc {\n      font-size: 13.5px;\n      font-weight: 400;\n      color: #A4A7AE;\n      line-height: 20px;\n      letter-spacing: -0.23px;\n      margin-top: 4px;\n    }\n\n    .option-check {\n      flex-shrink: 0;\n      width: 20px;\n      height: 20px;\n      border-radius: 8px;\n      border: 1px solid #393B41;\n      background: #222327;\n      transition: border-color 0.15s, background 0.15s;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .option-card.selected .option-check {\n      border-color: #526DF2;\n      background: #526DF2;\n    }\n\n    .option-card.selected .option-check::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 5px;\n      height: 9px;\n      border-right: 2px solid #FFFFFF;\n      border-bottom: 2px solid #FFFFFF;\n      transform: translate(-50%, -60%) rotate(40deg);\n    }\n\n    .footer-hint {\n      flex-shrink: 0;\n      text-align: center;\n      margin: 0;\n      padding: 8px 24px 0;\n      font-size: 16px;\n      font-weight: 400;\n      font-style: italic;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n\n    .footer {\n      flex-shrink: 0;\n      padding: 20px 24px 24px;\n    }\n\n    #action_button {\n      width: 100%;\n      padding: 14px 20px;\n      box-sizing: border-box;\n      background-color: #F5F5F5;\n      color: #000000;\n      border: none;\n      border-radius: 16px;\n      font-family: 'Inter', sans-serif;\n      font-size: 18px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);\n    }\n    #action_button:hover:not(:disabled) { opacity: 0.9; }\n    #action_button:disabled {\n      opacity: 0.3;\n      cursor: default;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"nav-bar\">\n      <button class=\"back-btn\" onclick=\"handleBack()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n      <div class=\"progress-bar-bg\">\n        <div class=\"progress-bar-fill\"></div>\n      </div>\n    </div>\n\n    <div class=\"header\">\n      <h1 id=\"title_label\">Which area's do you struggle with the most right now?</h1>\n      <p id=\"subtitle_label\">We'll prioritize these concepts and spots in your training to start</p>\n    </div>\n\n    <div class=\"options-list\">\n      <div class=\"option-card\" data-id=\"PREFLOP\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Preflop</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"FACING_AGGRESSION\" onclick=\"toggleOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Facing agression</div>\n          <div class=\"option-desc\">Bets, raises, and check-raises</div>\n        </div>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"POSTFLOP_DECISIONS\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Postflop decision-making</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"BLUFF_SPOTS\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Selecting bluff / semi-bluff spots</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"DEFENDING_BLINDS\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Defending blinds</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"PLAYING_OOP\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Playing out of position</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"BET_SIZING\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Bet sizing</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <p class=\"footer-hint\" id=\"hint_label\">You can adjust later</p>\n    </div>\n\n    <div class=\"footer\">\n      <button id=\"action_button\" disabled onclick=\"handleContinue()\">Continue</button>\n    </div>\n\n  </div>\n\n  <script>\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {}, labels: {}, userData: {}, customData: {},\n      webOnboarding: {}, incomeUserData: {}, language: 'en', screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => { console.log('leaveCustomScreen:', args); };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => { port.postMessage({ eventName: 'LeaveCustomScreen', args }, []); };\n          window.backScreen = () => { port.postMessage({ eventName: 'BackScreen', args: null }, []); };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => { if (!isOnboardingOnline) initScreen(); }, 100);\n    });\n\n    const DATA_KEY = 'weak_areas';\n    let selectedIds = [];\n\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) return currentWindow.segmentlySDK;\n          if (currentWindow === currentWindow.parent) break;\n          currentWindow = currentWindow.parent;\n        } catch (e) { break; }\n      }\n      return null;\n    }\n\n    function handleBack() { window.backScreen(); }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n\n      const sdk = getSegmentlySDK();\n      let saved = sdk ? sdk.getVariable(DATA_KEY) : null;\n      if (!saved) {\n        const inputs = window.onboardingOnlineCustomScreenData.inputs;\n        if (inputs && inputs[DATA_KEY]) {\n          const inputData = inputs[DATA_KEY];\n          saved = (typeof inputData === 'object' && 'value' in inputData) ? inputData.value : inputData;\n        }\n      }\n      if (saved) {\n        const ids = typeof saved === 'string' ? saved.split(',') : saved;\n        if (Array.isArray(ids)) {\n          ids.forEach(id => {\n            const card = document.querySelector(`.option-card[data-id=\"${id}\"]`);\n            if (card) card.classList.add('selected');\n          });\n          selectedIds = ids;\n          updateButton();\n        }\n      }\n\n      updateLabels();\n    }\n\n    function toggleOption(card) {\n      haptic('selection');\n      const id = card.dataset.id;\n      if (card.classList.contains('selected')) {\n        card.classList.remove('selected');\n        selectedIds = selectedIds.filter(i => i !== id);\n      } else {\n        card.classList.add('selected');\n        selectedIds.push(id);\n      }\n      updateButton();\n    }\n\n    function updateButton() {\n      document.getElementById('action_button').disabled = selectedIds.length === 0;\n    }\n\n    function handleContinue() {\n      if (selectedIds.length === 0) return;\n      haptic('medium');\n\n      const sdk = getSegmentlySDK();\n      if (sdk) sdk.trackEvent('UserUpdatedValue', { screenName: 'weak_areas', answer: selectedIds.join(',') });\n      if (sdk && sdk.setVariable) sdk.setVariable(DATA_KEY, selectedIds.join(','));\n      window.leaveCustomScreen({ [DATA_KEY]: selectedIds.join(',') });\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language])\n        titleEl.textContent = labels.title_label.value.l10n[language];\n\n      const subtitleEl = document.getElementById('subtitle_label');\n      if (subtitleEl && labels.subtitle_label?.value?.l10n?.[language])\n        subtitleEl.textContent = labels.subtitle_label.value.l10n[language];\n\n      const hintEl = document.getElementById('hint_label');\n      if (hintEl && labels.hint_label?.value?.l10n?.[language])\n        hintEl.textContent = labels.hint_label.value.l10n[language];\n\n      const btnEl = document.getElementById('action_button');\n      if (btnEl && labels.button_text?.value?.l10n?.[language])\n        btnEl.textContent = labels.button_text.value.l10n[language];\n    }\n  </script>\n</body>\n</html>\n","childSections":[{"order":0,"layout":{"flexShrink":1,"scrollable":false,"flexGrow":1,"heightKind":"auto"},"kind":"Media","id":"section-moe87nw0-z7r8h","mediaContent":{"appearance":{},"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png"}}}},"kind":"Image"},"label":"frame_2131331307"},{"label":"frame_2131331309","id":"section-moe8gqhb-nk7tv","mediaContent":{"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png"}}}},"appearance":{},"kind":"Image"},"layout":{"heightKind":"auto","flexGrow":1,"flexShrink":1,"scrollable":false},"kind":"Media","order":1}],"callback":{"action":{"kind":"advance","edges":[{"nextScreenId":"168804a9-a17a-4776-90e5-a3398fd93df9","transitionKind":"push","conditions":[]}]}}},"systemPrompt":null},"position":{"y":1408,"x":5488},"screenType":"WebEmbed","id":"3e352016-48a5-47de-b7ee-68c5beaf0172"},"3ea17d81-e32d-4b43-817c-b623030af0ca":{"tags":[],"name":"frequency-beginner","content":{"animated":true,"countdown":null,"systemPrompt":null,"embed":{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Play Frequency</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000000;\n      overflow: hidden;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    /* --- Nav Bar --- */\n    .nav-bar {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      padding: 14px 24px 0 16px;\n      gap: 16px;\n    }\n\n    .back-btn {\n      width: 44px;\n      height: 44px;\n      border-radius: 50%;\n      border: 1px solid rgba(255, 255, 255, 0.12);\n      background: rgba(255, 255, 255, 0.05);\n      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: rgba(255, 255, 255, 0.7);\n    }\n    .back-btn svg { width: 20px; height: 20px; }\n\n    .progress-bar-bg {\n      flex: 1;\n      height: 8px;\n      background-color: #222327;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      width: 27.5%;\n      background-color: #526DF2;\n      border-radius: 4px;\n    }\n\n    /* --- Header --- */\n    .header {\n      flex-shrink: 0;\n      padding: 32px 30px 0;\n    }\n\n    #title_label {\n      margin: 0;\n      font-size: 22px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 28px;\n      letter-spacing: -0.26px;\n    }\n\n    /* --- Options List --- */\n    .options-list {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 32px 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      scrollbar-width: none;\n    }\n    .options-list::-webkit-scrollbar { display: none; }\n\n    .option-card {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 18px 16px;\n      border-radius: 20px;\n      background: #131416;\n      border: 2px solid #222327;\n      box-shadow: 0px 3px 0px 0px #222327;\n      cursor: pointer;\n      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;\n    }\n\n    .option-card.selected {\n      border-color: #526DF2;\n      background: #1A1E4C;\n      box-shadow: 0px 3px 0px 0px #526DF2;\n    }\n\n    .option-text {\n      flex: 1;\n    }\n\n    .option-title {\n      font-size: 17px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 22px;\n      letter-spacing: -0.43px;\n      margin-bottom: 4px;\n    }\n\n    .option-desc {\n      font-size: 13.5px;\n      font-weight: 400;\n      color: #A4A7AE;\n      line-height: 20px;\n      letter-spacing: -0.23px;\n    }\n\n    /* Radio indicator */\n    .option-radio {\n      flex-shrink: 0;\n      width: 20px;\n      height: 20px;\n      border-radius: 10px;\n      border: 1px solid #222327;\n      background: #000000;\n      transition: border-color 0.15s, background 0.15s;\n      position: relative;\n    }\n\n    .option-card.selected .option-radio {\n      border-color: #526DF2;\n      background: #526DF2;\n    }\n\n    .option-card.selected .option-radio::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      background: #FFFFFF;\n    }\n\n    /* --- Footer hint --- */\n    .footer-hint {\n      flex-shrink: 0;\n      text-align: center;\n      padding: 0 24px 32px;\n      font-size: 16px;\n      font-weight: 400;\n      font-style: italic;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <!-- Nav bar -->\n    <div class=\"nav-bar\">\n      <button class=\"back-btn\" onclick=\"handleBack()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n      <div class=\"progress-bar-bg\">\n        <div class=\"progress-bar-fill\"></div>\n      </div>\n    </div>\n\n    <!-- Header -->\n    <div class=\"header\">\n      <h1 id=\"title_label\">How often do you currently play poker?</h1>\n    </div>\n\n    <!-- Options -->\n    <div class=\"options-list\">\n      <div class=\"option-card\" data-id=\"RARELY\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Rarely</div>\n          <div class=\"option-desc\">A few time a month or less</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"OCCASIONALLY\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Occasionally</div>\n          <div class=\"option-desc\">About once or twice a week</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"REGULARLY\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Regularly</div>\n          <div class=\"option-desc\">3-5 sessions per week</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"VERY_FREQUENTLY\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Very frequently</div>\n          <div class=\"option-desc\">Almost every day</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n    </div>\n\n    <!-- Footer hint -->\n    <p class=\"footer-hint\" id=\"hint_label\">You can adjust later</p>\n\n  </div>\n\n  <script>\n    // ========================================================================\n    // --- ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n    // ========================================================================\n\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: 'en',\n      screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => {\n      console.log('leaveCustomScreen:', args);\n    };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => {\n            port.postMessage({ eventName: 'LeaveCustomScreen', args }, []);\n          };\n          window.backScreen = () => {\n            port.postMessage({ eventName: 'BackScreen', args: null }, []);\n          };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!isOnboardingOnline) {\n          console.log('Running in standalone mode');\n          initScreen();\n        }\n      }, 100);\n    });\n\n    // ========================================================================\n    // --- SCREEN LOGIC ---\n    // ========================================================================\n\n    const DATA_KEY = 'play_frequency';\n    let selectedId = null;\n\n    // -- Haptics --\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) {\n            return currentWindow.segmentlySDK;\n          }\n          if (currentWindow === currentWindow.parent) {\n            break;\n          }\n          currentWindow = currentWindow.parent;\n        } catch (e) {\n          console.warn('Cross-origin access blocked at level', i);\n          break;\n        }\n      }\n      return null;\n    }\n\n    function handleBack() {\n      window.backScreen();\n    }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n      console.log('Screen Initialized');\n\n      // Restore saved selection\n      const sdk = getSegmentlySDK();\n      let saved = sdk ? sdk.getVariable(DATA_KEY) : null;\n      if (!saved) {\n        const inputs = window.onboardingOnlineCustomScreenData.inputs;\n        if (inputs && inputs[DATA_KEY]) {\n          const inputData = inputs[DATA_KEY];\n          saved = (typeof inputData === 'object' && 'value' in inputData)\n            ? inputData.value\n            : inputData;\n        }\n      }\n      if (saved) {\n        const card = document.querySelector(`.option-card[data-id=\"${saved}\"]`);\n        if (card) {\n          card.classList.add('selected');\n          selectedId = saved;\n        }\n      }\n\n      updateLabels();\n    }\n\n    function selectOption(card) {\n      haptic('selection');\n      document.querySelectorAll('.option-card').forEach(c => c.classList.remove('selected'));\n      card.classList.add('selected');\n      selectedId = card.dataset.id;\n\n      // Auto-advance after short delay\n      setTimeout(() => {\n        haptic('medium');\n        const sdk = getSegmentlySDK();\n        if (sdk) {\n          sdk.trackEvent('UserUpdatedValue', {\n            screenName: 'play_frequency',\n            answer: selectedId\n          });\n        }\n        if (sdk && sdk.setVariable) {\n          sdk.setVariable(DATA_KEY, selectedId);\n        }\n        window.leaveCustomScreen({\n          [DATA_KEY]: selectedId\n        });\n      }, 400);\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language]) {\n        titleEl.textContent = labels.title_label.value.l10n[language];\n      }\n\n      const hintEl = document.getElementById('hint_label');\n      if (hintEl && labels.hint_label?.value?.l10n?.[language]) {\n        hintEl.textContent = labels.hint_label.value.l10n[language];\n      }\n    }\n  </script>\n</body>\n</html>\n","childSections":[{"order":0,"kind":"Media","layout":{"heightKind":"auto","flexShrink":1,"flexGrow":1,"scrollable":false},"mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png"}}}},"appearance":{},"kind":"Image"},"id":"section-moe87nw0-z7r8h","label":"frame_2131331307"},{"label":"frame_2131331309","mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png"}}}},"appearance":{}},"id":"section-moe8gqhb-nk7tv","kind":"Media","layout":{"heightKind":"auto","scrollable":false,"flexShrink":1,"flexGrow":1},"order":1}],"callback":{"action":{"edges":[{"transitionKind":"push","nextScreenId":"ddfd110c-e0e9-45cb-9737-41682ea83c64","conditions":[]}],"kind":"advance"}}},"actionBar":{},"canvas":{"background":{"kind":"solid","content":{"color":"#1a1a1a"}},"insets":{"top":0,"end":16,"bottom":0,"start":16},"webViewBackgroundColor":"#1a1a1a"},"offlineFirst":true,"header":{}},"position":{"y":64,"x":2688},"screenType":"WebEmbed","id":"3ea17d81-e32d-4b43-817c-b623030af0ca"},"4a0dfc4a-62da-4c78-ade1-25c964afe9bd":{"position":{"x":8898.666666666666,"y":1104},"screenType":"WebEmbed","tags":[],"content":{"embed":{"callback":{"action":{"kind":"advance","edges":[{"nextScreenId":"52092e9a-dd2a-4004-be87-a36ae7a8fcc6","conditions":[],"transitionKind":"push"}]}},"childSections":[{"id":"section-moe87nw0-z7r8h","mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png"}}}},"appearance":{}},"label":"frame_2131331307","order":0,"kind":"Media","layout":{"flexShrink":1,"scrollable":false,"flexGrow":1,"heightKind":"auto"}},{"mediaContent":{"appearance":{},"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png"}}}},"kind":"Image"},"id":"section-moe8gqhb-nk7tv","label":"frame_2131331309","order":1,"kind":"Media","layout":{"flexShrink":1,"flexGrow":1,"scrollable":false,"heightKind":"auto"}},{"label":"1-stats-background","id":"section-moe8qa2a-3u5xz","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115572624_1-stats-background/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115572624_1-stats-background/small.png"}}}},"appearance":{},"kind":"Image"},"layout":{"heightKind":"auto","scrollable":false,"flexGrow":1,"flexShrink":1},"kind":"Media","order":2},{"order":3,"layout":{"heightKind":"auto","scrollable":false,"flexShrink":1,"flexGrow":1},"kind":"Media","id":"section-moe8rbkb-4jjcw","mediaContent":{"appearance":{},"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115622136_hero/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115622136_hero/small.png"}}}},"kind":"Image"},"label":"hero"},{"order":4,"layout":{"flexShrink":1,"scrollable":false,"flexGrow":1,"heightKind":"auto"},"kind":"Media","mediaContent":{"appearance":{},"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115693642_hero-sessions-adapted/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115693642_hero-sessions-adapted/small.png"}}}},"kind":"Image"},"id":"section-moe8suth-031ep","label":"hero-sessions-adapted"},{"id":"section-moe8tlwx-91z5s","mediaContent":{"kind":"Image","appearance":{},"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115729103_email-background/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115729103_email-background/small.png"}}}}},"label":"email-background","order":5,"kind":"Media","layout":{"heightKind":"auto","flexGrow":1,"flexShrink":1,"scrollable":false}}],"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Training Time</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000000;\n      overflow: hidden;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    .nav-bar {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      padding: 14px 24px 0 16px;\n      gap: 16px;\n    }\n\n    .back-btn {\n      width: 44px;\n      height: 44px;\n      border-radius: 50%;\n      border: 1px solid rgba(255, 255, 255, 0.12);\n      background: rgba(255, 255, 255, 0.05);\n      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: rgba(255, 255, 255, 0.7);\n    }\n    .back-btn svg { width: 20px; height: 20px; }\n\n    .progress-bar-bg {\n      flex: 1;\n      height: 8px;\n      background-color: #222327;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      width: 95%;\n      background-color: #526DF2;\n      border-radius: 4px;\n    }\n\n    .header {\n      flex-shrink: 0;\n      padding: 32px 30px 0;\n    }\n\n    #title_label {\n      margin: 0 0 12px;\n      font-size: 22px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 28px;\n      letter-spacing: -0.26px;\n    }\n\n    #subtitle_label {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 400;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n\n    .options-list {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 32px 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      scrollbar-width: none;\n    }\n    .options-list::-webkit-scrollbar { display: none; }\n\n    .option-card {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 18px 16px;\n      border-radius: 20px;\n      background: #131416;\n      border: 2px solid #222327;\n      box-shadow: 0px 3px 0px 0px #222327;\n      cursor: pointer;\n      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;\n    }\n\n    .option-card.selected {\n      border-color: #526DF2;\n      background: #1A1E4C;\n      box-shadow: 0px 3px 0px 0px #526DF2;\n    }\n\n    .option-title {\n      flex: 1;\n      font-size: 17px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 22px;\n      letter-spacing: -0.43px;\n    }\n\n    .option-radio {\n      flex-shrink: 0;\n      width: 20px;\n      height: 20px;\n      border-radius: 10px;\n      border: 1px solid #222327;\n      background: #000000;\n      transition: border-color 0.15s, background 0.15s;\n      position: relative;\n    }\n\n    .option-card.selected .option-radio {\n      border-color: #526DF2;\n      background: #526DF2;\n    }\n\n    .option-card.selected .option-radio::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      background: #FFFFFF;\n    }\n\n    .footer-hint {\n      flex-shrink: 0;\n      text-align: center;\n      margin: 0;\n      padding: 8px 24px 0;\n      font-size: 16px;\n      font-weight: 400;\n      font-style: italic;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n\n    .footer {\n      flex-shrink: 0;\n      padding: 20px 24px 24px;\n      margin-top: auto;\n    }\n\n    #action_button {\n      width: 100%;\n      padding: 14px 20px;\n      box-sizing: border-box;\n      background-color: #F5F5F5;\n      color: #000000;\n      border: none;\n      border-radius: 16px;\n      font-family: 'Inter', sans-serif;\n      font-size: 18px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);\n    }\n    #action_button:hover:not(:disabled) { opacity: 0.9; }\n    #action_button:disabled {\n      opacity: 0.3;\n      cursor: default;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"nav-bar\">\n      <button class=\"back-btn\" onclick=\"handleBack()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n      <div class=\"progress-bar-bg\">\n        <div class=\"progress-bar-fill\"></div>\n      </div>\n    </div>\n\n    <div class=\"header\">\n      <h1 id=\"title_label\">How much time do you want to train each day?</h1>\n      <p id=\"subtitle_label\">Consistency matters more than long sessions for hitting your goals</p>\n    </div>\n\n    <div class=\"options-list\">\n      <div class=\"option-card\" data-id=\"2_MIN\" onclick=\"selectOption(this)\">\n        <span class=\"option-title\">2 min / day</span>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"5_MIN\" onclick=\"selectOption(this)\">\n        <span class=\"option-title\">5 min / day</span>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"10_MIN\" onclick=\"selectOption(this)\">\n        <span class=\"option-title\">10 min / day</span>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"20_MIN\" onclick=\"selectOption(this)\">\n        <span class=\"option-title\">20 min / day</span>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <p class=\"footer-hint\" id=\"hint_label\">You can adjust later</p>\n    </div>\n\n    <div class=\"footer\">\n      <button id=\"action_button\" disabled onclick=\"handleContinue()\">Continue</button>\n    </div>\n\n  </div>\n\n  <script>\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {}, labels: {}, userData: {}, customData: {},\n      webOnboarding: {}, incomeUserData: {}, language: 'en', screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => { console.log('leaveCustomScreen:', args); };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => { port.postMessage({ eventName: 'LeaveCustomScreen', args }, []); };\n          window.backScreen = () => { port.postMessage({ eventName: 'BackScreen', args: null }, []); };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => { if (!isOnboardingOnline) initScreen(); }, 100);\n    });\n\n    const DATA_KEY = 'training_time';\n    let selectedId = null;\n\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) return currentWindow.segmentlySDK;\n          if (currentWindow === currentWindow.parent) break;\n          currentWindow = currentWindow.parent;\n        } catch (e) { break; }\n      }\n      return null;\n    }\n\n    function handleBack() { window.backScreen(); }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n\n      const sdk = getSegmentlySDK();\n      let saved = sdk ? sdk.getVariable(DATA_KEY) : null;\n      if (!saved) {\n        const inputs = window.onboardingOnlineCustomScreenData.inputs;\n        if (inputs && inputs[DATA_KEY]) {\n          const inputData = inputs[DATA_KEY];\n          saved = (typeof inputData === 'object' && 'value' in inputData) ? inputData.value : inputData;\n        }\n      }\n      if (saved) {\n        const card = document.querySelector(`.option-card[data-id=\"${saved}\"]`);\n        if (card) {\n          card.classList.add('selected');\n          selectedId = saved;\n          document.getElementById('action_button').disabled = false;\n        }\n      }\n\n      updateLabels();\n    }\n\n    function selectOption(card) {\n      haptic('selection');\n      document.querySelectorAll('.option-card').forEach(c => c.classList.remove('selected'));\n      card.classList.add('selected');\n      selectedId = card.dataset.id;\n      document.getElementById('action_button').disabled = false;\n    }\n\n    function handleContinue() {\n      if (!selectedId) return;\n      haptic('medium');\n\n      const sdk = getSegmentlySDK();\n      if (sdk) sdk.trackEvent('UserUpdatedValue', { screenName: 'training_time', answer: selectedId });\n      if (sdk && sdk.setVariable) sdk.setVariable(DATA_KEY, selectedId);\n      window.leaveCustomScreen({ [DATA_KEY]: selectedId });\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language])\n        titleEl.textContent = labels.title_label.value.l10n[language];\n\n      const subtitleEl = document.getElementById('subtitle_label');\n      if (subtitleEl && labels.subtitle_label?.value?.l10n?.[language])\n        subtitleEl.textContent = labels.subtitle_label.value.l10n[language];\n\n      const hintEl = document.getElementById('hint_label');\n      if (hintEl && labels.hint_label?.value?.l10n?.[language])\n        hintEl.textContent = labels.hint_label.value.l10n[language];\n\n      const btnEl = document.getElementById('action_button');\n      if (btnEl && labels.button_text?.value?.l10n?.[language])\n        btnEl.textContent = labels.button_text.value.l10n[language];\n    }\n  </script>\n</body>\n</html>\n"},"systemPrompt":null,"countdown":null,"animated":true,"offlineFirst":true,"header":{},"canvas":{"background":{"kind":"solid","content":{"color":"#1a1a1a"}},"insets":{"top":0,"bottom":0,"end":16,"start":16},"webViewBackgroundColor":"#1a1a1a"},"actionBar":{}},"name":"training-time","id":"4a0dfc4a-62da-4c78-ade1-25c964afe9bd"},"52092e9a-dd2a-4004-be87-a36ae7a8fcc6":{"position":{"y":1104,"x":9461.333333333332},"screenType":"WebEmbed","tags":[],"name":"time-to-build","content":{"embed":{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Loading</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      background: #000000;\n      overflow: hidden;\n      position: relative;\n    }\n\n    /* Figma glow: huge blurred pill, mostly above screen, bleeds blue down from top */\n    .screen-container::before {\n      content: '';\n      position: absolute;\n      width: 252%;\n      aspect-ratio: 943 / 882;\n      left: 50%;\n      top: -65%;\n      transform: translateX(-50%);\n      border-radius: 9999px;\n      background: linear-gradient(180deg, rgba(82, 111, 242, 0.00) 62.39%, rgba(82, 111, 242, 0.50) 100%);\n      filter: blur(116px);\n      pointer-events: none;\n      z-index: 0;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    /* Ensure all content sits above the glow pseudo-element */\n    .screen-container > * {\n      position: relative;\n      z-index: 1;\n    }\n\n    /* --- Hero image --- */\n    .hero-image {\n      width: 200px;\n      height: auto;\n      margin-bottom: 24px;\n      pointer-events: none;\n      opacity: 0;\n      transform: translateY(20px);\n      animation: fadeInUp 0.6s ease-out 0.2s forwards;\n    }\n\n    @keyframes fadeInUp {\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    /* --- Text --- */\n    .loading-text {\n      text-align: center;\n      padding: 0 32px;\n      opacity: 0;\n      animation: fadeIn 0.5s ease-out 0.5s forwards;\n    }\n\n    @keyframes fadeIn {\n      to { opacity: 1; }\n    }\n\n    #title_label {\n      margin: 0;\n      font-size: 28px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 34px;\n      letter-spacing: -0.5px;\n      text-align: center;\n    }\n\n    .accent {\n      color: #526DF2;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <!-- Hero image -->\n    <img class=\"hero-image\" src=\"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115848553_cards-hero/origin.png\" alt=\"Poker cards\">\n\n    <!-- Text -->\n    <div class=\"loading-text\">\n      <h1 id=\"title_label\">Time to build your <br><span class=\"accent\">custom poker trainer</span></h1>\n    </div>\n\n  </div>\n\n  <script>\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {}, labels: {}, userData: {}, customData: {},\n      webOnboarding: {}, incomeUserData: {}, language: 'en', screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => { console.log('leaveCustomScreen:', args); };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => { port.postMessage({ eventName: 'LeaveCustomScreen', args }, []); };\n          window.backScreen = () => { port.postMessage({ eventName: 'BackScreen', args: null }, []); };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => { if (!isOnboardingOnline) initScreen(); }, 100);\n    });\n\n    // -- Haptics --\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) return currentWindow.segmentlySDK;\n          if (currentWindow === currentWindow.parent) break;\n          currentWindow = currentWindow.parent;\n        } catch (e) { break; }\n      }\n      return null;\n    }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n\n      updateLabels();\n\n      // Auto-advance after 2.5 seconds\n      setTimeout(() => {\n        haptic('medium');\n        const sdk = getSegmentlySDK();\n        if (sdk) sdk.trackEvent('UserContinuedOnboarding', { screenName: 'loading' });\n        if (sdk && sdk.setVariable) sdk.setVariable('action', 'continue');\n        window.leaveCustomScreen({ action: 'continue' });\n      }, 2500);\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language])\n        titleEl.innerHTML = labels.title_label.value.l10n[language];\n    }\n  </script>\n</body>\n</html>\n","callback":{"action":{"kind":"advance","edges":[{"conditions":[],"nextScreenId":"095e1827-4fdc-46c1-bd1f-5090a3501e97","transitionKind":"push"}]}},"childSections":[{"order":0,"kind":"Media","layout":{"heightKind":"auto","scrollable":false,"flexShrink":1,"flexGrow":1},"id":"section-moe87nw0-z7r8h","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png"}}}},"appearance":{},"kind":"Image"},"label":"frame_2131331307"},{"id":"section-moe8gqhb-nk7tv","mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png"}}}},"appearance":{}},"label":"frame_2131331309","order":1,"kind":"Media","layout":{"flexGrow":1,"flexShrink":1,"scrollable":false,"heightKind":"auto"}},{"label":"1-stats-background","id":"section-moe8qa2a-3u5xz","mediaContent":{"kind":"Image","appearance":{},"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115572624_1-stats-background/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115572624_1-stats-background/small.png"}}}}},"layout":{"scrollable":false,"flexGrow":1,"flexShrink":1,"heightKind":"auto"},"kind":"Media","order":2},{"label":"hero","id":"section-moe8rbkb-4jjcw","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115622136_hero/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115622136_hero/small.png"}}}},"appearance":{},"kind":"Image"},"layout":{"heightKind":"auto","scrollable":false,"flexGrow":1,"flexShrink":1},"kind":"Media","order":3},{"kind":"Media","layout":{"scrollable":false,"flexShrink":1,"flexGrow":1,"heightKind":"auto"},"order":4,"label":"hero-sessions-adapted","id":"section-moe8suth-031ep","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115693642_hero-sessions-adapted/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115693642_hero-sessions-adapted/small.png"}}}},"appearance":{},"kind":"Image"}},{"order":5,"kind":"Media","layout":{"heightKind":"auto","scrollable":false,"flexGrow":1,"flexShrink":1},"id":"section-moe8tlwx-91z5s","mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115729103_email-background/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115729103_email-background/small.png"}}}},"appearance":{}},"label":"email-background"},{"id":"section-moe8w6g7-3bm7l","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115848553_cards-hero/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115848553_cards-hero/small.png"}}}},"appearance":{},"kind":"Image"},"label":"cards-hero","order":6,"layout":{"flexShrink":1,"scrollable":false,"flexGrow":1,"heightKind":"auto"},"kind":"Media"}]},"systemPrompt":null,"countdown":null,"animated":true,"offlineFirst":true,"header":{},"canvas":{"webViewBackgroundColor":"#1a1a1a","insets":{"start":16,"end":16,"bottom":0,"top":0},"background":{"content":{"color":"#1a1a1a"},"kind":"solid"}},"actionBar":{}},"id":"52092e9a-dd2a-4004-be87-a36ae7a8fcc6"},"5423526e-d3e8-4386-bc93-93da3b5e2dfb":{"screenType":"WebEmbed","position":{"x":12544,"y":1104},"name":"final","content":{"canvas":{"insets":{"start":16,"bottom":0,"end":16,"top":0},"webViewBackgroundColor":"#1a1a1a","background":{"content":{"color":"#1a1a1a"},"kind":"solid"}},"header":{},"offlineFirst":true,"actionBar":{},"systemPrompt":null,"embed":{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Download</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; margin: 0; padding: 0; }\n\n    body, html {\n      width: 100%;\n      height: 100%;\n      font-family: -apple-system, 'SF Pro Display', 'SF Pro Text', BlinkMacSystemFont, 'Inter', \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      background: #000000;\n      overflow: hidden;\n      position: relative;\n    }\n\n    /* Figma glow: 943.515×882px pill at top:-573px → blue bleeds in from top */\n    .screen-container::before {\n      content: '';\n      position: absolute;\n      width: 252%;\n      aspect-ratio: 943 / 882;\n      left: 50%;\n      top: -65%;\n      transform: translateX(-50%);\n      border-radius: 9999px;\n      background: linear-gradient(180deg, rgba(82, 111, 242, 0.00) 62.39%, rgba(82, 111, 242, 0.50) 100%);\n      filter: blur(116px);\n      pointer-events: none;\n      z-index: 0;\n    }\n\n    /* Ensure all content sits above the glow */\n    .screen-container > * {\n      position: relative;\n      z-index: 1;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    .content {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      padding: 0 32px;\n      width: 100%;\n    }\n\n    /* --- Check icon --- */\n    .check-circle {\n      width: 96px;\n      height: 96px;\n      border-radius: 9999px;\n      background: rgba(255, 255, 255, 0.2);\n      border: 1px solid rgba(255, 255, 255, 0.3);\n      backdrop-filter: blur(6px);\n      -webkit-backdrop-filter: blur(6px);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-bottom: 40px;\n      box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);\n    }\n\n    .check-circle svg {\n      width: 48px;\n      height: 48px;\n      color: rgba(255, 255, 255, 0.7);\n    }\n\n    /* --- Title --- */\n    #title_label {\n      font-size: 28px;\n      font-weight: 400;\n      color: #FFFFFF;\n      line-height: 34px;\n      letter-spacing: -0.5px;\n      text-align: center;\n      margin-bottom: 8px;\n    }\n\n    /* --- Message --- */\n    .message {\n      font-size: 16px;\n      font-weight: 400;\n      color: #E3E3E5;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n      text-align: center;\n      margin-bottom: 30px;\n      max-width: 327px;\n    }\n\n    /* --- Action card --- */\n    .action-card {\n      width: 320px;\n      max-width: 100%;\n      background: #FFFFFF;\n      border-radius: 16px;\n      padding: 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);\n    }\n\n    .action-card-label {\n      font-size: 16px;\n      font-weight: 400;\n      color: #3A3F58;\n      line-height: 20px;\n      letter-spacing: -0.5px;\n      text-align: center;\n      text-transform: uppercase;\n    }\n\n    #download-btn {\n      width: 100%;\n      padding: 16px;\n      background: #1A1A1A;\n      color: #FFFFFF;\n      border: none;\n      border-radius: 12px;\n      font-family: -apple-system, 'SF Pro Display', 'Inter', sans-serif;\n      font-size: 16px;\n      font-weight: 500;\n      letter-spacing: -0.31px;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 20px;\n    }\n\n    #download-btn:hover { opacity: 0.9; }\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n  <div class=\"content\">\n\n    <!-- Check icon -->\n    <div class=\"check-circle\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n      </svg>\n    </div>\n\n    <!-- Title -->\n    <h1 id=\"title_label\">You're In!</h1>\n\n    <!-- Message -->\n    <p class=\"message\">Your Custom Trainer is Ready.<br><br>Download the app to continue. You'll be signed in automatically.<br><br>If you have trouble signing in,<br>check your email for the link.</p>\n\n    <!-- Action card -->\n    <div class=\"action-card\">\n      <span class=\"action-card-label\">Next Step</span>\n      <button id=\"download-btn\" onclick=\"handleDownload()\">Download App</button>\n    </div>\n\n  </div>\n</div>\n\n<script>\n  // -- Haptics --\n  (function () {\n    var _lbl = document.createElement('label');\n    var _chk = document.createElement('input');\n    _chk.type = 'checkbox';\n    _chk.setAttribute('switch', '');\n    _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n    _lbl.appendChild(_chk);\n    document.body.appendChild(_lbl);\n    function _pulse() { _lbl.click(); }\n    window.haptic = function (type) {\n      if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n      var taps = type === 'selection' ? 1 : 2;\n      for (var i = 0; i < taps; i++) {\n        if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n      }\n    };\n  })();\n\n  function handleDownload() {\n    haptic('medium');\n\n    if (typeof segmentlySDK !== 'undefined') {\n      segmentlySDK.ready().then(function(sdk) {\n        sdk.trackEvent('UserClickedDownload', { screenName: 'download' });\n        sdk.navigateNext();\n      });\n    } else {\n      console.log('Download App clicked');\n    }\n  }\n</script>\n</body>\n</html>\n","childSections":[{"label":"frame_2131331307","mediaContent":{"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png"}}}},"appearance":{},"kind":"Image"},"id":"section-moe87nw0-z7r8h","layout":{"heightKind":"auto","scrollable":false,"flexShrink":1,"flexGrow":1},"kind":"Media","order":0},{"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png"}}}},"appearance":{}},"id":"section-moe8gqhb-nk7tv","label":"frame_2131331309","order":1,"layout":{"scrollable":false,"flexGrow":1,"flexShrink":1,"heightKind":"auto"},"kind":"Media"},{"kind":"Media","layout":{"scrollable":false,"flexShrink":1,"flexGrow":1,"heightKind":"auto"},"order":2,"label":"1-stats-background","mediaContent":{"kind":"Image","appearance":{},"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115572624_1-stats-background/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115572624_1-stats-background/origin.png"}}}}},"id":"section-moe8qa2a-3u5xz"},{"id":"section-moe8rbkb-4jjcw","mediaContent":{"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115622136_hero/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115622136_hero/origin.png"}}}},"appearance":{},"kind":"Image"},"label":"hero","order":3,"layout":{"flexGrow":1,"scrollable":false,"flexShrink":1,"heightKind":"auto"},"kind":"Media"},{"order":4,"layout":{"heightKind":"auto","flexGrow":1,"flexShrink":1,"scrollable":false},"kind":"Media","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115693642_hero-sessions-adapted/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115693642_hero-sessions-adapted/small.png"}}}},"appearance":{},"kind":"Image"},"id":"section-moe8suth-031ep","label":"hero-sessions-adapted"},{"id":"section-moe8tlwx-91z5s","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115729103_email-background/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115729103_email-background/small.png"}}}},"appearance":{},"kind":"Image"},"label":"email-background","order":5,"layout":{"flexGrow":1,"scrollable":false,"flexShrink":1,"heightKind":"auto"},"kind":"Media"},{"kind":"Media","layout":{"flexGrow":1,"flexShrink":1,"scrollable":false,"heightKind":"auto"},"order":6,"label":"cards-hero","id":"section-moe8w6g7-3bm7l","mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115848553_cards-hero/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115848553_cards-hero/small.png"}}}},"appearance":{}}},{"order":7,"layout":{"heightKind":"auto","flexShrink":1,"flexGrow":1,"scrollable":false},"kind":"Media","id":"section-moe8xlex-635v8","mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115914971_hero-done/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115914971_hero-done/small.png"}}}},"appearance":{}},"label":"hero-done"},{"layout":{"flexGrow":1,"scrollable":false,"flexShrink":1,"heightKind":"auto"},"kind":"Media","order":8,"label":"charts","mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115967593_charts/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115967593_charts/origin.png"}}}},"appearance":{}},"id":"section-moe8yqml-og9ut"}],"callback":{"action":{"kind":"advance","edges":[]}}},"animated":true,"countdown":null},"tags":[],"id":"5423526e-d3e8-4386-bc93-93da3b5e2dfb"},"5502b475-1292-498a-87f7-bd57e6c397b7":{"name":"play-comfort-beginner","content":{"animated":true,"countdown":null,"systemPrompt":null,"embed":{"childSections":[{"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png"}}}},"appearance":{}},"id":"section-moe87nw0-z7r8h","label":"frame_2131331307","order":0,"kind":"Media","layout":{"flexGrow":1,"flexShrink":1,"scrollable":false,"heightKind":"auto"}},{"order":1,"kind":"Media","layout":{"scrollable":false,"flexGrow":1,"flexShrink":1,"heightKind":"auto"},"mediaContent":{"kind":"Image","appearance":{},"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png"}}}}},"id":"section-moe8gqhb-nk7tv","label":"frame_2131331309"}],"callback":{"action":{"edges":[{"nextScreenId":"094f5413-8220-454f-b6e5-7256e4c5b75a","conditions":[],"transitionKind":"push"}],"kind":"advance"}},"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Preflop Comfort</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000000;\n      overflow: hidden;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    .nav-bar {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      padding: 14px 24px 0 16px;\n      gap: 16px;\n    }\n\n    .back-btn {\n      width: 44px;\n      height: 44px;\n      border-radius: 50%;\n      border: 1px solid rgba(255, 255, 255, 0.12);\n      background: rgba(255, 255, 255, 0.05);\n      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: rgba(255, 255, 255, 0.7);\n    }\n    .back-btn svg { width: 20px; height: 20px; }\n\n    .progress-bar-bg {\n      flex: 1;\n      height: 8px;\n      background-color: #222327;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      width: 64%;\n      background-color: #526DF2;\n      border-radius: 4px;\n    }\n\n    .header {\n      flex-shrink: 0;\n      padding: 32px 30px 0;\n    }\n\n    #title_label {\n      margin: 0 0 12px;\n      font-size: 22px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 28px;\n      letter-spacing: -0.26px;\n    }\n\n    #subtitle_label {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 400;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n\n    .options-list {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 32px 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      scrollbar-width: none;\n    }\n    .options-list::-webkit-scrollbar { display: none; }\n\n    .option-card {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 18px 16px;\n      border-radius: 20px;\n      background: #131416;\n      border: 2px solid #222327;\n      box-shadow: 0px 3px 0px 0px #222327;\n      cursor: pointer;\n      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;\n    }\n\n    .option-card.selected {\n      border-color: #526DF2;\n      background: #1A1E4C;\n      box-shadow: 0px 3px 0px 0px #526DF2;\n    }\n\n    .option-text { flex: 1; }\n\n    .option-title {\n      font-size: 17px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 22px;\n      letter-spacing: -0.43px;\n      margin-bottom: 4px;\n    }\n\n    .option-desc {\n      font-size: 13.5px;\n      font-weight: 400;\n      color: #A4A7AE;\n      line-height: 20px;\n      letter-spacing: -0.23px;\n    }\n\n    .option-radio {\n      flex-shrink: 0;\n      width: 20px;\n      height: 20px;\n      border-radius: 10px;\n      border: 1px solid #222327;\n      background: #000000;\n      transition: border-color 0.15s, background 0.15s;\n      position: relative;\n    }\n\n    .option-card.selected .option-radio {\n      border-color: #526DF2;\n      background: #526DF2;\n    }\n\n    .option-card.selected .option-radio::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      background: #FFFFFF;\n    }\n\n    .footer-hint {\n      flex-shrink: 0;\n      text-align: center;\n      margin: 0;\n      padding: 8px 24px 0;\n      font-size: 16px;\n      font-weight: 400;\n      font-style: italic;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"nav-bar\">\n      <button class=\"back-btn\" onclick=\"handleBack()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n      <div class=\"progress-bar-bg\">\n        <div class=\"progress-bar-fill\"></div>\n      </div>\n    </div>\n\n    <div class=\"header\">\n      <h1 id=\"title_label\">How comfortable are you with which hands to play preflop?</h1>\n      <p id=\"subtitle_label\">Preflop is all the action that occurs before cards are dealt on the table - i.e. the flop</p>\n    </div>\n\n    <div class=\"options-list\">\n      <div class=\"option-card\" data-id=\"NOT_COMFORTABLE\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Not comfortable at all</div>\n          <div class=\"option-desc\">I'm playing blind before the flop</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"SOMEWHAT\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Somewhat comfortable</div>\n          <div class=\"option-desc\">I feel okay but don't know any ranges</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"COMFORTABLE\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Comfortable</div>\n          <div class=\"option-desc\">I know basic preflop ranges</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"VERY_COMFORTABLE\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Very comfortable</div>\n          <div class=\"option-desc\">I know preflop ranges well</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <p class=\"footer-hint\" id=\"hint_label\">You can adjust later</p>\n    </div>\n\n  </div>\n\n  <script>\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: 'en',\n      screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => {\n      console.log('leaveCustomScreen:', args);\n    };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => {\n            port.postMessage({ eventName: 'LeaveCustomScreen', args }, []);\n          };\n          window.backScreen = () => {\n            port.postMessage({ eventName: 'BackScreen', args: null }, []);\n          };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!isOnboardingOnline) {\n          console.log('Running in standalone mode');\n          initScreen();\n        }\n      }, 100);\n    });\n\n    const DATA_KEY = 'preflop_comfort';\n    let selectedId = null;\n\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) return currentWindow.segmentlySDK;\n          if (currentWindow === currentWindow.parent) break;\n          currentWindow = currentWindow.parent;\n        } catch (e) { break; }\n      }\n      return null;\n    }\n\n    function handleBack() { window.backScreen(); }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n\n      const sdk = getSegmentlySDK();\n      let saved = sdk ? sdk.getVariable(DATA_KEY) : null;\n      if (!saved) {\n        const inputs = window.onboardingOnlineCustomScreenData.inputs;\n        if (inputs && inputs[DATA_KEY]) {\n          const inputData = inputs[DATA_KEY];\n          saved = (typeof inputData === 'object' && 'value' in inputData)\n            ? inputData.value\n            : inputData;\n        }\n      }\n      if (saved) {\n        const card = document.querySelector(`.option-card[data-id=\"${saved}\"]`);\n        if (card) {\n          card.classList.add('selected');\n          selectedId = saved;\n        }\n      }\n\n      updateLabels();\n    }\n\n    function selectOption(card) {\n      haptic('selection');\n      document.querySelectorAll('.option-card').forEach(c => c.classList.remove('selected'));\n      card.classList.add('selected');\n      selectedId = card.dataset.id;\n\n      setTimeout(() => {\n        haptic('medium');\n        const sdk = getSegmentlySDK();\n        if (sdk) {\n          sdk.trackEvent('UserUpdatedValue', {\n            screenName: 'preflop_comfort',\n            answer: selectedId\n          });\n        }\n        if (sdk && sdk.setVariable) {\n          sdk.setVariable(DATA_KEY, selectedId);\n        }\n        window.leaveCustomScreen({ [DATA_KEY]: selectedId });\n      }, 400);\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language])\n        titleEl.textContent = labels.title_label.value.l10n[language];\n\n      const subtitleEl = document.getElementById('subtitle_label');\n      if (subtitleEl && labels.subtitle_label?.value?.l10n?.[language])\n        subtitleEl.textContent = labels.subtitle_label.value.l10n[language];\n\n      const hintEl = document.getElementById('hint_label');\n      if (hintEl && labels.hint_label?.value?.l10n?.[language])\n        hintEl.textContent = labels.hint_label.value.l10n[language];\n    }\n  </script>\n</body>\n</html>\n"},"actionBar":{},"canvas":{"webViewBackgroundColor":"#1a1a1a","insets":{"end":16,"bottom":0,"start":16,"top":0},"background":{"kind":"solid","content":{"color":"#1a1a1a"}}},"offlineFirst":true,"header":{}},"tags":[],"screenType":"WebEmbed","position":{"x":4352,"y":16},"id":"5502b475-1292-498a-87f7-bd57e6c397b7"},"5a7d085b-0587-4eee-9689-88135db2836b":{"position":{"y":1392,"x":2704},"screenType":"WebEmbed","tags":[],"content":{"actionBar":{},"canvas":{"webViewBackgroundColor":"#1a1a1a","insets":{"end":16,"bottom":0,"start":16,"top":0},"background":{"kind":"solid","content":{"color":"#1a1a1a"}}},"header":{},"offlineFirst":true,"animated":true,"countdown":null,"systemPrompt":null,"embed":{"callback":{"action":{"edges":[{"transitionKind":"push","conditions":[],"nextScreenId":"1b2955e1-612b-404a-af4d-050276bc41e1"}],"kind":"advance"}},"childSections":[{"label":"frame_2131331307","mediaContent":{"appearance":{},"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png"}}}},"kind":"Image"},"id":"section-moe87nw0-z7r8h","layout":{"flexGrow":1,"flexShrink":1,"scrollable":false,"heightKind":"auto"},"kind":"Media","order":0},{"order":1,"layout":{"heightKind":"auto","flexGrow":1,"flexShrink":1,"scrollable":false},"kind":"Media","mediaContent":{"appearance":{},"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png"}}}},"kind":"Image"},"id":"section-moe8gqhb-nk7tv","label":"frame_2131331309"}],"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Play Frequency</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000000;\n      overflow: hidden;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    /* --- Nav Bar --- */\n    .nav-bar {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      padding: 14px 24px 0 16px;\n      gap: 16px;\n    }\n\n    .back-btn {\n      width: 44px;\n      height: 44px;\n      border-radius: 50%;\n      border: 1px solid rgba(255, 255, 255, 0.12);\n      background: rgba(255, 255, 255, 0.05);\n      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: rgba(255, 255, 255, 0.7);\n    }\n    .back-btn svg { width: 20px; height: 20px; }\n\n    .progress-bar-bg {\n      flex: 1;\n      height: 8px;\n      background-color: #222327;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      width: 27.5%;\n      background-color: #526DF2;\n      border-radius: 4px;\n    }\n\n    /* --- Header --- */\n    .header {\n      flex-shrink: 0;\n      padding: 32px 30px 0;\n    }\n\n    #title_label {\n      margin: 0;\n      font-size: 22px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 28px;\n      letter-spacing: -0.26px;\n    }\n\n    /* --- Options List --- */\n    .options-list {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 32px 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      scrollbar-width: none;\n    }\n    .options-list::-webkit-scrollbar { display: none; }\n\n    .option-card {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 18px 16px;\n      border-radius: 20px;\n      background: #131416;\n      border: 2px solid #222327;\n      box-shadow: 0px 3px 0px 0px #222327;\n      cursor: pointer;\n      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;\n    }\n\n    .option-card.selected {\n      border-color: #526DF2;\n      background: #1A1E4C;\n      box-shadow: 0px 3px 0px 0px #526DF2;\n    }\n\n    .option-text {\n      flex: 1;\n    }\n\n    .option-title {\n      font-size: 17px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 22px;\n      letter-spacing: -0.43px;\n      margin-bottom: 4px;\n    }\n\n    .option-desc {\n      font-size: 13.5px;\n      font-weight: 400;\n      color: #A4A7AE;\n      line-height: 20px;\n      letter-spacing: -0.23px;\n    }\n\n    /* Radio indicator */\n    .option-radio {\n      flex-shrink: 0;\n      width: 20px;\n      height: 20px;\n      border-radius: 10px;\n      border: 1px solid #222327;\n      background: #000000;\n      transition: border-color 0.15s, background 0.15s;\n      position: relative;\n    }\n\n    .option-card.selected .option-radio {\n      border-color: #526DF2;\n      background: #526DF2;\n    }\n\n    .option-card.selected .option-radio::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      background: #FFFFFF;\n    }\n\n    /* --- Footer hint --- */\n    .footer-hint {\n      flex-shrink: 0;\n      text-align: center;\n      padding: 0 24px 32px;\n      font-size: 16px;\n      font-weight: 400;\n      font-style: italic;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <!-- Nav bar -->\n    <div class=\"nav-bar\">\n      <button class=\"back-btn\" onclick=\"handleBack()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n      <div class=\"progress-bar-bg\">\n        <div class=\"progress-bar-fill\"></div>\n      </div>\n    </div>\n\n    <!-- Header -->\n    <div class=\"header\">\n      <h1 id=\"title_label\">How often do you currently play poker?</h1>\n    </div>\n\n    <!-- Options -->\n    <div class=\"options-list\">\n      <div class=\"option-card\" data-id=\"RARELY\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Rarely</div>\n          <div class=\"option-desc\">A few time a month or less</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"OCCASIONALLY\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Occasionally</div>\n          <div class=\"option-desc\">About once or twice a week</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"REGULARLY\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Regularly</div>\n          <div class=\"option-desc\">3-5 sessions per week</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"VERY_FREQUENTLY\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Very frequently</div>\n          <div class=\"option-desc\">Almost every day</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n    </div>\n\n    <!-- Footer hint -->\n    <p class=\"footer-hint\" id=\"hint_label\">You can adjust later</p>\n\n  </div>\n\n  <script>\n    // ========================================================================\n    // --- ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n    // ========================================================================\n\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: 'en',\n      screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => {\n      console.log('leaveCustomScreen:', args);\n    };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => {\n            port.postMessage({ eventName: 'LeaveCustomScreen', args }, []);\n          };\n          window.backScreen = () => {\n            port.postMessage({ eventName: 'BackScreen', args: null }, []);\n          };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!isOnboardingOnline) {\n          console.log('Running in standalone mode');\n          initScreen();\n        }\n      }, 100);\n    });\n\n    // ========================================================================\n    // --- SCREEN LOGIC ---\n    // ========================================================================\n\n    const DATA_KEY = 'play_frequency';\n    let selectedId = null;\n\n    // -- Haptics --\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) {\n            return currentWindow.segmentlySDK;\n          }\n          if (currentWindow === currentWindow.parent) {\n            break;\n          }\n          currentWindow = currentWindow.parent;\n        } catch (e) {\n          console.warn('Cross-origin access blocked at level', i);\n          break;\n        }\n      }\n      return null;\n    }\n\n    function handleBack() {\n      window.backScreen();\n    }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n      console.log('Screen Initialized');\n\n      // Restore saved selection\n      const sdk = getSegmentlySDK();\n      let saved = sdk ? sdk.getVariable(DATA_KEY) : null;\n      if (!saved) {\n        const inputs = window.onboardingOnlineCustomScreenData.inputs;\n        if (inputs && inputs[DATA_KEY]) {\n          const inputData = inputs[DATA_KEY];\n          saved = (typeof inputData === 'object' && 'value' in inputData)\n            ? inputData.value\n            : inputData;\n        }\n      }\n      if (saved) {\n        const card = document.querySelector(`.option-card[data-id=\"${saved}\"]`);\n        if (card) {\n          card.classList.add('selected');\n          selectedId = saved;\n        }\n      }\n\n      updateLabels();\n    }\n\n    function selectOption(card) {\n      haptic('selection');\n      document.querySelectorAll('.option-card').forEach(c => c.classList.remove('selected'));\n      card.classList.add('selected');\n      selectedId = card.dataset.id;\n\n      // Auto-advance after short delay\n      setTimeout(() => {\n        haptic('medium');\n        const sdk = getSegmentlySDK();\n        if (sdk) {\n          sdk.trackEvent('UserUpdatedValue', {\n            screenName: 'play_frequency',\n            answer: selectedId\n          });\n        }\n        if (sdk && sdk.setVariable) {\n          sdk.setVariable(DATA_KEY, selectedId);\n        }\n        window.leaveCustomScreen({\n          [DATA_KEY]: selectedId\n        });\n      }, 400);\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language]) {\n        titleEl.textContent = labels.title_label.value.l10n[language];\n      }\n\n      const hintEl = document.getElementById('hint_label');\n      if (hintEl && labels.hint_label?.value?.l10n?.[language]) {\n        hintEl.textContent = labels.hint_label.value.l10n[language];\n      }\n    }\n  </script>\n</body>\n</html>\n"}},"name":"frequency-expert","id":"5a7d085b-0587-4eee-9689-88135db2836b"},"6bd9fb73-b6a7-4940-8c14-270c3b1d9254":{"id":"6bd9fb73-b6a7-4940-8c14-270c3b1d9254","content":{"actionBar":{},"canvas":{"background":{"content":{"color":"#1a1a1a"},"kind":"solid"},"insets":{"top":0,"end":16,"bottom":0,"start":16},"webViewBackgroundColor":"#1a1a1a"},"offlineFirst":true,"header":{},"animated":true,"countdown":null,"systemPrompt":null,"embed":{"childSections":[{"order":0,"layout":{"scrollable":false,"flexGrow":1,"flexShrink":1,"heightKind":"auto"},"kind":"Media","id":"section-moe87nw0-z7r8h","mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png"}}}},"appearance":{}},"label":"frame_2131331307"},{"layout":{"heightKind":"auto","flexShrink":1,"flexGrow":1,"scrollable":false},"kind":"Media","order":1,"label":"frame_2131331309","mediaContent":{"appearance":{},"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png"}}}},"kind":"Image"},"id":"section-moe8gqhb-nk7tv"}],"callback":{"action":{"edges":[{"conditions":[],"nextScreenId":"2ec901f7-b9ef-41b9-b7e9-713e5cefdc63","transitionKind":"push"}],"kind":"advance"}},"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Play Setting</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000000;\n      overflow: hidden;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    /* --- Nav Bar --- */\n    .nav-bar {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      padding: 14px 24px 0 16px;\n      gap: 16px;\n    }\n\n    .back-btn {\n      width: 44px;\n      height: 44px;\n      border-radius: 50%;\n      border: 1px solid rgba(255, 255, 255, 0.12);\n      background: rgba(255, 255, 255, 0.05);\n      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: rgba(255, 255, 255, 0.7);\n    }\n    .back-btn svg { width: 20px; height: 20px; }\n\n    .progress-bar-bg {\n      flex: 1;\n      height: 8px;\n      background-color: #222327;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      width: 52%;\n      background-color: #526DF2;\n      border-radius: 4px;\n    }\n\n    /* --- Header --- */\n    .header {\n      flex-shrink: 0;\n      padding: 32px 30px 0;\n    }\n\n    #title_label {\n      margin: 0 0 12px;\n      font-size: 22px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 28px;\n      letter-spacing: -0.26px;\n    }\n\n    #subtitle_label {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 400;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n\n    /* --- Options List --- */\n    .options-list {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 32px 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      scrollbar-width: none;\n    }\n    .options-list::-webkit-scrollbar { display: none; }\n\n    .option-card {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 18px 16px;\n      border-radius: 20px;\n      background: #131416;\n      border: 2px solid #222327;\n      box-shadow: 0px 3px 0px 0px #222327;\n      cursor: pointer;\n      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;\n    }\n\n    .option-card.selected {\n      border-color: #526DF2;\n      background: #1A1E4C;\n      box-shadow: 0px 3px 0px 0px #526DF2;\n    }\n\n    .option-title {\n      flex: 1;\n      font-size: 17px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 22px;\n      letter-spacing: -0.43px;\n    }\n\n    /* Radio indicator */\n    .option-radio {\n      flex-shrink: 0;\n      width: 20px;\n      height: 20px;\n      border-radius: 10px;\n      border: 1px solid #222327;\n      background: #000000;\n      transition: border-color 0.15s, background 0.15s;\n      position: relative;\n    }\n\n    .option-card.selected .option-radio {\n      border-color: #526DF2;\n      background: #526DF2;\n    }\n\n    .option-card.selected .option-radio::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      background: #FFFFFF;\n    }\n\n    /* --- Footer hint --- */\n    .footer-hint {\n      flex-shrink: 0;\n      text-align: center;\n      margin: 0;\n      padding: 8px 24px 0;\n      font-size: 16px;\n      font-weight: 400;\n      font-style: italic;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <!-- Nav bar -->\n    <div class=\"nav-bar\">\n      <button class=\"back-btn\" onclick=\"handleBack()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n      <div class=\"progress-bar-bg\">\n        <div class=\"progress-bar-fill\"></div>\n      </div>\n    </div>\n\n    <!-- Header -->\n    <div class=\"header\">\n      <h1 id=\"title_label\">Do you prefer to focus on live or online play?</h1>\n      <p id=\"subtitle_label\">Fine-tunes your trainer to nuanced strategic differences between settings</p>\n    </div>\n\n    <!-- Options -->\n    <div class=\"options-list\">\n      <div class=\"option-card\" data-id=\"LIVE\" onclick=\"selectOption(this)\">\n        <span class=\"option-title\">Live</span>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"ONLINE\" onclick=\"selectOption(this)\">\n        <span class=\"option-title\">Online</span>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"BOTH\" onclick=\"selectOption(this)\">\n        <span class=\"option-title\">Both fairly equally</span>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <!-- Hint -->\n      <p class=\"footer-hint\" id=\"hint_label\">You can adjust later</p>\n    </div>\n\n  </div>\n\n  <script>\n    // ========================================================================\n    // --- ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n    // ========================================================================\n\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: 'en',\n      screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => {\n      console.log('leaveCustomScreen:', args);\n    };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => {\n            port.postMessage({ eventName: 'LeaveCustomScreen', args }, []);\n          };\n          window.backScreen = () => {\n            port.postMessage({ eventName: 'BackScreen', args: null }, []);\n          };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!isOnboardingOnline) {\n          console.log('Running in standalone mode');\n          initScreen();\n        }\n      }, 100);\n    });\n\n    // ========================================================================\n    // --- SCREEN LOGIC ---\n    // ========================================================================\n\n    const DATA_KEY = 'play_setting';\n    let selectedId = null;\n\n    // -- Haptics --\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) {\n            return currentWindow.segmentlySDK;\n          }\n          if (currentWindow === currentWindow.parent) {\n            break;\n          }\n          currentWindow = currentWindow.parent;\n        } catch (e) {\n          console.warn('Cross-origin access blocked at level', i);\n          break;\n        }\n      }\n      return null;\n    }\n\n    function handleBack() {\n      window.backScreen();\n    }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n      console.log('Screen Initialized');\n\n      const sdk = getSegmentlySDK();\n      let saved = sdk ? sdk.getVariable(DATA_KEY) : null;\n      if (!saved) {\n        const inputs = window.onboardingOnlineCustomScreenData.inputs;\n        if (inputs && inputs[DATA_KEY]) {\n          const inputData = inputs[DATA_KEY];\n          saved = (typeof inputData === 'object' && 'value' in inputData)\n            ? inputData.value\n            : inputData;\n        }\n      }\n      if (saved) {\n        const card = document.querySelector(`.option-card[data-id=\"${saved}\"]`);\n        if (card) {\n          card.classList.add('selected');\n          selectedId = saved;\n        }\n      }\n\n      updateLabels();\n    }\n\n    function selectOption(card) {\n      haptic('selection');\n      document.querySelectorAll('.option-card').forEach(c => c.classList.remove('selected'));\n      card.classList.add('selected');\n      selectedId = card.dataset.id;\n\n      setTimeout(() => {\n        haptic('medium');\n        const sdk = getSegmentlySDK();\n        if (sdk) {\n          sdk.trackEvent('UserUpdatedValue', {\n            screenName: 'play_setting',\n            answer: selectedId\n          });\n        }\n        if (sdk && sdk.setVariable) {\n          sdk.setVariable(DATA_KEY, selectedId);\n        }\n        window.leaveCustomScreen({\n          [DATA_KEY]: selectedId\n        });\n      }, 400);\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language]) {\n        titleEl.textContent = labels.title_label.value.l10n[language];\n      }\n\n      const subtitleEl = document.getElementById('subtitle_label');\n      if (subtitleEl && labels.subtitle_label?.value?.l10n?.[language]) {\n        subtitleEl.textContent = labels.subtitle_label.value.l10n[language];\n      }\n\n      const hintEl = document.getElementById('hint_label');\n      if (hintEl && labels.hint_label?.value?.l10n?.[language]) {\n        hintEl.textContent = labels.hint_label.value.l10n[language];\n      }\n    }\n  </script>\n</body>\n</html>\n"}},"name":"play-settings-expert","tags":[],"screenType":"WebEmbed","position":{"y":1424,"x":3792}},"6dd700af-5b9c-4539-8aa5-3fae3b81d8d0":{"screenType":"WebEmbed","position":{"y":16,"x":3792},"name":"play-settings-beginner","content":{"animated":true,"countdown":null,"systemPrompt":null,"embed":{"callback":{"action":{"kind":"advance","edges":[{"nextScreenId":"5502b475-1292-498a-87f7-bd57e6c397b7","conditions":[],"transitionKind":"push"}]}},"childSections":[{"mediaContent":{"appearance":{},"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png"}}}},"kind":"Image"},"id":"section-moe87nw0-z7r8h","label":"frame_2131331307","order":0,"layout":{"heightKind":"auto","flexShrink":1,"flexGrow":1,"scrollable":false},"kind":"Media"},{"label":"frame_2131331309","id":"section-moe8gqhb-nk7tv","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png"}}}},"appearance":{},"kind":"Image"},"kind":"Media","layout":{"heightKind":"auto","flexShrink":1,"scrollable":false,"flexGrow":1},"order":1}],"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Play Setting</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000000;\n      overflow: hidden;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    /* --- Nav Bar --- */\n    .nav-bar {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      padding: 14px 24px 0 16px;\n      gap: 16px;\n    }\n\n    .back-btn {\n      width: 44px;\n      height: 44px;\n      border-radius: 50%;\n      border: 1px solid rgba(255, 255, 255, 0.12);\n      background: rgba(255, 255, 255, 0.05);\n      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: rgba(255, 255, 255, 0.7);\n    }\n    .back-btn svg { width: 20px; height: 20px; }\n\n    .progress-bar-bg {\n      flex: 1;\n      height: 8px;\n      background-color: #222327;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      width: 52%;\n      background-color: #526DF2;\n      border-radius: 4px;\n    }\n\n    /* --- Header --- */\n    .header {\n      flex-shrink: 0;\n      padding: 32px 30px 0;\n    }\n\n    #title_label {\n      margin: 0 0 12px;\n      font-size: 22px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 28px;\n      letter-spacing: -0.26px;\n    }\n\n    #subtitle_label {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 400;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n\n    /* --- Options List --- */\n    .options-list {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 32px 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      scrollbar-width: none;\n    }\n    .options-list::-webkit-scrollbar { display: none; }\n\n    .option-card {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 18px 16px;\n      border-radius: 20px;\n      background: #131416;\n      border: 2px solid #222327;\n      box-shadow: 0px 3px 0px 0px #222327;\n      cursor: pointer;\n      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;\n    }\n\n    .option-card.selected {\n      border-color: #526DF2;\n      background: #1A1E4C;\n      box-shadow: 0px 3px 0px 0px #526DF2;\n    }\n\n    .option-title {\n      flex: 1;\n      font-size: 17px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 22px;\n      letter-spacing: -0.43px;\n    }\n\n    /* Radio indicator */\n    .option-radio {\n      flex-shrink: 0;\n      width: 20px;\n      height: 20px;\n      border-radius: 10px;\n      border: 1px solid #222327;\n      background: #000000;\n      transition: border-color 0.15s, background 0.15s;\n      position: relative;\n    }\n\n    .option-card.selected .option-radio {\n      border-color: #526DF2;\n      background: #526DF2;\n    }\n\n    .option-card.selected .option-radio::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      background: #FFFFFF;\n    }\n\n    /* --- Footer hint --- */\n    .footer-hint {\n      flex-shrink: 0;\n      text-align: center;\n      margin: 0;\n      padding: 8px 24px 0;\n      font-size: 16px;\n      font-weight: 400;\n      font-style: italic;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <!-- Nav bar -->\n    <div class=\"nav-bar\">\n      <button class=\"back-btn\" onclick=\"handleBack()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n      <div class=\"progress-bar-bg\">\n        <div class=\"progress-bar-fill\"></div>\n      </div>\n    </div>\n\n    <!-- Header -->\n    <div class=\"header\">\n      <h1 id=\"title_label\">Do you prefer to focus on live or online play?</h1>\n      <p id=\"subtitle_label\">Fine-tunes your trainer to nuanced strategic differences between settings</p>\n    </div>\n\n    <!-- Options -->\n    <div class=\"options-list\">\n      <div class=\"option-card\" data-id=\"LIVE\" onclick=\"selectOption(this)\">\n        <span class=\"option-title\">Live</span>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"ONLINE\" onclick=\"selectOption(this)\">\n        <span class=\"option-title\">Online</span>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"BOTH\" onclick=\"selectOption(this)\">\n        <span class=\"option-title\">Both fairly equally</span>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <!-- Hint -->\n      <p class=\"footer-hint\" id=\"hint_label\">You can adjust later</p>\n    </div>\n\n  </div>\n\n  <script>\n    // ========================================================================\n    // --- ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n    // ========================================================================\n\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: 'en',\n      screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => {\n      console.log('leaveCustomScreen:', args);\n    };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => {\n            port.postMessage({ eventName: 'LeaveCustomScreen', args }, []);\n          };\n          window.backScreen = () => {\n            port.postMessage({ eventName: 'BackScreen', args: null }, []);\n          };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!isOnboardingOnline) {\n          console.log('Running in standalone mode');\n          initScreen();\n        }\n      }, 100);\n    });\n\n    // ========================================================================\n    // --- SCREEN LOGIC ---\n    // ========================================================================\n\n    const DATA_KEY = 'play_setting';\n    let selectedId = null;\n\n    // -- Haptics --\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) {\n            return currentWindow.segmentlySDK;\n          }\n          if (currentWindow === currentWindow.parent) {\n            break;\n          }\n          currentWindow = currentWindow.parent;\n        } catch (e) {\n          console.warn('Cross-origin access blocked at level', i);\n          break;\n        }\n      }\n      return null;\n    }\n\n    function handleBack() {\n      window.backScreen();\n    }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n      console.log('Screen Initialized');\n\n      const sdk = getSegmentlySDK();\n      let saved = sdk ? sdk.getVariable(DATA_KEY) : null;\n      if (!saved) {\n        const inputs = window.onboardingOnlineCustomScreenData.inputs;\n        if (inputs && inputs[DATA_KEY]) {\n          const inputData = inputs[DATA_KEY];\n          saved = (typeof inputData === 'object' && 'value' in inputData)\n            ? inputData.value\n            : inputData;\n        }\n      }\n      if (saved) {\n        const card = document.querySelector(`.option-card[data-id=\"${saved}\"]`);\n        if (card) {\n          card.classList.add('selected');\n          selectedId = saved;\n        }\n      }\n\n      updateLabels();\n    }\n\n    function selectOption(card) {\n      haptic('selection');\n      document.querySelectorAll('.option-card').forEach(c => c.classList.remove('selected'));\n      card.classList.add('selected');\n      selectedId = card.dataset.id;\n\n      setTimeout(() => {\n        haptic('medium');\n        const sdk = getSegmentlySDK();\n        if (sdk) {\n          sdk.trackEvent('UserUpdatedValue', {\n            screenName: 'play_setting',\n            answer: selectedId\n          });\n        }\n        if (sdk && sdk.setVariable) {\n          sdk.setVariable(DATA_KEY, selectedId);\n        }\n        window.leaveCustomScreen({\n          [DATA_KEY]: selectedId\n        });\n      }, 400);\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language]) {\n        titleEl.textContent = labels.title_label.value.l10n[language];\n      }\n\n      const subtitleEl = document.getElementById('subtitle_label');\n      if (subtitleEl && labels.subtitle_label?.value?.l10n?.[language]) {\n        subtitleEl.textContent = labels.subtitle_label.value.l10n[language];\n      }\n\n      const hintEl = document.getElementById('hint_label');\n      if (hintEl && labels.hint_label?.value?.l10n?.[language]) {\n        hintEl.textContent = labels.hint_label.value.l10n[language];\n      }\n    }\n  </script>\n</body>\n</html>\n"},"actionBar":{},"canvas":{"insets":{"top":0,"start":16,"bottom":0,"end":16},"webViewBackgroundColor":"#1a1a1a","background":{"content":{"color":"#1a1a1a"},"kind":"solid"}},"offlineFirst":true,"header":{}},"tags":[],"id":"6dd700af-5b9c-4539-8aa5-3fae3b81d8d0"},"79a3d60a-4c07-4870-a913-cfde14ca9ce7":{"id":"79a3d60a-4c07-4870-a913-cfde14ca9ce7","tags":[],"content":{"canvas":{"background":{"kind":"solid","content":{"color":"#1a1a1a"}},"webViewBackgroundColor":"#1a1a1a","insets":{"end":16,"bottom":0,"start":16,"top":0}},"header":{},"offlineFirst":true,"actionBar":{},"systemPrompt":null,"embed":{"childSections":[{"layout":{"flexGrow":1,"scrollable":false,"flexShrink":1,"heightKind":"auto"},"kind":"Media","order":0,"label":"frame_2131331307","id":"section-moe87nw0-z7r8h","mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png"}}}},"appearance":{}}},{"label":"frame_2131331309","id":"section-moe8gqhb-nk7tv","mediaContent":{"kind":"Image","appearance":{},"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png"}}}}},"layout":{"heightKind":"auto","flexGrow":1,"flexShrink":1,"scrollable":false},"kind":"Media","order":1}],"callback":{"action":{"kind":"advance","edges":[{"nextScreenId":"222628ee-75a9-4299-b2a7-a43515eb075f","transitionKind":"push","conditions":[]}]}},"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Weak Areas</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000000;\n      overflow: hidden;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    .nav-bar {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      padding: 14px 24px 0 16px;\n      gap: 16px;\n    }\n\n    .back-btn {\n      width: 44px;\n      height: 44px;\n      border-radius: 50%;\n      border: 1px solid rgba(255, 255, 255, 0.12);\n      background: rgba(255, 255, 255, 0.05);\n      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: rgba(255, 255, 255, 0.7);\n    }\n    .back-btn svg { width: 20px; height: 20px; }\n\n    .progress-bar-bg {\n      flex: 1;\n      height: 8px;\n      background-color: #222327;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      width: 88%;\n      background-color: #526DF2;\n      border-radius: 4px;\n    }\n\n    .header {\n      flex-shrink: 0;\n      padding: 32px 30px 0;\n    }\n\n    #title_label {\n      margin: 0 0 12px;\n      font-size: 22px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 28px;\n      letter-spacing: -0.26px;\n    }\n\n    #subtitle_label {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 400;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n\n    .options-list {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 32px 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      scrollbar-width: none;\n    }\n    .options-list::-webkit-scrollbar { display: none; }\n\n    .option-card {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 18px 16px;\n      border-radius: 20px;\n      background: #131416;\n      border: 2px solid #222327;\n      box-shadow: 0px 3px 0px 0px #222327;\n      cursor: pointer;\n      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;\n    }\n\n    .option-card.selected {\n      border-color: #526DF2;\n      background: #1A1E4C;\n      box-shadow: 0px 3px 0px 0px #526DF2;\n    }\n\n    .option-text { flex: 1; }\n\n    .option-title {\n      flex: 1;\n      font-size: 17px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 22px;\n      letter-spacing: -0.43px;\n    }\n\n    .option-desc {\n      font-size: 13.5px;\n      font-weight: 400;\n      color: #A4A7AE;\n      line-height: 20px;\n      letter-spacing: -0.23px;\n      margin-top: 4px;\n    }\n\n    .option-check {\n      flex-shrink: 0;\n      width: 20px;\n      height: 20px;\n      border-radius: 8px;\n      border: 1px solid #393B41;\n      background: #222327;\n      transition: border-color 0.15s, background 0.15s;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .option-card.selected .option-check {\n      border-color: #526DF2;\n      background: #526DF2;\n    }\n\n    .option-card.selected .option-check::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 5px;\n      height: 9px;\n      border-right: 2px solid #FFFFFF;\n      border-bottom: 2px solid #FFFFFF;\n      transform: translate(-50%, -60%) rotate(40deg);\n    }\n\n    .footer-hint {\n      flex-shrink: 0;\n      text-align: center;\n      margin: 0;\n      padding: 8px 24px 0;\n      font-size: 16px;\n      font-weight: 400;\n      font-style: italic;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n\n    .footer {\n      flex-shrink: 0;\n      padding: 20px 24px 24px;\n    }\n\n    #action_button {\n      width: 100%;\n      padding: 14px 20px;\n      box-sizing: border-box;\n      background-color: #F5F5F5;\n      color: #000000;\n      border: none;\n      border-radius: 16px;\n      font-family: 'Inter', sans-serif;\n      font-size: 18px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);\n    }\n    #action_button:hover:not(:disabled) { opacity: 0.9; }\n    #action_button:disabled {\n      opacity: 0.3;\n      cursor: default;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"nav-bar\">\n      <button class=\"back-btn\" onclick=\"handleBack()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n      <div class=\"progress-bar-bg\">\n        <div class=\"progress-bar-fill\"></div>\n      </div>\n    </div>\n\n    <div class=\"header\">\n      <h1 id=\"title_label\">Which area's do you least familiar with</h1>\n      <p id=\"subtitle_label\">Select all options your particularly struggle with or haven't heard of</p>\n    </div>\n\n    <div class=\"options-list\">\n      <div class=\"option-card\" data-id=\"EVERYTHING_NEW\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Everything, I'm new!</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"PREFLOP\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Preflop</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"UNDERSTANDING_BOARD\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Understanding the board</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"FACING_AGGRESSION\" onclick=\"toggleOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Facing aggression</div>\n          <div class=\"option-desc\">Bets, raises, and check-raises</div>\n        </div>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"POSTFLOP_DECISIONS\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Postflop decision-making</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"BLUFF_SPOTS\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Selecting bluff spots</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"TOO_MANY_HANDS\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Playing too many hands</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"OPPONENT_RANGE\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Knowing what my opponent may have</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"BET_SIZING\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">How much to bet</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"HANDLING_DRAWS\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Handling draws (mine or theirs)</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"EMOTIONAL_CONTROL\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Emotional control</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"POKER_MATH\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Poker math</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <p class=\"footer-hint\" id=\"hint_label\">You can adjust later</p>\n    </div>\n\n    <div class=\"footer\">\n      <button id=\"action_button\" disabled onclick=\"handleContinue()\">Continue</button>\n    </div>\n\n  </div>\n\n  <script>\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {}, labels: {}, userData: {}, customData: {},\n      webOnboarding: {}, incomeUserData: {}, language: 'en', screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => { console.log('leaveCustomScreen:', args); };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => { port.postMessage({ eventName: 'LeaveCustomScreen', args }, []); };\n          window.backScreen = () => { port.postMessage({ eventName: 'BackScreen', args: null }, []); };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => { if (!isOnboardingOnline) initScreen(); }, 100);\n    });\n\n    const DATA_KEY = 'weak_areas';\n    let selectedIds = [];\n\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) return currentWindow.segmentlySDK;\n          if (currentWindow === currentWindow.parent) break;\n          currentWindow = currentWindow.parent;\n        } catch (e) { break; }\n      }\n      return null;\n    }\n\n    function handleBack() { window.backScreen(); }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n\n      const sdk = getSegmentlySDK();\n      let saved = sdk ? sdk.getVariable(DATA_KEY) : null;\n      if (!saved) {\n        const inputs = window.onboardingOnlineCustomScreenData.inputs;\n        if (inputs && inputs[DATA_KEY]) {\n          const inputData = inputs[DATA_KEY];\n          saved = (typeof inputData === 'object' && 'value' in inputData) ? inputData.value : inputData;\n        }\n      }\n      if (saved) {\n        const ids = typeof saved === 'string' ? saved.split(',') : saved;\n        if (Array.isArray(ids)) {\n          ids.forEach(id => {\n            const card = document.querySelector(`.option-card[data-id=\"${id}\"]`);\n            if (card) card.classList.add('selected');\n          });\n          selectedIds = ids;\n          updateButton();\n        }\n      }\n\n      updateLabels();\n    }\n\n    function toggleOption(card) {\n      haptic('selection');\n      const id = card.dataset.id;\n      if (card.classList.contains('selected')) {\n        card.classList.remove('selected');\n        selectedIds = selectedIds.filter(i => i !== id);\n      } else {\n        card.classList.add('selected');\n        selectedIds.push(id);\n      }\n      updateButton();\n    }\n\n    function updateButton() {\n      document.getElementById('action_button').disabled = selectedIds.length === 0;\n    }\n\n    function handleContinue() {\n      if (selectedIds.length === 0) return;\n      haptic('medium');\n\n      const sdk = getSegmentlySDK();\n      if (sdk) sdk.trackEvent('UserUpdatedValue', { screenName: 'weak_areas', answer: selectedIds.join(',') });\n      if (sdk && sdk.setVariable) sdk.setVariable(DATA_KEY, selectedIds.join(','));\n      window.leaveCustomScreen({ [DATA_KEY]: selectedIds.join(',') });\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language])\n        titleEl.textContent = labels.title_label.value.l10n[language];\n\n      const subtitleEl = document.getElementById('subtitle_label');\n      if (subtitleEl && labels.subtitle_label?.value?.l10n?.[language])\n        subtitleEl.textContent = labels.subtitle_label.value.l10n[language];\n\n      const hintEl = document.getElementById('hint_label');\n      if (hintEl && labels.hint_label?.value?.l10n?.[language])\n        hintEl.textContent = labels.hint_label.value.l10n[language];\n\n      const btnEl = document.getElementById('action_button');\n      if (btnEl && labels.button_text?.value?.l10n?.[language])\n        btnEl.textContent = labels.button_text.value.l10n[language];\n    }\n  </script>\n</body>\n</html>\n"},"animated":true,"countdown":null},"name":"weak-areas-beginner","position":{"y":0,"x":5456},"screenType":"WebEmbed"},"7ae80f43-2084-4e85-a871-d91732f50ee9":{"id":"7ae80f43-2084-4e85-a871-d91732f50ee9","content":{"animated":true,"countdown":null,"systemPrompt":null,"embed":{"childSections":[{"label":"frame_2131331307","id":"section-moe87nw0-z7r8h","mediaContent":{"kind":"Image","appearance":{},"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png"}}}}},"kind":"Media","layout":{"flexShrink":1,"scrollable":false,"flexGrow":1,"heightKind":"auto"},"order":0},{"order":1,"layout":{"heightKind":"auto","flexShrink":1,"scrollable":false,"flexGrow":1},"kind":"Media","id":"section-moe8gqhb-nk7tv","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png"}}}},"appearance":{},"kind":"Image"},"label":"frame_2131331309"},{"label":"1-stats-background","mediaContent":{"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115572624_1-stats-background/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115572624_1-stats-background/origin.png"}}}},"appearance":{},"kind":"Image"},"id":"section-moe8qa2a-3u5xz","layout":{"heightKind":"auto","scrollable":false,"flexGrow":1,"flexShrink":1},"kind":"Media","order":2},{"id":"section-moe8rbkb-4jjcw","mediaContent":{"kind":"Image","appearance":{},"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115622136_hero/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115622136_hero/origin.png"}}}}},"label":"hero","order":3,"kind":"Media","layout":{"heightKind":"auto","flexShrink":1,"scrollable":false,"flexGrow":1}},{"order":4,"layout":{"heightKind":"auto","scrollable":false,"flexShrink":1,"flexGrow":1},"kind":"Media","mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115693642_hero-sessions-adapted/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115693642_hero-sessions-adapted/small.png"}}}},"appearance":{}},"id":"section-moe8suth-031ep","label":"hero-sessions-adapted"},{"label":"email-background","id":"section-moe8tlwx-91z5s","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115729103_email-background/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115729103_email-background/small.png"}}}},"appearance":{},"kind":"Image"},"layout":{"heightKind":"auto","scrollable":false,"flexGrow":1,"flexShrink":1},"kind":"Media","order":5},{"kind":"Media","layout":{"flexShrink":1,"flexGrow":1,"scrollable":false,"heightKind":"auto"},"order":6,"label":"cards-hero","id":"section-moe8w6g7-3bm7l","mediaContent":{"appearance":{},"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115848553_cards-hero/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115848553_cards-hero/small.png"}}}},"kind":"Image"}},{"layout":{"heightKind":"auto","flexShrink":1,"flexGrow":1,"scrollable":false},"kind":"Media","order":7,"label":"hero-done","id":"section-moe8xlex-635v8","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115914971_hero-done/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115914971_hero-done/small.png"}}}},"appearance":{},"kind":"Image"}},{"id":"section-moe8yqml-og9ut","mediaContent":{"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115967593_charts/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115967593_charts/origin.png"}}}},"appearance":{},"kind":"Image"},"label":"charts","order":8,"kind":"Media","layout":{"heightKind":"auto","flexShrink":1,"flexGrow":1,"scrollable":false}}],"callback":{"action":{"edges":[{"conditions":[],"nextScreenId":"9cbc374e-e8fc-4e83-b079-9319dc64f0ae","transitionKind":"push"}],"kind":"advance"}},"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Social Proof</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: -apple-system, 'SF Pro Display', 'SF Pro Text', BlinkMacSystemFont, 'Inter', \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000000;\n      overflow: hidden;\n      position: relative;\n    }\n\n    /* Figma glow: 1135×1061px pill at top:-173px → blue bleeds in from bottom */\n    .screen-container::before {\n      content: '';\n      position: absolute;\n      width: 302%;\n      aspect-ratio: 1135 / 1061;\n      left: 50%;\n      top: -21%;\n      transform: translateX(-50%);\n      border-radius: 9999px;\n      background: linear-gradient(180deg, rgba(82, 111, 242, 0.00) 62.39%, rgba(82, 111, 242, 0.50) 100%);\n      filter: blur(116px);\n      pointer-events: none;\n      z-index: 0;\n    }\n\n    /* Ensure all content sits above the glow */\n    .screen-container > * {\n      position: relative;\n      z-index: 1;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    /* --- Title --- */\n    .title-section {\n      flex-shrink: 0;\n      padding: 60px 32px 0;\n      text-align: center;\n    }\n\n    #title_label {\n      margin: 0;\n      font-size: 28px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 34px;\n      letter-spacing: -0.5px;\n    }\n\n    /* --- Content --- */\n    .content {\n      flex: 1;\n      overflow-y: auto;\n      scrollbar-width: none;\n      padding: 24px 16px 0;\n      min-height: 0;\n    }\n    .content::-webkit-scrollbar { display: none; }\n\n    /* --- Charts image --- */\n    .charts-image {\n      width: 100%;\n      height: auto;\n      pointer-events: none;\n      display: block;\n    }\n\n    /* --- Testimonial Card --- */\n    .testimonial-card {\n      margin-top: 16px;\n      background: #131416;\n      border: 2px solid #222327;\n      border-radius: 20px;\n      box-shadow: 0px 3px 0px 0px #222327;\n      padding: 20px;\n    }\n\n    .testimonial-text {\n      margin: 0;\n      font-size: 15px;\n      font-weight: 400;\n      color: #FFFFFF;\n      line-height: 20px;\n      letter-spacing: -0.23px;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      flex-shrink: 0;\n      padding: 12px 24px 24px;\n    }\n\n    #action_button {\n      width: 100%;\n      padding: 14px 20px;\n      box-sizing: border-box;\n      background-color: #F5F5F5;\n      color: #000000;\n      border: none;\n      border-radius: 16px;\n      font-family: -apple-system, 'SF Pro Display', 'Inter', sans-serif;\n      font-size: 18px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);\n    }\n    #action_button:hover { opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <!-- Title -->\n    <div class=\"title-section\">\n      <h1 id=\"title_label\">Join a Community Built Around Real Improvement</h1>\n    </div>\n\n    <!-- Content -->\n    <div class=\"content\">\n      <!-- Charts image -->\n      <img class=\"charts-image\" src=\"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115967593_charts/origin.png\" alt=\"Before and after results\">\n\n      <!-- Testimonial -->\n      <div class=\"testimonial-card\">\n        <p class=\"testimonial-text\">\"I've tried a lot of training tools, but this is the first one that actually increased my win rate. The custom trainer targets the exact spots I was losing money in and forces me to fix them. Once those leaks closed, the results showed up quickly.\" – Roy M28</p>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"footer\">\n      <button id=\"action_button\" onclick=\"handleContinue()\">Continue</button>\n    </div>\n\n  </div>\n\n  <script>\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {}, labels: {}, userData: {}, customData: {},\n      webOnboarding: {}, incomeUserData: {}, language: 'en', screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => { console.log('leaveCustomScreen:', args); };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => { port.postMessage({ eventName: 'LeaveCustomScreen', args }, []); };\n          window.backScreen = () => { port.postMessage({ eventName: 'BackScreen', args: null }, []); };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => { if (!isOnboardingOnline) initScreen(); }, 100);\n    });\n\n    // -- Haptics --\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) return currentWindow.segmentlySDK;\n          if (currentWindow === currentWindow.parent) break;\n          currentWindow = currentWindow.parent;\n        } catch (e) { break; }\n      }\n      return null;\n    }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n      updateLabels();\n    }\n\n    function handleContinue() {\n      haptic('medium');\n      const sdk = getSegmentlySDK();\n      if (sdk) sdk.trackEvent('UserContinuedOnboarding', { screenName: 'social_proof' });\n      if (sdk && sdk.setVariable) sdk.setVariable('action', 'continue');\n      window.leaveCustomScreen({ action: 'continue' });\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language])\n        titleEl.innerHTML = labels.title_label.value.l10n[language];\n\n      const btnEl = document.getElementById('action_button');\n      if (btnEl && labels.button_text?.value?.l10n?.[language])\n        btnEl.textContent = labels.button_text.value.l10n[language];\n    }\n  </script>\n</body>\n</html>\n"},"actionBar":{},"canvas":{"webViewBackgroundColor":"#1a1a1a","insets":{"bottom":0,"end":16,"start":16,"top":0},"background":{"content":{"color":"#1a1a1a"},"kind":"solid"}},"header":{},"offlineFirst":true},"name":"community","tags":[],"screenType":"WebEmbed","position":{"x":11149.33333333333,"y":1104}},"9148bd8c-6eac-4bd8-9a30-78ba9b768ad6":{"content":{"animated":true,"countdown":null,"systemPrompt":null,"embed":{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n  <title>Runout — Email</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000B14;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000B14;\n      overflow: hidden;\n      position: relative;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000B14;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    /* --- Decorative background --- */\n    .bg-image {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: auto;\n      pointer-events: none;\n    }\n\n    /* --- Content --- */\n    .content {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      padding: 60px 24px 0;\n      position: relative;\n      z-index: 1;\n      min-height: 0;\n    }\n\n    .badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      padding: 8px 16px;\n      border: 1px solid rgba(255, 255, 255, 0.15);\n      border-radius: 100px;\n      font-size: 14px;\n      font-weight: 500;\n      color: #FFFFFF;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      align-self: flex-start;\n      margin-bottom: 20px;\n    }\n\n    #title_label {\n      margin: 0 0 10px;\n      font-size: 44px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 1.15;\n    }\n\n    #subtitle_label {\n      margin: 0 0 24px;\n      font-size: 16px;\n      font-weight: 400;\n      color: rgba(255, 255, 255, 0.75);\n      line-height: 1.5;\n    }\n\n    /* --- Form --- */\n    .form-group {\n      flex-shrink: 0;\n    }\n\n    .input-label {\n      display: block;\n      font-size: 14px;\n      font-weight: 600;\n      color: #8E8E93;\n      margin-bottom: 8px;\n      letter-spacing: -0.43px;\n    }\n\n    .email-input {\n      width: 100%;\n      padding: 18px 20px;\n      background: #000000;\n      border: 2px solid #222327;\n      border-radius: 24px;\n      box-shadow: 0px 3px 0px 0px #222327;\n      color: #FFFFFF;\n      font-family: 'Inter', sans-serif;\n      font-size: 15px;\n      font-weight: 400;\n      line-height: 20px;\n      letter-spacing: -0.23px;\n      outline: none;\n      transition: border-color 0.2s, box-shadow 0.2s;\n      -webkit-appearance: none;\n    }\n\n    .email-input::placeholder {\n      color: #727785;\n    }\n\n    .email-input:focus {\n      border-color: #526DF2;\n      box-shadow: 0px 3px 0px 0px #526DF2;\n    }\n\n    .email-input.error {\n      border-color: #FF453A;\n      box-shadow: 0px 3px 0px 0px #FF453A;\n    }\n\n    .error-msg {\n      font-size: 13px;\n      color: #FF453A;\n      margin-top: 8px;\n      display: none;\n    }\n\n    .error-msg.visible {\n      display: block;\n    }\n\n    /* Spacer pushes footer down */\n    .spacer { flex: 1; }\n\n    /* --- Footer --- */\n    .footer {\n      flex-shrink: 0;\n      padding: 24px 24px 16px;\n      position: relative;\n      z-index: 2;\n    }\n\n    #action_button {\n      width: 100%;\n      padding: 14px 20px;\n      box-sizing: border-box;\n      background-color: #F5F5F5;\n      color: #000000;\n      border: none;\n      border-radius: 16px;\n      font-family: 'Inter', sans-serif;\n      font-size: 18px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);\n    }\n    #action_button:hover:not(:disabled) { opacity: 0.9; }\n    #action_button:disabled {\n      opacity: 0.3;\n      cursor: default;\n    }\n\n    .terms {\n      margin: 12px 0 0;\n      font-size: 12px;\n      font-weight: 400;\n      color: rgba(255, 255, 255, 0.3);\n      line-height: 1.5;\n      text-align: center;\n    }\n\n    .terms a {\n      color: rgba(255, 255, 255, 0.5);\n      text-decoration: underline;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <!-- Decorative bg -->\n    <img class=\"bg-image\" src=\"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115729103_email-background/origin.png\" alt=\"\">\n\n    <!-- Content -->\n    <div class=\"content\">\n      <div class=\"badge\" id=\"badge_label\">Runout Poker</div>\n      <h1 id=\"title_label\">Create Your Custom Poker Trainer</h1>\n      <p id=\"subtitle_label\">Enter your email to generate and save your personalized training plan</p>\n\n      <div class=\"form-group\">\n        <label class=\"input-label\" for=\"email_input\" id=\"input_label\">Email</label>\n        <input\n          class=\"email-input\"\n          id=\"email_input\"\n          type=\"email\"\n          inputmode=\"email\"\n          autocomplete=\"email\"\n          autocapitalize=\"off\"\n          autocorrect=\"off\"\n          spellcheck=\"false\"\n          placeholder=\"Enter your email\"\n          enterkeyhint=\"go\"\n        >\n        <p class=\"error-msg\" id=\"error_msg\">Please enter a valid email address</p>\n      </div>\n\n      <div class=\"spacer\"></div>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"footer\">\n      <button id=\"action_button\" disabled onclick=\"handleContinue()\">Create My Trainer</button>\n      <p class=\"terms\" id=\"terms_label\">By continuing you agree to our <a href=\"#\">Terms</a> and <a href=\"#\">Privacy Policy</a></p>\n    </div>\n\n  </div>\n\n  <script>\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {}, labels: {}, userData: {}, customData: {},\n      webOnboarding: {}, incomeUserData: {}, language: 'en', screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => { console.log('leaveCustomScreen:', args); };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => { port.postMessage({ eventName: 'LeaveCustomScreen', args }, []); };\n          window.backScreen = () => { port.postMessage({ eventName: 'BackScreen', args: null }, []); };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => { if (!isOnboardingOnline) initScreen(); }, 100);\n    });\n\n    // -- Haptics --\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n    const DATA_KEY = 'email';\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) return currentWindow.segmentlySDK;\n          if (currentWindow === currentWindow.parent) break;\n          currentWindow = currentWindow.parent;\n        } catch (e) { break; }\n      }\n      return null;\n    }\n\n    function handleBack() { window.backScreen(); }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n\n      const input = document.getElementById('email_input');\n      const btn = document.getElementById('action_button');\n      const errorMsg = document.getElementById('error_msg');\n\n      // Restore saved email\n      const sdk = getSegmentlySDK();\n      let saved = sdk ? sdk.getVariable(DATA_KEY) : null;\n      if (!saved) {\n        const inputs = window.onboardingOnlineCustomScreenData.inputs;\n        if (inputs && inputs[DATA_KEY]) {\n          const inputData = inputs[DATA_KEY];\n          saved = (typeof inputData === 'object' && 'value' in inputData) ? inputData.value : inputData;\n        }\n      }\n      if (saved) {\n        input.value = saved;\n        btn.disabled = !isValidEmail(saved);\n      }\n\n      // Real-time validation\n      let blurred = false;\n\n      input.addEventListener('input', () => {\n        const val = input.value.trim();\n        const valid = isValidEmail(val);\n        btn.disabled = !valid;\n\n        if (blurred && val.length > 0 && !valid) {\n          input.classList.add('error');\n          errorMsg.classList.add('visible');\n        } else {\n          input.classList.remove('error');\n          errorMsg.classList.remove('visible');\n        }\n      });\n\n      input.addEventListener('blur', () => {\n        blurred = true;\n        const val = input.value.trim();\n        if (val.length > 0 && !isValidEmail(val)) {\n          input.classList.add('error');\n          errorMsg.classList.add('visible');\n        }\n      });\n\n      input.addEventListener('focus', () => {\n        input.classList.remove('error');\n        errorMsg.classList.remove('visible');\n      });\n\n      // Submit on Enter key\n      input.addEventListener('keydown', (e) => {\n        if (e.key === 'Enter' && !btn.disabled) {\n          e.preventDefault();\n          handleContinue();\n        }\n      });\n\n      updateLabels();\n\n      // Auto-focus after short delay (allows iframe to settle)\n      setTimeout(() => { input.focus(); }, 300);\n    }\n\n    function isValidEmail(email) {\n      return /^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$/.test(email);\n    }\n\n    function handleContinue() {\n      const input = document.getElementById('email_input');\n      const email = input.value.trim();\n\n      if (!isValidEmail(email)) return;\n\n      haptic('medium');\n      input.blur();\n\n      const sdk = getSegmentlySDK();\n      if (sdk) {\n        sdk.trackEvent('UserSubmittedEmail', { screenName: 'email', email: email });\n      }\n      if (sdk && sdk.setVariable) {\n        sdk.setVariable(DATA_KEY, email);\n      }\n      window.leaveCustomScreen({ [DATA_KEY]: email });\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language])\n        titleEl.innerHTML = labels.title_label.value.l10n[language];\n\n      const subtitleEl = document.getElementById('subtitle_label');\n      if (subtitleEl && labels.subtitle_label?.value?.l10n?.[language])\n        subtitleEl.textContent = labels.subtitle_label.value.l10n[language];\n\n      const btnEl = document.getElementById('action_button');\n      if (btnEl && labels.button_text?.value?.l10n?.[language])\n        btnEl.textContent = labels.button_text.value.l10n[language];\n    }\n  </script>\n</body>\n</html>\n","callback":{"action":{"kind":"advance","edges":[{"nextScreenId":"4a0dfc4a-62da-4c78-ade1-25c964afe9bd","conditions":[],"transitionKind":"push"}]}},"childSections":[{"label":"frame_2131331307","id":"section-moe87nw0-z7r8h","mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png"}}}},"appearance":{}},"layout":{"heightKind":"auto","flexGrow":1,"scrollable":false,"flexShrink":1},"kind":"Media","order":0},{"label":"frame_2131331309","id":"section-moe8gqhb-nk7tv","mediaContent":{"kind":"Image","appearance":{},"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png"}}}}},"kind":"Media","layout":{"flexShrink":1,"flexGrow":1,"scrollable":false,"heightKind":"auto"},"order":1},{"label":"1-stats-background","mediaContent":{"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115572624_1-stats-background/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115572624_1-stats-background/origin.png"}}}},"appearance":{},"kind":"Image"},"id":"section-moe8qa2a-3u5xz","layout":{"scrollable":false,"flexGrow":1,"flexShrink":1,"heightKind":"auto"},"kind":"Media","order":2},{"label":"hero","id":"section-moe8rbkb-4jjcw","mediaContent":{"appearance":{},"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115622136_hero/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115622136_hero/small.png"}}}},"kind":"Image"},"layout":{"scrollable":false,"flexGrow":1,"flexShrink":1,"heightKind":"auto"},"kind":"Media","order":3},{"id":"section-moe8suth-031ep","mediaContent":{"kind":"Image","appearance":{},"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115693642_hero-sessions-adapted/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115693642_hero-sessions-adapted/origin.png"}}}}},"label":"hero-sessions-adapted","order":4,"kind":"Media","layout":{"flexGrow":1,"scrollable":false,"flexShrink":1,"heightKind":"auto"}},{"label":"email-background","mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115729103_email-background/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115729103_email-background/small.png"}}}},"appearance":{}},"id":"section-moe8tlwx-91z5s","layout":{"scrollable":false,"flexShrink":1,"flexGrow":1,"heightKind":"auto"},"kind":"Media","order":5}]},"actionBar":{},"canvas":{"webViewBackgroundColor":"#1a1a1a","insets":{"start":16,"bottom":0,"end":16,"top":0},"background":{"content":{"color":"#1a1a1a"},"kind":"solid"}},"offlineFirst":true,"header":{}},"name":"email","tags":[],"screenType":"WebEmbed","position":{"x":8336,"y":1104},"id":"9148bd8c-6eac-4bd8-9a30-78ba9b768ad6"},"915d218e-c2a1-4c79-89b5-c8c5854f63ca":{"name":"mistakes-chart","content":{"countdown":null,"animated":true,"embed":{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Mistakes</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000000;\n      overflow: hidden;\n      position: relative;\n    }\n    /* Soft blue glow behind the chart (Figma \"Ellipse 6\" — heavily blurred ring → blue cloud at bottom) */\n    .screen-container::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background:\n        radial-gradient(ellipse 90% 55% at 50% 50%,\n                        rgba(82, 111, 242, 0.275) 0%,\n                        rgba(82, 111, 242, 0.09) 40%,\n                        rgba(82, 111, 242, 0) 70%);\n      pointer-events: none;\n      z-index: 0;\n    }\n    /* Keep all real content above the glow layer */\n    .screen-container > * { position: relative; z-index: 1; }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    /* --- Stats header --- */\n    .stats-header {\n      flex-shrink: 0;\n      padding: 70px 0 0;\n      text-align: center;\n    }\n\n    .percentage {\n      font-size: 64px;\n      font-weight: 700;\n      color: #FFFFFF;\n      line-height: 72px;\n      letter-spacing: -3px;\n      margin: 0;\n    }\n\n    .percentage-desc {\n      margin: 12px 0 0;\n      font-size: 17px;\n      font-weight: 500;\n      color: #717680;\n      line-height: 22px;\n      letter-spacing: -0.43px;\n    }\n\n    /* --- Hero chart --- */\n    .hero-section {\n      flex: 1 1 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 0;\n      overflow: hidden;\n      padding: 12px 16px;\n    }\n\n    .chart-svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n      max-height: 100%;\n      pointer-events: none;\n    }\n\n    /* axis lines + labels start hidden, fade in with the curve */\n    .axis-line, .axis-label {\n      opacity: 0;\n      animation: axisFade 700ms ease-out 100ms forwards;\n    }\n    @keyframes axisFade {\n      to { opacity: 1; }\n    }\n\n\n    /* --- Bottom Text --- */\n    .bottom-section {\n      flex-shrink: 0;\n      padding: 0 30px;\n      text-align: center;\n    }\n\n    #title_label {\n      margin: 0 0 12px;\n      font-size: 28px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 34px;\n      letter-spacing: -0.5px;\n    }\n\n    #subtitle_label {\n      margin: 0 0 12px;\n      font-size: 20px;\n      font-weight: 500;\n      color: #727785;\n      line-height: 25px;\n      letter-spacing: -0.45px;\n    }\n\n    .footnote {\n      margin: 0;\n      font-size: 12px;\n      font-weight: 400;\n      color: #727785;\n      line-height: 16px;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      flex-shrink: 0;\n      padding: 16px 24px 24px;\n    }\n\n    #action_button {\n      width: 100%;\n      padding: 14px 20px;\n      box-sizing: border-box;\n      background-color: #F5F5F5;\n      color: #000000;\n      border: none;\n      border-radius: 16px;\n      font-family: 'Inter', sans-serif;\n      font-size: 18px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);\n    }\n    #action_button:hover { opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <!-- Stats text -->\n    <div class=\"stats-header\">\n      <p class=\"percentage\" id=\"percentage\">0% less</p>\n      <p class=\"percentage-desc\" id=\"percentage_desc\">Mistakes per 100 hands ↓*</p>\n    </div>\n\n    <!-- Hero chart (animated SVG, Figma Vector 6 centerline as rounded stroke) -->\n    <div class=\"hero-section\">\n      <svg class=\"chart-svg\" viewBox=\"80 95 420 305\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n        <defs>\n          <!-- Gradient applied along the curve in its post-Y-flip viewport coords -->\n          <linearGradient id=\"curveGrad\" gradientUnits=\"userSpaceOnUse\"\n                          x1=\"120\" y1=\"125\" x2=\"465\" y2=\"355\">\n            <stop offset=\"0\"    stop-color=\"#3B5AEE\"/>\n            <stop offset=\"0.4\"  stop-color=\"#7C84EA\"/>\n            <stop offset=\"0.65\" stop-color=\"#5F6EB7\"/>\n            <stop offset=\"0.8\"  stop-color=\"#6195C9\"/>\n            <stop offset=\"1\"    stop-color=\"#3B5AEE\"/>\n          </linearGradient>\n          <filter id=\"curveHalo\" x=\"-20%\" y=\"-20%\" width=\"140%\" height=\"140%\">\n            <feGaussianBlur stdDeviation=\"18\"/>\n          </filter>\n          <!-- Axis gradient: transparent at both ends, full white at 65% along the line.\n               userSpaceOnUse is required because a horizontal/vertical <line>\n               has a zero-dimension bbox, so objectBoundingBox gradients render nothing. -->\n          <linearGradient id=\"yAxisGrad\" gradientUnits=\"userSpaceOnUse\"\n                          x1=\"100\" y1=\"105\" x2=\"100\" y2=\"375\">\n            <stop offset=\"0\"    stop-color=\"#FFFFFF\" stop-opacity=\"0\"/>\n            <stop offset=\"0.65\" stop-color=\"#FFFFFF\" stop-opacity=\"0.35\"/>\n            <stop offset=\"1\"    stop-color=\"#FFFFFF\" stop-opacity=\"0\"/>\n          </linearGradient>\n          <linearGradient id=\"xAxisGrad\" gradientUnits=\"userSpaceOnUse\"\n                          x1=\"100\" y1=\"375\" x2=\"495\" y2=\"375\">\n            <stop offset=\"0\"    stop-color=\"#FFFFFF\" stop-opacity=\"0\"/>\n            <stop offset=\"0.65\" stop-color=\"#FFFFFF\" stop-opacity=\"0.35\"/>\n            <stop offset=\"1\"    stop-color=\"#FFFFFF\" stop-opacity=\"0\"/>\n          </linearGradient>\n        </defs>\n\n        <!-- Y axis -->\n        <line class=\"axis-line\" x1=\"100\" y1=\"105\" x2=\"100\" y2=\"375\"\n              stroke=\"url(#yAxisGrad)\" stroke-width=\"3\"/>\n        <!-- X axis -->\n        <line class=\"axis-line\" x1=\"100\" y1=\"375\" x2=\"495\" y2=\"375\"\n              stroke=\"url(#xAxisGrad)\" stroke-width=\"3\"/>\n\n        <!-- \"Mistakes\" label — dim grayed-blue (visually matches Figma's soft-light blend) -->\n        <text class=\"axis-label\" x=\"-260\" y=\"92\"\n              transform=\"rotate(-90)\"\n              fill=\"#5D7DEA\" font-family=\"Inter, -apple-system, sans-serif\"\n              font-size=\"15\" font-weight=\"600\" letter-spacing=\"-0.23\">Mistakes</text>\n\n        <!-- \"Reps over time\" — saturated brand blue (matches overlay blend output) -->\n        <text class=\"axis-label\" x=\"490\" y=\"398\" text-anchor=\"end\"\n              fill=\"#5D7DEA\" font-family=\"Inter, -apple-system, sans-serif\"\n              font-size=\"15\" font-weight=\"600\" letter-spacing=\"-0.23\">Reps over time</text>\n\n        <!-- Curve: Y-flipped so the path flows top-left → bottom-right -->\n        <g transform=\"translate(0, 474.204) scale(1, -1)\">\n          <!-- Soft outer halo (heavy blur, low opacity) -->\n          <path id=\"curveGlow\"\n                d=\"M120.643 347.736 C152.794 344.541, 206.307 360.971, 245.144 293.654 C283.980 226.336, 320.620 257.143, 376.257 226.336 C431.895 195.530, 465.643 122.736, 465.643 122.736\"\n                fill=\"none\" stroke=\"url(#curveGrad)\" stroke-width=\"26\" stroke-opacity=\"0.55\"\n                stroke-linecap=\"round\" filter=\"url(#curveHalo)\"\n                stroke-dasharray=\"2000\" stroke-dashoffset=\"2000\"/>\n          <!-- Crisp gradient stroke on top -->\n          <path id=\"curveStroke\"\n                d=\"M120.643 347.736 C152.794 344.541, 206.307 360.971, 245.144 293.654 C283.980 226.336, 320.620 257.143, 376.257 226.336 C431.895 195.530, 465.643 122.736, 465.643 122.736\"\n                fill=\"none\" stroke=\"url(#curveGrad)\" stroke-width=\"9\"\n                stroke-linecap=\"round\"\n                stroke-dasharray=\"2000\" stroke-dashoffset=\"2000\"/>\n        </g>\n      </svg>\n    </div>\n\n    <!-- Bottom text -->\n    <div class=\"bottom-section\">\n      <h1 id=\"title_label\">Train smarter.</h1>\n      <p id=\"subtitle_label\">Hands that adapt to your play style</p>\n      <p class=\"footnote\" id=\"footnote\">*based on internal user surveys</p>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"footer\">\n      <button id=\"action_button\" onclick=\"handleContinue()\">Continue</button>\n    </div>\n\n  </div>\n\n  <script>\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {}, labels: {}, userData: {}, customData: {},\n      webOnboarding: {}, incomeUserData: {}, language: 'en', screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => { console.log('leaveCustomScreen:', args); };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => { port.postMessage({ eventName: 'LeaveCustomScreen', args }, []); };\n          window.backScreen = () => { port.postMessage({ eventName: 'BackScreen', args: null }, []); };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => { if (!isOnboardingOnline) initScreen(); }, 100);\n    });\n\n    // -- Haptics --\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) return currentWindow.segmentlySDK;\n          if (currentWindow === currentWindow.parent) break;\n          currentWindow = currentWindow.parent;\n        } catch (e) { break; }\n      }\n      return null;\n    }\n\n    function handleBack() { window.backScreen(); }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n\n      updateLabels();\n      startCurveAnimation();\n      startAnimation();\n    }\n\n    function startCurveAnimation() {\n      const glow = document.getElementById('curveGlow');\n      const stroke = document.getElementById('curveStroke');\n      if (!glow || !stroke) return;\n\n      [glow, stroke].forEach(p => {\n        const len = p.getTotalLength();\n        p.style.strokeDasharray  = len;\n        p.style.strokeDashoffset = len;\n      });\n\n      glow.getBoundingClientRect(); // force layout\n      const ease = 'cubic-bezier(0.22, 1, 0.36, 1)';\n      glow.style.transition   = `stroke-dashoffset 1800ms ${ease}`;\n      stroke.style.transition = `stroke-dashoffset 1800ms ${ease}`;\n      requestAnimationFrame(() => {\n        glow.style.strokeDashoffset   = 0;\n        stroke.style.strokeDashoffset = 0;\n      });\n    }\n\n    function startAnimation() {\n      const duration = 1800;\n      const targetPercent = 56;\n      const percentEl = document.getElementById('percentage');\n      const startTime = performance.now();\n\n      function updateCounter(now) {\n        const elapsed = now - startTime;\n        const progress = Math.min(elapsed / duration, 1);\n        const eased = 1 - Math.pow(1 - progress, 3);\n        const current = Math.round(eased * targetPercent);\n        percentEl.textContent = current + '% less';\n\n        if (progress < 1) {\n          requestAnimationFrame(updateCounter);\n        } else {\n          percentEl.textContent = targetPercent + '% less';\n          haptic('medium');\n        }\n      }\n\n      requestAnimationFrame(updateCounter);\n    }\n\n    function handleContinue() {\n      haptic('medium');\n      const sdk = getSegmentlySDK();\n      if (sdk) sdk.trackEvent('UserContinuedOnboarding', { screenName: 'mistakes' });\n      if (sdk && sdk.setVariable) sdk.setVariable('action', 'continue');\n      window.leaveCustomScreen({ action: 'continue' });\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language])\n        titleEl.innerHTML = labels.title_label.value.l10n[language];\n\n      const subtitleEl = document.getElementById('subtitle_label');\n      if (subtitleEl && labels.subtitle_label?.value?.l10n?.[language])\n        subtitleEl.textContent = labels.subtitle_label.value.l10n[language];\n\n      const btnEl = document.getElementById('action_button');\n      if (btnEl && labels.button_text?.value?.l10n?.[language])\n        btnEl.textContent = labels.button_text.value.l10n[language];\n    }\n  </script>\n</body>\n</html>\n","childSections":[{"id":"section-moe87nw0-z7r8h","mediaContent":{"kind":"Image","appearance":{},"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png"}}}}},"label":"frame_2131331307","order":0,"layout":{"flexShrink":1,"scrollable":false,"flexGrow":1,"heightKind":"auto"},"kind":"Media"},{"order":1,"layout":{"heightKind":"auto","flexShrink":1,"scrollable":false,"flexGrow":1},"kind":"Media","id":"section-moe8gqhb-nk7tv","mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png"}}}},"appearance":{}},"label":"frame_2131331309"},{"layout":{"heightKind":"auto","flexGrow":1,"flexShrink":1,"scrollable":false},"kind":"Media","order":2,"label":"1-stats-background","id":"section-moe8qa2a-3u5xz","mediaContent":{"appearance":{},"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115572624_1-stats-background/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115572624_1-stats-background/origin.png"}}}},"kind":"Image"}},{"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115622136_hero/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115622136_hero/origin.png"}}}},"appearance":{}},"id":"section-moe8rbkb-4jjcw","label":"hero","order":3,"layout":{"flexGrow":1,"flexShrink":1,"scrollable":false,"heightKind":"auto"},"kind":"Media"}],"callback":{"action":{"kind":"advance","edges":[{"nextScreenId":"1e1426b1-6cd8-4657-a0f4-75c02779c96c","transitionKind":"push","conditions":[]}]}}},"systemPrompt":null,"actionBar":{},"offlineFirst":true,"header":{},"canvas":{"webViewBackgroundColor":"#1a1a1a","insets":{"top":0,"end":16,"bottom":0,"start":16},"background":{"kind":"solid","content":{"color":"#1a1a1a"}}}},"tags":[],"screenType":"WebEmbed","position":{"y":1104,"x":7213.333333333334},"id":"915d218e-c2a1-4c79-89b5-c8c5854f63ca"},"9cbc374e-e8fc-4e83-b079-9319dc64f0ae":{"position":{"y":1120,"x":11872},"screenType":"WebEmbed","tags":[],"name":"paywall","content":{"actionBar":{},"offlineFirst":true,"header":{},"canvas":{"webViewBackgroundColor":"#1a1a1a","insets":{"start":16,"bottom":0,"end":16,"top":0},"background":{"kind":"solid","content":{"color":"#1a1a1a"}}},"countdown":null,"animated":true,"embed":{"childSections":[{"order":0,"layout":{"heightKind":"auto","flexGrow":1,"flexShrink":1,"scrollable":false},"kind":"Media","id":"section-moe8zoyk-pdapv","mediaContent":{"appearance":{},"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777116012728_paywall-product-background/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777116012728_paywall-product-background/origin.png"}}}},"kind":"Image"},"label":"paywall-product-background"},{"label":"hero-video","mediaContent":{"kind":"Video","content":{"video":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/videos/en-US_1777129686415_paywall-video/thumb.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/videos/en-US_1777129686415_paywall-video/video.mp4"}}}},"appearance":{}},"id":"section-moe8zxwi-ueig7","kind":"Media","layout":{"flexShrink":1,"flexGrow":1,"scrollable":false,"heightKind":"auto"},"order":1},{"id":"section-moea0t9x-43dib","label":"Product Catalog","order":2,"layout":{"flexShrink":1,"scrollable":false,"flexGrow":0,"heightKind":"auto"},"kind":"ProductCatalog","productCatalogContent":{"productLayout":"CheckboxLabels","items":[{"weight":0,"productId":"OBW5ryt3KEnvppfIzUmL","bottomStartLabel":{"parameters":{"labels":{},"links":{}},"translations":{"en-US":""},"appearance":{"align":"start","color":"#ffffff","fontFamily":"SF Pro","lineHeight":22,"fontWeight":600,"fontSize":16},"kind":"static","layout":{"insets":{}}},"checkbox":{"appearance":{"color":"#ffffff"},"selectedAppearance":{"color":"#ffc201"},"kind":"square","layout":{"insets":{}}},"topEndLabel":{"parameters":{"links":{},"labels":{}},"translations":{"en-US":""},"appearance":{"align":"start","fontFamily":"SF Pro","color":"#ffffff","lineHeight":22,"fontWeight":600,"fontSize":16},"kind":"static","layout":{"insets":{}}},"badge":null,"purchaseButtonLabel":{"appearance":{},"kind":"static","layout":{"insets":{}},"translations":{"en-US":{"parameters":{"labels":{},"links":{}},"styles":{},"box":{"styles":{}},"l10n":{"en-US":""},"kind":"default"}},"parameters":{"labels":{},"links":{}}},"topStartLabel":{"parameters":{"links":{},"labels":{}},"translations":{"en-US":""},"layout":{"insets":{}},"kind":"static","appearance":{"fontWeight":600,"fontSize":16,"align":"start","fontFamily":"SF Pro","color":"#ffffff","lineHeight":22}},"isSelected":true,"bottomEndLabel":{"appearance":{"lineHeight":22,"fontFamily":"SF Pro","align":"start","color":"#ffffff","fontSize":16,"fontWeight":600},"kind":"static","layout":{"insets":{}},"translations":{"en-US":""},"parameters":{"links":{},"labels":{}}}},{"weight":0,"productId":"BrleB8z9viwW07gBIbZa","bottomStartLabel":{"translations":{"en-US":""},"parameters":{"links":{},"labels":{}},"kind":"static","layout":{"insets":{}},"appearance":{"lineHeight":22,"color":"#ffffff","fontFamily":"SF Pro","align":"start","fontSize":16,"fontWeight":600}},"checkbox":{"kind":"square","layout":{"insets":{}},"selectedAppearance":{"color":"#ffc201"},"appearance":{"color":"#ffffff"}},"purchaseButtonLabel":{"appearance":{},"layout":{"insets":{}},"kind":"static","translations":{"en-US":{"styles":{},"parameters":{"links":{},"labels":{}},"kind":"default","l10n":{"en-US":""},"box":{"styles":{}}}},"parameters":{"links":{},"labels":{}}},"badge":null,"topEndLabel":{"appearance":{"fontSize":16,"fontWeight":600,"lineHeight":22,"align":"start","color":"#ffffff","fontFamily":"SF Pro"},"layout":{"insets":{}},"kind":"static","parameters":{"labels":{},"links":{}},"translations":{"en-US":""}},"isSelected":false,"bottomEndLabel":{"layout":{"insets":{}},"kind":"static","appearance":{"lineHeight":22,"color":"#ffffff","fontFamily":"SF Pro","align":"start","fontSize":16,"fontWeight":600},"parameters":{"labels":{},"links":{}},"translations":{"en-US":""}},"topStartLabel":{"appearance":{"fontWeight":600,"fontSize":16,"color":"#ffffff","align":"start","fontFamily":"SF Pro","lineHeight":22},"layout":{"insets":{}},"kind":"static","parameters":{"labels":{},"links":{}},"translations":{"en-US":""}}}],"layout":{"insets":{"start":16,"bottom":16,"end":16,"top":16}},"selectedAppearance":{"backgroundColor":"#ffc201","borders":{"width":2,"color":"#e7b34c","radius":{"uniform":12}}},"viewKind":"stacked","appearance":{"borders":{"radius":{"uniform":12}},"backgroundColor":"#2a2a2a","insets":{"end":16,"bottom":12,"start":16,"top":12},"itemsSpacing":8}}}],"callback":{"action":{"kind":"advance","edges":[{"nextScreenId":"5423526e-d3e8-4386-bc93-93da3b5e2dfb","transitionKind":"push","conditions":[]}]}},"isIframe":false,"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n  <title>Runout — Paywall</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n  <style>\n    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n    body, html {\n      width: 100%;\n      height: 100%;\n      font-family: -apple-system, 'SF Pro Display', 'SF Pro Text', BlinkMacSystemFont, 'Inter', \"Segoe UI\", Roboto, sans-serif;\n      background: #000B14;\n    }\n\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      background: #000B14;\n      position: relative;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000B14;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        height: auto;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    /* --- Video Hero --- */\n    .video-section {\n      flex: 1 1 0;          /* grows to fill whatever the drawer doesn't take */\n      min-height: 0;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .hero-video {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      object-position: center bottom;  /* keep the iPhone product visible; crop the white top of the video */\n      display: block;\n    }\n\n    .video-fade { display: none; }\n\n    /* --- Product background image (hidden — the hero video already shows the product) --- */\n    .paywall-bg-image { display: none; }\n\n    /* --- Bottom Section --- */\n    .bottom-section {\n      flex: 0 0 auto;                 /* drawer height = content height */\n      padding: 0 20px 16px;\n      position: relative;\n      z-index: 1;\n      background: #000B14;\n      border-radius: 24px 24px 0 0;\n      margin-top: -24px;              /* shallower overlap → less rounded \"wasted\" space above the title */\n    }\n\n    #title_label {\n      font-size: 22px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 1.15;\n      text-align: center;\n      margin: 0 0 18px;\n      padding-top: 18px;\n    }\n\n    /* --- Pricing Cards --- */\n    .pricing-row {\n      display: flex;\n      gap: 10px;\n      margin-bottom: 20px;\n      padding-top: 10px;\n    }\n\n    .pricing-card {\n      flex: 1;\n      border-radius: 14px;\n      border: 1px solid rgba(255, 255, 255, 0.15);\n      backdrop-filter: blur(25px);\n      -webkit-backdrop-filter: blur(25px);\n      padding: 14px 12px 12px;\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 6px;\n      cursor: pointer;\n      transition: border-color 0.2s, background 0.2s;\n      position: relative;\n    }\n\n    .pricing-card.selected {\n      background: rgba(255, 255, 255, 0.1);\n      border: 1.5px solid #A5B8FF;\n    }\n\n    .pricing-badge {\n      position: absolute;\n      top: -12px;\n      left: 50%;\n      transform: translateX(-50%);\n      background: #A5B8FF;\n      color: #000B14;\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      padding: 5px 14px;\n      border-radius: 100px;\n      line-height: 1.35;\n      white-space: nowrap;\n    }\n\n    .pricing-name {\n      font-size: 17px;\n      font-weight: 700;\n      color: #FFFFFF;\n      line-height: 1.3;\n      text-align: center;\n      width: 100%;\n    }\n\n    .pricing-details {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 8px;\n      width: 100%;\n    }\n\n    .pricing-weekly {\n      font-size: 13px;\n      font-weight: 400;\n      color: #FFFFFF;\n      line-height: 1.4;\n    }\n\n    .pricing-divider {\n      width: 100%;\n      height: 1px;\n      background: rgba(255, 255, 255, 0.15);\n    }\n\n    .pricing-total {\n      font-size: 13px;\n      font-weight: 400;\n      color: rgba(255, 255, 255, 0.75);\n      line-height: 1.3;\n    }\n\n    /* --- Subscription note --- */\n    .sub-note {\n      text-align: center;\n      font-size: 13px;\n      font-weight: 400;\n      color: rgba(255, 255, 255, 0.75);\n      line-height: 1.3;\n      margin-bottom: 16px;\n    }\n\n    /* --- CTA Button --- */\n    #cta-button {\n      width: 100%;\n      padding: 12px 20px;\n      background-color: #FFFFFF;\n      color: #000B14;\n      border: none;\n      border-radius: 14px;\n      font-family: -apple-system, 'SF Pro Display', 'Inter', sans-serif;\n      font-size: 14px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);\n      margin-bottom: 0;\n      line-height: 1.3;\n    }\n    #cta-button:hover { opacity: 0.9; }\n    #cta-button:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    /* --- Guarantee --- */\n    .guarantee {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 6px;\n      margin-top: 12px;\n      font-size: 12px;\n      font-weight: 500;\n      color: rgba(255, 255, 255, 0.75);\n      line-height: 1.3;\n    }\n\n    .guarantee svg {\n      width: 14px;\n      height: 14px;\n      flex-shrink: 0;\n    }\n\n    /* --- Terms --- */\n    .terms {\n      text-align: center;\n      font-size: 12px;\n      font-weight: 400;\n      color: rgba(255, 255, 255, 0.75);\n      line-height: 1.4;\n      padding-bottom: 4px;\n    }\n\n    .terms a {\n      color: #FFFFFF;\n      font-weight: 500;\n      text-decoration: underline;\n    }\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n\n  <!-- Video Hero -->\n  <div class=\"video-section\">\n    <video class=\"hero-video\" autoplay muted loop playsinline>\n      <source src=\"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/videos/en-US_1777129686415_paywall-video/video.mp4\" type=\"video/mp4\">\n    </video>\n    <div class=\"video-fade\"></div>\n  </div>\n\n  <!-- Product background -->\n  <img class=\"paywall-bg-image\" src=\"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777116012728_paywall-product-background/origin.png\" alt=\"\">\n\n  <!-- Bottom Section -->\n  <div class=\"bottom-section\">\n    <h1 id=\"title_label\">Get Unlimited Access To<br>Your Custom Trainer!</h1>\n\n    <!-- Pricing Cards -->\n    <div class=\"pricing-row\" id=\"pricing-row\">\n      <!-- Catalog index 0 = monthly (left), index 1 = annual (right) -->\n      <div class=\"pricing-card\" onclick=\"onCardClick(0)\">\n        <span class=\"pricing-name\">1 Month</span>\n        <div class=\"pricing-details\">\n          <span class=\"pricing-weekly\">$4.62 per week</span>\n          <div class=\"pricing-divider\"></div>\n          <span class=\"pricing-total\">$19.99 per month</span>\n        </div>\n      </div>\n\n      <div class=\"pricing-card selected\" onclick=\"onCardClick(1)\">\n        <span class=\"pricing-badge\">Best Value</span>\n        <span class=\"pricing-name\">1 Year</span>\n        <div class=\"pricing-details\">\n          <span class=\"pricing-weekly\">$1.73 per week</span>\n          <div class=\"pricing-divider\"></div>\n          <span class=\"pricing-total\">$89.99 per year</span>\n        </div>\n      </div>\n    </div>\n\n    <p class=\"sub-note\">Subscription, Cancel Anytime</p>\n\n    <button id=\"cta-button\">\n      <span id=\"cta-label\">Continue</span>\n    </button>\n\n    <div class=\"guarantee\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 2L4 5v6c0 5 3.5 9.5 8 11 4.5-1.5 8-6 8-11V5l-8-3z\" stroke=\"rgba(255,255,255,0.85)\" stroke-width=\"1.6\" stroke-linejoin=\"round\"/>\n        <path d=\"M8.5 12l2.5 2.5L15.5 10\" stroke=\"rgba(255,255,255,0.85)\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n      <span>100% Money Back Guarantee</span>\n    </div>\n  </div>\n\n</div>\n\n<script>\n  var selectedCardIndex = 1; // default: catalog index 1 = annual (right card)\n  var sdkRef = null;\n  // products[0] and products[1] — populated from SDK by catalog index\n  var products = [null, null];\n\n  // --- SDK Init ---\n  if (typeof segmentlySDK !== 'undefined') {\n    segmentlySDK.ready().then(function(sdk) { init(sdk); });\n  }\n\n  function init(sdk) {\n    sdkRef = sdk;\n\n    // --- Media ---\n    var videoMedia = sdk.getChildSectionMedia('hero-video');\n    if (videoMedia && videoMedia.url) {\n      var video = document.querySelector('.hero-video');\n      var source = video.querySelector('source');\n      source.src = videoMedia.url;\n      video.load();\n    }\n\n    var bgMedia = sdk.getChildSectionMedia('paywall-product-background');\n    if (bgMedia && bgMedia.url) {\n      var bgImg = document.querySelector('.paywall-bg-image');\n      if (bgImg) bgImg.src = bgMedia.url;\n    }\n\n    // --- Products: store raw product objects by catalog index ---\n    var allProducts = sdk.getProducts();\n    if (allProducts && allProducts.length > 0) {\n      allProducts.forEach(function(p) {\n        products[p.index] = p;\n        console.log('[paywall] product index:', p.index, 'id:', p.productId, 'price:', sdk.getProductPrice(p.productId));\n      });\n\n      // Select default (right card = catalog index 1 = annual)\n      var defaultProduct = products[selectedCardIndex] || products[0];\n      if (defaultProduct) sdk.selectProduct(defaultProduct.productId);\n    }\n\n    // --- CTA: select + purchase in one shot ---\n    document.getElementById('cta-button').addEventListener('click', function() {\n      haptic('medium');\n      var product = products[selectedCardIndex];\n      console.log('[paywall] CTA clicked, cardIndex:', selectedCardIndex, 'productId:', product ? product.productId : 'none');\n      if (!product) return;\n\n      var btn = document.getElementById('cta-button');\n      var label = document.getElementById('cta-label');\n      var originalLabel = label.textContent;\n      btn.disabled = true;\n      label.textContent = 'Processing...';\n\n      // Select by productId (recommended), then purchase\n      sdk.selectProduct(product.productId);\n      sdk.purchaseProduct(product.productId, {\n        onSuccess: function() {\n          label.textContent = 'Success!';\n          sdk.navigateNext();\n        },\n        onCancel: function() {\n          btn.disabled = false;\n          label.textContent = originalLabel;\n        },\n        onError: function(err) {\n          console.error('Purchase error:', err);\n          btn.disabled = false;\n          label.textContent = originalLabel;\n        }\n      });\n    });\n  }\n\n  function onCardClick(cardIndex) {\n    if (!sdkRef) return;\n    selectedCardIndex = cardIndex;\n    haptic('selection');\n\n    // Visual highlight\n    document.querySelectorAll('.pricing-card').forEach(function(card, i) {\n      card.classList.toggle('selected', i === cardIndex);\n    });\n\n    // Tell SDK — use productId (recommended per API docs)\n    var product = products[cardIndex];\n    if (product) {\n      console.log('[paywall] card selected:', cardIndex, 'productId:', product.productId);\n      sdkRef.selectProduct(product.productId);\n    }\n  }\n\n  // -- Haptics --\n  (function () {\n    var _lbl = document.createElement('label');\n    var _chk = document.createElement('input');\n    _chk.type = 'checkbox';\n    _chk.setAttribute('switch', '');\n    _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n    _lbl.appendChild(_chk);\n    document.body.appendChild(_lbl);\n    function _pulse() { _lbl.click(); }\n    window.haptic = function (type) {\n      if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n      var taps = type === 'selection' ? 1 : 2;\n      for (var i = 0; i < taps; i++) {\n        if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n      }\n    };\n  })();\n</script>\n</body>\n</html>\n"},"systemPrompt":null},"id":"9cbc374e-e8fc-4e83-b079-9319dc64f0ae"},"a2c37d0c-f323-4e5d-a157-a413c4034a43":{"id":"a2c37d0c-f323-4e5d-a157-a413c4034a43","tags":[],"content":{"header":{},"offlineFirst":true,"canvas":{"insets":{"top":0,"start":16,"bottom":0,"end":16},"webViewBackgroundColor":"#1a1a1a","background":{"content":{"color":"#1a1a1a"},"kind":"solid"}},"actionBar":{},"embed":{"callback":{"action":{"edges":[{"nextScreenId":"3e352016-48a5-47de-b7ee-68c5beaf0172","conditions":[],"transitionKind":"push"}],"kind":"advance"}},"childSections":[{"id":"section-moe87nw0-z7r8h","mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png"}}}},"appearance":{}},"label":"frame_2131331307","order":0,"kind":"Media","layout":{"heightKind":"auto","flexShrink":1,"flexGrow":1,"scrollable":false}},{"layout":{"flexShrink":1,"scrollable":false,"flexGrow":1,"heightKind":"auto"},"kind":"Media","order":1,"label":"frame_2131331309","mediaContent":{"kind":"Image","appearance":{},"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png","original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png"}}}}},"id":"section-moe8gqhb-nk7tv"}],"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Postflop Decision</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000000;\n      overflow: hidden;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    .nav-bar {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      padding: 14px 24px 0 16px;\n      gap: 16px;\n    }\n\n    .back-btn {\n      width: 44px;\n      height: 44px;\n      border-radius: 50%;\n      border: 1px solid rgba(255, 255, 255, 0.12);\n      background: rgba(255, 255, 255, 0.05);\n      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: rgba(255, 255, 255, 0.7);\n    }\n    .back-btn svg { width: 20px; height: 20px; }\n\n    .progress-bar-bg {\n      flex: 1;\n      height: 8px;\n      background-color: #222327;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      width: 76%;\n      background-color: #526DF2;\n      border-radius: 4px;\n    }\n\n    .header {\n      flex-shrink: 0;\n      padding: 32px 30px 0;\n    }\n\n    #title_label {\n      margin: 0;\n      font-size: 22px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 28px;\n      letter-spacing: -0.26px;\n    }\n\n    .options-list {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 32px 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      scrollbar-width: none;\n    }\n    .options-list::-webkit-scrollbar { display: none; }\n\n    .option-card {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 18px 16px;\n      border-radius: 20px;\n      background: #131416;\n      border: 2px solid #222327;\n      box-shadow: 0px 3px 0px 0px #222327;\n      cursor: pointer;\n      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;\n    }\n\n    .option-card.selected {\n      border-color: #526DF2;\n      background: #1A1E4C;\n      box-shadow: 0px 3px 0px 0px #526DF2;\n    }\n\n    .option-text { flex: 1; }\n\n    .option-title {\n      font-size: 17px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 22px;\n      letter-spacing: -0.43px;\n      margin-bottom: 4px;\n    }\n\n    .option-desc {\n      font-size: 13.5px;\n      font-weight: 400;\n      color: #A4A7AE;\n      line-height: 20px;\n      letter-spacing: -0.23px;\n    }\n\n    .option-radio {\n      flex-shrink: 0;\n      width: 20px;\n      height: 20px;\n      border-radius: 10px;\n      border: 1px solid #222327;\n      background: #000000;\n      transition: border-color 0.15s, background 0.15s;\n      position: relative;\n    }\n\n    .option-card.selected .option-radio {\n      border-color: #526DF2;\n      background: #526DF2;\n    }\n\n    .option-card.selected .option-radio::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      background: #FFFFFF;\n    }\n\n    .footer-hint {\n      flex-shrink: 0;\n      text-align: center;\n      margin: 0;\n      padding: 8px 24px 0;\n      font-size: 16px;\n      font-weight: 400;\n      font-style: italic;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"nav-bar\">\n      <button class=\"back-btn\" onclick=\"handleBack()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n      <div class=\"progress-bar-bg\">\n        <div class=\"progress-bar-fill\"></div>\n      </div>\n    </div>\n\n    <div class=\"header\">\n      <h1 id=\"title_label\">How do you primarily approach postflop decisions?</h1>\n    </div>\n\n    <div class=\"options-list\">\n      <div class=\"option-card\" data-id=\"LARGELY_INTUITIVE\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Largely intuitive</div>\n          <div class=\"option-desc\">I go by feel and surface-level factors</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"HAND_STRENGTH_FOCUSED\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Hand-strength focused</div>\n          <div class=\"option-desc\">I evaluate made hands, draws, and relative strength</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"RANGE_AWARE\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Range-aware</div>\n          <div class=\"option-desc\">I consider ranges, board texture, and position</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"FREQUENCY_AWARE\" onclick=\"selectOption(this)\">\n        <div class=\"option-text\">\n          <div class=\"option-title\">Frequency-aware</div>\n          <div class=\"option-desc\">I think in terms of frequencies, balance, and game dynamics</div>\n        </div>\n        <div class=\"option-radio\"></div>\n      </div>\n\n      <p class=\"footer-hint\" id=\"hint_label\">You can adjust later</p>\n    </div>\n\n  </div>\n\n  <script>\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {}, labels: {}, userData: {}, customData: {},\n      webOnboarding: {}, incomeUserData: {}, language: 'en', screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => { console.log('leaveCustomScreen:', args); };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => { port.postMessage({ eventName: 'LeaveCustomScreen', args }, []); };\n          window.backScreen = () => { port.postMessage({ eventName: 'BackScreen', args: null }, []); };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => { if (!isOnboardingOnline) { initScreen(); } }, 100);\n    });\n\n    const DATA_KEY = 'postflop_decision';\n    let selectedId = null;\n\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) return currentWindow.segmentlySDK;\n          if (currentWindow === currentWindow.parent) break;\n          currentWindow = currentWindow.parent;\n        } catch (e) { break; }\n      }\n      return null;\n    }\n\n    function handleBack() { window.backScreen(); }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n\n      const sdk = getSegmentlySDK();\n      let saved = sdk ? sdk.getVariable(DATA_KEY) : null;\n      if (!saved) {\n        const inputs = window.onboardingOnlineCustomScreenData.inputs;\n        if (inputs && inputs[DATA_KEY]) {\n          const inputData = inputs[DATA_KEY];\n          saved = (typeof inputData === 'object' && 'value' in inputData) ? inputData.value : inputData;\n        }\n      }\n      if (saved) {\n        const card = document.querySelector(`.option-card[data-id=\"${saved}\"]`);\n        if (card) { card.classList.add('selected'); selectedId = saved; }\n      }\n\n      updateLabels();\n    }\n\n    function selectOption(card) {\n      haptic('selection');\n      document.querySelectorAll('.option-card').forEach(c => c.classList.remove('selected'));\n      card.classList.add('selected');\n      selectedId = card.dataset.id;\n\n      setTimeout(() => {\n        haptic('medium');\n        const sdk = getSegmentlySDK();\n        if (sdk) sdk.trackEvent('UserUpdatedValue', { screenName: 'postflop_decision', answer: selectedId });\n        if (sdk && sdk.setVariable) sdk.setVariable(DATA_KEY, selectedId);\n        window.leaveCustomScreen({ [DATA_KEY]: selectedId });\n      }, 400);\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language])\n        titleEl.textContent = labels.title_label.value.l10n[language];\n\n      const hintEl = document.getElementById('hint_label');\n      if (hintEl && labels.hint_label?.value?.l10n?.[language])\n        hintEl.textContent = labels.hint_label.value.l10n[language];\n    }\n  </script>\n</body>\n</html>\n"},"systemPrompt":null,"countdown":null,"animated":true},"name":"postflop-decisions-expert","position":{"y":1424,"x":4944},"screenType":"WebEmbed"},"ddfd110c-e0e9-45cb-9737-41682ea83c64":{"id":"ddfd110c-e0e9-45cb-9737-41682ea83c64","tags":[],"content":{"systemPrompt":null,"embed":{"callback":{"action":{"kind":"advance","edges":[{"transitionKind":"push","nextScreenId":"6dd700af-5b9c-4539-8aa5-3fae3b81d8d0","conditions":[]}]}},"childSections":[{"mediaContent":{"kind":"Image","appearance":{},"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777114704424_frame-2131331307/small.png"}}}}},"id":"section-moe87nw0-z7r8h","label":"frame_2131331307","order":0,"layout":{"heightKind":"auto","flexShrink":1,"scrollable":false,"flexGrow":1},"kind":"Media"},{"label":"frame_2131331309","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/origin.png","small":"https://api.segmently.ai/assets/onboardings/h6blAZe582KaIeft7ofM/images/en-US_1777115127553_frame-2131331309/small.png"}}}},"appearance":{},"kind":"Image"},"id":"section-moe8gqhb-nk7tv","kind":"Media","layout":{"heightKind":"auto","flexShrink":1,"flexGrow":1,"scrollable":false},"order":1}],"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Runout — Format Selection</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      background: #000000;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      background: #000000;\n      overflow: hidden;\n    }\n\n    @media (min-width: 600px) {\n      body {\n        background: #000000;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 375px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 90vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    /* --- Nav Bar --- */\n    .nav-bar {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      padding: 14px 24px 0 16px;\n      gap: 16px;\n    }\n\n    .back-btn {\n      width: 44px;\n      height: 44px;\n      border-radius: 50%;\n      border: 1px solid rgba(255, 255, 255, 0.12);\n      background: rgba(255, 255, 255, 0.05);\n      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: rgba(255, 255, 255, 0.7);\n    }\n    .back-btn svg { width: 20px; height: 20px; }\n\n    .progress-bar-bg {\n      flex: 1;\n      height: 8px;\n      background-color: #222327;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      width: 40%;\n      background-color: #526DF2;\n      border-radius: 4px;\n    }\n\n    /* --- Header --- */\n    .header {\n      flex-shrink: 0;\n      padding: 32px 30px 0;\n    }\n\n    #title_label {\n      margin: 0 0 12px;\n      font-size: 22px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 28px;\n      letter-spacing: -0.26px;\n    }\n\n    #subtitle_label {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 400;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n\n    /* --- Options List --- */\n    .options-list {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 32px 16px 0;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      scrollbar-width: none;\n    }\n    .options-list::-webkit-scrollbar { display: none; }\n\n    .option-card {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 18px 16px;\n      border-radius: 20px;\n      background: #131416;\n      border: 2px solid #222327;\n      box-shadow: 0px 3px 0px 0px #222327;\n      cursor: pointer;\n      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;\n    }\n\n    .option-card.selected {\n      border-color: #526DF2;\n      background: #1A1E4C;\n      box-shadow: 0px 3px 0px 0px #526DF2;\n    }\n\n    .option-title {\n      flex: 1;\n      font-size: 17px;\n      font-weight: 600;\n      color: #FFFFFF;\n      line-height: 22px;\n      letter-spacing: -0.43px;\n    }\n\n    /* Checkbox indicator */\n    .option-check {\n      flex-shrink: 0;\n      width: 20px;\n      height: 20px;\n      border-radius: 8px;\n      border: 1px solid #393B41;\n      background: #222327;\n      transition: border-color 0.15s, background 0.15s;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .option-card.selected .option-check {\n      border-color: #526DF2;\n      background: #526DF2;\n    }\n\n    .option-card.selected .option-check::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 5px;\n      height: 9px;\n      border-right: 2px solid #FFFFFF;\n      border-bottom: 2px solid #FFFFFF;\n      transform: translate(-50%, -60%) rotate(40deg);\n    }\n\n    /* --- Footer hint --- */\n    .footer-hint {\n      flex-shrink: 0;\n      text-align: center;\n      margin: 0;\n      padding: 8px 24px 0;\n      font-size: 16px;\n      font-weight: 400;\n      font-style: italic;\n      color: #727785;\n      line-height: 20px;\n      letter-spacing: -0.31px;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      flex-shrink: 0;\n      padding: 20px 24px 24px;\n      margin-top: auto;\n    }\n\n    #action_button {\n      width: 100%;\n      padding: 14px 20px;\n      box-sizing: border-box;\n      background-color: #F5F5F5;\n      color: #000000;\n      border: none;\n      border-radius: 16px;\n      font-family: 'Inter', sans-serif;\n      font-size: 18px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);\n    }\n    #action_button:hover:not(:disabled) { opacity: 0.9; }\n    #action_button:disabled {\n      opacity: 0.3;\n      cursor: default;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <!-- Nav bar -->\n    <div class=\"nav-bar\">\n      <button class=\"back-btn\" onclick=\"handleBack()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n      <div class=\"progress-bar-bg\">\n        <div class=\"progress-bar-fill\"></div>\n      </div>\n    </div>\n\n    <!-- Header -->\n    <div class=\"header\">\n      <h1 id=\"title_label\">Which formats are you most interested in studying?</h1>\n      <p id=\"subtitle_label\">This will be used to calibrate your trainer</p>\n    </div>\n\n    <!-- Options -->\n    <div class=\"options-list\">\n      <div class=\"option-card\" data-id=\"CASH_GAMES\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Cash Games</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"TOURNAMENTS_MTT\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Tournaments (MTT)</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <div class=\"option-card\" data-id=\"SIT_AND_GO\" onclick=\"toggleOption(this)\">\n        <span class=\"option-title\">Sit & Go / Single-Table Tournaments</span>\n        <div class=\"option-check\"></div>\n      </div>\n\n      <!-- Hint inside options list -->\n      <p class=\"footer-hint\" id=\"hint_label\">You can adjust later</p>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"footer\">\n      <button id=\"action_button\" disabled onclick=\"handleContinue()\">Continue</button>\n    </div>\n\n  </div>\n\n  <script>\n    // ========================================================================\n    // --- ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n    // ========================================================================\n\n    let isOnboardingOnline = false;\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: 'en',\n      screenId: ''\n    };\n\n    window.leaveCustomScreen = (args) => {\n      console.log('leaveCustomScreen:', args);\n    };\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n        isOnboardingOnline = true;\n        Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n        const port = event.ports[0];\n        if (port) {\n          window.leaveCustomScreen = (args) => {\n            port.postMessage({ eventName: 'LeaveCustomScreen', args }, []);\n          };\n          window.backScreen = () => {\n            port.postMessage({ eventName: 'BackScreen', args: null }, []);\n          };\n        }\n        initScreen();\n      }\n    };\n\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!isOnboardingOnline) {\n          console.log('Running in standalone mode');\n          initScreen();\n        }\n      }, 100);\n    });\n\n    // ========================================================================\n    // --- SCREEN LOGIC ---\n    // ========================================================================\n\n    const DATA_KEY = 'study_formats';\n    let selectedIds = [];\n\n    // -- Haptics --\n    (function () {\n      const _lbl = document.createElement('label');\n      const _chk = document.createElement('input');\n      _chk.type = 'checkbox';\n      _chk.setAttribute('switch', '');\n      _lbl.style.cssText = 'position:fixed;bottom:-200px;left:-200px;opacity:0;pointer-events:none;';\n      _lbl.appendChild(_chk);\n      document.body.appendChild(_lbl);\n      function _pulse() { _lbl.click(); }\n      window.haptic = function (type) {\n        if (navigator.vibrate) { navigator.vibrate(type === 'selection' ? 8 : 25); return; }\n        const taps = type === 'selection' ? 1 : 2;\n        for (let i = 0; i < taps; i++) {\n          if (i === 0) { _pulse(); } else { setTimeout(_pulse, i * 16); }\n        }\n      };\n    })();\n\n    let initialized = false;\n\n    function getSegmentlySDK() {\n      let currentWindow = window;\n      for (let i = 0; i < 4; i++) {\n        try {\n          if (currentWindow.segmentlySDK) {\n            return currentWindow.segmentlySDK;\n          }\n          if (currentWindow === currentWindow.parent) {\n            break;\n          }\n          currentWindow = currentWindow.parent;\n        } catch (e) {\n          console.warn('Cross-origin access blocked at level', i);\n          break;\n        }\n      }\n      return null;\n    }\n\n    function handleBack() {\n      window.backScreen();\n    }\n\n    function initScreen() {\n      if (initialized) return;\n      initialized = true;\n      console.log('Screen Initialized');\n\n      // Restore saved selection\n      const sdk = getSegmentlySDK();\n      let saved = sdk ? sdk.getVariable(DATA_KEY) : null;\n      if (!saved) {\n        const inputs = window.onboardingOnlineCustomScreenData.inputs;\n        if (inputs && inputs[DATA_KEY]) {\n          const inputData = inputs[DATA_KEY];\n          saved = (typeof inputData === 'object' && 'value' in inputData)\n            ? inputData.value\n            : inputData;\n        }\n      }\n      if (saved) {\n        const ids = typeof saved === 'string' ? saved.split(',') : saved;\n        if (Array.isArray(ids)) {\n          ids.forEach(id => {\n            const card = document.querySelector(`.option-card[data-id=\"${id}\"]`);\n            if (card) card.classList.add('selected');\n          });\n          selectedIds = ids;\n          updateButton();\n        }\n      }\n\n      updateLabels();\n    }\n\n    function toggleOption(card) {\n      haptic('selection');\n      const id = card.dataset.id;\n      if (card.classList.contains('selected')) {\n        card.classList.remove('selected');\n        selectedIds = selectedIds.filter(i => i !== id);\n      } else {\n        card.classList.add('selected');\n        selectedIds.push(id);\n      }\n      updateButton();\n    }\n\n    function updateButton() {\n      document.getElementById('action_button').disabled = selectedIds.length === 0;\n    }\n\n    function handleContinue() {\n      if (selectedIds.length === 0) return;\n      haptic('medium');\n\n      const sdk = getSegmentlySDK();\n      if (sdk) {\n        sdk.trackEvent('UserUpdatedValue', {\n          screenName: 'format_selection',\n          answer: selectedIds.join(',')\n        });\n      }\n      if (sdk && sdk.setVariable) {\n        sdk.setVariable(DATA_KEY, selectedIds.join(','));\n      }\n      window.leaveCustomScreen({\n        [DATA_KEY]: selectedIds.join(',')\n      });\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      const titleEl = document.getElementById('title_label');\n      if (titleEl && labels.title_label?.value?.l10n?.[language]) {\n        titleEl.textContent = labels.title_label.value.l10n[language];\n      }\n\n      const subtitleEl = document.getElementById('subtitle_label');\n      if (subtitleEl && labels.subtitle_label?.value?.l10n?.[language]) {\n        subtitleEl.textContent = labels.subtitle_label.value.l10n[language];\n      }\n\n      const hintEl = document.getElementById('hint_label');\n      if (hintEl && labels.hint_label?.value?.l10n?.[language]) {\n        hintEl.textContent = labels.hint_label.value.l10n[language];\n      }\n\n      const btnEl = document.getElementById('action_button');\n      if (btnEl && labels.button_text?.value?.l10n?.[language]) {\n        btnEl.textContent = labels.button_text.value.l10n[language];\n      }\n    }\n  </script>\n</body>\n</html>\n"},"animated":true,"countdown":null,"canvas":{"background":{"kind":"solid","content":{"color":"#1a1a1a"}},"webViewBackgroundColor":"#1a1a1a","insets":{"start":16,"bottom":0,"end":16,"top":0}},"offlineFirst":true,"header":{},"actionBar":{}},"name":"format-selection-beginner","position":{"y":48,"x":3232},"screenType":"WebEmbed"}},"metadata":{"projectId":"VMcOQeLv5tvpyP5fJy1U","projectName":"VMcOQeLv5tvpyP5fJy1U","onboardingId":"JvPgSzWv7Leo6KLpam4O","onboardingName":"v0003 Removed 2nd screen","webOnboardingId":"DMpB9pbOJfZvpkCSGrOd","webOnboardingName":"v0003 Removed 2nd screen","versionId":"1fKtOKmjFhUmRKOk6TsP","urlAlias":"7nm-j3vg-rrs"},"variables":{"otp":{"updatedAt":{},"id":"otp","createdAt":{},"scope":"global","type":"string","name":"otp","required":false},"poker_level":{"screenBindings":{"033690c6-8f3c-492e-9075-0793019edf0c":{"f1075881-00f7-43d3-8f0c-9e95adb873cb":"Beginner","84e5e910-7a2d-40da-bd31-6cd84a8a48d9":"Competent","13ce0da1-ebe2-4d83-8325-d631d03188ef":"Advanced","2ad25863-c3fc-444b-94c8-71a56543650d":"Expert","13133250-0567-4958-9917-83dce9a68d99":"Intermediate"}},"options":[{"label":"Beginner","id":"f1075881-00f7-43d3-8f0c-9e95adb873cb"},{"id":"13133250-0567-4958-9917-83dce9a68d99","label":"Intermediate"},{"id":"84e5e910-7a2d-40da-bd31-6cd84a8a48d9","label":"Competent"},{"id":"13ce0da1-ebe2-4d83-8325-d631d03188ef","label":"Advanced"},{"id":"2ad25863-c3fc-444b-94c8-71a56543650d","label":"Expert"}],"name":"poker-level","createdAt":{},"scope":"screen","type":"enum","boundScreenIds":["033690c6-8f3c-492e-9075-0793019edf0c"],"boundSectionId":"section-mpr8kj62-84aw6","required":true,"id":"poker_level","updatedAt":{}},"existing_user":{"scope":"global","type":"string","required":false,"name":"existing_user","createdAt":{},"updatedAt":{},"id":"existing_user"},"password":{"type":"string","scope":"global","required":false,"name":"password","createdAt":{},"id":"password","updatedAt":{}},"email":{"name":"email","required":false,"scope":"global","type":"string","createdAt":{},"updatedAt":{},"id":"email"}},"edgeGatewayUrl":"https://api.segmently.ai","paymentConfig":{"provider":"stripe","stripePublishableKey":"pk_live_51SjiZb395YNMwCRzfclogqltqHi79TTCpRmHJJuQxOHJdkIQXQWgpHkOxQc6da2WQvsGiZ65NgBQ9JEkkpQrc1ZV00xFpaf3gj","connectedAccountId":"acct_1Sun8KJfOdgFDHJd","stripePublishableKeys":{"test":"pk_test_51SjiZlKaKpC2BFmMgUmLxqSLmQpySWA14JCS13fV9aSULVix5IReigQYkliM4rG23gz5nL1jPb6t4zBoGfcegfi100prXHJJza","live":"pk_live_51SjiZb395YNMwCRzfclogqltqHi79TTCpRmHJJuQxOHJdkIQXQWgpHkOxQc6da2WQvsGiZ65NgBQ9JEkkpQrc1ZV00xFpaf3gj"},"connectedAccountIds":{"testAccountId":"acct_1TQ4eBJnmPV7ba07","liveAccountId":"acct_1Sun8KJfOdgFDHJd"},"projectId":"VMcOQeLv5tvpyP5fJy1U","mode":"live","preBakedPrices":{"OBW5ryt3KEnvppfIzUmL":{"productId":"prod_UPcrdRQm07AzKu","priceId":"price_1TQnc0JfOdgFDHJdiUqBwZ90","localized":{"en-US":{"displayPrice":"$19.99/month","priceAmount":"$19.99","priceAndCurrency":"$19.99 USD","duration":"monthly","intervalCount":"1","interval":"1 month","trialDays":"","fullTrialDays":"","introPrice":"","introProduct":"","introDuration":""}},"raw":{"unitAmount":1999,"currency":"usd","interval":"month","intervalCount":1},"bakedAt":"2026-05-29T18:12:18.913Z","checkoutMode":"embedded","type":"subscription","stripeProductId":"prod_UPcrdRQm07AzKu","productName":"Monthly plan - 19.99- no-trial","subscription":{"interval":"month","intervalCount":1},"mode":"live","connectedAccountId":"acct_1Sun8KJfOdgFDHJd"},"BrleB8z9viwW07gBIbZa":{"productId":"prod_UPcrRCQd41A2bq","priceId":"price_1TQnbmJfOdgFDHJdXbAWLSR7","localized":{"en-US":{"displayPrice":"$89.99/year","priceAmount":"$89.99","priceAndCurrency":"$89.99 USD","duration":"yearly","intervalCount":"1","interval":"1 year","trialDays":"","fullTrialDays":"","introPrice":"","introProduct":"","introDuration":""}},"raw":{"unitAmount":8999,"currency":"usd","interval":"year","intervalCount":1},"bakedAt":"2026-05-29T18:12:19.127Z","checkoutMode":"embedded","type":"subscription","stripeProductId":"prod_UPcrRCQd41A2bq","productName":"Annual plan - 89.99- no-trial","subscription":{"interval":"year","intervalCount":1},"mode":"live","connectedAccountId":"acct_1Sun8KJfOdgFDHJd"}},"bakedAt":"2026-05-29T18:12:19.128Z"},"dataCollectionConfig":{"version":"1.0","sources":[{"id":"server_data","type":"server_data","enabled":true,"fields":["ip","userAgent","facebook.fbp","facebook.fbc","tiktok.ttp","tiktok.ttclid"]},{"id":"variable","type":"variable","enabled":true,"fields":["otp","email","existing_user","password"]}],"destinations":[{"id":"stripe_metadata","type":"stripe_metadata","enabled":true,"triggerEvents":["OnboardingFinished"],"config":{"type":"stripe_metadata","maxKeys":20}},{"id":"redirect_url","type":"redirect_url","enabled":true,"triggerEvents":["OnboardingFinished"],"config":{"type":"redirect_url","baseUrl":"https://runout-poker.godetour.link/1jkwF9i03v","urlEncode":false,"fallbackUrl":"https://runout-poker.godetour.link/1jkwF9i03v","redirectMappings":[{"sourceType":"variable","sourceKey":"otp"}]}}],"fieldMappings":[{"source":"server.ip","destination":"client_ip"},{"source":"server.userAgent","destination":"client_user_agent"},{"source":"server.facebook.fbp","destination":"facebook.fbp"},{"source":"server.facebook.fbc","destination":"facebook.fbc"},{"source":"server.tiktok.ttp","destination":"tiktok.ttp"},{"source":"server.tiktok.ttclid","destination":"tiktok.ttclid"},{"source":"variable.otp","destination":"otp"},{"source":"variable.email","destination":"email"},{"source":"variable.existing_user","destination":"existing_user"},{"source":"variable.password","destination":"password"}],"stripeMetadataMappings":[{"sourceType":"server","sourceKey":"client_ip"},{"sourceType":"server","sourceKey":"client_user_agent"},{"sourceType":"server","sourceKey":"facebook.fbp"},{"sourceKey":"facebook.fbc","sourceType":"server"},{"sourceKey":"tiktok.ttp","sourceType":"server"},{"sourceType":"server","sourceKey":"tiktok.ttclid"}],"redirectMappings":[{"sourceType":"variable","sourceKey":"otp"}],"settings":{"debug":false,"collectOnLoad":true}},"seo":{"title":"Runout Poker"},"projectAnalytics":{"integrations":[{"enabled":true,"config":{"projectToken":"cae2b7635c425c84626cb5479999c61a","persistence":"localStorage","trackPageViews":false},"name":"Mixpanel","platform":"mixpanel","id":"int_mo8njtjz_fk0y52","updatedAt":"2026-04-21T13:21:11.512Z","createdAt":"2026-04-21T13:21:11.512Z"},{"enabled":true,"config":{"projectId":"3992283","serviceAccountSecret":"DbWwho4iN6cO6HaqPivxKM5PJgHbbh6A","projectToken":"cae2b7635c425c84626cb5479999c61a","serviceAccountUsername":"Segmently.94b4ea.mp-service-account"},"name":"Mixpanel (Server-Side)","updatedAt":"2026-05-09T10:33:58.136Z","id":"int_mo8nl4p5_jd2xvi","createdAt":"2026-04-21T13:22:12.609Z","platform":"mixpanel_server"},{"enabled":true,"config":{"dataLayerName":"dataLayer","containerId":"GTM-P2L6L27V"},"name":"Google Tag Manager","id":"int_mo8nm0vj_n8i12i","updatedAt":"2026-05-05T14:51:12.247Z","createdAt":"2026-04-21T13:22:54.311Z","platform":"gtm"},{"platform":"tiktok_pixel","createdAt":"2026-05-01T11:17:56.029Z","id":"int_momtjttz_6507fq","updatedAt":"2026-05-01T11:17:56.029Z","name":"TikTok Pixel","config":{"advancedMatching":{"email":true},"pixelId":"D7Q8MPRC77UAV4MGGGC0"},"enabled":true},{"createdAt":"2026-05-01T11:20:01.490Z","updatedAt":"2026-05-01T11:20:01.490Z","id":"int_momtmina_qpetr6","platform":"tiktok_events_api","config":{"accessToken":"3d9cad94fa11069b6fa79afeae9dfd69e4316630","testEventCode":"TEST32447","pixelCode":"D7Q8MPRC77UAV4MGGGC0"},"name":"TikTok Events API","enabled":true},{"createdAt":"2026-05-01T11:26:54.175Z","updatedAt":"2026-05-01T11:26:54.175Z","id":"int_momtvd2l_ktzueg","platform":"facebook_pixel","name":"Facebook Pixel","config":{"autoConfig":false,"pixelId":"1681855849667404"},"enabled":true},{"createdAt":"2026-05-01T11:38:44.239Z","updatedAt":"2026-05-01T11:38:44.239Z","id":"int_momuakyn_542zhk","platform":"facebook_capi","config":{"pixelId":"1681855849667404","testEventCode":"TEST49950","accessToken":"EAANa5stlkqMBRbH5HyIImG5XHqh4TnBhS2di5sEyZBUf0gfepGqjeijDrXNd4u6dwZBGDKaH3qWbUWMpDm21bfbSJy9NzE7pfrmjVtaHZB2xBlA1ZAjrmocxvV6bojBZC92tYGPP4TTwB1lMeDVLEzlcGbeS4JYW5LrOlBZBEZABu1hUtVZBho9ZAKEZBJ0OwRQAZDZD"},"name":"Facebook Conversion API","enabled":true},{"name":"Google Analytics 4","config":{"measurementId":"G-PNPMM4SEWS","debugMode":false,"sendPageView":true},"enabled":true,"createdAt":"2026-05-05T14:33:56.001Z","id":"int_mosqbak4_xlimfu","updatedAt":"2026-05-05T14:33:56.001Z","platform":"ga4"},{"platform":"ga4_measurement_protocol","createdAt":"2026-05-05T14:41:53.723Z","updatedAt":"2026-05-05T14:41:53.723Z","id":"int_mosqlj6g_udlaq8","name":"GA4 Measurement Protocol","config":{"apiSecret":"bsXbUf0tSuiK6RWaqXW5bA","measurementId":"G-PNPMM4SEWS"},"enabled":true},{"id":"int_mpmqa1mf_m8zwde","updatedAt":"2026-05-26T14:26:03.037Z","createdAt":"2026-05-26T14:26:03.037Z","platform":"segmently_internal","enabled":true,"config":{"mode":"http"},"name":"Segmently Analytics"}]},"stripeEmailConfig":{"emailVariableId":"email"},"saveUserData":false,"meta":{"funnelId":"JvPgSzWv7Leo6KLpam4O","versionId":"1fKtOKmjFhUmRKOk6TsP","alias":"7nm-j3vg-rrs","generatedAt":"2026-05-29T18:12:19.573Z","platform":"web","webShellVersion":"1.0.44"}}