/* Legal pages (privacy, terms, EULA in zh / en / ja). Loaded after site.css and
 * uses its tokens, so the pages follow the main site. Quiet long-form reading:
 * no scene, no motion, hairlines between sections. See DESIGN.md. */

/* No section links in the nav here, so push the language switch and login right.
 * The nav has a solid background from the start (no site.js to add .is-scrolled). */
.legal-page .nav-right { margin-left: auto; }

.legal-hero {
  padding: calc(84px + clamp(48px, 7vw, 96px)) 0 clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}
.legal-eyebrow {
  margin-bottom: 16px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal-eyebrow .accent { color: var(--lavender); }
.legal-eyebrow .accent::after { content: " / "; color: var(--faint); }
.legal-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--cream);
}
html:lang(zh-TW) .legal-title,
html:lang(ja) .legal-title { letter-spacing: 0; }
.legal-meta {
  margin-top: 16px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.legal-body { padding: clamp(40px, 5vw, 64px) 0 var(--section-space); }
.legal-content { max-width: 760px; }
.legal-intro {
  padding-bottom: 32px;
  font-size: 17px;
  color: var(--cream);
}

.legal-section {
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.legal-section h2 {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.legal-section h3 {
  margin: 24px 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--cream);
}
.legal-section p,
.legal-section li {
  font-size: 15px;
  color: var(--muted);
}
.legal-section p + p,
.legal-section p + ul,
.legal-section p + ol,
.legal-section ul + p,
.legal-section ol + p { margin-top: 12px; }
.legal-section ul,
.legal-section ol {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding-left: 1.25em;
}
.legal-section li::marker { color: var(--lavender); }
.legal-content strong { font-weight: 600; color: var(--cream); }
.legal-content a {
  color: var(--lavender);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-content a:hover { color: var(--cream); }

/* The other two documents, as pills. */
.legal-related {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 760px;
  margin-top: 48px;
}
.legal-related a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--muted);
  transition: border-color 0.2s, color 0.2s;
}
.legal-related a:hover { border-color: var(--line-strong); color: var(--cream); }
.legal-related a.current {
  border-color: var(--line-strong);
  background: rgba(180, 156, 230, 0.08);
  color: var(--cream);
}