/* The main page's teaser draws its background above itself to cover the header.
   With the banner in between, extend it further up. */
html .beta-announcement ~ section.teaser:before {
  top: -20rem;
  height: calc(100% + 20rem);
}
/* no divider line between header and banner (class set by newpage when there's no sub navigation) */
html.banner-below-header input#mm-trigger:not(:checked) ~ header:before {
  display: none;
}
/* above section.teaser (z-index: 10), below header and sub navigation */
html .beta-announcement {
  position: relative;
  z-index: 11;
  /* Own compositing layer: Safari otherwise intermittently fails to repaint
     the banner where it overlaps the (composited) teaser, e.g. while resizing. */
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
html .beta-announcement a {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  gap: 3.2rem;
  background: #ff7b00;
  background-image: linear-gradient(to right, rgba(255,245,0,0.35) 0%, #ff7b00 100%);
  padding: 0.8rem calc((100% - 1024px) / 2);
  box-sizing: border-box;
  text-decoration: none;
}
html .beta-announcement a * {
  color: #fff !important;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  opacity: 1;
  margin: 0;
  padding: 0;
}
html .beta-announcement a h1 {
  font-size: 2.6rem;
  font-weight: 600;
}
html .beta-announcement a p {
  position: relative;
  font-size: 1.8rem;
  padding-right: 1.6rem;
}
html .beta-announcement a p::after {
  position: absolute;
  left: 100%;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  content: "";
  border-right: 1.5px solid #fff;
  border-top: 1.5px solid #fff;
  -webkit-transform: translateX(-100%) translateY(-50%) rotateZ(45deg);
          transform: translateX(-100%) translateY(-50%) rotateZ(45deg);
}
html .beta-announcement a:hover {
  background-image: linear-gradient(to right, rgba(242,233,0,0.35) 0%, #f27500 100%);
}
html .beta-announcement a:hover p {
  text-decoration: underline;
}
html .beta-announcement a:hover p::after {
  border-right: 2.5px solid #fff;
  border-top: 2.5px solid #fff;
}
html .beta-announcement a:active {
  background-image: linear-gradient(to right, rgba(230,221,0,0.35) 0%, #e66f00 100%);
}
@media only screen and (max-width: 767px) {
  html .beta-announcement a {
    -webkit-justify-content: space-between;
            justify-content: space-between;
    padding: 0.8rem 2rem;
  }
  html .beta-announcement a h1 {
    font-size: 2.1rem;
  }
  html .beta-announcement a p {
    font-size: 1.6rem;
  }
}