@font-face { font-family: "Manrope Variable"; src: url("/fonts/manrope-latin.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Tajawal"; src: url("/fonts/tajawal-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root { --ink:#101827; --soft:#53627a; --muted:#718096; --line:#dde3ec; --blue:#1467f3; --canvas:#fbfaf7; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:"Manrope Variable",system-ui,sans-serif; line-height:1.65; }
html[lang="ar"] body { font-family:"Tajawal",sans-serif; }
a { color:inherit; }
.legal-shell { width:min(920px,calc(100% - 40px)); margin:0 auto; padding:28px 0 70px; }
.legal-header { display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding-bottom:22px; }
.legal-brand { display:inline-flex; align-items:center; gap:9px; color:var(--blue); font-size:24px; font-weight:800; text-decoration:none; letter-spacing:-.045em; }
.legal-brand img { width:32px; height:32px; }
.legal-back { color:var(--soft); font-weight:700; text-decoration:none; }
.legal-back:hover { color:var(--blue); }
.legal-content { margin-top:58px; border:1px solid var(--line); border-radius:24px; background:#fff; padding:clamp(26px,5vw,62px); box-shadow:0 24px 70px rgb(19 34 56 / 8%); }
.legal-content h1 { margin:0 0 12px; font-size:clamp(34px,5vw,56px); letter-spacing:-.055em; line-height:1.05; }
.legal-content h2 { margin:38px 0 8px; font-size:22px; letter-spacing:-.025em; }
.legal-content p, .legal-content li { color:var(--soft); }
.legal-content ul { padding-left:24px; }
.legal-note { border-left:3px solid var(--blue); background:#edf5ff; padding:14px 18px; color:var(--soft); }
.legal-updated { color:var(--muted); font-size:13px; }
.legal-footer { display:flex; gap:20px; flex-wrap:wrap; margin-top:22px; color:var(--muted); font-size:13px; }
@media (max-width:560px) { .legal-shell { width:min(100% - 28px,920px); padding-top:18px; } .legal-header { align-items:flex-start; flex-direction:column; } .legal-content { margin-top:32px; padding:24px 20px; } }