/* WQ3 marketing site. Colours are the WQ3 Brand Kit tokens (docs/02-ux/brand/tokens.json, light theme).
   Tajawal, self-hosted from /assets/fonts (SIL OFL, fonts/OFL.txt): headlines 800/700, body 400/500,
   highlighted 700. No 600 weight exists, so 600 renders as 700.
   Logical properties throughout, so the same rules serve ltr and rtl. */
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/tajawal-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,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-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: "Tajawal"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/tajawal-latin-400-normal.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: "Tajawal"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/tajawal-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,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-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: "Tajawal"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/tajawal-latin-500-normal.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: "Tajawal"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/tajawal-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,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-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: "Tajawal"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/tajawal-latin-700-normal.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: "Tajawal"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/tajawal-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,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-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: "Tajawal"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/tajawal-latin-800-normal.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; }
:root {
  --paper: #eef3f2; --surface: #fff; --line: #d4dcd9; --line-strong: #74807c;
  --ink: #121a24; --ink-muted: #525c69; --teal: #0b5e55; --teal-strong: #07433d; --teal-soft: #e1f0ec;
  --danger: #a4262c;
  --font: "Tajawal", "Segoe UI", system-ui, -apple-system, "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font); color: var(--ink); background: var(--paper); line-height: 1.65; -webkit-text-size-adjust: 100%; }
html[lang="ar"] { line-height: 1.9; }
body { margin: 0; }
.wrap { max-inline-size: 72rem; margin-inline: auto; padding-inline: 1.25rem; }
h1, h2, h3 { line-height: 1.2; margin-block: 0 1rem; text-wrap: balance; font-weight: 700; }
h1 { font-weight: 800; }
strong, b { font-weight: 700; }
html[lang="ar"] :is(h1, h2, h3) { line-height: 1.5; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -0.02em; }
html[lang="ar"] h1 { letter-spacing: 0; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.15rem; }
p, li { max-inline-size: 46rem; }
p { margin-block: 0 1rem; }
a { color: var(--teal); text-underline-offset: 0.2em; }
a:hover { color: var(--teal-strong); }
:focus-visible { outline: 3px solid var(--teal-strong); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
.small { font-size: 0.9rem; color: var(--ink-muted); }

.skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -10rem; background: var(--surface); padding: 0.75rem 1rem; z-index: 10; }
.skip:focus { inset-block-start: 1rem; }
.draft { margin: 0; max-inline-size: none; padding: 0.4rem 1.25rem; background: var(--ink); color: #fff; font-size: 0.85rem; text-align: center; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.75rem; padding: 0.6rem 1.25rem; border: 2px solid var(--teal); border-radius: 0.5rem; background: var(--teal); color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--teal-strong); border-color: var(--teal-strong); color: #fff; }
.btn.ghost { background: var(--surface); color: var(--teal); }
.btn.ghost:hover { background: var(--teal-soft); color: var(--teal-strong); }
.btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--teal); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; min-block-size: 1.5rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin-block-start: 1.5rem; }
.more { font-weight: 600; }

/* Header */
header.site { background: var(--surface); border-block-end: 1px solid var(--line); }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; padding-block: 0.75rem; }
.brand { font-weight: 700; font-size: 1.2rem; color: var(--ink); text-decoration: none; margin: 0; }
header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-inline-start: auto; }
header nav > ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; margin: 0; padding: 0; align-items: center; }
header nav a:not(.btn), .dd > summary { color: var(--ink); text-decoration: none; font-weight: 500; padding-block: 0.5rem; display: inline-block; }
header nav a[aria-current="page"] { color: var(--teal); text-decoration: underline; text-decoration-thickness: 2px; }
header nav a:not(.btn):hover, .dd > summary:hover { color: var(--teal); }
.dd { position: relative; }
.dd > summary { cursor: pointer; }
.dd > ul { position: absolute; inset-block-start: 100%; inset-inline-start: -1rem; z-index: 5; min-inline-size: 14rem; margin: 0; padding: 0.5rem 1rem; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 0.5rem; box-shadow: 0 8px 24px rgb(18 26 36 / 0.12); }
.menu-btn { display: none; margin-inline-start: auto; min-block-size: 2.75rem; padding-inline: 1rem; font: inherit; font-weight: 600; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 0.5rem; cursor: pointer; }
@media (max-width: 60rem) {
  .js .menu-btn { display: inline-block; }
  .js header nav:not(.open) { display: none; }
  header nav { flex-basis: 100%; flex-direction: column; align-items: stretch; margin: 0; }
  header nav > ul { flex-direction: column; align-items: stretch; }
  .dd > ul { position: static; box-shadow: none; border: 0; padding-block: 0; }
  header nav .btn { align-self: flex-start; }
}

/* Sections */
.sec { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.sec + .sec { border-block-start: 1px solid var(--line); }
.hero { background: var(--surface); padding-block: clamp(3rem, 8vw, 6rem); }
.lead { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--ink-muted); max-inline-size: 44rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 0.75rem; padding: clamp(1.25rem, 3vw, 2rem); }
.card > :last-child { margin-block-end: 0; }
.card.tint { background: var(--teal-soft); border-color: transparent; }
.card.edge { border-inline-start: 4px solid var(--line-strong); }
.card.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.card.dark .btn { background: #fff; border-color: #fff; color: var(--ink); }
.card.dark :focus-visible { outline-color: #fff; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.grid > li { max-inline-size: none; }
.steps ol { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.5rem; }
.steps li { counter-increment: step; border-block-start: 2px solid var(--teal); padding-block-start: 1rem; }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; font-weight: 700; color: var(--teal); margin-block-end: 0.35rem; }
.scope ul { margin: 0 0 1.5rem; padding-inline-start: 1.25rem; }
.scope li { margin-block-end: 0.5rem; }
.faq details { border-block-end: 1px solid var(--line); padding-block: 0.25rem; }
.faq summary { cursor: pointer; font-weight: 600; padding-block: 0.85rem; max-inline-size: 46rem; }
.faq details p { color: var(--ink-muted); }

/* Form */
form.card { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem 1.5rem; max-inline-size: 56rem; }
form.card.narrow, .narrow { max-inline-size: 28rem; grid-template-columns: 1fr; }
.wide { grid-column: 1 / -1; max-inline-size: none; }
.field label { display: block; font-weight: 600; margin-block-end: 0.35rem; }
.req { font-weight: 400; color: var(--ink-muted); }
input:not([type="checkbox"]), select, textarea { inline-size: 100%; min-block-size: 2.75rem; padding: 0.55rem 0.75rem; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 0.5rem; }
[aria-invalid="true"] { border: 2px solid var(--danger) !important; }
.check { display: flex; gap: 0.75rem; align-items: flex-start; }
.check input { inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.3rem; flex: none; accent-color: var(--teal); }
.check label { font-weight: 400; margin: 0; }
.error { color: var(--danger); font-weight: 600; margin-block: 0.35rem 0; }
.warn { border-inline-start: 4px solid var(--line-strong); padding-inline-start: 0.75rem; color: var(--ink-muted); }

/* Privacy choices: pinned to the bottom so opening it never shifts the page (CLS). site.js pads the page by its height,
   so the submit button and any focused control can always be scrolled clear of it. */
.consent { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 20; max-block-size: 80vh; overflow-y: auto; background: var(--surface); border-block-start: 2px solid var(--teal); padding-block: 1rem; box-shadow: 0 -8px 24px rgb(18 26 36 / 0.12); }
.consent h2 { font-size: 1.15rem; margin-block-end: 0.5rem; }
.consent fieldset { border: 0; padding: 0; margin: 0 0 0.5rem; display: grid; gap: 0.5rem; }
.consent .actions { margin-block-start: 0.75rem; }

footer.site { background: var(--surface); border-block-start: 1px solid var(--line); padding-block: 2.5rem; color: var(--ink-muted); }
.foot { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; padding: 0; margin: 1rem 0; }
.disclaimer { font-size: 0.9rem; }
.root { min-block-size: 100vh; display: grid; place-content: center; justify-items: center; text-align: center; padding: 2rem; }

/* Authoring screens */
.admin main { padding-block: 2rem 4rem; }
.admin h1 { font-size: 1.75rem; }
.admin h2 { font-size: 1.25rem; margin-block-start: 2rem; }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; inline-size: 100%; background: var(--surface); font-size: 0.92rem; }
th, td { text-align: start; vertical-align: top; padding: 0.5rem 0.75rem; border-block-end: 1px solid var(--line); }
.inline { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.15rem; }
.inline input { inline-size: 11rem; min-block-size: 2.25rem; }
.admin .btn { min-block-size: 2.25rem; padding: 0.3rem 0.8rem; font-size: 0.9rem; }
code { font-size: 0.9em; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }