:root { color-scheme: light dark; --bg:#faf9f6; --paper:#fff; --ink:#202c25; --muted:#546158; --green:#255843; --soft:#eaf2ec; --line:#d9e1db; --notice:#fff4df; --notice-ink:#684813; }
* { box-sizing:border-box; }
html { scroll-padding-block-start:1.5rem; }
body { margin:0; background:var(--bg); color:var(--ink); font:1rem/1.8 system-ui,-apple-system,'Segoe UI',Tahoma,Arial,sans-serif; overflow-wrap:anywhere; }
a { color:var(--green); text-underline-offset:.2em; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible, summary:focus-visible { outline:3px solid var(--green); outline-offset:4px; border-radius:3px; }
.skip { position:absolute; inset-block-start:-8rem; inset-inline-start:1rem; background:var(--paper); padding:.6rem 1rem; z-index:3; }
.skip:focus { inset-block-start:1rem; }
.shell { width:min(100% - 3rem, 1060px); margin-inline:auto; }
.masthead { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-block:1.4rem; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:.7rem; color:var(--ink); font-size:1.25rem; font-weight:750; text-decoration:none; letter-spacing:-.035em; }
.mark { display:grid; place-items:center; width:2.15rem; height:2.15rem; border-radius:.65rem; background:var(--green); color:var(--paper); font-size:1.15rem; }
.nav { display:flex; flex-wrap:wrap; align-items:center; gap:.2rem 1rem; }
.nav a { display:inline-flex; align-items:center; min-height:44px; font-size:.9rem; }
.nav [aria-current=page] { font-weight:700; }
.hero { padding-block:3.8rem 2.2rem; max-width:770px; }
.eyebrow { color:var(--green); font-size:.78rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase; margin:0 0 .75rem; }
h1 { font-size:clamp(2rem,5vw,3.5rem); line-height:1.16; letter-spacing:-.04em; margin:0 0 .65rem; }
.arabic-title { display:block; font-size:clamp(1.35rem,3vw,1.8rem); line-height:1.7; margin-top:.5rem; letter-spacing:0; font-weight:600; }
.intro { font-size:1.1rem; color:var(--muted); margin:1rem 0; }
.meta { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem 1.2rem; color:var(--muted); font-size:.87rem; }
.pill { color:var(--green); background:var(--soft); border:1px solid var(--line); padding:.2rem .7rem; border-radius:2rem; }
.language-links { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.3rem; }
.language-links a { display:inline-flex; justify-content:center; align-items:center; min-height:44px; border:1px solid var(--line); background:var(--paper); border-radius:.55rem; padding:.35rem .9rem; text-decoration:none; font-size:.92rem; }
.layout { display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:2.3rem; align-items:start; padding-block:0 4rem; }
.document { min-width:0; }
.panel { background:var(--paper); border:1px solid var(--line); border-radius:1rem; padding:clamp(1.25rem,3vw,2.2rem); margin-block-end:1.5rem; }
.document h2 { font-size:1.55rem; line-height:1.5; margin:0 0 1.1rem; letter-spacing:-.025em; }
.document h3 { font-size:1.08rem; line-height:1.65; margin:2rem 0 .6rem; }
.document h3:first-child { margin-top:0; }
p { margin:0 0 1rem; }
ul, ol { padding-inline-start:1.4rem; margin:0 0 1rem; }
li { margin-bottom:.55rem; }
.toc { position:sticky; top:1.5rem; border-inline-start:1px solid var(--line); padding-inline-start:1.3rem; font-size:.88rem; color:var(--muted); }
.toc h2 { font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink); margin:0 0 .8rem; }
.toc ul { list-style:none; padding:0; }
.toc a { display:block; padding-block:.45rem; text-decoration:none; min-height:44px; }
.notice { background:var(--notice); color:var(--notice-ink); border:1px solid var(--line); border-radius:.7rem; padding:1rem 1.1rem; margin:1.2rem 0; }
.notice p:last-child, .panel>p:last-child, .panel>ul:last-child { margin-bottom:0; }
.request { background:var(--soft); border:1px solid var(--line); border-radius:.8rem; padding:1.3rem; margin:1rem 0 1.5rem; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; max-width:100%; padding:.65rem 1.2rem; border-radius:.55rem; background:var(--green); color:var(--paper); text-decoration:none; font-weight:650; line-height:1.6; text-align:center; }
.request .email { display:block; margin-top:.7rem; font-size:.95rem; }
.small { font-size:.88rem; color:var(--muted); }
dl { margin:0; }
dt { font-weight:700; margin:1.1rem 0 .2rem; }
dd { margin:0; color:var(--muted); }
.footer { border-top:1px solid var(--line); padding-block:1.5rem 2.5rem; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem 1.5rem; font-size:.86rem; }
.footer p { margin:0; }
[dir=rtl] { line-height:1.95; }
[dir=rtl] h2, [dir=rtl] h3 { letter-spacing:0; }
[dir=rtl] .button { line-height:1.8; }
bdi { unicode-bidi:isolate; }
@media (max-width:820px) { .layout { grid-template-columns:minmax(0,1fr); gap:1rem; } .toc { position:static; grid-row:1; padding:1rem 1.2rem; border:1px solid var(--line); border-radius:.8rem; } .toc ul { display:flex; flex-wrap:wrap; gap:0 1.2rem; margin:0; } .hero { padding-top:2.5rem; } }
@media (max-width:420px) { .shell { width:calc(100% - 2rem); } .masthead { gap:.5rem; } .nav { width:100%; } .hero { padding-top:2rem; } .panel { border-radius:.75rem; } }
@media (prefers-color-scheme:dark) { :root { --bg:#151c18; --paper:#1c2620; --ink:#edf2ed; --muted:#bdc9bf; --green:#9bd3b2; --soft:#24382b; --line:#3c4e41; --notice:#352d1d; --notice-ink:#f0d296; } .button,.mark { color:#13271b; } }
@media print { :root { --bg:#fff; --paper:#fff; --ink:#000; --muted:#333; --green:#000; --line:#aaa; } .nav,.language-links,.toc,.skip { display:none; } .layout { display:block; } .hero { padding-block:1rem; } .shell { width:100%; } .panel { border:0; padding:0; } .request,.notice { background:none; } a { color:#000; } h2,h3 { break-after:avoid; } }