PageSourceSearch

https://narbefoundation.org/

html narbefoundation.org collected 2026-10-08 06:23:37 UTC 82,148 bytes, 1,962 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8"/>
5<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
6<title>NARBE Foundation - One and Two Button Games and Tools</title>
7<link rel="icon" type="image/png" href="images/branding/favicon.png"/>
8<link href="https://fonts.googleapis.com" rel="preconnect"/>
9<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
10<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&amp;display=swap" rel="stylesheet"/>
11<link rel="stylesheet" href="styles.css" />
12<link rel="stylesheet" href="accessibility.css" />
13<!-- OpenDyslexic Font for Accessibility -->
14<link href="https://fonts.cdnfonts.com/css/opendyslexic" rel="stylesheet"/>
15<!-- Google tag (gtag.js) -->
vendor: 65 bytes, lines 15-16
15
16<script async src="https://www.googletagmanager.com/gtag/js?id=
16G-BXR0H5SN9F
vendor: 13 bytes, line 16
16"></script>
17<script>
18  
vendor: 136 bytes, lines 18-21
18window.dataLayer = window.dataLayer || [];
19  function gtag(){dataLayer.push(arguments);}
20  gtag('js', new Date());
21  gtag('config', '
21G-BXR0H5SN9F
vendor: 5 bytes, line 21
21');
22</script>
22
23<!-- MailerLite Universal -->
24<script>
25    (function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[])
26    .push(arguments);},l=d.createElement(e),l.async=1,l.src=u,
27    n=d.getElementsByTagName(e)[0],n.parentNode.insertBefore(l,n);})
28    (window,document,'script','https://assets.mailerlite.com/js/universal.js','ml');
29    ml('account', '1901217');
30</script>
30
31<!-- End MailerLite Universal -->
32<!-- Givebutter Widget Script -->
33<script async src="https://widgets.givebutter.com/latest.umd.cjs?acct=JlNZTQzhAyoKDVPC&p=other"></script>
33
34<style>
35  :root { --header-h: 96px; }
36  * { margin: 0; padding: 0; box-sizing: border-box; }
37  html { scroll-behavior: smooth; }
38  body {
39    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
40    line-height: 1.6;
41    color: #1a1a1a;
42    background: #ffffff;
43    padding-top: var(--header-h);
44  }
45  section { scroll-margin-top: var(--header-h); }
46  .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
47
48  /* Skip Link */
49  .skip-link {
50    position: absolute;
51    top: -100px;
52    left: 0;
53    background: #000;
54    color: white;
55    padding: 8px;
56    z-index: 10001;
57    transition: top 0.3s;
58  }
59  .skip-link:focus {
60    top: 0;
61  }
62
63  /* Header */
64  header {
65    position: fixed; 
66    top: 0; 
67    left: 0; 
68    right: 0;
69    background: rgba(255, 255, 255, 0.95);
70    backdrop-filter: blur(10px);
71    border-bottom: 1px solid rgba(0,0,0,0.1);
72    z-index: 1000;
73    transition: all 0.3s ease;
74  }
75  
76  nav {
77    display: flex; 
78    justify-content: space-between; 
79    align-items: center;
80    padding: 15px 0 0 0;
81    position: relative;
82  }
83  
84  .logo { 
85    font-size: 1.5rem; 
86    font-weight: 700; 
87    color: #6366f1; 
88    display: flex;
89    align-items: center;
90  }
91  
92  .logo img { 
93    height: 80px;
94    width: auto;
95    max-width: 320px;
96    display: block;
97  }
98  
99  .site-title { 
100    display: none; 
101    font-weight: 700; 
102    color: #6366f1; 
103    letter-spacing: 0.2px; 
104  }
105  
106  .nav-links { 
107    display: flex; 
108    list-style: none; 
109    gap: 2rem; 
110  }
111  
112  .nav-links a { 
113    text-decoration: none; 
114    color: #333; 
115    font-weight: 500; 
116  }
117  
118  .nav-links a:hover { 
119    color: #6366f1; 
120  }
121  
122  .mobile-menu-btn { 
123    display: none; 
124    flex-direction: column;
125    cursor: pointer;
126    padding: 5px;
127    background: none;
128    border: none;
129  }
130  
131  .mobile-menu-btn span {
132    width: 25px;
133    height: 3px;
134    background: #333;
135    margin: 3px 0;
136    transition: 0.3s;
137    border-radius: 2px;
138  }
139  
140  header .donate-btn { 
141    margin-top: 0; 
142    margin-bottom: 0; 
143  }
144
145  /* Mobile / tablet styles */
146  @media (max-width: 992px) {
147    :root { --header-h: 84px; }
148    
149    nav {
150      position: relative;
151      display: grid;
152      grid-template-columns: 1fr auto 1fr;
153      align-items: center;
154      gap: 0.9rem;
155    }
156    
157    .logo { 
158      justify-self: start; 
159      grid-column: 1; 
160    }
161    
162    .site-title { 
163      display: block; 
164      grid-column: 2; 
165      justify-self: center; 
166      font-size: 1.125rem; 
167    }
168    
169    header .donate-btn { 
170      display: none; 
171    }
172    
173    .mobile-menu-btn { 
174      justify-self: end; 
175      display: flex; 
176      grid-column: 3; 
177    }
178    
179    .nav-links { 
180      display: none; 
181      position: absolute;
182      top: 100%;
183      right: 0;
184      left: auto;
185      min-width: 220px;
186      background: rgba(255, 255, 255, 0.98);
187      backdrop-filter: blur(10px);
188      flex-direction: column;
189      gap: 0;
190      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
191      border-radius: 12px;
192      padding: 0.5rem 0;
193      transform: translateY(-10px);
194      opacity: 0;
195      visibility: hidden;
196      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
197      z-index: 999;
198    }
199    
200    .nav-links.active { 
201      display: flex; 
202      transform: translateY(0);
203      opacity: 1;
204      visibility: visible;
205    }
206    
207    .nav-links li {
208      padding: 0;
209      border-bottom: 1px solid rgba(0,0,0,0.06);
210    }
211    
212    .nav-links li:last-child { 
213      border-bottom: none; 
214    }
215    
216    .nav-links a {
217      display: block;
218      width: 100%;
219      padding: 0.8rem 1rem;
220      font-size: 1rem;
221    }
222    
223    .logo img { 
224      height: 70px; 
225      max-width: 260px; 
226    }
227    
228    nav { 
229      padding: 12px 0; 
230    }
231
232  }
233
234  /* Buttons */
235  .donate-btn {
236    background: linear-gradient(135deg, #6366f1, #8b5cf6);
237    color: white;
238    padding: 0.75rem 1.5rem;
239    border-radius: 50px;
240    text-decoration: none;
241    font-weight: 600;
242    transition: all 0.3s ease;
243    display: inline-block;
244  }
245  
246  .donate-btn:hover {
247    box-shadow: 0 10px 25px rgba(99,102,241,0.45);
248    transform: translateY(-2px);
249  }
250
251  .cta-btn {
252    display: inline-block;
253    padding: 1rem 2rem;
254    border-radius: 50px;
255    text-decoration: none;
256    font-weight: 700;
257    font-size: 1.1rem;
258    transition: all 0.3s ease;
259    margin: 0.5rem;
260  }
261
262  .cta-primary {
263    background: #fff;
264    color: #6366f1;
265    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
266  }
267
268  .cta-primary:hover {
269    transform: translateY(-2px);
270    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
271  }
272
273  .cta-secondary {
274    background: rgba(255,255,255,0.2);
275    color: #fff;
276    border: 2px solid rgba(255,255,255,0.5);
277  }
278
279  .cta-secondary:hover {
280    background: rgba(255,255,255,0.3);
281    transform: translateY(-2px);
282  }
283
284  /* Hero */
285  .hero {
286    padding: 90px 0 56px;
287    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
288    color: white; 
289    text-align: center; 
290    position: relative; 
291    overflow: hidden;
292  }
293  
294  .hero h1 { 
295    font-size: clamp(2.4rem, 3.5vw + 1rem, 3.5rem); 
296    font-weight: 800; 
297    margin-bottom: 1rem; 
298  }
299  
300  .hero-subtitle { 
301    font-size: 1.125rem; 
302    margin-bottom: 2rem; 
303    opacity: 0.95; 
304    max-width: 800px;
305    margin-left: auto;
306    margin-right: auto;
307  }
308
309  /* Sections */
310  .section-padding { padding: 56px 0; }
311  
312  .section-header { 
313    text-align: center; 
314    margin-bottom: 3rem; 
315  }
316  
317  .section-title { 
318    font-size: clamp(2rem, 1.5vw + 1rem, 2.5rem); 
319    font-weight: 700; 
320    color: #1e293b; 
321    margin-bottom: 1rem; 
322  }
323  
324  .section-subtitle { 
325    font-size: 1.05rem; 
326    color: #64748b; 
327    max-width: 800px; 
328    margin: 0 auto; 
329    line-height: 1.7;
330  }
331
332  /* Story (dark blue background) */
333  .story-dark { 
334    padding: 56px 0; 
335    background: #1e293b; 
336    color: white; 
337    text-align: center; 
338  }
339  
340  .story-content {
341    display: grid;
342    grid-template-columns: 1fr 1fr;
343    gap: 4rem;
344    align-items: center;
345    text-align: left;
346  }
347
348  .story-text p {
349    font-size: 1.05rem; 
350    color: rgba(255,255,255,0.9); 
351    margin-bottom: 1rem; 
352    line-height: 1.7;
353  }
354  
355  .story-image img {
356    max-width: 100%;
357    height: auto;
358    border-radius: 15px;
359  }
360
361  /* Initiatives */
362  .initiatives {
363    padding: 56px 0;
364    background: #ffffff;
365  }
366
367  .initiatives-grid {
368    display: grid;
369    grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
370    gap: 2rem;
371    margin-top: 3rem;
372  }
373
374  .initiative-card {
375    background: white;
376    padding: 2rem;
377    border-radius: 15px;
378    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
379    transition: transform 0.3s ease;
380  }
381
382  .initiative-card .card-logo {
383    height: 48px;
384    width: auto;
385    max-width: 160px;
386    display: block;
387    margin-bottom: 1rem;
388    object-fit: contain;
389  }
390
391  .initiative-card:hover {
392    transform: translateY(-5px);
393    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
394  }
395
396  .initiative-card h3 {
397    color: #1e293b;
398    margin-bottom: 1rem;
399    font-size: 1.25rem;
400  }
401
402  .initiative-card p {
403    color: #64748b;
404    margin-bottom: 1.5rem;
405  }
406
407  .card-link {
408    color: #6366f1;
409    text-decoration: none;
410    font-weight: 600;
411    display: inline-flex;
412    align-items: center;
413    gap: 0.5rem;
414  }
415
416  .card-link:hover {
417    text-decoration: underline;
418  }
419
420  /* Support Section */
421  .support-section {
422    padding: 56px 0 10px;
423    background: #fff;
424  }
425
426  .support-content {
427    max-width: 1200px;
428    margin: 0 auto;
429    display: grid;
430    grid-template-columns: 1fr 1fr;
431    gap: 4rem;
432    align-items: start;
433    text-align: left;
434  }
435
436  /* .support-text { align-self: center; } Removed to fix alignment */
437
438  .support-text .section-title {
439    text-align: left;
440  }
441
442  .support-list {
443    list-style: none;
444    padding: 0;
445    margin: 2rem 0;
446    text-align: left;
447  }
448
449  .givebutter-embed {
450    display: flex;
451    justify-content: center;
452    width: 100%;
453    margin-top: 5rem;
454  }
455
456  @media (max-width: 900px) {
457    .support-content {
458      grid-template-columns: 1fr;
459      text-align: center;
460      gap: 2rem;
461    }
462
463    .givebutter-embed {
464      margin-top: 0;
465    }
466    
467    .support-text .section-title {
468      text-align: center;
469    }
470    
471    .support-list {
472      display: inline-block;
473      text-align: left;
474      margin: 2rem auto;
475    }
476  }
477
478  .support-list li {
479    margin-bottom: 0.75rem;
480    padding-left: 1.5rem;
481    position: relative;
482    color: #475569;
483  }
484
485  .support-list li::before {
486    content: "•";
487    color: #6366f1;
488    font-weight: bold;
489    position: absolute;
490    left: 0;
491  }
492
493  .newsletter-section {
494    padding: 56px 0;
495    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
496    text-align: center;
497  }
498
499  .transparency-note {
500    font-size: 0.9rem;
501    color: #94a3b8;
502    margin: 2rem 0;
503  }
504
505  /* Contact section */
506  .contact { 
507    padding: 10px 0 20px; 
508    background: #f1f5f9; 
509    text-align: center; 
510  }
511  
512  .contact-info { 
513    display: grid; 
514    grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); 
515    gap: 2rem; 
516    margin: 3rem 0 0; 
517  }
518  
519  .contact-card { 
520    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
521    color: white; 
522    padding: 2rem; 
523    border-radius: 15px; 
524    box-shadow: 0 5px 20px rgba(0,0,0,0.08); 
525  }
526  
527  .contact-card h4 { 
528    color: white; 
529    margin-bottom: 1rem; 
530    font-size: 1.2rem;
531  }
532  
533  .contact-card p, .contact-card a { 
534    color: rgba(255,255,255,0.9); 
535    text-decoration: none;
536  }
537
538  @keyframes bounce-glow {
539    0%, 100% { transform: translateY(0); box-shadow: 0 5px 20px rgba(0,0,0,0.08); }
540    50% { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(99, 102, 241, 0.6); }
541  }
542  
543  .contact-card.clickable {
544    animation: bounce-glow 3s infinite ease-in-out;
545    cursor: pointer;
546    position: relative;
547    overflow: hidden;
548  }
549  
550  .contact-card.clickable::after {
551    content: '';
552    position: absolute;
553    top: 0; left: 0; right: 0; bottom: 0;
554    border-radius: 15px;
555    box-shadow: inset 0 0 20px rgba(255,255,255,0.3);
556    pointer-events: none;
557  }
558
559  /* RSS Feed Section */
560  .rss-feed-section {
561    padding: 56px 0;
562    background: #f8fafc;
563  }
564  
565  .rss-grid {
566    display: grid;
567    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
568    gap: 2rem;
569    margin-top: 2rem;
570  }
571  
572  .rss-card {
573    background: white;
574    border-radius: 12px;
575    overflow: hidden;
576    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
577    transition: transform 0.3s ease, box-shadow 0.3s ease;
578    display: flex;
579    flex-direction: column;
580    height: 100%;
581    text-decoration: none;
582    color: inherit;
583  }
584  
585  .rss-card:hover {
586    transform: translateY(-5px);
587    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
588  }
589  
590  .rss-image {
591    height: 200px;
592    background-size: cover;
593    background-position: center;
594    background-color: #e2e8f0;
595  }
596  
597  .rss-content {
598    padding: 1.5rem;
599    flex-grow: 1;
600    display: flex;
601    flex-direction: column;
602  }
603  
604  .rss-date {
605    font-size: 0.85rem;
606    color: #64748b;
607    margin-bottom: 0.5rem;
608  }
609  
610  .rss-title {
611    font-size: 1.25rem;
612    font-weight: 700;
613    margin-bottom: 0.75rem;
614    color: #1e293b;
615    line-height: 1.4;
616  }
617  
618  .rss-description {
619    font-size: 0.95rem;
620    color: #475569;
621    line-height: 1.6;
622    display: -webkit-box;
623    -webkit-line-clamp: 3;
624    line-clamp: 3;
625    -webkit-box-orient: vertical;
626    overflow: hidden;
627  }
628
629  /* Footer */
630  footer { 
631    background: #1e293b; 
632    color: white; 
633    text-align: center; 
634    padding: 2rem 0; 
635  }
636
637  .footer-social-links {
638    display: flex;
639    justify-content: center;
640    gap: 1.5rem;
641    margin-bottom: 1.5rem;
642  }
643
644  .footer-social-link {
645    display: inline-flex;
646    align-items: center;
647    justify-content: center;
648    width: 40px;
649    height: 40px;
650    background: rgba(255, 255, 255, 0.1);
651    border-radius: 50%;
652    color: white;
653    transition: all 0.3s ease;
654  }
655
656  .footer-social-link:hover {
657    background: rgba(255, 255, 255, 0.2);
658    transform: translateY(-2px);
659  }
660
661  .footer-social-link svg {
662    width: 20px;
663    height: 20px;
664    fill: currentColor;
665  }
666
667  @media (max-width: 900px) {
668    .story-content { 
669      display: flex; 
670      flex-direction: column; 
671      gap: 2rem; 
672    }
673    .story-image { order: 0; }
674  }
675
676  /* Mobile Donate Footer */
677  .mobile-donate-footer { 
678    display: none; 
679  }
680
681  .footer-hidden .mobile-donate-footer { 
682    opacity: 0; 
683    pointer-events: none; 
684  }
685
686  @media (max-width: 992px) {
687    /* Fixed mobile donate footer */
688    .mobile-donate-footer {
689      display: flex;
690      position: fixed;
691      left: 0; 
692      right: 0; 
693      bottom: 0;
694      z-index: 1002;
695      justify-content: center;
696      background: rgba(241,245,249,0.96);
697      backdrop-filter: blur(10px);
698      border-top: 1px solid rgba(0,0,0,0.12);
699      padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
700      transition: opacity 0.2s ease;
701    }
702    
703    .mobile-donate-footer .container { 
704      width: 100%; 
705      display: flex; 
706      justify-content: center; 
707    }
708    
709    .mobile-donate-footer .donate-btn {
710      margin: 0;
711      padding: 0.68rem 1.2rem;
712      font-size: 1rem;
713    }
714    
715    body { 
716      padding-bottom: calc(86px + env(safe-area-inset-bottom)); 
717    }
718  }
719</style>
720  <style type="text/css">@import url("https://assets.mlcdn.com/fonts.css?version=1766132");</style>
721  <style type="text/css">
722    /* LOADER */
723    .ml-form-embedSubmitLoad {
724      display: inline-block;
725      width: 20px;
726      height: 20px;
727    }
728
729    .g-recaptcha {
730    transform: scale(1);
731    -webkit-transform: scale(1);
732    transform-origin: 0 0;
733    -webkit-transform-origin: 0 0;
734    }
735
736    .sr-only {
737      position: absolute;
738      width: 1px;
739      height: 1px;
740      padding: 0;
741      margin: -1px;
742      overflow: hidden;
743      clip: rect(0,0,0,0);
744      border: 0;
745    }
746
747    .ml-form-embedSubmitLoad:after {
748      content: " ";
749      display: block;
750      width: 11px;
751      height: 11px;
752      margin: 1px;
753      border-radius: 50%;
754      border: 4px solid #fff;
755    border-color: #ffffff #ffffff #ffffff transparent;
756    animation: ml-form-embedSubmitLoad 1.2s linear infinite;
757    }
758    @keyframes ml-form-embedSubmitLoad {
759      0% {
760      transform: rotate(0deg);
761      }
762      100% {
763      transform: rotate(360deg);
764      }
765    }
766      #mlb2-35030211.ml-form-embedContainer {
767        box-sizing: border-box;
768        display: table;
769        margin: 0 auto;
770        position: static;
771        width: 100% !important;
772      }
773      #mlb2-35030211.ml-form-embedContainer h4,
774      #mlb2-35030211.ml-form-embedContainer p,
775      #mlb2-35030211.ml-form-embedContainer span,
776      #mlb2-35030211.ml-form-embedContainer button {
777        text-transform: none !important;
778        letter-spacing: normal !important;
779      }
780      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper {
781        background-color: #ffffff;
782        border: none !important;
783        border-radius: 15px;
784        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
785        box-sizing: border-box;
786        display: inline-block !important;
787        margin: 0;
788        padding: 0;
789        position: relative;
790              }
791      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper.embedPopup,
792      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper.embedDefault { width: 400px; }
793      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper.embedForm { max-width: 400px; width: 100%; }
794      #mlb2-35030211.ml-form-embedContainer .ml-form-align-left { text-align: left; }
795      #mlb2-35030211.ml-form-embedContainer .ml-form-align-center { text-align: center; }
796      #mlb2-35030211.ml-form-embedContainer .ml-form-align-default { display: table-cell !important; vertical-align: middle !important; text-align: center !important; }
797      #mlb2-35030211.ml-form-embedContainer .ml-form-align-right { text-align: right; }
798      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedHeader img {
799        border-top-left-radius: 4px;
800        border-top-right-radius: 4px;
801        height: auto;
802        margin: 0 auto !important;
803        max-width: 100%;
804        width: undefinedpx;
805      }
806      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
807      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
808        padding: 20px 20px 0 20px;
809      }
810      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody.ml-form-embedBodyHorizontal {
811        padding-bottom: 0;
812      }
813      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent,
814      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent {
815        text-align: left;
816        margin: 0 0 20px 0;
817      }
818      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h4,
819      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4 {
820        color: #1e293b;
821        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
822        font-size: 1.5rem;
823        font-weight: 700;
824        margin: 0 0 0.5rem 0;
825        text-align: center;
826        word-break: break-word;
827      }
828      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p,
829      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
830        color: #64748b;
831        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
832        font-size: 1rem;
833        font-weight: 400;
834        line-height: 1.6;
835        margin: 0 0 1.5rem 0;
836        text-align: center;
837      }
838      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ul,
839      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol,
840      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ul,
841      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol {
842        color: #64748b;
843        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
844        font-size: 14px;
845      }
846      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol ol,
847      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol ol {
848        list-style-type: lower-alpha;
849      }
850      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol ol ol,
851      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol ol ol {
852        list-style-type: lower-roman;
853      }
854      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p a,
855      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p a {
856        color: #000000;
857        text-decoration: underline;
858      }
859
860      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group {
861        text-align: left!important;
862      }
863
864      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group label {
865        margin-bottom: 5px;
866        color: #333333;
867        font-size: 14px;
868        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
869        font-weight: bold; font-style: normal; text-decoration: none;;
870        display: inline-block;
871        line-height: 20px;
872      }
873      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p:last-child,
874      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p:last-child {
875        margin: 0;
876      }
877      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody form {
878        margin: 0;
879        width: 100%;
880      }
881      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent,
882      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow {
883        margin: 0 0 20px 0;
884        width: 100%;
885      }
886      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow {
887        float: left;
888      }
889      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent.horozintalForm {
890        margin: 0;
891        padding: 0 0 20px 0;
892        width: 100%;
893        height: auto;
894        float: left;
895      }
896      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow {
897        margin: 0 0 10px 0;
898        width: 100%;
899      }
900      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-last-item {
901        margin: 0;
902      }
903      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-formfieldHorizintal {
904        margin: 0;
905      }
906      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
907        background-color: #ffffff !important;
908        color: #1e293b !important;
909        border-color: #e2e8f0;
910        border-radius: 8px !important;
911        border-style: solid !important;
912        border-width: 1px !important;
913        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
914        font-size: 1rem !important;
915        height: auto;
916        line-height: 1.5 !important;
917        margin-bottom: 0;
918        margin-top: 0;
919        margin-left: 0;
920        margin-right: 0;
921        padding: 0.75rem 1rem !important;
922        width: 100% !important;
923        box-sizing: border-box !important;
924        max-width: 100% !important;
925        transition: border-color 0.3s ease;
926      }
927      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:focus {
928        border-color: #6366f1 !important;
929        outline: none;
930      }
931      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-webkit-input-placeholder,
932      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input::-webkit-input-placeholder { color: #333333; }
933
934      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-moz-placeholder,
935      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input::-moz-placeholder { color: #333333; }
936
937      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:-ms-input-placeholder,
938      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input:-ms-input-placeholder { color: #333333; }
939
940      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:-moz-placeholder,
941      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input:-moz-placeholder { color: #333333; }
942
943      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow textarea, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow textarea {
944        background-color: #ffffff !important;
945        color: #333333 !important;
946        border-color: #cccccc;
947        border-radius: 8px !important;
948        border-style: solid !important;
949        border-width: 1px !important;
950        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
951        font-size: 14px !important;
952        height: auto;
953        line-height: 21px !important;
954        margin-bottom: 0;
955        margin-top: 0;
956        padding: 10px 10px !important;
957        width: 100% !important;
958        box-sizing: border-box !important;
959        max-width: 100% !important;
960      }
961
962      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before {
963          border-color: #cccccc!important;
964          background-color: #ffffff!important;
965      }
966
967      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input.custom-control-input[type="checkbox"]{
968        box-sizing: border-box;
969        padding: 0;
970        position: absolute;
971        z-index: -1;
972        opacity: 0;
973        margin-top: 5px;
974        margin-left: -1.5rem;
975        overflow: visible;
976      }
977
978      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before {
979        border-radius: 4px!important;
980      }
981
982
983      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type=checkbox]:checked~.label-description::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox input[type=checkbox]:checked~.label-description::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-input:checked~.custom-control-label::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-input:checked~.custom-control-label::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox input[type=checkbox]:checked~.label-description::after {
984        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
985      }
986
987      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input:checked~.custom-control-label::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input:checked~.custom-control-label::after {
988        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
989      }
990
991      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-input:checked~.custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-input:checked~.custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox input[type=checkbox]:checked~.label-description::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox input[type=checkbox]:checked~.label-description::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type=checkbox]:checked~.label-description::before  {
992          border-color: #6366f1!important;
993          background-color: #6366f1!important;
994      }
995
996      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::after {
997           top: 2px;
998           box-sizing: border-box;
999      }
1000
1001      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after {
1002           top: 0px!important;
1003           box-sizing: border-box!important;
1004      }
1005
1006      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after {
1007        top: 0px!important;
1008           box-sizing: border-box!important;
1009      }
1010
1011       #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::after {
1012            top: 0px!important;
1013            box-sizing: border-box!important;
1014            position: absolute;
1015            left: -1.5rem;
1016            display: block;
1017            width: 1rem;
1018            height: 1rem;
1019            content: "";
1020       }
1021
1022      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before {
1023        top: 0px!important;
1024        box-sizing: border-box!important;
1025      }
1026
1027      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-control-label::before {
1028          position: absolute;
1029          top: 4px;
1030          left: -1.5rem;
1031          display: block;
1032          width: 16px;
1033          height: 16px;
1034          pointer-events: none;
1035          content: "";
1036          background-color: #ffffff;
1037          border: #adb5bd solid 1px;
1038          border-radius: 50%;
1039      }
1040
1041      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-control-label::after {
1042          position: absolute;
1043          top: 2px!important;
1044          left: -1.5rem;
1045          display: block;
1046          width: 1rem;
1047          height: 1rem;
1048          content: "";
1049      }
1050
1051      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before {
1052          position: absolute;
1053          top: 4px;
1054          left: -1.5rem;
1055          display: block;
1056          width: 16px;
1057          height: 16px;
1058          pointer-events: none;
1059          content: "";
1060          background-color: #ffffff;
1061          border: #adb5bd solid 1px;
1062          border-radius: 50%;
1063      }
1064
1065      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after {
1066          position: absolute;
1067          top: 0px!important;
1068          left: -1.5rem;
1069          display: block;
1070          width: 1rem;
1071          height: 1rem;
1072          content: "";
1073      }
1074
1075      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after {
1076          position: absolute;
1077          top: 0px!important;
1078          left: -1.5rem;
1079          display: block;
1080          width: 1rem;
1081          height: 1rem;
1082          content: "";
1083      }
1084
1085      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-radio .custom-control-label::after {
1086          background: no-repeat 50%/50% 50%;
1087      }
1088      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-checkbox .custom-control-label::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after {
1089          background: no-repeat 50%/50% 50%;
1090      }
1091
1092      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-control, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-control {
1093        position: relative;
1094        display: block;
1095        min-height: 1.5rem;
1096        padding-left: 1.5rem;
1097      }
1098
1099      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-input, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-input, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-input {
1100          position: absolute;
1101          z-index: -1;
1102          opacity: 0;
1103          box-sizing: border-box;
1104          padding: 0;
1105      }
1106
1107      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label {
1108          color: #000000;
1109          font-size: 12px!important;
1110          font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1111          line-height: 22px;
1112          margin-bottom: 0;
1113          position: relative;
1114          vertical-align: top;
1115          font-style: normal;
1116          font-weight: 700;
1117      }
1118
1119      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-select, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-select {
1120        background-color: #ffffff !important;
1121        color: #333333 !important;
1122        border-color: #cccccc;
1123        border-radius: 4px !important;
1124        border-style: solid !important;
1125       
1125 border-width: 1px !important;
1126        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1127        font-size: 14px !important;
1128        line-height: 20px !important;
1129        margin-bottom: 0;
1130        margin-top: 0;
1131        padding: 10px 28px 10px 12px !important;
1132        width: 100% !important;
1133        box-sizing: border-box !important;
1134        max-width: 100% !important;
1135        height: auto;
1136        display: inline-block;
1137        vertical-align: middle;
1138        background: url('https://assets.mlcdn.com/ml/images/default/dropdown.svg') no-repeat right .75rem center/8px 10px;
1139        -webkit-appearance: none;
1140        -moz-appearance: none;
1141        appearance: none;
1142      }
1143
1144
1145      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow {
1146        height: auto;
1147        width: 100%;
1148        float: left;
1149      }
1150      .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal { width: 70%; float: left; }
1151      .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-button-horizontal { width: 30%; float: left; }
1152      .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-button-horizontal.labelsOn { padding-top: 25px;  }
1153      .ml-form-formContent.horozintalForm .ml-form-horizontalRow .horizontal-fields { box-sizing: border-box; float: left; padding-right: 10px;  }
1154      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input {
1155        background-color: #ffffff;
1156        color: #333333;
1157        border-color: #cccccc;
1158        border-radius: 4px;
1159        border-style: solid;
1160        border-width: 1px;
1161        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1162        font-size: 14px;
1163        line-height: 20px;
1164        margin-bottom: 0;
1165        margin-top: 0;
1166        padding: 10px 10px;
1167        width: 100%;
1168        box-sizing: border-box;
1169        overflow-y: initial;
1170      }
1171      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button {
1172        background-color: #691fff !important;
1173        border-color: #691fff;
1174        border-style: solid;
1175        border-width: 1px;
1176        border-radius: 4px;
1177        box-shadow: none;
1178        color: #ffffff !important;
1179        cursor: pointer;
1180        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1181        font-size: 14px !important;
1182        font-weight: 700;
1183        line-height: 20px;
1184        margin: 0 !important;
1185        padding: 10px !important;
1186        width: 100%;
1187        height: auto;
1188      }
1189      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button:hover {
1190        background-color: #ac63ff !important;
1191        border-color: #ac63ff !important;
1192      }
1193      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type="checkbox"] {
1194        box-sizing: border-box;
1195        padding: 0;
1196        position: absolute;
1197        z-index: -1;
1198        opacity: 0;
1199        margin-top: 5px;
1200        margin-left: -1.5rem;
1201        overflow: visible;
1202      }
1203      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description {
1204        color: #000000;
1205        display: block;
1206        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1207        font-size: 12px;
1208        text-align: left;
1209        margin-bottom: 0;
1210        position: relative;
1211      }
1212      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label {
1213        font-weight: normal;
1214        margin: 0;
1215        padding: 0;
1216        position: relative;
1217        display: block;
1218        min-height: 24px;
1219        padding-left: 24px;
1220
1221      }
1222      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label a {
1223        color: #000000;
1224        text-decoration: underline;
1225      }
1226      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p {
1227        color: #000000 !important;
1228        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
1229        font-size: 12px !important;
1230        font-weight: normal !important;
1231        line-height: 18px !important;
1232        padding: 0 !important;
1233        margin: 0 5px 0 0 !important;
1234      }
1235      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p:last-child {
1236        margin: 0;
1237      }
1238      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit {
1239        margin: 0 0 20px 0;
1240        float: left;
1241        width: 100%;
1242      }
1243      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
1244        background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
1245        border: none !important;
1246        border-radius: 50px !important;
1247        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
1248        color: #ffffff !important;
1249        cursor: pointer;
1250        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
1251        font-size: 1rem !important;
1252        font-weight: 600 !important;
1253        line-height: 1.5 !important;
1254        height: auto;
1255        padding: 0.75rem 1.5rem !important;
1256        width: 100% !important;
1257        box-sizing: border-box !important;
1258        transition: all 0.3s ease !important;
1259      }
1260      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.loading {
1261        display: none;
1262      }
1263      .ml-subscribe-close {
1264        width: 30px;
1265        height: 30px;
1266        background: url('https://assets.mlcdn.com/ml/images/default/modal_
1266close.png') no-repeat;
1267        background-size: 30px;
1268        cursor: pointer;
1269        margin-top: -10px;
1270        margin-right: -10px;
1271        position: absolute;
1272        top: 0;
1273        right: 0;
1274      }
1275      .ml-error input, .ml-error textarea, .ml-error select {
1276        border-color: red!important;
1277      }
1278
1279      .ml-error .custom-checkbox-radio-list {
1280        border: 1px solid red !important;
1281        border-radius: 4px;
1282        padding: 10px;
1283      }
1284
1285      .ml-error .label-description,
1286      .ml-error .label-description p,
1287      .ml-error .label-description p a,
1288      .ml-error label:first-child {
1289        color: #ff0000 !important;
1290      }
1291
1292      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow.ml-error .label-description p,
1293      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow.ml-error .label-description p:first-letter {
1294        color: #ff0000 !important;
1295      }
1296            @media only screen and (max-width: 400px){
1297
1298        .ml-form-embedWrapper.embedDefault, .ml-form-embedWrapper.embedPopup { width: 100%!important; }
1299        .ml-form-formContent.horozintalForm { float: left!important; }
1300        .ml-form-formContent.horozintalForm .ml-form-horizontalRow { height: auto!important; width: 100%!important; float: left!important; }
1301        .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal { width: 100%!important; }
1302        .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal > div { padding-right: 0px!important; padding-bottom: 10px; }
1303        .ml-form-formContent.horozintalForm .ml-button-horizontal { width: 100%!important; }
1304        .ml-form-formContent.horozintalForm .ml-button-horizontal.labelsOn { padding-top: 0px!important; }
1305
1306      }
1307    </style>
1308    <style type="text/css">
1309      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions { text-align: left; float: left; width: 100%; }
1310      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent {
1311        margin: 0 0 15px 0;
1312        text-align: left;
1313      }
1314      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent.horizontal {
1315        margin: 0 0 15px 0;
1316      }
1317      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent h4 {
1318        color: #000000;
1319        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1320        font-size: 12px;
1321        font-weight: 700;
1322        line-height: 18px;
1323        margin: 0 0 10px 0;
1324        word-break: break-word;
1325      }
1326      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent p {
1327        color: #000000;
1328        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1329        font-size: 12px;
1330        line-height: 18px;
1331        margin: 0 0 10px 0;
1332      }
1333
1334      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent.privacy-policy p {
1335        color: #000000;
1336        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1337        font-size: 12px;
1338        line-height: 22px;
1339        margin: 0 0 10px 0;
1340      }
1341
1342      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent.privacy-policy p a {
1343        color: #6366f1;
1344      }
1345
1346      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent.privacy-policy p:last-child {
1347        margin: 0;
1348      }
1349
1350      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptions {
1351        margin: 0;
1352        padding: 0;
1353      }
1354      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox {
1355        margin: 0 0 10px 0;
1356      }
1357      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox:last-child {
1358        margin: 0;
1359      }
1360      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox label {
1361        font-weight: normal;
1362        margin: 0;
1363        padding: 0;
1364        position: relative;
1365        display: block;
1366        min-height: 24px;
1367        padding-left: 24px;
1368      }
1369      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description {
1370        color: #000000;
1371        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1372        font-size: 12px;
1373        line-height: 18px;
1374        text-align: left;
1375        margin-bottom: 0;
1376        position: relative;
1377        font-style: normal;
1378        font-weight: 700;
1379      }
1380      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .description {
1381        color: #000000;
1382        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1383        font-size: 12px;
1384        font-style: italic;
1385        font-weight: 400;
1386        line-height: 18px;
1387        margin: 5px 0 0 0;
1388      }
1389      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedMailerLite-GDPR {
1390        padding-bottom: 20px;
1391      }
1392      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedMailerLite-GDPR p {
1393        color: #000000;
1394        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1395        font-size: 10px;
1396        line-height: 14px;
1397        margin: 0;
1398        padding: 0;
1399      }
1400      #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedMailerLite-GDPR p a {
1401        color: #000000;
1402        text-decoration: underline;
1403
1404      }
1405      @media (max-width: 768px) {
1406        #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent p {
1407          font-size: 12px !important;
1408          line-height: 18px !important;
1409        }
1410        #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedMailerLite-GDPR p {
1411          font-size: 10px !important;
1412          line-height: 14px !important;
1413        }
1414      }
1415    </style>
1416</head>
1417<body>
1418  <a href="#main" class="skip-link">Skip to main content</a>
1419
1420  <header>
1421    <nav class="container">
1422      <div class="logo">
1423        <a aria-label="Home" href="index.html">
1424          <img alt="NARBE Foundation Logo" src="https://raw.githubusercontent.com/narbefoundation/images/refs/heads/main/purple%20more%20space.png"/>
1425        </a>
1426      </div>
1427      <div class="site-title">NARBE Foundation</div>
1428      <ul class="nav-links" id="nav-links" role="navigation" aria-label="Main navigation">
1429        <li><a href="index.html" aria-current="page">Home</a></li>
1430        <li><a href="#founder">Founder</a></li>
1431        <li><a href="#projects">Projects</a></li>
1432        <li><a href="#news">News</a></li>
1433        <li><a href="resources.html">Resources</a></li>
1434        <li><a href="#contact">Contact</a></li>
1435      </ul>
1436      <button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="nav-links">
1437        <span aria-hidden="true"></span>
1438        <span aria-hidden="true"></span>
1439        <span aria-hidden="true"></span>
1440      </button>
1441      <a class="donate-btn" href="#support">Donate</a>
1442    </nav>
1443  </header>
1444
1445  <main id="main">
1446    <section class="hero">
1447      <div class="container">
1448        <h1>Our Mission</h1>
1449        <p class="hero-subtitle">NARBE Foundation invests in projects that prove people with complex needs deserve autonomy, connection, and choice. We support the builders and share what works.</p>
1450
1451        <div style="margin-top: 1rem;">
1452          <a href="#projects" class="cta-btn cta-primary">See Our Projects</a>
1453          <a href="#support" class="cta-btn cta-secondary">Support Our Work</a>
1454        </div>
1455      </div>
1456    </section>
1457
1458    <section class="story-dark" id="founder">
1459      <div class="container">
1460        <div class="story-content">
1461          <div class="story-text">
1462            <h2 class="section-title" style="color:#fff;">Founders' Story</h2>
1463            <p>We are Ari, Nancy, and Ben — a family, and a team. Ben lives with an ultra-rare condition called TUBB4A-related leukodystrophy. As his condition progressed, he became nonspeaking and quadriplegic, leaving him with very limited options for interaction.</p>
1464            <p>When we searched for tools to help Ben, most focused only on basic communication. Ben wanted more — to play games, browse the internet, watch his favorite shows, and truly connect with the world. So, we built our own custom two-button system that Ben controls with his head.</p>
1465            <p>Our focus is now on sharing these games and tools, optimized specifically for one and two button users, so others can find the same joy and connection.</p>
1466          </div>
1467          <div class="story-image">
1468            <img alt="NARBE Foundation Family" src="https://raw.githubusercontent.com/narbefoundation/images/main/website-family.png">
1469          </div>
1470        </div>
1471      </div>
1472    </section>
1473
1474    <section class="initiatives" id="projects">
1475      <div class="container">
1476        <div class="section-header">
1477          <h2 class="section-title">Our Projects</h2>
1478          <p class="section-subtitle">NARBE Foundation supports independent projects that advance switch access. Here's what we're backing right now.</p>
1479        </div>
1480        <div class="initiatives-grid">
1481          <div class="initiative-card">
1482            <img class="card-logo" src="images/branding/beamin-benny.png" alt="Benny's Hub logo" />
1483            <h3>Benny's Hub</h3>
1484            <p>The project that started it all. Built specifically for Ben — nonspeaking, quadriplegic, with two-button access — and released for anyone to use. Available as a free web app, and the Electron App is available on GitHub.</p>
1485            <a href="https://narbehouse.github.io/bennyshub" target="_blank" rel="noopener" class="card-link">Explore Benny's Hub &rarr;</a>
1486          </div>
1487          <div class="initiative-card">
1488            <img class="card-logo" src="images/logos/switchedgames_emblem_v5.svg" alt="SwitchedGames logo" />
1489            <h3>SwitchedGames</h3>
1490            <p>A growing library of free one and two switch games, built by NARBE House and a community of volunteers. Play free in your browser and explore games designed for one and two switch access.</p>
1491            <a href="https://switchedgames.org" target="_blank" rel="noopener" class="card-link">Explore SwitchedGames &rarr;</a>
1492          </div>
1493          <div class="initiative-card">
1494            <svg class="card-logo" viewBox="0 0 64 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
1495              <circle cx="16" cy="16" r="14" fill="#ef4444"/>
1496              <circle cx="16" cy="16" r="14" fill="none" stroke="#b91c1c" stroke-width="2"/>
1497              <ellipse cx="11" cy="10" rx="5" ry="3" fill="#ffffff" opacity="0.35"/>
1498              <circle cx="48" cy="16" r="14" fill="#3b82f6"/>
1499              <circle cx="48" cy="16" r="14" fill="none" stroke="#1d4ed8" stroke-width="2"/>
1500              <ellipse cx="43" cy="10" rx="5" ry="3" fill="#ffffff" op
1500acity="0.35"/>
1501            </svg>
1502            <h3>Adaptive Switch Kit Program</h3>
1503            <p>Free 2-button switch kits for recreational use, funded entirely by our community and partners. Apply online — first come, first served, while supplies last.</p>
1504            <a href="switchkit.html" class="card-link">Explore the Adaptive Switch Kit Program &rarr;</a>
1505          </div>
1506          <div class="initiative-card">
1507            <h3>More Coming Soon</h3>
1508            <p>We're always looking for new ways to support this community — through grants, partnerships, and new projects. Check back as we grow.</p>
1509            <a href="#news" class="card-link">Get Updates &rarr;</a>
1510          </div>
1511        </div>
1512      </div>
1513    </section>
1514
1515    <section class="rss-feed-section" id="news">
1516      <div class="container">
1517        <div class="section-header">
1518          <h2 class="section-title">Latest Updates</h2>
1519          <p class="section-subtitle">News and announcements from the NARBE Foundation.</p>
1520        </div>
1521        <div class="rss-grid" id="rss-feed-container">
1522          <!-- RSS items will be loaded here -->
1523          <div style="grid-column: 1/-1; text-align: center; padding: 2rem; color: #64748b;">
1524            Loading updates...
1525          </div>
1526        </div>
1527        
1528        <div style="text-align: center; margin-top: 3rem;">
1529          <a href="https://narbefoundation.blogspot.com/" target="_blank" rel="noopener" class="donate-btn">View All News</a>
1530        </div>
1531      </div>
1532    </section>
1533
1534    <section class="newsletter-section" id="newsletter">
1535      <div class="container">
1536          <div id="mlb2-32971103" class="ml-form-embedContainer ml-subscribe-form ml-subscribe-form-32971103">
1537      <div class="ml-form-align-center ">
1538        <div class="ml-form-embedWrapper embedForm">
1539
1540          
1541          
1542
1543          <div class="ml-form-embedBody ml-form-embedBodyDefault row-form">
1544
1545            <div class="ml-form-embedContent">
1546              
1547                <h4>Sign Up for Updates</h4>
1548                <p style="background-color: transparent;">Get the latest news direct to your email.</p>
1549              
1550            </div>
1551
1552            <form class="ml-block-form" action="https://assets.mailerlite.com/jsonp/1901217/forms/170242737816208431/subscribe" data-code="" method="post" target="_blank">
1553              <div class="ml-form-formContent">
1554                
1555
1556                  
1557                  <div class="ml-form-fieldRow ml-last-item">
1558                    <div class="ml-field-group ml-field-email ml-validate-email ml-validate-required">
1559
1560                      
1561
1562
1563                      <!-- input -->
1564                      <input aria-label="email" aria-required="true" type="email" class="form-control" data-inputmask="" name="fields[email]" placeholder="Enter your email" autocomplete="email">
1565                      <!-- /input -->
1566
1567                      <!-- textarea -->
1568                      
1569                      <!-- /textarea -->
1570
1571                      <!-- select -->
1572                      
1573                      <!-- /select -->
1574
1575                      <!-- checkboxes -->
1576            
1577            <!-- /checkboxes -->
1578
1579                      <!-- radio -->
1580                      
1581                      <!-- /radio -->
1582
1583                      <!-- countries -->
1584                      
1585                      <!-- /countries -->
1586
1587
1588
1589
1590
1591                    </div>
1592                  </div>
1593                
1594              </div>
1595
1596              
1597
1598              <!-- reCAPTCHA (form has reCAPTCHA + double opt-in enabled in MailerLite) -->
1599              <div class="ml-form-recaptcha ml-validate-required">
1600                <style type="text/css">
1601                  #mlb2-32971103 .ml-form-recaptcha {
1602                    display: flex;
1603                    justify-content: center;
1604                    margin: 0 0 16px;
1605                  }
1606                  #mlb2-32971103 .ml-form-recaptcha.ml-error iframe {
1607                    border: solid 1px #ff0000;
1608                  }
1609                  @media screen and (max-width: 480px) {
1610                    #mlb2-32971103 .g-recaptcha {
1611                      transform: scale(0.85);
1612                      -webkit-transform: scale(0.85);
1613                      transform-origin: center top;
1614                      -webkit-transform-origin: center top;
1615                    }
1616                  }
1617                </style>
vendor: 111 bytes, lines 1617-1619
1617
1618                <script src="https://www.google.com/recaptcha/api.js" async defer></script>
1619                
1619<div class="g-recaptcha" data-sitekey="6Lf1KHQUAAAAAFNKEX1hdSWCS3mRMv4FlFaNslaD"></div>
1620              </div>
1621
1622              <input type="hidden" name="ml-submit" value="1">
1623
1624              <div class="ml-form-embedSubmit">
1625                
1626                  <button type="submit" class="primary">Subscribe</button>
1627                
1628                <button disabled="disabled" style="display: none;" type="button" class="loading">
1629                  <div class="ml-form-embedSubmitLoad"></div>
1630                  <span class="sr-only">Loading...</span>
1631                </button>
1632              </div>
1633
1634              <!-- Privacy policy -->
1635              <div class="ml-form-embedPermissions">
1636                <div class="ml-form-embedPermissionsContent default privacy-policy">
1637                  <p style="background-color: transparent;">You can unsubscribe anytime.&nbsp;</p>
1638                </div>
1639              </div>
1640              <!-- /Privacy policy -->
1641
1642              
1643              <input type="hidden" name="anticsrf" value="true">
1644            </form>
1645          </div>
1646
1647          <div class="ml-form-successBody row-success" style="display: none">
1648
1649            <div class="ml-form-successContent">
1650              
1651                <h4>Thank you!</h4>
1652                
1653                  <p>Almost done! Check your email and click the confirmation link to finish subscribing. Don&rsquo;t see it within a few minutes? Check your spam or promotions folder.</p>
1654                
1655              
1656            </div>
1657
1658          </div>
1659        </div>
1660      </div>
1661    </div>
1662
1663  
1664
1665  
1666  
1667  
1667<script>
1668    function ml_webform_success_32971103() {
1669      var $ = ml_jQuery || jQuery;
1670      $('.ml-subscribe-form-32971103 .row-success').show();
1671      $('.ml-subscribe-form-32971103 .row-form').hide();
1672    }
1673      </script>
1673
1674  
1675  
1676      
1676<script src="https://groot.mailerlite.com/js/w/webforms.min.js?v176e10baa5e7ed80d35ae235be3d5024" type="text/javascript"></script>
1676
1677        
1677<script>
1678            fetch("https://assets.mailerlite.com/jsonp/1901217/forms/170242737816208431/takel")
1679        </script>
1679
1680      </div>
1681    </section>
1682
1683    <section class="support-section" id="support">
1684      <div class="container">
1685        <div class="support-content">
1686          <div class="support-text">
1687            <h2 class="section-title">Support Us</h2>
1688            
1689            <ul class="support-list" style="margin: 1rem 0;">
1690              <li>Develop open-source games and tools for people with complex accessibility needs</li>
1691              <li>Maintain free libraries of switch-accessible games and software</li>
1692              <li>Design and distribute low-cost DIY hardware solutions</li>
1693              <li>Fund grants and partnerships with builders and organizations</li>
1694              <li>Cover hosting, infrastructure, and essential software</li>
1695              <li>Sustain this work long-term so these tools stay free and available</li>
1696            </ul>
1697
1698            <p class="transparency-note">The NARBE Foundation is a registered nonprofit. Donations fund the infrastructure that keeps our projects and community free.</p>
1699            <p style="margin-top: 1rem;"><a href="https://givebutter.com/donate-narbe" target="_blank" rel="noopener" style="color: #6366f1; font-weight: 600;">Givebutter Campaign</a></p>
1700          </div>
1701
1702          <div class="givebutter-embed">
1703            <givebutter-widget id="j2VzQj"></givebutter-widget>
1704            <noscript>
1705              <div class="fallback-message">
1706                JavaScript is required to use the embedded donation form.
1707                Please donate here:
1708                <a href="https://givebutter.com/donate-narbe">https://givebutter.com/donate-narbe</a>
1709              </div>
1710            </noscript>
1711          </div>
1712        </div>
1713      </div>
1714    </section>
1715
1716    <section class="contact" id="contact">
1717      <div class="container">
1718        <div class="section-header">
1719          <h2 class="section-title">Get In Touch</h2>
1720          <p class="section-subtitle">We'd love to hear from you.</p>
1721        </div>
1722        <div class="contact-info">
1723          <div class="contact-card">
1724            <h4>Email</h4>
1725            <p><a href="mailto:[email protected]" style="color:rgba(255,255,255,0.9); text-decoration:none;">[email protected]</a></p>
1726          </div>
1727          <a class="contact-card clickable" href="https://forms.gle/au6DDP1FExDm5DRd6" rel="noopener noreferrer" style="text-decoration: none; color: inherit;" target="_blank">
1728            <h4>Need Help?</h4>
1729            <p>Complete our intake form to get started</p>
1730          </a>
1731          <div class="contact-card">
1732            <h4>Mail and Packages</h4>
1733            <p>NARBE Foundation<br/>5775 Post Rd #149<br/>East Greenwich, RI 02818</p>
1734          </div>
1735        </div>
1736        <p style="margin-top: 2rem; color: #64748b;">To apply for a kit, visit our <a href="switchkit.html" style="color: #6366f1; font-weight: 600;">Adaptive Switch Kit Program page</a>.</p>
1737      </div>
1738    </section>
1739  </main>
1740
1741  <footer>
1742    <div class="container">
1743      <div class="footer-social-links">
1744        <a class="footer-social-link" href="https://www.facebook.com/narbefoundation" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
1745          <svg class="facebook-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
1746            <path d="M22.675 0h-21.35c-0.733 0-1.325 0.592-1.325 1.325v21.351c0 0.733 0.592 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.894-4.788 4.659-4.788 1.325 0 2.463 0.099 2.795 0.143v3.24l-1.918 0.001c-1.504 0-1.794 0.715-1.794 1.763v2.312h3.587l-0.467 3.622h-3.12v9.294h6.116c0.733 0 1.325-0.591 1.325-1.324v-21.351c0-0.733-0.592-1.325-1.325-1.325z"/>
1747          </svg>
1748        </a>
1749        <a class="footer-social-link" href="https://www.youtube.com/@narbefoundation" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
1750          <svg class="youtube-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
1751            <path d="M23.498 6.186c-0.273-1.031-1.081-1.84-2.112-2.112-1.863-0.504-9.326-0.504-9.326-0.504s-7.463 0-9.326 0.504c-1.031 0.273-1.84 1.081-2.112 2.112-0.504 1.863-0.504 5.754-0.504 5.754s0 3.891 0.504 5.754c0.273 1.031 1.081 1.84 2.112 2.112 1.863 0.504 9.326 0.504 9.326 0.504s7.463 0 9.326-0.504c1.031-0.273 1.84-1.081 2.112-2.112 0.504-1.863 0.504-5.754 0.504-5.754s0-3.891-0.504-5.754zM9.545 15.568v-7.136l6.545 3.568-6.545 3.568z"/>
1752          </svg>
1753        </a>
1754        <a class="footer-social-link" href="https://www.instagram.com/narbefoundation" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
1755          <svg class="instagram-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
1756            <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path>
1757          </svg>
1758        </a>
1759        <a class="footer-social-link" href="https://discord.gg/b82emKJhTC" target="_blank" rel="noopener noreferrer" aria-label="Discord">
1760          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
1761            <path d="M20.317 4.3698a19.7913 19.7913 0 0 0-4.8851-1.5152.0741.0741 0 0 0-.0785.0371c-.211.3753-.4447.8648-.6083 1.2496a18.4034 18.4034 0 0 0-5.4868 0 20.149 20.149 0 0 0-.6172-1.2496.077.077 0 0 0-.0785-.0376 19.7238 19.7238 0 0 0-4.8852 1.5151.0699.0699 0 0 0-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 0 0 .0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 0 0 .0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 0 0-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 0 1-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 0 1 .0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 0 1 .0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 0 1-.0066.1276 12.2986 12.2986 0 0 1-1.873.8914.0766.0766 0 0 0-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 0 0 .0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 0 0 .0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 0 0-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.419-2.1569 2.419zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.419-2.1568 2.419z"/>
1762          </svg>
1763        </a>
1764      </div>
1765      <p>© 2026 NARBE Foundation. Helping others unlock the world, one switch at a time.</p>
1766      <div class="footer-legal">
1767        <p>501(c)(3) Nonprofit Organization</p>
1768        <p>EIN: 39-3343898</p>
1769        <p>All donations are tax-deductible to the fullest extent allowed by law.</p>
1770      </div>
1771    </div>
1772  </footer>
1773
1774<div class="mobile-donate-footer">
1775  <div class="container">
1776    <a class="donate-btn" href="#support">Donate</a>
1777  </div>
1778</div>
1779
1780  
1780<script>
1781    // Sync header height to CSS variable
1782    function syncHeaderHeightVar() {
1783      const header = document.querySelector('header');
1784      if (!header) return;
1785      const h = Math.ceil(header.getBoundingClientRect().height);
1786      document.documentElement.style.setProperty('--header-h', h + 'px');
1787    }
1788    window.addEventListener('resize', () => {
1789      clearTimeout(window.__hdrT);
1790      window.__hdrT = setTimeout(syncHeaderHeightVar, 100);
1791    });
1792    document.addEventListener('DOMContentLoaded', () => {
1793      syncHeaderHeightVar();
1794      window.setTimeout(syncHeaderHeightVar, 200);
1795      window.addEventListener('load', syncHeaderHeightVar);
1796    });
1797
1798    // Mobile menu toggle
1799    document.addEventListener('DOMContentLoaded', () => {
1800      const mobileMenuBtn = document.getElementById('mobileMenuBtn');
1801      const navLinks = document.querySelector('.nav-links');
1802      
1803      if (mobileMenuBtn && navLinks) {
1804        mobileMenuBtn.addEventListener('click', () => {
1805          navLinks.classList.toggle('active');
1806          mobileMenuBtn.classList.toggle('active');
1807          const isExpanded = navLinks.classList.contains('active');
1808          mobileMenuBtn.setAttribute('aria-expanded', isExpanded);
1809          const spans = mobileMenuBtn.querySelectorAll('span');
1810          if (isExpanded) {
1811            spans[0].style.transform = 'rotate(45deg) translate(5px, 5px)';
1812            spans[1].style.opacity = '0';
1813            spans[2].style.transform = 'rotate(-45deg) translate(7px, -6px)';
1814          } else {
1815            spans[0].style.transform = 'none';
1816            spans[1].style.opacity = '1';
1817            spans[2].style.transform = 'none';
1818          }
1819        });
1820        
1821        navLinks.addEventListener('click', (e) => {
1822          if (e.target.tagName === 'A') {
1823            navLinks.classList.remove('active');
1824            mobileMenuBtn.classList.remove('active');
1825            mobileMenuBtn.setAttribute('aria-expanded', 'false');
1826            const spans = mobileMenuBtn.querySelectorAll('span');
1827            spans[0].style.transform = 'none';
1828            spans[1].style.opacity = '1';
1829            spans[2].style.transform = 'none';
1830          }
1831        });
1832        
1833        document.addEventListener('click', (e) => {
1834          if (!mobileMenuBtn.contains(e.target) && !navLinks.contains(e.target)) {
1835            navLinks.classList.remove('active');
1836            mobileMenuBtn.classList.remove('active');
1837            mobileMenuBtn.setAttribute('aria-expanded', 'false');
1838            const spans = mobileMenuBtn.querySelectorAll('span');
1839            spans[0].style.transform = 'none';
1840            spans[1].style.opacity = '1';
1841            spans[2].style.transform = 'none';
1842          }
1843        });
1844      }
1845    });
1846
1847    // RSS Feed Loader
1848    document.addEventListener('DOMContentLoaded', () => {
1849      // Use Blogger's native JSON feed (more reliable than rss2json)
1850      const BLOGGER_JSON_URL = 'https://narbefoundation.blogspot.com/feeds/posts/default?alt=json&max-results=3';
1851      const container = document.getElementById('rss-feed-container');
1852
1853      if (!container) return;
1854
1855      // The feed renders after the browser has already jumped to a #link, so sections
1856      // below it (like #newsletter) get pushed down. Re-jump once the feed is in,
1857      // unless the visitor has already started scrolling on their own.
1858      let userScrolled = false;
1859      ['wheel', 'touchmove', 'keydown'].forEach(ev =>
1860        window.addEventListener(ev, () => { userScrolled = true; }, { once: true, passive: true }));
1861      function restoreHashTarget() {
1862        if (userScrolled || !location.hash) return;
1863        const target = document.getElementById(location.hash.slice(1));
1864        if (target) target.scrollIntoView({ behavior: 'instant', block: 'start' });
1865      }
1866
1867      // Helper function to upgrade Blogger/Google image URLs to high resolution
1868      function getHighResImage(url) {
1869        if (!url) return null;
1870        // Remove any size restrictions from Blogger/Google URLs
1871        // Patterns: /s72-c/, /s320/, /w465-h620/, =s72-c, =s320, =w400-h300-c, etc.
1872        let highRes = url
1873          .replace(/\/s\d+(-[a-z])?(-c)?\//gi, '/s1600/')
1874          .replace(/\/w\d+(-h\d+)?(-[a-z])?(-c)?\//gi, '/s1600/')
1875          .replace(/=s\d+(-[a-z])?(-c)?$/gi, '=s1600')
1876          .replace(/=w\d+(-h\d+)?(-[a-z])?(-c)?$/gi, '=s1600')
1877          .replace(/-rw$/, '');
1878        return highRes;
1879      }
1880
1881      // Use JSONP for Blogger feed (bypasses CORS)
1882      const script = document.createElement('script');
1883      window.bloggerCallback = function(data) {
1884        try {
1885          if (data.feed && data.feed.entry && data.feed.entry.length > 0) {
1886            container.innerHTML = ''; // Clear loading message
1887            
1888            data.feed.entry.forEach(entry => {
1889              let imageUrl = 'images/branding/favicon.png'; // Default fallback
1890              
1891              // Priority 1: Extract image from content (best quality source)
1892              const content = entry.content ? entry.content.$t : '';
1893              const imgMatch = content.match(/<img[^>]+src=["']([^"']+)["']/i);
1894              
1895              if (imgMatch && imgMatch[1]) {
1896                imageUrl = getHighResImage(imgMatch[1]);
1897              } else if (entry.media$thumbnail && entry.media$thumbnail.url) {
1898                // Priority 2: media:thumbnail (upgrade from 72px)
1899                imageUrl = getHighResImage(entry.media$thumbnail.url);
1900              }
1901
1902              // Get the post link
1903              let postLink = '#';
1904              if (entry.link) {
1905                const altLink = entry.link.find(l => l.rel === 'alternate');
1906                if (altLink) postLink = altLink.href;
1907              }
1908
1909              // Clean up description (remove HTML tags)
1910              const cleanDesc = content.replace(/<[^>]*>?/gm, '').substring(0, 150) + '...';
1911              
1912              // Format date
1913              const date = new Date(entry.published.$t).toLocaleDateString('en-US', {
1914                year: 'numeric',
1915                month: 'long',
1916                day: 'numeric'
1917              });
1918
1919              const card = document.createElement('a');
1920              card.className = 'rss-card';
1921              card.href = postLink;
1922              card.target = '_blank';
1923              card.rel = 'noopener';
1924              
1925              card.innerHTML = `
1926                <div class="rss-image" style="background-image: url('${imageUrl}')"></div>
1927                <div class="rss-content">
1928                  <div class="rss-date">${date}</div>
1929                  <h3 class="rss-title">${entry.title.$t}</h3>
1930                  <p class="rss-description">${cleanDesc}</p>
1931                </div>
1932              `;
1933              
1934              container.appendChild(card);
1935            });
1936          } else {
1937            container.innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 2rem;">No updates found.</div>';
1938          }
1939        } catch (e) {
1940          console.error('Error processing Blogger feed:', e);
1941          container.innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 2rem; color: #ef4444;">Unable to load updates at this time.</div>';
1942        }
1943        restoreHashTarget();
1944      };
1945      
1946      script.src = BLOGGER_JSON_URL + '&callback=bloggerCallback';
1947      script.onerror = function() {
1948        console.error('Error loading Blogger feed');
1949        container.innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 2rem; color: #ef4444;">Unable to load updates at this time.</div>';
1950        restoreHashTarget();
1951      };
1952      document.body.appendChild(script);
1953    });
1954  </script>
1954
1955  
1956  <!-- Accessibility Widget -->
1957  
1957<script src="accessibility.js"></script>
1957
1958
1959  <!-- Collapsible privacy & legal footer (shared across all pages) -->
1960  
1960<script src="footer-legal.js" defer></script>
1960
1961</body>
1962</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.