PageSourceSearch

https://getambassador.com/platform

html getambassador.com collected 2026-10-02 02:38:57 UTC 99,524 bytes, 2,778 lines download raw bytes

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&amp;
20family=Raleway:wght@800&amp;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&amp;family=Raleway:wght@800&amp;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 &amp; 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 &amp; 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 &amp; 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 &amp; 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&amp;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.