<div style='padding:20px;background:#111;color:#fff;border-radius:12px'>DOM render test</div>

(function(){ var mount=document.getElementById('wf-objective-widget'); if(!mount) return; if(window.__owMarketingMounted){ return; } window.__owMarketingMounted = true; if(!document.getElementById('wf-objective-widget-style')){ var style=document.createElement('style'); style.id='wf-objective-widget-style'; style.textContent="\n @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');\n\n #wf-objective-widget {\n --bg: #180312;\n --panel: #f1f1f1;\n --ink: #2f2430;\n --muted: #6d6371;\n --line: #d7d1d8;\n --accent: #eb0aa6;\n --accent-2: #c70089;\n --white: #ffffff;\n --radius: 22px;\n font-family: 'Plus Jakarta Sans', system-ui, sans-serif;\n color: var(--ink);\n background:\n radial-gradient(900px 500px at 18% 16%, rgba(235, 10, 166, 0.08), transparent 60%),\n radial-gradient(700px 420px at 88% 74%, rgba(137, 22, 100, 0.12), transparent 62%),\n var(--bg);\n width: 100%;\n }\n\n #wf-objective-widget * {\n box-sizing: border-box;\n font-family: inherit;\n }\n\n #wf-objective-widget .ow-wrap {\n max-width: 1180px;\n margin: 0 auto;\n padding: 64px 24px 80px;\n }\n\n #wf-objective-widget .ow-header {\n text-align: center;\n color: var(--white);\n margin: 0 auto 34px;\n max-width: 860px;\n }\n\n #wf-objective-widget .ow-header h2 {\n margin: 0;\n font-size: clamp(32px, 4vw, 54px);\n line-height: 1.08;\n letter-spacing: -0.03em;\n font-weight: 800;\n }\n\n #wf-objective-widget .ow-header p {\n margin: 14px auto 0;\n font-size: clamp(15px, 1.5vw, 18px);\n line-height: 1.45;\n color: rgba(255, 255, 255, 0.8);\n max-width: 760px;\n }\n\n #wf-objective-widget .ow-main {\n display: grid;\n grid-template-columns: 1fr;\n gap: 16px;\n }\n\n #wf-objective-widget .ow-main.is-active {\n grid-template-columns: minmax(300px, 0.9fr) minmax(440px, 1.6fr);\n align-items: stretch;\n }\n\n #wf-objective-widget .ow-left {\n display: grid;\n gap: 16px;\n align-content: start;\n }\n\n #wf-objective-widget .ow-card {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr) auto;\n align-items: start;\n gap: 14px;\n width: 100%;\n border: 0;\n background: var(--panel);\n color: var(--ink);\n border-radius: var(--radius);\n padding: 20px 22px;\n text-align: left;\n cursor: pointer;\n transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;\n box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);\n }\n\n #wf-objective-widget .ow-card:hover {\n transform: translateY(-1px);\n }\n\n #wf-objective-widget .ow-card:focus-visible,\n #wf-objective-widget .ow-acc-btn:focus-visible,\n #wf-objective-widget .ow-back-btn:focus-visible,\n #wf-objective-widget .ow-cta:focus-visible {\n outline: 2px solid rgba(235, 10, 166, 0.75);\n outline-offset: 2px;\n }\n\n #wf-objective-widget .ow-card-icon {\n width: 38px;\n height: 38px;\n border-radius: 999px;\n background: #e9e6ea;\n display: grid;\n place-items: center;\n flex: 0 0 auto;\n }\n\n #wf-objective-widget .ow-card-icon svg {\n width: 22px;\n height: 22px;\n display: block;\n stroke: currentColor;\n fill: none;\n stroke-width: 1.9;\n stroke-linecap: round;\n stroke-linejoin: round;\n color: var(--accent);\n }\n\n #wf-objective-widget .ow-card-body {\n min-width: 0;\n }\n\n #wf-objective-widget .ow-card-title {\n margin: 0;\n font-size: clamp(18px, 2vw, 30px);\n line-height: 1.07;\n letter-spacing: -0.03em;\n font-weight: 800;\n }\n\n #wf-objective-widget .ow-card-desc {\n margin: 10px 0 0;\n color: #4f4451;\n line-height: 1.35;\n font-size: clamp(14px, 1.15vw, 16px);\n max-width: 54ch;\n }\n\n #wf-objective-widget .ow-card-arrow {\n width: 30px;\n height: 30px;\n display: grid;\n place-items: center;\n color: #3d2f3e;\n border-radius: 999px;\n align-self: center;\n margin-top: 2px;\n }\n\n #wf-objective-widget .ow-card-arrow svg {\n width: 18px;\n height: 18px;\n stroke: currentColor;\n fill: none;\n stroke-width: 1.9;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n #wf-objective-widget .ow-card.is-selected {\n background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);\n color: var(--white);\n box-shadow: 0 12px 34px rgba(235, 10, 166, 0.18);\n }\n\n #wf-objective-widget .ow-card.is-selected .ow-card-icon {\n background: rgba(255, 255, 255, 0.94);\n }\n\n #wf-objective-widget .ow-card.is-selected .ow-card-icon svg {\n color: var(--accent);\n }\n\n #wf-objective-widget .ow-card.is-selected .ow-card-desc {\n color: rgba(255, 255, 255, 0.9);\n }\n\n #wf-objective-widget .ow-card.is-selected .ow-card-arrow {\n color: var(--white);\n }\n\n #wf-objective-widget .ow-right {\n display: none;\n background: var(--panel);\n border-radius: var(--radius);\n padding: 22px 18px 18px;\n min-height: 430px;\n }\n\n #wf-objective-widget .ow-main.is-active .ow-right {\n display: block;\n }\n\n #wf-objective-widget .ow-panel-head h3 {\n margin: 0;\n font-size: 20px;\n line-height: 1.15;\n letter-spacing: -0.02em;\n font-weight: 800;\n }\n\n #wf-objective-widget .ow-panel-head p {\n margin: 8px 0 0;\n color: var(--muted);\n line-height: 1.35;\n font-size: 15px;\n }\n\n #wf-objective-widget .ow-panel-scroll {\n margin-top: 16px;\n max-height: 390px;\n overflow: auto;\n padding-right: 4px;\n }\n\n #wf-objective-widget .ow-panel-scroll::-webkit-scrollbar {\n width: 8px;\n }\n\n #wf-objective-widget .ow-panel-scroll::-webkit-scrollbar-thumb {\n background: #cbc5cc;\n border-radius: 999px;\n }\n\n #wf-objective-widget .ow-accordion {\n display: grid;\n gap: 0;\n }\n\n #wf-objective-widget .ow-acc-item {\n border-top: 1px solid var(--line);\n }\n\n #wf-objective-widget .ow-acc-item:first-child {\n border-top: 0;\n }\n\n #wf-objective-widget .ow-acc-btn {\n width: 100%;\n background: transparent;\n border: 0;\n padding: 18px 0 16px;\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n gap: 12px;\n align-items: center;\n text-align: left;\n color: var(--ink);\n cursor: pointer;\n }\n\n #wf-objective-widget .ow-acc-btn-title {\n margin: 0;\n font-size: clamp(16px, 1.7vw, 22px);\n line-height: 1.12;\n letter-spacing: -0.03em;\n font-weight: 800;\n }\n\n #wf-objective-widget .ow-acc-item.is-open .ow-acc-btn-title {\n color: var(--accent);\n }\n\n #wf-objective-widget .ow-acc-caret {\n width: 22px;\n height: 22px;\n display: grid;\n place-items: center;\n color: #4c4150;\n transition: transform 0.18s ease, color 0.18s ease;\n }\n\n #wf-objective-widget .ow-acc-caret svg {\n width: 16px;\n height: 16px;\n stroke: currentColor;\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n #wf-objective-widget .ow-acc-item.is-open .ow-acc-caret {\n color: var(--accent);\n transform: rotate(180deg);\n }\n\n #wf-objective-widget .ow-acc-panel {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.24s ease;\n }\n\n #wf-objective-widget .ow-acc-item.is-open .ow-acc-panel {\n grid-template-rows: 1fr;\n }\n\n #wf-objective-widget .ow-acc-panel-inner {\n overflow: hidden;\n }\n\n #wf-objective-widget .ow-acc-body {\n padding: 0 0 14px;\n display: grid;\n gap: 14px;\n }\n\n #wf-objective-widget .ow-acc-body > p {\n margin: 0;\n color: #5f5660;\n line-height: 1.4;\n font-size: 14px;\n }\n\n #wf-objective-widget .ow-detail-grid {\n display: grid;\n grid-template-columns: 1fr 1.4fr;\n gap: 12px;\n }\n\n #wf-objective-widget .ow-detail-box {\n border: 1px solid #d7d1d8;\n border-radius: 14px;\n padding: 10px 12px;\n background: #f3f1f4;\n }\n\n #wf-objective-widget .ow-detail-label {\n margin: 0 0 8px;\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 11px;\n font-weight: 800;\n color: #463b47;\n letter-spacing: 0.02em;\n text-transform: uppercase;\n }\n\n #wf-objective-widget .ow-detail-label svg {\n width: 12px;\n height: 12px;\n fill: var(--accent);\n display: block;\n }\n\n #wf-objective-widget .ow-detail-box p {\n margin: 0;\n font-size: 13px;\n line-height: 1.35;\n color: #534a55;\n }\n\n #wf-objective-widget .ow-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n #wf-objective-widget .ow-chip {\n display: inline-flex;\n align-items: center;\n padding: 6px 10px;\n border-radius: 8px;\n background: #e8e4e8;\n font-size: 12px;\n line-height: 1;\n color: #544b56;\n font-weight: 600;\n white-space: nowrap;\n }\n\n #wf-objective-widget .ow-acc-footer {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 12px;\n padding-top: 2px;\n }\n\n #wf-objective-widget .ow-cta {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 122px;\n height: 40px;\n border-radius: 999px;\n border: 0;\n text-decoration: none;\n background: linear-gradient(180deg, var(--accent) 0%, #dc0b9d 100%);\n color: var(--white);\n font-weight: 700;\n font-size: 14px;\n letter-spacing: -0.02em;\n }\n\n #wf-objective-widget .ow-divider-accent {\n height: 2px;\n background: rgba(235, 10, 166, 0.65);\n border-radius: 2px;\n margin-top: 10px;\n }\n\n #wf-objective-widget .ow-mobile-detail {\n display: none;\n background: var(--panel);\n border-radius: 18px;\n padding: 14px 14px 12px;\n }\n\n #wf-objective-widget .ow-back-btn {\n appearance: none;\n border: 0;\n background: transparent;\n color: var(--accent);\n font-weight: 700;\n font-size: 16px;\n line-height: 1;\n padding: 4px 0 10px;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n }\n\n #wf-objective-widget .ow-back-btn svg {\n width: 14px;\n height: 14px;\n stroke: currentColor;\n fill: none;\n stroke-width: 2;\n }\n\n @media (max-width: 991px) {\n #wf-objective-widget .ow-wrap {\n padding: 48px 18px 60px;\n }\n\n #wf-objective-widget .ow-main.is-active {\n grid-template-columns: 1fr;\n }\n\n #wf-objective-widget .ow-main.is-active .ow-right {\n display: none;\n }\n\n #wf-objective-widget .ow-main.is-active[data-mobile-detail='true'] .ow-left {\n display: none;\n }\n\n #wf-objective-widget .ow-main.is-active[data-mobile-detail='true'] .ow-mobile-detail {\n display: block;\n }\n\n #wf-objective-widget .ow-card {\n grid-template-columns: auto minmax(0, 1fr) auto;\n padding: 16px 16px;\n gap: 12px;\n border-radius: 16px;\n }\n\n #wf-objective-widget .ow-card-title {\n font-size: 21px;\n line-height: 1.03;\n }\n\n #wf-objective-widget .ow-card-desc {\n margin-top: 8px;\n font-size: 13px;\n line-height: 1.35;\n }\n\n #wf-objective-widget .ow-card-arrow {\n opacity: 0;\n width: 0;\n margin: 0;\n overflow: hidden;\n transition: opacity 0.18s ease;\n }\n\n #wf-objective-widget .ow-card.is-selected .ow-card-arrow {\n opacity: 1;\n width: 46px;\n height: 46px;\n background: rgba(255, 255, 255, 0.95);\n color: var(--accent);\n margin-top: 8px;\n }\n\n #wf-objective-widget .ow-card.is-selected .ow-card-arrow svg {\n width: 22px;\n height: 22px;\n stroke-width: 2.1;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-panel-head h3 {\n font-size: 18px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-panel-head p {\n font-size: 13px;\n margin-top: 7px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-panel-scroll {\n max-height: none;\n overflow: visible;\n padding-right: 0;\n margin-top: 10px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-acc-btn {\n padding: 15px 0 13px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-acc-btn-title {\n font-size: 18px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-acc-body {\n gap: 10px;\n padding-bottom: 12px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-detail-grid {\n grid-template-columns: 1fr;\n gap: 8px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-detail-box {\n padding: 10px 10px;\n border-radius: 10px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-chips {\n gap: 6px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-chip {\n font-size: 11px;\n padding: 6px 9px;\n border-radius: 7px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-cta {\n min-width: 126px;\n height: 38px;\n font-size: 13px;\n }\n }\n\n @media (max-width: 560px) {\n #wf-objective-widget .ow-wrap {\n padding: 30px 10px 42px;\n max-width: 420px;\n }\n\n #wf-objective-widget .ow-header {\n margin-bottom: 20px;\n }\n\n #wf-objective-widget .ow-header h2 {\n font-size: 27px;\n line-height: 1.14;\n max-width: 310px;\n margin-inline: auto;\n }\n\n #wf-objective-widget .ow-header p {\n margin-top: 10px;\n font-size: 12px;\n line-height: 1.35;\n max-width: 290px;\n }\n\n #wf-objective-widget .ow-left {\n gap: 12px;\n }\n\n #wf-objective-widget .ow-card {\n padding: 14px 14px;\n gap: 10px;\n border-radius: 16px;\n align-items: start;\n }\n\n #wf-objective-widget .ow-card-icon {\n width: 32px;\n height: 32px;\n }\n\n #wf-objective-widget .ow-card-icon svg {\n width: 18px;\n height: 18px;\n }\n\n #wf-objective-widget .ow-card-title {\n font-size: 17px;\n line-height: 1.02;\n }\n\n #wf-objective-widget .ow-card-desc {\n font-size: 11px;\n line-height: 1.32;\n max-width: 22ch;\n margin-top: 7px;\n }\n\n #wf-objective-widget .ow-card.is-selected .ow-card-arrow {\n width: 40px;\n height: 40px;\n margin-top: 10px;\n }\n\n #wf-objective-widget .ow-mobile-detail {\n border-radius: 16px;\n padding: 12px 12px 10px;\n }\n\n #wf-objective-widget .ow-back-btn {\n font-size: 14px;\n padding-bottom: 8px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-panel-head h3 {\n font-size: 16px;\n line-height: 1.12;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-panel-head p {\n font-size: 11px;\n line-height: 1.35;\n max-width: 28ch;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-acc-btn-title {\n font-size: 14px;\n line-height: 1.12;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-acc-btn {\n padding: 13px 0 11px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-acc-body > p {\n font-size: 11px;\n line-height: 1.32;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-detail-label {\n font-size: 10px;\n margin-bottom: 6px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-detail-box p {\n font-size: 11px;\n line-height: 1.28;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-chip {\n font-size: 10px;\n padding: 5px 8px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-cta {\n min-width: 118px;\n height: 34px;\n font-size: 12px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-divider-accent {\n height: 1px;\n margin-top: 8px;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wf-objective-widget * {\n transition: none !important;\n animation: none !important;\n }\n }\n"; document.head.appendChild(style); } (function () { var mount = document.getElementById('wf-objective-widget'); if (!mount) return; var icons = { awareness: '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M7 3.5h7.2l3.3 3.4V18a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5.5a2 2 0 0 1 2-2Z\"/><path d=\"M14 3.8V8h4.1\"/><path d=\"M10 14.4c0-1.8 1.2-3.2 3-3.2\"/><path d=\"M13 11.2l3.6 3.6\"/><path d=\"M13 14.8l2.4 4\"/></svg>', engagement: '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 17.5 10 9l3.3 4.2L20 5.5\"/><path d=\"M15.7 5.5H20v4.4\"/></svg>', traffic: '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"5.2\"/><path d=\"M12 2.8v2.4\"/><path d=\"M12 18.8v2.4\"/><path d=\"M2.8 12h2.4\"/><path d=\"M18.8 12h2.4\"/></svg>' }; var starIcon = '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2.8l2.6 5.3 5.8.9-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.9z\"/></svg>'; var arrowRightIcon = '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 12h15\"/><path d=\"m13 5 7 7-7 7\"/></svg>'; var chevronDownIcon = '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"/></svg>'; var chevronLeftIcon = '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"m15 5-7 7 7 7\"/></svg>'; var state = { selectedObjectiveId: null, openSolutionIdByObjective: {}, mobileDetailOpen: false }; var data = [ { id: 'awareness', icon: icons.awareness, title: 'Drive Awareness and Reach', shortTitle: 'Drive Awareness and Reach', description: 'Build brand recognition and maximize visibility with high-impact ad experiences.', panelTitle: 'Recommended solutions', panelSubtitle: 'Powerful solutions to connect with riders wherever they go', solutions: [ { id: 'in-app-visual-ads', title: 'In-App Visual Ads', description: 'Engaging display formats including display, video, carousel, and more across high-traffic areas on the Lyft app.', metricsLabel: 'Metrics', metrics: 'In-App Visual Ads CTR outperform industry standards by over 400%', productsLabel: 'Products', products: ['Display Ads', 'Vertical Video', 'Video Ads', 'Poster Carousel Ads'], ctaLabel: 'Learn more', ctaUrl: '#' }, { id: 'car-wrap-branding', title: 'Car Wrap Branding', description: 'Own city streets with full-fleet branded vehicles that create repeated impressions in key neighborhoods and commuter corridors.', metricsLabel: 'Metrics', metrics: 'High-frequency street-level exposure across premium urban routes', productsLabel: 'Products', products: ['Full Wrap', 'Partial Wrap', 'Market Flighting', 'City Takeover'], ctaLabel: 'Learn more', ctaUrl: '#' }, { id: 'targeting-audiences', title: 'Targeting & Audiences', description: 'Reach riders by geography, behavior, and trip context to improve awareness lift with smarter media delivery.', metricsLabel: 'Metrics', metrics: 'Audience-based targeting helps improve relevance and campaign efficiency', productsLabel: 'Products', products: ['Geo Targeting', 'Audience Segments', 'Trip Context', 'Dayparting'], ctaLabel: 'Learn more', ctaUrl: '#' }, { id: 'sponsored-map-ads', title: 'In-App Sponsored Map Ads', description: 'Appear at high-intent moments as riders browse destinations, transit hubs, and local hotspots inside the map experience.', metricsLabel: 'Metrics', metrics: 'Capture consideration at the point of planning and navigation', productsLabel: 'Products', products: ['Map Pins', 'Promoted Destinations', 'Area Highlights', 'Store Locator CTA'], ctaLabel: 'Learn more', ctaUrl: '#' } ] }, { id: 'engagement', icon: icons.engagement, title: 'Drive Engagement', shortTitle: 'Drive Engagement', description: 'Create memorable brand interactions that inspire action and drive conversions.', panelTitle: 'Recommended solutions', panelSubtitle: 'Interactive and performance-ready formats to drive rider response', solutions: [ { id: 'branded-rider-experiences', title: 'Branded Rider Experiences', description: 'Create immersive journeys with tailored creative moments during the ride flow to boost recall and engagement.', metricsLabel: 'Metrics', metrics: 'Interactive formats increase time spent and message retention', productsLabel: 'Products', products: ['Interactive Units', 'Swipe Cards', 'Rich Media', 'Timed Messaging'], ctaLabel: 'Learn more', ctaUrl: '#' }, { id: 'offer-driven-campaigns', title: 'Offer-Driven Campaigns', description: 'Pair creative with compelling offers to motivate immediate actions such as app installs, redemptions, or purchases.', metricsLabel: 'Metrics', metrics: 'Offer-led campaigns can improve click-through and conversion intent', productsLabel: 'Products', products: ['Promo Codes', 'Conversion CTA', 'Deep Links', 'Retargeting'], ctaLabel: 'Learn more', ctaUrl: '#' }, { id: 'video-storytelling', title: 'Video Storytelling', description: 'Use short-form and vertical video formats to communicate product value quickly in a mobile-native environment.', metricsLabel: 'Metrics', metrics: 'Video creative supports stronger message comprehension across mobile audiences', productsLabel: 'Products', products: ['Vertical Video', 'Short Loop', 'Sequential Messaging', 'Brand Lift Support'], ctaLabel: 'Learn more', ctaUrl: '#' }, { id: 'measurement-optimization', title: 'Measurement & Optimization', description: 'Track engagement signals and refine campaigns with audience insights, creative testing, and pacing controls.', metricsLabel: 'Metrics', metrics: 'Continuous optimization improves campaign efficiency over time', productsLabel: 'Products', products: ['A/B Testing', 'Audience Reporting', 'Pacing Controls', 'Performance Insights'], ctaLabel: 'Learn more', ctaUrl: '#' } ] }, { id: 'foot-traffic', icon: icons.traffic, title: 'Drive Foot Traffic', shortTitle: 'Drive Foot Traffic', description: 'Reach nearby riders and convert them into in-store customers with geo-targeted ads.', panelTitle: 'Recommended solutions', panelSubtitle: 'Local activation formats designed to move riders from app to storefront', solutions: [ { id: 'nearby-store-promo', title: 'Nearby Store Promotion', description: 'Activate localized placements that highlight nearby locations, promotions, and store details to encourage visits.', metricsLabel: 'Metrics', metrics: 'Localized messaging improves relevance for riders close to your stores', productsLabel: 'Products', products: ['Geo Radius', 'Store Info', 'Local Offer', 'Map CTA'], ctaLabel: 'Learn more', ctaUrl: '#' }, { id: 'event-based-targeting', title: 'Event-Based Targeting', description: 'Reach riders around concerts, games, and city events where demand spikes and nearby purchase intent is high.', metricsLabel: 'Metrics', metrics: 'Contextual event targeting helps align campaigns with peak footfall windows', productsLabel: 'Products', products: ['Venue Radius', 'Event Flighting', 'Dynamic Creative', 'Dayparting'], ctaLabel: 'Learn more', ctaUrl: '#' }, { id: 'commuter-conquesting', title: 'Commuter Conquesting', description: 'Target riders along commuting routes and transit hubs to influence destination choice and store consideration.', metricsLabel: 'Metrics', metrics: 'Transit corridor reach supports repeated exposure during routine trips', productsLabel: 'Products', products: ['Transit Hubs', 'Route Targeting', 'Morning/Evening Flights', 'Store Visit CTA'], ctaLabel: 'Learn more', ctaUrl: '#' }, { id: 'store-visit-measurement', title: 'Store Visit Measurement', description: 'Measure and optimize toward visitation outcomes with reporting frameworks built for local campaigns.', metricsLabel: 'Metrics', metrics: 'Closed-loop reporting helps evaluate media impact on store traffic', productsLabel: 'Products', products: ['Visit Lift', 'Regional Reporting', 'Campaign Insights', 'Optimization Support'], ctaLabel: 'Learn more', ctaUrl: '#' } ] } ]; data.forEach(function (objective) { state.openSolutionIdByObjective[objective.id] = objective.solutions[0] ? objective.solutions[0].id : null; }); function isMobile() { return window.matchMedia('(max-width: 991px)').matches; } function getSelectedObjective() { if (!state.selectedObjectiveId) return null; return data.find(function (obj) { return obj.id === state.selectedObjectiveId; }) || null; } function escapeHtml(value) { return String(value) .replace(/&/g, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;') .replace(/\"/g, '&quot;') .replace(/'/g, '&#39;'); } function renderCards() { return data .map(function (objective) { var isSelected = state.selectedObjectiveId === objective.id; return ( '<button type=\"button\" class=\"ow-card' + (isSelected ? ' is-selected' : '') + '\" data-objective-id=\"' + objective.id + '\" aria-pressed=\"' + (isSelected ? 'true' : 'false') + '\">' + '<span class=\"ow-card-icon\" aria-hidden=\"true\">' + objective.icon + '</span>' + '<span class=\"ow-card-body\">' + '<p class=\"ow-card-title\">' + escapeHtml(objective.title) + '</p>' + '<p class=\"ow-card-desc\">' + escapeHtml(objective.description) + '</p>' + '</span>' + '<span class=\"ow-card-arrow\" aria-hidden=\"true\">' + arrowRightIcon + '</span>' + '</button>' ); }) .join(''); } function renderSolutionItem(solution, isOpen, isLast) { var chips = solution.products .map(function (product) { return '<span class=\"ow-chip\">' + escapeHtml(product) + '</span>'; }) .join(''); return ( '<div class=\"ow-acc-item' + (isOpen ? ' is-open' : '') + '\" data-solution-id=\"' + solution.id + '\">' + '<button type=\"button\" class=\"ow-acc-btn\" aria-expanded=\"' + (isOpen ? 'true' : 'false') + '\">' + '<span class=\"ow-acc-btn-title\">' + escapeHtml(solution.title) + '</span>' + '<span class=\"ow-acc-caret\" aria-hidden=\"true\">' + chevronDownIcon + '</span>' + '</button>' + '<div class=\"ow-acc-panel\" role=\"region\" aria-hidden=\"' + (isOpen ? 'false' : 'true') + '\">' + '<div class=\"ow-acc-panel-inner\">' + '<div class=\"ow-acc-body\">' + '<p>' + escapeHtml(solution.description) + '</p>' + '<div class=\"ow-detail-grid\">' + '<div class=\"ow-detail-box\">' + '<p class=\"ow-detail-label\">' + starIcon + escapeHtml(solution.metricsLabel || 'Metrics') + '</p>' + '<p>' + escapeHtml(solution.metrics) + '</p>' + '</div>' + '<div class=\"ow-detail-box\">' + '<p class=\"ow-detail-label\">' + starIcon + escapeHtml(solution.productsLabel || 'Products') + '</p>' + '<div class=\"ow-chips\">' + chips + '</div>' + '</div>' + '</div>' + '<div class=\"ow-acc-footer\">' + '<a class=\"ow-cta\" href=\"' + escapeHtml(solution.ctaUrl || '#') + '\">' + escapeHtml(solution.ctaLabel || 'Learn more') + '</a>' + '</div>' + (!isLast ? '<div class=\"ow-divider-accent\"></div>' : '') + '</div>' + '</div>' + '</div>' + '</div>' ); } function renderPanel(objective, isMobilePanel) { if (!objective) return ''; var openId = state.openSolutionIdByObjective[objective.id]; var itemsHtml = objective.solutions .map(function (solution, index) { return renderSolutionItem( solution, openId === solution.id, index === objective.solutions.length - 1 ); }) .join(''); return ( (isMobilePanel ? '<button type=\"button\" class=\"ow-back-btn\" data-action=\"back\">' + chevronLeftIcon + '<span>Go back</span></button>' : '') + '<div class=\"ow-panel-head\">' + '<h3>' + escapeHtml(objective.panelTitle) + '</h3>' + '<p>' + escapeHtml(objective.panelSubtitle) + '</p>' + '</div>' + '<div class=\"ow-panel-scroll\">' + '<div class=\"ow-accordion\">' + itemsHtml + '</div>' + '</div>' ); } function render() { var selectedObjective = getSelectedObjective(); var active = !!selectedObjective; var mobileDetail = active && state.mobileDetailOpen && isMobile(); mount.innerHTML = '<section class=\"ow-wrap\" aria-label=\"Marketing objectives selector\">' + '<header class=\"ow-header\">' + '<h2>What\'s Your Marketing Objective?</h2>' + '<p>Choose your marketing objective and discover the perfect solution to reach your target audience.</p>' + '</header>' + '<div class=\"ow-main' + (active ? ' is-active' : '') + '\" data-mobile-detail=\"' + (mobileDetail ? 'true' : 'false') + '\">' + '<div class=\"ow-left\">' + renderCards() + '</div>' + '<aside class=\"ow-right\" aria-live=\"polite\">' + (selectedObjective ? renderPanel(selectedObjective, false) : '') + '</aside>' + '<div class=\"ow-mobile-detail\" aria-live=\"polite\">' + (mobileDetail && selectedObjective ? renderPanel(selectedObjective, true) : '') + '</div>' + '</div>' + '</section>'; } function setObjective(objectiveId) { if (state.selectedObjectiveId === objectiveId && !isMobile()) { return; } state.selectedObjectiveId = objectiveId; state.mobileDetailOpen = isMobile(); if (!state.openSolutionIdByObjective[objectiveId]) { var objective = data.find(function (obj) { return obj.id === objectiveId; }); state.openSolutionIdByObjective[objectiveId] = objective && objective.solutions[0] ? objective.solutions[0].id : null; } render(); } function setOpenSolution(solutionId) { var selectedObjective = getSelectedObjective(); if (!selectedObjective) return; state.openSolutionIdByObjective[selectedObjective.id] = state.openSolutionIdByObjective[selectedObjective.id] === solutionId ? null : solutionId; render(); } mount.addEventListener('click', function (event) { var card = event.target.closest('.ow-card'); if (card && mount.contains(card)) { setObjective(card.getAttribute('data-objective-id')); return; } var back = event.target.closest('[data-action=\"back\"]'); if (back && mount.contains(back)) { state.mobileDetailOpen = false; render(); return; } var accBtn = event.target.closest('.ow-acc-btn'); if (accBtn && mount.contains(accBtn)) { var accItem = accBtn.closest('.ow-acc-item'); if (accItem) { setOpenSolution(accItem.getAttribute('data-solution-id')); } } }); window.addEventListener('resize', function () { if (!state.selectedObjectiveId) return; if (!isMobile()) { state.mobileDetailOpen = false; } render(); }); render(); })(); })();