:root{
--paper:#F7F8FA;
--paper-2:#EDEFF3;
--ink:#173D6E;
--ink-2:#102B4D;
--navy-2:#244E78;
--terracotta:#B17844;
--tan:#C79462;
--divider:#DCE0E6;
--ink-soft:#4A5A70;
--ink-85:rgba(23,61,110,.85);
}
html{scroll-behavior:smooth;}
body{background:var(--paper); font-family:'Tajawal', sans-serif; color:var(--ink); overflow-x:hidden;}
.font-display{font-family:'Noto Naskh Arabic', serif;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}
.sr-only.focus\:not-sr-only:focus{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal;background:var(--ink);color:var(--paper);padding:0.5rem 1rem;z-index:50;}

.fade-in{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1);}
.fade-in.is-visible{opacity:1;transform:translateY(0);}
.stagger-1{transition-delay:.05s;} .stagger-2{transition-delay:.15s;} .stagger-3{transition-delay:.25s;} .stagger-4{transition-delay:.35s;}

.rule{border-top:1px solid var(--ink); position:relative;}
.rule::after{content:"";position:absolute; top:3px; left:0; right:0; border-top:1px solid var(--divider);}
.rule-thin{border-top:1px solid var(--divider);}

.btn-solid{border-radius:0.25rem; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; background:var(--ink); color:var(--paper); padding:.95rem 2.25rem; font-weight:700; transition:transform .4s cubic-bezier(.19,1,.22,1), background-color .4s ease;}
.btn-solid:hover{transform:translateY(-3px); background:var(--ink-2);}
.btn-solid:focus-visible{outline:2px solid var(--terracotta); outline-offset:3px;}

.link-quiet{color:var(--navy-2); font-weight:700; border-bottom:1.5px solid var(--tan); padding-bottom:.15rem; transition:border-color .3s ease, color .3s ease;}
.link-quiet:hover{color:var(--ink); border-color:var(--terracotta);}

/* Table-of-contents style index rows */
.toc-row{display:flex; align-items:baseline; gap:.5rem; padding:.85rem 0; border-bottom:1px dashed var(--divider);}
.toc-row .leader{flex:1 1 auto; border-bottom:2px dotted var(--divider); height:0; transform:translateY(-6px); min-width:1rem;}
.toc-num{font-family:'Noto Naskh Arabic', serif; color:var(--terracotta); font-weight:700; font-size:.95rem; flex-shrink:0;}

/* Drop cap for the about paragraph */
.dropcap{float:right; font-family:'Noto Naskh Arabic', serif; font-weight:700; color:var(--terracotta); font-size:3.4rem; line-height:.8; margin-right:0; margin-left:.5rem; padding-top:.2rem;}
[dir="rtl"] .dropcap{float:right;}

/* Footnote-style callouts for "why choose" section */
.footnote{position:relative; border-top:2px solid var(--ink); padding-top:1.25rem;}
.footnote-mark{font-family:'Noto Naskh Arabic', serif; color:var(--terracotta); font-weight:700; font-size:1.4rem;}

.credential-pill{display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--divider); border-radius:9999px; padding:.4rem 1.1rem; font-size:.8rem; font-weight:700; color:var(--navy-2); background:var(--paper);}
.credential-pill-light{border-color:rgba(247,248,250,.4); color:var(--paper); background:transparent;}

.rule-light{border-top:1px solid var(--paper); position:relative;}
.rule-light::after{content:"";position:absolute; top:3px; left:0; right:0; border-top:1px solid rgba(247,248,250,.35);}

.btn-invert{border-radius:0.25rem; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; background:var(--paper); color:var(--ink); padding:.95rem 2.25rem; font-weight:700; transition:transform .4s cubic-bezier(.19,1,.22,1), background-color .4s ease;}
.btn-invert:hover{transform:translateY(-3px); background:var(--tan);}

.link-quiet-light{color:var(--paper); font-weight:700; border-bottom:1.5px solid rgba(199,148,98,.8); padding-bottom:.15rem; transition:border-color .3s ease, color .3s ease;}
.link-quiet-light:hover{color:var(--tan); border-color:var(--tan);}

.lift{transition:transform .4s cubic-bezier(.19,1,.22,1);}
.lift:hover{transform:translateY(-4px);}

.hide-scrollbar::-webkit-scrollbar{display:none;}
.hide-scrollbar{-ms-overflow-style:none; scrollbar-width:none;}

@media (prefers-reduced-motion: reduce){
.fade-in{opacity:1;transform:none;transition:none;}
.lift:hover, .btn-solid:hover{transform:none;}
html{scroll-behavior:auto;}
}