:root{--bg:#F4F5F3;--panel:#FFFFFF;--ink:#15171A;--ink-2:#474C53;--ink-3:#646A72;--line:#DDE0DB;--line-2:#C9CDC6;--accent:#0E5E63;--ease-out:cubic-bezier(.23,1,.32,1)}
@media (prefers-color-scheme:dark){:root{--bg:#0F1113;--panel:#1A1D21;--ink:#ECEEEF;--ink-2:#B3B8BE;--ink-3:#868C93;--line:#262A2F;--line-2:#343940;--accent:#6FC1BC}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Geist","Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;padding-inline:clamp(16px,4vw,40px)}
a{color:var(--accent);text-underline-offset:3px}
a:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.top{display:flex;align-items:center;justify-content:space-between;max-width:760px;margin:0 auto;height:64px;border-bottom:1px solid var(--line)}
.brand{font-family:"Familjen Grotesk",sans-serif;font-weight:700;font-size:1.25rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.brand .ar{font-family:"IBM Plex Sans Arabic",sans-serif;font-weight:500;font-size:.95rem;color:var(--accent);margin-left:.4rem}
.top .back{font-size:.95rem;color:var(--ink-2);text-decoration:none}
.top .back:hover{color:var(--ink)}
main{max-width:760px;margin:0 auto;padding-block:clamp(2.5rem,6vw,4.5rem) 4rem}
h1,h2{font-family:"Familjen Grotesk",sans-serif;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(2.2rem,5vw,3.2rem);margin:0 0 .6rem}
h2{font-size:1.35rem;margin:2.4rem 0 .6rem}
p,li{color:var(--ink-2);max-width:68ch}
p{margin:0 0 1rem}
ul{padding-left:1.2rem;margin:0 0 1rem}
li{margin-bottom:.4rem}
strong{color:var(--ink)}
.meta{color:var(--ink-3);font-size:.92rem;margin-bottom:2rem}
.btn{display:inline-flex;align-items:center;padding:.85rem 1.3rem;border-radius:10px;background:var(--ink);color:var(--bg);text-decoration:none;font-weight:600;transition:transform 160ms var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn.soft{background:transparent;color:var(--ink);border:1px solid var(--line-2);margin-left:.5rem}
footer{max-width:760px;margin:0 auto;border-top:1px solid var(--line);padding-block:2rem 3rem;font-size:.88rem;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:1.2rem}
footer a{color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}