html { scroll-behavior: smooth; }
body { margin: 0; background: #F5EFE6; }
*, *::before, *::after { box-sizing: border-box; }
.qc-root { width: 100%; }
.qc-root svg { max-width: 100%; }
button, input { font: inherit; }
button:disabled { cursor: default; opacity: .55; }
:focus-visible { outline: 3px solid #9C5230; outline-offset: 5px; }
section[id] { scroll-margin-top: 100px; }
.demo-return { display: block; padding: 10px 24px; color: #3B2A20; font: 500 12px/1.5 Inter, sans-serif; text-decoration: none; }
.demo-banner { padding: 10px 20px; text-align: center; background: #3B2A20; color: #F5EFE6; font: 400 12px/1.5 Inter, sans-serif; }
@media (max-width: 640px) {
 .qc-root header nav { justify-content: center !important; }
 .qc-root header nav > div { justify-content: center; gap: 14px !important; width: 100%; order: 2; }
 .qc-root header nav > a:last-child { min-height: 44px !important; padding-inline: 18px !important; }
 .qc-root section { padding-top: 56px !important; padding-bottom: 56px !important; }
 .qc-root section > div { gap: 28px !important; }
 .qc-root h1 { font-size: clamp(48px, 11vw, 72px) !important; }
 .qc-root #story > div { padding-top: 56px !important; padding-bottom: 56px !important; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { animation: none !important; transition: none !important; }
}

@font-face { font-family: 'Qahwa Arabic'; font-style: normal; font-weight: 300; font-display: swap; src: url('./assets/arabic-300.woff2') format('woff2'); }
@font-face { font-family: 'Qahwa Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('./assets/arabic-400.woff2') format('woff2'); }
@font-face { font-family: 'Qahwa Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url('./assets/arabic-500.woff2') format('woff2'); }
@font-face { font-family: 'Qahwa Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('./assets/arabic-600.woff2') format('woff2'); }

html[lang="ar"] body,
html[lang="ar"] .demo-return,
html[lang="ar"] .demo-banner,
html[lang="ar"] .qc-root,
html[lang="ar"] .qc-root * {
 font-family: 'Qahwa Arabic', Tahoma, sans-serif !important;
 letter-spacing: normal !important;
}
html[lang="ar"] .qc-root h1 { line-height: 1.4 !important; }
html[lang="ar"] .qc-root h2,
html[lang="ar"] .qc-root h3 { line-height: 1.5 !important; }
html[lang="ar"] .qc-root p { line-height: 1.9 !important; }
html[lang="ar"] .qc-root em { font-style: normal; }
html[lang="ar"] .qc-root [style*="text-align: left"] { text-align: right !important; }
html[lang="ar"] .qc-root text { direction: rtl; unicode-bidi: plaintext; }
html[lang="ar"] .qc-root nav { text-align: right; }