/* ============================================================
   ZRE — Shared Legal Stylesheet
   Privacy Policy + Terms of Service
   Light theme · Azure accent #0284C7
   ============================================================ */

/* Scope isolation — legal pages load ONLY this stylesheet */
.legal-page { background-color: #F4F7FA; color: #101827; }

:root {
  --legal-paper: #F4F7FA;
  --legal-surface: #FFFFFF;
  --legal-ink: #101827;
  --legal-ink-soft: #24324A;
  --legal-muted: #4B5563;
  --legal-azure: #0284C7;
  --legal-azure-dark: #0369A1;
  --legal-azure-deep: #075985;
  --legal-azure-light: #7DD3FC;
  --legal-azure-pale: #F0F9FF;
  --legal-line: #DDE7F0;
  --legal-navy: #0C1524;
  --legal-font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --legal-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--legal-font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--legal-ink);
  background-color: var(--legal-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

h1, h2, h3 { font-family: var(--legal-font-display); font-weight: 700; line-height: 1.18; color: var(--legal-ink); letter-spacing: -0.015em; }

/* Any content container with a max-width MUST center itself and breathe */
.legal-page .container,
.legal-page .legal-content .container,
.legal-page .legal-header .container {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Scope isolation — no section should inherit homepage backgrounds */
.legal-page .legal-content section { background-color: transparent !important; }

/* ---------- Legal header ---------- */
.legal-header {
  background: linear-gradient(120deg, var(--legal-azure-dark) 0%, var(--legal-azure) 100%);
  color: #FFFFFF;
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--legal-line);
}
.legal-header .crumb {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #E9F5FC;
  margin-bottom: 18px;
}
.legal-header .crumb a { color: #FFFFFF; }
.legal-header .crumb a:hover { text-decoration: underline; }
.legal-header h1 { color: #FFFFFF; font-size: 42px; margin-bottom: 16px; }
.legal-header .legal-meta { font-size: 15px; color: #DCEFFB; }
.legal-header .legal-meta strong { color: #FFFFFF; }

/* ---------- Table of contents ---------- */
.legal-content { padding: 48px 0 72px; }
.toc {
  background-color: var(--legal-surface);
  border: 1px solid var(--legal-line);
  border-left: 4px solid var(--legal-azure);
  border-radius: 12px;
  padding: 28px 30px;
  margin-bottom: 48px;
}
.toc h2 { font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--legal-azure-dark); margin-bottom: 18px; }
.toc ol { list-style: none; counter-reset: toc; columns: 2; column-gap: 40px; }
.toc li { counter-increment: toc; margin-bottom: 10px; break-inside: avoid; }
.toc a { font-size: 15px; color: var(--legal-muted); transition: color 0.16s ease; }
.toc a:hover { color: var(--legal-azure-dark); }
.toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--legal-font-display); font-weight: 700; color: var(--legal-azure); margin-right: 10px; }

/* ---------- Legal body ---------- */
.legal-article { background-color: var(--legal-surface); border: 1px solid var(--legal-line); border-radius: 14px; padding: 56px 60px; }
.legal-article section { margin-bottom: 44px; }
.legal-article section:last-child { margin-bottom: 0; }
.legal-article h2 { font-size: 26px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--legal-line); scroll-margin-top: 40px; }
.legal-article h3 { font-size: 18px; margin: 22px 0 10px; color: var(--legal-ink-soft); }
.legal-article p { margin-bottom: 16px; color: var(--legal-ink-soft); }
.legal-article ul, .legal-article ol { margin: 0 0 18px 24px; color: var(--legal-ink-soft); }
.legal-article li { margin-bottom: 8px; }
.legal-article a { color: var(--legal-azure-dark); text-decoration: underline; }
.legal-article a:hover { color: var(--legal-azure-deep); }
.legal-article strong { color: var(--legal-ink); }

/* ---------- Legal footer ---------- */
.legal-footer {
  background-color: var(--legal-navy);
  color: #E6EDF6;
  border-top: 3px solid var(--legal-azure);
  padding: 44px 0 36px;
}
.legal-footer .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.legal-footer .brand { font-family: var(--legal-font-display); font-weight: 700; font-size: 20px; letter-spacing: 0.08em; color: #FFFFFF; }
.legal-footer .footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.legal-footer .footer-links a { font-size: 15px; color: #AEC3DC; }
.legal-footer .footer-links a:hover { color: var(--legal-azure-light); }
.legal-footer p { font-size: 14px; color: #8FA5BE; width: 100%; text-align: center; margin-top: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .legal-header h1 { font-size: 32px; }
  .legal-article { padding: 36px 24px; }
  .toc ol { columns: 1; }
  .legal-article h2 { font-size: 22px; }
}

@media (max-width: 480px) {
  .legal-header { padding: 52px 0 40px; }
  .legal-article { padding: 28px 20px; }
}