/* Security page: the legal layout, applied to rendered markdown.
   legal.css styles hand-written markup through classes (.legal__h,
   .legal__list); markdown output has none, so this maps its bare elements
   onto the same look. */

.legal--prose h2 {
  scroll-margin-top: 120px;
  margin: 62px 0 18px;
  padding-left: 0.25em;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--navy);
}
.legal--prose > :first-child { margin-top: 0; }
.legal--prose p + p,
.legal--prose ul + p,
.legal--prose p + ul { margin-top: 24px; }
.legal--prose ul li {
  position: relative;
  padding-left: 1.2em;
  font-size: 20px;
  line-height: 32px;
  color: #666666;
}
.legal--prose ul li + li { margin-top: 8px; }
.legal--prose ul li::before {
  content: "";
  position: absolute;
  left: 0.25em;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}
.legal--prose code { font-size: 0.9em; color: var(--navy); }
html[lang="de"] .legal--prose li { -webkit-hyphens: manual; hyphens: manual; }

@media (max-width: 1199px) {
  .legal--prose h2 { margin-top: 40px; margin-bottom: 16px; font-size: 16px; line-height: 22px; }
  .legal--prose ul li { font-size: 16px; line-height: 22px; }
  .legal--prose ul li::before { top: 8px; }
  .legal--prose p + ul, .legal--prose ul + p { margin-top: 16px; }
}

@media (max-width: 767px) {
  .legal--prose h2 { margin-top: 31px; margin-bottom: 15px; }
  .legal--prose p + p, .legal--prose p + ul, .legal--prose ul + p { margin-top: 8px; }
}