/* Legal / policy pages (/privacy, /terms, /about, /account-deletion).
 *
 * These are server-rendered static documents (no JS) for store reviewers and
 * humans alike. They link styles.css first for the shared design tokens
 * (--background, --text, --border, --serif, ...) and layer document styling on
 * top, scoped under .legal-page so nothing leaks into the SPA. */

.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 64px;
  font-family: var(--serif);
  line-height: 1.75;
}

.legal-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  font-family: var(--sans);
  font-size: 14px;
}

.legal-header .legal-home {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
}

.legal-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-left: auto;
}

.legal-header nav a[aria-current='page'] {
  color: var(--text);
  border-bottom: 2px solid var(--accent);
}

.legal-lang-jump {
  display: block;
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
}

.legal-page h1 {
  font-size: 30px;
  line-height: 1.3;
  margin: 26px 0 4px;
}

.legal-page .legal-effective {
  margin: 0 0 24px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.legal-page h2 {
  font-size: 21px;
  margin: 34px 0 10px;
}

.legal-page h3 {
  font-size: 17px;
  margin: 24px 0 8px;
}

.legal-page p,
.legal-page li {
  color: var(--text);
}

.legal-page ul,
.legal-page ol {
  padding-left: 1.4em;
}

.legal-page li {
  margin: 5px 0;
}

.legal-page section[lang='en'] {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.legal-table-wrap {
  overflow-x: auto;
  margin: 14px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.legal-page table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.legal-page th,
.legal-page td {
  text-align: left;
  vertical-align: top;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-soft);
}

.legal-page thead th {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--background-soft);
}

.legal-page tbody tr:last-child td {
  border-bottom: none;
}

.legal-footer {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}