/* Typography for the hand-written legal pages.
   terms.html, cookies.html, data-protection.html and the app-privacy-* set.

   Why this file exists: the Mobirise theme sets p{margin:0} and a line-height
   equal to the font size, so a hand-written policy renders as one unbroken
   wall of 16px/16px text with no gap between paragraphs. That is fine for the
   builder's own blocks, which carry their own inline spacing, and wrong for
   every page where we wrote the prose ourselves.

   Scoped to .legal-page .content-wrapper throughout, which is deliberately
   more specific than the .legal-page rules held inline in those pages' heads,
   so these win wherever the two meet and nothing here can reach another page.

   privacy.html is Termly markup whose elements carry inline line-height and
   font-size attributes. Inline styles beat this file, so that page keeps its
   own rhythm and only picks up the measure, link and heading treatment. */

.legal-page .content-wrapper {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #1d2939;
}

/* ---------------------------------------------------------------- the prose */

.legal-page .content-wrapper p {
  margin: 0 0 1.15em;
  line-height: 1.65;
}

.legal-page .content-wrapper ul,
.legal-page .content-wrapper ol {
  margin: 0 0 1.35em;
  padding-left: 1.4em;
}

.legal-page .content-wrapper li {
  margin: 0 0 .55em;
  line-height: 1.6;
}

.legal-page .content-wrapper li:last-child {
  margin-bottom: 0;
}

.legal-page .content-wrapper strong {
  font-weight: 600;
  color: #0c111d;
}

.legal-page .content-wrapper code {
  font-size: .88em;
  padding: .12em .4em;
  border-radius: 4px;
  background: #f2f4f7;
  color: #344054;
  /* Package ids are long and unbreakable. Break them only when the line would
     otherwise overflow, rather than at an arbitrary character. */
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- the headings */

.legal-page .content-wrapper h1 {
  margin: 0 0 .6rem;
  letter-spacing: -.02em;
}

/* A rule above each section, so a long policy reads as parts rather than as
   one column. The first one sits under the summary and reads as intentional. */
.legal-page .content-wrapper h2 {
  margin: 2.6rem 0 .9rem;
  padding-top: 1.7rem;
  border-top: 1px solid #e4e7ec;
  letter-spacing: -.01em;
  color: #0c111d;
}

.legal-page .content-wrapper h3 {
  margin: 1.8rem 0 .55rem;
  font-weight: 600;
  color: #101828;
}

/* The dateline under the h1: present, but not competing with the title. */
.legal-page .content-wrapper .legal-updated {
  margin: 0 0 2rem;
  font-size: .95rem;
  color: #667085;
}

.legal-page .content-wrapper .legal-updated code {
  background: none;
  padding: 0;
  color: #667085;
}

/* ---------------------------------------------------------------- the links */

.legal-page .content-wrapper a {
  color: #1d61f1;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.legal-page .content-wrapper a:hover {
  text-decoration-thickness: 2px;
}

/* ------------------------------------------------------------- small screens */

@media (max-width: 600px) {
  .legal-page .content-wrapper {
    font-size: 1rem;
  }

  .legal-page .content-wrapper h2 {
    margin-top: 2.1rem;
    padding-top: 1.4rem;
  }
}