1<!-- 2 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 3 SOURCE OF TRUTH: GitHub repo ambassador-website 4 Path: src/templates/layouts/base.html (branch: main) 5 6 DO NOT EDIT IN DESIGN MANAGER OR VIA THE CLAUDE / HUBSPOT MCP CONNECTOR. 7 Changes made here will be overwritten on the next deploy from git. 8 For changes, open a PR in the repo or ping Ethan in Slack. 9 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 10--><!doctype html><html lang="en"><head> 11 <meta charset="utf-8"> 12 <title>Platform</title> 13 <link rel="shortcut icon" href="https://getambassador.com/hubfs/Ambassador%20-%20Icon%2c%20Transparent-1.png"> 14 <meta name="description" content=""> 15 <link rel="preconnect" href="https://fonts.googleapis.com"> 16 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 17 <link rel="preconnect" href="https://js.hsforms.net" crossorigin> 18 <link rel="preconnect" href="https://forms.hubspot.com" crossorigin> 19 <link rel="preconnect" href="https://www.g2.com" crossorigin> 20 <link rel="preload" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&
20family=Raleway:wght@800&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'"> 21 <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Raleway:wght@800&display=swap"></noscript> 22 23 24 25 26 27 <meta name="viewport" content="width=device-width, initial-scale=1"> 28 29 30 <meta property="og:description" content=""> 31 <meta property="og:title" content="Platform"> 32 <meta name="twitter:description" content=""> 33 <meta name="twitter:title" content="Platform"> 34 35 36 37 38 <style> 39a.cta_button{-moz-box-sizing:content-box !important;-webkit-box-sizing:content-box !important;box-sizing:content-box !important;vertical-align:middle}.hs-breadcrumb-menu{list-style-type:none;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px}.hs-breadcrumb-menu-item{float:left;padding:10px 0px 10px 10px}.hs-breadcrumb-menu-divider:before{content:'âº';padding-left:10px}.hs-featured-image-link{border:0}.hs-featured-image{float:right;margin:0 0 20px 20px;max-width:50%}@media (max-width: 568px){.hs-featured-image{float:none;margin:0;width:100%;max-width:100%}}.hs-screen-reader-text{clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute !important;width:1px} 40</style> 41 42<link rel="stylesheet" href="https://getambassador.com/hubfs/hub_generated/template_assets/1/321618318019/1782829173174/template_main.min.css"> 43<link rel="stylesheet" href="https://getambassador.com/hubfs/hub_generated/template_assets/1/321603514092/1782829176555/template_theme-overrides.min.css"> 44<style> 45 @font-face { 46 font-family: "Lato"; 47 font-weight: 400; 48 font-style: normal; 49 font-display: swap; 50 src: url("/_hcms/googlefonts/Lato/regular.woff2") format("woff2"), url("/_hcms/googlefonts/Lato/regular.woff") format("woff"); 51 } 52 @font-face { 53 font-family: "Lato"; 54 font-weight: 700; 55 font-style: normal; 56 font-display: swap; 57 src: url("/_hcms/googlefonts/Lato/700.woff2") format("woff2"), url("/_hcms/googlefonts/Lato/700.woff") format("woff"); 58 } 59 @font-face { 60 font-family: "Merriweather"; 61 font-weight: 400; 62 font-style: normal; 63 font-display: swap; 64 src: url("/_hcms/googlefonts/Merriweather/regular.woff2") format("woff2"), url("/_hcms/googlefonts/Merriweather/regular.woff") format("woff"); 65 } 66 @font-face { 67 font-family: "Merriweather"; 68 font-weight: 700; 69 font-style: normal; 70 font-display: swap; 71 src: url("/_hcms/googlefonts/Merriweather/700.woff2") format("woff2"), url("/_hcms/googlefonts/Merriweather/700.woff") format("woff"); 72 } 73</style> 74 75 76 77 78<!-- Added by GoogleAnalytics4 integration -->
79<script data-cookieconsent="ignore"> 80var _hsp = window._hsp = window._hsp || []; 81window.dataLayer = window.dataLayer || []; 82function gtag(){dataLayer.push(arguments);} 83 84var useGoogleConsentModeV2 = true; 85var waitForUpdateMillis = 1000; 86 87 88if (!window._hsGoogleConsentRunOnce) { 89 window._hsGoogleConsentRunOnce = true; 90 91 gtag('consent', 'default', { 92 'ad_storage': 'denied', 93 'analytics_storage': 'denied', 94 'ad_user_data': 'denied', 95 'ad_personalization': 'denied', 96 'wait_for_update': waitForUpdateMillis 97 }); 98 99 if (useGoogleConsentModeV2) { 100 _hsp.push(['useGoogleConsentModeV2']) 101 } else { 102 _hsp.push(['addPrivacyConsentListener', function(consent){ 103 var hasAnalyticsConsent = consent && (consent.allowed || (consent.categories && consent.categories.analytics)); 104 var hasAdsConsent = consent && (consent.allowed || (consent.categories && consent.categories.advertisement)); 105 106 gtag('consent', 'update', { 107 'ad_storage': hasAdsConsent ? 'granted' : 'denied', 108 'analytics_storage': hasAnalyticsConsent ? 'granted' : 'denied', 109 'ad_user_data': hasAdsConsent ? 'granted' : 'denied', 110 'ad_personalization': hasAdsConsent ? 'granted' : 'denied' 111 }); 112 }]); 113 } 114} 115 116gtag('js', new Date()); 117gtag('set', 'developer_id.dZTQ1Zm', true); 118gtag('config', 'G-2CHRCDRML8'); 119</script>
vendor: 92 bytes, lines 119-120
119 120<script data-cookieconsent="ignore" async src="https://www.googletagmanager.com/gtag/js?id=
120G-2CHRCDRML8
vendor: 13 bytes, lines 120-121
120"></script> 121
122<!-- /Added by GoogleAnalytics4 integration --> 123 124<!-- Added by GoogleTagManager integration -->
125<script data-cookieconsent="ignore"> 126var _hsp = window._hsp = window._hsp || []; 127window.dataLayer = window.dataLayer || []; 128function gtag(){dataLayer.push(arguments);} 129 130var useGoogleConsentModeV2 = true; 131var waitForUpdateMillis = 1000; 132 133if (useGoogleConsentModeV2) { 134 135 gtag('set','developer_id.dZTQ1Zm',true); 136 137 gtag('consent', 'default', { 138 'ad_storage': 'denied', 139 'analytics_storage': 'denied', 140 'ad_user_data': 'denied', 141 'ad_personalization': 'denied', 142 'wait_for_update': waitForUpdateMillis 143 }); 144} 145 146var hsLoadGtm = function loadGtm() { 147 if(window._hsGtmLoadOnce) { 148 return; 149 } 150 151 if (useGoogleConsentModeV2) { 152 _hsp.push(['useGoogleConsentModeV2']) 153 }
vendor: 349 bytes, lines 153-159
153 154 155 (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 156 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 157 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 158 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 159 })(window,document,'script','dataLayer','
159GTM-MS4V6QS
vendor: 9 bytes, lines 159-161
159'); 160 161
161window._hsGtmLoadOnce = true; 162}; 163 164_hsp.push(['addPrivacyConsentListener', function(consent){ 165 if(consent.allowed || (consent.categories && consent.categories.analytics)){ 166 hsLoadGtm(); 167 } 168}]); 169 170</script>
170 171 172<!-- /Added by GoogleTagManager integration --> 173 174 <link rel="canonical" href="https://getambassador.com/platform"> 175 176<style> 177 /* ===== Layout ===== */ 178 179 [data-hsfc-id=Renderer] .hsfc-Row{ 180 gap: 15px !important; 181 margin-bottom: 2px !important; 182 } 183 184 [id*="d40a74d2-e075-4eec-9296-f1ca663d9291"][id*="hs_form_target_form"] button[type="submit"]{ 185 width: 100% !important; 186 font-size: 16px !important; 187 } 188 189 .hsfc-FieldLabel__RequiredIndicator{ 190 display: none !important; 191 } 192 193 .hsfc-Form .hsfc-TextInput, 194 .hsfc-Form select, 195 .hsfc-Form textarea { 196 outline: none !important; 197 border: 2px solid #CFC6D6; 198 color: #CFC6D6; 199 border-radius: 6px; 200 padding: 18px; 201 height: 55px; 202 font-size: 16px !important; 203 font-weight: 600; 204 box-sizing: border-box; 205 width: 100%; 206 background: #fff; 207 } 208</style> 209
210<script> 211 window.addEventListener("message", function(event) { 212 // HubSpot global form events send postMessage payloads 213 if (!event.data || typeof event.data !== "object") return; 214 215 const attachForm = document.querySelector('[id*="d40a74d2-e075-4eec-9296-f1ca663d9291"]') 216 const enhanced_email = attachForm?.querySelector('[name*="email"]'); 217 const enhancedNumEmployees = attachForm?.querySelector('[placeholder*="Employee"]') 218 219 if (event.data.formGuid === "d40a74d2-e075-4eec-9296-f1ca663d9291") { 220 console.log("HubSpot form submitted!", event.data); 221 window.dataLayer = window.dataLayer || []; 222 window.dataLayer.push({ event: 'bookMeetingForm', email: enhanced_email?.value, numEmployees: enhancedNumEmployees?.value }); 223 } 224 }); 225</script>
225 226<meta property="og:url" content="https://getambassador.com/platform"> 227<meta name="twitter:card" content="summary"> 228<meta http-equiv="content-language" content="en"> 229 230 231 232 233 234<meta name="robots" content="noindex"> 235 <style> 236 @font-face { font-family: 'Merriweather'; src: local('Georgia'); font-weight: 400; font-style: normal; font-display: optional; } 237 @font-face { font-family: 'Merriweather'; src: local('Georgia'); font-weight: 700; font-style: normal; font-display: optional; } 238 @font-face { font-family: 'Merriweather'; src: local('Georgia'); font-weight: 400; font-style: italic; font-display: optional; } 239 @font-face { font-family: 'Merriweather Sans'; src: local('Arial'); font-weight: 400; font-style: normal; font-display: optional; } 240 @font-face { font-family: 'Merriweather Sans'; src: local('Arial'); font-weight: 700; font-style: normal; font-display: optional; } 241 @font-face { font-family: 'Lato'; src: local('Arial'); font-weight: 400; font-style: normal; font-display: optional; } 242 @font-face { font-family: 'Lato'; src: local('Arial'); font-weight: 700; font-style: normal; font-display: optional; } 243 @font-face { font-family: 'Lato'; src: local('Arial'); font-weight: 400; font-style: italic; font-display: optional; } 244 </style> 245 <link rel="service-doc" href="https://docs.getambassador.com/"> 246 <link rel="service-doc" href="https://knowledgebase.getambassador.com/"> 247 248
248<script type="application/ld+json"> 249 { 250 "@context": "https://schema.org", 251 "@type": "Organization", 252 "@id": "https://getambassador.com/#organization", 253 "name": "Ambassador", 254 "legalName": "i2H, Inc. dba Ambassador", 255 "url": "https://getambassador.com/", 256 "address": { 257 "@type": "PostalAddress", 258 "streetAddress": "2212 Queen Anne Ave North, Suite 767", 259 "addressLocality": "Seattle", 260 "addressRegion": "WA", 261 "postalCode": "98109", 262 "addressCountry": "US" 263 } 264 } 265 </script>
265 266 <meta name="generator" content="HubSpot"></head> 267 <body> 268<!-- Added by GoogleTagManager integration -->
vendor: 68 bytes, lines 268-269
268 269<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
269GTM-MS4V6QS
vendor: 84 bytes, lines 269-270
269" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> 270
271<!-- /Added by GoogleTagManager integration --> 272 273 <div class="body-wrapper hs-content-id-322457806582 hs-site-page page "> 274 275 <!-- 276 ======================================================================== 277 SOURCE OF TRUTH: GitHub repo ambassador-website 278 Path: src/templates/partials/header.html (branch: main) 279 280 DO NOT EDIT IN DESIGN MANAGER OR VIA THE CLAUDE / HUBSPOT MCP CONNECTOR. 281 Changes made here will be overwritten on the next deploy from git. 282 For changes, open a PR in the repo or ping Ethan in Slack. 283 ======================================================================== 284--> 285 286<style> 287/* ââââââââââââââââââââââââââââââââââââââââââ 288 SITE NAV v5 â Always visible, scroll enhances 289 Default: white background, always shown 290 Scroll adds shadow + border refinement 291ââââââââââââââââââââââââââââââââââââââââââ */ 292 293/* Skip link */ 294.nav-skip { 295 position: absolute; 296 top: -100px; 297 left: 0; 298 padding: 8px 16px; 299 background: #1A3BAE; 300 color: #fff; 301 font-size: 14px; 302 font-weight: 600; 303 text-decoration: none; 304 z-index: 9999; 305 border-radius: 0 0 6px 0; 306 transition: top 0.1s; 307} 308.nav-skip:focus { top: 0; } 309 310/* ââ Outer shell: always visible ââ */ 311.nav-site { 312 position: fixed; 313 top: 0; left: 0; right: 0; 314 z-index: 1000; 315 /* Much more translucent + stronger blur + saturate so the nav reads as 316 a frosted-glass strip rather than a hard white rectangle on dark 317 sections. Hard edges (border, shadow) removed at rest; subtle ones 318 come back via .nav--scrolled. */ 319 background: rgba(255,255,255,0.55); 320 border-bottom: 1px solid transparent; 321 box-shadow: none; 322 backdrop-filter: blur(20px) saturate(160%); 323 -webkit-backdrop-filter: blur(20px) saturate(160%); 324 font-family: 'DM Sans', Arial, sans-serif; 325 overflow: visible; 326 transition: background 300ms ease, box-shadow 300ms ease, border-color 300ms ease; 327} 328 329.nav-site__inner { 330 max-width: 1200px; 331 margin: 0 auto; 332 padding: 0 32px; 333 height: 72px; 334 display: flex; 335 align-items: center; 336 gap: 0; 337 position: relative; 338 overflow: visible; 339} 340 341/* ââ Logo ââ */ 342.nav-site__logo { 343 display: flex; 344 align-items: center; 345 flex-shrink: 0; 346 text-decoration: none; 347 margin-right: 40px; 348 overflow: visible; 349 min-width: 160px; 350} 351.nav-site__logo .nav-site__mark { 352 width: 40px; 353 height: 40px; 354 flex-shrink: 0; 355 display: block; 356} 357.nav-site__wordmark { 358 margin-left: 9px; 359 font-family: 'Raleway', sans-serif; 360 font-size: 18px; 361 font-weight: 800; 362 letter-spacing: 0.18em; 363 text-transform: uppercase; 364 color: #0F1F3D; 365 line-height: 1; 366} 367 368/* ââ Primary nav ââ */ 369.nav-site__nav { flex: 1; min-width: 0; } 370 371.nav-site .menu { 372 list-style: none; 373 margin: 0; padding: 0; 374 display: flex; 375 align-items: center; 376 gap: 2px; 377} 378 379/* ââ Nav links ââ */ 380.nav-site .menu__link, 381.nav-site .menu__toggle { 382 display: inline-flex; 383 align-items: center; 384 gap: 4px; 385 padding: 8px 14px; 386 font-size: 14px; 387 font-weight: 500; 388 color: #0F1F3D; 389 text-decoration: none; 390 background: none; 391 border: none; 392 cursor: pointer; 393 border-radius: 7px; 394 transition: color 250ms ease, background-color 250ms ease; 395 white-space: nowrap; 396 line-height: 1; 397 min-height: 36px; 398} 399.nav-site .menu__link:hover, 400.nav-site .menu__toggle:hover {
401 color: #1A3BAE; 402 background-color: #EFF6FF; 403} 404 405/* Chevron */ 406.nav-site .menu__toggle::after { display: none !important; content: none !important; } 407.nav-site .menu__toggle .nav-chevron { 408 width: 14px; height: 14px; 409 flex-shrink: 0; 410 transition: transform 0.25s ease; 411} 412.nav-site .menu__item--drop.open .nav-chevron { 413 transform: rotate(180deg); 414} 415 416/* ââ Mega menu panel ââ */ 417.nav-site .menu__item--drop { 418 position: relative; 419 align-self: stretch; 420 display: flex; 421 align-items: center; 422 height: 72px; 423} 424.nav-site .nav-mega { 425 display: flex; 426 opacity: 0; 427 visibility: hidden; 428 pointer-events: none; 429 position: absolute; 430 top: 100%; 431 left: 0; 432 width: max-content; 433 background: #ffffff; 434 border: 1px solid #CDCFD6; 435 border-radius: 12px; 436 box-shadow: 0 8px 32px rgba(0,0,0,0.10); 437 padding: 8px 24px 24px; 438 z-index: 200; 439 transition: opacity 160ms ease-out, visibility 160ms ease-out; 440} 441.nav-site .menu__item--mega-global { 442 position: relative; 443 align-self: stretch; 444 display: flex; 445 align-items: center; 446} 447.nav-site .menu__item--drop .nav-mega__col { 448 flex: 0 0 200px; 449 min-width: 0; 450} 451.nav-site .nav-mega__col--strategy .nav-mega__link { white-space: normal; line-height: 1.35; } 452 453.nav-site .menu__item--drop:hover .nav-mega, 454.nav-site .menu__item--drop.open .nav-mega { 455 opacity: 1; 456 visibility: visible; 457 pointer-events: auto; 458} 459 460/* Mega inner */ 461.nav-site .nav-mega__inner { display: flex; gap: 28px; } 462.nav-site .nav-mega__col { min-width: 140px; } 463.nav-site .nav-mega__heading { 464 font-size: 12px; 465 font-weight: 700; 466 letter-spacing: 0.08em; 467 text-transform: uppercase; 468 color: #606F9F; 469 margin: 0 0 12px 4px; 470} 471.nav-site .nav-mega__list { 472 list-style: none; 473 margin: 0; padding: 0; 474 display: flex; 475 flex-direction: column; 476 gap: 1px; 477} 478.nav-site .nav-mega__link { 479 display: flex; 480 align-items: center; 481 padding: 10px 16px; 482 font-size: 14px; 483 font-weight: 400; 484 color: #0F1F3D; 485 text-decoration: none; 486 border-radius: 6px; 487 min-height: 44px; 488 transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; 489 white-space: nowrap; 490} 491.nav-site .nav-mega__link:hover { background-color: #F8FAFC; } 492.nav-site .nav-mega__link--disabled { 493 color: #606F9F; 494 pointer-events: none; 495 cursor: default; 496} 497 498/* Coming soon badge */ 499.nav-mega__badge { 500 display: inline-flex; 501 align-items: center; 502 margin-left: 8px; 503 padding: 1px 7px; 504 font-size: 12px; 505 font-weight: 500; 506 color: #606F9F; 507 background: #F1F5F9; 508 border-radius: 99px; 509} 510/* "New" pill -- green tint, matches GROW column accent. */ 511.nav-mega__badge--new { 512 color: #095839; 513 background: rgba(7, 151, 105, 0.08); 514 font-weight: 600; 515 letter-spacing: 0.04em; 516} 517 518/* Column top borders + heading colors */ 519/* Vibrant accent treatment (approved June 2026): borders and headings use the 520 pillar FACE colors so the menus don't read dark/dramatic. Blue accents use 521 blue/500 #1C48D9 (7:1, passes AAA). Green/orange faces sit below 4.5:1 at 522 12px -- accepted deviation for one-word uppercase headings; hover TEXT on 523 green/orange columns keeps the deep steps for 14px legibility. Purple is 524 HiroAI-only, so Strategy and Program Type columns take the blue treatment. */ 525.nav-site .nav-mega__col--overview { border-top: 3px solid #1C48D9; padding-top: 12px; } 526.nav-site .nav-mega__col--grow { border-top: 3px solid #079769; padding-top: 12px; } 527.nav-site .nav-mega__col--keep { border-top: 3px solid #EC7313; padding-top: 12px; } 528.nav-site .nav-mega__col--prove { border-top: 3px solid #1C48D9; padding-top: 12px; } 529.nav-site .nav-mega__col--solutions { border-top: 3px solid #1C48D9; padding-top: 16px; } 530.nav-site .nav-mega__col--strategy { border-top: 3px solid #1C48D9; padding-top: 16px; } 531.nav-site .nav-mega__col--program-type { border-top: 3px solid #1C48D9; padding-top: 16px; } 532 533.nav-site .nav-mega__col--overview .nav-mega__heading { color: #1C48D9; } 534.nav-site .nav-mega__col--grow .nav-mega__heading { color: #079769; } 535.nav-site .nav-mega__col--keep .nav-mega__heading { color: #EC7313; } 536.nav-site .nav-mega__col--prove .nav-mega__heading { color: #1C48D9; } 537.nav-site .nav-mega__col--solutions .nav-mega__heading { color: #1C48D9; } 538.nav-site .nav-mega__col--strategy .nav-mega__heading { color: #1C48D9; } 539.nav-site .nav-mega__col--program-type .nav-mega__heading { color: #1C48D9; } 540
541.nav-site .nav-mega__col--overview .nav-mega__link:hover { color: #1C48D9; box-shadow: inset 3px 0 0 #1C48D9; background-color: #F8FAFC; } 542.nav-site .nav-mega__col--grow .nav-mega__link:hover { color: #095839; box-shadow: inset 3px 0 0 #079769; background-color: #F8FAFC; } 543.nav-site .nav-mega__col--keep .nav-mega__link:hover { color: #934910; box-shadow: inset 3px 0 0 #EC7313; background-color: #F8FAFC; } 544.nav-site .nav-mega__col--prove .nav-mega__link:hover { color: #1C48D9; box-shadow: inset 3px 0 0 #1C48D9; background-color: #F8FAFC; } 545.nav-site .nav-mega__col--solutions .nav-mega__link:hover { color: #1C48D9; box-shadow: inset 3px 0 0 #1C48D9; background-color: #F8FAFC; } 546.nav-site .nav-mega__col--strategy .nav-mega__link:hover { color: #1C48D9; box-shadow: inset 3px 0 0 #1C48D9; background-color: #F8FAFC; } 547.nav-site .nav-mega__col--program-type .nav-mega__link:hover { color: #1C48D9; box-shadow: inset 3px 0 0 #1C48D9; background-color: #F8FAFC; } 548 549/* ââ Right side: Login + Demo CTA ââ */ 550.nav-site__right { 551 display: flex; 552 align-items: center; 553 gap: 6px; 554 flex-shrink: 0; 555 margin-left: 24px; 556} 557.nav-site__login { 558 padding: 8px 14px; 559 font-size: 14px; 560 font-weight: 500; 561 color: #606F9F; 562 text-decoration: none; 563 border-radius: 7px; 564 transition: color 200ms ease, background-color 200ms ease; 565 white-space: nowrap; 566} 567.nav-site__login:hover { 568 color: #1A3BAE; 569 background-color: #EFF6FF; 570} 571/* Pin all states -- HubSpot compiled CSS otherwise recolors the link on 572 focus/active (canonical pattern: .faq-demo-btn in partials/faq.html). */ 573.nav-site__demo-btn, 574.nav-site__demo-btn:link, 575.nav-site__demo-btn:visited, 576.nav-site__demo-btn:hover, 577.nav-site__demo-btn:focus, 578.nav-site__demo-btn:active { 579 color: #ffffff; 580 text-decoration: none; 581} 582.nav-site__demo-btn { 583 padding: 9px 20px; 584 font-size: 14px; 585 font-weight: 600; 586 line-height: 1.4; 587 background: #1A3BAE; 588 border: 1px solid #1A3BAE; 589 border-radius: 8px; 590 transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease; 591 white-space: nowrap; 592 display: inline-flex; 593 align-items: center; 594 min-height: 38px; 595} 596.nav-site__demo-btn:hover { 597 background: #11215B; 598 border-color: #11215B; 599 box-shadow: 0 4px 14px rgba(26,59,174,0.28); 600} 601.nav-site__demo-btn:focus-visible { 602 outline: 2px solid #3B63E8; 603 outline-offset: 2px; 604} 605 606/* ââ Mobile hamburger toggle ââ */ 607.nav-site .nav-mobile-toggle { 608 display: none; 609 flex-direction: column; 610 justify-content: center; 611 gap: 5px; 612 background: none; 613 border: none; 614 cursor: pointer; 615 padding: 8px; 616 margin-left: auto; 617 flex-shrink: 0; 618} 619.nav-site .nav-mobile-toggle span { 620 display: block; 621 width: 22px; 622 height: 2px; 623 background: #324278; 624 border-radius: 2px; 625 transition: transform 0.2s ease, opacity 0.2s ease; 626} 627.nav-site .nav-mobile-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } 628.nav-site .nav-mobile-toggle.is-active span:nth-child(2) { opacity: 0; } 629.nav-site .nav-mobile-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } 630 631/* Mobile-only CTA block â hidden on desktop */ 632.nav-mobile-cta { display: none; } 633 634/* ââ Scroll enhancement ââ */ 635.nav-site.nav--scrolled { 636 background: rgba(255,255,255,0.7); 637 border-bottom-color: rgba(205,207,214,0.4); 638 box-shadow: 0 1px 8px rgba(0,0,0,0.03); 639} 640 641/* ââ Mobile layout ââ */ 642@media (max-width: 767px) { 643 .nav-site__inner { padding: 0 16px; } 644 .nav-site .nav-site__nav { display: none; } 645 /* Hide the right-side bar entirely â Login + Get Demo move into the drawer */ 646 .nav-site .nav-site__right { display: none; } 647 .nav-site .nav-mobile-toggle { display: flex; } 648 649 /* Get Demo button inside mobile drawer */ 650 .nav-mobile-cta { 651 display: flex; 652 flex-direction: column; 653 gap: 8px; 654 padding: 16px 8px 8px; 655 border-top: 1px solid #CDCFD6; 656 margin-top: 8px; 657 } 658 .nav-mobile-cta__demo { 659 display: block; 660 text-align: center; 661 padding: 12px 20px; 662 background: #1A3BAE; 663 color: #fff; 664 font-size: 15px; 665 font-weight: 600; 666 border-radius: 8px; 667 text-decoration: none; 668 } 669 .nav-mobile-cta__login { 670 display: block; 671 text-align: center; 672 padding: 10px 20px; 673 color: #606F9F; 674 font-size: 14px; 675 font-weight: 500; 676 text-decoration: none; 677 border-radius: 8px; 678 } 679 680 /* Mobile nav drawer */ 681 .nav-site .nav-site__nav.is-open { 682 display: block; 683 position: absolute; 684 top: 72px; 685 left: 0; right: 0; 686 background: #ffffff; 687 border-top: 1px solid #CDCFD6; 688 border-bottom: 1px solid #CDCFD6; 689 padding: 12px 20px 24px; 690 box-shadow: 0 8px 24px rgba(15,31,61,0.10); 691 z-index: 999; 692 max-height: calc(100vh - 72px); 693 overflow-y: auto; 694 -webkit-overflow-scrolling: touch; 695 } 696 697 .nav-site .menu { flex-direction: column; align-items: stretch; gap: 0; } 698 .nav-site .menu__item { width: 100%; } 699 .nav-site .menu__item--drop { height: auto; } 700 .nav-site .menu__link, 701 .nav-site .menu__toggle { 702 width: 100%; 703 justify-content: space-between; 704 padding: 13px 8px; 705 border-bottom: 1px solid #F1F5F9; 706 border-radius: 0; 707 font-size: 15px; 708 color: #0F1F3D; 709 } 710 .nav-site .menu__item:last-child .menu__link { border-bottom: none; } 711 712 /* Mobile mega: inline accordion */ 713 .nav-site .nav-mega { 714 display: none; 715 opacity: 1; visibility: visible; pointer-events: auto; 716 transform: none; position: static; 717 border: none; border-radius: 0; box-shadow: none; 718 padding: 4px 0 12px 12px; 719 min-width: 0; background: #F8FAFC; transition: none; 720 } 721 .nav-site .menu__item--drop.is-open .nav-mega { display: flex; } 722 .nav-site .menu__item--drop.is-open .nav-chevron { transform: rotate(180deg); } 723 .nav-site .nav-mega__inner { flex-direction: column; gap: 16px; padding: 8px 0; } 724 .nav-site .nav-mega__col { min-width: 0; } 725 .nav-site .nav-mega__link { white-space: normal; font-size: 14px; padding: 6px 10px; min-height: 0; } 726 .nav-site .nav-mega__col--overview, 727 .nav-site .nav-mega__col--grow, 728 .nav-site .nav-mega__col--keep, 729 .nav-site .nav-mega__col--prove, 730 .nav-site .nav-mega__col--solutions { border-top: none; padding-top: 0; } 731} 732</style> 733 734 735<a class="nav-skip" href="#main-content">Skip to main content</a> 736 737 738<header class="nav-site" id="ambNav" role="banner"> 739 <div class="nav-site__inner"> 740 741 <a class="nav-site__logo" href="/?hsLang=en" aria-label="Ambassador -- Home"> 742 <svg class="nav-site__mark" width="40" height="40" viewbox="9 10 62 62" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"> 743 <defs> 744 <radialgradient id="ambHubNav" cx="38%" cy="34%" r="62%"> 745 <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.95" /> 746 <stop offset="22%" stop-color="#9457F7" /> 747 <stop offset="60%" stop-color="#5F11E4" /> 748 <stop offset="100%" stop-color="#3B0E8C" /> 749 </radialgradient> 750 <filter id="ambHubNavShadow" x="-60%" y="-60%" width="220%" height="220%"> 751 <fedropshadow dx="0" dy="0.5" stdDeviation="0.85" flood-color="#0B0620" flood-opacity="0.35" /> 752 </filter> 753 </defs> 754 <line x1="40" y1="17.6" x2="14.1" y2="62.4" stroke="#C4CEDE" stroke-width="1.15" stroke-linecap="round" opacity="0.95" /> 755 <line x1="14.1" y1="62.4" x2="65.9" y2="62.4" stroke="#C4CEDE" stroke-width="1.15" stroke-linecap="round" opacity="0.95" /> 756 <line x1="65.9" y1="62.4" x2="40" y2="17.6" stroke="#C4CEDE" stroke-width="1.15" stroke-linecap="round" opacity="0.95" /> 757 <line x1="40" y1="47.5" x2="40" y2="17.6" stroke="#9457F7" stroke-width="0.75" stroke-linecap="round" opacity="0.55" /> 758 <line x1="40" y1="47.5" x2="14.1" y2="62.4" stroke="#9457F7" stroke-width="0.75" stroke-linecap="round" opacity="0.55" /> 759 <line x1="40" y1="47.5" x2="65.9" y2="62.4" stroke="#9457F7" stroke-width="0.75" stroke-linecap="round" opacity="0.55" /> 760 <circle cx="40" cy="17.6" r="4.25" fill="#1C48D9" /> 761 <circle cx="14.1" cy="62.4" r="4.25" fill="#1C48D9" /> 762 <circle cx="65.9" cy="62.4" r="4.25" fill="#1C48D9" /> 763 <circle cx="40" cy="47.5" r="7.6" fill="url(#ambHubNav)" filter="url
763(#ambHubNavShadow)" /> 764 </svg> 765 <span class="nav-site__wordmark">AMBASSADOR</span> 766 </a> 767 768 769 <nav class="nav-site__nav" id="ambNavMenu" aria-label="Site navigation"> 770 <ul class="menu" role="list"> 771 772 773 <li class="menu__item menu__item--drop menu__item--mega-global"> 774 <button class="menu__toggle" type="button" aria-haspopup="true" aria-expanded="false"> 775 Platform 776 <svg class="nav-chevron" viewbox="0 0 16 16" fill="none" aria-hidden="true" focusable="false"> 777 <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> 778 </svg> 779 </button> 780 781 <div class="nav-mega" role="region" aria-label="Platform menu"> 782 <div class="nav-mega__inner"> 783 784 <div class="nav-mega__col nav-mega__col--overview"> 785 <p class="nav-mega__heading">Overview</p> 786 <ul class="nav-mega__list"> 787 <li><a class="nav-mega__link" href="/platform?hsLang=en">Platform Overview</a></li> 788 <li><a class="nav-mega__link" href="/ambassador-hiroai?hsLang=en">HiroAI</a></li> 789 <li><a class="nav-mega__link" href="https://getambassador.com/integrations-layer?hsLang=en">Integrations</a></li> 790 </ul> 791 </div> 792 793 <div class="nav-mega__col nav-mega__col--grow"> 794 <p class="nav-mega__heading">GROW</p> 795 <ul class="nav-mega__list"> 796 <li><a class="nav-mega__link" href="/advocacy-engine?hsLang=en">Advocacy</a></li> 797 <li><a class="nav-mega__link" href="/prospect-intelligence-engine?hsLang=en">Prospect</a></li> 798 <li><a class="nav-mega__link" href="/programmatic?hsLang=en">Programmatic <span class="nav-mega__badge nav-mega__badge--new">New</span></a></li> 799 </ul> 800 </div> 801 802 <div class="nav-mega__col nav-mega__col--keep"> 803 <p class="nav-mega__heading">KEEP</p> 804 <ul class="nav-mega__list"> 805 <li><a class="nav-mega__link" href="/customer-value-engine?hsLang=en">Retention</a></li> 806 <li><a class="nav-mega__link" href="/incentive-storefront-engine?hsLang=en">Incentive</a></li> 807 <li><a class="nav-mega__link" href="/communication-cloud-engine?hsLang=en">Communication</a></li> 808 </ul> 809 </div> 810 811 <div class="nav-mega__col nav-mega__col--prove"> 812 <p class="nav-mega__heading">PROVE</p> 813 <ul class="nav-mega__list"> 814 <li><a class="nav-mega__link" href="/predictive-recommendation-engine?hsLang=en">Predictive</a></li> 815 <li><span class="nav-mega__link nav-mega__link--disabled">Attribution <span class="nav-mega__badge">Coming soon</span></span></li> 816 <li><span class="nav-mega__link nav-mega__link--disabled">Finance <span class="nav-mega__badge">Coming soon</span></span></li> 817 </ul> 818 </div> 819 820 </div> 821 </div> 822 </li> 823 824 825 <li class="menu__item menu__item--drop"> 826 <button class="menu__toggle" type="button" aria-haspopup="true" aria-expanded="false"> 827 Solutions 828 <svg class="nav-chevron" viewbox="0 0 16 16" fill="none" aria-hidden="true" focusable="false"> 829 <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> 830 </svg> 831 </button> 832 833 <div class="nav-mega nav-mega--wide" role="region" aria-label="Solutions menu"> 834 <div class="nav-mega__inner"> 835 836 <div class="nav-mega__col nav-mega__col--solutions"> 837 <p class="nav-mega__heading">By Industry</p> 838 <ul class="nav-mega__list"> 839 <li><a class="nav-mega__link" href="https://getambassador.com/telecom?hsLang=en">Telecom</a></li> 840 <li><span class="nav-mega__link nav-mega__link--disabled">CPaaS <span class="nav-mega__badge">Coming soon</span></span></li> 841 <li><span class="nav-mega__link nav-mega__link--disabled">SaaS <span class="nav-mega__badge">Coming soon</span></span></li> 842 <li><span class="nav-mega__link nav-mega__link--disabled">FinTech <span class="nav-mega__badge">Coming soon</span></span></li> 843 </ul> 844 </div> 845 846 <div class="nav-mega__col nav-mega__col--strategy"> 847 <p class="nav-mega__heading">By Strategy</p> 848 <ul class="nav-mega__list"> 849 <li><a class="nav-mega__link" href="/customer-growth?hsLang=en">Customer Growth Overview</a></li> 850 <li><a class="nav-mega__link" href="https://getambassador.com/customer-growth-strategy?hsLang=en">Build your Customer Growth Strategy</a></li> 851 </ul> 852 </div> 853 854 <div class="nav-mega__col nav-mega__col--program-type"> 855 <p class="nav-mega__heading">By Program Type</p> 856 <ul class="nav-mega__list"> 857 <li><a class="nav-mega__link" href="/solutions/program-type/affiliate-marketing-software?hsLang=en">Affiliates</a></li> 858 <li><a class="nav-mega__link" href="/solutions/program-type/referral-marketing-software?hsLang=en">Referrals</a></li> 859 <li><a class="nav-mega__link" href="/solutions/program-type/influencer-marketing-platform?hsLang=en">Influencers</a></li> 860 <li><a class="nav-mega__link" href="/solutions/program-type/loyalty-program-software?hsLang=en">Loyalty</a></li> 861 </ul> 862 </div> 863 864 </div> 865 </div> 866 </li> 867 868 <li class="menu__item"><a class="menu__link" href="https://getambassador.com/why-ambassador?hsLang=en">Why Ambassador</a></li> 869 <li class="menu__item"><a class="menu__link" href="/resources?hsLang=en">Resources</a></li> 870 <li class="menu__item"><a class="menu__link" href="https://getambassador.com/pricing-ent?hsLang=en">Pricing</a></li> 871 872 </ul> 873 874 875 <div class="nav-mobile-cta"> 876 <a class="nav-mobile-cta__demo" href="https://getambassador.com/get-a-demo/?hsLang=en">Get Demo</a> 877 <a class="nav-mobile-cta__login" href="https://admin2.getambassador.com/login">Login</a> 878 </div> 879 880 </nav> 881 882 883 <div class="nav-site__right"> 884 <a class="nav-site__login" href="https://admin2.getambassador.com/login">Login</a> 885 <a class="nav-site__demo-btn" href="https://getambassador.com/get-a-demo/?hsLang=en">Get Demo</a> 886 </div> 887 888 889 <button class="nav-mobile-toggle" id="ambNavToggle" aria-expanded="false" aria-controls="ambNavMenu" aria-label="Open navigation">
890 <span></span> 891 <span></span> 892 <span></span> 893 </button> 894 895 </div> 896</header> 897
898<script> 899/* ââ Desktop dropdown: hover + click toggle ââ */ 900(function () { 901 var timers = {}; 902 var dropItems = document.querySelectorAll('.menu__item--drop'); 903 904 function setExpanded(item, isOpen) { 905 var toggle = item.querySelector('.menu__toggle'); 906 if (toggle) toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false'); 907 } 908 909 function fullClose(item) { 910 item.classList.remove('open'); 911 delete item.dataset.pinned; 912 setExpanded(item, false); 913 } 914 915 dropItems.forEach(function (item, idx) { 916 var mega = item.querySelector('.nav-mega'); 917 var toggleBtn = item.querySelector('.menu__toggle'); 918 if (!mega) return; 919 920 function openMenu() { 921 if (timers[idx]) { clearTimeout(timers[idx]); timers[idx] = null; } 922 dropItems.forEach(function (other) { 923 if (other !== item) fullClose(other); 924 }); 925 item.classList.add('open'); 926 setExpanded(item, true); 927 } 928 function scheduleClose() { 929 if (item.dataset.pinned === 'true') return; 930 timers[idx] = setTimeout(function () { 931 fullClose(item); 932 timers[idx] = null; 933 }, 200); 934 } 935 function cancelClose() { 936 if (timers[idx]) { clearTimeout(timers[idx]); timers[idx] = null; } 937 } 938 939 item.addEventListener('mouseenter', openMenu); 940 item.addEventListener('mouseleave', scheduleClose); 941 mega.addEventListener('mouseenter', cancelClose); 942 mega.addEventListener('mouseleave', scheduleClose); 943 944 if (toggleBtn) { 945 toggleBtn.addEventListener('click', function (e) { 946 if (window.innerWidth <= 767) return; 947 e.preventDefault(); 948 e.stopPropagation(); 949 if (item.dataset.pinned === 'true') { 950 fullClose(item); 951 } else { 952 item.dataset.pinned = 'true'; 953 openMenu(); 954 } 955 }); 956 } 957 }); 958 959 document.addEventListener('click', function (e) { 960 if (window.innerWidth <= 767) return; 961 dropItems.forEach(function (item) { 962 if (item.dataset.pinned === 'true' && !item.contains(e.target)) { 963 fullClose(item); 964 } 965 }); 966 }); 967 968 document.addEventListener('keydown', function (e) { 969 if (e.key !== 'Escape') return; 970 dropItems.forEach(fullClose); 971 }); 972})(); 973 974/* ââ Mobile hamburger toggle ââ */ 975(function () { 976 var toggle = document.getElementById('ambNavToggle'); 977 var menu = document.getElementById('ambNavMenu'); 978 if (!toggle || !menu) return; 979 980 toggle.addEventListener('click', function () { 981 var isOpen = menu.classList.toggle('is-open'); 982 toggle.classList.toggle('is-active', isOpen); 983 toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false'); 984 toggle.setAttribute('aria-label', isOpen ? 'Close navigation' : 'Open navigation'); 985 }); 986 987 /* Mobile: accordion for dropdown items */ 988 menu.querySelectorAll('.menu__item--drop .menu__toggle').forEach(function (btn) { 989 btn.addEventListener('click', function (e) { 990 /* Only intercept on mobile */ 991 if (window.innerWidth > 767) return; 992 e.stopPropagation(); 993 var item = btn.closest('.menu__item--drop'); 994 var isOpen = item.classList.toggle('is-open'); 995 btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false'); 996 }); 997 }); 998 999 /* Close drawer when a nav link is tapped */ 1000 menu.querySelectorAll('.nav-mega__link:not(.nav-mega__link--disabled), .menu__link').forEach(function (link) { 1001 link.addEventListener('click', function () { 1002 menu.classList.remove('is-open'); 1003 toggle.classList.remove('is-active'); 1004 toggle.setAttribute('aria-expanded', 'false'); 1005 toggle.setAttribute('aria-label', 'Open navigation'); 1006 }); 1007 }); 1008 1009 /* Close on outside click */ 1010 document.addEventListener('click', function (e) { 1011 if (!menu.contains(e.target) && !toggle.contains(e.target)) { 1012 menu.classList.remove('is-open'); 1013 toggle.classList.remove('is-active'); 1014 toggle.setAttribute('aria-expanded', 'false'); 1015 } 1016 }); 1017})(); 1018 1019/* ââ Scroll enhancement: deeper shadow on scroll ââ */ 1020(function () { 1021 var nav = document.getElementById('ambNav'); 1022 if (!nav) return; 1023 function checkScroll() { 1024 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || 0; 1025 nav.classList.toggle('nav--scrolled', scrollTop > 40); 1026 } 1027 window.addEventListener('scroll', function () { requestAnimationFrame(checkScroll); }, { passive: true }); 1028 checkScroll(); 1029})(); 1030</script>
1030 1031 1032 1033 1034 1035 <main id="main-content" class="body-container-wrapper"> 1036 1037 1038 1039 1040<style> 1041 1042/* ââ BASE DESIGN SYSTEM (shared, scoped to .hp3) ââ */ 1043 1044.hp3 { 1045 --navy: #0F1F3D; 1046 --blue: #1E40AF; 1047 --accent: #3B82F6; 1048 --green: #059669; 1049 --amber: #D97706; 1050 --text: #334155; 1051 --muted: #475569; 1052 --soft: #64748B; 1053 --border: #E2E8F0; 1054 --white: #FFFFFF; 1055 --offwhite: #F8FAFC; 1056 --dark-bg: #0F1F3D; 1057 --dark-card: #0A1628; 1058 --dark-border: #1E3A5F; 1059 color: var(--text); 1060 font-family: 'DM Sans', Arial, sans-serif; 1061 line-height: 1.6; 1062} 1063.hp3 *, .hp3 *::before, .hp3 *::after { font-family: inherit; } 1064.hp3 h1, .hp3 h2, .hp3 h3, .hp3 h4 { 1065 font-family: Arial, Helvetica, sans-serif; 1066 font-weight: 900; 1067 text-transform: uppercase; 1068 line-height: 1.1; 1069 margin: 0; 1070 letter-spacing: -0.02em; 1071} 1072.hp3 .container { 1073 max-width: 1160px; 1074 margin: 0 auto; 1075 padding: 0 32px; 1076} 1077.hp3 .sec { padding: 88px 0; } 1078.hp3 .sec--sm { padding: 56px 0; } 1079.hp3 .sec--white { background: var(--white); } 1080.hp3 .sec--offwhite { background: var(--offwhite); } 1081.hp3 .sec--dark { 1082 background: var(--dark-bg); 1083 color: var(--offwhite); 1084} 1085.hp3 .sec--dark h2, 1086.hp3 .sec--dark h3, 1087.hp3 .sec--dark h4 { color: var(--offwhite); } 1088.hp3 .sec--gradient { 1089 background: linear-gradient(135deg, #0A1628 0%, #0F1F3D 100%); 1090 color: var(--offwhite); 1091} 1092.hp3 .sec--gradient h2, 1093.hp3 .sec--gradient h3 { color: var(--offwhite); } 1094 1095.hp3 .eyebrow { 1096 display: inline-flex; 1097 align-items: center; 1098 gap: 10px; 1099 font-size: 11px; 1100 font-weight: 700; 1101 letter-spacing: 0.12em; 1102 text-transform: uppercase; 1103 color: var(--accent); 1104 margin-bottom: 16px; 1105} 1106.hp3 .eyebrow::before { 1107 content: ''; 1108 display: block; 1109 width: 20px; 1110 height: 2px; 1111 background: currentColor; 1112 border-radius: 2px; 1113 flex-shrink: 0; 1114} 1115.hp3 .sec--dark .eyebrow, 1116.hp3 .sec--gradient .eyebrow { color: #60A5FA; } 1117 1118.hp3 .sec-h2 { 1119 font-size: clamp(32px, 4vw, 44px); 1120 font-weight: 700; 1121 margin-bottom: 16px; 1122 color: var(--navy); 1123} 1124.hp3 .sec--dark .sec-h2, 1125.hp3 .sec--gradient .sec-h2 { color: var(--offwhite); } 1126 1127.hp3 .sec-sub { 1128 font-size: 18px; 1129 line-height: 1.65; 1130 color: var(--muted); 1131 max-width: 640px; 1132 margin: 0; 1133 font-weight: 400; 1134} 1135.hp3 .sec--dark .sec-sub, 1136.hp3 .sec--gradient .sec-sub { color: #94A3B8; } 1137 1138.hp3 .sec-header { margin-bottom: 56px; } 1139.hp3 .sec-header--center { text-align: center; margin-bottom: 56px; } 1140.hp3 .sec-header--center .sec-sub { margin-left: auto; margin-right: auto; } 1141 1142.hp3 .btn-primary { 1143 display: inline-flex; 1144 align-items: center; 1145 padding: 14px 28px; 1146 font-size: 15px; 1147 font-weight: 600; 1148 color: #ffffff; 1149 background: var(--blue); 1150 text-decoration: none; 1151 border-radius: 6px; 1152 border: none; 1153 cursor: pointer; 1154 transition: all 200ms ease; 1155 white-space: nowrap; 1156 animation: btn-cta-pulse 4s ease-in-out infinite; 1157} 1158.hp3 .btn-primary:hover { 1159 background: #1E3A8A; 1160 box-shadow: 0 0 20px rgba(30, 64, 175, 0.35); 1161} 1162.hp3 .btn-ghost { 1163 display: inline-flex; 1164 align-items: center; 1165 padding: 14px 28px; 1166 font-size: 15px; 1167 font-weight: 400; 1168 color: var(--muted); 1169 background: transparent; 1170 text-decoration: none; 1171 border-radius: 6px; 1172 border: 1px solid #CBD5E1; 1173 cursor: pointer; 1174 transition: all 200ms ease; 1175 white-space: nowrap; 1176} 1177.hp3 .btn-ghost:hover { border-color: var(--blue); color: var(--blue); } 1178.hp3 .sec--dark .btn-ghost, 1179.hp3 .sec--gradient .btn-ghost { 1180 color: var(--offwhite); 1181 border-color: rgba(255, 255, 255, 0.22); 1182} 1183.hp3 .sec--dark .btn-ghost:hover, 1184.hp3 .sec--gradient .btn-ghost:hover { 1185 border-color: rgba(255, 255, 255, 0.5); 1186 background: rgba(255, 255, 255, 0.06); 1187} 1188.hp3 .cta-group { 1189 display: flex; 1190 align-items: center; 1191 gap: 12px; 1192 flex-wrap: wrap; 1193} 1194 1195/* Scroll reveal */ 1196.hp3 .sr { 1197 opacity: 0; 1198 transform: translateY(16px); 1199 transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1), 1200 transform 400ms cubic-bezier(0.16, 1, 0.3, 1); 1201} 1202.hp3 .sr.in-view { opacity: 1; transform: translateY(0); } 1203.hp3 .sr-d1 { transition-delay: 0ms; } 1204.hp3 .sr-d2 { transition-delay: 100ms; } 1205.hp3 .sr-d3 { transition-delay: 200ms; } 1206.hp3 .sr-d4 { transition-delay: 300ms; } 1207 1208 1209/* ââââââââââââââââââââââââââââââââââââââââââ 1210 HERO 1211ââââââââââââââââââââââââââââââââââââââââââ */ 1212 1213.hp3 .pl-hero { 1214 background: linear-gradient(160deg, #ffffff 0%, #f0f4ff 100%); 1215 padding: 48px 0 96px; 1216 margin-top: -72px; 1217 text-align: center; 1218 position: relative; 1219 overflow: hidden; 1220} 1221.hp3 .pl-hero::before { 1222 content: '7'; 1223 position: absolute; 1224 top: 50%; 1225 left: 50%; 1226 transform: translate(-50%, -50%); 1227 font-size: 40vw; 1228 font-weight: 800; 1229 letter-spacing: -0.06em; 1230 color: rgba(30, 64, 175, 0.025); 1231 pointer-events: none; 1232 line-height: 1; 1233 font-family: 'DM Sans', Arial, sans-serif; 1234} 1235.hp3 .pl-hero__inner { 1236 max-width: 800px; 1237 margin: 0 auto; 1238 padding: 0 32px; 1239 position: relative; 1240 z-index: 1; 1241} 1242.hp3 .pl-hero__h1 { 1243 font-size: clamp(36px, 5vw, 62px); 1244 font-weight: 800; 1245 line-height: 1.08; 1246 color: var(--navy); 1247 letter-spacing: -0.03em; 1248 margin-bottom: 24px; 1249} 1250.hp3 .pl-hero__h1 em { 1251 font-style: normal; 1252 background: linear-gradient(90deg, #1E40AF 0%, #3B82F6 100%); 1253 -webkit-background-clip: text; 1254 -webkit-text-fill-color: transparent; 1255 background-clip: text; 1256} 1257.hp3 .pl-hero__sub { 1258 font-size: 18px; 1259 line-height: 1.7; 1260 color: var(--muted); 1261 max-width: 660px; 1262 margin: 0 auto 40px; 1263} 1264 1265/* Pillar chips below CTA */ 1266.hp3 .pl-hero__pillars { 1267 display: flex; 1268 align-items: center; 1269 justify-content: center; 1270 gap: 12px; 1271 margin-top: 36px; 1272 flex-wrap: wrap; 1273} 1274.hp3 .pl-hero__pillar { 1275 padding: 8px 18px; 1276 border-radius: 99px; 1277 font-size: 11px; 1278 font-weight: 700; 1279 letter-spacing: 0.1em; 1280 text-transform: uppercase; 1281} 1282.hp3 .pl-hero__pillar--grow { background: rgba(5, 150, 105, 0.1); color: #059669; } 1283.hp3 .pl-hero__pillar--keep { background: rgba(217, 119, 6, 0.1); color: #D97706; } 1284.hp3 .pl-hero__pillar--prove { background: rgba(30, 64, 175, 0.1); color: #1E40AF; } 1285.hp3 .pl-hero__pillar-sep { color: #CBD5E1; font-size: 18px; line-height: 1; } 1286 1287 1288/* ââââââââââââââââââââââââââââââââââââââââââ 1289 SECTION 1 â THE FRAMEWORK
1290 GROW / KEEP / PROVE visual triadic 1291ââââââââââââââââââââââââââââââââââââââââââ */ 1292 1293.hp3 .pl-framework { 1294 display: grid; 1295 grid-template-columns: repeat(3, 1fr); 1296 gap: 20px; 1297 margin-top: 16px; 1298} 1299 1300.hp3 .pl-framework__col { 1301 border-radius: 14px; 1302 padding: 32px 28px; 1303 border: 1px solid var(--border); 1304 background: var(--white); 1305 transition: transform 200ms ease, box-shadow 200ms ease; 1306} 1307.hp3 .pl-framework__col:hover { 1308 transform: translateY(-4px); 1309 box-shadow: 0 12px 32px rgba(0,0,0,0.08); 1310} 1311.hp3 .pl-framework__col--grow { border-top: 5px solid #059669; } 1312.hp3 .pl-framework__col--keep { border-top: 5px solid #D97706; } 1313.hp3 .pl-framework__col--prove { border-top: 5px solid #1E40AF; } 1314 1315.hp3 .pl-framework__label { 1316 font-size: 11px; 1317 font-weight: 800; 1318 letter-spacing: 0.12em; 1319 text-transform: uppercase; 1320 margin-bottom: 12px; 1321} 1322.hp3 .pl-framework__col--grow .pl-framework__label { color: #059669; } 1323.hp3 .pl-framework__col--keep .pl-framework__label { color: #D97706; } 1324.hp3 .pl-framework__col--prove .pl-framework__label { color: #1E40AF; } 1325 1326.hp3 .pl-framework__h3 { 1327 font-size: 17px; 1328 font-weight: 700; 1329 color: var(--navy); 1330 margin-bottom: 10px; 1331} 1332 1333.hp3 .pl-framework__p { 1334 font-size: 14px; 1335 line-height: 1.65; 1336 color: var(--muted); 1337 margin-bottom: 16px; 1338} 1339 1340.hp3 .pl-framework__engines { 1341 font-size: 12px; 1342 color: var(--soft); 1343 line-height: 1.7; 1344} 1345 1346.hp3 .pl-framework__link { 1347 display: inline-flex; 1348 align-items: center; 1349 gap: 4px; 1350 font-size: 13px; 1351 font-weight: 600; 1352 text-decoration: none; 1353 margin-top: 16px; 1354 transition: opacity 150ms ease; 1355} 1356.hp3 .pl-framework__col--grow .pl-framework__link { color: #059669; } 1357.hp3 .pl-framework__col--keep .pl-framework__link { color: #D97706; } 1358.hp3 .pl-framework__col--prove .pl-framework__link { color: #1E40AF; } 1359.hp3 .pl-framework__link:hover { opacity: 0.75; } 1360 1361 1362/* ââââââââââââââââââââââââââââââââââââââââââ 1363 ENGINE PILLAR SECTIONS (GROW / KEEP / PROVE) 1364 Each section: intro copy + engine card grid 1365ââââââââââââââââââââââââââââââââââââââââââ */ 1366 1367/* Pillar intro row */ 1368.hp3 .pl-pillar__intro { 1369 display: grid; 1370 grid-template-columns: 1fr 1fr; 1371 gap: 64px; 1372 align-items: start; 1373 margin-bottom: 48px; 1374} 1375 1376.hp3 .pl-pillar__badge { 1377 display: inline-flex; 1378 align-items: center; 1379 gap: 8px; 1380 font-size: 11px; 1381 font-weight: 800; 1382 letter-spacing: 0.12em; 1383 text-transform: uppercase; 1384 margin-bottom: 14px; 1385} 1386.hp3 .pl-pillar__badge::before { 1387 content: ''; 1388 display: block; 1389 width: 16px; 1390 height: 3px; 1391 border-radius: 2px; 1392 flex-shrink: 0; 1393} 1394.hp3 .pl-pillar__badge--grow { color: #059669; } 1395.hp3 .pl-pillar__badge--grow::before { background: #059669; } 1396.hp3 .pl-pillar__badge--keep { color: #D97706; } 1397.hp3 .pl-pillar__badge--keep::before { background: #D97706; } 1398.hp3 .pl-pillar__badge--prove { color: #1E40AF; } 1399.hp3 .pl-pillar__badge--prove::before { background: #1E40AF; } 1400 1401.hp3 .pl-pillar__h2 { 1402 font-size: clamp(26px, 3vw, 36px); 1403 font-weight: 700; 1404 color: var(--navy); 1405 margin-bottom: 16px; 1406 letter-spacing: -0.025em; 1407} 1408.hp3 .sec--dark .pl-pillar__h2 { color: var(--offwhite); } 1409 1410.hp3 .pl-pillar__body { 1411 font-size: 16px; 1412 line-height: 1.7; 1413 color: var(--muted); 1414} 1415.hp3 .sec--dark .pl-pillar__body { color: #94A3B8; } 1416 1417/* Engine cards grid */ 1418.hp3 .pl-engines { 1419 display: grid; 1420 grid-template-columns: repeat(3, 1fr); 1421 gap: 20px; 1422} 1423.hp3 .pl-engines--two { grid-template-columns: repeat(2, 1fr); } 1424 1425.hp3 .pl-engine-card { 1426 background: var(--white); 1427 border: 1px solid var(--border); 1428 border-radius: 12px; 1429 padding: 28px 24px 24px; 1430 display: flex; 1431 flex-direction: column; 1432 box-shadow: 0 2px 12px rgba(0,0,0,0.04); 1433 transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), 1434 box-shadow 220ms ease, 1435 border-color 220ms ease; 1436} 1437.hp3 .pl-engine-card:hover { 1438 transform: translateY(-4px); 1439 box-shadow: 0 12px 32px rgba(0,0,0,0.09); 1440} 1441 1442/* Dark section engine cards */ 1443.hp3 .sec--dark .pl-engine-card { 1444 background: var(--dark-card); 1445 border-color: var(--dark-border); 1446} 1447.hp3 .sec--dark .pl-engine-card:hover { border-color: #3B82F6; } 1448 1449/* Pillar accent bars on cards */
1450.hp3 .pl-engine-card--grow { border-top: 4px solid #059669; } 1451.hp3 .pl-engine-card--keep { border-top: 4px solid #D97706; } 1452.hp3 .pl-engine-card--prove { border-top: 4px solid #1E40AF; } 1453 1454.hp3 .pl-engine-card--grow:hover { border-color: #059669; border-top-color: #059669; } 1455.hp3 .pl-engine-card--keep:hover { border-color: #D97706; border-top-color: #D97706; } 1456.hp3 .pl-engine-card--prove:hover { border-color: #1E40AF; border-top-color: #1E40AF; } 1457 1458.hp3 .pl-engine-card__name { 1459 font-size: 16px; 1460 font-weight: 700; 1461 color: var(--navy); 1462 margin-bottom: 8px; 1463} 1464.hp3 .sec--dark .pl-engine-card__name { color: var(--offwhite); } 1465 1466.hp3 .pl-engine-card__desc { 1467 font-size: 14px; 1468 line-height: 1.65; 1469 color: var(--muted); 1470 flex: 1; 1471 margin-bottom: 20px; 1472} 1473.hp3 .sec--dark .pl-engine-card__desc { color: #64748B; } 1474 1475.hp3 .pl-engine-card__link { 1476 display: inline-flex; 1477 align-items: center; 1478 gap: 4px; 1479 font-size: 13px; 1480 font-weight: 600; 1481 text-decoration: none; 1482 margin-top: auto; 1483 transition: transform 150ms ease; 1484} 1485.hp3 .pl-engine-card--grow .pl-engine-card__link { color: #059669; } 1486.hp3 .pl-engine-card--keep .pl-engine-card__link { color: #D97706; } 1487.hp3 .pl-engine-card--prove .pl-engine-card__link { color: #3B82F6; } 1488.hp3 .pl-engine-card__link:hover { transform: translateX(4px); } 1489 1490 1491/* ââââââââââââââââââââââââââââââââââââââââââ 1492 SECTION 5 â HIROAI BAND 1493 Full-width dark band. Connective layer. 1494ââââââââââââââââââââââââââââââââââââââââââ */ 1495 1496.hp3 .pl-hiro { 1497 background: linear-gradient(135deg, #0A1628 0%, #1a0a3d 50%, #0F1F3D 100%); 1498 padding: 96px 0; 1499 color: var(--offwhite); 1500 text-align: center; 1501 position: relative; 1502 overflow: hidden; 1503} 1504.hp3 .pl-hiro::before { 1505 content: ''; 1506 position: absolute; 1507 inset: 0; 1508 background: radial-gradient(ellipse at 50% 0%, rgba(124,58,237,0.12) 0%, transparent 65%); 1509 pointer-events: none; 1510} 1511.hp3 .pl-hiro__inner { 1512 max-width: 760px; 1513 margin: 0 auto; 1514 padding: 0 32px; 1515 position: relative; 1516 z-index: 1; 1517} 1518.hp3 .pl-hiro__eyebrow { 1519 display: inline-flex; 1520 align-items: center; 1521 gap: 10px; 1522 font-size: 11px; 1523 font-weight: 700; 1524 letter-spacing: 0.12em; 1525 text-transform: uppercase; 1526 color: #A78BFA; 1527 margin-bottom: 20px; 1528} 1529.hp3 .pl-hiro__eyebrow::before { 1530 content: ''; 1531 display: block; 1532 width: 20px; 1533 height: 2px; 1534 background: currentColor; 1535 border-radius: 2px; 1536} 1537.hp3 .pl-hiro__h2 { 1538 font-size: clamp(30px, 4vw, 48px); 1539 font-weight: 800; 1540 color: var(--offwhite); 1541 margin-bottom: 20px; 1542 letter-spacing: -0.025em; 1543} 1544.hp3 .pl-hiro__h2 span { 1545 background: linear-gradient(90deg, #A78BFA 0%, #818CF8 100%); 1546 -webkit-background-clip: text; 1547 -webkit-text-fill-color: transparent; 1548 background-clip: text; 1549} 1550.hp3 .pl-hiro__body { 1551 font-size: 17px; 1552 line-height: 1.75; 1553 color: #94A3B8; 1554 margin-bottom: 40px; 1555} 1556.hp3 .pl-hiro__body strong { color: var(--offwhite); font-weight: 600; } 1557.hp3 .pl-hiro__chips { 1558 display: flex; 1559 align-items: center; 1560 justify-content: center; 1561 gap: 10px; 1562 flex-wrap: wrap; 1563} 1564.hp3 .pl-hiro__chip { 1565 padding: 8px 16px; 1566 border-radius: 99px; 1567 border: 1px solid rgba(167, 139, 250, 0.25); 1568 background: rgba(167, 139, 250, 0.08); 1569 font-size: 12px; 1570 font-weight: 600; 1571 color: #C4B5FD; 1572} 1573 1574 1575/* ââââââââââââââââââââââââââââââââââââââââââ 1576 SECTION 6 â SOCIAL PROOF 1577ââââââââââââââââââââââââââââââââââââââââââ */ 1578 1579.hp3 .pl-quotes { 1580 display: grid; 1581 grid-template-columns: repeat(3, 1fr); 1582 gap: 24px; 1583} 1584 1585.hp3 .pl-quote { 1586 background: var(--white); 1587 border: 1px solid var(--border); 1588 border-radius: 14px; 1589 padding: 32px 28px; 1590 display: flex; 1591 flex-direction: column; 1592 box-shadow: 0 2px 12px rgba(0,0,0,0.04); 1593 transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease; 1594} 1595.hp3 .pl-quote:hover { 1596 transform: translateY(-4px); 1597 box-shadow: 0 12px 32px rgba(0,0,0,0.09); 1598} 1599.hp3 .pl-quote__mark { 1600 font-size: 48px; 1601 line-height: 1; 1602 color: rgba(59, 130, 246, 0.2); 1603 margin-bottom: 8px; 1604} 1605.hp3 .pl-quote__text { 1606 font-size: 14px; 1607 line-height: 1.72; 1608 color: var(--muted); 1609 font-style: italic; 1610 flex: 1; 1611 margin-bottom: 24px; 1612} 1613.hp3 .pl-quote__author { 1614 border-top: 1px solid var(--border); 1615 padding-top: 18px; 1616 display: flex; 1617 align-items: center; 1618 gap: 12px; 1619} 1620.hp3 .pl-quote__avatar { 1621 width: 36px; 1622 height: 36px; 1623 border-radius: 50%; 1624 background: var(--blue); 1625 color: #fff; 1626 font-size: 11px; 1627 font-weight: 700; 1628 display: flex; 1629 align-items: center; 1630 justify-content: center; 1631 flex-shrink: 0; 1632 font-style: normal; 1633 letter-spacing: 0.05em; 1634} 1635.hp3 .pl-quote__avatar--green { background: #059669; } 1636.hp3 .pl-quote__avatar--amber { background: #D97706; } 1637.hp3 .pl-quote__name { 1638 font-size: 13px; 1639 font-weight: 700; 1640 color: var(--navy); 1641 margin-bottom: 2px; 1642 font-style: normal; 1643} 1644.hp3 .pl-quote__role { 1645 font-size: 11px; 1646 color: #94A3B8; 1647 text-transform: uppercase; 1648 letter-spacing: 0.06em; 1649 font-style: normal; 1650} 1651 1652 1653/* ââââââââââââââââââââââââââââââââââââââââââ 1654 CLOSING CTA 1655ââââââââââââââââââââââââââââââââââââââââââ */ 1656 1657.hp3 .pl-cta { text-align: center; } 1658.hp3 .pl-cta-h2 { 1659 font-size: clamp(28px, 4vw, 44px); 1660 font-weight: 800; 1661 color: var(--offwhite); 1662 margin-bottom: 0; 1663 letter-spacing: -0.02em; 1664} 1665.hp3 .pl-cta-accent { color: #60A5FA; } 1666.hp3 .pl-cta-body { 1667 font-size: 16px; 1668 line-height: 1.75; 1669 color: #64748B; 1670 max-width: 560px; 1671 margin: 20px auto 36px; 1672} 1673.hp3 .pl-cta .cta-group { justify-content: center; margin-bottom: 0; } 1674 1675@keyframes pl-cta-pulse { 1676 0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.15); } 1677 50% { box-shadow: 0 0 24px 6px rgba(59, 130, 246, 0.45); } 1678} 1679.hp3 .pl-cta .btn-primary { animation: pl-cta-pulse 4s ease-in-out infinite; } 1680 1681 1682/* ââ RESPONSIVE ââââââââââââââââââââââââââââ */ 1683 1684@media (max-width: 960px) { 1685 .hp3 .pl-framework { grid-template-columns: 1fr; max-width: 480px; margin: 16px auto 0; } 1686 .hp3 .pl-pillar__intro { grid-template-columns: 1fr; gap: 24px; } 1687 .hp3 .pl-quotes { grid-template-columns: 1fr 1fr; } 1688} 1689@media (max-width: 767px) { 1690 .hp3 .sec { padding: 56px 0; } 1691 .hp3 .container { padding: 0 20px; } 1692 .hp3 .pl-hero { padding: 56px 0 64px; } 1693 .hp3 .pl-hero__h1 { font-size: clamp(28px, 8vw, 40px); } 1694 .hp3 .pl-engines, 1695 .hp3 .pl-engines--two { grid-template-columns: 1fr; } 1696 .hp3 .pl-quotes { grid-template-columns: 1fr; } 1697 .hp3 .sec-h2 { font-size: 28px; } 1698} 1699 1700</style> 1701 1702 1703<div class="hp3"> 1704 1705 1706 <section class="pl-hero" aria-label="Platform hero"> 1707 <div class="pl-hero__inner"> 1708 1709 <p class="eyebrow sr sr-d1">Platform Overview</p> 1710 1711 <h1 class="pl-hero__h1 sr sr-d1"> 1712 One platform. Seven engines.<br> 1713 <em>One revenue number.</em> 1714 </h1> 1715 1716 <p class="pl-hero__sub sr sr-d2"> 1717 Most enterprise teams are running growth, retention, and attribution in separate tools 1718 with no connection between them. Ambassador fixes that. Every engine shares data, 1719 every signal triggers action, and every outcome rolls up to a single number your 1720 CFO will stand behind. 1721 </p> 1722 1723 <div class="cta-group sr sr-d3" style="justify-content: center;"> 1724 <a class="btn-primary" href="https://getambassador.com/get-a-demo/?hsLang=en">Get Demo</a> 1725 </div> 1726 1727 <div class="pl-hero__pillars sr sr-d4">
1728 <span class="pl-hero__pillar pl-hero__pillar--grow">Grow</span> 1729 <span class="pl-hero__pillar-sep">·</span> 1730 <span class="pl-hero__pillar pl-hero__pillar--keep">Keep</span> 1731 <span class="pl-hero__pillar-sep">·</span> 1732 <span class="pl-hero__pillar pl-hero__pillar--prove">Prove</span> 1733 </div> 1734 1735 </div> 1736 </section> 1737 1738 1739 1740 <section class="sec sec--offwhite" aria-label="The framework"> 1741 <div class="container"> 1742 1743 <div class="sec-header sec-header--center sr"> 1744 <p class="eyebrow">The Framework</p> 1745 <h2 class="sec-h2">Built around the three outcomes your C-suite actually measures.</h2> 1746 <p class="sec-sub"> 1747 Ambassador is organized around a simple premise. Revenue teams need to grow new business 1748 from the customers they already have, protect retention before the exit window closes, 1749 and prove the ROI of every program they run. The platform is built in that exact order. 1750 </p> 1751 </div> 1752 1753 <div class="pl-framework"> 1754 1755 <div class="pl-framework__col pl-framework__col--grow sr sr-d1"> 1756 <div class="pl-framework__label">Grow</div> 1757 <h3 class="pl-framework__h3">Revenue from customers you already have</h3> 1758 <p class="pl-framework__p">Turn existing customers into a structured, attributed acquisition engine across referral, advocacy, and affiliate programs.</p> 1759 <div class="pl-framework__engines">3 engines â Advocacy · Incentive Storefront · Prospect Intelligence</div> 1760 <a class="pl-framework__link" href="#grow">See GROW engines âº</a> 1761 </div> 1762 1763 <div class="pl-framework__col pl-framework__col--keep sr sr-d2"> 1764 <div class="pl-framework__label">Keep</div> 1765 <h3 class="pl-framework__h3">Retention that protects the number</h3> 1766 <p class="pl-framework__p">Surface churn signals weeks before customers exit and act on them automatically, without adding headcount.</p> 1767 <div class="pl-framework__engines">3 engines â Customer Value · Communication Cloud · Predictive & Recommendation</div> 1768 <a class="pl-framework__link" href="#keep">See KEEP engines âº</a> 1769 </div> 1770 1771 <div class="pl-framework__col pl-framework__col--prove sr sr-d3"> 1772 <div class="pl-framework__label">Prove</div> 1773 <h3 class="pl-framework__h3">Attribution your CFO will trust</h3> 1774 <p class="pl-framework__p">Every program, every touchpoint, every engine runs through a single attribution layer. Direct Salesforce sync. Board-ready reporting.</p> 1775 <div class="pl-framework__engines">2 engines â Data & Intelligence Layer · Integrations Layer</div> 1776 <a class="pl-framework__link" href="#prove">See PROVE engines âº</a> 1777 </div> 1778 1779 </div> 1780 </div> 1781 </section> 1782 1783 1784 1785 <section class="sec sec--white" id="grow" aria-label="GROW engines"> 1786 <div class="container"> 1787 1788 <div class="pl-pillar__intro sr"> 1789 <div> 1790 <div class="pl-pillar__badge pl-pillar__badge--grow">Grow</div> 1791 <h2 class="pl-pillar__h2">Revenue from customers you already have.</h2> 1792 </div> 1793 <p class="pl-pillar__body"> 1794 Your best acquisition channel is already inside your CRM. Ambassador turns existing customers 1795 into a structured, attributed acquisition engine so referral, advocacy, and affiliate programs 1796 stop being activities and start being a revenue line. 1797 </p> 1798 </div> 1799 1800 <div class="pl-engines"> 1801 1802 <div class="pl-engine-card pl-engine-card--grow sr sr-d1" id="advocacy-engine"> 1803 <div class="pl-engine-card__name">Advocacy Engine</div> 1804 <p class="pl-engine-card__desc"> 1805 Power customer, affiliate, influencer, and employee programs. Full eligibility tracking, 1806 participation data, and attribution in one place. Turn every advocate into a measurable 1807 acquisition channel. 1808 </p> 1809 <a class="pl-engine-card__link" href="/advocacy-engine?hsLang=en">Learn More âº</a> 1810 </div> 1811 1812 <div class="pl-engine-card pl-engine-card--grow sr sr-d2" id="incentive-storefront-engine"> 1813 <div class="pl-engine-card__name">Incentive Storefront Engine</div> 1814 <p class="pl-engine-card__desc"> 1815 Issue, store, track, and redeem incentives across centralized storefronts and ledgers. 1816 No more manual fulfillment, no more reconciliation overhead. Every reward is tracked 1817 from issuance to redemption. 1818 </p> 1819 <a class="pl-engine-card__link" href="/incentive-storefront-engine?hsLang=en">Learn More âº</a> 1820 </div> 1821 1822 <div class="pl-engine-card pl-engine-card--grow sr sr-d3" id="prospect-intelligence-engine"> 1823 <div class="pl-engine-card__name">Prospect Intelligence Engine</div> 1824 <p class="pl-engine-card__desc"> 1825 Convert advocate signals into qualified pipeline. Capture early-stage behavioral data 1826 before a prospect ever fills out a form. Your advocates become your most reliable 1827 pipeline signal. 1828 </p> 1829 <a class="pl-engine-card__link" href="/prospect-intelligence-engine?hsLang=en">Learn More âº</a> 1830 </div> 1831 1832 </div> 1833 </div> 1834 </section> 1835 1836 1837 1838 <section class="sec sec--offwhite" id="keep" aria-label="KEEP engines"> 1839 <div class="container"> 1840 1841 <div class="pl-pillar__intro sr"> 1842 <div> 1843 <div class="pl-pillar__badge pl-pillar__badge--keep">Keep</div> 1844 <h2 class="pl-pillar__h2">Retention that protects the number.</h2> 1845 </div> 1846 <p class="pl-pillar__body"> 1847 Churn does not happen without warning. It happens when the warning goes unseen. 1848 Ambassador surfaces behavioral signals weeks before a customer exits and acts on them 1849 automatically, without adding headcount. 1850 </p> 1851 </div> 1852 1853 <div class="pl-engines"> 1854 1855 <div class="pl-engine-card pl-engine-card--keep sr sr-d1" id="customer-value-engine"> 1856 <div class="pl-engine-card__name">Customer Value Engine</div> 1857 <p class="pl-engine-card__desc"> 1858 Loyalty, NPS/CSAT, and post-conversion engagement to retain customers and surface 1859 expansion signals. Measure customer health continuously, not just at renewal. 1860 </p> 1861 <a class="pl-engine-card__link" href="/customer-value-engine?hsLang=en">Learn More âº</a> 1862 </div> 1863 1864 <div class="pl-engine-card pl-engine-card--keep sr sr-d2" id="communication-cloud"> 1865 <div class="pl-engine-card__name">Communication Cloud</div> 1866 <p class="pl-engine-card__desc"> 1867 Orchestrate email and SMS triggered by real customer behavior. Automate onboarding 1868 and activation at scale. Every message fired by a signal, not a schedule. 1869 </p> 1870 <a class="pl-engine-card__link" href="/communication-cloud-engine?hsLang=en">Learn More âº</a> 1871 </div> 1872 1873 <div class="pl-engine-card pl-engine-card--keep sr sr-d3" id="predictive-recommendation-engine"> 1874 <div class="pl-engine-card__name">Predictive & Recommendation Engine</div> 1875 <p class="pl-engine-card__desc"> 1876 Surface churn signals and next-best-action recommendations before the exit window closes. 1877 Give your Customer Success team the right play at the right moment, automatically. 1878 </p> 1879 <a class="pl-engine-card__link" href="/predictive-recommendation-engine?hsLang=en">Learn More âº</a> 1880 </div> 1881 1882 </div> 1883 </div> 1884 </section> 1885 1886 1887 1888 <section class="sec sec--white" id="prove" aria-label="PROVE engines"> 1889 <div class="container"> 1890 1891 <div class="pl-pillar__intro sr"> 1892 <div> 1893 <div class="pl-pillar__badge pl-pillar__badge--prove">Prove</div> 1894 <h2 class="pl-pillar__h2">Attribution your CFO will trust.</h2> 1895 </div> 1896 <p class="pl-pillar__body"> 1897 Every program, every touchpoint, every engine runs through a single attribution layer. 1898 Direct Salesforce sync. Board-ready reporting. No more justifying budget with a dashboard 1899 full of activity metrics. 1900 </p> 1901 </div> 1902 1903 <div class="pl-engines pl-engines--two"> 1904 1905 <div class="pl-engine-card pl-engine-card--prove sr sr-d1" id="data-intelligence-layer"> 1906 <div class="pl-engine-card__name">Data & Intelligence Layer</div> 1907 <p class="pl-engine-card__desc"> 1908 Unified data foundation with enterprise governance and CFO-ready reporting. 1909 Every engine feeds the same data layer. One revenue signal. Always current. 1910 Built for Salesforce sync and board-level reporting. 1911 </p> 1912 <a class="pl-engine-card__link" href="/data-intelligence-layer?hsLang=en">Learn More âº</a> 1913 </div> 1914 1915 <div class="pl-engine-card pl-engine-card--prove sr sr-d2" id="integrations-layer"> 1916 <div class="pl-engine-card__name">Integrations Layer</div> 1917 <p class="pl-engine-card__desc"> 1918 Connect Ambassador to your CRM, marketing stack, and finance systems with low 1919 implementation friction. HubSpot, Salesforce, and core CRM out of the box. 1920 Custom integrations on Enterprise and Strategic plans. 1921 </p> 1922 <a class="pl-engine-card__link" href="https://getambassador.com/integrations-layer?hsLang=en">Learn More âº</a> 1923 </div> 1924 1925 </div> 1926 </div> 1927 </section> 1928 1929 1930 1931 <section class="pl-hiro" id="hiroai" aria-label="HiroAI"> 1932 <div class="pl-hiro__inner"> 1933 1934 <div class="pl-hiro__eyebrow sr">HiroAI â The Intelligence Layer</div> 1935 1936 <h2 class="pl-hiro__h2 sr sr-d1"> 1937 The brain that connects<br>
1938 <span>all seven engines.</span> 1939 </h2> 1940 1941 <p class="pl-hiro__body sr sr-d2"> 1942 HiroAI is the agentic growth network running underneath the entire platform. 1943 When one engine sees a signal, every other engine responds. 1944 <strong>A customer nearing churn triggers the Communication Cloud.</strong> 1945 <strong>An advocate completing a referral triggers the Incentive Storefront.</strong> 1946 <strong>A prospect engaging with an advocate triggers the Prospect Intelligence Engine.</strong> 1947 HiroAI makes the platform act in real time so your team does not have to. 1948 </p> 1949 1950 <div class="pl-hiro__chips sr sr-d3"> 1951 <span class="pl-hiro__chip">Cross-engine attribution</span> 1952 <span class="pl-hiro__chip">Real-time signal sharing</span> 1953 <span class="pl-hiro__chip">CFO-ready reporting</span> 1954 <span class="pl-hiro__chip">Zero manual ops</span> 1955 <span class="pl-hiro__chip">Salesforce sync</span> 1956 </div> 1957 1958 </div> 1959 </section> 1960 1961 1962 1963 <section class="sec sec--offwhite" aria-label="Customer proof"> 1964 <div class="container"> 1965 1966 <div class="sec-header sec-header--center sr"> 1967 <p class="eyebrow">Platform Proof</p> 1968 <h2 class="sec-h2">What enterprise teams say about the full platform.</h2> 1969 </div> 1970 1971 <div class="pl-quotes"> 1972 1973 <div class="pl-quote sr sr-d1"> 1974 <div class="pl-quote__mark">â</div> 1975 <p class="pl-quote__text"> 1976 We had been running referral and loyalty as separate programs with no attribution 1977 between them. Ambassador brought them into one platform and gave us a single revenue 1978 number that now goes into our board deck every quarter. The connection between engines 1979 is what changed everything. 1980 </p> 1981 <div class="pl-quote__author"> 1982 <span class="pl-quote__avatar">CM</span> 1983 <div> 1984 <div class="pl-quote__name">Chris Miller</div> 1985 <div class="pl-quote__role">VP Marketing â Visible by Verizon</div> 1986 </div> 1987 </div> 1988 </div> 1989 1990 <div class="pl-quote sr sr-d2"> 1991 <div class="pl-quote__mark">â</div> 1992 <p class="pl-quote__text"> 1993 The platform breadth is what separated Ambassador from everything else we evaluated. 1994 We did not want four tools. We wanted one platform that could grow with our programs. 1995 Two years in, we are running all three pillars and the ROI speaks for itself. 1996 </p> 1997 <div class="pl-quote__author"> 1998 <span class="pl-quote__avatar pl-quote__avatar--green">JC</span> 1999 <div> 2000 <div class="pl-quote__name">Judi Cotter</div> 2001 <div class="pl-quote__role">Chief Revenue Officer â CNG Holdings</div> 2002 </div> 2003 </div> 2004 </div> 2005 2006 <div class="pl-quote sr sr-d3"> 2007 <div class="pl-quote__mark">â</div> 2008 <p class="pl-quote__text"> 2009 HiroAI is not a feature. It is the reason the platform works as a system. When our 2010 churn signals started automatically triggering the Communication Cloud, we saved 2011 accounts we would never have caught manually. That is platform-level value, 2012 not point-solution value. 2013 </p> 2014 <div class="pl-quote__author"> 2015 <span class="pl-quote__avatar pl-quote__avatar--amber">SK</span> 2016 <div> 2017 <div class="pl-quote__name">Sarah K.</div> 2018 <div class="pl-quote__role">VP Customer Success â Enterprise SaaS</div> 2019 </div> 2020 </div> 2021 </div> 2022 2023 </div> 2024 </div> 2025 </section> 2026 2027 2028 2029 <section class="sec sec--gradient" aria-label="Get started"> 2030 <div class="container"> 2031 <div class="pl-cta sr"> 2032 <p class="eyebrow">See It Live</p> 2033 <h2 class="pl-cta-h2"> 2034 Ready to see all seven engines<br> 2035 <span class="pl-cta-accent">working together?</span> 2036 </h2> 2037 <p class="pl-cta-body"> 2038 The demo is built around your programs, your ICP, and your revenue goals. 2039 Not a generic walkthrough. 2040 </p> 2041 <div class="cta-group"> 2042 <a class="btn-primary" href="https://getambassador.com/get-a-demo/?hsLang=en">Get Demo</a> 2043 <a class="btn-ghost" href="https://getambassador.com/get-a-demo/?hsLang=en">Talk to Sales</a> 2044 </div> 2045 </div> 2046 </div> 2047 </section> 2048 2049</div> 2050
2051<script> 2052/* ââ Scroll reveal (IntersectionObserver) ââ */ 2053(function () { 2054 if (!window.IntersectionObserver) return; 2055 var io = new IntersectionObserver(function (entries) { 2056 entries.forEach(function (entry) { 2057 if (entry.isIntersecting) { 2058 entry.target.classList.add('in-view'); 2059 io.unobserve(entry.target); 2060 } 2061 }); 2062 }, { threshold: 0.15 }); 2063 document.querySelectorAll('.hp3 .sr').forEach(function (el) { 2064 io.observe(el); 2065 }); 2066})(); 2067</script>
2067 2068 2069 2070 </main> 2071 2072 2073 <!-- 2074 ======================================================================== 2075 SOURCE OF TRUTH: GitHub repo ambassador-website 2076 Path: src/templates/partials/footer.html (branch: main) 2077 2078 DO NOT EDIT IN DESIGN MANAGER OR VIA THE CLAUDE / HUBSPOT MCP CONNECTOR. 2079 Changes made here will be overwritten on the next deploy from git. 2080 For changes, open a PR in the repo or ping Ethan in Slack. 2081 ======================================================================== 2082--> 2083<style> 2084/* ============== FOOTER â compact directory style ============== 2085 Trimmed vertical rhythm vs the prior version (~45% less total height) 2086 so the footer fits in roughly one scroll. All link wiring + HubSpot 2087 tokens + SOC image preserved. 2088================================================================ */ 2089 2090.amb-footer { 2091 background: #0F1F3D; 2092 color: rgba(255, 255, 255, 0.65); 2093 padding: 40px 48px 20px; 2094 font-family: 'DM Sans', sans-serif; 2095 font-size: 13px; 2096 line-height: 1.5; 2097 border-top: 1px solid rgba(255, 255, 255, 0.06); 2098} 2099.amb-footer__grid { 2100 max-width: 1400px; 2101 margin: 0 auto; 2102 display: grid; 2103 grid-template-columns: 1.2fr 1.4fr 1fr 1fr; 2104 gap: 32px; 2105 padding-bottom: 28px; 2106} 2107 2108/* Brand column -- left-aligned stack so the logo, tagline, socials, and 2109 G2 banner share one matching left edge. The tagline, socials, and G2 2110 banner are all width-locked to 180px. */ 2111.amb-footer__brand { 2112 display: flex; 2113 flex-direction: column; 2114 align-items: flex-start; 2115} 2116.amb-footer__brand-mark { 2117 display: flex; 2118 align-items: center; 2119 gap: 8px; 2120 margin-bottom: 12px; 2121 text-decoration: none; 2122} 2123.amb-footer__brand-mark .brand-mark { 2124 width: 28px; 2125 height: 28px; 2126 flex-shrink: 0; 2127} 2128.amb-footer__brand-mark .wordmark { 2129 font-family: 'Raleway', sans-serif; 2130 font-size: 14px; 2131 font-weight: 800; 2132 letter-spacing: 0.18em; 2133 color: #ffffff; 2134} 2135.amb-footer__tagline { 2136 font-size: 12.5px; 2137 color: rgba(255, 255, 255, 0.55); 2138 line-height: 1.45; 2139 margin: 0 0 14px; 2140 width: 180px; 2141 max-width: 100%; 2142} 2143/* Socials row -- width-locked to match the G2 banner below so outer chip 2144 edges align flush with the banner's edges and the middle chip falls dead 2145 center. */ 2146.amb-footer__socials { 2147 display: flex; 2148 justify-content: space-between; 2149 align-items: center; 2150 width: 180px; 2151 max-width: 100%; 2152} 2153.amb-footer__social { 2154 position: relative; 2155 display: inline-flex; 2156 align-items: center; 2157 justify-content: center; 2158 width: 40px; 2159 height: 40px; 2160 border-radius: 8px; 2161 border: 1px solid rgba(255,255,255,0.15); 2162 box-shadow: 0 4px 12px rgba(0,0,0,0.25); 2163 overflow: hidden; 2164 cursor: pointer; 2165 text-decoration: none; 2166 color: #ffffff; 2167 transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease; 2168} 2169.amb-footer__social svg { 2170 width: 17px; 2171 height: 17px; 2172 position: relative; 2173 z-index: 1; 2174 color: #ffffff; 2175} 2176/* Shine sweep: translucent diagonal band slides L->R on hover */ 2177.amb-footer__social::before { 2178 content: ''; 2179 position: absolute; 2180 inset: 0; 2181 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent); 2182 transform: translateX(-100%); 2183 transition: transform 0.7s ease; 2184 pointer-events: none; 2185} 2186.amb-footer__social:hover::before { transform: translateX(100%); } 2187.amb-footer__social:hover { transform: translateY(-2px) scale(1.06); } 2188.amb-footer__social:active { transform: translateY(0) scale(0.97); } 2189 2190/* LinkedIn -- muted brand blue at rest, full brand blue on hover */ 2191.amb-footer__social--linkedin { 2192 background: #0F3D6B; 2193 border-color: rgba(10, 102, 194, 0.5); 2194 box-shadow: 0 4px 10px rgba(10, 102, 194, 0.18); 2195} 2196.amb-footer__social--linkedin:hover { 2197 background: #0A66C2; 2198 border-color: rgba(10, 102, 194, 0.9); 2199 box-shadow: 0 8px 22px rgba(10, 102, 194, 0.45); 2200} 2201 2202/* Instagram -- desaturated diagonal gradient at rest, full saturation on hover */ 2203.amb-footer__social--instagram { 2204 background: linear-gradient(45deg, #8C5A23 0%, #8A3E25 25%, #7E1B2D 50%, #74173B 75%, #6B164E 100%); 2205 border-color: rgba(220, 39, 67, 0.5); 2206 box-shadow: 0 4px 10px rgba(220, 39, 67, 0.18); 2207} 2208.amb-footer__social--instagram:hover { 2209 background: linear-gradient(45deg, #F09433 0%, #E6683C 25%, #DC2743 50%, #CC2366 75%, #BC1888 100%); 2210 border-color: rgba(220, 39, 67, 0.9); 2211 box-shadow: 0 8px 22px rgba(220, 39, 67, 0.45); 2212} 2213 2214/* YouTube -- muted brand red at rest, full brand red on hover */ 2215.amb-footer__social--youtube { 2216 background: #8B1010; 2217 border-color: rgba(255, 0, 0, 0.5); 2218 box-shadow: 0 4px 10px rgba(255, 0, 0, 0.18); 2219} 2220.amb-footer__social--youtube:hover { 2221 background: #FF0000; 2222 border-color: rgba(255, 0, 0, 0.9); 2223 box-shadow: 0 8px 22px rgba(255, 0, 0, 0.45); 2224} 2225 2226/* Facebook -- muted brand blue at rest, full brand blue on hover */ 2227.amb-footer__social--facebook { 2228 background: #123A6E; 2229 border-color: rgba(24, 119, 242, 0.5); 2230 box-shadow: 0 4px 10px rgba(24, 119, 242, 0.18); 2231} 2232.amb-footer__social--facebook:hover { 2233 background: #1877F2; 2234 border-color: rgba(24, 119, 242, 0.9); 2235 box-shadow: 0 8px 22px rgba(24, 119, 242, 0.45); 2236} 2237 2238/* Review badges (G2 + Capterra) -- same glass + shine + lift as the social 2239 chips, tinted toward Ambassador's blue->
2239purple gradient. Each wrapper <a> 2240 carries the routing to its review profile; styling does not affect the href. 2241 Both are width-locked to 180px so they stack flush with the socials row. */ 2242.amb-footer__g2, 2243.amb-footer__capterra { 2244 position: relative; 2245 display: block; 2246 margin-top: 14px; 2247 width: 180px; 2248 max-width: 100%; 2249 border-radius: 8px; 2250 border: 1px solid rgba(59, 99, 232, 0.5); 2251 box-shadow: 0 4px 14px rgba(26, 59, 174, 0.3); 2252 overflow: hidden; 2253 text-decoration: none; 2254 line-height: 0; 2255 transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; 2256} 2257/* Capterra sits directly under the G2 banner -- tighter gap between the pair. */ 2258.amb-footer__capterra { margin-top: 10px; } 2259.amb-footer__g2::before, 2260.amb-footer__capterra::before { 2261 content: ''; 2262 position: absolute; 2263 inset: 0; 2264 /* Sits in front of the badge image (z-index: 2) so the sheen is 2265 visible over the banner artwork, not hidden behind it. */ 2266 z-index: 2; 2267 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent); 2268 transform: translateX(-100%); 2269 transition: transform 0.7s ease; 2270 pointer-events: none; 2271} 2272.amb-footer__g2:hover::before, 2273.amb-footer__capterra:hover::before { transform: translateX(100%); } 2274.amb-footer__g2:hover, 2275.amb-footer__capterra:hover { 2276 transform: translateY(-2px) scale(1.04); 2277 border-color: rgba(59, 99, 232, 0.8); 2278 box-shadow: 0 8px 24px rgba(26, 59, 174, 0.45); 2279} 2280.amb-footer__g2:active, 2281.amb-footer__capterra:active { transform: translateY(0) scale(0.98); } 2282.amb-footer__g2 img, 2283.amb-footer__capterra img { 2284 display: block; 2285 width: 100%; 2286 height: auto; 2287 position: relative; 2288 z-index: 1; 2289} 2290 2291/* Link columns */ 2292.amb-footer__col-title { 2293 font-size: 10px; 2294 letter-spacing: 0.18em; 2295 text-transform: uppercase; 2296 color: rgba(255, 255, 255, 0.85); 2297 font-weight: 600; 2298 margin: 0 0 10px; 2299} 2300.amb-footer__subgroup { 2301 margin-bottom: 11px; 2302} 2303.amb-footer__subgroup:last-child { margin-bottom: 0; } 2304.amb-footer__sub-eyebrow { 2305 display: block; 2306 font-size: 9px; 2307 letter-spacing: 0.18em; 2308 text-transform: uppercase; 2309 font-weight: 600; 2310 margin-bottom: 4px; 2311} 2312a.amb-footer__sub-eyebrow { 2313 text-decoration: none; 2314 cursor: pointer; 2315 transition: text-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease; 2316} 2317a.amb-footer__sub-eyebrow:hover { transform: translateX(2px); } 2318a.amb-footer__sub-eyebrow.is-grow:hover { text-shadow: 0 0 12px rgba(7, 228, 158, 0.7); } 2319a.amb-footer__sub-eyebrow.is-keep:hover { text-shadow: 0 0 12px rgba(247, 162, 95, 0.7); } 2320a.amb-footer__sub-eyebrow.is-prove:hover { text-shadow: 0 0 12px rgba(59, 99, 232, 0.8); } 2321.amb-footer__sub-eyebrow.is-grow { color: #07E49E; } 2322.amb-footer__sub-eyebrow.is-keep { color: #F7A25F; } 2323.amb-footer__sub-eyebrow.is-prove { color: #3B63E8; } 2324.amb-footer__sub-eyebrow.is-overview { color: #3B63E8; } 2325.amb-footer__sub-eyebrow.is-by-industry { color: #3B63E8; } 2326.amb-footer__sub-eyebrow.is-by-strategy { color: #3B63E8; } 2327.amb-footer__sub-eyebrow.is-by-program-type { color: #3B63E8; } 2328 2329.amb-footer ul { 2330 list-style: none; 2331 margin: 0; 2332 padding: 0; 2333 display: flex; 2334 flex-direction: column; 2335 gap: 3.5px; 2336} 2337.amb-footer ul a { 2338 color: rgba(255, 255, 255, 0.62); 2339 text-decoration: none; 2340 font-size: 12.5px; 2341 font-weight: 400; 2342 transition: color 0.2s ease; 2343 display: inline-flex; 2344 align-items: center; 2345 gap: 6px; 2346} 2347.amb-footer ul a:hover { color: #ffffff; } 2348 2349/* "Join our influencer program" callout pill -- green-tinted secondary action 2350 on the dark footer, on-dark green per brand v2.2. */ 2351.amb-footer ul a.amb-footer__callout { 2352 margin-top: 4px; 2353 padding: 5px 10px; 2354 background: rgba(7, 228, 158, 0.08); 2355 border: 1px solid rgba(7, 228, 158, 0.35); 2356 border-radius: 999px; 2357 color: #07E49E; 2358 font-size: 12px; 2359 font-weight: 600; 2360 letter-spacing: 0.02em; 2361 white-space: nowrap; 2362 align-self: flex-start; 2363 transition: background 0.2s ease, border-color 0.2s ease; 2364} 2365.amb-footer ul a.amb-footer__callout::after { 2366 content: '\2192'; 2367 font-weight: 700; 2368 transition: transform 0.18s ease; 2369} 2370.amb-footer ul a.amb-footer__callout:hover {
2371 color: #07E49E; 2372 background: rgba(7, 228, 158, 0.14); 2373 border-color: rgba(7, 228, 158, 0.55); 2374} 2375.amb-footer ul a.amb-footer__callout:hover::after { transform: translateX(2px); } 2376.amb-footer .nav-muted { 2377 display: inline-flex; 2378 align-items: center; 2379 gap: 6px; 2380 font-size: 12.5px; 2381 font-weight: 400; 2382 color: rgba(255, 255, 255, 0.35); 2383 cursor: default; 2384} 2385.amb-footer .badge-soon { 2386 display: inline-block; 2387 font-size: 9px; 2388 font-weight: 600; 2389 letter-spacing: 0.12em; 2390 text-transform: uppercase; 2391 padding: 2px 6px; 2392 border-radius: 100px; 2393 background: rgba(255, 255, 255, 0.06); 2394 border: 1px solid rgba(255, 255, 255, 0.1); 2395 color: rgba(255, 255, 255, 0.55); 2396} 2397/* "New" pill -- green tint, sits next to a real link (not a muted label). */ 2398.amb-footer .badge-new { 2399 display: inline-block; 2400 margin-left: 6px; 2401 font-size: 9px; 2402 font-weight: 700; 2403 letter-spacing: 0.12em; 2404 text-transform: uppercase; 2405 padding: 2px 6px; 2406 border-radius: 100px; 2407 background: rgba(7, 228, 158, 0.18); 2408 border: 1px solid rgba(7, 228, 158, 0.35); 2409 color: #07E49E; 2410} 2411 2412/* Compact bottom strip: SOC + address on left, GKP centered on the page, 2413 legal + copyright on right. 3-column grid so GKP stays page-centered 2414 regardless of how wide the side groups grow. */ 2415.amb-footer__bar { 2416 max-width: 1400px; 2417 margin: 0 auto; 2418 padding-top: 14px; 2419 border-top: 1px solid rgba(255, 255, 255, 0.08); 2420 display: grid; 2421 grid-template-columns: 1fr auto 1fr; 2422 align-items: center; 2423 gap: 20px; 2424 font-size: 11px; 2425 color: rgba(255, 255, 255, 0.45); 2426} 2427.amb-footer__bar-left { 2428 display: flex; 2429 align-items: center; 2430 gap: 9px; 2431 flex-wrap: wrap; 2432 justify-self: start; 2433} 2434.amb-footer__location { 2435 color: rgba(255, 255, 255, 0.5); 2436} 2437.amb-footer__bar-center { 2438 display: flex; 2439 align-items: center; 2440 justify-self: center; 2441} 2442.amb-footer__bar-right { 2443 display: flex; 2444 align-items: center; 2445 gap: 9px; 2446 flex-wrap: wrap; 2447 justify-self: end; 2448} 2449.amb-footer__bar-right a { 2450 color: rgba(255, 255, 255, 0.5); 2451 text-decoration: none; 2452 transition: color 0.2s ease; 2453} 2454.amb-footer__bar-right a:hover { color: #ffffff; } 2455.amb-footer__bar-dot { 2456 color: rgba(255, 255, 255, 0.3); 2457 user-select: none; 2458} 2459.amb-footer__copy { color: rgba(255, 255, 255, 0.5); } 2460.amb-footer__tag-gkp { 2461 font-size: 11px; 2462 font-weight: 700; 2463 letter-spacing: 0.12em; 2464 white-space: nowrap; 2465} 2466.amb-footer__tag-gkp .gkp-grow { color: #07E49E; } 2467.amb-footer__tag-gkp .gkp-keep { color: #F7A25F; } 2468.amb-footer__tag-gkp .gkp-prove { color: #3B63E8; } 2469 2470@media (max-width: 1024px) { 2471 .amb-footer { padding: 32px 24px 16px; } 2472 .amb-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; } 2473} 2474@media (max-width: 640px) { 2475 .amb-footer__grid { grid-template-columns: 1fr; gap: 24px; } 2476 .amb-footer__bar { 2477 grid-template-columns: 1fr; 2478 justify-items: start; 2479 gap: 12px; 2480 } 2481 .amb-footer__bar-left, 2482 .amb-footer__bar-center, 2483 .amb-footer__bar-right { justify-self: start; width: 100%; } 2484} 2485</style> 2486 2487<footer class="amb-footer"> 2488 <div class="amb-footer__grid"> 2489 2490 <!-- Brand column --> 2491 <div class="amb-footer__brand"> 2492 <a href="/?hsLang=en" class="amb-footer__brand-mark" aria-label="Ambassador -- Home"> 2493 <svg class="brand-mark" viewbox="9 10 62 62" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"> 2494 <defs> 2495 <radialgradient id="ambHubFooter" cx="38%" cy="34%" r="62%"> 2496 <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.95" /> 2497 <stop offset="22%" stop-color="#9457F7" /> 2498 <stop offset="60%" stop-color="#5F11E4" /> 2499 <stop offset="100%" stop-color="#3B0E8C" /> 2500 </radialgradient> 2501 <filter id="ambHubFooterShadow" x="-60%" y="-60%" width="220%" height="220%"> 2502 <fedropshadow dx="0" dy="0" stdDeviation="1.4" flood-color="#9457F7" flood-opacity="0.55" /> 2503 </filter> 2504 </defs> 2505 <line x1="40" y1="17.6" x2="14.1" y2="62.4" stroke="rgba(196, 206, 222, 0.85)" stroke-width="1.0" stroke-linecap="round" /> 2506 <line x1="14.1" y1="62.4" x2="65.9" y2="62.4" stroke="rgba(196, 206, 222, 0.85)" stroke-width="1.0" stroke-linecap="round" /> 2507 <line x1="65.9" y1="62.4" x2="40" y2="17.6" stroke="rgba(196, 206, 222, 0.85)" stroke-width="1.0" stroke-linecap="round" /> 2508 <line x1="40" y1="47.5" x2="40" y2="17.6" stroke="#9457F7" stroke-width="0.7" stroke-linecap="round" opacity="0.75" /> 2509 <line x1="40" y1="47.5" x2="14.1" y2="62.4" stroke="#9457F7" stroke-width="0.7" stroke-linecap="round" opacity="0.75" /> 2510 <line x1="40" y1="47.5" x2="65.9" y2="62.4" stroke="#9457F7" stroke-width="0.7" stroke-linecap="round" opacity="0.75" /> 2511 <circle cx="40" cy="17.6" r="4.25" fill="#3B63E8" /> 2512 <circle cx="14.1" cy="62.4" r="4.25" fill="#3B63E8" /> 2513 <circle cx="65.9" cy="62.4" r="4.25" fill="#3B63E8" /> 2514 <circle cx="40" cy="47.5" r="7.6" fill="url(#ambHubFooter)" filter="url
2514(#ambHubFooterShadow)" /> 2515 </svg> 2516 <span class="wordmark">AMBASSADOR</span> 2517 </a> 2518 2519 <p class="amb-footer__tagline">The Customer Lifecycle Operating System for revenue teams that need the number to be right.</p> 2520 2521 <div class="amb-footer__socials"> 2522 <a class="amb-footer__social amb-footer__social--linkedin" href="https://www.linkedin.com/company/getambassador" aria-label="LinkedIn" target="_blank" rel="noopener"> 2523 <svg viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z" /></svg> 2524 </a> 2525 <a class="amb-footer__social amb-footer__social--instagram" href="https://www.instagram.com/get.ambassador" aria-label="Instagram" target="_blank" rel="noopener"> 2526 <svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="5" ry="5" /><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /><line x1="17.5" y1="6.5" x2="17.51" y2="6.5" /></svg> 2527 </a> 2528 <a class="amb-footer__social amb-footer__social--youtube" href="https://www.youtube.com/@getambassador" aria-label="YouTube" target="_blank" rel="noopener"> 2529 <svg viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" /></svg> 2530 </a> 2531 <a class="amb-footer__social amb-footer__social--facebook" href="https://www.facebook.com/profile.php?id=61563676799402" aria-label="Facebook" target="_blank" rel="noopener"> 2532 <svg viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-5.6v-7.2h2.4l.36-2.8h-2.76V9.2c0-.81.22-1.36 1.38-1.36H16V5.33c-.26-.03-1.13-.11-2.14-.11-2.12 0-3.57 1.3-3.57 3.67v2.05H7.9v2.8h2.39V21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14z" /></svg> 2533 </a> 2534 </div> 2535 2536 <!-- G2 review banner: official G2 widget. Inline
2536<script> injects the 2537 schema.org rating markup into <head> for SEO rich-snippet support. --> 2538 <a class="amb-footer__g2" href="https://www.g2.com/products/ambassador-software/take_survey?utm_source=review-widget" title="Leave a review of Ambassador Software on G2" target="_blank" rel="noopener"> 2539 <img alt="Review Ambassador Software on G2" src="https://www.g2.com/products/ambassador-software/widgets/stars?color=blue&type=reviews" fetchpriority="high" decoding="async"> 2540 </a> 2541
2541<script>(function(a,b,c,d){window.fetch("https://www.g2.com/products/ambassador-software/rating_schema.json").then(e=>e.json()).then(f=>{c=a.createElement(b);c.type="application/ld+json";c.text=JSON.stringify(f);d=a.getElementsByTagName(b)[0];d.parentNode.insertBefore(c,d);});})(document,"script");</script>
2541 2542 2543 <!-- Capterra review badge: official Capterra brand-asset SVG, matched to 2544 the G2 banner chip. Static badge, no widget script required. --> 2545 <a class="amb-footer__capterra" href="https://www.capterra.com/p/227998/Ambassador/reviews/" title="Read reviews of Ambassador on Capterra" target="_blank" rel="noopener"> 2546 <img alt="Read reviews of Ambassador on Capterra" src="https://brand-assets.capterra.com/badge/8e6df12a-19f5-4315-a370-18e17c81f517.svg" loading="lazy" decoding="async" fetchpriority="low"> 2547 </a> 2548 </div> 2549 2550 <!-- Platform column â wiring preserved --> 2551 <div> 2552 <div class="amb-footer__col-title">Platform</div> 2553 2554 <div class="amb-footer__subgroup"> 2555 <span class="amb-footer__sub-eyebrow is-overview">Overview</span> 2556 <ul> 2557 <li><a href="/platform?hsLang=en">Platform Overview</a></li> 2558 <li><a href="/ambassador-hiroai?hsLang=en">HiroAI</a></li> 2559 <li><a href="https://getambassador.com/integrations-layer?hsLang=en">Integrations</a></li> 2560 </ul> 2561 </div> 2562 2563 <div class="amb-footer__subgroup"> 2564 <a href="#grow" class="amb-footer__sub-eyebrow is-grow">Grow</a> 2565 <ul> 2566 <li><a href="/advocacy-engine?hsLang=en">Advocacy</a></li> 2567 <li><a href="/prospect-intelligence-engine?hsLang=en">Prospect</a></li> 2568 <li><a href="/programmatic?hsLang=en">Programmatic <span class="badge-new">New</span></a></li> 2569 </ul> 2570 </div> 2571 2572 <div class="amb-footer__subgroup"> 2573 <a href="#keep" class="amb-footer__sub-eyebrow is-keep">Keep</a> 2574 <ul> 2575 <li><a href="/customer-value-engine?hsLang=en">Retention</a></li> 2576 <li><a href="/incentive-storefront-engine?hsLang=en">Incentive</a></li> 2577 <li><a href="/communication-cloud-engine?hsLang=en">Communication</a></li> 2578 </ul> 2579 </div> 2580 2581 <div class="amb-footer__subgroup"> 2582 <a href="#prove" class="amb-footer__sub-eyebrow is-prove">Prove</a> 2583 <ul> 2584 <li><a href="/predictive-recommendation-engine?hsLang=en">Predictive</a></li> 2585 <li><span class="nav-muted">Attribution <span class="badge-soon">Soon</span></span></li> 2586 <li><span class="nav-muted">Finance <span class="badge-soon">Soon</span></span></li> 2587 </ul> 2588 </div> 2589 </div> 2590 2591 <!-- Solutions column â wiring preserved --> 2592 <div> 2593 <div class="amb-footer__col-title">Solutions</div> 2594 <div class="amb-footer__subgroup"> 2595 <span class="amb-footer__sub-eyebrow is-by-industry">By Industry</span> 2596 <ul> 2597 <li><a href="https://getambassador.com/telecom?hsLang=en">Telecom</a></li> 2598 <li><span class="nav-muted">CPaaS <span class="badge-soon">Soon</span></span></li> 2599 <li><span class="nav-muted">B2B SaaS <span class="badge-soon">Soon</span></span></li> 2600 <li><span class="nav-muted">FinTech <span class="badge-soon">Soon</span></span></li> 2601 </ul> 2602 </div> 2603 <div class="amb-footer__subgroup"> 2604 <span class="amb-footer__sub-eyebrow is-by-strategy">By Strategy</span> 2605 <ul> 2606 <li><a href="/customer-growth?hsLang=en">Customer Growth Overview</a></li> 2607 <li><a href="https://getambassador.com/customer-growth-strategy?hsLang=en">Build your Customer Growth Strategy</a></li> 2608 </ul> 2609 </div> 2610 <div class="amb-footer__subgroup"> 2611 <span class="amb-footer__sub-eyebrow is-by-program-type">By Program Type</span> 2612 <ul> 2613 <li><a href="/solutions/program-type/affiliate-marketing-software?hsLang=en">Affiliates</a></li> 2614 <li><a href="/solutions/program-type/referral-marketing-software?hsLang=en">Referrals</a></li> 2615 <li><a href="/solutions/program-type/influencer-marketing-platform?hsLang=en">Influencers</a></li> 2616 <li><a href="/solutions/program-type/loyalty-program-software?hsLang=en">Loyalty</a></li> 2617 <li><a class="amb-footer__callout" href="/join-influencer-program?hsLang=en">Join our influencer program</a></li> 2618 </ul> 2619 </div> 2620 </div> 2621 2622 <!-- Company column â wiring preserved --> 2623 <div>
2624 <div class="amb-footer__col-title">Company</div> 2625 <ul> 2626 <li><a href="https://getambassador.com/why-ambassador?hsLang=en">Why Ambassador</a></li> 2627 <li><a href="/resources?hsLang=en">Resources</a></li> 2628 <li><a href="/blog?hsLang=en">Blog</a></li> 2629 <li><a href="https://getambassador.com/pricing-ent?hsLang=en">Pricing</a></li> 2630 <li><a href="https://getambassador.com/get-a-demo/?hsLang=en">Get Demo</a></li> 2631 <li><a href="https://admin2.getambassador.com/login">Login</a></li> 2632 <li><a href="/legal?hsLang=en">Legal</a></li> 2633 </ul> 2634 </div> 2635 2636 </div> 2637 2638 <!-- Compact bar: identity cluster (location + copyright) left, GKP 2639 centered, legal nav right. 3-col grid keeps GKP page-centered. --> 2640 <div class="amb-footer__bar"> 2641 <div class="amb-footer__bar-left"> 2642 <span class="amb-footer__location">Seattle, WA</span> 2643 <span class="amb-footer__bar-dot" aria-hidden="true">·</span> 2644 <span class="amb-footer__copy">© 2026 Ambassador</span> 2645 </div> 2646 <div class="amb-footer__bar-center"> 2647 <span class="amb-footer__tag-gkp"> 2648 <span class="gkp-grow">GROW</span>. <span class="gkp-keep">KEEP</span>. <span class="gkp-prove">PROVE</span>. 2649 </span> 2650 </div> 2651 <div class="amb-footer__bar-right"> 2652 <a href="/legal?hsLang=en">Legal</a> 2653 <span class="amb-footer__bar-dot" aria-hidden="true">·</span> 2654 <a href="/privacy?hsLang=en">Privacy</a> 2655 <span class="amb-footer__bar-dot" aria-hidden="true">·</span> 2656 <a href="/terms-of-service?hsLang=en">Terms</a> 2657 <span class="amb-footer__bar-dot" aria-hidden="true">·</span> 2658 <a href="/security?hsLang=en">Security</a> 2659 </div> 2660 </div> 2661 2662</footer> 2663 2664 </div> 2665 2666 2667 2668<!-- HubSpot performance collection script -->
2669<script defer src="/hs/hsstatic/content-cwv-embed/static-1.1293/embed.js"></script>
vendor: 1 bytes, line 2669
2669
2670<script src="https://getambassador.com/hubfs/hub_generated/template_assets/1/321618468555/1782829180534/template_main.min.js"></script>
2670 2671 2672<!-- Start of HubSpot Analytics Code -->
2673<script type="text/javascript"> 2674var _hsq = _hsq || []; 2675_hsq.push(["setContentType", "standard-page"]); 2676_hsq.push(["setCanonicalUrl", "https:\/\/getambassador.com\/platform"]); 2677_hsq.push(["setPageId", "322457806582"]); 2678_hsq.push(["setContentMetadata", { 2679 "contentPageId": 322457806582, 2680 "legacyPageId": "322457806582", 2681 "contentFolderId": null, 2682 "contentGroupId": null, 2683 "abTestId": null, 2684 "languageVariantId": 322457806582, 2685 "languageCode": "en", 2686 2687 2688}]); 2689</script>
2689 2690
2691<script type="text/javascript" id="hs-script-loader" async defer src="/hs/scriptloader/244219189.js"></script>
2691 2692<!-- End of HubSpot Analytics Code --> 2693 2694
2695<script type="text/javascript"> 2696var hsVars = { 2697 render_id: "32684816-c7b6-4141-9881-15b7a7cbaae7", 2698 ticks: 1790425074616, 2699 page_id: 322457806582, 2700 2701 content_group_id: 0, 2702 portal_id: 244219189, 2703 app_hs_base_url: "https://app-na2.hubspot.com", 2704 cp_hs_base_url: "https://cp-na2.hubspot.com", 2705 language: "en", 2706 analytics_page_type: "standard-page", 2707 scp_content_type: "", 2708 2709 analytics_page_id: "322457806582", 2710 category_id: 1, 2711 folder_id: 0, 2712 is_hubspot_user: false 2713} 2714</script>
2714 2715 2716
2717<script defer src="/hs/hsstatic/HubspotToolsMenu/static-1.640/js/index.js"></script>
2717 2718 2719 2720 2721 2722
2722<script> 2723 if (typeof navigator !== 'undefined' && navigator.modelContext && typeof navigator.modelContext.registerTool === 'function') { 2724 try { 2725 var _ac = new AbortController(); 2726 window.addEventListener('pagehide', function() { _ac.abort(); }, { once: true }); 2727 var _sig = _ac.signal; 2728 navigator.modelContext.registerTool({ 2729 name: 'book_demo', 2730 description: 'Book a 30-minute Ambassador product demo or revenue review session.', 2731 inputSchema: { type: 'object', properties: {} }, 2732 execute: async function() { return { url: 'https://getambassador.com/get-a-demo' }; } 2733 }, _sig); 2734 navigator.modelContext.registerTool({ 2735 name: 'explore_platform', 2736 description: 'Navigate to a specific Ambassador platform engine or product page.', 2737 inputSchema: { 2738 type: 'object', 2739 properties: { 2740 engine: { 2741 type: 'string', 2742 enum: ['advocacy','loyalty','communication','incentives','prospect-intelligence','analytics','integrations','platform'], 2743 description: 'The Ambassador engine or section to explore' 2744 } 2745 }, 2746 required: ['engine'] 2747 }, 2748 execute: async function(args) { 2749 var map = { 2750 advocacy: '/advocacy-engine', 2751 loyalty: '/customer-value-engine', 2752 communication: '/communication-cloud-engine', 2753 incentives: '/incentive-storefront-engine', 2754 'prospect-intelligence': '/prospect-intelligence-engine', 2755 analytics: '/data-intelligence-layer', 2756 integrations: '/integrations-layer', 2757 platform: '/platform' 2758 }; 2759 return { url: 'https://getambassador.com' + (map[args.engine] || '/platform') }; 2760 } 2761 }, _sig); 2762 navigator.modelContext.registerTool({ 2763 name: 'get_pricing', 2764 description: 'Request an enterprise quote or talk to sales.', 2765 inputSchema: { type: 'object', properties: {} }, 2766 execute: async function() { return { url: 'https://getambassador.com/pricing-ent' }; } 2767 }, _sig); 2768 navigator.modelContext.registerTool({ 2769 name: 'find_resources', 2770 description: 'Browse Ambassador case studies, whitepapers, and industry guides.', 2771 inputSchema: { type: 'object', properties: {} }, 2772 execute: async function() { return { url: 'https://getambassador.com/resources' }; } 2773 }, _sig); 2774 } catch(e) {} 2775 } 2776 </script>
2776 2777 2778</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.