{"schemaVersion":"2.0.0","defaultLanguage":"en-US","languages":["en-US"],"launchScreenId":"of-menopause-intro","screens":{"2b9fc45a-8939-4ef9-a02c-e73c66070793":{"screenType":"WebEmbed","id":"2b9fc45a-8939-4ef9-a02c-e73c66070793","position":{"x":10688,"y":-96},"name":"lifetime-128","content":{"embed":{"callback":{"action":{"edges":[{"transitionKind":"push","nextScreenId":"3e4839ee-e65c-4ed3-92a6-5b7e5b898921","conditions":[]}],"kind":"advance"}},"childSections":[{"kind":"ProductCatalog","layout":{"heightKind":"auto","scrollable":false,"flexGrow":0,"flexShrink":1},"order":0,"productCatalogContent":{"items":[{"bottomEndLabel":{"layout":{"insets":{}},"appearance":{"fontFamily":"SF Pro","fontSize":16,"align":"start","lineHeight":22,"color":"#ffffff","fontWeight":600},"kind":"static","translations":{"en-US":""},"parameters":{"links":{},"labels":{}}},"appearance":{"startColumnWidthPercentage":50},"isSelected":true,"checkbox":{"layout":{"insets":{}},"selectedAppearance":{"color":"#ffc201"},"kind":"square","appearance":{"color":"#ffffff"}},"bottomStartLabel":{"layout":{"insets":{}},"kind":"static","appearance":{"fontFamily":"SF Pro","align":"start","fontSize":16,"color":"#ffffff","lineHeight":22,"fontWeight":600},"parameters":{"links":{},"labels":{}},"translations":{"en-US":""}},"weight":0,"productId":"avwoHBPkh07xPeDQwqCD","topEndLabel":{"appearance":{"align":"start","fontSize":16,"fontFamily":"SF Pro","fontWeight":600,"color":"#ffffff","lineHeight":22},"kind":"static","layout":{"insets":{}},"parameters":{"links":{},"labels":{}},"translations":{"en-US":""}},"topStartLabel":{"parameters":{"links":{},"labels":{}},"translations":{"en-US":""},"appearance":{"fontSize":16,"align":"start","fontFamily":"SF Pro","fontWeight":600,"lineHeight":22,"color":"#ffffff"},"kind":"static","layout":{"insets":{}}},"badge":null}],"productLayout":"CheckboxLabels","layout":{"insets":{"top":16,"bottom":16,"start":16,"end":16}},"appearance":{"backgroundColor":"#2a2a2a","borders":{"radius":{"uniform":12}},"insets":{"top":12,"bottom":12,"end":16,"start":16},"itemsSpacing":8},"viewKind":"Vertical","selectedAppearance":{"backgroundColor":"#ffc201","borders":{"width":2,"color":"#e7b34c","radius":{"uniform":12}}}},"id":"section-mquow9q3-6azwe","label":"Product Catalog"}],"isIframe":false,"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n<title>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\">Make It Yours Forever</h1>\n      <p class=\"urgency-sub\">EXCLUSIVE LIFETIME OFFER</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\">Your last payment ever</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 — keep my current plan</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"},"countdown":null,"offlineFirst":true,"animated":true,"canvas":{"insets":{"start":16,"end":16,"top":0,"bottom":0},"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}},"systemPrompt":null,"header":{},"actionBar":{}},"tags":[]},"3dd1ebc8-0550-4cdf-bcdc-3970ab859198":{"tags":[],"content":{"animated":true,"systemPrompt":null,"countdown":null,"actionBar":{"primary":{"action":{"edges":[{"nextScreenId":"56aa975c-6909-48f2-abb3-f7dc00378e8d","transitionKind":"push","conditions":[]}],"kind":"advance"},"appearance":{"fullWidth":true,"borders":{"radius":{"uniform":25}},"dimensions":{"height":50},"visibility":"disabledUntilValueEntered","backgroundColor":"#f5326d"},"content":{"kind":"static","appearance":{"fontFamily":"SF Pro","fontSize":18,"align":"center","lineHeight":22.5,"color":"#ffffff","insets":{"end":16,"start":16,"top":0,"bottom":0},"fontWeight":700},"translations":{"en-US":"Continue"}},"kind":"label","layout":{"insets":{"bottom":200,"top":32,"end":16,"start":16}}}},"textField":{"value":"","layout":{"insets":{"start":16,"end":16,"top":16,"bottom":32}},"errorMessage":{"kind":"static","appearance":{"align":"start","fontSize":12,"fontFamily":"SF Pro","fontWeight":400,"color":"#fd0000","lineHeight":22.5},"translations":{"en-US":"Please enter a valid email"}},"appearance":{"borderColor":"#aaaaaa"},"placeholder":{"translations":{"en-US":"Enter your email"},"appearance":{"fontFamily":"SF Pro","align":"start","fontSize":17,"color":"#000000","lineHeight":22.5,"fontWeight":400},"kind":"static"},"fieldType":"string","fieldSubtype":"Email","validationRegex":"^[\\w.%+-]+@[\\w.-]+\\.[a-zA-Z]{2,}$"},"copy":{"title":{"translations":{"en-US":"What's your email?"},"layout":{"insets":{"bottom":0,"top":32,"start":0,"end":0}},"kind":"static","appearance":{"fontWeight":600,"lineHeight":32,"color":"#000000","fontSize":26,"align":"center","fontFamily":"SF Pro"}},"subtitle":{"translations":{"en-US":"Your email allows us to securely store and personalize your profile just for you"},"kind":"static","appearance":{"lineHeight":23.8,"color":"#1f2a36","fontWeight":300,"fontFamily":"SF Pro","fontSize":17,"align":"center"},"layout":{"insets":{"end":16,"start":16,"top":16,"bottom":16}}}},"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"},"insets":{"end":16,"start":16,"top":0,"bottom":0}},"offlineFirst":true,"header":{"back":{"action":{"kind":"retreat","edges":[]},"layout":{"insets":{"top":0,"bottom":0,"start":0,"end":0}},"content":{"translations":{"en-US":""},"kind":"static","appearance":{"fontSize":15,"fontFamily":"SF Pro","fontWeight":400,"color":"#000000","lineHeight":22.5}},"appearance":{},"kind":"label"}}},"screenType":"TextInput","id":"3dd1ebc8-0550-4cdf-bcdc-3970ab859198","position":{"x":7936,"y":-496},"name":"email"},"3e4839ee-e65c-4ed3-92a6-5b7e5b898921":{"position":{"y":-112,"x":11312},"id":"3e4839ee-e65c-4ed3-92a6-5b7e5b898921","name":"final-screen","screenType":"WebEmbed","content":{"header":{},"actionBar":{},"countdown":null,"offlineFirst":true,"embed":{"callback":{"action":{"edges":[],"kind":"advance"}},"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>"},"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"},"insets":{"start":16,"end":16,"bottom":0,"top":0}},"systemPrompt":null,"animated":true},"tags":[]},"56aa975c-6909-48f2-abb3-f7dc00378e8d":{"content":{"animated":true,"systemPrompt":null,"canvas":{"background":{"kind":"solid","content":{"color":"#f8fbfb"}},"insets":{"start":16,"end":16,"top":0,"bottom":0}},"embed":{"callback":{"action":{"edges":[{"nextScreenId":"a42fbe28-e96d-4562-b2b2-6b2815ca13e9","transitionKind":"push","conditions":[]},{"nextScreenId":"of-menopause-paywall","transitionKind":"push","conditions":[{"operator":"in","key":"journey_stage","value":"hormonal_midlife,rediscovering,body_changing"},{"value":"active-subscription","key":"app_user_id","operator":"neq"}]},{"nextScreenId":"cb294cac-75d6-4276-934c-1e28c2865b10","transitionKind":"push","conditions":[{"operator":"eq","key":"app_user_id","value":"active-subscription"}]}],"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  let initialSetupStarted = false;\n\n  window.onmessage = (event) => {\n    if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {\n      // 1. Store Data (always refresh — later inits may carry newer args)\n      Object.assign(window.onboardingOnlineCustomScreenData, event.data.args);\n\n      // 2. Setup Return Channel (refresh port too)\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 — only once per screen lifetime\n      if (initialSetupStarted) {\n        console.log('InitCustomScreen received again — data/port refreshed, skipping duplicate setup');\n        return;\n      }\n      initialSetupStarted = true;\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  // Poll for SDK + email so we don't flash the retry button when the host\n  // simply hasn't injected segmentlySDK / userData yet.\n  async function waitForSDKReady(timeoutMs = 3000, intervalMs = 100) {\n    const start = Date.now();\n    let lastError = null;\n    while (Date.now() - start < timeoutMs) {\n      const sdk = getSegmentlySDK();\n      if (sdk) {\n        try {\n          const email = sdk.getEmail();\n          if (email) {\n            return { sdk, email, platformUserId: sdk.getPlatformUserId() };\n          }\n        } catch (e) {\n          lastError = e;\n        }\n      }\n      await new Promise(r => setTimeout(r, intervalMs));\n    }\n    return { error: lastError };\n  }\n\n  async function callCreateUserAPI(retryCount = 0) {\n    try {\n      const ready = await waitForSDKReady();\n\n      if (!ready || !ready.sdk) {\n        console.error('segmentlySDK not available after wait');\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      if (ready.error) {\n        console.error('Failed to get email/userId from SDK:', ready.error);\n        trackAmplitude('LoadingScreenError', {\n          screenName: 'loading_screen',\n          action: 'sdk_method_error',\n          errorMessage: ready.error.message,\n          retryAttempt: retryCount + 1\n        });\n        showErrorAlert('sdk_method_error');\n        return;\n      }\n\n      if (!ready.email) {\n        console.error('No email found after wait');\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      const segmentlySDK = ready.sdk;\n      const email = ready.email;\n      const platformUserId = ready.platformUserId;\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      // Flag menopause-stage users (2nd/3rd/4th answers on of-menopause-journey).\n      // The inputs dictionary is the canonical source of prior screen answers\n      // inside the iframe; fall back to the SDK variable if not yet populated.\n      const MENOPAUSE_JOURNEY_STAGES = ['hormonal_midlife', 'rediscovering', 'body_changing'];\n      const readJourneyStage = () => {\n        try {\n          const inputs = window.onboardingOnlineCustomScreenData && window.onboardingOnlineCustomScreenData.inputs;\n          if (inputs && inputs.journey_stage !== undefined) {\n            const v = inputs.journey_stage;\n            if (Array.isArray(v)) return v[0];\n            if (v && typeof v === 'object' && 'value' in v) return v.value;\n            return v;\n          }\n        } catch (e) { /* noop */ }\n        try {\n          const sdk = getSegmentlySDK();\n          if (sdk && sdk.getVariable) {\n            const v = sdk.getVariable('journey_stage');\n            return Array.isArray(v) ? v[0] : v;\n          }\n        } catch (e) { /* noop */ }\n        return null;\n      };\n      const journeyStage = readJourneyStage();\n      if (journeyStage && MENOPAUSE_JOURNEY_STAGES.indexOf(journeyStage) !== -1) {\n        createUserBody.userData = {\n          is_web_menopause_user: true\n        };\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      // 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>"},"countdown":null,"offlineFirst":true,"actionBar":{},"header":{}},"tags":[],"screenType":"WebEmbed","updatedAt":"2026-06-16T15:08:52.776Z","position":{"y":-464,"x":8592},"id":"56aa975c-6909-48f2-abb3-f7dc00378e8d","name":"creating-profile"},"761ce148-2907-42e3-9bb2-f795ecc0e8c0":{"screenType":"WebEmbed","name":"waiting-inside","id":"761ce148-2907-42e3-9bb2-f795ecc0e8c0","position":{"x":10000,"y":-112},"tags":[],"content":{"animated":true,"systemPrompt":null,"canvas":{"background":{"kind":"solid","content":{"color":"#f8fbfb"}},"insets":{"top":0,"bottom":0,"start":16,"end":16}},"offlineFirst":true,"countdown":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>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      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 48px 32px 16px 32px;\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    /* --- 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  </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.<br>One more thing before we open your app.</p>\n    </div>\n\n    <div class=\"footer-section\">\n      <button id=\"action_button\">Continue</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    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      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":"2b9fc45a-8939-4ef9-a02c-e73c66070793","conditions":[]}]}}},"actionBar":{},"header":{}}},"a42fbe28-e96d-4562-b2b2-6b2815ca13e9":{"position":{"y":-1024,"x":9152},"id":"a42fbe28-e96d-4562-b2b2-6b2815ca13e9","name":"the-paywall","screenType":"Paywall","content":{"featuredMedia":{"kind":"Image","content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/6OwufOr1PtCg8dN7pR6O/images/en-US_1769514293328_1740235690200-IMG_5656.jpg/origin.jpg","small":"https://api.segmently.ai/assets/onboardings/6OwufOr1PtCg8dN7pR6O/images/en-US_1769514293328_1740235690200-IMG_5656.jpg/small.jpg"}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFill"},"layout":{"insets":{"top":0,"bottom":0,"end":0,"start":0}}},"options":{"appearance":{"itemsSpacing":6,"insets":{"start":16,"end":16,"top":2,"bottom":6}},"layout":{"insets":{"top":5,"bottom":0,"end":16,"start":16}},"items":[{"title":{"layout":{"insets":{"end":0,"start":0,"bottom":0,"top":0}},"appearance":{"fontWeight":400,"lineHeight":29.4,"insets":{"bottom":0,"top":0,"start":16,"end":0},"color":"#000000","fontSize":18,"align":"start","fontFamily":"SF Pro"},"kind":"static","translations":{"en-US":"Get a list of clothes to shop for"}},"variableValue":"option_0","image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/6OwufOr1PtCg8dN7pR6O/images/en-US_1769778378653_dollar/origin.png","small":"https://api.segmently.ai/assets/onboardings/6OwufOr1PtCg8dN7pR6O/images/en-US_1769778378653_dollar/small.png"}},"layout":{"insets":{"start":1}},"appearance":{}},"subtitle":{"translations":{"en-US":""},"appearance":{"fontSize":14,"align":"center","backgroundColorOpacity":null,"fontFamily":"SF Pro","fontWeight":300,"lineHeight":17,"insets":{"end":0,"start":16,"top":0,"bottom":0},"color":"#ffffff"},"kind":"static","layout":{"insets":{"top":0,"bottom":0,"end":0,"start":14}}}},{"title":{"translations":{"en-US":"Create a functional wardrobe"},"appearance":{"fontFamily":"SF Pro","align":"start","fontSize":18,"color":"#000000","insets":{"bottom":0,"top":0,"start":16,"end":0},"lineHeight":29.4,"fontWeight":400},"kind":"static","layout":{"insets":{"bottom":0,"top":0,"start":0,"end":0}}},"variableValue":"option_1","image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/6OwufOr1PtCg8dN7pR6O/images/en-US_1769778390037_checkmark/small.png","original":"https://api.segmently.ai/assets/onboardings/6OwufOr1PtCg8dN7pR6O/images/en-US_1769778390037_checkmark/origin.png"}},"layout":{"insets":{"start":1}},"appearance":{}},"subtitle":{"translations":{"en-US":""},"layout":{"insets":{"start":14,"end":0,"bottom":0,"top":0}},"kind":"static","appearance":{"backgroundColorOpacity":null,"fontFamily":"SF Pro","fontSize":14,"align":"center","lineHeight":17,"insets":{"bottom":0,"top":0,"end":0,"start":16},"color":"#ffffff","fontWeight":300}}},{"variableValue":"option_2","image":{"layout":{"insets":{"start":1}},"appearance":{},"translations":{"en-US":{"small":"https://api.segmently.ai/assets/onboardings/6OwufOr1PtCg8dN7pR6O/images/en-US_1769778418345_calendar/small.png","original":"https://api.segmently.ai/assets/onboardings/6OwufOr1PtCg8dN7pR6O/images/en-US_1769778418345_calendar/origin.png"}}},"subtitle":{"appearance":{"fontWeight":300,"lineHeight":17,"color":"#ffffff","insets":{"top":0,"bottom":0,"start":16,"end":0},"fontSize":14,"align":"center","backgroundColorOpacity":null,"fontFamily":"SF Pro"},"kind":"static","layout":{"insets":{"end":0,"start":14,"bottom":0,"top":0}},"translations":{"en-US":""}},"title":{"layout":{"insets":{"end":0,"start":0,"bottom":0,"top":0}},"appearance":{"fontFamily":"SF Pro","align":"start","fontSize":18,"color":"#000000","insets":{"start":16,"end":0,"top":0,"bottom":0},"lineHeight":29.4,"fontWeight":400},"kind":"static","translations":{"en-US":"Get a daily outfit plan"}}}],"selectionMode":"browse","columnLayout":"oneCol","itemLayout":"ImageTitle"},"offlineFirst":true,"paywall":{"purchaseFlags":["ShouldCloseAfterRestore","ShouldCloseAfterSubscriptionError"],"bodyAppearance":{"heroAnchor":"HeaderTop","overlayKind":"gradient","overlay":null},"footerAppearance":{"elementsOrder":"LabelBelowButton"},"purchaseAction":{"action":{"kind":"purchase","onCancelAction":null,"edges":[{"nextScreenId":"761ce148-2907-42e3-9bb2-f795ecc0e8c0","transitionKind":"push","conditions":[]}]},"iconPlacement":"fixedEnd","icon":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/onboardings/92Iv61ZxuCsjnDhXEuqY/images/en-US_1779222664620_chevronright3x/origin.png","small":"https://api.segmently.ai/assets/onboardings/92Iv61ZxuCsjnDhXEuqY/images/en-US_1779222664620_chevronright3x/origin.png"}},"appearance":{"dimensions":{"height":20,"width":20},"scaleMode":"scaleAspectFit"}},"layout":{"insets":{"top":8,"bottom":0,"end":12,"start":12}},"content":{"translations":{"en-US":""},"appearance":{"fontWeight":600,"color":"#ffffff","insets":{"end":16,"start":16,"top":0,"bottom":0},"lineHeight":22.5,"align":"center","fontSize":20,"fontFamily":"SF Pro"},"kind":"static"},"kind":"label","appearance":{"backgroundColor":"#ee346e","dimensions":{"height":55},"fullWidth":"true","borders":{"radius":{"uniform":24}}}},"headerAppearance":{"closeVisibility":"visible","closeAlignment":"end","closeDelaySeconds":0},"currencyFormat":"CurrencyISOCode","products":{"items":[{"checkbox":{"selectedAppearance":{"color":"#ee346e"},"appearance":{"color":"#d6d6d6"},"kind":"circle","layout":{"insets":{"start":0,"end":12,"bottom":16,"top":16}},"checked":false},"bottomStartLabel":{"layout":{"insets":{"start":0,"end":0,"top":0,"bottom":null}},"appearance":{"align":"start","fontSize":15,"fontFamily":"SF Pro","fontWeight":500,"color":"#000000","lineHeight":22.5},"kind":"dynamic","translations":{"en-US":"7-Day Trial for $0.99"}},"weight":1,"bottomEndLabel":{"translations":{"en-US":"then\n$99/yr"},"appearance":{"fontFamily":"SF Pro","align":"end","fontSize":15,"color":"#000000","lineHeight":22.5,"fontWeight":400},"kind":"static","layout":{"insets":{"bottom":0,"top":0,"end":0,"start":0}}},"appearance":{"columnVerticalPadding":1,"startColumnWidthPercentage":60,"columnHorizontalPadding":6},"isSelected":true,"badge":{"layout":{"insets":{"end":0,"start":0,"top":8,"bottom":0}},"kind":"static","appearance":{"lineHeight":22.5,"insets":{"top":0,"bottom":0,"start":7,"end":7},"fontWeight":500,"textColor":"#ffffff","fontFamily":"SF Pro","fontSize":15,"position":"topRight","backgroundColor":"#ee346e","textAlign":"left","borders":{"color":"#ee346e","width":2,"radius":{"uniform":16}}},"translations":{"en-US":"BEST VALUE"}},"purchaseLabel":{"layout":{"insets":{}},"kind":"static","appearance":{},"parameters":{"links":{},"labels":{}},"translations":{"en-US":"Start my 7 day trial"}},"layout":{"insets":{"end":0,"start":0,"bottom":0,"top":0}},"productId":"JwUcG8RG2G9FVukNJeiW","topEndLabel":{"translations":{"en-US":""},"layout":{"insets":{"bottom":null,"top":null,"start":0,"end":0}},"kind":"dynamic","appearance":{"lineHeight":22.5,"color":"#ffffff","fontWeight":500,"fontFamily":"SF Pro","fontSize":15,"align":"end"}},"topStartLabel":{"translations":{"en-US":"Annual plan"},"appearance":{"fontSize":17,"align":"start","fontFamily":"SF Pro","fontWeight":700,"lineHeight":22.5,"color":"#000000"},"kind":"dynamic","layout":{"insets":{"end":0,"start":0,"top":null,"bottom":0}}}},{"isSelected":false,"bottomEndLabel":{"translations":{"en-US":"$19/mo"},"layout":{"insets":{"top":0,"bottom":0,"start":0,"end":0}},"kind":"static","appearance":{"fontWeight":400,"lineHeight":22.5,"color":"#000000","fontSize":15,"align":"end","fontFamily":"SF Pro"}},"appearance":{"columnVerticalPadding":1,"columnHorizontalPadding":6,"startColumnWidthPercentage":60},"weight":1,"purchaseButtonLabel":{"layout":{"insets":{}},"kind":"static","appearance":{},"translations":{"en-US":{"l10n":{"en-US":""},"styles":{},"kind":"default","parameters":{"links":{},"labels":{}},"box":{"styles":{}}}},"parameters":{"links":{},"labels":{}}},"checkbox":{"checked":false,"selectedAppearance":{"color":"#ee346e"},"kind":"circle","appearance":{"color":"#d6d6d6"},"layout":{"insets":{"top":16,"bottom":16,"start":0,"end":12}}},"bottomStartLabel":{"translations":{"en-US":""},"appearance":{"fontFamily":"SF Pro","fontSize":15,"align":"start","lineHeight":22.5,"color":"#000000","fontWeight":500},"kind":"dynamic","layout":{"insets":{"top":0,"bottom":null,"start":0,"end":0}}},"topEndLabel":{"appearance":{"color":"#ffffff","lineHeight":22.5,"fontWeight":500,"fontFamily":"SF Pro","align":"end","fontSize":15},"kind":"dynamic","layout":{"insets":{"start":0,"end":0,"bottom":null,"top":null}},"translations":{"en-US":""}},"topStartLabel":{"translations":{"en-US":"Monthly plan"},"layout":{"insets":{"start":0,"end":0,"top":null,"bottom":0}},"kind":"dynamic","appearance":{"fontFamily":"SF Pro","fontSize":17,"align":"start","lineHeight":22.5,"color":"#000000","fontWeight":700}},"layout":{"insets":{"start":0,"end":0,"bottom":0,"top":0}},"productId":"SzkZ8ucbr7iASF4921YG","purchaseLabel":{"translations":{"en-US":"Continue"},"parameters":{"labels":{},"links":{}},"appearance":{},"kind":"static","layout":{"insets":{}}}}],"productLayout":"CheckboxLabels","layout":{"insets":{"bottom":16,"top":16,"start":12,"end":12}},"selectedAppearance":{"backgroundColor":"#ffffff","insets":{"end":16,"start":12,"top":8,"bottom":8},"borders":{"radius":{"uniform":12},"color":"#ee346e","width":2}},"viewKind":"Vertical","appearance":{"backgroundColor":"#ffffff","borders":{"color":"#d6d6d6","width":2,"radius":{"uniform":12}},"insets":{"bottom":8,"top":8,"end":16,"start":12}}}},"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"},"insets":{"top":0,"bottom":0,"end":16,"start":16}},"copy":{"subtitle":{"kind":"static","appearance":{"fontFamily":"SF Pro","fontSize":20,"align":"start","lineHeight":30,"color":"#ffffff","fontWeight":700},"layout":{"insets":{"start":0,"end":0,"bottom":16,"top":16}},"translations":{"en-US":""}},"title":{"layout":{"insets":{"start":18,"end":0,"top":12,"bottom":12}},"appearance":{"lineHeight":35,"color":"#000000","fontWeight":700,"fontFamily":"SF Pro","fontSize":30,"align":"start"},"kind":"static","translations":{"en-US":"Get started styling what you already own immediately!"}}},"countdown":null,"animated":true,"systemPrompt":null},"tags":[]},"cb294cac-75d6-4276-934c-1e28c2865b10":{"tags":[],"content":{"actionBar":{},"header":{},"animated":true,"systemPrompt":null,"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"},"insets":{"end":16,"start":16,"top":0,"bottom":0}},"embed":{"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>","callback":{"action":{"kind":"advance","edges":[]}}},"offlineFirst":true,"countdown":null},"name":"has-subscription","position":{"y":1216,"x":9152},"id":"cb294cac-75d6-4276-934c-1e28c2865b10","screenType":"WebEmbed"},"of-menopause-body-changing-statement":{"screenType":"WebEmbed","tags":[],"aiMeta":{"generationModel":"manual-cli","generationTimestamp":"2026-06-18T07:49:08.035Z","source":"segmently-cli","blockType":"WebEmbed","blockRole":"of-menopause-body-changing-statement","iterationCount":1},"entityId":"of-menopause-body-changing-statement","id":"of-menopause-body-changing-statement","position":{"x":-1936,"y":368},"name":"of-menopause-body-changing-statement","updatedAt":"2026-06-18T08:06:44.372Z","content":{"embed":{"callback":{"action":{"kind":"advance","edges":[{"transitionKind":"push","nextScreenId":"of-menopause-clothes-fit-statement","conditions":[]}]}},"childSections":[{"kind":"Text","order":0,"textContent":{"title":{"translations":{"en-US":"My body is changing and getting dressed has gotten harder"},"kind":"static","appearance":{}}},"label":"title","id":"title"},{"id":"step_counter","label":"step_counter","order":1,"textContent":{"title":{"translations":{"en-US":"1/4"},"appearance":{},"kind":"static"}},"kind":"Text"},{"optionsListContent":{"items":[{"id":"agree","title":{"kind":"static","appearance":{},"translations":{"en-US":"Agree"}},"variableValue":"agree"},{"id":"somewhat_agree","title":{"translations":{"en-US":"Somewhat Agree"},"kind":"static","appearance":{}},"variableValue":"somewhat_agree"},{"id":"somewhat_disagree","title":{"appearance":{},"kind":"static","translations":{"en-US":"Somewhat Disagree"}},"variableValue":"somewhat_disagree"},{"variableValue":"disagree","title":{"translations":{"en-US":"Disagree"},"kind":"static","appearance":{}},"id":"disagree"}]},"id":"agreement_options","label":"agreement_options","kind":"SingleSelectionList","order":2}],"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>Statement</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=Google+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #1A1A1A;\n      --text-muted: rgba(0, 0, 0, 0.55);\n      --card-bg: rgba(255, 255, 255, 0.8);\n      --card-border: rgba(0, 0, 0, 0.1);\n      --card-bg-selected: #FEE1E6;\n      --card-border-selected: #FCD0DD;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #FFFCFD;\n    }\n    .screen {\n      position: relative;\n      width: 100%; height: 100vh; height: 100dvh;\n      display: flex; flex-direction: column;\n      background:\n        radial-gradient(110% 50% at 35% 55%, rgba(245, 50, 109, 0.30) 0%, rgba(245, 50, 109, 0.14) 28%, rgba(245, 50, 109, 0) 62%),\n        radial-gradient(85% 42% at 75% 62%, rgba(255, 180, 200, 0.38) 0%, rgba(255, 180, 200, 0) 70%),\n        linear-gradient(180deg, #FFFCFD 0%, #FFFCFD 100%);\n      overflow: hidden;\n      -webkit-tap-highlight-color: transparent;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .screen {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n      }\n    }\n    .topbar {\n      display: flex; align-items: center; justify-content: space-between;\n      padding: 16px 20px 8px 20px;\n      flex-shrink: 0;\n    }\n    .back-btn {\n      width: 40px; height: 40px;\n      display: flex; align-items: center; justify-content: center;\n      background: transparent; border: none; padding: 0; cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .step-counter {\n      font-weight: 500;\n      font-size: 14px;\n      line-height: 1.42;\n      letter-spacing: -0.16px;\n      color: var(--text-muted);\n    }\n    .content {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      padding: 24px 20px 24px 20px;\n      min-height: 0;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      -webkit-overflow-scrolling: touch;\n    }\n    .title {\n      margin: 0 auto 24px auto;\n      font-weight: 700;\n      font-size: 24px;\n      line-height: 1.33;\n      letter-spacing: -0.15px;\n      color: var(--text-dark);\n      text-align: center;\n      max-width: 340px;\n    }\n    .options { display: flex; flex-direction: column; gap: 12px; }\n    .option {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 64px;\n      padding: 16px;\n      background: var(--card-bg);\n      border: 1px solid var(--card-border);\n      border-radius: 14px;\n      cursor: pointer;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n      transition: background-color 120ms ease, border-color 120ms ease;\n    }\n    .option .label {\n      font-size: 16px;\n      font-weight: 500;\n      line-height: 1.5;\n      letter-spacing: -0.18px;\n      color: var(--text-dark);\n      text-align: center;\n    }\n    .option.selected {\n      background: var(--card-bg-selected);\n      border-color: var(--card-border-selected);\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" data-testid=\"screen-root\">\n    <div class=\"topbar\">\n      <button class=\"back-btn\" id=\"back_button\" data-testid=\"back-button\" aria-label=\"Back\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M15 18l-6-6 6-6\" stroke=\"#1A1A1A\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n      <span class=\"step-counter\" id=\"step_counter\">1/4</span>\n    </div>\n\n    <div class=\"content\">\n      <h1 class=\"title\" id=\"title_label\">My body is changing and getting dressed has gotten harder</h1>\n      <div class=\"options\" id=\"options_list\" data-testid=\"options-list\"></div>\n    </div>\n  </div>\n\n  <script>\n    var VARIABLE_ID = 'body_changing_agreement';\n    var SECTION_LABEL = 'agreement_options';\n\n    var FALLBACK_ITEMS = [\n      { id: 'agree',              title: 'Agree' },\n      { id: 'somewhat_agree',     title: 'Somewhat Agree' },\n      { id: 'somewhat_disagree',  title: 'Somewhat Disagree' },\n      { id: 'disagree',           title: 'Disagree' }\n    ];\n\n    var state = { items: FALLBACK_ITEMS.slice(), selectedId: null, sdk: null, advanced: false };\n\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n\n    function readItems(sdk) {\n      try {\n        var section = sdk.getChildSection(SECTION_LABEL);\n        var items = section && Array.isArray(section.items) ? section.items : null;\n        if (!items || !items.length) return null;\n        return items.map(function (it) {\n          var id = it.variableValue || it.id;\n          var fallback = FALLBACK_ITEMS.filter(function (f) { return f.id === id; })[0] || {};\n          return {\n            id: id,\n            title: (it.title && (it.title.title || it.title)) || it.label || fallback.title || ''\n          };\n        });\n      } catch (e) { return null; }\n    }\n\n    function renderOptions() {\n      var list = document.getElementById('options_list');\n      list.innerHTML = '';\n      state.items.forEach(function (item) {\n        var row = document.createElement('div');\n        row.className = 'option' + (state.selectedId === item.id ? ' selected' : '');\n        row.setAttribute('data-id', item.id);\n        row.setAttribute('data-testid', 'option-' + item.id);\n        row.setAttribute('role', 'radio');\n        row.setAttribute('aria-checked', state.selectedId === item.id ? 'true' : 'false');\n        row.innerHTML = '<div class=\"label\"></div>';\n        row.querySelector('.label').textContent = item.title;\n        row.addEventListener('click', function () { selectOption(item.id); });\n        list.appendChild(row);\n      });\n    }\n\n    function advance(value) {\n      if (state.advanced) return;\n      state.advanced = true;\n      try { state.sdk && state.sdk.setVariable(VARIABLE_ID, value); } catch (err) { console.error('setVariable failed', err); }\n      try { state.sdk && state.sdk.navigateNext(); } catch (err) {\n        state.advanced = false;\n        console.error('navigateNext failed', err);\n      }\n    }\n\n    function selectOption(id) {\n      state.selectedId = id;\n      renderOptions();\n      setTimeout(function () { advance(id); }, 160);\n    }\n\n    function bindBack(sdk) {\n      document.getElementById('back_button').addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        try { sdk.navigateBack(); } catch (err) { console.error('navigateBack failed', err); }\n      });\n    }\n\n    function init(sdk) {\n      state.sdk = sdk;\n      document.getElementById('title_label').textContent = readText(sdk, 'title', 'My body is changing and getting dressed has gotten harder');\n      document.getElementById('step_counter').textContent = readText(sdk, 'step_counter', '1/4');\n\n      var items = readItems(sdk);\n      if (items && items.length) state.items = items;\n\n      try {\n        var current = sdk.getVariable(VARIABLE_ID);\n        if (current && state.items.some(function (i) { return i.id === current; })) {\n          state.selectedId = current;\n        }\n      } catch (e) { /* noop */ }\n\n      renderOptions();\n      bindBack(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n      renderOptions();\n    }\n  </script>\n</body>\n</html>\n"},"offlineFirst":false,"canvas":{"background":{"content":{"color":"#1a1a1a"},"kind":"solid"}},"animated":true},"aiContent":{},"order":6,"createdAt":"2026-06-18T07:49:08.035Z"},"of-menopause-challenge":{"content":{"animated":true,"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}},"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 challenge</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=Google+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #241E32;\n      --text-body: #383751;\n      --text-muted: #6B7280;\n      --border-default: #E5E5EA;\n      --bg-card: #FFFFFF;\n      --bg-card-selected: #FFF6F9;\n      --progress-track: #FCE7EE;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #FFFFFF;\n    }\n    .screen {\n      position: relative;\n      width: 100%; height: 100%; min-height: 100vh;\n      display: flex; flex-direction: column;\n      background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 60%, #FFE4EE 100%);\n      overflow: hidden;\n      -webkit-tap-highlight-color: transparent;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .screen {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n      }\n    }\n    .topbar {\n      display: flex; align-items: center; gap: 12px;\n      padding: 16px 20px 8px 20px;\n      flex-shrink: 0;\n    }\n    .back-btn {\n      width: 24px; height: 24px;\n      display: flex; align-items: center; justify-content: center;\n      background: transparent; border: none; padding: 0; cursor: pointer;\n      flex-shrink: 0;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .progress {\n      flex: 1 1 auto;\n      height: 6px;\n      background: var(--progress-track);\n      border-radius: 999px;\n      overflow: hidden;\n    }\n    .progress-fill {\n      height: 100%;\n      width: 37.5%;\n      background: var(--brand-primary);\n      border-radius: 999px;\n      transition: width 200ms ease;\n    }\n    .step-counter {\n      flex-shrink: 0;\n      font-size: 14px;\n      color: var(--text-muted);\n      min-width: 24px;\n      text-align: right;\n    }\n\n    .content {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      padding: clamp(20px, 6vh, 80px) 20px 8px 20px;\n      min-height: 0;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      -webkit-overflow-scrolling: touch;\n    }\n    .eyebrow {\n      margin: 0 0 4px 0;\n      font-weight: 700;\n      font-size: 13px;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n      color: var(--brand-primary);\n    }\n    .title {\n      margin: 0 0 24px 0;\n      font-weight: 700;\n      font-size: 22px;\n      line-height: 1.2;\n      letter-spacing: -0.01em;\n      color: var(--text-dark);\n    }\n    .options { display: flex; flex-direction: column; gap: 12px; }\n    .option {\n      display: flex; align-items: center; gap: 14px;\n      min-height: 80px;\n      padding: 16px;\n      background: var(--bg-card);\n      border: 1px solid var(--border-default);\n      border-radius: 16px;\n      cursor: pointer;\n      transition: background-color 120ms ease, border-color 120ms ease;\n    }\n    .option .emoji {\n      flex-shrink: 0;\n      font-size: 20px;\n      line-height: 1;\n      width: 26px; text-align: center;\n    }\n    .option .text {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      gap: 4px;\n      min-width: 0;\n    }\n    .option .label {\n      font-size: 15px;\n      font-weight: 500;\n      line-height: 1.27;\n      color: var(--text-dark);\n    }\n    .option .sublabel {\n      font-size: 13px;\n      line-height: 1.4;\n      color: var(--text-muted);\n    }\n    .option .radio {\n      flex-shrink: 0;\n      width: 20px; height: 20px;\n      border-radius: 50%;\n      border: 1.5px solid #D1D1DB;\n      background: transparent;\n      display: flex; align-items: center; justify-content: center;\n    }\n    .option.selected {\n      background: var(--bg-card-selected);\n      border-color: var(--brand-primary);\n    }\n    .option.selected .radio {\n      border-color: var(--brand-primary);\n      background: var(--brand-primary);\n    }\n    .option.selected .radio::after {\n      content: \"\";\n      width: 10px; height: 6px;\n      border-left: 2px solid #fff;\n      border-bottom: 2px solid #fff;\n      transform: rotate(-45deg) translate(1px, -1px);\n    }\n\n    .footer {\n      padding: 16px 20px calc(20px + env(safe-area-inset-bottom)) 20px;\n      flex-shrink: 0;\n    }\n    .cta {\n      width: 100%; height: 56px;\n      border: none; border-radius: 100px;\n      background: var(--brand-primary);\n      color: #FFFFFF;\n      font-family: inherit; font-weight: 500; font-size: 16px;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .cta:disabled { opacity: 0.4; cursor: not-allowed; }\n    .cta:not(:disabled):active { opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" data-testid=\"screen-root\">\n    <div class=\"topbar\">\n      <button class=\"back-btn\" id=\"back_button\" data-testid=\"back-button\" aria-label=\"Back\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M19 12H5M5 12l7-7M5 12l7 7\" stroke=\"#241E32\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"progress\" aria-label=\"Step 3 of 8\">\n        <div class=\"progress-fill\" id=\"progress_fill\"></div>\n      </div>\n      <div class=\"step-counter\" id=\"step_counter\">3/8</div>\n    </div>\n\n    <div class=\"content\">\n      <div class=\"eyebrow\" id=\"eyebrow_label\">YOUR CHALLENGE</div>\n      <h1 class=\"title\" id=\"title_label\">What's the hardest part about getting dressed?</h1>\n      <div class=\"options\" id=\"options_list\" data-testid=\"options-list\"></div>\n    </div>\n\n    <div class=\"footer\">\n      <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\" disabled>\n        <span id=\"cta_label\">Continue</span>\n      </button>\n    </div>\n  </div>\n\n  <script>\n    var VARIABLE_ID = 'hardest_part';\n    var SECTION_LABEL = 'challenge_options';\n\n    var FALLBACK_ITEMS = [\n      { id: 'never_pairs',         emoji: '🤷‍♀️', title: 'I never know what goes together',  subtitle: 'Pairing pieces feels like guesswork' },\n      { id: 'packed_not_flexible', emoji: '📦',  title: 'My closet is packed but not flexible', subtitle: 'Lots of clothes, few actual outfits' },\n      { id: 'no_confidence',       emoji: '😔',  title: 'Nothing makes me feel confident',     subtitle: 'I second-guess every choice' },\n      { id: 'too_long',            emoji: '🕐',  title: 'It takes way too long',                subtitle: \"I waste time I don’t have\" },\n      { id: 'buying_no_works',     emoji: '🛒',  title: 'I keep buying but nothing works',     subtitle: 'New clothes, same problem' }\n    ];\n    var META_BY_ID = FALLBACK_ITEMS.reduce(function (acc, it) { acc[it.id] = it; return acc; }, {});\n\n    var state = { items: FALLBACK_ITEMS.slice(), selectedId: null, sdk: null };\n\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n\n    function readItems(sdk) {\n      try {\n        var section = sdk.getChildSection(SECTION_LABEL);\n        var items = section && Array.isArray(section.items) ? section.items : null;\n        if (!items || !items.length) return null;\n        return items.map(function (it) {\n          var id = it.variableValue || it.id;\n          var meta = META_BY_ID[id] || {};\n          return {\n            id: id,\n            emoji: it.icon || meta.emoji || '•',\n            title: (it.title && (it.title.title || it.title)) || it.label || meta.title || '',\n            subtitle: (it.subtitle && (it.subtitle.title || it.subtitle)) || meta.subtitle || ''\n          };\n        });\n      } catch (e) { return null; }\n    }\n\n    function renderOptions() {\n      var list = document.getElementById('options_list');\n      list.innerHTML = '';\n      state.items.forEach(function (item) {\n        var isSelected = state.selectedId === item.id;\n        var row = document.createElement('div');\n        row.className = 'option' + (isSelected ? ' selected' : '');\n        row.setAttribute('data-id', item.id);\n        row.setAttribute('data-testid', 'option-' + item.id);\n        row.setAttribute('role', 'radio');\n        row.setAttribute('aria-checked', isSelected ? 'true' : 'false');\n        row.innerHTML =\n          '<div class=\"emoji\" aria-hidden=\"true\"></div>' +\n          '<div class=\"text\"><div class=\"label\"></div><div class=\"sublabel\"></div></div>' +\n          '<div class=\"radio\" aria-hidden=\"true\"></div>';\n        row.querySelector('.emoji').textContent = item.emoji;\n        row.querySelector('.label').textContent = item.title;\n        row.querySelector('.sublabel').textContent = item.subtitle;\n        row.addEventListener('click', function () { selectOption(item.id); });\n        list.appendChild(row);\n      });\n      document.getElementById('cta_button').disabled = !state.selectedId;\n    }\n\n    function selectOption(id) {\n      state.selectedId = id;\n      renderOptions();\n    }\n\n    function bindBack(sdk) {\n      document.getElementById('back_button').addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        try { sdk.navigateBack(); } catch (err) { console.error('navigateBack failed', err); }\n      });\n    }\n\n    function bindCta(sdk) {\n      var btn = document.getElementById('cta_button');\n      var advanced = false;\n      btn.addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        if (advanced || !state.selectedId) return;\n        advanced = true;\n        try { sdk.setVariable(VARIABLE_ID, state.selectedId); } catch (err) { console.error('setVariable failed', err); }\n        try { sdk.navigateNext(); } catch (err) {\n          advanced = false;\n          console.error('navigateNext failed', err);\n        }\n      });\n    }\n\n    function init(sdk) {\n      state.sdk = sdk;\n\n      document.getElementById('eyebrow_label').textContent = readText(sdk, 'eyebrow_label', 'YOUR CHALLENGE');\n      document.getElementById('title_label').textContent = readText(sdk, 'title', \"What's the hardest part about getting dressed?\");\n      document.getElementById('cta_label').textContent = readText(sdk, 'cta_label', 'Continue');\n\n      var items = readItems(sdk);\n      if (items && items.length) state.items = items;\n\n      try {\n        var current = sdk.getVariable(VARIABLE_ID);\n        if (current && state.items.some(function (i) { return i.id === current; })) {\n          state.selectedId = current;\n        }\n      } catch (e) { /* noop */ }\n\n      renderOptions();\n      bindBack(sdk);\n      bindCta(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n      renderOptions();\n    }\n  </script>\n</body>\n</html>\n","isIframe":true,"callback":{"action":{"edges":[{"nextScreenId":"of-menopause-founder-note-branch","transitionKind":"push","conditions":[]},{"conditions":[{"value":"rediscovering,hormonal_midlife,body_changing","key":"journey_stage","operator":"in"}],"transitionKind":"push","nextScreenId":"of-menopause-founder-note"}],"kind":"advance"}},"childSections":[{"order":0,"textContent":{"title":{"translations":{"en-US":"YOUR CHALLENGE"},"kind":"static","appearance":{}}},"kind":"Text","id":"eyebrow_label","label":"eyebrow_label"},{"kind":"Text","order":1,"textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"What's the hardest part about getting dressed?"}}},"id":"title","label":"title"},{"label":"cta_label","id":"cta_label","kind":"Text","order":2,"textContent":{"title":{"translations":{"en-US":"Continue"},"kind":"static","appearance":{}}}},{"kind":"SingleSelectionList","order":3,"optionsListContent":{"items":[{"title":{"appearance":{},"kind":"static","translations":{"en-US":"I never know what goes together"}},"id":"never_pairs","subtitle":{"translations":{"en-US":"Pairing pieces feels like guesswork"},"kind":"static","appearance":{}},"variableValue":"never_pairs"},{"variableValue":"packed_not_flexible","subtitle":{"kind":"static","appearance":{},"translations":{"en-US":"Lots of clothes, few actual outfits"}},"id":"packed_not_flexible","title":{"translations":{"en-US":"My closet is packed but not flexible"},"appearance":{},"kind":"static"}},{"id":"no_confidence","title":{"translations":{"en-US":"Nothing makes me feel confident"},"appearance":{},"kind":"static"},"variableValue":"no_confidence","subtitle":{"appearance":{},"kind":"static","translations":{"en-US":"I second-guess every choice"}}},{"subtitle":{"translations":{"en-US":"I waste time I don’t have"},"appearance":{},"kind":"static"},"variableValue":"too_long","title":{"appearance":{},"kind":"static","translations":{"en-US":"It takes way too long"}},"id":"too_long"},{"id":"buying_no_works","title":{"appearance":{},"kind":"static","translations":{"en-US":"I keep buying but nothing works"}},"variableValue":"buying_no_works","subtitle":{"translations":{"en-US":"New clothes, same problem"},"kind":"static","appearance":{}}}]},"id":"challenge_options","label":"challenge_options"}]},"offlineFirst":false},"order":6,"aiContent":{},"createdAt":"2026-06-15T11:38:03.122Z","name":"Hardest part","id":"of-menopause-challenge","position":{"x":2400,"y":0},"updatedAt":"2026-06-16T13:03:46.743Z","tags":[],"aiMeta":{"generationTimestamp":"2026-06-15T11:38:03.122Z","generationModel":"manual-cli","iterationCount":1,"blockRole":"Hardest part","blockType":"WebEmbed","source":"segmently-cli"},"screenType":"WebEmbed"},"of-menopause-closet-insight":{"position":{"x":3840,"y":0},"id":"of-menopause-closet-insight","name":"Closet insight","updatedAt":"2026-06-17T07:29:27.739Z","content":{"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}},"animated":true,"embed":{"isIframe":true,"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>Closet insight</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=Google+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --brand-soft:    #FCB9CD;\n      --text-dark: #241E32;\n      --text-body: #383751;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #FFFFFF;\n    }\n    .stage {\n      position: relative;\n      width: 100%;\n      height: 100vh;\n      height: 100dvh;\n      max-height: 100vh;\n      max-height: 100dvh;\n      display: flex; flex-direction: column;\n      justify-content: flex-end;\n      padding: 0;\n      background: rgba(0, 0, 0, 0.30);\n      -webkit-tap-highlight-color: transparent;\n      overflow: hidden;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .stage {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px;\n      }\n    }\n\n    .card {\n      flex: 0 1 auto;\n      display: flex; flex-direction: column;\n      align-items: stretch;\n      padding: 0;\n      background: linear-gradient(187.86deg, #FFFFFF 24%, #FC8DAF 113%);\n      border-top-left-radius: 24px;\n      border-top-right-radius: 24px;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n      text-align: center;\n      max-height: 88%;\n      min-height: 0;\n      overflow: hidden;\n      position: relative;\n    }\n    .card-head {\n      display: flex; flex-direction: column; align-items: center;\n      flex-shrink: 0;\n      padding-top: 36px;\n    }\n    .scroll-area {\n      flex: 1 1 auto;\n      min-height: 0;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      -webkit-overflow-scrolling: touch;\n      display: flex; flex-direction: column; align-items: center;\n      padding: 0 24px;\n    }\n    .scroll-area::after {\n      content: \"\";\n      display: block;\n      flex-shrink: 0;\n      width: 100%;\n      height: 140px;\n    }\n\n    .tag {\n      display: inline-flex;\n      align-items: center;\n      padding: 8px 16px;\n      background: #FFEEF3;\n      border: 0.808px solid #FCD0DD;\n      border-radius: 100px;\n      font-size: 14px;\n      line-height: 20px;\n      font-weight: 500;\n      color: rgba(0, 0, 0, 0.70);\n    }\n\n    .sparkle {\n      margin: 24px 0 8px 0;\n      width: 56px;\n      height: auto;\n      flex-shrink: 0;\n      display: block;\n    }\n\n    .stat {\n      margin: 8px 0 4px 0;\n      font-weight: 700;\n      font-size: 72px;\n      line-height: 1.05;\n      letter-spacing: -0.011em;\n      color: #F5326D;\n    }\n    .stat-title {\n      margin: 4px 0 2px 0;\n      font-weight: 600;\n      font-size: 20px;\n      line-height: 24px;\n      letter-spacing: -0.005em;\n      color: #1A1A1A;\n    }\n    .stat-sub {\n      margin: 0 0 24px 0;\n      font-size: 16px;\n      line-height: 24px;\n      letter-spacing: -0.011em;\n      color: rgba(0, 0, 0, 0.65);\n    }\n\n    .body {\n      flex: 0 0 auto;\n      max-width: 320px;\n      margin-bottom: 20px;\n    }\n    .body p {\n      margin: 0 0 14px 0;\n      font-size: 16px;\n      line-height: 24px;\n      letter-spacing: -0.011em;\n      color: #1A1A1A;\n    }\n    .body p:last-child { margin-bottom: 0; }\n    .body .pause {\n      font-weight: 700;\n    }\n\n    .footer {\n      width: 100%;\n      padding: 18px 24px calc(24px + env(safe-area-inset-bottom)) 24px;\n      position: absolute;\n      left: 0; right: 0; bottom: 0;\n      z-index: 3;\n      background:\n        linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 240, 246, 0.55) 35%, rgba(255, 232, 240, 0.78) 100%),\n        radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 60%, rgba(255, 255, 255, 0) 100%);\n      backdrop-filter: blur(22px) saturate(160%);\n      -webkit-backdrop-filter: blur(22px) saturate(160%);\n      box-shadow:\n        inset 0 -0.5px 0 rgba(255, 200, 215, 0.35),\n        0 -8px 24px -8px rgba(245, 50, 109, 0.18);\n    }\n    .cta {\n      width: 100%; height: 56px;\n      border: none; border-radius: 100px;\n      background: var(--brand-primary);\n      color: #FFFFFF;\n      font-family: inherit; font-weight: 500; font-size: 16px;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .cta:active { opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div class=\"stage\" data-testid=\"screen-root\">\n    <div class=\"card\" data-testid=\"insight-card\">\n      <div class=\"scroll-area\">\n        <div class=\"card-head\">\n          <div class=\"tag\" id=\"tag_label\">Based on your Closet</div>\n\n          <img class=\"sparkle\" id=\"sparkle_img\" alt=\"\" aria-hidden=\"true\">\n          <noscript><img class=\"sparkle\" src=\"../assets/sparkle.png\" alt=\"\"></noscript>\n\n          <div class=\"stat\" id=\"stat_label\">75+</div>\n          <div class=\"stat-title\" id=\"stat_title_label\">Outfit combinations</div>\n          <div class=\"stat-sub\" id=\"stat_sub_label\">already hiding in your closet</div>\n        </div>\n\n        <div class=\"body\">\n          <p id=\"body_p1\">Most women going through perimenopause or menopause think they need a whole new wardrobe.</p>\n          <p id=\"body_p2\"><span class=\"pause\">They don’t.</span></p>\n          <p id=\"body_p3\">They need a new system. One that works with the body they have right now, not the one the old rules were made for.</p>\n          <p id=\"body_p4\">You probably already have more than you realize.</p>\n        </div>\n      </div>\n\n      <div class=\"footer\">\n        <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\">\n          <span id=\"cta_label\">I’m curious</span>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <script>\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n\n    function readMediaUrl(sdk, label) {\n      try {\n        var m = sdk.getChildSectionMedia(label);\n        return (m && m.url) ? m.url : null;\n      } catch (e) { return null; }\n    }\n\n    // Combinations shown scale with the answer to `closet_size` on the\n    // `of-menopause-closet-size` screen.\n    var STAT_BY_CLOSET_SIZE = {\n      under_50: '75+',\n      '50_100': '150+',\n      '100_200': '300+',\n      '200_plus': '375+'\n    };\n\n    function readVariable(sdk, id) {\n      try {\n        var v = sdk.getVariable(id);\n        if (Array.isArray(v)) return v[0];\n        return v;\n      } catch (e) { return null; }\n    }\n\n    function dynamicStat(sdk) {\n      var v = readVariable(sdk, 'closet_size');\n      if (!v) return null;\n      return STAT_BY_CLOSET_SIZE[v] || null;\n    }\n\n    function applyContent(sdk) {\n      var setHtml = function (id, label) {\n        var el = document.getElementById(id);\n        var v = readText(sdk, label, el.textContent);\n        el.textContent = v;\n      };\n      var sparkleUrl = readMediaUrl(sdk, 'sparkle_media');\n      var sparkleImg = document.getElementById('sparkle_img');\n      sparkleImg.src = sparkleUrl || '../assets/sparkle.png';\n      setHtml('tag_label', 'tag_label');\n      setHtml('stat_label', 'stat_label');\n      setHtml('stat_title_label', 'stat_title_label');\n      setHtml('stat_sub_label', 'stat_sub_label');\n      setHtml('body_p1', 'body_p1');\n      setHtml('body_p3', 'body_p3');\n      setHtml('body_p4', 'body_p4');\n      setHtml('cta_label', 'cta_label');\n      var p2 = document.getElementById('body_p2').querySelector('.pause');\n      var v = readText(sdk, 'body_p2', p2.textContent);\n      p2.textContent = v;\n\n      // Override the stat after the static data-source value is applied.\n      var dyn = dynamicStat(sdk);\n      if (dyn) document.getElementById('stat_label').textContent = dyn;\n    }\n\n    function bindCta(sdk) {\n      var btn = document.getElementById('cta_button');\n      var advanced = false;\n      btn.addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        if (advanced) return;\n        advanced = true;\n        try { sdk.navigateNext(); } catch (err) {\n          advanced = false;\n          console.error('navigateNext failed', err);\n        }\n      });\n    }\n\n    function init(sdk) {\n      applyContent(sdk);\n      bindCta(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n    }\n  </script>\n</body>\n</html>\n","callback":{"action":{"edges":[{"nextScreenId":"of-menopause-nothing-to-wear","transitionKind":"push","conditions":[]}],"kind":"advance"}},"childSections":[{"id":"tag_label","label":"tag_label","kind":"Text","order":0,"textContent":{"title":{"translations":{"en-US":"Based on your Closet"},"kind":"static","appearance":{}}}},{"label":"stat_label","id":"stat_label","kind":"Text","textContent":{"title":{"translations":{"en-US":"75+"},"appearance":{},"kind":"static"}},"order":1},{"label":"stat_title_label","id":"stat_title_label","textContent":{"title":{"translations":{"en-US":"Outfit combinations"},"appearance":{},"kind":"static"}},"order":2,"kind":"Text"},{"textContent":{"title":{"translations":{"en-US":"already hiding in your closet"},"appearance":{},"kind":"static"}},"order":3,"kind":"Text","label":"stat_sub_label","id":"stat_sub_label"},{"id":"body_p1","label":"body_p1","kind":"Text","order":4,"textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Most women going through perimenopause or menopause think they need a whole new wardrobe."}}}},{"kind":"Text","textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"They don’t."}}},"order":5,"id":"body_p2","label":"body_p2"},{"id":"body_p3","label":"body_p3","textContent":{"title":{"translations":{"en-US":"They need a new system. One that works with the body they have right now, not the one the old rules were made for."},"appearance":{},"kind":"static"}},"order":6,"kind":"Text"},{"id":"body_p4","label":"body_p4","textContent":{"title":{"translations":{"en-US":"You probably already have more than you realize."},"appearance":{},"kind":"static"}},"order":7,"kind":"Text"},{"id":"cta_label","label":"cta_label","kind":"Text","order":8,"textContent":{"title":{"translations":{"en-US":"I’m curious"},"appearance":{},"kind":"static"}}},{"mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615115404_of-menopause-closet-insight-sparkle-media/origin.png","small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615115404_of-menopause-closet-insight-sparkle-media/small.png"}}}},"kind":"Image"},"label":"sparkle_media","id":"sparkle_media","kind":"Media","order":9}]},"offlineFirst":false},"order":6,"aiContent":{},"createdAt":"2026-06-15T11:47:46.820Z","screenType":"WebEmbed","tags":[],"aiMeta":{"generationModel":"manual-cli","generationTimestamp":"2026-06-15T11:47:46.820Z","source":"segmently-cli","iterationCount":1,"blockRole":"Closet insight","blockType":"WebEmbed"}},"of-menopause-closet-insight-branch":{"screenType":"WebEmbed","aiMeta":{"generationModel":"manual-cli","generationTimestamp":"2026-06-16T13:53:36.595Z","blockRole":"of-menopause-closet-insight-branch","blockType":"WebEmbed","iterationCount":1,"source":"segmently-cli"},"tags":[],"updatedAt":"2026-06-17T07:29:30.964Z","id":"of-menopause-closet-insight-branch","name":"of-menopause-closet-insight-branch","position":{"x":3840,"y":-1072},"createdAt":"2026-06-16T13:53:36.595Z","aiContent":{},"order":6,"content":{"animated":true,"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}},"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>Closet insight</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=Google+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --brand-soft:    #FCB9CD;\n      --text-dark: #241E32;\n      --text-body: #383751;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #FFFFFF;\n    }\n    .stage {\n      position: relative;\n      width: 100%;\n      height: 100vh;\n      height: 100dvh;\n      max-height: 100vh;\n      max-height: 100dvh;\n      display: flex; flex-direction: column;\n      justify-content: flex-end;\n      padding: 0;\n      background: rgba(0, 0, 0, 0.30);\n      -webkit-tap-highlight-color: transparent;\n      overflow: hidden;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .stage {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px;\n      }\n    }\n\n    .card {\n      flex: 0 1 auto;\n      display: flex; flex-direction: column;\n      align-items: stretch;\n      padding: 0;\n      background: linear-gradient(187.86deg, #FFFFFF 24%, #FC8DAF 113%);\n      border-top-left-radius: 24px;\n      border-top-right-radius: 24px;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n      text-align: center;\n      max-height: 88%;\n      min-height: 0;\n      overflow: hidden;\n      position: relative;\n    }\n    .card-head {\n      display: flex; flex-direction: column; align-items: center;\n      flex-shrink: 0;\n      padding-top: 36px;\n    }\n    .scroll-area {\n      flex: 1 1 auto;\n      min-height: 0;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      -webkit-overflow-scrolling: touch;\n      display: flex; flex-direction: column; align-items: center;\n      padding: 0 24px;\n    }\n    .scroll-area::after {\n      content: \"\";\n      display: block;\n      flex-shrink: 0;\n      width: 100%;\n      height: 140px;\n    }\n\n    .tag {\n      display: inline-flex;\n      align-items: center;\n      padding: 8px 16px;\n      background: #FFEEF3;\n      border: 0.808px solid #FCD0DD;\n      border-radius: 100px;\n      font-size: 14px;\n      line-height: 20px;\n      font-weight: 500;\n      color: rgba(0, 0, 0, 0.70);\n    }\n\n    .sparkle {\n      margin: 24px 0 8px 0;\n      width: 56px;\n      height: auto;\n      flex-shrink: 0;\n      display: block;\n    }\n\n    .stat {\n      margin: 8px 0 4px 0;\n      font-weight: 700;\n      font-size: 72px;\n      line-height: 1.05;\n      letter-spacing: -0.011em;\n      color: #F5326D;\n    }\n    .stat-title {\n      margin: 4px 0 2px 0;\n      font-weight: 600;\n      font-size: 20px;\n      line-height: 24px;\n      letter-spacing: -0.005em;\n      color: #1A1A1A;\n    }\n    .stat-sub {\n      margin: 0 0 24px 0;\n      font-size: 16px;\n      line-height: 24px;\n      letter-spacing: -0.011em;\n      color: rgba(0, 0, 0, 0.65);\n    }\n\n    .body {\n      flex: 0 0 auto;\n      max-width: 320px;\n      margin-bottom: 20px;\n    }\n    .body p {\n      margin: 0 0 14px 0;\n      font-size: 16px;\n      line-height: 24px;\n      letter-spacing: -0.011em;\n      color: #1A1A1A;\n    }\n    .body p:last-child { margin-bottom: 0; }\n    .body .pause {\n      font-weight: 700;\n    }\n\n    .footer {\n      width: 100%;\n      padding: 18px 24px calc(24px + env(safe-area-inset-bottom)) 24px;\n      position: absolute;\n      left: 0; right: 0; bottom: 0;\n      z-index: 3;\n      background:\n        linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 240, 246, 0.55) 35%, rgba(255, 232, 240, 0.78) 100%),\n        radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 60%, rgba(255, 255, 255, 0) 100%);\n      backdrop-filter: blur(22px) saturate(160%);\n      -webkit-backdrop-filter: blur(22px) saturate(160%);\n      box-shadow:\n        inset 0 -0.5px 0 rgba(255, 200, 215, 0.35),\n        0 -8px 24px -8px rgba(245, 50, 109, 0.18);\n    }\n    .cta {\n      width: 100%; height: 56px;\n      border: none; border-radius: 100px;\n      background: var(--brand-primary);\n      color: #FFFFFF;\n      font-family: inherit; font-weight: 500; font-size: 16px;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .cta:active { opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div class=\"stage\" data-testid=\"screen-root\">\n    <div class=\"card\" data-testid=\"insight-card\">\n      <div class=\"scroll-area\">\n        <div class=\"card-head\">\n          <div class=\"tag\" id=\"tag_label\">Based on your Closet</div>\n\n          <img class=\"sparkle\" id=\"sparkle_img\" alt=\"\" aria-hidden=\"true\">\n          <noscript><img class=\"sparkle\" src=\"../assets/sparkle.png\" alt=\"\"></noscript>\n\n          <div class=\"stat\" id=\"stat_label\">75+</div>\n          <div class=\"stat-title\" id=\"stat_title_label\">Outfit combinations</div>\n          <div class=\"stat-sub\" id=\"stat_sub_label\">already hiding in your closet</div>\n        </div>\n\n        <div class=\"body\">\n          <p id=\"body_p1\">Most people think they need more clothes when really, they just need a way to put things together.</p>\n          <p id=\"body_p4\">You probably already have more options than you realise.</p>\n        </div>\n      </div>\n\n      <div class=\"footer\">\n        <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\">\n          <span id=\"cta_label\">I’m curious</span>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <script>\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n\n    function readMediaUrl(sdk, label) {\n      try {\n        var m = sdk.getChildSectionMedia(label);\n        return (m && m.url) ? m.url : null;\n      } catch (e) { return null; }\n    }\n\n    // Combinations shown scale with the answer to `closet_size` on the\n    // `of-menopause-closet-size` screen.\n    var STAT_BY_CLOSET_SIZE = {\n      under_50: '75+',\n      '50_100': '150+',\n      '100_200': '300+',\n      '200_plus': '375+'\n    };\n\n    function readVariable(sdk, id) {\n      try {\n        var v = sdk.getVariable(id);\n        if (Array.isArray(v)) return v[0];\n        return v;\n      } catch (e) { return null; }\n    }\n\n    function dynamicStat(sdk) {\n      var v = readVariable(sdk, 'closet_size');\n      if (!v) return null;\n      return STAT_BY_CLOSET_SIZE[v] || null;\n    }\n\n    function applyContent(sdk) {\n      var setHtml = function (id, label) {\n        var el = document.getElementById(id);\n        if (!el) return;\n        var v = readText(sdk, label, el.textContent);\n        el.textContent = v;\n      };\n      var sparkleUrl = readMediaUrl(sdk, 'sparkle_media');\n      var sparkleImg = document.getElementById('sparkle_img');\n      sparkleImg.src = sparkleUrl || '../assets/sparkle.png';\n      setHtml('tag_label', 'tag_label');\n      setHtml('stat_label', 'stat_label');\n      setHtml('stat_title_label', 'stat_title_label');\n      setHtml('stat_sub_label', 'stat_sub_label');\n      setHtml('body_p1', 'body_p1');\n      setHtml('body_p4', 'body_p4');\n      setHtml('cta_label', 'cta_label');\n\n      // Override the stat after the static data-source value is applied.\n      var dyn = dynamicStat(sdk);\n      if (dyn) document.getElementById('stat_label').textContent = dyn;\n    }\n\n    function bindCta(sdk) {\n      var btn = document.getElementById('cta_button');\n      var advanced = false;\n      btn.addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        if (advanced) return;\n        advanced = true;\n        try { sdk.navigateNext(); } catch (err) {\n          advanced = false;\n          console.error('navigateNext failed', err);\n        }\n      });\n    }\n\n    function init(sdk) {\n      applyContent(sdk);\n      bindCta(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n    }\n  </script>\n</body>\n</html>\n","callback":{"action":{"kind":"advance","edges":[{"transitionKind":"push","nextScreenId":"of-menopause-nothing-to-wear","conditions":[]}]}},"childSections":[{"label":"tag_label","id":"tag_label","kind":"Text","textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Based on your Closet"}}},"order":0},{"order":1,"textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"75+"}}},"kind":"Text","label":"stat_label","id":"stat_label"},{"kind":"Text","order":2,"textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"Outfit combinations"}}},"label":"stat_title_label","id":"stat_title_label"},{"kind":"Text","textContent":{"title":{"translations":{"en-US":"already hiding in your closet"},"kind":"static","appearance":{}}},"order":3,"label":"stat_sub_label","id":"stat_sub_label"},{"label":"body_p1","id":"body_p1","kind":"Text","order":4,"textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"Most people think they need more clothes when really, they just need a way to put things together."}}}},{"kind":"Text","textContent":{"title":{"translations":{"en-US":"You probably already have more options than you realise."},"appearance":{},"kind":"static"}},"order":5,"label":"body_p4","id":"body_p4"},{"id":"cta_label","label":"cta_label","order":6,"textContent":{"title":{"translations":{"en-US":"I’m curious"},"kind":"static","appearance":{}}},"kind":"Text"},{"order":7,"kind":"Media","label":"sparkle_media","id":"sparkle_media","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615115404_of-menopause-closet-insight-sparkle-media/origin.png","small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615115404_of-menopause-closet-insight-sparkle-media/small.png"}}}},"kind":"Image"}}]},"offlineFirst":false}},"of-menopause-closet-size":{"content":{"animated":true,"canvas":{"background":{"kind":"solid","content":{"color":"#f8fbfb"}}},"offlineFirst":false,"embed":{"childSections":[{"id":"eyebrow_label","label":"eyebrow_label","textContent":{"title":{"translations":{"en-US":"REALITY CHECK"},"kind":"static","appearance":{}}},"order":0,"kind":"Text"},{"label":"title","id":"title","kind":"Text","textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"How many items of clothing do you have?"}}},"order":1},{"label":"cta_label","id":"cta_label","order":2,"textContent":{"title":{"translations":{"en-US":"Continue"},"appearance":{},"kind":"static"}},"kind":"Text"},{"order":3,"kind":"SingleSelectionList","id":"closet_options","label":"closet_options","optionsListContent":{"items":[{"subtitle":{"appearance":{},"kind":"static","translations":{"en-US":"A smaller, curated closet"}},"variableValue":"under_50","title":{"translations":{"en-US":"Under 50 pieces"},"appearance":{},"kind":"static"},"id":"under_50"},{"subtitle":{"kind":"static","appearance":{},"translations":{"en-US":"A moderate wardrobe"}},"variableValue":"50_100","title":{"kind":"static","appearance":{},"translations":{"en-US":"50-100 pieces"}},"id":"50_100"},{"variableValue":"100_200","subtitle":{"appearance":{},"kind":"static","translations":{"en-US":"More than enough, in theory"}},"id":"100_200","title":{"translations":{"en-US":"100-200 pieces"},"appearance":{},"kind":"static"}},{"title":{"translations":{"en-US":"200+ pieces"},"kind":"static","appearance":{}},"id":"200_plus","subtitle":{"appearance":{},"kind":"static","translations":{"en-US":"A full closet but is it working?"}},"variableValue":"200_plus"}]}}],"callback":{"action":{"edges":[{"transitionKind":"push","nextScreenId":"of-menopause-closet-insight-branch","conditions":[]},{"nextScreenId":"of-menopause-closet-insight","transitionKind":"push","conditions":[{"operator":"in","key":"journey_stage","value":"rediscovering,hormonal_midlife,body_changing"}]}],"kind":"advance"}},"isIframe":true,"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>Closet size</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=Google+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #241E32;\n      --text-body: #383751;\n      --text-muted: #6B7280;\n      --border-default: #E5E5EA;\n      --bg-card: #FFFFFF;\n      --bg-card-selected: #FFF6F9;\n      --progress-track: #FCE7EE;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #FFFFFF;\n    }\n    .screen {\n      position: relative;\n      width: 100%; height: 100%; min-height: 100vh;\n      display: flex; flex-direction: column;\n      background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 60%, #FFE4EE 100%);\n      overflow: hidden;\n      -webkit-tap-highlight-color: transparent;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .screen {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n      }\n    }\n    .topbar {\n      display: flex; align-items: center; gap: 12px;\n      padding: 16px 20px 8px 20px;\n      flex-shrink: 0;\n    }\n    .back-btn {\n      width: 24px; height: 24px;\n      display: flex; align-items: center; justify-content: center;\n      background: transparent; border: none; padding: 0; cursor: pointer;\n      flex-shrink: 0;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .progress {\n      flex: 1 1 auto;\n      height: 6px;\n      background: var(--progress-track);\n      border-radius: 999px;\n      overflow: hidden;\n    }\n    .progress-fill {\n      height: 100%;\n      width: 50%;\n      background: var(--brand-primary);\n      border-radius: 999px;\n      transition: width 200ms ease;\n    }\n    .step-counter {\n      flex-shrink: 0;\n      font-size: 14px;\n      color: var(--text-muted);\n      min-width: 24px;\n      text-align: right;\n    }\n\n    .content {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      padding: clamp(20px, 6vh, 80px) 20px 8px 20px;\n      min-height: 0;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      -webkit-overflow-scrolling: touch;\n    }\n    .eyebrow {\n      margin: 0 0 4px 0;\n      font-weight: 700;\n      font-size: 13px;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n      color: var(--brand-primary);\n    }\n    .title {\n      margin: 0 0 24px 0;\n      font-weight: 700;\n      font-size: 22px;\n      line-height: 1.2;\n      letter-spacing: -0.01em;\n      color: var(--text-dark);\n    }\n    .options { display: flex; flex-direction: column; gap: 12px; }\n    .option {\n      display: flex; align-items: center; gap: 14px;\n      min-height: 80px;\n      padding: 16px;\n      background: var(--bg-card);\n      border: 1px solid var(--border-default);\n      border-radius: 16px;\n      cursor: pointer;\n      transition: background-color 120ms ease, border-color 120ms ease;\n    }\n    .option .text {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      gap: 4px;\n      min-width: 0;\n    }\n    .option .label {\n      font-size: 15px;\n      font-weight: 500;\n      line-height: 1.27;\n      color: var(--text-dark);\n    }\n    .option .sublabel {\n      font-size: 13px;\n      line-height: 1.4;\n      color: var(--text-muted);\n    }\n    .option .radio {\n      flex-shrink: 0;\n      width: 20px; height: 20px;\n      border-radius: 50%;\n      border: 1.5px solid #D1D1DB;\n      background: transparent;\n      display: flex; align-items: center; justify-content: center;\n    }\n    .option.selected {\n      background: var(--bg-card-selected);\n      border-color: var(--brand-primary);\n    }\n    .option.selected .radio {\n      border-color: var(--brand-primary);\n      background: var(--brand-primary);\n    }\n    .option.selected .radio::after {\n      content: \"\";\n      width: 10px; height: 6px;\n      border-left: 2px solid #fff;\n      border-bottom: 2px solid #fff;\n      transform: rotate(-45deg) translate(1px, -1px);\n    }\n\n    .footer {\n      padding: 16px 20px calc(20px + env(safe-area-inset-bottom)) 20px;\n      flex-shrink: 0;\n    }\n    .cta {\n      width: 100%; height: 56px;\n      border: none; border-radius: 100px;\n      background: var(--brand-primary);\n      color: #FFFFFF;\n      font-family: inherit; font-weight: 500; font-size: 16px;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .cta:disabled { opacity: 0.4; cursor: not-allowed; }\n    .cta:not(:disabled):active { opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" data-testid=\"screen-root\">\n    <div class=\"topbar\">\n      <button class=\"back-btn\" id=\"back_button\" data-testid=\"back-button\" aria-label=\"Back\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M19 12H5M5 12l7-7M5 12l7 7\" stroke=\"#241E32\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"progress\" aria-label=\"Step 4 of 8\">\n        <div class=\"progress-fill\" id=\"progress_fill\"></div>\n      </div>\n      <div class=\"step-counter\" id=\"step_counter\">4/8</div>\n    </div>\n\n    <div class=\"content\">\n      <div class=\"eyebrow\" id=\"eyebrow_label\">REALITY CHECK</div>\n      <h1 class=\"title\" id=\"title_label\">How many items of clothing do you have?</h1>\n      <div class=\"options\" id=\"options_list\" data-testid=\"options-list\"></div>\n    </div>\n\n    <div class=\"footer\">\n      <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\" disabled>\n        <span id=\"cta_label\">Continue</span>\n      </button>\n    </div>\n  </div>\n\n  <script>\n    var VARIABLE_ID = 'closet_size';\n    var SECTION_LABEL = 'closet_options';\n\n    var FALLBACK_ITEMS = [\n      { id: 'under_50', title: 'Under 50 pieces',  subtitle: 'A smaller, curated closet' },\n      { id: '50_100',   title: '50-100 pieces',    subtitle: 'A moderate wardrobe' },\n      { id: '100_200',  title: '100-200 pieces',   subtitle: 'More than enough, in theory' },\n      { id: '200_plus', title: '200+ pieces',      subtitle: 'A full closet but is it working?' }\n    ];\n    var META_BY_ID = FALLBACK_ITEMS.reduce(function (acc, it) { acc[it.id] = it; return acc; }, {});\n\n    var state = { items: FALLBACK_ITEMS.slice(), selectedId: null, sdk: null };\n\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n\n    function readItems(sdk) {\n      try {\n        var section = sdk.getChildSection(SECTION_LABEL);\n        var items = section && Array.isArray(section.items) ? section.items : null;\n        if (!items || !items.length) return null;\n        return items.map(function (it) {\n          var id = it.variableValue || it.id;\n          var meta = META_BY_ID[id] || {};\n          return {\n            id: id,\n            title: (it.title && (it.title.title || it.title)) || it.label || meta.title || '',\n            subtitle: (it.subtitle && (it.subtitle.title || it.subtitle)) || meta.subtitle || ''\n          };\n        });\n      } catch (e) { return null; }\n    }\n\n    function renderOptions() {\n      var list = document.getElementById('options_list');\n      list.innerHTML = '';\n      state.items.forEach(function (item) {\n        var isSelected = state.selectedId === item.id;\n        var row = document.createElement('div');\n        row.className = 'option' + (isSelected ? ' selected' : '');\n        row.setAttribute('data-id', item.id);\n        row.setAttribute('data-testid', 'option-' + item.id);\n        row.setAttribute('role', 'radio');\n        row.setAttribute('aria-checked', isSelected ? 'true' : 'false');\n        row.innerHTML =\n          '<div class=\"text\"><div class=\"label\"></div><div class=\"sublabel\"></div></div>' +\n          '<div class=\"radio\" aria-hidden=\"true\"></div>';\n        row.querySelector('.label').textContent = item.title;\n        row.querySelector('.sublabel').textContent = item.subtitle;\n        row.addEventListener('click', function () { selectOption(item.id); });\n        list.appendChild(row);\n      });\n      document.getElementById('cta_button').disabled = !state.selectedId;\n    }\n\n    function selectOption(id) {\n      state.selectedId = id;\n      renderOptions();\n    }\n\n    function bindBack(sdk) {\n      document.getElementById('back_button').addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        try { sdk.navigateBack(); } catch (err) { console.error('navigateBack failed', err); }\n      });\n    }\n\n    function bindCta(sdk) {\n      var btn = document.getElementById('cta_button');\n      var advanced = false;\n      btn.addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        if (advanced || !state.selectedId) return;\n        advanced = true;\n        try { sdk.setVariable(VARIABLE_ID, state.selectedId); } catch (err) { console.error('setVariable failed', err); }\n        try { sdk.navigateNext(); } catch (err) {\n          advanced = false;\n          console.error('navigateNext failed', err);\n        }\n      });\n    }\n\n    function init(sdk) {\n      state.sdk = sdk;\n\n      document.getElementById('eyebrow_label').textContent = readText(sdk, 'eyebrow_label', 'REALITY CHECK');\n      document.getElementById('title_label').textContent = readText(sdk, 'title', 'How many items of clothing do you have?');\n      document.getElementById('cta_label').textContent = readText(sdk, 'cta_label', 'Continue');\n\n      var items = readItems(sdk);\n      if (items && items.length) state.items = items;\n\n      try {\n        var current = sdk.getVariable(VARIABLE_ID);\n        if (current && state.items.some(function (i) { return i.id === current; })) {\n          state.selectedId = current;\n        }\n      } catch (e) { /* noop */ }\n\n      renderOptions();\n      bindBack(sdk);\n      bindCta(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n      renderOptions();\n    }\n  </script>\n</body>\n</html>\n"}},"createdAt":"2026-06-15T11:45:43.533Z","aiContent":{},"order":6,"updatedAt":"2026-06-16T13:54:13.742Z","id":"of-menopause-closet-size","name":"Closet size","position":{"y":0,"x":3360},"tags":[],"aiMeta":{"generationTimestamp":"2026-06-15T11:45:43.533Z","generationModel":"manual-cli","source":"segmently-cli","iterationCount":1,"blockRole":"Closet size","blockType":"WebEmbed"},"screenType":"WebEmbed"},"of-menopause-clothes-fit-statement":{"screenType":"WebEmbed","tags":[],"aiMeta":{"source":"segmently-cli","blockRole":"of-menopause-clothes-fit-statement","iterationCount":1,"blockType":"WebEmbed","generationTimestamp":"2026-06-18T08:06:42.649Z","generationModel":"manual-cli"},"entityId":"of-menopause-clothes-fit-statement","position":{"x":-1344,"y":368},"name":"of-menopause-clothes-fit-statement","id":"of-menopause-clothes-fit-statement","updatedAt":"2026-06-18T08:10:19.273Z","content":{"animated":true,"canvas":{"background":{"content":{"color":"#1a1a1a"},"kind":"solid"}},"embed":{"callback":{"action":{"edges":[{"transitionKind":"push","nextScreenId":"of-menopause-too-warm-statement","conditions":[]}],"kind":"advance"}},"childSections":[{"kind":"Text","textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"The clothes I used to love don’t fit or flatter me the way they once did."}}},"order":0,"label":"title","id":"title"},{"id":"step_counter","label":"step_counter","kind":"Text","textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"2/4"}}},"order":1},{"optionsListContent":{"items":[{"variableValue":"agree","title":{"appearance":{},"kind":"static","translations":{"en-US":"Agree"}},"id":"agree"},{"variableValue":"somewhat_agree","title":{"kind":"static","appearance":{},"translations":{"en-US":"Somewhat Agree"}},"id":"somewhat_agree"},{"id":"somewhat_disagree","title":{"translations":{"en-US":"Somewhat Disagree"},"kind":"static","appearance":{}},"variableValue":"somewhat_disagree"},{"id":"disagree","title":{"translations":{"en-US":"Disagree"},"kind":"static","appearance":{}},"variableValue":"disagree"}]},"id":"agreement_options","label":"agreement_options","kind":"SingleSelectionList","order":2}],"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>Statement</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=Google+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #1A1A1A;\n      --text-muted: rgba(0, 0, 0, 0.55);\n      --card-bg: rgba(255, 255, 255, 0.8);\n      --card-border: rgba(0, 0, 0, 0.1);\n      --card-bg-selected: #FEE1E6;\n      --card-border-selected: #FCD0DD;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #FFFCFD;\n    }\n    .screen {\n      position: relative;\n      width: 100%; height: 100vh; height: 100dvh;\n      display: flex; flex-direction: column;\n      background:\n        radial-gradient(110% 50% at 35% 55%, rgba(245, 50, 109, 0.30) 0%, rgba(245, 50, 109, 0.14) 28%, rgba(245, 50, 109, 0) 62%),\n        radial-gradient(85% 42% at 75% 62%, rgba(255, 180, 200, 0.38) 0%, rgba(255, 180, 200, 0) 70%),\n        linear-gradient(180deg, #FFFCFD 0%, #FFFCFD 100%);\n      overflow: hidden;\n      -webkit-tap-highlight-color: transparent;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .screen {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n      }\n    }\n    .topbar {\n      display: flex; align-items: center; justify-content: space-between;\n      padding: 16px 20px 8px 20px;\n      flex-shrink: 0;\n    }\n    .back-btn {\n      width: 40px; height: 40px;\n      display: flex; align-items: center; justify-content: center;\n      background: transparent; border: none; padding: 0; cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .step-counter {\n      font-weight: 500;\n      font-size: 14px;\n      line-height: 1.42;\n      letter-spacing: -0.16px;\n      color: var(--text-muted);\n    }\n    .content {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      padding: 24px 20px 24px 20px;\n      min-height: 0;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      -webkit-overflow-scrolling: touch;\n    }\n    .title {\n      margin: 0 auto 24px auto;\n      font-weight: 700;\n      font-size: 24px;\n      line-height: 1.33;\n      letter-spacing: -0.15px;\n      color: var(--text-dark);\n      text-align: center;\n      max-width: 340px;\n    }\n    .options { display: flex; flex-direction: column; gap: 12px; }\n    .option {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 64px;\n      padding: 16px;\n      background: var(--card-bg);\n      border: 1px solid var(--card-border);\n      border-radius: 14px;\n      cursor: pointer;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n      transition: background-color 120ms ease, border-color 120ms ease;\n    }\n    .option .label {\n      font-size: 16px;\n      font-weight: 500;\n      line-height: 1.5;\n      letter-spacing: -0.18px;\n      color: var(--text-dark);\n      text-align: center;\n    }\n    .option.selected {\n      background: var(--card-bg-selected);\n      border-color: var(--card-border-selected);\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" data-testid=\"screen-root\">\n    <div class=\"topbar\">\n      <button class=\"back-btn\" id=\"back_button\" data-testid=\"back-button\" aria-label=\"Back\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M15 18l-6-6 6-6\" stroke=\"#1A1A1A\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n      <span class=\"step-counter\" id=\"step_counter\">2/4</span>\n    </div>\n\n    <div class=\"content\">\n      <h1 class=\"title\" id=\"title_label\">The clothes I used to love don’t fit or flatter me the way they once did.</h1>\n      <div class=\"options\" id=\"options_list\" data-testid=\"options-list\"></div>\n    </div>\n  </div>\n\n  <script>\n    var VARIABLE_ID = 'clothes_fit_agreement';\n    var SECTION_LABEL = 'agreement_options';\n\n    var FALLBACK_ITEMS = [\n      { id: 'agree',              title: 'Agree' },\n      { id: 'somewhat_agree',     title: 'Somewhat Agree' },\n      { id: 'somewhat_disagree',  title: 'Somewhat Disagree' },\n      { id: 'disagree',           title: 'Disagree' }\n    ];\n\n    var state = { items: FALLBACK_ITEMS.slice(), selectedId: null, sdk: null, advanced: false };\n\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n\n    function readItems(sdk) {\n      try {\n        var section = sdk.getChildSection(SECTION_LABEL);\n        var items = section && Array.isArray(section.items) ? section.items : null;\n        if (!items || !items.length) return null;\n        return items.map(function (it) {\n          var id = it.variableValue || it.id;\n          var fallback = FALLBACK_ITEMS.filter(function (f) { return f.id === id; })[0] || {};\n          return {\n            id: id,\n            title: (it.title && (it.title.title || it.title)) || it.label || fallback.title || ''\n          };\n        });\n      } catch (e) { return null; }\n    }\n\n    function renderOptions() {\n      var list = document.getElementById('options_list');\n      list.innerHTML = '';\n      state.items.forEach(function (item) {\n        var row = document.createElement('div');\n        row.className = 'option' + (state.selectedId === item.id ? ' selected' : '');\n        row.setAttribute('data-id', item.id);\n        row.setAttribute('data-testid', 'option-' + item.id);\n        row.setAttribute('role', 'radio');\n        row.setAttribute('aria-checked', state.selectedId === item.id ? 'true' : 'false');\n        row.innerHTML = '<div class=\"label\"></div>';\n        row.querySelector('.label').textContent = item.title;\n        row.addEventListener('click', function () { selectOption(item.id); });\n        list.appendChild(row);\n      });\n    }\n\n    function advance(value) {\n      if (state.advanced) return;\n      state.advanced = true;\n      try { state.sdk && state.sdk.setVariable(VARIABLE_ID, value); } catch (err) { console.error('setVariable failed', err); }\n      try { state.sdk && state.sdk.navigateNext(); } catch (err) {\n        state.advanced = false;\n        console.error('navigateNext failed', err);\n      }\n    }\n\n    function selectOption(id) {\n      state.selectedId = id;\n      renderOptions();\n      setTimeout(function () { advance(id); }, 160);\n    }\n\n    function bindBack(sdk) {\n      document.getElementById('back_button').addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        try { sdk.navigateBack(); } catch (err) { console.error('navigateBack failed', err); }\n      });\n    }\n\n    function init(sdk) {\n      state.sdk = sdk;\n      document.getElementById('title_label').textContent = readText(sdk, 'title', 'The clothes I used to love don’t fit or flatter me the way they once did.');\n      document.getElementById('step_counter').textContent = readText(sdk, 'step_counter', '2/4');\n\n      var items = readItems(sdk);\n      if (items && items.length) state.items = items;\n\n      try {\n        var current = sdk.getVariable(VARIABLE_ID);\n        if (current && state.items.some(function (i) { return i.id === current; })) {\n          state.selectedId = current;\n        }\n      } catch (e) { /* noop */ }\n\n      renderOptions();\n      bindBack(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n      renderOptions();\n    }\n  </script>\n</body>\n</html>\n"},"offlineFirst":false},"order":6,"aiContent":{},"createdAt":"2026-06-18T08:06:42.649Z"},"of-menopause-experience-recap":{"content":{"canvas":{"background":{"content":{"color":"#1a1a1a"},"kind":"solid"}},"animated":true,"offlineFirst":false,"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>Wardrobe affirmation</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=Google+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #000000;\n      --text-body: #363636;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #FFFFFF;\n    }\n    .screen {\n      position: relative;\n      width: 100%; height: 100vh; height: 100dvh;\n      display: flex; flex-direction: column;\n      background:\n        radial-gradient(130% 60% at 50% 25%, rgba(255, 220, 200, 0.55) 0%, rgba(255, 220, 200, 0) 65%),\n        radial-gradient(120% 50% at 30% 45%, rgba(255, 200, 215, 0.50) 0%, rgba(255, 200, 215, 0) 70%),\n        linear-gradient(180deg, #FFEFE6 0%, #FFE0E8 35%, #FFE8EE 60%, #FFFFFF 100%);\n      overflow: hidden;\n      -webkit-tap-highlight-color: transparent;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .screen {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n      }\n    }\n    .topbar {\n      padding: 16px 20px 8px 20px;\n      display: flex; align-items: center;\n      flex-shrink: 0;\n      position: relative; z-index: 3;\n    }\n    .back-btn {\n      width: 40px; height: 40px;\n      display: flex; align-items: center; justify-content: center;\n      background: transparent; border: none; padding: 0; cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .content {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      align-items: center;\n      justify-content: flex-start;\n      padding: calc(15vh - 64px) 20px 24px 20px;\n      min-height: 0;\n      position: relative; z-index: 2;\n    }\n    .title {\n      margin: 0;\n      font-weight: 700;\n      font-size: 24px;\n      line-height: 1.33;\n      letter-spacing: -0.15px;\n      color: var(--text-dark);\n      text-align: center;\n      max-width: 320px;\n    }\n    .subtitle {\n      margin: 12px 0 0 0;\n      font-weight: 500;\n      font-size: 16px;\n      line-height: 1.5;\n      letter-spacing: -0.18px;\n      color: var(--text-body);\n      text-align: center;\n      max-width: 280px;\n    }\n    .hero {\n      flex: 0 0 auto;\n      width: 100%;\n      pointer-events: none;\n      z-index: 1;\n    }\n    .hero img {\n      display: block;\n      width: 100%;\n      height: auto;\n      transform: scaleX(-1);\n    }\n    .footer {\n      position: absolute;\n      left: 0; right: 0; bottom: 0;\n      z-index: 3;\n      padding: 16px 20px calc(20px + env(safe-area-inset-bottom)) 20px;\n      display: flex; justify-content: center;\n      background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 55%, #FFFFFF 100%);\n      backdrop-filter: blur(2.5px);\n      -webkit-backdrop-filter: blur(2.5px);\n    }\n    .cta {\n      width: 240px; height: 56px;\n      border: 1px solid var(--brand-primary);\n      border-radius: 100px;\n      background: var(--brand-primary);\n      color: #FFFFFF;\n      font-family: inherit; font-weight: 500; font-size: 16px;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      transition: opacity 120ms ease;\n    }\n    .cta:active { opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" data-testid=\"screen-root\">\n    <div class=\"topbar\">\n      <button class=\"back-btn\" id=\"back_button\" data-testid=\"back-button\" aria-label=\"Back\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M15 18l-6-6 6-6\" stroke=\"#1A1A1A\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n    </div>\n\n    <div class=\"content\">\n      <h1 class=\"title\" id=\"title_label\">Great, we’ve got a better understanding of your experience.</h1>\n      <p class=\"subtitle\" id=\"subtitle_label\">Now let’s learn about your wardrobe, shopping habits, and lifestyle.</p>\n    </div>\n\n    <div class=\"hero\" aria-hidden=\"true\">\n      <img id=\"hero_image\" src=\"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260618081617_wardrobe-rack/origin.png\" alt=\"\">\n    </div>\n\n    <div class=\"footer\">\n      <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\">\n        <span id=\"cta_label\">Next</span>\n      </button>\n    </div>\n  </div>\n\n  <script>\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n\n    function readMedia(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSection(label);\n        var img = s && s.mediaContent && s.mediaContent.content && s.mediaContent.content.image;\n        var url = img && (img.original || img.normal || img.medium || img.small);\n        return url || fallback;\n      } catch (e) { return fallback; }\n    }\n\n    function bindBack(sdk) {\n      document.getElementById('back_button').addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        try { sdk.navigateBack(); } catch (err) { console.error('navigateBack failed', err); }\n      });\n    }\n\n    function bindCta(sdk) {\n      var btn = document.getElementById('cta_button');\n      var advanced = false;\n      btn.addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        if (advanced) return;\n        advanced = true;\n        try { sdk.navigateNext(); } catch (err) {\n          advanced = false;\n          console.error('navigateNext failed', err);\n        }\n      });\n    }\n\n    function init(sdk) {\n      document.getElementById('title_label').textContent = readText(sdk, 'title', 'Great, we’ve got a better understanding of your experience.');\n      document.getElementById('subtitle_label').textContent = readText(sdk, 'subtitle', 'Now let’s learn about your wardrobe, shopping habits, and lifestyle.');\n      document.getElementById('cta_label').textContent = readText(sdk, 'cta_label', 'Next');\n      var hero = readMedia(sdk, 'hero_image', null);\n      if (hero) document.getElementById('hero_image').src = hero;\n      bindBack(sdk);\n      bindCta(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n    }\n  </script>\n</body>\n</html>\n","childSections":[{"label":"title","id":"title","kind":"Text","order":0,"textContent":{"title":{"translations":{"en-US":"Great, we’ve got a better understanding of your experience."},"kind":"static","appearance":{}}}},{"id":"subtitle","label":"subtitle","textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Now let’s learn about your wardrobe, shopping habits, and lifestyle."}}},"order":1,"kind":"Text"},{"kind":"Text","textContent":{"title":{"translations":{"en-US":"Next"},"appearance":{},"kind":"static"}},"order":2,"id":"cta_label","label":"cta_label"},{"kind":"Media","order":3,"mediaContent":{"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260618081617_wardrobe-rack/small.png","original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260618081617_wardrobe-rack/origin.png"}}}},"kind":"Image"},"label":"hero_image","id":"hero_image"}],"callback":{"action":{"kind":"advance","edges":[{"conditions":[],"transitionKind":"push","nextScreenId":"of-menopause-same-closet-intro"}]}}}},"createdAt":"2026-06-18T08:17:30.140Z","aiContent":{},"order":6,"updatedAt":"2026-06-18T08:27:49.986Z","id":"of-menopause-experience-recap","name":"of-menopause-experience-recap","position":{"x":352,"y":352},"tags":[],"entityId":"of-menopause-experience-recap","aiMeta":{"generationModel":"manual-cli","generationTimestamp":"2026-06-18T08:17:30.140Z","blockType":"WebEmbed","blockRole":"of-menopause-experience-recap","iterationCount":1,"source":"segmently-cli"},"screenType":"WebEmbed"},"of-menopause-feeling":{"tags":[],"aiMeta":{"generationModel":"manual-cli","generationTimestamp":"2026-06-15T12:26:52.097Z","source":"segmently-cli","blockType":"WebEmbed","iterationCount":1,"blockRole":"Walk-out feeling"},"screenType":"WebEmbed","content":{"canvas":{"background":{"kind":"solid","content":{"color":"#f8fbfb"}}},"animated":true,"offlineFirst":false,"embed":{"isIframe":true,"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 challenge</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=Google+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #241E32;\n      --text-body: #383751;\n      --text-muted: #6B7280;\n      --border-default: #E5E5EA;\n      --bg-card: #FFFFFF;\n      --bg-card-selected: #FFF6F9;\n      --progress-track: #FCE7EE;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #FFFFFF;\n    }\n    .screen {\n      position: relative;\n      width: 100%; height: 100%; min-height: 100vh;\n      display: flex; flex-direction: column;\n      background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 60%, #FFE4EE 100%);\n      overflow: hidden;\n      -webkit-tap-highlight-color: transparent;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .screen {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n      }\n    }\n    .topbar {\n      display: flex; align-items: center; gap: 12px;\n      padding: 16px 20px 8px 20px;\n      flex-shrink: 0;\n    }\n    .back-btn {\n      width: 24px; height: 24px;\n      display: flex; align-items: center; justify-content: center;\n      background: transparent; border: none; padding: 0; cursor: pointer;\n      flex-shrink: 0;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .progress {\n      flex: 1 1 auto;\n      height: 6px;\n      background: var(--progress-track);\n      border-radius: 999px;\n      overflow: hidden;\n    }\n    .progress-fill {\n      height: 100%;\n      width: 100%;\n      background: var(--brand-primary);\n      border-radius: 999px;\n      transition: width 200ms ease;\n    }\n    .step-counter {\n      flex-shrink: 0;\n      font-size: 14px;\n      color: var(--text-muted);\n      min-width: 24px;\n      text-align: right;\n    }\n\n    .content {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      padding: clamp(20px, 6vh, 80px) 20px 8px 20px;\n      min-height: 0;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      -webkit-overflow-scrolling: touch;\n    }\n    .eyebrow {\n      margin: 0 0 4px 0;\n      font-weight: 700;\n      font-size: 13px;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n      color: var(--brand-primary);\n    }\n    .title {\n      margin: 0 0 24px 0;\n      font-weight: 700;\n      font-size: 22px;\n      line-height: 1.2;\n      letter-spacing: -0.01em;\n      color: var(--text-dark);\n    }\n    .options { display: flex; flex-direction: column; gap: 12px; }\n    .option {\n      display: flex; align-items: center; gap: 14px;\n      min-height: 80px;\n      padding: 16px;\n      background: var(--bg-card);\n      border: 1px solid var(--border-default);\n      border-radius: 16px;\n      cursor: pointer;\n      transition: background-color 120ms ease, border-color 120ms ease;\n    }\n    .option .emoji {\n      flex-shrink: 0;\n      font-size: 20px;\n      line-height: 1;\n      width: 26px; text-align: center;\n    }\n    .option .text {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      gap: 4px;\n      min-width: 0;\n    }\n    .option .label {\n      font-size: 15px;\n      font-weight: 500;\n      line-height: 1.27;\n      color: var(--text-dark);\n    }\n    .option .sublabel {\n      font-size: 13px;\n      line-height: 1.4;\n      color: var(--text-muted);\n    }\n    .option .radio {\n      flex-shrink: 0;\n      width: 20px; height: 20px;\n      border-radius: 4px;\n      border: 1.5px solid #D1D1DB;\n      background: transparent;\n      display: flex; align-items: center; justify-content: center;\n    }\n    .option.selected {\n      background: var(--bg-card-selected);\n      border-color: var(--brand-primary);\n    }\n    .option.selected .radio {\n      border-color: var(--brand-primary);\n      background: var(--brand-primary);\n    }\n    .option.selected .radio::after {\n      content: \"\";\n      width: 10px; height: 6px;\n      border-left: 2px solid #fff;\n      border-bottom: 2px solid #fff;\n      transform: rotate(-45deg) translate(1px, -1px);\n    }\n\n    .footer {\n      padding: 16px 20px calc(20px + env(safe-area-inset-bottom)) 20px;\n      flex-shrink: 0;\n    }\n    .cta {\n      width: 100%; height: 56px;\n      border: none; border-radius: 100px;\n      background: var(--brand-primary);\n      color: #FFFFFF;\n      font-family: inherit; font-weight: 500; font-size: 16px;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .cta:disabled { opacity: 0.4; cursor: not-allowed; }\n    .cta:not(:disabled):active { opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" data-testid=\"screen-root\">\n    <div class=\"topbar\">\n      <button class=\"back-btn\" id=\"back_button\" data-testid=\"back-button\" aria-label=\"Back\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M19 12H5M5 12l7-7M5 12l7 7\" stroke=\"#241E32\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"progress\" aria-label=\"Step 8 of 8\">\n        <div class=\"progress-fill\" id=\"progress_fill\"></div>\n      </div>\n      <div class=\"step-counter\" id=\"step_counter\">8/8</div>\n    </div>\n\n    <div class=\"content\">\n      <div class=\"eyebrow\" id=\"eyebrow_label\">YOUR ROUTINE</div>\n      <h1 class=\"title\" id=\"title_label\">When you walk out the door, how do you want to feel?</h1>\n      <div class=\"options\" id=\"options_list\" data-testid=\"options-list\"></div>\n    </div>\n\n    <div class=\"footer\">\n      <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\" disabled>\n        <span id=\"cta_label\">Continue</span>\n      </button>\n    </div>\n  </div>\n\n  <script>\n    var VARIABLE_ID = 'walk_out_feeling';\n    var SECTION_LABEL = 'walk_out_options';\n\n    var FALLBACK_ITEMS = [\n      { id: 'confident',    emoji: '💪', title: 'Confident',    subtitle: 'Like I have my life together' },\n      { id: 'calm',         emoji: '🧘', title: 'Calm',         subtitle: \"Like getting dressed wasn’t a thing\" },\n      { id: 'put_together', emoji: '✨', title: 'Put-together', subtitle: 'Polished without trying hard' },\n      { id: 'like_myself',  emoji: '🪞', title: 'Like myself',   subtitle: \"Dressed for my life, not someone else’s\" }\n    ];\n    var META_BY_ID = FALLBACK_ITEMS.reduce(function (acc, it) { acc[it.id] = it; return acc; }, {});\n\n    var state = { items: FALLBACK_ITEMS.slice(), selectedId: null, sdk: null };\n\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n\n    function readItems(sdk) {\n      try {\n        var section = sdk.getChildSection(SECTION_LABEL);\n        var items = section && Array.isArray(section.items) ? section.items : null;\n        if (!items || !items.length) return null;\n        return items.map(function (it) {\n          var id = it.variableValue || it.id;\n          var meta = META_BY_ID[id] || {};\n          return {\n            id: id,\n            emoji: it.icon || meta.emoji || '•',\n            title: (it.title && (it.title.title || it.title)) || it.label || meta.title || '',\n            subtitle: (it.subtitle && (it.subtitle.title || it.subtitle)) || meta.subtitle || ''\n          };\n        });\n      } catch (e) { return null; }\n    }\n\n    function renderOptions() {\n      var list = document.getElementById('options_list');\n      list.innerHTML = '';\n      state.items.forEach(function (item) {\n        var isSelected = state.selectedId === item.id;\n        var row = document.createElement('div');\n        row.className = 'option' + (isSelected ? ' selected' : '');\n        row.setAttribute('data-id', item.id);\n        row.setAttribute('data-testid', 'option-' + item.id);\n        row.setAttribute('role', 'radio');\n        row.setAttribute('aria-checked', isSelected ? 'true' : 'false');\n        row.innerHTML =\n          '<div class=\"emoji\" aria-hidden=\"true\"></div>' +\n          '<div class=\"text\"><div class=\"label\"></div><div class=\"sublabel\"></div></div>' +\n          '<div class=\"radio\" aria-hidden=\"true\"></div>';\n        row.querySelector('.emoji').textContent = item.emoji;\n        row.querySelector('.label').textContent = item.title;\n        row.querySelector('.sublabel').textContent = item.subtitle;\n        row.addEventListener('click', function () { selectOption(item.id); });\n        list.appendChild(row);\n      });\n      document.getElementById('cta_button').disabled = !state.selectedId;\n    }\n\n    function selectOption(id) {\n      state.selectedId = id;\n      renderOptions();\n    }\n\n    function bindBack(sdk) {\n      document.getElementById('back_button').addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        try { sdk.navigateBack(); } catch (err) { console.error('navigateBack failed', err); }\n      });\n    }\n\n    function bindCta(sdk) {\n      var btn = document.getElementById('cta_button');\n      var advanced = false;\n      btn.addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        if (advanced || !state.selectedId) return;\n        advanced = true;\n        try { sdk.setVariable(VARIABLE_ID, state.selectedId); } catch (err) { console.error('setVariable failed', err); }\n        try { sdk.navigateNext(); } catch (err) {\n          advanced = false;\n          console.error('navigateNext failed', err);\n        }\n      });\n    }\n\n    function init(sdk) {\n      state.sdk = sdk;\n\n      document.getElementById('eyebrow_label').textContent = readText(sdk, 'eyebrow_label', 'YOUR ROUTINE');\n      document.getElementById('title_label').textContent = readText(sdk, 'title', 'When you walk out the door, how do you want to feel?');\n      document.getElementById('cta_label').textContent = readText(sdk, 'cta_label', 'Continue');\n\n      var items = readItems(sdk);\n      if (items && items.length) state.items = items;\n\n      try {\n        var current = sdk.getVariable(VARIABLE_ID);\n        if (current && state.items.some(function (i) { return i.id === current; })) {\n          state.selectedId = current;\n        }\n      } catch (e) { /* noop */ }\n\n      renderOptions();\n      bindBack(sdk);\n      bindCta(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n      renderOptions();\n    }\n  </script>\n</body>\n</html>\n","callback":{"action":{"kind":"advance","edges":[{"conditions":[],"nextScreenId":"of-menopause-timeline-branch","transitionKind":"push"},{"transitionKind":"push","nextScreenId":"of-menopause-timeline","conditions":[{"key":"journey_stage","operator":"in","value":"body_changing,hormonal_midlife,rediscovering"}]}]}},"childSections":[{"label":"eyebrow_label","id":"eyebrow_label","order":0,"textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"YOUR ROUTINE"}}},"kind":"Text"},{"textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"When you walk out the door, how do you want to feel?"}}},"order":1,"kind":"Text","label":"title","id":"title"},{"kind":"Text","textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Continue"}}},"order":2,"id":"cta_label","label":"cta_label"},{"optionsListContent":{"items":[{"subtitle":{"kind":"static","appearance":{},"translations":{"en-US":"Like I have my life together"}},"variableValue":"confident","title":{"translations":{"en-US":"Confident"},"appearance":{},"kind":"static"},"id":"confident"},{"id":"calm","title":{"translations":{"en-US":"Calm"},"appearance":{},"kind":"static"},"variableValue":"calm","subtitle":{"translations":{"en-US":"Like getting dressed wasn’t a thing"},"appearance":{},"kind":"static"}},{"title":{"translations":{"en-US":"Put-together"},"appearance":{},"kind":"static"},"id":"put_together","subtitle":{"translations":{"en-US":"Polished without trying hard"},"kind":"static","appearance":{}},"variableValue":"put_together"},{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Like myself"}},"id":"like_myself","subtitle":{"kind":"static","appearance":{},"translations":{"en-US":"Dressed for my life, not someone else’s"}},"variableValue":"like_myself"}]},"label":"walk_out_options","id":"walk_out_options","kind":"SingleSelectionList","order":3}]}},"order":6,"aiContent":{},"createdAt":"2026-06-15T12:26:52.097Z","name":"Walk-out feeling","position":{"x":6720,"y":0},"id":"of-menopause-feeling","updatedAt":"2026-06-16T13:03:56.196Z"},"of-menopause-founder-note":{"screenType":"WebEmbed","tags":[],"aiMeta":{"generationTimestamp":"2026-06-15T11:40:57.357Z","generationModel":"manual-cli","source":"segmently-cli","blockRole":"Founder note","blockType":"WebEmbed","iterationCount":1},"name":"Founder note","id":"of-menopause-founder-note","position":{"y":0,"x":2880},"updatedAt":"2026-06-18T15:55:06.073Z","content":{"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}},"animated":true,"offlineFirst":false,"embed":{"isIframe":true,"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>A note from Alison</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=Google+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #241E32;\n      --text-body: #383751;\n      --text-muted: #6B7280;\n      --progress-track: #FCE7EE;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #FFFFFF;\n    }\n    .screen {\n      position: relative;\n      width: 100%;\n      height: 100vh;\n      height: 100dvh;\n      max-height: 100vh;\n      max-height: 100dvh;\n      display: flex; flex-direction: column;\n      background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 50%, #FFE4EE 100%);\n      overflow: hidden;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .screen {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n      }\n    }\n\n    .topbar {\n      display: flex; align-items: center; gap: 12px;\n      padding: 16px 20px 8px 20px;\n      flex-shrink: 0;\n    }\n    .back-btn {\n      width: 24px; height: 24px;\n      display: flex; align-items: center; justify-content: center;\n      background: transparent; border: none; padding: 0; cursor: pointer;\n      flex-shrink: 0;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .progress {\n      flex: 1 1 auto;\n      height: 6px;\n      background: var(--progress-track);\n      border-radius: 999px;\n      overflow: hidden;\n    }\n    .progress-fill {\n      height: 100%;\n      width: 14.3%;\n      background: var(--brand-primary);\n      border-radius: 999px;\n      transition: width 200ms ease;\n    }\n    .step-counter {\n      flex-shrink: 0;\n      font-size: 14px;\n      color: var(--text-muted);\n      min-width: 32px;\n      text-align: right;\n    }\n\n    .content {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      align-items: center;\n      padding: clamp(32px, 6vh, 80px) 32px 0 32px;\n      min-height: 0;\n      text-align: center;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      -webkit-overflow-scrolling: touch;\n    }\n    /* Browsers (Chrome/Safari) ignore padding-bottom in scroll containers.\n       A flex-child spacer reliably extends the scrollable area so the last\n       content (Alison's signature) clears the bottom drawer. */\n    .content::after {\n      content: \"\";\n      display: block;\n      flex-shrink: 0;\n      width: 100%;\n      height: 180px;\n    }\n    .flower {\n      width: 72px; height: 72px;\n      object-fit: contain;\n      flex-shrink: 0;\n    }\n    .greeting {\n      margin: 16px 0 16px 0;\n      font-weight: 700;\n      font-size: 20px;\n      color: var(--text-dark);\n    }\n    .note p {\n      margin: 0 0 18px 0;\n      font-size: 17px;\n      line-height: 1.55;\n      color: var(--text-body);\n    }\n    .note p:last-child { margin-bottom: 0; }\n\n    .signoff {\n      display: flex; flex-direction: column; align-items: center; gap: 4px;\n      padding: 24px 0 16px 0;\n      flex-shrink: 0;\n    }\n    .avatar {\n      width: 55px; height: 55px;\n      border-radius: 50%;\n      overflow: hidden;\n      background: #fff;\n      flex-shrink: 0;\n    }\n    .avatar img {\n      width: 100%; height: 100%;\n      object-fit: cover;\n    }\n    .signature {\n      width: 125px; height: 47px;\n      object-fit: contain;\n      display: block;\n    }\n\n    .footer {\n      padding: 16px 20px calc(20px + env(safe-area-inset-bottom)) 20px;\n      flex-shrink: 0;\n      position: absolute;\n      left: 0; right: 0; bottom: 0;\n      z-index: 3;\n      background: linear-gradient(180deg, rgba(255, 228, 238, 0) 0%, rgba(255, 228, 238, 0.85) 35%, rgba(255, 228, 238, 0.98) 100%);\n      backdrop-filter: blur(8px);\n      -webkit-backdrop-filter: blur(8px);\n    }\n    .cta {\n      width: 100%; height: 56px;\n      border: none; border-radius: 100px;\n      background: var(--brand-primary);\n      color: #FFFFFF;\n      font-family: inherit; font-weight: 500; font-size: 16px;\n      pointer-events: none;\n      -webkit-tap-highlight-color: transparent;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" id=\"screen\" data-testid=\"screen-root\">\n    <div class=\"content\">\n      <img class=\"flower\" id=\"flower_img\" alt=\"\" aria-hidden=\"true\">\n      <div class=\"greeting\" id=\"greeting_label\">Hey there!</div>\n      <div class=\"note\" id=\"note_body\">\n        <p id=\"note_p1\">You’re not imagining it. Standing in front of a full closet and having nothing work isn’t about bad taste or not having enough clothes.</p>\n        <p id=\"note_p2\">It’s about having a body that’s changing, sometimes hour by hour, and a wardrobe that was built for a body you used to have.</p>\n        <p id=\"note_p3\">Your body reorganized itself. Of course the old rules don’t work anymore. And it’s exactly what we’re here to help with. One small step at a time. ✨</p>\n      </div>\n      <div class=\"signoff\">\n        <div class=\"avatar\"><img id=\"avatar_img\" alt=\"Alison\"></div>\n        <img class=\"signature\" id=\"signature_img\" alt=\"xoxo Alison\">\n      </div>\n    </div>\n\n    <div class=\"footer\">\n      <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\" tabindex=\"-1\" aria-hidden=\"true\">\n        <span id=\"cta_label\">Let’s start</span>\n      </button>\n    </div>\n  </div>\n\n  <script>\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n    function readMediaUrl(sdk, label) {\n      try {\n        var m = sdk.getChildSectionMedia(label);\n        return (m && m.url) ? m.url : null;\n      } catch (e) { return null; }\n    }\n\n    function applyContent(sdk) {\n      document.getElementById('greeting_label').textContent = readText(sdk, 'greeting_label', 'Hey there!');\n      document.getElementById('note_p1').textContent = readText(sdk, 'note_p1', document.getElementById('note_p1').textContent);\n      document.getElementById('note_p2').textContent = readText(sdk, 'note_p2', document.getElementById('note_p2').textContent);\n      document.getElementById('note_p3').textContent = readText(sdk, 'note_p3', document.getElementById('note_p3').textContent);\n      document.getElementById('cta_label').textContent = readText(sdk, 'cta_label', \"Let’s start\");\n\n      var flowerUrl = readMediaUrl(sdk, 'flower_media');\n      if (flowerUrl) document.getElementById('flower_img').src = flowerUrl;\n      var avatarUrl = readMediaUrl(sdk, 'avatar_media');\n      if (avatarUrl) document.getElementById('avatar_img').src = avatarUrl;\n      var signatureUrl = readMediaUrl(sdk, 'signature_media');\n      if (signatureUrl) document.getElementById('signature_img').src = signatureUrl;\n    }\n\n    function bindTap(sdk) {\n      var advanced = false;\n      document.getElementById('screen').addEventListener('click', function (e) {\n        if (advanced) return;\n        advanced = true;\n        e.preventDefault(); e.stopPropagation();\n        try { sdk.navigateNext(); } catch (err) {\n          advanced = false;\n          console.error('navigateNext failed', err);\n        }\n      });\n    }\n\n    function init(sdk) {\n      applyContent(sdk);\n      bindTap(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n    }\n  </script>\n</body>\n</html>\n","childSections":[{"kind":"Text","textContent":{"title":{"translations":{"en-US":"Hey there!"},"kind":"static","appearance":{}}},"order":0,"id":"greeting_label","label":"greeting_label"},{"kind":"Text","textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"You’re not imagining it. Standing in front of a full closet and having nothing work isn’t about bad taste or not having enough clothes."}}},"order":1,"id":"note_p1","label":"note_p1"},{"kind":"Text","order":2,"textContent":{"title":{"translations":{"en-US":"It’s about having a body that’s changing, sometimes hour by hour, and a wardrobe that was built for a body you used to have."},"kind":"static","appearance":{}}},"label":"note_p2","id":"note_p2"},{"kind":"Text","textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Your body reorganized itself. Of course the old rules don’t work anymore. And it’s exactly what we’re here to help with. One small step at a time. ✨"}}},"order":3,"label":"note_p3","id":"note_p3"},{"order":4,"textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"Let’s start"}}},"kind":"Text","id":"cta_label","label":"cta_label"},{"mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615114050_of-menopause-founder-note-flower-media/origin.png","small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615114050_of-menopause-founder-note-flower-media/small.png"}}}},"kind":"Image"},"id":"flower_media","label":"flower_media","kind":"Media","order":5},{"mediaContent":{"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615114052_of-menopause-founder-note-avatar-media/small.webp","original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615114052_of-menopause-founder-note-avatar-media/origin.webp"}}}},"kind":"Image"},"id":"avatar_media","label":"avatar_media","kind":"Media","order":6},{"mediaContent":{"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615114046_of-menopause-founder-note-signature-media/small.svg","original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615114046_of-menopause-founder-note-signature-media/origin.svg"}}}},"kind":"Image"},"id":"signature_media","label":"signature_media","kind":"Media","order":7}],"callback":{"action":{"edges":[{"conditions":[],"transitionKind":"push","nextScreenId":"of-menopause-closet-size"}],"kind":"advance"}}}},"order":6,"aiContent":{},"createdAt":"2026-06-15T11:40:57.357Z"},"of-menopause-founder-note-branch":{"screenType":"WebEmbed","tags":[],"aiMeta":{"iterationCount":1,"blockType":"WebEmbed","blockRole":"Founder note (branch)","source":"segmently-cli","generationModel":"manual-cli","generationTimestamp":"2026-06-15T18:26:54.738Z"},"updatedAt":"2026-06-18T15:55:07.968Z","id":"of-menopause-founder-note-branch","position":{"x":2880,"y":-1072},"name":"Founder note (branch)","content":{"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}},"animated":true,"embed":{"isIframe":true,"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>A note from Alison</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=Google+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #241E32;\n      --text-body: #383751;\n      --text-muted: #6B7280;\n      --progress-track: #FCE7EE;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #FFFFFF;\n    }\n    .screen {\n      position: relative;\n      width: 100%;\n      height: 100vh;\n      height: 100dvh;\n      max-height: 100vh;\n      max-height: 100dvh;\n      display: flex; flex-direction: column;\n      background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 50%, #FFE4EE 100%);\n      overflow: hidden;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .screen {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n      }\n    }\n\n    .topbar {\n      display: flex; align-items: center; gap: 12px;\n      padding: 16px 20px 8px 20px;\n      flex-shrink: 0;\n    }\n    .back-btn {\n      width: 24px; height: 24px;\n      display: flex; align-items: center; justify-content: center;\n      background: transparent; border: none; padding: 0; cursor: pointer;\n      flex-shrink: 0;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .progress {\n      flex: 1 1 auto;\n      height: 6px;\n      background: var(--progress-track);\n      border-radius: 999px;\n      overflow: hidden;\n    }\n    .progress-fill {\n      height: 100%;\n      width: 14.3%;\n      background: var(--brand-primary);\n      border-radius: 999px;\n      transition: width 200ms ease;\n    }\n    .step-counter {\n      flex-shrink: 0;\n      font-size: 14px;\n      color: var(--text-muted);\n      min-width: 32px;\n      text-align: right;\n    }\n\n    .content {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      align-items: center;\n      padding: clamp(32px, 6vh, 80px) 32px 0 32px;\n      min-height: 0;\n      text-align: center;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      -webkit-overflow-scrolling: touch;\n    }\n    .content::after {\n      content: \"\";\n      display: block;\n      flex-shrink: 0;\n      width: 100%;\n      height: 180px;\n    }\n    .flower {\n      width: 72px; height: 72px;\n      object-fit: contain;\n      flex-shrink: 0;\n    }\n    .greeting {\n      margin: 16px 0 16px 0;\n      font-weight: 700;\n      font-size: 20px;\n      color: var(--text-dark);\n    }\n    .note p {\n      margin: 0 0 18px 0;\n      font-size: 17px;\n      line-height: 1.55;\n      color: var(--text-body);\n    }\n    .note p:last-child { margin-bottom: 0; }\n\n    .signoff {\n      display: flex; flex-direction: column; align-items: center; gap: 4px;\n      padding: 24px 0 16px 0;\n      flex-shrink: 0;\n    }\n    .avatar {\n      width: 55px; height: 55px;\n      border-radius: 50%;\n      overflow: hidden;\n      background: #fff;\n      flex-shrink: 0;\n    }\n    .avatar img {\n      width: 100%; height: 100%;\n      object-fit: cover;\n    }\n    .signature {\n      width: 125px; height: 47px;\n      object-fit: contain;\n      display: block;\n    }\n\n    .footer {\n      padding: 16px 20px calc(20px + env(safe-area-inset-bottom)) 20px;\n      flex-shrink: 0;\n      position: absolute;\n      left: 0; right: 0; bottom: 0;\n      z-index: 3;\n      background: linear-gradient(180deg, rgba(255, 228, 238, 0) 0%, rgba(255, 228, 238, 0.85) 35%, rgba(255, 228, 238, 0.98) 100%);\n      backdrop-filter: blur(8px);\n      -webkit-backdrop-filter: blur(8px);\n    }\n    .cta {\n      width: 100%; height: 56px;\n      border: none; border-radius: 100px;\n      background: var(--brand-primary);\n      color: #FFFFFF;\n      font-family: inherit; font-weight: 500; font-size: 16px;\n      pointer-events: none;\n      -webkit-tap-highlight-color: transparent;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" id=\"screen\" data-testid=\"screen-root\">\n    <div class=\"content\">\n      <img class=\"flower\" id=\"flower_img\" alt=\"\" aria-hidden=\"true\">\n      <div class=\"greeting\" id=\"greeting_label\">Hey there!</div>\n      <div class=\"note\" id=\"note_body\">\n        <p id=\"note_p1\">You’re not alone in this — a lot of women feel the same way standing in front of a full closet and still not knowing what works.</p>\n        <p id=\"note_p2\">It’s not about bad taste or not having enough clothes — most of us were taught how to shop but never how to actually build outfits.</p>\n        <p id=\"note_p3\">That’s what we’re here to change. One small step at a time. ✨</p>\n      </div>\n      <div class=\"signoff\">\n        <div class=\"avatar\"><img id=\"avatar_img\" alt=\"Alison\"></div>\n        <img class=\"signature\" id=\"signature_img\" alt=\"xoxo Alison\">\n      </div>\n    </div>\n\n    <div class=\"footer\">\n      <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\" tabindex=\"-1\" aria-hidden=\"true\">\n        <span id=\"cta_label\">Let’s start</span>\n      </button>\n    </div>\n  </div>\n\n  <script>\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n    function readMediaUrl(sdk, label) {\n      try {\n        var m = sdk.getChildSectionMedia(label);\n        return (m && m.url) ? m.url : null;\n      } catch (e) { return null; }\n    }\n\n    function applyContent(sdk) {\n      document.getElementById('greeting_label').textContent = readText(sdk, 'greeting_label', 'Hey there!');\n      document.getElementById('note_p1').textContent = readText(sdk, 'note_p1', document.getElementById('note_p1').textContent);\n      document.getElementById('note_p2').textContent = readText(sdk, 'note_p2', document.getElementById('note_p2').textContent);\n      document.getElementById('note_p3').textContent = readText(sdk, 'note_p3', document.getElementById('note_p3').textContent);\n      document.getElementById('cta_label').textContent = readText(sdk, 'cta_label', \"Let’s start\");\n\n      var flowerUrl = readMediaUrl(sdk, 'flower_media');\n      if (flowerUrl) document.getElementById('flower_img').src = flowerUrl;\n      var avatarUrl = readMediaUrl(sdk, 'avatar_media');\n      if (avatarUrl) document.getElementById('avatar_img').src = avatarUrl;\n      var signatureUrl = readMediaUrl(sdk, 'signature_media');\n      if (signatureUrl) document.getElementById('signature_img').src = signatureUrl;\n    }\n\n    function bindTap(sdk) {\n      var advanced = false;\n      document.getElementById('screen').addEventListener('click', function (e) {\n        if (advanced) return;\n        advanced = true;\n        e.preventDefault(); e.stopPropagation();\n        try { sdk.navigateNext(); } catch (err) {\n          advanced = false;\n          console.error('navigateNext failed', err);\n        }\n      });\n    }\n\n    function init(sdk) {\n      applyContent(sdk);\n      bindTap(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n    }\n  </script>\n</body>\n</html>\n","childSections":[{"label":"greeting_label","id":"greeting_label","kind":"Text","order":0,"textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Hey there!"}}}},{"kind":"Text","textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"You’re not alone in this — a lot of women feel the same way standing in front of a full closet and still not knowing what works."}}},"order":1,"label":"note_p1","id":"note_p1"},{"label":"note_p2","id":"note_p2","order":2,"textContent":{"title":{"translations":{"en-US":"It’s not about bad taste or not having enough clothes — most of us were taught how to shop but never how to actually build outfits."},"appearance":{},"kind":"static"}},"kind":"Text"},{"kind":"Text","textContent":{"title":{"translations":{"en-US":"That’s what we’re here to change. One small step at a time. ✨"},"appearance":{},"kind":"static"}},"order":3,"id":"note_p3","label":"note_p3"},{"textContent":{"title":{"translations":{"en-US":"Let’s start"},"kind":"static","appearance":{}}},"order":4,"kind":"Text","label":"cta_label","id":"cta_label"},{"label":"flower_media","id":"flower_media","mediaContent":{"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615114050_of-menopause-founder-note-flower-media/small.png","original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615114050_of-menopause-founder-note-flower-media/origin.png"}}}},"kind":"Image"},"order":5,"kind":"Media"},{"kind":"Media","order":6,"mediaContent":{"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615114052_of-menopause-founder-note-avatar-media/small.webp","original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615114052_of-menopause-founder-note-avatar-media/origin.webp"}}}},"kind":"Image"},"id":"avatar_media","label":"avatar_media"},{"mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615114046_of-menopause-founder-note-signature-media/origin.svg","small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615114046_of-menopause-founder-note-signature-media/small.svg"}}}},"kind":"Image"},"id":"signature_media","label":"signature_media","kind":"Media","order":7}],"callback":{"action":{"edges":[{"conditions":[],"transitionKind":"push","nextScreenId":"of-menopause-closet-size"}],"kind":"advance"}}},"offlineFirst":false},"createdAt":"2026-06-15T18:26:54.738Z","aiContent":{},"order":6},"of-menopause-get-to-know":{"aiMeta":{"source":"segmently-cli","blockType":"WebEmbed","iterationCount":1,"blockRole":"of-menopause-get-to-know","generationModel":"manual-cli","generationTimestamp":"2026-06-18T07:41:52.504Z"},"entityId":"of-menopause-get-to-know","tags":[],"screenType":"WebEmbed","aiContent":{},"order":6,"createdAt":"2026-06-18T07:41:52.504Z","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>Let's get to know you</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=Google+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #000000;\n      --text-body: rgba(0, 0, 0, 0.7);\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #FFFCFD;\n    }\n    .screen {\n      position: relative;\n      width: 100%; height: 100vh; height: 100dvh;\n      display: flex; flex-direction: column;\n      background: linear-gradient(180deg, #FFF7F0 0%, #FFE4E6 45%, #FFD9E4 55%, #FFF1F2 75%, #FFFFFF 100%);\n      overflow: hidden;\n      -webkit-tap-highlight-color: transparent;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .screen {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n      }\n    }\n    .topbar {\n      padding: 16px 20px 8px 20px;\n      display: flex; align-items: center;\n      flex-shrink: 0;\n    }\n    .back-btn {\n      width: 40px; height: 40px;\n      display: flex; align-items: center; justify-content: center;\n      background: transparent; border: none; padding: 0; cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .back-btn svg { display: block; }\n    .content {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      padding: 24px 20px;\n      text-align: center;\n      min-height: 0;\n    }\n    .headline {\n      margin: 0;\n      font-weight: 700;\n      font-size: 32px;\n      line-height: 1.31;\n      letter-spacing: -0.2px;\n      color: var(--text-dark);\n      max-width: 340px;\n    }\n    .headline .accent {\n      color: var(--brand-primary);\n    }\n    .subtext {\n      margin: 8px 0 0 0;\n      font-weight: 500;\n      font-size: 16px;\n      line-height: 1.5;\n      letter-spacing: -0.18px;\n      color: var(--text-body);\n      max-width: 340px;\n    }\n    .footer {\n      padding: 16px 20px calc(20px + env(safe-area-inset-bottom)) 20px;\n      flex-shrink: 0;\n    }\n    .cta {\n      width: 100%; height: 56px;\n      border: 1px solid var(--brand-primary);\n      border-radius: 100px;\n      background: var(--brand-primary);\n      color: #FFFFFF;\n      font-family: inherit; font-weight: 500; font-size: 16px;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      transition: opacity 120ms ease;\n    }\n    .cta:active { opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" data-testid=\"screen-root\">\n    <div class=\"topbar\">\n      <button class=\"back-btn\" id=\"back_button\" data-testid=\"back-button\" aria-label=\"Back\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M15 18l-6-6 6-6\" stroke=\"#1A1A1A\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n    </div>\n\n    <div class=\"content\">\n      <h1 class=\"headline\" id=\"headline_label\">\n        <span id=\"headline_line1\">Let’s get to know</span><br>\n        <span class=\"accent\" id=\"headline_line2\">you first!</span>\n      </h1>\n      <p class=\"subtext\" id=\"subtext_label\">Help us get you know you first by telling us a little about yourself</p>\n    </div>\n\n    <div class=\"footer\">\n      <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\">\n        <span id=\"cta_label\">Get started</span>\n      </button>\n    </div>\n  </div>\n\n  <script>\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n\n    function bindBack(sdk) {\n      document.getElementById('back_button').addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        try { sdk.navigateBack(); } catch (err) { console.error('navigateBack failed', err); }\n      });\n    }\n\n    function bindCta(sdk) {\n      var btn = document.getElementById('cta_button');\n      var advanced = false;\n      btn.addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        if (advanced) return;\n        advanced = true;\n        try { sdk.navigateNext(); } catch (err) {\n          advanced = false;\n          console.error('navigateNext failed', err);\n        }\n      });\n    }\n\n    function init(sdk) {\n      document.getElementById('headline_line1').textContent = readText(sdk, 'headline_line1', 'Let’s get to know');\n      document.getElementById('headline_line2').textContent = readText(sdk, 'headline_line2', 'you first!');\n      document.getElementById('subtext_label').textContent = readText(sdk, 'subtext', 'Help us get you know you first by telling us a little about yourself');\n      document.getElementById('cta_label').textContent = readText(sdk, 'cta_label', 'Get started');\n      bindBack(sdk);\n      bindCta(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n    }\n  </script>\n</body>\n</html>\n","callback":{"action":{"kind":"advance","edges":[{"conditions":[],"transitionKind":"push","nextScreenId":"of-menopause-body-changing-statement"}]}},"childSections":[{"label":"headline_line1","id":"headline_line1","textContent":{"title":{"translations":{"en-US":"Let’s get to know"},"appearance":{},"kind":"static"}},"order":0,"kind":"Text"},{"id":"headline_line2","label":"headline_line2","kind":"Text","textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"you first!"}}},"order":1},{"id":"subtext","label":"subtext","kind":"Text","order":2,"textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Help us get you know you first by telling us a little about yourself"}}}},{"label":"cta_label","id":"cta_label","order":3,"textContent":{"title":{"translations":{"en-US":"Get started"},"kind":"static","appearance":{}}},"kind":"Text"}]},"offlineFirst":false,"canvas":{"background":{"content":{"color":"#1a1a1a"},"kind":"solid"}},"animated":true},"id":"of-menopause-get-to-know","position":{"x":-2528,"y":368},"name":"of-menopause-get-to-know","updatedAt":"2026-06-18T07:49:22.873Z"},"of-menopause-goals":{"updatedAt":"2026-06-18T15:49:46.972Z","id":"of-menopause-goals","name":"Primary goals","position":{"x":1456,"y":0},"createdAt":"2026-06-15T10:36:55.978Z","aiContent":{},"order":6,"content":{"offlineFirst":false,"embed":{"isIframe":true,"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 goals</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #241E32;\n      --text-body: #383751;\n      --text-muted: #6B7280;\n      --border-default: #E5E5EA;\n      --bg-card: #FFFFFF;\n      --bg-card-selected: #FFF6F9;\n      --progress-track: #FCE7EE;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #FFFFFF;\n    }\n    .screen {\n      position: relative;\n      width: 100%; height: 100%; min-height: 100vh;\n      display: flex; flex-direction: column;\n      background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 60%, #FFE4EE 100%);\n      overflow: hidden;\n      -webkit-tap-highlight-color: transparent;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .screen {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n      }\n    }\n    .topbar {\n      display: flex; align-items: center; gap: 12px;\n      padding: 16px 20px 8px 20px;\n      flex-shrink: 0;\n    }\n    .back-btn {\n      width: 24px; height: 24px;\n      display: flex; align-items: center; justify-content: center;\n      background: transparent; border: none; padding: 0; cursor: pointer;\n      flex-shrink: 0;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .progress {\n      flex: 1 1 auto;\n      height: 6px;\n      background: var(--progress-track);\n      border-radius: 999px;\n      overflow: hidden;\n    }\n    .progress-fill {\n      height: 100%;\n      width: 12.5%;\n      background: var(--brand-primary);\n      border-radius: 999px;\n      transition: width 200ms ease;\n    }\n    .step-counter {\n      flex-shrink: 0;\n      font-size: 14px;\n      color: var(--text-muted);\n      min-width: 24px;\n      text-align: right;\n    }\n\n    .content {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      padding: clamp(20px, 6vh, 80px) 20px 8px 20px;\n      min-height: 0;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      -webkit-overflow-scrolling: touch;\n    }\n    .eyebrow {\n      margin: 0 0 4px 0;\n      font-weight: 700;\n      font-size: 13px;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n      color: var(--brand-primary);\n    }\n    .title {\n      margin: 0 0 6px 0;\n      font-weight: 700;\n      font-size: 22px;\n      line-height: 1.2;\n      letter-spacing: -0.01em;\n      color: var(--text-dark);\n    }\n    .subtitle {\n      margin: 0 0 20px 0;\n      font-size: 14px;\n      line-height: 1.4;\n      color: var(--text-muted);\n    }\n    .options { display: flex; flex-direction: column; gap: 12px; }\n    .option {\n      display: flex; align-items: center; gap: 12px;\n      min-height: 60px;\n      padding: 14px 16px;\n      background: var(--bg-card);\n      border: 1px solid var(--border-default);\n      border-radius: 16px;\n      cursor: pointer;\n      transition: background-color 120ms ease, border-color 120ms ease;\n    }\n    .option .emoji {\n      flex-shrink: 0;\n      font-size: 20px;\n      line-height: 1;\n      width: 26px; text-align: center;\n    }\n    .option .label {\n      flex: 1 1 auto;\n      font-size: 15px;\n      line-height: 1.27;\n      color: var(--text-body);\n    }\n    .option .check {\n      flex-shrink: 0;\n      width: 20px; height: 20px;\n      border-radius: 4px;\n      border: 1.5px solid #D1D1DB;\n      background: transparent;\n      display: flex; align-items: center; justify-content: center;\n    }\n    .option.selected {\n      background: var(--bg-card-selected);\n      border-color: var(--brand-primary);\n    }\n    .option.selected .check {\n      border-color: var(--brand-primary);\n      background: var(--brand-primary);\n    }\n    .option.selected .check::after {\n      content: \"\";\n      width: 10px; height: 6px;\n      border-left: 2px solid #fff;\n      border-bottom: 2px solid #fff;\n      transform: rotate(-45deg) translate(1px, -1px);\n    }\n\n    .footer {\n      padding: 16px 20px calc(20px + env(safe-area-inset-bottom)) 20px;\n      flex-shrink: 0;\n    }\n    .cta {\n      width: 100%; height: 56px;\n      border: none; border-radius: 100px;\n      background: var(--brand-primary);\n      color: #FFFFFF;\n      font-family: inherit; font-weight: 500; font-size: 16px;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .cta:disabled { opacity: 0.4; cursor: not-allowed; }\n    .cta:not(:disabled):active { opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" data-testid=\"screen-root\">\n    <div class=\"topbar\">\n      <button class=\"back-btn\" id=\"back_button\" data-testid=\"back-button\" aria-label=\"Back\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M19 12H5M5 12l7-7M5 12l7 7\" stroke=\"#241E32\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"progress\" aria-label=\"Step 1 of 8\">\n        <div class=\"progress-fill\" id=\"progress_fill\"></div>\n      </div>\n      <div class=\"step-counter\" id=\"step_counter\">1/8</div>\n    </div>\n\n    <div class=\"content\">\n      <div class=\"eyebrow\" id=\"eyebrow_label\">YOUR GOALS</div>\n      <h1 class=\"title\" id=\"title_label\">What is your current primary goal?</h1>\n      <p class=\"subtitle\" id=\"subtitle_label\">Choose all that apply</p>\n      <div class=\"options\" id=\"options_list\" data-testid=\"options-list\"></div>\n    </div>\n\n    <div class=\"footer\">\n      <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\" disabled>\n        <span id=\"cta_label\">Continue</span>\n      </button>\n    </div>\n  </div>\n\n  <script>\n    var VARIABLE_ID = 'primary_goals';\n    var SECTION_LABEL = 'goals_options';\n\n    var FALLBACK_ITEMS = [\n      { id: 'confident',        emoji: '✨', title: 'Feel confident in what I wear' },\n      { id: 'less_time',        emoji: '⏱',  title: 'Spend less time getting dressed' },\n      { id: 'wardrobe_love',    emoji: '🧥', title: 'Build a wardrobe I actually love' },\n      { id: 'put_together',     emoji: '🪞', title: 'Look put-together, effortlessly' },\n      { id: 'stop_buying',      emoji: '🛍', title: 'Stop buying clothes I never wear' },\n      { id: 'calmer_mornings',  emoji: '🧘', title: 'Calmer, easier mornings' }\n    ];\n\n    var EMOJI_BY_ID = FALLBACK_ITEMS.reduce(function (acc, it) { acc[it.id] = it.emoji; return acc; }, {});\n\n    var state = { items: FALLBACK_ITEMS.slice(), selected: new Set(), sdk: null };\n\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n\n    function readItems(sdk) {\n      try {\n        var section = sdk.getChildSection(SECTION_LABEL);\n        var items = section && Array.isArray(section.items) ? section.items : null;\n        if (!items || !items.length) return null;\n        return items.map(function (it) {\n          var id = it.variableValue || it.id;\n          return {\n            id: id,\n            emoji: it.icon || EMOJI_BY_ID[id] || '•',\n            title: (it.title && (it.title.title || it.title)) || it.label || ''\n          };\n        });\n      } catch (e) { return null; }\n    }\n\n    function renderOptions() {\n      var list = document.getElementById('options_list');\n      list.innerHTML = '';\n      state.items.forEach(function (item) {\n        var isSelected = state.selected.has(item.id);\n        var row = document.createElement('div');\n        row.className = 'option' + (isSelected ? ' selected' : '');\n        row.setAttribute('data-id', item.id);\n        row.setAttribute('data-testid', 'option-' + item.id);\n        row.setAttribute('role', 'checkbox');\n        row.setAttribute('aria-checked', isSelected ? 'true' : 'false');\n        row.innerHTML =\n          '<div class=\"emoji\" aria-hidden=\"true\"></div>' +\n          '<div class=\"label\"></div>' +\n          '<div class=\"check\" aria-hidden=\"true\"></div>';\n        row.querySelector('.emoji').textContent = item.emoji;\n        row.querySelector('.label').textContent = item.title;\n        row.addEventListener('click', function () { toggleOption(item.id); });\n        list.appendChild(row);\n      });\n      var cta = document.getElementById('cta_button');\n      cta.disabled = state.selected.size === 0;\n    }\n\n    function toggleOption(id) {\n      if (state.selected.has(id)) state.selected.delete(id);\n      else state.selected.add(id);\n      renderOptions();\n    }\n\n    function bindBack(sdk) {\n      document.getElementById('back_button').addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        try { sdk.navigateBack(); } catch (err) { console.error('navigateBack failed', err); }\n      });\n    }\n\n    function bindCta(sdk) {\n      var btn = document.getElementById('cta_button');\n      var advanced = false;\n      btn.addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        if (advanced || state.selected.size === 0) return;\n        advanced = true;\n        var values = Array.from(state.selected);\n        try { sdk.setVariable(VARIABLE_ID, values); } catch (err) { console.error('setVariable failed', err); }\n        try { sdk.navigateNext(); } catch (err) {\n          advanced = false;\n          console.error('navigateNext failed', err);\n        }\n      });\n    }\n\n    function init(sdk) {\n      state.sdk = sdk;\n\n      document.getElementById('eyebrow_label').textContent = readText(sdk, 'eyebrow_label', 'YOUR GOALS');\n      document.getElementById('title_label').textContent = readText(sdk, 'title', 'What is your current primary goal?');\n      document.getElementById('subtitle_label').textContent = readText(sdk, 'subtitle', 'Choose all that apply');\n      document.getElementById('cta_label').textContent = readText(sdk, 'cta_label', 'Continue');\n\n      var items = readItems(sdk);\n      if (items && items.length) state.items = items;\n\n      try {\n        var current = sdk.getVariable(VARIABLE_ID);\n        if (Array.isArray(current)) {\n          current.forEach(function (v) {\n            if (state.items.some(function (i) { return i.id === v; })) state.selected.add(v);\n          });\n        }\n      } catch (e) { /* noop */ }\n\n      renderOptions();\n      bindBack(sdk);\n      bindCta(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n      renderOptions();\n    }\n  </script>\n</body>\n</html>\n","childSections":[{"kind":"Text","textContent":{"title":{"translations":{"en-US":"YOUR GOALS"},"kind":"static","appearance":{}}},"order":0,"id":"eyebrow_label","label":"eyebrow_label"},{"kind":"Text","textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"What is your current primary goal?"}}},"order":1,"label":"title","id":"title"},{"id":"subtitle","label":"subtitle","kind":"Text","order":2,"textContent":{"title":{"translations":{"en-US":"Choose all that apply"},"appearance":{},"kind":"static"}}},{"kind":"Text","order":3,"textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Continue"}}},"label":"cta_label","id":"cta_label"},{"order":4,"kind":"MultipleSelectionList","id":"goals_options","label":"goals_options","optionsListContent":{"items":[{"variableValue":"confident","title":{"kind":"static","appearance":{},"translations":{"en-US":"Feel confident in what I wear"}},"id":"confident"},{"variableValue":"less_time","title":{"translations":{"en-US":"Spend less time getting dressed"},"kind":"static","appearance":{}},"id":"less_time"},{"variableValue":"wardrobe_love","title":{"translations":{"en-US":"Build a wardrobe I actually love"},"kind":"static","appearance":{}},"id":"wardrobe_love"},{"variableValue":"put_together","id":"put_together","title":{"kind":"static","appearance":{},"translations":{"en-US":"Look put-together, effortlessly"}}},{"variableValue":"stop_buying","id":"stop_buying","title":{"translations":{"en-US":"Stop buying clothes I never wear"},"appearance":{},"kind":"static"}},{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Calmer, easier mornings"}},"id":"calmer_mornings","variableValue":"calmer_mornings"}]}}],"callback":{"action":{"kind":"advance","edges":[{"nextScreenId":"of-menopause-mornings","transitionKind":"push","conditions":[]}]}}},"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}},"animated":true},"screenType":"WebEmbed","aiMeta":{"generationModel":"manual-cli","generationTimestamp":"2026-06-15T10:36:55.978Z","blockType":"WebEmbed","blockRole":"Primary goals","iterationCount":1,"source":"segmently-cli"},"tags":[]},"of-menopause-intro":{"screenType":"WebEmbed","tags":[],"aiMeta":{"generationModel":"manual-cli","generationTimestamp":"2026-06-13T08:46:44.758Z","source":"segmently-cli","blockType":"WebEmbed","iterationCount":1,"blockRole":"Menopause Intro"},"updatedAt":"2026-06-17T07:58:41.274Z","id":"of-menopause-intro","position":{"x":-4672,"y":0},"name":"Menopause Intro","content":{"embed":{"childSections":[{"label":"headline","id":"headline","textContent":{"title":{"translations":{"en-US":"Finally! Stop buying, start styling"},"appearance":{},"kind":"static"}},"order":0,"kind":"Text"},{"id":"cta_label","label":"cta_label","kind":"Text","order":1,"textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Start my plan"}}}},{"order":2,"textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"Secure & Personalized Plan"}}},"kind":"Text","id":"security_label","label":"security_label"},{"kind":"Text","textContent":{"title":{"translations":{"en-US":"I already have an account"},"appearance":{},"kind":"static"}},"order":3,"label":"login_label","id":"login_label"},{"kind":"Media","order":4,"mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095024_of-menopause-intro-logo-media/origin.svg","small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095024_of-menopause-intro-logo-media/small.svg"}}}},"kind":"Image"},"label":"logo_media","id":"logo_media"},{"order":5,"kind":"Media","id":"outfit_1_media","label":"outfit_1_media","mediaContent":{"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095027_of-menopause-intro-outfit-1-media/small.webp","original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095027_of-menopause-intro-outfit-1-media/origin.webp"}}}},"kind":"Image"}},{"id":"outfit_2_media","label":"outfit_2_media","mediaContent":{"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095030_of-menopause-intro-outfit-2-media/small.webp","original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095030_of-menopause-intro-outfit-2-media/origin.webp"}}}},"kind":"Image"},"order":6,"kind":"Media"},{"label":"outfit_3_media","id":"outfit_3_media","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095032_of-menopause-intro-outfit-3-media/origin.webp","small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095032_of-menopause-intro-outfit-3-media/small.webp"}}}},"kind":"Image"},"order":7,"kind":"Media"},{"kind":"Media","order":8,"mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095037_of-menopause-intro-outfit-4-media/origin.webp","small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095037_of-menopause-intro-outfit-4-media/small.webp"}}}},"kind":"Image"},"id":"outfit_4_media","label":"outfit_4_media"},{"order":9,"kind":"Media","id":"outfit_5_media","label":"outfit_5_media","mediaContent":{"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095034_of-menopause-intro-outfit-5-media/small.webp","original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095034_of-menopause-intro-outfit-5-media/origin.webp"}}}},"kind":"Image"}}],"callback":{"action":{"edges":[{"conditions":[],"nextScreenId":"of-menopause-journey","transitionKind":"push"}],"kind":"advance"}},"isIframe":true,"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>Onboarding Intro</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link rel=\"preconnect\" href=\"https://api.segmently.ai\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <link rel=\"preload\" as=\"image\" fetchpriority=\"high\"\n        href=\"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095024_of-menopause-intro-logo-media/origin.svg\">\n  <link rel=\"preload\" as=\"image\" fetchpriority=\"high\"\n        href=\"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095027_of-menopause-intro-outfit-1-media/origin.webp\">\n  <link rel=\"preload\" as=\"image\"\n        href=\"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095030_of-menopause-intro-outfit-2-media/origin.webp\">\n  <link rel=\"preload\" as=\"image\"\n        href=\"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095032_of-menopause-intro-outfit-3-media/origin.webp\">\n  <link rel=\"preload\" as=\"image\"\n        href=\"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095037_of-menopause-intro-outfit-4-media/origin.webp\">\n  <link rel=\"preload\" as=\"image\"\n        href=\"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095034_of-menopause-intro-outfit-5-media/origin.webp\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #000000;\n      --text-white: #FFFFFF;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    }\n    .screen {\n      position: relative;\n      width: 100%;\n      height: 100%;\n      min-height: 100vh;\n      display: flex;\n      flex-direction: column;\n      background: linear-gradient(206deg, #ffffff 22%, #fcb9cd 66%, #f5326d 110%);\n      overflow: hidden;\n      -webkit-tap-highlight-color: transparent;\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 {\n        width: 100%;\n        max-width: 430px;\n        aspect-ratio: 9 / 19.5;\n        height: auto;\n        max-height: 95vh;\n        border-radius: 40px;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n      }\n    }\n\n    .logo {\n      display: flex;\n      justify-content: center;\n      padding: 60px 32px 0 32px;\n      flex-shrink: 0;\n    }\n    .logo img {\n      height: 44px;\n      width: auto;\n      aspect-ratio: 140.51 / 43.81;\n      object-fit: contain;\n      display: block;\n    }\n\n    .headline-wrap {\n      flex: 1 1 auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 24px 32px;\n      min-height: 0;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      -webkit-overflow-scrolling: touch;\n      position: relative;\n      z-index: 1;\n    }\n    .headline {\n      text-align: center;\n    }\n    .headline h1 {\n      margin: 0;\n      font-weight: 700;\n      font-size: 32px;\n      line-height: 1.04;\n      letter-spacing: -0.02em;\n      color: var(--text-dark);\n    }\n\n    .carousel-wrap {\n      margin-bottom: 24px;\n      padding-top: 0;\n      flex-shrink: 0;\n      overflow: hidden;\n    }\n    .carousel {\n      display: flex;\n      padding: 12px 0;\n      overflow: hidden;\n      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);\n              mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);\n    }\n    .carousel-track {\n      display: flex;\n      gap: 8px;\n      flex: 0 0 auto;\n      will-change: transform;\n    }\n    .carousel-item {\n      flex: 0 0 auto;\n      width: 120px;\n      height: 150px;\n      background: rgba(255, 255, 255, 0.35);\n      border-radius: 12px;\n      overflow: hidden;\n    }\n    .carousel-item img {\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity 240ms ease;\n    }\n    .carousel-item img.is-loaded { opacity: 1; }\n    .logo img {\n      opacity: 0;\n      transition: opacity 200ms ease;\n    }\n    .logo img.is-loaded { opacity: 1; }\n\n    .footer {\n      padding: 24px 20px calc(24px + env(safe-area-inset-bottom)) 20px;\n      flex-shrink: 0;\n      position: relative;\n      z-index: 3;\n      background: linear-gradient(180deg, rgba(252, 185, 205, 0) 0%, rgba(252, 185, 205, 0.85) 30%, rgba(245, 50, 109, 0.92) 100%);\n      backdrop-filter: blur(6px);\n      -webkit-backdrop-filter: blur(6px);\n      margin-top: -24px;\n    }\n    .cta {\n      width: 100%;\n      height: 56px;\n      border: none;\n      border-radius: 100px;\n      background: var(--brand-primary);\n      color: var(--text-white);\n      font-family: inherit;\n      font-weight: 500;\n      font-size: 16px;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .cta:active { opacity: 0.9; }\n    .security {\n      margin-top: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 4px;\n      color: var(--text-white);\n      font-size: 12px;\n      letter-spacing: -0.01em;\n    }\n    .security svg { flex-shrink: 0; }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" data-testid=\"screen-root\">\n    <div class=\"logo\" data-testid=\"logo\">\n      <img id=\"logo_img\" alt=\"Logo\" decoding=\"async\" fetchpriority=\"high\"\n           src=\"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095024_of-menopause-intro-logo-media/origin.svg\">\n    </div>\n\n    <div class=\"headline-wrap\">\n      <div class=\"headline\" data-testid=\"headline\">\n        <h1 id=\"title_label\">Finally!<br>Stop buying,<br>start styling</h1>\n      </div>\n    </div>\n\n    <div class=\"carousel-wrap\">\n      <div class=\"carousel\" data-testid=\"carousel\">\n        <div class=\"carousel-track\" id=\"carousel\">\n          <!-- Duplicated set (A + A) drives the marquee loop. Hardcoded src\n               means the browser begins fetching during HTML parse, before\n               the SDK ever responds. The JS later swaps the src only if\n               the SDK returns a different URL. -->\n          <div class=\"carousel-item\"><img alt=\"\" decoding=\"async\" data-outfit=\"1\" src=\"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095027_of-menopause-intro-outfit-1-media/origin.webp\"></div>\n          <div class=\"carousel-item\"><img alt=\"\" decoding=\"async\" data-outfit=\"2\" src=\"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095030_of-menopause-intro-outfit-2-media/origin.webp\"></div>\n          <div class=\"carousel-item\"><img alt=\"\" decoding=\"async\" data-outfit=\"3\" src=\"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095032_of-menopause-intro-outfit-3-media/origin.webp\"></div>\n          <div class=\"carousel-item\"><img alt=\"\" decoding=\"async\" data-outfit=\"4\" src=\"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095037_of-menopause-intro-outfit-4-media/origin.webp\"></div>\n          <div class=\"carousel-item\"><img alt=\"\" decoding=\"async\" data-outfit=\"5\" src=\"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095034_of-menopause-intro-outfit-5-media/origin.webp\"></div>\n          <div class=\"carousel-item\"><img alt=\"\" decoding=\"async\" data-outfit=\"1\" src=\"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095027_of-menopause-intro-outfit-1-media/origin.webp\"></div>\n          <div class=\"carousel-item\"><img alt=\"\" decoding=\"async\" data-outfit=\"2\" src=\"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095030_of-menopause-intro-outfit-2-media/origin.webp\"></div>\n          <div class=\"carousel-item\"><img alt=\"\" decoding=\"async\" data-outfit=\"3\" src=\"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095032_of-menopause-intro-outfit-3-media/origin.webp\"></div>\n          <div class=\"carousel-item\"><img alt=\"\" decoding=\"async\" data-outfit=\"4\" src=\"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095037_of-menopause-intro-outfit-4-media/origin.webp\"></div>\n          <div class=\"carousel-item\"><img alt=\"\" decoding=\"async\" data-outfit=\"5\" src=\"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095034_of-menopause-intro-outfit-5-media/origin.webp\"></div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"footer\">\n      <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\">\n        <span id=\"cta_label\">Start my plan</span>\n      </button>\n      <div class=\"security\" data-testid=\"security\">\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path d=\"M6 1L2 2.5v3c0 2.5 1.7 4.7 4 5.5 2.3-0.8 4-3 4-5.5v-3L6 1z\" stroke=\"#fff\" stroke-width=\"0.9\" fill=\"none\"/>\n          <path d=\"M4.5 6l1 1 2-2\" stroke=\"#fff\" stroke-width=\"0.9\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n        <span id=\"security_label\">Secure &amp; Personalized Plan</span>\n      </div>\n    </div>\n  </div>\n\n  <script>\n    var OUTFIT_LABELS = [\n      'outfit_1_media',\n      'outfit_2_media',\n      'outfit_3_media',\n      'outfit_4_media',\n      'outfit_5_media'\n    ];\n\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n\n    function readMediaUrl(sdk, label) {\n      try {\n        var m = sdk.getChildSectionMedia(label);\n        return (m && m.url) ? m.url : null;\n      } catch (e) { return null; }\n    }\n\n    function escapeHtml(s) {\n      return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\"/g, '&quot;');\n    }\n\n    // \"Finally! Stop buying, start styling\" → 3 lines split on \"!\" then \",\".\n    // Honors any existing <br> tags the data source may already contain.\n    function format3Lines(text) {\n      if (!text) return text;\n      if (/<br\\s*\\/?>/i.test(text)) return text;\n      var clean = escapeHtml(text);\n      var m = clean.match(/^(.*?!)\\s*(.*?,)\\s*(.*)$/);\n      if (m) return m[1] + '<br>' + m[2] + '<br>' + m[3];\n      return clean;\n    }\n\n    function applyLabels(sdk) {\n      var title = readText(sdk, 'headline', 'Finally! Stop buying, start styling');\n      document.getElementById('title_label').innerHTML = format3Lines(title);\n\n      var cta = readText(sdk, 'cta_label', 'Start my plan');\n      document.getElementById('cta_label').textContent = cta;\n\n      var sec = readText(sdk, 'security_label', 'Secure & Personalized Plan');\n      document.getElementById('security_label').textContent = sec;\n\n    }\n\n    function markLoaded(img) {\n      if (!img) return;\n      if (img.complete && img.naturalWidth) {\n        img.classList.add('is-loaded');\n      } else {\n        img.addEventListener('load', function () { img.classList.add('is-loaded'); }, { once: true });\n        img.addEventListener('error', function () { img.classList.add('is-loaded'); }, { once: true });\n      }\n    }\n\n    function applyMedia(sdk) {\n      // Logo: only swap src if SDK returns a URL different from the hardcoded one.\n      var logoImg = document.getElementById('logo_img');\n      var logoUrl = readMediaUrl(sdk, 'logo_media');\n      if (logoUrl && logoUrl !== logoImg.getAttribute('src')) {\n        logoImg.classList.remove('is-loaded');\n        logoImg.src = logoUrl;\n      }\n      markLoaded(logoImg);\n\n      // Outfits: if the SDK returns the same URLs we hardcoded, do nothing.\n      // Otherwise swap src on each pair of cells (the carousel is duplicated for the marquee).\n      var urls = OUTFIT_LABELS.map(function (l) { return readMediaUrl(sdk, l); });\n      var cells = document.querySelectorAll('.carousel-item img');\n      cells.forEach(function (img) {\n        var idx = parseInt(img.getAttribute('data-outfit'), 10) - 1;\n        var u = urls[idx];\n        if (u && u !== img.getAttribute('src')) {\n          img.classList.remove('is-loaded');\n          img.src = u;\n        }\n        markLoaded(img);\n      });\n    }\n\n    function bindCta(sdk) {\n      var advanced = false;\n      var advance = function () {\n        if (advanced) return;\n        advanced = true;\n        try {\n          sdk.navigateNext();\n        } catch (err) {\n          advanced = false;\n          console.error('navigateNext failed', err);\n        }\n      };\n\n      // Whole-screen tap advances. The CTA still works (and is the obvious\n      // affordance), but tapping anywhere on the background does too.\n      document.querySelector('.screen').addEventListener('click', function () {\n        advance();\n      });\n\n      // Keep the CTA wired so the button's hit area is responsive without\n      // having to bubble up through the screen handler.\n      document.getElementById('cta_button').addEventListener('click', function (e) {\n        e.preventDefault();\n        e.stopPropagation();\n        advance();\n      });\n    }\n\n    function init(sdk) {\n      applyLabels(sdk);\n      applyMedia(sdk);\n      bindCta(sdk);\n    }\n\n    // Fade in hardcoded images as soon as they decode — don't wait for SDK ready.\n    document.querySelectorAll('#logo_img, .carousel-item img').forEach(markLoaded);\n\n    // ─── JS-driven marquee ────────────────────────────────────────────────\n    // The track contains cells duplicated A + A. Once the first half is laid\n    // out, translate by exactly that half-width (cells + gaps) so the loop is\n    // seamless. Pixel-based + Web Animations API is more reliable inside\n    // sandboxed iframes than @keyframes with percentages.\n    (function startMarquee() {\n      var track = document.getElementById('carousel');\n      if (!track) return;\n      var anim = null;\n      var rampAnim = null;\n      var speedPxPerSec = 40; // adjust for slower/faster scroll\n      var startDelayMs = 900; // hold static at start\n      var rampDurationMs = 1600; // ease-in from rest to cruising speed\n      var prevHalf = 0;\n\n      function measureHalfWidth() {\n        var items = track.children;\n        if (items.length < 2) return 0;\n        var half = Math.floor(items.length / 2); // first copy = first half of cells\n        var first = items[0].getBoundingClientRect();\n        var afterLast = items[half].getBoundingClientRect();\n        return afterLast.left - first.left;\n      }\n\n      function start() {\n        var halfWidth = measureHalfWidth();\n        if (!halfWidth || Math.abs(halfWidth - prevHalf) < 1) return;\n        prevHalf = halfWidth;\n        if (anim) { try { anim.cancel(); } catch (e) {} }\n        if (rampAnim) { try { rampAnim.cancel(); } catch (e) {} }\n        var cruiseDuration = Math.max(8000, (halfWidth / speedPxPerSec) * 1000);\n\n        // The ease-in ramp covers the first slice of the loop. We compute how\n        // much of the half-width it should cover so that, at the moment the\n        // ramp ends, the track speed already matches the cruise speed —\n        // avoiding a visible \"snap\" at the handoff.\n        // For an ease-in-out half (ease-out half), average speed is ~½ the\n        // peak. So distance covered = (rampDurationMs / 1000) * speedPxPerSec * 0.5.\n        var rampDistance = (rampDurationMs / 1000) * speedPxPerSec * 0.5;\n        if (rampDistance > halfWidth * 0.4) rampDistance = halfWidth * 0.4;\n\n        try {\n          // Phase 1: delay + slow ease-in ramp.\n          rampAnim = track.animate(\n            [\n              { transform: 'translateX(0)' },\n              { transform: 'translateX(-' + rampDistance + 'px)' }\n            ],\n            {\n              duration: rampDurationMs,\n              delay: startDelayMs,\n              fill: 'forwards',\n              easing: 'cubic-bezier(0.22, 0.61, 0.36, 1)' // ease-out\n            }\n          );\n\n          rampAnim.onfinish = function () {\n            // Phase 2: infinite linear loop, picking up where ramp left off.\n            try {\n              anim = track.animate(\n                [\n                  { transform: 'translateX(-' + rampDistance + 'px)' },\n                  { transform: 'translateX(-' + halfWidth + 'px)' }\n                ],\n                {\n                  duration: cruiseDuration * (1 - rampDistance / halfWidth),\n                  iterations: 1,\n                  fill: 'forwards',\n                  easing: 'linear'\n                }\n              );\n              anim.onfinish = function () {\n                // Now loop the full half-width forever.\n                try {\n                  anim = track.animate(\n                    [\n                      { transform: 'translateX(0)' },\n                      { transform: 'translateX(-' + halfWidth + 'px)' }\n                    ],\n                    { duration: cruiseDuration, iterations: Infinity, easing: 'linear' }\n                  );\n                } catch (e) { /* noop */ }\n              };\n            } catch (e) { /* noop */ }\n          };\n        } catch (e) {\n          // Older browsers — simple rAF fallback with the same overall feel.\n          var t0 = performance.now() + startDelayMs;\n          (function tick(now) {\n            var elapsed = now - t0;\n            if (elapsed < 0) {\n              requestAnimationFrame(tick);\n              return;\n            }\n            var x;\n            if (elapsed < rampDurationMs) {\n              var p = elapsed / rampDurationMs;\n              var eased = 1 - Math.pow(1 - p, 3);\n              x = -eased * rampDistance;\n            } else {\n              var loopElapsed = (elapsed - rampDurationMs);\n              var loopStart = rampDistance;\n              var pos = loopStart + (loopElapsed / 1000) * speedPxPerSec;\n              x = -((pos) % halfWidth);\n            }\n            track.style.transform = 'translateX(' + x + 'px)';\n            requestAnimationFrame(tick);\n          })(performance.now());\n        }\n      }\n\n      function scheduleStart() {\n        // Wait one frame so the track has its final laid-out width.\n        requestAnimationFrame(function () { requestAnimationFrame(start); });\n      }\n\n      scheduleStart();\n\n      // Re-measure if images settle later (track width can grow as images decode).\n      Array.from(track.querySelectorAll('img')).forEach(function (img) {\n        if (img.complete) return;\n        img.addEventListener('load', scheduleStart, { once: true });\n      });\n\n      // Re-measure on resize/orientation change.\n      window.addEventListener('resize', scheduleStart);\n    })();\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) {\n        console.error('SDK ready failed', e);\n      });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n    }\n  </script>\n</body>\n</html>\n"},"offlineFirst":false,"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}},"animated":true},"createdAt":"2026-06-13T08:46:44.758Z","order":6,"aiContent":{}},"of-menopause-journey":{"screenType":"WebEmbed","tags":[],"aiMeta":{"generationModel":"manual-cli","generationTimestamp":"2026-06-13T10:12:56.580Z","iterationCount":1,"blockRole":"Journey question","blockType":"WebEmbed","source":"segmently-cli"},"updatedAt":"2026-06-18T07:38:19.624Z","name":"Journey question","position":{"y":16,"x":-4064},"id":"of-menopause-journey","content":{"animated":true,"canvas":{"background":{"kind":"solid","content":{"color":"#f8fbfb"}}},"embed":{"childSections":[{"label":"title","id":"title","kind":"Text","textContent":{"title":{"translations":{"en-US":"Which season of life feels most like you right now?"},"kind":"static","appearance":{}}},"order":0},{"label":"subtitle","id":"subtitle","kind":"Text","textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Your answers help us highlight the most relevant styling guidance throughout the app."}}},"order":1},{"textContent":{"title":{"translations":{"en-US":"I prefer not to say"},"appearance":{},"kind":"static"}},"order":2,"kind":"Text","label":"cta_label","id":"cta_label"},{"label":"journey_options","id":"journey_options","optionsListContent":{"items":[{"variableValue":"figuring_out","subtitle":{"translations":{"en-US":"I’m not experiencing menopause yet"},"kind":"static","appearance":{}},"id":"figuring_out","title":{"appearance":{},"kind":"static","translations":{"en-US":"Premenopause"}}},{"id":"body_changing","title":{"kind":"static","appearance":{},"translations":{"en-US":"Perimenopause"}},"variableValue":"body_changing","subtitle":{"translations":{"en-US":"My body and style preferences have been changing lately"},"kind":"static","appearance":{}}},{"id":"hormonal_midlife","title":{"appearance":{},"kind":"static","translations":{"en-US":"Menopause"}},"variableValue":"hormonal_midlife","subtitle":{"translations":{"en-US":"My body is changing and getting dressed has gotten harder"},"appearance":{},"kind":"static"}},{"id":"rediscovering","title":{"translations":{"en-US":"Postmenopause"},"appearance":{},"kind":"static"},"variableValue":"rediscovering","subtitle":{"appearance":{},"kind":"static","translations":{"en-US":"I’m rediscovering my style for the version of me I am now"}}},{"title":{"translations":{"en-US":"None of these apply"},"appearance":{},"kind":"static"},"id":"none","variableValue":"none"}]},"order":3,"kind":"SingleSelectionList"}],"callback":{"action":{"edges":[{"conditions":[{"value":"hormonal_midlife,rediscovering,body_changing","operator":"in","key":"journey_stage"}],"nextScreenId":"of-menopause-get-to-know","transitionKind":"push"},{"nextScreenId":"of-menopause-system-problem","transitionKind":"push","conditions":[]}],"kind":"advance"}},"isIframe":true,"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>Journey Question</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=Google+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #1A1A1A;\n      --text-muted: #929292;\n      --text-sub: rgba(0, 0, 0, 0.6);\n      --card-bg: rgba(255, 255, 255, 0.8);\n      --card-border: rgba(0, 0, 0, 0.1);\n      --radio-border: #D9D9D9;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #FFFCFD;\n    }\n    .screen {\n      position: relative;\n      width: 100%; height: 100vh; height: 100dvh;\n      display: flex; flex-direction: column;\n      background: linear-gradient(180deg, #FFFCFD 0%, #FFFCFD 50%, #FFE8EE 100%);\n      overflow: hidden;\n      -webkit-tap-highlight-color: transparent;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .screen {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n      }\n    }\n    .topbar {\n      padding: 16px 20px 8px 20px;\n      display: flex; align-items: center;\n      flex-shrink: 0;\n    }\n    .back-btn {\n      width: 40px; height: 40px;\n      display: flex; align-items: center; justify-content: center;\n      background: transparent; border: none; padding: 0; cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .back-btn svg { display: block; }\n    .content {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      padding: 8px 20px 8px 20px;\n      min-height: 0;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      -webkit-overflow-scrolling: touch;\n    }\n    .title {\n      margin: 0 auto 12px auto;\n      font-weight: 700;\n      font-size: 24px;\n      line-height: 1.33;\n      letter-spacing: -0.15px;\n      color: var(--text-dark);\n      text-align: center;\n      max-width: 312px;\n    }\n    .subtitle {\n      margin: 0 auto 24px auto;\n      font-weight: 500;\n      font-size: 12px;\n      line-height: 1.42;\n      color: var(--text-muted);\n      text-align: center;\n      max-width: 277px;\n    }\n    .options { display: flex; flex-direction: column; gap: 12px; }\n    .option {\n      display: flex; align-items: center; gap: 12px;\n      padding: 16px;\n      background: var(--card-bg);\n      border: 1px solid var(--card-border);\n      border-radius: 14px;\n      cursor: pointer;\n      transition: background-color 120ms ease, border-color 120ms ease;\n    }\n    .option .text {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      gap: 4px;\n      min-width: 0;\n    }\n    .option .label {\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 1.5;\n      letter-spacing: -0.18px;\n      color: var(--text-dark);\n    }\n    .option .sublabel {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 1.43;\n      letter-spacing: -0.16px;\n      color: var(--text-sub);\n    }\n    .option .check {\n      flex-shrink: 0;\n      width: 20px; height: 20px;\n      border-radius: 10px;\n      border: 1.5px solid var(--radio-border);\n      background: #FFFFFF;\n      display: flex; align-items: center; justify-content: center;\n    }\n    .option.selected {\n      border-color: var(--brand-primary);\n    }\n    .option.selected .check {\n      border-color: var(--brand-primary);\n      background: var(--brand-primary);\n    }\n    .option.selected .check::after {\n      content: \"\";\n      width: 8px; height: 8px;\n      border-radius: 4px;\n      background: #FFFFFF;\n    }\n    .option.none-row {\n      justify-content: center;\n      min-height: 64px;\n    }\n    .option.none-row .label {\n      text-align: center;\n      width: auto;\n    }\n    .footer {\n      padding: 16px 20px calc(20px + env(safe-area-inset-bottom)) 20px;\n      flex-shrink: 0;\n    }\n    .cta {\n      width: 100%; height: 56px;\n      border: none; border-radius: 100px;\n      background: transparent;\n      color: var(--brand-primary);\n      font-family: inherit; font-weight: 500; font-size: 16px;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      transition: opacity 120ms ease;\n    }\n    .cta:active { opacity: 0.7; }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" data-testid=\"screen-root\">\n    <div class=\"topbar\">\n      <button class=\"back-btn\" id=\"back_button\" data-testid=\"back-button\" aria-label=\"Back\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M15 18l-6-6 6-6\" stroke=\"#1A1A1A\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n    </div>\n\n    <div class=\"content\">\n      <h1 class=\"title\" id=\"title_label\">Which season of life feels most like you right now?</h1>\n      <p class=\"subtitle\" id=\"subtitle_label\">Your answers help us highlight the most relevant styling guidance throughout the app.</p>\n      <div class=\"options\" id=\"options_list\" data-testid=\"options-list\"></div>\n    </div>\n\n    <div class=\"footer\">\n      <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\">\n        <span id=\"cta_label\">I prefer not to say</span>\n      </button>\n    </div>\n  </div>\n\n  <script>\n    var VARIABLE_ID = 'journey_stage';\n    var SECTION_LABEL = 'journey_options';\n\n    var FALLBACK_ITEMS = [\n      { id: 'figuring_out',     title: 'Premenopause',  subtitle: \"I’m not experiencing menopause yet\" },\n      { id: 'body_changing',    title: 'Perimenopause', subtitle: \"My body and style preferences have been changing lately\" },\n      { id: 'hormonal_midlife', title: 'Menopause',     subtitle: \"My body is changing and getting dressed has gotten harder\" },\n      { id: 'rediscovering',    title: 'Postmenopause', subtitle: \"I’m rediscovering my style for the version of me I am now\" },\n      { id: 'none',             title: 'None of these apply', subtitle: '' }\n    ];\n\n    var state = { items: FALLBACK_ITEMS.slice(), selectedId: null, sdk: null, advanced: false };\n\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n\n    function readItems(sdk) {\n      try {\n        var section = sdk.getChildSection(SECTION_LABEL);\n        var items = section && Array.isArray(section.items) ? section.items : null;\n        if (!items || !items.length) return null;\n        return items.map(function (it) {\n          var id = it.variableValue || it.id;\n          var fallback = FALLBACK_ITEMS.filter(function (f) { return f.id === id; })[0] || {};\n          return {\n            id: id,\n            title: (it.title && (it.title.title || it.title)) || it.label || fallback.title || '',\n            subtitle: (it.subtitle && (it.subtitle.title || it.subtitle)) || fallback.subtitle || ''\n          };\n        });\n      } catch (e) { return null; }\n    }\n\n    function renderOptions() {\n      var list = document.getElementById('options_list');\n      list.innerHTML = '';\n      state.items.forEach(function (item) {\n        var row = document.createElement('div');\n        var isNone = !item.subtitle;\n        row.className = 'option' + (isNone ? ' none-row' : '') + (state.selectedId === item.id ? ' selected' : '');\n        row.setAttribute('data-id', item.id);\n        row.setAttribute('data-testid', 'option-' + item.id);\n        row.setAttribute('role', 'radio');\n        row.setAttribute('aria-checked', state.selectedId === item.id ? 'true' : 'false');\n        if (isNone) {\n          row.innerHTML =\n            '<div class=\"text\"><div class=\"label\"></div></div>' +\n            '<div class=\"check\" aria-hidden=\"true\"></div>';\n        } else {\n          row.innerHTML =\n            '<div class=\"text\"><div class=\"label\"></div><div class=\"sublabel\"></div></div>' +\n            '<div class=\"check\" aria-hidden=\"true\"></div>';\n        }\n        row.querySelector('.label').textContent = item.title;\n        if (!isNone) row.querySelector('.sublabel').textContent = item.subtitle || '';\n        row.addEventListener('click', function () { selectOption(item.id); });\n        list.appendChild(row);\n      });\n    }\n\n    function advance(value) {\n      if (state.advanced) return;\n      state.advanced = true;\n      try { state.sdk && state.sdk.setVariable(VARIABLE_ID, value); } catch (err) { console.error('setVariable failed', err); }\n      try { state.sdk && state.sdk.navigateNext(); } catch (err) {\n        state.advanced = false;\n        console.error('navigateNext failed', err);\n      }\n    }\n\n    function selectOption(id) {\n      state.selectedId = id;\n      renderOptions();\n      setTimeout(function () { advance(id); }, 160);\n    }\n\n    function bindBack(sdk) {\n      document.getElementById('back_button').addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        try { sdk.navigateBack(); } catch (err) { console.error('navigateBack failed', err); }\n      });\n    }\n\n    function bindCta() {\n      document.getElementById('cta_button').addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        advance('prefer_not_to_say');\n      });\n    }\n\n    function init(sdk) {\n      state.sdk = sdk;\n      document.getElementById('title_label').textContent = readText(sdk, 'title', 'Which season of life feels most like you right now?');\n      document.getElementById('subtitle_label').textContent = readText(sdk, 'subtitle', 'Your answers help us highlight the most relevant styling guidance throughout the app.');\n      document.getElementById('cta_label').textContent = readText(sdk, 'cta_label', 'I prefer not to say');\n\n      var items = readItems(sdk);\n      if (items && items.length) state.items = items;\n\n      try {\n        var current = sdk.getVariable(VARIABLE_ID);\n        if (current && state.items.some(function (i) { return i.id === current; })) {\n          state.selectedId = current;\n        }\n      } catch (e) { /* noop */ }\n\n      renderOptions();\n      bindBack(sdk);\n      bindCta();\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n      renderOptions();\n      bindCta();\n    }\n  </script>\n</body>\n</html>\n"},"offlineFirst":false},"createdAt":"2026-06-13T10:12:56.580Z","order":6,"aiContent":{}},"of-menopause-mornings":{"screenType":"WebEmbed","tags":[],"aiMeta":{"source":"segmently-cli","iterationCount":1,"blockRole":"Mornings feeling","blockType":"WebEmbed","generationTimestamp":"2026-06-15T11:13:55.922Z","generationModel":"manual-cli"},"updatedAt":"2026-06-16T13:03:43.536Z","id":"of-menopause-mornings","name":"Mornings feeling","position":{"x":1920,"y":0},"content":{"animated":true,"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}},"offlineFirst":false,"embed":{"callback":{"action":{"kind":"advance","edges":[{"transitionKind":"push","nextScreenId":"of-menopause-challenge","conditions":[]}]}},"childSections":[{"id":"eyebrow_label","label":"eyebrow_label","kind":"Text","order":0,"textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"YOUR MORNINGS"}}}},{"kind":"Text","textContent":{"title":{"translations":{"en-US":"How does getting dressed feel?"},"appearance":{},"kind":"static"}},"order":1,"id":"title","label":"title"},{"label":"cta_label","id":"cta_label","textContent":{"title":{"translations":{"en-US":"Continue"},"kind":"static","appearance":{}}},"order":2,"kind":"Text"},{"kind":"SingleSelectionList","order":3,"optionsListContent":{"items":[{"title":{"translations":{"en-US":"Stressful. I dread getting dressed"},"appearance":{},"kind":"static"},"id":"stressful","variableValue":"stressful"},{"id":"meh","title":{"kind":"static","appearance":{},"translations":{"en-US":"Meh, it’s not great but I manage"}},"variableValue":"meh"},{"id":"hit_or_miss","title":{"translations":{"en-US":"Hit or miss. Some days are okay"},"appearance":{},"kind":"static"},"variableValue":"hit_or_miss"},{"variableValue":"usually_fine","title":{"appearance":{},"kind":"static","translations":{"en-US":"Usually fine but I want it easier"}},"id":"usually_fine"}]},"label":"mornings_options","id":"mornings_options"}],"isIframe":true,"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>How mornings feel</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=Google+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #241E32;\n      --text-body: #383751;\n      --text-muted: #6B7280;\n      --border-default: #E5E5EA;\n      --bg-card: #FFFFFF;\n      --bg-card-selected: #FFF6F9;\n      --progress-track: #FCE7EE;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #FFFFFF;\n    }\n    .screen {\n      position: relative;\n      width: 100%; height: 100%; min-height: 100vh;\n      display: flex; flex-direction: column;\n      background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 60%, #FFE4EE 100%);\n      overflow: hidden;\n      -webkit-tap-highlight-color: transparent;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .screen {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n      }\n    }\n    .topbar {\n      display: flex; align-items: center; gap: 12px;\n      padding: 16px 20px 8px 20px;\n      flex-shrink: 0;\n    }\n    .back-btn {\n      width: 24px; height: 24px;\n      display: flex; align-items: center; justify-content: center;\n      background: transparent; border: none; padding: 0; cursor: pointer;\n      flex-shrink: 0;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .progress {\n      flex: 1 1 auto;\n      height: 6px;\n      background: var(--progress-track);\n      border-radius: 999px;\n      overflow: hidden;\n    }\n    .progress-fill {\n      height: 100%;\n      width: 25%;\n      background: var(--brand-primary);\n      border-radius: 999px;\n      transition: width 200ms ease;\n    }\n    .step-counter {\n      flex-shrink: 0;\n      font-size: 14px;\n      color: var(--text-muted);\n      min-width: 24px;\n      text-align: right;\n    }\n\n    .content {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      padding: clamp(20px, 6vh, 80px) 20px 8px 20px;\n      min-height: 0;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      -webkit-overflow-scrolling: touch;\n    }\n    .eyebrow {\n      margin: 0 0 4px 0;\n      font-weight: 700;\n      font-size: 13px;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n      color: var(--brand-primary);\n    }\n    .title {\n      margin: 0 0 20px 0;\n      font-weight: 700;\n      font-size: 22px;\n      line-height: 1.2;\n      letter-spacing: -0.01em;\n      color: var(--text-dark);\n    }\n    .options { display: flex; flex-direction: column; gap: 12px; }\n    .option {\n      display: flex; align-items: center; gap: 12px;\n      min-height: 56px;\n      padding: 14px 16px;\n      background: var(--bg-card);\n      border: 1px solid var(--border-default);\n      border-radius: 16px;\n      cursor: pointer;\n      transition: background-color 120ms ease, border-color 120ms ease;\n    }\n    .option .emoji {\n      flex-shrink: 0;\n      font-size: 20px;\n      line-height: 1;\n      width: 24px; text-align: center;\n    }\n    .option .label {\n      flex: 1 1 auto;\n      font-size: 15px;\n      line-height: 1.4;\n      color: var(--text-body);\n    }\n    .option .check {\n      flex-shrink: 0;\n      width: 20px; height: 20px;\n      border-radius: 4px;\n      border: 1.5px solid #D1D1DB;\n      background: transparent;\n      display: flex; align-items: center; justify-content: center;\n    }\n    .option.selected {\n      background: var(--bg-card-selected);\n      border-color: var(--brand-primary);\n    }\n    .option.selected .check {\n      border-color: var(--brand-primary);\n      background: var(--brand-primary);\n    }\n    .option.selected .check::after {\n      content: \"\";\n      width: 10px; height: 6px;\n      border-left: 2px solid #fff;\n      border-bottom: 2px solid #fff;\n      transform: rotate(-45deg) translate(1px, -1px);\n    }\n\n    .footer {\n      padding: 16px 20px calc(20px + env(safe-area-inset-bottom)) 20px;\n      flex-shrink: 0;\n    }\n    .cta {\n      width: 100%; height: 56px;\n      border: none; border-radius: 100px;\n      background: var(--brand-primary);\n      color: #FFFFFF;\n      font-family: inherit; font-weight: 500; font-size: 16px;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .cta:disabled { opacity: 0.4; cursor: not-allowed; }\n    .cta:not(:disabled):active { opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" data-testid=\"screen-root\">\n    <div class=\"topbar\">\n      <button class=\"back-btn\" id=\"back_button\" data-testid=\"back-button\" aria-label=\"Back\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M19 12H5M5 12l7-7M5 12l7 7\" stroke=\"#241E32\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"progress\" aria-label=\"Step 2 of 8\">\n        <div class=\"progress-fill\" id=\"progress_fill\"></div>\n      </div>\n      <div class=\"step-counter\" id=\"step_counter\">2/8</div>\n    </div>\n\n    <div class=\"content\">\n      <div class=\"eyebrow\" id=\"eyebrow_label\">YOUR MORNINGS</div>\n      <h1 class=\"title\" id=\"title_label\">How does getting dressed feel?</h1>\n      <div class=\"options\" id=\"options_list\" data-testid=\"options-list\"></div>\n    </div>\n\n    <div class=\"footer\">\n      <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\" disabled>\n        <span id=\"cta_label\">Continue</span>\n      </button>\n    </div>\n  </div>\n\n  <script>\n    var VARIABLE_ID = 'mornings_feeling';\n    var SECTION_LABEL = 'mornings_options';\n\n    var FALLBACK_ITEMS = [\n      { id: 'stressful',    emoji: '😫', title: 'Stressful. I dread getting dressed' },\n      { id: 'meh',          emoji: '😕', title: \"Meh, it’s not great but I manage\" },\n      { id: 'hit_or_miss',  emoji: '🤔', title: 'Hit or miss. Some days are okay' },\n      { id: 'usually_fine', emoji: '😌', title: 'Usually fine but I want it easier' }\n    ];\n    var EMOJI_BY_ID = FALLBACK_ITEMS.reduce(function (acc, it) { acc[it.id] = it.emoji; return acc; }, {});\n\n    var state = { items: FALLBACK_ITEMS.slice(), selectedId: null, sdk: null };\n\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n\n    function readItems(sdk) {\n      try {\n        var section = sdk.getChildSection(SECTION_LABEL);\n        var items = section && Array.isArray(section.items) ? section.items : null;\n        if (!items || !items.length) return null;\n        return items.map(function (it) {\n          var id = it.variableValue || it.id;\n          return {\n            id: id,\n            emoji: it.icon || EMOJI_BY_ID[id] || '•',\n            title: (it.title && (it.title.title || it.title)) || it.label || ''\n          };\n        });\n      } catch (e) { return null; }\n    }\n\n    function renderOptions() {\n      var list = document.getElementById('options_list');\n      list.innerHTML = '';\n      state.items.forEach(function (item) {\n        var isSelected = state.selectedId === item.id;\n        var row = document.createElement('div');\n        row.className = 'option' + (isSelected ? ' selected' : '');\n        row.setAttribute('data-id', item.id);\n        row.setAttribute('data-testid', 'option-' + item.id);\n        row.setAttribute('role', 'radio');\n        row.setAttribute('aria-checked', isSelected ? 'true' : 'false');\n        row.innerHTML =\n          '<div class=\"emoji\" aria-hidden=\"true\"></div>' +\n          '<div class=\"label\"></div>' +\n          '<div class=\"check\" aria-hidden=\"true\"></div>';\n        row.querySelector('.emoji').textContent = item.emoji;\n        row.querySelector('.label').textContent = item.title;\n        row.addEventListener('click', function () { selectOption(item.id); });\n        list.appendChild(row);\n      });\n      document.getElementById('cta_button').disabled = !state.selectedId;\n    }\n\n    function selectOption(id) {\n      state.selectedId = id;\n      renderOptions();\n    }\n\n    function bindBack(sdk) {\n      document.getElementById('back_button').addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        try { sdk.navigateBack(); } catch (err) { console.error('navigateBack failed', err); }\n      });\n    }\n\n    function bindCta(sdk) {\n      var btn = document.getElementById('cta_button');\n      var advanced = false;\n      btn.addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        if (advanced || !state.selectedId) return;\n        advanced = true;\n        try { sdk.setVariable(VARIABLE_ID, state.selectedId); } catch (err) { console.error('setVariable failed', err); }\n        try { sdk.navigateNext(); } catch (err) {\n          advanced = false;\n          console.error('navigateNext failed', err);\n        }\n      });\n    }\n\n    function init(sdk) {\n      state.sdk = sdk;\n\n      document.getElementById('eyebrow_label').textContent = readText(sdk, 'eyebrow_label', 'YOUR MORNINGS');\n      document.getElementById('title_label').textContent = readText(sdk, 'title', 'How does getting dressed feel?');\n      document.getElementById('cta_label').textContent = readText(sdk, 'cta_label', 'Continue');\n\n      var items = readItems(sdk);\n      if (items && items.length) state.items = items;\n\n      try {\n        var current = sdk.getVariable(VARIABLE_ID);\n        if (current && state.items.some(function (i) { return i.id === current; })) {\n          state.selectedId = current;\n        }\n      } catch (e) { /* noop */ }\n\n      renderOptions();\n      bindBack(sdk);\n      bindCta(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n      renderOptions();\n    }\n  </script>\n</body>\n</html>\n"}},"createdAt":"2026-06-15T11:13:55.922Z","aiContent":{},"order":6},"of-menopause-nothing-to-wear":{"name":"Nothing to wear","position":{"y":0,"x":4320},"id":"of-menopause-nothing-to-wear","updatedAt":"2026-06-16T13:03:53.286Z","content":{"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}},"animated":true,"embed":{"isIframe":true,"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>How mornings feel</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=Google+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #241E32;\n      --text-body: #383751;\n      --text-muted: #6B7280;\n      --border-default: #E5E5EA;\n      --bg-card: #FFFFFF;\n      --bg-card-selected: #FFF6F9;\n      --progress-track: #FCE7EE;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #FFFFFF;\n    }\n    .screen {\n      position: relative;\n      width: 100%; height: 100%; min-height: 100vh;\n      display: flex; flex-direction: column;\n      background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 60%, #FFE4EE 100%);\n      overflow: hidden;\n      -webkit-tap-highlight-color: transparent;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .screen {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n      }\n    }\n    .topbar {\n      display: flex; align-items: center; gap: 12px;\n      padding: 16px 20px 8px 20px;\n      flex-shrink: 0;\n    }\n    .back-btn {\n      width: 24px; height: 24px;\n      display: flex; align-items: center; justify-content: center;\n      background: transparent; border: none; padding: 0; cursor: pointer;\n      flex-shrink: 0;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .progress {\n      flex: 1 1 auto;\n      height: 6px;\n      background: var(--progress-track);\n      border-radius: 999px;\n      overflow: hidden;\n    }\n    .progress-fill {\n      height: 100%;\n      width: 62.5%;\n      background: var(--brand-primary);\n      border-radius: 999px;\n      transition: width 200ms ease;\n    }\n    .step-counter {\n      flex-shrink: 0;\n      font-size: 14px;\n      color: var(--text-muted);\n      min-width: 24px;\n      text-align: right;\n    }\n\n    .content {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      padding: clamp(20px, 6vh, 80px) 20px 8px 20px;\n      min-height: 0;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      -webkit-overflow-scrolling: touch;\n    }\n    .eyebrow {\n      margin: 0 0 4px 0;\n      font-weight: 700;\n      font-size: 13px;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n      color: var(--brand-primary);\n    }\n    .title {\n      margin: 0 0 20px 0;\n      font-weight: 700;\n      font-size: 22px;\n      line-height: 1.2;\n      letter-spacing: -0.01em;\n      color: var(--text-dark);\n    }\n    .options { display: flex; flex-direction: column; gap: 12px; }\n    .option {\n      display: flex; align-items: center; gap: 12px;\n      min-height: 56px;\n      padding: 14px 16px;\n      background: var(--bg-card);\n      border: 1px solid var(--border-default);\n      border-radius: 16px;\n      cursor: pointer;\n      transition: background-color 120ms ease, border-color 120ms ease;\n    }\n    .option .emoji {\n      flex-shrink: 0;\n      font-size: 20px;\n      line-height: 1;\n      width: 24px; text-align: center;\n    }\n    .option .label {\n      flex: 1 1 auto;\n      font-size: 15px;\n      line-height: 1.4;\n      color: var(--text-body);\n    }\n    .option .check {\n      flex-shrink: 0;\n      width: 20px; height: 20px;\n      border-radius: 4px;\n      border: 1.5px solid #D1D1DB;\n      background: transparent;\n      display: flex; align-items: center; justify-content: center;\n    }\n    .option.selected {\n      background: var(--bg-card-selected);\n      border-color: var(--brand-primary);\n    }\n    .option.selected .check {\n      border-color: var(--brand-primary);\n      background: var(--brand-primary);\n    }\n    .option.selected .check::after {\n      content: \"\";\n      width: 10px; height: 6px;\n      border-left: 2px solid #fff;\n      border-bottom: 2px solid #fff;\n      transform: rotate(-45deg) translate(1px, -1px);\n    }\n\n    .footer {\n      padding: 16px 20px calc(20px + env(safe-area-inset-bottom)) 20px;\n      flex-shrink: 0;\n    }\n    .cta {\n      width: 100%; height: 56px;\n      border: none; border-radius: 100px;\n      background: var(--brand-primary);\n      color: #FFFFFF;\n      font-family: inherit; font-weight: 500; font-size: 16px;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .cta:disabled { opacity: 0.4; cursor: not-allowed; }\n    .cta:not(:disabled):active { opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" data-testid=\"screen-root\">\n    <div class=\"topbar\">\n      <button class=\"back-btn\" id=\"back_button\" data-testid=\"back-button\" aria-label=\"Back\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M19 12H5M5 12l7-7M5 12l7 7\" stroke=\"#241E32\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"progress\" aria-label=\"Step 5 of 8\">\n        <div class=\"progress-fill\" id=\"progress_fill\"></div>\n      </div>\n      <div class=\"step-counter\" id=\"step_counter\">5/8</div>\n    </div>\n\n    <div class=\"content\">\n      <div class=\"eyebrow\" id=\"eyebrow_label\">REALITY CHECK</div>\n      <h1 class=\"title\" id=\"title_label\">How often do you think “I have nothing to wear”?</h1>\n      <div class=\"options\" id=\"options_list\" data-testid=\"options-list\"></div>\n    </div>\n\n    <div class=\"footer\">\n      <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\" disabled>\n        <span id=\"cta_label\">Continue</span>\n      </button>\n    </div>\n  </div>\n\n  <script>\n    var VARIABLE_ID = 'nothing_to_wear_freq';\n    var SECTION_LABEL = 'nothing_to_wear_options';\n\n    var FALLBACK_ITEMS = [\n      { id: 'daily',      emoji: '😫', title: 'Almost everyday' },\n      { id: 'few_weekly', emoji: '😕', title: 'A few times a week' },\n      { id: 'weekly',     emoji: '🤔', title: 'Once a week or so' },\n      { id: 'rarely',     emoji: '😌', title: 'Rarely but I still overthink it' }\n    ];\n    var EMOJI_BY_ID = FALLBACK_ITEMS.reduce(function (acc, it) { acc[it.id] = it.emoji; return acc; }, {});\n\n    var state = { items: FALLBACK_ITEMS.slice(), selectedId: null, sdk: null };\n\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n\n    function readItems(sdk) {\n      try {\n        var section = sdk.getChildSection(SECTION_LABEL);\n        var items = section && Array.isArray(section.items) ? section.items : null;\n        if (!items || !items.length) return null;\n        return items.map(function (it) {\n          var id = it.variableValue || it.id;\n          return {\n            id: id,\n            emoji: it.icon || EMOJI_BY_ID[id] || '•',\n            title: (it.title && (it.title.title || it.title)) || it.label || ''\n          };\n        });\n      } catch (e) { return null; }\n    }\n\n    function renderOptions() {\n      var list = document.getElementById('options_list');\n      list.innerHTML = '';\n      state.items.forEach(function (item) {\n        var isSelected = state.selectedId === item.id;\n        var row = document.createElement('div');\n        row.className = 'option' + (isSelected ? ' selected' : '');\n        row.setAttribute('data-id', item.id);\n        row.setAttribute('data-testid', 'option-' + item.id);\n        row.setAttribute('role', 'radio');\n        row.setAttribute('aria-checked', isSelected ? 'true' : 'false');\n        row.innerHTML =\n          '<div class=\"emoji\" aria-hidden=\"true\"></div>' +\n          '<div class=\"label\"></div>' +\n          '<div class=\"check\" aria-hidden=\"true\"></div>';\n        row.querySelector('.emoji').textContent = item.emoji;\n        row.querySelector('.label').textContent = item.title;\n        row.addEventListener('click', function () { selectOption(item.id); });\n        list.appendChild(row);\n      });\n      document.getElementById('cta_button').disabled = !state.selectedId;\n    }\n\n    function selectOption(id) {\n      state.selectedId = id;\n      renderOptions();\n    }\n\n    function bindBack(sdk) {\n      document.getElementById('back_button').addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        try { sdk.navigateBack(); } catch (err) { console.error('navigateBack failed', err); }\n      });\n    }\n\n    function bindCta(sdk) {\n      var btn = document.getElementById('cta_button');\n      var advanced = false;\n      btn.addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        if (advanced || !state.selectedId) return;\n        advanced = true;\n        try { sdk.setVariable(VARIABLE_ID, state.selectedId); } catch (err) { console.error('setVariable failed', err); }\n        try { sdk.navigateNext(); } catch (err) {\n          advanced = false;\n          console.error('navigateNext failed', err);\n        }\n      });\n    }\n\n    function init(sdk) {\n      state.sdk = sdk;\n\n      document.getElementById('eyebrow_label').textContent = readText(sdk, 'eyebrow_label', 'REALITY CHECK');\n      document.getElementById('title_label').textContent = readText(sdk, 'title', 'How often do you think “I have nothing to wear”?');\n      document.getElementById('cta_label').textContent = readText(sdk, 'cta_label', 'Continue');\n\n      var items = readItems(sdk);\n      if (items && items.length) state.items = items;\n\n      try {\n        var current = sdk.getVariable(VARIABLE_ID);\n        if (current && state.items.some(function (i) { return i.id === current; })) {\n          state.selectedId = current;\n        }\n      } catch (e) { /* noop */ }\n\n      renderOptions();\n      bindBack(sdk);\n      bindCta(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n      renderOptions();\n    }\n  </script>\n</body>\n</html>\n","childSections":[{"kind":"Text","textContent":{"title":{"translations":{"en-US":"REALITY CHECK"},"kind":"static","appearance":{}}},"order":0,"id":"eyebrow_label","label":"eyebrow_label"},{"kind":"Text","textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"How often do you think “I have nothing to wear”?"}}},"order":1,"id":"title","label":"title"},{"order":2,"textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"Continue"}}},"kind":"Text","id":"cta_label","label":"cta_label"},{"optionsListContent":{"items":[{"variableValue":"daily","id":"daily","title":{"translations":{"en-US":"Almost everyday"},"kind":"static","appearance":{}}},{"variableValue":"few_weekly","title":{"translations":{"en-US":"A few times a week"},"appearance":{},"kind":"static"},"id":"few_weekly"},{"variableValue":"weekly","title":{"translations":{"en-US":"Once a week or so"},"appearance":{},"kind":"static"},"id":"weekly"},{"variableValue":"rarely","title":{"translations":{"en-US":"Rarely but I still overthink it"},"kind":"static","appearance":{}},"id":"rarely"}]},"id":"nothing_to_wear_options","label":"nothing_to_wear_options","kind":"SingleSelectionList","order":3}],"callback":{"action":{"edges":[{"conditions":[],"nextScreenId":"of-menopause-shopping","transitionKind":"push"}],"kind":"advance"}}},"offlineFirst":false},"order":6,"aiContent":{},"createdAt":"2026-06-15T11:55:31.132Z","screenType":"WebEmbed","tags":[],"aiMeta":{"generationTimestamp":"2026-06-15T11:55:31.132Z","generationModel":"manual-cli","iterationCount":1,"blockRole":"Nothing to wear","blockType":"WebEmbed","source":"segmently-cli"}},"of-menopause-outfit-ideas-statement":{"content":{"offlineFirst":false,"embed":{"callback":{"action":{"kind":"advance","edges":[{"nextScreenId":"of-menopause-experience-recap","transitionKind":"push","conditions":[]}]}},"childSections":[{"textContent":{"title":{"translations":{"en-US":"I’m looking for outfit ideas that work for the body I have today."},"kind":"static","appearance":{}}},"order":0,"kind":"Text","id":"title","label":"title"},{"id":"step_counter","label":"step_counter","textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"4/4"}}},"order":1,"kind":"Text"},{"order":2,"kind":"SingleSelectionList","label":"agreement_options","id":"agreement_options","optionsListContent":{"items":[{"variableValue":"agree","title":{"kind":"static","appearance":{},"translations":{"en-US":"Agree"}},"id":"agree"},{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Somewhat Agree"}},"id":"somewhat_agree","variableValue":"somewhat_agree"},{"id":"somewhat_disagree","title":{"translations":{"en-US":"Somewhat Disagree"},"kind":"static","appearance":{}},"variableValue":"somewhat_disagree"},{"variableValue":"disagree","id":"disagree","title":{"appearance":{},"kind":"static","translations":{"en-US":"Disagree"}}}]}}],"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>Statement</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=Google+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #1A1A1A;\n      --text-muted: rgba(0, 0, 0, 0.55);\n      --card-bg: rgba(255, 255, 255, 0.8);\n      --card-border: rgba(0, 0, 0, 0.1);\n      --card-bg-selected: #FEE1E6;\n      --card-border-selected: #FCD0DD;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #FFFCFD;\n    }\n    .screen {\n      position: relative;\n      width: 100%; height: 100vh; height: 100dvh;\n      display: flex; flex-direction: column;\n      background:\n        radial-gradient(110% 50% at 35% 55%, rgba(245, 50, 109, 0.30) 0%, rgba(245, 50, 109, 0.14) 28%, rgba(245, 50, 109, 0) 62%),\n        radial-gradient(85% 42% at 75% 62%, rgba(255, 180, 200, 0.38) 0%, rgba(255, 180, 200, 0) 70%),\n        linear-gradient(180deg, #FFFCFD 0%, #FFFCFD 100%);\n      overflow: hidden;\n      -webkit-tap-highlight-color: transparent;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .screen {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n      }\n    }\n    .topbar {\n      display: flex; align-items: center; justify-content: space-between;\n      padding: 16px 20px 8px 20px;\n      flex-shrink: 0;\n    }\n    .back-btn {\n      width: 40px; height: 40px;\n      display: flex; align-items: center; justify-content: center;\n      background: transparent; border: none; padding: 0; cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .step-counter {\n      font-weight: 500;\n      font-size: 14px;\n      line-height: 1.42;\n      letter-spacing: -0.16px;\n      color: var(--text-muted);\n    }\n    .content {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      padding: 24px 20px 24px 20px;\n      min-height: 0;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      -webkit-overflow-scrolling: touch;\n    }\n    .title {\n      margin: 0 auto 24px auto;\n      font-weight: 700;\n      font-size: 24px;\n      line-height: 1.33;\n      letter-spacing: -0.15px;\n      color: var(--text-dark);\n      text-align: center;\n      max-width: 340px;\n    }\n    .options { display: flex; flex-direction: column; gap: 12px; }\n    .option {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 64px;\n      padding: 16px;\n      background: var(--card-bg);\n      border: 1px solid var(--card-border);\n      border-radius: 14px;\n      cursor: pointer;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n      transition: background-color 120ms ease, border-color 120ms ease;\n    }\n    .option .label {\n      font-size: 16px;\n      font-weight: 500;\n      line-height: 1.5;\n      letter-spacing: -0.18px;\n      color: var(--text-dark);\n      text-align: center;\n    }\n    .option.selected {\n      background: var(--card-bg-selected);\n      border-color: var(--card-border-selected);\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" data-testid=\"screen-root\">\n    <div class=\"topbar\">\n      <button class=\"back-btn\" id=\"back_button\" data-testid=\"back-button\" aria-label=\"Back\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M15 18l-6-6 6-6\" stroke=\"#1A1A1A\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n      <span class=\"step-counter\" id=\"step_counter\">4/4</span>\n    </div>\n\n    <div class=\"content\">\n      <h1 class=\"title\" id=\"title_label\">I’m looking for outfit ideas that work for the body I have today.</h1>\n      <div class=\"options\" id=\"options_list\" data-testid=\"options-list\"></div>\n    </div>\n  </div>\n\n  <script>\n    var VARIABLE_ID = 'outfit_ideas_agreement';\n    var SECTION_LABEL = 'agreement_options';\n\n    var FALLBACK_ITEMS = [\n      { id: 'agree',              title: 'Agree' },\n      { id: 'somewhat_agree',     title: 'Somewhat Agree' },\n      { id: 'somewhat_disagree',  title: 'Somewhat Disagree' },\n      { id: 'disagree',           title: 'Disagree' }\n    ];\n\n    var state = { items: FALLBACK_ITEMS.slice(), selectedId: null, sdk: null, advanced: false };\n\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n\n    function readItems(sdk) {\n      try {\n        var section = sdk.getChildSection(SECTION_LABEL);\n        var items = section && Array.isArray(section.items) ? section.items : null;\n        if (!items || !items.length) return null;\n        return items.map(function (it) {\n          var id = it.variableValue || it.id;\n          var fallback = FALLBACK_ITEMS.filter(function (f) { return f.id === id; })[0] || {};\n          return {\n            id: id,\n            title: (it.title && (it.title.title || it.title)) || it.label || fallback.title || ''\n          };\n        });\n      } catch (e) { return null; }\n    }\n\n    function renderOptions() {\n      var list = document.getElementById('options_list');\n      list.innerHTML = '';\n      state.items.forEach(function (item) {\n        var row = document.createElement('div');\n        row.className = 'option' + (state.selectedId === item.id ? ' selected' : '');\n        row.setAttribute('data-id', item.id);\n        row.setAttribute('data-testid', 'option-' + item.id);\n        row.setAttribute('role', 'radio');\n        row.setAttribute('aria-checked', state.selectedId === item.id ? 'true' : 'false');\n        row.innerHTML = '<div class=\"label\"></div>';\n        row.querySelector('.label').textContent = item.title;\n        row.addEventListener('click', function () { selectOption(item.id); });\n        list.appendChild(row);\n      });\n    }\n\n    function advance(value) {\n      if (state.advanced) return;\n      state.advanced = true;\n      try { state.sdk && state.sdk.setVariable(VARIABLE_ID, value); } catch (err) { console.error('setVariable failed', err); }\n      try { state.sdk && state.sdk.navigateNext(); } catch (err) {\n        state.advanced = false;\n        console.error('navigateNext failed', err);\n      }\n    }\n\n    function selectOption(id) {\n      state.selectedId = id;\n      renderOptions();\n      setTimeout(function () { advance(id); }, 160);\n    }\n\n    function bindBack(sdk) {\n      document.getElementById('back_button').addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        try { sdk.navigateBack(); } catch (err) { console.error('navigateBack failed', err); }\n      });\n    }\n\n    function init(sdk) {\n      state.sdk = sdk;\n      document.getElementById('title_label').textContent = readText(sdk, 'title', 'I’m looking for outfit ideas that work for the body I have today.');\n      document.getElementById('step_counter').textContent = readText(sdk, 'step_counter', '4/4');\n\n      var items = readItems(sdk);\n      if (items && items.length) state.items = items;\n\n      try {\n        var current = sdk.getVariable(VARIABLE_ID);\n        if (current && state.items.some(function (i) { return i.id === current; })) {\n          state.selectedId = current;\n        }\n      } catch (e) { /* noop */ }\n\n      renderOptions();\n      bindBack(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n      renderOptions();\n    }\n  </script>\n</body>\n</html>\n"},"canvas":{"background":{"content":{"color":"#1a1a1a"},"kind":"solid"}},"animated":true},"order":6,"aiContent":{},"createdAt":"2026-06-18T08:12:08.494Z","name":"of-menopause-outfit-ideas-statement","position":{"x":-160,"y":368},"id":"of-menopause-outfit-ideas-statement","updatedAt":"2026-06-18T08:17:33.382Z","tags":[],"aiMeta":{"generationModel":"manual-cli","generationTimestamp":"2026-06-18T08:12:08.494Z","blockRole":"of-menopause-outfit-ideas-statement","blockType":"WebEmbed","iterationCount":1,"source":"segmently-cli"},"entityId":"of-menopause-outfit-ideas-statement","screenType":"WebEmbed"},"of-menopause-paywall":{"updatedAt":"2026-06-16T13:40:24.223Z","id":"of-menopause-paywall","name":"the-paywall-menopause","position":{"x":9168,"y":96},"createdAt":"2026-06-15T12:52:32.359Z","order":6,"aiContent":{},"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>Dress the body you have now</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=Google+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root, :host {\n      --brand-primary: #F5326D;\n      --brand-accent: #F20D55;\n      --brand-soft: #FCD0DD;\n      --text-dark: #1A1A1A;\n    }\n    * { box-sizing: border-box; }\n    :host {\n      display: block;\n      width: 100%;\n      height: 100vh;\n      height: 100dvh;\n      overflow: hidden;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    }\n    body, html {\n      margin: 0; padding: 0;\n      width: 100%;\n      height: 100vh;\n      height: 100dvh;\n      overflow: hidden;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #1F0303;\n    }\n    .screen {\n      position: relative;\n      width: 100%;\n      height: 100vh;\n      height: 100dvh;\n      max-height: 100vh;\n      max-height: 100dvh;\n      display: flex; flex-direction: column;\n      overflow: hidden;\n      background: #1F0303;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    .hero {\n      position: absolute;\n      top: 0; left: 0; right: 0; bottom: 0;\n      z-index: 0;\n      overflow: hidden;\n      background: #1F0303;\n    }\n    .hero img {\n      position: absolute;\n      top: 0; left: 0;\n      width: 100%; height: 100%;\n      object-fit: cover;\n      object-position: center top;\n      display: block;\n    }\n    .hero::after {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(31,3,3,0.55) 70%, rgba(31,3,3,0.75) 100%);\n    }\n\n    .panel {\n      margin-top: auto;\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      display: flex; flex-direction: column;\n      align-items: center;\n      gap: 20px;\n      padding: 20px 20px calc(20px + env(safe-area-inset-bottom)) 20px;\n      border-top-left-radius: 16px;\n      border-top-right-radius: 16px;\n      filter: drop-shadow(0px -2px 4.5px rgba(206,206,206,0.15));\n    }\n\n    .heading {\n      width: 100%;\n      max-width: 345px;\n      text-align: center;\n      color: #FFFFFF;\n      font-weight: 700;\n      font-size: 36px;\n      line-height: 1.04;\n      letter-spacing: -0.0056em;\n      text-shadow: 0 2px 12px rgba(0,0,0,0.45);\n      margin: 0;\n    }\n\n    .rating { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: #FFFFFF; }\n    .stars { display: flex; gap: 1px; }\n    .star { width: 18px; height: 18px; flex-shrink: 0; }\n    .star svg { display: block; width: 100%; height: 100%; }\n    .dot { width: 3px; height: 3px; border-radius: 50%; background: #FFFFFF; flex-shrink: 0; }\n    .reviews { font-weight: 700; font-size: 16px; line-height: 24px; letter-spacing: -0.011em; }\n\n    .plans {\n      width: 100%; max-width: 362px;\n      display: flex; flex-direction: column;\n      gap: 16px;\n      position: relative;\n    }\n    .plan {\n      width: 100%;\n      min-height: 85px;\n      background: rgba(255, 255, 255, 0.7);\n      backdrop-filter: blur(8px);\n      -webkit-backdrop-filter: blur(8px);\n      border: 2px solid #FCD0DD;\n      border-radius: 14px;\n      padding: 20px 12px;\n      display: flex; align-items: center; justify-content: space-between;\n      gap: 12px;\n      position: relative;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .plan.selected { border-color: #F20D55; }\n    .plan-info { flex: 1 1 auto; min-width: 0; }\n    .plan-title { font-size: 16px; line-height: 22px; letter-spacing: -0.011em; color: #1A1A1A; font-weight: 600; }\n    .plan-desc { font-size: 13px; line-height: 18px; letter-spacing: -0.0114em; color: rgba(0, 0, 0, 0.75); }\n    .plan-desc-line { display: block; }\n    .price { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; text-align: right; }\n    .price-amount { font-weight: 700; font-size: 20px; line-height: 24px; letter-spacing: -0.005em; color: #F20D55; }\n    .price-freq { font-size: 13px; line-height: 16px; letter-spacing: -0.0114em; color: rgba(0, 0, 0, 0.70); }\n    .price-billed { font-size: 11px; line-height: 14px; letter-spacing: -0.0114em; color: rgba(0, 0, 0, 0.60); margin-top: 2px; }\n    .best-tag {\n      position: absolute;\n      top: 0;\n      left: 12px;\n      transform: translateY(-50%);\n      padding: 4px 12px;\n      background: linear-gradient(0deg, #F5326D 0%, #FFA2BE 100%);\n      border: 0.808px solid #FCD0DD;\n      border-radius: 100.986px;\n      color: #FFFFFF;\n      font-size: 12px; line-height: 18px;\n      font-weight: 500;\n      z-index: 2;\n      pointer-events: none;\n    }\n\n    .cta {\n      width: 100%;\n      max-width: 362px;\n      height: 56px;\n      padding: 0 24px;\n      margin: 0;\n      border: 1px solid #F5326D;\n      border-radius: 100px;\n      background: #F5326D;\n      background-color: #F5326D;\n      color: #FFFFFF;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n      font-weight: 500;\n      font-size: 16px;\n      line-height: 16px;\n      text-align: center;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      outline: none;\n      appearance: none;\n      -webkit-appearance: none;\n      -webkit-tap-highlight-color: transparent;\n      box-shadow: 0 6px 16px rgba(245, 50, 109, 0.35);\n    }\n    .cta:disabled { opacity: 0.5; cursor: not-allowed; }\n    .cta:not(:disabled):active { opacity: 0.9; }\n    .cta span { display: block; }\n\n    .disclaimer { width: 100%; text-align: center; color: #FFFFFF; font-size: 12px; line-height: 16px; }\n    .disclaimer a { color: #FFFFFF; font-weight: 700; text-decoration: none; }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" data-testid=\"screen-root\">\n    <div class=\"hero\">\n      <img id=\"hero_img\" alt=\"\" aria-hidden=\"true\" src=\"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615125226_of-menopause-paywall-hero-media/origin.png\">\n    </div>\n\n    <div class=\"panel\">\n      <h1 class=\"heading\" id=\"headline_label\">Dress the body<br>you have now</h1>\n\n      <div class=\"rating\">\n        <div class=\"stars\" aria-label=\"5 of 5 stars\">\n          <span class=\"star\"><svg viewBox=\"0 0 20 20\" fill=\"#FFD862\" xmlns=\"http://www.w3.org/2000/svg\"><polygon points=\"10,1.5 12.6,7.2 18.8,7.9 14.2,12.1 15.5,18.2 10,15.1 4.5,18.2 5.8,12.1 1.2,7.9 7.4,7.2\"/></svg></span>\n          <span class=\"star\"><svg viewBox=\"0 0 20 20\" fill=\"#FFD862\" xmlns=\"http://www.w3.org/2000/svg\"><polygon points=\"10,1.5 12.6,7.2 18.8,7.9 14.2,12.1 15.5,18.2 10,15.1 4.5,18.2 5.8,12.1 1.2,7.9 7.4,7.2\"/></svg></span>\n          <span class=\"star\"><svg viewBox=\"0 0 20 20\" fill=\"#FFD862\" xmlns=\"http://www.w3.org/2000/svg\"><polygon points=\"10,1.5 12.6,7.2 18.8,7.9 14.2,12.1 15.5,18.2 10,15.1 4.5,18.2 5.8,12.1 1.2,7.9 7.4,7.2\"/></svg></span>\n          <span class=\"star\"><svg viewBox=\"0 0 20 20\" fill=\"#FFD862\" xmlns=\"http://www.w3.org/2000/svg\"><polygon points=\"10,1.5 12.6,7.2 18.8,7.9 14.2,12.1 15.5,18.2 10,15.1 4.5,18.2 5.8,12.1 1.2,7.9 7.4,7.2\"/></svg></span>\n          <span class=\"star\"><svg viewBox=\"0 0 20 20\" fill=\"#FFD862\" xmlns=\"http://www.w3.org/2000/svg\"><polygon points=\"10,1.5 12.6,7.2 18.8,7.9 14.2,12.1 15.5,18.2 10,15.1 4.5,18.2 5.8,12.1 1.2,7.9 7.4,7.2\"/></svg></span>\n        </div>\n        <div class=\"dot\" aria-hidden=\"true\"></div>\n        <span class=\"reviews\" id=\"reviews_label\">16,000+ women</span>\n      </div>\n\n      <div class=\"plans\" id=\"plans_list\" data-testid=\"plans-list\">\n        <!-- plan cards rendered from ProductCatalog -->\n      </div>\n\n      <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\">\n        <span id=\"cta_label\">Start my 7 day trial</span>\n      </button>\n\n    </div>\n  </div>\n\n  <script>\n    // Plan copy keyed by catalog index. Item [0] in the ProductCatalog data\n    // source is the annual plan (also marked isDefault), item [1] is monthly.\n    // The runtime productId is resolved by the Segmently SDK (internal id,\n    // not the Stripe id we passed at catalog build time).\n    var COPY_BY_INDEX = [\n      { title: 'Annual Plan',  best: true,  interval: 'year',  hasTrial: true,  ctaLabel: 'Start my 7 day trial', fallbackAmount: 99, currency: 'USD' },\n      { title: 'Monthly Plan', best: false, interval: 'month', hasTrial: false, ctaLabel: 'Continue',              fallbackAmount: 19, currency: 'USD' }\n    ];\n\n    var state = { selectedId: null, sdk: null, products: [] };\n\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n    function readMediaUrl(sdk, label) {\n      try {\n        var m = sdk.getChildSectionMedia(label);\n        return (m && m.url) ? m.url : null;\n      } catch (e) { return null; }\n    }\n\n    function rawPrice(sdk, product, productId) {\n      // Try every place the price might live.\n      var candidates = [];\n      try { candidates.push(sdk && sdk.getProductPrice && sdk.getProductPrice(productId)); } catch (e) { /* noop */ }\n      if (product) {\n        candidates.push(product.price);\n        candidates.push(product.defaultPrice);\n        candidates.push(product.currentPrice);\n        if (Array.isArray(product.prices) && product.prices.length) {\n          candidates.push(product.prices[0]);\n        }\n        // Some product shapes expose amount/currency directly on the product itself.\n        if (product.amount !== undefined || product.unitAmount !== undefined || product.displayPrice) {\n          candidates.push({\n            amount: product.amount,\n            unitAmount: product.unitAmount,\n            currency: product.currency,\n            displayPrice: product.displayPrice,\n            interval: product.interval,\n            duration: product.duration\n          });\n        }\n      }\n      for (var i = 0; i < candidates.length; i += 1) {\n        var c = candidates[i];\n        if (!c) continue;\n        var hasAmount = c.amount !== undefined || c.unitAmount !== undefined || c.displayPrice;\n        if (hasAmount) return c;\n      }\n      return null;\n    }\n\n    function asDollars(amount) {\n      if (typeof amount !== 'number') return NaN;\n      // Heuristic: Stripe-style amounts are integer cents (e.g. 1900 = $19),\n      // floats are already dollars.\n      return Number.isInteger(amount) && Math.abs(amount) >= 100 ? amount / 100 : amount;\n    }\n\n    function fmtMoney(amount, currency, opts) {\n      if (!Number.isFinite(amount)) return '';\n      var trim = opts && opts.trim;\n      var isWhole = Math.abs(amount - Math.round(amount)) < 0.005;\n      var minDigits = (trim && isWhole) ? 0 : 2;\n      var maxDigits = (trim && isWhole) ? 0 : 2;\n      try {\n        return new Intl.NumberFormat('en-US', {\n          style: 'currency',\n          currency: (currency || 'USD').toUpperCase(),\n          minimumFractionDigits: minDigits,\n          maximumFractionDigits: maxDigits\n        }).format(amount);\n      } catch (e) {\n        return '$' + (minDigits ? amount.toFixed(2) : Math.round(amount));\n      }\n    }\n\n    function parsePriceFromDisplay(s) {\n      if (!s) return NaN;\n      var m = String(s).replace(/,/g, '').match(/-?\\d+(?:\\.\\d+)?/);\n      return m ? parseFloat(m[0]) : NaN;\n    }\n\n    // Returns { monthly: string, fullPeriod: string|null, interval: string }\n    // `forcedInterval` is the authoritative interval from COPY_BY_INDEX — the\n    // SDK's price.interval is unreliable (e.g. annual plan reported as 'month'\n    // when it has a trial-fee + recurring structure).\n    function derivePrice(price, forcedInterval) {\n      var interval = (forcedInterval || (price && (price.interval || price.duration)) || 'month').toLowerCase();\n      if (!price) return { monthly: '', fullPeriod: null, interval: interval };\n      var currency = price.currency || 'USD';\n\n      var raw = price.amount;\n      if (raw === undefined || raw === null) raw = price.unitAmount;\n      if (raw === undefined || raw === null) raw = parsePriceFromDisplay(price.displayPrice);\n      var dollars = asDollars(raw);\n\n      var monthly = '';\n      var fullPeriod = null;\n\n      if (interval === 'year' || interval === 'yearly' || interval === 'annual') {\n        var monthlyEq = Number.isFinite(dollars) ? dollars / 12 : NaN;\n        monthly = Number.isFinite(monthlyEq) ? fmtMoney(monthlyEq, currency) : (price.displayPrice || '');\n        fullPeriod = Number.isFinite(dollars) ? (fmtMoney(dollars, currency, { trim: true }) + '/year') : null;\n      } else {\n        monthly = Number.isFinite(dollars) ? fmtMoney(dollars, currency) : (price.displayPrice || '');\n        fullPeriod = null;\n      }\n      return { monthly: monthly, fullPeriod: fullPeriod, interval: interval };\n    }\n\n    function renderPlans() {\n      var list = document.getElementById('plans_list');\n      list.innerHTML = '';\n      state.products.forEach(function (product, index) {\n        var pid = product.productId || product.id;\n        var copy = COPY_BY_INDEX[index] || { title: product.name || ('Plan ' + (index + 1)), best: false, interval: 'month' };\n        var isSelected = state.selectedId === pid;\n\n        var card = document.createElement('div');\n        card.className = 'plan' + (isSelected ? ' selected' : '');\n        card.setAttribute('data-product-id', pid);\n        card.setAttribute('data-index', String(index));\n        card.setAttribute('data-testid', 'plan-' + index);\n        card.addEventListener('click', function () { choose(pid); });\n\n        if (copy.best) {\n          var tag = document.createElement('div');\n          tag.className = 'best-tag';\n          tag.id = 'best_tag_label';\n          tag.textContent = state.bestTagText || 'Best value';\n          card.appendChild(tag);\n        }\n\n        var price = rawPrice(state.sdk, product, pid);\n        if (!price && copy.fallbackAmount) {\n          price = { amount: copy.fallbackAmount, currency: copy.currency || 'USD' };\n        }\n        var derived = derivePrice(price, copy.interval);\n        var isAnnual = derived.interval === 'year' || derived.interval === 'yearly' || derived.interval === 'annual';\n\n        var info = document.createElement('div');\n        info.className = 'plan-info';\n        var descHtml;\n        if (isAnnual) {\n          var line2 = derived.fullPeriod\n            ? ('then ' + derived.fullPeriod)\n            : 'then';\n          descHtml =\n            '<span class=\"plan-desc-line\">7-Day Trial for $0.99</span>' +\n            '<span class=\"plan-desc-line\"></span>';\n          info.innerHTML = '<div class=\"plan-title\"></div><div class=\"plan-desc\">' + descHtml + '</div>';\n          info.querySelector('.plan-title').textContent = copy.title;\n          info.querySelectorAll('.plan-desc-line')[1].textContent = line2;\n        } else {\n          info.innerHTML = '<div class=\"plan-title\"></div><div class=\"plan-desc\"></div>';\n          info.querySelector('.plan-title').textContent = copy.title;\n          info.querySelector('.plan-desc').textContent = 'Billed monthly';\n        }\n\n        var priceEl = document.createElement('div');\n        priceEl.className = 'price';\n        priceEl.innerHTML =\n          '<div class=\"price-amount\"></div>' +\n          '<div class=\"price-freq\"></div>';\n        priceEl.querySelector('.price-amount').textContent = derived.monthly;\n        priceEl.querySelector('.price-freq').textContent = '/month';\n\n        card.appendChild(info);\n        card.appendChild(priceEl);\n        list.appendChild(card);\n      });\n    }\n\n    function selectedIndex() {\n      for (var i = 0; i < state.products.length; i += 1) {\n        var p = state.products[i];\n        if ((p.productId || p.id) === state.selectedId) return i;\n      }\n      return -1;\n    }\n\n    function updateCtaLabel() {\n      var idx = selectedIndex();\n      var copy = COPY_BY_INDEX[idx];\n      if (!copy || !copy.ctaLabel) return;\n      var el = document.getElementById('cta_label');\n      if (el) el.textContent = copy.ctaLabel;\n    }\n\n    function choose(productId) {\n      state.selectedId = productId;\n      try { state.sdk.selectProduct(productId); } catch (e) { /* noop */ }\n      renderPlans();\n      updateCtaLabel();\n    }\n\n    function applyContent(sdk) {\n      var setHtml = function (id, label, useHtml) {\n        var el = document.getElementById(id);\n        if (!el) return;\n        var v = readText(sdk, label, useHtml ? el.innerHTML : el.textContent);\n        if (useHtml) el.innerHTML = v; else el.textContent = v;\n      };\n      setHtml('headline_label', 'headline_label', true);\n      setHtml('reviews_label', 'reviews_label');\n      setHtml('cta_label', 'cta_label');\n      state.bestTagText = readText(sdk, 'best_tag_label', 'Best value');\n\n      var heroUrl = readMediaUrl(sdk, 'hero_media');\n      if (heroUrl) {\n        document.getElementById('hero_img').src = heroUrl;\n      }\n    }\n\n    function bindCta(sdk) {\n      var btn = document.getElementById('cta_button');\n      var inFlight = false;\n      btn.addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        if (inFlight || !state.selectedId) return;\n        inFlight = true;\n        btn.disabled = true;\n\n        var reset = function () {\n          inFlight = false;\n          btn.disabled = false;\n        };\n\n        try {\n          sdk.purchaseProduct(state.selectedId, {\n            onSuccess: function () {\n              try { sdk.navigateNext(); }\n              catch (err) { console.error('navigateNext failed', err); reset(); }\n            },\n            onCancel: function () { reset(); },\n            onError: function (err) {\n              console.warn('purchase failed', err);\n              reset();\n            }\n          });\n        } catch (err) {\n          console.warn('purchaseProduct threw', err);\n          reset();\n        }\n      });\n    }\n\n    function loadProducts(sdk) {\n      try {\n        var products = sdk && sdk.getProducts && sdk.getProducts();\n        if (Array.isArray(products) && products.length) return products;\n      } catch (e) { /* noop */ }\n      // Local-preview fallback (no SDK). Real runtime IDs are resolved by the platform.\n      return [\n        { productId: 'preview-annual',  name: 'Annual Plan' },\n        { productId: 'preview-monthly', name: 'Monthly Plan' }\n      ];\n    }\n\n    function init(sdk) {\n      state.sdk = sdk;\n      applyContent(sdk);\n      state.products = loadProducts(sdk);\n      // Annual is item [0] in the catalog (also marked isDefault). Pick whatever\n      // productId the SDK returned at that index.\n      var first = state.products[0];\n      state.selectedId = first ? (first.productId || first.id) : null;\n      try { if (state.selectedId) sdk.selectProduct(state.selectedId); } catch (e) { /* noop */ }\n      renderPlans();\n      updateCtaLabel();\n      bindCta(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n      state.bestTagText = 'Best value';\n      state.products = loadProducts(null);\n      renderPlans();\n    }\n  </script>\n</body>\n</html>\n","isIframe":false,"childSections":[{"textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Dress the body<br>you have now"}}},"order":0,"kind":"Text","label":"headline_label","id":"headline_label"},{"kind":"Text","order":1,"textContent":{"title":{"translations":{"en-US":"16,000+ women"},"appearance":{},"kind":"static"}},"id":"reviews_label","label":"reviews_label"},{"id":"best_tag_label","label":"best_tag_label","textContent":{"title":{"translations":{"en-US":"Best value"},"appearance":{},"kind":"static"}},"order":2,"kind":"Text"},{"kind":"Text","textContent":{"title":{"translations":{"en-US":"Start my 7 days trial"},"kind":"static","appearance":{}}},"order":3,"id":"cta_label","label":"cta_label"},{"id":"hero_media","label":"hero_media","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615125226_of-menopause-paywall-hero-media/origin.png","small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615125226_of-menopause-paywall-hero-media/small.png"}}}},"kind":"Image"},"order":4,"kind":"Media"},{"id":"paywall_products","label":"paywall_products","productCatalogContent":{"items":[{"isSelected":true,"id":"annual","productId":"JwUcG8RG2G9FVukNJeiW","isDefault":true},{"id":"monthly","productId":"SzkZ8ucbr7iASF4921YG"}]},"kind":"ProductCatalog","order":5}],"callback":{"action":{"kind":"advance","edges":[{"nextScreenId":"761ce148-2907-42e3-9bb2-f795ecc0e8c0","transitionKind":"push","conditions":[]}]}}},"offlineFirst":false,"animated":true,"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}}},"screenType":"WebEmbed","aiMeta":{"source":"segmently-cli","blockType":"WebEmbed","iterationCount":1,"blockRole":"Paywall (visual)","generationModel":"manual-cli","generationTimestamp":"2026-06-15T12:52:32.359Z"},"tags":[]},"of-menopause-routine":{"tags":[],"aiMeta":{"generationModel":"manual-cli","generationTimestamp":"2026-06-15T12:22:47.597Z","source":"segmently-cli","iterationCount":1,"blockRole":"Routine type","blockType":"WebEmbed"},"screenType":"WebEmbed","content":{"embed":{"isIframe":true,"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 challenge</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=Google+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #241E32;\n      --text-body: #383751;\n      --text-muted: #6B7280;\n      --border-default: #E5E5EA;\n      --bg-card: #FFFFFF;\n      --bg-card-selected: #FFF6F9;\n      --progress-track: #FCE7EE;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #FFFFFF;\n    }\n    .screen {\n      position: relative;\n      width: 100%; height: 100%; min-height: 100vh;\n      display: flex; flex-direction: column;\n      background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 60%, #FFE4EE 100%);\n      overflow: hidden;\n      -webkit-tap-highlight-color: transparent;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .screen {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n      }\n    }\n    .topbar {\n      display: flex; align-items: center; gap: 12px;\n      padding: 16px 20px 8px 20px;\n      flex-shrink: 0;\n    }\n    .back-btn {\n      width: 24px; height: 24px;\n      display: flex; align-items: center; justify-content: center;\n      background: transparent; border: none; padding: 0; cursor: pointer;\n      flex-shrink: 0;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .progress {\n      flex: 1 1 auto;\n      height: 6px;\n      background: var(--progress-track);\n      border-radius: 999px;\n      overflow: hidden;\n    }\n    .progress-fill {\n      height: 100%;\n      width: 87.5%;\n      background: var(--brand-primary);\n      border-radius: 999px;\n      transition: width 200ms ease;\n    }\n    .step-counter {\n      flex-shrink: 0;\n      font-size: 14px;\n      color: var(--text-muted);\n      min-width: 24px;\n      text-align: right;\n    }\n\n    .content {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      padding: clamp(20px, 6vh, 80px) 20px 8px 20px;\n      min-height: 0;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      -webkit-overflow-scrolling: touch;\n    }\n    .eyebrow {\n      margin: 0 0 4px 0;\n      font-weight: 700;\n      font-size: 13px;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n      color: var(--brand-primary);\n    }\n    .title {\n      margin: 0 0 24px 0;\n      font-weight: 700;\n      font-size: 22px;\n      line-height: 1.2;\n      letter-spacing: -0.01em;\n      color: var(--text-dark);\n    }\n    .options { display: flex; flex-direction: column; gap: 12px; }\n    .option {\n      display: flex; align-items: center; gap: 14px;\n      min-height: 80px;\n      padding: 16px;\n      background: var(--bg-card);\n      border: 1px solid var(--border-default);\n      border-radius: 16px;\n      cursor: pointer;\n      transition: background-color 120ms ease, border-color 120ms ease;\n    }\n    .option .emoji {\n      flex-shrink: 0;\n      font-size: 20px;\n      line-height: 1;\n      width: 26px; text-align: center;\n    }\n    .option .text {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      gap: 4px;\n      min-width: 0;\n    }\n    .option .label {\n      font-size: 15px;\n      font-weight: 500;\n      line-height: 1.27;\n      color: var(--text-dark);\n    }\n    .option .sublabel {\n      font-size: 13px;\n      line-height: 1.4;\n      color: var(--text-muted);\n    }\n    .option .radio {\n      flex-shrink: 0;\n      width: 20px; height: 20px;\n      border-radius: 4px;\n      border: 1.5px solid #D1D1DB;\n      background: transparent;\n      display: flex; align-items: center; justify-content: center;\n    }\n    .option.selected {\n      background: var(--bg-card-selected);\n      border-color: var(--brand-primary);\n    }\n    .option.selected .radio {\n      border-color: var(--brand-primary);\n      background: var(--brand-primary);\n    }\n    .option.selected .radio::after {\n      content: \"\";\n      width: 10px; height: 6px;\n      border-left: 2px solid #fff;\n      border-bottom: 2px solid #fff;\n      transform: rotate(-45deg) translate(1px, -1px);\n    }\n\n    .footer {\n      padding: 16px 20px calc(20px + env(safe-area-inset-bottom)) 20px;\n      flex-shrink: 0;\n    }\n    .cta {\n      width: 100%; height: 56px;\n      border: none; border-radius: 100px;\n      background: var(--brand-primary);\n      color: #FFFFFF;\n      font-family: inherit; font-weight: 500; font-size: 16px;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .cta:disabled { opacity: 0.4; cursor: not-allowed; }\n    .cta:not(:disabled):active { opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" data-testid=\"screen-root\">\n    <div class=\"topbar\">\n      <button class=\"back-btn\" id=\"back_button\" data-testid=\"back-button\" aria-label=\"Back\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M19 12H5M5 12l7-7M5 12l7 7\" stroke=\"#241E32\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"progress\" aria-label=\"Step 7 of 8\">\n        <div class=\"progress-fill\" id=\"progress_fill\"></div>\n      </div>\n      <div class=\"step-counter\" id=\"step_counter\">7/8</div>\n    </div>\n\n    <div class=\"content\">\n      <div class=\"eyebrow\" id=\"eyebrow_label\">YOUR ROUTINE</div>\n      <h1 class=\"title\" id=\"title_label\">What does your typical day look like?</h1>\n      <div class=\"options\" id=\"options_list\" data-testid=\"options-list\"></div>\n    </div>\n\n    <div class=\"footer\">\n      <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\" disabled>\n        <span id=\"cta_label\">Continue</span>\n      </button>\n    </div>\n  </div>\n\n  <script>\n    var VARIABLE_ID = 'routine_type';\n    var SECTION_LABEL = 'routine_options';\n\n    var FALLBACK_ITEMS = [\n      { id: 'casual',  emoji: '🏠', title: 'Mostly Casual',             subtitle: 'Home, errands, school runs' },\n      { id: 'work',    emoji: '💼', title: 'Mostly work',               subtitle: 'Office, meetings, professional settings' },\n      { id: 'mix',     emoji: '🔄', title: 'A mix of both',             subtitle: 'Some work days, some casual' },\n      { id: 'variety', emoji: '🌟', title: 'Always something different', subtitle: 'Events, travel, variety' }\n    ];\n    var META_BY_ID = FALLBACK_ITEMS.reduce(function (acc, it) { acc[it.id] = it; return acc; }, {});\n\n    var state = { items: FALLBACK_ITEMS.slice(), selectedId: null, sdk: null };\n\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n\n    function readItems(sdk) {\n      try {\n        var section = sdk.getChildSection(SECTION_LABEL);\n        var items = section && Array.isArray(section.items) ? section.items : null;\n        if (!items || !items.length) return null;\n        return items.map(function (it) {\n          var id = it.variableValue || it.id;\n          var meta = META_BY_ID[id] || {};\n          return {\n            id: id,\n            emoji: it.icon || meta.emoji || '•',\n            title: (it.title && (it.title.title || it.title)) || it.label || meta.title || '',\n            subtitle: (it.subtitle && (it.subtitle.title || it.subtitle)) || meta.subtitle || ''\n          };\n        });\n      } catch (e) { return null; }\n    }\n\n    function renderOptions() {\n      var list = document.getElementById('options_list');\n      list.innerHTML = '';\n      state.items.forEach(function (item) {\n        var isSelected = state.selectedId === item.id;\n        var row = document.createElement('div');\n        row.className = 'option' + (isSelected ? ' selected' : '');\n        row.setAttribute('data-id', item.id);\n        row.setAttribute('data-testid', 'option-' + item.id);\n        row.setAttribute('role', 'radio');\n        row.setAttribute('aria-checked', isSelected ? 'true' : 'false');\n        row.innerHTML =\n          '<div class=\"emoji\" aria-hidden=\"true\"></div>' +\n          '<div class=\"text\"><div class=\"label\"></div><div class=\"sublabel\"></div></div>' +\n          '<div class=\"radio\" aria-hidden=\"true\"></div>';\n        row.querySelector('.emoji').textContent = item.emoji;\n        row.querySelector('.label').textContent = item.title;\n        row.querySelector('.sublabel').textContent = item.subtitle;\n        row.addEventListener('click', function () { selectOption(item.id); });\n        list.appendChild(row);\n      });\n      document.getElementById('cta_button').disabled = !state.selectedId;\n    }\n\n    function selectOption(id) {\n      state.selectedId = id;\n      renderOptions();\n    }\n\n    function bindBack(sdk) {\n      document.getElementById('back_button').addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        try { sdk.navigateBack(); } catch (err) { console.error('navigateBack failed', err); }\n      });\n    }\n\n    function bindCta(sdk) {\n      var btn = document.getElementById('cta_button');\n      var advanced = false;\n      btn.addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        if (advanced || !state.selectedId) return;\n        advanced = true;\n        try { sdk.setVariable(VARIABLE_ID, state.selectedId); } catch (err) { console.error('setVariable failed', err); }\n        try { sdk.navigateNext(); } catch (err) {\n          advanced = false;\n          console.error('navigateNext failed', err);\n        }\n      });\n    }\n\n    function init(sdk) {\n      state.sdk = sdk;\n\n      document.getElementById('eyebrow_label').textContent = readText(sdk, 'eyebrow_label', 'YOUR ROUTINE');\n      document.getElementById('title_label').textContent = readText(sdk, 'title', 'What does your typical day look like?');\n      document.getElementById('cta_label').textContent = readText(sdk, 'cta_label', 'Continue');\n\n      var items = readItems(sdk);\n      if (items && items.length) state.items = items;\n\n      try {\n        var current = sdk.getVariable(VARIABLE_ID);\n        if (current && state.items.some(function (i) { return i.id === current; })) {\n          state.selectedId = current;\n        }\n      } catch (e) { /* noop */ }\n\n      renderOptions();\n      bindBack(sdk);\n      bindCta(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n      renderOptions();\n    }\n  </script>\n</body>\n</html>\n","callback":{"action":{"edges":[{"nextScreenId":"of-menopause-feeling","transitionKind":"push","conditions":[]}],"kind":"advance"}},"childSections":[{"textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"YOUR ROUTINE"}}},"order":0,"kind":"Text","id":"eyebrow_label","label":"eyebrow_label"},{"id":"title","label":"title","textContent":{"title":{"translations":{"en-US":"What does your typical day look like?"},"appearance":{},"kind":"static"}},"order":1,"kind":"Text"},{"order":2,"textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Continue"}}},"kind":"Text","label":"cta_label","id":"cta_label"},{"id":"routine_options","label":"routine_options","optionsListContent":{"items":[{"variableValue":"casual","subtitle":{"translations":{"en-US":"Home, errands, school runs"},"kind":"static","appearance":{}},"id":"casual","title":{"appearance":{},"kind":"static","translations":{"en-US":"Mostly Casual"}}},{"id":"work","title":{"translations":{"en-US":"Mostly work"},"kind":"static","appearance":{}},"variableValue":"work","subtitle":{"kind":"static","appearance":{},"translations":{"en-US":"Office, meetings, professional settings"}}},{"variableValue":"mix","subtitle":{"kind":"static","appearance":{},"translations":{"en-US":"Some work days, some casual"}},"id":"mix","title":{"kind":"static","appearance":{},"translations":{"en-US":"A mix of both"}}},{"variableValue":"variety","subtitle":{"appearance":{},"kind":"static","translations":{"en-US":"Events, travel, variety"}},"id":"variety","title":{"kind":"static","appearance":{},"translations":{"en-US":"Always something different"}}}]},"order":3,"kind":"SingleSelectionList"}]},"offlineFirst":false,"animated":true,"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}}},"createdAt":"2026-06-15T12:22:47.597Z","aiContent":{},"order":6,"updatedAt":"2026-06-16T13:03:57.942Z","id":"of-menopause-routine","name":"Routine type","position":{"x":6240,"y":0}},"of-menopause-same-closet-intro":{"screenType":"WebEmbed","aiMeta":{"source":"segmently-cli","iterationCount":1,"blockType":"WebEmbed","blockRole":"of-menopause-same-closet-intro","generationModel":"manual-cli","generationTimestamp":"2026-06-18T08:27:47.778Z"},"tags":[],"updatedAt":"2026-06-18T09:00:37.843Z","id":"of-menopause-same-closet-intro","position":{"y":336,"x":880},"name":"of-menopause-same-closet-intro","createdAt":"2026-06-18T08:27:47.778Z","aiContent":{},"order":6,"content":{"embed":{"childSections":[{"order":0,"textContent":{"title":{"translations":{"en-US":"Styles made for your body today"},"appearance":{},"kind":"static"}},"kind":"Text","id":"subtitle","label":"subtitle"},{"kind":"Text","textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Get Started"}}},"order":1,"id":"cta_label","label":"cta_label"},{"kind":"Text","textContent":{"title":{"translations":{"en-US":"Secure & Personalized Plan"},"appearance":{},"kind":"static"}},"order":2,"label":"secure_label","id":"secure_label"},{"order":3,"kind":"Media","id":"logo_media","label":"logo_media","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095024_of-menopause-intro-logo-media/origin.svg","small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095024_of-menopause-intro-logo-media/small.svg"}}}},"kind":"Image"}},{"order":4,"kind":"Media","label":"hero_image","id":"hero_image","mediaContent":{"kind":"Image","content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260618082636_same-closet-hero/small.png","original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260618082636_same-closet-hero/origin.png"}}}}}}],"callback":{"action":{"kind":"advance","edges":[{"conditions":[],"transitionKind":"push","nextScreenId":"of-menopause-goals"}]}},"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>Same closet. Different body. New system.</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #1A1A1A;\n      --text-body: #363636;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #FFFFFF;\n    }\n    .screen {\n      position: relative;\n      width: 100%; height: 100vh; height: 100dvh;\n      display: flex; flex-direction: column;\n      background: linear-gradient(180deg, #FFF7F0 0%, #FFE4E6 45%, #FFD9E4 55%, #FFF1F2 75%, #FFFFFF 100%);\n      overflow: hidden;\n      -webkit-tap-highlight-color: transparent;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .screen {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n      }\n    }\n    .hero-bg {\n      position: absolute;\n      left: 0; right: 0;\n      top: 33%;\n      bottom: 0;\n      z-index: 1;\n      overflow: hidden;\n      pointer-events: none;\n      -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 96%, transparent 100%);\n              mask-image: linear-gradient(180deg, #000 0%, #000 96%, transparent 100%);\n    }\n    .hero-bg img {\n      position: absolute;\n      left: 50%;\n      top: 0;\n      transform: translateX(-50%);\n      width: 102%;\n      height: 100%;\n      object-fit: cover;\n      object-position: top center;\n    }\n    .hero-bg .hero-blur {\n      top: -20px;\n      height: calc(100% + 40px);\n      filter: blur(8px);\n      -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 65%, #000 75%, #000 100%);\n              mask-image: linear-gradient(180deg, transparent 0%, transparent 78%, #000 82%, #000 100%);\n    }\n    .topbar {\n      position: relative; z-index: 3;\n      padding: 40px 20px 0 20px;\n      display: flex; align-items: center; justify-content: center;\n      flex-shrink: 0;\n    }\n    .logo-wrap { \n      display: inline-flex; align-items: center; justify-content: center; }\n    .logo-wrap img {\n      display: block;\n      height: 22px;\n      width: auto;\n      aspect-ratio: 140.51 / 43.81;\n      object-fit: contain;\n    }\n    .content {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      align-items: center;\n      padding: calc(15vh - 57px) 20px 0 20px;\n      min-height: 0;\n      position: relative; z-index: 2;\n    }\n    .title {\n      margin: 0;\n      font-weight: 700;\n      font-size: 32px;\n      line-height: 1.31;\n      letter-spacing: -0.2px;\n      color: var(--text-dark);\n      text-align: center;\n      max-width: 320px;\n    }\n    .title > span {\n      display: block;\n    }\n    .title .accent {\n      color: var(--brand-primary);\n    }\n    .subtitle {\n      margin: 8px 0 0 0;\n      font-weight: 500;\n      font-size: 16px;\n      line-height: 1.32;\n      color: var(--text-body);\n      text-align: center;\n      max-width: 280px;\n    }\n    .footer {\n      position: relative; z-index: 3;\n      padding: 16px 20px calc(20px + env(safe-area-inset-bottom)) 20px;\n      flex-shrink: 0;\n      display: flex; flex-direction: column; align-items: center; gap: 12px;\n    }\n    .cta {\n      width: 100%; height: 56px;\n      max-width: 362px;\n      border: 1px solid var(--brand-primary);\n      border-radius: 100px;\n      background: var(--brand-primary);\n      color: #FFFFFF;\n      font-family: inherit; font-weight: 500; font-size: 16px;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      transition: opacity 120ms ease;\n    }\n    .cta:active { opacity: 0.9; }\n    .secure {\n      display: inline-flex; align-items: center; gap: 6px;\n      font-size: 12px;\n      line-height: 1.2;\n      color: #FFFFFF;\n      text-shadow: 0 1px 2px rgba(0,0,0,0.25);\n    }\n    .secure svg { display: block; }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" data-testid=\"screen-root\">\n    <div class=\"hero-bg\" aria-hidden=\"true\">\n      <img id=\"hero_image\" src=\"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260618082636_same-closet-hero/origin.png\" alt=\"\">\n      <img id=\"hero_image_blur\" class=\"hero-blur\" src=\"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260618082636_same-closet-hero/origin.png\" alt=\"\">\n    </div>\n\n    <div class=\"topbar\">\n      <div class=\"logo-wrap\" aria-label=\"Outfit Formulas\">\n        <img id=\"logo_img\" alt=\"Outfit Formulas\" src=\"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260613095024_of-menopause-intro-logo-media/origin.svg\">\n      </div>\n    </div>\n\n    <div class=\"content\">\n      <h1 class=\"title\" id=\"title_label\">\n        <span>Same closet. </span>\n        <span class=\"accent\">Different body. </span>\n        <span>New system.</span>\n      </h1>\n      <p class=\"subtitle\" id=\"subtitle_label\">Styles made for your body today</p>\n    </div>\n\n    <div class=\"footer\">\n      <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\">\n        <span id=\"cta_label\">Get Started</span>\n      </button>\n    </div>\n  </div>\n\n  <script>\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n\n    function readMedia(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSection(label);\n        var img = s && s.mediaContent && s.mediaContent.content && s.mediaContent.content.image;\n        var url = img && (img.original || img.normal || img.medium || img.small);\n        return url || fallback;\n      } catch (e) { return fallback; }\n    }\n\n    function bindCta(sdk) {\n      var btn = document.getElementById('cta_button');\n      var advanced = false;\n      btn.addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        if (advanced) return;\n        advanced = true;\n        try { sdk.navigateNext(); } catch (err) {\n          advanced = false;\n          console.error('navigateNext failed', err);\n        }\n      });\n    }\n\n    function init(sdk) {\n      document.getElementById('cta_label').textContent = readText(sdk, 'cta_label', 'Get Started');\n      document.getElementById('subtitle_label').textContent = readText(sdk, 'subtitle', 'Styles made for your body today');\n      var hero = readMedia(sdk, 'hero_image', null);\n      if (hero) {\n        document.getElementById('hero_image').src = hero;\n        document.getElementById('hero_image_blur').src = hero;\n      }\n      var logo = readMedia(sdk, 'logo_media', null);\n      if (logo) document.getElementById('logo_img').src = logo;\n      bindCta(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n    }\n  </script>\n</body>\n</html>\n"},"offlineFirst":false,"canvas":{"background":{"kind":"solid","content":{"color":"#1a1a1a"}}},"animated":true}},"of-menopause-savings":{"tags":[],"aiMeta":{"source":"segmently-cli","blockType":"WebEmbed","iterationCount":1,"blockRole":"Savings insight","generationTimestamp":"2026-06-15T12:03:37.579Z","generationModel":"manual-cli"},"screenType":"WebEmbed","content":{"offlineFirst":false,"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>You could save</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=Google+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #1A1A1A;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #FFFFFF;\n    }\n    .stage {\n      position: relative;\n      width: 100%;\n      height: 100vh;\n      height: 100dvh;\n      max-height: 100vh;\n      max-height: 100dvh;\n      display: flex; flex-direction: column;\n      padding: 0;\n      background: #FFFFFF;\n      overflow: hidden;\n      -webkit-tap-highlight-color: transparent;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .stage {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px;\n      }\n    }\n\n    .card {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      align-items: stretch;\n      padding: 0;\n      background: linear-gradient(187.86deg, #FFFFFF 24%, #FC8DAF 113%);\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n      text-align: center;\n      height: 100%;\n      min-height: 0;\n      overflow: hidden;\n      position: relative;\n    }\n    .card-head {\n      display: flex; flex-direction: column; align-items: center;\n      flex-shrink: 0;\n      padding-top: 56px;\n    }\n    .scroll-area {\n      flex: 1 1 auto;\n      min-height: 0;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      -webkit-overflow-scrolling: touch;\n      display: flex; flex-direction: column; align-items: center;\n      padding: 0 20px;\n    }\n    .scroll-area::after {\n      content: \"\";\n      display: block;\n      flex-shrink: 0;\n      width: 100%;\n      height: 140px;\n    }\n\n    .tag {\n      display: inline-flex;\n      align-items: center;\n      padding: 8px 16px;\n      background: #FFEEF3;\n      border: 0.808px solid #FCD0DD;\n      border-radius: 100px;\n      font-size: 14px;\n      line-height: 20px;\n      font-weight: 500;\n      color: rgba(0, 0, 0, 0.70);\n    }\n\n    .coin {\n      width: 52px;\n      height: auto;\n      margin: 24px 0 12px 0;\n    }\n\n    .eyebrow {\n      margin: 0 0 4px 0;\n      font-weight: 600;\n      font-size: 20px;\n      line-height: 24px;\n      letter-spacing: -0.005em;\n      color: var(--text-dark);\n    }\n    .stat {\n      margin: 4px 0 2px 0;\n      font-weight: 700;\n      font-size: 42px;\n      line-height: 1.1;\n      letter-spacing: -0.011em;\n      color: var(--brand-primary);\n    }\n    .stat-sub {\n      margin: 0 0 20px 0;\n      font-size: 14px;\n      line-height: 20px;\n      color: rgba(0, 0, 0, 0.65);\n    }\n    .lead {\n      margin: 0 0 20px 0;\n      font-size: 16px;\n      line-height: 24px;\n      letter-spacing: -0.011em;\n      color: var(--text-dark);\n      max-width: 320px;\n    }\n\n    .benefits {\n      width: 100%;\n      display: flex; flex-direction: column;\n      gap: 12px;\n      margin-bottom: 20px;\n    }\n    .benefit {\n      display: flex; align-items: center; gap: 16px;\n      padding: 14px 16px;\n      background: #FFFFFF;\n      border-radius: 16px;\n      text-align: left;\n    }\n    .benefit .check {\n      flex-shrink: 0;\n      width: 24px; height: 24px;\n      border-radius: 50%;\n      background: var(--brand-primary);\n      display: flex; align-items: center; justify-content: center;\n    }\n    .benefit .check::after {\n      content: \"\";\n      width: 12px; height: 7px;\n      border-left: 2px solid #fff;\n      border-bottom: 2px solid #fff;\n      transform: rotate(-45deg) translate(1px, -1px);\n    }\n    .benefit .text {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      gap: 2px;\n      min-width: 0;\n    }\n    .benefit .label {\n      font-size: 15px;\n      font-weight: 500;\n      line-height: 1.27;\n      color: var(--text-dark);\n    }\n    .benefit .sublabel {\n      font-size: 13px;\n      line-height: 1.4;\n      color: rgba(0, 0, 0, 0.65);\n    }\n\n    .footer {\n      width: 100%;\n      padding: 18px 20px calc(24px + env(safe-area-inset-bottom)) 20px;\n      position: absolute;\n      left: 0; right: 0; bottom: 0;\n      z-index: 3;\n      background:\n        linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 240, 246, 0.55) 35%, rgba(255, 232, 240, 0.78) 100%),\n        radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 60%, rgba(255, 255, 255, 0) 100%);\n      backdrop-filter: blur(22px) saturate(160%);\n      -webkit-backdrop-filter: blur(22px) saturate(160%);\n      box-shadow:\n        inset 0 -0.5px 0 rgba(255, 200, 215, 0.35),\n        0 -8px 24px -8px rgba(245, 50, 109, 0.18);\n    }\n    .cta {\n      width: 100%; height: 56px;\n      border: none; border-radius: 100px;\n      background: var(--brand-primary);\n      color: #FFFFFF;\n      font-family: inherit; font-weight: 500; font-size: 16px;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .cta:active { opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div class=\"stage\" data-testid=\"screen-root\">\n    <div class=\"card\" data-testid=\"savings-card\">\n      <div class=\"scroll-area\">\n        <div class=\"card-head\">\n          <div class=\"tag\" id=\"tag_label\">Based on what you told us</div>\n\n          <img class=\"coin\" id=\"coin_img\" alt=\"\" aria-hidden=\"true\">\n\n          <div class=\"eyebrow\" id=\"eyebrow_label\">YOU COULD SAVE</div>\n          <div class=\"stat\" id=\"stat_label\">$200–$400</div>\n          <div class=\"stat-sub\" id=\"stat_sub_label\">Every year</div>\n        </div>\n\n        <p class=\"lead\" id=\"lead_label\">Introducing a system eliminates all three.</p>\n        <div class=\"benefits\" id=\"benefits_list\" data-testid=\"benefits-list\"></div>\n      </div>\n\n      <div class=\"footer\">\n        <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\">\n          <span id=\"cta_label\">Show me how</span>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <script>\n    var SECTION_LABEL = 'savings_benefits';\n\n    var FALLBACK_ITEMS = [\n      { id: 'fewer_duplicates',   title: 'Fewer duplicates',     subtitle: 'Stop re-buying what you already own' },\n      { id: 'no_panic_purchases', title: 'No panic purchases',   subtitle: 'No more last-minute rush buys' },\n      { id: 'higher_cost_per_wear', title: 'Higher cost-per-wear', subtitle: 'Get more wear from every piece' }\n    ];\n    var META_BY_ID = FALLBACK_ITEMS.reduce(function (acc, it) { acc[it.id] = it; return acc; }, {});\n\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n    function readMediaUrl(sdk, label) {\n      try {\n        var m = sdk.getChildSectionMedia(label);\n        return (m && m.url) ? m.url : null;\n      } catch (e) { return null; }\n    }\n    function readItems(sdk) {\n      try {\n        var section = sdk.getChildSection(SECTION_LABEL);\n        var items = section && Array.isArray(section.items) ? section.items : null;\n        if (!items || !items.length) return null;\n        return items.map(function (it) {\n          var id = it.variableValue || it.id;\n          var meta = META_BY_ID[id] || {};\n          return {\n            id: id,\n            title: (it.title && (it.title.title || it.title)) || it.label || meta.title || '',\n            subtitle: (it.subtitle && (it.subtitle.title || it.subtitle)) || meta.subtitle || ''\n          };\n        });\n      } catch (e) { return null; }\n    }\n\n    function renderBenefits(items) {\n      var list = document.getElementById('benefits_list');\n      list.innerHTML = '';\n      items.forEach(function (item) {\n        var row = document.createElement('div');\n        row.className = 'benefit';\n        row.setAttribute('data-id', item.id);\n        row.innerHTML =\n          '<div class=\"check\" aria-hidden=\"true\"></div>' +\n          '<div class=\"text\"><div class=\"label\"></div><div class=\"sublabel\"></div></div>';\n        row.querySelector('.label').textContent = item.title;\n        row.querySelector('.sublabel').textContent = item.subtitle;\n        list.appendChild(row);\n      });\n    }\n\n    function applyContent(sdk) {\n      var setText = function (id, label) {\n        var el = document.getElementById(id);\n        el.textContent = readText(sdk, label, el.textContent);\n      };\n      setText('tag_label', 'tag_label');\n      setText('eyebrow_label', 'eyebrow_label');\n      setText('stat_label', 'stat_label');\n      setText('stat_sub_label', 'stat_sub_label');\n      setText('lead_label', 'lead_label');\n      setText('cta_label', 'cta_label');\n\n      var coinUrl = readMediaUrl(sdk, 'coin_media');\n      document.getElementById('coin_img').src = coinUrl || '../assets/coin.png';\n\n      var items = readItems(sdk) || FALLBACK_ITEMS;\n      renderBenefits(items);\n    }\n\n    function bindCta(sdk) {\n      var btn = document.getElementById('cta_button');\n      var advanced = false;\n      btn.addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        if (advanced) return;\n        advanced = true;\n        try { sdk.navigateNext(); } catch (err) {\n          advanced = false;\n          console.error('navigateNext failed', err);\n        }\n      });\n    }\n\n    function init(sdk) {\n      applyContent(sdk);\n      bindCta(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n      renderBenefits(FALLBACK_ITEMS);\n    }\n  </script>\n</body>\n</html>\n","isIframe":true,"callback":{"action":{"edges":[{"conditions":[],"nextScreenId":"of-menopause-three-steps","transitionKind":"push"}],"kind":"advance"}},"childSections":[{"textContent":{"title":{"translations":{"en-US":"Based on what you told us"},"appearance":{},"kind":"static"}},"order":0,"kind":"Text","label":"tag_label","id":"tag_label"},{"kind":"Text","order":1,"textContent":{"title":{"translations":{"en-US":"YOU COULD SAVE"},"kind":"static","appearance":{}}},"id":"eyebrow_label","label":"eyebrow_label"},{"id":"stat_label","label":"stat_label","textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"$200–$400"}}},"order":2,"kind":"Text"},{"order":3,"textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"Every year"}}},"kind":"Text","id":"stat_sub_label","label":"stat_sub_label"},{"kind":"Text","textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"Introducing a system eliminates all three."}}},"order":4,"label":"lead_label","id":"lead_label"},{"kind":"Text","order":5,"textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"Show me how"}}},"id":"cta_label","label":"cta_label"},{"order":6,"kind":"Media","label":"coin_media","id":"coin_media","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615120335_of-menopause-savings-coin-media/origin.png","small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615120335_of-menopause-savings-coin-media/small.png"}}}},"kind":"Image"}},{"kind":"BulletList","order":7,"optionsListContent":{"items":[{"subtitle":{"appearance":{},"kind":"static","translations":{"en-US":"Stop re-buying what you already own"}},"variableValue":"fewer_duplicates","title":{"kind":"static","appearance":{},"translations":{"en-US":"Fewer duplicates"}},"id":"fewer_duplicates"},{"id":"no_panic_purchases","title":{"translations":{"en-US":"No panic purchases"},"kind":"static","appearance":{}},"variableValue":"no_panic_purchases","subtitle":{"translations":{"en-US":"No more last-minute rush buys"},"kind":"static","appearance":{}}},{"id":"higher_cost_per_wear","title":{"appearance":{},"kind":"static","translations":{"en-US":"Higher cost-per-wear"}},"variableValue":"higher_cost_per_wear","subtitle":{"appearance":{},"kind":"static","translations":{"en-US":"Get more wear from every piece"}}}]},"label":"savings_benefits","id":"savings_benefits"}]},"animated":true,"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}}},"createdAt":"2026-06-15T12:03:37.579Z","order":6,"aiContent":{},"updatedAt":"2026-06-17T07:35:43.384Z","position":{"y":0,"x":5280},"id":"of-menopause-savings","name":"Savings insight"},"of-menopause-shopping":{"updatedAt":"2026-06-16T13:03:59.553Z","id":"of-menopause-shopping","name":"Shopping habits","position":{"x":4800,"y":0},"createdAt":"2026-06-15T12:00:36.578Z","aiContent":{},"order":6,"content":{"offlineFirst":false,"embed":{"isIframe":true,"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 challenge</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=Google+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #241E32;\n      --text-body: #383751;\n      --text-muted: #6B7280;\n      --border-default: #E5E5EA;\n      --bg-card: #FFFFFF;\n      --bg-card-selected: #FFF6F9;\n      --progress-track: #FCE7EE;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #FFFFFF;\n    }\n    .screen {\n      position: relative;\n      width: 100%; height: 100%; min-height: 100vh;\n      display: flex; flex-direction: column;\n      background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 60%, #FFE4EE 100%);\n      overflow: hidden;\n      -webkit-tap-highlight-color: transparent;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .screen {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n      }\n    }\n    .topbar {\n      display: flex; align-items: center; gap: 12px;\n      padding: 16px 20px 8px 20px;\n      flex-shrink: 0;\n    }\n    .back-btn {\n      width: 24px; height: 24px;\n      display: flex; align-items: center; justify-content: center;\n      background: transparent; border: none; padding: 0; cursor: pointer;\n      flex-shrink: 0;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .progress {\n      flex: 1 1 auto;\n      height: 6px;\n      background: var(--progress-track);\n      border-radius: 999px;\n      overflow: hidden;\n    }\n    .progress-fill {\n      height: 100%;\n      width: 75%;\n      background: var(--brand-primary);\n      border-radius: 999px;\n      transition: width 200ms ease;\n    }\n    .step-counter {\n      flex-shrink: 0;\n      font-size: 14px;\n      color: var(--text-muted);\n      min-width: 24px;\n      text-align: right;\n    }\n\n    .content {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      padding: clamp(20px, 6vh, 80px) 20px 8px 20px;\n      min-height: 0;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      -webkit-overflow-scrolling: touch;\n    }\n    .eyebrow {\n      margin: 0 0 4px 0;\n      font-weight: 700;\n      font-size: 13px;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n      color: var(--brand-primary);\n    }\n    .title {\n      margin: 0 0 24px 0;\n      font-weight: 700;\n      font-size: 22px;\n      line-height: 1.2;\n      letter-spacing: -0.01em;\n      color: var(--text-dark);\n    }\n    .options { display: flex; flex-direction: column; gap: 12px; }\n    .option {\n      display: flex; align-items: center; gap: 14px;\n      min-height: 80px;\n      padding: 16px;\n      background: var(--bg-card);\n      border: 1px solid var(--border-default);\n      border-radius: 16px;\n      cursor: pointer;\n      transition: background-color 120ms ease, border-color 120ms ease;\n    }\n    .option .emoji {\n      flex-shrink: 0;\n      font-size: 20px;\n      line-height: 1;\n      width: 26px; text-align: center;\n    }\n    .option .text {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      gap: 4px;\n      min-width: 0;\n    }\n    .option .label {\n      font-size: 15px;\n      font-weight: 500;\n      line-height: 1.27;\n      color: var(--text-dark);\n    }\n    .option .sublabel {\n      font-size: 13px;\n      line-height: 1.4;\n      color: var(--text-muted);\n    }\n    .option .radio {\n      flex-shrink: 0;\n      width: 20px; height: 20px;\n      border-radius: 50%;\n      border: 1.5px solid #D1D1DB;\n      background: transparent;\n      display: flex; align-items: center; justify-content: center;\n    }\n    .option.selected {\n      background: var(--bg-card-selected);\n      border-color: var(--brand-primary);\n    }\n    .option.selected .radio {\n      border-color: var(--brand-primary);\n      background: var(--brand-primary);\n    }\n    .option.selected .radio::after {\n      content: \"\";\n      width: 10px; height: 6px;\n      border-left: 2px solid #fff;\n      border-bottom: 2px solid #fff;\n      transform: rotate(-45deg) translate(1px, -1px);\n    }\n\n    .footer {\n      padding: 16px 20px calc(20px + env(safe-area-inset-bottom)) 20px;\n      flex-shrink: 0;\n    }\n    .cta {\n      width: 100%; height: 56px;\n      border: none; border-radius: 100px;\n      background: var(--brand-primary);\n      color: #FFFFFF;\n      font-family: inherit; font-weight: 500; font-size: 16px;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .cta:disabled { opacity: 0.4; cursor: not-allowed; }\n    .cta:not(:disabled):active { opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" data-testid=\"screen-root\">\n    <div class=\"topbar\">\n      <button class=\"back-btn\" id=\"back_button\" data-testid=\"back-button\" aria-label=\"Back\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M19 12H5M5 12l7-7M5 12l7 7\" stroke=\"#241E32\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"progress\" aria-label=\"Step 6 of 8\">\n        <div class=\"progress-fill\" id=\"progress_fill\"></div>\n      </div>\n      <div class=\"step-counter\" id=\"step_counter\">6/8</div>\n    </div>\n\n    <div class=\"content\">\n      <div class=\"eyebrow\" id=\"eyebrow_label\">SHOPPING HABITS</div>\n      <h1 class=\"title\" id=\"title_label\">How would you describe your shopping habits?</h1>\n      <div class=\"options\" id=\"options_list\" data-testid=\"options-list\"></div>\n    </div>\n\n    <div class=\"footer\">\n      <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\" disabled>\n        <span id=\"cta_label\">Continue</span>\n      </button>\n    </div>\n  </div>\n\n  <script>\n    var VARIABLE_ID = 'shopping_habit';\n    var SECTION_LABEL = 'shopping_options';\n\n    var FALLBACK_ITEMS = [\n      { id: 'impulsive',    emoji: '⚡',  title: 'Mostly impulsive',     subtitle: 'I buy when I see something I like' },\n      { id: 'planned',      emoji: '🎯',  title: 'Mostly planned',       subtitle: 'I shop with something specific in mind' },\n      { id: 'event_driven', emoji: '✨',  title: 'Event driven',         subtitle: 'I usually buy for a specific occasion' },\n      { id: 'emotional',    emoji: '😔',  title: 'Emotional spending',   subtitle: \"I shop when I’m stressed or bored\" },\n      { id: 'no_pattern',   emoji: '🤷‍♀️', title: 'No pattern',           subtitle: 'I buy things randomly' }\n    ];\n    var META_BY_ID = FALLBACK_ITEMS.reduce(function (acc, it) { acc[it.id] = it; return acc; }, {});\n\n    var state = { items: FALLBACK_ITEMS.slice(), selectedId: null, sdk: null };\n\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n\n    function readItems(sdk) {\n      try {\n        var section = sdk.getChildSection(SECTION_LABEL);\n        var items = section && Array.isArray(section.items) ? section.items : null;\n        if (!items || !items.length) return null;\n        return items.map(function (it) {\n          var id = it.variableValue || it.id;\n          var meta = META_BY_ID[id] || {};\n          return {\n            id: id,\n            emoji: it.icon || meta.emoji || '•',\n            title: (it.title && (it.title.title || it.title)) || it.label || meta.title || '',\n            subtitle: (it.subtitle && (it.subtitle.title || it.subtitle)) || meta.subtitle || ''\n          };\n        });\n      } catch (e) { return null; }\n    }\n\n    function renderOptions() {\n      var list = document.getElementById('options_list');\n      list.innerHTML = '';\n      state.items.forEach(function (item) {\n        var isSelected = state.selectedId === item.id;\n        var row = document.createElement('div');\n        row.className = 'option' + (isSelected ? ' selected' : '');\n        row.setAttribute('data-id', item.id);\n        row.setAttribute('data-testid', 'option-' + item.id);\n        row.setAttribute('role', 'radio');\n        row.setAttribute('aria-checked', isSelected ? 'true' : 'false');\n        row.innerHTML =\n          '<div class=\"emoji\" aria-hidden=\"true\"></div>' +\n          '<div class=\"text\"><div class=\"label\"></div><div class=\"sublabel\"></div></div>' +\n          '<div class=\"radio\" aria-hidden=\"true\"></div>';\n        row.querySelector('.emoji').textContent = item.emoji;\n        row.querySelector('.label').textContent = item.title;\n        row.querySelector('.sublabel').textContent = item.subtitle;\n        row.addEventListener('click', function () { selectOption(item.id); });\n        list.appendChild(row);\n      });\n      document.getElementById('cta_button').disabled = !state.selectedId;\n    }\n\n    function selectOption(id) {\n      state.selectedId = id;\n      renderOptions();\n    }\n\n    function bindBack(sdk) {\n      document.getElementById('back_button').addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        try { sdk.navigateBack(); } catch (err) { console.error('navigateBack failed', err); }\n      });\n    }\n\n    function bindCta(sdk) {\n      var btn = document.getElementById('cta_button');\n      var advanced = false;\n      btn.addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        if (advanced || !state.selectedId) return;\n        advanced = true;\n        try { sdk.setVariable(VARIABLE_ID, state.selectedId); } catch (err) { console.error('setVariable failed', err); }\n        try { sdk.navigateNext(); } catch (err) {\n          advanced = false;\n          console.error('navigateNext failed', err);\n        }\n      });\n    }\n\n    function init(sdk) {\n      state.sdk = sdk;\n\n      document.getElementById('eyebrow_label').textContent = readText(sdk, 'eyebrow_label', 'SHOPPING HABITS');\n      document.getElementById('title_label').textContent = readText(sdk, 'title', 'How would you describe your shopping habits?');\n      document.getElementById('cta_label').textContent = readText(sdk, 'cta_label', 'Continue');\n\n      var items = readItems(sdk);\n      if (items && items.length) state.items = items;\n\n      try {\n        var current = sdk.getVariable(VARIABLE_ID);\n        if (current && state.items.some(function (i) { return i.id === current; })) {\n          state.selectedId = current;\n        }\n      } catch (e) { /* noop */ }\n\n      renderOptions();\n      bindBack(sdk);\n      bindCta(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n      renderOptions();\n    }\n  </script>\n</body>\n</html>\n","childSections":[{"kind":"Text","textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"SHOPPING HABITS"}}},"order":0,"id":"eyebrow_label","label":"eyebrow_label"},{"order":1,"textContent":{"title":{"translations":{"en-US":"How would you describe your shopping habits?"},"kind":"static","appearance":{}}},"kind":"Text","label":"title","id":"title"},{"id":"cta_label","label":"cta_label","textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"Continue"}}},"order":2,"kind":"Text"},{"id":"shopping_options","label":"shopping_options","optionsListContent":{"items":[{"title":{"kind":"static","appearance":{},"translations":{"en-US":"Mostly impulsive"}},"id":"impulsive","subtitle":{"kind":"static","appearance":{},"translations":{"en-US":"I buy when I see something I like"}},"variableValue":"impulsive"},{"id":"planned","title":{"translations":{"en-US":"Mostly planned"},"appearance":{},"kind":"static"},"variableValue":"planned","subtitle":{"kind":"static","appearance":{},"translations":{"en-US":"I shop with something specific in mind"}}},{"title":{"translations":{"en-US":"Event driven"},"appearance":{},"kind":"static"},"id":"event_driven","subtitle":{"translations":{"en-US":"I usually buy for a specific occasion"},"appearance":{},"kind":"static"},"variableValue":"event_driven"},{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Emotional spending"}},"id":"emotional","subtitle":{"translations":{"en-US":"I shop when I’m stressed or bored"},"appearance":{},"kind":"static"},"variableValue":"emotional"},{"title":{"appearance":{},"kind":"static","translations":{"en-US":"No pattern"}},"id":"no_pattern","subtitle":{"translations":{"en-US":"I buy things randomly"},"kind":"static","appearance":{}},"variableValue":"no_pattern"}]},"order":3,"kind":"SingleSelectionList"}],"callback":{"action":{"kind":"advance","edges":[{"nextScreenId":"of-menopause-savings","transitionKind":"push","conditions":[]}]}}},"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}},"animated":true},"screenType":"WebEmbed","aiMeta":{"generationTimestamp":"2026-06-15T12:00:36.578Z","generationModel":"manual-cli","source":"segmently-cli","iterationCount":1,"blockType":"WebEmbed","blockRole":"Shopping habits"},"tags":[]},"of-menopause-system-problem":{"screenType":"WebEmbed","tags":[],"aiMeta":{"blockRole":"System problem (branch)","iterationCount":1,"blockType":"WebEmbed","source":"segmently-cli","generationTimestamp":"2026-06-15T17:30:24.007Z","generationModel":"manual-cli"},"updatedAt":"2026-06-15T18:22:05.774Z","id":"of-menopause-system-problem","position":{"y":-1040,"x":784},"name":"System problem (branch)","content":{"animated":true,"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}},"embed":{"isIframe":true,"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>Same closet. Different body. New system.</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #000000;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #FFFFFF;\n    }\n    .screen {\n      position: relative;\n      width: 100%; height: 100%; min-height: 100vh;\n      display: flex; flex-direction: column;\n      background: #FFFFFF;\n      overflow: hidden;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .screen {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n      }\n    }\n    .bg-burst {\n      position: absolute;\n      top: 0; left: 0;\n      width: 100%;\n      height: auto;\n      display: block;\n      pointer-events: none;\n      z-index: 0;\n    }\n    .logo {\n      position: relative;\n      z-index: 1;\n      display: flex; justify-content: center;\n      padding: 60px 32px 0 32px;\n      flex-shrink: 0;\n    }\n    .logo img {\n      height: 44px;\n      width: auto;\n      aspect-ratio: 140.51 / 43.81;\n      object-fit: contain;\n      display: block;\n    }\n    .spacer { flex: 1 1 auto; }\n    .headline {\n      position: relative;\n      z-index: 1;\n      padding: 0 26px 32px 26px;\n      flex-shrink: 0;\n    }\n    .headline h1 {\n      margin: 0;\n      font-weight: 700;\n      font-size: 36px;\n      line-height: 1.16;\n      letter-spacing: -0.01em;\n      color: var(--text-dark);\n      text-align: left;\n    }\n    .headline h1 .accent { color: var(--brand-primary); }\n    .headline h1 .strike {\n      color: var(--brand-primary);\n      text-decoration: line-through;\n      text-decoration-thickness: 2.5px;\n      text-decoration-color: var(--brand-primary);\n    }\n    .footer {\n      position: relative;\n      z-index: 1;\n      padding: 0 20px calc(28px + env(safe-area-inset-bottom)) 20px;\n      flex-shrink: 0;\n    }\n    .cta {\n      width: 100%; height: 56px;\n      border: none; border-radius: 100px;\n      background: var(--brand-primary);\n      color: #FFFFFF;\n      font-family: inherit; font-weight: 500; font-size: 16px;\n      cursor: pointer;\n      pointer-events: none;\n      -webkit-tap-highlight-color: transparent;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" id=\"screen\" data-testid=\"screen-root\">\n    <img class=\"bg-burst\" id=\"bg_burst\" alt=\"\" aria-hidden=\"true\">\n    <div class=\"logo\">\n      <img id=\"logo_img\" alt=\"Logo\">\n    </div>\n    <div class=\"spacer\"></div>\n    <div class=\"headline\" data-testid=\"headline\">\n      <h1 id=\"title_label\">You don&rsquo;t have<br>a <span class=\"strike\">closet</span> problem.<br>You have a<br><span class=\"accent\">system</span> problem</h1>\n    </div>\n    <div class=\"footer\">\n      <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\" tabindex=\"-1\" aria-hidden=\"true\">\n        <span id=\"cta_label\">Get Started</span>\n      </button>\n    </div>\n  </div>\n\n  <script>\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n    function readMediaUrl(sdk, label) {\n      try {\n        var m = sdk.getChildSectionMedia(label);\n        return (m && m.url) ? m.url : null;\n      } catch (e) { return null; }\n    }\n\n    function applyContent(sdk) {\n      var ctaText = readText(sdk, 'cta_label', 'Get Started');\n      document.getElementById('cta_label').textContent = ctaText;\n\n      var logoUrl = readMediaUrl(sdk, 'logo_media');\n      if (logoUrl) document.getElementById('logo_img').src = logoUrl;\n\n      var burstUrl = readMediaUrl(sdk, 'burst_media');\n      if (burstUrl) document.getElementById('bg_burst').src = burstUrl;\n    }\n\n    function bindTap(sdk) {\n      var advanced = false;\n      var handler = function (e) {\n        if (advanced) return;\n        advanced = true;\n        e.preventDefault(); e.stopPropagation();\n        try { sdk.navigateNext(); } catch (err) {\n          advanced = false;\n          console.error('navigateNext failed', err);\n        }\n      };\n      document.getElementById('screen').addEventListener('click', handler);\n    }\n\n    function init(sdk) {\n      applyContent(sdk);\n      bindTap(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n    }\n  </script>\n</body>\n</html>\n","callback":{"action":{"edges":[{"transitionKind":"push","nextScreenId":"of-menopause-goals","conditions":[]}],"kind":"advance"}},"childSections":[{"id":"cta_label","label":"cta_label","order":0,"textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Get Started"}}},"kind":"Text"},{"order":1,"kind":"Media","label":"logo_media","id":"logo_media","mediaContent":{"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615071721_of-menopause-promise-logo-media/small.svg","original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615071721_of-menopause-promise-logo-media/origin.svg"}}}},"kind":"Image"}},{"label":"burst_media","id":"burst_media","mediaContent":{"content":{"image":{"translations":{"en-US":{"small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615071737_of-menopause-promise-burst-media/small.png","original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615071737_of-menopause-promise-burst-media/origin.png"}}}},"kind":"Image"},"order":2,"kind":"Media"}]},"offlineFirst":false},"createdAt":"2026-06-15T17:30:24.007Z","aiContent":{},"order":6},"of-menopause-three-steps":{"screenType":"WebEmbed","aiMeta":{"source":"segmently-cli","blockType":"WebEmbed","iterationCount":1,"blockRole":"Outfit Formula in 3 steps","generationModel":"manual-cli","generationTimestamp":"2026-06-15T12:12:06.238Z"},"tags":[],"id":"of-menopause-three-steps","name":"Outfit Formula in 3 steps","position":{"y":0,"x":5760},"updatedAt":"2026-06-15T12:22:50.810Z","aiContent":{},"order":6,"createdAt":"2026-06-15T12:12:06.238Z","content":{"animated":true,"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}},"offlineFirst":false,"embed":{"callback":{"action":{"kind":"advance","edges":[{"conditions":[],"transitionKind":"push","nextScreenId":"of-menopause-routine"}]}},"childSections":[{"order":0,"textContent":{"title":{"translations":{"en-US":"The System"},"appearance":{},"kind":"static"}},"kind":"Text","label":"tag_label","id":"tag_label"},{"kind":"Text","order":1,"textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"Outfit Formula in 3 steps"}}},"id":"title","label":"title"},{"label":"cta_label","id":"cta_label","kind":"Text","order":2,"textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Got it!"}}}},{"order":3,"textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Follow the formula"}}},"kind":"Text","label":"step_1_title","id":"step_1_title"},{"id":"step_1_sub","label":"step_1_sub","order":4,"textContent":{"title":{"translations":{"en-US":"Each day, you get a complete outfit structure. Like a recipe for getting dressed."},"kind":"static","appearance":{}}},"kind":"Text"},{"id":"step_2_title","label":"step_2_title","textContent":{"title":{"translations":{"en-US":"Make it yours"},"kind":"static","appearance":{}}},"order":5,"kind":"Text"},{"kind":"Text","order":6,"textContent":{"title":{"translations":{"en-US":"Swap in your own pieces. The formula is the pattern. Your closet fills it in."},"kind":"static","appearance":{}}},"label":"step_2_sub","id":"step_2_sub"},{"label":"step_3_title","id":"step_3_title","textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Build over time"}}},"order":7,"kind":"Text"},{"order":8,"textContent":{"title":{"translations":{"en-US":"Track what you wear, spot what’s missing, and build a wardrobe that actually works."},"kind":"static","appearance":{}}},"kind":"Text","id":"step_3_sub","label":"step_3_sub"}],"isIframe":true,"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>Outfit Formula in 3 steps</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=Google+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #1A1A1A;\n      --text-muted: #666666;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    }\n    .screen {\n      position: relative;\n      width: 100%; height: 100%; min-height: 100vh;\n      display: flex; flex-direction: column;\n      justify-content: space-between;\n      align-items: center;\n      background: linear-gradient(188.34deg, #FFFFFF 24%, #FC8DAF 113%);\n      padding: 66px 20px 46px 20px;\n      overflow: hidden;\n      -webkit-tap-highlight-color: transparent;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .screen {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px;\n      }\n    }\n\n    .header {\n      display: flex; flex-direction: column;\n      align-items: center;\n      gap: 24px;\n      flex-shrink: 0;\n    }\n    .tag {\n      display: inline-flex;\n      align-items: center;\n      padding: 8px 16px;\n      background: #FFEEF3;\n      border: 0.808px solid #FCD0DD;\n      border-radius: 100.986px;\n      font-size: 14px;\n      line-height: 20px;\n      font-weight: 500;\n      color: #000000;\n    }\n    .title {\n      margin: 0;\n      font-weight: 700;\n      font-size: 24px;\n      line-height: 32px;\n      letter-spacing: -0.00625em;\n      color: var(--text-dark);\n      text-align: center;\n    }\n\n    .steps-card {\n      width: 100%;\n      background: #FFFFFF;\n      border-radius: 24px;\n      padding: 36px 0;\n      filter: drop-shadow(0px 1px 3px rgba(0,0,0,0.06));\n      display: flex; flex-direction: column;\n      height: auto;\n      flex-shrink: 0;\n    }\n    .step {\n      display: flex; align-items: center;\n      gap: 16px;\n      padding: 0 16px;\n      min-height: 96px;\n      border-radius: 14px;\n      position: relative;\n    }\n    .step .num {\n      flex-shrink: 0;\n      width: 32px; height: 32px;\n      position: relative;\n      display: flex; align-items: center; justify-content: center;\n    }\n    .step .num .circle {\n      width: 22px; height: 22px;\n      border-radius: 50%;\n      background: linear-gradient(157deg, #F5326D 0%, #FA82A6 39.7%, #FFB6CC 61.5%, #F5326D 100%);\n      box-shadow:\n        inset 0 0.5px 1px rgba(255, 174, 199, 0.9),\n        inset 0 -0.5px 2px rgba(241, 114, 153, 0.9);\n      display: flex; align-items: center; justify-content: center;\n      color: #FFFFFF;\n      font-size: 12px;\n      font-weight: 600;\n      line-height: 1;\n      z-index: 1;\n    }\n    .step:not(:last-child)::after {\n      content: \"\";\n      position: absolute;\n      left: 32px;\n      top: calc(50% + 11px);\n      width: 1px;\n      height: calc(100% - 22px);\n      background-image: linear-gradient(to bottom, #FA85A8 50%, transparent 50%);\n      background-size: 1px 4px;\n      background-repeat: repeat-y;\n      transform: translateX(-50%);\n      pointer-events: none;\n    }\n    .step .text {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      gap: 8px;\n      min-width: 0;\n    }\n    .step .label {\n      font-weight: 700;\n      font-size: 20px;\n      line-height: 24px;\n      letter-spacing: -0.005em;\n      color: var(--text-dark);\n    }\n    .step .sublabel {\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 20px;\n      letter-spacing: -0.0114em;\n      color: var(--text-muted);\n    }\n\n    .footer {\n      width: 100%;\n      flex-shrink: 0;\n      display: flex; justify-content: center;\n    }\n    .cta {\n      width: 100%;\n      max-width: 362px;\n      height: 56px;\n      border: 1px solid var(--brand-primary);\n      border-radius: 100px;\n      background: var(--brand-primary);\n      color: #FFFFFF;\n      font-family: inherit; font-weight: 500; font-size: 16px;\n      line-height: 16px;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .cta:active { opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" data-testid=\"screen-root\">\n    <div class=\"header\">\n      <div class=\"tag\" id=\"tag_label\">The System</div>\n      <h1 class=\"title\" id=\"title_label\">Outfit Formula in 3 steps</h1>\n    </div>\n\n    <div class=\"steps-card\">\n      <div class=\"step\">\n        <div class=\"num\"><div class=\"circle\">1</div></div>\n        <div class=\"text\">\n          <div class=\"label\" id=\"step_1_title\">Follow the formula</div>\n          <div class=\"sublabel\" id=\"step_1_sub\">Each day, you get a complete outfit structure. Like a recipe for getting dressed.</div>\n        </div>\n      </div>\n      <div class=\"step\">\n        <div class=\"num\"><div class=\"circle\">2</div></div>\n        <div class=\"text\">\n          <div class=\"label\" id=\"step_2_title\">Make it yours</div>\n          <div class=\"sublabel\" id=\"step_2_sub\">Swap in your own pieces. The formula is the pattern. Your closet fills it in.</div>\n        </div>\n      </div>\n      <div class=\"step\">\n        <div class=\"num\"><div class=\"circle\">3</div></div>\n        <div class=\"text\">\n          <div class=\"label\" id=\"step_3_title\">Build over time</div>\n          <div class=\"sublabel\" id=\"step_3_sub\">Track what you wear, spot what’s missing, and build a wardrobe that actually works.</div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"footer\">\n      <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\">\n        <span id=\"cta_label\">Got it!</span>\n      </button>\n    </div>\n  </div>\n\n  <script>\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n\n    function applyContent(sdk) {\n      var setText = function (id, label) {\n        var el = document.getElementById(id);\n        el.textContent = readText(sdk, label, el.textContent);\n      };\n      setText('tag_label', 'tag_label');\n      setText('title_label', 'title');\n      setText('cta_label', 'cta_label');\n      setText('step_1_title', 'step_1_title');\n      setText('step_1_sub', 'step_1_sub');\n      setText('step_2_title', 'step_2_title');\n      setText('step_2_sub', 'step_2_sub');\n      setText('step_3_title', 'step_3_title');\n      setText('step_3_sub', 'step_3_sub');\n    }\n\n    function bindCta(sdk) {\n      var btn = document.getElementById('cta_button');\n      var advanced = false;\n      btn.addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        if (advanced) return;\n        advanced = true;\n        try { sdk.navigateNext(); } catch (err) {\n          advanced = false;\n          console.error('navigateNext failed', err);\n        }\n      });\n    }\n\n    function init(sdk) {\n      applyContent(sdk);\n      bindCta(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n    }\n  </script>\n</body>\n</html>\n"}}},"of-menopause-timeline":{"content":{"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}},"animated":true,"offlineFirst":false,"embed":{"childSections":[{"order":0,"textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"ALL YOU NEED IS"}}},"kind":"Text","label":"eyebrow_label","id":"eyebrow_label"},{"textContent":{"title":{"translations":{"en-US":"2 min/"},"kind":"static","appearance":{}}},"order":1,"kind":"Text","label":"stat_label","id":"stat_label"},{"label":"body_label","id":"body_label","kind":"Text","textContent":{"title":{"translations":{"en-US":"Open the app. See your outfit. Make it yours. That’s it. No styling degree required."},"appearance":{},"kind":"static"}},"order":2},{"kind":"Text","order":3,"textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"Create My Profile"}}},"label":"cta_label","id":"cta_label"},{"kind":"Text","textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"DAY 1"}}},"order":4,"label":"day_1_label","id":"day_1_label"},{"label":"day_1_what","id":"day_1_what","kind":"Text","textContent":{"title":{"translations":{"en-US":"Build your first outfit formula for this body"},"appearance":{},"kind":"static"}},"order":5},{"kind":"Text","order":6,"textContent":{"title":{"translations":{"en-US":"DAY 3"},"appearance":{},"kind":"static"}},"label":"day_2_label","id":"day_2_label"},{"id":"day_2_what","label":"day_2_what","kind":"Text","order":7,"textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Find the fabrics and silhouettes that actually work"}}}},{"kind":"Text","textContent":{"title":{"translations":{"en-US":"DAY 7"},"appearance":{},"kind":"static"}},"order":8,"label":"day_3_label","id":"day_3_label"},{"kind":"Text","textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Stop fighting your closet every morning"}}},"order":9,"label":"day_3_what","id":"day_3_what"},{"id":"day_4_label","label":"day_4_label","kind":"Text","textContent":{"title":{"translations":{"en-US":"DAY 14"},"appearance":{},"kind":"static"}},"order":10},{"textContent":{"title":{"translations":{"en-US":"Feel like yourself again"},"kind":"static","appearance":{}}},"order":11,"kind":"Text","id":"day_4_what","label":"day_4_what"},{"mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615123056_of-menopause-timeline-clock-media/origin.png","small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615123056_of-menopause-timeline-clock-media/small.png"}}}},"kind":"Image"},"id":"clock_media","label":"clock_media","kind":"Media","order":12}],"callback":{"action":{"kind":"advance","edges":[{"conditions":[],"transitionKind":"push","nextScreenId":"3dd1ebc8-0550-4cdf-bcdc-3970ab859198"}]}},"isIframe":true,"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>2 minutes every day</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=Google+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #1A1A1A;\n      --text-muted: #666666;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    }\n    .screen {\n      position: relative;\n      width: 100%;\n      height: 100vh;\n      height: 100dvh;\n      max-height: 100vh;\n      max-height: 100dvh;\n      display: flex; flex-direction: column;\n      background: linear-gradient(188.34deg, #FFFFFF 24%, #FC8DAF 113%);\n      padding: 0;\n      overflow: hidden;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .scroll-area {\n      flex: 1 1 auto;\n      min-height: 0;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      -webkit-overflow-scrolling: touch;\n      padding: 56px 20px 0 20px;\n      display: flex; flex-direction: column;\n    }\n    .scroll-area::after {\n      content: \"\";\n      display: block;\n      flex-shrink: 0;\n      width: 100%;\n      height: 140px;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .screen {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px;\n      }\n    }\n\n    .hero {\n      display: flex; flex-direction: column;\n      align-items: center;\n      gap: 8px;\n      text-align: center;\n      flex-shrink: 0;\n    }\n    .clock {\n      width: 60px; height: auto;\n      display: block;\n    }\n    .eyebrow {\n      margin: 24px 0 0 0;\n      font-weight: 700;\n      font-size: 16px;\n      letter-spacing: 0.04em;\n      color: var(--text-dark);\n    }\n    .headline {\n      display: inline-flex;\n      align-items: flex-start;\n      gap: 2px;\n      margin: 4px 0 16px 0;\n    }\n    .headline .big {\n      font-weight: 700;\n      font-size: 40px;\n      line-height: 1;\n      color: var(--brand-primary);\n      letter-spacing: -0.011em;\n    }\n    .headline .small {\n      display: inline-flex;\n      flex-direction: column;\n      align-items: flex-start;\n      justify-content: flex-start;\n      padding-top: 6px;\n      line-height: 18px;\n      font-size: 14px;\n      font-weight: 500;\n      color: var(--brand-primary);\n    }\n    .headline .small span { display: block; }\n    .body {\n      margin: 0 0 24px 0;\n      padding: 0 8px;\n      text-align: center;\n      font-size: 16px;\n      line-height: 24px;\n      letter-spacing: -0.011em;\n      color: var(--text-dark);\n      flex-shrink: 0;\n    }\n\n    .timeline-card {\n      width: 100%;\n      background: #FFFFFF;\n      border-radius: 24px;\n      padding: 20px;\n      filter: drop-shadow(0px 1px 3px rgba(0,0,0,0.06));\n      display: flex; flex-direction: column;\n      flex-shrink: 0;\n    }\n    .step {\n      display: flex; align-items: flex-start;\n      gap: 14px;\n      padding: 4px 0;\n      min-height: 88px;\n      position: relative;\n    }\n    .step:last-child { min-height: 56px; }\n    .step .num {\n      flex-shrink: 0;\n      width: 32px; height: 32px;\n      position: relative;\n      display: flex; align-items: center; justify-content: center;\n      margin-top: 2px;\n    }\n    .step .num .circle {\n      width: 22px; height: 22px;\n      border-radius: 50%;\n      background: linear-gradient(157deg, #F5326D 0%, #FA82A6 39.7%, #FFB6CC 61.5%, #F5326D 100%);\n      box-shadow:\n        inset 0 0.5px 1px rgba(255, 174, 199, 0.9),\n        inset 0 -0.5px 2px rgba(241, 114, 153, 0.9);\n      display: flex; align-items: center; justify-content: center;\n      color: #FFFFFF;\n      font-size: 12px;\n      font-weight: 600;\n      line-height: 1;\n      z-index: 1;\n    }\n    .step:not(:last-child)::after {\n      content: \"\";\n      position: absolute;\n      left: 16px;\n      top: calc(2px + 16px + 11px);\n      bottom: -7px;\n      width: 1px;\n      background-image: linear-gradient(to bottom, #FA85A8 50%, transparent 50%);\n      background-size: 1px 4px;\n      background-repeat: repeat-y;\n      transform: translateX(-50%);\n      pointer-events: none;\n    }\n    .step .text {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      gap: 2px;\n      min-width: 0;\n    }\n    .step .day {\n      font-weight: 700;\n      font-size: 12px;\n      line-height: 16px;\n      letter-spacing: 0.04em;\n      color: var(--brand-primary);\n    }\n    .step .what {\n      font-weight: 500;\n      font-size: 16px;\n      line-height: 24px;\n      letter-spacing: -0.005em;\n      color: var(--text-dark);\n    }\n\n    .footer {\n      width: 100%;\n      padding: 18px 20px calc(22px + env(safe-area-inset-bottom)) 20px;\n      display: flex; justify-content: center;\n      position: absolute;\n      left: 0; right: 0; bottom: 0;\n      z-index: 3;\n      background:\n        linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 240, 246, 0.55) 35%, rgba(255, 232, 240, 0.78) 100%),\n        radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 60%, rgba(255, 255, 255, 0) 100%);\n      backdrop-filter: blur(22px) saturate(160%);\n      -webkit-backdrop-filter: blur(22px) saturate(160%);\n      box-shadow:\n        inset 0 -0.5px 0 rgba(255, 200, 215, 0.35),\n        0 -8px 24px -8px rgba(245, 50, 109, 0.18);\n    }\n    .cta {\n      width: 100%;\n      max-width: 362px;\n      height: 56px;\n      border: 1px solid var(--brand-primary);\n      border-radius: 100px;\n      background: var(--brand-primary);\n      color: #FFFFFF;\n      font-family: inherit; font-weight: 500; font-size: 16px;\n      line-height: 16px;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .cta:active { opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" data-testid=\"screen-root\">\n    <div class=\"scroll-area\">\n    <div class=\"hero\">\n      <img class=\"clock\" id=\"clock_img\" alt=\"\" aria-hidden=\"true\">\n      <div class=\"eyebrow\" id=\"eyebrow_label\">ALL YOU NEED IS</div>\n      <div class=\"headline\">\n        <span class=\"big\" id=\"stat_label\">2 min/</span>\n        <span class=\"small\"><span id=\"stat_sub_a\">every</span><span id=\"stat_sub_b\">day</span></span>\n      </div>\n    </div>\n\n    <p class=\"body\" id=\"body_label\">Open the app. See your outfit. Make it yours. That’s it. No styling degree required.</p>\n\n    <div class=\"timeline-card\">\n      <div class=\"step\">\n        <div class=\"num\"><div class=\"circle\">1</div></div>\n        <div class=\"text\">\n          <div class=\"day\" id=\"day_1_label\">DAY 1</div>\n          <div class=\"what\" id=\"day_1_what\">Build your first outfit formula for this body</div>\n        </div>\n      </div>\n      <div class=\"step\">\n        <div class=\"num\"><div class=\"circle\">2</div></div>\n        <div class=\"text\">\n          <div class=\"day\" id=\"day_2_label\">DAY 3</div>\n          <div class=\"what\" id=\"day_2_what\">Find the fabrics and silhouettes that actually work</div>\n        </div>\n      </div>\n      <div class=\"step\">\n        <div class=\"num\"><div class=\"circle\">3</div></div>\n        <div class=\"text\">\n          <div class=\"day\" id=\"day_3_label\">DAY 7</div>\n          <div class=\"what\" id=\"day_3_what\">Stop fighting your closet every morning</div>\n        </div>\n      </div>\n      <div class=\"step\">\n        <div class=\"num\"><div class=\"circle\">4</div></div>\n        <div class=\"text\">\n          <div class=\"day\" id=\"day_4_label\">DAY 14</div>\n          <div class=\"what\" id=\"day_4_what\">Feel like yourself again</div>\n        </div>\n      </div>\n    </div>\n    </div>\n\n    <div class=\"footer\">\n      <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\">\n        <span id=\"cta_label\">Create My Profile</span>\n      </button>\n    </div>\n  </div>\n\n  <script>\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n    function readMediaUrl(sdk, label) {\n      try {\n        var m = sdk.getChildSectionMedia(label);\n        return (m && m.url) ? m.url : null;\n      } catch (e) { return null; }\n    }\n\n    function applyContent(sdk) {\n      var setText = function (id, label) {\n        var el = document.getElementById(id);\n        el.textContent = readText(sdk, label, el.textContent);\n      };\n      setText('eyebrow_label', 'eyebrow_label');\n      setText('stat_label', 'stat_label');\n      setText('body_label', 'body_label');\n      setText('cta_label', 'cta_label');\n      ['day_1_label','day_1_what','day_2_label','day_2_what','day_3_label','day_3_what','day_4_label','day_4_what'].forEach(function (k) { setText(k, k); });\n\n      var clockUrl = readMediaUrl(sdk, 'clock_media');\n      document.getElementById('clock_img').src = clockUrl || '../assets/clock.png';\n    }\n\n    function bindCta(sdk) {\n      var btn = document.getElementById('cta_button');\n      var advanced = false;\n      btn.addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        if (advanced) return;\n        advanced = true;\n        try { sdk.navigateNext(); } catch (err) {\n          advanced = false;\n          console.error('navigateNext failed', err);\n        }\n      });\n    }\n\n    function init(sdk) {\n      applyContent(sdk);\n      bindCta(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n    }\n  </script>\n</body>\n</html>\n"}},"aiContent":{},"order":6,"createdAt":"2026-06-15T12:31:01.717Z","id":"of-menopause-timeline","name":"Timeline 14 days","position":{"y":0,"x":7200},"updatedAt":"2026-06-17T07:29:34.510Z","tags":[],"aiMeta":{"source":"segmently-cli","blockType":"WebEmbed","blockRole":"Timeline 14 days","iterationCount":1,"generationTimestamp":"2026-06-15T12:31:01.717Z","generationModel":"manual-cli"},"screenType":"WebEmbed"},"of-menopause-timeline-branch":{"createdAt":"2026-06-15T18:31:44.151Z","order":6,"aiContent":{},"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>2 minutes every day</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=Google+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #1A1A1A;\n      --text-muted: #666666;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    }\n    .screen {\n      position: relative;\n      width: 100%;\n      height: 100vh;\n      height: 100dvh;\n      max-height: 100vh;\n      max-height: 100dvh;\n      display: flex; flex-direction: column;\n      background: linear-gradient(188.34deg, #FFFFFF 24%, #FC8DAF 113%);\n      padding: 0;\n      overflow: hidden;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .scroll-area {\n      flex: 1 1 auto;\n      min-height: 0;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      -webkit-overflow-scrolling: touch;\n      padding: 56px 20px 0 20px;\n      display: flex; flex-direction: column;\n    }\n    .scroll-area::after {\n      content: \"\";\n      display: block;\n      flex-shrink: 0;\n      width: 100%;\n      height: 140px;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .screen {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px;\n      }\n    }\n\n    .hero {\n      display: flex; flex-direction: column;\n      align-items: center;\n      gap: 8px;\n      text-align: center;\n      flex-shrink: 0;\n    }\n    .clock {\n      width: 60px; height: auto;\n      display: block;\n    }\n    .eyebrow {\n      margin: 24px 0 0 0;\n      font-weight: 700;\n      font-size: 16px;\n      letter-spacing: 0.04em;\n      color: var(--text-dark);\n    }\n    .headline {\n      display: inline-flex;\n      align-items: flex-start;\n      gap: 2px;\n      margin: 4px 0 16px 0;\n    }\n    .headline .big {\n      font-weight: 700;\n      font-size: 40px;\n      line-height: 1;\n      color: var(--brand-primary);\n      letter-spacing: -0.011em;\n    }\n    .headline .small {\n      display: inline-flex;\n      flex-direction: column;\n      align-items: flex-start;\n      justify-content: flex-start;\n      padding-top: 6px;\n      line-height: 18px;\n      font-size: 14px;\n      font-weight: 500;\n      color: var(--brand-primary);\n    }\n    .headline .small span { display: block; }\n    .body {\n      margin: 0 0 24px 0;\n      padding: 0 8px;\n      text-align: center;\n      font-size: 16px;\n      line-height: 24px;\n      letter-spacing: -0.011em;\n      color: var(--text-dark);\n      flex-shrink: 0;\n    }\n\n    .timeline-card {\n      width: 100%;\n      background: #FFFFFF;\n      border-radius: 24px;\n      padding: 20px;\n      filter: drop-shadow(0px 1px 3px rgba(0,0,0,0.06));\n      display: flex; flex-direction: column;\n      flex-shrink: 0;\n    }\n    .step {\n      display: flex; align-items: center;\n      gap: 14px;\n      padding: 4px 0;\n      min-height: 64px;\n      position: relative;\n    }\n    .step:last-child { min-height: 40px; }\n    .step .num {\n      flex-shrink: 0;\n      width: 32px; height: 32px;\n      position: relative;\n      display: flex; align-items: center; justify-content: center;\n      margin-top: 2px;\n    }\n    .step .num .circle {\n      width: 22px; height: 22px;\n      border-radius: 50%;\n      background: linear-gradient(157deg, #F5326D 0%, #FA82A6 39.7%, #FFB6CC 61.5%, #F5326D 100%);\n      box-shadow:\n        inset 0 0.5px 1px rgba(255, 174, 199, 0.9),\n        inset 0 -0.5px 2px rgba(241, 114, 153, 0.9);\n      display: flex; align-items: center; justify-content: center;\n      color: #FFFFFF;\n      font-size: 12px;\n      font-weight: 600;\n      line-height: 1;\n      z-index: 1;\n    }\n    .step:not(:last-child)::after {\n      content: \"\";\n      position: absolute;\n      left: 16px;\n      top: calc(2px + 16px + 11px);\n      bottom: -7px;\n      width: 1px;\n      background-image: linear-gradient(to bottom, #FA85A8 50%, transparent 50%);\n      background-size: 1px 4px;\n      background-repeat: repeat-y;\n      transform: translateX(-50%);\n      pointer-events: none;\n    }\n    .step .text {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      gap: 2px;\n      min-width: 0;\n    }\n    .step .day {\n      font-weight: 700;\n      font-size: 12px;\n      line-height: 16px;\n      letter-spacing: 0.04em;\n      color: var(--brand-primary);\n    }\n    .step .what {\n      font-weight: 500;\n      font-size: 16px;\n      line-height: 24px;\n      letter-spacing: -0.005em;\n      color: var(--text-dark);\n    }\n\n    .footer {\n      width: 100%;\n      padding: 18px 20px calc(22px + env(safe-area-inset-bottom)) 20px;\n      display: flex; justify-content: center;\n      position: absolute;\n      left: 0; right: 0; bottom: 0;\n      z-index: 3;\n      background:\n        linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 240, 246, 0.55) 35%, rgba(255, 232, 240, 0.78) 100%),\n        radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 60%, rgba(255, 255, 255, 0) 100%);\n      backdrop-filter: blur(22px) saturate(160%);\n      -webkit-backdrop-filter: blur(22px) saturate(160%);\n      box-shadow:\n        inset 0 -0.5px 0 rgba(255, 200, 215, 0.35),\n        0 -8px 24px -8px rgba(245, 50, 109, 0.18);\n    }\n    .cta {\n      width: 100%;\n      max-width: 362px;\n      height: 56px;\n      border: 1px solid var(--brand-primary);\n      border-radius: 100px;\n      background: var(--brand-primary);\n      color: #FFFFFF;\n      font-family: inherit; font-weight: 500; font-size: 16px;\n      line-height: 16px;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .cta:active { opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" data-testid=\"screen-root\">\n    <div class=\"scroll-area\">\n    <div class=\"hero\">\n      <img class=\"clock\" id=\"clock_img\" alt=\"\" aria-hidden=\"true\">\n      <div class=\"eyebrow\" id=\"eyebrow_label\">ALL YOU NEED IS</div>\n      <div class=\"headline\">\n        <span class=\"big\" id=\"stat_label\">2 min/</span>\n        <span class=\"small\"><span id=\"stat_sub_a\">every</span><span id=\"stat_sub_b\">day</span></span>\n      </div>\n    </div>\n\n    <p class=\"body\" id=\"body_label\">Open the app. See your outfit. Make it yours. That’s it. No styling degree required.</p>\n\n    <div class=\"timeline-card\">\n      <div class=\"step\">\n        <div class=\"num\"><div class=\"circle\">1</div></div>\n        <div class=\"text\">\n          <div class=\"day\" id=\"day_1_label\">DAY 1</div>\n          <div class=\"what\" id=\"day_1_what\">Build your first outfit formula</div>\n        </div>\n      </div>\n      <div class=\"step\">\n        <div class=\"num\"><div class=\"circle\">2</div></div>\n        <div class=\"text\">\n          <div class=\"day\" id=\"day_2_label\">DAY 3</div>\n          <div class=\"what\" id=\"day_2_what\">Make it your own</div>\n        </div>\n      </div>\n      <div class=\"step\">\n        <div class=\"num\"><div class=\"circle\">3</div></div>\n        <div class=\"text\">\n          <div class=\"day\" id=\"day_3_label\">DAY 7</div>\n          <div class=\"what\" id=\"day_3_what\">Find your rhythm</div>\n        </div>\n      </div>\n      <div class=\"step\">\n        <div class=\"num\"><div class=\"circle\">4</div></div>\n        <div class=\"text\">\n          <div class=\"day\" id=\"day_4_label\">DAY 14</div>\n          <div class=\"what\" id=\"day_4_what\">Feel the difference</div>\n        </div>\n      </div>\n    </div>\n    </div>\n\n    <div class=\"footer\">\n      <button class=\"cta\" id=\"cta_button\" data-testid=\"cta-button\">\n        <span id=\"cta_label\">Create My Profile</span>\n      </button>\n    </div>\n  </div>\n\n  <script>\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n    function readMediaUrl(sdk, label) {\n      try {\n        var m = sdk.getChildSectionMedia(label);\n        return (m && m.url) ? m.url : null;\n      } catch (e) { return null; }\n    }\n\n    function applyContent(sdk) {\n      var setText = function (id, label) {\n        var el = document.getElementById(id);\n        el.textContent = readText(sdk, label, el.textContent);\n      };\n      setText('eyebrow_label', 'eyebrow_label');\n      setText('stat_label', 'stat_label');\n      setText('body_label', 'body_label');\n      setText('cta_label', 'cta_label');\n      ['day_1_label','day_1_what','day_2_label','day_2_what','day_3_label','day_3_what','day_4_label','day_4_what'].forEach(function (k) { setText(k, k); });\n\n      var clockUrl = readMediaUrl(sdk, 'clock_media');\n      document.getElementById('clock_img').src = clockUrl || '../assets/clock.png';\n    }\n\n    function bindCta(sdk) {\n      var btn = document.getElementById('cta_button');\n      var advanced = false;\n      btn.addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        if (advanced) return;\n        advanced = true;\n        try { sdk.navigateNext(); } catch (err) {\n          advanced = false;\n          console.error('navigateNext failed', err);\n        }\n      });\n    }\n\n    function init(sdk) {\n      applyContent(sdk);\n      bindCta(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n    }\n  </script>\n</body>\n</html>\n","isIframe":true,"childSections":[{"kind":"Text","textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"ALL YOU NEED IS"}}},"order":0,"id":"eyebrow_label","label":"eyebrow_label"},{"kind":"Text","order":1,"textContent":{"title":{"translations":{"en-US":"2 min/"},"appearance":{},"kind":"static"}},"id":"stat_label","label":"stat_label"},{"textContent":{"title":{"translations":{"en-US":"Open the app. See your outfit. Make it yours. That’s it. No styling degree required."},"appearance":{},"kind":"static"}},"order":2,"kind":"Text","label":"body_label","id":"body_label"},{"order":3,"textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Create My Profile"}}},"kind":"Text","label":"cta_label","id":"cta_label"},{"kind":"Text","order":4,"textContent":{"title":{"translations":{"en-US":"DAY 1"},"kind":"static","appearance":{}}},"id":"day_1_label","label":"day_1_label"},{"kind":"Text","order":5,"textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Build your first outfit formula"}}},"label":"day_1_what","id":"day_1_what"},{"kind":"Text","textContent":{"title":{"translations":{"en-US":"DAY 3"},"appearance":{},"kind":"static"}},"order":6,"label":"day_2_label","id":"day_2_label"},{"label":"day_2_what","id":"day_2_what","kind":"Text","order":7,"textContent":{"title":{"translations":{"en-US":"Make it your own"},"appearance":{},"kind":"static"}}},{"kind":"Text","order":8,"textContent":{"title":{"translations":{"en-US":"DAY 7"},"kind":"static","appearance":{}}},"id":"day_3_label","label":"day_3_label"},{"label":"day_3_what","id":"day_3_what","kind":"Text","textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Find your rhythm"}}},"order":9},{"label":"day_4_label","id":"day_4_label","textContent":{"title":{"translations":{"en-US":"DAY 14"},"appearance":{},"kind":"static"}},"order":10,"kind":"Text"},{"order":11,"textContent":{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Feel the difference"}}},"kind":"Text","id":"day_4_what","label":"day_4_what"},{"id":"clock_media","label":"clock_media","mediaContent":{"content":{"image":{"translations":{"en-US":{"original":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615123056_of-menopause-timeline-clock-media/origin.png","small":"https://api.segmently.ai/assets/projects/43fc320f-9156-4e95-a34d-e0b5cc57d852/cli-assets/images/20260615123056_of-menopause-timeline-clock-media/small.png"}}}},"kind":"Image"},"order":12,"kind":"Media"}],"callback":{"action":{"kind":"advance","edges":[{"nextScreenId":"3dd1ebc8-0550-4cdf-bcdc-3970ab859198","transitionKind":"push","conditions":[]}]}}},"offlineFirst":false,"canvas":{"background":{"content":{"color":"#f8fbfb"},"kind":"solid"}},"animated":true},"updatedAt":"2026-06-17T07:29:37.914Z","position":{"x":7184,"y":-1024},"name":"Timeline 14 days (branch)","id":"of-menopause-timeline-branch","aiMeta":{"generationModel":"manual-cli","generationTimestamp":"2026-06-15T18:31:44.151Z","iterationCount":1,"blockRole":"Timeline 14 days (branch)","blockType":"WebEmbed","source":"segmently-cli"},"tags":[],"screenType":"WebEmbed"},"of-menopause-too-warm-statement":{"position":{"y":368,"x":-752},"name":"of-menopause-too-warm-statement","id":"of-menopause-too-warm-statement","updatedAt":"2026-06-18T08:12:10.135Z","order":6,"aiContent":{},"createdAt":"2026-06-18T08:10:17.705Z","content":{"offlineFirst":false,"embed":{"callback":{"action":{"edges":[{"conditions":[],"transitionKind":"push","nextScreenId":"of-menopause-outfit-ideas-statement"}],"kind":"advance"}},"childSections":[{"kind":"Text","order":0,"textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"I often feel too warm in certain clothes or fabrics."}}},"id":"title","label":"title"},{"order":1,"textContent":{"title":{"kind":"static","appearance":{},"translations":{"en-US":"3/4"}}},"kind":"Text","id":"step_counter","label":"step_counter"},{"optionsListContent":{"items":[{"title":{"appearance":{},"kind":"static","translations":{"en-US":"Agree"}},"id":"agree","variableValue":"agree"},{"title":{"translations":{"en-US":"Somewhat Agree"},"kind":"static","appearance":{}},"id":"somewhat_agree","variableValue":"somewhat_agree"},{"variableValue":"somewhat_disagree","id":"somewhat_disagree","title":{"appearance":{},"kind":"static","translations":{"en-US":"Somewhat Disagree"}}},{"id":"disagree","title":{"kind":"static","appearance":{},"translations":{"en-US":"Disagree"}},"variableValue":"disagree"}]},"id":"agreement_options","label":"agreement_options","kind":"SingleSelectionList","order":2}],"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>Statement</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=Google+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --brand-primary: #F5326D;\n      --text-dark: #1A1A1A;\n      --text-muted: rgba(0, 0, 0, 0.55);\n      --card-bg: rgba(255, 255, 255, 0.8);\n      --card-border: rgba(0, 0, 0, 0.1);\n      --card-bg-selected: #FEE1E6;\n      --card-border-selected: #FCD0DD;\n    }\n    * { box-sizing: border-box; }\n    body, html {\n      margin: 0; padding: 0; width: 100%; height: 100%;\n      font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: #FFFCFD;\n    }\n    .screen {\n      position: relative;\n      width: 100%; height: 100vh; height: 100dvh;\n      display: flex; flex-direction: column;\n      background:\n        radial-gradient(110% 50% at 35% 55%, rgba(245, 50, 109, 0.30) 0%, rgba(245, 50, 109, 0.14) 28%, rgba(245, 50, 109, 0) 62%),\n        radial-gradient(85% 42% at 75% 62%, rgba(255, 180, 200, 0.38) 0%, rgba(255, 180, 200, 0) 70%),\n        linear-gradient(180deg, #FFFCFD 0%, #FFFCFD 100%);\n      overflow: hidden;\n      -webkit-tap-highlight-color: transparent;\n    }\n    @media (min-width: 600px) {\n      body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; }\n      .screen {\n        max-width: 430px; aspect-ratio: 9 / 19.5; height: auto; max-height: 95vh;\n        border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n      }\n    }\n    .topbar {\n      display: flex; align-items: center; justify-content: space-between;\n      padding: 16px 20px 8px 20px;\n      flex-shrink: 0;\n    }\n    .back-btn {\n      width: 40px; height: 40px;\n      display: flex; align-items: center; justify-content: center;\n      background: transparent; border: none; padding: 0; cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .step-counter {\n      font-weight: 500;\n      font-size: 14px;\n      line-height: 1.42;\n      letter-spacing: -0.16px;\n      color: var(--text-muted);\n    }\n    .content {\n      flex: 1 1 auto;\n      display: flex; flex-direction: column;\n      padding: 24px 20px 24px 20px;\n      min-height: 0;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      -webkit-overflow-scrolling: touch;\n    }\n    .title {\n      margin: 0 auto 24px auto;\n      font-weight: 700;\n      font-size: 24px;\n      line-height: 1.33;\n      letter-spacing: -0.15px;\n      color: var(--text-dark);\n      text-align: center;\n      max-width: 340px;\n    }\n    .options { display: flex; flex-direction: column; gap: 12px; }\n    .option {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 64px;\n      padding: 16px;\n      background: var(--card-bg);\n      border: 1px solid var(--card-border);\n      border-radius: 14px;\n      cursor: pointer;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n      transition: background-color 120ms ease, border-color 120ms ease;\n    }\n    .option .label {\n      font-size: 16px;\n      font-weight: 500;\n      line-height: 1.5;\n      letter-spacing: -0.18px;\n      color: var(--text-dark);\n      text-align: center;\n    }\n    .option.selected {\n      background: var(--card-bg-selected);\n      border-color: var(--card-border-selected);\n    }\n  </style>\n</head>\n<body>\n  <div class=\"screen\" data-testid=\"screen-root\">\n    <div class=\"topbar\">\n      <button class=\"back-btn\" id=\"back_button\" data-testid=\"back-button\" aria-label=\"Back\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M15 18l-6-6 6-6\" stroke=\"#1A1A1A\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n      <span class=\"step-counter\" id=\"step_counter\">3/4</span>\n    </div>\n\n    <div class=\"content\">\n      <h1 class=\"title\" id=\"title_label\">I often feel too warm in certain clothes or fabrics.</h1>\n      <div class=\"options\" id=\"options_list\" data-testid=\"options-list\"></div>\n    </div>\n  </div>\n\n  <script>\n    var VARIABLE_ID = 'too_warm_agreement';\n    var SECTION_LABEL = 'agreement_options';\n\n    var FALLBACK_ITEMS = [\n      { id: 'agree',              title: 'Agree' },\n      { id: 'somewhat_agree',     title: 'Somewhat Agree' },\n      { id: 'somewhat_disagree',  title: 'Somewhat Disagree' },\n      { id: 'disagree',           title: 'Disagree' }\n    ];\n\n    var state = { items: FALLBACK_ITEMS.slice(), selectedId: null, sdk: null, advanced: false };\n\n    function readText(sdk, label, fallback) {\n      try {\n        var s = sdk.getChildSectionText(label);\n        return (s && s.title) ? s.title : fallback;\n      } catch (e) { return fallback; }\n    }\n\n    function readItems(sdk) {\n      try {\n        var section = sdk.getChildSection(SECTION_LABEL);\n        var items = section && Array.isArray(section.items) ? section.items : null;\n        if (!items || !items.length) return null;\n        return items.map(function (it) {\n          var id = it.variableValue || it.id;\n          var fallback = FALLBACK_ITEMS.filter(function (f) { return f.id === id; })[0] || {};\n          return {\n            id: id,\n            title: (it.title && (it.title.title || it.title)) || it.label || fallback.title || ''\n          };\n        });\n      } catch (e) { return null; }\n    }\n\n    function renderOptions() {\n      var list = document.getElementById('options_list');\n      list.innerHTML = '';\n      state.items.forEach(function (item) {\n        var row = document.createElement('div');\n        row.className = 'option' + (state.selectedId === item.id ? ' selected' : '');\n        row.setAttribute('data-id', item.id);\n        row.setAttribute('data-testid', 'option-' + item.id);\n        row.setAttribute('role', 'radio');\n        row.setAttribute('aria-checked', state.selectedId === item.id ? 'true' : 'false');\n        row.innerHTML = '<div class=\"label\"></div>';\n        row.querySelector('.label').textContent = item.title;\n        row.addEventListener('click', function () { selectOption(item.id); });\n        list.appendChild(row);\n      });\n    }\n\n    function advance(value) {\n      if (state.advanced) return;\n      state.advanced = true;\n      try { state.sdk && state.sdk.setVariable(VARIABLE_ID, value); } catch (err) { console.error('setVariable failed', err); }\n      try { state.sdk && state.sdk.navigateNext(); } catch (err) {\n        state.advanced = false;\n        console.error('navigateNext failed', err);\n      }\n    }\n\n    function selectOption(id) {\n      state.selectedId = id;\n      renderOptions();\n      setTimeout(function () { advance(id); }, 160);\n    }\n\n    function bindBack(sdk) {\n      document.getElementById('back_button').addEventListener('click', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        try { sdk.navigateBack(); } catch (err) { console.error('navigateBack failed', err); }\n      });\n    }\n\n    function init(sdk) {\n      state.sdk = sdk;\n      document.getElementById('title_label').textContent = readText(sdk, 'title', 'I often feel too warm in certain clothes or fabrics.');\n      document.getElementById('step_counter').textContent = readText(sdk, 'step_counter', '3/4');\n\n      var items = readItems(sdk);\n      if (items && items.length) state.items = items;\n\n      try {\n        var current = sdk.getVariable(VARIABLE_ID);\n        if (current && state.items.some(function (i) { return i.id === current; })) {\n          state.selectedId = current;\n        }\n      } catch (e) { /* noop */ }\n\n      renderOptions();\n      bindBack(sdk);\n    }\n\n    if (window.segmentlySDK && segmentlySDK.ready) {\n      segmentlySDK.ready().then(init).catch(function (e) { console.error('SDK ready failed', e); });\n    } else {\n      console.warn('Segmently SDK not available; running standalone preview.');\n      renderOptions();\n    }\n  </script>\n</body>\n</html>\n"},"canvas":{"background":{"content":{"color":"#1a1a1a"},"kind":"solid"}},"animated":true},"screenType":"WebEmbed","aiMeta":{"source":"segmently-cli","blockRole":"of-menopause-too-warm-statement","blockType":"WebEmbed","iterationCount":1,"generationModel":"manual-cli","generationTimestamp":"2026-06-18T08:10:17.705Z"},"entityId":"of-menopause-too-warm-statement","tags":[]}},"metadata":{"projectId":"43fc320f-9156-4e95-a34d-e0b5cc57d852","projectName":"43fc320f-9156-4e95-a34d-e0b5cc57d852","onboardingId":"nl1mZcZ3g4t1gQNayl3K","onboardingName":"[organic] menopause-funnel-paid-trial","webOnboardingId":"Kpu6TwLxwpTjyUmT1h1l","webOnboardingName":"[organic] of-menopause-paid-7d-trial","versionId":"MOMwZynGHdbUVtYStf47","urlAlias":"dsg-b5c1-0ek"},"variables":{"nothing_to_wear_freq":{"id":"nothing_to_wear_freq","name":"Nothing-to-wear frequency","updatedAt":"2026-06-15T11:55:29.336Z","boundScreenIds":["of-menopause-nothing-to-wear"],"options":[{"label":"Almost everyday","id":"daily"},{"label":"A few times a week","id":"few_weekly"},{"label":"Once a week or so","id":"weekly"},{"label":"Rarely","id":"rarely"}],"type":"enum","createdAt":"2026-06-15T11:55:29.336Z","boundSectionId":"nothing_to_wear_options","scope":"screen","required":false},"closet_size":{"required":false,"scope":"screen","boundSectionId":"closet_options","type":"enum","createdAt":"2026-06-15T11:45:41.828Z","options":[{"label":"Under 50","id":"under_50"},{"label":"50-100","id":"50_100"},{"label":"100-200","id":"100_200"},{"label":"200+","id":"200_plus"}],"boundScreenIds":["of-menopause-closet-size"],"updatedAt":"2026-06-15T11:45:41.828Z","id":"closet_size","name":"Closet size"},"password":{"updatedAt":{},"scope":"global","id":"password","name":"password","required":false,"type":"string","createdAt":{}},"routine_type":{"id":"routine_type","name":"Routine type","updatedAt":"2026-06-15T12:22:43.998Z","boundScreenIds":["of-menopause-routine"],"options":[{"label":"Mostly casual","id":"casual"},{"label":"Mostly work","id":"work"},{"label":"Mix of both","id":"mix"},{"label":"Variety","id":"variety"}],"type":"enum","createdAt":"2026-06-15T12:22:43.998Z","boundSectionId":"routine_options","scope":"screen","required":false},"payment_result":{"type":"string","createdAt":"2026-06-15T13:01:11.193Z","required":false,"id":"payment_result","name":"Payment result","updatedAt":"2026-06-15T13:01:34.677Z","scope":"screen"},"too_warm_agreement":{"boundSectionId":"agreement_options","scope":"screen","required":false,"name":"Too warm agreement","id":"too_warm_agreement","updatedAt":"2026-06-18T08:10:15.892Z","options":[{"label":"Agree","id":"agree"},{"label":"Somewhat Agree","id":"somewhat_agree"},{"label":"Somewhat Disagree","id":"somewhat_disagree"},{"label":"Disagree","id":"disagree"}],"boundScreenIds":["of-menopause-too-warm-statement"],"createdAt":"2026-06-18T08:10:15.892Z","type":"enum"},"has_work_at_office":{"createdAt":{},"type":"string","required":false,"id":"has_work_at_office","name":"has_work_at_office","scope":"global","updatedAt":{}},"mornings_feeling":{"scope":"screen","boundSectionId":"mornings_options","required":false,"name":"Mornings feeling","id":"mornings_feeling","updatedAt":"2026-06-15T11:13:52.468Z","createdAt":"2026-06-15T11:13:52.468Z","type":"enum","boundScreenIds":["of-menopause-mornings"],"options":[{"label":"Stressful, dread it","id":"stressful"},{"label":"Meh, manageable","id":"meh"},{"label":"Hit or miss","id":"hit_or_miss"},{"label":"Usually fine","id":"usually_fine"}]},"email":{"updatedAt":{"nanoseconds":987000000,"type":"firestore/timestamp/1.0","seconds":1775830179},"scope":"screen","name":"email","id":"email","type":"string","createdAt":{"nanoseconds":987000000,"type":"firestore/timestamp/1.0","seconds":1775830179},"boundScreenIds":["3dd1ebc8-0550-4cdf-bcdc-3970ab859198"],"required":false},"hardest_part":{"updatedAt":"2026-06-15T11:37:59.658Z","id":"hardest_part","name":"Hardest part","createdAt":"2026-06-15T11:37:59.658Z","type":"enum","boundScreenIds":["of-menopause-challenge"],"options":[{"label":"Never know what goes together","id":"never_pairs"},{"label":"Packed closet, not flexible","id":"packed_not_flexible"},{"id":"no_confidence","label":"Nothing feels confident"},{"id":"too_long","label":"Takes too long"},{"id":"buying_no_works","label":"Keep buying, nothing works"}],"scope":"screen","screenBindings":{"of-menopause-challenge":{"buying_no_works":"buying_no_works","never_pairs":"never_pairs","packed_not_flexible":"packed_not_flexible","no_confidence":"no_confidence","too_long":"too_long"}},"boundSectionId":"challenge_options","required":false},"shopping_habit":{"createdAt":"2026-06-15T12:00:34.882Z","type":"enum","options":[{"label":"Mostly impulsive","id":"impulsive"},{"label":"Mostly planned","id":"planned"},{"label":"Event driven","id":"event_driven"},{"label":"Emotional spending","id":"emotional"},{"label":"No pattern","id":"no_pattern"}],"boundScreenIds":["of-menopause-shopping"],"updatedAt":"2026-06-15T12:00:34.882Z","name":"Shopping habit","id":"shopping_habit","required":false,"scope":"screen","boundSectionId":"shopping_options"},"walk_out_feeling":{"required":false,"scope":"screen","boundSectionId":"walk_out_options","createdAt":"2026-06-15T12:26:50.398Z","type":"enum","options":[{"label":"Confident","id":"confident"},{"label":"Calm","id":"calm"},{"label":"Put-together","id":"put_together"},{"label":"Like myself","id":"like_myself"}],"boundScreenIds":["of-menopause-feeling"],"updatedAt":"2026-06-15T12:26:50.398Z","id":"walk_out_feeling","name":"Walk-out feeling"},"primary_goals":{"boundSectionId":"goals_options","scope":"screen","required":false,"name":"Primary goals","id":"primary_goals","updatedAt":"2026-06-15T10:36:52.541Z","options":[{"label":"Feel confident in what I wear","id":"confident"},{"label":"Spend less time getting dressed","id":"less_time"},{"label":"Build a wardrobe I actually love","id":"wardrobe_love"},{"label":"Look put-together, effortlessly","id":"put_together"},{"label":"Stop buying clothes I never wear","id":"stop_buying"},{"label":"Calmer, easier mornings","id":"calmer_mornings"}],"boundScreenIds":["of-menopause-goals"],"type":"enum[]","createdAt":"2026-06-15T10:36:52.541Z"},"outfit_ideas_agreement":{"required":false,"scope":"screen","boundSectionId":"agreement_options","createdAt":"2026-06-18T08:12:06.668Z","type":"enum","boundScreenIds":["of-menopause-outfit-ideas-statement"],"options":[{"label":"Agree","id":"agree"},{"label":"Somewhat Agree","id":"somewhat_agree"},{"label":"Somewhat Disagree","id":"somewhat_disagree"},{"label":"Disagree","id":"disagree"}],"name":"Outfit ideas agreement","id":"outfit_ideas_agreement","updatedAt":"2026-06-18T08:12:06.668Z"},"make_downsell":{"updatedAt":{},"scope":"global","name":"make-downsell","id":"make_downsell","createdAt":{},"type":"string","required":false},"token":{"name":"token","id":"token","updatedAt":{},"scope":"global","type":"string","createdAt":{},"required":false},"body_changing_agreement":{"required":false,"scope":"screen","boundSectionId":"agreement_options","type":"enum","createdAt":"2026-06-18T07:48:58.539Z","boundScreenIds":["of-menopause-body-changing-statement"],"options":[{"label":"Agree","id":"agree"},{"label":"Somewhat Agree","id":"somewhat_agree"},{"label":"Somewhat Disagree","id":"somewhat_disagree"},{"label":"Disagree","id":"disagree"}],"updatedAt":"2026-06-18T07:48:58.539Z","id":"body_changing_agreement","name":"Body changing agreement"},"otp":{"id":"otp","name":"otp","updatedAt":{},"scope":"global","required":false,"createdAt":{},"type":"string"},"app_user_id":{"name":"app_user_id","id":"app_user_id","scope":"global","updatedAt":{},"type":"string","createdAt":{},"required":false},"clothes_fit_agreement":{"required":false,"scope":"screen","boundSectionId":"agreement_options","type":"enum","createdAt":"2026-06-18T08:06:40.194Z","boundScreenIds":["of-menopause-clothes-fit-statement"],"options":[{"label":"Agree","id":"agree"},{"label":"Somewhat Agree","id":"somewhat_agree"},{"label":"Somewhat Disagree","id":"somewhat_disagree"},{"label":"Disagree","id":"disagree"}],"id":"clothes_fit_agreement","name":"Clothes fit agreement","updatedAt":"2026-06-18T08:06:40.194Z"},"dressing_challenges":{"required":false,"boundSectionId":"challenges_options","scope":"screen","options":[{"label":"Nothing fits me like it used to","id":"nothing_fits"},{"label":"I get too hot in certain fabrics","id":"too_hot"},{"label":"I don’t know what suits me anymore","id":"dont_know"},{"label":"I end up wearing the same outfits","id":"same_outfits"},{"label":"I want to feel confident again","id":"feel_confident"}],"boundScreenIds":["of-menopause-dressing-challenges"],"type":"enum[]","createdAt":"2026-06-17T17:07:46.481Z","updatedAt":"2026-06-17T17:07:46.481Z","name":"Dressing challenges","id":"dressing_challenges"},"existing_user":{"name":"existing_user","id":"existing_user","scope":"global","updatedAt":{},"type":"string","createdAt":{},"required":false},"journey_stage":{"options":[{"label":"Figuring out personal style","id":"figuring_out"},{"label":"Body and style changing","id":"body_changing"},{"id":"hormonal_midlife","label":"Hormonal / midlife changes"},{"id":"rediscovering","label":"Rediscovering style"},{"id":"none","label":"None of these apply"},{"label":"Prefer not to say","id":"prefer_not_to_say"}],"boundScreenIds":["of-menopause-journey"],"type":"enum","createdAt":"2026-06-13T10:12:52.961Z","name":"Journey stage","id":"journey_stage","updatedAt":"2026-06-18T07:26:25.027Z","required":false,"boundSectionId":"journey_options","scope":"screen","screenBindings":{"of-menopause-journey":{"figuring_out":"figuring_out","none":"none","hormonal_midlife":"hormonal_midlife","rediscovering":"rediscovering","body_changing":"body_changing"}}}},"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","currencyOptions":{"usd":{"unitAmount":12800}}},"bakedAt":"2026-06-26T09:09:50.866Z","checkoutMode":"embedded","type":"one_time","stripeProductId":"prod_UPeJyJIzgwM5zV","productName":"Lifetime 128","mode":"live","connectedAccountId":"acct_1IMgtiExVPMzcN93"},"JwUcG8RG2G9FVukNJeiW":{"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":"$0.99","introProduct":"Annual-0.99-paid-trial-then-99","introDuration":""}},"raw":{"unitAmount":9900,"currency":"usd","interval":"year","intervalCount":1,"currencyOptions":{"usd":{"unitAmount":9900}},"trialDays":"7","introOffer":{"unitAmount":99,"currency":"usd","productName":"Annual-0.99-paid-trial-then-99"}},"bakedAt":"2026-06-26T09:09:51.133Z","checkoutMode":"embedded","type":"subscription","stripeProductId":"prod_RqBL6TJHSczr1Z","productName":"Annual-0.99-paid-trial-then-99","subscription":{"interval":"year","intervalCount":1,"trialDays":"7","paidTrial":{"enabled":true,"stripePriceId":"price_1TQp4OExVPMzcN93gRq79Ngl"}},"mode":"live","connectedAccountId":"acct_1IMgtiExVPMzcN93"},"SzkZ8ucbr7iASF4921YG":{"productId":"prod_RqBevU147GnJHs","priceId":"price_1QwVH2ExVPMzcN93vrVzx232","localized":{"en-US":{"displayPrice":"$19.00/month","priceAmount":"$19.00","priceAndCurrency":"$19.00 USD","duration":"monthly","intervalCount":"1","interval":"1 month","trialDays":"","fullTrialDays":"","introPrice":"","introProduct":"","introDuration":""}},"raw":{"unitAmount":1900,"currency":"usd","interval":"month","intervalCount":1,"currencyOptions":{"usd":{"unitAmount":1900}}},"bakedAt":"2026-06-26T09:09:51.338Z","checkoutMode":"embedded","type":"subscription","stripeProductId":"prod_RqBevU147GnJHs","productName":"Monthly-no-trial","subscription":{"interval":"month","intervalCount":1},"mode":"live","connectedAccountId":"acct_1IMgtiExVPMzcN93"}},"bakedAt":"2026-06-26T09:09:51.338Z"},"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":["app_user_id","token","has_work_at_office","password","otp","existing_user","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/C7YWvCiPKUb","urlEncode":false,"fallbackUrl":"https://outfit-formulas.app.link/C7YWvCiPKUb","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.app_user_id","destination":"app_user_id"},{"source":"variable.token","destination":"token"},{"source":"variable.has_work_at_office","destination":"has_work_at_office"},{"source":"variable.password","destination":"password"},{"source":"variable.otp","destination":"otp"},{"source":"variable.existing_user","destination":"existing_user"},{"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"},{"sourceKey":"tiktok.ttclid","sourceType":"server"},{"sourceType":"variable","sourceKey":"app_user_id"}],"redirectMappings":[{"sourceKey":"otp","sourceType":"variable"}],"settings":{"debug":false,"collectOnLoad":true}},"seo":{"title":"OutfitFormulas"},"projectAnalytics":{"integrations":[{"name":"Facebook Conversion API","config":{"accessToken":"EAAbBN3SU4gIBO5KwkgyNiFJGe6SzIcbF1LBAejWF30h0xuwx4FmBpise8fiYdA1O9raj8uF2a5VeoMuaaRJTKbKZAE4IzM1pSdvdgbx6WpjSiNrcSYKz6YZATkSzVuOvAgSxnCHlNqCMZBs0wKmSsYs23gmNfB0VFZBHRkLMEfxEiaOsfjO7YNxWNPb55pIHQwZDZD","pixelId":"3152172401607943","testEventCode":"TEST2976"},"id":"int_mkwihhhj_40oiik","updatedAt":"2026-01-28T18:59:29.098Z","enabled":true,"createdAt":"2026-01-27T11:27:03.361Z","platform":"facebook_capi"},{"updatedAt":"2026-02-17T18:05:08.862Z","config":{"apiKey":"d67673b689e94b684a9704ed1e18bac","trackSessionEvents":true,"serverZone":"US"},"name":"Amplitude","id":"int_mkwii1qb_y8sfhy","enabled":true,"createdAt":"2026-01-27T11:27:29.597Z","platform":"amplitude"},{"platform":"custom_script","createdAt":"2026-01-27T11:28:09.724Z","enabled":true,"id":"int_mkwiiwp0_ej10sk","config":{"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  });","name":"Header Injection Script","bodyScript":""},"name":"Header Injection Script","updatedAt":"2026-04-18T12:05:27.838Z"},{"platform":"tiktok_pixel","createdAt":"2026-01-27T11:28:38.384Z","enabled":true,"updatedAt":"2026-02-18T16:48:40.500Z","id":"int_mkwijit5_083yyi","name":"TikTok Pixel","config":{"pixelId":"C92D9GF6ARQ791KLP7Q0","advancedMatching":{"email":true}}},{"name":"Google Analytics 4","id":"int_mkwikdsj_s07qoq","config":{"debugMode":false,"measurementId":"G-MYLSX9351Z","sendPageView":true},"updatedAt":"2026-01-27T11:29:18.538Z","enabled":true,"createdAt":"2026-01-27T11:29:18.538Z","platform":"ga4"},{"updatedAt":"2026-01-27T11:30:02.304Z","config":{"autoConfig":true,"pixelId":"3152172401607943"},"id":"int_mkwilbkc_vtyijc","name":"Facebook Pixel","enabled":true,"createdAt":"2026-01-27T11:30:02.304Z","platform":"facebook_pixel"},{"enabled":true,"updatedAt":"2026-02-17T18:05:15.653Z","name":"Amplitude (Server-Side)","id":"int_mkye2e72_yd068j","config":{"serverZone":"US","apiKey":"d67673b689e94b684a9704ed1e18bac"},"platform":"amplitude_server","createdAt":"2026-01-28T18:58:53.116Z"},{"config":{"pixelCode":"C92D9GF6ARQ791KLP7Q0","testEventCode":"TEST48190","accessToken":"97cc66b5202a8af03bd1db544d72ae97e377353f"},"name":"TikTok Events API","id":"int_mls9qhva_pakjya","updatedAt":"2026-02-18T16:50:44.803Z","enabled":true,"createdAt":"2026-02-18T16:50:44.803Z","platform":"tiktok_events_api"},{"enabled":true,"config":{"dataLayerName":"dataLayer","containerId":"GTM-NCG89PJV"},"name":"Google Tag Manager","id":"int_mo2l2uuz_qxlvjb","updatedAt":"2026-04-17T07:25:23.754Z","platform":"gtm","createdAt":"2026-04-17T07:25:23.754Z"},{"updatedAt":"2026-06-03T10:34:05.233Z","config":{"mode":"http"},"id":"int_mpxxijwl_okdefh","name":"Segmently Analytics","enabled":true,"createdAt":"2026-06-03T10:34:05.233Z","platform":"segmently_internal"},{"createdAt":"2026-06-03T10:36:07.405Z","platform":"posthog","config":{"projectToken":"phc_CScx24Mx5vqEqbfiknuFhWqZ54jCtcLpMTvFJaDuiXES","defaults":"2026-01-30","host":"https://us.i.posthog.com"},"name":"PostHog","id":"int_mpxxl66e_ruzjj7","updatedAt":"2026-06-03T10:36:07.405Z","enabled":true},{"enabled":true,"updatedAt":"2026-06-03T10:36:28.009Z","name":"PostHog (Server-Side)","config":{"projectToken":"phc_CScx24Mx5vqEqbfiknuFhWqZ54jCtcLpMTvFJaDuiXES","defaults":"2026-01-30","host":"https://us.i.posthog.com"},"id":"int_mpxxlm35_l62ens","platform":"posthog_server","createdAt":"2026-06-03T10:36:28.009Z"}]},"stripeEmailConfig":{"emailVariableId":"email"},"meta":{"funnelId":"nl1mZcZ3g4t1gQNayl3K","versionId":"MOMwZynGHdbUVtYStf47","alias":"dsg-b5c1-0ek","generatedAt":"2026-06-26T09:09:51.734Z","platform":"web","webShellVersion":"1.0.54"}}