PageSourceSearch

https://aleo.org/

html aleo.org collected 2026-10-03 19:30:46 UTC 144,996 bytes, 4,069 lines download raw bytes

1<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="generator" content="Gatsby 5.16.1"/><meta name="description" content="Move money anywhere in the world in seconds, for less than a penny, while keeping financial data between you and the people you choose. Aleo is home to the world&#x27;s first private and programmable stablecoins." data-gatsby-head="true"/><meta property="og:title" content="Aleo: Private Stablecoin Payments" data-gatsby-head="true"/><meta property="og:description" content="Move money anywhere in the world in seconds, for less than a penny, while keeping financial data between you and the people you choose. Aleo is home to the world&#x27;s first private and programmable stablecoins." data-gatsby-head="true"/><meta property="og:image" content="https://aleo.org/public/og/aleo.png" data-gatsby-head="true"/><meta property="og:url" content="https://aleo.org/" data-gatsby-head="true"/><meta name="twitter:card" content="summary_large_image" data-gatsby-head="true"/><meta name="twitter:title" content="Aleo: Private Stablecoin Payments" data-gatsby-head="true"/><meta name="twitter:description" content="Move money anywhere in the world in seconds, for less than a penny, while keeping financial data between you and the people you choose. Aleo is home to the world&#x27;s first private and programmable stablecoins." data-gatsby-head="true"/><meta name="twitter:image" content="https://aleo.org/public/og/aleo.png" data-gatsby-head="true"/><link rel="preconnect" href="https://cdn.sanity.io"/><link rel="canonical" href="https://www.aleo.org/" data-baseprotocol="https:" data-basehost="www.aleo.org"/><style>.gatsby-image-wrapper{position:relative;overflow:hidden}.gatsby-image-wrapper picture.object-fit-polyfill{position:static!important}.gatsby-image-wrapper img{bottom:0;height:100%;left:0;margin:0;max-width:none;padding:0;position:absolute;right:0;top:0;width:100%;object-fit:cover}.gatsby-image-wrapper [data-main-image]{opacity:0;transform:translateZ(0);transition:opacity .25s linear;will-change:opacity}.gatsby-image-wrapper-constrained{display:inline-block;vertical-align:top}</style><noscript><style>.gatsby-image-wrapper noscript [data-main-image]{opacity:1!important}.gatsby-image-wrapper [data-placeholder-image]{opacity:0!important}</style></noscript>
1<script type="module">const e="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;e&&document.body.addEventListener("load",(function(e){const t=e.target;if(void 0===t.dataset.mainImage)return;if(void 0===t.dataset.gatsbyImageSsr)return;let a=null,n=t;for(;null===a&&n;)void 0!==n.parentNode.dataset.gatsbyImageWrapper&&(a=n.parentNode),n=n.parentNode;const o=a.querySelector("[data-placeholder-image]"),r=new Image;r.src=t.currentSrc,r.decode().catch((()=>{})).then((()=>{t.style.opacity=1,o&&(o.style.opacity=0,o.style.transition="opacity 500ms linear")}))}),!0);</script>
1<script>
2          !function(e,t,n,s,u,a){e.twq||(s=e.twq=function(){s.exe?s.exe.apply(s,arguments):s.queue.push(arguments);
3},s.version='1.1',s.queue=[],u=t.createElement(n),u.async=!0,u.src='//static.ads-twitter.com/uwt.js',
4a=t.getElementsByTagName(n)[0],a.parentNode.insertBefore(u,a))}(window,document,'script');
5  twq('init', 'o8kzg'); // Insert your pixel ID here.
6  twq('track', 'PageView');
7      </script>
7<link rel="sitemap" type="application/xml" href="/sitemap-index.xml"/><link rel="preconnect" href="https://fonts.googleapis.com" data-gatsby-head="true"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" data-gatsby-head="true"/><link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&amp;display=swap" rel="stylesheet" data-gatsby-head="true"/><link rel="stylesheet" href="/public/tokens.css" data-gatsby-head="true"/><title data-gatsby-head="true">Aleo: Private Stablecoin Payments</title><link rel="canonical" href="https://aleo.org/" data-gatsby-head="true"/>
7<script type="application/ld+json" data-gatsby-head="true">
8          {
9            "@context": "https://schema.org/", 
10            "@type": "BreadcrumbList", 
11            "itemListElement": [{
12              "@type": "ListItem", 
13              "position": 1, 
14              "name": "Aleo | Zero-knowledge by design",
15              "item": "https://aleo.org/"  
16            },{
17              "@type": "ListItem", 
18              "position": 2, 
19              "name": "Solutions",
20              "item": "https://aleo.org/developers/"  
21            },{
22              "@type": "ListItem", 
23              "position": 3, 
24              "name": "Grants",
25              "item": "https://aleo.org/grants/"  
26            },{
27              "@type": "ListItem", 
28              "position": 4, 
29              "name": "Ecosystem",
30              "item": "https://aleo.org/ecosystems/"  
31            },{
32              "@type": "ListItem", 
33              "position": 5, 
34              "name": "Blog",
35              "item": "https://aleo.org/blog/"  
36            },{
37              "@type": "ListItem", 
38              "position": 6, 
39              "name": "Events",
40              "item": "https://aleo.org/events/"  
41            },{
42              "@type": "ListItem", 
43              "position": 7, 
44              "name": "About Us",
45              "item": "https://aleo.org/company/"  
46            },{
47              "@type": "ListItem", 
48              "position": 8, 
49              "name": "Open Roles",
50              "item": "https://aleo.org/careers/"  
51            },{
52              "@type": "ListItem", 
53              "position": 9, 
54              "name": "News",
55              "item": "https://aleo.org/press/"  
56            },{
57              "@type": "ListItem", 
58              "position": 10, 
59              "name": "How Aleo Works",
60              "item": "https://aleo.org/how-aleo-works/"  
61            },{
62              "@type": "ListItem", 
63              "position": 11, 
64              "name": "Introducing Aleo Tokens",
65              "item": "https://aleo.org/aleo-tokens/"  
66            },{
67              "@type": "ListItem", 
68              "position": 12, 
69              "name": "FAQ",
70              "item": "https://aleo.org/faq/"  
71            }]
72          }
73        </script>
73<script data-gatsby-head="true">
74        var _paq = window._paq = window._paq || [];
75        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
76        /* trackPageView is called on every navigation via onRouteUpdate in gatsby-browser.js */
77        _paq.push(['enableLinkTracking']);
78        (function() {
79          var u="https://aleo.matomo.cloud/";
80          _paq.push(['setTrackerUrl', u+'matomo.php']);
81          _paq.push(['setSiteId', '1']);
82          var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
83          g.async=true; g.src='//cdn.matomo.cloud/aleo.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
84        })();
85      </script>
85</head><body>
85<script>(function(w) {
86  var defer = {};
87  w.turnstileReady = new Promise(function (res, rej) {
88    defer.resolve = res;
89    defer.reject = rej;
90  })
91  w.__GATSBY_PLUGIN_TUNRSTILE_LOADER__ = function (err) {
92    if (err) {
93      defer.reject();
94    } else {
95      defer.resolve();
96    }
97  }
98})(window)</script>
98<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=__GATSBY_PLUGIN_TUNRSTILE_LOADER__" async="" defer=""></script>
98<div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><aleo-nav></aleo-nav>
99
100<script type="text/static-page-js">
101  // ALEO_EXPERT_ENDPOINT    → "Talk to An Expert" / HA lead forms
102  // ALEO_SUBSCRIBE_ENDPOINT → policy-section email signup
103  window.ALEO_EXPERT_ENDPOINT    = "https://aleo-forms.aleohq.workers.dev";
104  window.ALEO_SUBSCRIBE_ENDPOINT = "https://aleo-forms.aleohq.workers.dev";
105</script>
vendor: 1 bytes, line 105
105
106<script type="text/static-page-js">
107  window.ALEO_FORM_ERRORS = {
108    network:                  'Unable to connect. If you\u2019re behind a corporate firewall or VPN, try from a different network.',
109    rate_limited:             'Too many attempts. Please wait a few minutes before trying again.',
110    invalid_email:            'Invalid email address.',
111    invalid_name:             'Name is required.',
112    invalid_org:              'Organization is required.',
113    invalid_organizationType: 'Please select an organization type.',
114    invalid_programScale:     'Please select a program scale.',
115    invalid_message:          'Please tell us about your program and context.',
116    asana:                    'A server error occurred. Please try again later.',
117    mailmodo:                 'A server error occurred. Please try again later.',
118    not_configured:           'This form is temporarily unavailable.',
119    default:                  'Submission failed. Please try again.'
120  };
121</script>
vendor: 1 bytes, line 121
121
122<script type="text/static-page-js">
123(function () {
124  var EMAIL_RE = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
125
126  function resolveErrorMessage(err, data) {
127    var errors = window.ALEO_FORM_ERRORS || {};
128    var key = (err && err.name === 'TypeError') ? 'network' : ((data && data.error) || 'default');
129    return errors[key] || errors.default || 'Submission failed. Please try again.';
130  }
131
132  function showError(errorEl, message) {
133    if (!errorEl) return;
134    errorEl.textContent = message;
135    errorEl.hidden = false;
136  }
137
138  function hideError(errorEl) {
139    if (errorEl) errorEl.hidden = true;
140  }
141
142  function setButtonState(button, labelEl, disabled, text) {
143    if (button) button.disabled = !!disabled;
144    if (labelEl && typeof text === 'string') labelEl.textContent = text;
145  }
146
147  function fieldLabel(field) {
148    return field
149      .replace(/_/g, ' ')
150      .replace(/([a-z])([A-Z])/g, '$1 $2')
151      .replace(/^./, function (c) { return c.toUpperCase(); });
152  }
153
154  /** Validate opts.required against opts[field] / opts[field + 'Input']. */
155  function validateRequired(opts, errorEl) {
156    var required = opts.required || [];
157    var errors = window.ALEO_FORM_ERRORS || {};
158
159    for (var i = 0; i < required.length; i++) {
160      var field = required[i];
161      var value = String(opts[field] == null ? '' : opts[field]).trim();
162      var input = opts[field + 'Input'];
163
164      if (field === 'email') {
165        if (!EMAIL_RE.test(value)) {
166          showError(errorEl, errors.invalid_email || 'Invalid email address.');
167          if (input && input.focus) input.focus();
168          return false;
169        }
170        continue;
171      }
172
173      if (!value) {
174        var errorKey = 'invalid_' + field;
175        var msg = errors[errorKey] || (fieldLabel(field) + ' is required.');
176        showError(errorEl, msg);
177        if (input && input.focus) input.focus();
178        return false;
179      }
180    }
181
182    return true;
183  }
184
185  /**
186   * Shared client validation + Worker submit for static-page forms.
187   * Returns a Promise that resolves true on success / honeypot / no-endpoint,
188   * false on validation failure or server/network error.
189   */
190  async function submit(opts) {
191    opts = opts || {};
192    var form = opts.form;
193    var errorEl = opts.errorEl;
194    var button = opts.button;
195    var labelEl = opts.buttonLabelEl || button;
196    var sendingText = opts.sendingText || 'Sending…';
197    var idleText = opts.idleText;
198
199    hideError(errorEl);
200
201    var payload = opts.payload || {};
202    if (!opts.endpoint) {
203      console.log('[aleo-forms] submitting', {
204        label: opts.logLabel || 'form',
205        endpoint: '(none — local thank-you only)',
206        dryRun: true,
207        honeypotFilled: !!(opts.honeypot || '').trim(),
208        payload: payload
209      });
210    }
211
212    // Honeypot filled → fake success, send nothing
213    if ((opts.honeypot || '').trim() !== '') {
214      if (form && opts.thanksHtml) form.innerHTML = opts.thanksHtml;
215      return true;
216    }
217
218    if (!validateRequired(opts, errorEl)) return false;
219
220    // No Worker configured → local thank-you, send nothing
221    if (!opts.endpoint) {
222      if (form && opts.thanksHtml) form.innerHTML = opts.thanksHtml;
223      return true;
224    }
225
226    if (idleText == null && labelEl) idleText = labelEl.textContent;
227    setButtonState(button, labelEl, true, sendingText);
228
229    var data;
230    try {
231      var res = await fetch(opts.endpoint, {
232        method: 'POST',
233        headers: { 'Content-Type': 'application/json' },
234        body: JSON.stringify(payload)
235      });
236      data = await res.json().catch(function () { return {}; });
237      if (res.ok && data && data.ok) {
238        if (form && opts.thanksHtml) form.innerHTML = opts.thanksHtml;
239        return true;
240      }
241      throw new Error('server');
242    } catch (err) {
243      console.error(
244        '[aleo-forms] ' + (opts.logLabel || 'form') + ' submission failed:',
245        err,
246        data || 'no response',
247        { origin: window.location.origin }
248      );
249      setButtonState(button, labelEl, false, idleText);
250      showError(errorEl, resolveErrorMessage(err, data));
251      return false;
252    }
253  }
254
255  window.AleoForm = {
256    EMAIL_RE: EMAIL_RE,
257    resolveErrorMessage: resolveErrorMessage,
258    validateRequired: validateRequired,
259    submit: submit
260  };
261}());
262</script>
262
263
264<style>
265  /* ── MODULE: HERO-9 ─────────────────────────────────────────
266     Minimal dark hero. Pure black. Aleo wordmark as H1.
267     Gradient used on tagline text + card footer stripe only.
268  ───────────────────────────────────────────────────────────── */
269
270  :root {
271    --grad-aleo: linear-gradient(100deg,
272      #A8E063 0%,
273      #F2D060 38%,
274      #F5A87A 68%,
275      #E8A0C5 100%
276    );
277  }
278
279  .h9 {
280    background: #0a0a0a;
281    min-height: 100vh;
282    display: flex;
283    flex-direction: column;
284    justify-content: space-between;
285    position: relative;
286    overflow: hidden;
287  }
288
289  /* ── Main grid ── */
290  .h9__inner {
291    display: grid;
292    grid-template-columns: 1fr 440px;
293    gap: 80px;
294    align-items: center;
295    align-content: flex-end;
296    flex: 1;
297    padding: 141px 160px 60px;
298  }
299
300  /* ── Left: wordmark + tagline + CTA ── */
301  .h9__splash {
302    width: 100%;
303  }
304
305  /* Logo: starts blurred, comes into focus */
306  .h9__wordmark {
307    display: block;
308    height: 95px;
309    width: auto;
310    filter: brightness(0) invert(1) blur(10px);
311    margin-bottom: 52px;
312    opacity: 0;
313    transition: opacity 1.6s ease-out, filter 1.6s ease-out;
314  }
315  .h9--ready .h9__wordmark {
316    opacity: 1;
317    filter: brightness(0) invert(1) blur(0px);
318  }
319
320  /* Tagline: fades in on load */
321  .h9__tagline {
322    font-family: var(--font-display);
323    font-weight: 400;
324    font-size: 64px;
325    line-height: calc(1em + 7px);
326    letter-spacing: -0.03em;
327    color: rgba(245,245,245,0.92);
328    margin-bottom: 32px;
329    white-space: pre-wrap;
330    position: relative;
331    opacity: 0;
332    transition: opacity 1.6s ease-out 0.4s;
333  }
334  .h9--ready .h9__tagline { opacity: 1; }
335
336  /* Shimmer gradient — applied to each line after typewriter finishes */
337  @keyframes h9-shimmer {
338    0%   { background-position: 0% center; }
339    100% { background-position: 200% center; }
340  }
341
342  .h9__tagline-shimmer {
343    display: inline;
344    background: linear-gradient(
345      90deg,
346      var(--lime)       0%,
347      var(--lemon)      20%,
348      var(--pomelo)     40%,
349      var(--tangerine)  65%,
350      var(--cloudberry) 85%,
351      var(--lime)       100%
352    );
353    background-size: 200% auto;
354    -webkit-background-clip: text;
355    -webkit-text-fill-color: transparent;
356    background-clip: text;
357    animation: h9-shimmer 5s linear infinite;
358  }
359
360  .h9__sub {
361    font-family: var(--font-body);
362    font-size: 24px;
363    font-weight: 500;
364    line-height: 1.55;
365    color: rgba(245,245,245,0.82);
366    max-width: 520px;
367    margin-bottom: 36px;
368  }
369
370  .h9__cta {
371    opacity: 0;
372    transition: opacity 1.4s ease-out;
373  }
374  .h9__cta.is-visible { opacity: 1; }
375
376  .h9__btn-primary {
377    display: inline-flex;
378    align-items: center;
379    height: 54px;
380    padding: 0 32px;
381    background: var(--ivory);
382    color: var(--coal);
383    border-radius: 100px;
384    font-family: var(--font-body);
385    font-size: 13px;
386    font-weight: 600;
387    letter-spacing: 0.08em;
388    text-transform: uppercase;
389    text-decoration: none;
390    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
391    white-space: nowrap;
392    position: relative;
393    overflow: hidden;
394  }
395  .h9__btn-primary::after {
396    content: '';
397    position: absolute;
398    inset: 0;
399    background: linear-gradient(
400      90deg,
401      #A8E063 0%,
402      #F2D060 18%,
403      rgba(255,253,235,0.95) 30%,
404      #F5A87A 44%,
405      #E8A0C5 62%,
406      #c4a0e8 78%,
407      #A8E063 100%
408    );
409    background-size: 400% auto;
410    animation: h9-shimmer 7s linear infinite;
411    border-radius: inherit;
412    opacity: 0;
413    transition: opacity 0.4s ease;
414  }
415  .h9__btn-primary:hover { transform: scale(1.06); }
416  .h9__btn-primary:hover::after { opacity: 0.55; }
417  .h9__btn-primary span {
418    position: relative;
419    z-index: 1;
420  }
421
422  /* ── Right: staggered blog posts ── */
423
424  .h9__posts {
425    position: relative;
426    display: flex;
427    flex-direction: column;
428    gap: 0;
429    /* Pin posts to a fixed x position as viewport narrows.
430       At 1440px = -310px (full staircase). Reduces proportionally
431       so cards don't slide further left into hero text. */
432    margin-left: clamp(-310px, calc(1290px - 100vw), 0px);
433  }
434
435  @keyframes h9-post-in {
436    from { opacity: 0; filter: blur(6px); transform: translateY(18px); }
437    to   { opacity: 1; filter: blur(0px); transform: translateY(0); }
438  }
439
440  .h9__post {
441    display: flex;
442    flex-direction: row;
443    align-items: center;
444    gap: 24px;
445    text-decoration: none;
446    opacity: 0;
447    transition: transform 0.4s ease;
448  }
449
450  .h9__post:nth-child(2) {
451    margin-top: 68px;
452    margin-left: 56px;
453  }
454
455  .h9__post:hover { transform: translateY(-8px); }
456
457  .h9__post.is-visible {
458    animation: h9-post-in 1.6s cubic-bezier(0.16,1,0.3,1) forwards;
459  }
460
461  /* 16:9 image block */
462  .h9__post-thumb {
463    width: 351px;
464    aspect-ratio: 16 / 9;
465    border-radius: 14px;
466    overflow: hidden;
467    position: relative;
468    box-shadow: 0 20px 48px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.25);
469    background: #1a1a1a;
470    flex-shrink: 0;
471  }
472
473  .h9__post-thumb img {
474    width: 100%;
475    height: 100%;
476    object-fit: cover;
477    display: block;
478  }
479
480  /* Text beside image */
481  .h9__post-body {
482    display: flex;
483    flex-direction: column;
484    justify-content: center;
485    gap: 20px;
486    max-width: 320px;
487  }
488
489  .h9__post-title {
490    font-family: var(--font-body);
491    font-size: 26px;
492    font-weight: 400;
493    letter-spacing: -0.02em;
494    line-height: 1.25;
495    color: rgba(245,245,245,0.9);
496    background: linear-gradient(
497      90deg,
498      var(--lime)       0%,
499      var(--lemon)      20%,
500      var(--pomelo)     40%,
501      var(--tangerine)  65%,
502      var(--cloudberry) 85%,
503      var(--lime)       100%
504    );
505    background-size: 200% auto;
506    -webkit-background-clip: text;
507    background-clip: text;
508    -webkit-text-fill-color: rgba(245,245,245,0.9);
509    animation: h9-shimmer 5s linear infinite;
510    transition: -webkit-text-fill-color 0.6s ease;
511  }
512
513  .h9__post:hover .h9__post-title {
514    -webkit-text-fill-color: rgba(245,245,245,0);
515  }
516
517  .h9__post-btn {
518    display: inline-flex;
519    align-items: center;
520    width: fit-content;
521    height: 44px;
522    padding: 0 26px;
523    background: transparent;
524    border: 1px solid rgba(255,255,255,0.3);
525    border-radius: 100px;
526    font-family: var(--font-body);
527    font-size: 12px;
528    font-weight: 500;
529    letter-spacing: 0.08em;
530    text-transform: uppercase;
531    color: rgba(245,245,245,0.75);
532    transition: background 0.15s, border-color 0.15s, color 0.15s;
533  }
534
535  .h9__post:hover .h9__post-btn {
536    border-color: rgba(255,255,255,0.65);
537    color: rgba(245,245,245,1);
538  }
539
540  .h9__post:hover .h9__post-btn:hover {
541    background: #fff;
542    border-color: #fff;
543    color: #0a0a0a;
544  }
545
546  /* ── Trusted by strip ── */
547  .h9__trust {
548    margin-bottom: 60px;
549    opacity: 0;
550    transition: opacity 1.4s ease-out;
551  }
552
553  .h9__trust-label {
554    font-family: var(--font-body);
555    font-size: 14px;
556    font-weight: 500;
557    letter-spacing: 0.14em;
558    text-transform: uppercase;
559    color: rgba(245,245,245,0.25);
560    text-align: center;
561    margin-bottom: 18px;
562  }
563
564  .h9__trust-rule {
565    border-top: 1px solid rgba(255,255,255,0.07);
566    margin-bottom: 24px;
567  }
568
569  .h9__trust-rule--bottom {
570    margin-top: 24px;
571    margin-bottom: 0;
572  }
573
574  .h9__marquee-wrap {
575    overflow: hidden;
576    mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
577    -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
578  }
579
580  .h9__marquee-track {
581    display: flex;
582    align-items: center;
583    width: max-content;
584    animation: h9-marquee 90s linear infinite;
585  }
586
587  .h9__marquee-track:hover {
588    animation-play-state: paused;
589  }
590
591  @keyframes h9-marquee {
592    from { transform: translateX(0); }
593    to   { transform: translateX(-50%); }
594  }
595
596  .h9__marquee-item {
597    display: inline-flex;
598    align-items: center;
599    padding: 0 52px;
600    opacity: 0.35;
601    transition: opacity 0.2s ease;
602  }
603
604  .h9__marquee-item:hover {
605    opacity: 0.75;
606  }
607
608  .h9__marquee-item img {
609    height: 38px;
610    width: auto;
611    display: block;
612    filter: brightness(0) invert(1);
613    opacity: 0.65;
614  }
615
616  .h9__marquee-sep {
617    color: rgba(245,245,245,0.1);
618    font-size: 20px;
619    flex-shrink: 0;
620  }
621
622  /* ── Scale blog cards down as viewport narrows (1341–1600px) ── */
623  @media (max-width: 1599px) { .h9__posts { zoom: 0.93; } }
624  @media (max-width: 1499px) { .h9__posts { zoom: 0.86; } }
625  @media (max-width: 1399px) { .h9__posts { zoom: 0.80; } }
626
627  /* ── Below 1340px: scale entire inner (both columns) together ──
628     padding-top is divided by the zoom factor so the headline stays
629     visually below the fixed 141px nav at every step.
630
631     Blog cards: the inner zoom would otherwise (a) enlarge the cards and
632     (b) compress the card-body's layout width, re-wrapping the title into
633     more lines. So pin the body width to freeze the title wrapping to match
634     the 1341px layout, and give .h9__posts a compensating zoom (≈0.80 /
635     inner-zoom) so the effective card scale stays ~0.80 across the whole
636     range — i.e. the cards look identical to the >1340px breakpoint. */
637  @media (max-width: 1340px) and (min-width: 1025px) {
638    .h9__post-body { width: 226px; max-width: 226px; flex-shrink: 0; }
639  }
640  @media (max-width: 1340px) and (min-width: 1241px) {
641    .h9__inner { zoom: 0.92; padding-top: 154px; }
642    .h9__posts { zoom: 0.87; } /* 0.80 / 0.92 */
643  }
644  @media (max-width: 1240px) and (min-width: 1141px) {
645    .h9__inner { zoom: 0.88; padding-top: 161px; }
646    .h9__posts { zoom: 0.91; } /* 0.80 / 0.88 */
647  }
648  @media (max-width: 1140px) and (min-width: 1025px) {
649    .h9__inner { zoom: 0.84; padding-top: 168px; }
650    .h9__posts { zoom: 0.95; } /* 0.80 / 0.84 */
651  }
652
653  /* ── Tablet (≤1024px) ──
654     Single column: wordmark → tagline → sub/CTA → blog cards → trust.
655     padding-top clears the fixed 141px nav. Blog cards switch from the
656     desktop staircase to a 2-up grid (thumb on top, text below). */
657  @media (max-width: 1024px) {
658    .h9__inner {
659      grid-template-columns: 1fr;
660      padding: 165px 60px 48px;
661      gap: 0;
662    }
663    .h9__wordmark { height: 72px; margin-bottom: 36px; }
664    .h9__tagline { font-size: 60px; }
665    .h9__sub { font-size: 20px; max-width: none; }
666    .h9__trust { margin-bottom: 40px; }
667
668    .h9__posts {
669      display: grid;
670      grid-template-columns: 1fr 1fr;
671      gap: 24px;
672      margin-left: 0;
673      margin-top: 56px;
674      zoom: 1;
675    }
676    .h9__post { flex-direction: column; align-items: stretch; gap: 16px; }
677    .h9__post:nth-child(2) { margin-top: 0; margin-left: 0; }
678    .h9__post-thumb { width: 100%; }
679    .h9__post-body { max-width: none; gap: 12px; }
680    .h9__post-title { font-size: 19px; }
681    .h9__post-btn { height: 40px; padding: 0 22px; font-size: 11px; }
682  }
683
684  /* ── Mobile (≤767px) ──
685     Wordmark dropped from the hero — the nav logo shows immediately
686     instead (see nav.js). Blog cards keep the tablet 2-up grid here;
687     they only stack once cards get genuinely cramped (≤500px). */
688  @media (max-width: 767px) {
689    .h9__inner {
690      padding: 165px 36px 40px;
691    }
692    .h9__wordmark { display: none; }
693    .h9__tagline { font-size: 38px; }
694    .h9__sub { font-size: 18px; margin-bottom: 28px; }
695    .h9__marquee-item { padding: 0 28px; }
696    .h9__marquee-item img { height: 30px; }
697    /* 15% faster than the 90s desktop pace: 90 × 0.85 = 76.5s */
698    .h9__marquee-track { animation-duration: 76.5s; }
699    .h9__trust { margin-bottom: 28px; }
700
701    .h9__posts { margin-top: 44px; }
702    .h9__post-title { font-size: 17px; }
703  }
704
705  /* ── Narrow mobile (≤500px): blog cards stack ── */
706  @media (max-width: 500px) {
707    .h9__posts { grid-template-columns: 1fr; gap: 28px; }
708    .h9__post-title { font-size: 19px; }
709  }
710</style>
711
712<section class="h9">
713
714  
715  <noscript>
716    <style>
717      .h9__wordmark, .h9__tagline, .h9__cta, .h9__trust, .h9__post {
718        opacity: 1 !important;
719        filter: brightness(0) invert(1) blur(0) !important;
720      }
721      .h9__tagline, .h9__cta, .h9__trust, .h9__post { filter: none !important; }
722    </style>
723  </noscript>
724
725  
726  <div class="h9__inner">
727
728    
729    <div class="h9__left">
730      <div class="h9__splash" id="h9-splash">
731        <img
732          src="/public/images/logos/aleo-wordmark.svg"
733          alt="Aleo"
734          class="h9__wordmark"
735        >
736        
737        <h1 class="h9__tagline" id="h9-tagline"><span class="h9__tagline-shimmer">Private Stablecoin</span><br><span class="h9__tagline-shimmer" style="animation-delay:-2.3s;">Payments.</span></h1>
738      </div>
739      <div class="h9__cta" id="h9-cta">
740        <p class="h9__sub">Move money anywhere in the world in seconds, for less than a penny, while keeping financial data between you and the people you choose.</p>
741        <a href="#get-started" class="h9__btn-primary" data-demo-open><span>Talk to An Expert</span></a>
742      </div>
743    </div>
744
745    
746    <div class="h9__posts">
747
748      <a href="/post/private-usdcx-ledger/" class="h9__post" aria-label="Read: USDCx on Aleo is now live in Ledger">
749        <div class="h9__post-thumb">
750          <img src="/public/images/banners/aleo-ledger.png" alt="USDCx on Aleo is now live in Ledger">
751        </div>
752        <div class="h9__post-body">
753          <h3 class="h9__post-title">USDCx on Aleo is now live in Ledger</h3>
754          <span class="h9__post-btn">Learn More &rarr;</span>
755        </div>
756      </a>
757
758      <a href="/post/stablecoin-privacy-paper/" class="h9__post" aria-label="Read: Stablecoin Privacy">
759        <div class="h9__post-thumb">
760          <img src="/public/images/stablecoin-whitepaper-banner.jpg" alt="Stablecoin Privacy whitepaper">
761        </div>
762        <div class="h9__post-body">
763          <h3 class="h9__post-title">Stablecoin Privacy: A New Paper Making The Case for Private Stablecoins</h3>
764          <span class="h9__post-btn">Learn More &rarr;</span>
765        </div>
766      </a>
767
768    </div>
769
770  </div>
771
772  
773  <div class="h9__trust">
774    <p class="h9__trust-label">Trusted by</p>
775    <div class="h9__trust-rule"></div>
776    <div class="h9__marquee-wrap" aria-label="Partner organisations">
777      <div class="h9__marquee-track">
778        <span class="h9__marquee-item"><img src="/public/images/partner-logos/circle.svg" alt="Circle"></span><span class="h9__marquee-sep">/</span>
779        <span class="h9__marquee-item"><img src="/public/images/partner-logos/Paxos-Logo-Black-Registered-RGB.svg" alt="Paxos"></span><span class="h9__marquee-sep">/</span>
780        <span class="h9__marquee-item"><img src="/public/images/partner-logos/ledger.svg" alt="Ledger"></span><span class="h9__marquee-sep">/</span>
781        <span class="h9__marquee-item"><img src="/public/images/partner-logos/mercy%20corps.svg" alt="Mercy Corps"></span><span class="h9__marquee-sep">/</span>
782        <span class="h9__marquee-item"><img src="/public/images/partner-logos/dynamic-logo-mono.svg" alt="Dynamic"></span><span class="h9__marquee-sep">/</span>
783        <span class="h9__marquee-item"><img src="/public/images/partner-logos/near%20intents.svg" alt="Near Intents"></span><span class="h9__marquee-sep">/</span>
784        <span class="h9__marquee-item"><img src="/public/images/partner-logos/Coinbase-wordmark.svg" alt="Coinbase"></span><span class="h9__marquee-sep">/</span>
785        <span class="h9__marquee-item"><img src="/public/images/partner-logos/GDN-Dark.svg" alt="Global Dollar Network"></span><span class="h9__marquee-sep">/</span>
786        <span class="h9__marquee-item"><img src="/public/images/partner-logos/Google Cloud.svg" alt="Google Cloud"></span><span class="h9__marquee-sep">/</span>
787        <span class="h9__marquee-item"><img src="/public/images/partner-logos/a16z-crypto.svg" alt="a16z crypto"></span><span class="h9__marquee-sep">/</span>
788        <span class="h9__marquee-item"><img src="/public/images/partner-logos/Request-Finance.svg" alt="Request Finance"></span><span class="h9__marquee-sep">/</span>
789        <span class="h9__marquee-item"><img src="/public/images/partner-logos/Revolut.svg" alt="Revolut"></span><span class="h9__marquee-sep">/</span>
790        <span class="h9__marquee-item"><img src="/public/images/partner-logos/toku-logo.svg" alt="Toku"></span><span class="h9__marquee-sep">/</span>
791        <span class="h9__marquee-item"><img src="/public/images/partner-logos/utila-logo-horizontal-dark.svg" alt="Utila"></span><span class="h9__marquee-sep">/</span>
792        <span class="h9__marquee-item"><img src="/public/images/partner-logos/circle.svg" alt="Circle"></span><span class="h9__marquee-sep">/</span>
793        <span class="h9__marquee-item"><img src="/public/images/partner-logos/Paxos-Logo-Black-Registered-RGB.svg" alt="Paxos"></span><span class="h9__marquee-sep">/</span>
794        <span class="h9__marquee-item"><img src="/public/images/partner-logos/ledger.svg" alt="Ledger"></span><span class="h9__marquee-sep">/</span>
795        <span class="h9__marquee-item"><img src="/public/images/partner-logos/mercy%20corps.svg" alt="Mercy Corps"></span><span class="h9__marquee-sep">/</span>
796        <span class="h9__marquee-item"><img src="/public/images/partner-logos/dynamic-logo-mono.svg" alt="Dynamic"></span><span class="h9__marquee-sep">/</span>
797        <span class="h9__marquee-item"><img src="/public/images/partner-logos/near%20intents.svg" alt="Near Intents"></span><span class="h9__marquee-sep">/</span>
798        <span class="h9__marquee-item"><img src="/public/images/partner-logos/Coinbase-wordmark.svg" alt="Coinbase"></span><span class="h9__marquee-sep">/</span>
799        <span class="h9__marquee-item"><img src="/public/images/partner-logos/GDN-Dark.svg" alt="Global Dollar Network"></span><span class="h9__marquee-sep">/</span>
800        <span class="h9__marquee-item"><img src="/public/images/partner-logos/Google Cloud.svg" alt="Google Cloud"></span><span class="h9__marquee-sep">/</span>
801        <span class="h9__marquee-item"><img src="/public/images/partner-logos/a16z-crypto.svg" alt="a16z crypto"></span><span class="h9__marquee-sep">/</span>
802        <span class="h9__marquee-item"><img src="/public/images/partner-logos/Request-Finance.svg" alt="Request Finance"></span><span class="h9__marquee-sep">/</span>
803        <span class="h9__marquee-item"><img src="/public/images/partner-logos/Revolut.svg" alt="Revolut"></span><span class="h9__marquee-sep">/</span>
804        <span class="h9__marquee-item"><img src="/public/images/partner-logos/toku-logo.svg" alt="Toku"></span><span class="h9__marquee-sep">/</span>
805        <span class="h9__marquee-item"><img src="/public/images/partner-logos/utila-logo-horizontal-dark.svg" alt="Utila"></span><span class="h9__marquee-sep">/</span>
806      </div>
807    </div>
808    <div class="h9__trust-rule h9__trust-rule--bottom"></div>
809  </div>
810
811</section>
812
813<script type="text/static-page-js">
814(function() {
815  var section = document.querySelector('.h9');
816  var tagline = document.getElementById('h9-tagline');
817  var cta     = document.getElementById('h9-cta');
818  if (!section || !tagline) return;
819
820  document.fonts.ready.then(function() {
821    requestAnimationFrame(function() {
822      section.classList.add('h9--ready');
823
824      if (cta) setTimeout(function() { cta.classList.add('is-visible'); }, 700);
825
826      var posts = section.querySelectorAll('.h9__post');
827      posts.forEach(function(post, i) {
828        setTimeout(function() {
829          post.classList.add('is-visible');
830          post.addEventListener('animationend', function() {
831            post.style.opacity   = '1';
832            post.style.filter    = 'blur(0px)';
833            post.style.animation = 'none';
834          }, { once: true });
835        }, 900 + i * 350);
836      });
837
838      var trust = section.querySelector('.h9__trust');
839      if (trust) setTimeout(function() { trust.style.opacity = '1'; }, 1000);
840
841      document.dispatchEvent(new CustomEvent('hero:trust-revealed'));
842    });
843  });
844})();
845</script>
845
846
847<style>
848  /* ── MODULE: WHAT-9 ─────────────────────────────────────────
849     Light section. Option A editorial base.
850     Proof animator replaces the three tag pills.
851  ───────────────────────────────────────────────────────────── */
852
853  .w9 {
854    background: #f5f5f7;
855    overflow: hidden;
856    --w9-col: 889px; /* JS overrides with exact measurement */
857  }
858
859  .w9__proof-window,
860  .w9__body,
861  .w9__stable-col {
862    max-width: var(--w9-col);
863  }
864
865  .w9-inner {
866    padding: 80px 160px 100px;
867  }
868
869  /* ── Intro headlines ──
870     Fluid size: the widest intended line ("Your money should be private.")
871     measures ~14.2× the font size, so cap the font at 7% of the content
872     width (viewport − side padding) to keep the 3-line structure intact
873     instead of spilling orphan words onto extra lines. */
874  .w9__headline {
875    font-family: var(--font-display);
876    font-size: min(64px, calc(7vw - 22.4px));
877    font-weight: 400;
878    letter-spacing: -0.03em;
879    line-height: 1.05;
880    color: var(--coal);
881    margin-bottom: 4px;
882  }
883
884  .w9__headline-muted {
885    font-family: var(--font-display);
886    font-size: min(64px, calc(7vw - 22.4px));
887    font-weight: 400;
888    letter-spacing: -0.03em;
889    line-height: 1.05;
890    color: rgba(18,18,18,0.48);
891    margin-bottom: 52px;
892  }
893
894  /* ── Proof animator (scrolling, light) ── */
895  .w9__proof-window {
896    position: relative;
897    height: 320px; /* 5 rows × 56px + 4 gaps × 10px */
898    overflow: hidden;
899    margin-bottom: 52px;
900  }
901
902  /* Subtle fade masks — just enough to soften edges */
903  .w9__proof-window::before,
904  .w9__proof-window::after {
905    content: '';
906    position: absolute;
907    left: 0; right: 0;
908    height: 28px;
909    z-index: 2;
910    pointer-events: none;
911  }
912  .w9__proof-window::before {
913    top: 0;
914    background: linear-gradient(to bottom, #f5f5f7, transparent);
915  }
916  .w9__proof-window::after {
917    bottom: 0;
918    background: linear-gradient(to top, #f5f5f7, transparent);
919  }
920
921  .w9__proof-track {
922    display: flex;
923    flex-direction: column;
924    gap: 10px;
925    position: absolute;
926    left: 0; right: 0;
927    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
928  }
929
930  /* Default: row arrives readable/plain */
931  .w9__proof {
932    background: rgba(18,18,18,0.03);
933    border: 1px solid rgba(18,18,18,0.07);
934    border-radius: 14px;
935    padding: 0 24px;
936    height: 56px;
937    flex-shrink: 0;
938    display: grid;
939    grid-template-columns: auto 1fr auto;
940    gap: 20px;
941    align-items: center;
942    transition: border-color 0.4s ease, background 0.4s ease;
943  }
944
945  /* Encrypting: border lights up */
946  .w9__proof.is-encrypting {
947    border-color: rgba(100,180,60,0.45);
948    background: rgba(168,224,99,0.07);
949  }
950
951  /* Proof state: hash text, verified badge */
952  .w9__proof.is-proof {
953    border-color: rgba(100,180,60,0.18);
954    background: rgba(168,224,99,0.03);
955  }
956
957  .w9__proof-index {
958    font-family: var(--font-mono);
959    font-size: 10px;
960    letter-spacing: 0.08em;
961    color: rgba(18,18,18,0.2);
962    flex-shrink: 0;
963  }
964
965  /* Plain readable text */
966  .w9__proof-text {
967    font-family: var(--font-body);
968    font-size: 15px;
969    font-weight: 500;
970    letter-spacing: -0.01em;
971    color: rgba(18,18,18,0.75);
972    white-space: nowrap;
973    overflow: hidden;
974    text-overflow: ellipsis;
975    transition: color 0.2s;
976  }
977
978  .w9__proof.is-encrypting .w9__proof-text {
979    color: rgba(18,18,18,0.45);
980  }
981
982  /* After encryption: monospace hash, muted */
983  .w9__proof.is-proof .w9__proof-text {
984    font-family: var(--font-mono);
985    font-size: 12px;
986    font-weight: 400;
987    letter-spacing: 0.03em;
988    color: rgba(18,18,18,0.22);
989  }
990
991  /* Category label badge */
992  .w9__proof-status {
993    font-family: var(--font-body);
994    font-size: 11px;
995    font-weight: 600;
996    letter-spacing: 0.07em;
997    text-transform: uppercase;
998    border-radius: 100px;
999    padding: 5px 14px;
1000    white-space: nowrap;
1001    flex-shrink: 0;
1002    color: rgba(18,18,18,0.35);
1003    background: rgba(18,18,18,0.05);
1004    border: 1px solid rgba(18,18,18,0.08);
1005    transition: all 0.35s ease;
1006  }
1007
1008  /* Proof badge */
1009  .w9__proof.is-proof .w9__proof-status {
1010    color: rgba(50,140,30,0.95);
1011    background: rgba(168,224,99,0.18);
1012    border-color: rgba(100,180,60,0.28);
1013  }
1014
1015  /* ── Body copy ── */
1016  .w9__body {
1017    margin-bottom: 72px;
1018  }
1019
1020  .w9__body p {
1021    font-family: var(--font-body);
1022    font-size: 22px;
1023    line-height: 1.6;
1024    color: rgba(18,18,18,0.78);
1025    margin-bottom: 28px;
1026  }
1027
1028  .w9__body p:last-child { margin-bottom: 0; }
1029
1030  /* ── Gradient rule ── */
1031  .w9__rule {
1032    height: 2px;
1033    border: none;
1034    background: linear-gradient(90deg, var(--lime) 0%, var(--lemon) 20%, var(--pomelo) 40%, var(--tangerine) 65%, var(--cloudberry) 85%, var(--lime) 100%);
1035    background-size: 700% auto;
1036    animation: w9-stripe-shimmer 20s linear infinite;
1037    margin-bottom: 72px;
1038    border-radius: 2px;
1039  }
1040
1041  /* ── Stablecoin moment ── */
1042  .w9__stable-headline {
1043    font-family: var(--font-display);
1044    font-weight: 400;
1045    letter-spacing: -0.03em;
1046    line-height: 1.1;
1047    color: var(--coal);
1048    margin-bottom: 20px;
1049  }
1050
1051  .w9__sh-line1 {
1052    display: block;
1053    font-size: 52px;
1054  }
1055
1056  .w9__sh-main {
1057    display: block;
1058    font-size: 80px;
1059    line-height: 1.0;
1060  }
1061
1062  .w9__sh-cycle-wrap {
1063    display: inline-block;
1064    overflow: hidden;
1065    height: 1.05em;
1066    vertical-align: bottom;
1067  }
1068
1069  .w9__sh-cycle-word {
1070    display: block;
1071    white-space: nowrap;
1072    color: var(--coal);
1073    will-change: transform, opacity;
1074    transform: translateY(0);
1075    opacity: 1;
1076    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1),
1077                opacity   0.4s ease;
1078  }
1079
1080  .w9__sh-main--muted {
1081    color: rgba(18,18,18,0.35);
1082  }
1083
1084  .w9__sh-cycle-word.w9sh--out {
1085    transform: translateY(-115%);
1086    opacity: 0;
1087  }
1088
1089  .w9__sh-cycle-word.w9sh--reset {
1090    transition: none;
1091    transform: translateY(115%);
1092    opacity: 0;
1093  }
1094
1095  .w9__stable-body {
1096    font-family: var(--font-body);
1097    font-size: 22px;
1098    line-height: 1.6;
1099    color: rgba(18,18,18,0.78);
1100    margin-bottom: 28px;
1101  }
1102
1103  .w9__stable-body:last-of-type {
1104    margin-bottom: 52px;
1105  }
1106
1107  /* ── Product cards ── */
1108  .w9__cards {
1109    display: grid;
1110    grid-template-columns: 1fr 1fr;
1111    gap: 20px;
1112    max-width: 800px;
1113  }
1114
1115  @keyframes w9-card-in {
1116    from { opacity: 0; transform: translateY(20px); }
1117    to   { opacity: 1; transform: translateY(0);    }
1118  }
1119
1120  /* ── Matrix entrance animations ── */
1121  .w9__matrix-title {
1122    opacity: 0;
1123    transform: translateY(20px);
1124    filter: blur(6px);
1125    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1), filter 0.7s ease;
1126  }
1127
1128  .w9__matrix-title.mx-title--in {
1129    opacity: 1;
1130    transform: translateY(0);
1131    filter: blur(0px);
1132  }
1133
1134  .w9__matrix-sub {
1135    font-family: var(--font-body);
1136    font-size: 22px;
1137    line-height: 1.6;
1138    color: rgba(18,18,18,0.78);
1139    max-width: 800px;
1140    margin-top: 16px;
1141    margin-bottom: 48px;
1142    opacity: 0;
1143    transform: translateY(20px);
1144    filter: blur(6px);
1145    transition: opacity 0.9s ease 0.1s, transform 0.9s cubic-bezier(0.16,1,0.3,1) 0.1s, filter 0.7s ease 0.1s;
1146  }
1147
1148  .w9__matrix-sub.mx-title--in {
1149    opacity: 1;
1150    transform: translateY(0);
1151    filter: blur(0px);
1152  }
1153
1154  @keyframes w9-row-in {
1155    from { opacity: 0; transform: translateY(14px); }
1156    to   { opacity: 1; transform: translateY(0);    }
1157  }
1158
1159  .w9__mx-cell.mx-row--hidden {
1160    opacity: 0;
1161    transform: translateY(14px);
1162  }
1163
1164  .w9__mx-cell.mx-row--in {
1165    animation: w9-row-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
1166  }
1167
1168  .w9__mx-val--aleo,
1169  .w9__mx-head--aleo {
1170    transition: box-shadow 0.3s ease;
1171  }
1172
1173  .w9__card {
1174    background: #fff;
1175    border-radius: 24px;
1176    overflow: hidden;
1177    display: flex;
1178    flex-direction: column;
1179    box-shadow: 0 8px 32px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.04);
1180    transition: box-shadow 0.4s ease;
1181  }
1182
1183  .w9__card:hover {
1184    box-shadow: 0 28px 64px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
1185  }
1186
1187  .w9__card-banner {
1188    width: 100%;
1189    aspect-ratio: 16 / 9;
1190    object-fit: cover;
1191    display: block;
1192  }
1193
1194  .w9__card-body { padding: 28px 32px 8px; flex: 1; display: flex; flex-direction: column; }
1195
1196  .w9__card-desc {
1197    font-family: var(--font-body);
1198    font-size: 17px;
1199    line-height: 1.6;
1200    color: rgba(18,18,18,0.5);
1201    margin-bottom: 20px;
1202  }
1203
1204  .w9__card-links {
1205    margin-top: auto; /* pin to card bottom so links align across cards */
1206    border-top: 1px solid rgba(18,18,18,0.08);
1207  }
1208
1209  .w9__card-link {
1210    display: flex;
1211    align-items: center;
1212    justify-content: space-between;
1213    padding: 14px 0;
1214    font-family: var(--font-body);
1215    font-size: 17px;
1216    font-weight: 600;
1217    color: var(--coal);
1218    text-decoration: none;
1219    border-bottom: 1px solid rgba(18,18,18,0.08);
1220    transition: opacity 0.15s ease;
1221  }
1222
1223  .w9__card-link:last-child { border-bottom: none; }
1224
1225  .w9__card-link:hover { opacity: 0.6; }
1226
1227  .w9__card-arrow {
1228    font-size: 16px;
1229    transition: transform 0.15s ease;
1230  }
1231
1232  .w9__card-link:hover .w9__card-arrow {
1233    transform: translateX(3px);
1234  }
1235
1236  /* ── Comparison matrix ── */
1237  .w9__matrix {
1238    margin-top: 96px;
1239    padding-bottom: 20px;
1240    max-width: 100%;
1241  }
1242
1243  .w9__matrix-title {
1244    font-family: var(--font-display);
1245    font-size: 48px;
1246    font-weight: 400;
1247    letter-spacing: -0.03em;
1248    line-height: 1.05;
1249    color: var(--coal);
1250    margin-bottom: 40px;
1251  }
1252
1253  .w9__mx-table {
1254    display: grid;
1255    grid-template-columns: 220px repeat(4, 1fr);
1256    position: relative;
1257  }
1258
1259  .w9__mx-cell {
1260    padding: 30px 24px;
1261    border-bottom: 1px solid rgba(18,18,18,0.07);
1262    display: flex;
1263    align-items: center;
1264    /* Grid items default to min-width:auto, so long text (e.g. "Programmability")
1265       can overflow past the column edge instead of wrapping — it then visually
1266       overlaps the next cell. min-width:0 lets the cell shrink and text wrap. */
1267    min-width: 0;
1268  }
1269
1270  /* Last row — no bottom border */
1271  .w9__mx-cell:nth-last-child(-n+5) { border-bottom: none; }
1272
1273  /* Spacer top-left corner */
1274  .w9__mx-spacer { border-bottom: none; }
1275
1276  /* Column headers */
1277  .w9__mx-head {
1278    font-family: var(--font-display);
1279    font-size: 18px;
1280    font-weight: 400;
1281    letter-spacing: -0.01em;
1282    text-transform: none;
1283    color: rgba(18,18,18,0.45);
1284    flex-direction: column;
1285    justify-content: flex-end;
1286    align-items: center;
1287    text-align: center;
1288    line-height: 1.25;
1289    border-bottom: none;
1290    padding: 20px 16px 24px;
1291    gap: 6px;
1292  }
1293
1294  .w9__mx-head-name { display: block; }
1295
1296  /* Info icon — reveals the "e.g. Stripe, JP Morgan…" examples on hover/tap */
1297  .w9__mx-info {
1298    appearance: none;
1299    -webkit-appearance: none;
1300    background: none;
1301    border: none;
1302    padding: 4px;
1303    margin: 0;
1304    cursor: pointer;
1305    color: rgba(18,18,18,0.32);
1306    position: relative;
1307    display: inline-flex;
1308    line-height: 0;
1309    transition: color 0.15s ease;
1310  }
1311  .w9__mx-info:hover,
1312  .w9__mx-info.is-open { color: rgba(18,18,18,0.62); }
1313  .w9__mx-info:focus-visible { outline: 2px solid rgba(100,180,60,0.6); outline-offset: 2px; border-radius: 50%; }
1314  .w9__mx-info-ic { width: 15px; height: 15px; display: block; }
1315
1316  .w9__mx-tip {
1317    position: absolute;
1318    bottom: calc(100% + 9px);
1319    left: 50%;
1320    transform: translateX(-50%) translateY(4px);
1321    width: max-content;
1322    max-width: 172px;
1323    background: #121212;
1324    color: rgba(245,245,247,0.95);
1325    font-family: var(--font-body);
1326    font-size: 12px;
1327    font-weight: 400;
1328    letter-spacing: 0;
1329    text-transform: none;
1330    line-height: 1.45;
1331    text-align: center;
1332    padding: 9px 13px;
1333    border-radius: 10px;
1334    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
1335    opacity: 0;
1336    visibility: hidden;
1337    pointer-events: none;
1338    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
1339    z-index: 40;
1340  }
1341  .w9__mx-tip::after {
1342    content: '';
1343    position: absolute;
1344    top: 100%;
1345    left: 50%;
1346    transform: translateX(-50%);
1347    border: 5px solid transparent;
1348    border-top-color: #121212;
1349  }
1350  .w9__mx-info:hover .w9__mx-tip,
1351  .w9__mx-info.is-open .w9__mx-tip {
1352    opacity: 1;
1353    visibility: visible;
1354    transform: translateX(-50%) translateY(0);
1355  }
1356
1357  /* Mobile compare selector — hidden until the mobile breakpoint */
1358  .w9__mx-compare { display: none; }
1359  .w9__mx-compare-label {
1360    font-family: 'Azeret Mono', monospace;
1361    font-size: 11px;
1362    font-weight: 600;
1363    letter-spacing: 0.1em;
1364    text-transform: uppercase;
1365    color: rgba(18,18,18,0.4);
1366  }
1367  .w9__mx-pills { display: flex; flex-wrap: wrap; gap: 8px; }
1368  .w9__mx-pill {
1369    appearance: none;
1370    -webkit-appearance: none;
1371    cursor: pointer;
1372    font-family: var(--font-body);
1373    font-size: 13px;
1374    font-weight: 500;
1375    letter-spacing: -0.01em;
1376    color: rgba(18,18,18,0.6);
1377    background: rgba(18,18,18,0.04);
1378    border: 1px solid rgba(18,18,18,0.1);
1379    border-radius: 100px;
1380    padding: 8px 14px;
1381    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
1382  }
1383  .w9__mx-pill.is-active {
1384    background: var(--coal);
1385    color: var(--ivory);
1386    border-color: var(--coal);
1387  }
1388
1389  .w9__mx-head--aleo {
1390    background: rgba(196,255,194,0.45);
1391    color: var(--coal);
1392    font-size: 24px;
1393    justify-content: center;
1394    border-radius: 16px 16px 0 0;
1395    box-shadow: 6px 0 24px rgba(0,0,0,0.07), -6px 0 24px rgba(0,0,0,0.07), 0 -8px 24px rgba(0,0,0,0.06);
1396  }
1397
1398  /* Feature row labels */
1399  .w9__mx-label {
1400    font-family: var(--font-display);
1401    font-size: 20px;
1402    font-weight: 400;
1403    letter-spacing: -0.01em;
1404    color: var(--coal);
1405  }
1406
1407  /* Wraps the label text so it can be constrained directly. A bare text node
1408     inside a display:flex cell won't respect overflow-wrap for its minimum
1409     size (long single words like "Programmability" refuse to wrap and instead
1410     overflow past the column into the next cell) — this real element fixes it. */
1411  .w9__mx-label-text {
1412    display: block;
1413    width: 100%;
1414    min-width: 0;
1415    overflow-wrap: break-word;
1416    -webkit-hyphens: auto;
1417    hyphens: auto;
1418  }
1419
1420  /* Value cells */
1421  .w9__mx-val {
1422    justify-content: center;
1423    text-align: center;
1424    font-family: var(--font-body);
1425    font-size: 15px;
1426    font-weight: 500;
1427  }
1428
1429  .w9__mx-val--yes {
1430    color: rgba(18,18,18,0.45);
1431  }
1432
1433  .w9__mx-val--no {
1434    color: rgba(18,18,18,0.18);
1435  }
1436
1437  .w9__mx-val--partial {
1438    color: rgba(200,140,40,0.8);
1439  }
1440
1441  .w9__mx-val--comp {
1442    color: rgba(18,18,18,0.5);
1443  }
1444
1445  /* "Comprehensive" is swapped for a short "✓ Yes" on mobile —
1446     the long word can't fit the narrow compare columns */
1447  .w9__mx-val-short { display: none; }
1448
1449  /* Aleo column — raised white card */
1450  .w9__mx-val--aleo {
1451    background: #ffffff;
1452    color: var(--coal);
1453    font-weight: 600;
1454    justify-content: center;
1455    box-shadow: 6px 0 24px rgba(0,0,0,0.07), -6px 0 24px rgba(0,0,0,0.07);
1456  }
1457
1458  .w9__mx-val--aleo:last-child {
1459    border-radius: 0 0 16px 16px;
1460    box-shadow: 6px 0 24px rgba(0,0,0,0.07), -6px 0 24px rgba(0,0,0,0.07), 0 8px 24px rgba(0,0,0,0.06);
1461  }
1462
1463  /* Trust strip — partner logos below stablecoin cards */
1464  .w9__trust {
1465    margin-top: 52px;
1466    padding-top: 36px;
1467    border-top: 1px solid rgba(18,18,18,0.08);
1468  }
1469
1470  .w9__trust-label {
1471    font-family: 'Azeret Mono', monospace;
1472    font-size: 13px;
1473    font-weight: 600;
1474    letter-spacing: 0.1em;
1475    text-transform: uppercase;
1476    color: rgba(18,18,18,0.35);
1477    margin-bottom: 28px;
1478  }
1479
1480  .w9__trust-logos {
1481    display: flex;
1482    align-items: center;
1483    gap: 52px;
1484  }
1485
1486  .w9__trust-logos a {
1487    display: flex;
1488    align-items: center;
1489    text-decoration: none;
1490  }
1491
1492  .w9__trust-logos img {
1493    height: 36px;
1494    width: auto;
1495    filter: brightness(0);
1496    opacity: 0.5;
1497    transition: opacity 0.15s ease;
1498  }
1499
1500  .w9__trust-logos a:hover img {
1501    opacity: 0.85;
1502  }
1503
1504  .w9__trust-btn {
1505    display: inline-flex;
1506    align-items: center;
1507    height: 44px;
1508    padding: 0 24px;
1509    border: 1.5px solid rgba(18,18,18,0.2);
1510    border-rad
1510ius: 100px;
1511    font-family: 'Azeret Mono', monospace;
1512    font-size: 11px;
1513    font-weight: 600;
1514    letter-spacing: 0.08em;
1515    text-transform: uppercase;
1516    color: rgba(18,18,18,0.55);
1517    text-decoration: none;
1518    white-space: nowrap;
1519    transition: border-color 0.15s ease, color 0.15s ease;
1520  }
1521
1522  .w9__trust-btn:hover {
1523    border-color: rgba(18,18,18,0.5);
1524    color: rgba(18,18,18,0.9);
1525  }
1526
1527  /* ── Intermediate (1025–1350px): logos need to hold their own ── */
1528  @media (max-width: 1350px) and (min-width: 1025px) {
1529    .w9__trust-logos img { height: 42px; }
1530    .w9__trust-logos { gap: 36px; }
1531  }
1532
1533  /* ── Tablet (≤1024px) ── */
1534  @media (max-width: 1024px) {
1535    .w9-inner { padding: 60px 60px 80px; }
1536    .w9__headline,
1537    .w9__headline-muted { font-size: min(48px, calc(7vw - 8.4px)); }
1538    .w9__sh-main { font-size: 60px; }
1539    .w9__sh-line1 { font-size: 40px; }
1540    .w9__matrix-title { font-size: 36px; }
1541    .w9__trust-logos img { height: 24px; }
1542    .w9__trust-logos { flex-wrap: wrap; gap: 16px 28px; justify-content: flex-start; }
1543    .w9__trust-btn { height: 36px; padding: 0 16px; font-size: 10px; }
1544
1545    /* Comparison matrix: tighten so all 5 columns fit — no horizontal scroll */
1546    .w9__mx-table { grid-template-columns: 150px repeat(4, 1fr); }
1547    .w9__mx-cell { padding: 20px 8px; }
1548    .w9__mx-head { font-size: 15px; padding: 14px 6px 16px; }
1549    .w9__mx-head--aleo { font-size: 20px; }
1550    .w9__mx-label { font-size: 15px; }
1551    .w9__mx-val { font-size: 13px; }
1552  }
1553
1554  /* ── Mobile (≤767px) ── */
1555  @media (max-width: 767px) {
1556    .w9-inner { padding: 40px 36px 60px; }
1557
1558    .w9__headline,
1559    .w9__headline-muted { font-size: clamp(28px, calc(7vw - 5px), 34px); margin-bottom: 32px; }
1560    .w9__headline-muted { margin-bottom: 36px; }
1561
1562    .w9__proof-window { height: 220px; margin-bottom: 36px; }
1563
1564    .w9__body p,
1565    .w9__stable-body,
1566    .w9__matrix-sub { font-size: 18px; }
1567
1568    /* Unconstrain the column — JS measurement gives a desktop width */
1569    .w9__proof-window,
1570    .w9__body,
1571    .w9__stable-col { max-width: 100%; }
1572
1573    .w9__sh-main { font-size: 44px; }
1574    .w9__sh-line1 { font-size: 30px; }
1575
1576    .w9__sh-cycle-wrap { height: 1.05em; }
1577
1578    .w9__cards { grid-template-columns: 1fr; max-width: 100%; }
1579
1580    .w9__rule { margin-bottom: 48px; }
1581
1582    .w9__matrix { margin-top: 60px; }
1583    .w9__matrix-title { font-size: 28px; margin-bottom: 24px; }
1584
1585    /* Compare selector + table bleed past the section's side padding —
1586       gives the table more width to work with (fewer/cleaner wraps for
1587       "Programmability" etc.) without narrowing the margin for the rest
1588       of the section (headline, proof list, cards). */
1589    .w9__mx-compare,
1590    .w9__mx-table { margin-left: -24px; margin-right: -24px; }
1591
1592    /* Compare selector (mobile only) */
1593    .w9__mx-compare { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; padding-left: 24px; padding-right: 24px; }
1594
1595    /* Long "Comprehensive" swaps to its short form */
1596    .w9__mx-val-full { display: none; }
1597    .w9__mx-val-short { display: inline; }
1598
1599    /* 3 columns: Feature | chosen competitor | Aleo — no horizontal scroll.
1600       minmax(0,…) lets tracks shrink below content width, and overflow-wrap
1601       lets long single words (e.g. "Comprehensive") wrap instead of forcing
1602       the columns wider than the viewport.
1603       Label column gets more of the width (it holds the two long unbreakable
1604       words "Programmability"/"Permissionless"); competitor column only ever
1605       shows short values (Yes/—/Limited) so it can be narrower. */
1606    .w9__mx-table { grid-template-columns: minmax(0,1.3fr) minmax(0,0.7fr) minmax(0,1.1fr); column-gap: 8px; min-width: 0; }
1607    .w9__mx-cell { padding: 16px 6px; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
1608    .w9__mx-cell:first-child,
1609    .w9__mx-table > .w9__mx-cell:nth-child(5n+1) { padding-left: 24px; }
1610    .w9__mx-head { font-size: 13px; padding: 10px 6px 16px; }
1611    .w9__mx-head--aleo { font-size: 18px; }
1612    .w9__mx-label { font-size: 14px; }
1613    .w9__mx-val { font-size: 12px; }
1614
1615    /* Hide the two competitor columns that aren't selected.
1616       Per 5-cell row: 5n+1 label · 5n+2 col1 · 5n+3 col2 · 5n+4 col3 · 5n Aleo */
1617    .w9__mx-table[data-compare="1"] .w9__mx-cell:nth-child(5n+3),
1618    .w9__mx-table[data-compare="1"] .w9__mx-cell:nth-child(5n+4),
1619    .w9__mx-table[data-compare="2"] .w9__mx-cell:nth-child(5n+2),
1620    .w9__mx-table[data-compare="2"] .w9__mx-cell:nth-child(5n+4),
1621    .w9__mx-table[data-compare="3"] .w9__mx-cell:nth-child(5n+2),
1622    .w9__mx-table[data-compare="3"] .w9__mx-cell:nth-child(5n+3) { display: none; }
1623
1624    .w9__trust-logos { gap: 24px 32px; flex-wrap: wrap; justify-content: flex-start; }
1625    .w9__trust-logos img { height: 22px; }
1626  }
1627
1628  /* ── Narrow mobile (≤470px) — even the 28px floor can't hold the
1629     3-line structure, so drop the manual break and let the muted
1630     line wrap naturally (avoids the orphan "platforms," line). ── */
1631  @media (max-width: 470px) {
1632    .w9__headline,
1633    .w9__headline-muted { font-size: 32px; }
1634    .w9__headline-muted br { display: none; }
1635  }
1636
1637  /* ── Very narrow phones (≤390px) — comparison matrix ──
1638     Shrink the matrix text a bit more so the two long unbreakable words
1639     ("Programmability"/"Permissionless") need less width and wrap less often
1640     (the soft hyphens in the markup give them a clean break point when they
1641     do wrap). Side margins are handled by the .w9__mx-table bleed above, not
1642     by widening .w9-inner — that stays as-is for the rest of the section. */
1643  @media (max-width: 390px) {
1644    .w9__mx-cell { padding: 14px 5px; }
1645    .w9__mx-head { font-size: 12px; padding: 8px 4px 14px; }
1646    .w9__mx-head--aleo { font-size: 16px; }
1647    .w9__mx-label,
1648    .w9__mx-label-text { font-size: 13px; }
1649    .w9__mx-val { font-size: 11px; }
1650    .w9__mx-compare-label { font-size: 10px; }
1651    .w9__mx-pill { font-size: 12px; padding: 7px 12px; }
1652  }
1653</style>
1654
1655<section class="w9">
1656<div class="w9-inner">
1657
1658  
1659  <h2 class="w9__headline">Your money should be private.</h2>
1660  <p class="w9__headline-muted"><span id="w9-ref-line">But for most payment platforms,</span> <br>privacy is an afterthought.</p>
1661
1662  
1663  <div class="w9__proof-window" id="w9-proof-window">
1664    <div class="w9__proof-track" id="w9-proof-track"></div>
1665  </div>
1666
1667  
1668  <div class="w9__body">
1669    <p>With business and commerce becoming increasingly global, stablecoins enable instant, borderless, programmable transactions.</p>
1670    <p>But most stablecoins expose your full transaction history.</p>
1671    <p>Aleo is built differently.</p>
1672    <p>Aleo enables you to configure the right level of privacy for every transaction. This ensures that you share the right level of information with your auditors and regulators and don't expose sensitive data to your vendors, competitors, or the public.</p>
1673  </div>
1674
1675  <hr class="w9__rule">
1676
1677  
1678  <div class="w9__stable-col">
1679  <h2 class="w9__stable-headline" aria-label="Private / Programmable Stablecoins">
1680    <span class="w9__sh-main"><span class="w9__sh-cycle-wrap" aria-hidden="true"><span class="w9__sh-cycle-word">Private</span></span></span>
1681    <span class="w9__sh-main w9__sh-main--muted">Stablecoins</span>
1682  </h2>
1683  <p class="w9__stable-body">Aleo is home to the world's first private and programmable stablecoins. This makes it easy for large institutions to quickly automate financial workflows without exposing sensitive information.</p>
1684  <p class="w9__stable-body">The result: faster, safer, more efficient financial operations at any scale.</p>
1685
1686  
1687  <div class="w9__cards">
1688    <div class="w9__card">
1689      <img class="w9__card-banner" src="/public/images/banners/usdcx-on-aleo-banner.png" alt="USDCx on Aleo" loading="lazy">
1690      <div class="w9__card-body">
1691        <p class="w9__card-desc">A private, programmable dollar backed 1:1 by USDC and powered by Circle's xReserve.</p>
1692        <div class="w9__card-links">
1693          <a href="/usdcx" class="w9__card-link"><span>Learn More</span><span class="w9__card-arrow" aria-hidden="true">&rarr;</span></a>
1694          <a href="/post/usdcx-case-study/" class="w9__card-link"><span>Read Case Study</span><span class="w9__card-arrow" aria-hidden="true">&rarr;</span></a>
1695        </div>
1696      </div>
1697    </div>
1698    <div class="w9__card">
1699      <img class="w9__card-banner" src="/public/images/banners/usad-on-aleo-banner.png" alt="USAD on Aleo" loading="lazy">
1700      <div class="w9__card-body">
1701        <p class="w9__card-desc">Issued by Paxos Labs and backed 1:1 by USDG, the reserve token of Global Dollar Network.</p>
1702        <div class="w9__card-links">
1703          <a href="/usad/" class="w9__card-link"><span>Learn More</span><span class="w9__card-arrow" aria-hidden="true">&rarr;</span></a>
1704          <a href="/post/usad-case-study/" class="w9__card-link"><span>Read Case Study</span><span class="w9__card-arrow" aria-hidden="true">&rarr;</span></a>
1705        </div>
1706      </div>
1707    </div>
1708  </div>
1709
1710  </div>
1711
1712  
1713  <div class="w9__trust">
1714    <p class="w9__trust-label">Integrated Into</p>
1715    <div class="w9__trust-logos">
1716      <a href="https://www.dynamic.xyz/ecosystems/aleo" target="_blank" rel="noopener"><img src="/public/images/partner-logos/dynamic-logo-mono.svg" alt="Dynamic"></a>
1717      <a href="https://www.requestfinance.com/" target="_blank" rel="noopener"><img src="/public/images/partner-logos/Request-Finance.svg" alt="Request Finance"></a>
1718      <a href="https://www.revolut.com/" target="_blank" rel="noopener"><img src="/public/images/partner-logos/Revolut.svg" alt="Revolut"></a>
1719      <a href="https://www.toku.com/" target="_blank" rel="noopener"><img src="/public/images/partner-logos/toku-logo.svg" alt="Toku"></a>
1720      <a href="https://utila.io/" target="_blank" rel="noopener"><img src="/public/images/partner-logos/utila-logo-horizontal-dark.svg" alt="Utila"></a>
1721      <a href="/ecosystems/" class="w9__trust-btn">Explore Ecosystem &rarr;</a>
1722    </div>
1723  </div>
1724
1725  
1726  <div class="w9__matrix">
1727    <h2 class="w9__matrix-title">Financial privacy, without sacrifice.</h2>
1728    <p class="w9__matrix-sub">Traditional finance has always lacked a unifying standard for payments across all jurisdictions. Cryptocurrencies tried to solve this but relied on public blockchains, which lack privacy.</p>
1729    <p class="w9__matrix-sub">Legacy privacy coins got closer but lacked the stable currency that institutions need. Aleo is the only financial layer that brings all of this together in one platform.</p>
1730    
1731    <div class="w9__mx-compare" aria-label="Compare Aleo with">
1732      <span class="w9__mx-compare-label">Compare with</span>
1733      <div class="w9__mx-pills">
1734        <button class="w9__mx-pill is-active" type="button" data-col="1">Traditional Finance</button>
1735        <button class="w9__mx-pill" type="button" data-col="2">Public Blockchains</button>
1736        <button class="w9__mx-pill" type="button" data-col="3">Legacy Privacy Coins</button>
1737      </div>
1738    </div>
1739
1740    <div class="w9__mx-table" data-compare="1">
1741
1742      
1743      <div class="w9__mx-cell w9__mx-spacer"></div>
1744      <div class="w9__mx-cell w9__mx-head">
1745        <span class="w9__mx-head-name">Traditional<br>Finance</span>
1746        <button class="w9__mx-info" type="button" aria-label="Examples of Traditional Finance">
1747          <svg class="w9__mx-info-ic" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.2"/><circle cx="8" cy="4.7" r="0.95" fill="currentColor"/><rect x="7.2" y="6.9" width="1.6" height="4.8" rx="0.8" fill="currentColor"/></svg>
1748          <span class="w9__mx-tip" role="tooltip">Stripe, JP&nbsp;Morgan, SWIFT, etc.</span>
1749        </button>
1750      </div>
1751      <div class="w9__mx-cell w9__mx-head">
1752        <span class="w9__mx-head-name">Public<br>Blockchains</span>
1753        <button class="w9__mx-info" type="button" aria-label="Examples of Public Blockchains">
1754          <svg class="w9__mx-info-ic" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.2"/><circle cx="8" cy="4.7" r="0.95" fill="currentColor"/><rect x="7.2" y="6.9" width="1.6" height="4.8" rx="0.8" fill="currentColor"/></svg>
1755          <span class="w9__mx-tip" role="tooltip">Bitcoin, Ethereum, Solana, etc.</span>
1756        </button>
1757      </div>
1758      <div class="w9__mx-cell w9__mx-head">
1759        <span class="w9__mx-head-name">Legacy<br>Privacy Coins</span>
1760        <button class="w9__mx-info" type="button" aria-label="Examples of Legacy Privacy Coins">
1761          <svg class="w9__mx-info-ic" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.2"/><circle cx="8" cy="4.7" r="0.95" fill="currentColor"/><rect x="7.2" y="6.9" width="1.6" height="4.8" rx="0.8" fill="currentColor"/></svg>
1762          <span class="w9__mx-tip" role="tooltip">Zcash, Monero, etc.</span>
1763        </button>
1764      </div>
1765      <div class="w9__mx-cell w9__mx-head w9__mx-head--aleo">Aleo</div>
1766
1767      
1768      <div class="w9__mx-cell w9__mx-label"><span class="w9__mx-label-text">Programma&shy;bility</span></div>
1769      <div class="w9__mx-cell w9__mx-val w9__mx-val--comp">Limited</div>
1770      <div class="w9__mx-cell w9__mx-val w9__mx-val--comp"><span class="w9__mx-val-full">Comprehensive</span><span class="w9__mx-val-short">✓ Yes</span></div>
1771      <div class="w9__mx-cell w9__mx-val w9__mx-val--no">—</div>
1772      <div class="w9__mx-cell w9__mx-val w9__mx-val--aleo"><span class="w9__mx-val-full">Comprehensive</span><span class="w9__mx-val-short">✓ Yes</span></div>
1773
1774      
1775      <div class="w9__mx-cell w9__mx-label"><span class="w9__mx-label-text">Permission&shy;less</span></div>
1776      <div class="w9__mx-cell w9__mx-val w9__mx-val--no">—</div>
1777      <div class="w9__mx-cell w9__mx-val w9__mx-val--yes">✓ Yes</div>
1778      <div class="w9__mx-cell w9__mx-val w9__mx-val--yes">✓ Yes</div>
1779      <div class="w9__mx-cell w9__mx-val w9__mx-val--aleo">✓ Yes</div>
1780
1781      
1782      <div class="w9__mx-cell w9__mx-label"><span class="w9__mx-label-text">Stable Currency</span></div>
1783      <div class="w9__mx-cell w9__mx-val w9__mx-val--yes">✓ Yes</div>
1784      <div class="w9__mx-cell w9__mx-val w9__mx-val--yes">✓ Yes</div>
1785      <div class="w9__mx-cell w9__mx-val w9__mx-val--no">—</div>
1786      <div class="w9__mx-cell w9__mx-val w9__mx-val--aleo">✓ Yes</div>
1787
1788      
1789      <div class="w9__mx-cell w9__mx-label"><span class="w9__mx-label-text">Protocol Level Privacy</span></div>
1790      <div class="w9__mx-cell w9__mx-val w9__mx-val--no">—</div>
1791      <div class="w9__mx-cell w9__mx-val w9__mx-val--no">—</div>
1792      <div class="w9__mx-cell w9__mx-val w9__mx-val--yes">✓ Yes</div>
1793      <div class="w9__mx-cell w9__mx-val w9__mx-val--aleo">✓ Yes</div>
1794
1795    </div>
1796  </div>
1797
1798</div>
1799</section>
1800
1801<script type="text/static-page-js">
1802(function() {
1803  var ROW_H    = 56;
1804  var GAP      = 10;
1805  var STRIDE   = ROW_H + GAP;   // 66px
1806  var VISIBLE  = 5;
1807  var INTERVAL = 2200;          // ms between new rows in the loop
1808  var CHARS    = '0123456789ABCDEFabcdef█▓░▒·xkz9f2';
1809
1810  var TXNS = [
1811    { label: 'proof_0x01', text: 'Sending aid relief — $47,000 disbursed',          cat: 'Aid Relief'   },
1812    { label: 'proof_0x02', text: 'Running payroll — 340 contractors paid',           cat: 'Payroll'      },
1813    { label: 'proof_0x03', text: 'Buying a coffee — $4.80 settled',                  cat: 'Purchase'     },
1814    { label: 'proof_0x04', text: 'Emergency food program — cross-border grant',       cat: 'Grant'        },
1815    { label: 'proof_0x05', text: 'Contractor settlement — compensation confirmed',    cat: 'Settlement'   },
1816    { label: 'proof_0x06', text: 'Field team payment — 8 recipients secured',        cat: 'Disbursement' },
1817    { label: 'proof_0x07', text: 'Corporate treasury — $2.1M moved cross-border',    cat: 'Treasury'     },
1818    { label: 'proof_0x08', text: 'Global workforce — 500 payments, 12 markets',      cat: 'Payroll'      },
1819    { label: 'proof_0x09', text: 'Online purchase — buyer verified, private',        cat: 'Commerce'     },
1820  ];
1821
1822  var HASHES = [
1823    '0x8f3a2d9c4e1b7f6a · ████████ · rcpt:0x9d3c...f12a · memo:██████',
1824    '0x3c7a1e8f9d4c2b5e · ████████ · rcpt:0x4a1f...8e3b · memo:██████',
1825    '0x1b9f4c7a2e6d3a8c · ████████ · rcpt:0x7c2d...a91e · memo:██████',
1826    '0xd4e2b8f13a5c9e7d · ████████ · rcpt:0x2e8a...4f7b · memo:██████',
1827    '0x7a1c9e3fb6d24a8f · ████████ · rcpt:0x5b3e...d62c · memo:██████',
1828  ];
1829
1830  var track = document.getElementById('w9-proof-track');
1831  var wnd   = document.getElementById('w9-proof-window');
1832  if (!track || !wnd) return;
1833
1834  var txnIdx = 0, rowCount = 0, removedRows = 0;
1835
1836  function makeRow(i) {
1837    var txn = TXNS[i % TXNS.length];
1838    var row = document.createElement('div');
1839    row.className = 'w9__proof';
1840    row.innerHTML =
1841      '<span class="w9__proof-index">' + txn.label + '</span>' +
1842      '<span class="w9__proof-text">' + txn.text + '</span>' +
1843      '<span class="w9__proof-status">' + txn.cat + '</span>';
1844    row.dataset.hash = HASHES[i % HASHES.length];
1845    return row;
1846  }
1847
1848  function scramble(el, target, onDone) {
1849    var frames = 30, f = 0;
1850    var t = setInterval(function() {
1851      f++;
1852      var p = f / frames, out = '';
1853      for (var i = 0; i < target.length; i++) {
1854        if (i / target.length < p * 1.25) out += target[i];
1855        else if (target[i] === ' ') out += ' ';
1856        else out += CHARS[Math.floor(Math.random() * CHARS.length)];
1857      }
1858      el.textContent = out;
1859      if (f >= frames) {
1860        clearInterval(t); el.textContent = target;
1861        if (onDone) onDone();
1862      }
1863    }, 28);
1864  }
1865
1866  function encryptRow(row) {
1867    var textEl   = row.querySelector('.w9__proof-text');
1868    var statusEl = row.querySelector('.w9__proof-status');
1869    row.classList.add('is-encrypting');
1870    scramble(textEl, row.dataset.hash, function() {
1871      row.classList.remove('is-encrypting');
1872      row.classList.add('is-proof');
1873      statusEl.textContent = '✓ Proof';
1874    });
1875  }
1876
1877  // Pre-encrypt a row immediately (no animation — looks like it was already processed)
1878  function makeProofRow(i) {
1879    var row = makeRow(i);
1880    var textEl   = row.querySelector('.w9__proof-text');
1881    var statusEl = row.querySelector('.w9__proof-status');
1882    textEl.textContent   = HASHES[i % HASHES.length];
1883    textEl.style.fontFamily = 'var(--font-mono)';
1884    textEl.style.fontSize   = '12px';
1885    textEl.style.letterSpacing = '0.03em';
1886    textEl.style.color = 'rgba(18,18,18,0.22)';
1887    statusEl.textContent = '✓ Proof';
1888    row.classList.add('is-proof');
1889    return row;
1890  }
1891
1892  // Boot: top rows already encrypted (looks mid-run), bottom two still readable
1893  function boot() {
1894    for (var i = 0; i < VISIBLE; i++) {
1895      var row = makeProofRow(txnIdx++); // all encrypted on load
1896      rowCount++;
1897      track.appendChild(row);
1898    }
1899
1900    track.style.transition = 'none';
1901    track.style.transform  = 'translateY(0px)';
1902
1903    // Start the loop
1904    setTimeout(startLoop, 800);
1905  }
1906
1907  // Loop: slide a new row in from below every INTERVAL ms.
1908  // Each new row encrypts after it has scrolled up to the MIDDLE position
1909  // = 2 more rows after it enter (VISIBLE=5, middle=position 3 from top).
1910  var MIDDLE_STEPS = Math.floor(VISIBLE / 2); // = 2
1911
1912  function startLoop() {
1913    addLoopRow();
1914  }
1915
1916  function addLoopRow() {
1917    var row = makeRow(txnIdx++);
1918    rowCount++;
1919    track.appendChild(row);
1920
1921    if (track.children.length > VISIBLE + 2) {
1922      track.removeChild(track.firstChild);
1923      removedRows++;
1924    }
1925
1926    var endY   = STRIDE * (VISIBLE - rowCount + removedRows);
1927    var startY = endY + STRIDE;
1928
1929    track.style.transition = 'none';
1930    track.style.transform  = 'translateY(' + startY + 'px)';
1931    void track.offsetHeight;
1932
1933    track.style.transition = 'transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
1934    track.style.transform  = 'translateY(' + endY + 'px)';
1935
1936    // Encrypt this row when it reaches the middle:
1937    // = MIDDLE_STEPS * INTERVAL from now, minus a head-start so it's
1938    //   mid-scramble exactly as it settles into the centre slot.
1939    setTimeout(function() {
1940      encryptRow(row);
1941    }, MIDDLE_STEPS * INTERVAL - 400);
1942
1943    // Schedule next row
1944    setTimeout(addLoopRow, INTERVAL);
1945  }
1946
1947  // Kick off when section enters viewport
1948  var triggered = false;
1949  var obs = new IntersectionObserver(function(entries) {
1950    entries.forEach(function(e) {
1951      if (e.isIntersecting && !triggered) {
1952        triggered = true;
1953        obs.disconnect();
1954        boot();
1955      }
1956    });
1957  }, { threshold: 0.3 });
1958  obs.observe(wnd);
1959})();
1960</script>
1960
1961
1962<script type="text/static-page-js">
1963(function() {
1964  var words = ['Private', 'Programmable'];
1965  var el    = document.querySelector('.w9__sh-cycle-word');
1966  var wrap  = document.querySelector('.w9__sh-cycle-wrap');
1967  if (!el || !wrap) return;
1968
1969  var idx = 0;
1970  function next() {
1971    idx = (idx + 1) % words.length;
1972    el.classList.add('w9sh--out');
1973    setTimeout(function() {
1974      el.classList.remove('w9sh--out');
1975      el.classList.add('w9sh--reset');
1976      el.textContent = words[idx];
1977      void el.offsetHeight;
1978      el.classList.remove('w9sh--reset');
1979    }, 480);
1980  }
1981
1982  setInterval(next, 2000);
1983})();
1984</script>
1984
1985
1986<script type="text/static-page-js">
1987(function () {
1988  var cards = Array.from(document.querySelectorAll('.w9__card'));
1989  var triggered = false;
1990
1991  var obs = new IntersectionObserver(function (entries) {
1992    entries.forEach(function (e) {
1993      if (e.isIntersecting && !triggered) {
1994        triggered = true;
1995        obs.disconnect();
1996        cards.forEach(function (card, i) {
1997          setTimeout(function () {
1998            card.classList.add('is-visible');
1999            card.addEventListener('animationend', function () {
2000              card.style.opacity = '1';
2001              card.style.animation = 'none';
2002            }, { once: true });
2003          }, 100 + i * 150);
2004        });
2005      }
2006    });
2007  }, { threshold: 0.3 });
2008
2009  var container = document.querySelector('.w9__cards');
2010  if (container) obs.observe(container);
2011}());
2012</script>
2012
2013
2014<script type="text/static-page-js">
2015(function() {
2016  var title  = document.querySelector('.w9__matrix-title');
2017  var subs   = Array.from(document.querySelectorAll('.w9__matrix-sub'));
2018  var matrix = document.querySelector('.w9__matrix');
2019  var table  = document.querySelector('.w9__mx-table');
2020  if (!title || !matrix || !table) return;
2021
2022  var allCells  = Array.from(table.querySelectorAll('.w9__mx-cell'));
2023  var HEADER    = 5;
2024  var ROW_SIZE  = 5;
2025  var dataCells = allCells.slice(HEADER);
2026  var rows      = [];
2027  for (var i = 0; i < dataCells.length; i += ROW_SIZE) {
2028    rows.push(dataCells.slice(i, i + ROW_SIZE));
2029  }
2030
2031  // Hide data rows until scroll animation triggers
2032  dataCells.forEach(function(c) { c.classList.add('mx-row--hidden'); });
2033
2034  var triggered = false;
2035  var io = new IntersectionObserver(function(entries) {
2036    if (!entries[0].isIntersecting || triggered) return;
2037    triggered = true;
2038    io.disconnect();
2039
2040    // Title and subtitle blur in first
2041    title.classList.add('mx-title--in');
2042    subs.forEach(function(s) { s.classList.add('mx-title--in'); });
2043
2044    // Rows stagger in after a short pause
2045    rows.forEach(function(row, ri) {
2046      row.forEach(function(cell) {
2047        setTimeout(function() {
2048          cell.classList.remove('mx-row--hidden');
2049          cell.classList.add('mx-row--in');
2050          cell.addEventListener('animationend', function() {
2051            cell.style.opacity  = '1';
2052            cell.style.transform = '';
2053            cell.style.animation = 'none';
2054          }, { once: true });
2055        }, 400 + ri * 160);
2056      });
2057    });
2058
2059  }, { threshold: 0.15 });
2060
2061  io.observe(matrix);
2062})();
2063</script>
2063
2064
2065<script type="text/static-page-js">
2066(function() {
2067  var section  = document.querySelector('.w9');
2068  var headline = document.querySelector('.w9__headline');
2069  var muted    = document.querySelector('.w9__headline-muted');
2070  var proofWnd = document.getElementById('w9-proof-window');
2071  var bodyPs   = Array.from(document.querySelectorAll('.w9__body p'));
2072
2073  if (!section || !headline || !muted || !proofWnd) return;
2074
2075  var CHARS = '0123456789ABCDEFabcdef·█▓░';
2076
2077  var hlRaw    = headline.textContent.trim();
2078  var WORD     = 'private.';
2079  var splitIdx = hlRaw.lastIndexOf(WORD);
2080  var hlStatic = hlRaw.substring(0, splitIdx);
2081  var hlWord   = WORD.split('');
2082  var hlFixed  = hlWord.map(function() {
2083    return CHARS[Math.floor(Math.random() * CHARS.length)];
2084  });
2085
2086  headline.textContent = '';
2087  headline.appendChild(document.createTextNode(hlStatic));
2088  var hlSpans = hlWord.map(function(ch, i) {
2089    var s = document.createElement('span');
2090    s.textContent = hlFixed[i];
2091    headline.appendChild(s);
2092    return s;
2093  });
2094
2095  muted.style.opacity    = '0';
2096  muted.style.transform  = 'translateY(20px)';
2097  muted.style.filter     = 'blur(8px)';
2098  muted.style.transition = 'opacity 1.1s ease, transform 1.1s cubic-bezier(0.16,1,0.3,1), filter 0.9s ease';
2099
2100  proofWnd.style.opacity   = '0';
2101  proofWnd.style.transform = 'translateY(30px)';
2102
2103  bodyPs.forEach(function(p, i) {
2104    p.style.opacity         = '0';
2105    p.style.transform       = 'translateY(18px)';
2106    p.style.transition      = 'opacity 0.9s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1)';
2107    p.style.transitionDelay = (i * 200) + 'ms';
2108  });
2109
2110  var hlDone = false, hlRevealFrac = 0, ZONE = 2;
2111
2112  var scrambleTick = setInterval(function() {
2113    if (hlDone) { clearInterval(scrambleTick); return; }
2114    var zone = hlRevealFrac * hlWord.length;
2115    for (var i = Math.max(0, Math.floor(zone - ZONE)); i < Math.min(hlWord.length, Math.ceil(zone)); i++) {
2116      hlSpans[i].textContent = CHARS[Math.floor(Math.random() * CHARS.length)];
2117    }
2118  }, 50);
2119
2120  function showBodyCopy() {
2121    bodyPs.forEach(function(p) {
2122      p.style.opacity   = '1';
2123      p.style.transform = 'translateY(0)';
2124    });
2125  }
2126
2127  function unlockProof() {
2128    proofWnd.style.transition = 'opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1)';
2129    proofWnd.style.opacity    = '1';
2130    proofWnd.style.transform  = 'translateY(0)';
2131    setTimeout(showBodyCopy, 900);
2132  }
2133
2134  var entryFired = false;
2135  var io = new IntersectionObserver(function(entries) {
2136    entries.forEach(function(e) {
2137      if (!e.isIntersecting || entryFired) return;
2138      entryFired = true;
2139      io.disconnect();
2140
2141      var HL_DUR = 1400, hlStart = null;
2142      function animHL(ts) {
2143        if (!hlStart) hlStart = ts;
2144        hlRevealFrac = Math.min(1, (ts - hlStart) / HL_DUR);
2145        var zone = hlRevealFrac * hlWord.length;
2146        hlSpans.forEach(function(s, i) {
2147          if (i < zone - ZONE) s.textContent = hlWord[i];
2148          else if (i >= zone)  s.textContent = hlFixed[i];
2149        });
2150        if (hlRevealFrac < 1) {
2151          requestAnimationFrame(animHL);
2152        } else {
2153          hlDone = true;
2154          hlSpans.forEach(function(s, i) { s.textContent = hlWord[i]; });
2155        }
2156      }
2157      requestAnimationFrame(animHL);
2158
2159      setTimeout(function() {
2160        muted.style.opacity   = '1';
2161        muted.style.transform = 'translateY(0)';
2162        muted.style.filter    = 'blur(0)';
2163      }, 150);
2164      setTimeout(unlockProof, 300);
2165    });
2166  }, { threshold: 0.08 });
2167
2168  io.observe(section);
2169
2170  // Set column width from exact rendered width of first headline line.
2171  // Must run AFTER the display font (Aleofont Sans) is applied, otherwise the
2172  // fallback-font width (~half) gets locked in. Re-measure on font load, window
2173  // load, and resize so the racy first measurement can't stick.
2174  function measureCol() {
2175    var refLine = document.getElementById('w9-ref-line');
2176    if (!refLine) return;
2177    var w = refLine.getBoundingClientRect().width;
2178    if (w > 0) section.style.setProperty('--w9-col', w + 'px');
2179  }
2180  document.fonts.ready.then(measureCol);
2181  // Explicitly wait for the display font used by the ref line, then re-measure.
2182  if (document.fonts && document.fonts.load) {
2183    document.fonts.load("64px 'Aleofont Sans'").then(measureCol).catch(function(){});
2184  }
2185  window.addEventListener('load', measureCol);
2186  window.addEventListener('resize', measureCol);
2187})();
2188</script>
2188
2189
2190<script type="text/static-page-js">
2191/* Comparison matrix — info tooltips (tap) + mobile compare selector */
2192(function() {
2193  var matrix = document.querySelector('.w9__matrix');
2194  if (!matrix) return;
2195
2196  // ── Info icons: hover works via CSS; tap toggles .is-open for touch ──
2197  var infos = Array.from(matrix.querySelectorAll('.w9__mx-info'));
2198  function closeAllTips(except) {
2199    infos.forEach(function(b) { if (b !== except) b.classList.remove('is-open'); });
2200  }
2201  infos.forEach(function(btn) {
2202    btn.addEventListener('click', function(e) {
2203      e.stopPropagation();
2204      var willOpen = !btn.classList.contains('is-open');
2205      closeAllTips(btn);
2206      btn.classList.toggle('is-open', willOpen);
2207    });
2208  });
2209  document.addEventListener('click', function() { closeAllTips(null); });
2210  document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeAllTips(null); });
2211
2212  // ── Mobile compare selector: pick which competitor column shows ──
2213  var table = matrix.querySelector('.w9__mx-table');
2214  var pills = Array.from(matrix.querySelectorAll('.w9__mx-pill'));
2215  pills.forEach(function(pill) {
2216    pill.addEventListener('click', function() {
2217      pills.forEach(function(p) { p.classList.remove('is-active'); });
2218      pill.classList.add('is-active');
2219      if (table) table.setAttribute('data-compare', pill.dataset.col);
2220    });
2221  });
2222})();
2223</script>
2223
2224
2225<style>
2226  /* ── MODULE: ICP-9 ───────────────────────────────────────────
2227     Dark use-case section. Rises after the white card exits.
2228  ────────────────────────────────────────────────────────────── */
2229
2230  .icp9 {
2231    background: #0a0a0a;
2232    padding: 80px 160px 60px;
2233    min-height: 100vh;
2234    box-sizing: border-box;
2235    position: relative;
2236    z-index: 3;
2237    display: flex;
2238    flex-direction: column;
2239    justify-content: center;
2240  }
2241
2242  .icp9__header {
2243    margin-bottom: 40px;
2244  }
2245
2246  .icp9__title {
2247    font-family: var(--font-display);
2248    font-size: 64px;
2249    font-weight: 400;
2250    letter-spacing: -0.03em;
2251    line-height: 1.05;
2252    color: #f5f5f7;
2253    margin-bottom: 20px;
2254  }
2255
2256  .icp9__sub {
2257    font-family: var(--font-body);
2258    font-size: 22px;
2259    line-height: 1.65;
2260    color: rgba(245,245,245,0.5);
2261    max-width: 800px;
2262  }
2263
2264  .icp9__cards {
2265    display: grid;
2266    grid-template-columns: 1fr 1fr 1fr;
2267    gap: 20px;
2268  }
2269
2270  .icp9__card {
2271    background: #f5f5f7;
2272    border-radius: 20px;
2273    overflow: hidden;
2274    position: relative;
2275    text-decoration: none;
2276    display: flex;
2277    flex-direction: column;
2278    cursor: pointer;
2279    opacity: 0;
2280    transform: translateY(14px);
2281    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
2282                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
2283                box-shadow 0.4s ease;
2284  }
2285
2286  .icp9__card.is-visible {
2287    opacity: 1;
2288    transform: translateY(0);
2289  }
2290
2291  @media (max-width: 767px) {
2292    .icp9__card {
2293      opacity: 1;
2294      transform: none;
2295      transition: box-shadow 0.4s ease;
2296    }
2297  }
2298
2299  .icp9__card:hover {
2300    transform: scale(1.02);
2301    box-shadow: 0 28px 64px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.08);
2302  }
2303
2304  .icp9__card-img {
2305    width: 100%;
2306    height: 180px;
2307    object-fit: cover;
2308    display: block;
2309    flex-shrink: 0;
2310  }
2311
2312  .icp9__card-content {
2313    padding: 28px 28px 24px;
2314    flex: 1;
2315    display: flex;
2316    flex-direction: column;
2317  }
2318
2319  .icp9__card-title {
2320    font-family: var(--font-display);
2321    font-size: 28px;
2322    font-weight: 400;
2323    letter-spacing: -0.02em;
2324    line-height: 1.1;
2325    color: #121212;
2326    margin-bottom: 12px;
2327  }
2328
2329  .icp9__card-body {
2330    font-family: var(--font-body);
2331    font-size: 15px;
2332    line-height: 1.65;
2333    color: rgba(18,18,18,0.5);
2334    flex: 1;
2335    margin-bottom: 20px;
2336  }
2337
2338  .icp9__card-cta {
2339    font-family: var(--font-body);
2340    font-size: 12px;
2341    font-weight: 600;
2342    letter-spacing: 0.08em;
2343    text-transform: uppercase;
2344    color: #121212;
2345  }
2346
2347  .icp9__card-stripe {
2348    height: 6px;
2349    background: linear-gradient(90deg, #A8E063, #F2D060, #F5A87A, #E8A0C5);
2350    position: relative;
2351    overflow: hidden;
2352    flex-shrink: 0;
2353  }
2354
2355  .icp9__card-stripe::after {
2356    content: '';
2357    position: absolute;
2358    inset: 0;
2359    background: linear-gradient(90deg, #A8E063 0%, #F2D060 18%, rgba(255,253,235,0.95) 30%, #F5A87A 44%, #E8A0C5 62%, #c4a0e8 78%, #A8E063 100%);
2360    background-size: 700% auto;
2361    animation: icp9-shimmer 22s linear infinite;
2362    opacity: 0;
2363    transition: opacity 0.4s ease;
2364  }
2365
2366  .icp9__card:hover .icp9__card-stripe::after { opacity: 1; }
2367
2368  @keyframes icp9-shimmer {
2369    0%   { background-position: 0% center; }
2370    100% { background-position: 200% center; }
2371  }
2372
2373  /* ── Tablet (≤1024px) ── */
2374  @media (max-width: 1024px) {
2375    .icp9 { padding: 60px 60px 40px; }
2376    .icp9__title { font-size: 48px; }
2377    .icp9__cards { grid-template-columns: 1fr 1fr; }
2378  }
2379
2380  /* Tablet only (768–1024px): 3 cards in a 2-col grid leaves the 3rd
2381     stranded alone in a second row, left-aligned. Center it at the same
2382     width as a normal card instead of letting it default to column 1. */
2383  @media (max-width: 1024px) and (min-width: 768px) {
2384    .icp9__card:last-child {
2385      grid-column: 1 / -1;
2386      max-width: calc(50% - 10px);
2387      margin: 0 auto;
2388    }
2389  }
2390
2391  /* ── Mobile (≤767px) ── */
2392  @media (max-width: 767px) {
2393    .icp9 { padding: 48px 36px 40px; min-height: auto; }
2394    .icp9__title { font-size: 36px; }
2395    .icp9__sub { font-size: 18px; }
2396    .icp9__header { margin-bottom: 28px; }
2397    .icp9__cards { grid-template-columns: 1fr; }
2398    .icp9__card-img { height: 200px; }
2399  }
2400</style>
2401
2402<section class="icp9">
2403  <div class="icp9__header">
2404    <h2 class="icp9__title">For Organizations That Can't Afford Exposure.</h2>
2405    <p class="icp9__sub">Private stablecoins make it easy for organizations to transact globally with minimal risk, bringing increased security to the operations that need it most.</p>
2406  </div>
2407
2408  <div class="icp9__cards">
2409    <a class="icp9__card" href="/aid" aria-label="Humanitarian Aid Officers — Learn More">
2410      <img class="icp9__card-img" src="/public/images/01-river-aerial-Q3pppMdd3y8.jpg" alt="Humanitarian Aid" loading="lazy">
2411      <div class="icp9__card-content">
2412        <h3 class="icp9__card-title">Humanitarian Aid Officers</h3>
2413        <p class="icp9__card-body">Private aid disbursements for NGOs and relief organizations operating in conflict zones and fragile states.</p>
2414        <span class="icp9__card-cta">Learn More</span>
2415      </div>
2416      <div class="icp9__card-stripe"></div>
2417    </a>
2418
2419    <a class="icp9__card" href="/payroll" aria-label="Payroll Administrators — Learn More">
2420      <img class="icp9__card-img" src="/public/images/02-paperwork-0oZpRxG5Hkk.jpg" alt="Payroll" loading="lazy">
2421      <div class="icp9__card-content">
2422        <h3 class="icp9__card-title">Payroll Administrators</h3>
2423        <p class="icp9__card-body">Pay global teams instantly in private stablecoins, keeping salary and treasury data fully confidential.</p>
2424        <span class="icp9__card-cta">Learn More</span>
2425      </div>
2426      <div class="icp9__card-stripe"></div>
2427    </a>
2428
2429    <a class="icp9__card" href="/policy" aria-label="Policy Makers — Learn More">
2430      <img class="icp9__card-img" src="/public/images/03-capitol-building-1154438278-2.jpg" alt="Policy Makers" loading="lazy">
2431      <div class="icp9__card-content">
2432        <h3 class="icp9__card-title">Policy Makers</h3>
2433        <p class="icp9__card-body">Privacy that adapts to the needs and considerations of local jurisdictions and governments.</p>
2434        <span class="icp9__card-cta">Learn More</span>
2435      </div>
2436      <div class="icp9__card-stripe"></div>
2437    </a>
2438  </div>
2439</section>
2440
2441<script type="text/static-page-js">
2442(function() {
2443  var cards = document.querySelectorAll('.icp9__card');
2444  if (!cards.length) return;
2445
2446  var triggered = false;
2447  var observer = new IntersectionObserver(function(entries) {
2448    entries.forEach(function(entry) {
2449      if (!entry.isIntersecting || triggered) return;
2450      triggered = true;
2451      observer.disconnect();
2452      cards.forEach(function(card, i) {
2453        setTimeout(function() { card.classList.add('is-visible'); }, 100 + i * 150);
2454      });
2455    });
2456  }, { threshold: 0.3 });
2457
2458  var container = document.querySelector('.icp9__cards');
2459  if (container) observer.observe(container);
2460})();
2461</script>
2461
2462
2463<style>
2464  /* ── MODULE: CONTACT-FORM ────────────────────────────────────
2465     JS builds a shared sticky outer for audience-cards + contact-form.
2466     Phase 1: audience-cards locked, form rises.
2467     Phase 2: both move together, 25px gap maintained.
2468  ────────────────────────────────────────────────────────────── */
2469
2470  .bd9-outer {
2471    background: #f5f5f7;
2472    padding: 80px 160px 100px;
2473    position: relative;
2474    z-index: 3;
2475  }
2476
2477  .bd9__eyebrow {
2478    font-family: 'Azeret Mono', monospace;
2479    font-size: 11px;
2480    font-weight: 600;
2481    letter-spacing: 0.12em;
2482    text-transform: uppercase;
2483    color: rgba(18,18,18,0.35);
2484    margin-bottom: 16px;
2485  }
2486
2487  .bd9__title {
2488    font-family: var(--font-display);
2489    font-size: 64px;
2490    font-weight: 400;
2491    letter-spacing: -0.03em;
2492    line-height: 1.0;
2493    color: #121212;
2494    margin-bottom: 20px;
2495  }
2496
2497  .bd9__sub {
2498    font-family: var(--font-body);
2499    font-size: 22px;
2500    line-height: 1.65;
2501    color: rgba(18,18,18,0.5);
2502    margin-bottom: 56px;
2503  }
2504
2505  .bd9__form {
2506    display: flex;
2507    flex-direction: column;
2508    gap: 24px;
2509  }
2510
2511  .bd9__row {
2512    display: grid;
2513    grid-template-columns: 1fr 1fr;
2514    gap: 16px;
2515  }
2516
2517  .bd9__field {
2518    display: flex;
2519    flex-direction: column;
2520    gap: 8px;
2521  }
2522
2523  .bd9__label {
2524    font-family: 'Azeret Mono', monospace;
2525    font-size: 11px;
2526    font-weight: 600;
2527    letter-spacing: 0.1em;
2528    text-transform: uppercase;
2529    color: rgba(18,18,18,0.4);
2530  }
2531
2532  .bd9__input,
2533  .bd9__textarea {
2534    background: #fff;
2535    border: 1.5px solid rgba(18,18,18,0.09);
2536    border-radius: 14px;
2537    padding: 16px 20px;
2538    font-family: var(--font-body);
2539    font-size: 16px;
2540    color: #121212;
2541    outline: none;
2542    transition: border-color 0.15s ease, box-shadow 0.15s ease;
2543    width: 100%;
2544    box-sizing: border-box;
2545    -webkit-appearance: none;
2546  }
2547
2548  .bd9__input::placeholder,
2549  .bd9__textarea::placeholder {
2550    color: rgba(18,18,18,0.28);
2551  }
2552
2553  .bd9__input:focus,
2554  .bd9__textarea:focus {
2555    border-color: rgba(18,18,18,0.3);
2556    box-shadow: 0 0 0 3px rgba(18,18,18,0.05);
2557  }
2558
2559  .bd9__textarea {
2560    resize: none;
2561    height: 160px;
2562    line-height: 1.6;
2563  }
2564
2565  .bd9__check-row {
2566    display: flex;
2567    align-items: flex-start;
2568    gap: 12px;
2569  }
2570
2571  .bd9__checkbox {
2572    width: 18px;
2573    height: 18px;
2574    flex-shrink: 0;
2575    margin-top: 3px;
2576    accent-color: #121212;
2577    cursor: pointer;
2578  }
2579
2580  .bd9__check-label {
2581    font-family: var(--font-body);
2582    font-size: 15px;
2583    line-height: 1.65;
2584    color: rgba(18,18,18,0.5);
2585    cursor: pointer;
2586  }
2587
2588  .bd9__submit {
2589    display: inline-flex;
2590    align-items: center;
2591    height: 52px;
2592    flex-shrink: 0;
2593    padding: 0 32px;
2594    background: #121212;
2595    color: #f5f5f5;
2596    border: none;
2597    border-radius: 100px;
2598    font-family: 'Azeret Mono', monospace;
2599    font-size: 12px;
2600    font-weight: 600;
2601    letter-spacing: 0.08em;
2602    text-transform: uppercase;
2603    cursor: pointer;
2604    transition: opacity 0.15s;
2605    align-self: flex-start;
2606  }
2607
2608  .bd9__submit:hover { opacity: 0.78; }
2609
2610  .bd9__privacy {
2611    font-family: var(--font-body);
2612    font-size: 13px;
2613    line-height: 1.7;
2614    color: rgba(18,18,18,0.3);
2615    max-width: 600px;
2616  }
2617
2618  .bd9__privacy a {
2619    color: rgba(18,18,18,0.45);
2620    text-decoration: underline;
2621  }
2622
2623  /* ── Tablet (≤1024px) ── */
2624  @media (max-width: 1024px) {
2625    .bd9-outer { padding: 60px 60px 80px; }
2626    .bd9__title { font-size: 48px; }
2627  }
2628
2629  /* ── Mobile (≤767px) ── */
2630  @media (max-width: 767px) {
2631    .bd9-outer { padding: 48px 36px 60px; }
2632    .bd9__title { font-size: 36px; }
2633    .bd9__sub { font-size: 16px; max-width: 100%; }
2634    .bd9__row { grid-template-columns: 1fr; }
2635  }
2636</style>
2637
2638<div class="bd9-outer" id="get-started">
2639    <h2 class="bd9__title">Talk to An Expert</h2>
2640    <p class="bd9__sub">Discover how private stablecoins can transform the way your organization moves money globally.</p>
2641
2642    <form class="bd9__form" action="" method="post">
2643      <div class="bd9__row">
2644        <div class="bd9__field">
2645          <label class="bd9__label" for="bd9-name">Your Name</label>
2646          <input class="bd9__input" id="bd9-name" name="name" type="text" placeholder="Full name" autocomplete="name">
2647        </div>
2648        <div class="bd9__field">
2649          <label class="bd9__label" for="bd9-email">Your Email</label>
2650          <input class="bd9__input" id="bd9-email" name="email" type="email" placeholder="[email protected]" autocomplete="email">
2651        </div>
2652      </div>
2653
2654      <div class="bd9__field">
2655        <label class="bd9__label" for="bd9-message">Your Use Case</label>
2656        <textarea class="bd9__textarea" id="bd9-message" name="message" placeholder="Tell us about your organization, where you operate, and what you're trying to solve."></textarea>
2657      </div>
2658
2659      <div class="bd9__check-row">
2660        
2661        <input class="bd9__checkbox" id="bd9-updates" name="updates" type="checkbox">
2662        <label class="bd9__check-label" for="bd9-updates">Keep me updated on Aleo's latest developments and partnership opportunities</label>
2663      </div>
2664
2665      
2666      <input class="bd9__hp" id="bd9-company-site" name="company_
2666site" type="text" value="" tabindex="-1" aria-hidden="true" autocomplete="off" style="position:absolute;left:-9999px;width:1px;height:1px;opacity:0;">
2667
2668      <button class="bd9__submit" type="submit">Send Message</button>
2669
2670      <p class="bd9__form-error" id="bd9-error" hidden style="font-family:var(--font-body);font-size:14px;color:#c0392b;margin-top:12px;"></p>
2671
2672      <p class="bd9__privacy">We respect your privacy as much as we protect it. You can unsubscribe anytime and we'll never share your information. By submitting this form you agree to let us store your information securely to respond to your message. <a href="/privacy/">Privacy Policy</a>.</p>
2673    </form>
2674</div>
2675
2676<script type="text/static-page-js">
2677(function () {
2678  var form = document.querySelector('.bd9__form');
2679  if (!form || !window.AleoForm) return;
2680
2681  var THANKS = '<p style="font-family:var(--font-body);font-size:18px;line-height:1.65;color:rgba(18,18,18,0.55);padding:20px 0;">Thanks — we\'ll be in touch shortly.</p>';
2682
2683  form.addEventListener('submit', function (e) {
2684    e.preventDefault();
2685
2686    var nameInput = form.querySelector('#bd9-name');
2687    var emailInput = form.querySelector('#bd9-email');
2688    var name = (nameInput || {}).value || '';
2689    var email = (emailInput || {}).value || '';
2690    var message = (form.querySelector('#bd9-message') || {}).value || '';
2691    var updates = !!(form.querySelector('#bd9-updates') || {}).checked;
2692    var hp = (form.querySelector('#bd9-company-site') || {}).value || '';
2693
2694    window.AleoForm.submit({
2695      form: form,
2696      endpoint: window.ALEO_EXPERT_ENDPOINT,
2697      required: ['name', 'email'],
2698      name: name,
2699      email: email,
2700      nameInput: nameInput,
2701      emailInput: emailInput,
2702      honeypot: hp,
2703      errorEl: document.getElementById('bd9-error'),
2704      button: form.querySelector('.bd9__submit'),
2705      sendingText: 'Sending…',
2706      thanksHtml: THANKS,
2707      logLabel: 'contact',
2708      payload: {
2709        name: name.trim(),
2710        email: email.trim(),
2711        message: message.trim(),
2712        updates: updates,
2713        source: 'Homepage, Talk to An Expert, below fold inline form'
2714      }
2715    });
2716  });
2717}());
2718</script>
2718
2719
2720
2721<style>
2722/* ── Customer Stories — 16:9 Video Slider ────────────────────
2723   Matches the w9 headline language: Aleofont Sans 64px / -0.03em
2724   Full opacity title + 0.42 opacity subtitle, white on dark video.
2725   Section is sized to the video's native 16:9 frame so footage
2726   is never cropped; min-height guards content on narrow widths.
2727─────────────────────────────────────────────────────────────── */
2728
2729.cs {
2730  position: relative;
2731  display: grid;
2732  aspect-ratio: 16 / 9;
2733  overflow: hidden;
2734  background: #0a0a0a;
2735}
2736
2737/* Below ~1140px, 16:9 gets too short to hold the copy at full size.
2738   Drop the fixed ratio; the grid-stack below sizes the box to fit
2739   the tallest slide's content instead (see .cs__slide), so nothing
2740   gets clipped regardless of how much text a given slide has. */
2741@media (max-width: 1140px) {
2742  .cs { aspect-ratio: auto; min-height: 480px; }
2743}
2744
2745/* ── Slides: stacked in the same grid cell so the container auto-sizes
2746   to the tallest slide's content (crossfade via opacity, not display) ── */
2747.cs__slide {
2748  grid-area: 1 / 1;
2749  position: relative;
2750  display: flex;
2751  flex-direction: column;
2752  justify-content: center;
2753  opacity: 0;
2754  transition: opacity 0.95s cubic-bezier(0.4, 0, 0.2, 1);
2755  pointer-events: none;
2756}
2757
2758.cs__slide.is-active {
2759  opacity: 1;
2760  pointer-events: auto;
2761}
2762
2763/* ── Video background ── */
2764.cs__video {
2765  position: absolute;
2766  inset: 0;
2767  width: 100%;
2768  height: 100%;
2769  object-fit: cover;
2770  display: block;
2771  z-index: 0;
2772}
2773
2774/* Slide 2's stock footage has ~34px letterbox bars encoded in the frame
2775   itself (top and bottom rows are pure black in the source). Scale just
2776   past the bar height (1080/1013 ≈ 1.066) so they crop out of view. */
2777.cs__slide[data-index="1"] .cs__video {
2778  transform: scale(1.07);
2779}
2780
2781/* ── Dark overlay ── */
2782.cs__overlay {
2783  position: absolute;
2784  inset: 0;
2785  background: rgba(0, 0, 0, 0.65);
2786  z-index: 0;
2787}
2788
2789/* ── Text content — in normal flow so it drives slide height;
2790   vertical centering happens on .cs__slide above ── */
2791.cs__content {
2792  position: relative;
2793  z-index: 1;
2794  padding: 80px 160px;
2795}
2796
2797.cs__eyebrow {
2798  font-family: var(--font-body);
2799  font-size: 12px;
2800  font-weight: 600;
2801  letter-spacing: 0.12em;
2802  text-transform: uppercase;
2803  color: rgba(245, 245, 245, 0.4);
2804  margin: 0 0 20px;
2805}
2806
2807.cs__title {
2808  font-family: var(--font-display);
2809  font-size: 52px;
2810  font-weight: 400;
2811  letter-spacing: -0.03em;
2812  line-height: 1.05;
2813  color: rgba(245, 245, 245, 0.92);
2814  margin: 0 0 16px;
2815  max-width: 860px;
2816}
2817
2818.cs__subtitle {
2819  font-family: var(--font-body);
2820  font-size: 22px;
2821  font-weight: 400;
2822  line-height: 1.6;
2823  color: rgba(245, 245, 245, 0.58);
2824  margin: 0 0 20px;
2825  max-width: 680px;
2826}
2827
2828.cs__body {
2829  font-family: var(--font-body);
2830  font-size: 22px;
2831  line-height: 1.65;
2832  color: rgba(245, 245, 245, 0.88);
2833  max-width: 620px;
2834}
2835
2836/* ── Read More button — never resizes based on viewport height ── */
2837.cs__btn {
2838  display: inline-flex;
2839  align-items: center;
2840  align-self: flex-start;
2841  gap: 10px;
2842  height: 48px;
2843  flex-shrink: 0;
2844  padding: 0 28px;
2845  margin-top: 36px;
2846  background: var(--ivory);
2847  color: var(--coal);
2848  border-radius: var(--radius-pill);
2849  font-family: var(--font-body);
2850  font-size: 12px;
2851  font-weight: 600;
2852  letter-spacing: 0.08em;
2853  text-transform: uppercase;
2854  text-decoration: none;
2855  white-space: nowrap;
2856  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
2857}
2858
2859.cs__btn:hover {
2860  transform: scale(1.05);
2861  opacity: 0.9;
2862}
2863
2864/* ── Arrows ── */
2865.cs__arrow {
2866  position: absolute;
2867  top: 50%;
2868  transform: translateY(-50%);
2869  width: 52px;
2870  height: 52px;
2871  border-radius: 50%;
2872  background: rgba(255, 255, 255, 0.1);
2873  border: 1px solid rgba(255, 255, 255, 0.28);
2874  cursor: pointer;
2875  display: flex;
2876  align-items: center;
2877  justify-content: center;
2878  padding: 0;
2879  z-index: 20;
2880  opacity: 1;
2881  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
2882}
2883
2884.cs__arrow:hover {
2885  background: rgba(255, 255, 255, 0.2);
2886  border-color: rgba(255, 255, 255, 0.5);
2887  transform: translateY(-50%) scale(1.08);
2888}
2889
2890.cs__arrow--prev { left: 40px; }
2891.cs__arrow--next { right: 40px; }
2892
2893/* ── Dots ── */
2894.cs__dots {
2895  position: absolute;
2896  bottom: 36px;
2897  left: 50%;
2898  transform: translateX(-50%);
2899  display: flex;
2900  gap: 10px;
2901  align-items: center;
2902  z-index: 20;
2903}
2904
2905.cs__dot {
2906  height: 5px;
2907  width: 5px;
2908  border-radius: 5px;
2909  background: rgba(255, 255, 255, 0.3);
2910  border: none;
2911  cursor: pointer;
2912  padding: 0;
2913  transition: background 0.25s ease, width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
2914}
2915
2916.cs__dot.is-active {
2917  background: rgba(255, 255, 255, 0.85);
2918  width: 22px;
2919}
2920
2921/* ── Tablet (≤1024px) — arrows hug the edges; content padding
2922   clears them (arrow right edge 64px < 96px text start) ── */
2923@media (max-width: 1024px) {
2924  .cs__content { padding: 60px 96px; }
2925  .cs__title { font-size: 40px; max-width: 640px; }
2926  .cs__subtitle, .cs__body { font-size: 18px; }
2927  .cs__arrow { width: 44px; height: 44px; }
2928  .cs__arrow--prev { left: 20px; }
2929  .cs__arrow--next { right: 20px; }
2930}
2931
2932/* ── Mobile (≤767px) ── */
2933@media (max-width: 767px) {
2934  .cs { aspect-ratio: auto; min-height: 460px; }
2935  .cs__content { padding: 48px 36px; }
2936  .cs__title { font-size: 32px; max-width: 100%; }
2937  .cs__subtitle { font-size: 16px; max-width: 100%; }
2938  .cs__body { font-size: 16px; max-width: 100%; }
2939  .cs__eyebrow { font-size: 10px; }
2940  .cs__arrow { display: none; }
2941}
2942</style>
2943
2944<section class="cs" id="customerStories">
2945
2946  
2947  <div class="cs__slide is-active" data-index="0" style="background:#0d1a0f;">
2948    <video class="cs__video" muted loop playsinline preload="none">
2949      <source src="/public/videos/01-Colombia_364774598.mp4" type="video/mp4">
2950    </video>
2951    <div class="cs__overlay"></div>
2952    <div class="cs__content">
2953      <p class="cs__eyebrow">Humanitarian Aid</p>
2954      <h2 class="cs__title">Delivering Aid &amp; Protecting Vulnerable Populations</h2>
2955      <p class="cs__subtitle">In partnership with Mercy Corps Ventures, Humanity Link, and the Danish Refugee Council, Aleo is enabling aid delivery with private stablecoins in Colombia.</p>
2956      <p class="cs__body">Recipients register via WhatsApp to access funds, enabling verified aid distribution without exposing sensitive personal data.</p>
2957      <a href="https://www.mercycorpsventures.com/blog/pilot-launch-the-future-of-digital-aid-integrating-privacy-and-stablecoins-for-displaced-communities-in-colombia" target="_blank" rel="noopener" class="cs__btn">Read More &rarr;</a>
2958    </div>
2959  </div>
2960
2961  
2962  <div class="cs__slide" data-index="1" style="background:#12100d;">
2963    <video class="cs__video" muted loop playsinline preload="none">
2964      <source src="/public/videos/02-Business-women-312686903.mp4" type="video/mp4">
2965    </video>
2966    <div class="cs__overlay"></div>
2967    <div class="cs__content">
2968      <p class="cs__eyebrow">Payroll</p>
2969      <h2 class="cs__title">Streamlined Payroll That Protects Employees' Financial Data</h2>
2970      <p class="cs__subtitle">In collaboration with Toku and Paxos Labs, Aleo enables private stablecoin payroll for global teams at scale.</p>
2971      <p class="cs__body">With Aleo's privacy layer integrated into Toku's platform, organizations can pay global teams in USAD while keeping all salary and treasury data confidential.</p>
2972      <a href="https://www.businesswire.com/news/home/20260129619369/en/Aleo-Toku-and-Paxos-Labs-Launch-First-Private-Stablecoin-Payroll-Solution-Removing-the-Final-Barrier-to-Enterprise-Stablecoin-Adoption" target="_blank" rel="noopener" class="cs__btn">Read More &rarr;</a>
2973    </div>
2974  </div>
2975
2976  
2977  <div class="cs__slide" data-index="2" style="background:#0d1018;">
2978    <video class="cs__video" muted loop playsinline preload="none">
2979      <source src="/public/videos/03-Ledger-Flex.mp4" type="video/mp4">
2980    </video>
2981    <div class="cs__overlay"></div>
2982    <div class="cs__content">
2983      <p class="cs__eyebrow">Asset Security</p>
2984      <h2 class="cs__title">A New Standard for Asset Security &amp; Financial Protection</h2>
2985      <p class="cs__subtitle">Aleo is the first blockchain to support fully private transactions on Ledger hardware wallets, combining cold storage security with zero-knowledge privacy.</p>
2986      <p class="cs__body">For the first time, users can keep balances and transaction history fully shielded while signing from cold storage. Privacy and hardware security, together.</p>
2987      <a href="/post/aleo-ledger-integration/" class="cs__btn">Read More &rarr;</a>
2988    </div>
2989  </div>
2990
2991  
2992  <button class="cs__arrow cs__arrow--prev" id="csPrev" aria-label="Previous story">
2993    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
2994      <polyline points="11,2 4,9 11,16" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
2995    </svg>
2996  </button>
2997
2998  
2999  <button class="cs__arrow cs__arrow--next" id="csNext" aria-label="Next story">
3000    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
3001      <polyline points="7,2 14,9 7,16" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
3002    </svg>
3003  </button>
3004
3005  
3006  <div class="cs__dots" role="group" aria-label="Story indicators">
3007    <button class="cs__dot is-active" data-index="0" aria-label="Story 1: Mercy Corps"></button>
3008    <button class="cs__dot" data-index="1" aria-label="Story 2: Toku Payroll"></button>
3009    <button class="cs__dot" data-index="2" aria-label="Story 3: Ledger"></button>
3010  </div>
3011
3012</section>
3013
3014<script type="text/static-page-js">
3015(function () {
3016  var section = document.getElementById('customerStories');
3017  var slides  = Array.from(section.querySelectorAll('.cs__slide'));
3018  var dots    = Array.from(section.querySelectorAll('.cs__dot'));
3019  var total   = slides.length;
3020  var current = 0;
3021  var timer   = null;
3022  // Unified dwell time per slide — independent of each video's length,
3023  // sized so the title + two paragraphs are comfortably readable.
3024  var SLIDE_MS = 10000;
3025
3026  function goTo(n) {
3027    var prev = current;
3028    current = ((n % total) + total) % total;
3029    if (prev === current) return;
3030
3031    slides[prev].classList.remove('is-active');
3032    dots[prev].classList.remove('is-active');
3033
3034    var prevVid = slides[prev].querySelector('.cs__video');
3035    if (prevVid) prevVid.pause();
3036
3037    slides[current].classList.add('is-active');
3038    dots[current].classList.add('is-active');
3039
3040    var nextVid = slides[current].querySelector('.cs__video');
3041    if (nextVid) nextVid.play().catch(function () {});
3042  }
3043
3044  function startAuto() {
3045    clearInterval(timer);
3046    timer = setInterval(function () { goTo(current + 1); }, SLIDE_MS);
3047  }
3048
3049  function stopAuto() { clearInterval(timer); }
3050
3051  document.getElementById('csPrev').addEventListener('click', function () { goTo(current - 1); startAuto(); });
3052  document.getElementById('csNext').addEventListener('click', function () { goTo(current + 1); startAuto(); });
3053
3054  dots.forEach(function (d) {
3055    d.addEventListener('click', function () { goTo(parseInt(d.dataset.index, 10)); startAuto(); });
3056  });
3057
3058  section.addEventListener('mouseenter', stopAuto);
3059  section.addEventListener('mouseleave', startAuto);
3060
3061  // Slide 1 has no autoplay/preload (16MB video, section is below the fold).
3062  // Start fetching + playing it once the section is within a viewport of view.
3063  var lazyStart = new IntersectionObserver(function (entries) {
3064    if (!entries[0].isIntersecting) return;
3065    lazyStart.disconnect();
3066    var vid = slides[current].querySelector('.cs__video');
3067    if (vid && vid.paused) vid.play().catch(function () {});
3068  }, { rootMargin: '100% 0px' });
3069  lazyStart.observe(section);
3070
3071  // Don't start rotating until cs is revealed from behind the dark sections.
3072  // Watch bd9-outer: when it exits the viewport fully, cs is visible.
3073  var bd9 = document.querySelector('.bd9-outer');
3074  if (!bd9) { startAuto(); return; }
3075
3076  new IntersectionObserver(function (entries) {
3077    if (!entries[0].isIntersecting) {
3078      if (current !== 0) goTo(0);
3079      startAuto();
3080    } else {
3081      stopAuto();
3082      goTo(0);
3083    }
3084  }, { threshold: 0 }).observe(bd9);
3085}());
3086
3087</script>
3087
3088
3089<style>
3090  /* ── POLICY-9B: Paper Dominant ────────────────────────────────
3091     Top: paper image aligned with policy text (2-col).
3092     Bottom: full-width email signup spanning the section.
3093  ─────────────────────────────────────────────────────────────── */
3094  .pol9b { background: #0a0a0a; padding: 0 160px; }
3095
3096  /* ── Top: paper + policy text side by side ── */
3097  .pol9b__top {
3098    display: grid;
3099    grid-template-columns: 1fr 1fr;
3100    gap: 80px;
3101    align-items: center;
3102    padding: 80px 0 72px;
3103  }
3104
3105  .pol9b__left {
3106    display: flex; align-items: center; justify-content: center;
3107  }
3108
3109  /* The mockup asset has a transparent background with its own baked-in
3110     tilt and drop shadow — no container box, radius, or shadow needed */
3111  .pol9b__paper {
3112    width: 64%;
3113  }
3114  .pol9b__paper img { width: 100%; height: auto; display: block; }
3115
3116  .pol9b__content {
3117    display: flex; flex-direction: column; justify-content: center;
3118  }
3119
3120  .pol9b__headline {
3121    font-family: var(--font-display);
3122    font-size: 52px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.05;
3123    color: #f5f5f7; margin-bottom: 24px;
3124  }
3125
3126  .pol9b__desc {
3127    font-family: var(--font-body); font-size: 20px; line-height: 1.65;
3128    color: rgba(245,245,247,0.72); margin-bottom: 40px;
3129  }
3130
3131  @keyframes pol9b-shimmer {
3132    0%   { background-position: 0% center; }
3133    100% { background-position: 200% center; }
3134  }
3135
3136  .pol9b__read {
3137    display: inline-flex; align-items: center; gap: 8px;
3138    height: 52px; padding: 0 28px;
3139    background: #f5f5f7; color: #121212; border-radius: 100px;
3140    font-family: var(--font-body); font-size: 13px; font-weight: 600;
3141    letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none;
3142    width: fit-content;
3143    position: relative; overflow: hidden;
3144    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s;
3145  }
3146  .pol9b__read::after {
3147    content: '';
3148    position: absolute; inset: 0;
3149    background: linear-gradient(90deg, #A8E063 0%, #F2D060 18%, rgba(255,253,235,0.95) 30%, #F5A87A 44%, #E8A0C5 62%, #c4a0e8 78%, #A8E063 100%);
3150    background-size: 400% auto;
3151    animation: pol9b-shimmer 7s linear infinite;
3152    border-radius: inherit; opacity: 0; transition: opacity 0.4s ease;
3153  }
3154  .pol9b__read:hover { transform: scale(1.05); }
3155  .pol9b__read:hover::after { opacity: 0.55; }
3156  .pol9b__read span { position: relative; z-index: 1; }
3157
3158  /* ── Bottom: horizontal form spanning whitepaper-left → section-right ── */
3159  .pol9b__bottom {
3160    border-top: 1px solid rgba(245,245,247,0.08);
3161    padding: 48px 0 80px;
3162    display: grid;
3163    grid-template-columns: 1fr 1fr;
3164    gap: 80px;
3165  }
3166
3167  .pol9b__form-wrap {
3168    grid-column: 1 / -1;
3169    display: flex;
3170    flex-direction: column;
3171    /* Aligns left edge with whitepaper: 18% of 1fr col = 9% of content - half gap
3172       calc(9% - 7.2px) is exact across all viewport widths */
3173    padding-left: calc(9% - 7.2px);
3174  }
3175
3176  .pol9b__sub-label {
3177    font-family: var(--font-display);
3178    font-size: 24px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.2;
3179    color: rgba(245,245,247,0.9); margin-bottom: 20px;
3180  }
3181
3182  .pol9b__form {
3183    display: flex;
3184    flex-direction: row;
3185    gap: 10px;
3186    align-items: stretch;
3187  }
3188
3189  .pol9b__input { flex: 1; }
3190
3191  .pol9b__input {
3192    background: rgba(245,245,247,0.1); border: 1px solid rgba(245,245,247,0.18);
3193    border-radius: 12px; padding: 16px 20px;
3194    font-family: var(--font-body); font-size: 15px; color: #f5f5f7; outline: none;
3195    transition: border-color 0.15s, background 0.15s;
3196  }
3197  .pol9b__input::placeholder { color: rgba(245,245,247,0.4); }
3198  .pol9b__input:focus {
3199    background: rgba(245,245,247,0.14); border-color: rgba(245,245,247,0.32);
3200  }
3201
3202  .pol9b__submit {
3203    height: 52px; padding: 0 32px;
3204    background: #f5f5f7; color: #121212;
3205    border: none; border-radius: 12px;
3206    font-family: var(--font-body); font-size: 13px; font-weight: 600;
3207    letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer;
3208    box-shadow: 2px 4px 5px rgba(201,201,201,0.22);
3209    position: relative; overflow: hidden;
3210    transition: opacity 0.15s;
3211    white-space: nowrap;
3212  }
3213  .pol9b__submit::after {
3214    content: '';
3215    position: absolute; inset: 0;
3216    background: linear-gradient(90deg, #A8E063 0%, #F2D060 18%, rgba(255,253,235,0.95) 30%, #F5A87A 44%, #E8A0C5 62%, #c4a0e8 78%, #A8E063 100%);
3217    background-size: 400% auto;
3218    animation: pol9b-shimmer 7s linear infinite;
3219    border-radius: inherit; opacity: 0; transition: opacity 0.4s ease;
3220  }
3221  .pol9b__submit:hover::after { opacity: 0.45; }
3222  .pol9b__submit:hover { opacity: 0.85; }
3223  .pol9b__submit span { position: relative; z-index: 1; }
3224
3225  .pol9b__fine-print {
3226    font-family: var(--font-body); font-size: 12px;
3227    color: rgba(245,245,247,0.5); margin-top: 12px; text-align: left;
3228  }
3229
3230  /* ── Narrow desktop (1025–1300px) ──
3231     Still a 2-column layout, but the columns are narrow, so the 64% paper reads
3232     as small beside the headline. Widen it to fill more of its column. */
3233  @media (max-width: 1300px) and (min-width: 1025px) {
3234    .pol9b__paper { width: 88%; }
3235  }
3236
3237  /* ── Tablet (≤1024px) — keep the 2-col paper + text layout;
3238     tighten the gap and type so both columns breathe ── */
3239  @media (max-width: 1024px) {
3240    .pol9b { padding: 0 60px; }
3241    .pol9b__top { gap: 48px; padding: 60px 0 48px; }
3242    .pol9b__paper { width: 92%; }
3243    .pol9b__headline { font-size: 34px; }
3244    .pol9b__desc { font-size: 17px; margin-bottom: 32px; }
3245    .pol9b__form-wrap { padding-left: 0; }
3246    .pol9b__form { flex-direction: column; }
3247    .pol9b__submit { width: 100%; }
3248  }
3249
3250  /* ── Mobile (≤767px) — columns finally stack ── */
3251  @media (max-width: 767px) {
3252    .pol9b { padding: 0 36px; }
3253    .pol9b__top { grid-template-columns: 1fr; gap: 0; }
3254    .pol9b__left { padding: 0 0 36px; justify-content: flex-start; }
3255    .pol9b__paper { width: min(280px, 60%); }
3256    .pol9b__headline { font-size: 32px; }
3257    .pol9b__desc { font-size: 16px; }
3258    .pol9b__sub-label { font-size: 20px; }
3259  }
3260</style>
3261
3262<section class="pol9b">
3263  <div class="pol9b__top">
3264    <div class="pol9b__left">
3265      <div class="pol9b__paper">
3266        <img src="/public/images/stablecoin-whitepaper-mockup.webp" alt="Stablecoin Privacy whitepaper" loading="lazy">
3267      </div>
3268    </div>
3269    <div class="pol9b__content">
3270      <h2 class="pol9b__headline">Leaders in Financial Privacy Policy Conversations</h2>
3271      <p class="pol9b__desc">Aleo has become a recognized voice in the policy conversation surrounding private finance. This culminated in the recent release of the Stablecoin Privacy whitepaper, which presents a clear case for institutional adoption of permissionless, private stablecoin architecture.</p>
3272      <a href="/post/stablecoin-privacy-paper/" class="pol9b__read"><span>Read the Whitepaper &rarr;</span></a>
3273    </div>
3274  </div>
3275  <div class="pol9b__bottom">
3276    <div class="pol9b__form-wrap">
3277      <p class="pol9b__sub-label">Subscribe to future policy insights and other news from Aleo</p>
3278      <form class="pol9b__form" name="policy-b" action="#" method="post">
3279        <input class="pol9b__input" type="text" name="name" placeholder="Your name" autocomplete="name" required>
3280        <input class="pol9b__input" type="email" name="email" placeholder="Work email address" autocomplete="email" required>
3281        
3282        <input class="pol9b__hp" id="pol9b-company-site" name="company_
3282site" type="text" value="" tabindex="-1" aria-hidden="true" autocomplete="off" style="position:absolute;left:-9999px;width:1px;height:1px;opacity:0;">
3283        <button type="submit" class="pol9b__submit"><span>Subscribe</span></button>
3284      </form>
3285      <p class="pol9b__form-error" id="pol9b-error" hidden style="font-family:var(--font-body);font-size:13px;color:#e07b6a;margin-top:12px;"></p>
3286      <p class="pol9b__fine-print">No spam. Unsubscribe anytime. <a href="/privacy/" style="color:inherit;text-decoration:underline;">Privacy Policy</a>.</p>
3287    </div>
3288  </div>
3289</section>
3290
3291<script type="text/static-page-js">
3292(function () {
3293  var form = document.querySelector('.pol9b__form');
3294  if (!form || !window.AleoForm) return;
3295
3296  var THANKS = '<p style="font-family:var(--font-body);font-size:15px;line-height:1.65;color:rgba(245,245,247,0.5);padding:12px 0;">You\'re subscribed.</p>';
3297
3298  form.addEventListener('submit', function (e) {
3299    e.preventDefault();
3300
3301    var nameInput = form.querySelector('[name="name"]');
3302    var emailInput = form.querySelector('[name="email"]');
3303    var name = (nameInput || {}).value || '';
3304    var email = (emailInput || {}).value || '';
3305    var hp = (form.querySelector('#pol9b-company-site') || {}).value || '';
3306    var btn = form.querySelector('.pol9b__submit');
3307
3308    window.AleoForm.submit({
3309      form: form,
3310      endpoint: window.ALEO_SUBSCRIBE_ENDPOINT,
3311      required: ['name', 'email'],
3312      name: name,
3313      email: email,
3314      nameInput: nameInput,
3315      emailInput: emailInput,
3316      honeypot: hp,
3317      errorEl: document.getElementById('pol9b-error'),
3318      button: btn,
3319      buttonLabelEl: btn && btn.querySelector('span'),
3320      sendingText: 'Subscribing…',
3321      thanksHtml: THANKS,
3322      logLabel: 'subscribe',
3323      payload: {
3324        type: 'subscribe',
3325        name: name.trim(),
3326        email: email.trim(),
3327        source: 'policy-9'
3328      }
3329    });
3330  });
3331}());
3332</script>
3332
3333
3334<style>
3335  .dm-overlay {
3336    position: fixed;
3337    inset: 0;
3338    background: rgba(0, 0, 0, 0.72);
3339    z-index: 500;
3340    display: flex;
3341    align-items: center;
3342    justify-content: center;
3343    padding: 24px;
3344    opacity: 0;
3345    visibility: hidden;
3346    transition: opacity 0.25s ease, visibility 0.25s ease;
3347    backdrop-filter: blur(6px);
3348    -webkit-backdrop-filter: blur(6px);
3349  }
3350
3351  .dm-overlay.is-open {
3352    opacity: 1;
3353    visibility: visible;
3354  }
3355
3356  .dm-panel {
3357    background: #111111;
3358    border: 1px solid rgba(245, 245, 245, 0.08);
3359    border-radius: 24px;
3360    padding: 52px 52px 44px;
3361    width: 100%;
3362    max-width: 540px;
3363    max-height: 90vh;
3364    overflow-y: auto;
3365    position: relative;
3366    transform: translateY(20px) scale(0.97);
3367    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
3368  }
3369
3370  .dm-overlay.is-open .dm-panel {
3371    transform: translateY(0) scale(1);
3372  }
3373
3374  .dm-close {
3375    position: absolute;
3376    top: 18px;
3377    right: 18px;
3378    width: 34px;
3379    height: 34px;
3380    background: rgba(245, 245, 245, 0.07);
3381    border: none;
3382    border-radius: 50%;
3383    cursor: pointer;
3384    display: flex;
3385    align-items: center;
3386    justify-content: center;
3387    color: rgba(245, 245, 245, 0.5);
3388    transition: background 0.15s, color 0.15s;
3389    flex-shrink: 0;
3390  }
3391
3392  .dm-close:hover {
3393    background: rgba(245, 245, 245, 0.13);
3394    color: rgba(245, 245, 245, 0.95);
3395  }
3396
3397  .dm-eyebrow {
3398    font-family: 'Azeret Mono', monospace;
3399    font-size: 11px;
3400    font-weight: 600;
3401    letter-spacing: 0.12em;
3402    text-transform: uppercase;
3403    color: rgba(245, 245, 245, 0.32);
3404    margin-bottom: 14px;
3405  }
3406
3407  .dm-title {
3408    font-family: var(--font-display);
3409    font-size: 42px;
3410    font-weight: 400;
3411    letter-spacing: -0.03em;
3412    line-height: 1.0;
3413    color: #f5f5f7;
3414    margin-bottom: 12px;
3415  }
3416
3417  .dm-sub {
3418    font-family: var(--font-body);
3419    font-size: 22px;
3420    line-height: 1.65;
3421    color: rgba(245, 245, 245, 0.48);
3422    max-width: 800px;
3423    margin-bottom: 32px;
3424  }
3425
3426  .dm-form {
3427    display: flex;
3428    flex-direction: column;
3429    gap: 14px;
3430  }
3431
3432  .dm-row {
3433    display: grid;
3434    grid-template-columns: 1fr 1fr;
3435    gap: 12px;
3436  }
3437
3438  /* Mobile: stack name + email instead of side-by-side */
3439  @media (max-width: 767px) {
3440    .dm-row { grid-template-columns: 1fr; }
3441  }
3442
3443  .dm-field {
3444    display: flex;
3445    flex-direction: column;
3446    gap: 6px;
3447  }
3448
3449  .dm-label {
3450    font-family: 'Azeret Mono', monospace;
3451    font-size: 10px;
3452    font-weight: 600;
3453    letter-spacing: 0.1em;
3454    text-transform: uppercase;
3455    color: rgba(245, 245, 245, 0.3);
3456  }
3457
3458  .dm-input,
3459  .dm-textarea {
3460    background: rgba(245, 245, 245, 0.06);
3461    border: 1.5px solid rgba(245, 245, 245, 0.1);
3462    border-radius: 12px;
3463    padding: 14px 16px;
3464    font-family: var(--font-body);
3465    font-size: 15px;
3466    color: #f5f5f7;
3467    outline: none;
3468    transition: border-color 0.15s ease, background 0.15s ease;
3469    width: 100%;
3470    box-sizing: border-box;
3471    -webkit-appearance: none;
3472  }
3473
3474  .dm-input::placeholder,
3475  .dm-textarea::placeholder {
3476    color: rgba(245, 245, 245, 0.22);
3477  }
3478
3479  .dm-input:focus,
3480  .dm-textarea:focus {
3481    border-color: rgba(245, 245, 245, 0.28);
3482    background: rgba(245, 245, 245, 0.09);
3483  }
3484
3485  .dm-textarea {
3486    resize: none;
3487    height: 110px;
3488    line-height: 1.6;
3489  }
3490
3491  .dm-check-row {
3492    display: flex;
3493    align-items: flex-start;
3494    gap: 10px;
3495  }
3496
3497  .dm-checkbox {
3498    width: 16px;
3499    height: 16px;
3500    flex-shrink: 0;
3501    margin-top: 3px;
3502    accent-color: #f5f5f7;
3503    cursor: pointer;
3504  }
3505
3506  .dm-check-label {
3507    font-family: var(--font-body);
3508    font-size: 13px;
3509    line-height: 1.6;
3510    color: rgba(245, 245, 245, 0.4);
3511    cursor: pointer;
3512  }
3513
3514  @keyframes dm-shimmer {
3515    0%   { background-position: 0% center; }
3516    100% { background-position: 200% center; }
3517  }
3518
3519  .dm-submit {
3520    display: inline-flex;
3521    align-items: center;
3522    height: 52px;
3523    flex-shrink: 0;
3524    padding: 0 32px;
3525    background: #f5f5f7;
3526    color: #121212;
3527    border: none;
3528    border-radius: 100px;
3529    font-family: 'Azeret Mono', monospace;
3530    font-size: 12px;
3531    font-weight: 600;
3532    letter-spacing: 0.08em;
3533    text-transform: uppercase;
3534    cursor: pointer;
3535    align-self: flex-start;
3536    position: relative;
3537    overflow: hidden;
3538    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
3539  }
3540
3541  .dm-submit::after {
3542    content: '';
3543    position: absolute;
3544    inset: 0;
3545    background: linear-gradient(90deg, #A8E063 0%, #F2D060 18%, rgba(255,253,235,0.95) 30%, #F5A87A 44%, #E8A0C5 62%, #c4a0e8 78%, #A8E063 100%);
3546    background-size: 400% auto;
3547    animation: dm-shimmer 7s linear infinite;
3548    border-radius: inherit;
3549    opacity: 0;
3550    transition: opacity 0.4s ease;
3551  }
3552
3553  .dm-submit:hover { transform: scale(1.04); }
3554  .dm-submit:hover::after { opacity: 0.55; }
3555  .dm-submit span { position: relative; z-index: 1; }
3556
3557  .dm-privacy {
3558    font-family: var(--font-body);
3559    font-size: 12px;
3560    line-height: 1.7;
3561    color: rgba(245, 245, 245, 0.22);
3562  }
3563
3564  .dm-privacy a {
3565    color: rgba(245, 245, 245, 0.38);
3566    text-decoration: underline;
3567  }
3568</style>
3569
3570<div class="dm-overlay" id="demoOverlay" role="dialog" aria-modal="true" aria-labelledby="demoTitle" aria-hidden="true">
3571  <div class="dm-panel">
3572
3573    <button class="dm-close" id="demoClose" aria-label="Close">
3574      <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
3575        <path d="M1 1l10 10M11 1L1 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
3576      </svg>
3577    </button>
3578
3579    <p class="dm-eyebrow">Talk to An Expert</p>
3580    <h2 class="dm-title" id="demoTitle">Talk to An Expert</h2>
3581    <p class="dm-sub">Discover how private stablecoins can transform the way your organization moves money globally.</p>
3582
3583    <form class="dm-form" action="" method="post">
3584      <div class="dm-row">
3585        <div class="dm-field">
3586          <label class="dm-label" for="dm-name">Your Name</label>
3587          <input class="dm-input" id="dm-name" name="name" type="text" placeholder="Full name" autocomplete="name">
3588        </div>
3589        <div class="dm-field">
3590          <label class="dm-label" for="dm-email">Your Email</label>
3591          <input class="dm-input" id="dm-email" name="email" type="email" placeholder="[email protected]" autocomplete="email">
3592        </div>
3593      </div>
3594
3595      <div class="dm-field">
3596        <label class="dm-label" for="dm-message">Your Use Case</label>
3597        <textarea class="dm-textarea" id="dm-message" name="message" placeholder="Tell us about your organization, where you operate, and what you're trying to solve."></textarea>
3598      </div>
3599
3600      <div class="dm-check-row">
3601        
3602        <input class="dm-checkbox" id="dm-updates" name="updates" type="checkbox">
3603        <label class="dm-check-label" for="dm-updates">Keep me updated on Aleo's latest developments and partnership opportunities</label>
3604      </div>
3605
3606      
3607      <input class="dm-hp" id="dm-company-site" name="company_site" type="text" value="" tabindex="-1" aria-hidden="true" autocomplete="off" style="position:absolute;left:-9999px;width:1px;height:1px;opacity:0;">
3608
3609      <button class="dm-submit" type="submit"><span>Send Message</span></button>
3610
3611      <p class="dm-form-error" id="dm-error" hidden style="font-family:var(--font-body);font-size:13px;color:#e07b6a;margin-top:12px;">Something went wrong sending your message — please try again.</p>
3612
3613      <p class="dm-privacy">We respect your privacy as much as we protect it. You can unsubscribe anytime. <a href="/privacy/">Privacy Policy</a>.</p>
3614    </form>
3615
3616  </div>
3617</div>
3618
3619<script type="text/static-page-js">
3620(function () {
3621  var overlay = document.getElementById('demoOverlay');
3622  var closeBtn = document.getElementById('demoClose');
3623  if (!overlay) return;
3624
3625  function open() {
3626    overlay.classList.add('is-open');
3627    overlay.setAttribute('aria-hidden', 'false');
3628    document.body.style.overflow = 'hidden';
3629    var first = overlay.querySelector('input, textarea');
3630    if (first) setTimeout(function () { first.focus(); }, 60);
3631  }
3632
3633  function close() {
3634    overlay.classList.remove('is-open');
3635    overlay.setAttribute('aria-hidden', 'true');
3636    document.body.style.overflow = '';
3637  }
3638
3639  closeBtn.addEventListener('click', close);
3640
3641  var form = overlay.querySelector('.dm-form');
3642  if (form && window.AleoForm) {
3643    var THANKS = '<p style="color:rgba(245,245,245,0.62);font-family:var(--font-body);font-size:16px;line-height:1.65;padding:12px 0;">Thanks — we\'ll be in touch shortly.</p>';
3644
3645    form.addEventListener('submit', function (e) {
3646      e.preventDefault();
3647
3648      var nameInput = form.querySelector('#dm-name');
3649      var emailInput = form.querySelector('#dm-email');
3650      var name = (nameInput || {}).value || '';
3651      var email = (emailInput || {}).value || '';
3652      var message = (form.querySelector('#dm-message') || {}).value || '';
3653      var updates = !!(form.querySelector('#dm-updates') || {}).checked;
3654      var hp = (form.querySelector('#dm-company-site') || {}).value || '';
3655      var btn = form.querySelector('.dm-submit');
3656
3657      window.AleoForm.submit({
3658        form: form,
3659        endpoint: window.ALEO_EXPERT_ENDPOINT,
3660        required: ['name', 'email'],
3661        name: name,
3662        email: email,
3663        nameInput: nameInput,
3664        emailInput: emailInput,
3665        honeypot: hp,
3666        errorEl: document.getElementById('dm-error'),
3667        button: btn,
3668        buttonLabelEl: btn && btn.querySelector('span'),
3669        sendingText: 'Sending…',
3670        thanksHtml: THANKS,
3671        logLabel: 'demo-modal',
3672        payload: {
3673          name: name.trim(),
3674          email: email.trim(),
3675          message: message.trim(),
3676          updates: updates,
3677          source: 'Homepage, talk to an expert pop-up'
3678        }
3679      });
3680    });
3681  }
3682
3683  overlay.addEventListener('click', function (e) {
3684    if (e.target === overlay) close();
3685  });
3686
3687  document.addEventListener('keydown', function (e) {
3688    if (e.key === 'Escape') close();
3689  });
3690
3691  document.addEventListener('click', function (e) {
3692    var trigger = e.target.closest('[data-demo-open]');
3693    if (trigger) {
3694      e.preventDefault();
3695      e.stopPropagation();
3696      open();
3697    }
3698  }, true);
3699
3700  // Keyboard: role="button" triggers (e.g. audience-cards) must open on Enter/Space too.
3701  document.addEventListener('keydown', function (e) {
3702    if (e.key !== 'Enter' && e.key !== ' ' && e.key !== 'Spacebar') return;
3703    var trigger = e.target.closest('[data-demo-open][role="button"]');
3704    if (trigger) {
3705      e.preventDefault();
3706      open();
3707    }
3708  });
3709})();
3710</script>
3710
3711
3712<style>
3713  /* ── MODULE: FOOTER ────────────────────────────────────────
3714     Black footer matching the index9 dark design language.
3715     Five columns: logo+GET STARTED | SOLUTIONS | DEVELOPERS | RESOURCES | SOCIAL+LEGAL
3716  ──────────────────────────────────────────────────────────── */
3717
3718  .ft9 {
3719    background: #000000;
3720    border-top: 1px solid rgba(255, 255, 255, 0.08);
3721    padding: 80px 160px 52px;
3722  }
3723
3724  .ft9__grid {
3725    display: grid;
3726    grid-template-columns: 220px 1fr 1fr 1fr 180px;
3727    /* Named areas let each group be placed per breakpoint independent of DOM
3728       order — so Social+Legal can be paired/relocated to pack tightly and keep
3729       column heights even. brand/sol/dev/res span both rows here so the short
3730       Social+Legal column (soc over leg) doesn't get a tall first row. */
3731    grid-template-areas:
3732      "brand sol dev res soc"
3733      "brand sol dev res leg";
3734    column-gap: 48px;
3735    row-gap: 32px;
3736    margin-bottom: 72px;
3737  }
3738
3739  /* Map footer groups to areas by DOM order:
3740     1 brand · 2 Solutions · 3 Developers · 4 Resources · 5 Social · 6 Legal.
3741     Only applied in the grid layouts (≥861px); below that the footer uses
3742     multi-column / single-column flow where named placement must not leak. */
3743  @media (min-width: 861px) {
3744    .ft9__grid > :nth-child(1) { grid-area: brand; }
3745    .ft9__grid > :nth-child(2) { grid-area: sol; }
3746    .ft9__grid > :nth-child(3) { grid-area: dev; }
3747    .ft9__grid > :nth-child(4) { grid-area: res; }
3748    .ft9__grid > :nth-child(5) { grid-area: soc; }
3749    .ft9__grid > :nth-child(6) { grid-area: leg; }
3750  }
3751
3752  /* ── Logo column ── */
3753  .ft9__logo a {
3754    display: inline-block;
3755    text-decoration: none;
3756  }
3757
3758  .ft9__wordmark {
3759    display: block;
3760    height: 20px;
3761    width: auto;
3762    filter: brightness(0) invert(1);
3763    opacity: 0.88;
3764  }
3765
3766  /* ── Nav columns ── */
3767  .ft9__col {
3768    display: flex;
3769    flex-direction: column;
3770  }
3771
3772  .ft9__col-stack {
3773    display: flex;
3774    flex-direction: column;
3775    gap: 44px;
3776  }
3777
3778  .ft9__col-group {
3779    display: flex;
3780    flex-direction: column;
3781  }
3782
3783  .ft9__heading {
3784    font-family: 'Azeret', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
3785    font-size: 11px;
3786    font-weight: 700;
3787    letter-spacing: 0.10em;
3788    text-transform: uppercase;
3789    color: rgba(255, 255, 255, 0.55);
3790    margin-bottom: 24px;
3791  }
3792
3793  .ft9__links {
3794    list-style: none;
3795    display: flex;
3796    flex-direction: column;
3797    gap: 15px;
3798  }
3799
3800  .ft9__link {
3801    font-family: 'Azeret', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
3802    font-size: 17px;
3803    font-weight: 400;
3804    color: rgba(245, 245, 245, 0.58);
3805    text-decoration: none;
3806    display: flex;
3807    align-items: center;
3808    gap: 6px;
3809    line-height: 1.4;
3810    transition: color 0.15s;
3811  }
3812
3813  .ft9__link:hover {
3814    color: rgba(245, 245, 245, 0.95);
3815    text-decoration: none;
3816  }
3817
3818  /* Inline SVG external-link arrow */
3819  .ft9__ext {
3820    display: inline-flex;
3821    flex-shrink: 0;
3822    opacity: 0.55;
3823    width: 11px;
3824    height: 11px;
3825  }
3826
3827  /* ── Bottom bar ── */
3828  .ft9__bottom {
3829    border-top: 1px solid rgba(255, 255, 255, 0.07);
3830    padding-top: 32px;
3831    display: flex;
3832    align-items: center;
3833    justify-content: flex-end;
3834  }
3835
3836  .ft9__legal {
3837    font-family: var(--font-mono);
3838    font-size: 11px;
3839    font-weight: 500;
3840    letter-spacing: 0.10em;
3841    text-transform: uppercase;
3842    color: rgba(255, 255, 255, 0.22);
3843  }
3844
3845  /* ── Responsive ──
3846     Column count and side padding are handled separately. The 5-column grid
3847     needs ~1500px+ to breathe and overflows below ~1090px, so step down the
3848     column count as width drops. Three columns cover the whole 861–1200 band:
3849     wide enough for the link labels, tight enough to avoid the sparse middle
3850     gap a 2-column layout leaves at these widths. */
3851
3852  /* Side padding */
3853  @media (max-width: 1024px) { .ft9 { padding: 60px 60px 40px; } }
3854  @media (max-width: 767px)  { .ft9 { padding: 48px 36px 36px; } }
3855
3856  /* Column count.
3857     861–1200px: three columns, re-paired so each column holds a tall group
3858     over a short one (no long vertical holes) and LEGAL sits under DEVELOPERS
3859     to keep the footer short. Below that, multi-column packs the groups. */
3860  @media (max-width: 1200px) and (min-width: 861px) {
3861    .ft9__grid {
3862      grid-template-columns: 1fr 1fr 1fr;
3863      grid-template-areas:
3864        "brand dev res"
3865        "sol   leg soc";
3866      column-gap: 40px;
3867      row-gap: 32px;
3868    }
3869  }
3870  /* Two columns all the way down to 500px so the groups fill the width instead
3871     of a single left-hugging column with a big empty right side. Single column
3872     only on the narrowest phones, where two columns would be too cramped. */
3873  @media (max-width: 860px) and (min-width: 500px) {
3874    .ft9__grid { display: block; column-count: 2; column-gap: 40px; row-gap: 0; }
3875    .ft9__grid > * { break-inside: avoid; margin-bottom: 48px; }
3876  }
3877  @media (max-width: 499px) {
3878    .ft9__grid { grid-template-columns: 1fr; grid-template-areas: none; gap: 40px; margin-bottom: 48px; }
3879    .ft9__bottom { justify-content: center; }
3880  }
3881</style>
3882
3883<footer class="ft9">
3884  <div class="ft9__grid">
3885
3886    
3887    <div class="ft9__col-stack ft9__brand">
3888      <div class="ft9__logo">
3889        <a href="/">
3890          <img
3891            src="/public/images/logos/aleo-wordmark.svg"
3892            alt="Aleo"
3893            class="ft9__wordmark"
3894          >
3895        </a>
3896      </div>
3897
3898      <div class="ft9__col-group">
3899        <p class="ft9__heading">Get Started</p>
3900        <ul class="ft9__links">
3901          <li><a href="/how-aleo-works/" class="ft9__link">How Aleo Works</a></li>
3902          <li><a href="/aleo-tokens/" class="ft9__link">Introducing Aleo Tokens</a></li>
3903          <li><a href="/ecosystems/" class="ft9__link">Explore the Ecosystem</a></li>
3904          <li>
3905            <a href="https://staking.aleo.org/" class="ft9__link">
3906              <svg class="ft9__ext" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 9L9 2M9 2H3.5M9 2V7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
3907              Staking
3908            </a>
3909          </li>
3910          <li><a href="/company/" class="ft9__link">About Aleo</a></li>
3911          <li>
3912            <a href="https://github.com/ProvableHQ/snarkOS" class="ft9__link" target="_blank" rel="noopener">
3913              <svg class="ft9__ext" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 9L9 2M9 2H3.5M9 2V7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
3914              Provers
3915            </a>
3916          </li>
3917        </ul>
3918      </div>
3919    </div>
3920
3921    
3922    <div class="ft9__col">
3923      <p class="ft9__heading">Solutions</p>
3924      <ul class="ft9__links">
3925        <li><a href="/solutions/" class="ft9__link">Solutions</a></li>
3926        <li><a href="/usdcx/" class="ft9__link">USDCx on Aleo</a></li>
3927        <li><a href="/usad/" class="ft9__link">USAD on Aleo</a></li>
3928      </ul>
3929    </div>
3930
3931    
3932    <div class="ft9__col">
3933      <p class="ft9__heading">Developers</p>
3934      <ul class="ft9__links">
3935        <li><a href="/developers/" class="ft9__link">Tech Stack</a></li>
3936        <li>
3937          <a href="https://leo-lang.org" class="ft9__link" target="_blank" rel="noopener">
3938            <svg class="ft9__ext" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 9L9 2M9 2H3.5M9 2V7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
3939            Leo Playground (IDE)
3940          </a>
3941        </li>
3942        <li>
3943          <a href="https://developer.aleo.org/guides/introduction/getting_started" class="ft9__link">
3944            <svg class="ft9__ext" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 9L9 2M9 2H3.5M9 2V7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
3945            Docs
3946          </a>
3947        </li>
3948        <li>
3949          <a href="https://explorer.aleo.org" class="ft9__link">
3950            <svg class="ft9__ext" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 9L9 2M9 2H3.5M9 2V7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
3951            Explorer
3952          </a>
3953        </li>
3954        <li>
3955          <a href="https://forms.gle/peUkpARP5t1a3p2EA" class="ft9__link" target="_blank" rel="noopener">
3956            <svg class="ft9__ext" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 9L9 2M9 2H3.5M9 2V7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
3957            Become a Validator
3958          </a>
3959        </li>
3960        <li>
3961          <a href="https://github.com/ProvableHQ/snarkOS" class="ft9__link" target="_blank" rel="noopener">
3962            <svg class="ft9__ext" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 9L9 2M9 2H3.5M9 2V7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
3963            Become a Prover
3964          </a>
3965        </li>
3966        <li>
3967          <a href="https://github.com/AleoNet/snarkVM" class="ft9__link" target="_blank" rel="noopener">
3968            <svg class="ft9__ext" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 9L9 2M9 2H3.5M9 2V7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
3969            snarkVM
3970          </a>
3971        </li>
3972        <li>
3973          <a href="https://github.com/AleoNet/snarkOS" class="ft9__link" target="_blank" rel="noopener">
3974            <svg class="ft9__ext" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 9L9 2M9 2H3.5M9 2V7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
3975            snarkOS
3976          </a>
3977        </li>
3978      </ul>
3979    </div>
3980
3981    
3982    <div class="ft9__col">
3983      <p class="ft9__heading">Resources</p>
3984      <ul class="ft9__links">
3985        <li><a href="/resources/" class="ft9__link">Resources</a></li>
3986        <li><a href="/blog/" class="ft9__link">Blog</a></li>
3987        <li><a href="/events/" class="ft9__link">Events</a></li>
3988        <li><a href="/press/" class="ft9__link">News</a></li>
3989        <li>
3990          <a href="https://vote.aleo.org/" class="ft9__link">
3991            <svg class="ft9__ext" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 9L9 2M9 2H3.5M9 2V7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
3992            Governance
3993          </a>
3994        </li>
3995        <li><a href="/grants/" class="ft9__link">Grants</a></li>
3996        <li><a href="/faq/" class="ft9__link">FAQ</a></li>
3997        <li><a href="/careers/" class="ft9__link">Careers</a></li>
3998        <li><a href="/brand/" class="ft9__link">Brand</a></li>
3999      </ul>
4000    </div>
4001
4002    
4003    <div class="ft9__col">
4004      <p class="ft9__heading">Social</p>
4005      <ul class="ft9__links">
4006        <li>
4007          <a href="https://twitter.com/AleoHQ" class="ft9__link" target="_blank" rel="noopener">
4008            <svg class="ft9__ext" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 9L9 2M9 2H3.5M9 2V7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
4009            X
4010          </a>
4011        </li>
4012        <li>
4013          <a href="https://github.com/AleoNet" class="ft9__link" target="_blank" rel="noopener">
4014            <svg class="ft9__ext" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 9L9 2M9 2H3.5M9 2V7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
4015            GitHub
4016          </a>
4017        </li>
4018        <li>
4019          <a href="https://discord.gg/aleo" class="ft9__link" target="_blank" rel="noopener">
4020            <svg class="ft9__ext" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 9L9 2M9 2H3.5M9 2V7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
4021            Discord
4022          </a>
4023        </li>
4024        <li>
4025          <a href="https://www.youtube.com/@aleofoundation" class="ft9__link" target="_blank" rel="noopener">
4026            <svg class="ft9__ext" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 9L9 2M9 2H3.5M9 2V7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
4027            YouTube
4028          </a>
4029        </li>
4030      </ul>
4031    </div>
4032
4033    
4034    <div class="ft9__col">
4035      <p class="ft9__heading">Legal</p>
4036      <ul class="ft9__links">
4037        <li><a href="/privacy/" class="ft9__link">Privacy</a></li>
4038        <li>
4039          
4040          <a href="/contributor-terms.pdf" class="ft9__link" target="_blank" rel="noopener">
4041            <svg class="ft9__ext" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 9L9 2M9 2H3.5M9 2V7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
4042            Contributor Terms
4043          </a>
4044        </li>
4045      </ul>
4046    </div>
4047
4048  </div>
4049
4050  <div class="ft9__bottom">
4051    <p class="ft9__legal">©2026 Aleo Network Foundation, All Rights Reserved.</p>
4052  </div>
4053</footer>
4054</div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;
4054border:0" aria-live="assertive" aria-atomic="true"></div></div>
4054<script type="text/javascript">_linkedin_partner_id = "5321826";
4055window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
4056window._linkedin_data_partner_ids.push(_linkedin_partner_id);</script>
4056<script type="text/javascript">(function () {
4057    var s = document.getElementsByTagName("script")[0];
4058    var b = document.createElement("script");
4059    b.type = "text/javascript";
4060    b.async = true;
4061    b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
4062    s.parentNode.insertBefore(b, s);
4063})();</script>
4063<noscript><img height="1" width="1" style="display:none" alt="" src="https://dc.ads.linkedin.com/collect/?pid=5321826&amp;fmt=gif"/></noscript>
4063<script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/";/*]]>*/</script>
4063<!-- slice-start id="_gatsby-scripts-1" -->
4064          
4064<script
4065            id="gatsby-chunk-mapping"
4066          >
4067            window.___chunkMapping="{\"app\":[\"/app-fc0280c45338133ab03c.js\"],\"component---src-pages-404-js\":[\"/component---src-pages-404-js-42ae05a503a65bccdf61.js\"],\"component---src-pages-aleo-tokens-js\":[\"/component---src-pages-aleo-tokens-js-8e35749d7bd501b36def.js\"],\"component---src-pages-blog-js\":[\"/component---src-pages-blog-js-eb81a1dec87e09b10bb6.js\"],\"component---src-pages-brand-js\":[\"/component---src-pages-brand-js-0ab1f7b5d98e8385e083.js\"],\"component---src-pages-careers-js\":[\"/component---src-pages-careers-js-0286595d5d0d94911ba3.js\"],\"component---src-pages-company-js\":[\"/component---src-pages-company-js-8214afff4f876e806caa.js\"],\"component---src-pages-events-js\":[\"/component---src-pages-events-js-1c148736d3d9f2181baa.js\"],\"component---src-pages-faq-js\":[\"/component---src-pages-faq-js-349fb821b75618a1ac00.js\"],\"component---src-pages-grants-js\":[\"/component---src-pages-grants-js-c5a75d8727776254d9cc.js\"],\"component---src-pages-how-aleo-works-js\":[\"/component---src-pages-how-aleo-works-js-eb6382573afb717ddc38.js\"],\"component---src-pages-index-js\":[\"/component---src-pages-index-js-2a36dfe427ac62447662.js\"],\"component---src-pages-job-js\":[\"/component---src-pages-job-js-a016c6d371f84ad61851.js\"],\"component---src-pages-landing-js\":[\"/component---src-pages-landing-js-324de7cc7ed12685da40.js\"],\"component---src-pages-post-js\":[\"/component---src-pages-post-js-bc4d0889f529f5b1808a.js\"],\"component---src-pages-press-js\":[\"/component---src-pages-press-js-b457b55f45bcf5d1e524.js\"],\"component---src-pages-privacy-js\":[\"/component---src-pages-privacy-js-8b38b7ab8a98bfbc8420.js\"],\"component---src-pages-provablepaper-js\":[\"/component---src-pages-provablepaper-js-7c1fe68217035a7dbc70.js\"],\"component---src-pages-resources-js\":[\"/component---src-pages-resources-js-9e98b4737c38dec65f16.js\"],\"component---src-pages-solutions-js\":[\"/component---src-pages-solutions-js-b8c84d6bd28a2e97c829.js\"],\"component---src-pages-terms-js\":[\"/component---src-pages-terms-js-2dad827a786ffcf50cb6.js\"],\"component---src-templates-ecosystems-js\":[\"/component---src-templates-ecosystems-js-85a333168a2118c1f729.js\"],\"component---src-templates-project-app-js\":[\"/component---src-templates-project-app-js-5addd4288c6cddb3d871.js\"],\"component---src-templates-solutions-js\":[\"/component---src-templates-solutions-js-febc57d2b620ce699624.js\"],\"component---src-templates-static-page-js\":[\"/component---src-templates-static-page-js-14e1c6ddcd378f8e1ea4.js\"],\"component---src-templates-usad-js\":[\"/component---src-templates-usad-js-4a7e4d8c76de54138c51.js\"],\"component---src-templates-usecases-js\":[\"/component---src-templates-usecases-js-94f07dad5367fb8a0346.js\"]}";
4068          </script>
4068
4069        
4069<script>window.___webpackCompilationHash="b8a8f3c04178406394bf";</script>
4069<script src="/webpack-runtime-1917ce0f22d0802658d7.js" async></script>
4069<script src="/framework-facf475f60aa71d2f6de.js" async></script>
4069<script src="/app-fc0280c45338133ab03c.js" async></script>
4069<!-- slice-end id="_gatsby-scripts-1" --></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.