/*
  Shared typography for ".richtext" blocks.

  The media-list module (image left, text right) is just an image +
  a rich-text field on the CMS side — headings, paragraphs and bullet
  lists all come out of one freeform editor field, so they can't carry
  per-element Tailwind classes. These rules style whatever semantic
  HTML (h2, p, strong, a, ul/li) that field happens to contain,
  including the arrow-bullet look for <ul> — instead of us hand-
  building icon+span markup per list item.
*/

.richtext h2 {
  font-size: 1.875rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #272228;
}

/* Figma: gap between an h2 and whatever follows it runs noticeably
   wider (~52px ink-to-ink, measured directly off a 1:1 Figma render)
   than the general owl-spacing below. */
.richtext h2 + * {
  margin-top: 2rem;
}

/* .richtext ul resets margin to 0 (needed to cancel the browser's
   default ul margin) at the same specificity as ".richtext h2 + *"
   and ".richtext > * + *" — being declared later, it was silently
   winning and collapsing the heading-to-list gap to 0. These two
   rules pin the correct gap at a specificity ul's reset can't beat. */
.richtext h2 + ul {
  margin-top: 2rem;
}

.richtext h3 + ul {
  margin-top: 21px;
}

.richtext p,
.richtext li {
  font-size: 1.125rem;
  line-height: 1.4;
  color: #2d202e;
}

.richtext h3 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 400;
  color: #272228;
}

.richtext strong {
  font-weight: 700;
}

.richtext a {
  font-weight: 700;
  text-decoration: underline;
}

.richtext > * + * {
  margin-top: 1rem;
}

.richtext ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.richtext ul + p {
  margin-top: 1.5rem;
}

.richtext li {
  position: relative;
  padding-left: 2.25rem;
}

.richtext li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.5rem;
  height: 1.5rem;
  background: url("../images/icons/icon-check.de23d855f425.svg") no-repeat center / contain;
}

@media (min-width: 1024px) {
  .richtext h2 {
    font-size: 3rem;
    line-height: 56px;
    letter-spacing: -1px;
  }
  .richtext p,
  .richtext li {
    font-size: 1.25rem;
  }
}