/* Privacy and Terms — reading pages, not app surfaces. Same Graphik faces and
   the same text greys as style.css, but a plain scrolling document: the app's
   fixed, overflow-hidden body would clip these outright. */

body.legal {
  height: auto;
  overflow: auto;
  background: #fff;
}

.legal-page {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 56px 24px 96px;
}

.legal-page a {
  color: rgba(0, 0, 0, 0.9);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-back {
  display: inline-block;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.55);
  text-decoration: none;
  margin-bottom: 40px;
}

/* style.css hides h1 outright ("the calendar IS the page"). These pages are
   documents, so theirs has to be put back. */
.legal-page h1 {
  display: block;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 8px;
}

.legal-page .legal-date {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 44px;
}

.legal-page h2 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
}

.legal-page h3 {
  font-size: 17px;
  font-weight: 500;
  margin: 24px 0 8px;
}

.legal-page p,
.legal-page li {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.9);
  margin: 0 0 1em;
}

.legal-page ul {
  padding-left: 1.2em;
  margin: 0 0 1em;
}

.legal-page li {
  margin-bottom: 0.4em;
}

.legal-page .legal-lead {
  font-weight: 500;
}

/* The one thing a reader should take away from the privacy page. */
.legal-page .legal-note {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 0 1.5em;
}

.legal-page .legal-note p:last-child {
  margin-bottom: 0;
}

.legal-page footer {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 15px;
  color: rgba(0, 0, 0, 0.55);
}

.legal-page footer p {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 0.4em;
}

@media (max-width: 480px) {
  .legal-page { padding: 40px 20px 72px; }
  .legal-page h1 { font-size: 28px; }
}

/* The quiet line under an answer: a caveat, a shortcut, or what stops the steps
   working. AppColor.textSecondary, as the app draws it. */
.legal-page .help-note {
  color: rgba(0, 0, 0, 0.55);
  font-size: 15px;
}

/* Numbered routes. The app numbers anything past two taps; so does this. */
.legal-page ol {
  margin: 0 0 18px 22px;
  padding: 0;
}

/* SEMIBOLD, never bold: Graphik is loaded at 400/500/500, and a `bold` (700) is
   a weight this page does not have. Asked for it, the browser smears the 500. */
.legal-page strong,
.legal-page b { font-weight: 500; }