/* Prose styling for /privacy and /terms.
 *
 * These two pages reuse styles.css for the shell — nav, footer, .wrap, .btn,
 * the .th/.en language spans — and add only what a long text document needs and
 * the landing page never did. Kept in its own file so the marketing page's
 * 23KB of layout is not touched to publish a legal document. */

.legal {
  padding: 120px 0 72px;
  background: var(--paper, #fff);
}

.legal-wrap {
  max-width: 760px; /* ~70 characters of Thai body text at 17px */
}

.legal h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.25;
  margin: 4px 0 12px;
}

.legal h2 {
  font-size: clamp(19px, 2.2vw, 22px);
  line-height: 1.4;
  margin: 44px 0 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(13, 27, 76, 0.1);
}

.legal h3 {
  font-size: 17px;
  line-height: 1.5;
  margin: 26px 0 8px;
}

.legal p,
.legal li {
  font-size: 17px;
  line-height: 1.85; /* Thai needs more than Latin — tone marks stack above */
  color: #33415c;
}

.legal p { margin: 0 0 14px; }

.legal ul {
  margin: 0 0 18px;
  padding-left: 22px;
}

.legal li { margin: 0 0 10px; }

.legal a {
  color: #1f47c9;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal a:hover { text-decoration-thickness: 2px; }

.legal .lede {
  font-size: 18px;
  color: #1c2a4d;
  margin-bottom: 8px;
}

.legal-meta {
  font-size: 14px;
  color: #6b7a99;
  margin: 0 0 28px;
}

.legal-links {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid rgba(13, 27, 76, 0.1);
  font-size: 15px;
}

.legal-links a { margin: 0 6px; }

/* The landing nav is built around a section menu these pages do not have. */
.legal-page .nav-links { display: none; }

@media (max-width: 640px) {
  .legal { padding: 96px 0 56px; }
  .legal p,
  .legal li { font-size: 16px; }
}