@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../../../zajil/fonts/Manrope/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');
  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: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 100 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../../../zajil/fonts/IBM-Plex-Sans/zYXxKVElMYYaJe8bpLHnCwDKhdTEG46kmUZQCX598fQbGYTYAA.woff2) format('woff2');
  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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../../../zajil/fonts/IBM-Plex-Sans/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.woff2) format('woff2');
  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: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../../../zajil/fonts/IBM-Plex-Sans-Arabic/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YPi-OCRXMR5Kw.woff2) format('woff2');
  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: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../../../zajil/fonts/IBM-Plex-Sans-Arabic/Qw3CZRtWPQCuHme67tEYUIx3Kh0PHR9N6Ys43PWrfQ.woff2) format('woff2');
  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+１EE5D,U＋１ EE5F，U＋１ EE6１－U＋１ EE6２，U＋１ EE6４，U＋１ EE6７－U＋１ EE6Ａ，U＋１ EE6Ｃ－U＋１ EE7２，U＋１ EE7４－U＋１ EE7７，U＋１ EE7９－U＋１ EE7Ｃ，U＋１ EE7Ｅ，U＋１ EE8０－U＋１ EE8９，U＋１ EE8Ｂ－U＋１ EE9Ｂ，U＋１ EEA１－U＋１ EEA３，U＋１ EEA５－U＋１ EEA９，U＋１ EEAB－U＋１ EEBＢ，U＋１ EEF０－U＋１ EEF１;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../../../zajil/fonts/IBM-Plex-Sans-Arabic/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YOG-eCRXMR5Kw.woff2) format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../../../zajil/fonts/IBM-Plex-Sans-Arabic/Qw3CZRtWPQCuHme67tEYUIx3Kh0PHR9N6Ys93PU.woff2) format('woff2');
  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: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../../../zajil/fonts/IBM-Plex-Sans-Arabic/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YPi-OCUXMQ.woff2) format('woff2');
  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: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../../../zajil/fonts/IBM-Plex-Sans-Arabic/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YOG-eCUXMQ.woff2) format('woff2');
  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;
}

/* ============= TOKENS ============= */
@layer tokens {
    :root {
        color-scheme: light;

        /* Containers */
        --container: 1024px;
        --container-narrow: 768px;

        /* Brand: cobalt blue; #0357F2 is the primary 600 grade. */
        --blue-50: #EEF4FF;
        --blue-100: #DCE9FF;
        --blue-200: #BED5FF;
        --blue-300: #91B8FF;
        --blue-400: #5D94FF;
        --blue-500: #2D72FF;
        --blue-600: #0357F2;
        --blue-700: #0346C6;
        --blue-800: #093A98;
        --blue-900: #102D69;
        --blue-950: #0A1B40;

        --primary: var(--blue-600);
        --primary-hover: var(--blue-700);
        --primary-active: var(--blue-800);
        --primary-soft: var(--blue-50);

        /* Supporting brand: deep teal. */
        --teal-50: #ECFDF9;
        --teal-100: #CFFAF0;
        --teal-200: #A4F1E3;
        --teal-300: #71E4D2;
        --teal-400: #3DD8C5;
        --teal-500: #16B5A6;
        --teal-600: #087F76;
        --teal-700: #0D766E;
        --teal-800: #105F5A;
        --teal-900: #124D49;
        --teal-950: #0B302D;

        --secondary: var(--teal-600);
        --secondary-hover: var(--teal-700);
        --secondary-active: var(--teal-800);
        --secondary-soft: var(--teal-50);

        --accent: #04ddfd;
        --dark: #0F172A;
        --dark-light: hsl(217 33% 20% / 1);

        /* Cool neutrals. */
        --slate-0: #FFFFFF;
        --slate-50: #F8FAFC;
        --slate-100: #F1F5F9;
        --slate-200: #E2E8F0;
        --slate-300: #CBD5E1;
        --slate-400: #94A3B8;
        --slate-500: #64748B;
        --slate-600: #475569;
        --slate-700: #334155;
        --slate-800: #1E293B;
        --slate-900: #0F172A;
        --slate-950: #0B1220;

        /* Feedback ramps: pale surface, readable text, and a solid action color. */
        --green-50: #ECFDF3;
        --green-100: #D1FADF;
        --green-600: #067647;
        --green-700: #05603A;
        --green-300: #75E0A7;
        --amber-50: #FFFAEB;
        --amber-100: #FEF0C7;
        --amber-600: #9A6700;
        --amber-700: #7A5200;
        --amber-300: #FEC84B;
        --red-50: #FEF3F2;
        --red-100: #FEE4E2;
        --red-600: #B42318;
        --red-700: #912018;
        --red-300: #FDA29B;

        --success: var(--green-600);
        --success-bg: var(--green-50);
        --danger: var(--red-600);
        --danger-bg: var(--red-50);
        --warning: var(--amber-600);
        --warning-bg: var(--amber-50);
        --info: var(--blue-600);
        --info-bg: var(--blue-50);

        /* Surfaces */
        --bg-body: var(--slate-50);
        --bg-soft: var(--slate-100);
        --bg-muted: var(--slate-200);

        --bg-surface: var(--slate-0);
        --bg-surface-raised: var(--slate-0);
        --bg-code: #0F172A;

        /* Text */
        --text-heading: #0f1722;
        --text-body: #3a4250;
        --text-soft: #5d6675;
        --text-muted: #8b94a3;
        --text-invert: #ffffff;
        --text-on-primary: #ffffff;

        /* Brand gradients */
        --primary-grade: linear-gradient(135deg, #0346C6, var(--secondary));
        --secondary-grade: linear-gradient(135deg, var(--secondary) 0%, var(--accent) 100%);
        --text-gradient: linear-gradient(to var(--align2), var(--primary) 0%, var(--secondary) 100%);
        --brand-gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%);
        --hero-gradient: 
            radial-gradient(1200px 600px at 100% -10%, rgba(10, 126, 90, 0.10), transparent 60%),
            radial-gradient(800px 400px at 0% 100%, rgba(217, 164, 74, 0.10), transparent 60%);

        --hero-gradient: 
            radial-gradient(900px 440px at 92% -5%,rgba(3,87,242,.10),transparent 64%),
            radial-gradient(600px 300px at 5% 95%,rgba(0,141,163,.08),transparent 68%);

        --gradient-ambient: linear-gradient(135deg, #EEF4FF 0%, #FFFFFF 54%, #ECFDF9 100%);

        
        --dark-gradient: linear-gradient(135deg, var(--dark) 0%, var(--dark-light) 100%);

        --secondary-grade: linear-gradient(135deg, var(--primary) 0%, var(--accent, var(--secondary)) 100%);

        /* Borders */
        --border-color: rgba(15, 23, 34, 0.08);
        --border-strong: rgba(15, 23, 34, 0.16);
        --border: 1px solid var(--border-color);

        /* Typography */
        --font-heading: "Manrope", "IBM Plex Sans", "IBM Plex Sans Arabic", Tahoma, system-ui, sans-serif;
        --font-body: "IBM Plex Sans", "IBM Plex Sans Arabic", Tahoma, system-ui, sans-serif;
        --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        --line-height: 1.6;

        --fs-xs: 0.75rem;
        --fs-sm: 0.875rem;
        --fs-base: 16px;
        --fs-md: 16px;
        --fs-lg: 1.125rem;
        --fs-xl: 1.25rem;
        --fs-2xl: 1.5rem;
        --fs-3xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
        --fs-4xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
        --fs-5xl: clamp(2rem, 1.5rem + 2.4vw, 3rem);
        --fs-display: clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem);

        /* Inputs */
        --input-color: var(--text-body);
        --input-bg: var(--bg-surface);
        --input-disabled-bg: var(--bg-soft);
        --input-font-family: var(--font-body);
        --input-font-size: 0.95rem;
        --input-height: 48px;
        --input-radius: 10px;
        --input-border: 1px solid var(--border-strong);
        --input-shadow: none;
        --input-focus-shadow: 0 0 0 4px rgba(10, 126, 90, 0.15);
        --input-focus-border: 1px solid var(--primary);

        /* Radius */
        --radius: 10px;
        --radius-sm: 6px;
        --radius-md: var(--radius);
        --radius-lg: 14px;
        --radius-xl: 18px;
        --radius-xx: 24px;
        --radius-pill: 999px;

        /* Spacing */
        --space-1: 4px;
        --space-2: 8px;
        --space-3: 12px;
        --space-4: 16px;
        --space-6: 24px;
        --space-8: 32px;
        --space-12: 48px;
        --space-16: 64px;
        --space-20: 80px;
        --space-24: 96px;

        --spacing: var(--space-4);

        /* Shadows */
        --shadow-xs: 0 1px 2px rgba(15, 23, 34, 0.05);
        --shadow-sm: 0 2px 6px rgba(15, 23, 34, 0.05), 0 1px 2px rgba(15, 23, 34, 0.04);
        --shadow: 0 8px 24px rgba(15, 23, 34, 0.06), 0 2px 6px rgba(15, 23, 34, 0.04);
        --shadow-md: var(--shadow);
        --shadow-lg: 0 18px 40px rgba(15, 23, 34, 0.08), 0 6px 12px rgba(15, 23, 34, 0.04);
        --shadow-xl: 0 30px 60px rgba(15, 23, 34, 0.12), 0 10px 20px rgba(15, 23, 34, 0.06);
        --shadow-xx: 0 50px 100px rgba(15, 23, 34, 0.15);
        --shadow-glow: 0 18px 50px rgba(10, 126, 90, 0.25);
        --shadow-gold: 0 18px 50px rgba(217, 164, 74, 0.25);
        --shadow-focus: 0 0 0 4px rgba(10, 126, 90, 0.25);
        --shadow-inset: inset 0 1px 2px rgba(15, 23, 34, 0.04);

        /* Motion */
        --dur-fast: 150ms;
        --dur: 250ms;
        --dur-slow: 450ms;
        --dur-slower: 700ms;

        --ease-standard: cubic-bezier(.4, 0, .2, 1);
        --ease-in: cubic-bezier(.4, 0, 1, 1);
        --ease-out: cubic-bezier(0, 0, .2, 1);
        --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

        --transition-fast: var(--dur-fast) var(--ease-standard);
        --transition-normal: var(--dur) var(--ease-standard);
        --transition-slow: var(--dur-slow) var(--ease-standard);
        --transition-spring: var(--dur) var(--ease-spring);

        /* Z-index */
        --z-base: 1;
        --z-dropdown: 100;
        --z-sticky: 200;
        --z-header: 300;
        --z-overlay: 400;
        --z-modal: 500;
        --z-toast: 600;

        /* Layout */
        --focus-ring: 0 0 0 3px rgba(10, 126, 90, 0.35);
        --header-height: 0px;
        --sidebar-width: 240px;
        --promo-height: 0px;
        --safe-bottom: env(safe-area-inset-bottom, 0);
    }

    /* Dark theme */
    [data-theme="dark"] {
        color-scheme: dark;

        --primary: #91B8FF;
        --primary-hover: #BED5FF;
        --primary-pressed: #5D94FF;
        --on-primary: #0B1220;
        --primary-soft: #102D69;
        --primary-soft-text: #DCE9FF;
        --secondary: #71E4D2;
        --secondary-hover: #A4F1E3;
        --secondary-pressed: #3DD8C5;
        --on-secondary: #0B1220;
        --secondary-soft: #124D49;
        --secondary-soft-text: #CFFAF0;
        /* --accent: #FEC84B; */


        --bg-body: #0B1220;
        --bg-soft: #101A2C;
        --bg-muted: #243552;


        --bg-surface: #142038;
        --bg-surface-raised: #1B2A45;
        --bg-code: #060a10;

        --text-heading: #F8FAFC;
        --text-body: #CBD5E1;
        --text-soft: #CBD5E1;
        --text-muted: #A9B8CA;
        --text-invert: #0B1220;
        --text-on-primary: #ffffff;

        --text-link: #91B8FF;
        --text-link-hover: #BED5FF;

        --border-color: #64748B;
        --border-subtle: #475569;
        --border-strong: #94A3B8;


        --hero-gradient: radial-gradient(1200px 600px at 100% -10%, rgba(20, 160, 115, 0.18), transparent 60%),
                          radial-gradient(800px 400px at 0% 100%, rgba(227, 179, 94, 0.10), transparent 60%);

        --input-bg: #131922;
        --input-border: 1px solid rgba(255, 255, 255, 0.12);
        --input-focus-shadow: 0 0 0 4px rgba(20, 160, 115, 0.25);

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
        --shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        --shadow-md: var(--shadow);
        --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.5);
        --shadow-xl: 0 30px 60px rgba(0, 0, 0, 0.55);
        --shadow-glow: 0 18px 50px rgba(20, 160, 115, 0.30);
    }
}


/* Promo bar */
.promo-bar{
    color: var(--white);
    background: var(--dark-gradient);
    box-shadow: var(--shadow-md);
}


/* ============= COMPONENTS ============= */
@layer components {




    



    
    

    /* Cards */
    .card {        
        padding: 24px;
        box-shadow: var(--shadow-sm);
        transition: all var(--transition-normal);
    }
    .card:hover { 
        box-shadow: var(--shadow-md); 
    }


}



/* RTL adjustments */
[dir="rtl"] body { 
    font-family: "IBM Plex Sans Arabic", "Inter", Tahoma, system-ui, sans-serif; 
}
[dir="rtl"] .logo-item { 
    letter-spacing: 0; 
}




:is(ul, ol) {
    --_ul-bullet-width: 6px;

}

.section-eyebrow{
    /* font-family: var(--font-mono); */
    font-weight: 700;
    padding: 0;

}
.section-eyebrow::before{
    content: "—";
}

.faq-intro{
    top: calc(var(--header-height) + var(--promo-height));
}

.breadcrumb{
    margin-bottom: var(--space-4);
}
.breadcrumb li:first-child::before{
    display: none;
}

#xt-page h2{
    font-size: 22px;
    margin-top: var(--space-8);
}
#xt-page p{
    max-width: 700px;
    text-wrap: balance;
}
#xt-page .num{
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-muted);
}