/* --------------------------------------------------------------------------
   The legal pages (privacy, terms) and the 404 page, following
   seller_web/components/legal/legal_page.tsx: the text at a readable measure,
   with no nav beyond the brand mark leading back to the landing page.
   -------------------------------------------------------------------------- */

.legal-top,
.legal {
  margin: 0 auto;
  width: 100%;
  max-width: 48rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.legal-top {
  padding-top: 1.25rem;
}

.legal-top .brand {
  display: inline-flex;
}

.legal {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.legal header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.legal h1 {
  font-size: 2rem;
  line-height: 2.375rem;
  font-weight: 700;
}

.legal .subtitle {
  font-size: 1rem;
  line-height: 1.375rem;
  color: hsl(var(--muted-foreground));
}

.legal section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* A level-3 section sits closer to the one it is subordinate to. */
.legal section.sub {
  margin-top: -0.5rem;
}

.legal h2 {
  font-size: 1.25rem;
  line-height: 1.875rem;
  font-weight: 600;
}

.legal h3 {
  font-size: 1.125rem;
  line-height: 1.625rem;
  font-weight: 600;
}

.legal p,
.legal li {
  font-size: 1rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}

.legal p.emphasis {
  font-weight: 500;
  color: hsl(var(--foreground));
}

.legal strong {
  font-weight: 600;
  color: hsl(var(--foreground));
}

.legal ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1.25rem;
  list-style: disc outside;
}

.legal ul ul {
  margin-top: 0.5rem;
  list-style-type: circle;
}

.legal a {
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.legal a:hover {
  color: hsl(var(--foreground));
}

@media (min-width: 768px) {
  .legal-top,
  .legal {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .legal-top {
    padding-top: 2rem;
  }

  .legal {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .legal h1 {
    font-size: 2.375rem;
    line-height: 2.625rem;
  }

  .legal h2 {
    font-size: 1.375rem;
    line-height: 1.875rem;
  }

  .legal h3 {
    font-size: 1.25rem;
    line-height: 1.875rem;
  }
}