/* Terms and Privacy pages. Loads after hub.css, which gives the base
   layer, the top bar, the brand lockup, and the footer. Tokens only. */

.legal-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* About 68 characters a line, with the hub's side gutters: --space-6 on
   desktop and --space-4 on phones. */
.legal {
  --legal-gutter: var(--space-6);
  flex: 1;
  width: 100%;
  max-width: calc(68ch + 2 * var(--legal-gutter));
  margin: 0 auto;
  padding: var(--space-8) var(--legal-gutter) var(--space-12);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  overflow-wrap: break-word;
}

.legal h1 {
  font: var(--text-role-heading);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

.legal-dates {
  margin-top: var(--space-2);
  font: var(--text-role-meta);
  color: var(--color-ink-tertiary);
}

.legal h2 {
  margin-top: var(--space-8);
  font: var(--text-role-title);
  color: var(--color-ink);
}

.legal p,
.legal ul {
  margin-top: var(--space-3);
}

.legal ul {
  padding-left: var(--space-5);
  list-style: disc;
}

.legal li + li {
  margin-top: var(--space-2);
}

.legal a {
  color: var(--color-link);
  transition: var(--transition-hover);
}

.legal a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.legal a:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--focus-ring);
}

/* The hub footer, with its hairline spanning the text column. The 15 px
   size only sets the ch unit; the footer's text keeps its own role. */
.legal-page .hub-foot {
  width: 100%;
  max-width: calc(68ch + 2 * var(--space-6));
  font-size: var(--text-md);
}

@media (max-width: 620px) {
  .legal {
    --legal-gutter: var(--space-4);
    padding-top: var(--space-6);
  }
}