/* Character picker states (the rest of the page is styled inline, as exported from the design). */
.pick{width:76px;height:76px;padding:0;border-radius:16px;overflow:hidden;cursor:pointer;background:#F6F1E7;
  border:3px solid #3A3745;box-shadow:none;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.pick[aria-pressed="true"]{border-color:#F6C85A;box-shadow:4px 4px 0 #000;transform:translateY(-4px)}
.pick:focus-visible,#t-voice:focus-visible{outline:3px solid #F6C85A;outline-offset:3px}
#t-voice[data-playing="true"]{background:#F6C85A!important;color:#16151C!important;border-color:#F6C85A!important}
#t-img{transition:opacity .18s ease}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pick,#t-img{transition:none}}
/* Phones: keep the sticky bar to one row (logo + demo button); sections are reached by scrolling. */
@media (max-width:640px){header nav>div>a[href^="#"]{display:none}}

/* Language switcher */
.lang-switch{display:inline-flex;border:2px solid #3A3745;border-radius:12px;overflow:hidden}
.lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:0 8px;
  color:#D9D3E6;text-decoration:none;font-weight:700;font-size:14px}
.lang-switch a[lang="ar"]{font-family:'Rubik',sans-serif;font-size:17px}
.lang-switch a[aria-current="true"]{background:#F6F1E7;color:#16151C}
.lang-switch a:focus-visible{outline:3px solid #F6C85A;outline-offset:-3px}

/* Arabic: Rubik covers Arabic script (Bricolage Grotesque and Figtree do not). Inline styles need !important. */
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/rubik-arabic-400-normal.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}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/rubik-arabic-500-normal.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}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/rubik-arabic-700-normal.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}
@font-face{font-family:'Rubik';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/rubik-arabic-800-normal.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}
html[lang="ar"] body *:not(svg):not(svg *){font-family:'Figtree','Rubik',system-ui,sans-serif!important;letter-spacing:0!important}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{font-family:'Bricolage Grotesque','Rubik',sans-serif!important;line-height:1.25!important}
html[lang="ar"] h1 *,html[lang="ar"] h2 *,html[lang="ar"] h3 *{font-family:inherit!important}
html[lang="ar"] [style*="uppercase"]{text-transform:none!important}
/* Latin examples (English sentences) inside Arabic text keep their own direction */
html[lang="ar"] [lang="en"]{direction:ltr;unicode-bidi:isolate}