@font-face {
  font-family: 'El Messiri Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/seo/fonts/el-messiri-arabic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'El Messiri Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/seo/fonts/el-messiri-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'El Messiri Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/seo/fonts/el-messiri-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Readex Pro Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url(/seo/fonts/readex-pro-arabic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Readex Pro Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url(/seo/fonts/readex-pro-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Readex Pro Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url(/seo/fonts/readex-pro-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{--deep:#083B33;--leaf:#0F5C4D;--gold:#D9A441;--pearl:#F5F8F6;--ink:#10231F;--muted:#5d6f6a;--line:#dbe5e1;--surface:#fff;--heading:#083B33;--brand:#0F5C4D;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--pearl:#0a1d19;--surface:#11302a;--ink:#e3ece8;--heading:#f1f6f3;--muted:#95ada6;--line:#21443c;--brand:#6fcfb3}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pearl);color:var(--ink);font:16px/1.65 "Readex Pro Variable",system-ui,sans-serif}
h1,h2,h3{font-family:"El Messiri Variable",serif;color:var(--heading);line-height:1.25;margin:0 0 .6em}
h1{font-size:clamp(1.9rem,5vw,2.8rem)}h2{font-size:clamp(1.35rem,3.4vw,1.8rem)}h3{font-size:1.1rem}
a{color:var(--brand)}p{margin:0 0 1em}
.wrap{max-width:68rem;margin-inline:auto;padding-inline:16px}
.top{background:var(--deep);color:#fff}.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:600 1.35rem "El Messiri Variable",serif}
.top nav{display:flex;align-items:center;gap:8px}.top nav a{color:#fff;text-decoration:none;padding:8px 12px;border-radius:999px}
.btn{display:inline-block;background:var(--gold);color:var(--deep)!important;font-weight:600;text-decoration:none;padding:12px 22px;border-radius:999px}
.btn.sm{padding:8px 16px;white-space:nowrap}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:16px auto 0;font-size:.9rem;color:var(--muted)}
.crumbs li+li::before{content:"›";margin-inline-end:6px}
main section{margin-block:2.5rem}
.hero{background:var(--deep);color:#fff;border-radius:24px;padding:clamp(24px,5vw,48px);margin-top:16px}
.hero h1{color:#fff}.hero .lead{font-size:1.15rem}.hero p{color:#e6efec;max-width:46rem}
.steps{padding-inline-start:1.2em}.steps li{margin-bottom:1em}.steps h3{margin:0 0 .2em}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.card,.legal,details,.place{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px}
.legal ul{padding-inline-start:1.2em}.note{color:var(--muted);font-size:.9rem}
details{margin-bottom:10px}summary{font-weight:600;cursor:pointer}details p{margin:.6em 0 0}
.links{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.places{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}.place h3{margin-bottom:.4em}
.ayah{margin:2.5rem 0;padding:20px;border-inline-start:4px solid var(--gold);font-family:"El Messiri Variable",serif;font-size:1.15rem}
.ayah cite{display:block;font:normal .9rem "Readex Pro Variable",sans-serif;color:var(--muted);margin-top:8px}
.cta{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:32px 16px}
.foot{background:#052a24;color:rgba(255,255,255,.75);padding-block:28px;margin-top:3rem;font-size:.92rem}
.foot a{color:#fff}.foot .small{font-size:.8rem;opacity:.7}.langs{font-size:1rem}
@media (max-width:30rem){.top nav a:not(.btn){display:none}}
