@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap");
:root {
  --navy: #183153;
  --navy-hover: #10233d;
  --canvas: #f7f5ef;
  --surface: #fffdf8;
  --sidebar: #f0eee5;
  --ink: #232b27;
  --muted: #58635c;
  --border: #d5d9cf;
  --control: #7c887e;
  --success: #236145;
  --success-bg: #e8f1e9;
  --error: #a3332a;
  --error-bg: #fceeeb;
  --accent: #9d742d;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --s12: 48px;
  --r1: 4px;
  --r2: 8px;
  --r3: 12px;
  --font-ar: "Noto Sans Arabic", sans-serif;
  --font-en: "DM Sans", sans-serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-title: 32px;
  --text-grade: 48px;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --line: 1.7;
  --line-tight: 1.3;
  --touch: 44px;
  --sidebar-width: 216px;
  --content-max: 1440px;
  --reading: 65ch;
  --quiz-nav: 216px;
  --editor-list: 280px;
  --auth-max: 1080px;
  --dialog-max: 560px;
  --focus-width: 2px;
  --duration: 150ms;
  --thin: 1px;
  --break-mobile: 760px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: var(--weight-normal) var(--text-md)/var(--line) var(--font-ar);
}
[dir="ltr"] {
  font-family: var(--font-en);
  text-align: left;
}

.policy-page { max-width: var(--reading); margin: auto; padding: var(--s6); }
.policy-page header { border-bottom: var(--thin) solid var(--border); padding-bottom: var(--s6); }
.policy-page h1 { font-size: var(--text-title); line-height: var(--line-tight); }
.policy-page h2 { font-size: var(--text-lg); margin-top: var(--s8); }
.policy-page p { margin-block: var(--s4); overflow-wrap: anywhere; }
.policy-page a, .policy-links a { color: var(--navy); text-underline-offset: var(--s1); }
.policy-page nav, .policy-links { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }
.policy-page nav a, .policy-links a { min-height: var(--touch); display: inline-flex; align-items: center; }
.policy-links { justify-content: center; padding: var(--s4); font-size: var(--text-sm); }
.policy-page .policy-meta { color: var(--muted); font-size: var(--text-sm); }
.policy-page a:focus-visible, .policy-links a:focus-visible { outline: var(--focus-width) solid var(--navy); outline-offset: var(--s1); }