/* Shared shell for the legal documents (privacy, terms).
   Same tokens as the landing page; a reading layout rather than a
   marketing one — one narrow column, numbered sections, no motion. */

@font-face{font-family:Kufi;src:url(fonts/ReemKufi-arabic.woff2)format("woff2");font-weight:400 700;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Kufi;src:url(fonts/ReemKufi-latin.woff2)format("woff2");font-weight:400 700;font-display:swap;
  unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Plex;src:url(fonts/IBMPlexSansArabic-400.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url(fonts/IBMPlexSansArabic-600.woff2)format("woff2");font-weight:600;font-display:swap}

:root{
  --paper:#F7F4EE; --card:#FFFDF8;
  --ink:#171310; --muted:#5F574E; --line:#DCD3C4;
  --gold:#B8801B;
  /* No blue on these pages either — it was the only value not drawn from the
     landing page's palette. Gold-ink is the small-text-safe gold: 5.2:1 on the
     paper, so it can carry links, headings and the clause numbers. */
  --gold-ink:#8A5E0C;

  /* the six names menu.css reads */
  --surface:var(--paper);
  --accent:var(--gold);
  --rule:var(--gold);
  --display:Kufi;
  --lock:1.36;
  --wrap:820px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:Plex,"Segoe UI",Tahoma,sans-serif;
  background:var(--paper); color:var(--ink);
  line-height:1.85; font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:22px}

/* ─── header ────────────────────────────────────────────────────────────── */
/* The row is .wrap + .top so the sticky bar behind it can be full-bleed
   while the content stays on the document's column. */
.top{display:flex;align-items:center;gap:13px;padding-block:18px}
/* ── the lockup ───────────────────────────────────────────────────────────
   Identical to the landing page's, and used at the top AND the end of these
   documents too. The mark never appears without the name, and the name never
   appears without the mark. */
.top__mark{height:calc(32px * var(--lock));width:auto;object-fit:contain}
.top__name{display:flex;flex-direction:column;line-height:1}
.top__ar{font-family:var(--display),sans-serif;font-weight:700;font-size:calc(19px * var(--lock));letter-spacing:-.01em;
  /* explicit, because the footer sets a muted colour on everything inside
     it and the wordmark would otherwise sit lighter there than the MXAAP
     beside it. The lockup has to be the same object in both places. */
  color:var(--ink)}
/* the drawn Arabic wordmark — see the landing page for why it is not text */
.top__ar .wm{width:3.028em;height:.879em;display:block;fill:currentColor}
.top__ar .wm__gold{fill:var(--gold)}
/* Reem Kufi caps over a rule that spans the Arabic exactly — see the landing
   page for the long version. space-between is what makes the caps meet both
   ends of the rule. */
.top__en{display:flex;justify-content:space-between;
  font-family:var(--display),sans-serif;font-weight:700;text-transform:uppercase;
  font-size:calc(10px * var(--lock));color:var(--ink);
  border-top:calc(1.5px * var(--lock)) solid var(--ink);
  margin-top:calc(6px * var(--lock));padding-top:calc(5px * var(--lock))}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Reem Kufi's own X outline, one arm in gold — see the landing page for why
   it is drawn rather than set. */
.xg{width:.681em;height:.725em;flex:none;fill:currentColor;align-self:baseline}
.xg__gold{fill:var(--gold)}
/* the brand lockup is the one-tap route home from a leaf document */
.brand:hover .top__ar{color:var(--gold-ink)}

/* ─── document head ─────────────────────────────────────────────────────── */
.doc__head{padding-block:34px 26px;border-bottom:1px solid var(--line)}
.doc__head h1{
  font-family:var(--display),sans-serif;font-weight:700;
  font-size:clamp(32px,6vw,52px);line-height:1.15;letter-spacing:-.03em;
}
.doc__meta{color:var(--muted);font-size:14px;margin-top:12px}
.doc__intro{margin-top:22px;color:var(--muted);font-size:17px;max-width:62ch}

/* A short, honest banner rather than burying the caveat at the bottom. */
.note{
  margin-top:24px;border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);
  background:color-mix(in srgb,var(--gold) 7%,transparent);
  border-radius:12px;padding:15px 18px;font-size:14.5px;color:var(--ink);
}
.note b{color:var(--gold);font-weight:600}

/* ─── sections ──────────────────────────────────────────────────────────── */
main{counter-reset:sec;padding-block:10px 60px}
section{padding-block:30px;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
section > h2{
  counter-increment:sec;
  font-family:var(--display),sans-serif;font-weight:700;font-size:clamp(20px,3vw,26px);
  letter-spacing:-.015em;line-height:1.3;
  display:flex;gap:12px;align-items:baseline;
}
/* Legal documents genuinely are a numbered sequence — the numbers are how
   a clause gets cited, not decoration. */
section > h2::before{
  content:counter(sec,arabic-indic);
  font-size:15px;color:var(--gold-ink);font-weight:600;
  min-width:1.4em;flex:none;
}
section > p, section > ul{margin-top:14px;max-width:66ch}
section > p + p{margin-top:12px}
h3{
  font-family:var(--display),sans-serif;font-weight:700;font-size:17px;
  margin-top:24px;margin-bottom:2px;color:var(--gold-ink);
}
ul{list-style:none;max-width:66ch}
li{padding-inline-start:20px;position:relative;margin-top:9px}
li::before{
  content:"";position:absolute;inset-inline-start:4px;top:.72em;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
}
li b{font-weight:600;color:var(--ink)}
p, li{color:var(--muted)}
strong{color:var(--ink);font-weight:600}
a{color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}


/* ─── footer ────────────────────────────────────────────────────────────── */
/* Mirrors the landing page's footer: the lockup on the reading side, the
   links and the small print opposite. */
footer{border-top:1px solid var(--line);padding-block:28px;color:var(--muted);font-size:13.5px}
footer .row{display:flex;gap:18px;align-items:center}
footer .brand{flex:none}
footer .meta{margin-inline-start:auto;text-align:end;line-height:1.6}
footer .links{display:flex;gap:16px;justify-content:flex-end;margin-bottom:4px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink)}
footer .links a{font-weight:600}
/* isolate, not direction:ltr. `direction` changes what text-align:end
   RESOLVES to, so the Latin line was aligning to the opposite edge from
   the Arabic line above it. Isolation protects the run from its
   neighbours without touching alignment, so it follows .meta to
   whichever edge that sits on — including when the footer flips to
   start-aligned on phones. */
footer .en{unicode-bidi:isolate;opacity:.55;font-size:12px}

@media (max-width:820px){
  :root{--lock:1.08}
}
@media (max-width:560px){
  body{font-size:16px}
  footer .row{flex-wrap:wrap;gap:12px}
  footer .meta{margin-inline-start:0;text-align:start;width:100%}
  footer .links{justify-content:flex-start}
}