@font-face {
    font-family: "Founders-Text";
    src: url(https://558236.fs1.hubspotusercontent-na1.net/hubfs/558236/2026/Sponsors/Alex_Test/fonts/FoundersGrotesk-Regular.otf) format("woff");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Founders";
    src: url(https://558236.fs1.hubspotusercontent-na1.net/hubfs/558236/2026/Sponsors/Alex_Test/fonts/FoundersGroteskWeb-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Founders-Bold";
    src: url(https://558236.fs1.hubspotusercontent-na1.net/hubfs/558236/2026/Sponsors/Alex_Test/fonts/FoundersGroteskText-Bold.otf) format("woff");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Founders-Condensed";
    src: url(https://558236.fs1.hubspotusercontent-na1.net/hubfs/558236/FoundersGroteskX-Condensed-Semibold.otf) format("woff");
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: "Founders-Mono";
    src: url(https://558236.fs1.hubspotusercontent-na1.net/hubfs/558236/FoundersGroteskMono-Regular.otf) format("woff");
    font-weight: 400;
    font-style: normal;
}

:root {
    /* Colors */
    --color-glyph-primary: #000000;
    --color-fill-primary: #FFFFFF;

    --color-sx-very-light: #F4F4F4;
    --color-sx-light: #F0F0F0;
    --color-sx-medium: #707070;
    --color-sx-dark: #202020;
    --color-sx-very-dark: #0F1012;
    --color-sx-blue: #19AFFF;
    --color-sx-yellow: #FFC107;

    --color-light-cyan:#73CBD3;
    --color-dark-cyan:#32B7BC;
    --color-true-blue:#3A79E2;
    --color-lime:#CCF16D;
    --color-spring-green:#B6CC53;
    --color-kelly-green:#4EAE7B;
    --color-pink:#F5AEB4;
    --color-purple:#B986E7;
    --color-dark-magenta:#92278F;
    --color-harvest-gold:#E3C545;
    --color-orange:#F59830;
    --color-red:#E0492A;
    --color-peach:#FFD5B4;
    --color-butter:#FFF2CC;
    --color-brown:#864D24;
    --color-gray:#C2BEBD;
    --color-black:#000000;
    
    --color-access-platinum: var(--color-gray);
    --color-access-innovation: var(--color-orange);
    --color-access-ftv: #3A79E292;
    --color-access-music: var(--color-kelly-green);
    --color-access-edu: var(--color-purple);
    --color-access-comedy: var(--color-red);

    --color-link:             var(--color-sx-blue);
    --color-accent:           var(--color-kelly-green);
    --color-font:             var(--color-glyph-primary);
    --color-black:            var(--color-glyph-primary);
    --color-white:            var(--color-fill-primary);

    /* Fonts */

    --font-primary:           "Founders", Helvetica, Arial, sans-serif;
    --font-button:            "Founders-Bold", Helvetica, Arial, sans-serif;
    --font-body:              "Founders-Text", Helvetica, Arial, sans-serif;
    --font-headline:          "Founders-Condensed", Helvetica, Arial, sans-serif;
    --font-mono:              "Founders-Mono", Courier, ui-monospace, monospace;

    /* Space */
    
    --rem-base:               16px;

    --space-xs:               0.875rem;
    --space-sm:               1.25rem;
    --space-md:               2.5rem;
    --space-lg:               3rem;
    --space-xl:               5rem;

    /* Other */

    --border-radius:          var(--rem-base);
    --gap:                    var(--rem-base);
    --gap-reduced:            calc(var(--gap) / 2);
    --gap-double:             calc(var(--gap) * 2);
    --border-radius-reduced:  0.5rem;
    --animation-duration:     0.12s;

    --pg-width:               1200px;
      @media (min-width:1600px) {--pg-width: 1380px;}
      @media (min-width:1800px) {--pg-width: 1440px;}
}

html {
    font-size: var(--rem-base);
    font: var(--font-primary);
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    width: 100%;
}

body {
    background: var(--color-fill-primary);
    color: var(--color-glyph-primary);
    font-family: var(--font-body);
    padding: 0;
    font-size: 1.125rem;
    line-height: 1.4;
    overflow-x: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
    min-height: 100dvh;
    width: 100dvw;
    display: flex;
    flex-flow: column nowrap;
}

/* this sets the background color when a user highlights text */
::selection {
  background: var(--color-lime);
  color: var(--color-glyph-primary);
}

span {
  margin: 0px;
}

/* header styles on multiple screen widths h1, h2, h3, h4, h5, h6*/
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline); 
  font-weight: 600;
  letter-spacing: -0.01em;
  padding-top: var(--space-xs);
  margin: 0px;
}

h1 {
  font-size: 40px;
/*   line-height: 1; */
}

::placeholder {
  color: var(--color-sx-light);
}

@media screen and (min-width: 768px) {
  h1 {
    font-size: 48px;
  }
}
@media screen and (min-width: 1280px) {
  h1 {
    font-size: 64px;
  }
}
@media screen and (min-width: 1600px) {
  h1 {
    font-size: 80px;
  }
}

h2 {
  font-size: 32px;
  line-height: 1;
}

@media screen and (min-width: 768px) {
  h2 {
    font-size: 40px;
  }
}
@media screen and (min-width: 1280px) {
  h2 {
    font-size: 48px;
  }
}
@media screen and (min-width: 1600px) {
  h2 {
    font-size: 64px;
  }
}

h3 {
  font-size: 28px;
  line-height: 1;
}

@media screen and (min-width: 768px) {
  h3 {
    font-size: 32px;
  }
}
@media screen and (min-width: 1280px) {
  h3 {
    font-size: 40px;
  }
}
@media screen and (min-width: 1600px) {
  h3 {
    font-size: 48px;
  }
}

h4 {
  font-size: 24px;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  h4 {
    font-size: 28px;
  }
}
@media screen and (min-width: 1280px) {
  h4 {
    font-size: 32px;
  }
}
@media screen and (min-width: 1600px) {
  h4 {
    font-size: 40px;
  }
}

h5 {
  font-size: 21px;
  line-height: 1.1;
  font-family: var(--font-button);
  text-transform: none;
}

h6 {
  font-size: 19px;
  line-height: 1.21;
}

form {
  border: 1px none var(--color-white);
  padding: 0px;
}


/* ==========================================================================
   GLOBAL HYPERLINK STYLES 
   ========================================================================== */
a {
   color: inherit;         /* Forces link to match surrounding text color */
    font-weight: inherit;   /* Forces link to match surrounding text weight */
    font-family: inherit;   /* STOPS HUBSPOT FROM FORCING WORK SANS */
    text-decoration: underline;
    transition: color 0.2s ease;
}

/* Controls what happens when you hover over any hyperlink */
a:hover, 
a:focus, 
a:active {
      color: inherit;         /* Forces link to match surrounding text color */
    font-weight: inherit;   /* Forces link to match surrounding text weight */
    font-family: inherit;   /* STOPS HUBSPOT FROM FORCING WORK SANS */
    text-decoration: underline;
    transition: color 0.2s ease;