/* Shared chrome for the legal pages (privacy, terms).
   Deliberately small and standalone rather than reusing the landing page's
   stylesheet: that file is a single 600-line inline block tied to its own
   markup, and these are plain documents. Tokens mirror
   app/static/src/tailwind-input.css so the brand stays consistent. */

:root {
  --navy: #162230;
  --royal: #044688;
  --ai-blue: #075AA0;
  --bg: #FFFFFF;
  --surface: #F7F9FB;
  --border: #DFE4EA;
  --heading: #162230;
  --body: #3A4553;
  --muted: #6B7684;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1621;
    --surface: #162230;
    --border: #24313F;
    --heading: #F3F5F7;
    --body: #C9D1DA;
    --muted: #8A96A3;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1621; --surface: #162230; --border: #24313F;
  --heading: #F3F5F7; --body: #C9D1DA; --muted: #8A96A3;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--body);
  font: 16px/1.85 "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
}

.legal-top {
  background: var(--navy); color: #F3F5F7;
  padding: 18px clamp(18px, 5vw, 48px);
  display: flex; align-items: center; gap: 12px;
}
.legal-top img { width: 34px; height: 34px; border-radius: 50%; background: #fff; padding: 2px; }
.legal-top b { font-size: 1.05rem; letter-spacing: .01em; }
.legal-top a { color: #C4CBD3; text-decoration: none; margin-inline-start: auto; font-size: .9rem; }
.legal-top a:hover { color: #fff; }

main { max-width: 46rem; margin: 0 auto; padding: clamp(28px, 6vw, 56px) clamp(18px, 5vw, 32px) 72px; }
h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.35; color: var(--heading); margin: 0 0 6px; }
.updated { color: var(--muted); font-size: .875rem; margin: 0 0 32px; }
h2 {
  font-size: 1.15rem; color: var(--heading); margin: 40px 0 12px;
  padding-top: 20px; border-top: 1px solid var(--border);
}
h2:first-of-type { border-top: 0; padding-top: 0; }
p, li { color: var(--body); }
ul { padding-inline-start: 1.4rem; }
li { margin-bottom: 8px; }
strong { color: var(--heading); }
a { color: var(--ai-blue); }

.note {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 18px; margin: 24px 0;
  font-size: .9375rem;
}
.contact { background: var(--surface); border-radius: 10px; padding: 20px; margin-top: 40px; }
.contact p { margin: 4px 0; }
/* Latin-script values (email, phone) inside an RTL paragraph. */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

footer {
  border-top: 1px solid var(--border); margin-top: 48px; padding-top: 20px;
  color: var(--muted); font-size: .8125rem;
}
footer a { margin-inline-end: 16px; }