.discover-rules-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: #e5f6ff url('../images/discover/pattern.png') center 80px / 1440px auto repeat-y;
  color: #333;
}

.discover-rules-body > main {
  flex: 1;
}

.discover-rules-page {
  width: calc(100% - 48px);
  max-width: 1066px;
  margin-inline: auto;
  padding: 40px 0 30px;
  text-align: center;
}

.discover-rules-page h1 {
  margin: 0 0 30px;
  color: #11279c;
  font-size: 36px;
  font-weight: 700;
  font-style: italic;
  line-height: 49px;
  text-transform: uppercase;
  text-wrap: balance;
}

.discover-rules-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #4f4f4f;
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  overflow-wrap: break-word;
}

.discover-rules-copy h2,
.discover-rules-emphasis {
  color: #333;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.discover-rules-body .footer {
  flex-shrink: 0;
  margin-top: 0;
}

@media (min-width: 1600px) {
  .discover-rules-body {
    background-size: 100% auto;
  }
}

@media (max-width: 767px) {
  .discover-rules-body {
    background: #e5f6ff;
  }

  .discover-rules-page {
    width: calc(100% - 40px);
    padding: 40px 0;
  }

  .discover-rules-page h1 {
    margin-bottom: 16px;
    font-size: 24px;
    line-height: 33px;
  }

  .discover-rules-copy {
    gap: 8px;
  }

  .discover-rules-copy h2,
  .discover-rules-emphasis {
    line-height: 22px;
  }
}

/* The final rules contain sections and lists, rather than the short Figma sample. */
.discover-rules-copy {
  text-align: left;
  font-weight: 400;
  line-height: 1.6;
  gap: 12px;
}
.discover-rules-copy h2 { margin-top: 16px; }
.discover-rules-copy h2:first-child { margin-top: 0; text-align: center; }
.discover-rules-copy ul,
.discover-rules-copy ol { padding-left: 24px; }
.discover-rules-copy ul { list-style: disc; }
.discover-rules-copy ol { list-style: decimal; }
.discover-rules-copy li + li { margin-top: 6px; }
.discover-rules-copy a { color: #11279c; text-decoration: underline; text-underline-offset: 3px; }

.discover-rules-kicker,
.discover-rules-program { text-align: center; color: #11279c; font-size: 18px; }
.discover-rules-copy h3 { margin-top: 12px; color: #333; font-size: 16px; font-weight: 700; }
.discover-rules-table-scroll { max-width: 100%; overflow-x: auto; }
.discover-rules-table-scroll:focus-visible { outline: 2px solid #11279c; outline-offset: 2px; }
.discover-rules-copy table { width: 100%; min-width: 600px; border-collapse: collapse; background: #fff; }
.discover-rules-copy caption { text-align: left; font-weight: 700; padding-bottom: 8px; color: #11279c; }
.discover-rules-copy th,
.discover-rules-copy td { border: 1px solid #bdcce3; padding: 12px; text-align: left; vertical-align: top; }
.discover-rules-copy thead th { background: #11279c; color: #fff; }
.discover-rules-copy tbody th { background: #eff6ff; font-weight: 600; }
.discover-rules-copy td p + p,
.discover-rules-copy th p + p { margin-top: 8px; }
.discover-rules-example { display: block; width: 161px; max-width: 100%; height: auto; margin-top: 12px; }

.discover-rules-hashtag { color: #11279c; background: #d5e7ff; padding: 2px 5px; border-radius: 4px; font-weight: 700; overflow-wrap: anywhere; }