#gyc-about-page {
  font-family: Montserrat, sans-serif;
  background: #0a0f1f;
  color: #0d1e37;
  background-attachment: unset;

  & cloudy-content-wrapper {
    flex-direction: column;
  }

  & hero-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: #fff;
    text-align: center;
    background: linear-gradient(#0711278c, #0711278c), url("https://asset7.net/GeniusNetwork/WinJoesTesla/bg2.jpeg") center / cover no-repeat;
    padding: 1.5rem 0 2rem;

    & > content-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
    }

    & spacing-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 0;
      flex: 1;
      width: 100%;
      max-width: 60rem;
    }

    & eyebrow {
      display: block;
      letter-spacing: .3em;
      font-size: .75rem;
      font-weight: 600;
      color: #3bd4ff;
      margin-bottom: .5rem;
      text-transform: uppercase;
    }

    & h1 {
      font-size: clamp(2rem, 9vw, 5rem);
      font-weight: 800;
      line-height: 1.05;
      margin: 0 0 .5rem;
      white-space: nowrap;
    }

    & subtitle {
      display: block;
      font-size: 1rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: #c8d2e3;
      margin-bottom: .75rem;
    }

    & h2 {
      font-size: 1.25rem;
      font-weight: 400;
      font-style: italic;
      max-width: 36rem;
      margin: 0 auto 1.25rem;
      color: #f0f2f7;
    }

    & hero-video {
      display: block;
      width: 100%;
      max-width: 720px;
      margin: 0 auto 1.25rem;

      & div.video-wrapper {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%;
        background: #000;
        border: 2px solid #3bd4ff;
        border-radius: 4px;
        overflow: hidden;
        box-shadow: 0 4px 14px #3bd4ff40, 0 12px 28px #0006, 0 28px 56px #00000059;

        & iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
    }

    & .bux-narrow-sm {
      max-width: 36rem;
      margin: 0 auto;

      & > p {
        color: #d4dbea;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
      }
    }

    & button-wrapper {
      display: inline-flex;
      gap: 1rem;
      margin-top: .5rem;
      margin-bottom: 0;

      & > a.btn {
        padding: .6rem 1.4rem;
        font-size: 1.1rem;
        font-weight: 600;
        border-radius: 0;
        text-decoration: none;
        transition: transform .15s, box-shadow .15s, background-color .15s, color .15s;
      }

      & > a.btn:first-child {
        background-color: #3bd4ff;
        color: #071127;
        border: 2px solid #3bd4ff;
        box-shadow: 0 4px 14px #3bd4ff59, 0 1px 3px #0003;

        &:hover {
          background-color: #5ce0ff;
          border-color: #5ce0ff;
          transform: translateY(-2px);
          box-shadow: 0 8px 24px #3bd4ff8c, 0 2px 6px #00000040;
        }

        &:active {
          transform: translateY(0) scale(.98);
          box-shadow: 0 2px 8px #3bd4ff4d, 0 1px 2px #0003;
        }
      }

      & > a.btn:last-child {
        color: #3bd4ff;
        background-color: #0000;
        border: 2px solid #3bd4ff;

        &:hover {
          background-color: #5ce0ff;
          border-color: #5ce0ff;
          color: #071127;
          transform: translateY(-2px);
          box-shadow: 0 8px 24px #3bd4ff8c, 0 2px 6px #00000040;
        }

        &:active {
          transform: translateY(0) scale(.98);
          box-shadow: 0 2px 8px #3bd4ff4d, 0 1px 2px #0003;
        }
      }
    }

    & p.countdown-caption {
      color: #c8d2e3;
      font-size: .85rem;
      margin: -1rem auto 1.5rem;
      text-align: center;
      max-width: 36rem;
    }

    & a {
      color: #fff;

      & small {
        opacity: .7;
        text-decoration: underline;
      }
    }

    & icon-wrapper {
      display: flex;
      justify-content: center;
      padding: 1.5rem 0 0;

      & a {
        text-decoration: none;
      }

      & i {
        width: 3rem;
        height: 3rem;
        border: 2px solid #3bd4ff;
        color: #3bd4ff;
        border-radius: 100%;
        line-height: 2.75rem;
        text-align: center;
        font-size: 16pt;
      }
    }
  }

  & content-section {
    display: block;
    background: #f4f5f8;
    padding: 4rem 0;

    &:nth-of-type(2n) {
      background: #fff;
    }

    & eyebrow.section-eyebrow {
      display: block;
      text-align: center;
      letter-spacing: .3em;
      font-size: .75rem;
      font-weight: 700;
      color: #3bd4ff;
      margin-bottom: .75rem;
      text-transform: uppercase;
    }

    & h4.examples-heading {
      text-align: center;
      margin: 2rem 0 .75rem;
    }

    & ul.must-be, & ul.examples, & ul.cta-steps {
      display: inline-block;
      text-align: left;
      max-width: 42rem;
      margin: 1.25rem auto;
    }

    & p.focus-line {
      margin-top: 1.5rem;
      font-size: 1.05rem;
    }

    & p.cta-footer {
      color: #d4dbea;
      font-size: .95rem;
      margin: 1rem auto 1.5rem;
    }

    & > content-container {
      max-width: 64rem;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    & h3 {
      font-weight: 800;
      font-size: 2.25rem;
      margin: 0 0 1rem;
      text-align: center;
      color: #0d1e37;
    }

    & h3 + p {
      font-size: 1.05rem;
      line-height: 1.6;
      margin: 0 auto 2rem;
      max-width: 42rem;
      color: #3a4761;
    }

    & h4 {
      font-size: 1.15rem;
      font-weight: 700;
      color: #0d1e37;
      margin: 0 0 .75rem;
    }

    & .bux-narrow-md {
      max-width: 56rem;
      margin: 0 auto;
    }

    & .bux-narrow-lg {
      max-width: 64rem;
      margin: 0 auto;
    }

    & ul {
      padding-left: 1.25rem;
      line-height: 1.7;

      & li {
        margin-bottom: .5rem;
      }

      & li:last-child {
        margin-bottom: 0;
      }
    }

    & grid-3 {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
      gap: 1.25rem;
      margin-top: 2rem;
    }

    & panel {
      display: block;
      background: #fff;
      border: 1px solid #e3e7ee;
      border-radius: 1rem;
      box-shadow: 0 1px 3px #0d1e370f;

      & > content {
        display: block;
        padding: 1.75rem;
        line-height: 1.55;

        & > :last-child {
          margin-bottom: 0;
        }

        & eyebrow {
          display: block;
          letter-spacing: .18em;
          text-transform: uppercase;
          font-size: .7rem;
          font-weight: 700;
          color: #3bd4ff;
          margin-bottom: .5rem;
        }

        & h3 {
          text-align: left;
          font-size: 1.5rem;
          margin-bottom: 1rem;
        }

        & h4 {
          font-size: 1.05rem;
          margin: 0 0 .5rem;
        }

        & p {
          color: #3a4761;
          margin: 0 0 .75rem;
        }
      }
    }

    &#section-cta {
      background: linear-gradient(135deg, #0a0f1f 0%, #1e2a48 100%);
      color: #fff;
      text-align: center;
      padding: 5rem 0;

      & h3 {
        color: #3bd4ff;
        font-size: 2rem;
      }

      & p {
        color: #f0f2f7;
        font-size: 1.15rem;
        margin: 0 auto 2rem;
        max-width: 36rem;
      }

      & a.btn.lg {
        background-color: #3bd4ff;
        color: #071127;
        border: 2px solid #3bd4ff;
        border-radius: 0;
        font-weight: 600;
        padding: .75rem 1.75rem;
        font-size: 1.2rem;
        text-decoration: none;
        box-shadow: 0 4px 14px #3bd4ff59, 0 1px 3px #0003;
        transition: transform .15s, box-shadow .15s, background-color .15s;

        &:hover {
          background-color: #5ce0ff;
          border-color: #5ce0ff;
          transform: translateY(-2px);
          box-shadow: 0 8px 24px #3bd4ff8c, 0 2px 6px #00000040;
        }

        &:active {
          transform: translateY(0) scale(.98);
          box-shadow: 0 2px 8px #3bd4ff4d, 0 1px 2px #0003;
        }
      }
    }

    &#section-disclaimer {
      background: #0a0f1f;
      color: #c8d2e3;
      padding: 3rem 0;

      & panel {
        background: #ffffff0a;
        border: 1px solid #ffffff14;
        box-shadow: none;

        & > content {
          padding: 2rem;

          & small {
            color: #c8d2e3;
            line-height: 1.6;

            & a {
              color: #3bd4ff;
            }
          }
        }
      }

      & p.contact-info {
        text-align: center;
        margin: 1.5rem 0 0;
        color: #f0f2f7;

        & span {
          display: block;
          font-weight: 600;
          margin-bottom: .25rem;
          letter-spacing: .15em;
          text-transform: uppercase;
          font-size: .75rem;
          color: #3bd4ff;
        }
      }
    }
  }
}

winjoestesla-countdown-timer {
  --timer-bg: linear-gradient(145deg,
      #0f172a,
      #1e293b);
  --timer-border: #3bd4ff66;
  --timer-digit-bg: linear-gradient(180deg,
      #020617 0%,
      #0f172a 50%,
      #020617 100%);
  --timer-digit-color: #3bd4ff;
  --timer-digit-shadow: 0 0 12px #3bd4ff8c, 0 0 2px #3bd4ffe6;
  --timer-label-color: #cbd5e1;
  --timer-heading-color: #f8fafc;
  --timer-separator-color: #3bd4ff;
  display: block;
  background: var(--timer-bg);
  border: 1px solid var(--timer-border);
  border-radius: 1rem;
  padding: 1.5rem 1.25rem;
  box-shadow: 0 10px 25px -10px #02061773, inset 0 1px #ffffff0a;
  text-align: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  & countdown-heading {
    display: block;
    color: var(--timer-heading-color);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 1rem;
  }

  & countdown-clock {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: .4rem;
  }

  & countdown-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    flex: 2 1 0;
    min-width: 0;

    &[data-unit="days"] {
      flex: 3 1 0;
    }
  }

  & countdown-digits {
    display: flex;
    gap: .25rem;
    justify-content: center;
    width: 100%;
  }

  & countdown-digit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 3 / 4;
    max-width: 3rem;
    background: var(--timer-digit-bg);
    border: 1px solid #3bd4ff40;
    border-radius: .5rem;
    color: var(--timer-digit-color);
    font-family: Courier New, ui-monospace, monospace;
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 700;
    text-shadow: var(--timer-digit-shadow);
    box-shadow: inset 0 1px #ffffff0d, inset 0 -2px 6px #00000080, 0 1px 2px #0006;
    position: relative;
    overflow: hidden;
    transition: transform .12s ease-out;

    &:after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(#ffffff14 0%, #0000 50%, #00000040 100%);
      pointer-events: none;
    }

    &.tick {
      transform: scale(1.05);
    }
  }

  & countdown-label {
    display: block;
    color: var(--timer-label-color);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  & countdown-separator {
    display: flex;
    align-items: center;
    color: var(--timer-separator-color);
    font-family: Courier New, ui-monospace, monospace;
    font-size: clamp(1.25rem, 3vw, 2rem);
    font-weight: 700;
    padding-bottom: 1.5rem;
    opacity: .7;
    animation: 1s steps(2, end) infinite winjoestesla-countdown-blink;
  }

  &[data-variant="hero"] {
    --timer-bg: linear-gradient(145deg,
        #071127d9,
        #020617e6);
    --timer-border: #3bd4ffa6;
    backdrop-filter: blur(6px);
    max-width: 38rem;
    margin: 0 auto 2rem;
  }

  &[data-state="expired"] {
    & countdown-separator {
      animation: none;
    }

    & countdown-digit {
      color: #64748b;
      text-shadow: none;
      border-color: #64748b40;
    }
  }
}

@keyframes winjoestesla-countdown-blink {
  0% {
    opacity: .8;
  }

  50% {
    opacity: .25;
  }

  100% {
    opacity: .8;
  }
}