/* ==========================================================================
   legal.css - the privacy policy, and any future terms/legal page
   --------------------------------------------------------------------------
   Loaded alongside service.css, which already supplies the prose styling
   (.service-body__lead, .service-body h2, paragraph rhythm, .service-list).
   This sheet adds only what a full-width legal page needs on top of that:
   a readable measure and vertical breathing room.

   A legal page has no sidebar, so .service-body's flex sizing never applies -
   without a max-width the text would run the full 1120px container, which is
   roughly 150 characters a line and unreadable.
   ========================================================================== */

.legal {
  max-width: 78ch;
  margin-inline: auto;
  padding-block: var(--space-6);
}

.legal__updated {
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--muted);
}

/* Definition list for the "who we share data with" table-substitute. There is
   no table styling in this project (see the note in the blog prompt), so
   processors are listed as term/description pairs instead. */
.legal dl {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-3);
}

.legal dt {
  font-weight: var(--weight-bold);
  color: var(--ink);
}

.legal dd {
  color: var(--on-light);
}

/* Marks the details that must be filled in before this page is published.
   Deliberately loud - see the note on '/privacy-policy' in meta.js. */
.legal mark {
  padding: 1px 6px;
  border-radius: 3px;
  background: #FFE59A;
  color: #5B4300;
  font-weight: var(--weight-medium);
}

@media (max-width: 767px) {
  .legal {
    padding-block: var(--space-5);
  }
}