@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/IBMPlexMono-400-latin.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 Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/IBMPlexMono-500-latin.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: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/IBMPlexSans-400-latin.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: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/IBMPlexSans-500-latin.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: 400;
  font-display: swap;
  src: url(fonts/IBMPlexSansArabic-400-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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(fonts/IBMPlexSansArabic-400-latin.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: 500;
  font-display: swap;
  src: url(fonts/IBMPlexSansArabic-500-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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: 500;
  font-display: swap;
  src: url(fonts/IBMPlexSansArabic-500-latin.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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/InstrumentSerif-400i-latin.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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/InstrumentSerif-400-latin.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: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/NotoNaskhArabic-500-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/NotoNaskhArabic-500-latin.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: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/NotoNaskhArabic-700-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/NotoNaskhArabic-700-latin.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;
}


/* Search pages (sectors, comparison, FAQ): the site's palette and type, as plain readable documents. */
:root {
  --night: #081a16; --green: #0d3a2f; --green-2: #124638; --sand: #eee6d8; --paper: #f6f0e5;
  --clay: #b85c32; --clay-l: #e39a6e; --water: #8fc1b5;
  --text: #f6f0e5; --muted: rgba(246, 240, 229, 0.74); --faint: rgba(238, 230, 216, 0.14);
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --naskh: "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic", serif;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --sans-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: radial-gradient(120% 60% at 50% 0%, #15463a 0%, var(--night) 62%) no-repeat, var(--night);
  color: var(--text); font: 400 17px/1.7 var(--sans); -webkit-font-smoothing: antialiased;
}
html[lang="ar"] body { font-family: var(--sans-ar); font-size: 18px; line-height: 1.9; }
a { color: var(--clay-l); }
.wrap { width: min(860px, 100%); margin: 0 auto; padding-inline: 16px; }

.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.mark { display: flex; align-items: baseline; gap: 10px; color: var(--paper); text-decoration: none; }
.mark .en { font: 400 30px/1 var(--serif); }
.mark .ar { font: 700 24px/1 var(--naskh); }
.bar-actions { display: flex; gap: 10px; align-items: center; }
.btn { display: inline-flex; align-items: center; white-space: nowrap; border-radius: 2px; padding: 11px 16px; font: 500 14px/1 var(--sans); letter-spacing: 0.01em; text-decoration: none; border: 1px solid transparent; transition: background .2s, border-color .2s; }
html[lang="ar"] .btn { font-family: var(--sans-ar); font-size: 15px; }
.btn-clay { background: var(--clay); color: var(--paper); }
.btn-clay:hover { background: #a24f29; }
.btn-ghost { color: var(--paper); border-color: rgba(238, 230, 216, 0.28); }
.btn-ghost:hover { border-color: var(--sand); }

.crumbs { font-size: 13.5px; color: var(--muted); margin: 28px 0 0; padding: 0; list-style: none; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs li + li::before { content: "/"; margin-inline-end: 8px; opacity: .5; }
.crumbs a { color: var(--muted); }

h1 { font: 400 clamp(38px, 6vw, 60px)/1.08 var(--serif); letter-spacing: -0.01em; margin: 18px 0 18px; }
html[lang="ar"] h1 { font: 700 clamp(30px, 4.6vw, 44px)/1.45 var(--naskh); letter-spacing: 0; }
h2 { font: 400 clamp(28px, 3.6vw, 36px)/1.2 var(--serif); margin: 48px 0 14px; }
html[lang="ar"] h2 { font: 700 clamp(24px, 3vw, 30px)/1.5 var(--naskh); }
h3 { font: 600 18px/1.4 var(--sans); margin: 0 0 6px; }
html[lang="ar"] h3 { font-family: var(--sans-ar); }
.lead { font-size: 20px; color: var(--paper); max-width: 62ch; }
html[lang="ar"] .lead { font: 500 21px/1.9 var(--naskh); }
p, li { color: var(--muted); }
b { color: var(--paper); font-weight: 600; }
ul { padding-inline-start: 1.2em; }
li { margin-bottom: 10px; }
ul.qs { list-style: none; padding: 0; display: grid; gap: 10px; }
ul.qs li { margin: 0; padding: 14px 16px; border: 1px solid var(--faint); border-radius: 6px; background: rgba(8, 30, 25, 0.5); color: var(--paper); }
ul.qs li::before { content: "“"; color: var(--clay-l); margin-inline-end: 4px; }
html[lang="ar"] ul.qs li::before { content: "«"; }

.tbl { overflow-x: auto; margin: 32px 0 8px; border: 1px solid var(--faint); border-radius: 14px; }
table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 15px; }
th, td { text-align: start; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--faint); color: var(--muted); }
thead th { color: var(--paper); font-weight: 600; background: rgba(13, 58, 47, 0.6); }
tbody th { color: var(--paper); font-weight: 500; width: 24%; }
td.us { color: var(--paper); background: rgba(184, 92, 50, 0.12); }
tr:last-child th, tr:last-child td { border-bottom: 0; }
.small { font-size: 13.5px; color: var(--muted); }

.faq { display: grid; gap: 10px; margin-top: 8px; }
.faq details { border: 1px solid var(--faint); border-radius: 6px; background: rgba(8, 30, 25, 0.5); padding: 0 16px; }
.faq summary { cursor: pointer; padding: 14px 0; color: var(--paper); font-weight: 500; list-style-position: inside; }
.faq details p { margin: 0 0 16px; }

.cta { margin: 56px 0 0; padding: 28px; border-radius: 18px; background: linear-gradient(135deg, rgba(18, 70, 56, 0.9), rgba(8, 30, 25, 0.9)); border: 1px solid var(--faint); }
.cta h2 { margin-top: 0; }
.cta .btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

.links { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.links h3 { color: var(--paper); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
html[lang="ar"] .links h3 { text-transform: none; letter-spacing: 0; font-size: 15px; }
.links ul { list-style: none; padding: 0; margin: 0; }
.links li { margin: 0 0 6px; }
.links a { color: var(--sand); text-decoration: none; border-bottom: 1px solid rgba(238, 230, 216, .3); }
.links a[aria-current] { color: var(--clay-l); border-color: transparent; }

footer { margin-top: 56px; padding-block: 28px 48px; border-top: 1px solid var(--faint); font-size: 13.5px; color: rgba(246, 240, 229, .55); }
footer .row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between; }
footer a { color: var(--sand); }
@media (max-width: 560px) {
  .mark .en { font-size: 26px; } .mark .ar { font-size: 20px; }
  .btn { padding: 10px 13px; }
  .lead { font-size: 18px; }
  .cta { padding: 22px 18px; }
}
