/*
 * Lock In Infusions: Privacy Policy and Accessibility Statement pages only.
 * Loaded after site.css, which explains the --f / --m / --u sizing units.
 */

/* Black box at the top of the Accessibility Statement */
.legal-note {
  padding: calc(40 * var(--f)) calc(24 * var(--m));
  background: var(--ink);
  color: var(--paper);
  font-size: calc(16 * var(--f));
  line-height: 1.3;
}

.legal-note p + p {
  margin-top: 1.3em;
}

.legal {
  padding: 0 calc(24 * var(--m)) calc(40 * var(--f));
}

.legal h1,
.legal h2 {
  font-weight: 400;
  letter-spacing: var(--fit-display);
}

.legal h1 {
  padding-top: calc(40 * var(--f));
  font-size: calc(30 * var(--f));
  line-height: 1.1;
}

.legal h2 {
  margin-top: calc(40 * var(--f));
  font-size: calc(24 * var(--f));
  line-height: 1.2;
}

.legal--accessibility h2 {
  margin-top: calc(80 * var(--f));
}

.legal p,
.legal ul {
  font-size: calc(16 * var(--f));
  line-height: 1.3;
}

.legal h1 + p,
.legal h2 + p {
  margin-top: calc(12 * var(--f));
}

.legal p + p,
.legal p + ul {
  margin-top: 1.3em;
}

.legal ul {
  margin-left: 0.5em;
  padding-left: 1.3em;
  list-style: disc;
}

.legal p + ul.after-small-gap {
  margin-top: calc(12 * var(--f));
}

.legal a,
.legal-note a {
  text-decoration: underline;
}

/* ================= Desktop: 1024px and wider ================= */

@media (min-width: 1024px) {
  .legal-note {
    padding: calc(53 * var(--u)) calc(56 * var(--u)) calc(51 * var(--u));
    font-size: calc(18 * var(--u));
  }

  .legal {
    padding: 0 calc(56 * var(--u)) calc(108 * var(--u));
  }

  .legal--accessibility {
    padding-bottom: calc(69 * var(--u));
  }

  .legal h1 {
    padding-top: calc(85 * var(--u));
    font-size: calc(72 * var(--u));
  }

  .legal h2 {
    max-width: calc(791 * var(--u));
    margin-top: calc(69 * var(--u));
    font-size: calc(39.375 * var(--u));
  }

  .legal h1 + h2 {
    margin-top: calc(66 * var(--u));
  }

  .legal--accessibility h2 {
    margin-top: calc(50 * var(--u));
  }

  .legal p,
  .legal ul {
    font-size: calc(18 * var(--u));
  }

  .legal p {
    max-width: calc(769 * var(--u));
  }

  .legal h2 + p {
    margin-top: calc(18 * var(--u));
  }

  .legal h2 + p.after-wide-gap {
    margin-top: calc(51 * var(--u));
  }

  .legal--accessibility h1 + p {
    margin-top: calc(22 * var(--u));
  }

  .legal--accessibility h2 + p {
    margin-top: calc(26 * var(--u));
  }

  .legal ul {
    max-width: calc(819 * var(--u));
  }

  .legal p + ul.after-small-gap {
    margin-top: calc(17 * var(--u));
  }

  /* Text-box widths copied from the original so lines break in the same places */
  .legal-note p { max-width: calc(777 * var(--u)); }
  .legal .w-616 { max-width: calc(616 * var(--u)); }
  .legal .w-683 { max-width: calc(683 * var(--u)); }
  .legal .w-807 { max-width: calc(807 * var(--u)); }
  .legal .w-828 { max-width: calc(828 * var(--u)); }
  .legal .w-922 { max-width: calc(922 * var(--u)); }
  .legal .w-1086 { max-width: calc(1086 * var(--u)); }
}