@import url("https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600&display=swap");

/* Shared ET presentation tokens. Blue accent treatment requested 22 October 2026. */
:root {
  --et-accent: #76baff;
  --et-accent-strong: #3389dd;
  --et-accent-hover: #aad5ff;
  --et-accent-rgb: 118, 186, 255;
  --et-ink: #edf2f8;
  --et-muted: #a8b4c4;
  --et-surface: #18202b;
  --et-bg: #10151c;
}

/* Original official monochrome vector; only its display colour is reversed on dark surfaces. */
.et-brand-logo {
  display: block;
  width: 164px;
  height: auto;
  max-width: 100%;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  opacity: .96;
}

/* Optional English / Arabic language switch */
.language-toggle,.language-button{font:inherit;cursor:pointer}
.language-glyph{display:inline-grid;place-items:center;min-width:1.6rem;height:1.6rem;border:1px solid rgba(87,169,255,.48);border-radius:999px;color:#8ec7ff;font-weight:700;line-height:1}
.language-button{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(87,169,255,.24);background:rgba(12,31,49,.55);color:#dcecff;border-radius:999px;padding:.5rem .75rem}
.language-button:hover,.language-toggle:hover{border-color:rgba(87,169,255,.62)}
html[dir="rtl"] body{font-family:inherit}
html[dir="rtl"] .introduction,html[dir="rtl"] .conversation,html[dir="rtl"] .page-footer,html[dir="rtl"] .scene-heading{text-align:right}
html[dir="rtl"] textarea,html[dir="rtl"] input,html[dir="rtl"] select{direction:rtl;text-align:right}
html[dir="rtl"] .account-arrow,html[dir="rtl"] .quiet-link span,html[dir="rtl"] .question-chips button span{display:inline-block;transform:scaleX(-1)}

/* Stable Arabic presentation: one webfont, no observer or runtime font swapping. */
:root{--et-arabic-font:"Alexandria",Tahoma,Arial,sans-serif}
html[lang="ar"] body,html[lang="ar"] button,html[lang="ar"] input,html[lang="ar"] textarea,html[lang="ar"] select,
html[lang="ar"] a,html[lang="ar"] p,html[lang="ar"] span,html[lang="ar"] label,html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,
html[lang="ar"] h4,html[lang="ar"] h5,html[lang="ar"] h6{font-family:var(--et-arabic-font)!important;letter-spacing:0!important;font-synthesis:none!important}
html[dir="rtl"] body{direction:rtl}
html[dir="rtl"] .introduction,html[dir="rtl"] .conversation,html[dir="rtl"] .page-footer,html[dir="rtl"] .scene-heading{text-align:right}
html[dir="rtl"] .message,html[dir="rtl"] .question-chips button,html[dir="rtl"] textarea{text-align:right!important}
html[dir="rtl"] .introduction h1{font-size:clamp(44px,4vw,66px)!important;line-height:1.25!important;font-weight:400!important;letter-spacing:0!important}
html[dir="rtl"] .hero-line{font-weight:400!important;line-height:1.6!important}
html[dir="rtl"] .eyebrow,html[dir="rtl"] .portrait-caption,html[dir="rtl"] .conversation-heading,html[dir="rtl"] .message-label,html[dir="rtl"] .service-strip>span{text-transform:none!important;letter-spacing:0!important}
html[dir="rtl"] .question-chips button{flex-direction:row-reverse}
html[dir="rtl"] .text-button{margin-left:0;margin-right:auto}
html[dir="rtl"] .account-arrow{margin-left:0;margin-right:15px}
html[dir="rtl"] .quiet-link span{padding-left:0;padding-right:28px}