@font-face{font-family:'IBM Plex Sans Arabic';font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:'Urbanist';font-weight:400;font-display:swap;src:url(/assets/fonts/urbanist-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Urbanist';font-weight:600;font-display:swap;src:url(/assets/fonts/urbanist-latin-600-normal.woff2) format('woff2')}

html{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;background:#FAFAF9;color:#292524;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html[lang=en]{font-family:'Urbanist','IBM Plex Sans Arabic',system-ui,sans-serif}
body{overflow-x:hidden}

/* bilingual: <ar>…</ar><en>…</en> inline; the inactive language is hidden */
ar,en{display:inline}
html[lang=ar] en,html[lang=en] ar{display:none!important}

/* Phosphor icon via mask so it takes currentColor */
.ico{display:inline-block;width:24px;height:24px;flex:none;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ico-wrap{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:999px;background:#F3F2F6;color:#7563CF}
html[dir=ltr] .flip{transform:scaleX(-1)} /* arrow-left = "forward" in RTL */

/* underlined form fields (Headspace for Work) */
.field{display:block;width:100%;background:transparent;border:0;border-bottom:1px solid #A8A29E;padding:.6rem 0;font:inherit;color:#292524;border-radius:0}
.field:focus{outline:none;border-bottom-color:#7563CF;box-shadow:0 1px 0 #7563CF}
select.field{appearance:none;background:url(/assets/icons/caret-down.svg) no-repeat;background-size:16px;background-position:left 0 center}
html[dir=ltr] select.field{background-position:right 0 center}

/* FAQ accordion (native details) */
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
details[open] .chev{transform:rotate(180deg)}
.chev{transition:transform .2s}

/* one motion: fade/translate-up once */
html.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}}

:focus-visible{outline:2px solid #7563CF;outline-offset:2px}
/* selected state (seven areas) */
.chip[aria-pressed=true]{border-color:#7563CF;background:#F3F2F6;box-shadow:inset 0 0 0 1px #7563CF}
.chip[aria-pressed=true] .chip-check{opacity:1}
.chip-check{opacity:0;transition:opacity .15s}

/* range slider (calculators): native input, token colours, 44px hit area */
.range{width:100%;height:44px;margin:0;accent-color:#7563CF;cursor:pointer}

/* benchmark ring: one metric, one graphic */
.ring{--p:79;width:200px;height:200px;border-radius:999px;background:conic-gradient(#7563CF calc(var(--p)*1%),#E7E5E4 0);display:grid;place-items:center}
.ring>span{width:164px;height:164px;border-radius:999px;background:#FAFAF9;display:grid;place-items:center}

/* inert assessment CTA until SITE.assessmentUrl is wired (looks normal by design) */
[data-start][aria-disabled=true]{pointer-events:auto}