{"schemaVersion":"2.0.0","defaultLanguage":"en-US","languages":["en-US"],"launchScreenId":"screen2110","screens":{"06455aab-f27f-412b-954d-91a11e2d3b7c":{"name":"wardrobe-stress","id":"06455aab-f27f-412b-954d-91a11e2d3b7c","position":{"x":16837.333333333325,"y":-608},"content":{"offlineFirst":true,"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>Real Cost</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow-y: auto;\n      overflow-x: hidden;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .screen-container::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow-y: auto;\n        overflow-x: hidden;\n        position: relative;\n        background-color: #fff;\n      }\n    }\n\n    /* --- Header --- */\n    .header-section {\n      padding: 40px 24px 24px 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      flex-shrink: 0;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 30px;\n      margin: 0;\n      color: #1a1a1a;\n      text-align: left;\n    }\n    .subtitle {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #6b7280;\n      margin: 0;\n      text-align: left;\n    }\n\n    /* --- Cost Grid --- */\n    .cost-grid {\n      flex: 1;\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 12px;\n      padding: 0 24px;\n      align-content: center;\n    }\n    .cost-card {\n      border: 1px solid;\n      border-radius: 16px;\n      padding: 21px;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 8px;\n    }\n    .cost-card.time {\n      background-color: #eff6ff;\n      border-color: #dbeafe;\n    }\n    .cost-card.money {\n      background-color: #f0fdf4;\n      border-color: #dcfce7;\n    }\n    .cost-card.confidence {\n      background-color: #faf5ff;\n      border-color: #f3e8ff;\n    }\n    .cost-card.energy {\n      background-color: #fff7ed;\n      border-color: #ffedd5;\n    }\n    .cost-icon {\n      width: 40px;\n      height: 40px;\n      border-radius: 9999px;\n      background-color: #ffffff;\n      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n    .cost-icon img {\n      width: 20px;\n      height: 20px;\n    }\n    .cost-title {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #111827;\n      text-align: center;\n    }\n    .cost-desc {\n      font-size: 12px;\n      font-weight: 400;\n      line-height: 16px;\n      color: #4b5563;\n      text-align: center;\n    }\n\n    /* --- Total Card --- */\n    .total-card-wrapper {\n      padding: 0 24px 32px 24px;\n      flex-shrink: 0;\n    }\n    .total-card {\n      background-color: #1a1a1a;\n      border-radius: 16px;\n      padding: 24px;\n      display: flex;\n      align-items: center;\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      cursor: pointer;\n      transition: opacity 0.2s;\n    }\n    .total-card:hover {\n      opacity: 0.9;\n    }\n    .total-text {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n    .total-label {\n      font-size: 12px;\n      font-weight: 400;\n      line-height: 16px;\n      color: #9ca3af;\n      text-transform: uppercase;\n      letter-spacing: 0.6px;\n    }\n    .total-value {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      color: #ffffff;\n    }\n    .total-arrow {\n      width: 40px;\n      height: 40px;\n      border-radius: 9999px;\n      background-color: #ff2a6d;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n    .total-arrow img {\n      width: 16px;\n      height: 16px;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      border-top: 1px solid #f9fafb;\n      padding: 25px 24px 24px 24px;\n      flex-shrink: 0;\n    }\n    #action_button {\n      width: 100%;\n      padding: 16px 0;\n      box-sizing: border-box;\n      font-family: 'Lato', sans-serif;\n      font-size: 18px;\n      font-weight: 400;\n      border: none;\n      border-radius: 9999px;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      background-color: #ff2a6d;\n      color: #FFFFFF;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 10px 15px -3px #fbcfe8, 0px 4px 6px -4px #fbcfe8;\n    }\n    #action_button:hover {\n      opacity: 0.9;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"header-section\">\n      <h1 id=\"title_label\">What does wardrobe stress actually cost you?</h1>\n      <p class=\"subtitle\" id=\"subtitle_label\">It's more than just clothes.</p>\n    </div>\n\n    <div class=\"cost-grid\">\n      <div class=\"cost-card time\">\n        <div class=\"cost-icon\">\n          <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564912726_icon-cost-time.svg/origin.svg\" alt=\"\">\n        </div>\n        <div class=\"cost-title\">Time</div>\n        <div class=\"cost-desc\">Late to work,<br>stressful mornings</div>\n      </div>\n      <div class=\"cost-card money\">\n        <div class=\"cost-icon\">\n          <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564913067_icon-cost-money.svg/origin.svg\" alt=\"\">\n        </div>\n        <div class=\"cost-title\">Money</div>\n        <div class=\"cost-desc\">Impulse buys,<br>unworn clothes</div>\n      </div>\n      <div class=\"cost-card confidence\">\n        <div class=\"cost-icon\">\n          <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564913465_icon-cost-confidence.svg/origin.svg\" alt=\"\">\n        </div>\n        <div class=\"cost-title\">Confidence</div>\n        <div class=\"cost-desc\">Avoiding social<br>situations</div>\n      </div>\n      <div class=\"cost-card energy\">\n        <div class=\"cost-icon\">\n          <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564913825_icon-cost-energy.svg/origin.svg\" alt=\"\">\n        </div>\n        <div class=\"cost-title\">Energy</div>\n        <div class=\"cost-desc\">Mental load &amp;<br>decision fatigue</div>\n      </div>\n    </div>\n\n    <div class=\"total-card-wrapper\">\n      <div class=\"total-card\" onclick=\"handleContinue()\">\n        <div class=\"total-text\">\n          <div class=\"total-label\">Estimated Cost</div>\n          <div class=\"total-value\">Too high.</div>\n        </div>\n        <div class=\"total-arrow\">\n          <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564914153_icon-arrow-right-white.svg/origin.svg\" alt=\"\">\n        </div>\n      </div>\n    </div>\n\n    <div class=\"footer\">\n      <button id=\"action_button\">Stop the Cost</button>\n    </div>\n\n  </div>\n\n  <script>\n    // ========================================================================\n    // --- OFFICIAL ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n    // ========================================================================\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: '',\n      screenId: ''\n    };\n    window.leaveCustomScreen = () => {};\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\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        runInitialSetup();\n      }\n    };\n\n    // Standalone fallback\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!window.onboardingOnlineCustomScreenData.screenId) {\n          console.log('Running in standalone mode');\n          runInitialSetup();\n        }\n      }, 100);\n    });\n\n    // ========================================================================\n    // --- SCREEN LOGIC ---\n    // ========================================================================\n\n    function runInitialSetup() {\n      console.log(\"Screen Initialized\");\n      addEventListeners();\n      updateLabels();\n    }\n\n    function addEventListeners() {\n      const button = document.getElementById('action_button');\n      if (button) {\n        button.addEventListener('click', handleContinue);\n      }\n    }\n\n    function handleContinue() {\n      window.leaveCustomScreen({});\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 titleElement = document.getElementById('title_label');\n      if (titleElement && labels.title?.value?.l10n?.[language]) {\n        titleElement.textContent = labels.title.value.l10n[language];\n      }\n\n      const buttonElement = document.getElementById('action_button');\n      if (buttonElement && labels.button_text?.value?.l10n?.[language]) {\n        buttonElement.textContent = labels.button_text.value.l10n[language];\n      }\n    }\n  </script>\n</body>\n</html>\n","callback":{"action":{"kind":"advance","edges":[{"conditions":[],"transitionKind":"push","nextScreenId":"5a33f55e-dbce-473e-b882-9d5a42437244"}]}}},"actionBar":{},"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"},"insets":{"bottom":0,"start":16,"top":0,"end":16}},"header":{},"systemPrompt":null},"tags":[],"screenType":"WebEmbed"},"1166f6b2-1c27-4a19-803b-63d598c72383":{"position":{"y":-608,"x":10085.333333333332},"name":"be-honest","id":"1166f6b2-1c27-4a19-803b-63d598c72383","tags":[],"screenType":"WebEmbed","content":{"embed":{"callback":{"action":{"kind":"advance","edges":[{"nextScreenId":"aceea440-4ef1-4f97-b291-7adf65e1c855","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>Wardrobe Usage</title>\n  <style>\n    /* --- Base & Mobile-First Styles (Required Boilerplate) --- */\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      position: relative;\n    }\n\n    /* --- Desktop Preview Simulation (iPhone Frame) --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #fff;\n      }\n    }\n\n    /* --- Custom Screen Specific Styles --- */\n\n    /* Progress Bar */\n    .progress-container {\n      display: flex;\n      align-items: center;\n      padding: 27px 0px 0px 0px;\n      padding-right: 32px;\n      margin-bottom: 20px;\n    }\n    .back-btn {\n      background: none;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 25px;\n    }\n    .back-btn svg {\n      width: 24px;\n      height: 24px;\n      color: #9CA3AF;\n    }\n    .progress-bar-bg {\n      flex: 1;\n      height: 6px;\n      background-color: #E5E5EB;\n      border-radius: 3px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      background-color: #F5326D;\n      border-radius: 3px;\n    }\n\n    /* Content Area */\n    .content-wrapper {\n      flex: 1 1 auto;\n      padding: 0px 25px 120px 25px;\n      overflow-y: auto;\n      overflow-x: hidden;\n      -webkit-overflow-scrolling: touch;\n      min-height: 0;\n      position: relative;\n      height: 100%;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .content-wrapper::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* Donut Chart */\n    .chart-container {\n      display: flex;\n      justify-content: center;\n      margin-bottom: 24px;\n    }\n    .donut-chart {\n      position: relative;\n      width: 180px;\n      height: 180px;\n    }\n    .donut-chart svg {\n      width: 100%;\n      height: 100%;\n      transform: rotate(-90deg);\n    }\n    .donut-bg {\n      fill: none;\n      stroke: #F5E6EB;\n      stroke-width: 12;\n    }\n    .donut-fill {\n      fill: none;\n      stroke: url(#pinkGradient);\n      stroke-width: 12;\n      stroke-linecap: round;\n      stroke-dasharray: 408.4;\n      stroke-dashoffset: 326.7; /* 80% offset = 20% filled */\n      filter: drop-shadow(0px 4px 20px rgba(206, 105, 135, 0.57));\n      transition: stroke-dashoffset 0.6s ease;\n    }\n    .donut-chart-text {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      text-align: center;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n    }\n    .donut-label {\n      font-size: 12px;\n      font-weight: 300;\n      color: #383751;\n      display: block;\n      transition: transform 0.3s ease;\n    }\n    .donut-value {\n      font-size: 40px;\n      font-weight: 700;\n      color: #241E32;\n      line-height: 48px;\n      display: grid;\n      overflow: hidden;\n      max-height: 0;\n      opacity: 0;\n      transition: max-height 0.4s ease, opacity 0.3s ease 0.1s;\n    }\n    .donut-value.visible {\n      max-height: 56px;\n      opacity: 1;\n    }\n\n    h1 {\n      font-size: 22px;\n      font-weight: 600;\n      color: #241E32;\n      margin: 0 0 8px 0;\n      line-height: 28px;\n      text-align: center;\n    }\n    .subtitle {\n      font-size: 16px;\n      color: #6B7280;\n      text-align: center;\n      line-height: 24px;\n      margin: 0 0 24px 0;\n    }\n\n    /* Vertical List Layout */\n    .options-list {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .option-row {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 16px 20px;\n      border: 1px solid #E0E2E7;\n      border-radius: 8px;\n      background-color: #F9F9FB;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    /* Selected State */\n    .option-row.selected {\n      background-color: #FFF0F5;\n      border-color: #F43F79;\n    }\n\n    .option-text {\n      font-size: 15px;\n      font-weight: 500;\n      color: #333;\n      flex: 1;\n      margin-right: 10px;\n    }\n\n    /* Checkmark Logic */\n    .check-indicator {\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n      border: 1px solid #C1C7D0;\n      background-color: white;\n      flex-shrink: 0;\n    }\n\n    .option-row.selected .check-indicator {\n      border: none;\n      background-color: transparent;\n      background-image: url('https://api.segmently.ai/assets/onboardings/6OwufOr1PtCg8dN7pR6O/custom-images/en-US_1769779299647_1763480493323-ic_checkmark.png/origin.png');\n      background-size: contain;\n      background-repeat: no-repeat;\n    }\n\n    /* Footer */\n    .footer {\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      background: white;\n      padding: 16px 25px 30px 25px;\n      box-shadow: 0 -4px 20px rgba(0,0,0,0.05);\n      z-index: 10;\n      box-sizing: border-box;\n    }\n    .continue-btn {\n      width: 100%;\n      height: 50px;\n      background-color: #F5326D;\n      color: white;\n      border: none;\n      border-radius: 25px;\n      font-size: 16px;\n      font-weight: 600;\n      cursor: pointer;\n      opacity: 0.5;\n      pointer-events: none;\n      transition: opacity 0.3s;\n    }\n    .continue-btn.active {\n      opacity: 1;\n      pointer-events: auto;\n    }\n    .continue-btn:hover.active {\n        opacity: 0.9;\n    }\n\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n  <div class=\"content-wrapper\">\n\n    <div class=\"progress-container\">\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\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 19L5 12L12 5M19 12H5\" />\n        </svg>\n      </button>\n      <div class=\"progress-bar-bg\">\n        <div class=\"progress-bar-fill\" style=\"width: 47%;\"></div>\n      </div>\n    </div>\n\n    <div class=\"chart-container\">\n      <div class=\"donut-chart\">\n        <svg viewBox=\"0 0 150 150\">\n          <defs>\n            <linearGradient id=\"pinkGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n              <stop offset=\"0%\" stop-color=\"#F5326D\" />\n              <stop offset=\"100%\" stop-color=\"#FF85A8\" />\n            </linearGradient>\n          </defs>\n          <circle class=\"donut-bg\" cx=\"75\" cy=\"75\" r=\"65\" />\n          <circle class=\"donut-fill\" cx=\"75\" cy=\"75\" r=\"65\" />\n        </svg>\n        <div class=\"donut-chart-text\">\n          <span class=\"donut-label\">Outfit Usage</span>\n          <span class=\"donut-value\">20%</span>\n        </div>\n      </div>\n    </div>\n\n    <h1 id=\"title_label\">Be honest. What percentage of your wardrobe do you actually wear?</h1>\n    <p class=\"subtitle\" id=\"subtitle_label\">Most women wear 20% of their clothes 80% of the time. Let's fix that.</p>\n\n    <div class=\"options-list\" id=\"list-container\">\n      </div>\n\n  </div>\n\n  <div class=\"footer\">\n    <button id=\"continue-btn\" class=\"continue-btn\" onclick=\"handleContinue()\">Continue</button>\n  </div>\n\n</div>\n\n<script>\n  // --- 1. Environment Detection & Communication Setup ---\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('Selected wardrobe usage:', 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  // Initialize standalone mode if not in Onboarding.online after DOM loads\n  window.addEventListener('DOMContentLoaded', () => {\n    setTimeout(() => {\n      if (!isOnboardingOnline) {\n        console.log('Running in standalone mode');\n        initScreen();\n      }\n    }, 100);\n  });\n\n  // --- 2. Screen Logic ---\n\n  // Helper function to find segmentlySDK in parent chain (up to 4 levels)\n  function getSegmentlySDK() {\n    let currentWindow = window;\n\n    // Check up to 4 levels up the parent chain\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\n    return null;\n  }\n\n  function handleBack() {\n    window.backScreen();\n  }\n\n  // Using enum keys (UPPERCASE)\n  const OPTIONS = [\n    { id: 'ABOUT_20', label: 'About 20% (The Basics)', percent: 20 },\n    { id: 'MAYBE_50', label: 'Maybe 50%', percent: 50 },\n    { id: 'ALMOST_EVERYTHING', label: 'I wear almost everything', percent: 80 }\n  ];\n\n  const CIRCUMFERENCE = 408.4; // 2 * PI * 65\n\n  function updateChart(percent, show) {\n    const offset = CIRCUMFERENCE * (1 - percent / 100);\n    document.querySelector('.donut-fill').style.strokeDashoffset = offset;\n    const valueEl = document.querySelector('.donut-value');\n    valueEl.textContent = percent + '%';\n    if (show) {\n      valueEl.classList.add('visible');\n    }\n  }\n\n  let selectedItem = null;\n\n  function initScreen() {\n    let savedValue = null;\n\n    // First, check inputs (current screen data)\n    if (window.onboardingOnlineCustomScreenData.inputs && window.onboardingOnlineCustomScreenData.inputs.wardrobe_usage) {\n      const inputData = window.onboardingOnlineCustomScreenData.inputs.wardrobe_usage;\n      if (inputData && typeof inputData === 'object' && 'value' in inputData) {\n        savedValue = inputData.value;\n      } else {\n        savedValue = inputData;\n      }\n    }\n\n    // If not found in inputs, check userData (previous screen submissions)\n    if (!savedValue) {\n      const userData = window.onboardingOnlineCustomScreenData.userData;\n      if (userData) {\n        for (const screenId in userData) {\n          const screenData = userData[screenId];\n          if (screenData) {\n            if (screenData[\"wardrobe_usage\"]) {\n              savedValue = screenData[\"wardrobe_usage\"];\n              break;\n            }\n            if (screenData[\"input['wardrobe_usage']\"]) {\n              savedValue = screenData[\"input['wardrobe_usage']\"];\n              break;\n            }\n          }\n        }\n      }\n    }\n\n    // Apply saved value if found\n    if (savedValue) {\n      const matchById = OPTIONS.find(c => c.id === savedValue);\n      if (matchById) {\n        selectedItem = savedValue;\n      } else {\n        const matchedOption = OPTIONS.find(c => c.label === savedValue);\n        if (matchedOption) {\n          selectedItem = matchedOption.id;\n        }\n      }\n    }\n\n    if (selectedItem) {\n      const option = OPTIONS.find(o => o.id === selectedItem);\n      if (option) updateChart(option.percent, true);\n    }\n\n    renderList();\n\n    // Dynamic Labels (Optional)\n    const labels = window.onboardingOnlineCustomScreenData.labels;\n    const lang = window.onboardingOnlineCustomScreenData.language;\n    if (labels && labels.title && labels.title.value.l10n[lang]) {\n      document.getElementById('title_label').textContent = labels.title.value.l10n[lang];\n    }\n  }\n\n  function renderList() {\n    const container = document.getElementById('list-container');\n    container.innerHTML = '';\n\n    OPTIONS.forEach(item => {\n      const isSelected = selectedItem === item.id;\n\n      const row = document.createElement('div');\n      row.className = `option-row ${isSelected ? 'selected' : ''}`;\n      row.onclick = () => selectOption(item.id);\n\n      row.innerHTML = `\n        <span class=\"option-text\">${item.label}</span>\n        <div class=\"check-indicator\"></div>\n      `;\n\n      container.appendChild(row);\n    });\n\n    updateButtonState();\n  }\n\n  function selectOption(id) {\n    selectedItem = id;\n    const option = OPTIONS.find(o => o.id === id);\n    if (option) updateChart(option.percent, true);\n    renderList();\n  }\n\n  function updateButtonState() {\n    const btn = document.getElementById('continue-btn');\n    if (selectedItem) {\n      btn.classList.add('active');\n    } else {\n      btn.classList.remove('active');\n    }\n  }\n\n  function handleContinue() {\n    const segmentlySDK = getSegmentlySDK();\n\n    if (segmentlySDK) {\n      segmentlySDK.trackEvent('UserUpdatedValue', {\n        screenName: 'wardrobe_usage',\n        answer: selectedItem\n      });\n    }\n\n    window.leaveCustomScreen({\n      wardrobe_usage: selectedItem\n    });\n  }\n</script>\n\n</body>\n</html>\n"},"actionBar":{},"header":{},"canvas":{"insets":{"start":16,"bottom":0,"end":16,"top":0},"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}},"systemPrompt":null,"offlineFirst":true,"countdown":null,"animated":true}},"12dc974e-6c94-4f85-8ce8-efea404f294d":{"content":{"animated":true,"countdown":null,"offlineFirst":true,"actionBar":{},"embed":{"callback":{"action":{"edges":[{"conditions":[],"nextScreenId":"aed943e1-688f-4cbb-a98c-62fee5b6508c","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>Color Season</title>\n  <style>\n    /* ==========================================================================\n       1. RESPONSIVE BOILERPLATE (Do not modify core logic)\n       ========================================================================== */\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      box-sizing: border-box;\n      overflow: hidden;\n      position: relative;\n    }\n\n    /* Desktop Preview Simulation (iPhone 16 Pro Max style) */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 8px solid #fff;\n        overflow: hidden;\n        background-color: #fff;\n      }\n      .screen-container::-webkit-scrollbar {\n        display: none;\n      }\n    }\n\n    /* ==========================================================================\n       2. CUSTOM STYLES\n       ========================================================================== */\n\n    /* Content Scroll Area */\n    .content-scroll-area {\n      flex: 1 1 auto;\n      padding: 0px 20px 160px 20px;\n      overflow-y: auto;\n      overflow-x: hidden;\n      -webkit-overflow-scrolling: touch;\n      min-height: 0;\n      position: relative;\n      height: 100%;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .content-scroll-area::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* Header & Progress */\n    .header {\n      text-align: center;\n    }\n    .progress-container {\n      display: flex;\n      align-items: center;\n      padding: 27px 0px 0px 0px;\n      padding-right: 32px;\n      margin-bottom: 17px;\n    }\n    .back-btn {\n      background: none;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 25px;\n    }\n    .back-btn svg {\n      width: 24px;\n      height: 24px;\n      color: #9CA3AF;\n    }\n    .progress-bar-bg {\n      flex: 1;\n      height: 6px;\n      background-color: #E5E5EB;\n      border-radius: 3px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      background-color: #F5326D;\n      border-radius: 3px;\n    }\n    h1 {\n      font-size: 22px;\n      font-weight: 600;\n      color: #241E32;\n      margin: 0 0 8px 0;\n    }\n    .subtitle {\n      font-size: 14px;\n      color: #383751;\n      line-height: 1.4;\n      margin: 0;\n    }\n\n    /* Options List */\n    .content-area {\n      padding: 10px 0px;\n    }\n\n    .option-card {\n      display: flex;\n      align-items: center;\n      border: 1px solid #D1D1DB;\n      border-radius: 8px;\n      padding: 12px 12px 12px 0;\n      margin-bottom: 12px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      background: #fff;\n      height: 88px;\n      box-sizing: border-box;\n      overflow: hidden;\n    }\n    .option-card.selected {\n      border-color: #F5326D;\n      background-color: #FFF6F9;\n    }\n\n    /* Color Swatches Area */\n    .swatch-area {\n      width: 107px;\n      height: 88px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      margin-right: 16px;\n      border-right: 1px solid #D1D1DB;\n      box-sizing: border-box;\n    }\n    .swatch-area img {\n      height: 36px;\n      width: auto;\n      object-fit: contain;\n    }\n\n    .option-text {\n      flex: 1;\n    }\n    .option-title {\n      font-size: 14px;\n      font-weight: 600;\n      color: #241E32;\n      margin-bottom: 4px;\n      display: block;\n      line-height: 20px;\n      letter-spacing: 0.1px;\n    }\n    .option-desc {\n      font-size: 12px;\n      color: #383751;\n      line-height: 1.4;\n    }\n\n    .radio-indicator {\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n      border: 1px solid #C1C7D0;\n      margin-left: 12px;\n      flex-shrink: 0;\n      align-self: flex-start;\n      margin-top: 4px;\n      background-color: white;\n    }\n    .option-card.selected .radio-indicator {\n      border: none;\n      background-color: transparent;\n      background-image: url('https://api.segmently.ai/assets/onboardings/6OwufOr1PtCg8dN7pR6O/custom-images/en-US_1769779299647_1763480493323-ic_checkmark.png/origin.png');\n      background-size: contain;\n      background-repeat: no-repeat;\n    }\n\n    /* Footer Actions - Sticky */\n    .footer {\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      background: white;\n      padding: 16px 20px 20px 20px;\n      box-shadow: 0 -4px 20px rgba(0,0,0,0.05);\n      z-index: 10;\n      box-sizing: border-box;\n    }\n    .btn {\n      width: 100%;\n      height: 50px;\n      border-radius: 25px;\n      font-size: 16px;\n      font-weight: 600;\n      cursor: pointer;\n      border: none;\n      margin-bottom: 12px;\n      transition: opacity 0.2s;\n    }\n    .btn-primary {\n      background-color: #eee;\n      color: #aaa;\n      pointer-events: none;\n    }\n    .btn-primary.active {\n      background-color: #F5326D;\n      color: #fff;\n      pointer-events: auto;\n    }\n    .btn-secondary {\n      background-color: transparent;\n      border: 1px solid #F5326D;\n      color: #F5326D;\n    }\n\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n\n  <div class=\"content-scroll-area\">\n    <div class=\"header\">\n      <div class=\"progress-container\">\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\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 19L5 12L12 5M19 12H5\" />\n          </svg>\n        </button>\n        <div class=\"progress-bar-bg\">\n          <div class=\"progress-bar-fill\" style=\"width: 56%;\"></div>\n        </div>\n      </div>\n      <h1 id=\"screen_title\">What colors do you gravitate towards?</h1>\n      <p class=\"subtitle\" id=\"screen_subtitle\">We'll help you tailor your outfits based on your color season</p>\n    </div>\n\n    <div class=\"content-area\" id=\"options_list\">\n    </div>\n  </div>\n\n  <div class=\"footer\">\n    <button id=\"btn_continue\" class=\"btn btn-primary\" onclick=\"submitSelection()\">Continue</button>\n    <button id=\"btn_skip\" class=\"btn btn-secondary\" onclick=\"skipSelection()\">I'm Not Sure</button>\n  </div>\n\n</div>\n\n<script>\n  // Helper function to find segmentlySDK in parent chain (up to 4 levels)\n  function getSegmentlySDK() {\n    let currentWindow = window;\n\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\n    return null;\n  }\n\n  // ==========================================================================\n  // 3. CONFIGURATION & DATA\n  // ==========================================================================\n\n  const OPTIONS = [\n    {\n      id: 'SPRING',\n      title: 'Spring',\n      desc: 'You glow in warm, happy colors—like a sunny day.',\n      image: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564698291_spring_group.png/origin.png'\n    },\n    {\n      id: 'SUMMER',\n      title: 'Summer',\n      desc: 'You shine in soft, cool, powdery shades.',\n      image: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564698682_summer_group.png/origin.png'\n    },\n    {\n      id: 'AUTUMN',\n      title: 'Autumn',\n      desc: 'You suit cozy, muted autumn colors.',\n      image: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564699126_autumn_group.png/origin.png'\n    },\n    {\n      id: 'WINTER',\n      title: 'Winter',\n      desc: 'You look striking in bold, cool colors that stand out.',\n      image: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564699457_winter_group.png/origin.png'\n    }\n  ];\n\n  let selectedValue = null;\n\n  function handleBack() {\n    window.backScreen();\n  }\n\n  // ==========================================================================\n  // 4. ONBOARDING.ONLINE COMMUNICATION PROTOCOL\n  // ==========================================================================\n  window.onboardingOnlineCustomScreenData = {\n    inputs: {},\n    labels: {},\n    userData: {},\n    customData: {},\n    webOnboarding: {},\n    incomeUserData: {},\n    language: '',\n    screenId: ''\n  };\n  window.leaveCustomScreen = () => {};\n  window.backScreen = () => {};\n\n  window.onmessage = (event) => {\n    if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\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  // ==========================================================================\n  // 5. LOGIC & RENDER\n  // ==========================================================================\n\n  function initScreen() {\n    let savedValue = null;\n\n    // First, check inputs (current screen data)\n    if (window.onboardingOnlineCustomScreenData.inputs && window.onboardingOnlineCustomScreenData.inputs.color_season) {\n      const inputData = window.onboardingOnlineCustomScreenData.inputs.color_season;\n      if (inputData && typeof inputData === 'object' && 'value' in inputData) {\n        savedValue = inputData.value;\n      } else {\n        savedValue = inputData;\n      }\n    }\n\n    // If not found in inputs, check userData (previous screen submissions)\n    if (!savedValue) {\n      const userData = window.onboardingOnlineCustomScreenData.userData;\n      if (userData) {\n        for (const screenId in userData) {\n          const screenData = userData[screenId];\n          if (screenData) {\n            if (screenData[\"color_season\"]) {\n              savedValue = screenData[\"color_season\"];\n              break;\n            }\n            if (screenData[\"input['color_season']\"]) {\n              savedValue = screenData[\"input['color_season']\"];\n              break;\n            }\n          }\n        }\n      }\n    }\n\n    // Apply saved value if found\n    if (savedValue) {\n      selectedValue = savedValue;\n    }\n\n    renderOptions();\n\n    if (selectedValue) {\n      const target = document.getElementById(`card_${selectedValue}`);\n      if (target) {\n        target.classList.add('selected');\n        document.getElementById('btn_continue').classList.add('active');\n      }\n    }\n\n    updateDynamicLabels();\n  }\n\n  function renderOptions() {\n    const container = document.getElementById('options_list');\n    container.innerHTML = '';\n\n    OPTIONS.forEach(opt => {\n      const card = document.createElement('div');\n      card.className = 'option-card';\n      card.id = `card_${opt.id}`;\n      card.onclick = () => selectOption(opt.id);\n\n      card.innerHTML = `\n        <div class=\"swatch-area\">\n          <img src=\"${opt.image}\" alt=\"${opt.title} colors\">\n        </div>\n        <div class=\"option-text\">\n          <span class=\"option-title\">${opt.title}</span>\n          <span class=\"option-desc\">${opt.desc}</span>\n        </div>\n        <div class=\"radio-indicator\"></div>\n      `;\n      container.appendChild(card);\n    });\n  }\n\n  function selectOption(id) {\n    selectedValue = id;\n\n    document.querySelectorAll('.option-card').forEach(el => el.classList.remove('selected'));\n    const target = document.getElementById(`card_${id}`);\n    if (target) target.classList.add('selected');\n\n    document.getElementById('btn_continue').classList.add('active');\n  }\n\n  function submitSelection() {\n    if (!selectedValue) return;\n\n    const segmentlySDK = getSegmentlySDK();\n\n    if (segmentlySDK) {\n      segmentlySDK.trackEvent('UserUpdatedValue', {\n        screenName: 'color_season',\n        answer: selectedValue\n      });\n    }\n\n    window.leaveCustomScreen({\n      color_season: selectedValue\n    });\n  }\n\n  function skipSelection() {\n    const segmentlySDK = getSegmentlySDK();\n\n    if (segmentlySDK) {\n      segmentlySDK.trackEvent('UserUpdatedValue', {\n        screenName: 'color_season',\n        answer: 'SKIPPED'\n      });\n    }\n\n    window.leaveCustomScreen({});\n  }\n\n  function updateDynamicLabels() {\n    const labels = window.onboardingOnlineCustomScreenData.labels;\n    const lang = window.onboardingOnlineCustomScreenData.language;\n    if(!labels || !lang) return;\n\n    if (labels.screen_title?.value?.l10n?.[lang]) {\n      document.getElementById('screen_title').innerText = labels.screen_title.value.l10n[lang];\n    }\n  }\n\n  // Initial render for standalone preview\n  document.addEventListener('DOMContentLoaded', () => {\n     if(!window.onboardingOnlineCustomScreenData.screenId) {\n         renderOptions();\n     }\n  });\n\n</script>\n</body>\n</html>\n"},"systemPrompt":null,"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"},"insets":{"end":16,"top":0,"start":16,"bottom":0}},"header":{}},"tags":[],"screenType":"WebEmbed","id":"12dc974e-6c94-4f85-8ce8-efea404f294d","name":"colors","position":{"x":11773.33333333333,"y":-608}},"1540f607-88c8-4d07-a25a-8ec12fafd3db":{"position":{"y":-640,"x":20448},"id":"1540f607-88c8-4d07-a25a-8ec12fafd3db","name":"full-access","screenType":"WebEmbed","tags":[],"content":{"header":{},"canvas":{"insets":{"top":0,"end":16,"bottom":0,"start":16},"background":{"kind":"solid","content":{"color":"#f8fbfb"}}},"systemPrompt":null,"embed":{"callback":{"action":{"kind":"advance","edges":[{"transitionKind":"push","nextScreenId":"screen2114","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>Full Access Offer</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      background-color: #ffffff;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    /* --- Header --- */\n    .header-section {\n      background-color: #ffffff;\n      padding: 24px 24px 17px 24px;\n      flex-shrink: 0;\n      border-bottom: 1px solid #f9fafb;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n    .nav-row {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n    .back-btn {\n      background: none;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .back-btn img {\n      width: 24px;\n      height: 24px;\n    }\n    .nav-label {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #111827;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      margin: 0;\n      color: #1a1a1a;\n      text-align: left;\n    }\n\n    /* --- Feature List --- */\n    .features-container {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 24px;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .features-container::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* --- Feature Card --- */\n    .feature-card {\n      display: flex;\n      gap: 16px;\n      align-items: flex-start;\n      flex-shrink: 0;\n    }\n    .feature-icon {\n      width: 48px;\n      height: 48px;\n      border-radius: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n    .feature-icon img {\n      width: 24px;\n      height: 24px;\n    }\n    .feature-content {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 3px;\n    }\n    .feature-title {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #111827;\n    }\n    .feature-desc {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 22.75px;\n      color: #6b7280;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      background-color: #ffffff;\n      border-top: 1px solid #f9fafb;\n      padding: 25px 24px 24px 24px;\n      flex-shrink: 0;\n    }\n    #action_button {\n      width: 100%;\n      padding: 16px 0;\n      box-sizing: border-box;\n      font-family: 'Lato', sans-serif;\n      font-size: 18px;\n      font-weight: 400;\n      border: none;\n      border-radius: 9999px;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      background-color: #ff2a6d;\n      color: #FFFFFF;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 10px 15px -3px #fbcfe8, 0px 4px 6px -4px #fbcfe8;\n    }\n    #action_button:hover {\n      opacity: 0.9;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"header-section\">\n      <div class=\"nav-row\">\n        <span class=\"nav-label\">What's Included</span>\n      </div>\n      <h1 id=\"title_label\">Your Full Access Pass</h1>\n    </div>\n\n    <div class=\"features-container\">\n      <div class=\"feature-card\">\n        <div class=\"feature-icon\" style=\"background-color: #fdf2f8;\">\n          <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772873564570_icon-offer-calendar.svg/origin.svg\" alt=\"\">\n        </div>\n        <div class=\"feature-content\">\n          <div class=\"feature-title\">Outfit Calendar for each month</div>\n          <div class=\"feature-desc\">See exactly what to wear every day of the month.</div>\n        </div>\n      </div>\n\n      <div class=\"feature-card\">\n        <div class=\"feature-icon\" style=\"background-color: #faf5ff;\">\n          <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772873564900_icon-offer-shopping.svg/origin.svg\" alt=\"\">\n        </div>\n        <div class=\"feature-content\">\n          <div class=\"feature-title\">Smart Shopping Lists</div>\n          <div class=\"feature-desc\">We identify the gaps in your closet and tell you exactly what pieces you need to complete your formulas.</div>\n        </div>\n      </div>\n\n      <div class=\"feature-card\">\n        <div class=\"feature-icon\" style=\"background-color: #eff6ff;\">\n          <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772873565223_icon-offer-stylist.svg/origin.svg\" alt=\"\">\n        </div>\n        <div class=\"feature-content\">\n          <div class=\"feature-title\">ALI, Your 24/7 Stylist</div>\n          <div class=\"feature-desc\">Ask what works, what matches, or how to dress for an event.</div>\n        </div>\n      </div>\n\n      <div class=\"feature-card\">\n        <div class=\"feature-icon\" style=\"background-color: #fff7ed;\">\n          <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772873565557_icon-offer-reset.svg/origin.svg\" alt=\"\">\n        </div>\n        <div class=\"feature-content\">\n          <div class=\"feature-title\">14-Day Style Reset</div>\n          <div class=\"feature-desc\">Short, practical videos that walk you through simple rules and foundations.</div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"footer\">\n      <button id=\"action_button\">Get Access Now</button>\n    </div>\n\n  </div>\n\n  <script>\n    // ========================================================================\n    // --- OFFICIAL ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n    // ========================================================================\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: '',\n      screenId: ''\n    };\n    window.leaveCustomScreen = () => {};\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\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        runInitialSetup();\n      }\n    };\n\n    // Standalone fallback\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!window.onboardingOnlineCustomScreenData.screenId) {\n          console.log('Running in standalone mode');\n          runInitialSetup();\n        }\n      }, 100);\n    });\n\n    // ========================================================================\n    // --- SCREEN LOGIC ---\n    // ========================================================================\n\n    function runInitialSetup() {\n      console.log(\"Screen Initialized\");\n      addEventListeners();\n      updateLabels();\n    }\n\n    function handleBack() {\n      window.backScreen();\n    }\n\n    function addEventListeners() {\n      const button = document.getElementById('action_button');\n      let isNavigating = false;\n      if (button) {\n        button.addEventListener('click', () => {\n          if (isNavigating) return;\n          isNavigating = true;\n          window.leaveCustomScreen({});\n        });\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 titleElement = document.getElementById('title_label');\n      if (titleElement && labels.title?.value?.l10n?.[language]) {\n        titleElement.textContent = labels.title.value.l10n[language];\n      }\n\n      const buttonElement = document.getElementById('action_button');\n      if (buttonElement && labels.button_text?.value?.l10n?.[language]) {\n        buttonElement.textContent = labels.button_text.value.l10n[language];\n      }\n    }\n  </script>\n</body>\n</html>\n"},"actionBar":{},"countdown":null,"offlineFirst":true,"animated":true}},"1d544e3d-b40f-4157-b192-106693293150":{"content":{"animated":true,"offlineFirst":true,"countdown":null,"systemPrompt":null,"header":{},"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"},"insets":{"bottom":0,"start":16,"top":0,"end":16}},"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>Social Proof Interstitial</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n    }\n\n    /* --- Desktop Preview Simulation (iPhone Frame) --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #ffffff;\n      }\n    }\n\n    /* --- Hero Image Section --- */\n    .hero-section {\n      position: relative;\n      width: 100%;\n      background-color: #f3f4f6;\n      overflow: hidden;\n      flex: 1 1 45%;\n      min-height: 120px;\n      max-height: 45%;\n    }\n    .hero-section img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n    }\n    .hero-gradient {\n      position: absolute;\n      inset: 0;\n      background: linear-gradient(\n        to top,\n        #ffffff 0%,\n        rgba(255, 255, 255, 0) 50%,\n        rgba(255, 255, 255, 0) 100%\n      );\n    }\n\n    /* --- Content Section --- */\n    .content-section {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      padding: 16px 32px 32px 32px;\n    }\n\n    /* --- Title --- */\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 30px;\n      margin: 0 0 12px 0;\n      color: #1a1a1a;\n      text-align: center;\n    }\n\n    /* --- Subtitle --- */\n    .subtitle {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 26px;\n      color: #6b7280;\n      margin: 0 0 32px 0;\n      text-align: center;\n    }\n\n    /* --- Trust Badges --- */\n    .trust-badges {\n      width: 100%;\n      border-top: 1px solid #f3f4f6;\n      border-bottom: 1px solid #f3f4f6;\n      padding: 25px 0;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      align-items: center;\n    }\n    .trust-label {\n      font-size: 12px;\n      font-weight: 700;\n      letter-spacing: 1.2px;\n      text-transform: uppercase;\n      color: #9ca3af;\n      text-align: center;\n      line-height: 16px;\n    }\n    .trust-logos {\n      display: flex;\n      gap: 24px;\n      align-items: center;\n      justify-content: center;\n      opacity: 0.6;\n    }\n    .logo-forbes {\n      font-family: 'Georgia', 'Liberation Serif', serif;\n      font-size: 20px;\n      font-weight: 700;\n      font-style: italic;\n      color: #000000;\n      line-height: 28px;\n    }\n    .logo-bi {\n      font-family: 'Lato', 'Liberation Sans', sans-serif;\n      font-size: 18px;\n      font-weight: 700;\n      color: #000000;\n      line-height: 28px;\n    }\n\n    /* --- CTA Button --- */\n    .cta-wrapper {\n      width: 100%;\n      padding-top: 24px;\n      margin-top: auto;\n    }\n    #action_button {\n      width: 100%;\n      padding: 16px 0;\n      box-sizing: border-box;\n      font-family: 'Lato', sans-serif;\n      font-size: 18px;\n      font-weight: 400;\n      border: none;\n      border-radius: 9999px;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      background-color: #ff2a6d;\n      color: #FFFFFF;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 10px 15px -3px #fbcfe8, 0px 4px 6px -4px #fbcfe8;\n    }\n    #action_button:hover:not(:disabled) {\n      opacity: 0.9;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"hero-section\">\n      <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564163293_hero-morning-calm-new.png/origin.png\" alt=\"\" decoding=\"async\" fetchpriority=\"high\">\n      <div class=\"hero-gradient\"></div>\n    </div>\n\n    <div class=\"content-section\">\n      <h1 id=\"title_label\">Join 200,000+ women<br>who've solved getting<br>dressed</h1>\n      <p class=\"subtitle\" id=\"subtitle_label\">Stop guessing. Start knowing exactly what to wear every single day.</p>\n\n      <div class=\"trust-badges\">\n        <span class=\"trust-label\">As seen in</span>\n        <div class=\"trust-logos\">\n          <span class=\"logo-forbes\">Forbes</span>\n          <span class=\"logo-bi\">Business Insider</span>\n        </div>\n      </div>\n\n      <div class=\"cta-wrapper\">\n        <button id=\"action_button\">I'm Ready to Start</button>\n      </div>\n    </div>\n\n  </div>\n\n  <script>\n    // ========================================================================\n    // --- OFFICIAL ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n    // ========================================================================\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: '',\n      screenId: ''\n    };\n    window.leaveCustomScreen = () => {};\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\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        runInitialSetup();\n      }\n    };\n\n    // Standalone fallback\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!window.onboardingOnlineCustomScreenData.screenId) {\n          console.log('Running in standalone mode');\n          runInitialSetup();\n        }\n      }, 100);\n    });\n\n    // ========================================================================\n    // --- SCREEN LOGIC ---\n    // ========================================================================\n\n    function handleBack() {\n      window.backScreen();\n    }\n\n    function runInitialSetup() {\n      console.log(\"Screen Initialized\");\n      addEventListeners();\n      updateLabels();\n    }\n\n    function addEventListeners() {\n      const button = document.getElementById('action_button');\n      if (button) {\n        button.addEventListener('click', () => {\n          window.leaveCustomScreen({});\n        });\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 titleElement = document.getElementById('title_label');\n      if (titleElement && labels.title_label?.value?.l10n?.[language]) {\n        titleElement.innerHTML = labels.title_label.value.l10n[language];\n      }\n\n      const subtitleElement = document.getElementById('subtitle_label');\n      if (subtitleElement && labels.subtitle_label?.value?.l10n?.[language]) {\n        subtitleElement.innerHTML = labels.subtitle_label.value.l10n[language];\n      }\n\n      const buttonElement = document.getElementById('action_button');\n      if (buttonElement && labels.button_text?.value?.l10n?.[language]) {\n        buttonElement.textContent = labels.button_text.value.l10n[language];\n      }\n    }\n  </script>\n</body>\n</html>\n","callback":{"action":{"kind":"advance","edges":[{"transitionKind":"push","nextScreenId":"6638aad9-4c61-440b-85fc-c6a66e44f2d2","conditions":[]}]}}}},"tags":[],"screenType":"WebEmbed","id":"1d544e3d-b40f-4157-b192-106693293150","name":"join-200k-women","position":{"y":-608,"x":3333.333333333333}},"20363359-4321-4629-884d-a3f6aeb9ae51":{"position":{"y":-608,"x":6709.333333333334},"id":"20363359-4321-4629-884d-a3f6aeb9ae51","name":"crunching-your-data","tags":[],"screenType":"WebEmbed","content":{"canvas":{"insets":{"start":16,"bottom":0,"end":16,"top":0},"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}},"header":{},"systemPrompt":null,"embed":{"callback":{"action":{"edges":[{"conditions":[],"transitionKind":"push","nextScreenId":"b54bd11d-24bc-4a74-b1bd-ed441d32f5d8"}],"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>Processing Data</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #f9fafb;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #f9fafb;\n      }\n    }\n\n    /* --- Loader Animation --- */\n    .loader-section {\n      margin-top: auto;\n      margin-bottom: 48px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .loader-circle {\n      width: 128px;\n      height: 128px;\n      position: relative;\n    }\n\n    .loader-ring {\n      position: absolute;\n      inset: 0;\n      border: 4px solid #e5e7eb;\n      border-radius: 9999px;\n    }\n\n    .loader-arc {\n      position: absolute;\n      inset: 0;\n      border: 4px solid transparent;\n      border-top-color: #ff2a6d;\n      border-right-color: #ff2a6d;\n      border-radius: 9999px;\n      animation: spin 1.2s linear infinite;\n    }\n\n    .loader-icon {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .loader-icon svg {\n      width: 36px;\n      height: 36px;\n    }\n\n    @keyframes spin {\n      to { transform: rotate(360deg); }\n    }\n\n    /* --- Text Section --- */\n    .text-section {\n      text-align: center;\n      padding: 0 24px;\n      margin-bottom: 40px;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      color: #1a1a1a;\n      margin: 0 0 8px 0;\n    }\n    .subtitle {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #6b7280;\n      margin: 0;\n    }\n\n    /* --- Process List --- */\n    .process-list {\n      width: 100%;\n      padding: 0 32px;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      margin-bottom: auto;\n    }\n\n    .process-item {\n      background: #ffffff;\n      border-radius: 12px;\n      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n      padding: 16px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      opacity: 0;\n      transform: translateY(8px);\n      transition: opacity 0.5s ease, transform 0.5s ease;\n    }\n    .process-item.visible {\n      opacity: 1;\n      transform: translateY(0);\n    }\n    .process-item.active {\n      border-left: 4px solid #ff2a6d;\n      padding-left: 20px;\n    }\n\n    .process-left {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n    .process-left svg {\n      width: 16px;\n      height: 16px;\n      flex-shrink: 0;\n    }\n    .process-label {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #374151;\n    }\n    .process-item.active .process-label {\n      color: #111827;\n    }\n\n    /* Status indicators */\n    .status-check {\n      display: none;\n    }\n    .status-check svg {\n      width: 20px;\n      height: 20px;\n    }\n    .process-item.completed .status-check {\n      display: flex;\n    }\n\n    .status-spinner {\n      width: 20px;\n      height: 20px;\n      border: 2px solid transparent;\n      border-top-color: #ff2a6d;\n      border-right-color: #ff2a6d;\n      border-radius: 9999px;\n      animation: spin 0.8s linear infinite;\n      display: none;\n    }\n    .process-item.active .status-spinner {\n      display: block;\n    }\n\n    .status-empty {\n      width: 20px;\n      height: 20px;\n      border: 2px solid transparent;\n      border-radius: 9999px;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"loader-section\">\n      <div class=\"loader-circle\">\n        <div class=\"loader-ring\"></div>\n        <div class=\"loader-arc\"></div>\n        <div class=\"loader-icon\">\n          <svg viewBox=\"0 0 33 33\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M15.03 2.72C15.16 2.01 15.78 1.5 16.5 1.5C17.23 1.5 17.85 2.01 17.98 2.72L19.55 11.06C19.78 12.27 20.73 13.22 21.95 13.45L30.28 15.03C30.99 15.16 31.51 15.78 31.51 16.5C31.51 17.23 30.99 17.85 30.28 17.98L21.95 19.55C20.73 19.78 19.78 20.73 19.55 21.95L17.98 30.28C17.85 30.99 17.23 31.51 16.5 31.51C15.78 31.51 15.16 30.99 15.03 30.28L13.45 21.95C13.22 20.73 12.27 19.78 11.06 19.55L2.72 17.98C2.01 17.85 1.5 17.23 1.5 16.5C1.5 15.78 2.01 15.16 2.72 15.03L11.06 13.45C12.27 13.22 13.22 12.27 13.45 11.06L15.03 2.72M28.5 1.5V7.5M31.5 4.5H25.5\" stroke=\"#FF2A6D\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M1.5 28.5C1.5 30.16 2.85 31.5 4.5 31.5C6.16 31.5 7.5 30.16 7.5 28.5C7.5 26.85 6.16 25.5 4.5 25.5C2.85 25.5 1.5 26.85 1.5 28.5Z\" stroke=\"#FF2A6D\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"text-section\">\n      <h1 id=\"title_label\">Crunching your data...</h1>\n      <p class=\"subtitle\" id=\"subtitle_label\">We are building your custom wardrobe plan.</p>\n    </div>\n\n    <div class=\"process-list\" id=\"process-list\">\n      <div class=\"process-item\" id=\"step-0\">\n        <div class=\"process-left\">\n          <svg viewBox=\"0 0 15 13.5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10 12.67V2C10 1.26 9.4 0.67 8.67 0.67H6C5.26 0.67 4.67 1.26 4.67 2V12.67\" stroke=\"#9CA3AF\" stroke-width=\"1.33\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M2 3.33H12.67C13.4 3.33 14 3.93 14 4.67V11.33C14 12.07 13.4 12.67 12.67 12.67H2C1.26 12.67 0.67 12.07 0.67 11.33V4.67C0.67 3.93 1.26 3.33 2 3.33Z\" stroke=\"#9CA3AF\" stroke-width=\"1.33\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          <span class=\"process-label\">Work schedule analysis</span>\n        </div>\n        <div class=\"status-check\">\n          <svg viewBox=\"0 0 19 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M17.33 7.5C18.12 11.35 16.11 15.23 12.51 16.8C8.91 18.38 4.7 17.22 2.4 14.04C0.11 10.85 0.35 6.49 2.98 3.58C5.62 0.67 9.93-0.01 13.33 1.95\" stroke=\"#FF2A6D\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M6.66 8.34L9.16 10.84L17.5 2.5\" stroke=\"#FF2A6D\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <div class=\"status-spinner\"></div>\n        <div class=\"status-empty\"></div>\n      </div>\n\n      <div class=\"process-item\" id=\"step-1\">\n        <div class=\"process-left\">\n          <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M13.59 2.31L10.67 1.33C10.67 2.81 9.47 4 8 4C6.53 4 5.33 2.81 5.33 1.33L2.41 2.31C1.79 2.51 1.41 3.15 1.52 3.79L1.91 6.11C1.96 6.43 2.24 6.67 2.57 6.67H4V13.33C4 14.07 4.6 14.67 5.33 14.67H10.67C11.4 14.67 12 14.07 12 13.33V6.67H13.43C13.76 6.67 14.04 6.43 14.09 6.11L14.48 3.79C14.59 3.15 14.21 2.51 13.59 2.31\" stroke=\"#9CA3AF\" stroke-width=\"1.33\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          <span class=\"process-label\">Style preferences</span>\n        </div>\n        <div class=\"status-check\">\n          <svg viewBox=\"0 0 19 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M17.33 7.5C18.12 11.35 16.11 15.23 12.51 16.8C8.91 18.38 4.7 17.22 2.4 14.04C0.11 10.85 0.35 6.49 2.98 3.58C5.62 0.67 9.93-0.01 13.33 1.95\" stroke=\"#FF2A6D\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M6.66 8.34L9.16 10.84L17.5 2.5\" stroke=\"#FF2A6D\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <div class=\"status-spinner\"></div>\n        <div class=\"status-empty\"></div>\n      </div>\n\n      <div class=\"process-item\" id=\"step-2\">\n        <div class=\"process-left\">\n          <svg viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M0.67 7.33C0.67 11.01 3.65 14 7.33 14C11.01 14 14 11.01 14 7.33C14 3.65 11.01 0.67 7.33 0.67C3.65 0.67 0.67 3.65 0.67 7.33Z\" stroke=\"#9CA3AF\" stroke-width=\"1.33\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M10 10C10 8.33 9 8.67 7.33 8.67L4.67 10M5.33 5.33H5.34M9.33 5.33H9.34\" stroke=\"#9CA3AF\" stroke-width=\"1.33\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          <span class=\"process-label\">Addressing frustrations</span>\n        </div>\n        <div class=\"status-check\">\n          <svg viewBox=\"0 0 19 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M17.33 7.5C18.12 11.35 16.11 15.23 12.51 16.8C8.91 18.38 4.7 17.22 2.4 14.04C0.11 10.85 0.35 6.49 2.98 3.58C5.62 0.67 9.93-0.01 13.33 1.95\" stroke=\"#FF2A6D\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M6.66 8.34L9.16 10.84L17.5 2.5\" stroke=\"#FF2A6D\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <div class=\"status-spinner\"></div>\n        <div class=\"status-empty\"></div>\n      </div>\n    </div>\n\n  </div>\n\n  <script>\n    // ========================================================================\n    // --- OFFICIAL ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n    // ========================================================================\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: '',\n      screenId: ''\n    };\n    window.leaveCustomScreen = () => {};\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\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        runInitialSetup();\n      }\n    };\n\n    // Standalone fallback\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!window.onboardingOnlineCustomScreenData.screenId) {\n          console.log('Running in standalone mode');\n          runInitialSetup();\n        }\n      }, 100);\n    });\n\n    // ========================================================================\n    // --- SCREEN LOGIC ---\n    // ========================================================================\n\n    const STEPS = [\n      { id: 'step-0', duration: 3000 },\n      { id: 'step-1', duration: 3000 },\n      { id: 'step-2', duration: 4000 }\n    ];\n\n    function runInitialSetup() {\n      console.log(\"Screen Initialized\");\n      updateLabels();\n      startProcessAnimation();\n    }\n\n    function startProcessAnimation() {\n      let delay = 0;\n\n      STEPS.forEach((step, index) => {\n        const el = document.getElementById(step.id);\n\n        // Show item and set as active\n        setTimeout(() => {\n          el.classList.add('visible', 'active');\n        }, delay + 200);\n\n        // Mark as completed after duration\n        setTimeout(() => {\n          el.classList.remove('active');\n          el.classList.add('completed');\n        }, delay + step.duration);\n\n        delay += step.duration;\n      });\n\n      // After all steps complete, leave screen\n      setTimeout(() => {\n        window.leaveCustomScreen({});\n      }, delay + 1200);\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 titleElement = document.getElementById('title_label');\n      if (titleElement && labels.title_label?.value?.l10n?.[language]) {\n        titleElement.textContent = labels.title_label.value.l10n[language];\n      }\n\n      const subtitleElement = document.getElementById('subtitle_label');\n      if (subtitleElement && labels.subtitle_label?.value?.l10n?.[language]) {\n        subtitleElement.textContent = labels.subtitle_label.value.l10n[language];\n      }\n    }\n  </script>\n</body>\n</html>\n"},"actionBar":{},"offlineFirst":true,"countdown":null,"animated":true}},"2480556f-6d12-43f8-8102-aafd23637562":{"content":{"systemPrompt":null,"header":{},"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"},"insets":{"end":16,"top":0,"start":16,"bottom":0}},"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>Personalized Reassurance</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #ffffff;\n      }\n    }\n\n    /* --- Hero Image Section --- */\n    .hero-section {\n      position: relative;\n      width: 100%;\n      flex-shrink: 0;\n      overflow: hidden;\n      flex: 0 0 55%;\n    }\n    .hero-image {\n      position: absolute;\n      inset: 0;\n      overflow: hidden;\n    }\n    .hero-image img {\n      width: 119%;\n      height: 100%;\n      object-fit: cover;\n      margin-left: -9.5%;\n    }\n    .hero-gradient {\n      position: absolute;\n      inset: 0;\n      background: linear-gradient(\n        to top,\n        #ffffff 0%,\n        rgba(255, 255, 255, 0.2) 50%,\n        rgba(255, 255, 255, 0) 100%\n      );\n    }\n\n    /* --- Floating Badge --- */\n    .floating-badge {\n      position: absolute;\n      bottom: 32px;\n      left: 24px;\n      right: 24px;\n      background: rgba(255, 255, 255, 0.9);\n      backdrop-filter: blur(6px);\n      -webkit-backdrop-filter: blur(6px);\n      border: 1px solid #ffffff;\n      border-radius: 12px;\n      padding: 17px;\n      box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);\n    }\n    .badge-title {\n      font-size: 20px;\n      font-weight: 400;\n      line-height: 28px;\n      color: #1a1a1a;\n      margin: 0 0 4px 0;\n    }\n    .badge-desc {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #4b5563;\n      margin: 0;\n    }\n\n    /* --- Content Area --- */\n    .content-area {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      padding: 16px 32px 32px 32px;\n    }\n\n    /* --- Checklist --- */\n    .checklist {\n      display: flex;\n      flex-direction: column;\n      gap: 24px;\n    }\n    .check-item {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n    .check-icon {\n      width: 40px;\n      height: 40px;\n      border-radius: 9999px;\n      background-color: #dcfce7;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n    .check-icon svg {\n      width: 20px;\n      height: 20px;\n    }\n    .check-text-title {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #111827;\n    }\n    .check-text-desc {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #6b7280;\n    }\n\n    /* --- CTA Button --- */\n    #action_button {\n      width: 100%;\n      padding: 16px 0;\n      box-sizing: border-box;\n      font-family: 'Lato', sans-serif;\n      font-size: 18px;\n      font-weight: 400;\n      border: none;\n      border-radius: 9999px;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      background-color: #ff2a6d;\n      color: #FFFFFF;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 10px 15px -3px #fbcfe8, 0px 4px 6px -4px #fbcfe8;\n    }\n    #action_button:hover:not(:disabled) {\n      opacity: 0.9;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"hero-section\">\n      <div class=\"hero-image\">\n        <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564215600_hero-reassurance.png/origin.png\" alt=\"\" decoding=\"async\" fetchpriority=\"high\">\n      </div>\n      <div class=\"hero-gradient\"></div>\n      <div class=\"floating-badge\">\n        <p class=\"badge-title\" id=\"badge_title\">You're in the right place.</p>\n        <p class=\"badge-desc\" id=\"badge_desc\">We've helped thousands of women solve this exact problem.</p>\n      </div>\n    </div>\n\n    <div class=\"content-area\">\n      <div class=\"checklist\">\n        <div class=\"check-item\">\n          <div class=\"check-icon\">\n            <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M16.6667 5L7.5 14.1667L3.33333 10\" stroke=\"#16A34A\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n          <div>\n            <div class=\"check-text-title\">No shopping required</div>\n            <div class=\"check-text-desc\">We start with what you own.</div>\n          </div>\n        </div>\n\n        <div class=\"check-item\">\n          <div class=\"check-icon\">\n            <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M16.6667 5L7.5 14.1667L3.33333 10\" stroke=\"#16A34A\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n          <div>\n            <div class=\"check-text-title\">Works for any budget</div>\n            <div class=\"check-text-desc\">From thrift to designer.</div>\n          </div>\n        </div>\n\n        <div class=\"check-item\">\n          <div class=\"check-icon\">\n            <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M16.6667 5L7.5 14.1667L3.33333 10\" stroke=\"#16A34A\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n          <div>\n            <div class=\"check-text-title\">5 minutes a day</div>\n            <div class=\"check-text-desc\">Proven routine for busy mornings.</div>\n          </div>\n        </div>\n      </div>\n\n      <button id=\"action_button\">Let's build your profile</button>\n    </div>\n\n  </div>\n\n  <script>\n    // ========================================================================\n    // --- OFFICIAL ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n    // ========================================================================\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: '',\n      screenId: ''\n    };\n    window.leaveCustomScreen = () => {};\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\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        runInitialSetup();\n      }\n    };\n\n    // Standalone fallback\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!window.onboardingOnlineCustomScreenData.screenId) {\n          console.log('Running in standalone mode');\n          runInitialSetup();\n        }\n      }, 100);\n    });\n\n    // ========================================================================\n    // --- SCREEN LOGIC ---\n    // ========================================================================\n\n    function handleBack() {\n      window.backScreen();\n    }\n\n    function runInitialSetup() {\n      console.log(\"Screen Initialized\");\n      addEventListeners();\n      updateLabels();\n    }\n\n    function addEventListeners() {\n      const button = document.getElementById('action_button');\n      if (button) {\n        button.addEventListener('click', () => {\n          window.leaveCustomScreen({});\n        });\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 titleElement = document.getElementById('badge_title');\n      if (titleElement && labels.badge_title?.value?.l10n?.[language]) {\n        titleElement.textContent = labels.badge_title.value.l10n[language];\n      }\n\n      const descElement = document.getElementById('badge_desc');\n      if (descElement && labels.badge_desc?.value?.l10n?.[language]) {\n        descElement.textContent = labels.badge_desc.value.l10n[language];\n      }\n\n      const buttonElement = document.getElementById('action_button');\n      if (buttonElement && labels.button_text?.value?.l10n?.[language]) {\n        buttonElement.textContent = labels.button_text.value.l10n[language];\n      }\n    }\n  </script>\n</body>\n</html>\n","callback":{"action":{"edges":[{"nextScreenId":"6ee1de9a-132b-4c01-b484-513c754d2827","transitionKind":"push","conditions":[]}],"kind":"advance"}}},"animated":true,"countdown":null,"offlineFirst":true},"tags":[],"screenType":"WebEmbed","id":"2480556f-6d12-43f8-8102-aafd23637562","name":"in-right-place","position":{"x":4458.666666666666,"y":-608}},"2605e57d-3db7-4759-9916-c61100804e4e":{"position":{"y":320,"x":23568},"id":"2605e57d-3db7-4759-9916-c61100804e4e","name":"lifetime-128","screenType":"WebEmbed","tags":[],"content":{"embed":{"callback":{"action":{"edges":[{"transitionKind":"push","nextScreenId":"screen607","conditions":[]}],"kind":"advance"}},"isIframe":false,"childSections":[{"kind":"ProductCatalog","productCatalogContent":{"layout":{"insets":{"bottom":16,"start":16,"top":16,"end":16}},"items":[{"topEndLabel":{"parameters":{"labels":{},"links":{}},"kind":"static","layout":{"insets":{}},"translations":{"en-US":""},"appearance":{"fontWeight":600,"fontFamily":"SF Pro","color":"#ffffff","lineHeight":22,"align":"start","fontSize":16}},"topStartLabel":{"kind":"static","parameters":{"links":{},"labels":{}},"appearance":{"fontSize":16,"align":"start","lineHeight":22,"color":"#ffffff","fontFamily":"SF Pro","fontWeight":600},"translations":{"en-US":""},"layout":{"insets":{}}},"productId":"avwoHBPkh07xPeDQwqCD","badge":null,"isSelected":true,"bottomEndLabel":{"layout":{"insets":{}},"appearance":{"align":"start","fontSize":16,"color":"#ffffff","fontWeight":600,"fontFamily":"SF Pro","lineHeight":22},"translations":{"en-US":""},"parameters":{"links":{},"labels":{}},"kind":"static"},"bottomStartLabel":{"parameters":{"labels":{},"links":{}},"kind":"static","layout":{"insets":{}},"translations":{"en-US":""},"appearance":{"fontSize":16,"align":"start","lineHeight":22,"color":"#ffffff","fontFamily":"SF Pro","fontWeight":600}},"checkbox":{"kind":"square","appearance":{"color":"#ffffff"},"selectedAppearance":{"color":"#ffc201"},"layout":{"insets":{}}},"weight":0,"purchaseButtonLabel":{"parameters":{"labels":{},"links":{}},"kind":"static","layout":{"insets":{}},"translations":{"en-US":{"box":{"styles":{}},"kind":"default","styles":{},"l10n":{"en-US":""},"parameters":{"links":{},"labels":{}}}},"appearance":{}}}],"appearance":{"backgroundColor":"#2a2a2a","insets":{"bottom":12,"start":16,"top":12,"end":16},"itemsSpacing":8,"borders":{"radius":{"uniform":12}}},"selectedAppearance":{"backgroundColor":"#ffc201","borders":{"color":"#e7b34c","radius":{"uniform":12},"width":2}},"viewKind":"stacked","productLayout":"CheckboxLabels"},"layout":{"flexGrow":0,"scrollable":false,"heightKind":"auto","flexShrink":1},"label":"Product Catalog","id":"section-moh7y0mr-qdrsp","order":0}],"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>Upgrade to Lifetime</title>\n<style>\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n  body, html {\n    width: 100%;\n    height: 100%;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n    background-color: #ffffff;\n  }\n\n  .screen-container {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  @media (min-width: 600px) {\n    body {\n      background-color: #f0f2f5;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n    .screen-container {\n      width: 100%;\n      max-width: 430px;\n      aspect-ratio: 9 / 19.5;\n      height: auto;\n      border-radius: 40px;\n      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);\n      border: 1px solid #ddd;\n      overflow: hidden;\n      position: relative;\n    }\n  }\n\n  /* --- Close Button --- */\n  .close-btn {\n    position: absolute;\n    top: 16px;\n    right: 16px;\n    z-index: 10;\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    background: rgba(0, 0, 0, 0.3);\n    backdrop-filter: blur(4px);\n    -webkit-backdrop-filter: blur(4px);\n    border: none;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  /* --- Scroll Area --- */\n  .scroll-area {\n    flex: 1;\n    overflow-y: auto;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* --- Hero Image --- */\n  .hero-wrapper {\n    position: relative;\n    flex-shrink: 0;\n  }\n\n  .hero-wrapper::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 60px;\n    background: linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0) 100%);\n    pointer-events: none;\n  }\n\n  .hero-image {\n    width: 100%;\n    aspect-ratio: 16 / 9;\n    object-fit: cover;\n    display: block;\n  }\n\n  /* --- Content --- */\n  .content {\n    padding: 20px 24px;\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: safe center;\n  }\n\n  .main-title {\n    font-size: 26px;\n    font-weight: 700;\n    line-height: 32px;\n    color: #1a1a1a;\n    text-align: center;\n    margin-bottom: 6px;\n  }\n\n  .urgency-sub {\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    color: #ff2a6d;\n    text-align: center;\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n    margin-bottom: 18px;\n  }\n\n  /* --- Benefits List --- */\n  .benefits {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    margin-bottom: 0;\n  }\n\n  .benefit-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n\n  .benefit-icon {\n    width: 28px;\n    height: 28px;\n    border-radius: 50%;\n    background: #ff2a6d;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .benefit-text {\n    font-size: 16px;\n    color: #1a1a1a;\n    line-height: 22px;\n    font-weight: 400;\n  }\n\n  /* --- Product Card --- */\n  .product-card {\n    border: 2px solid #e5e7eb;\n    border-radius: 16px;\n    padding: 16px 20px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 20px;\n    position: relative;\n    cursor: pointer;\n    transition: border-color 0.2s;\n  }\n\n  .product-card.selected {\n    border-color: #ff2a6d;\n  }\n\n  .product-card-left {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n\n  .radio-circle {\n    width: 22px;\n    height: 22px;\n    border-radius: 50%;\n    border: 2px solid #d1d5db;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    transition: border-color 0.2s, background 0.2s;\n  }\n\n  .product-card.selected .radio-circle {\n    border-color: #ff2a6d;\n    background: #ff2a6d;\n  }\n\n  .radio-circle-inner {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: white;\n    opacity: 0;\n    transition: opacity 0.2s;\n  }\n\n  .product-card.selected .radio-circle-inner {\n    opacity: 1;\n  }\n\n  .product-name {\n    font-size: 16px;\n    font-weight: 600;\n    color: #1a1a1a;\n    line-height: 22px;\n  }\n\n  .product-price {\n    font-size: 18px;\n    font-weight: 700;\n    color: #1a1a1a;\n    line-height: 24px;\n  }\n\n  .product-badge {\n    position: absolute;\n    top: -12px;\n    right: 20px;\n    background: #ff2a6d;\n    color: white;\n    font-size: 13px;\n    font-weight: 500;\n    padding: 3px 12px;\n    border-radius: 9999px;\n    letter-spacing: 0.3px;\n    line-height: 18px;\n  }\n\n  /* --- Social Proof --- */\n  .social-proof {\n    text-align: center;\n    font-size: 14px;\n    color: #9ca3af;\n    line-height: 20px;\n    margin-bottom: 16px;\n    padding: 0;\n  }\n\n  /* --- Sticky CTA --- */\n  .cta-section {\n    background: white;\n    padding: 12px 24px 0;\n    flex-shrink: 0;\n    position: relative;\n  }\n\n  .cta-section::before {\n    content: '';\n    position: absolute;\n    bottom: 100%;\n    left: 0;\n    right: 0;\n    height: 48px;\n    background: linear-gradient(to top, white 0%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0) 100%);\n    pointer-events: none;\n  }\n\n  .cta-button {\n    width: 100%;\n    background: #ff2a6d;\n    border: none;\n    border-radius: 9999px;\n    padding: 16px 24px;\n    font-size: 18px;\n    color: white;\n    font-weight: 600;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    box-shadow: 0 10px 15px -3px #fbcfe8, 0 4px 6px -4px #fbcfe8;\n    margin-bottom: 12px;\n    transition: opacity 0.2s;\n    line-height: 28px;\n  }\n  .cta-button:hover { opacity: 0.9; }\n  .cta-button:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  .skip-button {\n    width: 100%;\n    background: #1a1a1a;\n    border: none;\n    border-radius: 9999px;\n    padding: 14px 24px;\n    font-size: 16px;\n    color: #ffffff;\n    font-weight: 600;\n    cursor: pointer;\n    display: block;\n    text-align: center;\n    margin-bottom: 20px;\n    line-height: 24px;\n  }\n\n  .cta-section {\n    padding-bottom: 20px;\n  }\n</style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n\n  <!-- Close Button -->\n  <button class=\"close-btn\" id=\"close-btn\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n      <path d=\"M1 1l12 12M13 1L1 13\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n    </svg>\n  </button>\n\n  <!-- Scrollable Content -->\n  <div class=\"scroll-area\">\n\n    <!-- Hero -->\n    <div class=\"hero-wrapper\">\n      <img class=\"hero-image\" src=\"https://api.segmently.ai/assets/onboardings/6OwufOr1PtCg8dN7pR6O/images/en-US_1769514293328_1740235690200-IMG_5656.jpg/origin.jpg\" alt=\"Hero\">\n    </div>\n\n    <!-- Content -->\n    <div class=\"content\">\n      <h1 class=\"main-title\" id=\"main-title\">Pay just $29 more<BR>to get lifetime</h1>\n      <p class=\"urgency-sub\">Limited-time upgrade</p>\n\n      <!-- Benefits -->\n      <div class=\"benefits\">\n        <div class=\"benefit-item\">\n          <div class=\"benefit-icon\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M2 7l3.5 3.5L12 4\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <span class=\"benefit-text\">Pay once. Use forever</span>\n        </div>\n        <div class=\"benefit-item\">\n          <div class=\"benefit-icon\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M2 7l3.5 3.5L12 4\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <span class=\"benefit-text\">No renewals or hidden fees</span>\n        </div>\n        <div class=\"benefit-item\">\n          <div class=\"benefit-icon\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M2 7l3.5 3.5L12 4\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <span class=\"benefit-text\">All future premium updates included</span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Sticky CTA -->\n  <div class=\"cta-section\">\n    <!-- Product Card -->\n    <div class=\"product-card selected\" id=\"product-card\">\n      <div class=\"product-badge\">Best Value</div>\n      <div class=\"product-card-left\">\n        <div class=\"radio-circle\">\n          <div class=\"radio-circle-inner\"></div>\n        </div>\n        <span class=\"product-name\" id=\"product-name\">Lifetime</span>\n      </div>\n      <span class=\"product-price\" id=\"product-price\">$128</span>\n    </div>\n\n    <!-- Anchor Line -->\n    <p class=\"social-proof\">Less than 6 months of monthly plans</p>\n\n    <button class=\"cta-button\" id=\"cta-button\">\n      <span id=\"cta-label\">Get Lifetime for $128</span>\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M3.33 8h9.34M8.67 4l4 4-4 4\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </button>\n    <button class=\"skip-button\" id=\"skip-button\">No thanks — continue with 7 days</button>\n  </div>\n\n</div>\n\n<script>\nsegmentlySDK.ready().then(function(sdk) {\n  init(sdk);\n});\n\nfunction init(sdk) {\n  var product = null;\n  var products = sdk.getProducts();\n  var displayPrice = '$128';\n\n  if (products && products.length > 0) {\n    product = products[0];\n\n    // Update product name from catalog\n    if (product.labels && product.labels.title) {\n      document.getElementById('product-name').textContent = product.labels.title;\n    }\n\n    // Update price from catalog\n    var priceInfo = sdk.getProductPrice(product.productId);\n    if (priceInfo && priceInfo.displayPrice) {\n      displayPrice = priceInfo.displayPrice;\n      document.getElementById('product-price').textContent = displayPrice;\n      document.getElementById('main-title').textContent = 'Pay just $29 more to get lifetime';\n      document.getElementById('cta-label').textContent = 'Get Lifetime for ' + displayPrice;\n    }\n\n    // Select the product\n    sdk.selectProduct(product.productId);\n  }\n\n  // CTA — purchase\n  document.getElementById('cta-button').addEventListener('click', function() {\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    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  // Mark this session for the downsell flow and navigate on in a single call.\n  // We pass the flag via the navigateNext payload (CustomScreen callback path)\n  // instead of sdk.setVariable — the payload path resolves the variable by\n  // name→ID before writing, which sidesteps a bug in setVariable that crashes\n  // when the variable's internal ID doesn't match the key we pass.\n  function declineAndContinue() {\n    sdk.navigateNext({ 'make-downsell': true });\n  }\n\n  // Skip — continue without purchasing\n  document.getElementById('skip-button').addEventListener('click', declineAndContinue);\n\n  // Close button — same as skip\n  document.getElementById('close-btn').addEventListener('click', declineAndContinue);\n}\n</script>\n</body>\n</html>\n"},"animated":true,"canvas":{"background":{"content":{"color":"#1a1a1a"},"kind":"solid"}},"offlineFirst":false}},"2d432bfa-0065-4283-ad9d-dcfe303de03d":{"position":{"x":1488,"y":464},"id":"2d432bfa-0065-4283-ad9d-dcfe303de03d","name":"age-group","screenType":"WebEmbed","tags":[],"content":{"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>Age Group 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=Lato:wght@400;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    /* --- Base & Mobile-First Styles (Required Boilerplate) --- */\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      position: relative;\n    }\n\n    /* --- Desktop Preview Simulation (iPhone Frame) --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #fff;\n      }\n    }\n\n    /* --- Progress Bar (kept as-is) --- */\n    .progress-container {\n      display: flex;\n      align-items: center;\n      padding: 27px 32px 0px 20px;\n      margin-bottom: 30px;\n    }\n    .back-btn {\n      background: none;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 25px;\n    }\n    .back-btn svg {\n      width: 24px;\n      height: 24px;\n      color: #9CA3AF;\n    }\n    .progress-bar-bg {\n      flex: 1;\n      height: 6px;\n      background-color: #E5E5EB;\n      border-radius: 3px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      background-color: #F5326D;\n      border-radius: 3px;\n    }\n\n    /* --- Header --- */\n    .header-section {\n      padding: 0 24px;\n      margin-bottom: 24px;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      margin: 0 0 8px 0;\n      color: #1a1a1a;\n      text-align: left;\n    }\n    .subtitle {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #6b7280;\n      margin: 0;\n      text-align: left;\n    }\n\n    /* --- Options List --- */\n    .options-container {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 0 24px 32px 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .options-container::-webkit-scrollbar {\n      display: none;\n    }\n\n    .option-card {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 17px;\n      background: #ffffff;\n      border: 1px solid #e5e7eb;\n      border-radius: 16px;\n      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n      cursor: pointer;\n      transition: all 0.2s ease;\n      flex-shrink: 0;\n    }\n    .option-card.selected {\n      border-color: #ff2a6d;\n    }\n\n    .option-photo {\n      width: 64px;\n      height: 64px;\n      border-radius: 12px;\n      background-color: #f3f4f6;\n      object-fit: cover;\n      flex-shrink: 0;\n    }\n\n    .option-label {\n      font-size: 18px;\n      font-weight: 400;\n      line-height: 28px;\n      color: #1f2937;\n      flex: 1;\n    }\n\n    /* Radio indicator */\n    .radio-indicator {\n      width: 24px;\n      height: 24px;\n      border-radius: 9999px;\n      border: 2px solid #d1d5db;\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-sizing: border-box;\n      transition: border-color 0.2s;\n    }\n    .radio-indicator .radio-dot {\n      width: 12px;\n      height: 12px;\n      border-radius: 9999px;\n      background-color: #ff2a6d;\n      opacity: 0;\n      transition: opacity 0.2s;\n    }\n    .option-card.selected .radio-indicator {\n      border-color: #ff2a6d;\n    }\n    .option-card.selected .radio-dot {\n      opacity: 1;\n    }\n\n    /* --- Footer --- */\n    .footer-privacy {\n      border-top: 1px solid #f9fafb;\n      padding: 25px 24px 24px 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 4px;\n      flex-shrink: 0;\n    }\n    .footer-privacy svg {\n      width: 12px;\n      height: 12px;\n      flex-shrink: 0;\n    }\n    .footer-privacy span {\n      font-size: 12px;\n      line-height: 16px;\n      color: #9ca3af;\n    }\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n\n  <div class=\"progress-container\">\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\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 19L5 12L12 5M19 12H5\" />\n      </svg>\n    </button>\n    <div class=\"progress-bar-bg\">\n      <div class=\"progress-bar-fill\" style=\"width: 10%;\"></div>\n    </div>\n  </div>\n\n  <div class=\"header-section\">\n    <h1 id=\"title_label\">First, how old are you?</h1>\n    <p class=\"subtitle\" id=\"subtitle_label\">We use this to tailor outfit formulas to your life stage.</p>\n  </div>\n\n  <div class=\"options-container\" id=\"list-container\"></div>\n\n  <div class=\"footer-privacy\">\n    <svg viewBox=\"0 0 10 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M1.5 5H8.5C9.05192 5 9.5 5.44808 9.5 6V9.5C9.5 10.0519 9.05192 10.5 8.5 10.5H1.5C0.948085 10.5 0.5 10.0519 0.5 9.5V6C0.5 5.44808 0.948085 5 1.5 5V5\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M2.5 5V3C2.5 1.62021 3.62021 0.5 5 0.5C6.37979 0.5 7.5 1.62021 7.5 3V5\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    <span>Your data is private and secure</span>\n  </div>\n\n</div>\n\n<script>\n  // --- 1. Environment Detection & Communication Setup ---\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('Selected age group:', 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  // --- 2. Screen Logic ---\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  const AGE_GROUPS = [\n    { id: '25_34', label: '25 - 34', photo: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564079345_age-25-34.png/origin.png' },\n    { id: '35_44', label: '35 - 44', photo: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564079866_age-35-44.png/origin.png' },\n    { id: '45_54', label: '45 - 54', photo: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564080227_age-45-54.png/origin.png' },\n    { id: '55_PLUS', label: '55+', photo: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564080573_age-55-plus.png/origin.png' }\n  ];\n\n  let selectedItem = null;\n\n  function initScreen() {\n    let savedAgeGroup = null;\n\n    if (window.onboardingOnlineCustomScreenData.inputs && window.onboardingOnlineCustomScreenData.inputs.age_group) {\n      const inputData = window.onboardingOnlineCustomScreenData.inputs.age_group;\n      if (inputData && typeof inputData === 'object' && 'value' in inputData) {\n        savedAgeGroup = inputData.value;\n      } else {\n        savedAgeGroup = inputData;\n      }\n    }\n\n    if (!savedAgeGroup) {\n      const userData = window.onboardingOnlineCustomScreenData.userData;\n      if (userData) {\n        for (const screenId in userData) {\n          const screenData = userData[screenId];\n          if (screenData) {\n            if (screenData[\"age_group\"]) {\n              savedAgeGroup = screenData[\"age_group\"];\n              break;\n            }\n            if (screenData[\"input['age_group']\"]) {\n              savedAgeGroup = screenData[\"input['age_group']\"];\n              break;\n            }\n          }\n        }\n      }\n    }\n\n    if (savedAgeGroup) {\n      const matchById = AGE_GROUPS.find(c => c.id === savedAgeGroup);\n      if (matchById) {\n        selectedItem = savedAgeGroup;\n      } else {\n        const matchedAgeGroup = AGE_GROUPS.find(c => c.label === savedAgeGroup);\n        if (matchedAgeGroup) {\n          selectedItem = matchedAgeGroup.id;\n        }\n      }\n    }\n\n    renderList();\n\n    const labels = window.onboardingOnlineCustomScreenData.labels;\n    const lang = window.onboardingOnlineCustomScreenData.language;\n    if (labels && labels.title && labels.title.value.l10n[lang]) {\n      document.getElementById('title_label').textContent = labels.title.value.l10n[lang];\n    }\n  }\n\n  function renderList() {\n    const container = document.getElementById('list-container');\n    container.innerHTML = '';\n\n    AGE_GROUPS.forEach(item => {\n      const isSelected = selectedItem === item.id;\n\n      const card = document.createElement('div');\n      card.className = `option-card${isSelected ? ' selected' : ''}`;\n      card.onclick = () => selectOption(item.id);\n\n      card.innerHTML = `\n        <img class=\"option-photo\" src=\"${item.photo}\" alt=\"\">\n        <span class=\"option-label\">${item.label}</span>\n        <div class=\"radio-indicator\">\n          <div class=\"radio-dot\"></div>\n        </div>\n      `;\n\n      container.appendChild(card);\n    });\n  }\n\n  function selectOption(id) {\n    selectedItem = id;\n    renderList();\n\n    const segmentlySDK = getSegmentlySDK();\n    if (segmentlySDK) {\n      segmentlySDK.trackEvent('UserUpdatedValue', {\n        screenName: 'age_group',\n        answer: selectedItem\n      });\n    }\n\n    setTimeout(() => {\n      window.leaveCustomScreen({\n        age_group: selectedItem\n      });\n    }, 300);\n  }\n</script>\n\n</body>\n</html>\n","callback":{"action":{"kind":"advance","edges":[{"conditions":[],"nextScreenId":"b4a9c313-c36b-4bf9-84a4-a02697e29385","transitionKind":"push"}]}}},"systemPrompt":null,"header":{},"canvas":{"insets":{"end":16,"top":0,"start":16,"bottom":0},"background":{"kind":"solid","content":{"color":"#f8fbfb"}}},"animated":true,"countdown":null,"offlineFirst":true}},"4adfa269-62c8-4b0f-bd62-a875b53a8981":{"content":{"offlineFirst":true,"countdown":null,"animated":true,"header":{},"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"},"insets":{"start":16,"bottom":0,"end":16,"top":0}},"systemPrompt":null,"embed":{"callback":{"action":{"edges":[{"transitionKind":"push","nextScreenId":"93c9611e-defd-4e2e-a6e3-ae39a2d869bd","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>Wardrobe Timeline</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #fff;\n      }\n    }\n\n    /* --- Header --- */\n    .header-section {\n      padding: 24px 24px 8px 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      flex-shrink: 0;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      margin: 0;\n      color: #1a1a1a;\n      text-align: center;\n    }\n    .subtitle {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #6b7280;\n      margin: 0;\n      text-align: center;\n    }\n\n    /* --- Timeline Container --- */\n    .timeline-container {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 16px 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 32px;\n      position: relative;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .timeline-container::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* Connecting line */\n    .timeline-container::before {\n      content: '';\n      position: absolute;\n      left: 43px;\n      top: 40px;\n      bottom: 40px;\n      width: 2px;\n      background-color: #e5e7eb;\n    }\n\n    /* --- Timeline Item --- */\n    .timeline-item {\n      display: flex;\n      gap: 16px;\n      align-items: flex-start;\n      position: relative;\n    }\n\n    .timeline-dot {\n      width: 40px;\n      height: 40px;\n      border-radius: 9999px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      position: relative;\n      z-index: 1;\n    }\n    .timeline-dot.start {\n      background: #ffffff;\n      border: 4px solid #ff2a6d;\n      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n    }\n    .timeline-dot.start span {\n      font-size: 10px;\n      font-weight: 400;\n      line-height: 15px;\n      color: #9ca3af;\n    }\n    .timeline-dot.pink {\n      background: #ff2a6d;\n      box-shadow: 0px 10px 15px -3px #fbcfe8, 0px 4px 6px -4px #fbcfe8;\n    }\n    .timeline-dot.dark {\n      background: #1a1a1a;\n      box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);\n    }\n    .timeline-dot svg {\n      width: 20px;\n      height: 20px;\n    }\n\n    .timeline-card {\n      flex: 1;\n      background: #ffffff;\n      border: 1px solid #f3f4f6;\n      border-radius: 12px;\n      padding: 17px;\n      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n    .timeline-card.highlight {\n      background: #fff0f5;\n      border-color: #fce7f3;\n    }\n\n    .card-week {\n      font-size: 12px;\n      font-weight: 400;\n      line-height: 16px;\n      color: #ff2a6d;\n      text-transform: uppercase;\n      letter-spacing: 0.6px;\n    }\n    .card-title {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #111827;\n    }\n    .card-desc {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #6b7280;\n    }\n    .timeline-card.highlight .card-desc {\n      color: #374151;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      border-top: 1px solid #f9fafb;\n      padding: 25px 24px 24px 24px;\n      flex-shrink: 0;\n    }\n    #action_button {\n      width: 100%;\n      padding: 16px 0;\n      box-sizing: border-box;\n      font-family: 'Lato', sans-serif;\n      font-size: 18px;\n      font-weight: 400;\n      border: none;\n      border-radius: 9999px;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      background-color: #ff2a6d;\n      color: #FFFFFF;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 10px 15px -3px #fbcfe8, 0px 4px 6px -4px #fbcfe8;\n    }\n    #action_button:hover {\n      opacity: 0.9;\n    }\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n\n  <div class=\"header-section\">\n    <h1 id=\"title_label\">Your Wardrobe Timeline</h1>\n    <p class=\"subtitle\" id=\"subtitle_label\">Based on your answers, here is your path.</p>\n  </div>\n\n  <div class=\"timeline-container\">\n    <div class=\"timeline-item\">\n      <div class=\"timeline-dot start\">\n        <span>START</span>\n      </div>\n      <div class=\"timeline-card\">\n        <div class=\"card-week\">Week 1</div>\n        <div class=\"card-title\">Master your closet basics</div>\n        <div class=\"card-desc\">Identify the gaps in your current wardrobe.</div>\n      </div>\n    </div>\n\n    <div class=\"timeline-item\">\n      <div class=\"timeline-dot pink\">\n        <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M16.6667 5L7.5 14.1667L3.33333 10\" stroke=\"white\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </div>\n      <div class=\"timeline-card\">\n        <div class=\"card-week\">Week 4</div>\n        <div class=\"card-title\">Confident daily formulas</div>\n        <div class=\"card-desc\">Wake up and know exactly what to wear.</div>\n      </div>\n    </div>\n\n    <div class=\"timeline-item\">\n      <div class=\"timeline-dot pink\">\n        <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M9.60417 1.9125C9.67866 1.76199 9.83207 1.66676 10 1.66676C10.1679 1.66676 10.3213 1.76199 10.3958 1.9125L12.3208 5.81167C12.5779 6.3329 13.0749 6.69436 13.65 6.77833L17.955 7.40833C18.1214 7.43244 18.2597 7.54894 18.3117 7.70884C18.3637 7.86873 18.3204 8.04429 18.2 8.16167L15.0867 11.1933C14.6695 11.5993 14.479 12.1846 14.5775 12.7583L15.3125 17.0417C15.3419 17.208 15.2738 17.3766 15.1371 17.4758C15.0004 17.5751 14.8191 17.5877 14.67 17.5083L10.8217 15.485C10.307 15.2144 9.69216 15.2144 9.1775 15.485L5.33 17.5083C5.18095 17.5872 4.99997 17.5744 4.86358 17.4752C4.72719 17.376 4.65919 17.2078 4.68833 17.0417L5.4225 12.7592C5.52125 12.1852 5.33078 11.5994 4.91333 11.1933L1.8 8.1625C1.67859 8.04524 1.63463 7.86904 1.68673 7.70849C1.73883 7.54795 1.87787 7.43113 2.045 7.4075L6.34917 6.77833C6.92487 6.69487 7.4226 6.33334 7.68 5.81167L9.60417 1.9125\" stroke=\"white\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </div>\n      <div class=\"timeline-card\">\n        <div class=\"card-week\">Month 3</div>\n        <div class=\"card-title\">Shopping with strategy</div>\n        <div class=\"card-desc\">No more impulse buys. Only pieces that fit.</div>\n      </div>\n    </div>\n\n    <div class=\"timeline-item\">\n      <div class=\"timeline-dot dark\">\n        <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M9.635 2.72167C9.70826 2.58861 9.84811 2.50596 10 2.50596C10.1519 2.50596 10.2917 2.58861 10.365 2.72167L12.825 7.39167C12.9438 7.61062 13.1543 7.76496 13.3988 7.81238C13.6434 7.85981 13.8963 7.79535 14.0883 7.63667L17.6525 4.58333C17.7929 4.46916 17.9909 4.45864 18.1426 4.55729C18.2943 4.65594 18.3649 4.84122 18.3175 5.01583L15.9558 13.5542C15.8568 13.9132 15.5316 14.1629 15.1592 14.1658H4.84167C4.46896 14.1632 4.1433 13.9135 4.04417 13.5542L1.68333 5.01667C1.63589 4.84205 1.70656 4.65677 1.85825 4.55812C2.00994 4.45947 2.20796 4.46999 2.34833 4.58417L5.91167 7.6375C6.10369 7.79618 6.35662 7.86064 6.60117 7.81322C6.84571 7.76579 7.05622 7.61146 7.175 7.3925L9.635 2.72167M4.16667 17.5H15.8333\" stroke=\"white\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </div>\n      <div class=\"timeline-card highlight\">\n        <div class=\"card-week\">Month 6</div>\n        <div class=\"card-title\">Dressed in 5 minutes</div>\n        <div class=\"card-desc\">Complete wardrobe freedom & confidence.</div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"footer\">\n    <button id=\"action_button\">Start My Transformation</button>\n  </div>\n\n</div>\n\n<script>\n  // ========================================================================\n  // --- OFFICIAL ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n  // ========================================================================\n\n  window.onboardingOnlineCustomScreenData = {\n    inputs: {},\n    labels: {},\n    userData: {},\n    customData: {},\n    webOnboarding: {},\n    incomeUserData: {},\n    language: '',\n    screenId: ''\n  };\n  window.leaveCustomScreen = () => {};\n  window.backScreen = () => {};\n\n  window.onmessage = (event) => {\n    if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\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      runInitialSetup();\n    }\n  };\n\n  // Standalone fallback\n  window.addEventListener('DOMContentLoaded', () => {\n    setTimeout(() => {\n      if (!window.onboardingOnlineCustomScreenData.screenId) {\n        console.log('Running in standalone mode');\n        runInitialSetup();\n      }\n    }, 100);\n  });\n\n  // ========================================================================\n  // --- SCREEN LOGIC ---\n  // ========================================================================\n\n  function runInitialSetup() {\n    console.log(\"Screen Initialized\");\n    addEventListeners();\n    updateLabels();\n  }\n\n  function addEventListeners() {\n    let advanced = false;\n    const advance = (event) => {\n      if (advanced) return;\n      advanced = true;\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n      window.leaveCustomScreen({});\n    };\n\n    document.addEventListener('click', advance, true);\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 titleElement = document.getElementById('title_label');\n    if (titleElement && labels.title_label?.value?.l10n?.[language]) {\n      titleElement.textContent = labels.title_label.value.l10n[language];\n    }\n\n    const subtitleElement = document.getElementById('subtitle_label');\n    if (subtitleElement && labels.subtitle_label?.value?.l10n?.[language]) {\n      subtitleElement.textContent = labels.subtitle_label.value.l10n[language];\n    }\n\n    const buttonElement = document.getElementById('action_button');\n    if (buttonElement && labels.button_text?.value?.l10n?.[language]) {\n      buttonElement.textContent = labels.button_text.value.l10n[language];\n    }\n  }\n</script>\n\n</body>\n</html>\n"},"actionBar":{}},"tags":[],"screenType":"WebEmbed","name":"wardrobe-timeline","id":"4adfa269-62c8-4b0f-bd62-a875b53a8981","position":{"y":-608,"x":8960}},"4c55010e-6f81-46b9-93ef-cc021f811474":{"content":{"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>Past Success</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #fff;\n      }\n    }\n\n    /* --- Progress Bar --- */\n    .progress-container {\n      display: flex;\n      align-items: center;\n      padding: 27px 32px 0px 20px;\n      margin-bottom: 30px;\n    }\n    .back-btn {\n      background: none;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 25px;\n    }\n    .back-btn svg {\n      width: 24px;\n      height: 24px;\n      color: #9CA3AF;\n    }\n    .progress-bar-bg {\n      flex: 1;\n      height: 6px;\n      background-color: #E5E5EB;\n      border-radius: 3px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      background-color: #F5326D;\n      border-radius: 3px;\n    }\n\n    /* --- Header --- */\n    .header-section {\n      padding: 0 24px 24px 24px;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      margin: 0;\n      color: #1a1a1a;\n      text-align: left;\n    }\n\n    /* --- Options Container --- */\n    .options-container {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 0 24px 32px 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .options-container::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* --- Option Card --- */\n    .option-card {\n      background: #ffffff;\n      border: 1px solid #e5e7eb;\n      border-radius: 16px;\n      padding: 21px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n    .option-card.selected {\n      border-color: #ff2a6d;\n      background-color: #fff0f5;\n    }\n\n    .option-label {\n      font-size: 18px;\n      font-weight: 400;\n      line-height: 28px;\n      color: #1f2937;\n    }\n\n    .chevron {\n      width: 16px;\n      height: 16px;\n      flex-shrink: 0;\n    }\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n\n  <div class=\"progress-container\">\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\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 19L5 12L12 5M19 12H5\" />\n      </svg>\n    </button>\n    <div class=\"progress-bar-bg\">\n      <div class=\"progress-bar-fill\" style=\"width: 72%;\"></div>\n    </div>\n  </div>\n\n  <div class=\"header-section\">\n    <h1 id=\"title_label\">Have you ever had a period where getting dressed felt easy?</h1>\n  </div>\n\n  <div class=\"options-container\" id=\"list-container\"></div>\n\n</div>\n\n<script>\n  // --- 1. Environment Detection & Communication Setup ---\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('Selected past success:', 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  // --- 2. Screen Logic ---\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  const OPTIONS = [\n    { id: 'BEFORE_KIDS', label: 'Yes, before kids' },\n    { id: 'BEFORE_WEIGHT_CHANGE', label: 'Yes, before my weight changed' },\n    { id: 'HAD_UNIFORM', label: 'Yes, when I had a uniform' },\n    { id: 'NEVER', label: 'Never really' }\n  ];\n\n  let selectedItem = null;\n\n  function initScreen() {\n    let savedValue = null;\n\n    if (window.onboardingOnlineCustomScreenData.inputs && window.onboardingOnlineCustomScreenData.inputs.past_success) {\n      const inputData = window.onboardingOnlineCustomScreenData.inputs.past_success;\n      if (inputData && typeof inputData === 'object' && 'value' in inputData) {\n        savedValue = inputData.value;\n      } else {\n        savedValue = inputData;\n      }\n    }\n\n    if (!savedValue) {\n      const userData = window.onboardingOnlineCustomScreenData.userData;\n      if (userData) {\n        for (const screenId in userData) {\n          const screenData = userData[screenId];\n          if (screenData) {\n            if (screenData[\"past_success\"]) {\n              savedValue = screenData[\"past_success\"];\n              break;\n            }\n            if (screenData[\"input['past_success']\"]) {\n              savedValue = screenData[\"input['past_success']\"];\n              break;\n            }\n          }\n        }\n      }\n    }\n\n    if (savedValue) {\n      const val = Array.isArray(savedValue) ? savedValue[0] : savedValue;\n      const match = OPTIONS.find(c => c.id === val);\n      if (match) {\n        selectedItem = val;\n      } else {\n        const matchByLabel = OPTIONS.find(c => c.label === val);\n        if (matchByLabel) selectedItem = matchByLabel.id;\n      }\n    }\n\n    renderList();\n\n    const labels = window.onboardingOnlineCustomScreenData.labels;\n    const lang = window.onboardingOnlineCustomScreenData.language;\n    if (labels && labels.title && labels.title.value.l10n[lang]) {\n      document.getElementById('title_label').textContent = labels.title.value.l10n[lang];\n    }\n  }\n\n  function renderList() {\n    const container = document.getElementById('list-container');\n    container.innerHTML = '';\n\n    OPTIONS.forEach(item => {\n      const isSelected = selectedItem === item.id;\n\n      const card = document.createElement('div');\n      card.className = `option-card${isSelected ? ' selected' : ''}`;\n      card.onclick = () => selectOption(item.id);\n\n      card.innerHTML = `\n        <span class=\"option-label\">${item.label}</span>\n        <img class=\"chevron\" src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564846956_icon-chevron-right.svg/origin.svg\" alt=\"\">\n      `;\n\n      container.appendChild(card);\n    });\n  }\n\n  function selectOption(id) {\n    selectedItem = id;\n    renderList();\n\n    const segmentlySDK = getSegmentlySDK();\n    if (segmentlySDK) {\n      segmentlySDK.trackEvent('UserUpdatedValue', {\n        screenName: 'past_success',\n        answer: selectedItem\n      });\n    }\n\n    setTimeout(() => {\n      window.leaveCustomScreen({\n        past_success: selectedItem\n      });\n    }, 300);\n  }\n</script>\n\n</body>\n</html>\n","callback":{"action":{"edges":[{"nextScreenId":"a75b0fb8-fc75-4ff6-81dd-7e4f48f8e3bb","transitionKind":"push","conditions":[]}],"kind":"advance"}}},"systemPrompt":null,"canvas":{"insets":{"top":0,"end":16,"bottom":0,"start":16},"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}},"header":{},"animated":true,"offlineFirst":true,"countdown":null},"screenType":"WebEmbed","tags":[],"name":"felt-easy","id":"4c55010e-6f81-46b9-93ef-cc021f811474","position":{"x":15149.333333333327,"y":-608}},"4eed9b00-380a-4a4b-aad9-bc349050cf61":{"content":{"header":{},"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"},"insets":{"top":0,"end":16,"bottom":0,"start":16}},"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>Empathy Dialog</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #f9fafb;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #f9fafb;\n      }\n    }\n\n    /* --- Content Wrapper (centered) --- */\n    .content-wrapper {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 0 32px;\n    }\n\n    /* --- Founder Avatar --- */\n    .founder-avatar {\n      width: 96px;\n      height: 96px;\n      border-radius: 9999px;\n      border: 4px solid #ffffff;\n      box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);\n      overflow: hidden;\n      flex-shrink: 0;\n      margin-bottom: 24px;\n      padding: 4px;\n      box-sizing: border-box;\n      background-color: transparent;\n    }\n    .founder-avatar img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      border-radius: 9999px;\n    }\n\n    /* --- Quote Icon --- */\n    .quote-icon {\n      width: 40px;\n      height: 40px;\n      opacity: 0.2;\n      margin-bottom: 16px;\n      flex-shrink: 0;\n    }\n    .quote-icon img {\n      width: 100%;\n      height: 100%;\n    }\n\n    /* --- Heading --- */\n    .empathy-title {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      color: #1a1a1a;\n      text-align: center;\n      margin: 0 0 16px 0;\n    }\n\n    /* --- Quote Text --- */\n    .quote-text {\n      font-size: 18px;\n      font-weight: 400;\n      line-height: 29px;\n      color: #374151;\n      text-align: center;\n      margin: 0;\n    }\n\n    /* --- Signature --- */\n    .signature {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #6b7280;\n      text-align: center;\n      margin-top: 24px;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      background-color: #ffffff;\n      border-top: 1px solid #f9fafb;\n      padding: 25px 24px 24px 24px;\n      flex-shrink: 0;\n    }\n    #action_button {\n      width: 100%;\n      padding: 16px 0;\n      box-sizing: border-box;\n      font-family: 'Lato', sans-serif;\n      font-size: 18px;\n      font-weight: 400;\n      border: none;\n      border-radius: 9999px;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      background-color: #ff2a6d;\n      color: #FFFFFF;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 10px 15px -3px #fbcfe8, 0px 4px 6px -4px #fbcfe8;\n    }\n    #action_button:hover {\n      opacity: 0.9;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"content-wrapper\">\n      <div class=\"founder-avatar\">\n        <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564767530_alison.png/origin.png\" alt=\"Alison, Founder\">\n      </div>\n\n      <div class=\"quote-icon\">\n        <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564767967_icon-quote-pink.svg/origin.svg\" alt=\"\">\n      </div>\n\n      <h2 class=\"empathy-title\" id=\"title_label\">You are not alone.</h2>\n\n      <p class=\"quote-text\" id=\"quote_text\">\"Every woman we work with has struggled with this. My job is to give you a system that works FOR you, not against you.\"</p>\n\n      <div class=\"signature\" id=\"signature_label\">— Alison, Founder</div>\n    </div>\n\n    <div class=\"footer\">\n      <button id=\"action_button\">Show Me My Future</button>\n    </div>\n\n  </div>\n\n  <script>\n    // ========================================================================\n    // --- OFFICIAL ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n    // ========================================================================\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: '',\n      screenId: ''\n    };\n    window.leaveCustomScreen = () => {};\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\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        runInitialSetup();\n      }\n    };\n\n    // Standalone fallback\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!window.onboardingOnlineCustomScreenData.screenId) {\n          console.log('Running in standalone mode');\n          runInitialSetup();\n        }\n      }, 100);\n    });\n\n    // ========================================================================\n    // --- SCREEN LOGIC ---\n    // ========================================================================\n\n    function runInitialSetup() {\n      console.log(\"Screen Initialized\");\n      addEventListeners();\n      updateLabels();\n    }\n\n    function addEventListeners() {\n      const button = document.getElementById('action_button');\n      if (button) {\n        button.addEventListener('click', () => {\n          window.leaveCustomScreen({});\n        });\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 titleElement = document.getElementById('title_label');\n      if (titleElement && labels.title?.value?.l10n?.[language]) {\n        titleElement.textContent = labels.title.value.l10n[language];\n      }\n\n      const buttonElement = document.getElementById('action_button');\n      if (buttonElement && labels.button_text?.value?.l10n?.[language]) {\n        buttonElement.textContent = labels.button_text.value.l10n[language];\n      }\n    }\n  </script>\n</body>\n</html>\n","callback":{"action":{"kind":"advance","edges":[{"conditions":[],"transitionKind":"push","nextScreenId":"6c9cf279-3118-47eb-b723-2eec65fc39ab"}]}}},"actionBar":{},"offlineFirst":true,"countdown":null,"animated":true},"screenType":"WebEmbed","tags":[],"id":"4eed9b00-380a-4a4b-aad9-bc349050cf61","name":"not-alone","position":{"y":-608,"x":13461.333333333328}},"52904422-f91f-4d72-86ac-43c4e2eb2e95":{"name":"wardrobe-transformation","id":"52904422-f91f-4d72-86ac-43c4e2eb2e95","position":{"y":-608,"x":2770.6666666666665},"content":{"header":{},"canvas":{"insets":{"bottom":0,"start":16,"top":0,"end":16},"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}},"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>Your Wardrobe Transformation</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #fff;\n      }\n    }\n\n    /* --- Header --- */\n    .header-section {\n      padding: 24px 24px 8px 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      flex-shrink: 0;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      margin: 0;\n      color: #1a1a1a;\n      text-align: center;\n    }\n    .subtitle {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #6b7280;\n      margin: 0;\n      text-align: center;\n    }\n\n    /* --- Timeline Container --- */\n    .timeline-container {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 16px 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 32px;\n      position: relative;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .timeline-container::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* Connecting line */\n    .timeline-container::before {\n      content: '';\n      position: absolute;\n      left: 43px;\n      top: 40px;\n      bottom: 40px;\n      width: 2px;\n      background-color: #e5e7eb;\n    }\n\n    /* --- Timeline Item --- */\n    .timeline-item {\n      display: flex;\n      gap: 16px;\n      align-items: flex-start;\n      position: relative;\n    }\n\n    .timeline-dot {\n      width: 40px;\n      height: 40px;\n      border-radius: 9999px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      position: relative;\n      z-index: 1;\n    }\n    .timeline-dot.start {\n      background: #ffffff;\n      border: 4px solid #ff2a6d;\n      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n    }\n    .timeline-dot.start span {\n      font-size: 10px;\n      font-weight: 400;\n      line-height: 15px;\n      color: #9ca3af;\n    }\n    .timeline-dot.pink {\n      background: #ff2a6d;\n      box-shadow: 0px 10px 15px -3px #fbcfe8, 0px 4px 6px -4px #fbcfe8;\n    }\n    .timeline-dot.dark {\n      background: #1a1a1a;\n      box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);\n    }\n    .timeline-dot svg {\n      width: 20px;\n      height: 20px;\n    }\n\n    .timeline-card {\n      flex: 1;\n      background: #ffffff;\n      border: 1px solid #f3f4f6;\n      border-radius: 12px;\n      padding: 17px;\n      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n    .timeline-card.highlight {\n      background: #fff0f5;\n      border-color: #fce7f3;\n    }\n\n    .card-week {\n      font-size: 12px;\n      font-weight: 400;\n      line-height: 16px;\n      color: #ff2a6d;\n      text-transform: uppercase;\n      letter-spacing: 0.6px;\n    }\n    .card-title {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #111827;\n    }\n    .card-desc {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #6b7280;\n    }\n    .timeline-card.highlight .card-desc {\n      color: #374151;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      border-top: 1px solid #f9fafb;\n      padding: 25px 24px 24px 24px;\n      flex-shrink: 0;\n    }\n    #action_button {\n      width: 100%;\n      padding: 16px 0;\n      box-sizing: border-box;\n      font-family: 'Lato', sans-serif;\n      font-size: 18px;\n      font-weight: 400;\n      border: none;\n      border-radius: 9999px;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      background-color: #ff2a6d;\n      color: #FFFFFF;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 10px 15px -3px #fbcfe8, 0px 4px 6px -4px #fbcfe8;\n    }\n    #action_button:hover {\n      opacity: 0.9;\n    }\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n\n  <div class=\"header-section\">\n    <h1 id=\"title_label\">Your Wardrobe Transformation</h1>\n    <p class=\"subtitle\" id=\"subtitle_label\">Based on your profile, here is your path.</p>\n  </div>\n\n  <div class=\"timeline-container\">\n    <div class=\"timeline-item\">\n      <div class=\"timeline-dot start\">\n        <span>START</span>\n      </div>\n      <div class=\"timeline-card\">\n        <div class=\"card-week\">Week 1</div>\n        <div class=\"card-title\">Master your closet basics</div>\n        <div class=\"card-desc\">Identify the gaps in your current wardrobe.</div>\n      </div>\n    </div>\n\n    <div class=\"timeline-item\">\n      <div class=\"timeline-dot pink\">\n        <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M16.6667 5L7.5 14.1667L3.33333 10\" stroke=\"white\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </div>\n      <div class=\"timeline-card\">\n        <div class=\"card-week\">Week 4</div>\n        <div class=\"card-title\">Confident outfit formulas daily</div>\n        <div class=\"card-desc\">Wake up and know exactly what to wear.</div>\n      </div>\n    </div>\n\n    <div class=\"timeline-item\">\n      <div class=\"timeline-dot pink\">\n        <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M9.60417 1.9125C9.67866 1.76199 9.83207 1.66676 10 1.66676C10.1679 1.66676 10.3213 1.76199 10.3958 1.9125L12.3208 5.81167C12.5779 6.3329 13.0749 6.69436 13.65 6.77833L17.955 7.40833C18.1214 7.43244 18.2597 7.54894 18.3117 7.70884C18.3637 7.86873 18.3204 8.04429 18.2 8.16167L15.0867 11.1933C14.6695 11.5993 14.479 12.1846 14.5775 12.7583L15.3125 17.0417C15.3419 17.208 15.2738 17.3766 15.1371 17.4758C15.0004 17.5751 14.8191 17.5877 14.67 17.5083L10.8217 15.485C10.307 15.2144 9.69216 15.2144 9.1775 15.485L5.33 17.5083C5.18095 17.5872 4.99997 17.5744 4.86358 17.4752C4.72719 17.376 4.65919 17.2078 4.68833 17.0417L5.4225 12.7592C5.52125 12.1852 5.33078 11.5994 4.91333 11.1933L1.8 8.1625C1.67859 8.04524 1.63463 7.86904 1.68673 7.70849C1.73883 7.54795 1.87787 7.43113 2.045 7.4075L6.34917 6.77833C6.92487 6.69487 7.4226 6.33334 7.68 5.81167L9.60417 1.9125\" stroke=\"white\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </div>\n      <div class=\"timeline-card\">\n        <div class=\"card-week\">Month 3</div>\n        <div class=\"card-title\">Shopping with strategy</div>\n        <div class=\"card-desc\">No more impulse buys. Only pieces that fit your plan.</div>\n      </div>\n    </div>\n\n    <div class=\"timeline-item\">\n      <div class=\"timeline-dot dark\">\n        <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M9.635 2.72167C9.70826 2.58861 9.84811 2.50596 10 2.50596C10.1519 2.50596 10.2917 2.58861 10.365 2.72167L12.825 7.39167C12.9438 7.61062 13.1543 7.76496 13.3988 7.81238C13.6434 7.85981 13.8963 7.79535 14.0883 7.63667L17.6525 4.58333C17.7929 4.46916 17.9909 4.45864 18.1426 4.55729C18.2943 4.65594 18.3649 4.84122 18.3175 5.01583L15.9558 13.5542C15.8568 13.9132 15.5316 14.1629 15.1592 14.1658H4.84167C4.46896 14.1632 4.1433 13.9135 4.04417 13.5542L1.68333 5.01667C1.63589 4.84205 1.70656 4.65677 1.85825 4.55812C2.00994 4.45947 2.20796 4.46999 2.34833 4.58417L5.91167 7.6375C6.10369 7.79618 6.35662 7.86064 6.60117 7.81322C6.84571 7.76579 7.05622 7.61146 7.175 7.3925L9.635 2.72167M4.16667 17.5H15.8333\" stroke=\"white\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </div>\n      <div class=\"timeline-card highlight\">\n        <div class=\"card-week\">Month 6</div>\n        <div class=\"card-title\">Getting dressed in 5 minutes</div>\n        <div class=\"card-desc\">Complete wardrobe freedom and confidence.</div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"footer\">\n    <button id=\"action_button\">Build My Plan</button>\n  </div>\n\n</div>\n\n<script>\n  // ========================================================================\n  // --- OFFICIAL ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n  // ========================================================================\n\n  window.onboardingOnlineCustomScreenData = {\n    inputs: {},\n    labels: {},\n    userData: {},\n    customData: {},\n    webOnboarding: {},\n    incomeUserData: {},\n    language: '',\n    screenId: ''\n  };\n  window.leaveCustomScreen = () => {};\n  window.backScreen = () => {};\n\n  window.onmessage = (event) => {\n    if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\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      runInitialSetup();\n    }\n  };\n\n  // Standalone fallback\n  window.addEventListener('DOMContentLoaded', () => {\n    setTimeout(() => {\n      if (!window.onboardingOnlineCustomScreenData.screenId) {\n        console.log('Running in standalone mode');\n        runInitialSetup();\n      }\n    }, 100);\n  });\n\n  // ========================================================================\n  // --- SCREEN LOGIC ---\n  // ========================================================================\n\n  function runInitialSetup() {\n    console.log(\"Screen Initialized\");\n    addEventListeners();\n    updateLabels();\n  }\n\n  function addEventListeners() {\n    let advanced = false;\n    const advance = (event) => {\n      if (advanced) return;\n      advanced = true;\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n      window.leaveCustomScreen({});\n    };\n\n    document.addEventListener('click', advance, true);\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 titleElement = document.getElementById('title_label');\n    if (titleElement && labels.title_label?.value?.l10n?.[language]) {\n      titleElement.textContent = labels.title_label.value.l10n[language];\n    }\n\n    const subtitleElement = document.getElementById('subtitle_label');\n    if (subtitleElement && labels.subtitle_label?.value?.l10n?.[language]) {\n      subtitleElement.textContent = labels.subtitle_label.value.l10n[language];\n    }\n\n    const buttonElement = document.getElementById('action_button');\n    if (buttonElement && labels.button_text?.value?.l10n?.[language]) {\n      buttonElement.textContent = labels.button_text.value.l10n[language];\n    }\n  }\n</script>\n\n</body>\n</html>\n","callback":{"action":{"edges":[{"conditions":[],"transitionKind":"push","nextScreenId":"1d544e3d-b40f-4157-b192-106693293150"}],"kind":"advance"}}},"actionBar":{},"offlineFirst":true,"countdown":null,"animated":true},"tags":[],"screenType":"WebEmbed"},"5a33f55e-dbce-473e-b882-9d5a42437244":{"id":"5a33f55e-dbce-473e-b882-9d5a42437244","name":"200k-women","position":{"x":17399.999999999993,"y":-608},"content":{"animated":true,"offlineFirst":true,"countdown":null,"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>Personalized 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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #1a1a1a;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow-y: auto;\n      overflow-x: hidden;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      position: relative;\n      background-color: #1a1a1a;\n    }\n    .screen-container::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #333;\n        overflow-y: auto;\n        overflow-x: hidden;\n        position: relative;\n      }\n    }\n\n    /* --- Image Grid --- */\n    .image-grid {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 30%;\n      opacity: 0.6;\n      display: grid;\n      grid-template-columns: 1fr 1fr 1fr;\n      grid-template-rows: 1fr 1fr;\n      overflow: hidden;\n    }\n    .image-grid img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n    }\n\n    /* --- Content Area --- */\n    .content-area {\n      position: absolute;\n      top: 23%;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      display: flex;\n      flex-direction: column;\n    }\n    .content-gradient {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      background: linear-gradient(\n        to bottom,\n        rgba(26, 26, 26, 0) 0%,\n        #1a1a1a 15%,\n        #1a1a1a 100%\n      );\n    }\n\n    /* --- Heart Icon --- */\n    .heart-icon {\n      width: 64px;\n      height: 64px;\n      border-radius: 9999px;\n      background-color: #ff2a6d;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      margin-bottom: 24px;\n      box-shadow: 0px 10px 15px -3px rgba(131, 24, 67, 0.5), 0px 4px 6px -4px rgba(131, 24, 67, 0.5);\n    }\n    .heart-icon img {\n      width: 30px;\n      height: 30px;\n    }\n\n    /* --- Title --- */\n    #title_label {\n      font-size: 30px;\n      font-weight: 400;\n      line-height: 36px;\n      margin: 0 0 16px 0;\n      color: #ffffff;\n      text-align: center;\n    }\n\n    /* --- Subtitle --- */\n    .subtitle {\n      font-size: 20px;\n      font-weight: 400;\n      line-height: 28px;\n      color: #d1d5db;\n      margin: 0 0 32px 0;\n      text-align: center;\n    }\n\n    /* --- Testimonial Card --- */\n    .testimonial-card {\n      width: 100%;\n      background: rgba(255, 255, 255, 0.1);\n      border: 1px solid rgba(255, 255, 255, 0.2);\n      border-radius: 12px;\n      padding: 17px;\n      box-sizing: border-box;\n      backdrop-filter: blur(6px);\n      -webkit-backdrop-filter: blur(6px);\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n    .testimonial-header {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n    .stars {\n      display: flex;\n      gap: 0;\n    }\n    .stars img {\n      width: 14px;\n      height: 14px;\n    }\n    .reviewer-name {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #ffffff;\n    }\n    .testimonial-text {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #d1d5db;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      background-color: #1a1a1a;\n      padding: 24px 24px 40px 24px;\n      flex-shrink: 0;\n    }\n    #action_button {\n      width: 100%;\n      padding: 16px 0;\n      box-sizing: border-box;\n      font-family: 'Lato', sans-serif;\n      font-size: 18px;\n      font-weight: 400;\n      border: none;\n      border-radius: 9999px;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      background-color: #ffffff;\n      color: #1a1a1a;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);\n    }\n    #action_button:hover {\n      opacity: 0.9;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"image-grid\">\n      <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772649711146_grid-woman-1.png/origin.png\" alt=\"\">\n      <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772649711554_grid-woman-2.png/origin.png\" alt=\"\">\n      <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772649711943_grid-woman-3.png/origin.png\" alt=\"\">\n      <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772649712335_grid-woman-4.png/origin.png\" alt=\"\">\n      <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772649712721_grid-woman-5.png/origin.png\" alt=\"\">\n      <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772649713051_grid-woman-6.png/origin.png\" alt=\"\">\n    </div>\n\n    <div class=\"content-area\">\n      <div class=\"content-gradient\">\n        <div class=\"heart-icon\">\n          <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772649713417_icon-heart-white.svg/origin.svg\" alt=\"\">\n        </div>\n\n        <h1 id=\"title_label\">Join 200,000+ women</h1>\n\n        <p class=\"subtitle\" id=\"subtitle_label\">...in their 40s who are already getting dressed with confidence every single day.</p>\n\n        <div class=\"testimonial-card\">\n          <div class=\"testimonial-header\">\n            <div class=\"stars\">\n              <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772649713747_icon-star-pink.svg/origin.svg\" alt=\"\">\n              <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772649713747_icon-star-pink.svg/origin.svg\" alt=\"\">\n              <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772649713747_icon-star-pink.svg/origin.svg\" alt=\"\">\n              <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772649713747_icon-star-pink.svg/origin.svg\" alt=\"\">\n              <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772649713747_icon-star-pink.svg/origin.svg\" alt=\"\">\n            </div>\n            <span class=\"reviewer-name\">Sarah, 42</span>\n          </div>\n          <div class=\"testimonial-text\">\"I finally feel like myself again. This system changed everything.\"</div>\n        </div>\n      </div>\n\n      <div class=\"footer\">\n        <button id=\"action_button\">Join The Community</button>\n      </div>\n    </div>\n\n  </div>\n\n  <script>\n    // ========================================================================\n    // --- OFFICIAL ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n    // ========================================================================\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: '',\n      screenId: ''\n    };\n    window.leaveCustomScreen = () => {};\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\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        runInitialSetup();\n      }\n    };\n\n    // Standalone fallback\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!window.onboardingOnlineCustomScreenData.screenId) {\n          console.log('Running in standalone mode');\n          runInitialSetup();\n        }\n      }, 100);\n    });\n\n    // ========================================================================\n    // --- SCREEN LOGIC ---\n    // ========================================================================\n\n    const AGE_DECADE = {\n      '25_34': '20s',\n      '35_44': '30s',\n      '45_54': '40s',\n      '55_PLUS': '50s and beyond'\n    };\n\n    function getUserValue(key) {\n      const income = window.onboardingOnlineCustomScreenData.incomeUserData || {};\n      if (income[key]) return income[key];\n      const userData = window.onboardingOnlineCustomScreenData.userData;\n      if (userData) {\n        for (const screenId in userData) {\n          const screenData = userData[screenId];\n          if (screenData && screenData[key]) return screenData[key];\n          if (screenData && screenData[\"input['\" + key + \"']\"]) return screenData[\"input['\" + key + \"']\"];\n        }\n      }\n      return null;\n    }\n\n    function populateSubtitle() {\n      const decade = AGE_DECADE[getUserValue('age_group')] || '40s';\n      const el = document.getElementById('subtitle_label');\n      if (el) {\n        el.textContent = '...in their ' + decade + ' who are already getting dressed with confidence every single day.';\n      }\n    }\n\n    function runInitialSetup() {\n      console.log(\"Screen Initialized\");\n      populateSubtitle();\n      addEventListeners();\n      updateLabels();\n    }\n\n    function addEventListeners() {\n      const button = document.getElementById('action_button');\n      if (button) {\n        button.addEventListener('click', () => {\n          if (button.disabled) return;\n          button.disabled = true;\n          window.leaveCustomScreen({});\n        });\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 titleElement = document.getElementById('title_label');\n      if (titleElement && labels.title?.value?.l10n?.[language]) {\n        titleElement.textContent = labels.title.value.l10n[language];\n      }\n\n      const buttonElement = document.getElementById('action_button');\n      if (buttonElement && labels.button_text?.value?.l10n?.[language]) {\n        buttonElement.textContent = labels.button_text.value.l10n[language];\n      }\n    }\n  </script>\n</body>\n</html>\n","callback":{"action":{"edges":[{"nextScreenId":"d717f8eb-ebea-46d3-933a-0fc555129b93","transitionKind":"push","conditions":[]}],"kind":"advance"}}},"systemPrompt":null,"header":{},"canvas":{"insets":{"start":16,"bottom":0,"end":16,"top":0},"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}}},"tags":[],"screenType":"WebEmbed"},"6638aad9-4c61-440b-85fc-c6a66e44f2d2":{"id":"6638aad9-4c61-440b-85fc-c6a66e44f2d2","name":"closet-feels","position":{"y":-608,"x":3895.9999999999995},"content":{"animated":true,"countdown":null,"offlineFirst":true,"actionBar":{},"embed":{"callback":{"action":{"edges":[{"conditions":[],"transitionKind":"push","nextScreenId":"2480556f-6d12-43f8-8102-aafd23637562"}],"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>Dressing Feeling</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #fff;\n      }\n    }\n\n    /* --- Progress Bar (kept as-is) --- */\n    .progress-container {\n      display: flex;\n      align-items: center;\n      padding: 27px 32px 0px 20px;\n      margin-bottom: 30px;\n    }\n    .back-btn {\n      background: none;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 25px;\n    }\n    .back-btn svg {\n      width: 24px;\n      height: 24px;\n      color: #9CA3AF;\n    }\n    .progress-bar-bg {\n      flex: 1;\n      height: 6px;\n      background-color: #E5E5EB;\n      border-radius: 3px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      background-color: #F5326D;\n      border-radius: 3px;\n    }\n\n    /* --- Header --- */\n    .header-section {\n      padding: 0 24px;\n      margin-bottom: 24px;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      margin: 0 0 8px 0;\n      color: #1a1a1a;\n      text-align: left;\n    }\n    .subtitle {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #6b7280;\n      margin: 0;\n      text-align: left;\n    }\n\n    /* --- Options Container --- */\n    .options-container {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 0 24px 32px 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .options-container::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* --- Option Card --- */\n    .option-card {\n      background: #ffffff;\n      border: 1px solid #e5e7eb;\n      border-radius: 16px;\n      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n      padding: 20px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      flex-shrink: 0;\n    }\n    .option-card.selected {\n      border-color: #ff2a6d;\n      background-color: #fff0f5;\n    }\n\n    .option-top {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      margin-bottom: 8px;\n    }\n    .option-emoji {\n      font-size: 24px;\n      line-height: 32px;\n    }\n    .radio-indicator {\n      width: 20px;\n      height: 20px;\n      border-radius: 9999px;\n      border: 2px solid #d1d5db;\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-sizing: border-box;\n      transition: border-color 0.2s;\n    }\n    .radio-indicator .radio-dot {\n      width: 10px;\n      height: 10px;\n      border-radius: 9999px;\n      background-color: #ff2a6d;\n      opacity: 0;\n      transition: opacity 0.2s;\n    }\n    .option-card.selected .radio-indicator {\n      border-color: #ff2a6d;\n    }\n    .option-card.selected .radio-dot {\n      opacity: 1;\n    }\n\n    .option-title {\n      font-size: 18px;\n      font-weight: 400;\n      line-height: 28px;\n      color: #1f2937;\n      margin-bottom: 4px;\n    }\n    .option-desc {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #6b7280;\n    }\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n\n  <div class=\"progress-container\">\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\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 19L5 12L12 5M19 12H5\" />\n      </svg>\n    </button>\n    <div class=\"progress-bar-bg\">\n      <div class=\"progress-bar-fill\" style=\"width: 17%;\"></div>\n    </div>\n  </div>\n\n  <div class=\"header-section\">\n    <h1 id=\"title_label\">How does your closet feel right now?</h1>\n    <p class=\"subtitle\" id=\"subtitle_label\">Be honest. This helps us customize your starting point.</p>\n  </div>\n\n  <div class=\"options-container\" id=\"list-container\"></div>\n\n</div>\n\n<script>\n  // --- 1. Environment Detection & Communication Setup ---\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('Selected dressing feeling:', 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  // --- 2. Screen Logic ---\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  const OPTIONS = [\n    { id: 'DECISION_FATIGUE', emoji: '😫', title: 'Closet full of clothes, nothing to wear', desc: 'I have tons of items but can never make an outfit.' },\n    { id: 'REPEAT_CYCLE', emoji: '🔄', title: 'Same 3 outfits on repeat', desc: \"I found what works and I'm scared to deviate.\" },\n    { id: 'IMPULSE_BUYS', emoji: '🏷️', title: \"Impulse buys that don't match\", desc: \"Lots of cute individual pieces that don't go together.\" },\n    { id: 'LOST_MY_WAY', emoji: '🤷‍♀️', title: 'Used to know, but lost my way', desc: \"My body or lifestyle changed and I haven't caught up.\" }\n  ];\n\n  let selectedItem = null;\n\n  function initScreen() {\n    let savedValue = null;\n\n    if (window.onboardingOnlineCustomScreenData.inputs && window.onboardingOnlineCustomScreenData.inputs.dressing_feeling) {\n      const inputData = window.onboardingOnlineCustomScreenData.inputs.dressing_feeling;\n      if (inputData && typeof inputData === 'object' && 'value' in inputData) {\n        savedValue = inputData.value;\n      } else {\n        savedValue = inputData;\n      }\n    }\n\n    if (!savedValue) {\n      const userData = window.onboardingOnlineCustomScreenData.userData;\n      if (userData) {\n        for (const screenId in userData) {\n          const screenData = userData[screenId];\n          if (screenData) {\n            if (screenData[\"dressing_feeling\"]) {\n              savedValue = screenData[\"dressing_feeling\"];\n              break;\n            }\n            if (screenData[\"input['dressing_feeling']\"]) {\n              savedValue = screenData[\"input['dressing_feeling']\"];\n              break;\n            }\n          }\n        }\n      }\n    }\n\n    if (savedValue) {\n      const val = Array.isArray(savedValue) ? savedValue[0] : savedValue;\n      const match = OPTIONS.find(c => c.id === val);\n      if (match) {\n        selectedItem = val;\n      } else {\n        const matchByTitle = OPTIONS.find(c => c.title === val);\n        if (matchByTitle) selectedItem = matchByTitle.id;\n      }\n    }\n\n    renderList();\n\n    const labels = window.onboardingOnlineCustomScreenData.labels;\n    const lang = window.onboardingOnlineCustomScreenData.language;\n    if (labels && labels.title && labels.title.value.l10n[lang]) {\n      document.getElementById('title_label').textContent = labels.title.value.l10n[lang];\n    }\n  }\n\n  function renderList() {\n    const container = document.getElementById('list-container');\n    container.innerHTML = '';\n\n    OPTIONS.forEach(item => {\n      const isSelected = selectedItem === item.id;\n\n      const card = document.createElement('div');\n      card.className = `option-card${isSelected ? ' selected' : ''}`;\n      card.onclick = () => selectOption(item.id);\n\n      card.innerHTML = `\n        <div class=\"option-top\">\n          <span class=\"option-emoji\">${item.emoji}</span>\n          <div class=\"radio-indicator\">\n            <div class=\"radio-dot\"></div>\n          </div>\n        </div>\n        <div class=\"option-title\">${item.title}</div>\n        <div class=\"option-desc\">${item.desc}</div>\n      `;\n\n      container.appendChild(card);\n    });\n  }\n\n  function selectOption(id) {\n    selectedItem = id;\n    renderList();\n\n    const segmentlySDK = getSegmentlySDK();\n    if (segmentlySDK) {\n      segmentlySDK.trackEvent('UserUpdatedValue', {\n        screenName: 'dressing_feeling',\n        answer: selectedItem\n      });\n    }\n\n    setTimeout(() => {\n      window.leaveCustomScreen({\n        dressing_feeling: selectedItem\n      });\n    }, 300);\n  }\n</script>\n\n</body>\n</html>\n"},"systemPrompt":null,"canvas":{"insets":{"end":16,"top":0,"start":16,"bottom":0},"background":{"kind":"solid","content":{"color":"#f8fbfb"}}},"header":{}},"tags":[],"screenType":"WebEmbed"},"6c9cf279-3118-47eb-b723-2eec65fc39ab":{"screenType":"WebEmbed","tags":[],"content":{"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>Ideal Morning</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #ffffff;\n      }\n    }\n\n    /* --- Hero Image Section --- */\n    .hero-section {\n      position: relative;\n      width: 100%;\n      flex: 1;\n      min-height: 0;\n      overflow: hidden;\n    }\n    .hero-image {\n      position: absolute;\n      inset: 0;\n      overflow: hidden;\n    }\n    .hero-image img {\n      width: 108%;\n      height: 100%;\n      object-fit: cover;\n      margin-left: -4%;\n    }\n    .hero-gradient {\n      position: absolute;\n      inset: 0;\n      background: linear-gradient(\n        to top,\n        #ffffff 0%,\n        rgba(255, 255, 255, 0.1) 50%,\n        rgba(255, 255, 255, 0) 100%\n      );\n    }\n\n    /* --- Content Area --- */\n    .content-area {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 32px 32px 32px;\n    }\n\n    .text-content {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .headline {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 30px;\n      color: #1a1a1a;\n      text-align: center;\n      margin: 0 0 16px 0;\n    }\n\n    .description {\n      font-size: 18px;\n      font-weight: 400;\n      line-height: 29px;\n      color: #4b5563;\n      text-align: center;\n      margin: 0 0 24px 0;\n    }\n\n    .outcome-label {\n      font-size: 12px;\n      font-weight: 400;\n      line-height: 16px;\n      color: #ff2a6d;\n      text-align: center;\n      text-transform: uppercase;\n      letter-spacing: 1.2px;\n      margin: 0 0 8px 0;\n    }\n\n    .outcome-question {\n      font-size: 20px;\n      font-weight: 400;\n      line-height: 28px;\n      color: #111827;\n      text-align: center;\n      margin: 0;\n    }\n\n    /* --- CTA Button --- */\n    #action_button {\n      width: 100%;\n      padding: 16px 0;\n      box-sizing: border-box;\n      font-family: 'Lato', sans-serif;\n      font-size: 18px;\n      font-weight: 400;\n      border: none;\n      border-radius: 9999px;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      background-color: #ff2a6d;\n      color: #FFFFFF;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      box-shadow: 0px 10px 15px -3px #fbcfe8, 0px 4px 6px -4px #fbcfe8;\n      flex-shrink: 0;\n      margin-top: 24px;\n    }\n    #action_button:hover {\n      opacity: 0.9;\n    }\n    #action_button img {\n      width: 18px;\n      height: 18px;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"hero-section\">\n      <div class=\"hero-image\">\n        <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564793776_hero-ideal-morning.png/origin.png\" alt=\"\" decoding=\"async\" fetchpriority=\"high\">\n      </div>\n      <div class=\"hero-gradient\"></div>\n    </div>\n\n    <div class=\"content-area\">\n      <div class=\"text-content\">\n        <h1 class=\"headline\" id=\"title_label\">Imagine getting dressed in 5 minutes...</h1>\n        <p class=\"description\" id=\"desc_label\">...feeling completely confident, and never second-guessing your outfit again.</p>\n        <p class=\"outcome-label\">The Outcome</p>\n        <p class=\"outcome-question\" id=\"question_label\">How would that change your day?</p>\n      </div>\n\n      <button id=\"action_button\">\n        It would change everything\n        <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564794152_icon-arrow-right.svg/origin.svg\" alt=\"\">\n      </button>\n    </div>\n\n  </div>\n\n  <script>\n    // ========================================================================\n    // --- OFFICIAL ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n    // ========================================================================\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: '',\n      screenId: ''\n    };\n    window.leaveCustomScreen = () => {};\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\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        runInitialSetup();\n      }\n    };\n\n    // Standalone fallback\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!window.onboardingOnlineCustomScreenData.screenId) {\n          console.log('Running in standalone mode');\n          runInitialSetup();\n        }\n      }, 100);\n    });\n\n    // ========================================================================\n    // --- SCREEN LOGIC ---\n    // ========================================================================\n\n    function runInitialSetup() {\n      console.log(\"Screen Initialized\");\n      addEventListeners();\n      updateLabels();\n    }\n\n    function addEventListeners() {\n      const button = document.getElementById('action_button');\n      if (button) {\n        button.addEventListener('click', () => {\n          window.leaveCustomScreen({});\n        });\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 titleElement = document.getElementById('title_label');\n      if (titleElement && labels.title?.value?.l10n?.[language]) {\n        titleElement.textContent = labels.title.value.l10n[language];\n      }\n\n      const buttonElement = document.getElementById('action_button');\n      if (buttonElement && labels.button_text?.value?.l10n?.[language]) {\n        buttonElement.textContent = labels.button_text.value.l10n[language];\n      }\n    }\n  </script>\n</body>\n</html>\n","callback":{"action":{"edges":[{"transitionKind":"push","nextScreenId":"edee1fbe-76ac-4f0a-b986-d195a4ecb37a","conditions":[]}],"kind":"advance"}}},"systemPrompt":null,"canvas":{"insets":{"start":16,"bottom":0,"end":16,"top":0},"background":{"kind":"solid","content":{"color":"#f8fbfb"}}},"header":{},"animated":true,"offlineFirst":true,"countdown":null},"position":{"y":-608,"x":14023.999999999995},"id":"6c9cf279-3118-47eb-b723-2eec65fc39ab","name":"imagine-5-minutes"},"6ee1de9a-132b-4c01-b484-513c754d2827":{"screenType":"WebEmbed","tags":[],"content":{"actionBar":{},"embed":{"callback":{"action":{"edges":[{"conditions":[],"transitionKind":"push","nextScreenId":"b1c8813f-46c5-4e87-bde7-f37122d7c769"}],"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>Main Frustration</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #fff;\n      }\n    }\n\n    /* --- Progress Bar --- */\n    .progress-container {\n      display: flex;\n      align-items: center;\n      padding: 27px 32px 0px 20px;\n      margin-bottom: 30px;\n    }\n    .back-btn {\n      background: none;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 25px;\n    }\n    .back-btn svg {\n      width: 24px;\n      height: 24px;\n      color: #9CA3AF;\n    }\n    .progress-bar-bg {\n      flex: 1;\n      height: 6px;\n      background-color: #E5E5EB;\n      border-radius: 3px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      background-color: #F5326D;\n      border-radius: 3px;\n    }\n\n    /* --- Header --- */\n    .header-section {\n      padding: 0 24px;\n      margin-bottom: 24px;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      margin: 0 0 8px 0;\n      color: #1a1a1a;\n      text-align: left;\n    }\n    .subtitle {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #6b7280;\n      margin: 0;\n      text-align: left;\n    }\n\n    /* --- Options Container --- */\n    .options-container {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 0 24px 32px 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .options-container::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* --- Option Card --- */\n    .option-card {\n      background: #ffffff;\n      border: 1px solid #e5e7eb;\n      border-radius: 12px;\n      padding: 17px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n    .option-card.selected {\n      border-color: #ff2a6d;\n      background-color: #fff0f5;\n    }\n\n    .emoji-circle {\n      width: 40px;\n      height: 40px;\n      border-radius: 9999px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      font-size: 20px;\n      line-height: 28px;\n    }\n\n    .option-text {\n      flex: 1;\n      min-width: 0;\n    }\n    .option-title {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #1f2937;\n    }\n    .option-desc {\n      font-size: 12px;\n      font-weight: 400;\n      line-height: 16px;\n      color: #6b7280;\n      margin-top: 2px;\n    }\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n\n  <div class=\"progress-container\">\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\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 19L5 12L12 5M19 12H5\" />\n      </svg>\n    </button>\n    <div class=\"progress-bar-bg\">\n      <div class=\"progress-bar-fill\" style=\"width: 22%;\"></div>\n    </div>\n  </div>\n\n  <div class=\"header-section\">\n    <h1 id=\"title_label\">What's the hardest part about getting dressed?</h1>\n    <p class=\"subtitle\" id=\"subtitle_label\">We'll prioritize solving this first.</p>\n  </div>\n\n  <div class=\"options-container\" id=\"list-container\"></div>\n\n</div>\n\n<script>\n  // --- 1. Environment Detection & Communication Setup ---\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('Selected frustration:', 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  // --- 2. Screen Logic ---\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  const OPTIONS = [\n    { id: 'FEELING_STUCK', emoji: '😞', bg: '#ffedd5', title: 'Feeling stuck & uninspired', desc: 'Staring at a full closet with \"nothing to wear\"' },\n    { id: 'RUNNING_LATE', emoji: '⏰', bg: '#fee2e2', title: 'Frantically running late', desc: 'Trying on 5 outfits before leaving the house' },\n    { id: 'AVOIDING_EVENTS', emoji: '🙈', bg: '#f3e8ff', title: 'Avoiding social events', desc: \"Staying home because I don't feel good in clothes\" },\n    { id: 'FEELING_INVISIBLE', emoji: '🌫️', bg: '#f3f4f6', title: 'Feeling invisible or frumpy', desc: 'Just grabbing whatever is clean and comfortable' }\n  ];\n\n  let selectedItem = null;\n\n  function initScreen() {\n    let savedValue = null;\n\n    if (window.onboardingOnlineCustomScreenData.inputs && window.onboardingOnlineCustomScreenData.inputs.main_frustration) {\n      const inputData = window.onboardingOnlineCustomScreenData.inputs.main_frustration;\n      if (inputData && typeof inputData === 'object' && 'value' in inputData) {\n        savedValue = inputData.value;\n      } else {\n        savedValue = inputData;\n      }\n    }\n\n    if (!savedValue) {\n      const userData = window.onboardingOnlineCustomScreenData.userData;\n      if (userData) {\n        for (const screenId in userData) {\n          const screenData = userData[screenId];\n          if (screenData) {\n            if (screenData[\"main_frustration\"]) {\n              savedValue = screenData[\"main_frustration\"];\n              break;\n            }\n            if (screenData[\"input['main_frustration']\"]) {\n              savedValue = screenData[\"input['main_frustration']\"];\n              break;\n            }\n          }\n        }\n      }\n    }\n\n    if (savedValue) {\n      const val = Array.isArray(savedValue) ? savedValue[0] : savedValue;\n      const match = OPTIONS.find(c => c.id === val);\n      if (match) {\n        selectedItem = val;\n      } else {\n        const matchByTitle = OPTIONS.find(c => c.title === val);\n        if (matchByTitle) selectedItem = matchByTitle.id;\n      }\n    }\n\n    renderList();\n\n    const labels = window.onboardingOnlineCustomScreenData.labels;\n    const lang = window.onboardingOnlineCustomScreenData.language;\n    if (labels && labels.title && labels.title.value.l10n[lang]) {\n      document.getElementById('title_label').textContent = labels.title.value.l10n[lang];\n    }\n  }\n\n  function renderList() {\n    const container = document.getElementById('list-container');\n    container.innerHTML = '';\n\n    OPTIONS.forEach(item => {\n      const isSelected = selectedItem === item.id;\n\n      const card = document.createElement('div');\n      card.className = `option-card${isSelected ? ' selected' : ''}`;\n      card.onclick = () => selectOption(item.id);\n\n      card.innerHTML = `\n        <div class=\"emoji-circle\" style=\"background-color: ${item.bg};\">\n          ${item.emoji}\n        </div>\n        <div class=\"option-text\">\n          <div class=\"option-title\">${item.title}</div>\n          <div class=\"option-desc\">${item.desc}</div>\n        </div>\n      `;\n\n      container.appendChild(card);\n    });\n  }\n\n  function selectOption(id) {\n    selectedItem = id;\n    renderList();\n\n    const segmentlySDK = getSegmentlySDK();\n    if (segmentlySDK) {\n      segmentlySDK.trackEvent('UserUpdatedValue', {\n        screenName: 'main_frustration',\n        answer: selectedItem\n      });\n    }\n\n    setTimeout(() => {\n      window.leaveCustomScreen({\n        main_frustration: selectedItem\n      });\n    }, 300);\n  }\n</script>\n\n</body>\n</html>\n"},"systemPrompt":null,"header":{},"canvas":{"insets":{"start":16,"bottom":0,"end":16,"top":0},"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}},"animated":true,"offlineFirst":true,"countdown":null},"position":{"y":-608,"x":5021.333333333333},"id":"6ee1de9a-132b-4c01-b484-513c754d2827","name":"hardest-part"},"7f4b84af-1fa2-4f84-a49e-8dc171bcb930":{"position":{"y":-608,"x":12898.666666666662},"name":"sound-familiar","id":"7f4b84af-1fa2-4f84-a49e-8dc171bcb930","screenType":"WebEmbed","tags":[],"content":{"animated":true,"offlineFirst":true,"countdown":null,"actionBar":{},"embed":{"callback":{"action":{"edges":[{"nextScreenId":"4eed9b00-380a-4a4b-aad9-bc349050cf61","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>Wardrobe Habits</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #fff;\n      }\n    }\n\n    /* --- Progress Bar --- */\n    .progress-container {\n      display: flex;\n      align-items: center;\n      padding: 27px 32px 0px 20px;\n      margin-bottom: 16px;\n    }\n    .back-btn {\n      background: none;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 25px;\n    }\n    .back-btn svg {\n      width: 24px;\n      height: 24px;\n      color: #9CA3AF;\n    }\n    .progress-bar-bg {\n      flex: 1;\n      height: 6px;\n      background-color: #E5E5EB;\n      border-radius: 3px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      background-color: #F5326D;\n      border-radius: 3px;\n    }\n\n    /* --- Header --- */\n    .header-section {\n      padding: 16px 24px;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      margin: 0 0 8px 0;\n      color: #1a1a1a;\n      text-align: left;\n    }\n    .subtitle {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #6b7280;\n      margin: 0;\n      text-align: left;\n    }\n\n    /* --- Options Container --- */\n    .options-container {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 0 24px 32px 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .options-container::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* --- Option Card --- */\n    .option-card {\n      border: 1px solid #e5e7eb;\n      border-radius: 12px;\n      padding: 17px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n    .option-card.selected {\n      border-color: #ff2a6d;\n      background-color: #fff0f5;\n    }\n\n    /* --- Checkbox --- */\n    .checkbox {\n      width: 20px;\n      height: 20px;\n      border-radius: 4px;\n      border: 1px solid #d1d5db;\n      background: #ffffff;\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-sizing: border-box;\n      transition: all 0.2s;\n    }\n    .option-card.selected .checkbox {\n      border-color: #ff2a6d;\n      background-color: #ff2a6d;\n    }\n    .checkbox svg {\n      width: 16px;\n      height: 16px;\n      opacity: 0;\n      transition: opacity 0.2s;\n    }\n    .option-card.selected .checkbox svg {\n      opacity: 1;\n    }\n\n    .option-label {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #374151;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      border-top: 1px solid #f9fafb;\n      padding: 25px 24px 24px 24px;\n      flex-shrink: 0;\n    }\n    #continue-btn {\n      width: 100%;\n      padding: 16px 0;\n      box-sizing: border-box;\n      font-family: 'Lato', sans-serif;\n      font-size: 18px;\n      font-weight: 400;\n      border: none;\n      border-radius: 9999px;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      background-color: #ff2a6d;\n      color: #FFFFFF;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 10px 15px -3px #fbcfe8, 0px 4px 6px -4px #fbcfe8;\n      opacity: 0.5;\n      pointer-events: none;\n    }\n    #continue-btn.active {\n      opacity: 1;\n      pointer-events: auto;\n    }\n    #continue-btn:hover.active {\n      opacity: 0.9;\n    }\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n\n  <div class=\"progress-container\">\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\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 19L5 12L12 5M19 12H5\" />\n      </svg>\n    </button>\n    <div class=\"progress-bar-bg\">\n      <div class=\"progress-bar-fill\" style=\"width: 61%;\"></div>\n    </div>\n  </div>\n\n  <div class=\"header-section\">\n    <h1 id=\"title_label\">Do any of these sound familiar?</h1>\n    <p class=\"subtitle\" id=\"subtitle_label\">Select all that apply. It's safe with us.</p>\n  </div>\n\n  <div class=\"options-container\" id=\"list-container\"></div>\n\n  <div class=\"footer\">\n    <button id=\"continue-btn\" onclick=\"handleContinue()\">That's Me</button>\n  </div>\n\n</div>\n\n<script>\n  // --- 1. Environment Detection & Communication Setup ---\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('Selected wardrobe habits:', 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  // --- 2. Screen Logic ---\n\n  function handleBack() {\n    window.backScreen();\n  }\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  const OPTIONS = [\n    { id: 'IMPULSE_BUY', label: 'I buy on impulse, then regret it later' },\n    { id: 'HOLD_JUST_IN_CASE', label: 'I hold onto clothes \"just in case\"' },\n    { id: 'SAFE_BORING', label: 'I stick to safe, boring choices' },\n    { id: 'NO_MATCHING', label: 'I never know what matches what' }\n  ];\n\n  let selectedItems = [];\n\n  function initScreen() {\n    let savedValue = null;\n\n    if (window.onboardingOnlineCustomScreenData.inputs && window.onboardingOnlineCustomScreenData.inputs.wardrobe_habits) {\n      const inputData = window.onboardingOnlineCustomScreenData.inputs.wardrobe_habits;\n      if (inputData && typeof inputData === 'object' && 'value' in inputData) {\n        savedValue = inputData.value;\n      } else {\n        savedValue = inputData;\n      }\n    }\n\n    if (!savedValue) {\n      const userData = window.onboardingOnlineCustomScreenData.userData;\n      if (userData) {\n        for (const screenId in userData) {\n          const screenData = userData[screenId];\n          if (screenData) {\n            if (screenData[\"wardrobe_habits\"]) {\n              savedValue = screenData[\"wardrobe_habits\"];\n              break;\n            }\n            if (screenData[\"input['wardrobe_habits']\"]) {\n              savedValue = screenData[\"input['wardrobe_habits']\"];\n              break;\n            }\n          }\n        }\n      }\n    }\n\n    if (savedValue) {\n      if (typeof savedValue === 'string') {\n        selectedItems = savedValue.split(',').filter(g => g.trim());\n      } else if (Array.isArray(savedValue)) {\n        selectedItems = savedValue;\n      } else if (typeof savedValue === 'object') {\n        selectedItems = Object.values(savedValue).filter(g => g);\n      }\n    }\n\n    renderList();\n\n    const labels = window.onboardingOnlineCustomScreenData.labels;\n    const lang = window.onboardingOnlineCustomScreenData.language;\n    if (labels && labels.title && labels.title.value.l10n[lang]) {\n      document.getElementById('title_label').textContent = labels.title.value.l10n[lang];\n    }\n  }\n\n  function renderList() {\n    const container = document.getElementById('list-container');\n    container.innerHTML = '';\n\n    OPTIONS.forEach(item => {\n      const isSelected = selectedItems.includes(item.id);\n\n      const card = document.createElement('div');\n      card.className = `option-card${isSelected ? ' selected' : ''}`;\n      card.onclick = () => toggleSelection(item.id);\n\n      card.innerHTML = `\n        <div class=\"checkbox\">\n          <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M13.3333 4L6 11.3333L2.66667 8\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <span class=\"option-label\">${item.label}</span>\n      `;\n\n      container.appendChild(card);\n    });\n\n    updateButtonState();\n  }\n\n  function toggleSelection(id) {\n    if (selectedItems.includes(id)) {\n      selectedItems = selectedItems.filter(item => item !== id);\n    } else {\n      selectedItems.push(id);\n    }\n    renderList();\n  }\n\n  function updateButtonState() {\n    const btn = document.getElementById('continue-btn');\n    if (selectedItems.length > 0) {\n      btn.classList.add('active');\n    } else {\n      btn.classList.remove('active');\n    }\n  }\n\n  function handleContinue() {\n    const segmentlySDK = getSegmentlySDK();\n    if (segmentlySDK) {\n      segmentlySDK.trackEvent('UserUpdatedValue', {\n        screenName: 'wardrobe_habits',\n        answers: selectedItems\n      });\n    }\n\n    window.leaveCustomScreen({\n      wardrobe_habits: selectedItems.join(',')\n    });\n  }\n</script>\n\n</body>\n</html>\n"},"systemPrompt":null,"canvas":{"background":{"kind":"solid","content":{"color":"#f8fbfb"}},"insets":{"top":0,"end":16,"bottom":0,"start":16}},"header":{}}},"808c8c8a-44dd-4cf0-b110-aeee9765d5b2":{"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>Profile Summary</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #f9fafb;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      background-color: #f9fafb;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    /* --- Header --- */\n    .header-section {\n      background-color: #ffffff;\n      padding: 32px 24px 16px 24px;\n      flex-shrink: 0;\n      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      margin: 0;\n      color: #1a1a1a;\n      text-align: left;\n    }\n    .subtitle {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #6b7280;\n      margin: 0;\n      text-align: left;\n    }\n\n    /* --- Scrollable Cards --- */\n    .cards-container {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 16px 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .cards-container::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* --- Summary Card --- */\n    .summary-card {\n      background-color: #ffffff;\n      border: 1px solid #f3f4f6;\n      border-radius: 16px;\n      padding: 21px;\n      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n      display: flex;\n      gap: 16px;\n      align-items: flex-start;\n      flex-shrink: 0;\n    }\n    .card-icon {\n      width: 40px;\n      height: 40px;\n      border-radius: 9999px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n    .card-icon img {\n      width: 20px;\n      height: 20px;\n    }\n    .card-content {\n      flex: 1;\n      min-width: 0;\n    }\n    .card-label {\n      font-size: 12px;\n      font-weight: 400;\n      line-height: 16px;\n      color: #9ca3af;\n      text-transform: uppercase;\n      letter-spacing: 0.3px;\n    }\n    .card-heading {\n      font-size: 18px;\n      font-weight: 400;\n      line-height: 28px;\n      color: #111827;\n    }\n    .card-desc {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #4b5563;\n      margin-top: 4px;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      background-color: #ffffff;\n      border-top: 1px solid #f9fafb;\n      padding: 25px 24px 24px 24px;\n      flex-shrink: 0;\n    }\n    #action_button {\n      width: 100%;\n      padding: 16px 0;\n      box-sizing: border-box;\n      font-family: 'Lato', sans-serif;\n      font-size: 18px;\n      font-weight: 400;\n      border: none;\n      border-radius: 9999px;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      background-color: #ff2a6d;\n      color: #FFFFFF;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 10px 15px -3px #fbcfe8, 0px 4px 6px -4px #fbcfe8;\n    }\n    #action_button:hover {\n      opacity: 0.9;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"header-section\">\n      <h1 id=\"title_label\">Here's what I've learned about you</h1>\n      <p class=\"subtitle\" id=\"subtitle_label\">This is the foundation of your new wardrobe.</p>\n    </div>\n\n    <div class=\"cards-container\">\n      <div class=\"summary-card\">\n        <div class=\"card-icon\" style=\"background-color: #fdf2f8;\">\n          <img src=\"https://api.segmently.ai/assets/onboardings/uESaO6wxIUbBM5PVmEvs/images/en-US_1775494009920_icon-summary-profile/origin.svg\" alt=\"\">\n        </div>\n        <div class=\"card-content\">\n          <div class=\"card-label\">Profile</div>\n          <div class=\"card-heading\">Busy Professional, 35-44</div>\n          <div class=\"card-desc\">Looking for polished, office-ready looks without the morning stress.</div>\n        </div>\n      </div>\n\n      <div class=\"summary-card\">\n        <div class=\"card-icon\" style=\"background-color: #fff7ed;\">\n          <img src=\"https://api.segmently.ai/assets/onboardings/uESaO6wxIUbBM5PVmEvs/images/en-US_1775494010476_icon-summary-frustration/origin.svg\" alt=\"\">\n        </div>\n        <div class=\"card-content\">\n          <div class=\"card-label\">Main Frustration</div>\n          <div class=\"card-heading\">Decision Fatigue</div>\n          <div class=\"card-desc\">You're spending too much mental energy just getting dressed.</div>\n        </div>\n      </div>\n\n      <div class=\"summary-card\">\n        <div class=\"card-icon\" style=\"background-color: #faf5ff;\">\n          <img src=\"https://api.segmently.ai/assets/onboardings/uESaO6wxIUbBM5PVmEvs/images/en-US_1775494010851_icon-summary-style/origin.svg\" alt=\"\">\n        </div>\n        <div class=\"card-content\">\n          <div class=\"card-label\">Style Goal</div>\n          <div class=\"card-heading\">Classic &amp; Timeless</div>\n          <div class=\"card-desc\">You want pieces that last and mix well, not fleeting trends.</div>\n        </div>\n      </div>\n\n      <div class=\"summary-card\">\n        <div class=\"card-icon\" style=\"background-color: #f0fdf4;\">\n          <img src=\"https://api.segmently.ai/assets/onboardings/uESaO6wxIUbBM5PVmEvs/images/en-US_1775494011293_icon-summary-routine/origin.svg\" alt=\"\">\n        </div>\n        <div class=\"card-content\">\n          <div class=\"card-label\">Routine</div>\n          <div class=\"card-heading\">5-Minute Mornings</div>\n          <div class=\"card-desc\">Your plan is optimized for speed and ease.</div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"footer\">\n      <button id=\"action_button\">Build My Plan</button>\n    </div>\n\n  </div>\n\n  <script>\n    // ========================================================================\n    // --- OFFICIAL ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n    // ========================================================================\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: '',\n      screenId: ''\n    };\n    window.leaveCustomScreen = () => {};\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\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        runInitialSetup();\n      }\n    };\n\n    // Standalone fallback\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!window.onboardingOnlineCustomScreenData.screenId) {\n          console.log('Running in standalone mode');\n          runInitialSetup();\n        }\n      }, 100);\n    });\n\n    // ========================================================================\n    // --- SCREEN LOGIC ---\n    // ========================================================================\n\n    // ========================================================================\n    // --- MAPPING TABLES ---\n    // ========================================================================\n\n    const PROFILE_LIFESTYLE = {\n      OFFICE: { heading: 'Busy Professional', desc: 'Looking for polished, office-ready looks without the morning stress.' },\n      HYBRID: { heading: 'Hybrid Worker', desc: 'Balancing office days and casual days with one smart wardrobe.' },\n      REMOTE: { heading: 'Remote Professional', desc: 'Creating put-together looks that feel good even from home.' },\n      SAHM: { heading: 'Stay-at-Home Mom', desc: 'Finding your style again between school runs and daily life.' },\n      RETIRED: { heading: 'Retired & Reinventing', desc: 'Embracing a new chapter with a wardrobe that matches your freedom.' }\n    };\n\n    const AGE_LABELS = {\n      '25_34': '25-34',\n      '35_44': '35-44',\n      '45_54': '45-54',\n      '55_PLUS': '55+'\n    };\n\n    const FRUSTRATION_MAP = {\n      DECISION_FATIGUE: { heading: 'Decision Fatigue', desc: \"You're spending too much mental energy just getting dressed.\" },\n      REPEAT_CYCLE: { heading: 'The Repeat Cycle', desc: 'You keep wearing the same few outfits on rotation.' },\n      IMPULSE_BUYS: { heading: 'Impulse Buys', desc: 'Your closet is full but nothing feels right together.' },\n      LOST_MY_WAY: { heading: 'Lost My Style', desc: \"You've lost touch with what looks and feels like you.\" }\n    };\n\n    const STYLE_MAP = {\n      CLASSIC_TIMELESS: { heading: 'Classic & Timeless', desc: 'You want pieces that last and mix well, not fleeting trends.' },\n      MINIMALIST_CHIC: { heading: 'Minimalist & Chic', desc: 'Less is more — you love clean lines and a curated closet.' },\n      POLISHED_PREPPY: { heading: 'Polished & Preppy', desc: 'You gravitate toward structured, put-together looks with personality.' },\n      RELAXED_NATURAL: { heading: 'Relaxed & Natural', desc: 'Comfort meets style — you want effortless, laid-back looks.' },\n      FEMININE: { heading: 'Feminine & Soft', desc: 'You love flowy fabrics, soft colors, and romantic details.' },\n      MODERN_EDGY: { heading: 'Modern & Edgy', desc: 'Bold choices and statement pieces define your wardrobe.' }\n    };\n\n    const ROUTINE_MAP = {\n      FIVE_MIN: { heading: '5-Minute Mornings', desc: 'Your plan is optimized for speed and ease.' },\n      TEN_FIFTEEN_MIN: { heading: '10-15 Minute Mornings', desc: 'Enough time to put together a great outfit without rushing.' },\n      TWENTY_PLUS_MIN: { heading: '20+ Minute Mornings', desc: 'You enjoy taking time to style yourself and try new looks.' },\n      NO_PRESSURE: { heading: 'No-Pressure Mornings', desc: 'Your schedule is flexible — you dress on your own terms.' }\n    };\n\n    // ========================================================================\n    // --- SCREEN LOGIC ---\n    // ========================================================================\n\n    function runInitialSetup() {\n      console.log(\"Screen Initialized\");\n      populateCards();\n      addEventListeners();\n      updateLabels();\n    }\n\n    function unwrapValue(v) {\n      if (v && typeof v === 'object' && 'value' in v) return v.value;\n      return v;\n    }\n\n    function getUserValue(key) {\n      const data = window.onboardingOnlineCustomScreenData || {};\n      // 1. Check inputs (flat map — primary source on this platform)\n      const inputs = data.inputs || {};\n      if (inputs[key] != null) return unwrapValue(inputs[key]);\n\n      // 2. Check incomeUserData (flat map)\n      const income = data.incomeUserData || {};\n      if (income[key] != null) return unwrapValue(income[key]);\n\n      // 3. Walk userData (nested by screenId — platform format)\n      const userData = data.userData;\n      if (userData) {\n        for (const screenId in userData) {\n          const screenData = userData[screenId];\n          if (!screenData) continue;\n          if (screenData[key] != null) return unwrapValue(screenData[key]);\n          if (screenData[\"input['\" + key + \"']\"] != null) return unwrapValue(screenData[\"input['\" + key + \"']\"]);\n        }\n      }\n\n      return null;\n    }\n\n    function populateCards() {\n      const cards = document.querySelectorAll('.summary-card');\n\n      // Card 1: Profile — typical_week + age_group\n      const lifestyle = PROFILE_LIFESTYLE[getUserValue('typical_week')];\n      const age = AGE_LABELS[getUserValue('age_group')];\n      if (lifestyle && cards[0]) {\n        const heading = age ? lifestyle.heading + ', ' + age : lifestyle.heading;\n        cards[0].querySelector('.card-heading').textContent = heading;\n        cards[0].querySelector('.card-desc').textContent = lifestyle.desc;\n      }\n\n      // Card 2: Main Frustration — dressing_feeling\n      const frustration = FRUSTRATION_MAP[getUserValue('dressing_feeling')];\n      if (frustration && cards[1]) {\n        cards[1].querySelector('.card-heading').textContent = frustration.heading;\n        cards[1].querySelector('.card-desc').textContent = frustration.desc;\n      }\n\n      // Card 3: Style Goal — style_preference (first selection)\n      const stylePref = getUserValue('style_preference');\n      if (stylePref && cards[2]) {\n        const firstStyle = stylePref.split(',')[0].trim();\n        const style = STYLE_MAP[firstStyle];\n        if (style) {\n          cards[2].querySelector('.card-heading').textContent = style.heading;\n          cards[2].querySelector('.card-desc').textContent = style.desc;\n        }\n      }\n\n      // Card 4: Routine — morning_routine\n      const routine = ROUTINE_MAP[getUserValue('morning_routine')];\n      if (routine && cards[3]) {\n        cards[3].querySelector('.card-heading').textContent = routine.heading;\n        cards[3].querySelector('.card-desc').textContent = routine.desc;\n      }\n    }\n\n    function addEventListeners() {\n      const button = document.getElementById('action_button');\n      if (button) {\n        button.addEventListener('click', () => {\n          if (button.disabled) return;\n          button.disabled = true;\n          window.leaveCustomScreen({});\n        });\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 titleElement = document.getElementById('title_label');\n      if (titleElement && labels.title?.value?.l10n?.[language]) {\n        titleElement.textContent = labels.title.value.l10n[language];\n      }\n\n      const buttonElement = document.getElementById('action_button');\n      if (buttonElement && labels.button_text?.value?.l10n?.[language]) {\n        buttonElement.textContent = labels.button_text.value.l10n[language];\n      }\n    }\n  </script>\n</body>\n</html>\n","callback":{"action":{"edges":[{"transitionKind":"push","nextScreenId":"screen25","conditions":[]}],"kind":"advance"}}},"actionBar":{},"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"},"insets":{"end":16,"top":0,"start":16,"bottom":0}},"header":{},"systemPrompt":null,"offlineFirst":true,"countdown":null,"animated":true},"tags":[],"screenType":"WebEmbed","id":"808c8c8a-44dd-4cf0-b110-aeee9765d5b2","name":"learned-about-you","position":{"y":-608,"x":18525.33333333333}},"93c9611e-defd-4e2e-a6e3-ae39a2d869bd":{"name":"how-much-time","id":"93c9611e-defd-4e2e-a6e3-ae39a2d869bd","position":{"x":9522.666666666666,"y":-608},"content":{"animated":true,"offlineFirst":true,"countdown":null,"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>Morning Routine</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #fff;\n      }\n    }\n\n    /* --- Progress Bar --- */\n    .progress-container {\n      display: flex;\n      align-items: center;\n      padding: 27px 32px 0px 20px;\n      margin-bottom: 30px;\n    }\n    .back-btn {\n      background: none;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 25px;\n    }\n    .back-btn svg {\n      width: 24px;\n      height: 24px;\n      color: #9CA3AF;\n    }\n    .progress-bar-bg {\n      flex: 1;\n      height: 6px;\n      background-color: #E5E5EB;\n      border-radius: 3px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      background-color: #F5326D;\n      border-radius: 3px;\n    }\n\n    /* --- Header --- */\n    .header-section {\n      padding: 0 24px;\n      margin-bottom: 24px;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      margin: 0 0 8px 0;\n      color: #1a1a1a;\n      text-align: left;\n    }\n    .subtitle {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #6b7280;\n      margin: 0;\n      text-align: left;\n    }\n\n    /* --- Options Container --- */\n    .options-container {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 0 24px 32px 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .options-container::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* --- Option Card --- */\n    .option-card {\n      background: #ffffff;\n      border: 1px solid #e5e7eb;\n      border-radius: 16px;\n      padding: 25px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n    .option-card.selected {\n      border-color: #ff2a6d;\n      background-color: #fff0f5;\n    }\n\n    .option-text {\n      flex: 1;\n      min-width: 0;\n    }\n    .option-title {\n      font-size: 20px;\n      font-weight: 400;\n      line-height: 28px;\n      color: #111827;\n    }\n    .option-desc {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #6b7280;\n      margin-top: 4px;\n    }\n\n    .icon-circle {\n      width: 32px;\n      height: 32px;\n      border-radius: 9999px;\n      background-color: #f3f4f6;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      margin-left: 16px;\n    }\n    .icon-circle img {\n      width: 16px;\n      height: 16px;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      border-top: 1px solid #f9fafb;\n      padding: 25px 24px 24px 24px;\n      flex-shrink: 0;\n    }\n    .footer-tip {\n      font-size: 12px;\n      font-weight: 400;\n      line-height: 16px;\n      color: #9ca3af;\n      text-align: center;\n    }\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n\n  <div class=\"progress-container\">\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\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 19L5 12L12 5M19 12H5\" />\n      </svg>\n    </button>\n    <div class=\"progress-bar-bg\">\n      <div class=\"progress-bar-fill\" style=\"width: 44%;\"></div>\n    </div>\n  </div>\n\n  <div class=\"header-section\">\n    <h1 id=\"title_label\">How much time do you have to get dressed?</h1>\n    <p class=\"subtitle\" id=\"subtitle_label\">We'll design routines that fit your clock.</p>\n  </div>\n\n  <div class=\"options-container\" id=\"list-container\"></div>\n\n  <div class=\"footer\">\n    <div class=\"footer-tip\">Most of our successful members start with the 5-minute routine.</div>\n  </div>\n\n</div>\n\n<script>\n  // --- 1. Environment Detection & Communication Setup ---\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('Selected morning routine:', 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  // --- 2. Screen Logic ---\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  const OPTIONS = [\n    { id: 'FIVE_MIN', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564597307_icon-lightning.svg/origin.svg', title: '5 minutes or less', desc: '\"I need to grab and go!\"' },\n    { id: 'TEN_FIFTEEN_MIN', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564597677_icon-clock.svg/origin.svg', title: '10 - 15 minutes', desc: '\"I have a moment to think.\"' },\n    { id: 'TWENTY_PLUS_MIN', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564598004_icon-coffee.svg/origin.svg', title: '20+ minutes', desc: '\"I enjoy the process.\"' },\n    { id: 'NO_PRESSURE', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564598368_icon-sun.svg/origin.svg', title: 'No time pressure', desc: '\"My schedule is flexible.\"' }\n  ];\n\n  let selectedItem = null;\n\n  function initScreen() {\n    let savedValue = null;\n\n    if (window.onboardingOnlineCustomScreenData.inputs && window.onboardingOnlineCustomScreenData.inputs.morning_routine) {\n      const inputData = window.onboardingOnlineCustomScreenData.inputs.morning_routine;\n      if (inputData && typeof inputData === 'object' && 'value' in inputData) {\n        savedValue = inputData.value;\n      } else {\n        savedValue = inputData;\n      }\n    }\n\n    if (!savedValue) {\n      const userData = window.onboardingOnlineCustomScreenData.userData;\n      if (userData) {\n        for (const screenId in userData) {\n          const screenData = userData[screenId];\n          if (screenData) {\n            if (screenData[\"morning_routine\"]) {\n              savedValue = screenData[\"morning_routine\"];\n              break;\n            }\n            if (screenData[\"input['morning_routine']\"]) {\n              savedValue = screenData[\"input['morning_routine']\"];\n              break;\n            }\n          }\n        }\n      }\n    }\n\n    if (savedValue) {\n      const val = Array.isArray(savedValue) ? savedValue[0] : savedValue;\n      const match = OPTIONS.find(c => c.id === val);\n      if (match) {\n        selectedItem = val;\n      } else {\n        const matchByTitle = OPTIONS.find(c => c.title === val);\n        if (matchByTitle) selectedItem = matchByTitle.id;\n      }\n    }\n\n    renderList();\n\n    const labels = window.onboardingOnlineCustomScreenData.labels;\n    const lang = window.onboardingOnlineCustomScreenData.language;\n    if (labels && labels.title && labels.title.value.l10n[lang]) {\n      document.getElementById('title_label').textContent = labels.title.value.l10n[lang];\n    }\n  }\n\n  function renderList() {\n    const container = document.getElementById('list-container');\n    container.innerHTML = '';\n\n    OPTIONS.forEach(item => {\n      const isSelected = selectedItem === item.id;\n\n      const card = document.createElement('div');\n      card.className = `option-card${isSelected ? ' selected' : ''}`;\n      card.onclick = () => selectOption(item.id);\n\n      card.innerHTML = `\n        <div class=\"option-text\">\n          <div class=\"option-title\">${item.title}</div>\n          <div class=\"option-desc\">${item.desc}</div>\n        </div>\n        <div class=\"icon-circle\">\n          <img src=\"${item.icon}\" alt=\"\">\n        </div>\n      `;\n\n      container.appendChild(card);\n    });\n  }\n\n  function selectOption(id) {\n    selectedItem = id;\n    renderList();\n\n    const segmentlySDK = getSegmentlySDK();\n    if (segmentlySDK) {\n      segmentlySDK.trackEvent('UserUpdatedValue', {\n        screenName: 'morning_routine',\n        answer: selectedItem\n      });\n    }\n\n    setTimeout(() => {\n      window.leaveCustomScreen({\n        morning_routine: selectedItem\n      });\n    }, 300);\n  }\n</script>\n\n</body>\n</html>\n","callback":{"action":{"kind":"advance","edges":[{"conditions":[],"nextScreenId":"1166f6b2-1c27-4a19-803b-63d598c72383","transitionKind":"push"}]}}},"systemPrompt":null,"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"},"insets":{"end":16,"top":0,"start":16,"bottom":0}},"header":{}},"screenType":"WebEmbed","tags":[]},"a75b0fb8-fc75-4ff6-81dd-7e4f48f8e3bb":{"tags":[],"screenType":"WebEmbed","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>Failed Attempts</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #fff;\n      }\n    }\n\n    /* --- Progress Bar --- */\n    .progress-container {\n      display: flex;\n      align-items: center;\n      padding: 27px 32px 0px 20px;\n      margin-bottom: 30px;\n    }\n    .back-btn {\n      background: none;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 25px;\n    }\n    .back-btn svg {\n      width: 24px;\n      height: 24px;\n      color: #9CA3AF;\n    }\n    .progress-bar-bg {\n      flex: 1;\n      height: 6px;\n      background-color: #E5E5EB;\n      border-radius: 3px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      background-color: #F5326D;\n      border-radius: 3px;\n    }\n\n    /* --- Header --- */\n    .header-section {\n      padding: 0 24px;\n      margin-bottom: 24px;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      margin: 0 0 8px 0;\n      color: #1a1a1a;\n      text-align: left;\n    }\n    .subtitle {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #6b7280;\n      margin: 0;\n      text-align: left;\n    }\n\n    /* --- Options Container --- */\n    .options-container {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 0 24px 32px 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .options-container::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* --- Option Card --- */\n    .option-card {\n      background: #ffffff;\n      border: 1px solid #e5e7eb;\n      border-radius: 12px;\n      padding: 17px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n    .option-card.selected {\n      border-color: #ff2a6d;\n      background-color: #fff0f5;\n    }\n\n    .icon-circle {\n      width: 40px;\n      height: 40px;\n      border-radius: 9999px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n    .icon-circle img {\n      width: 20px;\n      height: 20px;\n    }\n\n    .option-text {\n      flex: 1;\n      min-width: 0;\n    }\n    .option-title {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #1f2937;\n    }\n    .option-desc {\n      font-size: 12px;\n      font-weight: 400;\n      line-height: 16px;\n      color: #6b7280;\n    }\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n\n  <div class=\"progress-container\">\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\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 19L5 12L12 5M19 12H5\" />\n      </svg>\n    </button>\n    <div class=\"progress-bar-bg\">\n      <div class=\"progress-bar-fill\" style=\"width: 75%;\"></div>\n    </div>\n  </div>\n\n  <div class=\"header-section\">\n    <h1 id=\"title_label\">What have you tried before?</h1>\n    <p class=\"subtitle\" id=\"subtitle_label\">We're different because we simplify it.</p>\n  </div>\n\n  <div class=\"options-container\" id=\"list-container\"></div>\n\n</div>\n\n<script>\n  // --- 1. Environment Detection & Communication Setup ---\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('Selected failed attempt:', 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  // --- 2. Screen Logic ---\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  const OPTIONS = [\n    { id: 'PINTEREST', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564876479_icon-pinterest.svg/origin.svg', bg: '#fee2e2', title: 'Pinterest boards', desc: '\"Saved 1000 ideas, used zero.\"' },\n    { id: 'CAPSULE', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564876849_icon-capsule.svg/origin.svg', bg: '#dbeafe', title: 'Capsule wardrobe', desc: '\"Felt too restrictive/boring.\"' },\n    { id: 'STYLIST', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564877192_icon-stylist.svg/origin.svg', bg: '#f3e8ff', title: 'Personal Stylist', desc: '\"Way too expensive.\"' },\n    { id: 'SUBSCRIPTION', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564877526_icon-subscription.svg/origin.svg', bg: '#dcfce7', title: 'Subscription Boxes', desc: '\"Kept items I didn\\'t love.\"' },\n    { id: 'NOTHING', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564877888_icon-nothing.svg/origin.svg', bg: '#f3f4f6', title: 'Nothing yet', desc: '\"I\\'ve just been winging it.\"' }\n  ];\n\n  let selectedItem = null;\n\n  function initScreen() {\n    let savedValue = null;\n\n    if (window.onboardingOnlineCustomScreenData.inputs && window.onboardingOnlineCustomScreenData.inputs.failed_attempts) {\n      const inputData = window.onboardingOnlineCustomScreenData.inputs.failed_attempts;\n      if (inputData && typeof inputData === 'object' && 'value' in inputData) {\n        savedValue = inputData.value;\n      } else {\n        savedValue = inputData;\n      }\n    }\n\n    if (!savedValue) {\n      const userData = window.onboardingOnlineCustomScreenData.userData;\n      if (userData) {\n        for (const screenId in userData) {\n          const screenData = userData[screenId];\n          if (screenData) {\n            if (screenData[\"failed_attempts\"]) {\n              savedValue = screenData[\"failed_attempts\"];\n              break;\n            }\n            if (screenData[\"input['failed_attempts']\"]) {\n              savedValue = screenData[\"input['failed_attempts']\"];\n              break;\n            }\n          }\n        }\n      }\n    }\n\n    if (savedValue) {\n      const val = Array.isArray(savedValue) ? savedValue[0] : savedValue;\n      const match = OPTIONS.find(c => c.id === val);\n      if (match) {\n        selectedItem = val;\n      } else {\n        const matchByTitle = OPTIONS.find(c => c.title === val);\n        if (matchByTitle) selectedItem = matchByTitle.id;\n      }\n    }\n\n    renderList();\n\n    const labels = window.onboardingOnlineCustomScreenData.labels;\n    const lang = window.onboardingOnlineCustomScreenData.language;\n    if (labels && labels.title && labels.title.value.l10n[lang]) {\n      document.getElementById('title_label').textContent = labels.title.value.l10n[lang];\n    }\n  }\n\n  function renderList() {\n    const container = document.getElementById('list-container');\n    container.innerHTML = '';\n\n    OPTIONS.forEach(item => {\n      const isSelected = selectedItem === item.id;\n\n      const card = document.createElement('div');\n      card.className = `option-card${isSelected ? ' selected' : ''}`;\n      card.onclick = () => selectOption(item.id);\n\n      card.innerHTML = `\n        <div class=\"icon-circle\" style=\"background-color: ${item.bg};\">\n          <img src=\"${item.icon}\" alt=\"\">\n        </div>\n        <div class=\"option-text\">\n          <div class=\"option-title\">${item.title}</div>\n          <div class=\"option-desc\">${item.desc}</div>\n        </div>\n      `;\n\n      container.appendChild(card);\n    });\n  }\n\n  function selectOption(id) {\n    selectedItem = id;\n    renderList();\n\n    const segmentlySDK = getSegmentlySDK();\n    if (segmentlySDK) {\n      segmentlySDK.trackEvent('UserUpdatedValue', {\n        screenName: 'failed_attempts',\n        answer: selectedItem\n      });\n    }\n\n    setTimeout(() => {\n      window.leaveCustomScreen({\n        failed_attempts: selectedItem\n      });\n    }, 300);\n  }\n</script>\n\n</body>\n</html>\n","callback":{"action":{"kind":"advance","edges":[{"transitionKind":"push","nextScreenId":"a9f8b402-99c9-409e-ace9-bd132140ffc1","conditions":[]}]}}},"actionBar":{},"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"},"insets":{"start":16,"bottom":0,"end":16,"top":0}},"header":{},"systemPrompt":null,"offlineFirst":true,"countdown":null,"animated":true},"position":{"x":15711.999999999993,"y":-608},"id":"a75b0fb8-fc75-4ff6-81dd-7e4f48f8e3bb","name":"have-you-tried-before"},"a9f8b402-99c9-409e-ace9-bd132140ffc1":{"position":{"x":16274.666666666659,"y":-608},"id":"a9f8b402-99c9-409e-ace9-bd132140ffc1","name":"what-do-i-wear","tags":[],"screenType":"WebEmbed","content":{"offlineFirst":true,"countdown":null,"animated":true,"canvas":{"insets":{"bottom":0,"start":16,"top":0,"end":16},"background":{"kind":"solid","content":{"color":"#f8fbfb"}}},"header":{},"systemPrompt":null,"embed":{"callback":{"action":{"kind":"advance","edges":[{"conditions":[],"transitionKind":"push","nextScreenId":"06455aab-f27f-412b-954d-91a11e2d3b7c"}]}},"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>Decision Fatigue</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #fff;\n      }\n    }\n\n    /* --- Progress Bar --- */\n    .progress-container {\n      display: flex;\n      align-items: center;\n      padding: 27px 32px 0px 20px;\n      margin-bottom: 30px;\n    }\n    .back-btn {\n      background: none;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 25px;\n    }\n    .back-btn svg {\n      width: 24px;\n      height: 24px;\n      color: #9CA3AF;\n    }\n    .progress-bar-bg {\n      flex: 1;\n      height: 6px;\n      background-color: #E5E5EB;\n      border-radius: 3px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      background-color: #F5326D;\n      border-radius: 3px;\n    }\n\n    /* --- Header --- */\n    .header-section {\n      padding: 0 24px 24px 24px;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      margin: 0;\n      color: #1a1a1a;\n      text-align: left;\n    }\n\n    /* --- Content Area --- */\n    .content-area {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      padding: 0 32px;\n      position: relative;\n      overflow-y: auto;\n      overflow-x: hidden;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .content-area::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* Value Display */\n    .value-display {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      margin-top: 48px;\n      margin-bottom: 16px;\n    }\n    .value-number {\n      display: flex;\n      align-items: baseline;\n    }\n    .value-main {\n      font-size: 60px;\n      font-weight: 400;\n      line-height: 60px;\n      color: #ff2a6d;\n    }\n    .value-total {\n      font-size: 20px;\n      font-weight: 400;\n      line-height: 32px;\n      color: #9ca3af;\n    }\n    .value-label {\n      font-size: 18px;\n      font-weight: 400;\n      line-height: 28px;\n      color: #111827;\n      text-align: center;\n      margin-top: 16px;\n    }\n\n    /* Range Slider */\n    .slider-wrapper {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      margin-top: 48px;\n    }\n\n    input[type=\"range\"] {\n      -webkit-appearance: none;\n      appearance: none;\n      width: 100%;\n      height: 8px;\n      background: linear-gradient(to right, #e5e7eb, #ff2a6d);\n      border-radius: 4px;\n      outline: none;\n      cursor: pointer;\n    }\n\n    input[type=\"range\"]::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      appearance: none;\n      width: 32px;\n      height: 32px;\n      border-radius: 16px;\n      background: #ff2a6d;\n      border: 3px solid #ffffff;\n      box-shadow: 0px 4px 10px 0px rgba(255, 42, 109, 0.4);\n      cursor: pointer;\n    }\n\n    input[type=\"range\"]::-moz-range-thumb {\n      width: 32px;\n      height: 32px;\n      border-radius: 16px;\n      background: #ff2a6d;\n      border: 3px solid #ffffff;\n      box-shadow: 0px 4px 10px 0px rgba(255, 42, 109, 0.4);\n      cursor: pointer;\n    }\n\n    .slider-labels {\n      display: flex;\n      justify-content: space-between;\n    }\n    .slider-label {\n      font-size: 12px;\n      font-weight: 400;\n      line-height: 16px;\n      color: #9ca3af;\n      text-transform: uppercase;\n      letter-spacing: 0.3px;\n    }\n\n    /* Insight Card */\n    .insight-card {\n      background-color: #fdf2f8;\n      border: 1px solid #fce7f3;\n      border-radius: 16px;\n      padding: 25px;\n      text-align: center;\n      margin-top: auto;\n      margin-bottom: 16px;\n      width: 100%;\n      box-sizing: border-box;\n    }\n    .insight-text {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 26px;\n      color: #374151;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      border-top: 1px solid #f9fafb;\n      padding: 25px 24px 24px 24px;\n      flex-shrink: 0;\n    }\n    #continue-btn {\n      width: 100%;\n      padding: 16px 0;\n      box-sizing: border-box;\n      font-family: 'Lato', sans-serif;\n      font-size: 18px;\n      font-weight: 400;\n      border: none;\n      border-radius: 9999px;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      background-color: #ff2a6d;\n      color: #FFFFFF;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 10px 15px -3px #fbcfe8, 0px 4px 6px -4px #fbcfe8;\n    }\n    #continue-btn:hover {\n      opacity: 0.9;\n    }\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n\n  <div class=\"progress-container\">\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\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 19L5 12L12 5M19 12H5\" />\n      </svg>\n    </button>\n    <div class=\"progress-bar-bg\">\n      <div class=\"progress-bar-fill\" style=\"width: 78%;\"></div>\n    </div>\n  </div>\n\n  <div class=\"header-section\">\n    <h1 id=\"title_label\">How exhausted are you by the daily \"what do I wear\" decision?</h1>\n  </div>\n\n  <div class=\"content-area\">\n    <div class=\"value-display\">\n      <div class=\"value-number\">\n        <span class=\"value-main\" id=\"value-main\">0</span>\n        <span class=\"value-total\">/10</span>\n      </div>\n      <div class=\"value-label\" id=\"value-label\">Not Tired At All</div>\n    </div>\n\n    <div class=\"slider-wrapper\">\n      <input type=\"range\" id=\"fatigue-slider\" min=\"0\" max=\"10\" step=\"1\" value=\"0\">\n      <div class=\"slider-labels\">\n        <span class=\"slider-label\">Not at all</span>\n        <span class=\"slider-label\">Over it</span>\n      </div>\n    </div>\n\n    <div class=\"insight-card\">\n      <div class=\"insight-text\">\"Decision fatigue drains your willpower for other important things in your day.\"</div>\n    </div>\n  </div>\n\n  <div class=\"footer\">\n    <button id=\"continue-btn\" onclick=\"handleContinue()\">Eliminate the Decision</button>\n  </div>\n\n</div>\n\n<script>\n  // --- 1. Environment Detection & Communication Setup ---\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('Selected decision fatigue:', 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  // --- 2. Screen Logic ---\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  const FATIGUE_LABELS = [\n    'Not Tired At All',\n    'Not Tired At All',\n    'Barely Noticeable',\n    'Slightly Tired',\n    'Somewhat Drained',\n    'Moderately Drained',\n    'Pretty Exhausted',\n    'Very Exhausted',\n    'Really Exhausted',\n    'Extremely Exhausted',\n    'Completely Over It'\n  ];\n\n  let selectedValue = 0;\n\n  function initScreen() {\n    let savedValue = null;\n\n    if (window.onboardingOnlineCustomScreenData.inputs && window.onboardingOnlineCustomScreenData.inputs.decision_fatigue) {\n      const inputData = window.onboardingOnlineCustomScreenData.inputs.decision_fatigue;\n      if (inputData && typeof inputData === 'object' && 'value' in inputData) {\n        savedValue = inputData.value;\n      } else {\n        savedValue = inputData;\n      }\n    }\n\n    if (!savedValue) {\n      const userData = window.onboardingOnlineCustomScreenData.userData;\n      if (userData) {\n        for (const screenId in userData) {\n          const screenData = userData[screenId];\n          if (screenData) {\n            if (screenData[\"decision_fatigue\"]) {\n              savedValue = screenData[\"decision_fatigue\"];\n              break;\n            }\n            if (screenData[\"input['decision_fatigue']\"]) {\n              savedValue = screenData[\"input['decision_fatigue']\"];\n              break;\n            }\n          }\n        }\n      }\n    }\n\n    if (savedValue) {\n      const val = parseInt(savedValue);\n      if (val >= 0 && val <= 10) {\n        selectedValue = val;\n      }\n    }\n\n    const slider = document.getElementById('fatigue-slider');\n    slider.value = selectedValue;\n    updateDisplay();\n\n    slider.addEventListener('input', (e) => {\n      selectedValue = parseInt(e.target.value);\n      updateDisplay();\n    });\n\n    const labels = window.onboardingOnlineCustomScreenData.labels;\n    const lang = window.onboardingOnlineCustomScreenData.language;\n    if (labels && labels.title && labels.title.value.l10n[lang]) {\n      document.getElementById('title_label').textContent = labels.title.value.l10n[lang];\n    }\n  }\n\n  function updateDisplay() {\n    document.getElementById('value-main').textContent = selectedValue;\n    document.getElementById('value-label').textContent = FATIGUE_LABELS[selectedValue];\n\n    const slider = document.getElementById('fatigue-slider');\n    const percent = (selectedValue / 10) * 100;\n    slider.style.background = `linear-gradient(to right, #e5e7eb 0%, #ff2a6d ${percent}%, #e5e7eb ${percent}%, #e5e7eb 100%)`;\n  }\n\n  function handleContinue() {\n    const segmentlySDK = getSegmentlySDK();\n    if (segmentlySDK) {\n      segmentlySDK.trackEvent('UserUpdatedValue', {\n        screenName: 'decision_fatigue',\n        answer: selectedValue\n      });\n    }\n\n    window.leaveCustomScreen({\n      decision_fatigue: selectedValue\n    });\n  }\n</script>\n\n</body>\n</html>\n"},"actionBar":{}}},"ab7d29c0-05f9-49d3-9a16-3e66509926d5":{"content":{"offlineFirst":true,"countdown":null,"animated":true,"canvas":{"insets":{"start":16,"bottom":0,"end":16,"top":0},"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}},"header":{},"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>Shopping Habits</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #fff;\n      }\n    }\n\n    /* --- Progress Bar --- */\n    .progress-container {\n      display: flex;\n      align-items: center;\n      padding: 27px 32px 0px 20px;\n      margin-bottom: 30px;\n    }\n    .back-btn {\n      background: none;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 25px;\n    }\n    .back-btn svg {\n      width: 24px;\n      height: 24px;\n      color: #9CA3AF;\n    }\n    .progress-bar-bg {\n      flex: 1;\n      height: 6px;\n      background-color: #E5E5EB;\n      border-radius: 3px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      background-color: #F5326D;\n      border-radius: 3px;\n    }\n\n    /* --- Header --- */\n    .header-section {\n      padding: 0 24px;\n      margin-bottom: 24px;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      margin: 0 0 8px 0;\n      color: #1a1a1a;\n      text-align: left;\n    }\n    .subtitle {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #6b7280;\n      margin: 0;\n      text-align: left;\n    }\n\n    /* --- Options Container --- */\n    .options-container {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 0 24px 32px 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .options-container::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* --- Option Card --- */\n    .option-card {\n      background: #ffffff;\n      border: 1px solid #e5e7eb;\n      border-radius: 12px;\n      padding: 21px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      flex-shrink: 0;\n      display: flex;\n      align-items: flex-start;\n      gap: 16px;\n    }\n    .option-card.selected {\n      border-color: #ff2a6d;\n      background-color: #fff0f5;\n    }\n\n    .icon-circle {\n      width: 40px;\n      height: 40px;\n      border-radius: 9999px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n    .icon-circle img {\n      width: 20px;\n      height: 20px;\n    }\n\n    .option-text {\n      flex: 1;\n      min-width: 0;\n    }\n    .option-title {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #111827;\n    }\n    .option-desc {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 19.25px;\n      color: #6b7280;\n      margin-top: 3px;\n    }\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n\n  <div class=\"progress-container\">\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\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 19L5 12L12 5M19 12H5\" />\n      </svg>\n    </button>\n    <div class=\"progress-bar-bg\">\n      <div class=\"progress-bar-fill\" style=\"width: 36%;\"></div>\n    </div>\n  </div>\n\n  <div class=\"header-section\">\n    <h1 id=\"title_label\">How do you usually shop?</h1>\n    <p class=\"subtitle\" id=\"subtitle_label\">No judgment here.</p>\n  </div>\n\n  <div class=\"options-container\" id=\"list-container\"></div>\n\n</div>\n\n<script>\n  // --- 1. Environment Detection & Communication Setup ---\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('Selected shopping habit:', 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  // --- 2. Screen Logic ---\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  const OPTIONS = [\n    { id: 'CLEARANCE_HUNTER', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564502080_icon-clearance.svg/origin.svg', bg: '#fee2e2', title: 'Clearance rack hunter', desc: '\"I love the thrill of a deal, even if it\\'s not perfect.\"' },\n    { id: 'QUALITY_OVER_QTY', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564502458_icon-quality.svg/origin.svg', bg: '#d1fae5', title: 'Quality over quantity', desc: '\"I buy less, but I invest in pieces that last.\"' },\n    { id: 'FAST_FASHION', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564502826_icon-fast-fashion.svg/origin.svg', bg: '#fef9c3', title: 'Fast fashion regular', desc: '\"I like to try new trends without spending much.\"' },\n    { id: 'NO_SHOPPING', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564503186_icon-no-shopping.svg/origin.svg', bg: '#f3f4f6', title: \"Haven't shopped in years\", desc: '\"I feel overwhelmed and avoid stores entirely.\"' }\n  ];\n\n  let selectedItem = null;\n\n  function initScreen() {\n    let savedValue = null;\n\n    if (window.onboardingOnlineCustomScreenData.inputs && window.onboardingOnlineCustomScreenData.inputs.shopping_habit) {\n      const inputData = window.onboardingOnlineCustomScreenData.inputs.shopping_habit;\n      if (inputData && typeof inputData === 'object' && 'value' in inputData) {\n        savedValue = inputData.value;\n      } else {\n        savedValue = inputData;\n      }\n    }\n\n    if (!savedValue) {\n      const userData = window.onboardingOnlineCustomScreenData.userData;\n      if (userData) {\n        for (const screenId in userData) {\n          const screenData = userData[screenId];\n          if (screenData) {\n            if (screenData[\"shopping_habit\"]) {\n              savedValue = screenData[\"shopping_habit\"];\n              break;\n            }\n            if (screenData[\"input['shopping_habit']\"]) {\n              savedValue = screenData[\"input['shopping_habit']\"];\n              break;\n            }\n          }\n        }\n      }\n    }\n\n    if (savedValue) {\n      const val = Array.isArray(savedValue) ? savedValue[0] : savedValue;\n      const match = OPTIONS.find(c => c.id === val);\n      if (match) {\n        selectedItem = val;\n      } else {\n        const matchByTitle = OPTIONS.find(c => c.title === val);\n        if (matchByTitle) selectedItem = matchByTitle.id;\n      }\n    }\n\n    renderList();\n\n    const labels = window.onboardingOnlineCustomScreenData.labels;\n    const lang = window.onboardingOnlineCustomScreenData.language;\n    if (labels && labels.title && labels.title.value.l10n[lang]) {\n      document.getElementById('title_label').textContent = labels.title.value.l10n[lang];\n    }\n  }\n\n  function renderList() {\n    const container = document.getElementById('list-container');\n    container.innerHTML = '';\n\n    OPTIONS.forEach(item => {\n      const isSelected = selectedItem === item.id;\n\n      const card = document.createElement('div');\n      card.className = `option-card${isSelected ? ' selected' : ''}`;\n      card.onclick = () => selectOption(item.id);\n\n      card.innerHTML = `\n        <div class=\"icon-circle\" style=\"background-color: ${item.bg};\">\n          <img src=\"${item.icon}\" alt=\"\">\n        </div>\n        <div class=\"option-text\">\n          <div class=\"option-title\">${item.title}</div>\n          <div class=\"option-desc\">${item.desc}</div>\n        </div>\n      `;\n\n      container.appendChild(card);\n    });\n  }\n\n  function selectOption(id) {\n    selectedItem = id;\n    renderList();\n\n    const segmentlySDK = getSegmentlySDK();\n    if (segmentlySDK) {\n      segmentlySDK.trackEvent('UserUpdatedValue', {\n        screenName: 'shopping_habit',\n        answer: selectedItem\n      });\n    }\n\n    setTimeout(() => {\n      window.leaveCustomScreen({\n        shopping_habit: selectedItem\n      });\n    }, 300);\n  }\n</script>\n\n</body>\n</html>","callback":{"action":{"kind":"advance","edges":[{"transitionKind":"push","nextScreenId":"d3e2535f-6f48-42fe-ad06-65ec02833d83","conditions":[]}]}}},"actionBar":{}},"screenType":"WebEmbed","tags":[],"name":"how-usually-shop","id":"ab7d29c0-05f9-49d3-9a16-3e66509926d5","position":{"y":-608,"x":7834.666666666668}},"aceea440-4ef1-4f97-b291-7adf65e1c855":{"content":{"animated":true,"countdown":null,"offlineFirst":true,"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>Shopping Triggers</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #fff;\n      }\n    }\n\n    /* --- Progress Bar --- */\n    .progress-container {\n      display: flex;\n      align-items: center;\n      padding: 27px 32px 0px 20px;\n      margin-bottom: 30px;\n    }\n    .back-btn {\n      background: none;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 25px;\n    }\n    .back-btn svg {\n      width: 24px;\n      height: 24px;\n      color: #9CA3AF;\n    }\n    .progress-bar-bg {\n      flex: 1;\n      height: 6px;\n      background-color: #E5E5EB;\n      border-radius: 3px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      background-color: #F5326D;\n      border-radius: 3px;\n    }\n\n    /* --- Header --- */\n    .header-section {\n      padding: 0 24px;\n      margin-bottom: 24px;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      margin: 0 0 8px 0;\n      color: #1a1a1a;\n      text-align: left;\n    }\n    .subtitle {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #6b7280;\n      margin: 0;\n      text-align: left;\n    }\n\n    /* --- Options Container --- */\n    .options-container {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 0 24px 32px 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .options-container::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* --- Option Card (horizontal) --- */\n    .option-card {\n      background: #ffffff;\n      border: 1px solid #e5e7eb;\n      border-radius: 16px;\n      padding: 16px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 14px;\n    }\n    .option-card.selected {\n      border-color: #ff2a6d;\n      background-color: #fff0f5;\n    }\n\n    .emoji-circle {\n      width: 40px;\n      height: 40px;\n      border-radius: 9999px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      font-size: 18px;\n    }\n\n    .option-text {\n      flex: 1;\n      min-width: 0;\n    }\n    .option-title {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #111827;\n    }\n    .option-desc {\n      font-size: 13px;\n      font-weight: 400;\n      line-height: 18px;\n      color: #6b7280;\n      margin-top: 2px;\n    }\n\n    /* Check indicator */\n    .check-circle {\n      width: 24px;\n      height: 24px;\n      border-radius: 9999px;\n      border: 2px solid #d1d5db;\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-sizing: border-box;\n      transition: all 0.2s;\n    }\n    .option-card.selected .check-circle {\n      border-color: #ff2a6d;\n      background-color: #ff2a6d;\n    }\n    .check-circle svg {\n      width: 14px;\n      height: 14px;\n      opacity: 0;\n      transition: opacity 0.2s;\n    }\n    .option-card.selected .check-circle svg {\n      opacity: 1;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      border-top: 1px solid #f9fafb;\n      padding: 25px 24px 24px 24px;\n      flex-shrink: 0;\n    }\n    #continue-btn {\n      width: 100%;\n      padding: 16px 0;\n      box-sizing: border-box;\n      font-family: 'Lato', sans-serif;\n      font-size: 18px;\n      font-weight: 400;\n      border: none;\n      border-radius: 9999px;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      background-color: #ff2a6d;\n      color: #FFFFFF;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 10px 15px -3px #fbcfe8, 0px 4px 6px -4px #fbcfe8;\n      opacity: 0.5;\n      pointer-events: none;\n    }\n    #continue-btn.active {\n      opacity: 1;\n      pointer-events: auto;\n    }\n    #continue-btn:hover.active {\n      opacity: 0.9;\n    }\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n\n  <div class=\"progress-container\">\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\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 19L5 12L12 5M19 12H5\" />\n      </svg>\n    </button>\n    <div class=\"progress-bar-bg\">\n      <div class=\"progress-bar-fill\" style=\"width: 50%;\"></div>\n    </div>\n  </div>\n\n  <div class=\"header-section\">\n    <h1 id=\"title_label\">When do you usually buy new clothes?</h1>\n    <p class=\"subtitle\" id=\"subtitle_label\">Identifying triggers helps break the cycle. Choose up to 2.</p>\n  </div>\n\n  <div class=\"options-container\" id=\"list-container\"></div>\n\n  <div class=\"footer\">\n    <button id=\"continue-btn\" onclick=\"handleContinue()\">Continue</button>\n  </div>\n\n</div>\n\n<script>\n  // --- 1. Environment Detection & Communication Setup ---\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('Selected shopping triggers:', 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  // --- 2. Screen Logic ---\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  const MAX_SELECTIONS = 2;\n\n  const OPTIONS = [\n    { id: 'STRESSED', emoji: '☁️', bg: '#fef2f2', title: 'When I\\'m stressed', desc: 'Retail therapy is my go-to coping mechanism.' },\n    { id: 'ON_SALE', emoji: '⚓', bg: '#fefce8', title: 'When it\\'s on sale', desc: 'I can\\'t resist a good discount sticker.' },\n    { id: 'EVENT', emoji: '✨', bg: '#faf5ff', title: 'When I have an event', desc: 'Wedding, party, or big meeting panic buying.' },\n    { id: 'RARELY', emoji: '✅', bg: '#eff6ff', title: 'Rarely / Only when needed', desc: 'I shop with intention and a list.' }\n  ];\n\n  let selectedItems = [];\n\n  function initScreen() {\n    let savedValue = null;\n\n    if (window.onboardingOnlineCustomScreenData.inputs && window.onboardingOnlineCustomScreenData.inputs.shopping_triggers) {\n      const inputData = window.onboardingOnlineCustomScreenData.inputs.shopping_triggers;\n      if (inputData && typeof inputData === 'object' && 'value' in inputData) {\n        savedValue = inputData.value;\n      } else {\n        savedValue = inputData;\n      }\n    }\n\n    if (!savedValue) {\n      const userData = window.onboardingOnlineCustomScreenData.userData;\n      if (userData) {\n        for (const screenId in userData) {\n          const screenData = userData[screenId];\n          if (screenData) {\n            if (screenData[\"shopping_triggers\"]) {\n              savedValue = screenData[\"shopping_triggers\"];\n              break;\n            }\n            if (screenData[\"input['shopping_triggers']\"]) {\n              savedValue = screenData[\"input['shopping_triggers']\"];\n              break;\n            }\n          }\n        }\n      }\n    }\n\n    if (savedValue) {\n      if (typeof savedValue === 'string') {\n        selectedItems = savedValue.split(',').filter(g => g.trim());\n      } else if (Array.isArray(savedValue)) {\n        selectedItems = savedValue;\n      } else if (typeof savedValue === 'object') {\n        selectedItems = Object.values(savedValue).filter(g => g);\n      }\n    }\n\n    renderList();\n\n    const labels = window.onboardingOnlineCustomScreenData.labels;\n    const lang = window.onboardingOnlineCustomScreenData.language;\n    if (labels && labels.title && labels.title.value.l10n[lang]) {\n      document.getElementById('title_label').textContent = labels.title.value.l10n[lang];\n    }\n  }\n\n  function renderList() {\n    const container = document.getElementById('list-container');\n    container.innerHTML = '';\n\n    OPTIONS.forEach(item => {\n      const isSelected = selectedItems.includes(item.id);\n\n      const card = document.createElement('div');\n      card.className = `option-card${isSelected ? ' selected' : ''}`;\n      card.onclick = () => toggleSelection(item.id);\n\n      card.innerHTML = `\n        <div class=\"emoji-circle\" style=\"background-color: ${item.bg};\">\n          ${item.emoji}\n        </div>\n        <div class=\"option-text\">\n          <div class=\"option-title\">${item.title}</div>\n          <div class=\"option-desc\">${item.desc}</div>\n        </div>\n        <div class=\"check-circle\">\n          <svg viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M11.6667 3.5L5.25 9.91667L2.33333 7\" stroke=\"white\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n      `;\n\n      container.appendChild(card);\n    });\n\n    updateButtonState();\n  }\n\n  function toggleSelection(id) {\n    if (selectedItems.includes(id)) {\n      selectedItems = selectedItems.filter(item => item !== id);\n    } else {\n      if (selectedItems.length >= MAX_SELECTIONS) {\n        selectedItems.shift();\n      }\n      selectedItems.push(id);\n    }\n    renderList();\n  }\n\n  function updateButtonState() {\n    const btn = document.getElementById('continue-btn');\n    if (selectedItems.length > 0) {\n      btn.classList.add('active');\n    } else {\n      btn.classList.remove('active');\n    }\n  }\n\n  function handleContinue() {\n    const segmentlySDK = getSegmentlySDK();\n    if (segmentlySDK) {\n      segmentlySDK.trackEvent('UserUpdatedValue', {\n        screenName: 'shopping_triggers',\n        answers: selectedItems\n      });\n    }\n\n    window.leaveCustomScreen({\n      shopping_triggers: selectedItems.join(',')\n    });\n  }\n</script>\n\n</body>\n</html>\n","callback":{"action":{"edges":[{"conditions":[],"transitionKind":"push","nextScreenId":"be77ddc7-fb8f-42fc-8bd5-7608960d21a5"}],"kind":"advance"}}},"systemPrompt":null,"canvas":{"insets":{"bottom":0,"start":16,"top":0,"end":16},"background":{"kind":"solid","content":{"color":"#f8fbfb"}}},"header":{}},"tags":[],"screenType":"WebEmbed","id":"aceea440-4ef1-4f97-b291-7adf65e1c855","name":"when-buy-new","position":{"x":10647.999999999998,"y":-608}},"aed943e1-688f-4cbb-a98c-62fee5b6508c":{"content":{"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>Seasonal Needs</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #fff;\n      }\n    }\n\n    /* --- Progress Bar --- */\n    .progress-container {\n      display: flex;\n      align-items: center;\n      padding: 27px 32px 0px 20px;\n      margin-bottom: 16px;\n    }\n    .back-btn {\n      background: none;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 25px;\n    }\n    .back-btn svg {\n      width: 24px;\n      height: 24px;\n      color: #9CA3AF;\n    }\n    .progress-bar-bg {\n      flex: 1;\n      height: 6px;\n      background-color: #E5E5EB;\n      border-radius: 3px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      background-color: #F5326D;\n      border-radius: 3px;\n    }\n\n    /* --- Header --- */\n    .header-section {\n      padding: 0 24px;\n      margin-bottom: 24px;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      margin: 0;\n      color: #1a1a1a;\n      text-align: left;\n    }\n\n    /* --- Options Container --- */\n    .options-container {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 0 24px 32px 24px;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .options-container::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* --- 2x2 Grid --- */\n    .options-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 12px;\n    }\n\n    /* --- Grid Card --- */\n    .grid-card {\n      background: #ffffff;\n      border: 1px solid #e5e7eb;\n      border-radius: 16px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 12px;\n      padding: 28px 25px;\n    }\n    .grid-card.selected {\n      border-color: #ff2a6d;\n      background-color: #fff0f5;\n    }\n\n    /* Single icon in circle */\n    .icon-circle {\n      width: 48px;\n      height: 48px;\n      border-radius: 9999px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n    .icon-circle img {\n      width: 30px;\n      height: 30px;\n    }\n\n    /* 2x2 mini icon grid for \"All 4 Seasons\" */\n    .icon-quad {\n      width: 48px;\n      height: 48px;\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      grid-template-rows: 1fr 1fr;\n      gap: 6px;\n      opacity: 0.8;\n      flex-shrink: 0;\n    }\n    .icon-quad img {\n      width: 16px;\n      height: 16px;\n      justify-self: center;\n      align-self: center;\n    }\n\n    .card-title {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #111827;\n      text-align: center;\n    }\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n\n  <div class=\"progress-container\">\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\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 19L5 12L12 5M19 12H5\" />\n      </svg>\n    </button>\n    <div class=\"progress-bar-bg\">\n      <div class=\"progress-bar-fill\" style=\"width: 58%;\"></div>\n    </div>\n  </div>\n\n  <div class=\"header-section\">\n    <h1 id=\"title_label\">How many seasons do you dress for?</h1>\n  </div>\n\n  <div class=\"options-container\">\n    <div class=\"options-grid\" id=\"list-container\"></div>\n  </div>\n\n</div>\n\n<script>\n  // --- 1. Environment Detection & Communication Setup ---\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('Selected seasonal needs:', 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  // --- 2. Screen Logic ---\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  const OPTIONS = [\n    {\n      id: 'ALL_FOUR',\n      title: 'All 4 Seasons',\n      type: 'quad',\n      icons: [\n        'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564727317_icon-season-flower.svg/origin.svg',\n        'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564727682_icon-season-sun-sm.svg/origin.svg',\n        'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564728014_icon-season-leaf.svg/origin.svg',\n        'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564728392_icon-season-snowflake-sm.svg/origin.svg'\n      ]\n    },\n    {\n      id: 'YEAR_ROUND_WARM',\n      title: 'Year-round Warm',\n      type: 'circle',\n      icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564728824_icon-season-warm.svg/origin.svg',\n      bg: '#fefce8'\n    },\n    {\n      id: 'YEAR_ROUND_COLD',\n      title: 'Year-round Cold',\n      type: 'circle',\n      icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564729205_icon-season-cold.svg/origin.svg',\n      bg: '#eff6ff'\n    },\n    {\n      id: 'TWO_THREE_SEASONS',\n      title: '2-3 Seasons',\n      type: 'circle',\n      icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564729646_icon-season-cloud.svg/origin.svg',\n      bg: '#f9fafb'\n    }\n  ];\n\n  let selectedItem = null;\n\n  function initScreen() {\n    let savedValue = null;\n\n    if (window.onboardingOnlineCustomScreenData.inputs && window.onboardingOnlineCustomScreenData.inputs.seasonal_needs) {\n      const inputData = window.onboardingOnlineCustomScreenData.inputs.seasonal_needs;\n      if (inputData && typeof inputData === 'object' && 'value' in inputData) {\n        savedValue = inputData.value;\n      } else {\n        savedValue = inputData;\n      }\n    }\n\n    if (!savedValue) {\n      const userData = window.onboardingOnlineCustomScreenData.userData;\n      if (userData) {\n        for (const screenId in userData) {\n          const screenData = userData[screenId];\n          if (screenData) {\n            if (screenData[\"seasonal_needs\"]) {\n              savedValue = screenData[\"seasonal_needs\"];\n              break;\n            }\n            if (screenData[\"input['seasonal_needs']\"]) {\n              savedValue = screenData[\"input['seasonal_needs']\"];\n              break;\n            }\n          }\n        }\n      }\n    }\n\n    if (savedValue) {\n      const val = Array.isArray(savedValue) ? savedValue[0] : savedValue;\n      const match = OPTIONS.find(c => c.id === val);\n      if (match) {\n        selectedItem = val;\n      } else {\n        const matchByTitle = OPTIONS.find(c => c.title === val);\n        if (matchByTitle) selectedItem = matchByTitle.id;\n      }\n    }\n\n    renderList();\n\n    const labels = window.onboardingOnlineCustomScreenData.labels;\n    const lang = window.onboardingOnlineCustomScreenData.language;\n    if (labels && labels.title && labels.title.value.l10n[lang]) {\n      document.getElementById('title_label').textContent = labels.title.value.l10n[lang];\n    }\n  }\n\n  function renderList() {\n    const container = document.getElementById('list-container');\n    container.innerHTML = '';\n\n    OPTIONS.forEach(item => {\n      const isSelected = selectedItem === item.id;\n\n      const card = document.createElement('div');\n      card.className = `grid-card${isSelected ? ' selected' : ''}`;\n      card.onclick = () => selectOption(item.id);\n\n      let iconHtml = '';\n      if (item.type === 'quad') {\n        iconHtml = `\n          <div class=\"icon-quad\">\n            ${item.icons.map(src => `<img src=\"${src}\" alt=\"\">`).join('')}\n          </div>\n        `;\n      } else {\n        iconHtml = `\n          <div class=\"icon-circle\" style=\"background-color: ${item.bg};\">\n            <img src=\"${item.icon}\" alt=\"\">\n          </div>\n        `;\n      }\n\n      card.innerHTML = `\n        ${iconHtml}\n        <div class=\"card-title\">${item.title}</div>\n      `;\n\n      container.appendChild(card);\n    });\n  }\n\n  function selectOption(id) {\n    selectedItem = id;\n    renderList();\n\n    const segmentlySDK = getSegmentlySDK();\n    if (segmentlySDK) {\n      segmentlySDK.trackEvent('UserUpdatedValue', {\n        screenName: 'seasonal_needs',\n        answer: selectedItem\n      });\n    }\n\n    setTimeout(() => {\n      window.leaveCustomScreen({\n        seasonal_needs: selectedItem\n      });\n    }, 300);\n  }\n</script>\n\n</body>\n</html>\n","callback":{"action":{"edges":[{"conditions":[],"nextScreenId":"7f4b84af-1fa2-4f84-a49e-8dc171bcb930","transitionKind":"push"}],"kind":"advance"}}},"systemPrompt":null,"canvas":{"background":{"kind":"solid","content":{"color":"#f8fbfb"}},"insets":{"bottom":0,"start":16,"top":0,"end":16}},"header":{},"animated":true,"offlineFirst":true,"countdown":null},"tags":[],"screenType":"WebEmbed","name":"seasons","id":"aed943e1-688f-4cbb-a98c-62fee5b6508c","position":{"y":-608,"x":12335.999999999996}},"b1c8813f-46c5-4e87-bde7-f37122d7c769":{"content":{"actionBar":{},"embed":{"callback":{"action":{"kind":"advance","edges":[{"nextScreenId":"e66d8575-3c33-44f6-8009-e78cb6166589","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>Work-Life Balance</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #fff;\n      }\n    }\n\n    /* --- Progress Bar --- */\n    .progress-container {\n      display: flex;\n      align-items: center;\n      padding: 27px 32px 0px 20px;\n      margin-bottom: 30px;\n    }\n    .back-btn {\n      background: none;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 25px;\n    }\n    .back-btn svg {\n      width: 24px;\n      height: 24px;\n      color: #9CA3AF;\n    }\n    .progress-bar-bg {\n      flex: 1;\n      height: 6px;\n      background-color: #E5E5EB;\n      border-radius: 3px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      background-color: #F5326D;\n      border-radius: 3px;\n    }\n\n    /* --- Header --- */\n    .header-section {\n      padding: 0 24px;\n      margin-bottom: 24px;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      margin: 0 0 8px 0;\n      color: #1a1a1a;\n      text-align: left;\n    }\n    .subtitle {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #6b7280;\n      margin: 0;\n      text-align: left;\n    }\n\n    /* --- Options Container --- */\n    .options-container {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 0 24px 32px 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .options-container::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* --- Option Card --- */\n    .option-card {\n      background: #ffffff;\n      border: 1px solid #e5e7eb;\n      border-radius: 12px;\n      padding: 17px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n    .option-card.selected {\n      border-color: #ff2a6d;\n      background-color: #fff0f5;\n    }\n\n    .icon-circle {\n      width: 48px;\n      height: 48px;\n      border-radius: 9999px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n    .icon-circle img {\n      width: 24px;\n      height: 24px;\n    }\n\n    .option-text {\n      flex: 1;\n      min-width: 0;\n    }\n    .option-title {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #111827;\n    }\n    .option-desc {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #6b7280;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      border-top: 1px solid #f9fafb;\n      padding: 25px 24px 40px 24px;\n      flex-shrink: 0;\n    }\n    .footer-text {\n      font-size: 12px;\n      font-weight: 400;\n      line-height: 16px;\n      color: #9ca3af;\n      text-align: center;\n      margin: 0;\n    }\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n\n  <div class=\"progress-container\">\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\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 19L5 12L12 5M19 12H5\" />\n      </svg>\n    </button>\n    <div class=\"progress-bar-bg\">\n      <div class=\"progress-bar-fill\" style=\"width: 25%;\"></div>\n    </div>\n  </div>\n\n  <div class=\"header-section\">\n    <h1 id=\"title_label\">What does your typical week look like?</h1>\n    <p class=\"subtitle\" id=\"subtitle_label\">We'll build formulas that match your lifestyle.</p>\n  </div>\n\n  <div class=\"options-container\" id=\"list-container\"></div>\n\n  <div class=\"footer\">\n    <p class=\"footer-text\">We analyze your routine to balance comfort vs. style.</p>\n  </div>\n\n</div>\n\n<script>\n  // --- 1. Environment Detection & Communication Setup ---\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('Selected typical week:', 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  // --- 2. Screen Logic ---\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  const OPTIONS = [\n    { id: 'OFFICE', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564250668_icon-office.svg/origin.svg', bg: '#eff6ff', title: 'Office 5 days/week', desc: 'Corporate or business casual' },\n    { id: 'HYBRID', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564251126_icon-hybrid.svg/origin.svg', bg: '#faf5ff', title: 'Hybrid', desc: '2-3 days in office, rest at home' },\n    { id: 'REMOTE', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564251473_icon-remote.svg/origin.svg', bg: '#f0fdf4', title: 'Fully remote', desc: 'Zoom tops & comfy bottoms' },\n    { id: 'SAHM', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564251815_icon-parent.svg/origin.svg', bg: '#fdf2f8', title: 'Stay-at-home parent', desc: 'Practical, movable, durable' },\n    { id: 'RETIRED', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564252151_icon-retired.svg/origin.svg', bg: '#fefce8', title: 'Retired / Not working', desc: 'Social outings & leisure' }\n  ];\n\n  let selectedItem = null;\n\n  function initScreen() {\n    let savedValue = null;\n\n    if (window.onboardingOnlineCustomScreenData.inputs && window.onboardingOnlineCustomScreenData.inputs.typical_week) {\n      const inputData = window.onboardingOnlineCustomScreenData.inputs.typical_week;\n      if (inputData && typeof inputData === 'object' && 'value' in inputData) {\n        savedValue = inputData.value;\n      } else {\n        savedValue = inputData;\n      }\n    }\n\n    if (!savedValue) {\n      const userData = window.onboardingOnlineCustomScreenData.userData;\n      if (userData) {\n        for (const screenId in userData) {\n          const screenData = userData[screenId];\n          if (screenData) {\n            if (screenData[\"typical_week\"]) {\n              savedValue = screenData[\"typical_week\"];\n              break;\n            }\n            if (screenData[\"input['typical_week']\"]) {\n              savedValue = screenData[\"input['typical_week']\"];\n              break;\n            }\n          }\n        }\n      }\n    }\n\n    if (savedValue) {\n      const val = Array.isArray(savedValue) ? savedValue[0] : savedValue;\n      const match = OPTIONS.find(c => c.id === val);\n      if (match) {\n        selectedItem = val;\n      } else {\n        const matchByTitle = OPTIONS.find(c => c.title === val);\n        if (matchByTitle) selectedItem = matchByTitle.id;\n      }\n    }\n\n    renderList();\n\n    const labels = window.onboardingOnlineCustomScreenData.labels;\n    const lang = window.onboardingOnlineCustomScreenData.language;\n    if (labels && labels.title && labels.title.value.l10n[lang]) {\n      document.getElementById('title_label').textContent = labels.title.value.l10n[lang];\n    }\n  }\n\n  function renderList() {\n    const container = document.getElementById('list-container');\n    container.innerHTML = '';\n\n    OPTIONS.forEach(item => {\n      const isSelected = selectedItem === item.id;\n\n      const card = document.createElement('div');\n      card.className = `option-card${isSelected ? ' selected' : ''}`;\n      card.onclick = () => selectOption(item.id);\n\n      card.innerHTML = `\n        <div class=\"icon-circle\" style=\"background-color: ${item.bg};\">\n          <img src=\"${item.icon}\" alt=\"\">\n        </div>\n        <div class=\"option-text\">\n          <div class=\"option-title\">${item.title}</div>\n          <div class=\"option-desc\">${item.desc}</div>\n        </div>\n      `;\n\n      container.appendChild(card);\n    });\n  }\n\n  function selectOption(id) {\n    selectedItem = id;\n    renderList();\n\n    const segmentlySDK = getSegmentlySDK();\n    if (segmentlySDK) {\n      segmentlySDK.trackEvent('UserUpdatedValue', {\n        screenName: 'typical_week',\n        answer: selectedItem\n      });\n    }\n\n    setTimeout(() => {\n      window.leaveCustomScreen({\n        typical_week: selectedItem\n      });\n    }, 300);\n  }\n</script>\n\n</body>\n</html>\n"},"systemPrompt":null,"header":{},"canvas":{"insets":{"top":0,"end":16,"bottom":0,"start":16},"background":{"kind":"solid","content":{"color":"#f8fbfb"}}},"animated":true,"offlineFirst":true,"countdown":null},"tags":[],"screenType":"WebEmbed","id":"b1c8813f-46c5-4e87-bde7-f37122d7c769","name":"typical-week","position":{"x":5584,"y":-608}},"b318ff69-96ef-4e81-88dd-3829936f6392":{"tags":[],"screenType":"WebEmbed","content":{"systemPrompt":null,"canvas":{"insets":{"bottom":0,"start":16,"top":0,"end":16},"background":{"kind":"solid","content":{"color":"#f8fbfb"}}},"header":{},"actionBar":{},"embed":{"callback":{"action":{"kind":"advance","edges":[{"transitionKind":"push","nextScreenId":"2605e57d-3db7-4759-9916-c61100804e4e","conditions":[]}]}},"childSections":[{"layout":{"flexShrink":1,"flexGrow":1,"heightKind":"auto","scrollable":false},"id":"section-mojzrqy8-kqq3o","order":0,"label":"icon-offer-calendar","mediaContent":{"appearance":{},"kind":"Image","content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/a6KiG6PBrwmHwTTngXS2/images/en-US_1777463321211_icon-offer-calendar/origin.svg","small":"https://api.segmently.ai/assets/onboardings/a6KiG6PBrwmHwTTngXS2/images/en-US_1777463321211_icon-offer-calendar/small.svg"}}}}},"kind":"Media"},{"label":"icon-offer-shopping","id":"section-mojzrqy8-vdk0b","order":1,"layout":{"flexShrink":1,"flexGrow":1,"scrollable":false,"heightKind":"auto"},"mediaContent":{"appearance":{},"kind":"Image","content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/a6KiG6PBrwmHwTTngXS2/images/en-US_1777463321724_icon-offer-shopping/origin.svg","small":"https://api.segmently.ai/assets/onboardings/a6KiG6PBrwmHwTTngXS2/images/en-US_1777463321724_icon-offer-shopping/small.svg"}}}}},"kind":"Media"},{"mediaContent":{"appearance":{},"kind":"Image","content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/a6KiG6PBrwmHwTTngXS2/images/en-US_1777463322085_icon-offer-stylist/origin.svg","small":"https://api.segmently.ai/assets/onboardings/a6KiG6PBrwmHwTTngXS2/images/en-US_1777463322085_icon-offer-stylist/small.svg"}}}}},"kind":"Media","label":"icon-offer-stylist","order":2,"id":"section-mojzrqy8-97xe7","layout":{"flexGrow":1,"heightKind":"auto","scrollable":false,"flexShrink":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>Account Created</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      background: linear-gradient(to bottom, #ffffff 0%, #fff1f1 100%);\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    /* --- Entrance Animations --- */\n    @keyframes fadeInUp {\n      from { opacity: 0; transform: translateY(16px); }\n      to   { opacity: 1; transform: none; }\n    }\n    @keyframes pop {\n      0%   { transform: scale(0.6); opacity: 0; }\n      60%  { transform: scale(1.08); opacity: 1; }\n      100% { transform: scale(1); opacity: 1; }\n    }\n    .anim-enter { opacity: 0; animation: fadeInUp 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards; }\n    .anim-d1 { animation-delay: 0.05s; }\n    .anim-d2 { animation-delay: 0.18s; }\n    .anim-d3 { animation-delay: 0.28s; }\n    .anim-d4 { animation-delay: 0.38s; }\n    .anim-d5 { animation-delay: 0.48s; }\n    .anim-d6 { animation-delay: 0.58s; }\n\n    /* --- Header Section --- */\n    .header-section {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      padding: 48px 32px 16px 32px;\n      flex-shrink: 0;\n      text-align: center;\n    }\n\n    /* --- Checkmark Badge --- */\n    .check-badge {\n      width: 72px;\n      height: 72px;\n      border-radius: 50%;\n      background-color: #ff2a6d;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-bottom: 20px;\n      box-shadow: 0px 10px 20px -5px rgba(255, 42, 109, 0.35);\n      animation: pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;\n    }\n    .check-badge svg {\n      width: 36px;\n      height: 36px;\n    }\n\n    .eyebrow {\n      font-size: 13px;\n      font-weight: 700;\n      letter-spacing: 1.6px;\n      text-transform: uppercase;\n      color: #ff2a6d;\n      margin: 0 0 8px 0;\n    }\n    #title_label {\n      font-size: 32px;\n      font-weight: 400;\n      line-height: 36px;\n      letter-spacing: -0.7px;\n      color: #2d2926;\n      margin: 0 0 12px 0;\n    }\n    #subtitle_label {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #6d6a66;\n      margin: 0;\n      max-width: 340px;\n    }\n\n    /* --- Benefits List --- */\n    .benefits-container {\n      flex: 1;\n      overflow-y: auto;\n      padding: 24px 24px 8px 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      min-height: 0;\n    }\n    .benefits-container::-webkit-scrollbar { display: none; }\n\n    .benefit-card {\n      display: flex;\n      align-items: center;\n      gap: 14px;\n      padding: 14px 16px;\n      background: #ffffff;\n      border: 1px solid #fbe1ea;\n      border-radius: 16px;\n      box-shadow: 0px 2px 8px -2px rgba(255, 42, 109, 0.06);\n    }\n    .benefit-icon {\n      width: 44px;\n      height: 44px;\n      border-radius: 12px;\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .benefit-icon img {\n      width: 24px;\n      height: 24px;\n    }\n    .benefit-content {\n      flex: 1;\n      min-width: 0;\n    }\n    .benefit-title {\n      font-size: 15px;\n      font-weight: 700;\n      line-height: 20px;\n      color: #2d2926;\n      margin: 0 0 2px 0;\n    }\n    .benefit-desc {\n      font-size: 13px;\n      font-weight: 400;\n      line-height: 18px;\n      color: #6d6a66;\n      margin: 0;\n    }\n    .benefit-tick {\n      width: 22px;\n      height: 22px;\n      flex-shrink: 0;\n      color: #ff2a6d;\n    }\n\n    /* --- Footer --- */\n    .footer-section {\n      flex-shrink: 0;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 12px;\n      padding: 16px 24px 32px 24px;\n    }\n    #action_button {\n      width: 100%;\n      max-width: 360px;\n      padding: 16px 0;\n      box-sizing: border-box;\n      font-family: 'Lato', sans-serif;\n      font-size: 18px;\n      font-weight: 700;\n      border: none;\n      border-radius: 9999px;\n      cursor: pointer;\n      transition: opacity 0.2s, transform 0.2s;\n      background-color: #ff2a6d;\n      color: #FFFFFF;\n      box-shadow: 0px 10px 15px -3px #fbcfe8, 0px 4px 6px -4px #fbcfe8;\n    }\n    #action_button:hover:not(:disabled) { opacity: 0.92; }\n    #action_button:active:not(:disabled) { transform: scale(0.98); }\n\n    .footer-note {\n      font-size: 12px;\n      font-weight: 400;\n      line-height: 16px;\n      color: #8a8682;\n      text-align: center;\n      margin: 0;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"header-section\">\n      <div class=\"check-badge\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M30 10L14 26L6 18\" stroke=\"white\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </div>\n      <p class=\"eyebrow anim-enter anim-d1\" id=\"eyebrow_label\">Thank you</p>\n      <h1 id=\"title_label\" class=\"anim-enter anim-d2\">Your account is ready.</h1>\n      <p id=\"subtitle_label\" class=\"anim-enter anim-d3\">We&rsquo;ve created your Outfit Formulas account &mdash; here&rsquo;s what&rsquo;s waiting inside.</p>\n    </div>\n\n    <div class=\"benefits-container\">\n      <div class=\"benefit-card anim-enter anim-d3\">\n        <div class=\"benefit-icon\" style=\"background-color: #fdf2f8;\">\n          <img src=\"https://api.segmently.ai/assets/onboardings/a6KiG6PBrwmHwTTngXS2/images/en-US_1777463321211_icon-offer-calendar/origin.svg\" alt=\"\">\n        </div>\n        <div class=\"benefit-content\">\n          <p class=\"benefit-title\" id=\"benefit_1_title\">Outfit Calendar for each month</p>\n          <p class=\"benefit-desc\" id=\"benefit_1_desc\">See exactly what to wear every day of the month.</p>\n        </div>\n        <svg class=\"benefit-tick\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"11\" cy=\"11\" r=\"11\" fill=\"currentColor\"/>\n          <path d=\"M6.5 11.2L9.6 14.3L15.5 8\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </div>\n\n      <div class=\"benefit-card anim-enter anim-d4\">\n        <div class=\"benefit-icon\" style=\"background-color: #faf5ff;\">\n          <img src=\"https://api.segmently.ai/assets/onboardings/a6KiG6PBrwmHwTTngXS2/images/en-US_1777463321724_icon-offer-shopping/origin.svg\" alt=\"\">\n        </div>\n        <div class=\"benefit-content\">\n          <p class=\"benefit-title\" id=\"benefit_2_title\">Smart Shopping Lists</p>\n          <p class=\"benefit-desc\" id=\"benefit_2_desc\">We spot the gaps in your closet and tell you exactly what to add.</p>\n        </div>\n        <svg class=\"benefit-tick\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"11\" cy=\"11\" r=\"11\" fill=\"currentColor\"/>\n          <path d=\"M6.5 11.2L9.6 14.3L15.5 8\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </div>\n\n      <div class=\"benefit-card anim-enter anim-d5\">\n        <div class=\"benefit-icon\" style=\"background-color: #eff6ff;\">\n          <img src=\"https://api.segmently.ai/assets/onboardings/a6KiG6PBrwmHwTTngXS2/images/en-US_1777463322085_icon-offer-stylist/origin.svg\" alt=\"\">\n        </div>\n        <div class=\"benefit-content\">\n          <p class=\"benefit-title\" id=\"benefit_3_title\">ALI, your 24/7 stylist</p>\n          <p class=\"benefit-desc\" id=\"benefit_3_desc\">Ask what works, what matches, or how to dress for an event.</p>\n        </div>\n        <svg class=\"benefit-tick\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"11\" cy=\"11\" r=\"11\" fill=\"currentColor\"/>\n          <path d=\"M6.5 11.2L9.6 14.3L15.5 8\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </div>\n    </div>\n\n    <div class=\"footer-section\">\n      <button id=\"action_button\">Continue</button>\n      <p class=\"footer-note\" id=\"footer_note_label\">One more thing before we open your app.</p>\n    </div>\n\n  </div>\n\n  <script>\n    // ========================================================================\n    // --- OFFICIAL ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n    // ========================================================================\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: '',\n      screenId: ''\n    };\n    window.leaveCustomScreen = () => {};\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\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        runInitialSetup();\n      }\n    };\n\n    // Standalone fallback\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!window.onboardingOnlineCustomScreenData.screenId) {\n          console.log('Running in standalone mode');\n          runInitialSetup();\n        }\n      }, 100);\n    });\n\n    // ========================================================================\n    // --- SCREEN LOGIC ---\n    // ========================================================================\n\n    let initialized = false;\n\n    function runInitialSetup() {\n      if (initialized) return;\n      initialized = true;\n      console.log('Screen Initialized');\n      addEventListeners();\n      updateLabels();\n    }\n\n    function addEventListeners() {\n      const button = document.getElementById('action_button');\n      if (button) {\n        button.addEventListener('click', () => {\n          window.leaveCustomScreen({});\n        });\n      }\n    }\n\n    function applyLabel(elementId, labelKey) {\n      const el = document.getElementById(elementId);\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!el || !labels || !language) return;\n      const value = labels[labelKey]?.value?.l10n?.[language];\n      if (value) el.innerHTML = value;\n    }\n\n    function updateLabels() {\n      const labels = window.onboardingOnlineCustomScreenData.labels;\n      const language = window.onboardingOnlineCustomScreenData.language;\n      if (!labels || !language) return;\n\n      applyLabel('eyebrow_label', 'eyebrow_label');\n      applyLabel('title_label', 'title_label');\n      applyLabel('subtitle_label', 'subtitle_label');\n\n      applyLabel('benefit_1_title', 'benefit_1_title');\n      applyLabel('benefit_1_desc',  'benefit_1_desc');\n      applyLabel('benefit_2_title', 'benefit_2_title');\n      applyLabel('benefit_2_desc',  'benefit_2_desc');\n      applyLabel('benefit_3_title', 'benefit_3_title');\n      applyLabel('benefit_3_desc',  'benefit_3_desc');\n\n      applyLabel('footer_note_label', 'footer_note_label');\n\n      const buttonElement = document.getElementById('action_button');\n      if (buttonElement && labels.button_text?.value?.l10n?.[language]) {\n        buttonElement.textContent = labels.button_text.value.l10n[language];\n      }\n    }\n  </script>\n</body>\n</html>\n"},"animated":true,"offlineFirst":true,"countdown":null},"position":{"x":22896,"y":384},"id":"b318ff69-96ef-4e81-88dd-3829936f6392","name":"waiting-inside"},"b4a9c313-c36b-4bf9-84a4-a02697e29385":{"tags":[],"screenType":"WebEmbed","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>Goals 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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #fff;\n      }\n    }\n\n    /* --- Progress Bar (kept as-is) --- */\n    .progress-container {\n      display: flex;\n      align-items: center;\n      padding: 27px 32px 0px 20px;\n      margin-bottom: 30px;\n    }\n    .back-btn {\n      background: none;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 25px;\n    }\n    .back-btn svg {\n      width: 24px;\n      height: 24px;\n      color: #9CA3AF;\n    }\n    .progress-bar-bg {\n      flex: 1;\n      height: 6px;\n      background-color: #E5E5EB;\n      border-radius: 3px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      background-color: #F5326D;\n      border-radius: 3px;\n    }\n\n    /* --- Header --- */\n    .header-section {\n      padding: 0 24px;\n      margin-bottom: 24px;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      margin: 0 0 8px 0;\n      color: #1a1a1a;\n      text-align: left;\n    }\n    .subtitle {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #6b7280;\n      margin: 0;\n      text-align: left;\n    }\n\n    /* --- Goals List --- */\n    .goals-list {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 0 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .goals-list::-webkit-scrollbar {\n      display: none;\n    }\n\n    .goal-item {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 16px 17px;\n      border: 1px solid #e5e7eb;\n      border-radius: 12px;\n      background: #ffffff;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      flex-shrink: 0;\n    }\n    .goal-item.selected {\n      background-color: #fff0f5;\n      border-color: #ff2a6d;\n    }\n\n    .goal-label {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #1f2937;\n      flex: 1;\n    }\n\n    /* Check indicator */\n    .check-circle {\n      width: 24px;\n      height: 24px;\n      border-radius: 9999px;\n      border: 2px solid #ff2a6d;\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-sizing: border-box;\n      opacity: 0;\n      transition: opacity 0.2s;\n    }\n    .goal-item.selected .check-circle {\n      opacity: 1;\n    }\n    .check-circle svg {\n      width: 14px;\n      height: 14px;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      border-top: 1px solid #f9fafb;\n      padding: 25px 24px 24px 24px;\n      flex-shrink: 0;\n    }\n    #continue-btn {\n      width: 100%;\n      padding: 16px 0;\n      box-sizing: border-box;\n      font-family: 'Lato', sans-serif;\n      font-size: 18px;\n      font-weight: 400;\n      border: none;\n      border-radius: 9999px;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      background-color: #ff2a6d;\n      color: #FFFFFF;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 10px 15px -3px #fbcfe8, 0px 4px 6px -4px #fbcfe8;\n      opacity: 0.5;\n      pointer-events: none;\n    }\n    #continue-btn.active {\n      opacity: 1;\n      pointer-events: auto;\n    }\n    #continue-btn:hover.active {\n      opacity: 0.9;\n    }\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n\n  <div class=\"progress-container\">\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\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 19L5 12L12 5M19 12H5\" />\n      </svg>\n    </button>\n    <div class=\"progress-bar-bg\">\n      <div class=\"progress-bar-fill\" style=\"width: 11%;\"></div>\n    </div>\n  </div>\n\n  <div class=\"header-section\">\n    <h1 id=\"title_label\">What are your main goals?</h1>\n    <p class=\"subtitle\" id=\"subtitle_label\">Select all that apply.</p>\n  </div>\n\n  <div class=\"goals-list\" id=\"list-container\"></div>\n\n  <div class=\"footer\">\n    <button id=\"continue-btn\" onclick=\"handleContinue()\">Continue</button>\n  </div>\n\n</div>\n\n<script>\n  // --- 1. Environment Detection & Communication Setup ---\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('Selected goals:', 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  // --- 2. Screen Logic ---\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  const GOALS = [\n    { id: 'DECISION_FATIGUE', label: 'Stop decision fatigue every morning' },\n    { id: 'CONFIDENCE', label: 'Feel confident and put-together' },\n    { id: 'WARDROBE_LOVE', label: 'Build a functional wardrobe' },\n    { id: 'STYLE_RUT', label: 'Style items I already have' },\n    { id: 'SAVE_TIME', label: 'Save time getting dressed' },\n    { id: 'SHOP_SMARTER', label: 'Look professional without effort' }\n  ];\n\n  let selectedItems = [];\n\n  function initScreen() {\n    let savedGoals = null;\n\n    if (window.onboardingOnlineCustomScreenData.inputs && window.onboardingOnlineCustomScreenData.inputs.selected_goals) {\n      const inputData = window.onboardingOnlineCustomScreenData.inputs.selected_goals;\n      if (inputData && typeof inputData === 'object' && 'value' in inputData) {\n        savedGoals = inputData.value;\n      } else {\n        savedGoals = inputData;\n      }\n    }\n\n    if (!savedGoals) {\n      const userData = window.onboardingOnlineCustomScreenData.userData;\n      if (userData) {\n        for (const screenId in userData) {\n          const screenData = userData[screenId];\n          if (screenData) {\n            if (screenData[\"selected_goals\"]) {\n              savedGoals = screenData[\"selected_goals\"];\n              break;\n            }\n            if (screenData[\"input['selected_goals']\"]) {\n              savedGoals = screenData[\"input['selected_goals']\"];\n              break;\n            }\n          }\n        }\n      }\n    }\n\n    if (savedGoals) {\n      if (typeof savedGoals === 'string') {\n        selectedItems = savedGoals.split(',').filter(g => g.trim());\n      } else if (Array.isArray(savedGoals)) {\n        selectedItems = savedGoals;\n      } else if (typeof savedGoals === 'object') {\n        selectedItems = Object.values(savedGoals).filter(g => g);\n      }\n    }\n\n    renderList();\n\n    const labels = window.onboardingOnlineCustomScreenData.labels;\n    const lang = window.onboardingOnlineCustomScreenData.language;\n    if (labels && labels.title && labels.title.value.l10n[lang]) {\n      document.getElementById('title_label').textContent = labels.title.value.l10n[lang];\n    }\n  }\n\n  function renderList() {\n    const container = document.getElementById('list-container');\n    container.innerHTML = '';\n\n    GOALS.forEach(goal => {\n      const isSelected = selectedItems.includes(goal.id);\n\n      const item = document.createElement('div');\n      item.className = `goal-item${isSelected ? ' selected' : ''}`;\n      item.onclick = () => toggleSelection(goal.id);\n\n      item.innerHTML = `\n        <span class=\"goal-label\">${goal.label}</span>\n        <div class=\"check-circle\">\n          <svg viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M11.6667 3.5L5.25 9.91667L2.33333 7\" stroke=\"#FF2A6D\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n      `;\n\n      container.appendChild(item);\n    });\n\n    updateButtonState();\n  }\n\n  function toggleSelection(id) {\n    if (selectedItems.includes(id)) {\n      selectedItems = selectedItems.filter(item => item !== id);\n    } else {\n      selectedItems.push(id);\n    }\n    renderList();\n  }\n\n  function updateButtonState() {\n    const btn = document.getElementById('continue-btn');\n    if (selectedItems.length > 0) {\n      btn.classList.add('active');\n    } else {\n      btn.classList.remove('active');\n    }\n  }\n\n  function handleContinue() {\n    const segmentlySDK = getSegmentlySDK();\n    if (segmentlySDK) {\n      segmentlySDK.trackEvent('UserUpdatedValue', {\n        screenName: 'goals',\n        answers: selectedItems\n      });\n    }\n\n    window.leaveCustomScreen({\n      selected_goals: selectedItems.join(',')\n    });\n  }\n</script>\n\n</body>\n</html>\n","callback":{"action":{"kind":"advance","edges":[{"conditions":[],"transitionKind":"push","nextScreenId":"52904422-f91f-4d72-86ac-43c4e2eb2e95"}]}}},"actionBar":{},"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"},"insets":{"end":16,"top":0,"start":16,"bottom":0}},"header":{},"systemPrompt":null,"countdown":null,"offlineFirst":true,"animated":true},"position":{"x":2208,"y":-608},"name":"goal","id":"b4a9c313-c36b-4bf9-84a4-a02697e29385"},"b54bd11d-24bc-4a74-b1bd-ed441d32f5d8":{"tags":[],"screenType":"WebEmbed","content":{"header":{},"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"},"insets":{"top":0,"end":16,"bottom":0,"start":16}},"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>Budget Slider</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #fff;\n      }\n    }\n\n    /* --- Progress Bar --- */\n    .progress-container {\n      display: flex;\n      align-items: center;\n      padding: 27px 32px 0px 20px;\n      margin-bottom: 30px;\n    }\n    .back-btn {\n      background: none;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 25px;\n    }\n    .back-btn svg {\n      width: 24px;\n      height: 24px;\n      color: #9CA3AF;\n    }\n    .progress-bar-bg {\n      flex: 1;\n      height: 6px;\n      background-color: #E5E5EB;\n      border-radius: 3px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      background-color: #F5326D;\n      border-radius: 3px;\n    }\n\n    /* --- Header --- */\n    .header-section {\n      padding: 0 24px;\n      margin-bottom: 24px;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      margin: 0 0 8px 0;\n      color: #1a1a1a;\n      text-align: left;\n    }\n    .subtitle {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #6b7280;\n      margin: 0;\n      text-align: left;\n    }\n\n    /* --- Slider Section --- */\n    .slider-section {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      padding: 0 24px;\n      overflow-y: auto;\n      overflow-x: hidden;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .slider-section::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* Value Display */\n    .value-display {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 8px;\n      margin-top: 48px;\n      margin-bottom: 48px;\n    }\n    .value-amount {\n      font-size: 43px;\n      font-weight: 400;\n      line-height: 48px;\n      color: #ff2a6d;\n      text-align: center;\n    }\n    .value-label {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #9ca3af;\n      text-align: center;\n      text-transform: uppercase;\n      letter-spacing: 0.4px;\n    }\n\n    /* Range Slider */\n    .slider-wrapper {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      margin-bottom: 64px;\n    }\n\n    input[type=\"range\"] {\n      -webkit-appearance: none;\n      appearance: none;\n      width: 100%;\n      height: 6px;\n      background: #e5e7eb;\n      border-radius: 3px;\n      outline: none;\n      cursor: pointer;\n    }\n\n    input[type=\"range\"]::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      appearance: none;\n      width: 28px;\n      height: 28px;\n      border-radius: 50%;\n      background: #ff2a6d;\n      border: 2px solid #ffffff;\n      box-shadow: 0px 2px 6px 0px rgba(255, 42, 109, 0.4);\n      cursor: pointer;\n    }\n\n    input[type=\"range\"]::-moz-range-thumb {\n      width: 28px;\n      height: 28px;\n      border-radius: 50%;\n      background: #ff2a6d;\n      border: 2px solid #ffffff;\n      box-shadow: 0px 2px 6px 0px rgba(255, 42, 109, 0.4);\n      cursor: pointer;\n    }\n\n    .slider-labels {\n      display: flex;\n      justify-content: space-between;\n    }\n    .slider-label {\n      font-size: 12px;\n      font-weight: 400;\n      line-height: 16px;\n      color: #9ca3af;\n    }\n\n    /* Insight Card */\n    .insight-card {\n      background-color: #fdf2f8;\n      border: 1px solid #fce7f3;\n      border-radius: 12px;\n      padding: 25px;\n      display: flex;\n      gap: 12px;\n      align-items: flex-start;\n    }\n    .insight-icon {\n      width: 20px;\n      height: 20px;\n      flex-shrink: 0;\n      margin-top: 2px;\n    }\n    .insight-content {\n      display: flex;\n      flex-direction: column;\n      gap: 3px;\n    }\n    .insight-title {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #111827;\n    }\n    .insight-text {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 22.75px;\n      color: #4b5563;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      border-top: 1px solid #f9fafb;\n      padding: 25px 24px 24px 24px;\n      flex-shrink: 0;\n    }\n    #continue-btn {\n      width: 100%;\n      padding: 16px 0;\n      box-sizing: border-box;\n      font-family: 'Lato', sans-serif;\n      font-size: 18px;\n      font-weight: 400;\n      border: none;\n      border-radius: 9999px;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      background-color: #ff2a6d;\n      color: #FFFFFF;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 10px 15px -3px #fbcfe8, 0px 4px 6px -4px #fbcfe8;\n    }\n    #continue-btn:hover {\n      opacity: 0.9;\n    }\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n\n  <div class=\"progress-container\">\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\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 19L5 12L12 5M19 12H5\" />\n      </svg>\n    </button>\n    <div class=\"progress-bar-bg\">\n      <div class=\"progress-bar-fill\" style=\"width: 33%;\"></div>\n    </div>\n  </div>\n\n  <div class=\"header-section\">\n    <h1 id=\"title_label\">What's your monthly clothing budget?</h1>\n    <p class=\"subtitle\" id=\"subtitle_label\">We help you maximize every dollar.</p>\n  </div>\n\n  <div class=\"slider-section\">\n    <div class=\"value-display\">\n      <div class=\"value-amount\" id=\"value-display\">$100 - $200</div>\n      <div class=\"value-label\">Per Month</div>\n    </div>\n\n    <div class=\"slider-wrapper\">\n      <input type=\"range\" id=\"budget-slider\" min=\"0\" max=\"3\" step=\"1\" value=\"2\">\n      <div class=\"slider-labels\">\n        <span class=\"slider-label\">$0-50</span>\n        <span class=\"slider-label\">$50-100</span>\n        <span class=\"slider-label\">$100-200</span>\n        <span class=\"slider-label\">$200+</span>\n      </div>\n    </div>\n\n    <div class=\"insight-card\">\n      <svg class=\"insight-icon\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12.5 11.6667C12.6667 10.8333 13.0833 10.25 13.75 9.58333C14.5833 8.83333 15 7.75 15 6.66667C15 3.90709 12.7596 1.66667 10 1.66667C7.24042 1.66667 5 3.90709 5 6.66667C5 7.5 5.16667 8.5 6.25 9.58333C6.83333 10.1667 7.33333 10.8333 7.5 11.6667M7.5 15H12.5M8.33333 18.3333H11.6667\" stroke=\"#FF2A6D\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n      <div class=\"insight-content\">\n        <div class=\"insight-title\">Did you know?</div>\n        <div class=\"insight-text\">Most members save <strong>$80/month</strong> by stopping impulse buys and shopping their own closets first.</div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"footer\">\n    <button id=\"continue-btn\" onclick=\"handleContinue()\">Continue</button>\n  </div>\n\n</div>\n\n<script>\n  // --- 1. Environment Detection & Communication Setup ---\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('Selected budget:', 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  // --- 2. Screen Logic ---\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  const BUDGET_RANGES = [\n    { id: 'UNDER_50', label: '$0 - $50', value: 0 },\n    { id: '50_TO_100', label: '$50 - $100', value: 1 },\n    { id: '100_TO_200', label: '$100 - $200', value: 2 },\n    { id: 'OVER_200', label: '$200+', value: 3 }\n  ];\n\n  let selectedIndex = 2; // Default to $100-200\n\n  function initScreen() {\n    let savedValue = null;\n\n    if (window.onboardingOnlineCustomScreenData.inputs && window.onboardingOnlineCustomScreenData.inputs.monthly_budget) {\n      const inputData = window.onboardingOnlineCustomScreenData.inputs.monthly_budget;\n      if (inputData && typeof inputData === 'object' && 'value' in inputData) {\n        savedValue = inputData.value;\n      } else {\n        savedValue = inputData;\n      }\n    }\n\n    if (!savedValue) {\n      const userData = window.onboardingOnlineCustomScreenData.userData;\n      if (userData) {\n        for (const screenId in userData) {\n          const screenData = userData[screenId];\n          if (screenData) {\n            if (screenData[\"monthly_budget\"]) {\n              savedValue = screenData[\"monthly_budget\"];\n              break;\n            }\n            if (screenData[\"input['monthly_budget']\"]) {\n              savedValue = screenData[\"input['monthly_budget']\"];\n              break;\n            }\n          }\n        }\n      }\n    }\n\n    if (savedValue) {\n      const match = BUDGET_RANGES.find(b => b.id === savedValue);\n      if (match) {\n        selectedIndex = match.value;\n      }\n    }\n\n    const slider = document.getElementById('budget-slider');\n    slider.value = selectedIndex;\n    updateDisplay();\n\n    slider.addEventListener('input', (e) => {\n      selectedIndex = parseInt(e.target.value);\n      updateDisplay();\n    });\n\n    const labels = window.onboardingOnlineCustomScreenData.labels;\n    const lang = window.onboardingOnlineCustomScreenData.language;\n    if (labels && labels.title && labels.title.value.l10n[lang]) {\n      document.getElementById('title_label').textContent = labels.title.value.l10n[lang];\n    }\n  }\n\n  function updateDisplay() {\n    const display = document.getElementById('value-display');\n    display.textContent = BUDGET_RANGES[selectedIndex].label;\n\n    // Update slider fill color\n    const slider = document.getElementById('budget-slider');\n    const percent = (selectedIndex / 3) * 100;\n    slider.style.background = `linear-gradient(to right, #ff2a6d 0%, #ff2a6d ${percent}%, #e5e7eb ${percent}%, #e5e7eb 100%)`;\n  }\n\n  function handleContinue() {\n    const segmentlySDK = getSegmentlySDK();\n    if (segmentlySDK) {\n      segmentlySDK.trackEvent('UserUpdatedValue', {\n        screenName: 'monthly_budget',\n        answer: BUDGET_RANGES[selectedIndex].id\n      });\n    }\n\n    window.leaveCustomScreen({\n      monthly_budget: BUDGET_RANGES[selectedIndex].id\n    });\n  }\n</script>\n\n</body>\n</html>\n","callback":{"action":{"edges":[{"conditions":[],"transitionKind":"push","nextScreenId":"ab7d29c0-05f9-49d3-9a16-3e66509926d5"}],"kind":"advance"}}},"actionBar":{},"offlineFirst":true,"countdown":null,"animated":true},"position":{"y":-608,"x":7272.000000000001},"name":"monthly-budget","id":"b54bd11d-24bc-4a74-b1bd-ed441d32f5d8"},"be77ddc7-fb8f-42fc-8bd5-7608960d21a5":{"screenType":"WebEmbed","tags":[],"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>Shopping Education</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #ffffff;\n      }\n    }\n\n    /* --- Header --- */\n    .header-section {\n      padding: 32px 32px 16px 32px;\n      flex-shrink: 0;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 30px;\n      margin: 0;\n      color: #1a1a1a;\n      text-align: left;\n    }\n\n    /* --- Scrollable Content --- */\n    .content-area {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      padding: 0 32px;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .content-area::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* --- Pyramid Illustration --- */\n    .pyramid-section {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 24px 0;\n      flex-shrink: 0;\n    }\n    .pyramid-section img {\n      width: 256px;\n      height: 224px;\n      object-fit: contain;\n    }\n\n    /* --- Explanation Card --- */\n    .explanation-card {\n      background-color: #fef2f2;\n      border: 1px solid #fee2e2;\n      border-radius: 16px;\n      padding: 25px;\n      width: 100%;\n      box-sizing: border-box;\n      flex-shrink: 0;\n    }\n    .card-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 8px;\n    }\n    .card-header img {\n      width: 16px;\n      height: 16px;\n      flex-shrink: 0;\n    }\n    .card-title {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #991b1b;\n    }\n    .card-body {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 23px;\n      color: #b91c1c;\n    }\n\n    /* --- Solution Preview --- */\n    .solution-preview {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 12px;\n      padding: 24px 0;\n      width: 100%;\n      flex-shrink: 0;\n    }\n    .solution-preview img {\n      width: 20px;\n      height: 20px;\n      flex-shrink: 0;\n    }\n    .solution-text {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #4b5563;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      border-top: 1px solid #f9fafb;\n      padding: 25px 24px 24px 24px;\n      flex-shrink: 0;\n    }\n    #action_button {\n      width: 100%;\n      padding: 16px 0;\n      box-sizing: border-box;\n      font-family: 'Lato', sans-serif;\n      font-size: 18px;\n      font-weight: 400;\n      border: none;\n      border-radius: 9999px;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      background-color: #ff2a6d;\n      color: #FFFFFF;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 10px 15px -3px #fbcfe8, 0px 4px 6px -4px #fbcfe8;\n    }\n    #action_button:hover {\n      opacity: 0.9;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"header-section\">\n      <h1 id=\"title_label\">Here's why your closet feels full but useless</h1>\n    </div>\n\n    <div class=\"content-area\">\n      <div class=\"pyramid-section\">\n        <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564676511_pyramid-wardrobe.png/origin.png\" alt=\"Wardrobe pyramid showing hero pieces vs basics ratio\">\n      </div>\n\n      <div class=\"explanation-card\">\n        <div class=\"card-header\">\n          <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564676976_icon-warning-triangle.svg/origin.svg\" alt=\"\">\n          <span class=\"card-title\">The Common Mistake</span>\n        </div>\n        <div class=\"card-body\">You're buying too many \"Hero Pieces\" (fun patterns, unique cuts) and ignoring the boring \"Basics\" (tees, jeans, tanks) that make them wearable.</div>\n      </div>\n\n      <div class=\"solution-preview\">\n        <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564677327_icon-check-green-circle.svg/origin.svg\" alt=\"\">\n        <span class=\"solution-text\">We will help you rebalance this ratio.</span>\n      </div>\n    </div>\n\n    <div class=\"footer\">\n      <button id=\"action_button\">Fix My Ratio</button>\n    </div>\n\n  </div>\n\n  <script>\n    // ========================================================================\n    // --- OFFICIAL ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n    // ========================================================================\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: '',\n      screenId: ''\n    };\n    window.leaveCustomScreen = () => {};\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\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        runInitialSetup();\n      }\n    };\n\n    // Standalone fallback\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!window.onboardingOnlineCustomScreenData.screenId) {\n          console.log('Running in standalone mode');\n          runInitialSetup();\n        }\n      }, 100);\n    });\n\n    // ========================================================================\n    // --- SCREEN LOGIC ---\n    // ========================================================================\n\n    function runInitialSetup() {\n      console.log(\"Screen Initialized\");\n      addEventListeners();\n      updateLabels();\n    }\n\n    function addEventListeners() {\n      const button = document.getElementById('action_button');\n      if (button) {\n        button.addEventListener('click', () => {\n          window.leaveCustomScreen({});\n        });\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 titleElement = document.getElementById('title_label');\n      if (titleElement && labels.title?.value?.l10n?.[language]) {\n        titleElement.textContent = labels.title.value.l10n[language];\n      }\n\n      const buttonElement = document.getElementById('action_button');\n      if (buttonElement && labels.button_text?.value?.l10n?.[language]) {\n        buttonElement.textContent = labels.button_text.value.l10n[language];\n      }\n    }\n  </script>\n</body>\n</html>\n","callback":{"action":{"kind":"advance","edges":[{"conditions":[],"transitionKind":"push","nextScreenId":"12dc974e-6c94-4f85-8ce8-efea404f294d"}]}}},"actionBar":{},"canvas":{"background":{"kind":"solid","content":{"color":"#f8fbfb"}},"insets":{"end":16,"top":0,"start":16,"bottom":0}},"header":{},"systemPrompt":null,"countdown":null,"offlineFirst":true,"animated":true},"position":{"x":11210.666666666664,"y":-608},"name":"closet-full-useless","id":"be77ddc7-fb8f-42fc-8bd5-7608960d21a5"},"d3e2535f-6f48-42fe-ad06-65ec02833d83":{"name":"body-changes","id":"d3e2535f-6f48-42fe-ad06-65ec02833d83","position":{"y":-608,"x":8397.333333333334},"content":{"actionBar":{},"embed":{"callback":{"action":{"kind":"advance","edges":[{"conditions":[],"nextScreenId":"4adfa269-62c8-4b0f-bd62-a875b53a8981","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>Body Changes</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #fff;\n      }\n    }\n\n    /* --- Progress Bar --- */\n    .progress-container {\n      display: flex;\n      align-items: center;\n      padding: 27px 32px 0px 20px;\n      margin-bottom: 30px;\n    }\n    .back-btn {\n      background: none;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 25px;\n    }\n    .back-btn svg {\n      width: 24px;\n      height: 24px;\n      color: #9CA3AF;\n    }\n    .progress-bar-bg {\n      flex: 1;\n      height: 6px;\n      background-color: #E5E5EB;\n      border-radius: 3px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      background-color: #F5326D;\n      border-radius: 3px;\n    }\n\n    /* --- Header --- */\n    .header-section {\n      padding: 0 24px;\n      margin-bottom: 24px;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      margin: 0 0 8px 0;\n      color: #1a1a1a;\n      text-align: left;\n    }\n    .subtitle {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #6b7280;\n      margin: 0;\n      text-align: left;\n    }\n\n    /* --- Options Container --- */\n    .options-container {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 0 24px 32px 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .options-container::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* --- Option Card (centered) --- */\n    .option-card {\n      background: #ffffff;\n      border: 1px solid #e5e7eb;\n      border-radius: 16px;\n      padding: 25px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      flex-shrink: 0;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 12px;\n    }\n    .option-card.selected {\n      border-color: #ff2a6d;\n      background-color: #fff0f5;\n    }\n\n    .icon-circle {\n      width: 56px;\n      height: 56px;\n      border-radius: 9999px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n    .icon-circle img {\n      width: 24px;\n      height: 24px;\n    }\n\n    .option-title {\n      font-size: 18px;\n      font-weight: 400;\n      line-height: 28px;\n      color: #111827;\n      text-align: center;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      border-top: 1px solid #f9fafb;\n      padding: 25px 24px 24px 24px;\n      flex-shrink: 0;\n    }\n    .footer-privacy {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 4px;\n    }\n    .footer-privacy svg {\n      width: 12px;\n      height: 12px;\n      flex-shrink: 0;\n    }\n    .footer-privacy span {\n      font-size: 12px;\n      font-weight: 400;\n      line-height: 16px;\n      color: #9ca3af;\n    }\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n\n  <div class=\"progress-container\">\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\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 19L5 12L12 5M19 12H5\" />\n      </svg>\n    </button>\n    <div class=\"progress-bar-bg\">\n      <div class=\"progress-bar-fill\" style=\"width: 39%;\"></div>\n    </div>\n  </div>\n\n  <div class=\"header-section\">\n    <h1 id=\"title_label\">Has your body changed recently?</h1>\n    <p class=\"subtitle\" id=\"subtitle_label\">This affects how clothes fit and feel. We'll help you navigate it.</p>\n  </div>\n\n  <div class=\"options-container\" id=\"list-container\"></div>\n\n  <div class=\"footer\">\n    <div class=\"footer-privacy\">\n      <svg viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M9.5 5.5H2.5C1.94772 5.5 1.5 5.94772 1.5 6.5V10C1.5 10.5523 1.94772 11 2.5 11H9.5C10.0523 11 10.5 10.5523 10.5 10V6.5C10.5 5.94772 10.0523 5.5 9.5 5.5Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M3.5 5.5V3.5C3.5 2.11929 4.61929 1 6 1C7.38071 1 8.5 2.11929 8.5 3.5V5.5\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n      <span>Your answers are private</span>\n    </div>\n  </div>\n\n</div>\n\n<script>\n  // --- 1. Environment Detection & Communication Setup ---\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('Selected body change:', 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  // --- 2. Screen Logic ---\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  const OPTIONS = [\n    { id: 'POSTPREGNANCY', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564554811_icon-postpregnancy.svg/origin.svg', bg: '#fdf2f8', title: 'Post-pregnancy' },\n    { id: 'WEIGHT_FLUCTUATION', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564555173_icon-weight.svg/origin.svg', bg: '#fff7ed', title: 'Weight fluctuation' },\n    { id: 'MENOPAUSE', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564555556_icon-menopause.svg/origin.svg', bg: '#faf5ff', title: 'Menopause changes' },\n    { id: 'SAME_SIZE', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564555900_icon-samesize.svg/origin.svg', bg: '#f3f4f6', title: 'Same size for years' }\n  ];\n\n  let selectedItem = null;\n\n  function initScreen() {\n    let savedValue = null;\n\n    if (window.onboardingOnlineCustomScreenData.inputs && window.onboardingOnlineCustomScreenData.inputs.body_changes) {\n      const inputData = window.onboardingOnlineCustomScreenData.inputs.body_changes;\n      if (inputData && typeof inputData === 'object' && 'value' in inputData) {\n        savedValue = inputData.value;\n      } else {\n        savedValue = inputData;\n      }\n    }\n\n    if (!savedValue) {\n      const userData = window.onboardingOnlineCustomScreenData.userData;\n      if (userData) {\n        for (const screenId in userData) {\n          const screenData = userData[screenId];\n          if (screenData) {\n            if (screenData[\"body_changes\"]) {\n              savedValue = screenData[\"body_changes\"];\n              break;\n            }\n            if (screenData[\"input['body_changes']\"]) {\n              savedValue = screenData[\"input['body_changes']\"];\n              break;\n            }\n          }\n        }\n      }\n    }\n\n    if (savedValue) {\n      const val = Array.isArray(savedValue) ? savedValue[0] : savedValue;\n      const match = OPTIONS.find(c => c.id === val);\n      if (match) {\n        selectedItem = val;\n      } else {\n        const matchByTitle = OPTIONS.find(c => c.title === val);\n        if (matchByTitle) selectedItem = matchByTitle.id;\n      }\n    }\n\n    renderList();\n\n    const labels = window.onboardingOnlineCustomScreenData.labels;\n    const lang = window.onboardingOnlineCustomScreenData.language;\n    if (labels && labels.title && labels.title.value.l10n[lang]) {\n      document.getElementById('title_label').textContent = labels.title.value.l10n[lang];\n    }\n  }\n\n  function renderList() {\n    const container = document.getElementById('list-container');\n    container.innerHTML = '';\n\n    OPTIONS.forEach(item => {\n      const isSelected = selectedItem === item.id;\n\n      const card = document.createElement('div');\n      card.className = `option-card${isSelected ? ' selected' : ''}`;\n      card.onclick = () => selectOption(item.id);\n\n      card.innerHTML = `\n        <div class=\"icon-circle\" style=\"background-color: ${item.bg};\">\n          <img src=\"${item.icon}\" alt=\"\">\n        </div>\n        <div class=\"option-title\">${item.title}</div>\n      `;\n\n      container.appendChild(card);\n    });\n  }\n\n  function selectOption(id) {\n    selectedItem = id;\n    renderList();\n\n    const segmentlySDK = getSegmentlySDK();\n    if (segmentlySDK) {\n      segmentlySDK.trackEvent('UserUpdatedValue', {\n        screenName: 'body_changes',\n        answer: selectedItem\n      });\n    }\n\n    setTimeout(() => {\n      window.leaveCustomScreen({\n        body_changes: selectedItem\n      });\n    }, 300);\n  }\n</script>\n\n</body>\n</html>\n"},"systemPrompt":null,"canvas":{"insets":{"end":16,"top":0,"start":16,"bottom":0},"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}},"header":{},"animated":true,"countdown":null,"offlineFirst":true},"tags":[],"screenType":"WebEmbed"},"d717f8eb-ebea-46d3-933a-0fc555129b93":{"content":{"embed":{"callback":{"action":{"kind":"advance","edges":[{"nextScreenId":"808c8c8a-44dd-4cf0-b110-aeee9765d5b2","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>Commitment Dialog</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      overflow-y: auto;\n      overflow-x: hidden;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .screen-container::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow-y: auto;\n        overflow-x: hidden;\n        position: relative;\n        background-color: #ffffff;\n      }\n    }\n\n    /* --- Icon Circle --- */\n    .icon-circle {\n      width: 67px;\n      height: 67px;\n      border-radius: 9999px;\n      background-color: #fdf2f8;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      margin-bottom: 32px;\n    }\n    .icon-circle img {\n      width: 34px;\n      height: 34px;\n    }\n\n    /* --- Title --- */\n    #title_label {\n      font-size: 30px;\n      font-weight: 400;\n      line-height: 37.5px;\n      margin: 0 0 16px 0;\n      color: #1a1a1a;\n      text-align: center;\n    }\n\n    /* --- Subtitle --- */\n    .subtitle {\n      font-size: 18px;\n      font-weight: 400;\n      line-height: 28px;\n      color: #6b7280;\n      margin: 0 0 48px 0;\n      text-align: center;\n    }\n\n    /* --- Buttons --- */\n    .buttons-section {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      flex-shrink: 0;\n    }\n\n    .btn-primary {\n      width: 100%;\n      padding: 20px 0 24px 0;\n      box-sizing: border-box;\n      font-family: 'Lato', sans-serif;\n      font-size: 20px;\n      font-weight: 400;\n      border: none;\n      border-bottom: 4px solid #be185d;\n      border-radius: 16px;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      background-color: #ff2a6d;\n      color: #ffffff;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 20px 25px -5px #fbcfe8, 0px 8px 10px -6px #fbcfe8;\n    }\n    .btn-primary:hover {\n      opacity: 0.9;\n    }\n\n    .btn-secondary {\n      width: 100%;\n      padding: 18px 0;\n      box-sizing: border-box;\n      font-family: 'Lato', sans-serif;\n      font-size: 18px;\n      font-weight: 400;\n      border: 2px solid #f3f4f6;\n      border-radius: 16px;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      background-color: #ffffff;\n      color: #374151;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .btn-secondary:hover {\n      opacity: 0.85;\n    }\n\n    /* --- Security Badge --- */\n    .security-badge {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 4px;\n      margin-top: 32px;\n    }\n    .security-badge img {\n      width: 12px;\n      height: 12px;\n    }\n    .security-text {\n      font-size: 12px;\n      font-weight: 400;\n      line-height: 16px;\n      color: #9ca3af;\n      text-align: center;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"icon-circle\">\n      <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564967312_icon-sparkle-pink.svg/origin.svg\" alt=\"\">\n    </div>\n\n    <h1 id=\"title_label\">Are you ready to make getting dressed the easiest thing you do all day?</h1>\n\n    <p class=\"subtitle\" id=\"subtitle_label\">We'll be guiding you. Outfit by outfit, day by day.</p>\n\n    <div class=\"buttons-section\">\n      <button class=\"btn-primary\" id=\"btn_primary\" onclick=\"handleContinue()\">Yes, let's do this!</button>\n      <button class=\"btn-secondary\" id=\"btn_secondary\" onclick=\"handleContinue()\">I'm ready to start</button>\n    </div>\n\n    <div class=\"security-badge\">\n      <img src=\"https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564967664_icon-lock-gray.svg/origin.svg\" alt=\"\">\n      <span class=\"security-text\">Secure &amp; Personalized Plan</span>\n    </div>\n\n  </div>\n\n  <script>\n    // ========================================================================\n    // --- OFFICIAL ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n    // ========================================================================\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: '',\n      screenId: ''\n    };\n    window.leaveCustomScreen = () => {};\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\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        runInitialSetup();\n      }\n    };\n\n    // Standalone fallback\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!window.onboardingOnlineCustomScreenData.screenId) {\n          console.log('Running in standalone mode');\n          runInitialSetup();\n        }\n      }, 100);\n    });\n\n    // ========================================================================\n    // --- SCREEN LOGIC ---\n    // ========================================================================\n\n    function runInitialSetup() {\n      console.log(\"Screen Initialized\");\n      updateLabels();\n    }\n\n    function handleContinue() {\n      window.leaveCustomScreen({});\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 titleElement = document.getElementById('title_label');\n      if (titleElement && labels.title?.value?.l10n?.[language]) {\n        titleElement.textContent = labels.title.value.l10n[language];\n      }\n\n      const btnPrimary = document.getElementById('btn_primary');\n      if (btnPrimary && labels.button_primary?.value?.l10n?.[language]) {\n        btnPrimary.textContent = labels.button_primary.value.l10n[language];\n      }\n\n      const btnSecondary = document.getElementById('btn_secondary');\n      if (btnSecondary && labels.button_secondary?.value?.l10n?.[language]) {\n        btnSecondary.textContent = labels.button_secondary.value.l10n[language];\n      }\n    }\n  </script>\n</body>\n</html>\n"},"actionBar":{},"canvas":{"insets":{"end":16,"top":0,"start":16,"bottom":0},"background":{"kind":"solid","content":{"color":"#f8fbfb"}}},"header":{},"systemPrompt":null,"countdown":null,"offlineFirst":true,"animated":true},"tags":[],"screenType":"WebEmbed","id":"d717f8eb-ebea-46d3-933a-0fc555129b93","name":"are-you-ready","position":{"x":17962.66666666666,"y":-608}},"e66d8575-3c33-44f6-8009-e78cb6166589":{"id":"e66d8575-3c33-44f6-8009-e78cb6166589","name":"style","position":{"x":6146.666666666667,"y":-608},"content":{"countdown":null,"offlineFirst":true,"animated":true,"embed":{"callback":{"action":{"edges":[{"conditions":[],"transitionKind":"push","nextScreenId":"20363359-4321-4629-884d-a3f6aeb9ae51"}],"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>Style Selection Screen</title>\n  <style>\n    /* --- 1. Base & Mobile-First Styles (Mandatory) --- */\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    \n    /* The main container */\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      overflow: hidden; /* Prevent double scrollbars */\n      display: flex;\n      flex-direction: column;\n      position: relative;\n    }\n\n    /* --- 2. Desktop Preview Simulation (Mandatory) --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5; /* Neutral desktop background */\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px; /* iPhone Pro Max width */\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        background-color: #fff;\n      }\n    }\n\n    /* --- 3. Custom Screen Styles --- */\n    \n    /* Constants for Colors */\n    :root {\n      --primary-pink: #ea4c89; \n      --text-dark: #1a1a1a;\n      --text-grey: #666666;\n      --border-light: #e0e0e0;\n      --bg-hover: #f9f9f9;\n    }\n\n    .content-scroll-area {\n      flex: 1 1 auto;\n      padding: 24px 20px 200px 20px; /* Bottom padding for sticky footer */\n      overflow-y: auto;\n      overflow-x: hidden;\n      -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */\n      min-height: 0; /* Fix for flex children scrolling */\n      position: relative;\n      height: 100%;\n      -ms-overflow-style: none;  /* IE and Edge */\n      scrollbar-width: none;  /* Firefox */\n    }\n    .content-scroll-area::-webkit-scrollbar {\n      display: none; /* Chrome, Safari, Opera */\n    }\n\n    /* Progress Bar */\n    .progress-container {\n      display: flex;\n      align-items: center;\n      padding: 3px 4px 10px 0px;\n      padding-right: 42px;\n      margin-bottom: 17px;\n    }\n    .back-btn {\n      background: none;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 25px;\n    }\n    .back-btn svg {\n      width: 24px;\n      height: 24px;\n      color: #101828;\n    }\n    .progress-bar-bg {\n      flex: 1;\n      height: 6px;\n      background-color: #E5E5EB;\n      border-radius: 3px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      background-color: #F5326D;\n      border-radius: 3px;\n    }\n\n    h1 {\n      font-size: 18px;\n      font-weight: 500;\n      color: #121127;\n      margin-bottom: 24px;\n      line-height: 1.3;\n      text-align: left;\n      width: 344px; /* 164px + 16px gap + 164px */\n      margin-left: auto;\n      margin-right: auto;\n    }\n\n    /* Grid Layout */\n    .style-grid {\n      display: grid;\n      grid-template-columns: 164px 164px; /* 2 Columns with fixed width */\n      gap: 16px;\n      justify-content: center; /* Center the grid */\n    }\n\n    /* Card Component */\n    .style-card {\n      position: relative;\n      width: 164px;\n      border: 1px solid var(--border-light);\n      border-radius: 12px;\n      overflow: hidden;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      background: white;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .style-card:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(0,0,0,0.05);\n    }\n\n    /* Selected State for Card */\n    .style-card.selected {\n      border: 2px solid var(--primary-pink);\n      background-color: #fff0f6; \n    }\n\n    .card-image {\n      width: 164px;\n      height: 154px;\n      object-fit: contain; /* Changed to contain to ensure whole illustration is visible */\n      background-color: #ffffff;\n      padding: 10px; /* Added padding so image doesn't touch edges */\n      box-sizing: border-box;\n    }\n\n    .card-footer {\n      padding: 12px;\n      font-size: 14px;\n      font-weight: 600;\n      color: #121127;\n      text-align: left;\n      border-top: 1px solid #f0f0f0;\n    }\n\n    .style-card.selected .card-footer {\n      border-top-color: var(--primary-pink);\n    }\n\n    /* The Circle Selection Indicator */\n    .selection-indicator {\n      position: absolute;\n      top: 10px;\n      right: 10px;\n      width: 22px;\n      height: 22px;\n      border-radius: 50%;\n      border: 1px solid #ccc;\n      background-color: white;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s;\n      z-index: 2;\n    }\n\n    .style-card.selected .selection-indicator {\n      background-color: var(--primary-pink);\n      border-color: var(--primary-pink);\n    }\n\n    /* Checkmark Icon (pure CSS) */\n    .checkmark {\n      display: none;\n      width: 6px;\n      height: 10px;\n      border: solid white;\n      border-width: 0 2px 2px 0;\n      transform: rotate(45deg);\n      margin-top: -2px;\n    }\n\n    .style-card.selected .checkmark {\n      display: block;\n    }\n\n    /* --- Sticky Footer --- */\n    .sticky-footer {\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      background: white;\n      padding: 16px 16px 20px 16px;\n      box-shadow: 0 -4px 20px rgba(0,0,0,0.05);\n      z-index: 10;\n      box-sizing: border-box;\n    }\n\n    .selection-count {\n      font-size: 12px;\n      color: var(--text-grey);\n      margin-bottom: 12px;\n    }\n\n    .btn {\n      width: 100%;\n      height: 50px;\n      border-radius: 25px;\n      font-size: 16px;\n      font-weight: 600;\n      cursor: pointer;\n      border: none;\n      transition: opacity 0.2s;\n      margin-bottom: 10px;\n    }\n\n    .btn-primary {\n      background-color: #F5326D;\n      color: white;\n    }\n\n    .btn-primary:disabled {\n      background-color: #e0e0e0;\n      color: #a0a0a0;\n      cursor: not-allowed;\n    }\n\n    .btn-secondary {\n      background-color: transparent;\n      color: #F5326D;\n      border: 1px solid #F5326D;\n    }\n\n    .btn-secondary:hover {\n      background-color: #fff0f6;\n    }\n\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n  \n  <div class=\"content-scroll-area\">\n    \n    <div class=\"progress-container\">\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\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 19L5 12L12 5M19 12H5\" />\n        </svg>\n      </button>\n      <div class=\"progress-bar-bg\">\n        <div class=\"progress-bar-fill\" style=\"width: 28%;\"></div>\n      </div>\n    </div>\n\n    <h1 id=\"main_title\">What feels most close to your style?</h1>\n\n    <div class=\"style-grid\" id=\"style_grid\">\n      </div>\n\n  </div>\n\n  <div class=\"sticky-footer\">\n    <div class=\"selection-count\" id=\"selection_count\">0 selected</div>\n    <button id=\"btn_continue\" class=\"btn btn-primary\" disabled onclick=\"handleContinue()\">Continue</button>\n    <button id=\"btn_not_sure\" class=\"btn btn-secondary\" onclick=\"handleNotSure()\">I'm Not Sure Yet</button>\n  </div>\n\n</div>\n\n<script>\n  // Helper function to find segmentlySDK in parent chain (up to 4 levels)\n  function getSegmentlySDK() {\n    let currentWindow = window;\n\n    // Check up to 4 levels up the parent chain\n    for (let i = 0; i < 4; i++) {\n      try {\n        // Try to access segmentlySDK (may fail due to cross-origin restrictions)\n        if (currentWindow.segmentlySDK) {\n          return currentWindow.segmentlySDK;\n        }\n\n        // Stop if we've reached the top window\n        if (currentWindow === currentWindow.parent) {\n          break;\n        }\n\n        currentWindow = currentWindow.parent;\n      } catch (e) {\n        // Cross-origin access blocked, stop searching\n        console.warn('Cross-origin access blocked at level', i);\n        break;\n      }\n    }\n\n    return null;\n  }\n\n  // --- 1. SETUP: Communication with Onboarding.online ---\n  window.onboardingOnlineCustomScreenData = {\n    inputs: {},\n    labels: {},\n    userData: {},\n    screenId: ''\n  };\n\n  window.leaveCustomScreen = () => {};\n  window.backScreen = () => {};\n\n  function handleBack() {\n    window.backScreen();\n  }\n\n  window.onmessage = (event) => {\n    if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\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  // --- 2. DATA: Updated with your specific images ---\n  const styleOptions = [\n    { id: 'CLASSIC_TIMELESS', label: 'Classic & Timeless', imageSrc: 'https://api.segmently.ai/assets/onboardings/6OwufOr1PtCg8dN7pR6O/custom-images/en-US_1769779330192_1763481572695-ic_style_classic.png/origin.png' },\n    { id: 'MINIMALIST_CHIC', label: 'Minimalist & Chic', imageSrc: 'https://api.segmently.ai/assets/onboardings/6OwufOr1PtCg8dN7pR6O/custom-images/en-US_1769779330769_1763481598433-ic_style_minimalistic.png/origin.png' },\n    { id: 'POLISHED_PREPPY', label: 'Polished & Preppy', imageSrc: 'https://api.segmently.ai/assets/onboardings/6OwufOr1PtCg8dN7pR6O/custom-images/en-US_1769779331272_1763481617006-ic_style_polished.png/origin.png' },\n    { id: 'RELAXED_NATURAL', label: 'Relaxed & Natural', imageSrc: 'https://api.segmently.ai/assets/onboardings/6OwufOr1PtCg8dN7pR6O/custom-images/en-US_1769779331678_1763481639551-ic_style_relaxed.png/origin.png' },\n    { id: 'FEMININE', label: 'Feminine', imageSrc: 'https://api.segmently.ai/assets/onboardings/6OwufOr1PtCg8dN7pR6O/custom-images/en-US_1769779332100_1763481658649-rc_style_feminine.png/origin.png' },\n    { id: 'MODERN_EDGY', label: 'Modern & Edgy', imageSrc: 'https://api.segmently.ai/assets/onboardings/6OwufOr1PtCg8dN7pR6O/custom-images/en-US_1769779332524_1763481679126-ic_style_modern.png/origin.png' },\n  ];\n\n  let selectedStyleIds = [];\n  let initialized = false;\n\n  // --- 3. LOGIC: Render and Handle Interactions ---\n  function initScreen() {\n    if (initialized) return; // Prevent double initialization\n    initialized = true;\n\n    // 1. Check if we already have data (if user comes back to this screen)\n    let savedStyles = null;\n\n    // First, check inputs (current screen data)\n    if (window.onboardingOnlineCustomScreenData.inputs && window.onboardingOnlineCustomScreenData.inputs.style_preference) {\n      const inputData = window.onboardingOnlineCustomScreenData.inputs.style_preference;\n      // Handle metadata object format {type: \"string\", name: \"...\", value: \"...\"}\n      if (inputData && typeof inputData === 'object' && 'value' in inputData) {\n        savedStyles = inputData.value;\n      } else {\n        savedStyles = inputData;\n      }\n    }\n\n    // If not found in inputs, check userData (previous screen submissions)\n    if (!savedStyles) {\n      const userData = window.onboardingOnlineCustomScreenData.userData;\n      if (userData) {\n        for (const screenId in userData) {\n          const screenData = userData[screenId];\n          if (screenData) {\n            if (screenData[\"style_preference\"]) {\n              savedStyles = screenData[\"style_preference\"];\n              break;\n            }\n            if (screenData[\"input['style_preference']\"]) {\n              savedStyles = screenData[\"input['style_preference']\"];\n              break;\n            }\n          }\n        }\n      }\n    }\n\n    // Apply saved styles if found\n    if (savedStyles) {\n      // Handle multiple formats: string, array, or object\n      if (typeof savedStyles === 'string') {\n        selectedStyleIds = savedStyles.split(',').filter(s => s.trim());\n      } else if (Array.isArray(savedStyles)) {\n        selectedStyleIds = savedStyles;\n      } else if (typeof savedStyles === 'object') {\n        // Convert object to array (handles {0: \"style1\", 1: \"style2\"} format)\n        selectedStyleIds = Object.values(savedStyles).filter(s => s);\n      }\n    }\n\n    renderGrid();\n    updateFooter();\n  }\n\n  function renderGrid() {\n    const gridContainer = document.getElementById('style_grid');\n    gridContainer.innerHTML = '';\n\n    styleOptions.forEach(style => {\n      const card = document.createElement('div');\n      card.className = `style-card ${selectedStyleIds.includes(style.id) ? 'selected' : ''}`;\n      card.onclick = () => toggleSelection(style.id);\n\n      card.innerHTML = `\n        <div class=\"selection-indicator\">\n          <div class=\"checkmark\"></div>\n        </div>\n        <img src=\"${style.imageSrc}\" class=\"card-image\" alt=\"${style.label}\">\n        <div class=\"card-footer\">${style.label}</div>\n      `;\n      gridContainer.appendChild(card);\n    });\n  }\n\n  function toggleSelection(id) {\n    const index = selectedStyleIds.indexOf(id);\n    if (index > -1) {\n      // Already selected, remove it\n      selectedStyleIds.splice(index, 1);\n    } else {\n      // Not selected, add it\n      selectedStyleIds.push(id);\n    }\n    renderGrid();\n    updateFooter();\n  }\n\n  function updateFooter() {\n    const countLabel = document.getElementById('selection_count');\n    const continueBtn = document.getElementById('btn_continue');\n    const count = selectedStyleIds.length;\n\n    if (count > 0) {\n      countLabel.textContent = `${count} selected`;\n      continueBtn.disabled = false;\n    } else {\n      countLabel.textContent = \"0 selected\";\n      continueBtn.disabled = true;\n    }\n  }\n\n  function handleContinue() {\n    // Track user input with Amplitude (access from parent window since we're in iframe)\n    const segmentlySDK = getSegmentlySDK();\n\n    if (segmentlySDK) {\n      segmentlySDK.trackEvent('UserUpdatedValue', {\n        screenName: 'style',\n        answers: selectedStyleIds\n      });\n    }\n\n    // Returns comma-separated string (e.g., 'classic,minimalist')\n    window.leaveCustomScreen({ style_preference: selectedStyleIds.join(',') });\n  }\n\n  function handleNotSure() {\n    // Track skip action with Amplitude\n    const segmentlySDK = getSegmentlySDK();\n\n    if (segmentlySDK) {\n      segmentlySDK.trackEvent('UserUpdatedValue', {\n        screenName: 'style',\n        answer: 'SKIPPED'\n      });\n    }\n\n    // Returns empty selection for \"Not Sure\"\n    window.leaveCustomScreen({});\n  }\n\n  // --- 4. UNIVERSAL INITIALIZATION: Works both locally and in onboarding.online ---\n  // Fallback: Initialize after short delay if not already initialized\n  setTimeout(() => {\n    if (!initialized) {\n      console.log('Fallback initialization triggered');\n      initScreen();\n    }\n  }, 100);\n\n</script>\n</body>\n</html>"},"actionBar":{},"header":{},"canvas":{"background":{"kind":"solid","content":{"color":"#f8fbfb"}},"insets":{"bottom":0,"start":16,"top":0,"end":16}},"systemPrompt":null},"tags":[],"screenType":"WebEmbed"},"edee1fbe-76ac-4f0a-b986-d195a4ecb37a":{"content":{"actionBar":{},"embed":{"callback":{"action":{"edges":[{"conditions":[],"transitionKind":"push","nextScreenId":"4c55010e-6f81-46b9-93ef-cc021f811474"}],"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>Confidence Moments</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #fff;\n      }\n    }\n\n    /* --- Progress Bar --- */\n    .progress-container {\n      display: flex;\n      align-items: center;\n      padding: 27px 32px 0px 20px;\n      margin-bottom: 30px;\n    }\n    .back-btn {\n      background: none;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 25px;\n    }\n    .back-btn svg {\n      width: 24px;\n      height: 24px;\n      color: #9CA3AF;\n    }\n    .progress-bar-bg {\n      flex: 1;\n      height: 6px;\n      background-color: #E5E5EB;\n      border-radius: 3px;\n      overflow: hidden;\n    }\n    .progress-bar-fill {\n      height: 100%;\n      background-color: #F5326D;\n      border-radius: 3px;\n    }\n\n    /* --- Header --- */\n    .header-section {\n      padding: 0 24px;\n      margin-bottom: 24px;\n    }\n    #title_label {\n      font-size: 24px;\n      font-weight: 400;\n      line-height: 32px;\n      margin: 0 0 8px 0;\n      color: #1a1a1a;\n      text-align: left;\n    }\n    .subtitle {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n      color: #6b7280;\n      margin: 0;\n      text-align: left;\n    }\n\n    /* --- Options Container --- */\n    .options-container {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 0 24px 32px 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .options-container::-webkit-scrollbar {\n      display: none;\n    }\n\n    /* --- 2x2 Grid --- */\n    .options-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 12px;\n    }\n\n    /* --- Grid Card (centered icon + text) --- */\n    .grid-card {\n      background: #ffffff;\n      border: 1px solid #e5e7eb;\n      border-radius: 16px;\n      padding: 1px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 12px;\n      height: 128px;\n    }\n    .grid-card.selected {\n      border-color: #ff2a6d;\n      background-color: #fff0f5;\n    }\n    .grid-card .card-icon {\n      width: 30px;\n      height: 30px;\n      flex-shrink: 0;\n    }\n    .grid-card .card-icon img {\n      width: 100%;\n      height: 100%;\n    }\n    .grid-card .card-title {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #1f2937;\n      text-align: center;\n    }\n\n    /* --- Full-Width Row Card --- */\n    .row-card {\n      background: #ffffff;\n      border: 1px solid #e5e7eb;\n      border-radius: 16px;\n      padding: 17px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n    .row-card.selected {\n      border-color: #ff2a6d;\n      background-color: #fff0f5;\n    }\n    .row-card .card-icon {\n      width: 24px;\n      height: 24px;\n      flex-shrink: 0;\n    }\n    .row-card .card-icon img {\n      width: 100%;\n      height: 100%;\n    }\n    .row-card .card-title {\n      flex: 1;\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      color: #1f2937;\n    }\n\n    /* Check indicator */\n    .check-circle {\n      width: 24px;\n      height: 24px;\n      border-radius: 9999px;\n      border: 1px solid #d1d5db;\n      background: #ffffff;\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-sizing: border-box;\n      transition: all 0.2s;\n    }\n    .row-card.selected .check-circle {\n      border-color: #ff2a6d;\n      background-color: #ff2a6d;\n    }\n    .check-circle svg {\n      width: 14px;\n      height: 14px;\n      opacity: 0;\n      transition: opacity 0.2s;\n    }\n    .row-card.selected .check-circle svg {\n      opacity: 1;\n    }\n\n    /* --- Footer --- */\n    .footer {\n      border-top: 1px solid #f9fafb;\n      padding: 25px 24px 24px 24px;\n      flex-shrink: 0;\n    }\n    #continue-btn {\n      width: 100%;\n      padding: 16px 0;\n      box-sizing: border-box;\n      font-family: 'Lato', sans-serif;\n      font-size: 18px;\n      font-weight: 400;\n      border: none;\n      border-radius: 9999px;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      background-color: #ff2a6d;\n      color: #FFFFFF;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0px 10px 15px -3px #fbcfe8, 0px 4px 6px -4px #fbcfe8;\n      opacity: 0.5;\n      pointer-events: none;\n    }\n    #continue-btn.active {\n      opacity: 1;\n      pointer-events: auto;\n    }\n    #continue-btn:hover.active {\n      opacity: 0.9;\n    }\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n\n  <div class=\"progress-container\">\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\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 19L5 12L12 5M19 12H5\" />\n      </svg>\n    </button>\n    <div class=\"progress-bar-bg\">\n      <div class=\"progress-bar-fill\" style=\"width: 69%;\"></div>\n    </div>\n  </div>\n\n  <div class=\"header-section\">\n    <h1 id=\"title_label\">Where do you want to feel more put-together?</h1>\n    <p class=\"subtitle\" id=\"subtitle_label\">We'll focus your plan on these moments.</p>\n  </div>\n\n  <div class=\"options-container\" id=\"list-container\"></div>\n\n  <div class=\"footer\">\n    <button id=\"continue-btn\" onclick=\"handleContinue()\">Continue</button>\n  </div>\n\n</div>\n\n<script>\n  // --- 1. Environment Detection & Communication Setup ---\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('Selected confidence moments:', 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  // --- 2. Screen Logic ---\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  const GRID_OPTIONS = [\n    { id: 'WORK_MEETINGS', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564813025_icon-work-meetings.svg/origin.svg', title: 'Work Meetings' },\n    { id: 'SCHOOL_DROPOFF', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564813506_icon-school-dropoff.svg/origin.svg', title: 'School Drop-off' },\n    { id: 'DATE_NIGHTS', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564813915_icon-date-nights.svg/origin.svg', title: 'Date Nights' },\n    { id: 'SOCIAL_EVENTS', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564814275_icon-social-events.svg/origin.svg', title: 'Social Events' }\n  ];\n\n  const ROW_OPTIONS = [\n    { id: 'DAILY_LIFE', icon: 'https://api.segmently.ai/assets/onboardings/ZMrLPVrfC3L6C5aqYWEb/custom-images/en-US_1772564814622_icon-daily-life.svg/origin.svg', title: 'Just Daily Life' }\n  ];\n\n  const ALL_OPTIONS = [...GRID_OPTIONS, ...ROW_OPTIONS];\n\n  let selectedItems = [];\n\n  function initScreen() {\n    let savedValue = null;\n\n    if (window.onboardingOnlineCustomScreenData.inputs && window.onboardingOnlineCustomScreenData.inputs.confidence_moments) {\n      const inputData = window.onboardingOnlineCustomScreenData.inputs.confidence_moments;\n      if (inputData && typeof inputData === 'object' && 'value' in inputData) {\n        savedValue = inputData.value;\n      } else {\n        savedValue = inputData;\n      }\n    }\n\n    if (!savedValue) {\n      const userData = window.onboardingOnlineCustomScreenData.userData;\n      if (userData) {\n        for (const screenId in userData) {\n          const screenData = userData[screenId];\n          if (screenData) {\n            if (screenData[\"confidence_moments\"]) {\n              savedValue = screenData[\"confidence_moments\"];\n              break;\n            }\n            if (screenData[\"input['confidence_moments']\"]) {\n              savedValue = screenData[\"input['confidence_moments']\"];\n              break;\n            }\n          }\n        }\n      }\n    }\n\n    if (savedValue) {\n      if (typeof savedValue === 'string') {\n        selectedItems = savedValue.split(',').filter(g => g.trim());\n      } else if (Array.isArray(savedValue)) {\n        selectedItems = savedValue;\n      } else if (typeof savedValue === 'object') {\n        selectedItems = Object.values(savedValue).filter(g => g);\n      }\n    } else {\n      selectedItems = ['DAILY_LIFE'];\n    }\n\n    renderList();\n\n    const labels = window.onboardingOnlineCustomScreenData.labels;\n    const lang = window.onboardingOnlineCustomScreenData.language;\n    if (labels && labels.title && labels.title.value.l10n[lang]) {\n      document.getElementById('title_label').textContent = labels.title.value.l10n[lang];\n    }\n  }\n\n  function renderList() {\n    const container = document.getElementById('list-container');\n    container.innerHTML = '';\n\n    // 2x2 Grid\n    const grid = document.createElement('div');\n    grid.className = 'options-grid';\n\n    GRID_OPTIONS.forEach(item => {\n      const isSelected = selectedItems.includes(item.id);\n      const card = document.createElement('div');\n      card.className = `grid-card${isSelected ? ' selected' : ''}`;\n      card.onclick = () => toggleSelection(item.id);\n\n      card.innerHTML = `\n        <div class=\"card-icon\">\n          <img src=\"${item.icon}\" alt=\"\">\n        </div>\n        <div class=\"card-title\">${item.title}</div>\n      `;\n\n      grid.appendChild(card);\n    });\n\n    container.appendChild(grid);\n\n    // Full-width row options\n    ROW_OPTIONS.forEach(item => {\n      const isSelected = selectedItems.includes(item.id);\n      const card = document.createElement('div');\n      card.className = `row-card${isSelected ? ' selected' : ''}`;\n      card.onclick = () => toggleSelection(item.id);\n\n      card.innerHTML = `\n        <div class=\"card-icon\">\n          <img src=\"${item.icon}\" alt=\"\">\n        </div>\n        <div class=\"card-title\">${item.title}</div>\n        <div class=\"check-circle\">\n          <svg viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M11.6667 3.5L5.25 9.91667L2.33333 7\" stroke=\"white\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n      `;\n\n      container.appendChild(card);\n    });\n\n    updateButtonState();\n  }\n\n  function toggleSelection(id) {\n    if (selectedItems.includes(id)) {\n      selectedItems = selectedItems.filter(item => item !== id);\n    } else {\n      if (id === 'DAILY_LIFE') {\n        selectedItems = ['DAILY_LIFE'];\n      } else {\n        selectedItems = selectedItems.filter(item => item !== 'DAILY_LIFE');\n        selectedItems.push(id);\n      }\n    }\n    renderList();\n  }\n\n  function updateButtonState() {\n    const btn = document.getElementById('continue-btn');\n    if (selectedItems.length > 0) {\n      btn.classList.add('active');\n    } else {\n      btn.classList.remove('active');\n    }\n  }\n\n  function handleContinue() {\n    const segmentlySDK = getSegmentlySDK();\n    if (segmentlySDK) {\n      segmentlySDK.trackEvent('UserUpdatedValue', {\n        screenName: 'confidence_moments',\n        answers: selectedItems\n      });\n    }\n\n    window.leaveCustomScreen({\n      confidence_moments: selectedItems.join(',')\n    });\n  }\n</script>\n\n</body>\n</html>\n"},"systemPrompt":null,"header":{},"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"},"insets":{"start":16,"bottom":0,"end":16,"top":0}},"animated":true,"offlineFirst":true,"countdown":null},"screenType":"WebEmbed","tags":[],"name":"put-together","id":"edee1fbe-76ac-4f0a-b986-d195a4ecb37a","position":{"y":-608,"x":14586.66666666666}},"screen2110":{"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>Social Proof Screen</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=Lato:wght@400;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: 'Lato', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      background: linear-gradient(to bottom, #ffffff 0%, #fff1f1 100%);\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    /* --- Desktop Preview Simulation (iPhone Frame) --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    /* --- Logo --- */\n    .logo-section {\n      display: flex;\n      justify-content: center;\n      padding: 42px 32px 32px 32px;\n      flex-shrink: 0;\n    }\n    .logo-section img {\n      height: 44px;\n      width: auto;\n      object-fit: contain;\n    }\n\n    /* --- Main Content (circle + text) --- */\n    .main-content {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      padding: 0 40px;\n      flex-shrink: 1;\n      min-height: 0;\n    }\n    .hero-circle {\n      aspect-ratio: 1 / 1;\n      max-width: 280px;\n      width: 100%;\n      max-height: 100%;\n      flex-shrink: 1;\n      min-height: 0;\n    }\n    .hero-circle img {\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n    }\n\n    /* --- Text Block --- */\n    .text-block {\n      display: flex;\n      flex-direction: column;\n      gap: 15px;\n      align-items: center;\n      padding: 32px 8px 0 8px;\n      flex-shrink: 0;\n    }\n    #title_label {\n      font-size: 36px;\n      font-weight: 400;\n      line-height: 37.8px;\n      letter-spacing: -0.9px;\n      margin: 0;\n      color: #2d2926;\n      text-align: center;\n    }\n    .subtitle {\n      font-size: 18px;\n      font-weight: 400;\n      line-height: 29.25px;\n      margin: 0;\n      color: #6d6a66;\n      text-align: center;\n    }\n\n    /* --- Footer --- */\n    .footer-section {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-end;\n      align-items: center;\n      gap: 14px;\n      padding: 24px 32px 40px 32px;\n    }\n\n    /* --- Button --- */\n    #action_button {\n      width: 100%;\n      padding: 16px 0;\n      box-sizing: border-box;\n      font-family: 'Lato', sans-serif;\n      font-size: 18px;\n      font-weight: 400;\n      border: none;\n      border-radius: 9999px;\n      cursor: pointer;\n      transition: opacity 0.2s;\n      background-color: #ff2a6d;\n      color: #FFFFFF;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      box-shadow: 0px 10px 15px -3px #fbcfe8, 0px 4px 6px -4px #fbcfe8;\n      position: relative;\n    }\n    #action_button:hover:not(:disabled) {\n      opacity: 0.9;\n    }\n    #action_button .btn-icon {\n      width: 18px;\n      height: 18px;\n      flex-shrink: 0;\n    }\n\n    /* --- CTA Helper Label --- */\n    .cta-helper {\n      font-size: 13px;\n      font-weight: 400;\n      line-height: 18px;\n      letter-spacing: -0.1px;\n      color: #6d6a66;\n      text-align: center;\n      margin: 0;\n      max-width: 320px;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen-container\">\n\n    <div class=\"logo-section\">\n      <picture>\n        <source srcset=\"https://api.segmently.ai/assets/onboardings/amIEKBaoL2KtnIIT0DNL/custom-images/en-US_1773418544876_logo-outfit-formulas.webp/origin.webp\" type=\"image/webp\">\n        <img src=\"https://api.segmently.ai/assets/onboardings/amIEKBaoL2KtnIIT0DNL/custom-images/en-US_1773418545474_logo-outfit-formulas.png/origin.png\" alt=\"Outfit Formulas\" decoding=\"async\">\n      </picture>\n    </div>\n\n    <div class=\"main-content\">\n      <div class=\"hero-circle\">\n        <picture>\n          <source srcset=\"https://api.segmently.ai/assets/onboardings/amIEKBaoL2KtnIIT0DNL/custom-images/en-US_1773418546031_hero-image_103_margin.webp/origin.webp\" type=\"image/webp\">\n          <img src=\"https://api.segmently.ai/assets/onboardings/amIEKBaoL2KtnIIT0DNL/custom-images/en-US_1773418546924_hero-image_103_margin.png/origin.png\" alt=\"\" decoding=\"async\" fetchpriority=\"high\">\n        </picture>\n      </div>\n\n      <div class=\"text-block\">\n        <h1 id=\"title_label\">Finally, feel like<br>yourself again.</h1>\n        <p class=\"subtitle\" id=\"subtitle_label\">Wake up knowing exactly what to wear. No overthinking. Just ease.</p>\n      </div>\n    </div>\n\n    <div class=\"footer-section\">\n      <button id=\"action_button\">\n        <span id=\"button_text\">Create my Outfit Formula</span>\n        <svg class=\"btn-icon\" viewBox=\"0 0 17 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7.51455 1.3623C7.58085 1.00733 7.89069 0.75 8.2518 0.75C8.6129 0.75 8.92274 1.00733 8.98905 1.3623L9.7773 5.5308C9.89187 6.13731 10.3663 6.61172 10.9728 6.7263L15.1413 7.51455C15.4963 7.58085 15.7536 7.89069 15.7536 8.2518C15.7536 8.6129 15.4963 8.92274 15.1413 8.98905L10.9728 9.7773C10.3663 9.89187 9.89187 10.3663 9.7773 10.9728L8.98905 15.1413C8.92274 15.4963 8.6129 15.7536 8.2518 15.7536C7.89069 15.7536 7.58085 15.4963 7.51455 15.1413L6.7263 10.9728C6.61172 10.3663 6.13731 9.89187 5.5308 9.7773L1.3623 8.98905C1.00733 8.92274 0.75 8.6129 0.75 8.2518C0.75 7.89069 1.00733 7.58085 1.3623 7.51455L5.5308 6.7263C6.13731 6.61172 6.61172 6.13731 6.7263 5.5308L7.51455 1.3623M14.2518 0.751796V3.7518M15.7518 2.2518H12.7518\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M0.751796 14.2518C0.751796 15.0797 1.42392 15.7518 2.2518 15.7518C3.07967 15.7518 3.7518 15.0797 3.7518 14.2518C3.7518 13.4239 3.07967 12.7518 2.2518 12.7518C1.42392 12.7518 0.751796 13.4239 0.751796 14.2518H0.751796\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n      <p class=\"cta-helper\" id=\"cta_helper_label\">We&rsquo;ll create it for you &mdash; tailored to your body, style, and lifestyle.</p>\n    </div>\n\n  </div>\n\n  <script>\n    // ========================================================================\n    // --- OFFICIAL ONBOARDING.ONLINE COMMUNICATION SCRIPT ---\n    // ========================================================================\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: '',\n      screenId: ''\n    };\n    window.leaveCustomScreen = () => {};\n    window.backScreen = () => {};\n\n    window.onmessage = (event) => {\n      if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\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        runInitialSetup();\n      }\n    };\n\n    // Standalone fallback\n    window.addEventListener('DOMContentLoaded', () => {\n      setTimeout(() => {\n        if (!window.onboardingOnlineCustomScreenData.screenId) {\n          console.log('Running in standalone mode');\n          runInitialSetup();\n        }\n      }, 100);\n    });\n\n    // ========================================================================\n    // --- SCREEN LOGIC ---\n    // ========================================================================\n\n    let initialized = false;\n\n    function runInitialSetup() {\n      if (initialized) return;\n      initialized = true;\n      console.log(\"Screen Initialized\");\n      addEventListeners();\n      updateLabels();\n    }\n\n    function addEventListeners() {\n      let advanced = false;\n      const advance = (event) => {\n        if (advanced) return;\n        advanced = true;\n        if (event) {\n          event.preventDefault();\n          event.stopPropagation();\n        }\n        window.leaveCustomScreen({});\n      };\n\n      document.addEventListener('click', advance, true);\n      document.addEventListener('touchend', advance, true);\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 titleElement = document.getElementById('title_label');\n      if (titleElement && labels.title_label?.value?.l10n?.[language]) {\n        titleElement.innerHTML = labels.title_label.value.l10n[language];\n      }\n\n      const subtitleElement = document.getElementById('subtitle_label');\n      if (subtitleElement && labels.subtitle_label?.value?.l10n?.[language]) {\n        subtitleElement.innerHTML = labels.subtitle_label.value.l10n[language];\n      }\n\n      const buttonTextElement = document.getElementById('button_text');\n      if (buttonTextElement && labels.button_text?.value?.l10n?.[language]) {\n        buttonTextElement.textContent = labels.button_text.value.l10n[language];\n      }\n\n      const ctaHelperElement = document.getElementById('cta_helper_label');\n      if (ctaHelperElement && labels.cta_helper_label?.value?.l10n?.[language]) {\n        ctaHelperElement.innerHTML = labels.cta_helper_label.value.l10n[language];\n      }\n    }\n  </script>\n</body>\n</html>\n","callback":{"action":{"edges":[{"nextScreenId":"2d432bfa-0065-4283-ad9d-dcfe303de03d","transitionKind":"push","conditions":[]}],"kind":"advance"}}},"actionBar":{},"header":{},"canvas":{"background":{"kind":"solid","content":{"color":"#f8fbfb"}},"insets":{"bottom":0,"start":16,"top":0,"end":16}},"systemPrompt":null,"offlineFirst":true,"countdown":null,"animated":true},"tags":[],"screenType":"WebEmbed","name":"intro","id":"screen2110","position":{"x":752,"y":496}},"screen2114":{"tags":[],"screenType":"WebEmbed","content":{"embed":{"callback":{"action":{"edges":[{"transitionKind":"push","nextScreenId":"screen587","conditions":[]},{"transitionKind":"push","nextScreenId":"screen2116","conditions":[{"operator":"eq","value":"active-subscription","key":"app_user_id"}]}],"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>Creating Profile Loading Screen</title>\n  <style>\n    /* =========================================\n       1. CORE RESPONSIVE BOILERPLATE\n       (Do not modify this section)\n       ========================================= */\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #ffffff;\n    }\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      overflow-y: auto;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n    }\n\n    /* --- Desktop Preview Simulation --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px; /* iPhone Pro Max width */\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.1);\n        border: 1px solid #ddd;\n        overflow: hidden;\n        position: relative;\n        background-color: #ffffff;\n      }\n    }\n\n    /* =========================================\n       2. CUSTOM SCREEN STYLES\n       (Adjust colors and sizes here)\n       ========================================= */\n    :root {\n      --primary-color: #E91E63; /* Dark Pink */\n      --secondary-color: #F8BBD0; /* Light Pink */\n      --text-color: #000000;\n    }\n\n    /* The Container for the Loader */\n    .loader-wrapper {\n      position: relative;\n      width: 156px;\n      height: 156px;\n      margin-bottom: 30px;\n    }\n\n    /* Central User Icon */\n    .user-icon {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 65px;\n      height: 65px;\n      fill: var(--secondary-color);\n      z-index: 2;\n    }\n\n    /* The Spinning Ring */\n    .spinner {\n      color: official;\n      display: inline-block;\n      position: relative;\n      width: 100%;\n      height: 100%;\n    }\n    .spinner div {\n      transform-origin: 78px 78px; /* Half of width/height */\n      animation: spinner-fade 1.2s linear infinite;\n    }\n    .spinner div:after {\n      content: \" \";\n      display: block;\n      position: absolute;\n      top: 13px;\n      left: 74px; /* Center horizontally (78) minus half width (4) */\n      width: 8px;\n      height: 22px;\n      border-radius: 4px; /* Softens the edges like the image */\n      background: var(--primary-color);\n    }\n    \n    /* Rotation for the 12 segments */\n    .spinner div:nth-child(1) { transform: rotate(0deg); animation-delay: -1.1s; }\n    .spinner div:nth-child(2) { transform: rotate(30deg); animation-delay: -1.0s; }\n    .spinner div:nth-child(3) { transform: rotate(60deg); animation-delay: -0.9s; }\n    .spinner div:nth-child(4) { transform: rotate(90deg); animation-delay: -0.8s; }\n    .spinner div:nth-child(5) { transform: rotate(120deg); animation-delay: -0.7s; }\n    .spinner div:nth-child(6) { transform: rotate(150deg); animation-delay: -0.6s; }\n    .spinner div:nth-child(7) { transform: rotate(180deg); animation-delay: -0.5s; }\n    .spinner div:nth-child(8) { transform: rotate(210deg); animation-delay: -0.4s; }\n    .spinner div:nth-child(9) { transform: rotate(240deg); animation-delay: -0.3s; }\n    .spinner div:nth-child(10) { transform: rotate(270deg); animation-delay: -0.2s; }\n    .spinner div:nth-child(11) { transform: rotate(300deg); animation-delay: -0.1s; }\n    .spinner div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; }\n\n    @keyframes spinner-fade {\n      0% { opacity: 1; }\n      100% { opacity: 0.2; }\n    }\n\n    /* Text Styling */\n    h2 {\n      font-size: 18px;\n      font-weight: 600;\n      color: var(--text-color);\n      text-align: center;\n      margin: 0;\n    }\n  </style>\n</head>\n<body>\n\n<div class=\"screen-container\">\n  \n  <div class=\"loader-wrapper\">\n    <svg class=\"user-icon\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"/>\n    </svg>\n\n    <div class=\"spinner\">\n      <div></div><div></div><div></div><div></div>\n      <div></div><div></div><div></div><div></div>\n      <div></div><div></div><div></div><div></div>\n    </div>\n  </div>\n\n  <h2 id=\"loading_text\">Creating profile<br>please wait...</h2>\n\n</div>\n\n<script>\n  // Helper function to find segmentlySDK in parent chain (up to 4 levels)\n  function getSegmentlySDK() {\n    let currentWindow = window;\n\n    // Check up to 4 levels up the parent chain\n    for (let i = 0; i < 4; i++) {\n      try {\n        // Try to access segmentlySDK (may fail due to cross-origin restrictions)\n        if (currentWindow.segmentlySDK) {\n          return currentWindow.segmentlySDK;\n        }\n\n        // Stop if we've reached the top window\n        if (currentWindow === currentWindow.parent) {\n          break;\n        }\n\n        currentWindow = currentWindow.parent;\n      } catch (e) {\n        // Cross-origin access blocked, stop searching\n        console.warn('Cross-origin access blocked at level', i);\n        break;\n      }\n    }\n\n    return null;\n  }\n\n  // =====================================================================================\n  // CONFIGURATION\n  // =====================================================================================\n  const CREATE_USER_API_URL = 'https://us-central1-outfit-formulas.cloudfunctions.net/createOnboardingUser';\n  const STORE_ONBOARDING_API_URL = 'https://storeonboardingdata-gxwrbkza3q-uc.a.run.app/api/v1/users';\n  const BEARER_TOKEN = 'kPq4Yz7wAbJ5sXft9gQFhR3Nc2uL0MVe';\n  const MAX_RETRIES = 1;\n\n  // =====================================================================================\n  // HOST COMMUNICATION LOGIC\n  // =====================================================================================\n  window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: '',\n      screenId: ''\n  };\n  window.leaveCustomScreen = () => {};\n\n  window.onmessage = (event) => {\n    if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n      // 1. Store Data\n      Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n\n      // 2. Setup Return Channel\n      const port = event.ports[0];\n      if (port) {\n        window.leaveCustomScreen = (args) => {\n          port.postMessage({\n            eventName: 'LeaveCustomScreen',\n            args, \n          }, []);\n        };\n      }\n\n      // 3. Start the Screen Logic\n      runInitialSetup();\n    }\n  };\n\n  // Safe Amplitude tracking helper — never throws, always logs\n  function trackAmplitude(eventName, props) {\n    try {\n      const sdk = getSegmentlySDK();\n      if (sdk) {\n        sdk.trackEvent(eventName, props);\n      } else {\n        console.warn('[Amplitude] SDK unavailable, event lost:', eventName, props);\n      }\n    } catch (e) {\n      console.warn('[Amplitude] Failed to track event:', eventName, e.message);\n    }\n  }\n\n  function runInitialSetup() {\n    console.log(\"Screen Initialized. Starting API call...\");\n\n    // Track loading screen initialization\n    trackAmplitude('LoadingScreenStarted', {\n      screenName: 'loading_screen',\n      action: 'initialized',\n      sdkAvailable: !!getSegmentlySDK()\n    });\n\n    // Optional: Update text if Dynamic Labels are provided\n    updateLabels();\n\n    // Call API to create user profile\n    callCreateUserAPI();\n  }\n\n  function updateLabels() {\n    const labels = window.onboardingOnlineCustomScreenData.labels;\n    const language = window.onboardingOnlineCustomScreenData.language;\n    \n    if (labels && labels.loading_text?.value?.l10n?.[language]) {\n        document.getElementById('loading_text').innerHTML = labels.loading_text.value.l10n[language];\n    }\n  }\n\n  // Helper function to gather all onboarding data\n  function gatherOnboardingData() {\n    const userData = window.onboardingOnlineCustomScreenData.userData || {};\n\n    console.log('=== GATHERING ONBOARDING DATA ===');\n\n    // Helper to extract value from userData across all screens\n    function getValue(keys) {\n      for (const screenId in userData) {\n        const screenData = userData[screenId];\n        if (screenData) {\n          for (const key of keys) {\n            if (screenData[key]) {\n              console.log(`✓ Found '${key}' in screen '${screenId}'`);\n              return screenData[key];\n            }\n          }\n        }\n      }\n      console.log(`✗ Not found: ${keys.join(' or ')}`);\n      return null;\n    }\n\n    // Helper to convert comma-separated string to array\n    function toArray(value) {\n      if (!value) return [];\n      if (Array.isArray(value)) return value;\n      if (typeof value === 'string') {\n        return value.split(',').filter(v => v.trim());\n      }\n      if (typeof value === 'object') {\n        return Object.values(value).filter(v => v);\n      }\n      return [];\n    }\n\n    // Gather all data according to API requirements\n    const ageGroup = getValue(['age_group', \"input['age_group']\"]);\n    const dressingFeeling = getValue(['dressing_feeling', \"input['dressing_feeling']\"]) || '';\n    const goalsRaw = getValue(['selected_goals', \"input['selected_goals']\"]);\n    const goals = toArray(goalsRaw);\n    const mainFrustration = getValue(['main_frustration', \"input['main_frustration']\"]) || '';\n    const typicalWeek = getValue(['typical_week', \"input['typical_week']\"]) || '';\n    const stylePreferenceRaw = getValue(['style_preference', \"input['style_preference']\"]);\n    const stylePreference = toArray(stylePreferenceRaw);\n    const monthlyBudget = getValue(['monthly_budget', \"input['monthly_budget']\"]) || '';\n    const shoppingHabit = getValue(['shopping_habit', \"input['shopping_habit']\"]) || '';\n    const bodyChanges = getValue(['body_changes', \"input['body_changes']\"]) || '';\n    const morningRoutine = getValue(['morning_routine', \"input['morning_routine']\"]) || '';\n    const wardrobeUsage = getValue(['wardrobe_usage', \"input['wardrobe_usage']\"]) || '';\n    const shoppingTriggersRaw = getValue(['shopping_triggers', \"input['shopping_triggers']\"]);\n    const shoppingTriggers = toArray(shoppingTriggersRaw);\n    const colorSeason = getValue(['color_season', \"input['color_season']\"]) || '';\n    const seasonalNeeds = getValue(['seasonal_needs', \"input['seasonal_needs']\"]) || '';\n    const wardrobeHabitsRaw = getValue(['wardrobe_habits', \"input['wardrobe_habits']\"]);\n    const wardrobeHabits = toArray(wardrobeHabitsRaw);\n    const confidenceMomentsRaw = getValue(['confidence_moments', \"input['confidence_moments']\"]);\n    const confidenceMoments = toArray(confidenceMomentsRaw);\n    const pastSuccess = getValue(['past_success', \"input['past_success']\"]) || '';\n    const failedAttempts = getValue(['failed_attempts', \"input['failed_attempts']\"]) || '';\n    const decisionFatigue = getValue(['decision_fatigue', \"input['decision_fatigue']\"]) || '';\n\n    const result = {\n      age_range: ageGroup,\n      dressing_feeling: dressingFeeling,\n      goals: goals,\n      main_frustration: mainFrustration,\n      typical_week: typicalWeek,\n      style_preference: stylePreference,\n      monthly_budget: monthlyBudget,\n      shopping_habit: shoppingHabit,\n      body_changes: bodyChanges,\n      morning_routine: morningRoutine,\n      wardrobe_usage: wardrobeUsage,\n      shopping_triggers: shoppingTriggers,\n      color_season: colorSeason,\n      seasonal_needs: seasonalNeeds,\n      wardrobe_habits: wardrobeHabits,\n      confidence_moments: confidenceMoments,\n      past_success: pastSuccess,\n      failed_attempts: failedAttempts,\n      decision_fatigue: decisionFatigue\n    };\n\n    console.log('Onboarding data gathered successfully');\n    console.log('================================\\n');\n\n    return result;\n  }\n\n  async function callCreateUserAPI(retryCount = 0) {\n    try {\n      const segmentlySDK = getSegmentlySDK();\n\n      if (!segmentlySDK) {\n        console.error('segmentlySDK not available');\n        trackAmplitude('LoadingScreenError', {\n          screenName: 'loading_screen',\n          action: 'sdk_unavailable',\n          errorMessage: 'segmentlySDK is null',\n          retryAttempt: retryCount + 1\n        });\n        showErrorAlert('sdk_unavailable');\n        return;\n      }\n\n      // Get email and platform user ID from segmentlySDK\n      let email, platformUserId;\n      try {\n        email = segmentlySDK.getEmail();\n        platformUserId = segmentlySDK.getPlatformUserId();\n      } catch (sdkError) {\n        console.error('Failed to get email/userId from SDK:', sdkError);\n        trackAmplitude('LoadingScreenError', {\n          screenName: 'loading_screen',\n          action: 'sdk_method_error',\n          errorMessage: sdkError.message,\n          retryAttempt: retryCount + 1\n        });\n        showErrorAlert('sdk_method_error');\n        return;\n      }\n\n      if (!email) {\n        console.error('No email found in userData');\n        trackAmplitude('LoadingScreenError', {\n          screenName: 'loading_screen',\n          action: 'no_email',\n          errorMessage: 'Email is empty or undefined',\n          retryAttempt: retryCount + 1\n        });\n        showErrorAlert('no_email');\n        return;\n      }\n\n      console.log('Using email:', email, 'platformUserId:', platformUserId);\n\n      // Step 1: Create user and get Firebase token\n      const createUserBody = { email: email };\n      if (platformUserId) {\n        createUserBody.userId = platformUserId;\n      }\n\n      const createUserResponse = await fetch(CREATE_USER_API_URL, {\n        method: 'POST',\n        headers: {\n          'Authorization': `Bearer ${BEARER_TOKEN}`,\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify(createUserBody)\n      });\n\n      if (!createUserResponse.ok) {\n        throw new Error(`Create user API returned ${createUserResponse.status}`);\n      }\n\n      const createUserResult = await createUserResponse.json();\n      console.log('Create user API call successful');\n\n      // Track user creation success\n      trackAmplitude('UserCreated', {\n        screenName: 'loading_screen',\n        action: 'user_created',\n        existingUser: createUserResult.existing_user\n      });\n\n      // Validate all required fields exist in response\n      const requiredFields = ['token', 'idToken', 'email', 'existing_user', 'user_id'];\n      const missingFields = requiredFields.filter(field => !createUserResult[field] && createUserResult[field] !== '');\n\n      if (missingFields.length > 0) {\n        console.error('Missing required fields:', missingFields);\n        throw new Error(`Missing fields: ${missingFields.join(', ')}`);\n      }\n\n      // Step 2: Gather all onboarding data\n      const onboardingData = gatherOnboardingData();\n      onboardingData.onboarding_version = 'v4';\n\n      // Step 3: Send onboarding data to storage API\n      const storeOnboardingResponse = await fetch(`${STORE_ONBOARDING_API_URL}/${createUserResult.user_id}/onboarding`, {\n        method: 'POST',\n        headers: {\n          'Authorization': `Bearer ${createUserResult.idToken}`,\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify(onboardingData)\n      });\n\n      if (!storeOnboardingResponse.ok) {\n        const errorText = await storeOnboardingResponse.text();\n        console.error('Store onboarding API error');\n        throw new Error(`Store onboarding API returned ${storeOnboardingResponse.status}`);\n      }\n\n      const storeOnboardingResult = await storeOnboardingResponse.json();\n      console.log('Store onboarding API call successful');\n\n      // Track onboarding data storage success\n      trackAmplitude('OnboardingDataStored', {\n        screenName: 'loading_screen',\n        action: 'data_stored',\n        hasDressingFeeling: !!onboardingData.dressing_feeling,\n        hasGoals: onboardingData.goals.length > 0,\n        hasMainFrustration: !!onboardingData.main_frustration,\n        hasTypicalWeek: !!onboardingData.typical_week,\n        hasStylePreference: onboardingData.style_preference.length > 0,\n        hasMonthlyBudget: !!onboardingData.monthly_budget,\n        hasShoppingHabit: !!onboardingData.shopping_habit,\n        hasBodyChanges: !!onboardingData.body_changes,\n        hasMorningRoutine: !!onboardingData.morning_routine,\n        hasWardrobeUsage: !!onboardingData.wardrobe_usage,\n        hasShoppingTriggers: onboardingData.shopping_triggers.length > 0,\n        hasColorSeason: !!onboardingData.color_season,\n        hasSeasonalNeeds: !!onboardingData.seasonal_needs,\n        hasWardrobeHabits: onboardingData.wardrobe_habits.length > 0,\n        hasConfidenceMoments: onboardingData.confidence_moments.length > 0,\n        hasPastSuccess: !!onboardingData.past_success,\n        hasFailedAttempts: !!onboardingData.failed_attempts,\n        hasDecisionFatigue: !!onboardingData.decision_fatigue\n      });\n\n      // Navigate to next screen with all response data (token first)\n      finishLoading(createUserResult);\n\n    } catch (error) {\n      console.error('API call failed:', error);\n\n      // Track API error\n      trackAmplitude('LoadingScreenError', {\n        screenName: 'loading_screen',\n        action: 'api_error',\n        errorMessage: error.message,\n        retryAttempt: retryCount + 1\n      });\n\n      // Retry once if this is the first attempt\n      if (retryCount < MAX_RETRIES) {\n        console.log(`Retrying API call (attempt ${retryCount + 2}/${MAX_RETRIES + 1})...`);\n        trackAmplitude('LoadingScreenRetry', {\n          screenName: 'loading_screen',\n          action: 'retry',\n          retryAttempt: retryCount + 2,\n          errorMessage: error.message\n        });\n        await callCreateUserAPI(retryCount + 1);\n      } else {\n        // Show user-friendly error after retry exhausted\n        showErrorAlert('api_error_exhausted');\n      }\n    }\n  }\n\n  function showErrorAlert(reason) {\n    // Track error screen shown\n    trackAmplitude('ErrorScreenShown', {\n      screenName: 'loading_screen',\n      action: 'error_screen_shown',\n      errorReason: reason || 'unknown'\n    });\n\n    // Hide spinner\n    document.querySelector('.loader-wrapper').style.display = 'none';\n\n    // Update text to show error message\n    const loadingText = document.getElementById('loading_text');\n    loadingText.innerHTML = 'Something went wrong<br>Please try again';\n\n    // Create retry button\n    const retryButton = document.createElement('button');\n    retryButton.textContent = 'Retry';\n    retryButton.style.cssText = `\n      margin-top: 20px;\n      padding: 12px 32px;\n      background-color: var(--primary-color);\n      color: white;\n      border: none;\n      border-radius: 8px;\n      font-size: 16px;\n      font-weight: 600;\n      cursor: pointer;\n      box-shadow: 0 2px 8px rgba(233, 30, 99, 0.3);\n      transition: transform 0.2s, box-shadow 0.2s;\n    `;\n\n    // Add hover effect\n    retryButton.onmouseover = () => {\n      retryButton.style.transform = 'translateY(-2px)';\n      retryButton.style.boxShadow = '0 4px 12px rgba(233, 30, 99, 0.4)';\n    };\n    retryButton.onmouseout = () => {\n      retryButton.style.transform = 'translateY(0)';\n      retryButton.style.boxShadow = '0 2px 8px rgba(233, 30, 99, 0.3)';\n    };\n\n    // Retry on button click\n    retryButton.onclick = () => {\n      // Track retry button tap\n      trackAmplitude('RetryButtonTapped', {\n        screenName: 'loading_screen',\n        action: 'retry_tapped',\n        errorReason: reason || 'unknown'\n      });\n\n      // Remove button and show spinner again\n      retryButton.remove();\n      loadingText.innerHTML = 'Creating profile<br>please wait...';\n      document.querySelector('.loader-wrapper').style.display = 'block';\n\n      // Retry API call\n      callCreateUserAPI(0);\n    };\n\n    // Add button to screen\n    document.querySelector('.screen-container').appendChild(retryButton);\n  }\n\n  function finishLoading(result) {\n    try {\n      // Check if user has active subscription\n      if (result.hasActiveSubscription === true) {\n        console.log('Active subscription detected, redirecting to active subscription screen');\n\n        trackAmplitude('ActiveSubscriptionDetected', {\n          screenName: 'loading_screen',\n          action: 'redirect_to_active_subscription'\n        });\n\n        // Set variable before leaving\n        const sdk1 = getSegmentlySDK();\n        if (sdk1 && sdk1.setVariable) {\n          sdk1.setVariable('app_user_id', 'active-subscription');\n        }\n\n        window.leaveCustomScreen({\n          app_user_id: \"active-subscription\"\n        });\n      } else {\n        // Track successful completion before navigating\n        trackAmplitude('LoadingScreenCompleted', {\n          screenName: 'loading_screen',\n          action: 'navigating_to_next',\n          hasUserId: !!result.user_id,\n          hasToken: !!result.token,\n          existingUser: result.existing_user\n        });\n\n        // Set variables before leaving\n        const sdk2 = getSegmentlySDK();\n        if (sdk2 && sdk2.setVariable) {\n          if (result.user_id) sdk2.setVariable('app_user_id', result.user_id);\n          if (result.token) sdk2.setVariable('token', result.token);\n          if (result.email) sdk2.setVariable('email', result.email);\n          if (result.existing_user) sdk2.setVariable('existing_user', result.existing_user);\n          if (result.password) sdk2.setVariable('password', result.password);\n        }\n\n        // Navigate to next screen with all response data (token as first property)\n        window.leaveCustomScreen({\n          app_user_id: result.user_id,\n          token: result.token,\n          email: result.email,\n          existing_user: result.existing_user,\n          password: result.password\n        });\n      }\n    } catch (error) {\n      console.error('finishLoading failed:', error);\n      trackAmplitude('LoadingScreenError', {\n        screenName: 'loading_screen',\n        action: 'finish_loading_error',\n        errorMessage: error.message\n      });\n      showErrorAlert('finish_loading_error');\n    }\n  }\n</script>\n\n</body>\n</html>"},"actionBar":{},"header":{},"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"},"insets":{"end":16,"top":0,"start":16,"bottom":0}},"systemPrompt":null,"countdown":null,"offlineFirst":true,"animated":true},"position":{"y":-592,"x":21232},"name":"creating-profile","id":"screen2114"},"screen2116":{"content":{"actionBar":{},"embed":{"callback":{"action":{"kind":"advance","edges":[]}},"html":"<!DOCTYPE html>\n<html>\n\n<head>\n  <meta charset='UTF-8'>\n  <title>Your account is ready</title>\n  <!-- OO-PORT-MESSAGE-HANDLER-START -->\n  <!-- DO NOT REMOVE THIS CODE -->\n  <script>\n  // Helper function to find segmentlySDK in parent chain (up to 4 levels)\n  function getSegmentlySDK() {\n    let currentWindow = window;\n\n    // Check up to 4 levels up the parent chain\n    for (let i = 0; i < 4; i++) {\n      try {\n        // Try to access segmentlySDK (may fail due to cross-origin restrictions)\n        if (currentWindow.segmentlySDK) {\n          return currentWindow.segmentlySDK;\n        }\n\n        // Stop if we've reached the top window\n        if (currentWindow === currentWindow.parent) {\n          break;\n        }\n\n        currentWindow = currentWindow.parent;\n      } catch (e) {\n        // Cross-origin access blocked, stop searching\n        console.warn('Cross-origin access blocked at level', i);\n        break;\n      }\n    }\n\n    return null;\n  }\n\n    \n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: '',\n      screenId: ''\n  };\n  window.leaveCustomScreen = () => {};\n\n  window.onmessage = (event) => {\n    if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n      // 1. Store Data\n      \n      Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n\n      // 2. Setup Return Channel\n      const port = event.ports[0];\n      if (port) {\n        window.leaveCustomScreen = (args) => {\n          port.postMessage({\n            eventName: 'LeaveCustomScreen',\n            args, \n          }, []);\n        };\n      }\n      initScreen();\n    }\n  };\n  </script>\n  <!-- OO-PORT-MESSAGE-HANDLER-END -->\n  <style>\n    body {\n      background-color: #ffffff;\n      margin: 0;\n      padding: 0;\n      font-family: 'SF Pro', Arial, sans-serif;\n    }\n\n    #custom-form {\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-start;\n      align-items: center;\n      height: 100vh;\n      padding: 16px 16px 0;\n      box-sizing: border-box;\n      text-align: center;\n    }\n\n    #top-icon {\n      margin-top: 70px;\n      height: 200px;\n      width: auto;\n      object-fit: contain;\n      display: block;\n    }\n\n    h1 {\n      margin-bottom: 16px;\n    }\n\n    p {\n      margin-bottom: 16px;\n      color: #333;\n    }\n\n\n    #submit-button {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 55px;\n      border: 1px solid #000;\n      border-radius: 12px;\n      background-color: #000;\n      color: #fff;\n      font-family: 'SF Pro', Arial, sans-serif;\n      font-size: 22px;\n      font-weight: 500;\n      line-height: 22.5px;\n      text-align: center;\n      padding: 0 16px;\n      cursor: pointer;\n      margin-top: 20px;\n    }\n\n    #submit-button:hover {\n      opacity: 0.9;\n    }\n  </style>\n</head>\n\n<body>\n  <form id='custom-form'>\n    <img id=\"top-icon\"\n      src=\"https://api.segmently.ai/assets/onboardings/6OwufOr1PtCg8dN7pR6O/custom-images/en-US_1769779434112_1740675632418-of-icon.png/origin.png\"\n      alt=\"OF\" />\n\n    <h1>Active subscription found</h1>\n    <div style=\"text-align: left; max-width: 400px; margin: 0 auto;\">\n      <p style=\"margin-bottom: 16px;\">You can open the app with the button below.</p>\n      <p style=\"margin-bottom: 16px;\">If you forgot the password, you can restore it inside the app.</p>\n    </div>\n\n    <button id='submit-button'>Open App</button>\n\n    <p style=\"margin-top: 24px; font-size: 14px; color: #666;\">You can also find more details in your email inbox.</p>\n  </form>\n\n  <script>\n\n    // Initialize screen once data is available\n    function initScreen() {\n      console.log('Screen initialized');\n\n      // Track final screen initialization\n      const segmentlySDK = getSegmentlySDK();\n\n      if (segmentlySDK) {\n        segmentlySDK.trackEvent('FinalScreenReached', {\n          screenName: 'final_screen',\n          action: 'initialized'\n        });\n      }\n\n      // Setup form submit handler\n      const form = document.getElementById('custom-form');\n      form.addEventListener('submit', function (event) {\n        event.preventDefault();\n        window.leaveCustomScreen({});\n      });\n    }\n  </script>\n</body>\n\n</html>"},"systemPrompt":null,"canvas":{"background":{"kind":"solid","content":{"color":"#f8fbfb"}},"insets":{"top":0,"end":16,"bottom":0,"start":16}},"header":{},"animated":true,"countdown":null,"offlineFirst":true},"screenType":"WebEmbed","tags":[],"name":"has-subscription","id":"screen2116","position":{"y":1648,"x":21776}},"screen25":{"position":{"y":-656,"x":19376},"id":"screen25","name":"email","screenType":"TextInput","tags":[],"content":{"countdown":null,"offlineFirst":true,"animated":true,"header":{"back":{"layout":{"insets":{"top":0,"end":0,"bottom":0,"start":0}},"appearance":{},"action":{"kind":"retreat","edges":[]},"content":{"translations":{"en-US":""},"kind":"static","appearance":{"fontSize":15,"color":"#000000","fontFamily":"SF Pro","fontWeight":400,"lineHeight":22.5}},"kind":"label"}},"copy":{"title":{"translations":{"en-US":"What's your email?"},"kind":"static","appearance":{"fontSize":26,"align":"center","lineHeight":32,"color":"#000000","fontWeight":600,"fontFamily":"SF Pro"},"layout":{"insets":{"bottom":0,"start":0,"top":32,"end":0}}},"subtitle":{"layout":{"insets":{"end":16,"top":16,"start":16,"bottom":16}},"translations":{"en-US":"Your email allows us to securely store and personalize your profile just for you"},"appearance":{"lineHeight":23.8,"fontFamily":"SF Pro","fontWeight":300,"color":"#1f2a36","fontSize":17,"align":"center"},"kind":"static"}},"systemPrompt":null,"textField":{"fieldSubtype":"Email","placeholder":{"translations":{"en-US":"Enter your email"},"appearance":{"fontSize":17,"align":"start","lineHeight":22.5,"fontFamily":"SF Pro","color":"#000000","fontWeight":400},"kind":"static"},"layout":{"insets":{"end":16,"top":16,"start":16,"bottom":32}},"validationRegex":"^[\\w.%+-]+@[\\w.-]+\\.[a-zA-Z]{2,}$","value":"","errorMessage":{"kind":"static","appearance":{"fontWeight":400,"color":"#fd0000","fontFamily":"SF Pro","lineHeight":22.5,"align":"start","fontSize":12},"translations":{"en-US":"Please enter a valid email"}},"fieldType":"string","appearance":{"borderColor":"#aaaaaa"}},"canvas":{"insets":{"end":16,"top":0,"start":16,"bottom":0},"background":{"kind":"solid","content":{"color":"#ffffff"}}},"actionBar":{"primary":{"kind":"label","action":{"kind":"advance","edges":[{"nextScreenId":"1540f607-88c8-4d07-a25a-8ec12fafd3db","transitionKind":"push","conditions":[]}]},"content":{"kind":"static","appearance":{"lineHeight":22.5,"fontFamily":"SF Pro","fontWeight":700,"insets":{"start":16,"bottom":0,"end":16,"top":0},"color":"#ffffff","fontSize":18,"align":"center"},"translations":{"en-US":"Continue"}},"appearance":{"visibility":"disabledUntilValueEntered","dimensions":{"height":50},"borders":{"radius":{"uniform":25}},"backgroundColor":"#f5326d","fullWidth":true},"layout":{"insets":{"bottom":200,"start":16,"top":32,"end":16}}}}}},"screen587":{"tags":[],"screenType":"Paywall","content":{"options":{"columnLayout":"oneCol","layout":{"insets":{"top":5,"end":16,"bottom":5,"start":0}},"items":[{"subtitle":{"layout":{"insets":{"top":0,"end":0,"bottom":0,"start":0}},"appearance":{"align":"start","fontSize":12,"color":"#6B7280","insets":{"bottom":0,"start":16,"top":0,"end":0},"fontWeight":300,"fontFamily":"SF Pro","lineHeight":17},"kind":"static","translations":{"en-US":"Never wonder what to wear again."}},"title":{"translations":{"en-US":"Daily Outfit Formulas"},"kind":"static","appearance":{"lineHeight":17,"fontWeight":"400","fontFamily":"SF Pro","color":"#000000","insets":{"end":0,"top":0,"start":16,"bottom":0},"fontSize":14,"align":"start"},"layout":{"insets":{"top":0,"end":0,"bottom":0,"start":0}}},"variableValue":"option_0","image":{"appearance":{},"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/mXXNKCbqGcberYKmNXqH/images/en-US_1771959472612_paywall-checkmark/origin.svg","small":"https://api.segmently.ai/assets/onboardings/mXXNKCbqGcberYKmNXqH/images/en-US_1771959472612_paywall-checkmark/origin.svg"}}}},{"subtitle":{"appearance":{"lineHeight":17,"insets":{"top":0,"end":0,"bottom":0,"start":16},"fontFamily":"SF Pro","fontWeight":300,"color":"#6B7280","fontSize":12,"align":"start"},"kind":"static","translations":{"en-US":"Monthly seasonal & staples with links"},"layout":{"insets":{"top":0,"end":0,"bottom":0,"start":0}}},"title":{"translations":{"en-US":"Curated Shopping Lists"},"kind":"static","appearance":{"align":"start","fontSize":14,"fontFamily":"SF Pro","color":"#000000","insets":{"end":0,"top":0,"start":16,"bottom":0},"fontWeight":"400","lineHeight":17},"layout":{"insets":{"start":0,"bottom":0,"end":0,"top":0}}},"image":{"appearance":{},"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/mXXNKCbqGcberYKmNXqH/images/en-US_1771959472612_paywall-checkmark/small.svg","original":"https://api.segmently.ai/assets/onboardings/mXXNKCbqGcberYKmNXqH/images/en-US_1771959472612_paywall-checkmark/origin.svg"}}},"variableValue":"option_1"},{"image":{"appearance":{},"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/mXXNKCbqGcberYKmNXqH/images/en-US_1771959472612_paywall-checkmark/origin.svg","original":"https://api.segmently.ai/assets/onboardings/mXXNKCbqGcberYKmNXqH/images/en-US_1771959472612_paywall-checkmark/origin.svg"}}},"variableValue":"option_2","title":{"layout":{"insets":{"bottom":0,"start":0,"top":0,"end":0}},"translations":{"en-US":"Smart AI Packing Tools"},"kind":"static","appearance":{"lineHeight":17,"color":"#000000","insets":{"bottom":0,"start":16,"top":0,"end":0},"fontWeight":"400","fontFamily":"SF Pro","fontSize":14,"align":"start"}},"subtitle":{"layout":{"insets":{"top":0,"end":0,"bottom":0,"start":0}},"appearance":{"fontSize":12,"align":"start","lineHeight":17,"color":"#6B7280","insets":{"bottom":0,"start":16,"top":0,"end":0},"fontFamily":"SF Pro","fontWeight":300},"kind":"static","translations":{"en-US":"Travel stress-free with auto-generated lists."}}}],"appearance":{"insets":{"end":16,"top":2,"start":20,"bottom":12},"itemsSpacing":6},"itemLayout":"ImageTitle","selectionMode":"browse"},"canvas":{"background":{"kind":"solid","content":{"color":"#ffffff"}},"insets":{"bottom":0,"start":16,"top":0,"end":16}},"paywall":{"autoRenewLabel":null,"bodyAppearance":{"overlayKind":"gradient","heroAnchor":"HeaderBottom"},"headerAppearance":{"closeAlignment":"end","closeVisibility":"visible","closeDelaySeconds":0},"footerAppearance":{"elementsOrder":"LabelBelowButton"},"currencyFormat":"CurrencyISOCode","purchaseAction":{"kind":"label","action":{"kind":"purchase","edges":[{"conditions":[],"transitionKind":"push","nextScreenId":"b318ff69-96ef-4e81-88dd-3829936f6392"}]},"content":{"translations":{"en-US":"Start My 7-Day Trial"},"kind":"static","appearance":{"align":"center","fontSize":18,"fontFamily":"SF Pro","fontWeight":700,"insets":{"top":0,"end":16,"bottom":0,"start":16},"color":"#ffffff","lineHeight":22.5}},"appearance":{"fullWidth":true,"backgroundColor":"#F5326D","borders":{"radius":{"uniform":24}},"dimensions":{"height":55}},"layout":{"insets":{"top":8,"end":0,"bottom":0,"start":12}}},"purchaseFlags":["ShouldCloseAfterRestore","ShouldCloseAfterSubscriptionError"],"products":{"appearance":{"backgroundColor":"#ffffff","borders":{"width":2,"radius":{"uniform":12},"color":"#d6d6d6"},"insets":{"end":10,"top":12,"start":12,"bottom":12}},"layout":{"insets":{"top":16,"end":10,"bottom":16,"start":12}},"items":[{"purchaseButtonLabel":{"layout":{"insets":{}},"translations":{"en-US":{"parameters":{"links":{},"labels":{}},"styles":{},"l10n":{"en-US":""},"kind":"default","box":{"styles":{}}}},"appearance":{},"parameters":{"links":{},"labels":{}},"kind":"static"},"weight":1,"checkbox":{"layout":{"insets":{"end":5,"top":0,"start":0,"bottom":0}},"appearance":{"color":"#d6d6d6"},"selectedAppearance":{"color":"#ee346e"},"checked":false,"kind":"circle"},"bottomStartLabel":{"layout":{"insets":{"start":0,"bottom":0,"end":0,"top":0}},"appearance":{"fontFamily":"SF Pro","color":"#2D2D2D","fontWeight":300,"lineHeight":22.5,"align":"start","fontSize":15},"kind":"dynamic","translations":{"en-US":"Trial 7 days for $1.99\nthen annually $99/yr"}},"isSelected":true,"badge":{"layout":{"insets":{"top":8,"end":0,"bottom":0,"start":0}},"translations":{"en-US":"Best Value"},"appearance":{"lineHeight":22.5,"position":"topRight","fontSize":15,"backgroundColor":"#F5326D","borders":{"radius":{"uniform":16},"color":"#ee346e","width":2},"textColor":"#fff","textAlign":"left","fontWeight":500,"fontFamily":"SF Pro","insets":{"top":0,"end":7,"bottom":0,"start":7}},"kind":"static"},"bottomEndLabel":{"layout":{"insets":{"end":4,"top":0,"start":0,"bottom":0}},"kind":"static","appearance":{"fontSize":15,"align":"end","lineHeight":22.5,"fontWeight":400,"color":"#2D2D2D","fontFamily":"SF Pro"},"translations":{"en-US":"just \n$8.25/mo"}},"productId":"A419yG8CqWYlble0a5j8","layout":{"insets":{"start":0,"bottom":0,"end":0,"top":0}},"appearance":{"columnVerticalPadding":1,"startColumnWidthPercentage":70,"columnHorizontalPadding":6},"topStartLabel":{"layout":{"insets":{"start":0,"bottom":0,"end":0,"top":0}},"translations":{"en-US":"Annual Plan"},"kind":"dynamic","appearance":{"align":"start","fontSize":17,"color":"#000000","fontFamily":"SF Pro","fontWeight":700,"lineHeight":22.5}},"topEndLabel":{"translations":{"en-US":""},"appearance":{"lineHeight":22.5,"fontFamily":"SF Pro","color":"#2D2D2D","fontWeight":500,"fontSize":15,"align":"end"},"kind":"dynamic","layout":{"insets":{"bottom":0,"start":0,"top":0,"end":0}}}},{"topStartLabel":{"translations":{"en-US":"Monthly Plan"},"appearance":{"align":"start","fontSize":16,"color":"#000000","fontFamily":"SF Pro","fontWeight":700,"lineHeight":22.5},"layout":{"insets":{}},"kind":"static","parameters":{"labels":{},"links":{}}},"topEndLabel":{"translations":{"en-US":""},"appearance":{"fontFamily":"SF Pro","fontWeight":600,"color":"#ffffff","lineHeight":22,"align":"start","fontSize":16},"layout":{"insets":{}},"kind":"static","parameters":{"links":{},"labels":{}}},"productId":"ohKymqmaPnf9w8yw5q6K","isSelected":false,"bottomEndLabel":{"parameters":{"links":{},"labels":{}},"kind":"static","layout":{"insets":{}},"appearance":{"color":"#2D2D2D","fontWeight":400,"fontFamily":"SF Pro","lineHeight":22,"align":"end","fontSize":15},"translations":{"en-US":"then \n$19/mo"}},"badge":null,"bottomStartLabel":{"appearance":{"fontWeight":300,"color":"#2D2D2D","fontFamily":"SF Pro","lineHeight":22,"align":"start","fontSize":15},"translations":{"en-US":"Trial 7 days for $1.99"},"layout":{"insets":{}},"kind":"static","parameters":{"labels":{},"links":{}}},"weight":0,"checkbox":{"appearance":{"color":"#d6d6d6"},"kind":"circle","selectedAppearance":{"color":"#ee346e"},"layout":{"insets":{}}},"purchaseButtonLabel":{"kind":"static","parameters":{"links":{},"labels":{}},"appearance":{},"translations":{"en-US":{"kind":"default","parameters":{"links":{},"labels":{}},"l10n":{"en-US":""},"styles":{},"box":{"styles":{}}}},"layout":{"insets":{}}}}],"viewKind":"Vertical","productLayout":"CheckboxLabels","selectedAppearance":{"backgroundColor":"#ffffff","insets":{"start":12,"bottom":8,"end":16,"top":8},"borders":{"width":2,"radius":{"uniform":12},"color":"#F5326D"}}}},"copy":{"subtitle":{"translations":{"en-US":"Get the system, the formulas, and the confidence."},"appearance":{"fontSize":15,"align":"center","lineHeight":13,"fontWeight":"400","fontFamily":"SF Pro","color":"#636363"},"kind":"static","layout":{"insets":{"bottom":10,"start":0,"top":10,"end":0}}},"title":{"translations":{"en-US":"Get Your Personal \nOutfit Formula"},"kind":"static","appearance":{"color":"#2D2D2D","fontWeight":700,"fontFamily":"SF Pro","lineHeight":33,"align":"center","fontSize":30},"layout":{"insets":{"start":0,"bottom":0,"end":0,"top":0}}}},"systemPrompt":null,"offlineFirst":true,"countdown":null,"featuredMedia":{"layout":{"insets":{"bottom":0,"start":0,"top":0,"end":0}},"content":{"image":{"appearance":{},"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/mXXNKCbqGcberYKmNXqH/images/en-US_1771959161628_paywall-top-new/small.png","original":"https://api.segmently.ai/assets/onboardings/mXXNKCbqGcberYKmNXqH/images/en-US_1771959161628_paywall-top-new/origin.png"}}}},"appearance":{"scaleMode":"scaleAspectFill"},"kind":"Image"},"animated":true},"position":{"y":384,"x":22208},"id":"screen587","name":"the-paywall"},"screen607":{"content":{"actionBar":{},"embed":{"callback":{"action":{"kind":"advance","edges":[]}},"html":"<!DOCTYPE html>\n<html>\n\n<head>\n  <meta charset='UTF-8'>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>You're In!</title>\n  <!-- OO-PORT-MESSAGE-HANDLER-START -->\n  <!-- DO NOT REMOVE THIS CODE -->\n  <script>\n  // Helper function to find segmentlySDK in parent chain (up to 4 levels)\n  function getSegmentlySDK() {\n    let currentWindow = window;\n\n    // Check up to 4 levels up the parent chain\n    for (let i = 0; i < 4; i++) {\n      try {\n        // Try to access segmentlySDK (may fail due to cross-origin restrictions)\n        if (currentWindow.segmentlySDK) {\n          return currentWindow.segmentlySDK;\n        }\n\n        // Stop if we've reached the top window\n        if (currentWindow === currentWindow.parent) {\n          break;\n        }\n\n        currentWindow = currentWindow.parent;\n      } catch (e) {\n        // Cross-origin access blocked, stop searching\n        console.warn('Cross-origin access blocked at level', i);\n        break;\n      }\n    }\n\n    return null;\n  }\n\n\n    window.onboardingOnlineCustomScreenData = {\n      inputs: {},\n      labels: {},\n      userData: {},\n      customData: {},\n      webOnboarding: {},\n      incomeUserData: {},\n      language: '',\n      screenId: ''\n  };\n  window.leaveCustomScreen = () => {};\n\n  window.onmessage = (event) => {\n    if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n      // 1. Store Data\n\n      Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n\n      // 2. Setup Return Channel\n      const port = event.ports[0];\n      if (port) {\n        window.leaveCustomScreen = (args) => {\n          port.postMessage({\n            eventName: 'LeaveCustomScreen',\n            args,\n          }, []);\n        };\n      }\n      initScreen();\n    }\n  };\n  </script>\n  <!-- OO-PORT-MESSAGE-HANDLER-END -->\n  <style>\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: #FF2A6D;\n    }\n\n    .screen-container {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      text-align: center;\n      background-color: #FF2A6D;\n    }\n\n    /* --- Desktop Preview Simulation (iPhone Frame) --- */\n    @media (min-width: 600px) {\n      body {\n        background-color: #f0f2f5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .screen-container {\n        width: 100%;\n        max-width: 430px;\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.1);\n        overflow: hidden;\n        position: relative;\n      }\n    }\n\n    /* --- Checkmark Icon --- */\n    .check-icon {\n      width: 96px;\n      height: 96px;\n      border-radius: 50%;\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: 32px;\n      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n    }\n    .check-icon svg {\n      width: 48px;\n      height: 48px;\n    }\n\n    /* --- Title --- */\n    .title {\n      font-size: 30px;\n      font-weight: 600;\n      line-height: 36px;\n      color: #ffffff;\n      margin: 0 0 16px 0;\n    }\n\n    /* --- Subtitle --- */\n    .subtitle {\n      font-size: 16px;\n      line-height: 29px;\n      color: rgba(255, 255, 255, 0.9);\n      margin: 0 0 48px 0;\n      max-width: 329px;\n    }\n\n    /* --- Action Card --- */\n    .action-card {\n      background: #ffffff;\n      border-radius: 16px;\n      padding: 24px;\n      width: 100%;\n      max-width: 320px;\n      box-sizing: border-box;\n      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n    }\n    .action-card-label {\n      font-size: 14px;\n      font-weight: 700;\n      letter-spacing: 0.35px;\n      text-transform: uppercase;\n      color: #FF2A6D;\n      margin: 0 0 16px 0;\n      text-align: center;\n    }\n    #submit-button {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 56px;\n      border: none;\n      border-radius: 12px;\n      background-color: #1A1A1A;\n      color: #ffffff;\n      font-family: inherit;\n      font-size: 16px;\n      font-weight: 700;\n      cursor: pointer;\n      transition: opacity 0.2s;\n    }\n    #submit-button:hover {\n      opacity: 0.9;\n    }\n  </style>\n</head>\n\n<body>\n  <form id='custom-form' class=\"screen-container\">\n\n    <div class=\"check-icon\">\n      <svg viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M40 12L18 34L8 24\" stroke=\"white\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </div>\n\n    <h1 class=\"title\">You're In!</h1>\n    <p class=\"subtitle\">Welcome to the Outfit Formulas!<br>Your journey to calm morning starts now.</p>\n\n    <div class=\"action-card\">\n      <p class=\"action-card-label\">Next Step</p>\n      <button id='submit-button'>Open App</button>\n    </div>\n\n  </form>\n\n  <script>\n\n    async function sendBrazeEmail({ email, userId, password, otpToken }) {\n      try {\n        const response = await fetch('https://us-central1-outfit-formulas.cloudfunctions.net/sendSubscriptionEmail', {\n          method: 'POST',\n          headers: {\n            'Content-Type': 'application/json',\n            'Authorization': 'Bearer kPq4Yz7wAbJ5sXft9gQFhR3Nc2uL0MVe'\n          },\n          body: JSON.stringify({ email, userId, password: password ?? \"****\", otpToken: otpToken ?? \"\" })\n        });\n\n        if (!response.ok) {\n          throw new Error(`Request failed: ${response.status}`);\n        }\n\n        const result = await response.json();\n        console.log('Email sent:', result);\n      } catch (error) {\n        console.error('Failed to trigger Braze email:', error);\n      }\n    }\n\n    // Helper function to get value — tries V2 SDK first, then falls back to legacy userData\n    function getValue(key, legacyKeys) {\n      // 1. Try V2 SDK getVariable (set by previous screens via sdk.setVariable)\n      try {\n        const sdk = getSegmentlySDK();\n        if (sdk && sdk.getVariable) {\n          const val = sdk.getVariable(key);\n          if (val) return val;\n        }\n      } catch (e) {\n        console.warn('SDK getVariable failed for', key, e);\n      }\n\n      // 2. Fall back to legacy userData search\n      const allKeys = legacyKeys || [key, \"input['\" + key + \"']\"];\n      const userData = window.onboardingOnlineCustomScreenData.userData || {};\n      for (const screenId in userData) {\n        const screenData = userData[screenId];\n        if (screenData) {\n          for (const k of allKeys) {\n            if (screenData[k]) {\n              return screenData[k];\n            }\n          }\n        }\n      }\n      return null;\n    }\n\n    // Initialize screen once data is available\n    function initScreen() {\n      console.log('Screen initialized');\n\n      // Track final screen initialization\n      const segmentlySDK = getSegmentlySDK();\n\n      if (segmentlySDK) {\n        segmentlySDK.trackEvent('FinalScreenReached', {\n          screenName: 'final_screen',\n          action: 'initialized'\n        });\n      }\n\n      // Load credentials and send Braze email\n      try {\n        // Get values — tries V2 SDK first, then legacy userData\n        let email;\n        try {\n          const sdk = getSegmentlySDK();\n          if (sdk && sdk.getEmail) email = sdk.getEmail();\n        } catch (e) {}\n        if (!email) email = getValue('email');\n\n        const userId = getValue('app_user_id') || email;\n        const existingUser = getValue('existing_user');\n        const otpToken = getValue('otp') || getValue('token');\n        const password = getValue('password');\n\n        console.log('User data retrieved successfully');\n        // full list\n        console.log(otpToken);\n        console.log(userId);\n\n        // Send Braze email only once (only if email exists)\n        if (email) {\n          const brazeEmailSentKey = `brazeEmailSent_${email}`;\n          if (!localStorage.getItem(brazeEmailSentKey)) {\n            sendBrazeEmail({ email, userId, password, otpToken })\n              .then(() => {\n                localStorage.setItem(brazeEmailSentKey, 'true');\n\n                // Track Braze email sent\n                const segmentlySDK = getSegmentlySDK();\n\n                if (segmentlySDK) {\n                  segmentlySDK.trackEvent('BrazeEmailSent', {\n                    screenName: 'final_screen',\n                    action: 'email_sent',\n                    existingUser: existingUser === 'true'\n                  });\n                }\n              });\n          } else {\n            console.log(\"Braze email already sent\");\n          }\n        } else {\n          console.warn(\"No email found in userData, skipping Braze email\");\n        }\n      } catch (error) {\n        console.error(\"Error retrieving data from userData:\", error);\n      }\n\n      // Setup form submit handler\n      const form = document.getElementById('custom-form');\n      form.addEventListener('submit', function (event) {\n        event.preventDefault();\n        // Get OTP token from userData\n        try {\n          const otpToken = getValue('otp') || getValue('token');\n          console.log('Submitting with OTP token');\n\n          // Track app opening\n          const segmentlySDK = getSegmentlySDK();\n\n          if (segmentlySDK) {\n            segmentlySDK.trackEvent('AppOpened', {\n              screenName: 'final_screen',\n              action: 'open_app',\n              hasToken: !!otpToken\n            });\n          }\n\n          if (otpToken) {\n            // Set variable before leaving so it's available for conditions\n            const sdk = getSegmentlySDK();\n            if (sdk && sdk.setVariable) {\n              sdk.setVariable('otp', otpToken);\n            }\n            // Open the app with the OTP token\n            window.leaveCustomScreen({ otp: otpToken });\n          } else {\n            console.error('No OTP token found in userData');\n            window.leaveCustomScreen({});\n          }\n        } catch (error) {\n          console.error('Error getting OTP token from userData:', error);\n\n          // Track error\n          const segmentlySDK = getSegmentlySDK();\n\n          if (segmentlySDK) {\n            segmentlySDK.trackEvent('FinalScreenError', {\n              screenName: 'final_screen',\n              action: 'token_error',\n              errorMessage: error.message\n            });\n          }\n\n          window.leaveCustomScreen({});\n        }\n      });\n    }\n  </script>\n</body>\n\n</html>"},"systemPrompt":null,"canvas":{"insets":{"end":16,"top":0,"start":16,"bottom":0},"background":{"kind":"solid","content":{"color":"#f8fbfb"}}},"header":{},"animated":true,"offlineFirst":true,"countdown":null},"tags":[],"screenType":"WebEmbed","id":"screen607","name":"final-screen","position":{"x":24576,"y":400}}},"metadata":{"projectName":"43fc320f-9156-4e95-a34d-e0b5cc57d852","buildVersion":"","projectId":"43fc320f-9156-4e95-a34d-e0b5cc57d852","versionId":"KHHc6CYQFH5woX5IAKYL","schemaVersion":"1.1.0","onboardingName":"OutfitFormulas-organic-paid-trial v2","onboardingId":"CyTPRvVTQYhB5VJyaYJy","webOnboardingId":"cmTZ4V18snpS07T3ZdLa","webOnboardingName":"[new-design-organic] OutfitFormulas-trial-organic","urlAlias":"e28-ln8i-z0h"},"variables":{"email":{"type":"string","updatedAt":{"type":"firestore/timestamp/1.0","seconds":1775830179,"nanoseconds":987000000},"createdAt":{"type":"firestore/timestamp/1.0","seconds":1775830179,"nanoseconds":987000000},"name":"email","id":"email","boundScreenIds":["screen25"],"required":false,"scope":"screen"},"firebase_uid":{"id":"firebase_uid","createdAt":{},"type":"string","name":"firebase_uid","updatedAt":{},"required":false,"scope":"global"},"make_downsell":{"required":false,"scope":"global","id":"make_downsell","updatedAt":{},"name":"make-downsell","createdAt":{},"type":"boolean"},"otp":{"required":false,"scope":"global","type":"string","createdAt":{},"name":"otp","updatedAt":{},"id":"otp"},"app_user_id":{"updatedAt":{},"createdAt":{},"name":"app_user_id","type":"string","id":"app_user_id","required":false,"scope":"global"},"display_name":{"required":false,"scope":"global","updatedAt":{},"createdAt":{},"type":"string","name":"display_name","id":"display_name"},"auth_provider":{"required":false,"scope":"global","id":"auth_provider","createdAt":{},"updatedAt":{},"type":"string","name":"auth_provider"}},"edgeGatewayUrl":"https://api.segmently.ai","paymentConfig":{"provider":"stripe","stripePublishableKey":"pk_live_51SjiZb395YNMwCRzfclogqltqHi79TTCpRmHJJuQxOHJdkIQXQWgpHkOxQc6da2WQvsGiZ65NgBQ9JEkkpQrc1ZV00xFpaf3gj","connectedAccountId":"acct_1IMgtiExVPMzcN93","stripePublishableKeys":{"test":"pk_test_51SjiZlKaKpC2BFmMgUmLxqSLmQpySWA14JCS13fV9aSULVix5IReigQYkliM4rG23gz5nL1jPb6t4zBoGfcegfi100prXHJJza","live":"pk_live_51SjiZb395YNMwCRzfclogqltqHi79TTCpRmHJJuQxOHJdkIQXQWgpHkOxQc6da2WQvsGiZ65NgBQ9JEkkpQrc1ZV00xFpaf3gj"},"connectedAccountIds":{"testAccountId":"acct_1T9XpcEZqT44MscJ","liveAccountId":"acct_1IMgtiExVPMzcN93"},"projectId":"43fc320f-9156-4e95-a34d-e0b5cc57d852","mode":"live","preBakedPrices":{"avwoHBPkh07xPeDQwqCD":{"productId":"prod_UPeJyJIzgwM5zV","priceId":"price_1TQp0fExVPMzcN93Kkr5YOLU","localized":{"en-US":{"displayPrice":"$128.00","priceAmount":"$128.00","priceAndCurrency":"$128.00 USD","duration":"","intervalCount":"","interval":"","trialDays":"","fullTrialDays":"","introPrice":"","introProduct":"","introDuration":""}},"raw":{"unitAmount":12800,"currency":"usd"},"bakedAt":"2026-05-26T11:34:27.547Z","checkoutMode":"embedded","type":"one_time","stripeProductId":"prod_UPeJyJIzgwM5zV","productName":"Lifetime 128","mode":"live","connectedAccountId":"acct_1IMgtiExVPMzcN93"},"A419yG8CqWYlble0a5j8":{"productId":"prod_RqBL6TJHSczr1Z","priceId":"price_1QwUz2ExVPMzcN93d6zG29HH","localized":{"en-US":{"displayPrice":"$99.00/year","priceAmount":"$99.00","priceAndCurrency":"$99.00 USD","duration":"yearly","intervalCount":"1","interval":"1 year","trialDays":"7","fullTrialDays":"7 Days","introPrice":"$1.99","introProduct":"Annual-99-paid-trial-1.99","introDuration":""}},"raw":{"unitAmount":9900,"currency":"usd","interval":"year","intervalCount":1,"trialDays":"7","introOffer":{"unitAmount":199,"currency":"usd","productName":"Annual-99-paid-trial-1.99"}},"bakedAt":"2026-05-26T11:34:27.916Z","checkoutMode":"embedded","type":"subscription","stripeProductId":"prod_RqBL6TJHSczr1Z","productName":"Annual-99-paid-trial-1.99","subscription":{"interval":"year","intervalCount":1,"trialDays":"7","paidTrial":{"enabled":true,"stripePriceId":"price_1TDMMwExVPMzcN937L5pIuEc"}},"mode":"live","connectedAccountId":"acct_1IMgtiExVPMzcN93"},"ohKymqmaPnf9w8yw5q6K":{"productId":"prod_TvM4gqp50c5Jdx","priceId":"price_1SxVMWExVPMzcN93fHVjMktm","localized":{"en-US":{"displayPrice":"$19.00/month","priceAmount":"$19.00","priceAndCurrency":"$19.00 USD","duration":"monthly","intervalCount":"1","interval":"1 month","trialDays":"7","fullTrialDays":"7 Days","introPrice":"$1.99","introProduct":"Monthly-paid-trial-1.99","introDuration":""}},"raw":{"unitAmount":1900,"currency":"usd","interval":"month","intervalCount":1,"trialDays":"7","introOffer":{"unitAmount":199,"currency":"usd","productName":"Monthly-paid-trial-1.99"}},"bakedAt":"2026-05-26T11:34:28.278Z","checkoutMode":"embedded","type":"subscription","stripeProductId":"prod_TvM4gqp50c5Jdx","productName":"Monthly-paid-trial-1.99","subscription":{"interval":"month","intervalCount":1,"trialDays":"7","paidTrial":{"enabled":true,"stripePriceId":"price_1SxVTaExVPMzcN93fIEDhfvy"}},"mode":"live","connectedAccountId":"acct_1IMgtiExVPMzcN93"}},"bakedAt":"2026-05-26T11:34:28.278Z"},"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","app_user_id","email"]}],"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://outfit-formulas.app.link/9TvorHzPKUb","urlEncode":false,"fallbackUrl":"https://outfit-formulas.app.link/9TvorHzPKUb","redirectMappings":[{"sourceKey":"otp","sourceType":"variable"}]}}],"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.app_user_id","destination":"app_user_id"},{"source":"variable.email","destination":"email"}],"stripeMetadataMappings":[{"sourceType":"server","sourceKey":"client_ip"},{"sourceKey":"client_user_agent","sourceType":"server"},{"sourceKey":"facebook.fbp","sourceType":"server"},{"sourceType":"server","sourceKey":"facebook.fbc"},{"sourceType":"server","sourceKey":"tiktok.ttp"},{"sourceType":"server","sourceKey":"tiktok.ttclid"},{"sourceType":"variable","sourceKey":"app_user_id"}],"redirectMappings":[{"sourceKey":"otp","sourceType":"variable"}],"settings":{"debug":false,"collectOnLoad":true}},"seo":{"title":"OutfitFormulas-app"},"projectAnalytics":{"integrations":[{"id":"int_mkwihhhj_40oiik","createdAt":"2026-01-27T11:27:03.361Z","name":"Facebook Conversion API","updatedAt":"2026-01-28T18:59:29.098Z","config":{"pixelId":"3152172401607943","accessToken":"EAAbBN3SU4gIBO5KwkgyNiFJGe6SzIcbF1LBAejWF30h0xuwx4FmBpise8fiYdA1O9raj8uF2a5VeoMuaaRJTKbKZAE4IzM1pSdvdgbx6WpjSiNrcSYKz6YZATkSzVuOvAgSxnCHlNqCMZBs0wKmSsYs23gmNfB0VFZBHRkLMEfxEiaOsfjO7YNxWNPb55pIHQwZDZD","testEventCode":"TEST2976"},"enabled":true,"platform":"facebook_capi"},{"name":"Amplitude","updatedAt":"2026-02-17T18:05:08.862Z","createdAt":"2026-01-27T11:27:29.597Z","id":"int_mkwii1qb_y8sfhy","platform":"amplitude","enabled":true,"config":{"apiKey":"d67673b689e94b684a9704ed1e18bac","serverZone":"US","trackSessionEvents":true}},{"platform":"custom_script","config":{"name":"Header Injection Script","bodyScript":"","headScript":"(function() {\n  // Flag to track if we've already stored this during this page load\n  if (window._ooUserEmailStored) {\n    return;\n  }\n\n  function getQueryParam(name) {\n    const urlParams = new URLSearchParams(window.location.search);\n    return urlParams.get(name);\n  }\n\n  let email = getQueryParam('email');\n\n  if (email !== null && email.trim() !== '') {\n    email = email.trim();\n  \n    if (!email.includes('@')) {\n      email = '';\n    }\n\n    localStorage.setItem('oo-user-email', email);\n    // Mark as stored for this page session\n    window._ooUserEmailStored = true;\n  }\n})();\n\nwindow.dataLayer = window.dataLayer || [];                                    \n  function gtag(){dataLayer.push(arguments);}                                   \n  gtag('consent', 'default', {                                                  \n    'analytics_storage': 'granted',                                             \n    'ad_storage': 'granted',                                                    \n    'ad_user_data': 'granted',                                                  \n    'ad_personalization': 'granted'\n  });"},"enabled":true,"updatedAt":"2026-04-18T12:05:27.838Z","name":"Header Injection Script","createdAt":"2026-01-27T11:28:09.724Z","id":"int_mkwiiwp0_ej10sk"},{"platform":"tiktok_pixel","config":{"advancedMatching":{"email":true},"pixelId":"C92D9GF6ARQ791KLP7Q0"},"enabled":true,"createdAt":"2026-01-27T11:28:38.384Z","name":"TikTok Pixel","updatedAt":"2026-02-18T16:48:40.500Z","id":"int_mkwijit5_083yyi"},{"platform":"ga4","config":{"debugMode":false,"sendPageView":true,"measurementId":"G-MYLSX9351Z"},"enabled":true,"updatedAt":"2026-01-27T11:29:18.538Z","name":"Google Analytics 4","createdAt":"2026-01-27T11:29:18.538Z","id":"int_mkwikdsj_s07qoq"},{"platform":"facebook_pixel","config":{"autoConfig":true,"pixelId":"3152172401607943"},"enabled":true,"createdAt":"2026-01-27T11:30:02.304Z","name":"Facebook Pixel","updatedAt":"2026-01-27T11:30:02.304Z","id":"int_mkwilbkc_vtyijc"},{"config":{"serverZone":"US","apiKey":"d67673b689e94b684a9704ed1e18bac"},"enabled":true,"platform":"amplitude_server","id":"int_mkye2e72_yd068j","name":"Amplitude (Server-Side)","updatedAt":"2026-02-17T18:05:15.653Z","createdAt":"2026-01-28T18:58:53.116Z"},{"name":"TikTok Events API","updatedAt":"2026-02-18T16:50:44.803Z","createdAt":"2026-02-18T16:50:44.803Z","id":"int_mls9qhva_pakjya","platform":"tiktok_events_api","enabled":true,"config":{"accessToken":"97cc66b5202a8af03bd1db544d72ae97e377353f","pixelCode":"C92D9GF6ARQ791KLP7Q0","testEventCode":"TEST48190"}},{"platform":"gtm","config":{"containerId":"GTM-NCG89PJV","dataLayerName":"dataLayer"},"enabled":true,"updatedAt":"2026-04-17T07:25:23.754Z","name":"Google Tag Manager","createdAt":"2026-04-17T07:25:23.754Z","id":"int_mo2l2uuz_qxlvjb"}]},"stripeEmailConfig":{"emailVariableId":"email"},"meta":{"funnelId":"CyTPRvVTQYhB5VJyaYJy","versionId":"KHHc6CYQFH5woX5IAKYL","alias":"e28-ln8i-z0h","generatedAt":"2026-05-26T11:34:28.624Z","platform":"web","webShellVersion":"1.0.32"}}