#byb-rules-page {
  font-family: Montserrat, sans-serif;

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

  & rules-hero {
    display: block;
    background: linear-gradient(#071127d9, #071127d9), url("https://asset7.net/GeniusNetwork/WinJoesVan/branded-background.png?10") center / cover no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    padding: 4rem 2rem 6rem;
  }

  & rules-content {
    display: block;
    max-width: 52rem;
    margin: 0 auto;
    background: #fff;
    border-radius: 1rem;
    padding: 3rem;
    color: #1d1d1f;
    line-height: 1.7;
    box-shadow: 0 4px 24px #0003;

    @media (width >= 768px) {
      padding: 4rem;
    }

    & h1 {
      color: #1d1d1f;
      font-size: 2.25rem;
      font-weight: 800;
      margin: 0 0 .5rem;
    }

    & .page-subtitle {
      color: #64748b;
      font-size: 1.0625rem;
      margin: 0 0 3rem;
    }

    & h2 {
      color: #1d1d1f;
      font-size: 1.25rem;
      font-weight: 700;
      margin: 2.5rem 0 .75rem;
      padding-top: .5rem;
      border-top: 1px solid #e2e8f0;
    }

    & h3 {
      color: #1d1d1f;
      font-weight: 700;
    }

    & p {
      margin: 0 0 1rem;
      color: #334155;
    }

    & .round-label {
      color: #1d1d1f;
      font-size: 1.0625rem;
      margin-top: 2rem;
      margin-bottom: .5rem;
    }

    & ul {
      margin: 0 0 1rem;
      padding-left: 1.5rem;
      color: #334155;

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

    & a {
      color: #2563eb;

      &:hover {
        color: #1d4ed8;
      }
    }

    & strong {
      color: #1d1d1f;
    }

    & hr {
      border: none;
      border-top: 1px solid #e2e8f0;
      margin: 3rem 0 1.5rem;
    }
  }
}