/*
 * legal.css — shared styling for the standalone legal pages (privacy.html, terms.html).
 *
 * Why a separate sheet: the marketing home page (index.html) is a long, section-based
 * landing page; the legal pages are simple long-form documents. Rather than overload
 * marketing.css with document-body rules only these two pages use, the legal pages load
 * marketing.css (for the design tokens, header, and footer) PLUS this sheet (for the
 * readable prose column). Both live under css/ which the deploy script publishes wholesale,
 * so no deploy-list change is needed for this file.
 *
 * Depends on the CSS custom properties declared at :root in marketing.css — this sheet must
 * be loaded AFTER marketing.css.
 */

/* Simplified header for legal pages: logo + a single "back to home" link, no hamburger menu.
   The landing page's anchor nav (#features, #pricing) is meaningless here, so we drop it. */
.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-6);
}

.legal-back {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-white);
  font-size: 0.95rem;
}

.legal-back:hover {
  color: var(--color-accent);
}

/* Readable prose column: narrower than the marketing container so long-form text stays
   at a comfortable ~70-character measure. */
.legal-main {
  padding: var(--space-16) 0 var(--space-20);
}

.legal-doc {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.legal-doc h1 {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  margin-bottom: var(--space-3);
}

.legal-updated {
  color: var(--color-text-light);
  font-size: 0.95rem;
  margin-bottom: var(--space-10);
}

.legal-doc section {
  margin-bottom: var(--space-12);
}

.legal-doc h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.legal-doc h3 {
  font-size: 1.1rem;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.legal-doc p {
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.legal-doc ul {
  margin: 0 0 var(--space-4) var(--space-6);
  padding: 0;
}

.legal-doc li {
  margin-bottom: var(--space-2);
}

.legal-doc a {
  color: var(--color-primary);
  text-decoration: underline;
}

.legal-doc a:hover {
  color: var(--color-primary-dark);
}

.legal-intro {
  font-size: 1.08rem;
  color: var(--color-text-light);
}

@media (max-width: 767px) {
  .legal-main {
    padding-top: var(--space-10);
  }
}