@font-face{font-family:Qomraa;src:url("fonts/itfQomraArabic-Regular.woff2") format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:Qomraa;src:url("fonts/itfQomraArabic-Bold.woff2") format("woff2");font-weight:600 800;font-display:swap}
:root{--bg:var(--page);--surface:var(--surface);--surface-2:var(--page);--ink:var(--ink);--muted:var(--ink-soft);--line:var(--rule);--accent:var(--teal);--accent-ink:#fff;--accent-rgb:var(--teal-rgb);--ok:var(--teal);--max:1120px;--radius:16px;--shadow:0 24px 70px rgba(var(--shadow-rgb),.14);
  --txt:var(--ink);--mut:var(--ink-soft);--acc:var(--teal);--acc2:var(--coral);
  --card:var(--surface);--card2:var(--page);
  --mono:"JetBrains Mono",monospace;--ease:cubic-bezier(.2,.7,.2,1);--r-sm:12px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Instrument Sans',system-ui,sans-serif;line-height:1.72;overflow-x:clip}
html[lang="ar"] body{font-family:Qomraa,Tajawal,system-ui,sans-serif}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid #7fe8bd;outline-offset:4px;border-radius:6px}
.skip{position:fixed;z-index:20;inset-inline-start:20px;top:12px;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:10px;transform:translateY(-180%)}
.skip:focus{transform:none}
.wrap{width:min(var(--max),calc(100% - 40px));margin-inline:auto}
.breadcrumb{padding-top:30px;color:var(--muted);font-size:.9rem}
.breadcrumb ol{display:flex;gap:8px;align-items:center;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.hero{padding:clamp(48px,8vw,100px) 0 clamp(56px,8vw,92px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:clamp(30px,6vw,76px);align-items:center}
h1,h2{font-family:var(--display),Georgia,serif;line-height:1.16;text-wrap:balance;letter-spacing:-.025em}
h3{line-height:1.16;text-wrap:balance;letter-spacing:-.025em}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{font-family:Qomraa,Tajawal,sans-serif}
h1{font-size:clamp(2.6rem,7vw,5.4rem);margin:0 0 24px;max-width:14ch}
html[lang="ar"] h1{max-width:16ch;letter-spacing:0}
h2{font-size:clamp(1.75rem,4vw,3rem);margin:0 0 20px}
h3{font-size:1.15rem;margin:0 0 8px}
.lead{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--muted);max-width:68ch;text-wrap:pretty}
/* A case with no screenshot: one column, held to a readable measure instead of a lone paragraph stretched across the full grid. */
.hero-grid.solo{grid-template-columns:minmax(0,1fr)}
.hero-grid.solo .lead,.hero-grid.solo .pill-row{max-width:72ch}
.evidence.evidence-unlinked{grid-template-columns:minmax(0,1fr)}
.hero-media{position:relative}
.hero-media img{position:relative;z-index:1;width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow)}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 0}
.pill{padding:6px 11px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.84rem;direction:ltr}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 19px;border-radius:12px;background:var(--accent);color:var(--accent-ink);font-weight:800;border:1px solid var(--accent)}
/* mint stays a light surface on hover too: white ink here measures 3.0:1 */
.button:hover{background:#2ba96f;color:var(--accent-ink)}
/* .button is used on <a> and on <button>. A button element inherits neither the
   page font nor a pointer cursor, so the pay button rendered as 13px Arial with
   an arrow cursor beside a 16px anchor styled identically. */
button.button{font:inherit;font-weight:800;cursor:pointer;appearance:none;-webkit-appearance:none}
.button.secondary{background:transparent;border-color:var(--line);color:var(--ink)}
.section{padding:clamp(58px,8vw,96px) 0;border-top:1px solid var(--line)}
.section-heading{display:grid;grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);gap:clamp(24px,6vw,80px);align-items:start}
.section-heading>p{margin:0;color:var(--muted);font-size:1.08rem;max-width:68ch}
.list{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.list li{position:relative;padding:18px 0 18px 36px;border-bottom:1px solid var(--line);color:var(--muted)}
html[dir="rtl"] .list li{padding:18px 36px 18px 0}
.list li::before{content:"✓";position:absolute;left:0;top:19px;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:rgba(82,199,129,.12);color:var(--ok);font-weight:900;font-size:.8rem}
html[dir="rtl"] .list li::before{left:auto;right:0}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,7vw,90px)}
.callout{padding:28px;border:1px solid rgba(var(--accent-rgb),.45);border-radius:var(--radius);background:rgba(var(--accent-rgb),.07)}
.callout p{margin:0;color:var(--muted)}
.evidence{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.evidence p{margin:0;color:var(--muted)}
.evidence a{color:var(--accent);font-weight:800;white-space:nowrap}
.proof-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:30px}
.proof{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.proof img{width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--line)}
.proof-plate{display:flex;align-items:center;justify-content:center;text-align:center;aspect-ratio:16/10;padding:16px 20px;background:var(--card2,rgba(127,127,127,.06));border-bottom:1px solid var(--line);font-family:var(--mono);font-size:13px;line-height:1.9;color:var(--accent,inherit);opacity:.85}
.proof div{padding:20px}
.proof p{margin:7px 0 0;color:var(--muted)}
.source-list{display:grid;gap:0;border-top:1px solid var(--line)}
.source-list a{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.source-list small{color:var(--muted);direction:ltr;overflow-wrap:anywhere}
.cta{padding:clamp(70px,10vw,120px) 0;text-align:center}
.cta h2{max-width:18ch;margin-inline:auto}
.cta p{max-width:66ch;margin:0 auto;color:var(--muted);font-size:1.08rem}
.cta .actions{justify-content:center}
.site-footer{padding:30px 0 42px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.site-footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.disclosure{margin-top:28px;padding:20px 22px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;color:var(--muted)}
.disclosure strong{color:var(--ink)}
@media(max-width:820px){.hero-grid,.section-heading,.columns{grid-template-columns:1fr}.hero-media{max-width:560px}.section-heading{gap:10px}.evidence{grid-template-columns:1fr}.evidence a{white-space:normal}h1{font-size:clamp(2.4rem,12vw,4rem)}}
@media(max-width:520px){.wrap{width:min(calc(100% - 28px),var(--max))}.hero{padding-top:36px}.actions{flex-direction:column}.button{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Link affordance drawn as a mask rather than a typed "↗" character. */
a.button::before{content:"";order:1;width:.78em;height:.78em;margin-inline-start:.45em;flex:none;
  background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7"/><path d="M8 7h9v9"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7"/><path d="M8 7h9v9"/></svg>') center/contain no-repeat}
html[dir="rtl"] a.button::before{transform:scaleX(-1)}