/* WQ3 marketing site. Colours are the WQ3 Brand Kit tokens (docs/02-ux/brand/tokens.json, light theme).
   System fonts only: no font files are shipped or fetched (brand fonts pending DEC-03).
   Logical properties throughout, so the same rules serve ltr and rtl. */
: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: "IBM Plex Sans Arabic", "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; }
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; } }